@ahmedramez-org/nexus-chat 1.0.0-beta.2 → 1.0.0-beta.21

package/react.js

@@ -1,11 +1,23 @@
-// <NexusChat /> — the connector as a React component. It renders one element
-// the chat fills, mounts the chat into it once, and keeps the chat told about
-// the props that change (theme, locale, direction, tenant, user, window
-// state). The chat itself still runs its own React; this file only uses the
-// app's React (18 or 19) for the wrapper.
-import { createElement, useEffect, useRef } from 'react';
+// <NexusChat /> — the connector as a React component (the app's React 18 or
+// 19 renders only this wrapper; the chat runs its own React). Two ways in:
+//
+// - Direct: the chat mounts into an element this renders, sharing the page's
+//   session. It fills its box and the app draws any frame around it, or, with
+//   `modes` or `defaultMode` instead of a `window`, it draws the same window
+//   as embedded.
+// - Embedded (`embedUrl`): the chat runs in an <iframe> served by Incorta, on
+//   the user's own Incorta session, so the app never holds a token. This
+//   draws the window too: a launcher icon that opens the chat floating,
+//   docked or fullscreen (the app picks which with `modes`).
+import { createElement as h, useEffect, useRef, useState } from 'react';
 
-import { CONTRACT_VERSION, loadNexusChat } from './index.js';
+import {
+  CONTRACT_VERSION,
+  forgetNexusChat,
+  loadNexusChat,
+  showNexusChatSkeleton,
+} from './index.js';
+import { connectEmbeddedChat, createChatWindow, embedSrc, initialView } from './window.js';
 
 function emitter() {
   const listeners = new Set();
@@ -18,7 +30,7 @@ function emitter() {
   };
 }
 
-export function NexusChat({
+function DirectChat({
   theme,
   locale,
   direction,
@@ -39,12 +51,24 @@ export function NexusChat({
   const windowState = useRef(null);
   windowState.current ??= emitter();
   const hasWindow = Boolean(hostWindow);
+  // Until the chat is mounted the skeleton holds the box, the same loading
+  // face as the embedded window, so every app shows one.
+  const [status, setStatus] = useState('loading');
 
   useEffect(
     () => environment.current.notify(),
     [theme, locale, direction, tenantId, user?.id, user?.name],
   );
-  useEffect(() => windowState.current.notify(), [hostWindow?.docked, hostWindow?.canDock]);
+  useEffect(
+    () => windowState.current.notify(),
+    [
+      hostWindow?.docked,
+      hostWindow?.canDock,
+      hostWindow?.mode,
+      hostWindow?.modes?.join(),
+      hostWindow?.hidden,
+    ],
+  );
 
   // Mounts once per element (and again only if `window` appears or goes):
   // options other than the ones above are read at mount. It loads first and
@@ -55,10 +79,26 @@ export function NexusChat({
     let cancelled = false;
     const current = () => latest.current;
     const { assetsUrl, timeoutMs, ...options } = mountOptions;
+    const source = { copilotUrl: options.connection?.copilotUrl, assetsUrl, timeoutMs };
+    const { onError, onFatal } = options.events ?? {};
+    // A contract `environment` or `window` the app built itself is used as is.
+    const ownWindow = typeof hostWindow?.get === 'function';
     const mountOptionsFor = () => ({
       version: CONTRACT_VERSION,
       ...options,
-      environment: {
+      // A chat that failed while running is fetched afresh by the app's retry.
+      ...(onFatal
+        ? {
+            events: {
+              ...options.events,
+              onFatal: (error) => {
+                forgetNexusChat(source);
+                onFatal(error);
+              },
+            },
+          }
+        : {}),
+      environment: options.environment ?? {
         get: () => {
           const props = current();
           return {
@@ -71,44 +111,210 @@ export function NexusChat({
         },
         subscribe: environment.current.subscribe,
       },
-      ...(hasWindow
-        ? {
-            window: {
-              get: () => ({
-                docked: current().hostWindow?.docked ?? false,
-                canDock: current().hostWindow?.canDock ?? false,
-              }),
-              subscribe: windowState.current.subscribe,
-              setDocked: (docked) => current().hostWindow?.setDocked(docked),
-              close: () => current().hostWindow?.close(),
-            },
-          }
-        : {}),
+      ...(ownWindow
+        ? { window: hostWindow }
+        : hasWindow
+          ? {
+              window: {
+                get: () => {
+                  const {
+                    docked = false,
+                    canDock = false,
+                    mode,
+                    modes,
+                    hidden,
+                  } = current().hostWindow ?? {};
+                  return {
+                    docked,
+                    canDock,
+                    ...(mode && modes ? { mode, modes } : {}),
+                    ...(hidden ? { hidden: true } : {}),
+                  };
+                },
+                subscribe: windowState.current.subscribe,
+                setDocked: (docked) => current().hostWindow?.setDocked(docked),
+                // Read at mount, like the rest of `window`'s shape.
+                ...(hostWindow.setMode
+                  ? { setMode: (mode) => current().hostWindow?.setMode?.(mode) }
+                  : {}),
+                close: () => current().hostWindow?.close(),
+              },
+            }
+          : {}),
     });
     const fail = (error) => {
-      if (!cancelled) current().onLoadError?.(error);
+      if (cancelled) return;
+      // The app draws its own failure (and Retry) where the chat would be.
+      setStatus('failed');
+      current().onLoadError?.(error);
     };
-    loadNexusChat({ copilotUrl: options.connection?.copilotUrl, assetsUrl, timeoutMs }).then(
-      (mount) => {
+    // In a promise, so a missing source reaches onLoadError like any load failure.
+    Promise.resolve()
+      .then(() => loadNexusChat(source))
+      .then((mount) => {
         if (cancelled) return;
         try {
           handle = mount(element.current, mountOptionsFor());
         } catch (error) {
+          forgetNexusChat(source);
           return fail(error);
         }
+        setStatus('ready');
         current().onReady?.(handle);
-      },
-      fail,
-    );
+      }, fail);
     return () => {
       cancelled = true;
-      handle?.unmount();
+      const mounted = handle;
+      handle = undefined;
+      if (!mounted) return;
+      try {
+        mounted.unmount();
+      } catch (error) {
+        if (onError) onError(error, { scope: 'unmount' });
+        else console.error('NexusChat could not be unmounted cleanly.', error);
+      }
+      current().onReady?.(null);
     };
   }, [hasWindow]);
 
-  return createElement('div', {
-    ref: element,
-    className,
-    style: { width: '100%', height: '100%', ...style },
-  });
+  // The app's className and style stay on the chat's own root (the mount element).
+  return h(
+    'div',
+    { style: { position: 'relative', width: '100%', height: '100%' } },
+    h('div', { ref: element, className, style: { width: '100%', height: '100%', ...style } }),
+    // A failure leaves at once: the app's own failure takes the box.
+    h(Skeleton, { status, theme: theme ?? mountOptions.environment?.get().theme }),
+  );
+}
+
+/**
+ * The skeleton (index.js) over the box that holds this, until the chat is
+ * 'ready' (it fades) or 'failed' (gone at once).
+ */
+function Skeleton({ status, theme }) {
+  const anchor = useRef(null);
+  const skeleton = useRef(null);
+  useEffect(() => {
+    const shown = showNexusChatSkeleton(anchor.current.parentNode, theme);
+    skeleton.current = shown;
+    return shown.remove;
+  }, []);
+  useEffect(() => skeleton.current.setTheme(theme), [theme]);
+  useEffect(() => {
+    if (status === 'ready') skeleton.current.done();
+    if (status === 'failed') skeleton.current.remove();
+  }, [status]);
+  return h('span', { ref: anchor, hidden: true });
+}
+
+// ---- the window: window.js draws it; React renders the panel's content
+
+const NAME = 'Incorta Intelligence';
+/** The panel React renders; window.js places it (React never styles it again). */
+const PANEL = { display: 'none' };
+
+/**
+ * The window (window.js) around a panel this renders, re-rendering when it
+ * changes. `host` holds the panel and the launcher; until the window exists
+ * (the first effect) the panel is opened as `defaultMode` says, so a page
+ * rendered on a server already holds its chat.
+ */
+function useChatWindow({ modes, defaultMode, theme }) {
+  const host = useRef(null);
+  const panel = useRef(null);
+  const [win, setWin] = useState(null);
+  const [, changed] = useState(0);
+  const [openedAtFirst] = useState(() => initialView(modes, defaultMode) !== 'minimized');
+  useEffect(() => {
+    const created = createChatWindow({
+      into: host.current,
+      panel: panel.current,
+      modes,
+      defaultMode,
+      theme,
+    });
+    const unsubscribe = created.subscribe(() => changed((count) => count + 1));
+    setWin(created);
+    return () => {
+      unsubscribe();
+      created.destroy();
+    };
+  }, []);
+  useEffect(() => win?.setTheme(theme), [win, theme]);
+  return { host, panel, win, opened: win ? win.opened : openedAtFirst };
+}
+
+// ---- direct, in the window: the app gives `modes` or `defaultMode` instead of a `window`
+
+function WindowedChat({ modes, defaultMode, onReady, ...props }) {
+  const theme = props.theme ?? props.environment?.get().theme;
+  const { host, panel, win, opened } = useChatWindow({ modes, defaultMode, theme });
+  return h(
+    'div',
+    { ref: host },
+    h(
+      'div',
+      { ref: panel, style: PANEL },
+      opened &&
+        win &&
+        h(DirectChat, {
+          ...props,
+          window: {
+            ...win.state(),
+            setMode: win.setMode,
+            setDocked: win.setDocked,
+            close: win.close,
+          },
+          onReady: (chat) => {
+            win.setMounted(Boolean(chat));
+            onReady?.(chat);
+          },
+        }),
+    ),
+  );
+}
+
+// ---- embedded: the chat in an Incorta-served iframe, in the window
+
+function EmbeddedChat({ embedUrl, modes, defaultMode, theme = 'light', locale }) {
+  const { host, panel, win, opened } = useChatWindow({ modes, defaultMode, theme });
+  const frame = useRef(null);
+  const embedded = useRef(null);
+  // Set once: a new src would reload the chat. Later theme changes go by message.
+  const [src] = useState(() => embedSrc(embedUrl, theme, locale));
+  useEffect(() => {
+    if (!win || !opened) return undefined;
+    const connected = connectEmbeddedChat(win, frame.current, { embedUrl, theme, locale });
+    embedded.current = connected;
+    return () => {
+      connected.destroy();
+      embedded.current = null;
+    };
+  }, [win, opened, embedUrl]);
+  useEffect(() => embedded.current?.setTheme(theme), [theme]);
+  useEffect(() => embedded.current?.setLocale(locale), [locale]);
+
+  return h(
+    'div',
+    { ref: host },
+    h(
+      'div',
+      { ref: panel, style: PANEL },
+      opened &&
+        h('iframe', {
+          ref: frame,
+          title: NAME,
+          src,
+          allow: 'storage-access; microphone; clipboard-write',
+          style: { display: 'block', width: '100%', height: '100%', border: 0 },
+        }),
+    ),
+  );
+}
+
+export function NexusChat(props) {
+  if (props.embedUrl) return h(EmbeddedChat, props);
+  // Direct: the app's own `window` (or none) keeps the chat in its box.
+  const windowed = !props.window && (props.modes !== undefined || props.defaultMode !== undefined);
+  return h(windowed ? WindowedChat : DirectChat, props);
 }