@jupyter/chat 0.13.0 → 0.15.0

package/lib/active-cell-manager.d.ts

@@ -5,10 +5,12 @@ import { ISignal } from '@lumino/signaling';
 type CellContent = {
     type: string;
     source: string;
+    language?: string;
 };
 type CellWithErrorContent = {
     type: 'code';
     source: string;
+    language?: string;
     error: {
         name: string;
         value: string;

package/lib/active-cell-manager.js

@@ -110,8 +110,11 @@ export class ActiveCellManager {
         return this._activeCellErrorChanged;
     }
     getContent(withError = false) {
-        var _a;
+        var _a, _b, _c;
         const sharedModel = (_a = this._notebookTracker.activeCell) === null || _a === void 0 ? void 0 : _a.model.sharedModel;
+        const language = (sharedModel === null || sharedModel === void 0 ? void 0 : sharedModel.cell_type) === 'code'
+            ? (_c = (_b = this._notebookTracker.currentWidget) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.defaultKernelLanguage
+            : undefined;
         if (!sharedModel) {
             return null;
         }
@@ -119,7 +122,8 @@ export class ActiveCellManager {
         if (!withError) {
             return {
                 type: sharedModel.cell_type,
-                source: sharedModel.getSource()
+                source: sharedModel.getSource(),
+                language
             };
         }
         // case where withError = true
@@ -128,6 +132,7 @@ export class ActiveCellManager {
             return {
                 type: 'code',
                 source: sharedModel.getSource(),
+                language,
                 error: {
                     name: error.ename,
                     value: error.evalue,

package/lib/components/avatar.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { IUser } from '../types';
+/**
+ * The avatar props.
+ */
+type AvatarProps = {
+    /**
+     * The user to display an avatar.
+     */
+    user: IUser;
+    /**
+     * Whether the avatar should be small.
+     */
+    small?: boolean;
+};
+/**
+ * The avatar component.
+ */
+export declare function Avatar(props: AvatarProps): JSX.Element | null;
+export {};

package/lib/components/avatar.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Avatar as MuiAvatar, Typography } from '@mui/material';
+import React from 'react';
+/**
+ * The avatar component.
+ */
+export function Avatar(props) {
+    var _a, _b;
+    const { user } = props;
+    const sharedStyles = {
+        height: `${props.small ? '16' : '24'}px`,
+        width: `${props.small ? '16' : '24'}px`,
+        bgcolor: user.color,
+        fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
+    };
+    const name = (_b = (_a = user.display_name) !== null && _a !== void 0 ? _a : user.name) !== null && _b !== void 0 ? _b : (user.username || 'User undefined');
+    return user.avatar_url ? (React.createElement(MuiAvatar, { sx: {
+            ...sharedStyles
+        }, src: user.avatar_url, alt: name, title: name })) : user.initials ? (React.createElement(MuiAvatar, { sx: {
+            ...sharedStyles
+        }, alt: name, title: name },
+        React.createElement(Typography, { sx: {
+                fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`,
+                color: 'var(--jp-ui-inverse-font-color1)'
+            } }, user.initials))) : null;
+}

package/lib/components/chat.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { IChatCommandRegistry } from '../chat-commands';
 import { IInputToolbarRegistry } from './input';
-import { IMessageFooterRegistry } from '../footers';
 import { IChatModel } from '../model';
-import { IAttachmentOpenerRegistry } from '../registry';
+import { IAttachmentOpenerRegistry, IChatCommandRegistry, IMessageFooterRegistry } from '../registers';
 export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**

package/lib/components/chat.js

@@ -7,10 +7,9 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
 import React, { useState } from 'react';
+import { ChatInput, InputToolbarRegistry } from './input';
 import { JlThemeProvider } from './jl-theme-provider';
-import { ChatMessages } from './chat-messages';
-import { ChatInput } from './chat-input';
-import { InputToolbarRegistry } from './input';
+import { ChatMessages } from './messages';
 import { AttachmentOpenerContext } from '../context';
 export function ChatBody(props) {
     const { model } = props;

package/lib/components/index.d.ts

@@ -1,9 +1,8 @@
+export * from './avatar';
 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 './messages';
 export * from './mui-extras';
 export * from './scroll-container';
-export * from './toolbar';

package/lib/components/index.js

@@ -2,12 +2,11 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+export * from './avatar';
 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 './messages';
 export * from './mui-extras';
 export * from './scroll-container';
-export * from './toolbar';

package/lib/components/input/buttons/send-button.js

@@ -15,7 +15,7 @@ const SEND_INCLUDE_LI_CLASS = 'jp-chat-send-include';
  * The send button, with optional 'include selection' menu.
  */
 export function SendButton(props) {
-    const { model } = props;
+    const { model, chatCommandRegistry } = props;
     const { activeCellManager, selectionWatcher } = model;
     const hideIncludeSelection = !activeCellManager || !selectionWatcher;
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
@@ -77,21 +77,31 @@ export function SendButton(props) {
             activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.availabilityChanged.disconnect(toggleIncludeState);
         };
     }, [activeCellManager, selectionWatcher]);
-    function sendWithSelection() {
+    async function send() {
+        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
+        model.send(model.value);
+    }
+    async function sendWithSelection() {
         let source = '';
+        // Run all chat command providers
+        await (chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.onSubmit(model));
+        let language;
         if (selectionWatcher === null || selectionWatcher === void 0 ? void 0 : selectionWatcher.selection) {
             // Append the selected text if exists.
             source = selectionWatcher.selection.text;
+            language = selectionWatcher.selection.language;
         }
         else if (activeCellManager === null || activeCellManager === void 0 ? void 0 : activeCellManager.available) {
             // Append the active cell content if exists.
-            source = activeCellManager.getContent(false).source;
+            const content = activeCellManager.getContent(false);
+            source = content.source;
+            language = content === null || content === void 0 ? void 0 : content.language;
         }
         let content = model.value;
         if (source) {
             content += `
 
-\`\`\`
+\`\`\`${language !== null && language !== void 0 ? language : ''}
 ${source}
 \`\`\`
 `;
@@ -101,7 +111,7 @@ ${source}
         model.value = '';
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(TooltippedButton, { onClick: () => model.send(model.value), disabled: disabled, tooltip: tooltip, buttonProps: {
+        React.createElement(TooltippedButton, { onClick: send, disabled: disabled, tooltip: tooltip, buttonProps: {
                 size: 'small',
                 title: tooltip,
                 variant: 'contained',

package/lib/components/{chat-input.d.ts → input/chat-input.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material';
-import { IInputToolbarRegistry } from './input';
-import { IInputModel } from '../input-model';
-import { IChatCommandRegistry } from '../chat-commands';
+import { IInputToolbarRegistry } from '.';
+import { IInputModel } from '../../input-model';
+import { IChatCommandRegistry } from '../../registers';
 export declare function ChatInput(props: ChatInput.IProps): JSX.Element;
 /**
  * The chat input namespace.

package/lib/components/{chat-input.js → input/chat-input.js}

@@ -5,8 +5,8 @@
 import { Autocomplete, Box, InputAdornment, TextField } from '@mui/material';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
-import { AttachmentPreviewList } from './attachments';
-import { useChatCommands } from './input';
+import { AttachmentPreviewList } from '../attachments';
+import { useChatCommands } from '.';
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
 export function ChatInput(props) {
@@ -72,7 +72,8 @@ export function ChatInput(props) {
      * "Enter". This also handles many of the edge cases in the MUI Autocomplete
      * component.
      */
-    function handleKeyDown(event) {
+    async function handleKeyDown(event) {
+        var _a;
         /**
          * IMPORTANT: This statement ensures that arrow keys can be used to navigate
          * the multiline input when the chat commands menu is closed.
@@ -115,7 +116,9 @@ export function ChatInput(props) {
         // Finally, send the message when all other conditions are met.
         if ((sendWithShiftEnter && event.shiftKey) ||
             (!sendWithShiftEnter && !event.shiftKey)) {
-            model.send(input);
+            // Run all command providers
+            await ((_a = props.chatCommandRegistry) === null || _a === void 0 ? void 0 : _a.onSubmit(model));
+            model.send(model.value);
             event.stopPropagation();
             event.preventDefault();
         }
@@ -153,7 +156,7 @@ export function ChatInput(props) {
                 }
             }, 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", className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model })))))
+                    endAdornment: (React.createElement(InputAdornment, { position: "end", className: INPUT_TOOLBAR_CLASS }, toolbarElements.map(item => (React.createElement(item.element, { model: model, chatCommandRegistry: props.chatCommandRegistry })))))
                 }, FormHelperTextProps: {
                     sx: { marginLeft: 'auto', marginRight: 0 }
                 }, helperText: input.length > 2 ? helperText : ' ' })), inputValue: input, onInputChange: (_, newValue, reason) => {

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

@@ -1,3 +1,4 @@
 export * from './buttons';
+export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';

package/lib/components/input/index.js

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './buttons';
+export * from './chat-input';
 export * from './toolbar-registry';
 export * from './use-chat-commands';

package/lib/components/input/toolbar-registry.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IInputModel } from '../../input-model';
 import { ISignal } from '@lumino/signaling';
+import { IChatCommandRegistry } from '../../registers';
 /**
  * The toolbar registry interface.
  */
@@ -90,6 +91,11 @@ export declare namespace InputToolbarRegistry {
          * The input model of the input component including the button.
          */
         model: IInputModel;
+        /**
+         * Chat command registry. Should be used by the "Send" button to run
+         * `onSubmit()` on all command providers before sending the message.
+         */
+        chatCommandRegistry?: IChatCommandRegistry;
     }
     /**
      * The default toolbar registry if none is provided.

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

@@ -1,5 +1,5 @@
 import type { AutocompleteProps as GenericAutocompleteProps } from '@mui/material';
-import { IChatCommandRegistry } from '../../chat-commands';
+import { IChatCommandRegistry } from '../../registers';
 import { IInputModel } from '../../input-model';
 type AutocompleteProps = GenericAutocompleteProps<any, any, any, any>;
 type UseChatCommandsReturn = {

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

@@ -14,12 +14,17 @@ import React, { useEffect, useState } from 'react';
 export function useChatCommands(inputModel, chatCommandRegistry) {
     // whether an option is highlighted in the chat commands menu
     const [highlighted, setHighlighted] = useState(false);
-    // whether the chat commands menu is open
+    // whether the chat commands menu is open.
+    // NOTE: every `setOpen(false)` call should be followed by a
+    // `setHighlighted(false)` call.
     const [open, setOpen] = useState(false);
     // current list of chat commands matched by the current word.
     // the current word is the space-separated word at the user's cursor.
     const [commands, setCommands] = useState([]);
     useEffect(() => {
+        /**
+         * Callback that runs whenever the current word changes.
+         */
         async function getCommands(_, currentWord) {
             const providers = chatCommandRegistry === null || chatCommandRegistry === void 0 ? void 0 : chatCommandRegistry.getProviders();
             if (!providers) {
@@ -31,20 +36,35 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
                 setHighlighted(false);
                 return;
             }
-            let newCommands = [];
+            let commandCompletions = [];
             for (const provider of providers) {
                 // TODO: optimize performance when this method is truly async
                 try {
-                    newCommands = newCommands.concat(await provider.getChatCommands(inputModel));
+                    commandCompletions = commandCompletions.concat(await provider.listCommandCompletions(inputModel));
                 }
                 catch (e) {
                     console.error(`Error when getting chat commands from command provider '${provider.id}': `, e);
                 }
             }
-            if (newCommands) {
+            // Immediately replace the current word if it exactly matches one command
+            // and 'replaceWith' is set.
+            if (commandCompletions.length === 1 &&
+                commandCompletions[0].name === inputModel.currentWord &&
+                commandCompletions[0].replaceWith !== undefined) {
+                const replacement = commandCompletions[0].replaceWith;
+                inputModel.replaceCurrentWord(replacement);
+                return;
+            }
+            // Otherwise, open/close the menu based on the presence of command
+            // completions and set the menu entries.
+            if (commandCompletions.length) {
                 setOpen(true);
             }
-            setCommands(newCommands);
+            else {
+                setOpen(false);
+                setHighlighted(false);
+            }
+            setCommands(commandCompletions);
         }
         inputModel.currentWordChanged.connect(getCommands);
         return () => {
@@ -53,7 +73,8 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
     }, [inputModel]);
     /**
      * onChange(): the callback invoked when a command is selected from the chat
-     * commands menu by the user.
+     * commands menu. When a command `cmd` is selected, this function replaces the
+     * current word with `cmd.replaceWith` if set, `cmd.name` otherwise.
      */
     const onChange = (e, command, reason) => {
         if (reason !== 'selectOption') {
@@ -68,19 +89,17 @@ export function useChatCommands(inputModel, chatCommandRegistry) {
         if (!currentWord) {
             return;
         }
-        // if replaceWith is set, handle the command immediately
-        if (command.replaceWith) {
-            inputModel.replaceCurrentWord(command.replaceWith);
-            return;
+        let replacement = command.replaceWith === undefined ? command.name : command.replaceWith;
+        if (command.spaceOnAccept) {
+            replacement += ' ';
         }
-        // otherwise, defer handling to the command provider
-        chatCommandRegistry.handleChatCommand(command, inputModel);
+        inputModel.replaceCurrentWord(replacement);
     };
     return {
         autocompleteProps: {
             open,
             options: commands,
-            getOptionLabel: (command) => command.name,
+            getOptionLabel: (command) => typeof command === 'string' ? '' : command.name,
             renderOption: (defaultProps, command, __, ___) => {
                 const { key, ...listItemProps } = defaultProps;
                 const commandIcon = React.isValidElement(command.icon) ? (command.icon) : (React.createElement("span", null, command.icon instanceof LabIcon ? (React.createElement(command.icon.react, null)) : (command.icon)));

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IMessageFooterRegistry, MessageFooterSectionProps } from '../../footers';
+import { IMessageFooterRegistry, MessageFooterSectionProps } from '../../registers';
 /**
  * The chat footer component properties.
  */
@@ -13,4 +13,4 @@ export interface IMessageFootersProps extends MessageFooterSectionProps {
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
-export declare function MessageFooter(props: IMessageFootersProps): JSX.Element;
+export declare function MessageFooterComponent(props: IMessageFootersProps): JSX.Element;

package/lib/components/messages/footer.js

@@ -8,7 +8,7 @@ import React from 'react';
  * The chat footer component, which displays footer components on a row according to
  * their respective positions.
  */
-export function MessageFooter(props) {
+export function MessageFooterComponent(props) {
     var _a, _b, _c;
     const { message, model, registry } = props;
     const footer = registry.getFooter();

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IChatMessage } from '../../types';
+/**
+ * The message header props.
+ */
+type ChatMessageHeaderProps = {
+    /**
+     * The chat message.
+     */
+    message: IChatMessage;
+};
+/**
+ * The message header component.
+ */
+export declare function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element;
+export {};

package/lib/components/messages/header.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, Typography } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Avatar } from '../avatar';
+const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
+const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
+/**
+ * The message header component.
+ */
+export function ChatMessageHeader(props) {
+    var _a, _b;
+    const [datetime, setDatetime] = useState({});
+    const message = props.message;
+    const sender = message.sender;
+    /**
+     * Effect: update cached datetime strings upon receiving a new message.
+     */
+    useEffect(() => {
+        if (!datetime[message.time]) {
+            const newDatetime = {};
+            let datetime;
+            const currentDate = new Date();
+            const sameDay = (date) => date.getFullYear() === currentDate.getFullYear() &&
+                date.getMonth() === currentDate.getMonth() &&
+                date.getDate() === currentDate.getDate();
+            const msgDate = new Date(message.time * 1000); // Convert message time to milliseconds
+            // Display only the time if the day of the message is the current one.
+            if (sameDay(msgDate)) {
+                // Use the browser's default locale
+                datetime = msgDate.toLocaleTimeString([], {
+                    hour: 'numeric',
+                    minute: '2-digit'
+                });
+            }
+            else {
+                // Use the browser's default locale
+                datetime = msgDate.toLocaleString([], {
+                    day: 'numeric',
+                    month: 'numeric',
+                    year: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit'
+                });
+            }
+            newDatetime[message.time] = datetime;
+            setDatetime(newDatetime);
+        }
+    });
+    const avatar = message.stacked ? null : Avatar({ user: sender });
+    const name = (_b = (_a = sender.display_name) !== null && _a !== void 0 ? _a : sender.name) !== null && _b !== void 0 ? _b : (sender.username || 'User undefined');
+    return (React.createElement(Box, { className: MESSAGE_HEADER_CLASS, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            '& > :not(:last-child)': {
+                marginRight: 3
+            },
+            marginBottom: message.stacked ? '0px' : '12px'
+        } },
+        avatar,
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexGrow: 1,
+                flexWrap: 'wrap',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+            } },
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                !message.stacked && (React.createElement(Typography, { sx: {
+                        fontWeight: 700,
+                        color: 'var(--jp-ui-font-color1)',
+                        paddingRight: '0.5em'
+                    } }, name)),
+                (message.deleted || message.edited) && (React.createElement(Typography, { sx: {
+                        fontStyle: 'italic',
+                        fontSize: 'var(--jp-content-font-size0)'
+                    } }, message.deleted ? '(message deleted)' : '(edited)'))),
+            React.createElement(Typography, { className: MESSAGE_TIME_CLASS, sx: {
+                    fontSize: '0.8em',
+                    color: 'var(--jp-ui-font-color2)',
+                    fontWeight: 300
+                }, title: message.raw_time ? 'Unverified time' : '' }, `${datetime[message.time]}${message.raw_time ? '*' : ''}`))));
+}

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

@@ -0,0 +1,9 @@
+export * from './footer';
+export * from './header';
+export * from './message';
+export * from './message-renderer';
+export * from './messages';
+export * from './navigation';
+export * from './toolbar';
+export * from './welcome';
+export * from './writers';

package/lib/components/messages/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './footer';
+export * from './header';
+export * from './message';
+export * from './message-renderer';
+export * from './messages';
+export * from './navigation';
+export * from './toolbar';
+export * from './welcome';
+export * from './writers';

package/lib/components/messages/message-renderer.js

@@ -5,7 +5,7 @@
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { CodeToolbar } from '../code-blocks/code-toolbar';
-import { MessageToolbar } from '../toolbar';
+import { MessageToolbar } from './toolbar';
 import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
 /**
  * The message renderer base component.

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

@@ -0,0 +1,21 @@
+import { PromiseDelegate } from '@lumino/coreutils';
+import React from 'react';
+import { BaseMessageProps } from './messages';
+import { IChatMessage } from '../../types';
+/**
+ * The message component body.
+ */
+export declare const ChatMessage: React.ForwardRefExoticComponent<BaseMessageProps & {
+    /**
+     * The message to display.
+     */
+    message: IChatMessage;
+    /**
+     * The index of the message in the list.
+     */
+    index: number;
+    /**
+     * The promise to resolve when the message is rendered.
+     */
+    renderedPromise: PromiseDelegate<void>;
+} & React.RefAttributes<HTMLDivElement>>;