@kitn.ai/ui 0.14.1

package/src/elements/message-skills.declarative.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * Unit tests for the declarative `<kai-skill>` light-DOM API of `<kai-skills>`.
+ *
+ * Strategy: the `defineWebComponent` call registers a real Shadow-DOM custom
+ * element which requires a full browser environment (Constructable Stylesheets,
+ * shadow roots, etc.) and is therefore not suitable for jsdom unit tests.
+ * Instead we:
+ *   1. Test the exported `parseKaiSkillElement` helper in isolation — it has no
+ *      DOM dependencies beyond `Element`, which jsdom provides perfectly.
+ *   2. Test that the merged list of prop + slotted items renders badge spans
+ *      correctly via `MessageSkills` directly, mirroring the pattern used in
+ *      `prompt-suggestions.declarative.test.tsx`.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup } from '@solidjs/testing-library';
+import { For } from 'solid-js';
+import { parseKaiSkillElement } from './message-skills';
+import { MessageSkills } from '../components/message-skills';
+
+afterEach(cleanup);
+
+// ---------------------------------------------------------------------------
+// parseKaiSkillElement — pure helper
+// ---------------------------------------------------------------------------
+
+describe('parseKaiSkillElement', () => {
+  function makeNode(textContent: string, id?: string): Element {
+    const el = document.createElement('kai-skill');
+    el.textContent = textContent;
+    if (id !== undefined) el.setAttribute('id', id);
+    return el;
+  }
+
+  it('uses textContent as name', () => {
+    const item = parseKaiSkillElement(makeNode('Web Search'));
+    expect(item).toMatchObject({ name: 'Web Search' });
+  });
+
+  it('uses id attribute as id when present', () => {
+    const item = parseKaiSkillElement(makeNode('Web Search', 'web-search'));
+    expect(item).toMatchObject({ id: 'web-search', name: 'Web Search' });
+  });
+
+  it('falls back to textContent as id when id attribute is absent', () => {
+    const item = parseKaiSkillElement(makeNode('Web Search'));
+    expect(item).toMatchObject({ id: 'Web Search', name: 'Web Search' });
+  });
+
+  it('trims leading/trailing whitespace from textContent', () => {
+    const item = parseKaiSkillElement(makeNode('  Code Interpreter  '));
+    expect(item).toMatchObject({ name: 'Code Interpreter' });
+  });
+
+  it('handles empty textContent with an id attribute', () => {
+    const item = parseKaiSkillElement(makeNode('', 'code'));
+    expect(item).toMatchObject({ id: 'code', name: '' });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Merge + render: prop skills + slotted skills combine correctly
+// ---------------------------------------------------------------------------
+
+interface Skill {
+  id: string;
+  name: string;
+}
+
+describe('MessageSkills rendering with merged skills', () => {
+  it('renders one badge span per skill', () => {
+    const { getByText } = render(() => (
+      <MessageSkills skills={[{ id: 'web-search', name: 'Web Search' }, { id: 'code', name: 'Code' }]} />
+    ));
+    expect(getByText('Web Search')).toBeInTheDocument();
+    expect(getByText('Code')).toBeInTheDocument();
+  });
+
+  it('renders nothing when skills is empty', () => {
+    const { container } = render(() => <MessageSkills skills={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders prop items before declarative (slotted) items', () => {
+    // Simulate the merge: prop first, slotted second.
+    const propSkills: Skill[] = [{ id: 'prop', name: 'Prop Skill' }];
+    const slottedSkills: Skill[] = [{ id: 'slotted', name: 'Slotted Skill' }];
+    const merged = [...propSkills, ...slottedSkills];
+
+    const { getAllByText } = render(() => <MessageSkills skills={merged} />);
+    // Both must be present; order is enforced by DOM order
+    expect(getAllByText(/Prop Skill|Slotted Skill/)).toHaveLength(2);
+  });
+
+  it('parseKaiSkillElement produces items that render correctly', () => {
+    const el = document.createElement('kai-skill');
+    el.textContent = 'Memory';
+    el.setAttribute('id', 'memory');
+
+    const parsed = parseKaiSkillElement(el);
+    const { getByText } = render(() => <MessageSkills skills={[parsed]} />);
+    expect(getByText('Memory')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+
+// The web components are custom DOM elements, so declare the tags for JSX.
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kai-skills': JSX.HTMLAttributes<HTMLElement>;
+      /** Light-DOM data carrier for declarative skill badges inside `<kai-skills>`. */
+      'kai-skill': JSX.HTMLAttributes<HTMLElement> & {
+        id?: string;
+      };
+    }
+  }
+}
+
+interface Skill {
+  id: string;
+  name: string;
+}
+
+const sampleSkills: Skill[] = [
+  { id: 's1', name: 'web-search' },
+  { id: 's2', name: 'code' },
+];
+
+/** Render the actual `<kai-skills>` custom element with a `skills` property. */
+function MessageSkillsElement(props: { skills: Skill[] }) {
+  let el: (HTMLElement & { skills?: Skill[] }) | undefined;
+  onMount(() => {
+    if (el) el.skills = props.skills;
+  });
+  return (
+    <kai-skills ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px' }} />
+  );
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kai-skills id="skills"></kai-skills>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';   // registers the custom elements
+
+  const skills = document.getElementById('skills');
+  skills.skills = [
+    { id: 's1', name: 'web-search' },
+    { id: 's2', name: 'code' },
+  ];
+</script>`;
+
+const meta = {
+  title: 'Components/Skills',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kai-skills'),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: specDescription('kai-skills', [
+          '`<kai-skills>` is the framework-agnostic **web component** that badges which skills were active for a message, isolated in **Shadow DOM**.',
+          '**When to use:** annotating a message row with the skills/tools it used, in a non-Solid app. In SolidJS, use the `MessageSkills` primitive directly.',
+          '**Placement:** beneath or inline with the message content, typically in the footer of a message row alongside action buttons; it is `display: block` and wraps badges horizontally.',
+          "**How to use:** register once with `import '@kitn.ai/ui/elements'`. Then either (a) set the `skills` **property** to an array of `{ id, name }` objects, or (b) compose `<kai-skill>` child elements — light-DOM data carriers hidden by the Shadow DOM — where the tag's text content is the badge label and the optional `id` attribute is the stable identifier. When both are provided, prop items render first and declarative children are appended after.",
+          'See the **Code** tab for HTML usage.',
+        ]),
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** Two active-skill badges set via the `skills` JS property. */
+export const Default: Story = {
+  render: () => <MessageSkillsElement skills={sampleSkills} />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+const DECLARATIVE_HTML_SNIPPET = `<!-- Works in any framework or plain HTML — no JS property assignment needed -->
+<kai-skills>
+  <kai-skill id="web-search">Web Search</kai-skill>
+  <kai-skill id="code">Code</kai-skill>
+  <kai-skill id="memory">Memory</kai-skill>
+</kai-skills>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';   // registers the custom elements
+</script>`;
+
+/**
+ * Declare each skill badge as a `<kai-skill>` child element — no `skills`
+ * property or JS array wiring needed. The tag's text content is the badge
+ * label; the optional `id` attribute is the stable identifier (falls back to
+ * the label when absent). Children are light-DOM data carriers hidden by the
+ * Shadow DOM — pure data, no visible output of their own.
+ * Mix with the `skills` prop: prop items render first, declarative children after.
+ */
+export const DeclarativeSkills: Story = {
+  name: 'Declarative Skills (kai-skill)',
+  render: () => (
+    <kai-skills style={{ display: 'block', padding: '16px' }}>
+      <kai-skill id="web-search">Web Search</kai-skill>
+      <kai-skill id="code">Code</kai-skill>
+      <kai-skill id="memory">Memory</kai-skill>
+    </kai-skills>
+  ),
+  parameters: {
+    docs: {
+      source: { code: DECLARATIVE_HTML_SNIPPET, language: 'html' },
+    },
+  },
+};

package/src/elements/message-skills.tsx

@@ -0,0 +1,85 @@
+import { createSignal, onCleanup, onMount } from 'solid-js';
+import { defineWebComponent } from './define';
+import { MessageSkills } from '../components/message-skills';
+
+interface Skill {
+  /** Stable identifier for the skill. */
+  id: string;
+  /** Human-readable skill name shown on the badge. */
+  name: string;
+}
+
+interface Props extends Record<string, unknown> {
+  /** The active skills to badge. Set as a JS property. */
+  skills: Skill[];
+}
+
+/**
+ * Parse a single light-DOM `<kai-skill>` element into a `Skill` descriptor.
+ *
+ * Attribute / content mapping:
+ * - `id`          → Skill.id   (falls back to `name` when absent)
+ * - `textContent` → Skill.name (the human-readable badge label)
+ *
+ * Example: `<kai-skill id="web-search">Web Search</kai-skill>`
+ */
+export function parseKaiSkillElement(n: Element): Skill {
+  const name = n.textContent?.trim() ?? '';
+  const id = n.getAttribute('id') ?? name;
+  return { id, name };
+}
+
+/**
+ * `<kai-skills>` — badges showing which skills were active for a
+ * message. Data via the `skills` property **or** declarative `<kai-skill>`
+ * children.
+ *
+ * **Property API** — set a JS array on the element:
+ * ```html
+ * <kai-skills id="skills"></kai-skills>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   document.getElementById('skills').skills = [
+ *     { id: 'web-search', name: 'Web Search' },
+ *     { id: 'code',       name: 'Code' },
+ *   ];
+ * </script>
+ * ```
+ *
+ * **Declarative API** — compose `<kai-skill>` children (light-DOM data
+ * carriers hidden by Shadow DOM — no visible output of their own):
+ * ```html
+ * <kai-skills>
+ *   <kai-skill id="web-search">Web Search</kai-skill>
+ *   <kai-skill id="code">Code</kai-skill>
+ * </kai-skills>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ * </script>
+ * ```
+ *
+ * When both are provided, `skills` prop items render first and declarative
+ * children are appended after.
+ */
+defineWebComponent<Props>('kai-skills', {
+  skills: [],
+}, (props, { element }) => {
+  // Read declarative <kai-skill> children from light DOM.
+  // The shadow root has no <slot>, so they are invisible — pure data carriers.
+  const [slottedSkills, setSlottedSkills] = createSignal<Skill[]>([]);
+  onMount(() => {
+    const read = () => {
+      const nodes = [...element.querySelectorAll('kai-skill')];
+      setSlottedSkills(nodes.map(parseKaiSkillElement));
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(element, { childList: true, attributes: true, subtree: true });
+    onCleanup(() => observer.disconnect());
+  });
+
+  // Prop skills (first) merged with declarative children (after).
+  const allSkills = () => [...(props.skills ?? []), ...slottedSkills()];
+
+  return <MessageSkills skills={allSkills()} />;
+});

package/src/elements/message.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers the custom elements
+import type { ChatMessage } from './chat-types';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+
+// The web components are custom DOM elements, so declare the tags for JSX.
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kai-message': JSX.HTMLAttributes<HTMLElement>;
+      'kai-action': JSX.HTMLAttributes<HTMLElement> & { icon?: string; tooltip?: string };
+    }
+  }
+}
+
+const assistantMessage: ChatMessage = {
+  id: 'm-a',
+  role: 'assistant',
+  content:
+    "Here's the plan, with a quick code sample:\n\n```js\nconst kit = useChat();\n```\n\nThat wires the kit into your component.",
+  reasoning: { text: 'The user wants X, so I should do Y then Z.', label: 'Reasoning' },
+  tools: [{ type: 'search', state: 'output-available', input: { query: 'kitn docs' }, output: { hits: 3 } }],
+  attachments: [
+    {
+      id: '1',
+      type: 'file',
+      filename: 'architecture.png',
+      mediaType: 'image/png',
+      url:
+        'data:image/svg+xml;utf8,' +
+        encodeURIComponent(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect width="96" height="96" rx="12" fill="#7c3aed"/><text x="48" y="60" font-size="42" text-anchor="middle" fill="white">◆</text></svg>',
+        ),
+    },
+  ],
+  actions: ['copy', 'like', 'dislike', 'regenerate'],
+};
+
+const userMessage: ChatMessage = {
+  id: 'm-u',
+  role: 'user',
+  content: 'How do I compose these myself?',
+};
+
+const AVATAR_SVG =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#10b981"/><text x="32" y="42" font-size="28" text-anchor="middle" fill="white">K</text></svg>',
+  );
+
+/** An assistant message with an avatar (from `message.avatar`) plus custom + built-in actions. */
+const avatarMessage: ChatMessage = {
+  id: 'm-av',
+  role: 'assistant',
+  content: 'I have an avatar, a custom **Share** action, and the built-in copy/like actions.',
+  avatar: { src: AVATAR_SVG, alt: 'Kitn', fallback: 'K' },
+  actions: ['copy', 'like', { id: 'share', label: 'Share', icon: 'share' }],
+};
+
+/** Render the actual `<kai-message>` custom element with a `message` property and optional attrs. */
+function MessageElement(props: { message: ChatMessage; actionsReveal?: 'always' | 'hover' }) {
+  let el: (HTMLElement & { message?: ChatMessage }) | undefined;
+  onMount(() => {
+    if (!el) return;
+    if (props.actionsReveal) el.setAttribute('actions-reveal', props.actionsReveal);
+    el.message = props.message;
+    el.addEventListener('kai-message-action', (e) =>
+      console.log('kai-message-action', (e as CustomEvent).detail.action),
+    );
+  });
+  return (
+    <kai-message ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
+  );
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kai-message id="msg" style="display:block;"></kai-message>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';   // registers the custom elements
+
+  const msg = document.getElementById('msg');
+  msg.message = {
+    id: 'm-a', role: 'assistant',
+    content: "Here's the plan:\\n\\n\\\`\\\`\\\`js\\nconst kit = useChat();\\n\\\`\\\`\\\`",
+    reasoning: { text: 'The user wants X, so I should do Y.' },
+    tools: [{ type: 'search', state: 'output-available', output: { hits: 3 } }],
+    actions: ['copy', 'like', 'dislike', 'regenerate'],
+  };
+
+  // events are CustomEvents on the element (they do not bubble)
+  msg.addEventListener('kai-message-action', (e) => console.log(e.detail.action, e.detail.messageId));
+</script>`;
+
+const meta = {
+  title: 'Components/Message',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kai-message'),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: specDescription('kai-message', [
+          '`<kai-message>` is the framework-agnostic **web component** for a single message row — markdown/plain content, an optional reasoning block, tool calls, attachments, and action buttons — all rendered from one `message` object (the same shape `<kai-chat>` uses per message). It is the keystone of the "compose your own message list" pattern, isolated in **Shadow DOM**.',
+          "**When to use:** building a custom message thread in a non-Solid app, or anywhere you want to lay out the list yourself but keep the kit's rich message rendering. In SolidJS, compose the `Message` primitives for finer control.",
+          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the whole row via the `message` **property** (`el.message = {...}`), and listen for the `kai-message-action` **CustomEvent** for action-button clicks. For simple cases, set `role` + `content` attributes instead of a full object.",
+          'See the **Code** tab for HTML usage.',
+        ]),
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** A rich assistant message: markdown, reasoning, a tool call, an attachment, and actions. */
+export const Assistant: Story = {
+  render: () => <MessageElement message={assistantMessage} />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** A plain user message (markdown defaults off for the user role). */
+export const User: Story = {
+  render: () => <MessageElement message={userMessage} />,
+};
+
+/** An avatar (from `message.avatar`) laid out beside the content column, with a
+ *  custom **Share** action (curated `icon`) alongside the built-in copy/like. */
+export const WithAvatarAndCustomAction: Story = {
+  name: 'Avatar + Custom Action',
+  render: () => <MessageElement message={avatarMessage} />,
+  parameters: {
+    docs: {
+      source: {
+        code: `<kai-message id="msg" style="display:block;"></kai-message>
+<script type="module">
+  import '@kitn.ai/ui/elements';
+  const msg = document.getElementById('msg');
+  msg.message = {
+    id: 'm-av', role: 'assistant', content: 'I have an avatar and a custom Share action.',
+    avatar: { src: '/k.png', alt: 'Kitn', fallback: 'K' },
+    // built-in names AND custom { id, label, icon } descriptors:
+    actions: ['copy', 'like', { id: 'share', label: 'Share', icon: 'share' }],
+  };
+  msg.addEventListener('kai-message-action', (e) => console.log(e.detail.action)); // 'copy' | 'like' | 'share'
+</script>`,
+        language: 'html',
+      },
+    },
+  },
+};
+
+/** Declarative actions — `<kai-action>` light-DOM children instead of a
+ *  `message.actions` array. Each carries `id`, a curated `icon`, an optional
+ *  `tooltip`, and optional text (the accessible label). Great for plain HTML. */
+export const DeclarativeActions: Story = {
+  name: 'Declarative Actions (kai-action)',
+  render: () => {
+    let el: HTMLElement | undefined;
+    onMount(() => {
+      if (!el) return;
+      el.setAttribute('avatar-fallback', 'AI');
+      el.setAttribute(
+        'content',
+        'Declare each button as a `<kai-action>` child — no `message` object or JS wiring needed.',
+      );
+      el.addEventListener('kai-message-action', (e) =>
+        console.log('kai-message-action', (e as CustomEvent).detail.action),
+      );
+    });
+    return (
+      <kai-message
+        ref={(e) => (el = e as HTMLElement)}
+        style={{ display: 'block', padding: '16px', 'max-width': '720px' }}
+      >
+        <kai-action id="copy" icon="copy" tooltip="Copy"></kai-action>
+        <kai-action id="regenerate" icon="regenerate" tooltip="Regenerate"></kai-action>
+        <kai-action id="share" icon="share" tooltip="Share">Share</kai-action>
+        <kai-action id="bookmark" icon="bookmark" tooltip="Bookmark">Bookmark</kai-action>
+      </kai-message>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<kai-message role="assistant" avatar-fallback="AI" content="..." style="display:block;">
+  <kai-action id="copy" icon="copy" tooltip="Copy"></kai-action>
+  <kai-action id="regenerate" icon="regenerate" tooltip="Regenerate"></kai-action>
+  <kai-action id="share" icon="share" tooltip="Share">Share</kai-action>
+  <kai-action id="bookmark" icon="bookmark" tooltip="Bookmark">Bookmark</kai-action>
+</kai-message>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';
+  document.querySelector('kai-message')
+    .addEventListener('kai-message-action', (e) => console.log(e.detail.action)); // 'copy' | 'share' | …
+</script>`,
+        language: 'html',
+      },
+    },
+  },
+};
+
+/** `actions-reveal="hover"` — the action bar is hidden until you hover the row. */
+export const ActionsRevealOnHover: Story = {
+  name: 'Actions Reveal on Hover',
+  render: () => <MessageElement message={avatarMessage} actionsReveal="hover" />,
+  parameters: {
+    docs: {
+      source: {
+        code: `<!-- actions-reveal: 'always' (default) | 'hover' -->
+<kai-message actions-reveal="hover" id="msg" style="display:block;"></kai-message>`,
+        language: 'html',
+      },
+    },
+  },
+};

package/src/elements/message.tsx

@@ -0,0 +1,162 @@
+import { For, Show, createSignal, onMount, onCleanup } from 'solid-js';
+import { defineWebComponent } from './define';
+import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
+import { Message, MessageAvatar, MessageContent, MessageActionBar } from '../components/message';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
+import { Tool } from '../components/tool';
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo } from '../components/attachments';
+import type { ChatMessage } from './chat-types';
+
+interface Props extends Record<string, unknown> {
+  /** The full message object. Set as a JS property. */
+  message?: ChatMessage;
+  /** Convenience for simple cases when not passing a `message` object. */
+  role?: 'user' | 'assistant';
+  /** Convenience content (used when `message` is not set). */
+  content?: string;
+  /** Force markdown on/off. Defaults to on for assistant, off for user. */
+  markdown?: boolean;
+  /** Text/markdown sizing for the message body. */
+  proseSize?: ProseSize;
+  /** Shiki theme name used for fenced code blocks in the content. */
+  codeTheme?: string;
+  /** Disable syntax highlighting for code blocks (no Shiki loads). */
+  codeHighlight?: boolean;
+  /** Whether the action bar is always visible (`'always'`, default) or only
+   *  revealed on hover of the message row (`'hover'`). */
+  actionsReveal?: 'always' | 'hover';
+  /** Convenience avatar image URL (used when `message.avatar` is not set). */
+  avatarSrc?: string;
+  /** Convenience avatar fallback text (used when `message.avatar` is not set). */
+  avatarFallback?: string;
+}
+
+/** Events fired by `<kai-message>`. */
+interface Events {
+  /** An action button was clicked. `action` is the built-in name or custom id. */
+  'kai-message-action': { messageId: string; action: string };
+}
+
+/**
+ * `<kai-message>` — a single message row: markdown/plain content, reasoning,
+ * tool calls, attachments, and action buttons, rendered from one `message`
+ * object (the same shape `<kai-chat>` uses per message). The keystone of the
+ * "compose your own message list" pattern. Emits `kai-message-action`.
+ */
+defineWebComponent<Props, Events>('kai-message', {
+  message: undefined,
+  role: 'assistant',
+  content: undefined,
+  markdown: undefined,
+  proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed',
+  codeHighlight: true,
+  actionsReveal: 'always',
+  avatarSrc: undefined,
+  avatarFallback: undefined,
+}, (props, { dispatch, flag, element }) => {
+  const outer = useChatConfig();
+  const msg = (): ChatMessage =>
+    props.message ?? { id: 'message', role: props.role ?? 'assistant', content: props.content ?? '' };
+
+  // Read declarative <kai-action> children from light DOM.
+  // Shadow DOM with no <slot> suppresses them visually — they're invisible data carriers.
+  const [slottedActions, setSlottedActions] = createSignal<import('../elements/chat-types').CustomAction[]>([]);
+  onMount(() => {
+    const read = () => {
+      const nodes = [...element.querySelectorAll('kai-action')];
+      setSlottedActions(nodes.map(n => ({
+        id: n.id || n.getAttribute('action') || '',
+        label: n.textContent?.trim() || n.getAttribute('label') || n.id || '',
+        icon: n.getAttribute('icon') ?? undefined,
+        tooltip: n.getAttribute('tooltip') ?? undefined,
+      })));
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(element, { childList: true, attributes: true, subtree: true });
+    onCleanup(() => observer.disconnect());
+  });
+  const isUser = () => msg().role === 'user';
+  const avatar = () =>
+    msg().avatar ??
+    (props.avatarSrc || props.avatarFallback
+      ? { src: props.avatarSrc as string | undefined, fallback: props.avatarFallback as string | undefined }
+      : undefined);
+  const reveal = () => (props.actionsReveal === 'hover' ? 'hover' : 'always');
+  // markdown: explicit prop/attribute wins; otherwise default by role.
+  const markdownExplicit = () =>
+    element.hasAttribute('markdown') || props.markdown === true || props.markdown === false;
+  const useMarkdown = () => (markdownExplicit() ? flag('markdown') : !isUser());
+
+  const body = () => (
+    <>
+      <Show when={msg().reasoning}>
+        <Reasoning class="mb-2 w-full">
+          <ReasoningTrigger>{msg().reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
+          <ReasoningContent markdown>{msg().reasoning!.text}</ReasoningContent>
+        </Reasoning>
+      </Show>
+      <For each={msg().tools ?? []}>
+        {(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}
+      </For>
+      <Show when={msg().attachments?.length}>
+        <Attachments variant="inline" class={isUser() ? 'mb-2 justify-end' : 'mb-2'}>
+          <For each={msg().attachments!}>
+            {(att) => (
+              <Attachment data={att}>
+                <AttachmentPreview />
+                <AttachmentInfo />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+      </Show>
+      <MessageContent
+        markdown={useMarkdown()}
+        class={isUser()
+          ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+          : 'bg-transparent p-0'}
+      >
+        {msg().content}
+      </MessageContent>
+      <Show when={(msg().actions?.length ?? 0) > 0 || slottedActions().length > 0}>
+        <MessageActionBar
+          actions={[...(msg().actions ?? []), ...slottedActions()]}
+          reveal={reveal()}
+          onAction={(action) => dispatch('kai-message-action', { messageId: msg().id, action })}
+        />
+      </Show>
+    </>
+  );
+
+  // Row carries `group` so a hover-revealed action bar fades in on row hover.
+  const rowGroup = () => (reveal() === 'hover' ? 'group ' : '');
+
+  return (
+    <ChatConfig
+      proseSize={props.proseSize}
+      codeTheme={props.codeTheme}
+      codeHighlight={flag('codeHighlight')}
+      portalMount={outer.portalMount()}
+    >
+      <Show
+        when={avatar()}
+        fallback={
+          <Message class={`${rowGroup()}${isUser() ? 'flex-col items-end' : 'flex-col items-start'}`}>
+            {body()}
+          </Message>
+        }
+      >
+        {(av) => (
+          <Message class={rowGroup()}>
+            <MessageAvatar src={av().src ?? ''} alt={av().alt ?? ''} fallback={av().fallback} />
+            <div class={`flex min-w-0 flex-1 flex-col ${isUser() ? 'items-end' : 'items-start'}`}>
+              {body()}
+            </div>
+          </Message>
+        )}
+      </Show>
+    </ChatConfig>
+  );
+});