@kitnai/chat 0.1.0

package/src/stories/docs/theme-editor/presets.ts

@@ -0,0 +1,64 @@
+import type { Palette } from './theme-css';
+
+export type Preset = { name: string; light: Palette; dark: Palette };
+export type BrandOverride = { light: Palette; dark: Palette };
+
+/** Per-preset brand-token overrides (light + dark). Neutrals come from the live base. */
+export const BRAND_OVERRIDES: Record<string, BrandOverride> = {
+  Violet: {
+    light: {
+      '--color-primary': 'hsl(262 83% 58%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(262 83% 58%)',
+      '--color-code-foreground': 'hsl(262 83% 58%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(263 70% 65%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(263 70% 65%)',
+      '--color-code-foreground': 'hsl(263 90% 80%)',
+    },
+  },
+  Emerald: {
+    light: {
+      '--color-primary': 'hsl(160 84% 39%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(160 84% 39%)',
+      '--color-code-foreground': 'hsl(160 84% 32%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(158 64% 52%)',
+      '--color-primary-foreground': 'hsl(160 30% 8%)',
+      '--color-ring': 'hsl(158 64% 52%)',
+      '--color-code-foreground': 'hsl(158 70% 65%)',
+    },
+  },
+  Mono: {
+    light: {
+      '--color-primary': 'hsl(0 0% 20%)',
+      '--color-primary-foreground': 'hsl(0 0% 98%)',
+      '--color-ring': 'hsl(0 0% 40%)',
+      '--color-code-foreground': 'hsl(0 0% 30%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(0 0% 92%)',
+      '--color-primary-foreground': 'hsl(0 0% 12%)',
+      '--color-ring': 'hsl(0 0% 70%)',
+      '--color-code-foreground': 'hsl(0 0% 75%)',
+    },
+  },
+};
+
+const ORDER = ['Default', 'Violet', 'Emerald', 'Mono'];
+
+/** Build full presets by layering brand overrides onto the live-discovered base palette. */
+export function buildPresets(base: { light: Palette; dark: Palette }): Preset[] {
+  return ORDER.map((name) => {
+    const ov = BRAND_OVERRIDES[name];
+    return {
+      name,
+      light: ov ? { ...base.light, ...ov.light } : { ...base.light },
+      dark: ov ? { ...base.dark, ...ov.dark } : { ...base.dark },
+    };
+  });
+}

package/src/stories/docs/theme-editor/theme-css.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { buildThemeCss } from './theme-css';
+
+describe('buildThemeCss', () => {
+  it('emits sorted :root and .dark blocks', () => {
+    const css = buildThemeCss(
+      { '--color-primary': '#ffffff', '--radius': '0.6rem' },
+      { '--color-primary': '#000000' },
+    );
+    expect(css).toBe(
+      ':root {\n  --color-primary: #ffffff;\n  --radius: 0.6rem;\n}\n\n.dark {\n  --color-primary: #000000;\n}',
+    );
+  });
+
+  it('keys are sorted within each block', () => {
+    const css = buildThemeCss({ '--b': '2', '--a': '1' }, {});
+    expect(css).toBe(':root {\n  --a: 1;\n  --b: 2;\n}\n\n.dark {\n\n}');
+  });
+});

package/src/stories/docs/theme-editor/theme-css.ts

@@ -0,0 +1,15 @@
+/** A map of CSS custom-property name → value, e.g. { '--color-primary': '#fff' }. */
+export type Palette = Record<string, string>;
+
+function block(selector: string, palette: Palette): string {
+  const body = Object.keys(palette)
+    .sort()
+    .map((k) => `  ${k}: ${palette[k]};`)
+    .join('\n');
+  return `${selector} {\n${body}\n}`;
+}
+
+/** Build a paste-ready theme override block: full light set on :root, dark set on .dark. */
+export function buildThemeCss(light: Palette, dark: Palette): string {
+  return `${block(':root', light)}\n\n${block('.dark', dark)}`;
+}

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

@@ -0,0 +1,145 @@
+// src/stories/docs/theme-editor/theme-editor.tsx
+import { createSignal, createEffect, onMount, onCleanup, For } from 'solid-js';
+import { Button } from '../../../ui/button';
+import { discoverPalettes } from '../theme-tokens';
+import { buildThemeCss, type Palette } from './theme-css';
+import { buildPresets, type Preset } from './presets';
+import { Inspector } from './inspector';
+import { Canvas, CANVAS_CLASS } from './canvas';
+
+const STYLE_ID = 'kitn-theme-editor-overrides';
+
+/** Full-screen live theme editor: edit light/dark tokens, preview a real chat, export CSS. */
+export function ThemeEditor() {
+  const [presets, setPresets] = createSignal<Preset[]>([]);
+  const [mode, setMode] = createSignal<'light' | 'dark'>('light');
+  const [light, setLight] = createSignal<Palette>({});
+  const [dark, setDark] = createSignal<Palette>({});
+  const [presetName, setPresetName] = createSignal('Default');
+  const [copied, setCopied] = createSignal(false);
+
+  onMount(() => {
+    const ps = buildPresets(discoverPalettes());
+    setPresets(ps);
+    const def = ps.find((p) => p.name === 'Default')!;
+    setLight({ ...def.light });
+    setDark({ ...def.dark });
+  });
+
+  // Apply the ACTIVE mode's palette directly onto the canvas wrapper. Scoping to
+  // CANVAS_CLASS (rather than :root/.dark) means the preview reflects the editor's
+  // mode independently of any ancestor `.dark` (e.g. Storybook's dark theme), and
+  // only the canvas reskins — not the editor chrome. Export (Copy CSS) still emits
+  // the full :root + .dark theme separately.
+  let styleEl: HTMLStyleElement | undefined;
+  createEffect(() => {
+    if (!Object.keys(light()).length) return; // not seeded yet
+    const colors: Palette = mode() === 'light' ? light() : dark();
+    const radius = light()['--radius'] ?? '0.6rem';
+    const colorBody = Object.keys(colors)
+      .filter((k) => k.startsWith('--color-'))
+      .sort()
+      .map((k) => `  ${k}: ${colors[k]};`)
+      .join('\n');
+    // Re-express the radius scale on the wrapper. The kit's --radius-sm/md/lg/xl are
+    // calc(var(--radius) …) declared at :root, so their var(--radius) resolves once
+    // at :root and inherits as a fixed length — overriding --radius lower in the tree
+    // doesn't move them. Re-declaring them here (against the wrapper's --radius) does.
+    const radiusBody = [
+      `  --radius: ${radius};`,
+      `  --radius-sm: calc(var(--radius) - 4px);`,
+      `  --radius-md: calc(var(--radius) - 2px);`,
+      `  --radius-lg: var(--radius);`,
+      `  --radius-xl: calc(var(--radius) + 4px);`,
+    ].join('\n');
+    // Re-establish the inherited `color` and native `color-scheme` on the wrapper:
+    // tokens alone don't fix text whose color is inherited from outside the canvas
+    // (e.g. elements with no explicit text-color class), nor native form controls.
+    const css = `.${CANVAS_CLASS} {\n${colorBody}\n${radiusBody}\n  color: var(--color-foreground);\n  color-scheme: ${mode()};\n}`;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = STYLE_ID;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = css;
+  });
+  onCleanup(() => styleEl?.remove());
+
+  const colorTokens = () => Object.keys(light()).filter((n) => n.startsWith('--color-')).sort();
+  const activeValues = () => (mode() === 'light' ? light() : dark());
+
+  const setColor = (token: string, hex: string) => {
+    if (mode() === 'light') setLight((v) => ({ ...v, [token]: hex }));
+    else setDark((v) => ({ ...v, [token]: hex }));
+  };
+  const setRadius = (rem: string) => setLight((v) => ({ ...v, '--radius': rem }));
+
+  const loadPreset = (name: string) => {
+    const p = presets().find((x) => x.name === name);
+    if (!p) return;
+    setLight({ ...p.light });
+    setDark({ ...p.dark });
+    setPresetName(name);
+  };
+  const reset = () => loadPreset('Default');
+
+  const copyCss = async () => {
+    try {
+      await navigator.clipboard.writeText(buildThemeCss(light(), dark()));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard blocked */
+    }
+  };
+
+  return (
+    <div class="h-screen w-full flex flex-col bg-background text-foreground">
+      {/* Top bar */}
+      <div class="flex items-center justify-between gap-3 border-b border-border px-4 h-12 shrink-0">
+        <div class="flex items-center gap-3">
+          <strong class="text-sm">Theme editor</strong>
+          <div class="flex rounded-md border border-border overflow-hidden text-xs">
+            <button class="px-2.5 py-1" classList={{ 'bg-secondary': mode() === 'light' }} onClick={() => setMode('light')}>
+              Light
+            </button>
+            <button class="px-2.5 py-1" classList={{ 'bg-secondary': mode() === 'dark' }} onClick={() => setMode('dark')}>
+              Dark
+            </button>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <select
+            class="bg-input border border-border rounded-md text-xs px-2 h-8"
+            value={presetName()}
+            onChange={(e) => loadPreset(e.currentTarget.value)}
+          >
+            <For each={presets()}>{(p) => <option value={p.name}>{p.name}</option>}</For>
+          </select>
+          <Button size="sm" variant="outline" onClick={copyCss}>
+            {copied() ? 'Copied!' : 'Copy CSS'}
+          </Button>
+          <Button size="sm" variant="outline" onClick={reset}>
+            Reset
+          </Button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div class="flex-1 flex min-h-0">
+        <div class="w-[300px] shrink-0 border-r border-border overflow-auto">
+          <Inspector
+            tokens={colorTokens()}
+            values={activeValues()}
+            radius={light()['--radius'] ?? '0.6rem'}
+            onColorChange={setColor}
+            onRadiusChange={setRadius}
+          />
+        </div>
+        <div class="flex-1 min-w-0 p-3">
+          <Canvas mode={mode()} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/stories/docs/theme-tokens.tsx

@@ -0,0 +1,174 @@
+import { createSignal, For, onMount, type JSX } from 'solid-js';
+import type { Palette } from './theme-editor/theme-css';
+
+// Docs-only helpers (not part of the kit's public API). They auto-discover the
+// kit's design tokens straight from the loaded CSS, so the reference + editor
+// can never drift from theme.css as tokens are added or changed.
+
+type ColorToken = { name: string; light: string; dark: string };
+type RadiusToken = { name: string; value: string };
+
+export const PURPOSE: Record<string, string> = {
+  '--color-background': 'App / page background',
+  '--color-foreground': 'Default text',
+  '--color-card': 'Card surface',
+  '--color-card-foreground': 'Text on cards',
+  '--color-popover': 'Popover / menu surface',
+  '--color-popover-foreground': 'Text in popovers',
+  '--color-primary': 'Primary action background',
+  '--color-primary-foreground': 'Text on primary',
+  '--color-secondary': 'Secondary surface',
+  '--color-secondary-foreground': 'Text on secondary',
+  '--color-muted': 'Muted surface (subtle fills)',
+  '--color-muted-foreground': 'Muted / secondary text',
+  '--color-accent': 'Accent / hover surface',
+  '--color-accent-foreground': 'Text on accent',
+  '--color-destructive': 'Destructive / danger',
+  '--color-destructive-foreground': 'Text on destructive',
+  '--color-border': 'Borders / dividers',
+  '--color-input': 'Input field background',
+  '--color-ring': 'Focus ring',
+  '--color-sidebar': 'Sidebar background',
+  '--color-code-foreground': 'Inline code text / accent',
+};
+
+/** Raw walk of loaded stylesheets → light/dark custom-property maps (colors + radius).
+ *  Recurses into grouping rules (@layer, @media, @supports) because Tailwind v4
+ *  emits the `:root` theme tokens inside an `@layer`, which a flat walk would miss. */
+function collectTokens(): { light: Record<string, string>; dark: Record<string, string> } {
+  const light: Record<string, string> = {};
+  const dark: Record<string, string> = {};
+  const visit = (rules: CSSRuleList) => {
+    for (const rule of Array.from(rules)) {
+      const r = rule as CSSStyleRule;
+      if (r.selectorText && r.style) {
+        const isRoot = /(^|,)\s*:root\b/.test(r.selectorText);
+        const isDark = /(^|,)\s*\.dark\b/.test(r.selectorText);
+        if (isRoot || isDark) {
+          for (const prop of Array.from(r.style)) {
+            if (!prop.startsWith('--color-') && !prop.startsWith('--radius')) continue;
+            const val = r.style.getPropertyValue(prop).trim();
+            if (isRoot) light[prop] = val;
+            if (isDark) dark[prop] = val;
+          }
+        }
+      }
+      // Grouping rules (@layer/@media/@supports) carry nested rules — recurse.
+      const nested = (rule as CSSGroupingRule).cssRules;
+      if (nested) visit(nested);
+    }
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      visit(sheet.cssRules);
+    } catch {
+      // cross-origin sheet
+    }
+  }
+  return { light, dark };
+}
+
+/** Reference data for the token table: a color token is one with a `.dark` override. */
+function discover(): { colors: ColorToken[]; radii: RadiusToken[] } {
+  const { light, dark } = collectTokens();
+  const colors = Object.keys(dark)
+    .filter((n) => n.startsWith('--color-'))
+    .sort()
+    .map((name) => ({ name, light: light[name] || dark[name], dark: dark[name] }));
+  const radii = Object.keys(light)
+    .filter((n) => n.startsWith('--radius'))
+    .sort()
+    .map((name) => ({ name, value: light[name] }));
+  return { colors, radii };
+}
+
+/** Light/dark palettes for the theme editor: light = colors + --radius, dark = colors.
+ *  The token set is keyed off the `.dark` overrides — that's what defines a kit token
+ *  and excludes Tailwind's default palette (which has no `.dark` entry). Light values
+ *  come from `:root`, falling back to the dark value if a token only exists in dark. */
+export function discoverPalettes(): { light: Palette; dark: Palette } {
+  const { light, dark } = collectTokens();
+  const names = Object.keys(dark).filter((n) => n.startsWith('--color-')).sort();
+  const lightPalette: Palette = { '--radius': light['--radius'] ?? '0.6rem' };
+  const darkPalette: Palette = {};
+  for (const name of names) {
+    lightPalette[name] = light[name] || dark[name];
+    darkPalette[name] = dark[name];
+  }
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+  };
+}
+
+/** Resolve any CSS color string (e.g. hsl(...)) to #rrggbb for a color input. */
+export function toHex(css: string): string {
+  const el = document.createElement('div');
+  el.style.color = css;
+  el.style.display = 'none';
+  document.body.appendChild(el);
+  const rgb = getComputedStyle(el).color;
+  el.remove();
+  const m = rgb.match(/\d+(\.\d+)?/g);
+  if (!m) return '#000000';
+  return '#' + m.slice(0, 3).map((x) => Math.round(+x).toString(16).padStart(2, '0')).join('');
+}
+
+const cellHead: JSX.CSSProperties = { 'text-align': 'left', padding: '6px 10px', 'border-bottom': '1px solid var(--color-border)', 'font-weight': '600' };
+const cell: JSX.CSSProperties = { padding: '6px 10px', 'border-bottom': '1px solid var(--color-border)', 'vertical-align': 'middle' };
+
+function Swatch(props: { color: string }) {
+  return (
+    <span
+      style={{
+        display: 'inline-block', width: '1.15rem', height: '1.15rem', 'border-radius': '4px',
+        background: props.color, border: '1px solid var(--color-border)', 'vertical-align': 'middle',
+        'margin-right': '.4rem',
+      }}
+    />
+  );
+}
+
+/** Auto-generated reference of every overridable token (light + dark values). */
+export function TokenTable() {
+  const [data, setData] = createSignal<{ colors: ColorToken[]; radii: RadiusToken[] }>({ colors: [], radii: [] });
+  onMount(() => setData(discover()));
+  return (
+    <div style={{ 'font-size': '13px', color: 'var(--color-foreground)' }}>
+      <table style={{ width: '100%', 'border-collapse': 'collapse' }}>
+        <thead>
+          <tr>
+            <th style={cellHead}>Token</th>
+            <th style={cellHead}>Purpose</th>
+            <th style={cellHead}>Light</th>
+            <th style={cellHead}>Dark</th>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={data().colors}>
+            {(t) => (
+              <tr>
+                <td style={cell}><code>{t.name}</code></td>
+                <td style={{ ...cell, color: 'var(--color-muted-foreground)' }}>{PURPOSE[t.name] || ''}</td>
+                <td style={cell}><Swatch color={t.light} /><small>{t.light}</small></td>
+                <td style={cell}><Swatch color={t.dark} /><small>{t.dark}</small></td>
+              </tr>
+            )}
+          </For>
+          <For each={data().radii}>
+            {(t) => (
+              <tr>
+                <td style={cell}><code>{t.name}</code></td>
+                <td style={{ ...cell, color: 'var(--color-muted-foreground)' }}>Corner radius</td>
+                <td style={{ ...cell }} colspan={2}><small>{t.value}</small></td>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <p style={{ 'margin-top': '.75rem', color: 'var(--color-muted-foreground)', 'font-size': '12px' }}>
+        This table is generated live from the loaded CSS — it always reflects the current tokens in <code>theme.css</code>.
+      </p>
+    </div>
+  );
+}

package/src/stories/full-chat.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "storybook-solidjs-vite";
+import { ChatScene } from "./chat-scene";
+
+const meta: Meta = {
+  title: "Examples/Full Chat App",
+  parameters: {
+    // Render inline in docs so the embedded example inherits the dark-mode
+    // class (a non-inline iframe would stay light). Bounded to a sensible height.
+    docs: { story: { inline: true, height: "640px" } },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <ChatScene />,
+};

package/src/stories/message-actions.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import {
+  Message, MessageAvatar, MessageContent, MessageActions,
+  FeedbackBar, Button,
+} from '../index';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Share, Bookmark, Check } from 'lucide-solid';
+
+const meta: Meta = {
+  title: 'Examples/Message Actions',
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const HoverActions: Story = {
+  name: 'Actions on Hover',
+  render: () => (
+    <div class="space-y-6 max-w-2xl p-4">
+      <p class="text-sm text-muted-foreground">Hover over the assistant message to see action buttons appear.</p>
+
+      <Message>
+        <MessageAvatar src="" fallback="U" alt="User" />
+        <MessageContent>How do I handle errors in async Rust functions?</MessageContent>
+      </Message>
+
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <div class="group flex-1 space-y-2">
+          <MessageContent markdown>
+{`In Rust, async functions return \`Result\` types just like sync functions. The \`?\` operator works seamlessly:
+
+\`\`\`rust
+async fn fetch_user(id: u64) -> Result<User, AppError> {
+    let response = client.get(&format!("/users/{}", id))
+        .send()
+        .await?;          // propagates reqwest::Error
+    let user = response
+        .json::<User>()
+        .await?;           // propagates deserialization error
+    Ok(user)
+}
+\`\`\`
+
+Use \`anyhow::Result\` for applications and \`thiserror\` for libraries to define custom error types.`}
+          </MessageContent>
+          <MessageActions class="opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><RefreshCw class="size-3.5" /></Button>
+          </MessageActions>
+        </div>
+      </Message>
+    </div>
+  ),
+};
+
+export const AlwaysVisible: Story = {
+  name: 'Always Visible Actions',
+  render: () => (
+    <div class="space-y-6 max-w-2xl p-4">
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <div class="flex-1 space-y-2">
+          <MessageContent markdown>
+{`To install Tailwind CSS v4 in a Vite project:
+
+\`\`\`bash
+pnpm add tailwindcss @tailwindcss/vite
+\`\`\`
+
+Then add the plugin to your \`vite.config.ts\`:
+
+\`\`\`typescript
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
+\`\`\`
+
+Import Tailwind in your main CSS file:
+
+\`\`\`css
+@import "tailwindcss";
+\`\`\``}
+          </MessageContent>
+          <MessageActions>
+            <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><RefreshCw class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><Share class="size-3.5" /></Button>
+            <Button variant="ghost" size="icon-sm"><Bookmark class="size-3.5" /></Button>
+          </MessageActions>
+        </div>
+      </Message>
+    </div>
+  ),
+};
+
+export const WithCopyConfirmation: Story = {
+  name: 'Copy with Confirmation',
+  render: () => {
+    const [copied, setCopied] = createSignal(false);
+
+    const handleCopy = () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+      <div class="space-y-6 max-w-2xl p-4">
+        <Message>
+          <MessageAvatar src="" fallback="AI" alt="Assistant" />
+          <div class="flex-1 space-y-2">
+            <MessageContent>
+              The current LTS version of Node.js is 22.x, which includes built-in support for the fetch API, test runner, and watch mode.
+            </MessageContent>
+            <MessageActions>
+              <Button variant="ghost" size="icon-sm" onClick={handleCopy}>
+                {copied() ? <Check class="size-3.5 text-green-500" /> : <Copy class="size-3.5" />}
+              </Button>
+              <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
+              <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+            </MessageActions>
+          </div>
+        </Message>
+      </div>
+    );
+  },
+};
+
+export const WithFeedbackBar: Story = {
+  name: 'Feedback Bar',
+  render: () => {
+    const [showFeedback, setShowFeedback] = createSignal(true);
+
+    return (
+      <div class="space-y-6 max-w-2xl p-4">
+        <Message>
+          <MessageAvatar src="" fallback="AI" alt="Assistant" />
+          <div class="flex-1 space-y-3">
+            <MessageContent markdown>
+{`Here are 3 ways to debounce in JavaScript:
+
+1. **setTimeout approach** -- simple but manual cleanup
+2. **lodash.debounce** -- battle-tested, configurable leading/trailing
+3. **AbortController** -- modern, cancellable, works with fetch`}
+            </MessageContent>
+
+            {showFeedback() && (
+              <FeedbackBar
+                title="Was this response helpful?"
+                onHelpful={() => setShowFeedback(false)}
+                onNotHelpful={() => setShowFeedback(false)}
+                onClose={() => setShowFeedback(false)}
+              />
+            )}
+          </div>
+        </Message>
+      </div>
+    );
+  },
+};