Add user avatar in command suggestion

Author: brichet

packages/jupyter-chat/src/chat-commands/types.ts

@@ -23,7 +23,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;
 
   /**
    * If set, this will be rendered as the description for the command in the

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';
@@ -133,9 +133,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

python/jupyterlab-chat/src/chat-commands/providers/user-mention.ts

@@ -3,13 +3,15 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import {
   IChatCommandProvider,
   IChatCommandRegistry,
   ChatCommand,
-  IInputModel
+  IInputModel,
+  Avatar
 } from '@jupyter/chat';
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { User } from '@jupyterlab/services';
 import { LabChatModel } from 'jupyterlab-chat';
 import { JSONObject } from '@lumino/coreutils';
 
@@ -25,10 +27,15 @@ export class MentionCommandProvider implements IChatCommandProvider {
       return [];
     }
 
+    const icons: { [user: string]: JSX.Element | undefined } = {};
     // Get the user list from the chat file.
     const users = Object.values(chatModel.sharedModel.users).map(user => {
       user = user as JSONObject;
-      return (user.display_name ?? user.name ?? user.username) as string;
+      const username = (user.display_name ??
+        user.name ??
+        user.username) as string;
+      icons[username] = Avatar({ user: user as User.IIdentity }) ?? undefined;
+      return username;
     });
 
     // Add the users connected to the chat (even if they never sent a message).
@@ -41,19 +48,21 @@ export class MentionCommandProvider implements IChatCommandProvider {
         user.name ??
         user.username) as string;
       if (username && !users.includes(username)) {
+        icons[username] = Avatar({ user: user as User.IIdentity }) ?? undefined;
         users.push(username);
       }
     });
 
     // Build the commands for each user.
-    const commands = users
+    const commands: ChatCommand[] = users
       .sort()
       .filter(user => `@${user.replace(/ /g, '-')}`.startsWith(match))
       .map(user => {
         return {
           name: `@${user.replace(/ /g, '-')}`,
           replaceWith: `@${user}`,
-          providerId: this.id
+          providerId: this.id,
+          icon: icons[user]
         };
       });
     return commands;