## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/chat ``` ```bash pnpm dlx shadcn@latest add @dotui/chat ``` ```bash yarn dlx shadcn@latest add @dotui/chat ``` ```bash bun x shadcn@latest add @dotui/chat ``` ## Usage [#usage] ```tsx import { Conversation, Message, MessageContent } from "@/ui/chat" ``` ```tsx How do I center a div? Center it with place-items. ``` ## Anatomy [#anatomy] `Conversation` is the scroll container for the message list. Each `Message` sets the role its children style against: `user` renders `MessageContent` as a contained bubble aligned to the end of the row, `assistant` renders it plain and full-width. `MessageAvatar` is optional and sits on the sender's side of the row. ```tsx import { Conversation, Message, MessageAvatar, MessageContent } from "@/ui/chat" ``` ```tsx {/* message body */} ``` `PromptInput` is the composer. It renders a form, so `PromptInputSubmit` — or pressing Enter in the textarea — submits it; Shift+Enter inserts a newline. The textarea grows with its content, and the shell is the same input group the rest of your fields use, so it follows their style, radius and density. ```tsx import { PromptInput, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, } from "@/ui/chat" ``` ```tsx {/* attachments, tools… */} ``` ## Examples [#examples] ## API Reference [#api-reference] ### Conversation [#conversation] ### Message [#message] ### MessageContent [#messagecontent] ### MessageAvatar [#messageavatar] ### PromptInput [#promptinput] ### PromptInputTextarea [#promptinputtextarea] ### PromptInputToolbar [#promptinputtoolbar] ### PromptInputSubmit [#promptinputsubmit]