@kitn.ai/ui 0.14.1

package/src/components/message-action-bar.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup, fireEvent } from '@solidjs/testing-library';
+import { MessageActionBar, MessageAvatar } from './message';
+import { actionIcon, BUILTIN_ACTION_LABEL } from '../ui/action-icons';
+import type { ChatMessageAction, CustomAction } from '../elements/chat-types';
+
+afterEach(cleanup);
+
+describe('action-icons registry', () => {
+  it('resolves every built-in action name to a component', () => {
+    (['copy', 'like', 'dislike', 'regenerate', 'edit'] as ChatMessageAction[]).forEach((n) => {
+      expect(actionIcon(n)).toBeTypeOf('function');
+    });
+  });
+
+  it('resolves common custom icon names', () => {
+    ['share', 'bookmark', 'download', 'link', 'trash', 'check', 'x', 'star', 'flag', 'reply', 'more'].forEach((n) => {
+      expect(actionIcon(n)).toBeTypeOf('function');
+    });
+  });
+
+  it('returns undefined for unknown or absent names', () => {
+    expect(actionIcon('not-a-real-icon')).toBeUndefined();
+    expect(actionIcon(undefined)).toBeUndefined();
+    expect(actionIcon('')).toBeUndefined();
+  });
+
+  it('exposes labels for all built-ins', () => {
+    expect(BUILTIN_ACTION_LABEL).toMatchObject({
+      copy: 'Copy', like: 'Like', dislike: 'Dislike', regenerate: 'Regenerate', edit: 'Edit',
+    });
+  });
+});
+
+describe('MessageActionBar', () => {
+  it('renders built-in actions and emits their name on click', () => {
+    const onAction = vi.fn();
+    const { getByLabelText } = render(() => (
+      <MessageActionBar actions={['copy', 'like', 'regenerate']} onAction={onAction} />
+    ));
+    const copy = getByLabelText('Copy');
+    expect(copy).toBeInTheDocument();
+    expect(copy).toHaveAttribute('data-action', 'copy');
+    // built-in renders an icon (svg), not the label text
+    expect(copy.querySelector('svg')).toBeTruthy();
+
+    fireEvent.click(copy);
+    expect(onAction).toHaveBeenCalledWith('copy');
+    fireEvent.click(getByLabelText('Regenerate'));
+    expect(onAction).toHaveBeenCalledWith('regenerate');
+  });
+
+  it('renders a custom action with a known icon and emits its id', () => {
+    const onAction = vi.fn();
+    const share: CustomAction = { id: 'share', label: 'Share', icon: 'share' };
+    const { getByLabelText } = render(() => (
+      <MessageActionBar actions={[share]} onAction={onAction} />
+    ));
+    const btn = getByLabelText('Share');
+    expect(btn).toHaveAttribute('data-action', 'share');
+    expect(btn.querySelector('svg')).toBeTruthy();
+    fireEvent.click(btn);
+    expect(onAction).toHaveBeenCalledWith('share');
+  });
+
+  it('renders a label-only button for an unknown custom icon (no crash)', () => {
+    const onAction = vi.fn();
+    const custom: CustomAction = { id: 'archive', label: 'Archive', icon: 'definitely-missing' };
+    const { getByLabelText } = render(() => (
+      <MessageActionBar actions={[custom]} onAction={onAction} />
+    ));
+    const btn = getByLabelText('Archive');
+    expect(btn).toBeInTheDocument();
+    expect(btn.querySelector('svg')).toBeFalsy();
+    expect(btn).toHaveTextContent('Archive');
+    fireEvent.click(btn);
+    expect(onAction).toHaveBeenCalledWith('archive');
+  });
+
+  it('renders label-only when a custom action has no icon', () => {
+    const onAction = vi.fn();
+    const { getByLabelText } = render(() => (
+      <MessageActionBar actions={[{ id: 'mute', label: 'Mute' }]} onAction={onAction} />
+    ));
+    const btn = getByLabelText('Mute');
+    expect(btn.querySelector('svg')).toBeFalsy();
+    expect(btn).toHaveTextContent('Mute');
+  });
+
+  it('reveal="hover" adds the opacity/group-hover classes', () => {
+    const { container } = render(() => (
+      <MessageActionBar actions={['copy']} reveal="hover" onAction={() => {}} />
+    ));
+    const bar = container.firstElementChild as HTMLElement;
+    expect(bar.className).toContain('opacity-0');
+    expect(bar.className).toContain('group-hover:opacity-100');
+  });
+
+  it('reveal="always" (default) does not add the hover classes', () => {
+    const { container } = render(() => (
+      <MessageActionBar actions={['copy']} onAction={() => {}} />
+    ));
+    const bar = container.firstElementChild as HTMLElement;
+    expect(bar.className).not.toContain('opacity-0');
+    expect(bar.className).not.toContain('group-hover:opacity-100');
+  });
+});
+
+describe('MessageAvatar', () => {
+  it('renders an img when src is set', () => {
+    const { container } = render(() => (
+      <MessageAvatar src="https://example.com/a.png" alt="Ada" fallback="AD" />
+    ));
+    const img = container.querySelector('img');
+    expect(img).toBeTruthy();
+    expect(img).toHaveAttribute('src', 'https://example.com/a.png');
+    expect(img).toHaveAttribute('alt', 'Ada');
+  });
+
+  it('renders the fallback text when there is no src', () => {
+    const { container, getByText } = render(() => (
+      <MessageAvatar src="" alt="Ada" fallback="AD" />
+    ));
+    expect(container.querySelector('img')).toBeFalsy();
+    expect(getByText('AD')).toBeInTheDocument();
+  });
+});

package/src/components/message-narrow.stories.tsx

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Message, MessageAvatar, MessageContent } from './message';
+import { ChatContainer } from './chat-container';
+import { ChatConfig } from '../primitives/chat-config';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Message/Narrow Panel',
+  component: Message,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: componentDescription([
+        'Layout stress-tests for `Message` inside narrow chat panels (300–380px) and resizable side panels, verifying text wraps and the 32px avatar stays fixed.',
+        '**When to use:** as a reference when embedding the chat in a constrained column — a browser-extension side panel, a docked drawer, or a resizable split view.',
+        '**How to use:** wrap messages in a fixed/min-width container (and usually `ChatConfig proseSize="sm"`), keeping `min-w-0` on flex children so long text wraps instead of overflowing.',
+        '**Placement:** these are full-composition showcases, not control-driven; use them to copy the surrounding panel structure.',
+      ]),
+    },
+  },
+  argTypes: {
+    class: {
+      control: 'text',
+      description: 'Layout classes for the message row.',
+    },
+  },
+  render: (args) => (
+    <ChatConfig proseSize="sm">
+      <div
+        style={{ width: '380px', background: 'var(--color-card, #202127)' }}
+        class="p-3 rounded-lg"
+      >
+        <Message {...args}>
+          <MessageAvatar src="" alt="AI" fallback="AI" />
+          <MessageContent>{longText}</MessageContent>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+} satisfies Meta<typeof Message>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Message, MessageAvatar, MessageContent, ChatContainer, ChatConfig } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+const longText =
+  'The document is a transcript of a YouTube video where Andre Karpathy discusses building AI agents using large language models. He explains how he structures his personal knowledge base and shares techniques for prompt engineering that maximize output quality.';
+
+/** Default render — a single message inside a 380px card; tweak `class` via controls. */
+export const Playground: Story = {
+  ...src(`<ChatConfig proseSize="sm">
+  <div style={{ width: '380px' }} class="p-3 rounded-lg">
+    <Message>
+      <MessageAvatar src="" alt="AI" fallback="AI" />
+      <MessageContent>{longText}</MessageContent>
+    </Message>
+  </div>
+</ChatConfig>`),
+};
+
+/** Simulates the chat panel at 380px — the default width in the detail page. */
+export const NarrowPanel380: Story = {
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div
+        style={{ width: '380px', height: '500px', background: 'var(--color-card, #202127)' }}
+        class="flex flex-col overflow-hidden rounded-lg"
+      >
+        <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0">
+          New Thread
+        </div>
+        <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+          <div class="space-y-3 min-w-0">
+            <Message>
+              <MessageAvatar src="" alt="AI" fallback="AI" />
+              <MessageContent>{longText}</MessageContent>
+            </Message>
+          </div>
+        </ChatContainer>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<ChatConfig proseSize="sm">
+  <div style={{ width: '380px', height: '500px' }} class="flex flex-col rounded-lg">
+    <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+      <Message>
+        <MessageAvatar src="" alt="AI" fallback="AI" />
+        <MessageContent>{longText}</MessageContent>
+      </Message>
+    </ChatContainer>
+  </div>
+</ChatConfig>`),
+};
+
+/** Even narrower — 300px minimum width with two messages. */
+export const NarrowPanel300: Story = {
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div
+        style={{ width: '300px', height: '500px', background: 'var(--color-card, #202127)' }}
+        class="flex flex-col overflow-hidden rounded-lg"
+      >
+        <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0">
+          New Thread
+        </div>
+        <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+          <div class="space-y-3 min-w-0">
+            <Message>
+              <MessageAvatar src="" alt="AI" fallback="AI" />
+              <MessageContent>{longText}</MessageContent>
+            </Message>
+
+            <Message>
+              <MessageAvatar src="" alt="AI" fallback="AI" />
+              <MessageContent>A shorter reply.</MessageContent>
+            </Message>
+          </div>
+        </ChatContainer>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<ChatConfig proseSize="sm">
+  <div style={{ width: '300px', height: '500px' }} class="flex flex-col rounded-lg">
+    <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+      <Message>
+        <MessageAvatar src="" alt="AI" fallback="AI" />
+        <MessageContent>{longText}</MessageContent>
+      </Message>
+    </ChatContainer>
+  </div>
+</ChatConfig>`),
+};
+
+/** Without ChatContainer — isolates the Message component's own wrapping. */
+export const NarrowDivOnly: Story = {
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div
+        style={{ width: '380px', background: 'var(--color-card, #202127)' }}
+        class="p-3 rounded-lg"
+      >
+        <Message>
+          <MessageAvatar src="" alt="AI" fallback="AI" />
+          <MessageContent>{longText}</MessageContent>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<ChatConfig proseSize="sm">
+  <div style={{ width: '380px' }} class="p-3 rounded-lg">
+    <Message>
+      <MessageAvatar src="" alt="AI" fallback="AI" />
+      <MessageContent>{longText}</MessageContent>
+    </Message>
+  </div>
+</ChatConfig>`),
+};
+
+/** The avatar in isolation — verifies it stays a fixed 32px. */
+export const AvatarIsolation: Story = {
+  render: () => (
+    <div
+      style={{ width: '380px', background: 'var(--color-card, #202127)' }}
+      class="p-3 rounded-lg"
+    >
+      <div class="flex items-start gap-3">
+        <MessageAvatar src="" alt="AI" fallback="AI" />
+        <div class="min-w-0 rounded-lg p-2 bg-secondary text-sm text-foreground break-words">
+          {longText}
+        </div>
+      </div>
+    </div>
+  ),
+  ...src(`<div class="flex items-start gap-3">
+  <MessageAvatar src="" alt="AI" fallback="AI" />
+  <div class="min-w-0 rounded-lg p-2 bg-secondary break-words">{longText}</div>
+</div>`),
+};
+
+/** Reproduces the full extension layout — left nav, content column, resizable chat. */
+export const FullExtensionLayout: Story = {
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div class="flex h-screen bg-background relative" style={{ height: '600px' }}>
+        <div class="flex-shrink-0 w-[300px] bg-[#161618] p-4 overflow-y-auto">
+          <div class="text-sm text-white/70">Left Nav</div>
+          <div class="mt-2 space-y-1">
+            <div class="text-sky-400 text-sm px-2 py-1 bg-sky-400/10 rounded">Content</div>
+            <div class="text-white/70 text-sm px-2 py-1">Summary</div>
+            <div class="text-white/70 text-sm px-2 py-1">Key Points</div>
+          </div>
+        </div>
+
+        <div class="flex-1 min-w-0 flex flex-col">
+          <div class="px-4 py-2 bg-muted/30 text-sm font-medium text-foreground flex-shrink-0">
+            Header Bar
+          </div>
+
+          <ResizablePanelGroup orientation="horizontal" class="flex-1 min-w-0 overflow-hidden">
+            <ResizablePanel class="min-w-0 overflow-hidden">
+              <div class="flex-1 overflow-y-auto">
+                <div class="flex gap-16 mx-auto" style={{ "max-width": "calc(768px + 256px + 64px + 32px)" }}>
+                  <div class="flex-1 min-w-0 max-w-[768px] px-4">
+                    <h2 class="text-lg font-semibold text-foreground mt-4">Article Title</h2>
+                    <p class="text-sm text-muted-foreground mt-2">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel class="overflow-hidden" defaultSize={35}>
+              <div class="h-full flex flex-col overflow-hidden">
+                <div class="flex flex-col h-full min-w-0 overflow-hidden bg-card">
+                  <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0">
+                    New Thread
+                  </div>
+                  <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+                    <div class="space-y-3 min-w-0">
+                      <Message>
+                        <MessageAvatar src="" alt="AI" fallback="AI" />
+                        <MessageContent>{longText}</MessageContent>
+                      </Message>
+                      <Message>
+                        <MessageAvatar src="" alt="AI" fallback="AI" />
+                        <MessageContent>{longText + ' ' + longText}</MessageContent>
+                      </Message>
+                    </div>
+                  </ChatContainer>
+                  <div class="px-3 pb-3 pt-1 flex-shrink-0">
+                    <div class="bg-muted/40 rounded-lg px-3 py-2.5 text-sm text-foreground/75">
+                      Ask about this page...
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<ResizablePanelGroup orientation="horizontal" class="flex-1 min-w-0 overflow-hidden">
+  <ResizablePanel class="min-w-0 overflow-hidden">{/* article */}</ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={35}>
+    <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+      <Message>
+        <MessageAvatar src="" alt="AI" fallback="AI" />
+        <MessageContent>{longText}</MessageContent>
+      </Message>
+    </ChatContainer>
+  </ResizablePanel>
+</ResizablePanelGroup>`),
+};
+
+/** A simpler resizable split — main content beside a chat panel. */
+export const InsideResizablePanel: Story = {
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div style={{ width: '900px', height: '500px' }} class="flex">
+        <ResizablePanelGroup orientation="horizontal" class="flex-1 min-w-0 overflow-hidden">
+          <ResizablePanel class="min-w-0 overflow-hidden">
+            <div class="h-full p-4 bg-background overflow-y-auto">
+              <p class="text-foreground text-sm">Main content area — this simulates the article/transcript view</p>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel class="overflow-hidden" defaultSize={40}>
+            <div class="h-full flex flex-col overflow-hidden">
+              <div class="flex flex-col h-full min-w-0 overflow-hidden bg-card">
+                <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0">
+                  New Thread
+                </div>
+
+                <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+                  <div class="space-y-3 min-w-0">
+                    <Message>
+                      <MessageAvatar src="" alt="AI" fallback="AI" />
+                      <MessageContent>{longText}</MessageContent>
+                    </Message>
+
+                    <Message>
+                      <MessageAvatar src="" alt="AI" fallback="AI" />
+                      <MessageContent>A short reply to test mixed lengths.</MessageContent>
+                    </Message>
+
+                    <Message>
+                      <MessageAvatar src="" alt="AI" fallback="AI" />
+                      <MessageContent>{longText + ' ' + longText}</MessageContent>
+                    </Message>
+                  </div>
+                </ChatContainer>
+
+                <div class="px-3 pb-3 pt-1 flex-shrink-0">
+                  <div class="bg-muted/40 rounded-lg px-3 py-2.5 text-sm text-foreground/75">
+                    Ask about this page...
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<ResizablePanelGroup orientation="horizontal" class="flex-1 min-w-0 overflow-hidden">
+  <ResizablePanel class="min-w-0 overflow-hidden">{/* main content */}</ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={40}>
+    <ChatContainer class="flex-1 min-w-0 px-3 py-3">
+      <Message>
+        <MessageAvatar src="" alt="AI" fallback="AI" />
+        <MessageContent>{longText}</MessageContent>
+      </Message>
+    </ChatContainer>
+  </ResizablePanel>
+</ResizablePanelGroup>`),
+};

package/src/components/message-skills.stories.tsx

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "storybook-solidjs-vite";
+import { MessageSkills } from "./message-skills";
+import { Message, MessageContent, MessageActions } from "./message";
+import { ChatConfig } from "../primitives/chat-config";
+import { Copy, ThumbsUp, ThumbsDown } from "lucide-solid";
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: "Solid (Advanced)/Elements/MessageSkills",
+  component: MessageSkills,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      controls: { exclude: ["use:eventListener"] },
+      description: componentDescription([
+        "A row of small badges that label which **skills** were active when a message was generated.",
+        "**When to use:** above an assistant message whose response was shaped by one or more skills (e.g. `Concise`, `ELI5`). Renders nothing when the `skills` array is empty.",
+        "**How to use:** pass a `skills` array of `{ id, name }`; each `name` is shown as a badge. Add `class` (e.g. `mb-1`) to space it from the message body.",
+        "**Placement:** directly above `MessageContent` inside an assistant `Message`.",
+      ]),
+    },
+  },
+  argTypes: {
+    skills: {
+      control: "object",
+      description: "Active skills to display as badges. Each is `{ id, name }`.",
+    },
+    class: {
+      control: "text",
+      description: "Extra classes for the badge row container.",
+    },
+  },
+  args: {
+    skills: [
+      { id: "1", name: "Concise" },
+      { id: "2", name: "ELI5" },
+    ],
+  },
+  render: (args) => <MessageSkills {...args} />,
+} satisfies Meta<typeof MessageSkills>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { MessageSkills } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: "tsx" } } },
+});
+
+/** Interactive playground — edit the `skills` array to see the badges update. */
+export const Playground: Story = {
+  ...src(`<MessageSkills skills={[{ id: '1', name: 'Concise' }, { id: '2', name: 'ELI5' }]} />`),
+};
+
+/** A single active skill. */
+export const SingleSkill: Story = {
+  args: { skills: [{ id: "1", name: "Caveman" }] },
+  ...src(`<MessageSkills skills={[{ id: '1', name: 'Caveman' }]} />`),
+};
+
+/** Several active skills wrap onto multiple lines if needed. */
+export const MultipleSkills: Story = {
+  args: {
+    skills: [
+      { id: "1", name: "Concise" },
+      { id: "2", name: "ELI5" },
+    ],
+  },
+  ...src(`<MessageSkills
+  skills={[
+    { id: '1', name: 'Concise' },
+    { id: '2', name: 'ELI5' },
+  ]}
+/>`),
+};
+
+/** Empty array — the component renders nothing. */
+export const NoSkills: Story = {
+  args: { skills: [] },
+  ...src(`<MessageSkills skills={[]} />`),
+};
+
+/** Composed above an assistant message body (showcase — not driven by controls). */
+export const InAssistantMessage: Story = {
+  name: "In Assistant Message",
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div class="max-w-md space-y-4">
+        <Message class="flex-col !gap-0">
+          <MessageSkills skills={[{ id: "1", name: "Caveman" }]} class="mb-1" />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            {"Bug in auth middleware. Token expiry check use `<` not `<=`. Fix: update comparison operator in `validateToken()`."}
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button aria-label="Copy message">
+              <Copy size={14} />
+            </button>
+            <button aria-label="Good response">
+              <ThumbsUp size={14} />
+            </button>
+            <button aria-label="Bad response">
+              <ThumbsDown size={14} />
+            </button>
+          </MessageActions>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            The authentication middleware validates JWT tokens by checking the
+            expiration timestamp. There's a bug in the comparison operator that
+            causes tokens to be accepted even when they've just expired.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button aria-label="Copy message">
+              <Copy size={14} />
+            </button>
+            <button aria-label="Good response">
+              <ThumbsUp size={14} />
+            </button>
+            <button aria-label="Bad response">
+              <ThumbsDown size={14} />
+            </button>
+          </MessageActions>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<Message class="flex-col !gap-0">
+  <MessageSkills skills={[{ id: '1', name: 'Caveman' }]} class="mb-1" />
+  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+    {assistantText}
+  </MessageContent>
+</Message>`),
+};
+
+/** Skills across a multi-turn flow (showcase). */
+export const InConversation: Story = {
+  name: "In Conversation Flow",
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div class="max-w-md space-y-4">
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            What is the main topic of this video?
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            The video covers advanced React patterns including compound
+            components, render props, and custom hooks for state management.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button aria-label="Copy message"><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            Can you explain that more simply?
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageSkills skills={[{ id: "1", name: "ELI5" }]} class="mb-1" />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            Think of React patterns like different ways to build with LEGO.
+            Some ways make it easier to change pieces later, some ways make
+            it easier to share pieces between different builds.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button aria-label="Copy message"><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            Now give me the technical details
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageSkills
+            skills={[
+              { id: "1", name: "Detailed" },
+              { id: "2", name: "Concise" },
+            ]}
+            class="mb-1"
+          />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            {`**Compound Components**: Share implicit state via React Context. Parent owns state, children consume it.
+
+**Render Props**: Pass a function as a prop that returns JSX. Enables inversion of control.
+
+**Custom Hooks**: Extract stateful logic into reusable functions prefixed with \`use\`.`}
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button aria-label="Copy message"><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<Message class="flex-col !gap-0">
+  <MessageSkills skills={[{ id: '1', name: 'Detailed' }, { id: '2', name: 'Concise' }]} class="mb-1" />
+  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+    {assistantText}
+  </MessageContent>
+</Message>`),
+};