@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

package/src/components/ChannelList/index.test.tsx

@@ -11,25 +11,16 @@ const {
   ChannelListProviderMock,
   CustomChannelPreviewMock,
   InfiniteScrollMock,
-  restorePendingMessagesMock,
-  streamMountMock,
-  messagingContextMock,
 } = vi.hoisted(() => ({
   ChannelListProviderMock: vi.fn(
     ({ children }: { children: React.ReactNode; value: unknown }) => children
   ),
   CustomChannelPreviewMock: () => null,
   InfiniteScrollMock: () => null,
-  restorePendingMessagesMock: vi.fn(),
-  streamMountMock: vi.fn(),
-  messagingContextMock: { current: { debug: false } },
 }))
 
 vi.mock('stream-chat-react', () => ({
   ChannelList: (props: unknown) => {
-    React.useEffect(() => {
-      streamMountMock()
-    }, [])
     streamChannelListMock(props)
     return <div data-testid="stream-channel-list" />
   },
@@ -37,11 +28,7 @@ vi.mock('stream-chat-react', () => ({
 }))
 
 vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => messagingContextMock.current,
-}))
-
-vi.mock('../../hooks/useRestorePendingMessages', () => ({
-  restorePendingMessages: restorePendingMessagesMock,
+  useMessagingContext: () => ({ debug: false }),
 }))
 
 vi.mock('./ChannelListContext', () => ({
@@ -61,9 +48,6 @@ describe('ChannelList', () => {
   beforeEach(() => {
     ChannelListProviderMock.mockClear()
     streamChannelListMock.mockClear()
-    restorePendingMessagesMock.mockClear()
-    streamMountMock.mockClear()
-    messagingContextMock.current = { debug: false }
   })
 
   it('defaults unseen-channel promotion to false', () => {
@@ -216,119 +200,4 @@ describe('ChannelList', () => {
     streamProps.channelRenderFilterFn!(mockChannels)
     expect(filterFn).toHaveBeenCalledWith(mockChannels)
   })
-
-  it('restores pending messages for every channel and preserves channels without a filter', () => {
-    const channels = [
-      { cid: 'ch-1', state: { pending_messages: [] } },
-      { cid: 'ch-2', state: { pending_messages: [{ id: 'pending-2' }] } },
-    ] as unknown as Channel[]
-
-    renderWithProviders(<ChannelList {...defaultProps} />)
-    const streamProps = streamChannelListMock.mock.calls[0][0] as {
-      channelRenderFilterFn: (channels: Channel[]) => Channel[]
-    }
-
-    expect(streamProps.channelRenderFilterFn(channels)).toBe(channels)
-    expect(restorePendingMessagesMock).toHaveBeenCalledTimes(2)
-    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(1, channels[0])
-    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(2, channels[1])
-  })
-
-  it('remounts Stream ChannelList when filters change but not when they stay the same', () => {
-    const { rerender } = renderWithProviders(<ChannelList {...defaultProps} />)
-
-    expect(streamMountMock).toHaveBeenCalledOnce()
-
-    rerender(<ChannelList {...defaultProps} />)
-    expect(streamMountMock).toHaveBeenCalledOnce()
-
-    rerender(
-      <ChannelList
-        {...defaultProps}
-        filters={{ type: 'messaging', members: { $in: ['another-user'] } }}
-      />
-    )
-    expect(streamMountMock).toHaveBeenCalledTimes(2)
-  })
-
-  it('forwards the default and explicit sort values and the channel limit', () => {
-    renderWithProviders(<ChannelList {...defaultProps} />)
-    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
-      sort: { last_message_at: -1 },
-      options: { limit: 30 },
-    })
-
-    const explicitSort = { updated_at: 1 as const }
-    renderWithProviders(<ChannelList {...defaultProps} sort={explicitSort} />)
-    expect(streamChannelListMock.mock.calls[1][0]).toMatchObject({
-      sort: explicitSort,
-      options: { limit: 30 },
-    })
-  })
-
-  it('provides channel list context values from props and messaging context', () => {
-    const selectedChannel = { id: 'selected-channel' } as Channel
-    const onChannelSelect = vi.fn()
-    const renderMessagePreview = vi.fn()
-    messagingContextMock.current = { debug: true }
-
-    renderWithProviders(
-      <ChannelList
-        {...defaultProps}
-        selectedChannel={selectedChannel}
-        onChannelSelect={onChannelSelect}
-        renderMessagePreview={renderMessagePreview}
-        viewerLanguage="fr"
-      />
-    )
-
-    const contextValue = ChannelListProviderMock.mock.calls[0][0].value
-    expect(contextValue).toMatchObject({
-      selectedChannel,
-      onChannelSelect,
-      debug: true,
-      renderMessagePreview,
-      viewerLanguage: 'fr',
-    })
-  })
-
-  it('logs the channel list render when messaging debug is enabled', () => {
-    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
-    messagingContextMock.current = { debug: true }
-
-    renderWithProviders(<ChannelList {...defaultProps} />)
-
-    expect(consoleLog).toHaveBeenCalledWith(
-      '📺 [ChannelList] 🔄 RENDER START',
-      expect.objectContaining({
-        renderCount: 1,
-        selectedChannelId: undefined,
-        filters: defaultProps.filters,
-      })
-    )
-  })
-
-  it('passes wrapper classes and the custom empty state indicator through', () => {
-    const EmptyStateIndicator = () => <div>Empty state</div>
-    const { container } = renderWithProviders(
-      <ChannelList
-        {...defaultProps}
-        className="custom-channel-list"
-        customEmptyStateIndicator={EmptyStateIndicator}
-      />
-    )
-
-    expect(container.firstElementChild).toHaveClass(
-      'messaging-channel-list',
-      'h-full',
-      'flex',
-      'flex-col',
-      'min-w-0',
-      'overflow-hidden',
-      'custom-channel-list'
-    )
-    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
-      EmptyStateIndicator,
-    })
-  })
 })

package/src/components/ChannelView.stories.tsx

@@ -682,10 +682,6 @@ WithTypingIndicator.args = {
   },
 }
 WithTypingIndicator.parameters = {
-  // The typing indicator is animation-dominant, so a snapshot mostly captures
-  // whichever frame the animation happened to pause at — a false-positive
-  // source. Skip it in Chromatic; the story stays browsable in Storybook.
-  chromatic: { disableSnapshot: true },
   docs: {
     description: {
       story:

package/src/components/ChannelView.test.tsx

@@ -223,14 +223,10 @@ describe('ChannelView', () => {
 
   it('widens the content column in the official (read-only) channel via the width var', () => {
     const { container } = renderWithProviders(
-      <ChannelView
-        channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })}
-      />
+      <ChannelView channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })} />
     )
 
-    const root = container.querySelector(
-      '.messaging-channel-view'
-    ) as HTMLElement
+    const root = container.querySelector('.messaging-channel-view') as HTMLElement
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('368px')
   })
 
@@ -239,9 +235,7 @@ describe('ChannelView', () => {
       <ChannelView channel={createChannel({ channelType: 'messaging' })} />
     )
 
-    const root = container.querySelector(
-      '.messaging-channel-view'
-    ) as HTMLElement
+    const root = container.querySelector('.messaging-channel-view') as HTMLElement
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('')
   })
 

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

@@ -2,7 +2,11 @@ import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
-import { Channel as ChannelType } from 'stream-chat'
+import {
+  Channel as ChannelType,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
 import {
   Channel,
   Chat,
@@ -12,20 +16,18 @@ import {
   WithComponents,
 } from 'stream-chat-react'
 
-import {
-  Template,
-  createMockChannel,
-  type TemplateProps,
-} from '../../stories/customMessageStoryTemplate'
+import { minutesAgo } from '../../stories/decorators/storyTime'
 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'
 
@@ -40,6 +42,180 @@ 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: [
@@ -166,6 +342,28 @@ 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 = {
@@ -193,6 +391,28 @@ 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: [
@@ -248,6 +468,94 @@ 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,7 +5,6 @@ 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'
 
@@ -59,16 +58,12 @@ 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,
 }))
@@ -84,11 +79,9 @@ 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)
@@ -214,51 +207,4 @@ 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()
-  })
 })