@kitnai/chat 0.1.0

package/src/components/code-block.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { CodeBlock, CodeBlockCode, CodeBlockGroup } from './code-block';
+import { Button } from '../ui/button';
+
+const tsCode = `interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}`;
+
+const pythonCode = `def fibonacci(n: int) -> list[int]:
+    """Generate fibonacci sequence up to n numbers."""
+    if n <= 0:
+        return []
+    sequence = [0, 1]
+    while len(sequence) < n:
+        sequence.append(sequence[-1] + sequence[-2])
+    return sequence[:n]
+
+print(fibonacci(10))`;
+
+const cssCode = `:root {
+  --primary: hsl(240 5.9% 10%);
+  --background: hsl(0 0% 100%);
+}
+
+.button {
+  background: var(--color-primary);
+  color: white;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+}`;
+
+/**
+ * Story for the compound `CodeBlock` family. The root `CodeBlock` is a bordered
+ * card container; `CodeBlockCode` does the (on-demand, Shiki) syntax
+ * highlighting; `CodeBlockGroup` is a flex header/footer row. The controllable
+ * props live on `CodeBlockCode`, so `Playground` drives that piece directly.
+ */
+const meta = {
+  title: 'Components/CodeBlock',
+  component: CodeBlockCode,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A bordered code card with optional syntax highlighting. `CodeBlock` is the container, `CodeBlockCode` renders the (Shiki-)highlighted source, and `CodeBlockGroup` is a flex row for a header/footer (filename + copy button).',
+          '**When to use:** to display code snippets in chat messages, documentation, or anywhere fenced code appears — typically emitted by the Markdown renderer for ``` blocks.',
+          '**How to use:** wrap one or more children in `<CodeBlock>`. Pass the source string and a `language` to `<CodeBlockCode>`; optionally override the `theme`. Add a `<CodeBlockGroup>` for a filename row and copy action.',
+          '**Placement:** inside assistant message content, README/docs panes, and tool-output views.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    code: {
+      control: 'text',
+      description: 'The source code string to render.',
+    },
+    language: {
+      control: 'text',
+      description: 'Language id for syntax highlighting (e.g. `typescript`, `python`, `css`).',
+      table: { defaultValue: { summary: 'tsx' } },
+    },
+    theme: {
+      control: 'text',
+      description: 'Shiki theme id. Falls back to the active ChatConfig `codeTheme`.',
+    },
+  },
+  args: {
+    code: tsCode,
+    language: 'typescript',
+  },
+  render: (args) => (
+    <div class="max-w-lg">
+      <CodeBlock>
+        <CodeBlockCode {...args} />
+      </CodeBlock>
+    </div>
+  ),
+} satisfies Meta<typeof CodeBlockCode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { CodeBlock, CodeBlockCode, CodeBlockGroup } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — edit the code, language, or theme via controls. */
+export const Playground: Story = {
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};
+
+export const TypeScript: Story = {
+  args: { code: tsCode, language: 'typescript' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};
+
+export const Python: Story = {
+  args: { code: pythonCode, language: 'python' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={pythonCode} language="python" />
+</CodeBlock>`),
+};
+
+export const CSS: Story = {
+  args: { code: cssCode, language: 'css' },
+  ...src(`<CodeBlock>
+  <CodeBlockCode code={cssCode} language="css" />
+</CodeBlock>`),
+};
+
+/** A header row (`CodeBlockGroup`) with a filename and a copy button — showcase. */
+export const WithHeader: Story = {
+  render: () => (
+    <div class="max-w-lg">
+      <CodeBlock>
+        <CodeBlockGroup class="border-b border-border px-4 py-2">
+          <span class="text-xs text-muted-foreground font-mono">user.ts</span>
+          <Button variant="ghost" size="icon-sm">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+            </svg>
+          </Button>
+        </CodeBlockGroup>
+        <CodeBlockCode code={tsCode} language="typescript" />
+      </CodeBlock>
+    </div>
+  ),
+  ...src(`<CodeBlock>
+  <CodeBlockGroup class="border-b border-border px-4 py-2">
+    <span class="text-xs text-muted-foreground font-mono">user.ts</span>
+    <Button variant="ghost" size="icon-sm">{/* copy icon */}</Button>
+  </CodeBlockGroup>
+  <CodeBlockCode code={tsCode} language="typescript" />
+</CodeBlock>`),
+};

package/src/components/code-block.tsx

@@ -0,0 +1,99 @@
+import { type JSX, splitProps, createResource, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+import { highlight, isCodeHighlightingEnabled } from '../primitives/highlighter';
+
+// --- CodeBlock (Root) ---
+
+export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children?: JSX.Element;
+}
+
+function CodeBlock(props: CodeBlockProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div
+      class={cn(
+        'not-prose flex w-full flex-col overflow-clip border',
+        'border-border bg-card text-card-foreground rounded-xl',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- CodeBlockCode ---
+
+export interface CodeBlockCodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  theme?: string;
+}
+
+function CodeBlockCode(props: CodeBlockCodeProps) {
+  const [local, rest] = splitProps(props, ['code', 'language', 'theme', 'class']);
+  const config = useChatConfig();
+
+  const lang = () => local.language ?? 'tsx';
+  const theme = () => local.theme ?? config.codeTheme();
+  const highlightingOn = () => isCodeHighlightingEnabled() && config.codeHighlight();
+
+  // When highlighting is off, the source is null so the fetcher never runs and
+  // no Shiki code is ever imported — the plain `<pre>` fallback renders instead.
+  const [highlighted] = createResource(
+    () => (highlightingOn() ? { code: local.code, lang: lang(), theme: theme() } : null),
+    (src) => highlight(src.code, src.lang, src.theme)
+  );
+
+  const codeTextSize = () => {
+    switch (config.proseSize()) {
+      case 'xs': return 'text-[11px]';
+      case 'sm': return 'text-[13px]';
+      case 'base': return 'text-sm';
+      case 'lg': return 'text-base';
+    }
+  };
+
+  const classNames = () =>
+    cn(
+      'w-full overflow-x-auto [&>pre]:px-4 [&>pre]:py-4',
+      codeTextSize(),
+      local.class
+    );
+
+  return (
+    <Show
+      when={highlighted()}
+      fallback={
+        <div class={classNames()} {...rest}>
+          <pre><code>{local.code}</code></pre>
+        </div>
+      }
+    >
+      <div class={classNames()} innerHTML={highlighted()} {...rest} />
+    </Show>
+  );
+}
+
+// --- CodeBlockGroup ---
+
+export interface CodeBlockGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children?: JSX.Element;
+}
+
+function CodeBlockGroup(props: CodeBlockGroupProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div
+      class={cn('flex items-center justify-between', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+export { CodeBlock, CodeBlockCode, CodeBlockGroup };

package/src/components/context.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import {
+  Context,
+  ContextTrigger,
+  ContextContent,
+  ContextContentHeader,
+  ContextContentBody,
+  ContextContentFooter,
+  ContextInputUsage,
+  ContextOutputUsage,
+  ContextReasoningUsage,
+  ContextCacheUsage,
+} from './context';
+
+/**
+ * Story for the compound `Context` family. `Context` is the root provider that
+ * holds the token-usage values; the trigger/content/usage-row subcomponents read
+ * from it. The controllable props all live on the `Context` root, so `Playground`
+ * drives the root and composes a full hover-card breakdown.
+ */
+const meta = {
+  title: 'Components/Context',
+  component: Context,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A model context-window usage indicator: a hover-card trigger showing the used-percent ring, with a popover breaking down token usage (input / output / reasoning / cache) and estimated cost.',
+          '**When to use:** to surface how much of a model\'s context window a conversation has consumed and roughly what it costs — near the prompt input or in a chat header.',
+          '**How to use:** wrap the composition in `<Context>` and pass `usedTokens` / `maxTokens` (plus optional `inputTokens`, `outputTokens`, `reasoningTokens`, `cacheTokens`, `estimatedCost`). Compose `ContextTrigger`, `ContextContent` (with `Header`/`Body`/`Footer`), and the usage rows.',
+          '**Placement:** chat toolbars, prompt-input action bars, and conversation headers.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    usedTokens: {
+      control: 'number',
+      description: 'Tokens consumed so far. Drives the ring fill and progress bar.',
+    },
+    maxTokens: {
+      control: 'number',
+      description: 'Total context window size.',
+    },
+    inputTokens: {
+      control: 'number',
+      description: 'Prompt/input tokens (shown by `ContextInputUsage`).',
+    },
+    outputTokens: {
+      control: 'number',
+      description: 'Generated/output tokens (shown by `ContextOutputUsage`).',
+    },
+    reasoningTokens: {
+      control: 'number',
+      description: 'Reasoning tokens (shown by `ContextReasoningUsage`).',
+    },
+    cacheTokens: {
+      control: 'number',
+      description: 'Cached tokens (shown by `ContextCacheUsage`).',
+    },
+    estimatedCost: {
+      control: 'number',
+      description: 'Estimated cost in USD (shown by `ContextContentFooter`).',
+    },
+  },
+  args: {
+    usedTokens: 85000,
+    maxTokens: 128000,
+    inputTokens: 60000,
+    outputTokens: 15000,
+    reasoningTokens: 8000,
+    cacheTokens: 2000,
+    estimatedCost: 0.45,
+  },
+  render: (args) => (
+    <Context {...args}>
+      <ContextTrigger />
+      <ContextContent>
+        <ContextContentHeader />
+        <ContextContentBody>
+          <div class="space-y-1">
+            <ContextInputUsage />
+            <ContextOutputUsage />
+            <ContextReasoningUsage />
+            <ContextCacheUsage />
+          </div>
+        </ContextContentBody>
+        <ContextContentFooter />
+      </ContextContent>
+    </Context>
+  ),
+} satisfies Meta<typeof Context>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  Context, ContextTrigger, ContextContent, ContextContentHeader,
+  ContextContentBody, ContextContentFooter,
+  ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextCacheUsage,
+} from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+const usage = `<Context usedTokens={85000} maxTokens={128000} inputTokens={60000} outputTokens={15000} reasoningTokens={8000} cacheTokens={2000} estimatedCost={0.45}>
+  <ContextTrigger />
+  <ContextContent>
+    <ContextContentHeader />
+    <ContextContentBody>
+      <div class="space-y-1">
+        <ContextInputUsage />
+        <ContextOutputUsage />
+        <ContextReasoningUsage />
+        <ContextCacheUsage />
+      </div>
+    </ContextContentBody>
+    <ContextContentFooter />
+  </ContextContent>
+</Context>`;
+
+/** Interactive playground — tweak token counts to watch the ring, bar color, and breakdown update. */
+export const Playground: Story = {
+  ...src(usage),
+};
+
+export const LowUsage: Story = {
+  args: {
+    usedTokens: 12000,
+    maxTokens: 128000,
+    inputTokens: 8000,
+    outputTokens: 4000,
+    reasoningTokens: undefined,
+    cacheTokens: undefined,
+    estimatedCost: 0.02,
+  },
+  ...src(usage),
+};
+
+export const MediumUsage: Story = {
+  args: {
+    usedTokens: 85000,
+    maxTokens: 128000,
+    inputTokens: 60000,
+    outputTokens: 15000,
+    reasoningTokens: 8000,
+    cacheTokens: 2000,
+    estimatedCost: 0.45,
+  },
+  ...src(usage),
+};
+
+export const HighUsage: Story = {
+  args: {
+    usedTokens: 122000,
+    maxTokens: 128000,
+    inputTokens: 90000,
+    outputTokens: 22000,
+    reasoningTokens: 10000,
+    cacheTokens: undefined,
+    estimatedCost: 1.85,
+  },
+  ...src(usage),
+};
+
+export const WithCost: Story = {
+  args: {
+    usedTokens: 50000,
+    maxTokens: 200000,
+    inputTokens: 35000,
+    outputTokens: 10000,
+    reasoningTokens: 5000,
+    cacheTokens: undefined,
+    estimatedCost: 0.32,
+  },
+  ...src(usage),
+};