@jupyterlite/ai 0.2.0 → 0.4.0

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

@@ -0,0 +1,16 @@
+/**
+ * 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

@@ -0,0 +1,25 @@
+/**
+ * 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/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.2.0",
+    "version": "0.4.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -27,8 +27,9 @@
         "url": "https://github.com/jupyterlite/ai.git"
     },
     "scripts": {
-        "build": "jlpm build:lib && jlpm build:labextension:dev",
-        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build": "node ./scripts/settings-generator.js && jlpm build:lib && jlpm build:labextension:dev",
+        "build:dev": "jlpm build:lib && jlpm build:labextension:dev",
+        "build:prod": "node ./scripts/settings-generator.js && jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
         "build:labextension": "jupyter labextension build .",
         "build:labextension:dev": "jupyter labextension build --development True .",
         "build:lib": "tsc --sourceMap",
@@ -53,21 +54,33 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.5.0",
-        "@jupyterlab/application": "^4.2.0",
-        "@jupyterlab/apputils": "^4.3.0",
-        "@jupyterlab/completer": "^4.2.0",
-        "@jupyterlab/notebook": "^4.2.0",
-        "@jupyterlab/rendermime": "^4.2.0",
-        "@jupyterlab/settingregistry": "^4.2.0",
-        "@langchain/core": "^0.3.13",
+        "@jupyter/chat": "^0.7.1",
+        "@jupyterlab/application": "^4.4.0-alpha.0",
+        "@jupyterlab/apputils": "^4.5.0-alpha.0",
+        "@jupyterlab/completer": "^4.4.0-alpha.0",
+        "@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",
         "@langchain/mistralai": "^0.1.1",
+        "@langchain/openai": "^0.4.4",
         "@lumino/coreutils": "^2.1.2",
         "@lumino/polling": "^2.1.2",
-        "@lumino/signaling": "^2.1.2"
+        "@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"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
+        "@stylistic/eslint-plugin": "^3.0.1",
         "@types/json-schema": "^7.0.11",
         "@types/react": "^18.0.26",
         "@types/react-addons-linked-state-mixin": "^0.14.22",
@@ -87,7 +100,8 @@
         "stylelint-config-standard": "^34.0.0",
         "stylelint-csstree-validator": "^3.0.0",
         "stylelint-prettier": "^4.0.0",
-        "typescript": "~5.0.2",
+        "ts-json-schema-generator": "^2.3.0",
+        "typescript": "~5.1.6",
         "yjs": "^13.5.0"
     },
     "sideEffects": [
@@ -102,96 +116,5 @@
         "extension": true,
         "outputDir": "jupyterlite_ai/labextension",
         "schemaDir": "schema"
-    },
-    "eslintIgnore": [
-        "node_modules",
-        "dist",
-        "coverage",
-        "**/*.d.ts"
-    ],
-    "eslintConfig": {
-        "extends": [
-            "eslint:recommended",
-            "plugin:@typescript-eslint/eslint-recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:prettier/recommended"
-        ],
-        "parser": "@typescript-eslint/parser",
-        "parserOptions": {
-            "project": "tsconfig.json",
-            "sourceType": "module"
-        },
-        "plugins": [
-            "@typescript-eslint"
-        ],
-        "rules": {
-            "@typescript-eslint/naming-convention": [
-                "error",
-                {
-                    "selector": "interface",
-                    "format": [
-                        "PascalCase"
-                    ],
-                    "custom": {
-                        "regex": "^I[A-Z]",
-                        "match": true
-                    }
-                }
-            ],
-            "@typescript-eslint/no-unused-vars": [
-                "warn",
-                {
-                    "args": "none"
-                }
-            ],
-            "@typescript-eslint/no-explicit-any": "off",
-            "@typescript-eslint/no-namespace": "off",
-            "@typescript-eslint/no-use-before-define": "off",
-            "@typescript-eslint/quotes": [
-                "error",
-                "single",
-                {
-                    "avoidEscape": true,
-                    "allowTemplateLiterals": false
-                }
-            ],
-            "curly": [
-                "error",
-                "all"
-            ],
-            "eqeqeq": "error",
-            "prefer-arrow-callback": "error"
-        }
-    },
-    "prettier": {
-        "singleQuote": true,
-        "trailingComma": "none",
-        "arrowParens": "avoid",
-        "endOfLine": "auto",
-        "overrides": [
-            {
-                "files": "package.json",
-                "options": {
-                    "tabWidth": 4
-                }
-            }
-        ]
-    },
-    "stylelint": {
-        "extends": [
-            "stylelint-config-recommended",
-            "stylelint-config-standard",
-            "stylelint-prettier/recommended"
-        ],
-        "plugins": [
-            "stylelint-csstree-validator"
-        ],
-        "rules": {
-            "csstree/validator": true,
-            "property-no-vendor-prefix": null,
-            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
-            "selector-no-vendor-prefix": null,
-            "value-no-vendor-prefix": null
-        }
     }
 }

package/schema/chat.json

@@ -1,6 +1,8 @@
 {
   "title": "Chat configuration",
   "description": "Configuration for the chat panel",
+  "jupyter.lab.setting-icon": "jupyter-chat::chat",
+  "jupyter.lab.setting-icon-label": "Jupyter Chat",
   "type": "object",
   "properties": {
     "sendWithShiftEnter": {
@@ -14,6 +16,12 @@
       "type": "boolean",
       "default": true,
       "readOnly": false
+    },
+    "personaName": {
+      "type": "string",
+      "title": "AI persona name",
+      "description": "The name of the AI persona",
+      "default": "Jupyternaut"
     }
   },
   "additionalProperties": false

package/schema/provider-registry.json

@@ -0,0 +1,17 @@
+{
+  "title": "AI provider",
+  "description": "Provider registry settings",
+  "jupyter.lab.setting-icon": "@jupyterlite/ai:jupyternaut-lite",
+  "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
+  "type": "object",
+  "properties": {
+    "AIprovider": {
+      "type": "object",
+      "title": "AI provider",
+      "description": "The AI provider configuration",
+      "default": {},
+      "additionalProperties": true
+    }
+  },
+  "additionalProperties": false
+}

package/src/chat-handler.ts

@@ -13,11 +13,20 @@ import type { BaseChatModel } from '@langchain/core/language_models/chat_models'
 import {
   AIMessage,
   HumanMessage,
-  mergeMessageRuns
+  mergeMessageRuns,
+  SystemMessage
 } from '@langchain/core/messages';
 import { UUID } from '@lumino/coreutils';
-import { getErrorMessage } from './llm-models';
-import { IAIProvider } from './token';
+import { chatSystemPrompt } from './provider';
+import { IAIProviderRegistry } from './tokens';
+import { jupyternautLiteIcon } from './icons';
+
+/**
+ * The base64 encoded SVG string of the jupyternaut lite icon.
+ * Encode so it can be passed as avatar_url to jupyter-chat.
+ */
+const AI_AVATAR_BASE64 = btoa(jupyternautLiteIcon.svgstr);
+const AI_AVATAR = `data:image/svg+xml;base64,${AI_AVATAR_BASE64}`;
 
 export type ConnectionMessage = {
   type: 'connection';
@@ -27,28 +36,69 @@ export type ConnectionMessage = {
 export class ChatHandler extends ChatModel {
   constructor(options: ChatHandler.IOptions) {
     super(options);
-    this._aiProvider = options.aiProvider;
-    this._aiProvider.modelChange.connect(() => {
-      this._errorMessage = this._aiProvider.chatError;
+    this._providerRegistry = options.providerRegistry;
+    this._prompt = chatSystemPrompt({
+      provider_name: this._providerRegistry.currentName
+    });
+
+    this._providerRegistry.providerChanged.connect(() => {
+      this._errorMessage = this._providerRegistry.chatError;
+      this._prompt = chatSystemPrompt({
+        provider_name: this._providerRegistry.currentName
+      });
     });
   }
 
   get provider(): BaseChatModel | null {
-    return this._aiProvider.chatModel;
+    return this._providerRegistry.currentChatModel;
+  }
+
+  /**
+   * Getter and setter for the persona name.
+   */
+  get personaName(): string {
+    return this._personaName;
+  }
+  set personaName(value: string) {
+    this.messages.forEach(message => {
+      if (message.sender.username === this._personaName) {
+        const updated: IChatMessage = { ...message };
+        updated.sender.username = value;
+        this.messageAdded(updated);
+      }
+    });
+    this._personaName = value;
+  }
+
+  /**
+   * Getter and setter for the initial prompt.
+   */
+  get prompt(): string {
+    return this._prompt;
+  }
+  set prompt(value: string) {
+    this._prompt = value;
   }
 
   async sendMessage(message: INewMessage): Promise<boolean> {
+    const body = message.body;
+    if (body.startsWith('/clear')) {
+      // TODO: do we need a clear method?
+      this.messagesDeleted(0, this.messages.length);
+      this._history.messages = [];
+      return false;
+    }
     message.id = UUID.uuid4();
     const msg: IChatMessage = {
       id: message.id,
-      body: message.body,
+      body,
       sender: { username: 'User' },
       time: Date.now(),
       type: 'msg'
     };
     this.messageAdded(msg);
 
-    if (this._aiProvider.chatModel === null) {
+    if (this._providerRegistry.currentChatModel === null) {
       const errorMsg: IChatMessage = {
         id: UUID.uuid4(),
         body: `**${this._errorMessage ? this._errorMessage : this._defaultErrorMessage}**`,
@@ -62,8 +112,9 @@ export class ChatHandler extends ChatModel {
 
     this._history.messages.push(msg);
 
-    const messages = mergeMessageRuns(
-      this._history.messages.map(msg => {
+    const messages = mergeMessageRuns([new SystemMessage(this._prompt)]);
+    messages.push(
+      ...this._history.messages.map(msg => {
         if (msg.sender.username === 'User') {
           return new HumanMessage(msg.body);
         }
@@ -71,37 +122,44 @@ export class ChatHandler extends ChatModel {
       })
     );
 
-    this.updateWriters([{ username: 'AI' }]);
-    return this._aiProvider.chatModel
-      .invoke(messages)
-      .then(response => {
-        const content = response.content;
-        const botMsg: IChatMessage = {
-          id: UUID.uuid4(),
-          body: content.toString(),
-          sender: { username: 'AI' },
-          time: Date.now(),
-          type: 'msg'
-        };
+    const sender = { username: this._personaName, avatar_url: AI_AVATAR };
+    this.updateWriters([sender]);
+
+    // create an empty message to be filled by the AI provider
+    const botMsg: IChatMessage = {
+      id: UUID.uuid4(),
+      body: '',
+      sender,
+      time: Date.now(),
+      type: 'msg'
+    };
+
+    let content = '';
+
+    try {
+      for await (const chunk of await this._providerRegistry.currentChatModel.stream(
+        messages
+      )) {
+        content += chunk.content ?? chunk;
+        botMsg.body = content;
         this.messageAdded(botMsg);
-        this._history.messages.push(botMsg);
-        return true;
-      })
-      .catch(reason => {
-        const error = getErrorMessage(this._aiProvider.name, reason);
-        const errorMsg: IChatMessage = {
-          id: UUID.uuid4(),
-          body: `**${error}**`,
-          sender: { username: 'ERROR' },
-          time: Date.now(),
-          type: 'msg'
-        };
-        this.messageAdded(errorMsg);
-        return false;
-      })
-      .finally(() => {
-        this.updateWriters([]);
-      });
+      }
+      this._history.messages.push(botMsg);
+      return true;
+    } catch (reason) {
+      const error = this._providerRegistry.formatErrorMessage(reason);
+      const errorMsg: IChatMessage = {
+        id: UUID.uuid4(),
+        body: `**${error}**`,
+        sender: { username: 'ERROR' },
+        time: Date.now(),
+        type: 'msg'
+      };
+      this.messageAdded(errorMsg);
+      return false;
+    } finally {
+      this.updateWriters([]);
+    }
   }
 
   async getHistory(): Promise<IChatHistory> {
@@ -116,7 +174,9 @@ export class ChatHandler extends ChatModel {
     super.messageAdded(message);
   }
 
-  private _aiProvider: IAIProvider;
+  private _providerRegistry: IAIProviderRegistry;
+  private _personaName = 'AI';
+  private _prompt: string;
   private _errorMessage: string = '';
   private _history: IChatHistory = { messages: [] };
   private _defaultErrorMessage = 'AI provider not configured';
@@ -124,6 +184,6 @@ export class ChatHandler extends ChatModel {
 
 export namespace ChatHandler {
   export interface IOptions extends ChatModel.IOptions {
-    aiProvider: IAIProvider;
+    providerRegistry: IAIProviderRegistry;
   }
 }