Create chat message attachments via drag-and-drop from files, notebook cells (#248)

* dragndrop cells, files into chat as attachments

* use JSON comparison to detect duplicates

* use updated types INotebookAttachment, INotebookAttachmentCell

* use PathExt for filepaths manipulation

* add a notebook to attachmet opener registry

* ensure that attachment keys are unique

* replace Array.from().find() with direct iterator loop

* Fix attachment chips / pills component layout with padding and horizontal scroll

* update navigation top icon snapshot (1px differnece)

* merge cells from same notebook added via multiple drags into the same attachment

* fix input container drag hover effect during attachment addition

* fix input container and attachemtns vertical spacing and centering

* Implement nit suggestions

* update snapshot

* use @lumino/dragdrop Drag.Event instead of depreciated IDragEvent

* Update packages/jupyter-chat/src/widgets/chat-widget.tsx

Co-authored-by: David L. Qiu <[email protected]>

* remove unneeded type casting

* use  DirListing.IContentsThunk type for file drop instead of any

* Update packages/jupyter-chat/src/widgets/chat-widget.tsx

Co-authored-by: David L. Qiu <[email protected]>

* Update packages/jupyter-chat/src/widgets/chat-widget.tsx

Co-authored-by: David L. Qiu <[email protected]>

* use JupyterLab interfaces for file and cell drag data instead of `any`

* use JupyterLab type guards and early returns in _findNotebookPath

* calculate `notebookPath` once, trust that all cells are from the same notebook

---------

Co-authored-by: David L. Qiu <[email protected]>

Author: andrii-i

packages/jupyter-chat/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

packages/jupyter-chat/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)'
         }}

packages/jupyter-chat/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;