@twentyfourg/chat-kit 1.0.0-beta.1

package/dist/services/base-camp-client.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Framework-free Base Camp API client built on fetch. Paths and shapes follow
+ * Base Camp's Zodios API definitions (the authoritative OpenAPI contract).
+ * No retries and no error swallowing; callers decide how to recover.
+ */
+import type { AgentDetails, CreateThreadBody, CreateThreadResponse, FeedbackResponse, MessageListResponse, QuotaResponse, SendMessageBody, StopMessageResponse, Thread, ThreadDetail, TrackEventBody, TrackEventResponse } from '../types';
+export interface BaseCampClientOptions {
+    /** Base Camp REST host, without a trailing slash; request paths start with /v1. */
+    baseUrl: string;
+    /** Streaming host when it differs from the REST host; falls back to baseUrl. */
+    streamBaseUrl?: string;
+    /** Returns the Authorization credential for the current user. */
+    getAuthToken: () => string | Promise<string>;
+    /** Value for the x-24g-deploy-env identity header. */
+    deployEnv: string;
+    /** Value for the x-24g-job-number identity header. */
+    jobNumber: string;
+    /** Non-prod tenant override sent as x-tenant-hint when provided. */
+    tenantHint?: string;
+}
+/** Normalized Base Camp API error. */
+export declare class BaseCampError extends Error {
+    readonly status: number;
+    /** Machine-readable code when the server provides one, e.g. CONTEXT_LIMIT_EXCEEDED. */
+    readonly code?: string;
+    constructor(status: number, message: string, code?: string);
+}
+export declare class BaseCampClient {
+    private readonly options;
+    constructor(options: BaseCampClientOptions);
+    /** GET /v1/agents/:agentId (public-safe agent detail; drive feature UI off config). */
+    getAgent(agentId: string): Promise<AgentDetails>;
+    /**
+     * POST /v1/agents/:agentId/threads. The create endpoint only accepts variables;
+     * when customData is supplied it is applied with a follow-up PATCH, since the
+     * server only reads customData on thread update.
+     */
+    createThread(agentId: string, body?: CreateThreadBody): Promise<CreateThreadResponse>;
+    /** GET /v1/agents/:agentId/threads (current user's threads for the agent). */
+    /** GET /v1/agents/:agentId/threads?limit=N. Every status comes back; callers filter. */
+    getThreads(agentId: string, limit: number): Promise<Thread[]>;
+    /** GET /v1/agents/:agentId/threads/:threadId (includes embedded agent summary and customData). */
+    getThread(agentId: string, threadId: string): Promise<ThreadDetail>;
+    /** GET .../messages (full history; also the reconnect path after an interrupted stream). */
+    getMessages(agentId: string, threadId: string): Promise<MessageListResponse>;
+    /**
+     * POST .../messages with stream forced on. Returns the raw Response so the
+     * streaming service can consume the SSE body; only HTTP-level failures throw here.
+     */
+    sendMessage(agentId: string, threadId: string, body: SendMessageBody, options?: {
+        signal?: AbortSignal;
+    }): Promise<Response>;
+    /** POST .../stop. Needs the assistant message id captured from the stream's early events. */
+    stopMessage(agentId: string, threadId: string, assistantMessageId: string): Promise<StopMessageResponse>;
+    /** POST .../messages/:messageId/feedback. Idempotent; resending the same value is a no-op. */
+    submitFeedback(agentId: string, threadId: string, messageId: string, feedback: 'POSITIVE' | 'NEGATIVE'): Promise<FeedbackResponse>;
+    /** Same endpoint as submitFeedback; omitting the feedback field clears it. */
+    clearFeedback(agentId: string, threadId: string, messageId: string): Promise<FeedbackResponse>;
+    /** GET /v1/agents/:agentId/quota (read-only; does not consume quota). */
+    getQuota(agentId: string): Promise<QuotaResponse>;
+    /** POST /v1/analytics/events. Callers usually fire and forget; a lost event is acceptable. */
+    trackEvent(body: TrackEventBody): Promise<TrackEventResponse>;
+    /** Identity and auth headers Base Camp expects on every request. */
+    private identityHeaders;
+    private request;
+}

package/dist/services/citations.d.ts

@@ -0,0 +1,18 @@
+import type { ChatCitation } from '../types';
+export interface InjectCitationChipsOptions {
+    /**
+     * Chips markers whose citations have not arrived yet, as inert placeholders.
+     * The citations payload only arrives once the text finishes, so without this
+     * a streaming answer shows raw `[^N]` text that snaps into chips at the very
+     * end. Placeholders upgrade to real chips when their citation lands; on by
+     * the caller only while streaming, so a truly unresolved marker still ends
+     * up as literal text.
+     */
+    pendingMarkers?: boolean;
+}
+/**
+ * Replaces resolved `[^N]` markers in `html` with citation chips. A marker
+ * with no matching citation is left as literal text, so a hallucinated ref
+ * never becomes a dead chip.
+ */
+export declare function injectCitationChips(html: string, citations: ChatCitation[], options?: InjectCitationChipsOptions): string;

package/dist/services/entities.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Turns HTML character references back into the characters they stand for, so
+ * a retrieved passage reading `&` displays as `&`.
+ *
+ * Retrieval text arrives with markup-special characters encoded, because the
+ * documents behind it were HTML or were extracted through an HTML pipeline.
+ * Answer text never shows the problem: it goes through the markdown renderer,
+ * which decodes references on its way to HTML. Passages and source titles are
+ * rendered as plain text instead, so without this they keep the raw `&`.
+ *
+ * SAFETY: the result is text, and must only ever be rendered as text (Vue's
+ * `{{ }}`, `textContent`, or an escaped attribute). Decoding is not
+ * sanitizing. `&lt;script&gt;` decodes to `<script>`, which is inert in a text
+ * node and an injection if handed to `v-html` or `innerHTML`.
+ */
+/**
+ * Drops HTML tags from retrieved text, keeping only what a reader would see.
+ * Extraction pipelines leave passage text with fragments of source markup in
+ * it, and a passage is rendered as plain text, where "<p>" would read as
+ * literal noise. Strip before decoding entities, so an author's own "&lt;p&gt;"
+ * survives as the "<p>" they wrote instead of being taken for a tag.
+ */
+export declare function stripHtmlTags(text: string): string;
+/**
+ * Decodes character references in `text`. Runs once, not until stable, so
+ * text that genuinely reads `&amp;#x26;` decodes to `&#x26;` and stops, the
+ * way a browser would. An unrecognized name is left exactly as it was.
+ */
+export declare function decodeHtmlEntities(text: string): string;

package/dist/services/markdown.d.ts

@@ -0,0 +1,47 @@
+import { type MathSetting } from './math';
+/**
+ * Post-processing hook applied to the sanitized DOM before it is serialized.
+ * Extension point for product-specific link handling (e.g. rewriting internal
+ * links); the default only hardens external links.
+ */
+export type SanitizedHtmlPostProcessor = (container: HTMLElement) => void;
+/**
+ * Safely render markdown text to HTML
+ * Uses marked for parsing and DOMPurify for sanitization
+ * Uses setTimeout to yield control and prevent main thread blocking
+ *
+ * @param text - The markdown text to render
+ * @param maxLength - Maximum input length (default: 50000 chars)
+ * @returns Promise<Sanitized HTML string>
+ */
+export interface RenderMarkdownOptions {
+    /** Maximum input length before the text is truncated. */
+    maxLength?: number;
+    /**
+     * Renders `$...$` and `$$...$$` as formulas. Needs the optional `mathlive`
+     * peer dependency, loaded on first use. Off by default: `$` is also a
+     * currency symbol, so this only belongs on for a corpus that has math.
+     */
+    showMath?: MathSetting;
+}
+export declare function renderMarkdownSafe(text: string, options?: RenderMarkdownOptions): Promise<string>;
+/**
+ * Result of streaming markdown rendering
+ */
+export interface StreamingRenderResult {
+    html: string;
+    isComplete: boolean;
+    hasUnsafeBreak: boolean;
+    lastSafePoint: number;
+}
+/**
+ * streaming markdown renderer
+ *
+ * @param text - The markdown text to render (potentially incomplete)
+ * @param options - Rendering options
+ * @returns Promise<StreamingRenderResult> with safe HTML and metadata
+ */
+export declare function renderMarkdownStreaming(text: string, options?: {
+    forceComplete?: boolean;
+}): Promise<StreamingRenderResult>;
+export default renderMarkdownSafe;

package/dist/services/math.d.ts

@@ -0,0 +1,36 @@
+import type { RendererExtension, TokenizerExtension } from 'marked';
+export interface MathOptions {
+    /**
+     * Where MathLive's font files are served from, as a URL path.
+     *
+     * Most apps should leave this alone and `import 'mathlive/static.css'`
+     * instead: that stylesheet declares the font faces itself, with URLs
+     * relative to the package, so the bundler emits the font files. This option
+     * is for serving them from somewhere else, such as a CDN or an unusual base
+     * path, in which case skip the stylesheet import.
+     */
+    fontsDirectory?: string;
+}
+/** `true` for the defaults, or an object to point at the fonts. */
+export type MathSetting = boolean | MathOptions;
+export declare function mathOptionsOf(setting: MathSetting | undefined): MathOptions | null;
+/**
+ * A marked rule that carries a math span through markdown unchanged.
+ *
+ * Markdown's own escape rule would otherwise get there first and strip the
+ * backslash out of any escaped punctuation, so `$\{x\}$` reached MathLive as
+ * `${x}$` and `$$\left\{x\right\}$$` as an invalid `\left{`. Only backslashes
+ * before punctuation were affected, which is why `\frac` worked and made the
+ * problem easy to miss.
+ *
+ * This claims the span and writes it straight back out, so the text reaching
+ * the DOM is exactly what the model wrote. Rendering it is renderMathIn's job.
+ */
+export declare const protectMathSource: TokenizerExtension & RendererExtension;
+/**
+ * Replaces formulas inside `container` with rendered markup, in place.
+ *
+ * Text inside `code` and `pre` is left alone: a fenced block showing LaTeX
+ * source is showing it deliberately.
+ */
+export declare function renderMathIn(container: HTMLElement, options?: MathOptions): Promise<void>;

package/dist/services/streaming-message.d.ts

@@ -0,0 +1,32 @@
+import type { MathSetting } from './math';
+/**
+ * Manages streaming markdown rendering for a single message. Collects text as
+ * it arrives and re-renders it on a throttle, so the markdown parse runs at
+ * most a few dozen times a second no matter how fast the text comes in.
+ * Framework-free; the consumer wires `onUpdate` into its own reactive state.
+ */
+export default class StreamingMessage {
+    private onUpdate;
+    private throttleMs;
+    /** Renders formulas on every pass, so they typeset as the answer arrives. */
+    private showMath;
+    private buffer;
+    private renderTimer;
+    private destroyed;
+    private stopped;
+    constructor(onUpdate: (html: string, isComplete: boolean) => void, throttleMs?: number, // up to 40 renders a second
+    /** Renders formulas on every pass, so they typeset as the answer arrives. */
+    showMath?: MathSetting);
+    addChunk(chunk: string): void;
+    /** Renders everything received so far and marks the message finished. */
+    complete(): Promise<void>;
+    private render;
+    /** The raw markdown received so far. */
+    getCurrentContent(): string;
+    /**
+     * Stops further renders. Whatever is already on screen stays there, so a
+     * partial answer is never blanked; the caller owns the final render.
+     */
+    stop(): void;
+    destroy(): void;
+}

package/dist/services/streaming.service.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Shared SSE (Server-Sent Events) streaming service for Base Camp chat.
+ *
+ * Centralises the fetch -> ReadableStream -> SSE line-parsing pipeline. Consumers
+ * provide a small `eventHandler` that maps Base Camp's domain-specific events
+ * (`message_id`, `assistant_message_id`, `token_usage`, `used_sources`) to their own
+ * callbacks. Common events (`response_delta`, `thinking_*`, `text_complete`, `error`)
+ * are handled by the built-in defaults.
+ *
+ * Base Camp streams SSE over the POST response body, so `EventSource` (GET-only)
+ * cannot be used; the stream is parsed manually here.
+ */
+export interface StreamingCallbacks {
+    /** Receives each text chunk of the streamed response. */
+    onChunk: (chunk: string) => void;
+    /** Called when the stream ends normally (`[DONE]` or reader exhausted). */
+    onComplete: () => void;
+    /** Called on any unrecoverable error (network, parse, HTTP status). */
+    onError: (error: Error) => void;
+    onMetadata?: (metadata: {
+        messageId?: string;
+        sources?: unknown[];
+        hasSourceContext?: boolean;
+    }) => void;
+    onThinkingStart?: () => void;
+    onThinkingChunk?: (chunk: string) => void;
+    onThinkingEnd?: () => void;
+    onTextComplete?: () => void;
+    onTokenUsage?: (percentOfCumulativeLimit: number) => void;
+    /** Called with the message quota parsed from X-RateLimit-* response headers. */
+    onRateLimit?: (info: RateLimitInfo) => void;
+}
+/** Message quota reported by Base Camp's X-RateLimit-* headers. */
+export interface RateLimitInfo {
+    limit: number;
+    remaining: number;
+    /** Epoch seconds of the next quota reset. */
+    resetSeconds: number;
+}
+/** Thrown when Base Camp responds 429: the caller's message quota is spent. */
+export declare class RateLimitError extends Error {
+    limit: number;
+    remaining: number;
+    /** ISO timestamp of the next quota reset. */
+    resetAt: string;
+    constructor(body: {
+        error?: string;
+        limit?: number;
+        remaining?: number;
+        resetAt?: string;
+    });
+}
+/**
+ * Return `true` when the handler consumed the event so the built-in default
+ * handler is skipped. Return `false`/`undefined` to let the default run.
+ */
+export type SSEEventHandler = (eventType: string, data: unknown, callbacks: StreamingCallbacks) => boolean | void;
+export interface StreamSSEOptions {
+    /** AbortSignal to cancel the request (e.g. a stop button). */
+    signal?: AbortSignal;
+    /**
+     * Extra request headers merged over the base streaming headers. The app
+     * boundary supplies deployment identity / tenant headers here; the kit
+     * itself stays config-free.
+     */
+    headers?: Record<string, string>;
+}
+/**
+ * Opens an SSE connection via `fetch`, reads the stream, and dispatches events.
+ * Cookies are sent (`credentials: 'include'`) so Base Camp can resolve the session user.
+ *
+ * @param url          Full URL of the Base Camp streaming endpoint.
+ * @param body         JSON-serialisable request body.
+ * @param callbacks    Lifecycle callbacks the consumer cares about.
+ * @param eventHandler Optional Base Camp event router; return `true` to skip defaults.
+ * @param options      Optional settings (AbortSignal, extra headers, etc.).
+ */
+/**
+ * Reads an already-made streaming response. Use this when something else,
+ * like the Base Camp client, performed the request and handed back the raw
+ * Response. Reports quota headers, then feeds every event to the callbacks.
+ */
+export declare function consumeSSEResponse(response: Response, callbacks: StreamingCallbacks, eventHandler?: SSEEventHandler): Promise<void>;
+export declare function streamSSE(url: string, body: unknown, callbacks: StreamingCallbacks, eventHandler?: SSEEventHandler, options?: StreamSSEOptions): Promise<void>;

package/dist/services/typewriter.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Paces streamed text so it reads as steady typing.
+ *
+ * Base Camp's stream often arrives in bursts: nothing for a while, then a
+ * large block at once. Writing a burst straight to the screen makes the
+ * answer lurch. This sits between the network and the message, queueing
+ * whatever arrives and letting it out a few characters per frame.
+ *
+ * The pace is constant: the same characters per frame from the first word to
+ * the last, so the reveal never visibly accelerates. Hidden tabs skip the
+ * animation entirely, because browsers suspend frame callbacks there and the
+ * backlog would replay on return.
+ */
+export interface TypewriterOptions {
+    /**
+     * Pace multiplier. 1 is the kit's default feel, 2 types twice as fast, 0.5
+     * at half. It scales the whole behavior, trickle and burst-drain alike, so
+     * the reveal keeps its character at any setting. A value that makes no pace
+     * (zero, negative, not a number) falls back to 1.
+     */
+    speed?: number;
+}
+/** `false` shows text the instant it arrives; `true` or options turn pacing on. */
+export type TypewriterSetting = boolean | TypewriterOptions;
+export default class Typewriter {
+    private emit;
+    private queue;
+    /** Characters revealed per frame, fixed for the life of the reveal. */
+    private readonly charsPerFrame;
+    /**
+     * Budget left over from earlier frames. Fractional speeds need it: at 0.5
+     * the budget is half a character per frame, which becomes one character
+     * every other frame instead of none at all.
+     */
+    private carry;
+    private readonly enabled;
+    private frameHandle;
+    private waiters;
+    private destroyed;
+    private readonly onVisibilityChange;
+    constructor(emit: (text: string) => void, setting?: TypewriterSetting);
+    /** Queues text for the reveal. Emits right away when pacing is off or the tab is hidden. */
+    push(text: string): void;
+    /** Emits everything still queued, immediately and synchronously. */
+    flush(): void;
+    /** Resolves once the queue has drained at its own pace. */
+    finish(): Promise<void>;
+    destroy(): void;
+    private schedule;
+    /** Emits one frame's worth of characters. */
+    private step;
+    private cancelFrame;
+    private resolveWaiters;
+}

package/dist/testing/mock-transport.d.ts

@@ -0,0 +1,52 @@
+/**
+ * A stand-in for Base Camp, for tests and for developing the interface before
+ * the real backend is reachable. It answers like the real thing does: a
+ * streaming response delivered a few words at a time, with the same event
+ * names on the wire, so the whole reading path gets exercised.
+ */
+import type { ChatTransport } from '../composables/useChatEngine';
+import type { AgentDetails, ChatCitation, CreateThreadBody, CreateThreadResponse, FeedbackResponse, MessageFeedback, MessageListResponse, QuotaResponse, SendMessageBody, StopMessageResponse, Thread, TokenUsage, UsedSource } from '../types';
+export interface MockReply {
+    text: string;
+    sources?: UsedSource[];
+    /** Emitted as the citations event, the way inline-citation agents answer. */
+    citations?: ChatCitation[];
+    /** Streamed as thinking events ahead of the answer, like a reasoning agent. */
+    thinking?: string;
+    /** Emitted as the token_usage event after the answer completes. */
+    tokenUsage?: TokenUsage;
+}
+export interface MockTransportOptions {
+    /** Decides what the assistant says back. Defaults to a canned answer. */
+    replyTo?: (userText: string) => MockReply;
+    /** Pause between streamed pieces, in milliseconds. */
+    chunkDelayMs?: number;
+    /** Pause before the first piece, imitating retrieval time. */
+    thinkingDelayMs?: number;
+    /**
+     * A message allowance to report, counting down as messages are sent.
+     * Left out, the mock answers 'unlimited', the way an uncapped tenant does.
+     */
+    messageLimit?: number;
+}
+export declare class MockTransport implements ChatTransport {
+    private options;
+    private threadCount;
+    private messageCount;
+    private history;
+    /** Fixed for the life of the mock, so a test can assert on it. */
+    private readonly quotaResetAt;
+    constructor(options?: MockTransportOptions);
+    getAgent(agentId: string): Promise<AgentDetails>;
+    createThread(_agentId: string, _body?: CreateThreadBody): Promise<CreateThreadResponse>;
+    /** Newest first and capped at `limit`, the way the server pages. */
+    getThreads(agentId: string, limit: number): Promise<Thread[]>;
+    getQuota(_agentId: string): Promise<QuotaResponse>;
+    getMessages(_agentId: string, threadId: string): Promise<MessageListResponse>;
+    sendMessage(_agentId: string, _threadId: string, body: SendMessageBody, options?: {
+        signal?: AbortSignal;
+    }): Promise<Response>;
+    stopMessage(): Promise<StopMessageResponse>;
+    submitFeedback(_agentId: string, _threadId: string, _messageId: string, feedback: MessageFeedback): Promise<FeedbackResponse>;
+    clearFeedback(): Promise<FeedbackResponse>;
+}

package/dist/testing/setup-tests.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Fills in the two browser APIs jsdom leaves out that kit components use.
+ *
+ * Both are universally available in real browsers, so the components are right
+ * to call them unguarded; the gap is jsdom's. Stubbing here keeps the
+ * workaround out of the components.
+ */
+export {};

package/dist/theme.css

@@ -0,0 +1,122 @@
+/*
+ * The kit's theming contract: every custom property its components read, with
+ * a neutral default so the chat is legible before an app themes anything.
+ *
+ * Import it once, then override whatever you want from your own stylesheet:
+ *
+ *   import '@twentyfourg/chat-kit/theme.css';
+ *
+ * These defaults are written to lose. They sit in a cascade layer, which puts
+ * them behind any unlayered rule, and they are matched through :where(), which
+ * zeroes their specificity. An ordinary `:root { --accent: ... }` in the app
+ * beats them wherever the import sits.
+ *
+ * An app that keeps its own tokens in a layer is the exception, since layer
+ * order is settled before specificity. Such an app should import this file
+ * first, or pin the order with `@layer chat-kit.theme, app;`.
+ *
+ * Many values below point at another token rather than a literal, so most
+ * rebrands only need the handful marked SEED. Setting --accent, --accent-fg,
+ * --text-primary, --surface-card and --font-body gets you most of the way.
+ *
+ * A test (src/__tests__/theme-tokens.spec.ts) fails if a component reads a
+ * property that is missing here, or if a property here is read by nothing, so
+ * this file cannot drift out of step with the components.
+ */
+
+@layer chat-kit.theme {
+  :where(:root) {
+    /* --- Type ------------------------------------------------------------ */
+
+    /* SEED. The other three families follow it unless set. */
+    --font-body:
+      ui-sans-serif, system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
+    --font-display: var(--font-body);
+    --font-label: var(--font-body);
+    --font-ui: var(--font-body);
+    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace;
+
+    --t-xs: 12px;
+    --t-sm: 14px;
+    --t-base: 16px;
+    --t-2xl: 24px;
+
+    --lh-body: 1.6;
+    /* Fixed rather than a ratio: the composer measures its own line height. */
+    --lh-sm: 20px;
+    --tr-tight: -0.02em;
+
+    --fw-regular: 400;
+    --fw-bold: 700;
+
+    /* --- Spacing and shape ---------------------------------------------- */
+
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+
+    --r-sm: 4px;
+    --r-md: 5px;
+    --r-lg: 8px;
+    --r-pill: 100px;
+
+    /* Cards inside the chat: the citation popover and the hover labels. */
+    --card-radius: 10px;
+    --card-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+    --card-stroke: #d7dae0;
+    /* Dims the page behind the page-image dialog in list mode. */
+    --overlay-scrim: rgb(20 22 26 / 50%);
+
+    /* --- Surfaces ------------------------------------------------------- */
+
+    /* SEED. The chat's own background; also the popover and label chips. */
+    --surface-card: #ffffff;
+    /* Code blocks, quotes, and table headers inside an answer. */
+    --surface-raised: #f4f5f7;
+    --surface-hover: #e9ebef;
+
+    /* --- Text ----------------------------------------------------------- */
+
+    /* SEED. */
+    --text-primary: #14161a;
+    --text-secondary: #5c626d;
+    /* Small labels above the sources and the feedback row. */
+    --text-helper: rgb(20 22 26 / 55%);
+
+    /* --- Accent --------------------------------------------------------- */
+
+    /* SEED. The assistant avatar, links, citation chips, and the send button.
+       Replace this pair first; a lot of the chat follows it. */
+    --accent: #2d6cdf;
+    --accent-fg: #ffffff;
+
+    /* --- The chat's own parts ------------------------------------------- */
+
+    --user-bubble-bg: #eef1f6;
+    --user-bubble-fg: var(--text-primary);
+
+    --composer-bg: #f4f5f7;
+    --composer-fg: var(--text-primary);
+    --composer-placeholder: rgb(20 22 26 / 60%);
+
+    /* Split from --accent so a chip can be toned down without moving the
+       accent itself. */
+    --citation-bg: var(--accent);
+
+    --icon-button-bg: #e9ebef;
+    --icon-button-bg-hover: #dcdfe5;
+    /* Send once the draft has text, and the mic while it is listening. */
+    --icon-button-bg-active: var(--accent);
+    --icon-button-bg-active-hover: color-mix(in srgb, var(--accent) 70%, transparent);
+    --icon-button-fg-active: var(--accent-fg);
+
+    --scrollbar-thumb: rgb(20 22 26 / 20%);
+    --scrollbar-thumb-hover: rgb(20 22 26 / 35%);
+
+    /* Failed answers and the unsupported-mic marker. */
+    --warning: #d3383d;
+  }
+}