@jupyter/chat 0.7.0 → 0.8.0

package/src/model.ts

@@ -16,6 +16,7 @@ import {
 } from './types';
 import { IActiveCellManager } from './active-cell-manager';
 import { ISelectionWatcher } from './selection-watcher';
+import { IInputModel, InputModel } from './input-model';
 
 /**
  * The chat model interface.
@@ -51,6 +52,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly messages: IChatMessage[];
 
+  /**
+   * The input model.
+   */
+  readonly input: IInputModel;
+
   /**
    * Get the active cell manager.
    */
@@ -86,11 +92,6 @@ export interface IChatModel extends IDisposable {
    */
   readonly writersChanged?: ISignal<IChatModel, IUser[]>;
 
-  /**
-   * A signal emitting when the focus is requested on the input.
-   */
-  readonly focusInputSignal?: ISignal<IChatModel, void>;
-
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -160,16 +161,6 @@ export interface IChatModel extends IDisposable {
    * Update the current writers list.
    */
   updateWriters(writers: IUser[]): void;
-
-  /**
-   * Function to request the focus on the input of the chat.
-   */
-  focusInput(): void;
-
-  /**
-   * Function called by the input on key pressed.
-   */
-  inputChanged?(input?: string): void;
 }
 
 /**
@@ -195,6 +186,14 @@ export class ChatModel implements IChatModel {
       ...config
     };
 
+    this._inputModel = new InputModel({
+      activeCellManager: options.activeCellManager,
+      selectionWatcher: options.selectionWatcher,
+      config: {
+        sendWithShiftEnter: config.sendWithShiftEnter
+      }
+    });
+
     this._commands = options.commands;
 
     this._activeCellManager = options.activeCellManager ?? null;
@@ -228,6 +227,14 @@ export class ChatModel implements IChatModel {
   get messages(): IChatMessage[] {
     return this._messages;
   }
+
+  /**
+   * The input model.
+   */
+  get input(): IInputModel {
+    return this._inputModel;
+  }
+
   /**
    * Get the active cell manager.
    */
@@ -284,6 +291,7 @@ export class ChatModel implements IChatModel {
 
     this._configChanged.emit(this._config);
 
+    this.input.config = value;
     // Update the stacked status of the messages and the view.
     if (stackMessagesChanged) {
       if (this._config.stackMessages) {
@@ -386,13 +394,6 @@ export class ChatModel implements IChatModel {
     return this._writersChanged;
   }
 
-  /**
-   * A signal emitting when the focus is requested on the input.
-   */
-  get focusInputSignal(): ISignal<IChatModel, void> {
-    return this._focusInputSignal;
-  }
-
   /**
    * Send a message, to be defined depending on the chosen technology.
    * Default to no-op.
@@ -508,18 +509,6 @@ export class ChatModel implements IChatModel {
     this._writersChanged.emit(writers);
   }
 
-  /**
-   * Function to request the focus on the input of the chat.
-   */
-  focusInput(): void {
-    this._focusInputSignal.emit();
-  }
-
-  /**
-   * Function called by the input on key pressed.
-   */
-  inputChanged?(input?: string): void {}
-
   /**
    * Add unread messages to the list.
    * @param indexes - list of new indexes.
@@ -575,6 +564,7 @@ export class ChatModel implements IChatModel {
   private _id: string | undefined;
   private _name: string = '';
   private _config: IConfig;
+  private _inputModel: IInputModel;
   private _isDisposed = false;
   private _commands?: CommandRegistry;
   private _activeCellManager: IActiveCellManager | null;
@@ -585,7 +575,6 @@ export class ChatModel implements IChatModel {
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
   private _writersChanged = new Signal<IChatModel, IUser[]>(this);
-  private _focusInputSignal = new Signal<ChatModel, void>(this);
 }
 
 /**

package/src/registry.ts

@@ -3,127 +3,33 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { Token } from '@lumino/coreutils';
-import { IAutocompletionCommandsProps } from './types';
+import { IAttachment } from './types';
 
 /**
- * The token for the autocomplete registry, which can be provided by an extension
+ * The token for the attachments opener registry, which can be provided by an extension
  * using @jupyter/chat package.
  */
-export const IAutocompletionRegistry = new Token<IAutocompletionRegistry>(
-  '@jupyter/chat:IAutocompleteRegistry'
+export const IAttachmentOpenerRegistry = new Token<IAttachmentOpenerRegistry>(
+  '@jupyter/chat:IAttachmentOpenerRegistry'
 );
 
 /**
- * The interface of a registry to provide autocompleters.
+ * The interface of a registry to provide attachments opener.
  */
-export interface IAutocompletionRegistry {
+export interface IAttachmentOpenerRegistry {
   /**
-   * The default autocompletion name.
+   * Get the function opening an attachment for a given type.
    */
-  default: string | null;
+  get(type: string): ((attachment: IAttachment) => void) | undefined;
   /**
-   * Get the default autocompletion.
+   * Register a function to open an attachment type.
    */
-  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;
+  set(type: string, opener: (attachment: IAttachment) => void): void;
 }
 
 /**
- * A registry to provide autocompleters.
+ * The default registry, a Map object.
  */
-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>();
-}
+export class AttachmentOpenerRegistry
+  extends Map<string, (attachment: IAttachment) => void>
+  implements IAttachmentOpenerRegistry {}

package/src/types.ts

@@ -44,12 +44,13 @@ export interface IConfig {
 /**
  * The chat message description.
  */
-export interface IChatMessage<T = IUser> {
+export interface IChatMessage<T = IUser, U = IAttachment> {
   type: 'msg';
   body: string;
   id: string;
   time: number;
   sender: T;
+  attachments?: U[];
   raw_time?: boolean;
   deleted?: boolean;
   edited?: boolean;
@@ -72,16 +73,27 @@ export interface INewMessage {
 }
 
 /**
- * An empty interface to describe optional settings that could be fetched from server.
+ * The attachment interface.
  */
-export interface ISettings {}
+export interface IAttachment {
+  /**
+   * The type of the attachment (basically 'file', 'variable', 'image')
+   */
+  type: string;
+  /**
+   * The value, i.e. the file path, the variable name or image content.
+   */
+  value: string;
+  /**
+   * The mimetype of the attachment, optional.
+   */
+  mimetype?: string;
+}
 
 /**
- * The autocomplete command type.
+ * An empty interface to describe optional settings that could be fetched from server.
  */
-export type AutocompleteCommand = {
-  label: string;
-};
+export interface ISettings {} /* eslint-disable-line @typescript-eslint/no-empty-object-type */
 
 /**
  * Representation of a selected text.
@@ -103,35 +115,3 @@ export type CellSelection = {
  * Selection object (text or cell).
  */
 export type Selection = TextSelection | CellSelection;
-
-/**
- * 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-widget.tsx

@@ -14,11 +14,12 @@ export class ChatWidget extends ReactWidget {
   constructor(options: Chat.IOptions) {
     super();
 
-    this.id = 'jupyter-chat::widget';
     this.title.icon = chatIcon;
     this.title.caption = 'Jupyter Chat'; // TODO: i18n
 
     this._chatOptions = options;
+    this.id = `jupyter-chat::widget::${options.model.name}`;
+    this.node.onclick = () => this.model.input.focus();
   }
 
   /**

package/style/chat.css

@@ -2,12 +2,12 @@
  * 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;
 }
 
-.jp-chat-message:not(.jp-chat-message-stacked) {
-  padding: 1em 1em 0 1em;
+.jp-chat-message:not(:first-child, .jp-chat-message-stacked) {
+  border-top: 1px solid var(--jp-border-color2);
 }
 
 .jp-chat-message.jp-chat-message-stacked {
@@ -58,17 +58,17 @@
   color: var(--jp-ui-font-color3);
 }
 
-.jp-chat-rendered-markdown:hover .jp-chat-toolbar {
-  display: inherit;
-}
-
 .jp-chat-toolbar:hover {
   cursor: pointer;
   color: var(--jp-ui-font-color2);
 }
 
+.jp-chat-rendered-markdown:hover .jp-chat-toolbar {
+  display: inherit;
+}
+
 .jp-chat-toolbar > .jp-ToolbarButtonComponent {
-  margin-top: 0px;
+  margin-top: 0;
 }
 
 .jp-chat-writers {
@@ -112,3 +112,21 @@
 .jp-chat-navigation-bottom {
   bottom: 100px;
 }
+
+.jp-chat-attachments {
+  display: flex;
+  min-height: 1.5em;
+}
+
+.jp-chat-attachment {
+  border: solid 1px;
+  border-radius: 10px;
+  margin: 0 0.2em;
+  padding: 0 0.3em;
+  align-content: center;
+  background-color: var(--jp-border-color3);
+}
+
+.jp-chat-attachment .jp-chat-attachment-clickable:hover {
+  cursor: pointer;
+}

package/style/icons/include-selection.svg

@@ -1,5 +1,7 @@
 <svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd"
         d="M-0.0018417 1.33824L0.837379 0.499023L1.35717 1.01871C1.35741 1.01862 1.35764 1.01853 1.35787 1.01845L3.411 3.07158H3.41049L4.83909 4.49987L3.41011 5.92872H3.41075L1.35769 7.98178C1.35749 7.98171 1.35729 7.98164 1.35709 7.98156L0.837023 8.50158L-0.00219727 7.66236L3.1547 4.49987L-0.0018417 1.33824ZM2.6821 8.07158H16.143C16.932 8.07158 17.5716 7.43201 17.5716 6.64301V2.35729C17.5716 1.56832 16.932 0.928721 16.143 0.928721H2.68236L4.82522 3.07158H15.4287V5.92872H4.82496L2.6821 8.07158ZM1.74238 4.50002L0.428719 5.81655V3.18349L1.74238 4.50002Z"
-        fill="#757575" />
+        fill="#616161"
+        class="jp-icon3"
+    />
 </svg>

package/style/icons/read.svg

@@ -1,11 +1,13 @@
 <svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
-  <g>
+  <g class="jp-icon3">
     <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" />
+      style="display:inline;fill:none;fill-opacity:1;stroke:#616161;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" />
+      style="display:inline;fill:none;stroke:#616161;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>

package/style/icons/replace-cell.svg

@@ -1,8 +1,12 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12 4.71429V7H1.71429V4.71429H12ZM12.5714 3C13.2026 3 13.7143 3.51168 13.7143 4.14286V7.57143C13.7143 8.20263 13.2026 8.71429 12.5714 8.71429H1.14286C0.51168 8.71429 0 8.20263 0 7.57143V4.14286C0 3.51168 0.511669 3 1.14286 3H12.5714Z"
-        fill="#565656" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M14 8.71429V11H3.71429V8.71429H14ZM14.5714 7C15.2026 7 15.7143 7.51168 15.7143 8.14286V11.5714C15.7143 12.2026 15.2026 12.7143 14.5714 12.7143H3.14286C2.51168 12.7143 2 12.2026 2 11.5714V8.14286C2 7.51168 2.51167 7 3.14286 7H14.5714Z"
-        fill="#565656" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12 4.71429V7H1.71429V4.71429H12ZM12.5714 3C13.2026 3 13.7143 3.51168 13.7143 4.14286V7.57143C13.7143 8.20263 13.2026 8.71429 12.5714 8.71429H1.14286C0.51168 8.71429 0 8.20263 0 7.57143V4.14286C0 3.51168 0.511669 3 1.14286 3H12.5714Z"
+    fill="#616161"
+    class="jp-icon3"
+  />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14 8.71429V11H3.71429V8.71429H14ZM14.5714 7C15.2026 7 15.7143 7.51168 15.7143 8.14286V11.5714C15.7143 12.2026 15.2026 12.7143 14.5714 12.7143H3.14286C2.51168 12.7143 2 12.2026 2 11.5714V8.14286C2 7.51168 2.51167 7 3.14286 7H14.5714Z"
+    fill="#616161"
+    class="jp-icon3"
+  />
 </svg>