@jupyterlite/ai 0.3.0 → 0.4.0

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/instructions.d.ts

@@ -0,0 +1,2 @@
+import { IDict } from '../tokens';
+export declare const instructions: IDict;

package/lib/settings/instructions.js

@@ -0,0 +1,44 @@
+const chromeAiInstructions = `
+<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
+`;
+const mistralAIInstructions = `
+<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">
+`;
+export const instructions = {
+    ChromeAI: chromeAiInstructions,
+    MistralAI: mistralAIInstructions
+};

package/lib/settings/panel.d.ts

@@ -0,0 +1,70 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IFormRenderer } from '@jupyterlab/ui-components';
+import type { FieldProps } from '@rjsf/utils';
+import { JSONSchema7 } from 'json-schema';
+import React from 'react';
+import { IAIProviderRegistry, IDict } from '../tokens';
+export declare const aiSettingsRenderer: (options: {
+    providerRegistry: IAIProviderRegistry;
+    rmRegistry?: IRenderMimeRegistry;
+}) => IFormRenderer;
+export interface ISettingsFormStates {
+    schema: JSONSchema7;
+    instruction: HTMLElement | null;
+}
+export declare class AiSettings extends React.Component<FieldProps, ISettingsFormStates> {
+    constructor(props: FieldProps);
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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 _rmRegistry;
+    private _currentSettings;
+    private _uiSchema;
+    private _settings;
+}

package/lib/settings/panel.js

@@ -0,0 +1,190 @@
+import { FormComponent } from '@jupyterlab/ui-components';
+import { JSONExt } from '@lumino/coreutils';
+import validator from '@rjsf/validator-ajv8';
+import React from 'react';
+import baseSettings from './schemas/base.json';
+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;
+        super(props);
+        /**
+         * 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);
+        };
+        /**
+         * 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 = {};
+        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._settings = props.formContext.settings;
+        // 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 = (_b = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _b === void 0 ? void 0 : _b[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);
+    }
+    /**
+     * 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 settings = JSON.parse((_a = localStorage.getItem(STORAGE_NAME)) !== null && _a !== void 0 ? _a : '{}');
+        settings[this._provider] = value;
+        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(React.Fragment, null,
+            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 })));
+    }
+}

package/lib/settings/schemas/base.json

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

package/lib/settings/schemas/index.d.ts

@@ -0,0 +1,3 @@
+import { IDict } from '../../tokens';
+declare const ProviderSettings: IDict<any>;
+export { ProviderSettings };

package/lib/settings/schemas/index.js

@@ -0,0 +1,11 @@
+import ChromeAI from './_generated/ChromeAI.json';
+import MistralAI from './_generated/MistralAI.json';
+import Anthropic from './_generated/Anthropic.json';
+import OpenAI from './_generated/OpenAI.json';
+const ProviderSettings = {
+    ChromeAI,
+    MistralAI,
+    Anthropic,
+    OpenAI
+};
+export { ProviderSettings };

package/lib/tokens.d.ts

@@ -0,0 +1,103 @@
+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';
+export interface IDict<T = any> {
+    [key: string]: T;
+}
+export interface IType<T> {
+    new (...args: any[]): T;
+}
+/**
+ * The provider interface.
+ */
+export interface IAIProvider {
+    /**
+     * The name of the provider.
+     */
+    name: string;
+    /**
+     * The chat model class to use.
+     */
+    chatModel?: IType<BaseChatModel>;
+    /**
+     * The completer class to use.
+     */
+    completer?: IType<IBaseCompleter>;
+    /**
+     * the settings schema for the provider.
+     */
+    settingsSchema?: any;
+    /**
+     * The instructions to be displayed in the settings, as helper to use the provider.
+     * A markdown renderer is used to render the instructions.
+     */
+    instructions?: string;
+    /**
+     * A function that extract the error message from the provider API error.
+     * Default to `(error) => error.message`.
+     */
+    errorMessage?: (error: any) => string;
+}
+/**
+ * The provider registry interface.
+ */
+export interface IAIProviderRegistry {
+    /**
+     * Get the list of provider names.
+     */
+    readonly providers: string[];
+    /**
+     * Add a new provider.
+     */
+    add(provider: IAIProvider): void;
+    /**
+     * Get the current provider name.
+     */
+    currentName: string;
+    /**
+     * Get the current completer of the completion provider.
+     */
+    currentCompleter: IBaseCompleter | null;
+    /**
+     * Get the current llm chat model.
+     */
+    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;
+    /**
+     * 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 provider to use.
+     * @param settings - the settings for the models.
+     */
+    setProvider(name: string, settings: ReadonlyPartialJSONObject): void;
+    /**
+     * A signal emitting when the provider or its settings has changed.
+     */
+    readonly providerChanged: ISignal<IAIProviderRegistry, void>;
+    /**
+     * Get the current chat error;
+     */
+    readonly chatError: string;
+    /**
+     * get the current completer error.
+     */
+    readonly completerError: string;
+}
+/**
+ * The provider registry token.
+ */
+export declare const IAIProviderRegistry: Token<IAIProviderRegistry>;

package/lib/tokens.js

@@ -0,0 +1,5 @@
+import { Token } from '@lumino/coreutils';
+/**
+ * The provider registry token.
+ */
+export const IAIProviderRegistry = new Token('@jupyterlite/ai:provider-registry', 'Provider for chat and completion LLM provider');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -61,6 +61,7 @@
         "@jupyterlab/notebook": "^4.4.0-alpha.0",
         "@jupyterlab/rendermime": "^4.4.0-alpha.0",
         "@jupyterlab/settingregistry": "^4.4.0-alpha.0",
+        "@jupyterlab/ui-components": "^4.4.0-alpha.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
         "@langchain/core": "^0.3.40",
@@ -71,6 +72,9 @@
         "@lumino/signaling": "^2.1.2",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.0",
+        "@rjsf/core": "^4.2.0",
+        "@rjsf/utils": "^5.18.4",
+        "@rjsf/validator-ajv8": "^5.18.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },