elseware-ui 2.31.1 → 2.31.4

package/dist/index.js

@@ -3132,7 +3132,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -16126,7 +16126,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
+        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
         children: title
       }
     ) }),
@@ -17455,7 +17455,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
+            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17487,49 +17487,60 @@ 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() {
-    if (!value.trim()) return;
-    await onSubmit?.(value);
+    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, { size: "md" }),
+    /* @__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: "w-full min-h-[48px] bg-transparent border-b border-gray-300 dark:border-neutral-700 outline-none resize-none pb-2 text-sm"
+          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",
-            text: "Cancel",
-            onClick: () => {
-              setValue("");
-              setFocused(false);
-            }
+            disabled: loading,
+            onClick: handleCancel
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button_default,
           {
-            variant: "primary",
             text: submitLabel,
+            variant: "primary",
+            loading,
+            disabled: !value.trim(),
             onClick: handleSubmit
           }
         )
@@ -17538,6 +17549,78 @@ function CommentComposer({
   ] });
 }
 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) {
@@ -17545,11 +17628,26 @@ function formatCommentDate(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 }
+    {
+      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);
@@ -17562,67 +17660,27 @@ function formatCommentDate(date) {
 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 text-sm flex-wrap", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [
+    /* @__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-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
-      edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "edited" })
+      /* @__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 CommentContent({ content }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-relaxed whitespace-pre-wrap text-gray-700 dark:text-gray-300", children: content });
-}
-var CommentContent_default = CommentContent;
-function CommentActions({
-  likes = 0,
-  dislikes = 0,
-  onLike,
-  onDislike,
-  onReply
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: onLike,
-        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: [
-          /* @__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 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: onReply,
-        className: "font-medium hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
-        children: "Reply"
-      }
-    )
-  ] });
-}
-var CommentActions_default = CommentActions;
 function CommentMenu({
   canEdit,
   canDelete,
@@ -17642,28 +17700,34 @@ function CommentMenu({
     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: "text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        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: "\r\n            absolute\r\n            right-0\r\n            top-full\r\n            mt-2\r\n            min-w-[160px]\r\n            overflow-hidden\r\n            rounded-xl\r\n            border\r\n            border-gray-200\r\n            dark:border-neutral-800\r\n            bg-white\r\n            dark:bg-neutral-900\r\n            shadow-xl\r\n            z-50\r\n          ",
+        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: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              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"
@@ -17673,11 +17737,12 @@ function CommentMenu({
           canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
+              type: "button",
               onClick: () => {
                 setOpen(false);
                 onDelete?.();
               },
-              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              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"
@@ -17687,11 +17752,12 @@ function CommentMenu({
           canReport && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
+              type: "button",
               onClick: () => {
                 setOpen(false);
                 onReport?.();
               },
-              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              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"
@@ -17709,25 +17775,37 @@ function CommentRepliesToggle({
   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: "inline-flex items-center gap-1 text-sm font-medium text-blue-500 hover:text-blue-400 transition-colors w-fit",
+      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: collapsed ? `View ${repliesCount} repl${repliesCount > 1 ? "ies" : "y"}` : "Hide replies" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
       ]
     }
   );
 }
 var CommentRepliesToggle_default = CommentRepliesToggle;
-function ReplyComposer({ username, onSubmit }) {
+function ReplyComposer({
+  avatar,
+  username,
+  loading,
+  onSubmit
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
     CommentComposer_default,
     {
-      placeholder: `Reply to @${username}`,
+      avatar,
+      loading,
       submitLabel: "Reply",
+      placeholder: `Reply to @${username}`,
       onSubmit
     }
   ) });
@@ -17736,7 +17814,7 @@ var ReplyComposer_default = ReplyComposer;
 
 // src/compositions/comment-thread/constants/comment.constants.ts
 var MAX_COMMENT_DEPTH = 5;
-var COMMENT_INDENTATION = 0;
+var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
@@ -17751,7 +17829,7 @@ function CommentItem({
   const [isReplying, setIsReplying] = React4.useState(false);
   const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
   async function handleReply(content) {
-    console.log(content);
+    await onReply?.(comment, content);
     setIsReplying(false);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17759,16 +17837,18 @@ function CommentItem({
     {
       className: "flex flex-col gap-4",
       style: {
-        paddingLeft: `${resolvedDepth * COMMENT_INDENTATION}px`
+        paddingLeft: resolvedDepth * COMMENT_INDENTATION
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3 min-w-0", 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,
+                avatar: comment.author?.avatar,
+                username: comment.author?.username ?? "unknown",
+                firstName: comment.author?.firstName,
+                lastName: comment.author?.lastName,
                 createdAt: comment.createdAt,
                 edited: comment.edited
               }
@@ -17791,18 +17871,19 @@ function CommentItem({
             {
               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);
-                onReply?.(comment);
-              }
+              onReply: () => setIsReplying((prev) => !prev)
             }
           ),
           isReplying && /* @__PURE__ */ jsxRuntime.jsx(
             ReplyComposer_default,
             {
-              username: comment.author.username,
+              avatar: comment.author?.avatar,
+              username: comment.author?.username,
               onSubmit: handleReply
             }
           ),
@@ -17852,6 +17933,9 @@ function CommentList({
   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,
     {
@@ -17868,52 +17952,142 @@ function CommentList({
   )) });
 }
 var CommentList_default = CommentList;
-var CommentThreadContext = React4.createContext(null);
-function useCommentThread(initialComments) {
-  const [comments, setComments] = React4.useState(initialComments);
-  return {
-    comments,
-    setComments
-  };
+
+// 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/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({
-  comments: initialComments = [],
-  onCommentCreate,
-  onLike,
-  onDislike,
-  onReply,
+  currentUser,
+  dataSource,
+  loading = false,
   onEdit,
   onDelete,
   onReport
 }) {
-  const { comments, setComments } = useCommentThread(initialComments);
+  const [comments, setComments] = React4.useState([]);
+  const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
+  React4.useEffect(() => {
+    async function loadComments() {
+      try {
+        const result = await dataSource.getComments();
+        setComments(buildCommentTree(result));
+      } finally {
+        setIsLoadingComments(false);
+      }
+    }
+    loadComments();
+  }, [dataSource]);
   async function handleCreateComment(content) {
-    await onCommentCreate?.(content);
+    const comment = await dataSource.createComment({
+      content,
+      parentCommentId: null
+    });
+    setComments((prev) => [comment, ...prev]);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommentThreadContext.Provider,
-    {
-      value: {
+  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
+      }))
+    );
+  }
+  if (loading || isLoadingComments) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
+  }
+  return /* @__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,
-        setComments
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CommentComposer_default, { onSubmit: handleCreateComment }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CommentList_default,
-          {
-            comments,
-            onLike,
-            onDislike,
-            onReply,
-            onEdit,
-            onDelete,
-            onReport
-          }
-        )
-      ] })
-    }
-  );
+        onLike: handleLike,
+        onDislike: handleDislike,
+        onReply: handleReply,
+        onEdit,
+        onDelete,
+        onReport
+      }
+    )
+  ] });
 }
 var CommentThread_default = CommentThread;
 function DataViewTable({