admin-valentin/agent-ecosystem
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add markdown preview toggle for Write tool (#21)

Browse source
This commit is contained in:
Sanath Samarasinghe 2026-02-19 06:03:16 +01:00 committed by GitHub
parent bd088ec71c
commit 94f722d993
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx
View file

@ -6,7 +6,7 @@
import React from 'react';
import { CodeBlockViewer } from '@renderer/components/chat/viewers';
import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
import type { LinkedToolItem } from '@renderer/types/groups';
@ -20,13 +20,47 @@ export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool })
const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
const content = (toolUseResult?.content as string) || (linkedTool.input.content as string) || '';
const isCreate = toolUseResult?.type === 'create';
const isMarkdownFile = /\.mdx?$/i.test(filePath);
const [viewMode, setViewMode] = React.useState<'code' | 'preview'>('code');
return (
<div className="space-y-2">
<div className="mb-1 text-xs text-zinc-500">
{isCreate ? 'Created file' : 'Wrote to file'}
</div>
<CodeBlockViewer fileName={filePath} content={content} startLine={1} />
{isMarkdownFile && (
<div className="flex items-center justify-end gap-1">
<button
type="button"
onClick={() => setViewMode('code')}
className="rounded px-2 py-1 text-xs transition-colors"
style={{
backgroundColor: viewMode === 'code' ? 'var(--tag-bg)' : 'transparent',
color: viewMode === 'code' ? 'var(--tag-text)' : 'var(--color-text-muted)',
border: '1px solid var(--tag-border)',
}}
>
Code
</button>
<button
type="button"
onClick={() => setViewMode('preview')}
className="rounded px-2 py-1 text-xs transition-colors"
style={{
backgroundColor: viewMode === 'preview' ? 'var(--tag-bg)' : 'transparent',
color: viewMode === 'preview' ? 'var(--tag-text)' : 'var(--color-text-muted)',
border: '1px solid var(--tag-border)',
}}
>
Preview
</button>
</div>
)}
{isMarkdownFile && viewMode === 'preview' ? (
<MarkdownViewer content={content} label="Markdown Preview" copyable />
) : (
<CodeBlockViewer fileName={filePath} content={content} startLine={1} />
)}
</div>
);
};