jupyterlab-chat 0.14.0 → 0.16.0

package/lib/model.d.ts

@@ -18,7 +18,34 @@ export declare namespace LabChatModel {
     }
 }
 /**
- * The chat model.
+ * A data model class that represents a user and implements the `IUser` interface.
+ * Currently, this just just ensures that `user.mention_name` is always
+ * accessible by defining it as a getter property.
+ *
+ * The constructor accepts an `identity: User.IIdentity | IUser | null` object.
+ * If `identity == null`, this class provides default values for each required
+ * field.
+ *
+ * TODO: should `identity` (from `LabChatModel.IOptions.user`) ever be `null`?
+ *
+ * TODO: should this be lifted up into `packages/jupyter-chat`?
+ */
+declare class LabChatUser implements IUser {
+    constructor(identity: User.IIdentity | IUser | null);
+    get mention_name(): string;
+    toJSON(): this & {
+        mention_name: string;
+    };
+    username: string;
+    name?: string;
+    display_name?: string;
+    initials?: string;
+    color?: string;
+    avatar_url?: string;
+    bot?: boolean;
+}
+/**
+ * The chat document model.
  */
 export declare class LabChatModel extends AbstractChatModel implements DocumentRegistry.IModel {
     constructor(options: LabChatModel.IOptions);
@@ -27,6 +54,7 @@ export declare class LabChatModel extends AbstractChatModel implements DocumentR
     get sharedModel(): YChat;
     get contentChanged(): ISignal<this, void>;
     get stateChanged(): ISignal<this, IChangedArgs<any, any, string>>;
+    get ready(): Promise<void>;
     get dirty(): boolean;
     set dirty(value: boolean);
     get readOnly(): boolean;
@@ -85,5 +113,6 @@ export declare class LabChatContext extends AbstractChatContext {
     /**
      * The list of users who have connected to this chat.
      */
-    get users(): IUser[];
+    get users(): LabChatUser[];
 }
+export {};

package/lib/model.js

@@ -8,7 +8,44 @@ import { Signal } from '@lumino/signaling';
 import { YChat } from './ychat';
 const WRITING_DELAY = 1000;
 /**
- * The chat model.
+ * A data model class that represents a user and implements the `IUser` interface.
+ * Currently, this just just ensures that `user.mention_name` is always
+ * accessible by defining it as a getter property.
+ *
+ * The constructor accepts an `identity: User.IIdentity | IUser | null` object.
+ * If `identity == null`, this class provides default values for each required
+ * field.
+ *
+ * TODO: should `identity` (from `LabChatModel.IOptions.user`) ever be `null`?
+ *
+ * TODO: should this be lifted up into `packages/jupyter-chat`?
+ */
+class LabChatUser {
+    constructor(identity) {
+        var _a;
+        this.username = (_a = identity === null || identity === void 0 ? void 0 : identity.username) !== null && _a !== void 0 ? _a : 'user undefined';
+        this.name = identity === null || identity === void 0 ? void 0 : identity.name;
+        this.display_name = identity === null || identity === void 0 ? void 0 : identity.display_name;
+        this.color = identity === null || identity === void 0 ? void 0 : identity.color;
+        this.avatar_url = identity === null || identity === void 0 ? void 0 : identity.avatar_url;
+        this.initials = identity === null || identity === void 0 ? void 0 : identity.initials;
+        this.bot = !!(identity === null || identity === void 0 ? void 0 : identity.bot) || false;
+    }
+    get mention_name() {
+        let mention_name = this.display_name || this.name || this.username;
+        mention_name = mention_name.replace(/ /g, '-');
+        return mention_name;
+    }
+    toJSON() {
+        const simpleObject = {
+            ...this,
+            mention_name: this.mention_name
+        };
+        return simpleObject;
+    }
+}
+/**
+ * The chat document model.
  */
 export class LabChatModel extends AbstractChatModel {
     constructor(options) {
@@ -81,7 +118,8 @@ export class LabChatModel extends AbstractChatModel {
                             const msg = {
                                 ...baseMessage,
                                 sender: this.sharedModel.getUser(sender) || {
-                                    username: 'User undefined'
+                                    username: 'User undefined',
+                                    mention_name: 'User-undefined'
                                 }
                             };
                             // Add attachments.
@@ -97,8 +135,9 @@ export class LabChatModel extends AbstractChatModel {
                                     msg.attachments = attachments;
                                 }
                             }
-                            const mentions = mentionsIds === null || mentionsIds === void 0 ? void 0 : mentionsIds.map(user => this.sharedModel.getUser(user) || {
-                                username: 'User undefined'
+                            const mentions = (mentionsIds !== null && mentionsIds !== void 0 ? mentionsIds : []).map(user => this.sharedModel.getUser(user) || {
+                                username: 'User undefined',
+                                mention_name: 'User-undefined'
                             });
                             if (mentions === null || mentions === void 0 ? void 0 : mentions.length) {
                                 msg.mentions = mentions;
@@ -140,7 +179,8 @@ export class LabChatModel extends AbstractChatModel {
         this._contentChanged = new Signal(this);
         this._stateChanged = new Signal(this);
         this._timeoutWriting = null;
-        this._user = options.user || { username: 'user undefined' };
+        // initialize current user
+        this._user = new LabChatUser(options.user);
         const { widgetConfig, sharedModel } = options;
         if (sharedModel) {
             this._sharedModel = sharedModel;
@@ -169,6 +209,9 @@ export class LabChatModel extends AbstractChatModel {
     get stateChanged() {
         return this._stateChanged;
     }
+    get ready() {
+        return this._ready.promise;
+    }
     get dirty() {
         return this._dirty;
     }
@@ -317,7 +360,8 @@ export class LabChatModel extends AbstractChatModel {
             if (!user.mention_name) {
                 return;
             }
-            const regex = new RegExp(user.mention_name);
+            const mention = '@' + user.mention_name;
+            const regex = new RegExp(mention);
             if (!regex.exec(body)) {
                 return;
             }
@@ -346,19 +390,25 @@ export class LabChatContext extends AbstractChatContext {
      */
     get users() {
         const model = this._model;
-        const users = new Set();
-        // Get the user list from the shared YChat
-        Object.values(model.sharedModel.users).forEach(userObject => {
-            users.add(userObject);
-        });
-        // Add the users connected to the chat (even if they never sent a message).
+        const users = {};
+        // Add existing users from the YChat
+        // This only includes users who have sent a message in the chat.
+        for (const user of Object.values(model.sharedModel.users)) {
+            users[user.username] = new LabChatUser(user);
+        }
+        // Add users from awareness to include connected users even if they never
+        // sent a message in the chat.
         model.sharedModel.awareness.getStates().forEach(value => {
-            const user = value.user;
-            if (!user) {
+            if (!('user' in value)) {
+                return;
+            }
+            const userObject = value.user;
+            if ((userObject === null || userObject === void 0 ? void 0 : userObject.username) in users) {
                 return;
             }
-            users.add(user);
+            const user = new LabChatUser(value.user);
+            users[user.username] = user;
         });
-        return Array.from(users);
+        return Array.from(Object.values(users));
     }
 }

package/lib/widget.js

@@ -5,7 +5,7 @@
 import { ChatWidget, readIcon } from '@jupyter/chat';
 import { PathExt } from '@jupyterlab/coreutils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
-import { addIcon, closeIcon, CommandToolbarButton, HTMLSelect, launchIcon, PanelWithToolbar, ReactWidget, SidePanel, ToolbarButton } from '@jupyterlab/ui-components';
+import { addIcon, closeIcon, CommandToolbarButton, HTMLSelect, launchIcon, PanelWithToolbar, ReactWidget, SidePanel, Spinner, ToolbarButton } from '@jupyterlab/ui-components';
 import { Signal } from '@lumino/signaling';
 import React, { useState } from 'react';
 import { CommandIDs, chatFileType } from './token';
@@ -252,7 +252,9 @@ class ChatSection extends PanelWithToolbar {
             this._markAsRead.enabled = unread.length > 0;
             // this.title.label = `${unread.length ? '* ' : ''}${this._name}`;
         };
+        this._spinner = new Spinner();
         this.addWidget(options.widget);
+        this.addWidget(this._spinner);
         this.addClass(SECTION_CLASS);
         this._defaultDirectory = options.defaultDirectory;
         this._path = options.path;
@@ -291,6 +293,13 @@ class ChatSection extends PanelWithToolbar {
         (_a = this.model.unreadChanged) === null || _a === void 0 ? void 0 : _a.connect(this._unreadChanged);
         this._markAsRead.enabled = this.model.unreadMessages.length > 0;
         options.widget.node.style.height = '100%';
+        /**
+         * Remove the spinner when the chat is ready.
+         */
+        const model = this.model;
+        model.ready.then(() => {
+            this._spinner.dispose();
+        });
     }
     /**
      * The path of the chat.

package/lib/ychat.d.ts

@@ -71,13 +71,22 @@ export declare class YChat extends YDocument<IChatChanges> {
     getSource(): JSONObject;
     setSource(value: JSONObject): void;
     getUser(username: string | undefined): IUser | undefined;
-    setUser(value: IUser): void;
+    setUser(user: IUser): void;
     getMessage(index: number): IYmessage | undefined;
     addMessage(value: IYmessage): void;
     updateMessage(index: number, value: IYmessage): void;
     getMessageIndex(id: string): number;
     deleteMessage(index: number): void;
     getAttachment(id: string): IAttachment | undefined;
+    /**
+     * Adds or modifies an attachment in the chat, and returns the ID of the
+     * attachment.
+     *
+     * NOTE: this method does not add an attachment to any message. It merely adds
+     * the attachment data to the chat file and returns an attachment ID. To add
+     * an attachment to a new message, consumers should call this method & add the
+     * returned ID to `NewMessage.attachments`.
+     */
     setAttachment(attachment: IAttachment): string;
     private _usersObserver;
     private _messagesObserver;

package/lib/ychat.js

@@ -177,9 +177,13 @@ export class YChat extends YDocument {
         }
         return this._users.get(username);
     }
-    setUser(value) {
+    setUser(user) {
         this.transact(() => {
-            this._users.set(value.username, value);
+            // call `toJSON()` if the method exists on `user`
+            if ('toJSON' in user && typeof user.toJSON === 'function') {
+                user = user.toJSON();
+            }
+            this._users.set(user.username, user);
         });
     }
     getMessage(index) {
@@ -207,10 +211,28 @@ export class YChat extends YDocument {
     getAttachment(id) {
         return this._attachments.get(id);
     }
+    /**
+     * Adds or modifies an attachment in the chat, and returns the ID of the
+     * attachment.
+     *
+     * NOTE: this method does not add an attachment to any message. It merely adds
+     * the attachment data to the chat file and returns an attachment ID. To add
+     * an attachment to a new message, consumers should call this method & add the
+     * returned ID to `NewMessage.attachments`.
+     */
     setAttachment(attachment) {
-        var _a;
-        // Search if the attachment already exist to update it, otherwise add it.
-        const id = ((_a = Array.from(this._attachments.entries()).find(([_, att]) => att.type === attachment.type && att.value === attachment.value)) === null || _a === void 0 ? void 0 : _a[0]) || UUID.uuid4();
+        // Use the existing ID if the attachment already exists, otherwise create a
+        // new ID
+        const attachmentJson = JSON.stringify(attachment);
+        let existingId;
+        for (const [id, att] of this._attachments.entries()) {
+            if (JSON.stringify(att) === attachmentJson) {
+                existingId = id;
+                break;
+            }
+        }
+        const id = existingId || UUID.uuid4();
+        // Set the attachment using the computed ID, then return the ID
         this.transact(() => {
             this._attachments.set(id, attachment);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-chat",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "The library to build a chat based on shared document",
   "keywords": [
     "jupyter",
@@ -42,7 +42,7 @@
     "watch:src": "tsc -w --sourceMap"
   },
   "dependencies": {
-    "@jupyter/chat": "^0.14.0",
+    "@jupyter/chat": "^0.16.0",
     "@jupyter/collaborative-drive": "^4.0.2",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
     "@jupyterlab/application": "^4.2.0",

package/src/model.ts

@@ -38,7 +38,54 @@ export namespace LabChatModel {
 }
 
 /**
- * The chat model.
+ * A data model class that represents a user and implements the `IUser` interface.
+ * Currently, this just just ensures that `user.mention_name` is always
+ * accessible by defining it as a getter property.
+ *
+ * The constructor accepts an `identity: User.IIdentity | IUser | null` object.
+ * If `identity == null`, this class provides default values for each required
+ * field.
+ *
+ * TODO: should `identity` (from `LabChatModel.IOptions.user`) ever be `null`?
+ *
+ * TODO: should this be lifted up into `packages/jupyter-chat`?
+ */
+class LabChatUser implements IUser {
+  constructor(identity: User.IIdentity | IUser | null) {
+    this.username = identity?.username ?? 'user undefined';
+    this.name = identity?.name;
+    this.display_name = identity?.display_name;
+    this.color = identity?.color;
+    this.avatar_url = identity?.avatar_url;
+    this.initials = identity?.initials;
+    this.bot = !!identity?.bot || false;
+  }
+
+  get mention_name(): string {
+    let mention_name = this.display_name || this.name || this.username;
+    mention_name = mention_name.replace(/ /g, '-');
+    return mention_name;
+  }
+
+  toJSON() {
+    const simpleObject = {
+      ...this,
+      mention_name: this.mention_name
+    };
+    return simpleObject;
+  }
+
+  username: string;
+  name?: string;
+  display_name?: string;
+  initials?: string;
+  color?: string;
+  avatar_url?: string;
+  bot?: boolean;
+}
+
+/**
+ * The chat document model.
  */
 export class LabChatModel
   extends AbstractChatModel
@@ -47,7 +94,8 @@ export class LabChatModel
   constructor(options: LabChatModel.IOptions) {
     super(options);
 
-    this._user = options.user || { username: 'user undefined' };
+    // initialize current user
+    this._user = new LabChatUser(options.user);
 
     const { widgetConfig, sharedModel } = options;
 
@@ -89,6 +137,10 @@ export class LabChatModel
     return this._stateChanged;
   }
 
+  get ready(): Promise<void> {
+    return this._ready.promise;
+  }
+
   get dirty(): boolean {
     return this._dirty;
   }
@@ -331,7 +383,8 @@ export class LabChatModel
       if (!user.mention_name) {
         return;
       }
-      const regex = new RegExp(user.mention_name);
+      const mention = '@' + user.mention_name;
+      const regex = new RegExp(mention);
       if (!regex.exec(body)) {
         return;
       }
@@ -373,7 +426,8 @@ export class LabChatModel
             const msg: IChatMessage = {
               ...baseMessage,
               sender: this.sharedModel.getUser(sender) || {
-                username: 'User undefined'
+                username: 'User undefined',
+                mention_name: 'User-undefined'
               }
             };
 
@@ -391,10 +445,11 @@ export class LabChatModel
               }
             }
 
-            const mentions = mentionsIds?.map(
+            const mentions: IUser[] = (mentionsIds ?? []).map(
               user =>
                 this.sharedModel.getUser(user) || {
-                  username: 'User undefined'
+                  username: 'User undefined',
+                  mention_name: 'User-undefined'
                 }
             );
 
@@ -454,24 +509,30 @@ export class LabChatContext extends AbstractChatContext {
   /**
    * The list of users who have connected to this chat.
    */
-  get users(): IUser[] {
+  get users(): LabChatUser[] {
     const model = this._model as LabChatModel;
-    const users = new Set<IUser>();
+    const users: Record<string, LabChatUser> = {};
 
-    // Get the user list from the shared YChat
-    Object.values(model.sharedModel.users).forEach(userObject => {
-      users.add(userObject);
-    });
+    // Add existing users from the YChat
+    // This only includes users who have sent a message in the chat.
+    for (const user of Object.values(model.sharedModel.users)) {
+      users[user.username] = new LabChatUser(user);
+    }
 
-    // Add the users connected to the chat (even if they never sent a message).
+    // Add users from awareness to include connected users even if they never
+    // sent a message in the chat.
     model.sharedModel.awareness.getStates().forEach(value => {
-      const user = value.user as IUser;
-      if (!user) {
+      if (!('user' in value)) {
+        return;
+      }
+      const userObject = value.user as IUser;
+      if (userObject?.username in users) {
         return;
       }
-      users.add(user);
+      const user = new LabChatUser(value.user as IUser);
+      users[user.username] = user;
     });
 
-    return Array.from(users);
+    return Array.from(Object.values(users));
   }
 }

package/src/widget.tsx

@@ -26,6 +26,7 @@ import {
   PanelWithToolbar,
   ReactWidget,
   SidePanel,
+  Spinner,
   ToolbarButton
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
@@ -343,6 +344,7 @@ class ChatSection extends PanelWithToolbar {
     super(options);
 
     this.addWidget(options.widget);
+    this.addWidget(this._spinner);
 
     this.addClass(SECTION_CLASS);
     this._defaultDirectory = options.defaultDirectory;
@@ -389,6 +391,14 @@ class ChatSection extends PanelWithToolbar {
     this._markAsRead.enabled = this.model.unreadMessages.length > 0;
 
     options.widget.node.style.height = '100%';
+
+    /**
+     * Remove the spinner when the chat is ready.
+     */
+    const model = this.model as LabChatModel;
+    model.ready.then(() => {
+      this._spinner.dispose();
+    });
   }
 
   /**
@@ -458,6 +468,7 @@ class ChatSection extends PanelWithToolbar {
   private _defaultDirectory: string;
   private _markAsRead: ToolbarButton;
   private _path: string;
+  private _spinner = new Spinner();
 }
 
 /**

package/src/ychat.ts

@@ -156,9 +156,13 @@ export class YChat extends YDocument<IChatChanges> {
     return this._users.get(username);
   }
 
-  setUser(value: IUser): void {
+  setUser(user: IUser): void {
     this.transact(() => {
-      this._users.set(value.username, value);
+      // call `toJSON()` if the method exists on `user`
+      if ('toJSON' in user && typeof user.toJSON === 'function') {
+        user = user.toJSON();
+      }
+      this._users.set(user.username, user);
     });
   }
 
@@ -193,14 +197,29 @@ export class YChat extends YDocument<IChatChanges> {
     return this._attachments.get(id);
   }
 
+  /**
+   * Adds or modifies an attachment in the chat, and returns the ID of the
+   * attachment.
+   *
+   * NOTE: this method does not add an attachment to any message. It merely adds
+   * the attachment data to the chat file and returns an attachment ID. To add
+   * an attachment to a new message, consumers should call this method & add the
+   * returned ID to `NewMessage.attachments`.
+   */
   setAttachment(attachment: IAttachment): string {
-    // Search if the attachment already exist to update it, otherwise add it.
-    const id =
-      Array.from(this._attachments.entries()).find(
-        ([_, att]) =>
-          att.type === attachment.type && att.value === attachment.value
-      )?.[0] || UUID.uuid4();
+    // Use the existing ID if the attachment already exists, otherwise create a
+    // new ID
+    const attachmentJson = JSON.stringify(attachment);
+    let existingId: string | undefined;
+    for (const [id, att] of this._attachments.entries()) {
+      if (JSON.stringify(att) === attachmentJson) {
+        existingId = id;
+        break;
+      }
+    }
+    const id = existingId || UUID.uuid4();
 
+    // Set the attachment using the computed ID, then return the ID
     this.transact(() => {
       this._attachments.set(id, attachment);
     });