Add icon and name for the AI assistant

schema/ai-provider.json

@@ -1,6 +1,8 @@
 {
   "title": "AI provider",
   "description": "Provider settings",
+  "jupyter.lab.setting-icon": "@jupyterlite/ai:jupyternaut-lite",
+  "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
   "type": "object",
   "properties": {
     "provider": {

schema/chat.json

@@ -1,6 +1,8 @@
 {
   "title": "Chat configuration",
   "description": "Configuration for the chat panel",
+  "jupyter.lab.setting-icon": "jupyter-chat::chat",
+  "jupyter.lab.setting-icon-label": "Jupyter Chat",
   "type": "object",
   "properties": {
     "sendWithShiftEnter": {
@@ -14,6 +16,12 @@
       "type": "boolean",
       "default": true,
       "readOnly": false
+    },
+    "personaName": {
+      "type": "string",
+      "title": "AI persona name",
+      "description": "The name of the AI persona",
+      "default": "Jupyternaut"
     }
   },
   "additionalProperties": false

src/chat-handler.ts

@@ -20,6 +20,14 @@ import { UUID } from '@lumino/coreutils';
 import { getErrorMessage } from './llm-models';
 import { chatSystemPrompt } from './provider';
 import { IAIProvider } from './token';
+import { jupyternautLiteIcon } from './icons';
+
+/**
+ * The base64 encoded SVG string of the jupyternaut lite icon.
+ * Encode so it can be passed as avatar_url to jupyter-chat.
+ */
+const AI_AVATAR_BASE64 = btoa(jupyternautLiteIcon.svgstr);
+const AI_AVATAR = `data:image/svg+xml;base64,${AI_AVATAR_BASE64}`;
 
 export type ConnectionMessage = {
   type: 'connection';
@@ -42,6 +50,23 @@ export class ChatHandler extends ChatModel {
     return this._aiProvider.chatModel;
   }
 
+  /**
+   * Getter and setter for the persona name.
+   */
+  get personaName(): string {
+    return this._personaName;
+  }
+  set personaName(value: string) {
+    this.messages.forEach(message => {
+      if (message.sender.username === this._personaName) {
+        const updated: IChatMessage = { ...message };
+        updated.sender.username = value;
+        this.messageAdded(updated);
+      }
+    });
+    this._personaName = value;
+  }
+
   /**
    * Getter and setter for the initial prompt.
    */
@@ -87,7 +112,7 @@ export class ChatHandler extends ChatModel {
       })
     );
 
-    const sender = { username: 'AI' };
+    const sender = { username: this._personaName, avatar_url: AI_AVATAR };
     this.updateWriters([sender]);
 
     // create an empty message to be filled by the AI provider
@@ -140,6 +165,7 @@ export class ChatHandler extends ChatModel {
   }
 
   private _aiProvider: IAIProvider;
+  private _personaName = 'AI';
   private _prompt: string;
   private _errorMessage: string = '';
   private _history: IChatHistory = { messages: [] };

src/icons.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { LabIcon } from '@jupyterlab/ui-components';
+
+/**
+ * This icon is based on the jupyternaut icon from Jupyter AI:
+ * https://github.com/jupyterlab/jupyter-ai/blob/main/packages/jupyter-ai/style/icons/jupyternaut.svg
+ * With a small tweak for the colors to match the JupyterLite icon.
+ */
+import jupyternautLiteSvg from '../style/icons/jupyternaut-lite.svg';
+
+export const jupyternautLiteIcon = new LabIcon({
+  name: '@jupyterlite/ai:jupyternaut-lite',
+  svgstr: jupyternautLiteSvg
+});

src/index.ts

@@ -48,12 +48,17 @@ const chatPlugin: JupyterFrontEndPlugin<void> = {
 
     let sendWithShiftEnter = false;
     let enableCodeToolbar = true;
+    let personaName = 'AI';
 
     function loadSetting(setting: ISettingRegistry.ISettings): void {
       sendWithShiftEnter = setting.get('sendWithShiftEnter')
         .composite as boolean;
       enableCodeToolbar = setting.get('enableCodeToolbar').composite as boolean;
+      personaName = setting.get('personaName').composite as string;
+
+      // set the properties
       chatHandler.config = { sendWithShiftEnter, enableCodeToolbar };
+      chatHandler.personaName = personaName;
     }
 
     Promise.all([app.restored, settingsRegistry?.load(chatPlugin.id)])

src/llm-models/svg.d.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}