@oceanum/oceanumlab 4.6.1 → 4.7.0

package/lib/httpUrl.js

@@ -0,0 +1,20 @@
+/**
+ * An address typed into a setting, checked before anything uses it.
+ *
+ * A setting is typed in by hand, so anything that is not an http(s) URL falls
+ * back to the default rather than ending up in an iframe's `src` or a
+ * request's address.
+ */
+/** `value` as an http(s) URL, or `fallback` when it is empty or not one. */
+export function validHttpUrl(value, fallback) {
+    try {
+        const parsed = new URL((value !== null && value !== void 0 ? value : '').trim());
+        if (parsed.protocol === 'https:' || parsed.protocol === 'http:') {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        // Empty or not a URL: the default below.
+    }
+    return new URL(fallback);
+}

package/lib/index.js

@@ -2,6 +2,7 @@ import { ILayoutRestorer, ILabStatus } from '@jupyterlab/application';
 import { ICommandPalette, Notification } from '@jupyterlab/apputils';
 import { LabIcon } from '@jupyterlab/ui-components';
 import { find } from '@lumino/algorithm';
+import { Signal } from '@lumino/signaling';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStateDB } from '@jupyterlab/statedb';
 import { INotebookTracker } from '@jupyterlab/notebook';
@@ -15,7 +16,7 @@ import { snapshotFromIpynb, snapshotOf } from './notebookContext';
 import { notebookHost } from './notebookHost';
 import { KernelHandoff } from './kernelHandoff';
 import { runChatLoop, STOPPED } from './aiLoop';
-import { MAX_OBSERVE_ROUNDS } from './constants';
+import { DATAMESH_UI_SERVICE, MAX_OBSERVE_ROUNDS, OCEANUM_AI_BACKEND_URL } from './constants';
 import '../style/index.css';
 import oceanumSvg from '../style/icons/oceanum.svg';
 // Theme-adaptive icon using currentColor (auto-adapts to light/dark themes)
@@ -39,6 +40,15 @@ export const datamesh_connect_extension = {
     ],
     activate: (app, palette, restorer, status, settingRegistry) => {
         console.log('Oceanum datamesh connect extension is loaded');
+        // The `datameshUiUrl` setting; the default until the settings load.
+        let datameshUiUrl = DATAMESH_UI_SERVICE;
+        // The `aiBackendUrl` and `datameshToken` settings for the AI chat; the
+        // defaults until the settings load.
+        let aiBackendUrl = OCEANUM_AI_BACKEND_URL;
+        let datameshTokenSetting = '';
+        // Tells the sidebar the settings above have changed.
+        const settingsChanged = new Signal(app);
+        const findDatameshUI = () => find(app.shell.widgets('main'), (widget) => widget.id === 'datamesh-ui');
         //Try to get the datamesh token from the settings
         const updateSettings = (set) => {
             const token = set.get('datameshToken');
@@ -50,6 +60,15 @@ export const datamesh_connect_extension = {
                 }).then(res => console.log(res));
             }
             window.injectToken = set.get('injectToken').user;
+            aiBackendUrl = set.get('aiBackendUrl').composite;
+            datameshTokenSetting = set.get('datameshToken').composite;
+            // An open Datamesh UI panel follows a change of address.
+            datameshUiUrl = set.get('datameshUiUrl').composite;
+            const datameshUI = findDatameshUI();
+            if (datameshUI) {
+                datameshUI.url = datameshUiUrl;
+            }
+            settingsChanged.emit();
         };
         //Try to get the datamesh token from the envars
         Promise.all([app.restored, settingRegistry.load(PLUGIN_ID)])
@@ -67,14 +86,11 @@ export const datamesh_connect_extension = {
         };
         const openDatameshUI = (event) => {
             const widgetId = 'datamesh-ui';
-            const openWidget = find(app.shell.widgets('main'), (widget, index) => {
-                return widget.id === widgetId;
-            });
-            if (openWidget) {
+            if (findDatameshUI()) {
                 app.shell.activateById(widgetId);
                 return;
             }
-            const datameshUIWidget = new DatameshUI();
+            const datameshUIWidget = new DatameshUI(datameshUiUrl);
             datameshUIWidget.title.label = 'Oceanum Datamesh';
             datameshUIWidget.id = widgetId;
             datameshUIWidget.title.closable = true;
@@ -87,6 +103,11 @@ export const datamesh_connect_extension = {
             name: 'Datamesh Connect',
             icon: oceanumIcon,
             openDatameshUI: openDatameshUI,
+            datameshUiUrl: () => datameshUiUrl,
+            datameshUiFrame: () => { var _a, _b; return (_b = (_a = findDatameshUI()) === null || _a === void 0 ? void 0 : _a.frame) !== null && _b !== void 0 ? _b : null; },
+            datameshToken: () => datameshTokenSetting,
+            aiBackendUrl: () => aiBackendUrl,
+            settingsChanged,
             commands: app.commands,
             getCurrentWidget
         });
@@ -129,7 +150,7 @@ export const oceanum_ai_extension = {
             // The panel the current request read its selected cell from, if the
             // notebook was open: a code answer may replace that cell only there.
             let readFrom = null;
-            const router = new ChatRouter(settings, async () => {
+            const router = new ChatRouter(settings, app.commands, async () => {
                 const open = await pin.current();
                 readFrom = open;
                 if (open) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oceanum/oceanumlab",
-    "version": "4.6.1",
+    "version": "4.7.0",
     "description": "A Jupyterlab extension to interact with the Oceanum.io platform",
     "keywords": [
         "jupyter",

package/schema/datamesh-connect.json

@@ -18,6 +18,18 @@
       "description": "Inject Datamesh token into code.",
       "default": false
     },
+    "datameshUiUrl": {
+      "type": "string",
+      "title": "Datamesh UI URL",
+      "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/DatameshUI.tsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { DATAMESH_UI_SERVICE } from './constants';
+import { datameshUiSrc } from './datameshUiUrl';
 
 export class DatameshUI extends ReactWidget {
+  /** `url` is the `datameshUiUrl` setting. */
+  constructor(private _url: string) {
+    super();
+  }
+
+  /**
+   * Point the panel at the `datameshUiUrl` setting's new value. The iframe
+   * reloads only if its address actually changes.
+   */
+  set url(url: string) {
+    this._url = url;
+    this.update();
+  }
+
+  /** The iframe's window, for telling its messages apart; `null` if none. */
+  get frame(): Window | null {
+    return this.node.querySelector('iframe')?.contentWindow ?? null;
+  }
+
   render(): React.ReactElement {
     return (
       <iframe
-        src={`${DATAMESH_UI_SERVICE}`}
+        src={datameshUiSrc(this._url)}
         className="datamesh-iframe"
       ></iframe>
     );

package/src/DatameshWidget.tsx

@@ -14,14 +14,24 @@ 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';
 
 // Configure marked for safe rendering
@@ -459,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())
+  };
+}
+
+/**
+ * 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 user to configure their Datamesh token.
- * Only renders when no token is set.
+ * 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);
+  const access = useAiAccess(commands, settings);
 
-  React.useEffect(() => {
-    const checkToken = () => setHasToken(!!window.datameshToken);
-    const interval = setInterval(checkToken, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  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"
@@ -509,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('');
@@ -531,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(() => {
@@ -721,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;
   }
 
@@ -813,6 +935,16 @@ export interface IDatameshWidgetProps {
   name: string;
   icon: LabIcon;
   openDatameshUI: any;
+  /** The `datameshUiUrl` setting. */
+  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;
 }
@@ -841,6 +973,17 @@ export class DatameshConnectWidget extends ReactWidget {
   }
 
   receiveIFrameMessage(event: MessageEvent): void {
+    // Any page or frame can post to this window; only the Datamesh UI panel
+    // may change the workspace.
+    if (
+      !isDatameshUiMessage(
+        event,
+        this.props.datameshUiUrl(),
+        this.props.datameshUiFrame()
+      )
+    ) {
+      return;
+    }
     if (event.data && event.data.action === 'workspace-modify') {
       this.datameshWorkspaceSpec = {
         id: event.data.id,
@@ -899,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>
     );
   }