Skip to content

Chat React

React bindings for agent-sdk chat module.

Headless hooks and components that wrap IChatClient for building chat UIs with minimal boilerplate.

Defined in: chat/react/RemoteChatClient.ts:59

Client-side interface for interacting with a remote chat server. Fully self-contained — no shared base with IChatRuntime. Extends IProviderClient for provider CRUD (ISP). Used by React components and remote clients.

new RemoteChatClient(options): RemoteChatClient

Defined in: chat/react/RemoteChatClient.ts:70

RemoteChatClientOptions

RemoteChatClient

get activeSessionId(): ChatId | null

Defined in: chat/react/RemoteChatClient.ts:115

ChatId | null

IChatClient.activeSessionId

get selectedProviderId(): string | null

Defined in: chat/react/RemoteChatClient.ts:95

string | null

IChatClient.selectedProviderId

get status(): RuntimeStatus

Defined in: chat/react/RemoteChatClient.ts:78

RuntimeStatus

IChatClient.status

abort(): void

Defined in: chat/react/RemoteChatClient.ts:223

void

IChatClient.abort

createProvider(config): Promise<ProviderConfig>

Defined in: chat/react/RemoteChatClient.ts:257

Omit<ProviderConfig, "id" | "createdAt">

Promise<ProviderConfig>

IChatClient.createProvider

createSession(options): Promise<ChatSession<Record<string, unknown>>>

Defined in: chat/react/RemoteChatClient.ts:119

CreateSessionOptions

Promise<ChatSession<Record<string, unknown>>>

IChatClient.createSession

deleteProvider(id): Promise<void>

Defined in: chat/react/RemoteChatClient.ts:268

string

Promise<void>

IChatClient.deleteProvider

deleteSession(id): Promise<void>

Defined in: chat/react/RemoteChatClient.ts:141

ChatIdLike

Promise<void>

IChatClient.deleteSession

dispose(): Promise<void>

Defined in: chat/react/RemoteChatClient.ts:82

Promise<void>

IChatClient.dispose

getContextStats(sessionId): Promise<ContextStats | null>

Defined in: chat/react/RemoteChatClient.ts:154

Fetch context window stats from server. Returns null if stats not available (e.g. no messages sent yet).

ChatIdLike

Promise<ContextStats | null>

IChatClient.getContextStats

getSession(id): Promise<ChatSession<Record<string, unknown>> | null>

Defined in: chat/react/RemoteChatClient.ts:128

ChatIdLike

Promise<ChatSession<Record<string, unknown>> | null>

IChatClient.getSession

listBackends(): Promise<BackendInfo[]>

Defined in: chat/react/RemoteChatClient.ts:243

Promise<BackendInfo[]>

IChatClient.listBackends

listModels(): Promise<ModelInfo[]>

Defined in: chat/react/RemoteChatClient.ts:237

Promise<ModelInfo[]>

IChatClient.listModels

listProviders(): Promise<ProviderConfig[]>

Defined in: chat/react/RemoteChatClient.ts:251

Promise<ProviderConfig[]>

IChatClient.listProviders

listSessions(_options?): Promise<ChatSession<Record<string, unknown>>[]>

Defined in: chat/react/RemoteChatClient.ts:135

SessionListOptions

Promise<ChatSession<Record<string, unknown>>[]>

IChatClient.listSessions

onSelectionChange(callback): () => void

Defined in: chat/react/RemoteChatClient.ts:105

SelectionChangeCallback

(): void

void

IChatClient.onSelectionChange

onSessionChange(callback): () => void

Defined in: chat/react/RemoteChatClient.ts:277

() => void

(): void

void

IChatClient.onSessionChange

selectProvider(providerId): void

Defined in: chat/react/RemoteChatClient.ts:99

string

void

IChatClient.selectProvider

send(sessionId, message, options?): AsyncIterable<ChatEvent>

Defined in: chat/react/RemoteChatClient.ts:172

Send a message. Options are optional — the server handler resolves model and backend from provider selection state. Compare with IChatRuntime.send() where RuntimeSendOptions is required.

ChatIdLike

string

SendMessageOptions

AsyncIterable<ChatEvent>

IChatClient.send

switchSession(id): Promise<ChatSession<Record<string, unknown>>>

Defined in: chat/react/RemoteChatClient.ts:161

ChatIdLike

Promise<ChatSession<Record<string, unknown>>>

IChatClient.switchSession

updateProvider(id, changes): Promise<void>

Defined in: chat/react/RemoteChatClient.ts:263

string

Partial<Omit<ProviderConfig, "id" | "createdAt">>

Promise<void>

IChatClient.updateProvider

Defined in: chat/react/auth/types.ts:8

Props passed to per-backend auth form components. Each backend implements its own form using these props.

auth: UseRemoteAuthReturn

Defined in: chat/react/auth/types.ts:10

The remote auth hook instance, pre-configured for this backend.

onAuthComplete: () => void

Defined in: chat/react/auth/types.ts:12

Called when authentication completes successfully.

void


Defined in: chat/react/BackendSelector.ts:9

Props for the BackendSelector component.

backends: BackendInfo[]

Defined in: chat/react/BackendSelector.ts:10

optional className: string

Defined in: chat/react/BackendSelector.ts:12

onSelect: (name) => void

Defined in: chat/react/BackendSelector.ts:11

string

void


Defined in: chat/react/ChatHeader.ts:15

Props for the ChatHeader component.

optional backends: BackendInfo[]

Defined in: chat/react/ChatHeader.ts:23

Available backends list.

optional BackendSelectorComponent: ComponentType<BackendSelectorProps>

Defined in: chat/react/ChatHeader.ts:33

Slot override for BackendSelector.

optional hasProviders: boolean

Defined in: chat/react/ChatHeader.ts:21

Whether providers are configured (hides model selector when true).

optional models: ModelOption[]

Defined in: chat/react/ChatHeader.ts:25

Available models list.

optional ModelSelectorComponent: ComponentType<ModelSelectorProps>

Defined in: chat/react/ChatHeader.ts:35

Slot override for ModelSelector.

optional onBackendSelect: (name) => void

Defined in: chat/react/ChatHeader.ts:29

Backend selection handler.

string

void

optional onModelSelect: (modelId) => void

Defined in: chat/react/ChatHeader.ts:31

Model selection handler.

string

void

optional selectedModel: string

Defined in: chat/react/ChatHeader.ts:27

Currently selected model.

optional showBackendSelector: boolean

Defined in: chat/react/ChatHeader.ts:17

Whether to show backend selector. Default: false.

optional showModelSelector: boolean

Defined in: chat/react/ChatHeader.ts:19

Whether to show model selector. Default: true.


Defined in: chat/react/ChatInputArea.ts:16

Props for the ChatInputArea component.

optional activeProviderId: string

Defined in: chat/react/ChatInputArea.ts:30

Active provider ID.

optional ComposerComponent: ComponentType<ComposerProps>

Defined in: chat/react/ChatInputArea.ts:40

Slot override for Composer.

optional isGenerating: boolean

Defined in: chat/react/ChatInputArea.ts:22

Whether generation is in progress.

optional models: ModelOption[]

Defined in: chat/react/ChatInputArea.ts:28

Available models.

optional onSelectModel: (modelId) => void

Defined in: chat/react/ChatInputArea.ts:36

Model selection handler.

string

void

optional onSelectProvider: (id) => void

Defined in: chat/react/ChatInputArea.ts:34

Provider selection handler.

string

void

onSend: (message) => void

Defined in: chat/react/ChatInputArea.ts:18

Send message handler.

string

void

optional onSettingsClick: () => void

Defined in: chat/react/ChatInputArea.ts:38

Settings button handler.

void

optional onStop: () => void

Defined in: chat/react/ChatInputArea.ts:20

Stop generation handler.

void

optional placeholder: string

Defined in: chat/react/ChatInputArea.ts:24

Placeholder text for the textarea.

optional ProviderModelSelectorComponent: ComponentType<ProviderModelSelectorProps>

Defined in: chat/react/ChatInputArea.ts:42

Slot override for ProviderModelSelector.

optional providers: ProviderConfig[]

Defined in: chat/react/ChatInputArea.ts:26

Available providers.

optional selectedModel: string

Defined in: chat/react/ChatInputArea.ts:32

Selected model.

optional usage: ChatUsage | null

Defined in: chat/react/ChatInputArea.ts:44

Token usage data to display.


Defined in: chat/react/ChatLayout.ts:11

Props for the ChatLayout component.

children: ReactNode

Defined in: chat/react/ChatLayout.ts:13

Main chat content (thread, input area, etc.).

optional className: string

Defined in: chat/react/ChatLayout.ts:19

CSS class on the root element.

optional overlay: ReactNode | ReactNode[]

Defined in: chat/react/ChatLayout.ts:17

Modal/overlay content. Accepts a single node or array of nodes.

optional sidebar: ReactNode

Defined in: chat/react/ChatLayout.ts:15

Sidebar content (thread list, session list, etc.).


Defined in: chat/react/ChatSettingsOverlay.ts:13

Props for the ChatSettingsOverlay component.

optional authBaseUrl: string

Defined in: chat/react/ChatSettingsOverlay.ts:21

Auth API base URL.

optional onAuthCompleted: (backend) => void

Defined in: chat/react/ChatSettingsOverlay.ts:29

Called when authentication succeeds. Parent should refresh providers.

string

void

onClose: () => void

Defined in: chat/react/ChatSettingsOverlay.ts:17

Close handler.

void

optional onProviderCreated: (provider) => void

Defined in: chat/react/ChatSettingsOverlay.ts:23

Provider created handler.

string

string

string

void

optional onProviderDeleted: (id) => void

Defined in: chat/react/ChatSettingsOverlay.ts:25

Provider deleted handler.

string

void

optional onProviderUpdated: (id, changes) => void

Defined in: chat/react/ChatSettingsOverlay.ts:27

Provider updated handler.

string

Partial<ProviderConfig>

void

open: boolean

Defined in: chat/react/ChatSettingsOverlay.ts:15

Whether the overlay is visible.

optional providers: ProviderConfig[]

Defined in: chat/react/ChatSettingsOverlay.ts:19

Available providers.

optional ProviderSettingsComponent: ComponentType<ProviderSettingsProps>

Defined in: chat/react/ChatSettingsOverlay.ts:31

Slot override for ProviderSettings.


Defined in: chat/react/ChatUI.ts:80

Props for the ChatUI composite component.

optional authBaseUrl: string

Defined in: chat/react/ChatUI.ts:96

Base URL for auth API (needed by ProviderSettings).

optional className: string

Defined in: chat/react/ChatUI.ts:86

CSS class on the root element.

optional placeholder: string

Defined in: chat/react/ChatUI.ts:98

Placeholder text for the Composer textarea.

runtime: IChatClient

Defined in: chat/react/ChatUI.ts:82

The chat runtime or client instance. ChatUI wraps it in ChatProvider. Accepts IChatClient.

optional showBackendSelector: boolean

Defined in: chat/react/ChatUI.ts:92

Show the backend selector in header. Default: false.

optional showModelSelector: boolean

Defined in: chat/react/ChatUI.ts:90

Show the model selector header. Default: true.

optional showProviderSelector: boolean

Defined in: chat/react/ChatUI.ts:94

Show the provider selector near composer. Default: auto (true when providers available).

optional showSidebar: boolean

Defined in: chat/react/ChatUI.ts:88

Show the session sidebar. Default: true.

optional slots: ChatUISlots

Defined in: chat/react/ChatUI.ts:84

Slot overrides for sub-components.


Defined in: chat/react/ChatUI.ts:50

Slot overrides for ChatUI sub-components.

optional authDialog: ReactNode

Defined in: chat/react/ChatUI.ts:70

Custom auth dialog element rendered when provided.

optional backendSelector: ComponentType<BackendSelectorProps>

Defined in: chat/react/ChatUI.ts:60

Replace the BackendSelector component.

optional composer: ComponentType<ComposerProps>

Defined in: chat/react/ChatUI.ts:54

Replace the Composer component.

optional contextStats: ComponentType<ContextStatsDisplayProps>

Defined in: chat/react/ChatUI.ts:68

Replace the ContextStatsDisplay component.

optional modelSelector: ComponentType<ModelSelectorProps>

Defined in: chat/react/ChatUI.ts:58

Replace the ModelSelector component (used in header when no providers).

optional providerModelSelector: ComponentType<ProviderModelSelectorProps>

Defined in: chat/react/ChatUI.ts:64

Replace the unified ProviderModelSelector component (near composer).

optional providerSelector: ComponentType<ProviderSelectorProps>

Defined in: chat/react/ChatUI.ts:62

Replace the ProviderSelector component (legacy, use providerModelSelector).

optional providerSettings: ComponentType<ProviderSettingsProps>

Defined in: chat/react/ChatUI.ts:66

Replace the ProviderSettings component.

optional renderMessage: (message, index) => ReactNode

Defined in: chat/react/ChatUI.ts:72

Custom message renderer (forwarded to ThreadProvider).

ChatMessage

number

ReactNode

optional renderThinkingBlock: (part, index) => ReactNode

Defined in: chat/react/ChatUI.ts:76

Custom thinking block renderer (forwarded to ThreadProvider).

ReasoningPart

number

ReactNode

optional renderToolCall: (part, index) => ReactNode

Defined in: chat/react/ChatUI.ts:74

Custom tool call renderer (forwarded to ThreadProvider).

ToolCallPart

number

ReactNode

optional thread: ComponentType<ThreadProps>

Defined in: chat/react/ChatUI.ts:52

Replace the Thread component.

optional threadList: ComponentType<ThreadListProps>

Defined in: chat/react/ChatUI.ts:56

Replace the ThreadList (sidebar) component.


Defined in: chat/react/useChat.ts:18

Token usage data from the last completed response.

completionTokens: number

Defined in: chat/react/useChat.ts:20

optional model: string

Defined in: chat/react/useChat.ts:22

promptTokens: number

Defined in: chat/react/useChat.ts:19

totalTokens: number

Defined in: chat/react/useChat.ts:21


Defined in: chat/react/Composer.ts:11

Props for the Composer component.

optional className: string

Defined in: chat/react/Composer.ts:18

optional disabled: boolean

Defined in: chat/react/Composer.ts:15

optional isGenerating: boolean

Defined in: chat/react/Composer.ts:14

optional maxRows: number

Defined in: chat/react/Composer.ts:17

onSend: (text) => void

Defined in: chat/react/Composer.ts:12

string

void

optional onStop: () => void

Defined in: chat/react/Composer.ts:13

void

optional placeholder: string

Defined in: chat/react/Composer.ts:16


Defined in: chat/react/ContextStatsDisplay.ts:5

Props for the ContextStatsDisplay component.

optional className: string

Defined in: chat/react/ContextStatsDisplay.ts:9

CSS class on the root element.

stats: ContextStats | null

Defined in: chat/react/ContextStatsDisplay.ts:7

Context stats from runtime.getContextStats(sessionId). Null = nothing to display.


Defined in: chat/react/MarkdownRenderer.ts:4

Props for the MarkdownRenderer component.

content: string

Defined in: chat/react/MarkdownRenderer.ts:5

optional renderCode: (code, language?) => ReactNode

Defined in: chat/react/MarkdownRenderer.ts:6

string

string

ReactNode

optional renderLink: (href, text) => ReactNode

Defined in: chat/react/MarkdownRenderer.ts:7

string

string

ReactNode


Defined in: chat/react/Message.ts:16

Props for the Message component.

message: ChatMessage

Defined in: chat/react/Message.ts:17

optional renderFile: (part, index) => ReactNode

Defined in: chat/react/Message.ts:22

FilePart

number

ReactNode

optional renderReasoning: (part, index) => ReactNode

Defined in: chat/react/Message.ts:19

ReasoningPart

number

ReactNode

optional renderSource: (part, index) => ReactNode

Defined in: chat/react/Message.ts:21

SourcePart

number

ReactNode

optional renderText: (part, index) => ReactNode

Defined in: chat/react/Message.ts:18

TextPart

number

ReactNode

optional renderToolCall: (part, index) => ReactNode

Defined in: chat/react/Message.ts:20

ToolCallPart

number

ReactNode


Defined in: chat/react/useModels.ts:5

Model display option returned by useModels (mapped from core ModelInfo).

id: string

Defined in: chat/react/useModels.ts:6

name: string

Defined in: chat/react/useModels.ts:7

optional provider: string

Defined in: chat/react/useModels.ts:10

Provider/backend name for multi-provider context.

optional tier: string

Defined in: chat/react/useModels.ts:8


Defined in: chat/react/ModelSelector.ts:13

Props for the ModelSelector component.

optional allowFreeText: boolean

Defined in: chat/react/ModelSelector.ts:20

Allow free-text model input when models list is empty. Default: true.

optional className: string

Defined in: chat/react/ModelSelector.ts:18

models: ModelOption[]

Defined in: chat/react/ModelSelector.ts:14

onSelect: (modelId) => void

Defined in: chat/react/ModelSelector.ts:16

string

void

optional placeholder: string

Defined in: chat/react/ModelSelector.ts:17

optional selectedModel: string

Defined in: chat/react/ModelSelector.ts:15


Defined in: chat/react/useToolApproval.ts:5

A pending tool call requiring user approval.

messageId: string

Defined in: chat/react/useToolApproval.ts:9

toolArgs: Record<string, unknown>

Defined in: chat/react/useToolApproval.ts:8

toolCallId: string

Defined in: chat/react/useToolApproval.ts:6

toolName: string

Defined in: chat/react/useToolApproval.ts:7


Defined in: chat/react/PermissionDialog.ts:5

Props for PermissionDialog.

optional className: string

Defined in: chat/react/PermissionDialog.ts:18

onApprove: (toolCallId) => void

Defined in: chat/react/PermissionDialog.ts:9

Called when user approves a tool call.

string

void

optional onApproveAll: () => void

Defined in: chat/react/PermissionDialog.ts:13

Optional: approve all pending at once.

void

onDeny: (toolCallId) => void

Defined in: chat/react/PermissionDialog.ts:11

Called when user denies a tool call.

string

void

optional onDenyAll: () => void

Defined in: chat/react/PermissionDialog.ts:15

Optional: deny all pending at once.

void

optional renderArgs: (args, toolName) => ReactNode

Defined in: chat/react/PermissionDialog.ts:17

Custom renderer for tool arguments.

Record<string, unknown>

string

ReactNode

requests: PendingToolRequest[]

Defined in: chat/react/PermissionDialog.ts:7

List of pending tool requests awaiting approval.


Defined in: chat/react/ProviderModelSelector.ts:14

A unified item rendered in the ProviderModelSelector dropdown.

id: string

Defined in: chat/react/ProviderModelSelector.ts:15

label: string

Defined in: chat/react/ProviderModelSelector.ts:16

optional sublabel: string

Defined in: chat/react/ProviderModelSelector.ts:17

optional tier: string

Defined in: chat/react/ProviderModelSelector.ts:18

type: "model" | "provider"

Defined in: chat/react/ProviderModelSelector.ts:19


Defined in: chat/react/ProviderModelSelector.ts:23

Props for the ProviderModelSelector component.

optional activeProviderId: string

Defined in: chat/react/ProviderModelSelector.ts:29

Currently selected provider ID.

optional className: string

Defined in: chat/react/ProviderModelSelector.ts:40

optional models: ModelOption[]

Defined in: chat/react/ProviderModelSelector.ts:27

Available models. Used when providers is empty or undefined.

optional onSelectModel: (modelId) => void

Defined in: chat/react/ProviderModelSelector.ts:35

Called when a model is selected (fallback mode).

string

void

optional onSelectProvider: (id) => void

Defined in: chat/react/ProviderModelSelector.ts:33

Called when a provider is selected.

string

void

optional onSettingsClick: () => void

Defined in: chat/react/ProviderModelSelector.ts:37

Called when settings gear is clicked.

void

optional placeholder: string

Defined in: chat/react/ProviderModelSelector.ts:39

Placeholder text for the trigger button.

optional providers: ProviderConfig[]

Defined in: chat/react/ProviderModelSelector.ts:25

Configured providers (backend + model combos). When non-empty, provider mode is used.

optional selectedModel: string

Defined in: chat/react/ProviderModelSelector.ts:31

Currently selected model ID (fallback mode).


Defined in: chat/react/ProviderSelector.ts:13

Props for the ProviderSelector component.

optional activeProviderId: string

Defined in: chat/react/ProviderSelector.ts:15

optional className: string

Defined in: chat/react/ProviderSelector.ts:18

onSelect: (id) => void

Defined in: chat/react/ProviderSelector.ts:16

string

void

optional onSettingsClick: () => void

Defined in: chat/react/ProviderSelector.ts:17

void

providers: ProviderConfig[]

Defined in: chat/react/ProviderSelector.ts:14


Defined in: chat/react/ProviderSettings.ts:19

Props for the ProviderSettings component.

optional authBaseUrl: string

Defined in: chat/react/ProviderSettings.ts:27

optional className: string

Defined in: chat/react/ProviderSettings.ts:28

optional onAuthCompleted: (backend) => void

Defined in: chat/react/ProviderSettings.ts:26

Called when authentication succeeds (before configure step). Parent should refresh providers.

string

void

optional onClose: () => void

Defined in: chat/react/ProviderSettings.ts:21

void

optional onProviderCreated: (p) => void

Defined in: chat/react/ProviderSettings.ts:22

ProviderConfig

void

optional onProviderDeleted: (id) => void

Defined in: chat/react/ProviderSettings.ts:23

string

void

optional onProviderUpdated: (id, changes) => void

Defined in: chat/react/ProviderSettings.ts:24

string

string

string

void

providers: ProviderConfig[]

Defined in: chat/react/ProviderSettings.ts:20


Defined in: chat/react/RemoteChatClient.ts:48

Standard server endpoint contract. Server implementations expose these routes to work with RemoteChatClient.

POST {baseUrl}/sessions/create — Create session GET {baseUrl}/sessions/{id} — Get session GET {baseUrl}/sessions — List sessions DELETE {baseUrl}/sessions/{id} — Delete session GET {baseUrl}/sessions/{id}/context-stats — Get context window stats POST {baseUrl}/send — Send message (SSE stream response) POST {baseUrl}/abort — Abort current stream GET {baseUrl}/models — List models GET {baseUrl}/backends — List backends POST {baseUrl}/model/switch — Switch model POST {baseUrl}/provider/switch — Switch provider (backend + model) GET {baseUrl}/providers — List providers POST {baseUrl}/providers — Create provider PUT {baseUrl}/providers/{id} — Update provider DELETE {baseUrl}/providers/{id} — Delete provider

baseUrl: string

Defined in: chat/react/RemoteChatClient.ts:50

Base URL for API endpoints (e.g. “/api” or “https://example.com/api”)

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/RemoteChatClient.ts:54

Custom fetch implementation for testability

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/RemoteChatClient.ts:52

Optional headers for all requests (e.g. auth tokens)


Defined in: chat/react/ThinkingBlock.ts:4

Props for the ThinkingBlock component.

optional defaultOpen: boolean

Defined in: chat/react/ThinkingBlock.ts:7

optional isStreaming: boolean

Defined in: chat/react/ThinkingBlock.ts:6

text: string

Defined in: chat/react/ThinkingBlock.ts:5


Defined in: chat/react/ThreadList.ts:45

Props for the ThreadList component.

optional activeSessionId: string

Defined in: chat/react/ThreadList.ts:47

optional className: string

Defined in: chat/react/ThreadList.ts:53

optional onCreate: () => void

Defined in: chat/react/ThreadList.ts:49

void

optional onDelete: (id) => void

Defined in: chat/react/ThreadList.ts:50

string

void

optional onSearchChange: (query) => void

Defined in: chat/react/ThreadList.ts:52

string

void

onSelect: (id) => void

Defined in: chat/react/ThreadList.ts:48

string

void

optional searchQuery: string

Defined in: chat/react/ThreadList.ts:51

sessions: SessionItem[]

Defined in: chat/react/ThreadList.ts:46


Defined in: chat/react/Thread.ts:15

Props for the Thread component.

optional autoScroll: boolean

Defined in: chat/react/Thread.ts:18

optional className: string

Defined in: chat/react/Thread.ts:19

optional isGenerating: boolean

Defined in: chat/react/Thread.ts:17

messages: ChatMessage<unknown>[]

Defined in: chat/react/Thread.ts:16

optional virtualize: boolean | VirtualizeOptions

Defined in: chat/react/Thread.ts:25

Enable windowed rendering for large message lists. Pass true for defaults or an options object. When enabled, only visible messages (plus overscan) are mounted.


Defined in: chat/react/ThreadSlots.ts:19

Props for ThreadProvider.

children: ReactNode

Defined in: chat/react/ThreadSlots.ts:20

optional renderMessage: (message, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:11

ChatMessage

number

ReactNode

ThreadSlotOverrides.renderMessage

optional renderThinkingBlock: (part, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:13

ReasoningPart

number

ReactNode

ThreadSlotOverrides.renderThinkingBlock

optional renderToolCall: (part, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:12

ToolCallPart

number

ReactNode

ThreadSlotOverrides.renderToolCall


Defined in: chat/react/ThreadSlots.ts:10

Slot override functions for Thread customization.

optional renderMessage: (message, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:11

ChatMessage

number

ReactNode

optional renderThinkingBlock: (part, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:13

ReasoningPart

number

ReactNode

optional renderToolCall: (part, index) => ReactNode

Defined in: chat/react/ThreadSlots.ts:12

ToolCallPart

number

ReactNode


Defined in: chat/react/ToolCallView.ts:5

Props for the ToolCallView component.

optional onApprove: () => void

Defined in: chat/react/ToolCallView.ts:7

void

optional onDeny: () => void

Defined in: chat/react/ToolCallView.ts:8

void

part: ToolCallPart

Defined in: chat/react/ToolCallView.ts:6

optional renderArgs: (args) => ReactNode

Defined in: chat/react/ToolCallView.ts:9

unknown

ReactNode

optional renderResult: (result) => ReactNode

Defined in: chat/react/ToolCallView.ts:10

unknown

ReactNode


Defined in: chat/react/UsageBadge.ts:5

Props for the UsageBadge component.

optional className: string

Defined in: chat/react/UsageBadge.ts:7

usage: ChatUsage | null

Defined in: chat/react/UsageBadge.ts:6


Defined in: chat/react/auth/useApiKeyAuth.ts:12

Options for useApiKeyAuth.

baseUrl: string

Defined in: chat/react/auth/useApiKeyAuth.ts:14

Base URL of the auth server (e.g. “/api/auth”)

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/auth/useApiKeyAuth.ts:20

Optional fetch override (for testing)

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/auth/useApiKeyAuth.ts:22

Optional headers for all requests

optional onAuthenticated: (token) => void

Defined in: chat/react/auth/useApiKeyAuth.ts:16

Called after successful authentication

AuthToken

void

optional onError: (error) => void

Defined in: chat/react/auth/useApiKeyAuth.ts:18

Called on authentication error

Error

void


Defined in: chat/react/auth/useApiKeyAuth.ts:26

Return value from useApiKeyAuth.

error: Error | null

Defined in: chat/react/auth/useApiKeyAuth.ts:28

reset: () => void

Defined in: chat/react/auth/useApiKeyAuth.ts:32

void

status: "error" | "idle" | "pending" | "authenticated"

Defined in: chat/react/auth/useApiKeyAuth.ts:27

submit: (key, apiBaseUrl?) => Promise<void>

Defined in: chat/react/auth/useApiKeyAuth.ts:31

Submit an API key (and optional provider base URL).

string

string

Promise<void>

token: AuthToken | null

Defined in: chat/react/auth/useApiKeyAuth.ts:29


Defined in: chat/react/useBackends.ts:6

Return type for the useBackends hook.

backends: BackendInfo[]

Defined in: chat/react/useBackends.ts:7

error: Error | null

Defined in: chat/react/useBackends.ts:9

isLoading: boolean

Defined in: chat/react/useBackends.ts:8

refresh: () => void

Defined in: chat/react/useBackends.ts:10

void


Defined in: chat/react/useChat.ts:8

Options for the useChat hook.

optional autoDismissMs: number

Defined in: chat/react/useChat.ts:14

Auto-dismiss errors after this many ms (0 = disabled, default: 0).

optional onError: (error) => void

Defined in: chat/react/useChat.ts:12

Called on error during send.

Error

void

optional sessionId: string

Defined in: chat/react/useChat.ts:10

Session ID. If omitted, a new session is created on first send.


Defined in: chat/react/useChat.ts:26

Return value from useChat.

clearError: () => void

Defined in: chat/react/useChat.ts:42

Clear the error state.

void

error: Error | null

Defined in: chat/react/useChat.ts:40

Current error, if any.

isGenerating: boolean

Defined in: chat/react/useChat.ts:36

Whether the assistant is currently generating.

messages: ChatMessage<unknown>[]

Defined in: chat/react/useChat.ts:30

Ordered messages in the current session.

newSession: () => Promise<string>

Defined in: chat/react/useChat.ts:46

Create a new session, resetting messages.

Promise<string>

retryLastMessage: () => Promise<void>

Defined in: chat/react/useChat.ts:44

Retry the last failed message. No-op if no error or no last user message.

Promise<void>

sendMessage: (content) => Promise<void>

Defined in: chat/react/useChat.ts:32

Send a user message and trigger assistant response.

string

Promise<void>

sessionId: string | null

Defined in: chat/react/useChat.ts:28

Current session ID (null until session created).

status: RuntimeStatus

Defined in: chat/react/useChat.ts:38

Current runtime status.

stop: () => void

Defined in: chat/react/useChat.ts:34

Abort the current generation.

void

usage: ChatUsage | null

Defined in: chat/react/useChat.ts:48

Token usage from the last completed response.


Defined in: chat/react/auth/useClaudeAuth.ts:12

Options for useClaudeAuth.

baseUrl: string

Defined in: chat/react/auth/useClaudeAuth.ts:14

Base URL of the auth server (e.g. “/api/auth”)

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/auth/useClaudeAuth.ts:20

Optional fetch override (for testing)

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/auth/useClaudeAuth.ts:22

Optional headers for all requests

optional onAuthenticated: (token) => void

Defined in: chat/react/auth/useClaudeAuth.ts:16

Called after successful authentication

AuthToken

void

optional onError: (error) => void

Defined in: chat/react/auth/useClaudeAuth.ts:18

Called on authentication error

Error

void


Defined in: chat/react/auth/useClaudeAuth.ts:26

Return value from useClaudeAuth.

authorizeUrl: string | null

Defined in: chat/react/auth/useClaudeAuth.ts:30

complete: (codeOrUrl) => Promise<void>

Defined in: chat/react/auth/useClaudeAuth.ts:34

Complete OAuth after redirect. Pass the code or callback URL.

string

Promise<void>

error: Error | null

Defined in: chat/react/auth/useClaudeAuth.ts:28

reset: () => void

Defined in: chat/react/auth/useClaudeAuth.ts:35

void

start: () => Promise<void>

Defined in: chat/react/auth/useClaudeAuth.ts:32

Start OAuth flow. Sets authorizeUrl for user redirect.

Promise<void>

status: "error" | "idle" | "pending" | "authenticated"

Defined in: chat/react/auth/useClaudeAuth.ts:27

token: AuthToken | null

Defined in: chat/react/auth/useClaudeAuth.ts:29


Defined in: chat/react/auth/useCopilotAuth.ts:12

Options for useCopilotAuth.

baseUrl: string

Defined in: chat/react/auth/useCopilotAuth.ts:14

Base URL of the auth server (e.g. “/api/auth”)

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/auth/useCopilotAuth.ts:20

Optional fetch override (for testing)

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/auth/useCopilotAuth.ts:22

Optional headers for all requests

optional onAuthenticated: (token) => void

Defined in: chat/react/auth/useCopilotAuth.ts:16

Called after successful authentication

AuthToken

void

optional onError: (error) => void

Defined in: chat/react/auth/useCopilotAuth.ts:18

Called on authentication error

Error

void


Defined in: chat/react/auth/useCopilotAuth.ts:26

Return value from useCopilotAuth.

deviceCode: string | null

Defined in: chat/react/auth/useCopilotAuth.ts:30

error: Error | null

Defined in: chat/react/auth/useCopilotAuth.ts:28

reset: () => void

Defined in: chat/react/auth/useCopilotAuth.ts:34

void

start: () => Promise<void>

Defined in: chat/react/auth/useCopilotAuth.ts:33

Start the device flow. Shows deviceCode and verificationUrl, then polls for completion.

Promise<void>

status: "error" | "idle" | "pending" | "authenticated"

Defined in: chat/react/auth/useCopilotAuth.ts:27

token: AuthToken | null

Defined in: chat/react/auth/useCopilotAuth.ts:29

verificationUrl: string | null

Defined in: chat/react/auth/useCopilotAuth.ts:31


Defined in: chat/react/useMessages.ts:7

Options for the useMessages hook.

sessionId: string

Defined in: chat/react/useMessages.ts:9

Session ID to observe.


Defined in: chat/react/useMessages.ts:13

Return value from useMessages.

isLoaded: boolean

Defined in: chat/react/useMessages.ts:17

Whether the session was found.

messages: ChatMessage<unknown>[]

Defined in: chat/react/useMessages.ts:15

Ordered messages in the session.


Defined in: chat/react/useModels.ts:14

Return type for the useModels hook.

error: Error | null

Defined in: chat/react/useModels.ts:17

isLoading: boolean

Defined in: chat/react/useModels.ts:16

models: ModelOption[]

Defined in: chat/react/useModels.ts:15

refresh: () => void

Defined in: chat/react/useModels.ts:18

void

search: (query) => ModelOption[]

Defined in: chat/react/useModels.ts:19

string

ModelOption[]


Defined in: chat/react/useProviders.ts:24

Return type for the useProviders hook.

createProvider: (config) => Promise<void>

Defined in: chat/react/useProviders.ts:29

Omit<ProviderConfig, "id" | "createdAt">

Promise<void>

deleteProvider: (id) => Promise<void>

Defined in: chat/react/useProviders.ts:31

string

Promise<void>

error: Error | null

Defined in: chat/react/useProviders.ts:27

isLoading: boolean

Defined in: chat/react/useProviders.ts:26

providers: ProviderConfig[]

Defined in: chat/react/useProviders.ts:25

refresh: () => void

Defined in: chat/react/useProviders.ts:28

void

selectProvider: (id) => void

Defined in: chat/react/useProviders.ts:32

string

void

updateProvider: (id, changes) => Promise<void>

Defined in: chat/react/useProviders.ts:30

string

Partial<Omit<ProviderConfig, "id" | "createdAt">>

Promise<void>


Defined in: chat/react/useRemoteAuth.ts:24

Options for the useRemoteAuth hook.

backend: RemoteAuthBackend

Defined in: chat/react/useRemoteAuth.ts:26

Auth backend to use

baseUrl: string

Defined in: chat/react/useRemoteAuth.ts:28

Base URL of the auth server (e.g. “http://localhost:3456/api/auth”)

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/useRemoteAuth.ts:32

Optional fetch override (for testing)

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/useRemoteAuth.ts:34

Optional headers for all requests

optional onAuthenticated: (token) => void

Defined in: chat/react/useRemoteAuth.ts:30

Called after successful authentication

AuthToken

void


Defined in: chat/react/useRemoteAuth.ts:38

Return value from useRemoteAuth.

authorizeUrl: string | null

Defined in: chat/react/useRemoteAuth.ts:47

clearTokens: () => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:60

Promise<void>

completeOAuth: (codeOrUrl) => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:48

string

Promise<void>

deviceCode: string | null

Defined in: chat/react/useRemoteAuth.ts:43

error: Error | null

Defined in: chat/react/useRemoteAuth.ts:40

loadSavedTokens: () => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:58

Promise<void>

reset: () => void

Defined in: chat/react/useRemoteAuth.ts:55

void

savedProviders: string[]

Defined in: chat/react/useRemoteAuth.ts:57

start: (provider?) => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:52

RemoteAuthBackend

Promise<void>

startDeviceFlow: () => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:42

Promise<void>

startOAuthFlow: () => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:46

Promise<void>

status: RemoteAuthStatus

Defined in: chat/react/useRemoteAuth.ts:39

submitApiKey: (key, baseUrl?) => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:50

string

string

Promise<void>

token: AuthToken | null

Defined in: chat/react/useRemoteAuth.ts:54

useSavedToken: (provider) => Promise<void>

Defined in: chat/react/useRemoteAuth.ts:59

RemoteAuthBackend

Promise<void>

verificationUrl: string | null

Defined in: chat/react/useRemoteAuth.ts:44


Defined in: chat/react/useRemoteChat.ts:27

Options for useRemoteChat.

authBaseUrl: string

Defined in: chat/react/useRemoteChat.ts:31

Base URL for auth API (e.g. “/api/auth”).

backend: RemoteAuthBackend

Defined in: chat/react/useRemoteChat.ts:33

Auth backend to use.

chatBaseUrl: string

Defined in: chat/react/useRemoteChat.ts:29

Base URL for chat API (e.g. “/api/chat”).

optional fetch: {(input, init?): Promise<Response>; (input, init?): Promise<Response>; }

Defined in: chat/react/useRemoteChat.ts:37

Custom fetch for testability.

(input, init?): Promise<Response>

MDN Reference

URL | RequestInfo

RequestInit

Promise<Response>

(input, init?): Promise<Response>

MDN Reference

string | URL | Request

RequestInit

Promise<Response>

optional headers: Record<string, string>

Defined in: chat/react/useRemoteChat.ts:39

Optional headers for all requests.

optional onReady: () => void

Defined in: chat/react/useRemoteChat.ts:35

Called when lifecycle reaches “ready” phase.

void


Defined in: chat/react/useRemoteChat.ts:43

Return value from useRemoteChat.

auth: UseRemoteAuthReturn

Defined in: chat/react/useRemoteChat.ts:51

Auth sub-hook for manual auth control.

error: Error | null

Defined in: chat/react/useRemoteChat.ts:53

Current error (null when no error).

logout: () => Promise<void>

Defined in: chat/react/useRemoteChat.ts:57

Logout: clear tokens, dispose runtime, reset to unauthenticated.

Promise<void>

newSession: () => Promise<string>

Defined in: chat/react/useRemoteChat.ts:55

Create a new chat session. Returns session ID.

Promise<string>

phase: RemoteChatPhase

Defined in: chat/react/useRemoteChat.ts:45

Current lifecycle phase.

runtime: IChatClient<Record<string, unknown>> | null

Defined in: chat/react/useRemoteChat.ts:47

Chat client (null until phase = “ready”).

sessionId: string | null

Defined in: chat/react/useRemoteChat.ts:49

Initial session ID (null until phase = “ready”).


Defined in: chat/react/useSessions.ts:14

Return type of useSessions hook.

error: Error | null

Defined in: chat/react/useSessions.ts:20

Last error from session fetch

loading: boolean

Defined in: chat/react/useSessions.ts:18

Whether initial load or refresh is in progress

refresh: () => void

Defined in: chat/react/useSessions.ts:22

Manually trigger a refresh

void

sessions: SessionInfo[]

Defined in: chat/react/useSessions.ts:16

Current session list (lightweight SessionInfo format)


Defined in: chat/react/useSSE.ts:8

Options for the useSSE hook.

optional body: unknown

Defined in: chat/react/useSSE.ts:12

Request body for POST requests (JSON-serialized automatically)

optional headers: Record<string, string>

Defined in: chat/react/useSSE.ts:13

optional method: "POST" | "GET"

Defined in: chat/react/useSSE.ts:10

HTTP method (default: “GET”)

optional onError: (error) => void

Defined in: chat/react/useSSE.ts:15

Error

void

optional onEvent: (event) => void

Defined in: chat/react/useSSE.ts:14

ChatEvent

void

optional reconnect: boolean

Defined in: chat/react/useSSE.ts:16

optional reconnectInterval: number

Defined in: chat/react/useSSE.ts:17


Defined in: chat/react/useSSE.ts:21

Return type for the useSSE hook.

connect: () => void

Defined in: chat/react/useSSE.ts:23

void

disconnect: () => void

Defined in: chat/react/useSSE.ts:24

void

lastEvent: ChatEvent | null

Defined in: chat/react/useSSE.ts:25

status: SSEStatus

Defined in: chat/react/useSSE.ts:22


Defined in: chat/react/useToolApproval.ts:13

Return value from useToolApproval.

approve: (toolCallId) => void

Defined in: chat/react/useToolApproval.ts:15

string

void

deny: (toolCallId) => void

Defined in: chat/react/useToolApproval.ts:16

string

void

pendingRequests: PendingToolRequest[]

Defined in: chat/react/useToolApproval.ts:14


Defined in: chat/react/useVirtualMessages.ts:4

Configuration for message list virtualization.

optional estimatedItemHeight: number

Defined in: chat/react/useVirtualMessages.ts:6

Estimated height of each message item in pixels (default: 80).

optional overscan: number

Defined in: chat/react/useVirtualMessages.ts:8

Number of extra items to render above and below the visible area (default: 3).


Defined in: chat/react/useVirtualMessages.ts:12

Result of the useVirtualMessages hook.

T

bottomSpacerHeight: number

Defined in: chat/react/useVirtualMessages.ts:22

Height of the spacer below rendered items (px).

containerRef: (el) => void

Defined in: chat/react/useVirtualMessages.ts:28

Ref callback to measure container on mount.

HTMLElement | null

void

endIndex: number

Defined in: chat/react/useVirtualMessages.ts:18

End index (exclusive) in the original array.

onScroll: (event) => void

Defined in: chat/react/useVirtualMessages.ts:26

Scroll event handler to attach to the container.

{ clientHeight: number; scrollTop: number; }

number

number

void

startIndex: number

Defined in: chat/react/useVirtualMessages.ts:16

Start index in the original array.

topSpacerHeight: number

Defined in: chat/react/useVirtualMessages.ts:20

Height of the spacer above rendered items (px).

totalHeight: number

Defined in: chat/react/useVirtualMessages.ts:24

Total estimated height of all items (px).

visibleItems: T[]

Defined in: chat/react/useVirtualMessages.ts:14

Slice of items to actually render.

AuthFormComponent = (props) => ReactNode

Defined in: chat/react/auth/types.ts:16

A backend auth form component.

AuthFormProps

ReactNode


RemoteAuthBackend = "copilot" | "claude" | "vercel-ai"

Defined in: chat/react/useRemoteAuth.ts:18

Supported remote auth backends.


RemoteAuthStatus = "idle" | "pending" | "authenticated" | "error"

Defined in: chat/react/useRemoteAuth.ts:21

Auth status state machine: idle → pending → authenticated | error.


RemoteChatPhase = "initializing" | "unauthenticated" | "authenticating" | "creating" | "ready" | "error"

Defined in: chat/react/useRemoteChat.ts:18

Lifecycle phase for the useRemoteChat hook.


SSEStatus = "idle" | "connecting" | "open" | "closed" | "error"

Defined in: chat/react/useSSE.ts:5

Connection status of the SSE hook.

BackendSelector(__namedParameters): ReactNode

Defined in: chat/react/BackendSelector.ts:23

Headless backend selector showing registered backends with active indicator. Uses data attributes for styling:

  • [data-backend-selector] on root
  • [data-backend-item] on each item
  • [data-backend-active="true"] on the active backend
  • [data-backend-name] with backend name value

BackendSelectorProps

ReactNode


ChatHeader(__namedParameters): ReactNode

Defined in: chat/react/ChatHeader.ts:42

Header area with backend and model selectors. Returns null when no selectors need to be shown.

ChatHeaderProps

ReactNode


ChatInputArea(__namedParameters): ReactNode

Defined in: chat/react/ChatInputArea.ts:50

Input area — unified selector + composer in a [data-chat-input-area] container.

ChatInputAreaProps

ReactNode


ChatLayout(__namedParameters): ReactNode

Defined in: chat/react/ChatLayout.ts:30

Pure layout container — flex row with optional sidebar and overlay.

Renders [data-chat-ui] root with:

  • overlay (rendered first for z-index stacking)
  • sidebar (rendered before main content)
  • children (main chat area)

ChatLayoutProps

ReactNode


ChatProvider(__namedParameters): FunctionComponentElement<ProviderProps<IChatClient<Record<string, unknown>> | null>>

Defined in: chat/react/ChatProvider.ts:17

React context provider wrapping IChatClient. All chat hooks must be used within a ChatProvider.

ChatProviderProps

FunctionComponentElement<ProviderProps<IChatClient<Record<string, unknown>> | null>>


ChatSettingsOverlay(__namedParameters): ReactNode

Defined in: chat/react/ChatSettingsOverlay.ts:43

Settings modal — renders [data-provider-settings-overlay] when open. Returns null when closed. Backdrop click and Escape key close the overlay with exit animation. Focus is trapped within the overlay content.

ChatSettingsOverlayProps

ReactNode


ChatUI(__namedParameters): ReactNode

Defined in: chat/react/ChatUI.ts:302

Composite chat component — complete AI chat interface in one import.

import { ChatUI } from "@witqq/agent-sdk/chat/react";
function App() {
return <ChatUI runtime={myRuntime} />;
}

ChatUIProps

ReactNode


ClaudeAuthForm(__namedParameters): ReactNode

Defined in: chat/react/auth/ClaudeAuthForm.ts:12

Claude auth form — OAuth Authorization Code + PKCE.

Shows “Authenticate with Claude” button → authorize URL link + paste-code input + “Submit” button.

Co-located with the Claude backend.

AuthFormProps

ReactNode


Composer(__namedParameters): ReactNode

Defined in: chat/react/Composer.ts:25

Headless composer component for sending messages. Includes auto-resizing textarea, send/stop buttons, and keyboard shortcuts.

ComposerProps

ReactNode


ContextStatsDisplay(__namedParameters): ReactNode

Defined in: chat/react/ContextStatsDisplay.ts:27

Headless component displaying context window statistics.

When real usage data is available (realPromptTokens + modelContextWindow), displays actual token usage and model context window size. When real data is not yet available (before first API response), returns null.

All elements use data-* attributes for CSS styling — no inline styles.

ContextStatsDisplayProps

ReactNode


CopilotAuthForm(__namedParameters): ReactNode

Defined in: chat/react/auth/CopilotAuthForm.ts:12

Copilot (GitHub) auth form — device flow.

Shows “Authenticate with GitHub” button → device code + verification URL → “Waiting…” → ”✓ Authenticated” + “Continue →”.

Co-located with the Copilot backend.

AuthFormProps

ReactNode


MarkdownRenderer(props): ReactNode

Defined in: chat/react/MarkdownRenderer.ts:213

Headless markdown renderer. Parses markdown text to semantic HTML elements via createElement. Supports headings, paragraphs, bold, italic, inline code, code blocks, links, blockquotes, and lists. No external dependencies.

MarkdownRendererProps

ReactNode


Message(props): ReactNode

Defined in: chat/react/Message.ts:72

Headless message component rendering ChatMessage parts. Wraps parts in a div with data-role and data-status attributes.

MessageProps

ReactNode


ModelSelector(__namedParameters): ReactNode

Defined in: chat/react/ModelSelector.ts:27

Dropdown model selector with search and keyboard navigation. Falls back to a free-text input when models list is empty.

ModelSelectorProps

ReactNode


PermissionDialog(__namedParameters): ReactNode

Defined in: chat/react/PermissionDialog.ts:29

Headless permission dialog component for tool approval flows.

Renders a list of pending tool calls with approve/deny buttons. Uses data-* attributes for styling — no built-in styles.

Returns null when there are no pending requests.

PermissionDialogProps

ReactNode


ProviderModelSelector(__namedParameters): ReactNode

Defined in: chat/react/ProviderModelSelector.ts:47

Unified selector that shows providers when available, falls back to model list. Replaces the need for separate ProviderSelector + ModelSelector in ChatUI.

ProviderModelSelectorProps

ReactNode


ProviderSelector(__namedParameters): ReactNode

Defined in: chat/react/ProviderSelector.ts:25

Headless dropdown for selecting a configured provider. Uses data attributes for styling hooks. Follows ModelSelector pattern.

ProviderSelectorProps

ReactNode


ProviderSettings(__namedParameters): ReactNode

Defined in: chat/react/ProviderSettings.ts:50

Headless settings panel for managing providers. States: list (all providers), add (new provider flow), edit (existing).

ProviderSettingsProps

ReactNode


ThinkingBlock(__namedParameters): ReactNode

Defined in: chat/react/ThinkingBlock.ts:14

Headless thinking/reasoning block using native details/summary elements. Displays “Thinking…” while streaming, “Reasoning” when complete.

ThinkingBlockProps

ReactNode


Thread(__namedParameters): ReactNode

Defined in: chat/react/Thread.ts:33

Headless thread component wrapping a scrollable message list. Auto-scrolls to bottom when new messages arrive unless user has scrolled up. Shows a scroll-to-bottom button when scrolled up and an empty state when no messages.

ThreadProps

ReactNode


ThreadList(__namedParameters): ReactNode

Defined in: chat/react/ThreadList.ts:59

Session sidebar component for listing, searching, creating, and deleting sessions.

ThreadListProps

ReactNode


ThreadProvider(__namedParameters): ReactNode

Defined in: chat/react/ThreadSlots.ts:28

Provides slot-based customization for Thread message rendering. Wrap a Thread in ThreadProvider to override how messages, tool calls, or thinking blocks are rendered.

ThreadProviderProps

ReactNode


ToolCallView(__namedParameters): ReactNode

Defined in: chat/react/ToolCallView.ts:17

Headless tool call display component. Shows tool name, status, collapsible args/result, and approval buttons when needed.

ToolCallViewProps

ReactNode


UsageBadge(__namedParameters): ReactNode

Defined in: chat/react/UsageBadge.ts:11

Compact token usage display. Shows prompt/completion/total tokens.

UsageBadgeProps

ReactNode


useApiKeyAuth(options): UseApiKeyAuthReturn

Defined in: chat/react/auth/useApiKeyAuth.ts:39

API key authentication. Sends key to server for validation and storage.

UseApiKeyAuthOptions

UseApiKeyAuthReturn


useBackends(): UseBackendsReturn

Defined in: chat/react/useBackends.ts:16

Hook for discovering registered backends and switching between them.

UseBackendsReturn


useChat(options?): UseChatReturn

Defined in: chat/react/useChat.ts:56

Convenience hook for chat interaction. Wraps IChatRuntime with React state management and progressive streaming. Messages update in real-time as tokens arrive (not after full response).

UseChatOptions = {}

UseChatReturn


useChatRuntime(): IChatClient

Defined in: chat/react/ChatProvider.ts:27

Access the IChatClient from context. Must be used within a ChatProvider.

IChatClient

If used outside ChatProvider


useClaudeAuth(options): UseClaudeAuthReturn

Defined in: chat/react/auth/useClaudeAuth.ts:42

Claude OAuth + PKCE authentication. Two-step flow: start() gets authorizeUrl → user redirects → complete(code) finishes.

UseClaudeAuthOptions

UseClaudeAuthReturn


useCopilotAuth(options): UseCopilotAuthReturn

Defined in: chat/react/auth/useCopilotAuth.ts:41

Copilot Device Flow authentication. Starts device flow on server, provides code/URL for user, polls until complete.

UseCopilotAuthOptions

UseCopilotAuthReturn


useMessages(options): UseMessagesReturn

Defined in: chat/react/useMessages.ts:29

Reactive message list via useSyncExternalStore.

If the session supports subscribe/getSnapshot (reactive session), uses useSyncExternalStore for granular updates. Otherwise, falls back to polling via getSession().

UseMessagesOptions

UseMessagesReturn


useModels(): UseModelsReturn

Defined in: chat/react/useModels.ts:25

Hook for fetching and searching available models from the chat runtime.

UseModelsReturn


useOptionalThreadSlots(): ThreadSlotOverrides | null

Defined in: chat/react/ThreadSlots.ts:54

Access slot overrides if inside a ThreadProvider, or null if not. Safe to call without a ThreadProvider ancestor.

ThreadSlotOverrides | null


useProviders(): UseProvidersReturn

Defined in: chat/react/useProviders.ts:39

Hook for managing providers (backend + model combos). Requires an IChatClient with provider methods (e.g. RemoteChatClient).

UseProvidersReturn


useRemoteAuth(options): UseRemoteAuthReturn

Defined in: chat/react/useRemoteAuth.ts:82

Server-delegated authentication hook.

Communicates with server auth handler endpoints (POST /auth/start, POST /auth/copilot/poll, etc.) instead of running auth flows in the browser. No node:crypto dependency since all crypto operations happen server-side.

UseRemoteAuthOptions

Hook configuration

UseRemoteAuthReturn

Auth state and action methods

const auth = useRemoteAuth({
backend: "copilot",
baseUrl: "/api/auth",
onAuthenticated: (token) => console.log("Authenticated:", token),
});

useRemoteChat(options): UseRemoteChatReturn

Defined in: chat/react/useRemoteChat.ts:79

Lifecycle hook: auth → runtime → session.

UseRemoteChatOptions

UseRemoteChatReturn

const chat = useRemoteChat({
chatBaseUrl: "/api/chat",
authBaseUrl: "/api/auth",
backend: "copilot",
});
if (chat.phase === "unauthenticated") {
return <button onClick={() => chat.auth.start()}>Login</button>;
}
if (chat.phase === "ready" && chat.runtime) {
return <ChatProvider runtime={chat.runtime}>...</ChatProvider>;
}

useSessions(): UseSessionsReturn

Defined in: chat/react/useSessions.ts:43

Reactive session list hook. Subscribes to runtime.onSessionChange() and refreshes the list automatically on create, delete, and message send completion.

UseSessionsReturn


useSSE(url, options?): UseSSEReturn

Defined in: chat/react/useSSE.ts:32

SSE transport hook using fetch (not EventSource). Parses text/event-stream format with support for multi-line data and event types.

string | null

UseSSEOptions = {}

UseSSEReturn


useThreadSlots(): ThreadSlotOverrides

Defined in: chat/react/ThreadSlots.ts:42

Access slot overrides from ThreadProvider context.

ThreadSlotOverrides

If used outside a ThreadProvider


useToolApproval(messages, onApprove?, onDeny?): UseToolApprovalReturn

Defined in: chat/react/useToolApproval.ts:30

Hook that tracks tool calls requiring approval from messages.

Scans messages for ToolCallParts with status “requires_approval” and provides approve/deny callbacks. Currently state-only (no ChatEventBus integration).

ChatMessage<unknown>[]

Messages to scan for pending tool approvals

(toolCallId) => void

Called when a tool call is approved

(toolCallId) => void

Called when a tool call is denied

UseToolApprovalReturn


useVirtualMessages<T>(items, options?): VirtualMessagesResult<T>

Defined in: chat/react/useVirtualMessages.ts:40

Hook providing windowed rendering for a list of items.

Only items within the visible viewport (plus overscan) are returned. Consumers render top/bottom spacer divs to preserve scroll position.

T

readonly T[]

Full array of items

VirtualizeOptions = {}

Virtualization config

VirtualMessagesResult<T>


VercelAIAuthForm(__namedParameters): ReactNode

Defined in: chat/react/auth/VercelAIAuthForm.ts:11

Vercel AI auth form — API key + optional base URL.

Shows base URL input + API key input + “Connect” button.

Co-located with the Vercel AI backend.

AuthFormProps

ReactNode