@hibira-io/chat-ui 0.0.0-stage → 0.2.0

package/react.js

@@ -0,0 +1,386 @@
+// React components: a chat thread with Markdown messages, the agent's steps
+// while it writes, replies that appear as typed, follow-up suggestions, copy
+// buttons and a reply box. Import '@hibira-io/chat-ui/styles.css' for the
+// default look.
+
+import { createElement as h, Fragment, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { parseMarkdown } from './markdown.js';
+import { isAutomatic, STEPS } from './conversation.js';
+import { format, labelsFor } from './locales.js';
+import { chatConversation } from './hibira.js';
+
+export { createConversation } from './conversation.js';
+
+const LINK = { target: '_blank', rel: 'noopener noreferrer nofollow ugc' };
+
+// Icons (Lucide shapes, inlined so the package needs no icon library).
+const PATHS = {
+  copy: ['M8 8h12v12H8z', 'M4 16V4h12'],
+  check: ['M20 6 9 17l-5-5'],
+  spinner: ['M21 12a9 9 0 1 1-6.22-8.56'],
+  sparkles: ['M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z', 'M19 3v4', 'M21 5h-4'],
+  user: ['M20 21a8 8 0 0 0-16 0', 'M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'],
+  send: ['M22 2 11 13', 'M22 2l-7 20-4-9-9-4z'],
+  image: ['M3 3h18v18H3z', 'M21 15l-5-5L5 21', 'M9 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'],
+};
+
+function Icon({ name, size = 14, className }) {
+  return h(
+    'svg',
+    { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': 'true', className },
+    PATHS[name].map((d, i) => h('path', { key: i, d })),
+  );
+}
+
+// ------------------------------------------------------------ Markdown
+
+function inline(nodes, key = 'i') {
+  return nodes.map((n, i) => {
+    const k = `${key}.${i}`;
+    if (typeof n === 'string') return h(Fragment, { key: k }, n);
+    switch (n.type) {
+      case 'br':
+        return h('br', { key: k });
+      case 'code':
+        return h('code', { key: k }, n.text);
+      case 'strong':
+      case 'em':
+      case 'del':
+        return h(n.type, { key: k }, inline(n.children, k));
+      case 'link':
+        return h('a', { key: k, href: n.href, ...LINK }, inline(n.children, k));
+      case 'image':
+        return h('a', { key: k, href: n.src, ...LINK, className: 'hb-chat-img' }, h('img', { src: n.src, alt: n.alt, loading: 'lazy', decoding: 'async' }));
+      case 'imagelink':
+        return h('a', { key: k, href: n.href, ...LINK, className: 'hb-chat-imglink' }, h(Icon, { name: 'image' }), n.alt);
+      default:
+        return h(Fragment, { key: k }, inline(n.children ?? [], k));
+    }
+  });
+}
+
+function blocks(list, labels, key = 'b') {
+  return list.map((b, i) => {
+    const k = `${key}.${i}`;
+    switch (b.type) {
+      case 'p':
+        return h('p', { key: k }, inline(b.children, k));
+      case 'heading':
+        return h('p', { key: k, className: 'hb-chat-h' }, h('strong', null, inline(b.children, k)));
+      case 'code':
+        return h(
+          'div',
+          { key: k, className: 'hb-chat-pre' },
+          h('pre', { 'data-lang': b.lang || undefined }, h('code', null, b.text)),
+          h(CopyButton, { text: b.text, label: labels.copyCode, labels, className: 'hb-chat-code-copy' }),
+        );
+      case 'quote':
+        return h('blockquote', { key: k }, blocks(b.children, labels, k));
+      case 'list': {
+        const items = b.items.map((item, j) => {
+          const [first, ...rest] = item;
+          return h('li', { key: j }, first?.type === 'p' ? [h(Fragment, { key: 'f' }, inline(first.children, `${k}.${j}`)), ...blocks(rest, labels, `${k}.${j}`)] : blocks(item, labels, `${k}.${j}`));
+        });
+        return b.ordered ? h('ol', { key: k, start: b.start !== 1 ? b.start : undefined }, items) : h('ul', { key: k }, items);
+      }
+      case 'table':
+        return h(
+          'div',
+          { key: k, className: 'hb-chat-table' },
+          h(
+            'table',
+            null,
+            h('thead', null, h('tr', null, b.head.map((c, j) => h('th', { key: j, style: b.align[j] ? { textAlign: b.align[j] } : undefined }, inline(c, `${k}.h${j}`))))),
+            h(
+              'tbody',
+              null,
+              b.rows.map((r, j) => h('tr', { key: j }, r.map((c, x) => h('td', { key: x, style: b.align[x] ? { textAlign: b.align[x] } : undefined }, inline(c, `${k}.${j}.${x}`))))),
+            ),
+          ),
+        );
+      case 'hr':
+        return h('hr', { key: k });
+      default:
+        return null;
+    }
+  });
+}
+
+/**
+ * A message's Markdown, rendered safely (no HTML from the text).
+ * @param {{ text: string, locale?: string, labels?: object, origin?: string, imageOrigins?: string[] }} props
+ */
+export function Markdown({ text, locale, labels, origin, imageOrigins }) {
+  const l = labelsFor(locale, labels);
+  return h('div', { className: 'hb-chat-md' }, blocks(parseMarkdown(text, { origin, imageOrigins }), l));
+}
+
+// ------------------------------------------------------------ pieces
+
+/** Copies text, showing a check for a moment. */
+export function CopyButton({ text, label, labels, locale, className }) {
+  const l = labels ?? labelsFor(locale);
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    if (!done) return undefined;
+    const id = setTimeout(() => setDone(false), 1500);
+    return () => clearTimeout(id);
+  }, [done]);
+  const tip = done ? l.copied : label ?? l.copy;
+  return h(
+    'button',
+    {
+      type: 'button',
+      className: 'hb-chat-icon-btn' + (className ? ' ' + className : ''),
+      'aria-label': tip,
+      title: tip,
+      onClick: () => {
+        globalThis.navigator?.clipboard?.writeText(text).then(
+          () => setDone(true),
+          () => undefined,
+        );
+      },
+    },
+    h(Icon, { name: done ? 'check' : 'copy' }),
+  );
+}
+
+/**
+ * The agent's progress while it writes: steps done so far with a check, the
+ * current one with a spinner. Without a step, a plain typing line.
+ */
+export function AgentSteps({ typing, step, locale, labels }) {
+  const l = labels ?? labelsFor(locale);
+  const [seen, setSeen] = useState([]);
+  const known = !!step && !!l.steps[step];
+  useEffect(() => {
+    if (!typing) setSeen([]);
+    else if (known) setSeen((s) => (s.includes(step) ? s : [...s, step]));
+  }, [typing, step, known]);
+  if (!typing) return null;
+  const order = (s) => (STEPS.includes(s) ? STEPS.indexOf(s) : STEPS.length);
+  const list = [...new Set(known ? [...seen, step] : seen)].sort((a, b) => order(a) - order(b));
+  if (!list.length) return h('p', { className: 'hb-chat-typing', 'aria-live': 'polite' }, l.typing);
+  return h(
+    'div',
+    { className: 'hb-chat-steps', 'aria-live': 'polite' },
+    h('span', { className: 'hb-chat-avatar' }, h(Icon, { name: 'sparkles' })),
+    h(
+      'ol',
+      null,
+      list.map((s) =>
+        h('li', { key: s, className: s === step ? 'is-current' : 'is-done', 'data-step': s }, h(Icon, { name: s === step ? 'spinner' : 'check', className: s === step ? 'hb-chat-spin' : undefined }), h('span', null, l.steps[s])),
+      ),
+    ),
+  );
+}
+
+/** Follow-up questions to send with one tap. */
+export function Suggestions({ items, onPick, disabled, locale, labels }) {
+  const l = labels ?? labelsFor(locale);
+  if (!items?.length) return null;
+  return h(
+    'div',
+    { className: 'hb-chat-suggestions' },
+    h('span', null, l.suggestions),
+    h(
+      'div',
+      null,
+      items.map((s) => h('button', { key: s, type: 'button', className: 'hb-chat-chip', disabled, onClick: () => onPick(s) }, s)),
+    ),
+  );
+}
+
+const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * Shows text as if typed while `animate` is set: about 1.2 s at most,
+ * whatever the length, by whole characters. Reduced motion shows it at once.
+ */
+export function useReveal(text, animate) {
+  const chars = useRef([]);
+  const [n, setN] = useState(() => (animate && !reducedMotion() ? 0 : Infinity));
+  useEffect(() => {
+    if (!animate || reducedMotion()) {
+      setN(Infinity);
+      return undefined;
+    }
+    chars.current = Array.from(text);
+    const total = chars.current.length;
+    const per = Math.max(1, Math.ceil(total / 60));
+    let i = 0;
+    const id = setInterval(() => {
+      i += per;
+      setN(i);
+      if (i >= total) clearInterval(id);
+    }, 20);
+    return () => clearInterval(id);
+  }, [text, animate]);
+  if (n === Infinity || n >= Array.from(text).length) return { shown: text, done: true };
+  return { shown: chars.current.slice(0, n).join(''), done: false };
+}
+
+function ago(iso, locale) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return '';
+  const s = Math.round((t - Date.now()) / 1000);
+  const fmt = new Intl.RelativeTimeFormat(locale || 'en', { numeric: 'auto' });
+  const abs = Math.abs(s);
+  if (abs < 45) return fmt.format(0, 'second');
+  if (abs < 3600) return fmt.format(Math.round(s / 60), 'minute');
+  if (abs < 86400) return fmt.format(Math.round(s / 3600), 'hour');
+  return fmt.format(Math.round(s / 86400), 'day');
+}
+
+function Bubble({ m, mine, animate, seen, labels, locale, origin, imageOrigins, renderName }) {
+  const auto = isAutomatic(m);
+  const { shown, done } = useReveal(m.text, animate && auto);
+  return h(
+    'li',
+    { className: 'hb-chat-msg ' + (mine ? 'is-mine' : 'is-theirs') + (auto ? ' is-agent' : ''), 'data-sender': m.sender },
+    h('div', { className: 'hb-chat-bubble' + (done ? '' : ' is-revealing') }, h('div', { className: 'hb-chat-md' }, blocks(parseMarkdown(shown, { origin, imageOrigins }), labels))),
+    h(
+      'div',
+      { className: 'hb-chat-meta' },
+      !mine && h('span', null, renderName ? renderName(m) : m.name),
+      auto &&
+        (m.metadata?.handoff
+          ? h('span', { className: 'hb-chat-badge is-handoff' }, h(Icon, { name: 'user', size: 12 }), labels.handoff)
+          : h('span', { className: 'hb-chat-badge' }, h(Icon, { name: 'sparkles', size: 12 }), labels.automatic)),
+      m.created_at && h('time', { dateTime: m.created_at, title: new Date(m.created_at).toLocaleString(locale) }, ago(m.created_at, locale)),
+      seen && h('span', null, labels.seen),
+      auto && done && !m.metadata?.handoff && h(CopyButton, { text: m.text, labels }),
+    ),
+  );
+}
+
+/**
+ * A conversation: messages, the agent's steps, follow-up suggestions and a
+ * reply box. Give it the state from useConversation(), or your own.
+ */
+export function ChatThread({
+  messages,
+  typing = false,
+  step,
+  onSend,
+  me = 'customer',
+  locale,
+  labels: overrides,
+  maxLength = 4000,
+  readSeq,
+  disabled = false,
+  footer,
+  origin,
+  imageOrigins,
+  renderName,
+}) {
+  const labels = labelsFor(locale, overrides);
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const end = useRef(null);
+  const last = messages.length ? messages[messages.length - 1].seq : 0;
+  // Only messages that arrive while the thread is open are revealed as typed.
+  const firstSeq = useRef(null);
+  if (firstSeq.current === null && messages.length) firstSeq.current = last;
+  useEffect(() => {
+    end.current?.scrollIntoView?.({ block: 'nearest' });
+  }, [last, typing]);
+  const lastMine = [...messages].reverse().find((m) => m.sender === me);
+  const lastMsg = messages[messages.length - 1];
+  const suggestions = lastMsg && isAutomatic(lastMsg) && !typing ? lastMsg.metadata?.suggestions ?? [] : [];
+  const tooLong = [...text.trim()].length > maxLength;
+  const canSend = !!onSend && !disabled;
+
+  async function send(e, picked) {
+    e?.preventDefault?.();
+    const v = (picked ?? text).trim();
+    if (!v || [...v].length > maxLength || busy) return;
+    setBusy(true);
+    setError('');
+    try {
+      await onSend(v);
+      if (picked === undefined) setText('');
+    } catch (err) {
+      setError(err?.message ?? String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return h(
+    'div',
+    { className: 'hb-chat' },
+    h(
+      'ol',
+      { className: 'hb-chat-thread', 'aria-live': 'polite' },
+      !messages.length && h('li', { className: 'hb-chat-empty' }, labels.empty),
+      messages.map((m) =>
+        h(Bubble, {
+          key: m.seq,
+          m,
+          mine: m.sender === me,
+          animate: firstSeq.current !== null && m.seq > firstSeq.current,
+          seen: m === lastMine && readSeq !== undefined && readSeq >= m.seq,
+          labels,
+          locale,
+          origin,
+          imageOrigins,
+          renderName,
+        }),
+      ),
+      h('li', { ref: end, 'aria-hidden': 'true' }),
+    ),
+    h(AgentSteps, { typing, step, labels }),
+    canSend && h(Suggestions, { items: suggestions, labels, disabled: busy, onPick: (v) => void send(undefined, v) }),
+    canSend &&
+      h(
+        'form',
+        { className: 'hb-chat-compose', onSubmit: send, noValidate: true },
+        h('textarea', {
+          rows: 2,
+          value: text,
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: (e) => {
+            // Enter sends; Shift+Enter starts a new line (not while composing CJK text).
+            if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent?.isComposing) {
+              e.preventDefault();
+              void send();
+            }
+          },
+          'aria-label': labels.placeholder,
+          placeholder: labels.placeholder,
+          'aria-invalid': tooLong || undefined,
+        }),
+        h('button', { type: 'submit', className: 'hb-chat-send', 'aria-label': labels.send, title: labels.send, disabled: busy || !text.trim() || tooLong }, h(Icon, { name: 'send', size: 16 })),
+      ),
+    (error || tooLong) && h('p', { className: 'hb-chat-error', role: 'alert' }, tooLong ? format(labels.tooLong, { n: maxLength }) : error),
+    footer,
+  );
+}
+
+/** The state of a conversation from createConversation(), started while mounted. */
+export function useConversation(conversation) {
+  useEffect(() => conversation?.start(), [conversation]);
+  return useSyncExternalStore(
+    conversation?.subscribe ?? noop,
+    conversation?.get ?? emptyState,
+    conversation?.get ?? emptyState,
+  );
+}
+
+const EMPTY = { messages: [], loading: false, error: null, typing: false, step: undefined, extra: {} };
+const emptyState = () => EMPTY;
+const noop = () => () => {};
+
+/** ChatThread wired to a conversation from createConversation(). */
+export function Chat({ conversation, ...props }) {
+  const state = useConversation(conversation);
+  return h(ChatThread, { messages: state.messages, typing: state.typing, step: state.step, onSend: conversation ? (t) => conversation.send(t) : undefined, ...props });
+}
+
+/** A Hibira Chat API conversation (createChatClient) for <Chat>, made once per client, id and pusher. */
+export function useChatConversation(client, id, options = {}) {
+  const { pusher, me } = options;
+  return useMemo(() => (client && id ? chatConversation(client, id, options) : null), [client, id, pusher, me]); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/server.d.ts

@@ -0,0 +1,14 @@
+import type { AgentMetadata, AgentStep } from './types.js';
+
+export const STEPS: readonly string[];
+export function cleanSuggestions(list: unknown): string[];
+export function agentMetadata(options?: { handoff?: boolean; suggestions?: unknown }): AgentMetadata;
+
+export interface ChatServer {
+  message(channel: string, data: { seq: number; from?: string }): Promise<unknown>;
+  typing(channel: string, data?: { from?: string; step?: AgentStep }): Promise<unknown>;
+  hint(channel: string, event: string, data?: Record<string, unknown>): Promise<unknown>;
+  agentTyping(channel: string, options?: { from?: string; step?: AgentStep }): { step(name: AgentStep): void; stop(): void };
+}
+
+export function createChatServer(options: { pusher: { trigger(channel: string, event: string, data: unknown): unknown }; typingEvery?: number }): ChatServer;

package/server.js

@@ -0,0 +1,94 @@
+// Server side of the protocol (PROTOCOL.md), for Node: tell a conversation's
+// channel that a message arrived, that someone is typing, or what your agent
+// is doing, with the standard `pusher` library pointed at your Hibira app.
+// Your backend stores the messages; the channel only carries hints.
+
+export { STEPS } from './conversation.js';
+
+const MAX_SUGGESTIONS = 3;
+const MAX_SUGGESTION_CHARS = 80;
+const LINK_LIKE = /https?:\/\/|www\.|\w\.(com|io|net|org|dev|app)\b/i;
+
+/**
+ * Keeps up to three short, distinct follow-up questions without links,
+ * line breaks or markup: the customer sends one as their message.
+ * @param {unknown} list
+ */
+export function cleanSuggestions(list) {
+  if (!Array.isArray(list)) return [];
+  const out = [];
+  const seen = new Set();
+  for (const raw of list) {
+    if (typeof raw !== 'string') continue;
+    const v = raw.trim();
+    const n = [...v].length;
+    const key = v.toLowerCase();
+    if (n < 2 || n > MAX_SUGGESTION_CHARS || /[\n\r<>]/.test(v) || LINK_LIKE.test(v) || seen.has(key)) continue;
+    seen.add(key);
+    out.push(v);
+    if (out.length === MAX_SUGGESTIONS) break;
+  }
+  return out;
+}
+
+/**
+ * The metadata of an automatic reply: the components show it as automatic,
+ * with its follow-up suggestions, or as handed to a person.
+ * @param {{ handoff?: boolean, suggestions?: unknown }} [options]
+ */
+export function agentMetadata(options = {}) {
+  const suggestions = options.handoff ? [] : cleanSuggestions(options.suggestions);
+  return {
+    assistant: true,
+    ...(options.handoff ? { handoff: true } : {}),
+    ...(suggestions.length ? { suggestions } : {}),
+  };
+}
+
+/**
+ * @param {{ pusher: { trigger: (channel: string, event: string, data: any) => Promise<any> },
+ *   typingEvery?: number }} options
+ */
+export function createChatServer(options) {
+  if (!options?.pusher?.trigger) throw new TypeError('createChatServer() needs a pusher instance.');
+  const { pusher } = options;
+  const every = options.typingEvery ?? 4_000;
+  const trigger = (channel, event, data) =>
+    Promise.resolve(pusher.trigger(channel, event, data)).catch(() => {
+      // Hints are best effort: the page polls.
+    });
+
+  return {
+    /** A message was stored: pages read what they have not seen. */
+    message: (channel, { seq, from }) => trigger(channel, 'message', { seq, ...(from ? { from } : {}) }),
+    /** Someone on `from`'s side is typing (pages send this every few seconds while a person types). */
+    typing: (channel, { from = 'agent', step } = {}) => trigger(channel, 'typing', { from, ...(step ? { step } : {}) }),
+    /** Any other hint the page handles itself (status, read, ...). */
+    hint: (channel, event, data = {}) => trigger(channel, event, data),
+
+    /**
+     * Shows the agent at work until the returned stop() is called: a typing
+     * hint now, again every few seconds, and at once on each step().
+     * @returns {{ step: (name: string) => void, stop: () => void }}
+     */
+    agentTyping(channel, { from = 'agent', step = 'reading' } = {}) {
+      let current = step;
+      let stopped = false;
+      const send = () => (stopped ? Promise.resolve() : trigger(channel, 'typing', { from, step: current }));
+      void send();
+      const timer = setInterval(send, every);
+      timer.unref?.();
+      return {
+        step(name) {
+          if (name === current || stopped) return;
+          current = name;
+          void send();
+        },
+        stop() {
+          stopped = true;
+          clearInterval(timer);
+        },
+      };
+    },
+  };
+}

package/styles.css

@@ -0,0 +1,119 @@
+/* Default look for @hibira-io/chat-ui components. Every color is a variable
+   on .hb-chat, so restyling is a few overrides. Dark mode follows
+   prefers-color-scheme, or set data-theme="dark" / "light" on any ancestor. */
+
+.hb-chat {
+  --hb-chat-bg: #ffffff;
+  --hb-chat-surface: #f4f3f1;
+  --hb-chat-border: #e6e4df;
+  --hb-chat-ink: #111110;
+  --hb-chat-muted: #6f6d66;
+  --hb-chat-accent: #e5484d;
+  --hb-chat-accent-ink: #ffffff;
+  --hb-chat-radius: 14px;
+  --hb-chat-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --hb-chat-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --hb-chat-max-height: 60vh;
+  color: var(--hb-chat-ink);
+  background: var(--hb-chat-bg);
+  font: 14px/1.5 var(--hb-chat-font);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+}
+.hb-chat * { box-sizing: border-box; }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .hb-chat {
+    --hb-chat-bg: #191918;
+    --hb-chat-surface: #222221;
+    --hb-chat-border: #3b3a37;
+    --hb-chat-ink: #eeeeec;
+    --hb-chat-muted: #b5b3ad;
+    --hb-chat-accent: #ff6369;
+    --hb-chat-accent-ink: #191918;
+  }
+}
+[data-theme='dark'] .hb-chat {
+  --hb-chat-bg: #191918;
+  --hb-chat-surface: #222221;
+  --hb-chat-border: #3b3a37;
+  --hb-chat-ink: #eeeeec;
+  --hb-chat-muted: #b5b3ad;
+  --hb-chat-accent: #ff6369;
+  --hb-chat-accent-ink: #191918;
+}
+
+.hb-chat-thread { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 10px; max-height: var(--hb-chat-max-height); overflow-y: auto; }
+.hb-chat-empty { color: var(--hb-chat-muted); text-align: center; padding: 16px 0; }
+.hb-chat-msg { display: flex; flex-direction: column; max-width: 85%; min-width: 0; }
+.hb-chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
+.hb-chat-bubble { padding: 8px 12px; border-radius: var(--hb-chat-radius); background: var(--hb-chat-surface); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
+.is-mine .hb-chat-bubble { background: var(--hb-chat-accent); color: var(--hb-chat-accent-ink); }
+.hb-chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.75rem; color: var(--hb-chat-muted); }
+.hb-chat-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--hb-chat-border); border-radius: 999px; }
+.hb-chat-badge.is-handoff { border-style: dashed; }
+
+/* Markdown */
+.hb-chat-md { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
+.hb-chat-md > * { margin: 0; }
+.hb-chat-md > * + * { margin-top: 6px; }
+.hb-chat-md ul, .hb-chat-md ol { margin: 0; padding-left: 1.3em; }
+.hb-chat-md li + li { margin-top: 2px; }
+.hb-chat-md li > * { margin-top: 2px; }
+.hb-chat-md a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.hb-chat-md code { font-family: var(--hb-chat-mono); font-size: 0.88em; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); }
+.hb-chat-pre { position: relative; }
+.hb-chat-md pre { margin: 0; padding: 8px 36px 8px 10px; border-radius: 8px; overflow-x: auto; white-space: pre; background: color-mix(in srgb, currentColor 10%, transparent); max-width: 100%; }
+.hb-chat-md pre code { padding: 0; background: none; font-size: 0.85em; }
+.hb-chat-code-copy { position: absolute; top: 4px; right: 4px; opacity: 0.7; }
+.hb-chat-pre:hover .hb-chat-code-copy, .hb-chat-code-copy:focus-visible { opacity: 1; }
+.hb-chat-md blockquote { margin: 0; padding-left: 10px; border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent); opacity: 0.9; }
+.hb-chat-md hr { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
+.hb-chat-md .hb-chat-img { display: inline-block; text-decoration: none; }
+.hb-chat-md .hb-chat-img img { display: block; max-width: min(100%, 320px); max-height: 240px; height: auto; border-radius: 8px; }
+.hb-chat-imglink svg { display: inline-block; vertical-align: -2px; margin-right: 3px; }
+.hb-chat-table { overflow-x: auto; max-width: 100%; }
+.hb-chat-md table { border-collapse: collapse; font-size: 0.9em; }
+.hb-chat-md th, .hb-chat-md td { padding: 3px 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); text-align: left; vertical-align: top; }
+.hb-chat-md th { font-weight: 600; }
+.is-revealing .hb-chat-md > :last-child::after { content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: 0.5; animation: hb-chat-blink 0.9s steps(2) infinite; }
+
+/* Buttons */
+.hb-chat-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
+.hb-chat-icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+.hb-chat-icon-btn:focus-visible, .hb-chat-chip:focus-visible, .hb-chat-send:focus-visible { outline: 2px solid var(--hb-chat-accent); outline-offset: 1px; }
+
+/* Agent steps */
+.hb-chat-typing { margin: 0; font-size: 0.85rem; color: var(--hb-chat-muted); font-style: italic; }
+.hb-chat-steps { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--hb-chat-muted); }
+.hb-chat-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hb-chat-surface); border: 1px solid var(--hb-chat-border); }
+.hb-chat-steps ol { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 3px; }
+.hb-chat-steps li { display: flex; align-items: center; gap: 6px; animation: hb-chat-in 0.25s ease-out; }
+.hb-chat-steps li.is-current { color: var(--hb-chat-ink); font-weight: 500; }
+.hb-chat-steps li.is-done { opacity: 0.75; }
+.hb-chat-spin { animation: hb-chat-spin 0.9s linear infinite; }
+
+/* Suggestions */
+.hb-chat-suggestions { display: flex; flex-direction: column; gap: 4px; }
+.hb-chat-suggestions > span { font-size: 0.8rem; color: var(--hb-chat-muted); }
+.hb-chat-suggestions > div { display: flex; flex-wrap: wrap; gap: 6px; }
+.hb-chat-chip { font: inherit; font-size: 0.85rem; padding: 4px 10px; border: 1px solid var(--hb-chat-border); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; text-align: left; animation: hb-chat-in 0.25s ease-out; }
+.hb-chat-chip:hover:not(:disabled) { background: var(--hb-chat-surface); }
+.hb-chat-chip:disabled { opacity: 0.5; cursor: default; }
+
+/* Reply box */
+.hb-chat-compose { display: flex; gap: 8px; align-items: flex-end; }
+.hb-chat-compose textarea { flex: 1; min-height: 44px; resize: vertical; font: inherit; color: inherit; background: var(--hb-chat-bg); padding: 8px 10px; border: 1px solid var(--hb-chat-border); border-radius: 10px; }
+.hb-chat-compose textarea:focus { outline: 2px solid var(--hb-chat-accent); outline-offset: -1px; }
+.hb-chat-send { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--hb-chat-accent); color: var(--hb-chat-accent-ink); cursor: pointer; }
+.hb-chat-send:disabled { opacity: 0.5; cursor: default; }
+.hb-chat-error { margin: 0; font-size: 0.85rem; color: var(--hb-chat-accent); }
+
+@keyframes hb-chat-spin { to { transform: rotate(360deg); } }
+@keyframes hb-chat-blink { to { opacity: 0; } }
+@keyframes hb-chat-in { from { opacity: 0; transform: translateY(2px); } }
+@media (prefers-reduced-motion: reduce) {
+  .hb-chat-spin, .hb-chat-steps li, .hb-chat-chip, .is-revealing .hb-chat-md > :last-child::after { animation: none; }
+}