elseware-ui 2.31.0 → 2.31.2

package/dist/index.js

@@ -24,6 +24,7 @@ var reactBeautifulDnd = require('react-beautiful-dnd');
 var md = require('react-icons/md');
 require('@mdxeditor/editor/style.css');
 var editor = require('@mdxeditor/editor');
+var bi = require('react-icons/bi');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -15741,7 +15742,7 @@ function Tags({
 var Tags_default = Tags;
 function TextArea({
   placeholder,
-  limit,
+  limit = 1e3,
   styles,
   shape,
   ...props
@@ -17485,6 +17486,824 @@ function ShowMore({ text, limit }) {
   ] });
 }
 var ShowMore_default = ShowMore;
+function CommentComposer({
+  avatar,
+  placeholder = "Add a comment...",
+  submitLabel = "Comment",
+  disabled,
+  loading,
+  onSubmit
+}) {
+  const [value, setValue] = React4.useState("");
+  const [focused, setFocused] = React4.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "md" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            text: "Cancel",
+            variant: "secondary",
+            appearance: "ghost",
+            disabled: loading,
+            onClick: handleCancel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiLike, { size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: likes })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
+            ]
+          }
+        ),
+        canReply && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        "@",
+        username
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
+      edited && /* @__PURE__ */ jsxRuntime.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] = React4.useState(false);
+  const ref = React4.useRef(null);
+  React4.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__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiEdit, {}),
+                "Edit"
+              ]
+            }
+          ),
+          canDelete && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiTrash, {}),
+                "Delete"
+              ]
+            }
+          ),
+          canReport && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+      ]
+    }
+  );
+}
+var CommentRepliesToggle_default = CommentRepliesToggle;
+function ReplyComposer({
+  avatar,
+  username,
+  loading,
+  onSubmit
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.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] = React4.useState(false);
+  const [isReplying, setIsReplying] = React4.useState(false);
+  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  async function handleReply(content) {
+    await onReply?.(comment, content);
+    setIsReplying(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-4",
+      style: {
+        paddingLeft: resolvedDepth * COMMENT_INDENTATION
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            ReplyComposer_default,
+            {
+              avatar: comment.author?.avatar,
+              username: comment.author?.username,
+              onSubmit: handleReply
+            }
+          ),
+          !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+            CommentRepliesToggle_default,
+            {
+              collapsed,
+              repliesCount: comment.replies.length,
+              onToggle: () => setCollapsed((prev) => !prev)
+            }
+          )
+        ] }) }),
+        !collapsed && !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "border-l border-gray-200 dark:border-neutral-800",
+              "pl-4 ml-5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Modal_default, { title: "Edit Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Form,
+    {
+      enableReinitialize: true,
+      initialValues: {
+        content: comment.content
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, values.content);
+        handleCloseModal();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TextArea_default, { name: "content", rows: 5, placeholder: "Comment" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Modal_default, { title: "Delete Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography.Paragraph, { children: "Are you sure you want to permanently delete this comment?" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button_default, { text: "Cancel", appearance: "ghost", onClick: handleCloseModal }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Modal_default, { title: "Report Comment", show, handleOnClose: handleCloseModal, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Form,
+    {
+      initialValues: {
+        reason: "",
+        description: ""
+      },
+      onSubmit: async (values) => {
+        await onSubmit?.(comment, {
+          reason: values.reason,
+          description: values.description
+        });
+        handleCloseModal();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Select_default, { name: "reason", placeholder: "Reason", options: REPORT_REASONS }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextArea_default,
+          {
+            name: "description",
+            rows: 4,
+            placeholder: "Additional details"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "submit", variant: "danger", text: "Submit Report" })
+      ] })
+    }
+  ) });
+}
+var ReportCommentModal_default = ReportCommentModal;
+function useCommentModals() {
+  const [showEditModal, setShowEditModal] = React4.useState(false);
+  const [showDeleteModal, setShowDeleteModal] = React4.useState(false);
+  const [showReportModal, setShowReportModal] = React4.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] = React4.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] = React4.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
+  const selection = useCommentSelection();
+  const modals = useCommentModals();
+  React4.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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CommentComposer_default,
+        {
+          avatar: currentUser.avatar,
+          onSubmit: handleCreateComment
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      EditCommentModal_default,
+      {
+        show: modals.showEditModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeEditModal,
+        onSubmit: handleUpdateComment
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DeleteCommentModal_default,
+      {
+        show: modals.showDeleteModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeDeleteModal,
+        onDelete: handleDeleteComment
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ReportCommentModal_default,
+      {
+        show: modals.showReportModal,
+        comment: selection.selectedComment,
+        handleCloseModal: modals.closeReportModal,
+        onSubmit: handleReportComment
+      }
+    )
+  ] });
+}
+var CommentThread_default = CommentThread;
 function DataViewTable({
   title,
   columns,
@@ -18322,6 +19141,7 @@ exports.CloudinaryImage = CloudinaryImage_default;
 exports.CloudinaryProvider = CloudinaryProvider;
 exports.CloudinaryVideo = CloudinaryVideo_default;
 exports.Code = Code;
+exports.CommentThread = CommentThread_default;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
 exports.DataView = DataView;