@jupyter/chat 0.19.0-alpha.1 → 0.19.0-alpha.3

package/lib/components/attachments.js

@@ -4,10 +4,10 @@
  */
 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 { AttachmentOpenerContext } from '../context';
+import { useChatContext } from '../context';
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
@@ -52,7 +52,7 @@ export function AttachmentPreviewList(props) {
  */
 export function AttachmentPreview(props) {
     const remove_tooltip = 'Remove attachment';
-    const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+    const { attachmentOpenerRegistry } = useChatContext();
     const isClickable = !!(attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type));
     return (React.createElement(Box, { className: ATTACHMENT_CLASS, sx: {
             border: '1px solid var(--jp-border-color1)',

package/lib/components/chat.d.ts

@@ -5,7 +5,7 @@ import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry } from '../registers';
 import { ChatArea } from '../types';
-export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
+export declare function ChatBody(props: Chat.IChatProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
  * The chat UI namespace
@@ -14,7 +14,7 @@ export declare namespace Chat {
     /**
      * The props for the chat body component.
      */
-    interface IChatBodyProps {
+    interface IChatProps {
         /**
          * The chat model.
          */
@@ -51,15 +51,11 @@ export declare namespace Chat {
     /**
      * The options to build the Chat UI.
      */
-    interface IOptions extends IChatBodyProps {
+    interface IOptions extends IChatProps {
         /**
          * The theme manager.
          */
         themeManager?: IThemeManager | null;
-        /**
-         * The view to render.
-         */
-        chatView?: View;
         /**
          * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
          */

package/lib/components/chat.js

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { ChatInput, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
-import { AttachmentOpenerContext } from '../context';
+import { ChatReactContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
     let { inputToolbarRegistry } = props;
@@ -19,18 +19,22 @@ export function ChatBody(props) {
     }
     // const horizontalPadding = props.area === 'main' ? 8 : 4;
     const horizontalPadding = 4;
-    return (React.createElement(AttachmentOpenerContext.Provider, { value: props.attachmentOpenerRegistry },
-        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry, messageFooterRegistry: props.messageFooterRegistry, welcomeMessage: props.welcomeMessage, area: props.area }),
+    const contextValue = {
+        ...props,
+        inputToolbarRegistry
+    };
+    return (React.createElement(ChatReactContext.Provider, { value: contextValue },
+        React.createElement(ChatMessages, null),
         React.createElement(ChatInput, { sx: {
                 paddingLeft: horizontalPadding,
                 paddingRight: horizontalPadding,
                 paddingTop: 0,
                 paddingBottom: 0
-            }, model: model.input, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: inputToolbarRegistry, area: props.area, chatModel: model })));
+            }, model: model.input })));
 }
 export function Chat(props) {
     var _a;
-    const [view, setView] = useState(props.chatView || Chat.View.chat);
+    const [view, setView] = useState(Chat.View.chat);
     return (React.createElement(JlThemeProvider, { themeManager: (_a = props.themeManager) !== null && _a !== void 0 ? _a : null },
         React.createElement(Box
         // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=4.3.0.

package/lib/components/code-blocks/code-toolbar.js

@@ -3,9 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { addAboveIcon, addBelowIcon } from '@jupyterlab/ui-components';
-import { Box, IconButton, Tooltip } from '@mui/material';
+import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { CopyButton } from './copy-button';
+import { TooltippedIconButton } from '../mui-extras';
 import { replaceCellIcon } from '../../icons';
 const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
 const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
@@ -63,29 +64,15 @@ function InsertAboveButton(props) {
     const tooltip = props.activeCellAvailable
         ? 'Insert above active cell'
         : 'Insert above active cell (no active cell)';
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { className: props.className, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertAbove(props.content); }, disabled: !props.activeCellAvailable, "aria-label": tooltip, sx: {
-                    lineHeight: 0,
-                    '&.Mui-disabled': {
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(addAboveIcon.react, { height: "16px", width: "16px" })))));
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertAbove(props.content); }, disabled: !props.activeCellAvailable, inputToolbar: false },
+        React.createElement(addAboveIcon.react, { height: "16px", width: "16px" })));
 }
 function InsertBelowButton(props) {
     const tooltip = props.activeCellAvailable
         ? 'Insert below active cell'
         : 'Insert below active cell (no active cell)';
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { className: props.className, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertBelow(props.content); }, "aria-label": tooltip, sx: {
-                    lineHeight: 0,
-                    '&.Mui-disabled': {
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })))));
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: !props.activeCellAvailable, onClick: () => { var _a; return (_a = props.activeCellManager) === null || _a === void 0 ? void 0 : _a.insertBelow(props.content); }, inputToolbar: false },
+        React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })));
 }
 function ReplaceButton(props) {
     var _a, _b;
@@ -111,13 +98,6 @@ function ReplaceButton(props) {
             (_c = props.activeCellManager) === null || _c === void 0 ? void 0 : _c.replace(props.content);
         }
     };
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { className: props.className, disabled: disabled, onClick: replace, "aria-label": tooltip, sx: {
-                    lineHeight: 0,
-                    '&.Mui-disabled': {
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(replaceCellIcon.react, { height: "16px", width: "16px" })))));
+    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: tooltip, disabled: disabled, onClick: replace, inputToolbar: false },
+        React.createElement(replaceCellIcon.react, { height: "16px", width: "16px" })));
 }

package/lib/components/code-blocks/copy-button.js

@@ -2,9 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState, useCallback, useRef } from 'react';
 import { copyIcon } from '@jupyterlab/ui-components';
-import { IconButton, Tooltip } from '@mui/material';
+import React, { useState, useCallback, useRef } from 'react';
+import { TooltippedIconButton } from '../mui-extras';
 var CopyStatus;
 (function (CopyStatus) {
     CopyStatus[CopyStatus["None"] = 0] = "None";
@@ -42,13 +42,6 @@ export function CopyButton(props) {
         timeoutId.current = window.setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
     }, [copyStatus, props.value]);
     const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { disabled: isCopyDisabled, className: props.className, onClick: copy, "aria-label": "Copy to clipboard", sx: {
-                    lineHeight: 0,
-                    '&.Mui-disabled': {
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(copyIcon.react, { height: "16px", width: "16px" })))));
+    return (React.createElement(TooltippedIconButton, { disabled: isCopyDisabled, className: props.className, tooltip: tooltip, placement: "top", onClick: copy, "aria-label": "Copy to clipboard", inputToolbar: false },
+        React.createElement(copyIcon.react, { height: "16px", width: "16px" })));
 }

package/lib/components/input/buttons/attach-button.js

@@ -5,7 +5,7 @@
 import { FileDialog } from '@jupyterlab/filebrowser';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import React from 'react';
-import { TooltippedButton } from '../../mui-extras/tooltipped-button';
+import { TooltippedIconButton } from '../../mui-extras';
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 /**
  * The attach button.
@@ -38,16 +38,9 @@ export function AttachButton(props) {
             console.warn('Error selecting files to attach', e);
         }
     };
-    return (React.createElement(TooltippedButton, { onClick: onclick, tooltip: tooltip, buttonProps: {
-            size: 'small',
-            variant: 'text',
+    return (React.createElement(TooltippedIconButton, { onClick: onclick, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: ATTACH_BUTTON_CLASS
-        }, sx: {
-            width: '24px',
-            height: '24px',
-            minWidth: '24px',
-            color: 'gray'
         } },
-        React.createElement(AttachFileIcon, { sx: { fontSize: '16px ' } })));
+        React.createElement(AttachFileIcon, null)));
 }

package/lib/components/input/buttons/cancel-button.js

@@ -3,8 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import CloseIcon from '@mui/icons-material/Close';
-import { IconButton, Tooltip } from '@mui/material';
 import React from 'react';
+import { TooltippedIconButton } from '../../mui-extras';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 /**
  * The cancel button.
@@ -14,13 +14,9 @@ export function CancelButton(props) {
         return React.createElement(React.Fragment, null);
     }
     const tooltip = 'Cancel editing';
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { onClick: props.model.cancel, className: CANCEL_BUTTON_CLASS, "aria-label": tooltip, sx: {
-                    width: '24px',
-                    height: '24px',
-                    padding: 0,
-                    lineHeight: 0
-                } },
-                React.createElement(CloseIcon, { sx: { fontSize: '16px' } })))));
+    return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
+            title: tooltip,
+            className: CANCEL_BUTTON_CLASS
+        } },
+        React.createElement(CloseIcon, null)));
 }

package/lib/components/input/buttons/save-edit-button.js

@@ -3,8 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import CheckIcon from '@mui/icons-material/Check';
-import { IconButton, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
+import { TooltippedIconButton } from '../../mui-extras';
 const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
 /**
  * The save edit button.
@@ -36,16 +36,9 @@ export function SaveEditButton(props) {
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
         model.send(model.value);
     }
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(IconButton, { onClick: save, disabled: disabled, className: SAVE_EDIT_BUTTON_CLASS, "aria-label": tooltip, sx: {
-                    width: '24px',
-                    height: '24px',
-                    padding: 0,
-                    lineHeight: 0,
-                    '&.Mui-disabled': {
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(CheckIcon, { sx: { fontSize: '16px' } })))));
+    return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, buttonProps: {
+            title: tooltip,
+            className: SAVE_EDIT_BUTTON_CLASS
+        }, "aria-label": tooltip },
+        React.createElement(CheckIcon, null)));
 }

package/lib/components/input/buttons/send-button.js

@@ -3,8 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import { Button, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
+import { TooltippedIconButton } from '../../mui-extras';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 /**
  * The send button.
@@ -33,6 +33,8 @@ export function SendButton(props) {
                 : 'Send message (ENTER)');
         };
         model.configChanged.connect(configChanged);
+        // Initialize the tooltip.
+        configChanged(model, model.config);
         return () => {
             var _a, _b;
             model.valueChanged.disconnect(inputChanged);
@@ -51,26 +53,9 @@ export function SendButton(props) {
         model.value = '';
         model.focus();
     }
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(Button, { onClick: send, disabled: disabled, size: "small", variant: "contained", className: SEND_BUTTON_CLASS, "aria-label": tooltip, sx: {
-                    backgroundColor: 'var(--jp-brand-color1)',
-                    color: 'white',
-                    minWidth: '24px',
-                    width: '24px',
-                    height: '24px',
-                    borderRadius: '4px',
-                    boxShadow: 'none',
-                    lineHeight: 0,
-                    '&:hover': {
-                        backgroundColor: 'var(--jp-brand-color0)',
-                        boxShadow: 'none'
-                    },
-                    '&.Mui-disabled': {
-                        backgroundColor: 'var(--jp-border-color2)',
-                        color: 'var(--jp-ui-font-color3)',
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(ArrowUpwardIcon, { sx: { fontSize: '16px' } })))));
+    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, buttonProps: {
+            title: tooltip,
+            className: SEND_BUTTON_CLASS
+        }, "aria-label": tooltip },
+        React.createElement(ArrowUpwardIcon, null)));
 }

package/lib/components/input/buttons/stop-button.js

@@ -3,8 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import StopIcon from '@mui/icons-material/Stop';
-import { Button, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
+import { TooltippedIconButton } from '../../mui-extras';
 const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
 /**
  * The stop button.
@@ -38,26 +38,9 @@ export function StopButton(props) {
         // This will need to be implemented based on how the chat model handles stopping AI responses
         console.log('Stop button clicked');
     }
-    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
-        React.createElement("span", null,
-            React.createElement(Button, { onClick: stop, disabled: disabled, size: "small", variant: "contained", className: STOP_BUTTON_CLASS, "aria-label": tooltip, sx: {
-                    backgroundColor: 'var(--jp-error-color1)',
-                    color: 'white',
-                    minWidth: '24px',
-                    width: '24px',
-                    height: '24px',
-                    borderRadius: '4px',
-                    boxShadow: 'none',
-                    lineHeight: 0,
-                    '&:hover': {
-                        backgroundColor: 'var(--jp-error-color0)',
-                        boxShadow: 'none'
-                    },
-                    '&.Mui-disabled': {
-                        backgroundColor: 'var(--jp-border-color2)',
-                        color: 'var(--jp-ui-font-color3)',
-                        opacity: 0.5
-                    }
-                } },
-                React.createElement(StopIcon, { sx: { fontSize: '16px' } })))));
+    return (React.createElement(TooltippedIconButton, { onClick: stop, tooltip: tooltip, disabled: disabled, buttonProps: {
+            title: tooltip,
+            className: STOP_BUTTON_CLASS
+        }, "aria-label": tooltip },
+        React.createElement(StopIcon, null)));
 }

package/lib/components/input/chat-input.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
-import { IInputToolbarRegistry } from '.';
 import { IInputModel } from '../../input-model';
-import { IChatCommandRegistry } from '../../registers';
-import { ChatArea } from '../../types';
-import { IChatModel } from '../../model';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
 /**
  * The chat input namespace.
@@ -18,10 +14,6 @@ export declare namespace ChatInput {
          * The input model.
          */
         model: IInputModel;
-        /**
-         * The toolbar registry.
-         */
-        toolbarRegistry: IInputToolbarRegistry;
         /**
          * The function to be called to cancel editing.
          */
@@ -30,18 +22,6 @@ export declare 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/lib/components/input/chat-input.js

@@ -5,22 +5,24 @@
 import { Autocomplete, Box, TextField } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
+import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
-import { useChatCommands } from '.';
+import { useChatContext } from '../../context';
 import { InputWritingIndicator } from './writing-indicator';
 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) {
     var _a;
-    const { model, toolbarRegistry } = props;
+    const { model } = props;
+    const { area, chatCommandRegistry, inputToolbarRegistry } = useChatContext();
+    const chatModel = useChatContext().model;
     const [input, setInput] = useState(model.value);
     const inputRef = useRef();
-    const chatCommands = useChatCommands(model, props.chatCommandRegistry);
+    const chatCommands = useChatCommands(model, chatCommandRegistry);
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
     const [attachments, setAttachments] = useState(model.attachments);
     const [toolbarElements, setToolbarElements] = useState([]);
-    const [isFocused, setIsFocused] = useState(false);
     const [writers, setWriters] = useState([]);
     /**
      * Auto-focus the input when the component is first mounted.
@@ -69,20 +71,20 @@ export function ChatInput(props) {
      */
     useEffect(() => {
         const updateToolbar = () => {
-            setToolbarElements(toolbarRegistry.getItems());
+            setToolbarElements((inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.getItems()) || []);
         };
-        toolbarRegistry.itemsChanged.connect(updateToolbar);
+        inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.itemsChanged.connect(updateToolbar);
         updateToolbar();
         return () => {
-            toolbarRegistry.itemsChanged.disconnect(updateToolbar);
+            inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.itemsChanged.disconnect(updateToolbar);
         };
-    }, [toolbarRegistry]);
+    }, [inputToolbarRegistry]);
     /**
      * Handle the changes in the writers list.
      */
     useEffect(() => {
         var _a;
-        if (!props.chatModel) {
+        if (!chatModel) {
             return;
         }
         const updateWriters = (_, writers) => {
@@ -90,14 +92,14 @@ export function ChatInput(props) {
             setWriters(writers);
         };
         // Set initial writers state
-        const initialWriters = props.chatModel.writers;
+        const initialWriters = chatModel.writers;
         setWriters(initialWriters);
-        (_a = props.chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
+        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
         return () => {
-            var _a, _b;
-            (_b = (_a = props.chatModel) === null || _a === void 0 ? void 0 : _a.writersChanged) === null || _b === void 0 ? void 0 : _b.disconnect(updateWriters);
+            var _a;
+            (_a = chatModel === null || chatModel === void 0 ? void 0 : chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
         };
-    }, [props.chatModel]);
+    }, [chatModel]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -106,7 +108,6 @@ export function ChatInput(props) {
      * component.
      */
     async function handleKeyDown(event) {
-        var _a;
         /**
          * IMPORTANT: This statement ensures that arrow keys can be used to navigate
          * the multiline input when the chat commands menu is closed.
@@ -151,19 +152,17 @@ export function ChatInput(props) {
         if ((sendWithShiftEnter && event.shiftKey) ||
             (!sendWithShiftEnter && !event.shiftKey)) {
             // Run all command providers
-            await ((_a = props.chatCommandRegistry) === null || _a === void 0 ? void 0 : _a.onSubmit(model));
+            await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : 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 (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS), "data-input-id": model.id },
         React.createElement(Box, { sx: {
                 border: '1px solid',
-                borderColor: isFocused
-                    ? 'var(--jp-brand-color1)'
-                    : 'var(--jp-border-color1)',
+                borderColor: 'var(--jp-border-color1)',
                 borderRadius: 2,
                 transition: 'border-color 0.2s ease',
                 display: 'flex',
@@ -186,9 +185,10 @@ export function ChatInput(props) {
                             padding: 0
                         }
                     }
-                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, onKeyDown: handleKeyDown, placeholder: "Type a chat message, @ to mention...", inputRef: inputRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
+                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: "Type a chat message, @ to mention...", inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
                         padding: 1.5,
                         margin: 0,
+                        boxSizing: 'border-box',
                         backgroundColor: 'var(--jp-layout-color0)',
                         transition: 'background-color 0.2s ease',
                         '& .MuiInputBase-root': {
@@ -232,6 +232,6 @@ export function ChatInput(props) {
                     borderColor: 'var(--jp-border-color1)',
                     backgroundColor: 'var(--jp-layout-color0)',
                     transition: 'background-color 0.2s ease'
-                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: props.chatCommandRegistry, chatModel: props.chatModel, edit: props.edit }))))),
+                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit }))))),
         React.createElement(InputWritingIndicator, { writers: writers })));
 }

package/lib/components/messages/footer.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { IMessageFooterRegistry, MessageFooterSectionProps } from '../../registers';
+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;
 }
 /**
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
-export declare function MessageFooterComponent(props: IMessageFootersProps): JSX.Element;
+export declare function MessageFooterComponent(props: IMessageFootersProps): JSX.Element | null;

package/lib/components/messages/footer.js

@@ -4,14 +4,19 @@
  */
 import { Box } from '@mui/material';
 import React from 'react';
+import { useChatContext } from '../../context';
 /**
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
 export function MessageFooterComponent(props) {
     var _a, _b, _c;
-    const { message, model, registry } = props;
-    const footer = registry.getFooter();
+    const { message } = props;
+    const { model, messageFooterRegistry } = useChatContext();
+    if (!messageFooterRegistry) {
+        return null;
+    }
+    const footer = messageFooterRegistry.getFooter();
     return (React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
         ((_a = footer.left) === null || _a === void 0 ? void 0 : _a.component) ? (React.createElement(footer.left.component, { message: message, model: model })) : (React.createElement("div", null)),
         ((_b = footer.center) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement(footer.center.component, { message: message, model: model })) : (React.createElement("div", null)),

package/lib/components/messages/header.js

@@ -12,12 +12,14 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
  */
 export function ChatMessageHeader(props) {
     var _a, _b;
-    // 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 React.createElement(React.Fragment, null);
     }
+    // Flag to display only the deleted or edited information (stacked message).
+    const onlyState = message.stacked && (message.deleted || message.edited);
     const [datetime, setDatetime] = useState({});
-    const message = props.message;
     const sender = message.sender;
     /**
      * Effect: update cached datetime strings upon receiving a new message.
@@ -61,9 +63,9 @@ export function ChatMessageHeader(props) {
             '& > :not(:last-child)': {
                 marginRight: 3
             },
-            marginBottom: message.stacked ? '0px' : '12px'
+            marginBottom: message.stacked || props.isCurrentUser ? '0px' : '12px'
         } },
-        avatar,
+        !props.isCurrentUser && !onlyState && avatar,
         React.createElement(Box, { sx: {
                 display: 'flex',
                 flexGrow: 1,
@@ -72,7 +74,7 @@ export function ChatMessageHeader(props) {
                 alignItems: 'center'
             } },
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                !message.stacked && (React.createElement(Typography, { sx: {
+                !onlyState && !props.isCurrentUser && (React.createElement(Typography, { sx: {
                         fontWeight: 700,
                         color: 'var(--jp-ui-font-color1)',
                         paddingRight: '0.5em'
@@ -81,9 +83,9 @@ export function ChatMessageHeader(props) {
                         fontStyle: 'italic',
                         fontSize: 'var(--jp-content-font-size0)'
                     } }, message.deleted ? '(message deleted)' : '(edited)'))),
-            React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
+            !onlyState && (React.createElement(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 ? '*' : ''}`))));
+                }, title: message.raw_time ? 'Unverified time' : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`)))));
 }