Skip to content

zidane-ui/chat

The styled chat layer: provider, session list, transcript, composer and interaction cards bound to a ChatHost.

import { … } from 'zidane-ui/chat'ui/src/chat/index.ts

Use this entry point to put a chat interface in a React app. ChatProvider places a ChatHost in context, and SessionList, HostTranscript, HostInteractions and HostComposer read from it. It re-exports the transcript, composer and interaction entries, so one import covers the whole column. See UI kit.

TSX
import type { ChatHost } from 'zidane-ui/chat/headless'
import { ChatProvider, HostComposer, HostInteractions, HostTranscript, SessionList } from 'zidane-ui/chat'
import { useState } from 'react'

declare const host: ChatHost

export function App() {
  const [id, setId] = useState('s1')
  return (
    <ChatProvider host={host}>
      <SessionList activeId={id} onSelect={setId} search />
      <HostTranscript sessionId={id} />
      <HostInteractions sessionId={id} />
      <HostComposer sessionId={id} attachments />
    </ChatProvider>
  )
}
SessionList: by project, search, new session
SessionList: by date
SessionList: empty

Components#

ChatProviderComponent#

Provides a ChatHost and optional label overrides to the chat components below it.

DaemonOrbComponent#

Renders the daemon status orb for the given health and activity counts. It ripples once when the state changes or a run ends.

DaemonOrbButtonComponent#

Renders the daemon orb inside an icon-button-sized button. The caller supplies the label (for example aria-label) and the click handler.

GroupGlyphComponent#

A fixed glyph in the header's icon column.

HostBadgeComponent#

A host's name and connection as a badge, a button when onOpen is given.

HostStatusDotComponent#

A host's connection status as a dot, labelled with the status word (and the last error, in its tooltip).

HostTranscriptComponent#

Renders a session's transcript from the ChatHost in context, with loading, earlier-messages, and row actions wired to the host.

PdfPreviewComponent#

Renders a PDF in a frame showing the browser's PDF viewer.

RunEstimateChipComponent#

The time a run has left, counting down (~11m), in the info tint; almost done once the estimate is spent, dimmed while the run waits on the user, and over in the warning tint once the run is past its estimate. A run the host could not estimate, for a reason that will not go away by itself (a rejected request, missing credentials), shows a muted warning mark whose tooltip says why.

RunEstimatesProviderComponent#

Hands the app's run estimates to what shows them (a subagent's header in the transcript). Without it, nothing shows an estimate.

SessionFilterMenuComponent#

Renders the faders button and the dropdown menu of session list filters. Each axis is a row that opens a submenu of choices.

SessionGroupHeaderComponent#

Renders a group heading in a session list. The label is a button that toggles collapse; the caret shows on hover or focus and stays visible once collapsed.

SessionHostHeaderComponent#

A host's header row (an <li>) in a session list grouped by host.

SessionListComponent#

Renders the session list for the ChatHost in context: grouped and sorted rows with rename, archive, and delete when the host supports them.

SessionListRowComponent#

Renders one session in a list: status dot, title with inline rename, badges, meta, an optional second line, and an actions menu behind a 3-dots trigger and right-click.

SessionStreamsProviderComponent#

Provides one session streams to the hooks below it.

ShowMoreRowComponent#

Ends a capped group: reveals the rest of it. Aligned under the rows' titles.

StatusDotComponent#

Renders a session's state as a small dot, with a motion cue for states that need attention.

TextPreviewComponent#

The kit's text preview, the default TextPreview slot: the text highlighted for its language (a plain <pre> for plain text, while the highlighter loads, or when it fails).

ThrobberComponent#

The busy indicator: a row of glyphs cycling through the theme's throbber gradient, then an ellipsis.

TranscriptComponent#

Renders a session's events as transcript rows: messages, tool calls grouped by the display options, subagent blocks, notices, and the select-turn cursor. Rows mount lazily as they near the viewport.

Functions#

dotStateForFunction#

The dot for a session's plain status, when a host has nothing richer.

orbStateFunction#

Maps daemon health and activity counts to an OrbState. A disconnected daemon is down and a connecting one is connecting; otherwise waiting sessions win over running ones, and no activity is idle.

parseToolMediaFunction#

The media stand-ins of a result's text, in order, and the text without them.

providerColorFunction#

Text / border color.

providerHueFunction#

The hue (0 to 359) for a provider key: the pinned hue of a well-known provider whose name the key starts with, else a hash of the key.

providerTintFunction#

Soft tinted fill for chips / badges.

useAttachmentTextFunction#

The text behind src: a data: URL decodes at once, any other URL is fetched.

useCaptureRunStateFunction#

Captures the run-state version; the returned check says whether it still holds. A signal or runtime switch invalidates snapshots fetched before it.

useChatHostFunction#

Returns the ChatHost from the nearest ChatProvider. Throws when called outside one.

useChatLabelsFunction#

Returns the chat UI strings: the defaults merged with any overrides given to ChatProvider or LabelsProvider.

useHasSessionEventsFunction#

Whether the store holds any record for the session (re-renders when that changes).

useHostSessionsFunction#

The host's session list (empty when the host has none).

useIsSessionHydratedFunction#

Whether the session's transcript is hydrated (re-renders when that changes).

useOptionalChatHostFunction#

Returns the ChatHost from the nearest ChatProvider, or null outside one (a surface that works without a host, its extras hidden).

usePeekRunSeqFunction#

Reads a session's run-start sequence without subscribing. Stable.

usePeekSessionEventsFunction#

Reads a session's current events without subscribing (for event handlers). Stable.

usePeekSessionRunningFunction#

Reads whether a session's run is in flight without subscribing. Stable.

useRunEstimateFunction#

The estimate of a session's own run, or of its subagent label, while one is known; undefined otherwise.

useSessionEditsFunction#

The session's events that carry a file edit, as a stable list: a reader re-renders when an edit lands, not on every streamed token.

useSessionEventsFunction#

The session's events.

useSessionEventsSelectorFunction#

A value derived from the session's events, recomputed only when the events change. select should be stable (module-level or memoised) and return a stable reference for unchanged input.

useSessionFallbackModelFunction#

The fallback model the session's run switched to, null when none.

useSessionPageFunction#

The session's scrollback state: whether older turns exist, whether a page is loading.

useSessionRetryFunction#

The provider retry the session's run is in, null when none.

useSessionRunningFunction#

Whether a run is in flight for the session.

useSessionStreamActionsFunction#

The streams' bound writes (stable): dispatching never subscribes the caller.

useSessionStreamsFunction#

The streams themselves (stable).

useSessionSystemMdFunction#

The session's SYSTEM.md override (it replaces the built-in doctrine), null when none.

useTranscriptOptionsFunction#

Picks the transcript's options out of values (only those set: the transcript keeps zidane's defaults for the rest). The result keeps its identity while those settings do, so a change to any other setting leaves the transcript alone.

Constants#

DEFAULT_TRANSCRIPT_OPTIONSConstant#

zidane's defaults for those settings.

MAX_TEXT_PREVIEW_BYTESConstant#

Past this size a text attachment is listed, not previewed.

TRANSCRIPT_OPTION_KEYSConstant#

The settings a transcript reads, in one order.

Interfaces#

ChatProviderPropsInterface#

Props for ChatProvider.

DaemonOrbButtonPropsInterface#

Props for DaemonOrbButton: the orb's health, running, and attention plus the attributes of a button (without children).

DaemonOrbPropsInterface#

Props for DaemonOrb.

GroupGlyphPropsInterface#

Props for GroupGlyph.

HostBadgePropsInterface#

Props for HostBadge.

HostStatusDotPropsInterface#

Props for HostStatusDot.

HostTranscriptPropsInterface#

Props for HostTranscript: the TranscriptProps minus the ones the host supplies (events, streaming, sessionId), plus sessionId and onOpenSession.

PdfPreviewPropsInterface#

Props for PdfPreview.

RunEstimateChipPropsInterface#

Props of RunEstimateChip.

RunEstimatesProviderPropsInterface#

Props of RunEstimatesProvider.

SessionFilterActionInterface#

A row that does something and closes the menu (Save view as space).

SessionFilterAxisInterface#

One axis: its value, the choices in menu order (default: the app's), and the change handler.

SessionFilterMenuPropsInterface#

Props for SessionFilterMenu. Each axis shows only when its prop is set.

SessionGroupHeaderPropsInterface#

Props for SessionGroupHeader.

SessionHostHeaderPropsInterface#

Props for SessionHostHeader.

SessionListPropsInterface#

Props for SessionList.

SessionListRowPropsInterface#

Props for SessionListRow. Every app-specific part is a slot (status, titleDisplay, badges, meta, sub) or data (menuItems).

SessionProjectAxisInterface#

The project axis: null is every project; options are the project names.

SessionStreamsProviderPropsInterface#

Props of SessionStreamsProvider.

ShowMoreRowPropsInterface#

Props for ShowMoreRow.

StatusDotPropsInterface#

Props for StatusDot.

TextPreviewPropsInterface#

Props for TextPreview: the TextPreviewSlotProps plus the root's class and style.

ThrobberPropsInterface#

Props for Throbber.

ToolMediaItemInterface#

One media block of a tool result, as parsed from its text stand-in.

TranscriptPropsInterface#

Props for Transcript.

TranscriptSelectionInterface#

Select-turn mode, driven by the app (its keys move selected).

Types#

AttachmentTextStateType#

What a text preview shows: the text once it is in, or that it could not be read.

OrbStateType#

The visual state of a DaemonOrb, derived from daemon health and activity by orbState.

SessionActivityFilterType#

Last-activity window of the activity filter: sessions active within 1d, 3d, 7d, or 30d, or all.

SessionArchiveFilterType#

Which sessions the status filter shows: active, archived, or all.

SessionDotStateType#

Visual state of a StatusDot.

SessionFilterExtraType#

An extra row of the menu: one choice among options, an on/off toggle, or several picks.

SessionFilterPlacementType#

Where an extra row sits: with the view, the filters or the sort.

SessionViewType#

A choice of the view axis: a grouping of the list model, host, one section per host, which the app lays out itself (the desktop sidebar's Per host), or agent, one group per agent.

ThrobberVariantType#

Canonical TUI StatusSpinner exposes two semantic tones:

  • 'accent' (default) → brand-blue, used while the agent is streaming a normal turn or a stub-handle is in flight.
  • 'warn' → amber, used during auto-compaction or any destructive-ish background task so the user knows their input will land against a re-shaped context. Mirrors the canonical <TitleOverlay variant="warn"> cue.

Explicit colors still wins — variant only chooses the default pair when no override is passed.

TranscriptOptionsType#

The display settings a transcript reads: zidane's Settings fields of the same names.

Re-exports#

These names are documented on the entry point that owns them.