@linktr.ee/messaging-react 1.26.1 → 1.27.0

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

@@ -1,37 +1,38 @@
+import '../../stream-custom-data'
+
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
 import {
   Channel as ChannelType,
+  LocalMessage,
   QueryChannelAPIResponse,
   StreamChat,
 } from 'stream-chat'
 import { Channel, Chat, MessageList, Window } from 'stream-chat-react'
 
-import { mockParticipants } from '../../stories/mocks'
+import {
+  currentUserArgType,
+  StoryUser,
+  storyUsers,
+} from '../../stories/decorators/storyUser'
 
 import { CustomMessage } from './index'
 
 const meta: Meta = {
   title: 'Components/CustomMessage',
   component: CustomMessage,
+  argTypes: currentUserArgType,
+  args: { currentUser: storyUsers.creator },
   parameters: {
     layout: 'fullscreen',
   },
 }
 export default meta
 
-const mockUser = {
-  id: 'storybook-user',
-  name: 'Storybook User',
-  image: 'https://i.pravatar.cc/150?img=1',
-}
-
 const createMockChannel = async (
   client: StreamChat,
   messages: TemplateProps['messages']
 ) => {
-  const participant = mockParticipants[0]
-
   const mockMessages = messages.map((msg, index) => ({
     ...msg,
     type: msg.type ?? ('regular' as const),
@@ -50,7 +51,7 @@ const createMockChannel = async (
   }))
 
   const channelData = {
-    members: [mockUser.id, participant.id],
+    members: [storyUsers.creator.id, storyUsers.visitor.id],
   }
 
   const channel = client.channel(
@@ -63,8 +64,14 @@ const createMockChannel = async (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     channel.state.messages = mockMessages as unknown as any[]
     channel.state.members = {
-      [mockUser.id]: { user: mockUser, user_id: mockUser.id },
-      [participant.id]: { user: participant, user_id: participant.id },
+      [storyUsers.creator.id]: {
+        user: storyUsers.creator,
+        user_id: storyUsers.creator.id,
+      },
+      [storyUsers.visitor.id]: {
+        user: storyUsers.visitor,
+        user_id: storyUsers.visitor.id,
+      },
     }
     return {
       channel: channelData,
@@ -86,24 +93,36 @@ const createMockChannel = async (
 }
 
 interface TemplateProps {
+  currentUser: StoryUser
   messages: Array<{
     id: string
     text: string
-    user: typeof mockUser | { id: string; name: string }
+    user: StoryUser
     type?: 'regular' | 'system'
     attachments?: Array<Record<string, unknown>>
     metadata?: {
-      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+      custom_type?:
+        | 'MESSAGE_TIP'
+        | 'MESSAGE_PAID'
+        | 'MESSAGE_CHATBOT'
+        | 'MESSAGE_ATTACHMENT'
       amount_text?: string
+      attachment_title?: string
+      attachment_mime_type?: string
+      attachment_thumbnail?: string
+      attachment_detail?: string
     }
   }>
 }
 
-const Template: StoryFn<TemplateProps> = ({ messages }) => {
+const TemplateInner: React.FC<{
+  currentUser: StoryUser
+  messages: TemplateProps['messages']
+}> = ({ currentUser, messages }) => {
   const [client] = React.useState(() => {
     const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
-    c.userID = mockUser.id
-    c.user = mockUser
+    c.userID = currentUser.id
+    c.user = currentUser
     return c
   })
 
@@ -113,6 +132,32 @@ const Template: StoryFn<TemplateProps> = ({ messages }) => {
     createMockChannel(client, messages).then(setChannel)
   }, [client, messages])
 
+  const isVisitor = currentUser.id === storyUsers.visitor.id
+
+  const MessageComponent = React.useMemo(() => {
+    const handleAttachmentUnlock = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return { source: '/video-source.mp4', poster: '/video-thumbnail.jpg' }
+    }
+
+    const handleAttachmentDownload = (m: LocalMessage) => {
+      alert(`Download: ${m.metadata?.attachment_title}`)
+    }
+
+    // eslint-disable-next-line react/display-name
+    return function (props) {
+      return (
+        <CustomMessage
+          {...props}
+          onAttachmentUnlock={isVisitor ? handleAttachmentUnlock : undefined}
+          onAttachmentDownload={
+            isVisitor ? handleAttachmentDownload : undefined
+          }
+        />
+      )
+    }
+  }, [isVisitor])
+
   if (!channel) {
     return <div className="p-4">Loading...</div>
   }
@@ -120,7 +165,7 @@ const Template: StoryFn<TemplateProps> = ({ messages }) => {
   return (
     <Chat client={client}>
       <div className="h-screen w-full bg-white">
-        <Channel channel={channel} Message={CustomMessage}>
+        <Channel channel={channel} Message={MessageComponent}>
           <Window>
             <MessageList />
           </Window>
@@ -130,81 +175,168 @@ const Template: StoryFn<TemplateProps> = ({ messages }) => {
   )
 }
 
-const participant = mockParticipants[0]
+const Template: StoryFn<TemplateProps> = ({
+  currentUser = storyUsers.creator,
+  messages,
+}) => (
+  <TemplateInner
+    key={currentUser.id}
+    currentUser={currentUser}
+    messages={messages}
+  />
+)
 
 export const Default: StoryFn<TemplateProps> = Template.bind({})
 Default.args = {
   messages: [
-    { id: 'msg-1', text: 'Hey, how are you?', user: participant },
-    { id: 'msg-2', text: "I'm doing great, thanks!", user: mockUser },
-    { id: 'msg-3', text: 'Awesome! Have a good day.', user: participant },
+    {
+      id: 'msg-1',
+      text: 'Hey, how are you?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: "I'm doing great, thanks!",
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'Awesome! Have a good day.',
+      user: storyUsers.visitor,
+    },
   ],
 }
 
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
 WithTipTag.args = {
   messages: [
-    { id: 'msg-1', text: 'Love your content!', user: participant },
+    {
+      id: 'msg-1',
+      text: 'Love your content!',
+      user: storyUsers.visitor,
+    },
     {
       id: 'msg-2',
       text: "Here's a tip for you! Keep up the great work.",
-      user: participant,
+      user: storyUsers.visitor,
       metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
     },
-    { id: 'msg-3', text: 'Thank you so much! 🙏', user: mockUser },
+    {
+      id: 'msg-3',
+      text: 'Thank you so much! 🙏',
+      user: storyUsers.creator,
+    },
   ],
 }
 
 export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
 TipOnly.args = {
   messages: [
-    { id: 'msg-1', text: 'Hello!', user: participant },
+    {
+      id: 'msg-1',
+      text: 'Hello!',
+      user: storyUsers.visitor,
+    },
     {
       id: 'msg-2',
       text: '',
-      user: participant,
+      user: storyUsers.visitor,
       metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
     },
-    { id: 'msg-3', text: 'Wow, thank you for the tip!', user: mockUser },
+    {
+      id: 'msg-3',
+      text: 'Wow, thank you for the tip!',
+      user: storyUsers.creator,
+    },
   ],
 }
 
 export const MixedTags: StoryFn<TemplateProps> = Template.bind({})
 MixedTags.args = {
   messages: [
-    { id: 'msg-1', text: 'Regular message from a fan', user: participant },
+    {
+      id: 'msg-1',
+      text: 'Regular message from a fan',
+      user: storyUsers.visitor,
+    },
     {
       id: 'msg-2',
       text: 'I wanted to tip you for your amazing work!',
-      user: participant,
+      user: storyUsers.visitor,
       metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
     },
-    { id: 'msg-3', text: 'Thank you!', user: mockUser },
+    {
+      id: 'msg-3',
+      text: 'Thank you!',
+      user: storyUsers.creator,
+    },
     {
       id: 'msg-4',
       text: '',
-      user: participant,
+      user: storyUsers.visitor,
       metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$25.00' },
     },
     {
       id: 'msg-5',
       text: 'Wow, a tip with no message! Thanks!',
-      user: mockUser,
+      user: storyUsers.creator,
     },
     {
       id: 'msg-6',
       text: 'This is a paid message!',
-      user: participant,
+      user: storyUsers.visitor,
       metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
     },
-    { id: 'msg-7', text: 'Got it, thanks!', user: mockUser },
+    {
+      id: 'msg-7',
+      text: 'Got it, thanks!',
+      user: storyUsers.creator,
+    },
     {
       id: 'msg-8',
       text: 'This is from a chatbot!',
-      user: participant,
+      user: storyUsers.creator,
       metadata: { custom_type: 'MESSAGE_CHATBOT' },
     },
-    { id: 'msg-9', text: 'Thanks for letting me know.', user: mockUser },
+    {
+      id: 'msg-9',
+      text: 'Thanks for letting me know.',
+      user: storyUsers.creator,
+    },
+  ],
+}
+
+export const PaidAttachment: StoryFn<TemplateProps> = Template.bind({})
+PaidAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can I have your workout plan?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'yes here it is',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$9.99',
+        attachment_title: "Alicia's Workout Plan",
+        attachment_mime_type: 'video/mp4',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '1:20',
+      },
+    },
+    {
+      id: 'msg-3',
+      text: 'let me know if you have any questions!',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-4',
+      text: 'Looks amazing, unlocking now!',
+      user: storyUsers.visitor,
+    },
   ],
 }
 
@@ -214,19 +346,19 @@ ChatbotVariants.args = {
     {
       id: 'msg-1',
       text: 'Would you like to share some details that I can relay to Rupi Kaur?',
-      user: participant,
+      user: storyUsers.creator,
       metadata: { custom_type: 'MESSAGE_CHATBOT' },
     },
     {
       id: 'msg-2',
-      text: 'I’m sorry to hear that. Are you referring to the course you’ve recently purchased?',
-      user: mockUser,
+      text: "I'm sorry to hear that. Are you referring to the course you've recently purchased?",
+      user: storyUsers.creator,
       metadata: { custom_type: 'MESSAGE_CHATBOT' },
     },
     {
       id: 'msg-3',
       text: '',
-      user: mockUser,
+      user: storyUsers.creator,
       metadata: { custom_type: 'MESSAGE_CHATBOT' },
       attachments: [
         {

package/src/components/CustomMessage/MessageTag.tsx

@@ -42,6 +42,11 @@ export const isChatbotMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_CHATBOT'
 }
 
+/** Check if a message is a locked attachment */
+export const isAttachmentMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
+}
+
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/index.tsx

@@ -1,5 +1,6 @@
 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,
@@ -20,6 +21,7 @@ import {
   isMessageBounced,
   messageHasAttachments,
   messageHasReactions,
+  useChannelStateContext,
   useComponentContext,
   useChatContext,
   useMessageContext,
@@ -30,18 +32,23 @@ import {
 
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
+import LockedAttachment, { type LockedAttachmentSource } from '../LockedAttachment'
 
-import { MessageTag, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
+import { MessageTag, isAttachmentMessage, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
+  onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource>
+  onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
     chatbotVotingEnabled,
+    onAttachmentUnlock,
+    onAttachmentDownload,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -58,6 +65,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   } = props
 
   const { client } = useChatContext('CustomMessage')
+  const { channel } = useChannelStateContext('CustomMessage')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
@@ -144,6 +152,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const poll = message.poll_id && client.polls.fromState(message.poll_id)
   const isTipOnly = isTipOnlyMessage(message)
   const isChatbot = isChatbotMessage(message)
+  const isAttachment = isAttachmentMessage(message)
   const hasRenderableAttachments = !!(
     finalAttachments?.length && !message.quoted_message
   )
@@ -192,7 +201,28 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
+          {isAttachment ? (
+            <div className="flex flex-col gap-2">
+              <LockedAttachment
+                isCreator={isMine}
+                title={message.metadata?.attachment_title}
+                mimeType={message.metadata?.attachment_mime_type}
+                thumbnail={message.metadata?.attachment_thumbnail}
+                amountText={message.metadata?.amount_text}
+                detail={message.metadata?.attachment_detail}
+                paymentStatus={message.metadata?.payment_status}
+                onUnlock={onAttachmentUnlock ? () => onAttachmentUnlock(message, channel) : undefined}
+                onDownload={onAttachmentDownload ? () => onAttachmentDownload(message, channel) : undefined}
+              />
+              {message.text && (
+                <div className="str-chat__message-bubble-wrapper">
+                  <div className="str-chat__message-bubble">
+                    <MessageText message={message} renderText={renderText} />
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : isTipOnly ? (
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
           ) : (
@@ -256,11 +286,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 
 const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
-  areMessageUIPropsEqual
+  (prev, next) => {
+    if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
+    if (prev.onAttachmentUnlock !== next.onAttachmentUnlock) return false
+    if (prev.onAttachmentDownload !== next.onAttachmentDownload) return false
+    return areMessageUIPropsEqual(prev, next)
+  }
 ) as typeof CustomMessageWithContext
 
 export const CustomMessage = (
-  props: MessageUIComponentProps & { chatbotVotingEnabled?: boolean }
+  props: MessageUIComponentProps & {
+    chatbotVotingEnabled?: boolean
+    onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource>
+    onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
+  }
 ) => {
   const messageContext = useMessageContext('CustomMessage')
   return <MemoizedCustomMessage {...messageContext} {...props} />