@contentstack/live-preview-utils 3.1.3 → 3.2.0

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.js

@@ -0,0 +1,121 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx
+import { useContext, useState } from "preact/hooks";
+import Icon from "../Icon/Icon.js";
+import { ThreadProvider } from "./ContextProvider/index.js";
+import { collabStyles } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var CommentActionBar = ({
+  mode,
+  commentUser,
+  currentUser,
+  commentUID
+}) => {
+  const { setThreadState, onDeleteComment, activeThread, onDeleteThread } = useContext(ThreadProvider);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const setEditComment = (uid) => {
+    setThreadState((prevState) => ({
+      ...prevState,
+      editComment: uid || ""
+    }));
+  };
+  const handleCancel = () => {
+    setEditComment(null);
+  };
+  const handleCommentEdit = () => {
+    if (commentUID) {
+      setEditComment(commentUID);
+    }
+  };
+  const handleCommentDelete = async () => {
+    if (!commentUID || isDeleting) {
+      return;
+    }
+    setIsDeleting(true);
+    try {
+      const deleteResponse = await onDeleteComment({
+        threadUid: activeThread?._id,
+        commentUid: commentUID
+      });
+      setThreadState((prevState) => {
+        const updatedComments = prevState.comments.filter(
+          (comment) => comment._id !== commentUID
+        );
+        if (prevState.commentCount - 1 === 0) {
+          onDeleteThread({ threadUid: activeThread?._id });
+        }
+        return {
+          ...prevState,
+          comments: updatedComments,
+          commentCount: prevState.commentCount - 1
+        };
+      });
+    } catch (error) {
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  if (mode === "edit" && commentUID) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          "collab-thread-comment-action--wrapper",
+          collabStyles()["collab-thread-comment-action--wrapper"]
+        ),
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Cancel",
+            withTooltip: true,
+            tooltipContent: "Cancel",
+            onClick: handleCancel
+          }
+        )
+      }
+    );
+  }
+  if (commentUser?.uid !== currentUser?.uid || !commentUID) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "collab-thread-comment-action--wrapper",
+        collabStyles()["collab-thread-comment-action--wrapper"]
+      ),
+      "data-testid": "collab-thread-comment-action--wrapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Edit",
+            tooltipContent: "Edit",
+            withTooltip: true,
+            testId: "collab-thread-comment-edit",
+            onClick: handleCommentEdit
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "Delete",
+            tooltipContent: "Delete",
+            withTooltip: true,
+            testId: "collab-thread-comment-delete",
+            onClick: handleCommentDelete,
+            disabled: isDeleting
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentActionBar_default = CommentActionBar;
+export {
+  CommentActionBar_default as default
+};
+//# sourceMappingURL=CommentActionBar.js.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useContext, useState } from \"preact/hooks\";\nimport {\n    IThreadPopupState,\n    ICommentActionBar,\n} from \"../../../types/collab.types\";\nimport Icon from \"../Icon/Icon\";\nimport { ThreadProvider } from \"./ContextProvider\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst CommentActionBar: React.FC<ICommentActionBar> = ({\n    mode,\n    commentUser,\n    currentUser,\n    commentUID,\n}) => {\n    const { setThreadState, onDeleteComment, activeThread, onDeleteThread } =\n        useContext(ThreadProvider)!;\n    const [isDeleting, setIsDeleting] = useState(false);\n\n    const setEditComment = (uid: string | null) => {\n        setThreadState((prevState: IThreadPopupState) => ({\n            ...prevState,\n            editComment: uid || \"\",\n        }));\n    };\n\n    const handleCancel = () => {\n        setEditComment(null);\n    };\n\n    const handleCommentEdit = () => {\n        if (commentUID) {\n            setEditComment(commentUID);\n        }\n    };\n\n    const handleCommentDelete = async () => {\n        if (!commentUID || isDeleting) {\n            return;\n        }\n\n        setIsDeleting(true);\n\n        try {\n            const deleteResponse = await onDeleteComment({\n                threadUid: activeThread?._id,\n                commentUid: commentUID,\n            });\n\n            setThreadState((prevState: IThreadPopupState) => {\n                const updatedComments = prevState.comments.filter(\n                    (comment) => comment._id !== commentUID\n                );\n                if (prevState.commentCount - 1 === 0) {\n                    onDeleteThread({ threadUid: activeThread?._id });\n                }\n                return {\n                    ...prevState,\n                    comments: updatedComments,\n                    commentCount: prevState.commentCount - 1,\n                };\n            });\n        } catch (error: any) {\n        } finally {\n            setIsDeleting(false);\n        }\n    };\n\n    if (mode === \"edit\" && commentUID) {\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-comment-action--wrapper\",\n                    collabStyles()[\"collab-thread-comment-action--wrapper\"]\n                )}\n            >\n                <Icon\n                    icon=\"Cancel\"\n                    withTooltip\n                    tooltipContent=\"Cancel\"\n                    onClick={handleCancel}\n                />\n            </div>\n        );\n    }\n\n    if (commentUser?.uid !== currentUser?.uid || !commentUID) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment-action--wrapper\",\n                collabStyles()[\"collab-thread-comment-action--wrapper\"]\n            )}\n            data-testid=\"collab-thread-comment-action--wrapper\"\n        >\n            <Icon\n                icon=\"Edit\"\n                tooltipContent=\"Edit\"\n                withTooltip\n                testId=\"collab-thread-comment-edit\"\n                onClick={handleCommentEdit}\n            />\n            <Icon\n                icon=\"Delete\"\n                tooltipContent=\"Delete\"\n                withTooltip\n                testId=\"collab-thread-comment-delete\"\n                onClick={handleCommentDelete}\n                disabled={isDeleting}\n            />\n        </div>\n    );\n};\n\nexport default CommentActionBar;\n"],"mappings":";;;AAEA,SAAS,YAAY,gBAAgB;AAKrC,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAqEP,cAeR,YAfQ;AAnEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,IAClE,WAAW,cAAc;AAC7B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,iBAAiB,CAAC,QAAuB;AAC3C,mBAAe,CAAC,eAAkC;AAAA,MAC9C,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,IACxB,EAAE;AAAA,EACN;AAEA,QAAM,eAAe,MAAM;AACvB,mBAAe,IAAI;AAAA,EACvB;AAEA,QAAM,oBAAoB,MAAM;AAC5B,QAAI,YAAY;AACZ,qBAAe,UAAU;AAAA,IAC7B;AAAA,EACJ;AAEA,QAAM,sBAAsB,YAAY;AACpC,QAAI,CAAC,cAAc,YAAY;AAC3B;AAAA,IACJ;AAEA,kBAAc,IAAI;AAElB,QAAI;AACA,YAAM,iBAAiB,MAAM,gBAAgB;AAAA,QACzC,WAAW,cAAc;AAAA,QACzB,YAAY;AAAA,MAChB,CAAC;AAED,qBAAe,CAAC,cAAiC;AAC7C,cAAM,kBAAkB,UAAU,SAAS;AAAA,UACvC,CAAC,YAAY,QAAQ,QAAQ;AAAA,QACjC;AACA,YAAI,UAAU,eAAe,MAAM,GAAG;AAClC,yBAAe,EAAE,WAAW,cAAc,IAAI,CAAC;AAAA,QACnD;AACA,eAAO;AAAA,UACH,GAAG;AAAA,UACH,UAAU;AAAA,UACV,cAAc,UAAU,eAAe;AAAA,QAC3C;AAAA,MACJ,CAAC;AAAA,IACL,SAAS,OAAY;AAAA,IACrB,UAAE;AACE,oBAAc,KAAK;AAAA,IACvB;AAAA,EACJ;AAEA,MAAI,SAAS,UAAU,YAAY;AAC/B,WACI;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,uCAAuC;AAAA,QAC1D;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,aAAW;AAAA,YACX,gBAAe;AAAA,YACf,SAAS;AAAA;AAAA,QACb;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,MAAI,aAAa,QAAQ,aAAa,OAAO,CAAC,YAAY;AACtD,WAAO;AAAA,EACX;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,uCAAuC;AAAA,MAC1D;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA,YACT,UAAU;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,2BAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.cjs

@@ -0,0 +1,159 @@
+"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/components/Collab/ThreadPopup/CommentCard.tsx
+var CommentCard_exports = {};
+__export(CommentCard_exports, {
+  default: () => CommentCard_default
+});
+module.exports = __toCommonJS(CommentCard_exports);
+var import_hooks = require("preact/hooks");
+var import_CommentTextArea = __toESM(require("./CommentTextArea.cjs"), 1);
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
+var import_CommentActionBar = __toESM(require("./CommentActionBar.cjs"), 1);
+var import_CommentResolvedText = __toESM(require("./CommentResolvedText.cjs"), 1);
+var import_Avatar = __toESM(require("../Avatar/Avatar.cjs"), 1);
+var import_ThreadBody = __toESM(require("./loader/ThreadBody.cjs"), 1);
+var import_collab = require("../../../collab.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var formatCommentDate = (comment) => {
+  return comment ? (0, import_collabUtils.formatDate)(comment.updatedAt || comment.createdAt) : "";
+};
+var CommentCard = ({
+  userState,
+  comment,
+  onClose,
+  handleOnSaveRef,
+  mode
+}) => {
+  const [commentUser, setCommentUser] = (0, import_hooks.useState)(null);
+  const [isHovered, setIsHovered] = (0, import_hooks.useState)(false);
+  (0, import_hooks.useEffect)(() => {
+    setCommentUser(
+      comment ? userState.userMap[comment.createdBy] : userState.currentUser
+    );
+  }, [comment, userState]);
+  const formattedDate = (0, import_hooks.useMemo)(() => formatCommentDate(comment), [comment]);
+  if (!commentUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThreadBody.default, {}, "collab-thread-body--comment-loader");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "collab-thread-comment--wrapper",
+        (0, import_collab.collabStyles)()["collab-thread-comment--wrapper"]
+      ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "collab-thread-comment--user-details",
+              "flex-v-center",
+              (0, import_collab.collabStyles)()["collab-thread-comment--user-details"],
+              import_collab.flexAlignCenter
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Avatar.default,
+                {
+                  avatar: {
+                    name: (0, import_collabUtils.getUserName)(commentUser),
+                    id: commentUser.uid
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: (0, import_classnames.default)(
+                    "collab-thread-comment--user-details__text",
+                    (0, import_collab.collabStyles)()["collab-thread-comment--user-details__text"]
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "collab-thread-comment--user-name",
+                          (0, import_collab.collabStyles)()["collab-thread-comment--user-name"]
+                        ),
+                        children: (0, import_collabUtils.getUserName)(commentUser)
+                      }
+                    ),
+                    comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "collab-thread-comment--time-details",
+                          (0, import_collab.collabStyles)()["collab-thread-comment--time-details"]
+                        ),
+                        children: formattedDate
+                      }
+                    )
+                  ]
+                }
+              ),
+              isHovered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_CommentActionBar.default,
+                {
+                  mode,
+                  commentUser,
+                  currentUser: userState.currentUser,
+                  commentUID: comment?._id
+                }
+              )
+            ]
+          }
+        ),
+        mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_CommentTextArea.default,
+          {
+            onClose,
+            userState,
+            handleOnSaveRef,
+            comment
+          }
+        ) : comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_CommentResolvedText.default,
+          {
+            comment,
+            userState
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentCard_default = CommentCard;
+//# sourceMappingURL=CommentCard.cjs.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useState, useMemo } from \"preact/hooks\";\nimport CommentTextArea from \"./CommentTextArea\";\nimport {\n    ICommentCard,\n    IMessageDTO,\n    IUserDTO,\n} from \"../../../types/collab.types\";\nimport { getUserName, formatDate } from \"../../../utils/collabUtils\";\nimport CommentActionBar from \"./CommentActionBar\";\nimport CommentResolvedText from \"./CommentResolvedText\";\nimport Avatar from \"../Avatar/Avatar\";\nimport ThreadBodyLoader from \"./loader/ThreadBody\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst formatCommentDate = (comment: IMessageDTO | null): string => {\n    return comment ? formatDate(comment.updatedAt || comment.createdAt) : \"\";\n};\n\nconst CommentCard = ({\n    userState,\n    comment,\n    onClose,\n    handleOnSaveRef,\n    mode,\n}: ICommentCard) => {\n    const [commentUser, setCommentUser] = useState<IUserDTO | null>(null);\n    const [isHovered, setIsHovered] = useState(false);\n\n    useEffect(() => {\n        setCommentUser(\n            comment\n                ? userState.userMap[comment.createdBy]\n                : userState.currentUser\n        );\n    }, [comment, userState]);\n\n    const formattedDate = useMemo(() => formatCommentDate(comment), [comment]);\n\n    if (!commentUser) {\n        return <ThreadBodyLoader key=\"collab-thread-body--comment-loader\" />;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment--wrapper\",\n                collabStyles()[\"collab-thread-comment--wrapper\"]\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n        >\n            <div\n                className={classNames(\n                    \"collab-thread-comment--user-details\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-comment--user-details\"],\n                    flexAlignCenter\n                )}\n            >\n                <Avatar\n                    avatar={\n                        {\n                            name: getUserName(commentUser),\n                            id: commentUser.uid,\n                        } as any\n                    }\n                />\n                <div\n                    className={classNames(\n                        \"collab-thread-comment--user-details__text\",\n                        collabStyles()[\n                            \"collab-thread-comment--user-details__text\"\n                        ]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-comment--user-name\",\n                            collabStyles()[\"collab-thread-comment--user-name\"]\n                        )}\n                    >\n                        {getUserName(commentUser)}\n                    </div>\n                    {comment && (\n                        <div\n                            className={classNames(\n                                \"collab-thread-comment--time-details\",\n                                collabStyles()[\n                                    \"collab-thread-comment--time-details\"\n                                ]\n                            )}\n                        >\n                            {formattedDate}\n                        </div>\n                    )}\n                </div>\n                {isHovered && (\n                    <CommentActionBar\n                        mode={mode}\n                        commentUser={commentUser}\n                        currentUser={userState.currentUser}\n                        commentUID={comment?._id}\n                    />\n                )}\n            </div>\n            {mode === \"edit\" ? (\n                <CommentTextArea\n                    onClose={onClose}\n                    userState={userState}\n                    handleOnSaveRef={handleOnSaveRef}\n                    comment={comment}\n                />\n            ) : (\n                comment && (\n                    <CommentResolvedText\n                        comment={comment}\n                        userState={userState}\n                    />\n                )\n            )}\n        </div>\n    );\n};\n\nexport default CommentCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AAC7C,6BAA4B;AAM5B,yBAAwC;AACxC,8BAA6B;AAC7B,iCAAgC;AAChC,oBAAmB;AACnB,wBAA6B;AAC7B,oBAA8C;AAC9C,wBAAuB;AA2BR;AAzBf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,cAAU,+BAAW,QAAQ,aAAa,QAAQ,SAAS,IAAI;AAC1E;AAEA,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAoB;AAChB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA0B,IAAI;AACpE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACZ;AAAA,MACI,UACM,UAAU,QAAQ,QAAQ,SAAS,IACnC,UAAU;AAAA,IACpB;AAAA,EACJ,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,oBAAgB,sBAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEzE,MAAI,CAAC,aAAa;AACd,WAAO,4CAAC,kBAAAA,SAAA,IAAqB,oCAAqC;AAAA,EACtE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA;AAAA,kBACA,4BAAa,EAAE,qCAAqC;AAAA,cACpD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC,cAAAC;AAAA,gBAAA;AAAA,kBACG,QACI;AAAA,oBACI,UAAM,gCAAY,WAAW;AAAA,oBAC7B,IAAI,YAAY;AAAA,kBACpB;AAAA;AAAA,cAER;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAD;AAAA,oBACP;AAAA,wBACA,4BAAa,EACT,2CACJ;AAAA,kBACJ;AAAA,kBAEA;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EAAE,kCAAkC;AAAA,wBACrD;AAAA,wBAEC,8CAAY,WAAW;AAAA;AAAA,oBAC5B;AAAA,oBACC,WACG;AAAA,sBAAC;AAAA;AAAA,wBACG,eAAW,kBAAAA;AAAA,0BACP;AAAA,8BACA,4BAAa,EACT,qCACJ;AAAA,wBACJ;AAAA,wBAEC;AAAA;AAAA,oBACL;AAAA;AAAA;AAAA,cAER;AAAA,cACC,aACG;AAAA,gBAAC,wBAAAE;AAAA,gBAAA;AAAA,kBACG;AAAA,kBACA;AAAA,kBACA,aAAa,UAAU;AAAA,kBACvB,YAAY,SAAS;AAAA;AAAA,cACzB;AAAA;AAAA;AAAA,QAER;AAAA,QACC,SAAS,SACN;AAAA,UAAC,uBAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACJ,IAEA,WACI;AAAA,UAAC,2BAAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EAGZ;AAER;AAEA,IAAO,sBAAQ;","names":["ThreadBodyLoader","classNames","Avatar","CommentActionBar","CommentTextArea","CommentResolvedText"]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.d.cts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentCard } from '../../../types/collab.types.cjs';
+
+/** @jsxImportSource preact */
+
+declare const CommentCard: ({ userState, comment, onClose, handleOnSaveRef, mode, }: ICommentCard) => React.JSX.Element;
+
+export { CommentCard as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'preact/compat';
+import { ICommentCard } from '../../../types/collab.types.js';
+
+/** @jsxImportSource preact */
+
+declare const CommentCard: ({ userState, comment, onClose, handleOnSaveRef, mode, }: ICommentCard) => React.JSX.Element;
+
+export { CommentCard as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.js

@@ -0,0 +1,130 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx
+import { useEffect, useState, useMemo } from "preact/hooks";
+import CommentTextArea from "./CommentTextArea.js";
+import { getUserName, formatDate } from "../../../utils/collabUtils.js";
+import CommentActionBar from "./CommentActionBar.js";
+import CommentResolvedText from "./CommentResolvedText.js";
+import Avatar from "../Avatar/Avatar.js";
+import ThreadBodyLoader from "./loader/ThreadBody.js";
+import { collabStyles, flexAlignCenter } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var formatCommentDate = (comment) => {
+  return comment ? formatDate(comment.updatedAt || comment.createdAt) : "";
+};
+var CommentCard = ({
+  userState,
+  comment,
+  onClose,
+  handleOnSaveRef,
+  mode
+}) => {
+  const [commentUser, setCommentUser] = useState(null);
+  const [isHovered, setIsHovered] = useState(false);
+  useEffect(() => {
+    setCommentUser(
+      comment ? userState.userMap[comment.createdBy] : userState.currentUser
+    );
+  }, [comment, userState]);
+  const formattedDate = useMemo(() => formatCommentDate(comment), [comment]);
+  if (!commentUser) {
+    return /* @__PURE__ */ jsx(ThreadBodyLoader, {}, "collab-thread-body--comment-loader");
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "collab-thread-comment--wrapper",
+        collabStyles()["collab-thread-comment--wrapper"]
+      ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "collab-thread-comment--user-details",
+              "flex-v-center",
+              collabStyles()["collab-thread-comment--user-details"],
+              flexAlignCenter
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  avatar: {
+                    name: getUserName(commentUser),
+                    id: commentUser.uid
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    "collab-thread-comment--user-details__text",
+                    collabStyles()["collab-thread-comment--user-details__text"]
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          "collab-thread-comment--user-name",
+                          collabStyles()["collab-thread-comment--user-name"]
+                        ),
+                        children: getUserName(commentUser)
+                      }
+                    ),
+                    comment && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          "collab-thread-comment--time-details",
+                          collabStyles()["collab-thread-comment--time-details"]
+                        ),
+                        children: formattedDate
+                      }
+                    )
+                  ]
+                }
+              ),
+              isHovered && /* @__PURE__ */ jsx(
+                CommentActionBar,
+                {
+                  mode,
+                  commentUser,
+                  currentUser: userState.currentUser,
+                  commentUID: comment?._id
+                }
+              )
+            ]
+          }
+        ),
+        mode === "edit" ? /* @__PURE__ */ jsx(
+          CommentTextArea,
+          {
+            onClose,
+            userState,
+            handleOnSaveRef,
+            comment
+          }
+        ) : comment && /* @__PURE__ */ jsx(
+          CommentResolvedText,
+          {
+            comment,
+            userState
+          }
+        )
+      ]
+    }
+  );
+};
+var CommentCard_default = CommentCard;
+export {
+  CommentCard_default as default
+};
+//# sourceMappingURL=CommentCard.js.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect, useState, useMemo } from \"preact/hooks\";\nimport CommentTextArea from \"./CommentTextArea\";\nimport {\n    ICommentCard,\n    IMessageDTO,\n    IUserDTO,\n} from \"../../../types/collab.types\";\nimport { getUserName, formatDate } from \"../../../utils/collabUtils\";\nimport CommentActionBar from \"./CommentActionBar\";\nimport CommentResolvedText from \"./CommentResolvedText\";\nimport Avatar from \"../Avatar/Avatar\";\nimport ThreadBodyLoader from \"./loader/ThreadBody\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst formatCommentDate = (comment: IMessageDTO | null): string => {\n    return comment ? formatDate(comment.updatedAt || comment.createdAt) : \"\";\n};\n\nconst CommentCard = ({\n    userState,\n    comment,\n    onClose,\n    handleOnSaveRef,\n    mode,\n}: ICommentCard) => {\n    const [commentUser, setCommentUser] = useState<IUserDTO | null>(null);\n    const [isHovered, setIsHovered] = useState(false);\n\n    useEffect(() => {\n        setCommentUser(\n            comment\n                ? userState.userMap[comment.createdBy]\n                : userState.currentUser\n        );\n    }, [comment, userState]);\n\n    const formattedDate = useMemo(() => formatCommentDate(comment), [comment]);\n\n    if (!commentUser) {\n        return <ThreadBodyLoader key=\"collab-thread-body--comment-loader\" />;\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"collab-thread-comment--wrapper\",\n                collabStyles()[\"collab-thread-comment--wrapper\"]\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n        >\n            <div\n                className={classNames(\n                    \"collab-thread-comment--user-details\",\n                    \"flex-v-center\",\n                    collabStyles()[\"collab-thread-comment--user-details\"],\n                    flexAlignCenter\n                )}\n            >\n                <Avatar\n                    avatar={\n                        {\n                            name: getUserName(commentUser),\n                            id: commentUser.uid,\n                        } as any\n                    }\n                />\n                <div\n                    className={classNames(\n                        \"collab-thread-comment--user-details__text\",\n                        collabStyles()[\n                            \"collab-thread-comment--user-details__text\"\n                        ]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-comment--user-name\",\n                            collabStyles()[\"collab-thread-comment--user-name\"]\n                        )}\n                    >\n                        {getUserName(commentUser)}\n                    </div>\n                    {comment && (\n                        <div\n                            className={classNames(\n                                \"collab-thread-comment--time-details\",\n                                collabStyles()[\n                                    \"collab-thread-comment--time-details\"\n                                ]\n                            )}\n                        >\n                            {formattedDate}\n                        </div>\n                    )}\n                </div>\n                {isHovered && (\n                    <CommentActionBar\n                        mode={mode}\n                        commentUser={commentUser}\n                        currentUser={userState.currentUser}\n                        commentUID={comment?._id}\n                    />\n                )}\n            </div>\n            {mode === \"edit\" ? (\n                <CommentTextArea\n                    onClose={onClose}\n                    userState={userState}\n                    handleOnSaveRef={handleOnSaveRef}\n                    comment={comment}\n                />\n            ) : (\n                comment && (\n                    <CommentResolvedText\n                        comment={comment}\n                        userState={userState}\n                    />\n                )\n            )}\n        </div>\n    );\n};\n\nexport default CommentCard;\n"],"mappings":";;;AAEA,SAAS,WAAW,UAAU,eAAe;AAC7C,OAAO,qBAAqB;AAM5B,SAAS,aAAa,kBAAkB;AACxC,OAAO,sBAAsB;AAC7B,OAAO,yBAAyB;AAChC,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,SAAS,cAAc,uBAAuB;AAC9C,OAAO,gBAAgB;AA2BR,cA4BC,YA5BD;AAzBf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,UAAU,WAAW,QAAQ,aAAa,QAAQ,SAAS,IAAI;AAC1E;AAEA,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAoB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAA0B,IAAI;AACpE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACZ;AAAA,MACI,UACM,UAAU,QAAQ,QAAQ,SAAS,IACnC,UAAU;AAAA,IACpB;AAAA,EACJ,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,QAAM,gBAAgB,QAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEzE,MAAI,CAAC,aAAa;AACd,WAAO,oBAAC,sBAAqB,oCAAqC;AAAA,EACtE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,cACA,aAAa,EAAE,qCAAqC;AAAA,cACpD;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,QACI;AAAA,oBACI,MAAM,YAAY,WAAW;AAAA,oBAC7B,IAAI,YAAY;AAAA,kBACpB;AAAA;AAAA,cAER;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACG,WAAW;AAAA,oBACP;AAAA,oBACA,aAAa,EACT,2CACJ;AAAA,kBACJ;AAAA,kBAEA;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACG,WAAW;AAAA,0BACP;AAAA,0BACA,aAAa,EAAE,kCAAkC;AAAA,wBACrD;AAAA,wBAEC,sBAAY,WAAW;AAAA;AAAA,oBAC5B;AAAA,oBACC,WACG;AAAA,sBAAC;AAAA;AAAA,wBACG,WAAW;AAAA,0BACP;AAAA,0BACA,aAAa,EACT,qCACJ;AAAA,wBACJ;AAAA,wBAEC;AAAA;AAAA,oBACL;AAAA;AAAA;AAAA,cAER;AAAA,cACC,aACG;AAAA,gBAAC;AAAA;AAAA,kBACG;AAAA,kBACA;AAAA,kBACA,aAAa,UAAU;AAAA,kBACvB,YAAY,SAAS;AAAA;AAAA,cACzB;AAAA;AAAA;AAAA,QAER;AAAA,QACC,SAAS,SACN;AAAA,UAAC;AAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACJ,IAEA,WACI;AAAA,UAAC;AAAA;AAAA,YACG;AAAA,YACA;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EAGZ;AAER;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.cjs

@@ -0,0 +1,58 @@
+"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/components/Collab/ThreadPopup/CommentResolvedText.tsx
+var CommentResolvedText_exports = {};
+__export(CommentResolvedText_exports, {
+  default: () => CommentResolvedText_default
+});
+module.exports = __toCommonJS(CommentResolvedText_exports);
+var import_hooks = require("preact/hooks");
+var import_collabUtils = require("../../../utils/collabUtils.cjs");
+var import_collab = require("../../../collab.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var CommentResolvedText = ({ comment, userState }) => {
+  const sanitizedText = (0, import_hooks.useMemo)(() => {
+    return (0, import_collabUtils.getMessageWithDisplayName)(comment, userState, "html") ?? "";
+  }, [comment.message, userState.userMap, comment.toUsers]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-testid": "collab-thread-comment--message",
+      className: (0, import_classnames.default)(
+        "collab-thread-comment--message",
+        (0, import_collab.collabStyles)()["collab-thread-comment--message"]
+      ),
+      dangerouslySetInnerHTML: { __html: sanitizedText }
+    }
+  );
+};
+var CommentResolvedText_default = CommentResolvedText;
+//# sourceMappingURL=CommentResolvedText.cjs.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { useMemo } from \"preact/hooks\";\nimport { ICommentResolvedText } from \"../../../types/collab.types\";\nimport { getMessageWithDisplayName } from \"../../../utils/collabUtils\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst CommentResolvedText = ({ comment, userState }: ICommentResolvedText) => {\n    const sanitizedText = useMemo(() => {\n        return getMessageWithDisplayName(comment, userState, \"html\") ?? \"\";\n    }, [comment.message, userState.userMap, comment.toUsers]);\n\n    return (\n        <div\n            data-testid={\"collab-thread-comment--message\"}\n            className={classNames(\n                \"collab-thread-comment--message\",\n                collabStyles()[\"collab-thread-comment--message\"]\n            )}\n            dangerouslySetInnerHTML={{ __html: sanitizedText }}\n        ></div>\n    );\n};\n\nexport default CommentResolvedText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AAExB,yBAA0C;AAC1C,oBAA6B;AAC7B,wBAAuB;AAQf;AANR,IAAM,sBAAsB,CAAC,EAAE,SAAS,UAAU,MAA4B;AAC1E,QAAM,oBAAgB,sBAAQ,MAAM;AAChC,eAAO,8CAA0B,SAAS,WAAW,MAAM,KAAK;AAAA,EACpE,GAAG,CAAC,QAAQ,SAAS,UAAU,SAAS,QAAQ,OAAO,CAAC;AAExD,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAa;AAAA,MACb,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,yBAAyB,EAAE,QAAQ,cAAc;AAAA;AAAA,EACpD;AAET;AAEA,IAAO,8BAAQ;","names":["classNames"]}

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.d.cts

@@ -0,0 +1,6 @@
+import * as preact from 'preact';
+import { ICommentResolvedText } from '../../../types/collab.types.cjs';
+
+declare const CommentResolvedText: ({ comment, userState }: ICommentResolvedText) => preact.JSX.Element;
+
+export { CommentResolvedText as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.d.ts

@@ -0,0 +1,6 @@
+import * as preact from 'preact';
+import { ICommentResolvedText } from '../../../types/collab.types.js';
+
+declare const CommentResolvedText: ({ comment, userState }: ICommentResolvedText) => preact.JSX.Element;
+
+export { CommentResolvedText as default };

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.js

@@ -0,0 +1,29 @@
+import "../../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.tsx
+import { useMemo } from "preact/hooks";
+import { getMessageWithDisplayName } from "../../../utils/collabUtils.js";
+import { collabStyles } from "../../../collab.style.js";
+import classNames from "classnames";
+import { jsx } from "preact/jsx-runtime";
+var CommentResolvedText = ({ comment, userState }) => {
+  const sanitizedText = useMemo(() => {
+    return getMessageWithDisplayName(comment, userState, "html") ?? "";
+  }, [comment.message, userState.userMap, comment.toUsers]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "collab-thread-comment--message",
+      className: classNames(
+        "collab-thread-comment--message",
+        collabStyles()["collab-thread-comment--message"]
+      ),
+      dangerouslySetInnerHTML: { __html: sanitizedText }
+    }
+  );
+};
+var CommentResolvedText_default = CommentResolvedText;
+export {
+  CommentResolvedText_default as default
+};
+//# sourceMappingURL=CommentResolvedText.js.map

package/dist/modern/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { useMemo } from \"preact/hooks\";\nimport { ICommentResolvedText } from \"../../../types/collab.types\";\nimport { getMessageWithDisplayName } from \"../../../utils/collabUtils\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst CommentResolvedText = ({ comment, userState }: ICommentResolvedText) => {\n    const sanitizedText = useMemo(() => {\n        return getMessageWithDisplayName(comment, userState, \"html\") ?? \"\";\n    }, [comment.message, userState.userMap, comment.toUsers]);\n\n    return (\n        <div\n            data-testid={\"collab-thread-comment--message\"}\n            className={classNames(\n                \"collab-thread-comment--message\",\n                collabStyles()[\"collab-thread-comment--message\"]\n            )}\n            dangerouslySetInnerHTML={{ __html: sanitizedText }}\n        ></div>\n    );\n};\n\nexport default CommentResolvedText;\n"],"mappings":";;;AACA,SAAS,eAAe;AAExB,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAQf;AANR,IAAM,sBAAsB,CAAC,EAAE,SAAS,UAAU,MAA4B;AAC1E,QAAM,gBAAgB,QAAQ,MAAM;AAChC,WAAO,0BAA0B,SAAS,WAAW,MAAM,KAAK;AAAA,EACpE,GAAG,CAAC,QAAQ,SAAS,UAAU,SAAS,QAAQ,OAAO,CAAC;AAExD,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAa;AAAA,MACb,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,gCAAgC;AAAA,MACnD;AAAA,MACA,yBAAyB,EAAE,QAAQ,cAAc;AAAA;AAAA,EACpD;AAET;AAEA,IAAO,8BAAQ;","names":[]}