elseware-ui 2.31.0 → 2.31.2

package/dist/index.mjs

@@ -22,6 +22,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md';
 import '@mdxeditor/editor/style.css';
 import { MDXEditor, headingsPlugin, linkPlugin, listsPlugin, imagePlugin, tablePlugin, linkDialogPlugin, thematicBreakPlugin, quotePlugin, toolbarPlugin, UndoRedo, Separator, BlockTypeSelect, BoldItalicUnderlineToggles, StrikeThroughSupSubToggles, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, markdownShortcutPlugin, frontmatterPlugin, codeBlockPlugin, codeMirrorPlugin } from '@mdxeditor/editor';
+import { BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiChevronDown, BiChevronUp } from 'react-icons/bi';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -15713,7 +15714,7 @@ function Tags({
 var Tags_default = Tags;
 function TextArea({
   placeholder,
-  limit,
+  limit = 1e3,
   styles,
   shape,
   ...props
@@ -17457,6 +17458,824 @@ function ShowMore({ text, limit }) {
   ] });
 }
 var ShowMore_default = ShowMore;
+function CommentComposer({
+  avatar,
+  placeholder = "Add a comment...",
+  submitLabel = "Comment",
+  disabled,
+  loading,
+  onSubmit
+}) {
+  const [value, setValue] = useState("");
+  const [focused, setFocused] = useState(false);
+  async function handleSubmit() {
+    const content = value.trim();
+    if (!content) {
+      return;
+    }
+    await onSubmit?.(content);
+    setValue("");
+    setFocused(false);
+  }
+  function handleCancel() {
+    setValue("");
+    setFocused(false);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "md" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value,
+          disabled: disabled || loading,
+          placeholder,
+          onFocus: () => setFocused(true),
+          onChange: (e) => setValue(e.target.value),
+          className: "\n            w-full\n            min-h-[56px]\n            resize-none\n            bg-transparent\n            border-b\n            border-gray-300\n            dark:border-neutral-700\n            outline-none\n            pb-2\n            text-sm\n          "
+        }
+      ),
+      (focused || value.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button_default,
+          {
+            text: "Cancel",
+            variant: "secondary",
+            appearance: "ghost",
+            disabled: loading,
+            onClick: handleCancel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button_default,
+          {
+            text: submitLabel,
+            variant: "primary",
+            loading,
+            disabled: !value.trim(),
+            onClick: handleSubmit
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var CommentComposer_default = CommentComposer;
+function CommentActions({
+  likes = 0,
+  dislikes = 0,
+  liked = false,
+  disliked = false,
+  canReply = true,
+  onLike,
+  onDislike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "\n        flex\n        items-center\n        gap-5\n        text-sm\n        text-gray-500\n        dark:text-gray-400\n      ",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onLike,
+            className: `
+          inline-flex
+          items-center
+          gap-1
+          transition-colors
+          ${liked ? "text-blue-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
+        `,
+            children: [
+              liked ? /* @__PURE__ */ jsx(BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsx(BiLike, { size: 18 }),
+              /* @__PURE__ */ jsx("span", { children: likes })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onDislike,
+            className: `
+          inline-flex
+          items-center
+          gap-1
+          transition-colors
+          ${disliked ? "text-red-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
+        `,
+            children: [
+              disliked ? /* @__PURE__ */ jsx(BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsx(BiDislike, { size: 18 }),
+              /* @__PURE__ */ jsx("span", { children: dislikes })
+            ]
+          }
+        ),
+        canReply && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onReply,
+            className: "\n            font-medium\n            transition-colors\n            hover:text-gray-900\n            dark:hover:text-gray-100\n          ",
+            children: "Reply"
+          }
+        )
+      ]
+    }
+  );
+}
+var CommentActions_default = CommentActions;
+function CommentContent({ content }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "\n        text-sm\n        leading-relaxed\n        whitespace-pre-wrap\n        break-words\n        text-gray-700\n        dark:text-gray-300\n      ",
+      children: content
+    }
+  );
+}
+var CommentContent_default = CommentContent;
+
+// src/compositions/comment-thread/utils/formatCommentDate.ts
+function formatCommentDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const target = new Date(date);
+  const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+  const intervals = [
+    {
+      label: "year",
+      seconds: 31536e3
+    },
+    {
+      label: "month",
+      seconds: 2592e3
+    },
+    {
+      label: "day",
+      seconds: 86400
+    },
+    {
+      label: "hour",
+      seconds: 3600
+    },
+    {
+      label: "minute",
+      seconds: 60
+    }
+  ];
+  for (const interval of intervals) {
+    const count = Math.floor(seconds / interval.seconds);
+    if (count >= 1) {
+      return `${count} ${interval.label}${count > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "Just now";
+}
+function CommentHeader({
+  avatar,
+  username,
+  firstName,
+  lastName,
+  createdAt,
+  edited
+}) {
+  const displayName = firstName || lastName ? `${firstName ?? ""} ${lastName ?? ""}`.trim() : username;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        "@",
+        username
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
+      edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
+    ] })
+  ] });
+}
+var CommentHeader_default = CommentHeader;
+function CommentMenu({
+  canEdit,
+  canDelete,
+  canReport,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    function handleOutsideClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  const hasActions = canEdit || canDelete || canReport;
+  if (!hasActions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
+        children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "\n            absolute\n            right-0\n            top-full\n            mt-2\n            min-w-[180px]\n            overflow-hidden\n            rounded-xl\n            border\n            border-gray-200\n            dark:border-neutral-800\n            bg-white\n            dark:bg-neutral-900\n            shadow-xl\n            z-50\n          ",
+        children: [
+          canEdit && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setOpen(false);
+                onEdit?.();
+              },
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
+              children: [
+                /* @__PURE__ */ jsx(BiEdit, {}),
+                "Edit"
+              ]
+            }
+          ),
+          canDelete && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setOpen(false);
+                onDelete?.();
+              },
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                text-red-500\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
+              children: [
+                /* @__PURE__ */ jsx(BiTrash, {}),
+                "Delete"
+              ]
+            }
+          ),
+          canReport && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setOpen(false);
+                onReport?.();
+              },
+              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
+              children: [
+                /* @__PURE__ */ jsx(BiFlag, {}),
+                "Report"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var CommentMenu_default = CommentMenu;
+function CommentRepliesToggle({
+  repliesCount,
+  collapsed,
+  onToggle
+}) {
+  if (repliesCount <= 0) {
+    return null;
+  }
+  const label = collapsed ? `View ${repliesCount} ${repliesCount === 1 ? "reply" : "replies"}` : "Hide replies";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "\n        inline-flex\n        items-center\n        gap-1\n        w-fit\n        text-sm\n        font-medium\n        text-blue-500\n        hover:text-blue-400\n        transition-colors\n      ",
+      children: [
+        collapsed ? /* @__PURE__ */ jsx(BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsx(BiChevronUp, { size: 18 }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+var CommentRepliesToggle_default = CommentRepliesToggle;
+function ReplyComposer({
+  avatar,
+  username,
+  loading,
+  onSubmit
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
+    CommentComposer_default,
+    {
+      avatar,
+      loading,
+      submitLabel: "Reply",
+      placeholder: `Reply to @${username}`,
+      onSubmit
+    }
+  ) });
+}
+var ReplyComposer_default = ReplyComposer;
+
+// src/compositions/comment-thread/constants/comment.constants.ts
+var MAX_COMMENT_DEPTH = 5;
+var COMMENT_INDENTATION = 24;
+function CommentItem({
+  comment,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [isReplying, setIsReplying] = useState(false);
+  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  async function handleReply(content) {
+    await onReply?.(comment, content);
+    setIsReplying(false);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-4",
+      style: {
+        paddingLeft: resolvedDepth * COMMENT_INDENTATION
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx(
+              CommentHeader_default,
+              {
+                avatar: comment.author?.avatar,
+                username: comment.author?.username ?? "unknown",
+                firstName: comment.author?.firstName,
+                lastName: comment.author?.lastName,
+                createdAt: comment.createdAt,
+                edited: comment.edited
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CommentMenu_default,
+              {
+                canEdit: comment.permissions?.canEdit,
+                canDelete: comment.permissions?.canDelete,
+                canReport: comment.permissions?.canReport,
+                onEdit: () => onEdit?.(comment),
+                onDelete: () => onDelete?.(comment),
+                onReport: () => onReport?.(comment)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsx(
+            CommentActions_default,
+            {
+              likes: comment.likes,
+              dislikes: comment.dislikes,
+              liked: comment.liked,
+              disliked: comment.disliked,
+              canReply: comment.permissions?.canReply,
+              onLike: () => onLike?.(comment),
+              onDislike: () => onDislike?.(comment),
+              onReply: () => setIsReplying((prev) => !prev)
+            }
+          ),
+          isReplying && /* @__PURE__ */ jsx(
+            ReplyComposer_default,
+            {
+              avatar: comment.author?.avatar,
+              username: comment.author?.username,
+              onSubmit: handleReply
+            }
+          ),
+          !!comment.replies?.length && /* @__PURE__ */ jsx(
+            CommentRepliesToggle_default,
+            {
+              collapsed,
+              repliesCount: comment.replies.length,
+              onToggle: () => setCollapsed((prev) => !prev)
+            }
+          )
+        ] }) }),
+        !collapsed && !!comment.replies?.length && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "border-l border-gray-200 dark:border-neutral-800",
+              "pl-4 ml-5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CommentList_default,
+              {
+                comments: comment.replies,
+                depth: depth + 1,
+                onLike,
+                onDislike,
+                onReply,
+                onEdit,
+                onDelete,
+                onReport
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var CommentItem_default = CommentItem;
+function CommentList({
+  comments,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  if (!comments.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: comments.map((comment) => /* @__PURE__ */ jsx(
+    CommentItem_default,
+    {
+      comment,
+      depth,
+      onLike,
+      onDislike,
+      onReply,
+      onEdit,
+      onDelete,
+      onReport
+    },
+    comment.id
+  )) });
+}
+var CommentList_default = CommentList;
+function EditCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onSubmit
+}) {
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Edit Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      enableReinitialize: true,
+      initialValues: {
+        content: comment.content
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, values.content);
+        handleCloseModal();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(TextArea_default, { name: "content", rows: 5, placeholder: "Comment" }),
+        /* @__PURE__ */ jsx(Button_default, { type: "submit", variant: "success", text: "Save Changes" })
+      ] })
+    }
+  ) });
+}
+var EditCommentModal_default = EditCommentModal;
+function DeleteCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onDelete
+}) {
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Delete Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(Typography.Paragraph, { children: "Are you sure you want to permanently delete this comment?" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsx(Button_default, { text: "Cancel", appearance: "ghost", onClick: handleCloseModal }),
+      /* @__PURE__ */ jsx(
+        Button_default,
+        {
+          text: "Delete",
+          variant: "danger",
+          onClick: async () => {
+            await onDelete?.(comment);
+            handleCloseModal();
+          }
+        }
+      )
+    ] })
+  ] }) });
+}
+var DeleteCommentModal_default = DeleteCommentModal;
+var REPORT_REASONS = [
+  {
+    label: "Spam",
+    value: "spam"
+  },
+  {
+    label: "Harassment",
+    value: "harassment"
+  },
+  {
+    label: "Hate Speech",
+    value: "hate_speech"
+  },
+  {
+    label: "Misleading Information",
+    value: "misleading_information"
+  },
+  {
+    label: "Other",
+    value: "other"
+  }
+];
+function ReportCommentModal({
+  show,
+  comment,
+  handleCloseModal,
+  onSubmit
+}) {
+  if (!comment) return null;
+  return /* @__PURE__ */ jsx(Modal_default, { title: "Report Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      initialValues: {
+        reason: "",
+        description: ""
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, {
+          reason: values.reason,
+          description: values.description
+        });
+        handleCloseModal();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Select_default, { name: "reason", placeholder: "Reason", options: REPORT_REASONS }),
+        /* @__PURE__ */ jsx(
+          TextArea_default,
+          {
+            name: "description",
+            rows: 4,
+            placeholder: "Additional details"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button_default, { type: "submit", variant: "danger", text: "Submit Report" })
+      ] })
+    }
+  ) });
+}
+var ReportCommentModal_default = ReportCommentModal;
+function useCommentModals() {
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showReportModal, setShowReportModal] = useState(false);
+  return {
+    showEditModal,
+    openEditModal: () => setShowEditModal(true),
+    closeEditModal: () => setShowEditModal(false),
+    showDeleteModal,
+    openDeleteModal: () => setShowDeleteModal(true),
+    closeDeleteModal: () => setShowDeleteModal(false),
+    showReportModal,
+    openReportModal: () => setShowReportModal(true),
+    closeReportModal: () => setShowReportModal(false)
+  };
+}
+function useCommentSelection() {
+  const [selectedComment, setSelectedComment] = useState(
+    null
+  );
+  function selectComment(comment) {
+    setSelectedComment(comment);
+  }
+  function clearSelection() {
+    setSelectedComment(null);
+  }
+  return {
+    selectedComment,
+    selectComment,
+    clearSelection
+  };
+}
+
+// src/compositions/comment-thread/utils/buildCommentTree.ts
+function buildCommentTree(comments) {
+  const map = /* @__PURE__ */ new Map();
+  const roots = [];
+  comments.forEach((comment) => {
+    map.set(comment.id, {
+      ...comment,
+      replies: []
+    });
+  });
+  comments.forEach((comment) => {
+    const current = map.get(comment.id);
+    if (!comment.parentCommentId) {
+      roots.push(current);
+      return;
+    }
+    const parent = map.get(comment.parentCommentId);
+    if (parent) {
+      parent.replies.push(current);
+    }
+  });
+  return roots;
+}
+
+// src/compositions/comment-thread/utils/updateComment.ts
+function updateComment(comments, commentId, updater) {
+  return comments.map((comment) => {
+    if (comment.id === commentId) {
+      return updater(comment);
+    }
+    return {
+      ...comment,
+      replies: comment.replies ? updateComment(comment.replies, commentId, updater) : []
+    };
+  });
+}
+
+// src/compositions/comment-thread/utils/removeComment.ts
+function removeComment(comments, commentId) {
+  return comments.filter((comment) => comment.id !== commentId).map((comment) => ({
+    ...comment,
+    replies: comment.replies ? removeComment(comment.replies, commentId) : []
+  }));
+}
+
+// src/compositions/comment-thread/utils/insertReply.ts
+function insertReply(comments, parentId, reply) {
+  return comments.map((comment) => {
+    if (comment.id === parentId) {
+      return {
+        ...comment,
+        replies: [...comment.replies || [], reply]
+      };
+    }
+    return {
+      ...comment,
+      replies: comment.replies ? insertReply(comment.replies, parentId, reply) : []
+    };
+  });
+}
+function CommentThread({
+  postId,
+  currentUser,
+  dataSource,
+  loading = false,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [comments, setComments] = useState([]);
+  const [isLoadingComments, setIsLoadingComments] = useState(true);
+  const selection = useCommentSelection();
+  const modals = useCommentModals();
+  useEffect(() => {
+    async function loadComments() {
+      try {
+        const result = await dataSource.getComments();
+        setComments(buildCommentTree(result));
+      } finally {
+        setIsLoadingComments(false);
+      }
+    }
+    loadComments();
+  }, [dataSource]);
+  async function handleCreateComment(content) {
+    const comment = await dataSource.createComment({
+      content,
+      parentCommentId: null
+    });
+    setComments((prev) => [comment, ...prev]);
+  }
+  async function handleReply(parentComment, content) {
+    const reply = await dataSource.createComment({
+      content,
+      parentCommentId: parentComment.id
+    });
+    setComments((prev) => insertReply(prev, parentComment.id, reply));
+  }
+  async function handleLike(comment) {
+    const result = await dataSource.toggleLike(comment.id);
+    setComments(
+      (prev) => updateComment(prev, comment.id, (item) => ({
+        ...item,
+        likes: result.likes,
+        dislikes: result.dislikes,
+        liked: result.liked,
+        disliked: result.disliked
+      }))
+    );
+  }
+  async function handleDislike(comment) {
+    const result = await dataSource.toggleDislike(comment.id);
+    setComments(
+      (prev) => updateComment(prev, comment.id, (item) => ({
+        ...item,
+        likes: result.likes,
+        dislikes: result.dislikes,
+        liked: result.liked,
+        disliked: result.disliked
+      }))
+    );
+  }
+  async function handleUpdateComment(comment, content) {
+    const updated = await dataSource.updateComment({
+      id: comment.id,
+      content
+    });
+    setComments((prev) => updateComment(prev, comment.id, () => updated));
+  }
+  async function handleDeleteComment(comment) {
+    await dataSource.deleteComment(comment.id);
+    setComments((prev) => removeComment(prev, comment.id));
+    onDelete?.(comment);
+  }
+  async function handleReportComment(comment, payload) {
+    await dataSource.reportComment?.(
+      comment.id,
+      payload.reason,
+      payload.description
+    );
+    onReport?.(comment);
+  }
+  if (loading || isLoadingComments) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsx(
+        CommentComposer_default,
+        {
+          avatar: currentUser.avatar,
+          onSubmit: handleCreateComment
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CommentList_default,
+        {
+          comments,
+          onLike: handleLike,
+          onDislike: handleDislike,
+          onReply: handleReply,
+          onEdit: (comment) => {
+            selection.selectComment(comment);
+            onEdit?.(comment);
+            modals.openEditModal();
+          },
+          onDelete: (comment) => {
+            selection.selectComment(comment);
+            modals.openDeleteModal();
+          },
+          onReport: (comment) => {
+            selection.selectComment(comment);
+            onReport?.(comment);
+            modals.openReportModal();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditCommentModal_default,
+      {
+        show: modals.showEditModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeEditModal,
+        onSubmit: handleUpdateComment
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteCommentModal_default,
+      {
+        show: modals.showDeleteModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeDeleteModal,
+        onDelete: handleDeleteComment
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ReportCommentModal_default,
+      {
+        show: modals.showReportModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeReportModal,
+        onSubmit: handleReportComment
+      }
+    )
+  ] });
+}
+var CommentThread_default = CommentThread;
 function DataViewTable({
   title,
   columns,
@@ -18268,6 +19087,6 @@ function ScrollToTop({
 }
 var ScrollToTop_default = ScrollToTop;
 
-export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
+export { Accordion_default as Accordion, AsyncComponentWrapper_default as AsyncComponentWrapper, Avatar, Backdrop_default as Backdrop, Badge, BarChart_default as BarChart, Block_default as Block, BlockGroup_default as BlockGroup, BoxNav_default as BoxNav, BoxNavItem_default as BoxNavItem, Brand_default as Brand, Breadcrumb, BreadcrumbItem_default as BreadcrumbItem, Button_default as Button, Caption, Card_default as Card, CardContent_default as CardContent, CardFooter_default as CardFooter, CardHeader_default as CardHeader, Chapter, Checkbox_default as Checkbox, Chip, CloudinaryImage_default as CloudinaryImage, CloudinaryProvider, CloudinaryVideo_default as CloudinaryVideo, Code, CommentThread_default as CommentThread, Content, ContentArea_default as ContentArea, DataView, DataViewTable_default as DataViewTable, DateSelector_default as DateSelector, DefaultLayout_default as DefaultLayout, Display, DocumentationPanel_default as DocumentationPanel, Drawer, DrawerToggler_default as DrawerToggler, EUIDevLayout_default as EUIDevLayout, EUIProvider, Flag, Flex, FlexCol_default as FlexCol, FlexRow_default as FlexRow, Footer, FooterNav_default as FooterNav, FooterNavGroup_default as FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse_default as FormResponse, GenericLayout_default as GenericLayout, GlowWrapper_default as GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid_default as Grid, Header, HeaderNav_default as HeaderNav, HeaderNavGroup_default as HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout_default as HomeLayout, Image2 as Image, ImageInput_default as ImageInput, Info_default as Info, Input, InputFile, InputLabel_default as InputLabel, InputList, InputListGroup, InputResponse_default as InputResponse, Label, Layout, Lead, LineChart_default as LineChart, Link, List_default as List, ListItem_default as ListItem, MarkdownEditor_default as MarkdownEditor, MarkdownProvider_default as MarkdownProvider, MarkdownTOC_default as MarkdownTOC, MarkdownViewer_default as MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal_default as Modal, MotionSurface_default as MotionSurface, MultiImageInput_default as MultiImageInput, NumericRating_default as NumericRating, Overline, Paragraph, PieChart_default as PieChart, PriceTag, ProgressBar, ProgressBarRating_default as ProgressBarRating, Quote, Radio_default as Radio, RouteTab_default as RouteTab, RouteTabs_default as RouteTabs, ScrollToTop_default as ScrollToTop, Section, Select_default as Select, ShapeSwitch, ShowMore_default as ShowMore, Sidebar_default as Sidebar, SidebarLayout_default as SidebarLayout, SidemenuLayout_default as SidemenuLayout, Skeleton, Slider_default as Slider, StarRating_default as StarRating, StarRatingDistribution_default as StarRatingDistribution, StarRatingInput_default as StarRatingInput, Switch_default as Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table_default as Table, Tag_default as Tag, Tags_default as Tags, TextArea_default as TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip4 as Tooltip, TopNav, Transition4 as Transition, TransitionDropdown_default as TransitionDropdown, TransitionFadeIn_default as TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge_default as ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideo_default as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme_default as useCurrentTheme, useDrawer_default as useDrawer, useEUIConfig, useIsMobile_default as useIsMobile, useModal_default as useModal, useTheme_default as useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map