@jupyter/chat 0.4.0 → 0.5.0

package/lib/active-cell-manager.d.ts

@@ -15,6 +15,9 @@ type CellWithErrorContent = {
         traceback: string[];
     };
 };
+/**
+ * The active cell interface.
+ */
 export interface IActiveCellManager {
     /**
      * Whether the notebook is available and an active cell exists.

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

@@ -27,6 +27,10 @@ export declare namespace ChatInput {
          * The function to be called to cancel editing.
          */
         onCancel?: () => unknown;
+        /**
+         * Whether to allow or not including selection.
+         */
+        hideIncludeSelection?: boolean;
         /**
          * Custom mui/material styles.
          */

package/lib/components/chat-input.js

@@ -3,25 +3,32 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import React, { useEffect, useRef, useState } from 'react';
-import { Autocomplete, Box, IconButton, InputAdornment, TextField } from '@mui/material';
-import { Send, Cancel } from '@mui/icons-material';
+import { Autocomplete, Box, InputAdornment, TextField } from '@mui/material';
 import clsx from 'clsx';
+import { CancelButton } from './input/cancel-button';
+import { SendButton } from './input/send-button';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
-const SEND_BUTTON_CLASS = 'jp-chat-send-button';
-const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 export function ChatInput(props) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { autocompletionName, autocompletionRegistry, model } = props;
     const autocompletion = useRef();
     const [input, setInput] = useState(props.value || '');
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+    const [typingNotification, setTypingNotification] = useState((_b = model.config.sendTypingNotification) !== null && _b !== void 0 ? _b : false);
+    // 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 = (_c = props.hideIncludeSelection) !== null && _c !== void 0 ? _c : false;
+    if (model.activeCellManager === null && model.selectionWatcher === null) {
+        hideIncludeSelection = true;
+    }
     // store reference to the input element to enable focusing it easily
     const inputRef = useRef();
     useEffect(() => {
         var _a;
         const configChanged = (_, config) => {
-            var _a;
+            var _a, _b;
             setSendWithShiftEnter((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+            setTypingNotification((_b = config.sendTypingNotification) !== null && _b !== void 0 ? _b : false);
         };
         model.configChanged.connect(configChanged);
         const focusInputElement = () => {
@@ -104,10 +111,21 @@ export function ChatInput(props) {
     }
     /**
      * Triggered when sending the message.
+     *
+     * Add code block if cell or text is selected.
      */
-    function onSend() {
+    function onSend(selection) {
+        let content = input;
+        if (selection) {
+            content += `
+
+\`\`\`
+${selection.source}
+\`\`\`
+`;
+        }
+        props.onSend(content);
         setInput('');
-        props.onSend(input);
     }
     /**
      * Triggered when cancelling edition.
@@ -149,16 +167,15 @@ export function ChatInput(props) {
             }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, InputProps: {
                     ...params.InputProps,
                     endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        props.onCancel && (React.createElement(IconButton, { size: "small", color: "primary", onClick: onCancel, title: 'Cancel edition', className: clsx(CANCEL_BUTTON_CLASS) },
-                            React.createElement(Cancel, null))),
-                        React.createElement(IconButton, { size: "small", color: "primary", onClick: onSend, disabled: props.onCancel
-                                ? input === props.value
-                                : !input.trim().length, title: `Send message ${sendWithShiftEnter ? '(SHIFT+ENTER)' : '(ENTER)'}`, className: clsx(SEND_BUTTON_CLASS) },
-                            React.createElement(Send, null))))
+                        props.onCancel && (React.createElement(CancelButton, { inputExists: input.length > 0, onCancel: onCancel })),
+                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: input.length > 0, onSend: onSend, hideIncludeSelection: hideIncludeSelection, hasButtonOnLeft: !!props.onCancel })))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
-                }, helperText: input.length > 2 ? helperText : ' ' })), ...(_b = autocompletion.current) === null || _b === void 0 ? void 0 : _b.props, inputValue: input, onInputChange: (_, newValue) => {
+                }, helperText: input.length > 2 ? helperText : ' ' })), ...(_d = autocompletion.current) === null || _d === void 0 ? void 0 : _d.props, inputValue: input, onInputChange: (_, newValue) => {
                 setInput(newValue);
+                if (typingNotification && model.inputChanged) {
+                    model.inputChanged(newValue);
+                }
             }, onHighlightChange: 
             /**
              * On highlight change: set `highlighted` to whether an option is

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

@@ -2,7 +2,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
+import { IChatMessage, IUser } from '../types';
 /**
  * The base components props.
  */
@@ -46,6 +46,19 @@ type ChatMessageProps = BaseMessageProps & {
  * The message component body.
  */
 export declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+/**
+ * The writers component props.
+ */
+type writersProps = {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IUser[];
+};
+/**
+ * The writers component, displaying the current writers.
+ */
+export declare function Writers(props: writersProps): JSX.Element | null;
 /**
  * The navigation component props.
  */
@@ -59,4 +72,21 @@ type NavigationProps = BaseMessageProps & {
  * The navigation component, to navigate to unread messages.
  */
 export declare function Navigation(props: NavigationProps): JSX.Element;
+/**
+ * The avatar props.
+ */
+type AvatarProps = {
+    /**
+     * The user to display an avatar.
+     */
+    user: IUser;
+    /**
+     * Whether the avatar should be small.
+     */
+    small?: boolean;
+};
+/**
+ * the avatar component.
+ */
+export declare function Avatar(props: AvatarProps): JSX.Element | null;
 export {};

package/lib/components/chat-messages.js

@@ -4,7 +4,7 @@
  */
 import { Button } from '@jupyter/react-components';
 import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
-import { Avatar, Box, Typography } from '@mui/material';
+import { Avatar as MuiAvatar, Box, Typography } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef } from 'react';
 import { ChatInput } from './chat-input';
@@ -15,6 +15,7 @@ const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
 const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+const WRITERS_CLASS = 'jp-chat-writers';
 const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
 const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
 const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
@@ -27,6 +28,7 @@ export function ChatMessages(props) {
     const [messages, setMessages] = useState(model.messages);
     const refMsgBox = useRef(null);
     const inViewport = useRef([]);
+    const [currentWriters, setCurrentWriters] = useState([]);
     // The intersection observer that listen to all the message visibility.
     const observerRef = useRef(new IntersectionObserver(viewportChange));
     /**
@@ -43,17 +45,25 @@ export function ChatMessages(props) {
                 .catch(e => console.error(e));
         }
         fetchHistory();
+        setCurrentWriters([]);
     }, [model]);
     /**
      * Effect: listen to chat messages.
      */
     useEffect(() => {
+        var _a;
         function handleChatEvents() {
             setMessages([...model.messages]);
         }
+        function handleWritersChange(_, writers) {
+            setCurrentWriters(writers);
+        }
         model.messagesUpdated.connect(handleChatEvents);
+        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(handleWritersChange);
         return function cleanup() {
+            var _a;
             model.messagesUpdated.disconnect(handleChatEvents);
+            (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(handleChatEvents);
         };
     }, [model]);
     /**
@@ -99,7 +109,8 @@ export function ChatMessages(props) {
                 React.createElement(Box, { key: i, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message }),
                     React.createElement(ChatMessage, { ...props, message: message, observer: observerRef.current, index: i })));
-            }))),
+            })),
+            React.createElement(Writers, { writers: currentWriters })),
         React.createElement(Navigation, { ...props, refMsgBox: refMsgBox })));
 }
 /**
@@ -108,10 +119,6 @@ export function ChatMessages(props) {
 export function ChatMessageHeader(props) {
     var _a, _b;
     const [datetime, setDatetime] = useState({});
-    const sharedStyles = {
-        height: '24px',
-        width: '24px'
-    };
     const message = props.message;
     const sender = message.sender;
     /**
@@ -148,18 +155,7 @@ export function ChatMessageHeader(props) {
             setDatetime(newDatetime);
         }
     });
-    const bgcolor = sender.color;
-    const avatar = message.stacked ? null : sender.avatar_url ? (React.createElement(Avatar, { sx: {
-            ...sharedStyles,
-            ...(bgcolor && { bgcolor })
-        }, src: sender.avatar_url })) : sender.initials ? (React.createElement(Avatar, { sx: {
-            ...sharedStyles,
-            ...(bgcolor && { bgcolor })
-        } },
-        React.createElement(Typography, { sx: {
-                fontSize: 'var(--jp-ui-font-size1)',
-                color: 'var(--jp-ui-inverse-font-color1)'
-            } }, sender.initials))) : null;
+    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: {
             display: 'flex',
@@ -257,7 +253,26 @@ export function ChatMessage(props) {
         model.deleteMessage(id);
     };
     // Empty if the message has been deleted.
-    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model, hideIncludeSelection: true })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
+}
+/**
+ * The writers component, displaying the current writers.
+ */
+export function Writers(props) {
+    const { writers } = props;
+    return writers.length > 0 ? (React.createElement(Box, { className: WRITERS_CLASS },
+        writers.map((writer, index) => {
+            var _a, _b;
+            return (React.createElement("div", null,
+                React.createElement(Avatar, { user: writer, small: true }),
+                React.createElement("span", null, (_b = (_a = writer.display_name) !== null && _a !== void 0 ? _a : writer.name) !== null && _b !== void 0 ? _b : (writer.username || 'User undefined')),
+                React.createElement("span", null, index < writers.length - 1
+                    ? index < writers.length - 2
+                        ? ', '
+                        : ' and '
+                    : '')));
+        }),
+        React.createElement("span", null, (writers.length > 1 ? ' are' : ' is') + ' writing'))) : null;
 }
 /**
  * The navigation component, to navigate to unread messages.
@@ -342,3 +357,24 @@ export function Navigation(props) {
                 : 'Go to last message' },
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));
 }
+/**
+ * the avatar component.
+ */
+export function Avatar(props) {
+    const { user } = props;
+    const sharedStyles = {
+        height: `${props.small ? '16' : '24'}px`,
+        width: `${props.small ? '16' : '24'}px`,
+        bgcolor: user.color,
+        fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
+    };
+    return user.avatar_url ? (React.createElement(MuiAvatar, { sx: {
+            ...sharedStyles
+        }, src: user.avatar_url })) : user.initials ? (React.createElement(MuiAvatar, { sx: {
+            ...sharedStyles
+        } },
+        React.createElement(Typography, { sx: {
+                fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`,
+                color: 'var(--jp-ui-inverse-font-color1)'
+            } }, user.initials))) : null;
+}

package/lib/components/chat.js

@@ -16,7 +16,7 @@ export function ChatBody(props) {
     // handled by the listeners registered in the effect hooks above.
     const onSend = async (input) => {
         // send message to backend
-        model.addMessage({ body: input });
+        model.sendMessage({ body: input });
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(ChatMessages, { rmRegistry: renderMimeRegistry, model: model }),

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

@@ -11,27 +11,41 @@ import { replaceCellIcon } from '../../icons';
 const CODE_TOOLBAR_CLASS = 'jp-chat-code-toolbar';
 const CODE_TOOLBAR_ITEM_CLASS = 'jp-chat-code-toolbar-item';
 export function CodeToolbar(props) {
-    var _a, _b;
+    var _a;
     const { content, model } = props;
     const [toolbarEnable, setToolbarEnable] = useState((_a = model.config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
     const activeCellManager = model.activeCellManager;
+    const selectionWatcher = model.selectionWatcher;
     const [toolbarBtnProps, setToolbarBtnProps] = useState({
-        content: content,
-        activeCellManager: activeCellManager,
-        activeCellAvailable: (_b = activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) !== null && _b !== void 0 ? _b : false
+        content,
+        activeCellManager,
+        selectionWatcher,
+        activeCellAvailable: !!(activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available),
+        selectionExists: !!(selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection)
     });
     useEffect(() => {
-        activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.connect(() => {
+        const toggleToolbar = () => {
+            var _a;
+            setToolbarEnable((_a = model.config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
+        };
+        const selectionStatusChange = () => {
             setToolbarBtnProps({
                 content,
-                activeCellManager: activeCellManager,
-                activeCellAvailable: activeCellManager.available
+                activeCellManager,
+                selectionWatcher,
+                activeCellAvailable: !!(activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available),
+                selectionExists: !!(selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection)
             });
-        });
-        model.configChanged.connect((_, config) => {
-            var _a;
-            setToolbarEnable((_a = config.enableCodeToolbar) !== null && _a !== void 0 ? _a : true);
-        });
+        };
+        activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.connect(selectionStatusChange);
+        selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.connect(selectionStatusChange);
+        model.configChanged.connect(toggleToolbar);
+        selectionStatusChange();
+        return () => {
+            activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.disconnect(selectionStatusChange);
+            selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selectionChanged.disconnect(selectionStatusChange);
+            model.configChanged.disconnect(toggleToolbar);
+        };
     }, [model]);
     return activeCellManager === null || !toolbarEnable ? (React.createElement(React.Fragment, null)) : (React.createElement(Box, { sx: {
             display: 'flex',
@@ -62,9 +76,29 @@ function InsertBelowButton(props) {
         React.createElement(addBelowIcon.react, { height: "16px", width: "16px" })));
 }
 function ReplaceButton(props) {
-    const tooltip = props.activeCellAvailable
-        ? 'Replace active cell'
-        : 'Replace 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.replace(props.content); } },
+    var _a, _b;
+    const tooltip = props.selectionExists
+        ? `Replace selection (${(_b = (_a = props.selectionWatcher) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.numLines} line(s))`
+        : props.activeCellAvailable
+            ? 'Replace selection (active cell)'
+            : 'Replace selection (no selection)';
+    const disabled = !props.activeCellAvailable && !props.selectionExists;
+    const replace = () => {
+        var _a, _b, _c;
+        if (props.selectionExists) {
+            const selection = (_a = props.selectionWatcher) === null || _a === void 0 ? void 0 : _a.selection;
+            if (!selection) {
+                return;
+            }
+            (_b = props.selectionWatcher) === null || _b === void 0 ? void 0 : _b.replaceSelection({
+                ...selection,
+                text: props.content
+            });
+        }
+        else if (props.activeCellAvailable) {
+            (_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" })));
 }

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * The cancel button props.
+ */
+export type CancelButtonProps = {
+    inputExists: boolean;
+    onCancel: () => void;
+};
+/**
+ * The cancel button.
+ */
+export declare function CancelButton(props: CancelButtonProps): JSX.Element;

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import CancelIcon from '@mui/icons-material/Cancel';
+import React from 'react';
+import { TooltippedButton } from '../mui-extras/tooltipped-button';
+const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
+/**
+ * The cancel button.
+ */
+export function CancelButton(props) {
+    const tooltip = 'Cancel edition';
+    const disabled = !props.inputExists;
+    return (React.createElement(TooltippedButton, { onClick: props.onCancel, disabled: disabled, 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/send-button.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { IChatModel } from '../../model';
+import { Selection } from '../../types';
+/**
+ * The send button props.
+ */
+export type SendButtonProps = {
+    model: IChatModel;
+    sendWithShiftEnter: boolean;
+    inputExists: boolean;
+    onSend: (selection?: Selection) => unknown;
+    hideIncludeSelection?: boolean;
+    hasButtonOnLeft?: boolean;
+};
+/**
+ * The send button, with optional 'include selection' menu.
+ */
+export declare function SendButton(props: SendButtonProps): JSX.Element;

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

@@ -0,0 +1,143 @@
+/*
+ * 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';
+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.
+ */
+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 [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const openMenu = useCallback((el) => {
+        setMenuAnchorEl(el);
+        setMenuOpen(true);
+    }, []);
+    const closeMenu = useCallback(() => {
+        setMenuOpen(false);
+    }, []);
+    const disabled = !props.inputExists;
+    const [selectionTooltip, setSelectionTooltip] = useState('');
+    const [disableInclude, setDisableInclude] = useState(true);
+    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, hideIncludeSelection]);
+    const defaultTooltip = props.sendWithShiftEnter
+        ? 'Send message (SHIFT+ENTER)'
+        : 'Send message (ENTER)';
+    const tooltip = defaultTooltip;
+    function sendWithSelection() {
+        // Append the selected text if exists.
+        if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
+            props.onSend({
+                type: 'text',
+                source: selectionWatcher.selection.text
+            });
+            closeMenu();
+            return;
+        }
+        // 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;
+        }
+    }
+    return (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'nowrap' } },
+        React.createElement(TooltippedButton, { onClick: () => props.onSend(), disabled: disabled, tooltip: tooltip, buttonProps: {
+                size: 'small',
+                title: defaultTooltip,
+                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,
+            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
+                }, 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: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, sx: {
+                    '& .MuiMenuItem-root': {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px'
+                    },
+                    '& svg': {
+                        lineHeight: 0
+                    }
+                } },
+                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))))))));
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ButtonProps, SxProps, TooltipProps } from '@mui/material';
+export type TooltippedButtonProps = {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    tooltip: string;
+    children: JSX.Element;
+    disabled?: boolean;
+    placement?: TooltipProps['placement'];
+    /**
+     * 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;
+    /**
+     * Props passed directly to the MUI `Button` component.
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * Styles applied to the MUI `Button` component.
+     */
+    sx?: SxProps;
+};
+/**
+ * A component that renders an MUI `Button` with a high-contrast tooltip
+ * provided by `ContrastingTooltip`. This component differs from the MUI
+ * defaults in the following ways:
+ *
+ * - Shows the tooltip on hover even if disabled.
+ * - Renders the tooltip above the button by default.
+ * - Renders the tooltip closer to the button by default.
+ * - Lowers the opacity of the Button when disabled.
+ * - Renders the Button with `line-height: 0` to avoid showing extra
+ * vertical space in SVG icons.
+ *
+ * NOTE TO DEVS: Please keep this component's features synchronized with
+ * features available to `TooltippedIconButton`.
+ */
+export declare function TooltippedButton(props: TooltippedButtonProps): JSX.Element;