adding support for drag and drop in all editons and main input area

Author: nakul-py

packages/jupyter-chat/src/input-model.ts

@@ -117,9 +117,14 @@ export interface IInputModel extends IDisposable {
   clearAttachments(): void;
 
   /**
-   * If the user is editing a message, this points to the active edition input model.
+   * The input node.
    */
-  currentEdition?: IInputModel;
+  node?: HTMLElement;
+
+  /**
+   * If the user is editing messages, this tracks all active edition input models.
+   */
+  activeEditions: IInputModel[];
 
   /**
    * A signal emitting when the attachment list has changed.
@@ -201,6 +206,11 @@ export class InputModel implements IInputModel {
    */
   cancel: (() => void) | undefined;
 
+  /**
+   * If the user is editing messages, this tracks all active edition input models.
+   */
+  activeEditions: IInputModel[] = [];
+
   /**
    * The entire input value.
    */

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

@@ -122,12 +122,19 @@ export class ChatWidget extends ReactWidget {
    * Handle drag over events
    */
   private _handleDrag(event: Drag.Event): void {
-    const inputContainer = this.node.querySelector(`.${INPUT_CONTAINER_CLASS}`);
+    const inputContainers = this.node.querySelectorAll<HTMLElement>(
+      `.${INPUT_CONTAINER_CLASS}`
+    );
     const target = event.target as HTMLElement;
-    const isOverInput =
-      inputContainer?.contains(target) || inputContainer === target;
+    let overInput: HTMLElement | null = null;
+    for (const container of inputContainers) {
+      if (container.contains(target)) {
+        overInput = container;
+        break;
+      }
+    }
 
-    if (!isOverInput) {
+    if (!overInput) {
       this._removeDragHoverClass();
       return;
     }
@@ -140,12 +147,9 @@ export class ChatWidget extends ReactWidget {
     event.stopPropagation();
     event.dropAction = 'move';
 
-    if (
-      inputContainer &&
-      !inputContainer.classList.contains(DRAG_HOVER_CLASS)
-    ) {
-      inputContainer.classList.add(DRAG_HOVER_CLASS);
-      this._dragTarget = inputContainer as HTMLElement;
+    if (!overInput.classList.contains(DRAG_HOVER_CLASS)) {
+      overInput.classList.add(DRAG_HOVER_CLASS);
+      this._dragTarget = overInput;
     }
   }
 
@@ -184,8 +188,15 @@ export class ChatWidget extends ReactWidget {
     }
   }
 
-  private _getActiveInput(): IInputModel {
-    return this.model.input.currentEdition ?? this.model.input;
+  private _getTargetInput(event: Drag.Event): IInputModel {
+    const target = event.target as HTMLElement;
+
+    for (const edition of this.model.input.activeEditions ?? []) {
+      if (edition.node && edition.node.contains(target)) {
+        return edition;
+      }
+    }
+    return this.model.input;
   }
 
   /**
@@ -206,7 +217,7 @@ export class ChatWidget extends ReactWidget {
       value: data.model.path,
       mimetype: data.model.mimetype
     };
-    const activeInput = this._getActiveInput();
+    const activeInput = this._getTargetInput(event);
     activeInput.addAttachment?.(attachment);
   }
 
@@ -269,7 +280,7 @@ export class ChatWidget extends ReactWidget {
           value: notebookPath,
           cells: validCells
         };
-        const activeInput = this._getActiveInput();
+        const activeInput = this._getTargetInput(event);
         activeInput.addAttachment?.(attachment);
       }
     } catch (error) {

packages/jupyterlab-chat/src/model.ts

@@ -336,10 +336,12 @@ export class LabChatModel
 
       edition.model.valueChanged.connect(_onInputChanged);
 
-      this.input.currentEdition = edition.model;
+      this.input.activeEditions.push(edition.model);
 
       edition.model.onDisposed.connect(() => {
-        this.input.currentEdition = undefined;
+        this.input.activeEditions = this.input.activeEditions.filter(
+          (e: IInputModel) => e !== edition.model
+        );
       });
     }
   };