Enhance code token processing to include fenced block closure detection

src/lib/components/chat/MarkdownRenderer.svelte

@@ -86,6 +86,10 @@
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html token.html}
 	{:else if token.type === "code"}
-		<CodeBlock code={token.code} rawCode={token.rawCode} {loading} />
+		<CodeBlock
+			code={token.code}
+			rawCode={token.rawCode}
+			loading={loading && !token.isClosed}
+		/>
 	{/if}
 {/each}

src/lib/utils/marked.ts

@@ -172,11 +172,24 @@ function createMarkedInstance(sources: SimpleSource[]): Marked {
 		breaks: true,
 	});
 }
+function isFencedBlockClosed(raw?: string): boolean {
+	if (!raw) return true;
+	const trimmed = raw.replace(/[\s\u0000]+$/, "");
+	const openingFenceMatch = trimmed.match(/^([`~]{3,})/);
+	if (!openingFenceMatch) {
+		return true;
+	}
+	const fence = openingFenceMatch[1];
+	const closingFencePattern = new RegExp(`(?:\n|\r\n)${fence}(?:[\t ]+)?$`);
+	return closingFencePattern.test(trimmed);
+}
+
 type CodeToken = {
 	type: "code";
 	lang: string;
 	code: string;
 	rawCode: string;
+	isClosed: boolean;
 };
 
 type TextToken = {
@@ -190,13 +203,14 @@ export async function processTokens(content: string, sources: SimpleSource[]): P
 
 	const processedTokens = await Promise.all(
 		tokens.map(async (token) => {
-			if (token.type === "code") {
-				return {
-					type: "code" as const,
-					lang: token.lang,
-					code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
-					rawCode: token.text,
-				};
+				if (token.type === "code") {
+					return {
+						type: "code" as const,
+						lang: token.lang,
+						code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
+						rawCode: token.text,
+						isClosed: isFencedBlockClosed(token.raw ?? ""),
+					};
 			} else {
 				return {
 					type: "text" as const,
@@ -213,13 +227,14 @@ export function processTokensSync(content: string, sources: SimpleSource[]): Tok
 	const marked = createMarkedInstance(sources);
 	const tokens = marked.lexer(content);
 	return tokens.map((token) => {
-		if (token.type === "code") {
-			return {
-				type: "code" as const,
-				lang: token.lang,
-				code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
-				rawCode: token.text,
-			};
+			if (token.type === "code") {
+				return {
+					type: "code" as const,
+					lang: token.lang,
+					code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
+					rawCode: token.text,
+					isClosed: isFencedBlockClosed(token.raw ?? ""),
+				};
 		}
 		return { type: "text" as const, html: marked.parse(token.raw) };
 	});