@linktr.ee/messaging-react 4.2.0-rc-1787083791 → 4.2.0-rc-1787181113

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

@@ -2,11 +2,7 @@ import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
-import {
-  Channel as ChannelType,
-  QueryChannelAPIResponse,
-  StreamChat,
-} from 'stream-chat'
+import { Channel as ChannelType } from 'stream-chat'
 import {
   Channel,
   Chat,
@@ -16,18 +12,20 @@ import {
   WithComponents,
 } from 'stream-chat-react'
 
-import { minutesAgo } from '../../stories/decorators/storyTime'
+import {
+  Template,
+  createMockChannel,
+  type TemplateProps,
+} from '../../stories/customMessageStoryTemplate'
 import {
   currentUserArgType,
   StoryUser,
   storyUsers,
 } from '../../stories/decorators/storyUser'
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import type { OutboundResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
 import { CustomMessageActions } from './CustomMessageActions'
-import { OutboundContext, buildOutboundsByRecordId } from './OutboundContext'
 
 import { CustomMessage } from './index'
 
@@ -42,180 +40,6 @@ const meta: Meta = {
 }
 export default meta
 
-const createMockChannel = async (
-  client: StreamChat,
-  messages: TemplateProps['messages']
-) => {
-  const mockMessages = messages.map((msg, index) => ({
-    ...msg,
-    type: msg.type ?? ('regular' as const),
-    created_at: minutesAgo(messages.length - index),
-    updated_at: minutesAgo(messages.length - index),
-    attachments: msg.attachments ?? [],
-    latest_reactions: [],
-    own_reactions: [],
-    reaction_counts: {},
-    reaction_scores: {},
-    reply_count: 0,
-    status: 'received',
-    cid: 'messaging:storybook-channel-1',
-    mentioned_users: msg.mentioned_users ?? [],
-  }))
-
-  const channelData = {
-    members: [storyUsers.creator.id, storyUsers.visitor.id],
-    // Required for useUserRole: canDelete needs delete-own-message, canFlag needs flag-message
-    own_capabilities: ['delete-own-message', 'flag-message'],
-  }
-
-  const channel = client.channel(
-    'messaging',
-    'storybook-channel-1',
-    channelData
-  )
-
-  channel.watch = async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    channel.state.messages = mockMessages as unknown as any[]
-    channel.state.members = {
-      [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,
-      members: [],
-      messages: mockMessages,
-      watchers: [],
-      pinned_messages: [],
-      duration: '0ms',
-    } as unknown as QueryChannelAPIResponse
-  }
-
-  try {
-    await channel.watch()
-  } catch {
-    // Ignore errors in mock mode
-  }
-
-  return channel
-}
-
-interface TemplateProps {
-  currentUser: StoryUser
-  typingUser?: StoryUser
-  resolveOutbound?: OutboundResolver
-  messages: Array<{
-    id: string
-    text: string
-    user: StoryUser
-    mentioned_users?: StoryUser[]
-    type?: 'regular' | 'system'
-    attachments?: Array<Record<string, unknown>>
-    metadata?: {
-      custom_type?:
-        | 'MESSAGE_TIP'
-        | 'MESSAGE_PAID'
-        | 'MESSAGE_CHATBOT'
-        | 'MESSAGE_ATTACHMENT'
-        | 'MESSAGE_OUTBOUND'
-      payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
-      amount_text?: string
-      attachment_title?: string
-      attachment_mime_type?: string
-      attachment_thumbnail?: string
-      attachment_detail?: string
-      attachment_content_type?: 'text' | 'media'
-      outbound_id?: string
-    }
-  }>
-}
-
-const TemplateInner: React.FC<{
-  currentUser: StoryUser
-  typingUser?: StoryUser
-  messages: TemplateProps['messages']
-  resolveOutbound?: OutboundResolver
-}> = ({ currentUser, typingUser, messages, resolveOutbound }) => {
-  const [client] = React.useState(() => createMockStreamChatClient(currentUser))
-
-  const [channel, setChannel] = React.useState<ChannelType | null>(null)
-
-  useEffect(() => {
-    createMockChannel(client, messages).then(setChannel)
-  }, [client, messages])
-
-  useEffect(() => {
-    if (!channel || !typingUser) {
-      return
-    }
-
-    // Stream Channel UI only updates typing context from typing.start/typing.stop events.
-    const timer = setTimeout(() => {
-      client.dispatchEvent({
-        type: 'typing.start',
-        cid: channel.cid,
-        user: typingUser,
-      })
-    }, 0)
-
-    return () => clearTimeout(timer)
-  }, [channel, client, typingUser])
-
-  const outboundsByRecordId = React.useMemo(
-    () => buildOutboundsByRecordId(messages, resolveOutbound),
-    [messages, resolveOutbound]
-  )
-
-  const MessageComponent = React.useMemo(() => {
-    return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return <CustomMessage {...props} onOutboundClick={() => undefined} />
-    }
-  }, [])
-
-  if (!channel) {
-    return <div className="p-4">Loading...</div>
-  }
-
-  return (
-    <OutboundContext.Provider value={outboundsByRecordId}>
-      <Chat client={client}>
-        <div className="h-screen w-full bg-white">
-          <Channel
-            channel={channel}
-            Message={MessageComponent}
-            TypingIndicator={CustomTypingIndicator}
-          >
-            <Window>
-              <MessageList />
-            </Window>
-          </Channel>
-        </div>
-      </Chat>
-    </OutboundContext.Provider>
-  )
-}
-
-const Template: StoryFn<TemplateProps> = ({
-  currentUser = storyUsers.creator,
-  typingUser,
-  messages,
-  resolveOutbound,
-}) => (
-  <TemplateInner
-    key={currentUser.id}
-    currentUser={currentUser}
-    typingUser={typingUser}
-    messages={messages}
-    resolveOutbound={resolveOutbound}
-  />
-)
-
 export const Default: StoryFn<TemplateProps> = Template.bind({})
 Default.args = {
   messages: [
@@ -342,28 +166,6 @@ OutboundStatusResolved.args = {
   }),
 }
 
-export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
-WithTipTag.args = {
-  messages: [
-    {
-      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: storyUsers.visitor,
-      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
-    },
-    {
-      id: 'msg-3',
-      text: 'Thank you so much! 🙏',
-      user: storyUsers.creator,
-    },
-  ],
-}
-
 export const ThreeConsecutiveSentMessages: StoryFn<TemplateProps> =
   Template.bind({})
 ThreeConsecutiveSentMessages.args = {
@@ -391,28 +193,6 @@ ThreeConsecutiveSentMessages.args = {
   ],
 }
 
-export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
-TipOnly.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Hello!',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      text: '',
-      user: storyUsers.visitor,
-      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-    },
-    {
-      id: 'msg-3',
-      text: 'Wow, thank you for the tip!',
-      user: storyUsers.creator,
-    },
-  ],
-}
-
 export const MixedTags: StoryFn<TemplateProps> = Template.bind({})
 MixedTags.args = {
   messages: [
@@ -468,94 +248,6 @@ MixedTags.args = {
   ],
 }
 
-export const LockedAttachment: StoryFn<TemplateProps> = Template.bind({})
-LockedAttachment.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Can I have your workout plan?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      text: 'Yes, of course!',
-      user: storyUsers.creator,
-    },
-    {
-      id: 'msg-3',
-      text: 'let me know if you have any questions!',
-      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-4',
-      text: 'Looks amazing, unlocking now!',
-      user: storyUsers.visitor,
-    },
-  ],
-}
-
-export const LockedTextAttachment: StoryFn<TemplateProps> = Template.bind({})
-LockedTextAttachment.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Can you send me the details privately?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      // Empty text: the real content is redacted server-side until purchase,
-      // so the bubble renders the blurred placeholder instead.
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-3',
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-4',
-      // Buyer reveal: backend writes the real text back onto the message.
-      text: "Here's the address — see you Thursday at 7!",
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-  ],
-}
-LockedTextAttachment.parameters = {
-  docs: {
-    description: {
-      story:
-        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
-    },
-  },
-}
-
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {
   messages: [

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

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderWithProviders, screen } from '../../test/utils'
 
 import { OutboundContext } from './OutboundContext'
+import { isTipMessage } from './TipMessage'
 
 import { CustomMessage } from './index'
 
@@ -58,12 +59,16 @@ vi.mock('./MessageTag', () => ({
   isAttachmentMessage: () => false,
   isChatbotMessage: () => false,
   isMediaAttachmentMessage: () => false,
+  isPaidMessage: () => false,
   isTextAttachmentMessage: () => false,
-  isTipOnlyMessage: () => false,
-  isTipMessage: () => false,
   hasPaidDeliveryTag: () => false,
 }))
 
+vi.mock('./TipMessage', () => ({
+  TipMessage: () => null,
+  isTipMessage: vi.fn(() => false),
+}))
+
 vi.mock('./LockedAttachment', () => ({
   default: () => null,
 }))
@@ -79,9 +84,11 @@ vi.mock('../MediaMessage', () => ({
 
 const mockedUseChannelStateContext = vi.mocked(useChannelStateContext)
 const mockedUseMessageContext = vi.mocked(useMessageContext)
+const mockedIsTipMessage = vi.mocked(isTipMessage)
 
 describe('CustomMessage', () => {
   beforeEach(() => {
+    mockedIsTipMessage.mockReturnValue(false)
     mockedUseChannelStateContext.mockReturnValue({
       messages: [{ id: 'message-1', user: { id: 'me' } }],
     } as never)
@@ -207,4 +214,51 @@ describe('CustomMessage', () => {
       screen.getByTestId('sent-message-outbound-status')
     ).toHaveTextContent('July 9th Class absentee')
   })
+
+  it('does not render an accompanying text bubble for a whitespace-only tip message', () => {
+    mockedIsTipMessage.mockReturnValue(true)
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'message-1',
+        text: '   \n  ',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {},
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.queryByText('Message')).not.toBeInTheDocument()
+  })
+
+  it('renders an accompanying text bubble for a tip message with real text', () => {
+    mockedIsTipMessage.mockReturnValue(true)
+    // Default mocked message.text ('Hello') from beforeEach.
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.getByText('Message')).toBeInTheDocument()
+  })
 })

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

@@ -0,0 +1,108 @@
+import type { Meta } from '@storybook/react'
+
+import {
+  Template,
+  type TemplateProps,
+} from '../../stories/customMessageStoryTemplate'
+import {
+  currentUserArgType,
+  storyUsers,
+} from '../../stories/decorators/storyUser'
+
+const meta: Meta = {
+  title: 'CustomMessage/Locked Attachment',
+  argTypes: currentUserArgType,
+  args: { currentUser: storyUsers.creator },
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+export default meta
+
+export const LockedAttachment = Template.bind({})
+LockedAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can I have your workout plan?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'Yes, of course!',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'let me know if you have any questions!',
+      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-4',
+      text: 'Looks amazing, unlocking now!',
+      user: storyUsers.visitor,
+    },
+  ],
+} satisfies TemplateProps
+
+export const LockedTextAttachment = Template.bind({})
+LockedTextAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can you send me the details privately?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      // Empty text: the real content is redacted server-side until purchase,
+      // so the bubble renders the blurred placeholder instead.
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-3',
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-4',
+      // Buyer reveal: backend writes the real text back onto the message.
+      text: "Here's the address — see you Thursday at 7!",
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+  ],
+} satisfies TemplateProps
+LockedTextAttachment.parameters = {
+  docs: {
+    description: {
+      story:
+        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
+    },
+  },
+}

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

@@ -19,7 +19,7 @@ export default meta
 
 interface MockMessageOptions {
   metadata?: {
-    custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+    custom_type?: 'MESSAGE_CHATBOT' | 'MESSAGE_PAID'
     amount_text?: string
   }
   text?: string
@@ -48,32 +48,6 @@ const Template: StoryFn<ComponentProps> = (args) => {
 // the variant matrix as the single snapshot source of truth.
 const skipInChromatic = { chromatic: { disableSnapshot: true } }
 
-export const Tip: StoryFn<ComponentProps> = Template.bind({})
-Tip.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
-  }),
-}
-Tip.parameters = skipInChromatic
-
-export const TipStandalone: StoryFn<ComponentProps> = Template.bind({})
-TipStandalone.args = {
-  message: createMockMessage({
-    text: '',
-    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-  }),
-  standalone: true,
-}
-TipStandalone.parameters = skipInChromatic
-
-export const Paid: StoryFn<ComponentProps> = Template.bind({})
-Paid.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
-  }),
-}
-Paid.parameters = skipInChromatic
-
 export const ChatbotReceiverText: StoryFn<ComponentProps> = Template.bind({})
 ChatbotReceiverText.args = {
   message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
@@ -105,6 +79,14 @@ ChatbotSenderAttachment.args = {
 }
 ChatbotSenderAttachment.parameters = skipInChromatic
 
+export const Paid: StoryFn<ComponentProps> = Template.bind({})
+Paid.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+  }),
+}
+Paid.parameters = skipInChromatic
+
 export const NoTag: StoryFn<ComponentProps> = Template.bind({})
 NoTag.args = {
   message: createMockMessage(),
@@ -114,32 +96,6 @@ NoTag.parameters = skipInChromatic
 export const AllVariants: StoryFn = () => {
   return (
     <div className="p-12 flex flex-col gap-4">
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Tip:</span>
-        <MessageTag
-          message={createMockMessage({
-            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$10.50' },
-          })}
-        />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Paid:</span>
-        <MessageTag
-          message={createMockMessage({
-            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
-          })}
-        />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Tip (standalone):</span>
-        <MessageTag
-          message={createMockMessage({
-            text: '',
-            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-          })}
-          standalone
-        />
-      </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">Chatbot (receiver):</span>
         <MessageTag
@@ -171,6 +127,14 @@ export const AllVariants: StoryFn = () => {
           />
         </div>
       </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Paid:</span>
+        <MessageTag
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+          })}
+        />
+      </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">No tag:</span>
         <MessageTag message={createMockMessage()} />