Fix the notification in settings (#119)

* Better handling of error notifications when setting the models

* Fix and clean the provider registry

* Use a debouncer instead of a throttler (did not work as expected)

* Fix tests

Author: brichet

src/default-providers/index.ts

@@ -114,24 +114,16 @@ const webLLMProviderPlugin: JupyterFrontEndPlugin<void> = {
     });
 
     registry.providerChanged.connect(async (sender, role) => {
-      const { currentChatModel, chatError } = registry;
-      if (currentChatModel === null) {
-        Notification.emit(chatError, 'error', {
-          autoClose: 2000
-        });
-        return;
-      }
+      const { currentChatModel } = registry;
 
       // TODO: implement a proper way to handle models that may need to be initialized before being used.
       // Mostly applies to WebLLM and ChromeAI as they may need to download the model in the browser first.
       if (registry.currentName(role) === 'WebLLM') {
+        // Leaving this check here, but it should never happen, this check is done in
+        // the provider registry, and the current name is set to 'None' if there is a
+        // compatibility error.
         const compatibilityError = await webLLMCompatibilityCheck();
-
         if (compatibilityError) {
-          Notification.dismiss();
-          Notification.emit(compatibilityError, 'error', {
-            autoClose: 2000
-          });
           return;
         }
 

src/provider.ts

@@ -1,11 +1,13 @@
+import { Notification } from '@jupyterlab/apputils';
 import {
   CompletionHandler,
   IInlineCompletionContext
 } from '@jupyterlab/completer';
 import { BaseLanguageModel } from '@langchain/core/language_models/base';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { ISignal, Signal } from '@lumino/signaling';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { Debouncer } from '@lumino/polling';
+import { ISignal, Signal } from '@lumino/signaling';
 import { JSONSchema7 } from 'json-schema';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 
@@ -21,37 +23,7 @@ import {
 import { AIChatModel, AICompleter } from './types/ai-model';
 
 const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
-
-export const chatSystemPrompt = (
-  options: AIProviderRegistry.IPromptOptions
-) => `
-You are Jupyternaut, a conversational assistant living in JupyterLab to help users.
-You are not a language model, but rather an application built on a foundation model from ${options.provider_name}.
-You are talkative and you provide lots of specific details from the foundation model's context.
-You may use Markdown to format your response.
-If your response includes code, they must be enclosed in Markdown fenced code blocks (with triple backticks before and after).
-If your response includes mathematical notation, they must be expressed in LaTeX markup and enclosed in LaTeX delimiters.
-All dollar quantities (of USD) must be formatted in LaTeX, with the \`$\` symbol escaped by a single backslash \`\\\`.
-- Example prompt: \`If I have \\\\$100 and spend \\\\$20, how much money do I have left?\`
-- **Correct** response: \`You have \\(\\$80\\) remaining.\`
-- **Incorrect** response: \`You have $80 remaining.\`
-If you do not know the answer to a question, answer truthfully by responding that you do not know.
-The following is a friendly conversation between you and a human.
-`;
-
-export const COMPLETION_SYSTEM_PROMPT = `
-You are an application built to provide helpful code completion suggestions.
-You should only produce code. Keep comments to minimum, use the
-programming language comment syntax. Produce clean code.
-The code is written in JupyterLab, a data analysis and code development
-environment which can execute code extended with additional syntax for
-interactive features, such as magics.
-Only give raw strings back, do not format the response using backticks.
-The output should be a single string, and should only contain the code that will complete the
-give code passed as input, no explanation whatsoever.
-Do not include the prompt in the output, only the string that should be appended to the current input.
-Here is the code to complete:
-`;
+const NOTIFICATION_DELAY = 2000;
 
 export class AIProviderRegistry implements IAIProviderRegistry {
   /**
@@ -60,6 +32,11 @@ export class AIProviderRegistry implements IAIProviderRegistry {
   constructor(options: AIProviderRegistry.IOptions) {
     this._secretsManager = options.secretsManager || null;
     Private.setToken(options.token);
+
+    this._notifications = {
+      chat: new Debouncer(this._emitErrorNotification, NOTIFICATION_DELAY),
+      completer: new Debouncer(this._emitErrorNotification, NOTIFICATION_DELAY)
+    };
   }
 
   /**
@@ -206,18 +183,39 @@ export class AIProviderRegistry implements IAIProviderRegistry {
   }
 
   /**
-   * Get the current chat error;
+   * Get/set the current chat error;
    */
   get chatError(): string {
     return this._chatError;
   }
+  private set chatError(error: string) {
+    this._chatError = error;
+    if (error !== '') {
+      this._notifications.chat.invoke(`Chat: ${error}`);
+    }
+  }
 
   /**
-   * Get the current completer error.
+   * Get/set the current completer error.
    */
   get completerError(): string {
     return this._completerError;
   }
+  private set completerError(error: string) {
+    this._completerError = error;
+    if (error !== '') {
+      this._notifications.completer.invoke(`Completer: ${error}`);
+    }
+  }
+
+  /**
+   * A function to emit a notification error.
+   */
+  private _emitErrorNotification(error: string) {
+    Notification.emit(error, 'error', {
+      autoClose: NOTIFICATION_DELAY
+    });
+  }
 
   /**
    * Set the completer provider.
@@ -228,11 +226,11 @@ export class AIProviderRegistry implements IAIProviderRegistry {
   async setCompleterProvider(
     settings: ReadonlyPartialJSONObject
   ): Promise<void> {
-    this._completerError = '';
+    this.completerError = '';
     if (!Object.keys(settings).includes('provider')) {
       Private.setName('completer', 'None');
       Private.setCompleter(null);
-      this._completerError =
+      this.completerError =
         'The provider is missing from the completer settings';
       return;
     }
@@ -253,7 +251,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
     if (compatibilityCheck !== undefined) {
       const error = await compatibilityCheck();
       if (error !== null) {
-        this._completerError = error.trim();
+        this.completerError = error.trim();
         Private.setName('completer', 'None');
         this._providerChanged.emit('completer');
         return;
@@ -272,7 +270,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
           })
         );
       } catch (e: any) {
-        this._completerError = e.message;
+        this.completerError = e.message;
       }
     } else {
       Private.setCompleter(null);
@@ -288,11 +286,11 @@ export class AIProviderRegistry implements IAIProviderRegistry {
    * @param options - An object with the name and the settings of the provider to use.
    */
   async setChatProvider(settings: ReadonlyPartialJSONObject): Promise<void> {
-    this._chatError = '';
+    this.chatError = '';
     if (!Object.keys(settings).includes('provider')) {
-      Private.setName('completer', 'None');
-      Private.setCompleter(null);
-      this._chatError = 'The provider is missing from the chat settings';
+      Private.setName('chat', 'None');
+      Private.setChatModel(null);
+      this.chatError = 'The provider is missing from the chat settings';
       return;
     }
     const provider = settings['provider'] as string;
@@ -312,7 +310,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
     if (compatibilityCheck !== undefined) {
       const error = await compatibilityCheck();
       if (error !== null) {
-        this._chatError = error.trim();
+        this.chatError = error.trim();
         Private.setName('chat', 'None');
         this._providerChanged.emit('chat');
         return;
@@ -330,7 +328,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
           })
         );
       } catch (e: any) {
-        this._chatError = e.message;
+        this.chatError = e.message;
         Private.setChatModel(null);
       }
     } else {
@@ -378,6 +376,9 @@ export class AIProviderRegistry implements IAIProviderRegistry {
   private _providerChanged = new Signal<IAIProviderRegistry, ModelRole>(this);
   private _chatError: string = '';
   private _completerError: string = '';
+  private _notifications: {
+    [key in ModelRole]: Debouncer;
+  };
   private _deferredProvider: {
     [key in ModelRole]: ReadonlyPartialJSONObject | null;
   } = {

src/settings/panel.tsx

@@ -481,7 +481,7 @@ export class AiProviderSettings extends React.Component<
         if (key.toLowerCase().includes('key')) {
           this._secretFields.push(key);
 
-          // If the secrets manager is not used, do not show the secrets fields.
+          // If the secrets manager is not used, show the secrets fields.
           // If the secrets manager is used, check if the fields should be visible.
           const showSecretFields =
             !this._useSecretsManager ||
@@ -651,7 +651,7 @@ export class AiProviderSettings extends React.Component<
           formData={{ provider: this._provider }}
           schema={this._providerSchema}
           onChange={this._onProviderChanged}
-          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}`}
+          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}-${this._role}`}
         />
         {this.state.compatibilityError !== null && (
           <div className={ERROR_CLASS}>
@@ -684,7 +684,7 @@ export class AiProviderSettings extends React.Component<
           schema={this.state.schema}
           onChange={this._onFormChanged}
           uiSchema={this._uiSchema}
-          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}`}
+          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}-${this._role}`}
           formContext={{
             ...this.props.formContext,
             defaultFormData: this._defaultFormData

ui-tests/tests/chat-panel.spec.ts

@@ -13,7 +13,14 @@ import { Locator } from '@playwright/test';
 import { setUpOllama } from './test-utils';
 
 test.use({
-  mockSettings: { ...galata.DEFAULT_SETTINGS }
+  mockSettings: {
+    ...galata.DEFAULT_SETTINGS,
+    '@jupyterlab/apputils-extension:notification': {
+      checkForUpdates: false,
+      fetchNews: 'false',
+      doNotDisturbMode: true
+    }
+  }
 });
 
 async function openChatPanel(page: IJupyterLabPageFixture): Promise<Locator> {

ui-tests/tests/code-completion.spec.ts

@@ -13,7 +13,14 @@ import { Locator, Request } from '@playwright/test';
 import { openSettings, setUpOllama } from './test-utils';
 
 test.use({
-  mockSettings: { ...galata.DEFAULT_SETTINGS }
+  mockSettings: {
+    ...galata.DEFAULT_SETTINGS,
+    '@jupyterlab/apputils-extension:notification': {
+      checkForUpdates: false,
+      fetchNews: 'false',
+      doNotDisturbMode: true
+    }
+  }
 });
 
 // Set up Ollama with default model.

ui-tests/tests/test-utils.ts

@@ -35,11 +35,11 @@ export const setUpOllama = async (
 
   const settingsPanel = await openSettings(page, 'AI provider');
   const providerSelect = settingsPanel.locator(
-    'select[name="jp-SettingsEditor-@jupyterlite/ai:provider-registry_provider"]'
+    'select[name="jp-SettingsEditor-@jupyterlite/ai:provider-registry-chat_provider"]'
   );
   await providerSelect.selectOption('Ollama');
   const modelInput = settingsPanel.locator(
-    'input[name="jp-SettingsEditor-@jupyterlite/ai:provider-registry_model"]'
+    'input[name="jp-SettingsEditor-@jupyterlite/ai:provider-registry-chat_model"]'
   );
 
   await modelInput.scrollIntoViewIfNeeded();