2 import { XCircle } from '@lucide/svelte';
3 import { SyntaxHighlightedCode } from '$lib/components/app';
4 import { MAX_HEIGHT_CODE_BLOCK, RESULT_STAT_SEPARATOR } from '$lib/constants';
5 import { abbreviateHome, type AgenticSection } from '$lib/utils';
6 import { toolsStore } from '$lib/stores/tools.svelte';
7 import { parseWriteFileMeta } from './parsers/write-file';
8 import ToolCallBlock from './ToolCallBlock.svelte';
11 section: AgenticSection;
14 onToggle?: () => void;
17 let { section, open, isStreaming, onToggle }: Props = $props();
19 const writeFileMeta = $derived(parseWriteFileMeta(section));
20 const home = $derived(toolsStore.serverHome);
23 <ToolCallBlock {section} {open} {isStreaming} meta={writeFileMeta} {onToggle}>
24 {#snippet titleSnippet()}
25 <span class="text-muted-foreground">Write file </span>
26 <span class="font-mono" title={writeFileMeta?.filePath}
27 >{abbreviateHome(writeFileMeta?.filePath ?? '', home)}</span
29 {#if writeFileMeta?.errorMessage}
30 <span class="ml-1 text-xs italic text-muted-foreground/70">(failed)</span>
34 {#snippet children(meta, ctx)}
35 {#if meta?.errorMessage}
37 class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
39 <XCircle class="mt-0.5 h-3 w-3 shrink-0" />
40 <span>{meta.errorMessage}</span>
43 <SyntaxHighlightedCode
45 language={meta.language}
46 maxHeight={MAX_HEIGHT_CODE_BLOCK}
47 streaming={ctx.isCodeStreaming}
49 <div class="mt-1.5 text-xs text-muted-foreground/70 italic">
50 {#if meta.resultMessage}
51 {meta.resultMessage}{meta.bytesWritten != null ? RESULT_STAT_SEPARATOR : ''}{/if}
52 {#if meta.bytesWritten != null}
53 <span class="font-mono">{meta.bytesWritten}</span>