@jupyter/chat 0.2.0 → 0.3.0

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { ContrastingTooltip } from './contrasting-tooltip';
+/**
+ * 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 function TooltippedIconButton(props) {
+    var _a;
+    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
+            popper: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, -8]
+                        }
+                    }
+                ]
+            }
+        } },
+        React.createElement("span", { className: props.className },
+            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: { lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }, "aria-label": props['aria-label'] }, props.children))));
+}

package/lib/components/rendermime-markdown.d.ts

@@ -1,9 +1,11 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import React from 'react';
+import { IChatModel } from '../model';
 type RendermimeMarkdownProps = {
     markdownStr: string;
     rmRegistry: IRenderMimeRegistry;
     appendContent?: boolean;
+    model: IChatModel;
     edit?: () => void;
     delete?: () => void;
 };

package/lib/components/rendermime-markdown.js

@@ -2,9 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { CopyButton } from './copy-button';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CodeToolbar } from './code-blocks/code-toolbar';
 import { MessageToolbar } from './toolbar';
 const MD_MIME_TYPE = 'text/markdown';
 const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
@@ -21,7 +21,8 @@ function escapeLatexDelimiters(text) {
 function RendermimeMarkdownBase(props) {
     const appendContent = props.appendContent || false;
     const [renderedContent, setRenderedContent] = useState(null);
-    const containerRef = useRef(null);
+    // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
+    const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
         const renderContent = async () => {
             var _a;
@@ -32,23 +33,36 @@ function RendermimeMarkdownBase(props) {
             const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
             await renderer.renderModel(model);
             (_a = props.rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
-            // Attach CopyButton to each <pre> block
-            if (containerRef.current && renderer.node) {
-                const preBlocks = renderer.node.querySelectorAll('pre');
-                preBlocks.forEach(preBlock => {
-                    var _a;
-                    const copyButtonContainer = document.createElement('div');
-                    (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(copyButtonContainer, preBlock.nextSibling);
-                    ReactDOM.render(React.createElement(CopyButton, { value: preBlock.textContent || '' }), copyButtonContainer);
-                });
+            if (!renderer.node) {
+                throw new Error('Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.');
             }
+            const newCodeToolbarDefns = [];
+            // Attach CodeToolbar root element to each <pre> block
+            const preBlocks = renderer.node.querySelectorAll('pre');
+            preBlocks.forEach(preBlock => {
+                var _a;
+                const codeToolbarRoot = document.createElement('div');
+                (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(codeToolbarRoot, preBlock.nextSibling);
+                newCodeToolbarDefns.push([
+                    codeToolbarRoot,
+                    { model: props.model, content: preBlock.textContent || '' }
+                ]);
+            });
+            setCodeToolbarDefns(newCodeToolbarDefns);
             setRenderedContent(renderer.node);
         };
         renderContent();
     }, [props.markdownStr, props.rmRegistry]);
-    return (React.createElement("div", { ref: containerRef, className: RENDERMIME_MD_CLASS },
+    return (React.createElement("div", { className: RENDERMIME_MD_CLASS },
         renderedContent &&
             (appendContent ? (React.createElement("div", { ref: node => node && node.appendChild(renderedContent) })) : (React.createElement("div", { ref: node => node && node.replaceChildren(renderedContent) }))),
-        React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete })));
+        React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete }),
+        // Render a `CodeToolbar` element underneath each code block.
+        // We use ReactDOM.createPortal() so each `CodeToolbar` element is able
+        // to use the context in the main React tree.
+        codeToolbarDefns.map(codeToolbarDefn => {
+            const [codeToolbarRoot, codeToolbarProps] = codeToolbarDefn;
+            return createPortal(React.createElement(CodeToolbar, { ...codeToolbarProps }), codeToolbarRoot);
+        })));
 }
 export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);

package/lib/icons.d.ts

@@ -1,3 +1,4 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 export declare const chatIcon: LabIcon;
 export declare const readIcon: LabIcon;
+export declare const replaceCellIcon: LabIcon;

package/lib/icons.js

@@ -6,6 +6,7 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import chatSvgStr from '../style/icons/chat.svg';
 import readSvgStr from '../style/icons/read.svg';
+import replaceCellSvg from '../style/icons/replace-cell.svg';
 export const chatIcon = new LabIcon({
     name: 'jupyter-chat::chat',
     svgstr: chatSvgStr
@@ -14,3 +15,7 @@ export const readIcon = new LabIcon({
     name: 'jupyter-chat::read',
     svgstr: readSvgStr
 });
+export const replaceCellIcon = new LabIcon({
+    name: 'jupyter-ai::replace-cell',
+    svgstr: replaceCellSvg
+});

package/lib/index.d.ts

@@ -2,6 +2,7 @@ export * from './icons';
 export * from './model';
 export * from './registry';
 export * from './types';
+export * from './active-cell-manager';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';

package/lib/index.js

@@ -6,6 +6,7 @@ export * from './icons';
 export * from './model';
 export * from './registry';
 export * from './types';
+export * from './active-cell-manager';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';

package/lib/model.d.ts

@@ -2,6 +2,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
 import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
+import { IActiveCellManager } from './active-cell-manager';
 /**
  * The chat model interface.
  */
@@ -30,10 +31,18 @@ export interface IChatModel extends IDisposable {
      * The chat messages list.
      */
     readonly messages: IChatMessage[];
+    /**
+     * Get the active cell manager.
+     */
+    readonly activeCellManager: IActiveCellManager | null;
     /**
      * A signal emitting when the messages list is updated.
      */
     readonly messagesUpdated: ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    get configChanged(): ISignal<IChatModel, IConfig>;
     /**
      * A signal emitting when unread messages change.
      */
@@ -110,6 +119,7 @@ export declare class ChatModel implements IChatModel {
      * The chat messages list.
      */
     get messages(): IChatMessage[];
+    get activeCellManager(): IActiveCellManager | null;
     /**
      * The chat model id.
      */
@@ -144,6 +154,10 @@ export declare class ChatModel implements IChatModel {
      * A signal emitting when the messages list is updated.
      */
     get messagesUpdated(): ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    get configChanged(): ISignal<IChatModel, IConfig>;
     /**
      * A signal emitting when unread messages change.
      */
@@ -216,8 +230,10 @@ export declare class ChatModel implements IChatModel {
     private _config;
     private _isDisposed;
     private _commands?;
+    private _activeCellManager;
     private _notificationId;
     private _messagesUpdated;
+    private _configChanged;
     private _unreadChanged;
     private _viewportChanged;
 }
@@ -237,5 +253,9 @@ export declare namespace ChatModel {
          * Commands registry.
          */
         commands?: CommandRegistry;
+        /**
+         * Active cell manager
+         */
+        activeCellManager?: IActiveCellManager | null;
     }
 }

package/lib/model.js

@@ -13,7 +13,7 @@ export class ChatModel {
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a;
+        var _a, _b;
         this._messages = [];
         this._unreadMessages = [];
         this._messagesInViewport = [];
@@ -21,12 +21,14 @@ export class ChatModel {
         this._isDisposed = false;
         this._notificationId = null;
         this._messagesUpdated = new Signal(this);
+        this._configChanged = new Signal(this);
         this._unreadChanged = new Signal(this);
         this._viewportChanged = new Signal(this);
         const config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
         // Stack consecutive messages from the same user by default.
         this._config = { stackMessages: true, ...config };
         this._commands = options.commands;
+        this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
     }
     /**
      * The chat messages list.
@@ -34,6 +36,9 @@ export class ChatModel {
     get messages() {
         return this._messages;
     }
+    get activeCellManager() {
+        return this._activeCellManager;
+    }
     /**
      * The chat model id.
      */
@@ -83,6 +88,8 @@ export class ChatModel {
         const unreadNotificationsChanged = 'unreadNotifications' in value &&
             this._config.unreadNotifications !== value.unreadNotifications;
         this._config = { ...this._config, ...value };
+        this._configChanged.emit(this._config);
+        // Update the stacked status of the messages and the view.
         if (stackMessagesChanged) {
             if (this._config.stackMessages) {
                 this._messages.slice(1).forEach((message, idx) => {
@@ -147,6 +154,12 @@ export class ChatModel {
     get messagesUpdated() {
         return this._messagesUpdated;
     }
+    /**
+     * A signal emitting when the messages list is updated.
+     */
+    get configChanged() {
+        return this._configChanged;
+    }
     /**
      * A signal emitting when unread messages change.
      */

package/lib/types.d.ts

@@ -29,6 +29,10 @@ export interface IConfig {
      * Whether to enable or not the notifications on unread messages.
      */
     unreadNotifications?: boolean;
+    /**
+     * Whether to enable or not the code toolbar.
+     */
+    enableCodeToolbar?: boolean;
 }
 /**
  * The chat message description.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -55,9 +55,11 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@jupyter/react-components": "^0.15.2",
-    "@jupyterlab/apputils": "^4.0.0",
-    "@jupyterlab/rendermime": "^4.0.0",
-    "@jupyterlab/ui-components": "^4.0.0",
+    "@jupyterlab/application": "^4.2.0",
+    "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/notebook": "^4.2.0",
+    "@jupyterlab/rendermime": "^4.2.0",
+    "@jupyterlab/ui-components": "^4.2.0",
     "@lumino/commands": "^2.0.0",
     "@lumino/disposable": "^2.0.0",
     "@lumino/signaling": "^2.0.0",

package/src/active-cell-manager.ts

@@ -0,0 +1,318 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { JupyterFrontEnd, LabShell } from '@jupyterlab/application';
+import { Cell, ICellModel } from '@jupyterlab/cells';
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import { INotebookTracker, NotebookActions } from '@jupyterlab/notebook';
+import { IError as CellError } from '@jupyterlab/nbformat';
+import { ISignal, Signal } 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 namespace ActiveCellManager {
+  /**
+   * The constructor options.
+   */
+  export 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 class ActiveCellManager implements IActiveCellManager {
+  constructor(options: ActiveCellManager.IOptions) {
+    this._notebookTracker = options.tracker;
+    this._notebookTracker.activeCellChanged.connect(this._onActiveCellChanged);
+    options.shell.currentChanged?.connect(this._onMainAreaChanged);
+    if (options.shell instanceof LabShell) {
+      options.shell.layoutModified?.connect(this._onMainAreaChanged);
+    }
+    this._onMainAreaChanged();
+  }
+
+  /**
+   * Whether the notebook is available and an active cell exists.
+   */
+  get available(): boolean {
+    return this._available;
+  }
+
+  /**
+   * The `CellError` output within the active cell, if any.
+   */
+  get activeCellError(): CellError | null {
+    return this._activeCellError;
+  }
+
+  /**
+   * A signal emitting when the active cell changed.
+   */
+  get availabilityChanged(): ISignal<this, boolean> {
+    return this._availabilityChanged;
+  }
+
+  /**
+   * A signal emitting when the error state of the active cell changed.
+   */
+  get activeCellErrorChanged(): ISignal<this, CellError | null> {
+    return this._activeCellErrorChanged;
+  }
+
+  /**
+   * 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;
+  getContent(withError = false): CellContent | CellWithErrorContent | null {
+    const sharedModel = this._notebookTracker.activeCell?.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: string): void {
+    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: string): void {
+    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: string): Promise<void> {
+    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.
+     */
+    activeCell.editor?.model.sharedModel.setSource(content);
+  }
+
+  private _onMainAreaChanged = () => {
+    const value = this._notebookTracker.currentWidget?.isVisible ?? 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.
+   */
+  private _onActiveCellChanged = (
+    _: INotebookTracker,
+    activeCell: Cell<ICellModel> | null
+  ): void => {
+    if (this._activeCell !== activeCell) {
+      this._activeCell?.model.stateChanged.disconnect(this._cellStateChange);
+      this._activeCell = activeCell;
+
+      activeCell?.ready.then(() => {
+        this._activeCell?.model.stateChanged.connect(this._cellStateChange);
+        this._available = !!this._activeCell && this._notebookVisible;
+        this._availabilityChanged.emit(this._available);
+        this._activeCell?.disposed.connect(() => {
+          this._activeCell = null;
+        });
+      });
+    }
+  };
+
+  /**
+   * Handle the change of the active cell state.
+   */
+  private _cellStateChange = (
+    _: ICellModel,
+    change: IChangedArgs<boolean, boolean, any>
+  ): void => {
+    if (change.name === 'executionCount') {
+      const currSharedModel = this._activeCell?.model.sharedModel;
+      const prevActiveCellError = this._activeCellError;
+      let currActiveCellError: CellError | null = null;
+      if (currSharedModel && 'outputs' in currSharedModel) {
+        currActiveCellError =
+          currSharedModel.outputs.find<CellError>(
+            (output): output is CellError => 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);
+      }
+    }
+  };
+
+  /**
+   * The notebook tracker.
+   */
+  private _notebookTracker: INotebookTracker;
+  /**
+   * Whether the current notebook panel is visible or not.
+   */
+  private _notebookVisible: boolean = false;
+  /**
+   * The active cell.
+   */
+  private _activeCell: Cell | null = null;
+  private _available: boolean = false;
+  private _activeCellError: CellError | null = null;
+  private _availabilityChanged = new Signal<this, boolean>(this);
+  private _activeCellErrorChanged = new Signal<this, CellError | null>(this);
+}