feat(ai-bot): integrate problem data into AI bot page initialization

This commit is contained in:
cfngc4594 2025-03-24 21:24:20 +08:00
parent 8d8b6666b4
commit cbe8ff9941

View File

@ -3,6 +3,7 @@
import { useChat } from "@ai-sdk/react"; import { useChat } from "@ai-sdk/react";
import { SendHorizonal } from "lucide-react"; import { SendHorizonal } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useProblem } from "@/hooks/use-problem";
import MdxPreview from "@/components/mdx-preview"; import MdxPreview from "@/components/mdx-preview";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -10,14 +11,25 @@ import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble"; import { ChatBubble, ChatBubbleAvatar, ChatBubbleMessage } from "@/components/ui/chat/chat-bubble";
export default function AiBotPage() { 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 ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="flex-1"> <div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-238px)]">
<ChatMessageList> <ChatMessageList>
{messages.map((message, index) => ( {messages
.filter((message) => message.role === "user" || message.role === "assistant")
.map((message, index) => (
<ChatBubble key={index} layout="ai"> <ChatBubble key={index} layout="ai">
<ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} /> <ChatBubbleAvatar src="" fallback={message.role === "user" ? "US" : "AI"} />
<ChatBubbleMessage layout="ai"> <ChatBubbleMessage layout="ai">