jupyterlab-chat 0.7.0 → 0.8.0

package/lib/factory.d.ts

@@ -1,5 +1,6 @@
-import { IAutocompletionRegistry } from '@jupyter/chat';
+import { IAttachmentOpenerRegistry, IChatCommandRegistry } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
@@ -49,18 +50,24 @@ export declare class ChatWidgetFactory extends ABCWidgetFactory<LabChatPanel, La
     protected createNewWidget(context: ChatWidgetFactory.IContext): LabChatPanel;
     private _themeManager;
     private _rmRegistry;
-    private _autocompletionRegistry?;
+    private _documentManager?;
+    private _chatCommandRegistry?;
+    private _attachmentOpenerRegistry?;
 }
 export declare namespace ChatWidgetFactory {
     interface IContext extends DocumentRegistry.IContext<LabChatModel> {
         themeManager: IThemeManager | null;
         rmRegistry: IRenderMimeRegistry;
-        autocompletionRegistry?: IAutocompletionRegistry;
+        documentManager?: IDocumentManager;
+        chatCommandRegistry?: IChatCommandRegistry;
+        attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     }
     interface IOptions<T extends LabChatPanel> extends DocumentRegistry.IWidgetFactoryOptions<T> {
         themeManager: IThemeManager | null;
         rmRegistry: IRenderMimeRegistry;
-        autocompletionRegistry?: IAutocompletionRegistry;
+        documentManager?: IDocumentManager;
+        chatCommandRegistry?: IChatCommandRegistry;
+        attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     }
 }
 export declare class LabChatModelFactory implements DocumentRegistry.IModelFactory<LabChatModel> {

package/lib/factory.js

@@ -50,7 +50,9 @@ export class ChatWidgetFactory extends ABCWidgetFactory {
         super(options);
         this._themeManager = options.themeManager;
         this._rmRegistry = options.rmRegistry;
-        this._autocompletionRegistry = options.autocompletionRegistry;
+        this._documentManager = options.documentManager;
+        this._chatCommandRegistry = options.chatCommandRegistry;
+        this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
     }
     /**
      * Create a new widget given a context.
@@ -61,7 +63,9 @@ export class ChatWidgetFactory extends ABCWidgetFactory {
     createNewWidget(context) {
         context.rmRegistry = this._rmRegistry;
         context.themeManager = this._themeManager;
-        context.autocompletionRegistry = this._autocompletionRegistry;
+        context.documentManager = this._documentManager;
+        context.chatCommandRegistry = this._chatCommandRegistry;
+        context.attachmentOpenerRegistry = this._attachmentOpenerRegistry;
         return new LabChatPanel({
             context,
             content: new ChatWidget(context)

package/lib/model.d.ts

@@ -1,4 +1,4 @@
-import { ChatModel, IChatMessage, INewMessage, IUser } from '@jupyter/chat';
+import { ChatModel, IChatMessage, IInputModel, INewMessage, IUser } from '@jupyter/chat';
 import { IChangedArgs } from '@jupyterlab/coreutils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { User } from '@jupyterlab/services';
@@ -45,7 +45,7 @@ export declare class LabChatModel extends ChatModel implements DocumentRegistry.
     /**
      * Function called by the input on key pressed.
      */
-    inputChanged(input?: string): void;
+    onInputChanged: (_: IInputModel, value: string) => void;
     /**
      * Triggered when an awareness state changes.
      * Used to populate the writers list.

package/lib/model.js

@@ -14,6 +14,22 @@ export class LabChatModel extends ChatModel {
     constructor(options) {
         super(options);
         this.collaborative = true;
+        /**
+         * Function called by the input on key pressed.
+         */
+        this.onInputChanged = (_, value) => {
+            if (!value || !this.config.sendTypingNotification) {
+                return;
+            }
+            const awareness = this.sharedModel.awareness;
+            if (this._timeoutWriting !== null) {
+                window.clearTimeout(this._timeoutWriting);
+            }
+            awareness.setLocalStateField('isWriting', true);
+            this._timeoutWriting = window.setTimeout(() => {
+                this._resetWritingStatus();
+            }, WRITING_DELAY);
+        };
         /**
          * Triggered when an awareness state changes.
          * Used to populate the writers list.
@@ -42,12 +58,27 @@ export class LabChatModel extends ChatModel {
                     }
                     else if (delta.insert) {
                         const messages = delta.insert.map(ymessage => {
+                            const { sender, attachments: attachmentIds, ...baseMessage } = ymessage;
+                            // Build the base message with sender.
                             const msg = {
-                                ...ymessage,
-                                sender: this.sharedModel.getUser(ymessage.sender) || {
+                                ...baseMessage,
+                                sender: this.sharedModel.getUser(sender) || {
                                     username: 'User undefined'
                                 }
                             };
+                            // Add attachments.
+                            if (attachmentIds) {
+                                const attachments = [];
+                                attachmentIds.forEach(attachmentId => {
+                                    const attachment = this.sharedModel.getAttachment(attachmentId);
+                                    if (attachment) {
+                                        attachments.push(attachment);
+                                    }
+                                });
+                                if (attachments.length) {
+                                    msg.attachments = attachments;
+                                }
+                            }
                             return msg;
                         });
                         this.messagesInserted(index, messages);
@@ -91,6 +122,7 @@ export class LabChatModel extends ChatModel {
             this.config = config;
         });
         this.sharedModel.awareness.on('change', this.onAwarenessChange);
+        this.input.valueChanged.connect(this.onInputChanged);
     }
     get user() {
         return this._user;
@@ -170,9 +202,16 @@ export class LabChatModel extends ChatModel {
         if (!(this.sharedModel.getUser(this._user.username) === this._user)) {
             this.sharedModel.setUser(this._user);
         }
+        // Add the attachments to the message.
+        if (this.input.attachments.length) {
+            const attachmentIds = this.input.attachments.map(attachment => this.sharedModel.setAttachment(attachment));
+            msg.attachments = attachmentIds;
+            this.input.clearAttachments();
+        }
         this.sharedModel.addMessage(msg);
     }
     updateMessage(id, updatedMessage) {
+        var _a;
         const index = this.sharedModel.getMessageIndex(id);
         let message = this.sharedModel.getMessage(index);
         if (message) {
@@ -190,6 +229,10 @@ export class LabChatModel extends ChatModel {
                 edited: true
             };
         }
+        const attachmentIds = (_a = updatedMessage.attachments) === null || _a === void 0 ? void 0 : _a.map(attachment => this.sharedModel.setAttachment(attachment));
+        if (attachmentIds) {
+            message.attachments = attachmentIds;
+        }
         this.sharedModel.updateMessage(index, message);
     }
     deleteMessage(id) {
@@ -203,22 +246,6 @@ export class LabChatModel extends ChatModel {
         message.deleted = true;
         this.sharedModel.updateMessage(index, message);
     }
-    /**
-     * Function called by the input on key pressed.
-     */
-    inputChanged(input) {
-        if (!input || !this.config.sendTypingNotification) {
-            return;
-        }
-        const awareness = this.sharedModel.awareness;
-        if (this._timeoutWriting !== null) {
-            window.clearTimeout(this._timeoutWriting);
-        }
-        awareness.setLocalStateField('isWriting', true);
-        this._timeoutWriting = window.setTimeout(() => {
-            this._resetWritingStatus();
-        }, WRITING_DELAY);
-    }
     _resetWritingStatus() {
         const awareness = this.sharedModel.awareness;
         const states = awareness.getLocalState();

package/lib/token.d.ts

@@ -1,5 +1,5 @@
-import { IConfig, IActiveCellManager, ISelectionWatcher } from '@jupyter/chat';
-import { IWidgetTracker } from '@jupyterlab/apputils';
+import { IConfig, IActiveCellManager, ISelectionWatcher, ChatWidget } from '@jupyter/chat';
+import { WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
@@ -32,7 +32,7 @@ export interface IChatFactory {
     /**
      * The chat panel tracker.
      */
-    tracker: IWidgetTracker<LabChatPanel>;
+    tracker: WidgetTracker<LabChatPanel | ChatWidget>;
 }
 /**
  * The interface for the chats config.
@@ -50,7 +50,7 @@ export interface IWidgetConfig {
 /**
  * A signal emitting when the configuration for the chats has changed.
  */
-export interface IConfigChanged extends ISignal<IWidgetConfig, Partial<ILabChatConfig>> {
+export interface IConfigChanged/* eslint-disable-line @typescript-eslint/no-empty-object-type */  extends ISignal<IWidgetConfig, Partial<ILabChatConfig>> {
 }
 /**
  * Command ids.

package/lib/widget.d.ts

@@ -1,4 +1,4 @@
-import { ChatWidget, IAutocompletionRegistry, IChatModel } from '@jupyter/chat';
+import { ChatWidget, IAttachmentOpenerRegistry, IChatCommandRegistry, IChatModel } from '@jupyter/chat';
 import { ICollaborativeDrive } from '@jupyter/collaborative-drive';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
@@ -8,6 +8,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { Message } from '@lumino/messaging';
 import { Panel } from '@lumino/widgets';
 import { LabChatModel } from './model';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 /**
  * DocumentWidget: widget that represents the view or editor for a file type.
  */
@@ -45,7 +46,7 @@ export declare class ChatPanel extends SidePanel {
      * @param model - the model of the chat widget
      * @param name - the name of the chat.
      */
-    addChat(model: IChatModel, path: string): void;
+    addChat(model: IChatModel): ChatWidget;
     /**
      * Update the list of available chats in the default directory.
      */
@@ -87,7 +88,9 @@ export declare class ChatPanel extends SidePanel {
     private _openChat;
     private _rmRegistry;
     private _themeManager;
-    private _autocompletionRegistry?;
+    private _documentManager?;
+    private _chatCommandRegistry?;
+    private _attachmentOpenerRegistry?;
 }
 /**
  * The chat panel namespace.
@@ -102,7 +105,9 @@ export declare namespace ChatPanel {
         rmRegistry: IRenderMimeRegistry;
         themeManager: IThemeManager | null;
         defaultDirectory: string;
-        autocompletionRegistry?: IAutocompletionRegistry;
+        documentManager?: IDocumentManager;
+        chatCommandRegistry?: IChatCommandRegistry;
+        attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
     }
 }
 /**

package/lib/widget.js

@@ -105,7 +105,9 @@ export class ChatPanel extends SidePanel {
         this._rmRegistry = options.rmRegistry;
         this._themeManager = options.themeManager;
         this._defaultDirectory = options.defaultDirectory;
-        this._autocompletionRegistry = options.autocompletionRegistry;
+        this._documentManager = options.documentManager;
+        this._chatCommandRegistry = options.chatCommandRegistry;
+        this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
         const addChat = new CommandToolbarButton({
             commands: this._commands,
             id: CommandIDs.createChat,
@@ -144,27 +146,28 @@ export class ChatPanel extends SidePanel {
      * @param model - the model of the chat widget
      * @param name - the name of the chat.
      */
-    addChat(model, path) {
+    addChat(model) {
         // 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
+            documentManager: this._documentManager,
+            chatCommandRegistry: this._chatCommandRegistry,
+            attachmentOpenerRegistry: this._attachmentOpenerRegistry
         });
         this.addWidget(new ChatSection({
             widget,
             commands: this._commands,
-            path,
+            path: model.name,
             defaultDirectory: this._defaultDirectory
         }));
+        return widget;
     }
     /**
      * Open a chat if it exists in the side panel.

package/lib/ychat.d.ts

@@ -1,10 +1,10 @@
-import { IChatMessage, IUser } from '@jupyter/chat';
+import { IAttachment, 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>;
+export type IYmessage = IChatMessage<string, string>;
 /**
  * The type for a YMessage.
  */
@@ -21,6 +21,10 @@ export interface IChatChanges extends DocumentChange {
      * Changes in users.
      */
     userChanges?: UserChange[];
+    /**
+     * Changes in attachments.
+     */
+    attachmentChanges?: AttachmentChange[];
     /**
      * Changes in metadata.
      */
@@ -34,6 +38,10 @@ export type MessageChange = Delta<IYmessage[]>;
  * The user change type.
  */
 export type UserChange = IMapChange<IUser>;
+/**
+ * The attachment change type.
+ */
+export type AttachmentChange = IMapChange<IAttachment>;
 /**
  * The metadata change type.
  */
@@ -59,6 +67,7 @@ export declare class YChat extends YDocument<IChatChanges> {
     get id(): string;
     get users(): JSONObject;
     get messages(): string[];
+    get attachments(): JSONObject;
     getSource(): JSONObject;
     setSource(value: JSONObject): void;
     getUser(username: string | undefined): IUser | undefined;
@@ -68,10 +77,14 @@ export declare class YChat extends YDocument<IChatChanges> {
     updateMessage(index: number, value: IYmessage): void;
     getMessageIndex(id: string): number;
     deleteMessage(index: number): void;
+    getAttachment(id: string): IAttachment | undefined;
+    setAttachment(attachment: IAttachment): string;
     private _usersObserver;
     private _messagesObserver;
+    private _attachmentsObserver;
     private _metadataObserver;
     private _users;
     private _messages;
+    private _attachments;
     private _metadata;
 }

package/lib/ychat.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { YDocument } from '@jupyter/ydoc';
-import { JSONExt } from '@lumino/coreutils';
+import { JSONExt, UUID } from '@lumino/coreutils';
 /**
  * The jupyterlab chat shared document.
  */
@@ -18,27 +18,27 @@ export class YChat extends YDocument {
          */
         this.version = '1.0.0';
         this._usersObserver = (event) => {
-            const userChange = new Array();
+            const userChanges = new Array();
             event.keysChanged.forEach(key => {
                 const change = event.changes.keys.get(key);
                 if (change) {
                     switch (change.action) {
                         case 'add':
-                            userChange.push({
+                            userChanges.push({
                                 key,
                                 newValue: this._users.get(key),
                                 type: 'add'
                             });
                             break;
                         case 'delete':
-                            userChange.push({
+                            userChanges.push({
                                 key,
                                 oldValue: change.oldValue,
                                 type: 'remove'
                             });
                             break;
                         case 'update':
-                            userChange.push({
+                            userChanges.push({
                                 key: key,
                                 oldValue: change.oldValue,
                                 newValue: this._users.get(key),
@@ -48,7 +48,7 @@ export class YChat extends YDocument {
                     }
                 }
             });
-            this._changed.emit({ userChange: userChange });
+            this._changed.emit({ userChanges });
         };
         this._messagesObserver = (event) => {
             const messageChanges = event.delta;
@@ -56,26 +56,59 @@ export class YChat extends YDocument {
                 messageChanges: messageChanges
             });
         };
+        this._attachmentsObserver = (event) => {
+            const attachmentChanges = new Array();
+            event.keysChanged.forEach(key => {
+                const change = event.changes.keys.get(key);
+                if (change) {
+                    switch (change.action) {
+                        case 'add':
+                            attachmentChanges.push({
+                                key,
+                                newValue: this._attachments.get(key),
+                                type: 'add'
+                            });
+                            break;
+                        case 'delete':
+                            attachmentChanges.push({
+                                key,
+                                oldValue: change.oldValue,
+                                type: 'remove'
+                            });
+                            break;
+                        case 'update':
+                            attachmentChanges.push({
+                                key: key,
+                                oldValue: change.oldValue,
+                                newValue: this._attachments.get(key),
+                                type: 'change'
+                            });
+                            break;
+                    }
+                }
+            });
+            this._changed.emit({ attachmentChanges });
+        };
         this._metadataObserver = (event) => {
-            const metadataChange = new Array();
+            const metadataChanges = new Array();
             event.changes.keys.forEach((change, key) => {
                 switch (change.action) {
                     case 'add':
-                        metadataChange.push({
+                        metadataChanges.push({
                             key,
                             newValue: this._metadata.get(key),
                             type: 'add'
                         });
                         break;
                     case 'delete':
-                        metadataChange.push({
+                        metadataChanges.push({
                             key,
                             oldValue: change.oldValue,
                             type: 'remove'
                         });
                         break;
                     case 'update':
-                        metadataChange.push({
+                        metadataChanges.push({
                             key: key,
                             oldValue: change.oldValue,
                             newValue: this._metadata.get(key),
@@ -84,14 +117,14 @@ export class YChat extends YDocument {
                         break;
                 }
             });
-            this._changed.emit({
-                metadataChanges: metadataChange
-            });
+            this._changed.emit({ metadataChanges });
         };
         this._users = this.ydoc.getMap('users');
         this._users.observe(this._usersObserver);
         this._messages = this.ydoc.getArray('messages');
         this._messages.observe(this._messagesObserver);
+        this._attachments = this.ydoc.getMap('attachments');
+        this._attachments.observe(this._attachmentsObserver);
         this._metadata = this.ydoc.getMap('metadata');
         this._metadata.observe(this._metadataObserver);
     }
@@ -112,6 +145,9 @@ export class YChat extends YDocument {
     get messages() {
         return JSONExt.deepCopy(this._messages.toJSON());
     }
+    get attachments() {
+        return JSONExt.deepCopy(this._attachments.toJSON());
+    }
     getSource() {
         const users = this._users.toJSON();
         const messages = this._messages.toJSON();
@@ -167,4 +203,16 @@ export class YChat extends YDocument {
             this._messages.delete(index);
         });
     }
+    getAttachment(id) {
+        return this._attachments.get(id);
+    }
+    setAttachment(attachment) {
+        var _a;
+        // Search if the attachment already exist to update it, otherwise add it.
+        const id = ((_a = Array.from(this._attachments.entries()).find(([_, att]) => att.type === attachment.type && att.value === attachment.value)) === null || _a === void 0 ? void 0 : _a[0]) || UUID.uuid4();
+        this.transact(() => {
+            this._attachments.set(id, attachment);
+        });
+        return id;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-chat",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The library to build a chat based on shared document",
   "keywords": [
     "jupyter",
@@ -37,26 +37,18 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
     "clean:all": "jlpm clean:lib && jlpm clean:lintcache",
-    "eslint": "jlpm eslint:check --fix",
-    "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "install:extension": "jlpm build",
-    "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
-    "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
-    "prettier": "jlpm prettier:base --write --list-different",
-    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
-    "prettier:check": "jlpm prettier:base --check",
-    "stylelint": "jlpm stylelint:check --fix",
-    "stylelint:check": "stylelint --cache \"style/**/*.css\"",
     "test": "jest --coverage",
     "watch:src": "tsc -w --sourceMap"
   },
   "dependencies": {
-    "@jupyter/chat": "^0.7.0",
+    "@jupyter/chat": "^0.8.0",
     "@jupyter/collaborative-drive": "^3.0.0",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
     "@jupyterlab/application": "^4.2.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/coreutils": "^6.2.0",
+    "@jupyterlab/docmanager": "^4.2.0",
     "@jupyterlab/docregistry": "^4.2.0",
     "@jupyterlab/launcher": "^4.2.0",
     "@jupyterlab/notebook": "^4.2.0",
@@ -79,24 +71,13 @@
     "@types/json-schema": "^7.0.11",
     "@types/react": "^18.2.0",
     "@types/react-addons-linked-state-mixin": "^0.14.22",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
     "css-loader": "^6.7.1",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^5.0.0",
     "jest": "^29.2.0",
     "mkdirp": "^1.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
     "rimraf": "^5.0.1",
     "source-map-loader": "^1.0.2",
     "style-loader": "^3.3.1",
-    "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-csstree-validator": "^3.0.0",
-    "stylelint-prettier": "^4.0.0",
     "typescript": "~5.0.2",
     "yjs": "^13.5.0"
   },
@@ -107,98 +88,5 @@
   "styleModule": "style/index.js",
   "publishConfig": {
     "access": "public"
-  },
-  "eslintIgnore": [
-    "node_modules",
-    "dist",
-    "coverage",
-    "**/*.d.ts",
-    "tests",
-    "**/__tests__"
-  ],
-  "eslintConfig": {
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "project": "tsconfig.json",
-      "sourceType": "module"
-    },
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          "selector": "interface",
-          "format": [
-            "PascalCase"
-          ],
-          "custom": {
-            "regex": "^I[A-Z]",
-            "match": true
-          }
-        }
-      ],
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        {
-          "args": "none"
-        }
-      ],
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-namespace": "off",
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/quotes": [
-        "error",
-        "single",
-        {
-          "avoidEscape": true,
-          "allowTemplateLiterals": false
-        }
-      ],
-      "curly": [
-        "error",
-        "all"
-      ],
-      "eqeqeq": "error",
-      "prefer-arrow-callback": "error"
-    }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid",
-    "endOfLine": "auto",
-    "overrides": [
-      {
-        "files": "package.json",
-        "options": {
-          "tabWidth": 2
-        }
-      }
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "stylelint-config-recommended",
-      "stylelint-config-standard",
-      "stylelint-prettier/recommended"
-    ],
-    "plugins": [
-      "stylelint-csstree-validator"
-    ],
-    "rules": {
-      "csstree/validator": true,
-      "property-no-vendor-prefix": null,
-      "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
-      "selector-no-vendor-prefix": null,
-      "value-no-vendor-prefix": null
-    }
   }
 }

package/src/factory.ts

@@ -6,10 +6,12 @@
 import {
   ChatWidget,
   IActiveCellManager,
-  IAutocompletionRegistry,
+  IAttachmentOpenerRegistry,
+  IChatCommandRegistry,
   ISelectionWatcher
 } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents, User } from '@jupyterlab/services';
@@ -74,7 +76,9 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
     super(options);
     this._themeManager = options.themeManager;
     this._rmRegistry = options.rmRegistry;
-    this._autocompletionRegistry = options.autocompletionRegistry;
+    this._documentManager = options.documentManager;
+    this._chatCommandRegistry = options.chatCommandRegistry;
+    this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
   }
 
   /**
@@ -86,7 +90,9 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
   protected createNewWidget(context: ChatWidgetFactory.IContext): LabChatPanel {
     context.rmRegistry = this._rmRegistry;
     context.themeManager = this._themeManager;
-    context.autocompletionRegistry = this._autocompletionRegistry;
+    context.documentManager = this._documentManager;
+    context.chatCommandRegistry = this._chatCommandRegistry;
+    context.attachmentOpenerRegistry = this._attachmentOpenerRegistry;
     return new LabChatPanel({
       context,
       content: new ChatWidget(context)
@@ -95,21 +101,27 @@ export class ChatWidgetFactory extends ABCWidgetFactory<
 
   private _themeManager: IThemeManager | null;
   private _rmRegistry: IRenderMimeRegistry;
-  private _autocompletionRegistry?: IAutocompletionRegistry;
+  private _documentManager?: IDocumentManager;
+  private _chatCommandRegistry?: IChatCommandRegistry;
+  private _attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
 }
 
 export namespace ChatWidgetFactory {
   export interface IContext extends DocumentRegistry.IContext<LabChatModel> {
     themeManager: IThemeManager | null;
     rmRegistry: IRenderMimeRegistry;
-    autocompletionRegistry?: IAutocompletionRegistry;
+    documentManager?: IDocumentManager;
+    chatCommandRegistry?: IChatCommandRegistry;
+    attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   }
 
   export interface IOptions<T extends LabChatPanel>
     extends DocumentRegistry.IWidgetFactoryOptions<T> {
     themeManager: IThemeManager | null;
     rmRegistry: IRenderMimeRegistry;
-    autocompletionRegistry?: IAutocompletionRegistry;
+    documentManager?: IDocumentManager;
+    chatCommandRegistry?: IChatCommandRegistry;
+    attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   }
 }
 

package/src/model.ts

@@ -3,7 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { ChatModel, IChatMessage, INewMessage, IUser } from '@jupyter/chat';
+import {
+  ChatModel,
+  IAttachment,
+  IChatMessage,
+  IInputModel,
+  INewMessage,
+  IUser
+} from '@jupyter/chat';
 import { IChangedArgs } from '@jupyterlab/coreutils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { User } from '@jupyterlab/services';
@@ -53,6 +60,8 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
     });
 
     this.sharedModel.awareness.on('change', this.onAwarenessChange);
+
+    this.input.valueChanged.connect(this.onInputChanged);
   }
 
   readonly collaborative = true;
@@ -137,6 +146,7 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
     if (this._timeoutWriting !== null) {
       window.clearTimeout(this._timeoutWriting);
     }
+
     const msg: IYmessage = {
       type: 'msg',
       id: UUID.uuid4(),
@@ -150,6 +160,16 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
     if (!(this.sharedModel.getUser(this._user.username) === this._user)) {
       this.sharedModel.setUser(this._user);
     }
+
+    // Add the attachments to the message.
+    if (this.input.attachments.length) {
+      const attachmentIds = this.input.attachments.map(attachment =>
+        this.sharedModel.setAttachment(attachment)
+      );
+      msg.attachments = attachmentIds;
+      this.input.clearAttachments();
+    }
+
     this.sharedModel.addMessage(msg);
   }
 
@@ -174,6 +194,12 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
         edited: true
       };
     }
+    const attachmentIds = updatedMessage.attachments?.map(attachment =>
+      this.sharedModel.setAttachment(attachment)
+    );
+    if (attachmentIds) {
+      message.attachments = attachmentIds;
+    }
     this.sharedModel.updateMessage(index, message as IYmessage);
   }
 
@@ -192,8 +218,8 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
   /**
    * Function called by the input on key pressed.
    */
-  inputChanged(input?: string): void {
-    if (!input || !this.config.sendTypingNotification) {
+  onInputChanged = (_: IInputModel, value: string): void => {
+    if (!value || !this.config.sendTypingNotification) {
       return;
     }
     const awareness = this.sharedModel.awareness;
@@ -204,7 +230,7 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
     this._timeoutWriting = window.setTimeout(() => {
       this._resetWritingStatus();
     }, WRITING_DELAY);
-  }
+  };
 
   /**
    * Triggered when an awareness state changes.
@@ -242,13 +268,34 @@ export class LabChatModel extends ChatModel implements DocumentRegistry.IModel {
           index += delta.retain;
         } else if (delta.insert) {
           const messages = delta.insert.map(ymessage => {
+            const {
+              sender,
+              attachments: attachmentIds,
+              ...baseMessage
+            } = ymessage;
+
+            // Build the base message with sender.
             const msg: IChatMessage = {
-              ...ymessage,
-              sender: this.sharedModel.getUser(ymessage.sender) || {
+              ...baseMessage,
+              sender: this.sharedModel.getUser(sender) || {
                 username: 'User undefined'
               }
             };
 
+            // Add attachments.
+            if (attachmentIds) {
+              const attachments: IAttachment[] = [];
+              attachmentIds.forEach(attachmentId => {
+                const attachment = this.sharedModel.getAttachment(attachmentId);
+                if (attachment) {
+                  attachments.push(attachment);
+                }
+              });
+              if (attachments.length) {
+                msg.attachments = attachments;
+              }
+            }
+
             return msg;
           });
           this.messagesInserted(index, messages);

package/src/token.ts

@@ -7,9 +7,10 @@ import {
   IConfig,
   chatIcon,
   IActiveCellManager,
-  ISelectionWatcher
+  ISelectionWatcher,
+  ChatWidget
 } from '@jupyter/chat';
-import { IWidgetTracker } from '@jupyterlab/apputils';
+import { WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
@@ -56,7 +57,7 @@ export interface IChatFactory {
   /**
    * The chat panel tracker.
    */
-  tracker: IWidgetTracker<LabChatPanel>;
+  tracker: WidgetTracker<LabChatPanel | ChatWidget>;
 }
 
 /**
@@ -77,7 +78,7 @@ export interface IWidgetConfig {
 /**
  * A signal emitting when the configuration for the chats has changed.
  */
-export interface IConfigChanged
+export interface IConfigChanged /* eslint-disable-line @typescript-eslint/no-empty-object-type */
   extends ISignal<IWidgetConfig, Partial<ILabChatConfig>> {}
 
 /**

package/src/widget.tsx

@@ -5,7 +5,8 @@
 
 import {
   ChatWidget,
-  IAutocompletionRegistry,
+  IAttachmentOpenerRegistry,
+  IChatCommandRegistry,
   IChatModel,
   readIcon
 } from '@jupyter/chat';
@@ -33,6 +34,7 @@ import React, { useState } from 'react';
 
 import { LabChatModel } from './model';
 import { CommandIDs, chatFileType } from './token';
+import { IDocumentManager } from '@jupyterlab/docmanager';
 
 const MAIN_PANEL_CLASS = 'jp-lab-chat-main-panel';
 const TITLE_UNREAD_CLASS = 'jp-lab-chat-title-unread';
@@ -102,7 +104,9 @@ export class ChatPanel extends SidePanel {
     this._rmRegistry = options.rmRegistry;
     this._themeManager = options.themeManager;
     this._defaultDirectory = options.defaultDirectory;
-    this._autocompletionRegistry = options.autocompletionRegistry;
+    this._documentManager = options.documentManager;
+    this._chatCommandRegistry = options.chatCommandRegistry;
+    this._attachmentOpenerRegistry = options.attachmentOpenerRegistry;
 
     const addChat = new CommandToolbarButton({
       commands: this._commands,
@@ -152,32 +156,33 @@ export class ChatPanel extends SidePanel {
    * @param model - the model of the chat widget
    * @param name - the name of the chat.
    */
-  addChat(model: IChatModel, path: string): void {
+  addChat(model: IChatModel): ChatWidget {
     // Collapse all chats
     const content = this.content as AccordionPanel;
     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
+      documentManager: this._documentManager,
+      chatCommandRegistry: this._chatCommandRegistry,
+      attachmentOpenerRegistry: this._attachmentOpenerRegistry
     });
 
     this.addWidget(
       new ChatSection({
         widget,
         commands: this._commands,
-        path,
+        path: model.name,
         defaultDirectory: this._defaultDirectory
       })
     );
+
+    return widget;
   }
 
   /**
@@ -284,7 +289,9 @@ export class ChatPanel extends SidePanel {
   private _openChat: ReactWidget;
   private _rmRegistry: IRenderMimeRegistry;
   private _themeManager: IThemeManager | null;
-  private _autocompletionRegistry?: IAutocompletionRegistry;
+  private _documentManager?: IDocumentManager;
+  private _chatCommandRegistry?: IChatCommandRegistry;
+  private _attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
 }
 
 /**
@@ -300,7 +307,9 @@ export namespace ChatPanel {
     rmRegistry: IRenderMimeRegistry;
     themeManager: IThemeManager | null;
     defaultDirectory: string;
-    autocompletionRegistry?: IAutocompletionRegistry;
+    documentManager?: IDocumentManager;
+    chatCommandRegistry?: IChatCommandRegistry;
+    attachmentOpenerRegistry?: IAttachmentOpenerRegistry;
   }
 }
 

package/src/ychat.ts

@@ -3,15 +3,15 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IChatMessage, IUser } from '@jupyter/chat';
+import { IAttachment, IChatMessage, IUser } from '@jupyter/chat';
 import { Delta, DocumentChange, IMapChange, YDocument } from '@jupyter/ydoc';
-import { JSONExt, JSONObject, PartialJSONValue } from '@lumino/coreutils';
+import { JSONExt, JSONObject, PartialJSONValue, UUID } from '@lumino/coreutils';
 import * as Y from 'yjs';
 
 /**
  * The type for a YMessage.
  */
-export type IYmessage = IChatMessage<string>;
+export type IYmessage = IChatMessage<string, string>;
 
 /**
  * The type for a YMessage.
@@ -30,6 +30,10 @@ export interface IChatChanges extends DocumentChange {
    * Changes in users.
    */
   userChanges?: UserChange[];
+  /**
+   * Changes in attachments.
+   */
+  attachmentChanges?: AttachmentChange[];
   /**
    * Changes in metadata.
    */
@@ -46,6 +50,11 @@ export type MessageChange = Delta<IYmessage[]>;
  */
 export type UserChange = IMapChange<IUser>;
 
+/**
+ * The attachment change type.
+ */
+export type AttachmentChange = IMapChange<IAttachment>;
+
 /**
  * The metadata change type.
  */
@@ -66,6 +75,9 @@ export class YChat extends YDocument<IChatChanges> {
     this._messages = this.ydoc.getArray<IYmessage>('messages');
     this._messages.observe(this._messagesObserver);
 
+    this._attachments = this.ydoc.getMap<IAttachment>('attachments');
+    this._attachments.observe(this._attachmentsObserver);
+
     this._metadata = this.ydoc.getMap<IMetadata>('metadata');
     this._metadata.observe(this._metadataObserver);
   }
@@ -96,6 +108,10 @@ export class YChat extends YDocument<IChatChanges> {
     return JSONExt.deepCopy(this._messages.toJSON());
   }
 
+  get attachments(): JSONObject {
+    return JSONExt.deepCopy(this._attachments.toJSON());
+  }
+
   getSource(): JSONObject {
     const users = this._users.toJSON();
     const messages = this._messages.toJSON();
@@ -168,28 +184,46 @@ export class YChat extends YDocument<IChatChanges> {
     });
   }
 
+  getAttachment(id: string): IAttachment | undefined {
+    return this._attachments.get(id);
+  }
+
+  setAttachment(attachment: IAttachment): string {
+    // Search if the attachment already exist to update it, otherwise add it.
+    const id =
+      Array.from(this._attachments.entries()).find(
+        ([_, att]) =>
+          att.type === attachment.type && att.value === attachment.value
+      )?.[0] || UUID.uuid4();
+
+    this.transact(() => {
+      this._attachments.set(id, attachment);
+    });
+    return id;
+  }
+
   private _usersObserver = (event: Y.YMapEvent<IUser>): void => {
-    const userChange = new Array<UserChange>();
+    const userChanges = new Array<UserChange>();
     event.keysChanged.forEach(key => {
       const change = event.changes.keys.get(key);
       if (change) {
         switch (change.action) {
           case 'add':
-            userChange.push({
+            userChanges.push({
               key,
               newValue: this._users.get(key),
               type: 'add'
             });
             break;
           case 'delete':
-            userChange.push({
+            userChanges.push({
               key,
               oldValue: change.oldValue,
               type: 'remove'
             });
             break;
           case 'update':
-            userChange.push({
+            userChanges.push({
               key: key,
               oldValue: change.oldValue,
               newValue: this._users.get(key),
@@ -200,7 +234,7 @@ export class YChat extends YDocument<IChatChanges> {
       }
     });
 
-    this._changed.emit({ userChange: userChange } as Partial<IChatChanges>);
+    this._changed.emit({ userChanges } as Partial<IChatChanges>);
   };
 
   private _messagesObserver = (event: Y.YArrayEvent<IYmessage>): void => {
@@ -210,26 +244,61 @@ export class YChat extends YDocument<IChatChanges> {
     } as Partial<IChatChanges>);
   };
 
+  private _attachmentsObserver = (event: Y.YMapEvent<IAttachment>): void => {
+    const attachmentChanges = new Array<AttachmentChange>();
+    event.keysChanged.forEach(key => {
+      const change = event.changes.keys.get(key);
+      if (change) {
+        switch (change.action) {
+          case 'add':
+            attachmentChanges.push({
+              key,
+              newValue: this._attachments.get(key),
+              type: 'add'
+            });
+            break;
+          case 'delete':
+            attachmentChanges.push({
+              key,
+              oldValue: change.oldValue,
+              type: 'remove'
+            });
+            break;
+          case 'update':
+            attachmentChanges.push({
+              key: key,
+              oldValue: change.oldValue,
+              newValue: this._attachments.get(key),
+              type: 'change'
+            });
+            break;
+        }
+      }
+    });
+
+    this._changed.emit({ attachmentChanges } as Partial<IChatChanges>);
+  };
+
   private _metadataObserver = (event: Y.YMapEvent<IMetadata>): void => {
-    const metadataChange = new Array<MetadataChange>();
+    const metadataChanges = new Array<MetadataChange>();
     event.changes.keys.forEach((change, key) => {
       switch (change.action) {
         case 'add':
-          metadataChange.push({
+          metadataChanges.push({
             key,
             newValue: this._metadata.get(key),
             type: 'add'
           });
           break;
         case 'delete':
-          metadataChange.push({
+          metadataChanges.push({
             key,
             oldValue: change.oldValue,
             type: 'remove'
           });
           break;
         case 'update':
-          metadataChange.push({
+          metadataChanges.push({
             key: key,
             oldValue: change.oldValue,
             newValue: this._metadata.get(key),
@@ -239,12 +308,11 @@ export class YChat extends YDocument<IChatChanges> {
       }
     });
 
-    this._changed.emit({
-      metadataChanges: metadataChange
-    } as Partial<IChatChanges>);
+    this._changed.emit({ metadataChanges } as Partial<IChatChanges>);
   };
 
   private _users: Y.Map<IUser>;
   private _messages: Y.Array<IYmessage>;
+  private _attachments: Y.Map<IAttachment>;
   private _metadata: Y.Map<IMetadata>;
 }

package/style/base.css

@@ -20,3 +20,13 @@
 .jp-lab-chat-title-unread .lm-TabBar-tabLabel::before {
   content: '* ';
 }
+
+.jp-chat-command-name {
+  font-weight: normal;
+  margin: 5px;
+}
+
+.jp-chat-command-description {
+  color: gray;
+  margin: 5px;
+}