Thread

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:

boolean = false

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:

boolean = false

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:

boolean = true

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?:

MessageComponents

The component to render for each message.

MessageComponents

Message?:

ComponentType

The component to render for each message.

UserMessage?:

ComponentType

The component to render for user messages.

EditComposer?:

ComponentType

The component to render for user messages that are being edited.

AssistantMessage?:

ComponentType

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:

boolean = false

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"
      method="replace"
      autoSend
    />
  );
};
 
<ParametersTable
  type="ThreadPrimitiveSuggestionProps"
  parameters={[
    {
      name: "prompt",
      type: "string",
      description: "The suggestion's prompt.",
    },
    {
      name: "method",
      type: "'replace'",
      description:
        "How does the suggestion interact with the composer's existing value.",
    },
    {
      name: "autoSend",
      type: "boolean",
      description:
        "Whether to automatically send the suggestion when the user clicks on it.",
      default: "false",
    },
  ]}
/>;

If

Renders children if a condition is met.

ThreadPrimitiveIfProps

empty?:

boolean | undefined

Render children if the thread is empty.

running?:

boolean | undefined

Render children if the thread is running.

<Thread.If empty>
  {/* equivalent to <Thread.Empty> */}
</Thread.If>
<Thread.If empty={false}>
  {/* rendered if thread is not empty */}
</Thread.If>

Thread

ThreadPrimitiveRootProps

asChild:

ThreadPrimitiveViewportProps

asChild:

autoScroll:

ThreadPrimitiveMessagesProps

components?:

MessageComponents

Message?:

UserMessage?:

EditComposer?:

AssistantMessage?:

ThreadPrimitiveScrollToBottomProps

asChild:

ThreadPrimitiveIfProps

empty?:

running?:

On this page