@jupyterlite/ai 0.6.0 → 0.6.2

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';
@@ -13,20 +12,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 +69,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;
@@ -113,7 +121,13 @@ 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;
+      if (hideSecretFields !== this._hideSecretFields) {
+        this._hideSecretFields = hideSecretFields;
+        this._updateSchema();
       }
     });
   }
@@ -122,33 +136,32 @@ 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;
-    }
 
-    await this._secretsManager.detachAll(SECRETS_NAMESPACE);
-    this._formInputs = [...inputs];
-    this._unsavedFields = [];
+    // Attach the password inputs to the secrets manager.
+    await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
+    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');
         if (label) {
           const id = getSecretId(this._provider, label);
           this._secretsManager.attach(
+            Private.getToken(),
             SECRETS_NAMESPACE,
             id,
             inputs[i],
             (value: string) => this._onPasswordUpdated(label, value)
           );
-          this._unsavedFields.push(label);
         }
       }
     }
-    if (this._settingConnector instanceof SettingConnector) {
-      this._settingConnector.doNotSave = this._unsavedFields;
+  }
+
+  componentWillUnmount(): void {
+    if (!this._secretsManager || !this._useSecretsManager) {
+      return;
     }
+    this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
   }
 
   /**
@@ -182,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(SECRETS_NAMESPACE);
-      this._formInputs = [];
-      this._unsavedFields = [];
+      this._secretsManager?.detachAll(Private.getToken(), SECRETS_NAMESPACE);
       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])
@@ -211,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
@@ -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.
    */
@@ -238,12 +251,28 @@ 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;
+          }
+          this._uiSchema[key] = { 'ui:widget': 'password' };
+        }
         schema.properties[key] = value;
-        this._updateUiSchema(key);
       });
     }
+
+    // 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;
   }
 
@@ -349,6 +378,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;
@@ -356,6 +386,26 @@ 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 {
+  /**
+   * 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/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;
       }
     });

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;
 }