@jupyter/chat 0.19.0-alpha.2 → 0.19.0

package/lib/message.d.ts

@@ -0,0 +1,41 @@
+import { ISignal } from '@lumino/signaling';
+import { IAttachment, IMessageContent, IMessage, IUser } from './types';
+/**
+ * The message object.
+ */
+export declare class Message implements IMessage {
+    /**
+     * The constructor of the message.
+     *
+     * @param content: the content of the message.
+     */
+    constructor(content: IMessageContent);
+    /**
+     * The message content.
+     */
+    get content(): IMessageContent;
+    /**
+     * Getters for each attribute individually.
+     */
+    get type(): string;
+    get body(): string;
+    get id(): string;
+    get time(): number;
+    get sender(): IUser;
+    get attachments(): IAttachment[] | undefined;
+    get mentions(): IUser[] | undefined;
+    get raw_time(): boolean | undefined;
+    get deleted(): boolean | undefined;
+    get edited(): boolean | undefined;
+    get stacked(): boolean | undefined;
+    /**
+     * A signal emitting when the message has been updated.
+     */
+    get changed(): ISignal<IMessage, void>;
+    /**
+     * Update one or several fields of the message.
+     */
+    update(updated: Partial<IMessageContent>): void;
+    private _content;
+    private _changed;
+}

package/lib/message.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Signal } from '@lumino/signaling';
+/**
+ * The message object.
+ */
+export class Message {
+    /**
+     * The constructor of the message.
+     *
+     * @param content: the content of the message.
+     */
+    constructor(content) {
+        this._changed = new Signal(this);
+        this._content = content;
+    }
+    /**
+     * The message content.
+     */
+    get content() {
+        return this._content;
+    }
+    /**
+     * Getters for each attribute individually.
+     */
+    get type() {
+        return this._content.type;
+    }
+    get body() {
+        return this._content.body;
+    }
+    get id() {
+        return this._content.id;
+    }
+    get time() {
+        return this._content.time;
+    }
+    get sender() {
+        return this._content.sender;
+    }
+    get attachments() {
+        return this._content.attachments;
+    }
+    get mentions() {
+        return this._content.mentions;
+    }
+    get raw_time() {
+        return this._content.raw_time;
+    }
+    get deleted() {
+        return this._content.deleted;
+    }
+    get edited() {
+        return this._content.edited;
+    }
+    get stacked() {
+        return this._content.stacked;
+    }
+    /**
+     * A signal emitting when the message has been updated.
+     */
+    get changed() {
+        return this._changed;
+    }
+    /**
+     * Update one or several fields of the message.
+     */
+    update(updated) {
+        this._content = { ...this._content, ...updated };
+        this._changed.emit();
+    }
+}

package/lib/model.d.ts

@@ -5,7 +5,7 @@ import { ISignal } from '@lumino/signaling';
 import { IActiveCellManager } from './active-cell-manager';
 import { IInputModel } from './input-model';
 import { ISelectionWatcher } from './selection-watcher';
-import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
+import { IChatHistory, IConfig, IMessage, IMessageContent, INewMessage, IUser } from './types';
 /**
  * The chat model interface.
  */
@@ -37,7 +37,7 @@ export interface IChatModel extends IDisposable {
     /**
      * The chat messages list.
      */
-    readonly messages: IChatMessage[];
+    readonly messages: IMessage[];
     /**
      * The input model.
      */
@@ -100,7 +100,7 @@ export interface IChatModel extends IDisposable {
      * @param id - the unique ID of the message.
      * @param message - the updated message.
      */
-    updateMessage?(id: string, message: IChatMessage): Promise<boolean | void> | boolean | void;
+    updateMessage?(id: string, message: IMessageContent): Promise<boolean | void> | boolean | void;
     /**
      * Optional, to delete a message from the chat.
      *
@@ -124,14 +124,14 @@ export interface IChatModel extends IDisposable {
      *
      * @param message - the message with user information and body.
      */
-    messageAdded(message: IChatMessage): void;
+    messageAdded(message: IMessageContent): 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;
+    messagesInserted(index: number, messages: IMessageContent[]): void;
     /**
      * Function called when messages are deleted.
      *
@@ -185,7 +185,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     /**
      * The chat messages list.
      */
-    get messages(): IChatMessage[];
+    get messages(): IMessage[];
     /**
      * The input model.
      */
@@ -235,7 +235,7 @@ export declare abstract class AbstractChatModel implements IChatModel {
     get messagesInViewport(): number[];
     set messagesInViewport(values: number[]);
     /**
-     * A signal emitting when the messages list is updated.
+     * A signal emitting when the message list is updated.
      */
     get messagesUpdated(): ISignal<IChatModel, void>;
     /**
@@ -282,20 +282,20 @@ export declare abstract class AbstractChatModel implements IChatModel {
      * 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;
+    protected formatChatMessage(message: IMessageContent): IMessageContent;
     /**
      * Function to call when a message is received.
      *
      * @param message - the message with user information and body.
      */
-    messageAdded(message: IChatMessage): void;
+    messageAdded(message: IMessageContent): 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;
+    messagesInserted(index: number, messages: IMessageContent[]): void;
     /**
      * Function called when messages are deleted.
      *
@@ -435,9 +435,9 @@ export interface IChatContext {
      */
     readonly name: string;
     /**
-     * A copy of the messages.
+     * A copy of the messages content.
      */
-    readonly messages: IChatMessage[];
+    readonly messages: IMessageContent[];
     /**
      * A list of all users who have connected to this chat.
      */
@@ -456,7 +456,7 @@ export declare abstract class AbstractChatContext implements IChatContext {
         model: IChatModel;
     });
     get name(): string;
-    get messages(): IChatMessage[];
+    get messages(): IMessageContent[];
     get user(): IUser | undefined;
     /**
      * ABSTRACT: Should return a list of users who have connected to this chat.

package/lib/model.js

@@ -3,10 +3,11 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ArrayExt } from '@lumino/algorithm';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
+import { Message } from './message';
 import { replaceMentionToSpan } from './utils';
-import { PromiseDelegate } from '@lumino/coreutils';
 /**
  * An abstract implementation of IChatModel.
  *
@@ -170,12 +171,12 @@ export class AbstractChatModel {
             if (this._config.stackMessages) {
                 this._messages.slice(1).forEach((message, idx) => {
                     const previousUser = this._messages[idx].sender.username;
-                    message.stacked = previousUser === message.sender.username;
+                    message.update({ stacked: previousUser === message.sender.username });
                 });
             }
             else {
                 this._messages.forEach(message => {
-                    delete message.stacked;
+                    message.update({ stacked: undefined });
                 });
             }
             this._messagesUpdated.emit();
@@ -225,7 +226,7 @@ export class AbstractChatModel {
         this._viewportChanged.emit(values);
     }
     /**
-     * A signal emitting when the messages list is updated.
+     * A signal emitting when the message list is updated.
      */
     get messagesUpdated() {
         return this._messagesUpdated;
@@ -328,7 +329,8 @@ export class AbstractChatModel {
         const lastRead = (_a = this.lastRead) !== null && _a !== void 0 ? _a : 0;
         // Format the messages.
         messages.forEach((message, idx) => {
-            formattedMessages.push(this.formatChatMessage(message));
+            const formattedMessage = this.formatChatMessage(message);
+            formattedMessages.push(new Message(formattedMessage));
             if (message.time > lastRead) {
                 unreadIndexes.push(index + idx);
             }
@@ -344,7 +346,7 @@ export class AbstractChatModel {
             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;
+                message.update({ stacked: previousUser === message.sender.username });
             }
         }
         this._addUnreadMessages(unreadIndexes);
@@ -461,7 +463,7 @@ export class AbstractChatContext {
         return this._model.name;
     }
     get messages() {
-        return [...this._model.messages];
+        return this._model.messages.map(message => ({ ...message.content }));
     }
     get user() {
         var _a;

package/lib/registers/footers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Token } from '@lumino/coreutils';
 import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
+import { IMessageContent } from '../types';
 /**
  * The token providing the chat footer registry.
  */
@@ -26,7 +26,7 @@ export interface IMessageFooterRegistry {
  */
 export type MessageFooterSectionProps = {
     model: IChatModel;
-    message: IChatMessage;
+    message: IMessageContent;
 };
 /**
  * A message footer section which can be added to the footer registry.

package/lib/theme-provider.d.ts

@@ -1,3 +1,22 @@
+import '@mui/material/Button';
+import '@mui/material/IconButton';
 import { Theme } from '@mui/material/styles';
+/**
+ * Allow a new variant type, for the input toolbar.
+ */
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        'input-toolbar': true;
+    }
+}
+/**
+ * Allow a new variant property in IconButton, to be able to set the same properties
+ * as the input toolbar buttons.
+ */
+declare module '@mui/material/IconButton' {
+    interface IconButtonOwnProps {
+        variant?: 'input-toolbar';
+    }
+}
 export declare function pollUntilReady(): Promise<void>;
 export declare function getJupyterLabTheme(): Promise<Theme>;

package/lib/theme-provider.js

@@ -2,6 +2,8 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import '@mui/material/Button';
+import '@mui/material/IconButton';
 import { createTheme } from '@mui/material/styles';
 function getCSSVariable(name) {
     return getComputedStyle(document.body).getPropertyValue(name).trim();
@@ -19,8 +21,41 @@ export async function getJupyterLabTheme() {
         components: {
             MuiButton: {
                 defaultProps: {
-                    size: 'small'
-                }
+                    size: 'small',
+                    variant: 'contained'
+                },
+                styleOverrides: {
+                    root: {
+                        minWidth: '24px',
+                        width: '24px',
+                        height: '24px',
+                        lineHeight: 0,
+                        '&:disabled': {
+                            opacity: 0.5
+                        }
+                    }
+                },
+                variants: [
+                    {
+                        // The default style for input toolbar button variant.
+                        props: { variant: 'input-toolbar' },
+                        style: {
+                            backgroundColor: 'var(--jp-brand-color1)',
+                            color: 'white',
+                            borderRadius: '4px',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                backgroundColor: 'var(--jp-brand-color0)',
+                                boxShadow: 'none'
+                            },
+                            '&:disabled': {
+                                backgroundColor: 'var(--jp-border-color2)',
+                                color: 'var(--jp-ui-font-color3)',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ]
             },
             MuiFilledInput: {
                 defaultProps: {
@@ -41,7 +76,43 @@ export async function getJupyterLabTheme() {
             MuiIconButton: {
                 defaultProps: {
                     size: 'small'
-                }
+                },
+                styleOverrides: {
+                    root: {
+                        minWidth: '24px',
+                        width: '24px',
+                        height: '24px',
+                        lineHeight: 0,
+                        '&:disabled': {
+                            opacity: 0.5
+                        },
+                        // Set the default size of the svg icon if not set by user.
+                        '& .MuiSvgIcon-root:not([fontSize])': {
+                            fontSize: 'medium'
+                        }
+                    }
+                },
+                variants: [
+                    {
+                        // The default style for input toolbar button variant.
+                        props: { variant: 'input-toolbar' },
+                        style: {
+                            backgroundColor: 'var(--jp-brand-color1)',
+                            color: 'white',
+                            borderRadius: '4px',
+                            boxShadow: 'none',
+                            '&:hover': {
+                                backgroundColor: 'var(--jp-brand-color0)',
+                                boxShadow: 'none'
+                            },
+                            '&:disabled': {
+                                backgroundColor: 'var(--jp-border-color2)',
+                                color: 'var(--jp-ui-font-color3)',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ]
             },
             MuiInputBase: {
                 defaultProps: {

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { ISignal } from '@lumino/signaling';
 /**
  * The user description.
  */
@@ -54,8 +55,8 @@ export interface IConfig {
 /**
  * The chat message description.
  */
-export interface IChatMessage<T = IUser, U = IAttachment> {
-    type: 'msg';
+export type IMessageContent<T = IUser, U = IAttachment> = {
+    type: string;
     body: string;
     id: string;
     time: number;
@@ -66,12 +67,29 @@ export interface IChatMessage<T = IUser, U = IAttachment> {
     deleted?: boolean;
     edited?: boolean;
     stacked?: boolean;
+};
+/**
+ *
+ */
+export interface IMessage extends IMessageContent {
+    /**
+     * Update one or several fields of the message.
+     */
+    update(updated: Partial<IMessageContent>): void;
+    /**
+     * The message content.
+     */
+    content: IMessageContent;
+    /**
+     * A signal emitting when the message has been updated.
+     */
+    changed: ISignal<IMessage, void>;
 }
 /**
  * The chat history interface.
  */
 export interface IChatHistory {
-    messages: IChatMessage[];
+    messages: IMessageContent[];
 }
 /**
  * The content of a new message.

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

@@ -55,6 +55,10 @@ export declare class ChatWidget extends ReactWidget {
      * Process dropped cells
      */
     private _processCellDrop;
+    /**
+     * Process dropped tabBar files
+     */
+    private _processTabDrop;
     /**
      * Find the notebook path for a cell by searching through active and open notebooks
      */

package/lib/widgets/chat-widget.js

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { ReactWidget } from '@jupyterlab/apputils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
 import { isCode, isMarkdown, isRaw } from '@jupyterlab/nbformat';
 import React from 'react';
 import { Drag } from '@lumino/dragdrop';
@@ -12,6 +13,8 @@ import { chatIcon } from '../icons';
 const FILE_BROWSER_MIME = 'application/x-jupyter-icontentsrich';
 // MIME type constant for Notebook cell drag events
 const NOTEBOOK_CELL_MIME = 'application/vnd.jupyter.cells';
+// MIME type constant for TabBar file drag events
+const TABBAR_FILE_MIME = 'application/vnd.lumino.widget-factory';
 // CSS class constants
 const INPUT_CONTAINER_CLASS = 'jp-chat-input-container';
 const DRAG_HOVER_CLASS = 'jp-chat-drag-hover';
@@ -146,7 +149,9 @@ export class ChatWidget extends ReactWidget {
      */
     _canHandleDrop(event) {
         const types = event.mimeData.types();
-        return (types.includes(NOTEBOOK_CELL_MIME) || types.includes(FILE_BROWSER_MIME));
+        return (types.includes(NOTEBOOK_CELL_MIME) ||
+            types.includes(FILE_BROWSER_MIME) ||
+            types.includes(TABBAR_FILE_MIME));
     }
     /**
      * Handle drop events
@@ -155,21 +160,27 @@ export class ChatWidget extends ReactWidget {
         if (!this._canHandleDrop(event)) {
             return;
         }
-        event.preventDefault();
-        event.stopPropagation();
         event.dropAction = 'move';
         this._removeDragHoverClass();
+        let attached = false;
         try {
             if (event.mimeData.hasData(NOTEBOOK_CELL_MIME)) {
-                this._processCellDrop(event);
+                attached = this._processCellDrop(event);
             }
             else if (event.mimeData.hasData(FILE_BROWSER_MIME)) {
-                this._processFileDrop(event);
+                attached = this._processFileDrop(event);
+            }
+            else if (event.mimeData.hasData(TABBAR_FILE_MIME)) {
+                attached = this._processTabDrop(event);
             }
         }
         catch (error) {
             console.error('Error processing drop:', error);
         }
+        if (attached) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     }
     /**
      * Get the input model associated with the event target and input ids.
@@ -197,7 +208,7 @@ export class ChatWidget extends ReactWidget {
         const data = event.mimeData.getData(FILE_BROWSER_MIME);
         if (!((_a = data === null || data === void 0 ? void 0 : data.model) === null || _a === void 0 ? void 0 : _a.path)) {
             console.warn('Invalid file browser data in drop event');
-            return;
+            return false;
         }
         const attachment = {
             type: 'file',
@@ -206,6 +217,7 @@ export class ChatWidget extends ReactWidget {
         };
         const inputModel = this._getInputFromEvent(event);
         (_b = inputModel === null || inputModel === void 0 ? void 0 : inputModel.addAttachment) === null || _b === void 0 ? void 0 : _b.call(inputModel, attachment);
+        return !!inputModel;
     }
     /**
      * Process dropped cells
@@ -219,12 +231,12 @@ export class ChatWidget extends ReactWidget {
             // Get path from first cell as all cells come from same notebook as users can only select or drag cells from one notebook at a time
             if (!((_a = cells[0]) === null || _a === void 0 ? void 0 : _a.id)) {
                 console.warn('No valid cells to process');
-                return;
+                return false;
             }
             const notebookPath = this._findNotebookPath(String(cells[0].id));
             if (!notebookPath) {
                 console.warn(`Cannot find notebook for dragged cells from ${cells[0].id}`);
-                return;
+                return false;
             }
             const validCells = [];
             for (const cell of cells) {
@@ -262,11 +274,43 @@ export class ChatWidget extends ReactWidget {
                 };
                 const inputModel = this._getInputFromEvent(event);
                 (_b = inputModel === null || inputModel === void 0 ? void 0 : inputModel.addAttachment) === null || _b === void 0 ? void 0 : _b.call(inputModel, attachment);
+                return !!inputModel;
             }
         }
         catch (error) {
             console.error('Failed to process cell drop: ', error);
         }
+        return false;
+    }
+    /**
+     * Process dropped tabBar files
+     */
+    _processTabDrop(event) {
+        var _a, _b;
+        const factory = event.mimeData.getData(TABBAR_FILE_MIME);
+        if (!factory) {
+            console.warn('No factory in drag event');
+            return false;
+        }
+        const widget = factory();
+        if (!widget || !(widget instanceof DocumentWidget)) {
+            console.warn('No file associated to the element');
+            return false;
+        }
+        const path = widget.context.path;
+        if (!path) {
+            console.warn('Widget has no path');
+            return false;
+        }
+        const mimetype = ((_a = widget.context.model) === null || _a === void 0 ? void 0 : _a.mimeType) || 'application/octet-stream';
+        const attachment = {
+            type: 'file',
+            value: path,
+            mimetype
+        };
+        const inputModel = this._getInputFromEvent(event);
+        (_b = inputModel === null || inputModel === void 0 ? void 0 : inputModel.addAttachment) === null || _b === void 0 ? void 0 : _b.call(inputModel, attachment);
+        return !!inputModel;
     }
     /**
      * Find the notebook path for a cell by searching through active and open notebooks

package/lib/widgets/multichat-panel.js

@@ -354,7 +354,7 @@ function ChatSelect({ chatNamesChanged, handleChange }) {
     chatNamesChanged.connect((_, chatNames) => {
         setChatNames(chatNames);
     });
-    return (React.createElement(HTMLSelect, { onChange: handleChange, value: "-" },
+    return (React.createElement(HTMLSelect, { key: Object.keys(chatNames).join(), onChange: handleChange, value: "-" },
         React.createElement("option", { value: "-", disabled: true, hidden: true }, "Open a chat"),
         Object.keys(chatNames).map(name => (React.createElement("option", { value: chatNames[name] }, name)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.19.0-alpha.2",
+  "version": "0.19.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",
@@ -51,6 +51,7 @@
     "@jupyterlab/codeeditor": "^4.2.0",
     "@jupyterlab/codemirror": "^4.2.0",
     "@jupyterlab/docmanager": "^4.2.0",
+    "@jupyterlab/docregistry": "^4.2.0",
     "@jupyterlab/filebrowser": "^4.2.0",
     "@jupyterlab/fileeditor": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
@@ -62,6 +63,7 @@
     "@lumino/disposable": "^2.0.0",
     "@lumino/polling": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
+    "@lumino/widgets": "^2.0.0",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
     "clsx": "^2.1.0",