@jupyter/chat 0.10.1 → 0.12.0

package/lib/markdown-renderer.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
+export const MD_MIME_TYPE = 'text/markdown';
+/**
+ * A namespace for the MarkdownRenderer.
+ */
+export var MarkdownRenderer;
+(function (MarkdownRenderer) {
+    /**
+     * 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.
+     */
+    async function renderContent(options) {
+        var _a;
+        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.
+        (_a = rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
+        return renderer;
+    }
+    MarkdownRenderer.renderContent = renderContent;
+    /**
+     * 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`.
+     */
+    function escapeLatexDelimiters(text) {
+        return text
+            .replace(/\\\(/g, '\\\\(')
+            .replace(/\\\)/g, '\\\\)')
+            .replace(/\\\[/g, '\\\\[')
+            .replace(/\\\]/g, '\\\\]');
+    }
+    MarkdownRenderer.escapeLatexDelimiters = escapeLatexDelimiters;
+})(MarkdownRenderer || (MarkdownRenderer = {}));

package/lib/model.d.ts

@@ -38,6 +38,10 @@ export interface IChatModel extends IDisposable {
      * The input model.
      */
     readonly input: IInputModel;
+    /**
+     * The current writer list.
+     */
+    readonly writers: IChatModel.IWriter[];
     /**
      * Get the active cell manager.
      */
@@ -57,7 +61,7 @@ export interface IChatModel extends IDisposable {
     /**
      * A signal emitting when the messages list is updated.
      */
-    get configChanged(): ISignal<IChatModel, IConfig>;
+    readonly configChanged: ISignal<IChatModel, IConfig>;
     /**
      * A signal emitting when unread messages change.
      */
@@ -69,7 +73,11 @@ export interface IChatModel extends IDisposable {
     /**
      * A signal emitting when the writers change.
      */
-    readonly writersChanged?: ISignal<IChatModel, IUser[]>;
+    readonly writersChanged?: ISignal<IChatModel, IChatModel.IWriter[]>;
+    /**
+     * A signal emitting when the message edition input changed change.
+     */
+    readonly messageEditionAdded: ISignal<IChatModel, IChatModel.IMessageEdition>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -130,11 +138,19 @@ export interface IChatModel extends IDisposable {
     /**
      * Update the current writers list.
      */
-    updateWriters(writers: IUser[]): void;
+    updateWriters(writers: IChatModel.IWriter[]): void;
     /**
      * Create the chat context that will be passed to the input model.
      */
     createChatContext(): IChatContext;
+    /**
+     * Get the input model of the edited message, given its id.
+     */
+    getEditionModel(messageID: string): IInputModel | undefined;
+    /**
+     * Add an input model of the edited message.
+     */
+    addEditionModel(messageID: string, inputModel: IInputModel): void;
 }
 /**
  * An abstract implementation of IChatModel.
@@ -165,6 +181,10 @@ export declare abstract class AbstractChatModel implements IChatModel {
      * The input model.
      */
     get input(): IInputModel;
+    /**
+     * The current writer list.
+     */
+    get writers(): IChatModel.IWriter[];
     /**
      * Get the active cell manager.
      */
@@ -216,7 +236,11 @@ export declare abstract class AbstractChatModel implements IChatModel {
     /**
      * A signal emitting when the writers change.
      */
-    get writersChanged(): ISignal<IChatModel, IUser[]>;
+    get writersChanged(): ISignal<IChatModel, IChatModel.IWriter[]>;
+    /**
+     * A signal emitting when the message edition input changed change.
+     */
+    get messageEditionAdded(): ISignal<IChatModel, IChatModel.IMessageEdition>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -266,11 +290,19 @@ export declare abstract class AbstractChatModel implements IChatModel {
      * Update the current writers list.
      * This implementation only propagate the list via a signal.
      */
-    updateWriters(writers: IUser[]): void;
+    updateWriters(writers: IChatModel.IWriter[]): void;
     /**
      * Create the chat context that will be passed to the input model.
      */
     abstract createChatContext(): IChatContext;
+    /**
+     * Get the input model of the edited message, given its id.
+     */
+    getEditionModel(messageID: string): IInputModel | undefined;
+    /**
+     * Add an input model of the edited message.
+     */
+    addEditionModel(messageID: string, inputModel: IInputModel): void;
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.
@@ -299,11 +331,14 @@ export declare abstract class AbstractChatModel implements IChatModel {
     private _selectionWatcher;
     private _documentManager;
     private _notificationId;
+    private _writers;
+    private _messageEditions;
     private _messagesUpdated;
     private _configChanged;
     private _unreadChanged;
     private _viewportChanged;
     private _writersChanged;
+    private _messageEditionAdded;
 }
 /**
  * The chat model namespace.
@@ -338,6 +373,32 @@ export declare namespace IChatModel {
          */
         documentManager?: IDocumentManager | null;
     }
+    /**
+     * Representation of a message edition.
+     */
+    interface IMessageEdition {
+        /**
+         * The id of the edited message.
+         */
+        id: string;
+        /**
+         * The model of the input editing the message.
+         */
+        model: IInputModel;
+    }
+    /**
+     * Writer interface, including the message ID if the writer is editing a message.
+     */
+    interface IWriter {
+        /**
+         * The user currently writing.
+         */
+        user: IUser;
+        /**
+         * The message ID (optional)
+         */
+        messageID?: string;
+    }
 }
 /**
  * Interface of the chat context, a 'subset' of the model with readonly attribute,

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/lib/types.d.ts

@@ -12,6 +12,10 @@ export interface IUser {
      * The string to use to mention a user in the chat.
      */
     mention_name?: string;
+    /**
+     * Boolean identifying if user is a bot.
+     */
+    bot?: boolean;
 }
 /**
  * The configuration interface.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.10.1",
+  "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,9 +19,12 @@ 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';
 import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -58,6 +61,14 @@ type BaseMessageProps = {
    * The input toolbar registry.
    */
   inputToolbarRegistry: IInputToolbarRegistry;
+  /**
+   * The footer registry.
+   */
+  messageFooterRegistry?: IMessageFooterRegistry;
+  /**
+   * The welcome message.
+   */
+  welcomeMessage?: string;
 };
 
 /**
@@ -100,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);
@@ -178,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();
@@ -198,6 +215,13 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
                   renderedPromise={renderedPromise.current[i]}
                   ref={el => (listRef.current[i] = el)}
                 />
+                {props.messageFooterRegistry && (
+                  <MessageFooter
+                    registry={props.messageFooterRegistry}
+                    message={message}
+                    model={model}
+                  />
+                )}
               </Box>
             );
           })}
@@ -357,15 +381,19 @@ 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) {
           setCanEdit(model.updateMessage !== undefined);
           setCanDelete(model.deleteMessage !== undefined);
+          return;
+        }
+        if (message.sender.bot) {
+          setCanDelete(model.deleteMessage !== undefined);
         }
       } else {
         setCanEdit(false);
@@ -374,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);
     };
 
@@ -422,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);
     };
 
@@ -438,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}
           />
@@ -596,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

@@ -17,6 +17,7 @@ import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry, InputToolbarRegistry } from './input';
 import { AttachmentOpenerContext } from '../context';
+import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 
@@ -34,6 +35,8 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         model={model}
         chatCommandRegistry={props.chatCommandRegistry}
         inputToolbarRegistry={inputToolbarRegistry}
+        messageFooterRegistry={props.messageFooterRegistry}
+        welcomeMessage={props.welcomeMessage}
       />
       <ChatInput
         sx={{
@@ -125,6 +128,14 @@ export namespace Chat {
      * The input toolbar registry
      */
     inputToolbarRegistry?: IInputToolbarRegistry;
+    /**
+     * 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/messages/footer.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Box } from '@mui/material';
+import React from 'react';
+import {
+  IMessageFooterRegistry,
+  MessageFooterSectionProps
+} from '../../footers';
+
+/**
+ * The chat footer component properties.
+ */
+export interface IMessageFootersProps extends MessageFooterSectionProps {
+  /**
+   * The chat footer registry.
+   */
+  registry: IMessageFooterRegistry;
+}
+
+/**
+ * The chat footer component, which displays footer components on a row according to
+ * their respective positions.
+ */
+export function MessageFooter(props: IMessageFootersProps): JSX.Element {
+  const { message, model, registry } = props;
+  const footer = registry.getFooter();
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+      {footer.left?.component ? (
+        <footer.left.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.center?.component ? (
+        <footer.center.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+      {footer.right?.component ? (
+        <footer.right.component message={message} model={model} />
+      ) : (
+        <div />
+      )}
+    </Box>
+  );
+}

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);