183 lines
10 KiB
JavaScript
183 lines
10 KiB
JavaScript
// omp-edit Web client: render hashline / patch edits as a DSH-native diff card with line numbers.
|
|
//
|
|
// The stock `edit` row derives its diff from `file_path` + `old_string`/`new_string` arguments.
|
|
// Hashline, sloppy and apply_patch calls carry one `input` string instead, so the stock row falls
|
|
// back to raw text. This keyed toolview (priority -1 shadows the stock one) renders the applied
|
|
// hunks the host persists in `meta.diffs`.
|
|
//
|
|
// Styling uses only DSH theme tokens (the same ones DiffBlock.module.css uses: --dsw-alias-code-
|
|
// diff-added/-deleted, --dsw-alias-state-success-/error-primary, --dsw-font-markdown-code-block…)
|
|
// so it follows every theme. Each row shows its old/new file line numbers in a gutter, from the
|
|
// `oldStart`/`newStart`/`rows` the host attaches to every hunk (older results without them fall
|
|
// back to un-numbered rows).
|
|
window.__ModuleLoader__.load({
|
|
id: '@local/omp-edit',
|
|
factory(require) {
|
|
const React = require('react');
|
|
const P = require('@deepseek-ai/dsh-client-ui-primitives');
|
|
const h = React.createElement;
|
|
|
|
const CSS = `
|
|
.ompe-row{display:flex;flex-direction:column;gap:4px;min-width:0}
|
|
.ompe-head{display:flex;align-items:center;gap:6px;min-width:0;min-height:24px;padding:0 4px;margin:0 -4px;border:0;background:none;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;border-radius:var(--dsw-radius-sm);text-align:left}
|
|
.ompe-head:hover{background:var(--dsw-alias-interactive-bg-hover)}
|
|
.ompe-head:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary))}
|
|
.ompe-icon{display:inline-flex;flex:none;color:var(--dsw-alias-label-tertiary)}
|
|
.ompe-title{color:var(--dsw-alias-label-primary);flex:none}
|
|
.ompe-sum{color:var(--dsw-alias-label-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
|
|
.ompe-add{color:var(--dsw-alias-state-success-primary);flex:none;font-variant-numeric:tabular-nums}
|
|
.ompe-del{color:var(--dsw-alias-state-error-primary);flex:none;font-variant-numeric:tabular-nums}
|
|
.ompe-err{color:var(--dsw-alias-state-error-primary)}
|
|
.ompe-card{border-radius:var(--dsw-radius-lg,12px);background:var(--dsw-alias-bg-l2,var(--dsw-alias-fill-l1));border:1px solid var(--dsw-alias-border-l1,transparent);overflow:hidden}
|
|
.ompe-tools{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;color:var(--dsw-alias-label-tertiary);font-size:12px}
|
|
.ompe-tools-path{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.ompe-tbtn{border:0;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12px;height:24px;padding:0 6px;border-radius:var(--dsw-radius-sm);cursor:pointer}
|
|
.ompe-tbtn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
|
|
.ompe-body{display:grid;grid-template-columns:auto auto minmax(max-content,1fr);padding:2px 0 8px;font:var(--dsw-font-markdown-code-block);overflow-x:auto;max-height:480px;overflow-y:auto}
|
|
.ompe-body[data-wrap]{grid-template-columns:auto auto minmax(0,1fr)}
|
|
.ompe-ln{padding:0 8px 0 10px;text-align:right;color:var(--dsw-alias-label-tertiary);opacity:.7;user-select:none;font-variant-numeric:tabular-nums;white-space:pre}
|
|
.ompe-ln+.ompe-ln{padding-left:0}
|
|
.ompe-code{padding:0 16px 0 6px;white-space:pre;min-height:1lh}
|
|
.ompe-body[data-wrap] .ompe-code{white-space:pre-wrap;overflow-wrap:anywhere}
|
|
.ompe-code::before{display:inline-block;width:1.5ch;content:' '}
|
|
.ompe-r-add>.ompe-code::before{content:'+'}
|
|
.ompe-r-del>.ompe-code::before{content:'-'}
|
|
.ompe-r{display:contents}
|
|
.ompe-r-ctx>*{color:var(--dsw-alias-label-secondary)}
|
|
.ompe-r-add>*{background:var(--dsw-alias-code-diff-added)}
|
|
.ompe-r-add>.ompe-code{color:var(--dsw-alias-state-success-primary)}
|
|
.ompe-r-add>.ompe-ln:first-child{box-shadow:inset 3px 0 0 var(--dsw-alias-state-success-primary)}
|
|
.ompe-r-del>*{background:var(--dsw-alias-code-diff-deleted)}
|
|
.ompe-r-del>.ompe-code{color:var(--dsw-alias-state-error-primary)}
|
|
.ompe-r-del>.ompe-ln:first-child{box-shadow:inset 3px 0 0 var(--dsw-alias-state-error-primary)}
|
|
.ompe-r-path>*{color:var(--dsw-alias-label-secondary);font-weight:500;padding-top:6px}
|
|
.ompe-r-gap>*{color:var(--dsw-alias-label-tertiary)}
|
|
.ompe-text{margin:0;padding:8px 12px;font:var(--dsw-font-markdown-code-block);white-space:pre-wrap;color:var(--dsw-alias-label-secondary);max-height:320px;overflow:auto}
|
|
`;
|
|
let cssDone = false;
|
|
const installCss = () => {
|
|
if (cssDone || typeof document === 'undefined') return;
|
|
const s = document.createElement('style');
|
|
s.dataset.ompEdit = '';
|
|
s.textContent = CSS;
|
|
document.head.appendChild(s);
|
|
cssDone = true;
|
|
};
|
|
|
|
const Icon = P.IconEditOutlineRegular || (() => null);
|
|
|
|
function readDiffs(meta) {
|
|
const d = meta && typeof meta === 'object' && Array.isArray(meta.diffs) ? meta.diffs : [];
|
|
return d.filter((x) => x && typeof x.path === 'string' && typeof x.newText === 'string' && (x.oldText === null || typeof x.oldText === 'string'));
|
|
}
|
|
|
|
/** Hunk → numbered rows. Uses host-provided rows/starts; falls back to a naive old/new split. */
|
|
function hunkRows(d) {
|
|
const rows = Array.isArray(d.rows) ? d.rows : [
|
|
...(d.oldText === null ? [] : d.oldText.split('\n').map((t) => ['-', t])),
|
|
...d.newText.split('\n').map((t) => ['+', t]),
|
|
];
|
|
const numbered = Number.isInteger(d.oldStart) && Number.isInteger(d.newStart);
|
|
let o = d.oldStart; let n = d.newStart;
|
|
return rows.map(([op, text]) => {
|
|
const row = { kind: op === '+' ? 'add' : op === '-' ? 'del' : 'ctx', text, old: '', neu: '' };
|
|
if (numbered) {
|
|
if (op !== '+') row.old = String(o++);
|
|
if (op !== '-') row.neu = String(n++);
|
|
}
|
|
return row;
|
|
});
|
|
}
|
|
|
|
function buildRows(diffs) {
|
|
const out = [];
|
|
let prev;
|
|
for (const d of diffs) {
|
|
if (d.path !== prev) out.push({ kind: 'path', text: d.path, old: '', neu: '' });
|
|
else out.push({ kind: 'gap', text: '⋯', old: '', neu: '' });
|
|
prev = d.path;
|
|
out.push(...hunkRows(d));
|
|
}
|
|
return out;
|
|
}
|
|
|
|
const totals = (rows) => rows.reduce((a, r) => ({ add: a.add + (r.kind === 'add'), del: a.del + (r.kind === 'del') }), { add: 0, del: 0 });
|
|
|
|
function argsSummary(argsRaw) {
|
|
try {
|
|
const a = JSON.parse(argsRaw || '{}');
|
|
if (typeof a.file_path === 'string') return a.file_path;
|
|
if (typeof a.input === 'string') {
|
|
const files = [...a.input.matchAll(/^\[(.+?)#[0-9A-Fa-f]{4}\]\s*$/gm)].map((m) => m[1]);
|
|
const more = [...a.input.matchAll(/^\*\*\* (?:Edit|Update|Add|Delete) File:\s*(.+?)(?:\s+all)?\s*$/gm)].map((m) => m[1]);
|
|
return [...new Set([...files, ...more])].join(', ');
|
|
}
|
|
} catch { /* partial arguments */ }
|
|
return '';
|
|
}
|
|
|
|
function copyText(rows) {
|
|
return rows.map((r) => (r.kind === 'add' ? `+ ${r.text}` : r.kind === 'del' ? `- ${r.text}` : r.kind === 'ctx' ? ` ${r.text}` : r.text)).join('\n');
|
|
}
|
|
|
|
function DiffCard({ rows, files, t }) {
|
|
const [wrap, setWrap] = React.useState(false);
|
|
const [copied, setCopied] = React.useState(false);
|
|
const onCopy = () => {
|
|
navigator.clipboard?.writeText(copyText(rows)).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1000); }).catch(() => {});
|
|
};
|
|
const tr = (k, fb) => (typeof t === 'function' && t(k)) || fb;
|
|
return h('div', { className: 'ompe-card', 'data-diff': '' },
|
|
h('div', { className: 'ompe-tools' },
|
|
h('span', { className: 'ompe-tools-path' }, files),
|
|
h('button', { type: 'button', className: 'ompe-tbtn', onClick: () => setWrap((v) => !v) }, wrap ? tr('code.unwrap', 'No wrap') : tr('code.wrap', 'Wrap')),
|
|
h('button', { type: 'button', className: 'ompe-tbtn', onClick: onCopy }, copied ? tr('copied', 'Copied') : tr('copy', 'Copy'))),
|
|
h('div', { className: 'ompe-body', 'data-wrap': wrap ? '' : undefined },
|
|
rows.map((r, i) => h('div', { key: i, className: `ompe-r ompe-r-${r.kind}` },
|
|
h('span', { className: 'ompe-ln' }, r.old),
|
|
h('span', { className: 'ompe-ln' }, r.neu),
|
|
h('span', { className: 'ompe-code' }, r.text)))));
|
|
}
|
|
|
|
function EditRow(props) {
|
|
const { block, t, phase } = props;
|
|
React.useEffect(installCss, []);
|
|
const [open, setOpen] = React.useState(true);
|
|
const done = block && 'kind' in block;
|
|
const diffs = done && !block.isError ? readDiffs(block.meta) : [];
|
|
const rows = React.useMemo(() => buildRows(diffs), [block?.meta]);
|
|
const argsRaw = block?.call?.argsRaw ?? block?.argsRaw ?? '';
|
|
const files = diffs.length ? [...new Set(diffs.map((d) => d.path))].join(', ') : argsSummary(argsRaw);
|
|
const { add, del } = totals(rows);
|
|
const text = done && Array.isArray(block.content) ? block.content.filter((c) => c.type === 'text').map((c) => c.text).join('\n') : '';
|
|
const running = !done || phase === 'preparing';
|
|
const title = (typeof t === 'function' && t('tool.title.edit')) || 'Edit';
|
|
return h('div', { className: 'ompe-row' },
|
|
h('button', { type: 'button', className: 'ompe-head', onClick: () => setOpen((v) => !v), 'aria-expanded': open },
|
|
h('span', { className: 'ompe-icon' }, h(Icon, { size: 14 })),
|
|
h('span', { className: 'ompe-title' }, running ? `${title}…` : title),
|
|
files ? h('span', { className: 'ompe-sum' }, files) : null,
|
|
diffs.length ? h('span', { className: 'ompe-add' }, `+${add}`) : null,
|
|
diffs.length ? h('span', { className: 'ompe-del' }, `-${del}`) : null,
|
|
done && block.isError ? h('span', { className: 'ompe-err' }, '✕') : null),
|
|
open && rows.length
|
|
? h(DiffCard, { rows, files, t })
|
|
: open && done && text
|
|
? h('div', { className: 'ompe-card' }, h('pre', { className: `ompe-text${block.isError ? ' ompe-err' : ''}` }, text))
|
|
: null);
|
|
}
|
|
|
|
return {
|
|
inject: ['slots'],
|
|
apply(ctx) {
|
|
ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
|
|
name: 'tool.call.toolview',
|
|
key: 'edit',
|
|
locale: 'conversation',
|
|
priority: -1,
|
|
}, EditRow));
|
|
},
|
|
};
|
|
},
|
|
});
|