@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/conversation-item.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { ConversationItem } from './conversation-item';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const baseConversation = {
-  id: '1',
-  title: 'How to use SolidJS signals',
-  messageCount: 8,
-  lastMessageAt: '2026-04-10T12:00:00Z',
-  updatedAt: '2026-04-10T12:00:00Z',
-  scope: { type: 'document' as const },
-};
-
-/**
- * A single selectable row in a conversation/chat list: title plus a message
- * count, with an active (selected) state.
- */
-const meta = {
-  title: 'Solid (Advanced)/Elements/ConversationItem',
-  component: ConversationItem,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A single conversation row — shows the title and message count, truncating long titles, with a highlighted active state.',
-        '**When to use:** as the leaf item inside a chat history sidebar. Usually rendered for you by `ConversationList`; use it directly to build a custom list.',
-        '**How to use:** pass a `conversation` summary, an `isActive` flag, and an `onSelect(id)` handler fired when the row is clicked.',
-        '**Placement:** inside a conversation/chat history sidebar list.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    conversation: {
-      control: 'object',
-      description: 'The conversation summary (id, title, messageCount, scope, timestamps).',
-    },
-    isActive: {
-      control: 'boolean',
-      description: 'Whether this row is the currently selected conversation.',
-    },
-    onSelect: {
-      action: 'select',
-      description: 'Fired with the conversation id when the row is clicked.',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    conversation: baseConversation,
-    isActive: false,
-    onSelect: fn(),
-  },
-  render: (args) => (
-    <div class="w-64">
-      <ConversationItem {...args} />
-    </div>
-  ),
-} satisfies Meta<typeof ConversationItem>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ConversationItem } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — toggle `isActive` and edit the conversation object. */
-export const Playground: Story = {
-  ...src(`<ConversationItem conversation={conversation} isActive={false} onSelect={(id) => {}} />`),
-};
-
-export const Active: Story = {
-  args: { isActive: true },
-  ...src(`<ConversationItem conversation={conversation} isActive onSelect={(id) => {}} />`),
-};
-
-export const Inactive: Story = {
-  args: { isActive: false },
-  ...src(`<ConversationItem conversation={conversation} isActive={false} onSelect={(id) => {}} />`),
-};
-
-export const LongTitle: Story = {
-  args: {
-    conversation: {
-      ...baseConversation,
-      title: 'This is a very long conversation title that should be truncated with an ellipsis',
-    },
-  },
-  ...src(`<ConversationItem
-  conversation={{ ...conversation, title: 'A very long title…' }}
-  isActive={false}
-  onSelect={(id) => {}}
-/>`),
-};
-
-/** Several items stacked, one active — showcase. */
-export const MultipleItems: Story = {
-  render: (args: { onSelect: (id: string) => void }) => (
-    <div class="w-64 space-y-0.5">
-      <ConversationItem
-        conversation={{ ...baseConversation, id: '1', title: 'SolidJS reactive primitives' }}
-        isActive={true}
-        onSelect={args.onSelect}
-      />
-      <ConversationItem
-        conversation={{ ...baseConversation, id: '2', title: 'TypeScript generics guide', messageCount: 12 }}
-        isActive={false}
-        onSelect={args.onSelect}
-      />
-      <ConversationItem
-        conversation={{ ...baseConversation, id: '3', title: 'Tailwind CSS tips and tricks', messageCount: 3 }}
-        isActive={false}
-        onSelect={args.onSelect}
-      />
-    </div>
-  ),
-  ...src(`<div class="space-y-0.5">
-  <ConversationItem conversation={c1} isActive onSelect={onSelect} />
-  <ConversationItem conversation={c2} isActive={false} onSelect={onSelect} />
-  <ConversationItem conversation={c3} isActive={false} onSelect={onSelect} />
-</div>`),
-};

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

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { ConversationList, type ConversationListProps } from './conversation-list';
-import type { ConversationSummary, ConversationGroup } from '../types';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const scope = { type: 'document' as const };
-
-const groups: ConversationGroup[] = [
-  { id: 'today', name: 'Today', sortOrder: 0, createdAt: '2026-04-10' },
-  { id: 'yesterday', name: 'Yesterday', sortOrder: 1, createdAt: '2026-04-09' },
-  { id: 'week', name: 'This Week', sortOrder: 2, createdAt: '2026-04-07' },
-];
-
-const conversations: ConversationSummary[] = [
-  { id: '1', title: 'SolidJS signals explained', groupId: 'today', scope, messageCount: 5, lastMessageAt: '2026-04-10T14:00:00Z', updatedAt: '2026-04-10T14:00:00Z' },
-  { id: '2', title: 'TypeScript generics deep dive', groupId: 'today', scope, messageCount: 12, lastMessageAt: '2026-04-10T10:00:00Z', updatedAt: '2026-04-10T10:00:00Z' },
-  { id: '3', title: 'CSS Grid vs Flexbox', groupId: 'yesterday', scope, messageCount: 8, lastMessageAt: '2026-04-09T16:00:00Z', updatedAt: '2026-04-09T16:00:00Z' },
-  { id: '4', title: 'Setting up Storybook', groupId: 'yesterday', scope, messageCount: 3, lastMessageAt: '2026-04-09T11:00:00Z', updatedAt: '2026-04-09T11:00:00Z' },
-  { id: '5', title: 'Vite configuration tips', groupId: 'week', scope, messageCount: 7, lastMessageAt: '2026-04-08T09:00:00Z', updatedAt: '2026-04-08T09:00:00Z' },
-  { id: '6', title: 'Chrome extension manifest v3', groupId: 'week', scope, messageCount: 15, lastMessageAt: '2026-04-07T14:00:00Z', updatedAt: '2026-04-07T14:00:00Z' },
-];
-
-/**
- * The conversation/chat history sidebar: a header with new-chat action, a search
- * box, and grouped, collapsible lists of `ConversationItem`s.
- */
-const meta = {
-  title: 'Solid (Advanced)/Elements/ConversationList',
-  component: ConversationList,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A full chat-history sidebar: header (sidebar toggle + new chat), a built-in search box that filters by title, and conversations bucketed into collapsible, count-badged groups.',
-        '**When to use:** as the left-hand navigation for a chat app — browsing, searching, and switching between past conversations.',
-        '**How to use:** pass `groups` and `conversations` arrays, the `activeId`, and handlers `onSelect(id)` / `onNewChat()` (plus optional `onToggleSidebar()`). Give it a sized, overflow-hidden container.',
-        '**Placement:** the persistent left sidebar of a chat layout.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    groups: {
-      control: 'object',
-      description: 'Conversation groups (buckets) to render as collapsible sections.',
-    },
-    conversations: {
-      control: 'object',
-      description: 'Conversation summaries; placed into groups by their `groupId`.',
-    },
-    activeId: {
-      control: 'text',
-      description: 'Id of the currently selected conversation.',
-    },
-    onSelect: {
-      action: 'select',
-      description: 'Fired with the conversation id when a row is clicked.',
-      table: { category: 'Events' },
-    },
-    onNewChat: {
-      action: 'newChat',
-      description: 'Fired when the new-chat (+) button is clicked.',
-      table: { category: 'Events' },
-    },
-    onToggleSidebar: {
-      action: 'toggleSidebar',
-      description: 'Fired when the sidebar-toggle (menu) button is clicked.',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    groups,
-    conversations,
-    activeId: '1',
-    onSelect: fn(),
-    onNewChat: fn(),
-    onToggleSidebar: fn(),
-  },
-  render: (args) => (
-    <div class="h-[500px] w-72 border border-border rounded-lg overflow-hidden">
-      <ConversationList {...args} />
-    </div>
-  ),
-} satisfies Meta<typeof ConversationList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ConversationList } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-const usage = `<ConversationList
-  groups={groups}
-  conversations={conversations}
-  activeId={activeId()}
-  onSelect={setActiveId}
-  onNewChat={() => {}}
-/>`;
-
-/** Interactive playground — edit the groups/conversations arrays and active id via controls. */
-export const Playground: Story = {
-  ...src(usage),
-};
-
-/** Conversations bucketed into Today / Yesterday / This Week. */
-export const WithGroups: Story = {
-  ...src(usage),
-};
-
-/** No conversations — the list renders just its header and search box. */
-export const EmptyState: Story = {
-  args: { groups: [], conversations: [], activeId: undefined },
-  render: (args: ConversationListProps) => (
-    <div class="h-[400px] w-72 border border-border rounded-lg overflow-hidden">
-      <ConversationList {...args} />
-    </div>
-  ),
-  ...src(`<ConversationList
-  groups={[]}
-  conversations={[]}
-  onSelect={() => {}}
-  onNewChat={() => {}}
-/>`),
-};
-
-/** Type in the built-in search box to filter conversations by title. */
-export const WithSearch: Story = {
-  ...src(usage),
-};

package/src/components/default-input.test.tsx

@@ -1,111 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup, fireEvent } from '@solidjs/testing-library';
-import { createSignal } from 'solid-js';
-import { DefaultPromptInput } from '../elements/default-input';
-
-// jsdom doesn't implement Element.scrollTo; some inner controls may call it.
-if (!Element.prototype.scrollTo) (Element.prototype as unknown as { scrollTo: () => void }).scrollTo = () => {};
-
-afterEach(cleanup);
-
-const noop = () => {};
-
-describe('DefaultPromptInput disabled state', () => {
-  it('renders the textarea and send button as disabled', () => {
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value="hello"
-        disabled
-        onValueChange={noop}
-        onSubmit={noop}
-        onSuggestionClick={noop}
-      />
-    ));
-    const textarea = container.querySelector('textarea');
-    const send = container.querySelector('[data-testid="send"]');
-    expect(textarea).toBeDisabled();
-    expect(send).toBeDisabled();
-  });
-
-  it('does not call onSubmit when the send button is clicked while disabled', () => {
-    const onSubmit = vi.fn();
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value="hello"
-        disabled
-        onValueChange={noop}
-        onSubmit={onSubmit}
-        onSuggestionClick={noop}
-      />
-    ));
-    const send = container.querySelector('[data-testid="send"]') as HTMLButtonElement;
-    fireEvent.click(send);
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('does not call onSubmit when Enter is pressed while disabled', () => {
-    const onSubmit = vi.fn();
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value="hello"
-        disabled
-        onValueChange={noop}
-        onSubmit={onSubmit}
-        onSuggestionClick={noop}
-      />
-    ));
-    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('reactively disables/enables the textarea when `disabled` changes after mount', () => {
-    const [disabled, setDisabled] = createSignal(false);
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value="hi"
-        disabled={disabled()}
-        onValueChange={noop}
-        onSubmit={noop}
-        onSuggestionClick={noop}
-      />
-    ));
-    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
-    expect(textarea).not.toBeDisabled();
-    setDisabled(true);
-    expect(textarea).toBeDisabled(); // fails if PromptInput context captures `disabled` statically
-    setDisabled(false);
-    expect(textarea).not.toBeDisabled();
-  });
-
-  it('still submits via Enter when not disabled (sanity)', () => {
-    const onSubmit = vi.fn();
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value="hello"
-        onValueChange={noop}
-        onSubmit={onSubmit}
-        onSuggestionClick={noop}
-      />
-    ));
-    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('DefaultPromptInput leading/trailing slots', () => {
-  it('renders a leading and trailing named slot', () => {
-    const { container } = render(() => (
-      <DefaultPromptInput
-        value=""
-        onValueChange={noop}
-        onSubmit={noop}
-        onSuggestionClick={noop}
-      />
-    ));
-    expect(container.querySelector('slot[name="leading"]')).toBeTruthy();
-    expect(container.querySelector('slot[name="trailing"]')).toBeTruthy();
-  });
-});