@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/prompt-input.stories.tsx

@@ -1,222 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { createSignal } from 'solid-js';
-import { PromptInput, PromptInputTextarea, PromptInputActions } from './prompt-input';
-import { Button } from '../ui/button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/PromptInput',
-  component: PromptInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A composer shell that hosts an auto-resizing `PromptInputTextarea` and a `PromptInputActions` toolbar, with controlled or uncontrolled value, loading, and disabled states.',
-        '**When to use:** as the message input at the bottom of any chat surface, wherever the user types and submits a prompt.',
-        '**How to use:** control text via `value` + `onValueChange` (or leave uncontrolled), wire `onSubmit` (also fired on Enter without Shift), and place your send/stop controls inside `PromptInputActions`. Toggle `isLoading` / `disabled` for in-flight and read-only states.',
-        '**Placement:** pinned at the bottom of the chat column, below the message transcript.',
-      ]),
-    },
-  },
-  argTypes: {
-    value: {
-      control: 'text',
-      description: 'Controlled text value of the textarea.',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Marks a response as in-flight (e.g. to show a Stop action).',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the textarea and dims the composer.',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    maxHeight: {
-      control: 'number',
-      description: 'Max auto-resize height in px (or a CSS length string) before the textarea scrolls.',
-      table: { defaultValue: { summary: '240' } },
-    },
-    onValueChange: {
-      action: 'valueChange',
-      description: 'Fired with the new text whenever the textarea value changes.',
-      table: { category: 'Events' },
-    },
-    onSubmit: {
-      action: 'submit',
-      description: 'Fired on Enter (without Shift), and wherever you call it from an action.',
-      table: { category: 'Events' },
-    },
-    children: {
-      control: false,
-      description: 'Composer contents — usually a textarea plus an actions row.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes for the composer shell.',
-    },
-  },
-  args: {
-    value: '',
-    isLoading: false,
-    disabled: false,
-    maxHeight: 240,
-    onValueChange: fn(),
-    onSubmit: fn(),
-  },
-  render: (args) => (
-    <div class="max-w-xl">
-      <PromptInput {...args}>
-        <PromptInputTextarea placeholder="Ask anything..." />
-        <PromptInputActions>
-          <Button variant="default" size="sm">Send</Button>
-        </PromptInputActions>
-      </PromptInput>
-    </div>
-  ),
-} satisfies Meta<typeof PromptInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { PromptInput, PromptInputTextarea, PromptInputActions, Button } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — toggle loading/disabled and edit the value via controls. */
-export const Playground: Story = {
-  ...src(`<PromptInput value={value()} onValueChange={setValue} onSubmit={send}>
-  <PromptInputTextarea placeholder="Ask anything..." />
-  <PromptInputActions>
-    <Button variant="default" size="sm">Send</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};
-
-/** Empty composer with a Send button disabled until there is text. */
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = createSignal('');
-    return (
-      <div class="max-w-xl">
-        <PromptInput value={value()} onValueChange={setValue}>
-          <PromptInputTextarea placeholder="Ask anything..." />
-          <PromptInputActions>
-            <Button variant="default" size="sm" disabled={!value()}>
-              Send
-            </Button>
-          </PromptInputActions>
-        </PromptInput>
-      </div>
-    );
-  },
-  ...src(`<PromptInput value={value()} onValueChange={setValue}>
-  <PromptInputTextarea placeholder="Ask anything..." />
-  <PromptInputActions>
-    <Button variant="default" size="sm" disabled={!value()}>Send</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};
-
-/** Pre-filled with a prompt. */
-export const WithContent: Story = {
-  render: () => {
-    const [value, setValue] = createSignal('Tell me about SolidJS reactive primitives');
-    return (
-      <div class="max-w-xl">
-        <PromptInput value={value()} onValueChange={setValue}>
-          <PromptInputTextarea placeholder="Ask anything..." />
-          <PromptInputActions>
-            <Button variant="default" size="sm">Send</Button>
-          </PromptInputActions>
-        </PromptInput>
-      </div>
-    );
-  },
-  ...src(`<PromptInput value={value()} onValueChange={setValue}>
-  <PromptInputTextarea placeholder="Ask anything..." />
-  <PromptInputActions>
-    <Button variant="default" size="sm">Send</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};
-
-/** Read-only composer — `disabled` dims it and blocks input. */
-export const Disabled: Story = {
-  render: () => (
-    <div class="max-w-xl">
-      <PromptInput disabled value="" onValueChange={() => {}}>
-        <PromptInputTextarea placeholder="Chat is disabled..." />
-        <PromptInputActions>
-          <Button variant="default" size="sm" disabled>Send</Button>
-        </PromptInputActions>
-      </PromptInput>
-    </div>
-  ),
-  ...src(`<PromptInput disabled value="" onValueChange={setValue}>
-  <PromptInputTextarea placeholder="Chat is disabled..." />
-  <PromptInputActions>
-    <Button variant="default" size="sm" disabled>Send</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};
-
-/** In-flight — `isLoading` typically pairs with a Stop action. */
-export const Loading: Story = {
-  render: () => (
-    <div class="max-w-xl">
-      <PromptInput isLoading value="" onValueChange={() => {}}>
-        <PromptInputTextarea placeholder="Generating response..." />
-        <PromptInputActions>
-          <Button variant="outline" size="sm">
-            Stop
-          </Button>
-        </PromptInputActions>
-      </PromptInput>
-    </div>
-  ),
-  ...src(`<PromptInput isLoading value={value()} onValueChange={setValue}>
-  <PromptInputTextarea placeholder="Generating response..." />
-  <PromptInputActions>
-    <Button variant="outline" size="sm">Stop</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};
-
-/** A split actions row — a leading icon control and a trailing Send (showcase). */
-export const WithMultipleActions: Story = {
-  render: () => {
-    const [value, setValue] = createSignal('');
-    return (
-      <div class="max-w-xl">
-        <PromptInput value={value()} onValueChange={setValue}>
-          <PromptInputTextarea placeholder="Ask anything..." />
-          <PromptInputActions class="justify-between w-full px-2 pb-1">
-            <div class="flex items-center gap-1">
-              <Button variant="ghost" size="icon-sm" aria-label="Attach file">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
-                </svg>
-              </Button>
-            </div>
-            <Button variant="default" size="sm" disabled={!value()}>
-              Send
-            </Button>
-          </PromptInputActions>
-        </PromptInput>
-      </div>
-    );
-  },
-  ...src(`<PromptInput value={value()} onValueChange={setValue}>
-  <PromptInputTextarea placeholder="Ask anything..." />
-  <PromptInputActions class="justify-between w-full px-2 pb-1">
-    <Button variant="ghost" size="icon-sm"><AttachIcon /></Button>
-    <Button variant="default" size="sm" disabled={!value()}>Send</Button>
-  </PromptInputActions>
-</PromptInput>`),
-};

package/src/components/prompt-suggestion.stories.tsx

@@ -1,142 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { PromptSuggestion } from './prompt-suggestion';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/PromptSuggestion',
-  component: PromptSuggestion,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A clickable suggestion chip built on `Button` — renders as a rounded pill, a full-width list row (`block`), or a search-style row that highlights a matching substring (`highlight`).',
-        '**When to use:** offer the user ready-made prompts to send — empty-state starter questions, follow-up suggestions, or a filtered list of matching prompts as they type.',
-        '**How to use:** pass the prompt text as children and wire `onClick` to submit it. Use `block` for stacked, left-aligned list rows; pass `highlight` to emphasize a matched substring (forces list-row layout). Override `variant`/`size` to restyle.',
-        '**Placement:** chat empty states, below the prompt input as follow-ups, or in a suggestion dropdown.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Suggestion content — the prompt text (or an element).',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'ghost', 'outline'],
-      description: 'Button visual emphasis. Defaults vary by mode (`outline` pill, `ghost` highlight).',
-      table: { defaultValue: { summary: 'outline' } },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
-      description: 'Button size preset. Defaults vary by mode.',
-      table: { defaultValue: { summary: 'lg' } },
-    },
-    highlight: {
-      control: 'text',
-      description: 'Substring to emphasize within the text. When set, renders as a list row with the match highlighted.',
-    },
-    block: {
-      control: 'boolean',
-      description: 'Render as a full-width, left-aligned list row that wraps long text instead of a pill. Ignored in highlight mode.',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    onClick: {
-      action: 'click',
-      description: 'Fired when the suggestion is clicked.',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    children: 'Tell me about TypeScript',
-    variant: 'outline',
-    block: false,
-    onClick: fn(),
-  },
-  render: (args) => <PromptSuggestion {...args} />,
-} satisfies Meta<typeof PromptSuggestion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { PromptSuggestion } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — tweak the controls to explore every mode. */
-export const Playground: Story = {
-  ...src(`<PromptSuggestion onClick={() => send('Tell me about TypeScript')}>
-  Tell me about TypeScript
-</PromptSuggestion>`),
-};
-
-export const WithHighlight: Story = {
-  args: { highlight: 'TypeScript', children: 'Tell me about TypeScript generics' },
-  ...src(`<PromptSuggestion highlight="TypeScript">
-  Tell me about TypeScript generics
-</PromptSuggestion>`),
-};
-
-export const Block: Story = {
-  name: 'Block (list idiom)',
-  args: { block: true, children: 'What does being a Catalyst mean for how I work with others?' },
-  ...src(`<PromptSuggestion block>
-  What does being a Catalyst mean for how I work with others?
-</PromptSuggestion>`),
-};
-
-/** A row of pill suggestions (showcase — not driven by controls). */
-export const MultipleSuggestions: Story = {
-  render: () => (
-    <div class="flex flex-wrap gap-2">
-      <PromptSuggestion>What is SolidJS?</PromptSuggestion>
-      <PromptSuggestion>Explain reactive signals</PromptSuggestion>
-      <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
-      <PromptSuggestion>Best practices for state management</PromptSuggestion>
-    </div>
-  ),
-  ...src(`<div class="flex flex-wrap gap-2">
-  <PromptSuggestion>What is SolidJS?</PromptSuggestion>
-  <PromptSuggestion>Explain reactive signals</PromptSuggestion>
-  <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
-  <PromptSuggestion>Best practices for state management</PromptSuggestion>
-</div>`),
-};
-
-/** Filtered list with a highlighted match (showcase). */
-export const WithHighlightedSearch: Story = {
-  render: () => (
-    <div class="w-72 space-y-1">
-      <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
-      <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
-      <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
-    </div>
-  ),
-  ...src(`<div class="w-72 space-y-1">
-  <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
-  <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
-  <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
-</div>`),
-};
-
-/** Stacked, full-width list rows (showcase). */
-export const BlockList: Story = {
-  name: 'Block list',
-  render: () => (
-    <div class="w-72 flex flex-col gap-1">
-      <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
-      <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
-      <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
-    </div>
-  ),
-  ...src(`<div class="w-72 flex flex-col gap-1">
-  <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
-  <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
-  <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
-</div>`),
-};

package/src/components/reasoning.stories.tsx

@@ -1,140 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { createSignal } from 'solid-js';
-import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Reasoning',
-  component: Reasoning,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A collapsible disclosure for a model\'s thinking/reasoning. Compose `Reasoning` (root) with `ReasoningTrigger` (the toggle) and `ReasoningContent` (the body, with optional markdown).',
-        '**When to use:** to surface an assistant\'s chain-of-thought or scratch reasoning that should be available but collapsed by default. It can auto-open while streaming and auto-close when streaming ends.',
-        '**How to use:** wrap a trigger and content in `Reasoning`. Leave it uncontrolled, or drive it with `open` + `onOpenChange`. Set `isStreaming` to auto-open during generation. Pass `markdown` on `ReasoningContent` to render a markdown string.',
-        '**Placement:** inside or above an assistant message, before the final answer.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Controlled open state. Omit for uncontrolled behavior.',
-    },
-    isStreaming: {
-      control: 'boolean',
-      description: 'When true, auto-opens the disclosure; auto-closes when it returns to false.',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    onOpenChange: {
-      action: 'openChange',
-      description: 'Fired with the next open state when the trigger is toggled.',
-      table: { category: 'Events' },
-    },
-    children: { control: false, description: 'Trigger and content composition.' },
-  },
-  args: {
-    isStreaming: false,
-    onOpenChange: fn(),
-  },
-  render: (args) => (
-    <Reasoning {...args}>
-      <ReasoningTrigger>View reasoning</ReasoningTrigger>
-      <ReasoningContent>
-        <p>The user is asking about reactive programming. Let me break down the key concepts of signals, effects, and memos in SolidJS.</p>
-      </ReasoningContent>
-    </Reasoning>
-  ),
-} satisfies Meta<typeof Reasoning>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Reasoning, ReasoningTrigger, ReasoningContent } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — toggle `open` / `isStreaming` via the controls. */
-export const Playground: Story = {
-  ...src(`<Reasoning>
-  <ReasoningTrigger>View reasoning</ReasoningTrigger>
-  <ReasoningContent>
-    <p>Let me break down signals, effects, and memos in SolidJS.</p>
-  </ReasoningContent>
-</Reasoning>`),
-};
-
-/** Content rendered from a markdown string. */
-export const WithMarkdown: Story = {
-  render: (args: Parameters<NonNullable<Story['render']>>[0]) => (
-    <Reasoning {...args}>
-      <ReasoningTrigger>View reasoning</ReasoningTrigger>
-      <ReasoningContent markdown>
-        {'The user wants to understand **reactive primitives**.\n\n- `createSignal` for state\n- `createEffect` for side effects\n- `createMemo` for derived values'}
-      </ReasoningContent>
-    </Reasoning>
-  ),
-  ...src(`<Reasoning>
-  <ReasoningTrigger>View reasoning</ReasoningTrigger>
-  <ReasoningContent markdown>
-    {'The user wants **reactive primitives**.\\n\\n- \`createSignal\`\\n- \`createEffect\`\\n- \`createMemo\`'}
-  </ReasoningContent>
-</Reasoning>`),
-};
-
-/** Controlled via `open` + `onOpenChange`, starting open (showcase). */
-export const Controlled: Story = {
-  render: () => {
-    const [open, setOpen] = createSignal(true);
-    return (
-      <Reasoning open={open()} onOpenChange={setOpen}>
-        <ReasoningTrigger>Thinking process</ReasoningTrigger>
-        <ReasoningContent>
-          <p>This is a controlled reasoning component that starts open.</p>
-        </ReasoningContent>
-      </Reasoning>
-    );
-  },
-  ...src(`const [open, setOpen] = createSignal(true);
-
-<Reasoning open={open()} onOpenChange={setOpen}>
-  <ReasoningTrigger>Thinking process</ReasoningTrigger>
-  <ReasoningContent>
-    <p>This is a controlled reasoning component that starts open.</p>
-  </ReasoningContent>
-</Reasoning>`),
-};
-
-/** Auto-opens while streaming, auto-closes when it ends (showcase). */
-export const Streaming: Story = {
-  render: () => {
-    const [streaming, setStreaming] = createSignal(true);
-    return (
-      <div class="space-y-4">
-        <button
-          class="rounded bg-primary px-3 py-1 text-sm text-primary-foreground"
-          onClick={() => setStreaming((s) => !s)}
-        >
-          {streaming() ? 'Stop streaming' : 'Start streaming'}
-        </button>
-        <Reasoning isStreaming={streaming()}>
-          <ReasoningTrigger>Thinking...</ReasoningTrigger>
-          <ReasoningContent>
-            <p>Auto-opens during streaming and auto-closes when streaming ends.</p>
-          </ReasoningContent>
-        </Reasoning>
-      </div>
-    );
-  },
-  ...src(`<Reasoning isStreaming={streaming()}>
-  <ReasoningTrigger>Thinking...</ReasoningTrigger>
-  <ReasoningContent>
-    <p>Auto-opens during streaming and auto-closes when streaming ends.</p>
-  </ReasoningContent>
-</Reasoning>`),
-};