@jupyter/chat 0.22.0 → 0.23.0-alpha.0

package/lib/message.js

@@ -2,6 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 /**
  * The message object.
@@ -14,6 +15,7 @@ export class Message {
      */
     constructor(content) {
         this._changed = new Signal(this);
+        this._rendered = new PromiseDelegate();
         this._content = content;
     }
     /**
@@ -70,11 +72,32 @@ export class Message {
     get changed() {
         return this._changed;
     }
+    /**
+     * A promise delegate that resolve when the message is rendered.
+     */
+    get renderedDelegate() {
+        return this._rendered;
+    }
     /**
      * Update one or several fields of the message.
      */
     update(updated) {
+        // Check if the message will be rendered again.
+        const triggerRerender = new Set([
+            'body',
+            'deleted',
+            'mentions',
+            'mime_model'
+        ]);
+        const updatedAttributes = Object.keys(updated);
+        const shouldRerender = updatedAttributes.some(attribute => triggerRerender.has(attribute) &&
+            updated[attribute] !== this._content[attribute]);
+        // Update the message content.
         this._content = { ...this._content, ...updated };
+        // Update the promise delegate if the message will be rendered again.
+        if (shouldRerender) {
+            this._rendered = new PromiseDelegate();
+        }
         this._changed.emit();
     }
 }

package/lib/model.d.ts

@@ -124,6 +124,10 @@ export interface IChatModel extends IDisposable {
      * Whether the chat handler is disposed.
      */
     isDisposed: boolean;
+    /**
+     * A signal emitting when disposing of the model.
+     */
+    readonly disposed: ISignal<IChatModel, void>;
     /**
      * Function to call when a message is received.
      *
@@ -186,7 +190,10 @@ export declare abstract class AbstractChatModel implements IChatModel {
      */
     get name(): string;
     set name(value: string);
-    get disposed(): ISignal<AbstractChatModel, void>;
+    /**
+     * A signal emitting when disposing of the model.
+     */
+    get disposed(): ISignal<IChatModel, void>;
     /**
      * The chat messages list.
      */

package/lib/model.js

@@ -92,6 +92,9 @@ export class AbstractChatModel {
     set name(value) {
         this._name = value;
     }
+    /**
+     * A signal emitting when disposing of the model.
+     */
     get disposed() {
         return this._disposed;
     }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LabIcon } from '@jupyterlab/ui-components';
 import { Token } from '@lumino/coreutils';
 import { IInputModel } from '../input-model';

package/lib/registers/footers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Token } from '@lumino/coreutils';
 import { IChatModel } from '../model';
 import { IMessageContent } from '../types';

package/lib/registers/preambles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Token } from '@lumino/coreutils';
 import { IChatModel } from '../model';
 import { IMessageContent } from '../types';

package/lib/tokens.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
 import { Widget } from '@lumino/widgets';

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { PromiseDelegate } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { IRenderMime } from '@jupyterlab/rendermime';
 /**
@@ -146,6 +147,10 @@ export interface IMessage extends IMessageContent {
      * A signal emitting when the message has been updated.
      */
     changed: ISignal<IMessage, void>;
+    /**
+     * A promise delegate that resolve when the message is rendered.
+     */
+    renderedDelegate: PromiseDelegate<void>;
 }
 /**
  * The chat history interface.

package/lib/utils.js

@@ -48,7 +48,7 @@ export function replaceMentionToSpan(content, user) {
     }
     const mention = '@' + user.mention_name;
     const regex = new RegExp(mention, 'g');
-    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    const mentionEl = `<span class="${MENTION_CLASS}"> ${mention} </span>`;
     return content.replace(regex, mentionEl);
 }
 /**
@@ -62,7 +62,7 @@ export function replaceSpanToMention(content, user) {
         return content;
     }
     const mention = '@' + user.mention_name;
-    const mentionEl = `<span class="${MENTION_CLASS}">${mention}</span>`;
+    const mentionEl = `<span class="${MENTION_CLASS}"> ${mention} </span>`;
     const regex = new RegExp(mentionEl, 'g');
     return content.replace(regex, mention);
 }

package/lib/widgets/chat-selector-popup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ITranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';

package/lib/widgets/multichat-panel.d.ts

@@ -1,11 +1,20 @@
 import { TranslationBundle } from '@jupyterlab/translation';
-import { PanelWithToolbar } from '@jupyterlab/ui-components';
+import { PanelWithToolbar, ReactiveToolbar } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { ISignal } from '@lumino/signaling';
+import { Panel, Widget } from '@lumino/widgets';
 import { ChatWidget } from './chat-widget';
 import { Chat, IInputToolbarRegistryFactory } from '../components';
 import { IChatModel } from '../model';
 import { IChatPlaceholderFactory } from '../tokens';
+/**
+ * A panel widget with a reactive toolbar.
+ */
+declare class ReactivePanelWithToolbar extends Panel {
+    constructor();
+    get toolbar(): ReactiveToolbar;
+    private _toolbar;
+}
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
@@ -41,9 +50,10 @@ export declare class MultiChatPanel extends PanelWithToolbar {
      */
     getLoadedModelNames(): string[];
     /**
-     * Dispose a model, removing it from loaded models.
+     * Removing a model from loaded list.
+     * Dispose of the widget and optionally dispose of the model.
      */
-    disposeLoadedModel(name: string): void;
+    unsetLoadedModel(name: string, dispose?: boolean): void;
     /**
      * Emit a signal when the panel visibility changed.
      */
@@ -178,8 +188,10 @@ export declare namespace MultiChatPanel {
 /**
  * A widget containing the chat and its toolbar.
  */
-declare class SidePanelWidget extends PanelWithToolbar {
+declare class SidePanelWidget extends ReactivePanelWithToolbar {
     constructor(options: SidePanelWidget.IOptions);
+    protected onAfterAttach(msg: Message): void;
+    protected onResize(msg: Widget.ResizeMessage): void;
     /**
      * The chat widget embedded in the sidepanel widget.
      */
@@ -212,6 +224,10 @@ declare class SidePanelWidget extends PanelWithToolbar {
      * Enable/disable unread icon.
      */
     private _unreadChanged;
+    /**
+     * Trigger reactive toolbar overflow computation from rendered toolbar size.
+     */
+    private _updateReactiveToolbar;
     private _chatWidget;
     private _markAsRead;
     private _displayName;
@@ -233,7 +249,7 @@ declare namespace SidePanelWidget {
         /**
          * The callback when closing the chat.
          */
-        onClose: (name: string) => void;
+        onClose: (name: string, disposeModel?: boolean) => void;
         /**
          * The displayed name of the chat.
          */

package/lib/widgets/multichat-panel.js

@@ -8,11 +8,12 @@
  */
 import { InputDialog } from '@jupyterlab/apputils';
 import { nullTranslator } from '@jupyterlab/translation';
-import { addIcon, closeIcon, launchIcon, PanelWithToolbar, ReactWidget, Spinner, ToolbarButton } from '@jupyterlab/ui-components';
+import { addIcon, closeIcon, launchIcon, PanelWithToolbar, ReactiveToolbar, ReactWidget, Spinner, Toolbar, ToolbarButton } from '@jupyterlab/ui-components';
 import { ArrayExt } from '@lumino/algorithm';
+import { MessageLoop } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
-import { Widget } from '@lumino/widgets';
+import { Panel, Widget } from '@lumino/widgets';
 import React, { useEffect, useRef, useState } from 'react';
 import { ChatSelectorPopup } from './chat-selector-popup';
 import { ChatWidget } from './chat-widget';
@@ -23,7 +24,21 @@ const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
 const ADD_BUTTON_CLASS = 'jp-chat-add';
 const OPEN_SELECT_CLASS = 'jp-chat-open';
 const SIDEPANEL_WIDGET_CLASS = 'jp-chat-sidepanel-widget';
+// TODO: Drop this workaround class (and related CSS) once we depend on
+// @jupyterlab/ui-components >= 4.6.0 (refs - jupyterlab/jupyterlab#18824).
 const TOOLBAR_CLASS = 'jp-chat-sidepanel-widget-toolbar';
+/**
+ * A panel widget with a reactive toolbar.
+ */
+class ReactivePanelWithToolbar extends Panel {
+    constructor() {
+        super();
+        this._toolbar = new ReactiveToolbar({ noFocusOnClick: true });
+    }
+    get toolbar() {
+        return this._toolbar;
+    }
+}
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
@@ -133,7 +148,7 @@ export class MultiChatPanel extends PanelWithToolbar {
                 chatNames: [],
                 onSelect: this._onSelectChat,
                 onClose: (name) => {
-                    this.disposeLoadedModel(name);
+                    this.unsetLoadedModel(name);
                 },
                 translator
             });
@@ -197,9 +212,10 @@ export class MultiChatPanel extends PanelWithToolbar {
         return Array.from(this._loadedModels.keys());
     }
     /**
-     * Dispose a model, removing it from loaded models.
+     * Removing a model from loaded list.
+     * Dispose of the widget and optionally dispose of the model.
      */
-    disposeLoadedModel(name) {
+    unsetLoadedModel(name, dispose = true) {
         var _a, _b;
         const model = this._loadedModels.get(name);
         if (model) {
@@ -214,7 +230,9 @@ export class MultiChatPanel extends PanelWithToolbar {
                 }
                 this._addPlaceholder();
             }
-            model.dispose();
+            if (dispose) {
+                model.dispose();
+            }
             this._loadedModels.delete(name);
             (_b = this._chatSelectorPopup) === null || _b === void 0 ? void 0 : _b.setLoadedModels(this.getLoadedModelNames());
         }
@@ -282,8 +300,8 @@ export class MultiChatPanel extends PanelWithToolbar {
             displayName: name,
             openInMain: this._openInMain,
             renameChat: this._renameChat,
-            onClose: (name) => {
-                this.disposeLoadedModel(name);
+            onClose: (name, disposeModel = true) => {
+                this.unsetLoadedModel(name, disposeModel);
             },
             trans: this._trans
         });
@@ -352,7 +370,7 @@ export class MultiChatPanel extends PanelWithToolbar {
 /**
  * A widget containing the chat and its toolbar.
  */
-class SidePanelWidget extends PanelWithToolbar {
+class SidePanelWidget extends ReactivePanelWithToolbar {
     constructor(options) {
         var _a, _b, _c, _d;
         super();
@@ -367,8 +385,11 @@ class SidePanelWidget extends PanelWithToolbar {
         this._displayName = (_a = options.displayName) !== null && _a !== void 0 ? _a : options.widget.model.name;
         const trans = options.trans;
         this.addClass(SIDEPANEL_WIDGET_CLASS);
+        // Keep side-panel toolbar baseline sizing from ui-components.
+        this.toolbar.addClass('jp-SidePanel-toolbar');
         this.toolbar.addClass(TOOLBAR_CLASS);
         this._updateTitle();
+        this.toolbar.addItem('titleSpacer', Toolbar.createSpacerItem());
         this.addWidget(this.toolbar);
         // Add spinner while loading
         const spinner = new Spinner();
@@ -435,7 +456,7 @@ class SidePanelWidget extends PanelWithToolbar {
                     var _a;
                     const name = this.model.name;
                     if (await ((_a = options.openInMain) === null || _a === void 0 ? void 0 : _a.call(options, name))) {
-                        options.onClose(this._displayName);
+                        options.onClose(this._displayName, false);
                     }
                 }
             });
@@ -454,6 +475,14 @@ class SidePanelWidget extends PanelWithToolbar {
         (_b = this.model.unreadChanged) === null || _b === void 0 ? void 0 : _b.connect(this._unreadChanged);
         this._markAsRead.enabled = ((_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.unreadMessages.length) !== null && _d !== void 0 ? _d : 0) > 0;
     }
+    onAfterAttach(msg) {
+        super.onAfterAttach(msg);
+        requestAnimationFrame(() => this._updateReactiveToolbar());
+    }
+    onResize(msg) {
+        super.onResize(msg);
+        this._updateReactiveToolbar();
+    }
     /**
      * The chat widget embedded in the sidepanel widget.
      */
@@ -516,6 +545,17 @@ class SidePanelWidget extends PanelWithToolbar {
         this._titleWidget = new Widget({ node: titleElement });
         this.toolbar.insertItem(0, 'title', this._titleWidget);
     }
+    /**
+     * Trigger reactive toolbar overflow computation from rendered toolbar size.
+     */
+    _updateReactiveToolbar() {
+        const toolbarWidth = this.toolbar.node.offsetWidth;
+        if (toolbarWidth <= 0) {
+            return;
+        }
+        const toolbarHeight = this.toolbar.node.offsetHeight;
+        MessageLoop.sendMessage(this.toolbar, new Widget.ResizeMessage(toolbarWidth, toolbarHeight));
+    }
 }
 /**
  * A search input component for selecting a chat.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.22.0",
+  "version": "0.23.0-alpha.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -46,25 +46,25 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@jupyter/react-components": "^0.15.2",
-    "@jupyterlab/application": "^4.2.0",
-    "@jupyterlab/apputils": "^4.3.0",
-    "@jupyterlab/codeeditor": "^4.2.0",
-    "@jupyterlab/codemirror": "^4.2.0",
-    "@jupyterlab/docmanager": "^4.2.0",
-    "@jupyterlab/docregistry": "^4.2.0",
-    "@jupyterlab/filebrowser": "^4.2.0",
-    "@jupyterlab/fileeditor": "^4.2.0",
-    "@jupyterlab/notebook": "^4.2.0",
-    "@jupyterlab/rendermime": "^4.2.0",
-    "@jupyterlab/translation": "^4.2.0",
-    "@jupyterlab/ui-components": "^4.2.0",
-    "@lumino/algorithm": "^2.0.0",
-    "@lumino/commands": "^2.0.0",
-    "@lumino/coreutils": "^2.0.0",
-    "@lumino/disposable": "^2.0.0",
-    "@lumino/polling": "^2.0.0",
-    "@lumino/signaling": "^2.0.0",
-    "@lumino/widgets": "^2.0.0",
+    "@jupyterlab/application": "^4.6.0",
+    "@jupyterlab/apputils": "^4.7.0",
+    "@jupyterlab/codeeditor": "^4.6.0",
+    "@jupyterlab/codemirror": "^4.6.0",
+    "@jupyterlab/docmanager": "^4.6.0",
+    "@jupyterlab/docregistry": "^4.6.0",
+    "@jupyterlab/filebrowser": "^4.6.0",
+    "@jupyterlab/fileeditor": "^4.6.0",
+    "@jupyterlab/notebook": "^4.6.0",
+    "@jupyterlab/rendermime": "^4.6.0",
+    "@jupyterlab/translation": "^4.6.0",
+    "@jupyterlab/ui-components": "^4.6.0",
+    "@lumino/algorithm": "^2.0.4",
+    "@lumino/commands": "^2.3.3",
+    "@lumino/coreutils": "^2.2.2",
+    "@lumino/disposable": "^2.1.5",
+    "@lumino/polling": "^2.1.5",
+    "@lumino/signaling": "^2.1.5",
+    "@lumino/widgets": "^2.8.0",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
     "clsx": "^2.1.0",
@@ -72,7 +72,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@jupyterlab/testing": "^4.2.0",
+    "@jupyterlab/testing": "^4.6.0",
     "@types/jest": "^29.2.0",
     "@types/json-schema": "^7.0.11",
     "@types/react": "^18.2.0",
@@ -84,7 +84,7 @@
     "rimraf": "^5.0.1",
     "source-map-loader": "^1.0.2",
     "style-loader": "^3.3.1",
-    "typescript": "~5.0.2"
+    "typescript": "~5.9.3"
   },
   "sideEffects": [
     "style/*.css",

package/src/__tests__/multichat-panel.spec.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { ToolbarButton } from '@jupyterlab/ui-components';
 import { RenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Widget } from '@lumino/widgets';
 
@@ -17,6 +18,101 @@ describe('MultiChatPanel', () => {
     rmRegistry = new RenderMimeRegistry();
   });
 
+  describe('unsetLoadedModel', () => {
+    it('should dispose the model by default', async () => {
+      const panel = new MultiChatPanel({ rmRegistry });
+      const { MockChatModel } = await import('./mocks');
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test-chat' });
+
+      panel.unsetLoadedModel('test-chat');
+
+      expect(model.isDisposed).toBe(true);
+      panel.dispose();
+    });
+
+    it('should not dispose the model when dispose=false', async () => {
+      const panel = new MultiChatPanel({ rmRegistry });
+      const { MockChatModel } = await import('./mocks');
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test-chat' });
+
+      panel.unsetLoadedModel('test-chat', false);
+
+      expect(model.isDisposed).toBe(false);
+      model.dispose();
+      panel.dispose();
+    });
+
+    it('should dispose the model when clicking the close button', async () => {
+      const panel = new MultiChatPanel({ rmRegistry });
+      const { MockChatModel } = await import('./mocks');
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test-chat' });
+
+      const toolbar = panel.current!.toolbar;
+      const names = Array.from(toolbar.names());
+      const closeIdx = names.indexOf('close');
+      expect(closeIdx).toBeGreaterThan(-1);
+
+      const closeButton = (toolbar.layout as any).widgets[
+        closeIdx
+      ] as ToolbarButton;
+
+      closeButton.onClick();
+
+      expect(model.isDisposed).toBe(true);
+      panel.dispose();
+    });
+
+    it('should remove the model from loaded models regardless of dispose flag', async () => {
+      const panel = new MultiChatPanel({ rmRegistry });
+      const { MockChatModel } = await import('./mocks');
+      const model = new MockChatModel();
+      panel.open({ model, displayName: 'test-chat' });
+
+      panel.unsetLoadedModel('test-chat', false);
+
+      expect(panel.getLoadedModel('test-chat')).toBeUndefined();
+      model.dispose();
+      panel.dispose();
+    });
+  });
+
+  describe('openInMain', () => {
+    it('should not dispose the model when moving to main area', async () => {
+      const { MockChatModel } = await import('./mocks');
+      const model = new MockChatModel();
+      const openInMain = jest.fn().mockResolvedValue(true);
+
+      const panel = new MultiChatPanel({ rmRegistry, openInMain });
+      panel.open({ model, displayName: 'test-chat' });
+
+      // Find the 'moveMain' toolbar button by name and invoke its click handler directly.
+      // ToolbarButton stores the onClick handler independently of DOM/React rendering,
+      // so this works without attaching the widget to the document.
+      const toolbar = panel.current!.toolbar;
+      const names = Array.from(toolbar.names());
+      const moveMainIdx = names.indexOf('moveMain');
+      expect(moveMainIdx).toBeGreaterThan(-1);
+
+      const moveButton = (toolbar.layout as any).widgets[
+        moveMainIdx
+      ] as ToolbarButton;
+
+      moveButton.onClick();
+      // Wait for the async onClick handler: openInMain resolves, then onClose is called.
+      await Promise.resolve();
+
+      expect(openInMain).toHaveBeenCalledWith(model.name);
+      expect(model.isDisposed).toBe(false);
+      expect(panel.getLoadedModel('test-chat')).toBeUndefined();
+
+      model.dispose();
+      panel.dispose();
+    });
+  });
+
   describe('placeholderFactory', () => {
     it('should use defaultPlaceholder when no factory is provided', () => {
       const panel = new MultiChatPanel({ rmRegistry });
@@ -126,10 +222,26 @@ describe('MultiChatPanel', () => {
       const { MockChatModel } = await import('./mocks');
       const model = new MockChatModel();
       panel.open({ model, displayName: 'test-chat' });
-      panel.disposeLoadedModel('test-chat');
+      panel.unsetLoadedModel('test-chat');
 
       expect(factory.create).toHaveBeenCalledTimes(2);
       panel.dispose();
     });
   });
+
+  describe('side panel toolbar', () => {
+    it('should include the responsive toolbar opener for overflow actions', async () => {
+      const panel = new MultiChatPanel({ rmRegistry });
+      const { MockChatModel } = await import('./mocks');
+
+      panel.open({ model: new MockChatModel(), displayName: 'test-chat' });
+
+      const opener = panel.current?.toolbar.node.querySelector(
+        '.jp-Toolbar-responsive-opener'
+      );
+      expect(opener).not.toBeNull();
+
+      panel.dispose();
+    });
+  });
 });

package/src/components/chat.tsx

@@ -10,7 +10,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import {
   ChatInput,
@@ -34,11 +34,6 @@ import { IChatBodyPlaceholderFactory } from '../tokens';
 export function ChatBody(props: Chat.IChatProps): JSX.Element {
   const { model } = props;
   const [writers, setWriters] = useState<IChatModel.IWriter[]>([]);
-  let { inputToolbarRegistry } = props;
-  if (!inputToolbarRegistry) {
-    inputToolbarRegistry = InputToolbarRegistry.defaultToolbarRegistry();
-  }
-
   /**
    * Handle the changes in the writers list.
    */
@@ -65,10 +60,15 @@ export function ChatBody(props: Chat.IChatProps): JSX.Element {
 
   const horizontalPadding = 4;
 
-  const contextValue: Chat.IChatProps = {
-    ...props,
-    inputToolbarRegistry
-  };
+  const contextValue = useMemo(
+    () => ({
+      ...props,
+      inputToolbarRegistry:
+        props.inputToolbarRegistry ??
+        InputToolbarRegistry.defaultToolbarRegistry()
+    }),
+    [props]
+  );
 
   return (
     <ChatReactContext.Provider value={contextValue}>

package/src/components/input/buttons/save-edit-button.tsx

@@ -7,6 +7,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import React, { useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { submitInputMessage } from '../submit-message';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
 
@@ -47,8 +48,7 @@ export function SaveEditButton(
   }, [model]);
 
   async function save() {
-    await chatCommandRegistry?.onSubmit(model);
-    model.send(model.value);
+    await submitInputMessage({ model, chatCommandRegistry });
   }
 
   return (

package/src/components/input/buttons/send-button.tsx

@@ -9,6 +9,7 @@ import { Box, Menu, MenuItem, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { InputToolbarRegistry } from '../toolbar-registry';
+import { submitInputMessage } from '../submit-message';
 import { TooltippedIconButton } from '../../mui-extras';
 import { useTranslator } from '../../../context';
 import { includeSelectionIcon } from '../../../icons';
@@ -111,19 +112,10 @@ export function SendButton(
   }, [activeCellManager, selectionWatcher, showSendWithSelection]);
 
   async function send() {
-    // Run all command providers
-    await chatCommandRegistry?.onSubmit(model);
-
-    const body = model.value;
-
-    model.value = '';
-    model.send(body);
-    model.focus();
+    await submitInputMessage({ model, chatCommandRegistry });
   }
 
   async function sendWithSelection() {
-    await chatCommandRegistry?.onSubmit(model);
-
     let source = '';
     let language: string | undefined;
 
@@ -141,10 +133,8 @@ export function SendButton(
       body += `\n\n\`\`\`${language ?? ''}\n${source}\n\`\`\`\n`;
     }
 
-    model.value = '';
     closeMenu();
-    model.send(body);
-    model.focus();
+    await submitInputMessage({ model, chatCommandRegistry, body });
   }
 
   return (