From cbe8ff9941d91a22d19afe470fbab2ecb9b59b6c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 24 Mar 2025 21:24:20 +0800
Subject: [PATCH] feat(ai-bot): integrate problem data into AI bot page
 initialization

---
 src/app/(app)/problems/[id]/@ai/@bot/page.tsx | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx b/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
index fdfb994..4a21788 100644
--- a/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
+++ b/src/app/(app)/problems/[id]/@ai/@bot/page.tsx
@@ -3,6 +3,7 @@
 import { useChat } from "@ai-sdk/react";
 import { SendHorizonal } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useProblem } from "@/hooks/use-problem";
 import MdxPreview from "@/components/mdx-preview";
 import { Textarea } from "@/components/ui/textarea";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@@ -10,21 +11,32 @@ import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
 
 export default function AiBotPage() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat();
+  const { problemId, problem } = useProblem();
+  const { messages, input, handleInputChange, handleSubmit } = useChat({
+    initialMessages: [
+      {
+        id: problemId,
+        role: "system",
+        content: `Problem description:\n${problem.description}`,
+      },
+    ],
+  });
 
   return (
     <div className="h-full flex flex-col">
       <div className="flex-1">
         <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
           <ChatMessageList>
-            {messages.map((message, index) => (
-              <ChatBubble key={index} layout="ai">
-                <ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
-                <ChatBubbleMessage layout="ai">
-                  <MdxPreview source={message.content} />
-                </ChatBubbleMessage>
-              </ChatBubble>
-            ))}
+            {messages
+              .filter((message) => message.role === "user" || message.role === "assistant")
+              .map((message, index) => (
+                <ChatBubble key={index} layout="ai">
+                  <ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
+                  <ChatBubbleMessage layout="ai">
+                    <MdxPreview source={message.content} />
+                  </ChatBubbleMessage>
+                </ChatBubble>
+              ))}
           </ChatMessageList>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>