@liveblocks/react-ui/dist/components/internal/InboxNotificationThread.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { getMentionsFromCommentBody, kInternal } from '@liveblocks/core';
import { useOverrides } from '../../overrides.js';
import { Body as CommentBody } from '../../primitives/Comment/index.js';
import { cn } from '../../utils/cn.js';
import { CommentMention, CommentNonInteractiveLink, CommentNonInteractiveReaction, CommentNonInteractiveFileAttachment } from '../Comment.js';
import { User } from './User.js';

const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;
function InboxNotificationComment({
  comment,
  showHeader = true,
  showAttachments = true,
  showReactions = true,
  overrides,
  className,
  ...props
}) {
  const $ = useOverrides(overrides);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "lb-root lb-inbox-notification-comment lb-comment",
        className
      ),
      ...props,
      children: [
        showHeader && /* @__PURE__ */ jsx("div", { className: "lb-comment-header", children: /* @__PURE__ */ jsx(User, { className: "lb-comment-author", userId: comment.userId }) }),
        /* @__PURE__ */ jsx("div", { className: "lb-comment-content", children: comment.body ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            CommentBody,
            {
              className: "lb-comment-body",
              body: comment.body,
              components: {
                Mention: CommentMention,
                Link: CommentNonInteractiveLink
              }
            }
          ),
          showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsx("div", { className: "lb-comment-reactions", children: comment.reactions.map((reaction) => /* @__PURE__ */ jsx(
            CommentNonInteractiveReaction,
            {
              reaction,
              overrides,
              disabled: true
            },
            reaction.emoji
          )) }),
          showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "lb-comment-attachments", children: /* @__PURE__ */ jsx("div", { className: "lb-attachments", children: comment.attachments.map((attachment) => /* @__PURE__ */ jsx(
            CommentNonInteractiveFileAttachment,
            {
              attachment,
              overrides,
              roomId: comment.roomId
            },
            attachment.id
          )) }) }) : null
        ] }) : /* @__PURE__ */ jsx("div", { className: "lb-comment-body", children: /* @__PURE__ */ jsx("p", { className: "lb-comment-deleted", children: $.COMMENT_DELETED }) }) })
      ]
    }
  );
}
function findLastCommentWithMentionedId(client, comments, mentionedId) {
  if (!comments.length) {
    return;
  }
  for (let i = comments.length - 1; i >= 0; i--) {
    const comment = comments[i];
    if (comment.userId === mentionedId) {
      continue;
    }
    if (comment.body) {
      const mentions = getMentionsFromCommentBody(comment.body);
      for (const mention of mentions) {
        if (mention.kind === "user" && mention.id === mentionedId) {
          return comment;
        }
        if (mention.kind === "group" && mention.userIds?.includes(mentionedId)) {
          return comment;
        }
        if (mention.kind === "group" && mention.userIds === void 0) {
          const group = client[kInternal].httpClient.groupsStore.getData(
            mention.id
          );
          if (group?.members.some((member) => member.id === mentionedId)) {
            return comment;
          }
        }
      }
    }
  }
  return;
}
function getUserIdsFromComments(comments) {
  return Array.from(new Set(comments.map((comment) => comment.userId)));
}
function generateInboxNotificationThreadContents(client, inboxNotification, thread, userId) {
  const unreadComments = thread.comments.filter((comment) => {
    if (!comment.body) {
      return false;
    }
    return inboxNotification.readAt ? comment.createdAt > inboxNotification.readAt && comment.createdAt <= inboxNotification.notifiedAt : comment.createdAt <= inboxNotification.notifiedAt;
  });
  if (unreadComments.length === 0) {
    const lastComments = thread.comments.filter((comment) => comment.body).slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);
    return {
      type: "comments",
      unread: false,
      comments: lastComments,
      userIds: getUserIdsFromComments(lastComments),
      date: inboxNotification.notifiedAt
    };
  }
  const commentWithMention = findLastCommentWithMentionedId(
    client,
    unreadComments,
    userId
  );
  if (commentWithMention) {
    return {
      type: "mention",
      unread: true,
      comments: [commentWithMention],
      userIds: [commentWithMention.userId],
      date: commentWithMention.createdAt
    };
  }
  const lastUnreadComments = unreadComments.slice(
    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS
  );
  return {
    type: "comments",
    unread: true,
    comments: lastUnreadComments,
    userIds: getUserIdsFromComments(unreadComments),
    date: inboxNotification.notifiedAt
  };
}

export { INBOX_NOTIFICATION_THREAD_MAX_COMMENTS, InboxNotificationComment, generateInboxNotificationThreadContents };
//# sourceMappingURL=InboxNotificationThread.js.map