@oceanum/oceanumlab 4.6.2 → 4.7.1

package/src/DatameshWidget.tsx

@@ -14,14 +14,26 @@ 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 { IOceanumAuth } from './auth/tokens';
+import { StoredNotebooks } from './StoredNotebooks';
+import { ITab, Tabs } from './Tabs';
+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,27 +472,118 @@ 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 deployment's Oceanum AI address. */
+  aiBackendUrl: () => string;
+  /** Emitted when the settings change. */
+  settingsChanged: ISignal<unknown, void>;
+}
+
 /**
- * Shows a message prompting user to configure their Datamesh token.
- * Only renders when no token is set.
+ * 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: the deployment's Oceanum AI. */
+  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 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{' '}
@@ -491,7 +594,7 @@ function TokenConfigMessage({
       >
         Datamesh token
       </a>{' '}
-      to enable Oceanum.oi services{' '}
+      to enable Oceanum.io services{' '}
       <a
         href="https://home.oceanum.io/account"
         target="_blank"
@@ -510,10 +613,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 +637,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 +853,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;
   }
 
@@ -814,12 +945,74 @@ export interface IDatameshWidgetProps {
   name: string;
   icon: LabIcon;
   openDatameshUI: any;
-  /** The `datameshUiUrl` setting. */
+  /** The deployment's Datamesh UI address. */
   datameshUiUrl: () => string;
   /** The Datamesh UI panel's iframe window; `null` when the panel is closed. */
   datameshUiFrame: () => Window | null;
+  /** The `datameshToken` setting. */
+  datameshToken: () => string;
+  /** The deployment's Oceanum AI address. */
+  aiBackendUrl: () => string;
+  /** Emitted when the settings change. */
+  settingsChanged: ISignal<unknown, void>;
   commands: CommandRegistry;
   getCurrentWidget: () => Widget;
+  /** Oceanum.io sign-in, or null on a host with no Oceanum environment. */
+  auth?: IOceanumAuth | null;
+  /** Open a stored notebook by spec store id. */
+  openStoredNotebook?: (id: string) => void;
+}
+
+/**
+ * The panel's tabs.
+ *
+ * A component rather than a list built in `render`, because whether Oceanum AI is
+ * reachable is not static: `useAiAccess` re-reads it when the settings change and when
+ * the host signals a sign-in or sign-out. An AI tab is only offered when the chat has a
+ * credential to work with — otherwise it would open on the same nothing the panel
+ * rendered before there were tabs, except now with a label promising otherwise.
+ */
+function PanelTabs({
+  auth,
+  commands,
+  settings,
+  renderDatamesh,
+  selected,
+  onSelect
+}: {
+  auth: IOceanumAuth | null;
+  commands: CommandRegistry;
+  settings: IAiSettings;
+  renderDatamesh: () => React.ReactElement;
+  selected: string;
+  onSelect: (id: string) => void;
+}): React.ReactElement {
+  const access = useAiAccess(commands, settings);
+  const tabs: ITab[] = [
+    {
+      id: 'notebooks',
+      label: 'Notebooks',
+      render: () =>
+        // An auth with no environment is a provider that has nothing to sign in to (the
+        // server has sign-in turned off). Asking the user to sign in would be a dead end.
+        auth?.environment ? (
+          <StoredNotebooks auth={auth} />
+        ) : (
+          <div className="oceanum-text-empty">
+            Oceanum.io sign-in is not configured for this host.
+          </div>
+        )
+    },
+    { id: 'datamesh', label: 'Datamesh', render: renderDatamesh }
+  ];
+  if (access.source) {
+    tabs.push({
+      id: 'ai',
+      label: 'Oceanum AI',
+      render: () => <AIChatPanel commands={commands} settings={settings} />
+    });
+  }
+  return <Tabs tabs={tabs} selected={selected} onSelect={onSelect} />;
 }
 
 /**
@@ -887,18 +1080,10 @@ export class DatameshConnectWidget extends ReactWidget {
     );
   }
 
-  render(): React.ReactElement {
+  /** The Datamesh workspace tab: what this panel showed above the divider. */
+  renderDatamesh(): React.ReactElement {
     return (
-      <div className="datamesh-connect">
-        <header className="oceanum-sidebar-header">
-          <this.props.icon.react
-            tag="span"
-            width="auto"
-            height="20px"
-            verticalAlign="middle"
-          />
-          <span className="oceanum-sidebar-title">Oceanum.io</span>
-        </header>
+      <>
         <div className="datamesh-workspace-header">
           <span>Datamesh Workspace</span>
           <div
@@ -915,11 +1100,61 @@ 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} />
+      </>
+    );
+  }
+
+  render(): React.ReactElement {
+    return (
+      <div className="datamesh-connect">
+        <header className="oceanum-sidebar-header">
+          <this.props.icon.react
+            tag="span"
+            width="auto"
+            height="20px"
+            verticalAlign="middle"
+          />
+          <span className="oceanum-sidebar-title">Oceanum.io</span>
+        </header>
+        <UseSignal signal={this.tabChanged} initialArgs={this.selectedTab}>
+          {(): React.ReactElement => (
+            <PanelTabs
+              auth={this.props.auth ?? null}
+              commands={this.props.commands}
+              settings={this.props}
+              renderDatamesh={() => this.renderDatamesh()}
+              selected={this.selectedTab}
+              onSelect={id => this.selectTab(id)}
+            />
+          )}
+        </UseSignal>
       </div>
     );
   }
+
+  /**
+   * The visible tab. The widget only holds it and announces changes through
+   * `tabChanged`; the plugin persists it in IStateDB, because the layout restorer
+   * restores a widget's place in the shell rather than fields on it.
+   */
+  get selectedTab(): string {
+    return this._selectedTab;
+  }
+
+  selectTab(id: string): void {
+    if (id !== this._selectedTab) {
+      this._selectedTab = id;
+      this.tabChanged.emit(id);
+    }
+  }
+
+  readonly tabChanged = new Signal<this, string>(this);
+  // Notebooks first: on notebook.oceanum.io this panel is how a user reaches their
+  // work, so it opens there rather than on Datamesh.
+  private _selectedTab = 'notebooks';
 }

package/src/StoredNotebooks.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+
+import { IOceanumAuth } from './auth/tokens';
+import { ISpecSummary, listNotebooks, partitionNotebooks } from './specStore';
+
+export interface IStoredNotebooksProps {
+  auth: IOceanumAuth;
+  /**
+   * Open a stored notebook, when this host can. Undefined where nothing has registered
+   * a way to open one — today that is native JupyterLab, which has no spec store drive
+   * until OCE-182. The list then reads rather than offering an action that does nothing.
+   */
+  onOpen?: (item: ISpecSummary) => void;
+}
+
+type Load =
+  | { state: 'loading' }
+  | { state: 'error'; message: string }
+  | { state: 'ready'; items: ISpecSummary[] };
+
+function Section({
+  title,
+  items,
+  empty,
+  onOpen
+}: {
+  title: string;
+  items: readonly ISpecSummary[];
+  empty: string;
+  onOpen?: (item: ISpecSummary) => void;
+}): React.ReactElement {
+  return (
+    <div className="oceanum-notebooks-section">
+      <div className="oceanum-notebooks-heading">
+        {title}
+        <span className="oceanum-notebooks-count">{items.length}</span>
+      </div>
+      {items.length === 0 ? (
+        <div className="oceanum-text-empty">{empty}</div>
+      ) : (
+        <ul className="oceanum-notebooks-list">
+          {items.map(item => (
+            <li key={item.id}>
+              {/* Names come from other users: React escapes these, never set as HTML. */}
+              {onOpen ? (
+                <button
+                  type="button"
+                  className="oceanum-notebooks-item"
+                  onClick={() => onOpen(item)}
+                  title={item.description ?? undefined}
+                >
+                  <span className="oceanum-notebooks-name">
+                    {item.name || 'Untitled'}
+                  </span>
+                </button>
+              ) : (
+                <div
+                  className="oceanum-notebooks-item oceanum-notebooks-item-static"
+                  title={item.description ?? undefined}
+                >
+                  <span className="oceanum-notebooks-name">
+                    {item.name || 'Untitled'}
+                  </span>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The notebooks this user has stored on Oceanum.io, theirs and those shared with them.
+ */
+export function StoredNotebooks({
+  auth,
+  onOpen
+}: IStoredNotebooksProps): React.ReactElement {
+  const [load, setLoad] = React.useState<Load>({ state: 'loading' });
+  const [user, setUser] = React.useState(auth.user);
+
+  // Reload whenever the signed-in user changes, so signing in or out does not leave a
+  // stale list from the previous session on screen.
+  React.useEffect(() => {
+    const onUser = (): void => setUser(auth.user);
+    auth.userChanged.connect(onUser);
+    return () => {
+      auth.userChanged.disconnect(onUser);
+    };
+  }, [auth]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    const specs = auth.urls?.specs ?? null;
+    if (!user || !specs) {
+      setLoad({ state: 'ready', items: [] });
+      return;
+    }
+    setLoad({ state: 'loading' });
+    void (async () => {
+      try {
+        const token = await auth.getAccessToken();
+        if (cancelled) {
+          return;
+        }
+        if (!token) {
+          setLoad({ state: 'ready', items: [] });
+          return;
+        }
+        const items = await listNotebooks(specs, token);
+        if (!cancelled) {
+          setLoad({ state: 'ready', items });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setLoad({
+            state: 'error',
+            message:
+              error instanceof Error
+                ? error.message
+                : 'Could not reach Oceanum.io.'
+          });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [auth, user]);
+
+  if (!user) {
+    return (
+      <div className="oceanum-text-empty">
+        Sign in to Oceanum.io to see your notebooks.
+      </div>
+    );
+  }
+  if (load.state === 'loading') {
+    return <div className="oceanum-text-empty">Loading…</div>;
+  }
+  if (load.state === 'error') {
+    // Never render the sections alongside an error: their empty messages would claim
+    // the account has no notebooks when the load simply failed.
+    return <div className="oceanum-text-error">{load.message}</div>;
+  }
+
+  const { mine, shared } = partitionNotebooks(load.items, user.email);
+  return (
+    <div className="oceanum-notebooks">
+      <Section
+        title="My notebooks"
+        items={mine}
+        empty="You have not saved any notebooks yet."
+        onOpen={onOpen}
+      />
+      <Section
+        title="Shared with me"
+        items={shared}
+        empty="No notebooks have been shared with you."
+        onOpen={onOpen}
+      />
+    </div>
+  );
+}