@linktr.ee/messaging-react 1.29.0-rc-1776320021 → 1.29.0

package/package.json

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

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '../../test/utils'
@@ -77,8 +78,8 @@ describe('ChannelList', () => {
     expect(streamProps.onAddedToChannel).toBe(onAddedToChannel)
   })
 
-  it('passes channelRenderFilterFn through to Stream ChannelList', () => {
-    const filterFn = vi.fn()
+  it('wraps channelRenderFilterFn to restore pending messages and delegates to consumer filter', () => {
+    const filterFn = vi.fn((channels: Channel[]) => channels)
 
     renderWithProviders(
       React.createElement(ChannelList, {
@@ -89,9 +90,18 @@ describe('ChannelList', () => {
 
     expect(streamChannelListMock).toHaveBeenCalledOnce()
     const streamProps = streamChannelListMock.mock.calls[0][0] as {
-      channelRenderFilterFn?: unknown
+      channelRenderFilterFn?: (channels: unknown[]) => unknown[]
     }
 
-    expect(streamProps.channelRenderFilterFn).toBe(filterFn)
+    // The wrapper should not be the same reference as the original filter
+    expect(streamProps.channelRenderFilterFn).not.toBe(filterFn)
+    expect(typeof streamProps.channelRenderFilterFn).toBe('function')
+
+    // When the wrapper is called, it should delegate to the consumer's filter
+    const mockChannels = [
+      { cid: 'ch-1', state: { pending_messages: [], addMessageSorted: vi.fn() } },
+    ]
+    streamProps.channelRenderFilterFn!(mockChannels)
+    expect(filterFn).toHaveBeenCalledWith(mockChannels)
   })
 })

package/src/components/ChannelList/index.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames'
 import React from 'react'
+import type { Channel } from 'stream-chat'
 import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
+import { restorePendingMessages } from '../../hooks/useRestorePendingMessages'
 import { useMessagingContext } from '../../providers/MessagingProvider'
 import type { ChannelListProps } from '../../types'
 
@@ -34,6 +36,20 @@ export const ChannelList = React.memo<ChannelListProps>(
     // Get debug flag from context
     const { debug = false } = useMessagingContext()
 
+    // Wrap channelRenderFilterFn to restore pending messages for all channels
+    // as soon as they are loaded, without waiting for the user to click into each one.
+    const wrappedChannelRenderFilterFn = React.useCallback(
+      (channels: Channel[]) => {
+        for (const channel of channels) {
+          restorePendingMessages(channel)
+        }
+        return channelRenderFilterFn
+          ? channelRenderFilterFn(channels)
+          : channels
+      },
+      [channelRenderFilterFn]
+    )
+
     if (debug) {
       console.log('📺 [ChannelList] 🔄 RENDER START', {
         renderCount: renderCountRef.current,
@@ -72,7 +88,7 @@ export const ChannelList = React.memo<ChannelListProps>(
               }
               onMessageNew={onMessageNew}
               onAddedToChannel={onAddedToChannel}
-              channelRenderFilterFn={channelRenderFilterFn}
+              channelRenderFilterFn={wrappedChannelRenderFilterFn}
               Preview={CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}
             />

package/src/components/ChannelView.tsx

@@ -1,8 +1,4 @@
-import {
-  ArrowLeftIcon,
-  DotsThreeIcon,
-  StarIcon,
-} from '@phosphor-icons/react'
+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'
@@ -17,7 +13,6 @@ import {
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
-import { useRestorePendingMessages } from '../hooks/useRestorePendingMessages'
 import type { ChannelViewProps, LockedAttachmentSource } from '../types'
 
 import { Avatar } from './Avatar'
@@ -212,7 +207,10 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick?: () => void
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
-  onAttachmentUnlock?: (message: LocalMessage, channel: ChannelType) => Promise<LockedAttachmentSource>
+  onAttachmentUnlock?: (
+    message: LocalMessage,
+    channel: ChannelType
+  ) => Promise<LockedAttachmentSource>
   onAttachmentDownload?: (message: LocalMessage, channel: ChannelType) => void
   renderChannelBanner?: () => React.ReactNode
   customProfileContent?: React.ReactNode
@@ -242,7 +240,6 @@ const ChannelViewInner: React.FC<{
   renderMessage,
 }) => {
   const { channel } = useChannelStateContext()
-  useRestorePendingMessages(channel)
   const infoDialogRef = useRef<HTMLDialogElement>(null)
 
   // Get participant info for info dialog

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

@@ -106,6 +106,11 @@ interface TemplateProps {
         | 'MESSAGE_PAID'
         | 'MESSAGE_CHATBOT'
         | 'MESSAGE_ATTACHMENT'
+      payment_status?: 
+        | 'pending'
+        | 'paid'
+        | 'failed'
+        | 'refunded'
       amount_text?: string
       attachment_title?: string
       attachment_mime_type?: string
@@ -316,7 +321,12 @@ PaidAttachment.args = {
     },
     {
       id: 'msg-2',
-      text: 'yes here it is',
+      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',
@@ -327,11 +337,6 @@ PaidAttachment.args = {
         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!',

package/src/components/CustomMessage/index.tsx

@@ -202,7 +202,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           }}
         >
           {isAttachment ? (
-            <div className="flex flex-col gap-2">
+            <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}

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
-import LockedAttachment, { type CreatorCardProps, type VisitorCardProps } from '.'
+import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
 const VIDEO_SOURCE = '/video-source.mp4'
@@ -22,42 +22,11 @@ const meta: Meta = {
 }
 export default meta
 
-type InteractiveProps = Omit<VisitorCardProps, 'onUnlock' | 'onDownload'> & {
-  unlockedSource: string
+const withDelay = <T,>(fn: () => Promise<T> | T) => async (): Promise<T> => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return fn()
 }
 
-/** Simulates a slow network by withholding the source for 2s, then loading via blob URL. */
-type SlowCreatorPreviewProps = Omit<CreatorCardProps, 'isPreview'> & { sourcePath: string }
-const SlowCreatorPreview = ({ sourcePath, ...props }: SlowCreatorPreviewProps) => {
-  const [source, setSource] = useState<string | undefined>(undefined)
-  useEffect(() => {
-    setSource(undefined)
-    let cancelled = false
-    const load = async () => {
-      await new Promise((resolve) => setTimeout(resolve, 2000))
-      const res = await fetch(sourcePath)
-      const blob = await res.blob()
-      if (!cancelled) setSource(URL.createObjectURL(blob))
-    }
-    void load()
-    return () => { cancelled = true }
-  }, [sourcePath])
-  return <LockedAttachment isCreator isPreview source={source} {...props} />
-}
-
-const Interactive = ({ unlockedSource, ...props }: InteractiveProps) => (
-  <LockedAttachment
-    {...props}
-    onUnlock={async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      const res = await fetch(unlockedSource)
-      const blob = await res.blob()
-      return { source: URL.createObjectURL(blob) }
-    }}
-    onDownload={() => {}}
-  />
-)
-
 const VARIANTS = [
   {
     label: 'Video',
@@ -168,13 +137,14 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               thumbnail={thumbnail}
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}
@@ -185,14 +155,15 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               thumbnail={thumbnail}
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
               paymentStatus="paid"
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}
@@ -230,9 +201,10 @@ export const Creator: StoryFn = () => (
         </td>
         {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
-            <SlowCreatorPreview
+            <LockedAttachment
+              isPreview
               thumbnail={thumbnail}
-              sourcePath={source}
+              source={source}
               mimeType={mimeType}
               detail={detail}
               placeholderAmountText="A$0.00"
@@ -247,7 +219,6 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -266,7 +237,7 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
+              
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -284,7 +255,6 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -311,7 +281,6 @@ export const NoThumbnail: StoryFn = () => (
         {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               source={source}
               mimeType={mimeType}
@@ -327,12 +296,13 @@ export const NoThumbnail: StoryFn = () => (
         </td>
         {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}

package/src/hooks/useRestorePendingMessages.test.ts

@@ -1,8 +1,7 @@
-import { renderHook } from '@testing-library/react'
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import { useRestorePendingMessages } from './useRestorePendingMessages'
+import { restorePendingMessages } from './useRestorePendingMessages'
 
 const createChannel = (
   overrides: {
@@ -21,7 +20,7 @@ const createChannel = (
     },
   }) as unknown as Channel
 
-describe('useRestorePendingMessages', () => {
+describe('restorePendingMessages', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -35,7 +34,7 @@ describe('useRestorePendingMessages', () => {
     }
     const channel = createChannel({ pending_messages: [pendingMsg] })
 
-    renderHook(() => useRestorePendingMessages(channel))
+    restorePendingMessages(channel)
 
     expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
     expect(channel.state.addMessageSorted).toHaveBeenCalledWith(
@@ -58,7 +57,7 @@ describe('useRestorePendingMessages', () => {
     }
     const channel = createChannel({ pending_messages: [msg1, msg2] })
 
-    renderHook(() => useRestorePendingMessages(channel))
+    restorePendingMessages(channel)
 
     expect(channel.state.addMessageSorted).toHaveBeenCalledTimes(2)
     expect(channel.state.addMessageSorted).toHaveBeenCalledWith(msg1.message)
@@ -68,54 +67,23 @@ describe('useRestorePendingMessages', () => {
   it('does nothing when there are no pending messages', () => {
     const channel = createChannel({ pending_messages: [] })
 
-    renderHook(() => useRestorePendingMessages(channel))
+    restorePendingMessages(channel)
 
     expect(channel.state.addMessageSorted).not.toHaveBeenCalled()
   })
 
-  it('only restores once per channel even if re-rendered', () => {
-    const pendingMsg = {
-      message: {
-        id: 'msg-1',
-        text: 'Hello',
-      },
-    }
-    const channel = createChannel({ pending_messages: [pendingMsg] })
-
-    const { rerender } = renderHook(() => useRestorePendingMessages(channel))
-
-    rerender()
-    rerender()
-
-    expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
-  })
-
-  it('restores again when switching to a different channel', () => {
-    const pendingMsg = {
-      message: {
-        id: 'msg-1',
-        text: 'Hello',
-      },
-    }
-    const channel1 = createChannel({
+  it('does nothing when pending_messages is undefined', () => {
+    const channel = {
       cid: 'messaging:channel-1',
-      pending_messages: [pendingMsg],
-    })
-    const channel2 = createChannel({
-      cid: 'messaging:channel-2',
-      pending_messages: [pendingMsg],
-    })
-
-    const { rerender } = renderHook(
-      ({ channel }) => useRestorePendingMessages(channel),
-      { initialProps: { channel: channel1 } }
-    )
-
-    expect(channel1.state.addMessageSorted).toHaveBeenCalledOnce()
+      state: {
+        pending_messages: undefined,
+        addMessageSorted: vi.fn(),
+      },
+    } as unknown as Channel
 
-    rerender({ channel: channel2 })
+    restorePendingMessages(channel)
 
-    expect(channel2.state.addMessageSorted).toHaveBeenCalledOnce()
+    expect(channel.state.addMessageSorted).not.toHaveBeenCalled()
   })
 
   it('handles pending messages with no metadata gracefully', () => {
@@ -126,7 +94,7 @@ describe('useRestorePendingMessages', () => {
       pending_messages: [noMetadataMsg],
     })
 
-    renderHook(() => useRestorePendingMessages(channel))
+    restorePendingMessages(channel)
 
     expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
     expect(channel.state.addMessageSorted).toHaveBeenCalledWith(

package/src/hooks/useRestorePendingMessages.ts

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react'
 import type { Channel } from 'stream-chat'
 
 /**
@@ -6,31 +5,15 @@ import type { Channel } from 'stream-chat'
  * appear as if they were already sent.
  *
  * Stream's pending-messages feature removes messages from the channel view
- * once client state is lost (e.g. page refresh). This hook works around that
- * limitation by reading `channel.state.pending_messages` on channel load and
+ * once client state is lost (e.g. page refresh). This function works around
+ * that limitation by reading `channel.state.pending_messages` and
  * re-inserting them via `channel.state.addMessageSorted`.
- *
- * The restoration runs once per channel (tracked by `channel.cid`).
  */
-export function useRestorePendingMessages(channel: Channel) {
-  const restoredChannelRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    const cid = channel.cid
-    if (!cid || restoredChannelRef.current === cid) return
-
-    const pendingMessages = channel.state.pending_messages
-    if (!pendingMessages?.length) {
-      // No pending messages — mark as restored so we don't re-check on
-      // re-renders, but still allow a retry if the channel object changes.
-      restoredChannelRef.current = cid
-      return
-    }
-
-    for (const pending of pendingMessages) {
-      channel.state.addMessageSorted(pending.message)
-    }
+export function restorePendingMessages(channel: Channel) {
+  const pendingMessages = channel.state.pending_messages
+  if (!pendingMessages?.length) return
 
-    restoredChannelRef.current = cid
-  }, [channel])
+  for (const pending of pendingMessages) {
+    channel.state.addMessageSorted(pending.message)
+  }
 }