Cleanup messagebox params and page component loading.

plastic-labs · Oct 10, 2024 · 318cdc7 · 318cdc7
1 parent 5b272da
commit 318cdc7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -6,9 +6,6 @@ import dynamic from "next/dynamic";
 
 import banner from "@/public/bloom2x1.svg";
 import darkBanner from "@/public/bloom2x1dark.svg";
-import MessageBox from "@/components/messagebox";
-import Sidebar from "@/components/sidebar";
-import MarkdownWrapper from "@/components/markdownWrapper";
 import { DarkModeSwitch } from "react-toggle-dark-mode";
 import { FaLightbulb, FaPaperPlane, FaBars } from "react-icons/fa";
 import Swal from "sweetalert2";
@@ -22,7 +19,15 @@ import { getSubscription } from "@/utils/supabase/queries";
 import { API } from "@/utils/api";
 import { createClient } from "@/utils/supabase/client";
 
-const Thoughts = dynamic(() => import("@/components/thoughts"));
+const Thoughts = dynamic(() => import("@/components/thoughts"), {
+  ssr: false,
+});
+const MessageBox = dynamic(() => import("@/components/messagebox"), {
+  ssr: false,
+});
+const Sidebar = dynamic(() => import("@/components/sidebar"), {
+  ssr: false,
+});
 
 const URL = process.env.NEXT_PUBLIC_API_URL;
 
@@ -79,11 +84,9 @@ export default function Home() {
         const sub = await getSubscription(supabase);
         setIsSubscribed(!!sub);
       }
-
     })();
   }, [supabase, posthog, userId]);
 
-
   useEffect(() => {
     const messageContainer = messageContainerRef.current;
     if (!messageContainer) return;
@@ -204,7 +207,6 @@ export default function Home() {
           isThinking = false;
           continue;
         }
-        console.log(value)
         setThought((prev) => prev + value);
       } else {
         if (value.includes("❀")) {
@@ -300,8 +302,7 @@ export default function Home() {
               isUser={message.isUser}
               userId={userId}
               URL={URL}
-              messageId={message.id}
-              text={message.text}
+              message={message}
               loading={messagesLoading}
               conversationId={conversationId}
               setThought={setThought}
@@ -310,7 +311,7 @@ export default function Home() {
           )) || (
             <MessageBox
               isUser={false}
-              text=""
+              message={{ id: "", text: "" }}
               loading={true}
               setThought={setThought}
               setIsThoughtsOpen={setIsThoughtsOpen}
@@ -331,9 +332,14 @@ export default function Home() {
           {/* TODO: validate input */}
           <textarea
             ref={input}
-            placeholder={isSubscribed ? "Type a message..." : "Subscribe to send messages"}
-            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 && isSubscribed ? "border-green-200" : "border-red-200 opacity-50"
-              }`}
+            placeholder={
+              isSubscribed ? "Type a message..." : "Subscribe to send messages"
+            }
+            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 && isSubscribed
+                ? "border-green-200"
+                : "border-red-200 opacity-50"
+            }`}
             rows={1}
             disabled={!isSubscribed}
             onKeyDown={(e) => {

diff --git a/www/components/messagebox.tsx b/www/components/messagebox.tsx
@@ -10,29 +10,29 @@ interface MessageBoxProps {
   isUser?: boolean;
   userId?: string;
   URL?: string;
-  messageId?: string;
   conversationId?: string;
-  text: string;
+  message: { text: string; id: string };
   loading?: boolean;
   isThoughtsOpen?: boolean;
   setIsThoughtsOpen: (isOpen: boolean) => void;
   setThought: (thought: string) => void;
 }
 
+export type Reaction = "thumbs_up" | "thumbs_down" | null;
+
 export default function MessageBox({
   isUser,
   userId,
   URL,
-  messageId,
-  text,
+  message,
   loading = false,
   setIsThoughtsOpen,
   conversationId,
   setThought,
 }: MessageBoxProps) {
   const [isThoughtLoading, setIsThoughtLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
+  const { id: messageId, text } = message;
   const shouldShowButtons = messageId !== "";
 
   const handleFetchThought = async () => {

diff --git a/www/utils/api.ts b/www/utils/api.ts
@@ -1,4 +1,4 @@
-import { Reaction } from "@/components/messagebox";
+import { type Reaction } from "@/components/messagebox";
 import { retryDBOperation, retryOpenAIOperation } from "./retryUtils";
 
 const defaultMessage: Message = {