@jupyter/chat 0.25.0 → 0.25.1

package/lib/__tests__/chat-input.spec.d.ts

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

package/lib/__tests__/chat-input.spec.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+// React 18 asks test environments to declare themselves, otherwise every
+// `act` call warns.
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+import { ChatInput } from '../components/input/chat-input';
+import { ChatReactContext } from '../context';
+import { MockChatModel } from './mocks';
+const DEFAULT_PLACEHOLDER = 'Type a chat message, @ to mention...';
+describe('ChatInput placeholder', () => {
+    let container;
+    let root;
+    const render = (config) => {
+        const model = new MockChatModel({ config });
+        act(() => {
+            root.render(React.createElement(ChatReactContext.Provider, { value: { model, rmRegistry: {} } },
+                React.createElement(ChatInput, { model: model.input })));
+        });
+        return model;
+    };
+    const placeholder = () => container.querySelector('[role="combobox"]').getAttribute('placeholder');
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    });
+    it('should use the default placeholder when none is configured', () => {
+        render();
+        expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+    });
+    it('should use the configured placeholder', () => {
+        render({ inputPlaceholder: 'Ask the assistant' });
+        expect(placeholder()).toBe('Ask the assistant');
+    });
+    it('should use an empty configured placeholder as is', () => {
+        render({ inputPlaceholder: '' });
+        expect(placeholder()).toBe('');
+    });
+    it('should follow a later change of the configuration', () => {
+        const model = render();
+        act(() => {
+            model.config = { inputPlaceholder: 'Ask the assistant' };
+        });
+        expect(placeholder()).toBe('Ask the assistant');
+        // Unsetting it is the way back to the default, an empty string is not.
+        act(() => {
+            model.config = { inputPlaceholder: '' };
+        });
+        expect(placeholder()).toBe('');
+        act(() => {
+            model.config = { inputPlaceholder: undefined };
+        });
+        expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+    });
+    it('should keep the default placeholder on an unrelated change', () => {
+        const model = render();
+        act(() => {
+            model.config = { sendWithShiftEnter: true };
+        });
+        expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+    });
+});

package/lib/__tests__/model.spec.js

@@ -122,6 +122,18 @@ describe('test chat model', () => {
             const model = new MockChatModel({ config: { sendWithShiftEnter: true } });
             expect(model.config.sendWithShiftEnter).toBeTruthy();
         });
+        it('should forward the input placeholder to the input model', () => {
+            const model = new MockChatModel({
+                config: { inputPlaceholder: 'Ask the assistant' }
+            });
+            expect(model.input.config.inputPlaceholder).toBe('Ask the assistant');
+        });
+        it('should forward a later input placeholder change to the input model', () => {
+            const model = new MockChatModel();
+            expect(model.input.config.inputPlaceholder).toBeUndefined();
+            model.config = { inputPlaceholder: 'Ask the assistant' };
+            expect(model.input.config.inputPlaceholder).toBe('Ask the assistant');
+        });
     });
     describe('awareness', () => {
         it('should surface the model awareness on the context', () => {

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

@@ -22,6 +22,7 @@ export function ChatInput(props) {
     const inputRef = useRef();
     const chatCommands = useChatCommands(model, chatCommandRegistry);
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+    const [placeholder, setPlaceholder] = useState(model.config.inputPlaceholder);
     const [attachments, setAttachments] = useState(model.attachments);
     const [toolbarElements, setToolbarElements] = useState([]);
     /**
@@ -47,6 +48,7 @@ export function ChatInput(props) {
         const configChanged = (_, config) => {
             var _a;
             setSendWithShiftEnter((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
+            setPlaceholder(config.inputPlaceholder);
         };
         model.configChanged.connect(configChanged);
         const focusInputElement = () => {
@@ -80,6 +82,9 @@ export function ChatInput(props) {
         };
     }, [inputToolbarRegistry]);
     const inputExists = !!input.trim();
+    // The default is resolved here rather than in `IConfig`, so that it can be
+    // translated. Only `undefined` falls back; an empty string is a valid choice.
+    const inputPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : trans.__('Type a chat message, @ to mention...');
     /**
      * `handleKeyDown()`: callback invoked when the user presses any key in the
      * `TextField` component. This is used to send the message when a user presses
@@ -163,7 +168,7 @@ export function ChatInput(props) {
                             padding: 0
                         }
                     }
-                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: trans.__('Type a chat message, @ to mention...'), inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
+                }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "standard", className: INPUT_TEXTFIELD_CLASS, multiline: true, maxRows: 10, onKeyDown: handleKeyDown, placeholder: inputPlaceholder, inputRef: inputRef, onSelect: () => { var _a, _b; return (model.cursorIndex = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null); }, sx: {
                         padding: 1.5,
                         margin: 0,
                         boxSizing: 'border-box',

package/lib/components/messages/message.js

@@ -77,7 +77,8 @@ export function ChatMessageBase(props) {
             selectionWatcher: model.selectionWatcher,
             documentManager: model.documentManager,
             config: {
-                sendWithShiftEnter: model.config.sendWithShiftEnter
+                sendWithShiftEnter: model.config.sendWithShiftEnter,
+                inputPlaceholder: model.config.inputPlaceholder
             },
             attachments: structuredClone((_b = message.attachments) !== null && _b !== void 0 ? _b : []),
             mentions: message.mentions

package/lib/components/messages/welcome.js

@@ -15,7 +15,7 @@ const MD_MIME_TYPE = 'text/markdown';
  */
 export function WelcomeMessage(props) {
     const { rmRegistry } = useChatContext();
-    const content = props.content + '\n----\n';
+    const content = props.content + '\n\n---\n';
     // ref that tracks the content container to store the rendermime node in
     const renderingContainer = useRef(null);
     /**

package/lib/input-model.d.ts

@@ -385,5 +385,11 @@ export declare namespace InputModel {
          * Whether to display the 'send with selection' button.
          */
         sendWithSelection?: boolean;
+        /**
+         * The placeholder to display in the empty chat input.
+         * The default placeholder is used if undefined, an empty string displays no
+         * placeholder at all.
+         */
+        inputPlaceholder?: string;
     }
 }

package/lib/model.js

@@ -54,7 +54,8 @@ export class AbstractChatModel {
             selectionWatcher: options.selectionWatcher,
             documentManager: options.documentManager,
             config: {
-                sendWithShiftEnter: config.sendWithShiftEnter
+                sendWithShiftEnter: config.sendWithShiftEnter,
+                inputPlaceholder: config.inputPlaceholder
             },
             onSend: this.sendMessage.bind(this)
         });

package/lib/types.d.ts

@@ -57,6 +57,12 @@ export interface IConfig {
      * Whether to display the 'send with selection' button.
      */
     sendWithSelection?: boolean;
+    /**
+     * The placeholder to display in the empty chat input.
+     * The default placeholder is used if undefined, an empty string displays no
+     * placeholder at all.
+     */
+    inputPlaceholder?: string;
 }
 /**
  * Mime model body type, a partial mime bundle model containing at least the data.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/__tests__/chat-input.spec.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import React, { act } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+
+// React 18 asks test environments to declare themselves, otherwise every
+// `act` call warns.
+(
+  globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+import { ChatInput } from '../components/input/chat-input';
+import { ChatReactContext } from '../context';
+import { IConfig } from '../types';
+import { MockChatModel } from './mocks';
+
+const DEFAULT_PLACEHOLDER = 'Type a chat message, @ to mention...';
+
+describe('ChatInput placeholder', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  const render = (config?: IConfig): MockChatModel => {
+    const model = new MockChatModel({ config });
+    act(() => {
+      root.render(
+        <ChatReactContext.Provider
+          value={{ model, rmRegistry: {} as IRenderMimeRegistry }}
+        >
+          <ChatInput model={model.input} />
+        </ChatReactContext.Provider>
+      );
+    });
+    return model;
+  };
+
+  const placeholder = (): string | null =>
+    container.querySelector('[role="combobox"]')!.getAttribute('placeholder');
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('should use the default placeholder when none is configured', () => {
+    render();
+    expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+  });
+
+  it('should use the configured placeholder', () => {
+    render({ inputPlaceholder: 'Ask the assistant' });
+    expect(placeholder()).toBe('Ask the assistant');
+  });
+
+  it('should use an empty configured placeholder as is', () => {
+    render({ inputPlaceholder: '' });
+    expect(placeholder()).toBe('');
+  });
+
+  it('should follow a later change of the configuration', () => {
+    const model = render();
+
+    act(() => {
+      model.config = { inputPlaceholder: 'Ask the assistant' };
+    });
+    expect(placeholder()).toBe('Ask the assistant');
+
+    // Unsetting it is the way back to the default, an empty string is not.
+    act(() => {
+      model.config = { inputPlaceholder: '' };
+    });
+    expect(placeholder()).toBe('');
+
+    act(() => {
+      model.config = { inputPlaceholder: undefined };
+    });
+    expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+  });
+
+  it('should keep the default placeholder on an unrelated change', () => {
+    const model = render();
+
+    act(() => {
+      model.config = { sendWithShiftEnter: true };
+    });
+    expect(placeholder()).toBe(DEFAULT_PLACEHOLDER);
+  });
+});

package/src/__tests__/model.spec.ts

@@ -149,6 +149,21 @@ describe('test chat model', () => {
       const model = new MockChatModel({ config: { sendWithShiftEnter: true } });
       expect(model.config.sendWithShiftEnter).toBeTruthy();
     });
+
+    it('should forward the input placeholder to the input model', () => {
+      const model = new MockChatModel({
+        config: { inputPlaceholder: 'Ask the assistant' }
+      });
+      expect(model.input.config.inputPlaceholder).toBe('Ask the assistant');
+    });
+
+    it('should forward a later input placeholder change to the input model', () => {
+      const model = new MockChatModel();
+      expect(model.input.config.inputPlaceholder).toBeUndefined();
+
+      model.config = { inputPlaceholder: 'Ask the assistant' };
+      expect(model.input.config.inputPlaceholder).toBe('Ask the assistant');
+    });
   });
 
   describe('awareness', () => {

package/src/components/input/chat-input.tsx

@@ -40,6 +40,9 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
     model.config.sendWithShiftEnter ?? false
   );
+  const [placeholder, setPlaceholder] = useState<string | undefined>(
+    model.config.inputPlaceholder
+  );
   const [attachments, setAttachments] = useState<IAttachment[]>(
     model.attachments
   );
@@ -70,6 +73,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
 
     const configChanged = (_: IInputModel, config: InputModel.IConfig) => {
       setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
+      setPlaceholder(config.inputPlaceholder);
     };
     model.configChanged.connect(configChanged);
 
@@ -110,6 +114,11 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
 
   const inputExists = !!input.trim();
 
+  // The default is resolved here rather than in `IConfig`, so that it can be
+  // translated. Only `undefined` falls back; an empty string is a valid choice.
+  const inputPlaceholder =
+    placeholder ?? trans.__('Type a chat message, @ to mention...');
+
   /**
    * `handleKeyDown()`: callback invoked when the user presses any key in the
    * `TextField` component. This is used to send the message when a user presses
@@ -231,7 +240,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
               multiline
               maxRows={10}
               onKeyDown={handleKeyDown}
-              placeholder={trans.__('Type a chat message, @ to mention...')}
+              placeholder={inputPlaceholder}
               inputRef={inputRef}
               onSelect={() =>
                 (model.cursorIndex = inputRef.current?.selectionStart ?? null)

package/src/components/messages/message.tsx

@@ -104,7 +104,8 @@ export function ChatMessageBase(props: ChatMessageProps): JSX.Element {
       selectionWatcher: model.selectionWatcher,
       documentManager: model.documentManager,
       config: {
-        sendWithShiftEnter: model.config.sendWithShiftEnter
+        sendWithShiftEnter: model.config.sendWithShiftEnter,
+        inputPlaceholder: model.config.inputPlaceholder
       },
       attachments: structuredClone(message.attachments ?? []),
       mentions: message.mentions

package/src/components/messages/welcome.tsx

@@ -29,7 +29,7 @@ export interface IWelcomeMessageProps {
  */
 export function WelcomeMessage(props: IWelcomeMessageProps): JSX.Element {
   const { rmRegistry } = useChatContext();
-  const content = props.content + '\n----\n';
+  const content = props.content + '\n\n---\n';
 
   // ref that tracks the content container to store the rendermime node in
   const renderingContainer = useRef<HTMLDivElement | null>(null);

package/src/input-model.ts

@@ -685,6 +685,12 @@ export namespace InputModel {
      * Whether to display the 'send with selection' button.
      */
     sendWithSelection?: boolean;
+    /**
+     * The placeholder to display in the empty chat input.
+     * The default placeholder is used if undefined, an empty string displays no
+     * placeholder at all.
+     */
+    inputPlaceholder?: string;
   }
 }
 

package/src/model.ts

@@ -301,7 +301,8 @@ export abstract class AbstractChatModel implements IChatModel {
       selectionWatcher: options.selectionWatcher,
       documentManager: options.documentManager,
       config: {
-        sendWithShiftEnter: config.sendWithShiftEnter
+        sendWithShiftEnter: config.sendWithShiftEnter,
+        inputPlaceholder: config.inputPlaceholder
       },
       onSend: this.sendMessage.bind(this)
     });

package/src/types.ts

@@ -64,6 +64,12 @@ export interface IConfig {
    * Whether to display the 'send with selection' button.
    */
   sendWithSelection?: boolean;
+  /**
+   * The placeholder to display in the empty chat input.
+   * The default placeholder is used if undefined, an empty string displays no
+   * placeholder at all.
+   */
+  inputPlaceholder?: string;
 }
 
 /**

package/style/chat.css

@@ -32,6 +32,7 @@
   padding: 0 1em;
 }
 
+.jp-ThemedContainer .jp-chat-welcome-message .jp-RenderedHTMLCommon,
 .jp-ThemedContainer .jp-chat-rendered-message .jp-RenderedHTMLCommon {
   padding-right: 0;
 }