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

package/dist/components/Comment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.js","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;;"}
+{"version":3,"file":"Comment.js","sources":["../../src/components/Comment.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  assertNever,\n  type BaseMetadata,\n  type CommentAttachment,\n  type CommentData,\n  type CommentReaction as CommentReactionData,\n  type DCM,\n  type GroupMentionData,\n  MENTION_CHARACTER,\n  type MentionData,\n  Permission,\n} from \"@liveblocks/core\";\nimport {\n  useAddRoomCommentReaction,\n  useDeleteRoomComment,\n  useEditRoomComment,\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  RefAttributes,\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 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<CM extends BaseMetadata = DCM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The comment to display.\n   */\n  comment: CommentData<CM>;\n\n  /**\n   * The comment's avatar.\n   * Can be combined with `Comment.Avatar` to easily follow default styles.\n   */\n  avatar?: ReactNode;\n\n  /**\n   * The comment's author.\n   * Can be combined with `Comment.Author` to easily follow default styles.\n   */\n  author?: ReactNode;\n\n  /**\n   * The comment's date.\n   * Can be combined with `Comment.Date` to easily follow default styles,\n   * or the `Timestamp` primitive for more control.\n   */\n  date?: ReactNode;\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   * Additional content to display below the comment's body.\n   */\n  additionalContent?: ReactNode;\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<CM> }>) => ReactNode);\n\n  /**\n   * Override the comment's content.\n   */\n  children?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => 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  actions?: ReactNode;\n\n  /**\n   * @internal\n   */\n  actionsClassName?: string;\n\n  /**\n   * @internal\n   */\n  internalDropdownItems?: ReactNode;\n}\n\nexport interface CommentAvatarProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport interface CommentAuthorProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /**\n   * The user ID to display the author for.\n   */\n  userId: string;\n}\n\nexport interface CommentDateProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nfunction CommentAvatar(props: CommentAvatarProps) {\n  return <Avatar {...props} />;\n}\n\nfunction CommentAuthor(props: CommentAuthorProps) {\n  return <User {...props} />;\n}\n\nfunction CommentDate({ locale, date, className, ...props }: CommentDateProps) {\n  return (\n    <Timestamp\n      locale={locale}\n      date={date}\n      className={cn(\"lb-date\", className)}\n      {...(props as Omit<ComponentProps<\"time\">, \"children\" | \"title\">)}\n    />\n  );\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\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        additionalContent,\n        avatar,\n        author,\n        date,\n        className,\n        actions,\n        actionsClassName,\n        internalDropdownItems,\n        children,\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 commentDropdownItems =\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      const defaultDropdownItems =\n        internalDropdownItems || commentDropdownItems ? (\n          <>\n            {internalDropdownItems}\n            {commentDropdownItems}\n          </>\n        ) : null;\n\n      const dropdownContent =\n        typeof dropdownItems === \"function\" ? (\n          dropdownItems({ children: defaultDropdownItems, comment })\n        ) : defaultDropdownItems || dropdownItems ? (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        ) : null;\n\n      let content: ReactNode;\n\n      if (isEditing) {\n        content = (\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        );\n      } else {\n        content = 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) => onMentionClick?.(mention, event)}\n                    overrides={overrides}\n                  />\n                ),\n                Link: CommentLink,\n              }}\n            />\n            {additionalContent}\n            {showAttachments &&\n            (mediaAttachments.length > 0 || 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\n        content =\n          typeof children === \"function\"\n            ? children({ comment, children: content })\n            : (children ?? content);\n      }\n\n      return (\n        <TooltipProvider>\n          <ComponentsProvider components={components}>\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                    <div\n                      className=\"lb-comment-avatar\"\n                      onClick={handleAuthorClick}\n                    >\n                      {avatar}\n                    </div>\n                  ) : (\n                    <Avatar\n                      className=\"lb-comment-avatar\"\n                      userId={comment.userId}\n                      onClick={handleAuthorClick}\n                    />\n                  )}\n                  <span className=\"lb-comment-details-labels\">\n                    {author ? (\n                      <span\n                        className=\"lb-comment-author\"\n                        onClick={handleAuthorClick}\n                      >\n                        {author}\n                      </span>\n                    ) : (\n                      <User\n                        className=\"lb-comment-author\"\n                        userId={comment.userId}\n                        onClick={handleAuthorClick}\n                      />\n                    )}\n                    {date ? (\n                      <span className=\"lb-comment-date\">{date}</span>\n                    ) : (\n                      <span className=\"lb-comment-date\">\n                        <CommentDate\n                          locale={$.locale}\n                          date={comment.createdAt}\n                          className=\"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                    )}\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\">{content}</div>\n            </div>\n          </ComponentsProvider>\n        </TooltipProvider>\n      );\n    }\n  ) as <CM extends BaseMetadata = DCM>(\n    props: CommentProps<CM> & RefAttributes<HTMLDivElement>\n  ) => JSX.Element,\n  {\n    /**\n     * Displays a dropdown item in the comment's dropdown.\n     */\n    DropdownItem: CommentDropdownItem,\n\n    /**\n     * Displays a comment's avatar.\n     */\n    Avatar: CommentAvatar,\n\n    /**\n     * Displays a comment's author.\n     */\n    Author: CommentAuthor,\n\n    /**\n     * Displays a comment's date.\n     */\n    Date: CommentDate,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA;AAmKA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACA;AACkC;AAC7B;AAAA;AAGX;AAwCA;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;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;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;AAGN;AAGO;AAAA;AACA;AAIP;AAKO;AAAA;AACA;AAIP;AAEA;AACE;AACE;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;AAClB;AAGF;AAEI;AAAA;AAAkB;AAAjB;AACW;AACN;AACU;AACF;AAER;AAAC;AAAA;AACC;AACmD;AACnD;AAAA;AACF;AAEI;AACR;AAAA;AACF;AACC;AAII;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;AASN;AAGmB;AAGrB;AAGM;AAAC;AAAA;AACM;AACO;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACZ;AACV;AACH;AACC;AAEL;AACE;AACG;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAGC;AACC;AAAC;AAAA;AACW;AACD;AAER;AAAA;AAGH;AAAC;AAAA;AACW;AACM;AACP;AAAA;AACX;AAME;AAAA;AAAC;AAAA;AACW;AACI;AACJ;AAAA;AACZ;AAGK;AAAA;AAGD;AACF;AAEJ;AAEJ;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;AAC6C;AAAA;AAAA;AAGnD;AAEJ;AACF;AAGA;AAAA;AAAA;AAAA;AAIgB;AAAA;AAAA;AAAA;AAKN;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKF;AAEV;;"}

package/dist/components/CommentPin.cjs

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var cn = require('../utils/cn.cjs');
+var Avatar = require('./internal/Avatar.cjs');
+
+
+const CommentPin = react.forwardRef(
+  ({
+    corner = "bottom-left",
+    userId,
+    size,
+    type = "button",
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: cn.cn("lb-root lb-comment-pin", className),
+        "data-corner": corner,
+        style: { "--lb-comment-pin-size": size, ...style },
+        type,
+        ...props,
+        ref: forwardedRef,
+        children: userId ? /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { className: "lb-comment-pin-avatar", userId }) : null
+      }
+    );
+  }
+);
+
+exports.CommentPin = CommentPin;
+//# sourceMappingURL=CommentPin.cjs.map

package/dist/components/CommentPin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentPin.cjs","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": size, ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {userId ? (\n          <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n        ) : null}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AA8BO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACoC;AACjD;AACI;AACC;AAID;AAAA;AACN;AAGN;;"}

package/dist/components/CommentPin.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../utils/cn.js';
+import { Avatar } from './internal/Avatar.js';
+
+
+const CommentPin = forwardRef(
+  ({
+    corner = "bottom-left",
+    userId,
+    size,
+    type = "button",
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn("lb-root lb-comment-pin", className),
+        "data-corner": corner,
+        style: { "--lb-comment-pin-size": size, ...style },
+        type,
+        ...props,
+        ref: forwardedRef,
+        children: userId ? /* @__PURE__ */ jsx(Avatar, { className: "lb-comment-pin-avatar", userId }) : null
+      }
+    );
+  }
+);
+
+export { CommentPin };
+//# sourceMappingURL=CommentPin.js.map

package/dist/components/CommentPin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentPin.js","sources":["../../src/components/CommentPin.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../utils/cn\";\nimport { Avatar } from \"./internal/Avatar\";\n\nexport interface CommentPinProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The corner that points to the comment position.\n   * Defaults to the bottom left corner.\n   */\n  corner?: \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\n  /**\n   * The user ID to optionally display an avatar for.\n   */\n  userId?: string;\n\n  /**\n   * The size of the pin.\n   */\n  size?: string | number;\n}\n\n/**\n * Displays a comment pin that can be used as a trigger\n * for `FloatingComposer` and `FloatingThread`.\n */\nexport const CommentPin = forwardRef<HTMLButtonElement, CommentPinProps>(\n  (\n    {\n      corner = \"bottom-left\",\n      userId,\n      size,\n      type = \"button\",\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        className={cn(\"lb-root lb-comment-pin\", className)}\n        data-corner={corner}\n        style={{ \"--lb-comment-pin-size\": size, ...style } as CSSProperties}\n        type={type}\n        {...props}\n        ref={forwardedRef}\n      >\n        {userId ? (\n          <Avatar className=\"lb-comment-pin-avatar\" userId={userId} />\n        ) : null}\n      </button>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AA8BO;AAAmB;AAEtB;AACW;AACT;AACA;AACO;AACP;AACA;AACG;AAIL;AACE;AAAC;AAAA;AACkD;AACpC;AACoC;AACjD;AACI;AACC;AAID;AAAA;AACN;AAGN;;"}

package/dist/components/Composer.cjs

@@ -33,9 +33,7 @@ var Group = require('./internal/Group.cjs');
 var GroupDescription = require('./internal/GroupDescription.cjs');
 var Tooltip = require('./internal/Tooltip.cjs');
 var User = require('./internal/User.cjs');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var Users = require('../icons/Users.cjs');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 
 
 function ComposerInsertMentionEditorAction({
@@ -85,7 +83,7 @@ function ComposerInsertEmojiEditorAction({
   const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     Button.Button,
     {
       className: cn.cn("lb-composer-editor-action", className),
@@ -537,7 +535,7 @@ const Composer = react.forwardRef(
         threadId
       ]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
       index.Form,
       {
         onComposerSubmit: handleComposerSubmit,

package/dist/components/Composer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.cjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DCM,\n  DTM,\n  GroupMentionData,\n  Patchable,\n} from \"@liveblocks/core\";\nimport { assertNever, MENTION_CHARACTER, Permission } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useLayoutEffect,\n  useResolveMentionSuggestions,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { UsersIcon } from \"../icons\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { Group } from \"./internal/Group\";\nimport { GroupDescription } from \"./internal/GroupDescription\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  icon?: ReactNode;\n  shortcut?: string;\n}\n\ntype ComposerCreateThreadProps<\n  TM extends BaseMetadata,\n  CM extends BaseMetadata,\n> = {\n  threadId?: never;\n\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: TM;\n\n  /**\n   * The metadata of the comment to create.\n   */\n  commentMetadata?: CM;\n};\n\ntype ComposerCreateCommentProps<CM extends BaseMetadata> = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n\n  commentId?: never;\n\n  metadata?: never;\n\n  /**\n   * The metadata of the comment to create.\n   */\n  commentMetadata?: CM;\n};\n\ntype ComposerEditCommentProps<CM extends BaseMetadata> = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n\n  metadata?: never;\n\n  /**\n   * The metadata of the comment to edit.\n   */\n  commentMetadata?: Patchable<CM>;\n};\n\nexport type ComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> = Omit<ComponentPropsWithoutRef<\"form\">, \"defaultValue\"> &\n  (\n    | ComposerCreateThreadProps<TM, CM>\n    | ComposerCreateCommentProps<CM>\n    | ComposerEditCommentProps<CM>\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Whether to blur the composer editor when the composer is submitted.\n     */\n    blurOnSubmit?: boolean;\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\ninterface ComposerMentionProps extends ComposerEditorMentionProps {\n  overrides?: ComposerProps[\"overrides\"];\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={cn(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        icon={<MentionIcon />}\n        {...props}\n      />\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={cn(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            icon={<EmojiIcon />}\n            {...props}\n          />\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={cn(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          icon={<AttachmentIcon />}\n          {...props}\n        />\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerUserMention({ mention }: ComposerMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-mention lb-composer-mention\">\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerGroupMention({ mention }: ComposerMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <ComposerPrimitive.Mention\n      className=\"lb-mention lb-composer-mention\"\n      data-self={isMember ? \"\" : undefined}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nexport function ComposerMention({ mention, ...props }: ComposerMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <ComposerUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <ComposerGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nfunction ComposerMentionSuggestions({\n  mentions,\n}: ComposerEditorMentionSuggestionsProps) {\n  return mentions.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {mentions.map((mention) => {\n          return (\n            <ComposerPrimitive.SuggestionsListItem\n              key={mention.id}\n              className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n              value={mention.id}\n            >\n              {mention.kind === \"user\" ? (\n                <>\n                  <Avatar\n                    userId={mention.id}\n                    className=\"lb-composer-mention-suggestion-avatar\"\n                  />\n                  <User\n                    userId={mention.id}\n                    className=\"lb-composer-mention-suggestion-user\"\n                  />\n                </>\n              ) : mention.kind === \"group\" ? (\n                <>\n                  <Avatar\n                    groupId={mention.id}\n                    className=\"lb-composer-mention-suggestion-avatar\"\n                    icon={<UsersIcon />}\n                  />\n                  <Group\n                    groupId={mention.id}\n                    className=\"lb-composer-mention-suggestion-group\"\n                  >\n                    <GroupDescription\n                      groupId={mention.id}\n                      className=\"lb-composer-mention-suggestion-group-description\"\n                    />\n                  </Group>\n                </>\n              ) : (\n                assertNever(mention, \"Unhandled mention kind\")\n              )}\n            </ComposerPrimitive.SuggestionsListItem>\n          );\n        })}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({\n  mark,\n  icon,\n  shortcut,\n  children,\n  ...props\n}: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toolbar\" icon={icon}>\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => <MarkToggle mark=\"bold\" shortcut=\"Mod-B\" icon={<BoldIcon />} />,\n  italic: () => (\n    <MarkToggle mark=\"italic\" shortcut=\"Mod-I\" icon={<ItalicIcon />} />\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut=\"Mod-Shift-S\"\n      icon={<StrikethroughIcon />}\n    />\n  ),\n  code: () => <MarkToggle mark=\"code\" shortcut=\"Mod-E\" icon={<CodeIcon />} />,\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={cn(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-composer-attachments\", className)} {...props}>\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || !showAttachments || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip content={$.COMPOSER_SEND} shortcut=\"Enter\">\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                      icon={<SendIcon />}\n                    />\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      commentMetadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      blurOnSubmit = true,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoom({ allowOutsideRoom: true });\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUiConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      defaultCollapsed ?? false,\n      controlledCollapsed,\n      controlledOnCollapsedChange\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleComposerSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        event.stopPropagation();\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            metadata: commentMetadata,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            metadata: commentMetadata as CM | undefined,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata,\n            commentMetadata: commentMetadata as CM | undefined,\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        commentMetadata,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleComposerSubmit}\n          className={cn(\"lb-root lb-composer lb-composer-form\", className)}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          blurOnSubmit={blurOnSubmit}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0QA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AAEI;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACO;AACf;AAAA;AAIZ;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAIQ;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACK;AACb;AAAA;AAMhB;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAGM;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACU;AAClB;AAAA;AAKd;AAEA;AACE;AAEI;AAAuD;AAC7B;AAGhC;AAEA;AACE;AAEA;AACE;AAAmB;AAAlB;AACW;AACiB;AAE3B;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAyD;AAGzD;AAA0D;AAG1D;AAAoD;AAE1D;AAEA;AAAoC;AAEpC;AACE;AAIQ;AACE;AAAmB;AAAlB;AAEW;AACK;AAIX;AAAA;AAAC;AAAA;AACiB;AACN;AAAA;AACZ;AACA;AAAC;AAAA;AACiB;AACN;AAAA;AACZ;AAIA;AAAA;AAAC;AAAA;AACkB;AACP;AACO;AAAA;AACnB;AACA;AAAC;AAAA;AACkB;AACP;AAEV;AAAC;AAAA;AACkB;AACP;AAAA;AACZ;AAAA;AACF;AAG2C;AAAA;AAjClC;AAmCf;AAMZ;AAEA;AAAoB;AAClB;AACA;AACA;AACA;AAEF;AACE;AACA;AACE;AAAkC;AAGpC;AACE;AAAC;AAAA;AACU;AACT;AAC2C;AAM3C;AAAA;AAGN;AAMA;AAAiC;AAC0C;AAEN;AAGjE;AAAC;AAAA;AACM;AACI;AACgB;AAAA;AAC3B;AAGJ;AAEA;AAIA;AACE;AAKF;AAEA;AACE;AAKF;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACE;AAAC;AAAA;AACkD;AAC7C;AACJ;AACe;AACK;AACpB;AACA;AAAA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AAIQ;AACE;AAAC;AAAA;AAEC;AACA;AAAA;AAFgB;AAGlB;AAMZ;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC3B;AAG5C;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAEI;AAAA;AAAmB;AAAlB;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AAAA;AACT;AAC+D;AAG3D;AACG;AACC;AAAC;AAAA;AACU;AACT;AAAA;AACF;AAEF;AAAC;AAAA;AACU;AACW;AACpB;AAAA;AACF;AAEE;AAAC;AAAA;AACU;AACT;AAAA;AACF;AAEJ;AACiC;AAMvB;AAAC;AAAA;AACgB;AACN;AACC;AACF;AACM;AACE;AAAA;AAM5B;AACF;AAKI;AAAgB;AACb;AAEP;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACG;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AACnB;AACpB;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;AAA6B;AAEzB;AAEA;AACE;AAAA;AAGF;AAEA;AACE;AAAY;AACV;AACA;AACc;AACJ;AACW;AACtB;AAED;AAAc;AACZ;AACc;AACJ;AACW;AACtB;AAED;AAAa;AACG;AACd;AACA;AACqB;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEI;AAAmB;AAAlB;AACmB;AAC6C;AACxD;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AACA;AAEA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAAA;AACF;AAAA;AAEJ;AAGN;;;;"}
+{"version":3,"file":"Composer.cjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DCM,\n  DTM,\n  GroupMentionData,\n  Patchable,\n} from \"@liveblocks/core\";\nimport { assertNever, MENTION_CHARACTER, Permission } from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useLayoutEffect,\n  useResolveMentionSuggestions,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { UsersIcon } from \"../icons\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useIsGroupMentionMember } from \"../utils/use-group-mention\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport { Group } from \"./internal/Group\";\nimport { GroupDescription } from \"./internal/GroupDescription\";\nimport { ShortcutTooltip, Tooltip, TooltipProvider } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  icon?: ReactNode;\n  shortcut?: string;\n}\n\nexport type ComposerCreateThreadProps<\n  TM extends BaseMetadata,\n  CM extends BaseMetadata,\n> = {\n  threadId?: never;\n\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: TM;\n\n  /**\n   * The metadata of the comment to create.\n   */\n  commentMetadata?: CM;\n};\n\nexport type ComposerCreateCommentProps<CM extends BaseMetadata> = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n\n  commentId?: never;\n\n  metadata?: never;\n\n  /**\n   * The metadata of the comment to create.\n   */\n  commentMetadata?: CM;\n};\n\nexport type ComposerEditCommentProps<CM extends BaseMetadata> = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n\n  metadata?: never;\n\n  /**\n   * The metadata of the comment to edit.\n   */\n  commentMetadata?: Patchable<CM>;\n};\n\nexport type ComposerProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> = Omit<ComponentPropsWithoutRef<\"form\">, \"defaultValue\"> &\n  (\n    | ComposerCreateThreadProps<TM, CM>\n    | ComposerCreateCommentProps<CM>\n    | ComposerEditCommentProps<CM>\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Whether to blur the composer editor when the composer is submitted.\n     */\n    blurOnSubmit?: boolean;\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\ninterface ComposerMentionProps extends ComposerEditorMentionProps {\n  overrides?: ComposerProps[\"overrides\"];\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={cn(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        icon={<MentionIcon />}\n        {...props}\n      />\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={cn(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            icon={<EmojiIcon />}\n            {...props}\n          />\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={cn(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          icon={<AttachmentIcon />}\n          {...props}\n        />\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerUserMention({ mention }: ComposerMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-mention lb-composer-mention\">\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <User userId={mention.id} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerGroupMention({ mention }: ComposerMentionProps) {\n  const isMember = useIsGroupMentionMember(mention as GroupMentionData);\n\n  return (\n    <ComposerPrimitive.Mention\n      className=\"lb-mention lb-composer-mention\"\n      data-self={isMember ? \"\" : undefined}\n    >\n      <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n      <Group groupId={mention.id} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nexport function ComposerMention({ mention, ...props }: ComposerMentionProps) {\n  switch (mention.kind) {\n    case \"user\":\n      return <ComposerUserMention mention={mention} {...props} />;\n\n    case \"group\":\n      return <ComposerGroupMention mention={mention} {...props} />;\n\n    default:\n      return assertNever(mention, \"Unhandled mention kind\");\n  }\n}\n\nfunction ComposerMentionSuggestions({\n  mentions,\n}: ComposerEditorMentionSuggestionsProps) {\n  return mentions.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {mentions.map((mention) => {\n          return (\n            <ComposerPrimitive.SuggestionsListItem\n              key={mention.id}\n              className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n              value={mention.id}\n            >\n              {mention.kind === \"user\" ? (\n                <>\n                  <Avatar\n                    userId={mention.id}\n                    className=\"lb-composer-mention-suggestion-avatar\"\n                  />\n                  <User\n                    userId={mention.id}\n                    className=\"lb-composer-mention-suggestion-user\"\n                  />\n                </>\n              ) : mention.kind === \"group\" ? (\n                <>\n                  <Avatar\n                    groupId={mention.id}\n                    className=\"lb-composer-mention-suggestion-avatar\"\n                    icon={<UsersIcon />}\n                  />\n                  <Group\n                    groupId={mention.id}\n                    className=\"lb-composer-mention-suggestion-group\"\n                  >\n                    <GroupDescription\n                      groupId={mention.id}\n                      className=\"lb-composer-mention-suggestion-group-description\"\n                    />\n                  </Group>\n                </>\n              ) : (\n                assertNever(mention, \"Unhandled mention kind\")\n              )}\n            </ComposerPrimitive.SuggestionsListItem>\n          );\n        })}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({\n  mark,\n  icon,\n  shortcut,\n  children,\n  ...props\n}: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toolbar\" icon={icon}>\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => <MarkToggle mark=\"bold\" shortcut=\"Mod-B\" icon={<BoldIcon />} />,\n  italic: () => (\n    <MarkToggle mark=\"italic\" shortcut=\"Mod-I\" icon={<ItalicIcon />} />\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut=\"Mod-Shift-S\"\n      icon={<StrikethroughIcon />}\n    />\n  ),\n  code: () => <MarkToggle mark=\"code\" shortcut=\"Mod-E\" icon={<CodeIcon />} />,\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={cn(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-composer-attachments\", className)} {...props}>\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || !showAttachments || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip content={$.COMPOSER_SEND} shortcut=\"Enter\">\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                      icon={<SendIcon />}\n                    />\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      commentMetadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      blurOnSubmit = true,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoom({ allowOutsideRoom: true });\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUiConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      defaultCollapsed ?? false,\n      controlledCollapsed,\n      controlledOnCollapsedChange\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleComposerSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        event.stopPropagation();\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            metadata: commentMetadata,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            metadata: commentMetadata as CM | undefined,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata,\n            commentMetadata: commentMetadata as CM | undefined,\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        commentMetadata,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleComposerSubmit}\n          className={cn(\"lb-root lb-composer lb-composer-form\", className)}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          blurOnSubmit={blurOnSubmit}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ComposerProps<TM, CM> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0QA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AAEI;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACO;AACf;AAAA;AAIZ;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAIQ;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACK;AACb;AAAA;AAMhB;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAGM;AAAC;AAAA;AACqD;AACrC;AACN;AACG;AACU;AAClB;AAAA;AAKd;AAEA;AACE;AAEI;AAAuD;AAC7B;AAGhC;AAEA;AACE;AAEA;AACE;AAAmB;AAAlB;AACW;AACiB;AAE3B;AAAuD;AAC3B;AAAA;AAAA;AAGlC;AAEO;AACL;AAAsB;AAElB;AAAyD;AAGzD;AAA0D;AAG1D;AAAoD;AAE1D;AAEA;AAAoC;AAEpC;AACE;AAIQ;AACE;AAAmB;AAAlB;AAEW;AACK;AAIX;AAAA;AAAC;AAAA;AACiB;AACN;AAAA;AACZ;AACA;AAAC;AAAA;AACiB;AACN;AAAA;AACZ;AAIA;AAAA;AAAC;AAAA;AACkB;AACP;AACO;AAAA;AACnB;AACA;AAAC;AAAA;AACkB;AACP;AAEV;AAAC;AAAA;AACkB;AACP;AAAA;AACZ;AAAA;AACF;AAG2C;AAAA;AAjClC;AAmCf;AAMZ;AAEA;AAAoB;AAClB;AACA;AACA;AACA;AAEF;AACE;AACA;AACE;AAAkC;AAGpC;AACE;AAAC;AAAA;AACU;AACT;AAC2C;AAM3C;AAAA;AAGN;AAMA;AAAiC;AAC0C;AAEN;AAGjE;AAAC;AAAA;AACM;AACI;AACgB;AAAA;AAC3B;AAGJ;AAEA;AAIA;AACE;AAKF;AAEA;AACE;AAKF;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACE;AAAC;AAAA;AACkD;AAC7C;AACJ;AACe;AACK;AACpB;AACA;AAAA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AAIQ;AACE;AAAC;AAAA;AAEC;AACA;AAAA;AAFgB;AAGlB;AAMZ;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC3B;AAG5C;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAEI;AAAA;AAAmB;AAAlB;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AAAA;AACT;AAC+D;AAG3D;AACG;AACC;AAAC;AAAA;AACU;AACT;AAAA;AACF;AAEF;AAAC;AAAA;AACU;AACW;AACpB;AAAA;AACF;AAEE;AAAC;AAAA;AACU;AACT;AAAA;AACF;AAEJ;AACiC;AAMvB;AAAC;AAAA;AACgB;AACN;AACC;AACF;AACM;AACE;AAAA;AAM5B;AACF;AAKI;AAAgB;AACb;AAEP;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACG;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AACnB;AACpB;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;AAA6B;AAEzB;AAEA;AACE;AAAA;AAGF;AAEA;AACE;AAAY;AACV;AACA;AACc;AACJ;AACW;AACtB;AAED;AAAc;AACZ;AACc;AACJ;AACW;AACtB;AAED;AAAa;AACG;AACd;AACA;AACqB;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEI;AAAmB;AAAlB;AACmB;AAC6C;AACxD;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AACA;AAEA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AAAA;AACF;AAAA;AAEJ;AAGN;;;;"}

package/dist/components/Composer.js

@@ -26,14 +26,12 @@ import { FileAttachment } from './internal/Attachment.js';
 import { Attribution } from './internal/Attribution.js';
 import { Avatar } from './internal/Avatar.js';
 import { Button } from './internal/Button.js';
-import { EmojiPicker } from './internal/EmojiPicker.js';
+import { EmojiPicker, EmojiPickerTrigger } from './internal/EmojiPicker.js';
 import { Group } from './internal/Group.js';
 import { GroupDescription } from './internal/GroupDescription.js';
-import { Tooltip, ShortcutTooltip } from './internal/Tooltip.js';
+import { Tooltip, ShortcutTooltip, TooltipProvider } from './internal/Tooltip.js';
 import { User } from './internal/User.js';
-import { PopoverTrigger } from '@radix-ui/react-popover';
 import { UsersIcon } from '../icons/Users.js';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
 
 
 function ComposerInsertMentionEditorAction({
@@ -83,7 +81,7 @@ function ComposerInsertEmojiEditorAction({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EmojiPicker, { onEmojiSelect: insertText, onOpenChange: onPickerOpenChange, children: /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel ?? label, children: /* @__PURE__ */ jsx(EmojiPickerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
     Button,
     {
       className: cn("lb-composer-editor-action", className),