@liveblocks/react-ui 3.15.0-components1 → 3.15.0-feeds2

package/README.md

@@ -1,24 +1,14 @@
-<p align="center">
-  <a href="https://liveblocks.io#gh-light-mode-only">
-    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
-  </a>
-  <a href="https://liveblocks.io#gh-dark-mode-only">
-    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
-  </a>
+<p>
+  <a href="https://liveblocks.io#gh-light-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" /></a>
+  <a href="https://liveblocks.io#gh-dark-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" /></a>
 </p>
 
 # `@liveblocks/react-ui`
 
 <p>
-  <a href="https://npmjs.org/package/@liveblocks/react-ui">
-    <img src="https://img.shields.io/npm/v/@liveblocks/react-ui?style=flat&label=npm&color=c33" alt="NPM" />
-  </a>
-  <a href="https://bundlephobia.com/package/@liveblocks/react-ui">
-    <img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react-ui?style=flat&label=size&color=09f" alt="Size" />
-  </a>
-  <a href="https://github.com/liveblocks/liveblocks/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/liveblocks/liveblocks?style=flat&label=license&color=f80" alt="License" />
-  </a>
+  <a href="https://npmjs.org/package/@liveblocks/react-ui"><img src="https://img.shields.io/npm/v/@liveblocks/react-ui?style=flat&label=npm&color=c33" alt="NPM" /></a>
+  <a href="https://bundlephobia.com/package/@liveblocks/react-ui"><img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react-ui?style=flat&label=size&color=09f" alt="Size" /></a>
+  <a href="https://github.com/liveblocks/liveblocks/blob/main/licenses/LICENSE-APACHE-2.0"><img src="https://img.shields.io/badge/license-Apache--2.0-green" alt="License" /></a>
 </p>
 
 `@liveblocks/react-ui` provides [React](https://reactjs.org/) pre-built

package/dist/_private/index.cjs

@@ -20,6 +20,7 @@ var contexts = require('../primitives/AiComposer/contexts.cjs');
 var index$1 = require('../primitives/AiMessage/index.cjs');
 var index$2 = require('../primitives/Collapsible/index.cjs');
 var Markdown = require('../primitives/Markdown.cjs');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ArrowCornerDownRight = require('../icons/ArrowCornerDownRight.cjs');
 var ArrowCornerUpRight = require('../icons/ArrowCornerUpRight.cjs');
 var ArrowDown = require('../icons/ArrowDown.cjs');
@@ -87,7 +88,6 @@ exports.List = List.List;
 exports.Prose = Prose.Prose;
 exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
 exports.Tooltip = Tooltip.Tooltip;
-exports.TooltipProvider = Tooltip.TooltipProvider;
 exports.User = User.User;
 exports.useLiveblocksUiConfig = config.useLiveblocksUiConfig;
 exports.capitalize = capitalize.capitalize;
@@ -100,6 +100,10 @@ exports.useAiComposer = contexts.useAiComposer;
 exports.AiMessage = index$1;
 exports.Collapsible = index$2;
 exports.Markdown = Markdown.Markdown;
+Object.defineProperty(exports, 'TooltipProvider', {
+  enumerable: true,
+  get: function () { return TooltipPrimitive.TooltipProvider; }
+});
 exports.ArrowCornerDownRightIcon = ArrowCornerDownRight.ArrowCornerDownRightIcon;
 exports.ArrowCornerUpRightIcon = ArrowCornerUpRight.ArrowCornerUpRightIcon;
 exports.ArrowDownIcon = ArrowDown.ArrowDownIcon;

package/dist/_private/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_private/index.d.cts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, Ref, RefCallback, FormEvent } from 'react';
-import { Tooltip as Tooltip$1 } from 'radix-ui';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export { TooltipProvider } from '@radix-ui/react-tooltip';
 
 type AvatarProps = ComponentProps<"div"> & {
     icon?: ReactNode;
@@ -344,7 +345,7 @@ interface ProseProps extends ComponentProps<"div"> {
  */
 declare function Prose({ content, partial, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps extends Pick<Tooltip$1.TooltipTriggerProps, "children">, Omit<Tooltip$1.TooltipContentProps, "content"> {
+interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
 }
@@ -353,7 +354,6 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
-declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
 
 interface UserProps extends ComponentProps<"span"> {
     /**
@@ -718,4 +718,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs };

package/dist/_private/index.d.ts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Relax, AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, Ref, RefCallback, FormEvent } from 'react';
-import { Tooltip as Tooltip$1 } from 'radix-ui';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export { TooltipProvider } from '@radix-ui/react-tooltip';
 
 type AvatarProps = ComponentProps<"div"> & {
     icon?: ReactNode;
@@ -344,7 +345,7 @@ interface ProseProps extends ComponentProps<"div"> {
  */
 declare function Prose({ content, partial, components, className, ...props }: ProseProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps extends Pick<Tooltip$1.TooltipTriggerProps, "children">, Omit<Tooltip$1.TooltipContentProps, "content"> {
+interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
     content: ReactNode;
     multiline?: boolean;
 }
@@ -353,7 +354,6 @@ interface ShortcutTooltipProps extends TooltipProps {
 }
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
-declare const TooltipProvider: react.FC<Tooltip$1.TooltipProviderProps>;
 
 interface UserProps extends ComponentProps<"span"> {
     /**
@@ -718,4 +718,4 @@ declare namespace index {
   };
 }
 
-export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TooltipProvider, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs };
+export { index$2 as AiComposer, AiComposerEditorProps, AiComposerFormProps, AiComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, GlobeIcon, Group, GroupDescription, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsInlineProps, MarkdownComponentsLinkProps, MarkdownComponentsListProps, MarkdownComponentsParagraphProps, MarkdownComponentsTableProps, MarkdownProps, MentionIcon, MinusCircleIcon, Portal, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, UserIcon, UsersIcon, WarningIcon, capitalize, cn, useAiComposer, useInitial, useLiveblocksUiConfig, useRefs };

package/dist/_private/index.js

@@ -4,7 +4,7 @@ export { Group } from '../components/internal/Group.js';
 export { GroupDescription } from '../components/internal/GroupDescription.js';
 export { List } from '../components/internal/List.js';
 export { Prose } from '../components/internal/Prose.js';
-export { ShortcutTooltip, Tooltip, TooltipProvider } from '../components/internal/Tooltip.js';
+export { ShortcutTooltip, Tooltip } from '../components/internal/Tooltip.js';
 export { User } from '../components/internal/User.js';
 export { useLiveblocksUiConfig } from '../config.js';
 import '../icons/index.js';
@@ -21,6 +21,7 @@ export { index$1 as AiMessage };
 import * as index$2 from '../primitives/Collapsible/index.js';
 export { index$2 as Collapsible };
 export { Markdown } from '../primitives/Markdown.js';
+export { TooltipProvider } from '@radix-ui/react-tooltip';
 export { ArrowCornerDownRightIcon } from '../icons/ArrowCornerDownRight.js';
 export { ArrowCornerUpRightIcon } from '../icons/ArrowCornerUpRight.js';
 export { ArrowDownIcon } from '../icons/ArrowDown.js';

package/dist/_private/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Comment.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react/_private');
-var radixUi = require('radix-ui');
+var TogglePrimitive = require('@radix-ui/react-toggle');
 var react = require('react');
 var components = require('../components.cjs');
 var Check = require('../icons/Check.cjs');
@@ -35,6 +35,28 @@ 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 DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 
 
 const REACTIONS_TRUNCATE = 5;
@@ -184,7 +206,7 @@ const CommentReaction = react.forwardRef(({ comment, reaction, overrides: overri
       multiline: true,
       className: "lb-comment-reaction-tooltip",
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        radixUi.Toggle.Root,
+        TogglePrimitive__namespace.Root,
         {
           asChild: true,
           pressed: isActive,
@@ -380,7 +402,6 @@ const Comment = Object.assign(
       autoMarkReadThreadId,
       ...props
     }, forwardedRef) => {
-      const bodyId = `${comment.id}:body`;
       const ref = react.useRef(null);
       const mergedRefs = useRefs.useRefs(forwardedRef, ref);
       const currentUserId = shared.useCurrentUserId();
@@ -493,7 +514,7 @@ const Comment = Object.assign(
         defaultDropdownItems,
         dropdownItems
       ] });
-      return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.ComponentsProvider, { components: components$1, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.ComponentsProvider, { components: components$1, children: [
         autoMarkReadThreadId && /* @__PURE__ */ jsxRuntime.jsx(
           AutoMarkReadThreadIdHandler,
           {
@@ -505,7 +526,6 @@ const Comment = Object.assign(
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            role: "article",
             id: comment.id,
             className: cn.cn(
               "lb-root lb-comment",
@@ -517,7 +537,6 @@ const Comment = Object.assign(
             "data-deleted": !comment.body ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-target": isTarget ? "" : void 0,
-            "aria-labelledby": bodyId,
             dir: $.dir,
             ...props,
             ref: mergedRefs,
@@ -564,7 +583,7 @@ const Comment = Object.assign(
                     {
                       onEmojiSelect: handleReactionSelect,
                       onOpenChange: setReactionActionOpen,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      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",
@@ -582,7 +601,7 @@ const Comment = Object.assign(
                       onOpenChange: setMoreActionOpen,
                       align: "end",
                       content: dropdownContent,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      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",
@@ -651,7 +670,6 @@ const Comment = Object.assign(
                   index.Body,
                   {
                     className: "lb-comment-body",
-                    id: bodyId,
                     body: comment.body,
                     components: {
                       Mention: ({ mention }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -699,7 +717,7 @@ const Comment = Object.assign(
                     },
                     reaction.emoji
                   )),
-                  canComment ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  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",

package/dist/components/Comment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  assertNever,\n  type CommentAttachment,\n  type CommentData,\n  type CommentReaction as CommentReactionData,\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  Permission,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useMarkRoomThreadAsRead,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefObject,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ComponentsProvider,\n  type GlobalComponents,\n  useComponents,\n} from \"../components\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EditIcon } from \"../icons/Edit\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { EmojiPlusIcon } from \"../icons/EmojiPlus\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport type { ComposerSubmitComment } from \"../primitives\";\nimport * as CommentPrimitive from \"../primitives/Comment\";\nimport type {\n  CommentBodyLinkProps,\n  CommentBodyMentionProps,\n  CommentLinkProps,\n  CommentMentionProps as CommentPrimitiveMentionProps,\n} from \"../primitives/Comment/types\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { CommentAttachmentArgs } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { download } from \"../utils/download\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { useRefs } from \"../utils/use-refs\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button, CustomButton } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport { Emoji } from \"./internal/Emoji\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { Group } from \"./internal/Group\";\nimport { List } from \"./internal/List\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nconst REACTIONS_TRUNCATE = 5;\n\nexport interface CommentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n\n  /**\n   * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.\n   */\n  showDeleted?: boolean;\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: boolean;\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * Whether to show the composer's formatting controls when editing the comment.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comment's content.\n   */\n  indentContent?: boolean;\n\n  /**\n   * The event handler called when the comment is edited.\n   */\n  onCommentEdit?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when the comment is deleted.\n   */\n  onCommentDelete?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when clicking on the author.\n   */\n  onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: (\n    mention: MentionData,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: (\n    args: CommentAttachmentArgs,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * Add (or change) items to display in the comment's dropdown.\n   */\n  dropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData }>) => ReactNode);\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n\n  /**\n   * @internal\n   */\n  autoMarkReadThreadId?: string;\n\n  /**\n   * @internal\n   */\n  actions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  actionsClassName?: string;\n}\n\nexport interface CommentDropdownItemProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  /**\n   * An optional icon displayed in this dropdown item.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The event handler called when the dropdown item is selected.\n   */\n  onSelect?: (event: Event) => void;\n}\n\ninterface CommentReactionButtonProps\n  extends ComponentPropsWithoutRef<typeof Button> {\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ninterface CommentReactionProps extends ComponentPropsWithoutRef<\"button\"> {\n  comment: CommentData;\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ntype CommentNonInteractiveReactionProps = Omit<CommentReactionProps, \"comment\">;\n\ninterface CommentAttachmentProps extends ComponentProps<typeof FileAttachment> {\n  attachment: CommentAttachment;\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n}\n\ninterface CommentMentionProps\n  extends CommentBodyMentionProps,\n    CommentPrimitiveMentionProps {\n  overrides?: CommentProps[\"overrides\"];\n}\n\nfunction CommentUserMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const currentId = useCurrentUserId();\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={mention.id === currentId ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nfunction CommentGroupMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={isMember ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentMention({ mention, ...props }: CommentMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <CommentUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <CommentGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  const { Anchor } = useComponents();\n\n  return (\n    <CommentPrimitive.Link\n      className={cn(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n      asChild\n    >\n      <Anchor {...props}>{children}</Anchor>\n    </CommentPrimitive.Link>\n  );\n}\n\nexport function CommentNonInteractiveLink({\n  href: _href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <span className={cn(\"lb-comment-link\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nconst CommentReactionButton = forwardRef<\n  HTMLButtonElement,\n  CommentReactionButtonProps\n>(({ reaction, overrides, className, ...props }, forwardedRef) => {\n  const $ = useOverrides(overrides);\n  return (\n    <CustomButton\n      className={cn(\"lb-comment-reaction\", className)}\n      variant=\"outline\"\n      aria-label={$.COMMENT_REACTION_DESCRIPTION(\n        reaction.emoji,\n        reaction.users.length\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      <Emoji className=\"lb-comment-reaction-emoji\" emoji={reaction.emoji} />\n      <span className=\"lb-comment-reaction-count\">{reaction.users.length}</span>\n    </CustomButton>\n  );\n});\n\nexport const CommentReaction = forwardRef<\n  HTMLButtonElement,\n  CommentReactionProps\n>(({ comment, reaction, overrides, disabled, ...props }, forwardedRef) => {\n  const addReaction = useAddRoomCommentReaction(comment.roomId);\n  const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n  const $ = useOverrides(overrides);\n  const tooltipContent = useMemo(\n    () => (\n      <span>\n        {$.COMMENT_REACTION_LIST(\n          <List\n            values={reaction.users.map((users) => (\n              <User key={users.id} userId={users.id} replaceSelf />\n            ))}\n            formatRemaining={$.LIST_REMAINING_USERS}\n            truncate={REACTIONS_TRUNCATE}\n            locale={$.locale}\n          />,\n          reaction.emoji,\n          reaction.users.length\n        )}\n      </span>\n    ),\n    [$, reaction]\n  );\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const handlePressedChange = useCallback(\n    (isPressed: boolean) => {\n      if (isPressed) {\n        addReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      } else {\n        removeReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      }\n    },\n    [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]\n  );\n\n  return (\n    <Tooltip\n      content={tooltipContent}\n      multiline\n      className=\"lb-comment-reaction-tooltip\"\n    >\n      <TogglePrimitive.Root\n        asChild\n        pressed={isActive}\n        onPressedChange={handlePressedChange}\n        onClick={stopPropagation}\n        disabled={disabled}\n        ref={forwardedRef}\n      >\n        <CommentReactionButton\n          data-self={isActive ? \"\" : undefined}\n          reaction={reaction}\n          overrides={overrides}\n          {...props}\n        />\n      </TogglePrimitive.Root>\n    </Tooltip>\n  );\n});\n\nexport const CommentNonInteractiveReaction = forwardRef<\n  HTMLButtonElement,\n  CommentNonInteractiveReactionProps\n>(({ reaction, overrides, ...props }, forwardedRef) => {\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n\n  return (\n    <CommentReactionButton\n      disableable={false}\n      data-self={isActive ? \"\" : undefined}\n      reaction={reaction}\n      overrides={overrides}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction openAttachment({ attachment, url }: CommentAttachmentArgs) {\n  // Open the attachment in a new tab if the attachment is a PDF,\n  // an image, a video, or audio. Otherwise, download it.\n  if (\n    attachment.mimeType === \"application/pdf\" ||\n    attachment.mimeType.startsWith(\"image/\") ||\n    attachment.mimeType.startsWith(\"video/\") ||\n    attachment.mimeType.startsWith(\"audio/\")\n  ) {\n    window.open(url, \"_blank\");\n  } else {\n    download(url, attachment.name);\n  }\n}\n\nfunction CommentMediaAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <MediaAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction CommentFileAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <FileAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nexport function CommentNonInteractiveFileAttachment({\n  className,\n  ...props\n}: CommentAttachmentProps) {\n  return (\n    <FileAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\n// A void component (which doesn't render anything) responsible for marking a thread\n// as read when the comment it's used in becomes visible.\n// Moving this logic into a separate component allows us to use the visibility\n// and focus hooks \"conditionally\" by conditionally rendering this component.\nfunction AutoMarkReadThreadIdHandler({\n  threadId,\n  roomId,\n  commentRef,\n}: {\n  threadId: string;\n  roomId: string;\n  commentRef: RefObject<HTMLElement>;\n}) {\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useIntersectionCallback(\n    commentRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        markThreadAsRead(threadId);\n      }\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return null;\n}\n\nconst CommentDropdownItem = forwardRef<\n  HTMLDivElement,\n  CommentDropdownItemProps\n>(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n      }\n    },\n    [onClick]\n  );\n\n  return (\n    <DropdownItem\n      icon={icon}\n      onSelect={onSelect}\n      onClick={handleClick}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownItem>\n  );\n});\n\n/**\n * Displays a single comment.\n *\n * @example\n * <>\n *   {thread.comments.map((comment) => (\n *     <Comment key={comment.id} comment={comment} />\n *   ))}\n * </>\n */\nexport const Comment = Object.assign(\n  forwardRef<HTMLDivElement, CommentProps>(\n    (\n      {\n        comment,\n        indentContent = true,\n        showDeleted,\n        showActions = \"hover\",\n        showReactions = true,\n        showAttachments = true,\n        showComposerFormattingControls = true,\n        onAuthorClick,\n        onMentionClick,\n        onAttachmentClick,\n        onCommentEdit,\n        onCommentDelete,\n        dropdownItems,\n        overrides,\n        components,\n        className,\n        actions,\n        actionsClassName,\n        autoMarkReadThreadId,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const bodyId = `${comment.id}:body`;\n      const ref = useRef<HTMLDivElement>(null);\n      const mergedRefs = useRefs(forwardedRef, ref);\n      const currentUserId = useCurrentUserId();\n      const deleteComment = useDeleteRoomComment(comment.roomId);\n      const editComment = useEditRoomComment(comment.roomId);\n      const addReaction = useAddRoomCommentReaction(comment.roomId);\n      const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n      const $ = useOverrides(overrides);\n      const [isEditing, setEditing] = useState(false);\n      const [isTarget, setTarget] = useState(false);\n      const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n      const [isReactionActionOpen, setReactionActionOpen] = useState(false);\n      const { mediaAttachments, fileAttachments } = useMemo(() => {\n        return separateMediaAttachments(comment.attachments);\n      }, [comment.attachments]);\n\n      const permissions = useRoomPermissions(comment.roomId);\n      const canComment =\n        permissions.size > 0\n          ? permissions.has(Permission.CommentsWrite) ||\n            permissions.has(Permission.Write)\n          : true;\n\n      const stopPropagation = useCallback((event: SyntheticEvent) => {\n        event.stopPropagation();\n      }, []);\n\n      const handleEdit = useCallback(() => {\n        setEditing(true);\n      }, []);\n\n      const handleEditCancel = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n          event.stopPropagation();\n          setEditing(false);\n        },\n        []\n      );\n\n      const handleEditSubmit = useCallback(\n        (\n          { body, attachments }: ComposerSubmitComment,\n          event: FormEvent<HTMLFormElement>\n        ) => {\n          // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n          onCommentEdit?.(comment);\n\n          if (event.isDefaultPrevented()) {\n            return;\n          }\n\n          event.stopPropagation();\n          event.preventDefault();\n\n          setEditing(false);\n          editComment({\n            commentId: comment.id,\n            threadId: comment.threadId,\n            body,\n            attachments,\n          });\n        },\n        [comment, editComment, onCommentEdit]\n      );\n\n      const handleDelete = useCallback(() => {\n        // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n        onCommentDelete?.(comment);\n\n        deleteComment({\n          commentId: comment.id,\n          threadId: comment.threadId,\n        });\n      }, [comment, deleteComment, onCommentDelete]);\n\n      const handleAuthorClick = useCallback(\n        (event: MouseEvent<HTMLElement>) => {\n          onAuthorClick?.(comment.userId, event);\n        },\n        [comment.userId, onAuthorClick]\n      );\n\n      const handleReactionSelect = useCallback(\n        (emoji: string) => {\n          const reactionIndex = comment.reactions.findIndex(\n            (reaction) => reaction.emoji === emoji\n          );\n\n          if (\n            reactionIndex >= 0 &&\n            currentUserId &&\n            comment.reactions[reactionIndex]?.users.some(\n              (user) => user.id === currentUserId\n            )\n          ) {\n            removeReaction({\n              threadId: comment.threadId,\n              commentId: comment.id,\n              emoji,\n            });\n          } else {\n            addReaction({\n              threadId: comment.threadId,\n              commentId: comment.id,\n              emoji,\n            });\n          }\n        },\n        [\n          addReaction,\n          comment.id,\n          comment.reactions,\n          comment.threadId,\n          removeReaction,\n          currentUserId,\n        ]\n      );\n\n      useEffect(() => {\n        const isWindowDefined = typeof window !== \"undefined\";\n        if (!isWindowDefined) return;\n\n        const hash = window.location.hash;\n        const commentId = hash.slice(1);\n\n        if (commentId === comment.id) {\n          setTarget(true);\n        }\n      }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n      if (!showDeleted && !comment.body) {\n        return null;\n      }\n\n      const defaultDropdownItems =\n        comment.userId === currentUserId ? (\n          <>\n            <CommentDropdownItem onSelect={handleEdit} icon={<EditIcon />}>\n              {$.COMMENT_EDIT}\n            </CommentDropdownItem>\n            <CommentDropdownItem onSelect={handleDelete} icon={<DeleteIcon />}>\n              {$.COMMENT_DELETE}\n            </CommentDropdownItem>\n          </>\n        ) : null;\n\n      const dropdownContent =\n        typeof dropdownItems === \"function\" ? (\n          dropdownItems({ children: defaultDropdownItems, comment })\n        ) : (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        );\n\n      return (\n        <TooltipProvider>\n          <ComponentsProvider components={components}>\n            {autoMarkReadThreadId && (\n              <AutoMarkReadThreadIdHandler\n                commentRef={ref}\n                threadId={autoMarkReadThreadId}\n                roomId={comment.roomId}\n              />\n            )}\n            <div\n              role=\"article\"\n              id={comment.id}\n              className={cn(\n                \"lb-root lb-comment\",\n                indentContent && \"lb-comment:indent-content\",\n                showActions === \"hover\" && \"lb-comment:show-actions-hover\",\n                (isMoreActionOpen || isReactionActionOpen) &&\n                  \"lb-comment:action-open\",\n                className\n              )}\n              data-deleted={!comment.body ? \"\" : undefined}\n              data-editing={isEditing ? \"\" : undefined}\n              // In some cases, `:target` doesn't work as expected so we also define it manually.\n              data-target={isTarget ? \"\" : undefined}\n              aria-labelledby={bodyId}\n              dir={$.dir}\n              {...props}\n              ref={mergedRefs}\n            >\n              <div className=\"lb-comment-header\">\n                <div className=\"lb-comment-details\">\n                  <Avatar\n                    className=\"lb-comment-avatar\"\n                    userId={comment.userId}\n                    onClick={handleAuthorClick}\n                  />\n                  <span className=\"lb-comment-details-labels\">\n                    <User\n                      className=\"lb-comment-author\"\n                      userId={comment.userId}\n                      onClick={handleAuthorClick}\n                    />\n                    <span className=\"lb-comment-date\">\n                      <Timestamp\n                        locale={$.locale}\n                        date={comment.createdAt}\n                        className=\"lb-date lb-comment-date-created\"\n                      />\n                      {comment.editedAt && comment.body && (\n                        <>\n                          {\" \"}\n                          <span className=\"lb-comment-date-edited\">\n                            {$.COMMENT_EDITED}\n                          </span>\n                        </>\n                      )}\n                    </span>\n                  </span>\n                </div>\n                {showActions && !isEditing && (\n                  <div className={cn(\"lb-comment-actions\", actionsClassName)}>\n                    {actions ?? null}\n                    {showReactions && canComment ? (\n                      <EmojiPicker\n                        onEmojiSelect={handleReactionSelect}\n                        onOpenChange={setReactionActionOpen}\n                      >\n                        <Tooltip content={$.COMMENT_ADD_REACTION}>\n                          <EmojiPickerTrigger asChild>\n                            <Button\n                              className=\"lb-comment-action\"\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_ADD_REACTION}\n                              icon={<EmojiPlusIcon />}\n                            />\n                          </EmojiPickerTrigger>\n                        </Tooltip>\n                      </EmojiPicker>\n                    ) : null}\n                    {dropdownContent ? (\n                      <Dropdown\n                        open={isMoreActionOpen}\n                        onOpenChange={setMoreActionOpen}\n                        align=\"end\"\n                        content={dropdownContent}\n                      >\n                        <Tooltip content={$.COMMENT_MORE}>\n                          <DropdownTrigger asChild>\n                            <Button\n                              className=\"lb-comment-action\"\n                              disabled={!comment.body}\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_MORE}\n                              icon={<EllipsisIcon />}\n                            />\n                          </DropdownTrigger>\n                        </Tooltip>\n                      </Dropdown>\n                    ) : null}\n                  </div>\n                )}\n              </div>\n              <div className=\"lb-comment-content\">\n                {isEditing ? (\n                  <Composer\n                    className=\"lb-comment-composer\"\n                    onComposerSubmit={handleEditSubmit}\n                    defaultValue={comment.body}\n                    defaultAttachments={comment.attachments}\n                    autoFocus\n                    showAttribution={false}\n                    showAttachments={showAttachments}\n                    showFormattingControls={showComposerFormattingControls}\n                    actions={\n                      <>\n                        <Tooltip\n                          content={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                          aria-label={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                        >\n                          <Button\n                            className=\"lb-composer-action\"\n                            onClick={handleEditCancel}\n                            icon={<CrossIcon />}\n                          />\n                        </Tooltip>\n                        <ShortcutTooltip\n                          content={$.COMMENT_EDIT_COMPOSER_SAVE}\n                          shortcut=\"Enter\"\n                        >\n                          <ComposerPrimitive.Submit asChild>\n                            <Button\n                              variant=\"primary\"\n                              className=\"lb-composer-action\"\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_EDIT_COMPOSER_SAVE}\n                              icon={<CheckIcon />}\n                            />\n                          </ComposerPrimitive.Submit>\n                        </ShortcutTooltip>\n                      </>\n                    }\n                    overrides={{\n                      COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER,\n                    }}\n                    roomId={comment.roomId}\n                  />\n                ) : comment.body ? (\n                  <>\n                    <CommentPrimitive.Body\n                      className=\"lb-comment-body\"\n                      id={bodyId}\n                      body={comment.body}\n                      components={{\n                        Mention: ({ mention }) => (\n                          <CommentMention\n                            mention={mention}\n                            onClick={(event) =>\n                              onMentionClick?.(mention, event)\n                            }\n                            overrides={overrides}\n                          />\n                        ),\n                        Link: CommentLink,\n                      }}\n                    />\n                    {showAttachments &&\n                    (mediaAttachments.length > 0 ||\n                      fileAttachments.length > 0) ? (\n                      <div className=\"lb-comment-attachments\">\n                        {mediaAttachments.length > 0 ? (\n                          <div className=\"lb-attachments\">\n                            {mediaAttachments.map((attachment) => (\n                              <CommentMediaAttachment\n                                key={attachment.id}\n                                attachment={attachment}\n                                overrides={overrides}\n                                onAttachmentClick={onAttachmentClick}\n                                roomId={comment.roomId}\n                              />\n                            ))}\n                          </div>\n                        ) : null}\n                        {fileAttachments.length > 0 ? (\n                          <div className=\"lb-attachments\">\n                            {fileAttachments.map((attachment) => (\n                              <CommentFileAttachment\n                                key={attachment.id}\n                                attachment={attachment}\n                                overrides={overrides}\n                                onAttachmentClick={onAttachmentClick}\n                                roomId={comment.roomId}\n                              />\n                            ))}\n                          </div>\n                        ) : null}\n                      </div>\n                    ) : null}\n                    {showReactions && comment.reactions.length > 0 && (\n                      <div className=\"lb-comment-reactions\">\n                        {comment.reactions.map((reaction) => (\n                          <CommentReaction\n                            key={reaction.emoji}\n                            comment={comment}\n                            reaction={reaction}\n                            overrides={overrides}\n                            disabled={!canComment}\n                          />\n                        ))}\n                        {canComment ? (\n                          <EmojiPicker onEmojiSelect={handleReactionSelect}>\n                            <Tooltip content={$.COMMENT_ADD_REACTION}>\n                              <EmojiPickerTrigger asChild>\n                                <Button\n                                  className=\"lb-comment-reaction lb-comment-reaction-add\"\n                                  variant=\"outline\"\n                                  onClick={stopPropagation}\n                                  aria-label={$.COMMENT_ADD_REACTION}\n                                  icon={<EmojiPlusIcon />}\n                                />\n                              </EmojiPickerTrigger>\n                            </Tooltip>\n                          </EmojiPicker>\n                        ) : null}\n                      </div>\n                    )}\n                  </>\n                ) : (\n                  <div className=\"lb-comment-body\">\n                    <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ComponentsProvider>\n        </TooltipProvider>\n      );\n    }\n  ),\n  {\n    /**\n     * Displays a dropdown item in the comment's dropdown.\n     */\n    DropdownItem: CommentDropdownItem,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;AA4IA;AAA4B;AAC1B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AACb;AACvC;AAEJ;AAAuD;AAC7B;AAAA;AAAA;AAGhC;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AAC7B;AACvB;AAEJ;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAwD;AAGxD;AAAyD;AAGzD;AAAoD;AAE1D;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AAC2C;AAC1C;AACI;AACG;AAEsB;AAAA;AAGnC;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AAKF;AAEA;AAIE;AACA;AACE;AAAC;AAAA;AAC+C;AACtC;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAoE;AACD;AAAA;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAGd;AACD;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AACZ;AACS;AACM;AAEnB;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACE;AAAC;AAAA;AACU;AACA;AACC;AAEV;AAAiB;AAAhB;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEL;AAAC;AAAA;AAC4B;AAC3B;AACA;AACI;AAAA;AACN;AAAA;AACF;AAAA;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACE;AAAC;AAAA;AACc;AACc;AAC3B;AACA;AACI;AACC;AAAA;AAGX;AAEA;AAGE;AAME;AAAyB;AAEzB;AAA6B;AAEjC;AAEA;AAAgC;AAC9B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEA;AAA+B;AAC7B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACE;AAAC;AAAA;AACiD;AAC7B;AACf;AAAA;AAGV;AAMA;AAAqC;AACnC;AACA;AAEF;AAKE;AACA;AAEA;AAAA;AACE;AAEE;AACE;AAAyB;AAC3B;AACF;AACA;AAAA;AAEW;AACX;AAGF;AACF;AAEA;AAIE;AAAoB;AAEhB;AAEA;AACE;AAAsB;AACxB;AACF;AACQ;AAGV;AACE;AAAC;AAAA;AACC;AACA;AACS;AACL;AACC;AAEJ;AAAA;AAGP;AAYO;AAAuB;AAC5B;AAEI;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAmD;AAGrD;AACA;AAMA;AACE;AAAsB;AAGxB;AACE;AAAe;AAGjB;AAAyB;AAErB;AACA;AAAgB;AAClB;AACC;AAGH;AAAyB;AAMrB;AAEA;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAAY;AACS;AACD;AAClB;AACA;AACD;AACH;AACoC;AAGtC;AAEE;AAEA;AAAc;AACO;AACD;AACnB;AAGH;AAA0B;AAEtB;AAAqC;AACvC;AAC8B;AAGhC;AAA6B;AAEzB;AAAwC;AACL;AAGnC;AAG0C;AAChB;AAGxB;AAAe;AACK;AACC;AACnB;AACD;AAED;AAAY;AACQ;AACC;AACnB;AACD;AACH;AACF;AACA;AACE;AACQ;AACA;AACA;AACR;AACA;AACF;AAGF;AACE;AACA;AAAsB;AAEtB;AACA;AAEA;AACE;AAAc;AAChB;AAGF;AACE;AAAO;AAGT;AAGM;AAEA;AAGA;AAIN;AAKO;AAAA;AACA;AAIP;AAGO;AACC;AAAC;AAAA;AACa;AACF;AACM;AAAA;AAClB;AAEF;AAAC;AAAA;AACM;AACO;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACZ;AACV;AACH;AACC;AAEL;AACE;AACE;AAAA;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAEE;AAAA;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAEE;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAGK;AAAA;AAGD;AACF;AAEJ;AACF;AACF;AAGK;AAAW;AAEV;AAAC;AAAA;AACgB;AACD;AAIV;AAAC;AAAA;AACW;AACD;AACK;AACO;AAAA;AAG3B;AAAA;AAEA;AAEF;AAAC;AAAA;AACO;AACQ;AACR;AACG;AAIL;AAAC;AAAA;AACW;AACS;AACV;AACK;AACM;AAAA;AAG1B;AAAA;AAEA;AACN;AAEJ;AAGI;AAAC;AAAA;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAGpB;AAAA;AAAC;AAAA;AACY;AACG;AAEd;AAAC;AAAA;AACW;AACD;AACQ;AAAA;AACnB;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACF;AAGP;AAAC;AAAA;AACS;AACE;AACD;AACK;AACG;AAAA;AAErB;AAAA;AACF;AACF;AAES;AACe;AAC1B;AACgB;AAAA;AAIhB;AAAA;AAAkB;AAAjB;AACW;AACN;AACU;AACF;AAER;AAAC;AAAA;AACC;AAEiC;AAEjC;AAAA;AACF;AAEI;AACR;AAAA;AACF;AAKK;AAGK;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAIE;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAEJ;AAGC;AACC;AAAC;AAAA;AAEC;AACA;AACA;AACW;AAAA;AAJG;AAMjB;AAKO;AAAC;AAAA;AACW;AACF;AACC;AACK;AACO;AAAA;AAK3B;AACN;AAQR;AAAA;AAAA;AACF;AAEJ;AAEJ;AACF;AACA;AAAA;AAAA;AAAA;AAIgB;AAElB;;;;;;;;"}
+{"version":3,"file":"Comment.cjs","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  assertNever,\n  type CommentAttachment,\n  type CommentData,\n  type CommentReaction as CommentReactionData,\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  Permission,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\n  useMarkRoomThreadAsRead,\n  useRemoveRoomCommentReaction,\n  useRoomAttachmentUrl,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefObject,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  ComponentsProvider,\n  type GlobalComponents,\n  useComponents,\n} from \"../components\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { CrossIcon } from \"../icons/Cross\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EditIcon } from \"../icons/Edit\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { EmojiPlusIcon } from \"../icons/EmojiPlus\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport type { ComposerSubmitComment } from \"../primitives\";\nimport * as CommentPrimitive from \"../primitives/Comment\";\nimport type {\n  CommentBodyLinkProps,\n  CommentBodyMentionProps,\n  CommentLinkProps,\n  CommentMentionProps as CommentPrimitiveMentionProps,\n} from \"../primitives/Comment/types\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { CommentAttachmentArgs } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { download } from \"../utils/download\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { useRefs } from \"../utils/use-refs\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport {\n  FileAttachment,\n  MediaAttachment,\n  separateMediaAttachments,\n} from \"./internal/Attachment\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button, CustomButton } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport { Emoji } from \"./internal/Emoji\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { Group } from \"./internal/Group\";\nimport { List } from \"./internal/List\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\nconst REACTIONS_TRUNCATE = 5;\n\nexport interface CommentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n\n  /**\n   * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.\n   */\n  showDeleted?: boolean;\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: boolean;\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * Whether to show the composer's formatting controls when editing the comment.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comment's content.\n   */\n  indentContent?: boolean;\n\n  /**\n   * The event handler called when the comment is edited.\n   */\n  onCommentEdit?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when the comment is deleted.\n   */\n  onCommentDelete?: (comment: CommentData) => void;\n\n  /**\n   * The event handler called when clicking on the author.\n   */\n  onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: (\n    mention: MentionData,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: (\n    args: CommentAttachmentArgs,\n    event: MouseEvent<HTMLElement>\n  ) => void;\n\n  /**\n   * Add (or change) items to display in the comment's dropdown.\n   */\n  dropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData }>) => ReactNode);\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n\n  /**\n   * @internal\n   */\n  autoMarkReadThreadId?: string;\n\n  /**\n   * @internal\n   */\n  actions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  actionsClassName?: string;\n}\n\nexport interface CommentDropdownItemProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  /**\n   * An optional icon displayed in this dropdown item.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The event handler called when the dropdown item is selected.\n   */\n  onSelect?: (event: Event) => void;\n}\n\ninterface CommentReactionButtonProps\n  extends ComponentPropsWithoutRef<typeof Button> {\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ninterface CommentReactionProps extends ComponentPropsWithoutRef<\"button\"> {\n  comment: CommentData;\n  reaction: CommentReactionData;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\ntype CommentNonInteractiveReactionProps = Omit<CommentReactionProps, \"comment\">;\n\ninterface CommentAttachmentProps extends ComponentProps<typeof FileAttachment> {\n  attachment: CommentAttachment;\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n}\n\ninterface CommentMentionProps\n  extends CommentBodyMentionProps,\n    CommentPrimitiveMentionProps {\n  overrides?: CommentProps[\"overrides\"];\n}\n\nfunction CommentUserMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const currentId = useCurrentUserId();\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={mention.id === currentId ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nfunction CommentGroupMention({\n  mention,\n  className,\n  ...props\n}: CommentMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <CommentPrimitive.Mention\n      className={cn(\"lb-mention lb-comment-mention\", className)}\n      data-self={isMember ? \"\" : undefined}\n      {...props}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </CommentPrimitive.Mention>\n  );\n}\n\nexport function CommentMention({ mention, ...props }: CommentMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <CommentUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <CommentGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nexport function CommentLink({\n  href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  const { Anchor } = useComponents();\n\n  return (\n    <CommentPrimitive.Link\n      className={cn(\"lb-comment-link\", className)}\n      href={href}\n      {...props}\n      asChild\n    >\n      <Anchor {...props}>{children}</Anchor>\n    </CommentPrimitive.Link>\n  );\n}\n\nexport function CommentNonInteractiveLink({\n  href: _href,\n  children,\n  className,\n  ...props\n}: CommentBodyLinkProps & CommentLinkProps) {\n  return (\n    <span className={cn(\"lb-comment-link\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nconst CommentReactionButton = forwardRef<\n  HTMLButtonElement,\n  CommentReactionButtonProps\n>(({ reaction, overrides, className, ...props }, forwardedRef) => {\n  const $ = useOverrides(overrides);\n  return (\n    <CustomButton\n      className={cn(\"lb-comment-reaction\", className)}\n      variant=\"outline\"\n      aria-label={$.COMMENT_REACTION_DESCRIPTION(\n        reaction.emoji,\n        reaction.users.length\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      <Emoji className=\"lb-comment-reaction-emoji\" emoji={reaction.emoji} />\n      <span className=\"lb-comment-reaction-count\">{reaction.users.length}</span>\n    </CustomButton>\n  );\n});\n\nexport const CommentReaction = forwardRef<\n  HTMLButtonElement,\n  CommentReactionProps\n>(({ comment, reaction, overrides, disabled, ...props }, forwardedRef) => {\n  const addReaction = useAddRoomCommentReaction(comment.roomId);\n  const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n  const $ = useOverrides(overrides);\n  const tooltipContent = useMemo(\n    () => (\n      <span>\n        {$.COMMENT_REACTION_LIST(\n          <List\n            values={reaction.users.map((users) => (\n              <User key={users.id} userId={users.id} replaceSelf />\n            ))}\n            formatRemaining={$.LIST_REMAINING_USERS}\n            truncate={REACTIONS_TRUNCATE}\n            locale={$.locale}\n          />,\n          reaction.emoji,\n          reaction.users.length\n        )}\n      </span>\n    ),\n    [$, reaction]\n  );\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  const handlePressedChange = useCallback(\n    (isPressed: boolean) => {\n      if (isPressed) {\n        addReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      } else {\n        removeReaction({\n          threadId: comment.threadId,\n          commentId: comment.id,\n          emoji: reaction.emoji,\n        });\n      }\n    },\n    [addReaction, comment.threadId, comment.id, reaction.emoji, removeReaction]\n  );\n\n  return (\n    <Tooltip\n      content={tooltipContent}\n      multiline\n      className=\"lb-comment-reaction-tooltip\"\n    >\n      <TogglePrimitive.Root\n        asChild\n        pressed={isActive}\n        onPressedChange={handlePressedChange}\n        onClick={stopPropagation}\n        disabled={disabled}\n        ref={forwardedRef}\n      >\n        <CommentReactionButton\n          data-self={isActive ? \"\" : undefined}\n          reaction={reaction}\n          overrides={overrides}\n          {...props}\n        />\n      </TogglePrimitive.Root>\n    </Tooltip>\n  );\n});\n\nexport const CommentNonInteractiveReaction = forwardRef<\n  HTMLButtonElement,\n  CommentNonInteractiveReactionProps\n>(({ reaction, overrides, ...props }, forwardedRef) => {\n  const currentId = useCurrentUserId();\n  const isActive = useMemo(() => {\n    return reaction.users.some((users) => users.id === currentId);\n  }, [currentId, reaction]);\n\n  return (\n    <CommentReactionButton\n      disableable={false}\n      data-self={isActive ? \"\" : undefined}\n      reaction={reaction}\n      overrides={overrides}\n      {...props}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction openAttachment({ attachment, url }: CommentAttachmentArgs) {\n  // Open the attachment in a new tab if the attachment is a PDF,\n  // an image, a video, or audio. Otherwise, download it.\n  if (\n    attachment.mimeType === \"application/pdf\" ||\n    attachment.mimeType.startsWith(\"image/\") ||\n    attachment.mimeType.startsWith(\"video/\") ||\n    attachment.mimeType.startsWith(\"audio/\")\n  ) {\n    window.open(url, \"_blank\");\n  } else {\n    download(url, attachment.name);\n  }\n}\n\nfunction CommentMediaAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <MediaAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction CommentFileAttachment({\n  attachment,\n  onAttachmentClick,\n  roomId,\n  className,\n  overrides,\n  ...props\n}: CommentAttachmentProps & {\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (!url) {\n        return;\n      }\n\n      const args: CommentAttachmentArgs = { attachment, url };\n\n      onAttachmentClick?.(args, event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      openAttachment(args);\n    },\n    [attachment, onAttachmentClick, url]\n  );\n\n  return (\n    <FileAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      overrides={overrides}\n      onClick={url ? handleClick : undefined}\n      roomId={roomId}\n    />\n  );\n}\n\nexport function CommentNonInteractiveFileAttachment({\n  className,\n  ...props\n}: CommentAttachmentProps) {\n  return (\n    <FileAttachment\n      className={cn(\"lb-comment-attachment\", className)}\n      allowMediaPreview={false}\n      {...props}\n    />\n  );\n}\n\n// A void component (which doesn't render anything) responsible for marking a thread\n// as read when the comment it's used in becomes visible.\n// Moving this logic into a separate component allows us to use the visibility\n// and focus hooks \"conditionally\" by conditionally rendering this component.\nfunction AutoMarkReadThreadIdHandler({\n  threadId,\n  roomId,\n  commentRef,\n}: {\n  threadId: string;\n  roomId: string;\n  commentRef: RefObject<HTMLElement>;\n}) {\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useIntersectionCallback(\n    commentRef,\n    (isIntersecting) => {\n      if (isIntersecting) {\n        markThreadAsRead(threadId);\n      }\n    },\n    {\n      // The underlying IntersectionObserver is only enabled when the window is focused\n      enabled: isWindowFocused,\n    }\n  );\n\n  return null;\n}\n\nconst CommentDropdownItem = forwardRef<\n  HTMLDivElement,\n  CommentDropdownItemProps\n>(({ children, icon, onSelect, onClick, ...props }, forwardedRef) => {\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n      }\n    },\n    [onClick]\n  );\n\n  return (\n    <DropdownItem\n      icon={icon}\n      onSelect={onSelect}\n      onClick={handleClick}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownItem>\n  );\n});\n\n/**\n * Displays a single comment.\n *\n * @example\n * <>\n *   {thread.comments.map((comment) => (\n *     <Comment key={comment.id} comment={comment} />\n *   ))}\n * </>\n */\nexport const Comment = Object.assign(\n  forwardRef<HTMLDivElement, CommentProps>(\n    (\n      {\n        comment,\n        indentContent = true,\n        showDeleted,\n        showActions = \"hover\",\n        showReactions = true,\n        showAttachments = true,\n        showComposerFormattingControls = true,\n        onAuthorClick,\n        onMentionClick,\n        onAttachmentClick,\n        onCommentEdit,\n        onCommentDelete,\n        dropdownItems,\n        overrides,\n        components,\n        className,\n        actions,\n        actionsClassName,\n        autoMarkReadThreadId,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const ref = useRef<HTMLDivElement>(null);\n      const mergedRefs = useRefs(forwardedRef, ref);\n      const currentUserId = useCurrentUserId();\n      const deleteComment = useDeleteRoomComment(comment.roomId);\n      const editComment = useEditRoomComment(comment.roomId);\n      const addReaction = useAddRoomCommentReaction(comment.roomId);\n      const removeReaction = useRemoveRoomCommentReaction(comment.roomId);\n      const $ = useOverrides(overrides);\n      const [isEditing, setEditing] = useState(false);\n      const [isTarget, setTarget] = useState(false);\n      const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n      const [isReactionActionOpen, setReactionActionOpen] = useState(false);\n      const { mediaAttachments, fileAttachments } = useMemo(() => {\n        return separateMediaAttachments(comment.attachments);\n      }, [comment.attachments]);\n\n      const permissions = useRoomPermissions(comment.roomId);\n      const canComment =\n        permissions.size > 0\n          ? permissions.has(Permission.CommentsWrite) ||\n            permissions.has(Permission.Write)\n          : true;\n\n      const stopPropagation = useCallback((event: SyntheticEvent) => {\n        event.stopPropagation();\n      }, []);\n\n      const handleEdit = useCallback(() => {\n        setEditing(true);\n      }, []);\n\n      const handleEditCancel = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n          event.stopPropagation();\n          setEditing(false);\n        },\n        []\n      );\n\n      const handleEditSubmit = useCallback(\n        (\n          { body, attachments }: ComposerSubmitComment,\n          event: FormEvent<HTMLFormElement>\n        ) => {\n          // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n          onCommentEdit?.(comment);\n\n          if (event.isDefaultPrevented()) {\n            return;\n          }\n\n          event.stopPropagation();\n          event.preventDefault();\n\n          setEditing(false);\n          editComment({\n            commentId: comment.id,\n            threadId: comment.threadId,\n            body,\n            attachments,\n          });\n        },\n        [comment, editComment, onCommentEdit]\n      );\n\n      const handleDelete = useCallback(() => {\n        // TODO: Add a way to preventDefault from within this callback, to override the default behavior (e.g. showing a confirmation dialog)\n        onCommentDelete?.(comment);\n\n        deleteComment({\n          commentId: comment.id,\n          threadId: comment.threadId,\n        });\n      }, [comment, deleteComment, onCommentDelete]);\n\n      const handleAuthorClick = useCallback(\n        (event: MouseEvent<HTMLElement>) => {\n          onAuthorClick?.(comment.userId, event);\n        },\n        [comment.userId, onAuthorClick]\n      );\n\n      const handleReactionSelect = useCallback(\n        (emoji: string) => {\n          const reactionIndex = comment.reactions.findIndex(\n            (reaction) => reaction.emoji === emoji\n          );\n\n          if (\n            reactionIndex >= 0 &&\n            currentUserId &&\n            comment.reactions[reactionIndex]?.users.some(\n              (user) => user.id === currentUserId\n            )\n          ) {\n            removeReaction({\n              threadId: comment.threadId,\n              commentId: comment.id,\n              emoji,\n            });\n          } else {\n            addReaction({\n              threadId: comment.threadId,\n              commentId: comment.id,\n              emoji,\n            });\n          }\n        },\n        [\n          addReaction,\n          comment.id,\n          comment.reactions,\n          comment.threadId,\n          removeReaction,\n          currentUserId,\n        ]\n      );\n\n      useEffect(() => {\n        const isWindowDefined = typeof window !== \"undefined\";\n        if (!isWindowDefined) return;\n\n        const hash = window.location.hash;\n        const commentId = hash.slice(1);\n\n        if (commentId === comment.id) {\n          setTarget(true);\n        }\n      }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n      if (!showDeleted && !comment.body) {\n        return null;\n      }\n\n      const defaultDropdownItems =\n        comment.userId === currentUserId ? (\n          <>\n            <CommentDropdownItem onSelect={handleEdit} icon={<EditIcon />}>\n              {$.COMMENT_EDIT}\n            </CommentDropdownItem>\n            <CommentDropdownItem onSelect={handleDelete} icon={<DeleteIcon />}>\n              {$.COMMENT_DELETE}\n            </CommentDropdownItem>\n          </>\n        ) : null;\n\n      const dropdownContent =\n        typeof dropdownItems === \"function\" ? (\n          dropdownItems({ children: defaultDropdownItems, comment })\n        ) : (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        );\n\n      return (\n        <TooltipProvider>\n          <ComponentsProvider components={components}>\n            {autoMarkReadThreadId && (\n              <AutoMarkReadThreadIdHandler\n                commentRef={ref}\n                threadId={autoMarkReadThreadId}\n                roomId={comment.roomId}\n              />\n            )}\n            <div\n              id={comment.id}\n              className={cn(\n                \"lb-root lb-comment\",\n                indentContent && \"lb-comment:indent-content\",\n                showActions === \"hover\" && \"lb-comment:show-actions-hover\",\n                (isMoreActionOpen || isReactionActionOpen) &&\n                  \"lb-comment:action-open\",\n                className\n              )}\n              data-deleted={!comment.body ? \"\" : undefined}\n              data-editing={isEditing ? \"\" : undefined}\n              // In some cases, `:target` doesn't work as expected so we also define it manually.\n              data-target={isTarget ? \"\" : undefined}\n              dir={$.dir}\n              {...props}\n              ref={mergedRefs}\n            >\n              <div className=\"lb-comment-header\">\n                <div className=\"lb-comment-details\">\n                  <Avatar\n                    className=\"lb-comment-avatar\"\n                    userId={comment.userId}\n                    onClick={handleAuthorClick}\n                  />\n                  <span className=\"lb-comment-details-labels\">\n                    <User\n                      className=\"lb-comment-author\"\n                      userId={comment.userId}\n                      onClick={handleAuthorClick}\n                    />\n                    <span className=\"lb-comment-date\">\n                      <Timestamp\n                        locale={$.locale}\n                        date={comment.createdAt}\n                        className=\"lb-date lb-comment-date-created\"\n                      />\n                      {comment.editedAt && comment.body && (\n                        <>\n                          {\" \"}\n                          <span className=\"lb-comment-date-edited\">\n                            {$.COMMENT_EDITED}\n                          </span>\n                        </>\n                      )}\n                    </span>\n                  </span>\n                </div>\n                {showActions && !isEditing && (\n                  <div className={cn(\"lb-comment-actions\", actionsClassName)}>\n                    {actions ?? null}\n                    {showReactions && canComment ? (\n                      <EmojiPicker\n                        onEmojiSelect={handleReactionSelect}\n                        onOpenChange={setReactionActionOpen}\n                      >\n                        <Tooltip content={$.COMMENT_ADD_REACTION}>\n                          <EmojiPickerTrigger asChild>\n                            <Button\n                              className=\"lb-comment-action\"\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_ADD_REACTION}\n                              icon={<EmojiPlusIcon />}\n                            />\n                          </EmojiPickerTrigger>\n                        </Tooltip>\n                      </EmojiPicker>\n                    ) : null}\n                    {dropdownContent ? (\n                      <Dropdown\n                        open={isMoreActionOpen}\n                        onOpenChange={setMoreActionOpen}\n                        align=\"end\"\n                        content={dropdownContent}\n                      >\n                        <Tooltip content={$.COMMENT_MORE}>\n                          <DropdownTrigger asChild>\n                            <Button\n                              className=\"lb-comment-action\"\n                              disabled={!comment.body}\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_MORE}\n                              icon={<EllipsisIcon />}\n                            />\n                          </DropdownTrigger>\n                        </Tooltip>\n                      </Dropdown>\n                    ) : null}\n                  </div>\n                )}\n              </div>\n              <div className=\"lb-comment-content\">\n                {isEditing ? (\n                  <Composer\n                    className=\"lb-comment-composer\"\n                    onComposerSubmit={handleEditSubmit}\n                    defaultValue={comment.body}\n                    defaultAttachments={comment.attachments}\n                    autoFocus\n                    showAttribution={false}\n                    showAttachments={showAttachments}\n                    showFormattingControls={showComposerFormattingControls}\n                    actions={\n                      <>\n                        <Tooltip\n                          content={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                          aria-label={$.COMMENT_EDIT_COMPOSER_CANCEL}\n                        >\n                          <Button\n                            className=\"lb-composer-action\"\n                            onClick={handleEditCancel}\n                            icon={<CrossIcon />}\n                          />\n                        </Tooltip>\n                        <ShortcutTooltip\n                          content={$.COMMENT_EDIT_COMPOSER_SAVE}\n                          shortcut=\"Enter\"\n                        >\n                          <ComposerPrimitive.Submit asChild>\n                            <Button\n                              variant=\"primary\"\n                              className=\"lb-composer-action\"\n                              onClick={stopPropagation}\n                              aria-label={$.COMMENT_EDIT_COMPOSER_SAVE}\n                              icon={<CheckIcon />}\n                            />\n                          </ComposerPrimitive.Submit>\n                        </ShortcutTooltip>\n                      </>\n                    }\n                    overrides={{\n                      COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER,\n                    }}\n                    roomId={comment.roomId}\n                  />\n                ) : comment.body ? (\n                  <>\n                    <CommentPrimitive.Body\n                      className=\"lb-comment-body\"\n                      body={comment.body}\n                      components={{\n                        Mention: ({ mention }) => (\n                          <CommentMention\n                            mention={mention}\n                            onClick={(event) =>\n                              onMentionClick?.(mention, event)\n                            }\n                            overrides={overrides}\n                          />\n                        ),\n                        Link: CommentLink,\n                      }}\n                    />\n                    {showAttachments &&\n                    (mediaAttachments.length > 0 ||\n                      fileAttachments.length > 0) ? (\n                      <div className=\"lb-comment-attachments\">\n                        {mediaAttachments.length > 0 ? (\n                          <div className=\"lb-attachments\">\n                            {mediaAttachments.map((attachment) => (\n                              <CommentMediaAttachment\n                                key={attachment.id}\n                                attachment={attachment}\n                                overrides={overrides}\n                                onAttachmentClick={onAttachmentClick}\n                                roomId={comment.roomId}\n                              />\n                            ))}\n                          </div>\n                        ) : null}\n                        {fileAttachments.length > 0 ? (\n                          <div className=\"lb-attachments\">\n                            {fileAttachments.map((attachment) => (\n                              <CommentFileAttachment\n                                key={attachment.id}\n                                attachment={attachment}\n                                overrides={overrides}\n                                onAttachmentClick={onAttachmentClick}\n                                roomId={comment.roomId}\n                              />\n                            ))}\n                          </div>\n                        ) : null}\n                      </div>\n                    ) : null}\n                    {showReactions && comment.reactions.length > 0 && (\n                      <div className=\"lb-comment-reactions\">\n                        {comment.reactions.map((reaction) => (\n                          <CommentReaction\n                            key={reaction.emoji}\n                            comment={comment}\n                            reaction={reaction}\n                            overrides={overrides}\n                            disabled={!canComment}\n                          />\n                        ))}\n                        {canComment ? (\n                          <EmojiPicker onEmojiSelect={handleReactionSelect}>\n                            <Tooltip content={$.COMMENT_ADD_REACTION}>\n                              <EmojiPickerTrigger asChild>\n                                <Button\n                                  className=\"lb-comment-reaction lb-comment-reaction-add\"\n                                  variant=\"outline\"\n                                  onClick={stopPropagation}\n                                  aria-label={$.COMMENT_ADD_REACTION}\n                                  icon={<EmojiPlusIcon />}\n                                />\n                              </EmojiPickerTrigger>\n                            </Tooltip>\n                          </EmojiPicker>\n                        ) : null}\n                      </div>\n                    )}\n                  </>\n                ) : (\n                  <div className=\"lb-comment-body\">\n                    <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n                  </div>\n                )}\n              </div>\n            </div>\n          </ComponentsProvider>\n        </TooltipProvider>\n      );\n    }\n  ),\n  {\n    /**\n     * Displays a dropdown item in the comment's dropdown.\n     */\n    DropdownItem: CommentDropdownItem,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;AA4IA;AAA4B;AAC1B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AACb;AACvC;AAEJ;AAAuD;AAC7B;AAAA;AAAA;AAGhC;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AACyD;AAC7B;AACvB;AAEJ;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAwD;AAGxD;AAAyD;AAGzD;AAAoD;AAE1D;AAEO;AAAqB;AAC1B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAkB;AAAjB;AAC2C;AAC1C;AACI;AACG;AAEsB;AAAA;AAGnC;AAEO;AAAmC;AAClC;AACN;AACA;AAEF;AACE;AAKF;AAEA;AAIE;AACA;AACE;AAAC;AAAA;AAC+C;AACtC;AACM;AACH;AACM;AACjB;AACI;AACC;AAEL;AAAoE;AACD;AAAA;AAAA;AAGzE;AAEa;AAIX;AACA;AACA;AACA;AACE;AAA4D;AAE9D;AACA;AAAuB;AAGd;AACD;AAAC;AAAA;AAGE;AACkB;AACT;AACA;AAAA;AACZ;AACS;AACM;AAEnB;AAEU;AAGd;AACE;AAAsB;AAGxB;AAA4B;AAExB;AACE;AAAY;AACQ;AACC;AACH;AACjB;AAED;AAAe;AACK;AACC;AACH;AACjB;AACH;AACF;AAC0E;AAG5E;AACE;AAAC;AAAA;AACU;AACA;AACC;AAEV;AAAiB;AAAhB;AACQ;AACE;AACQ;AACR;AACT;AACK;AAEL;AAAC;AAAA;AAC4B;AAC3B;AACA;AACI;AAAA;AACN;AAAA;AACF;AAAA;AAGN;AAEa;AAIX;AACA;AACE;AAA4D;AAG9D;AACE;AAAC;AAAA;AACc;AACc;AAC3B;AACA;AACI;AACC;AAAA;AAGX;AAEA;AAGE;AAME;AAAyB;AAEzB;AAA6B;AAEjC;AAEA;AAAgC;AAC9B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEA;AAA+B;AAC7B;AACA;AACA;AACA;AACA;AAEF;AAGE;AAEA;AAAoB;AAEhB;AACE;AAAA;AAGF;AAEA;AAEA;AACE;AAAA;AAGF;AAAmB;AACrB;AACmC;AAGrC;AACE;AAAC;AAAA;AACiD;AAC5C;AACJ;AACA;AAC6B;AAC7B;AAAA;AAGN;AAEO;AAA6C;AAClD;AAEF;AACE;AACE;AAAC;AAAA;AACiD;AAC7B;AACf;AAAA;AAGV;AAMA;AAAqC;AACnC;AACA;AAEF;AAKE;AACA;AAEA;AAAA;AACE;AAEE;AACE;AAAyB;AAC3B;AACF;AACA;AAAA;AAEW;AACX;AAGF;AACF;AAEA;AAIE;AAAoB;AAEhB;AAEA;AACE;AAAsB;AACxB;AACF;AACQ;AAGV;AACE;AAAC;AAAA;AACC;AACA;AACS;AACL;AACC;AAEJ;AAAA;AAGP;AAYO;AAAuB;AAC5B;AAEI;AACE;AACgB;AAChB;AACc;AACE;AACE;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AAAmD;AAGrD;AACA;AAMA;AACE;AAAsB;AAGxB;AACE;AAAe;AAGjB;AAAyB;AAErB;AACA;AAAgB;AAClB;AACC;AAGH;AAAyB;AAMrB;AAEA;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAAY;AACS;AACD;AAClB;AACA;AACD;AACH;AACoC;AAGtC;AAEE;AAEA;AAAc;AACO;AACD;AACnB;AAGH;AAA0B;AAEtB;AAAqC;AACvC;AAC8B;AAGhC;AAA6B;AAEzB;AAAwC;AACL;AAGnC;AAG0C;AAChB;AAGxB;AAAe;AACK;AACC;AACnB;AACD;AAED;AAAY;AACQ;AACC;AACnB;AACD;AACH;AACF;AACA;AACE;AACQ;AACA;AACA;AACR;AACA;AACF;AAGF;AACE;AACA;AAAsB;AAEtB;AACA;AAEA;AACE;AAAc;AAChB;AAGF;AACE;AAAO;AAGT;AAGM;AAEA;AAGA;AAIN;AAKO;AAAA;AACA;AAIP;AAGO;AACC;AAAC;AAAA;AACa;AACF;AACM;AAAA;AAClB;AAEF;AAAC;AAAA;AACa;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACtB;AACH;AACC;AAEL;AACE;AACE;AAAA;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAEE;AAAA;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAEE;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAGK;AAAA;AAGD;AACF;AAEJ;AACF;AACF;AAGK;AAAW;AAEV;AAAC;AAAA;AACgB;AACD;AAIV;AAAC;AAAA;AACW;AACD;AACK;AACO;AAAA;AAG3B;AAAA;AAEA;AAEF;AAAC;AAAA;AACO;AACQ;AACR;AACG;AAIL;AAAC;AAAA;AACW;AACS;AACV;AACK;AACM;AAAA;AAG1B;AAAA;AAEA;AACN;AAEJ;AAGI;AAAC;AAAA;AACW;AACQ;AACI;AACM;AACnB;AACQ;AACjB;AACwB;AAGpB;AAAA;AAAC;AAAA;AACY;AACG;AAEd;AAAC;AAAA;AACW;AACD;AACQ;AAAA;AACnB;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACF;AAGP;AAAC;AAAA;AACS;AACE;AACD;AACK;AACG;AAAA;AAErB;AAAA;AACF;AACF;AAES;AACe;AAC1B;AACgB;AAAA;AAIhB;AAAA;AAAkB;AAAjB;AACW;AACI;AACF;AAER;AAAC;AAAA;AACC;AAEiC;AAEjC;AAAA;AACF;AAEI;AACR;AAAA;AACF;AAKK;AAGK;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAIE;AAAC;AAAA;AAEC;AACA;AACA;AACgB;AAAA;AAJA;AAQpB;AAEJ;AAGC;AACC;AAAC;AAAA;AAEC;AACA;AACA;AACW;AAAA;AAJG;AAMjB;AAKO;AAAC;AAAA;AACW;AACF;AACC;AACK;AACO;AAAA;AAK3B;AACN;AAQR;AAAA;AAAA;AACF;AAEJ;AAEJ;AACF;AACA;AAAA;AAAA;AAAA;AAIgB;AAElB;;;;;;;;"}

package/dist/components/Comment.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { MENTION_CHARACTER, assertNever, Permission } from '@liveblocks/core';
 import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment, useRoomPermissions } from '@liveblocks/react/_private';
-import { Toggle } from 'radix-ui';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { useComponents, ComponentsProvider } from '../components.js';
 import { CheckIcon } from '../icons/Check.js';
@@ -26,13 +26,16 @@ import { Composer } from './Composer.js';
 import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.js';
 import { Avatar } from './internal/Avatar.js';
 import { CustomButton, Button } from './internal/Button.js';
-import { DropdownItem, Dropdown, DropdownTrigger } from './internal/Dropdown.js';
+import { DropdownItem, Dropdown } from './internal/Dropdown.js';
 import { Emoji } from './internal/Emoji.js';
-import { EmojiPicker, EmojiPickerTrigger } from './internal/EmojiPicker.js';
+import { EmojiPicker } from './internal/EmojiPicker.js';
 import { Group } from './internal/Group.js';
 import { List } from './internal/List.js';
-import { Tooltip, TooltipProvider, ShortcutTooltip } from './internal/Tooltip.js';
+import { Tooltip, ShortcutTooltip } from './internal/Tooltip.js';
 import { User } from './internal/User.js';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { PopoverTrigger } from '@radix-ui/react-popover';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 
 
 const REACTIONS_TRUNCATE = 5;
@@ -182,7 +185,7 @@ const CommentReaction = forwardRef(({ comment, reaction, overrides, disabled, ..
       multiline: true,
       className: "lb-comment-reaction-tooltip",
       children: /* @__PURE__ */ jsx(
-        Toggle.Root,
+        TogglePrimitive.Root,
         {
           asChild: true,
           pressed: isActive,
@@ -378,7 +381,6 @@ const Comment = Object.assign(
       autoMarkReadThreadId,
       ...props
     }, forwardedRef) => {
-      const bodyId = `${comment.id}:body`;
       const ref = useRef(null);
       const mergedRefs = useRefs(forwardedRef, ref);
       const currentUserId = useCurrentUserId();
@@ -503,7 +505,6 @@ const Comment = Object.assign(
         /* @__PURE__ */ jsxs(
           "div",
           {
-            role: "article",
             id: comment.id,
             className: cn(
               "lb-root lb-comment",
@@ -515,7 +516,6 @@ const Comment = Object.assign(
             "data-deleted": !comment.body ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-target": isTarget ? "" : void 0,
-            "aria-labelledby": bodyId,
             dir: $.dir,
             ...props,
             ref: mergedRefs,
@@ -562,7 +562,7 @@ const Comment = Object.assign(
                     {
                       onEmojiSelect: handleReactionSelect,
                       onOpenChange: setReactionActionOpen,
-                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                         Button,
                         {
                           className: "lb-comment-action",
@@ -580,7 +580,7 @@ const Comment = Object.assign(
                       onOpenChange: setMoreActionOpen,
                       align: "end",
                       content: dropdownContent,
-                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_MORE, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                         Button,
                         {
                           className: "lb-comment-action",
@@ -649,7 +649,6 @@ const Comment = Object.assign(
                   CommentBody,
                   {
                     className: "lb-comment-body",
-                    id: bodyId,
                     body: comment.body,
                     components: {
                       Mention: ({ mention }) => /* @__PURE__ */ jsx(
@@ -697,7 +696,7 @@ const Comment = Object.assign(
                     },
                     reaction.emoji
                   )),
-                  canComment ? /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  canComment ? /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: handleReactionSelect, children: /* @__PURE__ */ jsx(Tooltip, { content: $.COMMENT_ADD_REACTION, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     Button,
                     {
                       className: "lb-comment-reaction lb-comment-reaction-add",