Add a Message object emitting a signal on update

Author: brichet

packages/jupyter-chat/src/__tests__/model.spec.ts

@@ -8,7 +8,7 @@
  */
 
 import { AbstractChatModel, IChatContext, IChatModel } from '../model';
-import { IChatMessage, INewMessage } from '../types';
+import { IMessageContent, INewMessage } from '../types';
 import { MockChatModel, MockChatContext } from './mocks';
 
 describe('test chat model', () => {
@@ -27,7 +27,7 @@ describe('test chat model', () => {
 
   describe('incoming message', () => {
     class TestChat extends AbstractChatModel implements IChatModel {
-      protected formatChatMessage(message: IChatMessage): IChatMessage {
+      protected formatChatMessage(message: IMessageContent): IMessageContent {
         message.body = 'formatted msg';
         return message;
       }
@@ -43,14 +43,14 @@ describe('test chat model', () => {
     }
 
     let model: IChatModel;
-    let messages: IChatMessage[];
+    let messages: IMessageContent[];
     const msg = {
       type: 'msg',
       id: 'message1',
       time: Date.now() / 1000,
       body: 'message test',
       sender: { username: 'user' }
-    } as IChatMessage;
+    } as IMessageContent;
 
     beforeEach(() => {
       messages = [];
@@ -76,7 +76,7 @@ describe('test chat model', () => {
       model.messageAdded({ ...msg });
       expect(messages).toHaveLength(1);
       expect(messages[0]).not.toBe(msg);
-      expect((messages[0] as IChatMessage).body).toBe('formatted msg');
+      expect((messages[0] as IMessageContent).body).toBe('formatted msg');
     });
   });
 

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

@@ -7,8 +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';
+import { IMessageContent, IMessage } from '../../types';
 
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
@@ -20,11 +19,7 @@ type ChatMessageHeaderProps = {
   /**
    * The chat message.
    */
-  message: IChatMessage;
-  /**
-   * The chat model.
-   */
-  model: IChatModel;
+  message: IMessage;
   /**
    * Whether this message is from the current user.
    */
@@ -40,8 +35,9 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
     return <></>;
   }
   const [datetime, setDatetime] = useState<Record<number, string>>({});
-  const model = props.model;
-  const [message, setMessage] = useState<IChatMessage>(props.message);
+  const [message, setMessage] = useState<IMessageContent>(
+    props.message.content
+  );
   const sender = message.sender;
   /**
    * Effect: update cached datetime strings upon receiving a new message.
@@ -82,16 +78,14 @@ 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 });
-      }
+    function messageChanged() {
+      setMessage(props.message.content);
     }
-    model.messageChanged.connect(messageChanged);
+    props.message.changed.connect(messageChanged);
     return () => {
-      model.messageChanged.disconnect(messageChanged);
+      props.message.changed.disconnect(messageChanged);
     };
-  }, [model]);
+  }, [props.message]);
 
   const avatar = message.stacked ? null : Avatar({ user: sender });
 

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

@@ -11,7 +11,7 @@ import { BaseMessageProps } from './messages';
 import { AttachmentPreviewList } from '../attachments';
 import { ChatInput } from '../input';
 import { IInputModel, InputModel } from '../../input-model';
-import { IChatMessage } from '../../types';
+import { IMessageContent, IMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
 
 /**
@@ -21,7 +21,7 @@ type ChatMessageProps = BaseMessageProps & {
   /**
    * The message to display.
    */
-  message: IChatMessage;
+  message: IMessage;
   /**
    * The index of the message in the list.
    */
@@ -38,7 +38,9 @@ type ChatMessageProps = BaseMessageProps & {
 export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
   (props, ref): JSX.Element => {
     const { model, rmRegistry } = props;
-    const [message, setMessage] = useState<IChatMessage>(props.message);
+    const [message, setMessage] = useState<IMessageContent>(
+      props.message.content
+    );
     const [edit, setEdit] = useState<boolean>(false);
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -65,16 +67,14 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
 
     // Listen for changes in the current message.
     useEffect(() => {
-      function messageChanged(_: any, msg: IChatMessage) {
-        if (msg.id === message.id) {
-          setMessage({ ...msg });
-        }
+      function messageChanged() {
+        setMessage(props.message.content);
       }
-      model.messageChanged.connect(messageChanged);
+      props.message.changed.connect(messageChanged);
       return () => {
-        model.messageChanged.disconnect(messageChanged);
+        props.message.changed.disconnect(messageChanged);
       };
-    }, [model]);
+    }, [props.message]);
 
     // Create an input model only if the message is edited.
     const startEdition = (): void => {

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

@@ -16,9 +16,10 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { IInputToolbarRegistry } from '../input';
 import { ScrollContainer } from '../scroll-container';
-import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
+import { Message } from '../../message';
 import { IChatModel } from '../../model';
-import { ChatArea, IChatMessage } from '../../types';
+import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
+import { ChatArea, IMessage } from '../../types';
 
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
@@ -63,7 +64,7 @@ export type BaseMessageProps = {
  */
 export function ChatMessages(props: BaseMessageProps): JSX.Element {
   const { model } = props;
-  const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
+  const [messages, setMessages] = useState<IMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
   const [allRendered, setAllRendered] = useState<boolean>(false);
 
@@ -81,7 +82,11 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
       }
       model
         .getHistory()
-        .then(history => setMessages(history.messages))
+        .then(history =>
+          setMessages(
+            history.messages.map(message => new Message({ ...message }))
+          )
+        )
         .catch(e => console.error(e));
     }
 
@@ -215,7 +220,6 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                 >
                   <ChatMessageHeader
                     message={message}
-                    model={model}
                     isCurrentUser={isCurrentUser}
                   />
                   <ChatMessage

packages/jupyter-chat/src/message.ts

@@ -0,0 +1,78 @@
+import { ISignal, Signal } from '@lumino/signaling';
+import { IAttachment, IMessageContent, IMessage, IUser } from './types';
+
+/**
+ * The message object.
+ */
+export class Message implements IMessage {
+  /**
+   * The constructor of the message.
+   *
+   * @param content: the content of the message.
+   */
+  constructor(content: IMessageContent) {
+    this._content = content;
+  }
+
+  /**
+   * The message content.
+   */
+  get content(): IMessageContent {
+    return this._content;
+  }
+
+  /**
+   * Getters for each attribute individually.
+   */
+  get type(): string {
+    return this._content.type;
+  }
+  get body(): string {
+    return this._content.body;
+  }
+  get id(): string {
+    return this._content.id;
+  }
+  get time(): number {
+    return this._content.time;
+  }
+  get sender(): IUser {
+    return this._content.sender;
+  }
+  get attachments(): IAttachment[] | undefined {
+    return this._content.attachments;
+  }
+  get mentions(): IUser[] | undefined {
+    return this._content.mentions;
+  }
+  get raw_time(): boolean | undefined {
+    return this._content.raw_time;
+  }
+  get deleted(): boolean | undefined {
+    return this._content.deleted;
+  }
+  get edited(): boolean | undefined {
+    return this._content.edited;
+  }
+  get stacked(): boolean | undefined {
+    return this._content.stacked;
+  }
+
+  /**
+   * A signal emitting when the message has been updated.
+   */
+  get changed(): ISignal<IMessage, void> {
+    return this._changed;
+  }
+
+  /**
+   * Update one or several fields of the message.
+   */
+  update(updated: Partial<IMessageContent>) {
+    this._content = { ...this._content, ...updated };
+    this._changed.emit();
+  }
+
+  private _content: IMessageContent;
+  private _changed = new Signal<IMessage, void>(this);
+}