Conversation shellNew

$pnpm dlx shadcn@latest add @nextui/conversation-shell

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useChat } from "@ai-sdk/react";
4import { ConversationShell } from "@/components/nextui/conversation-shell";
5import { StreamingMessage } from "@/components/nextui/streaming-message";
6import { ToolCall } from "@/components/nextui/tool-call";
7
8export function Chat() {
9  const { messages, sendMessage, status, stop } = useChat();
10
11  return (
12    <ConversationShell
13      busy={status === "submitted" || status === "streaming"}
14      onStop={stop}
15      onSend={(text) => sendMessage({ text })}
16      messages={messages.map((m) => ({
17        id: m.id,
18        role: m.role === "user" ? "user" : "assistant",
19        content: m.parts.map((part, i) =>
20          part.type === "text" ? (
21            m.role === "user" ? part.text : <StreamingMessage key={i} part={part} />
22          ) : part.type.startsWith("tool-") ? (
23            <ToolCall key={i} part={part as never} />
24          ) : null,
25        ),
26      }))}
27    />
28  );
29}