perf: memoize sourceIds computation in ContentRenderer

Classic298 · Classic298 · commit 88af78cab836 · 2026-03-05T21:53:56.000+01:00
Move the sourceIds computation from an inline prop expression
(recomputed on every render) to a Svelte reactive variable that
only recomputes when sources or model actually change.

Also simplified the reduce+spread+filter deduplication pattern
to a straightforward loop with Set-based deduplication.
diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -42,6 +42,30 @@
 	let contentContainerElement;
 	let floatingButtonsElement;
 
+	// Memoize sourceIds — only recompute when sources or model change
+	let computedSourceIds = [];
+	$: {
+		const result = [];
+		for (const source of sources ?? []) {
+			for (let index = 0; index < (source.document ?? []).length; index++) {
+				if (model?.info?.meta?.capabilities?.citations == false) {
+					result.push('N/A');
+					continue;
+				}
+				const metadata = source.metadata?.[index];
+				const id = metadata?.source ?? 'N/A';
+				if (metadata?.name) {
+					result.push(metadata.name);
+				} else if (id.startsWith('http://') || id.startsWith('https://')) {
+					result.push(id);
+				} else {
+					result.push(source?.source?.name ?? id);
+				}
+			}
+		}
+		computedSourceIds = [...new Set(result)];
+	}
+
 	const updateButtonPosition = (event) => {
 		const buttonsContainerElement = document.getElementById(`floating-buttons-${id}`);
 		if (
@@ -142,36 +166,7 @@
 		{done}
 		{editCodeBlock}
 		{topPadding}
-		sourceIds={(sources ?? []).reduce((acc, source) => {
-			let ids = [];
-			source.document.forEach((document, index) => {
-				if (model?.info?.meta?.capabilities?.citations == false) {
-					ids.push('N/A');
-					return ids;
-				}
-
-				const metadata = source.metadata?.[index];
-				const id = metadata?.source ?? 'N/A';
-
-				if (metadata?.name) {
-					ids.push(metadata.name);
-					return ids;
-				}
-
-				if (id.startsWith('http://') || id.startsWith('https://')) {
-					ids.push(id);
-				} else {
-					ids.push(source?.source?.name ?? id);
-				}
-
-				return ids;
-			});
-
-			acc = [...acc, ...ids];
-
-			// remove duplicates
-			return acc.filter((item, index) => acc.indexOf(item) === index);
-		}, [])}
+		sourceIds={computedSourceIds}
 		{onSourceClick}
 		{onTaskClick}
 		{onSave}
