@btst/stack 2.7.0 → 2.8.0

package/dist/packages/stack/src/plugins/comments/client/components/comment-form.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Textarea } from '../../../../../../ui/src/components/textarea.mjs';
+import { COMMENTS_LOCALIZATION } from '../localization/index.mjs';
+
+function CommentForm({
+  authorId: _authorId,
+  initialBody = "",
+  submitLabel,
+  onSubmit,
+  onCancel,
+  InputComponent,
+  localization: localizationProp
+}) {
+  const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+  const [body, setBody] = useState(initialBody);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState(null);
+  const resolvedSubmitLabel = submitLabel ?? loc.COMMENTS_FORM_POST_COMMENT;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!body.trim()) return;
+    setError(null);
+    setIsPending(true);
+    try {
+      await onSubmit(body.trim());
+      setBody("");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : loc.COMMENTS_FORM_SUBMIT_ERROR
+      );
+    } finally {
+      setIsPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-testid": "comment-form",
+      onSubmit: handleSubmit,
+      className: "flex flex-col gap-2",
+      children: [
+        InputComponent ? /* @__PURE__ */ jsx(
+          InputComponent,
+          {
+            value: body,
+            onChange: setBody,
+            disabled: isPending,
+            placeholder: loc.COMMENTS_FORM_PLACEHOLDER
+          }
+        ) : /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: body,
+            onChange: (e) => setBody(e.target.value),
+            placeholder: loc.COMMENTS_FORM_PLACEHOLDER,
+            disabled: isPending,
+            rows: 3,
+            className: "resize-none"
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end", children: [
+          onCancel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: onCancel,
+              disabled: isPending,
+              children: loc.COMMENTS_FORM_CANCEL
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: isPending || !body.trim(), children: isPending ? loc.COMMENTS_FORM_POSTING : resolvedSubmitLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+export { CommentForm };

package/dist/packages/stack/src/plugins/comments/client/components/comment-thread.cjs

@@ -0,0 +1,540 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const whenVisible = require('../../../../../../ui/src/components/when-visible.cjs');
+const avatar = require('../../../../../../ui/src/components/avatar.cjs');
+const badge = require('../../../../../../ui/src/components/badge.cjs');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const separator = require('../../../../../../ui/src/components/separator.cjs');
+const LucideIcons = require('lucide-react');
+const dateFns = require('date-fns');
+const utils = require('../utils.cjs');
+const commentForm = require('./comment-form.cjs');
+const useComments = require('../hooks/use-comments.cjs');
+const index = require('../localization/index.cjs');
+const context = require('@btst/stack/context');
+
+const DEFAULT_RENDERER = ({ body }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-wrap wrap-break-word", children: body });
+function CommentCard({
+  comment,
+  currentUserId,
+  apiBaseURL,
+  apiBasePath,
+  resourceId,
+  resourceType,
+  headers,
+  components,
+  loc,
+  infiniteKey,
+  onReplyClick,
+  allowPosting,
+  allowEditing
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
+  const config = { apiBaseURL, apiBasePath, headers };
+  const updateMutation = useComments.useUpdateComment(config);
+  const deleteMutation = useComments.useDeleteComment(config);
+  const toggleLikeMutation = useComments.useToggleLike(config, {
+    resourceId,
+    resourceType,
+    parentId: comment.parentId,
+    currentUserId,
+    infiniteKey
+  });
+  const isOwn = currentUserId && comment.authorId === currentUserId;
+  const isPending = comment.status === "pending";
+  const isApproved = comment.status === "approved";
+  const handleEdit = async (body) => {
+    await updateMutation.mutateAsync({ id: comment.id, body });
+    setIsEditing(false);
+  };
+  const handleDelete = async () => {
+    if (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;
+    await deleteMutation.mutateAsync(comment.id);
+  };
+  const handleLike = () => {
+    if (!currentUserId) return;
+    toggleLikeMutation.mutate({
+      commentId: comment.id,
+      authorId: currentUserId
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex gap-3 py-3",
+      "data-testid": "comment-card",
+      "data-comment-id": comment.id,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-8 w-8 shrink-0 mt-0.5", children: [
+          comment.resolvedAvatarUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            avatar.AvatarImage,
+            {
+              src: comment.resolvedAvatarUrl,
+              alt: comment.resolvedAuthorName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-xs", children: utils.getInitials(comment.resolvedAuthorName) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: comment.resolvedAuthorName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: dateFns.formatDistanceToNow(new Date(comment.createdAt), {
+              addSuffix: true
+            }) }),
+            comment.editedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground italic", children: loc.COMMENTS_EDITED_BADGE }),
+            isPending && isOwn && /* @__PURE__ */ jsxRuntime.jsx(
+              badge.Badge,
+              {
+                variant: "secondary",
+                className: "text-xs",
+                "data-testid": "pending-badge",
+                children: loc.COMMENTS_PENDING_BADGE
+              }
+            )
+          ] }),
+          isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+            commentForm.CommentForm,
+            {
+              authorId: currentUserId ?? "",
+              initialBody: comment.body,
+              submitLabel: loc.COMMENTS_SAVE_EDIT,
+              InputComponent: components?.Input,
+              localization: loc,
+              onSubmit: handleEdit,
+              onCancel: () => setIsEditing(false)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(Renderer, { body: comment.body }),
+          !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-2", children: [
+            currentUserId && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs gap-1",
+                onClick: handleLike,
+                "aria-label": comment.isLikedByCurrentUser ? loc.COMMENTS_UNLIKE_ARIA : loc.COMMENTS_LIKE_ARIA,
+                "data-testid": "like-button",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    LucideIcons.Heart,
+                    {
+                      className: `h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`
+                    }
+                  ),
+                  comment.likes > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "like-count", children: comment.likes })
+                ]
+              }
+            ),
+            allowPosting && currentUserId && !comment.parentId && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs",
+                onClick: () => onReplyClick(comment.id),
+                "data-testid": "reply-button",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageSquare, { className: "h-3.5 w-3.5 mr-1" }),
+                  loc.COMMENTS_REPLY_BUTTON
+                ]
+              }
+            ),
+            isOwn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              allowEditing && isApproved && /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs",
+                  onClick: () => setIsEditing(true),
+                  "data-testid": "edit-button",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-3.5 w-3.5 mr-1" }),
+                    loc.COMMENTS_EDIT_BUTTON
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs text-destructive hover:text-destructive",
+                  onClick: handleDelete,
+                  disabled: deleteMutation.isPending,
+                  "data-testid": "delete-button",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5 mr-1" }),
+                    loc.COMMENTS_DELETE_BUTTON
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const DEFAULT_PAGE_SIZE = 100;
+const REPLIES_PAGE_SIZE = 20;
+const OPTIMISTIC_ID_PREFIX = "optimistic-";
+function CommentThreadInner({
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  currentUserId,
+  loginHref,
+  headers,
+  components,
+  localization: localizationProp,
+  pageSize: pageSizeProp,
+  allowPosting: allowPostingProp,
+  allowEditing: allowEditingProp
+}) {
+  const overrides = context.usePluginOverrides("comments", {});
+  const pageSize = pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
+  const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
+  const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
+  const loc = { ...index.COMMENTS_LOCALIZATION, ...localizationProp };
+  const [replyingTo, setReplyingTo] = React.useState(null);
+  const [expandedReplies, setExpandedReplies] = React.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [replyOffsets, setReplyOffsets] = React.useState({});
+  const config = { apiBaseURL, apiBasePath, headers };
+  const {
+    comments,
+    total,
+    isLoading,
+    loadMore,
+    hasMore,
+    isLoadingMore,
+    queryKey: threadQueryKey
+  } = useComments.useInfiniteComments(config, {
+    resourceId,
+    resourceType,
+    status: "approved",
+    parentId: null,
+    currentUserId,
+    pageSize
+  });
+  const postMutation = useComments.usePostComment(config, {
+    resourceId,
+    resourceType,
+    currentUserId,
+    infiniteKey: threadQueryKey,
+    pageSize
+  });
+  const handlePost = async (body) => {
+    if (!currentUserId) return;
+    await postMutation.mutateAsync({
+      body,
+      parentId: null
+    });
+  };
+  const handleReply = async (body, parentId) => {
+    if (!currentUserId) return;
+    await postMutation.mutateAsync({
+      body,
+      parentId,
+      limit: REPLIES_PAGE_SIZE,
+      offset: replyOffsets[parentId] ?? 0
+    });
+    setReplyingTo(null);
+    setExpandedReplies((prev) => new Set(prev).add(parentId));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", "data-testid": "comment-thread", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageSquare, { className: "h-5 w-5 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm", children: total === 0 ? loc.COMMENTS_TITLE : `${total} ${loc.COMMENTS_TITLE}` })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 py-3 animate-pulse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-muted shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-24 rounded bg-muted" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-full rounded bg-muted" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3/4 rounded bg-muted" })
+      ] })
+    ] }, i)) }),
+    !isLoading && comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CommentCard,
+        {
+          comment,
+          currentUserId,
+          apiBaseURL,
+          apiBasePath,
+          resourceId,
+          resourceType,
+          headers,
+          components,
+          loc,
+          infiniteKey: threadQueryKey,
+          onReplyClick: (parentId) => {
+            setReplyingTo(replyingTo === parentId ? null : parentId);
+          },
+          allowPosting,
+          allowEditing
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RepliesSection,
+        {
+          parentId: comment.id,
+          resourceId,
+          resourceType,
+          apiBaseURL,
+          apiBasePath,
+          currentUserId,
+          headers,
+          components,
+          loc,
+          expanded: expandedReplies.has(comment.id),
+          replyCount: comment.replyCount,
+          onToggle: () => {
+            const isExpanded = expandedReplies.has(comment.id);
+            if (!isExpanded) {
+              setReplyOffsets((prev) => {
+                if ((prev[comment.id] ?? 0) === 0) return prev;
+                return { ...prev, [comment.id]: 0 };
+              });
+            }
+            setExpandedReplies((prev) => {
+              const next = new Set(prev);
+              next.has(comment.id) ? next.delete(comment.id) : next.add(comment.id);
+              return next;
+            });
+          },
+          onOffsetChange: (offset) => {
+            setReplyOffsets((prev) => {
+              if (prev[comment.id] === offset) return prev;
+              return { ...prev, [comment.id]: offset };
+            });
+          },
+          allowEditing
+        }
+      ),
+      allowPosting && replyingTo === comment.id && currentUserId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-11 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        commentForm.CommentForm,
+        {
+          authorId: currentUserId,
+          parentId: comment.id,
+          submitLabel: loc.COMMENTS_FORM_POST_REPLY,
+          InputComponent: components?.Input,
+          localization: loc,
+          onSubmit: (body) => handleReply(body, comment.id),
+          onCancel: () => setReplyingTo(null)
+        }
+      ) })
+    ] }, comment.id)) }),
+    !isLoading && comments.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: loc.COMMENTS_EMPTY }),
+    hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => loadMore(),
+        disabled: isLoadingMore,
+        "data-testid": "load-more-comments",
+        children: isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+      }
+    ) }),
+    allowPosting && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, { className: "my-4" }),
+      currentUserId ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "comment-form-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+        commentForm.CommentForm,
+        {
+          authorId: currentUserId,
+          submitLabel: loc.COMMENTS_FORM_POST_COMMENT,
+          InputComponent: components?.Input,
+          localization: loc,
+          onSubmit: handlePost
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center gap-3 py-6 text-center border rounded-lg bg-muted/30",
+          "data-testid": "login-prompt",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LogIn, { className: "h-6 w-6 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: loc.COMMENTS_LOGIN_PROMPT }),
+            loginHref && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: loginHref,
+                className: "inline-flex items-center gap-1 text-sm font-medium text-primary underline underline-offset-4",
+                "data-testid": "login-link",
+                children: loc.COMMENTS_LOGIN_LINK
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function RepliesSection({
+  parentId,
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  currentUserId,
+  headers,
+  components,
+  loc,
+  expanded,
+  replyCount,
+  onToggle,
+  onOffsetChange,
+  allowEditing
+}) {
+  const config = { apiBaseURL, apiBasePath, headers };
+  const [replyOffset, setReplyOffset] = React.useState(0);
+  const [loadedReplies, setLoadedReplies] = React.useState([]);
+  const {
+    comments: repliesPage,
+    total: repliesTotal,
+    isFetching: isFetchingReplies
+  } = useComments.useComments(
+    config,
+    {
+      resourceId,
+      resourceType,
+      parentId,
+      status: "approved",
+      currentUserId,
+      limit: REPLIES_PAGE_SIZE,
+      offset: replyOffset
+    },
+    { enabled: expanded }
+  );
+  React.useEffect(() => {
+    if (expanded) {
+      setReplyOffset(0);
+      setLoadedReplies([]);
+    }
+  }, [expanded, parentId]);
+  React.useEffect(() => {
+    onOffsetChange(replyOffset);
+  }, [onOffsetChange, replyOffset]);
+  React.useEffect(() => {
+    if (!expanded) return;
+    setLoadedReplies((prev) => {
+      const byId = new Map(prev.map((item) => [item.id, item]));
+      for (const reply of repliesPage) {
+        byId.set(reply.id, reply);
+      }
+      const currentPageIds = new Set(repliesPage.map((reply) => reply.id));
+      const currentPageRealReplies = repliesPage.filter(
+        (reply) => !reply.id.startsWith(OPTIMISTIC_ID_PREFIX)
+      );
+      return Array.from(byId.values()).filter((reply) => {
+        if (!reply.id.startsWith(OPTIMISTIC_ID_PREFIX)) return true;
+        if (currentPageIds.has(reply.id)) return true;
+        return !currentPageRealReplies.some(
+          (realReply) => realReply.parentId === reply.parentId && realReply.authorId === reply.authorId && realReply.body === reply.body
+        );
+      });
+    });
+  }, [expanded, repliesPage]);
+  if (replyCount === 0 && !expanded) return null;
+  const displayCount = expanded ? loadedReplies.length || replyCount : replyCount;
+  const effectiveReplyTotal = repliesTotal || replyCount;
+  const hasMoreReplies = loadedReplies.length < effectiveReplyTotal;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-11", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-7 px-2 text-xs mb-1",
+        onClick: onToggle,
+        "data-testid": expanded ? "hide-replies-button" : "show-replies-button",
+        children: [
+          expanded ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronUp, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-3 w-3 mr-1" }),
+          expanded ? loc.COMMENTS_HIDE_REPLIES : `${displayCount} ${displayCount === 1 ? loc.COMMENTS_REPLIES_SINGULAR : loc.COMMENTS_REPLIES_PLURAL}`
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "border-l-2 border-border pl-3 space-y-0",
+        "data-testid": "replies-list",
+        children: [
+          loadedReplies.map((reply) => /* @__PURE__ */ jsxRuntime.jsx(
+            CommentCard,
+            {
+              comment: reply,
+              currentUserId,
+              apiBaseURL,
+              apiBasePath,
+              resourceId,
+              resourceType,
+              headers,
+              components,
+              loc,
+              onReplyClick: () => {
+              },
+              allowPosting: false,
+              allowEditing
+            },
+            reply.id
+          )),
+          hasMoreReplies && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7 px-2 text-xs",
+              onClick: () => setReplyOffset((prev) => prev + REPLIES_PAGE_SIZE),
+              disabled: isFetchingReplies,
+              "data-testid": "load-more-replies",
+              children: isFetchingReplies ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function CommentThreadSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 rounded bg-muted animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 rounded bg-muted animate-pulse" })
+    ] }),
+    [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-muted shrink-0 mt-0.5 animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-20 rounded bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-14 rounded bg-muted animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-full rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-4/5 rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 mt-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-12 rounded bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-14 rounded bg-muted animate-pulse" })
+        ] })
+      ] })
+    ] }, i)),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-muted my-4" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full rounded-md border bg-muted animate-pulse" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-28 rounded-md bg-muted animate-pulse" }) })
+    ] })
+  ] });
+}
+function CommentThread(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "comments", className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(whenVisible.WhenVisible, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CommentThreadSkeleton, {}), rootMargin: "300px", children: /* @__PURE__ */ jsxRuntime.jsx(CommentThreadInner, { ...props }) }) });
+}
+
+exports.CommentThread = CommentThread;