@smooai/chat-widget 0.5.2 → 0.6.0

package/dist/chat-widget.global.js

@@ -874,6 +874,305 @@ var SmoothAgentChat = (function(exports) {
 	*/
 	const SMOOTH_LOGO_SVG = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 550 135\">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: url(#linear-gradient-3);\n      }\n\n      .cls-2 {\n        fill: url(#linear-gradient-2);\n      }\n\n      .cls-3 {\n        fill: url(#linear-gradient);\n        fill-rule: evenodd;\n      }\n    </style>\n    <linearGradient id=\"linear-gradient\" x1=\"115.59\" y1=\"112.81\" x2=\"25.08\" y2=\"22.3\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".3\" stop-color=\"#f49f0a\"/>\n      <stop offset=\".79\" stop-color=\"#fb7a4d\"/>\n      <stop offset=\"1\" stop-color=\"#ff6b6c\"/>\n    </linearGradient>\n    <linearGradient id=\"linear-gradient-2\" x1=\"360.91\" y1=\"152.01\" x2=\"202.32\" y2=\"-6.59\" xlink:href=\"#linear-gradient\"/>\n    <linearGradient id=\"linear-gradient-3\" x1=\"443.91\" y1=\"30.15\" x2=\"531.36\" y2=\"117.59\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\".43\" stop-color=\"#00a6a6\"/>\n      <stop offset=\"1\" stop-color=\"#1238dd\"/>\n    </linearGradient>\n  </defs>\n  <path class=\"cls-3\" d=\"M48.28,14.96c-12.39,5.21-22.54,14.64-28.65,26.61-6.12,11.97-7.8,25.72-4.77,38.81,3.04,13.09,10.6,24.69,21.36,32.75,10.76,8.06,24.02,12.05,37.44,11.28,13.42-.77,26.13-6.26,35.9-15.5,9.76-9.24,15.95-21.63,17.46-34.99,1.51-13.36-1.74-26.82-9.19-38.01-1.07-1.61-.64-3.78.97-4.85,1.61-1.07,3.78-.64,4.85.97,8.36,12.56,12.02,27.68,10.32,42.67-1.7,15-8.64,28.91-19.61,39.28-10.96,10.37-25.24,16.54-40.31,17.4-15.07.87-29.96-3.62-42.04-12.66-12.08-9.05-20.58-22.07-23.99-36.77-3.41-14.7-1.51-30.14,5.35-43.58,6.87-13.44,18.26-24.02,32.17-29.87,13.91-5.85,29.44-6.6,43.85-2.11,1.85.57,2.88,2.54,2.3,4.38-.57,1.85-2.54,2.88-4.38,2.3-12.83-4-26.67-3.33-39.06,1.88ZM111.39,19.75c0,2.07-1.68,3.75-3.75,3.75s-3.75-1.68-3.75-3.75,1.68-3.75,3.75-3.75,3.75,1.68,3.75,3.75ZM64.64,59.93c0,1.91,2.39,2.56,7.69,3.88,3.89.97,6.6,2.18,8.15,3.63,1.53,1.45,2.29,3.53,2.29,6.25,0,3.57-1.03,6.26-3.11,8.08-2.07,1.82-5.09,2.73-9.09,2.73h-9.6c-1.97,0-3.57-1.6-3.59-3.57-.01-1.99,1.6-3.61,3.59-3.61h9.41c3.15-.12,4.79-.95,4.91-2.47,0-1.3-1.03-2.21-3.07-2.73-6.91-1.72-11.11-3.44-12.6-5.15-1.48-1.71-2.23-3.77-2.23-6.19,0-6.59,3.2-9.85,9.59-9.8h10.77c1.99,0,3.6,1.61,3.6,3.59s-1.61,3.59-3.6,3.59h-9.69c-1.83,0-3.43.06-3.43,1.77Z\"/>\n  <path class=\"cls-2\" d=\"M205.52,48.44h-8.86c-.44-3.75-2.23-6.65-5.38-8.72-3.16-2.07-7.03-3.1-11.6-3.1h0c-3.35,0-6.27.54-8.78,1.62-2.49,1.09-4.44,2.59-5.84,4.48-1.39,1.89-2.08,4.05-2.08,6.46h0c0,2.01.49,3.75,1.46,5.2.97,1.44,2.22,2.63,3.74,3.58,1.53.95,3.13,1.72,4.8,2.32,1.68.6,3.22,1.09,4.62,1.46h0l7.68,2.06c1.97.52,4.17,1.23,6.6,2.14,2.43.92,4.75,2.16,6.98,3.72,2.23,1.56,4.07,3.56,5.52,6,1.45,2.44,2.18,5.43,2.18,8.98h0c0,4.08-1.07,7.77-3.2,11.08-2.12,3.29-5.22,5.91-9.3,7.86-4.08,1.95-9.02,2.92-14.82,2.92h0c-5.43,0-10.11-.87-14.06-2.62-3.95-1.75-7.05-4.19-9.3-7.32-2.25-3.12-3.53-6.75-3.84-10.88h9.46c.25,2.85,1.22,5.21,2.9,7.06,1.69,1.87,3.83,3.25,6.42,4.14,2.6.89,5.41,1.34,8.42,1.34h0c3.49,0,6.63-.57,9.4-1.72,2.79-1.13,4.99-2.73,6.62-4.8,1.63-2.05,2.44-4.46,2.44-7.22h0c0-2.51-.7-4.55-2.1-6.12-1.41-1.57-3.26-2.85-5.54-3.84-2.29-.99-4.77-1.85-7.44-2.58h0l-9.3-2.66c-5.91-1.71-10.59-4.13-14.04-7.28-3.44-3.16-5.16-7.29-5.16-12.38h0c0-4.23,1.15-7.93,3.46-11.1,2.29-3.16,5.39-5.62,9.3-7.38,3.91-1.76,8.27-2.64,13.08-2.64h0c4.88,0,9.21.87,13,2.6,3.8,1.73,6.81,4.11,9.04,7.12,2.23,3,3.4,6.41,3.52,10.22h0ZM229.16,105.18h-8.72v-56.74h8.42v8.86h.74c1.19-3.03,3.1-5.38,5.74-7.06,2.63-1.69,5.79-2.54,9.48-2.54h0c3.75,0,6.87.85,9.36,2.54,2.51,1.68,4.46,4.03,5.86,7.06h.58c1.45-2.92,3.63-5.25,6.54-7,2.91-1.73,6.39-2.6,10.46-2.6h0c5.07,0,9.21,1.58,12.44,4.74,3.23,3.17,4.84,8.09,4.84,14.76h0v37.98h-8.72v-37.98c0-4.19-1.14-7.18-3.42-8.98-2.29-1.79-4.99-2.68-8.1-2.68h0c-3.99,0-7.07,1.2-9.26,3.6-2.2,2.4-3.3,5.43-3.3,9.1h0v36.94h-8.86v-38.86c0-3.23-1.05-5.83-3.14-7.82-2.09-1.97-4.79-2.96-8.08-2.96h0c-2.27,0-4.38.6-6.34,1.8-1.96,1.21-3.53,2.88-4.72,5-1.2,2.13-1.8,4.59-1.8,7.38h0v35.46ZM333.9,106.36h0c-5.12,0-9.61-1.22-13.46-3.66-3.85-2.44-6.86-5.85-9.02-10.24-2.15-4.37-3.22-9.49-3.22-15.36h0c0-5.91,1.07-11.07,3.22-15.48,2.16-4.4,5.17-7.82,9.02-10.26,3.85-2.44,8.34-3.66,13.46-3.66h0c5.12,0,9.61,1.22,13.46,3.66,3.85,2.44,6.86,5.86,9.02,10.26,2.15,4.41,3.22,9.57,3.22,15.48h0c0,5.87-1.07,10.99-3.22,15.36-2.16,4.39-5.17,7.8-9.02,10.24-3.85,2.44-8.34,3.66-13.46,3.66ZM333.9,98.52h0c3.89,0,7.09-.99,9.6-2.98,2.52-2,4.38-4.63,5.58-7.88,1.21-3.25,1.82-6.77,1.82-10.56h0c0-3.79-.61-7.32-1.82-10.6-1.2-3.27-3.06-5.91-5.58-7.94-2.51-2.01-5.71-3.02-9.6-3.02h0c-3.89,0-7.09,1.01-9.6,3.02-2.51,2.03-4.37,4.67-5.58,7.94-1.2,3.28-1.8,6.81-1.8,10.6h0c0,3.79.6,7.31,1.8,10.56,1.21,3.25,3.07,5.88,5.58,7.88,2.51,1.99,5.71,2.98,9.6,2.98ZM395.94,106.36h0c-5.12,0-9.61-1.22-13.46-3.66-3.85-2.44-6.85-5.85-9-10.24-2.16-4.37-3.24-9.49-3.24-15.36h0c0-5.91,1.08-11.07,3.24-15.48,2.15-4.4,5.15-7.82,9-10.26,3.85-2.44,8.34-3.66,13.46-3.66h0c5.12,0,9.61,1.22,13.46,3.66,3.85,2.44,6.86,5.86,9.02,10.26,2.16,4.41,3.24,9.57,3.24,15.48h0c0,5.87-1.08,10.99-3.24,15.36-2.16,4.39-5.17,7.8-9.02,10.24-3.85,2.44-8.34,3.66-13.46,3.66ZM395.94,98.52h0c3.89,0,7.09-.99,9.6-2.98,2.52-2,4.38-4.63,5.58-7.88,1.21-3.25,1.82-6.77,1.82-10.56h0c0-3.79-.61-7.32-1.82-10.6-1.2-3.27-3.06-5.91-5.58-7.94-2.51-2.01-5.71-3.02-9.6-3.02h0c-3.88,0-7.08,1.01-9.6,3.02-2.51,2.03-4.37,4.67-5.58,7.94-1.2,3.28-1.8,6.81-1.8,10.6h0c0,3.79.6,7.31,1.8,10.56,1.21,3.25,3.07,5.88,5.58,7.88,2.52,1.99,5.72,2.98,9.6,2.98Z\"/>\n  <path class=\"cls-1\" d=\"M467.88,48.02v13.28h-35.79v-13.28h35.79ZM439.68,34.38h17.89v53.42c0,1.5.36,2.62,1.08,3.36.72.74,1.88,1.1,3.49,1.1.62,0,1.48-.07,2.59-.21,1.11-.14,1.91-.27,2.38-.41l2.31,13.02c-2.02.58-3.97.97-5.84,1.18-1.88.21-3.66.31-5.33.31-6.08,0-10.7-1.43-13.84-4.28-3.15-2.85-4.72-7.01-4.72-12.48v-55.01ZM506.59,72.63v32.71h-17.89V28.95h17.53v33.53h-1.13c1.4-4.55,3.6-8.21,6.59-11,2.99-2.79,7.01-4.18,12.07-4.18,4,0,7.48.89,10.46,2.67,2.97,1.78,5.28,4.29,6.92,7.54,1.64,3.25,2.46,7.02,2.46,11.33v36.5h-17.89v-33.02c0-3.21-.82-5.73-2.46-7.56-1.64-1.83-3.93-2.74-6.87-2.74-1.92,0-3.62.42-5.1,1.26-1.49.84-2.64,2.04-3.46,3.61-.82,1.57-1.23,3.49-1.23,5.74Z\"/>\n</svg>";
 	//#endregion
+	//#region src/markdown.ts
+	/**
+	* A tiny, safe-by-default Markdown → HTML renderer for the chat widget.
+	*
+	* ## Why a hand-rolled renderer (and not markdown-it / snarkdown)?
+	*
+	* The widget renders **untrusted** text in two places: the assistant's reply
+	* (LLM output, which can echo attacker-supplied content) and citation snippets
+	* (raw scraped page chunks). Today both are written via `textContent`, so
+	* `**bold**`, numbered lists, and `[links](url)` show up literally. We want
+	* them rendered — without re-opening the XSS hole that `textContent` was
+	* guarding against.
+	*
+	* markdown-it with `html:false` is safe-by-default but ships ~30 kB min into
+	* what is an embeddable **global** bundle, where every kilobyte is on the host
+	* page's critical path. snarkdown is ~1 kB but emits raw HTML, so it would
+	* require bolting on a separate sanitizer. Instead, this renderer is
+	* **safe-by-construction**:
+	*
+	*   1. It is a *tokenizer*, not an HTML passthrough. It only ever emits a
+	*      fixed allowlist of tags (`p`, `br`, `strong`, `em`, `ul`/`ol`/`li`,
+	*      `code`/`pre`, `a`, `blockquote`). There is no code path that copies a
+	*      tag out of the input — a literal `<script>` in the input is treated as
+	*      plain text.
+	*   2. **Every** text run is HTML-escaped via {@link escapeHtml} before it
+	*      reaches the output. Raw `<`, `>`, `&`, `"`, `'` can never become markup.
+	*   3. **Images are dropped entirely** — `![alt](src)` renders as its alt text,
+	*      no `<img>` is ever produced (a scraped tracking pixel must not load).
+	*   4. **Links** are gated through {@link safeHttpUrl}: only absolute `http(s)`
+	*      URLs become anchors (with `target="_blank"` + a hardened `rel`);
+	*      `javascript:`/`data:`/relative/etc. fall back to plain (escaped) text.
+	*   5. **Headings** (`#`..`######`) are *downgraded* to bold lines — a full
+	*      `<h1>` is far too large inside a chat bubble or citation card.
+	*
+	* The output is a string of HTML that is only ever assigned to `innerHTML` of
+	* an element the caller controls; because of (1)–(4) it can only contain the
+	* allowlisted, attribute-sanitized tags.
+	*
+	* Supported subset (deliberately small):
+	*   - Paragraphs (blank-line separated) and hard/soft line breaks
+	*   - `**bold**` / `__bold__`, `*italic*` / `_italic_`
+	*   - `` `inline code` `` and fenced ``` ```code blocks``` ```
+	*   - `- ` / `* ` / `+ ` unordered lists, `1.` ordered lists
+	*   - `> ` blockquotes
+	*   - `[text](http(s)://url)` links (images dropped to alt text)
+	*   - `#`..`######` headings → bold line
+	*/
+	/** Escape the five HTML-significant characters so a text run can never be markup. */
+	function escapeHtml(value) {
+		return value.replace(/[&<>"']/g, (c) => {
+			switch (c) {
+				case "&": return "&amp;";
+				case "<": return "&lt;";
+				case ">": return "&gt;";
+				case "\"": return "&quot;";
+				default: return "&#39;";
+			}
+		});
+	}
+	/**
+	* Return `url` only if it is a valid absolute `http(s)` URL, else `null`.
+	*
+	* SECURITY: link targets here originate from untrusted content (LLM output /
+	* scraped citation chunks). Allowing an arbitrary string as an `href` permits
+	* `javascript:`/`data:`/`vbscript:` URLs that execute on click — a stored-XSS
+	* vector. Only absolute http(s) links are rendered as anchors; anything else
+	* falls back to plain text upstream.
+	*/
+	function safeHttpUrl(url) {
+		if (!url) return null;
+		try {
+			const parsed = new URL(url);
+			return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : null;
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Render the inline span grammar of a single line/segment to safe HTML.
+	*
+	* Order matters: code spans are extracted first (their contents are *not*
+	* further parsed), then images are stripped to alt text, then links, then
+	* emphasis. Every literal text run is escaped on the way out.
+	*/
+	function renderInline(input) {
+		let out = "";
+		let i = 0;
+		const n = input.length;
+		let buf = "";
+		const flush = () => {
+			if (buf) {
+				out += escapeHtml(buf);
+				buf = "";
+			}
+		};
+		while (i < n) {
+			const ch = input[i];
+			if (ch === "`") {
+				const end = input.indexOf("`", i + 1);
+				if (end > i) {
+					flush();
+					out += `<code>${escapeHtml(input.slice(i + 1, end))}</code>`;
+					i = end + 1;
+					continue;
+				}
+			}
+			if (ch === "!" && input[i + 1] === "[") {
+				const m = imageAt(input, i);
+				if (m) {
+					flush();
+					out += renderInline(m.alt);
+					i = m.end;
+					continue;
+				}
+			}
+			if (ch === "[") {
+				const m = linkAt(input, i);
+				if (m) {
+					flush();
+					const safe = safeHttpUrl(m.href);
+					const inner = renderInline(m.text);
+					if (safe) out += `<a href="${escapeHtml(safe)}" target="_blank" rel="noopener noreferrer nofollow">${inner}</a>`;
+					else out += inner;
+					i = m.end;
+					continue;
+				}
+			}
+			if (ch === "*" && input[i + 1] === "*" || ch === "_" && input[i + 1] === "_") {
+				const marker = ch + ch;
+				const end = input.indexOf(marker, i + 2);
+				if (end > i + 1) {
+					flush();
+					out += `<strong>${renderInline(input.slice(i + 2, end))}</strong>`;
+					i = end + 2;
+					continue;
+				}
+			}
+			if (ch === "*" || ch === "_") {
+				const end = input.indexOf(ch, i + 1);
+				if (end > i + 1 && input[i + 1] !== ch) {
+					flush();
+					out += `<em>${renderInline(input.slice(i + 1, end))}</em>`;
+					i = end + 1;
+					continue;
+				}
+			}
+			buf += ch;
+			i++;
+		}
+		flush();
+		return out;
+	}
+	/** Parse a `[text](href)` link starting at `start` (`input[start] === '['`). */
+	function linkAt(input, start) {
+		const close = matchBracket(input, start);
+		if (close < 0 || input[close + 1] !== "(") return null;
+		const paren = input.indexOf(")", close + 2);
+		if (paren < 0) return null;
+		return {
+			text: input.slice(start + 1, close),
+			href: input.slice(close + 2, paren).trim().split(/\s+/)[0] ?? "",
+			end: paren + 1
+		};
+	}
+	/** Parse a `![alt](src)` image starting at `start` (`input[start] === '!'`). */
+	function imageAt(input, start) {
+		const link = linkAt(input, start + 1);
+		if (!link) return null;
+		return {
+			alt: link.text,
+			end: link.end
+		};
+	}
+	/** Find the matching `]` for a `[` at `open`, honoring one level of nesting. */
+	function matchBracket(input, open) {
+		let depth = 0;
+		for (let i = open; i < input.length; i++) {
+			const c = input[i];
+			if (c === "[") depth++;
+			else if (c === "]") {
+				depth--;
+				if (depth === 0) return i;
+			}
+		}
+		return -1;
+	}
+	const UL_RE = /^\s*[-*+]\s+(.*)$/;
+	const OL_RE = /^\s*\d+[.)]\s+(.*)$/;
+	const HEADING_RE = /^\s{0,3}(#{1,6})\s+(.*)$/;
+	const QUOTE_RE = /^\s*>\s?(.*)$/;
+	const FENCE_RE = /^\s*(`{3,}|~{3,})\s*(.*)$/;
+	/**
+	* Render a full Markdown string to safe HTML.
+	*
+	* @returns a string containing only the allowlisted tags described in the
+	* module doc. Safe to assign to `innerHTML` of a caller-owned element.
+	*/
+	function renderMarkdown(src) {
+		const lines = src.replace(/\r\n?/g, "\n").split("\n");
+		const out = [];
+		let i = 0;
+		while (i < lines.length) {
+			const line = lines[i];
+			const fence = FENCE_RE.exec(line);
+			if (fence) {
+				const marker = fence[1];
+				const body = [];
+				i++;
+				while (i < lines.length && !lines[i].trimStart().startsWith(marker)) {
+					body.push(lines[i]);
+					i++;
+				}
+				if (i < lines.length) i++;
+				out.push(`<pre><code>${escapeHtml(body.join("\n"))}</code></pre>`);
+				continue;
+			}
+			if (line.trim() === "") {
+				i++;
+				continue;
+			}
+			const heading = HEADING_RE.exec(line);
+			if (heading) {
+				out.push(`<p><strong>${renderInline(heading[2])}</strong></p>`);
+				i++;
+				continue;
+			}
+			if (UL_RE.test(line) || OL_RE.test(line)) {
+				const ordered = OL_RE.test(line) && !UL_RE.test(line);
+				const re = ordered ? OL_RE : UL_RE;
+				const items = [];
+				while (i < lines.length) {
+					const m = re.exec(lines[i]);
+					if (!m) break;
+					items.push(`<li>${renderInline(m[1])}</li>`);
+					i++;
+				}
+				out.push(`<${ordered ? "ol" : "ul"}>${items.join("")}</${ordered ? "ol" : "ul"}>`);
+				continue;
+			}
+			if (QUOTE_RE.test(line)) {
+				const quoted = [];
+				while (i < lines.length) {
+					const m = QUOTE_RE.exec(lines[i]);
+					if (!m) break;
+					quoted.push(m[1]);
+					i++;
+				}
+				out.push(`<blockquote>${renderInline(quoted.join("\n")).replace(/\n/g, "<br>")}</blockquote>`);
+				continue;
+			}
+			const para = [];
+			while (i < lines.length) {
+				const l = lines[i];
+				if (l.trim() === "" || FENCE_RE.test(l) || HEADING_RE.test(l) || UL_RE.test(l) || OL_RE.test(l) || QUOTE_RE.test(l)) break;
+				para.push(l);
+				i++;
+			}
+			out.push(`<p>${renderInline(para.join("\n")).replace(/\n/g, "<br>")}</p>`);
+		}
+		return out.join("");
+	}
+	const SNIPPET_MAX = 260;
+	/**
+	* Clean a raw scraped citation snippet into a short, readable excerpt.
+	*
+	* Scraped chunks frequently begin with page boilerplate — a logo image wrapped
+	* in a link, standalone nav, repeated whitespace — e.g.
+	* `[![Logo](…)](…) # Our Work We build…`. The source itself is already linked
+	* from the citation card, so the snippet only needs to be a clean teaser.
+	*
+	* Steps:
+	*   1. Strip a leading image / logo-link (`[![…](…)](…)` or `![…](…)`).
+	*   2. Drop a leading standalone heading marker (`#`/`##`).
+	*   3. Collapse all runs of whitespace to single spaces.
+	*   4. Truncate to ~{@link SNIPPET_MAX} chars at a word boundary, adding `…`.
+	*
+	* The result is still rendered through {@link renderMarkdown} downstream, so any
+	* remaining inline markup (bold/links) stays safe.
+	*/
+	function cleanCitationSnippet(raw) {
+		let s = raw ?? "";
+		let changed = true;
+		while (changed) {
+			changed = false;
+			const before = s;
+			s = s.replace(/^\s*\[!\[[^\]]*\]\([^)]*\)\]\([^)]*\)\s*/, "");
+			s = s.replace(/^\s*!\[[^\]]*\]\([^)]*\)\s*/, "");
+			s = s.replace(/^\s*#{1,6}\s+/, "");
+			if (s !== before) changed = true;
+		}
+		s = s.replace(/\s+/g, " ").trim();
+		if (s.length > SNIPPET_MAX) {
+			const cut = s.slice(0, SNIPPET_MAX);
+			const lastSpace = cut.lastIndexOf(" ");
+			s = (lastSpace > SNIPPET_MAX * .6 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
+		}
+		return s;
+	}
+	//#endregion
 	//#region src/styles.ts
 	/**
 	* Render the widget's scoped stylesheet — the "Aurora Glass" design system.
@@ -1198,6 +1497,50 @@ var SmoothAgentChat = (function(exports) {
 }
 @keyframes sac-blink { to { opacity: 0 } }
 
+/* ─────────────── 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. */
+/* Block-level markdown drives its own spacing/wrapping, so opt out of the
+   bubble's pre-wrap (which would otherwise add stray blank lines). */
+.bubble.md { white-space: normal; }
+.md > :first-child { margin-top: 0; }
+.md > :last-child { margin-bottom: 0; }
+.md p { margin: 0 0 8px; }
+.md ul, .md ol { margin: 6px 0 8px; padding-left: 20px; }
+.md li { margin: 2px 0; }
+.md li::marker { color: color-mix(in srgb, var(--sac-primary) 75%, transparent); }
+.md a {
+    color: color-mix(in srgb, var(--sac-primary) 92%, #fff);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    word-break: break-word;
+}
+.md a:hover { text-decoration: none; }
+.md strong { font-weight: 700; }
+.md em { font-style: italic; }
+.md code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: .9em;
+    padding: 1px 5px;
+    border-radius: 5px;
+    background: color-mix(in srgb, var(--sac-text) 10%, transparent);
+}
+.md pre {
+    margin: 6px 0 8px;
+    padding: 9px 11px;
+    border-radius: 9px;
+    overflow-x: auto;
+    background: color-mix(in srgb, var(--sac-text) 9%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 8%, transparent);
+}
+.md pre code { padding: 0; background: none; font-size: 12px; line-height: 1.45; }
+.md blockquote {
+    margin: 6px 0;
+    padding: 2px 0 2px 11px;
+    border-left: 2px solid color-mix(in srgb, var(--sac-primary) 55%, transparent);
+    color: color-mix(in srgb, var(--sac-text) 78%, transparent);
+}
+
 /* Full-page: center the conversation in a readable column. */
 .panel.fullpage .messages { padding: 26px 20px; }
 .panel.fullpage .row { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
@@ -1476,24 +1819,6 @@ var SmoothAgentChat = (function(exports) {
 		/** 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>`
 	};
-	/**
-	* Return `url` only if it is a valid absolute `http(s)` URL, else `null`.
-	*
-	* SECURITY: citation URLs originate from indexed content (web / GitHub
-	* connectors), which can be attacker-influenceable. Assigning an arbitrary
-	* string to `<a>.href` allows `javascript:`/`data:`/`vbscript:` URLs that
-	* execute on click — a stored-XSS vector. Only http(s) links are rendered as
-	* anchors; anything else falls back to plain text.
-	*/
-	function safeHttpUrl(url) {
-		if (!url) return null;
-		try {
-			const parsed = new URL(url);
-			return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : null;
-		} catch {
-			return null;
-		}
-	}
 	var SmoothAgentChatElement = class extends HTMLElement {
 		static get observedAttributes() {
 			return OBSERVED;
@@ -1510,6 +1835,7 @@ var SmoothAgentChat = (function(exports) {
 			_defineProperty(this, "userInfoSatisfied", false);
 			_defineProperty(this, "hasSent", false);
 			_defineProperty(this, "examplePrompts", []);
+			_defineProperty(this, "greeting", "");
 			_defineProperty(this, "interrupt", null);
 			_defineProperty(this, "interruptEl", null);
 			_defineProperty(this, "panelEl", null);
@@ -1519,6 +1845,11 @@ var SmoothAgentChat = (function(exports) {
 			_defineProperty(this, "dotEl", null);
 			_defineProperty(this, "inputEl", null);
 			_defineProperty(this, "sendBtn", null);
+			_defineProperty(this, "streamBubbleEl", null);
+			_defineProperty(this, "streamMsgId", null);
+			_defineProperty(this, "streamTarget", "");
+			_defineProperty(this, "displayedLength", 0);
+			_defineProperty(this, "rafId", 0);
 			this.root = this.attachShadow({ mode: "open" });
 		}
 		connectedCallback() {
@@ -1527,6 +1858,7 @@ var SmoothAgentChat = (function(exports) {
 		}
 		disconnectedCallback() {
 			this.mounted = false;
+			this.resetReveal();
 			this.controller?.disconnect();
 			this.controller = null;
 		}
@@ -1595,8 +1927,7 @@ var SmoothAgentChat = (function(exports) {
 			if (!this.controller) {
 				this.controller = new ConversationController(config, {
 					onMessages: (messages) => {
-						this.messages = messages;
-						this.renderMessages(resolved.greeting);
+						this.handleMessages(messages, resolved.greeting);
 					},
 					onStatus: (status) => {
 						this.status = status;
@@ -1631,6 +1962,7 @@ var SmoothAgentChat = (function(exports) {
                     <button class="close" aria-label="Close chat">${ICON.close}</button>
                 </div>`;
 			this.examplePrompts = resolved.examplePrompts;
+			this.greeting = resolved.greeting;
 			const gating = needsUserInfo(resolved) && !this.userInfoSatisfied;
 			const field = (name, type, label, autocomplete) => `<label class="pc-field"><span>${escapeHtml(label)}</span><input name="${name}" type="${type}" autocomplete="${autocomplete}" required /></label>`;
 			const prechatHtml = `
@@ -1667,6 +1999,7 @@ var SmoothAgentChat = (function(exports) {
         `;
 			const logoSvg = container.querySelector(".logo-wrap svg");
 			if (logoSvg) logoSvg.setAttribute("class", "logo");
+			this.resetReveal();
 			this.root.replaceChildren(style, container);
 			this.launcherEl = container.querySelector(".launcher");
 			this.panelEl = container.querySelector(".panel");
@@ -1693,7 +2026,7 @@ var SmoothAgentChat = (function(exports) {
 			});
 			if (fullpage && !gating) this.controller?.connect().catch(() => {});
 			this.syncOpenState();
-			if (!gating) this.renderMessages(resolved.greeting);
+			if (!gating) this.renderMessages();
 			this.renderStatus();
 			this.renderComposerState();
 			this.renderInterrupt();
@@ -1824,9 +2157,35 @@ var SmoothAgentChat = (function(exports) {
 			ta.style.height = "auto";
 			ta.style.height = `${ta.scrollHeight}px`;
 		}
-		renderMessages(greeting) {
+		/**
+		* Receive a new message snapshot from the controller and update the view.
+		*
+		* `onMessages` fires on *every* `stream_token` delta. Rebuilding the whole
+		* list each frame is wasteful and fights the smooth reveal, so we take the
+		* cheap path when the only change is the trailing streaming assistant message
+		* growing: just bump the reveal *target* (the rAF loop drains it). Any
+		* structural change (new message, finalize, citations) triggers a full
+		* rebuild via {@link renderMessages}.
+		*/
+		handleMessages(messages, greeting) {
+			this.greeting = greeting;
+			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;
+			this.messages = messages;
+			if (!structural && last && last.streaming && last.id === this.streamMsgId) {
+				this.streamTarget = last.text;
+				this.ensureRevealLoop();
+				return;
+			}
+			this.renderMessages();
+		}
+		renderMessages() {
 			if (!this.messagesEl) return;
+			this.resetReveal();
 			this.messagesEl.replaceChildren();
+			const greeting = this.greeting;
 			if (this.messages.length === 0 && greeting) this.messagesEl.appendChild(this.buildRow("assistant", this.greetingBubble(greeting)));
 			if (!this.hasSent && this.messages.length === 0 && this.examplePrompts.length > 0) {
 				const chips = document.createElement("div");
@@ -1849,12 +2208,94 @@ var SmoothAgentChat = (function(exports) {
 					bubble.append(this.typingDot(), this.typingDot(), this.typingDot());
 				} else if (msg.streaming) {
 					bubble.classList.add("cursor");
-					bubble.textContent = msg.text;
+					this.bindReveal(msg, bubble);
+				} else if (msg.role === "assistant") {
+					bubble.classList.add("md");
+					bubble.innerHTML = renderMarkdown(msg.text);
 				} else bubble.textContent = msg.text;
 				this.messagesEl.appendChild(this.buildRow(msg.role, bubble));
 				if (msg.role === "assistant" && !msg.streaming && msg.citations && msg.citations.length > 0) this.messagesEl.appendChild(this.renderSources(msg.citations));
 			}
-			this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+			this.scrollToBottom(true);
+		}
+		/** True when the host/user prefers reduced motion (snap, no typewriter). */
+		prefersReducedMotion() {
+			return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+		}
+		/**
+		* Bind the rAF typewriter to a freshly built streaming bubble. Preserves the
+		* already-revealed prefix across rebuilds (so a structural rebuild mid-stream
+		* 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;
+			this.streamBubbleEl = bubble;
+			this.streamMsgId = msg.id;
+			this.streamTarget = msg.text;
+			this.displayedLength = carryOver;
+			if (this.prefersReducedMotion()) {
+				this.displayedLength = msg.text.length;
+				bubble.textContent = msg.text;
+				return;
+			}
+			bubble.textContent = msg.text.slice(0, this.displayedLength);
+			this.ensureRevealLoop();
+		}
+		/** Start the rAF loop if it isn't already running. */
+		ensureRevealLoop() {
+			if (this.prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
+				this.snapReveal();
+				return;
+			}
+			if (this.rafId) return;
+			this.rafId = requestAnimationFrame(() => this.tickReveal());
+		}
+		/**
+		* One animation frame of the reveal. Advances `displayedLength` toward the
+		* buffered target at an ADAPTIVE rate — the deeper the backlog, the more
+		* chars per frame — so the reveal stays smooth yet never falls behind the
+		* network. Updates ONLY the bound bubble's textContent (no list rebuild).
+		*/
+		tickReveal() {
+			this.rafId = 0;
+			const bubble = this.streamBubbleEl;
+			if (!bubble) return;
+			const target = this.streamTarget;
+			const remaining = target.length - this.displayedLength;
+			if (remaining <= 0) return;
+			const step = Math.max(2, Math.min(remaining, Math.ceil(remaining / 8)));
+			this.displayedLength = Math.min(target.length, this.displayedLength + step);
+			bubble.textContent = target.slice(0, this.displayedLength);
+			this.scrollToBottom(false);
+			this.rafId = requestAnimationFrame(() => this.tickReveal());
+		}
+		/** Snap the bound bubble to the full buffered text immediately (reduced-motion / no-rAF). */
+		snapReveal() {
+			if (this.streamBubbleEl) {
+				this.displayedLength = this.streamTarget.length;
+				this.streamBubbleEl.textContent = this.streamTarget;
+			}
+		}
+		/** Cancel any in-flight reveal loop and clear its state (called on full rebuild). */
+		resetReveal() {
+			if (this.rafId && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.rafId);
+			this.rafId = 0;
+			this.streamBubbleEl = null;
+		}
+		/**
+		* Auto-scroll the message list to the bottom — but don't fight a visitor who
+		* has scrolled up to read history. When `force` (a structural rebuild) we
+		* always pin to bottom; during the streaming reveal we only follow if the
+		* viewport is already near the bottom.
+		*/
+		scrollToBottom(force) {
+			const el = this.messagesEl;
+			if (!el) return;
+			if (force) {
+				el.scrollTop = el.scrollHeight;
+				return;
+			}
+			if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) el.scrollTop = el.scrollHeight;
 		}
 		/** Wrap a bubble in a `.row`, prefixing assistant rows with a mini avatar. */
 		buildRow(role, bubble) {
@@ -1911,7 +2352,7 @@ var SmoothAgentChat = (function(exports) {
 					a.className = "src-title";
 					a.href = safeUrl;
 					a.target = "_blank";
-					a.rel = "noopener noreferrer";
+					a.rel = "noopener noreferrer nofollow";
 					titleEl = a;
 				} else {
 					titleEl = document.createElement("span");
@@ -1920,10 +2361,13 @@ var SmoothAgentChat = (function(exports) {
 				titleEl.textContent = c.title || c.id || "Source";
 				li.appendChild(titleEl);
 				if (c.snippet) {
-					const snip = document.createElement("span");
-					snip.className = "src-snippet";
-					snip.textContent = c.snippet;
-					li.appendChild(snip);
+					const cleaned = cleanCitationSnippet(c.snippet);
+					if (cleaned) {
+						const snip = document.createElement("span");
+						snip.className = "src-snippet md";
+						snip.innerHTML = renderMarkdown(cleaned);
+						li.appendChild(snip);
+					}
 				}
 				list.appendChild(li);
 			}
@@ -1960,17 +2404,6 @@ var SmoothAgentChat = (function(exports) {
 			this.controller.send(text);
 		}
 	};
-	function escapeHtml(value) {
-		return value.replace(/[&<>"']/g, (c) => {
-			switch (c) {
-				case "&": return "&amp;";
-				case "<": return "&lt;";
-				case ">": return "&gt;";
-				case "\"": return "&quot;";
-				default: return "&#39;";
-			}
-		});
-	}
 	/** Register the custom element once. Safe to call multiple times. */
 	function defineChatWidget() {
 		if (typeof customElements !== "undefined" && !customElements.get("smooth-agent-chat")) customElements.define(ELEMENT_TAG, SmoothAgentChatElement);