@jupyter/chat 0.15.0 → 0.17.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/input-model.js

@@ -20,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]);
         };
@@ -31,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;
             }

package/lib/model.d.ts

@@ -419,6 +419,10 @@ export interface IChatContext {
      * A list of all users who have connected to this chat.
      */
     readonly users: IUser[];
+    /**
+     * Current user connected with the chat panel
+     */
+    readonly user: IUser | undefined;
 }
 /**
  * An abstract base class implementing `IChatContext`. This can be extended into
@@ -430,6 +434,7 @@ export declare abstract class AbstractChatContext implements IChatContext {
     });
     get name(): string;
     get messages(): IChatMessage[];
+    get user(): IUser | undefined;
     /**
      * ABSTRACT: Should return a list of users who have connected to this chat.
      */

package/lib/model.js

@@ -435,4 +435,8 @@ export class AbstractChatContext {
     get messages() {
         return [...this._model.messages];
     }
+    get user() {
+        var _a;
+        return (_a = this._model) === null || _a === void 0 ? void 0 : _a.user;
+    }
 }

package/lib/types.d.ts

@@ -9,14 +9,14 @@ export interface IUser {
     color?: string;
     avatar_url?: string;
     /**
-     * The string to use to mention a user in the chat. This is computed via the
-     * following procedure:
+     * 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;
+    mention_name?: string;
     /**
      * Boolean identifying if user is a bot.
      */
@@ -77,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/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.15.0",
+  "version": "0.17.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

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/input-model.ts

@@ -9,7 +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';
+import { IAttachment, INotebookAttachment, IUser } from './types';
 
 /**
  * The chat input interface.
@@ -318,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]);
   };
@@ -333,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;

package/src/model.ts

@@ -784,6 +784,10 @@ export interface IChatContext {
    * A list of all users who have connected to this chat.
    */
   readonly users: IUser[];
+  /**
+   * Current user connected with the chat panel
+   */
+  readonly user: IUser | undefined;
 }
 
 /**
@@ -803,6 +807,10 @@ export abstract class AbstractChatContext implements IChatContext {
     return [...this._model.messages];
   }
 
+  get user(): IUser | undefined {
+    return this._model?.user;
+  }
+
   /**
    * ABSTRACT: Should return a list of users who have connected to this chat.
    */

package/src/types.ts

@@ -14,14 +14,14 @@ export interface IUser {
   color?: string;
   avatar_url?: string;
   /**
-   * The string to use to mention a user in the chat. This is computed via the
-   * following procedure:
+   * 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;
+  mention_name?: string;
   /**
    * Boolean identifying if user is a bot.
    */
@@ -87,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/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

@@ -19,7 +19,6 @@
 }
 
 /*
- *
  * Selectors must be nested in `.jp-ThemedContainer` to have a higher
  * specificity than selectors in rules provided by JupyterLab.
  *
@@ -147,7 +146,6 @@
 }
 
 /* Keyframe animations */
-
 @keyframes jp-chat-typing-bounce {
   0%,
   80%,
@@ -201,6 +199,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 +217,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 {

package/style/input.css

@@ -30,3 +30,45 @@
 .jp-chat-input-toolbar .jp-chat-send-include-opener {
   padding: 4px 0;
 }
+
+.jp-chat-input-container {
+  position: relative;
+  transition: all 150ms ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 56px;
+  padding: 8px 0;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.jp-chat-input-container .MuiTextField-root {
+  padding-bottom: 8px;
+}
+
+.jp-chat-input-container.jp-chat-drag-hover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgb(33 150 243 / 10%);
+  border: 2px dashed var(--jp-brand-color1);
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.jp-chat-input-container.jp-chat-drag-hover::before {
+  content: 'Drop files or cells here';
+  position: absolute;
+  top: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--jp-brand-color1);
+  font-size: 12px;
+  font-weight: 500;
+  pointer-events: none;
+  background: var(--jp-layout-color0);
+  padding: 2px 8px;
+  border-radius: 3px;
+  white-space: nowrap;
+}