@contentstack/live-preview-utils 3.1.1 → 3.2.0-alpha.1

package/dist/modern/visualBuilder/generators/generateThread.js

@@ -0,0 +1,356 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateThread.tsx
+import { render } from "preact";
+import { css } from "goober";
+import CollabIndicator from "../components/Collab/CollabIndicator.js";
+import Config from "../../configManager/configManager.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { jsx } from "preact/jsx-runtime";
+var popupTopOffset = 43;
+var popupLeftOffset = 9;
+var hiddenClass = css`
+    display: none;
+`;
+function createPopupContainer(resolvedXPath, relativeX, relativeY, top, left, updateConfig, payload) {
+  const popupContainer = document.createElement("div");
+  popupContainer.setAttribute("field-path", resolvedXPath);
+  popupContainer.setAttribute("relative", `x: ${relativeX}, y: ${relativeY}`);
+  popupContainer.style.position = "absolute";
+  popupContainer.style.top = `${top - popupTopOffset}px`;
+  popupContainer.style.left = `${left - popupLeftOffset}px`;
+  popupContainer.style.zIndex = updateConfig ? "1000" : "999";
+  popupContainer.style.cursor = "pointer";
+  popupContainer.className = "collab-thread";
+  if (payload?._id) popupContainer.setAttribute("threaduid", payload._id);
+  return popupContainer;
+}
+function appendPopupContainer(popupContainer) {
+  const visualBuilderContainer = document.querySelector(
+    ".visual-builder__container"
+  );
+  if (visualBuilderContainer) {
+    let highlightCommentWrapper = visualBuilderContainer.querySelector(
+      ".visual-builder__collab-wrapper"
+    );
+    if (!highlightCommentWrapper) {
+      highlightCommentWrapper = document.createElement("div");
+      highlightCommentWrapper.className = "visual-builder__collab-wrapper";
+      visualBuilderContainer.appendChild(highlightCommentWrapper);
+    }
+    highlightCommentWrapper.appendChild(popupContainer);
+  } else {
+    document.body.appendChild(popupContainer);
+  }
+}
+function generateThread(payload, options = {}) {
+  const { isNewThread = false, updateConfig = false } = options;
+  const config = Config.get?.();
+  let relativeX, relativeY, resolvedXPath;
+  if (isNewThread) {
+    ({ relativeX, relativeY, xpath: resolvedXPath } = payload);
+  } else {
+    const { position, elementXPath } = payload;
+    ({ x: relativeX, y: relativeY } = position);
+    resolvedXPath = elementXPath;
+  }
+  const element = getElementByXpath(resolvedXPath);
+  if (!element) {
+    return payload._id;
+  }
+  const rect = element.getBoundingClientRect();
+  const top = rect.top + window.scrollY + relativeY * rect.height;
+  const left = rect.left + window.scrollX + relativeX * rect.width;
+  const popupContainer = createPopupContainer(
+    resolvedXPath,
+    relativeX,
+    relativeY,
+    top,
+    left,
+    updateConfig,
+    payload
+  );
+  if (updateConfig && config?.collab.enable) {
+    if (config?.collab.isFeedbackMode) {
+      Config.set("collab.isFeedbackMode", false);
+    }
+  }
+  render(
+    /* @__PURE__ */ jsx(
+      CollabIndicator,
+      {
+        activeThread: !isNewThread ? payload : void 0,
+        newThread: isNewThread
+      }
+    ),
+    popupContainer
+  );
+  appendPopupContainer(popupContainer);
+  return void 0;
+}
+function updateCollabIconPosition() {
+  const icons = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread"
+  );
+  const config = Config.get?.();
+  if (config?.collab?.pauseFeedback) return;
+  icons.forEach((icon) => {
+    if (!(icon instanceof HTMLElement)) return;
+    const path = icon.getAttribute("field-path");
+    const relative = icon.getAttribute("relative");
+    if (!path || !relative) {
+      console.error("Missing field-path or relative attribute.");
+      return;
+    }
+    const match = relative.match(/x: ([\d.]+), y: ([\d.]+)/);
+    if (!match) {
+      console.error("Invalid relative attribute format.");
+      return;
+    }
+    const relativeX = parseFloat(match[1]);
+    const relativeY = parseFloat(match[2]);
+    const targetElement = getElementByXpath(path);
+    if (!targetElement) {
+      icon.classList.add(hiddenClass);
+      return;
+    }
+    const rect = targetElement.getBoundingClientRect();
+    const x = rect.left + rect.width * relativeX + window.scrollX;
+    const y = rect.top + rect.height * relativeY + window.scrollY;
+    icon.style.top = `${y - popupTopOffset}px`;
+    icon.style.left = `${x - popupLeftOffset}px`;
+    icon.classList.remove(hiddenClass);
+  });
+}
+function updatePopupPositions() {
+  const popups = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread .collab-popup"
+  );
+  const config = Config.get?.();
+  if (config?.collab?.pauseFeedback) return;
+  popups.forEach((popup) => {
+    if (popup && popup instanceof HTMLElement) {
+      const parent = popup.closest(
+        ".visual-builder__collab-wrapper .collab-thread"
+      );
+      if (!parent) {
+        console.error(
+          "Parent element with class 'collab-thread' not found."
+        );
+        return;
+      }
+      const button = parent.querySelector(
+        ".visual-builder__collab-wrapper .collab-thread .collab-indicator"
+      );
+      if (!button || !(button instanceof HTMLElement)) {
+        console.error(
+          "Button with class 'collab-indicator' not found."
+        );
+        return;
+      }
+      calculatePopupPosition(button, popup);
+    }
+  });
+}
+function calculatePopupPosition(button, popup) {
+  const buttonRect = button.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  let popupHeight = popup.offsetHeight || 198;
+  let popupWidth = popup.offsetWidth || 334;
+  const spaceAbove = buttonRect.top;
+  const spaceBelow = viewportHeight - buttonRect.bottom;
+  let top, left;
+  if (spaceAbove >= popupHeight) {
+    top = buttonRect.top - popupHeight - 8;
+  } else if (spaceBelow >= popupHeight) {
+    top = buttonRect.bottom + 8;
+  } else {
+    top = spaceBelow > spaceAbove ? buttonRect.bottom + 8 : Math.max(buttonRect.top - popupHeight - 8, 0);
+  }
+  left = buttonRect.left + buttonRect.width / 2 - popupWidth / 2;
+  top = Math.max(top, 0);
+  left = Math.max(left, 0);
+  left = Math.min(left, viewportWidth - popupWidth);
+  popup.style.top = `${top}px`;
+  popup.style.left = `${left}px`;
+  requestAnimationFrame(() => {
+    const newPopupHeight = popup.offsetHeight;
+    if (newPopupHeight !== popupHeight) {
+      calculatePopupPosition(button, popup);
+    }
+  });
+}
+function removeAllCollabIcons() {
+  const icons = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread"
+  );
+  icons?.forEach((icon) => icon?.remove());
+}
+function hideAllCollabIcons() {
+  const icons = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread"
+  );
+  icons?.forEach((icon) => icon?.classList.add(hiddenClass));
+}
+function showAllCollabIcons() {
+  const icons = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread"
+  );
+  icons?.forEach((icon) => icon?.classList.remove(hiddenClass));
+}
+function removeCollabIcon(threadUid) {
+  const thread = document.querySelector(`div[threaduid='${threadUid}']`);
+  thread?.remove();
+}
+function toggleCollabPopup({
+  threadUid = "",
+  action
+}) {
+  document.dispatchEvent(
+    new CustomEvent("toggleCollabPopup", {
+      detail: { threadUid, action }
+    })
+  );
+}
+function HighlightThread(threadUid) {
+  const config = Config.get?.();
+  if (config?.collab?.pauseFeedback) return;
+  toggleCollabPopup({ threadUid, action: "open" });
+}
+function isCollabThread(target) {
+  return Array.from(target.classList).some(
+    (className) => className.startsWith("collab")
+  );
+}
+function handleMissingThreads(payload) {
+  visualBuilderPostMessage?.send(
+    VisualBuilderPostMessageEvents.COLLAB_MISSING_THREADS,
+    { payload }
+  );
+}
+function handleEmptyThreads() {
+  const icons = document.querySelectorAll(
+    ".visual-builder__collab-wrapper .collab-thread"
+  );
+  icons?.forEach((icon) => {
+    if (!icon.hasAttribute("threaduid")) {
+      icon.remove();
+    }
+  });
+}
+var retryConfig = {
+  maxRetries: 3,
+  retryDelay: 1e3
+};
+var isProcessingThreads = false;
+var threadRenderStatus = /* @__PURE__ */ new Map();
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function getRenderStatus(threadId) {
+  if (!threadRenderStatus.has(threadId)) {
+    threadRenderStatus.set(threadId, {
+      threadId,
+      attempts: 0,
+      isRendered: false
+    });
+  }
+  return threadRenderStatus.get(threadId);
+}
+function updateRenderStatus(threadId, isRendered) {
+  const status = getRenderStatus(threadId);
+  status.isRendered = isRendered;
+  threadRenderStatus.set(threadId, status);
+}
+function clearThreadStatus(threadId) {
+  threadRenderStatus.delete(threadId);
+}
+function clearAllThreadStatus() {
+  threadRenderStatus.clear();
+  isProcessingThreads = false;
+}
+async function processThread(thread) {
+  let status = getRenderStatus(thread._id);
+  while (status.attempts < retryConfig.maxRetries) {
+    try {
+      const result = generateThread(thread, { isNewThread: false });
+      if (result === void 0) {
+        updateRenderStatus(thread._id, true);
+        return void 0;
+      }
+      status.attempts++;
+      updateRenderStatus(thread._id, false);
+      if (status.attempts < retryConfig.maxRetries) {
+        await delay(retryConfig.retryDelay);
+      }
+    } catch (error) {
+      console.error(`Error rendering thread ${thread._id}:`, error);
+      status.attempts++;
+      if (status.attempts >= retryConfig.maxRetries) {
+        break;
+      }
+      await delay(retryConfig.retryDelay);
+    }
+  }
+  return thread._id;
+}
+async function processThreadsBatch(threads) {
+  if (isProcessingThreads) return [];
+  try {
+    isProcessingThreads = true;
+    const unrenderedThreads = filterUnrenderedThreads(threads);
+    if (unrenderedThreads.length === 0) return [];
+    const missingThreadIds = (await Promise.all(
+      unrenderedThreads.map((thread) => processThread(thread))
+    )).filter(Boolean);
+    missingThreadIds.forEach(clearThreadStatus);
+    return missingThreadIds;
+  } finally {
+    isProcessingThreads = false;
+  }
+}
+function filterUnrenderedThreads(threads) {
+  return threads.filter((thread) => {
+    const existingThread = document.querySelector(
+      `[threaduid="${thread._id}"]`
+    );
+    if (existingThread) {
+      updateRenderStatus(thread._id, true);
+      return false;
+    }
+    return true;
+  });
+}
+function getElementByXpath(xpath) {
+  const result = document.evaluate(
+    xpath,
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null
+  );
+  return result.singleNodeValue;
+}
+export {
+  HighlightThread,
+  calculatePopupPosition,
+  clearAllThreadStatus,
+  clearThreadStatus,
+  filterUnrenderedThreads,
+  generateThread,
+  handleEmptyThreads,
+  handleMissingThreads,
+  hideAllCollabIcons,
+  isCollabThread,
+  processThreadsBatch,
+  removeAllCollabIcons,
+  removeCollabIcon,
+  showAllCollabIcons,
+  threadRenderStatus,
+  toggleCollabPopup,
+  updateCollabIconPosition,
+  updatePopupPositions
+};
+//# sourceMappingURL=generateThread.js.map

package/dist/modern/visualBuilder/generators/generateThread.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateThread.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { render } from \"preact\";\nimport { css } from \"goober\";\nimport CollabIndicator from \"../components/Collab/CollabIndicator\";\nimport Config from \"../../configManager/configManager\";\nimport { IThreadDTO, IThreadRenderStatus } from \"../types/collab.types\";\nimport {\n    MissingThreadsInfo,\n    toggleCollabPopupEvent,\n} from \"../types/collab.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nconst popupTopOffset = 43;\nconst popupLeftOffset = 9;\n\nconst hiddenClass = css`\n    display: none;\n`;\n\nfunction createPopupContainer(\n    resolvedXPath: string,\n    relativeX: number,\n    relativeY: number,\n    top: number,\n    left: number,\n    updateConfig: boolean,\n    payload: IThreadDTO | any\n): HTMLDivElement {\n    const popupContainer = document.createElement(\"div\");\n    popupContainer.setAttribute(\"field-path\", resolvedXPath);\n    popupContainer.setAttribute(\"relative\", `x: ${relativeX}, y: ${relativeY}`);\n    popupContainer.style.position = \"absolute\";\n    popupContainer.style.top = `${top - popupTopOffset}px`;\n    popupContainer.style.left = `${left - popupLeftOffset}px`;\n    popupContainer.style.zIndex = updateConfig ? \"1000\" : \"999\";\n    popupContainer.style.cursor = \"pointer\";\n    popupContainer.className = \"collab-thread\";\n    if (payload?._id) popupContainer.setAttribute(\"threaduid\", payload._id);\n    return popupContainer;\n}\n\nfunction appendPopupContainer(popupContainer: HTMLDivElement): void {\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    if (visualBuilderContainer) {\n        let highlightCommentWrapper = visualBuilderContainer.querySelector(\n            \".visual-builder__collab-wrapper\"\n        );\n        if (!highlightCommentWrapper) {\n            highlightCommentWrapper = document.createElement(\"div\");\n            highlightCommentWrapper.className =\n                \"visual-builder__collab-wrapper\";\n            visualBuilderContainer.appendChild(highlightCommentWrapper);\n        }\n        highlightCommentWrapper.appendChild(popupContainer);\n    } else {\n        document.body.appendChild(popupContainer);\n    }\n}\n\nexport function generateThread(\n    payload: IThreadDTO | any,\n    options: { isNewThread?: boolean; updateConfig?: boolean } = {}\n): string | undefined {\n    const { isNewThread = false, updateConfig = false } = options;\n    const config = Config.get?.();\n\n    let relativeX: number, relativeY: number, resolvedXPath: string;\n\n    if (isNewThread) {\n        ({ relativeX, relativeY, xpath: resolvedXPath } = payload);\n    } else {\n        const { position, elementXPath } = payload;\n        ({ x: relativeX, y: relativeY } = position);\n        resolvedXPath = elementXPath;\n    }\n\n    const element = getElementByXpath(resolvedXPath);\n    if (!element) {\n        return payload._id;\n    }\n\n    const rect = element.getBoundingClientRect();\n    const top = rect.top + window.scrollY + relativeY * rect.height;\n    const left = rect.left + window.scrollX + relativeX * rect.width;\n\n    const popupContainer = createPopupContainer(\n        resolvedXPath,\n        relativeX,\n        relativeY,\n        top,\n        left,\n        updateConfig,\n        payload\n    );\n\n    if (updateConfig && config?.collab.enable) {\n        if (config?.collab.isFeedbackMode) {\n            Config.set(\"collab.isFeedbackMode\", false);\n        }\n    }\n\n    render(\n        <CollabIndicator\n            activeThread={!isNewThread ? payload : undefined}\n            newThread={isNewThread}\n        />,\n        popupContainer\n    );\n\n    appendPopupContainer(popupContainer);\n\n    return undefined;\n}\n\nexport function updateCollabIconPosition() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    icons.forEach((icon) => {\n        if (!(icon instanceof HTMLElement)) return;\n\n        const path = icon.getAttribute(\"field-path\");\n        const relative = icon.getAttribute(\"relative\");\n\n        if (!path || !relative) {\n            console.error(\"Missing field-path or relative attribute.\");\n            return;\n        }\n\n        const match = relative.match(/x: ([\\d.]+), y: ([\\d.]+)/);\n        if (!match) {\n            console.error(\"Invalid relative attribute format.\");\n            return;\n        }\n\n        const relativeX = parseFloat(match[1]);\n        const relativeY = parseFloat(match[2]);\n\n        const targetElement = getElementByXpath(path);\n\n        if (!targetElement) {\n            icon.classList.add(hiddenClass);\n            return;\n        }\n\n        const rect = targetElement.getBoundingClientRect();\n        const x = rect.left + rect.width * relativeX + window.scrollX;\n        const y = rect.top + rect.height * relativeY + window.scrollY;\n\n        icon.style.top = `${y - popupTopOffset}px`;\n        icon.style.left = `${x - popupLeftOffset}px`;\n        icon.classList.remove(hiddenClass);\n    });\n}\nexport function updatePopupPositions() {\n    const popups = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread .collab-popup\"\n    );\n\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    popups.forEach((popup) => {\n        if (popup && popup instanceof HTMLElement) {\n            const parent = popup.closest(\n                \".visual-builder__collab-wrapper .collab-thread\"\n            );\n\n            if (!parent) {\n                console.error(\n                    \"Parent element with class 'collab-thread' not found.\"\n                );\n                return;\n            }\n\n            const button = parent.querySelector(\n                \".visual-builder__collab-wrapper .collab-thread .collab-indicator\"\n            );\n\n            if (!button || !(button instanceof HTMLElement)) {\n                console.error(\n                    \"Button with class 'collab-indicator' not found.\"\n                );\n                return;\n            }\n\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function calculatePopupPosition(\n    button: HTMLElement,\n    popup: HTMLElement\n) {\n    const buttonRect = button.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportWidth = window.innerWidth;\n\n    let popupHeight = popup.offsetHeight || 198;\n    let popupWidth = popup.offsetWidth || 334;\n\n    const spaceAbove = buttonRect.top;\n    const spaceBelow = viewportHeight - buttonRect.bottom;\n\n    let top, left;\n\n    if (spaceAbove >= popupHeight) {\n        top = buttonRect.top - popupHeight - 8;\n    } else if (spaceBelow >= popupHeight) {\n        top = buttonRect.bottom + 8;\n    } else {\n        top =\n            spaceBelow > spaceAbove\n                ? buttonRect.bottom + 8\n                : Math.max(buttonRect.top - popupHeight - 8, 0);\n    }\n\n    left = buttonRect.left + buttonRect.width / 2 - popupWidth / 2;\n\n    top = Math.max(top, 0);\n    left = Math.max(left, 0);\n    left = Math.min(left, viewportWidth - popupWidth);\n\n    popup.style.top = `${top}px`;\n    popup.style.left = `${left}px`;\n\n    requestAnimationFrame(() => {\n        const newPopupHeight = popup.offsetHeight;\n        if (newPopupHeight !== popupHeight) {\n            calculatePopupPosition(button, popup);\n        }\n    });\n}\n\nexport function removeAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.remove());\n}\n\nexport function hideAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.add(hiddenClass));\n}\n\nexport function showAllCollabIcons(): void {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => icon?.classList.remove(hiddenClass));\n}\n\nexport function removeCollabIcon(threadUid: string): void {\n    const thread = document.querySelector(`div[threaduid='${threadUid}']`);\n    thread?.remove();\n}\n\nexport function toggleCollabPopup({\n    threadUid = \"\",\n    action,\n}: toggleCollabPopupEvent): void {\n    document.dispatchEvent(\n        new CustomEvent(\"toggleCollabPopup\", {\n            detail: { threadUid, action },\n        })\n    );\n}\n\nexport function HighlightThread(threadUid: string): void {\n    const config = Config.get?.();\n    if (config?.collab?.pauseFeedback) return;\n\n    toggleCollabPopup({ threadUid, action: \"open\" });\n}\n\nexport function isCollabThread(target: HTMLElement): boolean {\n    return Array.from(target.classList).some((className) =>\n        className.startsWith(\"collab\")\n    );\n}\n\nexport function handleMissingThreads(payload: MissingThreadsInfo) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.COLLAB_MISSING_THREADS,\n        { payload }\n    );\n}\n\nexport function handleEmptyThreads() {\n    const icons = document.querySelectorAll(\n        \".visual-builder__collab-wrapper .collab-thread\"\n    );\n    icons?.forEach((icon) => {\n        if (!icon.hasAttribute(\"threaduid\")) {\n            icon.remove();\n        }\n    });\n}\n\nconst retryConfig = {\n    maxRetries: 3,\n    retryDelay: 1000,\n};\n\nlet isProcessingThreads = false;\n\nexport const threadRenderStatus = new Map<string, IThreadRenderStatus>();\n\nfunction delay(ms: number): Promise<void> {\n    return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nfunction getRenderStatus(threadId: string): IThreadRenderStatus {\n    if (!threadRenderStatus.has(threadId)) {\n        threadRenderStatus.set(threadId, {\n            threadId,\n            attempts: 0,\n            isRendered: false,\n        });\n    }\n    return threadRenderStatus.get(threadId)!;\n}\n\nfunction updateRenderStatus(threadId: string, isRendered: boolean): void {\n    const status = getRenderStatus(threadId);\n    status.isRendered = isRendered;\n    threadRenderStatus.set(threadId, status);\n}\n\nexport function clearThreadStatus(threadId: string): void {\n    threadRenderStatus.delete(threadId);\n}\n\nexport function clearAllThreadStatus(): void {\n    threadRenderStatus.clear();\n    isProcessingThreads = false;\n}\n\nasync function processThread(thread: IThreadDTO): Promise<string | undefined> {\n    let status = getRenderStatus(thread._id);\n\n    while (status.attempts < retryConfig.maxRetries) {\n        try {\n            const result = generateThread(thread, { isNewThread: false });\n            if (result === undefined) {\n                updateRenderStatus(thread._id, true);\n                return undefined;\n            }\n\n            status.attempts++;\n            updateRenderStatus(thread._id, false);\n\n            if (status.attempts < retryConfig.maxRetries) {\n                await delay(retryConfig.retryDelay);\n            }\n        } catch (error) {\n            console.error(`Error rendering thread ${thread._id}:`, error);\n            status.attempts++;\n            if (status.attempts >= retryConfig.maxRetries) {\n                break;\n            }\n            await delay(retryConfig.retryDelay);\n        }\n    }\n\n    return thread._id;\n}\n\nexport async function processThreadsBatch(\n    threads: IThreadDTO[]\n): Promise<string[]> {\n    if (isProcessingThreads) return [];\n\n    try {\n        isProcessingThreads = true;\n        const unrenderedThreads = filterUnrenderedThreads(threads);\n        if (unrenderedThreads.length === 0) return [];\n\n        const missingThreadIds = (\n            await Promise.all(\n                unrenderedThreads.map((thread) => processThread(thread))\n            )\n        ).filter(Boolean) as string[];\n\n        missingThreadIds.forEach(clearThreadStatus);\n        return missingThreadIds;\n    } finally {\n        isProcessingThreads = false;\n    }\n}\n\nexport function filterUnrenderedThreads(threads: IThreadDTO[]): IThreadDTO[] {\n    return threads.filter((thread) => {\n        const existingThread = document.querySelector(\n            `[threaduid=\"${thread._id}\"]`\n        );\n        if (existingThread) {\n            updateRenderStatus(thread._id, true);\n            return false;\n        }\n        return true;\n    });\n}\n\nfunction getElementByXpath(xpath: string): HTMLElement | null {\n    const result = document.evaluate(\n        xpath,\n        document,\n        null,\n        XPathResult.FIRST_ORDERED_NODE_TYPE,\n        null\n    );\n    return result.singleNodeValue as HTMLElement | null;\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.ts
+var useInfiniteScroll_exports = {};
+__export(useInfiniteScroll_exports, {
+  default: () => useInfiniteScroll_default
+});
+module.exports = __toCommonJS(useInfiniteScroll_exports);
+var import_hooks = require("preact/hooks");
+var scrollOffset = 3;
+var useInfiniteScroll = ({
+  containerId,
+  isFetching,
+  canFetchMore,
+  loadMore,
+  offset,
+  limit
+}) => {
+  const [fetchingState, setFetchingState] = (0, import_hooks.useState)(isFetching);
+  (0, import_hooks.useEffect)(() => {
+    const commentListContainer = document.getElementById(containerId);
+    if (!commentListContainer) return;
+    const scrollEvent = async () => {
+      if (commentListContainer.scrollHeight + commentListContainer.scrollTop - commentListContainer.clientHeight < scrollOffset && // Adjust this offset if needed
+      !fetchingState && canFetchMore) {
+        setFetchingState(true);
+        try {
+          await loadMore(offset, limit);
+        } finally {
+          setFetchingState(false);
+        }
+      }
+    };
+    commentListContainer.addEventListener("scroll", scrollEvent, true);
+    return () => {
+      commentListContainer.removeEventListener(
+        "scroll",
+        scrollEvent,
+        true
+      );
+    };
+  }, [containerId, fetchingState, canFetchMore, loadMore, offset, limit]);
+  return fetchingState;
+};
+var useInfiniteScroll_default = useInfiniteScroll;
+//# sourceMappingURL=useInfiniteScroll.cjs.map

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.ts"],"sourcesContent":["import React from \"preact/compat\";\nimport { useEffect, useState } from \"preact/hooks\";\n\ninterface IUseInfiniteScrollOptions {\n    containerId: string;\n    isFetching: boolean;\n    canFetchMore: boolean;\n    loadMore: (offset: number, limit: number) => Promise<any>;\n    offset: number;\n    limit: number;\n}\n\nconst scrollOffset = 3;\n\nconst useInfiniteScroll = ({\n    containerId,\n    isFetching,\n    canFetchMore,\n    loadMore,\n    offset,\n    limit,\n}: IUseInfiniteScrollOptions) => {\n    const [fetchingState, setFetchingState] = useState(isFetching);\n\n    useEffect(() => {\n        const commentListContainer = document.getElementById(containerId);\n        if (!commentListContainer) return;\n\n        const scrollEvent = async () => {\n            if (\n                commentListContainer.scrollHeight +\n                    commentListContainer.scrollTop -\n                    commentListContainer.clientHeight <\n                    scrollOffset && // Adjust this offset if needed\n                !fetchingState &&\n                canFetchMore\n            ) {\n                setFetchingState(true);\n                try {\n                    await loadMore(offset, limit);\n                } finally {\n                    setFetchingState(false);\n                }\n            }\n        };\n\n        commentListContainer.addEventListener(\"scroll\", scrollEvent, true);\n        return () => {\n            commentListContainer.removeEventListener(\n                \"scroll\",\n                scrollEvent,\n                true\n            );\n        };\n    }, [containerId, fetchingState, canFetchMore, loadMore, offset, limit]);\n\n    return fetchingState;\n};\n\nexport default useInfiniteScroll;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;AAWpC,IAAM,eAAe;AAErB,IAAM,oBAAoB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAiC;AAC7B,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,UAAU;AAE7D,8BAAU,MAAM;AACZ,UAAM,uBAAuB,SAAS,eAAe,WAAW;AAChE,QAAI,CAAC,qBAAsB;AAE3B,UAAM,cAAc,YAAY;AAC5B,UACI,qBAAqB,eACjB,qBAAqB,YACrB,qBAAqB,eACrB;AAAA,MACJ,CAAC,iBACD,cACF;AACE,yBAAiB,IAAI;AACrB,YAAI;AACA,gBAAM,SAAS,QAAQ,KAAK;AAAA,QAChC,UAAE;AACE,2BAAiB,KAAK;AAAA,QAC1B;AAAA,MACJ;AAAA,IACJ;AAEA,yBAAqB,iBAAiB,UAAU,aAAa,IAAI;AACjE,WAAO,MAAM;AACT,2BAAqB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,aAAa,eAAe,cAAc,UAAU,QAAQ,KAAK,CAAC;AAEtE,SAAO;AACX;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.d.cts

@@ -0,0 +1,11 @@
+interface IUseInfiniteScrollOptions {
+    containerId: string;
+    isFetching: boolean;
+    canFetchMore: boolean;
+    loadMore: (offset: number, limit: number) => Promise<any>;
+    offset: number;
+    limit: number;
+}
+declare const useInfiniteScroll: ({ containerId, isFetching, canFetchMore, loadMore, offset, limit, }: IUseInfiniteScrollOptions) => boolean;
+
+export { useInfiniteScroll as default };

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.d.ts

@@ -0,0 +1,11 @@
+interface IUseInfiniteScrollOptions {
+    containerId: string;
+    isFetching: boolean;
+    canFetchMore: boolean;
+    loadMore: (offset: number, limit: number) => Promise<any>;
+    offset: number;
+    limit: number;
+}
+declare const useInfiniteScroll: ({ containerId, isFetching, canFetchMore, loadMore, offset, limit, }: IUseInfiniteScrollOptions) => boolean;
+
+export { useInfiniteScroll as default };

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.js

@@ -0,0 +1,44 @@
+import "../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.ts
+import { useEffect, useState } from "preact/hooks";
+var scrollOffset = 3;
+var useInfiniteScroll = ({
+  containerId,
+  isFetching,
+  canFetchMore,
+  loadMore,
+  offset,
+  limit
+}) => {
+  const [fetchingState, setFetchingState] = useState(isFetching);
+  useEffect(() => {
+    const commentListContainer = document.getElementById(containerId);
+    if (!commentListContainer) return;
+    const scrollEvent = async () => {
+      if (commentListContainer.scrollHeight + commentListContainer.scrollTop - commentListContainer.clientHeight < scrollOffset && // Adjust this offset if needed
+      !fetchingState && canFetchMore) {
+        setFetchingState(true);
+        try {
+          await loadMore(offset, limit);
+        } finally {
+          setFetchingState(false);
+        }
+      }
+    };
+    commentListContainer.addEventListener("scroll", scrollEvent, true);
+    return () => {
+      commentListContainer.removeEventListener(
+        "scroll",
+        scrollEvent,
+        true
+      );
+    };
+  }, [containerId, fetchingState, canFetchMore, loadMore, offset, limit]);
+  return fetchingState;
+};
+var useInfiniteScroll_default = useInfiniteScroll;
+export {
+  useInfiniteScroll_default as default
+};
+//# sourceMappingURL=useInfiniteScroll.js.map

package/dist/modern/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/visualBuilder/hooks/use-infinite-scroll/useInfiniteScroll.ts"],"sourcesContent":["import React from \"preact/compat\";\nimport { useEffect, useState } from \"preact/hooks\";\n\ninterface IUseInfiniteScrollOptions {\n    containerId: string;\n    isFetching: boolean;\n    canFetchMore: boolean;\n    loadMore: (offset: number, limit: number) => Promise<any>;\n    offset: number;\n    limit: number;\n}\n\nconst scrollOffset = 3;\n\nconst useInfiniteScroll = ({\n    containerId,\n    isFetching,\n    canFetchMore,\n    loadMore,\n    offset,\n    limit,\n}: IUseInfiniteScrollOptions) => {\n    const [fetchingState, setFetchingState] = useState(isFetching);\n\n    useEffect(() => {\n        const commentListContainer = document.getElementById(containerId);\n        if (!commentListContainer) return;\n\n        const scrollEvent = async () => {\n            if (\n                commentListContainer.scrollHeight +\n                    commentListContainer.scrollTop -\n                    commentListContainer.clientHeight <\n                    scrollOffset && // Adjust this offset if needed\n                !fetchingState &&\n                canFetchMore\n            ) {\n                setFetchingState(true);\n                try {\n                    await loadMore(offset, limit);\n                } finally {\n                    setFetchingState(false);\n                }\n            }\n        };\n\n        commentListContainer.addEventListener(\"scroll\", scrollEvent, true);\n        return () => {\n            commentListContainer.removeEventListener(\n                \"scroll\",\n                scrollEvent,\n                true\n            );\n        };\n    }, [containerId, fetchingState, canFetchMore, loadMore, offset, limit]);\n\n    return fetchingState;\n};\n\nexport default useInfiniteScroll;\n"],"mappings":";;;AACA,SAAS,WAAW,gBAAgB;AAWpC,IAAM,eAAe;AAErB,IAAM,oBAAoB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAiC;AAC7B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,UAAU;AAE7D,YAAU,MAAM;AACZ,UAAM,uBAAuB,SAAS,eAAe,WAAW;AAChE,QAAI,CAAC,qBAAsB;AAE3B,UAAM,cAAc,YAAY;AAC5B,UACI,qBAAqB,eACjB,qBAAqB,YACrB,qBAAqB,eACrB;AAAA,MACJ,CAAC,iBACD,cACF;AACE,yBAAiB,IAAI;AACrB,YAAI;AACA,gBAAM,SAAS,QAAQ,KAAK;AAAA,QAChC,UAAE;AACE,2BAAiB,KAAK;AAAA,QAC1B;AAAA,MACJ;AAAA,IACJ;AAEA,yBAAqB,iBAAiB,UAAU,aAAa,IAAI;AACjE,WAAO,MAAM;AACT,2BAAqB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,aAAa,eAAe,cAAc,UAAU,QAAQ,KAAK,CAAC;AAEtE,SAAO;AACX;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/modern/visualBuilder/hooks/useCollabIndicator.cjs

@@ -0,0 +1,128 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/hooks/useCollabIndicator.ts
+var useCollabIndicator_exports = {};
+__export(useCollabIndicator_exports, {
+  useCollabIndicator: () => useCollabIndicator
+});
+module.exports = __toCommonJS(useCollabIndicator_exports);
+var import_hooks = require("preact/hooks");
+var import_configManager = __toESM(require("../../configManager/configManager.cjs"), 1);
+var import_generateThread = require("../generators/generateThread.cjs");
+var import_generateThread2 = require("../generators/generateThread.cjs");
+var import_generateThread3 = require("../generators/generateThread.cjs");
+var useCollabIndicator = ({
+  newThread,
+  thread
+}) => {
+  const buttonRef = (0, import_hooks.useRef)(null);
+  const popupRef = (0, import_hooks.useRef)(null);
+  const config = import_configManager.default.get();
+  const [showPopup, setShowPopup] = (0, import_hooks.useState)(newThread || false);
+  const [activeThread, setActiveThread] = (0, import_hooks.useState)(() => {
+    if (newThread) return { _id: "new" };
+    return thread || { _id: "new" };
+  });
+  const updatePopupPosition = () => {
+    if (buttonRef.current && popupRef.current) {
+      (0, import_generateThread.calculatePopupPosition)(buttonRef.current, popupRef.current);
+    }
+  };
+  (0, import_hooks.useEffect)(() => {
+    if (!showPopup) return;
+    updatePopupPosition();
+  }, [showPopup]);
+  (0, import_hooks.useEffect)(() => {
+    const handleTogglePopup = (event) => {
+      const { threadUid, action } = event.detail;
+      const thread2 = document.querySelector(
+        `div[threaduid='${threadUid}']`
+      );
+      (0, import_generateThread2.handleEmptyThreads)();
+      const closestDiv = buttonRef.current?.closest("div[field-path]");
+      if (closestDiv) {
+        closestDiv.style.zIndex = "999";
+      }
+      setShowPopup(false);
+      if (action === "open" && thread2 && thread2.contains(buttonRef.current)) {
+        setShowPopup(true);
+        const closestDiv2 = buttonRef.current?.closest("div[field-path]");
+        thread2.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        if (closestDiv2) {
+          closestDiv2.style.zIndex = "1000";
+        }
+        if (config?.collab?.isFeedbackMode === true) {
+          import_configManager.default.set("collab.isFeedbackMode", false);
+        }
+      }
+    };
+    document.addEventListener("toggleCollabPopup", handleTogglePopup);
+    return () => {
+      document.removeEventListener(
+        "toggleCollabPopup",
+        handleTogglePopup
+      );
+    };
+  }, []);
+  const togglePopup = () => {
+    if (!showPopup) {
+      (0, import_generateThread3.toggleCollabPopup)({ threadUid: "", action: "close" });
+      setShowPopup(true);
+      const closestDiv = buttonRef.current?.closest("div[field-path]");
+      if (closestDiv) {
+        closestDiv.style.zIndex = "1000";
+      }
+    } else {
+      setShowPopup(false);
+      const closestDiv = buttonRef.current?.closest("div[field-path]");
+      if (!closestDiv?.hasAttribute("threaduid")) closestDiv?.remove();
+      if (config?.collab?.isFeedbackMode === false) {
+        import_configManager.default.set("collab.isFeedbackMode", true);
+      }
+    }
+  };
+  return {
+    buttonRef,
+    popupRef,
+    showPopup,
+    setShowPopup,
+    activeThread,
+    setActiveThread,
+    togglePopup
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCollabIndicator
+});
+//# sourceMappingURL=useCollabIndicator.cjs.map