@artooi/ag-ui-web-component 0.3.0 → 0.4.0

package/src/ui/render_markdown.ts

@@ -1,13 +1,22 @@
 import DOMPurify from "dompurify";
-import { marked } from "marked";
+import { Marked } from "marked";
 
-// GitHub-flavoured markdown with single-newline line breaks (chat-like).
-marked.setOptions({ gfm: true, breaks: true });
+// Local parser instance so configuration never leaks into the shared `marked`
+// singleton (a host app's deduped copy keeps its own options). GitHub-flavoured
+// markdown with single-newline line breaks (chat-like). Constructed once at
+// module scope — configured here and never mutated afterwards; per-call
+// construction would re-pay setup on every streaming re-render.
+const parser = new Marked({ gfm: true, breaks: true });
 
 // Conservative allowlist for assistant chat content: inline emphasis, code,
-// lists, quotes, headings, links, tables, and images. Deliberately excludes
-// `iframe`, `style`, and any scripting — rendering untrusted model/tool output
-// as HTML is an XSS surface, so the sanitiser is the load-bearing safety net.
+// lists, quotes, headings, links, and tables. Deliberately excludes `iframe`,
+// `style`, and any scripting — rendering untrusted model/tool output as HTML
+// is an XSS surface, so the sanitiser is the load-bearing safety net.
+//
+// `img` is excluded by default: a model-controlled `<img src="https://...">`
+// is fetched by the browser with **no user interaction**, which turns any
+// prompt-injected page data into a zero-click exfiltration channel. Hosts
+// that trust their content can opt back in via `allowImages`.
 const ALLOWED_TAGS = [
   "a",
   "p",
@@ -39,10 +48,23 @@ const ALLOWED_TAGS = [
   "tr",
   "th",
   "td",
-  "img",
 ];
 
-const ALLOWED_ATTR = ["href", "title", "class", "src", "alt", "width", "height"];
+const ALLOWED_ATTR = ["href", "title", "class"];
+
+// The image-permitting variants used when the host opts in.
+const ALLOWED_TAGS_WITH_IMAGES = [...ALLOWED_TAGS, "img"];
+const ALLOWED_ATTR_WITH_IMAGES = [...ALLOWED_ATTR, "src", "alt", "width", "height"];
+
+/** Options for {@link renderMarkdown}. */
+export interface RenderMarkdownOptions {
+  /**
+   * Permit `<img>` tags (and their `src`/`alt`/`width`/`height` attributes)
+   * in the sanitised output. **Off by default** — see the allowlist note on
+   * the exfiltration risk. Only enable for trusted content sources.
+   */
+  readonly allowImages?: boolean;
+}
 
 /**
  * Render markdown (and any embedded raw HTML) to a sanitised HTML string.
@@ -55,9 +77,13 @@ const ALLOWED_ATTR = ["href", "title", "class", "src", "alt", "width", "height"]
  * The result is trimmed so a single-paragraph message round-trips to clean
  * `textContent` (no trailing newline from the wrapping `<p>`).
  */
-export function renderMarkdown(text: string): string {
-  const rendered = marked.parse(text, { async: false });
-  const clean = DOMPurify.sanitize(rendered, { ALLOWED_TAGS, ALLOWED_ATTR });
+export function renderMarkdown(text: string, options?: RenderMarkdownOptions): string {
+  const allowImages = options?.allowImages === true;
+  const rendered = parser.parse(text, { async: false });
+  const clean = DOMPurify.sanitize(rendered, {
+    ALLOWED_TAGS: allowImages ? ALLOWED_TAGS_WITH_IMAGES : ALLOWED_TAGS,
+    ALLOWED_ATTR: allowImages ? ALLOWED_ATTR_WITH_IMAGES : ALLOWED_ATTR,
+  });
   const template = document.createElement("template");
   template.innerHTML = clean;
   for (const anchor of template.content.querySelectorAll("a[href]")) {

package/src/ui/styles.ts

@@ -501,6 +501,19 @@ export const STYLES = `
   cursor: default;
 }
 
+/* The composer button doubles as the Stop control while a run is in flight. */
+.send[data-state="running"] {
+  background: var(--ag-ui-muted);
+}
+
+/* Muted "⏹ Stopped" line after a cancelled run — a note, not an error bubble. */
+.stopped-note {
+  align-self: flex-start;
+  color: var(--ag-ui-muted);
+  font-size: 12px;
+  padding: 2px 4px;
+}
+
 /* Inline confirmation card — lives in the transcript, no focus-stealing overlay. */
 .confirm {
   align-self: stretch;

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.3.0";
+export const VERSION: string = "0.4.0";