ThreadPrimitive
A conversation between a user and an assistant.
Anatomy
import { ThreadPrimitive } from "@assistant-ui/react";
const Thread = () => (
<ThreadPrimitive.Root>
<ThreadPrimitive.Viewport>
<ThreadPrimitive.Empty>...</ThreadPrimitive.Empty>
<ThreadPrimitive.Messages components={...} />
</ThreadPrimitive.Viewport>
<Composer />
</ThreadPrimitive.Root>
);API Reference
Root
Containts all parts of the thread.
This primitive renders a <div> element unless asChild is set.
ThreadPrimitiveRootProps
asChild:
Change the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
Viewport
The scrollable area containing all messages. Anchors scroll to the bottom as new messages are added.
This primitive renders a <div> element unless asChild is set.
ThreadPrimitiveViewportProps
asChild:
Change the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
autoScroll:
Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport is was previously scrolled to the bottom.
Messages
Renders all messages. This primitive renders a separate component for each message.
ThreadPrimitiveMessagesProps
components?:
The component to render for each message.
MessageComponents
Message?:
The component to render for each message.
UserMessage?:
The component to render for user messages.
EditComposer?:
The component to render for user messages that are being edited.
AssistantMessage?:
The component to render for assistant messages.
MessageByIndex
Renders a single message at the specified index in the current thread.
<ThreadPrimitive.MessageByIndex
index={0}
components={{
UserMessage: MyUserMessage,
AssistantMessage: MyAssistantMessage
}}
/>ThreadPrimitive.MessageByIndex.Props
index:
The index of the message to render.
components?:
The component configuration for rendering the message.
MessageComponents
Message?:
The component to render for each message.
UserMessage?:
The component to render for user messages.
EditComposer?:
The component to render for user messages that are being edited.
AssistantMessage?:
The component to render for assistant messages.
Empty
Renders children only when there are no messages.
ScrollToBottom
A button to scroll the viewport to the bottom. Disabled when the viewport is already at bottom.
This primitive renders a <button> element unless asChild is set.
ThreadPrimitiveScrollToBottomProps
asChild:
Change the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
ThreadPrimitive.Suggestion
Shows a suggestion to the user. When the user clicks on the suggestion, the composer's value is set to the suggestion's prompt.
This primitive renders a <button> element unless asChild is set.
import { ThreadPrimitive } from "@assistant-ui/react";
const Suggestion = () => {
return (
<ThreadPrimitive.Suggestion
prompt="I need help with product search"
send
/>
);
};ThreadPrimitiveSuggestionProps
prompt?:
The suggestion's prompt.
send?:
When true, automatically sends the message. When false, replaces or appends the composer text with the suggestion - depending on the value of `clearComposer`
clearComposer:
Whether to clear the composer after sending. When send is set to false, determines if composer text is replaced with suggestion (true, default), or if the suggestion's prompt is appended to the composer text (false).
autoSend?:
Deprecated. Use 'send' instead.
method?:
Deprecated. This parameter is no longer used.
If
Renders children if a condition is met.
ThreadPrimitiveIfProps
empty?:
Render children if the thread is empty.
running?:
Render children if the thread is running.
disabled?:
Render children if the thread is disabled.
loading?:
Render children if the thread is loading.
new?:
Render children if the thread is new.
<Thread.If empty>
{/* equivalent to <Thread.Empty> */}
</Thread.If>
<Thread.If empty={false}>
{/* rendered if thread is not empty */}
</Thread.If>
<Thread.If loading>
{/* rendered if thread is loading */}
</Thread.If>
<Thread.If new>
{/* rendered if thread is new */}
</Thread.If>