still needa fix initial input

src/app/(root)/(routes)/results/[searchId]/page.tsx

@@ -43,9 +43,9 @@ const resultsPage = async ({ params: { searchId } }: Props) => {
   });
 
   return (
-    <div className="flex overflow-x-auto h-screen">
+    <div className="flex overflow-x-auto h-full">
       {searchResults.map((result) => (
-        <div key={result.id} className="flex-none w-1/3 p-3 border-r">
+        <div key={result.id} className="flex-none w-1/3 border-r h-full">
           <ChatComponent
             key={result.id}
             data={result}

src/app/(root)/(routes)/results/components/chat-component.tsx

@@ -48,15 +48,13 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ data, query }) => {
           "Please first summarise this case for me and then explain why this case is relevant to my situation as follow: " +
           query,
       });
-      console.log(chatArgs);
     } else {
       console.log("Have messages. Adding initial messages.");
       const simplifiedMessages = dbMessages.map(({ role, content }) => ({
         role,
         content,
       }));
       setChatArgs({ initialMessages: simplifiedMessages });
-      console.log(chatArgs);
     }
   }, [dbMessages, query]);
 
@@ -69,19 +67,21 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ data, query }) => {
     console.log("haha");
   }, [query]);
 
+  useEffect(() => {
+    console.log("chatArgs updated:", chatArgs);
+  }, [chatArgs]);
+
   console.log(chatArgs);
 
   const { messages, input, handleInputChange, handleSubmit } = useChat({
-    body: { filter: data.caseNeutralCit },
-    initialInput:
-      "Please first summarise this case for me and then explain why this case is relevant to my siutation as follow: " +
-      query,
+    ...chatArgs,
+    body: { filter: data.caseNeutralCit, searchResultId: data.id },
   });
 
   if (Object.keys(chatArgs).length == 0) return <div>Loading...</div>;
 
   return (
-    <div>
+    <div className="flex flex-col w-full h-full">
       <ResultCard data={data} />
       <ChatMessages key={data.id} messages={messages} />
       <div>
@@ -90,11 +90,11 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ data, query }) => {
           className="mt-1 mb-1 relative p-3 border-t"
         >
           <div className="flex-row space-x-2">
-            <input
-              className="resize-none overflow-auto max-h-24 border rounded w-full py-2 pl-3 pr-20 text-gray-200 leading-tight bg-black border-gray-700 duration-200 h-24"
+            <textarea
+              className="resize-none overflow-auto max-h-24 border rounded w-full p-3 pl-3 pr-20 text-gray-200 leading-tight bg-black border-gray-700 duration-200 h-20"
               value={input}
               onChange={handleInputChange}
-            ></input>
+            ></textarea>
 
             <span className="absolute inset-y-0 right-5 flex items-center pr-3 pointer-events-none text-gray-400">
               <div className="h-3 w-3">⮐</div>

src/app/(root)/layout.tsx

@@ -3,14 +3,14 @@ import { Sidebar } from "@/components/sidebar";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="h-full">
+    <div className="flex flex-col h-screen">
       <div className="fixed inset-y-0 w-full h-16 z-20">
         <Navbar />
       </div>
       <div className="hidden md:flex mt-16 h-full w-20 flex-col fixed inset-y-0 border-r">
         <Sidebar />
       </div>
-      <main className="md:pl-20 pt-16 h-full">{children}</main>
+      <main className="flex-1 md:pl-20 pt-16 overflow-auto">{children}</main>
     </div>
   );
 };

src/app/api/chat/route.ts

@@ -1,22 +1,31 @@
 import { Configuration, OpenAIApi } from 'openai-edge'
 import { Message, OpenAIStream, StreamingTextResponse } from 'ai'
 import { getContext } from '@/utils/context'
+import prismadb from '../../../lib/prismadb'
+import { auth, currentUser } from "@clerk/nextjs";
+import { NextResponse } from 'next/server';
+import { Role } from '@prisma/client';
 
 // Create an OpenAI API client (that's edge friendly!)
 const config = new Configuration({
   apiKey: process.env.OPENAI_API_KEY
 })
 const openai = new OpenAIApi(config)
 
-// IMPORTANT! Set the runtime to edge
-export const runtime = 'edge'
 
 export async function POST(req: Request) {
   try {
 
-    const { messages, filter} = await req.json()
+    const user = await currentUser();
+    if (!user || !user.id || !user.firstName) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const { messages, filter, searchResultId } = await req.json()
     const lastMessage = messages[messages.length - 1]
 
+    console.log("here is last message: ", lastMessage)
+
     const context = await getContext(lastMessage.content, '', filter)
 
     let prompt = [
@@ -40,10 +49,33 @@ export async function POST(req: Request) {
     })
 
 
-    console.log(response.statusText)
-
 
-    const stream = OpenAIStream(response)
+    const stream = OpenAIStream(response, {
+      onStart: async () => {
+        // save user message into db
+        await prismadb.message.create({
+          data:{
+            role: Role.user,
+            content: lastMessage.content,
+            userId: user.id,
+            searchResultId: searchResultId
+          }
+
+        });
+      },
+      onCompletion: async (completion) => {
+        // save ai message into db
+        await prismadb.message.create({
+          data:{
+            role: Role.assistant,
+            content: completion,
+            userId: user.id,
+            searchResultId: searchResultId
+          }
+
+        });
+      },
+    });
 
 
     return new StreamingTextResponse(stream)

src/app/api/get-messages/route.ts

@@ -2,7 +2,6 @@ import prismadb from "../../../lib/prismadb";
 import { NextResponse } from "next/server";
 
 export const POST = async (req: Request) => {
-    console.log("GET MESSAGE API IS SUMMONED")
     const { searchResultId } = await req.json();
     const _messages = await prismadb.message.findMany({
         where: {

src/app/components/chat-messages.tsx

@@ -21,7 +21,7 @@ export default function Messages({ messages }: { messages: Message[] }) {
   };
 
   return (
-    <div className="flex flex-col bg-gray-700 leading-7">
+    <div className="flex flex-col bg-gray-700 leading-7 h-full overflow-y-auto ">
       {messages.map((msg, index) => (
         <div
           key={index}
@@ -49,9 +49,15 @@ export default function Messages({ messages }: { messages: Message[] }) {
             className="cursor-pointer"
           >
             {copiedIndices[index] ? (
-              <DoneIcon className="text-white text-lg" />
+              <DoneIcon
+                className="text-white text-lg"
+                style={{ fontSize: "16px" }}
+              />
             ) : (
-              <ContentCopyIcon className="text-white text-lg" />
+              <ContentCopyIcon
+                className="text-white text-lg"
+                style={{ fontSize: "16px" }}
+              />
             )}
           </div>
         </div>

src/app/components/result-card.tsx

@@ -23,27 +23,31 @@ interface ResultCardProps {
 
 const ResultCard: React.FC<ResultCardProps> = ({ data }) => {
   return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>{data.caseName}</AccordionTrigger>
-        <AccordionContent>
-          <ul className="text-center">
-            <li>
-              <p>Action No: {data.caseActionNo}</p>
-            </li>
-            <li>
-              <p>Neutral Citation: {data.caseNeutralCit}</p>
-            </li>
-            <li>
-              <p>Date: {data.caseDate.toDateString()}</p>
-            </li>
-          </ul>
-          <div className="flex justify-center items-center mt-3">
-            <Button>Read the case</Button>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+    <div className="h-min p-3">
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger className="justify-center">
+            <div className="px-2">{data.caseName}</div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <ul className="text-center">
+              <li>
+                <p>Action No: {data.caseActionNo}</p>
+              </li>
+              <li>
+                <p>Neutral Citation: {data.caseNeutralCit}</p>
+              </li>
+              <li>
+                <p>Date: {data.caseDate.toDateString()}</p>
+              </li>
+            </ul>
+            <div className="flex justify-center items-center mt-3">
+              <Button>Read the case</Button>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
   );
 };