@jupyter/chat 0.1.0 → 0.2.0

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,37 @@ 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;
 }
 
 /**
- * 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 +68,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;
 }

package/style/chat.css

@@ -2,6 +2,17 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+.jp-chat-message:not(:first-child):not(.jp-chat-message-stacked) {
+  border-top: 1px solid var(--jp-border-color2);
+}
+
+.jp-chat-message:not(.jp-chat-message-stacked) {
+  padding: 1em 1em 0 1em;
+}
+
+.jp-chat-message.jp-chat-message-stacked {
+  padding: 0 1em;
+}
 
 .jp-chat-rendermime-markdown {
   position: relative;
@@ -51,3 +62,32 @@
 .jp-chat-toolbar > .jp-ToolbarButtonComponent {
   margin-top: 0px;
 }
+
+.jp-chat-navigation {
+  position: absolute;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  min-width: 0;
+}
+
+.jp-chat-navigation-unread {
+  border: solid 2px var(--jp-cell-inprompt-font-color);
+}
+
+.jp-chat-navigation::part(control) {
+  padding: 0;
+}
+
+.jp-chat-navigation-top {
+  top: 10px;
+}
+
+.jp-chat-navigation-top svg {
+  transform: rotate(180deg);
+}
+
+.jp-chat-navigation-bottom {
+  bottom: 100px;
+}

package/style/icons/read.svg

@@ -0,0 +1,11 @@
+<svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#545454;stroke-width:1.54693;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="M 2.2734634,9 V 20.226537 H 21.726536 V 9" />
+    <path
+       style="display:inline;fill:none;stroke:#545454;stroke-width:1.54528;stroke-linecap:square;stroke-miterlimit:10"
+       transform="matrix(0.81805878,0.57513462,-0.81805878,0.57513462,0,0)"
+       d="M 9.5141659,-5.1535239 H 20.802967 V 6.1352773 H 9.5141659 Z" />
+  </g>
+</svg>