132 lines
6.3 KiB
TypeScript
132 lines
6.3 KiB
TypeScript
import React from 'react';
|
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { cn } from '@/lib/utils';
|
|
import { getLanguageFromExtension } from '@/lib/toolHelpers';
|
|
import { parseDiffToUnified } from './message/toolRenderers';
|
|
|
|
interface DiffPreviewProps {
|
|
diff: string;
|
|
syntaxTheme: { [key: string]: React.CSSProperties };
|
|
filePath?: string;
|
|
}
|
|
|
|
export const DiffPreview: React.FC<DiffPreviewProps> = ({ diff, syntaxTheme, filePath }) => (
|
|
<div className="typography-code px-1 pb-1 pt-0 space-y-0">
|
|
{parseDiffToUnified(diff).map((hunk, hunkIdx) => (
|
|
<div key={hunkIdx} className="-mx-1 px-1 border-b border-border/20 last:border-b-0">
|
|
<div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border-b border-border/10 break-words -mx-1">
|
|
{`${hunk.file || filePath?.split('/').pop() || 'file'} (line ${hunk.oldStart})`}
|
|
</div>
|
|
|
|
<div>
|
|
{hunk.lines.map((line, lineIdx) => (
|
|
<div
|
|
key={lineIdx}
|
|
className={cn(
|
|
'typography-code font-mono px-2 py-0.5 flex -mx-2',
|
|
line.type === 'context' && 'bg-transparent',
|
|
line.type === 'removed' && 'bg-transparent',
|
|
line.type === 'added' && 'bg-transparent'
|
|
)}
|
|
style={
|
|
line.type === 'removed'
|
|
? { backgroundColor: 'var(--tools-edit-removed-bg)' }
|
|
: line.type === 'added'
|
|
? { backgroundColor: 'var(--tools-edit-added-bg)' }
|
|
: {}
|
|
}
|
|
>
|
|
<span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
|
|
{line.lineNumber || ''}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<SyntaxHighlighter
|
|
style={syntaxTheme}
|
|
language={getLanguageFromExtension(filePath || hunk.file) || 'text'}
|
|
PreTag="div"
|
|
wrapLines
|
|
wrapLongLines
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: 0,
|
|
fontSize: 'inherit',
|
|
background: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
borderRadius: 0,
|
|
overflow: 'visible',
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-all',
|
|
overflowWrap: 'anywhere',
|
|
}}
|
|
codeTagProps={{
|
|
style: { background: 'transparent', backgroundColor: 'transparent', fontSize: 'inherit' },
|
|
}}
|
|
>
|
|
{line.content}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
interface WritePreviewProps {
|
|
content: string;
|
|
syntaxTheme: { [key: string]: React.CSSProperties };
|
|
filePath?: string;
|
|
}
|
|
|
|
export const WritePreview: React.FC<WritePreviewProps> = ({ content, syntaxTheme, filePath }) => {
|
|
const lines = content.split('\n');
|
|
const language = getLanguageFromExtension(filePath ?? '') || 'text';
|
|
const displayPath = filePath?.split('/').pop() || 'New file';
|
|
const lineCount = Math.max(lines.length, 1);
|
|
const headerLineLabel = lineCount === 1 ? 'line 1' : `lines 1-${lineCount}`;
|
|
|
|
return (
|
|
<div className="w-full min-w-0">
|
|
<div className="bg-muted/20 px-2 py-1 typography-meta font-medium text-muted-foreground border border-border/10 rounded-lg mb-1">
|
|
{`${displayPath} (${headerLineLabel})`}
|
|
</div>
|
|
<div className="space-y-0">
|
|
{lines.map((line, lineIdx) => (
|
|
<div key={lineIdx} className="typography-code font-mono px-2 py-0.5 flex -mx-1">
|
|
<span className="text-muted-foreground/60 w-8 flex-shrink-0 text-right pr-2 self-start select-none">
|
|
{lineIdx + 1}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<SyntaxHighlighter
|
|
style={syntaxTheme}
|
|
language={language}
|
|
PreTag="div"
|
|
wrapLines
|
|
wrapLongLines
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: 0,
|
|
fontSize: 'inherit',
|
|
background: 'transparent',
|
|
backgroundColor: 'transparent',
|
|
borderRadius: 0,
|
|
overflow: 'visible',
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-all',
|
|
overflowWrap: 'anywhere',
|
|
}}
|
|
codeTagProps={{
|
|
style: { background: 'transparent', backgroundColor: 'transparent', fontSize: 'inherit' },
|
|
}}
|
|
>
|
|
{line || ' '}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|