``` ### Conditional Send/Cancel Button ``` !s.thread.isRunning}> Send s.thread.isRunning}> Cancel ``` ### Suggestions Display suggested prompts using the Suggestions API. See the [Suggestions guide](/docs/guides/suggestions) for detailed configuration. ``` import { SuggestionPrimitive, ThreadPrimitive } from "@assistant-ui/react"; // Configure suggestions in your runtime provider const aui = useAui({ suggestions: Suggestions(["What's the weather?", "Tell me a joke"]), }); // Display suggestions in your thread component {() => } // Custom suggestion item const SuggestionItem = () => ( ); ``` ## Component Overrides `Thread` accepts an optional `components` prop that swaps parts of the rendering without editing the copied file. All slots are optional; omitted slots keep the built-in rendering. ``` import { Thread, type ThreadComponents } from "@/components/assistant-ui/thread"; const THREAD_COMPONENTS: ThreadComponents = { ToolFallback: MyToolFallback, ToolGroup: MyToolGroup, }; export default function Chat() { return ; } ``` - `AssistantMessage?`: `ComponentType` — Replaces the entire assistant message, including the action bar and branch picker. - `Welcome?`: `ComponentType` — Replaces the welcome screen shown for a new chat. - `ToolFallback?`: `ToolCallMessagePartComponent` — Renders tool calls that have no tool UI registered by name. Registered tool UIs take precedence over this slot. - `ToolGroup?`: `ComponentType>` — Wraps runs of consecutive tool calls. Receives the group part (\`indices\`, \`status\`) and the rendered children. - `ReasoningGroup?`: `ComponentType>` — Wraps runs of consecutive reasoning parts. Receives the group part and the rendered children. Define the `components` object once at module scope (or memoize it) so message subtrees do not re-render whenever the parent re-renders. For per-tool UI, prefer registering a renderer by tool name over overriding `ToolFallback`: put `render` on the matching toolkit entry (see [Tool UI](/docs/tools/tool-ui)). `data` message parts render through renderers registered with `useAssistantDataUI`; parts without a registered renderer are not displayed. ## API Reference The following primitives are used within the Thread component and can be customized in your `/components/assistant-ui/thread.tsx` file. ### Root Contains all parts of the thread. - `asChild`: `boolean` (default `false`) — Merge props with child element instead of rendering a wrapper div. - `className?`: `string` — CSS class name. This primitive renders a `

` element unless `asChild` is set. ### Viewport The scrollable area containing all messages. Automatically scrolls to the bottom as new messages are added. - `asChild`: `boolean` (default `false`) — Merge props with child element instead of rendering a wrapper div. - `autoScroll`: `boolean` (default `true (false when turnAnchor is "top")`) — Whether to automatically scroll to the bottom when new messages are added while the viewport was previously scrolled to the bottom. - `turnAnchor`: `"top" | "bottom"` (default `"bottom"`) — Controls scroll anchoring behavior for new messages. "top" anchors new user messages at the top of the viewport. - `topAnchorMessageClamp`: `{ tallerThan?: string; visibleHeight?: string }` (default `{ tallerThan: "10em", visibleHeight: "6em" }`) — Clamps tall user messages when turnAnchor is "top". Messages up to \`tallerThan\` stay fully visible; taller messages show only \`visibleHeight\` of their bottom edge above the assistant response. - `tallerThan`: `string` (default `"10em"`) — Clamp messages taller than this CSS length. - `visibleHeight`: `string` (default `"6em"`) — Visible portion of a clamped message's bottom edge. - `scrollToBottomOnRunStart`: `boolean` (default `true`) — Whether to scroll to bottom when a new run starts. - `scrollToBottomOnInitialize`: `boolean` (default `true`) — Whether to scroll to bottom when thread history is first loaded. - `scrollToBottomOnThreadSwitch`: `boolean` (default `true`) — Whether to scroll to bottom when switching to a different thread. - `className?`: `string` — CSS class name. This primitive renders a `

` element unless `asChild` is set. ### Messages Renders all messages in the thread. This primitive renders a separate component for each message. ``` {({ message }) => { if (message.role === "user") return ; return ; }} ``` - `components`: `MessageComponents` — Components to render for different message types. - `Message?`: `ComponentType` — Default component for all messages. - `UserMessage?`: `ComponentType` — Component for user messages. - `EditComposer?`: `ComponentType` — Component for user messages being edited. - `AssistantMessage?`: `ComponentType` — Component for assistant messages. - `SystemMessage?`: `ComponentType` — Component for system messages. ### MessageByIndex Renders a single message at the specified index. ``` ``` - `index`: `number` — The index of the message to render. - `components?`: `MessageComponents` — Components to render for different message types. ### Empty Renders children only when there are no messages in the thread. - `children?`: `ReactNode` — Content to display when the thread is empty. ### ScrollToBottom A button to scroll the viewport to the bottom. Disabled when the viewport is already at the bottom. - `asChild`: `boolean` (default `false`) — Merge props with child element instead of rendering a wrapper button. - `className?`: `string` — CSS class name. This primitive renders a `