feat: add markdown preview toggle for Write tool (#21)
This commit is contained in:
parent
bd088ec71c
commit
94f722d993
1 changed files with 36 additions and 2 deletions
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
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';
|
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 filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
|
||||||
const content = (toolUseResult?.content as string) || (linkedTool.input.content as string) || '';
|
const content = (toolUseResult?.content as string) || (linkedTool.input.content as string) || '';
|
||||||
const isCreate = toolUseResult?.type === 'create';
|
const isCreate = toolUseResult?.type === 'create';
|
||||||
|
const isMarkdownFile = /\.mdx?$/i.test(filePath);
|
||||||
|
const [viewMode, setViewMode] = React.useState<'code' | 'preview'>('code');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="mb-1 text-xs text-zinc-500">
|
<div className="mb-1 text-xs text-zinc-500">
|
||||||
{isCreate ? 'Created file' : 'Wrote to file'}
|
{isCreate ? 'Created file' : 'Wrote to file'}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue