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

package/package.json

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

package/src/components/ChannelView.tsx

@@ -17,6 +17,7 @@ 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'
@@ -241,6 +242,7 @@ const ChannelViewInner: React.FC<{
   renderMessage,
 }) => {
   const { channel } = useChannelStateContext()
+  useRestorePendingMessages(channel)
   const infoDialogRef = useRef<HTMLDialogElement>(null)
 
   // Get participant info for info dialog

package/src/hooks/useRestorePendingMessages.test.ts

@@ -0,0 +1,136 @@
+import { renderHook } from '@testing-library/react'
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { useRestorePendingMessages } 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('useRestorePendingMessages', () => {
+  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] })
+
+    renderHook(() => useRestorePendingMessages(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] })
+
+    renderHook(() => useRestorePendingMessages(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: [] })
+
+    renderHook(() => useRestorePendingMessages(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({
+      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()
+
+    rerender({ channel: channel2 })
+
+    expect(channel2.state.addMessageSorted).toHaveBeenCalledOnce()
+  })
+
+  it('handles pending messages with no metadata gracefully', () => {
+    const noMetadataMsg = {
+      message: { id: 'msg-1', text: 'No metadata' },
+    }
+    const channel = createChannel({
+      pending_messages: [noMetadataMsg],
+    })
+
+    renderHook(() => useRestorePendingMessages(channel))
+
+    expect(channel.state.addMessageSorted).toHaveBeenCalledOnce()
+    expect(channel.state.addMessageSorted).toHaveBeenCalledWith(
+      noMetadataMsg.message
+    )
+  })
+})

package/src/hooks/useRestorePendingMessages.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react'
+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 hook works around that
+ * limitation by reading `channel.state.pending_messages` on channel load 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)
+    }
+
+    restoredChannelRef.current = cid
+  }, [channel])
+}