@jupyter/chat 0.1.0 → 0.2.0

package/lib/components/chat.d.ts

@@ -2,15 +2,17 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IChatModel } from '../model';
+import { IAutocompletionRegistry } from '../registry';
+export declare function ChatBody(props: Chat.IChatBodyProps): JSX.Element;
 export declare function Chat(props: Chat.IOptions): JSX.Element;
 /**
  * The chat UI namespace
  */
 export declare namespace Chat {
     /**
-     * The options to build the Chat UI.
+     * The props for the chat body component.
      */
-    interface IOptions {
+    interface IChatBodyProps {
         /**
          * The chat model.
          */
@@ -19,6 +21,19 @@ export declare namespace Chat {
          * The rendermime registry.
          */
         rmRegistry: IRenderMimeRegistry;
+        /**
+         * Autocompletion registry.
+         */
+        autocompletionRegistry?: IAutocompletionRegistry;
+        /**
+         * Autocompletion name.
+         */
+        autocompletionName?: string;
+    }
+    /**
+     * The options to build the Chat UI.
+     */
+    interface IOptions extends IChatBodyProps {
         /**
          * The theme manager.
          */
@@ -26,7 +41,7 @@ export declare namespace Chat {
         /**
          * The view to render.
          */
-        chatView?: ChatView;
+        chatView?: View;
         /**
          * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
          */
@@ -36,8 +51,8 @@ export declare namespace Chat {
      * The view to render.
      * The settings view is available only if the settings panel is provided in options.
      */
-    enum ChatView {
-        Chat = 0,
-        Settings = 1
+    enum View {
+        chat = 0,
+        settings = 1
     }
 }

package/lib/components/chat.js

@@ -6,41 +6,13 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
-import { ScrollContainer } from './scroll-container';
-function ChatBody({ model, rmRegistry: renderMimeRegistry }) {
+export function ChatBody(props) {
     var _a;
-    const [messages, setMessages] = useState([]);
-    /**
-     * 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();
-    }, [model]);
-    /**
-     * Effect: listen to chat messages
-     */
-    useEffect(() => {
-        function handleChatEvents(_) {
-            setMessages([...model.messages]);
-        }
-        model.messagesUpdated.connect(handleChatEvents);
-        return function cleanup() {
-            model.messagesUpdated.disconnect(handleChatEvents);
-        };
-    }, [model]);
+    const { model, rmRegistry: renderMimeRegistry, autocompletionRegistry } = props;
     // no need to append to messageGroups imperatively here. all of that is
     // handled by the listeners registered in the effect hooks above.
     const onSend = async (input) => {
@@ -48,19 +20,18 @@ function ChatBody({ model, rmRegistry: renderMimeRegistry }) {
         model.addMessage({ body: input });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ScrollContainer, { sx: { flexGrow: 1 } },
-            React.createElement(ChatMessages, { messages: messages, rmRegistry: renderMimeRegistry, model: model })),
+        React.createElement(ChatMessages, { rmRegistry: renderMimeRegistry, model: model }),
         React.createElement(ChatInput, { onSend: onSend, sx: {
                 paddingLeft: 4,
                 paddingRight: 4,
                 paddingTop: 3.5,
                 paddingBottom: 0,
                 borderTop: '1px solid var(--jp-border-color1)'
-            }, sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false })));
+            }, sendWithShiftEnter: (_a = model.config.sendWithShiftEnter) !== null && _a !== void 0 ? _a : false, autocompletionRegistry: autocompletionRegistry })));
 }
 export function Chat(props) {
     var _a;
-    const [view, setView] = useState(props.chatView || Chat.ChatView.Chat);
+    const [view, setView] = useState(props.chatView || Chat.View.chat);
     return (React.createElement(JlThemeProvider, { themeManager: (_a = props.themeManager) !== null && _a !== void 0 ? _a : null },
         React.createElement(Box
         // root box should not include padding as it offsets the vertical
@@ -77,12 +48,12 @@ export function Chat(props) {
                 flexDirection: 'column'
             } },
             React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
-                view !== Chat.ChatView.Chat ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Chat) },
+                view !== Chat.View.chat ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.chat) },
                     React.createElement(ArrowBackIcon, null))) : (React.createElement(Box, null)),
-                view === Chat.ChatView.Chat && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.ChatView.Settings) },
+                view !== Chat.View.settings && props.settingsPanel ? (React.createElement(IconButton, { onClick: () => setView(Chat.View.settings) },
                     React.createElement(SettingsIcon, null))) : (React.createElement(Box, null))),
-            view === Chat.ChatView.Chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry })),
-            view === Chat.ChatView.Settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
+            view === Chat.View.chat && (React.createElement(ChatBody, { model: props.model, rmRegistry: props.rmRegistry, autocompletionRegistry: props.autocompletionRegistry })),
+            view === Chat.View.settings && props.settingsPanel && (React.createElement(props.settingsPanel, null)))));
 }
 /**
  * The chat UI namespace
@@ -92,9 +63,9 @@ export function Chat(props) {
      * The view to render.
      * The settings view is available only if the settings panel is provided in options.
      */
-    let ChatView;
-    (function (ChatView) {
-        ChatView[ChatView["Chat"] = 0] = "Chat";
-        ChatView[ChatView["Settings"] = 1] = "Settings";
-    })(ChatView = Chat.ChatView || (Chat.ChatView = {}));
+    let View;
+    (function (View) {
+        View[View["chat"] = 0] = "chat";
+        View[View["settings"] = 1] = "settings";
+    })(View = Chat.View || (Chat.View = {}));
 })(Chat || (Chat = {}));

package/lib/components/scroll-container.js

@@ -2,7 +2,7 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@mui/material';
 /**
  * Component that handles intelligent scrolling.
@@ -21,24 +21,6 @@ import { Box } from '@mui/material';
  */
 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',
             '& *': {

package/lib/icons.d.ts

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

package/lib/icons.js

@@ -5,7 +5,12 @@
 // 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';
+import readSvgStr from '../style/icons/read.svg';
 export const chatIcon = new LabIcon({
     name: 'jupyter-chat::chat',
     svgstr: chatSvgStr
 });
+export const readIcon = new LabIcon({
+    name: 'jupyter-chat::read',
+    svgstr: readSvgStr
+});

package/lib/index.d.ts

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

package/lib/index.js

@@ -4,6 +4,7 @@
  */
 export * from './icons';
 export * from './model';
+export * from './registry';
 export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';

package/lib/model.d.ts

@@ -1,3 +1,4 @@
+import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
 import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
@@ -6,13 +7,21 @@ import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types
  */
 export interface IChatModel extends IDisposable {
     /**
-     * The chat model ID.
+     * The chat model name.
      */
-    id: string;
+    name: string;
     /**
      * The configuration for the chat panel.
      */
     config: IConfig;
+    /**
+     * The indexes list of the unread messages.
+     */
+    unreadMessages: number[];
+    /**
+     * The indexes list of the messages currently in the viewport.
+     */
+    messagesInViewport?: number[];
     /**
      * The user connected to the chat panel.
      */
@@ -22,9 +31,17 @@ export interface IChatModel extends IDisposable {
      */
     readonly messages: IChatMessage[];
     /**
-     * The signal emitted when the messages list is updated.
+     * A signal emitting when the messages list is updated.
      */
     readonly messagesUpdated: ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when unread messages change.
+     */
+    readonly unreadChanged?: ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the viewport change.
+     */
+    readonly viewportChanged?: ISignal<IChatModel, number[]>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -94,19 +111,47 @@ export declare class ChatModel implements IChatModel {
      */
     get messages(): IChatMessage[];
     /**
-     * The chat model ID.
+     * The chat model id.
      */
-    get id(): string;
-    set id(value: string);
+    get id(): string | undefined;
+    set id(value: string | undefined);
+    /**
+     * The chat model name.
+     */
+    get name(): string;
+    set name(value: string);
+    /**
+     * Timestamp of the last read message in local storage.
+     */
+    get lastRead(): number;
+    set lastRead(value: number);
     /**
      * The chat settings.
      */
     get config(): IConfig;
     set config(value: Partial<IConfig>);
     /**
-     * The signal emitted when the messages list is updated.
+     * The indexes list of the unread messages.
+     */
+    get unreadMessages(): number[];
+    set unreadMessages(unread: number[]);
+    /**
+     * The indexes list of the messages currently in the viewport.
+     */
+    get messagesInViewport(): number[];
+    set messagesInViewport(values: number[]);
+    /**
+     * A signal emitting when the messages list is updated.
      */
     get messagesUpdated(): ISignal<IChatModel, void>;
+    /**
+     * A signal emitting when unread messages change.
+     */
+    get unreadChanged(): ISignal<IChatModel, number[]>;
+    /**
+     * A signal emitting when the viewport change.
+     */
+    get viewportChanged(): ISignal<IChatModel, number[]>;
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -115,13 +160,6 @@ export declare class ChatModel implements IChatModel {
      * @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.
      */
@@ -155,11 +193,33 @@ export declare class ChatModel implements IChatModel {
      * @param count - the number of messages to delete.
      */
     messagesDeleted(index: number, count: number): void;
+    /**
+     * Add unread messages to the list.
+     * @param indexes - list of new indexes.
+     */
+    private _addUnreadMessages;
+    /**
+     * Notifications on unread messages.
+     *
+     * @param unreadCount - number of unread messages.
+     *    If the value is 0, existing notification will be deleted.
+     * @param canCreate - whether to create a notification if it does not exist.
+     *    Usually it is used when there are new unread messages, and not when the
+     *    unread messages count decrease.
+     */
+    private _notify;
     private _messages;
+    private _unreadMessages;
+    private _messagesInViewport;
     private _id;
+    private _name;
     private _config;
     private _isDisposed;
+    private _commands?;
+    private _notificationId;
     private _messagesUpdated;
+    private _unreadChanged;
+    private _viewportChanged;
 }
 /**
  * The chat model namespace.
@@ -173,5 +233,9 @@ export declare namespace ChatModel {
          * Initial config for the chat widget.
          */
         config?: IConfig;
+        /**
+         * Commands registry.
+         */
+        commands?: CommandRegistry;
     }
 }

package/lib/model.js

@@ -15,10 +15,18 @@ export class ChatModel {
     constructor(options = {}) {
         var _a;
         this._messages = [];
-        this._id = '';
+        this._unreadMessages = [];
+        this._messagesInViewport = [];
+        this._name = '';
         this._isDisposed = false;
+        this._notificationId = null;
         this._messagesUpdated = new Signal(this);
-        this._config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
+        this._unreadChanged = new Signal(this);
+        this._viewportChanged = new Signal(this);
+        const config = (_a = options.config) !== null && _a !== void 0 ? _a : {};
+        // Stack consecutive messages from the same user by default.
+        this._config = { stackMessages: true, ...config };
+        this._commands = options.commands;
     }
     /**
      * The chat messages list.
@@ -27,7 +35,7 @@ export class ChatModel {
         return this._messages;
     }
     /**
-     * The chat model ID.
+     * The chat model id.
      */
     get id() {
         return this._id;
@@ -35,6 +43,34 @@ export class ChatModel {
     set id(value) {
         this._id = value;
     }
+    /**
+     * The chat model name.
+     */
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        this._name = value;
+    }
+    /**
+     * Timestamp of the last read message in local storage.
+     */
+    get lastRead() {
+        var _a;
+        if (this._id === undefined) {
+            return 0;
+        }
+        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
+        return (_a = storage.lastRead) !== null && _a !== void 0 ? _a : 0;
+    }
+    set lastRead(value) {
+        if (this._id === undefined) {
+            return;
+        }
+        const storage = JSON.parse(localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}');
+        storage.lastRead = value;
+        localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
+    }
     /**
      * The chat settings.
      */
@@ -42,14 +78,87 @@ export class ChatModel {
         return this._config;
     }
     set config(value) {
+        const stackMessagesChanged = 'stackMessages' in value &&
+            this._config.stackMessages !== value.stackMessages;
+        const unreadNotificationsChanged = 'unreadNotifications' in value &&
+            this._config.unreadNotifications !== value.unreadNotifications;
         this._config = { ...this._config, ...value };
+        if (stackMessagesChanged) {
+            if (this._config.stackMessages) {
+                this._messages.slice(1).forEach((message, idx) => {
+                    const previousUser = this._messages[idx].sender.username;
+                    message.stacked = previousUser === message.sender.username;
+                });
+            }
+            else {
+                this._messages.forEach(message => {
+                    delete message.stacked;
+                });
+            }
+            this._messagesUpdated.emit();
+        }
+        // remove existing notifications if they are not required anymore.
+        if (unreadNotificationsChanged && !this._config.unreadNotifications) {
+            this._notify(0);
+        }
+    }
+    /**
+     * The indexes list of the unread messages.
+     */
+    get unreadMessages() {
+        return this._unreadMessages;
+    }
+    set unreadMessages(unread) {
+        var _a;
+        const recentlyRead = this._unreadMessages.filter(elem => !unread.includes(elem));
+        const unreadCountDiff = unread.length - this._unreadMessages.length;
+        this._unreadMessages = unread;
+        this._unreadChanged.emit(this._unreadMessages);
+        // Notify the change.
+        this._notify(unread.length, unreadCountDiff > 0);
+        // Save the last read to the local storage.
+        if (this._id !== undefined && recentlyRead.length) {
+            let lastReadChanged = false;
+            let lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : this.messages[recentlyRead[0]].time;
+            recentlyRead.forEach(index => {
+                if (this.messages[index].time > lastRead) {
+                    lastRead = this.messages[index].time;
+                    lastReadChanged = true;
+                }
+            });
+            if (lastReadChanged) {
+                this.lastRead = lastRead;
+            }
+        }
     }
     /**
-     * The signal emitted when the messages list is updated.
+     * The indexes list of the messages currently in the viewport.
+     */
+    get messagesInViewport() {
+        return this._messagesInViewport;
+    }
+    set messagesInViewport(values) {
+        this._messagesInViewport = values;
+        this._viewportChanged.emit(values);
+    }
+    /**
+     * A signal emitting when the messages list is updated.
      */
     get messagesUpdated() {
         return this._messagesUpdated;
     }
+    /**
+     * A signal emitting when unread messages change.
+     */
+    get unreadChanged() {
+        return this._unreadChanged;
+    }
+    /**
+     * A signal emitting when the viewport change.
+     */
+    get viewportChanged() {
+        return this._viewportChanged;
+    }
     /**
      * Send a message, to be defined depending on the chosen technology.
      * Default to no-op.
@@ -108,11 +217,32 @@ export class ChatModel {
      * @param messages - the messages list.
      */
     messagesInserted(index, messages) {
+        var _a;
         const formattedMessages = [];
-        messages.forEach(message => {
+        const unreadIndexes = [];
+        const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
+        // Format the messages.
+        messages.forEach((message, idx) => {
             formattedMessages.push(this.formatChatMessage(message));
+            if (message.time > lastRead) {
+                unreadIndexes.push(index + idx);
+            }
         });
+        // Insert the messages.
         this._messages.splice(index, 0, ...formattedMessages);
+        if (this._config.stackMessages) {
+            // Check if some messages should be stacked by comparing each message' sender
+            // with the previous one.
+            const lastIdx = index + formattedMessages.length - 1;
+            const start = index === 0 ? 1 : index;
+            const end = this._messages.length > lastIdx + 1 ? lastIdx + 1 : lastIdx;
+            for (let idx = start; idx <= end; idx++) {
+                const message = this._messages[idx];
+                const previousUser = this._messages[idx - 1].sender.username;
+                message.stacked = previousUser === message.sender.username;
+            }
+        }
+        this._addUnreadMessages(unreadIndexes);
         this._messagesUpdated.emit();
     }
     /**
@@ -125,4 +255,52 @@ export class ChatModel {
         this._messages.splice(index, count);
         this._messagesUpdated.emit();
     }
+    /**
+     * Add unread messages to the list.
+     * @param indexes - list of new indexes.
+     */
+    _addUnreadMessages(indexes) {
+        const unread = new Set(this._unreadMessages);
+        indexes.forEach(index => unread.add(index));
+        this.unreadMessages = Array.from(unread.values());
+    }
+    /**
+     * Notifications on unread messages.
+     *
+     * @param unreadCount - number of unread messages.
+     *    If the value is 0, existing notification will be deleted.
+     * @param canCreate - whether to create a notification if it does not exist.
+     *    Usually it is used when there are new unread messages, and not when the
+     *    unread messages count decrease.
+     */
+    _notify(unreadCount, canCreate = false) {
+        if (this._commands) {
+            if (unreadCount && this._config.unreadNotifications) {
+                // Update the notification if exist.
+                this._commands
+                    .execute('apputils:update-notification', {
+                    id: this._notificationId,
+                    message: `${unreadCount} incoming message(s) ${this._name ? 'in ' + this._name : ''}`
+                })
+                    .then(success => {
+                    // Create a new notification only if messages are added.
+                    if (!success && canCreate) {
+                        this._commands.execute('apputils:notify', {
+                            type: 'info',
+                            message: `${unreadCount} incoming message(s) in ${this._name}`
+                        }).then(id => {
+                            this._notificationId = id;
+                        });
+                    }
+                });
+            }
+            else if (this._notificationId) {
+                // Delete notification if there is no more unread messages.
+                this._commands.execute('apputils:dismiss-notification', {
+                    id: this._notificationId
+                });
+                this._notificationId = null;
+            }
+        }
+    }
 }