@jupyter/chat 0.18.2 → 0.19.0-alpha.0

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

@@ -3,6 +3,8 @@ 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.
@@ -32,5 +34,18 @@ export declare namespace ChatInput {
          * 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).
+         */
+        edit?: boolean;
     }
 }

package/lib/components/input/chat-input.js

@@ -2,14 +2,14 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Autocomplete, Box, TextField, Toolbar } from '@mui/material';
+import { Autocomplete, Box, TextField } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { AttachmentPreviewList } from '../attachments';
 import { useChatCommands } from '.';
+import { InputWritingIndicator } from './writing-indicator';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TEXTFIELD_CLASS = 'jp-chat-input-textfield';
-const INPUT_COMPONENT_CLASS = 'jp-chat-input-component';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 export function ChatInput(props) {
     var _a;
@@ -20,6 +20,16 @@ export function ChatInput(props) {
     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.
+     */
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
     /**
      * Handle the changes on the model that affect the input.
      * - focus requested
@@ -67,6 +77,27 @@ export function ChatInput(props) {
             toolbarRegistry.itemsChanged.disconnect(updateToolbar);
         };
     }, [toolbarRegistry]);
+    /**
+     * Handle the changes in the writers list.
+     */
+    useEffect(() => {
+        var _a;
+        if (!props.chatModel) {
+            return;
+        }
+        const updateWriters = (_, writers) => {
+            // Show all writers for now - AI generating responses will have messageID
+            setWriters(writers);
+        };
+        // Set initial writers state
+        const initialWriters = props.chatModel.writers;
+        setWriters(initialWriters);
+        (_a = props.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);
+        };
+    }, [props.chatModel]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -91,13 +122,14 @@ export function ChatInput(props) {
         }
         /**
          * IMPORTANT: This statement ensures that when the chat commands menu is
-         * open with a highlighted command, the "Enter" key should run that command
+         * open, the "Enter" key should select the command (handled by Autocomplete)
          * instead of sending the message.
          *
          * This is done by returning early and letting the event propagate to the
-         * `Autocomplete` component.
+         * `Autocomplete` component, which will select the auto-highlighted option
+         * thanks to autoSelect: true.
          */
-        if (chatCommands.menu.highlighted) {
+        if (chatCommands.menu.open) {
             return;
         }
         // remainder of this function only handles the "Enter" key pressed while the
@@ -125,50 +157,81 @@ export function ChatInput(props) {
             event.preventDefault();
         }
     }
-    // Set the helper text based on whether Shift+Enter is used for sending.
-    const helperText = sendWithShiftEnter ? (React.createElement("span", null,
-        "Press ",
-        React.createElement("b", null, "Shift"),
-        "+",
-        React.createElement("b", null, "Enter"),
-        " to send message")) : (React.createElement("span", null,
-        "Press ",
-        React.createElement("b", null, "Shift"),
-        "+",
-        React.createElement("b", null, "Enter"),
-        " to add a new line"));
-    return (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS) },
-        React.createElement(AttachmentPreviewList, { attachments: attachments, onRemove: model.removeAttachment }),
-        React.createElement(Autocomplete, { ...chatCommands.autocompleteProps, 
-            // ensure the autocomplete popup always renders on top
-            slotProps: {
-                popper: {
-                    placement: 'top'
-                },
-                paper: {
-                    sx: {
-                        border: '1px solid lightgray'
-                    }
-                },
-                listbox: {
-                    sx: {
-                        '& .MuiAutocomplete-option': {
-                            padding: 2
+    const horizontalPadding = props.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)',
+                borderRadius: 2,
+                transition: 'border-color 0.2s ease',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden'
+            } },
+            attachments.length > 0 && (React.createElement(Box, { sx: {
+                    px: horizontalPadding,
+                    pt: 1,
+                    pb: 1
+                } },
+                React.createElement(AttachmentPreviewList, { attachments: attachments, onRemove: model.removeAttachment }))),
+            React.createElement(Autocomplete, { ...chatCommands.autocompleteProps, slotProps: {
+                    ...(chatCommands.autocompleteProps.slotProps || {}),
+                    popper: {
+                        placement: 'top-start'
+                    },
+                    listbox: {
+                        sx: {
+                            padding: 0
                         }
                     }
-                }
-            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "filled", className: INPUT_TEXTFIELD_CLASS, multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, sx: { marginTop: '1px' }, 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); }, slotProps: {
-                    input: {
+                }, 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: {
+                        padding: 1.5,
+                        margin: 0,
+                        backgroundColor: 'var(--jp-layout-color0)',
+                        transition: 'background-color 0.2s ease',
+                        '& .MuiInputBase-root': {
+                            padding: 0,
+                            margin: 0,
+                            '&:before': {
+                                display: 'none'
+                            },
+                            '&:after': {
+                                display: 'none'
+                            }
+                        },
+                        '& .MuiInputBase-input': {
+                            overflowWrap: 'break-word',
+                            wordBreak: 'break-word'
+                        }
+                    }, InputProps: {
                         ...params.InputProps,
-                        className: INPUT_COMPONENT_CLASS
+                        disableUnderline: true
+                    }, FormHelperTextProps: {
+                        sx: { display: 'none' }
+                    } })), inputValue: input, onInputChange: (_, newValue, reason) => {
+                    // Skip value updates when an autocomplete option is selected.
+                    // The 'onChange' callback handles the replacement via replaceCurrentWord.
+                    // 'selectOption' - user selected an option (newValue is just the option label)
+                    // 'reset' - autocomplete is resetting after selection
+                    // 'blur' - when user blurs the input (newValue is set to empty string)
+                    if (reason === 'selectOption' ||
+                        reason === 'reset' ||
+                        reason === 'blur') {
+                        return;
                     }
-                }, label: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {
-                // Do not update the value if the reason is 'reset', which should occur only
-                // if an autocompletion command has been selected. In this case, the value is
-                // set in the 'onChange()' callback of the autocompletion (to avoid conflicts).
-                if (reason !== 'reset') {
                     model.value = newValue;
-                }
-            } }),
-        React.createElement(Toolbar, { className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model, chatCommandRegistry: props.chatCommandRegistry }))))));
+                } }),
+            React.createElement(Box, { className: INPUT_TOOLBAR_CLASS, sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 2,
+                    padding: 1.5,
+                    borderTop: '1px solid',
+                    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 }))))),
+        React.createElement(InputWritingIndicator, { writers: writers })));
 }

package/lib/components/input/index.d.ts

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

package/lib/components/input/index.js

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

package/lib/components/input/toolbar-registry.d.ts

@@ -3,6 +3,7 @@ import { ISignal } from '@lumino/signaling';
 import * as React from 'react';
 import { IInputModel } from '../../input-model';
 import { IChatCommandRegistry } from '../../registers';
+import { IChatModel } from '../../model';
 /**
  * The toolbar registry interface.
  */
@@ -97,6 +98,15 @@ export declare namespace InputToolbarRegistry {
          * `onSubmit()` on all command providers before sending the message.
          */
         chatCommandRegistry?: IChatCommandRegistry;
+        /**
+         * The chat model. Provides access to messages, writers, and other chat state.
+         */
+        chatModel?: IChatModel;
+        /**
+         * Whether the input is in edit mode (editing an existing message).
+         * Defaults to false (new message mode).
+         */
+        edit?: boolean;
     }
     /**
      * The default toolbar registry if none is provided.

package/lib/components/input/toolbar-registry.js

@@ -4,7 +4,7 @@
  */
 import { Token } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { AttachButton, CancelButton, SendButton } from './buttons';
+import { AttachButton, CancelButton, SaveEditButton, SendButton } from './buttons';
 /**
  * The toolbar registry implementation.
  */
@@ -72,10 +72,19 @@ export class InputToolbarRegistry {
      */
     function defaultToolbarRegistry() {
         const registry = new InputToolbarRegistry();
+        // TODO: Re-enable stop button once logic is fully implemented
+        // registry.addItem('stop', {
+        //   element: StopButton,
+        //   position: 90
+        // });
         registry.addItem('send', {
             element: SendButton,
             position: 100
         });
+        registry.addItem('saveEdit', {
+            element: SaveEditButton,
+            position: 95
+        });
         registry.addItem('attach', {
             element: AttachButton,
             position: 20

package/lib/components/input/use-chat-commands.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { LabIcon } from '@jupyterlab/ui-components';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 /**
  * A hook which automatically returns the list of command options given the
@@ -103,18 +103,23 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
             renderOption: (defaultProps, command, __, ___) => {
                 const { key, ...listItemProps } = defaultProps;
                 const commandIcon = React.isValidElement(command.icon) ? (command.icon) : (React.createElement("span", null, command.icon instanceof LabIcon ? (React.createElement(command.icon.react, null)) : (command.icon)));
-                return (React.createElement(Box, { key: key, component: "li", ...listItemProps },
+                return (React.createElement(Box, { key: key, component: "li", ...listItemProps, sx: {
+                        ...(listItemProps.sx || {}),
+                        padding: '4px 8px !important',
+                        gap: 2
+                    } },
                     commandIcon,
-                    React.createElement("p", { className: "jp-chat-command-name" }, command.name),
+                    React.createElement(Typography, { variant: "body2", component: "span", className: "jp-chat-command-name" }, command.name),
                     command.description && (React.createElement(React.Fragment, null,
                         React.createElement("span", null, " - "),
-                        React.createElement("p", { className: "jp-chat-command-description" }, command.description)))));
+                        React.createElement(Typography, { variant: "caption", component: "span", color: "text.secondary" }, command.description)))));
             },
             // always show all options, since command providers should exclusively
             // define what commands are added to the menu.
             filterOptions: (commands) => commands,
             value: null,
             autoHighlight: true,
+            autoSelect: true,
             freeSolo: true,
             disableClearable: true,
             onChange,

package/lib/components/input/writing-indicator.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IChatModel } from '../../model';
+/**
+ * The input writing indicator component props.
+ */
+export interface IInputWritingIndicatorProps {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IChatModel.IWriter[];
+}
+/**
+ * The input writing indicator component, displaying typing status in the chat input area.
+ */
+export declare function InputWritingIndicator(props: IInputWritingIndicatorProps): JSX.Element;

package/lib/components/input/writing-indicator.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+/**
+ * Classname on the root element. Used in E2E tests.
+ */
+const WRITERS_ELEMENT_CLASSNAME = 'jp-chat-writers';
+/**
+ * Format the writers list into a readable string.
+ * Examples: "Alice is typing...", "Alice and Bob are typing...", "Alice, Bob, and Carol are typing..."
+ */
+function formatWritersText(writers) {
+    if (writers.length === 0) {
+        return '';
+    }
+    const names = writers.map(w => { var _a, _b, _c; return (_c = (_b = (_a = w.user.display_name) !== null && _a !== void 0 ? _a : w.user.name) !== null && _b !== void 0 ? _b : w.user.username) !== null && _c !== void 0 ? _c : 'Unknown'; });
+    if (names.length === 1) {
+        return `${names[0]} is typing...`;
+    }
+    else if (names.length === 2) {
+        return `${names[0]} and ${names[1]} are typing...`;
+    }
+    else {
+        const allButLast = names.slice(0, -1).join(', ');
+        const last = names[names.length - 1];
+        return `${allButLast}, and ${last} are typing...`;
+    }
+}
+/**
+ * The input writing indicator component, displaying typing status in the chat input area.
+ */
+export function InputWritingIndicator(props) {
+    const { writers } = props;
+    // Always render the container to reserve space, even if no writers
+    const writersText = writers.length > 0 ? formatWritersText(writers) : '';
+    return (React.createElement(Box, { className: WRITERS_ELEMENT_CLASSNAME, sx: {
+            minHeight: '16px'
+        } },
+        React.createElement(Typography, { variant: "caption", sx: {
+                color: 'var(--jp-ui-font-color2)',
+                display: 'block',
+                fontSize: '10px',
+                fontFamily: 'var(--jp-ui-font-family)',
+                lineHeight: '16px',
+                visibility: writers.length > 0 ? 'visible' : 'hidden'
+            } }, writersText || '\u00A0')));
+}

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

@@ -8,6 +8,10 @@ type ChatMessageHeaderProps = {
      * The chat message.
      */
     message: IChatMessage;
+    /**
+     * Whether this message is from the current user.
+     */
+    isCurrentUser?: boolean;
 };
 /**
  * The message header component.

package/lib/components/messages/header.js

@@ -12,6 +12,10 @@ 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) {
+        return React.createElement(React.Fragment, null);
+    }
     const [datetime, setDatetime] = useState({});
     const message = props.message;
     const sender = message.sender;

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

@@ -6,4 +6,3 @@ export * from './messages';
 export * from './navigation';
 export * from './toolbar';
 export * from './welcome';
-export * from './writers';

package/lib/components/messages/index.js

@@ -10,4 +10,3 @@ export * from './messages';
 export * from './navigation';
 export * from './toolbar';
 export * from './welcome';
-export * from './writers';

package/lib/components/messages/message.js

@@ -94,7 +94,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     };
     // Empty if the message has been deleted.
     return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
-        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: props.inputToolbarRegistry })) : (React.createElement(MessageRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
+        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: props.inputToolbarRegistry, edit: true })) : (React.createElement(MessageRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
         message.attachments && !edit && (
         // Display the attachments only if message is not edited, otherwise the
         // input component display them.

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

@@ -3,6 +3,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IInputToolbarRegistry } from '../input';
 import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
 import { IChatModel } from '../../model';
+import { ChatArea } from '../../types';
 export declare const MESSAGE_CLASS = "jp-chat-message";
 /**
  * The base components props.
@@ -32,6 +33,10 @@ export type BaseMessageProps = {
      * The welcome message.
      */
     welcomeMessage?: string;
+    /**
+     * The area where the chat is displayed.
+     */
+    area?: ChatArea;
 };
 /**
  * The messages list component.

package/lib/components/messages/messages.js

@@ -11,7 +11,6 @@ import { ChatMessageHeader } from './header';
 import { ChatMessage } from './message';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
-import { WritingUsersList } from './writers';
 import { ScrollContainer } from '../scroll-container';
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
@@ -23,7 +22,6 @@ export function ChatMessages(props) {
     const { model } = props;
     const [messages, setMessages] = useState(model.messages);
     const refMsgBox = useRef(null);
-    const [currentWriters, setCurrentWriters] = useState([]);
     const [allRendered, setAllRendered] = useState(false);
     // The list of message DOM and their rendered promises.
     const listRef = useRef([]);
@@ -42,25 +40,17 @@ export function ChatMessages(props) {
                 .catch(e => console.error(e));
         }
         fetchHistory();
-        setCurrentWriters([]);
     }, [model]);
     /**
      * Effect: listen to chat messages.
      */
     useEffect(() => {
-        var _a;
         function handleChatEvents() {
             setMessages([...model.messages]);
         }
-        function handleWritersChange(_, writers) {
-            setCurrentWriters(writers.map(writer => writer.user));
-        }
         model.messagesUpdated.connect(handleChatEvents);
-        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(handleWritersChange);
         return function cleanup() {
-            var _a;
             model.messagesUpdated.disconnect(handleChatEvents);
-            (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(handleChatEvents);
         };
     }, [model]);
     /**
@@ -122,18 +112,38 @@ export function ChatMessages(props) {
             });
         };
     }, [messages, allRendered]);
+    const horizontalPadding = props.area === 'main' ? 8 : 4;
     return (React.createElement(React.Fragment, null,
         React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
             props.welcomeMessage && (React.createElement(WelcomeMessage, { rmRegistry: props.rmRegistry, content: props.welcomeMessage })),
-            React.createElement(Box, { ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, messages.map((message, i) => {
+            React.createElement(Box, { sx: {
+                    paddingLeft: horizontalPadding,
+                    paddingRight: horizontalPadding,
+                    paddingTop: 4,
+                    paddingBottom: 16,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4
+                }, 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
-                React.createElement(Box, { key: i, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
-                    React.createElement(ChatMessageHeader, { message: message }),
+                React.createElement(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 : '') },
+                    React.createElement(ChatMessageHeader, { message: message, isCurrentUser: isCurrentUser }),
                     React.createElement(ChatMessage, { ...props, message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
                     props.messageFooterRegistry && (React.createElement(MessageFooterComponent, { registry: props.messageFooterRegistry, message: message, model: model }))));
             }))),
-        React.createElement(WritingUsersList, { writers: currentWriters }),
         React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
 }

package/lib/components/messages/toolbar.js

@@ -2,7 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { ToolbarButtonComponent, deleteIcon, editIcon } from '@jupyterlab/ui-components';
+// import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import React from 'react';
 const TOOLBAR_CLASS = 'jp-chat-toolbar';
 /**
@@ -10,21 +12,41 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
  */
 export function MessageToolbar(props) {
     const buttons = [];
-    if (props.edit !== undefined) {
-        const editButton = ToolbarButtonComponent({
-            icon: editIcon,
-            onClick: props.edit,
-            tooltip: 'Edit'
-        });
-        buttons.push(editButton);
-    }
+    // if (props.edit !== undefined) {
+    //   const editButton = (
+    //     <Tooltip key="edit" title="Edit" placement="top" arrow>
+    //       <span>
+    //         <IconButton
+    //           onClick={props.edit}
+    //           aria-label="Edit"
+    //           sx={{
+    //             width: '24px',
+    //             height: '24px',
+    //             padding: 0,
+    //             lineHeight: 0
+    //           }}
+    //         >
+    //           <EditIcon sx={{ fontSize: '16px' }} />
+    //         </IconButton>
+    //       </span>
+    //     </Tooltip>
+    //   );
+    //   buttons.push(editButton);
+    // }
     if (props.delete !== undefined) {
-        const deleteButton = ToolbarButtonComponent({
-            icon: deleteIcon,
-            onClick: props.delete,
-            tooltip: 'Delete'
-        });
+        const deleteButton = (React.createElement(Tooltip, { key: "delete", title: "Delete", placement: "top", arrow: true },
+            React.createElement("span", null,
+                React.createElement(IconButton, { onClick: props.delete, "aria-label": "Delete", sx: {
+                        width: '24px',
+                        height: '24px',
+                        padding: 0,
+                        lineHeight: 0
+                    } },
+                    React.createElement(DeleteIcon, { sx: { fontSize: '16px' } })))));
         buttons.push(deleteButton);
     }
-    return (React.createElement("div", { className: TOOLBAR_CLASS }, buttons.map(toolbarButton => toolbarButton)));
+    return (React.createElement(Box, { className: TOOLBAR_CLASS, sx: {
+            display: 'flex',
+            gap: 2
+        } }, buttons));
 }