@linktr.ee/messaging-react 3.1.0 → 3.1.1

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D-5Igybf.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DluSX5DB.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-CJEl_fID.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-Cj6b1oEe.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/MessagingShell/MessagingShell.test.tsx

@@ -168,4 +168,97 @@ describe('MessagingShell', () => {
       'Conversation ended'
     )
   })
+
+  it('does not create the channel again when the load effect re-runs for the same pair (e.g. service identity settles during connect)', async () => {
+    queryChannelsMock.mockResolvedValue([])
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-1'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A fresh `service` reference (as happens while the connection settles)
+    // re-runs the load effect. The once-per-pair guard must prevent a second
+    // create for the same viewer/participant pair before the new channel is
+    // indexed by queryChannels.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not wipe a newer pair load guard when an earlier in-flight load fails', async () => {
+    const PAIR_A = 'pair-A'
+    const PAIR_B = 'pair-B'
+
+    // Pair A's query stays pending until we reject it, simulating a load still
+    // in flight when the participant changes. Pair B resolves with no channel.
+    let rejectA: (reason?: unknown) => void = () => {}
+    queryChannelsMock.mockImplementation(
+      (query: { members?: { $eq?: string[] } }) => {
+        if (query?.members?.$eq?.includes(PAIR_A)) {
+          return new Promise((_resolve, reject) => {
+            rejectA = reject
+          })
+        }
+        return Promise.resolve([])
+      }
+    )
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-b'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter={PAIR_A}
+        initialParticipantData={{ id: PAIR_A, name: 'A' }}
+      />
+    )
+
+    // Switch to pair B while A's load is still pending; B creates its channel.
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A's stale load now fails. Its catch must not clear pair B's guard.
+    rejectA(new Error('transient'))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    // Re-run the load effect for pair B (a fresh `service` reference). With B's
+    // guard intact this must not create a second channel.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
 })

package/src/components/MessagingShell/index.tsx

@@ -65,13 +65,44 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const onChannelSelectRef = useRef(onChannelSelect)
   onChannelSelectRef.current = onChannelSelect
 
+  // Track the direct-conversation load to prevent repeated/concurrent loads.
+  // Identity-stable deps (above) stop the common re-fire, but legitimate dep
+  // changes (e.g. `service`/`client` settling during connect) can still re-run
+  // this effect before the just-created channel is indexed, each firing another
+  // startChannelWithParticipant call and creating duplicate welcome messages.
+  const directConversationLoadRef = useRef<string | null>(null)
+
+  // Mirror the currently-selected channel into a ref so the async load can read
+  // the latest value rather than the (possibly stale) effect-closure value.
+  const selectedChannelRef = useRef<Channel | null>(null)
+  useEffect(() => {
+    selectedChannelRef.current = selectedChannel
+  }, [selectedChannel])
+
   useEffect(() => {
     if (!client || !isConnected) return
 
-    const loadInitialChannel = async () => {
-      const userId = client.userID
-      if (!userId) return
+    const userId = client.userID
+    if (!userId) return
+
+    // Only load once per viewer ↔ participant pair. Set synchronously (before
+    // the async work) so re-runs triggered by changing dependency identities
+    // bail out instead of issuing another channel-create request.
+    const loadKey = `${userId}::${initialParticipantFilter}`
+    if (directConversationLoadRef.current === loadKey) return
+    directConversationLoadRef.current = loadKey
 
+    // Release the guard only if it still belongs to this load. A newer load for
+    // a different pair may have taken ownership while this one was in flight, so
+    // clearing unconditionally could wipe the newer guard and let a duplicate
+    // load/create slip through.
+    const releaseLoadGuard = () => {
+      if (directConversationLoadRef.current === loadKey) {
+        directConversationLoadRef.current = null
+      }
+    }
+
+    const loadInitialChannel = async () => {
       try {
         if (debug) {
           console.log(
@@ -105,6 +136,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
         const participantData = initialParticipantDataRef.current
         if (!participantData || !service) {
+          // Allow a retry once participant data / service become available.
+          releaseLoadGuard()
           setDirectConversationError('No conversation found with this account')
           if (debug) {
             console.log(
@@ -136,6 +169,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             '[MessagingShell] Failed to create conversation:',
             createErr
           )
+          // Allow a retry for this pair after a transient failure.
+          releaseLoadGuard()
           setDirectConversationError('Failed to create conversation')
         }
       } catch (err) {
@@ -143,7 +178,14 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           '[MessagingShell] Failed to load initial conversation:',
           err
         )
-        setDirectConversationError('Failed to load conversation')
+        // Allow a retry for this pair after a transient failure.
+        releaseLoadGuard()
+        // Don't replace an already-loaded conversation with an error screen.
+        // Read the latest selected channel via ref to avoid acting on a stale
+        // closure value when the channel was selected mid-flight.
+        if (!selectedChannelRef.current) {
+          setDirectConversationError('Failed to load conversation')
+        }
       }
     }