@jupyter/chat 0.21.1 → 0.22.0

package/lib/__tests__/chat-body-placeholder.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/chat-body-placeholder.spec.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { RenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ChatWidget } from '../widgets/chat-widget';
+import { MockChatModel } from './mocks';
+describe('ChatBodyPlaceholder', () => {
+    let model;
+    let rmRegistry;
+    beforeEach(() => {
+        model = new MockChatModel();
+        rmRegistry = new RenderMimeRegistry();
+    });
+    it('should create a widget without chatBodyPlaceholderFactory', () => {
+        const widget = new ChatWidget({ model, rmRegistry });
+        expect(widget).toBeInstanceOf(ChatWidget);
+        widget.dispose();
+    });
+    it('should create a widget with chatBodyPlaceholderFactory', () => {
+        const factory = {
+            create: jest.fn().mockReturnValue(null)
+        };
+        const widget = new ChatWidget({
+            model,
+            rmRegistry,
+            chatBodyPlaceholderFactory: factory
+        });
+        expect(widget).toBeInstanceOf(ChatWidget);
+        widget.dispose();
+    });
+    it('should call sendMessage when factory onSend is invoked', () => {
+        const factory = {
+            create: jest.fn().mockReturnValue(null)
+        };
+        const sendSpy = jest.spyOn(model, 'sendMessage');
+        // Simulate what ChatBodyPlaceholder component does:
+        factory.create({ onSend: (body) => model.sendMessage({ body }) });
+        // Invoke the onSend passed to factory
+        const props = factory.create.mock
+            .calls[0][0];
+        props.onSend('Hello world');
+        expect(sendSpy).toHaveBeenCalledWith({ body: 'Hello world' });
+    });
+    it('should not fail when factory returns null', () => {
+        const factory = {
+            create: jest.fn().mockReturnValue(null)
+        };
+        const result = factory.create({
+            onSend: (body) => model.sendMessage({ body })
+        });
+        expect(result).toBeNull();
+    });
+});

package/lib/__tests__/multichat-panel.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/multichat-panel.spec.js

@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { RenderMimeRegistry } from '@jupyterlab/rendermime';
+import { Widget } from '@lumino/widgets';
+import { MultiChatPanel } from '../widgets/multichat-panel';
+import { defaultPlaceholder } from '../widgets/placeholder';
+describe('MultiChatPanel', () => {
+    let rmRegistry;
+    beforeEach(() => {
+        rmRegistry = new RenderMimeRegistry();
+    });
+    describe('placeholderFactory', () => {
+        it('should use defaultPlaceholder when no factory is provided', () => {
+            const panel = new MultiChatPanel({ rmRegistry });
+            const placeholder = Array.from(panel.widgets).find(w => w instanceof defaultPlaceholder);
+            expect(placeholder).toBeInstanceOf(defaultPlaceholder);
+            panel.dispose();
+        });
+        it('should call factory.create when a factory is provided', () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory
+            });
+            expect(factory.create).toHaveBeenCalledTimes(1);
+            panel.dispose();
+        });
+        it('should add the widget returned by the factory to the panel', () => {
+            const customWidget = new Widget();
+            const factory = {
+                create: jest.fn().mockReturnValue(customWidget)
+            };
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory
+            });
+            expect(Array.from(panel.widgets)).toContain(customWidget);
+            panel.dispose();
+        });
+        it('should not use defaultPlaceholder when a factory is provided', () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory
+            });
+            const placeholder = Array.from(panel.widgets).find(w => w instanceof defaultPlaceholder);
+            expect(placeholder).toBeUndefined();
+            panel.dispose();
+        });
+        it('should pass empty chatNames in props when no chats are loaded', () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory
+            });
+            const props = factory.create.mock
+                .calls[0][0];
+            expect(props.chatNames).toEqual({});
+            panel.dispose();
+        });
+        it('should pass undefined onCreate when createModel is not provided', () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory
+            });
+            const props = factory.create.mock
+                .calls[0][0];
+            expect(props.onCreate).toBeUndefined();
+            panel.dispose();
+        });
+        it('should pass onCreate when createModel is provided', () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const createModel = jest.fn().mockResolvedValue({});
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory,
+                createModel
+            });
+            const props = factory.create.mock
+                .calls[0][0];
+            expect(props.onCreate).toBeDefined();
+            panel.dispose();
+        });
+        it('should call factory.create again when the placeholder is re-added after closing a chat', async () => {
+            const factory = {
+                create: jest.fn().mockReturnValue(new Widget())
+            };
+            const createModel = jest.fn().mockResolvedValue({});
+            const panel = new MultiChatPanel({
+                rmRegistry,
+                placeholderFactory: factory,
+                createModel
+            });
+            // Simulate opening and closing a chat to trigger _addPlaceholder again.
+            const { MockChatModel } = await import('./mocks');
+            const model = new MockChatModel();
+            panel.open({ model, displayName: 'test-chat' });
+            panel.disposeLoadedModel('test-chat');
+            expect(factory.create).toHaveBeenCalledTimes(2);
+            panel.dispose();
+        });
+    });
+});

package/lib/components/chat.d.ts

@@ -6,6 +6,7 @@ import { IInputToolbarRegistry } from './input';
 import { IChatModel } from '../model';
 import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry, IMessagePreambleRegistry } from '../registers';
 import { ChatArea } from '../types';
+import { IChatBodyPlaceholderFactory } from '../tokens';
 export declare function ChatBody(props: Chat.IChatProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
@@ -48,6 +49,11 @@ export declare namespace Chat {
          * The welcome message.
          */
         welcomeMessage?: string;
+        /**
+         * Optional factory to create chat body placeholder shown when the chat has
+         * no messages.
+         */
+        chatBodyPlaceholderFactory?: IChatBodyPlaceholderFactory;
         /**
          * The area where the chat is displayed.
          */

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

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

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

@@ -3,22 +3,42 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import React, { useEffect, useState } from 'react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { Box, Menu, MenuItem, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
+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.
+ * The send button, with optional 'include selection' menu.
  */
 export function SendButton(props) {
+    var _a;
     const { model, chatCommandRegistry, edit } = props;
+    const { activeCellManager, selectionWatcher } = model;
+    const supportSelection = !!activeCellManager || !!selectionWatcher;
     const trans = useTranslator();
     // Don't show this button when in edit mode
     if (edit) {
         return React.createElement(React.Fragment, null);
     }
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
     const [disabled, setDisabled] = useState(false);
     const [tooltip, setTooltip] = useState('');
+    const [selectionTooltip, setSelectionTooltip] = useState('');
+    const [disableInclude, setDisableInclude] = useState(true);
+    const [showSendWithSelection, setShowSendWithSelection] = useState(supportSelection && ((_a = model.config.sendWithSelection) !== null && _a !== void 0 ? _a : true));
+    const openMenu = useCallback((el) => {
+        setMenuAnchorEl(el);
+        setMenuOpen(true);
+    }, []);
+    const closeMenu = useCallback(() => {
+        setMenuOpen(false);
+    }, []);
     useEffect(() => {
         var _a;
         const inputChanged = () => {
@@ -29,10 +49,11 @@ export function SendButton(props) {
         (_a = model.attachmentsChanged) === null || _a === void 0 ? void 0 : _a.connect(inputChanged);
         inputChanged();
         const configChanged = (_, config) => {
-            var _a;
+            var _a, _b;
             setTooltip(((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false)
                 ? trans.__('Send message (SHIFT+ENTER)')
                 : trans.__('Send message (ENTER)'));
+            setShowSendWithSelection(supportSelection && ((_b = config.sendWithSelection) !== null && _b !== void 0 ? _b : true));
         };
         model.configChanged.connect(configChanged);
         // Initialize the tooltip.
@@ -44,6 +65,26 @@ export function SendButton(props) {
             (_b = model.configChanged) === null || _b === void 0 ? void 0 : _b.disconnect(configChanged);
         };
     }, [model]);
+    useEffect(() => {
+        const toggleIncludeState = () => {
+            setDisableInclude(!((selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) || (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available)));
+            const tip = (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection)
+                ? trans.__('%1 line(s) selected', selectionWatcher.selection.numLines)
+                : (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available)
+                    ? trans.__('Code from 1 active cell')
+                    : trans.__('No selection or active cell');
+            setSelectionTooltip(tip);
+        };
+        if (showSendWithSelection) {
+            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, showSendWithSelection]);
     async function send() {
         // Run all command providers
         await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
@@ -52,9 +93,68 @@ export function SendButton(props) {
         model.send(body);
         model.focus();
     }
-    return (React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, buttonProps: {
-            title: tooltip,
-            className: SEND_BUTTON_CLASS
-        }, "aria-label": tooltip },
-        React.createElement(ArrowUpwardIcon, null)));
+    async function sendWithSelection() {
+        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
+        let source = '';
+        let language;
+        if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
+            source = selectionWatcher.selection.text;
+            language = selectionWatcher.selection.language;
+        }
+        else if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
+            const content = activeCellManager.getContent(false);
+            source = content.source;
+            language = content === null || content === void 0 ? void 0 : content.language;
+        }
+        let body = model.value;
+        if (source) {
+            body += `\n\n\`\`\`${language !== null && language !== void 0 ? language : ''}\n${source}\n\`\`\`\n`;
+        }
+        model.value = '';
+        closeMenu();
+        model.send(body);
+        model.focus();
+    }
+    return (React.createElement(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: '1px' } },
+        React.createElement(TooltippedIconButton, { onClick: send, tooltip: tooltip, disabled: disabled, sx: {
+                borderRadius: showSendWithSelection
+                    ? 'var(--jp-border-radius) 0 0 var(--jp-border-radius) !important'
+                    : 'var(--jp-border-radius)'
+            }, buttonProps: {
+                title: tooltip,
+                className: SEND_BUTTON_CLASS
+            }, "aria-label": tooltip },
+            React.createElement(ArrowUpwardIcon, null)),
+        showSendWithSelection && (React.createElement(React.Fragment, null,
+            React.createElement(TooltippedIconButton, { onClick: e => openMenu(e.currentTarget), tooltip: trans.__('Send with selection'), disabled: disabled, sx: {
+                    borderRadius: '0 var(--jp-border-radius) var(--jp-border-radius) 0 !important',
+                    width: '16px',
+                    minWidth: '16px'
+                }, buttonProps: {
+                    onKeyDown: e => {
+                        if (e.key !== 'Enter' && e.key !== ' ') {
+                            return;
+                        }
+                        openMenu(e.currentTarget);
+                        e.stopPropagation();
+                    },
+                    className: SEND_INCLUDE_OPENER_CLASS
+                } },
+                React.createElement(KeyboardArrowDownIcon, { sx: { fontSize: '12px' } })),
+            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();
+                        e.stopPropagation();
+                    }, disabled: disableInclude, className: SEND_INCLUDE_LI_CLASS },
+                    React.createElement(includeSelectionIcon.react, null),
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { display: "block" }, trans.__('Send message with selection')),
+                        React.createElement(Typography, { display: "block", sx: { opacity: 0.618 } }, selectionTooltip))))))));
 }

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

@@ -120,15 +120,16 @@ export function ChatInput(props) {
          * called with an invalid `string` instead of a `ChatCommand`.
          */
         event.stopPropagation();
+        const isSendCombination = (sendWithShiftEnter && event.shiftKey) ||
+            (!sendWithShiftEnter && !event.shiftKey);
         // Do not send empty messages, and avoid adding new line in empty message.
-        if (!inputExists) {
+        if (!inputExists && (!isSendCombination || attachments.length === 0)) {
             event.stopPropagation();
             event.preventDefault();
             return;
         }
         // Finally, send the message when all other conditions are met.
-        if ((sendWithShiftEnter && event.shiftKey) ||
-            (!sendWithShiftEnter && !event.shiftKey)) {
+        if (isSendCombination) {
             // Run all command providers
             await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
             model.send(model.value);

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * Component that renders chat body placeholder using the factory from context.
+ * Renders nothing if no factory is provided.
+ */
+export declare function ChatBodyPlaceholder(): JSX.Element | null;

package/lib/components/messages/chat-body-placeholder.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useChatContext } from '../../context';
+/**
+ * Component that renders chat body placeholder using the factory from context.
+ * Renders nothing if no factory is provided.
+ */
+export function ChatBodyPlaceholder() {
+    const { model, chatBodyPlaceholderFactory } = useChatContext();
+    if (!chatBodyPlaceholderFactory) {
+        return null;
+    }
+    const onSend = (body) => {
+        model.sendMessage({ body });
+    };
+    return chatBodyPlaceholderFactory.create({ onSend });
+}

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

@@ -7,3 +7,4 @@ export * from './navigation';
 export * from './preamble';
 export * from './toolbar';
 export * from './welcome';
+export * from './chat-body-placeholder';

package/lib/components/messages/index.js

@@ -11,3 +11,4 @@ export * from './navigation';
 export * from './preamble';
 export * from './toolbar';
 export * from './welcome';
+export * from './chat-body-placeholder';

package/lib/components/messages/messages.js

@@ -12,6 +12,7 @@ import { ChatMessage } from './message';
 import { MessagePreambleComponent } from './preamble';
 import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
+import { ChatBodyPlaceholder } from './chat-body-placeholder';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
 import { Message } from '../../message';
@@ -46,11 +47,24 @@ export function ChatMessages() {
         }
         fetchHistory();
     }, [model]);
+    const scrollContainerRef = useRef(null);
+    // Starts true so the chat scrolls to bottom on first render.
+    const shouldScrollRef = useRef(true);
     /**
-     * Effect: listen to chat messages.
+     * Effect: listen to chat messages and decide whether to auto-scroll.
+     *
+     * We check `prevLastIdx` (length - 2) because by the time the signal fires,
+     * model.messages already contains the new message. So length - 2 is the
+     * message that WAS last before the new one arrived. If that was visible,
+     * the user was at the bottom and we should follow.
      */
     useEffect(() => {
         function handleChatEvents() {
+            var _a;
+            const viewport = (_a = model.messagesInViewport) !== null && _a !== void 0 ? _a : [];
+            const prevLastIdx = model.messages.length - 2;
+            shouldScrollRef.current =
+                prevLastIdx < 0 || viewport.includes(prevLastIdx);
             setMessages([...model.messages]);
         }
         model.messagesUpdated.connect(handleChatEvents);
@@ -58,6 +72,43 @@ export function ChatMessages() {
             model.messagesUpdated.disconnect(handleChatEvents);
         };
     }, [model]);
+    /**
+     * Effect: observe DOM mutations in the scroll container to keep the viewport
+     * pinned to the bottom as message content renders asynchronously.
+     *
+     * A single scrollTop assignment on state change isn't enough because message
+     * content (markdown, code blocks, images) renders after the initial DOM
+     * commit. The MutationObserver fires on every subtree change, keeping us
+     * pinned as content streams in or expands.
+     *
+     * The scroll listener lets a user manually scroll to the bottom during
+     * streaming to re-engage auto-scroll, or scroll up to disengage it.
+     */
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el) {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (shouldScrollRef.current) {
+                el.scrollTop = el.scrollHeight;
+            }
+        });
+        const handleScroll = () => {
+            const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+            shouldScrollRef.current = atBottom;
+        };
+        observer.observe(el, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        el.addEventListener('scroll', handleScroll);
+        return () => {
+            observer.disconnect();
+            el.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
     /**
      * Effect: Listen to the config change.
      */
@@ -134,8 +185,9 @@ export function ChatMessages() {
     }, [messages, allRendered]);
     const horizontalPadding = area === 'main' ? 8 : 4;
     return (React.createElement(React.Fragment, null,
-        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
+        React.createElement(ScrollContainer, { ref: scrollContainerRef, sx: { flexGrow: 1 } },
             welcomeMessage && React.createElement(WelcomeMessage, { content: welcomeMessage }),
+            messages.length === 0 && React.createElement(ChatBodyPlaceholder, null),
             React.createElement(Box, { sx: {
                     paddingLeft: horizontalPadding,
                     paddingRight: horizontalPadding,

package/lib/components/scroll-container.d.ts

@@ -5,19 +5,12 @@ type ScrollContainerProps = {
     sx?: SxProps<Theme>;
 };
 /**
- * Component that handles intelligent scrolling.
+ * Scrollable container for chat messages. Scroll position is managed
+ * explicitly by the parent (ChatMessages) via a forwarded ref.
  *
- * - If viewport is at the bottom of the overflow container, appending new
- * children keeps the viewport on the bottom of the overflow container.
- *
- * - If viewport is in the middle of the overflow container, appending new
- * children leaves the viewport unaffected.
- *
- * Currently only works for Chrome and Firefox due to reliance on
- * `overflow-anchor`.
- *
- * **References**
- * - https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
+ * `overflowAnchor: 'none'` disables the browser's built-in scroll anchoring
+ * which caused partial viewport shifts on new content in Chrome/Firefox
+ * and is unsupported in Safari.
  */
-export declare function ScrollContainer(props: ScrollContainerProps): JSX.Element;
+export declare const ScrollContainer: React.ForwardRefExoticComponent<ScrollContainerProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/scroll-container.js

@@ -2,32 +2,21 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Box } from '@mui/material';
 /**
- * Component that handles intelligent scrolling.
+ * Scrollable container for chat messages. Scroll position is managed
+ * explicitly by the parent (ChatMessages) via a forwarded ref.
  *
- * - If viewport is at the bottom of the overflow container, appending new
- * children keeps the viewport on the bottom of the overflow container.
- *
- * - If viewport is in the middle of the overflow container, appending new
- * children leaves the viewport unaffected.
- *
- * Currently only works for Chrome and Firefox due to reliance on
- * `overflow-anchor`.
- *
- * **References**
- * - https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
+ * `overflowAnchor: 'none'` disables the browser's built-in scroll anchoring
+ * which caused partial viewport shifts on new content in Chrome/Firefox
+ * and is unsupported in Safari.
  */
-export function ScrollContainer(props) {
+export const ScrollContainer = forwardRef(function ScrollContainer(props, ref) {
     const id = useMemo(() => 'jupyter-chat-scroll-container-' + Date.now().toString(), []);
-    return (React.createElement(Box, { id: id, sx: {
+    return (React.createElement(Box, { ref: ref, id: id, sx: {
             overflowY: 'scroll',
-            '& *': {
-                overflowAnchor: 'none'
-            },
+            overflowAnchor: 'none',
             ...props.sx
-        } },
-        React.createElement(Box, null, props.children),
-        React.createElement(Box, { sx: { overflowAnchor: 'auto', height: '1px' } })));
-}
+        } }, props.children));
+});

package/lib/input-model.d.ts

@@ -333,5 +333,9 @@ export declare namespace InputModel {
          * Whether to send a message via Shift-Enter instead of Enter.
          */
         sendWithShiftEnter?: boolean;
+        /**
+         * Whether to display the 'send with selection' button.
+         */
+        sendWithSelection?: boolean;
     }
 }

package/lib/theme-provider.js

@@ -43,7 +43,7 @@ export async function getJupyterLabTheme() {
                         style: {
                             backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
                             color: 'var(--jp-ui-inverse-font-color1)',
-                            borderRadius: '4px',
+                            borderRadius: 'var(--jp-border-radius)',
                             boxShadow: 'none',
                             '&:hover': {
                                 backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,
@@ -100,7 +100,7 @@ export async function getJupyterLabTheme() {
                         style: {
                             backgroundColor: `var(--jp-brand-color${light ? '1' : '2'})`,
                             color: 'var(--jp-ui-inverse-font-color1)',
-                            borderRadius: '4px',
+                            borderRadius: 'var(--jp-border-radius)',
                             boxShadow: 'none',
                             '&:hover': {
                                 backgroundColor: `var(--jp-brand-color${light ? '0' : '1'})`,