Subissue: Show icons & descriptions in chat commands menu

[dlqqq]

Problem

The new chat commands menu needs to show icons & descriptions. The ChatCommand type will probably need updates accordingly.

Proposed Solution

Update the UI to show icons & descriptions.

Additional context

None.

[dlqqq]

@keerthi-swarna Please look at this issue next, since I think it would be great for you to contribute to Jupyter AI v3. You'll need to create a new Conda environment, clone this repo, and run jlpm dev-install.

Context:

• Here is the PR which implemented the chat commands: Define a new framework for chat commands #161. It would be helpful to review this to understand how chat commands work in Jupyter Chat.
• The ChatCommand type defines the structure of each chat command object.
• Right now, Jupyter Chat only has one command provider, namely EmojiCommandProvider in emoji.ts. Emoji commands are triggered by typing a colon :.

Recommended steps:

• In the chat commands menu, show the command name, with the optional description to the right in gray.
• Show the icon on the left of the command name. The type of icon should be changed to LabIcon | string. You can then render each chat command icon with: typeof command.icon === 'string' ? command.icon : <command.icon.react />.
  • The LabIcon class is custom to JupyterLab. Basically, LabIcon.react provides a React component that can be rendered as an element.

This is how the chat commands menu looked in Jupyter AI 2.x. Use this as a reference: