@jupyter/chat 0.22.0 → 0.23.0-alpha.0

package/src/components/input/chat-input.tsx

@@ -15,6 +15,7 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { InputToolbarRegistry } from './toolbar-registry';
+import { submitInputMessage } from './submit-message';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatContext, useTranslator } from '../../context';
@@ -169,9 +170,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
 
     // Finally, send the message when all other conditions are met.
     if (isSendCombination) {
-      // Run all command providers
-      await chatCommandRegistry?.onSubmit(model);
-      model.send(model.value);
+      await submitInputMessage({ model, chatCommandRegistry });
       event.stopPropagation();
       event.preventDefault();
     }

package/src/components/input/submit-message.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IInputModel } from '../../input-model';
+import { IChatCommandRegistry } from '../../registers';
+
+/**
+ * Submit the current input value as a chat message.
+ */
+export async function submitInputMessage(
+  options: submitInputMessage.IOptions
+): Promise<void> {
+  const { model, chatCommandRegistry, body } = options;
+
+  await chatCommandRegistry?.onSubmit(model);
+
+  model.send(body ?? model.value);
+  model.focus();
+}
+
+export namespace submitInputMessage {
+  export interface IOptions {
+    /**
+     * The input model containing the message to send.
+     */
+    model: IInputModel;
+    /**
+     * Optional chat command registry used to preprocess message content.
+     */
+    chatCommandRegistry?: IChatCommandRegistry;
+    /**
+     * Optional message body to send instead of the current model value.
+     */
+    body?: string;
+  }
+}

package/src/components/messages/header.tsx

@@ -30,7 +30,9 @@ type ChatMessageHeaderProps = {
 /**
  * The message header component.
  */
-export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
+export function ChatMessageHeaderBase(
+  props: ChatMessageHeaderProps
+): JSX.Element {
   const trans = useTranslator();
   const [message, setMessage] = useState<IMessageContent>(
     props.message.content
@@ -163,3 +165,5 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
     </Box>
   );
 }
+
+export const ChatMessageHeader = React.memo(ChatMessageHeaderBase);

package/src/components/messages/message.tsx

@@ -4,7 +4,7 @@
  */
 
 import { PromiseDelegate } from '@lumino/coreutils';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { MessageRenderer } from './message-renderer';
 import { AttachmentPreviewList } from '../attachments';
@@ -14,7 +14,7 @@ import { IInputModel, InputModel } from '../../input-model';
 import { IMessageContent, IMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
 
-const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
+export const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
 
 /**
  * The message component props.
@@ -28,103 +28,100 @@ type ChatMessageProps = {
    * The index of the message in the list.
    */
   index: number;
-  /**
-   * The promise to resolve when the message is rendered.
-   */
-  renderedPromise: PromiseDelegate<void>;
 };
 
 /**
  * The message component body.
  */
-export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
-  (props, ref): JSX.Element => {
-    const { model } = useChatContext();
-    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);
-    const [canDelete, setCanDelete] = useState<boolean>(false);
-
-    // 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) {
-          setCanEdit(model.updateMessage !== undefined);
-          setCanDelete(model.deleteMessage !== undefined);
-          return;
-        }
-        if (message.sender.bot) {
-          setCanDelete(model.deleteMessage !== undefined);
-        }
-      } else {
-        setCanEdit(false);
-        setCanDelete(false);
-      }
-    }, [model, message]);
+export function ChatMessageBase(props: ChatMessageProps): JSX.Element {
+  const { model } = useChatContext();
+  const [message, setMessage] = useState<IMessageContent>(
+    props.message.content
+  );
+  const [renderedDelegate, setRenderedDelegate] = useState<
+    PromiseDelegate<void>
+  >(props.message.renderedDelegate);
+  const [edit, setEdit] = useState<boolean>(false);
+  const [deleted, setDeleted] = useState<boolean>(false);
+  const [canEdit, setCanEdit] = useState<boolean>(false);
+  const [canDelete, setCanDelete] = useState<boolean>(false);
 
-    // Listen for changes in the current message.
-    useEffect(() => {
-      function messageChanged() {
-        setMessage(props.message.content);
+  // 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) {
+        setCanEdit(model.updateMessage !== undefined);
+        setCanDelete(model.deleteMessage !== undefined);
+        return;
       }
+      if (message.sender.bot) {
+        setCanDelete(model.deleteMessage !== undefined);
+      }
+    } else {
+      setCanEdit(false);
+      setCanDelete(false);
+    }
+  }, [model, message]);
 
-      props.message.changed.connect(messageChanged);
-
-      // Initialize the message when the message is re-rendered.
-      // FIX ? This seems to be required for outofband change, to get the new value,
-      // even if when an outofband change occurs, all the messages are deleted and
-      // recreated.
+  // Listen for changes in the current message.
+  useEffect(() => {
+    function messageChanged() {
       setMessage(props.message.content);
-      return () => {
-        props.message.changed.disconnect(messageChanged);
-      };
-    }, [props.message]);
-
-    // Create an input model only if the message is edited.
-    const startEdition = (): void => {
-      if (!canEdit || !(typeof message.body === 'string')) {
-        return;
-      }
-      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: structuredClone(message.attachments ?? []),
-        mentions: message.mentions
-      });
-      model.addEditionModel(message.id, inputModel);
-      setEdit(true);
-    };
+      setRenderedDelegate(props.message.renderedDelegate);
+    }
 
-    // Cancel the current edition of the message.
-    const cancelEdition = (): void => {
-      model.getEditionModel(message.id)?.dispose();
-      setEdit(false);
+    props.message.changed.connect(messageChanged);
+
+    // Initialize the message when the message is re-rendered.
+    // FIX ? This seems to be required for outofband change, to get the new value,
+    // even if when an outofband change occurs, all the messages are deleted and
+    // recreated.
+    setMessage(props.message.content);
+    setRenderedDelegate(props.message.renderedDelegate);
+    return () => {
+      props.message.changed.disconnect(messageChanged);
     };
+  }, [props.message]);
+
+  // Create an input model only if the message is edited.
+  const startEdition = useCallback((): void => {
+    if (!canEdit || !(typeof message.body === 'string')) {
+      return;
+    }
+    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: structuredClone(message.attachments ?? []),
+      mentions: message.mentions
+    });
+    model.addEditionModel(message.id, inputModel);
+    setEdit(true);
+  }, [canEdit, model, message]);
 
-    // Update the content of the message.
-    const updateMessage = (
-      id: string,
-      input: string,
-      inputModel?: IInputModel
-    ): void => {
+  // Cancel the current edition of the message.
+  const cancelEdition = useCallback((): void => {
+    model.getEditionModel(message.id)?.dispose();
+    setEdit(false);
+  }, [model, message]);
+
+  // Update the content of the message.
+  const updateMessage = useCallback(
+    (id: string, input: string, inputModel?: IInputModel): void => {
       if (!canEdit || !inputModel) {
         return;
       }
@@ -136,45 +133,55 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       model.updateMessage!(id, updatedMessage);
       model.getEditionModel(message.id)?.dispose();
       setEdit(false);
-    };
+    },
+    [model, message, canEdit]
+  );
 
-    // Delete the message.
-    const deleteMessage = (id: string): void => {
+  // Delete the message.
+  const deleteMessage = useCallback(
+    (id: string): void => {
       if (!canDelete) {
         return;
       }
       model.deleteMessage!(id);
-    };
+    },
+    [model, canDelete]
+  );
+
+  useEffect(() => {
+    if (deleted) {
+      renderedDelegate.resolve();
+    }
+  }, [deleted, renderedDelegate]);
 
-    // Empty if the message has been deleted.
-    return deleted ? (
-      <div ref={ref} data-index={props.index}></div>
-    ) : (
-      <div
-        ref={ref}
-        data-index={props.index}
-        className={MESSAGE_CONTAINER_CLASS}
-      >
-        {edit && canEdit && model.getEditionModel(message.id) ? (
-          <ChatInput
-            onCancel={() => cancelEdition()}
-            model={model.getEditionModel(message.id)!}
-            edit={true}
-          />
-        ) : (
-          <MessageRenderer
-            message={message}
-            edit={canEdit ? startEdition : undefined}
-            delete={canDelete ? () => deleteMessage(message.id) : undefined}
-            rendered={props.renderedPromise}
-          />
-        )}
-        {message.attachments && !edit && (
-          // Display the attachments only if message is not edited, otherwise the
-          // input component display them.
-          <AttachmentPreviewList attachments={message.attachments} />
-        )}
-      </div>
-    );
+  // Empty if the message has been deleted.
+  if (deleted) {
+    return <div data-index={props.index}></div>;
   }
-);
+
+  return (
+    <div data-index={props.index} className={MESSAGE_CONTAINER_CLASS}>
+      {edit && canEdit && model.getEditionModel(message.id) ? (
+        <ChatInput
+          onCancel={() => cancelEdition()}
+          model={model.getEditionModel(message.id)!}
+          edit={true}
+        />
+      ) : (
+        <MessageRenderer
+          message={message}
+          edit={canEdit ? startEdition : undefined}
+          delete={canDelete ? () => deleteMessage(message.id) : undefined}
+          rendered={renderedDelegate}
+        />
+      )}
+      {message.attachments && !edit && (
+        // Display the attachments only if message is not edited, otherwise the
+        // input component display them.
+        <AttachmentPreviewList attachments={message.attachments} />
+      )}
+    </div>
+  );
+}
+
+export const ChatMessage = React.memo(ChatMessageBase);

package/src/components/messages/messages.tsx

@@ -3,14 +3,13 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { PromiseDelegate } from '@lumino/coreutils';
 import { Box } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef } from 'react';
 
 import { MessageFooterComponent } from './footer';
 import { ChatMessageHeader } from './header';
-import { ChatMessage } from './message';
+import { ChatMessage, MESSAGE_CONTAINER_CLASS } from './message';
 import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
@@ -44,10 +43,6 @@ export function ChatMessages(): JSX.Element {
     model.config.showDeleted ?? false
   );
 
-  // The list of message DOM and their rendered promises.
-  const listRef = useRef<(HTMLDivElement | null)[]>([]);
-  const renderedPromise = useRef<PromiseDelegate<void>[]>([]);
-
   /**
    * Effect: fetch history and config on initial render
    */
@@ -159,9 +154,12 @@ export function ChatMessages(): JSX.Element {
    */
   useEffect(() => {
     const observer = new IntersectionObserver(entries => {
-      // Used on first rendering, to ensure all the message as been rendered once.
+      // Used on first rendering, to ensure all the messages have been rendered once.
       if (!allRendered) {
-        Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+        const promises = (
+          showDeleted ? messages : messages.filter(message => !message.deleted)
+        ).map(msg => msg.renderedDelegate.promise);
+        Promise.all(promises).then(() => {
           setAllRendered(true);
         });
       }
@@ -191,7 +189,7 @@ export function ChatMessages(): JSX.Element {
       model.messagesInViewport = inViewport;
 
       // Ensure that all messages are rendered before updating unread messages, otherwise
-      // it can lead to wrong assumption , because more message are in the viewport
+      // it can lead to wrong assumption, because more messages are in the viewport
       // before they are rendered.
       if (allRendered && unreadModified) {
         model.unreadMessages = unread;
@@ -201,20 +199,16 @@ export function ChatMessages(): JSX.Element {
     /**
      * Observe the messages.
      */
-    listRef.current.forEach(item => {
-      if (item) {
+    refMsgBox.current
+      ?.querySelectorAll(`.${MESSAGE_CONTAINER_CLASS}`)
+      .forEach(item => {
         observer.observe(item);
-      }
-    });
+      });
 
     return () => {
-      listRef.current.forEach(item => {
-        if (item) {
-          observer.unobserve(item);
-        }
-      });
+      observer.disconnect();
     };
-  }, [messages, allRendered]);
+  }, [messages, showDeleted, allRendered]);
 
   const horizontalPadding = area === 'main' ? 8 : 4;
   return (
@@ -240,7 +234,6 @@ export function ChatMessages(): JSX.Element {
             ? messages
             : messages.filter(message => !message.deleted)
           ).map((message, i) => {
-            renderedPromise.current[i] = new PromiseDelegate();
             const isCurrentUser =
               model.user !== undefined &&
               model.user.username === message.sender.username;
@@ -269,12 +262,7 @@ export function ChatMessages(): JSX.Element {
                 {messagePreambleRegistry && (
                   <MessagePreambleComponent message={message} />
                 )}
-                <ChatMessage
-                  message={message}
-                  index={i}
-                  renderedPromise={renderedPromise.current[i]}
-                  ref={el => (listRef.current[i] = el)}
-                />
+                <ChatMessage message={message} index={i} />
                 {messageFooterRegistry && (
                   <MessageFooterComponent message={message} />
                 )}

package/src/message.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { PromiseDelegate } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
 import {
   IAttachment,
@@ -83,14 +84,42 @@ export class Message implements IMessage {
     return this._changed;
   }
 
+  /**
+   * A promise delegate that resolve when the message is rendered.
+   */
+  get renderedDelegate(): PromiseDelegate<void> {
+    return this._rendered;
+  }
+
   /**
    * Update one or several fields of the message.
    */
   update(updated: Partial<IMessageContent>) {
+    // Check if the message will be rendered again.
+    const triggerRerender = new Set([
+      'body',
+      'deleted',
+      'mentions',
+      'mime_model'
+    ] as (keyof IMessageContent)[]);
+    const updatedAttributes = Object.keys(updated) as (keyof IMessageContent)[];
+    const shouldRerender = updatedAttributes.some(
+      attribute =>
+        triggerRerender.has(attribute) &&
+        updated[attribute] !== this._content[attribute]
+    );
+
+    // Update the message content.
     this._content = { ...this._content, ...updated };
+
+    // Update the promise delegate if the message will be rendered again.
+    if (shouldRerender) {
+      this._rendered = new PromiseDelegate<void>();
+    }
     this._changed.emit();
   }
 
   private _content: IMessageContent;
   private _changed = new Signal<IMessage, void>(this);
+  private _rendered = new PromiseDelegate<void>();
 }

package/src/model.ts

@@ -175,6 +175,11 @@ export interface IChatModel extends IDisposable {
    */
   isDisposed: boolean;
 
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  readonly disposed: ISignal<IChatModel, void>;
+
   /**
    * Function to call when a message is received.
    *
@@ -306,7 +311,10 @@ export abstract class AbstractChatModel implements IChatModel {
     this._name = value;
   }
 
-  get disposed(): ISignal<AbstractChatModel, void> {
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  get disposed(): ISignal<IChatModel, void> {
     return this._disposed;
   }
 
@@ -769,7 +777,7 @@ export abstract class AbstractChatModel implements IChatModel {
   protected _trans: TranslationBundle;
   private _readyDelegate = new PromiseDelegate<void>();
   private _inputModel: IInputModel;
-  private _disposed = new Signal<this, void>(this);
+  private _disposed = new Signal<IChatModel, void>(this);
   private _isDisposed = false;
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;

package/src/types.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { PromiseDelegate } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { IRenderMime } from '@jupyterlab/rendermime';
 
@@ -157,6 +158,10 @@ export interface IMessage extends IMessageContent {
    * A signal emitting when the message has been updated.
    */
   changed: ISignal<IMessage, void>;
+  /**
+   * A promise delegate that resolve when the message is rendered.
+   */
+  renderedDelegate: PromiseDelegate<void>;
 }
 
 /**

package/src/utils.ts

@@ -62,7 +62,7 @@ export function replaceMentionToSpan(content: string, user: IUser): string {
   }
   const mention = '@' + user.mention_name;
   const regex = new RegExp(mention, 'g');
-  const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+  const mentionEl = `<span class="${MENTION_CLASS}"> ${mention} </span>`;
   return content.replace(regex, mentionEl);
 }
 
@@ -77,7 +77,7 @@ export function replaceSpanToMention(content: string, user: IUser): string {
     return content;
   }
   const mention = '@' + user.mention_name;
-  const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+  const mentionEl = `<span class="${MENTION_CLASS}"> ${mention} </span>`;
   const regex = new RegExp(mentionEl, 'g');
   return content.replace(regex, mention);
 }