Revert "✨ caching and skeletons (#127)"

This reverts commit 15e649e.
plastic-labs · Dec 12, 2023 · a850d0e · a850d0e
1 parent 15e649e
commit a850d0e
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 295 deletions.
diff --git a/www/app/layout.tsx b/www/app/layout.tsx
@@ -1,9 +1,8 @@
 import "./globals.css";
-import "react-loading-skeleton/dist/skeleton.css";
 import type { Metadata } from "next";
 import { Space_Grotesk } from "next/font/google";
-import { PHProvider, PostHogPageview } from "./providers";
-import { Suspense } from "react";
+import { PHProvider, PostHogPageview } from './providers'
+import { Suspense } from 'react'
 
 const spacegrotesk = Space_Grotesk({ subsets: ["latin"] });
 
@@ -59,6 +58,6 @@ export default function RootLayout({
       <PHProvider>
         <body className={spacegrotesk.className}>{children}</body>
       </PHProvider>
-    </html>
+    </html >
   );
 }
diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import Image from "next/image";
-import useSWR from "swr";
 
 import banner from "@/public/bloom2x1.svg";
 import darkBanner from "@/public/bloom2x1dark.svg";
@@ -9,33 +8,41 @@ import Thoughts from "@/components/thoughts";
 import Sidebar from "@/components/sidebar";
 
 import { FaLightbulb, FaPaperPlane, FaBars } from "react-icons/fa";
-import { useRef, useEffect, useState, ElementRef } from "react";
-
-import Swal from "sweetalert2";
+import {
+  useRef,
+  useEffect,
+  useState,
+  ElementRef,
+} from "react";
+
+import Swal from "sweetalert2"
 import { useRouter } from "next/navigation";
-import { usePostHog } from "posthog-js/react";
+import { usePostHog } from 'posthog-js/react'
 
 import Link from "next/link";
 import MarkdownWrapper from "@/components/markdownWrapper";
 import { DarkModeSwitch } from "react-toggle-dark-mode";
 import { Message, Conversation, API } from "@/utils/api";
-import { getId } from "@/utils/supabase";
-import { data } from "autoprefixer";
-import { Session } from "@supabase/supabase-js";
 
 const URL = process.env.NEXT_PUBLIC_API_URL;
+const defaultMessage: Message = {
+  text: `I&apos;m your Aristotelian learning companion — here to help you follow your curiosity in whatever direction you like. My engineering makes me extremely receptive to your needs and interests. You can reply normally, and I’ll always respond!\n\nIf I&apos;m off track, just say so!\n\nNeed to leave or just done chatting? Let me know! I’m conversational by design so I’ll say goodbye 😊.`,
+  isUser: false,
+};
 
 export default function Home() {
-  const [userId, setUserId] = useState<string>();
-  const [session, setSession] = useState<Session | null>(null);
-
   const [isThoughtsOpen, setIsThoughtsOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const [thought, setThought] = useState("");
   const [canSend, setCanSend] = useState(false);
 
-  const [conversationId, setConversationId] = useState<string>();
+  const [api, setApi] = useState<API>();
+
+  const [messages, setMessages] = useState<Message[]>([defaultMessage]);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [currentConversation, setCurrentConversation] =
+    useState<Conversation>();
 
   const router = useRouter();
   const posthog = usePostHog();
@@ -51,26 +58,44 @@ export default function Home() {
 
   useEffect(() => {
     (async () => {
-      const { userId, session } = await getId();
-      setUserId(userId);
-      setSession(session);
-      setIsDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches);
-      if (!session) {
+      setIsDarkMode(
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      );
+      const api = await API.create(URL!);
+      if (!api.session) {
         Swal.fire({
           title: "Notice: Bloombot now requires signing in for usage",
           text: "Due to surging demand for Bloom we are requiring users to stay signed in to user Bloom",
           icon: "warning",
           confirmButtonColor: "#3085d6",
-          confirmButtonText: "Sign In",
-        }).then((res) => {
-          router.push("/auth");
-        });
+          confirmButtonText: "Sign In"
+        })
+          .then((res) => {
+            router.push("/auth")
+          })
       } else {
-        posthog?.identify(userId, { email: session.user.email });
+        posthog?.identify(
+          api.userId,
+          { "email": api.session.user.email }
+        );
+        setApi(api);
+        const conversations = await api.getConversations();
+        setConversations(conversations);
+        setCurrentConversation(conversations[0]);
+        setCanSend(true);
       }
     })();
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      if (!currentConversation) return;
+      const messages = await currentConversation.getMessages();
+      setMessages([defaultMessage, ...messages]);
+      // console.log("set messages", messages);
+    })();
+  }, [currentConversation]);
+
   useEffect(() => {
     const messageContainer = messageContainerRef.current;
     if (!messageContainer) return;
@@ -90,36 +115,7 @@ export default function Home() {
     };
   }, []);
 
-  const conversationsFetcher = async (userId: string) => {
-    const api = new API({ url: URL!, userId });
-    return api.getConversations();
-  };
-
-  const {
-    data: conversations,
-    mutate: mutateConversations,
-    error,
-  } = useSWR(userId, conversationsFetcher, {
-    onSuccess: (conversations) => {
-      setConversationId(conversations[0].conversationId);
-      setCanSend(true);
-    },
-  });
-
-  const messagesFetcher = async (conversationId: string) => {
-    if (!userId) return Promise.resolve([]);
-    if (!conversationId) return Promise.resolve([]);
 
-    const api = new API({ url: URL!, userId });
-    return api.getMessages(conversationId);
-  };
-
-  const {
-    data: messages,
-    mutate: mutateMessages,
-    isLoading: messagesLoading,
-    error: _,
-  } = useSWR(conversationId, messagesFetcher);
 
   async function chat() {
     const textbox = input.current!;
@@ -129,8 +125,8 @@ export default function Home() {
 
     setCanSend(false); // Disable sending more messages until the current generation is done
 
-    mutateMessages([
-      ...messages!,
+    setMessages((prev) => [
+      ...prev,
       {
         text: message,
         isUser: true,
@@ -141,10 +137,7 @@ export default function Home() {
       },
     ]);
 
-    // const reader = await currentConversation!.chat(message);
-    const reader = await conversations!
-      .find((conversation) => conversation.conversationId === conversationId)!
-      .chat(message);
+    const reader = await currentConversation!.chat(message);
 
     const messageContainer = messageContainerRef.current;
     if (messageContainer) {
@@ -174,18 +167,10 @@ export default function Home() {
           setCanSend(true); // Bloom delimeter
           continue;
         }
-        // setMessages((prev) => {
-        //   prev[prev.length - 1].text += value;
-        //   return [...prev];
-        // });
-
-        mutateMessages([
-          ...messages?.slice(0, -1)!,
-          {
-            text: messages![messages!.length - 1].text + value,
-            isUser: false,
-          },
-        ]);
+        setMessages((prev) => {
+          prev[prev.length - 1].text += value;
+          return [...prev];
+        });
 
         if (isAtBottom.current) {
           const messageContainer = messageContainerRef.current;
@@ -199,19 +184,17 @@ export default function Home() {
 
   return (
     <main
-      className={`flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative ${
-        isDarkMode ? "dark" : ""
-      }`}
+      className={`flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative ${isDarkMode ? "dark" : ""
+        }`}
     >
       <Sidebar
-        conversations={conversations || []}
-        mutateConversations={mutateConversations}
-        conversationId={conversationId}
-        setConversationId={setConversationId}
+        conversations={conversations}
+        currentConversation={currentConversation}
+        setCurrentConversation={setCurrentConversation}
+        setConversations={setConversations}
+        api={api}
         isSidebarOpen={isSidebarOpen}
         setIsSidebarOpen={setIsSidebarOpen}
-        api={new API({ url: URL!, userId: userId! })}
-        session={session}
       />
       <div className="flex flex-col w-full h-[100dvh] lg:pl-60 xl:pl-72 dark:bg-gray-900">
         <nav className="flex justify-between items-center p-4 border-b border-gray-300 dark:border-gray-700">
@@ -252,15 +235,11 @@ export default function Home() {
           className="flex flex-col flex-1 overflow-y-auto lg:px-5 dark:text-white"
           ref={messageContainerRef}
         >
-          {messagesLoading || messages === undefined ? (
-            <MessageBox loading />
-          ) : (
-            messages.map((message, i) => (
-              <MessageBox isUser={message.isUser} key={i}>
-                <MarkdownWrapper text={message.text} />
-              </MessageBox>
-            ))
-          )}
+          {messages.map((message, i) => (
+            <MessageBox isUser={message.isUser} key={i}>
+              <MarkdownWrapper text={message.text} />
+            </MessageBox>
+          ))}
         </section>
         <form
           id="send"
@@ -277,9 +256,7 @@ export default function Home() {
           <textarea
             ref={input}
             placeholder="Type a message..."
-            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-2xl border-2 resize-none ${
-              canSend ? " border-green-200" : "border-red-200 opacity-50"
-            }`}
+            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-2xl border-2 resize-none ${canSend ? " border-green-200" : "border-red-200 opacity-50"}`}
             disabled={!canSend}
             rows={1}
             onKeyDown={(e) => {
@@ -299,12 +276,12 @@ export default function Home() {
             <FaPaperPlane className="inline" />
           </button>
         </form>
-      </div>
+      </div >
       <Thoughts
         thought={thought}
         setIsThoughtsOpen={setIsThoughtsOpen}
         isThoughtsOpen={isThoughtsOpen}
       />
-    </main>
+    </main >
   );
 }
diff --git a/www/components/conversationtab.tsx b/www/components/conversationtab.tsx