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

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

@@ -46,6 +46,7 @@ var CommentActionBar = ({
   commentUID
 }) => {
   const { setThreadState, onDeleteComment, activeThread, onDeleteThread } = (0, import_hooks.useContext)(import_ContextProvider.ThreadProvider);
+  const [isDeleting, setIsDeleting] = (0, import_hooks.useState)(false);
   const setEditComment = (uid) => {
     setThreadState((prevState) => ({
       ...prevState,
@@ -61,9 +62,10 @@ var CommentActionBar = ({
     }
   };
   const handleCommentDelete = async () => {
-    if (!commentUID) {
+    if (!commentUID || isDeleting) {
       return;
     }
+    setIsDeleting(true);
     try {
       const deleteResponse = await onDeleteComment({
         threadUid: activeThread?._id,
@@ -83,6 +85,8 @@ var CommentActionBar = ({
         };
       });
     } catch (error) {
+    } finally {
+      setIsDeleting(false);
     }
   };
   if (mode === "edit" && commentUID) {
@@ -105,7 +109,7 @@ var CommentActionBar = ({
       }
     );
   }
-  if (commentUser.uid !== currentUser.uid || !commentUID) {
+  if (commentUser?.uid !== currentUser?.uid || !commentUID) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -134,7 +138,8 @@ var CommentActionBar = ({
             tooltipContent: "Delete",
             withTooltip: true,
             testId: "collab-thread-comment-delete",
-            onClick: handleCommentDelete
+            onClick: handleCommentDelete,
+            disabled: isDeleting
           }
         )
       ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useContext } 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\n// Define the CommentActionBar component\nconst CommentActionBar: React.FC<ICommentActionBar> = ({\n    mode,\n    commentUser,\n    currentUser,\n    commentUID,\n}) => {\n    const { setThreadState, onDeleteComment, activeThread, onDeleteThread } =\n        useContext(ThreadProvider)!;\n\n    const setEditComment = (uid: string | null) => {\n        setThreadState((prevState: IThreadPopupState) => ({\n            ...prevState,\n            editComment: uid || \"\",\n        }));\n    };\n\n    // Handler for cancel action\n    const handleCancel = () => {\n        setEditComment(null);\n    };\n\n    // Handler for editing a comment\n    const handleCommentEdit = () => {\n        if (commentUID) {\n            setEditComment(commentUID);\n        }\n    };\n\n    // Handler for deleting a comment\n    const handleCommentDelete = async () => {\n        if (!commentUID) {\n            return;\n        }\n        try {\n            // Call the onDeleteComment function\n            const deleteResponse = await onDeleteComment({\n                threadUid: activeThread?._id,\n                commentUid: commentUID,\n            });\n\n            // Update the thread state after successful deletion\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    };\n\n    // Render based on the mode and user permissions\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            />\n        </div>\n    );\n};\n\nexport default CommentActionBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2B;AAK3B,kBAAiB;AACjB,6BAA+B;AAC/B,oBAA6B;AAC7B,wBAAuB;AAqEP;AAlEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,QAClE,yBAAW,qCAAc;AAE7B,QAAM,iBAAiB,CAAC,QAAuB;AAC3C,mBAAe,CAAC,eAAkC;AAAA,MAC9C,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,IACxB,EAAE;AAAA,EACN;AAGA,QAAM,eAAe,MAAM;AACvB,mBAAe,IAAI;AAAA,EACvB;AAGA,QAAM,oBAAoB,MAAM;AAC5B,QAAI,YAAY;AACZ,qBAAe,UAAU;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,sBAAsB,YAAY;AACpC,QAAI,CAAC,YAAY;AACb;AAAA,IACJ;AACA,QAAI;AAEA,YAAM,iBAAiB,MAAM,gBAAgB;AAAA,QACzC,WAAW,cAAc;AAAA,QACzB,YAAY;AAAA,MAChB,CAAC;AAGD,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,IAAC;AAAA,EAC1B;AAGA,MAAI,SAAS,UAAU,YAAY;AAC/B,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,uCAAuC;AAAA,QAC1D;AAAA,QAEA;AAAA,UAAC,YAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,aAAW;AAAA,YACX,gBAAe;AAAA,YACf,SAAS;AAAA;AAAA,QACb;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,MAAI,YAAY,QAAQ,YAAY,OAAO,CAAC,YAAY;AACpD,WAAO;AAAA,EACX;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAD;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,uCAAuC;AAAA,MAC1D;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC,YAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,2BAAQ;","names":["classNames","Icon"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAqC;AAKrC,kBAAiB;AACjB,6BAA+B;AAC/B,oBAA6B;AAC7B,wBAAuB;AAqEP;AAnEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,QAClE,yBAAW,qCAAc;AAC7B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,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,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,uCAAuC;AAAA,QAC1D;AAAA,QAEA;AAAA,UAAC,YAAAC;AAAA,UAAA;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,eAAW,kBAAAD;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,uCAAuC;AAAA,MAC1D;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC,YAAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAe;AAAA,YACf,aAAW;AAAA,YACX,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC,YAAAA;AAAA,UAAA;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":["classNames","Icon"]}

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

@@ -1,7 +1,7 @@
 import "../../../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx
-import { useContext } from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 import Icon from "../Icon/Icon.js";
 import { ThreadProvider } from "./ContextProvider/index.js";
 import { collabStyles } from "../../../collab.style.js";
@@ -14,6 +14,7 @@ var CommentActionBar = ({
   commentUID
 }) => {
   const { setThreadState, onDeleteComment, activeThread, onDeleteThread } = useContext(ThreadProvider);
+  const [isDeleting, setIsDeleting] = useState(false);
   const setEditComment = (uid) => {
     setThreadState((prevState) => ({
       ...prevState,
@@ -29,9 +30,10 @@ var CommentActionBar = ({
     }
   };
   const handleCommentDelete = async () => {
-    if (!commentUID) {
+    if (!commentUID || isDeleting) {
       return;
     }
+    setIsDeleting(true);
     try {
       const deleteResponse = await onDeleteComment({
         threadUid: activeThread?._id,
@@ -51,6 +53,8 @@ var CommentActionBar = ({
         };
       });
     } catch (error) {
+    } finally {
+      setIsDeleting(false);
     }
   };
   if (mode === "edit" && commentUID) {
@@ -73,7 +77,7 @@ var CommentActionBar = ({
       }
     );
   }
-  if (commentUser.uid !== currentUser.uid || !commentUID) {
+  if (commentUser?.uid !== currentUser?.uid || !commentUID) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -102,7 +106,8 @@ var CommentActionBar = ({
             tooltipContent: "Delete",
             withTooltip: true,
             testId: "collab-thread-comment-delete",
-            onClick: handleCommentDelete
+            onClick: handleCommentDelete,
+            disabled: isDeleting
           }
         )
       ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentActionBar.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useContext } 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\n// Define the CommentActionBar component\nconst CommentActionBar: React.FC<ICommentActionBar> = ({\n    mode,\n    commentUser,\n    currentUser,\n    commentUID,\n}) => {\n    const { setThreadState, onDeleteComment, activeThread, onDeleteThread } =\n        useContext(ThreadProvider)!;\n\n    const setEditComment = (uid: string | null) => {\n        setThreadState((prevState: IThreadPopupState) => ({\n            ...prevState,\n            editComment: uid || \"\",\n        }));\n    };\n\n    // Handler for cancel action\n    const handleCancel = () => {\n        setEditComment(null);\n    };\n\n    // Handler for editing a comment\n    const handleCommentEdit = () => {\n        if (commentUID) {\n            setEditComment(commentUID);\n        }\n    };\n\n    // Handler for deleting a comment\n    const handleCommentDelete = async () => {\n        if (!commentUID) {\n            return;\n        }\n        try {\n            // Call the onDeleteComment function\n            const deleteResponse = await onDeleteComment({\n                threadUid: activeThread?._id,\n                commentUid: commentUID,\n            });\n\n            // Update the thread state after successful deletion\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    };\n\n    // Render based on the mode and user permissions\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            />\n        </div>\n    );\n};\n\nexport default CommentActionBar;\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAK3B,OAAO,UAAU;AACjB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAqEP,cAeR,YAfQ;AAlEhB,IAAM,mBAAgD,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,EAAE,gBAAgB,iBAAiB,cAAc,eAAe,IAClE,WAAW,cAAc;AAE7B,QAAM,iBAAiB,CAAC,QAAuB;AAC3C,mBAAe,CAAC,eAAkC;AAAA,MAC9C,GAAG;AAAA,MACH,aAAa,OAAO;AAAA,IACxB,EAAE;AAAA,EACN;AAGA,QAAM,eAAe,MAAM;AACvB,mBAAe,IAAI;AAAA,EACvB;AAGA,QAAM,oBAAoB,MAAM;AAC5B,QAAI,YAAY;AACZ,qBAAe,UAAU;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,sBAAsB,YAAY;AACpC,QAAI,CAAC,YAAY;AACb;AAAA,IACJ;AACA,QAAI;AAEA,YAAM,iBAAiB,MAAM,gBAAgB;AAAA,QACzC,WAAW,cAAc;AAAA,QACzB,YAAY;AAAA,MAChB,CAAC;AAGD,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,IAAC;AAAA,EAC1B;AAGA,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,YAAY,QAAQ,YAAY,OAAO,CAAC,YAAY;AACpD,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;AAAA,QACb;AAAA;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,2BAAQ;","names":[]}
+{"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

@@ -35,7 +35,6 @@ __export(CommentCard_exports, {
 module.exports = __toCommonJS(CommentCard_exports);
 var import_hooks = require("preact/hooks");
 var import_CommentTextArea = __toESM(require("./CommentTextArea.cjs"), 1);
-var import_moment = __toESM(require("moment"), 1);
 var import_collabUtils = require("../../../utils/collabUtils.cjs");
 var import_CommentActionBar = __toESM(require("./CommentActionBar.cjs"), 1);
 var import_CommentResolvedText = __toESM(require("./CommentResolvedText.cjs"), 1);
@@ -45,7 +44,7 @@ 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_moment.default)(comment.createdAt).format("MMM DD, YYYY, hh:mm A") : "";
+  return comment ? (0, import_collabUtils.formatDate)(comment.updatedAt || comment.createdAt) : "";
 };
 var CommentCard = ({
   userState,

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

@@ -1 +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 moment from \"moment\";\nimport { getUserName } 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\n        ? moment(comment.createdAt).format(\"MMM DD, YYYY, hh:mm A\")\n        : \"\";\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,oBAAmB;AACnB,yBAA4B;AAC5B,8BAA6B;AAC7B,iCAAgC;AAChC,oBAAmB;AACnB,wBAA6B;AAC7B,oBAA8C;AAC9C,wBAAuB;AA6BR;AA3Bf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,cACD,cAAAA,SAAO,QAAQ,SAAS,EAAE,OAAO,uBAAuB,IACxD;AACV;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,kBAAAC,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":["moment","ThreadBodyLoader","classNames","Avatar","CommentActionBar","CommentTextArea","CommentResolvedText"]}
+{"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.js

@@ -3,8 +3,7 @@ import "../../../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/components/Collab/ThreadPopup/CommentCard.tsx
 import { useEffect, useState, useMemo } from "preact/hooks";
 import CommentTextArea from "./CommentTextArea.js";
-import moment from "moment";
-import { getUserName } from "../../../utils/collabUtils.js";
+import { getUserName, formatDate } from "../../../utils/collabUtils.js";
 import CommentActionBar from "./CommentActionBar.js";
 import CommentResolvedText from "./CommentResolvedText.js";
 import Avatar from "../Avatar/Avatar.js";
@@ -13,7 +12,7 @@ import { collabStyles, flexAlignCenter } from "../../../collab.style.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "preact/jsx-runtime";
 var formatCommentDate = (comment) => {
-  return comment ? moment(comment.createdAt).format("MMM DD, YYYY, hh:mm A") : "";
+  return comment ? formatDate(comment.updatedAt || comment.createdAt) : "";
 };
 var CommentCard = ({
   userState,

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

@@ -1 +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 moment from \"moment\";\nimport { getUserName } 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\n        ? moment(comment.createdAt).format(\"MMM DD, YYYY, hh:mm A\")\n        : \"\";\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,OAAO,YAAY;AACnB,SAAS,mBAAmB;AAC5B,OAAO,sBAAsB;AAC7B,OAAO,yBAAyB;AAChC,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,SAAS,cAAc,uBAAuB;AAC9C,OAAO,gBAAgB;AA6BR,cA4BC,YA5BD;AA3Bf,IAAM,oBAAoB,CAAC,YAAwC;AAC/D,SAAO,UACD,OAAO,QAAQ,SAAS,EAAE,OAAO,uBAAuB,IACxD;AACV;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":[]}
+{"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

@@ -39,12 +39,9 @@ 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 text = (0, import_hooks.useMemo)(() => {
-    return (0, import_collabUtils.getMessageWithDisplayName)(comment, userState, "html");
-  }, [comment.message, userState.userMap, comment.toUsers]);
   const sanitizedText = (0, import_hooks.useMemo)(() => {
-    return (0, import_collabUtils.sanitizeData)(text);
-  }, [text]);
+    return (0, import_collabUtils.getMessageWithDisplayName)(comment, userState, "html") ?? "";
+  }, [comment.message, userState.userMap, comment.toUsers]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {

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

@@ -1 +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 {\n    getMessageWithDisplayName,\n    sanitizeData,\n} from \"../../../utils/collabUtils\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst CommentResolvedText = ({ comment, userState }: ICommentResolvedText) => {\n    const text = useMemo(() => {\n        return getMessageWithDisplayName(comment, userState, \"html\");\n    }, [comment.message, userState.userMap, comment.toUsers]);\n\n    const sanitizedText = useMemo(() => {\n        return sanitizeData(text);\n    }, [text]);\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,yBAGO;AACP,oBAA6B;AAC7B,wBAAuB;AAYf;AAVR,IAAM,sBAAsB,CAAC,EAAE,SAAS,UAAU,MAA4B;AAC1E,QAAM,WAAO,sBAAQ,MAAM;AACvB,eAAO,8CAA0B,SAAS,WAAW,MAAM;AAAA,EAC/D,GAAG,CAAC,QAAQ,SAAS,UAAU,SAAS,QAAQ,OAAO,CAAC;AAExD,QAAM,oBAAgB,sBAAQ,MAAM;AAChC,eAAO,iCAAa,IAAI;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,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"]}
+{"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.js

@@ -2,20 +2,14 @@ import "../../../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/Collab/ThreadPopup/CommentResolvedText.tsx
 import { useMemo } from "preact/hooks";
-import {
-  getMessageWithDisplayName,
-  sanitizeData
-} from "../../../utils/collabUtils.js";
+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 text = useMemo(() => {
-    return getMessageWithDisplayName(comment, userState, "html");
-  }, [comment.message, userState.userMap, comment.toUsers]);
   const sanitizedText = useMemo(() => {
-    return sanitizeData(text);
-  }, [text]);
+    return getMessageWithDisplayName(comment, userState, "html") ?? "";
+  }, [comment.message, userState.userMap, comment.toUsers]);
   return /* @__PURE__ */ jsx(
     "div",
     {

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

@@ -1 +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 {\n    getMessageWithDisplayName,\n    sanitizeData,\n} from \"../../../utils/collabUtils\";\nimport { collabStyles } from \"../../../collab.style\";\nimport classNames from \"classnames\";\n\nconst CommentResolvedText = ({ comment, userState }: ICommentResolvedText) => {\n    const text = useMemo(() => {\n        return getMessageWithDisplayName(comment, userState, \"html\");\n    }, [comment.message, userState.userMap, comment.toUsers]);\n\n    const sanitizedText = useMemo(() => {\n        return sanitizeData(text);\n    }, [text]);\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;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAYf;AAVR,IAAM,sBAAsB,CAAC,EAAE,SAAS,UAAU,MAA4B;AAC1E,QAAM,OAAO,QAAQ,MAAM;AACvB,WAAO,0BAA0B,SAAS,WAAW,MAAM;AAAA,EAC/D,GAAG,CAAC,QAAQ,SAAS,UAAU,SAAS,QAAQ,OAAO,CAAC;AAExD,QAAM,gBAAgB,QAAQ,MAAM;AAChC,WAAO,aAAa,IAAI;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,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":[]}
+{"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":[]}

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

@@ -35,17 +35,91 @@ __export(CommentTextArea_exports, {
 module.exports = __toCommonJS(CommentTextArea_exports);
 var import_compat = __toESM(require("preact/compat"), 1);
 var import_hooks = require("preact/hooks");
-var import_collab = require("../../../collab.style.cjs");
 var import_useCommentTextArea = require("../../../hooks/useCommentTextArea.cjs");
+var import_collab = require("../../../collab.style.cjs");
 var import_classnames = __toESM(require("classnames"), 1);
 var import_Tooltip = __toESM(require("../Tooltip/Tooltip.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
+var ErrorIndicator = ({
+  errorMessage
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    className: (0, import_classnames.default)(
+      "collab-thread-input-indicator--error",
+      (0, import_collab.collabStyles)()["collab-thread-input-indicator--error"]
+    ),
+    children: errorMessage
+  }
+);
+var CharacterCounter = ({ currentLength, maxLength }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    className: (0, import_classnames.default)(
+      "collab-thread-input-indicator--count",
+      (0, import_collab.collabStyles)()["collab-thread-input-indicator--count"]
+    ),
+    children: [
+      currentLength,
+      "/",
+      maxLength
+    ]
+  }
+);
+var MentionSuggestionsList = ({
+  filteredUsers,
+  selectedIndex,
+  cursorPosition,
+  inputRef,
+  listRef,
+  itemRefs,
+  insertMention,
+  handleKeyDown
+}) => {
+  if (filteredUsers.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "ul",
+    {
+      className: (0, import_classnames.default)(
+        "collab-thread-body--input--textarea--suggestionsList",
+        (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList"]
+      ),
+      style: {
+        ...cursorPosition.showAbove ? {
+          bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top || 0) - cursorPosition.top}px`,
+          top: "auto"
+        } : {
+          top: `${(inputRef.current?.getBoundingClientRect().top || 0) + cursorPosition.top}px`
+        }
+      },
+      ref: listRef,
+      children: filteredUsers.map((user, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "li",
+        {
+          onClick: () => insertMention(user),
+          className: (0, import_classnames.default)(
+            "collab-thread-body--input--textarea--suggestionsList--item",
+            (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item"],
+            index === selectedIndex ? (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
+          ),
+          ref: (el) => itemRefs.current[index] = el,
+          onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
+          tabIndex: -1,
+          "aria-selected": index === selectedIndex,
+          children: (user.display?.length || 0) > 20 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display || ""
+        },
+        user.uid
+      ))
+    }
+  );
+};
 var CommentTextArea = import_compat.default.memo(
   ({ userState, handleOnSaveRef, comment, onClose }) => {
     const {
       state,
       error,
       showSuggestions,
+      cursorPosition,
       selectedIndex,
       filteredUsers,
       inputRef,
@@ -57,6 +131,8 @@ var CommentTextArea = import_compat.default.memo(
       insertMention,
       maxMessageLength
     } = (0, import_useCommentTextArea.useCommentTextArea)(userState, comment, onClose);
+    const onChangeHandler = (event) => handleInputChange(event);
+    const onKeyDownHandler = (event) => handleKeyDown(event);
     (0, import_hooks.useEffect)(() => {
       handleOnSaveRef.current = handleSubmit;
     }, [handleSubmit, handleOnSaveRef]);
@@ -94,47 +170,24 @@ var CommentTextArea = import_compat.default.memo(
                           (0, import_collab.collabStyles)()["collab-thread-body--input--textarea"]
                         ),
                         value: state.message,
-                        onChange: (event) => handleInputChange(event),
-                        onKeyDown: (event) => handleKeyDown(event),
+                        onChange: onChangeHandler,
+                        onKeyDown: onKeyDownHandler,
                         maxLength: maxMessageLength,
-                        placeholder: "Enter a comment",
+                        placeholder: "Enter a comment or tag others using \u201C@\u201D",
                         ref: inputRef
                       }
                     ),
-                    showSuggestions && filteredUsers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "ul",
+                    showSuggestions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      MentionSuggestionsList,
                       {
-                        className: (0, import_classnames.default)(
-                          "collab-thread-body--input--textarea--suggestionsList",
-                          (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList"]
-                        ),
-                        ref: listRef,
-                        children: filteredUsers.map((user, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "li",
-                          {
-                            onClick: () => insertMention(user),
-                            className: (0, import_classnames.default)(
-                              "collab-thread-body--input--textarea--suggestionsList--item",
-                              (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item"],
-                              "collab-thread-body--input--textarea--suggestionsList--item-selected",
-                              index === selectedIndex ? (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
-                            ),
-                            ref: (el) => itemRefs.current[index] = el,
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter") {
-                                insertMention(user);
-                              } else {
-                                handleKeyDown(
-                                  e
-                                );
-                              }
-                            },
-                            tabIndex: -1,
-                            "aria-selected": index === selectedIndex,
-                            children: user.display.length > 20 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: user.display, children: user.display.substring(0, 18) + "..." }) : user.display
-                          },
-                          user.uid
-                        ))
+                        filteredUsers,
+                        selectedIndex,
+                        cursorPosition,
+                        inputRef,
+                        listRef,
+                        itemRefs,
+                        insertMention,
+                        handleKeyDown
                       }
                     )
                   ]
@@ -152,28 +205,12 @@ var CommentTextArea = import_compat.default.memo(
                 import_collab.flexAlignCenter
               ),
               children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorIndicator, { errorMessage: error.message }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
+                  CharacterCounter,
                   {
-                    className: (0, import_classnames.default)(
-                      "collab-thread-input-indicator--error",
-                      (0, import_collab.collabStyles)()["collab-thread-input-indicator--error"]
-                    ),
-                    children: error.message
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "div",
-                  {
-                    className: (0, import_classnames.default)(
-                      "collab-thread-input-indicator--count",
-                      (0, import_collab.collabStyles)()["collab-thread-input-indicator--count"]
-                    ),
-                    children: [
-                      state.message.length,
-                      "/",
-                      maxMessageLength
-                    ]
+                    currentLength: state.message.length,
+                    maxLength: maxMessageLength
                   }
                 )
               ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport { ICommentTextAreaProps } from \"../../../types/collab.types\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n    ({ userState, handleOnSaveRef, comment, onClose }) => {\n        // Use our custom hook to get all the functionality\n        const {\n            state,\n            error,\n            showSuggestions,\n            selectedIndex,\n            filteredUsers,\n            inputRef,\n            listRef,\n            itemRefs,\n            handleInputChange,\n            handleKeyDown,\n            handleSubmit,\n            insertMention,\n            maxMessageLength,\n        } = useCommentTextArea(userState, comment, onClose);\n\n        // Set up save ref for parent component\n        useEffect(() => {\n            handleOnSaveRef.current = handleSubmit;\n        }, [handleSubmit, handleOnSaveRef]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-body--input--wrapper\",\n                    collabStyles()[\"collab-thread-body--input--wrapper\"]\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-body--input\",\n                        collabStyles()[\"collab-thread-body--input\"]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-body--input--textarea--wrapper\",\n                            collabStyles()[\n                                \"collab-thread-body--input--textarea--wrapper\"\n                            ]\n                        )}\n                    >\n                        <textarea\n                            name=\"collab-thread-body--input--textarea\"\n                            id=\"collab-thread-body--input--textarea\"\n                            rows={1}\n                            className={classNames(\n                                \"collab-thread-body--input--textarea\",\n                                collabStyles()[\n                                    \"collab-thread-body--input--textarea\"\n                                ]\n                            )}\n                            value={state.message}\n                            onChange={(event) =>\n                                handleInputChange(event as any)\n                            }\n                            onKeyDown={(event) => handleKeyDown(event as any)}\n                            maxLength={maxMessageLength}\n                            placeholder=\"Enter a comment\"\n                            ref={inputRef}\n                        ></textarea>\n                        {showSuggestions && filteredUsers.length > 0 && (\n                            <ul\n                                className={classNames(\n                                    \"collab-thread-body--input--textarea--suggestionsList\",\n                                    collabStyles()[\n                                        \"collab-thread-body--input--textarea--suggestionsList\"\n                                    ]\n                                )}\n                                // style={{\n                                //     left: `${cursorPosition.left}px`,\n                                //     top: `${cursorPosition.top}px`,\n                                // }}\n                                ref={listRef}\n                            >\n                                {filteredUsers.map((user, index) => (\n                                    <li\n                                        key={user.uid}\n                                        onClick={() => insertMention(user)}\n                                        className={classNames(\n                                            \"collab-thread-body--input--textarea--suggestionsList--item\",\n                                            collabStyles()[\n                                                \"collab-thread-body--input--textarea--suggestionsList--item\"\n                                            ],\n                                            \"collab-thread-body--input--textarea--suggestionsList--item-selected\",\n                                            index === selectedIndex\n                                                ? collabStyles()[\n                                                      \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n                                                  ]\n                                                : \"\"\n                                        )}\n                                        ref={(el: any) =>\n                                            (itemRefs.current[index] = el)\n                                        }\n                                        onKeyDown={(e) => {\n                                            if (e.key === \"Enter\") {\n                                                insertMention(user);\n                                            } else {\n                                                handleKeyDown(\n                                                    e as KeyboardEvent\n                                                );\n                                            }\n                                        }}\n                                        tabIndex={-1}\n                                        aria-selected={index === selectedIndex}\n                                    >\n                                        {user.display.length > 20 ? (\n                                            <Tooltip content={user.display}>\n                                                {user.display.substring(0, 18) +\n                                                    \"...\"}\n                                            </Tooltip>\n                                        ) : (\n                                            user.display\n                                        )}\n                                    </li>\n                                ))}\n                            </ul>\n                        )}\n                    </div>\n                </div>\n\n                <div\n                    className={classNames(\n                        \"collab-thread-input-indicator--wrapper\",\n                        \"flex-v-center\",\n                        collabStyles()[\n                            \"collab-thread-input-indicator--wrapper\"\n                        ],\n                        flexAlignCenter\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-input-indicator--error\",\n                            collabStyles()[\n                                \"collab-thread-input-indicator--error\"\n                            ]\n                        )}\n                    >\n                        {error.message}\n                    </div>\n                    <div\n                        className={classNames(\n                            \"collab-thread-input-indicator--count\",\n                            collabStyles()[\n                                \"collab-thread-input-indicator--count\"\n                            ]\n                        )}\n                    >\n                        {state.message.length}/{maxMessageLength}\n                    </div>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["React","classNames","Tooltip"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n    ICommentTextAreaProps,\n    IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n    errorMessage,\n}) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--error\",\n            collabStyles()[\"collab-thread-input-indicator--error\"]\n        )}\n    >\n        {errorMessage}\n    </div>\n);\n\nconst CharacterCounter: React.FC<{\n    currentLength: number;\n    maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n    <div\n        className={classNames(\n            \"collab-thread-input-indicator--count\",\n            collabStyles()[\"collab-thread-input-indicator--count\"]\n        )}\n    >\n        {currentLength}/{maxLength}\n    </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n    filteredUsers: IMentionList[];\n    selectedIndex: number;\n    cursorPosition: { top: number; showAbove: boolean };\n    inputRef: React.RefObject<HTMLTextAreaElement>;\n    listRef: React.RefObject<HTMLUListElement>;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    insertMention: (user: IMentionList) => void;\n    handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n    filteredUsers,\n    selectedIndex,\n    cursorPosition,\n    inputRef,\n    listRef,\n    itemRefs,\n    insertMention,\n    handleKeyDown,\n}) => {\n    if (filteredUsers.length === 0) return null;\n\n    return (\n        <ul\n            className={classNames(\n                \"collab-thread-body--input--textarea--suggestionsList\",\n                collabStyles()[\n                    \"collab-thread-body--input--textarea--suggestionsList\"\n                ]\n            )}\n            style={{\n                ...(cursorPosition.showAbove\n                    ? {\n                          bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top || 0) - cursorPosition.top}px`,\n                          top: \"auto\",\n                      }\n                    : {\n                          top: `${(inputRef.current?.getBoundingClientRect().top || 0) + cursorPosition.top}px`,\n                      }),\n            }}\n            ref={listRef}\n        >\n            {filteredUsers.map((user, index) => (\n                <li\n                    key={user.uid}\n                    onClick={() => insertMention(user)}\n                    className={classNames(\n                        \"collab-thread-body--input--textarea--suggestionsList--item\",\n                        collabStyles()[\n                            \"collab-thread-body--input--textarea--suggestionsList--item\"\n                        ],\n                        index === selectedIndex\n                            ? collabStyles()[\n                                  \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n                              ]\n                            : \"\"\n                    )}\n                    ref={(el) => (itemRefs.current[index] = el)}\n                    onKeyDown={(e) =>\n                        e.key === \"Enter\"\n                            ? insertMention(user)\n                            : handleKeyDown(e as KeyboardEvent)\n                    }\n                    tabIndex={-1}\n                    aria-selected={index === selectedIndex}\n                >\n                    {(user.display?.length || 0) > 20 ? (\n                        <Tooltip content={user.display || \"\"}>\n                            {(user.display || \"\").substring(0, 18) + \"...\"}\n                        </Tooltip>\n                    ) : (\n                        user.display || \"\"\n                    )}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n    ({ userState, handleOnSaveRef, comment, onClose }) => {\n        const {\n            state,\n            error,\n            showSuggestions,\n            cursorPosition,\n            selectedIndex,\n            filteredUsers,\n            inputRef,\n            listRef,\n            itemRefs,\n            handleInputChange,\n            handleKeyDown,\n            handleSubmit,\n            insertMention,\n            maxMessageLength,\n        } = useCommentTextArea(userState, comment, onClose);\n\n        const onChangeHandler = (event: Event) =>\n            handleInputChange(event as any);\n        const onKeyDownHandler = (event: KeyboardEvent) =>\n            handleKeyDown(event as any);\n\n        useEffect(() => {\n            handleOnSaveRef.current = handleSubmit;\n        }, [handleSubmit, handleOnSaveRef]);\n\n        return (\n            <div\n                className={classNames(\n                    \"collab-thread-body--input--wrapper\",\n                    collabStyles()[\"collab-thread-body--input--wrapper\"]\n                )}\n            >\n                <div\n                    className={classNames(\n                        \"collab-thread-body--input\",\n                        collabStyles()[\"collab-thread-body--input\"]\n                    )}\n                >\n                    <div\n                        className={classNames(\n                            \"collab-thread-body--input--textarea--wrapper\",\n                            collabStyles()[\n                                \"collab-thread-body--input--textarea--wrapper\"\n                            ]\n                        )}\n                    >\n                        <textarea\n                            name=\"collab-thread-body--input--textarea\"\n                            id=\"collab-thread-body--input--textarea\"\n                            rows={1}\n                            className={classNames(\n                                \"collab-thread-body--input--textarea\",\n                                collabStyles()[\n                                    \"collab-thread-body--input--textarea\"\n                                ]\n                            )}\n                            value={state.message}\n                            onChange={onChangeHandler}\n                            onKeyDown={onKeyDownHandler}\n                            maxLength={maxMessageLength}\n                            placeholder=\"Enter a comment or tag others using “@”\"\n                            ref={inputRef}\n                        />\n                        {showSuggestions && (\n                            <MentionSuggestionsList\n                                filteredUsers={filteredUsers}\n                                selectedIndex={selectedIndex}\n                                cursorPosition={cursorPosition}\n                                inputRef={inputRef}\n                                listRef={listRef}\n                                itemRefs={itemRefs}\n                                insertMention={insertMention}\n                                handleKeyDown={handleKeyDown}\n                            />\n                        )}\n                    </div>\n                </div>\n\n                <div\n                    className={classNames(\n                        \"collab-thread-input-indicator--wrapper\",\n                        \"flex-v-center\",\n                        collabStyles()[\n                            \"collab-thread-input-indicator--wrapper\"\n                        ],\n                        flexAlignCenter\n                    )}\n                >\n                    <ErrorIndicator errorMessage={error.message} />\n                    <CharacterCounter\n                        currentLength={state.message.length}\n                        maxLength={maxMessageLength}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","Tooltip","React"]}