@kitn.ai/ui 0.27.0 → 0.29.0

package/src/elements/prompt-input.tsx

@@ -1,240 +0,0 @@
-import { createEffect, createSignal, onMount, onCleanup } from 'solid-js';
-import { defineWebComponent } from './define';
-import { DefaultPromptInput } from './default-input';
-import type { AttachmentData } from '../components/attachments';
-import type { CustomAction } from './chat-types';
-import type { TriggerDef, ComposerChange } from '../components/composer';
-import { type ComposerDoc, type EntityRef, normalizeValue, serializeToText, entitiesOf } from '../primitives/composer-model';
-
-interface Props extends Record<string, unknown> {
-  /** Value of the input, as a JS property. A **string** is the controlled text
-   *  mirror (the host owns it and updates on `kai-value-change`). A **ComposerDoc**
-   *  (array of text/entity segments) is a one-time **seed** that pre-populates
-   *  pills (skills/agents/plugins); the user then edits freely. Leave unset for
-   *  uncontrolled behavior. `kai-submit`/`kai-value-change` always emit `value`
-   *  as the flattened string (back-compat) plus the structured `doc` + `entities`. */
-  value?: string | ComposerDoc;
-  /** Placeholder text shown in the empty input. */
-  placeholder?: string;
-  /** Disable the input and submit button entirely (non-interactive). */
-  disabled?: boolean;
-  /** Show the loading/streaming state and block submit (use while awaiting a
-   *  reply). */
-  loading?: boolean;
-  /** Starter prompts shown above the input. Clicking one follows
-   *  `suggestionMode`. Set as a JS property. */
-  suggestions?: string[];
-  /** What clicking a suggestion does: `'submit'` (default) sends it immediately
-   *  as if typed and submitted; `'fill'` just places it in the input. */
-  suggestionMode?: 'submit' | 'fill';
-  /** Show a web-search (Globe) button in the left toolbar; clicking it fires a
-   *  `kai-web-search` event. Attribute: `web-search`. */
-  webSearch?: boolean;
-  /** Show a Voice (Mic) button in the left toolbar; clicking it fires a `voice`
-   *  event. */
-  voice?: boolean;
-  /** When set and `loading` is true, the send button is replaced by a Stop
-   *  button (square icon, "Stop" aria-label). Clicking it fires `kai-stop`. */
-  stoppable?: boolean;
-  /** Send-button visibility. `'always'` (default) always shows it; `'auto'` shows
-   *  it only when there's text/attachments (an empty composer hides it, though
-   *  Enter still submits). To hide it entirely (Enter-only), it's pure CSS:
-   *  `::part(send){display:none}`, no prop needed. Restyle via `::part(send)`.
-   *  The Stop button (`stoppable` + `loading`) is unaffected. */
-  submit?: 'always' | 'auto';
-  /** When `false`, hides the built-in paperclip attach button even though the
-   *  element otherwise supports attachments. Use this when a `+` menu in
-   *  `toolbar-start` already exposes "Add files", to avoid a duplicate control.
-   *  Defaults to `true`. */
-  attach?: boolean;
-  /** Attachments to seed the input with (so a consumer can pre-populate staged
-   *  files without an upload). Set as a JS property; the element then manages its
-   *  own attachment state from there (add via the paperclip, remove per chip).
-   *  Each item's `url` must be a `data:` URI or an https URL, never
-   *  `URL.createObjectURL`: a `blob:` URL previews perfectly and is meaningless
-   *  outside this tab, so `toOpenAIMessages`/`toAnthropicMessages` refuse it.
-   *  (The built-in paperclip already stages files as `data:` URIs.) */
-  attachments?: AttachmentData[];
-  /** Rich entity triggers. Each `{ char, kind, items }` opens a caret-anchored menu
-   *  that inserts an atomic pill. Convention: `/` → skills, `@` → agents (plugins
-   *  are the grouping/provenance of those items). Set as a JS property. */
-  triggers?: TriggerDef[];
-  /** Default icon per entity kind (kind → image URL/data-URI) for pills/menu items
-   *  without their own `icon`. Overrides the built-in agent/plugin glyphs. JS property. */
-  kindIcons?: Record<string, string>;
-}
-
-/** Events fired by `<kai-prompt-input>`. */
-interface Events {
-  /** The user submitted the prompt (Enter or send button). `value` is the
-   *  flattened text (back-compat); `doc` is the structured document and
-   *  `entities` the inserted pills (skills/agents) for downstream expansion.
-   *  `<kai-prompt-input>` is the batteries-included composer row (send button,
-   *  toolbar, attachment staging) built on `<kai-composer>`, the bare editor. */
-  'kai-submit': { value: string; doc: ComposerDoc; entities: EntityRef[]; attachments: AttachmentData[] };
-  /** The input changed (fires on every edit). Carries the flattened `value`
-   *  plus the structured `doc` + `entities`. */
-  'kai-value-change': { value: string; doc: ComposerDoc; entities: EntityRef[] };
-  /** The staged attachments changed: a file was added (via the paperclip) or
-   *  removed (per-chip ×). Carries the full current list so a consumer can react
-   *  in real time (validate, show upload progress, toggle the send button). */
-  'kai-attachments-change': { attachments: AttachmentData[] };
-  /** A suggestion was clicked while `suggestion-mode="fill"`. */
-  'kai-suggestion-click': { value: string };
-  /** The web-search (Globe) toolbar button was clicked. */
-  'kai-web-search': Record<string, never>;
-  /** The Voice (Mic) toolbar button was clicked. */
-  'kai-voice': Record<string, never>;
-  /** The Stop button was clicked while `stoppable` and `loading` are both true. */
-  'kai-stop': Record<string, never>;
-  /** A custom `<kai-action>` toolbar button was clicked. `action` is the `id` of
-   *  the `<kai-action>` element that was clicked. */
-  'kai-toolbar-action': { action: string };
-}
-
-defineWebComponent<Props, Events>('kai-prompt-input', {
-  value: undefined,
-  placeholder: 'Send a message...',
-  disabled: false,
-  loading: false,
-  suggestions: undefined,
-  suggestionMode: 'submit',
-  webSearch: false,
-  voice: false,
-  stoppable: false,
-  submit: 'always',
-  attach: true,
-  attachments: undefined,
-  triggers: undefined,
-  kindIcons: undefined,
-}, (props, { dispatch, flag, element, expose }) => {
-  const [internal, setInternal] = createSignal<string | ComposerDoc>(props.value ?? '');
-  // Seed staged attachments from the `attachments` property; the element manages
-  // its own state from there (paperclip adds, per-chip remove deletes).
-  const [attachments, setAttachments] = createSignal<AttachmentData[]>(props.attachments ?? []);
-  // Re-seed when the `attachments` property is (re)assigned by the consumer
-  // (e.g. set via a `ref` after mount). Subsequent in-element edits stay local.
-  createEffect(() => {
-    if (props.attachments) setAttachments(props.attachments);
-  });
-
-  // Read declarative <kai-action> children from light DOM — same pattern as
-  // kai-message. Shadow DOM with no <slot> suppresses them visually; they are
-  // invisible data carriers.
-  const [toolbarActions, setToolbarActions] = createSignal<CustomAction[]>([]);
-  onMount(() => {
-    const readActions = () => {
-      const nodes = [...element.querySelectorAll('kai-action')];
-      setToolbarActions(nodes.map(n => ({
-        id: n.id || n.getAttribute('action') || '',
-        label: n.textContent?.trim() || n.getAttribute('label') || n.id || '',
-        icon: n.getAttribute('icon') ?? undefined,
-        tooltip: n.getAttribute('tooltip') ?? undefined,
-      })));
-    };
-    readActions();
-    const observer = new MutationObserver(readActions);
-    observer.observe(element, { childList: true, attributes: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // A string `value` is controlled (the host owns it). A ComposerDoc `value` is a
-  // one-time seed: it lives in `internal` and the user's edits (which arrive as
-  // strings) replace it there, so the seed never fights the edits.
-  const current = (): string | ComposerDoc =>
-    typeof props.value === 'string' ? props.value : internal();
-
-  // Latest structured change from the composer (doc + entities). Captured before
-  // the string value-change fires (the bridge calls onComposerChange first), so
-  // the dispatched events can carry the doc. Reset to a text-only doc when a value
-  // is set that didn't come from the composer (e.g. a suggestion fill).
-  let lastChange: ComposerChange = { doc: [], text: '', entities: [] };
-
-  // Seed from a ComposerDoc `value`: push it into `internal` (so `current()`
-  // reflects the seed) and into `lastChange` (so a submit-WITHOUT-edit still
-  // carries the seeded doc + entities). Re-runs only when `value` is reassigned.
-  createEffect(() => {
-    const v = props.value;
-    if (v != null && typeof v !== 'string') {
-      const doc = normalizeValue(v);
-      setInternal(doc);
-      lastChange = { doc, text: serializeToText(doc), entities: entitiesOf(doc) };
-    }
-  });
-
-  const handleChange = (v: string) => {
-    setInternal(v);
-    if (v !== lastChange.text) lastChange = { doc: normalizeValue(v), text: v, entities: [] };
-    dispatch('kai-value-change', { value: v, doc: lastChange.doc, entities: lastChange.entities });
-  };
-  const handleSubmit = () => {
-    // `value` is always the flattened string (back-compat); a seeded doc is
-    // serialized. The structured `doc`/`entities` carry the pills.
-    dispatch('kai-submit', { value: serializeToText(normalizeValue(current())), doc: lastChange.doc, entities: lastChange.entities, attachments: attachments() });
-    setAttachments([]);
-  };
-  const handleSuggestionClick = (v: string) => {
-    if ((props.suggestionMode ?? 'submit') === 'fill') {
-      handleChange(v);
-      dispatch('kai-suggestion-click', { value: v });
-    } else {
-      // Default: behave as if the user typed the suggestion and pressed submit.
-      dispatch('kai-submit', { value: v, doc: normalizeValue(v), entities: [], attachments: attachments() });
-      setAttachments([]);
-    }
-  };
-
-  // ── Imperative API (instance methods on the host) ──────────────────────────
-  // The input half of the interaction surface; counterpart to the kai-* events.
-  expose({
-    /** Focus the text editor inside the shadow root (not the hidden file input). */
-    focus: (options?: FocusOptions) => {
-      const root = element.shadowRoot;
-      const target =
-        root?.querySelector<HTMLElement>('[contenteditable]:not([contenteditable="false"]), textarea') ??
-        root?.querySelector<HTMLElement>('input:not([type="file"])');
-      target?.focus(options);
-    },
-    /** Blur the focused input control. */
-    blur: () =>
-      (element.shadowRoot?.activeElement as HTMLElement | null)?.blur(),
-    /** Clear the text and any staged attachments (fires kai-value-change /
-     *  kai-attachments-change so a controlled consumer can react). */
-    clear: () => {
-      handleChange('');
-      if (attachments().length) { setAttachments([]); dispatch('kai-attachments-change', { attachments: [] }); }
-    },
-    /** Send the current value programmatically, on the same path as Enter / the
-     *  send button (fires kai-submit, then clears staged attachments). Named
-     *  `send`, not `submit`, to avoid colliding with the `submit` prop. */
-    send: () => handleSubmit(),
-  });
-
-  return (
-    <DefaultPromptInput
-      value={current()}
-      placeholder={props.placeholder}
-      disabled={flag('disabled')}
-      loading={flag('loading')}
-      stoppable={flag('stoppable')}
-      submit={props.submit as 'always' | 'auto'}
-      attach={flag('attach')}
-      suggestions={props.suggestions}
-      attachments={attachments()}
-      webSearch={flag('webSearch')}
-      voice={flag('voice')}
-      toolbarActions={toolbarActions()}
-      triggers={props.triggers}
-      kindIcons={props.kindIcons as Record<string, string> | undefined}
-      onComposerChange={(c) => { lastChange = c; }}
-      onValueChange={handleChange}
-      onSubmit={handleSubmit}
-      onSuggestionClick={handleSuggestionClick}
-      onAttachmentsChange={(a) => { setAttachments(a); dispatch('kai-attachments-change', { attachments: a }); }}
-      onWebSearch={() => dispatch('kai-web-search')}
-      onVoice={() => dispatch('kai-voice')}
-      onStop={() => dispatch('kai-stop')}
-      onAction={(id) => dispatch('kai-toolbar-action', { action: id })}
-    />
-  );
-});

package/src/elements/prompt-suggestions.tsx

@@ -1,113 +0,0 @@
-import { For, createSignal, onMount, onCleanup } from 'solid-js';
-import { defineWebComponent } from './define';
-import { PromptSuggestion } from '../components/prompt-suggestion';
-
-type Item = string | { label: string; value?: string; icon?: string };
-
-interface Props extends Record<string, unknown> {
-  /** The suggestions. Strings, or `{ label, value }` when the displayed text
-   *  and the emitted value differ. Set as a JS property. Omit to supply them as
-   *  `<kai-suggestion>` light-DOM children instead; when both are present the
-   *  property's suggestions come first. */
-  suggestions?: Item[];
-  /** Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). */
-  variant?: 'outline' | 'ghost' | 'default';
-  /** Row height for `layout="list"`: `'md'` (default) or `'lg'` for taller rows.
-   *  Chips are unaffected. */
-  size?: 'md' | 'lg';
-  /** Layout: `'chips'` (default) renders a wrapping row of rounded pills;
-   *  `'list'` renders a vertical, full-width "Ideas for you" list where each
-   *  row is left-aligned with a leading `icon`, a label, and a hover
-   *  background. */
-  layout?: 'chips' | 'list';
-  /** Full-width left-aligned rows instead of pills. */
-  block?: boolean;
-  /** Substring to highlight within each suggestion. */
-  highlight?: string;
-}
-
-/** Events fired by `<kai-suggestions>`. */
-interface Events {
-  /** A suggestion was clicked. */
-  'kai-select': { value: string };
-}
-
-const labelOf = (s: Item) => (typeof s === 'string' ? s : s.label);
-const valueOf = (s: Item) => (typeof s === 'string' ? s : s.value ?? s.label);
-const iconOf = (s: Item) => (typeof s === 'string' ? undefined : s.icon);
-
-/** Parse a single `<kai-suggestion>` node into an `Item` descriptor. */
-export function parseSuggestionNode(n: Element): Item {
-  const text = n.textContent?.trim() ?? '';
-  const value = n.getAttribute('value') ?? text;
-  return { label: text, value, icon: n.getAttribute('icon') ?? undefined };
-}
-
-/**
- * `<kai-suggestions>` — a row/list of suggestion chips. Data via the
- * `suggestions` property; `variant`/`layout`/`block`/`highlight` attributes;
- * emits `select`. `layout="list"` renders the vertical "Ideas for you" list
- * (leading icon + label + hover background) instead of pills.
- *
- * Alternatively, declare chips as `<kai-suggestion>` child elements
- * (light-DOM data carriers — hidden by the Shadow DOM):
- *
- * ```html
- * <kai-suggestions>
- *   <kai-suggestion value="vue">Use Vue</kai-suggestion>
- *   <kai-suggestion value="react">Use React</kai-suggestion>
- * </kai-suggestions>
- * ```
- */
-defineWebComponent<Props, Events>('kai-suggestions', {
-  suggestions: [],
-  variant: 'outline',
-  size: 'md',
-  layout: 'chips',
-  block: false,
-  highlight: undefined,
-}, (props, { dispatch, flag, element }) => {
-  // Read declarative <kai-suggestion> children from light DOM.
-  // Shadow DOM with no <slot> suppresses them visually — they're invisible data carriers.
-  const [slottedSuggestions, setSlottedSuggestions] = createSignal<Item[]>([]);
-  onMount(() => {
-    const read = () => {
-      const nodes = [...element.querySelectorAll('kai-suggestion')];
-      setSlottedSuggestions(nodes.map(parseSuggestionNode));
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true, attributes: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Merge prop suggestions (first) with declarative children (after).
-  const allSuggestions = () => [...(props.suggestions ?? []), ...slottedSuggestions()];
-
-  const isList = () => props.layout === 'list';
-
-  const containerClass = () =>
-    isList() ? 'flex flex-col gap-0.5'
-      : flag('block') ? 'flex flex-col gap-2'
-        : 'flex flex-wrap gap-2';
-
-  return (
-    <div class={containerClass()}>
-      <For each={allSuggestions()}>
-        {(s) => (
-          <PromptSuggestion
-            variant={props.variant}
-            size={props.size}
-            icon={iconOf(s)}
-            block={flag('block')}
-            list={isList()}
-            highlight={props.highlight}
-            onClick={() => dispatch('kai-select', { value: valueOf(s) })}
-          >
-            {labelOf(s)}
-          </PromptSuggestion>
-        )}
-      </For>
-    </div>
-  );
-});

package/src/elements/radio-group.tsx

@@ -1,129 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { RadioGroup } from '../ui/radio';
-// Public shape of the `options` prop; lives in ./element-data-types so the ROOT
-// entry can re-export it (see that file's header).
-import type { KaiRadioOption } from './element-data-types';
-
-interface Props extends Record<string, unknown> {
-  /** The choices, top to bottom. Set as a JS PROPERTY (array), never an attribute. */
-  options: KaiRadioOption[];
-  /** Controlled selected `value`. Settable and reflected to the `value` attribute.
-   *  `el.value = 'degraded'` drives it; choosing a row updates it and fires
-   *  `kai-change`. Read `el.value` for live state. */
-  value?: string;
-  /** Shared form-control name for every radio in the group. Defaults to a generated
-   *  id, so the group is exclusive and keyboard-navigable even when nothing is
-   *  submitted. */
-  name?: string;
-  /** Disable every row. Individual rows carry their own `disabled`. */
-  disabled?: boolean;
-  /** Accessible name for the group. */
-  label?: string;
-}
-
-/** Events fired by `<kai-radio-group>`. */
-interface Events {
-  /** A row was chosen. */
-  'kai-change': { value: string };
-}
-
-/**
- * `<kai-radio-group>` — the kit's "pick exactly one" control: a bordered, divided
- * list over real `<input type="radio">`s that share a `name`, so one tab stop, arrow
- * keys, mutual exclusion and form participation are the browser's and not a
- * reimplementation.
- *
- * Feed it `options` (a JS-property array of `{ value, label, description?, disabled? }`),
- * drive/read the selection with the `value` property (settable + reflected to the
- * `value` attribute, so `:host([value])` and `el.value` see live state), and listen
- * for `kai-change`.
- *
- * Re-rendering follows the kit's reactivity contract: hand it a NEW array reference,
- * and a new object for any option whose content changed — the rows are a
- * reference-keyed list, so mutating an option in place changes nothing on screen.
- *
- * ```html
- * <kai-radio-group value="degraded" label="Severity"></kai-radio-group>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const group = document.querySelector('kai-radio-group');
- *   group.options = [
- *     { value: 'blocking', label: 'Blocking', description: 'Pages the on-call' },
- *     { value: 'degraded', label: 'Degraded' },
- *     { value: 'cosmetic', label: 'Cosmetic' },
- *   ];
- *   group.addEventListener('kai-change', (e) => console.log(e.detail.value));
- *   group.value = 'cosmetic'; // drive it (no kai-change — the host already knows)
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-radio-group', {
-  options: [],
-  value: undefined,
-  name: undefined,
-  disabled: undefined,
-  label: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the selection into the facade and drive RadioGroup CONTROLLED so the host can
-  // read it (`el.value` / `:host([value])`) and set it after mount. Seed from the
-  // `value` property/attribute present on mount; nothing is auto-selected, because
-  // `options` normally arrives as a property AFTER upgrade (kai-segmented's structure).
-  const [value, setValue] = createSignal(
-    (props.value as string | undefined) ?? element.getAttribute('value') ?? '',
-  );
-
-  // Coerce anything arriving through the `value` setter (a JS assignment, or the
-  // attributeChangedCallback write-back) to a string, falling back to the live
-  // attribute when nullish so the reflect write-back equals the signal and the guards
-  // below absorb it — no attr⇄prop feedback loop.
-  const coerce = (v: unknown): string =>
-    v == null ? (element.getAttribute('value') ?? '') : String(v);
-
-  // Apply a new value and fire kai-change once (the user-choice path).
-  const apply = (next: string) => {
-    if (untrack(value) === next) return;
-    setValue(next);
-    dispatch('kai-change', { value: next });
-  };
-
-  Object.defineProperty(element, 'value', {
-    get: () => value(),
-    set: (v: unknown) => { const next = coerce(v); if (untrack(value) !== next) setValue(next); },
-    configurable: true,
-    enumerable: true,
-  });
-
-  // Reflect internal value → the `[value]` host attribute (for `:host([value])`).
-  createEffect(() => {
-    const v = value();
-    if (v) {
-      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
-    } else if (element.hasAttribute('value')) {
-      element.removeAttribute('value');
-    }
-  });
-
-  expose({
-    /** Focus the group's tab stop. That is the selected radio, or the first row when
-     *  nothing is selected yet. */
-    focus: (options?: FocusOptions) => {
-      const root = element.shadowRoot;
-      const radios = [...(root?.querySelectorAll<HTMLInputElement>('input[type="radio"]') ?? [])];
-      (radios.find((r) => r.checked) ?? radios[0])?.focus(options);
-    },
-  });
-
-  return (
-    <RadioGroup
-      options={(props.options ?? []) as KaiRadioOption[]}
-      value={value()}
-      name={props.name as string | undefined}
-      disabled={flag('disabled')}
-      label={props.label as string | undefined}
-      onChange={(next) => apply(next)}
-    />
-  );
-});

package/src/elements/reasoning.tsx

@@ -1,71 +0,0 @@
-import { defineWebComponent } from './define';
-import { Reasoning, ReasoningTrigger, ReasoningContent, type ReasoningController } from '../components/reasoning';
-import { ChatConfig, useChatConfig } from '../primitives/chat-config';
-import { wireDisclosure } from './disclosure';
-
-interface Props extends Record<string, unknown> {
-  /** The reasoning text to display. */
-  text: string;
-  /** Trigger label. */
-  label?: string;
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute; the element still self-manages on trigger click + while
-   *  streaming). Set `el.open = true`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** While true, auto-expands (and re-collapses when it flips false). */
-  streaming?: boolean;
-  /** Render `text` as markdown. */
-  markdown?: boolean;
-  /** Gate the disclosure trigger: programmatic `show()/hide()/toggle()` still
-   *  work, but the trigger click no longer toggles. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-reasoning>`. */
-interface Events {
-  /** The reasoning block expanded or collapsed (via the trigger, streaming
-   *  auto-open, or a method). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-reasoning>` — a collapsible reasoning/thinking block that auto-expands
- * while `streaming`. Text via the `text` property; `markdown`/`streaming` flags.
- * Open state is the standard disclosure surface: settable+reflecting `open`,
- * `kai-open-change`, and `show()`/`hide()`/`toggle()` (gated by `disabled`);
- * seed with `defaultOpen`.
- */
-defineWebComponent<Props, Events>('kai-reasoning', {
-  text: '',
-  label: 'Reasoning',
-  open: undefined,
-  defaultOpen: undefined,
-  streaming: false,
-  markdown: true,
-  disabled: undefined,
-}, (props, ctx) => {
-  const { flag } = ctx;
-  const outer = useChatConfig();
-  let api: ReasoningController | undefined;
-
-  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle, disabled-gating. See ./disclosure. This is the SOLE emitter
-  // of kai-open-change — we no longer dispatch it from Reasoning's onOpenChange.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  return (
-    <ChatConfig portalMount={outer.portalMount()}>
-      <Reasoning
-        defaultOpen={flag('defaultOpen')}
-        isStreaming={flag('streaming')}
-        disabled={flag('disabled')}
-        controllerRef={(a) => (api = a)}
-      >
-        <ReasoningTrigger>{props.label}</ReasoningTrigger>
-        <ReasoningContent markdown={flag('markdown')}>{props.text}</ReasoningContent>
-      </Reasoning>
-    </ChatConfig>
-  );
-});