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

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 * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  FormEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\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 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        ) : (\n          <>\n            {defaultDropdownItems}\n            {dropdownItems}\n          </>\n        );\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              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              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                    <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                      <>\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                      </>\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  ),\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA;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;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;AACI;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;AACa;AACD;AACT;AACiB;AACU;AAEzB;AACF;AACF;AACmC;AACJ;AAEF;AACtB;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;AACA;AAAA;AAAA;AAAA;AAIgB;AAAA;AAAA;AAAA;AAKN;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKF;AAEV;;"}

package/dist/components/Thread.cjs

@@ -13,6 +13,8 @@ var CheckCircle = require('../icons/CheckCircle.cjs');
 var CheckCircleFill = require('../icons/CheckCircleFill.cjs');
 var overrides = require('../overrides.cjs');
 var cn = require('../utils/cn.cjs');
+var useVisible = require('../utils/use-visible.cjs');
+var useWindowFocus = require('../utils/use-window-focus.cjs');
 var Comment = require('./Comment.cjs');
 var Composer = require('./Composer.cjs');
 var Button = require('./internal/Button.cjs');
@@ -39,6 +41,33 @@ function _interopNamespaceDefault(e) {
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
 
 
+function MarkThreadAsReadMarker({ thread }) {
+  const { id: threadId, roomId } = thread;
+  const ref = react.useRef(null);
+  const markThreadAsRead = _private.useMarkRoomThreadAsRead(roomId);
+  const isWindowFocused = useWindowFocus.useWindowFocus();
+  useVisible.useIntersectionCallback(
+    ref,
+    (isIntersecting) => {
+      if (isIntersecting) {
+        markThreadAsRead(threadId);
+      }
+    },
+    {
+      // The underlying IntersectionObserver is only enabled when the window is focused
+      enabled: isWindowFocused
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      style: { height: 0 },
+      "aria-hidden": true,
+      "data-mark-as-read-marker": ""
+    }
+  );
+}
 const Thread = react.forwardRef(
   ({
     thread,
@@ -52,6 +81,7 @@ const Thread = react.forwardRef(
     showComposerFormattingControls = true,
     maxVisibleComments,
     commentDropdownItems,
+    additionalContent,
     onResolvedChange,
     onCommentEdit,
     onCommentDelete,
@@ -66,6 +96,7 @@ const Thread = react.forwardRef(
     className,
     ...props
   }, forwardedRef) => {
+    const Comment$1 = components?.Comment ?? Comment.Comment;
     const markThreadAsResolved = _private.useMarkRoomThreadAsResolved(thread.roomId);
     const markThreadAsUnresolved = _private.useMarkRoomThreadAsUnresolved(thread.roomId);
     const $ = overrides.useOverrides(overrides$1);
@@ -207,6 +238,7 @@ const Thread = react.forwardRef(
             const isFirstComment = index === firstCommentIndex;
             const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
             const isHidden = hiddenComments && index >= hiddenComments.firstIndex && index <= hiddenComments.lastIndex;
+            const isHiddenBecauseDeleted = !showDeletedComments && !comment.body;
             const isFirstHiddenComment = isHidden && index === hiddenComments.firstIndex;
             if (isFirstHiddenComment) {
               return /* @__PURE__ */ jsxRuntime.jsx(
@@ -226,11 +258,11 @@ const Thread = react.forwardRef(
                 `${comment.id}-show-more`
               );
             }
-            if (isHidden) {
+            if (isHidden || isHiddenBecauseDeleted) {
               return null;
             }
             const children = /* @__PURE__ */ jsxRuntime.jsx(
-              Comment.Comment,
+              Comment$1,
               {
                 overrides: overrides$1,
                 className: "lb-thread-comment",
@@ -248,7 +280,6 @@ const Thread = react.forwardRef(
                 onMentionClick,
                 onAttachmentClick,
                 components,
-                autoMarkReadThreadId: index === lastCommentIndex && isUnread ? thread.id : void 0,
                 actionsClassName: isFirstComment ? "lb-thread-actions" : void 0,
                 actions: isFirstComment && showResolveAction ? /* @__PURE__ */ jsxRuntime.jsx(
                   Tooltip.Tooltip,
@@ -274,30 +305,15 @@ const Thread = react.forwardRef(
                     )
                   }
                 ) : null,
-                dropdownItems: ({ children: children2 }) => {
-                  const threadDropdownItems = isFirstComment ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    Comment.Comment.DropdownItem,
-                    {
-                      onSelect: handleSubscribeChange,
-                      icon: subscriptionStatus === "subscribed" ? /* @__PURE__ */ jsxRuntime.jsx(BellCrossed.BellCrossedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Bell.BellIcon, {}),
-                      children: subscriptionStatus === "subscribed" ? $.THREAD_UNSUBSCRIBE : $.THREAD_SUBSCRIBE
-                    }
-                  ) }) : null;
-                  if (typeof commentDropdownItems === "function") {
-                    return commentDropdownItems({
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        threadDropdownItems,
-                        children2
-                      ] }),
-                      comment
-                    });
+                internalDropdownItems: isFirstComment ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Comment.Comment.DropdownItem,
+                  {
+                    onSelect: handleSubscribeChange,
+                    icon: subscriptionStatus === "subscribed" ? /* @__PURE__ */ jsxRuntime.jsx(BellCrossed.BellCrossedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Bell.BellIcon, {}),
+                    children: subscriptionStatus === "subscribed" ? $.THREAD_UNSUBSCRIBE : $.THREAD_SUBSCRIBE
                   }
-                  return threadDropdownItems || commentDropdownItems || children2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    threadDropdownItems,
-                    children2,
-                    commentDropdownItems
-                  ] }) : null;
-                }
+                ) : void 0,
+                dropdownItems: commentDropdownItems
               },
               comment.id
             );
@@ -316,6 +332,8 @@ const Thread = react.forwardRef(
               children
             ] }, comment.id) : children;
           }) }),
+          unreadIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(MarkThreadAsReadMarker, { thread }),
+          additionalContent,
           showComposer && /* @__PURE__ */ jsxRuntime.jsx(
             Composer.Composer,
             {

package/dist/components/Thread.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.cjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DCM,\n  type DTM,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport { findLastIndex } from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<TM, CM>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Add (or change) items to display in a comment's dropdown.\n   */\n  commentDropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData }>) => ReactNode);\n\n  /**\n   * The maximum number of comments to show.\n   *\n   * The first and last comments are always shown and by default if some comments\n   * are hidden, only the first comment will be shown before the \"show more\" button\n   * and after it will be shown all the newest comments to fit the limit set.\n   *\n   * It's possible to customize this by setting `maxVisibleComments` to an object:\n   *\n   * @example\n   * // Only show the last comment, and all the older ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"oldest\" }} />\n   *\n   * @example\n   * // Show as many old comments as new ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"both\" }} />\n   */\n  maxVisibleComments?:\n    | number\n    | { max: number; show: \"oldest\" | \"both\" | \"newest\" };\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<TM, CM>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      maxVisibleComments,\n      commentDropdownItems,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const [showAllComments, setShowAllComments] = useState(false);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => Boolean(comment.body));\n    }, [showDeletedComments, thread.comments]);\n    const hiddenComments = useMemo(() => {\n      const maxVisibleCommentsCount =\n        typeof maxVisibleComments === \"number\"\n          ? maxVisibleComments\n          : maxVisibleComments?.max;\n      const visibleCommentsShow =\n        (typeof maxVisibleComments === \"object\"\n          ? maxVisibleComments?.show\n          : undefined) ?? \"newest\";\n\n      // If we explicitly want to show all comments or there's no limit set,\n      // no need to hide any comments.\n      if (showAllComments || maxVisibleCommentsCount === undefined) {\n        return;\n      }\n\n      const comments = thread.comments\n        .map((comment, index) => ({ comment, index }))\n        .filter(({ comment }) => showDeletedComments || comment.body);\n\n      // There aren't enough comments so no need to hide any.\n      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {\n        return;\n      }\n\n      const firstVisibleComment = comments[0]!;\n      const lastVisibleComment = comments[comments.length - 1]!;\n\n      // Always show the first and last comments even if the limit is set to lower than 2.\n      if (maxVisibleCommentsCount <= 2) {\n        const firstHiddenCommentIndex =\n          comments[1]?.index ?? firstVisibleComment.index;\n        const lastHiddenCommentIndex =\n          comments[comments.length - 2]?.index ?? lastVisibleComment.index;\n\n        return {\n          firstIndex: firstHiddenCommentIndex,\n          lastIndex: lastHiddenCommentIndex,\n          count: comments.slice(1, comments.length - 1).length,\n        };\n      }\n\n      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;\n\n      // Split the remaining visible comments before, after, or equally.\n      const beforeVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? remainingVisibleCommentsCount\n          : visibleCommentsShow === \"newest\"\n            ? 0\n            : Math.floor(remainingVisibleCommentsCount / 2);\n      const afterVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? 0\n          : visibleCommentsShow === \"newest\"\n            ? remainingVisibleCommentsCount\n            : Math.ceil(remainingVisibleCommentsCount / 2);\n\n      // The first comment is always visible so `+ 1` to skip it.\n      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];\n      // The last comment is always visible so `- 2` to skip it.\n      const lastHiddenComment =\n        comments[comments.length - 2 - afterVisibleCommentsCount];\n\n      // There aren't any comments to hide besides the first and last ones.\n      if (\n        !firstHiddenComment ||\n        !lastHiddenComment ||\n        firstHiddenComment.index > lastHiddenComment.index\n      ) {\n        return;\n      }\n\n      return {\n        firstIndex: firstHiddenComment.index,\n        lastIndex: lastHiddenComment.index,\n        count: thread.comments\n          .slice(firstHiddenComment.index, lastHiddenComment.index + 1)\n          .filter((comment) => showDeletedComments || comment.body).length,\n      };\n    }, [\n      maxVisibleComments,\n      showAllComments,\n      showDeletedComments,\n      thread.comments,\n    ]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const permissions = useRoomPermissions(thread.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 handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n              const isHidden =\n                hiddenComments &&\n                index >= hiddenComments.firstIndex &&\n                index <= hiddenComments.lastIndex;\n              const isFirstHiddenComment =\n                isHidden && index === hiddenComments.firstIndex;\n\n              if (isFirstHiddenComment) {\n                return (\n                  <div\n                    key={`${comment.id}-show-more`}\n                    className=\"lb-thread-show-more\"\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"lb-thread-show-more-button\"\n                      onClick={() => setShowAllComments(true)}\n                    >\n                      {$.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)}\n                    </Button>\n                  </div>\n                );\n              }\n\n              if (isHidden) {\n                return null;\n              }\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  components={components}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  actionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  actions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  dropdownItems={({ children }) => {\n                    const threadDropdownItems = isFirstComment ? (\n                      <>\n                        <Comment.DropdownItem\n                          onSelect={handleSubscribeChange}\n                          icon={\n                            subscriptionStatus === \"subscribed\" ? (\n                              <BellCrossedIcon />\n                            ) : (\n                              <BellIcon />\n                            )\n                          }\n                        >\n                          {subscriptionStatus === \"subscribed\"\n                            ? $.THREAD_UNSUBSCRIBE\n                            : $.THREAD_SUBSCRIBE}\n                        </Comment.DropdownItem>\n                      </>\n                    ) : null;\n\n                    if (typeof commentDropdownItems === \"function\") {\n                      return commentDropdownItems({\n                        children: (\n                          <>\n                            {threadDropdownItems}\n                            {children}\n                          </>\n                        ),\n                        comment,\n                      });\n                    }\n\n                    return threadDropdownItems ||\n                      commentDropdownItems ||\n                      children ? (\n                      <>\n                        {threadDropdownItems}\n                        {children}\n                        {commentDropdownItems}\n                      </>\n                    ) : null;\n                  }}\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              blurOnSubmit={blurComposerOnSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2MO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAEqE;AAEvE;AACE;AAIA;AAOA;AACE;AAAA;AAGF;AAKA;AACE;AAAA;AAGF;AACA;AAGA;AACE;AAEA;AAGA;AAAO;AACO;AACD;AACmC;AAChD;AAGF;AAGA;AAMA;AAQA;AAEA;AAIA;AAKE;AAAA;AAGF;AAAO;AAC0B;AACF;AAG+B;AAC9D;AACC;AACD;AACA;AACA;AACO;AAET;AAAM;AACI;AACR;AACA;AACA;AAEF;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACA;AAMA;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AAEI;AAAC;AAAA;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAEI;AACA;AAEA;AAIA;AAGA;AACE;AACE;AAAC;AAAA;AAEW;AAEV;AAAC;AAAA;AACS;AACE;AAC4B;AAEW;AAAA;AACnD;AAAA;AATkB;AAUpB;AAIJ;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAIM;AAGmC;AAIrC;AAAC;AAAA;AAIS;AAGR;AAAiB;AAAhB;AACiB;AACC;AACV;AAEP;AAAC;AAAA;AACW;AACD;AAID;AAMa;AAGV;AAAA;AACb;AAAA;AACF;AAAA;AAEA;AAGJ;AAEI;AAAS;AAAR;AACW;AAKI;AAMR;AAAA;AAKZ;AACE;AAA4B;AAGrB;AAAA;AACA;AACH;AAEF;AACD;AAGH;AAIK;AAAA;AACA;AACA;AAED;AACN;AAAA;AAvGa;AA2GjB;AAII;AAAA;AAAC;AAAA;AACW;AACI;AAGZ;AAA8D;AAC3D;AACL;AAAA;AACF;AACC;AAGH;AAGN;AAEE;AAAC;AAAA;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AAAA;AACjB;AAAA;AAAA;AAGN;AAGN;;"}
+{"version":3,"file":"Thread.cjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type BaseMetadata,\n  type CommentData,\n  type DCM,\n  type DTM,\n  findLastIndex,\n  Permission,\n  type ThreadData,\n} from \"@liveblocks/core\";\nimport {\n  useMarkRoomThreadAsRead,\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n  useRoomPermissions,\n  useRoomThreadSubscription,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefAttributes,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\nimport { CheckCircleIcon } from \"../icons/CheckCircle\";\nimport { CheckCircleFillIcon } from \"../icons/CheckCircleFill\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useIntersectionCallback } from \"../utils/use-visible\";\nimport { useWindowFocus } from \"../utils/use-window-focus\";\nimport { Comment as DefaultComment, type CommentProps } from \"./Comment\";\nimport { Composer, type ComposerProps } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\n// An invisible marker used to mark a thread as read only when it becomes visible.\nfunction MarkThreadAsReadMarker({ thread }: { thread: ThreadData }) {\n  const { id: threadId, roomId } = thread;\n  const ref = useRef<HTMLDivElement>(null);\n  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);\n  const isWindowFocused = useWindowFocus();\n\n  useIntersectionCallback(\n    ref,\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 (\n    <div\n      ref={ref}\n      style={{ height: 0 }}\n      aria-hidden\n      data-mark-as-read-marker=\"\"\n    />\n  );\n}\n\nexport interface ThreadComponents<\n  // Future components might reference thread metadata so we declare it\n  // already to respect the `TM` → `CM` order used everywhere else.\n  _TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> {\n  /**\n   * The component used to display comments.\n   */\n  Comment: ComponentType<CommentProps<CM>>;\n}\n\nexport interface ThreadProps<\n  TM extends BaseMetadata = DTM,\n  CM extends BaseMetadata = DCM,\n> extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<TM, CM>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Add (or change) items to display in a comment's dropdown.\n   */\n  commentDropdownItems?:\n    | ReactNode\n    | ((props: PropsWithChildren<{ comment: CommentData<CM> }>) => ReactNode);\n\n  /**\n   * The maximum number of comments to show.\n   *\n   * The first and last comments are always shown and by default if some comments\n   * are hidden, only the first comment will be shown before the \"show more\" button\n   * and after it will be shown all the newest comments to fit the limit set.\n   *\n   * It's possible to customize this by setting `maxVisibleComments` to an object:\n   *\n   * @example\n   * // Only show the last comment, and all the older ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"oldest\" }} />\n   *\n   * @example\n   * // Show as many old comments as new ones to fit the limit.\n   * <Thread maxVisibleComments={{ max: 5, show: \"both\" }} />\n   */\n  maxVisibleComments?:\n    | number\n    | { max: number; show: \"oldest\" | \"both\" | \"newest\" };\n\n  /**\n   * Whether to blur the composer editor when the composer is submitted.\n   */\n  blurComposerOnSubmit?: ComposerProps[\"blurOnSubmit\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Additional content to display below the thread's comments.\n   */\n  additionalContent?: ReactNode;\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<TM, CM>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & ThreadComponents>;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      maxVisibleComments,\n      commentDropdownItems,\n      additionalContent,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      blurComposerOnSubmit,\n      overrides,\n      components,\n      className,\n      ...props\n    }: ThreadProps<TM, CM>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const Comment = components?.Comment ?? DefaultComment;\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const [showAllComments, setShowAllComments] = useState(false);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => Boolean(comment.body));\n    }, [showDeletedComments, thread.comments]);\n    const hiddenComments = useMemo(() => {\n      const maxVisibleCommentsCount =\n        typeof maxVisibleComments === \"number\"\n          ? maxVisibleComments\n          : maxVisibleComments?.max;\n      const visibleCommentsShow =\n        (typeof maxVisibleComments === \"object\"\n          ? maxVisibleComments?.show\n          : undefined) ?? \"newest\";\n\n      // If we explicitly want to show all comments or there's no limit set,\n      // no need to hide any comments.\n      if (showAllComments || maxVisibleCommentsCount === undefined) {\n        return;\n      }\n\n      const comments = thread.comments\n        .map((comment, index) => ({ comment, index }))\n        .filter(({ comment }) => showDeletedComments || comment.body);\n\n      // There aren't enough comments so no need to hide any.\n      if (comments.length <= Math.max(maxVisibleCommentsCount, 2)) {\n        return;\n      }\n\n      const firstVisibleComment = comments[0]!;\n      const lastVisibleComment = comments[comments.length - 1]!;\n\n      // Always show the first and last comments even if the limit is set to lower than 2.\n      if (maxVisibleCommentsCount <= 2) {\n        const firstHiddenCommentIndex =\n          comments[1]?.index ?? firstVisibleComment.index;\n        const lastHiddenCommentIndex =\n          comments[comments.length - 2]?.index ?? lastVisibleComment.index;\n\n        return {\n          firstIndex: firstHiddenCommentIndex,\n          lastIndex: lastHiddenCommentIndex,\n          count: comments.slice(1, comments.length - 1).length,\n        };\n      }\n\n      const remainingVisibleCommentsCount = maxVisibleCommentsCount - 2;\n\n      // Split the remaining visible comments before, after, or equally.\n      const beforeVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? remainingVisibleCommentsCount\n          : visibleCommentsShow === \"newest\"\n            ? 0\n            : Math.floor(remainingVisibleCommentsCount / 2);\n      const afterVisibleCommentsCount =\n        visibleCommentsShow === \"oldest\"\n          ? 0\n          : visibleCommentsShow === \"newest\"\n            ? remainingVisibleCommentsCount\n            : Math.ceil(remainingVisibleCommentsCount / 2);\n\n      // The first comment is always visible so `+ 1` to skip it.\n      const firstHiddenComment = comments[1 + beforeVisibleCommentsCount];\n      // The last comment is always visible so `- 2` to skip it.\n      const lastHiddenComment =\n        comments[comments.length - 2 - afterVisibleCommentsCount];\n\n      // There aren't any comments to hide besides the first and last ones.\n      if (\n        !firstHiddenComment ||\n        !lastHiddenComment ||\n        firstHiddenComment.index > lastHiddenComment.index\n      ) {\n        return;\n      }\n\n      return {\n        firstIndex: firstHiddenComment.index,\n        lastIndex: lastHiddenComment.index,\n        count: thread.comments\n          .slice(firstHiddenComment.index, lastHiddenComment.index + 1)\n          .filter((comment) => showDeletedComments || comment.body).length,\n      };\n    }, [\n      maxVisibleComments,\n      showAllComments,\n      showDeletedComments,\n      thread.comments,\n    ]);\n    const {\n      status: subscriptionStatus,\n      unreadSince,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const permissions = useRoomPermissions(thread.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 handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    return (\n      <TooltipProvider>\n        <div\n          className={cn(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n              const isHidden =\n                hiddenComments &&\n                index >= hiddenComments.firstIndex &&\n                index <= hiddenComments.lastIndex;\n              const isHiddenBecauseDeleted =\n                !showDeletedComments && !comment.body;\n              const isFirstHiddenComment =\n                isHidden && index === hiddenComments.firstIndex;\n\n              if (isFirstHiddenComment) {\n                return (\n                  <div\n                    key={`${comment.id}-show-more`}\n                    className=\"lb-thread-show-more\"\n                  >\n                    <Button\n                      variant=\"ghost\"\n                      className=\"lb-thread-show-more-button\"\n                      onClick={() => setShowAllComments(true)}\n                    >\n                      {$.THREAD_SHOW_MORE_COMMENTS(hiddenComments.count)}\n                    </Button>\n                  </div>\n                );\n              }\n\n              if (isHidden || isHiddenBecauseDeleted) {\n                return null;\n              }\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  overrides={overrides}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  components={components}\n                  actionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  actions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                            icon={\n                              thread.resolved ? (\n                                <CheckCircleFillIcon />\n                              ) : (\n                                <CheckCircleIcon />\n                              )\n                            }\n                            disabled={!canComment}\n                          />\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                  internalDropdownItems={\n                    isFirstComment ? (\n                      <DefaultComment.DropdownItem\n                        onSelect={handleSubscribeChange}\n                        icon={\n                          subscriptionStatus === \"subscribed\" ? (\n                            <BellCrossedIcon />\n                          ) : (\n                            <BellIcon />\n                          )\n                        }\n                      >\n                        {subscriptionStatus === \"subscribed\"\n                          ? $.THREAD_UNSUBSCRIBE\n                          : $.THREAD_SUBSCRIBE}\n                      </DefaultComment.DropdownItem>\n                    ) : undefined\n                  }\n                  dropdownItems={\n                    commentDropdownItems as CommentProps[\"dropdownItems\"]\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {unreadIndex !== undefined && (\n            <MarkThreadAsReadMarker thread={thread} />\n          )}\n          {additionalContent}\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              blurOnSubmit={blurComposerOnSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n                ...overrides,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(\n  props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA;AACE;AACA;AACA;AACA;AAEA;AAAA;AACE;AAEE;AACE;AAAyB;AAC3B;AACF;AACA;AAAA;AAEW;AACX;AAGF;AACE;AAAC;AAAA;AACC;AACmB;AACR;AACc;AAAA;AAG/B;AAsKO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAEqE;AAEvE;AACE;AAIA;AAOA;AACE;AAAA;AAGF;AAKA;AACE;AAAA;AAGF;AACA;AAGA;AACE;AAEA;AAGA;AAAO;AACO;AACD;AACmC;AAChD;AAGF;AAGA;AAMA;AAQA;AAEA;AAIA;AAKE;AAAA;AAGF;AAAO;AAC0B;AACF;AAG+B;AAC9D;AACC;AACD;AACA;AACA;AACO;AAET;AAAM;AACI;AACR;AACA;AACA;AAEF;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACA;AAMA;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AAEI;AAAC;AAAA;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEL;AAEI;AACA;AAEA;AAIA;AAEA;AAGA;AACE;AACE;AAAC;AAAA;AAEW;AAEV;AAAC;AAAA;AACS;AACE;AAC4B;AAEW;AAAA;AACnD;AAAA;AATkB;AAUpB;AAIJ;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AAEC;AACU;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AACA;AAEyC;AAIrC;AAAC;AAAA;AAIS;AAGR;AAAiB;AAAhB;AACiB;AACC;AACV;AAEP;AAAC;AAAA;AACW;AACD;AAID;AAMa;AAGV;AAAA;AACb;AAAA;AACF;AAAA;AAEA;AAIF;AAAgB;AAAf;AACW;AAKI;AAMR;AAAA;AAEN;AAGJ;AAAA;AA5EW;AAiFjB;AAII;AAAA;AAAC;AAAA;AACW;AACI;AAGZ;AAA8D;AAC3D;AACL;AAAA;AACF;AACC;AAGH;AAGN;AAE0C;AAEzC;AAEC;AAAC;AAAA;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACc;AACH;AACe;AACP;AACd;AACL;AACe;AAAA;AACjB;AAAA;AAAA;AAGN;AAGN;;"}

package/dist/components/Thread.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { findLastIndex, Permission } from '@liveblocks/core';
-import { useMarkRoomThreadAsResolved, useMarkRoomThreadAsUnresolved, useRoomThreadSubscription, useRoomPermissions } from '@liveblocks/react/_private';
+import { useMarkRoomThreadAsRead, useMarkRoomThreadAsResolved, useMarkRoomThreadAsUnresolved, useRoomThreadSubscription, useRoomPermissions } from '@liveblocks/react/_private';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { forwardRef, useState, useMemo, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import { useRef, forwardRef, useState, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { ArrowDownIcon } from '../icons/ArrowDown.js';
 import { BellIcon } from '../icons/Bell.js';
 import { BellCrossedIcon } from '../icons/BellCrossed.js';
@@ -11,6 +11,8 @@ import { CheckCircleIcon } from '../icons/CheckCircle.js';
 import { CheckCircleFillIcon } from '../icons/CheckCircleFill.js';
 import { useOverrides } from '../overrides.js';
 import { cn } from '../utils/cn.js';
+import { useIntersectionCallback } from '../utils/use-visible.js';
+import { useWindowFocus } from '../utils/use-window-focus.js';
 import { Comment } from './Comment.js';
 import { Composer } from './Composer.js';
 import { Button } from './internal/Button.js';
@@ -18,6 +20,33 @@ import { Tooltip } from './internal/Tooltip.js';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 
 
+function MarkThreadAsReadMarker({ thread }) {
+  const { id: threadId, roomId } = thread;
+  const ref = useRef(null);
+  const markThreadAsRead = useMarkRoomThreadAsRead(roomId);
+  const isWindowFocused = useWindowFocus();
+  useIntersectionCallback(
+    ref,
+    (isIntersecting) => {
+      if (isIntersecting) {
+        markThreadAsRead(threadId);
+      }
+    },
+    {
+      // The underlying IntersectionObserver is only enabled when the window is focused
+      enabled: isWindowFocused
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { height: 0 },
+      "aria-hidden": true,
+      "data-mark-as-read-marker": ""
+    }
+  );
+}
 const Thread = forwardRef(
   ({
     thread,
@@ -31,6 +60,7 @@ const Thread = forwardRef(
     showComposerFormattingControls = true,
     maxVisibleComments,
     commentDropdownItems,
+    additionalContent,
     onResolvedChange,
     onCommentEdit,
     onCommentDelete,
@@ -45,6 +75,7 @@ const Thread = forwardRef(
     className,
     ...props
   }, forwardedRef) => {
+    const Comment$1 = components?.Comment ?? Comment;
     const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);
     const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);
     const $ = useOverrides(overrides);
@@ -186,6 +217,7 @@ const Thread = forwardRef(
             const isFirstComment = index === firstCommentIndex;
             const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
             const isHidden = hiddenComments && index >= hiddenComments.firstIndex && index <= hiddenComments.lastIndex;
+            const isHiddenBecauseDeleted = !showDeletedComments && !comment.body;
             const isFirstHiddenComment = isHidden && index === hiddenComments.firstIndex;
             if (isFirstHiddenComment) {
               return /* @__PURE__ */ jsx(
@@ -205,11 +237,11 @@ const Thread = forwardRef(
                 `${comment.id}-show-more`
               );
             }
-            if (isHidden) {
+            if (isHidden || isHiddenBecauseDeleted) {
               return null;
             }
             const children = /* @__PURE__ */ jsx(
-              Comment,
+              Comment$1,
               {
                 overrides,
                 className: "lb-thread-comment",
@@ -227,7 +259,6 @@ const Thread = forwardRef(
                 onMentionClick,
                 onAttachmentClick,
                 components,
-                autoMarkReadThreadId: index === lastCommentIndex && isUnread ? thread.id : void 0,
                 actionsClassName: isFirstComment ? "lb-thread-actions" : void 0,
                 actions: isFirstComment && showResolveAction ? /* @__PURE__ */ jsx(
                   Tooltip,
@@ -253,34 +284,19 @@ const Thread = forwardRef(
                     )
                   }
                 ) : null,
-                dropdownItems: ({ children: children2 }) => {
-                  const threadDropdownItems = isFirstComment ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                    Comment.DropdownItem,
-                    {
-                      onSelect: handleSubscribeChange,
-                      icon: subscriptionStatus === "subscribed" ? /* @__PURE__ */ jsx(BellCrossedIcon, {}) : /* @__PURE__ */ jsx(BellIcon, {}),
-                      children: subscriptionStatus === "subscribed" ? $.THREAD_UNSUBSCRIBE : $.THREAD_SUBSCRIBE
-                    }
-                  ) }) : null;
-                  if (typeof commentDropdownItems === "function") {
-                    return commentDropdownItems({
-                      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                        threadDropdownItems,
-                        children2
-                      ] }),
-                      comment
-                    });
+                internalDropdownItems: isFirstComment ? /* @__PURE__ */ jsx(
+                  Comment.DropdownItem,
+                  {
+                    onSelect: handleSubscribeChange,
+                    icon: subscriptionStatus === "subscribed" ? /* @__PURE__ */ jsx(BellCrossedIcon, {}) : /* @__PURE__ */ jsx(BellIcon, {}),
+                    children: subscriptionStatus === "subscribed" ? $.THREAD_UNSUBSCRIBE : $.THREAD_SUBSCRIBE
                   }
-                  return threadDropdownItems || commentDropdownItems || children2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    threadDropdownItems,
-                    children2,
-                    commentDropdownItems
-                  ] }) : null;
-                }
+                ) : void 0,
+                dropdownItems: commentDropdownItems
               },
               comment.id
             );
-            return index === newIndicatorIndex && newIndicatorIndex !== firstCommentIndex && newIndicatorIndex <= lastCommentIndex ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            return index === newIndicatorIndex && newIndicatorIndex !== firstCommentIndex && newIndicatorIndex <= lastCommentIndex ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -295,6 +311,8 @@ const Thread = forwardRef(
               children
             ] }, comment.id) : children;
           }) }),
+          unreadIndex !== void 0 && /* @__PURE__ */ jsx(MarkThreadAsReadMarker, { thread }),
+          additionalContent,
           showComposer && /* @__PURE__ */ jsx(
             Composer,
             {