@jupyterlite/ai 0.5.0 → 0.6.1

package/lib/settings/panel.js

@@ -3,12 +3,19 @@ import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
+import { getSecretId, SettingConnector } from '.';
 import baseSettings from './base.json';
-const SECRETS_NAMESPACE = '@jupyterlite/ai';
+import { PLUGIN_IDS } from '../tokens';
 const MD_MIME_TYPE = 'text/markdown';
 const STORAGE_NAME = '@jupyterlite/ai:settings';
 const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
+const SECRETS_NAMESPACE = PLUGIN_IDS.providerRegistry;
 export const aiSettingsRenderer = (options) => {
+    const { secretsToken } = options;
+    delete options.secretsToken;
+    if (secretsToken) {
+        Private.setToken(secretsToken);
+    }
     return {
         fieldRenderer: (props) => {
             props.formContext = { ...props.formContext, ...options };
@@ -21,7 +28,7 @@ const WrappedFormComponent = (props) => {
 };
 export class AiSettings extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         super(props);
         this.updateUseSecretsManager = (value) => {
             var _a;
@@ -29,9 +36,12 @@ export class AiSettings extends React.Component {
             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.
-                (_a = this._secretsManager) === null || _a === void 0 ? void 0 : _a.detachAll(SECRETS_NAMESPACE);
+                (_a = this._secretsManager) === null || _a === void 0 ? void 0 : _a.detachAll(Private.getToken(), SECRETS_NAMESPACE);
                 this._formInputs = [];
                 this._unsavedFields = [];
+                if (this._settingConnector instanceof SettingConnector) {
+                    this._settingConnector.doNotSave = [];
+                }
                 this.saveSettings(this._currentSettings);
             }
             else {
@@ -48,6 +58,9 @@ export class AiSettings extends React.Component {
                 localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
                 this.componentDidUpdate();
             }
+            this._settings
+                .set('AIprovider', { provider: this._provider, ...this._currentSettings })
+                .catch(console.error);
         };
         /**
          * Triggered when the provider hes changed, to update the schema and values.
@@ -100,9 +113,12 @@ export class AiSettings extends React.Component {
         this._providerRegistry = props.formContext.providerRegistry;
         this._rmRegistry = (_a = props.formContext.rmRegistry) !== null && _a !== void 0 ? _a : null;
         this._secretsManager = (_b = props.formContext.secretsManager) !== null && _b !== void 0 ? _b : null;
+        this._settingConnector = (_c = props.formContext.settingConnector) !== null && _c !== void 0 ? _c : null;
         this._settings = props.formContext.settings;
         this._useSecretsManager =
-            (_c = this._settings.get('UseSecretsManager').composite) !== null && _c !== void 0 ? _c : true;
+            (_d = this._settings.get('UseSecretsManager').composite) !== null && _d !== void 0 ? _d : true;
+        this._hideSecretFields =
+            (_e = this._settings.get('HideSecretFields').composite) !== null && _e !== void 0 ? _e : true;
         // Initialize the providers schema.
         const providerSchema = JSONExt.deepCopy(baseSettings);
         providerSchema.properties.provider = {
@@ -120,7 +136,7 @@ export class AiSettings extends React.Component {
             const labSettings = this._settings.get('AIprovider').composite;
             if (labSettings && Object.keys(labSettings).includes('provider')) {
                 // Get the provider name.
-                const provider = (_d = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _d === void 0 ? void 0 : _d[1];
+                const provider = (_f = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _f === void 0 ? void 0 : _f[1];
                 // Save the settings.
                 const settings = {
                     _current: provider
@@ -141,11 +157,16 @@ export class AiSettings extends React.Component {
             .set('AIprovider', this._currentSettings)
             .catch(console.error);
         this._settings.changed.connect(() => {
-            var _a;
+            var _a, _b;
             const useSecretsManager = (_a = this._settings.get('UseSecretsManager').composite) !== null && _a !== void 0 ? _a : true;
             if (useSecretsManager !== this._useSecretsManager) {
                 this.updateUseSecretsManager(useSecretsManager);
             }
+            const hideSecretFields = (_b = this._settings.get('HideSecretFields').composite) !== null && _b !== void 0 ? _b : true;
+            if (hideSecretFields !== this._hideSecretFields) {
+                this._hideSecretFields = hideSecretFields;
+                this._updateSchema();
+            }
         });
     }
     async componentDidUpdate() {
@@ -158,19 +179,28 @@ export class AiSettings extends React.Component {
         if (ArrayExt.shallowEqual(inputs, this._formInputs)) {
             return;
         }
-        await this._secretsManager.detachAll(SECRETS_NAMESPACE);
+        await this._secretsManager.detachAll(Private.getToken(), 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) => this._onPasswordUpdated(label, value));
+                    const id = getSecretId(this._provider, label);
+                    this._secretsManager.attach(Private.getToken(), SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
                     this._unsavedFields.push(label);
                 }
             }
         }
+        if (this._settingConnector instanceof SettingConnector) {
+            this._settingConnector.doNotSave = this._unsavedFields;
+        }
+    }
+    componentWillUnmount() {
+        if (!this._secretsManager || !this._useSecretsManager) {
+            return;
+        }
+        this._secretsManager.detachAll(Private.getToken(), SECRETS_NAMESPACE);
     }
     /**
      * Get the current provider from the local storage.
@@ -207,15 +237,6 @@ export class AiSettings extends React.Component {
         settings[this._provider] = currentSettings;
         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.
      */
@@ -225,8 +246,13 @@ export class AiSettings extends React.Component {
         const settingsSchema = this._providerRegistry.getSettingsSchema(this._provider);
         if (settingsSchema) {
             Object.entries(settingsSchema).forEach(([key, value]) => {
+                if (key.toLowerCase().includes('key')) {
+                    if (this._hideSecretFields) {
+                        return;
+                    }
+                    this._uiSchema[key] = { 'ui:widget': 'password' };
+                }
                 schema.properties[key] = value;
-                this._updateUiSchema(key);
             });
         }
         return schema;
@@ -265,3 +291,24 @@ export class AiSettings extends React.Component {
             React.createElement(WrappedFormComponent, { formData: this._currentSettings, schema: this.state.schema, onChange: this._onFormChange, uiSchema: this._uiSchema })));
     }
 }
+var Private;
+(function (Private) {
+    /**
+     * The token to use with the secrets manager.
+     */
+    let secretsToken;
+    /**
+     * Set of the token.
+     */
+    function setToken(value) {
+        secretsToken = value;
+    }
+    Private.setToken = setToken;
+    /**
+     * get the token.
+     */
+    function getToken() {
+        return secretsToken;
+    }
+    Private.getToken = getToken;
+})(Private || (Private = {}));

package/lib/settings/settings-connector.d.ts

@@ -0,0 +1,31 @@
+import { ISettingConnector, ISettingRegistry } from '@jupyterlab/settingregistry';
+import { DataConnector, IDataConnector } from '@jupyterlab/statedb';
+/**
+ * A data connector for fetching settings.
+ *
+ * #### Notes
+ * This connector adds a query parameter to the base services setting manager.
+ */
+export declare class SettingConnector extends DataConnector<ISettingRegistry.IPlugin, string> implements ISettingConnector {
+    constructor(connector: IDataConnector<ISettingRegistry.IPlugin, string>);
+    set doNotSave(fields: string[]);
+    /**
+     * Fetch settings for a plugin.
+     * @param id - The plugin ID
+     *
+     * #### Notes
+     * The REST API requests are throttled at one request per plugin per 100ms.
+     */
+    fetch(id: string): Promise<ISettingRegistry.IPlugin | undefined>;
+    list(query: 'ids'): Promise<{
+        ids: string[];
+    }>;
+    list(query: 'active' | 'all'): Promise<{
+        ids: string[];
+        values: ISettingRegistry.IPlugin[];
+    }>;
+    save(id: string, raw: string): Promise<void>;
+    private _connector;
+    private _doNotSave;
+    private _throttlers;
+}

package/lib/settings/settings-connector.js

@@ -0,0 +1,61 @@
+import { PageConfig } from '@jupyterlab/coreutils';
+import { DataConnector } from '@jupyterlab/statedb';
+import { Throttler } from '@lumino/polling';
+import * as json5 from 'json5';
+import { SECRETS_REPLACEMENT } from '.';
+/**
+ * A data connector for fetching settings.
+ *
+ * #### Notes
+ * This connector adds a query parameter to the base services setting manager.
+ */
+export class SettingConnector extends DataConnector {
+    constructor(connector) {
+        super();
+        this._doNotSave = [];
+        this._throttlers = Object.create(null);
+        this._connector = connector;
+    }
+    set doNotSave(fields) {
+        this._doNotSave = [...fields];
+    }
+    /**
+     * Fetch settings for a plugin.
+     * @param id - The plugin ID
+     *
+     * #### Notes
+     * The REST API requests are throttled at one request per plugin per 100ms.
+     */
+    fetch(id) {
+        const throttlers = this._throttlers;
+        if (!(id in throttlers)) {
+            throttlers[id] = new Throttler(() => this._connector.fetch(id), 100);
+        }
+        return throttlers[id].invoke();
+    }
+    async list(query = 'all') {
+        const { isDisabled } = PageConfig.Extension;
+        const { ids, values } = await this._connector.list(query === 'ids' ? 'ids' : undefined);
+        if (query === 'all') {
+            return { ids, values };
+        }
+        if (query === 'ids') {
+            return { ids };
+        }
+        return {
+            ids: ids.filter(id => !isDisabled(id)),
+            values: values.filter(({ id }) => !isDisabled(id))
+        };
+    }
+    async save(id, raw) {
+        const settings = json5.parse(raw);
+        this._doNotSave.forEach(field => {
+            if (settings['AIprovider'] !== undefined &&
+                settings['AIprovider'][field] !== undefined &&
+                settings['AIprovider'][field] !== '') {
+                settings['AIprovider'][field] = SECRETS_REPLACEMENT;
+            }
+        });
+        await this._connector.save(id, json5.stringify(settings, null, 2));
+    }
+}

package/lib/settings/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const SECRETS_REPLACEMENT = "***";
+export declare function getSecretId(provider: string, label: string): string;

package/lib/settings/utils.js

@@ -0,0 +1,4 @@
+export const SECRETS_REPLACEMENT = '***';
+export function getSecretId(provider, label) {
+    return `${provider}-${label}`;
+}

package/lib/tokens.d.ts

@@ -3,6 +3,13 @@ import { ReadonlyPartialJSONObject, Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { JSONSchema7 } from 'json-schema';
 import { IBaseCompleter } from './base-completer';
+export declare const PLUGIN_IDS: {
+    chat: string;
+    chatCommandRegistry: string;
+    completer: string;
+    providerRegistry: string;
+    settingsConnector: string;
+};
 export interface IDict<T = any> {
     [key: string]: T;
 }
@@ -80,10 +87,9 @@ export interface IAIProviderRegistry {
      * 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.
+     * @param options - an object with the name and the settings of the provider to use.
      */
-    setProvider(name: string, settings: ReadonlyPartialJSONObject): void;
+    setProvider(options: ISetProviderOptions): void;
     /**
      * A signal emitting when the provider or its settings has changed.
      */
@@ -97,6 +103,19 @@ export interface IAIProviderRegistry {
      */
     readonly completerError: string;
 }
+/**
+ * The set provider options.
+ */
+export interface ISetProviderOptions {
+    /**
+     * The name of the provider.
+     */
+    name: string;
+    /**
+     * The settings of the provider.
+     */
+    settings: ReadonlyPartialJSONObject;
+}
 /**
  * The provider registry token.
  */

package/lib/tokens.js

@@ -1,4 +1,11 @@
 import { Token } from '@lumino/coreutils';
+export const PLUGIN_IDS = {
+    chat: '@jupyterlite/ai:chat',
+    chatCommandRegistry: '@jupyterlite/ai:autocompletion-registry',
+    completer: '@jupyterlite/ai:completer',
+    providerRegistry: '@jupyterlite/ai:provider-registry',
+    settingsConnector: '@jupyterlite/ai:settings-connector'
+};
 /**
  * The provider registry token.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.5.0",
+    "version": "0.6.1",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -56,14 +56,15 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.8.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",
+        "@jupyter/chat": "^0.9.0",
+        "@jupyterlab/application": "^4.4.0",
+        "@jupyterlab/apputils": "^4.5.0",
+        "@jupyterlab/completer": "^4.4.0",
+        "@jupyterlab/coreutils": "^6.4.0",
+        "@jupyterlab/notebook": "^4.4.0",
+        "@jupyterlab/rendermime": "^4.4.0",
+        "@jupyterlab/settingregistry": "^4.4.0",
+        "@jupyterlab/ui-components": "^4.4.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
         "@langchain/core": "^0.3.40",
@@ -77,12 +78,13 @@
         "@rjsf/core": "^4.2.0",
         "@rjsf/utils": "^5.18.4",
         "@rjsf/validator-ajv8": "^5.18.4",
-        "jupyter-secrets-manager": "^0.1.1",
+        "json5": "^2.2.3",
+        "jupyter-secrets-manager": "^0.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/builder": "^4.4.0",
         "@stylistic/eslint-plugin": "^3.0.1",
         "@types/json-schema": "^7.0.11",
         "@types/react": "^18.0.26",
@@ -118,6 +120,9 @@
     "jupyterlab": {
         "extension": true,
         "outputDir": "jupyterlite_ai/labextension",
-        "schemaDir": "schema"
+        "schemaDir": "schema",
+        "disabledExtensions": [
+            "@jupyterlab/apputils-extension:settings-connector"
+        ]
     }
 }

package/schema/provider-registry.json

@@ -11,6 +11,12 @@
       "description": "Whether to use or not the secrets manager. If not, secrets will be stored in the browser (local storage)",
       "default": true
     },
+    "HideSecretFields": {
+      "type": "boolean",
+      "title": "Hide secret fields",
+      "description": "Whether to hide the secret fields in the UI or not",
+      "default": true
+    },
     "AIprovider": {
       "type": "object",
       "title": "AI provider",

package/src/chat-handler.ts

@@ -139,9 +139,11 @@ export class ChatHandler extends ChatModel {
 
     let content = '';
 
+    this._controller = new AbortController();
     try {
       for await (const chunk of await this._providerRegistry.currentChatModel.stream(
-        messages
+        messages,
+        { signal: this._controller.signal }
       )) {
         content += chunk.content ?? chunk;
         botMsg.body = content;
@@ -162,6 +164,7 @@ export class ChatHandler extends ChatModel {
       return false;
     } finally {
       this.updateWriters([]);
+      this._controller = null;
     }
   }
 
@@ -177,12 +180,17 @@ export class ChatHandler extends ChatModel {
     super.messageAdded(message);
   }
 
+  stopStreaming(): void {
+    this._controller?.abort();
+  }
+
   private _providerRegistry: IAIProviderRegistry;
   private _personaName = 'AI';
   private _prompt: string;
   private _errorMessage: string = '';
   private _history: IChatHistory = { messages: [] };
   private _defaultErrorMessage = 'AI provider not configured';
+  private _controller: AbortController | null = null;
 }
 
 export namespace ChatHandler {

package/src/completion-provider.ts

@@ -51,7 +51,14 @@ export class CompletionProvider implements IInlineCompletionProvider {
 
 export namespace CompletionProvider {
   export interface IOptions {
+    /**
+     * The registry where the completion provider belongs.
+     */
     providerRegistry: IAIProviderRegistry;
+    /**
+     * The request completion commands, can be useful if a provider needs to request
+     * the completion by itself.
+     */
     requestCompletion: () => void;
   }
 }

package/src/components/stop-button.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import StopIcon from '@mui/icons-material/Stop';
+import React from 'react';
+
+import { InputToolbarRegistry, TooltippedButton } from '@jupyter/chat';
+
+/**
+ * Properties of the stop button.
+ */
+export interface IStopButtonProps
+  extends InputToolbarRegistry.IToolbarItemProps {
+  /**
+   * The function to stop streaming.
+   */
+  stopStreaming: () => void;
+}
+
+/**
+ * The stop button.
+ */
+export function StopButton(props: IStopButtonProps): JSX.Element {
+  const tooltip = 'Stop streaming';
+  return (
+    <TooltippedButton
+      onClick={props.stopStreaming}
+      tooltip={tooltip}
+      buttonProps={{
+        size: 'small',
+        variant: 'contained',
+        title: tooltip
+      }}
+    >
+      <StopIcon />
+    </TooltippedButton>
+  );
+}
+
+/**
+ * factory returning the toolbar item.
+ */
+export function stopItem(
+  stopStreaming: () => void
+): InputToolbarRegistry.IToolbarItem {
+  return {
+    element: (props: InputToolbarRegistry.IToolbarItemProps) => {
+      const stopProps: IStopButtonProps = { ...props, stopStreaming };
+      return StopButton(stopProps);
+    },
+    position: 50,
+    hidden: true /* hidden by default */
+  };
+}