Display user writing notification when editing a message (#208)

* Send the message ID in the writer state when the user edit a message

* Add test on typing notification when editing a message

* Allow several editions in a chat

* Dispose of the message edition input model when sending the message

* Keep the writer list in the model and emit the signal only if the list changed

* Update docstring

Author: brichet

packages/jupyter-chat/package.json

@@ -54,6 +54,7 @@
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
+    "@lumino/algorithm": "^2.0.0",
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/disposable": "^2.0.0",

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

@@ -111,8 +111,8 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
       setMessages([...model.messages]);
     }
 
-    function handleWritersChange(_: IChatModel, writers: IUser[]) {
-      setCurrentWriters(writers);
+    function handleWritersChange(_: IChatModel, writers: IChatModel.IWriter[]) {
+      setCurrentWriters(writers.map(writer => writer.user));
     }
 
     model.messagesUpdated.connect(handleChatEvents);
@@ -381,10 +381,10 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
     const [canDelete, setCanDelete] = useState<boolean>(false);
-    const [inputModel, setInputModel] = useState<IInputModel | null>(null);
 
     // Look if the message can be deleted or edited.
     useEffect(() => {
+      // Init canDelete and canEdit state.
       setDeleted(message.deleted ?? false);
       if (model.user !== undefined && !message.deleted) {
         if (model.user.username === message.sender.username) {
@@ -402,36 +402,36 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     }, [model, message]);
 
     // Create an input model only if the message is edited.
-    useEffect(() => {
-      if (edit && canEdit) {
-        setInputModel(() => {
-          let body = message.body;
-          message.mentions?.forEach(user => {
-            body = replaceSpanToMention(body, user);
-          });
-          return new InputModel({
-            chatContext: model.createChatContext(),
-            onSend: (input: string, model?: IInputModel) =>
-              updateMessage(message.id, input, model),
-            onCancel: () => cancelEdition(),
-            value: body,
-            activeCellManager: model.activeCellManager,
-            selectionWatcher: model.selectionWatcher,
-            documentManager: model.documentManager,
-            config: {
-              sendWithShiftEnter: model.config.sendWithShiftEnter
-            },
-            attachments: message.attachments,
-            mentions: message.mentions
-          });
-        });
-      } else {
-        setInputModel(null);
+    const startEdition = (): void => {
+      if (!canEdit) {
+        return;
       }
-    }, [edit]);
+      let body = message.body;
+      message.mentions?.forEach(user => {
+        body = replaceSpanToMention(body, user);
+      });
+      const inputModel = new InputModel({
+        chatContext: model.createChatContext(),
+        onSend: (input: string, model?: IInputModel) =>
+          updateMessage(message.id, input, model),
+        onCancel: () => cancelEdition(),
+        value: body,
+        activeCellManager: model.activeCellManager,
+        selectionWatcher: model.selectionWatcher,
+        documentManager: model.documentManager,
+        config: {
+          sendWithShiftEnter: model.config.sendWithShiftEnter
+        },
+        attachments: message.attachments,
+        mentions: message.mentions
+      });
+      model.addEditionModel(message.id, inputModel);
+      setEdit(true);
+    };
 
     // Cancel the current edition of the message.
     const cancelEdition = (): void => {
+      model.getEditionModel(message.id)?.dispose();
       setEdit(false);
     };
 
@@ -450,6 +450,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       updatedMessage.attachments = inputModel.attachments;
       updatedMessage.mentions = inputModel.mentions;
       model.updateMessage!(id, updatedMessage);
+      model.getEditionModel(message.id)?.dispose();
       setEdit(false);
     };
 
@@ -466,10 +467,10 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       <div ref={ref} data-index={props.index}></div>
     ) : (
       <div ref={ref} data-index={props.index}>
-        {edit && canEdit && inputModel ? (
+        {edit && canEdit && model.getEditionModel(message.id) ? (
           <ChatInput
             onCancel={() => cancelEdition()}
-            model={inputModel}
+            model={model.getEditionModel(message.id)!}
             chatCommandRegistry={props.chatCommandRegistry}
             toolbarRegistry={props.inputToolbarRegistry}
           />
@@ -478,7 +479,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             rmRegistry={rmRegistry}
             markdownStr={message.body}
             model={model}
-            edit={canEdit ? () => setEdit(true) : undefined}
+            edit={canEdit ? startEdition : undefined}
             delete={canDelete ? () => deleteMessage(message.id) : undefined}
             rendered={props.renderedPromise}
           />

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

@@ -147,6 +147,11 @@ export interface IInputModel extends IDisposable {
    * Clear mentions list.
    */
   clearMentions(): void;
+
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  readonly onDisposed: ISignal<InputModel, void>;
 }
 
 /**
@@ -411,9 +416,17 @@ export class InputModel implements IInputModel {
     if (this.isDisposed) {
       return;
     }
+    this._onDisposed.emit();
     this._isDisposed = true;
   }
 
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  get onDisposed(): ISignal<InputModel, void> {
+    return this._onDisposed;
+  }
+
   /**
    * Whether the input model is disposed.
    */
@@ -438,6 +451,7 @@ export class InputModel implements IInputModel {
   private _configChanged = new Signal<IInputModel, InputModel.IConfig>(this);
   private _focusInputSignal = new Signal<InputModel, void>(this);
   private _attachmentsChanged = new Signal<InputModel, IAttachment[]>(this);
+  private _onDisposed = new Signal<InputModel, void>(this);
   private _isDisposed = false;
 }
 

packages/jupyter-chat/src/model.ts

@@ -4,6 +4,7 @@
  */
 
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import { ArrayExt } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
@@ -59,6 +60,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly input: IInputModel;
 
+  /**
+   * The current writer list.
+   */
+  readonly writers: IChatModel.IWriter[];
+
   /**
    * Get the active cell manager.
    */
@@ -82,7 +88,7 @@ export interface IChatModel extends IDisposable {
   /**
    * A signal emitting when the messages list is updated.
    */
-  get configChanged(): ISignal<IChatModel, IConfig>;
+  readonly configChanged: ISignal<IChatModel, IConfig>;
 
   /**
    * A signal emitting when unread messages change.
@@ -97,7 +103,12 @@ export interface IChatModel extends IDisposable {
   /**
    * A signal emitting when the writers change.
    */
-  readonly writersChanged?: ISignal<IChatModel, IUser[]>;
+  readonly writersChanged?: ISignal<IChatModel, IChatModel.IWriter[]>;
+
+  /**
+   * A signal emitting when the message edition input changed change.
+   */
+  readonly messageEditionAdded: ISignal<IChatModel, IChatModel.IMessageEdition>;
 
   /**
    * Send a message, to be defined depending on the chosen technology.
@@ -172,12 +183,22 @@ export interface IChatModel extends IDisposable {
   /**
    * Update the current writers list.
    */
-  updateWriters(writers: IUser[]): void;
+  updateWriters(writers: IChatModel.IWriter[]): void;
 
   /**
    * Create the chat context that will be passed to the input model.
    */
   createChatContext(): IChatContext;
+
+  /**
+   * Get the input model of the edited message, given its id.
+   */
+  getEditionModel(messageID: string): IInputModel | undefined;
+
+  /**
+   * Add an input model of the edited message.
+   */
+  addEditionModel(messageID: string, inputModel: IInputModel): void;
 }
 
 /**
@@ -256,6 +277,13 @@ export abstract class AbstractChatModel implements IChatModel {
     return this._inputModel;
   }
 
+  /**
+   * The current writer list.
+   */
+  get writers(): IChatModel.IWriter[] {
+    return this._writers;
+  }
+
   /**
    * Get the active cell manager.
    */
@@ -418,10 +446,17 @@ export abstract class AbstractChatModel implements IChatModel {
   /**
    * A signal emitting when the writers change.
    */
-  get writersChanged(): ISignal<IChatModel, IUser[]> {
+  get writersChanged(): ISignal<IChatModel, IChatModel.IWriter[]> {
     return this._writersChanged;
   }
 
+  /**
+   * A signal emitting when the message edition input changed change.
+   */
+  get messageEditionAdded(): ISignal<IChatModel, IChatModel.IMessageEdition> {
+    return this._messageEditionAdded;
+  }
+
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -546,15 +581,47 @@ export abstract class AbstractChatModel implements IChatModel {
    * Update the current writers list.
    * This implementation only propagate the list via a signal.
    */
-  updateWriters(writers: IUser[]): void {
-    this._writersChanged.emit(writers);
+  updateWriters(writers: IChatModel.IWriter[]): void {
+    const compareWriters = (a: IChatModel.IWriter, b: IChatModel.IWriter) => {
+      return (
+        a.user.username === b.user.username &&
+        a.user.display_name === b.user.display_name &&
+        a.messageID === b.messageID
+      );
+    };
+    if (!ArrayExt.shallowEqual(this._writers, writers, compareWriters)) {
+      this._writers = writers;
+      this._writersChanged.emit(writers);
+    }
   }
 
   /**
    * Create the chat context that will be passed to the input model.
    */
   abstract createChatContext(): IChatContext;
 
+  /**
+   * Get the input model of the edited message, given its id.
+   */
+  getEditionModel(messageID: string): IInputModel | undefined {
+    return this._messageEditions.get(messageID);
+  }
+
+  /**
+   * Add an input model of the edited message.
+   */
+  addEditionModel(messageID: string, inputModel: IInputModel): void {
+    // Dispose of an hypothetic previous model for this message.
+    this.getEditionModel(messageID)?.dispose();
+
+    this._messageEditions.set(messageID, inputModel);
+    this._messageEditionAdded.emit({ id: messageID, model: inputModel });
+
+    inputModel.onDisposed.connect(() => {
+      this._messageEditions.delete(messageID);
+    });
+  }
+
   /**
    * Add unread messages to the list.
    * @param indexes - list of new indexes.
@@ -617,11 +684,17 @@ export abstract class AbstractChatModel implements IChatModel {
   private _selectionWatcher: ISelectionWatcher | null;
   private _documentManager: IDocumentManager | null;
   private _notificationId: string | null = null;
+  private _writers: IChatModel.IWriter[] = [];
+  private _messageEditions = new Map<string, IInputModel>();
   private _messagesUpdated = new Signal<IChatModel, void>(this);
   private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
-  private _writersChanged = new Signal<IChatModel, IUser[]>(this);
+  private _writersChanged = new Signal<IChatModel, IChatModel.IWriter[]>(this);
+  private _messageEditionAdded = new Signal<
+    IChatModel,
+    IChatModel.IMessageEdition
+  >(this);
 }
 
 /**
@@ -662,6 +735,34 @@ export namespace IChatModel {
      */
     documentManager?: IDocumentManager | null;
   }
+
+  /**
+   * Representation of a message edition.
+   */
+  export interface IMessageEdition {
+    /**
+     * The id of the edited message.
+     */
+    id: string;
+    /**
+     * The model of the input editing the message.
+     */
+    model: IInputModel;
+  }
+
+  /**
+   * Writer interface, including the message ID if the writer is editing a message.
+   */
+  export interface IWriter {
+    /**
+     * The user currently writing.
+     */
+    user: IUser;
+    /**
+     * The message ID (optional)
+     */
+    messageID?: string;
+  }
 }
 
 /**