Settings UI improvement (#48)

* First version of custom react widget in the setting panel

* fix lint and dependencies

* Password input for field with name containing 'key'

* Use the local storage to have persistent settings

* Add an index.ts file when building schema to easily import them

* Fix the settings schema

* Initialize the settings with the last used provider

* lint

* Rename the main setting to avoid confusion (it was the same name as the provider select)

* Split the form in (1) provider select and (2) provider options, to be able to add some helper between them

* Add an instruction DOM in the settings

* Use default values if they are provided and the local storage does not exist

* Rename attribute for consistency

* Use a factory to send the rendermime registry to the AISettings component

* Use the user settings (or default) if none in local storage

* Apply suggestions from review

Author: brichet

.gitignore

@@ -11,8 +11,9 @@ jupyterlite_ai/labextension
 # Version file is handled by hatchling
 jupyterlite_ai/_version.py
 
-# Settings schema are built
-src/_provider-settings
+# Schema and module built at build time
+src/settings/schemas/index.ts
+src/settings/schemas/_generated
 
 # Created by https://www.gitignore.io/api/python
 # Edit at https://www.gitignore.io/?templates=python

package.json

@@ -61,6 +61,7 @@
         "@jupyterlab/notebook": "^4.4.0-alpha.0",
         "@jupyterlab/rendermime": "^4.4.0-alpha.0",
         "@jupyterlab/settingregistry": "^4.4.0-alpha.0",
+        "@jupyterlab/ui-components": "^4.4.0-alpha.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
         "@langchain/core": "^0.3.40",
@@ -71,6 +72,9 @@
         "@lumino/signaling": "^2.1.2",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.0",
+        "@rjsf/core": "^4.2.0",
+        "@rjsf/utils": "^5.18.4",
+        "@rjsf/validator-ajv8": "^5.18.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

schema/ai-provider.json

@@ -5,13 +5,13 @@
   "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
   "type": "object",
   "properties": {
-    "provider": {
-      "type": "string",
-      "title": "The AI provider",
-      "description": "The AI provider to use for chat and completion",
-      "default": "None",
-      "enum": ["None", "Anthropic", "ChromeAI", "MistralAI", "OpenAI"]
+    "AIprovider": {
+      "type": "object",
+      "title": "AI provider",
+      "description": "The AI provider configuration",
+      "default": {},
+      "additionalProperties": true
     }
   },
-  "additionalProperties": true
+  "additionalProperties": false
 }

scripts/settings-generator.js

@@ -4,7 +4,8 @@ const path = require('path');
 
 console.log('Building settings schema\n');
 
-const outputDir = 'src/_provider-settings';
+const schemasDir = 'src/settings/schemas';
+const outputDir = path.join(schemasDir, '/_generated');
 if (!fs.existsSync(outputDir)) {
   fs.mkdirSync(outputDir);
 }
@@ -31,20 +32,20 @@ const schemaBase = tsj
  *     to exclude them at the moment, to be able to build other settings.
  */
 const providers = {
-  chromeAI: {
+  ChromeAI: {
     path: 'node_modules/@langchain/community/experimental/llms/chrome_ai.d.ts',
     type: 'ChromeAIInputs'
   },
-  mistralAI: {
+  MistralAI: {
     path: 'node_modules/@langchain/mistralai/dist/chat_models.d.ts',
     type: 'ChatMistralAIInput'
   },
-  anthropic: {
+  Anthropic: {
     path: 'node_modules/@langchain/anthropic/dist/chat_models.d.ts',
     type: 'AnthropicInput',
     excludedProps: ['clientOptions']
   },
-  openAI: {
+  OpenAI: {
     path: 'node_modules/@langchain/openai/dist/chat_models.d.ts',
     type: 'ChatOpenAIFields',
     excludedProps: ['configuration']
@@ -138,5 +139,29 @@ Object.entries(providers).forEach(([name, desc], index) => {
   });
 });
 
+// Build the index.ts file
+const indexContent = [];
+Object.keys(providers).forEach(name => {
+  indexContent.push(`import ${name} from './_generated/${name}.json';`);
+});
+
+indexContent.push('', 'const ProviderSettings: { [name: string]: any } = {');
+
+Object.keys(providers).forEach((name, index) => {
+  indexContent.push(
+    `  ${name}` + (index < Object.keys(providers).length - 1 ? ',' : '')
+  );
+});
+indexContent.push('};', '', 'export default ProviderSettings;', '');
+fs.writeFile(
+  path.join(schemasDir, 'index.ts'),
+  indexContent.join('\n'),
+  err => {
+    if (err) {
+      throw err;
+    }
+  }
+);
+
 console.log('Settings schema built\n');
 console.log('=====================\n');

src/index.ts

@@ -16,13 +16,15 @@ import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IFormRendererRegistry } from '@jupyterlab/ui-components';
+import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 import { ChatHandler } from './chat-handler';
-import { getSettings } from './llm-models';
+import { CompletionProvider } from './completion-provider';
 import { AIProvider } from './provider';
+import { aiSettingsRenderer } from './settings/panel';
 import { renderSlashCommandOption } from './slash-commands';
 import { IAIProvider } from './token';
-import { CompletionProvider } from './completion-provider';
 
 const autocompletionRegistryPlugin: JupyterFrontEndPlugin<IAutocompletionRegistry> =
   {
@@ -150,43 +152,33 @@ const completerPlugin: JupyterFrontEndPlugin<void> = {
 const aiProviderPlugin: JupyterFrontEndPlugin<IAIProvider> = {
   id: '@jupyterlite/ai:ai-provider',
   autoStart: true,
-  requires: [ISettingRegistry],
+  requires: [IFormRendererRegistry, ISettingRegistry],
+  optional: [IRenderMimeRegistry],
   provides: IAIProvider,
   activate: (
     app: JupyterFrontEnd,
-    settingRegistry: ISettingRegistry
+    editorRegistry: IFormRendererRegistry,
+    settingRegistry: ISettingRegistry,
+    rmRegistry?: IRenderMimeRegistry
   ): IAIProvider => {
     const aiProvider = new AIProvider();
 
-    let currentProvider = 'None';
+    editorRegistry.addRenderer(
+      '@jupyterlite/ai:ai-provider.AIprovider',
+      aiSettingsRenderer({ rmRegistry })
+    );
     settingRegistry
       .load(aiProviderPlugin.id)
       .then(settings => {
         const updateProvider = () => {
-          const provider = settings.get('provider').composite as string;
-          if (provider !== currentProvider) {
-            // Update the settings panel.
-            currentProvider = provider;
-            const settingsProperties = settings.schema.properties;
-            if (settingsProperties) {
-              const schemaKeys = Object.keys(settingsProperties);
-              schemaKeys.forEach(key => {
-                if (key !== 'provider') {
-                  delete settings.schema.properties?.[key];
-                }
-              });
-              const properties = getSettings(provider);
-              if (properties === null) {
-                return;
-              }
-              Object.entries(properties).forEach(([name, value], index) => {
-                settingsProperties[name] = value as ISettingRegistry.IProperty;
-              });
-            }
-          }
-
           // Update the settings to the AI providers.
-          aiProvider.setProvider(provider, settings.composite);
+          const providerSettings = (settings.get('AIprovider').composite ?? {
+            provider: 'None'
+          }) as ReadonlyPartialJSONObject;
+          aiProvider.setProvider(
+            providerSettings.provider as string,
+            providerSettings
+          );
         };
 
         settings.changed.connect(() => updateProvider());

src/llm-models/utils.ts

@@ -11,11 +11,6 @@ import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { ChromeCompleter } from './chrome-completer';
 import { OpenAICompleter } from './openai-completer';
 
-import chromeAI from '../_provider-settings/chromeAI.json';
-import mistralAI from '../_provider-settings/mistralAI.json';
-import anthropic from '../_provider-settings/anthropic.json';
-import openAI from '../_provider-settings/openAI.json';
-
 /**
  * Get an LLM completer from the name.
  */
@@ -71,20 +66,3 @@ export function getErrorMessage(name: string, error: any): string {
   }
   return 'Unknown provider';
 }
-
-/*
- * Get an LLM completer from the name.
- */
-export function getSettings(name: string): any {
-  if (name === 'MistralAI') {
-    return mistralAI.properties;
-  } else if (name === 'Anthropic') {
-    return anthropic.properties;
-  } else if (name === 'ChromeAI') {
-    return chromeAI.properties;
-  } else if (name === 'OpenAI') {
-    return openAI.properties;
-  }
-
-  return null;
-}

src/settings/instructions.ts

@@ -0,0 +1,50 @@
+export interface IDict<T = any> {
+  [key: string]: T;
+}
+
+const chromeAiInstructions = `
+<i class="fas fa-exclamation-triangle"></i> Support for ChromeAI is still experimental and only available in Google Chrome.
+
+You can test ChromeAI is enabled in your browser by going to the following URL: https://chromeai.org/
+
+Enable the proper flags in Google Chrome.
+
+- chrome://flags/#prompt-api-for-gemini-nano
+  - Select: \`Enabled\`
+- chrome://flags/#optimization-guide-on-device-model
+  - Select: \`Enabled BypassPrefRequirement\`
+- chrome://components
+  - Click \`Check for Update\` on Optimization Guide On Device Model to download the model
+- [Optional] chrome://flags/#text-safety-classifier
+
+<img src="https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c" alt="A screenshot showing how to enable the ChromeAI flag in Google Chrome" width="500px">
+
+Then restart Chrome for these changes to take effect.
+
+<i class="fas fa-exclamation-triangle"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).
+During the download, ChromeAI may not be available via the extension.
+
+<i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: https://developer.chrome.com/docs/ai/get-started
+`;
+
+const mistralAIInstructions = `
+<i class="fas fa-exclamation-triangle"></i> This extension is still very much experimental. It is not an official MistralAI extension.
+
+1. Go to https://console.mistral.ai/api-keys/ and create an API key.
+
+<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png" alt="Screenshot showing how to create an API key" width="500px">
+
+2. Open the JupyterLab settings and go to the **Ai providers** section to select the \`MistralAI\`
+   provider and the API key (required).
+
+<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png" alt="Screenshot showing how to add the API key to the settings" width="500px">
+
+3. Open the chat, or use the inline completer
+
+<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png" alt="Screenshot showing how to use the chat" width="500px">
+`;
+
+export const instructions: IDict = {
+  ChromeAI: chromeAiInstructions,
+  MistralAI: mistralAIInstructions
+};