ContentPart

Each message can have any number of content parts. Content parts are usually one of text, audio or tool-call. Additionally, image and file content parts are available, but rarely used, since these are usually included as content parts of message attachments.

Styled Components

Plain text is usually used for user messages. Markdown text is usually used for assistant messages.

Plain Text

import { ContentPart } from "@assistant/react";
 
<ContentPart.Text />;

Markdown Text

import { makeMarkdownText } from "@assistant-ui/react-markdown";
 
const MarkdownText = makeMarkdownText();
 
<MarkdownText />;

Thread Config

The <Thread /> compoonent allows customization of content part UI in the following ways:

<Thread
  tools={[MyToolUI]}
  assistantMessage={{
    components: { Text: MarkdownText, ToolFallback: MyToolFallback }
  }}
/>

Primitives

Plain Text

import { ContentPartPrimitive } from "@assistant/react";
 
<ContentPartPrimitive.Text />;

Markdown Text

import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
 
const MarkdownTextPrimitive = makeMarkdownTextPrimitive();
 
<MarkdownTextPrimitive />;

Context Provider

Content part context is provided by MessagePrimitive.Content or TextContentPartProvider

MessagePrimitive.Content

import { MessagePrimitive } from "@assistant/react";
 
<MessagePrimitive.Content
  components={{
    Text: MyText,
    Audio: MyAudio,
    tools: {
      by_name: {
        get_weather: MyWeatherToolUI,
      },
      Fallback: MyFallbackToolUI,
    },
  }}
/>;

TextContentPartProvider

This is a helper context provider to allow you to reuse the content part components outside of a message content part.

import { TextContentPartProvider } from "@assistant/react";
 
<TextContentPartProvider text="Hello world" isRunning={false}>
  <ContentPart.Text />
</TextContentPartProvider>;

Runtime API

`useContentPartRuntime`

import { useContentPartRuntime } from "@assistant/react";
 
const contentPartRuntime = useContentPartRuntime();

ContentPartRuntime

addToolResult:

(result: any) => void

Add tool result to a tool call content part that has no tool result yet. This is useful when you are collecting a tool result via user input ("human tool calls").

path:

ContentPartRuntimePath

getState:

() => ContentPartState

subscribe:

(callback: () => void) => Unsubscribe

`useContentPart`

import { useContentPart } from "@assistant/react";
 
const contentPart = useContentPart();

TextContentPartState

type:

"text"

text:

string

status:

{ readonly type: "running"; } | { readonly type: "complete"; } | { readonly type: "incomplete"; readonly reason: "length" | "cancelled" | "content-filter" | "other" | "error"; readonly error?: unknown; } | { readonly type: "requires-action"; readonly reason: "tool-calls"; }

AudioContentPartState

type:

"audio"

audio:

{ readonly data: string; readonly format: "mp3" | "wav"; }

status:

ImageContentPartState

type:

"image"

image:

string

status:

UIContentPartState

type:

"ui"

display:

React.ReactNode

status:

ToolCallContentPartState

type:

"tool-call"

toolCallId:

string

toolName:

string

args:

Record<string | number, unknown>

result?:

unknown

isError?:

boolean | undefined

argsText:

string

status:

`useContentPartText`

import { useContentPartText } from "@assistant/react";
 
const contentPartText = useContentPartText();

ContentPart

ContentPartRuntime

addToolResult:

path:

getState:

subscribe:

TextContentPartState

type:

text:

status:

AudioContentPartState

type:

audio:

status:

ImageContentPartState

type:

image:

status:

UIContentPartState

type:

display:

status:

ToolCallContentPartState

type:

toolCallId:

toolName:

args:

result?:

isError?:

argsText:

status:

TextContentPartState

type:

text:

status:

On this page