@jupyter/chat 0.21.1 → 0.22.0

package/lib/tokens.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
 import { Token } from '@lumino/coreutils';
-import { ChatWidget } from './widgets';
+import { Widget } from '@lumino/widgets';
+import { ChatWidget, Placeholder } from './widgets';
 import { IChatModel } from './model';
 /**
  * The main area chat widget type.
@@ -16,3 +18,50 @@ export type IChatTracker = IWidgetTracker<ChatWidget | MainAreaChat>;
  * A chat tracker token.
  */
 export declare const IChatTracker: Token<IChatTracker>;
+/**
+ * The interface for the placeholder factory.
+ */
+export interface IChatPlaceholderFactory {
+    /**
+     * Create a placeholder widget for the multi-chat panel.
+     *
+     * @param props - the props passed to the placeholder.
+     * @returns a widget to display as placeholder.
+     */
+    create(props: Placeholder.IProps): Widget;
+}
+/**
+ * The token for the placeholder factory.
+ * Not provided by default — extensions can provide it to replace the default
+ * placeholder shown when no chat is open in the multi-chat panel.
+ */
+export declare const IChatPlaceholderFactory: Token<IChatPlaceholderFactory>;
+/**
+ * The interface for the chat body placeholder factory.
+ */
+export interface IChatBodyPlaceholderFactory {
+    /**
+     * Create a chat body placeholder component shown when the chat has no messages.
+     *
+     * @param props - the props passed to the component.
+     * @returns a React element to display as chat body placeholder.
+     */
+    create(props: IChatBodyPlaceholderFactory.IProps): JSX.Element | null;
+}
+export declare namespace IChatBodyPlaceholderFactory {
+    /**
+     * The props passed to the chat body placeholder factory.
+     */
+    interface IProps {
+        /**
+         * Callback to send a message.
+         */
+        onSend: (body: string) => void;
+    }
+}
+/**
+ * The token for the chat body placeholder factory.
+ * Not provided by default — extensions can provide it to display clickable
+ * chat body placeholder when a chat has no messages.
+ */
+export declare const IChatBodyPlaceholderFactory: Token<IChatBodyPlaceholderFactory>;

package/lib/tokens.js

@@ -7,3 +7,15 @@ import { Token } from '@lumino/coreutils';
  * A chat tracker token.
  */
 export const IChatTracker = new Token('@jupyter/chat:IChatTracker', 'The chat widget tracker');
+/**
+ * The token for the placeholder factory.
+ * Not provided by default — extensions can provide it to replace the default
+ * placeholder shown when no chat is open in the multi-chat panel.
+ */
+export const IChatPlaceholderFactory = new Token('@jupyter/chat:IChatPlaceholderFactory', 'The placeholder factory for the multi-chat panel');
+/**
+ * The token for the chat body placeholder factory.
+ * Not provided by default — extensions can provide it to display clickable
+ * chat body placeholder when a chat has no messages.
+ */
+export const IChatBodyPlaceholderFactory = new Token('@jupyter/chat:IChatBodyPlaceholderFactory', 'The chat body placeholder factory for empty chats');

package/lib/types.d.ts

@@ -52,6 +52,10 @@ export interface IConfig {
      * Whether to display deleted messages.
      */
     showDeleted?: boolean;
+    /**
+     * Whether to display the 'send with selection' button.
+     */
+    sendWithSelection?: boolean;
 }
 /**
  * Mime model body type, a partial mime bundle model containing at least the data.

package/lib/widgets/chat-widget.js

@@ -2,7 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import { ReactWidget } from '@jupyterlab/apputils';
+import { Notification, ReactWidget } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import { nullTranslator } from '@jupyterlab/translation';
@@ -236,11 +236,13 @@ export class ChatWidget extends ReactWidget {
             // Get path from first cell as all cells come from same notebook as users can only select or drag cells from one notebook at a time
             if (!((_a = cells[0]) === null || _a === void 0 ? void 0 : _a.id)) {
                 console.warn('No valid cells to process');
+                Notification.error('Failed to attach notebook cells: no valid cell data found.');
                 return false;
             }
             const notebookPath = this._findNotebookPath(String(cells[0].id));
             if (!notebookPath) {
                 console.warn(`Cannot find notebook for dragged cells from ${cells[0].id}`);
+                Notification.error('Failed to attach notebook cells: source notebook could not be located.');
                 return false;
             }
             const validCells = [];
@@ -282,9 +284,11 @@ export class ChatWidget extends ReactWidget {
                 (_b = inputModel === null || inputModel === void 0 ? void 0 : inputModel.addAttachment) === null || _b === void 0 ? void 0 : _b.call(inputModel, attachment);
                 return !!inputModel;
             }
+            Notification.error('Failed to attach notebook cells: no supported cells were found.');
         }
         catch (error) {
             console.error('Failed to process cell drop: ', error);
+            Notification.error('Failed to attach notebook cells due to an unexpected error.');
         }
         return false;
     }

package/lib/widgets/index.d.ts

@@ -3,3 +3,4 @@ export * from './chat-selector-popup';
 export * from './chat-sidebar';
 export * from './chat-widget';
 export * from './multichat-panel';
+export * from './placeholder';

package/lib/widgets/index.js

@@ -7,3 +7,4 @@ export * from './chat-selector-popup';
 export * from './chat-sidebar';
 export * from './chat-widget';
 export * from './multichat-panel';
+export * from './placeholder';

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

@@ -5,6 +5,7 @@ import { ISignal } from '@lumino/signaling';
 import { ChatWidget } from './chat-widget';
 import { Chat, IInputToolbarRegistryFactory } from '../components';
 import { IChatModel } from '../model';
+import { IChatPlaceholderFactory } from '../tokens';
 /**
  * Generic sidepanel widget including multiple chats and the add chat button.
  */
@@ -48,6 +49,10 @@ export declare class MultiChatPanel extends PanelWithToolbar {
      */
     protected onAfterShow(msg: Message): void;
     protected onBeforeHide(msg: Message): void;
+    /**
+     * Add a placeholder in the panel.
+     */
+    private _addPlaceholder;
     /**
      * Open a specific chat by name, creating a new sidepanel widget.
      */
@@ -88,6 +93,7 @@ export declare class MultiChatPanel extends PanelWithToolbar {
      */
     private _onSelectChat;
     private _chatOpened;
+    private _chatNamesChanged;
     private _chatOptions;
     private _inputToolbarFactory?;
     private _updateChatListDebouncer;
@@ -95,6 +101,7 @@ export declare class MultiChatPanel extends PanelWithToolbar {
     private _getChatNames?;
     private _openInMain?;
     private _renameChat?;
+    private _placeholderFactory?;
     private _openChatWidget?;
     private _chatSelectorPopup?;
     private _loadedModels;
@@ -144,6 +151,14 @@ export declare namespace MultiChatPanel {
          * @returns - a boolean, whether the chat has been renamed or not.
          */
         renameChat?: boolean | ((oldName: string) => Promise<string | null>);
+        /**
+         * An optional factory to create a placeholder widget displayed when no chat
+         * is opened. Falls back to the default placeholder if not provided.
+         *
+         * @param props - the props passed to the placeholder.
+         * @returns a widget to display as placeholder.
+         */
+        placeholderFactory?: IChatPlaceholderFactory;
     }
     /**
      * The options for the add chat method.

package/lib/widgets/multichat-panel.js

@@ -14,8 +14,9 @@ import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
 import React, { useEffect, useRef, useState } from 'react';
-import { ChatWidget } from './chat-widget';
 import { ChatSelectorPopup } from './chat-selector-popup';
+import { ChatWidget } from './chat-widget';
+import { defaultPlaceholder } from './placeholder';
 import { TRANSLATION_DOMAIN } from '../context';
 import { chatIcon, readIcon } from '../icons';
 const SIDEPANEL_CLASS = 'jp-chat-sidepanel';
@@ -49,6 +50,7 @@ export class MultiChatPanel extends PanelWithToolbar {
                 if (!ArrayExt.shallowEqual(Object.keys(chatNames !== null && chatNames !== void 0 ? chatNames : {}), Object.keys(this._chatNames))) {
                     this._chatNames = chatNames !== null && chatNames !== void 0 ? chatNames : {};
                     (_b = this._chatSelectorPopup) === null || _b === void 0 ? void 0 : _b.updateChats(Object.keys(this._chatNames));
+                    this._chatNamesChanged.emit(this._chatNames);
                 }
             }
             catch (e) {
@@ -65,7 +67,7 @@ export class MultiChatPanel extends PanelWithToolbar {
                 this._loadedModels.set(change.new, model);
                 this._loadedModels.delete(change.old);
                 (_a = this._chatSelectorPopup) === null || _a === void 0 ? void 0 : _a.setLoadedModels(this.getLoadedModelNames());
-                if (((_b = this._currentWidget) === null || _b === void 0 ? void 0 : _b.model.name) === model.name) {
+                if (((_b = this.current) === null || _b === void 0 ? void 0 : _b.model.name) === model.name) {
                     (_c = this._chatSelectorPopup) === null || _c === void 0 ? void 0 : _c.setCurrentChat(change.new);
                 }
             }
@@ -91,6 +93,7 @@ export class MultiChatPanel extends PanelWithToolbar {
             (_a = this._chatSelectorPopup) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._chatOpened = new Signal(this);
+        this._chatNamesChanged = new Signal(this);
         this._loadedModels = new Map();
         this._chatNames = {};
         this._visibilityChanged = new Signal(this);
@@ -106,6 +109,7 @@ export class MultiChatPanel extends PanelWithToolbar {
         this._createModel = options.createModel;
         this._openInMain = options.openInMain;
         this._renameChat = options.renameChat;
+        this._placeholderFactory = options.placeholderFactory;
         if (this._createModel) {
             // Add chat button calls the createChat callback
             const addChat = new ToolbarButton({
@@ -137,12 +141,16 @@ export class MultiChatPanel extends PanelWithToolbar {
         // Insert the toolbar as first child.
         this.insertWidget(0, this.toolbar);
         this._updateChatListDebouncer = new Debouncer(this._updateChatList, 200);
+        // Add the placeholder by default.
+        this._addPlaceholder();
     }
     /**
      * The currently displayed chat widget.
      */
     get current() {
-        return this._currentWidget;
+        return this._currentWidget instanceof SidePanelWidget
+            ? this._currentWidget
+            : undefined;
     }
     /**
      * A signal emitting when a chat widget is opened in the panel.
@@ -196,14 +204,15 @@ export class MultiChatPanel extends PanelWithToolbar {
         const model = this._loadedModels.get(name);
         if (model) {
             // If this is the currently displayed chat, remove it.
-            if (((_a = this._currentWidget) === null || _a === void 0 ? void 0 : _a.model) === model) {
-                this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
-                this._currentWidget.dispose();
+            if (((_a = this.current) === null || _a === void 0 ? void 0 : _a.model) === model) {
+                this.current.nameChanged.disconnect(this._modelNameChanged);
+                this.current.dispose();
                 this._currentWidget = undefined;
                 // Clear current chat in selector
                 if (this._chatSelectorPopup) {
                     this._chatSelectorPopup.setCurrentChat(null);
                 }
+                this._addPlaceholder();
             }
             model.dispose();
             this._loadedModels.delete(name);
@@ -219,17 +228,40 @@ export class MultiChatPanel extends PanelWithToolbar {
     onBeforeHide(msg) {
         this._visibilityChanged.emit(false);
     }
+    /**
+     * Add a placeholder in the panel.
+     */
+    _addPlaceholder() {
+        const props = {
+            chatNames: this._chatNames,
+            open: this._onSelectChat,
+            onCreate: this._createModel
+                ? async () => {
+                    const args = await this._createModel();
+                    this.open(args);
+                }
+                : undefined,
+            chatNamesChanged: this._chatNamesChanged,
+            trans: this._trans
+        };
+        const placeholder = this._placeholderFactory
+            ? this._placeholderFactory.create(props)
+            : new defaultPlaceholder(props);
+        this.addWidget(placeholder);
+        this._currentWidget = placeholder;
+    }
     /**
      * Open a specific chat by name, creating a new sidepanel widget.
      */
     _open(name) {
+        var _a, _b;
         const model = this._loadedModels.get(name);
         if (!model) {
             return;
         }
-        // Dispose current chat widget if any
+        // Dispose of the current chat widget or placeholder.
         if (this._currentWidget) {
-            this._currentWidget.nameChanged.disconnect(this._modelNameChanged);
+            (_a = this.current) === null || _a === void 0 ? void 0 : _a.nameChanged.disconnect(this._modelNameChanged);
             this._currentWidget.dispose();
         }
         // Create the toolbar registry.
@@ -259,7 +291,7 @@ export class MultiChatPanel extends PanelWithToolbar {
         this.addWidget(widget);
         this.update();
         this._currentWidget = widget;
-        this._currentWidget.nameChanged.connect(this._modelNameChanged);
+        (_b = this.current) === null || _b === void 0 ? void 0 : _b.nameChanged.connect(this._modelNameChanged);
         // Update selector to show current chat
         if (this._chatSelectorPopup) {
             this._chatSelectorPopup.setCurrentChat(name);

package/lib/widgets/placeholder.d.ts

@@ -0,0 +1,48 @@
+import { IRenderMime } from '@jupyterlab/rendermime';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { ISignal } from '@lumino/signaling';
+import React from 'react';
+/**
+ * The default placeholder widget.
+ */
+export declare class defaultPlaceholder extends ReactWidget {
+    constructor(options: Placeholder.IProps);
+    render(): React.JSX.Element;
+    private _props;
+}
+/**
+ * The placeholder namespace.
+ */
+export declare namespace Placeholder {
+    /**
+     * The options of the placeholder widget.
+     */
+    interface IProps {
+        /**
+         * The initial chat names.
+         */
+        chatNames: {
+            [name: string]: string;
+        };
+        /**
+         * A callback to open an existing chat by name.
+         *
+         * @param name - the display name of the chat to open.
+         */
+        open: (name: string) => Promise<void>;
+        /**
+         * A callback to create and open a new chat.
+         */
+        onCreate?: () => Promise<void>;
+        /**
+         * An optional signal emitting when the chat list changes.
+         */
+        chatNamesChanged?: ISignal<any, {
+            [name: string]: string;
+        }>;
+        /**
+         * An optional translation bundle.
+         */
+        trans?: IRenderMime.TranslationBundle;
+    }
+}

package/lib/widgets/placeholder.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { addIcon, ReactWidget, ToolbarButtonComponent } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+import { useTranslator } from '../context';
+/**
+ * The default placeholder widget.
+ */
+export class defaultPlaceholder extends ReactWidget {
+    constructor(options) {
+        super();
+        this._props = options;
+    }
+    render() {
+        return React.createElement(PlaceholderComponent, { ...this._props });
+    }
+}
+/**
+ * The default placeholder component.
+ */
+const PlaceholderComponent = (props) => {
+    var _a;
+    const trans = (_a = props.trans) !== null && _a !== void 0 ? _a : useTranslator();
+    const [chatNames, setChatNames] = useState(props.chatNames);
+    useEffect(() => {
+        if (!props.chatNamesChanged) {
+            return;
+        }
+        const onChanged = (_, names) => {
+            setChatNames(names);
+        };
+        props.chatNamesChanged.connect(onChanged);
+        return () => {
+            props.chatNamesChanged.disconnect(onChanged);
+        };
+    }, [props.chatNamesChanged]);
+    const names = Object.keys(chatNames).sort((a, b) => a.localeCompare(b));
+    return (React.createElement("div", { className: "jp-chat-placeholder" },
+        React.createElement("h3", null, trans.__('No chat opened')),
+        props.onCreate && (React.createElement("div", { className: "jp-chat-placeholder-hint" },
+            React.createElement(ToolbarButtonComponent, { label: trans.__('New chat'), icon: addIcon, onClick: props.onCreate, tooltip: trans.__('Create a new chat'), className: "jp-chat-add" }))),
+        names.length > 0 && (React.createElement("div", { className: "jp-chat-placeholder-list" },
+            React.createElement("p", null, trans.__('Open an existing chat:')),
+            names.map(name => (React.createElement("div", { key: name },
+                React.createElement("button", { className: "jp-chat-placeholder-chat-item", onClick: () => props.open(name) }, name))))))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -30,8 +30,8 @@
     "url": "https://github.com/jupyterlab/jupyter-chat.git"
   },
   "scripts": {
-    "build": "jlpm build:lib",
-    "build:prod": "jlpm clean && jlpm build:lib:prod",
+    "build": "echo 'Building @jupyter/chat' && jlpm build:lib",
+    "build:prod": "echo 'Building @jupyter/chat' && jlpm clean && jlpm build:lib:prod",
     "build:lib": "tsc --sourceMap",
     "build:lib:prod": "tsc",
     "clean": "jlpm clean:lib",

package/src/__tests__/chat-body-placeholder.spec.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { IChatBodyPlaceholderFactory } from '../tokens';
+import { IChatModel } from '../model';
+import { MockChatModel } from './mocks';
+
+describe('ChatBodyPlaceholder', () => {
+  let model: IChatModel;
+  let rmRegistry: RenderMimeRegistry;
+
+  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: IChatBodyPlaceholderFactory = {
+      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: IChatBodyPlaceholderFactory = {
+      create: jest.fn().mockReturnValue(null)
+    };
+
+    const sendSpy = jest.spyOn(model, 'sendMessage');
+
+    // Simulate what ChatBodyPlaceholder component does:
+    factory.create({ onSend: (body: string) => model.sendMessage({ body }) });
+
+    // Invoke the onSend passed to factory
+    const props = (factory.create as jest.Mock).mock
+      .calls[0][0] as IChatBodyPlaceholderFactory.IProps;
+    props.onSend('Hello world');
+
+    expect(sendSpy).toHaveBeenCalledWith({ body: 'Hello world' });
+  });
+
+  it('should not fail when factory returns null', () => {
+    const factory: IChatBodyPlaceholderFactory = {
+      create: jest.fn().mockReturnValue(null)
+    };
+
+    const result = factory.create({
+      onSend: (body: string) => model.sendMessage({ body })
+    });
+    expect(result).toBeNull();
+  });
+});

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

@@ -0,0 +1,135 @@
+/*
+ * 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 { IChatPlaceholderFactory } from '../tokens';
+import { MultiChatPanel } from '../widgets/multichat-panel';
+import { defaultPlaceholder, Placeholder } from '../widgets/placeholder';
+
+describe('MultiChatPanel', () => {
+  let rmRegistry: RenderMimeRegistry;
+
+  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: IChatPlaceholderFactory = {
+        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: IChatPlaceholderFactory = {
+        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: IChatPlaceholderFactory = {
+        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: IChatPlaceholderFactory = {
+        create: jest.fn().mockReturnValue(new Widget())
+      };
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        placeholderFactory: factory
+      });
+      const props = (factory.create as jest.Mock).mock
+        .calls[0][0] as Placeholder.IProps;
+      expect(props.chatNames).toEqual({});
+      panel.dispose();
+    });
+
+    it('should pass undefined onCreate when createModel is not provided', () => {
+      const factory: IChatPlaceholderFactory = {
+        create: jest.fn().mockReturnValue(new Widget())
+      };
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        placeholderFactory: factory
+      });
+      const props = (factory.create as jest.Mock).mock
+        .calls[0][0] as Placeholder.IProps;
+      expect(props.onCreate).toBeUndefined();
+      panel.dispose();
+    });
+
+    it('should pass onCreate when createModel is provided', () => {
+      const factory: IChatPlaceholderFactory = {
+        create: jest.fn().mockReturnValue(new Widget())
+      };
+      const createModel = jest.fn().mockResolvedValue({});
+      const panel = new MultiChatPanel({
+        rmRegistry,
+        placeholderFactory: factory,
+        createModel
+      });
+      const props = (factory.create as jest.Mock).mock
+        .calls[0][0] as Placeholder.IProps;
+      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: IChatPlaceholderFactory = {
+        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/src/components/chat.tsx

@@ -29,6 +29,7 @@ import {
   IMessagePreambleRegistry
 } from '../registers';
 import { ChatArea } from '../types';
+import { IChatBodyPlaceholderFactory } from '../tokens';
 
 export function ChatBody(props: Chat.IChatProps): JSX.Element {
   const { model } = props;
@@ -178,6 +179,11 @@ export 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.
      */