Merge branch 'new-ui' of https://github.com/Dhravya/supermemory into new-ui

2 files changed, 90 insertions, 1 deletions

diff --git a/apps/web/src/components/ChatMessage.tsx b/apps/web/src/components/ChatMessage.tsx
new file mode 100644
index 00000000..a8199758
--- /dev/null
+++ b/apps/web/src/components/ChatMessage.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { User } from 'next-auth';
+import { User2 } from 'lucide-react';
+import Image from 'next/image';
+
+function ChatMessage({
+  message,
+  user,
+}: {
+  message: string;
+  user: User | 'ai';
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div
+        className={`font-bold ${!(user === 'ai') && 'text-xl '} flex flex-col md:flex-row items-center gap-4`}
+      >
+        <Avatar>
+          {user === 'ai' ? (
+            <Image
+              src="/logo.png"
+              width={48}
+              height={48}
+              alt="AI"
+              className="rounded-md w-12 h-12"
+            />
+          ) : user?.image ? (
+            <>
+              <AvatarImage
+                className="h-6 w-6 rounded-lg"
+                src={user?.image}
+                alt="user pfp"
+              />
+              <AvatarFallback>
+                {user?.name?.split(' ').map((n) => n[0])}{' '}
+              </AvatarFallback>
+            </>
+          ) : (
+            <User2 strokeWidth={1.3} className="h-6 w-6" />
+          )}
+        </Avatar>
+        <div className="ml-4">{message}</div>
+      </div>
+      <div className="w-full h-0.5 bg-gray-700 my-2 md:my-0 md:mx-4 mt-8"></div>
+    </div>
+  );
+}
+
+export { ChatMessage };
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index b77106a9..3c338526 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { FilterCombobox } from "./Sidebar/FilterCombobox";
 import { Textarea2 } from "./ui/textarea";
 import { ArrowRight } from "lucide-react";
@@ -8,6 +8,9 @@ import useViewport from "@/hooks/useViewport";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import SearchResults from "./SearchResults";
+import { ChatHistory } from "../../types/memory";
+import { ChatMessage } from "./ChatMessage";
+import { useSession } from "next-auth/react";
 
 function supportsDVH() {
   try {
@@ -26,7 +29,34 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const [searchResults, setSearchResults] = useState<string[]>([]);
   const [isAiLoading, setIsAiLoading] = useState(false);
 
+  const { data: session } = useSession();
+
+  // Variable to keep track of the chat history in this session
+  const [chatHistory, setChatHistory] = useState<ChatHistory[]>([]);
+
+  // TEMPORARY solution: Basically this is to just keep track of the sources used for each chat message
+  // Not a great solution
+  const [chatTextSourceDict, setChatTextSourceDict] = useState<
+    Record<string, string>
+  >({});
+
+  // helper function to append a new msg
+  const appendToChatHistory = useCallback(
+    (role: "user" | "model", content: string) => {
+      setChatHistory((prev) => [
+        ...prev,
+        {
+          role,
+          parts: [{ text: content }],
+        },
+      ]);
+    },
+    [],
+  );
+
+  // This is the streamed AI response we get from the server.
   const [aiResponse, setAIResponse] = useState("");
+
   const [toBeParsed, setToBeParsed] = useState("");
 
   const textArea = useRef<HTMLTextAreaElement>(null);
@@ -155,6 +185,15 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
         hide ? "" : "main-hidden",
       )}
     >
+      <div className="flex w-full flex-col">
+        {chatHistory.map((chat, index) => (
+          <ChatMessage
+            key={index}
+            message={chat.parts[0].text}
+            user={chat.role === "model" ? "ai" : session?.user!}
+          />
+        ))}
+      </div>
       <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
         Ask your Second brain
       </h1>