tao.chen/notebook-ai-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity
Files
cb3576c83a687a1ecca77b28fd0003d1c19c0576
notebook-ai-extension/style/base.css
T
tao.chenandClaude Fable 5 cb3576c83a 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>
2026-07-23 19:13:28 +08:00

191 lines
4.7 KiB
CSS
Raw Blame History

/*
See the JupyterLab Developer Guide for useful CSS Patterns:
https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/
/* Single AI action button inside the native Cell toolbar (active cell, top-right). */
.opencode-cell-actions {
display: flex;
align-items: center;
}
.opencode-cell-actions .opencode-btn {
border: none;
background: transparent;
padding: 0 6px;
font-size: var(--jp-ui-font-size1);
line-height: 20px;
cursor: pointer;
white-space: nowrap;
}
.opencode-cell-actions .opencode-btn:hover:enabled {
background: var(--jp-layout-color2);
border-radius: 2px;
}
.opencode-cell-actions .opencode-btn:disabled {
opacity: 0.4;
cursor: default;
}
/* Inline prompt panel attached to the cell when the AI button is clicked. */
.opencode-inline-prompt {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px;
margin: 4px 8px;
border: 1px solid var(--jp-border-color2, #ddd);
border-radius: 4px;
background: var(--jp-layout-color1, #fff);
}
.opencode-inline-prompt .opencode-prompt-providers {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.opencode-inline-prompt .opencode-prompt-providers label {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--jp-ui-font-size1);
color: var(--jp-ui-font-color1, #333);
}
.opencode-inline-prompt .opencode-provider-select,
.opencode-inline-prompt .opencode-model-select {
flex: 1;
min-width: 120px;
padding: 2px 4px;
font-size: var(--jp-ui-font-size1);
font-family: inherit;
border: 1px solid var(--jp-border-color2, #ccc);
border-radius: 3px;
background: var(--jp-layout-color1, #fff);
}
.opencode-inline-prompt .opencode-provider-select:disabled,
.opencode-inline-prompt .opencode-model-select:disabled {
opacity: 0.5;
cursor: default;
}
/* Scrollable history of the current session's messages. The owning
cell action populates it via setMessages(). max-height keeps the
inline prompt compact; the user scrolls to see older messages. */
.opencode-inline-prompt .opencode-inline-history {
max-height: 320px;
overflow-y: auto;
margin: 4px 0;
padding: 4px 6px;
border: 1px solid var(--jp-border-color1, #c0c0c0);
border-radius: 3px;
background: var(--jp-layout-color2, #f7f7f7);
font-size: var(--jp-ui-font-size1);
line-height: 1.45;
}
.opencode-inline-prompt .opencode-msg {
margin-bottom: 6px;
}
.opencode-inline-prompt .opencode-msg:last-child {
margin-bottom: 0;
}
.opencode-inline-prompt .opencode-msg-user {
white-space: pre-wrap;
padding: 4px 6px;
border-radius: 3px;
background: var(--jp-layout-color3, #eaeaea);
color: var(--jp-ui-font-color1, #333);
}
.opencode-inline-prompt .opencode-msg-assistant {
padding: 4px 6px;
color: var(--jp-ui-font-color0, #000);
}
.opencode-inline-prompt .opencode-msg-toolbar {
display: flex;
gap: 4px;
margin-bottom: 4px;
}
.opencode-inline-prompt .opencode-msg-btn {
border: 1px solid var(--jp-border-color2, #ccc);
background: var(--jp-layout-color1, #fff);
padding: 1px 6px;
border-radius: 3px;
cursor: pointer;
font-size: var(--jp-ui-font-size0, 11px);
line-height: 1.4;
color: var(--jp-ui-font-color1, #333);
}
.opencode-inline-prompt .opencode-msg-btn:hover {
background: var(--jp-layout-color2, #f7f7f7);
border-color: var(--jp-border-color1, #999);
}
.opencode-inline-prompt .opencode-inline-history pre {
background: var(--jp-layout-color1, #fff);
padding: 6px 8px;
border-radius: 3px;
overflow-x: auto;
margin: 4px 0;
}
.opencode-inline-prompt .opencode-inline-history code {
font-family: var(--jp-code-font-family, monospace);
font-size: var(--jp-code-font-size, 13px);
}
.opencode-inline-prompt .opencode-inline-history p {
margin: 2px 0;
}
.opencode-inline-prompt .opencode-inline-history h1,
.opencode-inline-prompt .opencode-inline-history h2,
.opencode-inline-prompt .opencode-inline-history h3 {
margin: 6px 0 4px;
font-size: var(--jp-ui-font-size2, 14px);
}
.opencode-inline-prompt textarea {
width: 100%;
resize: vertical;
font-family: var(--jp-code-font-family, monospace);
font-size: var(--jp-code-font-size, 13px);
box-sizing: border-box;
}
.opencode-inline-prompt .opencode-inline-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
}
.opencode-inline-prompt .opencode-inline-actions button {
border: 1px solid var(--jp-border-color2, #ccc);
background: var(--jp-layout-color2, #f7f7f7);
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
font-size: var(--jp-ui-font-size1);
}
.opencode-inline-prompt .opencode-inline-actions button:hover:enabled {
background: var(--jp-layout-color3, #eaeaea);
}
.opencode-inline-prompt .opencode-inline-actions button:disabled {
opacity: 0.4;
cursor: default;
}
Reference in New Issue View Git Blame Copy Permalink