@jupyterlite/ai 0.2.0 → 0.3.0

package/lib/llm-models/openai-completer.d.ts

@@ -0,0 +1,19 @@
+import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { BaseCompleter, IBaseCompleter } from './base-completer';
+export declare class OpenAICompleter implements IBaseCompleter {
+    constructor(options: BaseCompleter.IOptions);
+    get provider(): BaseChatModel;
+    /**
+     * Getter and setter for the initial prompt.
+     */
+    get prompt(): string;
+    set prompt(value: string);
+    fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<{
+        items: {
+            insertText: string;
+        }[];
+    }>;
+    private _openAIProvider;
+    private _prompt;
+}

package/lib/llm-models/openai-completer.js

@@ -0,0 +1,51 @@
+import { AIMessage, SystemMessage } from '@langchain/core/messages';
+import { ChatOpenAI } from '@langchain/openai';
+import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+export class OpenAICompleter {
+    constructor(options) {
+        this._prompt = COMPLETION_SYSTEM_PROMPT;
+        this._openAIProvider = new ChatOpenAI({ ...options.settings });
+    }
+    get provider() {
+        return this._openAIProvider;
+    }
+    /**
+     * Getter and setter for the initial prompt.
+     */
+    get prompt() {
+        return this._prompt;
+    }
+    set prompt(value) {
+        this._prompt = value;
+    }
+    async fetch(request, context) {
+        const { text, offset: cursorOffset } = request;
+        const prompt = text.slice(0, cursorOffset);
+        const messages = [new SystemMessage(this._prompt), new AIMessage(prompt)];
+        try {
+            const response = await this._openAIProvider.invoke(messages);
+            const items = [];
+            if (typeof response.content === 'string') {
+                items.push({
+                    insertText: response.content
+                });
+            }
+            else {
+                response.content.forEach(content => {
+                    if (content.type !== 'text') {
+                        return;
+                    }
+                    items.push({
+                        insertText: content.text,
+                        filterText: prompt.substring(prompt.length)
+                    });
+                });
+            }
+            return { items };
+        }
+        catch (error) {
+            console.error('Error fetching completions', error);
+            return { items: [] };
+        }
+    }
+}

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

@@ -13,3 +13,4 @@ export declare function getChatModel(name: string, settings: ReadonlyPartialJSON
  * 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,5 +1,15 @@
+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.
  */
@@ -7,6 +17,15 @@ 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;
 }
 /**
@@ -16,6 +35,17 @@ 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;
 }
 /**
@@ -25,5 +55,32 @@ 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/provider.d.ts

@@ -5,6 +5,8 @@ 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;
+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;
@@ -54,6 +56,15 @@ export declare namespace AIProvider {
          */
         requestCompletion: () => void;
     }
+    /**
+     * The options for the Chat system prompt.
+     */
+    interface IPromptOptions {
+        /**
+         * The provider name.
+         */
+        provider_name: string;
+    }
     /**
      * 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

package/lib/provider.js

@@ -1,6 +1,32 @@
 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}.
+You are talkative and you provide lots of specific details from the foundation model's context.
+You may use Markdown to format your response.
+If your response includes code, they must be enclosed in Markdown fenced code blocks (with triple backticks before and after).
+If your response includes mathematical notation, they must be expressed in LaTeX markup and enclosed in LaTeX delimiters.
+All dollar quantities (of USD) must be formatted in LaTeX, with the \`$\` symbol escaped by a single backslash \`\\\`.
+- Example prompt: \`If I have \\\\$100 and spend \\\\$20, how much money do I have left?\`
+- **Correct** response: \`You have \\(\\$80\\) remaining.\`
+- **Incorrect** response: \`You have $80 remaining.\`
+If you do not know the answer to a question, answer truthfully by responding that you do not know.
+The following is a friendly conversation between you and a human.
+`;
+export const COMPLETION_SYSTEM_PROMPT = `
+You are an application built to provide helpful code completion suggestions.
+You should only produce code. Keep comments to minimum, use the
+programming language comment syntax. Produce clean code.
+The code is written in JupyterLab, a data analysis and code development
+environment which can execute code extended with additional syntax for
+interactive features, such as magics.
+Only give raw strings back, do not format the response using backticks.
+The output should be a single string, and should correspond to what a human users
+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;

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.2.0",
+    "version": "0.3.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,29 @@
         "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",
+        "@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",
+        "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 +96,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 +112,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/ai-provider.json

@@ -1,6 +1,8 @@
 {
   "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": {
@@ -8,14 +10,8 @@
       "title": "The AI provider",
       "description": "The AI provider to use for chat and completion",
       "default": "None",
-      "enum": ["None", "MistralAI"]
-    },
-    "apiKey": {
-      "type": "string",
-      "title": "The Codestral API key",
-      "description": "The API key to use for Codestral",
-      "default": ""
+      "enum": ["None", "Anthropic", "ChromeAI", "MistralAI", "OpenAI"]
     }
   },
-  "additionalProperties": false
+  "additionalProperties": true
 }

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/src/chat-handler.ts

@@ -13,11 +13,21 @@ 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 { chatSystemPrompt } from './provider';
 import { IAIProvider } from './token';
+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';
@@ -28,8 +38,11 @@ export class ChatHandler extends ChatModel {
   constructor(options: ChatHandler.IOptions) {
     super(options);
     this._aiProvider = options.aiProvider;
+    this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
+
     this._aiProvider.modelChange.connect(() => {
       this._errorMessage = this._aiProvider.chatError;
+      this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
     });
   }
 
@@ -37,11 +50,45 @@ export class ChatHandler extends ChatModel {
     return this._aiProvider.chatModel;
   }
 
+  /**
+   * 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'
@@ -62,8 +109,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 +119,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._aiProvider.chatModel.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 = 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([]);
+    }
   }
 
   async getHistory(): Promise<IChatHistory> {
@@ -117,6 +172,8 @@ export class ChatHandler extends ChatModel {
   }
 
   private _aiProvider: IAIProvider;
+  private _personaName = 'AI';
+  private _prompt: string;
   private _errorMessage: string = '';
   private _history: IChatHistory = { messages: [] };
   private _defaultErrorMessage = 'AI provider not configured';

package/src/completion-provider.ts

@@ -3,10 +3,10 @@ import {
   IInlineCompletionContext,
   IInlineCompletionProvider
 } from '@jupyterlab/completer';
-import { LLM } from '@langchain/core/language_models/llms';
+import { BaseLanguageModel } from '@langchain/core/language_models/base';
+import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 import { getCompleter, IBaseCompleter, BaseCompleter } from './llm-models';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 /**
  * The generic completion provider to register to the completion provider manager.
@@ -57,7 +57,7 @@ export class CompletionProvider implements IInlineCompletionProvider {
   /**
    * Get the LLM completer.
    */
-  get llmCompleter(): LLM | null {
+  get llmCompleter(): BaseLanguageModel | null {
     return this._completer?.provider || null;
   }