enh: renderMarkdownInPreviews

src/lib/components/chat/Messages/Citations/CitationModal.svelte

@@ -2,6 +2,7 @@
 	import { getContext, onMount, tick } from 'svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { settings } from '$lib/stores';
 
@@ -10,6 +11,9 @@
 
 	const i18n = getContext('i18n');
 
+	const CONTENT_PREVIEW_LIMIT = 10000;
+	let expandedDocs: Set<number> = new Set();
+
 	export let show = false;
 	export let citation;
 	export let showPercentage = false;
@@ -35,6 +39,7 @@
 	}
 
 	$: if (citation) {
+		expandedDocs = new Set();
 		mergedDocuments = citation.document?.map((c, i) => {
 			return {
 				source: citation.source,
@@ -206,20 +211,37 @@
 							</div>
 
 							{#if document.metadata?.html}
-								<iframe
-									class="w-full border-0 h-auto rounded-none"
-									sandbox="allow-scripts allow-forms{($settings?.iframeSandboxAllowSameOrigin ??
-									false)
-										? ' allow-same-origin'
-										: ''}"
-									srcdoc={document.document}
-									title={$i18n.t('Content')}
-								></iframe>
-							{:else}
-								<pre class="text-sm dark:text-gray-400 whitespace-pre-line">{document.document
-										.trim()
-										.replace(/\n\n+/g, '\n\n')}</pre>
+						<iframe
+							class="w-full border-0 h-auto rounded-none"
+							sandbox="allow-scripts allow-forms{($settings?.iframeSandboxAllowSameOrigin ??
+							false)
+								? ' allow-same-origin'
+								: ''}"
+							srcdoc={document.document}
+							title={$i18n.t('Content')}
+						></iframe>
+					{:else}
+						{@const rawContent = document.document.trim().replace(/\n\n+/g, '\n\n')}
+						{@const isTruncated = ($settings?.renderMarkdownInPreviews ?? true) && rawContent.length > CONTENT_PREVIEW_LIMIT && !expandedDocs.has(documentIdx)}
+						{#if $settings?.renderMarkdownInPreviews ?? true}
+							<div class="text-sm prose dark:prose-invert max-w-full">
+								<Markdown content={isTruncated ? rawContent.slice(0, CONTENT_PREVIEW_LIMIT) : rawContent} id="citation-{documentIdx}" />
+							</div>
+							{#if isTruncated}
+								<button
+									class="mt-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+									on:click={() => {
+										expandedDocs.add(documentIdx);
+										expandedDocs = expandedDocs;
+									}}
+								>
+									{$i18n.t('Show all ({{COUNT}} characters)', { COUNT: rawContent.length.toLocaleString() })}
+								</button>
 							{/if}
+						{:else}
+							<pre class="text-sm dark:text-gray-400 whitespace-pre-line">{rawContent}</pre>
+						{/if}
+					{/if}
 						</div>
 					</div>
 				{/each}

src/lib/components/chat/Settings/Interface.svelte

@@ -70,6 +70,7 @@
 	let chatFadeStreamingText = true;
 	let collapseCodeBlocks = false;
 	let expandDetails = false;
+	let renderMarkdownInPreviews = true;
 	let showChatTitleInTab = true;
 
 	let showFloatingActionButtons = true;
@@ -232,6 +233,7 @@
 
 		collapseCodeBlocks = $settings?.collapseCodeBlocks ?? false;
 		expandDetails = $settings?.expandDetails ?? false;
+		renderMarkdownInPreviews = $settings?.renderMarkdownInPreviews ?? true;
 
 		landingPageMode = $settings?.landingPageMode ?? '';
 		chatBubble = $settings?.chatBubble ?? true;
@@ -964,6 +966,25 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div id="render-markdown-in-previews-label" class=" self-center text-xs">
+						{$i18n.t('Render Markdown in Previews')}
+					</div>
+
+					<div class="flex items-center gap-2 p-1">
+						<Switch
+							ariaLabelledbyId="render-markdown-in-previews-label"
+							tooltip={true}
+							bind:state={renderMarkdownInPreviews}
+							on:change={() => {
+								saveSettings({ renderMarkdownInPreviews });
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div id="keep-followup-prompts-label" class=" self-center text-xs">