@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/message.stories.tsx

@@ -1,281 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Message, MessageAvatar, MessageContent, MessageActions } from './message';
-import { Button } from '../ui/button';
-import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Message',
-  component: Message,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A horizontal message row that composes an optional `MessageAvatar`, a `MessageContent` body (plain or markdown), and an optional `MessageActions` toolbar.',
-        '**When to use:** rendering any chat turn — user or assistant. Use a bubble + right alignment for user turns, and an avatar + transparent content for assistant turns.',
-        '**How to use:** wrap the parts in `<Message>`. Add `MessageAvatar` for the speaker, `MessageContent` for the text (set `markdown` to render markdown), and `MessageActions` for hover actions. Layout (alignment, bubble) is controlled via `class`.',
-        '**Placement:** inside a `ChatContainer`/scroll region, stacked vertically as the conversation transcript.',
-      ]),
-    },
-  },
-  argTypes: {
-    children: {
-      control: false,
-      description: 'The composed message parts (avatar, content, actions).',
-    },
-    class: {
-      control: 'text',
-      description: 'Layout classes — e.g. `flex flex-col items-end` for right-aligned user turns.',
-    },
-  },
-  args: {
-    class: '',
-  },
-  render: (args) => (
-    <div class="max-w-2xl">
-      <Message {...args}>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <MessageContent>
-          I can help with a variety of tasks: answering questions, providing
-          information, assisting with coding, and generating creative content.
-          What would you like help with today?
-        </MessageContent>
-      </Message>
-    </div>
-  ),
-} satisfies Meta<typeof Message>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Message, MessageAvatar, MessageContent, MessageActions } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — an assistant turn; tweak `class` to change layout. */
-export const Playground: Story = {
-  ...src(`<Message>
-  <MessageAvatar src="" fallback="AI" alt="Assistant" />
-  <MessageContent>I can help with a variety of tasks...</MessageContent>
-</Message>`),
-};
-
-/** A user turn — right-aligned bubble, no avatar. */
-export const UserMessage: Story = {
-  render: () => (
-    <div class="max-w-2xl">
-      <Message class="flex flex-col items-end">
-        <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
-          Hello! How can I help you today?
-        </MessageContent>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message class="flex flex-col items-end">
-  <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
-    Hello! How can I help you today?
-  </MessageContent>
-</Message>`),
-};
-
-/** An assistant turn — avatar plus a secondary-background content block. */
-export const AssistantMessage: Story = {
-  render: () => (
-    <div class="max-w-2xl">
-      <Message>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <MessageContent>
-          I can help with a variety of tasks: answering questions, providing information,
-          assisting with coding, generating creative content. What would you like help with today?
-        </MessageContent>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message>
-  <MessageAvatar src="" fallback="AI" alt="Assistant" />
-  <MessageContent>I can help with a variety of tasks...</MessageContent>
-</Message>`),
-};
-
-/** Assistant turn with a transparent, flush content block (no bubble). */
-export const AssistantNoBg: Story = {
-  name: 'Assistant (No Background)',
-  render: () => (
-    <div class="max-w-2xl">
-      <Message>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <MessageContent class="bg-transparent p-0">
-          I can help with a variety of tasks: answering questions, providing information,
-          assisting with coding, generating creative content. What would you like help with today?
-        </MessageContent>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message>
-  <MessageAvatar src="" fallback="AI" alt="Assistant" />
-  <MessageContent class="bg-transparent p-0">...</MessageContent>
-</Message>`),
-};
-
-/** User bubble with hover-revealed edit/copy actions. */
-export const UserAlignedRight: Story = {
-  name: 'User (Right-Aligned)',
-  render: () => (
-    <div class="max-w-2xl">
-      <Message class="flex flex-col items-end">
-        <div class="group flex flex-col items-end gap-1">
-          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
-            Can you explain how SolidJS reactivity differs from React hooks?
-          </MessageContent>
-          <MessageActions class="flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Edit message">
-              <Pencil class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
-              <Copy class="size-3.5" />
-            </Button>
-          </MessageActions>
-        </div>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message class="flex flex-col items-end">
-  <div class="group flex flex-col items-end gap-1">
-    <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
-      Can you explain how SolidJS reactivity differs from React hooks?
-    </MessageContent>
-    <MessageActions class="opacity-0 group-hover:opacity-100">
-      <Button variant="ghost" size="icon-sm"><Pencil class="size-3.5" /></Button>
-      <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-    </MessageActions>
-  </div>
-</Message>`),
-};
-
-/** Markdown body — set `markdown` on `MessageContent` and pass a markdown string. */
-export const MarkdownMessage: Story = {
-  render: () => (
-    <div class="max-w-2xl">
-      <Message>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <MessageContent markdown class="bg-transparent p-0">
-          {`Here's a **bold** statement with some \`inline code\` and a list:
-
-- First item
-- Second item
-- Third item
-
-And a code block:
-
-\`\`\`typescript
-const greeting = "Hello, world!";
-console.log(greeting);
-\`\`\``}
-        </MessageContent>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message>
-  <MessageAvatar src="" fallback="AI" alt="Assistant" />
-  <MessageContent markdown class="bg-transparent p-0">
-    {markdownString}
-  </MessageContent>
-</Message>`),
-};
-
-/** Assistant turn with a hover action row (copy / feedback / regenerate). */
-export const WithActions: Story = {
-  render: () => (
-    <div class="max-w-2xl">
-      <Message>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <div class="group flex w-full flex-col gap-0">
-          <MessageContent class="bg-transparent p-0">
-            Here is a response with hover actions below it.
-          </MessageContent>
-          <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
-              <Copy class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
-              <ThumbsUp class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
-              <ThumbsDown class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
-              <RefreshCw class="size-3.5" />
-            </Button>
-          </MessageActions>
-        </div>
-      </Message>
-    </div>
-  ),
-  ...src(`<Message>
-  <MessageAvatar src="" fallback="AI" alt="Assistant" />
-  <div class="group flex w-full flex-col gap-0">
-    <MessageContent class="bg-transparent p-0">Here is a response...</MessageContent>
-    <MessageActions class="opacity-0 group-hover:opacity-100">
-      <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-      <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-      <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
-      <Button variant="ghost" size="icon-sm"><RefreshCw class="size-3.5" /></Button>
-    </MessageActions>
-  </div>
-</Message>`),
-};
-
-/** A user + assistant pair showing both layouts together (showcase). */
-export const Conversation: Story = {
-  render: () => (
-    <div class="max-w-2xl space-y-4">
-      <Message class="flex flex-col items-end">
-        <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
-          What is TypeScript?
-        </MessageContent>
-      </Message>
-
-      <Message>
-        <MessageAvatar src="" fallback="AI" alt="Assistant" />
-        <div class="group flex w-full flex-col gap-0">
-          <MessageContent markdown class="bg-transparent p-0">
-            {`**TypeScript** is a strongly typed programming language that builds on JavaScript. It adds optional static type checking and other features like interfaces, enums, and generics.
-
-Key benefits:
-- Catches errors at compile time
-- Better IDE support and autocompletion
-- Makes large codebases more maintainable`}
-          </MessageContent>
-          <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
-              <Copy class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
-              <ThumbsUp class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
-              <ThumbsDown class="size-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
-              <RefreshCw class="size-3.5" />
-            </Button>
-          </MessageActions>
-        </div>
-      </Message>
-    </div>
-  ),
-  ...src(`<div class="space-y-4">
-  <Message class="flex flex-col items-end">
-    <MessageContent class="bg-muted text-primary rounded-3xl px-5 py-2.5">
-      What is TypeScript?
-    </MessageContent>
-  </Message>
-  <Message>
-    <MessageAvatar src="" fallback="AI" alt="Assistant" />
-    <MessageContent markdown class="bg-transparent p-0">{answerMarkdown}</MessageContent>
-  </Message>
-</div>`),
-};

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

@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { ModelSwitcher } from './model-switcher';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const multipleModels = [
-  { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-  { id: 'claude-opus', name: 'Claude Opus', provider: 'Anthropic' },
-  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
-  { id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google' },
-];
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ModelSwitcher',
-  component: ModelSwitcher,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A compact dropdown that shows the active model and lets the user switch between the available **models** (grouped by optional `provider` label).',
-        '**When to use:** when a chat surface offers more than one model. It renders nothing when fewer than two models are provided, so it is safe to mount unconditionally.',
-        '**How to use:** pass the `models` list and the `currentModelId`, then handle `onModelChange` to update your selected-model state.',
-        '**Placement:** the prompt input action bar, a chat header, or a settings/toolbar row near the composer.',
-      ]),
-    },
-  },
-  argTypes: {
-    models: {
-      control: 'object',
-      description: 'Selectable models. Each has `id`, `name`, and an optional `provider` label.',
-    },
-    currentModelId: {
-      control: 'text',
-      description: 'The `id` of the currently selected model.',
-    },
-    onModelChange: {
-      action: 'modelChange',
-      description: 'Fired with the chosen model `id` when the user picks a model.',
-      table: { category: 'Events' },
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes applied to the trigger button.',
-    },
-  },
-  args: {
-    models: multipleModels,
-    currentModelId: 'claude-sonnet',
-    onModelChange: fn(),
-  },
-  render: (args) => <ModelSwitcher {...args} />,
-} satisfies Meta<typeof ModelSwitcher>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ModelSwitcher } 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 the switcher. */
-export const Playground: Story = {
-  ...src(`<ModelSwitcher
-  models={models}
-  currentModelId={modelId()}
-  onModelChange={setModelId}
-/>`),
-};
-
-/** Several models across providers — the dropdown lists them with provider labels. */
-export const MultipleModels: Story = {
-  args: { models: multipleModels, currentModelId: 'claude-sonnet' },
-  ...src(`<ModelSwitcher
-  models={[
-    { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-    { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
-  ]}
-  currentModelId={modelId()}
-  onModelChange={setModelId}
-/>`),
-};
-
-/**
- * Rich rows + a collapsible group. `description` renders as the row subtitle
- * (preferred over `provider`), and models sharing a `group` collect under a
- * collapsible section — the ChatGPT-style "Legacy models" pattern.
- */
-export const GroupedAndDescribed: Story = {
-  args: {
-    models: [
-      { id: 'gpt-5.5', name: 'GPT-5.5', description: 'Flagship model' },
-      { id: 'gpt-5.5-mini', name: 'GPT-5.5 mini', description: 'Faster, lighter' },
-      { id: 'gpt-4o', name: 'GPT-4o', group: 'Legacy models' },
-      { id: 'gpt-4.1', name: 'GPT-4.1', group: 'Legacy models' },
-    ],
-    currentModelId: 'gpt-5.5',
-  },
-  ...src(`<ModelSwitcher
-  models={[
-    { 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' },
-  ]}
-  currentModelId={modelId()}
-  onModelChange={setModelId}
-/>`),
-};
-
-/** A single model — the switcher renders nothing (needs 2+ models). */
-export const SingleModel: Story = {
-  args: {
-    models: [{ id: 'claude-sonnet', name: 'Claude Sonnet' }],
-    currentModelId: 'claude-sonnet',
-  },
-  ...src(`<ModelSwitcher
-  models={[{ id: 'claude-sonnet', name: 'Claude Sonnet' }]}
-  currentModelId="claude-sonnet"
-  onModelChange={setModelId}
-/>`),
-};

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

@@ -1,65 +0,0 @@
-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();
-  });
-});