@agentforge-io/chat-sdk 2.0.23 → 2.0.24

package/dist/react.d.ts

@@ -97,6 +97,36 @@ export interface ChatWidgetProps {
      * legitimately decide.
      */
     readOnlyApprovals?: boolean;
+    /**
+     * Chrome preset.
+     *
+     *   - `'card'` (default): the historical look. Rounded card, header
+     *     with the agent name, "Powered by AgentForge" footer, opaque
+     *     background. Designed to drop into a customer's site as a
+     *     visually distinct widget.
+     *   - `'bare'`: no card, no header, no footer, transparent background.
+     *     Lets the host page wrap the chat in its own template. The host
+     *     drives the visible chrome via the surrounding layout + CSS
+     *     variables (`--af-primary`, `--af-bubble-bg`, etc.). Use this on
+     *     a dedicated agent page where the page IS the chat surface.
+     */
+    variant?: 'card' | 'bare';
+    /**
+     * Initial assistant message rendered before the visitor types. Client-only —
+     * we don't send it to the server, so it costs zero tokens. Use it for
+     * "Hey, I'm Fabian, how can I help you?"-style openings.
+     */
+    greeting?: string;
+    /**
+     * Display name for the agent in the header / typing indicators. When
+     * unset we fall back to the agent's configured `name`. The visitor sees
+     * "personaName" alongside the avatar so a single workspace can run
+     * multiple agents that feel like distinct people.
+     */
+    personaName?: string;
+    /** Input placeholder. Defaults to "Type a message…" — override when
+     *  the persona speaks a different language. */
+    inputPlaceholder?: string;
 }
 /**
  * Drop-in chat widget. Owns its own `ChatSession` and re-renders on every

package/dist/react.js

@@ -181,7 +181,8 @@ 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, } = props;
+    const { token, apiBaseUrl, inline = false, position, browserSessionId, resumeConversationId, stream, className, style, onApprovalDecision, readOnlyApprovals = false, variant = 'card', greeting, personaName, inputPlaceholder, } = props;
+    const bare = variant === 'bare';
     const [session, setSession] = (0, react_1.useState)(null);
     const [status, setStatus] = (0, react_1.useState)('idle');
     const [agent, setAgent] = (0, react_1.useState)();
@@ -281,6 +282,7 @@ function ChatWidget(props) {
         'af-widget-root',
         `af-pos-${resolvedPosition}`,
         inline ? 'af-inline' : '',
+        bare ? 'af-variant-bare' : 'af-variant-card',
         className ?? '',
     ]
         .filter(Boolean)
@@ -299,21 +301,21 @@ 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: [(0, jsx_runtime_1.jsxs)("div", { className: "af-header", children: [theme?.avatarUrl ? (
+    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: 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) => ((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: "Type a message\u2026", 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, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
+                            (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, }) {
     const kind = message.metadata?.kind;
@@ -546,4 +548,130 @@ const WIDGET_CSS = `
 .af-msg-blocked { align-self: flex-start; max-width: 90%; padding: 10px 14px; border-radius: 14px; border-bottom-left-radius: 4px; font-size: 13px; line-height: 1.5; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; animation: af-msg-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 .af-blocked-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
 .af-blocked-body { font-size: 12px; line-height: 1.5; }
+
+/* ─── variant="bare" ────────────────────────────────────────────────────
+ * Drops the card chrome and lets the host page own the surroundings.
+ * Inherits font-family and color from the parent so the chat blends
+ * into whatever wrapper the host renders (templates own those values
+ * via CSS variables on a parent div).
+ *
+ * Host-overridable variables — all optional, sensible defaults below:
+ *   --af-primary           accent color (send button, focus ring, links)
+ *   --af-bubble-user-bg    user message background (default: primary)
+ *   --af-bubble-user-fg    user message text (default: white)
+ *   --af-bubble-agent-bg   assistant message background (default: subtle)
+ *   --af-bubble-agent-fg   assistant message text (default: inherit)
+ *   --af-bubble-radius     bubble corner radius (default: 18px)
+ *   --af-input-bg          input background (default: subtle)
+ *   --af-input-radius      input corner radius (default: 24px — pill)
+ *   --af-gap               spacing between messages (default: 12px)
+ */
+.af-widget-root.af-variant-bare { font-family: inherit; color: inherit; }
+.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;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+.af-widget-root.af-variant-bare .af-messages {
+  background: transparent;
+  padding: 16px 14px 12px;
+  gap: var(--af-gap, 12px);
+  /* 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;
+}
+.af-widget-root.af-variant-bare .af-msg {
+  font-size: 15px;
+  line-height: 1.5;
+  border-radius: var(--af-bubble-radius, 18px);
+  padding: 10px 14px;
+  max-width: 86%;
+}
+.af-widget-root.af-variant-bare .af-msg-user {
+  background: var(--af-bubble-user-bg, var(--af-primary));
+  color: var(--af-bubble-user-fg, #ffffff);
+  border-bottom-right-radius: 6px;
+}
+.af-widget-root.af-variant-bare .af-msg-assistant {
+  background: var(--af-bubble-agent-bg, rgba(148, 163, 184, 0.12));
+  color: var(--af-bubble-agent-fg, inherit);
+  border: none;
+  border-bottom-left-radius: 6px;
+}
+.af-widget-root.af-variant-bare .af-msg-assistant a {
+  color: var(--af-primary);
+}
+.af-widget-root.af-variant-bare .af-msg-assistant code {
+  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); }
+.af-widget-root.af-variant-bare .af-input-row {
+  position: sticky;
+  bottom: 0;
+  padding: 10px 12px 14px;
+  border-top: none;
+  background: transparent;
+  gap: 8px;
+}
+.af-widget-root.af-variant-bare .af-input {
+  background: var(--af-input-bg, rgba(148, 163, 184, 0.10));
+  color: inherit;
+  border: 1px solid var(--af-input-border, rgba(148, 163, 184, 0.25));
+  border-radius: var(--af-input-radius, 24px);
+  padding: 12px 16px;
+  font-size: 15px;
+  min-height: 48px;
+  line-height: 1.4;
+}
+.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);
+  color: #fff;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+  align-self: flex-end;
+  box-shadow: 0 6px 16px var(--af-primary-soft);
+}
+.af-widget-root.af-variant-bare .af-error {
+  background: transparent;
+  border-top: none;
+  padding: 6px 14px;
+}
+.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. */
+@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.23",
+  "version": "2.0.24",
   "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",