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.

`useThreadViewportAutoScroll`

Returns a ref, which when set, will implement the viewport auto scroll behavior. Only useful you are creating a custom viewport component.

import { useThreadViewportAutoScroll } from "@assistant-ui/react";
 
const Viewport = () => {
  const autoScrollRef = useThreadViewportAutoScroll();
 
  return <div ref={autoScrollRef}>...</div>;
};

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.

`useThreadEmpty`

import { useThreadEmpty } from "@assistant-ui/react";
 
const ThreadEmpty = () => {
  const isEmpty = useThreadEmpty();
 
  return isEmpty ? <Empty /> : <NotEmpty />;
};

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.

`useThreadScrollToBottom`

import { useThreadScrollToBottom } from "@assistant-ui/react";
 
const ScrollToBottom = () => {
  const scrollToBottom = useThreadScrollToBottom();
 
  // scroll to bottom action is not available
  if (!scrollToBottom) return null;
 
  return <button onClick={scrollToBottom}>Scroll to bottom</button>;
};

`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",
    },
  ]}
/>;

`useThreadSuggestion`

import { useThreadSuggestion } from "@assistant-ui/react";
 
const Suggestion = () => {
  const suggestion = useThreadSuggestion({
    prompt: "Write me a poem about the weather",
    method: "replace",
    autoSend: true,
  });
 
  return (
    <button onClick={suggestion}>Write me a poem about the weather</button>
  );
};

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>

`useThreadIf`

import { useThreadIf } from "@assistant-ui/react";
 
const ThreadIf = () => {
  const isEmpty = useThreadIf({ empty: true });
 
  return isEmpty ? <Empty /> : <NotEmpty />;
};

Thread

ThreadPrimitiveRootProps

asChild:

ThreadPrimitiveViewportProps

asChild:

autoScroll:

ThreadPrimitiveMessagesProps

components?:

MessageComponents

Message?:

UserMessage?:

EditComposer?:

AssistantMessage?:

ThreadPrimitiveScrollToBottomProps

asChild:

ThreadPrimitiveIfProps

empty?:

running?:

On this page