Add a welcome message (#89)

* Upgrade jupyter-chat to >=0.12.0

* Add a welcome message

* Update src/chat-handler.ts

Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

---------

Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

Author: brichet

package.json

@@ -56,7 +56,7 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.9.0",
+        "@jupyter/chat": "^0.12.0",
         "@jupyterlab/application": "^4.4.0",
         "@jupyterlab/apputils": "^4.5.0",
         "@jupyterlab/completer": "^4.4.0",

src/chat-handler.ts

@@ -5,10 +5,13 @@
 
 import {
   ChatCommand,
-  ChatModel,
+  AbstractChatContext,
+  AbstractChatModel,
   IChatCommandProvider,
+  IChatContext,
   IChatHistory,
   IChatMessage,
+  IChatModel,
   IInputModel,
   INewMessage
 } from '@jupyter/chat';
@@ -22,8 +25,8 @@ import { UUID } from '@lumino/coreutils';
 
 import { jupyternautLiteIcon } from './icons';
 import { chatSystemPrompt } from './provider';
-import { AIChatModel } from './types/ai-model';
 import { IAIProviderRegistry } from './tokens';
+import { AIChatModel } from './types/ai-model';
 
 /**
  * The base64 encoded SVG string of the jupyternaut lite icon.
@@ -32,12 +35,24 @@ import { IAIProviderRegistry } from './tokens';
 const AI_AVATAR_BASE64 = btoa(jupyternautLiteIcon.svgstr);
 const AI_AVATAR = `data:image/svg+xml;base64,${AI_AVATAR_BASE64}`;
 
+export const welcomeMessage = (providers: string[]) => `
+#### Ask JupyterLite AI
+
+
+The provider to use can be set in the settings editor, by selecting it from
+the <img src="${AI_AVATAR}" width="16" height="16"> _AI provider_ settings.
+
+The current providers that are available are _${providers.sort().join('_, _')}_.
+
+To clear the chat, you can use the \`/clear\` command from the chat input.
+`;
+
 export type ConnectionMessage = {
   type: 'connection';
   client_id: string;
 };
 
-export class ChatHandler extends ChatModel {
+export class ChatHandler extends AbstractChatModel {
   constructor(options: ChatHandler.IOptions) {
     super(options);
     this._providerRegistry = options.providerRegistry;
@@ -127,7 +142,7 @@ export class ChatHandler extends ChatModel {
     );
 
     const sender = { username: this._personaName, avatar_url: AI_AVATAR };
-    this.updateWriters([sender]);
+    this.updateWriters([{ user: sender }]);
 
     // create an empty message to be filled by the AI provider
     const botMsg: IChatMessage = {
@@ -185,6 +200,10 @@ export class ChatHandler extends ChatModel {
     this._controller?.abort();
   }
 
+  createChatContext(): IChatContext {
+    return new ChatHandler.ChatContext({ model: this });
+  }
+
   private _providerRegistry: IAIProviderRegistry;
   private _personaName = 'AI';
   private _prompt: string;
@@ -198,12 +217,19 @@ export namespace ChatHandler {
   /**
    * The options used to create a chat handler.
    */
-  export interface IOptions extends ChatModel.IOptions {
+  export interface IOptions extends IChatModel.IOptions {
     providerRegistry: IAIProviderRegistry;
   }
 
   /**
-   * The chat command provider for the chat.
+   * The minimal chat context.
+   */
+  export class ChatContext extends AbstractChatContext {
+    users = [];
+  }
+
+  /**
+   *  The chat command provider for the chat.
    */
   export class ClearCommandProvider implements IChatCommandProvider {
     public id: string = '@jupyterlite/ai:clear-commands';

src/index.ts

@@ -20,7 +20,7 @@ import { IFormRendererRegistry } from '@jupyterlab/ui-components';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { ISecretsManager, SecretsManager } from 'jupyter-secrets-manager';
 
-import { ChatHandler } from './chat-handler';
+import { ChatHandler, welcomeMessage } from './chat-handler';
 import { CompletionProvider } from './completion-provider';
 import { defaultProviderPlugins } from './default-providers';
 import { AIProviderRegistry } from './provider';
@@ -106,9 +106,11 @@ const chatPlugin: JupyterFrontEndPlugin<void> = {
     const stopButton = stopItem(() => chatHandler.stopStreaming());
     inputToolbarRegistry.addItem('stop', stopButton);
 
-    chatHandler.writersChanged.connect((_, users) => {
+    chatHandler.writersChanged.connect((_, writers) => {
       if (
-        users.filter(user => user.username === chatHandler.personaName).length
+        writers.filter(
+          writer => writer.user.username === chatHandler.personaName
+        ).length
       ) {
         inputToolbarRegistry.hide('send');
         inputToolbarRegistry.show('stop');
@@ -124,7 +126,8 @@ const chatPlugin: JupyterFrontEndPlugin<void> = {
         themeManager,
         rmRegistry,
         chatCommandRegistry,
-        inputToolbarRegistry
+        inputToolbarRegistry,
+        welcomeMessage: welcomeMessage(providerRegistry.providers)
       });
       chatWidget.title.caption = 'Jupyterlite AI Chat';
     } catch (e) {

yarn.lock

@@ -841,9 +841,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jupyter/chat@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "@jupyter/chat@npm:0.9.0"
+"@jupyter/chat@npm:^0.12.0":
+  version: 0.12.0
+  resolution: "@jupyter/chat@npm:0.12.0"
   dependencies:
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
@@ -856,6 +856,7 @@ __metadata:
     "@jupyterlab/notebook": ^4.2.0
     "@jupyterlab/rendermime": ^4.2.0
     "@jupyterlab/ui-components": ^4.2.0
+    "@lumino/algorithm": ^2.0.0
     "@lumino/commands": ^2.0.0
     "@lumino/coreutils": ^2.0.0
     "@lumino/disposable": ^2.0.0
@@ -865,7 +866,7 @@ __metadata:
     clsx: ^2.1.0
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: dee9a9e02ea8a6d25e1caebf4e9bece42c82fa40baa84dc655540bb64a676b4b1890373390c291f35eb1fe8f821d15935ec21fdd0e12063a497e575f4ddbcd78
+  checksum: 4c36487123a5a176f2a865b7686b1f7d56930c3991d338be3a47286d7ebce5aac216ecd25e4f548e09e2592506a20e5756e489ed1a63ef93dec425b04295f9a9
   languageName: node
   linkType: hard
 
@@ -1558,7 +1559,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@jupyterlite/ai@workspace:."
   dependencies:
-    "@jupyter/chat": ^0.9.0
+    "@jupyter/chat": ^0.12.0
     "@jupyterlab/application": ^4.4.0
     "@jupyterlab/apputils": ^4.5.0
     "@jupyterlab/builder": ^4.4.0