@jupyter/chat 0.14.0 → 0.16.0

package/src/components/attachments.tsx

@@ -3,10 +3,11 @@
  * 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 { IAttachment } from '../types';
@@ -18,8 +19,34 @@ const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
 
 /**
- * The attachments props.
+ * Generate a user-friendly display name for an attachment
  */
+function getAttachmentDisplayName(attachment: IAttachment): string {
+  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 (attachment.cells?.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 as any).value || 'Unknown attachment';
+}
+
 export type AttachmentsProps = {
   attachments: IAttachment[];
   onRemove?: (attachment: IAttachment) => void;
@@ -32,7 +59,11 @@ export function AttachmentPreviewList(props: AttachmentsProps): JSX.Element {
   return (
     <Box className={ATTACHMENTS_CLASS}>
       {props.attachments.map(attachment => (
-        <AttachmentPreview {...props} attachment={attachment} />
+        <AttachmentPreview
+          key={`${PathExt.basename(attachment.value)}-${UUID.uuid4()}`}
+          {...props}
+          attachment={attachment}
+        />
       ))}
     </Box>
   );
@@ -66,7 +97,7 @@ export function AttachmentPreview(props: AttachmentProps): JSX.Element {
           )
         }
       >
-        {props.attachment.value}
+        {getAttachmentDisplayName(props.attachment)}
       </span>
       {props.onRemove && (
         <TooltippedButton

package/src/components/chat.tsx

@@ -47,7 +47,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         sx={{
           paddingLeft: 4,
           paddingRight: 4,
-          paddingTop: 1,
+          paddingTop: 0,
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}

package/src/components/input/chat-input.tsx

@@ -159,7 +159,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     ) {
       // Run all command providers
       await props.chatCommandRegistry?.onSubmit(model);
-      model.send(input);
+      model.send(model.value);
       event.stopPropagation();
       event.preventDefault();
     }

package/src/components/input/use-chat-commands.tsx

@@ -37,7 +37,9 @@ export function useChatCommands(
   // 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.
@@ -90,7 +92,12 @@ export function useChatCommands(
 
       // 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);
     }
 
@@ -138,7 +145,8 @@ export function useChatCommands(
     autocompleteProps: {
       open,
       options: commands,
-      getOptionLabel: (command: ChatCommand) => command.name,
+      getOptionLabel: (command: ChatCommand | string) =>
+        typeof command === 'string' ? '' : command.name,
       renderOption: (
         defaultProps,
         command: ChatCommand,

package/src/input-model.ts

@@ -9,9 +9,7 @@ import { ISignal, Signal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
 import { IChatContext } from './model';
-import { IAttachment, IUser } from './types';
-
-const WHITESPACE = new Set([' ', '\n', '\t']);
+import { IAttachment, INotebookAttachment, IUser } from './types';
 
 /**
  * The chat input interface.
@@ -320,13 +318,46 @@ export class InputModel implements IInputModel {
    * Add attachment to send with next message.
    */
   addAttachment = (attachment: IAttachment): void => {
+    // Use JSON comparison to detect duplicates (same as in YChat.setAttachment)
+    const attachmentJson = JSON.stringify(attachment);
     const duplicateAttachment = this._attachments.find(
-      att => att.type === attachment.type && att.value === attachment.value
+      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
+        ] as INotebookAttachment;
+        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]);
   };
@@ -335,8 +366,10 @@ export class InputModel implements IInputModel {
    * Remove attachment to be sent.
    */
   removeAttachment = (attachment: IAttachment): void => {
+    // Use JSON comparison to detect duplicates (same as in YChat.setAttachment)
+    const attachmentJson = JSON.stringify(attachment);
     const attachmentIndex = this._attachments.findIndex(
-      att => att.type === attachment.type && att.value === attachment.value
+      att => JSON.stringify(att) === attachmentJson
     );
     if (attachmentIndex === -1) {
       return;
@@ -525,6 +558,18 @@ export namespace InputModel {
 }
 
 namespace 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.
+   */
   export function getCurrentWordBoundaries(
     input: string,
     cursorIndex: number
@@ -533,11 +578,30 @@ namespace Private {
     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++;
     }
 

package/src/types.ts

@@ -14,7 +14,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;
   /**
@@ -82,21 +87,85 @@ export interface INewMessage {
 }
 
 /**
- * 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 path to the file, relative to `ContentsManager.root_dir`.
+   */
+  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 attachment (basically 'file', 'variable', 'image')
+   * The type of the cell.
    */
-  type: string;
+  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;
 }
 
 /**

package/src/utils.ts

@@ -60,9 +60,10 @@ export function replaceMentionToSpan(content: string, user: IUser): string {
   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);
 }
 
 /**
@@ -75,7 +76,8 @@ export function replaceSpanToMention(content: string, user: IUser): string {
   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/src/widgets/chat-widget.tsx

@@ -4,11 +4,32 @@
  */
 
 import { ReactWidget } from '@jupyterlab/apputils';
+import { Cell } from '@jupyterlab/cells';
+import { DirListing } from '@jupyterlab/filebrowser';
+import { ICell, isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
+import { Message } from '@lumino/messaging';
+import { Drag } from '@lumino/dragdrop';
 
 import { Chat, IInputToolbarRegistry } from '../components';
 import { chatIcon } from '../icons';
 import { IChatModel } from '../model';
+import {
+  IFileAttachment,
+  INotebookAttachment,
+  INotebookAttachmentCell
+} from '../types';
+import { ActiveCellManager } from '../active-cell-manager';
+
+// 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: Chat.IOptions) {
@@ -42,5 +63,263 @@ export class ChatWidget extends ReactWidget {
     return <Chat {...this._chatOptions} model={this._chatOptions.model} />;
   }
 
+  /**
+   * Handle DOM events for drag and drop
+   */
+  handleEvent(event: Event): void {
+    // 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 as Node)) {
+          this._removeDragHoverClass();
+        }
+        break;
+      }
+    }
+  }
+
+  /**
+   * A message handler invoked on an `'after-attach'` message.
+   */
+  protected onAfterAttach(msg: Message): void {
+    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.
+   */
+  protected onBeforeDetach(msg: Message): void {
+    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
+   */
+  private _handleDrag(event: Drag.Event): void {
+    const inputContainer = this.node.querySelector(`.${INPUT_CONTAINER_CLASS}`);
+    const target = event.target as HTMLElement;
+    const isOverInput =
+      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 as HTMLElement;
+    }
+  }
+
+  /**
+   * Check if we can handle the drop
+   */
+  private _canHandleDrop(event: Drag.Event): boolean {
+    const types = event.mimeData.types();
+    return (
+      types.includes(NOTEBOOK_CELL_MIME) || types.includes(FILE_BROWSER_MIME)
+    );
+  }
+
+  /**
+   * Handle drop events
+   */
+  private _handleDrop(event: Drag.Event): void {
+    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
+   */
+  private _processFileDrop(event: Drag.Event): void {
+    const data = event.mimeData.getData(
+      FILE_BROWSER_MIME
+    ) as DirListing.IContentsThunk;
+
+    if (!data?.model?.path) {
+      console.warn('Invalid file browser data in drop event');
+      return;
+    }
+
+    const attachment: IFileAttachment = {
+      type: 'file',
+      value: data.model.path,
+      mimetype: data.model.mimetype
+    };
+    this.model.input.addAttachment?.(attachment);
+  }
+
+  /**
+   * Process dropped cells
+   */
+  private _processCellDrop(event: Drag.Event): void {
+    try {
+      const cellData = event.mimeData.getData(NOTEBOOK_CELL_MIME) as ICell[];
+
+      // 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 (!cells[0]?.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: INotebookAttachmentCell[] = [];
+
+      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: 'code' | 'markdown' | 'raw';
+        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: INotebookAttachmentCell = {
+          id: cell.id,
+          input_type: cellType
+        };
+        validCells.push(notebookCell);
+      }
+
+      // Create single attachment with all cells from the notebook
+      if (validCells.length) {
+        const attachment: INotebookAttachment = {
+          type: 'notebook',
+          value: notebookPath,
+          cells: validCells
+        };
+        this.model.input.addAttachment?.(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
+   */
+  private _findNotebookPath(cellId: string): string | null {
+    if (!this.model.input.activeCellManager) {
+      return null;
+    }
+
+    const activeCellManager = this.model.input
+      .activeCellManager as ActiveCellManager;
+    const notebookTracker = (activeCellManager as any)._notebookTracker;
+
+    if (!notebookTracker) {
+      return null;
+    }
+
+    if (notebookTracker.currentWidget) {
+      const currentNotebook = notebookTracker.currentWidget;
+      const cells = currentNotebook.content.widgets;
+      const cellWidget = cells.find((c: Cell) => 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: Cell) => c.model.id === cellId);
+
+      if (cellWidget) {
+        return notebook.context.path;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Remove drag hover class
+   */
+  private _removeDragHoverClass(): void {
+    if (this._dragTarget) {
+      this._dragTarget.classList.remove(DRAG_HOVER_CLASS);
+      this._dragTarget = null;
+    }
+  }
+
   private _chatOptions: Chat.IOptions;
+  private _dragTarget: HTMLElement | null = null;
 }

package/style/chat.css

@@ -201,6 +201,14 @@
 
 .jp-chat-attachments {
   display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  min-height: 1.5em;
+  padding: 8px 0;
+}
+
+.jp-chat-attachments:empty {
+  padding: 8px 0;
   min-height: 1.5em;
 }
 
@@ -211,6 +219,7 @@
   padding: 0 0.3em;
   align-content: center;
   background-color: var(--jp-border-color3);
+  flex-shrink: 0;
 }
 
 .jp-chat-attachment .jp-chat-attachment-clickable:hover {