@jupyter/chat 0.2.0 → 0.3.0

package/lib/active-cell-manager.d.ts

@@ -0,0 +1,151 @@
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { IError as CellError } from '@jupyterlab/nbformat';
+import { ISignal } from '@lumino/signaling';
+type CellContent = {
+    type: string;
+    source: string;
+};
+type CellWithErrorContent = {
+    type: 'code';
+    source: string;
+    error: {
+        name: string;
+        value: string;
+        traceback: string[];
+    };
+};
+export interface IActiveCellManager {
+    /**
+     * Whether the notebook is available and an active cell exists.
+     */
+    readonly available: boolean;
+    /**
+     * The `CellError` output within the active cell, if any.
+     */
+    readonly activeCellError: CellError | null;
+    /**
+     * A signal emitting when the active cell changed.
+     */
+    readonly availabilityChanged: ISignal<this, boolean>;
+    /**
+     * A signal emitting when the error state of the active cell changed.
+     */
+    readonly activeCellErrorChanged: ISignal<this, CellError | null>;
+    /**
+     * Returns an `ActiveCellContent` object that describes the current active
+     * cell. If no active cell exists, this method returns `null`.
+     *
+     * When called with `withError = true`, this method returns `null` if the
+     * active cell does not have an error output. Otherwise it returns an
+     * `ActiveCellContentWithError` object that describes both the active cell and
+     * the error output.
+     */
+    getContent(withError: boolean): CellContent | CellWithErrorContent | null;
+    /**
+     * Inserts `content` in a new cell above the active cell.
+     */
+    insertAbove(content: string): void;
+    /**
+     * Inserts `content` in a new cell below the active cell.
+     */
+    insertBelow(content: string): void;
+    /**
+     * Replaces the contents of the active cell.
+     */
+    replace(content: string): Promise<void>;
+}
+/**
+ * The active cell manager namespace.
+ */
+export declare namespace ActiveCellManager {
+    /**
+     * The constructor options.
+     */
+    interface IOptions {
+        /**
+         * The notebook tracker.
+         */
+        tracker: INotebookTracker;
+        /**
+         * The current shell of the application.
+         */
+        shell: JupyterFrontEnd.IShell;
+    }
+}
+/**
+ * A manager that maintains a reference to the current active notebook cell in
+ * the main panel (if any), and provides methods for inserting or appending
+ * content to the active cell.
+ *
+ * The current active cell should be obtained by listening to the
+ * `activeCellChanged` signal.
+ */
+export declare class ActiveCellManager implements IActiveCellManager {
+    constructor(options: ActiveCellManager.IOptions);
+    /**
+     * Whether the notebook is available and an active cell exists.
+     */
+    get available(): boolean;
+    /**
+     * The `CellError` output within the active cell, if any.
+     */
+    get activeCellError(): CellError | null;
+    /**
+     * A signal emitting when the active cell changed.
+     */
+    get availabilityChanged(): ISignal<this, boolean>;
+    /**
+     * A signal emitting when the error state of the active cell changed.
+     */
+    get activeCellErrorChanged(): ISignal<this, CellError | null>;
+    /**
+     * Returns an `ActiveCellContent` object that describes the current active
+     * cell. If no active cell exists, this method returns `null`.
+     *
+     * When called with `withError = true`, this method returns `null` if the
+     * active cell does not have an error output. Otherwise it returns an
+     * `ActiveCellContentWithError` object that describes both the active cell and
+     * the error output.
+     */
+    getContent(withError: false): CellContent | null;
+    getContent(withError: true): CellWithErrorContent | null;
+    /**
+     * Inserts `content` in a new cell above the active cell.
+     */
+    insertAbove(content: string): void;
+    /**
+     * Inserts `content` in a new cell below the active cell.
+     */
+    insertBelow(content: string): void;
+    /**
+     * Replaces the contents of the active cell.
+     */
+    replace(content: string): Promise<void>;
+    private _onMainAreaChanged;
+    /**
+     * Handle the change of active notebook cell.
+     */
+    private _onActiveCellChanged;
+    /**
+     * Handle the change of the active cell state.
+     */
+    private _cellStateChange;
+    /**
+     * The notebook tracker.
+     */
+    private _notebookTracker;
+    /**
+     * Whether the current notebook panel is visible or not.
+     */
+    private _notebookVisible;
+    /**
+     * The active cell.
+     */
+    private _activeCell;
+    private _available;
+    private _activeCellError;
+    private _availabilityChanged;
+    private _activeCellErrorChanged;
+}
+export {};

package/lib/active-cell-manager.js

@@ -0,0 +1,201 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { LabShell } from '@jupyterlab/application';
+import { NotebookActions } from '@jupyterlab/notebook';
+import { Signal } from '@lumino/signaling';
+/**
+ * A manager that maintains a reference to the current active notebook cell in
+ * the main panel (if any), and provides methods for inserting or appending
+ * content to the active cell.
+ *
+ * The current active cell should be obtained by listening to the
+ * `activeCellChanged` signal.
+ */
+export class ActiveCellManager {
+    constructor(options) {
+        var _a, _b;
+        this._onMainAreaChanged = () => {
+            var _a, _b;
+            const value = (_b = (_a = this._notebookTracker.currentWidget) === null || _a === void 0 ? void 0 : _a.isVisible) !== null && _b !== void 0 ? _b : false;
+            if (value !== this._notebookVisible) {
+                this._notebookVisible = value;
+                this._available = !!this._activeCell && this._notebookVisible;
+                this._availabilityChanged.emit(this._available);
+            }
+        };
+        /**
+         * Handle the change of active notebook cell.
+         */
+        this._onActiveCellChanged = (_, activeCell) => {
+            var _a;
+            if (this._activeCell !== activeCell) {
+                (_a = this._activeCell) === null || _a === void 0 ? void 0 : _a.model.stateChanged.disconnect(this._cellStateChange);
+                this._activeCell = activeCell;
+                activeCell === null || activeCell === void 0 ? void 0 : activeCell.ready.then(() => {
+                    var _a, _b;
+                    (_a = this._activeCell) === null || _a === void 0 ? void 0 : _a.model.stateChanged.connect(this._cellStateChange);
+                    this._available = !!this._activeCell && this._notebookVisible;
+                    this._availabilityChanged.emit(this._available);
+                    (_b = this._activeCell) === null || _b === void 0 ? void 0 : _b.disposed.connect(() => {
+                        this._activeCell = null;
+                    });
+                });
+            }
+        };
+        /**
+         * Handle the change of the active cell state.
+         */
+        this._cellStateChange = (_, change) => {
+            var _a;
+            if (change.name === 'executionCount') {
+                const currSharedModel = (_a = this._activeCell) === null || _a === void 0 ? void 0 : _a.model.sharedModel;
+                const prevActiveCellError = this._activeCellError;
+                let currActiveCellError = null;
+                if (currSharedModel && 'outputs' in currSharedModel) {
+                    currActiveCellError =
+                        currSharedModel.outputs.find((output) => output.output_type === 'error') || null;
+                }
+                // for some reason, the `CellError` object is not referentially stable,
+                // meaning that this condition always evaluates to `true` and the
+                // `activeCellErrorChanged` signal is emitted every 200ms, even when the
+                // error output is unchanged. this is why we have to rely on
+                // `execution_count` to track changes to the error output.
+                if (prevActiveCellError !== currActiveCellError) {
+                    this._activeCellError = currActiveCellError;
+                    this._activeCellErrorChanged.emit(this._activeCellError);
+                }
+            }
+        };
+        /**
+         * Whether the current notebook panel is visible or not.
+         */
+        this._notebookVisible = false;
+        /**
+         * The active cell.
+         */
+        this._activeCell = null;
+        this._available = false;
+        this._activeCellError = null;
+        this._availabilityChanged = new Signal(this);
+        this._activeCellErrorChanged = new Signal(this);
+        this._notebookTracker = options.tracker;
+        this._notebookTracker.activeCellChanged.connect(this._onActiveCellChanged);
+        (_a = options.shell.currentChanged) === null || _a === void 0 ? void 0 : _a.connect(this._onMainAreaChanged);
+        if (options.shell instanceof LabShell) {
+            (_b = options.shell.layoutModified) === null || _b === void 0 ? void 0 : _b.connect(this._onMainAreaChanged);
+        }
+        this._onMainAreaChanged();
+    }
+    /**
+     * Whether the notebook is available and an active cell exists.
+     */
+    get available() {
+        return this._available;
+    }
+    /**
+     * The `CellError` output within the active cell, if any.
+     */
+    get activeCellError() {
+        return this._activeCellError;
+    }
+    /**
+     * A signal emitting when the active cell changed.
+     */
+    get availabilityChanged() {
+        return this._availabilityChanged;
+    }
+    /**
+     * A signal emitting when the error state of the active cell changed.
+     */
+    get activeCellErrorChanged() {
+        return this._activeCellErrorChanged;
+    }
+    getContent(withError = false) {
+        var _a;
+        const sharedModel = (_a = this._notebookTracker.activeCell) === null || _a === void 0 ? void 0 : _a.model.sharedModel;
+        if (!sharedModel) {
+            return null;
+        }
+        // case where withError = false
+        if (!withError) {
+            return {
+                type: sharedModel.cell_type,
+                source: sharedModel.getSource()
+            };
+        }
+        // case where withError = true
+        const error = this._activeCellError;
+        if (error) {
+            return {
+                type: 'code',
+                source: sharedModel.getSource(),
+                error: {
+                    name: error.ename,
+                    value: error.evalue,
+                    traceback: error.traceback
+                }
+            };
+        }
+        return null;
+    }
+    /**
+     * Inserts `content` in a new cell above the active cell.
+     */
+    insertAbove(content) {
+        const notebookPanel = this._notebookTracker.currentWidget;
+        if (!notebookPanel || !notebookPanel.isVisible) {
+            return;
+        }
+        // create a new cell above the active cell and mark new cell as active
+        NotebookActions.insertAbove(notebookPanel.content);
+        // replace content of this new active cell
+        this.replace(content);
+    }
+    /**
+     * Inserts `content` in a new cell below the active cell.
+     */
+    insertBelow(content) {
+        const notebookPanel = this._notebookTracker.currentWidget;
+        if (!notebookPanel || !notebookPanel.isVisible) {
+            return;
+        }
+        // create a new cell below the active cell and mark new cell as active
+        NotebookActions.insertBelow(notebookPanel.content);
+        // replace content of this new active cell
+        this.replace(content);
+    }
+    /**
+     * Replaces the contents of the active cell.
+     */
+    async replace(content) {
+        var _a;
+        const notebookPanel = this._notebookTracker.currentWidget;
+        if (!notebookPanel || !notebookPanel.isVisible) {
+            return;
+        }
+        // get reference to active cell directly from Notebook API. this avoids the
+        // possibility of acting on an out-of-date reference.
+        const activeCell = this._notebookTracker.activeCell;
+        if (!activeCell) {
+            return;
+        }
+        // wait for editor to be ready
+        await activeCell.ready;
+        // replace the content of the active cell
+        /**
+         * NOTE: calling this method sometimes emits an error to the browser console:
+         *
+         * ```
+         * 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. Furthermore, this is
+         * the official API for setting the content of a cell in JupyterLab 4,
+         * meaning that this is likely unavoidable.
+         */
+        (_a = activeCell.editor) === null || _a === void 0 ? void 0 : _a.model.sharedModel.setSource(content);
+    }
+}

package/lib/components/chat-input.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
+import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
 /**
@@ -10,6 +11,10 @@ export declare namespace ChatInput {
      * The properties of the react element.
      */
     interface IProps {
+        /**
+         * The chat model.
+         */
+        model: IChatModel;
         /**
          * The initial value of the input (default to '')
          */
@@ -22,10 +27,6 @@ export declare namespace ChatInput {
          * The function to be called to cancel editing.
          */
         onCancel?: () => unknown;
-        /**
-         * Whether using shift+enter to send the message.
-         */
-        sendWithShiftEnter: boolean;
         /**
          * Custom mui/material styles.
          */

package/lib/components/chat-input.js

@@ -10,10 +10,17 @@ const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 export function ChatInput(props) {
-    var _a;
-    const { autocompletionName, autocompletionRegistry, sendWithShiftEnter } = props;
+    var _a, _b;
+    const { autocompletionName, autocompletionRegistry, model } = props;
     const autocompletion = useRef();
     const [input, setInput] = useState(props.value || '');
+    const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+    useEffect(() => {
+        model.configChanged.connect((_, config) => {
+            var _a;
+            setSendWithShiftEnter((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+        });
+    }, [model]);
     // The autocomplete commands options.
     const [commandOptions, setCommandOptions] = useState([]);
     // whether any option is highlighted in the slash command autocomplete
@@ -95,7 +102,7 @@ export function ChatInput(props) {
         props.onCancel();
     }
     // Set the helper text based on whether Shift+Enter is used for sending.
-    const helperText = props.sendWithShiftEnter ? (React.createElement("span", null,
+    const helperText = sendWithShiftEnter ? (React.createElement("span", null,
         "Press ",
         React.createElement("b", null, "Shift"),
         "+",
@@ -135,7 +142,7 @@ export function ChatInput(props) {
                             React.createElement(Send, null))))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
-                }, helperText: input.length > 2 ? helperText : ' ' })), ...(_a = autocompletion.current) === null || _a === void 0 ? void 0 : _a.props, inputValue: input, onInputChange: (_, newValue) => {
+                }, helperText: input.length > 2 ? helperText : ' ' })), ...(_b = autocompletion.current) === null || _b === void 0 ? void 0 : _b.props, inputValue: input, onInputChange: (_, newValue) => {
                 setInput(newValue);
             }, onHighlightChange: 
             /**

package/lib/components/chat-messages.js

@@ -48,7 +48,7 @@ export function ChatMessages(props) {
      * Effect: listen to chat messages.
      */
     useEffect(() => {
-        function handleChatEvents(_) {
+        function handleChatEvents() {
             setMessages([...model.messages]);
         }
         model.messagesUpdated.connect(handleChatEvents);
@@ -198,7 +198,6 @@ export function ChatMessageHeader(props) {
  * The message component body.
  */
 export function ChatMessage(props) {
-    var _a;
     const { message, model, rmRegistry } = props;
     const elementRef = useRef(null);
     const [edit, setEdit] = useState(false);
@@ -258,7 +257,7 @@ export function ChatMessage(props) {
         model.deleteMessage(id);
     };
     // Empty if the message has been deleted.
-    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
 }
 /**
  * The navigation component, to navigate to unread messages.

package/lib/components/chat.js

@@ -11,7 +11,6 @@ import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
 export function ChatBody(props) {
-    var _a;
     const { model, rmRegistry: renderMimeRegistry, autocompletionRegistry } = props;
     // no need to append to messageGroups imperatively here. all of that is
     // handled by the listeners registered in the effect hooks above.
@@ -27,7 +26,7 @@ export function ChatBody(props) {
                 paddingTop: 3.5,
                 paddingBottom: 0,
                 borderTop: '1px solid var(--jp-border-color1)'
-            }, sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false, autocompletionRegistry: autocompletionRegistry })));
+            }, model: model, autocompletionRegistry: autocompletionRegistry })));
 }
 export function Chat(props) {
     var _a;

package/lib/components/code-blocks/code-toolbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IChatModel } from '../../model';
+export type CodeToolbarProps = {
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
+    /**
+     * The content of the Markdown code block this component is attached to.
+     */
+    content: string;
+};
+export declare function CodeToolbar(props: CodeToolbarProps): JSX.Element;

package/lib/components/code-blocks/code-toolbar.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
+import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { CopyButton } from './copy-button';
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+import { replaceCellIcon } from '../../icons';
+const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
+const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
+export function CodeToolbar(props) {
+    var _a, _b;
+    const { content, model } = props;
+    const [toolbarEnable, setToolbarEnable] = useState((_a = model.config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
+    const activeCellManager = model.activeCellManager;
+    const [toolbarBtnProps, setToolbarBtnProps] = useState({
+        content: content,
+        activeCellManager: activeCellManager,
+        activeCellAvailable: (_b = activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) !== null && _b !== void 0 ? _b : false
+    });
+    useEffect(() => {
+        activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.connect(() => {
+            setToolbarBtnProps({
+                content,
+                activeCellManager: activeCellManager,
+                activeCellAvailable: activeCellManager.available
+            });
+        });
+        model.configChanged.connect((_, config) => {
+            var _a;
+            setToolbarEnable((_a = config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
+        });
+    }, [model]);
+    return activeCellManager === null || !toolbarEnable ? (React.createElement(React.Fragment, null)) : (React.createElement(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'
+        }, className: CODE_TOOLBAR_CLASS },
+        React.createElement(InsertAboveButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(InsertBelowButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(ReplaceButton, { ...toolbarBtnProps, className: CODE_TOOLBAR_ITEM_CLASS }),
+        React.createElement(CopyButton, { value: content, className: CODE_TOOLBAR_ITEM_CLASS })));
+}
+function InsertAboveButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Insert above active cell'
+        : 'Insert above active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertAbove(props.content); }, disabled: !props.activeCellAvailable },
+        React.createElement(addAboveIcon.react, { height: "16px", width: "16px" })));
+}
+function InsertBelowButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Insert below active cell'
+        : 'Insert below active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertBelow(props.content); } },
+        React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })));
+}
+function ReplaceButton(props) {
+    const tooltip = props.activeCellAvailable
+        ? 'Replace active cell'
+        : 'Replace active cell (no active cell)';
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.replace(props.content); } },
+        React.createElement(replaceCellIcon.react, { height: "16px", width: "16px" })));
+}

package/lib/components/{copy-button.d.ts → code-blocks/copy-button.d.ts}

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 type CopyButtonProps = {
     value: string;
+    className?: string;
 };
 export declare function CopyButton(props: CopyButtonProps): JSX.Element;
 export {};

package/lib/components/code-blocks/copy-button.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState, useCallback, useRef } from 'react';
+import { copyIcon } from '@jupyterlab/ui-components';
+import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+var CopyStatus;
+(function (CopyStatus) {
+    CopyStatus[CopyStatus["None"] = 0] = "None";
+    CopyStatus[CopyStatus["Copying"] = 1] = "Copying";
+    CopyStatus[CopyStatus["Copied"] = 2] = "Copied";
+})(CopyStatus || (CopyStatus = {}));
+const COPYBTN_TEXT_BY_STATUS = {
+    [CopyStatus.None]: 'Copy to clipboard',
+    [CopyStatus.Copying]: 'Copying…',
+    [CopyStatus.Copied]: 'Copied!'
+};
+export function CopyButton(props) {
+    const [copyStatus, setCopyStatus] = useState(CopyStatus.None);
+    const timeoutId = useRef(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 = window.setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
+    }, [copyStatus, props.value]);
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: COPYBTN_TEXT_BY_STATUS[copyStatus], placement: "top", onClick: copy, "aria-label": "Copy to clipboard" },
+        React.createElement(copyIcon.react, { height: "16px", width: "16px" })));
+}

package/lib/components/mui-extras/contrasting-tooltip.d.ts

@@ -0,0 +1,6 @@
+import { TooltipProps } from '@mui/material';
+/**
+ * A restyled MUI tooltip component that is dark by default to improve contrast
+ * against JupyterLab's default light theme. TODO: support dark themes.
+ */
+export declare const ContrastingTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/components/mui-extras/contrasting-tooltip.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { styled, Tooltip, tooltipClasses } from '@mui/material';
+/**
+ * A restyled MUI tooltip component that is dark by default to improve contrast
+ * against JupyterLab's default light theme. TODO: support dark themes.
+ */
+export const ContrastingTooltip = styled(({ className, ...props }) => (React.createElement(Tooltip, { ...props, arrow: true, classes: { popper: className } })))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white,
+        boxShadow: theme.shadows[1],
+        fontSize: 11
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        color: theme.palette.common.black
+    }
+}));

package/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { IconButtonProps, TooltipProps } from '@mui/material';
+export type TooltippedIconButtonProps = {
+    onClick: () => unknown;
+    tooltip: string;
+    children: JSX.Element;
+    className?: string;
+    disabled?: boolean;
+    placement?: TooltipProps['placement'];
+    /**
+     * The offset of the tooltip popup.
+     *
+     * The expected syntax is defined by the Popper library:
+     * https://popper.js.org/docs/v2/modifiers/offset/
+     */
+    offset?: [number, number];
+    'aria-label'?: string;
+    /**
+     * Props passed directly to the MUI `IconButton` component.
+     */
+    iconButtonProps?: IconButtonProps;
+};
+/**
+ * A component that renders an MUI `IconButton` with a high-contrast tooltip
+ * provided by `ContrastingTooltip`. This component differs from the MUI
+ * defaults in the following ways:
+ *
+ * - Shows the tooltip on hover even if disabled.
+ * - Renders the tooltip above the button by default.
+ * - Renders the tooltip closer to the button by default.
+ * - Lowers the opacity of the IconButton when disabled.
+ * - Renders the IconButton with `line-height: 0` to avoid showing extra
+ * vertical space in SVG icons.
+ */
+export declare function TooltippedIconButton(props: TooltippedIconButtonProps): JSX.Element;