@oceanum/oceanumlab 4.6.2 → 4.7.0

package/schema/datamesh-connect.json

@@ -24,6 +24,12 @@
       "description": "Address of the Datamesh UI shown in the Datamesh panel. Use the address it is finally served from: the panel only accepts workspace updates from this address's origin, so an address that redirects to another origin will not update the workspace.",
       "default": "https://ui.datamesh.oceanum.io"
     },
+    "aiBackendUrl": {
+      "type": "string",
+      "title": "Oceanum AI URL",
+      "description": "Address of the Oceanum AI backend used by the AI chat.",
+      "default": "https://ai.oceanum.io"
+    },
     "autoRunCode": {
       "type": "boolean",
       "title": "Auto-run code",

package/src/DatameshWidget.tsx

@@ -14,14 +14,23 @@ import { LabIcon, addIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { MimeData, ReadonlyJSONArray } from '@lumino/coreutils';
 import { Drag } from '@lumino/dragdrop';
-import { Signal } from '@lumino/signaling';
+import { ISignal, Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
 
 import React from 'react';
 import { marked } from 'marked';
 
 import { DatasourceItem } from './DatasourceItem';
-import { OCEANUM_AI_BACKEND_URL } from './constants';
+import {
+  SIGN_IN_COMMAND,
+  aiBackendUrl,
+  aiCredentialSource,
+  canSignIn,
+  pastedToken,
+  resolveAiCredential,
+  signInToken,
+  type AiCredentialSource
+} from './aiBackend';
 import { isDatameshUiMessage } from './datameshUiUrl';
 import { describeProgress, onProgress, type Progress } from './progress';
 
@@ -460,38 +469,122 @@ class DatameshWorkspaceDisplay extends React.Component<IDatameshWorkspaceProps>
   }
 }
 
+/** The settings the sidebar reaches Oceanum AI with. */
+interface IAiSettings {
+  /**
+   * The `datameshToken` setting: the same value a chat request is signed with.
+   * Not `window.datameshToken`, which keeps a token after it is cleared.
+   */
+  datameshToken: () => string;
+  /** The `aiBackendUrl` setting. */
+  aiBackendUrl: () => string;
+  /** Emitted when the settings change. */
+  settingsChanged: ISignal<unknown, void>;
+}
+
+/**
+ * How the sidebar can reach Oceanum AI right now. Holds no sign-in token:
+ * finding one out means running the host's command.
+ */
+interface IAiAccess {
+  /** Which credential a request would carry; null when there is none. */
+  source: AiCredentialSource | null;
+  /** The pasted Datamesh token, trimmed; '' when there is none. */
+  pasted: string;
+  /** Whether the host can sign the user in to Oceanum.io on this site. */
+  canSignIn: boolean;
+  /** The backend address, from the `aiBackendUrl` setting. */
+  backend: string;
+}
+
+function readAiAccess(
+  commands: CommandRegistry,
+  settings: IAiSettings
+): IAiAccess {
+  const datameshToken = settings.datameshToken();
+  return {
+    source: aiCredentialSource(datameshToken, commands),
+    pasted: pastedToken(datameshToken),
+    canSignIn: canSignIn(commands),
+    backend: aiBackendUrl(settings.aiBackendUrl())
+  };
+}
+
 /**
- * Shows a message prompting user to configure their Datamesh token.
- * Only renders when no token is set.
+ * How the sidebar can reach Oceanum AI, read again whenever the settings or the
+ * commands change: the host calls `notifyCommandChanged` when the user signs
+ * in or out.
+ *
+ * Only the registry's queries are used, never `execute`, and nothing runs on a
+ * timer: every executed command closes JupyterLab's command palette.
+ */
+function useAiAccess(
+  commands: CommandRegistry,
+  settings: IAiSettings
+): IAiAccess {
+  const [access, setAccess] = React.useState(() =>
+    readAiAccess(commands, settings)
+  );
+
+  React.useEffect(() => {
+    const update = () => {
+      const next = readAiAccess(commands, settings);
+      // Same content keeps the same object, so nothing downstream re-runs.
+      setAccess(prev =>
+        JSON.stringify(prev) === JSON.stringify(next) ? prev : next
+      );
+    };
+    // Anything that changed between the first render and now.
+    update();
+    commands.commandChanged.connect(update);
+    settings.settingsChanged.connect(update);
+    return () => {
+      commands.commandChanged.disconnect(update);
+      settings.settingsChanged.disconnect(update);
+    };
+  }, [commands, settings]);
+
+  return access;
+}
+
+/**
+ * Shows a message prompting the user to sign in to Oceanum.io, or to configure
+ * their Datamesh token where the site has no sign-in. Only renders when there
+ * is no credential.
  */
 function TokenConfigMessage({
-  commands
+  commands,
+  settings
 }: {
   commands: CommandRegistry;
+  settings: IAiSettings;
 }): React.ReactElement | null {
-  const [hasToken, setHasToken] = React.useState(!!window.datameshToken);
-
-  React.useEffect(() => {
-    const checkToken = () => setHasToken(!!window.datameshToken);
-    const interval = setInterval(checkToken, 1000);
-    return () => clearInterval(interval);
-  }, []);
+  const access = useAiAccess(commands, settings);
 
-  if (hasToken) {
+  if (access.source) {
     return null;
   }
 
+  const openSettings = () =>
+    commands.execute('settingeditor:open', { query: 'Oceanum' });
+
+  if (access.canSignIn) {
+    const signIn = () =>
+      commands.execute(SIGN_IN_COMMAND).catch(() => {
+        console.warn('Oceanum AI: could not start signing in to Oceanum.io.');
+      });
+    return (
+      <div className="oceanum-token-config">
+        <a onClick={() => void signIn()}>Sign in to Oceanum.io</a> to use
+        Oceanum AI, or set a <a onClick={openSettings}>Datamesh token</a>.
+      </div>
+    );
+  }
+
   return (
     <div className="oceanum-token-config">
-      Set your{' '}
-      <a
-        onClick={() =>
-          commands.execute('settingeditor:open', { query: 'Oceanum' })
-        }
-      >
-        Datamesh token
-      </a>{' '}
-      to enable Oceanum.oi services{' '}
+      Set your <a onClick={openSettings}>Datamesh token</a> to enable Oceanum.io
+      services{' '}
       <a
         href="https://home.oceanum.io/account"
         target="_blank"
@@ -510,10 +603,12 @@ interface IChatMessage {
 
 interface IAIChatPanelProps {
   commands: CommandRegistry;
+  settings: IAiSettings;
 }
 
 function AIChatPanel({
-  commands
+  commands,
+  settings
 }: IAIChatPanelProps): React.ReactElement | null {
   const [messages, setMessages] = React.useState<IChatMessage[]>([]);
   const [input, setInput] = React.useState('');
@@ -532,55 +627,81 @@ function AIChatPanel({
   const [historyIndex, setHistoryIndex] = React.useState(-1);
   const [tempInput, setTempInput] = React.useState('');
 
-  // Track the actual token value to detect changes
-  const [token, setToken] = React.useState(window.datameshToken || '');
-  const hasToken = !!token;
+  // Which credential and address the chat has, as the settings and the host
+  // report them.
+  const access = useAiAccess(commands, settings);
+  // What the capabilities depend on: which credential, the pasted token and
+  // the address. Not the sign-in token itself: it refreshes, and finding it out
+  // runs the host's command.
+  const capabilitiesKey = access.source
+    ? JSON.stringify([access.source, access.pasted, access.backend])
+    : '';
 
   // Check if code capability is enabled (null = loading/unknown)
   const [codeEnabled, setCodeEnabled] = React.useState<boolean | null>(null);
 
-  // Re-check token periodically (settings may change)
-  React.useEffect(() => {
-    const checkToken = () => {
-      const currentToken = window.datameshToken || '';
-      if (currentToken !== token) {
-        setToken(currentToken);
-      }
-    };
-    const interval = setInterval(checkToken, 1000);
-    return () => clearInterval(interval);
-  }, [token]);
+  // The sidebar's one pending access-token request, shared rather than
+  // repeated if the capabilities are asked for again before it answers.
+  const tokenRequest = React.useRef<Promise<unknown> | null>(null);
 
-  // Fetch capabilities when token changes
+  // Fetch capabilities when the credential or the address changes
   React.useEffect(() => {
-    if (!token) {
+    if (!access.source) {
       setCodeEnabled(null);
       return;
     }
 
+    // An answer for a credential that has since changed is dropped.
+    let current = true;
+    const signInTokenOnce = (): Promise<unknown> => {
+      if (!tokenRequest.current) {
+        tokenRequest.current = signInToken(commands)().finally(() => {
+          tokenRequest.current = null;
+        });
+      }
+      return tokenRequest.current;
+    };
     const fetchCapabilities = async () => {
+      const credential = await resolveAiCredential(
+        access.pasted,
+        signInTokenOnce
+      );
+      if (!current) {
+        return;
+      }
+      if (!credential) {
+        // The host says signed in but has no token to give: leave it to a
+        // request to report, rather than hide the chat.
+        setCodeEnabled(null);
+        return;
+      }
       try {
-        const response = await fetch(
-          `${OCEANUM_AI_BACKEND_URL}/api/capabilities`,
-          {
-            headers: {
-              'X-Datamesh-Token': token
-            }
-          }
-        );
+        const response = await fetch(`${access.backend}/api/capabilities`, {
+          headers: credential.headers
+        });
+        if (!current) {
+          return;
+        }
         if (response.ok) {
           const data = await response.json();
-          setCodeEnabled(data.code === true);
+          if (current) {
+            setCodeEnabled(data.code === true);
+          }
         } else {
           setCodeEnabled(false);
         }
       } catch {
-        setCodeEnabled(false);
+        if (current) {
+          setCodeEnabled(false);
+        }
       }
     };
 
     void fetchCapabilities();
-  }, [token]);
+    return () => {
+      current = false;
+    };
+  }, [capabilitiesKey]);
 
   // Auto-scroll to bottom when messages change
   React.useEffect(() => {
@@ -722,8 +843,8 @@ function AIChatPanel({
     }
   };
 
-  // Hide AI panel if no token or code capability is not enabled
-  if (!hasToken || codeEnabled === false) {
+  // Hide AI panel if no credential or code capability is not enabled
+  if (!access.source || codeEnabled === false) {
     return null;
   }
 
@@ -818,6 +939,12 @@ export interface IDatameshWidgetProps {
   datameshUiUrl: () => string;
   /** The Datamesh UI panel's iframe window; `null` when the panel is closed. */
   datameshUiFrame: () => Window | null;
+  /** The `datameshToken` setting. */
+  datameshToken: () => string;
+  /** The `aiBackendUrl` setting. */
+  aiBackendUrl: () => string;
+  /** Emitted when the settings change. */
+  settingsChanged: ISignal<unknown, void>;
   commands: CommandRegistry;
   getCurrentWidget: () => Widget;
 }
@@ -915,10 +1042,13 @@ export class DatameshConnectWidget extends ReactWidget {
               this.renderDisplay(datameshWorkspace)
             }
           </UseSignal>
-          <TokenConfigMessage commands={this.props.commands} />
+          <TokenConfigMessage
+            commands={this.props.commands}
+            settings={this.props}
+          />
         </div>
         <div className="datamesh-connect-divider" />
-        <AIChatPanel commands={this.props.commands} />
+        <AIChatPanel commands={this.props.commands} settings={this.props} />
       </div>
     );
   }