@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/chat/artifact/artifact-panel.svelte

@@ -1,127 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export type ArtifactPanelProps = {
-    /**
-     * Unique identifier for this panel instance. Used to namespace the title
-     * element's DOM ID so that multiple ArtifactPanel instances on the same
-     * page do not produce duplicate IDs.
-     */
-    instanceId?: string;
-    title?: string | undefined;
-    onclose?: (() => void) | undefined;
-    children: Snippet;
-  };
-</script>
-
-<script lang="ts">
-  import X from 'lucide-svelte/icons/x';
-
-  let { instanceId = 'artifact', title, onclose, children }: ArtifactPanelProps = $props();
-
-  const titleId = $derived(`${instanceId}-panel-title`);
-
-  function focusOnMount(element: HTMLButtonElement) {
-    element.focus();
-  }
-</script>
-
-<div class="artifact-panel" role="complementary" aria-label={title ?? 'Artifact panel'}>
-  <div class="artifact-panel-header">
-    <span class="artifact-panel-title" id={titleId}>
-      {title ?? 'Artifact'}
-    </span>
-
-    <button
-      type="button"
-      class="artifact-panel-close"
-      onclick={onclose}
-      aria-label="Close artifact panel"
-      {@attach focusOnMount}
-    >
-      <X class="icon-sm" />
-    </button>
-  </div>
-
-  <div class="artifact-panel-content">
-    {@render children()}
-  </div>
-</div>
-
-<style>
-  .artifact-panel {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    border-inline-start: 1px solid var(--cinder-border);
-    background: var(--cinder-surface);
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .artifact-panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--cinder-space-3) var(--cinder-space-4);
-    border-bottom: 1px solid var(--cinder-border);
-    flex-shrink: 0;
-    gap: var(--cinder-space-2);
-  }
-
-  .artifact-panel-title {
-    font-size: var(--cinder-text-sm);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-  }
-
-  .artifact-panel-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--cinder-touch-target-min);
-    height: var(--cinder-touch-target-min);
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: var(--cinder-radius-md);
-    color: var(--cinder-text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition:
-      background var(--cinder-duration-fast) var(--cinder-ease-standard),
-      color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  @media (hover: hover) {
-    .artifact-panel-close:hover {
-      background: var(--cinder-surface-hover);
-      color: var(--cinder-text);
-    }
-  }
-
-  /* Close button sits in the panel corner; an outset ring would overhang the
-     panel edge, so paint an INSET ring (Strategy B-inset). */
-  .artifact-panel-close:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: inset 0 0 0 var(--cinder-ring-width)
-      var(--_cinder-artifact-panel-close-ring, var(--cinder-ring-color));
-  }
-
-  @media (forced-colors: active) {
-    .artifact-panel-close:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: calc(var(--cinder-ring-width) * -1);
-    }
-  }
-
-  .artifact-panel-content {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-</style>

package/src/components/chat/artifact/artifact-viewer.svelte

@@ -1,110 +0,0 @@
-<script lang="ts" module>
-  export type ArtifactContentType = 'html' | 'svg' | 'code' | 'mermaid';
-
-  export type ArtifactViewerProps = {
-    type: ArtifactContentType;
-    content: string;
-    language?: string;
-    title?: string;
-  };
-
-  /**
-   * Wrap SVG content in a minimal HTML document for sandboxed iframe rendering.
-   * This is the safe approach: the SVG runs in a sandboxed origin rather than
-   * the page's origin, so JavaScript (even if injected) cannot access the DOM
-   * or credentials of the parent page.
-   */
-  function wrapSvgInHtml(svg: string): string {
-    return `<!DOCTYPE html><html><body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;">${svg}</body></html>`;
-  }
-</script>
-
-<script lang="ts">
-  let { type, content, language, title }: ArtifactViewerProps = $props();
-
-  const svgDocument = $derived(type === 'svg' ? wrapSvgInHtml(content) : '');
-</script>
-
-{#if type === 'html'}
-  <iframe
-    class="artifact-viewer artifact-viewer-html"
-    srcdoc={content}
-    sandbox=""
-    title={title ?? 'HTML artifact'}
-    aria-label={title ?? 'HTML artifact'}
-  ></iframe>
-{:else if type === 'svg'}
-  <iframe
-    class="artifact-viewer artifact-viewer-svg"
-    srcdoc={svgDocument}
-    sandbox=""
-    title={title ?? 'SVG artifact'}
-    aria-label={title ?? 'SVG artifact'}
-  ></iframe>
-{:else if type === 'code'}
-  <div class="artifact-viewer artifact-viewer-code">
-    <pre class="artifact-code-block" data-language={language}><code>{content}</code></pre>
-  </div>
-{:else if type === 'mermaid'}
-  <div class="artifact-viewer artifact-viewer-mermaid">
-    <pre class="artifact-code-block" data-language="mermaid"><code>{content}</code></pre>
-    <p class="artifact-mermaid-note" aria-live="polite">
-      Mermaid diagram source. Install the Mermaid library to render diagrams.
-    </p>
-  </div>
-{/if}
-
-<style>
-  .artifact-viewer {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  /* HTML iframe */
-  .artifact-viewer-html {
-    border: none;
-    min-height: 200px;
-  }
-
-  /* SVG sandboxed iframe */
-  .artifact-viewer-svg {
-    border: none;
-    min-height: 200px;
-  }
-
-  /* Code and Mermaid */
-  .artifact-viewer-code,
-  .artifact-viewer-mermaid {
-    height: auto;
-    padding: var(--cinder-space-4);
-  }
-
-  .artifact-code-block {
-    margin: 0;
-    padding: var(--cinder-space-4);
-    background: var(--cinder-surface-raised);
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-md);
-    overflow-x: auto;
-    font-family: var(--cinder-font-mono);
-    font-size: var(--cinder-text-sm);
-    line-height: var(--leading-relaxed);
-    color: var(--cinder-text);
-    white-space: pre;
-  }
-
-  .artifact-code-block code {
-    font-family: inherit;
-    font-size: inherit;
-    background: none;
-    padding: 0;
-  }
-
-  .artifact-mermaid-note {
-    margin-top: var(--cinder-space-3);
-    font-size: var(--cinder-text-xs);
-    color: var(--cinder-text-muted);
-    font-style: italic;
-  }
-</style>

package/src/components/chat/artifact/chat-artifact-layout.svelte

@@ -1,85 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export type ChatArtifactLayoutProps = {
-    /**
-     * Unique identifier for this layout instance. Passed to the ArtifactPanel
-     * to namespace the title element ID and avoid duplicate IDs when multiple
-     * instances share a page.
-     */
-    instanceId?: string;
-    /** Whether the artifact panel is open */
-    open?: boolean;
-    /** Content for the main chat area */
-    children: Snippet;
-    /** Content for the artifact panel */
-    panel?: Snippet;
-    /** Title for the artifact panel */
-    panelTitle?: string | undefined;
-    /** Called when the panel is closed */
-    onclose?: (() => void) | undefined;
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../../utilities/class-names.ts';
-  import ArtifactPanel from './artifact-panel.svelte';
-
-  let {
-    instanceId = 'artifact',
-    open = false,
-    children,
-    panel,
-    panelTitle,
-    onclose,
-    class: className,
-  }: ChatArtifactLayoutProps = $props();
-</script>
-
-<div class={classNames('chat-artifact-layout', className)} data-panel-open={open}>
-  <div class="chat-artifact-main">
-    {@render children()}
-  </div>
-
-  {#if open && panel}
-    <ArtifactPanel {instanceId} title={panelTitle} {onclose}>
-      {@render panel()}
-    </ArtifactPanel>
-  {/if}
-</div>
-
-<style>
-  .chat-artifact-layout {
-    container-type: inline-size;
-    display: grid;
-    grid-template-columns: 1fr;
-    height: 100%;
-    width: 100%;
-    transition: grid-template-columns var(--cinder-duration) var(--cinder-ease-standard);
-  }
-
-  .chat-artifact-layout[data-panel-open='true'] {
-    grid-template-columns: 1fr 40%;
-  }
-
-  .chat-artifact-main {
-    min-width: 0;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  /* Narrow viewport: stack vertically */
-  @container (max-width: 768px) {
-    .chat-artifact-layout[data-panel-open='true'] {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 50%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .chat-artifact-layout {
-      transition: none;
-    }
-  }
-</style>

package/src/components/chat/artifact/index.ts

@@ -1,3 +0,0 @@
-export { default as ArtifactPanel } from './artifact-panel.svelte';
-export { default as ArtifactViewer } from './artifact-viewer.svelte';
-export { default as ChatArtifactLayout } from './chat-artifact-layout.svelte';

package/src/components/chat/builders.ts

@@ -1,33 +0,0 @@
-/**
- * Conversation builders for the Chat component.
- *
- * Chat renders a {@link ConversationHistory} snapshot. These are thin aliases
- * over the published `conversationalist` builders so examples, demos, tests, and
- * simple apps construct the same transcript shape Chat consumes.
- */
-
-import {
-  appendAssistantMessage as appendConversationalistAssistantMessage,
-  appendMessages as appendConversationalistMessages,
-  appendUserMessage as appendConversationalistUserMessage,
-  createConversationHistory,
-} from 'conversationalist';
-
-import type { ConversationHistory, MessageInput } from './conversation-model.ts';
-
-/** Creates a new empty conversation snapshot. */
-const createConversation = createConversationHistory;
-
-/** Appends one or more messages, preserving the previous no-op identity contract. */
-function appendMessages(
-  conversation: ConversationHistory,
-  ...inputs: MessageInput[]
-): ConversationHistory {
-  if (inputs.length === 0) return conversation;
-  return appendConversationalistMessages(conversation, ...inputs);
-}
-
-const appendUserMessage = appendConversationalistUserMessage;
-const appendAssistantMessage = appendConversationalistAssistantMessage;
-
-export { appendAssistantMessage, appendMessages, appendUserMessage, createConversation };

package/src/components/chat/chat.svelte

@@ -1,71 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category domain
-   * @status domain-suite
-   * @purpose Opinionated conversation surface bundling message list, composer, attachments, and scroll affordances for AI or support transcripts.
-   * @tag chat
-   * @tag conversation
-   * @tag domain-suite
-   * @useWhen Shipping a full chat surface with composer, scroll-anchor, unread indicator, and attachments bundled as one heavyweight drop-in.
-   * @useWhen Building an AI assistant or support thread where conversation state is modeled as a transcript of role-tagged messages.
-   * @avoidWhen Rendering a one-off message list — compose lighter primitives directly instead of pulling the full suite.
-   * @avoidWhen The transcript is read-only and needs no composer — a simple list of message bubbles is a better fit.
-   * @related markdown-editor
-   */
-  export type { ChatProps } from './chat.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import ChatImplementation from './container/chat.svelte';
-  import type { ChatProps } from './chat.types.ts';
-
-  let { class: className, ...rest }: ChatProps = $props();
-
-  const mergedClassName = $derived(classNames(className));
-
-  // The inner implementation owns the imperative streaming + scroll API. The
-  // public wrapper forwards it so consumers using `@lostgradient/cinder/chat` can drive
-  // streaming through a `bind:this` to <Chat> (the inner component is not
-  // exported).
-  // Plain `let` (not `$state`): the instance ref is only read inside the
-  // imperative forwarders, never in the template or a derivation, so it needs
-  // no reactivity.
-  let impl: ReturnType<typeof ChatImplementation> | undefined;
-
-  /**
-   * Begin streaming content into an existing assistant message. No-op until the
-   * component is mounted (a call via a stale ref after teardown is safe).
-   */
-  export function beginStreaming(messageId: string): void {
-    impl?.beginStreaming(messageId);
-  }
-
-  /** Append a token to the active streaming buffer. No-op until mounted. */
-  export function pushToken(token: string): void {
-    impl?.pushToken(token);
-  }
-
-  /** End the active streaming session. No-op until mounted. */
-  export function endStreaming(): void {
-    impl?.endStreaming();
-  }
-
-  /** Scroll the message viewport to the bottom. No-op until mounted. */
-  export function scrollToBottom(): void {
-    impl?.scrollToBottom();
-  }
-
-  /** Scroll the message viewport to the top. No-op until mounted. */
-  export function scrollToTop(): void {
-    impl?.scrollToTop();
-  }
-
-  /** Focus the composer input. No-op until mounted. */
-  export function focusInput(): void {
-    impl?.focusInput();
-  }
-</script>
-
-<ChatImplementation bind:this={impl} class={mergedClassName} {...rest} />

package/src/components/chat/chat.types.ts

@@ -1,246 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { Attachment } from 'svelte/attachments';
-import type { HTMLAttributes } from 'svelte/elements';
-
-import type {
-  ChatAdapter,
-  ChatAdapterErrorEvent,
-  ChatReadReceiptEvent,
-} from './adapter/chat-adapter.ts';
-import type {
-  ChatScrollStateChangeEvent,
-  ChatStopGeneratingEvent,
-  ChatSubmitEvent,
-  ChatUnreadIndicatorChangeEvent,
-} from './container/chat-events.ts';
-import type { ConversationHistory, Message } from './conversation-model.ts';
-import type { ChatAttachment } from './input/chat-attachment.ts';
-import type { MessagePartOverride } from './message/chat-message-parts.ts';
-import type { StepInfo } from './utilities/types.ts';
-
-/**
- * A participant who is currently typing. Out-of-band UI state — NOT stored on
- * `Message` or `ConversationHistory`. Flows in as a plain (non-bindable) prop or
- * via the adapter's `onTypingChange` push handler.
- */
-export type TypingParticipant = {
-  /** Unique identifier for the participant (e.g. user id). */
-  id: string;
-  /** Display name shown in the typing indicator label. */
-  name: string;
-};
-
-/**
- * Read-receipt state for a single message. Out-of-band UI state — NOT stored on
- * `Message`. Flows in as a plain (non-bindable) `readReceipts` prop keyed by
- * message id, or accumulated from the adapter's `onReadReceipt` push handler.
- *
- * Render rules: shown only on `user` messages; color alone never conveys state
- * (icon + text label always present).
- */
-export type ReadReceipt = {
-  /** Delivery/read status for this message. */
-  status: 'sent' | 'delivered' | 'read';
-  /**
-   * Names of participants who have read the message. Used to compose the
-   * accessible text (e.g. "Read by Alice, Bob"). May be empty when status is
-   * `sent` or `delivered`.
-   */
-  readBy?: string[];
-};
-
-/**
- * Full-row override snippet. Inversion of control: receives the message AND a
- * `renderDefault` snippet that renders the built-in row, so a consumer can wrap
- * or replace a row while still delegating to the default when it chooses.
- */
-export type ChatRowOverride = Snippet<[message: Message, renderDefault: Snippet]>;
-
-/**
- * Feature-capability flags for the Chat component. Grouped here so consumers
- * pass a single object instead of five scattered boolean props.
- *
- * All flags default to `true` when the `capabilities` prop is omitted or when
- * an individual key is absent from the object.
- */
-export type ChatCapabilities = {
-  /** Whether file attachments are enabled in the composer. When `false`, the attachment button is hidden and drag-and-drop onto the chat surface is suppressed. Default `true`. */
-  attachments?: boolean;
-  /** Whether in-conversation search is enabled. When `true`, pressing Ctrl+F / Cmd+F opens a search bar that highlights matching messages. Default `true`. */
-  search?: boolean;
-  /** Whether per-message copy buttons are shown in the message action bar. Default `true`. */
-  copy?: boolean;
-  /** Whether user messages can be edited inline. Default `true`. */
-  editing?: boolean;
-  /** Whether failed assistant messages show a retry button. Default `true`. */
-  retry?: boolean;
-};
-
-/** Props for the Chat component. */
-// `onsubmit` is redefined below with a ChatSubmitEvent payload, so strip the
-// native DOM SubmitEvent handler from the base attributes to avoid an
-// intersection that no handler can satisfy.
-export type ChatProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'onsubmit'> & {
-  /** Unique identifier used to scope accessibility attributes across the chat surface. */
-  id: string;
-  /**
-   * The conversation transcript to render. Pass a {@link ConversationHistory}
-   * snapshot; consumers holding a stateful conversation object pass its current
-   * snapshot (e.g. `conversation.current`).
-   */
-  conversation: ConversationHistory;
-  /** Whether the message viewport is scrolled to the bottom. Bindable; updated automatically as the user scrolls. Default `true`. */
-  atBottom?: boolean;
-  /** Number of messages received while the viewport was scrolled away from the bottom. Bindable; resets to `0` when the user scrolls to the bottom. Default `0`. */
-  unreadCount?: number;
-  /** Whether the "new messages" indicator is currently visible above the composer. Bindable; cleared automatically when the viewport reaches the bottom. Default `false`. */
-  newMessageIndicatorVisible?: boolean;
-  /** Additional class name merged onto the `.chat-container` root element. */
-  class?: string;
-  /** Controls the background of the chat surface. Use `'transparent'` to inherit the host element's background when embedding chat inside a card or panel. Default `'default'`. */
-  surfaceMode?: 'default' | 'transparent';
-  /**
-   * Controls spacing density of the message timeline.
-   * - `'comfortable'` (default): standard padding and gap.
-   * - `'compact'`: tighter spacing for data-dense contexts (e.g., embedded panels).
-   *   Action buttons keep `min-height: var(--cinder-touch-target-min)` regardless.
-   */
-  density?: 'comfortable' | 'compact';
-  /**
-   * Visual treatment for message bubbles.
-   * - `'bubble'` (default): colored backgrounds differentiate user from assistant.
-   * - `'flat'`: no bubble backgrounds; role is communicated via alignment and role label.
-   *   Text-on-surface contrast meets WCAG AA via `--cinder-text` on `--cinder-surface-inset`.
-   */
-  variant?: 'bubble' | 'flat';
-  /** Distance in pixels from the bottom of the scroll viewport within which the chat is considered "at bottom" and will auto-scroll on new messages. Default `150`. */
-  bottomThreshold?: number;
-  /** Distance in pixels scrolled up from the bottom required before the jump-to-latest button appears. Must be greater than `bottomThreshold` to prevent button flickering. Default `200`. */
-  jumpThreshold?: number;
-  /** Whether a streaming response is currently in progress. When `true`, the composer is disabled and a stop-generating button is shown. Default `false`. */
-  streaming?: boolean;
-  /** Optional status label displayed in the typing indicator while `streaming` is `true` and no streaming content has arrived yet (e.g. `"Thinking…"` or `"Analyzing file…"`). When omitted, three animated dots are shown. */
-  streamingStatus?: string;
-  /**
-   * Feature-capability flags. Pass a `ChatCapabilities` object to enable or disable
-   * individual Chat features (attachments, search, copy, editing, retry) as a group
-   * rather than as five separate boolean props.
-   */
-  capabilities?: ChatCapabilities;
-  /** Use the virtualized message render path for long transcripts. The complete `ConversationHistory` remains unchanged; only the DOM window is reduced. Default `false`. */
-  virtualized?: boolean;
-  /** Estimated row height in pixels for virtualized message rows. Default `88`. */
-  virtualizationEstimatedRowHeight?: number;
-  /** Number of extra virtual rows rendered before and after the viewport. Default `3`. */
-  virtualizationOverscan?: number;
-  /** Initial virtualized viewport height used before measurement. Default `640`. */
-  virtualizationInitialHeight?: number;
-  /** Whether the explicit "Load earlier messages" trigger is shown when a load handler exists. Default `true`. */
-  moreHistoryAvailable?: boolean;
-  /** Label for the history pagination trigger. Default `"Load earlier messages"`. */
-  loadEarlierLabel?: string;
-  /** Status text while older messages are loading. Default `"Loading earlier messages"`. */
-  loadingEarlierLabel?: string;
-  header?: Snippet;
-  empty?: Snippet;
-  /** List of suggested starter prompt strings shown as clickable buttons in the default empty state. Clicking a prompt submits it immediately as a user message. Has no effect when a custom `empty` snippet is provided. */
-  emptyPrompts?: string[];
-  messageActions?: Snippet<[Message]>;
-  messageStatus?: Snippet<[Message]>;
-  /**
-   * Full-row override. Renders an entire message row; receives the message and
-   * a `renderDefault` snippet for the built-in row (inversion of control), so a
-   * consumer can wrap or fully replace specific rows.
-   */
-  row?: ChatRowOverride;
-  /**
-   * Per-message-part override. Replaces the rendering of an individual body part
-   * (markdown, tool call, tool result) while delegating the rest to the built-ins
-   * via the `renderDefault` snippet it receives. Image parts are excluded — they
-   * render through the grouped attachment grid, not this override.
-   */
-  messagePart?: MessagePartOverride;
-  viewportAttachment?: Attachment<HTMLElement>;
-  /**
-   * Participants who are currently typing. Out-of-band UI state — NOT stored on
-   * `Message`. Pass an array of {@link TypingParticipant} objects; the component
-   * renders a per-participant typing indicator above the input. The adapter's
-   * `onTypingChange` push handler feeds the same indicator when an adapter is
-   * wired. Default `undefined` (indicator hidden).
-   */
-  typingParticipants?: TypingParticipant[];
-  /**
-   * Per-message read receipt state. Out-of-band UI state — NOT stored on `Message`.
-   * Pass a `Map` keyed by message id with a {@link ReadReceipt} value; the
-   * component renders a receipt badge on USER messages only. The adapter's
-   * `onReadReceipt` push handler populates the same state when an adapter is wired.
-   * Default `undefined` (no receipts shown).
-   */
-  readReceipts?: Map<string, ReadReceipt>;
-  /**
-   * Optional command/transport boundary around `conversation`. Its methods take
-   * precedence over the matching callback props (e.g. `sendMessage` over
-   * `onsubmit`); omit it and Chat behaves exactly as with plain callbacks.
-   */
-  adapter?: ChatAdapter;
-  /** Called when an adapter command fails — either a rejected promise or a synchronous throw from the method. */
-  onadaptererror?: (event: ChatAdapterErrorEvent) => void;
-  /** Forwarded from the adapter's real-time `onMessage` push (consumer owns the transcript). */
-  onpushmessage?: (message: Message) => void;
-  /** Forwarded from the adapter's real-time `onTypingChange` push. */
-  ontypingchange?: (isTyping: boolean) => void;
-  /** Forwarded from the adapter's real-time `onReadReceipt` push. */
-  onreadreceipt?: (event: ChatReadReceiptEvent) => void;
-  onsubmit?: (event: ChatSubmitEvent) => void;
-  onretry?: (messageId: string) => void;
-  onedit?: (event: { messageId: string; content: string }) => void;
-  /**
-   * Called when the user approves an action-required tool call. The
-   * consumer is responsible for updating its transcript (e.g. calling
-   * conversationalist to unblock the pending tool) and triggering a new
-   * generation. When an adapter is also wired, Chat calls
-   * `adapter.approveToolCall(toolCallId)` first and then this callback.
-   */
-  onapprove?: (toolCallId: string) => void;
-  /**
-   * Called when the user denies an action-required tool call. When an
-   * adapter is also wired, Chat calls `adapter.denyToolCall(toolCallId)` first
-   * and then this callback.
-   */
-  ondeny?: (toolCallId: string) => void;
-  /**
-   * Override or supplement the reasoning text for a message. Called per-message;
-   * return a non-empty string to show a reasoning block, `undefined` to fall back
-   * to `message.metadata['cinder:reasoning']`, empty string to suppress reasoning.
-   */
-  messageReasoning?: (message: Message) => string | undefined;
-  /**
-   * Override or supplement the step list for a message. Called per-message;
-   * return an array to show step indicators, `undefined` to fall back to
-   * `message.metadata['cinder:steps']`. An empty array suppresses steps.
-   */
-  messageSteps?: (message: Message) => StepInfo[] | undefined;
-  /**
-   * Override or supplement the suggestion list for a message. Called
-   * per-message; return an array of label strings to show suggestion chips,
-   * `undefined` to fall back to `message.metadata['cinder:suggestions']`. An
-   * empty array suppresses suggestions.
-   */
-  messageSuggestions?: (message: Message) => string[] | undefined;
-  /**
-   * Called when the user selects a suggestion chip. The label string is
-   * passed back. The consumer is responsible for submitting it as a new user
-   * message.
-   */
-  onsuggestionselect?: (label: string) => void;
-  /** Called when the explicit history trigger is activated. The consumer prepends compatible messages into `conversation`. */
-  onloadhistory?: () => void | Promise<void>;
-  onstopgenerating?: (event: ChatStopGeneratingEvent) => void;
-  onjumptolatest?: () => void;
-  onscrollstatechange?: (event: ChatScrollStateChangeEvent) => void;
-  onunreadindicatorchange?: (event: ChatUnreadIndicatorChangeEvent) => void;
-  onexpandedchange?: (expanded: boolean) => void;
-  onattachmentadd?: (attachment: ChatAttachment) => void;
-  onattachmentremove?: (attachment: ChatAttachment) => void;
-  onattachmentfailure?: (file: File, error: string) => void;
-};