@kitn.ai/ui 0.14.1

package/src/components/model-switcher.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup, fireEvent, screen } from '@solidjs/testing-library';
+import { ModelSwitcher } from './model-switcher';
+import type { ModelOption } from '../types';
+
+afterEach(cleanup);
+
+const MODELS: ModelOption[] = [
+  { id: 'gpt-5.5', name: 'GPT-5.5', description: 'Flagship model' },
+  { id: 'gpt-4o', name: 'GPT-4o', group: 'Legacy models' },
+  { id: 'gpt-4.1', name: 'GPT-4.1', group: 'Legacy models' },
+];
+
+// Dropdown content renders through a Portal (outside the render container), so
+// query via `screen` (document.body). The trigger button is the only button
+// before any group is expanded.
+const open = () => fireEvent.click(screen.getByRole('button'));
+
+describe('ModelSwitcher grouping & descriptions', () => {
+  it('renders a model description under the model name', () => {
+    render(() => <ModelSwitcher models={MODELS} currentModelId="gpt-5.5" onModelChange={() => {}} />);
+    open();
+    expect(screen.getByText('Flagship model')).toBeInTheDocument();
+  });
+
+  it('hides grouped models behind a collapsed group header until expanded', () => {
+    render(() => <ModelSwitcher models={MODELS} currentModelId="gpt-5.5" onModelChange={() => {}} />);
+    open();
+    expect(screen.getByText('Legacy models')).toBeInTheDocument();
+    expect(screen.queryByText('GPT-4o')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Legacy models'));
+    expect(screen.getByText('GPT-4o')).toBeInTheDocument();
+    expect(screen.getByText('GPT-4.1')).toBeInTheDocument();
+  });
+
+  it('selects an ungrouped model', () => {
+    const onModelChange = vi.fn();
+    render(() => <ModelSwitcher models={MODELS} currentModelId="gpt-4o" onModelChange={onModelChange} />);
+    open();
+    fireEvent.click(screen.getByText('Flagship model')); // the GPT-5.5 row (description is unique)
+    expect(onModelChange).toHaveBeenCalledWith('gpt-5.5');
+  });
+
+  it('selects a grouped model after expanding its group', () => {
+    const onModelChange = vi.fn();
+    render(() => <ModelSwitcher models={MODELS} currentModelId="gpt-5.5" onModelChange={onModelChange} />);
+    open();
+    fireEvent.click(screen.getByText('Legacy models'));
+    fireEvent.click(screen.getByText('GPT-4o'));
+    expect(onModelChange).toHaveBeenCalledWith('gpt-4o');
+  });
+
+  it('still renders provider when no description is given (back-compat)', () => {
+    render(() => (
+      <ModelSwitcher
+        models={[{ id: 'a', name: 'Model A', provider: 'Acme' }, { id: 'b', name: 'Model B' }]}
+        currentModelId="a"
+        onModelChange={() => {}}
+      />
+    ));
+    open();
+    expect(screen.getByText('Acme')).toBeInTheDocument();
+  });
+});

package/src/components/model-switcher.tsx

@@ -0,0 +1,87 @@
+import { splitProps, For, Show, createSignal } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../ui/dropdown';
+import { Button } from '../ui/button';
+import type { ModelOption } from '../types';
+
+export interface ModelSwitcherProps { models: ModelOption[]; currentModelId: string; onModelChange: (modelId: string) => void; class?: string; }
+
+const Chevron = (props: { class?: string }) => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class={props.class}>
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+function ModelRow(props: { model: ModelOption; currentModelId: string; onModelChange: (id: string) => void }) {
+  const subtitle = () => props.model.description ?? props.model.provider;
+  return (
+    <DropdownItem onSelect={() => props.onModelChange(props.model.id)}>
+      <div class="flex flex-col">
+        <span class={cn('text-body', props.model.id === props.currentModelId && 'font-medium text-foreground')}>{props.model.name}</span>
+        <Show when={subtitle()}><span class="text-caption text-muted-foreground">{subtitle()}</span></Show>
+      </div>
+    </DropdownItem>
+  );
+}
+
+export function ModelSwitcher(props: ModelSwitcherProps) {
+  const [local] = splitProps(props, ['models', 'currentModelId', 'onModelChange', 'class']);
+  const currentModel = () => local.models.find((m) => m.id === local.currentModelId);
+
+  // Ungrouped models list first; grouped models collect under their group name,
+  // preserving first-seen group order.
+  const ungrouped = () => local.models.filter((m) => !m.group);
+  const groups = () => {
+    const order: string[] = [];
+    const byGroup = new Map<string, ModelOption[]>();
+    for (const m of local.models) {
+      if (!m.group) continue;
+      if (!byGroup.has(m.group)) { byGroup.set(m.group, []); order.push(m.group); }
+      byGroup.get(m.group)!.push(m);
+    }
+    return order.map((name) => ({ name, models: byGroup.get(name)! }));
+  };
+
+  return (
+    <Show when={local.models.length > 1}>
+      <Dropdown>
+        <DropdownTrigger as={(triggerProps: any) => (
+          <Button variant="ghost" size="sm" class={cn('gap-1 text-meta text-muted-foreground', local.class)} {...triggerProps}>
+            {currentModel()?.name ?? local.currentModelId}
+            <Chevron />
+          </Button>
+        )} />
+        <DropdownContent>
+          <For each={ungrouped()}>
+            {(model) => <ModelRow model={model} currentModelId={local.currentModelId} onModelChange={local.onModelChange} />}
+          </For>
+          <For each={groups()}>
+            {(group) => {
+              const [open, setOpen] = createSignal(false);
+              return (
+                <div>
+                  <button
+                    type="button"
+                    aria-expanded={open()}
+                    onClick={() => setOpen(!open())}
+                    class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-body outline-none transition-colors hover:bg-muted focus:bg-muted"
+                  >
+                    {group.name}
+                    <Chevron class={cn('transition-transform', open() && 'rotate-180')} />
+                  </button>
+                  <Show when={open()}>
+                    <div class="pl-2">
+                      <For each={group.models}>
+                        {(model) => <ModelRow model={model} currentModelId={local.currentModelId} onModelChange={local.onModelChange} />}
+                      </For>
+                    </div>
+                  </Show>
+                </div>
+              );
+            }}
+          </For>
+        </DropdownContent>
+      </Dropdown>
+    </Show>
+  );
+}

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

@@ -0,0 +1,222 @@
+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-input.tsx

@@ -0,0 +1,211 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, on } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig, textClass } from '../primitives/chat-config';
+
+// --- Context ---
+
+interface PromptInputContextType {
+  isLoading: boolean;
+  value: () => string;
+  setValue: (value: string) => void;
+  maxHeight: number | string;
+  onSubmit?: () => void;
+  disabled?: boolean;
+  textareaRef: HTMLTextAreaElement | undefined;
+  setTextareaRef: (el: HTMLTextAreaElement) => void;
+}
+
+const PromptInputContext = createContext<PromptInputContextType>();
+
+function usePromptInput() {
+  const ctx = useContext(PromptInputContext);
+  if (!ctx) throw new Error('PromptInput subcomponents must be used within PromptInput');
+  return ctx;
+}
+
+// --- PromptInput (Root) ---
+
+export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  isLoading?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  maxHeight?: number | string;
+  onSubmit?: () => void;
+  children: JSX.Element;
+  disabled?: boolean;
+}
+
+function PromptInput(props: PromptInputProps) {
+  const [local, rest] = splitProps(props, [
+    'isLoading', 'value', 'onValueChange', 'maxHeight', 'onSubmit',
+    'children', 'disabled', 'class', 'onClick',
+  ]);
+
+  const [internalValue, setInternalValue] = createSignal(local.value ?? '');
+  let textareaRef: HTMLTextAreaElement | undefined;
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue);
+    local.onValueChange?.(newValue);
+  };
+
+  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
+    if (!local.disabled) textareaRef?.focus();
+    if (typeof local.onClick === 'function') {
+      (local.onClick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+    }
+  };
+
+  return (
+    <PromptInputContext.Provider
+      value={{
+        isLoading: local.isLoading ?? false,
+        value: () => local.value ?? internalValue(),
+        setValue: local.onValueChange ?? handleChange,
+        maxHeight: local.maxHeight ?? 240,
+        onSubmit: local.onSubmit,
+        get disabled() { return local.disabled; },
+        get textareaRef() { return textareaRef; },
+        setTextareaRef: (el) => { textareaRef = el; },
+      }}
+    >
+      <div
+        onClick={handleClick}
+        class={cn(
+          // The inner textarea neutralizes its own ring (focus-visible:ring-0),
+          // so the FRAME owns the focus affordance: a blue ring whenever a
+          // control inside it is focused. Without this the composer had no
+          // visible keyboard-focus state.
+          'bg-muted/40 cursor-text rounded-xl p-2 shadow-xs',
+          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',
+          local.disabled && 'cursor-not-allowed opacity-60',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </PromptInputContext.Provider>
+  );
+}
+
+// --- PromptInputTextarea ---
+
+export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  disableAutosize?: boolean;
+}
+
+function PromptInputTextarea(props: PromptInputTextareaProps) {
+  const [local, rest] = splitProps(props, ['class', 'onKeyDown', 'disableAutosize']);
+  const ctx = usePromptInput();
+  const config = useChatConfig();
+
+  function adjustHeight(el: HTMLTextAreaElement | undefined) {
+    if (!el || local.disableAutosize) return;
+    el.style.height = 'auto';
+    const maxH = ctx.maxHeight;
+    if (typeof maxH === 'number') {
+      el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    } else {
+      el.style.height = `min(${el.scrollHeight}px, ${maxH})`;
+    }
+  }
+
+  function handleRef(el: HTMLTextAreaElement) {
+    ctx.setTextareaRef(el);
+    adjustHeight(el);
+  }
+
+  createEffect(on(
+    () => [ctx.value(), ctx.maxHeight, local.disableAutosize],
+    () => {
+      if (ctx.textareaRef && !local.disableAutosize) {
+        adjustHeight(ctx.textareaRef);
+      }
+    }
+  ));
+
+  function handleInput(e: InputEvent & { currentTarget: HTMLTextAreaElement }) {
+    const el = e.currentTarget;
+    let value = el.value;
+    // Disallow leading whitespace — a prompt can't start with a space or blank
+    // line. Strip it (covers typing a space at the start AND pasting) and keep
+    // the caret in the right place.
+    if (/^\s/.test(value)) {
+      const stripped = value.replace(/^\s+/, '');
+      const removed = value.length - stripped.length;
+      const caret = Math.max(0, (el.selectionStart ?? 0) - removed);
+      el.value = stripped;
+      el.setSelectionRange(caret, caret);
+      value = stripped;
+    }
+    adjustHeight(el);
+    ctx.setValue(value);
+  }
+
+  function handleKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      // A disabled composer is non-interactive: Enter must not submit.
+      if (!ctx.disabled) ctx.onSubmit?.();
+    }
+    if (typeof local.onKeyDown === 'function') {
+      (local.onKeyDown as (e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => void)(e);
+    }
+  }
+
+  return (
+    <textarea
+      ref={handleRef}
+      value={ctx.value()}
+      onInput={handleInput}
+      onKeyDown={handleKeyDown}
+      class={cn(
+        // Typed text uses the normal foreground (light/dark), NOT the brand/accent
+        // color — the composer should read as plain text, not tinted.
+        'text-foreground min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+        textClass(config.proseSize()),
+        local.class
+      )}
+      rows={1}
+      disabled={ctx.disabled}
+      {...rest}
+    />
+  );
+}
+
+// --- PromptInputActions ---
+
+export interface PromptInputActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function PromptInputActions(props: PromptInputActionsProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div class={cn('flex items-center gap-2', local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}
+
+// --- PromptInputAction ---
+
+export interface PromptInputActionProps {
+  tooltip?: string;
+  children: JSX.Element;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  class?: string;
+}
+
+function PromptInputAction(props: PromptInputActionProps) {
+  return <>{props.children}</>;
+}
+
+export {
+  PromptInput,
+  PromptInputTextarea,
+  PromptInputActions,
+  PromptInputAction,
+  usePromptInput,
+};