@jupyterlite/ai 0.4.0 → 0.5.0

package/lib/chat-handler.d.ts

@@ -1,4 +1,4 @@
-import { ChatModel, IChatHistory, IChatMessage, INewMessage } from '@jupyter/chat';
+import { ChatCommand, ChatModel, IChatCommandProvider, IChatHistory, IChatMessage, IInputModel, INewMessage } from '@jupyter/chat';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { IAIProviderRegistry } from './tokens';
 export type ConnectionMessage = {
@@ -33,4 +33,10 @@ export declare namespace ChatHandler {
     interface IOptions extends ChatModel.IOptions {
         providerRegistry: IAIProviderRegistry;
     }
+    class ClearCommandProvider implements IChatCommandProvider {
+        id: string;
+        private _slash_commands;
+        getChatCommands(inputModel: IInputModel): Promise<ChatCommand[]>;
+        handleChatCommand(command: ChatCommand, inputModel: IInputModel): Promise<void>;
+    }
 }

package/lib/chat-handler.js

@@ -142,3 +142,32 @@ export class ChatHandler extends ChatModel {
         super.messageAdded(message);
     }
 }
+(function (ChatHandler) {
+    class ClearCommandProvider {
+        constructor() {
+            this.id = '@jupyterlite/ai:clear-commands';
+            this._slash_commands = [
+                {
+                    name: '/clear',
+                    providerId: this.id,
+                    replaceWith: '/clear',
+                    description: 'Clear the chat'
+                }
+            ];
+        }
+        async getChatCommands(inputModel) {
+            var _a, _b;
+            const match = (_b = (_a = inputModel.currentWord) === null || _a === void 0 ? void 0 : _a.match(/^\/\w*/)) === null || _b === void 0 ? void 0 : _b[0];
+            if (!match) {
+                return [];
+            }
+            const commands = this._slash_commands.filter(cmd => cmd.name.startsWith(match));
+            return commands;
+        }
+        async handleChatCommand(command, inputModel) {
+            // no handling needed because `replaceWith` is set in each command.
+            return;
+        }
+    }
+    ChatHandler.ClearCommandProvider = ClearCommandProvider;
+})(ChatHandler || (ChatHandler = {}));

package/lib/completion-provider.d.ts

@@ -1,5 +1,5 @@
 import { CompletionHandler, IInlineCompletionContext, IInlineCompletionProvider } from '@jupyterlab/completer';
-import { IBaseCompleter } from './llm-models';
+import { IBaseCompleter } from './base-completer';
 import { IAIProviderRegistry } from './tokens';
 /**
  * The generic completion provider to register to the completion provider manager.

package/lib/{llm-models/anthropic-completer.d.ts → default-providers/Anthropic/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class AnthropicCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/anthropic-completer.js → default-providers/Anthropic/completer.js}

@@ -1,6 +1,6 @@
 import { ChatAnthropic } from '@langchain/anthropic';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class AnthropicCompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;

package/lib/{llm-models/chrome-completer.d.ts → default-providers/ChromeAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { LLM } from '@langchain/core/language_models/llms';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class ChromeCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     /**

package/lib/{llm-models/chrome-completer.js → default-providers/ChromeAI/completer.js}

@@ -1,6 +1,6 @@
 import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 /**
  * Regular expression to match the '```' string at the start of a string.
  * So the completions returned by the LLM can still be kept after removing the code block formatting.

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

@@ -0,0 +1,2 @@
+declare const _default: "\n<i class=\"fas fa-exclamation-triangle\"></i> Support for ChromeAI is still experimental and only available in Google Chrome.\n\nYou can test ChromeAI is enabled in your browser by going to the following URL: <https://chromeai.org/>\n\nEnable the proper flags in Google Chrome.\n\n- chrome://flags/#prompt-api-for-gemini-nano\n  - Select: `Enabled`\n- chrome://flags/#optimization-guide-on-device-model\n  - Select: `Enabled BypassPrefRequirement`\n- chrome://components\n  - Click `Check for Update` on Optimization Guide On Device Model to download the model\n- [Optional] chrome://flags/#text-safety-classifier\n\n<img src=\"https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c\" alt=\"A screenshot showing how to enable the ChromeAI flag in Google Chrome\" width=\"500px\">\n\nThen restart Chrome for these changes to take effect.\n\n<i class=\"fas fa-exclamation-triangle\"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).\nDuring the download, ChromeAI may not be available via the extension.\n\n<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> For more information about Chrome Built-in AI: <https://developer.chrome.com/docs/ai/get-started>\n";
+export default _default;

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

@@ -0,0 +1,24 @@
+export default `
+<i class="fas fa-exclamation-triangle"></i> Support for ChromeAI is still experimental and only available in Google Chrome.
+
+You can test ChromeAI is enabled in your browser by going to the following URL: <https://chromeai.org/>
+
+Enable the proper flags in Google Chrome.
+
+- chrome://flags/#prompt-api-for-gemini-nano
+  - Select: \`Enabled\`
+- chrome://flags/#optimization-guide-on-device-model
+  - Select: \`Enabled BypassPrefRequirement\`
+- chrome://components
+  - Click \`Check for Update\` on Optimization Guide On Device Model to download the model
+- [Optional] chrome://flags/#text-safety-classifier
+
+<img src="https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c" alt="A screenshot showing how to enable the ChromeAI flag in Google Chrome" width="500px">
+
+Then restart Chrome for these changes to take effect.
+
+<i class="fas fa-exclamation-triangle"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).
+During the download, ChromeAI may not be available via the extension.
+
+<i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: <https://developer.chrome.com/docs/ai/get-started>
+`;

package/lib/{llm-models/codestral-completer.d.ts → default-providers/MistralAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class CodestralCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/codestral-completer.js → default-providers/MistralAI/completer.js}

@@ -1,7 +1,7 @@
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatMistralAI } from '@langchain/mistralai';
 import { Throttler } from '@lumino/polling';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 /**
  * The Mistral API has a rate limit of 1 request per second
  */

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

@@ -0,0 +1,2 @@
+declare const _default: "\n<i class=\"fas fa-exclamation-triangle\"></i> This extension is still very much experimental. It is not an official MistralAI extension.\n\n1. Go to <https://console.mistral.ai/api-keys/> and create an API key.\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png\" alt=\"Screenshot showing how to create an API key\" width=\"500px\">\n\n2. Open the JupyterLab settings and go to the **Ai providers** section to select the `MistralAI`\n   provider and the API key (required).\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png\" alt=\"Screenshot showing how to add the API key to the settings\" width=\"500px\">\n\n3. Open the chat, or use the inline completer\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png\" alt=\"Screenshot showing how to use the chat\" width=\"500px\">\n";
+export default _default;

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

@@ -0,0 +1,16 @@
+export default `
+<i class="fas fa-exclamation-triangle"></i> This extension is still very much experimental. It is not an official MistralAI extension.
+
+1. Go to <https://console.mistral.ai/api-keys/> and create an API key.
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png" alt="Screenshot showing how to create an API key" width="500px">
+
+2. Open the JupyterLab settings and go to the **Ai providers** section to select the \`MistralAI\`
+   provider and the API key (required).
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png" alt="Screenshot showing how to add the API key to the settings" width="500px">
+
+3. Open the chat, or use the inline completer
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png" alt="Screenshot showing how to use the chat" width="500px">
+`;

package/lib/{llm-models/openai-completer.d.ts → default-providers/OpenAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class OpenAICompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/openai-completer.js → default-providers/OpenAI/completer.js}

@@ -1,6 +1,6 @@
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatOpenAI } from '@langchain/openai';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class OpenAICompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;

package/lib/default-providers/index.d.ts

@@ -0,0 +1,2 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+export declare const defaultProviderPlugins: JupyterFrontEndPlugin<void>[];

package/lib/default-providers/index.js

@@ -0,0 +1,60 @@
+import { ChatAnthropic } from '@langchain/anthropic';
+import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
+import { ChatMistralAI } from '@langchain/mistralai';
+import { ChatOpenAI } from '@langchain/openai';
+import { IAIProviderRegistry } from '../tokens';
+// Import completers
+import { AnthropicCompleter } from './Anthropic/completer';
+import { ChromeCompleter } from './ChromeAI/completer';
+import { CodestralCompleter } from './MistralAI/completer';
+import { OpenAICompleter } from './OpenAI/completer';
+// Import Settings
+import AnthropicSettings from './Anthropic/settings-schema.json';
+import ChromeAISettings from './ChromeAI/settings-schema.json';
+import MistralAISettings from './MistralAI/settings-schema.json';
+import OpenAISettings from './OpenAI/settings-schema.json';
+// Import instructions
+import ChromeAIInstructions from './ChromeAI/instructions';
+import MistralAIInstructions from './MistralAI/instructions';
+// Build the AIProvider list
+const AIProviders = [
+    {
+        name: 'Anthropic',
+        chatModel: ChatAnthropic,
+        completer: AnthropicCompleter,
+        settingsSchema: AnthropicSettings,
+        errorMessage: (error) => error.error.error.message
+    },
+    {
+        name: 'ChromeAI',
+        // TODO: fix
+        // @ts-expect-error: missing properties
+        chatModel: ChromeAI,
+        completer: ChromeCompleter,
+        instructions: ChromeAIInstructions,
+        settingsSchema: ChromeAISettings
+    },
+    {
+        name: 'MistralAI',
+        chatModel: ChatMistralAI,
+        completer: CodestralCompleter,
+        instructions: MistralAIInstructions,
+        settingsSchema: MistralAISettings
+    },
+    {
+        name: 'OpenAI',
+        chatModel: ChatOpenAI,
+        completer: OpenAICompleter,
+        settingsSchema: OpenAISettings
+    }
+];
+export const defaultProviderPlugins = AIProviders.map(provider => {
+    return {
+        id: `@jupyterlite/ai:${provider.name}`,
+        autoStart: true,
+        requires: [IAIProviderRegistry],
+        activate: (app, registry) => {
+            registry.add(provider);
+        }
+    };
+});

package/lib/index.d.ts

@@ -1,5 +1,5 @@
-import { IAutocompletionRegistry } from '@jupyter/chat';
+import { IChatCommandRegistry } from '@jupyter/chat';
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IAIProviderRegistry } from './tokens';
-declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IAutocompletionRegistry> | JupyterFrontEndPlugin<IAIProviderRegistry>)[];
+declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatCommandRegistry> | JupyterFrontEndPlugin<IAIProviderRegistry>)[];
 export default _default;

package/lib/index.js

@@ -1,49 +1,35 @@
-import { ActiveCellManager, AutocompletionRegistry, buildChatSidebar, buildErrorWidget, IAutocompletionRegistry } from '@jupyter/chat';
+import { ActiveCellManager, buildChatSidebar, buildErrorWidget, ChatCommandRegistry, IChatCommandRegistry } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IFormRendererRegistry } from '@jupyterlab/ui-components';
+import { ISecretsManager } from 'jupyter-secrets-manager';
 import { ChatHandler } from './chat-handler';
 import { CompletionProvider } from './completion-provider';
-import { AIProviders } from './llm-models';
+import { defaultProviderPlugins } from './default-providers';
 import { AIProviderRegistry } from './provider';
 import { aiSettingsRenderer } from './settings/panel';
-import { renderSlashCommandOption } from './slash-commands';
 import { IAIProviderRegistry } from './tokens';
-const autocompletionRegistryPlugin = {
+const chatCommandRegistryPlugin = {
     id: '@jupyterlite/ai:autocompletion-registry',
     description: 'Autocompletion registry',
     autoStart: true,
-    provides: IAutocompletionRegistry,
+    provides: IChatCommandRegistry,
     activate: () => {
-        const autocompletionRegistry = new AutocompletionRegistry();
-        const options = ['/clear'];
-        const autocompletionCommands = {
-            opener: '/',
-            commands: options.map(option => {
-                return {
-                    id: option.slice(1),
-                    label: option,
-                    description: 'Clear the chat window'
-                };
-            }),
-            props: {
-                renderOption: renderSlashCommandOption
-            }
-        };
-        autocompletionRegistry.add('jupyterlite-ai', autocompletionCommands);
-        return autocompletionRegistry;
+        const registry = new ChatCommandRegistry();
+        registry.addProvider(new ChatHandler.ClearCommandProvider());
+        return registry;
     }
 };
 const chatPlugin = {
     id: '@jupyterlite/ai:chat',
     description: 'LLM chat extension',
     autoStart: true,
-    requires: [IAIProviderRegistry, IRenderMimeRegistry, IAutocompletionRegistry],
+    requires: [IAIProviderRegistry, IRenderMimeRegistry, IChatCommandRegistry],
     optional: [INotebookTracker, ISettingRegistry, IThemeManager],
-    activate: async (app, providerRegistry, rmRegistry, autocompletionRegistry, notebookTracker, settingsRegistry, themeManager) => {
+    activate: async (app, providerRegistry, rmRegistry, chatCommandRegistry, notebookTracker, settingsRegistry, themeManager) => {
         let activeCellManager = null;
         if (notebookTracker) {
             activeCellManager = new ActiveCellManager({
@@ -85,7 +71,7 @@ const chatPlugin = {
                 model: chatHandler,
                 themeManager,
                 rmRegistry,
-                autocompletionRegistry
+                chatCommandRegistry
             });
             chatWidget.title.caption = 'Jupyterlite AI Chat';
         }
@@ -112,11 +98,11 @@ const providerRegistryPlugin = {
     id: '@jupyterlite/ai:provider-registry',
     autoStart: true,
     requires: [IFormRendererRegistry, ISettingRegistry],
-    optional: [IRenderMimeRegistry],
+    optional: [IRenderMimeRegistry, ISecretsManager],
     provides: IAIProviderRegistry,
-    activate: (app, editorRegistry, settingRegistry, rmRegistry) => {
+    activate: (app, editorRegistry, settingRegistry, rmRegistry, secretsManager) => {
         const providerRegistry = new AIProviderRegistry();
-        editorRegistry.addRenderer('@jupyterlite/ai:provider-registry.AIprovider', aiSettingsRenderer({ providerRegistry, rmRegistry }));
+        editorRegistry.addRenderer('@jupyterlite/ai:provider-registry.AIprovider', aiSettingsRenderer({ providerRegistry, rmRegistry, secretsManager }));
         settingRegistry
             .load(providerRegistryPlugin.id)
             .then(settings => {
@@ -134,14 +120,13 @@ const providerRegistryPlugin = {
             .catch(reason => {
             console.error(`Failed to load settings for ${providerRegistryPlugin.id}`, reason);
         });
-        // Initialize the registry with the default providers
-        AIProviders.forEach(provider => providerRegistry.add(provider));
         return providerRegistry;
     }
 };
 export default [
     providerRegistryPlugin,
-    autocompletionRegistryPlugin,
+    chatCommandRegistryPlugin,
     chatPlugin,
-    completerPlugin
+    completerPlugin,
+    ...defaultProviderPlugins
 ];

package/lib/provider.d.ts

@@ -3,7 +3,7 @@ import { BaseLanguageModel } from '@langchain/core/language_models/base';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { ISignal } from '@lumino/signaling';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { IBaseCompleter } from './llm-models';
+import { IBaseCompleter } from './base-completer';
 import { IAIProvider, IAIProviderRegistry } from './tokens';
 import { JSONSchema7 } from 'json-schema';
 export declare const chatSystemPrompt: (options: AIProviderRegistry.IPromptOptions) => string;

package/lib/settings/panel.d.ts

@@ -2,11 +2,13 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IFormRenderer } from '@jupyterlab/ui-components';
 import type { FieldProps } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
+import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 import { IAIProviderRegistry, IDict } from '../tokens';
 export declare const aiSettingsRenderer: (options: {
     providerRegistry: IAIProviderRegistry;
     rmRegistry?: IRenderMimeRegistry;
+    secretsManager?: ISecretsManager;
 }) => IFormRenderer;
 export interface ISettingsFormStates {
     schema: JSONSchema7;
@@ -14,6 +16,7 @@ export interface ISettingsFormStates {
 }
 export declare class AiSettings extends React.Component<FieldProps, ISettingsFormStates> {
     constructor(props: FieldProps);
+    componentDidUpdate(): Promise<void>;
     /**
      * Get the current provider from the local storage.
      */
@@ -30,6 +33,7 @@ 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 UI schema of the form.
      * Currently use to hide API keys.
@@ -53,6 +57,11 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
      * Update the Jupyterlab settings accordingly.
      */
     private _onProviderChanged;
+    /**
+     * Callback function called when the password input has been programmatically updated
+     * with the secret manager.
+     */
+    private _onPasswordUpdated;
     /**
      * Triggered when the form value has changed, to update the current settings and save
      * it in local storage.
@@ -63,8 +72,13 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
     private _providerRegistry;
     private _provider;
     private _providerSchema;
+    private _useSecretsManager;
     private _rmRegistry;
+    private _secretsManager;
     private _currentSettings;
     private _uiSchema;
     private _settings;
+    private _formRef;
+    private _unsavedFields;
+    private _formInputs;
 }

package/lib/settings/panel.js

@@ -1,8 +1,10 @@
 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';
-import baseSettings from './schemas/base.json';
+import baseSettings from './base.json';
+const SECRETS_NAMESPACE = '@jupyterlite/ai';
 const MD_MIME_TYPE = 'text/markdown';
 const STORAGE_NAME = '@jupyterlite/ai:settings';
 const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
@@ -19,8 +21,34 @@ const WrappedFormComponent = (props) => {
 };
 export class AiSettings extends React.Component {
     constructor(props) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         super(props);
+        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(SECRETS_NAMESPACE);
+                this._formInputs = [];
+                this._unsavedFields = [];
+                this.saveSettings(this._currentSettings);
+            }
+            else {
+                // Remove all the keys stored locally and attach the password inputs to the
+                // secrets manager.
+                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));
+                this.componentDidUpdate();
+            }
+        };
         /**
          * Triggered when the provider hes changed, to update the schema and values.
          * Update the Jupyterlab settings accordingly.
@@ -39,6 +67,16 @@ export class AiSettings extends React.Component {
                 .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.
@@ -53,12 +91,18 @@ export class AiSettings extends React.Component {
         };
         this._currentSettings = { provider: 'None' };
         this._uiSchema = {};
+        this._formRef = React.createRef();
+        this._unsavedFields = [];
+        this._formInputs = [];
         if (!props.formContext.providerRegistry) {
             throw new Error('The provider registry is needed to enable the jupyterlite-ai settings panel');
         }
         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._settings = props.formContext.settings;
+        this._useSecretsManager =
+            (_c = this._settings.get('UseSecretsManager').composite) !== null && _c !== void 0 ? _c : true;
         // Initialize the providers schema.
         const providerSchema = JSONExt.deepCopy(baseSettings);
         providerSchema.properties.provider = {
@@ -76,7 +120,7 @@ export class AiSettings extends React.Component {
             const labSettings = this._settings.get('AIprovider').composite;
             if (labSettings && Object.keys(labSettings).includes('provider')) {
                 // Get the provider name.
-                const provider = (_b = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _b === void 0 ? void 0 : _b[1];
+                const provider = (_d = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _d === void 0 ? void 0 : _d[1];
                 // Save the settings.
                 const settings = {
                     _current: provider
@@ -96,6 +140,37 @@ export class AiSettings extends React.Component {
         this._settings
             .set('AIprovider', this._currentSettings)
             .catch(console.error);
+        this._settings.changed.connect(() => {
+            var _a;
+            const useSecretsManager = (_a = this._settings.get('UseSecretsManager').composite) !== null && _a !== void 0 ? _a : true;
+            if (useSecretsManager !== this._useSecretsManager) {
+                this.updateUseSecretsManager(useSecretsManager);
+            }
+        });
+    }
+    async componentDidUpdate() {
+        var _a;
+        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;
+        }
+        await this._secretsManager.detachAll(SECRETS_NAMESPACE);
+        this._formInputs = [...inputs];
+        this._unsavedFields = [];
+        for (let i = 0; i < inputs.length; i++) {
+            if (inputs[i].type.toLowerCase() === 'password') {
+                const label = inputs[i].getAttribute('label');
+                if (label) {
+                    const id = `${this._provider}-${label}`;
+                    this._secretsManager.attach(SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
+                    this._unsavedFields.push(label);
+                }
+            }
+        }
     }
     /**
      * Get the current provider from the local storage.
@@ -126,8 +201,10 @@ export class AiSettings extends React.Component {
      */
     saveSettings(value) {
         var _a;
+        const currentSettings = { ...value };
         const settings = JSON.parse((_a = localStorage.getItem(STORAGE_NAME)) !== null && _a !== void 0 ? _a : '{}');
-        settings[this._provider] = value;
+        this._unsavedFields.forEach(field => delete currentSettings[field]);
+        settings[this._provider] = currentSettings;
         localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
     }
     /**
@@ -180,7 +257,7 @@ export class AiSettings extends React.Component {
         this.setState({ instruction: renderer.node });
     }
     render() {
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement("div", { ref: this._formRef },
             React.createElement(WrappedFormComponent, { formData: { provider: this._provider }, schema: this._providerSchema, onChange: this._onProviderChanged }),
             this.state.instruction !== null && (React.createElement("details", null,
                 React.createElement("summary", { className: INSTRUCTION_CLASS }, "Instructions"),

package/lib/tokens.d.ts

@@ -2,7 +2,7 @@ import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { ReadonlyPartialJSONObject, Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { JSONSchema7 } from 'json-schema';
-import { IBaseCompleter } from './llm-models';
+import { IBaseCompleter } from './base-completer';
 export interface IDict<T = any> {
     [key: string]: T;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -14,7 +14,7 @@
     "license": "BSD-3-Clause",
     "author": "JupyterLite Contributors",
     "files": [
-        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,md}",
         "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
         "src/**/*.{ts,tsx}",
         "schema/*.json"
@@ -27,9 +27,9 @@
         "url": "https://github.com/jupyterlite/ai.git"
     },
     "scripts": {
-        "build": "node ./scripts/settings-generator.js && jlpm build:lib && jlpm build:labextension:dev",
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
         "build:dev": "jlpm build:lib && jlpm build:labextension:dev",
-        "build:prod": "node ./scripts/settings-generator.js && jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:prod": "jlpm settings:build && jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
         "build:labextension": "jupyter labextension build .",
         "build:labextension:dev": "jupyter labextension build --development True .",
         "build:lib": "tsc --sourceMap",
@@ -47,6 +47,8 @@
         "prettier": "jlpm prettier:base --write --list-different",
         "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
         "prettier:check": "jlpm prettier:base --check",
+        "settings:build": "node ./scripts/settings-checker.js --generate",
+        "settings:check": "node ./scripts/settings-checker.js",
         "stylelint": "jlpm stylelint:check --fix",
         "stylelint:check": "stylelint --cache \"style/**/*.css\"",
         "watch": "run-p watch:src watch:labextension",
@@ -54,7 +56,7 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.7.1",
+        "@jupyter/chat": "^0.8.1",
         "@jupyterlab/application": "^4.4.0-alpha.0",
         "@jupyterlab/apputils": "^4.5.0-alpha.0",
         "@jupyterlab/completer": "^4.4.0-alpha.0",
@@ -75,6 +77,7 @@
         "@rjsf/core": "^4.2.0",
         "@rjsf/utils": "^5.18.4",
         "@rjsf/validator-ajv8": "^5.18.4",
+        "jupyter-secrets-manager": "^0.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },