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

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.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var core = require('@liveblocks/core');
var overrides = require('../../overrides.cjs');
var index = require('../../primitives/Comment/index.cjs');
var classNames = require('../../utils/class-names.cjs');
var Comment = require('../Comment.cjs');
var User = require('./User.cjs');

const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;
function InboxNotificationComment({
  comment,
  showHeader = true,
  showAttachments = true,
  showReactions = true,
  overrides: overrides$1,
  className,
  ...props
}) {
  const $ = overrides.useOverrides(overrides$1);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
    className: classNames.classNames(
      "lb-root lb-inbox-notification-comment lb-comment",
      className
    ),
    ...props,
    children: [
      showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", {
        className: "lb-comment-header",
        children: /* @__PURE__ */ jsxRuntime.jsx(User.User, {
          className: "lb-comment-author",
          userId: comment.userId
        })
      }),
      /* @__PURE__ */ jsxRuntime.jsx("div", {
        className: "lb-comment-content",
        children: comment.body ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(index.Body, {
              className: "lb-comment-body",
              body: comment.body,
              components: {
                Mention: Comment.CommentMention,
                Link: Comment.CommentNonInteractiveLink
              }
            }),
            showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", {
              className: "lb-comment-reactions",
              children: comment.reactions.map((reaction) => /* @__PURE__ */ jsxRuntime.jsx(Comment.CommentNonInteractiveReaction, {
                reaction,
                overrides: overrides$1,
                disabled: true
              }, reaction.emoji))
            }),
            showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
              className: "lb-comment-attachments",
              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
                className: "lb-attachments",
                children: comment.attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(Comment.CommentNonInteractiveFileAttachment, {
                  attachment,
                  overrides: overrides$1,
                  roomId: comment.roomId
                }, attachment.id))
              })
            }) : null
          ]
        }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
          className: "lb-comment-body",
          children: /* @__PURE__ */ jsxRuntime.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 = core.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
  };
}

exports.INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = INBOX_NOTIFICATION_THREAD_MAX_COMMENTS;
exports.InboxNotificationComment = InboxNotificationComment;
exports.generateInboxNotificationThreadContents = generateInboxNotificationThreadContents;
//# sourceMappingURL=InboxNotificationThread.cjs.map