@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/dist/components/Comment.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment } from '@liveblocks/react/_private';
+import { assertNever, Permission } from '@liveblocks/core';
+import { useAddRoomCommentReaction, useRemoveRoomCommentReaction, useRoomAttachmentUrl, useMarkRoomThreadAsRead, useDeleteRoomComment, useEditRoomComment, useRoomPermissions } from '@liveblocks/react/_private';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { forwardRef, useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import { useComponents, ComponentsProvider } from '../components.js';
 import { MENTION_CHARACTER } from '../constants.js';
 import { CheckIcon } from '../icons/Check.js';
 import { CrossIcon } from '../icons/Cross.js';
@@ -18,7 +20,7 @@ import { useCurrentUserId } from '../shared.js';
 import { classNames } from '../utils/class-names.js';
 import { download } from '../utils/download.js';
 import { useRefs } from '../utils/use-refs.js';
-import { useVisibleCallback } from '../utils/use-visible.js';
+import { useIntersectionCallback } from '../utils/use-visible.js';
 import { useWindowFocus } from '../utils/use-window-focus.js';
 import { Composer } from './Composer.js';
 import { MediaAttachment, FileAttachment, separateMediaAttachments } from './internal/Attachment.js';
@@ -37,22 +39,27 @@ import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 
 const REACTIONS_TRUNCATE = 5;
 function CommentMention({
-  userId,
+  mention,
   className,
   ...props
 }) {
   const currentId = useCurrentUserId();
-  return /* @__PURE__ */ jsxs(CommentMention$1, {
-    className: classNames("lb-comment-mention", className),
-    "data-self": userId === currentId ? "" : void 0,
-    ...props,
-    children: [
-      MENTION_CHARACTER,
-      /* @__PURE__ */ jsx(User, {
-        userId
-      })
-    ]
-  });
+  switch (mention.kind) {
+    case "user":
+      return /* @__PURE__ */ jsxs(CommentMention$1, {
+        className: classNames("lb-comment-mention", className),
+        "data-self": mention.id === currentId ? "" : void 0,
+        ...props,
+        children: [
+          MENTION_CHARACTER,
+          /* @__PURE__ */ jsx(User, {
+            userId: mention.id
+          })
+        ]
+      });
+    default:
+      return assertNever(mention.kind, "Unhandled mention kind");
+  }
 }
 function CommentLink({
   href,
@@ -60,11 +67,16 @@ function CommentLink({
   className,
   ...props
 }) {
+  const { Anchor } = useComponents();
   return /* @__PURE__ */ jsx(CommentLink$1, {
     className: classNames("lb-comment-link", className),
     href,
     ...props,
-    children
+    asChild: true,
+    children: /* @__PURE__ */ jsx(Anchor, {
+      ...props,
+      children
+    })
   });
 }
 function CommentNonInteractiveLink({
@@ -271,10 +283,12 @@ function AutoMarkReadThreadIdHandler({
 }) {
   const markThreadAsRead = useMarkRoomThreadAsRead(roomId);
   const isWindowFocused = useWindowFocus();
-  useVisibleCallback(
+  useIntersectionCallback(
     commentRef,
-    () => {
-      markThreadAsRead(threadId);
+    (isIntersecting) => {
+      if (isIntersecting) {
+        markThreadAsRead(threadId);
+      }
     },
     {
       enabled: isWindowFocused
@@ -297,6 +311,7 @@ const Comment = forwardRef(
     onCommentEdit,
     onCommentDelete,
     overrides,
+    components,
     className,
     additionalActions,
     additionalActionsClassName,
@@ -320,6 +335,8 @@ const Comment = forwardRef(
     const { mediaAttachments, fileAttachments } = useMemo(() => {
       return separateMediaAttachments(comment.attachments);
     }, [comment.attachments]);
+    const permissions = useRoomPermissions(comment.roomId);
+    const canComment = permissions.size > 0 ? permissions.has(Permission.CommentsWrite) || permissions.has(Permission.Write) : true;
     const stopPropagation = useCallback((event) => {
       event.stopPropagation();
     }, []);
@@ -407,254 +424,258 @@ const Comment = forwardRef(
     if (!showDeleted && !comment.body) {
       return null;
     }
-    return /* @__PURE__ */ jsxs(TooltipProvider, {
-      children: [
-        autoMarkReadThreadId && /* @__PURE__ */ jsx(AutoMarkReadThreadIdHandler, {
-          commentRef: ref,
-          threadId: autoMarkReadThreadId,
-          roomId: comment.roomId
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          id: comment.id,
-          className: classNames(
-            "lb-root lb-comment",
-            indentContent && "lb-comment:indent-content",
-            showActions === "hover" && "lb-comment:show-actions-hover",
-            (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
-            className
-          ),
-          "data-deleted": !comment.body ? "" : void 0,
-          "data-editing": isEditing ? "" : void 0,
-          "data-target": isTarget ? "" : void 0,
-          dir: $.dir,
-          ...props,
-          ref: mergedRefs,
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              className: "lb-comment-header",
-              children: [
-                /* @__PURE__ */ jsxs("div", {
-                  className: "lb-comment-details",
-                  children: [
-                    /* @__PURE__ */ jsx(Avatar, {
-                      className: "lb-comment-avatar",
-                      userId: comment.userId,
-                      onClick: handleAuthorClick
-                    }),
-                    /* @__PURE__ */ jsxs("span", {
-                      className: "lb-comment-details-labels",
-                      children: [
-                        /* @__PURE__ */ jsx(User, {
-                          className: "lb-comment-author",
-                          userId: comment.userId,
-                          onClick: handleAuthorClick
-                        }),
-                        /* @__PURE__ */ jsxs("span", {
-                          className: "lb-comment-date",
-                          children: [
-                            /* @__PURE__ */ jsx(Timestamp, {
-                              locale: $.locale,
-                              date: comment.createdAt,
-                              className: "lb-date lb-comment-date-created"
-                            }),
-                            comment.editedAt && comment.body && /* @__PURE__ */ jsxs(Fragment, {
-                              children: [
-                                " ",
-                                /* @__PURE__ */ jsx("span", {
-                                  className: "lb-comment-date-edited",
-                                  children: $.COMMENT_EDITED
-                                })
-                              ]
-                            })
-                          ]
-                        })
-                      ]
-                    })
-                  ]
-                }),
-                showActions && !isEditing && /* @__PURE__ */ jsxs("div", {
-                  className: classNames(
-                    "lb-comment-actions",
-                    additionalActionsClassName
-                  ),
-                  children: [
-                    additionalActions ?? null,
-                    showReactions && /* @__PURE__ */ jsx(EmojiPicker, {
-                      onEmojiSelect: handleReactionSelect,
-                      onOpenChange: setReactionActionOpen,
-                      children: /* @__PURE__ */ jsx(Tooltip, {
-                        content: $.COMMENT_ADD_REACTION,
-                        children: /* @__PURE__ */ jsx(PopoverTrigger, {
-                          asChild: true,
-                          children: /* @__PURE__ */ jsx(Button, {
-                            className: "lb-comment-action",
-                            onClick: stopPropagation,
-                            "aria-label": $.COMMENT_ADD_REACTION,
-                            icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
-                          })
-                        })
-                      })
-                    }),
-                    comment.userId === currentUserId || additionalDropdownItemsBefore || additionalDropdownItemsAfter ? /* @__PURE__ */ jsx(Dropdown, {
-                      open: isMoreActionOpen,
-                      onOpenChange: setMoreActionOpen,
-                      align: "end",
-                      content: /* @__PURE__ */ jsxs(Fragment, {
+    return /* @__PURE__ */ jsx(TooltipProvider, {
+      children: /* @__PURE__ */ jsxs(ComponentsProvider, {
+        components,
+        children: [
+          autoMarkReadThreadId && /* @__PURE__ */ jsx(AutoMarkReadThreadIdHandler, {
+            commentRef: ref,
+            threadId: autoMarkReadThreadId,
+            roomId: comment.roomId
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            id: comment.id,
+            className: classNames(
+              "lb-root lb-comment",
+              indentContent && "lb-comment:indent-content",
+              showActions === "hover" && "lb-comment:show-actions-hover",
+              (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
+              className
+            ),
+            "data-deleted": !comment.body ? "" : void 0,
+            "data-editing": isEditing ? "" : void 0,
+            "data-target": isTarget ? "" : void 0,
+            dir: $.dir,
+            ...props,
+            ref: mergedRefs,
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: "lb-comment-header",
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    className: "lb-comment-details",
+                    children: [
+                      /* @__PURE__ */ jsx(Avatar, {
+                        className: "lb-comment-avatar",
+                        userId: comment.userId,
+                        onClick: handleAuthorClick
+                      }),
+                      /* @__PURE__ */ jsxs("span", {
+                        className: "lb-comment-details-labels",
                         children: [
-                          additionalDropdownItemsBefore,
-                          comment.userId === currentUserId && /* @__PURE__ */ jsxs(Fragment, {
+                          /* @__PURE__ */ jsx(User, {
+                            className: "lb-comment-author",
+                            userId: comment.userId,
+                            onClick: handleAuthorClick
+                          }),
+                          /* @__PURE__ */ jsxs("span", {
+                            className: "lb-comment-date",
                             children: [
-                              /* @__PURE__ */ jsx(DropdownItem, {
-                                onSelect: handleEdit,
-                                onClick: stopPropagation,
-                                icon: /* @__PURE__ */ jsx(EditIcon, {}),
-                                children: $.COMMENT_EDIT
+                              /* @__PURE__ */ jsx(Timestamp, {
+                                locale: $.locale,
+                                date: comment.createdAt,
+                                className: "lb-date lb-comment-date-created"
                               }),
-                              /* @__PURE__ */ jsx(DropdownItem, {
-                                onSelect: handleDelete,
-                                onClick: stopPropagation,
-                                icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                                children: $.COMMENT_DELETE
+                              comment.editedAt && comment.body && /* @__PURE__ */ jsxs(Fragment, {
+                                children: [
+                                  " ",
+                                  /* @__PURE__ */ jsx("span", {
+                                    className: "lb-comment-date-edited",
+                                    children: $.COMMENT_EDITED
+                                  })
+                                ]
                               })
                             ]
-                          }),
-                          additionalDropdownItemsAfter
-                        ]
-                      }),
-                      children: /* @__PURE__ */ jsx(Tooltip, {
-                        content: $.COMMENT_MORE,
-                        children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
-                          asChild: true,
-                          children: /* @__PURE__ */ jsx(Button, {
-                            className: "lb-comment-action",
-                            disabled: !comment.body,
-                            onClick: stopPropagation,
-                            "aria-label": $.COMMENT_MORE,
-                            icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
                           })
-                        })
-                      })
-                    }) : null
-                  ]
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "lb-comment-content",
-              children: isEditing ? /* @__PURE__ */ jsx(Composer, {
-                className: "lb-comment-composer",
-                onComposerSubmit: handleEditSubmit,
-                defaultValue: comment.body,
-                defaultAttachments: comment.attachments,
-                autoFocus: true,
-                showAttribution: false,
-                showAttachments,
-                showFormattingControls: showComposerFormattingControls,
-                actions: /* @__PURE__ */ jsxs(Fragment, {
-                  children: [
-                    /* @__PURE__ */ jsx(Tooltip, {
-                      content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-                      "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
-                      children: /* @__PURE__ */ jsx(Button, {
-                        className: "lb-composer-action",
-                        onClick: handleEditCancel,
-                        icon: /* @__PURE__ */ jsx(CrossIcon, {})
-                      })
-                    }),
-                    /* @__PURE__ */ jsx(ShortcutTooltip, {
-                      content: $.COMMENT_EDIT_COMPOSER_SAVE,
-                      shortcut: "Enter",
-                      children: /* @__PURE__ */ jsx(ComposerSubmit, {
-                        asChild: true,
-                        children: /* @__PURE__ */ jsx(Button, {
-                          variant: "primary",
-                          className: "lb-composer-action",
-                          onClick: stopPropagation,
-                          "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                          icon: /* @__PURE__ */ jsx(CheckIcon, {})
-                        })
+                        ]
                       })
-                    })
-                  ]
-                }),
-                overrides: {
-                  COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-                },
-                roomId: comment.roomId
-              }) : comment.body ? /* @__PURE__ */ jsxs(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsx(CommentBody, {
-                    className: "lb-comment-body",
-                    body: comment.body,
-                    components: {
-                      Mention: ({ userId }) => /* @__PURE__ */ jsx(CommentMention, {
-                        userId,
-                        onClick: (event) => onMentionClick?.(userId, event)
-                      }),
-                      Link: CommentLink
-                    }
-                  }),
-                  showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxs("div", {
-                    className: "lb-comment-attachments",
-                    children: [
-                      mediaAttachments.length > 0 ? /* @__PURE__ */ jsx("div", {
-                        className: "lb-attachments",
-                        children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsx(CommentMediaAttachment, {
-                          attachment,
-                          overrides,
-                          onAttachmentClick,
-                          roomId: comment.roomId
-                        }, attachment.id))
-                      }) : null,
-                      fileAttachments.length > 0 ? /* @__PURE__ */ jsx("div", {
-                        className: "lb-attachments",
-                        children: fileAttachments.map((attachment) => /* @__PURE__ */ jsx(CommentFileAttachment, {
-                          attachment,
-                          overrides,
-                          onAttachmentClick,
-                          roomId: comment.roomId
-                        }, attachment.id))
-                      }) : null
                     ]
-                  }) : null,
-                  showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxs("div", {
-                    className: "lb-comment-reactions",
+                  }),
+                  showActions && !isEditing && /* @__PURE__ */ jsxs("div", {
+                    className: classNames(
+                      "lb-comment-actions",
+                      additionalActionsClassName
+                    ),
                     children: [
-                      comment.reactions.map((reaction) => /* @__PURE__ */ jsx(CommentReaction, {
-                        comment,
-                        reaction,
-                        overrides
-                      }, reaction.emoji)),
-                      /* @__PURE__ */ jsx(EmojiPicker, {
+                      additionalActions ?? null,
+                      showReactions && canComment ? /* @__PURE__ */ jsx(EmojiPicker, {
                         onEmojiSelect: handleReactionSelect,
+                        onOpenChange: setReactionActionOpen,
                         children: /* @__PURE__ */ jsx(Tooltip, {
                           content: $.COMMENT_ADD_REACTION,
                           children: /* @__PURE__ */ jsx(PopoverTrigger, {
                             asChild: true,
                             children: /* @__PURE__ */ jsx(Button, {
-                              className: "lb-comment-reaction lb-comment-reaction-add",
-                              variant: "outline",
+                              className: "lb-comment-action",
                               onClick: stopPropagation,
                               "aria-label": $.COMMENT_ADD_REACTION,
                               icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
                             })
                           })
                         })
-                      })
+                      }) : null,
+                      comment.userId === currentUserId || additionalDropdownItemsBefore || additionalDropdownItemsAfter ? /* @__PURE__ */ jsx(Dropdown, {
+                        open: isMoreActionOpen,
+                        onOpenChange: setMoreActionOpen,
+                        align: "end",
+                        content: /* @__PURE__ */ jsxs(Fragment, {
+                          children: [
+                            additionalDropdownItemsBefore,
+                            comment.userId === currentUserId && /* @__PURE__ */ jsxs(Fragment, {
+                              children: [
+                                /* @__PURE__ */ jsx(DropdownItem, {
+                                  onSelect: handleEdit,
+                                  onClick: stopPropagation,
+                                  icon: /* @__PURE__ */ jsx(EditIcon, {}),
+                                  children: $.COMMENT_EDIT
+                                }),
+                                /* @__PURE__ */ jsx(DropdownItem, {
+                                  onSelect: handleDelete,
+                                  onClick: stopPropagation,
+                                  icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+                                  children: $.COMMENT_DELETE
+                                })
+                              ]
+                            }),
+                            additionalDropdownItemsAfter
+                          ]
+                        }),
+                        children: /* @__PURE__ */ jsx(Tooltip, {
+                          content: $.COMMENT_MORE,
+                          children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /* @__PURE__ */ jsx(Button, {
+                              className: "lb-comment-action",
+                              disabled: !comment.body,
+                              onClick: stopPropagation,
+                              "aria-label": $.COMMENT_MORE,
+                              icon: /* @__PURE__ */ jsx(EllipsisIcon, {})
+                            })
+                          })
+                        })
+                      }) : null
                     ]
                   })
                 ]
-              }) : /* @__PURE__ */ jsx("div", {
-                className: "lb-comment-body",
-                children: /* @__PURE__ */ jsx("p", {
-                  className: "lb-comment-deleted",
-                  children: $.COMMENT_DELETED
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "lb-comment-content",
+                children: isEditing ? /* @__PURE__ */ jsx(Composer, {
+                  className: "lb-comment-composer",
+                  onComposerSubmit: handleEditSubmit,
+                  defaultValue: comment.body,
+                  defaultAttachments: comment.attachments,
+                  autoFocus: true,
+                  showAttribution: false,
+                  showAttachments,
+                  showFormattingControls: showComposerFormattingControls,
+                  actions: /* @__PURE__ */ jsxs(Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsx(Tooltip, {
+                        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                        children: /* @__PURE__ */ jsx(Button, {
+                          className: "lb-composer-action",
+                          onClick: handleEditCancel,
+                          icon: /* @__PURE__ */ jsx(CrossIcon, {})
+                        })
+                      }),
+                      /* @__PURE__ */ jsx(ShortcutTooltip, {
+                        content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                        shortcut: "Enter",
+                        children: /* @__PURE__ */ jsx(ComposerSubmit, {
+                          asChild: true,
+                          children: /* @__PURE__ */ jsx(Button, {
+                            variant: "primary",
+                            className: "lb-composer-action",
+                            onClick: stopPropagation,
+                            "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
+                            icon: /* @__PURE__ */ jsx(CheckIcon, {})
+                          })
+                        })
+                      })
+                    ]
+                  }),
+                  overrides: {
+                    COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
+                  },
+                  roomId: comment.roomId
+                }) : comment.body ? /* @__PURE__ */ jsxs(Fragment, {
+                  children: [
+                    /* @__PURE__ */ jsx(CommentBody, {
+                      className: "lb-comment-body",
+                      body: comment.body,
+                      components: {
+                        Mention: ({ mention }) => /* @__PURE__ */ jsx(CommentMention, {
+                          mention,
+                          onClick: (event) => onMentionClick?.(mention, event)
+                        }),
+                        Link: CommentLink
+                      }
+                    }),
+                    showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxs("div", {
+                      className: "lb-comment-attachments",
+                      children: [
+                        mediaAttachments.length > 0 ? /* @__PURE__ */ jsx("div", {
+                          className: "lb-attachments",
+                          children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsx(CommentMediaAttachment, {
+                            attachment,
+                            overrides,
+                            onAttachmentClick,
+                            roomId: comment.roomId
+                          }, attachment.id))
+                        }) : null,
+                        fileAttachments.length > 0 ? /* @__PURE__ */ jsx("div", {
+                          className: "lb-attachments",
+                          children: fileAttachments.map((attachment) => /* @__PURE__ */ jsx(CommentFileAttachment, {
+                            attachment,
+                            overrides,
+                            onAttachmentClick,
+                            roomId: comment.roomId
+                          }, attachment.id))
+                        }) : null
+                      ]
+                    }) : null,
+                    showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxs("div", {
+                      className: "lb-comment-reactions",
+                      children: [
+                        comment.reactions.map((reaction) => /* @__PURE__ */ jsx(CommentReaction, {
+                          comment,
+                          reaction,
+                          overrides,
+                          disabled: !canComment
+                        }, reaction.emoji)),
+                        canComment ? /* @__PURE__ */ jsx(EmojiPicker, {
+                          onEmojiSelect: handleReactionSelect,
+                          children: /* @__PURE__ */ jsx(Tooltip, {
+                            content: $.COMMENT_ADD_REACTION,
+                            children: /* @__PURE__ */ jsx(PopoverTrigger, {
+                              asChild: true,
+                              children: /* @__PURE__ */ jsx(Button, {
+                                className: "lb-comment-reaction lb-comment-reaction-add",
+                                variant: "outline",
+                                onClick: stopPropagation,
+                                "aria-label": $.COMMENT_ADD_REACTION,
+                                icon: /* @__PURE__ */ jsx(EmojiPlusIcon, {})
+                              })
+                            })
+                          })
+                        }) : null
+                      ]
+                    })
+                  ]
+                }) : /* @__PURE__ */ jsx("div", {
+                  className: "lb-comment-body",
+                  children: /* @__PURE__ */ jsx("p", {
+                    className: "lb-comment-deleted",
+                    children: $.COMMENT_DELETED
+                  })
                 })
               })
-            })
-          ]
-        })
-      ]
+            ]
+          })
+        ]
+      })
     });
   }
 );