@liveblocks/react-ui 3.14.0-types2 → 3.15.0-thread1

package/dist/components/Comment.cjs

@@ -22,8 +22,6 @@ var cn = require('../utils/cn.cjs');
 var download = require('../utils/download.cjs');
 var useGroupMention = require('../utils/use-group-mention.cjs');
 var useRefs = require('../utils/use-refs.cjs');
-var useVisible = require('../utils/use-visible.cjs');
-var useWindowFocus = require('../utils/use-window-focus.cjs');
 var Composer = require('./Composer.cjs');
 var Attachment = require('./internal/Attachment.cjs');
 var Avatar = require('./internal/Avatar.cjs');
@@ -35,8 +33,8 @@ var Group = require('./internal/Group.cjs');
 var List = require('./internal/List.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
 var User = require('./internal/User.cjs');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
 function _interopNamespaceDefault(e) {
@@ -60,6 +58,23 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePri
 
 
 const REACTIONS_TRUNCATE = 5;
+function CommentAvatar(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...props });
+}
+function CommentAuthor(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(User.User, { ...props });
+}
+function CommentDate({ locale, date, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Timestamp.Timestamp,
+    {
+      locale,
+      date,
+      className: cn.cn("lb-date", className),
+      ...props
+    }
+  );
+}
 function CommentUserMention({
   mention,
   className,
@@ -335,27 +350,6 @@ function CommentNonInteractiveFileAttachment({
     }
   );
 }
-function AutoMarkReadThreadIdHandler({
-  threadId,
-  roomId,
-  commentRef
-}) {
-  const markThreadAsRead = _private.useMarkRoomThreadAsRead(roomId);
-  const isWindowFocused = useWindowFocus.useWindowFocus();
-  useVisible.useIntersectionCallback(
-    commentRef,
-    (isIntersecting) => {
-      if (isIntersecting) {
-        markThreadAsRead(threadId);
-      }
-    },
-    {
-      // The underlying IntersectionObserver is only enabled when the window is focused
-      enabled: isWindowFocused
-    }
-  );
-  return null;
-}
 const CommentDropdownItem = react.forwardRef(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {
   const handleClick = react.useCallback(
     (event) => {
@@ -396,10 +390,15 @@ const Comment = Object.assign(
       dropdownItems,
       overrides: overrides$1,
       components: components$1,
+      additionalContent,
+      avatar,
+      author,
+      date,
       className,
       actions,
       actionsClassName,
-      autoMarkReadThreadId,
+      internalDropdownItems,
+      children,
       ...props
     }, forwardedRef) => {
       const ref = react.useRef(null);
@@ -506,240 +505,268 @@ const Comment = Object.assign(
       if (!showDeleted && !comment.body) {
         return null;
       }
-      const defaultDropdownItems = comment.userId === currentUserId ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      const commentDropdownItems = comment.userId === currentUserId ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(CommentDropdownItem, { onSelect: handleEdit, icon: /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {}), children: $.COMMENT_EDIT }),
         /* @__PURE__ */ jsxRuntime.jsx(CommentDropdownItem, { onSelect: handleDelete, icon: /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {}), children: $.COMMENT_DELETE })
       ] }) : null;
+      const defaultDropdownItems = internalDropdownItems || commentDropdownItems ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        internalDropdownItems,
+        commentDropdownItems
+      ] }) : null;
       const dropdownContent = typeof dropdownItems === "function" ? dropdownItems({ children: defaultDropdownItems, comment }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         defaultDropdownItems,
         dropdownItems
       ] });
-      return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.ComponentsProvider, { components: components$1, children: [
-        autoMarkReadThreadId && /* @__PURE__ */ jsxRuntime.jsx(
-          AutoMarkReadThreadIdHandler,
+      let content;
+      if (isEditing) {
+        content = /* @__PURE__ */ jsxRuntime.jsx(
+          Composer.Composer,
           {
-            commentRef: ref,
-            threadId: autoMarkReadThreadId,
+            className: "lb-comment-composer",
+            onComposerSubmit: handleEditSubmit,
+            defaultValue: comment.body,
+            defaultAttachments: comment.attachments,
+            autoFocus: true,
+            showAttribution: false,
+            showAttachments,
+            showFormattingControls: showComposerFormattingControls,
+            actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Tooltip.Tooltip,
+                {
+                  content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                  "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      className: "lb-composer-action",
+                      onClick: handleEditCancel,
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Tooltip.ShortcutTooltip,
+                {
+                  content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                  shortcut: "Enter",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Submit, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      variant: "primary",
+                      className: "lb-composer-action",
+                      onClick: stopPropagation,
+                      "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {})
+                    }
+                  ) })
+                }
+              )
+            ] }),
+            overrides: {
+              COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
+            },
             roomId: comment.roomId
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            id: comment.id,
-            className: cn.cn(
-              "lb-root lb-comment",
-              indentContent && "lb-comment:indent-content",
-              showActions === "hover" && "lb-comment:show-actions-hover",
-              (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
-              className
-            ),
-            "data-deleted": !comment.body ? "" : void 0,
-            "data-editing": isEditing ? "" : void 0,
-            "data-target": isTarget ? "" : void 0,
-            dir: $.dir,
-            ...props,
-            ref: mergedRefs,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-header", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-details", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Avatar.Avatar,
+        );
+      } else {
+        content = comment.body ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index.Body,
+            {
+              className: "lb-comment-body",
+              body: comment.body,
+              components: {
+                Mention: ({ mention }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  CommentMention,
+                  {
+                    mention,
+                    onClick: (event) => onMentionClick?.(mention, event),
+                    overrides: overrides$1
+                  }
+                ),
+                Link: CommentLink
+              }
+            }
+          ),
+          additionalContent,
+          showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-attachments", children: [
+            mediaAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-attachments", children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
+              CommentMediaAttachment,
+              {
+                attachment,
+                overrides: overrides$1,
+                onAttachmentClick,
+                roomId: comment.roomId
+              },
+              attachment.id
+            )) }) : null,
+            fileAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-attachments", children: fileAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
+              CommentFileAttachment,
+              {
+                attachment,
+                overrides: overrides$1,
+                onAttachmentClick,
+                roomId: comment.roomId
+              },
+              attachment.id
+            )) }) : null
+          ] }) : null,
+          showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-reactions", children: [
+            comment.reactions.map((reaction) => /* @__PURE__ */ jsxRuntime.jsx(
+              CommentReaction,
+              {
+                comment,
+                reaction,
+                overrides: overrides$1,
+                disabled: !canComment
+              },
+              reaction.emoji
+            )),
+            canComment ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                className: "lb-comment-reaction lb-comment-reaction-add",
+                variant: "outline",
+                onClick: stopPropagation,
+                "aria-label": $.COMMENT_ADD_REACTION,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiPlus.EmojiPlusIcon, {})
+              }
+            ) }) }) }) : null
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) });
+        content = typeof children === "function" ? children({ comment, children: content }) : children ?? content;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(components.ComponentsProvider, { components: components$1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          id: comment.id,
+          className: cn.cn(
+            "lb-root lb-comment",
+            indentContent && "lb-comment:indent-content",
+            showActions === "hover" && "lb-comment:show-actions-hover",
+            (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
+            className
+          ),
+          "data-deleted": !comment.body ? "" : void 0,
+          "data-editing": isEditing ? "" : void 0,
+          "data-target": isTarget ? "" : void 0,
+          dir: $.dir,
+          ...props,
+          ref: mergedRefs,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-header", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-details", children: [
+                avatar ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "lb-comment-avatar",
+                    onClick: handleAuthorClick,
+                    children: avatar
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Avatar.Avatar,
+                  {
+                    className: "lb-comment-avatar",
+                    userId: comment.userId,
+                    onClick: handleAuthorClick
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-comment-details-labels", children: [
+                  author ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
                     {
-                      className: "lb-comment-avatar",
+                      className: "lb-comment-author",
+                      onClick: handleAuthorClick,
+                      children: author
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    User.User,
+                    {
+                      className: "lb-comment-author",
                       userId: comment.userId,
                       onClick: handleAuthorClick
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-comment-details-labels", children: [
+                  date ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-comment-date", children: date }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      User.User,
+                      CommentDate,
                       {
-                        className: "lb-comment-author",
-                        userId: comment.userId,
-                        onClick: handleAuthorClick
+                        locale: $.locale,
+                        date: comment.createdAt,
+                        className: "lb-comment-date-created"
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lb-comment-date", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Timestamp.Timestamp,
-                        {
-                          locale: $.locale,
-                          date: comment.createdAt,
-                          className: "lb-date lb-comment-date-created"
-                        }
-                      ),
-                      comment.editedAt && comment.body && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-comment-date-edited", children: $.COMMENT_EDITED })
-                      ] })
+                    comment.editedAt && comment.body && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-comment-date-edited", children: $.COMMENT_EDITED })
                     ] })
                   ] })
-                ] }),
-                showActions && !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("lb-comment-actions", actionsClassName), children: [
-                  actions ?? null,
-                  showReactions && canComment ? /* @__PURE__ */ jsxRuntime.jsx(
-                    EmojiPicker.EmojiPicker,
-                    {
-                      onEmojiSelect: handleReactionSelect,
-                      onOpenChange: setReactionActionOpen,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Button.Button,
-                        {
-                          className: "lb-comment-action",
-                          onClick: stopPropagation,
-                          "aria-label": $.COMMENT_ADD_REACTION,
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiPlus.EmojiPlusIcon, {})
-                        }
-                      ) }) })
-                    }
-                  ) : null,
-                  dropdownContent ? /* @__PURE__ */ jsxRuntime.jsx(
-                    Dropdown.Dropdown,
-                    {
-                      open: isMoreActionOpen,
-                      onOpenChange: setMoreActionOpen,
-                      align: "end",
-                      content: dropdownContent,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Button.Button,
-                        {
-                          className: "lb-comment-action",
-                          disabled: !comment.body,
-                          onClick: stopPropagation,
-                          "aria-label": $.COMMENT_MORE,
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
-                        }
-                      ) }) })
-                    }
-                  ) : null
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-comment-content", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-                Composer.Composer,
-                {
-                  className: "lb-comment-composer",
-                  onComposerSubmit: handleEditSubmit,
-                  defaultValue: comment.body,
-                  defaultAttachments: comment.attachments,
-                  autoFocus: true,
-                  showAttribution: false,
-                  showAttachments,
-                  showFormattingControls: showComposerFormattingControls,
-                  actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Tooltip.Tooltip,
+              showActions && !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("lb-comment-actions", actionsClassName), children: [
+                actions ?? null,
+                showReactions && canComment ? /* @__PURE__ */ jsxRuntime.jsx(
+                  EmojiPicker.EmojiPicker,
+                  {
+                    onEmojiSelect: handleReactionSelect,
+                    onOpenChange: setReactionActionOpen,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
                       {
-                        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-                        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          Button.Button,
-                          {
-                            className: "lb-composer-action",
-                            onClick: handleEditCancel,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
-                          }
-                        )
+                        className: "lb-comment-action",
+                        onClick: stopPropagation,
+                        "aria-label": $.COMMENT_ADD_REACTION,
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiPlus.EmojiPlusIcon, {})
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Tooltip.ShortcutTooltip,
+                    ) }) })
+                  }
+                ) : null,
+                dropdownContent ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Dropdown.Dropdown,
+                  {
+                    open: isMoreActionOpen,
+                    onOpenChange: setMoreActionOpen,
+                    align: "end",
+                    content: dropdownContent,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Button.Button,
                       {
-                        content: $.COMMENT_EDIT_COMPOSER_SAVE,
-                        shortcut: "Enter",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Submit, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          Button.Button,
-                          {
-                            variant: "primary",
-                            className: "lb-composer-action",
-                            onClick: stopPropagation,
-                            "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {})
-                          }
-                        ) })
+                        className: "lb-comment-action",
+                        disabled: !comment.body,
+                        onClick: stopPropagation,
+                        "aria-label": $.COMMENT_MORE,
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
                       }
-                    )
-                  ] }),
-                  overrides: {
-                    COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-                  },
-                  roomId: comment.roomId
-                }
-              ) : comment.body ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  index.Body,
-                  {
-                    className: "lb-comment-body",
-                    body: comment.body,
-                    components: {
-                      Mention: ({ mention }) => /* @__PURE__ */ jsxRuntime.jsx(
-                        CommentMention,
-                        {
-                          mention,
-                          onClick: (event) => onMentionClick?.(mention, event),
-                          overrides: overrides$1
-                        }
-                      ),
-                      Link: CommentLink
-                    }
+                    ) }) })
                   }
-                ),
-                showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-attachments", children: [
-                  mediaAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-attachments", children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
-                    CommentMediaAttachment,
-                    {
-                      attachment,
-                      overrides: overrides$1,
-                      onAttachmentClick,
-                      roomId: comment.roomId
-                    },
-                    attachment.id
-                  )) }) : null,
-                  fileAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-attachments", children: fileAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
-                    CommentFileAttachment,
-                    {
-                      attachment,
-                      overrides: overrides$1,
-                      onAttachmentClick,
-                      roomId: comment.roomId
-                    },
-                    attachment.id
-                  )) }) : null
-                ] }) : null,
-                showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-comment-reactions", children: [
-                  comment.reactions.map((reaction) => /* @__PURE__ */ jsxRuntime.jsx(
-                    CommentReaction,
-                    {
-                      comment,
-                      reaction,
-                      overrides: overrides$1,
-                      disabled: !canComment
-                    },
-                    reaction.emoji
-                  )),
-                  canComment ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Button.Button,
-                    {
-                      className: "lb-comment-reaction lb-comment-reaction-add",
-                      variant: "outline",
-                      onClick: stopPropagation,
-                      "aria-label": $.COMMENT_ADD_REACTION,
-                      icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiPlus.EmojiPlusIcon, {})
-                    }
-                  ) }) }) }) : null
-                ] })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) }) })
-            ]
-          }
-        )
-      ] }) });
+                ) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-comment-content", children: content })
+          ]
+        }
+      ) }) });
     }
   ),
   {
     /**
      * Displays a dropdown item in the comment's dropdown.
      */
-    DropdownItem: CommentDropdownItem
+    DropdownItem: CommentDropdownItem,
+    /**
+     * Displays a comment's avatar.
+     */
+    Avatar: CommentAvatar,
+    /**
+     * Displays a comment's author.
+     */
+    Author: CommentAuthor,
+    /**
+     * Displays a comment's date.
+     */
+    Date: CommentDate
   }
 );