Decomposition

Overview

The Styled Components can be decomposed into smaller components. At each level, you can swap out a specific component with your own custom component.

Thread

Renders an entire conversation thread.

import {
  Thread,
  ThreadWelcome,
  Composer,
  type ThreadConfig,
} from "@assistant-ui/react";
 
const MyThread: FC<ThreadConfig> = (config) => {
  return (
    <Thread.Root config={config}>
      <Thread.Viewport>
        <ThreadWelcome />
        <Thread.Messages />
        <Thread.FollowupSuggestions />
        <Thread.ViewportFooter>
          <Thread.ScrollToBottom />
          <Composer />
        </Thread.ViewportFooter>
      </Thread.Viewport>
    </Thread.Root>
  );
};

Usage:

<MyThread />

Thread.Root

Contains all parts of the thread. Accepts a config prop which is used by many other styled components.

Thread.Viewport

The scrollable area containing all messages. Anchors scroll to the bottom as new messages are added.

Thread.Messages

Renders all messages. This renders a separate component for each message (passed to the components prop).

Thread.ViewportFooter

Renders the footer of the thread viewport. This is the sticky footer that does not scroll with the messages.

Thread.ScrollToBottom

A button to scroll the viewport to the bottom. Hidden when the viewport is already at bottom.

ThreadWelcome

Renders the welcome message when no messages are present.

import { ThreadWelcome } from "@assistant-ui/react";
 
const MyThreadWelcome: FC = () => {
  return (
    <ThreadWelcome.Root>
      <ThreadWelcome.Center>
        <ThreadWelcome.Avatar />
        <ThreadWelcome.Message />
      </ThreadWelcome.Center>
      <ThreadWelcome.Suggestions />
    </ThreadWelcome.Root>
  );
};

Usage:

Decompose Thread into MyThread and use MyThreadWelcome instead of ThreadWelcome.

const MyThread: FC<ThreadConfig> = (config) => {
  ...
  <MyThreadWelcome />
  ...
};

import { ThreadWelcome } from "@assistant-ui/react";
 
const MyThreadWelcomeSuggestions: FC = () => {
  return (
    <div className="aui-thread-welcome-suggestion-container">
      <ThreadWelcome.Suggestion prompt="Write me a poem about the weather" />
      <ThreadWelcome.Suggestion prompt="What is assistant-ui?" />
    </div>
  );
};

ThreadWelcome.Suggestion

A conversation starter suggestion.

Composer

Renders the composer.

import { Composer } from "@assistant-ui/react";
 
const MyComposer: FC = () => {
  return (
    <Composer.Root>
      <Composer.Attachments />
      <Composer.AddAttachment />
      <Composer.Input autoFocus />
      <Composer.Action />
    </Composer.Root>
  );
};

Usage:

Decompose Thread into MyThread and use MyComposer instead of Composer.

const MyThread: FC<ThreadConfig> = (config) => {
  ...
  <MyComposer />
  ...
};

import { Composer, ThreadPrimitive } from "@assistant-ui/react";
 
const MyComposerAction: FC = () => {
  return (
    <>
      <ThreadPrimitive.If running={false}>
        <ComposerSend />
      </ThreadPrimitive.If>
      <ThreadPrimitive.If running>
        <ComposerCancel />
      </ThreadPrimitive.If>
    </>
  );
};

import { AttachmentUI } from "@assistant-ui/react";
 
const MyAttachmentUI: FC = () => {
  return (
    <AttachmentUI.Root>
      attachment
      <AttachmentUI.Remove />
    </AttachmentUI.Root>
  );
};

import { AssistantMessage } from "@assistant-ui/react";
 
const MyAssistantMessage: FC = () => {
  return (
    <AssistantMessage.Root>
      <AssistantMessage.Avatar />
      <AssistantMessage.Content />
      <BranchPicker />
      <AssistantActionBar />
    </AssistantMessage.Root>
  );
};

Usage:

Decompose Thread into MyThread and pass MyAssistantMessage to Thread.MEssages

const MyThread: FC<ThreadConfig> = (config) => {
  ...
  <Thread.Messages components={{ AssistantMessage: MyAssistantMessage }} />
  ...
};

import { AssistantActionBar } from "@assistant-ui/react";
 
const MyAssistantActionBar: FC = () => {
  return (
    <AssistantActionBar.Root
      hideWhenRunning
      autohide="not-last"
      autohideFloat="single-branch"
    >
      <AssistantActionBar.SpeechControl />
      <AssistantActionBar.Copy />
      <AssistantActionBar.Reload />
      <AssistantActionBar.FeedbackPositive />
      <AssistantActionBar.FeedbackNegative />
    </AssistantActionBar.Root>
  );
};

Usage:

Decompose AssistantMessage into MyAssistantMessage and use MyAssistantActionBar instead of AssistantActionBar.

const MyAssistantMessage: FC = () => {
  ...
  <MyAssistantActionBar />
  ...
};

import { BranchPicker } from "@assistant-ui/react";
 
const MyBranchPicker: FC = () => {
  return (
    <BranchPicker.Root hideWhenSingleBranch>
      <BranchPicker.Previous />
      <BranchPicker.State />
      <BranchPicker.Next />
    </BranchPicker.Root>
  );
};

Usage:

Decompose AssistantMessage and UserMessage and use MyBranchPicker instead of BranchPicker.

const MyAssistantMessage: FC = () => {
  ...
  <MyBranchPicker />
  ...
};

const MyUserMessage: FC = () => {
  ...
  <MyBranchPicker />
  ...
};

import { BranchPicker } from "@assistant-ui/react";
 
const MyBranchPickerState: FC = () => {
  return (
    <span className="aui-branch-picker-state">
      <BranchPicker.Number /> / <BranchPicker.Count />
    </span>
  );
};

import { UserMessage } from "@assistant-ui/react";
 
const MyUserMessage: FC = () => {
  return (
    <UserMessage.Root>
      <UserMessage.Attachments />
      <UserMessage.Content />
      <UserActionBar />
      <BranchPicker />
    </UserMessage.Root>
  );
};

Usage:

Decompose Thread into MyThread and pass MyUserMessage to Thread.Messages

const MyThread: FC<ThreadConfig> = (config) => {
  ...
  <Thread.Messages components={{ UserMessage: MyUserMessage }} />
  ...
};

import { UserActionBar } from "@assistant-ui/react";
 
const MyUserActionBar: FC = () => {
  return (
    <UserActionBar.Root hideWhenRunning autohide="not-last">
      <UserActionBar.Edit />
    </UserActionBar.Root>
  );
};

Usage:

Decompose UserMessage into MyUserMessage and use MyUserActionBar instead of UserActionBar.

const MyUserMessage: FC = () => {
  ...
  <MyUserActionBar />
  ...
};

import { UserAttachment } from "@assistant-ui/react";
 
const MyUserAttachment: FC = () => {
  return <UserAttachment.Root>attachment</UserAttachment.Root>;
};

UserAttachment.Root

Contains all parts of the user attachment.

EditComposer

Renders a user message being edited.

import { EditComposer } from "@assistant-ui/react";
 
const MyEditComposer: FC = () => {
  return (
    <EditComposer.Root>
      <EditComposer.Input />
      <EditComposer.Footer>
        <EditComposer.Cancel />
        <EditComposer.Send />
      </EditComposer.Footer>
    </EditComposer.Root>
  );
};

Usage:

Decompose Thread into MyThread and pass MyEditComposer to Thread.Messages.

const MyThread: FC<ThreadConfig> = (config) => {
  ...
  <Thread.Messages components={{ EditComposer: MyEditComposer }} />
  ...
};

import { AssistantModal, Thread, type ThreadConfig } from "@assistant-ui/react";
 
const MyAssistantModal: FC<ThreadConfig> = (config) => {
  return (
    <AssistantModal.Root config={config}>
      <AssistantModal.Trigger />
      <AssistantModal.Content>
        <Thread />
      </AssistantModal.Content>
    </AssistantModal.Root>
  );
};

Usage:

<MyAssistantModal />

ThreadList

Renders a thread list.

import { ThreadList, ThreadListItem } from "@assistant-ui/react";
 
const MyThreadList = () => {
  return (
    <ThreadList.Root>
      <ThreadList.New />
      <ThreadList.Items />
    </ThreadList.Root>
  );
};

ThreadListItem

Renders a thread list item.

import { ThreadListItem, ThreadListItemPrimitive } from "@assistant-ui/react";
 
const MyThreadListItem = () => {
  return (
    <ThreadListItem.Root>
      <ThreadListItemTrigger>
        <ThreadListItemTitle />
      </ThreadListItemTrigger>
      <ThreadListItem.Archive />
    </ThreadListItem.Root>
  );
};

Decomposition

On this page