feat(markdown): allow video and audio tags (#2037)

* feat(markdown): allow video and audio tags in markdown

- Add custom image renderer to convert video/audio URLs to media tags
- Use DOMPurify to sanitize raw HTML, allowing only video/audio/source
- Add comprehensive tests for media rendering and XSS prevention

* feat(mcp): increase tool timeout from 30s to 60s

* feat(mcp): update tool prompt to mention video/audio support

* test: update markdown test for DOMPurify behavior

src/lib/components/chat/MarkdownRenderer.svelte.test.ts

@@ -32,7 +32,8 @@ describe("MarkdownRenderer", () => {
 	it("doesnt render raw html directly", () => {
 		render(MarkdownRenderer, { content: "<button>Click me</button>" });
 		expect(page.getByRole("button").elements).toHaveLength(0);
-		expect(page.getByRole("paragraph")).toHaveTextContent("<button>Click me</button>");
+		// DOMPurify strips disallowed tags but preserves text content
+		expect(page.getByRole("paragraph")).toHaveTextContent("Click me");
 	});
 	it("renders latex", () => {
 		const { baseElement } = render(MarkdownRenderer, { content: "$(oo)^2$" });

src/lib/server/mcp/httpClient.ts

@@ -13,7 +13,7 @@ export interface McpServerConfig {
 	headers?: Record<string, string>;
 }
 
-const DEFAULT_TIMEOUT_MS = 30_000;
+const DEFAULT_TIMEOUT_MS = 60_000;
 
 export type McpToolTextResponse = {
 	text: string;

src/lib/server/textGeneration/mcp/toolInvocation.ts

@@ -69,7 +69,7 @@ export async function* executeToolCalls({
 	toPrimitive,
 	processToolOutput,
 	abortSignal,
-	toolTimeoutMs = 30_000,
+	toolTimeoutMs = 60_000,
 }: ExecuteToolCallsParams): AsyncGenerator<ToolExecutionEvent, void, undefined> {
 	const toolMessages: ChatCompletionMessageParam[] = [];
 	const toolRuns: ToolRun[] = [];

src/lib/server/textGeneration/utils/toolPrompt.ts

@@ -14,7 +14,7 @@ export function buildToolPreprompt(tools: OpenAiTool[]): string {
 	return [
 		`You can use the following tools if helpful: ${names.join(", ")}.`,
 		`Today's date: ${currentDate}.`,
-		`If a tool generates an image, you can inline it directly: ![alt text](image_url).`,
+		`If a tool generates an image, video, or audio, you can inline it using ![alt](url) or raw <video>/<audio> HTML tags. Video (.mp4, .webm) and audio (.mp3, .wav) URLs will render as playable media.`,
 		`If a tool needs an image, set its image field ("input_image", "image", or "image_url") to a reference like "image_1", "image_2", etc. (ordered by when the user uploaded them).`,
 		`Default to image references; only use a full http(s) URL when the tool description explicitly asks for one, or reuse a URL a previous tool returned.`,
 	].join(" ");

src/lib/utils/marked.spec.ts

@@ -0,0 +1,95 @@
+import { describe, expect, test } from "vitest";
+import { processTokensSync } from "./marked";
+
+function renderHtml(md: string): string {
+	const tokens = processTokensSync(md, []);
+	const textToken = tokens.find((token) => token.type === "text");
+	if (!textToken || textToken.type !== "text") return "";
+	return typeof textToken.html === "string" ? textToken.html : "";
+}
+
+describe("marked basic rendering", () => {
+	test("renders bold text", () => {
+		const html = renderHtml("**bold**");
+		expect(html).toContain("<strong>bold</strong>");
+	});
+
+	test("renders links", () => {
+		const html = renderHtml("[link](https://example.com)");
+		expect(html).toContain('<a href="https://example.com"');
+		expect(html).toContain("link</a>");
+	});
+
+	test("renders paragraphs", () => {
+		const html = renderHtml("hello world");
+		expect(html).toContain("<p>hello world</p>");
+	});
+});
+
+describe("marked image renderer", () => {
+	test("renders video extensions as <video>", () => {
+		const html = renderHtml("![](https://example.com/clip.mp4)");
+		expect(html).toContain("<video controls");
+		expect(html).toContain('<source src="https://example.com/clip.mp4">');
+	});
+
+	test("renders audio extensions as <audio>", () => {
+		const html = renderHtml("![](https://example.com/clip.mp3)");
+		expect(html).toContain("<audio controls");
+		expect(html).toContain('<source src="https://example.com/clip.mp3">');
+	});
+
+	test("renders non-video images as <img>", () => {
+		const html = renderHtml("![](https://example.com/pic.png)");
+		expect(html).toContain('<img src="https://example.com/pic.png"');
+	});
+
+	test("renders video with query params", () => {
+		const html = renderHtml("![](https://example.com/clip.mp4?token=abc)");
+		expect(html).toContain("<video controls");
+		expect(html).toContain("clip.mp4?token=abc");
+	});
+});
+
+describe("marked html video tag support", () => {
+	test("allows raw <video> tags with controls", () => {
+		const html = renderHtml('<video controls src="https://example.com/video.mp4"></video>');
+		expect(html).toContain("<video");
+		expect(html).toContain("controls");
+		expect(html).toContain('src="https://example.com/video.mp4"');
+	});
+
+	test("allows <video> with nested <source> tags", () => {
+		const html = renderHtml(
+			'<video controls><source src="https://example.com/video.webm" type="video/webm"></video>'
+		);
+		expect(html).toContain("<video");
+		expect(html).toContain("<source");
+		expect(html).toContain('src="https://example.com/video.webm"');
+	});
+
+	test("strips disallowed attributes from video tags", () => {
+		const html = renderHtml('<video onclick="alert(1)" src="https://example.com/v.mp4"></video>');
+		expect(html).toContain("<video");
+		expect(html).not.toContain("onclick");
+	});
+
+	test("strips javascript: URLs from media sources", () => {
+		const html = renderHtml('<video controls src="javascript:alert(1)"></video>');
+		expect(html).not.toContain("javascript:");
+	});
+
+	test("strips disallowed html tags", () => {
+		const html = renderHtml("<script>alert(1)</script>");
+		expect(html).not.toContain("<script>");
+	});
+
+	test("allows <audio> tags with controls", () => {
+		const html = renderHtml(
+			'<audio controls><source src="https://example.com/audio.mp3" type="audio/mpeg"></audio>'
+		);
+		expect(html).toContain("<audio");
+		expect(html).toContain("<source");
+		expect(html).toContain('type="audio/mpeg"');
+	});
+});

src/lib/utils/marked.ts

@@ -2,6 +2,7 @@ import katex from "katex";
 import "katex/dist/contrib/mhchem.mjs";
 import { Marked } from "marked";
 import type { Tokens, TokenizerExtension, RendererExtension } from "marked";
+import DOMPurify from "isomorphic-dompurify";
 // Simple type to replace removed WebSearchSource
 type SimpleSource = {
 	title?: string;
@@ -56,6 +57,36 @@ const bundledLanguages: [string, LanguageFn][] = [
 
 bundledLanguages.forEach(([name, language]) => hljs.registerLanguage(name, language));
 
+// DOMPurify config for allowing video/audio tags in markdown
+const DOMPURIFY_CONFIG = {
+	ALLOWED_TAGS: ["video", "audio", "source"],
+	ALLOWED_ATTR: [
+		"src",
+		"type",
+		"controls",
+		"autoplay",
+		"loop",
+		"muted",
+		"playsinline",
+		"poster",
+		"width",
+		"height",
+		"preload",
+	],
+};
+
+// Media URL detection
+const VIDEO_EXTENSIONS = /\.(mp4|webm|ogg|mov|m4v)([?#]|$)/i;
+const AUDIO_EXTENSIONS = /\.(mp3|wav|m4a|aac|flac)([?#]|$)/i;
+
+function isVideoUrl(url: string): boolean {
+	return VIDEO_EXTENSIONS.test(url);
+}
+
+function isAudioUrl(url: string): boolean {
+	return AUDIO_EXTENSIONS.test(url);
+}
+
 interface katexBlockToken extends Tokens.Generic {
 	type: "katexBlock";
 	raw: string;
@@ -238,7 +269,23 @@ function createMarkedInstance(sources: SimpleSource[]): Marked {
 					? `<a href="${escapeHTML(safeHref)}" target="_blank" rel="noreferrer">${text}</a>`
 					: `<span>${escapeHTML(text ?? "")}</span>`;
 			},
-			html: (html) => escapeHTML(html),
+			image: (href, title, text) => {
+				const safeHref = sanitizeHref(href);
+				if (!safeHref) return `<span>${escapeHTML(text ?? "")}</span>`;
+
+				const safeSrc = escapeHTML(safeHref);
+				const safeTitle = title ? ` title="${escapeHTML(title)}"` : "";
+				const safeAlt = escapeHTML(text ?? "");
+
+				if (isVideoUrl(safeHref)) {
+					return `<video controls${safeTitle}><source src="${safeSrc}">${safeAlt}</video>`;
+				}
+				if (isAudioUrl(safeHref)) {
+					return `<audio controls${safeTitle}><source src="${safeSrc}">${safeAlt}</audio>`;
+				}
+				return `<img src="${safeSrc}" alt="${safeAlt}"${safeTitle} />`;
+			},
+			html: (html) => DOMPurify.sanitize(html, DOMPURIFY_CONFIG),
 		},
 		gfm: true,
 		breaks: true,