@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/context-meter.stories.tsx

@@ -1,151 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-interface ContextUsage {
-  usedTokens: number;
-  maxTokens: number;
-  inputTokens?: number;
-  outputTokens?: number;
-  reasoningTokens?: number;
-  cacheTokens?: number;
-  estimatedCost?: number;
-}
-
-// 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-context': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-const usage: ContextUsage = {
-  usedTokens: 48200,
-  maxTokens: 200000,
-  inputTokens: 31000,
-  outputTokens: 17200,
-  reasoningTokens: 4200,
-  cacheTokens: 8000,
-  estimatedCost: 0.42,
-};
-
-interface MeterElementProps {
-  context: ContextUsage;
-  warnThreshold?: number;
-  dangerThreshold?: number;
-  onThresholdChange?: (level: string) => void;
-}
-
-/** Render `<kai-context>` with the `context` set as a JS property. */
-function MeterElement(props: MeterElementProps) {
-  let el: (HTMLElement & { context?: ContextUsage; warnThreshold?: number; dangerThreshold?: number }) | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.context = props.context;
-    if (props.warnThreshold !== undefined) el.warnThreshold = props.warnThreshold;
-    if (props.dangerThreshold !== undefined) el.dangerThreshold = props.dangerThreshold;
-    if (props.onThresholdChange) {
-      el.addEventListener('kai-threshold-change', (e) => {
-        props.onThresholdChange!((e as CustomEvent<{ level: string }>).detail.level);
-      });
-    }
-  });
-  return (
-    <kai-context ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-context id="ctx"></kai-context>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  document.getElementById('ctx').context = {
-    usedTokens: 48200, maxTokens: 200000,
-    inputTokens: 31000, outputTokens: 17200,
-    reasoningTokens: 4200, cacheTokens: 8000,
-    estimatedCost: 0.42,
-  };
-</script>`;
-
-const CUSTOM_THRESHOLDS_SNIPPET = `<!-- Custom thresholds: warn at 50%, danger at 75% -->
-<kai-context id="ctx"></kai-context>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';
-
-  const el = document.getElementById('ctx');
-  el.context = {
-    usedTokens: 110000,  // 55% of 200 000 -> warn (> 50%)
-    maxTokens: 200000,
-    inputTokens: 70000,
-    outputTokens: 40000,
-    estimatedCost: 0.65,
-  };
-
-  // Lower the thresholds so the indicator warns earlier.
-  el.warnThreshold = 0.5;    // default 0.7
-  el.dangerThreshold = 0.75; // default 0.9
-
-  // Listen for severity changes.
-  el.addEventListener('kai-threshold-change', (e) => {
-    console.log('severity changed to', e.detail.level); // 'ok' | 'warn' | 'danger'
-  });
-</script>`;
-
-const meta = {
-  title: 'Components/Context',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-context'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-context', [
-          '`<kai-context>` is the framework-agnostic **web component** for a token/context-window usage meter — a compact gauge with a hover-card breakdown (input / output / reasoning / cache + estimated cost) — isolated in **Shadow DOM**.',
-          '**When to use:** showing how much of the context window a conversation is using, typically in a chat header. In SolidJS, compose the `Context` primitives.',
-          '**Placement:** inline in the chat header or toolbar, beside the model switcher or other header controls; it is a compact `inline-block` element and does not need a dedicated row.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, then set the `context` **property** with the usage object. Hover the meter to reveal the breakdown.",
-          '**Color thresholds** are configurable via `warnThreshold` (default `0.7`) and `dangerThreshold` (default `0.9`) number properties. When the computed severity level changes, the element fires a **`kai-threshold-change`** event with `detail.level` set to `\'ok\'`, `\'warn\'`, or `\'danger\'`.',
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A meter at ~24% usage; hover to reveal the full breakdown. */
-export const Default: Story = {
-  render: () => <MeterElement context={usage} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/**
- * Custom thresholds — `warnThreshold=0.5` and `dangerThreshold=0.75` so the
- * meter turns yellow at 50% and red at 75%. At ~55% (110 000 / 200 000) the
- * meter renders yellow. Open the browser console to see `kai-threshold-change`
- * events as the property changes.
- */
-export const CustomThresholds: Story = {
-  render: () => (
-    <MeterElement
-      context={{
-        usedTokens: 110000,
-        maxTokens: 200000,
-        inputTokens: 70000,
-        outputTokens: 40000,
-        estimatedCost: 0.65,
-      }}
-      warnThreshold={0.5}
-      dangerThreshold={0.75}
-      onThresholdChange={(level) => console.log('kai-threshold-change', { level })}
-    />
-  ),
-  parameters: { docs: { source: { code: CUSTOM_THRESHOLDS_SNIPPET, language: 'html' } } },
-};

package/src/elements/conversation-list.declarative.test.tsx

@@ -1,137 +0,0 @@
-/**
- * Unit tests for the declarative `<kai-conversation>` light-DOM API of
- * `<kai-conversations>`.
- *
- * Strategy: `defineWebComponent` registers a real Shadow-DOM custom element
- * and is not suitable for jsdom unit tests. Instead:
- *   1. Test the exported `parseKaiConversationElement` helper in isolation.
- *   2. Test that the merged list of prop + slotted items renders items correctly
- *      via a minimal ConvList harness, mirroring the pattern in
- *      `source-list.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 { For } from 'solid-js';
-import { parseKaiConversationElement } from './conversation-list';
-import type { ConversationSummary } from '../types';
-
-afterEach(cleanup);
-
-// ---------------------------------------------------------------------------
-// parseKaiConversationElement — pure helper
-// ---------------------------------------------------------------------------
-
-describe('parseKaiConversationElement', () => {
-  function makeEl(attrs: Record<string, string | null>, textContent = ''): Element {
-    const el = document.createElement('kai-conversation');
-    for (const [k, v] of Object.entries(attrs)) {
-      if (v !== null) el.setAttribute(k, v);
-    }
-    el.textContent = textContent;
-    return el;
-  }
-
-  it('maps id attribute to ConversationSummary.id', () => {
-    const el = makeEl({ id: 'c-1' }, 'Q2 plan');
-    expect(parseKaiConversationElement(el).id).toBe('c-1');
-  });
-
-  it('uses trimmed textContent as title', () => {
-    const el = makeEl({ id: 'c-1' }, '  Q2 plan  ');
-    expect(parseKaiConversationElement(el).title).toBe('Q2 plan');
-  });
-
-  it('reads group-id attribute as groupId when present', () => {
-    const el = makeEl({ id: 'c-1', 'group-id': 'g-work' }, 'Q2 plan');
-    expect(parseKaiConversationElement(el).groupId).toBe('g-work');
-  });
-
-  it('sets groupId to undefined when group-id attribute is absent', () => {
-    const el = makeEl({ id: 'c-1' }, 'Q2 plan');
-    expect(parseKaiConversationElement(el).groupId).toBeUndefined();
-  });
-
-  it('falls back to empty string for missing id attribute', () => {
-    const el = makeEl({}, 'Untitled');
-    expect(parseKaiConversationElement(el).id).toBe('');
-  });
-
-  it('provides safe defaults for scope, messageCount, lastMessageAt, updatedAt', () => {
-    const el = makeEl({ id: 'c-1' }, 'Q2 plan');
-    const item = parseKaiConversationElement(el);
-    expect(item.scope).toEqual({ type: 'collection' });
-    expect(item.messageCount).toBe(0);
-    expect(typeof item.lastMessageAt).toBe('string');
-    expect(typeof item.updatedAt).toBe('string');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Merge: prop conversations + slotted conversations combine correctly
-// ---------------------------------------------------------------------------
-
-describe('conversation merge order', () => {
-  /** Minimal render harness that outputs a button per conversation. */
-  function ConvList(props: { items: ConversationSummary[]; onSelect: (id: string) => void }) {
-    return (
-      <div>
-        <For each={props.items}>
-          {(c) => (
-            <button type="button" onClick={() => props.onSelect(c.id)}>
-              {c.title}
-            </button>
-          )}
-        </For>
-      </div>
-    );
-  }
-
-  it('renders one item per conversation', () => {
-    const items: ConversationSummary[] = [
-      { id: 'c-1', title: 'First', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: '', updatedAt: '' },
-      { id: 'c-2', title: 'Second', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: '', updatedAt: '' },
-    ];
-    const { getByText } = render(() => <ConvList items={items} onSelect={() => {}} />);
-    expect(getByText('First')).toBeInTheDocument();
-    expect(getByText('Second')).toBeInTheDocument();
-  });
-
-  it('fires onSelect with the conversation id when an item is clicked', () => {
-    const onSelect = vi.fn();
-    const items: ConversationSummary[] = [
-      { id: 'c-42', title: 'API plan', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: '', updatedAt: '' },
-    ];
-    const { getByText } = render(() => <ConvList items={items} onSelect={onSelect} />);
-    fireEvent.click(getByText('API plan'));
-    expect(onSelect).toHaveBeenCalledWith('c-42');
-  });
-
-  it('renders prop items before declarative (slotted) items', () => {
-    const propItems: ConversationSummary[] = [
-      { id: 'p-1', title: 'Prop conv', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: '', updatedAt: '' },
-    ];
-    const slottedItems: ConversationSummary[] = [
-      { id: 's-1', title: 'Slotted conv', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: '', updatedAt: '' },
-    ];
-    const merged = [...propItems, ...slottedItems];
-
-    const { getAllByRole } = render(() => <ConvList items={merged} onSelect={() => {}} />);
-    const buttons = getAllByRole('button');
-    expect(buttons).toHaveLength(2);
-    expect(buttons[0]).toHaveTextContent('Prop conv');
-    expect(buttons[1]).toHaveTextContent('Slotted conv');
-  });
-
-  it('parseKaiConversationElement produces items that render and fire correct id', () => {
-    const onSelect = vi.fn();
-    const el = document.createElement('kai-conversation');
-    el.setAttribute('id', 'c-99');
-    el.textContent = 'My conversation';
-
-    const parsed = parseKaiConversationElement(el);
-    const { getByText } = render(() => <ConvList items={[parsed]} onSelect={onSelect} />);
-    fireEvent.click(getByText('My conversation'));
-    expect(onSelect).toHaveBeenCalledWith('c-99');
-  });
-});

package/src/elements/conversation-list.stories.tsx

@@ -1,243 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers <kai-chat>, <kai-conversations>, <kai-prompt-input>
-import type { ConversationGroup, ConversationSummary } 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-conversations': JSX.HTMLAttributes<HTMLElement>;
-      'kai-conversation': JSX.HTMLAttributes<HTMLElement> & { id?: string; 'group-id'?: string };
-    }
-  }
-}
-
-const sampleGroups: ConversationGroup[] = [
-  { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
-  { id: 'g-personal', name: 'Personal', sortOrder: 1, createdAt: '2026-06-02T09:00:00.000Z' },
-];
-
-const sampleConversations: ConversationSummary[] = [
-  {
-    id: 'c-1',
-    title: 'Q2 launch plan',
-    groupId: 'g-work',
-    scope: { type: 'collection' },
-    messageCount: 12,
-    lastMessageAt: '2026-06-09T14:20:00.000Z',
-    updatedAt: '2026-06-09T14:20:00.000Z',
-  },
-  {
-    id: 'c-2',
-    title: 'API migration notes',
-    groupId: 'g-work',
-    scope: { type: 'collection' },
-    messageCount: 5,
-    lastMessageAt: '2026-06-08T11:05:00.000Z',
-    updatedAt: '2026-06-08T11:05:00.000Z',
-  },
-  {
-    id: 'c-3',
-    title: 'Weekend trip ideas',
-    groupId: 'g-personal',
-    scope: { type: 'collection' },
-    messageCount: 8,
-    lastMessageAt: '2026-06-07T19:42:00.000Z',
-    updatedAt: '2026-06-07T19:42:00.000Z',
-  },
-  {
-    id: 'c-4',
-    title: 'Untitled chat',
-    scope: { type: 'collection' },
-    messageCount: 1,
-    lastMessageAt: '2026-06-10T08:00:00.000Z',
-    updatedAt: '2026-06-10T08:00:00.000Z',
-  },
-];
-
-type ConversationListEl = HTMLElement & {
-  groups?: ConversationGroup[];
-  conversations?: ConversationSummary[];
-  activeId?: string;
-};
-
-/** Live demo of the actual `<kai-conversations>` custom element (Shadow DOM and all). */
-function ConversationListElement(props: { args?: Record<string, unknown> }) {
-  let el: ConversationListEl | undefined;
-  onMount(() => {
-    if (el) {
-      // Fixed array data
-      el.groups = sampleGroups;
-      el.conversations = sampleConversations;
-      el.activeId = 'c-1';
-      // Scalar args from Controls
-      const args = props.args;
-      if (args) {
-        const scalarNames = ['activeId'];
-        for (const name of scalarNames) {
-          if (name in args) (el as unknown as Record<string, unknown>)[name] = args[name];
-        }
-      }
-    }
-  });
-  return (
-    <kai-conversations
-      ref={(e) => (el = e as ConversationListEl)}
-      style={{ display: 'block', width: '300px', height: '560px' }}
-    />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-conversations id="list" style="display:block; width:300px; height:100vh;"></kai-conversations>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const list = document.getElementById('list');
-  list.groups = [
-    { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
-  ];
-  list.conversations = [
-    {
-      id: 'c-1', title: 'Q2 launch plan', groupId: 'g-work',
-      scope: { type: 'collection' }, messageCount: 12,
-      lastMessageAt: '2026-06-09T14:20:00.000Z', updatedAt: '2026-06-09T14:20:00.000Z',
-    },
-  ];
-  list.activeId = 'c-1';
-
-  // events are CustomEvents on the element (they do not bubble)
-  list.addEventListener('kai-conversation-select', (e) => console.log('opened:', e.detail.id));
-  list.addEventListener('kai-new-chat', () => console.log('new chat'));
-  list.addEventListener('kai-toggle-sidebar', () => console.log('toggle sidebar'));
-</script>`;
-
-const SOLID_SNIPPET = `import '@kitn.ai/ui/elements'; // registers the custom elements
-import { onMount } from 'solid-js';
-import type { ConversationGroup, ConversationSummary } from '@kitn.ai/ui';
-
-function Sidebar() {
-  let el: HTMLElement & {
-    groups?: ConversationGroup[];
-    conversations?: ConversationSummary[];
-    activeId?: string;
-  };
-  const groups: ConversationGroup[] = [
-    { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
-  ];
-  const conversations: ConversationSummary[] = [
-    {
-      id: 'c-1', title: 'Q2 launch plan', groupId: 'g-work',
-      scope: { type: 'collection' }, messageCount: 12,
-      lastMessageAt: '2026-06-09T14:20:00.000Z', updatedAt: '2026-06-09T14:20:00.000Z',
-    },
-  ];
-  onMount(() => {
-    el.groups = groups;
-    el.conversations = conversations;
-    el.activeId = 'c-1';
-  });
-  return (
-    <kai-conversations
-      ref={el}
-      style={{ display: 'block', width: '300px', height: '100vh' }}
-      on:kai-conversation-select={(e) => console.log('opened:', e.detail.id)}
-      on:kai-new-chat={() => console.log('new chat')}
-      on:kai-toggle-sidebar={() => console.log('toggle sidebar')}
-    />
-  );
-}`;
-
-const meta = {
-  title: 'Components/Conversations',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-conversations'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-conversations', [
-          '`<kai-conversations>` is the framework-agnostic **web component** version of the chat sidebar — a searchable, grouped list of conversations with a "new chat" button, isolated in **Shadow DOM** so the host page\'s CSS can\'t leak in and the kit\'s styles can\'t leak out. SolidJS is bundled in, so the host needs nothing.',
-          '**When to use:** adding a conversation switcher to a non-Solid app (React, Vue, Svelte, plain HTML), or anywhere you want zero style conflicts. If you *are* in SolidJS and want fine-grained control, compose the `ConversationList` primitive instead.',
-          '**How to use — data-driven:** register once with `import \'@kitn.ai/ui/elements\'`, then set rich data as JS **properties** (`el.groups = [...]`, `el.conversations = [...]`, `el.activeId = \'c-1\'`) and listen for **CustomEvents** (`kai-conversation-select`, `kai-new-chat`, `kai-toggle-sidebar`) directly on the element.',
-          '**How to use — declarative:** alternatively, compose `<kai-conversation>` child elements directly in markup — each child carries its `id` as an attribute and its title as text content (`<kai-conversation id="c-1">Q2 plan</kai-conversation>`). No JS property wiring needed; the element reads them on mount and re-reads on DOM changes via MutationObserver. Events fire identically to the data-driven path.',
-          '**Anatomy:** **header** (collapse/sidebar toggle button + "New chat" button) → **group headers** (one per `ConversationGroup`, labelled by `group.name`) → **conversation rows** (`<kai-conversation>` items or JS-property rows; active row is highlighted; each row is a button firing `kai-conversation-select`). Declarative `<kai-conversation id="…">title</kai-conversation>` children are invisible data carriers (no shadow slot) merged with the `conversations` property list.',
-          '**Placement:** as a fixed-width side panel next to the chat surface. Give it an explicit width and height (e.g. `width: 300px; height: 100vh`).',
-          'See the **Code** tab below for the HTML usage; the *SolidJS* story shows the same element inside a Solid component.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** The element used the plain-HTML / any-framework way. */
-export const Default: Story = {
-  args: {
-    activeId: 'c-1',
-  },
-  render: (args: Record<string, unknown>) => <ConversationListElement args={args} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** The same element used inside a SolidJS component (properties via `ref`, events via `on:`). */
-export const InSolidJS: Story = {
-  name: 'In SolidJS',
-  render: () => <ConversationListElement />,
-  parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
-};
-
-const DECLARATIVE_HTML_SNIPPET = `<!-- Works in any framework or plain HTML — no JS property wiring needed -->
-<kai-conversations id="list" style="display:block; width:300px; height:560px;">
-  <kai-conversation id="c-1">Q2 launch plan</kai-conversation>
-  <kai-conversation id="c-2">API migration notes</kai-conversation>
-  <kai-conversation id="c-3">Weekend trip ideas</kai-conversation>
-</kai-conversations>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  // Events fire exactly the same as the data-driven approach.
-  document.getElementById('list')
-    .addEventListener('kai-conversation-select', (e) => console.log('opened:', e.detail.id));
-</script>`;
-
-/** Declarative conversations — \`<kai-conversation>\` light-DOM children instead of
- *  a \`conversations\` property. Each child carries its \`id\` as an attribute and
- *  its title as text content. Great for plain HTML or server-rendered markup
- *  where JS property wiring is inconvenient. */
-export const DeclarativeConversations: Story = {
-  name: 'Declarative Conversations (kai-conversation)',
-  render: () => {
-    let el: HTMLElement | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.addEventListener('kai-conversation-select', (e: Event) => {
-        console.log('selected:', (e as CustomEvent<{ id: string }>).detail.id);
-      });
-    });
-    return (
-      <kai-conversations
-        ref={(e) => (el = e as HTMLElement)}
-        style={{ display: 'block', width: '300px', height: '560px' }}
-      >
-        <kai-conversation id="c-1">Q2 launch plan</kai-conversation>
-        <kai-conversation id="c-2">API migration notes</kai-conversation>
-        <kai-conversation id="c-3">Weekend trip ideas</kai-conversation>
-      </kai-conversations>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: DECLARATIVE_HTML_SNIPPET,
-        language: 'html',
-      },
-    },
-  },
-};
-