@jupyter/chat 0.7.1 → 0.8.0

package/lib/active-cell-manager.js

@@ -34,13 +34,10 @@ export class ActiveCellManager {
                 (_a = this._activeCell) === null || _a === void 0 ? void 0 : _a.model.stateChanged.disconnect(this._cellStateChange);
                 this._activeCell = activeCell;
                 activeCell === null || activeCell === void 0 ? void 0 : activeCell.ready.then(() => {
-                    var _a, _b;
+                    var _a;
                     (_a = this._activeCell) === null || _a === void 0 ? void 0 : _a.model.stateChanged.connect(this._cellStateChange);
                     this._available = !!this._activeCell && this._notebookVisible;
                     this._availabilityChanged.emit(this._available);
-                    (_b = this._activeCell) === null || _b === void 0 ? void 0 : _b.disposed.connect(() => {
-                        this._activeCell = null;
-                    });
                 });
             }
         };

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

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './registry';

package/lib/chat-commands/index.js

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

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

@@ -0,0 +1,28 @@
+import { Token } from '@lumino/coreutils';
+import { ChatCommand, IChatCommandProvider } from './types';
+import { IInputModel } from '../input-model';
+/**
+ * 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 {
+    addProvider(provider: IChatCommandProvider): void;
+    getProviders(): IChatCommandProvider[];
+    /**
+     * Handles a chat command by calling `handleChatCommand()` on the provider
+     * corresponding to this chat command.
+     */
+    handleChatCommand(command: ChatCommand, inputModel: IInputModel): void;
+}
+/**
+ * Default chat command registry implementation.
+ */
+export declare class ChatCommandRegistry implements IChatCommandRegistry {
+    constructor();
+    addProvider(provider: IChatCommandProvider): void;
+    getProviders(): IChatCommandProvider[];
+    handleChatCommand(command: ChatCommand, inputModel: IInputModel): void;
+    private _providers;
+}
+export declare const IChatCommandRegistry: Token<IChatCommandRegistry>;

package/lib/chat-commands/registry.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
+/**
+ * Default chat command registry implementation.
+ */
+export class ChatCommandRegistry {
+    constructor() {
+        this._providers = new Map();
+    }
+    addProvider(provider) {
+        this._providers.set(provider.id, provider);
+    }
+    getProviders() {
+        return Array.from(this._providers.values());
+    }
+    handleChatCommand(command, inputModel) {
+        const provider = this._providers.get(command.providerId);
+        if (!provider) {
+            console.error('Error in handling chat command: No command provider has an ID of ' +
+                command.providerId);
+            return;
+        }
+        provider.handleChatCommand(command, inputModel);
+    }
+}
+export const IChatCommandRegistry = new Token('@jupyter/chat:IChatCommandRegistry');

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

@@ -0,0 +1,51 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import { IInputModel } from '../input-model';
+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 | string;
+    /**
+     * 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 after
+     * the command is run from the chat commands menu.
+     *
+     * If all commands from a provider have this property set, then
+     * `handleChatCommands()` can just return on the first line.
+     */
+    replaceWith?: string;
+};
+/**
+ * Interface of a command provider.
+ */
+export interface IChatCommandProvider {
+    /**
+     * ID of this command provider.
+     */
+    id: string;
+    /**
+     * Async function which accepts the input model and returns a list of
+     * valid chat commands that match the current word. The current word is
+     * space-separated word at the user's cursor.
+     */
+    getChatCommands(inputModel: IInputModel): Promise<ChatCommand[]>;
+    /**
+     * Function called when a chat command is run by the user through the chat
+     * commands menu.
+     */
+    handleChatCommand(command: ChatCommand, inputModel: IInputModel): Promise<void>;
+}

package/lib/chat-commands/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/components/attachments.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { IAttachment } from '../types';
+/**
+ * The attachments props.
+ */
+export type AttachmentsProps = {
+    attachments: IAttachment[];
+    onRemove?: (attachment: IAttachment) => void;
+};
+/**
+ * The Attachments component.
+ */
+export declare function AttachmentPreviewList(props: AttachmentsProps): JSX.Element;
+/**
+ * The attachment props.
+ */
+export type AttachmentProps = AttachmentsProps & {
+    attachment: IAttachment;
+};
+/**
+ * The Attachment component.
+ */
+export declare function AttachmentPreview(props: AttachmentProps): JSX.Element;

package/lib/components/attachments.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// import { IDocumentManager } from '@jupyterlab/docmanager';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box } from '@mui/material';
+import React, { useContext } from 'react';
+import { TooltippedButton } from './mui-extras/tooltipped-button';
+import { AttachmentOpenerContext } from '../context';
+const ATTACHMENTS_CLASS = 'jp-chat-attachments';
+const ATTACHMENT_CLASS = 'jp-chat-attachment';
+const ATTACHMENT_CLICKABLE_CLASS = 'jp-chat-attachment-clickable';
+const REMOVE_BUTTON_CLASS = 'jp-chat-attachment-remove';
+/**
+ * The Attachments component.
+ */
+export function AttachmentPreviewList(props) {
+    return (React.createElement(Box, { className: ATTACHMENTS_CLASS }, props.attachments.map(attachment => (React.createElement(AttachmentPreview, { ...props, attachment: attachment })))));
+}
+/**
+ * The Attachment component.
+ */
+export function AttachmentPreview(props) {
+    const remove_tooltip = 'Remove attachment';
+    const attachmentOpenerRegistry = useContext(AttachmentOpenerContext);
+    return (React.createElement(Box, { className: ATTACHMENT_CLASS },
+        React.createElement("span", { className: (attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type))
+                ? ATTACHMENT_CLICKABLE_CLASS
+                : '', onClick: () => {
+                var _a;
+                return (_a = attachmentOpenerRegistry === null || attachmentOpenerRegistry === void 0 ? void 0 : attachmentOpenerRegistry.get(props.attachment.type)) === null || _a === void 0 ? void 0 : _a(props.attachment);
+            } }, props.attachment.value),
+        props.onRemove && (React.createElement(TooltippedButton, { onClick: () => props.onRemove(props.attachment), tooltip: remove_tooltip, buttonProps: {
+                size: 'small',
+                title: remove_tooltip,
+                className: REMOVE_BUTTON_CLASS
+            }, sx: {
+                minWidth: 'unset',
+                padding: '0',
+                color: 'inherit'
+            } },
+            React.createElement(CloseIcon, null)))));
+}

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { SxProps, Theme } from '@mui/material';
-import { IChatModel } from '../model';
-import { IAutocompletionRegistry } from '../registry';
+import { IInputModel } from '../input-model';
+import { IChatCommandRegistry } from '../chat-commands';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
 /**
  * The chat input namespace.
@@ -14,11 +15,7 @@ export declare namespace ChatInput {
         /**
          * The chat model.
          */
-        model: IChatModel;
-        /**
-         * The initial value of the input (default to '')
-         */
-        value?: string;
+        model: IInputModel;
         /**
          * The function to be called to send the message.
          */
@@ -36,12 +33,12 @@ export declare namespace ChatInput {
          */
         sx?: SxProps<Theme>;
         /**
-         * Autocompletion properties.
+         * The document manager.
          */
-        autocompletionRegistry?: IAutocompletionRegistry;
+        documentManager?: IDocumentManager;
         /**
-         * Autocompletion name.
+         * Chat command registry.
          */
-        autocompletionName?: string;
+        chatCommandRegistry?: IChatCommandRegistry;
     }
 }

package/lib/components/chat-input.js

@@ -2,33 +2,36 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useEffect, useRef, useState } from 'react';
 import { Autocomplete, Box, InputAdornment, TextField } from '@mui/material';
 import clsx from 'clsx';
-import { CancelButton } from './input/cancel-button';
-import { SendButton } from './input/send-button';
+import React, { useEffect, useRef, useState } from 'react';
+import { AttachmentPreviewList } from './attachments';
+import { AttachButton, CancelButton, SendButton } from './input';
+import { useChatCommands } from './input/use-chat-commands';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 export function ChatInput(props) {
-    var _a, _b, _c, _d;
-    const { autocompletionName, autocompletionRegistry, model } = props;
-    const autocompletion = useRef();
-    const [input, setInput] = useState(props.value || '');
+    var _a, _b;
+    const { documentManager, model } = props;
+    const [input, setInput] = useState(model.value);
+    const inputRef = useRef();
+    const chatCommands = useChatCommands(model, props.chatCommandRegistry);
     const [sendWithShiftEnter, setSendWithShiftEnter] = useState((_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
-    const [typingNotification, setTypingNotification] = useState((_b = model.config.sendTypingNotification) !== null && _b !== void 0 ? _b : false);
+    const [attachments, setAttachments] = useState(model.attachments);
     // Display the include selection menu if it is not explicitly hidden, and if at least
     // one of the tool to check for text or cell selection is enabled.
-    let hideIncludeSelection = (_c = props.hideIncludeSelection) !== null && _c !== void 0 ? _c : false;
+    let hideIncludeSelection = (_b = props.hideIncludeSelection) !== null && _b !== void 0 ? _b : false;
     if (model.activeCellManager === null && model.selectionWatcher === null) {
         hideIncludeSelection = true;
     }
-    // store reference to the input element to enable focusing it easily
-    const inputRef = useRef();
     useEffect(() => {
-        var _a;
+        var _a, _b;
+        const inputChanged = (_, value) => {
+            setInput(value);
+        };
+        model.valueChanged.connect(inputChanged);
         const configChanged = (_, config) => {
-            var _a, _b;
+            var _a;
             setSendWithShiftEnter((_a = config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false);
-            setTypingNotification((_b = config.sendTypingNotification) !== null && _b !== void 0 ? _b : false);
         };
         model.configChanged.connect(configChanged);
         const focusInputElement = () => {
@@ -37,77 +40,65 @@ export function ChatInput(props) {
             }
         };
         (_a = model.focusInputSignal) === null || _a === void 0 ? void 0 : _a.connect(focusInputElement);
+        const attachmentChanged = (_, attachments) => {
+            setAttachments([...attachments]);
+        };
+        (_b = model.attachmentsChanged) === null || _b === void 0 ? void 0 : _b.connect(attachmentChanged);
         return () => {
-            var _a, _b;
+            var _a, _b, _c;
             (_a = model.configChanged) === null || _a === void 0 ? void 0 : _a.disconnect(configChanged);
             (_b = model.focusInputSignal) === null || _b === void 0 ? void 0 : _b.disconnect(focusInputElement);
+            (_c = model.attachmentsChanged) === null || _c === void 0 ? void 0 : _c.disconnect(attachmentChanged);
         };
     }, [model]);
-    // The autocomplete commands options.
-    const [commandOptions, setCommandOptions] = useState([]);
-    // whether any option is highlighted in the slash command autocomplete
-    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.
+     * `handleKeyDown()`: callback invoked when the user presses any key in the
+     * `TextField` component. This is used to send the message when a user presses
+     * "Enter". This also handles many of the edge cases in the MUI Autocomplete
+     * component.
      */
-    useEffect(() => {
-        if (autocompletionRegistry === undefined) {
-            return;
-        }
-        autocompletion.current = autocompletionName
-            ? autocompletionRegistry.get(autocompletionName)
-            : autocompletionRegistry.getDefaultCompletion();
-        if (autocompletion.current === undefined) {
-            return;
-        }
-        if (Array.isArray(autocompletion.current.commands)) {
-            setCommandOptions(autocompletion.current.commands);
-        }
-        else if (typeof autocompletion.current.commands === 'function') {
-            autocompletion.current
-                .commands()
-                .then((commands) => {
-                setCommandOptions(commands);
-            });
-        }
-    }, []);
-    /**
-     * Effect: Open the autocomplete when the user types the 'opener' string into an
-     * empty chat input. Close the autocomplete and reset the last selected value when
-     * the user clears the chat input.
-     */
-    useEffect(() => {
-        var _a, _b;
-        if (!((_a = autocompletion.current) === null || _a === void 0 ? void 0 : _a.opener)) {
-            return;
-        }
-        if (input === ((_b = autocompletion.current) === null || _b === void 0 ? void 0 : _b.opener)) {
-            setOpen(true);
-            return;
-        }
-        if (input === '') {
-            setOpen(false);
+    function handleKeyDown(event) {
+        /**
+         * IMPORTANT: This statement ensures that arrow keys can be used to navigate
+         * the multiline input when the chat commands menu is closed.
+         */
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) &&
+            !chatCommands.menu.open) {
+            event.stopPropagation();
             return;
         }
-    }, [input]);
-    function handleKeyDown(event) {
+        // remainder of this function only handles the "Enter" key.
         if (event.key !== 'Enter') {
             return;
         }
-        // Do not send the message if the user was selecting a suggested command from the
-        // Autocomplete component.
-        if (highlighted) {
+        /**
+         * IMPORTANT: This statement ensures that when the chat commands menu is
+         * open with a highlighted command, the "Enter" key should run that command
+         * instead of sending the message.
+         *
+         * This is done by returning early and letting the event propagate to the
+         * `Autocomplete` component.
+         */
+        if (chatCommands.menu.highlighted) {
             return;
         }
+        // remainder of this function only handles the "Enter" key pressed while the
+        // commands menu is closed.
+        /**
+         * IMPORTANT: This ensures that when the "Enter" key is pressed with the
+         * commands menu closed, the event is not propagated up to the
+         * `Autocomplete` component. Without this, `Autocomplete.onChange()` gets
+         * called with an invalid `string` instead of a `ChatCommand`.
+         */
+        event.stopPropagation();
         // Do not send empty messages, and avoid adding new line in empty message.
         if (!inputExists) {
             event.stopPropagation();
             event.preventDefault();
             return;
         }
+        // Finally, send the message when all other conditions are met.
         if ((sendWithShiftEnter && event.shiftKey) ||
             (!sendWithShiftEnter && !event.shiftKey)) {
             onSend();
@@ -131,14 +122,14 @@ ${selection.source}
 `;
         }
         props.onSend(content);
-        setInput('');
+        model.value = '';
     }
     /**
      * Triggered when cancelling edition.
      */
     function onCancel() {
-        setInput(props.value || '');
-        props.onCancel();
+        var _a;
+        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
     }
     // Set the helper text based on whether Shift+Enter is used for sending.
     const helperText = sendWithShiftEnter ? (React.createElement("span", null,
@@ -153,7 +144,8 @@ ${selection.source}
         React.createElement("b", null, "Enter"),
         " to add a new line"));
     return (React.createElement(Box, { sx: props.sx, className: clsx(INPUT_BOX_CLASS) },
-        React.createElement(Autocomplete, { options: commandOptions, value: props.value, open: open, autoHighlight: true, freeSolo: true, 
+        React.createElement(AttachmentPreviewList, { attachments: attachments, onRemove: model.removeAttachment }),
+        React.createElement(Autocomplete, { ...chatCommands.autocompleteProps, 
             // ensure the autocomplete popup always renders on top
             componentsProps: {
                 popper: {
@@ -170,37 +162,20 @@ ${selection.source}
                         padding: 2
                     }
                 }
-            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, InputProps: {
+            }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, variant: "outlined", multiline: true, onKeyDown: handleKeyDown, placeholder: "Start chatting", inputRef: inputRef, sx: { marginTop: '1px' }, 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); }, InputProps: {
                     ...params.InputProps,
                     endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                        documentManager && model.addAttachment && (React.createElement(AttachButton, { documentManager: documentManager, onAttach: model.addAttachment })),
                         props.onCancel && React.createElement(CancelButton, { onCancel: onCancel }),
-                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: inputExists, onSend: onSend, hideIncludeSelection: hideIncludeSelection, hasButtonOnLeft: !!props.onCancel })))
+                        React.createElement(SendButton, { model: model, sendWithShiftEnter: sendWithShiftEnter, inputExists: inputExists || attachments.length > 0, 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) => {
-                setInput(newValue);
-                if (typingNotification && model.inputChanged) {
-                    model.inputChanged(newValue);
+                }, helperText: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {
+                // Do not update the value if the reason is 'reset', which should occur only
+                // if an autocompletion command has been selected. In this case, the value is
+                // set in the 'onChange()' callback of the autocompletion (to avoid conflicts).
+                if (reason !== 'reset') {
+                    model.value = newValue;
                 }
-            }, onHighlightChange: 
-            /**
-             * On highlight change: set `highlighted` to whether an option is
-             * highlighted by the user.
-             *
-             * This isn't called when an option is selected for some reason, so we
-             * need to call `setHighlighted(false)` in `onClose()`.
-             */
-            (_, highlightedOption) => {
-                setHighlighted(!!highlightedOption);
-            }, onClose: 
-            /**
-             * On close: set `highlighted` to `false` and close the popup by
-             * setting `open` to `false`.
-             */
-            () => {
-                setHighlighted(false);
-                setOpen(false);
-            }, 
-            // hide default extra right padding in the text field
-            disableClearable: true })));
+            } })));
 }

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

@@ -1,7 +1,9 @@
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { PromiseDelegate } from '@lumino/coreutils';
 import type { SxProps, Theme } from '@mui/material';
 import React from 'react';
+import { IChatCommandRegistry } from '../chat-commands';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
 /**
@@ -10,6 +12,8 @@ import { IChatMessage, IUser } from '../types';
 type BaseMessageProps = {
     rmRegistry: IRenderMimeRegistry;
     model: IChatModel;
+    chatCommandRegistry?: IChatCommandRegistry;
+    documentManager?: IDocumentManager;
 };
 /**
  * The messages list component.

package/lib/components/chat-messages.js

@@ -8,9 +8,11 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import { Avatar as MuiAvatar, Box, Typography } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
+import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
+import { InputModel } from '../input-model';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
@@ -226,6 +228,7 @@ export const ChatMessage = forwardRef((props, ref) => {
     const [deleted, setDeleted] = useState(false);
     const [canEdit, setCanEdit] = useState(false);
     const [canDelete, setCanDelete] = useState(false);
+    const [inputModel, setInputModel] = useState(null);
     // Look if the message can be deleted or edited.
     useEffect(() => {
         var _a;
@@ -241,6 +244,23 @@ export const ChatMessage = forwardRef((props, ref) => {
             setCanDelete(false);
         }
     }, [model, message]);
+    // Create an input model only if the message is edited.
+    useEffect(() => {
+        if (edit && canEdit) {
+            setInputModel(new InputModel({
+                value: message.body,
+                activeCellManager: model.activeCellManager,
+                selectionWatcher: model.selectionWatcher,
+                config: {
+                    sendWithShiftEnter: model.config.sendWithShiftEnter
+                },
+                attachments: message.attachments
+            }));
+        }
+        else {
+            setInputModel(null);
+        }
+    }, [edit]);
     // Cancel the current edition of the message.
     const cancelEdition = () => {
         setEdit(false);
@@ -253,6 +273,7 @@ export const ChatMessage = forwardRef((props, ref) => {
         // Update the message
         const updatedMessage = { ...message };
         updatedMessage.body = input;
+        updatedMessage.attachments = inputModel === null || inputModel === void 0 ? void 0 : inputModel.attachments;
         model.updateMessage(id, updatedMessage);
         setEdit(false);
     };
@@ -264,7 +285,12 @@ export const ChatMessage = forwardRef((props, ref) => {
         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 ? (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 }))));
+    return deleted ? (React.createElement("div", { ref: ref, "data-index": props.index })) : (React.createElement("div", { ref: ref, "data-index": props.index },
+        edit && canEdit && inputModel ? (React.createElement(ChatInput, { onSend: (input) => updateMessage(message.id, input), onCancel: () => cancelEdition(), model: inputModel, hideIncludeSelection: true, chatCommandRegistry: props.chatCommandRegistry, documentManager: props.documentManager })) : (React.createElement(MarkdownRenderer, { rmRegistry: rmRegistry, markdownStr: message.body, model: model, edit: canEdit ? () => setEdit(true) : 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 }))));
 });
 /**
  * The writers component, displaying the current writers.

package/lib/components/chat.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IChatCommandRegistry } from '../chat-commands';
 import { IChatModel } from '../model';
-import { IAutocompletionRegistry } from '../registry';
+import { IAttachmentOpenerRegistry } from '../registry';
 export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
@@ -22,13 +24,17 @@ export declare namespace Chat {
          */
         rmRegistry: IRenderMimeRegistry;
         /**
-         * Autocompletion registry.
+         * The document manager.
          */
-        autocompletionRegistry?: IAutocompletionRegistry;
+        documentManager?: IDocumentManager;
         /**
-         * Autocompletion name.
+         * Chat command registry.
          */
-        autocompletionName?: string;
+        chatCommandRegistry?: IChatCommandRegistry;
+        /**
+         * Attachment opener registry.
+         */
+        attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     }
     /**
      * The options to build the Chat UI.