@liveblocks/react-ui 2.14.0 → 2.15.0

package/dist/components/Comment.js

@@ -1,9 +1,9 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var React = require('react');
+var react = require('react');
 var Check = require('../icons/Check.js');
 var Cross = require('../icons/Cross.js');
 var Delete = require('../icons/Delete.js');
@@ -11,8 +11,8 @@ var Edit = require('../icons/Edit.js');
 var Ellipsis = require('../icons/Ellipsis.js');
 var EmojiAdd = require('../icons/EmojiAdd.js');
 var overrides = require('../overrides.js');
-var index$1 = require('../primitives/Comment/index.js');
-var index = require('../primitives/Composer/index.js');
+var index = require('../primitives/Comment/index.js');
+var index$1 = require('../primitives/Composer/index.js');
 var Timestamp = require('../primitives/Timestamp.js');
 var shared = require('../shared.js');
 var mentions = require('../slate/plugins/mentions.js');
@@ -54,6 +54,7 @@ function _interopNamespaceDefault(e) {
 
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 
+"use client";
 const REACTIONS_TRUNCATE = 5;
 function CommentMention({
   userId,
@@ -61,13 +62,17 @@ function CommentMention({
   ...props
 }) {
   const currentId = shared.useCurrentUserId();
-  return /* @__PURE__ */ React.createElement(index$1.Mention, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
     className: classNames.classNames("lb-comment-mention", className),
     "data-self": userId === currentId ? "" : void 0,
-    ...props
-  }, mentions.MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User.User, {
-    userId
-  }));
+    ...props,
+    children: [
+      mentions.MENTION_CHARACTER,
+      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        userId
+      })
+    ]
+  });
 }
 function CommentLink({
   href,
@@ -75,11 +80,12 @@ function CommentLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(index$1.Link, {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
     className: classNames.classNames("lb-comment-link", className),
     href,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
 function CommentNonInteractiveLink({
   href: _href,
@@ -87,14 +93,15 @@ function CommentNonInteractiveLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     className: classNames.classNames("lb-comment-link", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
-const CommentReactionButton = React.forwardRef(({ reaction, overrides: overrides$1, className, ...props }, forwardedRef) => {
+const CommentReactionButton = react.forwardRef(({ reaction, overrides: overrides$1, className, ...props }, forwardedRef) => {
   const $ = overrides.useOverrides(overrides$1);
-  return /* @__PURE__ */ React.createElement(Button.Button, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, {
     className: classNames.classNames("lb-comment-reaction", className),
     variant: "outline",
     "aria-label": $.COMMENT_REACTION_DESCRIPTION(
@@ -102,43 +109,49 @@ const CommentReactionButton = React.forwardRef(({ reaction, overrides: overrides
       reaction.users.length
     ),
     ...props,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement(Emoji.Emoji, {
-    className: "lb-comment-reaction-emoji",
-    emoji: reaction.emoji
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-comment-reaction-count"
-  }, reaction.users.length));
+    ref: forwardedRef,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+        className: "lb-comment-reaction-emoji",
+        emoji: reaction.emoji
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-comment-reaction-count",
+        children: reaction.users.length
+      })
+    ]
+  });
 });
-const CommentReaction = React.forwardRef(({ comment, reaction, overrides: overrides$1, disabled, ...props }, forwardedRef) => {
+const CommentReaction = react.forwardRef(({ comment, reaction, overrides: overrides$1, disabled, ...props }, forwardedRef) => {
   const addReaction = _private.useAddRoomCommentReaction(comment.roomId);
   const removeReaction = _private.useRemoveRoomCommentReaction(comment.roomId);
   const currentId = shared.useCurrentUserId();
-  const isActive = React.useMemo(() => {
+  const isActive = react.useMemo(() => {
     return reaction.users.some((users) => users.id === currentId);
   }, [currentId, reaction]);
   const $ = overrides.useOverrides(overrides$1);
-  const tooltipContent = React.useMemo(
-    () => /* @__PURE__ */ React.createElement("span", null, $.COMMENT_REACTION_LIST(
-      /* @__PURE__ */ React.createElement(List.List, {
-        values: reaction.users.map((users) => /* @__PURE__ */ React.createElement(User.User, {
-          key: users.id,
-          userId: users.id,
-          replaceSelf: true
-        })),
-        formatRemaining: $.LIST_REMAINING_USERS,
-        truncate: REACTIONS_TRUNCATE,
-        locale: $.locale
-      }),
-      reaction.emoji,
-      reaction.users.length
-    )),
+  const tooltipContent = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children: $.COMMENT_REACTION_LIST(
+        /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+          values: reaction.users.map((users) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId: users.id,
+            replaceSelf: true
+          }, users.id)),
+          formatRemaining: $.LIST_REMAINING_USERS,
+          truncate: REACTIONS_TRUNCATE,
+          locale: $.locale
+        }),
+        reaction.emoji,
+        reaction.users.length
+      )
+    }),
     [$, reaction]
   );
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  const handlePressedChange = React.useCallback(
+  const handlePressedChange = react.useCallback(
     (isPressed) => {
       if (isPressed) {
         addReaction({
@@ -156,30 +169,32 @@ const CommentReaction = React.forwardRef(({ comment, reaction, overrides: overri
     },
     [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]
   );
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
     content: tooltipContent,
     multiline: true,
-    className: "lb-comment-reaction-tooltip"
-  }, /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
-    asChild: true,
-    pressed: isActive,
-    onPressedChange: handlePressedChange,
-    onClick: stopPropagation,
-    disabled,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement(CommentReactionButton, {
-    "data-self": isActive ? "" : void 0,
-    reaction,
-    overrides: overrides$1,
-    ...props
-  })));
+    className: "lb-comment-reaction-tooltip",
+    children: /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
+      asChild: true,
+      pressed: isActive,
+      onPressedChange: handlePressedChange,
+      onClick: stopPropagation,
+      disabled,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CommentReactionButton, {
+        "data-self": isActive ? "" : void 0,
+        reaction,
+        overrides: overrides$1,
+        ...props
+      })
+    })
+  });
 });
-const CommentNonInteractiveReaction = React.forwardRef(({ reaction, overrides, ...props }, forwardedRef) => {
+const CommentNonInteractiveReaction = react.forwardRef(({ reaction, overrides, ...props }, forwardedRef) => {
   const currentId = shared.useCurrentUserId();
-  const isActive = React.useMemo(() => {
+  const isActive = react.useMemo(() => {
     return reaction.users.some((users) => users.id === currentId);
   }, [currentId, reaction]);
-  return /* @__PURE__ */ React.createElement(CommentReactionButton, {
+  return /* @__PURE__ */ jsxRuntime.jsx(CommentReactionButton, {
     disableable: false,
     "data-self": isActive ? "" : void 0,
     reaction,
@@ -204,7 +219,7 @@ function CommentMediaAttachment({
   ...props
 }) {
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
       if (!url) {
         return;
@@ -218,7 +233,7 @@ function CommentMediaAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ React.createElement(Attachment.MediaAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.MediaAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
     ...props,
     attachment,
@@ -236,7 +251,7 @@ function CommentFileAttachment({
   ...props
 }) {
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
       if (!url) {
         return;
@@ -250,7 +265,7 @@ function CommentFileAttachment({
     },
     [attachment, onAttachmentClick, url]
   );
-  return /* @__PURE__ */ React.createElement(Attachment.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.FileAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
     ...props,
     attachment,
@@ -263,7 +278,7 @@ function CommentNonInteractiveFileAttachment({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(Attachment.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.FileAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
     allowMediaPreview: false,
     ...props
@@ -287,7 +302,7 @@ function AutoMarkReadThreadIdHandler({
   );
   return null;
 }
-const Comment = React.forwardRef(
+const Comment = react.forwardRef(
   ({
     comment,
     indentContent = true,
@@ -308,7 +323,7 @@ const Comment = React.forwardRef(
     autoMarkReadThreadId,
     ...props
   }, forwardedRef) => {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const currentUserId = shared.useCurrentUserId();
     const deleteComment = _private.useDeleteRoomComment(comment.roomId);
@@ -316,27 +331,27 @@ const Comment = React.forwardRef(
     const addReaction = _private.useAddRoomCommentReaction(comment.roomId);
     const removeReaction = _private.useRemoveRoomCommentReaction(comment.roomId);
     const $ = overrides.useOverrides(overrides$1);
-    const [isEditing, setEditing] = React.useState(false);
-    const [isTarget, setTarget] = React.useState(false);
-    const [isMoreActionOpen, setMoreActionOpen] = React.useState(false);
-    const [isReactionActionOpen, setReactionActionOpen] = React.useState(false);
-    const { mediaAttachments, fileAttachments } = React.useMemo(() => {
+    const [isEditing, setEditing] = react.useState(false);
+    const [isTarget, setTarget] = react.useState(false);
+    const [isMoreActionOpen, setMoreActionOpen] = react.useState(false);
+    const [isReactionActionOpen, setReactionActionOpen] = react.useState(false);
+    const { mediaAttachments, fileAttachments } = react.useMemo(() => {
       return Attachment.separateMediaAttachments(comment.attachments);
     }, [comment.attachments]);
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const handleEdit = React.useCallback(() => {
+    const handleEdit = react.useCallback(() => {
       setEditing(true);
     }, []);
-    const handleEditCancel = React.useCallback(
+    const handleEditCancel = react.useCallback(
       (event) => {
         event.stopPropagation();
         setEditing(false);
       },
       []
     );
-    const handleEditSubmit = React.useCallback(
+    const handleEditSubmit = react.useCallback(
       ({ body, attachments }, event) => {
         onCommentEdit?.(comment);
         event.preventDefault();
@@ -350,20 +365,20 @@ const Comment = React.forwardRef(
       },
       [comment, editComment, onCommentEdit]
     );
-    const handleDelete = React.useCallback(() => {
+    const handleDelete = react.useCallback(() => {
       onCommentDelete?.(comment);
       deleteComment({
         commentId: comment.id,
         threadId: comment.threadId
       });
     }, [comment, deleteComment, onCommentDelete]);
-    const handleAuthorClick = React.useCallback(
+    const handleAuthorClick = react.useCallback(
       (event) => {
         onAuthorClick?.(comment.userId, event);
       },
       [comment.userId, onAuthorClick]
     );
-    const handleReactionSelect = React.useCallback(
+    const handleReactionSelect = react.useCallback(
       (emoji) => {
         const reactionIndex = comment.reactions.findIndex(
           (reaction) => reaction.emoji === emoji
@@ -393,7 +408,7 @@ const Comment = React.forwardRef(
         currentUserId
       ]
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       const isWindowDefined = typeof window !== "undefined";
       if (!isWindowDefined)
         return;
@@ -406,182 +421,269 @@ const Comment = React.forwardRef(
     if (!showDeleted && !comment.body) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, autoMarkReadThreadId && /* @__PURE__ */ React.createElement(AutoMarkReadThreadIdHandler, {
-      commentRef: ref,
-      threadId: autoMarkReadThreadId,
-      roomId: comment.roomId
-    }), /* @__PURE__ */ React.createElement("div", {
-      id: comment.id,
-      className: classNames.classNames(
-        "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
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-header"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-details"
-    }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
-      className: "lb-comment-avatar",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-details-labels"
-    }, /* @__PURE__ */ React.createElement(User.User, {
-      className: "lb-comment-author",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-date"
-    }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
-      locale: $.locale,
-      date: comment.createdAt,
-      className: "lb-date lb-comment-date-created"
-    }), comment.editedAt && comment.body && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-date-edited"
-    }, $.COMMENT_EDITED))))), showActions && !isEditing && /* @__PURE__ */ React.createElement("div", {
-      className: classNames.classNames(
-        "lb-comment-actions",
-        additionalActionsClassName
-      )
-    }, additionalActions ?? null, showReactions && /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
-      onEmojiSelect: handleReactionSelect,
-      onOpenChange: setReactionActionOpen
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-action",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(EmojiAdd.EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))), comment.userId === currentUserId && /* @__PURE__ */ React.createElement(Dropdown.Dropdown, {
-      open: isMoreActionOpen,
-      onOpenChange: setMoreActionOpen,
-      align: "end",
-      content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleEdit,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Edit.EditIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_EDIT), /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleDelete,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Delete.DeleteIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_DELETE))
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_MORE
-    }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.DropdownMenuTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-action",
-      disabled: !comment.body,
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_MORE
-    }, /* @__PURE__ */ React.createElement(Ellipsis.EllipsisIcon, {
-      className: "lb-button-icon"
-    }))))))), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-content"
-    }, isEditing ? /* @__PURE__ */ React.createElement(Composer.Composer, {
-      className: "lb-comment-composer",
-      onComposerSubmit: handleEditSubmit,
-      defaultValue: comment.body,
-      defaultAttachments: comment.attachments,
-      autoFocus: true,
-      showAttribution: false,
-      showAttachments,
-      showFormattingControls: showComposerFormattingControls,
-      actions: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL
-      }, /* @__PURE__ */ React.createElement(Button.Button, {
-        className: "lb-composer-action",
-        onClick: handleEditCancel
-      }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, {
-        className: "lb-button-icon"
-      }))), /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_SAVE,
-        shortcut: /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-          name: "enter"
-        })
-      }, /* @__PURE__ */ React.createElement(index.Submit, {
-        asChild: true
-      }, /* @__PURE__ */ React.createElement(Button.Button, {
-        variant: "primary",
-        className: "lb-composer-action",
-        onClick: stopPropagation,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE
-      }, /* @__PURE__ */ React.createElement(Check.CheckIcon, {
-        className: "lb-button-icon"
-      }))))),
-      overrides: {
-        COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-      },
-      roomId: comment.roomId
-    }) : comment.body ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index$1.Body, {
-      className: "lb-comment-body",
-      body: comment.body,
-      components: {
-        Mention: ({ userId }) => /* @__PURE__ */ React.createElement(CommentMention, {
-          userId,
-          onClick: (event) => onMentionClick?.(userId, event)
+    return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive.TooltipProvider, {
+      children: [
+        autoMarkReadThreadId && /* @__PURE__ */ jsxRuntime.jsx(AutoMarkReadThreadIdHandler, {
+          commentRef: ref,
+          threadId: autoMarkReadThreadId,
+          roomId: comment.roomId
         }),
-        Link: CommentLink
-      }
-    }), showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-attachments"
-    }, mediaAttachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-attachments"
-    }, mediaAttachments.map((attachment) => /* @__PURE__ */ React.createElement(CommentMediaAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides: overrides$1,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null, fileAttachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-attachments"
-    }, fileAttachments.map((attachment) => /* @__PURE__ */ React.createElement(CommentFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides: overrides$1,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null) : null, showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-reactions"
-    }, comment.reactions.map((reaction) => /* @__PURE__ */ React.createElement(CommentReaction, {
-      key: reaction.emoji,
-      comment,
-      reaction,
-      overrides: overrides$1
-    })), /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
-      onEmojiSelect: handleReactionSelect
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-reaction lb-comment-reaction-add",
-      variant: "outline",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(EmojiAdd.EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))))) : /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-body"
-    }, /* @__PURE__ */ React.createElement("p", {
-      className: "lb-comment-deleted"
-    }, $.COMMENT_DELETED)))));
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          id: comment.id,
+          className: classNames.classNames(
+            "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, {
+                      className: "lb-comment-avatar",
+                      userId: comment.userId,
+                      onClick: handleAuthorClick
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                      className: "lb-comment-details-labels",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+                          className: "lb-comment-author",
+                          userId: comment.userId,
+                          onClick: handleAuthorClick
+                        }),
+                        /* @__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
+                                })
+                              ]
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  ]
+                }),
+                showActions && !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  className: classNames.classNames(
+                    "lb-comment-actions",
+                    additionalActionsClassName
+                  ),
+                  children: [
+                    additionalActions ?? null,
+                    showReactions && /* @__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,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    }),
+                    comment.userId === currentUserId && /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+                      open: isMoreActionOpen,
+                      onOpenChange: setMoreActionOpen,
+                      align: "end",
+                      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleEdit,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_EDIT
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleDelete,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_DELETE
+                            ]
+                          })
+                        ]
+                      }),
+                      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,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__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, {
+                      content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                      "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                        className: "lb-composer-action",
+                        onClick: handleEditCancel,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {
+                          className: "lb-button-icon"
+                        })
+                      })
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+                      content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                      shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                        name: "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,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                            className: "lb-button-icon"
+                          })
+                        })
+                      })
+                    })
+                  ]
+                }),
+                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: ({ userId }) => /* @__PURE__ */ jsxRuntime.jsx(CommentMention, {
+                        userId,
+                        onClick: (event) => onMentionClick?.(userId, event)
+                      }),
+                      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
+                      }, reaction.emoji)),
+                      /* @__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,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                                className: "lb-button-icon"
+                              })
+                            })
+                          })
+                        })
+                      })
+                    ]
+                  })
+                ]
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-comment-body",
+                children: /* @__PURE__ */ jsxRuntime.jsx("p", {
+                  className: "lb-comment-deleted",
+                  children: $.COMMENT_DELETED
+                })
+              })
+            })
+          ]
+        })
+      ]
+    });
   }
 );