@jupyter/chat 0.13.0 → 0.15.0

package/lib/components/messages/message.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { forwardRef, useEffect, useState } from 'react';
+import { MessageRenderer } from './message-renderer';
+import { AttachmentPreviewList } from '../attachments';
+import { ChatInput } from '../input';
+import { InputModel } from '../../input-model';
+import { replaceSpanToMention } from '../../utils';
+/**
+ * The message component body.
+ */
+export const ChatMessage = forwardRef((props, ref) => {
+    const { message, model, rmRegistry } = props;
+    const [edit, setEdit] = useState(false);
+    const [deleted, setDeleted] = useState(false);
+    const [canEdit, setCanEdit] = useState(false);
+    const [canDelete, setCanDelete] = useState(false);
+    // Look if the message can be deleted or edited.
+    useEffect(() => {
+        var _a;
+        // Init canDelete and canEdit state.
+        setDeleted((_a = message.deleted) !== null && _a !== void 0 ? _a : false);
+        if (model.user !== undefined && !message.deleted) {
+            if (model.user.username === message.sender.username) {
+                setCanEdit(model.updateMessage !== undefined);
+                setCanDelete(model.deleteMessage !== undefined);
+                return;
+            }
+            if (message.sender.bot) {
+                setCanDelete(model.deleteMessage !== undefined);
+            }
+        }
+        else {
+            setCanEdit(false);
+            setCanDelete(false);
+        }
+    }, [model, message]);
+    // Create an input model only if the message is edited.
+    const startEdition = () => {
+        var _a;
+        if (!canEdit) {
+            return;
+        }
+        let body = message.body;
+        (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
+            body = replaceSpanToMention(body, user);
+        });
+        const inputModel = new InputModel({
+            chatContext: model.createChatContext(),
+            onSend: (input, model) => updateMessage(message.id, input, model),
+            onCancel: () => cancelEdition(),
+            value: body,
+            activeCellManager: model.activeCellManager,
+            selectionWatcher: model.selectionWatcher,
+            documentManager: model.documentManager,
+            config: {
+                sendWithShiftEnter: model.config.sendWithShiftEnter
+            },
+            attachments: message.attachments,
+            mentions: message.mentions
+        });
+        model.addEditionModel(message.id, inputModel);
+        setEdit(true);
+    };
+    // Cancel the current edition of the message.
+    const cancelEdition = () => {
+        var _a;
+        (_a = model.getEditionModel(message.id)) === null || _a === void 0 ? void 0 : _a.dispose();
+        setEdit(false);
+    };
+    // Update the content of the message.
+    const updateMessage = (id, input, inputModel) => {
+        var _a;
+        if (!canEdit || !inputModel) {
+            return;
+        }
+        // Update the message
+        const updatedMessage = { ...message };
+        updatedMessage.body = input;
+        updatedMessage.attachments = inputModel.attachments;
+        updatedMessage.mentions = inputModel.mentions;
+        model.updateMessage(id, updatedMessage);
+        (_a = model.getEditionModel(message.id)) === null || _a === void 0 ? void 0 : _a.dispose();
+        setEdit(false);
+    };
+    // Delete the message.
+    const deleteMessage = (id) => {
+        if (!canDelete) {
+            return;
+        }
+        model.deleteMessage(id);
+    };
+    // Empty if the message has been deleted.
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
+        edit && canEdit && model.getEditionModel(message.id) ? (React.createElement(ChatInput, { onCancel: () => cancelEdition(), model: model.getEditionModel(message.id), chatCommandRegistry: props.chatCommandRegistry, toolbarRegistry: props.inputToolbarRegistry })) : (React.createElement(MessageRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? startEdition : undefined, delete: canDelete ? () => deleteMessage(message.id) : undefined, rendered: props.renderedPromise })),
+        message.attachments && !edit && (
+        // Display the attachments only if message is not edited, otherwise the
+        // input component display them.
+        React.createElement(AttachmentPreviewList, { attachments: message.attachments }))));
+});

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IInputToolbarRegistry } from '../input';
+import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
+import { IChatModel } from '../../model';
+/**
+ * The base components props.
+ */
+export type BaseMessageProps = {
+    /**
+     * The mime renderer registry.
+     */
+    rmRegistry: IRenderMimeRegistry;
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
+    /**
+     * The chat commands registry.
+     */
+    chatCommandRegistry?: IChatCommandRegistry;
+    /**
+     * The input toolbar registry.
+     */
+    inputToolbarRegistry: IInputToolbarRegistry;
+    /**
+     * The footer registry.
+     */
+    messageFooterRegistry?: IMessageFooterRegistry;
+    /**
+     * The welcome message.
+     */
+    welcomeMessage?: string;
+};
+/**
+ * The messages list component.
+ */
+export declare function ChatMessages(props: BaseMessageProps): JSX.Element;

package/lib/components/messages/messages.js

@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Box } from '@mui/material';
+import clsx from 'clsx';
+import React, { useEffect, useState, useRef } from 'react';
+import { MessageFooterComponent } from './footer';
+import { ChatMessageHeader } from './header';
+import { ChatMessage } from './message';
+import { Navigation } from './navigation';
+import { WelcomeMessage } from './welcome';
+import { WritingUsersList } from './writers';
+import { ScrollContainer } from '../scroll-container';
+const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
+const MESSAGE_CLASS = 'jp-chat-message';
+const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
+/**
+ * The messages list component.
+ */
+export function ChatMessages(props) {
+    const { model } = props;
+    const [messages, setMessages] = useState(model.messages);
+    const refMsgBox = useRef(null);
+    const [currentWriters, setCurrentWriters] = useState([]);
+    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
+     */
+    useEffect(() => {
+        async function fetchHistory() {
+            if (!model.getHistory) {
+                return;
+            }
+            model
+                .getHistory()
+                .then(history => setMessages(history.messages))
+                .catch(e => console.error(e));
+        }
+        fetchHistory();
+        setCurrentWriters([]);
+    }, [model]);
+    /**
+     * Effect: listen to chat messages.
+     */
+    useEffect(() => {
+        var _a;
+        function handleChatEvents() {
+            setMessages([...model.messages]);
+        }
+        function handleWritersChange(_, writers) {
+            setCurrentWriters(writers.map(writer => writer.user));
+        }
+        model.messagesUpdated.connect(handleChatEvents);
+        (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(handleWritersChange);
+        return function cleanup() {
+            var _a;
+            model.messagesUpdated.disconnect(handleChatEvents);
+            (_a = model.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(handleChatEvents);
+        };
+    }, [model]);
+    /**
+     * Observe the messages to update the current viewport and the unread messages.
+     */
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+            var _a;
+            // 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;
+                        }
+                    }
+                }
+            });
+            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);
+            }
+        });
+        return () => {
+            listRef.current.forEach(item => {
+                if (item) {
+                    observer.unobserve(item);
+                }
+            });
+        };
+    }, [messages, allRendered]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
+            props.welcomeMessage && (React.createElement(WelcomeMessage, { rmRegistry: props.rmRegistry, content: props.welcomeMessage })),
+            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, index: i, renderedPromise: renderedPromise.current[i], ref: el => (listRef.current[i] = el) }),
+                    props.messageFooterRegistry && (React.createElement(MessageFooterComponent, { registry: props.messageFooterRegistry, message: message, model: model }))));
+            }))),
+        React.createElement(WritingUsersList, { writers: currentWriters }),
+        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BaseMessageProps } from './messages';
+/**
+ * The navigation component props.
+ */
+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.
+ */
+export declare function Navigation(props: NavigationProps): JSX.Element;
+export {};

package/lib/components/messages/navigation.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Button } from '@jupyter/react-components';
+import { LabIcon, caretDownEmptyIcon, classes } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+const NAVIGATION_BUTTON_CLASS = 'jp-chat-navigation';
+const NAVIGATION_UNREAD_CLASS = 'jp-chat-navigation-unread';
+const NAVIGATION_TOP_CLASS = 'jp-chat-navigation-top';
+const NAVIGATION_BOTTOM_CLASS = 'jp-chat-navigation-bottom';
+/**
+ * The navigation component, to navigate to unread messages.
+ */
+export function Navigation(props) {
+    const { model } = props;
+    const [lastInViewport, setLastInViewport] = useState(true);
+    const [unreadBefore, setUnreadBefore] = useState(null);
+    const [unreadAfter, setUnreadAfter] = useState(null);
+    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(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) {
+                return;
+            }
+            // Initialize the next values with the current values if there still relevant.
+            let before = unreadBefore !== null &&
+                unreadIndexes.includes(unreadBefore) &&
+                unreadBefore < Math.min(...viewport)
+                ? unreadBefore
+                : null;
+            let after = unreadAfter !== null &&
+                unreadIndexes.includes(unreadAfter) &&
+                unreadAfter > Math.max(...viewport)
+                ? unreadAfter
+                : null;
+            unreadIndexes.forEach(unread => {
+                if (viewport === null || viewport === void 0 ? void 0 : viewport.includes(unread)) {
+                    return;
+                }
+                if (unread < (before !== null && before !== void 0 ? before : Math.min(...viewport))) {
+                    before = unread;
+                }
+                else if (unread > Math.max(...viewport) &&
+                    unread < (after !== null && after !== void 0 ? after : model.messages.length)) {
+                    after = unread;
+                }
+            });
+            setUnreadBefore(before);
+            setUnreadAfter(after);
+        };
+        (_a = model.unreadChanged) === null || _a === void 0 ? void 0 : _a.connect(unreadChanged);
+        unreadChanged(model, model.unreadMessages);
+        // 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, props.allRendered]);
+    // Listen for change in the viewport, to add a navigation button if the last is not
+    // in viewport.
+    useEffect(() => {
+        var _a, _b;
+        const viewportChanged = (model, viewport) => {
+            setLastInViewport(model.messages.length === 0 ||
+                viewport.includes(model.messages.length - 1));
+        };
+        (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.connect(viewportChanged);
+        viewportChanged(model, (_b = model.messagesInViewport) !== null && _b !== void 0 ? _b : []);
+        return () => {
+            var _a;
+            (_a = model.viewportChanged) === null || _a === void 0 ? void 0 : _a.disconnect(viewportChanged);
+        };
+    }, [model]);
+    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: 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/messages/writers.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IUser } from '../../types';
+/**
+ * The writers component props.
+ */
+type writersProps = {
+    /**
+     * The list of users currently writing.
+     */
+    writers: IUser[];
+};
+/**
+ * The writers component, displaying the current writers.
+ */
+export declare function WritingUsersList(props: writersProps): JSX.Element | null;
+export {};

package/lib/components/messages/writers.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, Typography } from '@mui/material';
+import React, { useMemo } from 'react';
+import { Avatar } from '../avatar';
+const WRITERS_CLASS = 'jp-chat-writers';
+/**
+ * Animated typing indicator component
+ */
+const TypingIndicator = () => (React.createElement(Box, { className: "jp-chat-typing-indicator" },
+    React.createElement("span", { className: "jp-chat-typing-dot" }),
+    React.createElement("span", { className: "jp-chat-typing-dot" }),
+    React.createElement("span", { className: "jp-chat-typing-dot" })));
+/**
+ * The writers component, displaying the current writers.
+ */
+export function WritingUsersList(props) {
+    const { writers } = props;
+    // Don't render if no writers
+    if (writers.length === 0) {
+        return null;
+    }
+    const writersText = writers.length > 1 ? ' are writing' : ' is writing';
+    const writingUsers = useMemo(() => writers.map((writer, index) => {
+        var _a, _b;
+        return (React.createElement(Box, { key: writer.username || index, className: "jp-chat-writer-item" },
+            React.createElement(Avatar, { user: writer, small: true }),
+            React.createElement(Typography, { variant: "body2", className: "jp-chat-writer-name" }, (_b = (_a = writer.display_name) !== null && _a !== void 0 ? _a : writer.name) !== null && _b !== void 0 ? _b : (writer.username || 'User undefined')),
+            index < writers.length - 1 && (React.createElement(Typography, { variant: "body2", className: "jp-chat-writer-separator" }, index < writers.length - 2 ? ', ' : ' and '))));
+    }), [writers]);
+    return (React.createElement(Box, { className: `${WRITERS_CLASS}` },
+        React.createElement(Box, { className: "jp-chat-writers-content" },
+            writingUsers,
+            React.createElement(Box, { className: "jp-chat-writing-status" },
+                React.createElement(Typography, { variant: "body2", className: "jp-chat-writing-text" }, writersText),
+                React.createElement(TypingIndicator, null)))));
+}

package/lib/context.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IAttachmentOpenerRegistry } from './registry';
+import { IAttachmentOpenerRegistry } from './registers';
 export declare const AttachmentOpenerContext: import("react").Context<IAttachmentOpenerRegistry | undefined>;

package/lib/index.d.ts

@@ -1,14 +1,10 @@
 export * from './active-cell-manager';
-export * from './chat-commands';
 export * from './components';
-export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './markdown-renderer';
 export * from './model';
-export * from './registry';
+export * from './registers';
 export * from './selection-watcher';
 export * from './types';
-export * from './widgets/chat-error';
-export * from './widgets/chat-sidebar';
-export * from './widgets/chat-widget';
+export * from './widgets';

package/lib/index.js

@@ -3,16 +3,12 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './active-cell-manager';
-export * from './chat-commands';
 export * from './components';
-export * from './footers';
 export * from './icons';
 export * from './input-model';
 export * from './markdown-renderer';
 export * from './model';
-export * from './registry';
+export * from './registers';
 export * from './selection-watcher';
 export * from './types';
-export * from './widgets/chat-error';
-export * from './widgets/chat-sidebar';
-export * from './widgets/chat-widget';
+export * from './widgets';

package/lib/input-model.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { Signal } from '@lumino/signaling';
-const WHITESPACE = new Set([' ', '\n', '\t']);
 /**
  * The input model.
  */
@@ -254,14 +253,42 @@ export class InputModel {
 }
 var Private;
 (function (Private) {
+    const WHITESPACE = new Set([' ', '\n', '\t']);
+    /**
+     * Returns the start index (inclusive) & end index (exclusive) that contain
+     * the current word. The start & end index can be passed to `String.slice()`
+     * to extract the current word. The returned range never includes any
+     * whitespace character unless it is escaped by a backslash `\`.
+     *
+     * NOTE: the escape sequence handling here is naive and non-recursive. This
+     * function considers the space in "`\\ `" as escaped, even though "`\\ `"
+     * defines a backslash followed by an _unescaped_ space in most languages.
+     */
     function getCurrentWordBoundaries(input, cursorIndex) {
         let start = cursorIndex;
         let end = cursorIndex;
         const n = input.length;
-        while (start > 0 && !WHITESPACE.has(input[start - 1])) {
+        while (
+        // terminate when `input[start - 1]` is whitespace
+        // i.e. `input[start]` is never whitespace after exiting
+        (start - 1 >= 0 && !WHITESPACE.has(input[start - 1])) ||
+            // unless it is preceded by a backslash
+            (start - 2 >= 0 &&
+                input[start - 2] === '\\' &&
+                WHITESPACE.has(input[start - 1]))) {
             start--;
         }
-        while (end < n && !WHITESPACE.has(input[end])) {
+        // `end` is an exclusive index unlike `start`, hence the different `while`
+        // condition here
+        while (
+        // terminate when `input[end]` is whitespace
+        // i.e. `input[end]` may be whitespace after exiting
+        (end < n && !WHITESPACE.has(input[end])) ||
+            // unless it is preceded by a backslash
+            (end < n &&
+                end - 1 >= 0 &&
+                input[end - 1] === '\\' &&
+                WHITESPACE.has(input[end]))) {
             end++;
         }
         return [start, end];

package/lib/{registry.d.ts → registers/attachment-openers.d.ts}

@@ -1,5 +1,5 @@
 import { Token } from '@lumino/coreutils';
-import { IAttachment } from './types';
+import { IAttachment } from '../types';
 /**
  * The token for the attachments opener registry, which can be provided by an extension
  * using @jupyter/chat package.

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

@@ -0,0 +1,108 @@
+/// <reference types="react" />
+import { LabIcon } from '@jupyterlab/ui-components';
+import { Token } from '@lumino/coreutils';
+import { IInputModel } from '../input-model';
+/**
+ * The token for the chat command registry, which can be provided by an extension
+ * using @jupyter/chat package.
+ */
+export declare const IChatCommandRegistry: Token<IChatCommandRegistry>;
+/**
+ * Interface of a chat command registry, which tracks a list of chat command
+ * providers. Providers provide a list of commands given a user's partial input,
+ * and define how commands are handled when accepted in the chat commands menu.
+ */
+export interface IChatCommandRegistry {
+    /**
+     * Adds a chat command provider to the registry.
+     */
+    addProvider(provider: IChatCommandProvider): void;
+    /**
+     * Lists all chat command providers previously added via `addProvider()`.
+     */
+    getProviders(): IChatCommandProvider[];
+    /**
+     * Calls `onSubmit()` on each command provider in serial. Each command
+     * provider's `onSubmit()` method is responsible for checking the entire input
+     * for command calls and handling them accordingly.
+     *
+     * This method is called by the application after the user presses the "Send"
+     * button but before the message is sent to server.
+     */
+    onSubmit(inputModel: IInputModel): Promise<void>;
+}
+export type ChatCommand = {
+    /**
+     * The name of the command. This defines what the user should type in the
+     * input to have the command appear in the chat commands menu.
+     */
+    name: string;
+    /**
+     * ID of the provider the command originated from.
+     */
+    providerId: string;
+    /**
+     * If set, this will be rendered as the icon for the command in the chat
+     * commands menu. Jupyter Chat will choose a default if this is unset.
+     */
+    icon?: LabIcon | JSX.Element | string | null;
+    /**
+     * If set, this will be rendered as the description for the command in the
+     * chat commands menu. Jupyter Chat will choose a default if this is unset.
+     */
+    description?: string;
+    /**
+     * If set, Jupyter Chat will replace the current word with this string immediately when
+     * the command is accepted from the chat commands menu or the current word
+     * matches the command's `name` exactly.
+     *
+     * This is generally used by "shortcut command" providers, e.g. the emoji
+     * command provider.
+     */
+    replaceWith?: string;
+    /**
+     * Specifies whether the application should add a space ' ' after the command
+     * is accepted from the menu. This should be set to `true` if the command that
+     * replaces the current word needs to be handled on submit, and the command is
+     * valid on its own.
+     *
+     * Defaults to `false`.
+     */
+    spaceOnAccept?: boolean;
+};
+/**
+ * Interface of a command provider.
+ */
+export interface IChatCommandProvider {
+    /**
+     * ID of this command provider.
+     */
+    id: string;
+    /**
+     * A method that should return the list of valid chat commands whose names
+     * complete the current word.
+     *
+     * The current word should be accessed from `inputModel.currentWord`.
+     */
+    listCommandCompletions(inputModel: IInputModel): Promise<ChatCommand[]>;
+    /**
+     * A method that should identify and handle *all* command calls within a
+     * message that the user intends to submit. This method is called after a user
+     * presses the "Send" button but before the message is sent to the server.
+     *
+     * The entire message should be read from `inputModel.value`. This method may
+     * modify the new message before submission by setting `inputModel.value` or
+     * by calling other methods available on `inputModel`.
+     */
+    onSubmit(inputModel: IInputModel): Promise<void>;
+}
+/**
+ * Default chat command registry implementation.
+ */
+export declare class ChatCommandRegistry implements IChatCommandRegistry {
+    constructor();
+    addProvider(provider: IChatCommandProvider): void;
+    getProviders(): IChatCommandProvider[];
+    onSubmit(inputModel: IInputModel): Promise<void>;
+    private _providers;
+}