@jupyter/chat 0.1.0 → 0.2.0

package/src/components/chat.tsx

@@ -9,57 +9,20 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { IconButton } from '@mui/material';
 import { Box } from '@mui/system';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
 import { ChatInput } from './chat-input';
-import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
-import { IChatMessage } from '../types';
-
-type ChatBodyProps = {
-  model: IChatModel;
-  rmRegistry: IRenderMimeRegistry;
-};
-
-function ChatBody({
-  model,
-  rmRegistry: renderMimeRegistry
-}: ChatBodyProps): JSX.Element {
-  const [messages, setMessages] = useState<IChatMessage[]>([]);
-
-  /**
-   * Effect: fetch history and config on initial render
-   */
-  useEffect(() => {
-    async function fetchHistory() {
-      if (!model.getHistory) {
-        return;
-      }
-      model
-        .getHistory()
-        .then(history => setMessages(history.messages))
-        .catch(e => console.error(e));
-    }
-
-    fetchHistory();
-  }, [model]);
-
-  /**
-   * Effect: listen to chat messages
-   */
-  useEffect(() => {
-    function handleChatEvents(_: IChatModel) {
-      setMessages([...model.messages]);
-    }
-
-    model.messagesUpdated.connect(handleChatEvents);
-    return function cleanup() {
-      model.messagesUpdated.disconnect(handleChatEvents);
-    };
-  }, [model]);
+import { IAutocompletionRegistry } from '../registry';
 
+export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
+  const {
+    model,
+    rmRegistry: renderMimeRegistry,
+    autocompletionRegistry
+  } = props;
   // no need to append to messageGroups imperatively here. all of that is
   // handled by the listeners registered in the effect hooks above.
   const onSend = async (input: string) => {
@@ -69,13 +32,7 @@ function ChatBody({
 
   return (
     <>
-      <ScrollContainer sx={{ flexGrow: 1 }}>
-        <ChatMessages
-          messages={messages}
-          rmRegistry={renderMimeRegistry}
-          model={model}
-        />
-      </ScrollContainer>
+      <ChatMessages rmRegistry={renderMimeRegistry} model={model} />
       <ChatInput
         onSend={onSend}
         sx={{
@@ -86,15 +43,14 @@ function ChatBody({
           borderTop: '1px solid var(--jp-border-color1)'
         }}
         sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+        autocompletionRegistry={autocompletionRegistry}
       />
     </>
   );
 }
 
 export function Chat(props: Chat.IOptions): JSX.Element {
-  const [view, setView] = useState<Chat.ChatView>(
-    props.chatView || Chat.ChatView.Chat
-  );
+  const [view, setView] = useState<Chat.View>(props.chatView || Chat.View.chat);
   return (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
@@ -111,15 +67,15 @@ export function Chat(props: Chat.IOptions): JSX.Element {
       >
         {/* top bar */}
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          {view !== Chat.ChatView.Chat ? (
-            <IconButton onClick={() => setView(Chat.ChatView.Chat)}>
+          {view !== Chat.View.chat ? (
+            <IconButton onClick={() => setView(Chat.View.chat)}>
               <ArrowBackIcon />
             </IconButton>
           ) : (
             <Box />
           )}
-          {view === Chat.ChatView.Chat && props.settingsPanel ? (
-            <IconButton onClick={() => setView(Chat.ChatView.Settings)}>
+          {view !== Chat.View.settings && props.settingsPanel ? (
+            <IconButton onClick={() => setView(Chat.View.settings)}>
               <SettingsIcon />
             </IconButton>
           ) : (
@@ -127,10 +83,14 @@ export function Chat(props: Chat.IOptions): JSX.Element {
           )}
         </Box>
         {/* body */}
-        {view === Chat.ChatView.Chat && (
-          <ChatBody model={props.model} rmRegistry={props.rmRegistry} />
+        {view === Chat.View.chat && (
+          <ChatBody
+            model={props.model}
+            rmRegistry={props.rmRegistry}
+            autocompletionRegistry={props.autocompletionRegistry}
+          />
         )}
-        {view === Chat.ChatView.Settings && props.settingsPanel && (
+        {view === Chat.View.settings && props.settingsPanel && (
           <props.settingsPanel />
         )}
       </Box>
@@ -143,9 +103,9 @@ export function Chat(props: Chat.IOptions): JSX.Element {
  */
 export namespace Chat {
   /**
-   * The options to build the Chat UI.
+   * The props for the chat body component.
    */
-  export interface IOptions {
+  export interface IChatBodyProps {
     /**
      * The chat model.
      */
@@ -154,6 +114,20 @@ export namespace Chat {
      * The rendermime registry.
      */
     rmRegistry: IRenderMimeRegistry;
+    /**
+     * Autocompletion registry.
+     */
+    autocompletionRegistry?: IAutocompletionRegistry;
+    /**
+     * Autocompletion name.
+     */
+    autocompletionName?: string;
+  }
+
+  /**
+   * The options to build the Chat UI.
+   */
+  export interface IOptions extends IChatBodyProps {
     /**
      * The theme manager.
      */
@@ -161,7 +135,7 @@ export namespace Chat {
     /**
      * The view to render.
      */
-    chatView?: ChatView;
+    chatView?: View;
     /**
      * A settings panel that can be used for dedicated settings (e.g. jupyter-ai)
      */
@@ -172,8 +146,8 @@ export namespace Chat {
    * The view to render.
    * The settings view is available only if the settings panel is provided in options.
    */
-  export enum ChatView {
-    Chat,
-    Settings
+  export enum View {
+    chat,
+    settings
   }
 }

package/src/components/scroll-container.tsx

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, SxProps, Theme } from '@mui/material';
 
 type ScrollContainerProps = {
@@ -32,30 +32,6 @@ export function ScrollContainer(props: ScrollContainerProps): JSX.Element {
     []
   );
 
-  /**
-   * Effect: Scroll the container to the bottom as soon as it is visible.
-   */
-  useEffect(() => {
-    const el = document.querySelector<HTMLElement>(`#${id}`);
-    if (!el) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            el.scroll({ top: 999999999 });
-          }
-        });
-      },
-      { threshold: 1.0 }
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
   return (
     <Box
       id={id}

package/src/icons.ts

@@ -8,8 +8,14 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import chatSvgStr from '../style/icons/chat.svg';
+import readSvgStr from '../style/icons/read.svg';
 
 export const chatIcon = new LabIcon({
   name: 'jupyter-chat::chat',
   svgstr: chatSvgStr
 });
+
+export const readIcon = new LabIcon({
+  name: 'jupyter-chat::read',
+  svgstr: readSvgStr
+});

package/src/index.ts

@@ -5,6 +5,7 @@
 
 export * from './icons';
 export * from './model';
+export * from './registry';
 export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';

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';
 
@@ -19,15 +20,25 @@ import {
  */
 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 +50,20 @@ export interface IChatModel extends IDisposable {
   readonly messages: IChatMessage[];
 
   /**
-   * The signal emitted when the messages list is updated.
+   * A signal emitting when the messages list is updated.
    */
   readonly messagesUpdated: ISignal<IChatModel, void>;
 
+  /**
+   * 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 +140,12 @@ 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;
   }
 
   /**
@@ -130,15 +156,48 @@ export class ChatModel implements IChatModel {
   }
 
   /**
-   * 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 +205,103 @@ 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 };
+
+    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 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 +311,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 +366,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 +409,67 @@ 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 _notificationId: string | null = null;
   private _messagesUpdated = new Signal<IChatModel, void>(this);
+  private _unreadChanged = new Signal<IChatModel, number[]>(this);
+  private _viewportChanged = new Signal<IChatModel, number[]>(this);
 }
 
 /**
@@ -268,5 +484,10 @@ export namespace ChatModel {
      * Initial config for the chat widget.
      */
     config?: IConfig;
+
+    /**
+     * Commands registry.
+     */
+    commands?: CommandRegistry;
   }
 }