@jupyter/chat 0.19.0-alpha.2 → 0.19.0

package/lib/__tests__/model.spec.js

@@ -52,7 +52,7 @@ describe('test chat model', () => {
             });
             model.messageAdded(msg);
             expect(messages).toHaveLength(1);
-            expect(messages[0]).toBe(msg);
+            expect(messages[0].content).toBe(msg);
         });
         it('should format message', () => {
             model = new TestChat();
@@ -62,7 +62,7 @@ describe('test chat model', () => {
             });
             model.messageAdded({ ...msg });
             expect(messages).toHaveLength(1);
-            expect(messages[0]).not.toBe(msg);
+            expect(messages[0].content).not.toBe(msg);
             expect(messages[0].body).toBe('formatted msg');
         });
     });

package/lib/components/chat.js

@@ -6,17 +6,40 @@ 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, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './messages';
+import { WritingIndicator } from './writing-indicator';
 import { ChatReactContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
+    const [writers, setWriters] = useState([]);
     let { inputToolbarRegistry } = props;
     if (!inputToolbarRegistry) {
         inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
     }
+    /**
+     * Handle the changes in the writers list.
+     */
+    useEffect(() => {
+        var _a;
+        if (!model) {
+            return;
+        }
+        const updateWriters = (_, writers) => {
+            // Show all writers for now - AI generating responses will have messageID
+            setWriters(writers);
+        };
+        // Set initial writers state
+        const initialWriters = model.writers;
+        setWriters(initialWriters);
+        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
+        return () => {
+            var _a;
+            (_a = model === null || model === void 0 ? void 0 : model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
+        };
+    }, [model]);
     // const horizontalPadding = props.area === 'main' ? 8 : 4;
     const horizontalPadding = 4;
     const contextValue = {
@@ -30,7 +53,11 @@ export function ChatBody(props) {
                 paddingRight: horizontalPadding,
                 paddingTop: 0,
                 paddingBottom: 0
-            }, model: model.input })));
+            }, model: model.input }),
+        React.createElement(WritingIndicator, { sx: {
+                paddingLeft: horizontalPadding,
+                paddingRight: horizontalPadding
+            }, writers: writers })));
 }
 export function Chat(props) {
     var _a;

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

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

@@ -38,7 +38,7 @@ export function AttachButton(props) {
             console.warn('Error selecting files to attach', e);
         }
     };
-    return (React.createElement(TooltippedIconButton, { onClick: onclick, tooltip: tooltip, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: onclick, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: ATTACH_BUTTON_CLASS
         } },

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

@@ -14,7 +14,7 @@ export function CancelButton(props) {
         return React.createElement(React.Fragment, null);
     }
     const tooltip = 'Cancel editing';
-    return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
             title: tooltip,
             className: CANCEL_BUTTON_CLASS
         } },

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

@@ -36,7 +36,7 @@ export function SaveEditButton(props) {
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
         model.send(model.value);
     }
-    return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: save, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: SAVE_EDIT_BUTTON_CLASS
         }, "aria-label": tooltip },

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

@@ -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,7 +53,7 @@ export function SendButton(props) {
         model.value = '';
         model.focus();
     }
-    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: SEND_BUTTON_CLASS
         }, "aria-label": tooltip },

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

@@ -38,7 +38,7 @@ 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(TooltippedIconButton, { onClick: stop, tooltip: tooltip, disabled: disabled, iconButtonProps: {
+    return (React.createElement(TooltippedIconButton, { onClick: stop, tooltip: tooltip, disabled: disabled, buttonProps: {
             title: tooltip,
             className: STOP_BUTTON_CLASS
         }, "aria-label": tooltip },

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

@@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useChatCommands } from './use-chat-commands';
 import { AttachmentPreviewList } from '../attachments';
 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';
@@ -23,8 +22,6 @@ 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.
      */
@@ -80,27 +77,6 @@ export function ChatInput(props) {
             inputToolbarRegistry === null || inputToolbarRegistry === void 0 ? void 0 : inputToolbarRegistry.itemsChanged.disconnect(updateToolbar);
         };
     }, [inputToolbarRegistry]);
-    /**
-     * Handle the changes in the writers list.
-     */
-    useEffect(() => {
-        var _a;
-        if (!chatModel) {
-            return;
-        }
-        const updateWriters = (_, writers) => {
-            // Show all writers for now - AI generating responses will have messageID
-            setWriters(writers);
-        };
-        // Set initial writers state
-        const initialWriters = chatModel.writers;
-        setWriters(initialWriters);
-        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(updateWriters);
-        return () => {
-            var _a;
-            (_a = chatModel === null || chatModel === void 0 ? void 0 : chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(updateWriters);
-        };
-    }, [chatModel]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -163,9 +139,7 @@ export function ChatInput(props) {
     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',
@@ -188,7 +162,7 @@ export function ChatInput(props) {
                             padding: 0
                         }
                     }
-                }, 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, 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',
@@ -235,6 +209,5 @@ 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: chatCommandRegistry, chatModel: chatModel, edit: props.edit }))))),
-        React.createElement(InputWritingIndicator, { writers: writers })));
+                } }, toolbarElements.map((item, index) => (React.createElement(item.element, { key: index, model: model, chatCommandRegistry: chatCommandRegistry, chatModel: chatModel, edit: props.edit })))))));
 }

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

@@ -2,4 +2,3 @@ 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,4 +6,3 @@ export * from './buttons';
 export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';
-export * from './writing-indicator';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessageContent } from '../../types';
 /**
  * The chat footer component properties.
  */
@@ -7,7 +7,7 @@ export interface IMessageFootersProps {
     /**
      * The chat model.
      */
-    message: IChatMessage;
+    message: IMessageContent;
 }
 /**
  * The chat footer component, which displays footer components on a row according to

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message header props.
  */
@@ -7,7 +7,7 @@ type ChatMessageHeaderProps = {
     /**
      * The chat message.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * Whether this message is from the current user.
      */

package/lib/components/messages/header.js

@@ -12,11 +12,7 @@ const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
  */
 export function ChatMessageHeader(props) {
     var _a, _b;
-    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);
-    }
+    const [message, setMessage] = useState(props.message.content);
     // Flag to display only the deleted or edited information (stacked message).
     const onlyState = message.stacked && (message.deleted || message.edited);
     const [datetime, setDatetime] = useState({});
@@ -55,9 +51,20 @@ export function ChatMessageHeader(props) {
             setDatetime(newDatetime);
         }
     });
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     const avatar = message.stacked ? null : Avatar({ user: sender });
     const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || 'User undefined');
-    return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
+    // Don't render header for stacked messages not deleted or edited.
+    return message.stacked && !message.deleted && !message.edited ? (React.createElement(React.Fragment, null)) : (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
             display: 'flex',
             alignItems: 'center',
             '& > :not(:last-child)': {

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

@@ -1,6 +1,6 @@
 import { PromiseDelegate } from '@lumino/coreutils';
 import React from 'react';
-import { IChatMessage } from '../../types';
+import { IMessage } from '../../types';
 /**
  * The message component props.
  */
@@ -8,7 +8,7 @@ type ChatMessageProps = {
     /**
      * The message to display.
      */
-    message: IChatMessage;
+    message: IMessage;
     /**
      * The index of the message in the list.
      */

package/lib/components/messages/message.js

@@ -13,8 +13,8 @@ import { replaceSpanToMention } from '../../utils';
  * The message component body.
  */
 export const ChatMessage = forwardRef((props, ref) => {
-    const { message } = props;
     const { model } = useChatContext();
+    const [message, setMessage] = useState(props.message.content);
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
@@ -39,6 +39,21 @@ export const ChatMessage = forwardRef((props, ref) => {
             setCanDelete(false);
         }
     }, [model, message]);
+    // Listen for changes in the current message.
+    useEffect(() => {
+        function messageChanged() {
+            setMessage(props.message.content);
+        }
+        props.message.changed.connect(messageChanged);
+        // Initialize the message when the message is re-rendered.
+        // FIX ? This seems to be required for outofband change, to get the new value,
+        // even if when an outofband change occurs, all the messages are deleted and
+        // recreated.
+        setMessage(props.message.content);
+        return () => {
+            props.message.changed.disconnect(messageChanged);
+        };
+    }, [props.message]);
     // Create an input model only if the message is edited.
     const startEdition = () => {
         var _a;

package/lib/components/messages/messages.js

@@ -13,6 +13,7 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
+import { Message } from '../../message';
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
@@ -39,7 +40,7 @@ export function ChatMessages() {
             }
             model
                 .getHistory()
-                .then(history => setMessages(history.messages))
+                .then(history => setMessages(history.messages.map(message => new Message({ ...message }))))
                 .catch(e => console.error(e));
         }
         fetchHistory();
@@ -150,7 +151,7 @@ export function ChatMessages() {
                     model.user.username === message.sender.username;
                 return (
                 // extra div needed to ensure each bubble is on a new line
-                React.createElement(Box, { key: i, sx: {
+                React.createElement(Box, { key: message.id, sx: {
                         ...(isCurrentUser && {
                             marginLeft: area === 'main' ? '25%' : '10%',
                             backgroundColor: 'var(--jp-layout-color2)',

package/lib/components/messages/toolbar.js

@@ -2,8 +2,8 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-// import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 import { Box } from '@mui/material';
 import React from 'react';
 import { TooltippedIconButton } from '../mui-extras';
@@ -13,19 +13,11 @@ const TOOLBAR_CLASS = 'jp-chat-toolbar';
  */
 export function MessageToolbar(props) {
     const buttons = [];
-    // if (props.edit !== undefined) {
-    //   const editButton = (
-    //     <TooltippedIconButton
-    //       tooltip={'edit'}
-    //       onClick={props.edit}
-    //       aria-label={'Edit'}
-    //       inputToolbar={false}
-    //     >
-    //       <EditIcon />
-    //     </TooltippedIconButton>
-    //   );
-    //   buttons.push(editButton);
-    // }
+    if (props.edit !== undefined) {
+        const editButton = (React.createElement(TooltippedIconButton, { tooltip: 'edit', onClick: props.edit, "aria-label": 'Edit', inputToolbar: false },
+            React.createElement(EditIcon, null)));
+        buttons.push(editButton);
+    }
     if (props.delete !== undefined) {
         const deleteButton = (React.createElement(TooltippedIconButton, { tooltip: 'Delete', onClick: props.delete, "aria-label": 'Delete', inputToolbar: false },
             React.createElement(DeleteIcon, null)));

package/lib/components/mui-extras/tooltipped-button.d.ts

@@ -1,35 +1,14 @@
-import { ButtonOwnProps, ButtonProps, SxProps, TooltipProps } from '@mui/material';
+import { ButtonProps, SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
 export declare const TOOLTIPPED_WRAP_CLASS = "jp-chat-tooltipped-wrap";
-export declare const DEFAULT_BUTTON_PROPS: Partial<ButtonOwnProps>;
-export declare const DEFAULT_BUTTON_SX: {
-    minWidth: string;
-    width: string;
-    height: string;
-    lineHeight: number;
-    '&:disabled': {
-        opacity: number;
-    };
-};
-export declare const INPUT_TOOLBAR_BUTTON_SX: {
-    backgroundColor: string;
-    color: string;
-    borderRadius: string;
-    boxShadow: string;
-    '&:hover': {
-        backgroundColor: string;
-        boxShadow: string;
-    };
-    '&:disabled': {
-        backgroundColor: string;
-        color: string;
-        opacity: number;
-    };
-};
+/**
+ * The props for the tooltipped button.
+ */
 export type TooltippedButtonProps = {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     tooltip: string;
     children: JSX.Element;
+    className?: string;
     inputToolbar?: boolean;
     disabled?: boolean;
     placement?: TooltipProps['placement'];

package/lib/components/mui-extras/tooltipped-button.js

@@ -2,38 +2,11 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { classes } from '@jupyterlab/ui-components';
 import { Button } from '@mui/material';
 import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
 export const TOOLTIPPED_WRAP_CLASS = 'jp-chat-tooltipped-wrap';
-export const DEFAULT_BUTTON_PROPS = {
-    size: 'small',
-    variant: 'contained'
-};
-export const DEFAULT_BUTTON_SX = {
-    minWidth: '24px',
-    width: '24px',
-    height: '24px',
-    lineHeight: 0,
-    '&:disabled': {
-        opacity: 0.5
-    }
-};
-export const INPUT_TOOLBAR_BUTTON_SX = {
-    backgroundColor: 'var(--jp-brand-color1)',
-    color: 'white',
-    borderRadius: '4px',
-    boxShadow: 'none',
-    '&:hover': {
-        backgroundColor: 'var(--jp-brand-color0)',
-        boxShadow: 'none'
-    },
-    '&:disabled': {
-        backgroundColor: 'var(--jp-border-color2)',
-        color: 'var(--jp-ui-font-color3)',
-        opacity: 0.5
-    }
-};
 /**
  * A component that renders an MUI `Button` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -63,10 +36,8 @@ export function TooltippedButton(props) {
                 ]
             }
         } },
-        React.createElement("span", { style: { cursor: 'default' }, className: TOOLTIPPED_WRAP_CLASS },
-            React.createElement(Button, { ...DEFAULT_BUTTON_PROPS, ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    ...DEFAULT_BUTTON_SX,
-                    ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && INPUT_TOOLBAR_BUTTON_SX),
+        React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
+            React.createElement(Button, { ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && { variant: 'input-toolbar' }), ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip, sx: {
                     ...props.sx
-                }, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip }, props.children))));
+                } }, props.children))));
 }

package/lib/components/mui-extras/tooltipped-icon-button.d.ts

@@ -1,29 +1,14 @@
 /// <reference types="react" />
-import { IconButtonProps, SvgIconOwnProps, TooltipProps } from '@mui/material';
-export type TooltippedIconButtonProps = {
-    onClick: () => unknown;
-    tooltip: string;
-    children: JSX.Element;
-    className?: string;
-    inputToolbar?: boolean;
-    disabled?: boolean;
-    placement?: TooltipProps['placement'];
-    /**
-     * The font size of the icon. By default it will be set to 'small'.
-     */
-    fontSize?: SvgIconOwnProps['fontSize'];
-    /**
-     * The offset of the tooltip popup.
-     *
-     * The expected syntax is defined by the Popper library:
-     * https://popper.js.org/docs/v2/modifiers/offset/
-     */
-    offset?: [number, number];
-    'aria-label'?: string;
+import { IconButtonProps } from '@mui/material';
+import { TooltippedButtonProps } from './tooltipped-button';
+/**
+ * The props for the tooltipped icon button.
+ */
+export type TooltippedIconButtonProps = TooltippedButtonProps & {
     /**
      * Props passed directly to the MUI `IconButton` component.
      */
-    iconButtonProps?: IconButtonProps;
+    buttonProps?: IconButtonProps;
 };
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
@@ -36,5 +21,10 @@ export type TooltippedIconButtonProps = {
  * - Lowers the opacity of the IconButton when disabled.
  * - Renders the IconButton with `line-height: 0` to avoid showing extra
  * vertical space in SVG icons.
+ *
+ * NOTES:
+ *  This kind of button doesn't allow regular variants ('outlined', 'contained', 'text').
+ *  The only one allowed is 'input-toolbar'. If you want to use one of the regular, use
+ *  the TooltippedButton instead.
  */
 export declare function TooltippedIconButton(props: TooltippedIconButtonProps): JSX.Element;

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -6,7 +6,7 @@ import { classes } from '@jupyterlab/ui-components';
 import { IconButton } from '@mui/material';
 import React from 'react';
 import { ContrastingTooltip } from './contrasting-tooltip';
-import { DEFAULT_BUTTON_PROPS, DEFAULT_BUTTON_SX, INPUT_TOOLBAR_BUTTON_SX, TOOLTIPPED_WRAP_CLASS } from './tooltipped-button';
+import { TOOLTIPPED_WRAP_CLASS } from './tooltipped-button';
 /**
  * A component that renders an MUI `IconButton` with a high-contrast tooltip
  * provided by `ContrastingTooltip`. This component differs from the MUI
@@ -18,12 +18,15 @@ import { DEFAULT_BUTTON_PROPS, DEFAULT_BUTTON_SX, INPUT_TOOLBAR_BUTTON_SX, TOOLT
  * - Lowers the opacity of the IconButton when disabled.
  * - Renders the IconButton with `line-height: 0` to avoid showing extra
  * vertical space in SVG icons.
+ *
+ * NOTES:
+ *  This kind of button doesn't allow regular variants ('outlined', 'contained', 'text').
+ *  The only one allowed is 'input-toolbar'. If you want to use one of the regular, use
+ *  the TooltippedButton instead.
  */
 export function TooltippedIconButton(props) {
     var _a, _b, _c;
-    // Override the default icon font size from 'medium' to 'small'
-    props.children.props.fontSize = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 'small';
-    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_b = props.placement) !== null && _b !== void 0 ? _b : 'top', slotProps: {
+    return (React.createElement(ContrastingTooltip, { title: props.tooltip, placement: (_a = props.placement) !== null && _a !== void 0 ? _a : 'top', slotProps: {
             popper: {
                 modifiers: [
                     {
@@ -36,8 +39,7 @@ export function TooltippedIconButton(props) {
             }
         } },
         React.createElement("span", { className: classes(props.className, TOOLTIPPED_WRAP_CLASS) },
-            React.createElement(IconButton, { ...DEFAULT_BUTTON_PROPS, ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
-                    ...DEFAULT_BUTTON_SX,
-                    ...(((_c = props.inputToolbar) !== null && _c !== void 0 ? _c : true) && INPUT_TOOLBAR_BUTTON_SX)
-                }, "aria-label": props['aria-label'] }, props.children))));
+            React.createElement(IconButton, { ...(((_b = props.inputToolbar) !== null && _b !== void 0 ? _b : true) && { variant: 'input-toolbar' }), ...props.buttonProps, onClick: props.onClick, disabled: props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : props.tooltip, sx: {
+                    ...props.sx
+                } }, props.children))));
 }

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+import { IChatModel } from '../model';
+/**
+ * The input writing indicator component props.
+ */
+export interface IInputWritingIndicatorProps {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IChatModel.IWriter[];
+    /**
+     * Custom mui/material styles.
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * The writing indicator component, displaying typing status.
+ */
+export declare function WritingIndicator(props: IInputWritingIndicatorProps): JSX.Element;

package/lib/components/{input/writing-indicator.js → writing-indicator.js}

@@ -30,13 +30,14 @@ function formatWritersText(writers) {
     }
 }
 /**
- * The input writing indicator component, displaying typing status in the chat input area.
+ * The writing indicator component, displaying typing status.
  */
-export function InputWritingIndicator(props) {
+export function WritingIndicator(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: {
+            ...props.sx,
             minHeight: '16px'
         } },
         React.createElement(Typography, { variant: "caption", sx: {