Add a completion status in the status bar

Author: brichet

package.json

@@ -71,6 +71,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,77 @@
+import React, { useEffect, useState } from 'react';
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+
+const STATUS_DISABLED_CLASS = 'jp-ai-status-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 ? STATUS_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._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,25 @@ 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, IStatusBar],
+  activate: (
+    app: JupyterFrontEnd,
+    settingsModel: AISettingsModel,
+    statusBar: IStatusBar,
+  ) => {
+    const div = document.createElement('div');
+    div.style.width = '50px';
+    div.style.height = '100%';
+    div.style.backgroundColor = 'red';
+    const item = new CompletionStatusWidget({ settingsModel });
+    statusBar.registerStatusItem('completionState', { item , align: 'right', rank: 10 });
+  }
+};
+
 export default [
   providerRegistryPlugin,
   anthropicProviderPlugin,
@@ -944,7 +966,8 @@ export default [
   plugin,
   toolRegistry,
   agentManagerFactory,
-  inputToolbarFactory
+  inputToolbarFactory,
+  completionStatus
 ];
 
 // Export extension points for other extensions to use

style/base.css

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

yarn.lock

@@ -2905,7 +2905,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:
@@ -3046,6 +3046,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