@superleapai/flow-ui 2.5.12 → 2.5.14

package/components/record-multiselect.js

@@ -113,6 +113,24 @@
     return global.Icon;
   }
 
+  /**
+   * Get display name for the object from ObjectType: display_singular_name, display_plural_name, or slug.
+   * @param {{ display_singular_name?: string, display_plural_name?: string, slug?: string } | null} objectSchema - optional ObjectType
+   * @param {string} slug - objectSlug fallback
+   * @param {'singular'|'plural'} kind - which name to return
+   * @returns {string}
+   */
+  function getObjectDisplayName(objectSchema, slug, kind) {
+    var s = objectSchema;
+    var str = function (v) {
+      return typeof v === "string" && v ? v : "";
+    };
+    if (kind === "singular") {
+      return str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+    }
+    return str(s && s.display_plural_name) || str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+  }
+
   /**
    * Get iconStr and color for the object: from objectSchema.properties.icon_data first, else OBJECT_SLUG_TO_ICON, else IconDatabase fallback.
    * @param {string} slug - objectSlug
@@ -155,16 +173,21 @@
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @param {Array<string>} [config.displayFields] - Fields to display as secondary info (e.g. ["email", "phone"])
    * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
-   * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { icon?, color? } used for static icon (not used for user; user shows Vivid Avatar)
+   * @param {Object} [config.objectSchema] - Optional ObjectType; display_plural_name/display_singular_name/slug used for placeholder/search/summary label; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record multiselect container element
    */
   function createRecordMultiSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
     var objectSchema = config.objectSchema || null;
-    var placeholder = config.placeholder || "Select records";
-    var searchPlaceholder = config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
-    var summaryLabel = config.label || "selected";
+    var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+    var placeholder =
+      config.placeholder ||
+      (displayPlural ? "Select " + displayPlural : "Select records");
+    var searchPlaceholder =
+      config.searchPlaceholder ||
+      "Search " + (displayPlural || objectSlug || "") + "...";
+    var summaryLabel = config.label || (displayPlural || "selected");
     var onValuesChange = config.onValuesChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
@@ -320,7 +343,7 @@
         },
       });
       var inputEl = searchInputWrapper.getInput();
-      if (inputEl) inputEl.setAttribute("aria-label", "Search records");
+      if (inputEl) inputEl.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = inputEl;
       searchWrap.appendChild(searchInputWrapper);
     } else {
@@ -337,7 +360,7 @@
       searchInput.className =
         "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
       searchInput.placeholder = searchPlaceholder;
-      searchInput.setAttribute("aria-label", "Search records");
+      searchInput.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = searchInput;
       fallbackWrapper.appendChild(searchInput);
       searchWrap.appendChild(fallbackWrapper);

package/components/record-select.js

@@ -121,6 +121,24 @@
     return global.Icon;
   }
 
+  /**
+   * Get display name for the object from ObjectType: display_singular_name, display_plural_name, or slug.
+   * @param {{ display_singular_name?: string, display_plural_name?: string, slug?: string } | null} objectSchema - optional ObjectType
+   * @param {string} slug - objectSlug fallback
+   * @param {'singular'|'plural'} kind - which name to return
+   * @returns {string}
+   */
+  function getObjectDisplayName(objectSchema, slug, kind) {
+    var s = objectSchema;
+    var str = function (v) {
+      return typeof v === "string" && v ? v : "";
+    };
+    if (kind === "singular") {
+      return str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+    }
+    return str(s && s.display_plural_name) || str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+  }
+
   /**
    * Get iconStr and color for the object: from objectSchema.properties.icon_data first, else OBJECT_SLUG_TO_ICON, else IconDatabase fallback.
    * @param {string} slug - objectSlug
@@ -174,16 +192,21 @@
    * @param {boolean} [config.canClear] - Show clear button when value is set
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
-   * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { svg?, color? } used for static icon (not used for user; user shows Vivid Avatar)
+   * @param {Object} [config.objectSchema] - Optional ObjectType; display_singular_name/display_plural_name/slug used for placeholder/search text; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record select container element
    */
   function createRecordSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
     var objectSchema = config.objectSchema || null;
-    var placeholder = config.placeholder || "Select a record";
+    var displaySingular = getObjectDisplayName(objectSchema, objectSlug, "singular");
+    var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+    var placeholder =
+      config.placeholder ||
+      (displaySingular ? "Select a " + displaySingular : "Select a record");
     var searchPlaceholder =
-      config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
+      config.searchPlaceholder ||
+      "Search " + (displayPlural || objectSlug || "") + "...";
     var onChange = config.onChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
@@ -317,7 +340,7 @@
         },
       });
       var inputEl = searchInputWrapper.getInput();
-      if (inputEl) inputEl.setAttribute("aria-label", "Search records");
+      if (inputEl) inputEl.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = inputEl;
       searchWrap.appendChild(searchInputWrapper);
     } else {
@@ -334,7 +357,7 @@
       searchInput.className =
         "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
       searchInput.placeholder = searchPlaceholder;
-      searchInput.setAttribute("aria-label", "Search records");
+      searchInput.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = searchInput;
       fallbackWrapper.appendChild(searchInput);
       searchWrap.appendChild(fallbackWrapper);

package/core/bridge.js

@@ -27,7 +27,7 @@
   // Closure state (reset on each connect / disconnect cycle)
   // ---------------------------------------------------------------------------
 
-  var _instanceId = null;
+  var _bridgeId = null;
   var _nonce = null;
   var _port = null; // MessagePort (iframe transport, post-handshake)
   var _connected = false;
@@ -44,47 +44,6 @@
   // 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 (
@@ -135,7 +94,7 @@
   function createEnvelope(action, payload) {
     return {
       type: MESSAGE_TYPE,
-      instanceId: _instanceId,
+      bridgeId: _bridgeId,
       action: action,
       payload: payload || {},
     };
@@ -185,8 +144,8 @@
   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;
+    // Ignore messages for a different bridge
+    if (data.bridgeId && data.bridgeId !== _bridgeId) return;
 
     var action = data.action;
 
@@ -319,7 +278,7 @@
     if (_transport === "react-native" && global.__superleapBridge) {
       delete global.__superleapBridge;
     }
-    _instanceId = null;
+    _bridgeId = null;
     _nonce = null;
     _connected = false;
     _transport = null;
@@ -337,10 +296,10 @@
    * 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.bridgeId]  – explicit bridgeId (auto-read from URL if omitted)
+   * @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)
+   * @param {number} [options.timeout]   – handshake timeout in ms (default 5000)
    * @returns {Promise<Object>} resolves with the CRM's handshake-ack payload
    */
   function connect(options) {
@@ -362,7 +321,18 @@
         return;
       }
 
-      _instanceId = generateUUID();
+      // Read bridgeId from URL query param (set by CRM) or explicit option
+      var urlParams = new URLSearchParams(global.location.search);
+      _bridgeId = opts.bridgeId || urlParams.get("_bridgeId");
+      if (!_bridgeId) {
+        reject(
+          new Error(
+            "SuperleapBridge: No _bridgeId found in URL. Is this page embedded in the SuperLeap CRM?",
+          ),
+        );
+        return;
+      }
+
       _nonce = generateNonce();
       _crmOrigin = opts.crmOrigin || null;
       _pendingResolve = resolve;
@@ -409,9 +379,8 @@
 
       // --- Send handshake-request ---
       var envelope = createEnvelope("handshake-request", {
-        flowId: opts.flowId || "",
-        version: opts.version || "",
         nonce: _nonce,
+        version: opts.version || "",
       });
       sendRaw(envelope);
 
@@ -500,8 +469,8 @@
   /**
    * @returns {string|null}
    */
-  function getInstanceId() {
-    return _instanceId;
+  function getBridgeId() {
+    return _bridgeId;
   }
 
   // ---------------------------------------------------------------------------
@@ -515,7 +484,7 @@
     onMessage: onMessage,
     offMessage: offMessage,
     isConnected: isConnected,
-    getInstanceId: getInstanceId,
+    getBridgeId: getBridgeId,
   };
 
   if (global) {

package/core/crm.js

@@ -10,18 +10,9 @@
  *   - Context management (orgId, userId, etc.)
  *   - Custom event send / listen with namespacing
  *
- * Usage (inside an iframe that imports superleap-flow):
- *
- *   const { context, config } = await SuperLeap.connect({
- *     flowId: 'my-onboarding-form',
- *   });
- *   // SDK is now initialized, context has orgId/userId/etc.
- *
- *   SuperLeap.toast('Record saved!', 'success');
- *   SuperLeap.closeForm();
- *
- *   SuperLeap.on('prefill', (data) => { ... });
- *   SuperLeap.send('form-submitted', { values });
+ * The library auto-connects when loaded inside a CRM iframe (bridgeId is
+ * read from the URL).  User code should listen for the 'superleap-flow:ready'
+ * event — by the time it fires, the SDK is initialized and context is available.
  *
  * This extends the existing SuperLeap API from superleapClient.js which
  * already has: init(), getSdk(), isAvailable(), getDefaultConfig().
@@ -38,6 +29,7 @@
   var _config = null; // full config from CRM
   var _bridge = null; // resolved reference to SuperleapBridge
   var _connected = false;
+  var _connectPromise = null; // in-flight connect promise (deduplication)
 
   // Library version — sent during handshake so the CRM knows what it's talking to
   var LIB_VERSION = "2.1.0";
@@ -100,14 +92,27 @@
    * credentials and context, and (by default) auto-initializes the
    * SuperLeap SDK.
    *
-   * @param {Object}  options
-   * @param {string}  options.flowId      – identifies this flow to the CRM
-   * @param {string}  [options.crmOrigin] – expected CRM origin for validation
-   * @param {boolean} [options.autoInit]  – auto-call SuperLeap.init() (default true)
-   * @param {number}  [options.timeout]   – handshake timeout in ms (default 5000)
+   * If already connected, silently resolves with the existing context/config.
+   * If a connection is in flight (e.g. auto-connect), returns the same promise.
+   *
+   * @param {Object}  [options]
+   * @param {string}  [options.bridgeId]   – explicit bridgeId override (auto-read from URL)
+   * @param {string}  [options.crmOrigin]  – expected CRM origin for validation
+   * @param {boolean} [options.autoInit]   – auto-call SuperLeap.init() (default true)
+   * @param {number}  [options.timeout]    – handshake timeout in ms (default 5000)
    * @returns {Promise<{ context: Object, config: Object }>}
    */
   function connect(options) {
+    // Already connected — silently resolve
+    if (_connected) {
+      return Promise.resolve({ context: _context, config: _config });
+    }
+
+    // Connection in flight (e.g. auto-connect started) — return same promise
+    if (_connectPromise) {
+      return _connectPromise;
+    }
+
     var opts = options || {};
     var bridge = getBridge();
 
@@ -117,17 +122,9 @@
       );
     }
 
-    if (_connected) {
-      return Promise.reject(
-        new Error(
-          "SuperleapCRM: Already connected. Call disconnect() first.",
-        ),
-      );
-    }
-
-    return bridge
+    _connectPromise = bridge
       .connect({
-        flowId: opts.flowId || "",
+        bridgeId: opts.bridgeId,
         version: LIB_VERSION,
         crmOrigin: opts.crmOrigin,
         timeout: opts.timeout,
@@ -146,6 +143,7 @@
         }
 
         _connected = true;
+        _connectPromise = null;
 
         // Listen for context pushes from the CRM
         bridge.onMessage("data:context", function (newCtx) {
@@ -169,7 +167,13 @@
         }
 
         return { context: _context, config: _config };
+      })
+      .catch(function (err) {
+        _connectPromise = null;
+        throw err;
       });
+
+    return _connectPromise;
   }
 
   /**
@@ -190,6 +194,7 @@
     _context = null;
     _config = null;
     _connected = false;
+    _connectPromise = null;
     _bridge = null;
   }