@liveblocks/react-ui 3.1.1-prismic1 → 3.1.2-url1

package/dist/components/InboxNotification.cjs

@@ -19,7 +19,6 @@ var overrides = require('../overrides.cjs');
 var Timestamp = require('../primitives/Timestamp.cjs');
 var shared = require('../shared.cjs');
 var cn = require('../utils/cn.cjs');
-var url = require('../utils/url.cjs');
 var Avatar = require('./internal/Avatar.cjs');
 var Button = require('./internal/Button.cjs');
 var CodeBlock = require('./internal/CodeBlock.cjs');
@@ -337,7 +336,7 @@ const InboxNotificationThread = react.forwardRef(
     ]);
     const resolvedHref = react.useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? url.generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
+      return resolvedHref2 ? core.generateUrl(resolvedHref2, void 0, contents?.commentId) : void 0;
     }, [contents?.commentId, href, info?.url]);
     const handleSubscribeChange = react.useCallback(() => {
       if (subscriptionStatus === "subscribed") {
@@ -388,7 +387,7 @@ const InboxNotificationTextMention = react.forwardRef(
     const { info } = react$1.useRoomInfo(inboxNotification.roomId);
     const resolvedHref = react.useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? url.generateURL(resolvedHref2) : void 0;
+      return resolvedHref2 ? core.sanitizeUrl(resolvedHref2) ?? void 0 : void 0;
     }, [href, info?.url]);
     const unread = react.useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;

package/dist/components/InboxNotification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotification.cjs","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 { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\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 { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\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  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { generateURL } from \"../utils/url\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\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 &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      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 InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\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  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\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      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\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={cn(\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                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\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                          icon={<EllipsisIcon />}\n                        />\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 className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\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 {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\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    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\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        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref ? generateURL(resolvedHref) : undefined;\n    }, [href, info?.url]);\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        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\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 InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\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        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\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    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkPA;AAAgC;AAK5B;AACE;AACA;AACA;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;AACG;AACE;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAAU;AAAc;AAA+B;AAAM;AAC7D;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AAAe;AAA+B;AAAM;AACpD;AAAc;AACZ;AAAe;AACd;AAAC;AACW;AACV;AACU;AACZ;AAEG;AACW;AACL;AACP;AAAA;AAEJ;AACF;AAEG;AAAc;AACZ;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEE;AACW;AACD;AACQ;AAEd;AAEH;AACH;AACW;AACD;AACS;AAEf;AACL;AACC;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AACM;AACtB;AACF;AACF;AACF;AACF;AAAA;AAEJ;AACC;AAAc;AAA8B;AAAS;AAAA;AACxD;AAAA;AACF;AACF;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAAyD;AAAO;AAErE;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACwD;AACnD;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAkB;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AAEC;AACuC;AACvC;AACA;AACA;AAEH;AAIL;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAiC;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AAEU;AACG;AACZ;AACA;AACA;AACF;AAIJ;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;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEhB;AACW;AACD;AAKK;AAMR;AACR;AAEE;AACC;AAEJ;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAAkD;AAGpD;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AAE2B;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAwB;AAAG;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEd;AACO;AACyC;AACjD;AACF;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAEF;AAAE;AAAA;AAC0B;AAAwB;AAAK;AAAO;AAAA;AAEhE;AAGC;AACc;AACf;AAEG;AACQ;AAEqB;AAAA;AACmC;AACpE;AAAK;AAAK;AAAO;AAAA;AAGxB;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;AAIU;AAKK;AAKL;AAaG;AACL;AACE;AAEZ;;"}
+{"version":3,"file":"InboxNotification.cjs","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 {\n  assertNever,\n  console,\n  generateUrl,\n  sanitizeUrl,\n} from \"@liveblocks/core\";\nimport {\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\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 { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\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  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\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 &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      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 InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\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  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\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      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\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={cn(\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                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\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                          icon={<EllipsisIcon />}\n                        />\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 className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\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 {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\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    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\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        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\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        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\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 InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\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        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\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    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsPA;AAAgC;AAK5B;AACE;AACA;AACA;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;AACG;AACE;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAAU;AAAc;AAA+B;AAAM;AAC7D;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AAAe;AAA+B;AAAM;AACpD;AAAc;AACZ;AAAe;AACd;AAAC;AACW;AACV;AACU;AACZ;AAEG;AACW;AACL;AACP;AAAA;AAEJ;AACF;AAEG;AAAc;AACZ;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEE;AACW;AACD;AACQ;AAEd;AAEH;AACH;AACW;AACD;AACS;AAEf;AACL;AACC;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AACM;AACtB;AACF;AACF;AACF;AACF;AAAA;AAEJ;AACC;AAAc;AAA8B;AAAS;AAAA;AACxD;AAAA;AACF;AACF;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAAyD;AAAO;AAErE;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACwD;AACnD;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAkB;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AAEC;AACuC;AACvC;AACA;AACA;AAEH;AAIL;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAiC;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AAEU;AACG;AACZ;AACA;AACA;AACF;AAIJ;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;AAGF;AACE;AAEA;AAGI;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEhB;AACW;AACD;AAKK;AAMR;AACR;AAEE;AACC;AAEJ;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AAE2B;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAwB;AAAG;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEd;AACO;AACyC;AACjD;AACF;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAEF;AAAE;AAAA;AAC0B;AAAwB;AAAK;AAAO;AAAA;AAEhE;AAGC;AACc;AACf;AAEG;AACQ;AAEqB;AAAA;AACmC;AACpE;AAAK;AAAK;AAAO;AAAA;AAGxB;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;AAIU;AAKK;AAKL;AAaG;AACL;AACE;AAEZ;;"}

package/dist/components/InboxNotification.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { assertNever, console } from '@liveblocks/core';
+import { assertNever, generateUrl, sanitizeUrl, console } from '@liveblocks/core';
 import { useMarkInboxNotificationAsRead, useDeleteInboxNotification, useInboxNotificationThread, useRoomInfo } from '@liveblocks/react';
 import { useRoomThreadSubscription } from '@liveblocks/react/_private';
 import { Slot } from '@radix-ui/react-slot';
@@ -17,7 +17,6 @@ import { useOverrides } from '../overrides.js';
 import { Timestamp } from '../primitives/Timestamp.js';
 import { useCurrentUserId } from '../shared.js';
 import { cn } from '../utils/cn.js';
-import { generateURL } from '../utils/url.js';
 import { Avatar } from './internal/Avatar.js';
 import { Button } from './internal/Button.js';
 import { CodeBlock } from './internal/CodeBlock.js';
@@ -335,7 +334,7 @@ const InboxNotificationThread = forwardRef(
     ]);
     const resolvedHref = useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
+      return resolvedHref2 ? generateUrl(resolvedHref2, void 0, contents?.commentId) : void 0;
     }, [contents?.commentId, href, info?.url]);
     const handleSubscribeChange = useCallback(() => {
       if (subscriptionStatus === "subscribed") {
@@ -386,7 +385,7 @@ const InboxNotificationTextMention = forwardRef(
     const { info } = useRoomInfo(inboxNotification.roomId);
     const resolvedHref = useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
-      return resolvedHref2 ? generateURL(resolvedHref2) : void 0;
+      return resolvedHref2 ? sanitizeUrl(resolvedHref2) ?? void 0 : void 0;
     }, [href, info?.url]);
     const unread = useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;

package/dist/components/InboxNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotification.js","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 { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\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 { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\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  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { generateURL } from \"../utils/url\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\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 &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      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 InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\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  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\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      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\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={cn(\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                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\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                          icon={<EllipsisIcon />}\n                        />\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 className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\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 {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\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    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\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        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref ? generateURL(resolvedHref) : undefined;\n    }, [href, info?.url]);\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        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\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 InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\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        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\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    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkPA;AAAgC;AAK5B;AACE;AACA;AACA;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;AACG;AACE;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAAU;AAAc;AAA+B;AAAM;AAC7D;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AAAe;AAA+B;AAAM;AACpD;AAAc;AACZ;AAAe;AACd;AAAC;AACW;AACV;AACU;AACZ;AAEG;AACW;AACL;AACP;AAAA;AAEJ;AACF;AAEG;AAAc;AACZ;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEE;AACW;AACD;AACQ;AAEd;AAEH;AACH;AACW;AACD;AACS;AAEf;AACL;AACC;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AACM;AACtB;AACF;AACF;AACF;AACF;AAAA;AAEJ;AACC;AAAc;AAA8B;AAAS;AAAA;AACxD;AAAA;AACF;AACF;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAAyD;AAAO;AAErE;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACwD;AACnD;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAkB;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AAEC;AACuC;AACvC;AACA;AACA;AAEH;AAIL;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAiC;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AAEU;AACG;AACZ;AACA;AACA;AACF;AAIJ;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;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEhB;AACW;AACD;AAKK;AAMR;AACR;AAEE;AACC;AAEJ;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAAkD;AAGpD;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AAE2B;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAwB;AAAG;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEd;AACO;AACyC;AACjD;AACF;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAEF;AAAE;AAAA;AAC0B;AAAwB;AAAK;AAAO;AAAA;AAEhE;AAGC;AACc;AACf;AAEG;AACQ;AAEqB;AAAA;AACmC;AACpE;AAAK;AAAK;AAAO;AAAA;AAGxB;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;AAIU;AAKK;AAKL;AAaG;AACL;AACE;AAEZ;;"}
+{"version":3,"file":"InboxNotification.js","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 {\n  assertNever,\n  console,\n  generateUrl,\n  sanitizeUrl,\n} from \"@liveblocks/core\";\nimport {\n  useDeleteInboxNotification,\n  useInboxNotificationThread,\n  useMarkInboxNotificationAsRead,\n  useRoomInfo,\n} from \"@liveblocks/react\";\nimport { useRoomThreadSubscription } from \"@liveblocks/react/_private\";\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 { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { useComponents } from \"../components\";\nimport { BellIcon } from \"../icons/Bell\";\nimport { BellCrossedIcon } from \"../icons/BellCrossed\";\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  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives/Timestamp\";\nimport { useCurrentUserId } from \"../shared\";\nimport type { SlotProp } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport { Avatar, type AvatarProps } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\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 &\n      InboxNotificationOverrides &\n      ThreadOverrides &\n      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 InboxNotificationInspectorProps\n  extends Omit<InboxNotificationProps, \"kinds\" | \"children\">,\n    InboxNotificationSharedProps {\n  /**\n   * The inbox notification to display.\n   */\n  inboxNotification: InboxNotificationData;\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  /**\n   * @internal\n   */\n  additionalDropdownItemsBefore?: ReactNode;\n\n  /**\n   * @internal\n   */\n  additionalDropdownItemsAfter?: ReactNode;\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      additionalDropdownItemsBefore,\n      additionalDropdownItemsAfter,\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={cn(\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                        {additionalDropdownItemsBefore}\n                        {unread ? (\n                          <DropdownItem\n                            onSelect={handleMarkAsRead}\n                            onClick={stopPropagation}\n                            icon={<CheckIcon />}\n                          >\n                            {$.INBOX_NOTIFICATION_MARK_AS_READ}\n                          </DropdownItem>\n                        ) : null}\n                        <DropdownItem\n                          onSelect={handleDelete}\n                          onClick={stopPropagation}\n                          icon={<DeleteIcon />}\n                        >\n                          {$.INBOX_NOTIFICATION_DELETE}\n                        </DropdownItem>\n                        {additionalDropdownItemsAfter}\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                          icon={<EllipsisIcon />}\n                        />\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 className={cn(\"lb-inbox-notification-icon\", className)} {...props} />\n  );\n}\n\nfunction InboxNotificationAvatar({\n  className,\n  ...props\n}: InboxNotificationAvatarProps) {\n  return (\n    <Avatar\n      className={cn(\"lb-inbox-notification-avatar\", className)}\n      {...props}\n    />\n  );\n}\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 {\n      status: subscriptionStatus,\n      subscribe,\n      unsubscribe,\n    } = useRoomThreadSubscription(thread.roomId, thread.id);\n    const currentUserId = useCurrentUserId();\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    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? // Set the comment ID as the URL hash.\n          generateUrl(resolvedHref, undefined, contents?.commentId)\n        : undefined;\n    }, [contents?.commentId, href, info?.url]);\n\n    const handleSubscribeChange = useCallback(() => {\n      if (subscriptionStatus === \"subscribed\") {\n        unsubscribe();\n      } else {\n        subscribe();\n      }\n    }, [subscriptionStatus, subscribe, unsubscribe]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\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        additionalDropdownItemsBefore={\n          <DropdownItem\n            onSelect={handleSubscribeChange}\n            onClick={stopPropagation}\n            icon={\n              subscriptionStatus === \"subscribed\" ? (\n                <BellCrossedIcon />\n              ) : (\n                <BellIcon />\n              )\n            }\n          >\n            {subscriptionStatus === \"subscribed\"\n              ? $.THREAD_UNSUBSCRIBE\n              : $.THREAD_SUBSCRIBE}\n          </DropdownItem>\n        }\n        {...props}\n        ref={forwardedRef}\n      >\n        {content}\n      </InboxNotificationLayout>\n    );\n  }\n);\n\nconst InboxNotificationTextMention = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationTextMentionProps\n>(\n  (\n    {\n      inboxNotification,\n      showActions = \"hover\",\n      showRoomName = true,\n      href,\n      overrides,\n      ...props\n    },\n    ref\n  ) => {\n    const $ = useOverrides(overrides);\n    const { info } = useRoomInfo(inboxNotification.roomId);\n    // Use URL from `resolveRoomsInfo` if `href` isn't set.\n    const resolvedHref = useMemo(() => {\n      const resolvedHref = href ?? info?.url;\n\n      return resolvedHref\n        ? (sanitizeUrl(resolvedHref) ?? undefined)\n        : undefined;\n    }, [href, info?.url]);\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        href={resolvedHref}\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n);\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 InboxNotificationInspector = forwardRef<\n  HTMLAnchorElement,\n  InboxNotificationInspectorProps\n>(\n  (\n    { inboxNotification, showActions = \"hover\", overrides, ...props },\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        title={<code>{inboxNotification.id}</code>}\n        date={inboxNotification.notifiedAt}\n        unread={unread}\n        overrides={overrides}\n        showActions={showActions}\n        {...props}\n        ref={forwardedRef}\n        data-inspector=\"\"\n      >\n        <CodeBlock\n          title=\"Data\"\n          code={JSON.stringify(inboxNotification, null, 2)}\n        />\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    /**\n     * Displays a thread inbox notification kind.\n     */\n    Thread: InboxNotificationThread,\n\n    /**\n     * Displays a text mention inbox notification kind.\n     */\n    TextMention: InboxNotificationTextMention,\n\n    /**\n     * Displays a custom inbox notification kind.\n     */\n    Custom: InboxNotificationCustom,\n\n    /**\n     * Display the inbox notification's data, which can be useful during development.\n     *\n     * @example\n     * <InboxNotification\n     *   inboxNotification={inboxNotification}\n     *   kinds={{\n     *     $custom: InboxNotification.Inspector,\n     *   }}\n     * />\n     */\n    Inspector: InboxNotificationInspector,\n    Icon: InboxNotificationIcon,\n    Avatar: InboxNotificationAvatar,\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsPA;AAAgC;AAK5B;AACE;AACA;AACA;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;AACG;AACE;AACY;AACT;AAEE;AACkB;AACpB;AACF;AACO;AACoB;AACE;AACpB;AACT;AACI;AACC;AAEJ;AAAU;AAAc;AAA+B;AAAM;AAC7D;AAAc;AACb;AAAC;AAAc;AACb;AAAC;AAAe;AAA+B;AAAM;AACpD;AAAc;AACZ;AAAe;AACd;AAAC;AACW;AACV;AACU;AACZ;AAEG;AACW;AACL;AACP;AAAA;AAEJ;AACF;AAEG;AAAc;AACZ;AACO;AACQ;AACR;AAEJ;AACG;AAAA;AAEE;AACW;AACD;AACQ;AAEd;AAEH;AACH;AACW;AACD;AACS;AAEf;AACL;AACC;AAAA;AACH;AAGD;AAAmB;AACjB;AAAuB;AACrB;AACW;AACD;AACM;AACF;AACC;AACM;AACtB;AACF;AACF;AACF;AACF;AAAA;AAEJ;AACC;AAAc;AAA8B;AAAS;AAAA;AACxD;AAAA;AACF;AACF;AAGN;AAEA;AAA+B;AAC7B;AAEF;AACE;AACG;AAAyD;AAAO;AAErE;AAEA;AAAiC;AAC/B;AAEF;AACE;AACG;AACwD;AACnD;AAGV;AAEA;AAAgC;AAK5B;AACE;AACA;AACe;AACC;AACE;AACJ;AACd;AACG;AAIL;AACA;AACA;AAAM;AACI;AACR;AACA;AAEF;AACA;AACA;AACE;AAAiB;AACf;AACA;AACiB;AAGnB;AACE;AAAO;AAGT;AAAuB;AAEnB;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAEI;AAAkB;AAA2B;AAC/C;AACkB;AACgC;AACzC;AACZ;AACgB;AAAoB;AAAa;AACjC;AAElB;AACG;AAAc;AAEV;AAEC;AACuC;AACvC;AACA;AACA;AAEH;AAIL;AAAO;AACY;AACF;AACf;AACA;AACA;AACiB;AAC2C;AAC9D;AACF;AAGE;AACA;AAEA;AAAe;AAAgC;AAC/C;AAAgB;AACb;AAAiC;AAAe;AACjC;AAAoB;AAAa;AAEnD;AACG;AAAc;AACZ;AAEU;AACG;AACZ;AACA;AACA;AACF;AAIJ;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;AAGF;AACE;AAEA;AAGI;AAGN;AACE;AACE;AAAY;AAEZ;AAAU;AACZ;AAGF;AACE;AAAsB;AAGxB;AACE;AAAO;AAGT;AAEA;AACG;AACC;AACA;AACA;AACA;AACA;AACA;AACM;AACN;AACmB;AAEhB;AACW;AACD;AAKK;AAMR;AACR;AAEE;AACC;AAEJ;AACH;AAGN;AAEA;AAAqC;AAKjC;AACE;AACc;AACC;AACf;AACA;AACG;AAIL;AACA;AAEA;AACE;AAEA;AAEI;AAGN;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAkD;AAAW;AAC5D;AACN;AAE2B;AAC5B;AACgB;AAA+B;AAAa;AAC9D;AACwB;AACxB;AACA;AACA;AACM;AACF;AACJ;AACF;AAGN;AAEA;AAAgC;AAK5B;AACE;AACc;AACd;AACA;AACA;AACA;AACG;AAIL;AACE;AAEmD;AAIrD;AACG;AACC;AACA;AACA;AACwB;AACxB;AACA;AACA;AACI;AACC;AAEJ;AACH;AAGN;AAEA;AAAmC;AAQ/B;AACE;AAEmD;AAIrD;AACG;AACC;AACQ;AAAwB;AAAG;AACX;AACxB;AACA;AACA;AACI;AACC;AACU;AAEd;AACO;AACyC;AACjD;AACF;AAGN;AAEA;AAIE;AACG;AACC;AACI;AAEF;AAAE;AAAA;AAC0B;AAAwB;AAAK;AAAO;AAAA;AAEhE;AAGC;AACc;AACf;AAEG;AACQ;AAEqB;AAAA;AACmC;AACpE;AAAK;AAAK;AAAO;AAAA;AAGxB;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;AAIU;AAKK;AAKL;AAaG;AACL;AACE;AAEZ;;"}

package/dist/components/internal/AiChatAssistantMessage.cjs

@@ -143,7 +143,7 @@ function ToolInvocationPart({
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: "lb-ai-chat-message-tool-invocation",
     children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
-      fallback: process.env.NODE_ENV !== "production" ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "lb-ai-chat-message-error",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
@@ -160,7 +160,7 @@ function ToolInvocationPart({
             ]
           })
         ]
-      }) : null,
+      }),
       children: /* @__PURE__ */ jsxRuntime.jsx(toolInvocation.AiMessageToolInvocation, {
         part,
         message

package/dist/components/internal/AiChatAssistantMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiChatAssistantMessage.cjs","sources":["../../../src/components/internal/AiChatAssistantMessage.tsx"],"sourcesContent":["import type { AiAssistantMessage, WithNavigation } from \"@liveblocks/core\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  memo,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { ComponentsProvider, type GlobalComponents } from \"../../components\";\nimport { ChevronRightIcon } from \"../../icons/ChevronRight\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport {\n  type AiChatMessageOverrides,\n  type GlobalOverrides,\n  OverridesProvider,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiMessage from \"../../primitives/AiMessage\";\nimport { AiMessageToolInvocation } from \"../../primitives/AiMessage/tool-invocation\";\nimport type {\n  AiMessageContentReasoningPartProps,\n  AiMessageContentTextPartProps,\n  AiMessageContentToolInvocationPartProps,\n} from \"../../primitives/AiMessage/types\";\nimport * as Collapsible from \"../../primitives/Collapsible\";\nimport { cn } from \"../../utils/cn\";\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Prose } from \"./Prose\";\n\ntype UiAssistantMessage = WithNavigation<AiAssistantMessage>;\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatAssistantMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatAssistantMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiAssistantMessage;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport const AiChatAssistantMessage = memo(\n  forwardRef<HTMLDivElement, AiChatAssistantMessageProps>(\n    ({ message, className, overrides, components, ...props }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n\n      let children: ReactNode = null;\n\n      if (message.deletedAt !== undefined) {\n        children = (\n          <div className=\"lb-ai-chat-message-deleted\">\n            {$.AI_CHAT_MESSAGE_DELETED}\n          </div>\n        );\n      } else if (\n        message.status === \"generating\" ||\n        message.status === \"awaiting-tool\"\n      ) {\n        if (message.contentSoFar.length === 0) {\n          children = (\n            <div className=\"lb-ai-chat-message-thinking lb-ai-chat-pending\">\n              {$.AI_CHAT_MESSAGE_THINKING}\n            </div>\n          );\n        } else {\n          children = <AssistantMessageContent message={message} />;\n        }\n      } else if (message.status === \"completed\") {\n        children = <AssistantMessageContent message={message} />;\n      } else if (message.status === \"failed\") {\n        // Do not include the error message if the user aborted the request.\n        if (message.errorReason === \"Aborted by user\") {\n          children = <AssistantMessageContent message={message} />;\n        } else {\n          children = (\n            <>\n              <AssistantMessageContent message={message} />\n\n              <div className=\"lb-ai-chat-message-error\">\n                <span className=\"lb-icon-container\">\n                  <WarningIcon />\n                </span>\n                {message.errorReason}\n              </div>\n            </>\n          );\n        }\n      }\n\n      return (\n        <div\n          className={cn(\n            \"lb-ai-chat-message lb-ai-chat-assistant-message\",\n            className\n          )}\n          {...props}\n          ref={forwardedRef}\n        >\n          <OverridesProvider overrides={overrides}>\n            <ComponentsProvider components={components}>\n              {children}\n            </ComponentsProvider>\n          </OverridesProvider>\n        </div>\n      );\n    }\n  )\n);\n\nfunction AssistantMessageContent({ message }: { message: UiAssistantMessage }) {\n  return (\n    <AiMessage.Content\n      message={message}\n      components={{\n        TextPart,\n        ReasoningPart,\n        ToolInvocationPart,\n      }}\n      className=\"lb-ai-chat-message-content\"\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TextPart\n * -----------------------------------------------------------------------------------------------*/\nfunction TextPart({ part }: AiMessageContentTextPartProps) {\n  return <Prose content={part.text} className=\"lb-ai-chat-message-text\" />;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ReasoningPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ReasoningPart({\n  part,\n  isStreaming,\n}: AiMessageContentReasoningPartProps) {\n  // Start collapsed if reasoning is already done.\n  const [isOpen, setIsOpen] = useState(isStreaming);\n  const $ = useOverrides();\n\n  // Auto-collapse when reasoning is done, while still allowing the user to\n  // open/collapse it manually during and after it's done.\n  useEffect(() => {\n    if (!isStreaming) {\n      setIsOpen(false);\n    }\n  }, [isStreaming]);\n\n  return (\n    <Collapsible.Root\n      className=\"lb-collapsible lb-ai-chat-message-reasoning\"\n      open={isOpen}\n      onOpenChange={setIsOpen}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          \"lb-collapsible-trigger\",\n          isStreaming && \"lb-ai-chat-pending\"\n        )}\n      >\n        {/* TODO: Show duration as \"Reasoned for x seconds\"? */}\n        {$.AI_CHAT_MESSAGE_REASONING(isStreaming)}\n        <span className=\"lb-collapsible-chevron lb-icon-container\">\n          <ChevronRightIcon />\n        </span>\n      </Collapsible.Trigger>\n\n      <Collapsible.Content className=\"lb-collapsible-content\">\n        <Prose content={part.text} />\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ToolInvocationPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ToolInvocationPart({\n  part,\n  message,\n}: AiMessageContentToolInvocationPartProps) {\n  return (\n    <div className=\"lb-ai-chat-message-tool-invocation\">\n      <ErrorBoundary\n        fallback={\n          process.env.NODE_ENV !== \"production\" ? (\n            <div className=\"lb-ai-chat-message-error\">\n              <span className=\"lb-icon-container\">\n                <WarningIcon />\n              </span>\n              <p>\n                Failed to render tool call result for <code>{part.name}</code>.\n                See console for details.\n              </p>\n            </div>\n          ) : null\n        }\n      >\n        <AiMessageToolInvocation part={part} message={message} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["memo","forwardRef","overrides","components","useOverrides","jsx","jsxs","Fragment","WarningIcon","cn","OverridesProvider","ComponentsProvider","AiMessage.Content","Prose","useState","useEffect","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","Collapsible.Content","ErrorBoundary","AiMessageToolInvocation"],"mappings":"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"}
+{"version":3,"file":"AiChatAssistantMessage.cjs","sources":["../../../src/components/internal/AiChatAssistantMessage.tsx"],"sourcesContent":["import type { AiAssistantMessage, WithNavigation } from \"@liveblocks/core\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  memo,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { ComponentsProvider, type GlobalComponents } from \"../../components\";\nimport { ChevronRightIcon } from \"../../icons/ChevronRight\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport {\n  type AiChatMessageOverrides,\n  type GlobalOverrides,\n  OverridesProvider,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiMessage from \"../../primitives/AiMessage\";\nimport { AiMessageToolInvocation } from \"../../primitives/AiMessage/tool-invocation\";\nimport type {\n  AiMessageContentReasoningPartProps,\n  AiMessageContentTextPartProps,\n  AiMessageContentToolInvocationPartProps,\n} from \"../../primitives/AiMessage/types\";\nimport * as Collapsible from \"../../primitives/Collapsible\";\nimport { cn } from \"../../utils/cn\";\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Prose } from \"./Prose\";\n\ntype UiAssistantMessage = WithNavigation<AiAssistantMessage>;\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatAssistantMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatAssistantMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiAssistantMessage;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport const AiChatAssistantMessage = memo(\n  forwardRef<HTMLDivElement, AiChatAssistantMessageProps>(\n    ({ message, className, overrides, components, ...props }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n\n      let children: ReactNode = null;\n\n      if (message.deletedAt !== undefined) {\n        children = (\n          <div className=\"lb-ai-chat-message-deleted\">\n            {$.AI_CHAT_MESSAGE_DELETED}\n          </div>\n        );\n      } else if (\n        message.status === \"generating\" ||\n        message.status === \"awaiting-tool\"\n      ) {\n        if (message.contentSoFar.length === 0) {\n          children = (\n            <div className=\"lb-ai-chat-message-thinking lb-ai-chat-pending\">\n              {$.AI_CHAT_MESSAGE_THINKING}\n            </div>\n          );\n        } else {\n          children = <AssistantMessageContent message={message} />;\n        }\n      } else if (message.status === \"completed\") {\n        children = <AssistantMessageContent message={message} />;\n      } else if (message.status === \"failed\") {\n        // Do not include the error message if the user aborted the request.\n        if (message.errorReason === \"Aborted by user\") {\n          children = <AssistantMessageContent message={message} />;\n        } else {\n          children = (\n            <>\n              <AssistantMessageContent message={message} />\n\n              <div className=\"lb-ai-chat-message-error\">\n                <span className=\"lb-icon-container\">\n                  <WarningIcon />\n                </span>\n                {message.errorReason}\n              </div>\n            </>\n          );\n        }\n      }\n\n      return (\n        <div\n          className={cn(\n            \"lb-ai-chat-message lb-ai-chat-assistant-message\",\n            className\n          )}\n          {...props}\n          ref={forwardedRef}\n        >\n          <OverridesProvider overrides={overrides}>\n            <ComponentsProvider components={components}>\n              {children}\n            </ComponentsProvider>\n          </OverridesProvider>\n        </div>\n      );\n    }\n  )\n);\n\nfunction AssistantMessageContent({ message }: { message: UiAssistantMessage }) {\n  return (\n    <AiMessage.Content\n      message={message}\n      components={{\n        TextPart,\n        ReasoningPart,\n        ToolInvocationPart,\n      }}\n      className=\"lb-ai-chat-message-content\"\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TextPart\n * -----------------------------------------------------------------------------------------------*/\nfunction TextPart({ part }: AiMessageContentTextPartProps) {\n  return <Prose content={part.text} className=\"lb-ai-chat-message-text\" />;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ReasoningPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ReasoningPart({\n  part,\n  isStreaming,\n}: AiMessageContentReasoningPartProps) {\n  // Start collapsed if reasoning is already done.\n  const [isOpen, setIsOpen] = useState(isStreaming);\n  const $ = useOverrides();\n\n  // Auto-collapse when reasoning is done, while still allowing the user to\n  // open/collapse it manually during and after it's done.\n  useEffect(() => {\n    if (!isStreaming) {\n      setIsOpen(false);\n    }\n  }, [isStreaming]);\n\n  return (\n    <Collapsible.Root\n      className=\"lb-collapsible lb-ai-chat-message-reasoning\"\n      open={isOpen}\n      onOpenChange={setIsOpen}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          \"lb-collapsible-trigger\",\n          isStreaming && \"lb-ai-chat-pending\"\n        )}\n      >\n        {/* TODO: Show duration as \"Reasoned for x seconds\"? */}\n        {$.AI_CHAT_MESSAGE_REASONING(isStreaming)}\n        <span className=\"lb-collapsible-chevron lb-icon-container\">\n          <ChevronRightIcon />\n        </span>\n      </Collapsible.Trigger>\n\n      <Collapsible.Content className=\"lb-collapsible-content\">\n        <Prose content={part.text} />\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ToolInvocationPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ToolInvocationPart({\n  part,\n  message,\n}: AiMessageContentToolInvocationPartProps) {\n  return (\n    <div className=\"lb-ai-chat-message-tool-invocation\">\n      <ErrorBoundary\n        fallback={\n          <div className=\"lb-ai-chat-message-error\">\n            <span className=\"lb-icon-container\">\n              <WarningIcon />\n            </span>\n            <p>\n              Failed to render tool call result for <code>{part.name}</code>.\n              See console for details.\n            </p>\n          </div>\n        }\n      >\n        <AiMessageToolInvocation part={part} message={message} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["memo","forwardRef","overrides","components","useOverrides","jsx","jsxs","Fragment","WarningIcon","cn","OverridesProvider","ComponentsProvider","AiMessage.Content","Prose","useState","useEffect","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","Collapsible.Content","ErrorBoundary","AiMessageToolInvocation"],"mappings":"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"}

package/dist/components/internal/AiChatAssistantMessage.js

@@ -141,7 +141,7 @@ function ToolInvocationPart({
   return /* @__PURE__ */ jsx("div", {
     className: "lb-ai-chat-message-tool-invocation",
     children: /* @__PURE__ */ jsx(ErrorBoundary, {
-      fallback: process.env.NODE_ENV !== "production" ? /* @__PURE__ */ jsxs("div", {
+      fallback: /* @__PURE__ */ jsxs("div", {
         className: "lb-ai-chat-message-error",
         children: [
           /* @__PURE__ */ jsx("span", {
@@ -158,7 +158,7 @@ function ToolInvocationPart({
             ]
           })
         ]
-      }) : null,
+      }),
       children: /* @__PURE__ */ jsx(AiMessageToolInvocation, {
         part,
         message

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

@@ -1 +1 @@
-{"version":3,"file":"AiChatAssistantMessage.js","sources":["../../../src/components/internal/AiChatAssistantMessage.tsx"],"sourcesContent":["import type { AiAssistantMessage, WithNavigation } from \"@liveblocks/core\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  memo,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { ComponentsProvider, type GlobalComponents } from \"../../components\";\nimport { ChevronRightIcon } from \"../../icons/ChevronRight\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport {\n  type AiChatMessageOverrides,\n  type GlobalOverrides,\n  OverridesProvider,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiMessage from \"../../primitives/AiMessage\";\nimport { AiMessageToolInvocation } from \"../../primitives/AiMessage/tool-invocation\";\nimport type {\n  AiMessageContentReasoningPartProps,\n  AiMessageContentTextPartProps,\n  AiMessageContentToolInvocationPartProps,\n} from \"../../primitives/AiMessage/types\";\nimport * as Collapsible from \"../../primitives/Collapsible\";\nimport { cn } from \"../../utils/cn\";\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Prose } from \"./Prose\";\n\ntype UiAssistantMessage = WithNavigation<AiAssistantMessage>;\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatAssistantMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatAssistantMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiAssistantMessage;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport const AiChatAssistantMessage = memo(\n  forwardRef<HTMLDivElement, AiChatAssistantMessageProps>(\n    ({ message, className, overrides, components, ...props }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n\n      let children: ReactNode = null;\n\n      if (message.deletedAt !== undefined) {\n        children = (\n          <div className=\"lb-ai-chat-message-deleted\">\n            {$.AI_CHAT_MESSAGE_DELETED}\n          </div>\n        );\n      } else if (\n        message.status === \"generating\" ||\n        message.status === \"awaiting-tool\"\n      ) {\n        if (message.contentSoFar.length === 0) {\n          children = (\n            <div className=\"lb-ai-chat-message-thinking lb-ai-chat-pending\">\n              {$.AI_CHAT_MESSAGE_THINKING}\n            </div>\n          );\n        } else {\n          children = <AssistantMessageContent message={message} />;\n        }\n      } else if (message.status === \"completed\") {\n        children = <AssistantMessageContent message={message} />;\n      } else if (message.status === \"failed\") {\n        // Do not include the error message if the user aborted the request.\n        if (message.errorReason === \"Aborted by user\") {\n          children = <AssistantMessageContent message={message} />;\n        } else {\n          children = (\n            <>\n              <AssistantMessageContent message={message} />\n\n              <div className=\"lb-ai-chat-message-error\">\n                <span className=\"lb-icon-container\">\n                  <WarningIcon />\n                </span>\n                {message.errorReason}\n              </div>\n            </>\n          );\n        }\n      }\n\n      return (\n        <div\n          className={cn(\n            \"lb-ai-chat-message lb-ai-chat-assistant-message\",\n            className\n          )}\n          {...props}\n          ref={forwardedRef}\n        >\n          <OverridesProvider overrides={overrides}>\n            <ComponentsProvider components={components}>\n              {children}\n            </ComponentsProvider>\n          </OverridesProvider>\n        </div>\n      );\n    }\n  )\n);\n\nfunction AssistantMessageContent({ message }: { message: UiAssistantMessage }) {\n  return (\n    <AiMessage.Content\n      message={message}\n      components={{\n        TextPart,\n        ReasoningPart,\n        ToolInvocationPart,\n      }}\n      className=\"lb-ai-chat-message-content\"\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TextPart\n * -----------------------------------------------------------------------------------------------*/\nfunction TextPart({ part }: AiMessageContentTextPartProps) {\n  return <Prose content={part.text} className=\"lb-ai-chat-message-text\" />;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ReasoningPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ReasoningPart({\n  part,\n  isStreaming,\n}: AiMessageContentReasoningPartProps) {\n  // Start collapsed if reasoning is already done.\n  const [isOpen, setIsOpen] = useState(isStreaming);\n  const $ = useOverrides();\n\n  // Auto-collapse when reasoning is done, while still allowing the user to\n  // open/collapse it manually during and after it's done.\n  useEffect(() => {\n    if (!isStreaming) {\n      setIsOpen(false);\n    }\n  }, [isStreaming]);\n\n  return (\n    <Collapsible.Root\n      className=\"lb-collapsible lb-ai-chat-message-reasoning\"\n      open={isOpen}\n      onOpenChange={setIsOpen}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          \"lb-collapsible-trigger\",\n          isStreaming && \"lb-ai-chat-pending\"\n        )}\n      >\n        {/* TODO: Show duration as \"Reasoned for x seconds\"? */}\n        {$.AI_CHAT_MESSAGE_REASONING(isStreaming)}\n        <span className=\"lb-collapsible-chevron lb-icon-container\">\n          <ChevronRightIcon />\n        </span>\n      </Collapsible.Trigger>\n\n      <Collapsible.Content className=\"lb-collapsible-content\">\n        <Prose content={part.text} />\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ToolInvocationPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ToolInvocationPart({\n  part,\n  message,\n}: AiMessageContentToolInvocationPartProps) {\n  return (\n    <div className=\"lb-ai-chat-message-tool-invocation\">\n      <ErrorBoundary\n        fallback={\n          process.env.NODE_ENV !== \"production\" ? (\n            <div className=\"lb-ai-chat-message-error\">\n              <span className=\"lb-icon-container\">\n                <WarningIcon />\n              </span>\n              <p>\n                Failed to render tool call result for <code>{part.name}</code>.\n                See console for details.\n              </p>\n            </div>\n          ) : null\n        }\n      >\n        <AiMessageToolInvocation part={part} message={message} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["AiMessage.Content","Collapsible.Root","Collapsible.Trigger","Collapsible.Content"],"mappings":"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"}
+{"version":3,"file":"AiChatAssistantMessage.js","sources":["../../../src/components/internal/AiChatAssistantMessage.tsx"],"sourcesContent":["import type { AiAssistantMessage, WithNavigation } from \"@liveblocks/core\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  memo,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { ComponentsProvider, type GlobalComponents } from \"../../components\";\nimport { ChevronRightIcon } from \"../../icons/ChevronRight\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport {\n  type AiChatMessageOverrides,\n  type GlobalOverrides,\n  OverridesProvider,\n  useOverrides,\n} from \"../../overrides\";\nimport * as AiMessage from \"../../primitives/AiMessage\";\nimport { AiMessageToolInvocation } from \"../../primitives/AiMessage/tool-invocation\";\nimport type {\n  AiMessageContentReasoningPartProps,\n  AiMessageContentTextPartProps,\n  AiMessageContentToolInvocationPartProps,\n} from \"../../primitives/AiMessage/types\";\nimport * as Collapsible from \"../../primitives/Collapsible\";\nimport { cn } from \"../../utils/cn\";\nimport { ErrorBoundary } from \"../../utils/ErrorBoundary\";\nimport { Prose } from \"./Prose\";\n\ntype UiAssistantMessage = WithNavigation<AiAssistantMessage>;\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatAssistantMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatAssistantMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiAssistantMessage;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents>;\n}\n\nexport const AiChatAssistantMessage = memo(\n  forwardRef<HTMLDivElement, AiChatAssistantMessageProps>(\n    ({ message, className, overrides, components, ...props }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n\n      let children: ReactNode = null;\n\n      if (message.deletedAt !== undefined) {\n        children = (\n          <div className=\"lb-ai-chat-message-deleted\">\n            {$.AI_CHAT_MESSAGE_DELETED}\n          </div>\n        );\n      } else if (\n        message.status === \"generating\" ||\n        message.status === \"awaiting-tool\"\n      ) {\n        if (message.contentSoFar.length === 0) {\n          children = (\n            <div className=\"lb-ai-chat-message-thinking lb-ai-chat-pending\">\n              {$.AI_CHAT_MESSAGE_THINKING}\n            </div>\n          );\n        } else {\n          children = <AssistantMessageContent message={message} />;\n        }\n      } else if (message.status === \"completed\") {\n        children = <AssistantMessageContent message={message} />;\n      } else if (message.status === \"failed\") {\n        // Do not include the error message if the user aborted the request.\n        if (message.errorReason === \"Aborted by user\") {\n          children = <AssistantMessageContent message={message} />;\n        } else {\n          children = (\n            <>\n              <AssistantMessageContent message={message} />\n\n              <div className=\"lb-ai-chat-message-error\">\n                <span className=\"lb-icon-container\">\n                  <WarningIcon />\n                </span>\n                {message.errorReason}\n              </div>\n            </>\n          );\n        }\n      }\n\n      return (\n        <div\n          className={cn(\n            \"lb-ai-chat-message lb-ai-chat-assistant-message\",\n            className\n          )}\n          {...props}\n          ref={forwardedRef}\n        >\n          <OverridesProvider overrides={overrides}>\n            <ComponentsProvider components={components}>\n              {children}\n            </ComponentsProvider>\n          </OverridesProvider>\n        </div>\n      );\n    }\n  )\n);\n\nfunction AssistantMessageContent({ message }: { message: UiAssistantMessage }) {\n  return (\n    <AiMessage.Content\n      message={message}\n      components={{\n        TextPart,\n        ReasoningPart,\n        ToolInvocationPart,\n      }}\n      className=\"lb-ai-chat-message-content\"\n    />\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TextPart\n * -----------------------------------------------------------------------------------------------*/\nfunction TextPart({ part }: AiMessageContentTextPartProps) {\n  return <Prose content={part.text} className=\"lb-ai-chat-message-text\" />;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ReasoningPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ReasoningPart({\n  part,\n  isStreaming,\n}: AiMessageContentReasoningPartProps) {\n  // Start collapsed if reasoning is already done.\n  const [isOpen, setIsOpen] = useState(isStreaming);\n  const $ = useOverrides();\n\n  // Auto-collapse when reasoning is done, while still allowing the user to\n  // open/collapse it manually during and after it's done.\n  useEffect(() => {\n    if (!isStreaming) {\n      setIsOpen(false);\n    }\n  }, [isStreaming]);\n\n  return (\n    <Collapsible.Root\n      className=\"lb-collapsible lb-ai-chat-message-reasoning\"\n      open={isOpen}\n      onOpenChange={setIsOpen}\n    >\n      <Collapsible.Trigger\n        className={cn(\n          \"lb-collapsible-trigger\",\n          isStreaming && \"lb-ai-chat-pending\"\n        )}\n      >\n        {/* TODO: Show duration as \"Reasoned for x seconds\"? */}\n        {$.AI_CHAT_MESSAGE_REASONING(isStreaming)}\n        <span className=\"lb-collapsible-chevron lb-icon-container\">\n          <ChevronRightIcon />\n        </span>\n      </Collapsible.Trigger>\n\n      <Collapsible.Content className=\"lb-collapsible-content\">\n        <Prose content={part.text} />\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * ToolInvocationPart\n * -----------------------------------------------------------------------------------------------*/\nfunction ToolInvocationPart({\n  part,\n  message,\n}: AiMessageContentToolInvocationPartProps) {\n  return (\n    <div className=\"lb-ai-chat-message-tool-invocation\">\n      <ErrorBoundary\n        fallback={\n          <div className=\"lb-ai-chat-message-error\">\n            <span className=\"lb-icon-container\">\n              <WarningIcon />\n            </span>\n            <p>\n              Failed to render tool call result for <code>{part.name}</code>.\n              See console for details.\n            </p>\n          </div>\n        }\n      >\n        <AiMessageToolInvocation part={part} message={message} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n"],"names":["AiMessage.Content","Collapsible.Root","Collapsible.Trigger","Collapsible.Content"],"mappings":"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"}

package/dist/primitives/Comment/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var constants = require('../../constants.cjs');
-var utils = require('./utils.cjs');
 
 const COMMENT_MENTION_NAME = "CommentMention";
 const COMMENT_BODY_NAME = "CommentBody";
@@ -67,14 +67,19 @@ const CommentBody = react.forwardRef(
             return /* @__PURE__ */ jsxRuntime.jsx("p", {
               style: { minHeight: "1lh" },
               children: block.children.map((inline, index2) => {
-                if (utils.isCommentBodyMention(inline)) {
+                if (core.isCommentBodyMention(inline)) {
                   const { type: _, ...mention } = inline;
                   return mention.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
                     mention
                   }, index2) : null;
                 }
-                if (utils.isCommentBodyLink(inline)) {
-                  const href = utils.toAbsoluteUrl(inline.url) ?? inline.url;
+                if (core.isCommentBodyLink(inline)) {
+                  const href = core.sanitizeUrl(inline.url);
+                  if (href === null) {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      children: inline.text ?? inline.url
+                    }, index2);
+                  }
                   return /* @__PURE__ */ jsxRuntime.jsx(Link, {
                     href,
                     children: inline.text ?? inline.url