-
-
Notifications
You must be signed in to change notification settings - Fork 340
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add code toolbar to Jupyter AI chat (#789)
* add ActiveCellContext component * add code block toolbar in chat * pre-commit * prefer sentence case in copy button * prefer single-char ellipsis
- Loading branch information
Showing
11 changed files
with
536 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
packages/jupyter-ai/src/components/code-blocks/code-toolbar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from 'react'; | ||
| import { Box } from '@mui/material'; | ||
| import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components'; | ||
|
|
||
| import { CopyButton } from './copy-button'; | ||
| import { replaceCellIcon } from '../../icons'; | ||
|
|
||
| import { | ||
| ActiveCellManager, | ||
| useActiveCellContext | ||
| } from '../../contexts/active-cell-context'; | ||
| import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button'; | ||
|
|
||
| export type CodeToolbarProps = { | ||
| /** | ||
| * The content of the Markdown code block this component is attached to. | ||
| */ | ||
| content: string; | ||
| }; | ||
|
|
||
| export function CodeToolbar(props: CodeToolbarProps): JSX.Element { | ||
| const [activeCellExists, activeCellManager] = useActiveCellContext(); | ||
| const sharedToolbarButtonProps = { | ||
| content: props.content, | ||
| activeCellManager, | ||
| activeCellExists | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'flex-end', | ||
| alignItems: 'center', | ||
| padding: '6px 2px', | ||
| marginBottom: '1em', | ||
| border: '1px solid var(--jp-cell-editor-border-color)', | ||
| borderTop: 'none' | ||
| }} | ||
| > | ||
| <InsertAboveButton {...sharedToolbarButtonProps} /> | ||
| <InsertBelowButton {...sharedToolbarButtonProps} /> | ||
| <ReplaceButton {...sharedToolbarButtonProps} /> | ||
| <CopyButton value={props.content} /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| type ToolbarButtonProps = { | ||
| content: string; | ||
| activeCellExists: boolean; | ||
| activeCellManager: ActiveCellManager; | ||
| }; | ||
|
|
||
| function InsertAboveButton(props: ToolbarButtonProps) { | ||
| const tooltip = props.activeCellExists | ||
| ? 'Insert above active cell' | ||
| : 'Insert above active cell (no active cell)'; | ||
|
|
||
| return ( | ||
| <TooltippedIconButton | ||
| tooltip={tooltip} | ||
| onClick={() => props.activeCellManager.insertAbove(props.content)} | ||
| disabled={!props.activeCellExists} | ||
| > | ||
| <addAboveIcon.react height="16px" width="16px" /> | ||
| </TooltippedIconButton> | ||
| ); | ||
| } | ||
|
|
||
| function InsertBelowButton(props: ToolbarButtonProps) { | ||
| const tooltip = props.activeCellExists | ||
| ? 'Insert below active cell' | ||
| : 'Insert below active cell (no active cell)'; | ||
|
|
||
| return ( | ||
| <TooltippedIconButton | ||
| tooltip={tooltip} | ||
| disabled={!props.activeCellExists} | ||
| onClick={() => props.activeCellManager.insertBelow(props.content)} | ||
| > | ||
| <addBelowIcon.react height="16px" width="16px" /> | ||
| </TooltippedIconButton> | ||
| ); | ||
| } | ||
|
|
||
| function ReplaceButton(props: ToolbarButtonProps) { | ||
| const tooltip = props.activeCellExists | ||
| ? 'Replace active cell' | ||
| : 'Replace active cell (no active cell)'; | ||
|
|
||
| return ( | ||
| <TooltippedIconButton | ||
| tooltip={tooltip} | ||
| disabled={!props.activeCellExists} | ||
| onClick={() => props.activeCellManager.replace(props.content)} | ||
| > | ||
| <replaceCellIcon.react height="16px" width="16px" /> | ||
| </TooltippedIconButton> | ||
| ); | ||
| } |
58 changes: 58 additions & 0 deletions
58
packages/jupyter-ai/src/components/code-blocks/copy-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React, { useState, useCallback, useRef } from 'react'; | ||
|
|
||
| import { copyIcon } from '@jupyterlab/ui-components'; | ||
|
|
||
| import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button'; | ||
|
|
||
| enum CopyStatus { | ||
| None, | ||
| Copying, | ||
| Copied | ||
| } | ||
|
|
||
| const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = { | ||
| [CopyStatus.None]: 'Copy to clipboard', | ||
| [CopyStatus.Copying]: 'Copying…', | ||
| [CopyStatus.Copied]: 'Copied!' | ||
| }; | ||
|
|
||
| type CopyButtonProps = { | ||
| value: string; | ||
| }; | ||
|
|
||
| export function CopyButton(props: CopyButtonProps): JSX.Element { | ||
| const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None); | ||
| const timeoutId = useRef<number | null>(null); | ||
|
|
||
| const copy = useCallback(async () => { | ||
| // ignore if we are already copying | ||
| if (copyStatus === CopyStatus.Copying) { | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| await navigator.clipboard.writeText(props.value); | ||
| } catch (err) { | ||
| console.error('Failed to copy text: ', err); | ||
| setCopyStatus(CopyStatus.None); | ||
| return; | ||
| } | ||
|
|
||
| setCopyStatus(CopyStatus.Copied); | ||
| if (timeoutId.current) { | ||
| clearTimeout(timeoutId.current); | ||
| } | ||
| timeoutId.current = setTimeout(() => setCopyStatus(CopyStatus.None), 1000); | ||
| }, [copyStatus, props.value]); | ||
|
|
||
| return ( | ||
| <TooltippedIconButton | ||
| tooltip={COPYBTN_TEXT_BY_STATUS[copyStatus]} | ||
| placement="top" | ||
| onClick={copy} | ||
| aria-label="Copy to clipboard" | ||
| > | ||
| <copyIcon.react height="16px" width="16px" /> | ||
| </TooltippedIconButton> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.