@smooai/chat-widget 0.12.0 → 0.13.0

package/README.md

@@ -232,6 +232,7 @@ Declarative attributes mirror the programmatic [`ChatWidgetConfig`](./src/config
 | `mode`          | `mode`           | `popover` (default) or `fullpage`.                 |
 | `start-open`    | `startOpen`      | Open the panel immediately (no launcher click).    |
 | `hide-branding` | `hideBranding`   | Hide the "powered by smooth-operator" tag + footer link. Default shown. |
+| `show-tool-activity` | `showToolActivity` | Show the agent's tool activity as inline chips interleaved with its prose. Default **off** (end-users normally shouldn't see raw tool calls). |
 | —               | `theme`          | Brand colors (see [Theming](#theming)).            |
 | —               | `userName` / `userEmail` | Optional participant identity.             |
 

package/dist/chat-widget.global.js

@@ -11782,6 +11782,7 @@ var SmoothAgentChat = (function(exports) {
 			collectConsent: config.collectConsent ?? true,
 			allowChatRestore: config.allowChatRestore ?? true,
 			allowAnonymous: config.allowAnonymous ?? false,
+			showToolActivity: config.showToolActivity ?? false,
 			theme: {
 				text: theme.text ?? "#f8fafc",
 				background: theme.background ?? "#040d30",
@@ -12943,6 +12944,59 @@ var SmoothAgentChat = (function(exports) {
 			streaming: false
 		};
 	}
+	let toolSeq = 0;
+	const nextToolId = () => `tool-${++toolSeq}`;
+	/** Grow the trailing text block, or open a new one if the last block was a tool. */
+	function growTextBlock(blocks, text) {
+		if (!text) return;
+		const last = blocks[blocks.length - 1];
+		if (last && last.kind === "text") last.text += text;
+		else blocks.push({
+			kind: "text",
+			text
+		});
+	}
+	/**
+	* Fold a `stream_chunk` node-state into the ordered block list, returning `true`
+	* when the chunk carried tool activity.
+	*
+	* Tool activity rides `state.rawResponse.toolCall` / `state.rawResponse.toolResult`
+	* — **NOT** `state.toolResult`. Reading the wrong path leaves every chip stuck on
+	* "running…" forever (the exact bug the daemon SPA hit and this mirror avoids).
+	*/
+	function applyToolChunk(blocks, state) {
+		const raw = state?.rawResponse;
+		if (!raw || typeof raw !== "object") return false;
+		const call = raw.toolCall;
+		const res = raw.toolResult;
+		if (call) {
+			const args = typeof call.arguments === "string" ? call.arguments : JSON.stringify(call.arguments ?? {});
+			blocks.push({
+				kind: "tool",
+				tool: {
+					id: nextToolId(),
+					name: call.name ?? "",
+					args,
+					done: false
+				}
+			});
+			return true;
+		}
+		if (res) {
+			const result = typeof res.result === "string" ? res.result : JSON.stringify(res.result ?? "");
+			for (let i = blocks.length - 1; i >= 0; i--) {
+				const b = blocks[i];
+				if (b && b.kind === "tool" && b.tool.name === (res.name ?? "") && !b.tool.done) {
+					b.tool.done = true;
+					b.tool.isError = !!res.isError;
+					b.tool.result = result;
+					break;
+				}
+			}
+			return true;
+		}
+		return false;
+	}
 	var ConversationController = class {
 		constructor(config, events, store) {
 			_defineProperty(this, "config", void 0);
@@ -13289,11 +13343,13 @@ var SmoothAgentChat = (function(exports) {
 				text: trimmed,
 				streaming: false
 			});
+			const showTools = this.config.showToolActivity === true;
 			const assistant = {
 				id: this.nextId("a"),
 				role: "assistant",
 				text: "",
-				streaming: true
+				streaming: true,
+				blocks: showTools ? [] : void 0
 			};
 			this.messages.push(assistant);
 			this.emitMessages();
@@ -13308,8 +13364,11 @@ var SmoothAgentChat = (function(exports) {
 					const token = event.token ?? event.data?.token ?? "";
 					if (token) {
 						assistant.text += token;
+						if (showTools && assistant.blocks) growTextBlock(assistant.blocks, token);
 						this.emitMessages();
 					}
+				} else if (showTools && event.type === "stream_chunk") {
+					if (assistant.blocks && applyToolChunk(assistant.blocks, event.data?.state)) this.emitMessages();
 				} else this.handleTurnEvent(event);
 				const inner = (await turn).data?.data;
 				const finalText = extractFinalText(inner?.response);
@@ -13319,6 +13378,7 @@ var SmoothAgentChat = (function(exports) {
 				if (citations.length > 0) assistant.citations = citations;
 				const suggestions = extractSuggestions(inner?.response);
 				if (suggestions.length > 0) assistant.suggestions = suggestions;
+				if (assistant.blocks && !assistant.blocks.some((b) => b.kind === "tool")) assistant.blocks = void 0;
 				assistant.streaming = false;
 				this.emitMessages();
 			} catch (err) {
@@ -13630,6 +13690,7 @@ var SmoothAgentChat = (function(exports) {
     --sac-bg: ${theme.background};
     --sac-primary: ${theme.primary};
     --sac-primary-text: ${theme.primaryText};
+    --sac-secondary: ${theme.secondary};
     --sac-assistant-bubble: ${theme.assistantBubble};
     --sac-assistant-bubble-text: ${theme.assistantBubbleText};
     --sac-user-bubble: ${theme.userBubble};
@@ -13942,6 +14003,47 @@ ${mode === "fullpage" ? `
 }
 @keyframes sac-blink { to { opacity: 0 } }
 
+/* Interleaved tool-activity strip (gated by showToolActivity): prose bubbles
+   and inline tool chips stacked in the order the model produced them. */
+.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
+.blocks .bubble { align-self: flex-start; }
+.toolchip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 5px 10px;
+    border-radius: 99px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: color-mix(in srgb, var(--sac-text) 78%, transparent);
+    background: color-mix(in srgb, var(--sac-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 12%, transparent);
+    animation: sac-msg-in .3s var(--sac-ease) both;
+}
+.toolchip .ti { display: inline-flex; flex: none; opacity: .8; }
+.toolchip .ti svg { width: 13px; height: 13px; }
+.toolchip .tn { font-weight: 600; letter-spacing: .01em; }
+.toolchip .ts { opacity: .7; }
+.toolchip .ta {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    opacity: .6;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.toolchip.running { border-color: color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+.toolchip.running .ts { color: var(--sac-primary); opacity: 1; animation: sac-typing 1.3s ease-in-out infinite; }
+.toolchip.done .ts::before { content: '✓ '; }
+.toolchip.error {
+    color: var(--sac-secondary);
+    border-color: color-mix(in srgb, var(--sac-secondary) 50%, transparent);
+    background: color-mix(in srgb, var(--sac-secondary) 10%, transparent);
+}
+.toolchip.error .ts::before { content: '! '; }
+
 /* ─────────────── Rendered markdown (assistant bubbles / snippets) ─────────── */
 /* The renderer (markdown.ts) emits a small allowlisted set of tags; these rules
    keep them legible inside the tight Aurora-Glass bubble + citation card. */
@@ -14384,7 +14486,8 @@ ${mode === "fullpage" ? `
 		"greeting",
 		"start-open",
 		"mode",
-		"hide-branding"
+		"hide-branding",
+		"show-tool-activity"
 	];
 	/**
 	* Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -14406,7 +14509,9 @@ ${mode === "fullpage" ? `
 		/** Identity-intake interrupt — a person. */
 		user: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8.2" r="3.4" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 19.5c.8-3.1 3.4-4.8 6.5-4.8s5.7 1.7 6.5 4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
 		/** Tool-confirmation interrupt — a shield. */
-		shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+		shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+		/** Tool-activity chip — a wrench. */
+		tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`
 	};
 	/**
 	* The identity_intake card: the fields the agent requested (pre-chat form field
@@ -14572,6 +14677,7 @@ ${mode === "fullpage" ? `
 			_defineProperty(this, "streamTarget", "");
 			_defineProperty(this, "displayedLength", 0);
 			_defineProperty(this, "rafId", 0);
+			_defineProperty(this, "prevBlockSig", "");
 			this.root = this.attachShadow({ mode: "open" });
 		}
 		connectedCallback() {
@@ -14643,6 +14749,7 @@ ${mode === "fullpage" ? `
 				collectConsent: this.overrides.collectConsent,
 				allowChatRestore: this.overrides.allowChatRestore,
 				allowAnonymous: this.overrides.allowAnonymous,
+				showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute("show-tool-activity"),
 				theme
 			};
 		}
@@ -15182,15 +15289,38 @@ ${mode === "fullpage" ? `
 			const prev = this.messages;
 			const last = messages[messages.length - 1];
 			const prevLast = prev[prev.length - 1];
-			const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text;
+			const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text || this.blockSig(last) !== this.prevBlockSig;
 			this.messages = messages;
-			if (!structural && last && last.streaming && last.id === this.streamMsgId) {
-				this.streamTarget = last.text;
+			this.prevBlockSig = this.blockSig(last);
+			if (!structural && last && last.streaming && this.tailKey(last) === this.streamMsgId) {
+				this.streamTarget = this.tailText(last);
 				this.ensureRevealLoop();
 				return;
 			}
 			this.renderMessages();
 		}
+		/** True when an assistant message's turn invoked at least one tool. */
+		hasToolBlocks(m) {
+			return !!m?.blocks?.some((b) => b.kind === "tool");
+		}
+		/** Signature that changes only when a tool chip is added or resolved (text growth is 'x'). */
+		blockSig(m) {
+			if (!m?.blocks) return "";
+			return m.blocks.map((b) => b.kind === "tool" ? `t:${b.tool.id}:${b.tool.done ? 1 : 0}` : "x").join("|");
+		}
+		/** The live (last) text block for a tool turn, else the whole message text. */
+		tailText(m) {
+			if (this.hasToolBlocks(m) && m.blocks) {
+				const last = m.blocks[m.blocks.length - 1];
+				return last?.kind === "text" ? last.text : "";
+			}
+			return m.text;
+		}
+		/** Reveal-binding key — composite for a tool-turn tail (so a new trailing block rebinds), else msg id. */
+		tailKey(m) {
+			if (this.hasToolBlocks(m) && m.blocks) return `${m.id}#${m.blocks.length - 1}`;
+			return m.id;
+		}
 		renderMessages() {
 			if (!this.messagesEl) return;
 			this.resetReveal();
@@ -15211,6 +15341,11 @@ ${mode === "fullpage" ? `
 				this.messagesEl.appendChild(chips);
 			}
 			for (const msg of this.messages) {
+				if (msg.role === "assistant" && this.hasToolBlocks(msg)) {
+					this.messagesEl.appendChild(this.buildRow("assistant", this.renderAssistantBlocks(msg)));
+					if (!msg.streaming && msg.citations && msg.citations.length > 0) this.messagesEl.appendChild(this.renderSources(msg.citations));
+					continue;
+				}
 				const bubble = document.createElement("div");
 				bubble.className = `bubble ${msg.role}`;
 				if (msg.role === "assistant" && msg.streaming && !msg.text) {
@@ -15268,19 +15403,77 @@ ${mode === "fullpage" ? `
 		* doesn't restart the reveal from zero), then resumes the loop.
 		*/
 		bindReveal(msg, bubble) {
-			const carryOver = msg.id === this.streamMsgId ? Math.min(this.displayedLength, msg.text.length) : 0;
+			const key = this.tailKey(msg);
+			const target = this.tailText(msg);
+			const carryOver = key === this.streamMsgId ? Math.min(this.displayedLength, target.length) : 0;
 			this.streamBubbleEl = bubble;
-			this.streamMsgId = msg.id;
-			this.streamTarget = msg.text;
+			this.streamMsgId = key;
+			this.streamTarget = target;
 			this.displayedLength = carryOver;
 			if (this.prefersReducedMotion()) {
-				this.displayedLength = msg.text.length;
-				bubble.textContent = msg.text;
+				this.displayedLength = target.length;
+				bubble.textContent = target;
 				return;
 			}
-			bubble.textContent = msg.text.slice(0, this.displayedLength);
+			bubble.textContent = target.slice(0, this.displayedLength);
 			this.ensureRevealLoop();
 		}
+		/**
+		* Render a tool-activity assistant turn as an ordered strip: prose bubbles and
+		* inline tool chips in the order the model produced them (mirrors the daemon
+		* SPA's `blocks`). The live trailing text block (while streaming) binds to the
+		* rAF reveal; earlier/finalized text blocks render as sanitized markdown.
+		*/
+		renderAssistantBlocks(msg) {
+			const wrap = document.createElement("div");
+			wrap.className = "blocks";
+			const blocks = msg.blocks ?? [];
+			const lastIdx = blocks.length - 1;
+			blocks.forEach((block, i) => {
+				if (block.kind === "tool") {
+					wrap.appendChild(this.buildToolChip(block.tool));
+					return;
+				}
+				const bubble = document.createElement("div");
+				bubble.className = "bubble assistant";
+				if (msg.streaming && i === lastIdx) {
+					bubble.classList.add("cursor");
+					this.bindReveal(msg, bubble);
+				} else {
+					bubble.classList.add("md");
+					bubble.innerHTML = renderMarkdown(block.text);
+				}
+				wrap.appendChild(bubble);
+			});
+			return wrap;
+		}
+		/**
+		* A single tool-activity chip: icon + tool name + status (running… / done / error),
+		* with a truncated args preview. Tool name/args are set via `textContent` so a
+		* tool payload can never inject markup.
+		*/
+		buildToolChip(tool) {
+			const chip = document.createElement("div");
+			chip.className = `toolchip ${tool.done ? tool.isError ? "error" : "done" : "running"}`;
+			chip.setAttribute("part", "tool-chip");
+			const icon = document.createElement("span");
+			icon.className = "ti";
+			icon.innerHTML = ICON.tool;
+			const name = document.createElement("span");
+			name.className = "tn";
+			name.textContent = tool.name || "tool";
+			const status = document.createElement("span");
+			status.className = "ts";
+			status.textContent = tool.done ? tool.isError ? "error" : "done" : "running…";
+			chip.append(icon, name, status);
+			if (tool.args && tool.args !== "{}" && tool.args !== "\"\"") {
+				const args = document.createElement("span");
+				args.className = "ta";
+				args.textContent = tool.args.length > 80 ? `${tool.args.slice(0, 80)}…` : tool.args;
+				chip.appendChild(args);
+			}
+			return chip;
+		}
 		/** Start the rAF loop if it isn't already running. */
 		ensureRevealLoop() {
 			if (this.prefersReducedMotion() || typeof requestAnimationFrame !== "function") {