Mention users in messages (using @) (#190)

* Add the chat model to the IChatProvider method's arguments

* Add chat command for user mention

* Add user avatar in command suggestion

* Add mentions in the message model

* Display mentions in messages

* Add the mention string in the IUser interface, to be able to associate any string to a user mention

* Fix when there are several mentions in the same message (on send and on display)

* Allow to edit a message and update mentions

* Add tests on user mention

* Add a chat context (readonly subset of the chat model) to the input model

* Remove generic context type since all contexts should implements IChatContext

* Update doc string

* remove type casts from LabChatContext impl

* add users to IChatContext, make ChatContext abstract

* remove type casts from MentionCommandProvider, use JSX

* fix tests, add mock classes in separate file

* Automatic application of license header

* Update the lite example

---------

Co-authored-by: David L. Qiu <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

docs/jupyter-chat-example/src/index.ts

@@ -11,7 +11,9 @@ import {
   IAttachment,
   IChatMessage,
   INewMessage,
-  SelectionWatcher
+  SelectionWatcher,
+  IChatContext,
+  AbstractChatContext
 } from '@jupyter/chat';
 import {
   JupyterFrontEnd,
@@ -24,6 +26,12 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { UUID } from '@lumino/coreutils';
 
+class ChatContext extends AbstractChatContext {
+  get users() {
+    return [];
+  }
+}
+
 class MyChatModel extends AbstractChatModel {
   sendMessage(
     newMessage: INewMessage
@@ -39,6 +47,10 @@ class MyChatModel extends AbstractChatModel {
     this.messageAdded(message);
     this.input.clearAttachments();
   }
+
+  createChatContext(): IChatContext {
+    return new ChatContext({ model: this });
+  }
 }
 
 /*

packages/jupyter-chat/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 });
+  }
+}

packages/jupyter-chat/src/__tests__/model.spec.ts

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

packages/jupyter-chat/src/__tests__/widgets.spec.ts

@@ -11,22 +11,16 @@ import {
   IRenderMimeRegistry,
   RenderMimeRegistry
 } from '@jupyterlab/rendermime';
-import { AbstractChatModel, IChatModel } from '../model';
-import { INewMessage } from '../types';
+import { IChatModel } from '../model';
 import { ChatWidget } from '../widgets/chat-widget';
-
-class MyChatModel extends AbstractChatModel {
-  sendMessage(message: INewMessage): Promise<boolean | void> | boolean | void {
-    // No-op
-  }
-}
+import { MockChatModel } from './mocks';
 
 describe('test chat widget', () => {
   let model: IChatModel;
   let rmRegistry: IRenderMimeRegistry;
 
   beforeEach(() => {
-    model = new MyChatModel();
+    model = new MockChatModel();
     rmRegistry = new RenderMimeRegistry();
   });
 

packages/jupyter-chat/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

packages/jupyter-chat/src/components/chat-input.tsx

@@ -22,8 +22,8 @@ import {
   useChatCommands
 } from './input';
 import { IInputModel, InputModel } from '../input-model';
-import { IAttachment } from '../types';
 import { IChatCommandRegistry } from '../chat-commands';
+import { IAttachment } from '../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const INPUT_TOOLBAR_CLASS = 'jp-chat-input-toolbar';
@@ -256,7 +256,7 @@ export namespace ChatInput {
    */
   export interface IProps {
     /**
-     * The chat model.
+     * The input model.
      */
     model: IInputModel;
     /**

packages/jupyter-chat/src/components/chat-messages.tsx

@@ -25,6 +25,7 @@ import { IChatCommandRegistry } from '../chat-commands';
 import { IInputModel, InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
+import { replaceSpanToMention } from '../utils';
 
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
 const MESSAGE_CLASS = 'jp-chat-message';
@@ -375,19 +376,27 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
     // Create an input model only if the message is edited.
     useEffect(() => {
       if (edit && canEdit) {
-        setInputModel(
-          new InputModel({
+        setInputModel(() => {
+          let body = message.body;
+          message.mentions?.forEach(user => {
+            body = replaceSpanToMention(body, user);
+          });
+          return new InputModel({
+            chatContext: model.createChatContext(),
             onSend: (input: string, model?: IInputModel) =>
               updateMessage(message.id, input, model),
             onCancel: () => cancelEdition(),
-            value: message.body,
+            value: body,
+            activeCellManager: model.activeCellManager,
+            selectionWatcher: model.selectionWatcher,
+            documentManager: model.documentManager,
             config: {
               sendWithShiftEnter: model.config.sendWithShiftEnter
             },
             attachments: message.attachments,
-            documentManager: model.documentManager
-          })
-        );
+            mentions: message.mentions
+          });
+        });
       } else {
         setInputModel(null);
       }
@@ -411,6 +420,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       const updatedMessage = { ...message };
       updatedMessage.body = input;
       updatedMessage.attachments = inputModel.attachments;
+      updatedMessage.mentions = inputModel.mentions;
       model.updateMessage!(id, updatedMessage);
       setEdit(false);
     };

packages/jupyter-chat/src/components/input/use-chat-commands.tsx

@@ -3,13 +3,13 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import React from 'react';
-import { useEffect, useState } from 'react';
+import { LabIcon } from '@jupyterlab/ui-components';
 import type {
   AutocompleteChangeReason,
   AutocompleteProps as GenericAutocompleteProps
 } from '@mui/material';
 import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 
 import { ChatCommand, IChatCommandRegistry } from '../../chat-commands';
 import { IInputModel } from '../../input-model';
@@ -131,9 +131,11 @@ export function useChatCommands(
         ___: unknown
       ) => {
         const { key, ...listItemProps } = defaultProps;
-        const commandIcon: JSX.Element = (
+        const commandIcon: JSX.Element = React.isValidElement(command.icon) ? (
+          command.icon
+        ) : (
           <span>
-            {typeof command.icon === 'object' ? (
+            {command.icon instanceof LabIcon ? (
               <command.icon.react />
             ) : (
               command.icon

packages/jupyter-chat/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 export * from './active-cell-manager';
+export * from './chat-commands';
 export * from './components';
 export * from './icons';
 export * from './input-model';
@@ -14,4 +15,3 @@ export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';
-export * from './chat-commands';