@jupyterlite/ai 0.3.0 → 0.5.0

package/lib/provider.d.ts

@@ -3,21 +3,44 @@ 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 { IAIProvider } from './token';
-export declare const chatSystemPrompt: (options: AIProvider.IPromptOptions) => string;
+import { IBaseCompleter } from './base-completer';
+import { IAIProvider, IAIProviderRegistry } from './tokens';
+import { JSONSchema7 } from 'json-schema';
+export declare const chatSystemPrompt: (options: AIProviderRegistry.IPromptOptions) => string;
 export declare const COMPLETION_SYSTEM_PROMPT = "\nYou are an application built to provide helpful code completion suggestions.\nYou should only produce code. Keep comments to minimum, use the\nprogramming language comment syntax. Produce clean code.\nThe code is written in JupyterLab, a data analysis and code development\nenvironment which can execute code extended with additional syntax for\ninteractive features, such as magics.\nOnly give raw strings back, do not format the response using backticks.\nThe output should be a single string, and should correspond to what a human users\nwould write.\nDo not include the prompt in the output, only the string that should be appended to the current input.\n";
-export declare class AIProvider implements IAIProvider {
-    constructor(options: AIProvider.IOptions);
-    get name(): string;
+export declare class AIProviderRegistry implements IAIProviderRegistry {
+    /**
+     * Get the list of provider names.
+     */
+    get providers(): string[];
+    /**
+     * Add a new provider.
+     */
+    add(provider: IAIProvider): void;
+    /**
+     * Get the current provider name.
+     */
+    get currentName(): string;
     /**
      * Get the current completer of the completion provider.
      */
-    get completer(): IBaseCompleter | null;
+    get currentCompleter(): IBaseCompleter | null;
     /**
      * Get the current llm chat model.
      */
-    get chatModel(): BaseChatModel | null;
+    get currentChatModel(): BaseChatModel | null;
+    /**
+     * Get the settings schema of a given provider.
+     */
+    getSettingsSchema(provider: string): JSONSchema7;
+    /**
+     * Get the instructions of a given provider.
+     */
+    getInstructions(provider: string): string | undefined;
+    /**
+     * Format an error message from the current provider.
+     */
+    formatErrorMessage(error: any): string;
     /**
      * Get the current chat error;
      */
@@ -27,22 +50,27 @@ export declare class AIProvider implements IAIProvider {
      */
     get completerError(): string;
     /**
-     * Set the models (chat model and completer).
-     * Creates the models if the name has changed, otherwise only updates their config.
+     * Set the providers (chat model and completer).
+     * Creates the providers if the name has changed, otherwise only updates their config.
      *
-     * @param name - the name of the model to use.
+     * @param name - the name of the provider to use.
      * @param settings - the settings for the models.
      */
-    setModels(name: string, settings: ReadonlyPartialJSONObject): void;
-    get modelChange(): ISignal<IAIProvider, void>;
-    private _completionProvider;
-    private _llmChatModel;
+    setProvider(name: string, settings: ReadonlyPartialJSONObject): void;
+    /**
+     * A signal emitting when the provider or its settings has changed.
+     */
+    get providerChanged(): ISignal<IAIProviderRegistry, void>;
+    private _currentProvider;
+    private _completer;
+    private _chatModel;
     private _name;
-    private _modelChange;
+    private _providerChanged;
     private _chatError;
     private _completerError;
+    private _providers;
 }
-export declare namespace AIProvider {
+export declare namespace AIProviderRegistry {
     /**
      * The options for the LLM provider.
      */

package/lib/provider.js

@@ -1,6 +1,4 @@
 import { Signal } from '@lumino/signaling';
-import { CompletionProvider } from './completion-provider';
-import { getChatModel } from './llm-models';
 export const chatSystemPrompt = (options) => `
 You are Jupyternaut, a conversational assistant living in JupyterLab to help users.
 You are not a language model, but rather an application built on a foundation model from ${options.provider_name}.
@@ -27,40 +25,83 @@ The output should be a single string, and should correspond to what a human user
 would write.
 Do not include the prompt in the output, only the string that should be appended to the current input.
 `;
-export class AIProvider {
-    constructor(options) {
-        this._llmChatModel = null;
+export class AIProviderRegistry {
+    constructor() {
+        this._currentProvider = null;
+        this._completer = null;
+        this._chatModel = null;
         this._name = 'None';
-        this._modelChange = new Signal(this);
+        this._providerChanged = new Signal(this);
         this._chatError = '';
         this._completerError = '';
-        this._completionProvider = new CompletionProvider({
-            name: 'None',
-            settings: {},
-            requestCompletion: options.requestCompletion
-        });
-        options.completionProviderManager.registerInlineProvider(this._completionProvider);
+        this._providers = new Map();
+    }
+    /**
+     * Get the list of provider names.
+     */
+    get providers() {
+        return Array.from(this._providers.keys());
+    }
+    /**
+     * Add a new provider.
+     */
+    add(provider) {
+        if (this._providers.has(provider.name)) {
+            throw new Error(`A AI provider named '${provider.name}' is already registered`);
+        }
+        this._providers.set(provider.name, provider);
     }
-    get name() {
+    /**
+     * Get the current provider name.
+     */
+    get currentName() {
         return this._name;
     }
     /**
      * Get the current completer of the completion provider.
      */
-    get completer() {
-        if (this._name === null) {
+    get currentCompleter() {
+        if (this._name === 'None') {
             return null;
         }
-        return this._completionProvider.completer;
+        return this._completer;
     }
     /**
      * Get the current llm chat model.
      */
-    get chatModel() {
-        if (this._name === null) {
+    get currentChatModel() {
+        if (this._name === 'None') {
             return null;
         }
-        return this._llmChatModel;
+        return this._chatModel;
+    }
+    /**
+     * Get the settings schema of a given provider.
+     */
+    getSettingsSchema(provider) {
+        var _a, _b;
+        return (((_b = (_a = this._providers.get(provider)) === null || _a === void 0 ? void 0 : _a.settingsSchema) === null || _b === void 0 ? void 0 : _b.properties) ||
+            {});
+    }
+    /**
+     * Get the instructions of a given provider.
+     */
+    getInstructions(provider) {
+        var _a;
+        return (_a = this._providers.get(provider)) === null || _a === void 0 ? void 0 : _a.instructions;
+    }
+    /**
+     * Format an error message from the current provider.
+     */
+    formatErrorMessage(error) {
+        var _a, _b;
+        if ((_a = this._currentProvider) === null || _a === void 0 ? void 0 : _a.errorMessage) {
+            return (_b = this._currentProvider) === null || _b === void 0 ? void 0 : _b.errorMessage(error);
+        }
+        if (error.message) {
+            return error.message;
+        }
+        return error;
     }
     /**
      * Get the current chat error;
@@ -75,36 +116,51 @@ export class AIProvider {
         return this._completerError;
     }
     /**
-     * Set the models (chat model and completer).
-     * Creates the models if the name has changed, otherwise only updates their config.
+     * Set the providers (chat model and completer).
+     * Creates the providers if the name has changed, otherwise only updates their config.
      *
-     * @param name - the name of the model to use.
+     * @param name - the name of the provider to use.
      * @param settings - the settings for the models.
      */
-    setModels(name, settings) {
-        try {
-            this._completionProvider.setCompleter(name, settings);
-            this._completerError = '';
+    setProvider(name, settings) {
+        var _a, _b, _c;
+        this._currentProvider = (_a = this._providers.get(name)) !== null && _a !== void 0 ? _a : null;
+        if (((_b = this._currentProvider) === null || _b === void 0 ? void 0 : _b.completer) !== undefined) {
+            try {
+                this._completer = new this._currentProvider.completer({ ...settings });
+                this._completerError = '';
+            }
+            catch (e) {
+                this._completerError = e.message;
+            }
         }
-        catch (e) {
-            this._completerError = e.message;
+        else {
+            this._completer = null;
         }
-        try {
-            this._llmChatModel = getChatModel(name, settings);
-            this._chatError = '';
+        if (((_c = this._currentProvider) === null || _c === void 0 ? void 0 : _c.chatModel) !== undefined) {
+            try {
+                this._chatModel = new this._currentProvider.chatModel({ ...settings });
+                this._chatError = '';
+            }
+            catch (e) {
+                this._chatError = e.message;
+                this._chatModel = null;
+            }
         }
-        catch (e) {
-            this._chatError = e.message;
-            this._llmChatModel = null;
+        else {
+            this._chatModel = null;
         }
         this._name = name;
-        this._modelChange.emit();
+        this._providerChanged.emit();
     }
-    get modelChange() {
-        return this._modelChange;
+    /**
+     * A signal emitting when the provider or its settings has changed.
+     */
+    get providerChanged() {
+        return this._providerChanged;
     }
 }
-(function (AIProvider) {
+(function (AIProviderRegistry) {
     /**
      * This function indicates whether a key is writable in an object.
      * https://stackoverflow.com/questions/54724875/can-we-check-whether-property-is-readonly-in-typescript
@@ -119,7 +175,7 @@ export class AIProvider {
             {};
         return Boolean(desc.writable);
     }
-    AIProvider.isWritable = isWritable;
+    AIProviderRegistry.isWritable = isWritable;
     /**
      * Update the config of a language model.
      * It only updates the writable attributes of the model.
@@ -139,5 +195,5 @@ export class AIProvider {
             }
         });
     }
-    AIProvider.updateConfig = updateConfig;
-})(AIProvider || (AIProvider = {}));
+    AIProviderRegistry.updateConfig = updateConfig;
+})(AIProviderRegistry || (AIProviderRegistry = {}));

package/lib/settings/base.json

@@ -0,0 +1,7 @@
+{
+    "title": "AI provider",
+    "description": "Provider settings",
+    "type": "object",
+    "properties": {},
+    "additionalProperties": false
+}

package/lib/settings/panel.d.ts

@@ -0,0 +1,84 @@
+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;
+    instruction: HTMLElement | null;
+}
+export declare class AiSettings extends React.Component<FieldProps, ISettingsFormStates> {
+    constructor(props: FieldProps);
+    componentDidUpdate(): Promise<void>;
+    /**
+     * Get the current provider from the local storage.
+     */
+    getCurrentProvider(): string;
+    /**
+     * Save the current provider to the local storage.
+     */
+    saveCurrentProvider(): void;
+    /**
+     * Get settings from local storage for a given provider.
+     */
+    getSettings(): IDict<any>;
+    /**
+     * 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.
+     */
+    private _updateUiSchema;
+    /**
+     * Build the schema for a given provider.
+     */
+    private _buildSchema;
+    /**
+     * Update the schema state for the given provider, that trigger the re-rendering of
+     * the component.
+     */
+    private _updateSchema;
+    /**
+     * Render the markdown instructions for the current provider.
+     */
+    private _renderInstruction;
+    /**
+     * Triggered when the provider hes changed, to update the schema and values.
+     * 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.
+     * Update the Jupyterlab settings accordingly.
+     */
+    private _onFormChange;
+    render(): JSX.Element;
+    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

@@ -0,0 +1,267 @@
+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 './base.json';
+const SECRETS_NAMESPACE = '@jupyterlite/ai';
+const MD_MIME_TYPE = 'text/markdown';
+const STORAGE_NAME = '@jupyterlite/ai:settings';
+const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
+export const aiSettingsRenderer = (options) => {
+    return {
+        fieldRenderer: (props) => {
+            props.formContext = { ...props.formContext, ...options };
+            return React.createElement(AiSettings, { ...props });
+        }
+    };
+};
+const WrappedFormComponent = (props) => {
+    return React.createElement(FormComponent, { ...props, validator: validator });
+};
+export class AiSettings extends React.Component {
+    constructor(props) {
+        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.
+         */
+        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._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 = {
+            type: 'string',
+            title: 'Provider',
+            description: 'The AI provider to use for chat and completion',
+            default: 'None',
+            enum: ['None'].concat(this._providerRegistry.providers)
+        };
+        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);
+        if (storageSettings === null) {
+            const labSettings = this._settings.get('AIprovider').composite;
+            if (labSettings && Object.keys(labSettings).includes('provider')) {
+                // Get the provider name.
+                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
+                };
+                settings[provider] = labSettings;
+                localStorage.setItem(STORAGE_NAME, JSON.stringify(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 };
+        this._renderInstruction();
+        // Update the setting registry.
+        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.
+     */
+    getCurrentProvider() {
+        var _a;
+        const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+        return (_a = settings['_current']) !== null && _a !== void 0 ? _a : '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));
+    }
+    /**
+     * Get settings from local storage for a given 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 };
+    }
+    /**
+     * 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 : '{}');
+        this._unsavedFields.forEach(field => delete currentSettings[field]);
+        settings[this._provider] = currentSettings;
+        localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+    }
+    /**
+     * Update the UI schema of the form.
+     * Currently use to hide API keys.
+     */
+    _updateUiSchema(key) {
+        if (key.toLowerCase().includes('key')) {
+            this._uiSchema[key] = { 'ui:widget': 'password' };
+        }
+    }
+    /**
+     * Build the schema for a given provider.
+     */
+    _buildSchema() {
+        const schema = JSONExt.deepCopy(baseSettings);
+        this._uiSchema = {};
+        const settingsSchema = this._providerRegistry.getSettingsSchema(this._provider);
+        if (settingsSchema) {
+            Object.entries(settingsSchema).forEach(([key, value]) => {
+                schema.properties[key] = value;
+                this._updateUiSchema(key);
+            });
+        }
+        return schema;
+    }
+    /**
+     * Update the schema state for the given provider, that trigger the re-rendering of
+     * the component.
+     */
+    _updateSchema() {
+        const schema = this._buildSchema();
+        this.setState({ schema });
+    }
+    /**
+     * Render the markdown instructions for the current provider.
+     */
+    async _renderInstruction() {
+        let instructions = this._providerRegistry.getInstructions(this._provider);
+        if (!this._rmRegistry || !instructions) {
+            this.setState({ instruction: null });
+            return;
+        }
+        instructions = `---\n\n${instructions}\n\n---`;
+        const renderer = this._rmRegistry.createRenderer(MD_MIME_TYPE);
+        const model = this._rmRegistry.createModel({
+            data: { [MD_MIME_TYPE]: instructions }
+        });
+        await renderer.renderModel(model);
+        this.setState({ instruction: renderer.node });
+    }
+    render() {
+        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"),
+                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 })));
+    }
+}