stylized markdown think

src/lib/components/chat/Message.svelte

@@ -38,7 +38,7 @@
 	{:else}
 		{#if message.reasoning}
 			<Think
-				isThinking={!message.content || (message.content as string)?.trim() === ''}
+				isThinking={!!message.content && (message.content as string)?.trim() !== ''}
 				content={message.reasoning as string}
 			/>
 		{/if}

src/lib/components/chat/markdown/Code.svelte

@@ -2,7 +2,9 @@
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { Check, Copy } from '@lucide/svelte';
 	import { HighlightAuto } from 'svelte-highlight';
-	import 'svelte-highlight/styles/github.css';
+	import { mode } from 'mode-watcher';
+	import githubDarkUrl from 'svelte-highlight/styles/github-dark.css?url';
+	import githubUrl from 'svelte-highlight/styles/github.css?url';
 
 	let {
 		lang,
@@ -17,16 +19,30 @@
 		copiedCode = true;
 		setTimeout(() => (copiedCode = false), 2000);
 	}
+
+	$effect(() => {
+		const themeUrl = mode.current === 'dark' ? githubDarkUrl : githubUrl;
+		let link = document.getElementById('highlight-theme') as HTMLLinkElement | null;
+		if (!link) {
+			link = document.createElement('link');
+			link.id = 'highlight-theme';
+			link.rel = 'stylesheet';
+			document.head.appendChild(link);
+		}
+		link.href = themeUrl;
+	});
 </script>
 
 <div class="overflow-hidden {className}">
 	{#if lang}
-		<div class="flex items-center justify-between border-b border-border/60 bg-muted px-3 py-1.5">
+		<div
+			class="flex items-center justify-between border-b border-border/60 bg-muted px-3 py-1.5 dark:bg-accent/30"
+		>
 			<span class="font-mono text-[11px] text-muted-foreground">{lang}</span>
 		</div>
 	{/if}
 	<div class="group relative">
-		<HighlightAuto code={text} class="font-mono text-[13px] leading-relaxed" />
+		<HighlightAuto code={text} class="font-mono text-[11px] leading-relaxed" />
 		<Button
 			variant="outline"
 			class="absolute top-2 right-2 opacity-0 group-hover:opacity-100"

src/lib/components/chat/markdown/Codespan.svelte

@@ -3,6 +3,6 @@
 </script>
 
 <code
-	class="rounded-md border border-border/40 bg-muted px-1.5 py-0.5 font-mono text-[13px] text-foreground/85"
+	class="rounded-md border border-border/40 bg-accent-foreground/5 px-1.5 py-0.5 font-mono text-[11px] text-foreground/85"
 	>{raw.replace(/`/g, '')}</code
 >

src/lib/components/chat/markdown/Heading.svelte

@@ -5,19 +5,19 @@
 </script>
 
 {#if depth === 1}
-	<h1 class="mt-4 mb-2 text-2xl font-semibold text-foreground first:mt-0">
+	<h1 class="mt-4 mb-2 text-base font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h1>
 {:else if depth === 2}
-	<h2 class="mt-3.5 mb-2 text-xl font-semibold text-foreground first:mt-0">
+	<h2 class="mt-3.5 mb-2 text-base font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h2>
 {:else if depth === 3}
-	<h3 class="mt-3 mb-1.5 text-lg font-semibold text-foreground first:mt-0">
+	<h3 class="mt-3 mb-1.5 text-sm font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h3>
 {:else}
-	<h4 class="mt-2.5 mb-1 text-base font-semibold text-foreground first:mt-0">
+	<h4 class="mt-2.5 mb-1 text-sm font-semibold text-foreground first:mt-0">
 		{@render children?.()}
 	</h4>
 {/if}

src/lib/components/chat/markdown/List.svelte

@@ -6,14 +6,14 @@
 
 {#if ordered}
 	<ol
-		class="my-2 list-outside list-decimal space-y-1 pl-5 text-base text-foreground/90 marker:text-muted-foreground"
+		class="my-2 list-outside list-decimal space-y-1 pl-5 text-xs text-foreground/90 marker:text-muted-foreground"
 		{start}
 	>
 		{@render children?.()}
 	</ol>
 {:else}
 	<ul
-		class="my-2 list-outside list-disc space-y-1 pl-5 text-base text-foreground/90 marker:text-muted-foreground"
+		class="my-2 list-outside list-disc space-y-1 pl-5 text-xs text-foreground/90 marker:text-muted-foreground"
 	>
 		{@render children?.()}
 	</ul>

src/lib/components/chat/markdown/Paragraph.svelte

@@ -3,4 +3,4 @@
 	let { children }: { children?: Snippet } = $props();
 </script>
 
-<p class="mb-3 text-base leading-relaxed text-foreground/90 last:mb-0">{@render children?.()}</p>
+<p class="mb-3 text-xs leading-relaxed text-foreground/90 last:mb-0">{@render children?.()}</p>

src/lib/components/chat/markdown/Think.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { Brain, ChevronDown } from '@lucide/svelte';
+	import SvelteMarkdown from 'svelte-markdown';
 
 	import Spinner from '$lib/components/loading/Spinner.svelte';
+
+	import Paragraph from './Paragraph.svelte';
+	import Heading from './Heading.svelte';
+	import Code from './Code.svelte';
+	import Codespan from './Codespan.svelte';
+	import Blockquote from './Blockquote.svelte';
+	import List from './List.svelte';
+	import ListItem from './ListItem.svelte';
+	import Link from './Link.svelte';
+	import Hr from './Hr.svelte';
+
 	let { isThinking, content }: { isThinking?: boolean; content?: string } = $props();
 
 	let isCollapsed = $state.raw<boolean>(false);
@@ -10,15 +22,36 @@
 	function toggleCollapse() {
 		isCollapsed = !isCollapsed;
 	}
+
+	const renderers = {
+		paragraph: Paragraph,
+		heading: Heading,
+		code: Code,
+		codespan: Codespan,
+		blockquote: Blockquote,
+		list: List,
+		listitem: ListItem,
+		link: Link,
+		hr: Hr
+	};
+
+	$effect(() => {
+		if (!isThinking) {
+			isCollapsed = true;
+		}
+	});
 </script>
 
-<div class="mb-4 overflow-hidden rounded-xl border border-border bg-accent text-xs">
+<div
+	class="mb-4 overflow-hidden rounded-xl border border-border bg-accent text-xs dark:bg-accent/30"
+>
 	<button
-		class="flex w-full cursor-pointer items-center gap-2.5 p-3 text-left transition-colors hover:bg-accent/80"
+		class="flex w-full cursor-pointer items-center gap-2.5 p-3 text-left transition-colors hover:bg-accent/80 dark:hover:bg-accent/30"
 		onclick={toggleCollapse}
 	>
 		<div
-			class="flex size-7 min-h-7 min-w-7 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5"
+			class="flex size-7 min-h-7 min-w-7 items-center justify-center rounded-lg bg-linear-to-br from-primary/20 to-primary/5 {isThinking &&
+				'animate-pulse'}"
 		>
 			<Brain class="size-3.5 text-muted-foreground" />
 		</div>
@@ -37,7 +70,7 @@
 	{#if !isCollapsed}
 		<div transition:slide={{ duration: 200 }}>
 			<div class="border-t border-border/60 px-4 py-3">
-				<p class="whitespace-pre-wrap text-muted-foreground">{content?.trimStart()}</p>
+				<SvelteMarkdown source={content?.trimStart()} renderers={renderers as any} />
 			</div>
 		</div>
 	{/if}

src/lib/components/chat/markdown/think/Blockquote.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<blockquote class="my-2 border-l-2 border-muted-foreground/25 pl-2.5 text-muted-foreground/80 italic">
+	{@render children?.()}
+</blockquote>

src/lib/components/chat/markdown/think/Code.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { Check, Copy } from '@lucide/svelte';
+	import { HighlightAuto } from 'svelte-highlight';
+	import { mode } from 'mode-watcher';
+	import githubDarkUrl from 'svelte-highlight/styles/github-dark.css?url';
+	import githubUrl from 'svelte-highlight/styles/github.css?url';
+
+	let { lang, text }: { lang?: string; text: string } = $props();
+
+	let copiedCode = $state(false);
+
+	async function copy(text: string) {
+		await navigator.clipboard.writeText(text);
+		copiedCode = true;
+		setTimeout(() => (copiedCode = false), 2000);
+	}
+
+	$effect(() => {
+		const themeUrl = mode.current === 'dark' ? githubDarkUrl : githubUrl;
+		let link = document.getElementById('highlight-theme') as HTMLLinkElement | null;
+		if (!link) {
+			link = document.createElement('link');
+			link.id = 'highlight-theme';
+			link.rel = 'stylesheet';
+			document.head.appendChild(link);
+		}
+		link.href = themeUrl;
+	});
+</script>
+
+<div class="my-2 overflow-hidden rounded-md border border-border/50 bg-muted/40">
+	{#if lang}
+		<div
+			class="flex items-center justify-between border-b border-border/50 bg-muted/60 px-2.5 py-1 dark:bg-accent/20"
+		>
+			<span class="font-mono text-[10px] text-muted-foreground">{lang}</span>
+		</div>
+	{/if}
+	<div class="group relative">
+		<HighlightAuto code={text} class="font-mono text-[11px] leading-relaxed" />
+		<Button
+			variant="outline"
+			class="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100"
+			size="icon-xs"
+			onclick={() => copy(text)}
+		>
+			{#if copiedCode}
+				<Check class="size-3 text-green-500" />
+			{:else}
+				<Copy class="size-3" />
+			{/if}
+		</Button>
+	</div>
+</div>

src/lib/components/chat/markdown/think/Codespan.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	let { raw }: { raw: string } = $props();
+</script>
+
+<code
+	class="rounded border border-border/30 bg-muted px-1 py-px font-mono text-[10px] text-foreground/80"
+	>{raw.replace(/`/g, '')}</code
+>

src/lib/components/chat/markdown/think/Heading.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { depth, children }: { depth: number; raw?: string; text?: string; children?: Snippet } =
+		$props();
+</script>
+
+{#if depth === 1}
+	<h1 class="mt-3 mb-1.5 text-sm font-semibold text-foreground first:mt-0">
+		{@render children?.()}
+	</h1>
+{:else if depth === 2}
+	<h2 class="mt-2.5 mb-1 text-[13px] font-semibold text-foreground first:mt-0">
+		{@render children?.()}
+	</h2>
+{:else if depth === 3}
+	<h3 class="mt-2 mb-1 text-xs font-semibold text-foreground first:mt-0">
+		{@render children?.()}
+	</h3>
+{:else}
+	<h4 class="mt-1.5 mb-0.5 text-[11px] font-semibold text-foreground first:mt-0">
+		{@render children?.()}
+	</h4>
+{/if}

src/lib/components/chat/markdown/think/Hr.svelte

@@ -0,0 +1 @@
+<hr class="my-2.5 border-t border-border/40" />

src/lib/components/chat/markdown/think/Link.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let {
+		href = '',
+		title,
+		children
+	}: { href?: string; title?: string; children?: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	{title}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="text-primary/80 underline decoration-primary/30 underline-offset-2 transition-colors hover:text-primary hover:decoration-primary"
+>
+	{@render children?.()}
+</a>

src/lib/components/chat/markdown/think/List.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { ordered, start, children }: { ordered: boolean; start?: number; children?: Snippet } =
+		$props();
+</script>
+
+{#if ordered}
+	<ol
+		class="my-1.5 list-outside list-decimal space-y-0.5 pl-4 text-foreground/75 marker:text-muted-foreground"
+		{start}
+	>
+		{@render children?.()}
+	</ol>
+{:else}
+	<ul
+		class="my-1.5 list-outside list-disc space-y-0.5 pl-4 text-foreground/75 marker:text-muted-foreground"
+	>
+		{@render children?.()}
+	</ul>
+{/if}

src/lib/components/chat/markdown/think/ListItem.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<li class="leading-relaxed">{@render children?.()}</li>

src/lib/components/chat/markdown/think/Paragraph.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<p class="mb-2 leading-relaxed text-foreground/75 last:mb-0">{@render children?.()}</p>