AI Chat

1"use client";
2 
3import { useChat } from "@ai-sdk/react";
4import { DefaultChatTransport } from "ai";
5import { ArrowUpIcon, SquareIcon } from "lucide-react";
6import { useMemo, useState } from "react";
7 
8export function ChatBox() {
9  const [input, setInput] = useState("");
10  const transport = useMemo(() => new DefaultChatTransport({ api: "/api/ai/chat" }), []);
11  const { messages, sendMessage, status, stop } = useChat({ transport });
12  const running = status === "submitted" || status === "streaming";
13 
14  function submit() {
15    const text = input.trim();
16    if (!text || running) return;
17    sendMessage({ text });
18    setInput("");
19  }
20 
21  return (
22    <div className="flex flex-col gap-4 rounded-lg border p-4">
23      <div className="flex flex-col gap-3">
24        {messages.map((message) => (
25          <div key={message.id} className="rounded-md bg-muted p-3 text-sm">
26            <div className="mb-1 font-medium">{message.role}</div>
27            {message.parts.map((part, index) =>
28              part.type === "text" ? <p key={index}>{part.text}</p> : null,
29            )}
30          </div>
31        ))}
32      </div>
33      <div className="flex gap-2">
34        <textarea
35          className="min-h-24 flex-1 rounded-md border bg-background p-3 text-sm"
36          value={input}
37          onChange={(event) => setInput(event.target.value)}
38          placeholder="Ask a question..."
39        />
40        {running ? (
41          <button className="rounded-md border px-3" type="button" onClick={stop}>
42            <SquareIcon />
43          </button>
44        ) : (
45          <button className="rounded-md border px-3" type="button" onClick={submit}>
46            <ArrowUpIcon />
47          </button>
48        )}
49      </div>
50    </div>
51  );
52}