@linktr.ee/messaging-react 3.10.0-rc-1783660962 → 3.10.0

package/src/components/CustomMessage/index.tsx

@@ -32,17 +32,17 @@ import {
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
+import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
+import {
+  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
+} from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
-import LockedAttachment from './LockedAttachment'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
-  isMediaAttachmentMessage,
-  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -145,12 +145,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       (total, segment) => total + segment.attachments.length,
       0
     ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition =
-    messageAttachmentGroupPositionFromStream({
+  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
+    {
       endOfGroup,
       firstOfGroup,
       groupedByUser,
-    })
+    }
+  )
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -225,26 +226,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     !isAIGenerated &&
     !isChatbot
 
-  const sharedLockedTextProps = {
-    contentType: 'text' as const,
-    amountText: message.metadata?.amount_text,
-    paymentStatus: message.metadata?.payment_status,
-    renderedText: message.text && (
-      <MessageText message={displayMessage} renderText={renderText} />
-    ),
-  }
-  const sharedLockedMediaProps = {
-    contentType: 'media' as const,
-    title: message.metadata?.attachment_title,
-    mimeType: message.metadata?.attachment_mime_type,
-    thumbnailUrl: message.metadata?.attachment_thumbnail,
-    amountText: message.metadata?.amount_text,
-    detail: message.metadata?.attachment_detail,
-    paymentStatus: message.metadata?.payment_status,
-    onFetchSource: onFetchSource
-      ? () => onFetchSource(message, channel)
-      : undefined,
-  }
   return (
     <>
       {editing && (
@@ -295,61 +276,43 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
-            <MessageTag message={message} standalone />
-          ) : isTextAttachmentMessage(message) ? (
+          {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment
-                    {...sharedLockedTextProps}
-                    isMine={true}
-                  />
-                ) : (
-                  <LockedAttachment
-                    {...sharedLockedTextProps}
-                    isMine={false}
-                    isUnlocking={isUnlocking(message.id)}
-                    onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  />
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
-            </div>
-          ) : isMediaAttachmentMessage(message) ? (
-            <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment
-                    {...sharedLockedMediaProps}
-                    isMine={true}
-                    onPreviewClick={() =>
-                      onUnlockClick
-                        ? onUnlockClick(message, channel)
-                        : undefined
+              {isMine ? (
+                <div className="flex items-center gap-2">
+                  {MessageActions && <MessageActions />}
+                  <LockedAttachment.Sent
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
+                    onPreviewClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
                   />
-                ) : (
-                  <LockedAttachment
-                    {...sharedLockedMediaProps}
-                    isMine={false}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <LockedAttachment.Received
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
                     isUnlocking={isUnlocking(message.id)}
-                    onUnlockClick={() =>
-                      onUnlockClick
-                        ? onUnlockClick(message, channel)
-                        : undefined
-                    }
-                    onDownloadClick={() =>
-                      onDownloadClick
-                        ? onDownloadClick(message, channel)
-                        : undefined
+                    onUnlockClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
+                    onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
+                  {MessageActions && <MessageActions />}
+                </div>
+              )}
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -359,6 +322,9 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
+          ) : isTipOnly ? (
+            /* Tip-only messages render as a standalone bubble */
+            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
               groupPosition={streamAttachmentGroupPosition}

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -5,7 +5,7 @@ import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
 import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import LockedAttachment from '../CustomMessage/LockedAttachment'
+import LockedAttachment from '../LockedAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -229,9 +229,7 @@ WithAttachments.parameters = {
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (
-    <LockedAttachment
-      isPreview
-      contentType="media"
+    <LockedAttachment.Composer
       title="Exclusive Content"
       mimeType="image/jpeg"
       thumbnailUrl="https://picsum.photos/seed/paid/320/180"
@@ -268,7 +266,7 @@ WithPaidAttachment.parameters = {
   docs: {
     description: {
       story:
-        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment isPreview` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
+        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment.Composer` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
     },
   },
 }

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

@@ -0,0 +1,450 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import type { LockedAttachmentGalleryItem } from './types'
+
+import LockedAttachment from '.'
+
+const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
+const VIDEO_SOURCE = '/video-source.mp4'
+
+const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
+const IMAGE_SOURCE = '/image-source.jpg'
+
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
+const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
+const DOCUMENT_SOURCE = '/document-source.pdf'
+
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
+const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
+const AUDIO_SOURCE = '/audio-source.mp3'
+
+const meta: Meta = {
+  title: 'LockedAttachment',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const VARIANTS = [
+  {
+    label: 'Video',
+    title: "Alicia's Workout Plan",
+    mimeType: 'video/mp4',
+    detail: '1:20',
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    label: 'Audio',
+    title: 'Morning Meditation',
+    mimeType: 'audio/mpeg',
+    detail: '4:35',
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
+    sourceUrl: AUDIO_SOURCE,
+  },
+  {
+    label: 'Image',
+    title: 'Picture of my cat',
+    mimeType: 'image/jpeg',
+    detail: '3.2 MB',
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    label: 'Document',
+    title: 'Strength Training Guide',
+    mimeType: 'application/zip',
+    detail: '14 files',
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    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,
+  },
+]
+
+/**
+ * A mixed-media collection (a video + 3 photos) used by the Gallery stories
+ * below. Each `LockedAttachment.*` card accepts a `gallery` prop and renders
+ * a carousel of these items when 2+ items are provided.
+ */
+const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
+  {
+    mimeType: 'video/mp4',
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    sourceUrl: VIDEO_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    sourceUrl: IMAGE_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    sourceUrl: DOCUMENT_SOURCE,
+  },
+  {
+    mimeType: 'image/jpeg',
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    sourceUrl: AUDIO_SOURCE,
+  },
+]
+
+const GALLERY_DETAIL = '1 video, 3 photos'
+const GALLERY_TITLE = 'Workout Guide'
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const TableHead = ({
+  variants,
+}: {
+  variants: { label: string; mimeType: string }[]
+}) => (
+  <thead>
+    <tr>
+      <th className="text-left text-xs font-medium text-black/40 pb-2" />
+      {variants.map(({ label, mimeType }) => (
+        <th
+          key={mimeType}
+          className="text-left text-xs font-medium text-black/40 pb-2"
+        >
+          {label}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+export const Composer: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Preview
+        </td>
+        {VARIANTS.map(
+          ({
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Composer
+                placeholderTitle="Attachment title"
+                placeholderAmountText="AU$0.00"
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
+      </tr>
+      <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Pending
+        </td>
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+          <td key={mimeType} className="align-top">
+            <LockedAttachment.Composer
+              title={title}
+              thumbnailUrl={thumbnailUrl}
+              mimeType={mimeType}
+              detail={detail}
+              amountText="AU$9.99"
+              onDismiss={() => alert('Dismissed')}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const Sent: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
+    <tbody>
+      <tr>
+        <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,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Sent
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
+      </tr>
+      <tr>
+        <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,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Sent
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                paymentStatus="paid"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export const Gallery: StoryFn = () => {
+  const [isPaid, setPaid] = useState(false)
+  const [isUnlocking, setUnlocking] = useState(false)
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th className="text-left text-xs font-medium text-black/40 pb-2" />
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Composer
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Sent
+          </th>
+          <th className="text-left text-xs font-medium text-black/40 pb-2">
+            Received
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onDismiss={() => alert('Dismissed gallery')}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              paymentStatus={isPaid ? 'paid' : undefined}
+              isUnlocking={isUnlocking}
+              onUnlockClick={() => {
+                setUnlocking(true)
+                setTimeout(() => {
+                  setUnlocking(false)
+                  setPaid(true)
+                }, 1500)
+              }}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Sold / Purchased
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Composer
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              gallery={GALLERY_ITEMS}
+              onEditClick={() => alert('Edit gallery')}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Sent
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+            />
+          </td>
+          <td className="align-top">
+            <LockedAttachment.Received
+              title={GALLERY_TITLE}
+              detail={GALLERY_DETAIL}
+              amountText="AU$50.00"
+              paymentStatus="paid"
+              gallery={GALLERY_ITEMS}
+              onDownloadClick={() => alert('Download gallery')}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export const Received: StoryFn = () => {
+  const [isPaid, setPaid] = useState<string | undefined>()
+  const [isUnlocking, setUnlocking] = useState<string | undefined>()
+
+  return (
+    <Table>
+      <TableHead variants={VARIANTS} />
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
+          </td>
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
+                  amountText="AU$9.99"
+                  isUnlocking={isUnlocking === mimeType}
+                  onUnlockClick={() => {
+                    setUnlocking(mimeType)
+                    setTimeout(() => {
+                      setUnlocking(undefined)
+                      setPaid(mimeType)
+                    }, 1500)
+                  }}
+                  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.Received
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => alert('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </td>
+            )
+          )}
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+// LockedAttachment.Received autoplays the video preview once paid; even with
+// our SMIL/CSS animation freeze the <video> element advances frames
+// independently and produces a non-deterministic snapshot. Skip in Chromatic.
+Received.parameters = { chromatic: { disableSnapshot: true } }