@jupyterlite/ai 0.4.0 → 0.6.0

package/src/settings/panel.tsx

@@ -1,14 +1,20 @@
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
-import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import {
+  ISettingConnector,
+  ISettingRegistry
+} from '@jupyterlab/settingregistry';
 import { FormComponent, IFormRenderer } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
 import { JSONExt } from '@lumino/coreutils';
 import { IChangeEvent } from '@rjsf/core';
 import type { FieldProps } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 import { JSONSchema7 } from 'json-schema';
+import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 
-import baseSettings from './schemas/base.json';
+import { getSecretId, SECRETS_NAMESPACE, SettingConnector } from '.';
+import baseSettings from './base.json';
 import { IAIProviderRegistry, IDict } from '../tokens';
 
 const MD_MIME_TYPE = 'text/markdown';
@@ -18,6 +24,8 @@ const INSTRUCTION_CLASS = 'jp-AISettingsInstructions';
 export const aiSettingsRenderer = (options: {
   providerRegistry: IAIProviderRegistry;
   rmRegistry?: IRenderMimeRegistry;
+  secretsManager?: ISecretsManager;
+  settingConnector?: ISettingConnector;
 }): IFormRenderer => {
   return {
     fieldRenderer: (props: FieldProps) => {
@@ -49,8 +57,13 @@ export class AiSettings extends React.Component<
     }
     this._providerRegistry = props.formContext.providerRegistry;
     this._rmRegistry = props.formContext.rmRegistry ?? null;
+    this._secretsManager = props.formContext.secretsManager ?? null;
+    this._settingConnector = props.formContext.settingConnector ?? null;
     this._settings = props.formContext.settings;
 
+    this._useSecretsManager =
+      (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
+
     // Initialize the providers schema.
     const providerSchema = JSONExt.deepCopy(baseSettings) as any;
     providerSchema.properties.provider = {
@@ -95,6 +108,47 @@ export class AiSettings extends React.Component<
     this._settings
       .set('AIprovider', this._currentSettings)
       .catch(console.error);
+
+    this._settings.changed.connect(() => {
+      const useSecretsManager =
+        (this._settings.get('UseSecretsManager').composite as boolean) ?? true;
+      if (useSecretsManager !== this._useSecretsManager) {
+        this.updateUseSecretsManager(useSecretsManager);
+      }
+    });
+  }
+
+  async componentDidUpdate(): Promise<void> {
+    if (!this._secretsManager || !this._useSecretsManager) {
+      return;
+    }
+    // Attach the password inputs to the secrets manager only if they have changed.
+    const inputs = this._formRef.current?.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: string) => this._onPasswordUpdated(label, value)
+          );
+          this._unsavedFields.push(label);
+        }
+      }
+    }
+    if (this._settingConnector instanceof SettingConnector) {
+      this._settingConnector.doNotSave = this._unsavedFields;
+    }
   }
 
   /**
@@ -126,11 +180,44 @@ export class AiSettings extends React.Component<
    * Save settings in local storage for a given provider.
    */
   saveSettings(value: IDict<any>) {
+    const currentSettings = { ...value };
     const settings = JSON.parse(localStorage.getItem(STORAGE_NAME) ?? '{}');
-    settings[this._provider] = value;
+    this._unsavedFields.forEach(field => delete currentSettings[field]);
+    settings[this._provider] = currentSettings;
     localStorage.setItem(STORAGE_NAME, JSON.stringify(settings));
   }
 
+  private updateUseSecretsManager = (value: boolean) => {
+    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.
+      this._secretsManager?.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);
+  };
+
   /**
    * Update the UI schema of the form.
    * Currently use to hide API keys.
@@ -206,6 +293,17 @@ export class AiSettings extends React.Component<
       .catch(console.error);
   };
 
+  /**
+   * Callback function called when the password input has been programmatically updated
+   * with the secret manager.
+   */
+  private _onPasswordUpdated = (fieldName: string, value: string) => {
+    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.
@@ -221,7 +319,7 @@ export class AiSettings extends React.Component<
 
   render(): JSX.Element {
     return (
-      <>
+      <div ref={this._formRef}>
         <WrappedFormComponent
           formData={{ provider: this._provider }}
           schema={this._providerSchema}
@@ -243,15 +341,21 @@ export class AiSettings extends React.Component<
           onChange={this._onFormChange}
           uiSchema={this._uiSchema}
         />
-      </>
+      </div>
     );
   }
 
   private _providerRegistry: IAIProviderRegistry;
   private _provider: string;
   private _providerSchema: JSONSchema7;
+  private _useSecretsManager: boolean;
   private _rmRegistry: IRenderMimeRegistry | null;
+  private _secretsManager: ISecretsManager | null;
+  private _settingConnector: ISettingConnector | null;
   private _currentSettings: IDict<any> = { provider: 'None' };
   private _uiSchema: IDict<any> = {};
   private _settings: ISettingRegistry.ISettings;
+  private _formRef = React.createRef<HTMLDivElement>();
+  private _unsavedFields: string[] = [];
+  private _formInputs: HTMLInputElement[] = [];
 }

package/src/settings/settings-connector.ts

@@ -0,0 +1,89 @@
+import { PageConfig } from '@jupyterlab/coreutils';
+import {
+  ISettingConnector,
+  ISettingRegistry
+} from '@jupyterlab/settingregistry';
+import { DataConnector, IDataConnector } 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<ISettingRegistry.IPlugin, string>
+  implements ISettingConnector
+{
+  constructor(connector: IDataConnector<ISettingRegistry.IPlugin, string>) {
+    super();
+    this._connector = connector;
+  }
+
+  set doNotSave(fields: string[]) {
+    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: string): Promise<ISettingRegistry.IPlugin | undefined> {
+    const throttlers = this._throttlers;
+    if (!(id in throttlers)) {
+      throttlers[id] = new Throttler(() => this._connector.fetch(id), 100);
+    }
+    return throttlers[id].invoke();
+  }
+
+  async list(query: 'ids'): Promise<{ ids: string[] }>;
+  async list(
+    query: 'active' | 'all'
+  ): Promise<{ ids: string[]; values: ISettingRegistry.IPlugin[] }>;
+  async list(
+    query: 'active' | 'all' | 'ids' = 'all'
+  ): Promise<{ ids: string[]; values?: ISettingRegistry.IPlugin[] }> {
+    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: string, raw: string): Promise<void> {
+    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));
+  }
+
+  private _connector: IDataConnector<ISettingRegistry.IPlugin, string>;
+  private _doNotSave: string[] = [];
+  private _throttlers: { [key: string]: Throttler } = Object.create(null);
+}

package/src/settings/utils.ts

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

package/src/tokens.ts

@@ -3,7 +3,7 @@ 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;
@@ -85,10 +85,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.
    */
@@ -103,6 +102,20 @@ 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/llm-models/index.d.ts

@@ -1,4 +0,0 @@
-import { IAIProvider } from '../tokens';
-export * from './base-completer';
-declare const AIProviders: IAIProvider[];
-export { AIProviders };

package/lib/llm-models/index.js

@@ -1,43 +0,0 @@
-import { ChatAnthropic } from '@langchain/anthropic';
-import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
-import { ChatMistralAI } from '@langchain/mistralai';
-import { ChatOpenAI } from '@langchain/openai';
-import { AnthropicCompleter } from './anthropic-completer';
-import { CodestralCompleter } from './codestral-completer';
-import { ChromeCompleter } from './chrome-completer';
-import { OpenAICompleter } from './openai-completer';
-import { instructions } from '../settings/instructions';
-import { ProviderSettings } from '../settings/schemas';
-export * from './base-completer';
-const AIProviders = [
-    {
-        name: 'Anthropic',
-        chatModel: ChatAnthropic,
-        completer: AnthropicCompleter,
-        settingsSchema: ProviderSettings.Anthropic,
-        errorMessage: (error) => error.error.error.message
-    },
-    {
-        name: 'ChromeAI',
-        // TODO: fix
-        // @ts-expect-error: missing properties
-        chatModel: ChromeAI,
-        completer: ChromeCompleter,
-        instructions: instructions.ChromeAI,
-        settingsSchema: ProviderSettings.ChromeAI
-    },
-    {
-        name: 'MistralAI',
-        chatModel: ChatMistralAI,
-        completer: CodestralCompleter,
-        instructions: instructions.MistralAI,
-        settingsSchema: ProviderSettings.MistralAI
-    },
-    {
-        name: 'OpenAI',
-        chatModel: ChatOpenAI,
-        completer: OpenAICompleter,
-        settingsSchema: ProviderSettings.OpenAI
-    }
-];
-export { AIProviders };

package/lib/settings/instructions.d.ts

@@ -1,2 +0,0 @@
-import { IDict } from '../tokens';
-export declare const instructions: IDict;

package/lib/settings/instructions.js

@@ -1,44 +0,0 @@
-const chromeAiInstructions = `
-<i class="fas fa-exclamation-triangle"></i> Support for ChromeAI is still experimental and only available in Google Chrome.
-
-You can test ChromeAI is enabled in your browser by going to the following URL: https://chromeai.org/
-
-Enable the proper flags in Google Chrome.
-
-- chrome://flags/#prompt-api-for-gemini-nano
-  - Select: \`Enabled\`
-- chrome://flags/#optimization-guide-on-device-model
-  - Select: \`Enabled BypassPrefRequirement\`
-- chrome://components
-  - Click \`Check for Update\` on Optimization Guide On Device Model to download the model
-- [Optional] chrome://flags/#text-safety-classifier
-
-<img src="https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c" alt="A screenshot showing how to enable the ChromeAI flag in Google Chrome" width="500px">
-
-Then restart Chrome for these changes to take effect.
-
-<i class="fas fa-exclamation-triangle"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).
-During the download, ChromeAI may not be available via the extension.
-
-<i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: https://developer.chrome.com/docs/ai/get-started
-`;
-const mistralAIInstructions = `
-<i class="fas fa-exclamation-triangle"></i> This extension is still very much experimental. It is not an official MistralAI extension.
-
-1. Go to https://console.mistral.ai/api-keys/ and create an API key.
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png" alt="Screenshot showing how to create an API key" width="500px">
-
-2. Open the JupyterLab settings and go to the **Ai providers** section to select the \`MistralAI\`
-   provider and the API key (required).
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png" alt="Screenshot showing how to add the API key to the settings" width="500px">
-
-3. Open the chat, or use the inline completer
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png" alt="Screenshot showing how to use the chat" width="500px">
-`;
-export const instructions = {
-    ChromeAI: chromeAiInstructions,
-    MistralAI: mistralAIInstructions
-};

package/lib/settings/schemas/index.d.ts

@@ -1,3 +0,0 @@
-import { IDict } from '../../tokens';
-declare const ProviderSettings: IDict<any>;
-export { ProviderSettings };

package/lib/settings/schemas/index.js

@@ -1,11 +0,0 @@
-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

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

@@ -1,25 +0,0 @@
-/**
- * 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/src/llm-models/index.ts

@@ -1,50 +0,0 @@
-import { ChatAnthropic } from '@langchain/anthropic';
-import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
-import { ChatMistralAI } from '@langchain/mistralai';
-import { ChatOpenAI } from '@langchain/openai';
-
-import { AnthropicCompleter } from './anthropic-completer';
-import { CodestralCompleter } from './codestral-completer';
-import { ChromeCompleter } from './chrome-completer';
-import { OpenAICompleter } from './openai-completer';
-
-import { instructions } from '../settings/instructions';
-import { ProviderSettings } from '../settings/schemas';
-
-import { IAIProvider } from '../tokens';
-
-export * from './base-completer';
-
-const AIProviders: IAIProvider[] = [
-  {
-    name: 'Anthropic',
-    chatModel: ChatAnthropic,
-    completer: AnthropicCompleter,
-    settingsSchema: ProviderSettings.Anthropic,
-    errorMessage: (error: any) => error.error.error.message
-  },
-  {
-    name: 'ChromeAI',
-    // TODO: fix
-    // @ts-expect-error: missing properties
-    chatModel: ChromeAI,
-    completer: ChromeCompleter,
-    instructions: instructions.ChromeAI,
-    settingsSchema: ProviderSettings.ChromeAI
-  },
-  {
-    name: 'MistralAI',
-    chatModel: ChatMistralAI,
-    completer: CodestralCompleter,
-    instructions: instructions.MistralAI,
-    settingsSchema: ProviderSettings.MistralAI
-  },
-  {
-    name: 'OpenAI',
-    chatModel: ChatOpenAI,
-    completer: OpenAICompleter,
-    settingsSchema: ProviderSettings.OpenAI
-  }
-];
-
-export { AIProviders };

package/src/settings/instructions.ts

@@ -1,48 +0,0 @@
-import { IDict } from '../tokens';
-
-const chromeAiInstructions = `
-<i class="fas fa-exclamation-triangle"></i> Support for ChromeAI is still experimental and only available in Google Chrome.
-
-You can test ChromeAI is enabled in your browser by going to the following URL: https://chromeai.org/
-
-Enable the proper flags in Google Chrome.
-
-- chrome://flags/#prompt-api-for-gemini-nano
-  - Select: \`Enabled\`
-- chrome://flags/#optimization-guide-on-device-model
-  - Select: \`Enabled BypassPrefRequirement\`
-- chrome://components
-  - Click \`Check for Update\` on Optimization Guide On Device Model to download the model
-- [Optional] chrome://flags/#text-safety-classifier
-
-<img src="https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c" alt="A screenshot showing how to enable the ChromeAI flag in Google Chrome" width="500px">
-
-Then restart Chrome for these changes to take effect.
-
-<i class="fas fa-exclamation-triangle"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).
-During the download, ChromeAI may not be available via the extension.
-
-<i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: https://developer.chrome.com/docs/ai/get-started
-`;
-
-const mistralAIInstructions = `
-<i class="fas fa-exclamation-triangle"></i> This extension is still very much experimental. It is not an official MistralAI extension.
-
-1. Go to https://console.mistral.ai/api-keys/ and create an API key.
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png" alt="Screenshot showing how to create an API key" width="500px">
-
-2. Open the JupyterLab settings and go to the **Ai providers** section to select the \`MistralAI\`
-   provider and the API key (required).
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png" alt="Screenshot showing how to add the API key to the settings" width="500px">
-
-3. Open the chat, or use the inline completer
-
-<img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png" alt="Screenshot showing how to use the chat" width="500px">
-`;
-
-export const instructions: IDict = {
-  ChromeAI: chromeAiInstructions,
-  MistralAI: mistralAIInstructions
-};

package/src/settings/schemas/index.ts

@@ -1,15 +0,0 @@
-import { IDict } from '../../tokens';
-
-import ChromeAI from './_generated/ChromeAI.json';
-import MistralAI from './_generated/MistralAI.json';
-import Anthropic from './_generated/Anthropic.json';
-import OpenAI from './_generated/OpenAI.json';
-
-const ProviderSettings: IDict<any> = {
-  ChromeAI,
-  MistralAI,
-  Anthropic,
-  OpenAI
-};
-
-export { ProviderSettings };

package/src/slash-commands.tsx

@@ -1,55 +0,0 @@
-/**
- * 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 { AutocompleteCommand } from '@jupyter/chat';
-
-import HideSource from '@mui/icons-material/HideSource';
-
-import React from 'react';
-
-const DEFAULT_SLASH_COMMAND_ICONS: Record<string, JSX.Element> = {
-  clear: <HideSource />
-};
-
-type SlashCommandOption = AutocompleteCommand & {
-  id: string;
-  description: string;
-};
-
-/**
- * Renders an option shown in the slash command autocomplete.
- */
-export function renderSlashCommandOption(
-  optionProps: React.HTMLAttributes<HTMLLIElement>,
-  option: SlashCommandOption
-): JSX.Element {
-  const icon =
-    option.id in DEFAULT_SLASH_COMMAND_ICONS
-      ? DEFAULT_SLASH_COMMAND_ICONS[option.id]
-      : DEFAULT_SLASH_COMMAND_ICONS.unknown;
-
-  return (
-    <li {...optionProps}>
-      <Box sx={{ lineHeight: 0, marginRight: 4, opacity: 0.618 }}>{icon}</Box>
-      <Box sx={{ flexGrow: 1 }}>
-        <Typography
-          component="span"
-          sx={{
-            fontSize: 'var(--jp-ui-font-size1)'
-          }}
-        >
-          {option.label}
-        </Typography>
-        <Typography
-          component="span"
-          sx={{ opacity: 0.618, fontSize: 'var(--jp-ui-font-size0)' }}
-        >
-          {' — ' + option.description}
-        </Typography>
-      </Box>
-    </li>
-  );
-}