Buttons to mark chat as read

packages/jupyter-chat/src/components/chat-messages.tsx

@@ -475,6 +475,13 @@ export function Navigation(props: NavigationProps): JSX.Element {
 
     unreadChanged(model, model.unreadMessages);
 
+    // Move to first the unread message or to last message on first rendering.
+    if (model.unreadMessages.length) {
+      gotoMessage(Math.min(...model.unreadMessages));
+    } else {
+      gotoMessage(model.messages.length - 1);
+    }
+
     return () => {
       model.unreadChanged?.disconnect(unreadChanged);
     };

packages/jupyter-chat/src/components/scroll-container.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, SxProps, Theme } from '@mui/material';
 
 type ScrollContainerProps = {
@@ -32,30 +32,6 @@ export function ScrollContainer(props: ScrollContainerProps): JSX.Element {
     []
   );
 
-  /**
-   * Effect: Scroll the container to the bottom as soon as it is visible.
-   */
-  useEffect(() => {
-    const el = document.querySelector<HTMLElement>(`#${id}`);
-    if (!el) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            el.scroll({ top: 999999999 });
-          }
-        });
-      },
-      { threshold: 1.0 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
   return (
     <Box
       id={id}

packages/jupyter-chat/src/icons.ts

@@ -8,8 +8,14 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import chatSvgStr from '../style/icons/chat.svg';
+import readSvgStr from '../style/icons/read.svg';
 
 export const chatIcon = new LabIcon({
   name: 'jupyter-chat::chat',
   svgstr: chatSvgStr
 });
+
+export const readIcon = new LabIcon({
+  name: 'jupyter-chat::read',
+  svgstr: readSvgStr
+});

packages/jupyterlab-collaborative-chat/schema/chat-panel.json

@@ -7,6 +7,10 @@
       {
         "name": "moveToSide",
         "command": "collaborative-chat:moveToSide"
+      },
+      {
+        "name": "markAsRead",
+        "command": "collaborative-chat:markAsRead"
       }
     ]
   },

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

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { chatIcon } from '@jupyter/chat';
+import { chatIcon, readIcon } from '@jupyter/chat';
 import { ICollaborativeDrive } from '@jupyter/docprovider';
 import {
   ILayoutRestorer,
@@ -197,6 +197,11 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
         tracker.save(widget);
       });
       tracker.add(widget);
+
+      // Update the 'markAsRead' command status when the unread changed.
+      widget.model.unreadChanged.connect(() =>
+        app.commands.notifyCommandChanged(CommandIDs.markAsRead)
+      );
     });
 
     // Registering the widget factory
@@ -234,8 +239,7 @@ const chatCommands: JupyterFrontEndPlugin<void> = {
     launcher: ILauncher | null
   ) => {
     const { commands } = app;
-    const { widgetConfig } = factory;
-
+    const { tracker, widgetConfig } = factory;
     /**
      * Command to create a new chat.
      *
@@ -340,6 +344,36 @@ const chatCommands: JupyterFrontEndPlugin<void> = {
       });
     }
 
+    // The command to mark the chat as read.
+    commands.addCommand(CommandIDs.markAsRead, {
+      caption: 'Mark chat as read',
+      icon: readIcon,
+      isEnabled: () =>
+        tracker.currentWidget !== null &&
+        tracker.currentWidget === app.shell.currentWidget &&
+        tracker.currentWidget.model.unreadMessages.length > 0,
+      execute: async args => {
+        const widget = app.shell.currentWidget;
+        // Ensure widget is a CollaborativeChatPanel and is in main area
+        if (
+          !widget ||
+          !(widget instanceof CollaborativeChatPanel) ||
+          !Array.from(app.shell.widgets('main')).includes(widget)
+        ) {
+          console.error(
+            `The command '${CommandIDs.markAsRead}' should be executed from the toolbar button only`
+          );
+          return;
+        }
+        widget.model.unreadMessages = [];
+      }
+    });
+
+    // Update the 'markAsRead' command status when the current widget changes.
+    tracker.currentChanged.connect(() => {
+      commands.notifyCommandChanged(CommandIDs.markAsRead);
+    });
+
     app.serviceManager.ready
       .then(() => {
         const user = app.serviceManager.user.identity;

packages/jupyterlab-collaborative-chat/src/token.ts

@@ -80,7 +80,11 @@ export const CommandIDs = {
   /**
    * Move a main widget to the side panel
    */
-  moveToSide: 'collaborative-chat:moveToSide'
+  moveToSide: 'collaborative-chat:moveToSide',
+  /**
+   * Mark as read.
+   */
+  markAsRead: 'collaborative-chat:markAsRead'
 };
 
 /**

packages/jupyterlab-collaborative-chat/src/widget.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { ChatWidget, IChatModel, IConfig } from '@jupyter/chat';
+import { ChatWidget, IChatModel, IConfig, readIcon } from '@jupyter/chat';
 import { ICollaborativeDrive } from '@jupyter/docprovider';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
@@ -263,6 +263,13 @@ class ChatSection extends PanelWithToolbar {
     this.title.caption = this._name;
     this.toolbar.addClass(TOOLBAR_CLASS);
 
+    this._markAsRead = new ToolbarButton({
+      icon: readIcon,
+      iconLabel: 'Mark chat as read',
+      className: 'jp-mod-styled',
+      onClick: () => (this.model.unreadMessages = [])
+    });
+
     const moveToMain = new ToolbarButton({
       icon: launchIcon,
       iconLabel: 'Move the chat to the main area',
@@ -285,13 +292,17 @@ class ChatSection extends PanelWithToolbar {
         this.dispose();
       }
     });
-    this.toolbar.addItem('collaborativeChat-main', moveToMain);
+
+    this.toolbar.addItem('collaborativeChat-markRead', this._markAsRead);
+    this.toolbar.addItem('collaborativeChat-moveMain', moveToMain);
     this.toolbar.addItem('collaborativeChat-close', closeButton);
 
     this.addWidget(options.widget);
 
     this.model.unreadChanged?.connect(this._unreadChanged);
 
+    this._markAsRead.enabled = this.model.unreadMessages.length > 0;
+
     options.widget.node.style.height = '100%';
   }
 
@@ -326,10 +337,12 @@ class ChatSection extends PanelWithToolbar {
    * time.
    */
   private _unreadChanged = (_: IChatModel, unread: number[]) => {
+    this._markAsRead.enabled = unread.length > 0;
     // this.title.label = `${unread.length ? '* ' : ''}${this._name}`;
   };
 
   private _name: string;
+  private _markAsRead: ToolbarButton;
 }
 
 /**