Improve file event handling in side panel (#260)

* Dispose of the chat widget in side panel if the file is deleted

* Fix ui tests

* lint

---------

Co-authored-by: Andrii Ieroshenko <[email protected]>

Author: brichet

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

packages/jupyter-chat/style/input.css

@@ -41,17 +41,15 @@
   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;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background: rgb(33 150 243 / 10%);
   border: 2px dashed var(--jp-brand-color1);
   border-radius: 4px;

packages/jupyterlab-chat-extension/src/index.ts

@@ -760,23 +760,6 @@ const chatPanel: JupyterFrontEndPlugin<ChatPanel> = {
       restorer.add(chatPanel, 'jupyter-chat');
     }
 
-    // Use events system to watch changes on files, and update the chat list if a chat
-    // file has been created, deleted or renamed.
-    const schemaID =
-      'https://events.jupyter.org/jupyter_server/contents_service/v1';
-    const actions = ['create', 'delete', 'rename'];
-    app.serviceManager.events.stream.connect((_, emission) => {
-      if (emission.schema_id === schemaID) {
-        const action = emission.action as string;
-        if (
-          actions.includes(action) &&
-          (emission.path as string).endsWith(chatFileType.extensions[0])
-        ) {
-          chatPanel.updateChatList();
-        }
-      }
-    });
-
     /*
      * Command to move a chat from the main area to the side panel.
      */

packages/jupyterlab-chat/src/widget.tsx

@@ -137,6 +137,24 @@ export class ChatPanel extends SidePanel {
 
     const content = this.content as AccordionPanel;
     content.expansionToggled.connect(this._onExpansionToggled, this);
+
+    this._contentsManager.fileChanged.connect((_, args) => {
+      if (args.type === 'delete') {
+        this.widgets.forEach(widget => {
+          if ((widget as ChatSection).path === args.oldValue?.path) {
+            widget.dispose();
+          }
+        });
+        this.updateChatList();
+      }
+      const updateActions = ['new', 'rename'];
+      if (
+        updateActions.includes(args.type) &&
+        args.newValue?.path?.endsWith(chatFileType.extensions[0])
+      ) {
+        this.updateChatList();
+      }
+    });
   }
 
   /**
@@ -236,9 +254,9 @@ export class ChatPanel extends SidePanel {
   }
 
   /**
-   * A message handler invoked on an `'after-show'` message.
+   * A message handler invoked on an `'after-attach'` message.
    */
-  protected onAfterShow(msg: Message): void {
+  protected onAfterAttach(msg: Message): void {
     // Wait for the component to be rendered.
     this._openChat.renderPromise?.then(() => this.updateChatList());
   }

ui-tests/tests/side-panel.spec.ts

@@ -142,13 +142,19 @@ test.describe('#sidepanel', () => {
   });
 
   test.describe('#openingClosing', () => {
+    test.use({ autoGoto: false });
+
     const name = FILENAME.replace('.chat', '');
     const NEW_DIR = 'chats_dir';
     let panel: Locator;
     let select: Locator;
 
     test.beforeEach(async ({ page }) => {
       await page.filebrowser.contents.uploadContent('{}', 'text', FILENAME);
+      await page.waitForCondition(
+        async () => await page.filebrowser.contents.fileExists(FILENAME)
+      );
+      await page.goto();
     });
 
     test.afterEach(async ({ page }) => {