@jupyter/chat 0.13.0 → 0.15.0

package/lib/components/chat-messages.js

@@ -1,446 +0,0 @@
-/*
- * 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 { 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 { MessageFooter } from './messages/footer';
-import { MessageRenderer } from './messages/message-renderer';
-import { WelcomeMessage } from './messages/welcome';
-import { ScrollContainer } from './scroll-container';
-import { InputModel } from '../input-model';
-import { replaceSpanToMention } from '../utils';
-const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
-const MESSAGE_CLASS = 'jp-chat-message';
-const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
-const MESSAGE_HEADER_CLASS = 'jp-chat-message-header';
-const MESSAGE_TIME_CLASS = 'jp-chat-message-time';
-const WRITERS_CLASS = 'jp-chat-writers';
-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 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(MessageFooter, { registry: props.messageFooterRegistry, message: message, model: model }))));
-            })),
-            React.createElement(Writers, { writers: currentWriters })),
-        React.createElement(Navigation, { ...props, refMsgBox: refMsgBox, allRendered: allRendered })));
-}
-/**
- * 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 ? '*' : ''}`))));
-}
-/**
- * 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 }))));
-});
-/**
- * The writers component, displaying the current writers.
- */
-export function Writers(props) {
-    const { writers } = props;
-    return writers.length > 0 ? (React.createElement(Box, { className: WRITERS_CLASS },
-        writers.map((writer, index) => {
-            var _a, _b;
-            return (React.createElement("div", null,
-                React.createElement(Avatar, { user: writer, small: true }),
-                React.createElement("span", null, (_b = (_a = writer.display_name) !== null && _a !== void 0 ? _a : writer.name) !== null && _b !== void 0 ? _b : (writer.username || 'User undefined')),
-                React.createElement("span", null, index < writers.length - 1
-                    ? index < writers.length - 2
-                        ? ', '
-                        : ' and '
-                    : '')));
-        }),
-        React.createElement("span", null, (writers.length > 1 ? ' are' : ' is') + ' writing'))) : null;
-}
-/**
- * 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') })))));
-}
-/**
- * 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/footers/index.d.ts

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

package/lib/footers/types.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
-/**
- * The props sent passed to each `MessageFooterSection` React component.
- */
-export type MessageFooterSectionProps = {
-    model: IChatModel;
-    message: IChatMessage;
-};
-/**
- * A message footer section which can be added to the footer registry.
- */
-export type MessageFooterSection = {
-    component: React.FC<MessageFooterSectionProps>;
-    position: 'left' | 'center' | 'right';
-};
-/**
- * The message footer returned by the registry, composed of 'left', 'center',
- * and 'right' sections.
- */
-export type MessageFooter = {
-    left?: MessageFooterSection;
-    center?: MessageFooterSection;
-    right?: MessageFooterSection;
-};

package/lib/footers/types.js

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

package/src/chat-commands/registry.ts

@@ -1,60 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-
-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 class ChatCommandRegistry implements IChatCommandRegistry {
-  constructor() {
-    this._providers = new Map<string, IChatCommandProvider>();
-  }
-
-  addProvider(provider: IChatCommandProvider): void {
-    this._providers.set(provider.id, provider);
-  }
-
-  getProviders(): IChatCommandProvider[] {
-    return Array.from(this._providers.values());
-  }
-
-  handleChatCommand(command: ChatCommand, inputModel: IInputModel) {
-    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);
-  }
-
-  private _providers: Map<string, IChatCommandProvider>;
-}
-
-export const IChatCommandRegistry = new Token<IChatCommandRegistry>(
-  '@jupyter/chat:IChatCommandRegistry'
-);

package/src/chat-commands/types.ts

@@ -1,67 +0,0 @@
-/*
- * Copyright (c) Jupyter Development Team.
- * Distributed under the terms of the Modified BSD License.
- */
-
-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 | 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 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>;
-}