enh: colon fence md

src/lib/components/chat/Messages/Markdown.svelte

@@ -8,6 +8,7 @@
 	import markedKatexExtension from '$lib/utils/marked/katex-extension';
 	import { disableSingleTilde } from '$lib/utils/marked/strikethrough-extension';
 	import { mentionExtension } from '$lib/utils/marked/mention-extension';
+	import colonFenceExtension from '$lib/utils/marked/colon-fence-extension';
 
 	import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
 	import footnoteExtension from '$lib/utils/marked/footnote-extension';
@@ -48,6 +49,7 @@
 	marked.use(markedExtension(options));
 	marked.use(citationExtension(options));
 	marked.use(footnoteExtension(options));
+	marked.use(colonFenceExtension(options));
 	marked.use(disableSingleTilde);
 	marked.use({
 		extensions: [

src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { copyToClipboard } from '$lib/utils';
+	import { settings } from '$lib/stores';
+	import MarkdownTokens from './MarkdownTokens.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
+
+	export let id: string = '';
+	export let token: any;
+	export let tokenIdx: number = 0;
+
+	export let done: boolean = true;
+	export let editCodeBlock: boolean = true;
+	export let sourceIds: string[] = [];
+	export let onTaskClick: Function = () => {};
+	export let onSourceClick: Function = () => {};
+
+	const fenceType: string = token.fenceType ?? 'default';
+
+	const label = fenceType.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+	let copied = false;
+
+	const copyText = async () => {
+		copied = true;
+		await copyToClipboard(token.text, null, $settings?.copyFormatted ?? false);
+		setTimeout(() => {
+			copied = false;
+		}, 1000);
+	};
+</script>
+
+<div class="relative group my-2 rounded-2xl border border-gray-100 dark:border-gray-800 px-4 py-3">
+	<!-- Header row: type badge + copy button -->
+	<div class="flex items-center justify-between mb-2">
+		<span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+			{label}
+		</span>
+
+		<div class="invisible group-hover:visible flex gap-0.5">
+			<Tooltip content={copied ? $i18n.t('Copied') : $i18n.t('Copy')}>
+				<button
+					class="p-1 rounded-lg bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition"
+					on:click={(e) => {
+						e.stopPropagation();
+						copyText();
+					}}
+				>
+					{#if copied}
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3.5 text-green-500">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+						</svg>
+					{:else}
+						<DocumentDuplicate className="size-3.5" strokeWidth="1.5" />
+					{/if}
+				</button>
+			</Tooltip>
+		</div>
+	</div>
+
+	<!-- Content -->
+	<div class="prose-sm" dir="auto">
+		<MarkdownTokens
+			id={`${id}-${tokenIdx}-cf`}
+			tokens={token.tokens}
+			{done}
+			{editCodeBlock}
+			{sourceIds}
+			{onTaskClick}
+			{onSourceClick}
+		/>
+	</div>
+</div>

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -23,6 +23,7 @@
 
 	import HtmlToken from './HTMLToken.svelte';
 	import Clipboard from '$lib/components/icons/Clipboard.svelte';
+	import ColonFenceBlock from './ColonFenceBlock.svelte';
 
 	export let id: string;
 	export let tokens: Token[];
@@ -434,6 +435,17 @@
 		{#if token.text}
 			<KatexRenderer content={token.text} displayMode={token?.displayMode ?? false} />
 		{/if}
+	{:else if token.type === 'colonFence'}
+		<ColonFenceBlock
+			id={`${id}-${tokenIdx}`}
+			{token}
+			{tokenIdx}
+			{done}
+			{editCodeBlock}
+			{sourceIds}
+			{onTaskClick}
+			{onSourceClick}
+		/>
 	{:else if token.type === 'space'}
 		<div class="my-2" />
 	{:else}