@liveblocks/react-ui 2.5.2 → 2.7.0-beta1

package/dist/components/internal/Attachment.js

@@ -0,0 +1,226 @@
+'use client';
+'use strict';
+
+var react = require('@liveblocks/react');
+var React = require('react');
+var Cross = require('../../icons/Cross.js');
+var Spinner = require('../../icons/Spinner.js');
+var Warning = require('../../icons/Warning.js');
+var overrides = require('../../overrides.js');
+require('../../primitives/Comment/index.js');
+require('../../primitives/Composer/index.js');
+var contexts = require('../../primitives/Composer/contexts.js');
+var utils = require('../../primitives/Composer/utils.js');
+require('../../primitives/EmojiPicker/index.js');
+require('../../primitives/FileSize.js');
+require('../../primitives/Timestamp.js');
+var classNames = require('../../utils/class-names.js');
+var formatFileSize = require('../../utils/format-file-size.js');
+var Tooltip = require('./Tooltip.js');
+
+const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
+const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
+function splitFileName(name) {
+  const match = name.match(fileExtensionRegex);
+  return { base: match?.[1] ?? name, extension: match?.[2] };
+}
+function getFileAttachmentIconGlyph(mimeType) {
+  if (mimeType === "application/zip" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/gzip") {
+    return /* @__PURE__ */ React.createElement("path", {
+      d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
+    });
+  }
+  if (mimeType.startsWith("text/")) {
+    return /* @__PURE__ */ React.createElement("path", {
+      d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
+    });
+  }
+  if (mimeType.startsWith("image/")) {
+    return /* @__PURE__ */ React.createElement("path", {
+      d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    });
+  }
+  if (mimeType.startsWith("video/")) {
+    return /* @__PURE__ */ React.createElement("path", {
+      d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
+    });
+  }
+  if (mimeType.startsWith("audio/")) {
+    return /* @__PURE__ */ React.createElement("path", {
+      d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
+    });
+  }
+  return null;
+}
+const FileAttachmentIcon = React.memo(({ mimeType }) => {
+  const iconGlyph = React.useMemo(
+    () => getFileAttachmentIconGlyph(mimeType),
+    [mimeType]
+  );
+  return /* @__PURE__ */ React.createElement("svg", {
+    className: "lb-attachment-icon",
+    width: 30,
+    height: 30,
+    viewBox: "0 0 30 30",
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+    className: "lb-attachment-icon-shadow"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+    className: "lb-attachment-icon-background"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
+    className: "lb-attachment-icon-fold"
+  }), iconGlyph && /* @__PURE__ */ React.createElement("g", {
+    className: "lb-attachment-icon-glyph"
+  }, iconGlyph));
+});
+function FileAttachmentImagePreview({ url }) {
+  const [isLoaded, setLoaded] = React.useState(false);
+  const handleLoad = React.useCallback(() => {
+    setLoaded(true);
+  }, []);
+  return url ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-attachment-preview-image",
+    "data-hidden": !isLoaded ? "" : void 0
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: url,
+    loading: "lazy",
+    onLoad: handleLoad
+  })) : null;
+}
+function FileAttachmentLocalImagePreview({
+  attachment
+}) {
+  const [url, setUrl] = React.useState();
+  React.useEffect(() => {
+    const url2 = URL.createObjectURL(attachment.file);
+    setUrl(url2);
+    return () => {
+      URL.revokeObjectURL(url2);
+    };
+  }, [attachment.file]);
+  return /* @__PURE__ */ React.createElement(FileAttachmentImagePreview, {
+    url
+  });
+}
+function FileAttachmentRemoteImagePreview({
+  attachment
+}) {
+  const { url } = react.useAttachmentUrl(attachment.id);
+  return /* @__PURE__ */ React.createElement(FileAttachmentImagePreview, {
+    url
+  });
+}
+function FileAttachmentPreview({
+  attachment
+}) {
+  const isInsideRoom = react.useIsInsideRoom();
+  const isLocal = attachment.type === "localAttachment";
+  if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
+    if (isLocal) {
+      return /* @__PURE__ */ React.createElement(FileAttachmentLocalImagePreview, {
+        attachment
+      });
+    } else if (isInsideRoom) {
+      return /* @__PURE__ */ React.createElement(FileAttachmentRemoteImagePreview, {
+        attachment
+      });
+    }
+  }
+  return null;
+}
+function FileAttachment({
+  attachment,
+  overrides: overrides$1,
+  onClick,
+  onDeleteClick,
+  preventFocusOnDelete,
+  className,
+  ...props
+}) {
+  const $ = overrides.useOverrides(overrides$1);
+  const composerAttachmentsContext = contexts.useComposerAttachmentsContextOrNull();
+  const isInComposer = Boolean(composerAttachmentsContext);
+  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
+  const { base: fileBaseName, extension: fileExtension } = React.useMemo(() => {
+    return splitFileName(attachment.name);
+  }, [attachment.name]);
+  const status = attachment.type === "localAttachment" ? attachment.status : void 0;
+  const isUploading = status === "uploading";
+  const isError = status === "error";
+  let description;
+  if (attachment.type === "localAttachment" && attachment.status === "error") {
+    if (attachment.error instanceof utils.AttachmentTooLargeError) {
+      description = $.ATTACHMENT_TOO_LARGE(
+        maxAttachmentSize ? formatFileSize.formatFileSize(maxAttachmentSize, $.locale) : void 0
+      );
+    } else {
+      description = $.ATTACHMENT_ERROR(attachment.error);
+    }
+  } else {
+    description = formatFileSize.formatFileSize(attachment.size, $.locale);
+  }
+  const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
+  const handleDeletePointerDown = React.useCallback(
+    (event) => {
+      if (preventFocusOnDelete) {
+        event.preventDefault();
+      }
+    },
+    [preventFocusOnDelete]
+  );
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const clickEvent = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      event.target.dispatchEvent(clickEvent);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classNames.classNames("lb-attachment lb-file-attachment", className),
+    "data-error": isError ? "" : void 0,
+    ...props,
+    role: onClick ? "button" : void 0,
+    onClick,
+    tabIndex: onClick ? 0 : -1,
+    onKeyDown: onClick ? handleKeyDown : void 0
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "lb-attachment-preview"
+  }, isUploading ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : isError ? /* @__PURE__ */ React.createElement(Warning.WarningIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !isError ? /* @__PURE__ */ React.createElement(FileAttachmentPreview, {
+    attachment
+  }) : null, /* @__PURE__ */ React.createElement(FileAttachmentIcon, {
+    mimeType: attachment.mimeType
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: "lb-attachment-details"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "lb-attachment-name",
+    title: attachment.name
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "lb-attachment-name-base"
+  }, fileBaseName), fileExtension && /* @__PURE__ */ React.createElement("span", {
+    className: "lb-attachment-name-extension"
+  }, fileExtension)), /* @__PURE__ */ React.createElement("span", {
+    className: "lb-attachment-description",
+    title: description
+  }, description)), onDeleteClick && /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
+    content: deleteLabel
+  }, /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "lb-attachment-delete",
+    onClick: onDeleteClick,
+    onPointerDown: handleDeletePointerDown,
+    "aria-label": deleteLabel
+  }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, null))));
+}
+
+exports.FileAttachment = FileAttachment;
+//# sourceMappingURL=Attachment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentLocalAttachment,\n  CommentMixedAttachment,\n} from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getFileAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/gzip\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"text/\")) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(\n    () => getFileAttachmentIconGlyph(mimeType),\n    [mimeType]\n  );\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction FileAttachmentImagePreview({ url }: { url?: string }) {\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return url ? (\n    <div\n      className=\"lb-attachment-preview-image\"\n      data-hidden={!isLoaded ? \"\" : undefined}\n    >\n      <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n    </div>\n  ) : null;\n}\n\nfunction FileAttachmentLocalImagePreview({\n  attachment,\n}: {\n  attachment: CommentLocalAttachment;\n}) {\n  const [url, setUrl] = useState<string>();\n\n  useEffect(() => {\n    const url = URL.createObjectURL(attachment.file);\n\n    setUrl(url);\n\n    return () => {\n      URL.revokeObjectURL(url);\n    };\n  }, [attachment.file]);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n  attachment,\n}: {\n  attachment: CommentAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isLocal = attachment.type === \"localAttachment\";\n\n  if (\n    attachment.mimeType.startsWith(\"image/\") &&\n    attachment.size < IMAGE_PREVIEW_MAX_SIZE\n  ) {\n    if (isLocal) {\n      return <FileAttachmentLocalImagePreview attachment={attachment} />;\n    } else if (isInsideRoom) {\n      return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n    }\n  }\n\n  return null;\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  ...props\n}: FileAttachmentProps) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\n      );\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    // Simulate a click event on Enter or Space because it's a div\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      const clickEvent = new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true,\n        view: window,\n      });\n      event.target.dispatchEvent(clickEvent);\n    }\n  }, []);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <>\n            {!isError ? (\n              <FileAttachmentPreview attachment={attachment} />\n            ) : null}\n            <FileAttachmentIcon mimeType={attachment.mimeType} />\n          </>\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <span className=\"lb-attachment-name\" title={attachment.name}>\n          <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n          {fileExtension && (\n            <span className=\"lb-attachment-name-extension\">\n              {fileExtension}\n            </span>\n          )}\n        </span>\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAQE;AACG;AAAO;AAAoP;AAIhQ;AACE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAAyC;AAEzC;AAGE;AAEA;AACE;AAEA;AAEA;AACE;AAAuB;AACzB;AAGF;AAAQ;AAA2B;AACrC;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAEA;AAIE;AACE;AAAQ;AAAgC;AAAwB;AAEhE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}

package/dist/components/internal/Attachment.mjs

@@ -0,0 +1,224 @@
+'use client';
+import { useIsInsideRoom, useAttachmentUrl } from '@liveblocks/react';
+import React__default, { memo, useMemo, useCallback, useState, useEffect } from 'react';
+import { CrossIcon } from '../../icons/Cross.mjs';
+import { SpinnerIcon } from '../../icons/Spinner.mjs';
+import { WarningIcon } from '../../icons/Warning.mjs';
+import { useOverrides } from '../../overrides.mjs';
+import '../../primitives/Comment/index.mjs';
+import '../../primitives/Composer/index.mjs';
+import { useComposerAttachmentsContextOrNull } from '../../primitives/Composer/contexts.mjs';
+import { AttachmentTooLargeError } from '../../primitives/Composer/utils.mjs';
+import '../../primitives/EmojiPicker/index.mjs';
+import '../../primitives/FileSize.mjs';
+import '../../primitives/Timestamp.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+import { formatFileSize } from '../../utils/format-file-size.mjs';
+import { Tooltip } from './Tooltip.mjs';
+
+const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
+const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
+function splitFileName(name) {
+  const match = name.match(fileExtensionRegex);
+  return { base: match?.[1] ?? name, extension: match?.[2] };
+}
+function getFileAttachmentIconGlyph(mimeType) {
+  if (mimeType === "application/zip" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/gzip") {
+    return /* @__PURE__ */ React__default.createElement("path", {
+      d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
+    });
+  }
+  if (mimeType.startsWith("text/")) {
+    return /* @__PURE__ */ React__default.createElement("path", {
+      d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
+    });
+  }
+  if (mimeType.startsWith("image/")) {
+    return /* @__PURE__ */ React__default.createElement("path", {
+      d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    });
+  }
+  if (mimeType.startsWith("video/")) {
+    return /* @__PURE__ */ React__default.createElement("path", {
+      d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
+    });
+  }
+  if (mimeType.startsWith("audio/")) {
+    return /* @__PURE__ */ React__default.createElement("path", {
+      d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
+    });
+  }
+  return null;
+}
+const FileAttachmentIcon = memo(({ mimeType }) => {
+  const iconGlyph = useMemo(
+    () => getFileAttachmentIconGlyph(mimeType),
+    [mimeType]
+  );
+  return /* @__PURE__ */ React__default.createElement("svg", {
+    className: "lb-attachment-icon",
+    width: 30,
+    height: 30,
+    viewBox: "0 0 30 30",
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+    className: "lb-attachment-icon-shadow"
+  }), /* @__PURE__ */ React__default.createElement("path", {
+    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+    className: "lb-attachment-icon-background"
+  }), /* @__PURE__ */ React__default.createElement("path", {
+    d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
+    className: "lb-attachment-icon-fold"
+  }), iconGlyph && /* @__PURE__ */ React__default.createElement("g", {
+    className: "lb-attachment-icon-glyph"
+  }, iconGlyph));
+});
+function FileAttachmentImagePreview({ url }) {
+  const [isLoaded, setLoaded] = useState(false);
+  const handleLoad = useCallback(() => {
+    setLoaded(true);
+  }, []);
+  return url ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-attachment-preview-image",
+    "data-hidden": !isLoaded ? "" : void 0
+  }, /* @__PURE__ */ React__default.createElement("img", {
+    src: url,
+    loading: "lazy",
+    onLoad: handleLoad
+  })) : null;
+}
+function FileAttachmentLocalImagePreview({
+  attachment
+}) {
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    const url2 = URL.createObjectURL(attachment.file);
+    setUrl(url2);
+    return () => {
+      URL.revokeObjectURL(url2);
+    };
+  }, [attachment.file]);
+  return /* @__PURE__ */ React__default.createElement(FileAttachmentImagePreview, {
+    url
+  });
+}
+function FileAttachmentRemoteImagePreview({
+  attachment
+}) {
+  const { url } = useAttachmentUrl(attachment.id);
+  return /* @__PURE__ */ React__default.createElement(FileAttachmentImagePreview, {
+    url
+  });
+}
+function FileAttachmentPreview({
+  attachment
+}) {
+  const isInsideRoom = useIsInsideRoom();
+  const isLocal = attachment.type === "localAttachment";
+  if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
+    if (isLocal) {
+      return /* @__PURE__ */ React__default.createElement(FileAttachmentLocalImagePreview, {
+        attachment
+      });
+    } else if (isInsideRoom) {
+      return /* @__PURE__ */ React__default.createElement(FileAttachmentRemoteImagePreview, {
+        attachment
+      });
+    }
+  }
+  return null;
+}
+function FileAttachment({
+  attachment,
+  overrides,
+  onClick,
+  onDeleteClick,
+  preventFocusOnDelete,
+  className,
+  ...props
+}) {
+  const $ = useOverrides(overrides);
+  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();
+  const isInComposer = Boolean(composerAttachmentsContext);
+  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
+  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {
+    return splitFileName(attachment.name);
+  }, [attachment.name]);
+  const status = attachment.type === "localAttachment" ? attachment.status : void 0;
+  const isUploading = status === "uploading";
+  const isError = status === "error";
+  let description;
+  if (attachment.type === "localAttachment" && attachment.status === "error") {
+    if (attachment.error instanceof AttachmentTooLargeError) {
+      description = $.ATTACHMENT_TOO_LARGE(
+        maxAttachmentSize ? formatFileSize(maxAttachmentSize, $.locale) : void 0
+      );
+    } else {
+      description = $.ATTACHMENT_ERROR(attachment.error);
+    }
+  } else {
+    description = formatFileSize(attachment.size, $.locale);
+  }
+  const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
+  const handleDeletePointerDown = useCallback(
+    (event) => {
+      if (preventFocusOnDelete) {
+        event.preventDefault();
+      }
+    },
+    [preventFocusOnDelete]
+  );
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const clickEvent = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      event.target.dispatchEvent(clickEvent);
+    }
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames("lb-attachment lb-file-attachment", className),
+    "data-error": isError ? "" : void 0,
+    ...props,
+    role: onClick ? "button" : void 0,
+    onClick,
+    tabIndex: onClick ? 0 : -1,
+    onKeyDown: onClick ? handleKeyDown : void 0
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-attachment-preview"
+  }, isUploading ? /* @__PURE__ */ React__default.createElement(SpinnerIcon, null) : isError ? /* @__PURE__ */ React__default.createElement(WarningIcon, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isError ? /* @__PURE__ */ React__default.createElement(FileAttachmentPreview, {
+    attachment
+  }) : null, /* @__PURE__ */ React__default.createElement(FileAttachmentIcon, {
+    mimeType: attachment.mimeType
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-attachment-details"
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-attachment-name",
+    title: attachment.name
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-attachment-name-base"
+  }, fileBaseName), fileExtension && /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-attachment-name-extension"
+  }, fileExtension)), /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-attachment-description",
+    title: description
+  }, description)), onDeleteClick && /* @__PURE__ */ React__default.createElement(Tooltip, {
+    content: deleteLabel
+  }, /* @__PURE__ */ React__default.createElement("button", {
+    type: "button",
+    className: "lb-attachment-delete",
+    onClick: onDeleteClick,
+    onPointerDown: handleDeletePointerDown,
+    "aria-label": deleteLabel
+  }, /* @__PURE__ */ React__default.createElement(CrossIcon, null))));
+}
+
+export { FileAttachment };
+//# sourceMappingURL=Attachment.mjs.map

package/dist/components/internal/Attachment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.mjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentLocalAttachment,\n  CommentMixedAttachment,\n} from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getFileAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/gzip\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"text/\")) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(\n    () => getFileAttachmentIconGlyph(mimeType),\n    [mimeType]\n  );\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction FileAttachmentImagePreview({ url }: { url?: string }) {\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return url ? (\n    <div\n      className=\"lb-attachment-preview-image\"\n      data-hidden={!isLoaded ? \"\" : undefined}\n    >\n      <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n    </div>\n  ) : null;\n}\n\nfunction FileAttachmentLocalImagePreview({\n  attachment,\n}: {\n  attachment: CommentLocalAttachment;\n}) {\n  const [url, setUrl] = useState<string>();\n\n  useEffect(() => {\n    const url = URL.createObjectURL(attachment.file);\n\n    setUrl(url);\n\n    return () => {\n      URL.revokeObjectURL(url);\n    };\n  }, [attachment.file]);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n  attachment,\n}: {\n  attachment: CommentAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isLocal = attachment.type === \"localAttachment\";\n\n  if (\n    attachment.mimeType.startsWith(\"image/\") &&\n    attachment.size < IMAGE_PREVIEW_MAX_SIZE\n  ) {\n    if (isLocal) {\n      return <FileAttachmentLocalImagePreview attachment={attachment} />;\n    } else if (isInsideRoom) {\n      return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n    }\n  }\n\n  return null;\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  ...props\n}: FileAttachmentProps) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\n      );\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    // Simulate a click event on Enter or Space because it's a div\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      const clickEvent = new MouseEvent(\"click\", {\n        bubbles: true,\n        cancelable: true,\n        view: window,\n      });\n      event.target.dispatchEvent(clickEvent);\n    }\n  }, []);\n\n  return (\n    <div\n      className={classNames(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <>\n            {!isError ? (\n              <FileAttachmentPreview attachment={attachment} />\n            ) : null}\n            <FileAttachmentIcon mimeType={attachment.mimeType} />\n          </>\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <span className=\"lb-attachment-name\" title={attachment.name}>\n          <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n          {fileExtension && (\n            <span className=\"lb-attachment-name-extension\">\n              {fileExtension}\n            </span>\n          )}\n        </span>\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAQE;AACG;AAAO;AAAoP;AAIhQ;AACE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAAyC;AAEzC;AAGE;AAEA;AACE;AAEA;AAEA;AACE;AAAuB;AACzB;AAGF;AAAQ;AAA2B;AACrC;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAEA;AAIE;AACE;AAAQ;AAAgC;AAAwB;AAEhE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}

package/dist/components/internal/InboxNotificationThread.js

@@ -12,6 +12,8 @@ const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;
 function InboxNotificationComment({
   comment,
   showHeader = true,
+  showAttachments,
+  showReactions,
   overrides: overrides$1,
   className,
   ...props
@@ -37,14 +39,20 @@ function InboxNotificationComment({
       Mention: Comment.CommentMention,
       Link: Comment.CommentNonInteractiveLink
     }
-  }), comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
+  }), showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
     className: "lb-comment-reactions"
   }, comment.reactions.map((reaction) => /* @__PURE__ */ React.createElement(Comment.CommentNonInteractiveReaction, {
     key: reaction.emoji,
     reaction,
     overrides: overrides$1,
     disabled: true
-  })))) : /* @__PURE__ */ React.createElement("div", {
+  }))), showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
+    className: "lb-comment-attachments"
+  }, comment.attachments.map((attachment) => /* @__PURE__ */ React.createElement(Comment.CommentNonInteractiveFileAttachment, {
+    key: attachment.id,
+    attachment,
+    overrides: overrides$1
+  }))) : null) : /* @__PURE__ */ React.createElement("div", {
     className: "lb-comment-body"
   }, /* @__PURE__ */ React.createElement("p", {
     className: "lb-comment-deleted"

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

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i];\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","classNames","User","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","getMentionedIdsFromCommentBody"],"mappings":"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"}
+{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionedIdsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments,\n  showReactions,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                {comment.attachments.map((attachment) => (\n                  <CommentNonInteractiveFileAttachment\n                    key={attachment.id}\n                    attachment={attachment}\n                    overrides={overrides}\n                  />\n                ))}\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i];\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentionedIds = getMentionedIdsFromCommentBody(comment.body);\n\n      if (mentionedIds.includes(mentionedId)) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","classNames","User","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","CommentNonInteractiveFileAttachment","getMentionedIdsFromCommentBody"],"mappings":"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"}

package/dist/components/internal/InboxNotificationThread.mjs

@@ -3,13 +3,15 @@ import React__default from 'react';
 import { useOverrides } from '../../overrides.mjs';
 import { Body as CommentBody } from '../../primitives/Comment/index.mjs';
 import { classNames } from '../../utils/class-names.mjs';
-import { CommentMention, CommentNonInteractiveLink, CommentNonInteractiveReaction } from '../Comment.mjs';
+import { CommentMention, CommentNonInteractiveLink, CommentNonInteractiveReaction, CommentNonInteractiveFileAttachment } from '../Comment.mjs';
 import { User } from './User.mjs';
 
 const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;
 function InboxNotificationComment({
   comment,
   showHeader = true,
+  showAttachments,
+  showReactions,
   overrides,
   className,
   ...props
@@ -35,14 +37,20 @@ function InboxNotificationComment({
       Mention: CommentMention,
       Link: CommentNonInteractiveLink
     }
-  }), comment.reactions.length > 0 && /* @__PURE__ */ React__default.createElement("div", {
+  }), showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React__default.createElement("div", {
     className: "lb-comment-reactions"
   }, comment.reactions.map((reaction) => /* @__PURE__ */ React__default.createElement(CommentNonInteractiveReaction, {
     key: reaction.emoji,
     reaction,
     overrides,
     disabled: true
-  })))) : /* @__PURE__ */ React__default.createElement("div", {
+  }))), showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-comment-attachments"
+  }, comment.attachments.map((attachment) => /* @__PURE__ */ React__default.createElement(CommentNonInteractiveFileAttachment, {
+    key: attachment.id,
+    attachment,
+    overrides
+  }))) : null) : /* @__PURE__ */ React__default.createElement("div", {
     className: "lb-comment-body"
   }, /* @__PURE__ */ React__default.createElement("p", {
     className: "lb-comment-deleted"