Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add code toolbar to Jupyter AI chat #789

Merged
merged 5 commits into from
May 20, 2024
Merged

Conversation

dlqqq
Copy link
Member

@dlqqq dlqqq commented May 20, 2024

Description

Adds a code toolbar to Jupyter AI chat that allows users to easily take code generated by Jupyter AI and insert it into their currently active notebook. It supports 4 actions:

  1. Insert above active cell
  2. Insert below active cell
  3. Replace active cell
  4. Copy to clipboard

Demo

Screen.Recording.2024-05-20.at.8.44.33.AM.mov

Implementation details

  • Adds a new ActiveCellContext React context that allows any React component to get access to a set of actions to perform on the user's currently active cell. These actions are provided by methods on a new ActiveCellManager singleton class.
  • Adds a new TooltippedIconButton component that provides an opinionated default for an MUI icon button with a tooltip.

Future work

When inserting/replacing content into the notebook, the console sometimes emits the error:

Error: Calls to EditorView.update are not allowed while an update is in progress

However, there seems to be no impact on the behavior/stability of the JupyterLab application after this error is logged. We are using what appears to be the official API for setting the content of a cell in JupyterLab 4, meaning that this error is likely unavoidable for the time being. More specifically, this PR replaces the content of the active cell via the method:

activeCell.editor?.model.sharedModel.setSource(content);

@dlqqq dlqqq added the enhancement New feature or request label May 20, 2024
@JasonWeill
Copy link
Collaborator

I see the toolbar even if the AI model gives me an error. Seems like it would be better to suppress the toolbar in this case.

image

@JasonWeill
Copy link
Collaborator

I was surprised that the "Replace current cell" button took effect immediately, with no confirmation dialog, but the Undo command reverses any change that this makes.

Copy link
Collaborator

@JasonWeill JasonWeill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally looking good — I especially like how the buttons are accessible via the keyboard! Just a few questions and comments.

Copy link
Collaborator

@JasonWeill JasonWeill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened #791 and #792 as enhancements to follow up on this; good work!

@dlqqq dlqqq merged commit 94f3e1b into jupyterlab:main May 20, 2024
8 checks passed
@brichet brichet mentioned this pull request Jun 27, 2024
11 tasks
Marchlak pushed a commit to Marchlak/jupyter-ai that referenced this pull request Oct 28, 2024
* add ActiveCellContext component

* add code block toolbar in chat

* pre-commit

* prefer sentence case in copy button

* prefer single-char ellipsis
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants