@jupyter/chat 0.6.1 → 0.7.0

package/lib/components/chat-input.js

@@ -49,6 +49,7 @@ export function ChatInput(props) {
     const [highlighted, setHighlighted] = useState(false);
     // controls whether the slash command autocomplete is open
     const [open, setOpen] = useState(false);
+    const inputExists = !!input.trim();
     /**
      * Effect: fetch the list of available autocomplete commands.
      */
@@ -96,14 +97,19 @@ export function ChatInput(props) {
         if (event.key !== 'Enter') {
             return;
         }
-        // do not send the message if the user was selecting a suggested command from the
+        // Do not send the message if the user was selecting a suggested command from the
         // Autocomplete component.
         if (highlighted) {
             return;
         }
-        if (event.key === 'Enter' &&
-            ((sendWithShiftEnter && event.shiftKey) ||
-                (!sendWithShiftEnter && !event.shiftKey))) {
+        // Do not send empty messages, and avoid adding new line in empty message.
+        if (!inputExists) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        if ((sendWithShiftEnter && event.shiftKey) ||
+            (!sendWithShiftEnter && !event.shiftKey)) {
             onSend();
             event.stopPropagation();
             event.preventDefault();
@@ -167,8 +173,8 @@ ${selection.source}
             }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, InputProps: {
                     ...params.InputProps,
                     endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        props.onCancel && (React.createElement(CancelButton, { inputExists: input.length > 0, onCancel: onCancel })),
-                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: input.length > 0, onSend: onSend, hideIncludeSelection: hideIncludeSelection, hasButtonOnLeft: !!props.onCancel })))
+                        props.onCancel && React.createElement(CancelButton, { onCancel: onCancel }),
+                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: inputExists, onSend: onSend, hideIncludeSelection: hideIncludeSelection, hasButtonOnLeft: !!props.onCancel })))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
                 }, helperText: input.length > 2 ? helperText : ' ' })), ...(_d = autocompletion.current) === null || _d === void 0 ? void 0 : _d.props, inputValue: input, onInputChange: (_, newValue) => {

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

@@ -1,4 +1,5 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { PromiseDelegate } from '@lumino/coreutils';
 import type { SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { IChatModel } from '../model';
@@ -26,9 +27,9 @@ type ChatMessageHeaderProps = {
  */
 export declare function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element;
 /**
- * The message component props.
+ * The message component body.
  */
-type ChatMessageProps = BaseMessageProps & {
+export declare const ChatMessage: React.ForwardRefExoticComponent<BaseMessageProps & {
     /**
      * The message to display.
      */
@@ -38,14 +39,10 @@ type ChatMessageProps = BaseMessageProps & {
      */
     index: number;
     /**
-     * The intersection observer for all the messages.
+     * The promise to resolve when the message is rendered.
      */
-    observer: IntersectionObserver | null;
-};
-/**
- * The message component body.
- */
-export declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+    renderedPromise: PromiseDelegate<void>;
+} & React.RefAttributes<HTMLDivElement>>;
 /**
  * The writers component props.
  */
@@ -67,6 +64,10 @@ type NavigationProps = BaseMessageProps & {
      * The reference to the messages container.
      */
     refMsgBox: React.RefObject<HTMLDivElement>;
+    /**
+     * Whether all the messages has been rendered once on first display.
+     */
+    allRendered: boolean;
 };
 /**
  * The navigation component, to navigate to unread messages.

package/lib/components/chat-messages.js

@@ -4,11 +4,12 @@
  */
 import { Button } from '@jupyter/react-components';
 import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Avatar as MuiAvatar, Box, Typography } from '@mui/material';
 import clsx from 'clsx';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, forwardRef } from 'react';
 import { ChatInput } from './chat-input';
-import { RendermimeMarkdown } from './rendermime-markdown';
+import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
@@ -27,10 +28,11 @@ export function ChatMessages(props) {
     const { model } = props;
     const [messages, setMessages] = useState(model.messages);
     const refMsgBox = useRef(null);
-    const inViewport = useRef([]);
     const [currentWriters, setCurrentWriters] = useState([]);
-    // The intersection observer that listen to all the message visibility.
-    const observerRef = useRef(new IntersectionObserver(viewportChange));
+    const [allRendered, setAllRendered] = useState(false);
+    // The list of message DOM and their rendered promises.
+    const listRef = useRef([]);
+    const renderedPromise = useRef([]);
     /**
      * Effect: fetch history and config on initial render
      */
@@ -67,51 +69,76 @@ export function ChatMessages(props) {
         };
     }, [model]);
     /**
-     * Function called when a message enter or leave the viewport.
+     * Observe the messages to update the current viewport and the unread messages.
      */
-    function viewportChange(entries) {
-        const unread = [...model.unreadMessages];
-        let unreadModified = false;
-        entries.forEach(entry => {
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
             var _a;
-            const index = parseInt((_a = entry.target.getAttribute('data-index')) !== null && _a !== void 0 ? _a : '');
-            if (!isNaN(index)) {
-                if (unread.length) {
-                    const unreadIdx = unread.indexOf(index);
-                    if (unreadIdx !== -1 && entry.isIntersecting) {
-                        unread.splice(unreadIdx, 1);
-                        unreadModified = true;
+            // Used on first rendering, to ensure all the message as been rendered once.
+            if (!allRendered) {
+                Promise.all(renderedPromise.current.map(p => p.promise)).then(() => {
+                    setAllRendered(true);
+                });
+            }
+            const unread = [...model.unreadMessages];
+            let unreadModified = false;
+            const inViewport = [...((_a = model.messagesInViewport) !== null && _a !== void 0 ? _a : [])];
+            entries.forEach(entry => {
+                var _a;
+                const index = parseInt((_a = entry.target.getAttribute('data-index')) !== null && _a !== void 0 ? _a : '');
+                if (!isNaN(index)) {
+                    const viewportIdx = inViewport.indexOf(index);
+                    if (!entry.isIntersecting && viewportIdx !== -1) {
+                        inViewport.splice(viewportIdx, 1);
+                    }
+                    else if (entry.isIntersecting && viewportIdx === -1) {
+                        inViewport.push(index);
+                    }
+                    if (unread.length) {
+                        const unreadIdx = unread.indexOf(index);
+                        if (unreadIdx !== -1 && entry.isIntersecting) {
+                            unread.splice(unreadIdx, 1);
+                            unreadModified = true;
+                        }
                     }
                 }
-                const viewportIdx = inViewport.current.indexOf(index);
-                if (!entry.isIntersecting && viewportIdx !== -1) {
-                    inViewport.current.splice(viewportIdx, 1);
-                }
-                else if (entry.isIntersecting && viewportIdx === -1) {
-                    inViewport.current.push(index);
-                }
+            });
+            props.model.messagesInViewport = inViewport;
+            // Ensure that all messages are rendered before updating unread messages, otherwise
+            // it can lead to wrong assumption , because more message are in the viewport
+            // before they are rendered.
+            if (allRendered && unreadModified) {
+                model.unreadMessages = unread;
+            }
+        });
+        /**
+         * Observe the messages.
+         */
+        listRef.current.forEach(item => {
+            if (item) {
+                observer.observe(item);
             }
         });
-        props.model.messagesInViewport = inViewport.current;
-        if (unreadModified) {
-            props.model.unreadMessages = unread;
-        }
         return () => {
-            var _a;
-            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            listRef.current.forEach(item => {
+                if (item) {
+                    observer.unobserve(item);
+                }
+            });
         };
-    }
+    }, [messages, allRendered]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
             React.createElement(Box, { ref: refMsgBox, className: clsx(MESSAGES_BOX_CLASS) }, messages.map((message, i) => {
+                renderedPromise.current[i] = new PromiseDelegate();
                 return (
                 // extra div needed to ensure each bubble is on a new line
                 React.createElement(Box, { key: i, className: clsx(MESSAGE_CLASS, message.stacked ? MESSAGE_STACKED_CLASS : '') },
                     React.createElement(ChatMessageHeader, { message: message }),
-                    React.createElement(ChatMessage, { ...props, message: message, observer: observerRef.current, index: i })));
+                    React.createElement(ChatMessage, { ...props, message: message, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) })));
             })),
             React.createElement(Writers, { writers: currentWriters })),
-        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox })));
+        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
 }
 /**
  * The message header component.
@@ -193,28 +220,12 @@ export function ChatMessageHeader(props) {
 /**
  * The message component body.
  */
-export function ChatMessage(props) {
+export const ChatMessage = forwardRef((props, ref) => {
     const { message, model, rmRegistry } = props;
-    const elementRef = useRef(null);
     const [edit, setEdit] = useState(false);
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
     const [canDelete, setCanDelete] = useState(false);
-    // Add the current message to the observer, to actualize viewport and unread messages.
-    useEffect(() => {
-        var _a;
-        if (elementRef.current === null) {
-            return;
-        }
-        // If the observer is defined, let's observe the message.
-        (_a = props.observer) === null || _a === void 0 ? void 0 : _a.observe(elementRef.current);
-        return () => {
-            var _a;
-            if (elementRef.current !== null) {
-                (_a = props.observer) === null || _a === void 0 ? void 0 : _a.unobserve(elementRef.current);
-            }
-        };
-    }, [model]);
     // Look if the message can be deleted or edited.
     useEffect(() => {
         var _a;
@@ -253,8 +264,8 @@ export function ChatMessage(props) {
         model.deleteMessage(id);
     };
     // Empty if the message has been deleted.
-    return deleted ? (React.createElement("div", { ref: elementRef, "data-index": props.index })) : (React.createElement("div", { ref: elementRef, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model, hideIncludeSelection: true })) : (React.createElement(RendermimeMarkdown, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined }))));
-}
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index }, edit && canEdit ? (React.createElement(ChatInput, { value: message.body, onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: model, hideIncludeSelection: true })) : (React.createElement(MarkdownRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise }))));
+});
 /**
  * The writers component, displaying the current writers.
  */
@@ -282,14 +293,20 @@ export function Navigation(props) {
     const [lastInViewport, setLastInViewport] = useState(true);
     const [unreadBefore, setUnreadBefore] = useState(null);
     const [unreadAfter, setUnreadAfter] = useState(null);
-    const gotoMessage = (msgIdx) => {
+    const gotoMessage = (msgIdx, alignToTop = true) => {
         var _a, _b;
-        (_b = (_a = props.refMsgBox.current) === null || _a === void 0 ? void 0 : _a.children.item(msgIdx)) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+        (_b = (_a = props.refMsgBox.current) === null || _a === void 0 ? void 0 : _a.children.item(msgIdx)) === null || _b === void 0 ? void 0 : _b.scrollIntoView(alignToTop);
     };
     // Listen for change in unread messages, and find the first unread message before or
     // after the current viewport, to display navigation buttons.
     useEffect(() => {
         var _a;
+        // Do not attempt to display navigation until messages are rendered, it can lead to
+        // wrong assumption, because more messages are in the viewport before they are
+        // rendered.
+        if (!props.allRendered) {
+            return;
+        }
         const unreadChanged = (model, unreadIndexes) => {
             const viewport = model.messagesInViewport;
             if (!viewport) {
@@ -323,18 +340,13 @@ export function Navigation(props) {
         };
         (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.connect(unreadChanged);
         unreadChanged(model, model.unreadMessages);
-        // Move to first the unread message or to last message on first rendering.
-        if (model.unreadMessages.length) {
-            gotoMessage(Math.min(...model.unreadMessages));
-        }
-        else {
-            gotoMessage(model.messages.length - 1);
-        }
+        // Move to the last the message after all the messages have been first rendered.
+        gotoMessage(model.messages.length - 1, false);
         return () => {
             var _a;
             (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.disconnect(unreadChanged);
         };
-    }, [model]);
+    }, [model, props.allRendered]);
     // Listen for change in the viewport, to add a navigation button if the last is not
     // in viewport.
     useEffect(() => {
@@ -352,7 +364,9 @@ export function Navigation(props) {
     return (React.createElement(React.Fragment, null,
         unreadBefore !== null && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${NAVIGATION_UNREAD_CLASS} ${NAVIGATION_TOP_CLASS}`, onClick: () => gotoMessage(unreadBefore), title: 'Go to unread messages' },
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') }))),
-        (unreadAfter !== null || !lastInViewport) && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`, onClick: () => gotoMessage(unreadAfter !== null ? unreadAfter : model.messages.length - 1), title: unreadAfter !== null
+        (unreadAfter !== null || !lastInViewport) && (React.createElement(Button, { className: `${NAVIGATION_BUTTON_CLASS} ${unreadAfter !== null ? NAVIGATION_UNREAD_CLASS : ''} ${NAVIGATION_BOTTOM_CLASS}`, onClick: unreadAfter === null
+                ? () => gotoMessage(model.messages.length - 1, false)
+                : () => gotoMessage(unreadAfter), title: unreadAfter !== null
                 ? 'Go to unread messages'
                 : 'Go to last message' },
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));

package/lib/components/chat.js

@@ -33,9 +33,12 @@ export function Chat(props) {
     const [view, setView] = useState(props.chatView || Chat.View.chat);
     return (React.createElement(JlThemeProvider, { themeManager: (_a = props.themeManager) !== null && _a !== void 0 ? _a : null },
         React.createElement(Box
-        // root box should not include padding as it offsets the vertical
-        // scrollbar to the left
+        // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=4.3.0.
+        // See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling
         , { 
+            // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=4.3.0.
+            // See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling
+            className: "jp-ThemedContainer", 
             // root box should not include padding as it offsets the vertical
             // scrollbar to the left
             sx: {

package/lib/components/code-blocks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './code-toolbar';
+export * from './copy-button';

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './code-toolbar';
+export * from './copy-button';

package/lib/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from './chat';
+export * from './chat-input';
+export * from './chat-messages';
+export * from './code-blocks';
+export * from './input';
+export * from './jl-theme-provider';
+export * from './markdown-renderer';
+export * from './mui-extras';
+export * from './scroll-container';
+export * from './toolbar';

package/lib/components/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './chat';
+export * from './chat-input';
+export * from './chat-messages';
+export * from './code-blocks';
+export * from './input';
+export * from './jl-theme-provider';
+export * from './markdown-renderer';
+export * from './mui-extras';
+export * from './scroll-container';
+export * from './toolbar';

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

@@ -3,7 +3,6 @@
  * The cancel button props.
  */
 export type CancelButtonProps = {
-    inputExists: boolean;
     onCancel: () => void;
 };
 /**

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

@@ -11,8 +11,7 @@ const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
  */
 export function CancelButton(props) {
     const tooltip = 'Cancel edition';
-    const disabled = !props.inputExists;
-    return (React.createElement(TooltippedButton, { onClick: props.onCancel, disabled: disabled, tooltip: tooltip, buttonProps: {
+    return (React.createElement(TooltippedButton, { onClick: props.onCancel, tooltip: tooltip, buttonProps: {
             size: 'small',
             variant: 'contained',
             title: tooltip,

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

@@ -0,0 +1,2 @@
+export * from './cancel-button';
+export * from './send-button';

package/lib/components/input/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './cancel-button';
+export * from './send-button';

package/lib/components/markdown-renderer.d.ts

@@ -0,0 +1,37 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { PromiseDelegate } from '@lumino/coreutils';
+import React from 'react';
+import { IChatModel } from '../model';
+type MarkdownRendererProps = {
+    /**
+     * The string to render.
+     */
+    markdownStr: string;
+    /**
+     * The rendermime registry.
+     */
+    rmRegistry: IRenderMimeRegistry;
+    /**
+     * The model of the chat.
+     */
+    model: IChatModel;
+    /**
+     * The promise to resolve when the message is rendered.
+     */
+    rendered: PromiseDelegate<void>;
+    /**
+     * Whether to append the content to the existing content or not.
+     */
+    appendContent?: boolean;
+    /**
+     * The function to call to edit a message.
+     */
+    edit?: () => void;
+    /**
+     * the function to call to delete a message.
+     */
+    delete?: () => void;
+};
+declare function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element;
+export declare const MarkdownRenderer: React.MemoExoticComponent<typeof MarkdownRendererBase>;
+export {};

package/lib/components/{rendermime-markdown.js → markdown-renderer.js}

@@ -7,7 +7,7 @@ import { createPortal } from 'react-dom';
 import { CodeToolbar } from './code-blocks/code-toolbar';
 import { MessageToolbar } from './toolbar';
 const MD_MIME_TYPE = 'text/markdown';
-const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
+const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
 /**
  * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
  * after the initial MarkDown render. For example, this function takes '\(` and
@@ -18,12 +18,12 @@ const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
  */
 function escapeLatexDelimiters(text) {
     return text
-        .replace('\\(/g', '\\\\(')
-        .replace('\\)/g', '\\\\)')
-        .replace('\\[/g', '\\\\[')
-        .replace('\\]/g', '\\\\]');
+        .replace(/\\\(/g, '\\\\(')
+        .replace(/\\\)/g, '\\\\)')
+        .replace(/\\\[/g, '\\\\[')
+        .replace(/\\\]/g, '\\\\]');
 }
-function RendermimeMarkdownBase(props) {
+function MarkdownRendererBase(props) {
     const appendContent = props.appendContent || false;
     const [renderedContent, setRenderedContent] = useState(null);
     // each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
@@ -59,10 +59,12 @@ function RendermimeMarkdownBase(props) {
             });
             setCodeToolbarDefns(newCodeToolbarDefns);
             setRenderedContent(renderer.node);
+            // Resolve the rendered promise.
+            props.rendered.resolve();
         };
         renderContent();
     }, [props.markdownStr, props.rmRegistry]);
-    return (React.createElement("div", { className: RENDERMIME_MD_CLASS },
+    return (React.createElement("div", { className: MD_RENDERED_CLASS },
         renderedContent &&
             (appendContent ? (React.createElement("div", { ref: node => node && node.appendChild(renderedContent) })) : (React.createElement("div", { ref: node => node && node.replaceChildren(renderedContent) }))),
         React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete }),
@@ -74,4 +76,4 @@ function RendermimeMarkdownBase(props) {
             return createPortal(React.createElement(CodeToolbar, { ...codeToolbarProps }), codeToolbarRoot);
         })));
 }
-export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);
+export const MarkdownRenderer = React.memo(MarkdownRendererBase);

package/lib/components/mui-extras/index.d.ts

@@ -0,0 +1,3 @@
+export * from './contrasting-tooltip';
+export * from './tooltipped-button';
+export * from './tooltipped-icon-button';

package/lib/components/mui-extras/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './contrasting-tooltip';
+export * from './tooltipped-button';
+export * from './tooltipped-icon-button';

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './active-cell-manager';
+export * from './components';
 export * from './icons';
 export * from './model';
 export * from './registry';

package/lib/index.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './active-cell-manager';
+export * from './components';
 export * from './icons';
 export * from './model';
 export * from './registry';

package/lib/model.d.ts

@@ -301,6 +301,10 @@ export declare namespace ChatModel {
      * The instantiation options for a ChatModel.
      */
     interface IOptions {
+        /**
+         * The id of the chat.
+         */
+        id?: string;
         /**
          * Initial config for the chat widget.
          */

package/lib/model.js

@@ -26,6 +26,9 @@ export class ChatModel {
         this._viewportChanged = new Signal(this);
         this._writersChanged = new Signal(this);
         this._focusInputSignal = new Signal(this);
+        if (options.id) {
+            this.id = options.id;
+        }
         const config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
         // Stack consecutive messages from the same user by default.
         this._config = {

package/lib/types.d.ts

@@ -17,10 +17,6 @@ export interface IConfig {
      * Whether to send a message via Shift-Enter instead of Enter.
      */
     sendWithShiftEnter?: boolean;
-    /**
-     * Last read message (no use yet).
-     */
-    lastRead?: number;
     /**
      * Whether to stack consecutive messages from same user.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -62,6 +62,7 @@
     "@jupyterlab/rendermime": "^4.2.0",
     "@jupyterlab/ui-components": "^4.2.0",
     "@lumino/commands": "^2.0.0",
+    "@lumino/coreutils": "^2.0.0",
     "@lumino/disposable": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
     "@mui/icons-material": "^5.11.0",

package/src/components/chat-input.tsx

@@ -78,6 +78,8 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   // controls whether the slash command autocomplete is open
   const [open, setOpen] = useState<boolean>(false);
 
+  const inputExists = !!input.trim();
+
   /**
    * Effect: fetch the list of available autocomplete commands.
    */
@@ -130,16 +132,22 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
       return;
     }
 
-    // do not send the message if the user was selecting a suggested command from the
+    // Do not send the message if the user was selecting a suggested command from the
     // Autocomplete component.
     if (highlighted) {
       return;
     }
 
+    // Do not send empty messages, and avoid adding new line in empty message.
+    if (!inputExists) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
     if (
-      event.key === 'Enter' &&
-      ((sendWithShiftEnter && event.shiftKey) ||
-        (!sendWithShiftEnter && !event.shiftKey))
+      (sendWithShiftEnter && event.shiftKey) ||
+      (!sendWithShiftEnter && !event.shiftKey)
     ) {
       onSend();
       event.stopPropagation();
@@ -224,16 +232,11 @@ ${selection.source}
               ...params.InputProps,
               endAdornment: (
                 <InputAdornment position="end">
-                  {props.onCancel && (
-                    <CancelButton
-                      inputExists={input.length > 0}
-                      onCancel={onCancel}
-                    />
-                  )}
+                  {props.onCancel && <CancelButton onCancel={onCancel} />}
                   <SendButton
                     model={model}
                     sendWithShiftEnter={sendWithShiftEnter}
-                    inputExists={input.length > 0}
+                    inputExists={inputExists}
                     onSend={onSend}
                     hideIncludeSelection={hideIncludeSelection}
                     hasButtonOnLeft={!!props.onCancel}