refactor: MarkdownContent props API

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte

@@ -97,7 +97,7 @@
 	{#each sectionsParsed as section, index (index)}
 		{#if section.type === AgenticSectionType.TEXT}
 			<div class="agentic-text">
-				<MarkdownContent content={section.content} {message} />
+				<MarkdownContent content={section.content} attachments={message?.extra} />
 			</div>
 		{:else if section.type === AgenticSectionType.TOOL_CALL_STREAMING}
 			{@const streamingIcon = isStreaming ? Loader2 : AlertTriangle}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte

@@ -208,7 +208,7 @@
 				{message}
 			/>
 		{:else}
-			<MarkdownContent content={messageContent || ''} {message} />
+			<MarkdownContent content={messageContent || ''} attachments={message.extra} />
 		{/if}
 	{:else}
 		<div class="text-sm whitespace-pre-wrap">

tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte

@@ -36,10 +36,10 @@
 	import { mode } from 'mode-watcher';
 	import { ActionIconsCodeBlock, DialogCodePreview } from '$lib/components/app';
 	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
-	import type { DatabaseMessage } from '$lib/types/database';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
 
 	interface Props {
-		message?: DatabaseMessage;
+		attachments?: DatabaseMessageExtra[];
 		content: string;
 		class?: string;
 		disableMath?: boolean;
@@ -51,7 +51,7 @@
 		contentHash?: string;
 	}
 
-	let { content, message, class: className = '', disableMath = false }: Props = $props();
+	let { content, attachments, class: className = '', disableMath = false }: Props = $props();
 
 	let containerRef = $state<HTMLDivElement>();
 	let renderedBlocks = $state<MarkdownBlock[]>([]);
@@ -76,7 +76,7 @@
 	const themeStyleId = `highlight-theme-${(window.idxThemeStyle = (window.idxThemeStyle ?? 0) + 1)}`;
 
 	let processor = $derived(() => {
-		void message;
+		void attachments;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		let proc: any = remark().use(remarkGfm); // GitHub Flavored Markdown
 
@@ -98,7 +98,7 @@
 			.use(rehypeRestoreTableHtml) // Restore limited HTML (e.g., <br>, <ul>) inside Markdown tables
 			.use(rehypeEnhanceLinks) // Add target="_blank" to links
 			.use(rehypeEnhanceCodeBlocks) // Wrap code blocks with header and actions
-			.use(rehypeResolveAttachmentImages, { message })
+			.use(rehypeResolveAttachmentImages, { attachments })
 			.use(rehypeStringify, { allowDangerousHtml: true }); // Convert to HTML string
 	});
 

tools/server/webui/src/lib/components/app/content/index.ts

@@ -26,7 +26,7 @@
  *
  * @example
  * ```svelte
- * <MarkdownContent content={message.content} {message} />
+ * <MarkdownContent content={message.content} attachments={message.extra} />
  * ```
  */
 export { default as MarkdownContent } from './MarkdownContent.svelte';

tools/server/webui/src/lib/markdown/resolve-attachment-images.ts

@@ -1,13 +1,13 @@
 import type { Root as HastRoot } from 'hast';
 import { visit } from 'unist-util-visit';
-import type { DatabaseMessage, DatabaseMessageExtraImageFile } from '$lib/types/database';
+import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types/database';
 import { AttachmentType, UrlPrefix } from '$lib/enums';
 
 /**
  * Rehype plugin to resolve attachment image sources.
  * Converts attachment names (e.g., "mcp-attachment-xxx.png") to base64 data URLs.
  */
-export function rehypeResolveAttachmentImages(options: { message?: DatabaseMessage }) {
+export function rehypeResolveAttachmentImages(options: { attachments?: DatabaseMessageExtra[] }) {
 	return (tree: HastRoot) => {
 		visit(tree, 'element', (node) => {
 			if (node.tagName === 'img' && node.properties?.src) {
@@ -19,7 +19,7 @@ export function rehypeResolveAttachmentImages(options: { message?: DatabaseMessa
 				}
 
 				// Find matching attachment
-				const attachment = options.message?.extra?.find(
+				const attachment = options.attachments?.find(
 					(a): a is DatabaseMessageExtraImageFile =>
 						a.type === AttachmentType.IMAGE && a.name === src
 				);