jupyterlab-chat 0.6.0

package/lib/token.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { chatIcon } from '@jupyter/chat';
+import { Token } from '@lumino/coreutils';
+/**
+ * The file type for a chat document.
+ */
+export const chatFileType = {
+    name: 'chat',
+    displayName: 'Chat',
+    mimeTypes: ['text/json', 'application/json'],
+    extensions: ['.chat'],
+    fileFormat: 'text',
+    contentType: 'chat',
+    icon: chatIcon
+};
+/**
+ * The token for the chat widget factory.
+ */
+export const IChatFactory = new Token('jupyterlab-chat:IChatFactory');
+/**
+ * Command ids.
+ */
+export const CommandIDs = {
+    /**
+     * Create a chat file.
+     */
+    createChat: 'jupyterlab-chat:create',
+    /**
+     * Open a chat file.
+     */
+    openChat: 'jupyterlab-chat:open',
+    /**
+     * Move a main widget to the side panel.
+     */
+    moveToSide: 'jupyterlab-chat:moveToSide',
+    /**
+     * Mark as read.
+     */
+    markAsRead: 'jupyterlab-chat:markAsRead',
+    /**
+     * Focus the input of the current chat.
+     */
+    focusInput: 'jupyterlab-chat:focusInput'
+};
+/**
+ * The chat panel token.
+ */
+export const IChatPanel = new Token('jupyterlab-chat:IChatPanel');
+/**
+ * The active cell manager plugin.
+ */
+export const IActiveCellManagerToken = new Token('jupyterlab-chat:IActiveCellManager');
+/**
+ * The selection watcher plugin.
+ */
+export const ISelectionWatcherToken = new Token('jupyterlab-chat:ISelectionWatcher');

package/lib/widget.d.ts

@@ -0,0 +1,121 @@
+import { ChatWidget, IAutocompletionRegistry, IChatModel } from '@jupyter/chat';
+import { ICollaborativeDrive } from '@jupyter/docprovider';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { SidePanel } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { Message } from '@lumino/messaging';
+import { Panel } from '@lumino/widgets';
+import { LabChatModel } from './model';
+/**
+ * DocumentWidget: widget that represents the view or editor for a file type.
+ */
+export declare class LabChatPanel extends DocumentWidget<ChatWidget, LabChatModel> {
+    constructor(options: DocumentWidget.IOptions<ChatWidget, LabChatModel>);
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose(): void;
+    /**
+     * The model for the widget.
+     */
+    get model(): LabChatModel;
+    /**
+     * Add class to tab when messages are unread.
+     */
+    private _unreadChanged;
+}
+/**
+ * Sidepanel widget including the chats and the add chat button.
+ */
+export declare class ChatPanel extends SidePanel {
+    /**
+     * The constructor of the chat panel.
+     */
+    constructor(options: ChatPanel.IOptions);
+    /**
+     * Getter and setter of the defaultDirectory.
+     */
+    get defaultDirectory(): string;
+    set defaultDirectory(value: string);
+    /**
+     * Add a new widget to the chat panel.
+     *
+     * @param model - the model of the chat widget
+     * @param name - the name of the chat.
+     */
+    addChat(model: IChatModel, path: string): void;
+    /**
+     * Update the list of available chats in the default directory.
+     */
+    updateChatList: () => Promise<void>;
+    /**
+     * Open a chat if it exists in the side panel.
+     *
+     * @param path - the path of the chat.
+     * @returns a boolean, whether the chat existed in the side panel or not.
+     */
+    openIfExists(path: string): boolean;
+    /**
+     * A message handler invoked on an `'after-show'` message.
+     */
+    protected onAfterShow(msg: Message): void;
+    /**
+     * Return the index of the chat in the list (-1 if not opened).
+     *
+     * @param name - the chat name.
+     */
+    private _getChatIndex;
+    /**
+     * Expand the chat from its index.
+     */
+    private _expandChat;
+    /**
+     * Handle `change` events for the HTMLSelect component.
+     */
+    private _chatSelected;
+    /**
+     * Triggered when a section is toogled. If the section is opened, all others
+     * sections are closed.
+     */
+    private _onExpansionToggled;
+    private _chatNamesChanged;
+    private _commands;
+    private _defaultDirectory;
+    private _drive;
+    private _openChat;
+    private _rmRegistry;
+    private _themeManager;
+    private _autocompletionRegistry?;
+}
+/**
+ * The chat panel namespace.
+ */
+export declare namespace ChatPanel {
+    /**
+     * Options of the constructor of the chat panel.
+     */
+    interface IOptions extends SidePanel.IOptions {
+        commands: CommandRegistry;
+        drive: ICollaborativeDrive;
+        rmRegistry: IRenderMimeRegistry;
+        themeManager: IThemeManager | null;
+        defaultDirectory: string;
+        autocompletionRegistry?: IAutocompletionRegistry;
+    }
+}
+/**
+ * The chat section namespace.
+ */
+export declare namespace ChatSection {
+    /**
+     * Options to build a chat section.
+     */
+    interface IOptions extends Panel.IOptions {
+        commands: CommandRegistry;
+        defaultDirectory: string;
+        widget: ChatWidget;
+        path: string;
+    }
+}

package/lib/widget.js

@@ -0,0 +1,342 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ChatWidget, readIcon } from '@jupyter/chat';
+import { PathExt } from '@jupyterlab/coreutils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { addIcon, closeIcon, CommandToolbarButton, HTMLSelect, launchIcon, PanelWithToolbar, ReactWidget, SidePanel, ToolbarButton } from '@jupyterlab/ui-components';
+import { Signal } from '@lumino/signaling';
+import React, { useState } from 'react';
+import { CommandIDs, chatFileType } from './token';
+const MAIN_PANEL_CLASS = 'jp-lab-chat-main-panel';
+const TITLE_UNREAD_CLASS = 'jp-lab-chat-title-unread';
+const SIDEPANEL_CLASS = 'jp-lab-chat-sidepanel';
+const ADD_BUTTON_CLASS = 'jp-lab-chat-add';
+const OPEN_SELECT_CLASS = 'jp-lab-chat-open';
+const SECTION_CLASS = 'jp-lab-chat-section';
+const TOOLBAR_CLASS = 'jp-lab-chat-toolbar';
+/**
+ * DocumentWidget: widget that represents the view or editor for a file type.
+ */
+export class LabChatPanel extends DocumentWidget {
+    constructor(options) {
+        super(options);
+        /**
+         * Add class to tab when messages are unread.
+         */
+        this._unreadChanged = (_, unread) => {
+            if (unread.length) {
+                if (!this.title.className.includes(TITLE_UNREAD_CLASS)) {
+                    this.title.className += ` ${TITLE_UNREAD_CLASS}`;
+                }
+            }
+            else {
+                this.title.className = this.title.className.replace(TITLE_UNREAD_CLASS, '');
+            }
+        };
+        this.addClass(MAIN_PANEL_CLASS);
+        this.model.name = this.context.localPath;
+        this.model.unreadChanged.connect(this._unreadChanged);
+    }
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose() {
+        this.model.unreadChanged.disconnect(this._unreadChanged);
+        this.context.dispose();
+        this.content.dispose();
+        super.dispose();
+    }
+    /**
+     * The model for the widget.
+     */
+    get model() {
+        return this.context.model;
+    }
+}
+/**
+ * Sidepanel widget including the chats and the add chat button.
+ */
+export class ChatPanel extends SidePanel {
+    /**
+     * The constructor of the chat panel.
+     */
+    constructor(options) {
+        super(options);
+        /**
+         * Update the list of available chats in the default directory.
+         */
+        this.updateChatList = async () => {
+            const extension = chatFileType.extensions[0];
+            this._drive
+                .get(this._defaultDirectory)
+                .then(contentModel => {
+                const chatsNames = {};
+                contentModel.content
+                    .filter(f => f.type === 'file' && f.name.endsWith(extension))
+                    .forEach(f => {
+                    chatsNames[PathExt.basename(f.name, extension)] = f.path;
+                });
+                this._chatNamesChanged.emit(chatsNames);
+            })
+                .catch(e => console.error('Error getting the chat files from drive', e));
+        };
+        /**
+         * Handle `change` events for the HTMLSelect component.
+         */
+        this._chatSelected = (event) => {
+            const select = event.target;
+            const path = select.value;
+            const name = select.options[select.selectedIndex].textContent;
+            if (name === '-') {
+                return;
+            }
+            this._commands.execute(CommandIDs.openChat, {
+                filepath: path,
+                inSidePanel: true
+            });
+            event.target.selectedIndex = 0;
+        };
+        this._chatNamesChanged = new Signal(this);
+        this.addClass(SIDEPANEL_CLASS);
+        this._commands = options.commands;
+        this._drive = options.drive;
+        this._rmRegistry = options.rmRegistry;
+        this._themeManager = options.themeManager;
+        this._defaultDirectory = options.defaultDirectory;
+        this._autocompletionRegistry = options.autocompletionRegistry;
+        const addChat = new CommandToolbarButton({
+            commands: this._commands,
+            id: CommandIDs.createChat,
+            args: { inSidePanel: true },
+            icon: addIcon
+        });
+        addChat.addClass(ADD_BUTTON_CLASS);
+        this.toolbar.addItem('createChat', addChat);
+        this._openChat = ReactWidget.create(React.createElement(ChatSelect, { chatNamesChanged: this._chatNamesChanged, handleChange: this._chatSelected.bind(this) }));
+        this._openChat.addClass(OPEN_SELECT_CLASS);
+        this.toolbar.addItem('openChat', this._openChat);
+        const content = this.content;
+        content.expansionToggled.connect(this._onExpansionToggled, this);
+    }
+    /**
+     * Getter and setter of the defaultDirectory.
+     */
+    get defaultDirectory() {
+        return this._defaultDirectory;
+    }
+    set defaultDirectory(value) {
+        if (value === this._defaultDirectory) {
+            return;
+        }
+        this._defaultDirectory = value;
+        // Update the list of discoverable chat (in default directory)
+        this.updateChatList();
+        // Update the sections names.
+        this.widgets.forEach(w => {
+            w.defaultDirectory = value;
+        });
+    }
+    /**
+     * Add a new widget to the chat panel.
+     *
+     * @param model - the model of the chat widget
+     * @param name - the name of the chat.
+     */
+    addChat(model, path) {
+        // Collapse all chats
+        const content = this.content;
+        for (let i = 0; i < this.widgets.length; i++) {
+            content.collapse(i);
+        }
+        // Set the name of the model.
+        model.name = path;
+        // Create a new widget.
+        const widget = new ChatWidget({
+            model: model,
+            rmRegistry: this._rmRegistry,
+            themeManager: this._themeManager,
+            autocompletionRegistry: this._autocompletionRegistry
+        });
+        this.addWidget(new ChatSection({
+            widget,
+            commands: this._commands,
+            path,
+            defaultDirectory: this._defaultDirectory
+        }));
+    }
+    /**
+     * Open a chat if it exists in the side panel.
+     *
+     * @param path - the path of the chat.
+     * @returns a boolean, whether the chat existed in the side panel or not.
+     */
+    openIfExists(path) {
+        const index = this._getChatIndex(path);
+        if (index > -1) {
+            this._expandChat(index);
+        }
+        return index > -1;
+    }
+    /**
+     * A message handler invoked on an `'after-show'` message.
+     */
+    onAfterShow(msg) {
+        var _a;
+        // Wait for the component to be rendered.
+        (_a = this._openChat.renderPromise) === null || _a === void 0 ? void 0 : _a.then(() => this.updateChatList());
+    }
+    /**
+     * Return the index of the chat in the list (-1 if not opened).
+     *
+     * @param name - the chat name.
+     */
+    _getChatIndex(path) {
+        return this.widgets.findIndex(w => w.path === path);
+    }
+    /**
+     * Expand the chat from its index.
+     */
+    _expandChat(index) {
+        if (!this.widgets[index].isVisible) {
+            this.content.expand(index);
+        }
+    }
+    /**
+     * Triggered when a section is toogled. If the section is opened, all others
+     * sections are closed.
+     */
+    _onExpansionToggled(panel, index) {
+        if (!this.widgets[index].isVisible) {
+            return;
+        }
+        for (let i = 0; i < this.widgets.length; i++) {
+            if (i !== index) {
+                panel.collapse(i);
+            }
+        }
+    }
+}
+/**
+ * The chat section containing a chat widget.
+ */
+class ChatSection extends PanelWithToolbar {
+    /**
+     * Constructor of the chat section.
+     */
+    constructor(options) {
+        var _a;
+        super(options);
+        /**
+         * Change the title when messages are unread.
+         *
+         * TODO: fix it upstream in @jupyterlab/ui-components.
+         * Updating the title create a new Title widget, but does not attach again the
+         * toolbar. The toolbar is attached only when the title widget is attached the first
+         * time.
+         */
+        this._unreadChanged = (_, unread) => {
+            this._markAsRead.enabled = unread.length > 0;
+            // this.title.label = `${unread.length ? '* ' : ''}${this._name}`;
+        };
+        this.addWidget(options.widget);
+        this.addClass(SECTION_CLASS);
+        this._defaultDirectory = options.defaultDirectory;
+        this._path = options.path;
+        this._updateTitle();
+        this.toolbar.addClass(TOOLBAR_CLASS);
+        this._markAsRead = new ToolbarButton({
+            icon: readIcon,
+            iconLabel: 'Mark chat as read',
+            className: 'jp-mod-styled',
+            onClick: () => (this.model.unreadMessages = [])
+        });
+        const moveToMain = new ToolbarButton({
+            icon: launchIcon,
+            iconLabel: 'Move the chat to the main area',
+            className: 'jp-mod-styled',
+            onClick: () => {
+                this.model.dispose();
+                options.commands.execute(CommandIDs.openChat, {
+                    filepath: this._path
+                });
+                this.dispose();
+            }
+        });
+        const closeButton = new ToolbarButton({
+            icon: closeIcon,
+            iconLabel: 'Close the chat',
+            className: 'jp-mod-styled',
+            onClick: () => {
+                this.model.dispose();
+                this.dispose();
+            }
+        });
+        this.toolbar.addItem('jupyterlabChat-markRead', this._markAsRead);
+        this.toolbar.addItem('jupyterlabChat-moveMain', moveToMain);
+        this.toolbar.addItem('jupyterlabChat-close', closeButton);
+        (_a = this.model.unreadChanged) === null || _a === void 0 ? void 0 : _a.connect(this._unreadChanged);
+        this._markAsRead.enabled = this.model.unreadMessages.length > 0;
+        options.widget.node.style.height = '100%';
+    }
+    /**
+     * The path of the chat.
+     */
+    get path() {
+        return this._path;
+    }
+    /**
+     * Set the default directory property.
+     */
+    set defaultDirectory(value) {
+        this._defaultDirectory = value;
+        this._updateTitle();
+    }
+    /**
+     * The model of the widget.
+     */
+    get model() {
+        return this.widgets[0].model;
+    }
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose() {
+        var _a;
+        (_a = this.model.unreadChanged) === null || _a === void 0 ? void 0 : _a.disconnect(this._unreadChanged);
+        super.dispose();
+    }
+    /**
+     * Update the section's title, depending on the default directory and chat file name.
+     * If the chat file is in the default directory, the section's name is its relative
+     * path to that default directory. Otherwise, it is it absolute path.
+     */
+    _updateTitle() {
+        const inDefault = this._defaultDirectory
+            ? !PathExt.relative(this._defaultDirectory, this._path).startsWith('..')
+            : true;
+        const pattern = new RegExp(`${chatFileType.extensions[0]}$`, 'g');
+        this.title.label = (inDefault
+            ? this._defaultDirectory
+                ? PathExt.relative(this._defaultDirectory, this._path)
+                : this._path
+            : '/' + this._path).replace(pattern, '');
+        this.title.caption = this._path;
+    }
+}
+/**
+ * A component to select a chat from the drive.
+ */
+function ChatSelect({ chatNamesChanged, handleChange }) {
+    // An object associating a chat name to its path. Both are purely indicative, the name
+    // is the section title and the path is used as caption.
+    const [chatNames, setChatNames] = useState({});
+    // Update the chat list.
+    chatNamesChanged.connect((_, chatNames) => {
+        setChatNames(chatNames);
+    });
+    return (React.createElement(HTMLSelect, { onChange: handleChange },
+        React.createElement("option", { value: "-" }, "Open a chat"),
+        Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
+}

package/lib/ychat.d.ts

@@ -0,0 +1,75 @@
+import { IChatMessage, IUser } from '@jupyter/chat';
+import { Delta, DocumentChange, IMapChange, YDocument } from '@jupyter/ydoc';
+import { JSONObject, PartialJSONValue } from '@lumino/coreutils';
+/**
+ * The type for a YMessage.
+ */
+export type IYmessage = IChatMessage<string>;
+/**
+ * The type for a YMessage.
+ */
+export type IMetadata = PartialJSONValue;
+/**
+ * Definition of the shared Chat changes.
+ */
+export interface IChatChanges extends DocumentChange {
+    /**
+     * Changes in messages.
+     */
+    messageChanges?: MessageChange;
+    /**
+     * Changes in users.
+     */
+    userChanges?: UserChange[];
+    /**
+     * Changes in metadata.
+     */
+    metadataChanges?: MetadataChange[];
+}
+/**
+ * The message change type.
+ */
+export type MessageChange = Delta<IYmessage[]>;
+/**
+ * The user change type.
+ */
+export type UserChange = IMapChange<IUser>;
+/**
+ * The metadata change type.
+ */
+export type MetadataChange = IMapChange<IMetadata>;
+/**
+ * The jupyterlab chat shared document.
+ */
+export declare class YChat extends YDocument<IChatChanges> {
+    /**
+     * Create a new jupyterlab chat model.
+     */
+    constructor(options?: YDocument.IOptions);
+    /**
+     * Document version
+     */
+    readonly version: string;
+    /**
+     * Static method to create instances on the sharedModel
+     *
+     * @returns The sharedModel instance
+     */
+    static create(options?: YDocument.IOptions): YChat;
+    get id(): string;
+    get users(): JSONObject;
+    get messages(): string[];
+    getUser(username: string | undefined): IUser | undefined;
+    setUser(value: IUser): void;
+    getMessage(index: number): IYmessage | undefined;
+    addMessage(value: IYmessage): void;
+    updateMessage(index: number, value: IYmessage): void;
+    getMessageIndex(id: string): number;
+    deleteMessage(index: number): void;
+    private _usersObserver;
+    private _messagesObserver;
+    private _metadataObserver;
+    private _users;
+    private _messages;
+    private _metadata;
+}