@jupyter/chat 0.8.1 → 0.10.0

package/lib/__tests__/mocks.d.ts

@@ -0,0 +1,9 @@
+import { AbstractChatContext, AbstractChatModel, IChatModel, IChatContext } from '../model';
+import { INewMessage } from '../types';
+export declare class MockChatContext extends AbstractChatContext implements IChatContext {
+    get users(): never[];
+}
+export declare class MockChatModel extends AbstractChatModel implements IChatModel {
+    sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    createChatContext(): IChatContext;
+}

package/lib/__tests__/mocks.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { AbstractChatContext, AbstractChatModel } from '../model';
+export class MockChatContext extends AbstractChatContext {
+    get users() {
+        return [];
+    }
+}
+export class MockChatModel extends AbstractChatModel {
+    sendMessage(message) {
+        // No-op
+    }
+    createChatContext() {
+        return new MockChatContext({ model: this });
+    }
+}

package/lib/__tests__/model.spec.js

@@ -5,25 +5,32 @@
 /**
  * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
  */
-import { ChatModel } from '../model';
+import { AbstractChatModel } from '../model';
+import { MockChatModel, MockChatContext } from './mocks';
 describe('test chat model', () => {
     describe('model instantiation', () => {
-        it('should create a ChatModel', () => {
-            const model = new ChatModel();
-            expect(model).toBeInstanceOf(ChatModel);
+        it('should create an AbstractChatModel', () => {
+            const model = new MockChatModel();
+            expect(model).toBeInstanceOf(AbstractChatModel);
         });
-        it('should dispose a ChatModel', () => {
-            const model = new ChatModel();
+        it('should dispose an AbstractChatModel', () => {
+            const model = new MockChatModel();
             model.dispose();
             expect(model.isDisposed).toBeTruthy();
         });
     });
     describe('incoming message', () => {
-        class TestChat extends ChatModel {
+        class TestChat extends AbstractChatModel {
             formatChatMessage(message) {
                 message.body = 'formatted msg';
                 return message;
             }
+            sendMessage(message) {
+                // No-op
+            }
+            createChatContext() {
+                return new MockChatContext({ model: this });
+            }
         }
         let model;
         let messages;
@@ -38,7 +45,7 @@ describe('test chat model', () => {
             messages = [];
         });
         it('should signal incoming message', () => {
-            model = new ChatModel();
+            model = new MockChatModel();
             model.messagesUpdated.connect((sender) => {
                 expect(sender).toBe(model);
                 messages = model.messages;
@@ -61,11 +68,11 @@ describe('test chat model', () => {
     });
     describe('model config', () => {
         it('should have empty config', () => {
-            const model = new ChatModel();
+            const model = new MockChatModel();
             expect(model.config.sendWithShiftEnter).toBeUndefined();
         });
         it('should allow config', () => {
-            const model = new ChatModel({ config: { sendWithShiftEnter: true } });
+            const model = new MockChatModel({ config: { sendWithShiftEnter: true } });
             expect(model.config.sendWithShiftEnter).toBeTruthy();
         });
     });

package/lib/__tests__/widgets.spec.js

@@ -6,21 +6,21 @@
  * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
  */
 import { RenderMimeRegistry } from '@jupyterlab/rendermime';
-import { ChatModel } from '../model';
 import { ChatWidget } from '../widgets/chat-widget';
+import { MockChatModel } from './mocks';
 describe('test chat widget', () => {
     let model;
     let rmRegistry;
     beforeEach(() => {
-        model = new ChatModel();
+        model = new MockChatModel();
         rmRegistry = new RenderMimeRegistry();
     });
     describe('model instantiation', () => {
-        it('should create a ChatModel', () => {
+        it('should create an AbstractChatModel', () => {
             const widget = new ChatWidget({ model, rmRegistry });
             expect(widget).toBeInstanceOf(ChatWidget);
         });
-        it('should dispose a ChatModel', () => {
+        it('should dispose an AbstractChatModel', () => {
             const widget = new ChatWidget({ model, rmRegistry });
             widget.dispose();
             expect(widget.isDisposed).toBeTruthy();

package/lib/chat-commands/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LabIcon } from '@jupyterlab/ui-components';
 import { IInputModel } from '../input-model';
 export type ChatCommand = {
@@ -14,7 +15,7 @@ export type ChatCommand = {
      * If set, this will be rendered as the icon for the command in the chat
      * commands menu. Jupyter Chat will choose a default if this is unset.
      */
-    icon?: LabIcon | string;
+    icon?: LabIcon | JSX.Element | string | null;
     /**
      * If set, this will be rendered as the description for the command in the
      * chat commands menu. Jupyter Chat will choose a default if this is unset.

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IDocumentManager } from '@jupyterlab/docmanager';
 import { SxProps, Theme } from '@mui/material';
+import { IInputToolbarRegistry } from './input';
 import { IInputModel } from '../input-model';
 import { IChatCommandRegistry } from '../chat-commands';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
@@ -13,29 +13,21 @@ export declare namespace ChatInput {
      */
     interface IProps {
         /**
-         * The chat model.
+         * The input model.
          */
         model: IInputModel;
         /**
-         * The function to be called to send the message.
+         * The toolbar registry.
          */
-        onSend: (input: string) => unknown;
+        toolbarRegistry: IInputToolbarRegistry;
         /**
          * The function to be called to cancel editing.
          */
         onCancel?: () => unknown;
-        /**
-         * Whether to allow or not including selection.
-         */
-        hideIncludeSelection?: boolean;
         /**
          * Custom mui/material styles.
          */
         sx?: SxProps<Theme>;
-        /**
-         * The document manager.
-         */
-        documentManager?: IDocumentManager;
         /**
          * Chat command registry.
          */

package/lib/components/chat-input.js

@@ -6,23 +6,24 @@ import { Autocomplete, Box, InputAdornment, TextField } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { AttachmentPreviewList } from './attachments';
-import { AttachButton, CancelButton, SendButton } from './input';
-import { useChatCommands } from './input/use-chat-commands';
+import { useChatCommands } from './input';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
+const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 export function ChatInput(props) {
-    var _a, _b;
-    const { documentManager, model } = props;
+    var _a;
+    const { model, toolbarRegistry } = props;
     const [input, setInput] = useState(model.value);
     const inputRef = useRef();
     const chatCommands = useChatCommands(model, props.chatCommandRegistry);
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
     const [attachments, setAttachments] = useState(model.attachments);
-    // Display the include selection menu if it is not explicitly hidden, and if at least
-    // one of the tool to check for text or cell selection is enabled.
-    let hideIncludeSelection = (_b = props.hideIncludeSelection) !== null && _b !== void 0 ? _b : false;
-    if (model.activeCellManager === null && model.selectionWatcher === null) {
-        hideIncludeSelection = true;
-    }
+    const [toolbarElements, setToolbarElements] = useState([]);
+    /**
+     * Handle the changes on the model that affect the input.
+     * - focus requested
+     * - config changed
+     * - attachments changed
+     */
     useEffect(() => {
         var _a, _b;
         const inputChanged = (_, value) => {
@@ -51,6 +52,19 @@ export function ChatInput(props) {
             (_c = model.attachmentsChanged) === null || _c === void 0 ? void 0 : _c.disconnect(attachmentChanged);
         };
     }, [model]);
+    /**
+     * Handle the changes in the toolbar items.
+     */
+    useEffect(() => {
+        const updateToolbar = () => {
+            setToolbarElements(toolbarRegistry.getItems());
+        };
+        toolbarRegistry.itemsChanged.connect(updateToolbar);
+        updateToolbar();
+        return () => {
+            toolbarRegistry.itemsChanged.disconnect(updateToolbar);
+        };
+    }, [toolbarRegistry]);
     const inputExists = !!input.trim();
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
@@ -101,36 +115,11 @@ export function ChatInput(props) {
         // Finally, send the message when all other conditions are met.
         if ((sendWithShiftEnter && event.shiftKey) ||
             (!sendWithShiftEnter && !event.shiftKey)) {
-            onSend();
+            model.send(input);
             event.stopPropagation();
             event.preventDefault();
         }
     }
-    /**
-     * Triggered when sending the message.
-     *
-     * Add code block if cell or text is selected.
-     */
-    function onSend(selection) {
-        let content = input;
-        if (selection) {
-            content += `
-
-\`\`\`
-${selection.source}
-\`\`\`
-`;
-        }
-        props.onSend(content);
-        model.value = '';
-    }
-    /**
-     * Triggered when cancelling edition.
-     */
-    function onCancel() {
-        var _a;
-        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
     // Set the helper text based on whether Shift+Enter is used for sending.
     const helperText = sendWithShiftEnter ? (React.createElement("span", null,
         "Press ",
@@ -164,10 +153,7 @@ ${selection.source}
                 }
             }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", 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); }, InputProps: {
                     ...params.InputProps,
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        documentManager && model.addAttachment && (React.createElement(AttachButton, { documentManager: documentManager, onAttach: model.addAttachment })),
-                        props.onCancel && React.createElement(CancelButton, { onCancel: onCancel }),
-                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: inputExists || attachments.length > 0, onSend: onSend, hideIncludeSelection: hideIncludeSelection, hasButtonOnLeft: !!props.onCancel })))
+                    endAdornment: (React.createElement(InputAdornment, { position: "end", className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model })))))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
                 }, helperText: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {

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

@@ -1,8 +1,7 @@
-import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
-import type { SxProps, Theme } from '@mui/material';
 import React from 'react';
+import { IInputToolbarRegistry } from './input';
 import { IChatCommandRegistry } from '../chat-commands';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -10,10 +9,22 @@ import { IChatMessage, IUser } from '../types';
  * The base components props.
  */
 type BaseMessageProps = {
+    /**
+     * The mime renderer registry.
+     */
     rmRegistry: IRenderMimeRegistry;
+    /**
+     * The chat model.
+     */
     model: IChatModel;
+    /**
+     * The chat commands registry.
+     */
     chatCommandRegistry?: IChatCommandRegistry;
-    documentManager?: IDocumentManager;
+    /**
+     * The input toolbar registry.
+     */
+    inputToolbarRegistry: IInputToolbarRegistry;
 };
 /**
  * The messages list component.
@@ -23,8 +34,10 @@ export declare function ChatMessages(props: BaseMessageProps): JSX.Element;
  * The message header props.
  */
 type ChatMessageHeaderProps = {
+    /**
+     * The chat message.
+     */
     message: IChatMessage;
-    sx?: SxProps<Theme>;
 };
 /**
  * The message header component.

package/lib/components/chat-messages.js

@@ -13,6 +13,7 @@ import { ChatInput } from './chat-input';
 import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 import { InputModel } from '../input-model';
+import { replaceSpanToMention } from '../utils';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
@@ -192,8 +193,7 @@ export function ChatMessageHeader(props) {
             '& > :not(:last-child)': {
                 marginRight: 3
             },
-            marginBottom: message.stacked ? '0px' : '12px',
-            ...props.sx
+            marginBottom: message.stacked ? '0px' : '12px'
         } },
         avatar,
         React.createElement(Box, { sx: {
@@ -247,15 +247,27 @@ export const ChatMessage = forwardRef((props, ref) => {
     // Create an input model only if the message is edited.
     useEffect(() => {
         if (edit && canEdit) {
-            setInputModel(new InputModel({
-                value: message.body,
-                activeCellManager: model.activeCellManager,
-                selectionWatcher: model.selectionWatcher,
-                config: {
-                    sendWithShiftEnter: model.config.sendWithShiftEnter
-                },
-                attachments: message.attachments
-            }));
+            setInputModel(() => {
+                var _a;
+                let body = message.body;
+                (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
+                    body = replaceSpanToMention(body, user);
+                });
+                return new InputModel({
+                    chatContext: model.createChatContext(),
+                    onSend: (input, model) => updateMessage(message.id, input, model),
+                    onCancel: () => cancelEdition(),
+                    value: body,
+                    activeCellManager: model.activeCellManager,
+                    selectionWatcher: model.selectionWatcher,
+                    documentManager: model.documentManager,
+                    config: {
+                        sendWithShiftEnter: model.config.sendWithShiftEnter
+                    },
+                    attachments: message.attachments,
+                    mentions: message.mentions
+                });
+            });
         }
         else {
             setInputModel(null);
@@ -266,14 +278,15 @@ export const ChatMessage = forwardRef((props, ref) => {
         setEdit(false);
     };
     // Update the content of the message.
-    const updateMessage = (id, input) => {
-        if (!canEdit) {
+    const updateMessage = (id, input, inputModel) => {
+        if (!canEdit || !inputModel) {
             return;
         }
         // Update the message
         const updatedMessage = { ...message };
         updatedMessage.body = input;
-        updatedMessage.attachments = inputModel === null || inputModel === void 0 ? void 0 : inputModel.attachments;
+        updatedMessage.attachments = inputModel.attachments;
+        updatedMessage.mentions = inputModel.mentions;
         model.updateMessage(id, updatedMessage);
         setEdit(false);
     };
@@ -286,7 +299,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 && inputModel ? (React.createElement(ChatInput, { onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: inputModel, hideIncludeSelection: true, chatCommandRegistry: props.chatCommandRegistry, documentManager: props.documentManager })) : (React.createElement(MarkdownRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
+        edit && canEdit && inputModel ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: inputModel, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: props.inputToolbarRegistry })) : (React.createElement(MarkdownRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : 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/chat.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { IThemeManager } from '@jupyterlab/apputils';
-import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IChatCommandRegistry } from '../chat-commands';
+import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry } from '../registry';
 export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
@@ -23,10 +23,6 @@ export declare namespace Chat {
          * The rendermime registry.
          */
         rmRegistry: IRenderMimeRegistry;
-        /**
-         * The document manager.
-         */
-        documentManager?: IDocumentManager;
         /**
          * Chat command registry.
          */
@@ -35,6 +31,10 @@ export declare namespace Chat {
          * Attachment opener registry.
          */
         attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
+        /**
+         * The input toolbar registry
+         */
+        inputToolbarRegistry?: IInputToolbarRegistry;
     }
     /**
      * The options to build the Chat UI.

package/lib/components/chat.js

@@ -10,22 +10,23 @@ import React, { useState } from 'react';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
+import { InputToolbarRegistry } from './input';
 import { AttachmentOpenerContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;
-    const onSend = async (input) => {
-        // send message to backend
-        model.sendMessage({ body: input });
-    };
+    let { inputToolbarRegistry } = props;
+    if (!inputToolbarRegistry) {
+        inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
+    }
     return (React.createElement(AttachmentOpenerContext.Provider, { value: props.attachmentOpenerRegistry },
-        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, documentManager: props.documentManager }),
-        React.createElement(ChatInput, { onSend: onSend, sx: {
+        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry }),
+        React.createElement(ChatInput, { sx: {
                 paddingLeft: 4,
                 paddingRight: 4,
                 paddingTop: 1,
                 paddingBottom: 0,
                 borderTop: '1px solid var(--jp-border-color1)'
-            }, model: model.input, documentManager: props.documentManager, chatCommandRegistry: props.chatCommandRegistry })));
+            }, model: model.input, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: inputToolbarRegistry })));
 }
 export function Chat(props) {
     var _a;
@@ -53,7 +54,7 @@ export function Chat(props) {
                     React.createElement(ArrowBackIcon, null))) : (React.createElement(Box, null)),
                 view !== Chat.View.settings && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.settings) },
                     React.createElement(SettingsIcon, null))) : (React.createElement(Box, null))),
-            view === Chat.View.chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry, documentManager: props.documentManager, chatCommandRegistry: props.chatCommandRegistry, attachmentOpenerRegistry: props.attachmentOpenerRegistry })),
+            view === Chat.View.chat && React.createElement(ChatBody, { ...props }),
             view === Chat.View.settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
 }
 /**

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

@@ -10,14 +10,17 @@ var CopyStatus;
     CopyStatus[CopyStatus["None"] = 0] = "None";
     CopyStatus[CopyStatus["Copying"] = 1] = "Copying";
     CopyStatus[CopyStatus["Copied"] = 2] = "Copied";
+    CopyStatus[CopyStatus["Disabled"] = 3] = "Disabled";
 })(CopyStatus || (CopyStatus = {}));
 const COPYBTN_TEXT_BY_STATUS = {
     [CopyStatus.None]: 'Copy to clipboard',
     [CopyStatus.Copying]: 'Copying…',
-    [CopyStatus.Copied]: 'Copied!'
+    [CopyStatus.Copied]: 'Copied!',
+    [CopyStatus.Disabled]: 'Copy to clipboard disabled in insecure context'
 };
 export function CopyButton(props) {
-    const [copyStatus, setCopyStatus] = useState(CopyStatus.None);
+    const isCopyDisabled = navigator.clipboard === undefined;
+    const [copyStatus, setCopyStatus] = useState(isCopyDisabled ? CopyStatus.Disabled : CopyStatus.None);
     const timeoutId = useRef(null);
     const copy = useCallback(async () => {
         // ignore if we are already copying
@@ -38,6 +41,6 @@ export function CopyButton(props) {
         }
         timeoutId.current = window.setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
     }, [copyStatus, props.value]);
-    return (React.createElement(TooltippedIconButton, { className: props.className, tooltip: COPYBTN_TEXT_BY_STATUS[copyStatus], placement: "top", onClick: copy, "aria-label": "Copy to clipboard" },
+    return (React.createElement(TooltippedIconButton, { disabled: isCopyDisabled, className: props.className, tooltip: COPYBTN_TEXT_BY_STATUS[copyStatus], placement: "top", onClick: copy, "aria-label": "Copy to clipboard" },
         React.createElement(copyIcon.react, { height: "16px", width: "16px" })));
 }

package/lib/components/input/buttons/attach-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { InputToolbarRegistry } from '../toolbar-registry';
+/**
+ * The attach button.
+ */
+export declare function AttachButton(props: InputToolbarRegistry.IToolbarItemProps): JSX.Element;

package/lib/components/input/{attach-button.js → buttons/attach-button.js}

@@ -5,23 +5,31 @@
 import { FileDialog } from '@jupyterlab/filebrowser';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import React from 'react';
-import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 const ATTACH_BUTTON_CLASS = 'jp-chat-attach-button';
 /**
  * The attach button.
  */
 export function AttachButton(props) {
+    const { model } = props;
     const tooltip = 'Add attachment';
+    if (!model.documentManager || !model.addAttachment) {
+        return React.createElement(React.Fragment, null);
+    }
     const onclick = async () => {
+        if (!model.documentManager || !model.addAttachment) {
+            return;
+        }
         try {
             const files = await FileDialog.getOpenFiles({
                 title: 'Select files to attach',
-                manager: props.documentManager
+                manager: model.documentManager
             });
             if (files.value) {
                 files.value.forEach(file => {
+                    var _a;
                     if (file.type !== 'directory') {
-                        props.onAttach({ type: 'file', value: file.path });
+                        (_a = model.addAttachment) === null || _a === void 0 ? void 0 : _a.call(model, { type: 'file', value: file.path });
                     }
                 });
             }
@@ -35,11 +43,6 @@ export function AttachButton(props) {
             variant: 'contained',
             title: tooltip,
             className: ATTACH_BUTTON_CLASS
-        }, sx: {
-            minWidth: 'unset',
-            padding: '4px',
-            borderRadius: '2px 0px 0px 2px',
-            marginRight: '1px'
         } },
         React.createElement(AttachFileIcon, null)));
 }

package/lib/components/input/buttons/cancel-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { InputToolbarRegistry } from '../toolbar-registry';
+/**
+ * The cancel button.
+ */
+export declare function CancelButton(props: InputToolbarRegistry.IToolbarItemProps): JSX.Element;

package/lib/components/input/{cancel-button.js → buttons/cancel-button.js}

@@ -4,23 +4,21 @@
  */
 import CancelIcon from '@mui/icons-material/Cancel';
 import React from 'react';
-import { TooltippedButton } from '../mui-extras/tooltipped-button';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 /**
  * The cancel button.
  */
 export function CancelButton(props) {
+    if (!props.model.cancel) {
+        return React.createElement(React.Fragment, null);
+    }
     const tooltip = 'Cancel edition';
-    return (React.createElement(TooltippedButton, { onClick: props.onCancel, tooltip: tooltip, buttonProps: {
+    return (React.createElement(TooltippedButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
             size: 'small',
             variant: 'contained',
             title: tooltip,
             className: CANCEL_BUTTON_CLASS
-        }, sx: {
-            minWidth: 'unset',
-            padding: '4px',
-            borderRadius: '2px 0px 0px 2px',
-            marginRight: '1px'
         } },
         React.createElement(CancelIcon, null)));
 }

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

@@ -0,0 +1,3 @@
+export { AttachButton } from './attach-button';
+export { CancelButton } from './cancel-button';
+export { SendButton } from './send-button';

package/lib/components/input/buttons/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { AttachButton } from './attach-button';
+export { CancelButton } from './cancel-button';
+export { SendButton } from './send-button';

package/lib/components/input/buttons/send-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { InputToolbarRegistry } from '../toolbar-registry';
+/**
+ * The send button, with optional 'include selection' menu.
+ */
+export declare function SendButton(props: InputToolbarRegistry.IToolbarItemProps): JSX.Element;