@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/model-switcher.stories.tsx

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import type { ModelOption } from '../types';
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-// The web components are custom DOM elements, so declare the tags for JSX.
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-model-switcher': JSX.HTMLAttributes<HTMLElement>;
-      /** Light-DOM data carrier for declarative model options inside `<kai-model-switcher>`. */
-      'kai-model': JSX.HTMLAttributes<HTMLElement> & {
-        id?: string;
-        provider?: string;
-        description?: string;
-        group?: string;
-      };
-    }
-  }
-}
-
-const models: ModelOption[] = [
-  { id: 'opus', name: 'Claude Opus', provider: 'Anthropic' },
-  { id: 'sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-  { id: 'haiku', name: 'Claude Haiku', provider: 'Anthropic' },
-];
-
-/** Render `<kai-model-switcher>` with `models` set as a property; tracks selection. */
-function SwitcherElement(props: { models: ModelOption[]; current?: string }) {
-  let el: (HTMLElement & { models?: ModelOption[]; currentModel?: string }) | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.models = props.models;
-    el.currentModel = props.current ?? props.models[0]?.id;
-    // reflect the selection back so the trigger label updates
-    el.addEventListener('kai-model-change', (e) => {
-      const ev = e as CustomEvent<{ modelId: string }>;
-      el!.currentModel = ev.detail.modelId;
-    });
-  });
-  return (
-    <kai-model-switcher ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-model-switcher id="ms"></kai-model-switcher>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const ms = document.getElementById('ms');
-  ms.models = [
-    { id: 'opus', name: 'Claude Opus', provider: 'Anthropic' },
-    { id: 'sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-  ];
-  ms.currentModel = 'opus';
-  ms.addEventListener('kai-model-change', (e) => { ms.currentModel = e.detail.modelId; });
-</script>`;
-
-const meta = {
-  title: 'Components/ModelSwitcher',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-model-switcher'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-model-switcher', [
-          '`<kai-model-switcher>` is the framework-agnostic **web component** for picking the active model — a dropdown showing each model\'s name and provider — isolated in **Shadow DOM**. It mirrors the switcher inside `<kai-chat>` as a standalone, composable piece.',
-          '**When to use:** building your own chat header and want the model picker on its own. In SolidJS, use the `ModelSwitcher` primitive.',
-          '**Placement:** inline in the chat header or toolbar, typically to the left of the context meter; it is a compact `inline-block` dropdown trigger that fits naturally beside other header controls.',
-          "**How to use — property API:** register once with `import '@kitn.ai/ui/elements'`, set the `models` **property** (each item: `{ id, name, provider? }`) and optionally `currentModel`, and listen for the `kai-model-change` **CustomEvent** (payload: `{ modelId }`). Note: like the underlying primitive, it only renders when more than one model is provided.",
-          "**How to use — declarative API:** compose `<kai-model>` light-DOM children instead of (or in addition to) setting the `models` property. Each `<kai-model id=\"gpt-4o\" provider=\"OpenAI\">GPT-4o</kai-model>` carries `id` (required), `provider` (optional), and a text label as its content. Children are hidden data carriers — no JS property assignment needed. Prop `models` items render first; `<kai-model>` children follow.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A three-model picker; selecting updates the trigger label. */
-export const Default: Story = {
-  render: () => <SwitcherElement models={models} current="opus" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Raw data — the `models` array shape that `<kai-model-switcher>` consumes. */
-export const Data: Story = {
-  name: 'Data',
-  render: () => (
-    <pre style={{ padding: '16px', 'font-size': '13px' }}>
-      {JSON.stringify(
-        [
-          { id: 'opus', name: 'Claude Opus', provider: 'Anthropic' },
-          { id: 'sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-          { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
-        ],
-        null,
-        2,
-      )}
-    </pre>
-  ),
-};
-
-const DECLARATIVE_HTML_SNIPPET = `<!-- Works in any framework or plain HTML — no JS property assignment needed -->
-<kai-model-switcher id="ms">
-  <kai-model id="gpt-4o" provider="OpenAI">GPT-4o</kai-model>
-  <kai-model id="gpt-4o-mini" provider="OpenAI">GPT-4o mini</kai-model>
-  <kai-model id="claude-sonnet" provider="Anthropic">Claude Sonnet</kai-model>
-</kai-model-switcher>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  document.getElementById('ms').addEventListener('kai-model-change', (e) => {
-    console.log('selected model:', e.detail.modelId);
-  });
-</script>`;
-
-/**
- * Declare each model option as a `<kai-model>` child element — no `models`
- * property or JS array wiring needed. The `id` attribute is the model identifier
- * emitted in `kai-model-change`; `provider` is optional; `textContent` is the
- * display label. Children are light-DOM data carriers hidden by the Shadow DOM.
- * Mix with the `models` prop: prop items render first, declarative children after.
- * Note: the switcher only renders when more than one model is provided.
- */
-export const DeclarativeModels: Story = {
-  name: 'Declarative Models (kai-model)',
-  render: () => {
-    let el: HTMLElement | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.addEventListener('kai-model-change', (e) =>
-        console.log('kai-model-change', (e as CustomEvent<{ modelId: string }>).detail.modelId),
-      );
-    });
-    return (
-      <kai-model-switcher
-        ref={(e) => (el = e as HTMLElement)}
-        style={{ display: 'inline-block', padding: '40px' }}
-      >
-        <kai-model id="gpt-4o" provider="OpenAI">GPT-4o</kai-model>
-        <kai-model id="gpt-4o-mini" provider="OpenAI">GPT-4o mini</kai-model>
-        <kai-model id="claude-sonnet" provider="Anthropic">Claude Sonnet</kai-model>
-      </kai-model-switcher>
-    );
-  },
-  parameters: {
-    docs: {
-      source: { code: DECLARATIVE_HTML_SNIPPET, language: 'html' },
-    },
-  },
-};
-
-const GROUPED_HTML_SNIPPET = `<kai-model-switcher id="ms">
-  <kai-model id="gpt-5.5" description="Flagship model">GPT-5.5</kai-model>
-  <kai-model id="gpt-4o" group="Legacy models">GPT-4o</kai-model>
-  <kai-model id="gpt-4.1" group="Legacy models">GPT-4.1</kai-model>
-</kai-model-switcher>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  document.getElementById('ms').addEventListener('kai-model-change', (e) => {
-    console.log('selected model:', e.detail.modelId);
-  });
-</script>`;
-
-/**
- * Rich rows + a collapsible group via `<kai-model>` attributes: `description`
- * renders as the row subtitle, and children sharing a `group` collect under a
- * collapsible section — the ChatGPT-style "Legacy models" pattern.
- */
-export const GroupedModels: Story = {
-  name: 'Grouped & Described (kai-model)',
-  render: () => {
-    let el: HTMLElement | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.addEventListener('kai-model-change', (e) =>
-        console.log('kai-model-change', (e as CustomEvent<{ modelId: string }>).detail.modelId),
-      );
-    });
-    return (
-      <kai-model-switcher ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }}>
-        <kai-model id="gpt-5.5" description="Flagship model">GPT-5.5</kai-model>
-        <kai-model id="gpt-5.5-mini" description="Faster, lighter">GPT-5.5 mini</kai-model>
-        <kai-model id="gpt-4o" group="Legacy models">GPT-4o</kai-model>
-        <kai-model id="gpt-4.1" group="Legacy models">GPT-4.1</kai-model>
-      </kai-model-switcher>
-    );
-  },
-  parameters: { docs: { source: { code: GROUPED_HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/popover.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, Show, For } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-popover': JSX.HTMLAttributes<HTMLElement> & { placement?: string; gutter?: number | string; open?: boolean };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<kai-popover placement="bottom-start">
-  <button slot="trigger">GPT-5.5 ▾</button>
-  <div>
-    <button>GPT-5.5 — Flagship model</button>
-    <button>Legacy models ▾</button>
-  </div>
-</kai-popover>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-  document.querySelector('kai-popover')
-    .addEventListener('kai-open-change', (e) => console.log('open:', e.detail.open));
-</script>`;
-
-const meta = {
-  title: 'Components/Popover',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-popover'),
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: specDescription('kai-popover', [
-        '`<kai-popover>` is the framework-agnostic **web component** for a button-and-popover card — a trigger that toggles a floating panel of arbitrary content, isolated in **Shadow DOM**. In SolidJS, use the `Popover` primitive.',
-        '**When to use:** a "button + card" affordance — a header model menu, a settings popover, an account dropdown with mixed controls. For a flat list of commands, use a menu instead.',
-        '**How to use:** slot the control as `slot="trigger"` and the panel as the default slot. Clicking the trigger toggles; Escape or an outside click closes (clicks inside do not). It fires `kai-open-change` with `{ open }` and accepts an `open` property for controlled use.',
-        'See the **Code** tab for HTML usage.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-const rowStyle = { display: 'flex', 'align-items': 'center', gap: '8px', width: '100%', padding: '6px 8px', 'border-radius': '6px', border: 'none', background: 'transparent', cursor: 'pointer', 'text-align': 'left' as const, font: 'inherit', color: 'var(--color-foreground)' };
-const LEGACY = ['GPT-4o', 'GPT-4.1', 'GPT-4o mini'];
-
-/** A ChatGPT-style model menu — a flagship row and an expandable group, slotted
- *  as the popover panel. The trigger and content are your light-DOM markup. */
-export const ModelMenu: Story = {
-  render: () => {
-    let el: HTMLElement | undefined;
-    const [legacyOpen, setLegacyOpen] = createSignal(false);
-    onMount(() => el?.addEventListener('kai-open-change', (e) => console.log('kai-open-change', (e as CustomEvent<{ open: boolean }>).detail.open)));
-    return (
-      <kai-popover ref={(e) => (el = e as HTMLElement)} placement="bottom-start">
-        <button slot="trigger" style={{ padding: '6px 12px', 'border-radius': '8px', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-foreground)', cursor: 'pointer', font: 'inherit' }}>
-          GPT-5.5 ▾
-        </button>
-        <div style={{ width: '15rem' }}>
-          <button type="button" style={rowStyle}>
-            <span style={{ 'font-weight': 600 }}>GPT-5.5</span>
-            <span style={{ 'font-size': '12px', color: 'var(--color-muted-foreground)' }}>Flagship</span>
-          </button>
-          <button type="button" style={rowStyle} aria-expanded={legacyOpen()} onClick={() => setLegacyOpen(!legacyOpen())}>
-            Legacy models {legacyOpen() ? '▴' : '▾'}
-          </button>
-          <Show when={legacyOpen()}>
-            <For each={LEGACY}>{(m) => <button type="button" style={{ ...rowStyle, 'padding-left': '28px' }}>{m}</button>}</For>
-          </Show>
-        </div>
-      </kai-popover>
-    );
-  },
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/prompt-input-slash-command.test.tsx

@@ -1,128 +0,0 @@
-/**
- * Unit tests for parseKaiSlashCommandElement and the merge behaviour
- * in kai-prompt-input's declarative <kai-slash-command> reader.
- *
- * Strategy: test the exported pure helper directly with synthetic DOM elements
- * (no Shadow DOM, no custom element upgrade needed).
- * Merge behaviour is verified by constructing the same arrays the element would
- * produce and asserting the result — pure array logic, no browser environment needed.
- */
-import { describe, it, expect } from 'vitest';
-import { parseKaiSlashCommandElement } from './prompt-input';
-
-// ---------------------------------------------------------------------------
-// parseKaiSlashCommandElement — attribute → SlashCommandItem mapping
-// ---------------------------------------------------------------------------
-
-describe('parseKaiSlashCommandElement', () => {
-  function makeEl(
-    attrs: Record<string, string | null>,
-    textContent?: string,
-  ): Element {
-    const el = document.createElement('kai-slash-command');
-    for (const [k, v] of Object.entries(attrs)) {
-      if (v !== null) el.setAttribute(k, v);
-    }
-    if (textContent !== undefined) el.textContent = textContent;
-    return el;
-  }
-
-  it('maps command attr → id, textContent → label, description attr → description', () => {
-    const el = makeEl(
-      { command: 'summarize', description: 'Summarize the thread' },
-      'summarize',
-    );
-    expect(parseKaiSlashCommandElement(el)).toEqual({
-      id: 'summarize',
-      label: 'summarize',
-      description: 'Summarize the thread',
-      category: undefined,
-    });
-  });
-
-  it('maps category attr → category', () => {
-    const el = makeEl(
-      { command: 'search', category: 'tools' },
-      'search',
-    );
-    expect(parseKaiSlashCommandElement(el).category).toBe('tools');
-  });
-
-  it('falls back to label attr when textContent is empty', () => {
-    const el = makeEl({ command: 'help', label: 'Help' }, '');
-    expect(parseKaiSlashCommandElement(el).label).toBe('Help');
-  });
-
-  it('falls back to command attr as label when both textContent and label attr are absent', () => {
-    const el = makeEl({ command: 'debug' });
-    expect(parseKaiSlashCommandElement(el).label).toBe('debug');
-  });
-
-  it('returns empty string for id when command attr is absent', () => {
-    const el = makeEl({}, 'orphan');
-    expect(parseKaiSlashCommandElement(el).id).toBe('');
-  });
-
-  it('returns undefined for optional attrs when absent', () => {
-    const el = makeEl({ command: 'bare' }, 'bare');
-    const item = parseKaiSlashCommandElement(el);
-    expect(item.description).toBeUndefined();
-    expect(item.category).toBeUndefined();
-  });
-
-  it('whitespace-trims textContent for the label', () => {
-    const el = makeEl({ command: 'trim' }, '  trim  ');
-    expect(parseKaiSlashCommandElement(el).label).toBe('trim');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// merge behaviour — prop slashCommands + slotted children
-// ---------------------------------------------------------------------------
-
-describe('slashCommands merge (prop + declarative children)', () => {
-  function makeEl(command: string, label: string, description?: string): Element {
-    const el = document.createElement('kai-slash-command');
-    el.setAttribute('command', command);
-    el.textContent = label;
-    if (description) el.setAttribute('description', description);
-    return el;
-  }
-
-  it('prop items appear before slotted children in the merged list', () => {
-    const propItems = [{ id: 'prop-cmd', label: 'Prop Command' }];
-    const slottedItems = [
-      parseKaiSlashCommandElement(makeEl('child-cmd', 'Child Command')),
-    ];
-    const merged = [...propItems, ...slottedItems];
-    expect(merged[0].id).toBe('prop-cmd');
-    expect(merged[1].id).toBe('child-cmd');
-  });
-
-  it('merged list is empty when both prop and children are absent', () => {
-    const propItems: ReturnType<typeof parseKaiSlashCommandElement>[] = [];
-    const slottedItems: ReturnType<typeof parseKaiSlashCommandElement>[] = [];
-    expect([...propItems, ...slottedItems]).toHaveLength(0);
-  });
-
-  it('slotted-only: single child appears as the only item', () => {
-    const el = makeEl('summarize', 'Summarize', 'Summarize the thread');
-    const merged = [...[], parseKaiSlashCommandElement(el)];
-    expect(merged).toHaveLength(1);
-    expect(merged[0]).toEqual({
-      id: 'summarize',
-      label: 'Summarize',
-      description: 'Summarize the thread',
-      category: undefined,
-    });
-  });
-
-  it('prop-only: prop items flow through unchanged', () => {
-    const propItems = [
-      { id: 'a', label: 'Alpha', description: 'First' },
-      { id: 'b', label: 'Beta' },
-    ];
-    const merged = [...propItems, ...([] as typeof propItems)];
-    expect(merged).toEqual(propItems);
-  });
-});

package/src/elements/prompt-input-stoppable.test.tsx

@@ -1,88 +0,0 @@
-/**
- * Unit tests for the stoppable Stop button affordance in DefaultPromptInput.
- *
- * Strategy: test DefaultPromptInput (the Solid component) directly — the
- * defineWebComponent custom element requires a full browser environment
- * (Constructable Stylesheets, shadow roots) unsuitable for jsdom.
- * This mirrors the pattern in prompt-suggestions.declarative.test.tsx.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup, fireEvent } from '@solidjs/testing-library';
-import { DefaultPromptInput } from './default-input';
-
-afterEach(cleanup);
-
-const noop = () => {};
-const baseProps = {
-  value: '',
-  onValueChange: noop,
-  onSubmit: noop,
-  onSuggestionClick: noop,
-};
-
-describe('DefaultPromptInput stoppable Stop button', () => {
-  it('renders the send button (not Stop) when loading=false stoppable=false', () => {
-    const { getByTestId, queryByTestId } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={false} stoppable={false} />
-    ));
-    expect(getByTestId('send')).toBeInTheDocument();
-    expect(queryByTestId('stop')).not.toBeInTheDocument();
-  });
-
-  it('renders the send button (not Stop) when stoppable=true but loading=false', () => {
-    const { getByTestId, queryByTestId } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={false} stoppable={true} />
-    ));
-    expect(getByTestId('send')).toBeInTheDocument();
-    expect(queryByTestId('stop')).not.toBeInTheDocument();
-  });
-
-  it('renders the send button (not Stop) when loading=true but stoppable=false', () => {
-    const { getByTestId, queryByTestId } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={true} stoppable={false} />
-    ));
-    expect(getByTestId('send')).toBeInTheDocument();
-    expect(queryByTestId('stop')).not.toBeInTheDocument();
-  });
-
-  it('renders the Stop button (not send) when both loading=true and stoppable=true', () => {
-    const { getByTestId, queryByTestId } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={true} stoppable={true} />
-    ));
-    expect(getByTestId('stop')).toBeInTheDocument();
-    expect(queryByTestId('send')).not.toBeInTheDocument();
-  });
-
-  it('Stop button has accessible label "Stop"', () => {
-    const { getByLabelText } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={true} stoppable={true} />
-    ));
-    expect(getByLabelText('Stop')).toBeInTheDocument();
-  });
-
-  it('clicking the Stop button calls onStop', () => {
-    const onStop = vi.fn();
-    const { getByTestId } = render(() => (
-      <DefaultPromptInput {...baseProps} loading={true} stoppable={true} onStop={onStop} />
-    ));
-    fireEvent.click(getByTestId('stop'));
-    expect(onStop).toHaveBeenCalledOnce();
-  });
-
-  it('clicking the Stop button does NOT call onSubmit', () => {
-    const onSubmit = vi.fn();
-    const onStop = vi.fn();
-    const { getByTestId } = render(() => (
-      <DefaultPromptInput
-        {...baseProps}
-        onSubmit={onSubmit}
-        loading={true}
-        stoppable={true}
-        onStop={onStop}
-      />
-    ));
-    fireEvent.click(getByTestId('stop'));
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-});

package/src/elements/prompt-input-toolbar-actions.test.tsx

@@ -1,120 +0,0 @@
-/**
- * Unit tests for custom `<kai-action>` toolbar buttons in DefaultPromptInput.
- *
- * Strategy: test DefaultPromptInput (the Solid component) directly — the
- * defineWebComponent custom element requires a full browser environment
- * (Constructable Stylesheets, shadow roots) unsuitable for jsdom.
- * This mirrors the pattern in prompt-input-stoppable.test.tsx.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup, fireEvent } from '@solidjs/testing-library';
-import { DefaultPromptInput } from './default-input';
-import type { CustomAction } from './chat-types';
-
-afterEach(cleanup);
-
-const noop = () => {};
-const baseProps = {
-  value: '',
-  onValueChange: noop,
-  onSubmit: noop,
-  onSuggestionClick: noop,
-};
-
-const ACTIONS: CustomAction[] = [
-  { id: 'attach', label: 'Attach', icon: 'paperclip', tooltip: 'Attach file' },
-  { id: 'bookmark', label: 'Bookmark', icon: 'bookmark', tooltip: 'Save for later' },
-];
-
-describe('DefaultPromptInput custom toolbar actions', () => {
-  it('renders no custom buttons when toolbarActions is empty', () => {
-    const { queryByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={[]} />
-    ));
-    // The send button is the only button when no custom actions are set.
-    // (paperclip attach is absent because onAttachmentsChange is not provided)
-    const buttons = queryByRole('button', { name: 'Attach' });
-    expect(buttons).not.toBeInTheDocument();
-  });
-
-  it('renders one ghost button per custom action', () => {
-    const { getAllByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={ACTIONS} />
-    ));
-    // aria-label is set to action.label on each button
-    const attachBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Attach',
-    );
-    const bookmarkBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Bookmark',
-    );
-    expect(attachBtn).toBeInTheDocument();
-    expect(bookmarkBtn).toBeInTheDocument();
-  });
-
-  it('sets data-action attribute to the action id', () => {
-    const { getAllByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={ACTIONS} />
-    ));
-    const attachBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Attach',
-    );
-    expect(attachBtn).toHaveAttribute('data-action', 'attach');
-  });
-
-  it('clicking a custom action button calls onAction with the action id', () => {
-    const onAction = vi.fn();
-    const { getAllByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={ACTIONS} onAction={onAction} />
-    ));
-    const attachBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Attach',
-    )!;
-    fireEvent.click(attachBtn);
-    expect(onAction).toHaveBeenCalledOnce();
-    expect(onAction).toHaveBeenCalledWith('attach');
-  });
-
-  it('clicking the second action button fires onAction with its id', () => {
-    const onAction = vi.fn();
-    const { getAllByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={ACTIONS} onAction={onAction} />
-    ));
-    const bookmarkBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Bookmark',
-    )!;
-    fireEvent.click(bookmarkBtn);
-    expect(onAction).toHaveBeenCalledWith('bookmark');
-  });
-
-  it('clicking a custom action does NOT call onSubmit', () => {
-    const onSubmit = vi.fn();
-    const onAction = vi.fn();
-    const { getAllByRole } = render(() => (
-      <DefaultPromptInput
-        {...baseProps}
-        onSubmit={onSubmit}
-        toolbarActions={ACTIONS}
-        onAction={onAction}
-      />
-    ));
-    const attachBtn = getAllByRole('button').find(
-      (b) => b.getAttribute('aria-label') === 'Attach',
-    )!;
-    fireEvent.click(attachBtn);
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('renders a label-only button when the icon name is unknown', () => {
-    const unknownIconAction: CustomAction[] = [
-      { id: 'mystery', label: 'Mystery', icon: 'not-a-real-icon' },
-    ];
-    const { getByRole } = render(() => (
-      <DefaultPromptInput {...baseProps} toolbarActions={unknownIconAction} />
-    ));
-    // aria-label is still set to the label
-    const btn = getByRole('button', { name: 'Mystery' });
-    expect(btn).toBeInTheDocument();
-  });
-});