@jupyterlite/ai 0.6.2 → 0.8.0

package/src/settings/panel.tsx

@@ -1,10 +1,11 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import {
-  ISettingConnector,
-  ISettingRegistry
-} from '@jupyterlab/settingregistry';
-import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
-import { JSONExt } from '@lumino/coreutils';
+  Button,
+  FormComponent,
+  IFormRenderer
+} from '@jupyterlab/ui-components';
+import { JSONExt, ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { IChangeEvent } from '@rjsf/core';
 import type { FieldProps } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
@@ -12,21 +13,24 @@ 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';
+import { IAIProviderRegistry, IDict, ModelRole, 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;
+const STORAGE_KEYS = {
+  chat: '@jupyterlite/ai:chat-settings',
+  completer: '@jupyterlite/ai:completer-settings'
+};
 
 export const aiSettingsRenderer = (options: {
   providerRegistry: IAIProviderRegistry;
   secretsToken?: symbol;
   rmRegistry?: IRenderMimeRegistry;
   secretsManager?: ISecretsManager;
-  settingConnector?: ISettingConnector;
 }): IFormRenderer => {
   const { secretsToken } = options;
   delete options.secretsToken;
@@ -41,36 +45,205 @@ export const aiSettingsRenderer = (options: {
   };
 };
 
-export interface ISettingsFormStates {
-  schema: JSONSchema7;
-  instruction: HTMLElement | null;
-}
-
 const WrappedFormComponent = (props: any): JSX.Element => {
   return <FormComponent {...props} validator={validator} />;
 };
 
-export class AiSettings extends React.Component<
-  FieldProps,
-  ISettingsFormStates
-> {
+export interface IAiSettings {
+  /**
+   * Get the local storage settings for a specific role (chat or completer).
+   */
+  getLocalStorage(role: ModelRole): IDict<any>;
+  /**
+   * Set the local storage item for a specific role (chat or completer).
+   * If the key is not provider (null) we assume the value should replace the whole
+   * local storage for this role.
+   */
+  setLocalStorageItem(role: ModelRole, key: string | null, value: any): void;
+  /**
+   * Get the settings from the registry (jupyterlab settings system) for a given role.
+   */
+  getSettingsFromRegistry(role: ModelRole): IDict<any>;
+  /**
+   * Save the settings to the setting registry.
+   */
+  saveSettingsToRegistry(role: ModelRole, settings: IDict<any>): void;
+}
+
+export class AiSettings
+  extends React.Component<FieldProps, AiSettings.states>
+  implements IAiSettings
+{
   constructor(props: FieldProps) {
+    super(props);
+    this._settings = props.formContext.settings;
+    const uniqueProvider =
+      (this._settings.get('UniqueProvider').composite as boolean) ?? true;
+
+    this.state = { uniqueProvider };
+
+    this._settings.changed.connect(this._settingsChanged);
+  }
+
+  private _settingsChanged = () => {
+    const uniqueProvider =
+      (this._settings.get('UniqueProvider').composite as boolean) ?? true;
+    if (this.state.uniqueProvider === uniqueProvider) {
+      return;
+    }
+    if (uniqueProvider) {
+      // Copy chat settings to the completer settings if there should be a unique
+      // provider for both.
+      this.setLocalStorageItem('completer', null, this.getLocalStorage('chat'));
+      this.saveSettingsToRegistry(
+        'completer',
+        this.getSettingsFromRegistry('chat')
+      );
+    }
+    this.setState({ uniqueProvider });
+  };
+
+  /**
+   * Get the local storage settings for a specific role (chat or completer).
+   */
+  getLocalStorage = (role: ModelRole): IDict<any> => {
+    const storageKey = STORAGE_KEYS[role];
+    return JSON.parse(localStorage.getItem(storageKey) ?? '{}');
+  };
+
+  /**
+   * Set the local storage item for a specific role (chat or completer).
+   * If the key is not provider (null) we assume the value should replace the whole
+   * local storage for this role.
+   */
+  setLocalStorageItem = (
+    role: ModelRole,
+    key: string | null,
+    value: any
+  ): void => {
+    const storageKey = STORAGE_KEYS[role];
+    let settings: IDict<any>;
+
+    if (key !== null) {
+      settings = JSON.parse(localStorage.getItem(storageKey) ?? '{}');
+      settings[key] = value;
+    } else {
+      settings = value;
+    }
+
+    localStorage.setItem(storageKey, JSON.stringify(settings));
+
+    // If both chat and completer use the same settings, only the chat settings should
+    // be editable for user, so we should duplicate its values to the completer
+    // local storage.
+    if (this.state.uniqueProvider && role === 'chat') {
+      const storageKeyCompleter = STORAGE_KEYS['completer'];
+      localStorage.setItem(storageKeyCompleter, JSON.stringify(settings));
+    }
+  };
+
+  /**
+   * Get the settings from the registry (jupyterlab settings system) for a given role.
+   */
+  getSettingsFromRegistry = (role: ModelRole): IDict<any> => {
+    const settings = this._settings.get('AIproviders')
+      .composite as ReadonlyPartialJSONObject;
+    return settings && Object.keys(settings).includes(role)
+      ? (settings[role] as IDict<any>)
+      : { provider: 'None' };
+  };
+
+  /**
+   * Save the settings to the setting registry.
+   */
+  saveSettingsToRegistry = (role: ModelRole, settings: IDict<any>): void => {
+    const fullSettings = this._settings.get('AIproviders')
+      .composite as IDict<any>;
+    fullSettings[role] = { ...settings };
+
+    // If both chat and completer use the same settings, only the chat settings should
+    // be editable for user, so we should duplicate its values to the completer
+    // settings.
+    if (this.state.uniqueProvider && role === 'chat') {
+      fullSettings['completer'] = { ...settings };
+    }
+    this._settings.set('AIproviders', { ...fullSettings }).catch(console.error);
+  };
+
+  render(): JSX.Element {
+    return (
+      <div>
+        <h3>
+          {this.state.uniqueProvider
+            ? 'Chat and completer provider'
+            : 'Chat provider'}
+        </h3>
+        <AiProviderSettings {...this.props} role={'chat'} aiSettings={this} />
+        {!this.state.uniqueProvider && (
+          <>
+            <h3>Completer provider</h3>
+            <AiProviderSettings
+              {...this.props}
+              role={'completer'}
+              aiSettings={this}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  private _settings: ISettingRegistry.ISettings;
+}
+
+/**
+ * The AI settings component namespace.
+ */
+namespace AiSettings {
+  /**
+   * The AI settings component states.
+   */
+  export type states = {
+    /**
+     * Whether there is only one provider for chat and completion.
+     */
+    uniqueProvider: boolean;
+  };
+  /**
+   * The provider names object.
+   */
+  export type providers = {
+    [key in ModelRole]: string;
+  };
+  /**
+   * The provider schemas object.
+   */
+  export type schemas = {
+    [key in ModelRole]: JSONSchema7;
+  };
+}
+
+export class AiProviderSettings extends React.Component<
+  AiProviderSettings.props,
+  AiProviderSettings.states
+> {
+  constructor(props: AiProviderSettings.props) {
     super(props);
     if (!props.formContext.providerRegistry) {
       throw new Error(
         'The provider registry is needed to enable the jupyterlite-ai settings panel'
       );
     }
+    this._role = props.role;
     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;
@@ -84,11 +257,14 @@ 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).
-    const storageSettings = localStorage.getItem(STORAGE_NAME);
+    // the setting registry (leads to default if there are no user settings).
+    const storageKey = STORAGE_KEYS[this._role];
+    const storageSettings = localStorage.getItem(storageKey);
     if (storageSettings === null) {
-      const labSettings = this._settings.get('AIprovider').composite;
-      if (labSettings && Object.keys(labSettings).includes('provider')) {
+      const labSettings = this.props.aiSettings.getSettingsFromRegistry(
+        this._role
+      );
+      if (Object.keys(labSettings).includes('provider')) {
         // Get the provider name.
         const provider = Object.entries(labSettings).find(
           v => v[0] === 'provider'
@@ -98,38 +274,43 @@ export class AiSettings extends React.Component<
           _current: provider
         };
         settings[provider] = labSettings;
-        localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+        this.props.aiSettings.setLocalStorageItem(this._role, null, settings);
       }
     }
 
     // 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._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.saveSettingsToRegistry();
+
+    this._secretsManager?.fieldVisibilityChanged.connect(
+      this._fieldVisibilityChanged
+    );
+
+    this._settings.changed.connect(this._settingsChanged);
+  }
+
+  componentDidMount(): void {
+    this.componentDidUpdate();
   }
 
   async componentDidUpdate(): Promise<void> {
@@ -158,6 +339,10 @@ export class AiSettings extends React.Component<
   }
 
   componentWillUnmount(): void {
+    this._settings.changed.disconnect(this._settingsChanged);
+    this._secretsManager?.fieldVisibilityChanged.disconnect(
+      this._fieldVisibilityChanged
+    );
     if (!this._secretsManager || !this._useSecretsManager) {
       return;
     }
@@ -168,7 +353,7 @@ export class AiSettings extends React.Component<
    * Get the current provider from the local storage.
    */
   getCurrentProvider(): string {
-    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+    const settings = this.props.aiSettings.getLocalStorage(this._role);
     return settings['_current'] ?? 'None';
   }
 
@@ -176,51 +361,95 @@ export class AiSettings extends React.Component<
    * Save the current provider to the local storage.
    */
   saveCurrentProvider(): void {
-    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
-    settings['_current'] = this._provider;
-    localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+    this.props.aiSettings.setLocalStorageItem(
+      this._role,
+      '_current',
+      this._provider
+    );
   }
 
   /**
-   * Get settings from local storage for a given provider.
+   * Get settings from local storage for the current provider provider.
    */
-  getSettings(): IDict<any> {
-    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+  getSettingsFromLocalStorage(): IDict<any> {
+    const settings = this.props.aiSettings.getLocalStorage(this._role);
     return settings[this._provider] ?? { provider: this._provider };
   }
 
   /**
    * Save settings in local storage for a given provider.
    */
-  saveSettings(value: IDict<any>) {
-    const currentSettings = { ...value };
-    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) ?? '{}');
+  saveSettingsToLocalStorage() {
+    const currentSettings = { ...this._currentSettings };
     // Do not save secrets in local storage if using the secrets manager.
-    if (this._secretsManager && this._useSecretsManager) {
+    if (this._useSecretsManager) {
       this._secretFields.forEach(field => delete currentSettings[field]);
     }
-    settings[this._provider] = currentSettings;
-    localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+    this.props.aiSettings.setLocalStorageItem(
+      this._role,
+      this._provider,
+      currentSettings
+    );
+  }
+
+  /**
+   * 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.props.aiSettings.saveSettingsToRegistry(this._role, {
+      provider: this._provider,
+      ...sanitizedSettings
+    });
   }
 
+  /**
+   * 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);
-      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.
-      const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+      const settings = this.props.aiSettings.getLocalStorage(this._role);
       Object.keys(settings).forEach(provider => {
         Object.keys(settings[provider])
           .filter(key => key.toLowerCase().includes('key'))
@@ -228,17 +457,11 @@ export class AiSettings extends React.Component<
             delete settings[provider][key];
           });
       });
-      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.props.aiSettings.setLocalStorageItem(this._role, null, settings);
     }
-    this._settings
-      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-      .catch(console.error);
+    this._updateSchema();
+    this.saveSettingsToLocalStorage();
+    this.saveSettingsToRegistry();
   };
 
   /**
@@ -252,27 +475,30 @@ export class AiSettings extends React.Component<
     );
 
     this._secretFields = [];
+    this._defaultFormData = {};
     if (settingsSchema) {
       Object.entries(settingsSchema).forEach(([key, value]) => {
         if (key.toLowerCase().includes('key')) {
           this._secretFields.push(key);
-          if (this._hideSecretFields) {
+
+          // If the secrets manager is not used, 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;
+        }
       });
     }
 
-    // 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;
   }
 
@@ -304,7 +530,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) => {
@@ -314,12 +563,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();
   };
 
   /**
@@ -328,22 +583,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 {
@@ -353,7 +651,14 @@ export class AiSettings extends React.Component<
           formData={{ provider: this._provider }}
           schema={this._providerSchema}
           onChange={this._onProviderChanged}
+          idPrefix={`jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}-${this._role}`}
         />
+        {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>
@@ -364,29 +669,86 @@ 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}-${this._role}`}
+          formContext={{
+            ...this.props.formContext,
+            defaultFormData: this._defaultFormData
+          }}
         />
       </div>
     );
   }
 
+  private _role: ModelRole;
   private _providerRegistry: IAIProviderRegistry;
   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 _secretFields: string[] = [];
+  private _defaultFormData: IDict<any> = {};
+}
+
+/**
+ * The AI provider settings component namespace.
+ */
+export namespace AiProviderSettings {
+  /**
+   * The AI provider settings component props.
+   */
+  export type props = FieldProps & {
+    /**
+     * Why this model is used for (chat or completion).
+     */
+    role: ModelRole;
+    /**
+     * The parent component which should handle:
+     * - the get/set functions for local storage
+     * - save settings using jupyter settings system
+     */
+    aiSettings: IAiSettings;
+  };
+  /**
+   * The AI provider settings component states.
+   */
+  export type states = {
+    /**
+     * The schema of the settings.
+     */
+    schema: JSONSchema7;
+    /**
+     * The instructions for this provider.
+     */
+    instruction: HTMLElement | null;
+    /**
+     * An error if the model in not compatible with the current environment.
+     */
+    compatibilityError: string | null;
+    /**
+     * Whether the settings are modified from default or not.
+     */
+    isModified?: boolean;
+  };
 }
 
 namespace Private {