@jupyter/chat 0.1.0 → 0.3.0

package/lib/model.js

@@ -13,12 +13,22 @@ export class ChatModel {
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a;
+        var _a, _b;
         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._configChanged = new Signal(this);
+        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;
+        this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
     }
     /**
      * The chat messages list.
@@ -26,8 +36,11 @@ export class ChatModel {
     get messages() {
         return this._messages;
     }
+    get activeCellManager() {
+        return this._activeCellManager;
+    }
     /**
-     * The chat model ID.
+     * The chat model id.
      */
     get id() {
         return this._id;
@@ -35,6 +48,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 +83,95 @@ 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 };
+        this._configChanged.emit(this._config);
+        // Update the stacked status of the messages and the view.
+        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 signal emitted when the messages list is updated.
+     * 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 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 the messages list is updated.
+     */
+    get configChanged() {
+        return this._configChanged;
+    }
+    /**
+     * 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 +230,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 +268,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;
+            }
+        }
+    }
 }

package/lib/registry.d.ts

@@ -0,0 +1,78 @@
+import { Token } from '@lumino/coreutils';
+import { IAutocompletionCommandsProps } from './types';
+/**
+ * The token for the autocomplete registry, which can be provided by an extension
+ * using @jupyter/chat package.
+ */
+export declare const IAutocompletionRegistry: Token<IAutocompletionRegistry>;
+/**
+ * The interface of a registry to provide autocompleters.
+ */
+export interface IAutocompletionRegistry {
+    /**
+     * The default autocompletion name.
+     */
+    default: string | null;
+    /**
+     * Get the default autocompletion.
+     */
+    getDefaultCompletion(): IAutocompletionCommandsProps | undefined;
+    /**
+     * Return a registered autocomplete props.
+     *
+     * @param name - the name of the registered autocomplete props.
+     */
+    get(name: string): IAutocompletionCommandsProps | undefined;
+    /**
+     * Register autocomplete props.
+     *
+     * @param name - the name for the registration.
+     * @param autocompletion - the autocomplete props.
+     */
+    add(name: string, autocompletion: IAutocompletionCommandsProps): boolean;
+    /**
+     * Remove a registered autocomplete props.
+     *
+     * @param name - the name of the autocomplete props.
+     */
+    remove(name: string): boolean;
+}
+/**
+ * A registry to provide autocompleters.
+ */
+export declare class AutocompletionRegistry implements IAutocompletionRegistry {
+    /**
+     * Getter and setter for the default autocompletion name.
+     */
+    get default(): string | null;
+    set default(name: string | null);
+    /**
+     * Get the default autocompletion.
+     */
+    getDefaultCompletion(): IAutocompletionCommandsProps | undefined;
+    /**
+     * Return a registered autocomplete props.
+     *
+     * @param name - the name of the registered autocomplete props.
+     */
+    get(name: string): IAutocompletionCommandsProps | undefined;
+    /**
+     * Register autocomplete props.
+     *
+     * @param name - the name for the registration.
+     * @param autocompletion - the autocomplete props.
+     */
+    add(name: string, autocompletion: IAutocompletionCommandsProps, isDefault?: boolean): boolean;
+    /**
+     * Remove a registered autocomplete props.
+     *
+     * @param name - the name of the autocomplete props.
+     */
+    remove(name: string): boolean;
+    /**
+     * Remove all registered autocompletions.
+     */
+    removeAll(): void;
+    private _default;
+    private _autocompletions;
+}

package/lib/registry.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Token } from '@lumino/coreutils';
+/**
+ * The token for the autocomplete registry, which can be provided by an extension
+ * using @jupyter/chat package.
+ */
+export const IAutocompletionRegistry = new Token('@jupyter/chat:IAutocompleteRegistry');
+/**
+ * A registry to provide autocompleters.
+ */
+export class AutocompletionRegistry {
+    constructor() {
+        this._default = null;
+        this._autocompletions = new Map();
+    }
+    /**
+     * Getter and setter for the default autocompletion name.
+     */
+    get default() {
+        return this._default;
+    }
+    set default(name) {
+        if (name === null || this._autocompletions.has(name)) {
+            this._default = name;
+        }
+        else {
+            console.warn(`There is no registered completer with the name '${name}'`);
+        }
+    }
+    /**
+     * Get the default autocompletion.
+     */
+    getDefaultCompletion() {
+        if (this._default === null) {
+            return undefined;
+        }
+        return this._autocompletions.get(this._default);
+    }
+    /**
+     * Return a registered autocomplete props.
+     *
+     * @param name - the name of the registered autocomplete props.
+     */
+    get(name) {
+        return this._autocompletions.get(name);
+    }
+    /**
+     * Register autocomplete props.
+     *
+     * @param name - the name for the registration.
+     * @param autocompletion - the autocomplete props.
+     */
+    add(name, autocompletion, isDefault = false) {
+        if (!this._autocompletions.has(name)) {
+            this._autocompletions.set(name, autocompletion);
+            if (this._autocompletions.size === 1 || isDefault) {
+                this.default = name;
+            }
+            return true;
+        }
+        else {
+            console.warn(`A completer with the name '${name}' is already registered`);
+            return false;
+        }
+    }
+    /**
+     * Remove a registered autocomplete props.
+     *
+     * @param name - the name of the autocomplete props.
+     */
+    remove(name) {
+        return this._autocompletions.delete(name);
+    }
+    /**
+     * Remove all registered autocompletions.
+     */
+    removeAll() {
+        this._autocompletions.clear();
+    }
+}

package/lib/types.d.ts

@@ -13,21 +13,40 @@ export interface IUser {
  * The configuration interface.
  */
 export interface IConfig {
+    /**
+     * Whether to send a message via Shift-Enter instead of Enter.
+     */
     sendWithShiftEnter?: boolean;
+    /**
+     * Last read message (no use yet).
+     */
     lastRead?: number;
+    /**
+     * Whether to stack consecutive messages from same user.
+     */
+    stackMessages?: boolean;
+    /**
+     * Whether to enable or not the notifications on unread messages.
+     */
+    unreadNotifications?: boolean;
+    /**
+     * Whether to enable or not the code toolbar.
+     */
+    enableCodeToolbar?: boolean;
 }
 /**
- * The chat message decription.
+ * The chat message description.
  */
-export interface IChatMessage {
+export interface IChatMessage<T = IUser> {
     type: 'msg';
     body: string;
     id: string;
     time: number;
-    sender: IUser | string;
+    sender: T;
     raw_time?: boolean;
     deleted?: boolean;
     edited?: boolean;
+    stacked?: boolean;
 }
 /**
  * The chat history interface.
@@ -43,7 +62,44 @@ export interface INewMessage {
     id?: string;
 }
 /**
- * An empty interface to describe optional settings taht could be fetched from server.
+ * An empty interface to describe optional settings that could be fetched from server.
  */
 export interface ISettings {
 }
+/**
+ * The autocomplete command type.
+ */
+export type AutocompleteCommand = {
+    label: string;
+};
+/**
+ * The properties of the autocompletion.
+ *
+ * The autocompletion component will open if the 'opener' string is typed at the
+ * beginning of the input field.
+ */
+export interface IAutocompletionCommandsProps {
+    /**
+     * The string that open the completer.
+     */
+    opener: string;
+    /**
+     * The list of available commands.
+     */
+    commands?: AutocompleteCommand[] | (() => Promise<AutocompleteCommand[]>);
+    /**
+     * The props for the Autocomplete component.
+     *
+     * Must be compatible with https://mui.com/material-ui/api/autocomplete/#props.
+     *
+     * ## NOTES:
+     * - providing `options` will overwrite the commands argument.
+     * - providing `renderInput` will overwrite the input component.
+     * - providing `renderOptions` allows to customize the rendering of the component.
+     * - some arguments should not be provided and would be overwritten:
+     *   - inputValue
+     *   - onInputChange
+     *   - onHighlightChange
+     */
+    props?: any;
+}

package/lib/widgets/chat-sidebar.d.ts

@@ -1,4 +1,3 @@
-import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { IChatModel } from '../model';
-export declare function buildChatSidebar(chatModel: IChatModel, themeManager: IThemeManager | null, rmRegistry: IRenderMimeRegistry): ReactWidget;
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Chat } from '../components/chat';
+export declare function buildChatSidebar(options: Chat.IOptions): ReactWidget;

package/lib/widgets/chat-sidebar.js

@@ -6,8 +6,8 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
 import { Chat } from '../components/chat';
 import { chatIcon } from '../icons';
-export function buildChatSidebar(chatModel, themeManager, rmRegistry) {
-    const ChatWidget = ReactWidget.create(React.createElement(Chat, { model: chatModel, themeManager: themeManager, rmRegistry: rmRegistry }));
+export function buildChatSidebar(options) {
+    const ChatWidget = ReactWidget.create(React.createElement(Chat, { ...options }));
     ChatWidget.id = 'jupyter-chat::side-panel';
     ChatWidget.title.icon = chatIcon;
     ChatWidget.title.caption = 'Jupyter Chat'; // TODO: i18n

package/lib/widgets/chat-widget.d.ts

@@ -5,15 +5,9 @@ import { IChatModel } from '../model';
 export declare class ChatWidget extends ReactWidget {
     constructor(options: Chat.IOptions);
     /**
-     * Gte the model of the widget.
+     * Get the model of the widget.
      */
     get model(): IChatModel;
     render(): React.JSX.Element;
-    private readonly _model;
-    private _themeManager;
-    private _rmRegistry;
-}
-export declare namespace ChatWidget {
-    interface IOptions extends Chat.IOptions {
-    }
+    private _chatOptions;
 }

package/lib/widgets/chat-widget.js

@@ -12,17 +12,17 @@ export class ChatWidget extends ReactWidget {
         this.id = 'jupyter-chat::widget';
         this.title.icon = chatIcon;
         this.title.caption = 'Jupyter Chat'; // TODO: i18n
-        this._model = options.model;
-        this._themeManager = (options === null || options === void 0 ? void 0 : options.themeManager) || null;
-        this._rmRegistry = options.rmRegistry;
+        this._chatOptions = options;
     }
     /**
-     * Gte the model of the widget.
+     * Get the model of the widget.
      */
     get model() {
-        return this._model;
+        return this._chatOptions.model;
     }
     render() {
-        return (React.createElement(Chat, { model: this._model, themeManager: this._themeManager, rmRegistry: this._rmRegistry }));
+        // The model need to be passed, otherwise it is undefined in the widget in
+        // the case of collaborative document.
+        return React.createElement(Chat, { ...this._chatOptions, model: this._chatOptions.model });
     }
 }