@smooai/chat-widget 0.5.2 → 0.6.0

package/dist/index.js

@@ -351,6 +351,305 @@ var ConversationController = class {
 */
 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.
@@ -675,6 +974,50 @@ function buildStyles(theme, mode = "popover") {
 }
 @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; }
@@ -953,24 +1296,6 @@ const ICON = {
 	/** 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;
@@ -987,6 +1312,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		_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);
@@ -996,6 +1322,11 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		_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() {
@@ -1004,6 +1335,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 	}
 	disconnectedCallback() {
 		this.mounted = false;
+		this.resetReveal();
 		this.controller?.disconnect();
 		this.controller = null;
 	}
@@ -1072,8 +1404,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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;
@@ -1108,6 +1439,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
                     <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 = `
@@ -1144,6 +1476,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
         `;
 		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");
@@ -1170,7 +1503,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		});
 		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();
@@ -1301,9 +1634,35 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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");
@@ -1326,12 +1685,94 @@ var SmoothAgentChatElement = class extends HTMLElement {
 				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) {
@@ -1388,7 +1829,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 				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");
@@ -1397,10 +1838,13 @@ var SmoothAgentChatElement = class extends HTMLElement {
 			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);
 		}
@@ -1437,17 +1881,6 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		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);