Skip to content

Chat

A whole agent chat: Conversation with its empty state, scroll button and Markdown download, then Messages with Reasoning, a Tool call, a Confirmation, Sources, versions and a Checkpoint, and Prompt Input with Suggestions, Model Selector and Context. Replies are scripted.

Built fromcomponents/conversation.tsxcomponents/message.tsxcomponents/prompt-input.tsx

Design assistant

Ask about your design system

Try a suggestion below, or type a question.

Usage

Chat usage
import { Bubble, BubbleContent } from "@/components/bubble";import { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationItem, ConversationScrollButton } from "@/components/conversation";import { Message, MessageContent } from "@/components/message";import { PromptInput, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea } from "@/components/prompt-input";import type { ChatStatus } from "@/components/lib/agent-types";import type { PromptInputMessage } from "@/components/prompt-input";
type ChatMessage = { id: string; role: "user" | "assistant"; parts: { type: string; text?: string }[] };
export function ChatUsage({  messages,  status,  sendMessage,  stop,}: {  messages: ChatMessage[];  status: ChatStatus;  sendMessage: (message: PromptInputMessage) => Promise<void>;  stop: () => void;}) {  return (    <div className="flex h-dvh flex-col gap-4 p-4">      <header className="flex items-center justify-between">        <h1 className="text-h3 font-semibold">Chat</h1>        <ConversationDownload messages={messages} />      </header>      <Conversation className="flex-1">        <ConversationContent>          {messages.length === 0 ? (            <ConversationEmptyState title="No messages yet" description="Ask a question to start." />          ) : (            messages.map((message) => (              <ConversationItem key={message.id} messageId={message.id}>                <Message align={message.role === "user" ? "end" : "start"}>                  <MessageContent>                    {message.parts.map((part, index) =>                      part.type === "text" ? (                        <Bubble key={index} variant={message.role === "user" ? "primary" : "ghost"} align={message.role === "user" ? "end" : "start"}>                          <BubbleContent>{part.text}</BubbleContent>                        </Bubble>                      ) : null,                    )}                  </MessageContent>                </Message>              </ConversationItem>            ))          )}        </ConversationContent>        <ConversationScrollButton />      </Conversation>      <PromptInput onSubmit={sendMessage}>        <PromptInputBody>          <PromptInputTextarea />        </PromptInputBody>        <PromptInputFooter>          <PromptInputSubmit status={status} onStop={stop} />        </PromptInputFooter>      </PromptInput>    </div>  );}

When to use

Use when

The frame of an agent chat, on Message Scroller: ConversationContent (a named region holding the message log), ConversationEmptyState before the first message, ConversationScrollButton, and ConversationDownload, which saves { role, parts } messages (useChat's shape) as Markdown. The Chat example on /components/agents puts every agent component together

Don’t use when

A conversation without agent features, where Message Scroller on its own is enough; a feed that isn't a conversation