logoassistant-ui
API ReferenceRuntime Hooks

ThreadRuntime

useThreadRuntime

Get the thread runtime object:

import { useThreadRuntime } from "@assistant-ui/react";
 
const thread = useThreadRuntime();

ThreadRuntime

path:

ThreadRuntimePath

The selector for the thread runtime.

composer:

ThreadComposerRuntime

The thread composer runtime.

getState:

() => ThreadState

Gets a snapshot of the thread state.

append:

(message: CreateAppendMessage) => void

Append a new message to the thread.

startRun:

{ (parentId: string | null): void; (config: CreateStartRunConfig): void; }

subscribe:

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

cancelRun:

() => void

getModelContext:

() => ModelContext

getModelConfig:

() => ModelContext

export:

() => ExportedMessageRepository

import:

(repository: ExportedMessageRepository) => void

getMesssageByIndex:

(idx: number) => MessageRuntime

getMesssageById:

(messageId: string) => MessageRuntime

stopSpeaking:

() => void

unstable_on:

(event: ThreadRuntimeEventType, callback: () => void) => Unsubscribe

useThread

Access the thread state directly:

import { useThread } from "@assistant-ui/react";
 
const thread = useThread();
const isRunning = useThread((m) => m.isRunning);

ThreadState

threadId:

string

The thread ID.

metadata:

ThreadListItemState

The thread metadata.

isDisabled:

boolean

Whether the thread is disabled. Disabled threads cannot receive new messages.

isRunning:

boolean

Whether the thread is running. A thread is considered running when there is an active stream connection to the backend.

capabilities:

RuntimeCapabilities

The capabilities of the thread, such as whether the thread supports editing, branch switching, etc.

messages:

readonly ThreadMessage[]

The messages in the currently selected branch of the thread.

suggestions:

readonly ThreadSuggestion[]

Follow up message suggestions to show the user.

extras:

unknown

Custom extra information provided by the runtime.

speech:

SpeechState | undefined

useThreadMessages

Work with the messages within a thread:

import { useThreadMessages } from "@assistant-ui/react";
 
const messages = useThreadMessages();
const firstMessage = useThreadMessages((m) => m[0]);

ThreadMessagesState

messages:

readonly ThreadMessage[]

The messages in the thread.

useThreadViewport

Manage thread viewport state (e.g., scrolling):

import { useThreadViewport } from "@assistant-ui/react";
 
const threadViewport = useThreadViewport();
const isAtBottom = useThreadViewport((m) => m.isAtBottom);

ThreadViewportState

isAtBottom:

boolean

Whether the thread is at the bottom.

scrollToBottom:

() => void

A function to scroll to the bottom.

onScrollToBottom:

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

A function to subscribe to scroll to bottom events.

Previous

AssistantRuntime

Next

ComposerRuntime

On this page

Edit on Github