@jupyterlite/ai 0.4.0 → 0.6.0

package/lib/provider.js

@@ -1,4 +1,5 @@
 import { Signal } from '@lumino/signaling';
+import { getSecretId, SECRETS_NAMESPACE, SECRETS_REPLACEMENT } from './settings';
 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}.
@@ -26,7 +27,10 @@ would write.
 Do not include the prompt in the output, only the string that should be appended to the current input.
 `;
 export class AIProviderRegistry {
-    constructor() {
+    /**
+     * The constructor of the provider registry.
+     */
+    constructor(options) {
         this._currentProvider = null;
         this._completer = null;
         this._chatModel = null;
@@ -35,6 +39,8 @@ export class AIProviderRegistry {
         this._chatError = '';
         this._completerError = '';
         this._providers = new Map();
+        this._deferredProvider = null;
+        this._secretsManager = options.secretsManager || null;
     }
     /**
      * Get the list of provider names.
@@ -46,10 +52,15 @@ export class AIProviderRegistry {
      * Add a new provider.
      */
     add(provider) {
+        var _a;
         if (this._providers.has(provider.name)) {
             throw new Error(`A AI provider named '${provider.name}' is already registered`);
         }
         this._providers.set(provider.name, provider);
+        // Set the provider if the loading has been deferred.
+        if (provider.name === ((_a = this._deferredProvider) === null || _a === void 0 ? void 0 : _a.name)) {
+            this.setProvider(this._deferredProvider);
+        }
     }
     /**
      * Get the current provider name.
@@ -119,15 +130,36 @@ export class AIProviderRegistry {
      * 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, settings) {
-        var _a, _b, _c;
+    async setProvider(options) {
+        var _a, _b, _c, _d;
+        const { name, settings } = options;
         this._currentProvider = (_a = this._providers.get(name)) !== null && _a !== void 0 ? _a : null;
-        if (((_b = this._currentProvider) === null || _b === void 0 ? void 0 : _b.completer) !== undefined) {
+        if (this._currentProvider === null) {
+            // The current provider may not be loaded when the settings are first loaded.
+            // Let's defer the provider loading.
+            this._deferredProvider = options;
+        }
+        else {
+            this._deferredProvider = null;
+        }
+        // Build a new settings object containing the secrets.
+        const fullSettings = {};
+        for (const key of Object.keys(settings)) {
+            if (settings[key] === SECRETS_REPLACEMENT) {
+                const id = getSecretId(name, key);
+                const secrets = await ((_b = this._secretsManager) === null || _b === void 0 ? void 0 : _b.get(SECRETS_NAMESPACE, id));
+                fullSettings[key] = (secrets === null || secrets === void 0 ? void 0 : secrets.value) || settings[key];
+                continue;
+            }
+            fullSettings[key] = settings[key];
+        }
+        if (((_c = this._currentProvider) === null || _c === void 0 ? void 0 : _c.completer) !== undefined) {
             try {
-                this._completer = new this._currentProvider.completer({ ...settings });
+                this._completer = new this._currentProvider.completer({
+                    ...fullSettings
+                });
                 this._completerError = '';
             }
             catch (e) {
@@ -137,9 +169,11 @@ export class AIProviderRegistry {
         else {
             this._completer = null;
         }
-        if (((_c = this._currentProvider) === null || _c === void 0 ? void 0 : _c.chatModel) !== undefined) {
+        if (((_d = this._currentProvider) === null || _d === void 0 ? void 0 : _d.chatModel) !== undefined) {
             try {
-                this._chatModel = new this._currentProvider.chatModel({ ...settings });
+                this._chatModel = new this._currentProvider.chatModel({
+                    ...fullSettings
+                });
                 this._chatError = '';
             }
             catch (e) {

package/lib/settings/index.d.ts

@@ -0,0 +1,3 @@
+export * from './panel';
+export * from './settings-connector';
+export * from './utils';

package/lib/settings/index.js

@@ -0,0 +1,3 @@
+export * from './panel';
+export * from './settings-connector';
+export * from './utils';

package/lib/settings/panel.d.ts

@@ -1,12 +1,16 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingConnector } from '@jupyterlab/settingregistry';
 import { IFormRenderer } from '@jupyterlab/ui-components';
 import type { FieldProps } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
+import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 import { IAIProviderRegistry, IDict } from '../tokens';
 export declare const aiSettingsRenderer: (options: {
     providerRegistry: IAIProviderRegistry;
     rmRegistry?: IRenderMimeRegistry;
+    secretsManager?: ISecretsManager;
+    settingConnector?: ISettingConnector;
 }) => IFormRenderer;
 export interface ISettingsFormStates {
     schema: JSONSchema7;
@@ -14,6 +18,7 @@ export interface ISettingsFormStates {
 }
 export declare class AiSettings extends React.Component<FieldProps, ISettingsFormStates> {
     constructor(props: FieldProps);
+    componentDidUpdate(): Promise<void>;
     /**
      * Get the current provider from the local storage.
      */
@@ -30,6 +35,7 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
      * Save settings in local storage for a given provider.
      */
     saveSettings(value: IDict<any>): void;
+    private updateUseSecretsManager;
     /**
      * Update the UI schema of the form.
      * Currently use to hide API keys.
@@ -53,6 +59,11 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
      * Update the Jupyterlab settings accordingly.
      */
     private _onProviderChanged;
+    /**
+     * Callback function called when the password input has been programmatically updated
+     * with the secret manager.
+     */
+    private _onPasswordUpdated;
     /**
      * Triggered when the form value has changed, to update the current settings and save
      * it in local storage.
@@ -63,8 +74,14 @@ export declare class AiSettings extends React.Component<FieldProps, ISettingsFor
     private _providerRegistry;
     private _provider;
     private _providerSchema;
+    private _useSecretsManager;
     private _rmRegistry;
+    private _secretsManager;
+    private _settingConnector;
     private _currentSettings;
     private _uiSchema;
     private _settings;
+    private _formRef;
+    private _unsavedFields;
+    private _formInputs;
 }

package/lib/settings/panel.js

@@ -1,8 +1,10 @@
 import { FormComponent } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import validator from '@rjsf/validator-ajv8';
 import React from 'react';
-import baseSettings from './schemas/base.json';
+import { getSecretId, SECRETS_NAMESPACE, SettingConnector } from '.';
+import baseSettings from './base.json';
 const MD_MIME_TYPE = 'text/markdown';
 const STORAGE_NAME = '@jupyterlite/ai:settings';
 const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
@@ -19,8 +21,40 @@ const WrappedFormComponent = (props) => {
 };
 export class AiSettings extends React.Component {
     constructor(props) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         super(props);
+        this.updateUseSecretsManager = (value) => {
+            var _a;
+            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.
+                (_a = this._secretsManager) === null || _a === void 0 ? void 0 : _a.detachAll(SECRETS_NAMESPACE);
+                this._formInputs = [];
+                this._unsavedFields = [];
+                if (this._settingConnector instanceof SettingConnector) {
+                    this._settingConnector.doNotSave = [];
+                }
+                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();
+            }
+            this._settings
+                .set('AIprovider', { provider: this._provider, ...this._currentSettings })
+                .catch(console.error);
+        };
         /**
          * Triggered when the provider hes changed, to update the schema and values.
          * Update the Jupyterlab settings accordingly.
@@ -39,6 +73,16 @@ export class AiSettings extends React.Component {
                 .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.
+         */
+        this._onPasswordUpdated = (fieldName, value) => {
+            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.
@@ -53,12 +97,19 @@ export class AiSettings extends React.Component {
         };
         this._currentSettings = { provider: 'None' };
         this._uiSchema = {};
+        this._formRef = React.createRef();
+        this._unsavedFields = [];
+        this._formInputs = [];
         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 = (_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 =
+            (_d = this._settings.get('UseSecretsManager').composite) !== null && _d !== void 0 ? _d : true;
         // Initialize the providers schema.
         const providerSchema = JSONExt.deepCopy(baseSettings);
         providerSchema.properties.provider = {
@@ -76,7 +127,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 = (_b = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _b === void 0 ? void 0 : _b[1];
+                const provider = (_e = Object.entries(labSettings).find(v => v[0] === 'provider')) === null || _e === void 0 ? void 0 : _e[1];
                 // Save the settings.
                 const settings = {
                     _current: provider
@@ -96,6 +147,40 @@ export class AiSettings extends React.Component {
         this._settings
             .set('AIprovider', this._currentSettings)
             .catch(console.error);
+        this._settings.changed.connect(() => {
+            var _a;
+            const useSecretsManager = (_a = this._settings.get('UseSecretsManager').composite) !== null && _a !== void 0 ? _a : true;
+            if (useSecretsManager !== this._useSecretsManager) {
+                this.updateUseSecretsManager(useSecretsManager);
+            }
+        });
+    }
+    async componentDidUpdate() {
+        var _a;
+        if (!this._secretsManager || !this._useSecretsManager) {
+            return;
+        }
+        // Attach the password inputs to the secrets manager only if they have changed.
+        const inputs = ((_a = this._formRef.current) === null || _a === void 0 ? void 0 : _a.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 = getSecretId(this._provider, label);
+                    this._secretsManager.attach(SECRETS_NAMESPACE, id, inputs[i], (value) => this._onPasswordUpdated(label, value));
+                    this._unsavedFields.push(label);
+                }
+            }
+        }
+        if (this._settingConnector instanceof SettingConnector) {
+            this._settingConnector.doNotSave = this._unsavedFields;
+        }
     }
     /**
      * Get the current provider from the local storage.
@@ -126,8 +211,10 @@ export class AiSettings extends React.Component {
      */
     saveSettings(value) {
         var _a;
+        const currentSettings = { ...value };
         const settings = JSON.parse((_a = localStorage.getItem(STORAGE_NAME)) !== null && _a !== void 0 ? _a : '{}');
-        settings[this._provider] = value;
+        this._unsavedFields.forEach(field => delete currentSettings[field]);
+        settings[this._provider] = currentSettings;
         localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
     }
     /**
@@ -180,7 +267,7 @@ export class AiSettings extends React.Component {
         this.setState({ instruction: renderer.node });
     }
     render() {
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement("div", { ref: this._formRef },
             React.createElement(WrappedFormComponent, { formData: { provider: this._provider }, schema: this._providerSchema, onChange: this._onProviderChanged }),
             this.state.instruction !== null && (React.createElement("details", null,
                 React.createElement("summary", { className: INSTRUCTION_CLASS }, "Instructions"),

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,3 @@
+export declare const SECRETS_NAMESPACE = "@jupyterlite/ai";
+export declare const SECRETS_REPLACEMENT = "***";
+export declare function getSecretId(provider: string, label: string): string;

package/lib/settings/utils.js

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

package/lib/tokens.d.ts

@@ -2,7 +2,7 @@ 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';
+import { IBaseCompleter } from './base-completer';
 export interface IDict<T = any> {
     [key: string]: T;
 }
@@ -80,10 +80,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 +96,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.4.0",
+    "version": "0.6.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -14,7 +14,7 @@
     "license": "BSD-3-Clause",
     "author": "JupyterLite Contributors",
     "files": [
-        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,md}",
         "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
         "src/**/*.{ts,tsx}",
         "schema/*.json"
@@ -27,9 +27,9 @@
         "url": "https://github.com/jupyterlite/ai.git"
     },
     "scripts": {
-        "build": "node ./scripts/settings-generator.js && jlpm build:lib && jlpm build:labextension:dev",
+        "build": "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:prod": "jlpm settings:build && 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",
@@ -47,6 +47,8 @@
         "prettier": "jlpm prettier:base --write --list-different",
         "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
         "prettier:check": "jlpm prettier:base --check",
+        "settings:build": "node ./scripts/settings-checker.js --generate",
+        "settings:check": "node ./scripts/settings-checker.js",
         "stylelint": "jlpm stylelint:check --fix",
         "stylelint:check": "stylelint --cache \"style/**/*.css\"",
         "watch": "run-p watch:src watch:labextension",
@@ -54,13 +56,13 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.7.1",
+        "@jupyter/chat": "^0.9.0",
         "@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/settingregistry": "^4.4.0-beta.1",
         "@jupyterlab/ui-components": "^4.4.0-alpha.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
@@ -75,6 +77,8 @@
         "@rjsf/core": "^4.2.0",
         "@rjsf/utils": "^5.18.4",
         "@rjsf/validator-ajv8": "^5.18.4",
+        "json5": "^2.2.3",
+        "jupyter-secrets-manager": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -115,6 +119,9 @@
     "jupyterlab": {
         "extension": true,
         "outputDir": "jupyterlite_ai/labextension",
-        "schemaDir": "schema"
+        "schemaDir": "schema",
+        "disabledExtensions": [
+            "@jupyterlab/apputils-extension:settings-connector"
+        ]
     }
 }

package/schema/provider-registry.json

@@ -5,6 +5,12 @@
   "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
   "type": "object",
   "properties": {
+    "UseSecretsManager": {
+      "type": "boolean",
+      "title": "Use secrets manager",
+      "description": "Whether to use or not the secrets manager. If not, secrets will be stored in the browser (local storage)",
+      "default": true
+    },
     "AIprovider": {
       "type": "object",
       "title": "AI provider",

package/src/chat-handler.ts

@@ -4,9 +4,12 @@
  */
 
 import {
+  ChatCommand,
   ChatModel,
+  IChatCommandProvider,
   IChatHistory,
   IChatMessage,
+  IInputModel,
   INewMessage
 } from '@jupyter/chat';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
@@ -136,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;
@@ -159,6 +164,7 @@ export class ChatHandler extends ChatModel {
       return false;
     } finally {
       this.updateWriters([]);
+      this._controller = null;
     }
   }
 
@@ -174,16 +180,52 @@ 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 {
   export interface IOptions extends ChatModel.IOptions {
     providerRegistry: IAIProviderRegistry;
   }
+
+  export class ClearCommandProvider implements IChatCommandProvider {
+    public id: string = '@jupyterlite/ai:clear-commands';
+    private _slash_commands: ChatCommand[] = [
+      {
+        name: '/clear',
+        providerId: this.id,
+        replaceWith: '/clear',
+        description: 'Clear the chat'
+      }
+    ];
+    async getChatCommands(inputModel: IInputModel) {
+      const match = inputModel.currentWord?.match(/^\/\w*/)?.[0];
+      if (!match) {
+        return [];
+      }
+
+      const commands = this._slash_commands.filter(cmd =>
+        cmd.name.startsWith(match)
+      );
+      return commands;
+    }
+
+    async handleChatCommand(
+      command: ChatCommand,
+      inputModel: IInputModel
+    ): Promise<void> {
+      // no handling needed because `replaceWith` is set in each command.
+      return;
+    }
+  }
 }

package/src/completion-provider.ts

@@ -4,7 +4,7 @@ import {
   IInlineCompletionProvider
 } from '@jupyterlab/completer';
 
-import { IBaseCompleter } from './llm-models';
+import { IBaseCompleter } from './base-completer';
 import { IAIProviderRegistry } from './tokens';
 
 /**
@@ -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;
   }
 }