@jupyterlite/ai 0.6.1 → 0.6.2

package/lib/base-completer.d.ts

@@ -5,7 +5,7 @@ export interface IBaseCompleter {
     /**
      * The LLM completer.
      */
-    provider: BaseLanguageModel;
+    completer: BaseLanguageModel;
     /**
      * The completion prompt.
      */

package/lib/default-providers/Anthropic/completer.d.ts

@@ -3,7 +3,7 @@ import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class AnthropicCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
-    get provider(): BaseChatModel;
+    get completer(): BaseChatModel;
     /**
      * Getter and setter for the initial prompt.
      */
@@ -14,6 +14,6 @@ export declare class AnthropicCompleter implements IBaseCompleter {
             insertText: string;
         }[];
     }>;
-    private _anthropicProvider;
+    private _completer;
     private _prompt;
 }

package/lib/default-providers/Anthropic/completer.js

@@ -4,10 +4,10 @@ import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class AnthropicCompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;
-        this._anthropicProvider = new ChatAnthropic({ ...options.settings });
+        this._completer = new ChatAnthropic({ ...options.settings });
     }
-    get provider() {
-        return this._anthropicProvider;
+    get completer() {
+        return this._completer;
     }
     /**
      * Getter and setter for the initial prompt.
@@ -28,7 +28,7 @@ export class AnthropicCompleter {
             new AIMessage(trimmedPrompt)
         ];
         try {
-            const response = await this._anthropicProvider.invoke(messages);
+            const response = await this._completer.invoke(messages);
             const items = [];
             // Anthropic can return string or complex content, a list of string/images/other.
             if (typeof response.content === 'string') {

package/lib/default-providers/ChromeAI/completer.d.ts

@@ -8,12 +8,12 @@ export declare class ChromeCompleter implements IBaseCompleter {
      */
     get prompt(): string;
     set prompt(value: string);
-    get provider(): LLM;
+    get completer(): LLM;
     fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<{
         items: {
             insertText: string;
         }[];
     }>;
-    private _chromeProvider;
+    private _completer;
     private _prompt;
 }

package/lib/default-providers/ChromeAI/completer.js

@@ -23,7 +23,7 @@ const CODE_BLOCK_END_REGEX = /```$/;
 export class ChromeCompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;
-        this._chromeProvider = new ChromeAI({ ...options.settings });
+        this._completer = new ChromeAI({ ...options.settings });
     }
     /**
      * Getter and setter for the initial prompt.
@@ -34,8 +34,8 @@ export class ChromeCompleter {
     set prompt(value) {
         this._prompt = value;
     }
-    get provider() {
-        return this._chromeProvider;
+    get completer() {
+        return this._completer;
     }
     async fetch(request, context) {
         const { text, offset: cursorOffset } = request;
@@ -46,7 +46,7 @@ export class ChromeCompleter {
             new HumanMessage(trimmedPrompt)
         ];
         try {
-            let response = await this._chromeProvider.invoke(messages);
+            let response = await this._completer.invoke(messages);
             // ChromeAI sometimes returns a string starting with '```',
             // so process the response to remove the code block delimiters
             if (CODE_BLOCK_START_REGEX.test(response)) {

package/lib/default-providers/MistralAI/completer.d.ts

@@ -3,7 +3,7 @@ import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class CodestralCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
-    get provider(): BaseChatModel;
+    get completer(): BaseChatModel;
     /**
      * Getter and setter for the initial prompt.
      */
@@ -11,6 +11,6 @@ export declare class CodestralCompleter implements IBaseCompleter {
     set prompt(value: string);
     fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<any>;
     private _throttler;
-    private _mistralProvider;
+    private _completer;
     private _prompt;
 }

package/lib/default-providers/MistralAI/completer.js

@@ -9,9 +9,9 @@ const INTERVAL = 1000;
 export class CodestralCompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;
-        this._mistralProvider = new ChatMistralAI({ ...options.settings });
+        this._completer = new ChatMistralAI({ ...options.settings });
         this._throttler = new Throttler(async (messages) => {
-            const response = await this._mistralProvider.invoke(messages);
+            const response = await this._completer.invoke(messages);
             // Extract results of completion request.
             const items = [];
             if (typeof response.content === 'string') {
@@ -32,8 +32,8 @@ export class CodestralCompleter {
             return { items };
         }, { limit: INTERVAL });
     }
-    get provider() {
-        return this._mistralProvider;
+    get completer() {
+        return this._completer;
     }
     /**
      * Getter and setter for the initial prompt.

package/lib/default-providers/OpenAI/completer.d.ts

@@ -3,7 +3,7 @@ import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class OpenAICompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
-    get provider(): BaseChatModel;
+    get completer(): BaseChatModel;
     /**
      * Getter and setter for the initial prompt.
      */
@@ -14,6 +14,6 @@ export declare class OpenAICompleter implements IBaseCompleter {
             insertText: string;
         }[];
     }>;
-    private _openAIProvider;
+    private _completer;
     private _prompt;
 }

package/lib/default-providers/OpenAI/completer.js

@@ -4,10 +4,10 @@ import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class OpenAICompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;
-        this._openAIProvider = new ChatOpenAI({ ...options.settings });
+        this._completer = new ChatOpenAI({ ...options.settings });
     }
-    get provider() {
-        return this._openAIProvider;
+    get completer() {
+        return this._completer;
     }
     /**
      * Getter and setter for the initial prompt.
@@ -23,7 +23,7 @@ export class OpenAICompleter {
         const prompt = text.slice(0, cursorOffset);
         const messages = [new SystemMessage(this._prompt), new AIMessage(prompt)];
         try {
-            const response = await this._openAIProvider.invoke(messages);
+            const response = await this._completer.invoke(messages);
             const items = [];
             if (typeof response.content === 'string') {
                 items.push({

package/lib/provider.js

@@ -153,7 +153,9 @@ export class AIProviderRegistry {
             if (settings[key] === SECRETS_REPLACEMENT) {
                 const id = getSecretId(name, key);
                 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];
+                if (secrets !== undefined) {
+                    fullSettings[key] = secrets.value;
+                }
                 continue;
             }
             fullSettings[key] = settings[key];
@@ -161,7 +163,7 @@ export class AIProviderRegistry {
         if (((_c = this._currentProvider) === null || _c === void 0 ? void 0 : _c.completer) !== undefined) {
             try {
                 this._completer = new this._currentProvider.completer({
-                    ...fullSettings
+                    settings: fullSettings
                 });
                 this._completerError = '';
             }

package/lib/settings/panel.d.ts

@@ -37,7 +37,12 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
      * Save settings in local storage for a given provider.
      */
     saveSettings(value: IDict<any>): void;
-    private updateUseSecretsManager;
+    /**
+     * Update the settings whether the secrets manager is used or not.
+     *
+     * @param value - whether to use the secrets manager or not.
+     */
+    private _updateUseSecretsManager;
     /**
      * Build the schema for a given provider.
      */
@@ -80,6 +85,5 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
     private _uiSchema;
     private _settings;
     private _formRef;
-    private _unsavedFields;
-    private _formInputs;
+    private _secretFields;
 }

package/lib/settings/panel.js

@@ -1,5 +1,4 @@
 import { FormComponent } from '@jupyterlab/ui-components';
-import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
@@ -30,23 +29,25 @@ export class AiSettings extends React.Component {
     constructor(props) {
         var _a, _b, _c, _d, _e, _f;
         super(props);
-        this.updateUseSecretsManager = (value) => {
+        /**
+         * Update the settings whether the secrets manager is used or not.
+         *
+         * @param value - whether to use the secrets manager or not.
+         */
+        this._updateUseSecretsManager = (value) => {
             var _a;
             this._useSecretsManager = value;
             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(Private.getToken(), SECRETS_NAMESPACE);
-                this._formInputs = [];
-                this._unsavedFields = [];
                 if (this._settingConnector instanceof SettingConnector) {
                     this._settingConnector.doNotSave = [];
                 }
                 this.saveSettings(this._currentSettings);
             }
             else {
-                // Remove all the keys stored locally and attach the password inputs to the
-                // secrets manager.
+                // Remove all the keys stored locally.
                 const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
                 Object.keys(settings).forEach(provider => {
                     Object.keys(settings[provider])
@@ -56,6 +57,11 @@ export class AiSettings extends React.Component {
                     });
                 });
                 localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+                // Update the fields not to save in settings.
+                if (this._settingConnector instanceof SettingConnector) {
+                    this._settingConnector.doNotSave = this._secretFields;
+                }
+                // Attach the password inputs to the secrets manager.
                 this.componentDidUpdate();
             }
             this._settings
@@ -105,8 +111,7 @@ export class AiSettings extends React.Component {
         this._currentSettings = { provider: 'None' };
         this._uiSchema = {};
         this._formRef = React.createRef();
-        this._unsavedFields = [];
-        this._formInputs = [];
+        this._secretFields = [];
         if (!props.formContext.providerRegistry) {
             throw new Error('The provider registry is needed to enable the jupyterlite-ai settings panel');
         }
@@ -160,7 +165,7 @@ export class AiSettings extends React.Component {
             var _a, _b;
             const useSecretsManager = (_a = this._settings.get('UseSecretsManager').composite) !== null && _a !== void 0 ? _a : true;
             if (useSecretsManager !== this._useSecretsManager) {
-                this.updateUseSecretsManager(useSecretsManager);
+                this._updateUseSecretsManager(useSecretsManager);
             }
             const hideSecretFields = (_b = this._settings.get('HideSecretFields').composite) !== null && _b !== void 0 ? _b : true;
             if (hideSecretFields !== this._hideSecretFields) {
@@ -174,27 +179,18 @@ export class AiSettings extends React.Component {
         if (!this._secretsManager || !this._useSecretsManager) {
             return;
         }
-        // Attach the password inputs to the secrets manager only if they have changed.
-        const inputs = ((_a = this._formRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')) || [];
-        if (ArrayExt.shallowEqual(inputs, this._formInputs)) {
-            return;
-        }
+        // Attach the password inputs to the secrets manager.
         await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
-        this._formInputs = [...inputs];
-        this._unsavedFields = [];
+        const inputs = ((_a = this._formRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')) || [];
         for (let i = 0; i < inputs.length; i++) {
             if (inputs[i].type.toLowerCase() === 'password') {
                 const label = inputs[i].getAttribute('label');
                 if (label) {
                     const id = getSecretId(this._provider, label);
                     this._secretsManager.attach(Private.getToken(), SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
-                    this._unsavedFields.push(label);
                 }
             }
         }
-        if (this._settingConnector instanceof SettingConnector) {
-            this._settingConnector.doNotSave = this._unsavedFields;
-        }
     }
     componentWillUnmount() {
         if (!this._secretsManager || !this._useSecretsManager) {
@@ -233,7 +229,10 @@ export class AiSettings extends React.Component {
         var _a;
         const currentSettings = { ...value };
         const settings = JSON.parse((_a = localStorage.getItem(STORAGE_NAME)) !== null && _a !== void 0 ? _a : '{}');
-        this._unsavedFields.forEach(field => delete currentSettings[field]);
+        // Do not save secrets in local storage if using the secrets manager.
+        if (this._secretsManager && this._useSecretsManager) {
+            this._secretFields.forEach(field => delete currentSettings[field]);
+        }
         settings[this._provider] = currentSettings;
         localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
     }
@@ -244,9 +243,11 @@ export class AiSettings extends React.Component {
         const schema = JSONExt.deepCopy(baseSettings);
         this._uiSchema = {};
         const settingsSchema = this._providerRegistry.getSettingsSchema(this._provider);
+        this._secretFields = [];
         if (settingsSchema) {
             Object.entries(settingsSchema).forEach(([key, value]) => {
                 if (key.toLowerCase().includes('key')) {
+                    this._secretFields.push(key);
                     if (this._hideSecretFields) {
                         return;
                     }
@@ -255,6 +256,12 @@ export class AiSettings extends React.Component {
                 schema.properties[key] = value;
             });
         }
+        // Do not save secrets in settings if using the secrets manager.
+        if (this._secretsManager &&
+            this._useSecretsManager &&
+            this._settingConnector instanceof SettingConnector) {
+            this._settingConnector.doNotSave = this._secretFields;
+        }
         return schema;
     }
     /**

package/lib/settings/settings-connector.js

@@ -49,10 +49,10 @@ export class SettingConnector extends DataConnector {
     }
     async save(id, raw) {
         const settings = json5.parse(raw);
+        // Replace secrets fields with the replacement string.
+        // Create the field if it does not exist in settings.
         this._doNotSave.forEach(field => {
-            if (settings['AIprovider'] !== undefined &&
-                settings['AIprovider'][field] !== undefined &&
-                settings['AIprovider'][field] !== '') {
+            if (settings['AIprovider'] !== undefined) {
                 settings['AIprovider'][field] = SECRETS_REPLACEMENT;
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.6.1",
+    "version": "0.6.2",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -75,7 +75,7 @@
         "@lumino/signaling": "^2.1.2",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.0",
-        "@rjsf/core": "^4.2.0",
+        "@rjsf/core": "^5.18.4",
         "@rjsf/utils": "^5.18.4",
         "@rjsf/validator-ajv8": "^5.18.4",
         "json5": "^2.2.3",

package/src/base-completer.ts

@@ -9,7 +9,7 @@ export interface IBaseCompleter {
   /**
    * The LLM completer.
    */
-  provider: BaseLanguageModel;
+  completer: BaseLanguageModel;
 
   /**
    * The completion prompt.

package/src/default-providers/Anthropic/completer.ts

@@ -11,11 +11,11 @@ import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 export class AnthropicCompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {
-    this._anthropicProvider = new ChatAnthropic({ ...options.settings });
+    this._completer = new ChatAnthropic({ ...options.settings });
   }
 
-  get provider(): BaseChatModel {
-    return this._anthropicProvider;
+  get completer(): BaseChatModel {
+    return this._completer;
   }
 
   /**
@@ -44,7 +44,7 @@ export class AnthropicCompleter implements IBaseCompleter {
     ];
 
     try {
-      const response = await this._anthropicProvider.invoke(messages);
+      const response = await this._completer.invoke(messages);
       const items = [];
 
       // Anthropic can return string or complex content, a list of string/images/other.
@@ -70,6 +70,6 @@ export class AnthropicCompleter implements IBaseCompleter {
     }
   }
 
-  private _anthropicProvider: ChatAnthropic;
+  private _completer: ChatAnthropic;
   private _prompt: string = COMPLETION_SYSTEM_PROMPT;
 }

package/src/default-providers/ChromeAI/completer.ts

@@ -32,7 +32,7 @@ const CODE_BLOCK_END_REGEX = /```$/;
 
 export class ChromeCompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {
-    this._chromeProvider = new ChromeAI({ ...options.settings });
+    this._completer = new ChromeAI({ ...options.settings });
   }
 
   /**
@@ -45,8 +45,8 @@ export class ChromeCompleter implements IBaseCompleter {
     this._prompt = value;
   }
 
-  get provider(): LLM {
-    return this._chromeProvider;
+  get completer(): LLM {
+    return this._completer;
   }
 
   async fetch(
@@ -64,7 +64,7 @@ export class ChromeCompleter implements IBaseCompleter {
     ];
 
     try {
-      let response = await this._chromeProvider.invoke(messages);
+      let response = await this._completer.invoke(messages);
 
       // ChromeAI sometimes returns a string starting with '```',
       // so process the response to remove the code block delimiters
@@ -84,6 +84,6 @@ export class ChromeCompleter implements IBaseCompleter {
     }
   }
 
-  private _chromeProvider: ChromeAI;
+  private _completer: ChromeAI;
   private _prompt: string = COMPLETION_SYSTEM_PROMPT;
 }

package/src/default-providers/MistralAI/completer.ts

@@ -21,10 +21,10 @@ const INTERVAL = 1000;
 
 export class CodestralCompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {
-    this._mistralProvider = new ChatMistralAI({ ...options.settings });
+    this._completer = new ChatMistralAI({ ...options.settings });
     this._throttler = new Throttler(
       async (messages: BaseMessage[]) => {
-        const response = await this._mistralProvider.invoke(messages);
+        const response = await this._completer.invoke(messages);
         // Extract results of completion request.
         const items = [];
         if (typeof response.content === 'string') {
@@ -47,8 +47,8 @@ export class CodestralCompleter implements IBaseCompleter {
     );
   }
 
-  get provider(): BaseChatModel {
-    return this._mistralProvider;
+  get completer(): BaseChatModel {
+    return this._completer;
   }
 
   /**
@@ -82,6 +82,6 @@ export class CodestralCompleter implements IBaseCompleter {
   }
 
   private _throttler: Throttler;
-  private _mistralProvider: ChatMistralAI;
+  private _completer: ChatMistralAI;
   private _prompt: string = COMPLETION_SYSTEM_PROMPT;
 }

package/src/default-providers/OpenAI/completer.ts

@@ -11,11 +11,11 @@ import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 export class OpenAICompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {
-    this._openAIProvider = new ChatOpenAI({ ...options.settings });
+    this._completer = new ChatOpenAI({ ...options.settings });
   }
 
-  get provider(): BaseChatModel {
-    return this._openAIProvider;
+  get completer(): BaseChatModel {
+    return this._completer;
   }
 
   /**
@@ -38,7 +38,7 @@ export class OpenAICompleter implements IBaseCompleter {
     const messages = [new SystemMessage(this._prompt), new AIMessage(prompt)];
 
     try {
-      const response = await this._openAIProvider.invoke(messages);
+      const response = await this._completer.invoke(messages);
       const items = [];
       if (typeof response.content === 'string') {
         items.push({
@@ -62,6 +62,6 @@ export class OpenAICompleter implements IBaseCompleter {
     }
   }
 
-  private _openAIProvider: ChatOpenAI;
+  private _completer: ChatOpenAI;
   private _prompt: string = COMPLETION_SYSTEM_PROMPT;
 }

package/src/provider.ts

@@ -176,7 +176,9 @@ export class AIProviderRegistry implements IAIProviderRegistry {
           SECRETS_NAMESPACE,
           id
         );
-        fullSettings[key] = secrets?.value || settings[key];
+        if (secrets !== undefined) {
+          fullSettings[key] = secrets.value;
+        }
         continue;
       }
       fullSettings[key] = settings[key];
@@ -185,7 +187,7 @@ export class AIProviderRegistry implements IAIProviderRegistry {
     if (this._currentProvider?.completer !== undefined) {
       try {
         this._completer = new this._currentProvider.completer({
-          ...fullSettings
+          settings: fullSettings
         });
         this._completerError = '';
       } catch (e: any) {

package/src/settings/panel.tsx

@@ -4,7 +4,6 @@ import {
   ISettingRegistry
 } from '@jupyterlab/settingregistry';
 import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
-import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import { IChangeEvent } from '@rjsf/core';
 import type { FieldProps } from '@rjsf/utils';
@@ -122,7 +121,7 @@ export class AiSettings extends React.Component<
       const useSecretsManager =
         (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
       if (useSecretsManager !== this._useSecretsManager) {
-        this.updateUseSecretsManager(useSecretsManager);
+        this._updateUseSecretsManager(useSecretsManager);
       }
       const hideSecretFields =
         (this._settings.get('HideSecretFields').composite as boolean) ?? true;
@@ -137,15 +136,10 @@ export class AiSettings extends React.Component<
     if (!this._secretsManager || !this._useSecretsManager) {
       return;
     }
-    // Attach the password inputs to the secrets manager only if they have changed.
-    const inputs = this._formRef.current?.getElementsByTagName('input') || [];
-    if (ArrayExt.shallowEqual(inputs, this._formInputs)) {
-      return;
-    }
 
+    // Attach the password inputs to the secrets manager.
     await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
-    this._formInputs = [...inputs];
-    this._unsavedFields = [];
+    const inputs = this._formRef.current?.getElementsByTagName('input') || [];
     for (let i = 0; i < inputs.length; i++) {
       if (inputs[i].type.toLowerCase() === 'password') {
         const label = inputs[i].getAttribute('label');
@@ -158,13 +152,9 @@ export class AiSettings extends React.Component<
             inputs[i],
             (value: string) => this._onPasswordUpdated(label, value)
           );
-          this._unsavedFields.push(label);
         }
       }
     }
-    if (this._settingConnector instanceof SettingConnector) {
-      this._settingConnector.doNotSave = this._unsavedFields;
-    }
   }
 
   componentWillUnmount(): void {
@@ -205,26 +195,31 @@ export class AiSettings extends React.Component<
   saveSettings(value: IDict<any>) {
     const currentSettings = { ...value };
     const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) ?? '{}');
-    this._unsavedFields.forEach(field => delete currentSettings[field]);
+    // Do not save secrets in local storage if using the secrets manager.
+    if (this._secretsManager && this._useSecretsManager) {
+      this._secretFields.forEach(field => delete currentSettings[field]);
+    }
     settings[this._provider] = currentSettings;
     localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
   }
 
-  private updateUseSecretsManager = (value: boolean) => {
+  /**
+   * Update the settings whether the secrets manager is used or not.
+   *
+   * @param value - whether to use the secrets manager or not.
+   */
+  private _updateUseSecretsManager = (value: boolean) => {
     this._useSecretsManager = value;
     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(Private.getToken(), SECRETS_NAMESPACE);
-      this._formInputs = [];
-      this._unsavedFields = [];
       if (this._settingConnector instanceof SettingConnector) {
         this._settingConnector.doNotSave = [];
       }
       this.saveSettings(this._currentSettings);
     } else {
-      // Remove all the keys stored locally and attach the password inputs to the
-      // secrets manager.
+      // Remove all the keys stored locally.
       const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
       Object.keys(settings).forEach(provider => {
         Object.keys(settings[provider])
@@ -234,6 +229,11 @@ export class AiSettings extends React.Component<
           });
       });
       localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+      // Update the fields not to save in settings.
+      if (this._settingConnector instanceof SettingConnector) {
+        this._settingConnector.doNotSave = this._secretFields;
+      }
+      // Attach the password inputs to the secrets manager.
       this.componentDidUpdate();
     }
     this._settings
@@ -251,9 +251,11 @@ export class AiSettings extends React.Component<
       this._provider
     );
 
+    this._secretFields = [];
     if (settingsSchema) {
       Object.entries(settingsSchema).forEach(([key, value]) => {
         if (key.toLowerCase().includes('key')) {
+          this._secretFields.push(key);
           if (this._hideSecretFields) {
             return;
           }
@@ -262,6 +264,15 @@ export class AiSettings extends React.Component<
         schema.properties[key] = value;
       });
     }
+
+    // Do not save secrets in settings if using the secrets manager.
+    if (
+      this._secretsManager &&
+      this._useSecretsManager &&
+      this._settingConnector instanceof SettingConnector
+    ) {
+      this._settingConnector.doNotSave = this._secretFields;
+    }
     return schema as JSONSchema7;
   }
 
@@ -375,8 +386,7 @@ export class AiSettings extends React.Component<
   private _uiSchema: IDict<any> = {};
   private _settings: ISettingRegistry.ISettings;
   private _formRef = React.createRef<HTMLDivElement>();
-  private _unsavedFields: string[] = [];
-  private _formInputs: HTMLInputElement[] = [];
+  private _secretFields: string[] = [];
 }
 
 namespace Private {

package/src/settings/settings-connector.ts

@@ -71,12 +71,11 @@ export class SettingConnector
 
   async save(id: string, raw: string): Promise<void> {
     const settings = json5.parse(raw);
+
+    // Replace secrets fields with the replacement string.
+    // Create the field if it does not exist in settings.
     this._doNotSave.forEach(field => {
-      if (
-        settings['AIprovider'] !== undefined &&
-        settings['AIprovider'][field] !== undefined &&
-        settings['AIprovider'][field] !== ''
-      ) {
+      if (settings['AIprovider'] !== undefined) {
         settings['AIprovider'][field] = SECRETS_REPLACEMENT;
       }
     });