@liveblocks/react-ui 2.8.2 → 2.9.0-rc1

package/dist/components/InboxNotification.mjs

@@ -186,15 +186,18 @@ const InboxNotificationThread = forwardRef(
     const thread = useInboxNotificationThread(inboxNotification.id);
     const currentUserId = useCurrentUserId();
     const { info } = useRoomInfo(inboxNotification.roomId);
-    const { unread, date, aside, title, content, commentId } = useMemo(() => {
-      const contents = generateInboxNotificationThreadContents(
+    const contents = useMemo(() => {
+      const contents2 = generateInboxNotificationThreadContents(
         inboxNotification,
         thread,
         currentUserId ?? ""
       );
-      switch (contents.type) {
+      if (contents2.comments.length === 0 || contents2.userIds.length === 0) {
+        return null;
+      }
+      switch (contents2.type) {
         case "comments": {
-          const reversedUserIds = [...contents.userIds].reverse();
+          const reversedUserIds = [...contents2.userIds].reverse();
           const firstUserId = reversedUserIds[0];
           const aside2 = /* @__PURE__ */ React__default.createElement(InboxNotificationAvatar, {
             userId: firstUserId
@@ -217,27 +220,27 @@ const InboxNotificationThread = forwardRef(
           );
           const content2 = /* @__PURE__ */ React__default.createElement("div", {
             className: "lb-inbox-notification-comments"
-          }, contents.comments.map((comment) => /* @__PURE__ */ React__default.createElement(InboxNotificationComment, {
+          }, contents2.comments.map((comment) => /* @__PURE__ */ React__default.createElement(InboxNotificationComment, {
             key: comment.id,
             comment,
-            showHeader: contents.comments.length > 1,
+            showHeader: contents2.comments.length > 1,
             showAttachments,
             showReactions,
             overrides
           })));
           return {
-            unread: contents.unread,
-            date: contents.date,
+            unread: contents2.unread,
+            date: contents2.date,
             aside: aside2,
             title: title2,
             content: content2,
             threadId: thread.id,
-            commentId: contents.comments[contents.comments.length - 1].id
+            commentId: contents2.comments[contents2.comments.length - 1].id
           };
         }
         case "mention": {
-          const mentionUserId = contents.userIds[0];
-          const mentionComment = contents.comments[0];
+          const mentionUserId = contents2.userIds[0];
+          const mentionComment = contents2.comments[0];
           const aside2 = /* @__PURE__ */ React__default.createElement(InboxNotificationAvatar, {
             userId: mentionUserId
           });
@@ -261,8 +264,8 @@ const InboxNotificationThread = forwardRef(
             overrides
           }));
           return {
-            unread: contents.unread,
-            date: contents.date,
+            unread: contents2.unread,
+            date: contents2.date,
             aside: aside2,
             title: title2,
             content: content2,
@@ -272,7 +275,7 @@ const InboxNotificationThread = forwardRef(
         }
         default:
           return assertNever(
-            contents,
+            contents2,
             "Unexpected thread inbox notification type"
           );
       }
@@ -288,8 +291,12 @@ const InboxNotificationThread = forwardRef(
     ]);
     const resolvedHref = useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? generateURL(resolvedHref2, void 0, commentId) : void 0;
-    }, [commentId, href, info?.url]);
+      return resolvedHref2 ? generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
+    }, [contents?.commentId, href, info?.url]);
+    if (!contents) {
+      return null;
+    }
+    const { aside, title, content, date, unread } = contents;
     return /* @__PURE__ */ React__default.createElement(InboxNotificationLayout, {
       inboxNotification,
       aside,

package/dist/components/InboxNotification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotification.mjs","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport { assertNever, console } from \"@liveblocks/core\";\nimport {\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { TooltipProvider } from \"@radix-ui/react-tooltip\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { generateURL } from \"../utils/url\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & InboxNotificationOverrides & CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationCustomProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport type InboxNotificationAvatarProps = AvatarProps;\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={classNames(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                          >\n                            <CheckIcon className=\"lb-dropdown-item-icon\" />\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                        >\n                          <DeleteIcon className=\"lb-dropdown-item-icon\" />\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                        >\n                          <EllipsisIcon className=\"lb-button-icon\" />\n                        </Button>\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div\n      className={classNames(\"lb-inbox-notification-icon\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={classNames(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Displays a thread inbox notification.\n */\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const currentUserId = useCurrentUserId();\n    // TODO: If you provide `href` (or plan to), we shouldn't run this hook. We should find a way to conditionally run it.\n    //       Because of batching and the fact that the same hook will be called within <Room /> in the notification's title,\n    //       it's not a big deal, the only scenario where it would be superfluous would be if the user provides their own\n    //       `href` AND disables room names in the title via `showRoomName={false}`.\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const { unread, date, aside, title, content, commentId } = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0];\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1].id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionUserId = contents.userIds[0];\n          const mentionComment = contents.comments[0];\n\n          const aside = <InboxNotificationAvatar userId={mentionUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionUserId} userId={mentionUserId} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Add the thread ID and comment ID to the `href`.\n    // And use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? generateURL(resolvedHref, undefined, commentId)\n        : undefined;\n    }, [commentId, href, info?.url]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\n/**\n * Displays a text mention notification kind.\n */\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\n/**\n * Displays a custom notification kind.\n */\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      {/* TODO: Add link to the docs */}\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered.\n    </InboxNotificationCustom>\n  );\n});\n\n// Keeps track of which inbox notification kinds it has warned about already.\nconst inboxNotificationKindsWarnings: Set<string> = new Set();\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              if (!inboxNotificationKindsWarnings.has(inboxNotification.kind)) {\n                inboxNotificationKindsWarnings.add(inboxNotification.kind);\n                // TODO: Add link to the docs\n                console.warn(\n                  `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered.`\n                );\n              }\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    Thread: InboxNotificationThread,\n    TextMention: InboxNotificationTextMention,\n    Custom: InboxNotificationCustom,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuNA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEK;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEM;AAAc;AACxB;AAAc;AACZ;AAAc;AACZ;AAAe;AACf;AAAc;AACZ;AAAe;AACb;AACW;AACV;AACU;AAGT;AACW;AACL;AAMV;AAAc;AACZ;AACO;AACQ;AACR;AAIC;AACW;AACD;AAER;AAAoB;AAIxB;AACW;AACD;AAER;AAAqB;AAG1B;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AAEb;AAAuB;AAQrC;AAAc;AAGrB;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAC8D;AACzD;AAGV;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACgE;AAC3D;AAGV;AAKA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAKA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAU;AAAQ;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AACc;AACb;AACuC;AACvC;AACA;AACA;AAMR;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC0C;AAC7D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAU;AAAuB;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AACqB;AACX;AACG;AACZ;AACA;AACA;AAKN;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIF;AACE;AAEA;AAEI;AAGN;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AACf;AACC;AAGP;AAGN;AAKA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACG;AAIL;AAEA;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AACwB;AACG;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACI;AACJ;AACF;AAGN;AAKA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAGP;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAKF;AAKA;AAEG;AACQ;AAOnB;AAGA;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACG;AACC;AACI;AACC;AACP;AAEJ;AAGE;AAGA;AACG;AACC;AACI;AACC;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AACE;AAEA;AAAQ;AACyC;AACjD;AAGF;AACG;AACC;AACI;AACC;AACP;AAIF;AAAO;AACT;AAGF;AACG;AACC;AACI;AACC;AACP;AAEJ;AACF;AACF;AACF;AACA;AACU;AACK;AACL;AACF;AACE;AAEZ;;"}
+{"version":3,"file":"InboxNotification.mjs","sources":["../../src/components/InboxNotification.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  InboxNotificationCustomData,\n  InboxNotificationData,\n  InboxNotificationTextMentionData,\n  InboxNotificationThreadData,\n  KDAD,\n} from \"@liveblocks/core\";\nimport { assertNever, console } from \"@liveblocks/core\";\nimport {\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { TooltipProvider } from \"@radix-ui/react-tooltip\";\nimport type {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ComponentType,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { CheckIcon } from \"../icons/Check\";\nimport { DeleteIcon } from \"../icons/Delete\";\nimport { EllipsisIcon } from \"../icons/Ellipsis\";\nimport { WarningIcon } from \"../icons/Warning\";\nimport type {\n  CommentOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { generateURL } from \"../utils/url\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { Dropdown, DropdownItem, DropdownTrigger } from \"./internal/Dropdown\";\nimport {\n  generateInboxNotificationThreadContents,\n  INBOX_NOTIFICATION_THREAD_MAX_COMMENTS,\n  InboxNotificationComment,\n} from \"./internal/InboxNotificationThread\";\nimport { List } from \"./internal/List\";\nimport { Room } from \"./internal/Room\";\nimport { Tooltip } from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ntype ComponentTypeWithRef<\n  T extends keyof JSX.IntrinsicElements,\n  P,\n> = ComponentType<P & Pick<ComponentProps<T>, \"ref\">>;\n\ntype InboxNotificationKinds<KS extends KDAD = KDAD> = {\n  // For some reason, we cannot directly use KDAD in the mapped type line\n  // below, because it will result in '{}' rather than picking up the\n  // definition from the user-provided 'ActivitiesData'. Might be an internal\n  // TS optimization, so we're making it a param to defer the resolution.\n  [K in KS]: ComponentTypeWithRef<\"a\", InboxNotificationCustomKindProps<K>>;\n} & {\n  thread: ComponentTypeWithRef<\"a\", InboxNotificationThreadKindProps>;\n  textMention: ComponentTypeWithRef<\"a\", InboxNotificationTextMentionKindProps>;\n};\n\ninterface InboxNotificationSharedProps {\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: boolean | \"hover\";\n}\n\nexport interface InboxNotificationProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\n\n  /**\n   * Override specific kinds of inbox notifications.\n   */\n  kinds?: Partial<InboxNotificationKinds>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & InboxNotificationOverrides & CommentOverrides\n  >;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport interface InboxNotificationThreadProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationThreadData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: 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\nexport interface InboxNotificationTextMentionProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationTextMentionData;\n\n  /**\n   * Whether to show the room name in the title.\n   */\n  showRoomName?: boolean;\n}\n\nexport interface InboxNotificationCustomProps\n  extends Omit<InboxNotificationProps, \"kinds\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationCustomData;\n\n  /**\n   * The inbox notification's content.\n   */\n  children: ReactNode;\n\n  /**\n   * The inbox notification's title.\n   */\n  title: ReactNode;\n\n  /**\n   * The inbox notification's aside content.\n   * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.\n   */\n  aside?: ReactNode;\n\n  /**\n   * Whether to mark the inbox notification as read when clicked.\n   */\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationThreadKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationThreadData;\n};\n\nexport type InboxNotificationTextMentionKindProps = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationTextMentionData;\n};\n\nexport type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<\n  InboxNotificationProps,\n  \"kinds\"\n> & {\n  inboxNotification: InboxNotificationCustomData<K>;\n};\n\ninterface InboxNotificationLayoutProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"title\">,\n    InboxNotificationSharedProps,\n    SlotProp {\n  inboxNotification: InboxNotificationData;\n  aside: ReactNode;\n  title: ReactNode;\n  date: Date | string | number;\n  unread?: boolean;\n  overrides?: Partial<GlobalOverrides & InboxNotificationOverrides>;\n  components?: Partial<GlobalComponents>;\n  markAsReadOnClick?: boolean;\n}\n\nexport type InboxNotificationIconProps = ComponentProps<\"div\">;\n\nexport type InboxNotificationAvatarProps = AvatarProps;\n\nconst InboxNotificationLayout = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationLayoutProps\n>(\n  (\n    {\n      inboxNotification,\n      children,\n      aside,\n      title,\n      date,\n      unread,\n      markAsReadOnClick,\n      onClick,\n      href,\n      showActions,\n      overrides,\n      components,\n      className,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const { Anchor } = useComponents(components);\n    const Component = asChild ? Slot : Anchor;\n    const [isMoreActionOpen, setMoreActionOpen] = useState(false);\n    const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();\n    const deleteInboxNotification = useDeleteInboxNotification();\n\n    const handleClick = useCallback(\n      (event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        onClick?.(event);\n\n        const shouldMarkAsReadOnClick = markAsReadOnClick ?? Boolean(href);\n\n        if (unread && shouldMarkAsReadOnClick) {\n          markInboxNotificationAsRead(inboxNotification.id);\n        }\n      },\n      [\n        href,\n        inboxNotification.id,\n        markAsReadOnClick,\n        markInboxNotificationAsRead,\n        onClick,\n        unread,\n      ]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const preventDefaultAndStopPropagation = useCallback(\n      (event: SyntheticEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      []\n    );\n\n    const handleMoreClick = useCallback((event: ReactMouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setMoreActionOpen((open) => !open);\n    }, []);\n\n    const handleMarkAsRead = useCallback(() => {\n      markInboxNotificationAsRead(inboxNotification.id);\n    }, [inboxNotification.id, markInboxNotificationAsRead]);\n\n    const handleDelete = useCallback(() => {\n      deleteInboxNotification(inboxNotification.id);\n    }, [inboxNotification.id, deleteInboxNotification]);\n\n    return (\n      <TooltipProvider>\n        <Component\n          className={classNames(\n            \"lb-root lb-inbox-notification\",\n            showActions === \"hover\" &&\n              \"lb-inbox-notification:show-actions-hover\",\n            isMoreActionOpen && \"lb-inbox-notification:action-open\",\n            className\n          )}\n          dir={$.dir}\n          data-unread={unread ? \"\" : undefined}\n          data-kind={inboxNotification.kind}\n          onClick={handleClick}\n          href={href}\n          {...props}\n          ref={forwardedRef}\n        >\n          {aside && <div className=\"lb-inbox-notification-aside\">{aside}</div>}\n          <div className=\"lb-inbox-notification-content\">\n            <div className=\"lb-inbox-notification-header\">\n              <span className=\"lb-inbox-notification-title\">{title}</span>\n              <div className=\"lb-inbox-notification-details\">\n                <span className=\"lb-inbox-notification-details-labels\">\n                  <Timestamp\n                    locale={$.locale}\n                    date={date}\n                    className=\"lb-date lb-inbox-notification-date\"\n                  />\n                  {unread && (\n                    <span\n                      className=\"lb-inbox-notification-unread-indicator\"\n                      role=\"presentation\"\n                    />\n                  )}\n                </span>\n              </div>\n              {showActions && (\n                <div className=\"lb-inbox-notification-actions\">\n                  <Dropdown\n                    open={isMoreActionOpen}\n                    onOpenChange={setMoreActionOpen}\n                    align=\"end\"\n                    content={\n                      <>\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                          >\n                            <CheckIcon className=\"lb-dropdown-item-icon\" />\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                        >\n                          <DeleteIcon className=\"lb-dropdown-item-icon\" />\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                      </>\n                    }\n                  >\n                    <Tooltip content={$.INBOX_NOTIFICATION_MORE}>\n                      <DropdownTrigger asChild>\n                        <Button\n                          className=\"lb-inbox-notification-action\"\n                          onClick={handleMoreClick}\n                          onPointerDown={preventDefaultAndStopPropagation}\n                          onPointerUp={preventDefaultAndStopPropagation}\n                          aria-label={$.INBOX_NOTIFICATION_MORE}\n                        >\n                          <EllipsisIcon className=\"lb-button-icon\" />\n                        </Button>\n                      </DropdownTrigger>\n                    </Tooltip>\n                  </Dropdown>\n                </div>\n              )}\n            </div>\n            <div className=\"lb-inbox-notification-body\">{children}</div>\n          </div>\n        </Component>\n      </TooltipProvider>\n    );\n  }\n);\n\nfunction InboxNotificationIcon({\n  className,\n  ...props\n}: InboxNotificationIconProps) {\n  return (\n    <div\n      className={classNames(\"lb-inbox-notification-icon\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={classNames(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Displays a thread inbox notification.\n */\nconst InboxNotificationThread = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationThreadProps\n>(\n  (\n    {\n      inboxNotification,\n      href,\n      showRoomName = true,\n      showReactions = true,\n      showAttachments = true,\n      showActions = \"hover\",\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const $ = useOverrides(overrides);\n    const thread = useInboxNotificationThread(inboxNotification.id);\n    const currentUserId = useCurrentUserId();\n    // TODO: If you provide `href` (or plan to), we shouldn't run this hook. We should find a way to conditionally run it.\n    //       Because of batching and the fact that the same hook will be called within <Room /> in the notification's title,\n    //       it's not a big deal, the only scenario where it would be superfluous would be if the user provides their own\n    //       `href` AND disables room names in the title via `showRoomName={false}`.\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    const contents = useMemo(() => {\n      const contents = generateInboxNotificationThreadContents(\n        inboxNotification,\n        thread,\n        currentUserId ?? \"\"\n      );\n\n      if (contents.comments.length === 0 || contents.userIds.length === 0) {\n        return null;\n      }\n\n      switch (contents.type) {\n        case \"comments\": {\n          const reversedUserIds = [...contents.userIds].reverse();\n          const firstUserId = reversedUserIds[0]!;\n\n          const aside = <InboxNotificationAvatar userId={firstUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(\n            <List\n              values={reversedUserIds.map((userId) => (\n                <User key={userId} userId={userId} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1}\n              locale={$.locale}\n            />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined,\n            reversedUserIds.length\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              {contents.comments.map((comment) => (\n                <InboxNotificationComment\n                  key={comment.id}\n                  comment={comment}\n                  showHeader={contents.comments.length > 1}\n                  showAttachments={showAttachments}\n                  showReactions={showReactions}\n                  overrides={overrides}\n                />\n              ))}\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: contents.comments[contents.comments.length - 1]!.id,\n          };\n        }\n\n        case \"mention\": {\n          const mentionUserId = contents.userIds[0]!;\n          const mentionComment = contents.comments[0]!;\n\n          const aside = <InboxNotificationAvatar userId={mentionUserId} />;\n          const title = $.INBOX_NOTIFICATION_THREAD_MENTION(\n            <User key={mentionUserId} userId={mentionUserId} />,\n            showRoomName ? <Room roomId={thread.roomId} /> : undefined\n          );\n          const content = (\n            <div className=\"lb-inbox-notification-comments\">\n              <InboxNotificationComment\n                key={mentionComment.id}\n                comment={mentionComment}\n                showHeader={false}\n                showAttachments={showAttachments}\n                showReactions={showReactions}\n                overrides={overrides}\n              />\n            </div>\n          );\n\n          return {\n            unread: contents.unread,\n            date: contents.date,\n            aside,\n            title,\n            content,\n            threadId: thread.id,\n            commentId: mentionComment.id,\n          };\n        }\n\n        default:\n          return assertNever(\n            contents,\n            \"Unexpected thread inbox notification type\"\n          );\n      }\n    }, [\n      $,\n      currentUserId,\n      inboxNotification,\n      overrides,\n      showRoomName,\n      showAttachments,\n      showReactions,\n      thread,\n    ]);\n    // Add the thread ID and comment ID to the `href`.\n    // And use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? generateURL(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    if (!contents) {\n      return null;\n    }\n\n    const { aside, title, content, date, unread } = contents;\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={date}\n        unread={unread}\n        overrides={overrides}\n        href={resolvedHref}\n        showActions={showActions}\n        markAsReadOnClick={false}\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\n/**\n * Displays a text mention notification kind.\n */\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={<InboxNotificationAvatar userId={inboxNotification.createdBy} />}\n        title={$.INBOX_NOTIFICATION_TEXT_MENTION(\n          <User\n            key={inboxNotification.createdBy}\n            userId={inboxNotification.createdBy}\n          />,\n          showRoomName ? <Room roomId={inboxNotification.roomId} /> : undefined\n        )}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\n\n/**\n * Displays a custom notification kind.\n */\nconst InboxNotificationCustom = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationCustomProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      title,\n      aside,\n      children,\n      overrides,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const unread = useMemo(() => {\n      return (\n        !inboxNotification.readAt ||\n        inboxNotification.notifiedAt > inboxNotification.readAt\n      );\n    }, [inboxNotification.notifiedAt, inboxNotification.readAt]);\n\n    return (\n      <InboxNotificationLayout\n        inboxNotification={inboxNotification}\n        aside={aside}\n        title={title}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationCustomMissing = forwardRef<\n  HTMLAnchorElement,\n  Omit<InboxNotificationCustomProps, \"children\" | \"title\" | \"aside\">\n>(({ inboxNotification, ...props }, forwardedRef) => {\n  return (\n    <InboxNotificationCustom\n      inboxNotification={inboxNotification}\n      {...props}\n      title={\n        <>\n          Custom notification kind <code>{inboxNotification.kind}</code> is not\n          handled\n        </>\n      }\n      aside={\n        <InboxNotificationIcon>\n          <WarningIcon />\n        </InboxNotificationIcon>\n      }\n      ref={forwardedRef}\n      data-missing=\"\"\n    >\n      {/* TODO: Add link to the docs */}\n      Notifications of this kind won’t be displayed in production. Use the{\" \"}\n      <code>kinds</code> prop to define how they should be rendered.\n    </InboxNotificationCustom>\n  );\n});\n\n// Keeps track of which inbox notification kinds it has warned about already.\nconst inboxNotificationKindsWarnings: Set<string> = new Set();\n\n/**\n * Displays a single inbox notification.\n *\n * @example\n * <>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification\n *       key={inboxNotification.id}\n *       inboxNotification={inboxNotification}\n *       href={`/rooms/${inboxNotification.roomId}`\n *     />\n *   ))}\n * </>\n */\nexport const InboxNotification = Object.assign(\n  forwardRef<HTMLAnchorElement, InboxNotificationProps>(\n    ({ inboxNotification, kinds, ...props }, forwardedRef) => {\n      switch (inboxNotification.kind) {\n        case \"thread\": {\n          const ResolvedInboxNotificationThread =\n            kinds?.thread ?? InboxNotificationThread;\n\n          return (\n            <ResolvedInboxNotificationThread\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        case \"textMention\": {\n          const ResolvedInboxNotificationTextMention =\n            kinds?.textMention ?? InboxNotificationTextMention;\n\n          return (\n            <ResolvedInboxNotificationTextMention\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n\n        default: {\n          const ResolvedInboxNotificationCustom =\n            kinds?.[inboxNotification.kind];\n\n          if (!ResolvedInboxNotificationCustom) {\n            if (process.env.NODE_ENV !== \"production\") {\n              if (!inboxNotificationKindsWarnings.has(inboxNotification.kind)) {\n                inboxNotificationKindsWarnings.add(inboxNotification.kind);\n                // TODO: Add link to the docs\n                console.warn(\n                  `Custom notification kind \"${inboxNotification.kind}\" is not handled so notifications of this kind will not be displayed in production. Use the kinds prop to define how they should be rendered.`\n                );\n              }\n\n              return (\n                <InboxNotificationCustomMissing\n                  inboxNotification={inboxNotification}\n                  {...props}\n                  ref={forwardedRef}\n                />\n              );\n            } else {\n              // Don't render anything in production if this inbox notification kind is not defined.\n              return null;\n            }\n          }\n\n          return (\n            <ResolvedInboxNotificationCustom\n              inboxNotification={inboxNotification}\n              {...props}\n              ref={forwardedRef}\n            />\n          );\n        }\n      }\n    }\n  ),\n  {\n    Thread: InboxNotificationThread,\n    TextMention: InboxNotificationTextMention,\n    Custom: InboxNotificationCustom,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuNA;AAAgC;AAK5B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AAEA;AACE;AAAgD;AAClD;AACF;AACA;AACE;AACkB;AAClB;AACA;AACA;AACA;AACF;AAGF;AACE;AAAsB;AAGxB;AAAyC;AAErC;AACA;AAAsB;AACxB;AACC;AAGH;AACE;AACA;AACA;AAAiC;AAGnC;AACE;AAAgD;AAGlD;AACE;AAA4C;AAG9C;AAEK;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEM;AAAc;AACxB;AAAc;AACZ;AAAc;AACZ;AAAe;AACf;AAAc;AACZ;AAAe;AACb;AACW;AACV;AACU;AAGT;AACW;AACL;AAMV;AAAc;AACZ;AACO;AACQ;AACR;AAIC;AACW;AACD;AAER;AAAoB;AAIxB;AACW;AACD;AAER;AAAqB;AAG1B;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AAEb;AAAuB;AAQrC;AAAc;AAGrB;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAC8D;AACzD;AAGV;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACgE;AAC3D;AAGV;AAKA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAKA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAU;AAAQ;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AACc;AACb;AACuC;AACvC;AACA;AACA;AAMR;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAU;AAAuB;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AACqB;AACX;AACG;AACZ;AACA;AACA;AAKN;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AACS;AAC5B;AACF;AAGE;AAAO;AACL;AACA;AACF;AACJ;AACC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIF;AACE;AAEA;AAEI;AAGN;AACE;AAAO;AAGT;AAEA;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AACf;AACC;AAGP;AAGN;AAKA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACG;AAIL;AAEA;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AACwB;AACG;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACI;AACJ;AACF;AAGN;AAKA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAGP;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAKF;AAKA;AAEG;AACQ;AAOnB;AAGA;AAgBO;AAAiC;AACtC;AAEI;AAAgC;AAE5B;AAGA;AACG;AACC;AACI;AACC;AACP;AAEJ;AAGE;AAGA;AACG;AACC;AACI;AACC;AACP;AAEJ;AAGE;AAGA;AACE;AACE;AACE;AAEA;AAAQ;AACyC;AACjD;AAGF;AACG;AACC;AACI;AACC;AACP;AAIF;AAAO;AACT;AAGF;AACG;AACC;AACI;AACC;AACP;AAEJ;AACF;AACF;AACF;AACA;AACU;AACK;AACL;AACF;AACE;AAEZ;;"}

package/dist/components/InboxNotificationList.js

@@ -3,8 +3,22 @@
 
 var React = require('react');
 var classNames = require('../utils/class-names.js');
+var useVisible = require('../utils/use-visible.js');
 
-const InboxNotificationList = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
+function ReachEndMarker({
+  enabled,
+  onReachEnd
+}) {
+  const markerRef = React.useRef(null);
+  useVisible.useVisibleCallback(markerRef, onReachEnd, {
+    enabled
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: markerRef,
+    style: { height: 0 }
+  });
+}
+const InboxNotificationList = React.forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React.createElement("ol", {
     className: classNames.classNames("lb-root lb-inbox-notification-list", className),
     ...props,
@@ -12,7 +26,10 @@ const InboxNotificationList = React.forwardRef(({ children, className, ...props
   }, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("li", {
     key: index,
     className: "lb-inbox-notification-list-item"
-  }, child)));
+  }, child)), onReachEnd && /* @__PURE__ */ React.createElement(ReachEndMarker, {
+    onReachEnd,
+    enabled: React.Children.count(children) > 0
+  }));
 });
 
 exports.InboxNotificationList = InboxNotificationList;

package/dist/components/InboxNotificationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type InboxNotificationListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAmBa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMlC;;"}
+{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef, useRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useVisibleCallback(markerRef, onReachEnd, {\n    enabled,\n  });\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAaA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAA0C;AACxC;AAGF;AAAQ;AAAS;AAA8B;AACjD;AAYa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMzB;AACC;AACoC;AAK9C;;"}

package/dist/components/InboxNotificationList.mjs

@@ -1,8 +1,22 @@
 'use client';
-import React__default, { forwardRef, Children } from 'react';
+import React__default, { forwardRef, Children, useRef } from 'react';
 import { classNames } from '../utils/class-names.mjs';
+import { useVisibleCallback } from '../utils/use-visible.mjs';
 
-const InboxNotificationList = forwardRef(({ children, className, ...props }, forwardedRef) => {
+function ReachEndMarker({
+  enabled,
+  onReachEnd
+}) {
+  const markerRef = useRef(null);
+  useVisibleCallback(markerRef, onReachEnd, {
+    enabled
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: markerRef,
+    style: { height: 0 }
+  });
+}
+const InboxNotificationList = forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React__default.createElement("ol", {
     className: classNames("lb-root lb-inbox-notification-list", className),
     ...props,
@@ -10,7 +24,10 @@ const InboxNotificationList = forwardRef(({ children, className, ...props }, for
   }, Children.map(children, (child, index) => /* @__PURE__ */ React__default.createElement("li", {
     key: index,
     className: "lb-inbox-notification-list-item"
-  }, child)));
+  }, child)), onReachEnd && /* @__PURE__ */ React__default.createElement(ReachEndMarker, {
+    onReachEnd,
+    enabled: Children.count(children) > 0
+  }));
 });
 
 export { InboxNotificationList };

package/dist/components/InboxNotificationList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.mjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type InboxNotificationListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;AAmBa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMlC;;"}
+{"version":3,"file":"InboxNotificationList.mjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef, useRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useVisibleCallback(markerRef, onReachEnd, {\n    enabled,\n  });\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;AAaA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAA0C;AACxC;AAGF;AAAQ;AAAS;AAA8B;AACjD;AAYa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMzB;AACC;AACoC;AAK9C;;"}

package/dist/components/internal/InboxNotificationThread.js

@@ -61,6 +61,9 @@ function InboxNotificationComment({
   }, $.COMMENT_DELETED))));
 }
 function findLastCommentWithMentionedId(comments, mentionedId) {
+  if (!comments.length) {
+    return;
+  }
   for (let i = comments.length - 1; i >= 0; i--) {
     const comment = comments[i];
     if (comment.userId === mentionedId) {

package/dist/components/internal/InboxNotificationThread.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\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  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i];\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","classNames","User","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","CommentNonInteractiveFileAttachment","getMentionedIdsFromCommentBody"],"mappings":"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"}
+{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\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  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","classNames","User","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","CommentNonInteractiveFileAttachment","getMentionedIdsFromCommentBody"],"mappings":";;;;;;;;;;AAyCO,MAAM,sCAAyC,GAAA,EAAA;AAc/C,SAAS,wBAAyB,CAAA;AAAA,EACvC,OAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,eAAkB,GAAA,IAAA;AAAA,EAClB,aAAgB,GAAA,IAAA;AAAA,aAChBA,WAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAkC,EAAA;AAChC,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAEhC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAE,qBAAA;AAAA,MACT,kDAAA;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,GAAA,EAEH,8BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,mBAAA;AAAA,GAAA,kBACZ,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,SAAU,EAAA,mBAAA;AAAA,IAAoB,QAAQ,OAAQ,CAAA,MAAA;AAAA,GAAQ,CAC9D,mBAED,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oBAAA;AAAA,GAAA,EACZ,OAAQ,CAAA,IAAA,mBAEL,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,UAAA,EAAA;AAAA,IACC,SAAU,EAAA,iBAAA;AAAA,IACV,MAAM,OAAQ,CAAA,IAAA;AAAA,IACd,UAAY,EAAA;AAAA,MACV,OAAS,EAAAC,sBAAA;AAAA,MACT,IAAM,EAAAC,iCAAA;AAAA,KACR;AAAA,GACF,GACC,aAAiB,IAAA,OAAA,CAAQ,SAAU,CAAA,MAAA,GAAS,qBAC1C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,sBAAA;AAAA,GAAA,EACZ,OAAQ,CAAA,SAAA,CAAU,GAAI,CAAA,CAAC,6BACrB,KAAA,CAAA,aAAA,CAAAC,qCAAA,EAAA;AAAA,IACC,KAAK,QAAS,CAAA,KAAA;AAAA,IACd,QAAA;AAAA,eACAP,WAAA;AAAA,IACA,QAAQ,EAAA,IAAA;AAAA,GACV,CACD,CACH,CAED,EAAA,eAAA,IAAmB,QAAQ,WAAY,CAAA,MAAA,GAAS,oBAC9C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,wBAAA;AAAA,GAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,gBAAA;AAAA,GAAA,EACZ,OAAQ,CAAA,WAAA,CAAY,GAAI,CAAA,CAAC,+BACvB,KAAA,CAAA,aAAA,CAAAQ,2CAAA,EAAA;AAAA,IACC,KAAK,UAAW,CAAA,EAAA;AAAA,IAChB,UAAA;AAAA,eACAR,WAAA;AAAA,GACF,CACD,CACH,CACF,CACE,GAAA,IACN,oBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iBAAA;AAAA,GAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,oBAAA;AAAA,GAAA,EAAsB,CAAE,CAAA,eAAgB,CACvD,CAEJ,CACF,CAAA,CAAA;AAEJ,CAAA;AAMA,SAAS,8BAAA,CACP,UACA,WACA,EAAA;AACA,EAAI,IAAA,CAAC,SAAS,MAAQ,EAAA;AACpB,IAAA,OAAA;AAAA,GACF;AAEA,EAAA,KAAA,IAAS,IAAI,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA,CAAA,IAAK,GAAG,CAAK,EAAA,EAAA;AAC7C,IAAA,MAAM,UAAU,QAAS,CAAA,CAAA,CAAA,CAAA;AAEzB,IAAI,IAAA,OAAA,CAAQ,WAAW,WAAa,EAAA;AAClC,MAAA,SAAA;AAAA,KACF;AAEA,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAM,MAAA,YAAA,GAAeS,mCAA+B,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAEhE,MAAI,IAAA,YAAA,CAAa,QAAS,CAAA,WAAW,CAAG,EAAA;AACtC,QAAO,OAAA,OAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAEA,EAAA,OAAA;AACF,CAAA;AAEA,SAAS,uBAAuB,QAAyB,EAAA;AACvD,EAAO,OAAA,KAAA,CAAM,IAAK,CAAA,IAAI,GAAI,CAAA,QAAA,CAAS,GAAI,CAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,MAAM,CAAC,CAAC,CAAA,CAAA;AACtE,CAAA;AAEgB,SAAA,uCAAA,CACd,iBACA,EAAA,MAAA,EACA,MACiC,EAAA;AACjC,EAAA,MAAM,cAAiB,GAAA,MAAA,CAAO,QAAS,CAAA,MAAA,CAAO,CAAC,OAAY,KAAA;AACzD,IAAI,IAAA,CAAC,QAAQ,IAAM,EAAA;AACjB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAEA,IAAA,OAAO,iBAAkB,CAAA,MAAA,GACrB,OAAQ,CAAA,SAAA,GAAY,iBAAkB,CAAA,MAAA,IACpC,OAAQ,CAAA,SAAA,IAAa,iBAAkB,CAAA,UAAA,GACzC,OAAQ,CAAA,SAAA,IAAa,iBAAkB,CAAA,UAAA,CAAA;AAAA,GAC5C,CAAA,CAAA;AAGD,EAAI,IAAA,cAAA,CAAe,WAAW,CAAG,EAAA;AAC/B,IAAM,MAAA,YAAA,GAAe,MAAO,CAAA,QAAA,CACzB,MAAO,CAAA,CAAC,OAAY,KAAA,OAAA,CAAQ,IAAI,CAAA,CAChC,KAAM,CAAA,CAAC,sCAAsC,CAAA,CAAA;AAEhD,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,UAAA;AAAA,MACN,MAAQ,EAAA,KAAA;AAAA,MACR,QAAU,EAAA,YAAA;AAAA,MACV,OAAA,EAAS,uBAAuB,YAAY,CAAA;AAAA,MAC5C,MAAM,iBAAkB,CAAA,UAAA;AAAA,KAC1B,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,kBAAqB,GAAA,8BAAA;AAAA,IACzB,cAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AAGA,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,SAAA;AAAA,MACN,MAAQ,EAAA,IAAA;AAAA,MACR,QAAA,EAAU,CAAC,kBAAkB,CAAA;AAAA,MAC7B,OAAA,EAAS,CAAC,kBAAA,CAAmB,MAAM,CAAA;AAAA,MACnC,MAAM,kBAAmB,CAAA,SAAA;AAAA,KAC3B,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,qBAAqB,cAAe,CAAA,KAAA;AAAA,IACxC,CAAC,sCAAA;AAAA,GACH,CAAA;AAGA,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,UAAA;AAAA,IACN,MAAQ,EAAA,IAAA;AAAA,IACR,QAAU,EAAA,kBAAA;AAAA,IACV,OAAA,EAAS,uBAAuB,cAAc,CAAA;AAAA,IAC9C,MAAM,iBAAkB,CAAA,UAAA;AAAA,GAC1B,CAAA;AACF;;;;;;"}

package/dist/components/internal/InboxNotificationThread.mjs

@@ -59,6 +59,9 @@ function InboxNotificationComment({
   }, $.COMMENT_DELETED))));
 }
 function findLastCommentWithMentionedId(comments, mentionedId) {
+  if (!comments.length) {
+    return;
+  }
   for (let i = comments.length - 1; i >= 0; i--) {
     const comment = comments[i];
     if (comment.userId === mentionedId) {

package/dist/components/internal/InboxNotificationThread.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationThread.mjs","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\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  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i];\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["React","CommentPrimitive.Body"],"mappings":"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"}
+{"version":3,"file":"InboxNotificationThread.mjs","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\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  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["React","CommentPrimitive.Body"],"mappings":"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"}

package/dist/index.d.mts

@@ -479,7 +479,9 @@ declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificati
     Avatar: typeof InboxNotificationAvatar;
 };
 
-declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
+interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
+    onReachEnd?: () => void;
+}
 /**
  * Displays inbox notifications as a list.
  *
@@ -490,7 +492,7 @@ declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
  *   ))}
  * </InboxNotificationList>
  */
-declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const InboxNotificationList: React.ForwardRefExoticComponent<InboxNotificationListProps & React.RefAttributes<HTMLOListElement>>;
 
 interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
     /**

package/dist/index.d.ts

@@ -479,7 +479,9 @@ declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificati
     Avatar: typeof InboxNotificationAvatar;
 };
 
-declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
+interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
+    onReachEnd?: () => void;
+}
 /**
  * Displays inbox notifications as a list.
  *
@@ -490,7 +492,7 @@ declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
  *   ))}
  * </InboxNotificationList>
  */
-declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const InboxNotificationList: React.ForwardRefExoticComponent<InboxNotificationListProps & React.RefAttributes<HTMLOListElement>>;
 
 interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
     /**

package/dist/primitives/EmojiPicker/index.js

@@ -80,6 +80,9 @@ function EmojiPickerRoot({
         }
         case "right": {
           const currentRow = data.rows[selectedRowIndex];
+          if (!currentRow) {
+            return;
+          }
           if (selectedColumnIndex === currentRow.length - 1) {
             const nextRowIndex = selectedRowIndex + 1;
             const nextRow = data.rows[nextRowIndex];
@@ -432,20 +435,28 @@ const EmojiPickerContent = React.forwardRef(
       },
       groupCounts: data.categoriesRowCounts,
       groupContent: (groupIndex) => {
+        const category = data.categories[groupIndex];
+        if (!category) {
+          return null;
+        }
         return /* @__PURE__ */ React.createElement(CategoryHeader, {
-          category: data.categories[groupIndex]
+          category
         });
       },
       itemContent: (rowIndex, groupIndex) => {
-        const categoryRowIndex = data.categoriesRowIndices[groupIndex].indexOf(rowIndex);
+        const categoryRow = data.rows[rowIndex];
+        const categoryRowIndex = data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);
         const categoryRowsCount = data.categoriesRowCounts[groupIndex];
+        if (categoryRow === void 0 || categoryRowIndex === void 0 || categoryRowsCount === void 0) {
+          return null;
+        }
         return /* @__PURE__ */ React.createElement(Row, {
           attributes: {
             rowIndex,
             categoryRowIndex,
             categoryRowsCount
           }
-        }, data.rows[rowIndex].map((emoji, columnIndex) => {
+        }, categoryRow.map((emoji, columnIndex) => {
           const isSelected = interaction !== "none" && selectedColumnIndex === columnIndex && selectedRowIndex === rowIndex;
           return /* @__PURE__ */ React.createElement(Emoji, {
             key: emoji.emoji,