@jupyter/chat 0.1.0 → 0.3.0

package/src/model.ts

@@ -3,6 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+import { CommandRegistry } from '@lumino/commands';
 import { IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 
@@ -13,21 +14,32 @@ import {
   IConfig,
   IUser
 } from './types';
+import { IActiveCellManager } from './active-cell-manager';
 
 /**
  * The chat model interface.
  */
 export interface IChatModel extends IDisposable {
   /**
-   * The chat model ID.
+   * The chat model name.
    */
-  id: string;
+  name: string;
 
   /**
    * The configuration for the chat panel.
    */
   config: IConfig;
 
+  /**
+   * The indexes list of the unread messages.
+   */
+  unreadMessages: number[];
+
+  /**
+   * The indexes list of the messages currently in the viewport.
+   */
+  messagesInViewport?: number[];
+
   /**
    * The user connected to the chat panel.
    */
@@ -39,10 +51,30 @@ export interface IChatModel extends IDisposable {
   readonly messages: IChatMessage[];
 
   /**
-   * The signal emitted when the messages list is updated.
+   * Get the active cell manager.
+   */
+  readonly activeCellManager: IActiveCellManager | null;
+
+  /**
+   * A signal emitting when the messages list is updated.
    */
   readonly messagesUpdated: ISignal<IChatModel, void>;
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig>;
+
+  /**
+   * A signal emitting when unread messages change.
+   */
+  readonly unreadChanged?: ISignal<IChatModel, number[]>;
+
+  /**
+   * A signal emitting when the viewport change.
+   */
+  readonly viewportChanged?: ISignal<IChatModel, number[]>;
+
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -119,7 +151,14 @@ export class ChatModel implements IChatModel {
    * Create a new chat model.
    */
   constructor(options: ChatModel.IOptions = {}) {
-    this._config = options.config ?? {};
+    const config = options.config ?? {};
+
+    // Stack consecutive messages from the same user by default.
+    this._config = { stackMessages: true, ...config };
+
+    this._commands = options.commands;
+
+    this._activeCellManager = options.activeCellManager ?? null;
   }
 
   /**
@@ -129,16 +168,52 @@ export class ChatModel implements IChatModel {
     return this._messages;
   }
 
+  get activeCellManager(): IActiveCellManager | null {
+    return this._activeCellManager;
+  }
   /**
-   * The chat model ID.
+   * The chat model id.
    */
-  get id(): string {
+  get id(): string | undefined {
     return this._id;
   }
-  set id(value: string) {
+  set id(value: string | undefined) {
     this._id = value;
   }
 
+  /**
+   * The chat model name.
+   */
+  get name(): string {
+    return this._name;
+  }
+  set name(value: string) {
+    this._name = value;
+  }
+
+  /**
+   * Timestamp of the last read message in local storage.
+   */
+  get lastRead(): number {
+    if (this._id === undefined) {
+      return 0;
+    }
+    const storage = JSON.parse(
+      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
+    );
+    return storage.lastRead ?? 0;
+  }
+  set lastRead(value: number) {
+    if (this._id === undefined) {
+      return;
+    }
+    const storage = JSON.parse(
+      localStorage.getItem(`@jupyter/chat:${this._id}`) || '{}'
+    );
+    storage.lastRead = value;
+    localStorage.setItem(`@jupyter/chat:${this._id}`, JSON.stringify(storage));
+  }
+
   /**
    * The chat settings.
    */
@@ -146,16 +221,113 @@ export class ChatModel implements IChatModel {
     return this._config;
   }
   set config(value: Partial<IConfig>) {
+    const stackMessagesChanged =
+      'stackMessages' in value &&
+      this._config.stackMessages !== value.stackMessages;
+
+    const unreadNotificationsChanged =
+      'unreadNotifications' in value &&
+      this._config.unreadNotifications !== value.unreadNotifications;
+
     this._config = { ...this._config, ...value };
+
+    this._configChanged.emit(this._config);
+
+    // Update the stacked status of the messages and the view.
+    if (stackMessagesChanged) {
+      if (this._config.stackMessages) {
+        this._messages.slice(1).forEach((message, idx) => {
+          const previousUser = this._messages[idx].sender.username;
+          message.stacked = previousUser === message.sender.username;
+        });
+      } else {
+        this._messages.forEach(message => {
+          delete message.stacked;
+        });
+      }
+      this._messagesUpdated.emit();
+    }
+
+    // remove existing notifications if they are not required anymore.
+    if (unreadNotificationsChanged && !this._config.unreadNotifications) {
+      this._notify(0);
+    }
+  }
+
+  /**
+   * The indexes list of the unread messages.
+   */
+  get unreadMessages(): number[] {
+    return this._unreadMessages;
+  }
+  set unreadMessages(unread: number[]) {
+    const recentlyRead = this._unreadMessages.filter(
+      elem => !unread.includes(elem)
+    );
+    const unreadCountDiff = unread.length - this._unreadMessages.length;
+
+    this._unreadMessages = unread;
+    this._unreadChanged.emit(this._unreadMessages);
+
+    // Notify the change.
+    this._notify(unread.length, unreadCountDiff > 0);
+
+    // Save the last read to the local storage.
+    if (this._id !== undefined && recentlyRead.length) {
+      let lastReadChanged = false;
+      let lastRead = this.lastRead ?? this.messages[recentlyRead[0]].time;
+      recentlyRead.forEach(index => {
+        if (this.messages[index].time > lastRead) {
+          lastRead = this.messages[index].time;
+          lastReadChanged = true;
+        }
+      });
+
+      if (lastReadChanged) {
+        this.lastRead = lastRead;
+      }
+    }
+  }
+
+  /**
+   * The indexes list of the messages currently in the viewport.
+   */
+  get messagesInViewport(): number[] {
+    return this._messagesInViewport;
+  }
+  set messagesInViewport(values: number[]) {
+    this._messagesInViewport = values;
+    this._viewportChanged.emit(values);
   }
 
   /**
-   * The signal emitted when the messages list is updated.
+   * A signal emitting when the messages list is updated.
    */
   get messagesUpdated(): ISignal<IChatModel, void> {
     return this._messagesUpdated;
   }
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig> {
+    return this._configChanged;
+  }
+
+  /**
+   * A signal emitting when unread messages change.
+   */
+  get unreadChanged(): ISignal<IChatModel, number[]> {
+    return this._unreadChanged;
+  }
+
+  /**
+   * A signal emitting when the viewport change.
+   */
+  get viewportChanged(): ISignal<IChatModel, number[]> {
+    return this._viewportChanged;
+  }
+
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -165,17 +337,6 @@ export class ChatModel implements IChatModel {
    */
   addMessage(message: INewMessage): Promise<boolean | void> | boolean | void {}
 
-  /**
-   * Optional, to update a message from the chat panel.
-   *
-   * @param id - the unique ID of the message.
-   * @param message - the message to update.
-   */
-  updateMessage?(
-    id: string,
-    message: INewMessage
-  ): Promise<boolean | void> | boolean | void;
-
   /**
    * Dispose the chat model.
    */
@@ -231,10 +392,35 @@ export class ChatModel implements IChatModel {
    */
   messagesInserted(index: number, messages: IChatMessage[]): void {
     const formattedMessages: IChatMessage[] = [];
-    messages.forEach(message => {
+    const unreadIndexes: number[] = [];
+
+    const lastRead = this.lastRead ?? 0;
+
+    // Format the messages.
+    messages.forEach((message, idx) => {
       formattedMessages.push(this.formatChatMessage(message));
+      if (message.time > lastRead) {
+        unreadIndexes.push(index + idx);
+      }
     });
+
+    // Insert the messages.
     this._messages.splice(index, 0, ...formattedMessages);
+
+    if (this._config.stackMessages) {
+      // Check if some messages should be stacked by comparing each message' sender
+      // with the previous one.
+      const lastIdx = index + formattedMessages.length - 1;
+      const start = index === 0 ? 1 : index;
+      const end = this._messages.length > lastIdx + 1 ? lastIdx + 1 : lastIdx;
+      for (let idx = start; idx <= end; idx++) {
+        const message = this._messages[idx];
+        const previousUser = this._messages[idx - 1].sender.username;
+        message.stacked = previousUser === message.sender.username;
+      }
+    }
+
+    this._addUnreadMessages(unreadIndexes);
     this._messagesUpdated.emit();
   }
 
@@ -249,11 +435,69 @@ export class ChatModel implements IChatModel {
     this._messagesUpdated.emit();
   }
 
+  /**
+   * Add unread messages to the list.
+   * @param indexes - list of new indexes.
+   */
+  private _addUnreadMessages(indexes: number[]) {
+    const unread = new Set(this._unreadMessages);
+    indexes.forEach(index => unread.add(index));
+    this.unreadMessages = Array.from(unread.values());
+  }
+
+  /**
+   * Notifications on unread messages.
+   *
+   * @param unreadCount - number of unread messages.
+   *    If the value is 0, existing notification will be deleted.
+   * @param canCreate - whether to create a notification if it does not exist.
+   *    Usually it is used when there are new unread messages, and not when the
+   *    unread messages count decrease.
+   */
+  private _notify(unreadCount: number, canCreate: boolean = false) {
+    if (this._commands) {
+      if (unreadCount && this._config.unreadNotifications) {
+        // Update the notification if exist.
+        this._commands
+          .execute('apputils:update-notification', {
+            id: this._notificationId,
+            message: `${unreadCount} incoming message(s) ${this._name ? 'in ' + this._name : ''}`
+          })
+          .then(success => {
+            // Create a new notification only if messages are added.
+            if (!success && canCreate) {
+              this._commands!.execute('apputils:notify', {
+                type: 'info',
+                message: `${unreadCount} incoming message(s) in ${this._name}`
+              }).then(id => {
+                this._notificationId = id;
+              });
+            }
+          });
+      } else if (this._notificationId) {
+        // Delete notification if there is no more unread messages.
+        this._commands.execute('apputils:dismiss-notification', {
+          id: this._notificationId
+        });
+        this._notificationId = null;
+      }
+    }
+  }
+
   private _messages: IChatMessage[] = [];
-  private _id: string = '';
+  private _unreadMessages: number[] = [];
+  private _messagesInViewport: number[] = [];
+  private _id: string | undefined;
+  private _name: string = '';
   private _config: IConfig;
   private _isDisposed = false;
+  private _commands?: CommandRegistry;
+  private _activeCellManager: IActiveCellManager | null;
+  private _notificationId: string | null = null;
   private _messagesUpdated = new Signal<IChatModel, void>(this);
+  private _configChanged = new Signal<IChatModel, IConfig>(this);
+  private _unreadChanged = new Signal<IChatModel, number[]>(this);
+  private _viewportChanged = new Signal<IChatModel, number[]>(this);
 }
 
 /**
@@ -268,5 +512,15 @@ export namespace ChatModel {
      * Initial config for the chat widget.
      */
     config?: IConfig;
+
+    /**
+     * Commands registry.
+     */
+    commands?: CommandRegistry;
+
+    /**
+     * Active cell manager
+     */
+    activeCellManager?: IActiveCellManager | null;
   }
 }

package/src/registry.ts

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

package/src/types.ts

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

package/src/widgets/chat-sidebar.tsx

@@ -3,26 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
 
 import { Chat } from '../components/chat';
 import { chatIcon } from '../icons';
-import { IChatModel } from '../model';
 
-export function buildChatSidebar(
-  chatModel: IChatModel,
-  themeManager: IThemeManager | null,
-  rmRegistry: IRenderMimeRegistry
-): ReactWidget {
-  const ChatWidget = ReactWidget.create(
-    <Chat
-      model={chatModel}
-      themeManager={themeManager}
-      rmRegistry={rmRegistry}
-    />
-  );
+export function buildChatSidebar(options: Chat.IOptions): ReactWidget {
+  const ChatWidget = ReactWidget.create(<Chat {...options} />);
   ChatWidget.id = 'jupyter-chat::side-panel';
   ChatWidget.title.icon = chatIcon;
   ChatWidget.title.caption = 'Jupyter Chat'; // TODO: i18n

package/src/widgets/chat-widget.tsx

@@ -3,8 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
-import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
 
 import { Chat } from '../components/chat';
@@ -19,33 +18,21 @@ export class ChatWidget extends ReactWidget {
     this.title.icon = chatIcon;
     this.title.caption = 'Jupyter Chat'; // TODO: i18n
 
-    this._model = options.model;
-    this._themeManager = options?.themeManager || null;
-    this._rmRegistry = options.rmRegistry;
+    this._chatOptions = options;
   }
 
   /**
-   * Gte the model of the widget.
+   * Get the model of the widget.
    */
   get model(): IChatModel {
-    return this._model;
+    return this._chatOptions.model;
   }
 
   render() {
-    return (
-      <Chat
-        model={this._model}
-        themeManager={this._themeManager}
-        rmRegistry={this._rmRegistry}
-      />
-    );
+    // The model need to be passed, otherwise it is undefined in the widget in
+    // the case of collaborative document.
+    return <Chat {...this._chatOptions} model={this._chatOptions.model} />;
   }
 
-  private readonly _model: IChatModel;
-  private _themeManager: IThemeManager | null;
-  private _rmRegistry: IRenderMimeRegistry;
-}
-
-export namespace ChatWidget {
-  export interface IOptions extends Chat.IOptions {}
+  private _chatOptions: Chat.IOptions;
 }