@jupyter/chat 0.8.1 → 0.10.0

package/lib/input-model.js

@@ -9,7 +9,14 @@ const WHITESPACE = new Set([' ', '\n', '\t']);
  */
 export class InputModel {
     constructor(options) {
-        var _a, _b;
+        var _a, _b, _c;
+        /**
+         * Function to send a message.
+         */
+        this.send = (input) => {
+            this._onSend(input, this);
+            this.value = '';
+        };
         /**
          * Add attachment to send with next message.
          */
@@ -39,6 +46,12 @@ export class InputModel {
             this._attachments = [];
             this._attachmentsChanged.emit([]);
         };
+        /**
+         * Clear mentions list.
+         */
+        this.clearMentions = () => {
+            this._mentions = [];
+        };
         this._cursorIndex = null;
         this._currentWord = null;
         this._valueChanged = new Signal(this);
@@ -48,14 +61,25 @@ export class InputModel {
         this._focusInputSignal = new Signal(this);
         this._attachmentsChanged = new Signal(this);
         this._isDisposed = false;
+        this._onSend = options.onSend;
+        this._chatContext = options.chatContext;
         this._value = options.value || '';
         this._attachments = options.attachments || [];
+        this._mentions = options.mentions || [];
         this.cursorIndex = options.cursorIndex || this.value.length;
         this._activeCellManager = (_a = options.activeCellManager) !== null && _a !== void 0 ? _a : null;
         this._selectionWatcher = (_b = options.selectionWatcher) !== null && _b !== void 0 ? _b : null;
+        this._documentManager = (_c = options.documentManager) !== null && _c !== void 0 ? _c : null;
         this._config = {
             ...options.config
         };
+        this.cancel = options.onCancel;
+    }
+    /**
+     * The chat context (a readonly subset of the chat model);
+     */
+    get chatContext() {
+        return this._chatContext;
     }
     /**
      * The entire input value.
@@ -124,6 +148,12 @@ export class InputModel {
     get selectionWatcher() {
         return this._selectionWatcher;
     }
+    /**
+     * Get the document manager.
+     */
+    get documentManager() {
+        return this._documentManager;
+    }
     /**
      * The input configuration.
      */
@@ -174,6 +204,30 @@ export class InputModel {
         const [start, end] = Private.getCurrentWordBoundaries(this.value, this.cursorIndex);
         this.value = this.value.slice(0, start) + newWord + this.value.slice(end);
     }
+    /**
+     * The mentioned user list.
+     */
+    get mentions() {
+        return this._mentions;
+    }
+    /**
+     * Add a user mention.
+     */
+    addMention(user) {
+        const usernames = this._mentions.map(user => user.username);
+        if (!usernames.includes(user.username)) {
+            this._mentions.push(user);
+        }
+    }
+    /**
+     * Remove a user mention.
+     */
+    removeMention(user) {
+        const index = this._mentions.indexOf(user);
+        if (index > -1) {
+            this._mentions.splice(index, 1);
+        }
+    }
     /**
      * Dispose the input model.
      */

package/lib/model.d.ts

@@ -1,10 +1,11 @@
+import { IDocumentManager } from '@jupyterlab/docmanager';
 import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal } from '@lumino/signaling';
-import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
 import { IActiveCellManager } from './active-cell-manager';
-import { ISelectionWatcher } from './selection-watcher';
 import { IInputModel } from './input-model';
+import { ISelectionWatcher } from './selection-watcher';
+import { IChatHistory, INewMessage, IChatMessage, IConfig, IUser } from './types';
 /**
  * The chat model interface.
  */
@@ -45,6 +46,10 @@ export interface IChatModel extends IDisposable {
      * Get the selection watcher.
      */
     readonly selectionWatcher: ISelectionWatcher | null;
+    /**
+     * Get the selection watcher.
+     */
+    readonly documentManager: IDocumentManager | null;
     /**
      * A signal emitting when the messages list is updated.
      */
@@ -73,6 +78,10 @@ export interface IChatModel extends IDisposable {
      * @returns whether the message has been sent or not, or nothing if not needed.
      */
     sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Clear the message list.
+     */
+    clearMessages(): void;
     /**
      * Optional, to update a message from the chat panel.
      *
@@ -122,17 +131,22 @@ export interface IChatModel extends IDisposable {
      * Update the current writers list.
      */
     updateWriters(writers: IUser[]): void;
+    /**
+     * Create the chat context that will be passed to the input model.
+     */
+    createChatContext(): IChatContext;
 }
 /**
- * The default chat model implementation.
- * It is not able to send or update a message by itself, since it depends on the
- * chosen technology.
+ * An abstract implementation of IChatModel.
+ *
+ * The class inheriting from it must implement at least:
+ * - sendMessage(message: INewMessage)
  */
-export declare class ChatModel implements IChatModel {
+export declare abstract class AbstractChatModel implements IChatModel {
     /**
      * Create a new chat model.
      */
-    constructor(options?: ChatModel.IOptions);
+    constructor(options?: IChatModel.IOptions);
     /**
      * The chat model id.
      */
@@ -159,6 +173,10 @@ export declare class ChatModel implements IChatModel {
      * Get the selection watcher.
      */
     get selectionWatcher(): ISelectionWatcher | null;
+    /**
+     * Get the document manager.
+     */
+    get documentManager(): IDocumentManager | null;
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -206,7 +224,11 @@ export declare class ChatModel implements IChatModel {
      * @param message - the message to send.
      * @returns whether the message has been sent or not.
      */
-    sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    abstract sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void;
+    /**
+     * Clear the message list.
+     */
+    clearMessages(): void;
     /**
      * Dispose the chat model.
      */
@@ -245,6 +267,10 @@ export declare class ChatModel implements IChatModel {
      * This implementation only propagate the list via a signal.
      */
     updateWriters(writers: IUser[]): void;
+    /**
+     * Create the chat context that will be passed to the input model.
+     */
+    abstract createChatContext(): IChatContext;
     /**
      * Add unread messages to the list.
      * @param indexes - list of new indexes.
@@ -271,6 +297,7 @@ export declare class ChatModel implements IChatModel {
     private _commands?;
     private _activeCellManager;
     private _selectionWatcher;
+    private _documentManager;
     private _notificationId;
     private _messagesUpdated;
     private _configChanged;
@@ -281,7 +308,7 @@ export declare class ChatModel implements IChatModel {
 /**
  * The chat model namespace.
  */
-export declare namespace ChatModel {
+export declare namespace IChatModel {
     /**
      * The instantiation options for a ChatModel.
      */
@@ -306,5 +333,45 @@ export declare namespace ChatModel {
          * Selection watcher.
          */
         selectionWatcher?: ISelectionWatcher | null;
+        /**
+         * Document manager.
+         */
+        documentManager?: IDocumentManager | null;
     }
 }
+/**
+ * Interface of the chat context, a 'subset' of the model with readonly attribute,
+ * which can be passed to the input model.
+ * This allows third party extensions to get some attribute of the model without
+ * exposing the method that can modify it.
+ */
+export interface IChatContext {
+    /**
+     * The name of the chat.
+     */
+    readonly name: string;
+    /**
+     * A copy of the messages.
+     */
+    readonly messages: IChatMessage[];
+    /**
+     * A list of all users who have connected to this chat.
+     */
+    readonly users: IUser[];
+}
+/**
+ * An abstract base class implementing `IChatContext`. This can be extended into
+ * a complete implementation, as done in `jupyterlab-chat`.
+ */
+export declare abstract class AbstractChatContext implements IChatContext {
+    constructor(options: {
+        model: IChatModel;
+    });
+    get name(): string;
+    get messages(): IChatMessage[];
+    /**
+     * ABSTRACT: Should return a list of users who have connected to this chat.
+     */
+    abstract get users(): IUser[];
+    protected _model: IChatModel;
+}

package/lib/model.js

@@ -4,17 +4,19 @@
  */
 import { Signal } from '@lumino/signaling';
 import { InputModel } from './input-model';
+import { replaceMentionToSpan } from './utils';
 /**
- * The default chat model implementation.
- * It is not able to send or update a message by itself, since it depends on the
- * chosen technology.
+ * An abstract implementation of IChatModel.
+ *
+ * The class inheriting from it must implement at least:
+ * - sendMessage(message: INewMessage)
  */
-export class ChatModel {
+export class AbstractChatModel {
     /**
      * Create a new chat model.
      */
     constructor(options = {}) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this._messages = [];
         this._unreadMessages = [];
         this._messagesInViewport = [];
@@ -37,15 +39,19 @@ export class ChatModel {
             ...config
         };
         this._inputModel = new InputModel({
+            chatContext: this.createChatContext(),
             activeCellManager: options.activeCellManager,
             selectionWatcher: options.selectionWatcher,
+            documentManager: options.documentManager,
             config: {
                 sendWithShiftEnter: config.sendWithShiftEnter
-            }
+            },
+            onSend: (input) => this.sendMessage({ body: input })
         });
         this._commands = options.commands;
         this._activeCellManager = (_b = options.activeCellManager) !== null && _b !== void 0 ? _b : null;
         this._selectionWatcher = (_c = options.selectionWatcher) !== null && _c !== void 0 ? _c : null;
+        this._documentManager = (_d = options.documentManager) !== null && _d !== void 0 ? _d : null;
     }
     /**
      * The chat model id.
@@ -89,6 +95,12 @@ export class ChatModel {
     get selectionWatcher() {
         return this._selectionWatcher;
     }
+    /**
+     * Get the document manager.
+     */
+    get documentManager() {
+        return this._documentManager;
+    }
     /**
      * Timestamp of the last read message in local storage.
      */
@@ -212,13 +224,12 @@ export class ChatModel {
         return this._writersChanged;
     }
     /**
-     * Send a message, to be defined depending on the chosen technology.
-     * Default to no-op.
-     *
-     * @param message - the message to send.
-     * @returns whether the message has been sent or not.
+     * Clear the message list.
      */
-    sendMessage(message) { }
+    clearMessages() {
+        this._messages = [];
+        this._messagesUpdated.emit();
+    }
     /**
      * Dispose the chat model.
      */
@@ -239,6 +250,10 @@ export class ChatModel {
      * Can be useful if some actions are required on the message.
      */
     formatChatMessage(message) {
+        var _a;
+        (_a = message.mentions) === null || _a === void 0 ? void 0 : _a.forEach(user => {
+            message.body = replaceMentionToSpan(message.body, user);
+        });
         return message;
     }
     /**
@@ -363,3 +378,18 @@ export class ChatModel {
         }
     }
 }
+/**
+ * An abstract base class implementing `IChatContext`. This can be extended into
+ * a complete implementation, as done in `jupyterlab-chat`.
+ */
+export class AbstractChatContext {
+    constructor(options) {
+        this._model = options.model;
+    }
+    get name() {
+        return this._model.name;
+    }
+    get messages() {
+        return [...this._model.messages];
+    }
+}

package/lib/types.d.ts

@@ -8,6 +8,10 @@ export interface IUser {
     initials?: string;
     color?: string;
     avatar_url?: string;
+    /**
+     * The string to use to mention a user in the chat.
+     */
+    mention_name?: string;
 }
 /**
  * The configuration interface.
@@ -44,6 +48,7 @@ export interface IChatMessage<T = IUser, U = IAttachment> {
     time: number;
     sender: T;
     attachments?: U[];
+    mentions?: T[];
     raw_time?: boolean;
     deleted?: boolean;
     edited?: boolean;
@@ -84,21 +89,3 @@ export interface IAttachment {
  */
 export interface ISettings {
 }
-/**
- * Representation of a selected text.
- */
-export type TextSelection = {
-    type: 'text';
-    source: string;
-};
-/**
- * Representation of a selected cell.
- */
-export type CellSelection = {
-    type: 'cell';
-    source: string;
-};
-/**
- * Selection object (text or cell).
- */
-export type Selection = TextSelection | CellSelection;

package/lib/utils.d.ts

@@ -1,6 +1,7 @@
 import { CodeMirrorEditor } from '@jupyterlab/codemirror';
 import { Notebook } from '@jupyterlab/notebook';
 import { Widget } from '@lumino/widgets';
+import { IUser } from './types';
 /**
  * Gets the editor instance used by a document widget. Returns `null` if unable.
  */
@@ -9,3 +10,17 @@ export declare function getEditor(widget: Widget | null): CodeMirrorEditor | nul
  * Gets the index of the cell associated with `cellId`.
  */
 export declare function getCellIndex(notebook: Notebook, cellId: string): number;
+/**
+ * Replace a mention to user (@someone) to a span, for markdown renderer.
+ *
+ * @param content - the content to update.
+ * @param user - the user mentioned.
+ */
+export declare function replaceMentionToSpan(content: string, user: IUser): string;
+/**
+ * Replace a span to a mentioned to user string (@someone).
+ *
+ * @param content - the content to update.
+ * @param user - the user mentioned.
+ */
+export declare function replaceSpanToMention(content: string, user: IUser): string;

package/lib/utils.js

@@ -6,6 +6,7 @@ import { CodeMirrorEditor } from '@jupyterlab/codemirror';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { FileEditor } from '@jupyterlab/fileeditor';
 import { Notebook } from '@jupyterlab/notebook';
+const MENTION_CLASS = 'jp-chat-mention';
 /**
  * Gets the editor instance used by a document widget. Returns `null` if unable.
  */
@@ -35,3 +36,31 @@ export function getCellIndex(notebook, cellId) {
     const idx = (_a = notebook.model) === null || _a === void 0 ? void 0 : _a.sharedModel.cells.findIndex(cell => cell.getId() === cellId);
     return idx === undefined ? -1 : idx;
 }
+/**
+ * Replace a mention to user (@someone) to a span, for markdown renderer.
+ *
+ * @param content - the content to update.
+ * @param user - the user mentioned.
+ */
+export function replaceMentionToSpan(content, user) {
+    if (!user.mention_name) {
+        return content;
+    }
+    const regex = new RegExp(user.mention_name, 'g');
+    const mention = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
+    return content.replace(regex, mention);
+}
+/**
+ * Replace a span to a mentioned to user string (@someone).
+ *
+ * @param content - the content to update.
+ * @param user - the user mentioned.
+ */
+export function replaceSpanToMention(content, user) {
+    if (!user.mention_name) {
+        return content;
+    }
+    const span = `<span class="${MENTION_CLASS}">${user.mention_name}</span>`;
+    const regex = new RegExp(span, 'g');
+    return content.replace(regex, user.mention_name);
+}

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

@@ -1,6 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
-import { Chat } from '../components/chat';
+import { Chat, IInputToolbarRegistry } from '../components';
 import { IChatModel } from '../model';
 export declare class ChatWidget extends ReactWidget {
     constructor(options: Chat.IOptions);
@@ -8,6 +8,10 @@ export declare class ChatWidget extends ReactWidget {
      * Get the model of the widget.
      */
     get model(): IChatModel;
+    /**
+     * Get the input toolbar registry (if it has been provided when creating the widget).
+     */
+    get inputToolbarRegistry(): IInputToolbarRegistry | undefined;
     render(): React.JSX.Element;
     private _chatOptions;
 }

package/lib/widgets/chat-widget.js

@@ -4,7 +4,7 @@
  */
 import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
-import { Chat } from '../components/chat';
+import { Chat } from '../components';
 import { chatIcon } from '../icons';
 export class ChatWidget extends ReactWidget {
     constructor(options) {
@@ -21,6 +21,12 @@ export class ChatWidget extends ReactWidget {
     get model() {
         return this._chatOptions.model;
     }
+    /**
+     * Get the input toolbar registry (if it has been provided when creating the widget).
+     */
+    get inputToolbarRegistry() {
+        return this._chatOptions.inputToolbarRegistry;
+    }
     render() {
         // The model need to be passed, otherwise it is undefined in the widget in
         // the case of collaborative document.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/__tests__/mocks.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import {
+  AbstractChatContext,
+  AbstractChatModel,
+  IChatModel,
+  IChatContext
+} from '../model';
+import { INewMessage } from '../types';
+
+export class MockChatContext
+  extends AbstractChatContext
+  implements IChatContext
+{
+  get users() {
+    return [];
+  }
+}
+
+export class MockChatModel extends AbstractChatModel implements IChatModel {
+  sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void {
+    // No-op
+  }
+
+  createChatContext(): IChatContext {
+    return new MockChatContext({ model: this });
+  }
+}

package/src/__tests__/model.spec.ts

@@ -7,29 +7,39 @@
  * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
  */
 
-import { ChatModel, IChatModel } from '../model';
-import { IChatMessage } from '../types';
+import { AbstractChatModel, IChatContext, IChatModel } from '../model';
+import { IChatMessage, INewMessage } from '../types';
+import { MockChatModel, MockChatContext } from './mocks';
 
 describe('test chat model', () => {
   describe('model instantiation', () => {
-    it('should create a ChatModel', () => {
-      const model = new ChatModel();
-      expect(model).toBeInstanceOf(ChatModel);
+    it('should create an AbstractChatModel', () => {
+      const model = new MockChatModel();
+      expect(model).toBeInstanceOf(AbstractChatModel);
     });
 
-    it('should dispose a ChatModel', () => {
-      const model = new ChatModel();
+    it('should dispose an AbstractChatModel', () => {
+      const model = new MockChatModel();
       model.dispose();
       expect(model.isDisposed).toBeTruthy();
     });
   });
 
   describe('incoming message', () => {
-    class TestChat extends ChatModel {
+    class TestChat extends AbstractChatModel implements IChatModel {
       protected formatChatMessage(message: IChatMessage): IChatMessage {
         message.body = 'formatted msg';
         return message;
       }
+      sendMessage(
+        message: INewMessage
+      ): Promise<boolean | void> | boolean | void {
+        // No-op
+      }
+
+      createChatContext(): IChatContext {
+        return new MockChatContext({ model: this });
+      }
     }
 
     let model: IChatModel;
@@ -47,7 +57,7 @@ describe('test chat model', () => {
     });
 
     it('should signal incoming message', () => {
-      model = new ChatModel();
+      model = new MockChatModel();
       model.messagesUpdated.connect((sender: IChatModel) => {
         expect(sender).toBe(model);
         messages = model.messages;
@@ -72,12 +82,12 @@ describe('test chat model', () => {
 
   describe('model config', () => {
     it('should have empty config', () => {
-      const model = new ChatModel();
+      const model = new MockChatModel();
       expect(model.config.sendWithShiftEnter).toBeUndefined();
     });
 
     it('should allow config', () => {
-      const model = new ChatModel({ config: { sendWithShiftEnter: true } });
+      const model = new MockChatModel({ config: { sendWithShiftEnter: true } });
       expect(model.config.sendWithShiftEnter).toBeTruthy();
     });
   });

package/src/__tests__/widgets.spec.ts

@@ -11,25 +11,26 @@ import {
   IRenderMimeRegistry,
   RenderMimeRegistry
 } from '@jupyterlab/rendermime';
-import { ChatModel, IChatModel } from '../model';
+import { IChatModel } from '../model';
 import { ChatWidget } from '../widgets/chat-widget';
+import { MockChatModel } from './mocks';
 
 describe('test chat widget', () => {
   let model: IChatModel;
   let rmRegistry: IRenderMimeRegistry;
 
   beforeEach(() => {
-    model = new ChatModel();
+    model = new MockChatModel();
     rmRegistry = new RenderMimeRegistry();
   });
 
   describe('model instantiation', () => {
-    it('should create a ChatModel', () => {
+    it('should create an AbstractChatModel', () => {
       const widget = new ChatWidget({ model, rmRegistry });
       expect(widget).toBeInstanceOf(ChatWidget);
     });
 
-    it('should dispose a ChatModel', () => {
+    it('should dispose an AbstractChatModel', () => {
       const widget = new ChatWidget({ model, rmRegistry });
       widget.dispose();
       expect(widget.isDisposed).toBeTruthy();

package/src/chat-commands/types.ts

@@ -22,7 +22,7 @@ export type ChatCommand = {
    * If set, this will be rendered as the icon for the command in the chat
    * commands menu. Jupyter Chat will choose a default if this is unset.
    */
-  icon?: LabIcon | string;
+  icon?: LabIcon | JSX.Element | string | null;
 
   /**
    * If set, this will be rendered as the description for the command in the