AI Chatbot SDK

1"use client";
2 
3import { useChat } from "@ai-sdk/react";
4import { DefaultChatTransport } from "ai";
5import { useMemo, useState } from "react";
6 
7import { AIConversation, AIMessage, AIPromptInput, AIStatus } from "@/components/ai-elements";
8 
9export function ChatbotShell() {
10  const [input, setInput] = useState("");
11  const transport = useMemo(() => new DefaultChatTransport({ api: "/api/ai/chat" }), []);
12  const { messages, sendMessage, status } = useChat({ transport });
13  const disabled = status === "submitted" || status === "streaming";
14 
15  function submit() {
16    const text = input.trim();
17    if (!text || disabled) return;
18    sendMessage({ text });
19    setInput("");
20  }
21 
22  return (
23    <AIConversation>
24      {messages.map((message) => (
25        <AIMessage key={message.id} message={message} />
26      ))}
27      <AIStatus status={status} />
28      <AIPromptInput disabled={disabled} value={input} onSubmit={submit} onValueChange={setInput} />
29    </AIConversation>
30  );
31}