@jupyterlite/ai 0.3.0 → 0.4.0

package/src/settings/panel.tsx

@@ -0,0 +1,257 @@
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
+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 React from 'react';
+
+import baseSettings from './schemas/base.json';
+import { IAIProviderRegistry, IDict } from '../tokens';
+
+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;
+}): 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._settings = props.formContext.settings;
+
+    // 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);
+  }
+
+  /**
+   * 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 settings = JSON.parse(localStorage.getItem(STORAGE_NAME) ?? '{}');
+    settings[this._provider] = value;
+    localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
+  }
+
+  /**
+   * 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);
+  };
+
+  /**
+   * 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 (
+      <>
+        <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}
+        />
+      </>
+    );
+  }
+
+  private _providerRegistry: IAIProviderRegistry;
+  private _provider: string;
+  private _providerSchema: JSONSchema7;
+  private _rmRegistry: IRenderMimeRegistry | null;
+  private _currentSettings: IDict<any> = { provider: 'None' };
+  private _uiSchema: IDict<any> = {};
+  private _settings: ISettingRegistry.ISettings;
+}

package/src/settings/schemas/index.ts

@@ -0,0 +1,15 @@
+import { IDict } from '../../tokens';
+
+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: IDict<any> = {
+  ChromeAI,
+  MistralAI,
+  Anthropic,
+  OpenAI
+};
+
+export { ProviderSettings };

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 './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 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/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/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/utils.ts

@@ -1,90 +0,0 @@
-import { ChatAnthropic } from '@langchain/anthropic';
-import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { ChatMistralAI } from '@langchain/mistralai';
-import { ChatOpenAI } from '@langchain/openai';
-
-import { IBaseCompleter } from './base-completer';
-import { AnthropicCompleter } from './anthropic-completer';
-import { CodestralCompleter } from './codestral-completer';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-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: string,
-  settings: ReadonlyPartialJSONObject
-): IBaseCompleter | null {
-  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: string,
-  settings: ReadonlyPartialJSONObject
-): BaseChatModel | null {
-  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: string, error: any): string {
-  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: string): any {
-  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/src/token.ts

@@ -1,19 +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 const IAIProvider = new Token<IAIProvider>(
-  '@jupyterlite/ai:AIProvider',
-  'Provider for chat and completion LLM provider'
-);