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}

src/lib/utils/marked/colon-fence-extension.ts

@@ -0,0 +1,56 @@
+/**
+ * Marked extension for colon-fence blocks (:::type ... :::)
+ *
+ * Used by newer OpenAI chat models to wrap semantically distinct content:
+ *   :::writing    – reusable prose (letters, articles, docs)
+ *   :::code_execution – code execution output
+ *   :::search_results  – web search results
+ *
+ * The extension is generic and will tokenize any :::<identifier> block.
+ */
+
+function colonFenceTokenizer(this: any, src: string) {
+	// Match :::type at the start of a line, optionally followed by content, then closing :::
+	const match = /^:::([\w-]+)\n([\s\S]*?)(?:\n:::(?:\s*$|\n))/m.exec(src);
+	if (match) {
+		const fenceType = match[1];
+		const text = match[2].trim();
+		const raw = match[0];
+
+		const tokens: any[] = [];
+		this.lexer.blockTokens(text, tokens);
+
+		return {
+			type: 'colonFence',
+			raw,
+			fenceType,
+			text,
+			tokens
+		};
+	}
+}
+
+function colonFenceStart(src: string) {
+	const idx = src.match(/^:::\w/m);
+	return idx ? idx.index! : -1;
+}
+
+function colonFenceRenderer(token: any) {
+	return `<div class="colon-fence colon-fence-${token.fenceType}">${token.text}</div>`;
+}
+
+function colonFenceExtension() {
+	return {
+		name: 'colonFence',
+		level: 'block' as const,
+		start: colonFenceStart,
+		tokenizer: colonFenceTokenizer,
+		renderer: colonFenceRenderer
+	};
+}
+
+export default function (options = {}) {
+	return {
+		extensions: [colonFenceExtension()]
+	};
+}