feat: Copy / Insert / Replace buttons on assistant messages

Each assistant message in the inline prompt history now renders a
small toolbar with three action buttons:

  📋 复制  — copy the rendered assistant content (the markdown
             source, not the rendered HTML) to the clipboard via
             navigator.clipboard.writeText, with a fallback to a
             hidden textarea + execCommand for non-secure contexts.
  ↪ 插入  — insert the content at the current editor cursor. Uses
             cell.editor.getCursorPosition() + the cell source to
             compute the offset, then sharedModel.setSource to splice
             the text in. Falls back to appending if the cursor can't
             be read.
  ⟳ 替换  — replace the entire cell source with the assistant content
             via sharedModel.setSource.

User messages and the textarea/send/cancel UI are unchanged; the
toolbar only appears on rendered assistant (markdown) messages.

Implementation:
  - OpenCodeInlinePrompt now stores the cell (private _cell) so the
    button handlers can act on it.
  - New private methods: _copyToClipboard, _insertAtCursor,
    _replaceCell. Each shows a Notification on success/failure.
  - Added import { Notification } from '@jupyterlab/apputils' (the
    prompt file didn't import it before; cell_actions does, so the
    test mock already provides the static methods).
  - style/base.css: .opencode-msg-toolbar (flex row) and
    .opencode-msg-btn (small bordered button) styles.
  - Test fake cell now has an editor stub returning cursor (0,0) so
    the Insert test produces a deterministic offset. jsdom lacks
    navigator.clipboard; the test stubs it globally.

Tests:
  - jest 33/33 (was 29; +4 new: toolbar renders 3 buttons only on
    assistant, Replace sets source, Insert splices at offset 0, Copy
    calls clipboard.writeText with the content).
  - pytest 37/37 (no server changes).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
tao.chen
2026-07-23 19:13:28 +08:00
co-authored by Claude Fable 5
parent ce59502e97
commit cb3576c83a
3 changed files with 248 additions and 2 deletions
+119 -2
View File
@@ -10,6 +10,7 @@
* (the AI reply is rendered as markdown inside this history area).
*/
import { CodeCell } from '@jupyterlab/cells';
import { Notification } from '@jupyterlab/apputils';
import { Widget } from '@lumino/widgets';
import { marked } from 'marked';
@@ -65,6 +66,7 @@ function pickDefaultModelId(
}
export class OpenCodeInlinePrompt extends Widget {
private _cell: CodeCell;
private _textarea: HTMLTextAreaElement;
private _sendBtn: HTMLButtonElement;
private _cancelBtn: HTMLButtonElement;
@@ -75,10 +77,11 @@ export class OpenCodeInlinePrompt extends Widget {
private _historyEl: HTMLDivElement;
constructor(
_cell: CodeCell,
cell: CodeCell,
options: IOpenCodeInlinePromptOptions
) {
super();
this._cell = cell;
this.addClass('opencode-inline-prompt');
const flat = flattenProviders(options.providers);
@@ -222,10 +225,124 @@ export class OpenCodeInlinePrompt extends Widget {
if (msg.role === 'user') {
wrap.textContent = msg.content;
} else {
wrap.innerHTML = marked.parse(msg.content) as string;
// Assistant: small action toolbar (copy / insert at cursor /
// replace cell) + the rendered markdown content below.
const toolbar = document.createElement('div');
toolbar.className = 'opencode-msg-toolbar';
const content = msg.content;
const mkBtn = (label: string, title: string, onClick: () => void) => {
const b = document.createElement('button');
b.type = 'button';
b.className = 'opencode-msg-btn';
b.textContent = label;
b.title = title;
b.addEventListener('click', onClick);
return b;
};
toolbar.appendChild(
mkBtn('📋 复制', '复制内容到剪贴板', () => {
void this._copyToClipboard(content);
})
);
toolbar.appendChild(
mkBtn('↪ 插入', '在光标位置插入内容', () => {
this._insertAtCursor(content);
})
);
toolbar.appendChild(
mkBtn('⟳ 替换', '替换整个单元格内容', () => {
this._replaceCell(content);
})
);
wrap.appendChild(toolbar);
const rendered = document.createElement('div');
rendered.className = 'opencode-msg-content';
rendered.innerHTML = marked.parse(content) as string;
wrap.appendChild(rendered);
}
this._historyEl.appendChild(wrap);
}
this._historyEl.scrollTop = this._historyEl.scrollHeight;
}
/**
* Copy the given text to the clipboard. Prefers navigator.clipboard
* (available in secure contexts incl. JupyterLab). Falls back to a
* hidden textarea + execCommand for older / non-secure contexts.
*/
private async _copyToClipboard(text: string): Promise<void> {
try {
if (
typeof navigator !== 'undefined' &&
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
await navigator.clipboard.writeText(text);
Notification.info('已复制到剪贴板');
return;
}
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.opacity = '0';
this.node.appendChild(ta);
ta.select();
document.execCommand('copy');
ta.remove();
Notification.info('已复制到剪贴板');
} catch (e) {
Notification.error('复制失败: ' + (e as Error).message);
}
}
/**
* Insert text at the current editor cursor position. If the cell has
* no editor (e.g. a non-Code cell) or the cursor can't be read, falls
* back to appending at the end of the cell.
*/
private _insertAtCursor(text: string): void {
const cell = this._cell;
if (!cell || !cell.model || !cell.model.sharedModel) {
return;
}
const sharedModel = cell.model.sharedModel;
const source = sharedModel.getSource() as string;
let offset = source.length;
try {
const editor = (cell as any).editor;
const pos = editor && editor.getCursorPosition
? editor.getCursorPosition()
: null;
if (pos) {
const lines = source.split('\n');
const line = Math.max(0, Math.min(pos.line, lines.length - 1));
const col = Math.max(
0,
Math.min(pos.column, (lines[line] ?? '').length)
);
offset = 0;
for (let i = 0; i < line; i++) {
offset += lines[i].length + 1;
}
offset += col;
}
} catch {
// Fall back to append on any error reading the cursor.
offset = source.length;
}
const newSource = source.slice(0, offset) + text + source.slice(offset);
sharedModel.setSource(newSource);
Notification.info('已插入到光标位置');
}
/** Replace the entire cell source with the given text. */
private _replaceCell(text: string): void {
const cell = this._cell;
if (!cell || !cell.model || !cell.model.sharedModel) {
return;
}
cell.model.sharedModel.setSource(text);
Notification.info('已替换单元格内容');
}
}