@kitnai/chat 0.1.0

package/src/stories/prompt-input-variants.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, For } from 'solid-js';
+import {
+  PromptInput, PromptInputTextarea, PromptInputActions,
+  PromptSuggestion, ModelSwitcher, Loader, Button,
+} from '../index';
+import type { ModelOption } from '../types';
+import { ArrowUp, Paperclip, Globe, Mic, Square, Sparkles } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Examples/Prompt Input Variants',
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const BasicInput: Story = {
+  name: 'Basic Input',
+  render: () => {
+    const [value, setValue] = createSignal('');
+    return (
+      <div class="w-full max-w-2xl p-4">
+        <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+          <PromptInputTextarea placeholder="Ask anything..." />
+          <PromptInputActions class="justify-end">
+            <Button variant="default" size="icon-sm" class="rounded-full" disabled={!value()}>
+              <ArrowUp class="size-4" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+};
+
+export const WithSuggestions: Story = {
+  name: 'With Suggestion Chips',
+  render: () => {
+    const [value, setValue] = createSignal('');
+
+    const suggestionGroups = [
+      {
+        label: 'Get started',
+        items: ['Summarize this document', 'What are the key takeaways?', 'Create an outline'],
+      },
+      {
+        label: 'Go deeper',
+        items: ['Compare with similar approaches', 'What are the tradeoffs?', 'Find contradictions'],
+      },
+    ];
+
+    return (
+      <div class="w-full max-w-2xl p-4 space-y-4">
+        <For each={suggestionGroups}>
+          {(group) => (
+            <div class="space-y-2">
+              <span class="text-xs font-medium text-muted-foreground uppercase tracking-wider">{group.label}</span>
+              <div class="flex flex-wrap gap-2">
+                <For each={group.items}>
+                  {(item) => (
+                    <PromptSuggestion onClick={() => setValue(item)}>
+                      {item}
+                    </PromptSuggestion>
+                  )}
+                </For>
+              </div>
+            </div>
+          )}
+        </For>
+
+        <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+          <PromptInputTextarea placeholder="Ask about this document..." />
+          <PromptInputActions class="justify-end">
+            <Button variant="default" size="icon-sm" class="rounded-full" disabled={!value()}>
+              <ArrowUp class="size-4" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+};
+
+export const WithActionButtons: Story = {
+  name: 'With Action Buttons',
+  render: () => {
+    const [value, setValue] = createSignal('');
+
+    return (
+      <div class="w-full max-w-2xl p-4">
+        <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+          <PromptInputTextarea placeholder="Message..." />
+          <PromptInputActions class="justify-between">
+            <div class="flex items-center gap-1">
+              <Button variant="ghost" size="icon-sm"><Paperclip class="size-4 text-muted-foreground" /></Button>
+              <Button variant="ghost" size="icon-sm"><Globe class="size-4 text-muted-foreground" /></Button>
+              <Button variant="ghost" size="icon-sm"><Mic class="size-4 text-muted-foreground" /></Button>
+              <Button variant="ghost" size="icon-sm"><Sparkles class="size-4 text-muted-foreground" /></Button>
+            </div>
+            <Button variant="default" size="icon-sm" class="rounded-full" disabled={!value()}>
+              <ArrowUp class="size-4" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+};
+
+export const StreamingState: Story = {
+  name: 'Streaming / Loading State',
+  render: () => (
+    <div class="w-full max-w-2xl p-4 space-y-6">
+      <div>
+        <p class="text-sm text-muted-foreground mb-2">Disabled while streaming (with stop button)</p>
+        <PromptInput disabled isLoading>
+          <PromptInputTextarea placeholder="Generating response..." />
+          <PromptInputActions class="justify-between">
+            <div class="flex items-center gap-2">
+              <Loader variant="typing" size="sm" />
+              <span class="text-xs text-muted-foreground">Generating...</span>
+            </div>
+            <Button variant="outline" size="icon-sm" class="rounded-full">
+              <Square class="size-3" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+
+      <div>
+        <p class="text-sm text-muted-foreground mb-2">Disabled while waiting for first token</p>
+        <PromptInput disabled isLoading>
+          <PromptInputTextarea placeholder="Waiting for response..." />
+          <PromptInputActions class="justify-between">
+            <div class="flex items-center gap-2">
+              <Loader variant="dots" size="sm" />
+              <span class="text-xs text-muted-foreground">Thinking...</span>
+            </div>
+            <Button variant="outline" size="icon-sm" class="rounded-full">
+              <Square class="size-3" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    </div>
+  ),
+};
+
+export const WithModelSelector: Story = {
+  name: 'With Model Selector',
+  render: () => {
+    const [value, setValue] = createSignal('');
+    const [modelId, setModelId] = createSignal('claude-4');
+
+    const models: ModelOption[] = [
+      { id: 'claude-4', name: 'Claude 4 Opus', provider: 'Anthropic' },
+      { id: 'claude-4-sonnet', name: 'Claude 4 Sonnet', provider: 'Anthropic' },
+      { id: 'gemini-2', name: 'Gemini 2.5 Pro', provider: 'Google' },
+    ];
+
+    return (
+      <div class="w-full max-w-2xl p-4">
+        <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
+          <PromptInputTextarea placeholder="Ask anything..." />
+          <PromptInputActions class="justify-between">
+            <ModelSwitcher models={models} currentModelId={modelId()} onModelChange={setModelId} />
+            <div class="flex items-center gap-1">
+              <Button variant="ghost" size="icon-sm"><Paperclip class="size-4 text-muted-foreground" /></Button>
+              <Button variant="default" size="icon-sm" class="rounded-full" disabled={!value()}>
+                <ArrowUp class="size-4" />
+              </Button>
+            </div>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+};

package/src/stories/streaming-response.stories.tsx

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, Show } from 'solid-js';
+import {
+  ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
+  Message, MessageAvatar, MessageContent, MessageActions,
+  PromptInput, PromptInputTextarea, PromptInputActions,
+  ResponseStream, Loader, TextShimmer, Button, Separator,
+} from '../index';
+import { Square, ArrowUp } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Examples/Streaming Response',
+};
+
+export default meta;
+type Story = StoryObj;
+
+const streamedText = `**Server-Sent Events (SSE)** are a lightweight alternative to WebSockets for one-way server-to-client streaming.
+
+### How SSE Works
+
+The server sends a continuous stream of text data over a single HTTP connection. The browser's \`EventSource\` API handles reconnection automatically.
+
+\`\`\`typescript
+// Server (Node.js/Express)
+app.get('/stream', (req, res) => {
+  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Connection', 'keep-alive');
+
+  const interval = setInterval(() => {
+    res.write(\`data: \${JSON.stringify({ time: Date.now() })}\\n\\n\`);
+  }, 1000);
+
+  req.on('close', () => clearInterval(interval));
+});
+\`\`\`
+
+\`\`\`typescript
+// Client
+const source = new EventSource('/stream');
+source.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  console.log('Received:', data);
+};
+\`\`\`
+
+### SSE vs WebSocket
+
+| Feature | SSE | WebSocket |
+|---------|-----|-----------|
+| Direction | Server to client only | Bidirectional |
+| Protocol | HTTP | WS |
+| Reconnection | Automatic | Manual |
+| Binary data | No | Yes |
+
+Use SSE when you only need server push -- it's simpler to implement, works through proxies, and the browser handles reconnection for you.`;
+
+export const TypewriterStream: Story = {
+  name: 'Typewriter Streaming',
+  render: () => {
+    const [isStreaming, setIsStreaming] = createSignal(false);
+
+    const startStream = () => {
+      setIsStreaming(true);
+    };
+
+    return (
+      <div class="flex flex-col h-[600px] w-full max-w-2xl bg-background rounded-xl shadow-lg overflow-hidden">
+        <div class="flex items-center px-4 py-3">
+          <h2 class="text-sm font-semibold text-foreground">Streaming Demo</h2>
+        </div>
+        <Separator />
+
+        <ChatContainer class="flex-1 p-4">
+          <ChatContainerContent class="space-y-6 py-4">
+            <Message>
+              <MessageAvatar src="" fallback="U" alt="User" />
+              <MessageContent>
+                Explain Server-Sent Events and when to use them over WebSockets.
+              </MessageContent>
+            </Message>
+
+            <Show when={isStreaming()}>
+              <Message>
+                <MessageAvatar src="" fallback="AI" alt="Assistant" />
+                <div class="flex-1 rounded-lg p-2 bg-secondary">
+                  <ResponseStream
+                    textStream={streamedText}
+                    mode="typewriter"
+                    speed={40}
+                    onComplete={() => setIsStreaming(false)}
+                    class="prose dark:prose-invert prose-sm max-w-none"
+                  />
+                </div>
+              </Message>
+            </Show>
+
+            <ChatContainerScrollAnchor />
+          </ChatContainerContent>
+        </ChatContainer>
+
+        <div class="px-4 pb-4">
+          <Show
+            when={isStreaming()}
+            fallback={
+              <PromptInput onSubmit={startStream}>
+                <PromptInputTextarea placeholder="Click send to start streaming..." />
+                <PromptInputActions class="justify-end">
+                  <Button variant="default" size="icon-sm" class="rounded-full" onClick={startStream}>
+                    <ArrowUp class="size-4" />
+                  </Button>
+                </PromptInputActions>
+              </PromptInput>
+            }
+          >
+            <PromptInput disabled isLoading>
+              <PromptInputTextarea placeholder="Generating..." />
+              <PromptInputActions class="justify-between">
+                <div class="flex items-center gap-2">
+                  <Loader variant="typing" size="sm" />
+                  <span class="text-xs text-muted-foreground">Streaming response...</span>
+                </div>
+                <Button variant="outline" size="icon-sm" class="rounded-full" onClick={() => setIsStreaming(false)}>
+                  <Square class="size-3" />
+                </Button>
+              </PromptInputActions>
+            </PromptInput>
+          </Show>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WaitingForFirstToken: Story = {
+  name: 'Waiting for First Token',
+  render: () => (
+    <div class="flex flex-col h-[400px] w-full max-w-2xl bg-background rounded-xl shadow-lg overflow-hidden">
+      <div class="flex items-center px-4 py-3">
+        <h2 class="text-sm font-semibold text-foreground">Processing Query</h2>
+      </div>
+      <Separator />
+
+      <ChatContainer class="flex-1 p-4">
+        <ChatContainerContent class="space-y-6 py-4">
+          <Message>
+            <MessageAvatar src="" fallback="U" alt="User" />
+            <MessageContent>
+              Analyze the performance characteristics of B-tree vs LSM-tree storage engines for write-heavy workloads.
+            </MessageContent>
+          </Message>
+
+          <Message>
+            <MessageAvatar src="" fallback="AI" alt="Assistant" />
+            <div class="flex-1 flex items-center gap-3 rounded-lg p-3 bg-secondary">
+              <Loader variant="dots" size="sm" />
+              <TextShimmer class="text-sm">Thinking...</TextShimmer>
+            </div>
+          </Message>
+
+          <ChatContainerScrollAnchor />
+        </ChatContainerContent>
+      </ChatContainer>
+
+      <div class="px-4 pb-4">
+        <PromptInput disabled isLoading>
+          <PromptInputTextarea placeholder="Waiting..." />
+          <PromptInputActions class="justify-between">
+            <span class="text-xs text-muted-foreground">Waiting for response...</span>
+            <Button variant="outline" size="icon-sm" class="rounded-full">
+              <Square class="size-3" />
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    </div>
+  ),
+};
+
+export const FadeStream: Story = {
+  name: 'Fade-in Streaming',
+  render: () => {
+    const [isStreaming, setIsStreaming] = createSignal(false);
+
+    const startStream = () => {
+      setIsStreaming(true);
+    };
+
+    const shortText = `The **event loop** in JavaScript processes tasks in phases:
+
+1. **Microtasks** (Promise callbacks, queueMicrotask) run first
+2. **Macrotasks** (setTimeout, setInterval, I/O) run one per iteration
+3. **Render steps** (requestAnimationFrame, layout, paint) happen between macrotasks
+
+This is why \`Promise.resolve().then()\` always runs before \`setTimeout(cb, 0)\`.`;
+
+    const [showMessage, setShowMessage] = createSignal(false);
+
+    const handleStart = () => {
+      setShowMessage(false);
+      // Reset then show to remount the component
+      setTimeout(() => {
+        setShowMessage(true);
+        setIsStreaming(true);
+      }, 50);
+    };
+
+    return (
+      <div class="w-full max-w-2xl p-4 space-y-4">
+        <p class="text-sm text-muted-foreground">Words fade in instead of appearing character by character.</p>
+
+        <Show when={showMessage()}>
+          <Message>
+            <MessageAvatar src="" fallback="AI" alt="Assistant" />
+            <div class="flex-1 rounded-lg p-2 bg-secondary">
+              <ResponseStream
+                textStream={shortText}
+                mode="fade"
+                speed={30}
+                onComplete={() => setIsStreaming(false)}
+                class="prose dark:prose-invert prose-sm max-w-none"
+              />
+            </div>
+          </Message>
+        </Show>
+
+        <Button onClick={handleStart} disabled={isStreaming()}>
+          {isStreaming() ? 'Streaming...' : 'Start Fade Stream'}
+        </Button>
+      </div>
+    );
+  },
+};

package/src/stories/theme-editor.stories.tsx

@@ -0,0 +1,16 @@
+// src/stories/theme-editor.stories.tsx
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { ThemeEditor } from './docs/theme-editor/theme-editor';
+
+const meta = {
+  title: 'Theming/Editor',
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** Full-screen live theme editor. */
+export const Editor: Story = {
+  render: () => <ThemeEditor />,
+};

package/src/stories/token-reference.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { TokenTable } from './docs/theme-tokens';
+
+// Renders in the Solid preview (unlike MDX, which is React) and is embedded
+// into the Theming docs page via <Canvas of={...}>.
+const meta = {
+  title: 'Theming/Token Reference',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** Auto-generated reference of every overridable token. */
+export const TokenReference: Story = {
+  render: () => <TokenTable />,
+  parameters: { docs: { source: { code: '/* override any of these on :root or a scoped parent */', language: 'css' } } },
+};

package/src/types.ts

@@ -0,0 +1,41 @@
+// Types the chat kit components reference. Extracted from the kit's origin
+// project (@tab-zen/shared) so the kit is self-contained. Only the types the
+// components actually import are kept; the RAG/document/adapter types are dropped.
+
+export interface ModelOption {
+  id: string;
+  name: string;
+  provider?: string;
+}
+
+export interface SearchFilters {
+  tags?: string[];
+  authors?: string[];
+  contentType?: 'transcript' | 'markdown';
+  dateRange?: { from: string; to: string };
+}
+
+export interface ConversationScope {
+  type: 'document' | 'collection';
+  documentId?: string;
+  filters?: SearchFilters;
+}
+
+export interface ConversationSummary {
+  id: string;
+  title: string;
+  groupId?: string;
+  scope: ConversationScope;
+  messageCount: number;
+  lastMessageAt: string;
+  updatedAt: string;
+}
+
+export interface ConversationGroup {
+  id: string;
+  userId?: string;
+  teamId?: string;
+  name: string;
+  sortOrder: number;
+  createdAt: string;
+}

package/src/ui/avatar.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Avatar } from './avatar';
+
+const meta = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A small, rounded **avatar** that renders an image when `src` is provided and falls back to short initials otherwise.',
+          '**When to use:** to identify the author of a message, a conversation participant, or the current user in a header or list.',
+          '**How to use:** always pass a `fallback` (1–2 initials) and a `size`. Provide `src`/`alt` when you have an image; if the image is missing or fails, the `fallback` text shows instead.',
+          '**Placement:** message rows (next to assistant/user content), conversation list items, account menus, and headers.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Image URL. When omitted, the `fallback` initials are shown.',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for the image. Defaults to `fallback` when not set.',
+    },
+    fallback: {
+      control: 'text',
+      description: 'Initials shown when there is no image (required).',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Avatar diameter preset.',
+      table: { defaultValue: { summary: 'md' } },
+    },
+  },
+  args: {
+    fallback: 'JD',
+    size: 'md',
+  },
+  render: (args) => <Avatar {...args} />,
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Avatar } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore image vs. fallback and sizes. */
+export const Playground: Story = {
+  ...src(`<Avatar fallback="JD" size="md" />`),
+};
+
+export const WithFallback: Story = {
+  args: { fallback: 'JD', size: 'md' },
+  ...src(`<Avatar fallback="JD" size="md" />`),
+};
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://api.dicebear.com/7.x/initials/svg?seed=JD',
+    alt: 'John Doe',
+    fallback: 'JD',
+  },
+  ...src(`<Avatar
+  src="https://api.dicebear.com/7.x/initials/svg?seed=JD"
+  alt="John Doe"
+  fallback="JD"
+/>`),
+};
+
+export const Small: Story = {
+  args: { size: 'sm', fallback: 'S' },
+  ...src(`<Avatar size="sm" fallback="S" />`),
+};
+
+export const Large: Story = {
+  args: { size: 'lg', fallback: 'LG' },
+  ...src(`<Avatar size="lg" fallback="LG" />`),
+};
+
+/** Every size side by side (showcase — not driven by controls). */
+export const AllSizes: Story = {
+  render: () => (
+    <div class="flex items-center gap-3">
+      <Avatar size="sm" fallback="SM" />
+      <Avatar size="md" fallback="MD" />
+      <Avatar size="lg" fallback="LG" />
+    </div>
+  ),
+  ...src(`<div class="flex items-center gap-3">
+  <Avatar size="sm" fallback="SM" />
+  <Avatar size="md" fallback="MD" />
+  <Avatar size="lg" fallback="LG" />
+</div>`),
+};

package/src/ui/avatar.tsx

@@ -0,0 +1,23 @@
+import { type JSX, splitProps, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  fallback: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = { sm: 'h-6 w-6 text-[10px]', md: 'h-8 w-8 text-xs', lg: 'h-10 w-10 text-sm' };
+
+export function Avatar(props: AvatarProps) {
+  const [local, rest] = splitProps(props, ['src', 'alt', 'fallback', 'size', 'class']);
+  const size = () => local.size ?? 'md';
+  return (
+    <div class={cn('inline-flex items-center justify-center rounded-md bg-accent font-semibold text-accent-foreground flex-shrink-0', sizeClasses[size()], local.class)} {...rest}>
+      <Show when={local.src} fallback={<span>{local.fallback}</span>}>
+        <img src={local.src} alt={local.alt ?? local.fallback} class="h-full w-full rounded-md object-cover" />
+      </Show>
+    </div>
+  );
+}