@linktr.ee/messaging-react 1.28.1 → 1.29.0-rc-1776325810

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.28.1",
+  "version": "1.29.0-rc-1776325810",
   "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'
@@ -211,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

package/src/hooks/useRestorePendingMessages.test.ts

@@ -0,0 +1,104 @@
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { restorePendingMessages } from './useRestorePendingMessages'
+
+const createChannel = (
+  overrides: {
+    cid?: string
+    pending_messages?: Array<{
+      message: Record<string, unknown>
+      pending_message_metadata?: Record<string, string>
+    }>
+  } = {}
+) =>
+  ({
+    cid: overrides.cid ?? 'messaging:channel-1',
+    state: {
+      pending_messages: overrides.pending_messages ?? [],
+      addMessageSorted: vi.fn(),
+    },
+  }) as unknown as Channel
+
+describe('restorePendingMessages', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('adds all pending messages to channel state', () => {
+    const pendingMsg = {
+      message: {
+        id: 'msg-1',
+        text: 'Hello',
+      },
+    }
+    const channel = createChannel({ pending_messages: [pendingMsg] })
+
+    restorePendingMessages(channel)
+
+    expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
+    expect(channel.state.addMessageSorted).toHaveBeenCalledWith(
+      pendingMsg.message
+    )
+  })
+
+  it('restores multiple pending messages', () => {
+    const msg1 = {
+      message: {
+        id: 'msg-1',
+        text: 'First message',
+      },
+    }
+    const msg2 = {
+      message: {
+        id: 'msg-2',
+        text: 'Second message',
+      },
+    }
+    const channel = createChannel({ pending_messages: [msg1, msg2] })
+
+    restorePendingMessages(channel)
+
+    expect(channel.state.addMessageSorted).toHaveBeenCalledTimes(2)
+    expect(channel.state.addMessageSorted).toHaveBeenCalledWith(msg1.message)
+    expect(channel.state.addMessageSorted).toHaveBeenCalledWith(msg2.message)
+  })
+
+  it('does nothing when there are no pending messages', () => {
+    const channel = createChannel({ pending_messages: [] })
+
+    restorePendingMessages(channel)
+
+    expect(channel.state.addMessageSorted).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when pending_messages is undefined', () => {
+    const channel = {
+      cid: 'messaging:channel-1',
+      state: {
+        pending_messages: undefined,
+        addMessageSorted: vi.fn(),
+      },
+    } as unknown as Channel
+
+    restorePendingMessages(channel)
+
+    expect(channel.state.addMessageSorted).not.toHaveBeenCalled()
+  })
+
+  it('handles pending messages with no metadata gracefully', () => {
+    const noMetadataMsg = {
+      message: { id: 'msg-1', text: 'No metadata' },
+    }
+    const channel = createChannel({
+      pending_messages: [noMetadataMsg],
+    })
+
+    restorePendingMessages(channel)
+
+    expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
+    expect(channel.state.addMessageSorted).toHaveBeenCalledWith(
+      noMetadataMsg.message
+    )
+  })
+})

package/src/hooks/useRestorePendingMessages.ts

@@ -0,0 +1,19 @@
+import type { Channel } from 'stream-chat'
+
+/**
+ * Restores pending messages into the channel's visible message list so they
+ * 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 function works around
+ * that limitation by reading `channel.state.pending_messages` and
+ * re-inserting them via `channel.state.addMessageSorted`.
+ */
+export function restorePendingMessages(channel: Channel) {
+  const pendingMessages = channel.state.pending_messages
+  if (!pendingMessages?.length) return
+
+  for (const pending of pendingMessages) {
+    channel.state.addMessageSorted(pending.message)
+  }
+}