@superleapai/flow-ui 1.0.2 → 2.2.1

package/core/bridge.js

@@ -0,0 +1,524 @@
+/**
+ * Superleap-Flow Bridge Transport Layer
+ *
+ * Handles postMessage / MessageChannel communication between an iframe
+ * (running this library) and the host CRM window.  Also supports React
+ * Native WebView via window.ReactNativeWebView.
+ *
+ * This module is transport-only — it knows nothing about CRM concepts,
+ * the SuperLeap SDK, or FlowUI state.  The higher-level core/crm.js
+ * builds on top of it.
+ *
+ * Exposed temporarily as window.SuperleapBridge, then captured into
+ * _components and removed from the global scope by index.js.
+ */
+
+(function (global) {
+  "use strict";
+
+  // ---------------------------------------------------------------------------
+  // Constants
+  // ---------------------------------------------------------------------------
+
+  var MESSAGE_TYPE = "superleap-bridge";
+  var HANDSHAKE_TIMEOUT = 5000; // ms
+
+  // ---------------------------------------------------------------------------
+  // Closure state (reset on each connect / disconnect cycle)
+  // ---------------------------------------------------------------------------
+
+  var _instanceId = null;
+  var _nonce = null;
+  var _port = null; // MessagePort (iframe transport, post-handshake)
+  var _connected = false;
+  var _transport = null; // 'iframe' | 'react-native'
+  var _crmOrigin = null; // validated origin (iframe only)
+  var _messageListener = null; // window 'message' handler ref
+  var _eventHandlers = {}; // { action: [cb, …] }
+  var _pendingResolve = null;
+  var _pendingReject = null;
+  var _handshakeTimer = null;
+  var _useMessageChannel = true; // false when MessageChannel unavailable
+
+  // ---------------------------------------------------------------------------
+  // Helpers – crypto
+  // ---------------------------------------------------------------------------
+
+  function generateUUID() {
+    // crypto.randomUUID where available (modern browsers)
+    if (
+      typeof crypto !== "undefined" &&
+      typeof crypto.randomUUID === "function"
+    ) {
+      return crypto.randomUUID();
+    }
+    // Fallback: manual v4 UUID via getRandomValues or Math.random
+    var bytes;
+    if (
+      typeof crypto !== "undefined" &&
+      typeof crypto.getRandomValues === "function"
+    ) {
+      bytes = new Uint8Array(16);
+      crypto.getRandomValues(bytes);
+    } else {
+      bytes = new Uint8Array(16);
+      for (var i = 0; i < 16; i++) {
+        bytes[i] = (Math.random() * 256) | 0;
+      }
+    }
+    bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+    bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 1
+    var hex = [];
+    for (var j = 0; j < 16; j++) {
+      hex.push(("0" + bytes[j].toString(16)).slice(-2));
+    }
+    return (
+      hex.slice(0, 4).join("") +
+      "-" +
+      hex.slice(4, 6).join("") +
+      "-" +
+      hex.slice(6, 8).join("") +
+      "-" +
+      hex.slice(8, 10).join("") +
+      "-" +
+      hex.slice(10).join("")
+    );
+  }
+
+  function generateNonce() {
+    var bytes;
+    if (
+      typeof crypto !== "undefined" &&
+      typeof crypto.getRandomValues === "function"
+    ) {
+      bytes = new Uint8Array(16);
+      crypto.getRandomValues(bytes);
+    } else {
+      bytes = new Uint8Array(16);
+      for (var i = 0; i < 16; i++) {
+        bytes[i] = (Math.random() * 256) | 0;
+      }
+    }
+    var hex = "";
+    for (var j = 0; j < bytes.length; j++) {
+      hex += ("0" + bytes[j].toString(16)).slice(-2);
+    }
+    return hex;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helpers – transport
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Detect which transport to use.
+   * @returns {'react-native'|'iframe'}
+   */
+  function detectTransport() {
+    if (
+      global.ReactNativeWebView &&
+      typeof global.ReactNativeWebView.postMessage === "function"
+    ) {
+      return "react-native";
+    }
+    if (global.parent && global.parent !== global) {
+      return "iframe";
+    }
+    throw new Error(
+      "SuperleapBridge: Not running in an embedded context (no parent window or ReactNativeWebView)",
+    );
+  }
+
+  /**
+   * Wrap action + payload in the standard message envelope.
+   */
+  function createEnvelope(action, payload) {
+    return {
+      type: MESSAGE_TYPE,
+      instanceId: _instanceId,
+      action: action,
+      payload: payload || {},
+    };
+  }
+
+  /**
+   * Low-level send.  Before handshake-complete the message goes via
+   * window.parent.postMessage (iframe) or ReactNativeWebView.postMessage (RN).
+   * After handshake-complete it goes via the dedicated MessagePort (iframe).
+   * RN always uses ReactNativeWebView.postMessage (no MessageChannel).
+   *
+   * @param {Object} message  – envelope object
+   * @param {Array}  [transfer] – Transferable objects (e.g. [port2])
+   */
+  function sendRaw(message, transfer) {
+    if (_transport === "react-native") {
+      global.ReactNativeWebView.postMessage(JSON.stringify(message));
+      return;
+    }
+
+    // iframe transport
+    if (_port) {
+      // Post-handshake — private channel
+      _port.postMessage(message);
+    } else {
+      // Pre-handshake or no MessageChannel — broadcast via parent
+      var targetOrigin = _crmOrigin || "*";
+      if (transfer && transfer.length) {
+        global.parent.postMessage(message, targetOrigin, transfer);
+      } else {
+        global.parent.postMessage(message, targetOrigin);
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Incoming message handling
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Central dispatcher for all incoming messages (both during handshake and
+   * after).
+   *
+   * @param {Object} data   – parsed message data
+   * @param {string} origin – event.origin (empty string for RN / port msgs)
+   */
+  function handleIncomingMessage(data, origin) {
+    // Ignore messages that aren't ours
+    if (!data || data.type !== MESSAGE_TYPE) return;
+    // Ignore messages for a different instance
+    if (data.instanceId && data.instanceId !== _instanceId) return;
+
+    var action = data.action;
+
+    // ----- Handshake responses -----
+    if (action === "handshake-ack" && _pendingResolve) {
+      // Validate nonce
+      if (!data.payload || data.payload.nonce !== _nonce) {
+        if (_pendingReject) {
+          _pendingReject(
+            new Error(
+              "SuperleapBridge: Nonce validation failed (possible replay)",
+            ),
+          );
+        }
+        cleanup();
+        return;
+      }
+
+      // Validate origin (iframe only)
+      if (_transport === "iframe" && _crmOrigin && origin !== _crmOrigin) {
+        if (_pendingReject) {
+          _pendingReject(
+            new Error("SuperleapBridge: Origin validation failed"),
+          );
+        }
+        cleanup();
+        return;
+      }
+
+      // Store validated origin
+      if (_transport === "iframe" && origin) {
+        _crmOrigin = origin;
+      }
+
+      clearTimeout(_handshakeTimer);
+      _handshakeTimer = null;
+
+      // Attempt MessageChannel upgrade (iframe only)
+      if (
+        _transport === "iframe" &&
+        _useMessageChannel &&
+        typeof MessageChannel !== "undefined"
+      ) {
+        var channel = new MessageChannel();
+        _port = channel.port1;
+        _port.onmessage = function (evt) {
+          handleIncomingMessage(evt.data, "");
+        };
+
+        // Send handshake-complete with port2 transferred
+        var completeMsg = createEnvelope("handshake-complete", {});
+        global.parent.postMessage(completeMsg, _crmOrigin, [channel.port2]);
+      } else {
+        // No channel upgrade — send plain handshake-complete
+        sendRaw(createEnvelope("handshake-complete", {}));
+      }
+
+      _connected = true;
+      _nonce = null; // one-time use
+
+      // Remove the broad window listener if we have a port now
+      if (_port && _messageListener) {
+        global.removeEventListener("message", _messageListener);
+        _messageListener = null;
+      }
+
+      var resolve = _pendingResolve;
+      _pendingResolve = null;
+      _pendingReject = null;
+      resolve(data.payload);
+      return;
+    }
+
+    // ----- Post-handshake messages -----
+    if (_connected) {
+      // Origin check for non-port iframe messages
+      if (
+        _transport === "iframe" &&
+        !_port &&
+        _crmOrigin &&
+        origin &&
+        origin !== _crmOrigin
+      ) {
+        return; // ignore messages from unexpected origins
+      }
+
+      emitEvent(action, data.payload);
+    }
+  }
+
+  /**
+   * Fire callbacks registered for a given action.
+   */
+  function emitEvent(action, payload) {
+    var handlers = _eventHandlers[action];
+    if (!handlers || !handlers.length) return;
+    // Iterate over a copy in case a handler removes itself
+    var copy = handlers.slice();
+    for (var i = 0; i < copy.length; i++) {
+      try {
+        copy[i](payload);
+      } catch (e) {
+        console.error("SuperleapBridge: handler error for " + action, e);
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle helpers
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Reset all state to initial values.
+   */
+  function cleanup() {
+    if (_handshakeTimer) {
+      clearTimeout(_handshakeTimer);
+      _handshakeTimer = null;
+    }
+    if (_port) {
+      try {
+        _port.close();
+      } catch (_) {}
+      _port = null;
+    }
+    if (_messageListener) {
+      global.removeEventListener("message", _messageListener);
+      _messageListener = null;
+    }
+    if (_transport === "react-native" && global.__superleapBridge) {
+      delete global.__superleapBridge;
+    }
+    _instanceId = null;
+    _nonce = null;
+    _connected = false;
+    _transport = null;
+    _crmOrigin = null;
+    _pendingResolve = null;
+    _pendingReject = null;
+    // Event handlers are intentionally preserved across reconnects
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Initiate a handshake with the host CRM.
+   *
+   * @param {Object} options
+   * @param {string} options.flowId     – identifies this flow to the CRM
+   * @param {string} [options.version]  – library version (informational)
+   * @param {string} [options.crmOrigin] – expected CRM origin for validation
+   * @param {number} [options.timeout]  – handshake timeout in ms (default 5000)
+   * @returns {Promise<Object>} resolves with the CRM's handshake-ack payload
+   */
+  function connect(options) {
+    if (_connected) {
+      return Promise.reject(
+        new Error(
+          "SuperleapBridge: Already connected. Call disconnect() first.",
+        ),
+      );
+    }
+
+    var opts = options || {};
+
+    return new Promise(function (resolve, reject) {
+      try {
+        _transport = detectTransport();
+      } catch (err) {
+        reject(err);
+        return;
+      }
+
+      _instanceId = generateUUID();
+      _nonce = generateNonce();
+      _crmOrigin = opts.crmOrigin || null;
+      _pendingResolve = resolve;
+      _pendingReject = reject;
+      _useMessageChannel = typeof MessageChannel !== "undefined";
+
+      // --- Set up listeners ---
+      if (_transport === "iframe") {
+        _messageListener = function (event) {
+          handleIncomingMessage(event.data, event.origin);
+        };
+        global.addEventListener("message", _messageListener);
+      } else {
+        // React Native — register global receiver
+        global.__superleapBridge = {
+          receive: function (raw) {
+            var data;
+            if (typeof raw === "string") {
+              try {
+                data = JSON.parse(raw);
+              } catch (_) {
+                return;
+              }
+            } else {
+              data = raw;
+            }
+            handleIncomingMessage(data, "");
+          },
+        };
+        // Also listen on window.message for RN webViewRef.postMessage
+        _messageListener = function (event) {
+          var data = event.data;
+          if (typeof data === "string") {
+            try {
+              data = JSON.parse(data);
+            } catch (_) {
+              return;
+            }
+          }
+          handleIncomingMessage(data, "");
+        };
+        global.addEventListener("message", _messageListener);
+      }
+
+      // --- Send handshake-request ---
+      var envelope = createEnvelope("handshake-request", {
+        flowId: opts.flowId || "",
+        version: opts.version || "",
+        nonce: _nonce,
+      });
+      sendRaw(envelope);
+
+      // --- Timeout ---
+      var timeoutMs = opts.timeout || HANDSHAKE_TIMEOUT;
+      _handshakeTimer = setTimeout(function () {
+        if (!_connected) {
+          var err = new Error(
+            "SuperleapBridge: Handshake timed out after " +
+              timeoutMs +
+              "ms. Is this page embedded in the SuperLeap CRM?",
+          );
+          if (_pendingReject) _pendingReject(err);
+          cleanup();
+        }
+      }, timeoutMs);
+    });
+  }
+
+  /**
+   * Tear down the connection and clean up all listeners.
+   */
+  function disconnect() {
+    if (_connected) {
+      try {
+        sendRaw(createEnvelope("disconnect", {}));
+      } catch (_) {
+        // best-effort
+      }
+    }
+    cleanup();
+  }
+
+  /**
+   * Send a message to the CRM over the established connection.
+   *
+   * @param {string} action  – message action / event name
+   * @param {Object} [payload]
+   */
+  function send(action, payload) {
+    if (!_connected) {
+      throw new Error(
+        "SuperleapBridge: Not connected. Call connect() first.",
+      );
+    }
+    sendRaw(createEnvelope(action, payload));
+  }
+
+  /**
+   * Register a handler for messages with a given action.
+   *
+   * @param {string}   action
+   * @param {Function} callback – receives (payload)
+   * @returns {Function} unsubscribe function
+   */
+  function onMessage(action, callback) {
+    if (!_eventHandlers[action]) {
+      _eventHandlers[action] = [];
+    }
+    _eventHandlers[action].push(callback);
+
+    return function unsubscribe() {
+      offMessage(action, callback);
+    };
+  }
+
+  /**
+   * Remove a specific handler for an action.
+   */
+  function offMessage(action, callback) {
+    var handlers = _eventHandlers[action];
+    if (!handlers) return;
+    var idx = handlers.indexOf(callback);
+    if (idx !== -1) {
+      handlers.splice(idx, 1);
+    }
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  function isConnected() {
+    return _connected;
+  }
+
+  /**
+   * @returns {string|null}
+   */
+  function getInstanceId() {
+    return _instanceId;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Expose
+  // ---------------------------------------------------------------------------
+
+  var SuperleapBridge = {
+    connect: connect,
+    disconnect: disconnect,
+    send: send,
+    onMessage: onMessage,
+    offMessage: offMessage,
+    isConnected: isConnected,
+    getInstanceId: getInstanceId,
+  };
+
+  if (global) {
+    global.SuperleapBridge = SuperleapBridge;
+  }
+})(typeof window !== "undefined" ? window : this);