@jupyter/chat 0.11.0 → 0.12.0

package/lib/model.js

@@ -2,6 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { ArrayExt } from '@lumino/algorithm';
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
 import { replaceMentionToSpan } from './utils';
@@ -23,11 +24,14 @@ export class AbstractChatModel {
         this._name = '';
         this._isDisposed = false;
         this._notificationId = null;
+        this._writers = [];
+        this._messageEditions = new Map();
         this._messagesUpdated = new Signal(this);
         this._configChanged = new Signal(this);
         this._unreadChanged = new Signal(this);
         this._viewportChanged = new Signal(this);
         this._writersChanged = new Signal(this);
+        this._messageEditionAdded = new Signal(this);
         if (options.id) {
             this.id = options.id;
         }
@@ -83,6 +87,12 @@ export class AbstractChatModel {
     get input() {
         return this._inputModel;
     }
+    /**
+     * The current writer list.
+     */
+    get writers() {
+        return this._writers;
+    }
     /**
      * Get the active cell manager.
      */
@@ -223,6 +233,12 @@ export class AbstractChatModel {
     get writersChanged() {
         return this._writersChanged;
     }
+    /**
+     * A signal emitting when the message edition input changed change.
+     */
+    get messageEditionAdded() {
+        return this._messageEditionAdded;
+    }
     /**
      * Clear the message list.
      */
@@ -327,7 +343,34 @@ export class AbstractChatModel {
      * This implementation only propagate the list via a signal.
      */
     updateWriters(writers) {
-        this._writersChanged.emit(writers);
+        const compareWriters = (a, b) => {
+            return (a.user.username === b.user.username &&
+                a.user.display_name === b.user.display_name &&
+                a.messageID === b.messageID);
+        };
+        if (!ArrayExt.shallowEqual(this._writers, writers, compareWriters)) {
+            this._writers = writers;
+            this._writersChanged.emit(writers);
+        }
+    }
+    /**
+     * Get the input model of the edited message, given its id.
+     */
+    getEditionModel(messageID) {
+        return this._messageEditions.get(messageID);
+    }
+    /**
+     * Add an input model of the edited message.
+     */
+    addEditionModel(messageID, inputModel) {
+        var _a;
+        // Dispose of an hypothetic previous model for this message.
+        (_a = this.getEditionModel(messageID)) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._messageEditions.set(messageID, inputModel);
+        this._messageEditionAdded.emit({ id: messageID, model: inputModel });
+        inputModel.onDisposed.connect(() => {
+            this._messageEditions.delete(messageID);
+        });
     }
     /**
      * Add unread messages to the list.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -54,6 +54,7 @@
     "@jupyterlab/notebook": "^4.2.0",
     "@jupyterlab/rendermime": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
+    "@lumino/algorithm": "^2.0.0",
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/disposable": "^2.0.0",

package/src/components/chat-messages.tsx

@@ -19,8 +19,9 @@ import React, { useEffect, useState, useRef, forwardRef } from 'react';
 import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry } from './input';
-import { MarkdownRenderer } from './markdown-renderer';
 import { MessageFooter } from './messages/footer';
+import { MessageRenderer } from './messages/message-renderer';
+import { WelcomeMessage } from './messages/welcome';
 import { ScrollContainer } from './scroll-container';
 import { IChatCommandRegistry } from '../chat-commands';
 import { IMessageFooterRegistry } from '../footers';
@@ -64,6 +65,10 @@ type BaseMessageProps = {
    * The footer registry.
    */
   messageFooterRegistry?: IMessageFooterRegistry;
+  /**
+   * The welcome message.
+   */
+  welcomeMessage?: string;
 };
 
 /**
@@ -106,8 +111,8 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
       setMessages([...model.messages]);
     }
 
-    function handleWritersChange(_: IChatModel, writers: IUser[]) {
-      setCurrentWriters(writers);
+    function handleWritersChange(_: IChatModel, writers: IChatModel.IWriter[]) {
+      setCurrentWriters(writers.map(writer => writer.user));
     }
 
     model.messagesUpdated.connect(handleChatEvents);
@@ -184,6 +189,12 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
+        {props.welcomeMessage && (
+          <WelcomeMessage
+            rmRegistry={props.rmRegistry}
+            content={props.welcomeMessage}
+          />
+        )}
         <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
           {messages.map((message, i) => {
             renderedPromise.current[i] = new PromiseDelegate();
@@ -370,10 +381,10 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
     const [canDelete, setCanDelete] = useState<boolean>(false);
-    const [inputModel, setInputModel] = useState<IInputModel | null>(null);
 
     // 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) {
@@ -391,36 +402,36 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     }, [model, message]);
 
     // Create an input model only if the message is edited.
-    useEffect(() => {
-      if (edit && canEdit) {
-        setInputModel(() => {
-          let body = message.body;
-          message.mentions?.forEach(user => {
-            body = replaceSpanToMention(body, user);
-          });
-          return 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: message.attachments,
-            mentions: message.mentions
-          });
-        });
-      } else {
-        setInputModel(null);
+    const startEdition = (): void => {
+      if (!canEdit) {
+        return;
       }
-    }, [edit]);
+      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: message.attachments,
+        mentions: message.mentions
+      });
+      model.addEditionModel(message.id, inputModel);
+      setEdit(true);
+    };
 
     // Cancel the current edition of the message.
     const cancelEdition = (): void => {
+      model.getEditionModel(message.id)?.dispose();
       setEdit(false);
     };
 
@@ -439,6 +450,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       updatedMessage.attachments = inputModel.attachments;
       updatedMessage.mentions = inputModel.mentions;
       model.updateMessage!(id, updatedMessage);
+      model.getEditionModel(message.id)?.dispose();
       setEdit(false);
     };
 
@@ -455,19 +467,19 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       <div ref={ref} data-index={props.index}></div>
     ) : (
       <div ref={ref} data-index={props.index}>
-        {edit && canEdit && inputModel ? (
+        {edit && canEdit && model.getEditionModel(message.id) ? (
           <ChatInput
             onCancel={() => cancelEdition()}
-            model={inputModel}
+            model={model.getEditionModel(message.id)!}
             chatCommandRegistry={props.chatCommandRegistry}
             toolbarRegistry={props.inputToolbarRegistry}
           />
         ) : (
-          <MarkdownRenderer
+          <MessageRenderer
             rmRegistry={rmRegistry}
             markdownStr={message.body}
             model={model}
-            edit={canEdit ? () => setEdit(true) : undefined}
+            edit={canEdit ? startEdition : undefined}
             delete={canDelete ? () => deleteMessage(message.id) : undefined}
             rendered={props.renderedPromise}
           />
@@ -613,7 +625,10 @@ export function Navigation(props: NavigationProps): JSX.Element {
   // in viewport.
   useEffect(() => {
     const viewportChanged = (model: IChatModel, viewport: number[]) => {
-      setLastInViewport(viewport.includes(model.messages.length - 1));
+      setLastInViewport(
+        model.messages.length === 0 ||
+          viewport.includes(model.messages.length - 1)
+      );
     };
 
     model.viewportChanged?.connect(viewportChanged);

package/src/components/chat.tsx

@@ -36,6 +36,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         chatCommandRegistry={props.chatCommandRegistry}
         inputToolbarRegistry={inputToolbarRegistry}
         messageFooterRegistry={props.messageFooterRegistry}
+        welcomeMessage={props.welcomeMessage}
       />
       <ChatInput
         sx={{
@@ -131,6 +132,10 @@ export namespace Chat {
      * The footer registry.
      */
     messageFooterRegistry?: IMessageFooterRegistry;
+    /**
+     * The welcome message.
+     */
+    welcomeMessage?: string;
   }
 
   /**

package/src/components/index.ts

@@ -9,7 +9,6 @@ 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/{markdown-renderer.tsx → messages/message-renderer.tsx}

@@ -8,14 +8,15 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-import { CodeToolbar, CodeToolbarProps } from './code-blocks/code-toolbar';
-import { MessageToolbar } from './toolbar';
-import { IChatModel } from '../model';
+import { CodeToolbar, CodeToolbarProps } from '../code-blocks/code-toolbar';
+import { MessageToolbar } from '../toolbar';
+import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+import { IChatModel } from '../../model';
 
-const MD_MIME_TYPE = 'text/markdown';
-const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
-
-type MarkdownRendererProps = {
+/**
+ * The type of the props for the MessageRenderer component.
+ */
+type MessageRendererProps = {
   /**
    * The string to render.
    */
@@ -47,22 +48,10 @@ type MarkdownRendererProps = {
 };
 
 /**
- * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
- * after the initial MarkDown render. For example, this function takes '\(` and
- * returns `\\(`.
- *
- * Required for proper rendering of MarkDown + LaTeX markup in the chat by
- * `ILatexTypesetter`.
+ * The message renderer base component.
  */
-function escapeLatexDelimiters(text: string) {
-  return text
-    .replace(/\\\(/g, '\\\\(')
-    .replace(/\\\)/g, '\\\\)')
-    .replace(/\\\[/g, '\\\\[')
-    .replace(/\\\]/g, '\\\\]');
-}
-
-function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
+function MessageRendererBase(props: MessageRendererProps): JSX.Element {
+  const { markdownStr, rmRegistry } = props;
   const appendContent = props.appendContent || false;
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
@@ -75,26 +64,11 @@ function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
 
   useEffect(() => {
     const renderContent = async () => {
-      // initialize mime model
-      const mdStr = escapeLatexDelimiters(props.markdownStr);
-      const model = props.rmRegistry.createModel({
-        data: { [MD_MIME_TYPE]: mdStr }
+      const renderer = await MarkdownRenderer.renderContent({
+        content: markdownStr,
+        rmRegistry
       });
 
-      const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
-
-      // step 1: render markdown
-      await renderer.renderModel(model);
-      props.rmRegistry.latexTypesetter?.typeset(renderer.node);
-      if (!renderer.node) {
-        throw new Error(
-          'Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.'
-        );
-      }
-
-      // step 2: render LaTeX via MathJax.
-      props.rmRegistry.latexTypesetter?.typeset(renderer.node);
-
       const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
 
       // Attach CodeToolbar root element to each <pre> block
@@ -119,7 +93,7 @@ function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
     };
 
     renderContent();
-  }, [props.markdownStr, props.rmRegistry]);
+  }, [markdownStr, rmRegistry]);
 
   return (
     <div className={MD_RENDERED_CLASS}>
@@ -146,4 +120,4 @@ function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
   );
 }
 
-export const MarkdownRenderer = React.memo(MarkdownRendererBase);
+export const MessageRenderer = React.memo(MessageRendererBase);

package/src/components/messages/welcome.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { classes } from '@jupyterlab/ui-components';
+import React, { useEffect, useRef } from 'react';
+import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+
+const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
+
+/**
+ * The welcome message component.
+ * This message is displayed on top of the chat messages, and is rendered using a
+ * markdown renderer.
+ */
+export function WelcomeMessage(props: MarkdownRenderer.IOptions): JSX.Element {
+  const { rmRegistry } = props;
+  const content = props.content + '\n----\n';
+
+  // ref that tracks the content container to store the rendermime node in
+  const renderingContainer = useRef<HTMLDivElement | null>(null);
+  // ref that tracks whether the rendermime node has already been inserted
+  const renderingInserted = useRef<boolean>(false);
+
+  /**
+   * Effect: use Rendermime to render `props.markdownStr` into an HTML element,
+   * and insert it into `renderingContainer` if not yet inserted.
+   */
+  useEffect(() => {
+    const renderContent = async () => {
+      const renderer = await MarkdownRenderer.renderContent({
+        content,
+        rmRegistry
+      });
+
+      // insert the rendering into renderingContainer if not yet inserted
+      if (renderingContainer.current !== null && !renderingInserted.current) {
+        renderingContainer.current.appendChild(renderer.node);
+        renderingInserted.current = true;
+      }
+    };
+
+    renderContent();
+  }, [content]);
+
+  return (
+    <div className={classes(MD_RENDERED_CLASS, WELCOME_MESSAGE_CLASS)}>
+      <div ref={renderingContainer} />
+    </div>
+  );
+}

package/src/components/scroll-container.tsx

@@ -43,7 +43,7 @@ export function ScrollContainer(props: ScrollContainerProps): JSX.Element {
         ...props.sx
       }}
     >
-      <Box sx={{ minHeight: '100.01%' }}>{props.children}</Box>
+      <Box>{props.children}</Box>
       <Box sx={{ overflowAnchor: 'auto', height: '1px' }} />
     </Box>
   );

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './components';
 export * from './footers';
 export * from './icons';
 export * from './input-model';
+export * from './markdown-renderer';
 export * from './model';
 export * from './registry';
 export * from './selection-watcher';

package/src/input-model.ts

@@ -147,6 +147,11 @@ export interface IInputModel extends IDisposable {
    * Clear mentions list.
    */
   clearMentions(): void;
+
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  readonly onDisposed: ISignal<InputModel, void>;
 }
 
 /**
@@ -411,9 +416,17 @@ export class InputModel implements IInputModel {
     if (this.isDisposed) {
       return;
     }
+    this._onDisposed.emit();
     this._isDisposed = true;
   }
 
+  /**
+   * A signal emitting when disposing of the model.
+   */
+  get onDisposed(): ISignal<InputModel, void> {
+    return this._onDisposed;
+  }
+
   /**
    * Whether the input model is disposed.
    */
@@ -438,6 +451,7 @@ export class InputModel implements IInputModel {
   private _configChanged = new Signal<IInputModel, InputModel.IConfig>(this);
   private _focusInputSignal = new Signal<InputModel, void>(this);
   private _attachmentsChanged = new Signal<InputModel, IAttachment[]>(this);
+  private _onDisposed = new Signal<InputModel, void>(this);
   private _isDisposed = false;
 }
 

package/src/markdown-renderer.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IRenderMime, IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+export const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
+export const MD_MIME_TYPE = 'text/markdown';
+
+/**
+ * A namespace for the MarkdownRenderer.
+ */
+export namespace MarkdownRenderer {
+  /**
+   * The options for the MarkdownRenderer.
+   */
+  export interface IOptions {
+    /**
+     * The rendermime registry.
+     */
+    rmRegistry: IRenderMimeRegistry;
+    /**
+     * The markdown content.
+     */
+    content: string;
+  }
+
+  /**
+   * A generic function to render a markdown string into a DOM element.
+   *
+   * @param content - the markdown content.
+   * @param rmRegistry - the rendermime registry.
+   * @returns a promise that resolves to the renderer.
+   */
+  export async function renderContent(
+    options: IOptions
+  ): Promise<IRenderMime.IRenderer> {
+    const { rmRegistry, content } = options;
+
+    // initialize mime model
+    const mdStr = escapeLatexDelimiters(content);
+    const model = rmRegistry.createModel({
+      data: { [MD_MIME_TYPE]: mdStr }
+    });
+
+    const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
+
+    // step 1: render markdown
+    await renderer.renderModel(model);
+    if (!renderer.node) {
+      throw new Error(
+        'Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.'
+      );
+    }
+
+    // step 2: render LaTeX via MathJax.
+    rmRegistry.latexTypesetter?.typeset(renderer.node);
+
+    return renderer;
+  }
+
+  /**
+   * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
+   * after the initial MarkDown render. For example, this function takes '\(` and
+   * returns `\\(`.
+   *
+   * Required for proper rendering of MarkDown + LaTeX markup in the chat by
+   * `ILatexTypesetter`.
+   */
+  export function escapeLatexDelimiters(text: string) {
+    return text
+      .replace(/\\\(/g, '\\\\(')
+      .replace(/\\\)/g, '\\\\)')
+      .replace(/\\\[/g, '\\\\[')
+      .replace(/\\\]/g, '\\\\]');
+  }
+}