Messages as a list in collaborative chat document (#31)

* Store the list of message in the model instead of the widget, to easily manipulate it

* Change the chat document to have a list of messages instead of a map

* Fix collaborative chat tests

* lint

* Improve the way the changes on messages are handled

Author: brichet

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

@@ -8,7 +8,7 @@
  */
 
 import { ChatModel, IChatModel } from '../model';
-import { IChatMessage, IMessage } from '../types';
+import { IChatMessage } from '../types';
 
 describe('test chat model', () => {
   describe('model instantiation', () => {
@@ -33,7 +33,7 @@ describe('test chat model', () => {
     }
 
     let model: IChatModel;
-    let messages: IMessage[];
+    let messages: IChatMessage[];
     const msg = {
       type: 'msg',
       id: 'message1',
@@ -48,22 +48,22 @@ describe('test chat model', () => {
 
     it('should signal incoming message', () => {
       model = new ChatModel();
-      model.incomingMessage.connect((sender: IChatModel, message: IMessage) => {
+      model.messagesUpdated.connect((sender: IChatModel) => {
         expect(sender).toBe(model);
-        messages.push(message);
+        messages = model.messages;
       });
-      model.onMessage(msg);
+      model.messageAdded(msg);
       expect(messages).toHaveLength(1);
       expect(messages[0]).toBe(msg);
     });
 
     it('should format message', () => {
       model = new TestChat();
-      model.incomingMessage.connect((sender: IChatModel, message: IMessage) => {
+      model.messagesUpdated.connect((sender: IChatModel) => {
         expect(sender).toBe(model);
-        messages.push(message);
+        messages = model.messages;
       });
-      model.onMessage({ ...msg } as IChatMessage);
+      model.messageAdded({ ...msg });
       expect(messages).toHaveLength(1);
       expect(messages[0]).not.toBe(msg);
       expect((messages[0] as IChatMessage).body).toBe('formatted msg');

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

@@ -16,7 +16,7 @@ import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
 import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
-import { IChatMessage, IMessage } from '../types';
+import { IChatMessage } from '../types';
 
 type ChatBodyProps = {
   model: IChatModel;
@@ -50,49 +50,13 @@ function ChatBody({
    * Effect: listen to chat messages
    */
   useEffect(() => {
-    function handleChatEvents(_: IChatModel, message: IMessage) {
-      if (message.type === 'clear') {
-        setMessages([]);
-        return;
-      } else {
-        setMessages((messageGroups: IChatMessage[]) => {
-          const existingMessages = [...messageGroups];
-
-          const messageIndex = existingMessages.findIndex(
-            msg => msg.id === message.id
-          );
-          if (messageIndex > -1) {
-            // The message is an update of an existing one (or a removal).
-            // Let's remove it anyway (to avoid position conflict if timestamp has
-            // changed) and add the new one if it is an update.
-            existingMessages.splice(messageIndex, 1);
-          }
-
-          if (message.type === 'remove') {
-            return existingMessages;
-          }
-
-          // Find the first message that should be after this one.
-          let nextMsgIndex = existingMessages.findIndex(
-            msg => msg.time > message.time
-          );
-          if (nextMsgIndex === -1) {
-            // There is no message after this one, so let's insert the message at
-            // the end.
-            nextMsgIndex = existingMessages.length;
-          }
-
-          // Insert the message.
-          existingMessages.splice(nextMsgIndex, 0, message);
-
-          return existingMessages;
-        });
-      }
+    function handleChatEvents(_: IChatModel) {
+      setMessages([...model.messages]);
     }
 
-    model.incomingMessage.connect(handleChatEvents);
+    model.messagesUpdated.connect(handleChatEvents);
     return function cleanup() {
-      model.incomingMessage.disconnect(handleChatEvents);
+      model.messagesUpdated.disconnect(handleChatEvents);
     };
   }, [model]);
 

packages/jupyter-chat/src/model.ts

@@ -11,7 +11,6 @@ import {
   INewMessage,
   IChatMessage,
   IConfig,
-  IMessage,
   IUser
 } from './types';
 
@@ -35,9 +34,14 @@ export interface IChatModel extends IDisposable {
   readonly user?: IUser;
 
   /**
-   * The signal emitted when a new message is received.
+   * The chat messages list.
    */
-  get incomingMessage(): ISignal<IChatModel, IMessage>;
+  readonly messages: IChatMessage[];
+
+  /**
+   * The signal emitted when the messages list is updated.
+   */
+  readonly messagesUpdated: ISignal<IChatModel, void>;
 
   /**
    * Send a message, to be defined depending on the chosen technology.
@@ -49,7 +53,7 @@ export interface IChatModel extends IDisposable {
   addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
 
   /**
-   * Optional, to update a message from the chat.
+   * Optional, to update a message from the chat panel.
    *
    * @param id - the unique ID of the message.
    * @param message - the updated message.
@@ -84,9 +88,25 @@ export interface IChatModel extends IDisposable {
   /**
    * Function to call when a message is received.
    *
-   * @param message - the new message, containing user information and body.
+   * @param message - the message with user information and body.
+   */
+  messageAdded(message: IChatMessage): void;
+
+  /**
+   * Function called when messages are inserted.
+   *
+   * @param index - the index of the first message of the list.
+   * @param messages - the messages list.
    */
-  onMessage(message: IMessage): void;
+  messagesInserted(index: number, messages: IChatMessage[]): void;
+
+  /**
+   * Function called when messages are deleted.
+   *
+   * @param index - the index of the first message to delete.
+   * @param count - the number of messages to delete.
+   */
+  messagesDeleted(index: number, count: number): void;
 }
 
 /**
@@ -102,6 +122,13 @@ export class ChatModel implements IChatModel {
     this._config = options.config ?? {};
   }
 
+  /**
+   * The chat messages list.
+   */
+  get messages(): IChatMessage[] {
+    return this._messages;
+  }
+
   /**
    * The chat model ID.
    */
@@ -123,11 +150,10 @@ export class ChatModel implements IChatModel {
   }
 
   /**
-   *
-   * The signal emitted when a new message is received.
+   * The signal emitted when the messages list is updated.
    */
-  get incomingMessage(): ISignal<IChatModel, IMessage> {
-    return this._incomingMessage;
+  get messagesUpdated(): ISignal<IChatModel, void> {
+    return this._messagesUpdated;
   }
 
   /**
@@ -140,7 +166,7 @@ export class ChatModel implements IChatModel {
   addMessage(message: INewMessage): Promise<boolean | void> | boolean | void {}
 
   /**
-   * Optional, to update a message from the chat.
+   * Optional, to update a message from the chat panel.
    *
    * @param id - the unique ID of the message.
    * @param message - the message to update.
@@ -180,18 +206,54 @@ export class ChatModel implements IChatModel {
    *
    * @param message - the message with user information and body.
    */
-  onMessage(message: IMessage): void {
-    if (message.type === 'msg') {
-      message = this.formatChatMessage(message as IChatMessage);
+  messageAdded(message: IChatMessage): void {
+    const messageIndex = this._messages.findIndex(msg => msg.id === message.id);
+    if (messageIndex > -1) {
+      // The message is an update of an existing one.
+      // Let's remove it to avoid position conflict if timestamp has changed.
+      this._messages.splice(messageIndex, 1);
+    }
+    // Find the first message that should be after this one.
+    let nextMsgIndex = this._messages.findIndex(msg => msg.time > message.time);
+    if (nextMsgIndex === -1) {
+      // There is no message after this one, so let's insert the message at the end.
+      nextMsgIndex = this._messages.length;
     }
+    // Insert the message.
+    this.messagesInserted(nextMsgIndex, [message]);
+  }
 
-    this._incomingMessage.emit(message);
+  /**
+   * Function called when messages are inserted.
+   *
+   * @param index - the index of the first message of the list.
+   * @param messages - the messages list.
+   */
+  messagesInserted(index: number, messages: IChatMessage[]): void {
+    const formattedMessages: IChatMessage[] = [];
+    messages.forEach(message => {
+      formattedMessages.push(this.formatChatMessage(message));
+    });
+    this._messages.splice(index, 0, ...formattedMessages);
+    this._messagesUpdated.emit();
+  }
+
+  /**
+   * Function called when messages are deleted.
+   *
+   * @param index - the index of the first message to delete.
+   * @param count - the number of messages to delete.
+   */
+  messagesDeleted(index: number, count: number): void {
+    this._messages.splice(index, count);
+    this._messagesUpdated.emit();
   }
 
+  private _messages: IChatMessage[] = [];
   private _id: string = '';
   private _config: IConfig;
   private _isDisposed = false;
-  private _incomingMessage = new Signal<IChatModel, IMessage>(this);
+  private _messagesUpdated = new Signal<IChatModel, void>(this);
 }
 
 /**

packages/jupyter-chat/src/types.ts

@@ -37,17 +37,6 @@ export interface IChatMessage {
   edited?: boolean;
 }
 
-export type IClearMessage = {
-  type: 'clear';
-};
-
-export type IDeleteMessage = {
-  type: 'remove';
-  id: string;
-};
-
-export type IMessage = IChatMessage | IClearMessage | IDeleteMessage;
-
 /**
  * The chat history interface.
  */