@kitnai/chat 0.1.0

package/src/components/conversation-list.tsx

@@ -0,0 +1,100 @@
+import { splitProps, For, Show, createSignal, createMemo } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+import { ConversationItem } from './conversation-item';
+import type { ConversationSummary, ConversationGroup } from '../types';
+
+export interface ConversationListProps {
+  groups: ConversationGroup[];
+  conversations: ConversationSummary[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onToggleSidebar?: () => void;
+  class?: string;
+}
+
+export function ConversationList(props: ConversationListProps) {
+  const [local] = splitProps(props, ['groups', 'conversations', 'activeId', 'onSelect', 'onNewChat', 'onToggleSidebar', 'class']);
+  const [searchQuery, setSearchQuery] = createSignal('');
+
+  const filteredConversations = createMemo(() => {
+    const q = searchQuery().toLowerCase();
+    if (!q) return local.conversations;
+    return local.conversations.filter((c) => c.title.toLowerCase().includes(q));
+  });
+
+  const groupedConversations = createMemo(() => {
+    const grouped = new Map<string | undefined, ConversationSummary[]>();
+    for (const conv of filteredConversations()) {
+      const key = conv.groupId;
+      if (!grouped.has(key)) grouped.set(key, []);
+      grouped.get(key)!.push(conv);
+    }
+    return grouped;
+  });
+
+  const ungrouped = createMemo(() => groupedConversations().get(undefined) ?? []);
+
+  return (
+    <div class={cn('flex flex-col h-full bg-sidebar', local.class)}>
+      <div class="flex items-center justify-between p-3 pb-2">
+        <div class="flex items-center gap-2">
+          <Button variant="ghost" size="icon-sm" onClick={local.onToggleSidebar}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+          </Button>
+          <span class="text-sm font-semibold text-foreground">Chats</span>
+        </div>
+        <Button variant="ghost" size="icon-sm" onClick={local.onNewChat}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        </Button>
+      </div>
+      <div class="px-3 pb-2">
+        <div class="flex items-center gap-2 rounded-md bg-muted/40 px-2.5 py-1.5">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground/60"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input type="text" value={searchQuery()} onInput={(e) => setSearchQuery(e.currentTarget.value)} placeholder="Search chats..."
+            class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground/60 focus:outline-none w-full" />
+        </div>
+      </div>
+      <ScrollArea class="flex-1 px-2">
+        <For each={local.groups}>
+          {(group) => {
+            const convs = createMemo(() => groupedConversations().get(group.id) ?? []);
+            return (
+              <Show when={convs().length > 0}>
+                <GroupSection name={group.name} count={convs().length} conversations={convs()} activeId={local.activeId} onSelect={local.onSelect} />
+              </Show>
+            );
+          }}
+        </For>
+        <Show when={ungrouped().length > 0}>
+          <GroupSection name="Ungrouped" count={ungrouped().length} conversations={ungrouped()} activeId={local.activeId} onSelect={local.onSelect} />
+        </Show>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function GroupSection(props: { name: string; count: number; conversations: ConversationSummary[]; activeId?: string; onSelect: (id: string) => void }) {
+  const [open, setOpen] = createSignal(true);
+  return (
+    <Collapsible open={open()} onOpenChange={setOpen}>
+      <CollapsibleTrigger class="flex items-center gap-1.5 w-full px-1.5 py-1 rounded-md bg-muted/30 text-[13px] text-muted-foreground font-medium hover:bg-muted/50 transition-colors cursor-pointer mt-1.5">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          class={cn('transition-transform', !open() && '-rotate-90')}><polyline points="6 9 12 15 18 9"/></svg>
+        <span>{props.name}</span>
+        <Badge variant="count" class="ml-auto text-[11px]">{props.count}</Badge>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div class="pl-2 mt-0.5 space-y-0.5">
+          <For each={props.conversations}>
+            {(conv) => <ConversationItem conversation={conv} isActive={conv.id === props.activeId} onSelect={props.onSelect} />}
+          </For>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/empty.stories.tsx

@@ -0,0 +1,435 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, For } from 'solid-js';
+import {
+  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+} from './empty';
+import { Button } from '../ui/button';
+import { Avatar } from '../ui/avatar';
+import { PromptSuggestion } from './prompt-suggestion';
+import { PromptInput, PromptInputTextarea, PromptInputActions } from './prompt-input';
+import {
+  FolderPlus, MessageCircleQuestion, Inbox, Search, Sparkles, FileText, ArrowUp, Plus, Upload,
+} from 'lucide-solid';
+
+/**
+ * Story for the compound `Empty` family. `Empty` is the root container; the
+ * header/media/title/description/content subcomponents compose the layout. The
+ * only real enum prop is `EmptyMedia`'s `variant`, so the controls focus on the
+ * common composition, and the variation stories are compositional showcases.
+ */
+const meta = {
+  title: 'Components/Empty',
+  component: Empty,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A composable empty-state block (modeled on shadcn/ui `Empty`): a centered media tile, title, description, and a content slot for actions or suggestions. Token-driven styling; no border by default.',
+          '**When to use:** when a region has nothing to show yet — an empty list/inbox, no search results, a blank chat, or a drop zone — and you want to guide the user toward a next action.',
+          '**How to use:** compose `Empty > EmptyHeader (EmptyMedia + EmptyTitle + EmptyDescription)` and an optional `EmptyContent` for buttons or prompt suggestions. Set `EmptyMedia` `variant` to `icon` for a muted tile or `default` for a bare slot (avatar/illustration). Add `border border-dashed` via `class` for a card.',
+          '**Placement:** empty lists/sidebars, search-result panes, blank chat launch states, and file drop zones.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Demo control: the `EmptyTitle` text.',
+    },
+    description: {
+      control: 'text',
+      description: 'Demo control: the `EmptyDescription` text.',
+    },
+    mediaVariant: {
+      control: 'select',
+      options: ['default', 'icon'],
+      description: '`EmptyMedia` variant — `icon` is a muted rounded tile, `default` is a bare slot.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    actionLabel: {
+      control: 'text',
+      description: 'Demo control: label of the primary action button.',
+    },
+  },
+  render: (args: {
+    title?: string;
+    description?: string;
+    mediaVariant?: 'default' | 'icon';
+    actionLabel?: string;
+  }) => (
+    <div class="w-[420px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant={args.mediaVariant ?? 'icon'}><FolderPlus /></EmptyMedia>
+          <EmptyTitle>{args.title}</EmptyTitle>
+          <EmptyDescription>{args.description}</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button><Plus class="size-4" /> {args.actionLabel}</Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+} satisfies Meta<typeof Empty>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+} from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — edit the title, description, media variant, and action label. */
+export const Playground: Story = {
+  args: {
+    title: 'No projects yet',
+    description: 'Get started by creating your first project.',
+    mediaVariant: 'icon',
+    actionLabel: 'Create project',
+  },
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderPlus /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating your first project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button><Plus class="size-4" /> Create project</Button>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** A single primary action — the canonical empty state. */
+export const Default: Story = {
+  render: () => (
+    <div class="w-[420px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><FolderPlus /></EmptyMedia>
+          <EmptyTitle>No projects yet</EmptyTitle>
+          <EmptyDescription>Get started by creating your first project.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button><Plus class="size-4" /> Create project</Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderPlus /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating your first project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button><Plus class="size-4" /> Create project</Button>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** Two actions — a primary plus a secondary (outline). */
+export const WithActions: Story = {
+  name: 'With Multiple Actions',
+  render: () => (
+    <div class="w-[420px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><Inbox /></EmptyMedia>
+          <EmptyTitle>Your inbox is empty</EmptyTitle>
+          <EmptyDescription>Import existing items or start from scratch.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div class="flex gap-2">
+            <Button><Plus class="size-4" /> New item</Button>
+            <Button variant="outline"><Upload class="size-4" /> Import</Button>
+          </div>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Inbox /></EmptyMedia>
+    <EmptyTitle>Your inbox is empty</EmptyTitle>
+    <EmptyDescription>Import existing items or start from scratch.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <div class="flex gap-2">
+      <Button><Plus class="size-4" /> New item</Button>
+      <Button variant="outline"><Upload class="size-4" /> Import</Button>
+    </div>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** The two `EmptyMedia` variants: an icon tile vs. a default (bare) slot
+ *  holding an avatar or larger illustration. */
+export const MediaVariants: Story = {
+  name: 'Media Variants (icon / default)',
+  render: () => (
+    <div class="flex gap-8">
+      <div class="w-[280px]">
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><Search /></EmptyMedia>
+            <EmptyTitle>variant="icon"</EmptyTitle>
+            <EmptyDescription>Icon sits in a muted rounded tile.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+      <div class="w-[280px]">
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="default"><Avatar fallback="JA" size="lg" /></EmptyMedia>
+            <EmptyTitle>variant="default"</EmptyTitle>
+            <EmptyDescription>Bare slot for an avatar or illustration.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Search /></EmptyMedia>
+    <EmptyTitle>Icon tile</EmptyTitle>
+  </EmptyHeader>
+</Empty>
+
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="default"><Avatar fallback="JA" size="lg" /></EmptyMedia>
+    <EmptyTitle>Bare slot</EmptyTitle>
+  </EmptyHeader>
+</Empty>`),
+};
+
+/** Suggestions as pills (PromptSuggestion default) in a centered wrap —
+ *  best for a handful of short prompts. */
+export const SuggestionPills: Story = {
+  name: 'Suggestions — Pills',
+  render: () => (
+    <div class="w-[460px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><Sparkles /></EmptyMedia>
+          <EmptyTitle>Start a conversation</EmptyTitle>
+          <EmptyDescription>Pick a prompt or type your own.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div class="flex flex-wrap justify-center gap-2">
+            <For each={['Summarize this', 'Key takeaways', 'Create an outline', 'Find risks']}>
+              {(s) => <PromptSuggestion>{s}</PromptSuggestion>}
+            </For>
+          </div>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Sparkles /></EmptyMedia>
+    <EmptyTitle>Start a conversation</EmptyTitle>
+    <EmptyDescription>Pick a prompt or type your own.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <div class="flex flex-wrap justify-center gap-2">
+      <For each={prompts}>{(s) => <PromptSuggestion>{s}</PromptSuggestion>}</For>
+    </div>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** Suggestions as a full-width list (PromptSuggestion `block`) — best for
+ *  longer, sentence-length prompts. This is the report chat dock's pattern. */
+export const SuggestionList: Story = {
+  name: 'Suggestions — List (block)',
+  render: () => (
+    <div class="w-[360px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><MessageCircleQuestion /></EmptyMedia>
+          <EmptyTitle>Hi Jordan</EmptyTitle>
+          <EmptyDescription>Ask me anything about your report.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent class="max-w-none">
+          <For each={[
+            'What does being a Catalyst mean for how I work with others?',
+            'How do my Dominance and Influence styles play off each other?',
+            'Where might my lower Conscientiousness trip me up?',
+          ]}>
+            {(s) => <PromptSuggestion block>{s}</PromptSuggestion>}
+          </For>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><MessageCircleQuestion /></EmptyMedia>
+    <EmptyTitle>Hi Jordan</EmptyTitle>
+    <EmptyDescription>Ask me anything about your report.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent class="max-w-none">
+    <For each={prompts}>{(s) => <PromptSuggestion block>{s}</PromptSuggestion>}</For>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** Suggestions organized into labeled groups (mirrors the Prompt Input
+ *  Variants → WithSuggestions pattern), inside an empty block. */
+export const GroupedSuggestions: Story = {
+  name: 'Suggestions — Grouped',
+  render: () => {
+    const groups = [
+      { label: 'Get started', items: ['Summarize this document', 'What are the key takeaways?'] },
+      { label: 'Go deeper', items: ['Compare with similar approaches', 'What are the tradeoffs?'] },
+    ];
+    return (
+      <div class="w-[460px]">
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><FileText /></EmptyMedia>
+            <EmptyTitle>Ask about this document</EmptyTitle>
+            <EmptyDescription>Choose a starting point.</EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent class="max-w-none gap-4">
+            <For each={groups}>
+              {(group) => (
+                <div class="w-full space-y-2 text-center">
+                  <span class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    {group.label}
+                  </span>
+                  <div class="flex flex-wrap justify-center gap-2">
+                    <For each={group.items}>{(item) => <PromptSuggestion>{item}</PromptSuggestion>}</For>
+                  </div>
+                </div>
+              )}
+            </For>
+          </EmptyContent>
+        </Empty>
+      </div>
+    );
+  },
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FileText /></EmptyMedia>
+    <EmptyTitle>Ask about this document</EmptyTitle>
+    <EmptyDescription>Choose a starting point.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent class="max-w-none gap-4">
+    <For each={groups}>{(group) => (/* label + wrapped PromptSuggestions */)}</For>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** An empty block whose content is an input — the "blank chat" launch state. */
+export const WithInput: Story = {
+  name: 'With Prompt Input',
+  render: () => {
+    const [value, setValue] = createSignal('');
+    return (
+      <div class="w-[460px]">
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><Sparkles /></EmptyMedia>
+            <EmptyTitle>How can I help?</EmptyTitle>
+            <EmptyDescription>Ask anything to get started.</EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')} class="w-full">
+              <PromptInputTextarea placeholder="Ask anything..." class="min-h-[44px] px-3 pt-2.5" />
+              <PromptInputActions class="justify-end px-2 pb-2">
+                <Button size="icon-sm" class="rounded-full" disabled={!value().trim()}>
+                  <ArrowUp class="size-4" />
+                </Button>
+              </PromptInputActions>
+            </PromptInput>
+          </EmptyContent>
+        </Empty>
+      </div>
+    );
+  },
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Sparkles /></EmptyMedia>
+    <EmptyTitle>How can I help?</EmptyTitle>
+    <EmptyDescription>Ask anything to get started.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+      <PromptInputTextarea placeholder="Ask anything..." />
+      <PromptInputActions class="justify-end">
+        <Button size="icon-sm" disabled={!value().trim()}><ArrowUp class="size-4" /></Button>
+      </PromptInputActions>
+    </PromptInput>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** A description can carry a link; styled underline + primary-on-hover. */
+export const WithLink: Story = {
+  name: 'With Link in Description',
+  render: () => (
+    <div class="w-[420px]">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><Search /></EmptyMedia>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            Try a different search, or <a href="#">browse all items</a> instead.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button variant="outline">Clear filters</Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><Search /></EmptyMedia>
+    <EmptyTitle>No results found</EmptyTitle>
+    <EmptyDescription>
+      Try a different search, or <a href="#">browse all items</a> instead.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button variant="outline">Clear filters</Button>
+  </EmptyContent>
+</Empty>`),
+};
+
+/** A bordered (dashed) card treatment — add `border border-dashed` via class. */
+export const Bordered: Story = {
+  render: () => (
+    <div class="w-[420px]">
+      <Empty class="border border-dashed">
+        <EmptyHeader>
+          <EmptyMedia variant="icon"><FolderPlus /></EmptyMedia>
+          <EmptyTitle>Drop files here</EmptyTitle>
+          <EmptyDescription>Or click to browse from your computer.</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button variant="outline"><Upload class="size-4" /> Choose files</Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  ),
+  ...src(`<Empty class="border border-dashed">
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderPlus /></EmptyMedia>
+    <EmptyTitle>Drop files here</EmptyTitle>
+    <EmptyDescription>Or click to browse from your computer.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button variant="outline"><Upload class="size-4" /> Choose files</Button>
+  </EmptyContent>
+</Empty>`),
+};