@linktr.ee/messaging-react 3.12.2 → 3.12.3-rc-1784034329

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-gl5pV2zJ.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-C1eZGd_f.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as u, i as c, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-KfZ2Wx3D.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as u, i as c, j as L, k as h, l as d, m as p, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, y, z as B, B as S, D as q, E as z, G as D, H as E, I as V } from "./index-BvuCjzqJ.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.12.2",
+  "version": "3.12.3-rc-1784034329",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784034329",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/Thumbnail.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
+
 import MediaPlayer, { type MediaPlayerProps } from './MediaPlayer'
 import { renderTypeIcon } from './utils/icons'
 import { getSourceType } from './utils/mimeType'
@@ -48,13 +50,15 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
 }) => {
   const sourceType = getSourceType(mimeType)
   const [sourceReady, setSourceReady] = useState(false)
+  const optimizedSourceUrl = optimizeMessagingAttachmentUrl(sourceUrl)
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)
 
   if (sourceUrl && (sourceType === 'video' || sourceType === 'audio')) {
     return (
       <MediaPlayer
         source={sourceUrl}
         mimeType={mimeType}
-        poster={thumbnailUrl}
+        poster={optimizedThumbnailUrl}
         controls
         {...mediaPlayerProps}
       />
@@ -66,7 +70,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
       return (
         <div className="relative aspect-video overflow-hidden bg-black/5">
           <img
-            src={sourceUrl}
+            src={optimizedSourceUrl ?? sourceUrl}
             alt={title ?? ''}
             className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
             draggable={false}
@@ -77,7 +81,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
     }
     return (
       <img
-        src={sourceUrl}
+        src={optimizedSourceUrl ?? sourceUrl}
         alt={title ?? ''}
         className="block w-full"
         draggable={false}
@@ -91,7 +95,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
         return (
           <div className="relative aspect-video overflow-hidden bg-black/5">
             <img
-              src={thumbnailUrl}
+              src={optimizedThumbnailUrl ?? thumbnailUrl}
               alt={title ?? ''}
               className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
               draggable={false}
@@ -102,7 +106,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
       }
       return (
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt=""
           className="block w-full"
           draggable={false}
@@ -126,7 +130,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
     return (
       <div className={`relative ${posterShellClass(variant)}`}>
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt={title ?? ''}
           draggable={false}
           className="absolute inset-0 h-full w-full object-cover"

package/src/components/ChannelView.test.tsx

@@ -8,7 +8,6 @@ import { ChannelView } from './ChannelView'
 
 let activeChannel: unknown
 let activeChannelProps: Record<string, unknown> = {}
-let activeComponentOverrides: Record<string, unknown> = {}
 
 vi.mock('stream-chat-react', () => ({
   Channel: (props: {
@@ -26,16 +25,9 @@ vi.mock('stream-chat-react', () => ({
   MessageList: ({ head }: { head?: React.ReactElement }) => (
     <div data-testid="message-list">{head}</div>
   ),
-  WithComponents: ({
-    children,
-    overrides,
-  }: {
-    children: React.ReactNode
-    overrides?: Record<string, unknown>
-  }) => {
-    activeComponentOverrides = overrides ?? {}
-    return <>{children}</>
-  },
+  WithComponents: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
   useMessageContext: () => ({ message: { id: 'message-1', text: 'hello' } }),
   useChannelStateContext: () => ({ channel: activeChannel }),
   useChatContext: () => ({
@@ -166,7 +158,6 @@ describe('ChannelView', () => {
   beforeEach(() => {
     activeChannel = undefined
     activeChannelProps = {}
-    activeComponentOverrides = {}
     avatarRenderCalls.length = 0
     channelActionsMenuProps.length = 0
     messageInputProps.length = 0
@@ -291,17 +282,6 @@ describe('ChannelView', () => {
     ).toBeGreaterThan(0)
   })
 
-  it('suppresses stream unread message UI overrides', () => {
-    renderWithProviders(<ChannelView channel={createChannel()} />)
-
-    expect(activeComponentOverrides.UnreadMessagesSeparator).toBeTypeOf(
-      'function'
-    )
-    expect(activeComponentOverrides.UnreadMessagesNotification).toBeTypeOf(
-      'function'
-    )
-  })
-
   it('hides the actions menu (both desktop and mobile) when showChannelInfo is false', () => {
     renderWithProviders(
       <ChannelView channel={createChannel()} showChannelInfo={false} />

package/src/components/ChannelView.tsx

@@ -523,7 +523,6 @@ const ChannelViewInner: React.FC<{
         overrides={{
           Message: MessageOverride,
           MessageActions: CustomMessageActions,
-          UnreadMessagesNotification: () => null,
           UnreadMessagesSeparator: () => null,
         }}
       >

package/src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -2,6 +2,7 @@ import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
@@ -46,6 +47,9 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const safeIndex = Math.min(index, total - 1)
   const current = gallery[safeIndex]
   const isVideoItem = isPlayableItem(current)
+  const optimizedCurrentThumbnailUrl = optimizeMessagingAttachmentUrl(
+    current.thumbnailUrl
+  )
 
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
   // wrapper on PreviewMediaCard / OwnMediaCard.
@@ -90,7 +94,7 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         >
           {current.thumbnailUrl && (
             <img
-              src={current.thumbnailUrl}
+              src={optimizedCurrentThumbnailUrl ?? current.thumbnailUrl}
               alt=""
               aria-hidden
               draggable={false}

package/src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
@@ -55,6 +56,9 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
   const effectiveThumbnailUrl = showLocked
     ? thumbnailUrl
     : (source?.thumbnailUrl ?? thumbnailUrl)
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(
+    effectiveThumbnailUrl
+  )
 
   const isDark = variant === 'dark'
 
@@ -80,7 +84,7 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
         >
           {effectiveThumbnailUrl ? (
             <img
-              src={effectiveThumbnailUrl}
+              src={optimizedThumbnailUrl ?? effectiveThumbnailUrl}
               alt=""
               aria-hidden
               draggable={false}

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 import { describe, expect, it } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
 
 import StreamAttachmentMessage, {
   linkCaptionDuplicatesAttachmentUrl,
@@ -25,6 +25,18 @@ describe('linkCardPropsFromStreamAttachment', () => {
     ).toBe('featured')
   })
 
+  it('optimizes Linktree-hosted thumbnails for messaging attachment renders', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        image_url: 'https://assets.linktr.ee/thumb.jpg',
+      }).thumbnailUrl
+    ).toBe(
+      'https://assets.linktr.ee/thumb.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
   it('uses the classic layout for a plain link with no thumbnail', () => {
     expect(
       linkCardPropsFromStreamAttachment({
@@ -152,6 +164,51 @@ describe('StreamAttachmentMessage', () => {
     expect(container).toHaveTextContent('caption')
   })
 
+  it('optimizes Linktree-hosted image attachments for the channel bubble', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={message([
+          {
+            type: 'image',
+            image_url: 'https://ugc.production.linktr.ee/photo.jpg',
+            title: 'Vacation',
+          },
+        ])}
+      />
+    )
+
+    expect(screen.getByRole('img', { name: 'Vacation' })).toHaveAttribute(
+      'src',
+      'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
+  it('keeps the original image source in the viewer for channel image attachments', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={message([
+          {
+            type: 'image',
+            image_url: 'https://ugc.production.linktr.ee/photo.jpg',
+            title: 'Vacation',
+          },
+        ])}
+      />
+    )
+
+    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    const viewer = screen.getByTestId('image-viewer')
+
+    expect(viewer).toHaveAttribute('open')
+    expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
+      'https://ugc.production.linktr.ee/photo.jpg'
+    )
+  })
+
   it('renders the accompanying message text next to a link attachment', () => {
     const { container } = renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -6,6 +6,7 @@ import {
   type MessageContextValue,
 } from 'stream-chat-react'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 import LinkAttachment from '../LinkAttachment'
 import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
 import MessageAttachment from '../MessageAttachment'
@@ -65,7 +66,7 @@ export function linkCardPropsFromStreamAttachment(a: Attachment) {
     title: trimToUndefined((a as { title?: string }).title),
     description: trimToUndefined((a as { text?: string }).text),
     url,
-    thumbnailUrl,
+    thumbnailUrl: optimizeMessagingAttachmentUrl(thumbnailUrl),
     // Playable clip embedded in a link preview — lets LinkAttachment render its
     // native video/audio player in the hero instead of a static thumbnail.
     sourceUrl,

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../utils/cdnImageUrl'
 import { renderTypeIcon } from '../../../AttachmentCard'
 import { getSourceType } from '../../../AttachmentCard/utils/mimeType'
 
@@ -81,6 +82,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
 }) => {
   const sourceType = getSourceType(mimeType)
   const isPlayableVideo = !!sourceUrl && sourceType === 'video'
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)
 
   if (isPlayableAudio(mimeType, sourceUrl)) {
     // Audio collapses the hero entirely — the native player sits inside
@@ -110,7 +112,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       {isPlayableVideo ? (
         <video
           src={sourceUrl}
-          poster={thumbnailUrl}
+          poster={optimizedThumbnailUrl}
           controls
           playsInline
           preload="metadata"
@@ -120,7 +122,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
         </video>
       ) : thumbnailUrl ? (
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt={title ?? ''}
           draggable={false}
           className="absolute inset-0 h-full w-full object-cover"

package/src/components/MediaMessage/index.tsx

@@ -2,6 +2,7 @@ import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon } from '@phosphor-icons/r
 import React, { useState } from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 import AttachmentCard, {
   AttachmentThumbnail,
   getSourceType,
@@ -54,7 +55,7 @@ const LinkCard: React.FC<{
       <div className="p-2">
         {image_url ? (
           <img
-            src={image_url}
+            src={optimizeMessagingAttachmentUrl(image_url) ?? image_url}
             alt={title ?? ''}
             className="aspect-video w-full rounded-[20px] object-cover"
           />

package/src/components/MessageAttachment/Image/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../utils/cdnImageUrl'
 import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
 import ImageViewer, {
@@ -61,7 +62,7 @@ const tileFromItem = (
   ariaLabel: `Open image ${index + 1} of ${totalCount}`,
   content: (
     <img
-      src={item.src}
+      src={optimizeMessagingAttachmentUrl(item.src) ?? item.src}
       alt={item.alt ?? ''}
       width={item.width}
       height={item.height}
@@ -148,7 +149,7 @@ const ImageComposerInner: React.FC<{
         className="block size-[280px] cursor-zoom-in overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40"
       >
         <img
-          src={src}
+          src={optimizeMessagingAttachmentUrl(src) ?? src}
           alt={alt ?? ''}
           draggable={false}
           loading={loading}

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -33,6 +33,26 @@ const expectViewerOpen = (testId: string) => {
 }
 
 describe('MessageAttachment.Image', () => {
+  it('optimizes Linktree-hosted composer previews without changing the viewer source', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Composer
+        src="https://assets.linktr.ee/photo.jpg"
+        alt="Photo"
+      />
+    )
+
+    expect(screen.getByRole('img', { name: 'Photo' })).toHaveAttribute(
+      'src',
+      'https://assets.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+
+    fireEvent.click(screen.getByLabelText('Open image'))
+    const viewer = expectViewerOpen('image-viewer')
+    expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
+      'https://assets.linktr.ee/photo.jpg'
+    )
+  })
+
   it('renders an image bubble with caption', () => {
     renderWithProviders(
       <MessageAttachment.Image.Sent

package/src/utils/cdnImageUrl.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+
+import { optimizeMessagingAttachmentUrl } from './cdnImageUrl'
+
+describe('optimizeMessagingAttachmentUrl', () => {
+  it('optimizes Linktree-owned asset hosts', () => {
+    expect(
+      optimizeMessagingAttachmentUrl('https://assets.linktr.ee/photo.jpg')
+    ).toBe(
+      'https://assets.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
+  it('does not optimize unrelated CloudFront hosts', () => {
+    expect(
+      optimizeMessagingAttachmentUrl('https://d111111abcdef8.cloudfront.net/photo.jpg')
+    ).toBe('https://d111111abcdef8.cloudfront.net/photo.jpg')
+  })
+
+  it('does not optimize unrelated Cloudinary hosts', () => {
+    expect(
+      optimizeMessagingAttachmentUrl(
+        'https://res.cloudinary.com/demo/image/upload/sample.jpg'
+      )
+    ).toBe('https://res.cloudinary.com/demo/image/upload/sample.jpg')
+  })
+
+  it('does not append the preset twice', () => {
+    expect(
+      optimizeMessagingAttachmentUrl(
+        'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+      )
+    ).toBe(
+      'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+})

package/src/utils/cdnImageUrl.ts

@@ -0,0 +1,34 @@
+const LINKTREE_CDN_HOSTS = ['linktr.ee']
+
+const ATTACHMENT_IMAGE_SIZE_PRESET = 'messaging-attachment-v1_0'
+
+function hostnameFromUrl(url: string): string | null {
+  try {
+    return new URL(url).hostname.toLowerCase()
+  } catch {
+    return null
+  }
+}
+
+function isLinktreeCdnHost(hostname: string): boolean {
+  return LINKTREE_CDN_HOSTS.some(
+    (host) => hostname === host || hostname.endsWith(`.${host}`)
+  )
+}
+
+export function optimizeMessagingAttachmentUrl(
+  url: string | undefined | null
+): string | undefined {
+  const trimmed = url?.trim()
+  if (!trimmed) return undefined
+
+  const hostname = hostnameFromUrl(trimmed)
+  if (!hostname || !isLinktreeCdnHost(hostname)) return trimmed
+
+  if (/[?&]io=true(?:&|$)/.test(trimmed) && /[?&]size=/.test(trimmed)) {
+    return trimmed
+  }
+
+  const separator = trimmed.includes('?') ? '&' : '?'
+  return `${trimmed}${separator}io=true&size=${ATTACHMENT_IMAGE_SIZE_PRESET}`
+}

package/dist/Card-Bs3dV_7R.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("@phosphor-icons/react"),h=require("react"),v=require("classnames"),k=require("./index-gl5pV2zJ.cjs"),T=require("./LoadingDots-D9GGphgM.cjs"),P=({variant:t,title:s,placeholderTitle:n="Attachment title",mimeType:i,detail:a,statusBadge:r,action:c,icon:u,trailingAction:d})=>{const l=t==="dark",o=s||n,x=!s,f=u??k.renderTypeIcon(i,{className:v("size-5 shrink-0",l?"text-white/55":"text-black/55"),weight:"regular"});return e.jsxs("div",{className:"px-4 py-3",children:[e.jsxs("div",{className:"flex items-end gap-3",children:[e.jsxs("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[o.trim()!==""&&e.jsx("p",{className:v("truncate text-base font-medium leading-6",{"text-black/90":!l&&!x,"text-black/30":!l&&x,"text-white/30":l&&x,"text-white":l&&!x}),children:o}),e.jsxs("div",{className:"flex flex-wrap items-center gap-1",children:[f,a!=null&&a!==""&&e.jsx("span",{className:v("text-xs font-medium",l?"text-white/55":"text-black/55"),children:a}),r]})]}),d&&e.jsx("div",{className:"shrink-0",children:d})]}),c]})},M=({paymentStatus:t,mimeType:s,isPlayable:n,isLocked:i})=>{const a=s?k.getSourceType(s):void 0,c=(n??(a==="video"||a==="audio"))&&!i?b.PlayIcon:t==="paid"?b.LockOpenIcon:b.LockSimpleIcon;return e.jsx("div",{className:"pointer-events-none absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:v("flex size-12 items-center justify-center rounded-full bg-black/30 text-white",c===b.PlayIcon&&"group-hover:bg-black/40"),children:e.jsx(c,{className:"size-6",weight:"fill"})})})};function q(t){const s=k.getSourceType(t.mimeType);return s==="video"||s==="audio"}const O=({variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,topRight:r})=>{const[c,u]=h.useState(0),d=s.length,l=Math.min(c,d-1),o=s[l],x=q(o),f=g=>{g.stopPropagation(),u(N=>Math.max(0,N-1))},w=g=>{g.stopPropagation(),u(N=>Math.min(d-1,N+1))},j=l===0,m=l===d-1,p=t==="dark";return e.jsxs("div",{className:v("group relative overflow-hidden rounded-t-md",i?"aspect-[337/386]":void 0),children:[i?e.jsx("div",{className:v("absolute inset-0",p?"bg-white/10":"bg-black/5"),children:o.thumbnailUrl&&e.jsx("img",{src:o.thumbnailUrl,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"})}):e.jsx(k.AttachmentThumbnail,{mimeType:o.mimeType,sourceUrl:o.sourceUrl,thumbnailUrl:o.thumbnailUrl,title:n,variant:t,mediaPlayerProps:{autoPlay:!0}},l),i&&e.jsx(M,{paymentStatus:a,isPlayable:x,isLocked:i}),d>1&&e.jsxs(h.Fragment,{children:[e.jsx("button",{type:"button",onClick:f,disabled:j,"aria-label":"Previous item",className:v("absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",j?"opacity-40":"hover:bg-black/40"),children:e.jsx(b.CaretLeftIcon,{className:"size-5",weight:"bold"})}),e.jsx("button",{type:"button",onClick:w,disabled:m,"aria-label":"Next item",className:v("absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",m?"opacity-40":"hover:bg-black/40"),children:e.jsx(b.CaretRightIcon,{className:"size-5",weight:"bold"})}),e.jsx("div",{className:"pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30",children:e.jsxs("span",{className:"text-xs font-medium leading-none text-white",children:[l+1,"/",d]})})]}),r&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:r})]})},A=({variant:t,mimeType:s,thumbnailUrl:n,title:i,source:a,showLocked:r,paymentStatus:c,topRight:u,containedImage:d=!1})=>{const l=r||a==null?void 0:a.sourceUrl,o=r?n:(a==null?void 0:a.thumbnailUrl)??n,x=t==="dark";return e.jsxs("div",{className:"relative overflow-hidden rounded-t-md",children:[r?e.jsxs("div",{className:v("relative aspect-video overflow-hidden",x?"bg-white/10":"bg-black/5"),children:[o?e.jsx("img",{src:o,alt:"","aria-hidden":!0,draggable:!1,className:"absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:k.renderTypeIcon(s,{className:x?"size-12 text-white/20":"size-12 text-black/20",weight:"regular"})}),e.jsx(M,{paymentStatus:c,mimeType:s,isLocked:r})]}):e.jsx(k.AttachmentThumbnail,{mimeType:s,sourceUrl:l,thumbnailUrl:o,title:i,variant:t,containedImage:d,mediaPlayerProps:l?{autoPlay:!0,loop:!0,controls:!0,muted:!1}:void 0}),u&&e.jsx("div",{className:"pointer-events-auto absolute right-3 top-3 z-10",children:u})]})},y=t=>t.length>=2,I=t=>e.jsx(b.ImagesIcon,{className:t==="dark"?"size-5 shrink-0 text-white/55":"size-5 shrink-0 text-black/55"}),z=({variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,mimeType:r,thumbnailUrl:c,source:u,containedImage:d,topRight:l})=>y(s)?e.jsx(O,{variant:t,gallery:s,title:n,showLocked:i,paymentStatus:a,topRight:l}):e.jsx(A,{variant:t,mimeType:r,thumbnailUrl:c,title:n,source:u,showLocked:i,paymentStatus:a,topRight:l,containedImage:d}),U=({variant:t,children:s,rootRef:n,"data-testid":i})=>e.jsx("div",{ref:n,"data-testid":i,className:v("relative w-[280px] select-none overflow-hidden rounded-md",t==="dark"?"bg-[#1e2330]":"bg-white","shadow-[0_1px_2px_rgba(0,0,0,0.08)]"),children:s}),C=({onToggle:t,isBusy:s,isPreviewVisible:n,children:i})=>t?e.jsx("div",{role:"button",tabIndex:s?-1:0,"aria-label":"Toggle preview","aria-busy":s,"aria-pressed":n,"aria-disabled":s||void 0,onClick:s?void 0:t,onKeyDown:a=>{s||a.target===a.currentTarget&&(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),t())},className:s?"block w-full text-left":"block w-full cursor-pointer text-left",children:i}):e.jsx(h.Fragment,{children:i});function R({isGallery:t,onFetchSource:s,onPreviewClick:n}){const[i,a]=h.useState(),[r,c]=h.useState(!1),[u,d]=h.useState(!1),l=h.useRef(!1),o=h.useCallback(async()=>{if(n==null||n(),r){c(!1);return}if(t){c(!0);return}if(i){c(!0);return}if(s&&!l.current){l.current=!0,d(!0);try{const f=await s();f&&(a(f),c(!0))}finally{l.current=!1,d(!1)}}},[r,t,i,n,s]),x=t||s!=null||n!=null?o:void 0;return{source:i,isPreviewVisible:r,isLoadingPreview:u,handleToggle:o,togglePreview:x}}function G({paymentStatus:t,onFetchSource:s,onUnlockClick:n}){const[i,a]=h.useState(),r=h.useRef(null),c=h.useRef(!1),u=h.useRef(s);u.current=s;const d=h.useCallback(async()=>{var o;if(!c.current){c.current=!0;try{const x=await((o=u.current)==null?void 0:o.call(u));x&&a(x)}finally{c.current=!1}}},[]),l=h.useCallback(()=>{t==="paid"?d():n==null||n()},[t,d,n]);return h.useEffect(()=>{if(!r.current||t!=="paid"||i!==void 0)return;const o=new IntersectionObserver(([x])=>{x.isIntersecting&&(d(),o.disconnect())},{threshold:1});return o.observe(r.current),()=>o.disconnect()},[t,i,d]),{source:i,cardRef:r,handleUnlockClick:l}}const S="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]",_=({isLocked:t,sourceUrl:s,redeemUrl:n,onUnlockClicked:i,onDownloadClicked:a,isUnlocking:r=!1})=>{if(t&&i!=null)return e.jsx("button",{type:"button",onClick:i,disabled:r,"aria-label":r?"Unlocking":"Unlock","aria-busy":r,title:r?"Unlocking":"Unlock",className:S,children:r?e.jsx(T.LoadingDots,{}):e.jsxs(h.Fragment,{children:[e.jsx(b.LockSimpleIcon,{className:"size-4",weight:"fill"}),"Unlock"]})});if(!t&&a!=null){const c=n??s;return c!=null?e.jsxs("a",{href:c,"aria-label":"Download",target:"_blank",rel:"noopener noreferrer",onClick:a,className:`${S} !text-white`,children:[e.jsx(b.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]}):e.jsxs("button",{type:"button",onClick:a,"aria-label":"Download",className:S,children:[e.jsx(b.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]})}return null},E=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,placeholderAmountText:c,gallery:u=[],onDismiss:d,onPreviewClick:l,onFetchSource:o,onEditClick:x})=>{const f=y(u),{source:w,isPreviewVisible:j,isLoadingPreview:m,togglePreview:p}=R({isGallery:f,onFetchSource:o,onPreviewClick:l}),g=!j,N=m,D=e.jsxs(h.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-white/55",children:"•"}),e.jsx("span",{className:a?"text-xs font-medium text-white/55":"text-xs font-medium text-white/30",children:a||c})]}),L=d?e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),d()},className:"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white","aria-label":"Dismiss attachment",children:e.jsx(b.XIcon,{className:"size-3",weight:"bold"})}):void 0,B=x?e.jsx("button",{type:"button",onClick:x,"aria-label":"Edit attachment",className:"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",children:e.jsx(b.PencilSimpleIcon,{className:"size-5",weight:"regular"})}):void 0;return e.jsxs(U,{variant:"dark",children:[e.jsx(C,{onToggle:p,isBusy:N,isPreviewVisible:!g,children:e.jsx(z,{variant:"dark",gallery:u,title:t,showLocked:g,mimeType:s,thumbnailUrl:n,source:w,topRight:L})}),e.jsx(P,{variant:"dark",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:D,icon:f?I("dark"):void 0,trailingAction:B})]})},$=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,placeholderAmountText:c,gallery:u=[]})=>{const d=y(u),l=e.jsxs(h.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-black/55",children:"•"}),e.jsx("span",{className:a?"text-xs font-medium text-black/55":"text-xs font-medium text-black/30",children:a||c})]});return e.jsxs(U,{variant:"light",children:[e.jsx(z,{variant:"light",gallery:u,title:t,showLocked:!0,mimeType:s,thumbnailUrl:n}),e.jsx(P,{variant:"light",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:l,icon:d?I("light"):void 0})]})},K=({title:t,mimeType:s="application/octet-stream",thumbnailUrl:n,detail:i,amountText:a,placeholderTitle:r,paymentStatus:c="pending",gallery:u=[],onPreviewClick:d,onFetchSource:l})=>{const o=y(u),{source:x,isPreviewVisible:f,isLoadingPreview:w,togglePreview:j}=R({isGallery:o,onFetchSource:l,onPreviewClick:d}),m=!f,p=w;return e.jsxs(U,{variant:"dark",children:[e.jsx(C,{onToggle:j,isBusy:p,isPreviewVisible:!m,children:e.jsx(z,{variant:"dark",gallery:u,title:t,showLocked:m,paymentStatus:c,mimeType:s,thumbnailUrl:n,source:x})}),e.jsx(P,{variant:"dark",title:t,placeholderTitle:r,mimeType:s,detail:i,statusBadge:e.jsx(T.PurchaseStatusBadge,{isMine:!0,paymentStatus:c,amountText:a}),icon:o?I("dark"):void 0})]})},X=({title:t,amountText:s,thumbnailUrl:n,mimeType:i="application/octet-stream",detail:a,gallery:r=[],onUnlockClick:c,onFetchSource:u,onDownloadClick:d,paymentStatus:l,isUnlocking:o=!1})=>{const x=y(r),{source:f,cardRef:w,handleUnlockClick:j}=G({paymentStatus:l,onFetchSource:u,onUnlockClick:c}),m=f==null?void 0:f.sourceUrl,p=f==null?void 0:f.redeemUrl,g=x?l!=="paid":m===void 0,N=k.getSourceType(i),D=x?void 0:m;return e.jsxs(U,{variant:"light",rootRef:w,"data-testid":"locked-attachment",children:[e.jsx(z,{variant:"light",gallery:r,title:t,showLocked:g,paymentStatus:l,mimeType:i,thumbnailUrl:n,source:f,containedImage:!g&&N==="document"}),e.jsx(P,{variant:"light",title:t,mimeType:i,detail:a,statusBadge:e.jsx(T.PurchaseStatusBadge,{isMine:!1,paymentStatus:l,amountText:s}),icon:x?I("light"):void 0,action:e.jsx(_,{isLocked:g,isUnlocking:o,sourceUrl:D,redeemUrl:p,onUnlockClicked:j,onDownloadClicked:d})})]})},F=t=>t.isDraft?e.jsx(E,{...t}):t.isPreview?e.jsx($,{...t}):t.isMine?e.jsx(K,{...t}):e.jsx(X,{...t});exports.default=F;
-//# sourceMappingURL=Card-Bs3dV_7R.cjs.map