@jupyterlite/ai 0.3.0 → 0.5.0

package/src/settings/panel.tsx

@@ -0,0 +1,346 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
+import { JSONExt } from '@lumino/coreutils';
+import { IChangeEvent } from '@rjsf/core';
+import type { FieldProps } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+import { JSONSchema7 } from 'json-schema';
+import { ISecretsManager } from 'jupyter-secrets-manager';
+import React from 'react';
+
+import baseSettings from './base.json';
+import { IAIProviderRegistry, IDict } from '../tokens';
+
+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: {
+  providerRegistry: IAIProviderRegistry;
+  rmRegistry?: IRenderMimeRegistry;
+  secretsManager?: ISecretsManager;
+}): IFormRenderer => {
+  return {
+    fieldRenderer: (props: FieldProps) => {
+      props.formContext = { ...props.formContext, ...options };
+      return <AiSettings {...props} />;
+    }
+  };
+};
+
+export interface ISettingsFormStates {
+  schema: JSONSchema7;
+  instruction: HTMLElement | null;
+}
+
+const WrappedFormComponent = (props: any): JSX.Element => {
+  return <FormComponent {...props} validator={validator} />;
+};
+
+export class AiSettings extends React.Component<
+  FieldProps,
+  ISettingsFormStates
+> {
+  constructor(props: FieldProps) {
+    super(props);
+    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 = props.formContext.rmRegistry ?? null;
+    this._secretsManager = props.formContext.secretsManager ?? null;
+    this._settings = props.formContext.settings;
+
+    this._useSecretsManager =
+      (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
+
+    // Initialize the providers schema.
+    const providerSchema = JSONExt.deepCopy(baseSettings) as any;
+    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 as JSONSchema7;
+
+    // Check if there is saved values in local storage, otherwise use the settings from
+    // the setting registry (led to default if there are no user settings).
+    const storageSettings = localStorage.getItem(STORAGE_NAME);
+    if (storageSettings === null) {
+      const labSettings = this._settings.get('AIprovider').composite;
+      if (labSettings && Object.keys(labSettings).includes('provider')) {
+        // Get the provider name.
+        const provider = Object.entries(labSettings).find(
+          v => v[0] === 'provider'
+        )?.[1] as string;
+        // Save the settings.
+        const settings: any = {
+          _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(() => {
+      const useSecretsManager =
+        (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
+      if (useSecretsManager !== this._useSecretsManager) {
+        this.updateUseSecretsManager(useSecretsManager);
+      }
+    });
+  }
+
+  async componentDidUpdate(): Promise<void> {
+    if (!this._secretsManager || !this._useSecretsManager) {
+      return;
+    }
+    // Attach the password inputs to the secrets manager only if they have changed.
+    const inputs = this._formRef.current?.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: string) => this._onPasswordUpdated(label, value)
+          );
+          this._unsavedFields.push(label);
+        }
+      }
+    }
+  }
+
+  /**
+   * Get the current provider from the local storage.
+   */
+  getCurrentProvider(): string {
+    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+    return settings['_current'] ?? 'None';
+  }
+
+  /**
+   * Save the current provider to the local storage.
+   */
+  saveCurrentProvider(): void {
+    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+    settings['_current'] = this._provider;
+    localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+  }
+
+  /**
+   * Get settings from local storage for a given provider.
+   */
+  getSettings(): IDict<any> {
+    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) || '{}');
+    return settings[this._provider] ?? { provider: this._provider };
+  }
+
+  /**
+   * Save settings in local storage for a given provider.
+   */
+  saveSettings(value: IDict<any>) {
+    const currentSettings = { ...value };
+    const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) ?? '{}');
+    this._unsavedFields.forEach(field => delete currentSettings[field]);
+    settings[this._provider] = currentSettings;
+    localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+  }
+
+  private updateUseSecretsManager = (value: boolean) => {
+    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(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();
+    }
+  };
+
+  /**
+   * Update the UI schema of the form.
+   * Currently use to hide API keys.
+   */
+  private _updateUiSchema(key: string) {
+    if (key.toLowerCase().includes('key')) {
+      this._uiSchema[key] = { 'ui:widget': 'password' };
+    }
+  }
+
+  /**
+   * Build the schema for a given provider.
+   */
+  private _buildSchema(): JSONSchema7 {
+    const schema = JSONExt.deepCopy(baseSettings) as any;
+    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 as JSONSchema7;
+  }
+
+  /**
+   * Update the schema state for the given provider, that trigger the re-rendering of
+   * the component.
+   */
+  private _updateSchema() {
+    const schema = this._buildSchema();
+    this.setState({ schema });
+  }
+
+  /**
+   * Render the markdown instructions for the current provider.
+   */
+  private async _renderInstruction(): Promise<void> {
+    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 });
+  }
+
+  /**
+   * Triggered when the provider hes changed, to update the schema and values.
+   * Update the Jupyterlab settings accordingly.
+   */
+  private _onProviderChanged = (e: IChangeEvent) => {
+    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.
+   */
+  private _onPasswordUpdated = (fieldName: string, value: string) => {
+    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.
+   */
+  private _onFormChange = (e: IChangeEvent) => {
+    this._currentSettings = JSONExt.deepCopy(e.formData);
+    this.saveSettings(this._currentSettings);
+    this._settings
+      .set('AIprovider', { provider: this._provider, ...this._currentSettings })
+      .catch(console.error);
+  };
+
+  render(): JSX.Element {
+    return (
+      <div ref={this._formRef}>
+        <WrappedFormComponent
+          formData={{ provider: this._provider }}
+          schema={this._providerSchema}
+          onChange={this._onProviderChanged}
+        />
+        {this.state.instruction !== null && (
+          <details>
+            <summary className={INSTRUCTION_CLASS}>Instructions</summary>
+            <span
+              ref={node =>
+                node && node.replaceChildren(this.state.instruction!)
+              }
+            />
+          </details>
+        )}
+        <WrappedFormComponent
+          formData={this._currentSettings}
+          schema={this.state.schema}
+          onChange={this._onFormChange}
+          uiSchema={this._uiSchema}
+        />
+      </div>
+    );
+  }
+
+  private _providerRegistry: IAIProviderRegistry;
+  private _provider: string;
+  private _providerSchema: JSONSchema7;
+  private _useSecretsManager: boolean;
+  private _rmRegistry: IRenderMimeRegistry | null;
+  private _secretsManager: ISecretsManager | null;
+  private _currentSettings: IDict<any> = { provider: 'None' };
+  private _uiSchema: IDict<any> = {};
+  private _settings: ISettingRegistry.ISettings;
+  private _formRef = React.createRef<HTMLDivElement>();
+  private _unsavedFields: string[] = [];
+  private _formInputs: HTMLInputElement[] = [];
+}

package/src/tokens.ts

@@ -0,0 +1,112 @@
+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 './base-completer';
+
+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 const IAIProviderRegistry = new Token<IAIProviderRegistry>(
+  '@jupyterlite/ai:provider-registry',
+  'Provider for chat and completion LLM provider'
+);

package/style/base.css

@@ -5,3 +5,7 @@
 */
 
 @import url('@jupyter/chat/style/index.css');
+
+.jp-AISettingsInstructions {
+  font-size: var(--jp-content-font-size1);
+}

package/lib/llm-models/index.d.ts

@@ -1,3 +0,0 @@
-export * from './base-completer';
-export * from './codestral-completer';
-export * from './utils';

package/lib/llm-models/index.js

@@ -1,3 +0,0 @@
-export * from './base-completer';
-export * from './codestral-completer';
-export * from './utils';

package/lib/llm-models/utils.d.ts

@@ -1,16 +0,0 @@
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { IBaseCompleter } from './base-completer';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-/**
- * Get an LLM completer from the name.
- */
-export declare function getCompleter(name: string, settings: ReadonlyPartialJSONObject): IBaseCompleter | null;
-/**
- * Get an LLM chat model from the name.
- */
-export declare function getChatModel(name: string, settings: ReadonlyPartialJSONObject): BaseChatModel | null;
-/**
- * Get the error message from provider.
- */
-export declare function getErrorMessage(name: string, error: any): string;
-export declare function getSettings(name: string): any;

package/lib/llm-models/utils.js

@@ -1,86 +0,0 @@
-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 { AnthropicCompleter } from './anthropic-completer';
-import { CodestralCompleter } from './codestral-completer';
-import { ChromeCompleter } from './chrome-completer';
-import { OpenAICompleter } from './openai-completer';
-import chromeAI from '../_provider-settings/chromeAI.json';
-import mistralAI from '../_provider-settings/mistralAI.json';
-import anthropic from '../_provider-settings/anthropic.json';
-import openAI from '../_provider-settings/openAI.json';
-/**
- * Get an LLM completer from the name.
- */
-export function getCompleter(name, settings) {
-    if (name === 'MistralAI') {
-        return new CodestralCompleter({ settings });
-    }
-    else if (name === 'Anthropic') {
-        return new AnthropicCompleter({ settings });
-    }
-    else if (name === 'ChromeAI') {
-        return new ChromeCompleter({ settings });
-    }
-    else if (name === 'OpenAI') {
-        return new OpenAICompleter({ settings });
-    }
-    return null;
-}
-/**
- * Get an LLM chat model from the name.
- */
-export function getChatModel(name, settings) {
-    if (name === 'MistralAI') {
-        return new ChatMistralAI({ ...settings });
-    }
-    else if (name === 'Anthropic') {
-        return new ChatAnthropic({ ...settings });
-    }
-    else if (name === 'ChromeAI') {
-        // TODO: fix
-        // @ts-expect-error: missing properties
-        return new ChromeAI({ ...settings });
-    }
-    else if (name === 'OpenAI') {
-        return new ChatOpenAI({ ...settings });
-    }
-    return null;
-}
-/**
- * Get the error message from provider.
- */
-export function getErrorMessage(name, error) {
-    if (name === 'MistralAI') {
-        return error.message;
-    }
-    else if (name === 'Anthropic') {
-        return error.error.error.message;
-    }
-    else if (name === 'ChromeAI') {
-        return error.message;
-    }
-    else if (name === 'OpenAI') {
-        return error.message;
-    }
-    return 'Unknown provider';
-}
-/*
- * Get an LLM completer from the name.
- */
-export function getSettings(name) {
-    if (name === 'MistralAI') {
-        return mistralAI.properties;
-    }
-    else if (name === 'Anthropic') {
-        return anthropic.properties;
-    }
-    else if (name === 'ChromeAI') {
-        return chromeAI.properties;
-    }
-    else if (name === 'OpenAI') {
-        return openAI.properties;
-    }
-    return null;
-}

package/lib/slash-commands.d.ts

@@ -1,16 +0,0 @@
-/**
- * TODO: reuse from Jupyter AI instead of copying?
- * https://github.com/jupyterlab/jupyter-ai/blob/main/packages/jupyter-ai/src/slash-autocompletion.tsx
- */
-/// <reference types="react-addons-linked-state-mixin" />
-import { AutocompleteCommand } from '@jupyter/chat';
-import React from 'react';
-type SlashCommandOption = AutocompleteCommand & {
-    id: string;
-    description: string;
-};
-/**
- * Renders an option shown in the slash command autocomplete.
- */
-export declare function renderSlashCommandOption(optionProps: React.HTMLAttributes<HTMLLIElement>, option: SlashCommandOption): JSX.Element;
-export {};

package/lib/slash-commands.js

@@ -1,25 +0,0 @@
-/**
- * TODO: reuse from Jupyter AI instead of copying?
- * https://github.com/jupyterlab/jupyter-ai/blob/main/packages/jupyter-ai/src/slash-autocompletion.tsx
- */
-import { Box, Typography } from '@mui/material';
-import HideSource from '@mui/icons-material/HideSource';
-import React from 'react';
-const DEFAULT_SLASH_COMMAND_ICONS = {
-    clear: React.createElement(HideSource, null)
-};
-/**
- * Renders an option shown in the slash command autocomplete.
- */
-export function renderSlashCommandOption(optionProps, option) {
-    const icon = option.id in DEFAULT_SLASH_COMMAND_ICONS
-        ? DEFAULT_SLASH_COMMAND_ICONS[option.id]
-        : DEFAULT_SLASH_COMMAND_ICONS.unknown;
-    return (React.createElement("li", { ...optionProps },
-        React.createElement(Box, { sx: { lineHeight: 0, marginRight: 4, opacity: 0.618 } }, icon),
-        React.createElement(Box, { sx: { flexGrow: 1 } },
-            React.createElement(Typography, { component: "span", sx: {
-                    fontSize: 'var(--jp-ui-font-size1)'
-                } }, option.label),
-            React.createElement(Typography, { component: "span", sx: { opacity: 0.618, fontSize: 'var(--jp-ui-font-size0)' } }, ' — ' + option.description))));
-}

package/lib/token.d.ts

@@ -1,13 +0,0 @@
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { Token } from '@lumino/coreutils';
-import { ISignal } from '@lumino/signaling';
-import { IBaseCompleter } from './llm-models';
-export interface IAIProvider {
-    name: string;
-    completer: IBaseCompleter | null;
-    chatModel: BaseChatModel | null;
-    modelChange: ISignal<IAIProvider, void>;
-    chatError: string;
-    completerError: string;
-}
-export declare const IAIProvider: Token<IAIProvider>;

package/lib/token.js

@@ -1,2 +0,0 @@
-import { Token } from '@lumino/coreutils';
-export const IAIProvider = new Token('@jupyterlite/ai:AIProvider', 'Provider for chat and completion LLM provider');

package/schema/ai-provider.json

@@ -1,17 +0,0 @@
-{
-  "title": "AI provider",
-  "description": "Provider settings",
-  "jupyter.lab.setting-icon": "@jupyterlite/ai:jupyternaut-lite",
-  "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
-  "type": "object",
-  "properties": {
-    "provider": {
-      "type": "string",
-      "title": "The AI provider",
-      "description": "The AI provider to use for chat and completion",
-      "default": "None",
-      "enum": ["None", "Anthropic", "ChromeAI", "MistralAI", "OpenAI"]
-    }
-  },
-  "additionalProperties": true
-}

package/src/llm-models/index.ts

@@ -1,3 +0,0 @@
-export * from './base-completer';
-export * from './codestral-completer';
-export * from './utils';