CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-10-22 01:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(client): compact single-number gutter in diff view

Browse source 
The dual old/new gutters left one column blank on every add or delete
row, reading as a stray number floating far from its marker. Each row
now shows the one relevant line number (old for removals, new
otherwise) right beside the +/- marker, and the scroll container is
vertical-only since lines wrap.
This commit is contained in:
Marco Beretta 2026-07-31 02:30:08 +02:00
parent 5bd295262c
commit b9f5a886df
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Chat/Messages/Content/Parts/DiffView.tsx
View file

@ -74,8 +74,6 @@ export function parseUnifiedDiff(diff: string): ParsedDiff {
return { lines, additions, deletions, hasLineNumbers };
}
const LINE_NUMBER_CLASS = 'w-9 shrink-0 select-none pr-1.5 text-right text-text-tertiary';
const LINE_MARKERS: Record<DiffLine['type'], string> = {
add: '+',
del: '-',
@ -83,6 +81,12 @@ const LINE_MARKERS: Record<DiffLine['type'], string> = {
hunk: '',
};
/** One number per row keeps the gutter compact: the old line for removals
* (it no longer exists in the new file) and the new line otherwise. */
function lineNumber(line: DiffLine): number | undefined {
return line.type === 'del' ? line.oldLine : (line.newLine ?? line.oldLine);
}
export default function DiffView({ parsed }: { parsed: ParsedDiff }) {
const { lines, hasLineNumbers } = parsed;
const firstContentIndex = lines.findIndex((line) => line.type !== 'hunk');
@ -90,7 +94,7 @@ export default function DiffView({ parsed }: { parsed: ParsedDiff }) {
return (
<div
data-testid="diff-view"
className="max-h-[300px] overflow-auto bg-surface-chat py-2 font-mono text-xs leading-5 dark:bg-surface-primary-alt"
className="max-h-[300px] overflow-y-auto bg-surface-chat py-2 font-mono text-xs leading-5 dark:bg-surface-primary-alt"
>
{lines.map((line, index) => {
if (line.type === 'hunk') {
@ -116,14 +120,14 @@ export default function DiffView({ parsed }: { parsed: ParsedDiff }) {
)}
>
{hasLineNumbers && (
<>
<span className={LINE_NUMBER_CLASS}>{line.oldLine ?? ''}</span>
<span className={LINE_NUMBER_CLASS}>{line.newLine ?? ''}</span>
</>
<span className="w-9 shrink-0 select-none pr-1 text-right text-[11px] text-text-tertiary">
{lineNumber(line) ?? ''}
</span>
)}
<span
className={cn(
'w-6 shrink-0 select-none text-center font-semibold',
'shrink-0 select-none text-center font-semibold',
hasLineNumbers ? 'w-5' : 'w-6',
line.type === 'add' && 'text-green-600 dark:text-green-400',
line.type === 'del' && 'text-red-600 dark:text-red-400',
)}