@jupyterlite/ai 0.6.2 → 0.8.0

package/lib/settings/panel.js

@@ -1,14 +1,18 @@
-import { FormComponent } from '@jupyterlab/ui-components';
+import { Button, FormComponent } from '@jupyterlab/ui-components';
 import { JSONExt } from '@lumino/coreutils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
-import { getSecretId, SettingConnector } from '.';
+import { getSecretId, SECRETS_REPLACEMENT } 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 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) => {
     const { secretsToken } = options;
     delete options.secretsToken;
@@ -27,103 +31,107 @@ const WrappedFormComponent = (props) => {
 };
 export class AiSettings extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d, _e, _f;
         super(props);
-        /**
-         * 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);
-                if (this._settingConnector instanceof SettingConnector) {
-                    this._settingConnector.doNotSave = [];
-                }
-                this.saveSettings(this._currentSettings);
-            }
-            else {
-                // Remove all the keys stored locally.
-                const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
-                Object.keys(settings).forEach(provider => {
-                    Object.keys(settings[provider])
-                        .filter(key => key.toLowerCase().includes('key'))
-                        .forEach(key => {
-                        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._settings
-                .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-                .catch(console.error);
-        };
-        /**
-         * Triggered when the provider hes changed, to update the schema and values.
-         * Update the Jupyterlab settings accordingly.
-         */
-        this._onProviderChanged = (e) => {
-            const provider = e.formData.provider;
-            if (provider === this._currentSettings.provider) {
-                return;
-            }
-            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);
-        };
-        /**
-         * Callback function called when the password input has been programmatically updated
-         * with the secret manager.
-         */
-        this._onPasswordUpdated = (fieldName, value) => {
-            this._currentSettings[fieldName] = value;
-            this._settings
-                .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-                .catch(console.error);
-        };
-        /**
-         * Triggered when the form value has changed, to update the current settings and save
-         * it in local storage.
-         * Update the Jupyterlab settings accordingly.
-         */
-        this._onFormChange = (e) => {
-            this._currentSettings = JSONExt.deepCopy(e.formData);
-            this.saveSettings(this._currentSettings);
-            this._settings
-                .set('AIprovider', { provider: this._provider, ...this._currentSettings })
-                .catch(console.error);
-        };
-        this._currentSettings = { provider: 'None' };
-        this._uiSchema = {};
-        this._formRef = React.createRef();
-        this._secretFields = [];
+        this._settings = props.formContext.settings;
+        const uniqueProvider = this._settings.get('UniqueProvider').composite ?? true;
+        this.state = { uniqueProvider };
+        this._settings.changed.connect(this._settingsChanged);
+    }
+    _settingsChanged = () => {
+        const uniqueProvider = this._settings.get('UniqueProvider').composite ?? 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) => {
+        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, key, value) => {
+        const storageKey = STORAGE_KEYS[role];
+        let settings;
+        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) => {
+        const settings = this._settings.get('AIproviders')
+            .composite;
+        return settings && Object.keys(settings).includes(role)
+            ? settings[role]
+            : { provider: 'None' };
+    };
+    /**
+     * Save the settings to the setting registry.
+     */
+    saveSettingsToRegistry = (role, settings) => {
+        const fullSettings = this._settings.get('AIproviders')
+            .composite;
+        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() {
+        return (React.createElement("div", null,
+            React.createElement("h3", null, this.state.uniqueProvider
+                ? 'Chat and completer provider'
+                : 'Chat provider'),
+            React.createElement(AiProviderSettings, { ...this.props, role: 'chat', aiSettings: this }),
+            !this.state.uniqueProvider && (React.createElement(React.Fragment, null,
+                React.createElement("h3", null, "Completer provider"),
+                React.createElement(AiProviderSettings, { ...this.props, role: 'completer', aiSettings: this })))));
+    }
+    _settings;
+}
+export class AiProviderSettings extends React.Component {
+    constructor(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 = (_a = props.formContext.rmRegistry) !== null && _a !== void 0 ? _a : null;
-        this._secretsManager = (_b = props.formContext.secretsManager) !== null && _b !== void 0 ? _b : null;
-        this._settingConnector = (_c = props.formContext.settingConnector) !== null && _c !== void 0 ? _c : null;
+        this._rmRegistry = props.formContext.rmRegistry ?? null;
+        this._secretsManager = props.formContext.secretsManager ?? null;
         this._settings = props.formContext.settings;
+        const useSecretsManagerSetting = this._settings.get('UseSecretsManager').composite ?? true;
         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;
+            useSecretsManagerSetting && this._secretsManager !== null;
         // Initialize the providers schema.
         const providerSchema = JSONExt.deepCopy(baseSettings);
         providerSchema.properties.provider = {
@@ -135,53 +143,51 @@ export class AiSettings extends React.Component {
         };
         this._providerSchema = providerSchema;
         // 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 = (_f = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _f === void 0 ? void 0 : _f[1];
+                const provider = Object.entries(labSettings).find(v => v[0] === 'provider')?.[1];
                 // Save the settings.
                 const settings = {
                     _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(() => {
-            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();
-            }
-        });
+        this.saveSettingsToRegistry();
+        this._secretsManager?.fieldVisibilityChanged.connect(this._fieldVisibilityChanged);
+        this._settings.changed.connect(this._settingsChanged);
+    }
+    componentDidMount() {
+        this.componentDidUpdate();
     }
     async componentDidUpdate() {
-        var _a;
         if (!this._secretsManager || !this._useSecretsManager) {
             return;
         }
         // Attach the password inputs to the secrets manager.
         await this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
-        const inputs = ((_a = this._formRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')) || [];
+        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');
@@ -193,6 +199,8 @@ export class AiSettings extends React.Component {
         }
     }
     componentWillUnmount() {
+        this._settings.changed.disconnect(this._settingsChanged);
+        this._secretsManager?.fieldVisibilityChanged.disconnect(this._fieldVisibilityChanged);
         if (!this._secretsManager || !this._useSecretsManager) {
             return;
         }
@@ -202,40 +210,95 @@ export class AiSettings extends React.Component {
      * Get the current provider from the local storage.
      */
     getCurrentProvider() {
-        var _a;
-        const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
-        return (_a = settings['_current']) !== null && _a !== void 0 ? _a : 'None';
+        const settings = this.props.aiSettings.getLocalStorage(this._role);
+        return settings['_current'] ?? 'None';
     }
     /**
      * Save the current provider to the local storage.
      */
     saveCurrentProvider() {
-        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() {
-        var _a;
-        const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
-        return (_a = settings[this._provider]) !== null && _a !== void 0 ? _a : { provider: this._provider };
+    getSettingsFromLocalStorage() {
+        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) {
-        var _a;
-        const currentSettings = { ...value };
-        const settings = JSON.parse((_a = localStorage.getItem(STORAGE_NAME)) !== null && _a !== void 0 ? _a : '{}');
+    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() {
+        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.
+     */
+    _settingsChanged = (settings) => {
+        this._updateUseSecretsManager(this._settings.get('UseSecretsManager').composite ?? true);
+    };
+    /**
+     * Triggered when the secret fields visibility has changed.
+     */
+    _fieldVisibilityChanged = (_, value) => {
+        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.
+     */
+    _updateUseSecretsManager = (value) => {
+        // 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);
+        }
+        else {
+            // Remove all the keys stored locally.
+            const settings = this.props.aiSettings.getLocalStorage(this._role);
+            Object.keys(settings).forEach(provider => {
+                Object.keys(settings[provider])
+                    .filter(key => key.toLowerCase().includes('key'))
+                    .forEach(key => {
+                    delete settings[provider][key];
+                });
+            });
+            this.props.aiSettings.setLocalStorageItem(this._role, null, settings);
+        }
+        this._updateSchema();
+        this.saveSettingsToLocalStorage();
+        this.saveSettingsToRegistry();
+    };
     /**
      * Build the schema for a given provider.
      */
@@ -244,24 +307,26 @@ export class AiSettings extends React.Component {
         this._uiSchema = {};
         const settingsSchema = this._providerRegistry.getSettingsSchema(this._provider);
         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;
     }
     /**
@@ -289,14 +354,138 @@ export class AiSettings extends React.Component {
         await renderer.renderModel(model);
         this.setState({ instruction: renderer.node });
     }
+    /**
+     * Check for compatibility of the provider with the current environment.
+     * If the provider is not compatible, display an error message.
+     */
+    async _checkProviderCompatibility() {
+        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.
+     */
+    _onProviderChanged = (e) => {
+        const provider = e.formData.provider;
+        if (provider === this._currentSettings.provider) {
+            return;
+        }
+        this._provider = provider;
+        this.saveCurrentProvider();
+        this._updateSchema();
+        this._renderInstruction();
+        this._checkProviderCompatibility();
+        // Initialize the current settings.
+        const isModified = this._updatedFormData(this.getSettingsFromLocalStorage());
+        if (isModified !== this.state.isModified) {
+            this.setState({ isModified });
+        }
+        this.saveSettingsToRegistry();
+    };
+    /**
+     * Callback function called when the password input has been programmatically updated
+     * with the secret manager.
+     */
+    _onPasswordUpdated = (fieldName, value) => {
+        this._currentSettings[fieldName] = value;
+        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.
+     */
+    _updatedFormData(data) {
+        let isModified = false;
+        Object.entries(data).forEach(([key, value]) => {
+            if (this._defaultFormData[key] !== undefined) {
+                if (value === undefined) {
+                    const schemaProperty = this.state.schema.properties?.[key];
+                    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.
+     */
+    _onFormChanged = (e) => {
+        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.
+     */
+    _reset = async (event) => {
+        event.stopPropagation();
+        this._currentSettings = {
+            ...this._currentSettings,
+            ...this._defaultFormData
+        };
+        this.saveSettingsToLocalStorage();
+        this.saveSettingsToRegistry();
+        this.setState({ isModified: false });
+    };
     render() {
         return (React.createElement("div", { ref: this._formRef },
-            React.createElement(WrappedFormComponent, { formData: { provider: this._provider }, schema: this._providerSchema, onChange: this._onProviderChanged }),
+            React.createElement(WrappedFormComponent, { formData: { provider: this._provider }, schema: this._providerSchema, onChange: this._onProviderChanged, idPrefix: `jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}-${this._role}` }),
+            this.state.compatibilityError !== null && (React.createElement("div", { className: ERROR_CLASS },
+                React.createElement("i", { className: 'fas fa-exclamation-triangle' }),
+                React.createElement("span", null, this.state.compatibilityError))),
             this.state.instruction !== null && (React.createElement("details", null,
                 React.createElement("summary", { className: INSTRUCTION_CLASS }, "Instructions"),
                 React.createElement("span", { ref: node => node && node.replaceChildren(this.state.instruction) }))),
-            React.createElement(WrappedFormComponent, { formData: this._currentSettings, schema: this.state.schema, onChange: this._onFormChange, uiSchema: this._uiSchema })));
+            React.createElement("div", { className: "jp-SettingsHeader" },
+                React.createElement("h3", { title: this._provider }, this._provider),
+                React.createElement("div", { className: "jp-SettingsHeader-buttonbar" }, this.state.isModified && (React.createElement(Button, { className: "jp-RestoreButton", onClick: this._reset }, "Restore to Defaults")))),
+            React.createElement(WrappedFormComponent, { formData: this._currentSettings, schema: this.state.schema, onChange: this._onFormChanged, uiSchema: this._uiSchema, idPrefix: `jp-SettingsEditor-${PLUGIN_IDS.providerRegistry}-${this._role}`, formContext: {
+                    ...this.props.formContext,
+                    defaultFormData: this._defaultFormData
+                } })));
     }
+    _role;
+    _providerRegistry;
+    _provider;
+    _providerSchema;
+    _useSecretsManager;
+    _rmRegistry;
+    _secretsManager;
+    _currentSettings = { provider: 'None' };
+    _uiSchema = {};
+    _settings;
+    _formRef = React.createRef();
+    _secretFields = [];
+    _defaultFormData = {};
 }
 var Private;
 (function (Private) {

package/lib/settings/textarea.d.ts

@@ -0,0 +1,2 @@
+import { IFormRenderer } from '@jupyterlab/ui-components';
+export declare const textArea: IFormRenderer;

package/lib/settings/textarea.js

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+const TEXTAREA_CLASS = 'jp-AISettingsTextArea';
+export const textArea = {
+    fieldRenderer: (props) => {
+        const settings = props.formContext.settings;
+        const schema = settings.schema.properties?.[props.name];
+        const [formData, setFormData] = useState(props.formData);
+        settings.changed.connect(() => {
+            setFormData(settings.get(props.name).composite);
+        });
+        const onChange = (event) => {
+            settings.set(props.name, event.target.value);
+        };
+        return (React.createElement(React.Fragment, null,
+            schema?.title && (React.createElement("h3", { className: "jp-FormGroup-fieldLabel jp-FormGroup-contentItem" }, schema.title)),
+            React.createElement("textarea", { className: TEXTAREA_CLASS, onChange: onChange }, formData)));
+    }
+};