@jupyterlite/ai 0.6.0 → 0.6.1

package/lib/index.js

@@ -5,16 +5,16 @@ import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingConnector, ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IFormRendererRegistry } from '@jupyterlab/ui-components';
-import { ISecretsManager } from 'jupyter-secrets-manager';
+import { ISecretsManager, SecretsManager } from 'jupyter-secrets-manager';
 import { ChatHandler } from './chat-handler';
 import { CompletionProvider } from './completion-provider';
 import { defaultProviderPlugins } from './default-providers';
 import { AIProviderRegistry } from './provider';
 import { aiSettingsRenderer, SettingConnector } from './settings';
-import { IAIProviderRegistry } from './tokens';
+import { IAIProviderRegistry, PLUGIN_IDS } from './tokens';
 import { stopItem } from './components/stop-button';
 const chatCommandRegistryPlugin = {
-    id: '@jupyterlite/ai:autocompletion-registry',
+    id: PLUGIN_IDS.chatCommandRegistry,
     description: 'Autocompletion registry',
     autoStart: true,
     provides: IChatCommandRegistry,
@@ -25,7 +25,7 @@ const chatCommandRegistryPlugin = {
     }
 };
 const chatPlugin = {
-    id: '@jupyterlite/ai:chat',
+    id: PLUGIN_IDS.chat,
     description: 'LLM chat extension',
     autoStart: true,
     requires: [IAIProviderRegistry, IRenderMimeRegistry, IChatCommandRegistry],
@@ -98,7 +98,7 @@ const chatPlugin = {
     }
 };
 const completerPlugin = {
-    id: '@jupyterlite/ai:completer',
+    id: PLUGIN_IDS.completer,
     autoStart: true,
     requires: [IAIProviderRegistry, ICompletionProviderManager],
     activate: (app, providerRegistry, manager) => {
@@ -109,16 +109,20 @@ const completerPlugin = {
         manager.registerInlineProvider(completer);
     }
 };
-const providerRegistryPlugin = {
-    id: '@jupyterlite/ai:provider-registry',
+const providerRegistryPlugin = SecretsManager.sign(PLUGIN_IDS.providerRegistry, token => ({
+    id: PLUGIN_IDS.providerRegistry,
     autoStart: true,
     requires: [IFormRendererRegistry, ISettingRegistry],
     optional: [IRenderMimeRegistry, ISecretsManager, ISettingConnector],
     provides: IAIProviderRegistry,
     activate: (app, editorRegistry, settingRegistry, rmRegistry, secretsManager, settingConnector) => {
-        const providerRegistry = new AIProviderRegistry({ secretsManager });
-        editorRegistry.addRenderer('@jupyterlite/ai:provider-registry.AIprovider', aiSettingsRenderer({
+        const providerRegistry = new AIProviderRegistry({
+            token,
+            secretsManager
+        });
+        editorRegistry.addRenderer(`${PLUGIN_IDS.providerRegistry}.AIprovider`, aiSettingsRenderer({
             providerRegistry,
+            secretsToken: token,
             rmRegistry,
             secretsManager,
             settingConnector
@@ -145,14 +149,14 @@ const providerRegistryPlugin = {
         });
         return providerRegistry;
     }
-};
+}));
 /**
  * Provides the settings connector as a separate plugin to allow for alternative
  * implementations that may want to fetch settings from a different source or
  * endpoint.
  */
 const settingsConnector = {
-    id: '@jupyterlite/ai:settings-connector',
+    id: PLUGIN_IDS.settingsConnector,
     description: 'Provides a settings connector which does not save passwords.',
     autoStart: true,
     provides: ISettingConnector,

package/lib/provider.d.ts

@@ -84,6 +84,10 @@ export declare namespace AIProviderRegistry {
          * The secrets manager used in the application.
          */
         secretsManager?: ISecretsManager;
+        /**
+         * The token used to request the secrets manager.
+         */
+        token: symbol;
     }
     /**
      * The options for the Chat system prompt.

package/lib/provider.js

@@ -1,5 +1,7 @@
 import { Signal } from '@lumino/signaling';
-import { getSecretId, SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from './settings';
+import { getSecretId, SECRETS_REPLACEMENT } from './settings';
+import { PLUGIN_IDS } from './tokens';
+const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
 export const chatSystemPrompt = (options) => `
 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}.
@@ -41,6 +43,7 @@ export class AIProviderRegistry {
         this._providers = new Map();
         this._deferredProvider = null;
         this._secretsManager = options.secretsManager || null;
+        Private.setToken(options.token);
     }
     /**
      * Get the list of provider names.
@@ -149,7 +152,7 @@ export class AIProviderRegistry {
         for (const key of Object.keys(settings)) {
             if (settings[key] === SECRETS_REPLACEMENT) {
                 const id = getSecretId(name, key);
-                const secrets = await ((_b = this._secretsManager) === null || _b === void 0 ? void 0 : _b.get(SECRETS_NAMESPACE, id));
+                const secrets = await ((_b = this._secretsManager) === null || _b === void 0 ? void 0 : _b.get(Private.getToken(), SECRETS_NAMESPACE, id));
                 fullSettings[key] = (secrets === null || secrets === void 0 ? void 0 : secrets.value) || settings[key];
                 continue;
             }
@@ -231,3 +234,24 @@ export class AIProviderRegistry {
     }
     AIProviderRegistry.updateConfig = updateConfig;
 })(AIProviderRegistry || (AIProviderRegistry = {}));
+var Private;
+(function (Private) {
+    /**
+     * The token to use with the secrets manager.
+     */
+    let secretsToken;
+    /**
+     * Set of the token.
+     */
+    function setToken(value) {
+        secretsToken = value;
+    }
+    Private.setToken = setToken;
+    /**
+     * get the token.
+     */
+    function getToken() {
+        return secretsToken;
+    }
+    Private.getToken = getToken;
+})(Private || (Private = {}));

package/lib/settings/panel.d.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import { IAIProviderRegistry, IDict } from '../tokens';
 export declare const aiSettingsRenderer: (options: {
     providerRegistry: IAIProviderRegistry;
+    secretsToken?: symbol;
     rmRegistry?: IRenderMimeRegistry;
     secretsManager?: ISecretsManager;
     settingConnector?: ISettingConnector;
@@ -19,6 +20,7 @@ export interface ISettingsFormStates {
 export declare class AiSettings extends React.Component<FieldProps, ISettingsFormStates> {
     constructor(props: FieldProps);
     componentDidUpdate(): Promise<void>;
+    componentWillUnmount(): void;
     /**
      * Get the current provider from the local storage.
      */
@@ -36,11 +38,6 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
      */
     saveSettings(value: IDict<any>): void;
     private updateUseSecretsManager;
-    /**
-     * Update the UI schema of the form.
-     * Currently use to hide API keys.
-     */
-    private _updateUiSchema;
     /**
      * Build the schema for a given provider.
      */
@@ -75,6 +72,7 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
     private _provider;
     private _providerSchema;
     private _useSecretsManager;
+    private _hideSecretFields;
     private _rmRegistry;
     private _secretsManager;
     private _settingConnector;

package/lib/settings/panel.js

@@ -3,12 +3,19 @@ import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
-import { getSecretId, SECRETS_NAMESPACE, SettingConnector } from '.';
+import { getSecretId, SettingConnector } from '.';
 import baseSettings from './base.json';
+import { PLUGIN_IDS } from '../tokens';
 const MD_MIME_TYPE = 'text/markdown';
 const STORAGE_NAME = '@jupyterlite/ai:settings';
 const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
+const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
 export const aiSettingsRenderer = (options) => {
+    const { secretsToken } = options;
+    delete options.secretsToken;
+    if (secretsToken) {
+        Private.setToken(secretsToken);
+    }
     return {
         fieldRenderer: (props) => {
             props.formContext = { ...props.formContext, ...options };
@@ -21,7 +28,7 @@ const WrappedFormComponent = (props) => {
 };
 export class AiSettings extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         super(props);
         this.updateUseSecretsManager = (value) => {
             var _a;
@@ -29,7 +36,7 @@ export class AiSettings extends React.Component {
             if (!value) {
                 // Detach all the password inputs attached to the secrets manager, and save the
                 // current settings to the local storage to save the password.
-                (_a = this._secretsManager) === null || _a === void 0 ? void 0 : _a.detachAll(SECRETS_NAMESPACE);
+                (_a = this._secretsManager) === null || _a === void 0 ? void 0 : _a.detachAll(Private.getToken(), SECRETS_NAMESPACE);
                 this._formInputs = [];
                 this._unsavedFields = [];
                 if (this._settingConnector instanceof SettingConnector) {
@@ -110,6 +117,8 @@ export class AiSettings extends React.Component {
         this._settings = props.formContext.settings;
         this._useSecretsManager =
             (_d = this._settings.get('UseSecretsManager').composite) !== null && _d !== void 0 ? _d : true;
+        this._hideSecretFields =
+            (_e = this._settings.get('HideSecretFields').composite) !== null && _e !== void 0 ? _e : true;
         // Initialize the providers schema.
         const providerSchema = JSONExt.deepCopy(baseSettings);
         providerSchema.properties.provider = {
@@ -127,7 +136,7 @@ export class AiSettings extends React.Component {
             const labSettings = this._settings.get('AIprovider').composite;
             if (labSettings && Object.keys(labSettings).includes('provider')) {
                 // Get the provider name.
-                const provider = (_e = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _e === void 0 ? void 0 : _e[1];
+                const provider = (_f = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _f === void 0 ? void 0 : _f[1];
                 // Save the settings.
                 const settings = {
                     _current: provider
@@ -148,11 +157,16 @@ export class AiSettings extends React.Component {
             .set('AIprovider', this._currentSettings)
             .catch(console.error);
         this._settings.changed.connect(() => {
-            var _a;
+            var _a, _b;
             const useSecretsManager = (_a = this._settings.get('UseSecretsManager').composite) !== null && _a !== void 0 ? _a : true;
             if (useSecretsManager !== this._useSecretsManager) {
                 this.updateUseSecretsManager(useSecretsManager);
             }
+            const hideSecretFields = (_b = this._settings.get('HideSecretFields').composite) !== null && _b !== void 0 ? _b : true;
+            if (hideSecretFields !== this._hideSecretFields) {
+                this._hideSecretFields = hideSecretFields;
+                this._updateSchema();
+            }
         });
     }
     async componentDidUpdate() {
@@ -165,7 +179,7 @@ export class AiSettings extends React.Component {
         if (ArrayExt.shallowEqual(inputs, this._formInputs)) {
             return;
         }
-        await this._secretsManager.detachAll(SECRETS_NAMESPACE);
+        await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
         this._formInputs = [...inputs];
         this._unsavedFields = [];
         for (let i = 0; i < inputs.length; i++) {
@@ -173,7 +187,7 @@ export class AiSettings extends React.Component {
                 const label = inputs[i].getAttribute('label');
                 if (label) {
                     const id = getSecretId(this._provider, label);
-                    this._secretsManager.attach(SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
+                    this._secretsManager.attach(Private.getToken(), SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
                     this._unsavedFields.push(label);
                 }
             }
@@ -182,6 +196,12 @@ export class AiSettings extends React.Component {
             this._settingConnector.doNotSave = this._unsavedFields;
         }
     }
+    componentWillUnmount() {
+        if (!this._secretsManager || !this._useSecretsManager) {
+            return;
+        }
+        this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
+    }
     /**
      * Get the current provider from the local storage.
      */
@@ -217,15 +237,6 @@ export class AiSettings extends React.Component {
         settings[this._provider] = currentSettings;
         localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
     }
-    /**
-     * Update the UI schema of the form.
-     * Currently use to hide API keys.
-     */
-    _updateUiSchema(key) {
-        if (key.toLowerCase().includes('key')) {
-            this._uiSchema[key] = { 'ui:widget': 'password' };
-        }
-    }
     /**
      * Build the schema for a given provider.
      */
@@ -235,8 +246,13 @@ export class AiSettings extends React.Component {
         const settingsSchema = this._providerRegistry.getSettingsSchema(this._provider);
         if (settingsSchema) {
             Object.entries(settingsSchema).forEach(([key, value]) => {
+                if (key.toLowerCase().includes('key')) {
+                    if (this._hideSecretFields) {
+                        return;
+                    }
+                    this._uiSchema[key] = { 'ui:widget': 'password' };
+                }
                 schema.properties[key] = value;
-                this._updateUiSchema(key);
             });
         }
         return schema;
@@ -275,3 +291,24 @@ export class AiSettings extends React.Component {
             React.createElement(WrappedFormComponent, { formData: this._currentSettings, schema: this.state.schema, onChange: this._onFormChange, uiSchema: this._uiSchema })));
     }
 }
+var Private;
+(function (Private) {
+    /**
+     * The token to use with the secrets manager.
+     */
+    let secretsToken;
+    /**
+     * Set of the token.
+     */
+    function setToken(value) {
+        secretsToken = value;
+    }
+    Private.setToken = setToken;
+    /**
+     * get the token.
+     */
+    function getToken() {
+        return secretsToken;
+    }
+    Private.getToken = getToken;
+})(Private || (Private = {}));

package/lib/settings/utils.d.ts

@@ -1,3 +1,2 @@
-export declare const SECRETS_NAMESPACE = "@jupyterlite/ai";
 export declare const SECRETS_REPLACEMENT = "***";
 export declare function getSecretId(provider: string, label: string): string;

package/lib/settings/utils.js

@@ -1,4 +1,3 @@
-export const SECRETS_NAMESPACE = '@jupyterlite/ai';
 export const SECRETS_REPLACEMENT = '***';
 export function getSecretId(provider, label) {
     return `${provider}-${label}`;

package/lib/tokens.d.ts

@@ -3,6 +3,13 @@ import { ReadonlyPartialJSONObject, Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { JSONSchema7 } from 'json-schema';
 import { IBaseCompleter } from './base-completer';
+export declare const PLUGIN_IDS: {
+    chat: string;
+    chatCommandRegistry: string;
+    completer: string;
+    providerRegistry: string;
+    settingsConnector: string;
+};
 export interface IDict<T = any> {
     [key: string]: T;
 }

package/lib/tokens.js

@@ -1,4 +1,11 @@
 import { Token } from '@lumino/coreutils';
+export const PLUGIN_IDS = {
+    chat: '@jupyterlite/ai:chat',
+    chatCommandRegistry: '@jupyterlite/ai:autocompletion-registry',
+    completer: '@jupyterlite/ai:completer',
+    providerRegistry: '@jupyterlite/ai:provider-registry',
+    settingsConnector: '@jupyterlite/ai:settings-connector'
+};
 /**
  * The provider registry token.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -57,13 +57,14 @@
     },
     "dependencies": {
         "@jupyter/chat": "^0.9.0",
-        "@jupyterlab/application": "^4.4.0-alpha.0",
-        "@jupyterlab/apputils": "^4.5.0-alpha.0",
-        "@jupyterlab/completer": "^4.4.0-alpha.0",
-        "@jupyterlab/notebook": "^4.4.0-alpha.0",
-        "@jupyterlab/rendermime": "^4.4.0-alpha.0",
-        "@jupyterlab/settingregistry": "^4.4.0-beta.1",
-        "@jupyterlab/ui-components": "^4.4.0-alpha.0",
+        "@jupyterlab/application": "^4.4.0",
+        "@jupyterlab/apputils": "^4.5.0",
+        "@jupyterlab/completer": "^4.4.0",
+        "@jupyterlab/coreutils": "^6.4.0",
+        "@jupyterlab/notebook": "^4.4.0",
+        "@jupyterlab/rendermime": "^4.4.0",
+        "@jupyterlab/settingregistry": "^4.4.0",
+        "@jupyterlab/ui-components": "^4.4.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
         "@langchain/core": "^0.3.40",
@@ -78,12 +79,12 @@
         "@rjsf/utils": "^5.18.4",
         "@rjsf/validator-ajv8": "^5.18.4",
         "json5": "^2.2.3",
-        "jupyter-secrets-manager": "^0.2.0",
+        "jupyter-secrets-manager": "^0.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/builder": "^4.4.0",
         "@stylistic/eslint-plugin": "^3.0.1",
         "@types/json-schema": "^7.0.11",
         "@types/react": "^18.0.26",

package/schema/provider-registry.json

@@ -11,6 +11,12 @@
       "description": "Whether to use or not the secrets manager. If not, secrets will be stored in the browser (local storage)",
       "default": true
     },
+    "HideSecretFields": {
+      "type": "boolean",
+      "title": "Hide secret fields",
+      "description": "Whether to hide the secret fields in the UI or not",
+      "default": true
+    },
     "AIprovider": {
       "type": "object",
       "title": "AI provider",

package/src/index.ts

@@ -21,18 +21,18 @@ import {
 } from '@jupyterlab/settingregistry';
 import { IFormRendererRegistry } from '@jupyterlab/ui-components';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { ISecretsManager } from 'jupyter-secrets-manager';
+import { ISecretsManager, SecretsManager } from 'jupyter-secrets-manager';
 
 import { ChatHandler } from './chat-handler';
 import { CompletionProvider } from './completion-provider';
 import { defaultProviderPlugins } from './default-providers';
 import { AIProviderRegistry } from './provider';
 import { aiSettingsRenderer, SettingConnector } from './settings';
-import { IAIProviderRegistry } from './tokens';
+import { IAIProviderRegistry, PLUGIN_IDS } from './tokens';
 import { stopItem } from './components/stop-button';
 
 const chatCommandRegistryPlugin: JupyterFrontEndPlugin<IChatCommandRegistry> = {
-  id: '@jupyterlite/ai:autocompletion-registry',
+  id: PLUGIN_IDS.chatCommandRegistry,
   description: 'Autocompletion registry',
   autoStart: true,
   provides: IChatCommandRegistry,
@@ -44,7 +44,7 @@ const chatCommandRegistryPlugin: JupyterFrontEndPlugin<IChatCommandRegistry> = {
 };
 
 const chatPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlite/ai:chat',
+  id: PLUGIN_IDS.chat,
   description: 'LLM chat extension',
   autoStart: true,
   requires: [IAIProviderRegistry, IRenderMimeRegistry, IChatCommandRegistry],
@@ -141,7 +141,7 @@ const chatPlugin: JupyterFrontEndPlugin<void> = {
 };
 
 const completerPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlite/ai:completer',
+  id: PLUGIN_IDS.completer,
   autoStart: true,
   requires: [IAIProviderRegistry, ICompletionProviderManager],
   activate: (
@@ -157,59 +157,64 @@ const completerPlugin: JupyterFrontEndPlugin<void> = {
   }
 };
 
-const providerRegistryPlugin: JupyterFrontEndPlugin<IAIProviderRegistry> = {
-  id: '@jupyterlite/ai:provider-registry',
-  autoStart: true,
-  requires: [IFormRendererRegistry, ISettingRegistry],
-  optional: [IRenderMimeRegistry, ISecretsManager, ISettingConnector],
-  provides: IAIProviderRegistry,
-  activate: (
-    app: JupyterFrontEnd,
-    editorRegistry: IFormRendererRegistry,
-    settingRegistry: ISettingRegistry,
-    rmRegistry?: IRenderMimeRegistry,
-    secretsManager?: ISecretsManager,
-    settingConnector?: ISettingConnector
-  ): IAIProviderRegistry => {
-    const providerRegistry = new AIProviderRegistry({ secretsManager });
-
-    editorRegistry.addRenderer(
-      '@jupyterlite/ai:provider-registry.AIprovider',
-      aiSettingsRenderer({
-        providerRegistry,
-        rmRegistry,
-        secretsManager,
-        settingConnector
-      })
-    );
-
-    settingRegistry
-      .load(providerRegistryPlugin.id)
-      .then(settings => {
-        const updateProvider = () => {
-          // Update the settings to the AI providers.
-          const providerSettings = (settings.get('AIprovider').composite ?? {
-            provider: 'None'
-          }) as ReadonlyPartialJSONObject;
-          providerRegistry.setProvider({
-            name: providerSettings.provider as string,
-            settings: providerSettings
-          });
-        };
-
-        settings.changed.connect(() => updateProvider());
-        updateProvider();
-      })
-      .catch(reason => {
-        console.error(
-          `Failed to load settings for ${providerRegistryPlugin.id}`,
-          reason
-        );
+const providerRegistryPlugin: JupyterFrontEndPlugin<IAIProviderRegistry> =
+  SecretsManager.sign(PLUGIN_IDS.providerRegistry, token => ({
+    id: PLUGIN_IDS.providerRegistry,
+    autoStart: true,
+    requires: [IFormRendererRegistry, ISettingRegistry],
+    optional: [IRenderMimeRegistry, ISecretsManager, ISettingConnector],
+    provides: IAIProviderRegistry,
+    activate: (
+      app: JupyterFrontEnd,
+      editorRegistry: IFormRendererRegistry,
+      settingRegistry: ISettingRegistry,
+      rmRegistry?: IRenderMimeRegistry,
+      secretsManager?: ISecretsManager,
+      settingConnector?: ISettingConnector
+    ): IAIProviderRegistry => {
+      const providerRegistry = new AIProviderRegistry({
+        token,
+        secretsManager
       });
 
-    return providerRegistry;
-  }
-};
+      editorRegistry.addRenderer(
+        `${PLUGIN_IDS.providerRegistry}.AIprovider`,
+        aiSettingsRenderer({
+          providerRegistry,
+          secretsToken: token,
+          rmRegistry,
+          secretsManager,
+          settingConnector
+        })
+      );
+
+      settingRegistry
+        .load(providerRegistryPlugin.id)
+        .then(settings => {
+          const updateProvider = () => {
+            // Update the settings to the AI providers.
+            const providerSettings = (settings.get('AIprovider').composite ?? {
+              provider: 'None'
+            }) as ReadonlyPartialJSONObject;
+            providerRegistry.setProvider({
+              name: providerSettings.provider as string,
+              settings: providerSettings
+            });
+          };
+
+          settings.changed.connect(() => updateProvider());
+          updateProvider();
+        })
+        .catch(reason => {
+          console.error(
+            `Failed to load settings for ${providerRegistryPlugin.id}`,
+            reason
+          );
+        });
+
+      return providerRegistry;
+    }
+  }));
 
 /**
  * Provides the settings connector as a separate plugin to allow for alternative
@@ -217,7 +222,7 @@ const providerRegistryPlugin: JupyterFrontEndPlugin<IAIProviderRegistry> = {
  * endpoint.
  */
 const settingsConnector: JupyterFrontEndPlugin<ISettingConnector> = {
-  id: '@jupyterlite/ai:settings-connector',
+  id: PLUGIN_IDS.settingsConnector,
   description: 'Provides a settings connector which does not save passwords.',
   autoStart: true,
   provides: ISettingConnector,

package/src/provider.ts

@@ -6,18 +6,17 @@ import { JSONSchema7 } from 'json-schema';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 
 import { IBaseCompleter } from './base-completer';
-import {
-  getSecretId,
-  SECRETS_NAMESPACE,
-  SECRETS_REPLACEMENT
-} from './settings';
+import { getSecretId, SECRETS_REPLACEMENT } from './settings';
 import {
   IAIProvider,
   IAIProviderRegistry,
   IDict,
-  ISetProviderOptions
+  ISetProviderOptions,
+  PLUGIN_IDS
 } from './tokens';
 
+const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
+
 export const chatSystemPrompt = (
   options: AIProviderRegistry.IPromptOptions
 ) => `
@@ -54,6 +53,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
    */
   constructor(options: AIProviderRegistry.IOptions) {
     this._secretsManager = options.secretsManager || null;
+    Private.setToken(options.token);
   }
 
   /**
@@ -171,7 +171,11 @@ export class AIProviderRegistry implements IAIProviderRegistry {
     for (const key of Object.keys(settings)) {
       if (settings[key] === SECRETS_REPLACEMENT) {
         const id = getSecretId(name, key);
-        const secrets = await this._secretsManager?.get(SECRETS_NAMESPACE, id);
+        const secrets = await this._secretsManager?.get(
+          Private.getToken(),
+          SECRETS_NAMESPACE,
+          id
+        );
         fullSettings[key] = secrets?.value || settings[key];
         continue;
       }
@@ -236,6 +240,10 @@ export namespace AIProviderRegistry {
      * The secrets manager used in the application.
      */
     secretsManager?: ISecretsManager;
+    /**
+     * The token used to request the secrets manager.
+     */
+    token: symbol;
   }
 
   /**
@@ -290,3 +298,24 @@ export namespace AIProviderRegistry {
     });
   }
 }
+
+namespace Private {
+  /**
+   * The token to use with the secrets manager.
+   */
+  let secretsToken: symbol;
+
+  /**
+   * Set of the token.
+   */
+  export function setToken(value: symbol): void {
+    secretsToken = value;
+  }
+
+  /**
+   * get the token.
+   */
+  export function getToken(): symbol {
+    return secretsToken;
+  }
+}

package/src/settings/panel.tsx

@@ -13,20 +13,27 @@ import { JSONSchema7 } from 'json-schema';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 
-import { getSecretId, SECRETS_NAMESPACE, SettingConnector } from '.';
+import { getSecretId, SettingConnector } from '.';
 import baseSettings from './base.json';
-import { IAIProviderRegistry, IDict } from '../tokens';
+import { IAIProviderRegistry, IDict, PLUGIN_IDS } from '../tokens';
 
 const MD_MIME_TYPE = 'text/markdown';
 const STORAGE_NAME = '@jupyterlite/ai:settings';
 const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
+const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
 
 export const aiSettingsRenderer = (options: {
   providerRegistry: IAIProviderRegistry;
+  secretsToken?: symbol;
   rmRegistry?: IRenderMimeRegistry;
   secretsManager?: ISecretsManager;
   settingConnector?: ISettingConnector;
 }): IFormRenderer => {
+  const { secretsToken } = options;
+  delete options.secretsToken;
+  if (secretsToken) {
+    Private.setToken(secretsToken);
+  }
   return {
     fieldRenderer: (props: FieldProps) => {
       props.formContext = { ...props.formContext, ...options };
@@ -63,6 +70,8 @@ export class AiSettings extends React.Component<
 
     this._useSecretsManager =
       (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
+    this._hideSecretFields =
+      (this._settings.get('HideSecretFields').composite as boolean) ?? true;
 
     // Initialize the providers schema.
     const providerSchema = JSONExt.deepCopy(baseSettings) as any;
@@ -115,6 +124,12 @@ export class AiSettings extends React.Component<
       if (useSecretsManager !== this._useSecretsManager) {
         this.updateUseSecretsManager(useSecretsManager);
       }
+      const hideSecretFields =
+        (this._settings.get('HideSecretFields').composite as boolean) ?? true;
+      if (hideSecretFields !== this._hideSecretFields) {
+        this._hideSecretFields = hideSecretFields;
+        this._updateSchema();
+      }
     });
   }
 
@@ -128,7 +143,7 @@ export class AiSettings extends React.Component<
       return;
     }
 
-    await this._secretsManager.detachAll(SECRETS_NAMESPACE);
+    await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
     this._formInputs = [...inputs];
     this._unsavedFields = [];
     for (let i = 0; i < inputs.length; i++) {
@@ -137,6 +152,7 @@ export class AiSettings extends React.Component<
         if (label) {
           const id = getSecretId(this._provider, label);
           this._secretsManager.attach(
+            Private.getToken(),
             SECRETS_NAMESPACE,
             id,
             inputs[i],
@@ -151,6 +167,13 @@ export class AiSettings extends React.Component<
     }
   }
 
+  componentWillUnmount(): void {
+    if (!this._secretsManager || !this._useSecretsManager) {
+      return;
+    }
+    this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
+  }
+
   /**
    * Get the current provider from the local storage.
    */
@@ -192,7 +215,7 @@ export class AiSettings extends React.Component<
     if (!value) {
       // Detach all the password inputs attached to the secrets manager, and save the
       // current settings to the local storage to save the password.
-      this._secretsManager?.detachAll(SECRETS_NAMESPACE);
+      this._secretsManager?.detachAll(Private.getToken(), SECRETS_NAMESPACE);
       this._formInputs = [];
       this._unsavedFields = [];
       if (this._settingConnector instanceof SettingConnector) {
@@ -218,16 +241,6 @@ export class AiSettings extends React.Component<
       .catch(console.error);
   };
 
-  /**
-   * Update the UI schema of the form.
-   * Currently use to hide API keys.
-   */
-  private _updateUiSchema(key: string) {
-    if (key.toLowerCase().includes('key')) {
-      this._uiSchema[key] = { 'ui:widget': 'password' };
-    }
-  }
-
   /**
    * Build the schema for a given provider.
    */
@@ -240,8 +253,13 @@ export class AiSettings extends React.Component<
 
     if (settingsSchema) {
       Object.entries(settingsSchema).forEach(([key, value]) => {
+        if (key.toLowerCase().includes('key')) {
+          if (this._hideSecretFields) {
+            return;
+          }
+          this._uiSchema[key] = { 'ui:widget': 'password' };
+        }
         schema.properties[key] = value;
-        this._updateUiSchema(key);
       });
     }
     return schema as JSONSchema7;
@@ -349,6 +367,7 @@ export class AiSettings extends React.Component<
   private _provider: string;
   private _providerSchema: JSONSchema7;
   private _useSecretsManager: boolean;
+  private _hideSecretFields: boolean;
   private _rmRegistry: IRenderMimeRegistry | null;
   private _secretsManager: ISecretsManager | null;
   private _settingConnector: ISettingConnector | null;
@@ -359,3 +378,24 @@ export class AiSettings extends React.Component<
   private _unsavedFields: string[] = [];
   private _formInputs: HTMLInputElement[] = [];
 }
+
+namespace Private {
+  /**
+   * The token to use with the secrets manager.
+   */
+  let secretsToken: symbol;
+
+  /**
+   * Set of the token.
+   */
+  export function setToken(value: symbol): void {
+    secretsToken = value;
+  }
+
+  /**
+   * get the token.
+   */
+  export function getToken(): symbol {
+    return secretsToken;
+  }
+}

package/src/settings/utils.ts

@@ -1,4 +1,3 @@
-export const SECRETS_NAMESPACE = '@jupyterlite/ai';
 export const SECRETS_REPLACEMENT = '***';
 
 export function getSecretId(provider: string, label: string) {

package/src/tokens.ts

@@ -5,6 +5,14 @@ import { JSONSchema7 } from 'json-schema';
 
 import { IBaseCompleter } from './base-completer';
 
+export const PLUGIN_IDS = {
+  chat: '@jupyterlite/ai:chat',
+  chatCommandRegistry: '@jupyterlite/ai:autocompletion-registry',
+  completer: '@jupyterlite/ai:completer',
+  providerRegistry: '@jupyterlite/ai:provider-registry',
+  settingsConnector: '@jupyterlite/ai:settings-connector'
+};
+
 export interface IDict<T = any> {
   [key: string]: T;
 }