@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/chain-of-thought.stories.tsx

@@ -1,211 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import {
-  ChainOfThought,
-  ChainOfThoughtStep,
-  ChainOfThoughtTrigger,
-  ChainOfThoughtContent,
-  ChainOfThoughtItem,
-} from './chain-of-thought';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ChainOfThought',
-  component: ChainOfThought,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A vertical, collapsible timeline that reveals an agent\'s reasoning as a series of connected steps. Composed of `ChainOfThought` (root) wrapping `ChainOfThoughtStep` items, each with a `ChainOfThoughtTrigger`, `ChainOfThoughtContent`, and one or more `ChainOfThoughtItem`s.',
-        '**When to use:** to surface multi-step reasoning, tool calls, or research progress behind an assistant response, letting users expand each step on demand.',
-        '**How to use:** map each reasoning step to a `ChainOfThoughtStep` (mark the final one with `isLast`); put the summary in `ChainOfThoughtTrigger` and the detail inside `ChainOfThoughtContent` / `ChainOfThoughtItem`.',
-        '**Placement:** above or within an assistant message, typically before the final answer.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    children: {
-      control: false,
-      description: 'The `ChainOfThoughtStep` items that make up the timeline.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes for the root wrapper.',
-    },
-  },
-  args: {},
-  render: (args) => (
-    <ChainOfThought {...args}>
-      <ChainOfThoughtStep>
-        <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            The user is asking about reactive programming concepts in SolidJS.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-      <ChainOfThoughtStep isLast>
-        <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            Combining insights from documentation and examples into a clear answer.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-    </ChainOfThought>
-  ),
-} satisfies Meta<typeof ChainOfThought>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import {
-  ChainOfThought, ChainOfThoughtStep, ChainOfThoughtTrigger,
-  ChainOfThoughtContent, ChainOfThoughtItem,
-} from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — expand the steps to reveal each reasoning item. */
-export const Playground: Story = {
-  ...src(`<ChainOfThought>
-  <ChainOfThoughtStep>
-    <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>The user is asking about SolidJS reactivity.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-  <ChainOfThoughtStep isLast>
-    <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>Combining insights into a clear answer.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-</ChainOfThought>`),
-};
-
-export const SingleStep: Story = {
-  render: () => (
-    <ChainOfThought>
-      <ChainOfThoughtStep isLast>
-        <ChainOfThoughtTrigger>Analyzing the question</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            Breaking down the user's query into key concepts and identifying relevant knowledge areas.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-    </ChainOfThought>
-  ),
-  ...src(`<ChainOfThought>
-  <ChainOfThoughtStep isLast>
-    <ChainOfThoughtTrigger>Analyzing the question</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>Breaking down the query into key concepts.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-</ChainOfThought>`),
-};
-
-export const MultipleSteps: Story = {
-  render: () => (
-    <ChainOfThought>
-      <ChainOfThoughtStep>
-        <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            The user is asking about reactive programming concepts in SolidJS.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-      <ChainOfThoughtStep>
-        <ChainOfThoughtTrigger>Searching knowledge base</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            Found 3 relevant documents about SolidJS signals and reactivity.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-      <ChainOfThoughtStep isLast>
-        <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>
-            Combining insights from documentation and examples to create a comprehensive answer.
-          </ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-    </ChainOfThought>
-  ),
-  ...src(`<ChainOfThought>
-  <ChainOfThoughtStep>
-    <ChainOfThoughtTrigger>Understanding the question</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>The user is asking about SolidJS reactivity.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-  <ChainOfThoughtStep>
-    <ChainOfThoughtTrigger>Searching knowledge base</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>Found 3 relevant documents.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-  <ChainOfThoughtStep isLast>
-    <ChainOfThoughtTrigger>Formulating response</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>Combining insights into a clear answer.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-</ChainOfThought>`),
-};
-
-export const WithCustomIcons: Story = {
-  render: () => (
-    <ChainOfThought>
-      <ChainOfThoughtStep>
-        <ChainOfThoughtTrigger
-          leftIcon={
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
-          }
-        >
-          Searching documents
-        </ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>Found 5 relevant results.</ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-      <ChainOfThoughtStep isLast>
-        <ChainOfThoughtTrigger
-          leftIcon={
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
-          }
-        >
-          Analysis complete
-        </ChainOfThoughtTrigger>
-        <ChainOfThoughtContent>
-          <ChainOfThoughtItem>All sources have been analyzed and synthesized.</ChainOfThoughtItem>
-        </ChainOfThoughtContent>
-      </ChainOfThoughtStep>
-    </ChainOfThought>
-  ),
-  ...src(`<ChainOfThought>
-  <ChainOfThoughtStep>
-    <ChainOfThoughtTrigger leftIcon={<SearchIcon />}>Searching documents</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>Found 5 relevant results.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-  <ChainOfThoughtStep isLast>
-    <ChainOfThoughtTrigger leftIcon={<CheckIcon />}>Analysis complete</ChainOfThoughtTrigger>
-    <ChainOfThoughtContent>
-      <ChainOfThoughtItem>All sources analyzed and synthesized.</ChainOfThoughtItem>
-    </ChainOfThoughtContent>
-  </ChainOfThoughtStep>
-</ChainOfThought>`),
-};

package/src/components/chat-container.stories.tsx

@@ -1,187 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { For } from 'solid-js';
-import { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
-import { Message, MessageAvatar, MessageContent } from './message';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const sampleMessages = [
-  { role: 'user', content: 'What is SolidJS?' },
-  { role: 'assistant', content: '**SolidJS** is a declarative, efficient, and flexible JavaScript library for building user interfaces. Unlike React, it uses fine-grained reactivity with no Virtual DOM, resulting in excellent performance.' },
-  { role: 'user', content: 'How does reactivity work in SolidJS?' },
-  { role: 'assistant', content: `SolidJS uses **signals** as its core reactive primitive. Here's how it works:
-
-1. **Signals** -- Store reactive values that track their dependencies
-2. **Effects** -- Side effects that re-run when their signal dependencies change
-3. **Memos** -- Derived values that cache their results
-
-Unlike React's useState, SolidJS signals are getter/setter pairs that update only the specific DOM nodes that depend on them.` },
-  { role: 'user', content: 'Can you show me an example?' },
-  { role: 'assistant', content: `Here's a simple counter example:
-
-\`\`\`typescript
-import { createSignal } from 'solid-js';
-
-function Counter() {
-  const [count, setCount] = createSignal(0);
-  return (
-    <button onClick={() => setCount(c => c + 1)}>
-      Count: {count()}
-    </button>
-  );
-}
-\`\`\`
-
-Notice that \`count\` is called as a function -- this is how SolidJS tracks which parts of the UI depend on which signals.` },
-];
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ChatContainer',
-  component: ChatContainerRoot,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A scrollable message viewport that automatically sticks to the bottom as new content streams in. Composed of `ChatContainerRoot` (the scroll region), `ChatContainerContent` (the message stack), and `ChatContainerScrollAnchor` (the stick-to-bottom target).',
-        '**When to use:** as the conversation transcript region of a chat UI, where messages append over time and the view should follow the latest output unless the user scrolls up.',
-        '**How to use:** wrap your message list in `ChatContainerRoot`, place messages inside `ChatContainerContent`, and end with `ChatContainerScrollAnchor`. Give the root a fixed height so it can scroll.',
-        '**Placement:** the central pane of a chat layout, between the header and the prompt input.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    children: {
-      control: false,
-      description: 'The container content — typically `ChatContainerContent` with messages.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes for the scroll region (set a height so it can scroll).',
-    },
-  },
-  args: {
-    class: 'h-full flex-col p-4',
-  },
-  render: (args) => (
-    <div class="h-[500px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
-      <ChatContainerRoot {...args}>
-        <ChatContainerContent class="space-y-4">
-          <For each={sampleMessages}>
-            {(msg) => (
-              <Message>
-                <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-                <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
-              </Message>
-            )}
-          </For>
-          <ChatContainerScrollAnchor />
-        </ChatContainerContent>
-      </ChatContainerRoot>
-    </div>
-  ),
-} satisfies Meta<typeof ChatContainerRoot>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import {
-  ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor,
-  Message, MessageAvatar, MessageContent,
-} from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — a full transcript inside the stick-to-bottom container. */
-export const Playground: Story = {
-  ...src(`<div class="h-[500px]">
-  <ChatContainerRoot class="h-full flex-col p-4">
-    <ChatContainerContent class="space-y-4">
-      <For each={messages}>
-        {(msg) => (
-          <Message>
-            <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-            <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
-          </Message>
-        )}
-      </For>
-      <ChatContainerScrollAnchor />
-    </ChatContainerContent>
-  </ChatContainerRoot>
-</div>`),
-};
-
-export const FullChat: Story = {
-  render: () => (
-    <div class="h-[500px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
-      <ChatContainerRoot class="h-full flex-col p-4">
-        <ChatContainerContent class="space-y-4">
-          <For each={sampleMessages}>
-            {(msg) => (
-              <Message>
-                <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-                <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
-              </Message>
-            )}
-          </For>
-          <ChatContainerScrollAnchor />
-        </ChatContainerContent>
-      </ChatContainerRoot>
-    </div>
-  ),
-  ...src(`<ChatContainerRoot class="h-full flex-col p-4">
-  <ChatContainerContent class="space-y-4">
-    <For each={messages}>
-      {(msg) => (
-        <Message>
-          <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-          <MessageContent markdown={msg.role === 'assistant'}>{msg.content}</MessageContent>
-        </Message>
-      )}
-    </For>
-    <ChatContainerScrollAnchor />
-  </ChatContainerContent>
-</ChatContainerRoot>`),
-};
-
-export const LongConversation: Story = {
-  render: () => {
-    const manyMessages = Array.from({ length: 20 }, (_, i) => ({
-      role: i % 2 === 0 ? 'user' : 'assistant',
-      content: i % 2 === 0
-        ? `This is user message number ${Math.floor(i / 2) + 1}. It asks a question about the topic.`
-        : `This is the assistant's response to message ${Math.floor(i / 2) + 1}. It provides a detailed explanation with relevant examples and context.`,
-    }));
-    return (
-      <div class="h-[400px] w-full max-w-2xl border border-border rounded-lg overflow-hidden">
-        <ChatContainerRoot class="h-full flex-col p-4">
-          <ChatContainerContent class="space-y-4">
-            <For each={manyMessages}>
-              {(msg) => (
-                <Message>
-                  <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-                  <MessageContent>{msg.content}</MessageContent>
-                </Message>
-              )}
-            </For>
-            <ChatContainerScrollAnchor />
-          </ChatContainerContent>
-        </ChatContainerRoot>
-      </div>
-    );
-  },
-  ...src(`<ChatContainerRoot class="h-full flex-col p-4">
-  <ChatContainerContent class="space-y-4">
-    <For each={manyMessages}>
-      {(msg) => (
-        <Message>
-          <MessageAvatar src="" fallback={msg.role === 'user' ? 'U' : 'AI'} alt={msg.role} />
-          <MessageContent>{msg.content}</MessageContent>
-        </Message>
-      )}
-    </For>
-    <ChatContainerScrollAnchor />
-  </ChatContainerContent>
-</ChatContainerRoot>`),
-};

package/src/components/chat-thread.test.tsx

@@ -1,58 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { ChatThread } from './chat-thread';
-
-// jsdom doesn't implement Element.scrollTo; the auto-scroll container calls it.
-if (!Element.prototype.scrollTo) (Element.prototype as unknown as { scrollTo: () => void }).scrollTo = () => {};
-
-afterEach(cleanup);
-
-describe('ChatThread header composition', () => {
-  it('hides the header with no title, models, context, or header slot', () => {
-    const { container } = render(() => <ChatThread messages={[]} />);
-    expect(container.querySelector('header')).toBeNull();
-  });
-
-  it('shows the header when only header-start content is present', () => {
-    const { container } = render(() => <ChatThread messages={[]} headerStart />);
-    expect(container.querySelector('header')).toBeTruthy();
-  });
-
-  it('renders header-start and header-end slots inside the header', () => {
-    const { container } = render(() => <ChatThread messages={[]} headerStart headerEnd />);
-    expect(container.querySelector('header slot[name="header-start"]')).toBeTruthy();
-    expect(container.querySelector('header slot[name="header-end"]')).toBeTruthy();
-  });
-
-  it('still shows the header for a chat title (back-compat)', () => {
-    const { container, getByText } = render(() => <ChatThread messages={[]} chatTitle="Assistant" />);
-    expect(container.querySelector('header')).toBeTruthy();
-    expect(getByText('Assistant')).toBeInTheDocument();
-  });
-});
-
-describe('ChatThread suggestions gating', () => {
-  const SUGGESTIONS = ['What can you do?', 'Tell me a joke'];
-  const oneMessage = [{ id: '1', role: 'user' as const, content: 'hi' }];
-
-  it('renders suggestions when the thread is empty', () => {
-    const { getByText } = render(() => <ChatThread messages={[]} suggestions={SUGGESTIONS} />);
-    expect(getByText('What can you do?')).toBeInTheDocument();
-    expect(getByText('Tell me a joke')).toBeInTheDocument();
-  });
-
-  it('hides suggestions once the conversation has messages (default)', () => {
-    const { queryByText } = render(() => <ChatThread messages={oneMessage} suggestions={SUGGESTIONS} />);
-    expect(queryByText('What can you do?')).toBeNull();
-    expect(queryByText('Tell me a joke')).toBeNull();
-  });
-
-  it('keeps suggestions visible with messages when persistSuggestions is set', () => {
-    const { getByText } = render(() => (
-      <ChatThread messages={oneMessage} suggestions={SUGGESTIONS} persistSuggestions />
-    ));
-    expect(getByText('What can you do?')).toBeInTheDocument();
-    expect(getByText('Tell me a joke')).toBeInTheDocument();
-  });
-});

package/src/components/checkpoint.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { Checkpoint, CheckpointIcon, CheckpointTrigger } from './checkpoint';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Checkpoint',
-  component: Checkpoint,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'An inline marker that lets a user restore the conversation to a saved point. Composed of `Checkpoint` (row + separator) wrapping a `CheckpointIcon` and a `CheckpointTrigger` button.',
-        '**When to use:** to mark a restorable state in a transcript — e.g. before an edit or a branching action — so the user can revert to it.',
-        '**How to use:** place a `CheckpointIcon` and a `CheckpointTrigger` inside `Checkpoint`. Give the trigger an `onClick` handler and an optional `tooltip`; pass custom SVG children to `CheckpointIcon` to override the default flag.',
-        '**Placement:** between messages in a chat transcript, as a thin separator-style row.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    children: {
-      control: false,
-      description: 'The `CheckpointIcon` and `CheckpointTrigger` contents.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes for the checkpoint row.',
-    },
-  },
-  args: {},
-  render: (args) => (
-    <div class="max-w-md">
-      <Checkpoint {...args}>
-        <CheckpointIcon />
-        <CheckpointTrigger tooltip="Restore to this point" onClick={fn()}>
-          Restore
-        </CheckpointTrigger>
-      </Checkpoint>
-    </div>
-  ),
-} satisfies Meta<typeof Checkpoint>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — the default flag icon with a restore trigger. */
-export const Playground: Story = {
-  ...src(`<Checkpoint>
-  <CheckpointIcon />
-  <CheckpointTrigger tooltip="Restore to this point" onClick={handleRestore}>
-    Restore
-  </CheckpointTrigger>
-</Checkpoint>`),
-};
-
-export const WithCustomIcon: Story = {
-  render: () => (
-    <div class="max-w-md">
-      <Checkpoint>
-        <CheckpointIcon>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4">
-            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
-            <path d="M12 6v6l4 2" />
-          </svg>
-        </CheckpointIcon>
-        <CheckpointTrigger tooltip="Go back to this checkpoint" onClick={fn()}>
-          Revert to checkpoint
-        </CheckpointTrigger>
-      </Checkpoint>
-    </div>
-  ),
-  ...src(`<Checkpoint>
-  <CheckpointIcon>
-    <ClockIcon class="size-4" />
-  </CheckpointIcon>
-  <CheckpointTrigger tooltip="Go back to this checkpoint" onClick={handleRevert}>
-    Revert to checkpoint
-  </CheckpointTrigger>
-</Checkpoint>`),
-};
-
-export const NoTooltip: Story = {
-  render: () => (
-    <div class="max-w-md">
-      <Checkpoint>
-        <CheckpointIcon />
-        <CheckpointTrigger onClick={fn()}>Restore</CheckpointTrigger>
-      </Checkpoint>
-    </div>
-  ),
-  ...src(`<Checkpoint>
-  <CheckpointIcon />
-  <CheckpointTrigger onClick={handleRestore}>Restore</CheckpointTrigger>
-</Checkpoint>`),
-};