@jupyter/chat 0.14.0 → 0.16.0

package/lib/components/attachments.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 import { IAttachment } from '../types';
-/**
- * The attachments props.
- */
 export type AttachmentsProps = {
     attachments: IAttachment[];
     onRemove?: (attachment: IAttachment) => void;

package/lib/components/attachments.js

@@ -2,21 +2,46 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-// import { IDocumentManager } from '@jupyterlab/docmanager';
 import CloseIcon from '@mui/icons-material/Close';
 import { Box } from '@mui/material';
 import React, { useContext } from 'react';
+import { PathExt } from '@jupyterlab/coreutils';
+import { UUID } from '@lumino/coreutils';
 import { TooltippedButton } from './mui-extras/tooltipped-button';
 import { AttachmentOpenerContext } from '../context';
 const ATTACHMENTS_CLASS = 'jp-chat-attachments';
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
+/**
+ * Generate a user-friendly display name for an attachment
+ */
+function getAttachmentDisplayName(attachment) {
+    var _a;
+    if (attachment.type === 'notebook') {
+        // Extract notebook filename with extension
+        const notebookName = PathExt.basename(attachment.value) || 'Unknown notebook';
+        // Show info about attached cells if there are any
+        if (((_a = attachment.cells) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+            return `${notebookName}: ${attachment.cells[0].input_type} cell`;
+        }
+        else if (attachment.cells && attachment.cells.length > 1) {
+            return `${notebookName}: ${attachment.cells.length} cells`;
+        }
+        return notebookName;
+    }
+    if (attachment.type === 'file') {
+        // Extract filename with extension
+        const fileName = PathExt.basename(attachment.value) || 'Unknown file';
+        return fileName;
+    }
+    return attachment.value || 'Unknown attachment';
+}
 /**
  * The Attachments component.
  */
 export function AttachmentPreviewList(props) {
-    return (React.createElement(Box, { className: ATTACHMENTS_CLASS }, props.attachments.map(attachment => (React.createElement(AttachmentPreview, { ...props, attachment: attachment })))));
+    return (React.createElement(Box, { className: ATTACHMENTS_CLASS }, props.attachments.map(attachment => (React.createElement(AttachmentPreview, { key: `${PathExt.basename(attachment.value)}-${UUID.uuid4()}`, ...props, attachment: attachment })))));
 }
 /**
  * The Attachment component.
@@ -30,7 +55,7 @@ export function AttachmentPreview(props) {
                 : '', onClick: () => {
                 var _a;
                 return (_a = attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type)) === null || _a === void 0 ? void 0 : _a(props.attachment);
-            } }, props.attachment.value),
+            } }, getAttachmentDisplayName(props.attachment)),
         props.onRemove && (React.createElement(TooltippedButton, { onClick: () => props.onRemove(props.attachment), tooltip: remove_tooltip, buttonProps: {
                 size: 'small',
                 title: remove_tooltip,

package/lib/components/chat.js

@@ -22,7 +22,7 @@ export function ChatBody(props) {
         React.createElement(ChatInput, { sx: {
                 paddingLeft: 4,
                 paddingRight: 4,
-                paddingTop: 1,
+                paddingTop: 0,
                 paddingBottom: 0,
                 borderTop: '1px solid var(--jp-border-color1)'
             }, model: model.input, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: inputToolbarRegistry })));

package/lib/components/input/chat-input.js

@@ -118,7 +118,7 @@ export function ChatInput(props) {
             (!sendWithShiftEnter && !event.shiftKey)) {
             // Run all command providers
             await ((_a = props.chatCommandRegistry) === null || _a === void 0 ? void 0 : _a.onSubmit(model));
-            model.send(input);
+            model.send(model.value);
             event.stopPropagation();
             event.preventDefault();
         }

package/lib/components/input/use-chat-commands.js

@@ -14,7 +14,9 @@ import React, { useEffect, useState } from 'react';
 export function useChatCommands(inputModel, chatCommandRegistry) {
     // whether an option is highlighted in the chat commands menu
     const [highlighted, setHighlighted] = useState(false);
-    // whether the chat commands menu is open
+    // whether the chat commands menu is open.
+    // NOTE: every `setOpen(false)` call should be followed by a
+    // `setHighlighted(false)` call.
     const [open, setOpen] = useState(false);
     // current list of chat commands matched by the current word.
     // the current word is the space-separated word at the user's cursor.
@@ -55,7 +57,13 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
             }
             // Otherwise, open/close the menu based on the presence of command
             // completions and set the menu entries.
-            setOpen(!!commandCompletions.length);
+            if (commandCompletions.length) {
+                setOpen(true);
+            }
+            else {
+                setOpen(false);
+                setHighlighted(false);
+            }
             setCommands(commandCompletions);
         }
         inputModel.currentWordChanged.connect(getCommands);
@@ -91,7 +99,7 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
         autocompleteProps: {
             open,
             options: commands,
-            getOptionLabel: (command) => command.name,
+            getOptionLabel: (command) => typeof command === 'string' ? '' : command.name,
             renderOption: (defaultProps, command, __, ___) => {
                 const { key, ...listItemProps } = defaultProps;
                 const commandIcon = React.isValidElement(command.icon) ? (command.icon) : (React.createElement("span", null, command.icon instanceof LabIcon ? (React.createElement(command.icon.react, null)) : (command.icon)));

package/lib/input-model.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { Signal } from '@lumino/signaling';
-const WHITESPACE = new Set([' ', '\n', '\t']);
 /**
  * The input model.
  */
@@ -21,10 +20,31 @@ export class InputModel {
          * Add attachment to send with next message.
          */
         this.addAttachment = (attachment) => {
-            const duplicateAttachment = this._attachments.find(att => att.type === attachment.type && att.value === attachment.value);
+            // Use JSON comparison to detect duplicates (same as in YChat.setAttachment)
+            const attachmentJson = JSON.stringify(attachment);
+            const duplicateAttachment = this._attachments.find(att => JSON.stringify(att) === attachmentJson);
             if (duplicateAttachment) {
                 return;
             }
+            // Merge cells from same notebook into the same attachment
+            if (attachment.type === 'notebook' && attachment.cells) {
+                const existingNotebookIndex = this._attachments.findIndex(att => att.type === 'notebook' && att.value === attachment.value);
+                if (existingNotebookIndex !== -1) {
+                    const existingAttachment = this._attachments[existingNotebookIndex];
+                    const existingCells = existingAttachment.cells || [];
+                    // Filter out duplicate cells
+                    const newCells = attachment.cells.filter(newCell => !existingCells.some(existingCell => existingCell.id === newCell.id));
+                    if (!newCells.length) {
+                        return;
+                    }
+                    this._attachments[existingNotebookIndex] = {
+                        ...existingAttachment,
+                        cells: [...existingCells, ...newCells]
+                    };
+                    this._attachmentsChanged.emit([...this._attachments]);
+                    return;
+                }
+            }
             this._attachments.push(attachment);
             this._attachmentsChanged.emit([...this._attachments]);
         };
@@ -32,7 +52,9 @@ export class InputModel {
          * Remove attachment to be sent.
          */
         this.removeAttachment = (attachment) => {
-            const attachmentIndex = this._attachments.findIndex(att => att.type === attachment.type && att.value === attachment.value);
+            // Use JSON comparison to detect duplicates (same as in YChat.setAttachment)
+            const attachmentJson = JSON.stringify(attachment);
+            const attachmentIndex = this._attachments.findIndex(att => JSON.stringify(att) === attachmentJson);
             if (attachmentIndex === -1) {
                 return;
             }
@@ -254,14 +276,42 @@ export class InputModel {
 }
 var Private;
 (function (Private) {
+    const WHITESPACE = new Set([' ', '\n', '\t']);
+    /**
+     * Returns the start index (inclusive) & end index (exclusive) that contain
+     * the current word. The start & end index can be passed to `String.slice()`
+     * to extract the current word. The returned range never includes any
+     * whitespace character unless it is escaped by a backslash `\`.
+     *
+     * NOTE: the escape sequence handling here is naive and non-recursive. This
+     * function considers the space in "`\\ `" as escaped, even though "`\\ `"
+     * defines a backslash followed by an _unescaped_ space in most languages.
+     */
     function getCurrentWordBoundaries(input, cursorIndex) {
         let start = cursorIndex;
         let end = cursorIndex;
         const n = input.length;
-        while (start > 0 && !WHITESPACE.has(input[start - 1])) {
+        while (
+        // terminate when `input[start - 1]` is whitespace
+        // i.e. `input[start]` is never whitespace after exiting
+        (start - 1 >= 0 && !WHITESPACE.has(input[start - 1])) ||
+            // unless it is preceded by a backslash
+            (start - 2 >= 0 &&
+                input[start - 2] === '\\' &&
+                WHITESPACE.has(input[start - 1]))) {
             start--;
         }
-        while (end < n && !WHITESPACE.has(input[end])) {
+        // `end` is an exclusive index unlike `start`, hence the different `while`
+        // condition here
+        while (
+        // terminate when `input[end]` is whitespace
+        // i.e. `input[end]` may be whitespace after exiting
+        (end < n && !WHITESPACE.has(input[end])) ||
+            // unless it is preceded by a backslash
+            (end < n &&
+                end - 1 >= 0 &&
+                input[end - 1] === '\\' &&
+                WHITESPACE.has(input[end]))) {
             end++;
         }
         return [start, end];

package/lib/types.d.ts

@@ -9,7 +9,12 @@ export interface IUser {
     color?: string;
     avatar_url?: string;
     /**
-     * The string to use to mention a user in the chat.
+     * The string to use to mention a user in the chat. This should be computed
+     * via the following procedure:
+     *
+     * 1. Let `mention_name = user.display_name || user.name || user.username`.
+     *
+     * 2. Replace each ' ' character with '-' in `mention_name`.
      */
     mention_name?: string;
     /**
@@ -72,21 +77,81 @@ export interface INewMessage {
     id?: string;
 }
 /**
- * The attachment interface.
+ * The attachment type. Jupyter Chat allows for two types of attachments
+ * currently:
+ *
+ * 1. File attachments (`IFileAttachment`)
+ * 2. Notebook attachments (`INotebookAttachment`)
+ *
+ * The `type` field is always defined on every attachment, so it can be used to
+ * distinguish different attachment types.
  */
-export interface IAttachment {
+export type IAttachment = IFileAttachment | INotebookAttachment;
+export interface IFileAttachment {
+    type: 'file';
     /**
-     * The type of the attachment (basically 'file', 'variable', 'image')
+     * The path to the file, relative to `ContentsManager.root_dir`.
      */
-    type: string;
+    value: string;
+    /**
+     * (optional) The MIME type of the attachment.
+     */
+    mimetype?: string;
+    /**
+     * (optional) A selection range within the file. See `IAttachmentSelection`
+     * for more info.
+     */
+    selection?: IAttachmentSelection;
+}
+/**
+ * Model of a single cell within a notebook attachment.
+ *
+ * The corresponding backend model is `NotebookCell`.
+ */
+export interface INotebookAttachmentCell {
+    /**
+     * The ID of the cell within the notebook.
+     */
+    id: string;
+    /**
+     * The type of the cell.
+     */
+    input_type: 'raw' | 'markdown' | 'code';
     /**
-     * The value, i.e. the file path, the variable name or image content.
+     * (optional) A selection range within the cell. See `IAttachmentSelection` for
+     * more info.
+     */
+    selection?: IAttachmentSelection;
+}
+/**
+ * Model of a notebook attachment.
+ *
+ * The corresponding backend model is `NotebookAttachment`.
+ */
+export interface INotebookAttachment {
+    type: 'notebook';
+    /**
+     * The local path of the notebook, relative to `ContentsManager.root_dir`.
      */
     value: string;
     /**
-     * The mimetype of the attachment, optional.
+     * (optional) A list of cells in the notebook.
      */
-    mimetype?: string;
+    cells?: INotebookAttachmentCell[];
+}
+export interface IAttachmentSelection {
+    /**
+     * The line number & column number of where the selection begins (inclusive).
+     */
+    start: [number, number];
+    /**
+     * The line number & column number of where the selection ends (inclusive).
+     */
+    end: [number, number];
+    /**
+     * The initial content of the selection.
+     */
+    content: string;
 }
 /**
  * An empty interface to describe optional settings that could be fetched from server.

package/lib/utils.js

@@ -46,9 +46,10 @@ export function replaceMentionToSpan(content, user) {
     if (!user.mention_name) {
         return content;
     }
-    const regex = new RegExp(user.mention_name, 'g');
-    const mention = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-    return content.replace(regex, mention);
+    const mention = '@' + user.mention_name;
+    const regex = new RegExp(mention, 'g');
+    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    return content.replace(regex, mentionEl);
 }
 /**
  * Replace a span to a mentioned to user string (@someone).
@@ -60,7 +61,8 @@ export function replaceSpanToMention(content, user) {
     if (!user.mention_name) {
         return content;
     }
-    const span = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
-    const regex = new RegExp(span, 'g');
-    return content.replace(regex, user.mention_name);
+    const mention = '@' + user.mention_name;
+    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    const regex = new RegExp(mentionEl, 'g');
+    return content.replace(regex, mention);
 }

package/lib/widgets/chat-widget.d.ts

@@ -1,5 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
+import { Message } from '@lumino/messaging';
 import { Chat, IInputToolbarRegistry } from '../components';
 import { IChatModel } from '../model';
 export declare class ChatWidget extends ReactWidget {
@@ -13,5 +14,46 @@ export declare class ChatWidget extends ReactWidget {
      */
     get inputToolbarRegistry(): IInputToolbarRegistry | undefined;
     render(): React.JSX.Element;
+    /**
+     * Handle DOM events for drag and drop
+     */
+    handleEvent(event: Event): void;
+    /**
+     * A message handler invoked on an `'after-attach'` message.
+     */
+    protected onAfterAttach(msg: Message): void;
+    /**
+     * A message handler invoked on a `'before-detach'` message.
+     */
+    protected onBeforeDetach(msg: Message): void;
+    /**
+     * Handle drag over events
+     */
+    private _handleDrag;
+    /**
+     * Check if we can handle the drop
+     */
+    private _canHandleDrop;
+    /**
+     * Handle drop events
+     */
+    private _handleDrop;
+    /**
+     * Process dropped files
+     */
+    private _processFileDrop;
+    /**
+     * Process dropped cells
+     */
+    private _processCellDrop;
+    /**
+     * Find the notebook path for a cell by searching through active and open notebooks
+     */
+    private _findNotebookPath;
+    /**
+     * Remove drag hover class
+     */
+    private _removeDragHoverClass;
     private _chatOptions;
+    private _dragTarget;
 }

package/lib/widgets/chat-widget.js

@@ -3,12 +3,22 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ReactWidget } from '@jupyterlab/apputils';
+import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
+import { Drag } from '@lumino/dragdrop';
 import { Chat } from '../components';
 import { chatIcon } from '../icons';
+// MIME type constant for file browser drag events
+const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
+// MIME type constant for Notebook cell drag events
+const NOTEBOOK_CELL_MIME = 'application/vnd.jupyter.cells';
+// CSS class constants
+const INPUT_CONTAINER_CLASS = 'jp-chat-input-container';
+const DRAG_HOVER_CLASS = 'jp-chat-drag-hover';
 export class ChatWidget extends ReactWidget {
     constructor(options) {
         super();
+        this._dragTarget = null;
         this.title.icon = chatIcon;
         this.title.caption = 'Jupyter Chat'; // TODO: i18n
         this._chatOptions = options;
@@ -32,4 +42,225 @@ export class ChatWidget extends ReactWidget {
         // the case of collaborative document.
         return React.createElement(Chat, { ...this._chatOptions, model: this._chatOptions.model });
     }
+    /**
+     * Handle DOM events for drag and drop
+     */
+    handleEvent(event) {
+        // only handle drag-and-drop events
+        if (!(event instanceof Drag.Event)) {
+            return;
+        }
+        switch (event.type) {
+            case 'lm-dragenter':
+                // see `Drag.Event` documentation for context
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'lm-dragover':
+                this._handleDrag(event);
+                break;
+            case 'lm-drop':
+                this._handleDrop(event);
+                break;
+            case 'lm-dragleave': {
+                // Remove hover class on leaving the widget
+                const targetElement = event.relatedTarget;
+                if (!targetElement || !this.node.contains(targetElement)) {
+                    this._removeDragHoverClass();
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * A message handler invoked on an `'after-attach'` message.
+     */
+    onAfterAttach(msg) {
+        super.onAfterAttach(msg);
+        this.node.addEventListener('lm-dragover', this, true);
+        this.node.addEventListener('lm-dragenter', this, true);
+        this.node.addEventListener('lm-drop', this, true);
+        this.node.addEventListener('lm-dragleave', this, true);
+    }
+    /**
+     * A message handler invoked on a `'before-detach'` message.
+     */
+    onBeforeDetach(msg) {
+        this.node.removeEventListener('lm-dragover', this, true);
+        this.node.removeEventListener('lm-dragenter', this, true);
+        this.node.removeEventListener('lm-drop', this, true);
+        this.node.removeEventListener('lm-dragleave', this, true);
+        super.onBeforeDetach(msg);
+    }
+    /**
+     * Handle drag over events
+     */
+    _handleDrag(event) {
+        const inputContainer = this.node.querySelector(`.${INPUT_CONTAINER_CLASS}`);
+        const target = event.target;
+        const isOverInput = (inputContainer === null || inputContainer === void 0 ? void 0 : inputContainer.contains(target)) || inputContainer === target;
+        if (!isOverInput) {
+            this._removeDragHoverClass();
+            return;
+        }
+        if (!this._canHandleDrop(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dropAction = 'move';
+        if (inputContainer &&
+            !inputContainer.classList.contains(DRAG_HOVER_CLASS)) {
+            inputContainer.classList.add(DRAG_HOVER_CLASS);
+            this._dragTarget = inputContainer;
+        }
+    }
+    /**
+     * Check if we can handle the drop
+     */
+    _canHandleDrop(event) {
+        const types = event.mimeData.types();
+        return (types.includes(NOTEBOOK_CELL_MIME) || types.includes(FILE_BROWSER_MIME));
+    }
+    /**
+     * Handle drop events
+     */
+    _handleDrop(event) {
+        if (!this._canHandleDrop(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dropAction = 'move';
+        this._removeDragHoverClass();
+        try {
+            if (event.mimeData.hasData(NOTEBOOK_CELL_MIME)) {
+                this._processCellDrop(event);
+            }
+            else if (event.mimeData.hasData(FILE_BROWSER_MIME)) {
+                this._processFileDrop(event);
+            }
+        }
+        catch (error) {
+            console.error('Error processing drop:', error);
+        }
+    }
+    /**
+     * Process dropped files
+     */
+    _processFileDrop(event) {
+        var _a, _b, _c;
+        const data = event.mimeData.getData(FILE_BROWSER_MIME);
+        if (!((_a = data === null || data === void 0 ? void 0 : data.model) === null || _a === void 0 ? void 0 : _a.path)) {
+            console.warn('Invalid file browser data in drop event');
+            return;
+        }
+        const attachment = {
+            type: 'file',
+            value: data.model.path,
+            mimetype: data.model.mimetype
+        };
+        (_c = (_b = this.model.input).addAttachment) === null || _c === void 0 ? void 0 : _c.call(_b, attachment);
+    }
+    /**
+     * Process dropped cells
+     */
+    _processCellDrop(event) {
+        var _a, _b, _c;
+        try {
+            const cellData = event.mimeData.getData(NOTEBOOK_CELL_MIME);
+            // Cells might come as array or single object
+            const cells = Array.isArray(cellData) ? cellData : [cellData];
+            // Get path from first cell as all cells come from same notebook as users can only select or drag cells from one notebook at a time
+            if (!((_a = cells[0]) === null || _a === void 0 ? void 0 : _a.id)) {
+                console.warn('No valid cells to process');
+                return;
+            }
+            const notebookPath = this._findNotebookPath(String(cells[0].id));
+            if (!notebookPath) {
+                console.warn(`Cannot find notebook for dragged cells from ${cells[0].id}`);
+                return;
+            }
+            const validCells = [];
+            for (const cell of cells) {
+                if (!cell.id) {
+                    console.warn('Dropped cell missing required ID, skipping');
+                    continue;
+                }
+                // Use type guards to validate cell type
+                let cellType;
+                if (isCode(cell)) {
+                    cellType = 'code';
+                }
+                else if (isMarkdown(cell)) {
+                    cellType = 'markdown';
+                }
+                else if (isRaw(cell)) {
+                    cellType = 'raw';
+                }
+                else {
+                    console.warn(`Unknown cell type: ${cell.cell_type}, skipping`);
+                    continue;
+                }
+                const notebookCell = {
+                    id: cell.id,
+                    input_type: cellType
+                };
+                validCells.push(notebookCell);
+            }
+            // Create single attachment with all cells from the notebook
+            if (validCells.length) {
+                const attachment = {
+                    type: 'notebook',
+                    value: notebookPath,
+                    cells: validCells
+                };
+                (_c = (_b = this.model.input).addAttachment) === null || _c === void 0 ? void 0 : _c.call(_b, attachment);
+            }
+        }
+        catch (error) {
+            console.error('Failed to process cell drop: ', error);
+        }
+    }
+    /**
+     * Find the notebook path for a cell by searching through active and open notebooks
+     */
+    _findNotebookPath(cellId) {
+        if (!this.model.input.activeCellManager) {
+            return null;
+        }
+        const activeCellManager = this.model.input
+            .activeCellManager;
+        const notebookTracker = activeCellManager._notebookTracker;
+        if (!notebookTracker) {
+            return null;
+        }
+        if (notebookTracker.currentWidget) {
+            const currentNotebook = notebookTracker.currentWidget;
+            const cells = currentNotebook.content.widgets;
+            const cellWidget = cells.find((c) => c.model.id === cellId);
+            if (cellWidget) {
+                return currentNotebook.context.path;
+            }
+        }
+        // If not in current notebook, check all open notebooks
+        const widgets = notebookTracker.widgets || [];
+        for (const notebook of widgets) {
+            const cells = notebook.content.widgets;
+            const cellWidget = cells.find((c) => c.model.id === cellId);
+            if (cellWidget) {
+                return notebook.context.path;
+            }
+        }
+        return null;
+    }
+    /**
+     * Remove drag hover class
+     */
+    _removeDragHoverClass() {
+        if (this._dragTarget) {
+            this._dragTarget.classList.remove(DRAG_HOVER_CLASS);
+            this._dragTarget = null;
+        }
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",