@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 { getMentionedIdsFromCommentBody } from '@liveblocks/core';
import { useOverrides } from '../../overrides.js';
import { Body as CommentBody } from '../../primitives/Comment/index.js';
import { classNames } from '../../utils/class-names.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: classNames(
      "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(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 mentionedIds = getMentionedIdsFromCommentBody(comment.body);
      if (mentionedIds.includes(mentionedId)) {
        return comment;
      }
    }
  }
  return;
}
function getUserIdsFromComments(comments) {
  return Array.from(new Set(comments.map((comment) => comment.userId)));
}
function generateInboxNotificationThreadContents(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(
    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