Add icons & descriptions to chat commands menu (#185)

* Added icons & descriptions to chat commands menu

* Simplified code to display command icons

---------

Co-authored-by: Venkata Sai Keerthi Swarna <[email protected]>

Author: keerthi-swarna

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

@@ -21,7 +21,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;
+  icon?: LabIcon | 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

@@ -143,9 +143,21 @@ export function useChatCommands(
         ___: unknown
       ) => {
         const { key, ...listItemProps } = defaultProps;
+        const commandIcon: JSX.Element = (
+          <span>
+            {typeof command.icon === 'object' ? (
+              <command.icon.react />
+            ) : (
+              command.icon
+            )}
+          </span>
+        );
         return (
           <Box key={key} component="li" {...listItemProps}>
-            {command.name}
+            {commandIcon}
+            <p className="jp-chat-command-name">{command.name}</p>
+            <span> - </span>
+            <p className="jp-chat-command-description">{command.description}</p>
           </Box>
         );
       },

packages/jupyterlab-chat/style/base.css

@@ -20,3 +20,13 @@
 .jp-lab-chat-title-unread .lm-TabBar-tabLabel::before {
   content: '* ';
 }
+
+.jp-chat-command-name {
+  font-weight: normal;
+  margin: 5px;
+}
+
+.jp-chat-command-description {
+  color: gray;
+  margin: 5px;
+}

python/jupyterlab-chat/src/chat-commands/providers/emoji.ts

@@ -13,10 +13,34 @@ import {
 export class EmojiCommandProvider implements IChatCommandProvider {
   public id: string = 'jupyter-chat:emoji-commands';
   private _slash_commands: ChatCommand[] = [
-    { name: ':heart:', replaceWith: '❤ ', providerId: this.id },
-    { name: ':smile:', replaceWith: '🙂 ', providerId: this.id },
-    { name: ':thinking:', replaceWith: '🤔 ', providerId: this.id },
-    { name: ':cool:', replaceWith: '😎 ', providerId: this.id }
+    {
+      name: ':heart:',
+      replaceWith: '❤ ',
+      providerId: this.id,
+      description: 'Emoji',
+      icon: '❤'
+    },
+    {
+      name: ':smile:',
+      replaceWith: '🙂 ',
+      providerId: this.id,
+      description: 'Emoji',
+      icon: '🙂'
+    },
+    {
+      name: ':thinking:',
+      replaceWith: '🤔 ',
+      providerId: this.id,
+      description: 'Emoji',
+      icon: '🤔'
+    },
+    {
+      name: ':cool:',
+      replaceWith: '😎 ',
+      providerId: this.id,
+      description: 'Emoji',
+      icon: '😎'
+    }
   ];
 
   // regex used to test the current word