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
@@ -47,6 +47,11 @@ jest.mock('@lumino/widgets', () => {
|
||||
return { Widget };
|
||||
});
|
||||
|
||||
jest.mock('marked', () => ({
|
||||
__esModule: true,
|
||||
marked: { parse: (md: string) => `<mock>${md}</mock>` }
|
||||
}));
|
||||
|
||||
import {
|
||||
OpenCodeCellActions,
|
||||
setOpenCodeProviders,
|
||||
@@ -324,6 +329,33 @@ describe('OpenCodeCellActions', () => {
|
||||
cell.node.querySelector('.opencode-inline-prompt .opencode-model-select')
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it('on a successful response, does NOT replace the cell source (renders to inline output instead)', () => {
|
||||
setOpenCodeProviders(null);
|
||||
const cell = makeFakeCell('x = 1');
|
||||
const actions = new OpenCodeCellActions(cell);
|
||||
// Click once to create the inline prompt (so setOutput has a target).
|
||||
Object.defineProperty(actions, 'parent', { value: cell, configurable: true });
|
||||
(actions as any).onAfterAttach({} as any);
|
||||
const btn = actions.node.querySelector('button') as HTMLButtonElement;
|
||||
btn.click();
|
||||
|
||||
// Simulate a successful response.
|
||||
(actions as any)._handleResponse({
|
||||
ok: true,
|
||||
markdown: '# AI says hi\n\n```python\nprint("hi")\n```',
|
||||
sessionId: 'ses-abc',
|
||||
notebookPath: 'foo.ipynb'
|
||||
});
|
||||
|
||||
// The cell source must remain unchanged.
|
||||
expect((cell as any).model.sharedModel.setSource).not.toHaveBeenCalled();
|
||||
// The inline output area is now visible with the rendered markdown.
|
||||
const output = cell.node.querySelector(
|
||||
'.opencode-inline-prompt .opencode-inline-output'
|
||||
) as HTMLElement;
|
||||
expect(output.style.display).toBe('block');
|
||||
});
|
||||
});
|
||||
|
||||
describe('OpenCodeInlinePrompt', () => {
|
||||
@@ -336,6 +368,34 @@ describe('OpenCodeInlinePrompt', () => {
|
||||
providers: null
|
||||
});
|
||||
expect(prompt.node.querySelector('textarea')).not.toBeNull();
|
||||
expect(prompt.node.querySelectorAll('button').length).toBe(2);
|
||||
// 3 buttons: 发送, 取消, and the output area close (✕).
|
||||
expect(prompt.node.querySelectorAll('button').length).toBe(3);
|
||||
});
|
||||
|
||||
it('hides the output area by default; setOutput reveals it with rendered markdown', () => {
|
||||
const cell = makeFakeCell('x = 1');
|
||||
const prompt = new OpenCodeInlinePrompt(cell, {
|
||||
onSubmit: jest.fn(),
|
||||
onCancel: jest.fn(),
|
||||
disabled: false,
|
||||
providers: null
|
||||
});
|
||||
const output = prompt.node.querySelector(
|
||||
'.opencode-inline-prompt .opencode-inline-output'
|
||||
) as HTMLElement;
|
||||
expect(output).not.toBeNull();
|
||||
expect(output.style.display).toBe('none');
|
||||
|
||||
prompt.setOutput('# Hello\n\n```python\nx = 1\n```');
|
||||
expect(output.style.display).toBe('block');
|
||||
const content = prompt.node.querySelector(
|
||||
'.opencode-inline-prompt .opencode-inline-output-content'
|
||||
) as HTMLElement;
|
||||
// marked is mocked to wrap the input in <mock>...</mock>.
|
||||
expect(content.innerHTML).toContain('<mock>');
|
||||
expect(content.innerHTML).toContain('# Hello');
|
||||
|
||||
prompt.hideOutput();
|
||||
expect(output.style.display).toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user