@jupyter/chat 0.19.0-alpha.0 → 0.19.0-alpha.2

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

@@ -14,28 +14,28 @@ import {
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
+import { InputToolbarRegistry } from './toolbar-registry';
+import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
-import {
-  IInputToolbarRegistry,
-  InputToolbarRegistry,
-  useChatCommands
-} from '.';
+import { useChatContext } from '../../context';
 import { IInputModel, InputModel } from '../../input-model';
-import { IChatCommandRegistry } from '../../registers';
-import { IAttachment, ChatArea } from '../../types';
 import { IChatModel } from '../../model';
 import { InputWritingIndicator } from './writing-indicator';
+import { IAttachment } from '../../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
-  const { model, toolbarRegistry } = props;
+  const { model } = props;
+  const { area, chatCommandRegistry, inputToolbarRegistry } = useChatContext();
+  const chatModel = useChatContext().model;
+
   const [input, setInput] = useState<string>(model.value);
   const inputRef = useRef<HTMLInputElement>();
 
-  const chatCommands = useChatCommands(model, props.chatCommandRegistry);
+  const chatCommands = useChatCommands(model, chatCommandRegistry);
 
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
     model.config.sendWithShiftEnter ?? false
@@ -99,22 +99,22 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
    */
   useEffect(() => {
     const updateToolbar = () => {
-      setToolbarElements(toolbarRegistry.getItems());
+      setToolbarElements(inputToolbarRegistry?.getItems() || []);
     };
 
-    toolbarRegistry.itemsChanged.connect(updateToolbar);
+    inputToolbarRegistry?.itemsChanged.connect(updateToolbar);
     updateToolbar();
 
     return () => {
-      toolbarRegistry.itemsChanged.disconnect(updateToolbar);
+      inputToolbarRegistry?.itemsChanged.disconnect(updateToolbar);
     };
-  }, [toolbarRegistry]);
+  }, [inputToolbarRegistry]);
 
   /**
    * Handle the changes in the writers list.
    */
   useEffect(() => {
-    if (!props.chatModel) {
+    if (!chatModel) {
       return;
     }
 
@@ -124,15 +124,15 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     };
 
     // Set initial writers state
-    const initialWriters = props.chatModel.writers;
+    const initialWriters = chatModel.writers;
     setWriters(initialWriters);
 
-    props.chatModel.writersChanged?.connect(updateWriters);
+    chatModel.writersChanged?.connect(updateWriters);
 
     return () => {
-      props.chatModel?.writersChanged?.disconnect(updateWriters);
+      chatModel?.writersChanged?.disconnect(updateWriters);
     };
-  }, [props.chatModel]);
+  }, [chatModel]);
 
   const inputExists = !!input.trim();
 
@@ -196,14 +196,14 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       (!sendWithShiftEnter && !event.shiftKey)
     ) {
       // Run all command providers
-      await props.chatCommandRegistry?.onSubmit(model);
+      await chatCommandRegistry?.onSubmit(model);
       model.send(model.value);
       event.stopPropagation();
       event.preventDefault();
     }
   }
 
-  const horizontalPadding = props.area === 'sidebar' ? 1.5 : 2;
+  const horizontalPadding = area === 'sidebar' ? 1.5 : 2;
 
   return (
     <Box
@@ -258,6 +258,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               variant="standard"
               className={INPUT_TEXTFIELD_CLASS}
               multiline
+              maxRows={10}
               onKeyDown={handleKeyDown}
               placeholder="Type a chat message, @ to mention..."
               inputRef={inputRef}
@@ -269,6 +270,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               sx={{
                 padding: 1.5,
                 margin: 0,
+                boxSizing: 'border-box',
                 backgroundColor: 'var(--jp-layout-color0)',
                 transition: 'background-color 0.2s ease',
                 '& .MuiInputBase-root': {
@@ -333,8 +335,8 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
             <item.element
               key={index}
               model={model}
-              chatCommandRegistry={props.chatCommandRegistry}
-              chatModel={props.chatModel}
+              chatCommandRegistry={chatCommandRegistry}
+              chatModel={chatModel}
               edit={props.edit}
             />
           ))}
@@ -357,10 +359,6 @@ export namespace ChatInput {
      * The input model.
      */
     model: IInputModel;
-    /**
-     * The toolbar registry.
-     */
-    toolbarRegistry: IInputToolbarRegistry;
     /**
      * The function to be called to cancel editing.
      */
@@ -369,18 +367,6 @@ export namespace ChatInput {
      * Custom mui/material styles.
      */
     sx?: SxProps<Theme>;
-    /**
-     * Chat command registry.
-     */
-    chatCommandRegistry?: IChatCommandRegistry;
-    /**
-     * The area where the chat is displayed.
-     */
-    area?: ChatArea;
-    /**
-     * The chat model.
-     */
-    chatModel?: IChatModel;
     /**
      * Whether the input is in edit mode (editing an existing message).
      * Defaults to false (new message mode).

package/src/components/messages/footer.tsx

@@ -6,19 +6,17 @@
 import { Box } from '@mui/material';
 import React from 'react';
 
-import {
-  IMessageFooterRegistry,
-  MessageFooterSectionProps
-} from '../../registers';
+import { useChatContext } from '../../context';
+import { IChatMessage } from '../../types';
 
 /**
  * The chat footer component properties.
  */
-export interface IMessageFootersProps extends MessageFooterSectionProps {
+export interface IMessageFootersProps {
   /**
-   * The chat footer registry.
+   * The chat model.
    */
-  registry: IMessageFooterRegistry;
+  message: IChatMessage;
 }
 
 /**
@@ -27,9 +25,13 @@ export interface IMessageFootersProps extends MessageFooterSectionProps {
  */
 export function MessageFooterComponent(
   props: IMessageFootersProps
-): JSX.Element {
-  const { message, model, registry } = props;
-  const footer = registry.getFooter();
+): JSX.Element | null {
+  const { message } = props;
+  const { model, messageFooterRegistry } = useChatContext();
+  if (!messageFooterRegistry) {
+    return null;
+  }
+  const footer = messageFooterRegistry.getFooter();
 
   return (
     <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>

package/src/components/messages/header.tsx

@@ -30,12 +30,16 @@ type ChatMessageHeaderProps = {
  * The message header component.
  */
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
-  // Don't render header for stacked messages or current user messages
-  if (props.message.stacked || props.isCurrentUser) {
+  const message = props.message;
+  // Don't render header for stacked messages not deleted or edited.
+  if (message.stacked && !message.deleted && !message.edited) {
     return <></>;
   }
+
+  // Flag to display only the deleted or edited information (stacked message).
+  const onlyState = message.stacked && (message.deleted || message.edited);
+
   const [datetime, setDatetime] = useState<Record<number, string>>({});
-  const message = props.message;
   const sender = message.sender;
   /**
    * Effect: update cached datetime strings upon receiving a new message.
@@ -88,10 +92,10 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         '& > :not(:last-child)': {
           marginRight: 3
         },
-        marginBottom: message.stacked ? '0px' : '12px'
+        marginBottom: message.stacked || props.isCurrentUser ? '0px' : '12px'
       }}
     >
-      {avatar}
+      {!props.isCurrentUser && !onlyState && avatar}
       <Box
         sx={{
           display: 'flex',
@@ -102,7 +106,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {!message.stacked && (
+          {!onlyState && !props.isCurrentUser && (
             <Typography
               sx={{
                 fontWeight: 700,
@@ -124,17 +128,19 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
             </Typography>
           )}
         </Box>
-        <Typography
-          className={MESSAGE_TIME_CLASS}
-          sx={{
-            fontSize: '0.8em',
-            color: 'var(--jp-ui-font-color2)',
-            fontWeight: 300
-          }}
-          title={message.raw_time ? 'Unverified time' : ''}
-        >
-          {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
-        </Typography>
+        {!onlyState && (
+          <Typography
+            className={MESSAGE_TIME_CLASS}
+            sx={{
+              fontSize: '0.8em',
+              color: 'var(--jp-ui-font-color2)',
+              fontWeight: 300
+            }}
+            title={message.raw_time ? 'Unverified time' : ''}
+          >
+            {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
+          </Typography>
+        )}
       </Box>
     </Box>
   );

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

@@ -3,15 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 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 { CodeToolbar, CodeToolbarProps } from '../code-blocks/code-toolbar';
+import { useChatContext } from '../../context';
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
-import { IChatModel } from '../../model';
 
 /**
  * The type of the props for the MessageRenderer component.
@@ -21,14 +20,6 @@ type MessageRendererProps = {
    * The string to render.
    */
   markdownStr: string;
-  /**
-   * The rendermime registry.
-   */
-  rmRegistry: IRenderMimeRegistry;
-  /**
-   * The model of the chat.
-   */
-  model: IChatModel;
   /**
    * The promise to resolve when the message is rendered.
    */
@@ -51,7 +42,8 @@ type MessageRendererProps = {
  * The message renderer base component.
  */
 function MessageRendererBase(props: MessageRendererProps): JSX.Element {
-  const { markdownStr, rmRegistry } = props;
+  const { markdownStr } = props;
+  const { model, rmRegistry } = useChatContext();
   const appendContent = props.appendContent || false;
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
@@ -81,7 +73,7 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
         );
         newCodeToolbarDefns.push([
           codeToolbarRoot,
-          { model: props.model, content: preBlock.textContent || '' }
+          { model: model, content: preBlock.textContent || '' }
         ]);
       });
 

package/src/components/messages/message.tsx

@@ -7,9 +7,9 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import React, { forwardRef, useEffect, useState } from 'react';
 
 import { MessageRenderer } from './message-renderer';
-import { BaseMessageProps } from './messages';
 import { AttachmentPreviewList } from '../attachments';
 import { ChatInput } from '../input';
+import { useChatContext } from '../../context';
 import { IInputModel, InputModel } from '../../input-model';
 import { IChatMessage } from '../../types';
 import { replaceSpanToMention } from '../../utils';
@@ -17,7 +17,7 @@ import { replaceSpanToMention } from '../../utils';
 /**
  * The message component props.
  */
-type ChatMessageProps = BaseMessageProps & {
+type ChatMessageProps = {
   /**
    * The message to display.
    */
@@ -37,7 +37,8 @@ type ChatMessageProps = BaseMessageProps & {
  */
 export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
   (props, ref): JSX.Element => {
-    const { message, model, rmRegistry } = props;
+    const { message } = props;
+    const { model } = useChatContext();
     const [edit, setEdit] = useState<boolean>(false);
     const [deleted, setDeleted] = useState<boolean>(false);
     const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -132,15 +133,11 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
           <ChatInput
             onCancel={() => cancelEdition()}
             model={model.getEditionModel(message.id)!}
-            chatCommandRegistry={props.chatCommandRegistry}
-            toolbarRegistry={props.inputToolbarRegistry}
             edit={true}
           />
         ) : (
           <MessageRenderer
-            rmRegistry={rmRegistry}
             markdownStr={message.body}
-            model={model}
             edit={canEdit ? startEdition : undefined}
             delete={canDelete ? () => deleteMessage(message.id) : undefined}
             rendered={props.renderedPromise}

package/src/components/messages/messages.tsx

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Box } from '@mui/material';
 import clsx from 'clsx';
@@ -14,58 +13,28 @@ import { ChatMessageHeader } from './header';
 import { ChatMessage } from './message';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
-import { IInputToolbarRegistry } from '../input';
 import { ScrollContainer } from '../scroll-container';
-import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
+import { useChatContext } from '../../context';
+import { IChatMessage, IConfig } from '../../types';
 import { IChatModel } from '../../model';
-import { ChatArea, IChatMessage } from '../../types';
 
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 
-/**
- * The base components props.
- */
-export type BaseMessageProps = {
-  /**
-   * The mime renderer registry.
-   */
-  rmRegistry: IRenderMimeRegistry;
-  /**
-   * The chat model.
-   */
-  model: IChatModel;
-  /**
-   * The chat commands registry.
-   */
-  chatCommandRegistry?: IChatCommandRegistry;
-  /**
-   * The input toolbar registry.
-   */
-  inputToolbarRegistry: IInputToolbarRegistry;
-  /**
-   * The footer registry.
-   */
-  messageFooterRegistry?: IMessageFooterRegistry;
-  /**
-   * The welcome message.
-   */
-  welcomeMessage?: string;
-  /**
-   * The area where the chat is displayed.
-   */
-  area?: ChatArea;
-};
-
 /**
  * The messages list component.
  */
-export function ChatMessages(props: BaseMessageProps): JSX.Element {
-  const { model } = props;
+export function ChatMessages(): JSX.Element {
+  const { area, messageFooterRegistry, model, welcomeMessage } =
+    useChatContext();
+
   const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
   const [allRendered, setAllRendered] = useState<boolean>(false);
+  const [showDeleted, setShowDeleted] = useState<boolean>(
+    model.config.showDeleted ?? false
+  );
 
   // The list of message DOM and their rendered promises.
   const listRef = useRef<(HTMLDivElement | null)[]>([]);
@@ -95,14 +64,29 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     function handleChatEvents() {
       setMessages([...model.messages]);
     }
-
     model.messagesUpdated.connect(handleChatEvents);
 
-    return function cleanup() {
+    return () => {
       model.messagesUpdated.disconnect(handleChatEvents);
     };
   }, [model]);
 
+  /**
+   * Effect: Listen to the config change.
+   */
+  useEffect(() => {
+    function handleConfigChange(_: IChatModel, config: IConfig) {
+      if (config.showDeleted !== showDeleted) {
+        setShowDeleted(config.showDeleted ?? false);
+      }
+    }
+    model.configChanged.connect(handleConfigChange);
+
+    return () => {
+      model.configChanged.disconnect(handleConfigChange);
+    };
+  }, [model, showDeleted]);
+
   /**
    * Observe the messages to update the current viewport and the unread messages.
    */
@@ -137,7 +121,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
         }
       });
 
-      props.model.messagesInViewport = inViewport;
+      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
@@ -165,16 +149,11 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
     };
   }, [messages, allRendered]);
 
-  const horizontalPadding = props.area === 'main' ? 8 : 4;
+  const horizontalPadding = area === 'main' ? 8 : 4;
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
-        {props.welcomeMessage && (
-          <WelcomeMessage
-            rmRegistry={props.rmRegistry}
-            content={props.welcomeMessage}
-          />
-        )}
+        {welcomeMessage && <WelcomeMessage content={welcomeMessage} />}
         <Box
           sx={{
             paddingLeft: horizontalPadding,
@@ -188,55 +167,52 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
           ref={refMsgBox}
           className={clsx(MESSAGES_BOX_CLASS)}
         >
-          {messages
-            .filter(message => !message.deleted)
-            .map((message, i) => {
-              renderedPromise.current[i] = new PromiseDelegate();
-              const isCurrentUser =
-                model.user !== undefined &&
-                model.user.username === message.sender.username;
-              return (
-                // extra div needed to ensure each bubble is on a new line
-                <Box
-                  key={i}
-                  sx={{
-                    ...(isCurrentUser && {
-                      marginLeft: props.area === 'main' ? '25%' : '10%',
-                      backgroundColor: 'var(--jp-layout-color2)',
-                      border: 'none',
-                      borderRadius: 2,
-                      padding: 2
-                    })
-                  }}
-                  className={clsx(
-                    MESSAGE_CLASS,
-                    message.stacked ? MESSAGE_STACKED_CLASS : ''
-                  )}
-                >
-                  <ChatMessageHeader
-                    message={message}
-                    isCurrentUser={isCurrentUser}
-                  />
-                  <ChatMessage
-                    {...props}
-                    message={message}
-                    index={i}
-                    renderedPromise={renderedPromise.current[i]}
-                    ref={el => (listRef.current[i] = el)}
-                  />
-                  {props.messageFooterRegistry && (
-                    <MessageFooterComponent
-                      registry={props.messageFooterRegistry}
-                      message={message}
-                      model={model}
-                    />
-                  )}
-                </Box>
-              );
-            })}
+          {/* Filter the deleted message if user don't expect to see it. */}
+          {(showDeleted
+            ? 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;
+            return (
+              // extra div needed to ensure each bubble is on a new line
+              <Box
+                key={i}
+                sx={{
+                  ...(isCurrentUser && {
+                    marginLeft: area === 'main' ? '25%' : '10%',
+                    backgroundColor: 'var(--jp-layout-color2)',
+                    border: 'none',
+                    borderRadius: 2,
+                    padding: 2
+                  })
+                }}
+                className={clsx(
+                  MESSAGE_CLASS,
+                  message.stacked ? MESSAGE_STACKED_CLASS : ''
+                )}
+              >
+                <ChatMessageHeader
+                  message={message}
+                  isCurrentUser={isCurrentUser}
+                />
+                <ChatMessage
+                  message={message}
+                  index={i}
+                  renderedPromise={renderedPromise.current[i]}
+                  ref={el => (listRef.current[i] = el)}
+                />
+                {messageFooterRegistry && (
+                  <MessageFooterComponent message={message} />
+                )}
+              </Box>
+            );
+          })}
         </Box>
       </ScrollContainer>
-      <Navigation {...props} refMsgBox={refMsgBox} allRendered={allRendered} />
+      <Navigation refMsgBox={refMsgBox} allRendered={allRendered} />
     </>
   );
 }

package/src/components/messages/navigation.tsx

@@ -11,7 +11,7 @@ import {
 } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 
-import { BaseMessageProps } from './messages';
+import { useChatContext } from '../../context';
 import { IChatModel } from '../../model';
 
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
@@ -22,7 +22,7 @@ const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
 /**
  * The navigation component props.
  */
-type NavigationProps = BaseMessageProps & {
+type NavigationProps = {
   /**
    * The reference to the messages container.
    */
@@ -37,7 +37,7 @@ type NavigationProps = BaseMessageProps & {
  * The navigation component, to navigate to unread messages.
  */
 export function Navigation(props: NavigationProps): JSX.Element {
-  const { model } = props;
+  const { model } = useChatContext();
   const [lastInViewport, setLastInViewport] = useState<boolean>(true);
   const [unreadBefore, setUnreadBefore] = useState<number | null>(null);
   const [unreadAfter, setUnreadAfter] = useState<number | null>(null);