use a Y.Map instead of dict for message

Author: brichet

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

@@ -7,6 +7,7 @@ import { Box, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import { Avatar } from '../avatar';
+import { IChatModel } from '../../model';
 import { IChatMessage } from '../../types';
 
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
@@ -20,6 +21,10 @@ type ChatMessageHeaderProps = {
    * The chat message.
    */
   message: IChatMessage;
+  /**
+   * The chat model.
+   */
+  model: IChatModel;
   /**
    * Whether this message is from the current user.
    */
@@ -35,7 +40,8 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
     return <></>;
   }
   const [datetime, setDatetime] = useState<Record<number, string>>({});
-  const message = props.message;
+  const model = props.model;
+  const [message, setMessage] = useState<IChatMessage>(props.message);
   const sender = message.sender;
   /**
    * Effect: update cached datetime strings upon receiving a new message.
@@ -74,6 +80,19 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
     }
   });
 
+  // Listen for changes in the current message.
+  useEffect(() => {
+    function messageChanged(_: any, msg: IChatMessage) {
+      if (msg.id === message.id) {
+        setMessage({ ...msg });
+      }
+    }
+    model.messageChanged.connect(messageChanged);
+    return () => {
+      model.messageChanged.disconnect(messageChanged);
+    };
+  }, [model]);
+
   const avatar = message.stacked ? null : Avatar({ user: sender });
 
   const name =

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

@@ -37,7 +37,8 @@ type ChatMessageProps = BaseMessageProps & {
  */
 export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
   (props, ref): JSX.Element => {
-    const { message, model, rmRegistry } = props;
+    const { model, rmRegistry } = props;
+    const [message, setMessage] = useState<IChatMessage>(props.message);
     const [edit, setEdit] = useState<boolean>(false);
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -62,6 +63,19 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       }
     }, [model, message]);
 
+    // Listen for changes in the current message.
+    useEffect(() => {
+      function messageChanged(_: any, msg: IChatMessage) {
+        if (msg.id === message.id) {
+          setMessage({ ...msg });
+        }
+      }
+      model.messageChanged.connect(messageChanged);
+      return () => {
+        model.messageChanged.disconnect(messageChanged);
+      };
+    }, [model]);
+
     // Create an input model only if the message is edited.
     const startEdition = (): void => {
       if (!canEdit) {

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

@@ -215,6 +215,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                 >
                   <ChatMessageHeader
                     message={message}
+                    model={model}
                     isCurrentUser={isCurrentUser}
                   />
                   <ChatMessage

packages/jupyter-chat/src/model.ts

@@ -91,6 +91,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly messagesUpdated: ISignal<IChatModel, void>;
 
+  /**
+   * A signal emitting when a single message is updated.
+   */
+  readonly messageChanged: ISignal<IChatModel, IChatMessage>;
+
   /**
    * A signal emitting when the messages list is updated.
    */
@@ -450,12 +455,19 @@ export abstract class AbstractChatModel implements IChatModel {
   }
 
   /**
-   * A signal emitting when the messages list is updated.
+   * A signal emitting when the message list is updated.
    */
   get messagesUpdated(): ISignal<IChatModel, void> {
     return this._messagesUpdated;
   }
 
+  /**
+   * A signal emitting when a single message is updated.
+   */
+  get messageChanged(): ISignal<IChatModel, IChatMessage> {
+    return this._messageChanged;
+  }
+
   /**
    * A signal emitting when the messages list is updated.
    */
@@ -612,6 +624,14 @@ export abstract class AbstractChatModel implements IChatModel {
     this._messagesUpdated.emit();
   }
 
+  /**
+   * Function to call when a message is updated
+   */
+  messageUpdated(index: number, message: IChatMessage): void {
+    this.messages[index] = message;
+    this._messageChanged.emit(message);
+  }
+
   /**
    * Update the current writers list.
    * This implementation only propagate the list via a signal.
@@ -731,6 +751,7 @@ export abstract class AbstractChatModel implements IChatModel {
   private _writers: IChatModel.IWriter[] = [];
   private _messageEditions = new Map<string, IInputModel>();
   private _messagesUpdated = new Signal<IChatModel, void>(this);
+  private _messageChanged = new Signal<IChatModel, IChatMessage>(this);
   private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);

packages/jupyterlab-chat/src/model.ts

@@ -398,8 +398,8 @@ export class LabChatModel
   }
 
   private _onchange = async (_: YChat, changes: IChatChanges) => {
-    if (changes.messageChanges) {
-      const msgDelta = changes.messageChanges;
+    if (changes.messageListChanges) {
+      const msgDelta = changes.messageListChanges;
       let index = 0;
       for (const delta of msgDelta) {
         if (delta.retain) {
@@ -411,7 +411,7 @@ export class LabChatModel
               attachments: attachmentIds,
               mentions: mentionsIds,
               ...baseMessage
-            } = ymessage;
+            } = ymessage.toJSON() as IYmessage;
 
             // Build the base message with sender.
             const msg: IChatMessage = {
@@ -457,6 +457,53 @@ export class LabChatModel
       }
     }
 
+    if (changes.messageChanges) {
+      // Update change in the message.
+      changes.messageChanges.forEach(change => {
+        const message = this.messages[change.index];
+        if (change.type === 'remove') {
+          delete message[change.key as keyof IChatMessage];
+        } else if (change.newValue !== undefined) {
+          const key = change.key;
+          const value = change.newValue;
+          if (key === 'attachments') {
+            const attachments: IAttachment[] = [];
+            (value as string[]).forEach(attachmentId => {
+              const attachment = this.sharedModel.getAttachment(attachmentId);
+              if (attachment) {
+                attachments.push(attachment);
+              }
+            });
+            if (attachments.length) {
+              message.attachments = attachments;
+            } else {
+              delete message.attachments;
+            }
+          } else if (key === 'mentions') {
+            const mentions: IUser[] = (value as string[]).map(
+              user =>
+                this.sharedModel.getUser(user) || {
+                  username: 'User undefined',
+                  mention_name: 'User-undefined'
+                }
+            );
+            if (mentions?.length) {
+              message.mentions = mentions;
+            }
+          } else if (
+            ['body', 'time', 'raw_time', 'deleted', 'edited'].includes(key)
+          ) {
+            (message as any)[key] = value;
+          } else {
+            console.error(
+              `The attribute '${key}' of message cannot be updated`
+            );
+          }
+        }
+        this.messageUpdated(change.index, message);
+      });
+    }
+
     if (changes.metadataChanges) {
       changes.metadataChanges.forEach(change => {
         // no need to search for update or add, if the new value contains ID, let's