@linktr.ee/messaging-react 1.31.0-rc-1776677746 → 1.31.0

package/package.json

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

package/src/components/ChannelView.tsx

@@ -1,7 +1,7 @@
 import { ArrowLeftIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
-import { Channel as ChannelType, LocalMessage } from 'stream-chat'
+import { Channel as ChannelType } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -13,7 +13,7 @@ import {
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
-import type { ChannelViewProps, LockedAttachmentSource } from '../types'
+import type { ChannelViewProps } from '../types'
 
 import { Avatar } from './Avatar'
 import { ChannelInfoDialog } from './ChannelInfoDialog'
@@ -207,9 +207,6 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick?: () => void
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
-  onAttachmentUnlockClick?: (message: LocalMessage, channel: ChannelType) => void
-  onAttachmentDownloadClick?: (message: LocalMessage, channel: ChannelType) => void
-  onAttachmentUnlocked?: (message: LocalMessage, channel: ChannelType) => LockedAttachmentSource
   renderChannelBanner?: () => React.ReactNode
   customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
@@ -230,9 +227,6 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick,
   showStarButton = false,
   chatbotVotingEnabled = false,
-  onAttachmentUnlockClick,
-  onAttachmentDownloadClick,
-  onAttachmentUnlocked,
   renderChannelBanner,
   customProfileContent,
   customChannelActions,
@@ -278,30 +272,30 @@ const ChannelViewInner: React.FC<{
     infoDialogRef.current?.close()
   }, [])
 
-  return (
-    <>
-      <WithComponents
-        overrides={{
-          Message: (props: MessageUIComponentProps) => {
-            const { message } = useMessageContext('ChannelView')
-            const messageNode = (
-              <CustomMessage
-                {...props}
-                chatbotVotingEnabled={chatbotVotingEnabled}
-                onAttachmentUnlockClick={onAttachmentUnlockClick}
-                onAttachmentDownloadClick={onAttachmentDownloadClick}
-                onAttachmentUnlocked={onAttachmentUnlocked}
-              />
-            )
+  // Prevents all message instances from unmounting when ChannelViewInner re-renders
+  const MessageOverride = useCallback(
+    (props: MessageUIComponentProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { message } = useMessageContext('ChannelView')
+      const messageNode = (
+        <CustomMessage
+          {...props}
+          chatbotVotingEnabled={chatbotVotingEnabled}
+        />
+      )
+
+      if (!renderMessage || !message) {
+        return messageNode
+      }
 
-            if (!renderMessage || !message) {
-              return messageNode
-            }
+      return renderMessage(messageNode, message)
+    },
+    [chatbotVotingEnabled, renderMessage]
+  )
 
-            return renderMessage(messageNode, message)
-          },
-        }}
-      >
+  return (
+    <>
+      <WithComponents overrides={{ Message: MessageOverride }}>
         <Window>
           {/* Custom Channel Header */}
           <div className="p-4">
@@ -378,9 +372,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onMessageSent,
     showStarButton = false,
     chatbotVotingEnabled = false,
-    onAttachmentUnlockClick,
-    onAttachmentDownloadClick,
-    onAttachmentUnlocked,
     renderChannelBanner,
     customProfileContent,
     customChannelActions,
@@ -459,9 +450,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onReportParticipantClick={onReportParticipantClick}
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
-            onAttachmentUnlockClick={onAttachmentUnlockClick}
-            onAttachmentDownloadClick={onAttachmentDownloadClick}
-            onAttachmentUnlocked={onAttachmentUnlocked}
             renderChannelBanner={renderChannelBanner}
             customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -132,28 +132,15 @@ const TemplateInner: React.FC<{
     createMockChannel(client, messages).then(setChannel)
   }, [client, messages])
 
-  const isVisitor = currentUser.id === storyUsers.visitor.id
-
   const MessageComponent = React.useMemo(() => {
-    const handleAttachmentUnlockClicked = () => {
-      alert('Unlocking...')
-    }
-
-    const handleAttachmentDownloadClicked = () => {
-      alert(`Downloading...`)
-    }
-
     return function CustomMessageComponent(props: MessageUIComponentProps) {
       return (
         <CustomMessage
           {...props}
-          onAttachmentUnlockClick={isVisitor ? () => handleAttachmentUnlockClicked() : undefined}
-          onAttachmentDownloadClick={isVisitor ? () => handleAttachmentDownloadClicked() : undefined}
-          onAttachmentUnlocked={undefined}
         />
       )
     }
-  }, [isVisitor])
+  }, [])
 
   if (!channel) {
     return <div className="p-4">Loading...</div>

package/src/components/CustomMessage/context.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from '../LockedAttachment/types'
+
+export interface CustomMessageRegistry {
+  LockedAttachment: LockedAttachmentContextValue
+}
+
+const customMessageDefaults: CustomMessageRegistry = {
+  LockedAttachment: defaultLockedAttachmentContextValue,
+}
+
+const CustomMessageContext = createContext<Partial<CustomMessageRegistry>>({})
+
+export const CustomMessageProvider = CustomMessageContext.Provider
+
+export function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K] {
+  const ctx = useContext(CustomMessageContext)
+  return (ctx[key] ?? customMessageDefaults[key]) as CustomMessageRegistry[K]
+}

package/src/components/CustomMessage/index.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames'
 import React, { useMemo, useState } from 'react'
-import { type Channel, type LocalMessage } from 'stream-chat'
 import {
   Attachment as DefaultAttachment,
   EditMessageModal as DefaultEditMessageModal,
@@ -32,29 +31,29 @@ import {
 
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
-import LockedAttachment, { type LockedAttachmentSource } from '../LockedAttachment'
+import LockedAttachment from '../LockedAttachment'
 
-import { MessageTag, isAttachmentMessage, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
+import { useCustomMessage } from './context'
+import {
+  MessageTag,
+  isAttachmentMessage,
+  isChatbotMessage,
+  isTipOnlyMessage,
+} from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
 
-type CustomMessageProps = {
+type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
-  onAttachmentUnlockClick?: (message: LocalMessage, channel: Channel) => void
-  onAttachmentDownloadClick?: (message: LocalMessage, channel: Channel) => void
-  onAttachmentUnlocked?: (message: LocalMessage, channel: Channel) => LockedAttachmentSource
 }
 
-type CustomMessageUIComponentProps = MessageUIComponentProps & CustomMessageProps
-
-type CustomMessageWithContextProps = MessageContextValue & CustomMessageProps
+type CustomMessageWithContextProps = MessageContextValue & {
+  chatbotVotingEnabled?: boolean
+}
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
     chatbotVotingEnabled,
-    onAttachmentUnlockClick,
-    onAttachmentDownloadClick,
-    onAttachmentUnlocked,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -72,6 +71,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 
   const { client } = useChatContext('CustomMessage')
   const { channel } = useChannelStateContext('CustomMessage')
+  const { isUnlocking, onUnlockClick, onFetchSource, onDownloadClick } = useCustomMessage('LockedAttachment')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
@@ -208,18 +208,32 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           }}
         >
           {isAttachment ? (
-            <div className={classNames("flex flex-col gap-1", isMine ? "items-end" : "items-start")}>
-              <LockedAttachment
-                title={message.metadata?.attachment_title}
-                mimeType={message.metadata?.attachment_mime_type ?? 'application/octet-stream'}
-                thumbnailUrl={message.metadata?.attachment_thumbnail}
-                amountText={message.metadata?.amount_text}
-                detail={message.metadata?.attachment_detail}
-                paymentStatus={message.metadata?.payment_status}
-                onUnlockClick={onAttachmentUnlockClick ? () => onAttachmentUnlockClick(message, channel) : undefined}
-                onDownloadClick={onAttachmentDownloadClick ? () => onAttachmentDownloadClick(message, channel) : undefined}
-                onUnlocked={onAttachmentUnlocked ? () => onAttachmentUnlocked(message, channel) : undefined} 
-              />
+            <div className={`flex flex-col gap-1 ${isMine ? 'items-end' : 'items-start'}`}>
+              {isMine ? (
+                <LockedAttachment.Creator
+                  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}
+                />
+              ) : (
+                <LockedAttachment.Visitor
+                  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?.(message, channel)}
+                  onFetchSource={async () =>
+                    await onFetchSource?.(message, channel)
+                  }
+                  onDownloadClick={() => onDownloadClick?.(message, channel)}
+                />
+              )}
               {message.text && (
                 <div className="str-chat__message-bubble-wrapper">
                   <div className="str-chat__message-bubble">
@@ -294,9 +308,6 @@ const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
-    if (prev.onAttachmentUnlockClick !== next.onAttachmentUnlockClick) return false
-    if (prev.onAttachmentDownloadClick !== next.onAttachmentDownloadClick) return false
-    if (prev.onAttachmentUnlocked !== next.onAttachmentUnlocked) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext

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

@@ -17,7 +17,6 @@ const AUDIO_SOURCE = '/audio-source.mp3'
 
 const meta: Meta = {
   title: 'Components/LockedAttachment',
-  component: LockedAttachment,
   parameters: { layout: 'centered' },
 }
 export default meta
@@ -99,7 +98,7 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Visitor
               title={title}
               amountText="AU$9.99"
               thumbnailUrl={thumbnailUrl}
@@ -107,7 +106,6 @@ export const Visitor: StoryFn = () => (
               detail={detail}
               onUnlockClick={() => {}}
               onDownloadClick={() => {}}
-              onUnlocked={undefined}
             />
           </td>
         ))}
@@ -118,7 +116,7 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Visitor
               title={title}
               amountText="AU$9.99"
               thumbnailUrl={thumbnailUrl}
@@ -127,7 +125,6 @@ export const Visitor: StoryFn = () => (
               paymentStatus="paid"
               onUnlockClick={() => {}}
               onDownloadClick={() => {}}
-              onUnlocked={undefined}
             />
           </td>
         ))}
@@ -138,16 +135,15 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Visitor
               title={title}
               thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
-              onUnlockClick={() => {}}
+              onUnlockClick={() => Promise.resolve({ sourceUrl })}
               onDownloadClick={() => {}}
-              onUnlocked={() => ({ sourceUrl })}
             />
           </td>
         ))}
@@ -166,7 +162,7 @@ export const Creator: StoryFn = () => (
         </td>
         {VARIANTS.map(({ mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Creator
               isPreview={true}
               thumbnailUrl={thumbnailUrl}
               sourceUrl={sourceUrl}
@@ -184,7 +180,7 @@ export const Creator: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
               sourceUrl={sourceUrl}
@@ -202,7 +198,7 @@ export const Creator: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
               sourceUrl={sourceUrl}
@@ -220,7 +216,7 @@ export const Creator: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
-            <LockedAttachment
+            <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
               sourceUrl={sourceUrl}
@@ -236,4 +232,3 @@ export const Creator: StoryFn = () => (
     </tbody>
   </Table>
 )
-

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

@@ -0,0 +1,159 @@
+import {
+  CheckCircleIcon,
+  LockIcon,
+  LockOpenIcon,
+  XIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+
+import type { LockedAttachmentBaseProps } from '../../types'
+import { renderTypeIcon } from '../../utils/icons'
+import { getSourceType } from '../../utils/mimeType'
+
+import AudioPreview from './CardAudioPreview'
+import CollapsedThumbnail from './CardCollapsedThumbnail'
+import ImagePreview from './CardImagePreview'
+import VideoPreview from './CardVideoPreview'
+
+export interface CreatorCardProps extends LockedAttachmentBaseProps {
+  isPreview?: boolean
+  placeholderTitle?: string
+  placeholderAmountText?: string
+  sourceUrl?: string
+  onDismiss?: () => void
+}
+
+const CreatorCard: React.FC<CreatorCardProps> = (props) => {
+  const {
+    title,
+    mimeType = 'application/octet-stream',
+    thumbnailUrl,
+    sourceUrl,
+    detail,
+    amountText,
+    placeholderTitle = 'Attachment title',
+    placeholderAmountText,
+    paymentStatus,
+    onDismiss,
+    isPreview = false,
+  } = props
+  const sourceType = getSourceType(mimeType)
+  const displayAmountText = amountText ?? placeholderAmountText
+  const isPlaceholderAmount = !amountText && !!placeholderAmountText
+
+  let mediaPreview: React.ReactNode
+  if (isPreview && sourceType === 'audio') {
+    mediaPreview = (
+      <AudioPreview
+        key={sourceUrl}
+        sourceUrl={sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+      />
+    )
+  } else if (isPreview && sourceType === 'video') {
+    mediaPreview = (
+      <VideoPreview
+        key={sourceUrl}
+        sourceUrl={sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+      />
+    )
+  } else if (isPreview && sourceType === 'image') {
+    mediaPreview = (
+      <ImagePreview
+        key={sourceUrl}
+        sourceUrl={sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        title={title}
+      />
+    )
+  } else {
+    const lockedOverlayIcon = onDismiss
+      ? undefined
+      : paymentStatus === 'paid'
+        ? LockOpenIcon
+        : LockIcon
+    mediaPreview = (
+      <CollapsedThumbnail
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        overlayIcon={lockedOverlayIcon}
+        darkOverlay
+      />
+    )
+  }
+
+  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)]">
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="absolute right-3 top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
+          aria-label="Dismiss attachment"
+        >
+          <XIcon className="size-4" weight="bold" />
+        </button>
+      )}
+      {mediaPreview}
+      <div className="px-4 pb-3 pt-3">
+        <p
+          className={classNames('mb-1.5 truncate text-base font-medium', {
+            'text-black/30': !title,
+            'text-black': !!title,
+          })}
+        >
+          {title || placeholderTitle}
+        </p>
+        <div className="flex items-center gap-1">
+          {renderTypeIcon(mimeType, {
+            className: 'size-5 shrink-0 text-black/55',
+            weight: 'regular',
+          })}
+          {detail && (
+            <span className="text-xs font-medium text-black/55">{detail}</span>
+          )}
+          {paymentStatus === 'paid' ? (
+            <>
+              <span className="text-xs font-medium text-black/55">•</span>
+              <span className="text-xs font-medium text-[#008236]">
+                Purchased
+              </span>
+              <CheckCircleIcon
+                className="size-4 text-[#008236]"
+                weight="bold"
+              />
+            </>
+          ) : (
+            displayAmountText && (
+              <>
+                <span
+                  className={classNames('text-xs font-medium', {
+                    'text-black/30': isPlaceholderAmount,
+                    'text-black/55': !isPlaceholderAmount,
+                  })}
+                >
+                  •
+                </span>
+                <span
+                  className={classNames('text-xs font-medium', {
+                    'text-black/30': isPlaceholderAmount,
+                    'text-black/55': !isPlaceholderAmount,
+                  })}
+                >
+                  {displayAmountText}
+                </span>
+              </>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CreatorCard