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

<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>