feat: inline markdown output box — render AI reply with marked, do not replace cell
Flow (v3-final corrected):
1. Model call succeeds.
2. Server passes the AI reply through unchanged as 'markdown' (the
system prompt allows ```language fences + a brief explanation, so
the response is real markdown that marked can render into code
blocks, headings, etc.).
3. Client OpenCodeCellActions._handleResponse calls prompt.setOutput(
resp.markdown); the inline prompt widget renders it with
marked.parse and shows it in a new output area (hidden until a
response arrives). The cell source is NOT replaced.
4. User can close the output or cancel the whole prompt.
Server:
- New unified system prompt: '你是代码助手 ... 按指令修改代码,可附简
短说明' (allows ```fences``` + explanation; no more 'no markdown
fences' restriction).
- EditHandler returns {ok, markdown, sessionId, notebookPath} (raw
text, fences intact). _strip_code_fence kept as a helper for any
future apply-to-cell path; no longer called.
- finalSource field dropped (the cell-apply path is gone).
Client:
- OpenCodeSuccess: markdown: string (finalSource removed).
- OpenCodeInlinePrompt: new output area, setOutput(md) renders via
marked.parse, hideOutput() closes it.
- OpenCodeCellActions._handleResponse: setOutput(markdown) instead of
sharedModel.setSource + auto-hide. The prompt stays open so the
user can read the output.
- Uses marked@17 (already in node_modules via JupyterLab; no new dep).
- CSS: output area styling (border, max-height 320px scroll, code/pre
styling, close button).
Tests: pytest 34/34, jest 29/29. marked is mocked in jest.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5
parent
04f90ab5a0
commit
1d7f5da9d4
@@ -9,6 +9,7 @@
|
||||
*/
|
||||
import { CodeCell } from '@jupyterlab/cells';
|
||||
import { Widget } from '@lumino/widgets';
|
||||
import { marked } from 'marked';
|
||||
|
||||
import type { OpenCodeProvidersResponse } from '../types';
|
||||
|
||||
@@ -69,6 +70,8 @@ export class OpenCodeInlinePrompt extends Widget {
|
||||
private _modelSelect: HTMLSelectElement | null = null;
|
||||
private _providerModels: FlatProvider[];
|
||||
private _defaultMap: { [pid: string]: string };
|
||||
private _outputArea: HTMLDivElement;
|
||||
private _outputContent: HTMLDivElement;
|
||||
|
||||
constructor(
|
||||
_cell: CodeCell,
|
||||
@@ -153,6 +156,31 @@ export class OpenCodeInlinePrompt extends Widget {
|
||||
}
|
||||
this.node.appendChild(this._textarea);
|
||||
this.node.appendChild(actions);
|
||||
|
||||
// Output area: hidden by default; revealed by setOutput() with the
|
||||
// markdown-rendered AI response. The cell source is NOT replaced.
|
||||
this._outputArea = document.createElement('div');
|
||||
this._outputArea.className = 'opencode-inline-output';
|
||||
this._outputArea.style.display = 'none';
|
||||
const outputHeader = document.createElement('div');
|
||||
outputHeader.className = 'opencode-inline-output-header';
|
||||
const outputTitle = document.createElement('span');
|
||||
outputTitle.textContent = '结果';
|
||||
const outputCloseBtn = document.createElement('button');
|
||||
outputCloseBtn.className = 'opencode-inline-output-close';
|
||||
outputCloseBtn.type = 'button';
|
||||
outputCloseBtn.textContent = '✕';
|
||||
outputCloseBtn.title = '关闭输出';
|
||||
outputCloseBtn.addEventListener('click', () => {
|
||||
this.hideOutput();
|
||||
});
|
||||
outputHeader.appendChild(outputTitle);
|
||||
outputHeader.appendChild(outputCloseBtn);
|
||||
this._outputContent = document.createElement('div');
|
||||
this._outputContent.className = 'opencode-inline-output-content';
|
||||
this._outputArea.appendChild(outputHeader);
|
||||
this._outputArea.appendChild(this._outputContent);
|
||||
this.node.appendChild(this._outputArea);
|
||||
}
|
||||
|
||||
private _rebuildModelSelect(providerId: string | undefined): void {
|
||||
@@ -196,4 +224,20 @@ export class OpenCodeInlinePrompt extends Widget {
|
||||
this._modelSelect.disabled = disabled;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the AI response as markdown and show the output area in place
|
||||
* of replacing the cell source. Safe for local-trusted content from the
|
||||
* user's OpenCode Serve; do not feed untrusted markdown here without
|
||||
* adding a sanitizer (e.g. DOMPurify).
|
||||
*/
|
||||
setOutput(markdown: string): void {
|
||||
this._outputContent.innerHTML = marked.parse(markdown) as string;
|
||||
this._outputArea.style.display = 'block';
|
||||
}
|
||||
|
||||
hideOutput(): void {
|
||||
this._outputArea.style.display = 'none';
|
||||
this._outputContent.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user