@jupyter/chat 0.8.1 → 0.9.0

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;
@@ -17,25 +17,17 @@ export declare namespace ChatInput {
          */
         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

@@ -192,8 +192,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: {
@@ -248,13 +247,14 @@ export const ChatMessage = forwardRef((props, ref) => {
     useEffect(() => {
         if (edit && canEdit) {
             setInputModel(new InputModel({
+                onSend: (input, model) => updateMessage(message.id, input, model),
+                onCancel: () => cancelEdition(),
                 value: message.body,
-                activeCellManager: model.activeCellManager,
-                selectionWatcher: model.selectionWatcher,
                 config: {
                     sendWithShiftEnter: model.config.sendWithShiftEnter
                 },
-                attachments: message.attachments
+                attachments: message.attachments,
+                documentManager: model.documentManager
             }));
         }
         else {
@@ -266,14 +266,14 @@ 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;
         model.updateMessage(id, updatedMessage);
         setEdit(false);
     };
@@ -286,7 +286,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;

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

@@ -6,8 +6,8 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import SendIcon from '@mui/icons-material/Send';
 import { Box, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
-import { TooltippedButton } from '../mui-extras/tooltipped-button';
-import { includeSelectionIcon } from '../../icons';
+import { TooltippedButton } from '../../mui-extras/tooltipped-button';
+import { includeSelectionIcon } from '../../../icons';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 const SEND_INCLUDE_OPENER_CLASS = 'jp-chat-send-include-opener';
 const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
@@ -15,12 +15,13 @@ const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
  * The send button, with optional 'include selection' menu.
  */
 export function SendButton(props) {
-    var _a, _b;
-    const { activeCellManager, selectionWatcher } = props.model;
-    const hideIncludeSelection = (_a = props.hideIncludeSelection) !== null && _a !== void 0 ? _a : false;
-    const hasButtonOnLeft = (_b = props.hasButtonOnLeft) !== null && _b !== void 0 ? _b : false;
+    const { model } = props;
+    const { activeCellManager, selectionWatcher } = model;
+    const hideIncludeSelection = !activeCellManager || !selectionWatcher;
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
     const [menuOpen, setMenuOpen] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+    const [tooltip, setTooltip] = useState('');
     const openMenu = useCallback((el) => {
         setMenuAnchorEl(el);
         setMenuOpen(true);
@@ -28,9 +29,31 @@ export function SendButton(props) {
     const closeMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
-    const disabled = !props.inputExists;
     const [selectionTooltip, setSelectionTooltip] = useState('');
     const [disableInclude, setDisableInclude] = useState(true);
+    useEffect(() => {
+        var _a;
+        const inputChanged = () => {
+            const inputExist = !!model.value.trim() || model.attachments.length;
+            setDisabled(!inputExist);
+        };
+        model.valueChanged.connect(inputChanged);
+        (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.connect(inputChanged);
+        inputChanged();
+        const configChanged = (_, config) => {
+            var _a;
+            setTooltip(((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false)
+                ? 'Send message (SHIFT+ENTER)'
+                : 'Send message (ENTER)');
+        };
+        model.configChanged.connect(configChanged);
+        return () => {
+            var _a, _b;
+            model.valueChanged.disconnect(inputChanged);
+            (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.disconnect(inputChanged);
+            (_b = model.configChanged) === null || _b === void 0 ? void 0 : _b.disconnect(configChanged);
+        };
+    }, [model]);
     useEffect(() => {
         /**
          * Enable or disable the include selection button, and adapt the tooltip.
@@ -53,44 +76,36 @@ export function SendButton(props) {
             selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.disconnect(toggleIncludeState);
             activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.disconnect(toggleIncludeState);
         };
-    }, [activeCellManager, selectionWatcher, hideIncludeSelection]);
-    const defaultTooltip = props.sendWithShiftEnter
-        ? 'Send message (SHIFT+ENTER)'
-        : 'Send message (ENTER)';
-    const tooltip = defaultTooltip;
+    }, [activeCellManager, selectionWatcher]);
     function sendWithSelection() {
-        // Append the selected text if exists.
+        let source = '';
         if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
-            props.onSend({
-                type: 'text',
-                source: selectionWatcher.selection.text
-            });
-            closeMenu();
-            return;
+            // Append the selected text if exists.
+            source = selectionWatcher.selection.text;
+        }
+        else if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
+            // Append the active cell content if exists.
+            source = activeCellManager.getContent(false).source;
         }
-        // Append the active cell content if exists.
-        if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
-            props.onSend({
-                type: 'cell',
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                source: activeCellManager.getContent(false).source
-            });
-            closeMenu();
-            return;
+        let content = model.value;
+        if (source) {
+            content += `
+
+\`\`\`
+${source}
+\`\`\`
+`;
         }
+        model.send(content);
+        closeMenu();
+        model.value = '';
     }
-    return (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'nowrap' } },
-        React.createElement(TooltippedButton, { onClick: () => props.onSend(), disabled: disabled, tooltip: tooltip, buttonProps: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TooltippedButton, { onClick: () => model.send(model.value), disabled: disabled, tooltip: tooltip, buttonProps: {
                 size: 'small',
-                title: defaultTooltip,
+                title: tooltip,
                 variant: 'contained',
                 className: SEND_BUTTON_CLASS
-            }, sx: {
-                minWidth: 'unset',
-                borderTopLeftRadius: hasButtonOnLeft ? '0px' : '2px',
-                borderTopRightRadius: hideIncludeSelection ? '2px' : '0px',
-                borderBottomRightRadius: hideIncludeSelection ? '2px' : '0px',
-                borderBottomLeftRadius: hasButtonOnLeft ? '0px' : '2px'
             } },
             React.createElement(SendIcon, null)),
         !hideIncludeSelection && (React.createElement(React.Fragment, null,
@@ -108,11 +123,6 @@ export function SendButton(props) {
                         e.stopPropagation();
                     },
                     className: SEND_INCLUDE_OPENER_CLASS
-                }, sx: {
-                    minWidth: 'unset',
-                    padding: '4px 0px',
-                    borderRadius: '0px 2px 2px 0px',
-                    marginLeft: '1px'
                 } },
                 React.createElement(KeyboardArrowDown, null)),
             React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {

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

@@ -1,3 +1,3 @@
-export * from './attach-button';
-export * from './cancel-button';
-export * from './send-button';
+export * from './buttons';
+export * from './toolbar-registry';
+export * from './use-chat-commands';

package/lib/components/input/index.js

@@ -2,6 +2,6 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './attach-button';
-export * from './cancel-button';
-export * from './send-button';
+export * from './buttons';
+export * from './toolbar-registry';
+export * from './use-chat-commands';