tao.chen/notebook-ai-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: AI entry button at the cell's bottom-right + clear input after success

Browse Source 
AI entry button position:
  - The AI button (entry point to the inline prompt) now renders as a
    floating pill at the bottom-right corner of the cell, not inside
    the native cell toolbar.
  - The widget is still created per cell via the Cell toolbar factory
    (it's the per-cell lifecycle hook), but its own node is
    display:none inside the toolbar (no visible artifact). On
    construction, OpenCodeCellActions creates a real <button> with
    class .opencode-cell-ai-btn and appends it to cell.node. The
    cell.node gets position:relative so the absolute-positioned
    button anchors to the cell.
  - style/base.css: removed the .opencode-cell-actions / .opencode-btn
    rules (the widget's own node is no longer the visible button) and
    added .opencode-cell-ai-btn (absolute, bottom:4px, right:4px,
    z-index:10, small pill, hover/disabled states).

Clear input after success:
  - OpenCodeInlinePrompt gains a public clearInput() method that empties
    the textarea.
  - OpenCodeCellActions._handleResponse on a successful response now
    calls prompt.clearInput() after the history refresh, so the user
    can immediately type a follow-up message.

Tests:
  - All tests that previously queried the AI button on actions.node now
    query cell.node.querySelector('button.opencode-cell-ai-btn') (the
    button lives on the cell, not on the widget's own node). The two
    tests that constructed the widget only for its side effect now use
    the expression statement form to avoid the unused-const lint.
  - The orphan-cell test now sets (cell as any).node since the
    constructor accesses cell.node to position/append.
  - New test: 'clears the input textarea after a successful response'
    (types into the textarea, fires _handleResponse success, asserts
    textarea.value === '').

Verification: pytest 37/37, jest 35/35, jlpm build OK.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
tao.chen
2026-07-23 19:32:45 +08:00
co-authored by Claude Fable 5
parent b5642ec5cd
commit fd30e53e25
4 changed files with 110 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/base.css
+20 -18
View File
@@ -4,29 +4,31 @@
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;
/* AI entry button: rendered as a floating pill at the bottom-right
corner of the cell. The widget that owns it (opencode-cell-actions)
is registered in the native cell toolbar but its own node is
display:none — only this floating button is visible. */
.opencode-cell-ai-btn {
position: absolute;
bottom: 4px;
right: 4px;
z-index: 10;
border: 1px solid var(--jp-border-color1, #999);
background: var(--jp-layout-color1, #fff);
color: var(--jp-ui-font-color1, #333);
padding: 1px 8px;
border-radius: 10px;
font-size: var(--jp-ui-font-size0, 11px);
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
}
.opencode-cell-actions .opencode-btn:hover:enabled {
background: var(--jp-layout-color2);
border-radius: 2px;
.opencode-cell-ai-btn:hover {
background: var(--jp-layout-color2, #f0f0f0);
}
.opencode-cell-actions .opencode-btn:disabled {
opacity: 0.4;
.opencode-cell-ai-btn:disabled {
opacity: 0.5;
cursor: default;
}