feat: add WebSearchToolUI component and input UI, integrate Radix UI scroll area

components/chatPanel.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import type React from "react"
+
+import { useRef, useEffect } from "react"
+import { useChat } from "@ai-sdk/react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Loader2, Send } from "lucide-react"
+
+
+export default function ChatPanel() {
+    const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
+        api: "/api/chat",
+        maxSteps: 5, // Allow multiple steps for complex diagram generation
+    })
+    const messagesEndRef = useRef<HTMLDivElement>(null)
+
+    // Scroll to bottom when messages change
+    useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+        }
+    }, [messages])
+
+
+    const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        if (input.trim()) {
+            handleSubmit(e)
+        }
+    }
+
+    return (
+        <Card className="h-full flex flex-col">
+            <CardHeader className="pb-2">
+                <CardTitle>Chat with Diagram Generator</CardTitle>
+            </CardHeader>
+            <CardContent className="flex-grow overflow-hidden p-4">
+                <ScrollArea className="h-full pr-4">
+                    {messages.length === 0 ? (
+                        <div className="text-center text-gray-500 mt-8">
+                            <p>Start a conversation to generate a diagram.</p>
+                            <p className="text-sm mt-2">Try: "Create a flowchart for user authentication"</p>
+                        </div>
+                    ) : (
+                        messages.map((message) => (
+                            <div key={message.id} className={`mb-4 ${message.role === "user" ? "text-right" : "text-left"}`}>
+                                <div
+                                    className={`inline-block px-4 py-2 rounded-lg max-w-[85%] break-words ${message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                                        }`}
+                                >
+                                    {message.content}
+                                </div>
+                                {message.toolInvocations?.map((tool, index) => (
+                                    <div key={index} className="mt-2 text-left">
+                                        <div className="text-xs text-gray-500">
+                                            {tool.state === "call" ? "Generating diagram..." : "Diagram generated"}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ))
+                    )}
+                    <div ref={messagesEndRef} />
+                </ScrollArea>
+            </CardContent>
+            <CardFooter className="pt-2">
+                <form onSubmit={onFormSubmit} className="w-full flex space-x-2">
+                    <Input
+                        value={input}
+                        onChange={handleInputChange}
+                        placeholder="Describe the diagram you want to create..."
+                        disabled={isLoading}
+                        className="flex-grow"
+                    />
+                    <Button type="submit" disabled={isLoading || !input.trim()}>
+                        {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                    </Button>
+                </form>
+            </CardFooter>
+        </Card>
+    )
+}
+