@agentforge-io/chat-sdk 2.0.24 → 2.0.25

package/dist/react.d.ts

@@ -127,6 +127,39 @@ 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;
+    /**
+     * 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,7 @@ 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, } = props;
     const bare = variant === 'bare';
     const [session, setSession] = (0, react_1.useState)(null);
     const [status, setStatus] = (0, react_1.useState)('idle');
@@ -303,27 +349,45 @@ 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: () => {
-                                    // 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
-                                    // "continue" prompt out of the visible transcript —
-                                    // the visitor just sees the assistant's next reply
-                                    // appearing under the "Approved" pill.
-                                    if (!session)
-                                        return;
-                                    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" })] })] }));
-}
-function MessageBubble({ message, session, readOnly, onDecision, 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.jsxs)("div", { className: "af-messages", ref: messagesRef, children: [bare && greeting && messages.length === 0 && status !== 'loading' && ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant", 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) } })] })), messages.map((m, i) => {
+                                // Show the avatar only on the FIRST bubble in a run of
+                                // assistant messages. Consecutive assistant turns get a
+                                // transparent placeholder so the column stays aligned.
+                                // User/system bubbles never get an avatar.
+                                const prev = messages[i - 1];
+                                const isAssistant = m.role === 'assistant';
+                                const prevWasAssistant = prev?.role === 'assistant';
+                                const showAvatar = bare && isAssistant && !prevWasAssistant;
+                                return ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, session: session, readOnly: readOnlyApprovals, onDecision: onApprovalDecision, bare: bare, showAvatar: showAvatar, avatarTheme: theme, avatarName: personaName ?? agent?.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
+                                        // "continue" prompt out of the visible transcript —
+                                        // the visitor just sees the assistant's next reply
+                                        // appearing under the "Approved" pill.
+                                        if (!session)
+                                            return;
+                                        setTimeout(() => {
+                                            void session.send('continue', { silent: true });
+                                        }, 250);
+                                    } }, m.id));
+                            })] }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), 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", { 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, bare = false, showAvatar = false, avatarTheme, avatarName, }) {
     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 }));
     }
     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 }));
     }
     const cls = `af-msg af-msg-${message.role}${message.role === 'assistant' && message.isStreaming
         ? message.content
@@ -332,17 +396,46 @@ 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", {})] }) }));
     }
     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) } }));
     }
     // 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) {
+    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 }), 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 +610,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,6 +706,23 @@ 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;
+}
 .af-widget-root.af-variant-bare.af-inline .af-panel,
 .af-widget-root.af-variant-bare .af-panel {
   position: relative;
@@ -579,11 +735,20 @@ const WIDGET_CSS = `
   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;
@@ -613,18 +778,197 @@ const WIDGET_CSS = `
   background: rgba(148, 163, 184, 0.2);
   color: inherit;
 }
+/* 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;
+  }
+}
 .af-widget-root.af-variant-bare .af-msg-greeting { animation: af-msg-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+
+/* 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;
+}
+.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 +976,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 +1007,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "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",