@jupyter/chat 0.4.0 → 0.6.0

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { Button } from '@mui/material';
+import { ContrastingTooltip } from './contrasting-tooltip';
+/**
+ * A component that renders an MUI `Button` 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 Button when disabled.
+ * - Renders the Button with `line-height: 0` to avoid showing extra
+ * vertical space in SVG icons.
+ *
+ * NOTE TO DEVS: Please keep this component's features synchronized with
+ * features available to `TooltippedIconButton`.
+ */
+export function TooltippedButton(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", { style: { cursor: 'default' } },
+            React.createElement(Button, { ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
+                    lineHeight: 0,
+                    ...(props.disabled && { opacity: 0.5 }),
+                    ...props.sx
+                }, "aria-label": props['aria-label'] }, props.children))));
+}

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

@@ -32,5 +32,9 @@ export function TooltippedIconButton(props) {
             }
         } },
         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))));
+            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
+                    marginLeft: '8px',
+                    lineHeight: 0,
+                    ...(props.disabled && { opacity: 0.5 })
+                }, "aria-label": props['aria-label'] }, props.children))));
 }

package/lib/components/rendermime-markdown.js

@@ -9,14 +9,19 @@ import { MessageToolbar } from './toolbar';
 const MD_MIME_TYPE = 'text/markdown';
 const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
 /**
- * Takes \( and returns \\(. Escapes LaTeX delimeters by adding extra backslashes where needed for proper rendering by @jupyterlab/rendermime.
+ * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
+ * after the initial MarkDown render. For example, this function takes '\(` and
+ * returns `\\(`.
+ *
+ * Required for proper rendering of MarkDown + LaTeX markup in the chat by
+ * `ILatexTypesetter`.
  */
 function escapeLatexDelimiters(text) {
     return text
-        .replace('\\(', '\\\\(')
-        .replace('\\)', '\\\\)')
-        .replace('\\[', '\\\\[')
-        .replace('\\]', '\\\\]');
+        .replace('\\(/g', '\\\\(')
+        .replace('\\)/g', '\\\\)')
+        .replace('\\[/g', '\\\\[')
+        .replace('\\]/g', '\\\\]');
 }
 function RendermimeMarkdownBase(props) {
     const appendContent = props.appendContent || false;
@@ -25,17 +30,21 @@ function RendermimeMarkdownBase(props) {
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
         const renderContent = async () => {
-            var _a;
+            var _a, _b;
+            // initialize mime model
             const mdStr = escapeLatexDelimiters(props.markdownStr);
             const model = props.rmRegistry.createModel({
                 data: { [MD_MIME_TYPE]: mdStr }
             });
             const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
+            // step 1: render markdown
             await renderer.renderModel(model);
             (_a = props.rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
             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.');
             }
+            // step 2: render LaTeX via MathJax.
+            (_b = props.rmRegistry.latexTypesetter) === null || _b === void 0 ? void 0 : _b.typeset(renderer.node);
             const newCodeToolbarDefns = [];
             // Attach CodeToolbar root element to each <pre> block
             const preBlocks = renderer.node.querySelectorAll('pre');

package/lib/icons.d.ts

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

package/lib/icons.js

@@ -5,6 +5,7 @@
 // This file is based on iconimports.ts in @jupyterlab/ui-components, but is manually generated.
 import { LabIcon } from '@jupyterlab/ui-components';
 import chatSvgStr from '../style/icons/chat.svg';
+import includeSelectionIconStr from '../style/icons/include-selection.svg';
 import readSvgStr from '../style/icons/read.svg';
 import replaceCellSvg from '../style/icons/replace-cell.svg';
 export const chatIcon = new LabIcon({
@@ -19,3 +20,7 @@ export const replaceCellIcon = new LabIcon({
     name: 'jupyter-ai::replace-cell',
     svgstr: replaceCellSvg
 });
+export const includeSelectionIcon = new LabIcon({
+    name: 'jupyter-chat::include',
+    svgstr: includeSelectionIconStr
+});

package/lib/index.d.ts

@@ -1,8 +1,9 @@
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
+export * from './selection-watcher';
 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

@@ -2,11 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
+export * from './selection-watcher';
 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

@@ -3,6 +3,7 @@ import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
 import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
 import { IActiveCellManager } from './active-cell-manager';
+import { ISelectionWatcher } from './selection-watcher';
 /**
  * The chat model interface.
  */
@@ -35,6 +36,10 @@ export interface IChatModel extends IDisposable {
      * Get the active cell manager.
      */
     readonly activeCellManager: IActiveCellManager | null;
+    /**
+     * Get the selection watcher.
+     */
+    readonly selectionWatcher: ISelectionWatcher | null;
     /**
      * A signal emitting when the messages list is updated.
      */
@@ -51,6 +56,10 @@ export interface IChatModel extends IDisposable {
      * A signal emitting when the viewport change.
      */
     readonly viewportChanged?: ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the writers change.
+     */
+    readonly writersChanged?: ISignal<IChatModel, IUser[]>;
     /**
      * A signal emitting when the focus is requested on the input.
      */
@@ -62,7 +71,7 @@ export interface IChatModel extends IDisposable {
      * @param message - the message to send.
      * @returns whether the message has been sent or not, or nothing if not needed.
      */
-    addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
     /**
      * Optional, to update a message from the chat panel.
      *
@@ -108,10 +117,18 @@ export interface IChatModel extends IDisposable {
      * @param count - the number of messages to delete.
      */
     messagesDeleted(index: number, count: number): void;
+    /**
+     * Update the current writers list.
+     */
+    updateWriters(writers: IUser[]): void;
     /**
      * Function to request the focus on the input of the chat.
      */
     focusInput(): void;
+    /**
+     * Function called by the input on key pressed.
+     */
+    inputChanged?(input?: string): void;
 }
 /**
  * The default chat model implementation.
@@ -123,11 +140,6 @@ export declare class ChatModel implements IChatModel {
      * Create a new chat model.
      */
     constructor(options?: ChatModel.IOptions);
-    /**
-     * The chat messages list.
-     */
-    get messages(): IChatMessage[];
-    get activeCellManager(): IActiveCellManager | null;
     /**
      * The chat model id.
      */
@@ -138,6 +150,18 @@ export declare class ChatModel implements IChatModel {
      */
     get name(): string;
     set name(value: string);
+    /**
+     * The chat messages list.
+     */
+    get messages(): IChatMessage[];
+    /**
+     * Get the active cell manager.
+     */
+    get activeCellManager(): IActiveCellManager | null;
+    /**
+     * Get the selection watcher.
+     */
+    get selectionWatcher(): ISelectionWatcher | null;
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -174,6 +198,10 @@ export declare class ChatModel implements IChatModel {
      * A signal emitting when the viewport change.
      */
     get viewportChanged(): ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the writers change.
+     */
+    get writersChanged(): ISignal<IChatModel, IUser[]>;
     /**
      * A signal emitting when the focus is requested on the input.
      */
@@ -185,7 +213,7 @@ export declare class ChatModel implements IChatModel {
      * @param message - the message to send.
      * @returns whether the message has been sent or not.
      */
-    addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
     /**
      * Dispose the chat model.
      */
@@ -219,10 +247,19 @@ export declare class ChatModel implements IChatModel {
      * @param count - the number of messages to delete.
      */
     messagesDeleted(index: number, count: number): void;
+    /**
+     * Update the current writers list.
+     * This implementation only propagate the list via a signal.
+     */
+    updateWriters(writers: IUser[]): void;
     /**
      * Function to request the focus on the input of the chat.
      */
     focusInput(): void;
+    /**
+     * Function called by the input on key pressed.
+     */
+    inputChanged?(input?: string): void;
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.
@@ -247,11 +284,13 @@ export declare class ChatModel implements IChatModel {
     private _isDisposed;
     private _commands?;
     private _activeCellManager;
+    private _selectionWatcher;
     private _notificationId;
     private _messagesUpdated;
     private _configChanged;
     private _unreadChanged;
     private _viewportChanged;
+    private _writersChanged;
     private _focusInputSignal;
 }
 /**
@@ -271,8 +310,12 @@ export declare namespace ChatModel {
          */
         commands?: CommandRegistry;
         /**
-         * Active cell manager
+         * Active cell manager.
          */
         activeCellManager?: IActiveCellManager | null;
+        /**
+         * Selection watcher.
+         */
+        selectionWatcher?: ISelectionWatcher | null;
     }
 }

package/lib/model.js

@@ -13,7 +13,7 @@ export class ChatModel {
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a, _b;
+        var _a, _b, _c;
         this._messages = [];
         this._unreadMessages = [];
         this._messagesInViewport = [];
@@ -24,21 +24,18 @@ export class ChatModel {
         this._configChanged = new Signal(this);
         this._unreadChanged = new Signal(this);
         this._viewportChanged = new Signal(this);
+        this._writersChanged = new Signal(this);
         this._focusInputSignal = 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._config = {
+            stackMessages: true,
+            sendTypingNotification: true,
+            ...config
+        };
         this._commands = options.commands;
         this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
-    }
-    /**
-     * The chat messages list.
-     */
-    get messages() {
-        return this._messages;
-    }
-    get activeCellManager() {
-        return this._activeCellManager;
+        this._selectionWatcher = (_c = options.selectionWatcher) !== null && _c !== void 0 ? _c : null;
     }
     /**
      * The chat model id.
@@ -58,6 +55,24 @@ export class ChatModel {
     set name(value) {
         this._name = value;
     }
+    /**
+     * The chat messages list.
+     */
+    get messages() {
+        return this._messages;
+    }
+    /**
+     * Get the active cell manager.
+     */
+    get activeCellManager() {
+        return this._activeCellManager;
+    }
+    /**
+     * Get the selection watcher.
+     */
+    get selectionWatcher() {
+        return this._selectionWatcher;
+    }
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -173,6 +188,12 @@ export class ChatModel {
     get viewportChanged() {
         return this._viewportChanged;
     }
+    /**
+     * A signal emitting when the writers change.
+     */
+    get writersChanged() {
+        return this._writersChanged;
+    }
     /**
      * A signal emitting when the focus is requested on the input.
      */
@@ -186,7 +207,7 @@ export class ChatModel {
      * @param message - the message to send.
      * @returns whether the message has been sent or not.
      */
-    addMessage(message) { }
+    sendMessage(message) { }
     /**
      * Dispose the chat model.
      */
@@ -275,12 +296,23 @@ export class ChatModel {
         this._messages.splice(index, count);
         this._messagesUpdated.emit();
     }
+    /**
+     * Update the current writers list.
+     * This implementation only propagate the list via a signal.
+     */
+    updateWriters(writers) {
+        this._writersChanged.emit(writers);
+    }
     /**
      * Function to request the focus on the input of the chat.
      */
     focusInput() {
         this._focusInputSignal.emit();
     }
+    /**
+     * Function called by the input on key pressed.
+     */
+    inputChanged(input) { }
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.

package/lib/selection-watcher.d.ts

@@ -0,0 +1,62 @@
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { CodeEditor } from '@jupyterlab/codeeditor';
+import { Widget } from '@lumino/widgets';
+import { ISignal, Signal } from '@lumino/signaling';
+/**
+ * The selection watcher namespace.
+ */
+export declare namespace SelectionWatcher {
+    /**
+     * The constructor options.
+     */
+    interface IOptions {
+        /**
+         * The current shell of the application.
+         */
+        shell: JupyterFrontEnd.IShell;
+    }
+    /**
+     * The selection type.
+     */
+    type Selection = CodeEditor.ITextSelection & {
+        /**
+         * The text within the selection as a string.
+         */
+        text: string;
+        /**
+         * Number of lines contained by the text selection.
+         */
+        numLines: number;
+        /**
+         * The ID of the document widget in which the selection was made.
+         */
+        widgetId: string;
+        /**
+         * The ID of the cell in which the selection was made, if the original widget
+         * was a notebook.
+         */
+        cellId?: string;
+    };
+}
+/**
+ * The selection watcher interface.
+ */
+export interface ISelectionWatcher {
+    readonly selection: SelectionWatcher.Selection | null;
+    readonly selectionChanged: ISignal<ISelectionWatcher, SelectionWatcher.Selection | null>;
+    replaceSelection(selection: SelectionWatcher.Selection): void;
+}
+/**
+ * The selection watcher, read/write selected text in a DocumentWidget.
+ */
+export declare class SelectionWatcher {
+    constructor(options: SelectionWatcher.IOptions);
+    get selection(): SelectionWatcher.Selection | null;
+    get selectionChanged(): ISignal<this, SelectionWatcher.Selection | null>;
+    replaceSelection(selection: SelectionWatcher.Selection): void;
+    protected _poll(): void;
+    protected _shell: JupyterFrontEnd.IShell;
+    protected _mainAreaDocumentWidget: Widget | null;
+    protected _selection: SelectionWatcher.Selection | null;
+    protected _selectionChanged: Signal<this, SelectionWatcher.Selection | null>;
+}

package/lib/selection-watcher.js

@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { Notebook } from '@jupyterlab/notebook';
+import { find } from '@lumino/algorithm';
+import { Signal } from '@lumino/signaling';
+import { getCellIndex, getEditor } from './utils';
+/**
+ * The selection watcher, read/write selected text in a DocumentWidget.
+ */
+export class SelectionWatcher {
+    constructor(options) {
+        var _a;
+        this._mainAreaDocumentWidget = null;
+        this._selection = null;
+        this._selectionChanged = new Signal(this);
+        this._shell = options.shell;
+        (_a = this._shell.currentChanged) === null || _a === void 0 ? void 0 : _a.connect((sender, args) => {
+            var _a;
+            // Do not change the main area widget if the new one has no editor, for example
+            // a chat panel. However, the selected text is only available if the main area
+            // widget is visible. (to avoid confusion in inclusion/replacement).
+            const widget = args.newValue;
+            // if there is no main area widget, set it to null.
+            if (widget === null) {
+                this._mainAreaDocumentWidget = null;
+                return;
+            }
+            const editor = getEditor(widget);
+            if (widget instanceof DocumentWidget &&
+                (editor || widget.content instanceof Notebook)) {
+                // if the new widget is a DocumentWidget and has an editor, set it.
+                // NOTE: special case for notebook which do not has an active cell at that stage,
+                // and so the editor can't be retrieved too.
+                this._mainAreaDocumentWidget = widget;
+            }
+            else if ((_a = this._mainAreaDocumentWidget) === null || _a === void 0 ? void 0 : _a.isDisposed) {
+                // if the previous document widget has been closed, set it to null.
+                this._mainAreaDocumentWidget = null;
+            }
+        });
+        setInterval(this._poll.bind(this), 200);
+    }
+    get selection() {
+        return this._selection;
+    }
+    get selectionChanged() {
+        return this._selectionChanged;
+    }
+    replaceSelection(selection) {
+        // unfortunately shell.currentWidget doesn't update synchronously after
+        // shell.activateById(), which is why we have to get a reference to the
+        // widget manually.
+        const widget = find(this._shell.widgets(), widget => widget.id === selection.widgetId);
+        // Do not allow replacement on non visible widget (to avoid confusion).
+        if (!(widget === null || widget === void 0 ? void 0 : widget.isVisible) || !(widget instanceof DocumentWidget)) {
+            return;
+        }
+        // activate the widget if not already active
+        this._shell.activateById(selection.widgetId);
+        // activate notebook cell if specified
+        if (widget.content instanceof Notebook && selection.cellId) {
+            const cellIndex = getCellIndex(widget.content, selection.cellId);
+            if (cellIndex !== -1) {
+                widget.content.activeCellIndex = cellIndex;
+            }
+        }
+        // get editor instance
+        const editor = getEditor(widget);
+        if (!editor) {
+            return;
+        }
+        editor.model.sharedModel.updateSource(editor.getOffsetAt(selection.start), editor.getOffsetAt(selection.end), selection.text);
+        const newPosition = editor.getPositionAt(editor.getOffsetAt(selection.start) + selection.text.length);
+        editor.setSelection({ start: newPosition, end: newPosition });
+    }
+    _poll() {
+        var _a;
+        let currSelection = null;
+        const prevSelection = this._selection;
+        // Do not return selected text if the main area widget is hidden.
+        if ((_a = this._mainAreaDocumentWidget) === null || _a === void 0 ? void 0 : _a.isVisible) {
+            currSelection = getTextSelection(this._mainAreaDocumentWidget);
+        }
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.text) !== (currSelection === null || currSelection === void 0 ? void 0 : currSelection.text)) {
+            this._selection = currSelection;
+            this._selectionChanged.emit(currSelection);
+        }
+    }
+}
+/**
+ * Gets a Selection object from a document widget. Returns `null` if unable.
+ */
+function getTextSelection(widget) {
+    var _a;
+    const editor = getEditor(widget);
+    // widget type check is redundant but hints the type to TypeScript
+    if (!editor || !(widget instanceof DocumentWidget)) {
+        return null;
+    }
+    let cellId = undefined;
+    if (widget.content instanceof Notebook) {
+        cellId = (_a = widget.content.activeCell) === null || _a === void 0 ? void 0 : _a.model.id;
+    }
+    const selectionObj = editor.getSelection();
+    let { start, end } = selectionObj;
+    const startOffset = editor.getOffsetAt(start);
+    const endOffset = editor.getOffsetAt(end);
+    const text = editor.model.sharedModel
+        .getSource()
+        .substring(startOffset, endOffset);
+    // Do not return a Selection object if no text is selected
+    if (!text) {
+        return null;
+    }
+    // ensure start <= end
+    // required for editor.model.sharedModel.updateSource()
+    if (startOffset > endOffset) {
+        [start, end] = [end, start];
+    }
+    return {
+        ...selectionObj,
+        start,
+        end,
+        text,
+        numLines: text.split('\n').length,
+        widgetId: widget.id,
+        ...(cellId && {
+            cellId
+        })
+    };
+}

package/lib/types.d.ts

@@ -33,6 +33,10 @@ export interface IConfig {
      * Whether to enable or not the code toolbar.
      */
     enableCodeToolbar?: boolean;
+    /**
+     * Whether to send typing notification.
+     */
+    sendTypingNotification?: boolean;
 }
 /**
  * The chat message description.
@@ -72,6 +76,24 @@ export interface ISettings {
 export type AutocompleteCommand = {
     label: string;
 };
+/**
+ * Representation of a selected text.
+ */
+export type TextSelection = {
+    type: 'text';
+    source: string;
+};
+/**
+ * Representation of a selected cell.
+ */
+export type CellSelection = {
+    type: 'cell';
+    source: string;
+};
+/**
+ * Selection object (text or cell).
+ */
+export type Selection = TextSelection | CellSelection;
 /**
  * The properties of the autocompletion.
  *

package/lib/utils.d.ts

@@ -0,0 +1,11 @@
+import { CodeMirrorEditor } from '@jupyterlab/codemirror';
+import { Notebook } from '@jupyterlab/notebook';
+import { Widget } from '@lumino/widgets';
+/**
+ * Gets the editor instance used by a document widget. Returns `null` if unable.
+ */
+export declare function getEditor(widget: Widget | null): CodeMirrorEditor | null | undefined;
+/**
+ * Gets the index of the cell associated with `cellId`.
+ */
+export declare function getCellIndex(notebook: Notebook, cellId: string): number;