@kitnai/chat 0.3.1 → 0.5.0

package/src/stories/pattern-docked-widget.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import {
+  ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
+  Message, MessageAvatar, MessageContent,
+  PromptInput, PromptInputTextarea, PromptInputActions, Button,
+} from '../index';
+import { ArrowUp, X } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Patterns/Docked Widget',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A support-assistant widget docked to the bottom-right corner of a host page. The same building blocks (`ChatContainer` + `Message` + `PromptInput`) shrink into a compact floating card — the kit\'s Shadow-DOM isolation means it can sit over any app without CSS bleed.',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+export const SupportAssistant: Story = {
+  render: () => {
+    const [input, setInput] = createSignal('');
+    return (
+      <ChatConfig proseSize="sm">
+        {/* Faux host page */}
+        <div style={{ width: '920px', height: '680px' }} class="relative overflow-hidden rounded-xl border border-border bg-gradient-to-br from-muted/40 to-background">
+          <div class="space-y-3 p-8">
+            <div class="h-7 w-48 rounded-md bg-muted" />
+            <div class="h-4 w-2/3 rounded bg-muted/70" />
+            <div class="h-4 w-1/2 rounded bg-muted/70" />
+            <div class="mt-6 grid grid-cols-3 gap-4">
+              <div class="h-28 rounded-lg bg-muted/60" />
+              <div class="h-28 rounded-lg bg-muted/60" />
+              <div class="h-28 rounded-lg bg-muted/60" />
+            </div>
+          </div>
+
+          {/* Docked chat widget */}
+          <div style={{ width: '360px', height: '460px' }} class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl">
+            <header class="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
+              <div class="flex items-center gap-2">
+                <span class="size-2 rounded-full bg-tool-green" />
+                <span class="text-sm font-semibold text-foreground">Support</span>
+              </div>
+              <Button variant="ghost" size="icon-sm" aria-label="Close"><X class="size-4" /></Button>
+            </header>
+
+            <div class="relative flex-1 overflow-y-auto">
+              <ChatContainer class="h-full">
+                <ChatContainerContent class="space-y-3 px-3 py-3">
+                  <Message>
+                    <MessageAvatar src="" alt="AI" fallback="AI" />
+                    <MessageContent markdown class="bg-transparent p-0 pt-1">
+                      Hi! 👋 How can I help you today?
+                    </MessageContent>
+                  </Message>
+                  <Message class="flex-col items-end">
+                    <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
+                      How do I reset my password?
+                    </MessageContent>
+                  </Message>
+                  <Message>
+                    <MessageAvatar src="" alt="AI" fallback="AI" />
+                    <MessageContent markdown class="bg-transparent p-0 pt-1">
+                      Head to **Settings → Security** and click **Reset password** — you'll get an email link.
+                    </MessageContent>
+                  </Message>
+                  <ChatContainerScrollAnchor />
+                </ChatContainerContent>
+              </ChatContainer>
+            </div>
+
+            <div class="shrink-0 px-3 pb-3">
+              <PromptInput value={input()} onValueChange={setInput} onSubmit={() => setInput('')}>
+                <PromptInputTextarea placeholder="Message support…" class="min-h-[40px] pt-2.5 pl-3.5" />
+                <PromptInputActions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
+                  <Button size="icon-sm" class="rounded-full" disabled={!input().trim()}>
+                    <ArrowUp class="size-4" />
+                  </Button>
+                </PromptInputActions>
+              </PromptInput>
+            </div>
+          </div>
+        </div>
+      </ChatConfig>
+    );
+  },
+};

package/src/stories/pattern-empty-state.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import {
+  ChatConfig, Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+  PromptSuggestion, PromptInput, PromptInputTextarea, PromptInputActions, Button,
+} from '../index';
+import { Sparkles, Plus, Globe, ArrowUp } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Patterns/Empty State',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The new-chat zero state: a centered greeting with starter suggestions above the composer. Composed from `Empty` (+ `EmptyMedia`/`EmptyTitle`/`EmptyDescription`), `PromptSuggestion` chips, and `PromptInput`. Clicking a suggestion fills the composer.',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+const SUGGESTIONS = [
+  'Summarize a document',
+  'Draft a product update',
+  'Explain a code snippet',
+  'Plan my week',
+];
+
+export const NewChat: Story = {
+  render: () => {
+    const [input, setInput] = createSignal('');
+    return (
+      <ChatConfig proseSize="base">
+        <div style={{ width: '760px', height: '640px' }} class="flex flex-col overflow-hidden rounded-xl border border-border bg-background">
+          <Empty class="flex-1">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Sparkles class="size-6" />
+              </EmptyMedia>
+              <EmptyTitle>How can I help today?</EmptyTitle>
+              <EmptyDescription>
+                Ask anything, or start from one of these.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <div class="flex max-w-md flex-wrap justify-center gap-2">
+                {SUGGESTIONS.map((s) => (
+                  <PromptSuggestion onClick={() => setInput(s)}>{s}</PromptSuggestion>
+                ))}
+              </div>
+            </EmptyContent>
+          </Empty>
+
+          <div class="shrink-0 px-4 pb-4">
+            <div class="mx-auto max-w-2xl">
+              <PromptInput value={input()} onValueChange={setInput} onSubmit={() => setInput('')}>
+                <PromptInputTextarea placeholder="Ask anything…" class="min-h-[44px] pt-3 pl-4" />
+                <PromptInputActions class="mt-2 flex w-full items-center justify-between gap-2 px-3 pb-3">
+                  <div class="flex items-center gap-2">
+                    <Button variant="outline" size="icon-sm" class="rounded-full"><Plus class="size-4" /></Button>
+                    <Button variant="outline" size="sm" class="rounded-full gap-1"><Globe class="size-4" />Search</Button>
+                  </div>
+                  <Button size="icon-sm" class="rounded-full" disabled={!input().trim()}>
+                    <ArrowUp class="size-4" />
+                  </Button>
+                </PromptInputActions>
+              </PromptInput>
+            </div>
+          </div>
+        </div>
+      </ChatConfig>
+    );
+  },
+};

package/src/stories/typography.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { For, createSignal, onMount } from 'solid-js';
+
+const meta = {
+  title: 'Theming/Typography',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+// The semantic type scale (defined in theme.css `@theme`). Each row is a token
+// that generates a Tailwind utility AND is an overridable CSS custom property.
+const SCALE = [
+  { token: '--text-caption', cls: 'text-caption', role: 'Micro labels, badges, sub-counts', used: 'token sub-totals · model provider · media-type subtitle' },
+  { token: '--text-meta', cls: 'text-meta', role: 'Controls, toggles, switchers, captions', used: 'reasoning / chain-of-thought triggers · model switcher · context · source' },
+  { token: '--text-body', cls: 'text-body', role: 'Primary reading text', used: 'messages · input · suggestions · markdown (also scales with the `proseSize` prop)' },
+  { token: '--text-title', cls: 'text-title', role: 'Emphasis / headers', used: 'section emphasis' },
+] as const;
+
+function TypographyScale() {
+  const [px, setPx] = createSignal<Record<string, string>>({});
+  onMount(() => {
+    const cs = getComputedStyle(document.documentElement);
+    const toPx = (rem: string) => {
+      const v = parseFloat(rem);
+      return rem.includes('rem') ? `${Math.round(v * 16)}px` : rem.trim();
+    };
+    setPx(Object.fromEntries(SCALE.map((s) => [s.token, toPx(cs.getPropertyValue(s.token))])));
+  });
+
+  return (
+    <div class="text-foreground max-w-3xl">
+      <h2 class="mb-1 text-lg font-semibold">Typography scale</h2>
+      <p class="text-muted-foreground mb-6 text-sm">
+        Defined once in <code class="text-code-foreground">theme.css</code>. Each token generates a Tailwind utility
+        (<code class="text-code-foreground">text-meta</code>, …). To restyle the kit's typography globally, override the
+        namespaced <code class="text-code-foreground">--kitn-text-*</code> token on <code class="text-code-foreground">:root</code> —
+        it pierces the Shadow&nbsp;DOM exactly like the <code class="text-code-foreground">--kitn-color-*</code> tokens. (The bare
+        <code class="text-code-foreground"> --text-*</code> names stay internal, so a host's own tokens can't collide.)
+      </p>
+
+      <div class="border-border divide-border divide-y rounded-xl border">
+        <For each={SCALE}>
+          {(s) => (
+            <div class="grid grid-cols-[170px_1fr] items-center gap-4 p-4">
+              <div class="min-w-0">
+                <div class="text-foreground font-mono text-xs">{s.token}</div>
+                <div class="text-muted-foreground mt-1 font-mono text-[11px]">{px()[s.token] ?? '…'}</div>
+                <div class="text-muted-foreground mt-2 text-xs">{s.role}</div>
+              </div>
+              <div class="min-w-0">
+                <div class={`${s.cls} text-foreground`}>The quick brown fox jumps over the lazy dog</div>
+                <div class="text-muted-foreground mt-1.5 text-[11px]">{s.used}</div>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+
+      <h3 class="mt-8 mb-2 text-sm font-semibold">Override example</h3>
+      <pre class="bg-muted text-foreground overflow-auto rounded-lg p-3 font-mono text-xs">{`:root {
+  --kitn-text-body: 0.9375rem;   /* bump the reading size to 15px */
+  --kitn-text-meta: 0.8125rem;   /* and the control size to 13px */
+}`}</pre>
+      <p class="text-muted-foreground mt-2 text-xs">
+        Reading text in messages / input / markdown additionally scales with the
+        <code class="text-code-foreground"> proseSize</code> prop (<code class="text-code-foreground">xs · sm · base · lg</code>);
+        these tokens cover the fixed chrome &amp; controls.
+      </p>
+    </div>
+  );
+}
+
+/** The kit's semantic type scale — defined in theme.css, used everywhere, overridable. */
+export const Typography: Story = {
+  render: () => <TypographyScale />,
+};

package/src/ui/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../utils/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

package/src/ui/collapsible.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+
+const meta = {
+  title: 'UI/Collapsible',
+  component: Collapsible,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A two-state disclosure that expands and collapses a region of content, animating height via a CSS `grid-template-rows` `0fr` → `1fr` transition (no JS measurement, no layout thrash). The trigger carries `aria-expanded`/`aria-controls` and the collapsed content is `inert`, so it is removed from tab order and the accessibility tree. Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).',
+          '**When to use:** to hide secondary detail behind a toggle — a reasoning/"chain of thought" panel, a tool-call payload, an expandable conversation group, an FAQ row.',
+          '**How to use:** wrap `CollapsibleTrigger` and `CollapsibleContent` in a `Collapsible`. The trigger renders a `<button>` by default; pass `as` to render a custom element.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  render: () => <CollapsibleDemo defaultOpen />,
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+function CollapsibleDemo(props: { defaultOpen?: boolean }) {
+  return (
+    <Collapsible defaultOpen={props.defaultOpen} class="w-80 rounded-lg border border-border">
+      <CollapsibleTrigger class="group flex w-full items-center justify-between px-3 py-2 text-sm font-medium text-foreground">
+        <span>Reasoning</span>
+        <svg
+          class="size-4 text-muted-foreground transition-transform duration-200 group-data-[expanded]:rotate-180"
+          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <p class="px-3 pb-3 text-sm text-muted-foreground">
+          First I parsed the request, then checked the available tools, and finally
+          composed the answer. This panel is removed from the tab order while collapsed.
+        </p>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/** Toggle the trigger to expand/collapse. The chevron rotates via the `data-expanded` attribute. */
+export const Playground: Story = {
+  ...src(`<Collapsible defaultOpen>
+  <CollapsibleTrigger>Reasoning</CollapsibleTrigger>
+  <CollapsibleContent>
+    <p>First I parsed the request, then checked the available tools…</p>
+  </CollapsibleContent>
+</Collapsible>`),
+};
+
+/** Starts collapsed. */
+export const InitiallyClosed: Story = {
+  render: () => <CollapsibleDemo />,
+  ...src(`<Collapsible>
+  <CollapsibleTrigger>Reasoning</CollapsibleTrigger>
+  <CollapsibleContent>…</CollapsibleContent>
+</Collapsible>`),
+};

package/src/ui/collapsible.tsx

@@ -1,14 +1,125 @@
-import { Collapsible as KCollapsible } from '@kobalte/core/collapsible';
-import { type JSX } from 'solid-js';
+import {
+  createContext,
+  useContext,
+  createSignal,
+  createUniqueId,
+  splitProps,
+  type JSX,
+  type Accessor,
+} from 'solid-js';
 import { cn } from '../utils/cn';
 
-export const Collapsible = KCollapsible;
-export const CollapsibleTrigger = KCollapsible.Trigger;
+// Extend SolidJS JSX to allow `bool:inert` (forces setAttribute so jsdom reflects it as an attribute).
+declare module 'solid-js' {
+  namespace JSX {
+    interface ExplicitBoolAttributes {
+      inert: boolean;
+    }
+  }
+}
+
+interface CollapsibleCtx {
+  open: Accessor<boolean>;
+  toggle: () => void;
+  contentId: string;
+}
+
+const Ctx = createContext<CollapsibleCtx>();
+
+const useCollapsible = () => {
+  const c = useContext(Ctx);
+  if (!c) throw new Error('Collapsible parts must be used within <Collapsible>');
+  return c;
+};
+
+export function Collapsible(props: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: JSX.Element;
+  class?: string;
+}) {
+  const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'children', 'class']);
+  const [uncontrolled, setUncontrolled] = createSignal(local.defaultOpen ?? false);
+  const isControlled = () => local.open !== undefined;
+  const open = () => (isControlled() ? !!local.open : uncontrolled());
+  const toggle = () => {
+    const next = !open();
+    if (!isControlled()) setUncontrolled(next);
+    local.onOpenChange?.(next);
+  };
+  const contentId = createUniqueId();
+  return (
+    <Ctx.Provider value={{ open, toggle, contentId }}>
+      <div
+        class={local.class}
+        {...rest}
+        data-expanded={open() ? '' : undefined}
+        data-closed={open() ? undefined : ''}
+        data-state={open() ? 'open' : 'closed'}
+      >
+        {local.children}
+      </div>
+    </Ctx.Provider>
+  );
+}
+
+export function CollapsibleTrigger(props: {
+  children?: JSX.Element;
+  class?: string;
+  as?: (props: Record<string, any>) => JSX.Element;
+  onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+  [k: string]: any;
+}) {
+  const ctx = useCollapsible();
+  const [local, rest] = splitProps(props, ['children', 'class', 'as', 'onClick']);
+
+  const triggerProps = () => ({
+    type: 'button' as const,
+    'aria-expanded': ctx.open(),
+    'aria-controls': ctx.contentId,
+    'data-expanded': ctx.open() ? '' : undefined,
+    'data-closed': ctx.open() ? undefined : '',
+    'data-state': ctx.open() ? 'open' : 'closed',
+    onClick: (e: MouseEvent) => {
+      if (typeof local.onClick === 'function') {
+        (local.onClick as (e: MouseEvent) => void)(e);
+      }
+      ctx.toggle();
+    },
+    class: local.class,
+    ...rest,
+  });
+
+  return (
+    <>
+      {local.as
+        ? local.as(triggerProps() as any)
+        : (
+          <button {...triggerProps()}>
+            {local.children}
+          </button>
+        )}
+    </>
+  );
+}
 
-export function CollapsibleContent(props: { children: JSX.Element; class?: string }) {
+export function CollapsibleContent(props: { children?: JSX.Element; class?: string; [k: string]: any }) {
+  const ctx = useCollapsible();
+  const [local, rest] = splitProps(props, ['children', 'class']);
   return (
-    <KCollapsible.Content class={cn('overflow-hidden', props.class)}>
-      {props.children}
-    </KCollapsible.Content>
+    <div
+      {...rest}
+      id={ctx.contentId}
+      data-expanded={ctx.open() ? '' : undefined}
+      data-closed={ctx.open() ? undefined : ''}
+      class={cn(
+        'grid transition-[grid-template-rows] duration-200 ease-out',
+        ctx.open() ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+      )}
+      bool:inert={!ctx.open()}
+    >
+      <div class={cn('overflow-hidden', local.class)}>{local.children}</div>
+    </div>
   );
 }

package/src/ui/dropdown.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from './dropdown';
+import { buttonVariants } from './button';
+
+const meta = {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'An accessible menu that opens from a trigger, built on the kit\'s DIY overlay core (no third-party dependency). Implements the WAI-ARIA menu-button pattern: `aria-haspopup`/`aria-expanded` wiring, roving focus with Arrow/Home/End, type-ahead, Escape/outside-click dismissal, and focus return to the trigger. Portals into the active shadow root and resolves focus through `getRootNode()` so roving focus works inside web components.',
+          '**When to use:** for a list of *actions* or single-choice options triggered by a button — overflow "⋯" menus, model pickers, scope selectors. For hover-only context use `HoverCard`; for a label use `Tooltip`.',
+          '**How to use:** compose `Dropdown` › `DropdownTrigger` (the button) + `DropdownContent` › one `DropdownItem` per action. Give each item an `onSelect` handler — selecting also closes the menu.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  render: () => <DropdownDemo />,
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+function DropdownDemo() {
+  const [last, setLast] = createSignal<string>();
+  return (
+    <div class="space-y-3">
+      <Dropdown>
+        <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem onSelect={() => setLast('Rename')}>Rename</DropdownItem>
+          <DropdownItem onSelect={() => setLast('Duplicate')}>Duplicate</DropdownItem>
+          <DropdownItem onSelect={() => setLast('Archive')}>Archive</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+      <p class="text-xs text-muted-foreground">Last selected: {last() ?? '—'}</p>
+    </div>
+  );
+}
+
+/** Click the trigger (or focus it and press ↓ / Enter) to open the menu; Arrow keys move, Escape closes. */
+export const Playground: Story = {
+  ...src(`<Dropdown>
+  <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
+  <DropdownContent>
+    <DropdownItem onSelect={() => rename()}>Rename</DropdownItem>
+    <DropdownItem onSelect={() => duplicate()}>Duplicate</DropdownItem>
+    <DropdownItem onSelect={() => archive()}>Archive</DropdownItem>
+  </DropdownContent>
+</Dropdown>`),
+};