@jupyter/chat 0.1.0

package/lib/components/mui-extras/stacking-alert.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState, useMemo, useCallback } from 'react';
+import { Alert, Collapse } from '@mui/material';
+/**
+ * Hook that returns a function to trigger an alert, and a corresponding alert
+ * JSX element for the consumer to render. The number of successive identical
+ * alerts `X` is indicated in the element via the suffix "(X)".
+ */
+export function useStackingAlert() {
+    const [type, setType] = useState(null);
+    const [msg, setMsg] = useState('');
+    const [repeatCount, setRepeatCount] = useState(0);
+    const [expand, setExpand] = useState(false);
+    const [exitPromise, setExitPromise] = useState();
+    const [exitPromiseResolver, setExitPromiseResolver] = useState();
+    const showAlert = useCallback((nextType, _nextMsg) => {
+        // if the alert is identical to the previous alert, increment the
+        // `repeatCount` indicator.
+        const nextMsg = _nextMsg.toString();
+        if (nextType === type && nextMsg === msg) {
+            setRepeatCount(currCount => currCount + 1);
+            return;
+        }
+        if (type === null) {
+            // if this alert is being shown for the first time, initialize the
+            // exitPromise so we can await it on `clear()`.
+            setExitPromise(new Promise(res => {
+                setExitPromiseResolver(() => res);
+            }));
+        }
+        setType(nextType);
+        setMsg(nextMsg);
+        setRepeatCount(0);
+        setExpand(true);
+    }, [msg, type]);
+    const alertJsx = useMemo(() => (React.createElement(Collapse, { in: expand, onExited: () => {
+            exitPromiseResolver === null || exitPromiseResolver === void 0 ? void 0 : exitPromiseResolver();
+            // only clear the alert after the Collapse exits, otherwise the alert
+            // disappears without any animation.
+            setType(null);
+            setMsg('');
+            setRepeatCount(0);
+        }, timeout: 200 }, type !== null && (React.createElement(Alert, { severity: type }, msg + (repeatCount ? ` (${repeatCount})` : ''))))), [msg, repeatCount, type, expand, exitPromiseResolver]);
+    const clearAlert = useCallback(() => {
+        setExpand(false);
+        return exitPromise;
+    }, [expand, exitPromise]);
+    return {
+        show: showAlert,
+        jsx: alertJsx,
+        clear: clearAlert
+    };
+}

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

@@ -0,0 +1,12 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import React from 'react';
+type RendermimeMarkdownProps = {
+    markdownStr: string;
+    rmRegistry: IRenderMimeRegistry;
+    appendContent?: boolean;
+    edit?: () => void;
+    delete?: () => void;
+};
+declare function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element;
+export declare const RendermimeMarkdown: React.MemoExoticComponent<typeof RendermimeMarkdownBase>;
+export {};

package/lib/components/rendermime-markdown.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { CopyButton } from './copy-button';
+import { MessageToolbar } from './toolbar';
+const MD_MIME_TYPE = 'text/markdown';
+const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
+/**
+ * Takes \( and returns \\(. Escapes LaTeX delimeters by adding extra backslashes where needed for proper rendering by @jupyterlab/rendermime.
+ */
+function escapeLatexDelimiters(text) {
+    return text
+        .replace('\\(', '\\\\(')
+        .replace('\\)', '\\\\)')
+        .replace('\\[', '\\\\[')
+        .replace('\\]', '\\\\]');
+}
+function RendermimeMarkdownBase(props) {
+    const appendContent = props.appendContent || false;
+    const [renderedContent, setRenderedContent] = useState(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const renderContent = async () => {
+            var _a;
+            const mdStr = escapeLatexDelimiters(props.markdownStr);
+            const model = props.rmRegistry.createModel({
+                data: { [MD_MIME_TYPE]: mdStr }
+            });
+            const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
+            await renderer.renderModel(model);
+            (_a = props.rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
+            // Attach CopyButton to each <pre> block
+            if (containerRef.current && renderer.node) {
+                const preBlocks = renderer.node.querySelectorAll('pre');
+                preBlocks.forEach(preBlock => {
+                    var _a;
+                    const copyButtonContainer = document.createElement('div');
+                    (_a = preBlock.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(copyButtonContainer, preBlock.nextSibling);
+                    ReactDOM.render(React.createElement(CopyButton, { value: preBlock.textContent || '' }), copyButtonContainer);
+                });
+            }
+            setRenderedContent(renderer.node);
+        };
+        renderContent();
+    }, [props.markdownStr, props.rmRegistry]);
+    return (React.createElement("div", { ref: containerRef, className: RENDERMIME_MD_CLASS },
+        renderedContent &&
+            (appendContent ? (React.createElement("div", { ref: node => node && node.appendChild(renderedContent) })) : (React.createElement("div", { ref: node => node && node.replaceChildren(renderedContent) }))),
+        React.createElement(MessageToolbar, { edit: props.edit, delete: props.delete })));
+}
+export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);

package/lib/components/scroll-container.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material';
+type ScrollContainerProps = {
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Component that handles intelligent scrolling.
+ *
+ * - If viewport is at the bottom of the overflow container, appending new
+ * children keeps the viewport on the bottom of the overflow container.
+ *
+ * - If viewport is in the middle of the overflow container, appending new
+ * children leaves the viewport unaffected.
+ *
+ * Currently only works for Chrome and Firefox due to reliance on
+ * `overflow-anchor`.
+ *
+ * **References**
+ * - https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
+ */
+export declare function ScrollContainer(props: ScrollContainerProps): JSX.Element;
+export {};

package/lib/components/scroll-container.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useEffect, useMemo } from 'react';
+import { Box } from '@mui/material';
+/**
+ * Component that handles intelligent scrolling.
+ *
+ * - If viewport is at the bottom of the overflow container, appending new
+ * children keeps the viewport on the bottom of the overflow container.
+ *
+ * - If viewport is in the middle of the overflow container, appending new
+ * children leaves the viewport unaffected.
+ *
+ * Currently only works for Chrome and Firefox due to reliance on
+ * `overflow-anchor`.
+ *
+ * **References**
+ * - https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
+ */
+export function ScrollContainer(props) {
+    const id = useMemo(() => 'jupyter-chat-scroll-container-' + Date.now().toString(), []);
+    /**
+     * Effect: Scroll the container to the bottom as soon as it is visible.
+     */
+    useEffect(() => {
+        const el = document.querySelector(`#${id}`);
+        if (!el) {
+            return;
+        }
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    el.scroll({ top: 999999999 });
+                }
+            });
+        }, { threshold: 1.0 });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return (React.createElement(Box, { id: id, sx: {
+            overflowY: 'scroll',
+            '& *': {
+                overflowAnchor: 'none'
+            },
+            ...props.sx
+        } },
+        React.createElement(Box, { sx: { minHeight: '100.01%' } }, props.children),
+        React.createElement(Box, { sx: { overflowAnchor: 'auto', height: '1px' } })));
+}

package/lib/components/toolbar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * The toolbar attached to a message.
+ */
+export declare function MessageToolbar(props: MessageToolbar.IProps): JSX.Element;
+export declare namespace MessageToolbar {
+    interface IProps {
+        edit?: () => void;
+        delete?: () => void;
+    }
+}

package/lib/components/toolbar.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ToolbarButtonComponent, deleteIcon, editIcon } from '@jupyterlab/ui-components';
+import React from 'react';
+const TOOLBAR_CLASS = 'jp-chat-toolbar';
+/**
+ * The toolbar attached to a message.
+ */
+export function MessageToolbar(props) {
+    const buttons = [];
+    if (props.edit !== undefined) {
+        const editButton = ToolbarButtonComponent({
+            icon: editIcon,
+            onClick: props.edit,
+            tooltip: 'Edit'
+        });
+        buttons.push(editButton);
+    }
+    if (props.delete !== undefined) {
+        const deleteButton = ToolbarButtonComponent({
+            icon: deleteIcon,
+            onClick: props.delete,
+            tooltip: 'Delete'
+        });
+        buttons.push(deleteButton);
+    }
+    return (React.createElement("div", { className: TOOLBAR_CLASS }, buttons.map(toolbarButton => toolbarButton)));
+}

package/lib/icons.d.ts

@@ -0,0 +1,2 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export declare const chatIcon: LabIcon;

package/lib/icons.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// This file is based on iconimports.ts in @jupyterlab/ui-components, but is manually generated.
+import { LabIcon } from '@jupyterlab/ui-components';
+import chatSvgStr from '../style/icons/chat.svg';
+export const chatIcon = new LabIcon({
+    name: 'jupyter-chat::chat',
+    svgstr: chatSvgStr
+});

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './icons';
+export * from './model';
+export * from './types';
+export * from './widgets/chat-error';
+export * from './widgets/chat-sidebar';
+export * from './widgets/chat-widget';

package/lib/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './icons';
+export * from './model';
+export * from './types';
+export * from './widgets/chat-error';
+export * from './widgets/chat-sidebar';
+export * from './widgets/chat-widget';

package/lib/model.d.ts

@@ -0,0 +1,177 @@
+import { IDisposable } from '@lumino/disposable';
+import { ISignal } from '@lumino/signaling';
+import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
+/**
+ * The chat model interface.
+ */
+export interface IChatModel extends IDisposable {
+    /**
+     * The chat model ID.
+     */
+    id: string;
+    /**
+     * The configuration for the chat panel.
+     */
+    config: IConfig;
+    /**
+     * The user connected to the chat panel.
+     */
+    readonly user?: IUser;
+    /**
+     * The chat messages list.
+     */
+    readonly messages: IChatMessage[];
+    /**
+     * The signal emitted when the messages list is updated.
+     */
+    readonly messagesUpdated: ISignal<IChatModel, void>;
+    /**
+     * Send a message, to be defined depending on the chosen technology.
+     * Default to no-op.
+     *
+     * @param message - the message to send.
+     * @returns whether the message has been sent or not, or nothing if not needed.
+     */
+    addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Optional, to update a message from the chat panel.
+     *
+     * @param id - the unique ID of the message.
+     * @param message - the updated message.
+     */
+    updateMessage?(id: string, message: IChatMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Optional, to delete a message from the chat.
+     *
+     * @param id - the unique ID of the message.
+     */
+    deleteMessage?(id: string): Promise<boolean | void> | boolean | void;
+    /**
+     * Optional, to get messages history.
+     */
+    getHistory?(): Promise<IChatHistory>;
+    /**
+     * Dispose the chat model.
+     */
+    dispose(): void;
+    /**
+     * Whether the chat handler is disposed.
+     */
+    isDisposed: boolean;
+    /**
+     * Function to call when a message is received.
+     *
+     * @param message - the message with user information and body.
+     */
+    messageAdded(message: IChatMessage): void;
+    /**
+     * Function called when messages are inserted.
+     *
+     * @param index - the index of the first message of the list.
+     * @param messages - the messages list.
+     */
+    messagesInserted(index: number, messages: IChatMessage[]): void;
+    /**
+     * Function called when messages are deleted.
+     *
+     * @param index - the index of the first message to delete.
+     * @param count - the number of messages to delete.
+     */
+    messagesDeleted(index: number, count: number): void;
+}
+/**
+ * The default chat model implementation.
+ * It is not able to send or update a message by itself, since it depends on the
+ * chosen technology.
+ */
+export declare class ChatModel implements IChatModel {
+    /**
+     * Create a new chat model.
+     */
+    constructor(options?: ChatModel.IOptions);
+    /**
+     * The chat messages list.
+     */
+    get messages(): IChatMessage[];
+    /**
+     * The chat model ID.
+     */
+    get id(): string;
+    set id(value: string);
+    /**
+     * The chat settings.
+     */
+    get config(): IConfig;
+    set config(value: Partial<IConfig>);
+    /**
+     * The signal emitted when the messages list is updated.
+     */
+    get messagesUpdated(): ISignal<IChatModel, void>;
+    /**
+     * Send a message, to be defined depending on the chosen technology.
+     * Default to no-op.
+     *
+     * @param message - the message to send.
+     * @returns whether the message has been sent or not.
+     */
+    addMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Optional, to update a message from the chat panel.
+     *
+     * @param id - the unique ID of the message.
+     * @param message - the message to update.
+     */
+    updateMessage?(id: string, message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Dispose the chat model.
+     */
+    dispose(): void;
+    /**
+     * Whether the chat handler is disposed.
+     */
+    get isDisposed(): boolean;
+    /**
+     * A function called before transferring the message to the panel(s).
+     * Can be useful if some actions are required on the message.
+     */
+    protected formatChatMessage(message: IChatMessage): IChatMessage;
+    /**
+     * Function to call when a message is received.
+     *
+     * @param message - the message with user information and body.
+     */
+    messageAdded(message: IChatMessage): void;
+    /**
+     * Function called when messages are inserted.
+     *
+     * @param index - the index of the first message of the list.
+     * @param messages - the messages list.
+     */
+    messagesInserted(index: number, messages: IChatMessage[]): void;
+    /**
+     * Function called when messages are deleted.
+     *
+     * @param index - the index of the first message to delete.
+     * @param count - the number of messages to delete.
+     */
+    messagesDeleted(index: number, count: number): void;
+    private _messages;
+    private _id;
+    private _config;
+    private _isDisposed;
+    private _messagesUpdated;
+}
+/**
+ * The chat model namespace.
+ */
+export declare namespace ChatModel {
+    /**
+     * The instantiation options for a ChatModel.
+     */
+    interface IOptions {
+        /**
+         * Initial config for the chat widget.
+         */
+        config?: IConfig;
+    }
+}

package/lib/model.js

@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Signal } from '@lumino/signaling';
+/**
+ * The default chat model implementation.
+ * It is not able to send or update a message by itself, since it depends on the
+ * chosen technology.
+ */
+export class ChatModel {
+    /**
+     * Create a new chat model.
+     */
+    constructor(options = {}) {
+        var _a;
+        this._messages = [];
+        this._id = '';
+        this._isDisposed = false;
+        this._messagesUpdated = new Signal(this);
+        this._config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
+    }
+    /**
+     * The chat messages list.
+     */
+    get messages() {
+        return this._messages;
+    }
+    /**
+     * The chat model ID.
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+    }
+    /**
+     * The chat settings.
+     */
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        this._config = { ...this._config, ...value };
+    }
+    /**
+     * The signal emitted when the messages list is updated.
+     */
+    get messagesUpdated() {
+        return this._messagesUpdated;
+    }
+    /**
+     * Send a message, to be defined depending on the chosen technology.
+     * Default to no-op.
+     *
+     * @param message - the message to send.
+     * @returns whether the message has been sent or not.
+     */
+    addMessage(message) { }
+    /**
+     * Dispose the chat model.
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+    }
+    /**
+     * Whether the chat handler is disposed.
+     */
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    /**
+     * A function called before transferring the message to the panel(s).
+     * Can be useful if some actions are required on the message.
+     */
+    formatChatMessage(message) {
+        return message;
+    }
+    /**
+     * Function to call when a message is received.
+     *
+     * @param message - the message with user information and body.
+     */
+    messageAdded(message) {
+        const messageIndex = this._messages.findIndex(msg => msg.id === message.id);
+        if (messageIndex > -1) {
+            // The message is an update of an existing one.
+            // Let's remove it to avoid position conflict if timestamp has changed.
+            this._messages.splice(messageIndex, 1);
+        }
+        // Find the first message that should be after this one.
+        let nextMsgIndex = this._messages.findIndex(msg => msg.time > message.time);
+        if (nextMsgIndex === -1) {
+            // There is no message after this one, so let's insert the message at the end.
+            nextMsgIndex = this._messages.length;
+        }
+        // Insert the message.
+        this.messagesInserted(nextMsgIndex, [message]);
+    }
+    /**
+     * Function called when messages are inserted.
+     *
+     * @param index - the index of the first message of the list.
+     * @param messages - the messages list.
+     */
+    messagesInserted(index, messages) {
+        const formattedMessages = [];
+        messages.forEach(message => {
+            formattedMessages.push(this.formatChatMessage(message));
+        });
+        this._messages.splice(index, 0, ...formattedMessages);
+        this._messagesUpdated.emit();
+    }
+    /**
+     * Function called when messages are deleted.
+     *
+     * @param index - the index of the first message to delete.
+     * @param count - the number of messages to delete.
+     */
+    messagesDeleted(index, count) {
+        this._messages.splice(index, count);
+        this._messagesUpdated.emit();
+    }
+}

package/lib/theme-provider.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@mui/material/styles';
+export declare function pollUntilReady(): Promise<void>;
+export declare function getJupyterLabTheme(): Promise<Theme>;