Lift the typing indicator out of the input component

Author: brichet

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

@@ -9,7 +9,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import {
   ChatInput,
@@ -18,6 +18,7 @@ import {
 } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
+import { WritingIndicator } from './writing-indicator';
 import { AttachmentOpenerContext } from '../context';
 import { IChatModel } from '../model';
 import {
@@ -29,10 +30,36 @@ import { ChatArea } from '../types';
 
 export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
   const { model } = props;
+  const [writers, setWriters] = useState<IChatModel.IWriter[]>([]);
   let { inputToolbarRegistry } = props;
   if (!inputToolbarRegistry) {
     inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
   }
+
+  /**
+   * Handle the changes in the writers list.
+   */
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    const updateWriters = (_: IChatModel, writers: IChatModel.IWriter[]) => {
+      // Show all writers for now - AI generating responses will have messageID
+      setWriters(writers);
+    };
+
+    // Set initial writers state
+    const initialWriters = model.writers;
+    setWriters(initialWriters);
+
+    model.writersChanged?.connect(updateWriters);
+
+    return () => {
+      model?.writersChanged?.disconnect(updateWriters);
+    };
+  }, [model]);
+
   // const horizontalPadding = props.area === 'main' ? 8 : 4;
   const horizontalPadding = 4;
 
@@ -60,6 +87,13 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         area={props.area}
         chatModel={model}
       />
+      <WritingIndicator
+        sx={{
+          paddingLeft: horizontalPadding,
+          paddingRight: horizontalPadding
+        }}
+        writers={writers}
+      />
     </AttachmentOpenerContext.Provider>
   );
 }

packages/jupyter-chat/src/components/index.ts

@@ -10,3 +10,4 @@ export * from './input';
 export * from './jl-theme-provider';
 export * from './messages';
 export * from './scroll-container';
+export * from './writing-indicator';

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

@@ -24,7 +24,6 @@ import { IInputModel, InputModel } from '../../input-model';
 import { IChatCommandRegistry } from '../../registers';
 import { IAttachment, ChatArea } from '../../types';
 import { IChatModel } from '../../model';
-import { InputWritingIndicator } from './writing-indicator';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
@@ -47,7 +46,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     InputToolbarRegistry.IToolbarItem[]
   >([]);
   const [isFocused, setIsFocused] = useState<boolean>(false);
-  const [writers, setWriters] = useState<IChatModel.IWriter[]>([]);
 
   /**
    * Auto-focus the input when the component is first mounted.
@@ -110,30 +108,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
     };
   }, [toolbarRegistry]);
 
-  /**
-   * Handle the changes in the writers list.
-   */
-  useEffect(() => {
-    if (!props.chatModel) {
-      return;
-    }
-
-    const updateWriters = (_: IChatModel, writers: IChatModel.IWriter[]) => {
-      // Show all writers for now - AI generating responses will have messageID
-      setWriters(writers);
-    };
-
-    // Set initial writers state
-    const initialWriters = props.chatModel.writers;
-    setWriters(initialWriters);
-
-    props.chatModel.writersChanged?.connect(updateWriters);
-
-    return () => {
-      props.chatModel?.writersChanged?.disconnect(updateWriters);
-    };
-  }, [props.chatModel]);
-
   const inputExists = !!input.trim();
 
   /**
@@ -340,7 +314,6 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
           ))}
         </Box>
       </Box>
-      <InputWritingIndicator writers={writers} />
     </Box>
   );
 }

packages/jupyter-chat/src/components/input/index.ts

@@ -7,4 +7,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

…c/components/input/writing-indicator.tsx …hat/src/components/writing-indicator.tsxpackages/jupyter-chat/src/components/input/writing-indicator.tsx renamed to packages/jupyter-chat/src/components/writing-indicator.tsx packages/jupyter-chat/src/components/input/writing-indicator.tsx renamed to packages/jupyter-chat/src/components/writing-indicator.tsx

@@ -3,10 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { Box, Typography } from '@mui/material';
+import { Box, SxProps, Theme, Typography } from '@mui/material';
 import React from 'react';
 
-import { IChatModel } from '../../model';
+import { IChatModel } from '../model';
 
 /**
  * Classname on the root element. Used in E2E tests.
@@ -21,6 +21,10 @@ export interface IInputWritingIndicatorProps {
    * The list of users currently writing.
    */
   writers: IChatModel.IWriter[];
+  /**
+   * Custom mui/material styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -48,9 +52,9 @@ function formatWritersText(writers: IChatModel.IWriter[]): string {
 }
 
 /**
- * The input writing indicator component, displaying typing status in the chat input area.
+ * The writing indicator component, displaying typing status.
  */
-export function InputWritingIndicator(
+export function WritingIndicator(
   props: IInputWritingIndicatorProps
 ): JSX.Element {
   const { writers } = props;
@@ -62,6 +66,7 @@ export function InputWritingIndicator(
     <Box
       className={WRITERS_ELEMENT_CLASSNAME}
       sx={{
+        ...props.sx,
         minHeight: '16px'
       }}
     >