@kitnai/chat 0.1.0

package/src/components/context.tsx

@@ -0,0 +1,323 @@
+import { type JSX, Show, createContext, createMemo, splitProps, useContext } from 'solid-js';
+import { HoverCard as KHoverCard } from '@kobalte/core/hover-card';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { useChatConfig } from '../primitives/chat-config';
+
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+const PERCENT_MAX = 100;
+
+interface ContextSchema {
+  usedTokens: number;
+  maxTokens: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  reasoningTokens?: number;
+  cacheTokens?: number;
+  estimatedCost?: number;
+}
+
+const ContextCtx = createContext<ContextSchema>();
+
+function useContextValue(): ContextSchema {
+  const ctx = useContext(ContextCtx);
+  if (!ctx) {
+    throw new Error('Context components must be used within Context');
+  }
+  return ctx;
+}
+
+const fmtCompact = new Intl.NumberFormat('en-US', { notation: 'compact' });
+const fmtPercent = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1, style: 'percent' });
+const fmtCurrency = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+// --- Root provider ---
+
+export interface ContextProps {
+  usedTokens: number;
+  maxTokens: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  reasoningTokens?: number;
+  cacheTokens?: number;
+  estimatedCost?: number;
+  children?: JSX.Element;
+}
+
+export function Context(props: ContextProps) {
+  const value = createMemo<ContextSchema>(() => ({
+    usedTokens: props.usedTokens,
+    maxTokens: props.maxTokens,
+    inputTokens: props.inputTokens,
+    outputTokens: props.outputTokens,
+    reasoningTokens: props.reasoningTokens,
+    cacheTokens: props.cacheTokens,
+    estimatedCost: props.estimatedCost,
+  }));
+
+  return (
+    <ContextCtx.Provider value={value()}>
+      <KHoverCard openDelay={0} closeDelay={0}>
+        {props.children}
+      </KHoverCard>
+    </ContextCtx.Provider>
+  );
+}
+
+// --- Icon (internal) ---
+
+function ContextIcon() {
+  const ctx = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = createMemo(() => ctx.usedTokens / ctx.maxTokens);
+  const dashOffset = createMemo(() => circumference * (1 - usedPercent()));
+
+  return (
+    <svg
+      aria-label="Model context usage"
+      height="20"
+      role="img"
+      style={{ color: 'currentcolor' }}
+      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
+      width="20"
+    >
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.25"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        stroke-width={ICON_STROKE_WIDTH}
+      />
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.7"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        stroke-dasharray={`${circumference} ${circumference}`}
+        stroke-dashoffset={dashOffset()}
+        stroke-linecap="round"
+        stroke-width={ICON_STROKE_WIDTH}
+        style={{ transform: 'rotate(-90deg)', 'transform-origin': 'center' }}
+      />
+    </svg>
+  );
+}
+
+// --- Trigger ---
+
+export interface ContextTriggerProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function ContextTrigger(props: ContextTriggerProps) {
+  const ctx = useContextValue();
+  const usedPercent = createMemo(() => ctx.usedTokens / ctx.maxTokens);
+  const renderedPercent = createMemo(() => fmtPercent.format(usedPercent()));
+
+  return (
+    <KHoverCard.Trigger as="span">
+      <Show
+        when={!props.children}
+        fallback={props.children}
+      >
+        <Button type="button" variant="ghost" class={props.class}>
+          <span class="font-medium text-muted-foreground">{renderedPercent()}</span>
+          <ContextIcon />
+        </Button>
+      </Show>
+    </KHoverCard.Trigger>
+  );
+}
+
+// --- Content ---
+
+export interface ContextContentProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function ContextContent(props: ContextContentProps) {
+  const config = useChatConfig();
+  return (
+    <KHoverCard.Portal mount={config.portalMount()}>
+      <KHoverCard.Content
+        class={cn(
+          'z-50 min-w-60 divide-y divide-border overflow-hidden rounded-lg bg-card shadow-lg animate-in fade-in-0 zoom-in-95',
+          props.class
+        )}
+      >
+        {props.children}
+      </KHoverCard.Content>
+    </KHoverCard.Portal>
+  );
+}
+
+// --- Content Header ---
+
+export interface ContextContentHeaderProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function ContextContentHeader(props: ContextContentHeaderProps) {
+  const ctx = useContextValue();
+  const usedPercent = createMemo(() => ctx.usedTokens / ctx.maxTokens);
+  const displayPct = createMemo(() => fmtPercent.format(usedPercent()));
+  const used = createMemo(() => fmtCompact.format(ctx.usedTokens));
+  const total = createMemo(() => fmtCompact.format(ctx.maxTokens));
+  const barWidth = createMemo(() => `${Math.min(usedPercent() * PERCENT_MAX, PERCENT_MAX)}%`);
+
+  const colorClass = createMemo(() => {
+    const pct = usedPercent() * PERCENT_MAX;
+    if (pct > 90) return 'bg-red-400';
+    if (pct > 70) return 'bg-yellow-400';
+    return 'bg-primary';
+  });
+
+  return (
+    <div class={cn('w-full space-y-2 p-3', props.class)}>
+      <Show when={!props.children} fallback={props.children}>
+        <div class="flex items-center justify-between gap-3 text-xs">
+          <p>{displayPct()}</p>
+          <p class="font-mono text-muted-foreground">
+            {used()} / {total()}
+          </p>
+        </div>
+        <div class="space-y-2">
+          <div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+            <div
+              class={cn('h-full rounded-full transition-all', colorClass())}
+              style={{ width: barWidth() }}
+            />
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+// --- Content Body ---
+
+export interface ContextContentBodyProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function ContextContentBody(props: ContextContentBodyProps) {
+  return (
+    <div class={cn('w-full p-3', props.class)}>
+      {props.children}
+    </div>
+  );
+}
+
+// --- Content Footer ---
+
+export interface ContextContentFooterProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function ContextContentFooter(props: ContextContentFooterProps) {
+  const ctx = useContextValue();
+  const totalCost = createMemo(() =>
+    fmtCurrency.format(ctx.estimatedCost ?? 0)
+  );
+
+  return (
+    <div
+      class={cn(
+        'flex w-full items-center justify-between gap-3 bg-muted p-3 text-xs',
+        props.class
+      )}
+    >
+      <Show when={!props.children} fallback={props.children}>
+        <span class="text-muted-foreground">Total cost</span>
+        <span>{totalCost()}</span>
+      </Show>
+    </div>
+  );
+}
+
+// --- Token row helper ---
+
+function TokensDisplay(props: { tokens?: number }) {
+  return (
+    <span>
+      {props.tokens === undefined
+        ? '\u2014'
+        : fmtCompact.format(props.tokens)}
+    </span>
+  );
+}
+
+// --- Specialized usage rows ---
+
+export interface ContextUsageRowProps {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export function ContextInputUsage(props: ContextUsageRowProps) {
+  const ctx = useContextValue();
+  return (
+    <Show when={props.children || ctx.inputTokens}>
+      <Show when={!props.children} fallback={props.children}>
+        <div class={cn('flex items-center justify-between text-xs', props.class)}>
+          <span class="text-muted-foreground">Input</span>
+          <TokensDisplay tokens={ctx.inputTokens} />
+        </div>
+      </Show>
+    </Show>
+  );
+}
+
+export function ContextOutputUsage(props: ContextUsageRowProps) {
+  const ctx = useContextValue();
+  return (
+    <Show when={props.children || ctx.outputTokens}>
+      <Show when={!props.children} fallback={props.children}>
+        <div class={cn('flex items-center justify-between text-xs', props.class)}>
+          <span class="text-muted-foreground">Output</span>
+          <TokensDisplay tokens={ctx.outputTokens} />
+        </div>
+      </Show>
+    </Show>
+  );
+}
+
+export function ContextReasoningUsage(props: ContextUsageRowProps) {
+  const ctx = useContextValue();
+  return (
+    <Show when={props.children || ctx.reasoningTokens}>
+      <Show when={!props.children} fallback={props.children}>
+        <div class={cn('flex items-center justify-between text-xs', props.class)}>
+          <span class="text-muted-foreground">Reasoning</span>
+          <TokensDisplay tokens={ctx.reasoningTokens} />
+        </div>
+      </Show>
+    </Show>
+  );
+}
+
+export function ContextCacheUsage(props: ContextUsageRowProps) {
+  const ctx = useContextValue();
+  return (
+    <Show when={props.children || ctx.cacheTokens}>
+      <Show when={!props.children} fallback={props.children}>
+        <div class={cn('flex items-center justify-between text-xs', props.class)}>
+          <span class="text-muted-foreground">Cache</span>
+          <TokensDisplay tokens={ctx.cacheTokens} />
+        </div>
+      </Show>
+    </Show>
+  );
+}

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

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { ConversationItem } from './conversation-item';
+
+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: 'Components/ConversationItem',
+  component: ConversationItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          '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.',
+        ].join('\n\n'),
+      },
+      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 '@kitnai/chat';`;
+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-item.tsx

@@ -0,0 +1,18 @@
+import { splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig, textClass } from '../primitives/chat-config';
+import type { ConversationSummary } from '../types';
+
+export interface ConversationItemProps { conversation: ConversationSummary; isActive: boolean; onSelect: (id: string) => void; class?: string; }
+
+export function ConversationItem(props: ConversationItemProps) {
+  const [local] = splitProps(props, ['conversation', 'isActive', 'onSelect', 'class']);
+  const config = useChatConfig();
+  return (
+    <button data-conversation-id={local.conversation.id} onClick={() => local.onSelect(local.conversation.id)}
+      class={cn('w-full text-left rounded-lg px-2.5 py-2 transition-colors', local.isActive ? 'bg-muted' : 'hover:bg-muted/50', local.class)}>
+      <div class={cn('truncate', textClass(config.proseSize()), local.isActive ? 'text-foreground font-medium' : 'text-muted-foreground')}>{local.conversation.title}</div>
+      <div class={cn('text-muted-foreground/60 truncate mt-0.5', config.proseSize() === 'lg' ? 'text-sm' : config.proseSize() === 'base' ? 'text-xs' : 'text-[11px]')}>{local.conversation.messageCount} messages</div>
+    </button>
+  );
+}

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

@@ -0,0 +1,134 @@
+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';
+
+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: 'Components/ConversationList',
+  component: ConversationList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          '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.',
+        ].join('\n\n'),
+      },
+      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 '@kitnai/chat';`;
+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),
+};