@jupyter/chat 0.18.2 → 0.19.0-alpha.0

package/lib/components/attachments.js

@@ -3,13 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import CloseIcon from '@mui/icons-material/Close';
-import { Box } from '@mui/material';
+import { Box, Button, Tooltip } from '@mui/material';
 import React, { useContext } from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { UUID } from '@lumino/coreutils';
-import { TooltippedButton } from './mui-extras/tooltipped-button';
 import { AttachmentOpenerContext } from '../context';
-const ATTACHMENTS_CLASS = 'jp-chat-attachments';
 const ATTACHMENT_CLASS = 'jp-chat-attachment';
 const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
 const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
@@ -41,7 +39,13 @@ function getAttachmentDisplayName(attachment) {
  * The Attachments component.
  */
 export function AttachmentPreviewList(props) {
-    return (React.createElement(Box, { className: ATTACHMENTS_CLASS }, props.attachments.map(attachment => (React.createElement(AttachmentPreview, { key: `${PathExt.basename(attachment.value)}-${UUID.uuid4()}`, ...props, attachment: attachment })))));
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 1,
+            rowGap: 1,
+            columnGap: 2
+        } }, props.attachments.map(attachment => (React.createElement(AttachmentPreview, { key: `${PathExt.basename(attachment.value)}-${UUID.uuid4()}`, ...props, attachment: attachment })))));
 }
 /**
  * The Attachment component.
@@ -49,21 +53,43 @@ export function AttachmentPreviewList(props) {
 export function AttachmentPreview(props) {
     const remove_tooltip = 'Remove attachment';
     const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
-    return (React.createElement(Box, { className: ATTACHMENT_CLASS },
-        React.createElement("span", { className: (attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type))
-                ? ATTACHMENT_CLICKABLE_CLASS
-                : '', onClick: () => {
-                var _a;
-                return (_a = attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type)) === null || _a === void 0 ? void 0 : _a(props.attachment);
-            } }, getAttachmentDisplayName(props.attachment)),
-        props.onRemove && (React.createElement(TooltippedButton, { onClick: () => props.onRemove(props.attachment), tooltip: remove_tooltip, buttonProps: {
-                size: 'small',
-                title: remove_tooltip,
-                className: REMOVE_BUTTON_CLASS
-            }, sx: {
-                minWidth: 'unset',
-                padding: '0',
-                color: 'inherit'
-            } },
-            React.createElement(CloseIcon, null)))));
+    const isClickable = !!(attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type));
+    return (React.createElement(Box, { className: ATTACHMENT_CLASS, sx: {
+            border: '1px solid var(--jp-border-color1)',
+            borderRadius: '2px',
+            px: 1,
+            py: 0.5,
+            backgroundColor: 'var(--jp-layout-color2)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            fontSize: '0.8125rem'
+        } },
+        React.createElement(Tooltip, { title: props.attachment.value, placement: "top", arrow: true },
+            React.createElement(Box, { className: (attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type))
+                    ? ATTACHMENT_CLICKABLE_CLASS
+                    : '', component: "span", onClick: () => {
+                    var _a;
+                    return (_a = attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type)) === null || _a === void 0 ? void 0 : _a(props.attachment);
+                }, sx: {
+                    cursor: isClickable ? 'pointer' : 'default',
+                    '&:hover': isClickable
+                        ? {
+                            textDecoration: 'underline'
+                        }
+                        : {}
+                } }, getAttachmentDisplayName(props.attachment))),
+        props.onRemove && (React.createElement(Tooltip, { title: remove_tooltip, placement: "top", arrow: true },
+            React.createElement("span", null,
+                React.createElement(Button, { onClick: () => props.onRemove(props.attachment), size: "small", className: REMOVE_BUTTON_CLASS, "aria-label": remove_tooltip, sx: {
+                        minWidth: 'unset',
+                        padding: 0,
+                        lineHeight: 0,
+                        color: 'var(--jp-ui-font-color2)',
+                        '&:hover': {
+                            color: 'var(--jp-ui-font-color0)',
+                            backgroundColor: 'transparent'
+                        }
+                    } },
+                    React.createElement(CloseIcon, { fontSize: "small" })))))));
 }

package/lib/components/chat.d.ts

@@ -4,6 +4,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry } from '../registers';
+import { ChatArea } from '../types';
 export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
@@ -42,6 +43,10 @@ export declare namespace Chat {
          * The welcome message.
          */
         welcomeMessage?: string;
+        /**
+         * The area where the chat is displayed.
+         */
+        area?: ChatArea;
     }
     /**
      * The options to build the Chat UI.

package/lib/components/chat.js

@@ -17,15 +17,16 @@ export function ChatBody(props) {
     if (!inputToolbarRegistry) {
         inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
     }
+    // const horizontalPadding = props.area === 'main' ? 8 : 4;
+    const horizontalPadding = 4;
     return (React.createElement(AttachmentOpenerContext.Provider, { value: props.attachmentOpenerRegistry },
-        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry, messageFooterRegistry: props.messageFooterRegistry, welcomeMessage: props.welcomeMessage }),
+        React.createElement(ChatMessages, { rmRegistry: props.rmRegistry, model: model, chatCommandRegistry: props.chatCommandRegistry, inputToolbarRegistry: inputToolbarRegistry, messageFooterRegistry: props.messageFooterRegistry, welcomeMessage: props.welcomeMessage, area: props.area }),
         React.createElement(ChatInput, { sx: {
-                paddingLeft: 4,
-                paddingRight: 4,
+                paddingLeft: horizontalPadding,
+                paddingRight: horizontalPadding,
                 paddingTop: 0,
-                paddingBottom: 0,
-                borderTop: '1px solid var(--jp-border-color1)'
-            }, model: model.input, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: inputToolbarRegistry })));
+                paddingBottom: 0
+            }, model: model.input, chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: inputToolbarRegistry, area: props.area, chatModel: model })));
 }
 export function Chat(props) {
     var _a;

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

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

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

@@ -4,7 +4,7 @@
  */
 import React, { useState, useCallback, useRef } from 'react';
 import { copyIcon } from '@jupyterlab/ui-components';
-import { TooltippedIconButton } from '../mui-extras/tooltipped-icon-button';
+import { IconButton, Tooltip } from '@mui/material';
 var CopyStatus;
 (function (CopyStatus) {
     CopyStatus[CopyStatus["None"] = 0] = "None";
@@ -41,6 +41,14 @@ export function CopyButton(props) {
         }
         timeoutId.current = window.setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
     }, [copyStatus, props.value]);
-    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" })));
+    const tooltip = COPYBTN_TEXT_BY_STATUS[copyStatus];
+    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
+        React.createElement("span", null,
+            React.createElement(IconButton, { disabled: isCopyDisabled, className: props.className, onClick: copy, "aria-label": "Copy to clipboard", sx: {
+                    lineHeight: 0,
+                    '&.Mui-disabled': {
+                        opacity: 0.5
+                    }
+                } },
+                React.createElement(copyIcon.react, { height: "16px", width: "16px" })))));
 }

package/lib/components/index.d.ts

@@ -4,5 +4,4 @@ export * from './code-blocks';
 export * from './input';
 export * from './jl-theme-provider';
 export * from './messages';
-export * from './mui-extras';
 export * from './scroll-container';

package/lib/components/index.js

@@ -8,5 +8,4 @@ export * from './code-blocks';
 export * from './input';
 export * from './jl-theme-provider';
 export * from './messages';
-export * from './mui-extras';
 export * from './scroll-container';

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

@@ -40,9 +40,14 @@ export function AttachButton(props) {
     };
     return (React.createElement(TooltippedButton, { onClick: onclick, tooltip: tooltip, buttonProps: {
             size: 'small',
-            variant: 'contained',
+            variant: 'text',
             title: tooltip,
             className: ATTACH_BUTTON_CLASS
+        }, sx: {
+            width: '24px',
+            height: '24px',
+            minWidth: '24px',
+            color: 'gray'
         } },
-        React.createElement(AttachFileIcon, null)));
+        React.createElement(AttachFileIcon, { sx: { fontSize: '16px ' } })));
 }

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

@@ -2,9 +2,9 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, Tooltip } from '@mui/material';
 import React from 'react';
-import { TooltippedButton } from '../../mui-extras/tooltipped-button';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 /**
  * The cancel button.
@@ -13,12 +13,14 @@ export function CancelButton(props) {
     if (!props.model.cancel) {
         return React.createElement(React.Fragment, null);
     }
-    const tooltip = 'Cancel edition';
-    return (React.createElement(TooltippedButton, { onClick: props.model.cancel, tooltip: tooltip, buttonProps: {
-            size: 'small',
-            variant: 'contained',
-            title: tooltip,
-            className: CANCEL_BUTTON_CLASS
-        } },
-        React.createElement(CancelIcon, null)));
+    const tooltip = 'Cancel editing';
+    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
+        React.createElement("span", null,
+            React.createElement(IconButton, { onClick: props.model.cancel, className: CANCEL_BUTTON_CLASS, "aria-label": tooltip, sx: {
+                    width: '24px',
+                    height: '24px',
+                    padding: 0,
+                    lineHeight: 0
+                } },
+                React.createElement(CloseIcon, { sx: { fontSize: '16px' } })))));
 }

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

@@ -1,3 +1,5 @@
 export { AttachButton } from './attach-button';
 export { CancelButton } from './cancel-button';
+export { SaveEditButton } from './save-edit-button';
 export { SendButton } from './send-button';
+export { StopButton } from './stop-button';

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

@@ -4,4 +4,6 @@
  */
 export { AttachButton } from './attach-button';
 export { CancelButton } from './cancel-button';
+export { SaveEditButton } from './save-edit-button';
 export { SendButton } from './send-button';
+export { StopButton } from './stop-button';

package/lib/components/input/buttons/save-edit-button.d.ts

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

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import CheckIcon from '@mui/icons-material/Check';
+import { IconButton, Tooltip } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+const SAVE_EDIT_BUTTON_CLASS = 'jp-chat-save-edit-button';
+/**
+ * The save edit button.
+ */
+export function SaveEditButton(props) {
+    const { model, chatCommandRegistry, edit } = props;
+    // Don't show this button when not in edit mode
+    if (!edit) {
+        return React.createElement(React.Fragment, null);
+    }
+    const [disabled, setDisabled] = useState(false);
+    const tooltip = 'Save edits';
+    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();
+        return () => {
+            var _a;
+            model.valueChanged.disconnect(inputChanged);
+            (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.disconnect(inputChanged);
+        };
+    }, [model]);
+    async function save() {
+        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
+        model.send(model.value);
+    }
+    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
+        React.createElement("span", null,
+            React.createElement(IconButton, { onClick: save, disabled: disabled, className: SAVE_EDIT_BUTTON_CLASS, "aria-label": tooltip, sx: {
+                    width: '24px',
+                    height: '24px',
+                    padding: 0,
+                    lineHeight: 0,
+                    '&.Mui-disabled': {
+                        opacity: 0.5
+                    }
+                } },
+                React.createElement(CheckIcon, { sx: { fontSize: '16px' } })))));
+}

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

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

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

@@ -2,35 +2,21 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-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 ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import { Button, Tooltip } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 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';
 /**
- * The send button, with optional 'include selection' menu.
+ * The send button.
  */
 export function SendButton(props) {
-    const { model, chatCommandRegistry } = props;
-    const { activeCellManager, selectionWatcher } = model;
-    const hideIncludeSelection = !activeCellManager || !selectionWatcher;
-    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
-    const [menuOpen, setMenuOpen] = useState(false);
+    const { model, chatModel, chatCommandRegistry, edit } = props;
+    // Don't show this button when in edit mode
+    if (edit) {
+        return React.createElement(React.Fragment, null);
+    }
     const [disabled, setDisabled] = useState(false);
     const [tooltip, setTooltip] = useState('');
-    const openMenu = useCallback((el) => {
-        setMenuAnchorEl(el);
-        setMenuOpen(true);
-    }, []);
-    const closeMenu = useCallback(() => {
-        setMenuOpen(false);
-    }, []);
-    const [selectionTooltip, setSelectionTooltip] = useState('');
-    const [disableInclude, setDisableInclude] = useState(true);
     useEffect(() => {
         var _a;
         const inputChanged = () => {
@@ -54,110 +40,37 @@ export function SendButton(props) {
             (_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.
-         */
-        const toggleIncludeState = () => {
-            setDisableInclude(!((selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) || (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available)));
-            const tooltip = (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection)
-                ? `${selectionWatcher.selection.numLines} line(s) selected`
-                : (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available)
-                    ? 'Code from 1 active cell'
-                    : 'No selection or active cell';
-            setSelectionTooltip(tooltip);
-        };
-        if (!hideIncludeSelection) {
-            selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.connect(toggleIncludeState);
-            activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.connect(toggleIncludeState);
-            toggleIncludeState();
-        }
-        return () => {
-            selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.disconnect(toggleIncludeState);
-            activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.disconnect(toggleIncludeState);
-        };
-    }, [activeCellManager, selectionWatcher]);
     async function send() {
+        // Run all command providers
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-        model.send(model.value);
-    }
-    async function sendWithSelection() {
-        let source = '';
-        // Run all chat command providers
-        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
-        let language;
-        if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
-            // Append the selected text if exists.
-            source = selectionWatcher.selection.text;
-            language = selectionWatcher.selection.language;
-        }
-        else if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
-            // Append the active cell content if exists.
-            const content = activeCellManager.getContent(false);
-            source = content.source;
-            language = content === null || content === void 0 ? void 0 : content.language;
-        }
-        let content = model.value;
-        if (source) {
-            content += `
-
-\`\`\`${language !== null && language !== void 0 ? language : ''}
-${source}
-\`\`\`
-`;
-        }
-        model.send(content);
-        closeMenu();
+        // send message through chat model
+        await (chatModel === null || chatModel === void 0 ? void 0 : chatModel.sendMessage({
+            body: model.value
+        }));
+        // clear input model value & re-focus
         model.value = '';
+        model.focus();
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TooltippedButton, { onClick: send, disabled: disabled, tooltip: tooltip, buttonProps: {
-                size: 'small',
-                title: tooltip,
-                variant: 'contained',
-                className: SEND_BUTTON_CLASS
-            } },
-            React.createElement(SendIcon, null)),
-        !hideIncludeSelection && (React.createElement(React.Fragment, null,
-            React.createElement(TooltippedButton, { onClick: e => {
-                    openMenu(e.currentTarget);
-                }, disabled: disabled, tooltip: "", buttonProps: {
-                    variant: 'contained',
-                    onKeyDown: e => {
-                        if (e.key !== 'Enter' && e.key !== ' ') {
-                            return;
-                        }
-                        openMenu(e.currentTarget);
-                        // stopping propagation of this event prevents the prompt from being
-                        // sent when the dropdown button is selected and clicked via 'Enter'.
-                        e.stopPropagation();
-                    },
-                    className: SEND_INCLUDE_OPENER_CLASS
-                } },
-                React.createElement(KeyboardArrowDown, null)),
-            React.createElement(Menu, { open: menuOpen, onClose: closeMenu, anchorEl: menuAnchorEl, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                }, sx: {
-                    '& .MuiMenuItem-root': {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '8px'
+    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
+        React.createElement("span", null,
+            React.createElement(Button, { onClick: send, disabled: disabled, size: "small", variant: "contained", className: SEND_BUTTON_CLASS, "aria-label": tooltip, sx: {
+                    backgroundColor: 'var(--jp-brand-color1)',
+                    color: 'white',
+                    minWidth: '24px',
+                    width: '24px',
+                    height: '24px',
+                    borderRadius: '4px',
+                    boxShadow: 'none',
+                    lineHeight: 0,
+                    '&:hover': {
+                        backgroundColor: 'var(--jp-brand-color0)',
+                        boxShadow: 'none'
                     },
-                    '& svg': {
-                        lineHeight: 0
+                    '&.Mui-disabled': {
+                        backgroundColor: 'var(--jp-border-color2)',
+                        color: 'var(--jp-ui-font-color3)',
+                        opacity: 0.5
                     }
                 } },
-                React.createElement(MenuItem, { onClick: e => {
-                        sendWithSelection();
-                        // prevent sending second message with no selection
-                        e.stopPropagation();
-                    }, disabled: disableInclude, className: SEND_INCLUDE_LI_CLASS },
-                    React.createElement(includeSelectionIcon.react, null),
-                    React.createElement(Box, null,
-                        React.createElement(Typography, { display: "block" }, "Send message with selection"),
-                        React.createElement(Typography, { display: "block", sx: { opacity: 0.618 } }, selectionTooltip))))))));
+                React.createElement(ArrowUpwardIcon, { sx: { fontSize: '16px' } })))));
 }

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

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

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

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import StopIcon from '@mui/icons-material/Stop';
+import { Button, Tooltip } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+const STOP_BUTTON_CLASS = 'jp-chat-stop-button';
+/**
+ * The stop button.
+ */
+export function StopButton(props) {
+    const { chatModel } = props;
+    const [disabled, setDisabled] = useState(true);
+    const tooltip = 'Stop generating';
+    useEffect(() => {
+        var _a;
+        if (!chatModel) {
+            setDisabled(true);
+            return;
+        }
+        const checkWriters = () => {
+            // Check if there's at least one AI agent writer (bot)
+            const hasAIWriter = chatModel.writers.some(writer => writer.user.bot);
+            setDisabled(!hasAIWriter);
+        };
+        // Check initially
+        checkWriters();
+        // Listen to writers changes
+        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(checkWriters);
+        return () => {
+            var _a;
+            (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(checkWriters);
+        };
+    }, [chatModel]);
+    function stop() {
+        // TODO: Implement stop functionality
+        // This will need to be implemented based on how the chat model handles stopping AI responses
+        console.log('Stop button clicked');
+    }
+    return (React.createElement(Tooltip, { title: tooltip, placement: "top", arrow: true },
+        React.createElement("span", null,
+            React.createElement(Button, { onClick: stop, disabled: disabled, size: "small", variant: "contained", className: STOP_BUTTON_CLASS, "aria-label": tooltip, sx: {
+                    backgroundColor: 'var(--jp-error-color1)',
+                    color: 'white',
+                    minWidth: '24px',
+                    width: '24px',
+                    height: '24px',
+                    borderRadius: '4px',
+                    boxShadow: 'none',
+                    lineHeight: 0,
+                    '&:hover': {
+                        backgroundColor: 'var(--jp-error-color0)',
+                        boxShadow: 'none'
+                    },
+                    '&.Mui-disabled': {
+                        backgroundColor: 'var(--jp-border-color2)',
+                        color: 'var(--jp-ui-font-color3)',
+                        opacity: 0.5
+                    }
+                } },
+                React.createElement(StopIcon, { sx: { fontSize: '16px' } })))));
+}