@jupyter/chat 0.6.1 → 0.7.0

package/src/components/chat-messages.tsx

@@ -10,13 +10,14 @@ import {
   caretDownEmptyIcon,
   classes
 } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Avatar as MuiAvatar, Box, Typography } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
 import clsx from 'clsx';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
 import { ChatInput } from './chat-input';
-import { RendermimeMarkdown } from './rendermime-markdown';
+import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -47,13 +48,12 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   const { model } = props;
   const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
-  const inViewport = useRef<number[]>([]);
   const [currentWriters, setCurrentWriters] = useState<IUser[]>([]);
+  const [allRendered, setAllRendered] = useState<boolean>(false);
 
-  // The intersection observer that listen to all the message visibility.
-  const observerRef = useRef<IntersectionObserver>(
-    new IntersectionObserver(viewportChange)
-  );
+  // 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
@@ -95,45 +95,73 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   }, [model]);
 
   /**
-   * Function called when a message enter or leave the viewport.
+   * Observe the messages to update the current viewport and the unread messages.
    */
-  function viewportChange(entries: IntersectionObserverEntry[]) {
-    const unread = [...model.unreadMessages];
-    let unreadModified = false;
-    entries.forEach(entry => {
-      const index = parseInt(entry.target.getAttribute('data-index') ?? '');
-      if (!isNaN(index)) {
-        if (unread.length) {
-          const unreadIdx = unread.indexOf(index);
-          if (unreadIdx !== -1 && entry.isIntersecting) {
-            unread.splice(unreadIdx, 1);
-            unreadModified = true;
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      // Used on first rendering, to ensure all the message as been rendered once.
+      if (!allRendered) {
+        Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+          setAllRendered(true);
+        });
+      }
+
+      const unread = [...model.unreadMessages];
+      let unreadModified = false;
+      const inViewport = [...(model.messagesInViewport ?? [])];
+      entries.forEach(entry => {
+        const index = parseInt(entry.target.getAttribute('data-index') ?? '');
+        if (!isNaN(index)) {
+          const viewportIdx = inViewport.indexOf(index);
+          if (!entry.isIntersecting && viewportIdx !== -1) {
+            inViewport.splice(viewportIdx, 1);
+          } else if (entry.isIntersecting && viewportIdx === -1) {
+            inViewport.push(index);
+          }
+          if (unread.length) {
+            const unreadIdx = unread.indexOf(index);
+            if (unreadIdx !== -1 && entry.isIntersecting) {
+              unread.splice(unreadIdx, 1);
+              unreadModified = true;
+            }
           }
         }
-        const viewportIdx = inViewport.current.indexOf(index);
-        if (!entry.isIntersecting && viewportIdx !== -1) {
-          inViewport.current.splice(viewportIdx, 1);
-        } else if (entry.isIntersecting && viewportIdx === -1) {
-          inViewport.current.push(index);
-        }
+      });
+
+      props.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
+      // before they are rendered.
+      if (allRendered && unreadModified) {
+        model.unreadMessages = unread;
       }
     });
 
-    props.model.messagesInViewport = inViewport.current;
-    if (unreadModified) {
-      props.model.unreadMessages = unread;
-    }
+    /**
+     * Observe the messages.
+     */
+    listRef.current.forEach(item => {
+      if (item) {
+        observer.observe(item);
+      }
+    });
 
     return () => {
-      observerRef.current?.disconnect();
+      listRef.current.forEach(item => {
+        if (item) {
+          observer.unobserve(item);
+        }
+      });
     };
-  }
+  }, [messages, allRendered]);
 
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
         <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
           {messages.map((message, i) => {
+            renderedPromise.current[i] = new PromiseDelegate();
             return (
               // extra div needed to ensure each bubble is on a new line
               <Box
@@ -147,8 +175,9 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                 <ChatMessage
                   {...props}
                   message={message}
-                  observer={observerRef.current}
                   index={i}
+                  renderedPromise={renderedPromise.current[i]}
+                  ref={el => (listRef.current[i] = el)}
                 />
               </Box>
             );
@@ -156,7 +185,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
         </Box>
         <Writers writers={currentWriters}></Writers>
       </ScrollContainer>
-      <Navigation {...props} refMsgBox={refMsgBox} />
+      <Navigation {...props} refMsgBox={refMsgBox} allRendered={allRendered} />
     </>
   );
 }
@@ -293,102 +322,88 @@ type ChatMessageProps = BaseMessageProps & {
    */
   index: number;
   /**
-   * The intersection observer for all the messages.
+   * The promise to resolve when the message is rendered.
    */
-  observer: IntersectionObserver | null;
+  renderedPromise: PromiseDelegate<void>;
 };
 
 /**
  * The message component body.
  */
-export function ChatMessage(props: ChatMessageProps): JSX.Element {
-  const { message, model, rmRegistry } = props;
-  const elementRef = useRef<HTMLDivElement>(null);
-  const [edit, setEdit] = useState<boolean>(false);
-  const [deleted, setDeleted] = useState<boolean>(false);
-  const [canEdit, setCanEdit] = useState<boolean>(false);
-  const [canDelete, setCanDelete] = useState<boolean>(false);
-
-  // Add the current message to the observer, to actualize viewport and unread messages.
-  useEffect(() => {
-    if (elementRef.current === null) {
-      return;
-    }
+export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
+  (props, ref): JSX.Element => {
+    const { message, model, rmRegistry } = props;
+    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(() => {
+      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);
+        }
+      } else {
+        setCanEdit(false);
+        setCanDelete(false);
+      }
+    }, [model, message]);
 
-    // If the observer is defined, let's observe the message.
-    props.observer?.observe(elementRef.current);
+    // Cancel the current edition of the message.
+    const cancelEdition = (): void => {
+      setEdit(false);
+    };
 
-    return () => {
-      if (elementRef.current !== null) {
-        props.observer?.unobserve(elementRef.current);
+    // Update the content of the message.
+    const updateMessage = (id: string, input: string): void => {
+      if (!canEdit) {
+        return;
       }
+      // Update the message
+      const updatedMessage = { ...message };
+      updatedMessage.body = input;
+      model.updateMessage!(id, updatedMessage);
+      setEdit(false);
     };
-  }, [model]);
 
-  // Look if the message can be deleted or edited.
-  useEffect(() => {
-    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);
+    // Delete the message.
+    const deleteMessage = (id: string): void => {
+      if (!canDelete) {
+        return;
       }
-    } else {
-      setCanEdit(false);
-      setCanDelete(false);
-    }
-  }, [model, message]);
-
-  // Cancel the current edition of the message.
-  const cancelEdition = (): void => {
-    setEdit(false);
-  };
-
-  // Update the content of the message.
-  const updateMessage = (id: string, input: string): void => {
-    if (!canEdit) {
-      return;
-    }
-    // Update the message
-    const updatedMessage = { ...message };
-    updatedMessage.body = input;
-    model.updateMessage!(id, updatedMessage);
-    setEdit(false);
-  };
-
-  // Delete the message.
-  const deleteMessage = (id: string): void => {
-    if (!canDelete) {
-      return;
-    }
-    model.deleteMessage!(id);
-  };
+      model.deleteMessage!(id);
+    };
 
-  // Empty if the message has been deleted.
-  return deleted ? (
-    <div ref={elementRef} data-index={props.index}></div>
-  ) : (
-    <div ref={elementRef} data-index={props.index}>
-      {edit && canEdit ? (
-        <ChatInput
-          value={message.body}
-          onSend={(input: string) => updateMessage(message.id, input)}
-          onCancel={() => cancelEdition()}
-          model={model}
-          hideIncludeSelection={true}
-        />
-      ) : (
-        <RendermimeMarkdown
-          rmRegistry={rmRegistry}
-          markdownStr={message.body}
-          model={model}
-          edit={canEdit ? () => setEdit(true) : undefined}
-          delete={canDelete ? () => deleteMessage(message.id) : undefined}
-        />
-      )}
-    </div>
-  );
-}
+    // Empty if the message has been deleted.
+    return deleted ? (
+      <div ref={ref} data-index={props.index}></div>
+    ) : (
+      <div ref={ref} data-index={props.index}>
+        {edit && canEdit ? (
+          <ChatInput
+            value={message.body}
+            onSend={(input: string) => updateMessage(message.id, input)}
+            onCancel={() => cancelEdition()}
+            model={model}
+            hideIncludeSelection={true}
+          />
+        ) : (
+          <MarkdownRenderer
+            rmRegistry={rmRegistry}
+            markdownStr={message.body}
+            model={model}
+            edit={canEdit ? () => setEdit(true) : undefined}
+            delete={canDelete ? () => deleteMessage(message.id) : undefined}
+            rendered={props.renderedPromise}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 /**
  * The writers component props.
@@ -437,6 +452,10 @@ type NavigationProps = BaseMessageProps & {
    * The reference to the messages container.
    */
   refMsgBox: React.RefObject<HTMLDivElement>;
+  /**
+   * Whether all the messages has been rendered once on first display.
+   */
+  allRendered: boolean;
 };
 
 /**
@@ -448,13 +467,20 @@ export function Navigation(props: NavigationProps): JSX.Element {
   const [unreadBefore, setUnreadBefore] = useState<number | null>(null);
   const [unreadAfter, setUnreadAfter] = useState<number | null>(null);
 
-  const gotoMessage = (msgIdx: number) => {
-    props.refMsgBox.current?.children.item(msgIdx)?.scrollIntoView();
+  const gotoMessage = (msgIdx: number, alignToTop: boolean = true) => {
+    props.refMsgBox.current?.children.item(msgIdx)?.scrollIntoView(alignToTop);
   };
 
   // Listen for change in unread messages, and find the first unread message before or
   // after the current viewport, to display navigation buttons.
   useEffect(() => {
+    // Do not attempt to display navigation until messages are rendered, it can lead to
+    // wrong assumption, because more messages are in the viewport before they are
+    // rendered.
+    if (!props.allRendered) {
+      return;
+    }
+
     const unreadChanged = (model: IChatModel, unreadIndexes: number[]) => {
       const viewport = model.messagesInViewport;
       if (!viewport) {
@@ -498,17 +524,13 @@ export function Navigation(props: NavigationProps): JSX.Element {
 
     unreadChanged(model, model.unreadMessages);
 
-    // Move to first the unread message or to last message on first rendering.
-    if (model.unreadMessages.length) {
-      gotoMessage(Math.min(...model.unreadMessages));
-    } else {
-      gotoMessage(model.messages.length - 1);
-    }
+    // Move to the last the message after all the messages have been first rendered.
+    gotoMessage(model.messages.length - 1, false);
 
     return () => {
       model.unreadChanged?.disconnect(unreadChanged);
     };
-  }, [model]);
+  }, [model, props.allRendered]);
 
   // Listen for change in the viewport, to add a navigation button if the last is not
   // in viewport.
@@ -544,10 +566,10 @@ export function Navigation(props: NavigationProps): JSX.Element {
       {(unreadAfter !== null || !lastInViewport) && (
         <Button
           className={`${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`}
-          onClick={() =>
-            gotoMessage!(
-              unreadAfter !== null ? unreadAfter : model.messages.length - 1
-            )
+          onClick={
+            unreadAfter === null
+              ? () => gotoMessage(model.messages.length - 1, false)
+              : () => gotoMessage(unreadAfter)
           }
           title={
             unreadAfter !== null

package/src/components/chat.tsx

@@ -54,6 +54,9 @@ export function Chat(props: Chat.IOptions): JSX.Element {
   return (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
+        // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=4.3.0.
+        // See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling
+        className="jp-ThemedContainer"
         // root box should not include padding as it offsets the vertical
         // scrollbar to the left
         sx={{

package/src/components/code-blocks/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './code-toolbar';
+export * from './copy-button';

package/src/components/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './chat';
+export * from './chat-input';
+export * from './chat-messages';
+export * from './code-blocks';
+export * from './input';
+export * from './jl-theme-provider';
+export * from './markdown-renderer';
+export * from './mui-extras';
+export * from './scroll-container';
+export * from './toolbar';

package/src/components/input/cancel-button.tsx

@@ -13,7 +13,6 @@ const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
  * The cancel button props.
  */
 export type CancelButtonProps = {
-  inputExists: boolean;
   onCancel: () => void;
 };
 
@@ -22,11 +21,9 @@ export type CancelButtonProps = {
  */
 export function CancelButton(props: CancelButtonProps): JSX.Element {
   const tooltip = 'Cancel edition';
-  const disabled = !props.inputExists;
   return (
     <TooltippedButton
       onClick={props.onCancel}
-      disabled={disabled}
       tooltip={tooltip}
       buttonProps={{
         size: 'small',

package/src/components/input/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './cancel-button';
+export * from './send-button';

package/src/components/{rendermime-markdown.tsx → markdown-renderer.tsx}

@@ -4,6 +4,7 @@
  */
 
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { PromiseDelegate } from '@lumino/coreutils';
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -12,14 +13,36 @@ import { MessageToolbar } from './toolbar';
 import { IChatModel } from '../model';
 
 const MD_MIME_TYPE = 'text/markdown';
-const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
+const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
 
-type RendermimeMarkdownProps = {
+type MarkdownRendererProps = {
+  /**
+   * The string to render.
+   */
   markdownStr: string;
+  /**
+   * The rendermime registry.
+   */
   rmRegistry: IRenderMimeRegistry;
-  appendContent?: boolean;
+  /**
+   * The model of the chat.
+   */
   model: IChatModel;
+  /**
+   * The promise to resolve when the message is rendered.
+   */
+  rendered: PromiseDelegate<void>;
+  /**
+   * Whether to append the content to the existing content or not.
+   */
+  appendContent?: boolean;
+  /**
+   * The function to call to edit a message.
+   */
   edit?: () => void;
+  /**
+   * the function to call to delete a message.
+   */
   delete?: () => void;
 };
 
@@ -33,13 +56,13 @@ type RendermimeMarkdownProps = {
  */
 function escapeLatexDelimiters(text: string) {
   return text
-    .replace('\\(/g', '\\\\(')
-    .replace('\\)/g', '\\\\)')
-    .replace('\\[/g', '\\\\[')
-    .replace('\\]/g', '\\\\]');
+    .replace(/\\\(/g, '\\\\(')
+    .replace(/\\\)/g, '\\\\)')
+    .replace(/\\\[/g, '\\\\[')
+    .replace(/\\\]/g, '\\\\]');
 }
 
-function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
+function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
   const appendContent = props.appendContent || false;
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
@@ -90,13 +113,16 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
 
       setCodeToolbarDefns(newCodeToolbarDefns);
       setRenderedContent(renderer.node);
+
+      // Resolve the rendered promise.
+      props.rendered.resolve();
     };
 
     renderContent();
   }, [props.markdownStr, props.rmRegistry]);
 
   return (
-    <div className={RENDERMIME_MD_CLASS}>
+    <div className={MD_RENDERED_CLASS}>
       {renderedContent &&
         (appendContent ? (
           <div ref={node => node && node.appendChild(renderedContent)} />
@@ -120,4 +146,4 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
   );
 }
 
-export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);
+export const MarkdownRenderer = React.memo(MarkdownRendererBase);

package/src/components/mui-extras/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './contrasting-tooltip';
+export * from './tooltipped-button';
+export * from './tooltipped-icon-button';

package/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 export * from './active-cell-manager';
+export * from './components';
 export * from './icons';
 export * from './model';
 export * from './registry';

package/src/model.ts

@@ -182,6 +182,10 @@ export class ChatModel implements IChatModel {
    * Create a new chat model.
    */
   constructor(options: ChatModel.IOptions = {}) {
+    if (options.id) {
+      this.id = options.id;
+    }
+
     const config = options.config ?? {};
 
     // Stack consecutive messages from the same user by default.
@@ -592,6 +596,11 @@ export namespace ChatModel {
    * The instantiation options for a ChatModel.
    */
   export interface IOptions {
+    /**
+     * The id of the chat.
+     */
+    id?: string;
+
     /**
      * Initial config for the chat widget.
      */

package/src/types.ts

@@ -23,10 +23,6 @@ export interface IConfig {
    * Whether to send a message via Shift-Enter instead of Enter.
    */
   sendWithShiftEnter?: boolean;
-  /**
-   * Last read message (no use yet).
-   */
-  lastRead?: number;
   /**
    * Whether to stack consecutive messages from same user.
    */

package/style/chat.css

@@ -14,15 +14,23 @@
   padding: 0 1em;
 }
 
-.jp-chat-rendermime-markdown {
+.jp-chat-rendered-markdown {
   position: relative;
 }
 
-.jp-chat-rendermime-markdown .jp-RenderedHTMLCommon {
+/*
+ *
+ * Selectors must be nested in `.jp-ThemedContainer` to have a higher
+ * specificity than selectors in rules provided by JupyterLab.
+ *
+ * See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling
+ * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090
+ */
+.jp-ThemedContainer .jp-chat-rendered-markdown .jp-RenderedHTMLCommon {
   padding-right: 0;
 }
 
-.jp-chat-rendermime-markdown pre {
+.jp-ThemedContainer .jp-chat-rendered-markdown pre {
   background-color: var(--jp-cell-editor-background);
   overflow-x: auto;
   white-space: pre;
@@ -31,13 +39,13 @@
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
-.jp-chat-rendermime-markdown pre > code {
+.jp-ThemedContainer .jp-chat-rendered-markdown pre > code {
   background-color: inherit;
   overflow-x: inherit;
   white-space: inherit;
 }
 
-.jp-chat-rendermime-markdown mjx-container {
+.jp-ThemedContainer .jp-chat-rendered-markdown mjx-container {
   font-size: 119%;
 }
 
@@ -50,7 +58,7 @@
   color: var(--jp-ui-font-color3);
 }
 
-.jp-chat-rendermime-markdown:hover .jp-chat-toolbar {
+.jp-chat-rendered-markdown:hover .jp-chat-toolbar {
   display: inherit;
 }