@linktr.ee/messaging-react 1.33.3 → 1.34.0-rc-1777521550

package/dist/index.d.ts

@@ -233,8 +233,10 @@ export declare interface ChannelViewProps {
 export declare interface CreatorCardProps extends LockedAttachmentBaseProps {
     placeholderTitle?: string;
     placeholderAmountText?: string;
+    isUnlocking?: boolean;
     onDismiss?: () => void;
-    onPreviewClick?: () => LockedAttachmentSource;
+    onPreviewClick?: () => void;
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
 }
 
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-Ydi1pTAi.js";
+import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-DWk0f1PF.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.33.3",
+  "version": "1.34.0-rc-1777521550",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/CustomMessage/index.tsx

@@ -208,7 +208,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           }}
         >
           {isAttachment ? (
-            <div className={`flex flex-col gap-1 ${isMine ? 'items-end' : 'items-start'}`}>
+            <div className="str-chat__message-bubble-wrapper">
               {isMine ? (
                 <LockedAttachment.Creator
                   title={message.metadata?.attachment_title}
@@ -217,6 +217,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                   amountText={message.metadata?.amount_text}
                   detail={message.metadata?.attachment_detail}
                   paymentStatus={message.metadata?.payment_status}
+                  isUnlocking={isUnlocking(message.id)}
+                  onPreviewClick={() => onUnlockClick?.(message, channel)}
+                  onFetchSource={async () =>
+                    await onFetchSource?.(message, channel)
+                  }
                 />
               ) : (
                 <LockedAttachment.Visitor
@@ -235,10 +240,8 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 />
               )}
               {message.text && (
-                <div className="str-chat__message-bubble-wrapper">
-                  <div className="str-chat__message-bubble">
-                    <MessageText message={message} renderText={renderText} />
-                  </div>
+                <div className="str-chat__message-bubble">
+                  <MessageText message={message} renderText={renderText} />
                 </div>
               )}
             </div>

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -21,7 +21,7 @@ const AUDIO_SOURCE = '/audio-source.mp3'
 
 const meta: Meta = {
   title: 'Components/LockedAttachment',
-  parameters: { layout: 'centered' },
+  parameters: { layout: 'fullscreen' },
 }
 export default meta
 
@@ -62,10 +62,19 @@ const VARIANTS = [
     thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
     sourceUrl: DOCUMENT_SOURCE,
   },
+  {
+    label: 'Unknown',
+    title: 'Unknown Attachment',
+    mimeType: 'application/octet-stream',
+    detail: '2.4 MB',
+    thumbnailUrl: undefined,
+    thumbnailUnlockedUrl: undefined,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
 ]
 
 const Table = ({ children }: { children: React.ReactNode }) => (
-  <div className="p-12">
+  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
     <table className="border-separate border-spacing-4">{children}</table>
   </div>
 )
@@ -90,8 +99,9 @@ const TableHead = ({
   </thead>
 )
 
-export const Visitor: StoryFn = () => {
+export const Received: StoryFn = () => {
   const [isPaid, setPaid] = useState<string | undefined>()
+  const [isUnlocking, setUnlocking] = useState<string | undefined>()
 
   return (
     <Table>
@@ -118,14 +128,16 @@ export const Visitor: StoryFn = () => {
                   detail={detail}
                   paymentStatus={isPaid === mimeType ? 'paid' : undefined}
                   amountText="AU$9.99"
-                  onUnlockClick={() => setPaid(mimeType)}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => {
-                    return Promise.resolve({
-                      sourceUrl: sourceUrl,
-                      thumbnailUrl: thumbnailUnlockedUrl,
-                    })
+                  isUnlocking={isUnlocking === mimeType}
+                  onUnlockClick={() => {
+                    setUnlocking(mimeType)
+                    setTimeout(() => {
+                      setUnlocking(undefined)
+                      setPaid(mimeType)
+                    }, 1500)
                   }}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({ sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl })}
                 />
               </td>
             )
@@ -133,9 +145,9 @@ export const Visitor: StoryFn = () => {
         </tr>
         <tr>
           <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Purchased
+            Unlocked
           </td>
-          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
             <td key={mimeType} className="align-top">
               <LockedAttachment.Visitor
                 title={title}
@@ -146,51 +158,18 @@ export const Visitor: StoryFn = () => {
                 paymentStatus="paid"
                 onUnlockClick={() => alert('Unlock clicked')}
                 onDownloadClick={() => alert('Download clicked')}
+                onFetchSource={async () => ({ sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl })}
               />
             </td>
           ))}
         </tr>
-        <tr>
-          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-            Unlocked
-          </td>
-          {VARIANTS.map(
-            ({
-              title,
-              mimeType,
-              detail,
-              thumbnailUrl,
-              thumbnailUnlockedUrl,
-              sourceUrl,
-            }) => (
-              <td key={mimeType} className="align-top">
-                <LockedAttachment.Visitor
-                  title={title}
-                  thumbnailUrl={thumbnailUrl}
-                  mimeType={mimeType}
-                  detail={detail}
-                  amountText="AU$9.99"
-                  paymentStatus="paid"
-                  onUnlockClick={() => console.log('Unlock clicked')}
-                  onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => {
-                    await new Promise((resolve) => setTimeout(resolve, 500))
-                    return Promise.resolve({
-                      sourceUrl: sourceUrl,
-                      thumbnailUrl: thumbnailUnlockedUrl,
-                    })
-                  }}
-                />
-              </td>
-            )
-          )}
-        </tr>
+
       </tbody>
     </Table>
   )
 }
 
-export const Creator: StoryFn = () => (
+export const Sent: StoryFn = () => (
   <Table>
     <TableHead variants={VARIANTS} />
     <tbody>
@@ -213,10 +192,10 @@ export const Creator: StoryFn = () => (
                 thumbnailUrl={thumbnailUrl}
                 mimeType={mimeType}
                 detail={detail}
-                onPreviewClick={() => ({
-                  sourceUrl: sourceUrl,
-                  thumbnailUrl: thumbnailUnlockedUrl,
-                })}
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
+                }}
               />
             </td>
           )
@@ -243,7 +222,7 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
@@ -251,6 +230,10 @@ export const Creator: StoryFn = () => (
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
+              onFetchSource={async () => {
+                await new Promise((resolve) => setTimeout(resolve, 1500))
+                return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
+              }}
             />
           </td>
         ))}
@@ -259,7 +242,7 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
@@ -268,6 +251,10 @@ export const Creator: StoryFn = () => (
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
+              onFetchSource={async () => {
+                await new Promise((resolve) => setTimeout(resolve, 1500))
+                return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
+              }}
             />
           </td>
         ))}

package/src/components/LockedAttachment/components/Creator/Card.tsx

@@ -7,7 +7,7 @@ import {
   XIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 
 import type {
   LockedAttachmentBaseProps,
@@ -21,8 +21,10 @@ import CardThumbnail from './CardThumbnail'
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
   placeholderTitle?: string
   placeholderAmountText?: string
+  isUnlocking?: boolean
   onDismiss?: () => void
-  onPreviewClick?: () => LockedAttachmentSource
+  onPreviewClick?: () => void
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
 }
 
 const CreatorCard: React.FC<CreatorCardProps> = ({
@@ -34,29 +36,56 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
   placeholderTitle = 'Attachment title',
   placeholderAmountText,
   paymentStatus,
+  isUnlocking,
   onDismiss,
   onPreviewClick,
+  onFetchSource,
 }) => {
   const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-
-  const effectiveSourceUrl = source?.sourceUrl
-  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl
-
-  const handleToggle = useCallback(() => {
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const effectiveSourceUrl = isPreviewVisible ? source?.sourceUrl : undefined
+  const effectiveThumbnailUrl = isPreviewVisible ? (source?.thumbnailUrl ?? thumbnailUrl) : thumbnailUrl
+  const isBusy = isLoadingPreview || isUnlocking
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
     if (source) {
-      setSource(undefined)
-    } else if (onPreviewClick) {
-      setSource(onPreviewClick())
+      setIsPreviewVisible(true)
+      return
     }
-  }, [source, onPreviewClick])
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setLoadingPreview(false)
+    }
+  }, [isPreviewVisible, source, onPreviewClick, onFetchSource])
+
+  const toggleHandler = onFetchSource || onPreviewClick ? handleToggle : undefined
 
   return (
-    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
+    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-[#121110] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
       <CardHeader
         onDismiss={onDismiss}
-        onToggle={onPreviewClick ? handleToggle : undefined}
-        isExpanded={!!source}
+        onToggle={isBusy ? undefined : toggleHandler}
+        isExpanded={isPreviewVisible}
         paymentStatus={paymentStatus}
+        isLoading={isBusy}
       />
 
       <CardThumbnail
@@ -64,12 +93,12 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
         sourceUrl={effectiveSourceUrl}
         thumbnailUrl={effectiveThumbnailUrl}
         mimeType={mimeType}
-        onToggle={onPreviewClick ? handleToggle : undefined}
+        onToggle={isBusy ? undefined : toggleHandler}
       />
 
-      <div className="px-4 pb-3 pt-3 bg-black">
+      <div className="px-4 pb-3 pt-3">
         <p
-          className={classNames('mb-1.5 truncate text-base font-medium', {
+          className={classNames('mb-0.5 truncate text-base font-medium', {
             'text-white/30': !title,
             'text-white': !!title,
           })}
@@ -90,11 +119,8 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
           {paymentStatus === 'paid' ? (
             <React.Fragment>
               <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-[#4ade80]">Sold</span>
-              <CheckCircleIcon
-                className="size-4 text-[#4ade80]"
-                weight="bold"
-              />
+              <span className="text-xs font-medium text-[#34c759]">Sold</span>
+              <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
             </React.Fragment>
           ) : (
             <React.Fragment>
@@ -120,6 +146,7 @@ interface CardHeaderProps {
   onToggle?: () => void
   isExpanded?: boolean
   paymentStatus?: PaymentStatus
+  isLoading?: boolean
 }
 
 const CardHeader: React.FC<CardHeaderProps> = ({
@@ -127,6 +154,7 @@ const CardHeader: React.FC<CardHeaderProps> = ({
   onToggle,
   isExpanded,
   paymentStatus,
+  isLoading,
 }) => {
   if (onDismiss) {
     return (
@@ -160,7 +188,11 @@ const CardHeader: React.FC<CardHeaderProps> = ({
 
   return (
     <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">
-      <Icon className="size-4" weight="fill" />
+      {isLoading ? (
+        <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      ) : (
+        <Icon className="size-4" weight="fill" />
+      )}
     </div>
   )
 }

package/src/components/LockedAttachment/components/Creator/CardThumbnail.tsx

@@ -27,7 +27,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       type="button"
       disabled={!onToggle}
       className={classNames(
-        'relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',
+        'relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none',
         { 'cursor-pointer': !!onToggle, 'cursor-default': !onToggle }
       )}
       onClick={onToggle}
@@ -51,7 +51,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       ) : (
         <div className="aspect-video flex items-center justify-center">
           {renderTypeIcon(mimeType, {
-            className: 'size-12 text-black/20',
+            className: 'size-12 text-white/20',
             weight: 'regular',
           })}
         </div>

package/src/components/LockedAttachment/components/Visitor/Card.tsx

@@ -111,37 +111,30 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
         paymentStatus={paymentStatus}
       />
 
-      <div className="px-4 pb-3 pt-3 bg-black">
-        <p className="mb-1.5 truncate text-base font-medium text-white">
+      <div className="px-4 pb-3 pt-3">
+        <p className="mb-0.5 truncate text-base font-medium text-black">
           {title}
         </p>
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-white/55',
+            className: 'size-5 shrink-0 text-black/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-white/55">{detail}</span>
+            <span className="text-xs font-medium text-black/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-[#4ade80]">
-                Purchased
-              </span>
-              <CheckCircleIcon
-                className="size-4 text-[#4ade80]"
-                weight="bold"
-              />
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-[#008236]">Purchased</span>
+              <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
             </React.Fragment>
           ) : amountText != null ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-white/55">
-                {amountText}
-              </span>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-black/55">{amountText}</span>
             </React.Fragment>
           ) : null}
         </div>

package/src/components/LockedAttachment/components/Visitor/CardActions.tsx

@@ -26,10 +26,10 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none text-[#121110] hover:bg-white/90 disabled:opacity-70"
+        className="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] disabled:opacity-70"
       >
         {isUnlocking ? (
-          <LoadingDots />
+          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
         ) : (
           <React.Fragment>
             <LockSimpleIcon className="size-4" weight="fill" />
@@ -47,7 +47,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         target="_blank"
         rel="noopener noreferrer"
         onClick={onDownloadClicked}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none !text-[#121110] hover:bg-white/90"
+        className="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]"
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />
         Download
@@ -58,14 +58,5 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
   return null
 }
 
-const LoadingDots: React.FC = () => {
-  return (
-    <span className="flex items-center gap-1">
-      <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
-      <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
-      <span className="size-1 rounded-full bg-white animate-bounce" />
-    </span>
-  )
-}
 
 export default CardActions

package/src/components/LockedAttachment/components/Visitor/CardThumbnail.tsx

@@ -38,11 +38,11 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
     }
 
     return (
-      <div className="relative overflow-hidden bg-black/5">
+      <div className="relative aspect-video overflow-hidden bg-black/5">
         <img
           src={sourceType === 'document' ? thumbnailUrl : sourceUrl}
           alt={title}
-          className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+          className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
           draggable={false}
           onLoad={() => setSourceReady(true)}
         />