@agentforge-io/chat-sdk 2.0.24 → 2.1.0

package/dist/entities.d.ts

@@ -71,12 +71,43 @@ export interface ChatMessage {
      *  errors, …). View layers should branch on `metadata.kind` before
      *  falling back to `content`. */
     metadata?: ChatMessageMetadata;
+    /** When set, this assistant bubble was produced by a delegated member
+     *  agent (not the primary session agent). View layers resolve the
+     *  member's avatar/name via the session's `members` roster. Absent
+     *  on user messages and on bubbles spoken by the primary agent
+     *  (the orchestrator itself, or any non-team agent). */
+    actingAgentId?: string;
 }
 export interface ChatAgentSummary {
     slug: string;
     name: string;
     description?: string;
 }
+/**
+ * One entry in a Team session's member roster. The orchestrator delegates
+ * to these members; the SDK uses the roster to resolve `actingAgentId`
+ * → avatar/name when rendering per-bubble identity.
+ *
+ * For non-team sessions (a single agent), `members` is empty/undefined
+ * and the SDK falls back to the primary agent's identity on every
+ * assistant bubble — the legacy behaviour.
+ */
+export interface ChatTeamMember {
+    /** Agent id — matches `actingAgentId` on stream chunks and on
+     *  rehydrated `ChatMessage.actingAgentId`. */
+    id: string;
+    name: string;
+    /** Optional avatar URL. When absent, view layers fall back to a
+     *  gradient-with-initial placeholder. */
+    avatarUrl?: string;
+    /** Optional short description ("Handles billing and refunds"). Used
+     *  for tooltip / member-strip rendering on the team channel page. */
+    description?: string;
+    /** Optional per-member routing hint inherited from the team config.
+     *  Surfaced in tooltips so visitors understand the routing policy
+     *  without opening the admin view. */
+    roleHint?: string;
+}
 /**
  * Visual theme returned alongside the agent. Pure data — the SDK doesn't
  * apply it; it just surfaces it so any View layer (widget renderer, React
@@ -110,6 +141,21 @@ export type ChatEvent = {
 } | {
     type: 'message_removed';
     messageId: string;
+}
+/**
+ * Emitted when a Team orchestrator delegates a turn to one of its
+ * members. Carries the member identity so the View layer can render
+ * a subtle "Routing to <member>…" hint (typically as a low-contrast
+ * line between the orchestrator's wrapper bubble and the member's
+ * answer). Pure UX signal — the actual member output arrives via
+ * regular `message_added` / `message_updated` events with the
+ * matching `actingAgentId`.
+ */
+ | {
+    type: 'delegation_routed';
+    memberId: string;
+    memberName?: string;
+    memberAvatarUrl?: string;
 } | {
     type: 'error';
     message: string;

package/dist/react.d.ts

@@ -16,7 +16,7 @@
  * runtime error.
  */
 import { type CSSProperties } from 'react';
-import type { ChatTheme } from './entities';
+import type { ChatTeamMember, ChatTheme } from './entities';
 /**
  * Optional observer fired after the SDK resolves a tool-approval bubble.
  * The SDK owns the network call (it already has `apiBaseUrl` and the
@@ -127,6 +127,49 @@ export interface ChatWidgetProps {
     /** Input placeholder. Defaults to "Type a message…" — override when
      *  the persona speaks a different language. */
     inputPlaceholder?: string;
+    /**
+     * One-click conversation starters rendered as chips ABOVE the input
+     * (and only while the conversation is empty — they fade away after
+     * the first turn). Click pre-fills the input with the chip text so
+     * the visitor can review / edit before sending. Use this for
+     * persona-specific openings ("Schedule a call", "Get a quote") on
+     * the same surface that owns the chat. */
+    shortcuts?: string[];
+    /**
+     * Called when the visitor clicks a shortcut chip. When omitted the
+     * default behaviour is to populate the input with the chip text.
+     * Provide this hook to customise — e.g. send immediately, log the
+     * click, or open an external link instead. */
+    onShortcutClick?: (text: string, index: number) => void;
+    /**
+     * Team-member roster. When the chat is bound to a Team orchestrator,
+     * pass the team's members here so the SDK can render each delegated
+     * bubble with the right member's avatar / name. Each entry's `id`
+     * must match the `actingAgentId` the runtime emits on stream chunks
+     * and on rehydrated `ChatMessage`s. Empty/undefined ⇒ single-agent
+     * session, every bubble uses the primary agent identity (legacy
+     * behaviour).
+     */
+    members?: ChatTeamMember[];
+    /**
+     * Imperative handle. The widget fills this ref on mount with a
+     * small command object the host can call to drive the session
+     * without owning it. Today exposes `sendNow(text)` — sends the
+     * given text as a user turn, bypassing the textarea/draft state.
+     * Use this for chips, suggested replies, programmatic kicks, etc.
+     *
+     * `null` while the session is still booting. Becomes available
+     * once `agent_loaded` has fired internally.
+     */
+    handleRef?: React.MutableRefObject<ChatWidgetHandle | null>;
+}
+/** Imperative surface exposed via ChatWidgetProps.handleRef. Narrow
+ *  on purpose — hosts get a verb, not the whole session. */
+export interface ChatWidgetHandle {
+    /** Send `text` immediately as a user turn. Skips the textarea
+     *  entirely. No-op if the session isn't ready yet (status ===
+     *  'idle' / 'loading'). */
+    sendNow(text: string): void;
 }
 /**
  * Drop-in chat widget. Owns its own `ChatSession` and re-renders on every

package/dist/react.js

@@ -133,6 +133,47 @@ function renderMarkdown(src) {
             out.push(`<blockquote>${renderInline(qbuf.join(' '))}</blockquote>`);
             continue;
         }
+        // GFM-style table: a row of `| col | col |`, then a separator row
+        // `|---|---|` (any number of dashes / optional :), then body rows.
+        // Detection looks two lines ahead so a stray "| pipe |" sentence
+        // in prose doesn't get promoted to a table.
+        if (/^\s*\|.*\|\s*$/.test(line) &&
+            i + 1 < lines.length &&
+            /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(lines[i + 1])) {
+            const splitRow = (raw) => {
+                // Trim outer pipes then split, preserving empty cells. GFM
+                // tolerates escaped pipes (\|) inside cells — we don't, the
+                // server-side markdown the agent emits never includes them.
+                const trimmed = raw.trim().replace(/^\|/, '').replace(/\|$/, '');
+                return trimmed.split('|').map((c) => c.trim());
+            };
+            const header = splitRow(line);
+            i += 2; // skip header + separator
+            const bodyRows = [];
+            while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i])) {
+                bodyRows.push(splitRow(lines[i]));
+                i++;
+            }
+            // We stamp each <td> with a `data-label` attribute so the
+            // mobile stylesheet can show a label before the cell value
+            // when the table collapses to a stacked layout. Cheap on the
+            // desktop side (the CSS just hides the label) and gives mobile
+            // a real card-per-row read instead of a horizontal scroll.
+            const thead = '<thead><tr>' +
+                header.map((c) => `<th>${renderInline(c)}</th>`).join('') +
+                '</tr></thead>';
+            const tbody = '<tbody>' +
+                bodyRows
+                    .map((r) => '<tr>' +
+                    r
+                        .map((c, idx) => `<td data-label="${escapeHtml(header[idx] ?? '')}">${renderInline(c)}</td>`)
+                        .join('') +
+                    '</tr>')
+                    .join('') +
+                '</tbody>';
+            out.push(`<table>${thead}${tbody}</table>`);
+            continue;
+        }
         if (/^\s*$/.test(line)) {
             i++;
             continue;
@@ -145,7 +186,12 @@ function renderMarkdown(src) {
             !/^\s*[-*]\s+/.test(lines[i]) &&
             !/^\s*\d+\.\s+/.test(lines[i]) &&
             !/^\s*>\s?/.test(lines[i]) &&
-            !/^\s*(---+|\*\*\*+|___+)\s*$/.test(lines[i])) {
+            !/^\s*(---+|\*\*\*+|___+)\s*$/.test(lines[i]) &&
+            // Stop on a likely table start (header + separator next line) so
+            // the paragraph collector doesn't swallow the table rows.
+            !(/^\s*\|.*\|\s*$/.test(lines[i]) &&
+                i + 1 < lines.length &&
+                /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(lines[i + 1]))) {
             pbuf.push(lines[i]);
             i++;
         }
@@ -181,7 +227,17 @@ function fallbackCopy(ctx) {
  * SDK event. Consumers don't need to read `session.getState()` themselves.
  */
 function ChatWidget(props) {
-    const { token, apiBaseUrl, inline = false, position, browserSessionId, resumeConversationId, stream, className, style, onApprovalDecision, readOnlyApprovals = false, variant = 'card', greeting, personaName, inputPlaceholder, } = props;
+    const { token, apiBaseUrl, inline = false, position, browserSessionId, resumeConversationId, stream, className, style, onApprovalDecision, readOnlyApprovals = false, variant = 'card', greeting, personaName, shortcuts, onShortcutClick, inputPlaceholder, members, } = props;
+    // Build a lookup so MessageBubble can resolve actingAgentId → identity
+    // in O(1) per render without re-walking the members array. Stable
+    // identity per `members` prop change.
+    const membersById = (0, react_1.useMemo)(() => {
+        const m = new Map();
+        if (members)
+            for (const member of members)
+                m.set(member.id, member);
+        return m;
+    }, [members]);
     const bare = variant === 'bare';
     const [session, setSession] = (0, react_1.useState)(null);
     const [status, setStatus] = (0, react_1.useState)('idle');
@@ -192,7 +248,21 @@ function ChatWidget(props) {
     const [open, setOpen] = (0, react_1.useState)(inline);
     const [draft, setDraft] = (0, react_1.useState)('');
     const messagesRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
     const styleId = (0, react_1.useId)();
+    // Auto-focus the composer on desktop (pointer:fine) once the session
+    // is ready. Skipped on touch devices — focusing a textarea on iOS /
+    // Android opens the on-screen keyboard, which is hostile on a public
+    // profile page where the visitor probably wants to read first.
+    (0, react_1.useEffect)(() => {
+        if (status !== 'ready')
+            return;
+        if (typeof window === 'undefined')
+            return;
+        if (!window.matchMedia('(pointer: fine)').matches)
+            return;
+        inputRef.current?.focus({ preventScroll: true });
+    }, [status]);
     // ── Session lifecycle. Recreate when token / apiBaseUrl changes. ──────
     (0, react_1.useEffect)(() => {
         let cancelled = false;
@@ -303,7 +373,31 @@ function ChatWidget(props) {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: rootClass, style: rootStyle, "data-style-id": styleId, children: [!inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-toggle", "aria-label": open ? 'Close chat' : 'Open chat', "aria-expanded": open, onClick: () => setOpen((v) => !v), children: open ? (0, jsx_runtime_1.jsx)(CloseIcon, {}) : (0, jsx_runtime_1.jsx)(ChatIcon, {}) })), (0, jsx_runtime_1.jsxs)("div", { className: `af-panel ${open ? 'af-open' : ''}`, children: [!bare && ((0, jsx_runtime_1.jsxs)("div", { className: "af-header", children: [theme?.avatarUrl ? (
                             // eslint-disable-next-line @next/next/no-img-element
-                            (0, jsx_runtime_1.jsx)("img", { className: "af-header-avatar", src: theme.avatarUrl, alt: "" })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "af-header-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-header-title", children: personaName ?? theme?.title ?? agent?.name ?? 'Chat' }), (0, jsx_runtime_1.jsx)("div", { className: "af-header-subtitle", children: status === 'loading' ? 'Loading…' : agent?.description ?? '' })] }), !inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-close", onClick: () => setOpen(false), "aria-label": "Close chat", children: (0, jsx_runtime_1.jsx)(CloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "af-messages", ref: messagesRef, children: [bare && greeting && messages.length === 0 && status !== 'loading' && ((0, jsx_runtime_1.jsx)("div", { className: "af-msg af-msg-assistant af-msg-greeting", dangerouslySetInnerHTML: { __html: renderMarkdown(greeting) } })), messages.map((m) => ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, session: session, readOnly: readOnlyApprovals, onDecision: onApprovalDecision, onContinue: () => {
+                            (0, jsx_runtime_1.jsx)("img", { className: "af-header-avatar", src: theme.avatarUrl, alt: "" })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "af-header-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-header-title", children: personaName ?? theme?.title ?? agent?.name ?? 'Chat' }), (0, jsx_runtime_1.jsx)("div", { className: "af-header-subtitle", children: status === 'loading' ? 'Loading…' : agent?.description ?? '' })] }), !inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-close", onClick: () => setOpen(false), "aria-label": "Close chat", children: (0, jsx_runtime_1.jsx)(CloseIcon, {}) }))] })), (0, jsx_runtime_1.jsx)("div", { className: "af-messages", ref: messagesRef, children: messages.map((m, i) => {
+                            // Show the avatar only on the FIRST bubble in a run of
+                            // assistant messages BY THE SAME speaker. A delegation
+                            // boundary (orchestrator → member, or member → next
+                            // member) counts as a new run so each speaker gets their
+                            // avatar surfaced. User/system bubbles never get an avatar.
+                            const prev = messages[i - 1];
+                            const isAssistant = m.role === 'assistant';
+                            const sameAssistantRun = prev?.role === 'assistant' &&
+                                (prev?.actingAgentId ?? null) === (m.actingAgentId ?? null);
+                            const showAvatar = bare && isAssistant && !sameAssistantRun;
+                            // Per-bubble identity resolution. When the chunk carried
+                            // an `actingAgentId` (orchestrator delegated to a member),
+                            // we render the member's avatar/name instead of the
+                            // primary agent's. Falling back to the primary identity
+                            // keeps non-team sessions and orchestrator-self turns
+                            // looking the same as before.
+                            const member = m.actingAgentId
+                                ? membersById.get(m.actingAgentId)
+                                : undefined;
+                            const bubbleAvatarTheme = member
+                                ? { ...theme, avatarUrl: member.avatarUrl }
+                                : theme;
+                            const bubbleAvatarName = member?.name ?? personaName ?? agent?.name;
+                            return ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, session: session, readOnly: readOnlyApprovals, onDecision: onApprovalDecision, bare: bare, showAvatar: showAvatar, avatarTheme: bubbleAvatarTheme, avatarName: bubbleAvatarName, speakerLabel: member?.name, onContinue: () => {
                                     // After a successful Approve, kick the next turn so the
                                     // gate's fast-path consumes the approval and the tool
                                     // actually runs. `silent: true` keeps the literal
@@ -315,15 +409,24 @@ function ChatWidget(props) {
                                     setTimeout(() => {
                                         void session.send('continue', { silent: true });
                                     }, 250);
-                                } }, m.id)))] }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", children: [(0, jsx_runtime_1.jsx)("textarea", { className: "af-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, placeholder: inputPlaceholder ?? 'Type a message…', rows: 1, disabled: status === 'ended' || status === 'loading' || status === 'idle' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-send", onClick: handleSend, disabled: sendDisabled, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(SendIcon, {}) })] }), !bare && (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
+                                } }, m.id));
+                        }) }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), bare && greeting && messages.length === 0 && status !== 'loading' && ((0, jsx_runtime_1.jsx)("div", { className: "af-greeting-slot", children: (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant af-msg-row-greeting", children: [(0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: personaName ?? agent?.name, show: true }), (0, jsx_runtime_1.jsx)("div", { className: "af-msg af-msg-assistant af-msg-greeting", dangerouslySetInnerHTML: { __html: renderMarkdown(greeting) } })] }) })), shortcuts && shortcuts.length > 0 && messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "af-shortcut-row", children: shortcuts.map((text, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-shortcut", onClick: () => {
+                                if (onShortcutClick)
+                                    onShortcutClick(text, i);
+                                else
+                                    setDraft(text);
+                            }, children: text }, `${i}-${text}`))) })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", children: [(0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: "af-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, placeholder: inputPlaceholder ?? 'Type a message…', rows: 1, disabled: status === 'ended' || status === 'loading' || status === 'idle' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-send", onClick: handleSend, disabled: sendDisabled, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(SendIcon, {}) })] }), !bare && (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
 }
-function MessageBubble({ message, session, readOnly, onDecision, onContinue, }) {
+function MessageBubble({ message, session, readOnly, onDecision, onContinue, bare = false, showAvatar = false, avatarTheme, avatarName, speakerLabel, }) {
     const kind = message.metadata?.kind;
     if (kind === 'awaiting_approval') {
-        return ((0, jsx_runtime_1.jsx)(ApprovalBubble, { message: message, session: session, readOnly: readOnly, onDecision: onDecision, onContinue: onContinue }));
+        // Approval / blocked bubbles also count as "assistant-side" so we
+        // wrap them in the same row geometry — keeps the conversation
+        // aligned even when a tool dispatch interrupts the regular flow.
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, (0, jsx_runtime_1.jsx)(ApprovalBubble, { message: message, session: session, readOnly: readOnly, onDecision: onDecision, onContinue: onContinue }), speakerLabel);
     }
     if (kind === 'tool_blocked') {
-        return (0, jsx_runtime_1.jsx)(BlockedBubble, { message: message });
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, (0, jsx_runtime_1.jsx)(BlockedBubble, { message: message }), speakerLabel);
     }
     const cls = `af-msg af-msg-${message.role}${message.role === 'assistant' && message.isStreaming
         ? message.content
@@ -332,17 +435,50 @@ function MessageBubble({ message, session, readOnly, onDecision, onContinue, })
         : ''}`;
     // Typing state (no content yet): render the three-dot indicator, no markdown.
     if (message.role === 'assistant' && message.isStreaming && !message.content) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: cls, children: (0, jsx_runtime_1.jsxs)("span", { className: "af-typing-dots", "aria-label": "Assistant is typing", children: [(0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {})] }) }));
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, (0, jsx_runtime_1.jsx)("div", { className: cls, children: (0, jsx_runtime_1.jsxs)("span", { className: "af-typing-dots", "aria-label": "Assistant is typing", children: [(0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {})] }) }), speakerLabel);
     }
     if (message.role === 'assistant') {
-        return ((0, jsx_runtime_1.jsx)("div", { className: cls, 
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, (0, jsx_runtime_1.jsx)("div", { className: cls, 
             // Output is sanitized by escapeHtml + a fixed tag whitelist in
             // renderMarkdown — safe to inject as HTML.
-            dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) } }));
+            dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) } }), speakerLabel);
     }
     // User & system messages stay as plain text — they're typed verbatim.
+    // No avatar column on the user side; they align right.
     return (0, jsx_runtime_1.jsx)("div", { className: cls, children: message.content });
 }
+/**
+ * Wrap an assistant-side bubble in the row geometry that reserves an
+ * avatar column. Card variant skips the wrapper entirely so its
+ * historical layout is unchanged.
+ */
+function wrapAssistantRow(bare, showAvatar, theme, name, child, 
+/** When set + this is the first bubble of a speaker run (showAvatar
+ *  is true), render the speaker's display name just above the
+ *  bubble. Used by Team chats so members are visually attributed. */
+speakerLabel) {
+    if (!bare)
+        return child;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant", children: [(0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: name, show: showAvatar }), (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-col", children: [showAvatar && speakerLabel ? ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-speaker", children: speakerLabel })) : null, child] })] }));
+}
+/**
+ * Small circular avatar for the assistant-side column. Prefers the
+ * agent's avatarUrl when set; otherwise renders a gradient circle
+ * with the first letter of `name`. The slot reserves space even when
+ * `show` is false so consecutive bubbles stay column-aligned.
+ */
+function AssistantAvatar({ theme, name, show, }) {
+    const initial = (name ?? 'A').trim().charAt(0).toUpperCase() || 'A';
+    if (!show) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "af-msg-avatar af-msg-avatar-spacer", "aria-hidden": true });
+    }
+    if (theme?.avatarUrl) {
+        return (
+        // eslint-disable-next-line @next/next/no-img-element -- vanilla widget; consumer can override host
+        (0, jsx_runtime_1.jsx)("img", { className: "af-msg-avatar af-msg-avatar-img", src: theme.avatarUrl, alt: "", "aria-hidden": true }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-avatar af-msg-avatar-fallback", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("span", { children: initial }) }));
+}
 /**
  * Awaiting-approval bubble. Renders the tool name + a countdown, and
  * either the Approve/Deny buttons (when the host wired the handler)
@@ -517,6 +653,52 @@ const WIDGET_CSS = `
   to { opacity: 1; transform: translateY(0); }
 }
 .af-input-row { padding: 12px; border-top: 1px solid var(--af-border); background: var(--af-bg); display: flex; gap: 8px; align-items: flex-end; }
+.af-shortcut-row {
+  display: flex;
+  gap: 6px;
+  padding: 10px 12px 6px 12px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  background: var(--af-bg);
+  animation: af-msg-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.af-shortcut-row::-webkit-scrollbar { display: none; }
+/* When the shortcut row sits directly above the composer, drop the
+   composer's top padding + border so the two read as a single
+   stacked block. Without this the 12px input-row padding + 1px
+   border-top create a visible gutter between the chips and the
+   textarea. */
+.af-shortcut-row + .af-input-row {
+  padding-top: 4px;
+  border-top: 0;
+}
+.af-shortcut {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-family: inherit;
+  line-height: 1.2;
+  color: var(--af-fg);
+  background: var(--af-input-bg, rgba(148, 163, 184, 0.10));
+  border: 1px solid var(--af-input-border, rgba(148, 163, 184, 0.22));
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
+  white-space: nowrap;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.af-shortcut:hover {
+  background: var(--af-primary-soft, rgba(99, 102, 241, 0.10));
+  border-color: var(--af-primary, #6366f1);
+  transform: translateY(-1px);
+}
+.af-shortcut:active { transform: translateY(0); }
 .af-input { flex: 1; border: 1px solid var(--af-border); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; resize: none; min-height: 40px; max-height: 120px; color: var(--af-fg); background: var(--af-bg); transition: border-color .15s ease, box-shadow .15s ease; }
 .af-input:focus { border-color: var(--af-primary); box-shadow: 0 0 0 3px var(--af-primary-soft); }
 .af-input:disabled { background: var(--af-bubble-bg); cursor: not-allowed; }
@@ -567,26 +749,62 @@ const WIDGET_CSS = `
  *   --af-gap               spacing between messages (default: 12px)
  */
 .af-widget-root.af-variant-bare { font-family: inherit; color: inherit; }
+/* Make the bare-inline root fill its flex parent so the panel +
+ * its sticky input dock to the parent's bottom edge instead of
+ * collapsing to content height. Required for hosts that nest the
+ * widget inside a constrained drawer / column.
+ *
+ * width:100% is mandatory: the base af-widget-root ships
+ * position:fixed which leaves the root with intrinsic-content
+ * width by default. af-inline only resets position, not the width
+ * — so without this the bare-inline widget collapses to the width
+ * of its tallest child (usually the input pill). */
+.af-widget-root.af-variant-bare.af-inline {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 0%;
+}
 .af-widget-root.af-variant-bare.af-inline .af-panel,
 .af-widget-root.af-variant-bare .af-panel {
   position: relative;
   width: 100%;
-  height: 100%;
-  max-height: none;
+  height: 100% !important;
+  max-height: none !important;
   background: transparent;
   border-radius: 0;
   box-shadow: none;
   overflow: visible;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 .af-widget-root.af-variant-bare .af-messages {
   background: transparent;
-  padding: 16px 14px 12px;
-  gap: var(--af-gap, 12px);
+  /* Vertical only. Side gutters belong to the host so messages can
+     align with whatever surrounding column the page renders.
+     Bottom padding creates breathing room between the last bubble
+     and the composer pill — without it the assistant's reply
+     visually collides with the input border. */
+  padding: 6px 0 14px;
+  gap: var(--af-gap, 8px);
+  width: 100%;
+  box-sizing: border-box;
   /* Let the parent flexbox give us a min-height; we'll grow into it
      and scroll internally when the transcript gets longer. */
   min-height: 0;
+  /* Anchor messages to the bottom of the scroll-area when the
+     transcript is shorter than the available height — short
+     conversations sit just above the composer instead of floating
+     up to the top of a tall window. The 'margin-top: auto' on the
+     first child does the same job in pure flex without needing
+     justify-content. */
+}
+.af-widget-root.af-variant-bare .af-messages > :first-child {
+  margin-top: auto;
 }
 .af-widget-root.af-variant-bare .af-msg {
   font-size: 15px;
@@ -613,18 +831,247 @@ const WIDGET_CSS = `
   background: rgba(148, 163, 184, 0.2);
   color: inherit;
 }
-.af-widget-root.af-variant-bare .af-msg-greeting { animation: af-msg-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+/* Tables inside an assistant bubble. We use @media on viewport
+   (not @container) because the bubble row uses max-width 92% and
+   any container-type:inline-size ancestor breaks the
+   percentage-against-flex-parent sizing, collapsing the bubble to
+   one character wide. Trade-off: the editor preview iframe (which
+   is 420px inside a desktop browser) wont show the stacked layout
+   — fine, the preview is for design checks and the layout
+   activates correctly on a real phone. */
+.af-widget-root.af-variant-bare .af-msg-assistant table {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  margin: 6px 0;
+  font-size: 13px;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+.af-widget-root.af-variant-bare .af-msg-assistant thead th {
+  text-align: left;
+  font-weight: 600;
+  padding: 6px 10px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
+  white-space: nowrap;
+}
+.af-widget-root.af-variant-bare .af-msg-assistant tbody td {
+  padding: 5px 10px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
+  vertical-align: top;
+}
+.af-widget-root.af-variant-bare .af-msg-assistant tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Stacked card layout for tables on narrow viewports. Each row
+   becomes a small card; each cell shows its column label inline
+   via the data-label attribute we stamped on render. No horizontal
+   scroll, no truncation. Activates on real mobile (the editor's
+   preview iframe stays in the desktop look since it sits inside a
+   wide browser viewport — that's intentional). */
+@media (max-width: 480px) {
+  .af-widget-root.af-variant-bare .af-msg-assistant table,
+  .af-widget-root.af-variant-bare .af-msg-assistant thead,
+  .af-widget-root.af-variant-bare .af-msg-assistant tbody,
+  .af-widget-root.af-variant-bare .af-msg-assistant tr,
+  .af-widget-root.af-variant-bare .af-msg-assistant td,
+  .af-widget-root.af-variant-bare .af-msg-assistant th {
+    display: block;
+    width: 100%;
+  }
+  .af-widget-root.af-variant-bare .af-msg-assistant thead {
+    position: absolute;
+    left: -9999px;
+  }
+  .af-widget-root.af-variant-bare .af-msg-assistant tbody tr {
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-radius: 10px;
+    padding: 8px 10px;
+    margin: 6px 0;
+  }
+  .af-widget-root.af-variant-bare .af-msg-assistant tbody td {
+    border-bottom: none;
+    padding: 3px 0;
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+  .af-widget-root.af-variant-bare .af-msg-assistant tbody td::before {
+    content: attr(data-label);
+    flex-shrink: 0;
+    min-width: 72px;
+    font-weight: 600;
+    opacity: 0.65;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .af-widget-root.af-variant-bare .af-msg-assistant tbody td[data-label='']::before {
+    display: none;
+  }
+}
+/* Greeting slot — lives between the message scroller and the
+ * shortcut chips. The bubble itself animates in with a small upward
+ * slide + fade so the visitor's eye is pulled there instead of the
+ * static chip row underneath. Avatar slides in alongside it. The
+ * 120ms delay gives the chip row a beat to render first so the
+ * greeting reads as the assistant *responding* to the page loading,
+ * not part of the static UI. */
+.af-widget-root.af-variant-bare .af-greeting-slot {
+  padding: 4px 0 6px;
+}
+.af-widget-root.af-variant-bare .af-msg-row-greeting {
+  opacity: 0;
+  animation: af-greeting-row-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms forwards;
+}
+.af-widget-root.af-variant-bare .af-msg-greeting {
+  opacity: 0;
+  transform: translateY(6px);
+  animation: af-greeting-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms forwards;
+}
+@keyframes af-greeting-row-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes af-greeting-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .af-widget-root.af-variant-bare .af-msg-row-greeting,
+  .af-widget-root.af-variant-bare .af-msg-greeting {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Slack-style assistant rows: avatar column on the left, bubble on
+ * the right. The row IS the alignment container — align-self targets
+ * the row, not the bubble, so user/assistant rows still push opposite
+ * edges. */
+.af-widget-root.af-variant-bare .af-msg-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: 92%;
+}
+.af-widget-root.af-variant-bare .af-msg-row-assistant {
+  align-self: flex-start;
+}
+.af-widget-root.af-variant-bare .af-msg-row .af-msg {
+  /* The bubble is now a flex child of the row. Reset the max-width
+   * the row already enforces — otherwise we'd stack two caps. */
+  max-width: 100%;
+  align-self: flex-end;
+}
+/* Column wrapper around the bubble so a Team speaker label can sit
+ * above the bubble without disrupting the avatar's bottom-alignment. */
+.af-widget-root.af-variant-bare .af-msg-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+.af-widget-root.af-variant-bare .af-msg-speaker {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--af-muted, #64748b);
+  padding-left: 2px;
+  letter-spacing: 0.01em;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  /* Stick to the bubble's bottom edge so multi-line replies still
+   * show the avatar next to the last line — same as iMessage. */
+  align-self: flex-end;
+  margin-bottom: 2px;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-spacer {
+  background: transparent;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-img {
+  object-fit: cover;
+  display: block;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  background-image: linear-gradient(135deg, var(--af-primary, #8b5cf6), color-mix(in srgb, var(--af-primary, #8b5cf6) 60%, #6366f1));
+}
+@media (min-width: 768px) {
+  .af-widget-root.af-variant-bare .af-msg-avatar { width: 30px; height: 30px; }
+  .af-widget-root.af-variant-bare .af-msg-avatar-fallback { font-size: 13px; }
+}
 .af-widget-root.af-variant-bare .af-input-row {
-  position: sticky;
-  bottom: 0;
-  padding: 10px 12px 14px;
+  /* Plain flex item. af-messages carries flex:1 so it eats the
+     remaining space and naturally pushes the input row to the
+     bottom of the panel. Sticky positioning across host containers
+     was unreliable (different ancestors had different overflow
+     semantics); flex layout is deterministic.
+     width:100% + box-sizing:border-box so the row fills its
+     parent cross-axis instead of shrinking to its children
+     intrinsic width — without these, certain ancestor combos
+     (Radix portals, Sheet content) left the row offset from the
+     edges and pushed the send button out of view. */
+  flex-shrink: 0;
+  width: 100%;
+  box-sizing: border-box;
+  /* Vertical only — horizontal padding lives on the host wrapper so
+     the input pill can stretch edge-to-edge when the host wants
+     (e.g. a sheet drawer). Templates that want side gutters add
+     their own padding above the widget. */
+  padding: 10px 0 14px;
   border-top: none;
-  background: transparent;
+  /* Soft fade so messages scroll behind the input without bleeding
+     through. Host can override via --af-input-row-bg (e.g. solid
+     color) for templates that want a hard band instead. */
+  background: var(
+    --af-input-row-bg,
+    linear-gradient(to top, rgba(255, 255, 255, 0.92) 60%, rgba(255, 255, 255, 0))
+  );
+  backdrop-filter: saturate(140%) blur(8px);
+  -webkit-backdrop-filter: saturate(140%) blur(8px);
   gap: 8px;
 }
+@media (prefers-color-scheme: dark) {
+  .af-widget-root.af-variant-bare .af-input-row {
+    background: var(
+      --af-input-row-bg,
+      linear-gradient(to top, rgba(15, 23, 42, 0.85) 60%, rgba(15, 23, 42, 0))
+    );
+  }
+}
+/* In the bare variant the shortcut row also lives directly above
+   the composer. Tighten the gap so the chips read as a continuous
+   stack with the input. */
+.af-widget-root.af-variant-bare .af-shortcut-row {
+  padding: 0 12px 6px;
+  background: transparent;
+}
+.af-widget-root.af-variant-bare .af-shortcut-row + .af-input-row {
+  padding-top: 2px;
+}
 .af-widget-root.af-variant-bare .af-input {
   background: var(--af-input-bg, rgba(148, 163, 184, 0.10));
-  color: inherit;
+  /* Foreground is overridable. Defaults to currentColor so the
+     input inherits the page text color (light text in dark mode,
+     dark text in light mode) instead of getting frozen at the
+     bg's "neutral" value, which was causing low-contrast text on
+     dark backgrounds when the host overrode --af-input-bg. */
+  color: var(--af-input-fg, currentColor);
   border: 1px solid var(--af-input-border, rgba(148, 163, 184, 0.25));
   border-radius: var(--af-input-radius, 24px);
   padding: 12px 16px;
@@ -632,13 +1079,21 @@ const WIDGET_CSS = `
   min-height: 48px;
   line-height: 1.4;
 }
+.af-widget-root.af-variant-bare .af-input::placeholder {
+  color: var(--af-input-placeholder, currentColor);
+  opacity: 0.5;
+}
 .af-widget-root.af-variant-bare .af-input:focus {
   border-color: var(--af-primary);
   box-shadow: 0 0 0 3px var(--af-primary-soft);
 }
 .af-widget-root.af-variant-bare .af-input:disabled { background: rgba(148, 163, 184, 0.06); }
 .af-widget-root.af-variant-bare .af-send {
-  background: var(--af-primary);
+  /* Host overrides via --af-send-bg; otherwise the primary color
+     drives the send button. Same fallback pattern used elsewhere
+     so templates can opt into different palettes per surface
+     without redeclaring the primary. */
+  background: var(--af-send-bg, var(--af-primary));
   color: #fff;
   border-radius: 50%;
   width: 44px;
@@ -655,23 +1110,13 @@ const WIDGET_CSS = `
 }
 .af-widget-root.af-variant-bare .af-typing-dots span { background: currentColor; opacity: 0.5; }
 
-/* Mobile-first sticky input: on narrow viewports the input docks to
- * the viewport's bottom edge so the visitor never has to scroll to
- * find it (same affordance as iMessage / WhatsApp). On desktop the
- * sticky behaviour scopes to the chat container, which is enough. */
+/* On narrow viewports add safe-area padding so the input clears the
+ * home indicator on iPhones. Base sticky + backdrop styles above
+ * apply at every viewport — no override needed. */
 @media (max-width: 640px) {
   .af-widget-root.af-variant-bare .af-input-row {
-    position: sticky;
     bottom: env(safe-area-inset-bottom, 0);
     padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
-    background: var(--af-input-row-bg, rgba(255, 255, 255, 0.85));
-    backdrop-filter: saturate(140%) blur(8px);
-    -webkit-backdrop-filter: saturate(140%) blur(8px);
-  }
-}
-@media (max-width: 640px) and (prefers-color-scheme: dark) {
-  .af-widget-root.af-variant-bare .af-input-row {
-    background: var(--af-input-row-bg, rgba(15, 23, 42, 0.7));
   }
 }
 `;

package/dist/session.js

@@ -190,11 +190,23 @@ class ChatSession {
     // ─── Internals ──────────────────────────────────────────────────────────
     async runStream(text, assistant) {
         this.setStatus('sending');
+        // The "active" message is the one we're currently appending
+        // text_deltas into. For non-team sessions it's always the initial
+        // `assistant` message we seeded before calling runStream. For team
+        // sessions, every `delegation_start` opens a NEW message (the
+        // member's bubble) and `delegation_result` closes it back to the
+        // orchestrator's bubble. Hoisted out of the try so the catch can
+        // reach it during cleanup.
+        let active = assistant;
+        let activeFull = ''; // running text of the active message only
+        // Aggregate full transcript across every speaker so the empty-
+        // response guard at the end still works when an orchestrator turn
+        // delegates and the member's text is the only content.
+        let totalFull = '';
         try {
             const generator = this.state.conversationId
                 ? this.transport.streamSendMessage(this.state.conversationId, text, this.browserSessionId)
                 : this.transport.streamCreateConversation(text, this.browserSessionId);
-            let full = '';
             let sawAnyChunk = false;
             for await (const evt of generator) {
                 if (evt.kind === 'conversation') {
@@ -211,6 +223,61 @@ class ChatSession {
                     // legacy widget (no metadata renderer) still shows something
                     // readable.
                     const chunkType = evt.chunk.type;
+                    // Team orchestrator → member handoff. Open a new assistant
+                    // message tagged with the member's id; subsequent text_deltas
+                    // (which the server tags with `actingAgentId` matching the
+                    // delegation) flow into THIS bubble until delegation_result
+                    // closes the handoff and we revert to the orchestrator.
+                    if (chunkType === 'delegation_start') {
+                        const c = evt.chunk;
+                        // Close the orchestrator's wrapper (if any text accumulated).
+                        if (activeFull) {
+                            active.isStreaming = false;
+                            this.updateMessage(active);
+                        }
+                        // Open the member's bubble.
+                        const memberMsg = {
+                            id: makeMessageId('a'),
+                            role: 'assistant',
+                            content: '',
+                            createdAt: new Date(),
+                            isStreaming: true,
+                            actingAgentId: c.subAgentId,
+                        };
+                        this.appendMessage(memberMsg);
+                        active = memberMsg;
+                        activeFull = '';
+                        // UX hint: surface the routing decision so view layers can
+                        // render "Routing to <member>…" without parsing the stream.
+                        this.emit({
+                            type: 'delegation_routed',
+                            memberId: c.subAgentId,
+                            memberName: c.subAgentName,
+                            memberAvatarUrl: c.subAgentAvatarUrl,
+                        });
+                        continue;
+                    }
+                    if (chunkType === 'delegation_result') {
+                        // Close the member's bubble and re-open an orchestrator
+                        // bubble in case the orchestrator wants to add a closing
+                        // line ("Anything else?"). If no orchestrator text follows
+                        // we drop the empty wrapper at end-of-stream.
+                        if (activeFull) {
+                            active.isStreaming = false;
+                            this.updateMessage(active);
+                        }
+                        const wrapMsg = {
+                            id: makeMessageId('a'),
+                            role: 'assistant',
+                            content: '',
+                            createdAt: new Date(),
+                            isStreaming: true,
+                        };
+                        this.appendMessage(wrapMsg);
+                        active = wrapMsg;
+                        activeFull = '';
+                        continue;
+                    }
                     if (chunkType === 'awaiting_approval') {
                         const c = evt.chunk;
                         assistant.metadata = {
@@ -225,7 +292,8 @@ class ChatSession {
                         // Plain-text fallback for legacy clients that don't render
                         // metadata.kind. Capable widgets ignore `content` and read
                         // `metadata.copy` directly.
-                        assistant.content = full || c.copy?.body || (c.connectorName ?? '');
+                        assistant.content =
+                            totalFull || c.copy?.body || (c.connectorName ?? '');
                         this.updateMessage(assistant);
                         continue;
                     }
@@ -240,7 +308,10 @@ class ChatSession {
                             copy: c.copy,
                         };
                         assistant.content =
-                            full || c.copy?.blockedBody || c.reason || (c.connectorName ?? '');
+                            totalFull ||
+                                c.copy?.blockedBody ||
+                                c.reason ||
+                                (c.connectorName ?? '');
                         this.updateMessage(assistant);
                         continue;
                     }
@@ -249,9 +320,10 @@ class ChatSession {
                         continue;
                     if (this.state.status !== 'streaming')
                         this.setStatus('streaming');
-                    full += delta;
-                    assistant.content = full;
-                    this.updateMessage(assistant);
+                    activeFull += delta;
+                    totalFull += delta;
+                    active.content = activeFull;
+                    this.updateMessage(active);
                     continue;
                 }
                 if (evt.kind === 'error') {
@@ -270,26 +342,47 @@ class ChatSession {
             // chunk, the bubble carries that structured payload and is a
             // legitimate terminal state — not a missing reply. Skip the
             // "empty response" guard for those.
-            if (!full && !assistant.metadata) {
+            if (!totalFull && !assistant.metadata) {
                 throw new Error(sawAnyChunk
                     ? 'The model returned an empty response.'
                     : 'No response received from the server.');
             }
-            assistant.isStreaming = false;
-            this.updateMessage(assistant);
-            this.setStatus('ready');
-            return full;
-        }
-        catch (err) {
-            // Drop the half-built assistant message — leaving an empty bubble
-            // around is worse than no bubble at all.
-            if (!assistant.content) {
-                this.removeMessage(assistant.id);
+            // If we opened an orchestrator wrapper after the last delegation
+            // and the orchestrator didn't add a closing line, drop the empty
+            // wrapper instead of leaving a ghost bubble.
+            if (active !== assistant && !activeFull) {
+                this.removeMessage(active.id);
             }
             else {
-                assistant.isStreaming = false;
-                this.updateMessage(assistant);
+                active.isStreaming = false;
+                this.updateMessage(active);
             }
+            // The original `assistant` slot can also be empty if the first
+            // chunk we saw was a delegation_start (orchestrator chose to
+            // delegate immediately without prefacing). Drop it in that case.
+            if (assistant !== active && !assistant.content) {
+                this.removeMessage(assistant.id);
+            }
+            this.setStatus('ready');
+            return totalFull;
+        }
+        catch (err) {
+            // Drop the half-built bubble — leaving empty bubbles around is
+            // worse than no bubble at all. We may have multiple in flight
+            // (orchestrator wrapper + member) when delegating; clean each
+            // independently.
+            const cleanup = (m) => {
+                if (!m.content) {
+                    this.removeMessage(m.id);
+                }
+                else {
+                    m.isStreaming = false;
+                    this.updateMessage(m);
+                }
+            };
+            cleanup(assistant);
+            if (active !== assistant)
+                cleanup(active);
             this.handleError(err);
             return assistant.content;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.0.24",
+  "version": "2.1.0",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",