Use a react context in the chat component and its children

Author: brichet

packages/jupyter-chat/src/components/attachments.tsx

@@ -5,12 +5,12 @@
 
 import CloseIcon from '@mui/icons-material/Close';
 import { Box, Button, Tooltip } from '@mui/material';
-import React, { useContext } from 'react';
+import React from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
 
+import { useChatContext } from '../context';
 import { IAttachment } from '../types';
-import { AttachmentOpenerContext } from '../context';
 
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
@@ -87,7 +87,7 @@ export type AttachmentProps = AttachmentsProps & {
  */
 export function AttachmentPreview(props: AttachmentProps): JSX.Element {
   const remove_tooltip = 'Remove attachment';
-  const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+  const { attachmentOpenerRegistry } = useChatContext();
   const isClickable = !!attachmentOpenerRegistry?.get(props.attachment.type);
 
   return (

packages/jupyter-chat/src/components/chat.tsx

@@ -18,7 +18,7 @@ import {
 } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
-import { AttachmentOpenerContext } from '../context';
+import { ChatReactContext } from '../context';
 import { IChatModel } from '../model';
 import {
   IAttachmentOpenerRegistry,
@@ -27,7 +27,7 @@ import {
 } from '../registers';
 import { ChatArea } from '../types';
 
-export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
+export function ChatBody(props: Chat.IChatProps): JSX.Element {
   const { model } = props;
   let { inputToolbarRegistry } = props;
   if (!inputToolbarRegistry) {
@@ -36,17 +36,14 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   // const horizontalPadding = props.area === 'main' ? 8 : 4;
   const horizontalPadding = 4;
 
+  const contextValue: Chat.IChatProps = {
+    ...props,
+    inputToolbarRegistry
+  };
+
   return (
-    <AttachmentOpenerContext.Provider value={props.attachmentOpenerRegistry}>
-      <ChatMessages
-        rmRegistry={props.rmRegistry}
-        model={model}
-        chatCommandRegistry={props.chatCommandRegistry}
-        inputToolbarRegistry={inputToolbarRegistry}
-        messageFooterRegistry={props.messageFooterRegistry}
-        welcomeMessage={props.welcomeMessage}
-        area={props.area}
-      />
+    <ChatReactContext.Provider value={contextValue}>
+      <ChatMessages area={props.area} />
       <ChatInput
         sx={{
           paddingLeft: horizontalPadding,
@@ -55,12 +52,9 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
           paddingBottom: 0
         }}
         model={model.input}
-        chatCommandRegistry={props.chatCommandRegistry}
-        toolbarRegistry={inputToolbarRegistry}
         area={props.area}
-        chatModel={model}
       />
-    </AttachmentOpenerContext.Provider>
+    </ChatReactContext.Provider>
   );
 }
 
@@ -117,7 +111,7 @@ export namespace Chat {
   /**
    * The props for the chat body component.
    */
-  export interface IChatBodyProps {
+  export interface IChatProps {
     /**
      * The chat model.
      */
@@ -155,7 +149,7 @@ export namespace Chat {
   /**
    * The options to build the Chat UI.
    */
-  export interface IOptions extends IChatBodyProps {
+  export interface IOptions extends IChatProps {
     /**
      * The theme manager.
      */

packages/jupyter-chat/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 { ChatArea, 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 { 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,7 +196,7 @@ 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();
@@ -333,8 +333,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 +357,6 @@ export namespace ChatInput {
      * The input model.
      */
     model: IInputModel;
-    /**
-     * The toolbar registry.
-     */
-    toolbarRegistry: IInputToolbarRegistry;
     /**
      * The function to be called to cancel editing.
      */
@@ -369,18 +365,10 @@ 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).

packages/jupyter-chat/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' }}>

packages/jupyter-chat/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 || '' }
         ]);
       });
 

packages/jupyter-chat/src/components/messages/message.tsx

@@ -7,17 +7,17 @@ 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';
 
 /**
  * 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}