Completion indicator

package.json

@@ -72,6 +72,7 @@
         "@jupyterlab/rendermime": "^4.4.6",
         "@jupyterlab/services": "^7.4.6",
         "@jupyterlab/settingregistry": "^4.0.0",
+        "@jupyterlab/statusbar": "^4.4.6",
         "@jupyterlab/ui-components": "^4.4.6",
         "@lumino/commands": "^2.3.2",
         "@lumino/coreutils": "^2.2.1",

src/components/completion-status.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+
+const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
+const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
+
+/**
+ * The completion status props.
+ */
+interface ICompletionStatusProps {
+  /**
+   * The settings model.
+   */
+  settingsModel: AISettingsModel;
+}
+
+/**
+ * The completion status component.
+ */
+function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
+  const [disabled, setDisabled] = useState<boolean>(true);
+  const [title, setTitle] = useState<string>('');
+
+  /**
+   * Handle changes in the settings.
+   */
+  useEffect(() => {
+    const stateChanged = (model: AISettingsModel) => {
+      if (model.config.useSameProviderForChatAndCompleter) {
+        setDisabled(false);
+        setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+      } else if (model.config.activeCompleterProvider) {
+        setDisabled(false);
+        setTitle(
+          `Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`
+        );
+      } else {
+        setDisabled(true);
+        setTitle('No completion');
+      }
+    };
+
+    props.settingsModel.stateChanged.connect(stateChanged);
+
+    stateChanged(props.settingsModel);
+    return () => {
+      props.settingsModel.stateChanged.disconnect(stateChanged);
+    };
+  }, [props.settingsModel]);
+
+  return (
+    <jupyternautIcon.react
+      className={disabled ? COMPLETION_DISABLED_CLASS : ''}
+      top={'2px'}
+      width={'16px'}
+      stylesheet={'statusBar'}
+      title={title}
+    />
+  );
+}
+
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export class CompletionStatusWidget extends ReactWidget {
+  constructor(options: ICompletionStatusProps) {
+    super();
+    this.addClass(COMPLETION_STATUS_CLASS);
+    this._props = options;
+  }
+
+  render(): JSX.Element {
+    return <CompletionStatus {...this._props} />;
+  }
+
+  private _props: ICompletionStatusProps;
+}

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

src/index.ts

@@ -36,6 +36,8 @@ import { IKernelSpecManager, KernelSpec } from '@jupyterlab/services';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { IStatusBar } from '@jupyterlab/statusbar';
+
 import {
   settingsIcon,
   Toolbar,
@@ -83,6 +85,7 @@ import {
   createModelSelectItem,
   createToolSelectItem,
   stopItem,
+  CompletionStatusWidget,
   TokenUsageWidget
 } from './components';
 
@@ -930,6 +933,29 @@ const inputToolbarFactory: JupyterFrontEndPlugin<IInputToolbarRegistryFactory> =
     }
   };
 
+const completionStatus: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlite/ai:completion-status',
+  description: 'The completion status displayed in the status bar',
+  autoStart: true,
+  requires: [IAISettingsModel],
+  optional: [IStatusBar],
+  activate: (
+    app: JupyterFrontEnd,
+    settingsModel: AISettingsModel,
+    statusBar: IStatusBar | null
+  ) => {
+    if (!statusBar) {
+      return;
+    }
+    const item = new CompletionStatusWidget({ settingsModel });
+    statusBar?.registerStatusItem('completionState', {
+      item,
+      align: 'right',
+      rank: 10
+    });
+  }
+};
+
 export default [
   providerRegistryPlugin,
   anthropicProviderPlugin,
@@ -944,7 +970,8 @@ export default [
   plugin,
   toolRegistry,
   agentManagerFactory,
-  inputToolbarFactory
+  inputToolbarFactory,
+  completionStatus
 ];
 
 // Export extension points for other extensions to use

src/models/settings-model.ts

@@ -241,7 +241,7 @@ Rules:
     }
     return this._config.activeCompleterProvider
       ? this.getProvider(this._config.activeCompleterProvider)
-      : this.getDefaultProvider();
+      : undefined;
   }
 
   async addProvider(
@@ -421,6 +421,8 @@ Rules:
         // Only save the specific setting that changed
         if (value !== undefined) {
           await this._settings.set(key, value as any);
+        } else {
+          await this._settings.remove(key);
         }
       }
     } catch (error) {

src/widgets/ai-settings.tsx

@@ -600,14 +600,15 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                         <Select
                           value={config.activeCompleterProvider || ''}
                           label="Completion Provider"
+                          className="jp-ai-completion-provider-select"
                           onChange={e =>
                             model.setActiveCompleterProvider(
                               e.target.value || undefined
                             )
                           }
                         >
                           <MenuItem value="">
-                            <em>Use chat provider</em>
+                            <em>No completion</em>
                           </MenuItem>
                           {config.providers.map(provider => (
                             <MenuItem key={provider.id} value={provider.id}>

style/base.css

@@ -379,3 +379,12 @@
   stroke: var(--jp-inverse-layout-color3);
   stroke-width: 2;
 }
+
+/* Disabled color for the completion status */
+.jp-ai-completion-status .jp-ai-completion-disabled circle {
+  fill: var(--jp-layout-color3);
+}
+
+.jp-ai-completion-status .jp-ai-completion-disabled path {
+  fill: var(--jp-layout-color2);
+}

ui-tests/tests/code-completion.spec.ts

@@ -1,10 +1,13 @@
 /*
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
 
 import { expect, galata, test } from '@jupyterlab/galata';
-import { TEST_PROVIDERS } from './test-utils';
+import {
+  DEFAULT_GENERIC_PROVIDER_SETTINGS,
+  TEST_PROVIDERS
+} from './test-utils';
 
 const TIMEOUT = 120000;
 
@@ -60,7 +63,7 @@
           if (retries < maxRetries) {
             // Trigger completion again by typing and deleting a character
             if (retries > 1) {
               await cell?.press('Backspace');
             }
             await cell?.pressSequentially('_');
           }
@@ -77,3 +80,76 @@
     });
   })
 );
+
+test.describe('#CompletionStatus', () => {
+  test.use({
+    mockSettings: {
+      ...galata.DEFAULT_SETTINGS,
+      ...DEFAULT_GENERIC_PROVIDER_SETTINGS,
+      '@jupyterlab/apputils-extension:notification': {
+        checkForUpdates: false,
+        fetchNews: 'false',
+        doNotDisturbMode: true
+      }
+    }
+  });
+
+  test('should have a completion status indicator', async ({ page }) => {
+    await expect(page.locator('.jp-ai-completion-status')).toBeVisible();
+  });
+
+  test('completion status indicator should be enabled', async ({ page }) => {
+    const model =
+      DEFAULT_GENERIC_PROVIDER_SETTINGS['@jupyterlite/ai:settings-model']
+        .providers[0].model;
+    const component = page.locator(
+      '.jp-ai-completion-status > div:first-child'
+    );
+    await expect(component).not.toHaveClass(/jp-ai-completion-disabled/);
+    await expect(component).toHaveAttribute(
+      'title',
+      `Completion using ${model}`
+    );
+  });
+
+  test('completion status should toggle', async ({ page }) => {
+    const model =
+      DEFAULT_GENERIC_PROVIDER_SETTINGS['@jupyterlite/ai:settings-model']
+        .providers[0].model;
+    const name =
+      DEFAULT_GENERIC_PROVIDER_SETTINGS['@jupyterlite/ai:settings-model']
+        .providers[0].name;
+    const component = page.locator(
+      '.jp-ai-completion-status > div:first-child'
+    );
+
+    // Open the settings panel
+    const settingsPanel = page.locator('#jupyterlite-ai-settings');
+    await page.keyboard.press('Control+Shift+c');
+    await page
+      .locator(
+        '#modal-command-palette li[data-command="@jupyterlite/ai:open-settings"]'
+      )
+      .click();
+    // Do not use the same provider for chat and completion
+    await settingsPanel.getByRole('switch').first().click();
+
+    // Expect the completion to be disabled
+    await expect(component).toHaveClass(/jp-ai-completion-disabled/);
+    await expect(component).toHaveAttribute('title', 'No completion');
+
+    // Select back a model and expect the completion to be enabled
+    await settingsPanel.locator('.jp-ai-completion-provider-select').click();
+    await page.getByRole('option', { name }).click();
+    await expect(component).not.toHaveClass(/jp-ai-completion-disabled/);
+    await expect(component).toHaveAttribute(
+      'title',
+      `Completion using ${model}`
+    );
+
+    // Disable manually the completion
+    await settingsPanel.locator('.jp-ai-completion-provider-select').click();
+    await page.getByRole('option', { name: 'No completion' }).click();
+    await expect(component).toHaveClass(/jp-ai-completion-disabled/);
+  });
+});

yarn.lock

@@ -2930,7 +2930,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jupyterlab/statusbar@npm:^4.4.7":
+"@jupyterlab/statusbar@npm:^4.4.6, @jupyterlab/statusbar@npm:^4.4.7":
   version: 4.4.7
   resolution: "@jupyterlab/statusbar@npm:4.4.7"
   dependencies:
@@ -3072,6 +3072,7 @@ __metadata:
     "@jupyterlab/rendermime": ^4.4.6
     "@jupyterlab/services": ^7.4.6
     "@jupyterlab/settingregistry": ^4.0.0
+    "@jupyterlab/statusbar": ^4.4.6
     "@jupyterlab/testutils": ^4.0.0
     "@jupyterlab/ui-components": ^4.4.6
     "@lumino/commands": ^2.3.2