@jupyter/chat 0.20.0-alpha.0 → 0.20.0-alpha.1

package/lib/components/messages/footer.js

@@ -17,6 +17,9 @@ export function MessageFooterComponent(props) {
         return null;
     }
     const footer = messageFooterRegistry.getFooter();
+    if (!footer.left && !footer.center && !footer.right) {
+        return null;
+    }
     return (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
         ((_a = footer.left) === null || _a === void 0 ? void 0 : _a.component) ? (React.createElement(footer.left.component, { message: message, model: model })) : (React.createElement("div", null)),
         ((_b = footer.center) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement(footer.center.component, { message: message, model: model })) : (React.createElement("div", null)),

package/lib/components/messages/message-renderer.js

@@ -4,7 +4,7 @@
  */
 import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { MessageToolbar } from './toolbar';
 import { CodeToolbar } from '../code-blocks/code-toolbar';
@@ -18,17 +18,13 @@ const DEFAULT_MIME_TYPE = 'text/markdown';
 function MessageRendererBase(props) {
     const { message } = props;
     const { model, rmRegistry } = useChatContext();
-    const containerRef = useRef(null);
+    // The rendered content, return by the mime renderer.
+    const [renderedContent, setRenderedContent] = useState(null);
     // Allow edition only on text messages.
     const [canEdit, setCanEdit] = useState(false);
     // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
-        let node = null;
-        const container = containerRef.current;
-        if (!container) {
-            return;
-        }
         const renderContent = async () => {
             var _a, _b;
             let isMarkdownRenderer = true;
@@ -106,21 +102,15 @@ function MessageRendererBase(props) {
                 });
                 setCodeToolbarDefns(newCodeToolbarDefns);
             }
-            // Add the rendered node to the DOM.
-            node = renderer.node;
-            container.insertBefore(node, container.firstChild);
+            // Update the content.
+            setRenderedContent(renderer.node);
             // Resolve the rendered promise.
             props.rendered.resolve();
         };
         renderContent();
-        return () => {
-            if (node && container.contains(node)) {
-                container.removeChild(node);
-            }
-            node = null;
-        };
     }, [message.body, message.mentions, rmRegistry]);
-    return (React.createElement("div", { className: RENDERED_CLASS, ref: containerRef },
+    return (React.createElement(React.Fragment, null,
+        renderedContent && (React.createElement("div", { className: RENDERED_CLASS, ref: node => node && node.replaceChildren(renderedContent) })),
         React.createElement(MessageToolbar, { edit: canEdit ? props.edit : undefined, delete: props.delete }),
         // Render a `CodeToolbar` element underneath each code block.
         // We use ReactDOM.createPortal() so each `CodeToolbar` element is able

package/lib/components/messages/message.js

@@ -9,6 +9,7 @@ import { ChatInput } from '../input';
 import { useChatContext } from '../../context';
 import { InputModel } from '../../input-model';
 import { replaceSpanToMention } from '../../utils';
+const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
 /**
  * The message component body.
  */
@@ -56,7 +57,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     }, [props.message]);
     // Create an input model only if the message is edited.
     const startEdition = () => {
-        var _a;
+        var _a, _b;
         if (!canEdit || !(typeof message.body === 'string')) {
             return;
         }
@@ -75,7 +76,7 @@ export const ChatMessage = forwardRef((props, ref) => {
             config: {
                 sendWithShiftEnter: model.config.sendWithShiftEnter
             },
-            attachments: message.attachments,
+            attachments: structuredClone((_b = message.attachments) !== null && _b !== void 0 ? _b : []),
             mentions: message.mentions
         });
         model.addEditionModel(message.id, inputModel);
@@ -110,7 +111,7 @@ export const ChatMessage = forwardRef((props, ref) => {
         model.deleteMessage(id);
     };
     // Empty if the message has been deleted.
-    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index, className: MESSAGE_CONTAINER_CLASS },
         edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), edit: true })) : (React.createElement(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

package/lib/model.d.ts

@@ -341,6 +341,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _notify;
     private _messages;
     private _unreadMessages;
+    private _lastRead;
     private _messagesInViewport;
     private _id;
     private _name;

package/lib/model.js

@@ -21,6 +21,7 @@ export class AbstractChatModel {
         var _a, _b, _c, _d;
         this._messages = [];
         this._unreadMessages = [];
+        this._lastRead = 0;
         this._messagesInViewport = [];
         this._name = '';
         this._readyDelegate = new PromiseDelegate();
@@ -71,6 +72,12 @@ export class AbstractChatModel {
     }
     set id(value) {
         this._id = value;
+        // Update the last read message.
+        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
+        if (typeof storage.lastRead === 'number' &&
+            storage.lastRead > this._lastRead) {
+            this._lastRead = storage.lastRead;
+        }
     }
     /**
      * The chat model name.
@@ -124,17 +131,14 @@ export class AbstractChatModel {
      * Timestamp of the last read message in local storage.
      */
     get lastRead() {
-        var _a;
-        if (this._id === undefined) {
-            return 0;
-        }
-        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
-        return (_a = storage.lastRead) !== null && _a !== void 0 ? _a : 0;
+        return this._lastRead;
     }
     set lastRead(value) {
+        this._lastRead = value;
         if (this._id === undefined) {
             return;
         }
+        // Save the last read message to the local storage, for persistence across reload.
         const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
         storage.lastRead = value;
         localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
@@ -192,17 +196,16 @@ export class AbstractChatModel {
         return this._unreadMessages;
     }
     set unreadMessages(unread) {
-        var _a;
         const recentlyRead = this._unreadMessages.filter(elem => !unread.includes(elem));
         const unreadCountDiff = unread.length - this._unreadMessages.length;
         this._unreadMessages = unread;
         this._unreadChanged.emit(this._unreadMessages);
         // Notify the change.
         this._notify(unread.length, unreadCountDiff > 0);
-        // Save the last read to the local storage.
-        if (this._id !== undefined && recentlyRead.length) {
+        // Save the last read.
+        if (recentlyRead.length) {
             let lastReadChanged = false;
-            let lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : this.messages[recentlyRead[0]].time;
+            let lastRead = this.lastRead;
             recentlyRead.forEach(index => {
                 if (this.messages[index].time > lastRead) {
                     lastRead = this.messages[index].time;
@@ -318,15 +321,13 @@ export class AbstractChatModel {
      * @param messages - the messages list.
      */
     messagesInserted(index, messages) {
-        var _a;
         const formattedMessages = [];
         const unreadIndexes = [];
-        const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
         // Format the messages.
         messages.forEach((message, idx) => {
             const formattedMessage = this.formatChatMessage(message);
             formattedMessages.push(new Message(formattedMessage));
-            if (message.time > lastRead) {
+            if (message.time > this.lastRead) {
                 unreadIndexes.push(index + idx);
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.20.0-alpha.0",
+  "version": "0.20.0-alpha.1",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/components/messages/footer.tsx

@@ -33,6 +33,10 @@ export function MessageFooterComponent(
   }
   const footer = messageFooterRegistry.getFooter();
 
+  if (!footer.left && !footer.center && !footer.right) {
+    return null;
+  }
+
   return (
     <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
       {footer.left?.component ? (

package/src/components/messages/message-renderer.tsx

@@ -7,7 +7,7 @@ import { IRenderMime } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 import { MessageToolbar } from './toolbar';
@@ -48,7 +48,10 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
   const { message } = props;
   const { model, rmRegistry } = useChatContext();
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  // The rendered content, return by the mime renderer.
+  const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
+    null
+  );
 
   // Allow edition only on text messages.
   const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -59,12 +62,6 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
   >([]);
 
   useEffect(() => {
-    let node: HTMLElement | null = null;
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
     const renderContent = async () => {
       let isMarkdownRenderer = true;
       let renderer: IRenderMime.IRenderer;
@@ -153,26 +150,24 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
         setCodeToolbarDefns(newCodeToolbarDefns);
       }
 
-      // Add the rendered node to the DOM.
-      node = renderer.node;
-      container.insertBefore(node, container.firstChild);
+      // Update the content.
+      setRenderedContent(renderer.node);
 
       // Resolve the rendered promise.
       props.rendered.resolve();
     };
 
     renderContent();
-
-    return () => {
-      if (node && container.contains(node)) {
-        container.removeChild(node);
-      }
-      node = null;
-    };
   }, [message.body, message.mentions, rmRegistry]);
 
   return (
-    <div className={RENDERED_CLASS} ref={containerRef}>
+    <>
+      {renderedContent && (
+        <div
+          className={RENDERED_CLASS}
+          ref={node => node && node.replaceChildren(renderedContent)}
+        />
+      )}
       <MessageToolbar
         edit={canEdit ? props.edit : undefined}
         delete={props.delete}
@@ -189,7 +184,7 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
           );
         })
       }
-    </div>
+    </>
   );
 }
 

package/src/components/messages/message.tsx

@@ -14,6 +14,8 @@ import { IInputModel, InputModel } from '../../input-model';
 import { IMessageContent, IMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
 
+const MESSAGE_CONTAINER_CLASS = 'jp-chat-message-container';
+
 /**
  * The message component props.
  */
@@ -104,7 +106,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
         config: {
           sendWithShiftEnter: model.config.sendWithShiftEnter
         },
-        attachments: message.attachments,
+        attachments: structuredClone(message.attachments ?? []),
         mentions: message.mentions
       });
       model.addEditionModel(message.id, inputModel);
@@ -148,7 +150,11 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     return deleted ? (
       <div ref={ref} data-index={props.index}></div>
     ) : (
-      <div ref={ref} data-index={props.index}>
+      <div
+        ref={ref}
+        data-index={props.index}
+        className={MESSAGE_CONTAINER_CLASS}
+      >
         {edit && canEdit && model.getEditionModel(message.id) ? (
           <ChatInput
             onCancel={() => cancelEdition()}

package/src/model.ts

@@ -268,6 +268,17 @@ export abstract class AbstractChatModel implements IChatModel {
   }
   set id(value: string | undefined) {
     this._id = value;
+
+    // Update the last read message.
+    const storage = JSON.parse(
+      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
+    );
+    if (
+      typeof storage.lastRead === 'number' &&
+      storage.lastRead > this._lastRead
+    ) {
+      this._lastRead = storage.lastRead;
+    }
   }
 
   /**
@@ -330,18 +341,15 @@ export abstract class AbstractChatModel implements IChatModel {
    * Timestamp of the last read message in local storage.
    */
   get lastRead(): number {
-    if (this._id === undefined) {
-      return 0;
-    }
-    const storage = JSON.parse(
-      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
-    );
-    return storage.lastRead ?? 0;
+    return this._lastRead;
   }
   set lastRead(value: number) {
+    this._lastRead = value;
+
     if (this._id === undefined) {
       return;
     }
+    // Save the last read message to the local storage, for persistence across reload.
     const storage = JSON.parse(
       localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
     );
@@ -422,10 +430,10 @@ export abstract class AbstractChatModel implements IChatModel {
     // Notify the change.
     this._notify(unread.length, unreadCountDiff > 0);
 
-    // Save the last read to the local storage.
-    if (this._id !== undefined && recentlyRead.length) {
+    // Save the last read.
+    if (recentlyRead.length) {
       let lastReadChanged = false;
-      let lastRead = this.lastRead ?? this.messages[recentlyRead[0]].time;
+      let lastRead = this.lastRead;
       recentlyRead.forEach(index => {
         if (this.messages[index].time > lastRead) {
           lastRead = this.messages[index].time;
@@ -569,13 +577,11 @@ export abstract class AbstractChatModel implements IChatModel {
     const formattedMessages: IMessage[] = [];
     const unreadIndexes: number[] = [];
 
-    const lastRead = this.lastRead ?? 0;
-
     // Format the messages.
     messages.forEach((message, idx) => {
       const formattedMessage = this.formatChatMessage(message);
       formattedMessages.push(new Message(formattedMessage));
-      if (message.time > lastRead) {
+      if (message.time > this.lastRead) {
         unreadIndexes.push(index + idx);
       }
     });
@@ -714,6 +720,7 @@ export abstract class AbstractChatModel implements IChatModel {
 
   private _messages: IMessage[] = [];
   private _unreadMessages: number[] = [];
+  private _lastRead: number = 0;
   private _messagesInViewport: number[] = [];
   private _id: string | undefined;
   private _name: string = '';

package/style/chat.css

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-.jp-chat-rendered-message {
+.jp-chat-message-container {
   position: relative;
 }
 
@@ -58,8 +58,8 @@
 .jp-chat-toolbar {
   visibility: hidden;
   position: absolute;
-  right: 2px;
-  top: 2px;
+  right: 0;
+  top: 0;
   font-size: var(--jp-ui-font-size0);
   color: var(--jp-ui-font-color3);
 }
@@ -69,7 +69,7 @@
   color: var(--jp-ui-font-color2);
 }
 
-.jp-chat-rendered-message:hover .jp-chat-toolbar {
+.jp-chat-message-container:hover .jp-chat-toolbar {
   visibility: visible;
 }