@jupyterlite/ai 0.6.1 → 0.7.0

package/src/settings/panel.tsx

@@ -1,10 +1,10 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import {
-  ISettingConnector,
-  ISettingRegistry
-} from '@jupyterlab/settingregistry';
-import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
-import { ArrayExt } from '@lumino/algorithm';
+  Button,
+  FormComponent,
+  IFormRenderer
+} from '@jupyterlab/ui-components';
 import { JSONExt } from '@lumino/coreutils';
 import { IChangeEvent } from '@rjsf/core';
 import type { FieldProps } from '@rjsf/utils';
@@ -13,13 +13,14 @@ import { JSONSchema7 } from 'json-schema';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 
-import { getSecretId, SettingConnector } from '.';
+import { getSecretId, SECRETS_REPLACEMENT } from '.';
 import baseSettings from './base.json';
 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 ERROR_CLASS = 'jp-AISettingsError';
 const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
 
 export const aiSettingsRenderer = (options: {
@@ -27,7 +28,6 @@ export const aiSettingsRenderer = (options: {
   secretsToken?: symbol;
   rmRegistry?: IRenderMimeRegistry;
   secretsManager?: ISecretsManager;
-  settingConnector?: ISettingConnector;
 }): IFormRenderer => {
   const { secretsToken } = options;
   delete options.secretsToken;
@@ -45,6 +45,8 @@ export const aiSettingsRenderer = (options: {
 export interface ISettingsFormStates {
   schema: JSONSchema7;
   instruction: HTMLElement | null;
+  compatibilityError: string | null;
+  isModified?: boolean;
 }
 
 const WrappedFormComponent = (props: any): JSX.Element => {
@@ -65,13 +67,12 @@ export class AiSettings extends React.Component<
     this._providerRegistry = props.formContext.providerRegistry;
     this._rmRegistry = props.formContext.rmRegistry ?? null;
     this._secretsManager = props.formContext.secretsManager ?? null;
-    this._settingConnector = props.formContext.settingConnector ?? null;
     this._settings = props.formContext.settings;
 
-    this._useSecretsManager =
+    const useSecretsManagerSetting =
       (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
-    this._hideSecretFields =
-      (this._settings.get('HideSecretFields').composite as boolean) ?? true;
+    this._useSecretsManager =
+      useSecretsManagerSetting && this._secretsManager !== null;
 
     // Initialize the providers schema.
     const providerSchema = JSONExt.deepCopy(baseSettings) as any;
@@ -85,7 +86,7 @@ export class AiSettings extends React.Component<
     this._providerSchema = providerSchema as JSONSchema7;
 
     // Check if there is saved values in local storage, otherwise use the settings from
-    // the setting registry (led to default if there are no user settings).
+    // the setting registry (leads to default if there are no user settings).
     const storageSettings = localStorage.getItem(STORAGE_NAME);
     if (storageSettings === null) {
       const labSettings = this._settings.get('AIprovider').composite;
@@ -105,47 +106,43 @@ export class AiSettings extends React.Component<
 
     // Initialize the settings from the saved ones.
     this._provider = this.getCurrentProvider();
-    this._currentSettings = this.getSettings();
 
     // Initialize the schema.
     const schema = this._buildSchema();
-    this.state = { schema, instruction: null };
 
+    // Initialize the current settings.
+    const isModified = this._updatedFormData(
+      this.getSettingsFromLocalStorage()
+    );
+
+    this.state = {
+      schema,
+      instruction: null,
+      compatibilityError: null,
+      isModified: isModified
+    };
     this._renderInstruction();
 
+    this._checkProviderCompatibility();
+
     // Update the setting registry.
-    this._settings
-      .set('AIprovider', this._currentSettings)
-      .catch(console.error);
+    this.saveSettingsToRegistry();
 
-    this._settings.changed.connect(() => {
-      const useSecretsManager =
-        (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
-      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();
-      }
-    });
+    this._secretsManager?.fieldVisibilityChanged.connect(
+      this._fieldVisibilityChanged
+    );
+
+    this._settings.changed.connect(this._settingsChanged);
   }
 
   async componentDidUpdate(): Promise<void> {
     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,16 +155,16 @@ 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 {
+    this._settings.changed.disconnect(this._settingsChanged);
+    this._secretsManager?.fieldVisibilityChanged.disconnect(
+      this._fieldVisibilityChanged
+    );
     if (!this._secretsManager || !this._useSecretsManager) {
       return;
     }
@@ -194,7 +191,7 @@ export class AiSettings extends React.Component<
   /**
    * Get settings from local storage for a given provider.
    */
-  getSettings(): IDict<any> {
+  getSettingsFromLocalStorage(): IDict<any> {
     const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
     return settings[this._provider] ?? { provider: this._provider };
   }
@@ -202,29 +199,72 @@ export class AiSettings extends React.Component<
   /**
    * Save settings in local storage for a given provider.
    */
-  saveSettings(value: IDict<any>) {
-    const currentSettings = { ...value };
+  saveSettingsToLocalStorage() {
+    const currentSettings = { ...this._currentSettings };
     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._useSecretsManager) {
+      this._secretFields.forEach(field => delete currentSettings[field]);
+    }
     settings[this._provider] = currentSettings;
     localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
   }
 
-  private updateUseSecretsManager = (value: boolean) => {
+  /**
+   * Save the settings to the setting registry.
+   */
+  saveSettingsToRegistry(): void {
+    const sanitizedSettings = { ...this._currentSettings };
+    if (this._useSecretsManager) {
+      this._secretFields.forEach(field => {
+        sanitizedSettings[field] = SECRETS_REPLACEMENT;
+      });
+    }
+    this._settings
+      .set('AIprovider', { provider: this._provider, ...sanitizedSettings })
+      .catch(console.error);
+  }
+
+  /**
+   * Triggered when the settings has changed.
+   */
+  private _settingsChanged = (settings: ISettingRegistry.ISettings) => {
+    this._updateUseSecretsManager(
+      (this._settings.get('UseSecretsManager').composite as boolean) ?? true
+    );
+  };
+
+  /**
+   * Triggered when the secret fields visibility has changed.
+   */
+  private _fieldVisibilityChanged = (
+    _: ISecretsManager,
+    value: boolean
+  ): void => {
+    if (this._useSecretsManager) {
+      this._updateSchema();
+    }
+  };
+
+  /**
+   * 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) => {
+    // No-op if the value did not change or the secrets manager has not been provided.
+    if (value === this._useSecretsManager || this._secretsManager === null) {
+      return;
+    }
+
+    // Update the secrets manager.
     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);
+      this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
     } 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,11 +274,10 @@ export class AiSettings extends React.Component<
           });
       });
       localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
-      this.componentDidUpdate();
     }
-    this._settings
-      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-      .catch(console.error);
+    this._updateSchema();
+    this.saveSettingsToLocalStorage();
+    this.saveSettingsToRegistry();
   };
 
   /**
@@ -251,17 +290,31 @@ export class AiSettings extends React.Component<
       this._provider
     );
 
+    this._secretFields = [];
+    this._defaultFormData = {};
     if (settingsSchema) {
       Object.entries(settingsSchema).forEach(([key, value]) => {
         if (key.toLowerCase().includes('key')) {
-          if (this._hideSecretFields) {
+          this._secretFields.push(key);
+
+          // If the secrets manager is not used, do not show the secrets fields.
+          // If the secrets manager is used, check if the fields should be visible.
+          const showSecretFields =
+            !this._useSecretsManager ||
+            (this._secretsManager?.secretFieldsVisibility ?? true);
+          if (!showSecretFields) {
             return;
           }
+
           this._uiSchema[key] = { 'ui:widget': 'password' };
         }
         schema.properties[key] = value;
+        if (value.default !== undefined) {
+          this._defaultFormData[key] = value.default;
+        }
       });
     }
+
     return schema as JSONSchema7;
   }
 
@@ -293,7 +346,30 @@ export class AiSettings extends React.Component<
   }
 
   /**
-   * Triggered when the provider hes changed, to update the schema and values.
+   * Check for compatibility of the provider with the current environment.
+   * If the provider is not compatible, display an error message.
+   */
+  private async _checkProviderCompatibility(): Promise<void> {
+    const compatibilityCheck = this._providerRegistry.getCompatibilityCheck(
+      this._provider
+    );
+    if (!compatibilityCheck) {
+      this.setState({ compatibilityError: null });
+      return;
+    }
+    const error = await compatibilityCheck();
+    if (!error) {
+      this.setState({ compatibilityError: null });
+      return;
+    }
+    const errorDiv = document.createElement('div');
+    errorDiv.className = ERROR_CLASS;
+    errorDiv.innerHTML = error;
+    this.setState({ compatibilityError: error });
+  }
+
+  /**
+   * Triggered when the provider has changed, to update the schema and values.
    * Update the Jupyterlab settings accordingly.
    */
   private _onProviderChanged = (e: IChangeEvent) => {
@@ -303,12 +379,18 @@ export class AiSettings extends React.Component<
     }
     this._provider = provider;
     this.saveCurrentProvider();
-    this._currentSettings = this.getSettings();
     this._updateSchema();
     this._renderInstruction();
-    this._settings
-      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-      .catch(console.error);
+    this._checkProviderCompatibility();
+
+    // Initialize the current settings.
+    const isModified = this._updatedFormData(
+      this.getSettingsFromLocalStorage()
+    );
+    if (isModified !== this.state.isModified) {
+      this.setState({ isModified });
+    }
+    this.saveSettingsToRegistry();
   };
 
   /**
@@ -317,22 +399,65 @@ export class AiSettings extends React.Component<
    */
   private _onPasswordUpdated = (fieldName: string, value: string) => {
     this._currentSettings[fieldName] = value;
-    this._settings
-      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-      .catch(console.error);
+    this.saveSettingsToRegistry();
   };
 
+  /**
+   * Update the current settings with the new values from the form.
+   *
+   * @param data - The form data to update.
+   * @returns - Boolean whether the form is not the default one.
+   */
+  private _updatedFormData(data: IDict): boolean {
+    let isModified = false;
+    Object.entries(data).forEach(([key, value]) => {
+      if (this._defaultFormData[key] !== undefined) {
+        if (value === undefined) {
+          const schemaProperty = this.state.schema.properties?.[
+            key
+          ] as JSONSchema7;
+          if (schemaProperty.type === 'string') {
+            data[key] = '';
+          }
+        }
+        if (value !== this._defaultFormData[key]) {
+          isModified = true;
+        }
+      }
+    });
+    this._currentSettings = JSONExt.deepCopy(data);
+    return isModified;
+  }
+
   /**
    * Triggered when the form value has changed, to update the current settings and save
    * it in local storage.
    * Update the Jupyterlab settings accordingly.
    */
-  private _onFormChange = (e: IChangeEvent) => {
-    this._currentSettings = JSONExt.deepCopy(e.formData);
-    this.saveSettings(this._currentSettings);
-    this._settings
-      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-      .catch(console.error);
+  private _onFormChanged = (e: IChangeEvent): void => {
+    const { formData } = e;
+    const isModified = this._updatedFormData(formData);
+    this.saveSettingsToLocalStorage();
+    this.saveSettingsToRegistry();
+    if (isModified !== this.state.isModified) {
+      this.setState({ isModified });
+    }
+  };
+
+  /**
+   * Handler for the "Restore to defaults" button - clears all
+   * modified settings then calls `setFormData` to restore the
+   * values.
+   */
+  private _reset = async (event: React.MouseEvent): Promise<void> => {
+    event.stopPropagation();
+    this._currentSettings = {
+      ...this._currentSettings,
+      ...this._defaultFormData
+    };
+    this.saveSettingsToLocalStorage();
+    this.saveSettingsToRegistry();
+    this.setState({ isModified: false });
   };
 
   render(): JSX.Element {
@@ -343,6 +468,12 @@ export class AiSettings extends React.Component<
           schema={this._providerSchema}
           onChange={this._onProviderChanged}
         />
+        {this.state.compatibilityError !== null && (
+          <div className={ERROR_CLASS}>
+            <i className={'fas fa-exclamation-triangle'}></i>
+            <span>{this.state.compatibilityError}</span>
+          </div>
+        )}
         {this.state.instruction !== null && (
           <details>
             <summary className={INSTRUCTION_CLASS}>Instructions</summary>
@@ -353,11 +484,26 @@ export class AiSettings extends React.Component<
             />
           </details>
         )}
+        <div className="jp-SettingsHeader">
+          <h3 title={this._provider}>{this._provider}</h3>
+          <div className="jp-SettingsHeader-buttonbar">
+            {this.state.isModified && (
+              <Button className="jp-RestoreButton" onClick={this._reset}>
+                Restore to Defaults
+              </Button>
+            )}
+          </div>
+        </div>
         <WrappedFormComponent
           formData={this._currentSettings}
           schema={this.state.schema}
-          onChange={this._onFormChange}
+          onChange={this._onFormChanged}
           uiSchema={this._uiSchema}
+          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}`}
+          formContext={{
+            ...this.props.formContext,
+            defaultFormData: this._defaultFormData
+          }}
         />
       </div>
     );
@@ -367,16 +513,14 @@ 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;
   private _currentSettings: IDict<any> = { provider: 'None' };
   private _uiSchema: IDict<any> = {};
   private _settings: ISettingRegistry.ISettings;
   private _formRef = React.createRef<HTMLDivElement>();
-  private _unsavedFields: string[] = [];
-  private _formInputs: HTMLInputElement[] = [];
+  private _secretFields: string[] = [];
+  private _defaultFormData: IDict<any> = {};
 }
 
 namespace Private {

package/src/tokens.ts

@@ -4,6 +4,7 @@ import { ISignal } from '@lumino/signaling';
 import { JSONSchema7 } from 'json-schema';
 
 import { IBaseCompleter } from './base-completer';
+import { AIChatModel, AICompleter } from './types/ai-model';
 
 export const PLUGIN_IDS = {
   chat: '@jupyterlite/ai:chat',
@@ -51,6 +52,20 @@ export interface IAIProvider {
    * Default to `(error) => error.message`.
    */
   errorMessage?: (error: any) => string;
+  /**
+   * Compatibility check function, to determine if the provider is compatible with the
+   * current environment.
+   */
+  compatibilityCheck?: () => Promise<string | null>;
+  /**
+   * Whether to expose or not the chat model.
+   *
+   * ### CAUTION
+   * This flag will expose the whole chat model API, which may contain private keys.
+   * Be sure to use it with a model that does not expose sensitive information in the
+   * API.
+   */
+  exposeChatModel?: boolean;
 }
 
 /**
@@ -72,11 +87,11 @@ export interface IAIProviderRegistry {
   /**
    * Get the current completer of the completion provider.
    */
-  currentCompleter: IBaseCompleter | null;
+  currentCompleter: AICompleter | null;
   /**
    * Get the current llm chat model.
    */
-  currentChatModel: BaseChatModel | null;
+  currentChatModel: AIChatModel | null;
   /**
    * Get the settings schema of a given provider.
    */
@@ -85,6 +100,12 @@ export interface IAIProviderRegistry {
    * Get the instructions of a given provider.
    */
   getInstructions(provider: string): string | undefined;
+  /**
+   * Get the compatibility check function of a given provider.
+   */
+  getCompatibilityCheck(
+    provider: string
+  ): (() => Promise<string | null>) | undefined;
   /**
    * Format an error message from the current provider.
    */

package/src/types/ai-model.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import {
+  CompletionHandler,
+  IInlineCompletionContext
+} from '@jupyterlab/completer';
+import { IterableReadableStream } from '@langchain/core/utils/stream';
+
+/**
+ * The reduced AI chat model interface.
+ */
+export type AIChatModel = {
+  /**
+   * The stream function of the chat model.
+   */
+  stream: (input: any, options?: any) => Promise<IterableReadableStream<any>>;
+};
+
+/**
+ * The reduced AI completer interface.
+ */
+export type AICompleter = {
+  /**
+   * The fetch function of the completer.
+   */
+  fetch: (
+    request: CompletionHandler.IRequest,
+    context: IInlineCompletionContext
+  ) => Promise<any>;
+  /**
+   * The optional request completion function of the completer.
+   */
+  requestCompletion?: () => void;
+};

package/src/types/service-worker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Type declarations for Service Worker APIs not included in standard TypeScript libs
+ */
+interface ExtendableMessageEvent extends MessageEvent {
+  waitUntil(f: Promise<any>): void;
+}

package/style/base.css

@@ -9,3 +9,8 @@
 .jp-AISettingsInstructions {
   font-size: var(--jp-content-font-size1);
 }
+
+.jp-AISettingsError {
+  color: var(--jp-error-color1);
+  font-size: var(--jp-content-font-size1);
+}

package/lib/settings/settings-connector.d.ts

@@ -1,31 +0,0 @@
-import { ISettingConnector, ISettingRegistry } from '@jupyterlab/settingregistry';
-import { DataConnector, IDataConnector } from '@jupyterlab/statedb';
-/**
- * A data connector for fetching settings.
- *
- * #### Notes
- * This connector adds a query parameter to the base services setting manager.
- */
-export declare class SettingConnector extends DataConnector<ISettingRegistry.IPlugin, string> implements ISettingConnector {
-    constructor(connector: IDataConnector<ISettingRegistry.IPlugin, string>);
-    set doNotSave(fields: string[]);
-    /**
-     * Fetch settings for a plugin.
-     * @param id - The plugin ID
-     *
-     * #### Notes
-     * The REST API requests are throttled at one request per plugin per 100ms.
-     */
-    fetch(id: string): Promise<ISettingRegistry.IPlugin | undefined>;
-    list(query: 'ids'): Promise<{
-        ids: string[];
-    }>;
-    list(query: 'active' | 'all'): Promise<{
-        ids: string[];
-        values: ISettingRegistry.IPlugin[];
-    }>;
-    save(id: string, raw: string): Promise<void>;
-    private _connector;
-    private _doNotSave;
-    private _throttlers;
-}