Runtime Hooks

ThreadListRuntime

Runtime for accessing and managing the list of threads.

useAui (Thread List Actions)

Access thread list actions via useAui:

import { useAui } from "@assistant-ui/react";

const aui = useAui();

// Switch threads
await aui.threads().switchToNewThread();
await aui.threads().switchToThread(threadId);

// Access the main thread runtime
const mainThread = aui.threads().main;

// Access a thread by ID
const thread = aui.threads().getById(threadId);

// Access thread list items
const mainItem = aui.threads().mainItem;
const itemByIndex = aui.threads().getItemByIndex(0);
const itemById = aui.threads().getItemById(threadId);
const archivedItem = aui.threads().getArchivedItemByIndex(0);

// Get current state
const state = aui.threads().getState();
const threadIds = state.threadIds;
const archivedThreadIds = state.archivedThreadIds;
ThreadListRuntime
getState: () => ThreadListState

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

main: ThreadRuntime

getById: (threadId: string) => ThreadRuntime

mainItem: ThreadListItemRuntime

getItemById: (threadId: string) => ThreadListItemRuntime

getItemByIndex: (idx: number) => ThreadListItemRuntime

getArchivedItemByIndex: (idx: number) => ThreadListItemRuntime

switchToThread: (threadId: string) => Promise<void>

switchToNewThread: () => Promise<void>

getLoadThreadsPromise: () => Promise<void>

useAuiState (Thread List State)

Access thread list state reactively:

import { useAuiState } from "@assistant-ui/react";

const threads = useAuiState((s) => s.threads.threadIds);
const isLoading = useAuiState((s) => s.threads.isLoading);
ThreadListState
mainThreadId: string

newThreadId: string | undefined

threadIds: readonly string[]

archivedThreadIds: readonly string[]

isLoading: boolean

threadItems: Readonly<Record<string, Omit<ThreadListItemState, "isMain" | "threadId">>>