@linktr.ee/messaging-react 3.38.2 → 4.0.0-rc-1786383199

package/src/components/CustomMessage/CustomMessage.test.tsx

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 
-import { BroadcastNameContext } from './BroadcastNameContext'
+import { BroadcastContext } from './BroadcastContext'
 
 import { CustomMessage } from './index'
 
@@ -91,8 +91,7 @@ describe('CustomMessage', () => {
         status: 'received',
         user: { id: 'me', name: 'Me' },
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => true,
@@ -114,10 +113,30 @@ describe('CustomMessage', () => {
     const firstHandler = vi.fn()
     const secondHandler = vi.fn()
     const { rerender } = renderWithProviders(
-      <CustomMessage onBroadcastClick={firstHandler} />
+      <BroadcastContext.Provider
+        value={{
+          'outbound-1': {
+            id: 'broadcast-1',
+            name: 'July 9th Class attendees',
+          },
+        }}
+      >
+        <CustomMessage onBroadcastClick={firstHandler} />
+      </BroadcastContext.Provider>
     )
 
-    rerender(<CustomMessage onBroadcastClick={secondHandler} />)
+    rerender(
+      <BroadcastContext.Provider
+        value={{
+          'outbound-1': {
+            id: 'broadcast-1',
+            name: 'July 9th Class attendees',
+          },
+        }}
+      >
+        <CustomMessage onBroadcastClick={secondHandler} />
+      </BroadcastContext.Provider>
+    )
     screen
       .getByRole('button', {
         name: 'View broadcast July 9th Class attendees',
@@ -131,13 +150,18 @@ describe('CustomMessage', () => {
     })
   })
 
-  it('prefers a resolved broadcast name over the stamped name', () => {
+  it('renders the current broadcast returned for the outbound id', () => {
     renderWithProviders(
-      <BroadcastNameContext.Provider
-        value={{ 'broadcast-1': 'July 9th Class absentee' }}
+      <BroadcastContext.Provider
+        value={{
+          'outbound-1': {
+            id: 'broadcast-1',
+            name: 'July 9th Class absentee',
+          },
+        }}
       >
         <CustomMessage />
-      </BroadcastNameContext.Provider>
+      </BroadcastContext.Provider>
     )
 
     expect(
@@ -145,31 +169,36 @@ describe('CustomMessage', () => {
     ).toHaveTextContent('July 9th Class absentee')
   })
 
-  it('falls back to the stamped broadcast name when resolution is unavailable', () => {
+  it('hides the label when the outbound record cannot be resolved', () => {
     renderWithProviders(
-      <BroadcastNameContext.Provider value={{}}>
+      <BroadcastContext.Provider value={{}}>
         <CustomMessage />
-      </BroadcastNameContext.Provider>
+      </BroadcastContext.Provider>
     )
 
     expect(
-      screen.getByTestId('sent-message-broadcast-status')
-    ).toHaveTextContent('July 9th Class attendees')
+      screen.queryByTestId('sent-message-broadcast-status')
+    ).not.toBeInTheDocument()
   })
 
-  it('renders a later resolved name when the live context value changes', () => {
+  it('renders a broadcast when the outbound lookup later resolves', () => {
     const { rerender } = renderWithProviders(
-      <BroadcastNameContext.Provider value={{}}>
+      <BroadcastContext.Provider value={{}}>
         <CustomMessage />
-      </BroadcastNameContext.Provider>
+      </BroadcastContext.Provider>
     )
 
     rerender(
-      <BroadcastNameContext.Provider
-        value={{ 'broadcast-1': 'July 9th Class absentee' }}
+      <BroadcastContext.Provider
+        value={{
+          'outbound-1': {
+            id: 'broadcast-1',
+            name: 'July 9th Class absentee',
+          },
+        }}
       >
         <CustomMessage />
-      </BroadcastNameContext.Provider>
+      </BroadcastContext.Provider>
     )
 
     expect(

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -182,15 +182,21 @@ describe('SentMessageDeliveryStatus', () => {
       message: {
         id: 'own-1',
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => true,
       threadList: false,
     } as never)
 
-    renderWithProviders(<SentMessageDeliveryStatus />)
+    renderWithProviders(
+      <SentMessageDeliveryStatus
+        resolvedBroadcast={{
+          id: 'broadcast-1',
+          name: 'July 9th Class attendees',
+        }}
+      />
+    )
 
     expect(
       screen.getByTestId('sent-message-broadcast-status')
@@ -204,13 +210,16 @@ describe('SentMessageDeliveryStatus', () => {
   it('uses a generic label and invokes the broadcast callback when the name is missing', () => {
     const onBroadcastClick = vi.fn()
     mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-2', metadata: { broadcast_id: 'broadcast-1' } },
+      message: { id: 'own-2', metadata: { outbound_id: 'outbound-1' } },
       isMyMessage: () => true,
       threadList: false,
     } as never)
 
     renderWithProviders(
-      <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+      <SentMessageDeliveryStatus
+        onBroadcastClick={onBroadcastClick}
+        resolvedBroadcast={{ id: 'broadcast-1' }}
+      />
     )
 
     expect(
@@ -240,8 +249,7 @@ describe('SentMessageDeliveryStatus', () => {
       message: {
         id: 'own-2',
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => true,
@@ -249,7 +257,13 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
 
     renderWithProviders(
-      <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+      <SentMessageDeliveryStatus
+        onBroadcastClick={onBroadcastClick}
+        resolvedBroadcast={{
+          id: 'broadcast-1',
+          name: 'July 9th Class attendees',
+        }}
+      />
     )
 
     const button = screen.getByRole('button', {
@@ -274,8 +288,7 @@ describe('SentMessageDeliveryStatus', () => {
       message: {
         id: 'own-2',
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => true,
@@ -285,7 +298,10 @@ describe('SentMessageDeliveryStatus', () => {
     renderWithProviders(
       <SentMessageDeliveryStatus
         onBroadcastClick={onBroadcastClick}
-        resolvedBroadcastName="July 9th Class absentee"
+        resolvedBroadcast={{
+          id: 'broadcast-1',
+          name: 'July 9th Class absentee',
+        }}
       />
     )
 
@@ -307,8 +323,7 @@ describe('SentMessageDeliveryStatus', () => {
       message: {
         id: 'own-3',
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'Old campaign name',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => true,
@@ -318,7 +333,7 @@ describe('SentMessageDeliveryStatus', () => {
     renderWithProviders(
       <SentMessageDeliveryStatus
         onBroadcastClick={onBroadcastClick}
-        resolvedBroadcastName="Broadcast"
+        resolvedBroadcast={{ id: 'broadcast-1', name: 'Broadcast' }}
       />
     )
 
@@ -339,8 +354,7 @@ describe('SentMessageDeliveryStatus', () => {
       message: {
         id: 'broadcast-1',
         metadata: {
-          broadcast_id: 'broadcast-1',
-          broadcast_name: 'July 9th Class attendees',
+          outbound_id: 'outbound-1',
         },
       },
       isMyMessage: () => false,
@@ -348,7 +362,13 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
 
     renderWithProviders(
-      <SentMessageDeliveryStatus onBroadcastClick={vi.fn()} />
+      <SentMessageDeliveryStatus
+        onBroadcastClick={vi.fn()}
+        resolvedBroadcast={{
+          id: 'broadcast-1',
+          name: 'July 9th Class attendees',
+        }}
+      />
     )
 
     expect(

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -11,6 +11,11 @@ import {
   useMessageContext,
 } from 'stream-chat-react'
 
+import type {
+  BroadcastClickHandler,
+  ResolvedBroadcast,
+} from '../../types'
+
 /**
  * Message status stamps for sending and terminal `MessageStatus` states
  * (sent / delivered / read), plus failed messages.
@@ -96,18 +101,13 @@ const SendingStatus = () => {
 }
 
 const BroadcastStatus = ({
-  broadcastId,
-  broadcastName,
-  resolvedBroadcastName,
+  broadcast,
   onBroadcastClick,
 }: {
-  broadcastId: string
-  broadcastName?: string
-  resolvedBroadcastName?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  broadcast: ResolvedBroadcast
+  onBroadcastClick?: BroadcastClickHandler
 }) => {
-  const campaignName = resolvedBroadcastName || broadcastName
-  const name = campaignName || 'Broadcast'
+  const name = broadcast.name || 'Broadcast'
   // Underline the name only in the clickable variant (it reads as a link).
   // The name's colour still comes from the `.str-chat`-scoped grid rule in
   // styles.css; we only add the underline here.
@@ -133,12 +133,7 @@ const BroadcastStatus = ({
       type="button"
       className="inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit [font:inherit]"
       aria-label={`View broadcast ${name}`}
-      onClick={() =>
-        onBroadcastClick({
-          id: broadcastId,
-          ...(campaignName ? { name: campaignName } : {}),
-        })
-      }
+      onClick={() => onBroadcastClick(broadcast)}
     >
       {content}
     </button>
@@ -170,10 +165,10 @@ const FailedStatus = () => (
  */
 export const SentMessageDeliveryStatus = ({
   onBroadcastClick,
-  resolvedBroadcastName,
+  resolvedBroadcast,
 }: {
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
-  resolvedBroadcastName?: string
+  onBroadcastClick?: BroadcastClickHandler
+  resolvedBroadcast?: ResolvedBroadcast
 }) => {
   const { isMyMessage, message, threadList } = useMessageContext(
     'SentMessageDeliveryStatus'
@@ -195,16 +190,14 @@ export const SentMessageDeliveryStatus = ({
     return null
   }
 
-  const broadcastId = message.metadata?.broadcast_id
-  const broadcastName = message.metadata?.broadcast_name
+  const outboundId = message.metadata?.outbound_id
   const broadcastStatus =
     message.status !== 'sending' &&
     message.status !== 'failed' &&
-    broadcastId ? (
+    outboundId &&
+    resolvedBroadcast ? (
       <BroadcastStatus
-        broadcastId={broadcastId}
-        broadcastName={broadcastName}
-        resolvedBroadcastName={resolvedBroadcastName}
+        broadcast={resolvedBroadcast}
         onBroadcastClick={onBroadcastClick}
       />
     ) : null

package/src/components/CustomMessage/index.tsx

@@ -29,12 +29,16 @@ import {
   type MessageUIComponentProps,
 } from 'stream-chat-react'
 
+import type {
+  BroadcastClickHandler,
+  ResolvedBroadcast,
+} from '../../types'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import { isLinkAttachment } from '../MediaMessage'
 import type { BubbleGroupPosition } from '../MessageAttachment/types'
 
-import { BroadcastNameContext } from './BroadcastNameContext'
+import { BroadcastContext } from './BroadcastContext'
 import { useCustomMessage } from './context'
 import LockedAttachment from './LockedAttachment'
 import {
@@ -53,13 +57,13 @@ import StreamAttachmentMessage, {
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   viewerLanguage?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  onBroadcastClick?: BroadcastClickHandler
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   viewerLanguage?: string
-  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
-  resolvedBroadcastName?: string
+  onBroadcastClick?: BroadcastClickHandler
+  resolvedBroadcast?: ResolvedBroadcast
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -81,7 +85,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     threadList,
     viewerLanguage,
     onBroadcastClick,
-    resolvedBroadcastName,
+    resolvedBroadcast,
   } = props
 
   const { client } = useChatContext('CustomMessage')
@@ -437,7 +441,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
         )}
         <SentMessageDeliveryStatus
           onBroadcastClick={onBroadcastClick}
-          resolvedBroadcastName={resolvedBroadcastName}
+          resolvedBroadcast={resolvedBroadcast}
         />
         {showReplyCountButton && (
           <MessageRepliesCountButton
@@ -458,25 +462,26 @@ const MemoizedCustomMessage = React.memo(
   (prev, next) => {
     if (prev.viewerLanguage !== next.viewerLanguage) return false
     if (prev.onBroadcastClick !== next.onBroadcastClick) return false
-    if (prev.resolvedBroadcastName !== next.resolvedBroadcastName) return false
+    if (prev.resolvedBroadcast?.id !== next.resolvedBroadcast?.id) return false
+    if (prev.resolvedBroadcast?.name !== next.resolvedBroadcast?.name) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext
 
 export const CustomMessage = (props: CustomMessageUIComponentProps) => {
   const messageContext = useMessageContext('CustomMessage')
-  const broadcastNamesById = useContext(BroadcastNameContext)
-  const broadcastId = messageContext.message.metadata?.broadcast_id
-  const resolvedBroadcastName =
-    typeof broadcastId === 'string'
-      ? broadcastNamesById?.[broadcastId]
+  const broadcastsByOutboundId = useContext(BroadcastContext)
+  const outboundId = messageContext.message.metadata?.outbound_id
+  const resolvedBroadcast =
+    typeof outboundId === 'string'
+      ? broadcastsByOutboundId?.[outboundId]
       : undefined
 
   return (
     <MemoizedCustomMessage
       {...messageContext}
       {...props}
-      resolvedBroadcastName={resolvedBroadcastName}
+      resolvedBroadcast={resolvedBroadcast}
     />
   )
 }

package/src/components/MessagingShell/index.tsx

@@ -38,7 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderChannelActions,
   onParticipantNameClick,
   onBroadcastClick,
-  resolveBroadcastName,
+  resolveBroadcast,
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
@@ -264,7 +264,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           renderChannelActions={renderChannelActions}
           onParticipantNameClick={onParticipantNameClick}
           onBroadcastClick={onBroadcastClick}
-          resolveBroadcastName={resolveBroadcastName}
+          resolveBroadcast={resolveBroadcast}
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}

package/src/index.ts

@@ -60,7 +60,8 @@ export type {
   MessagingCapabilities,
   MessageLinkClickHandler,
   BroadcastClickHandler,
-  BroadcastNameResolver,
+  BroadcastResolver,
+  ResolvedBroadcast,
   Participant,
   LockedAttachmentSource,
 } from './types'

package/src/stream-custom-data.ts

@@ -66,8 +66,11 @@ export interface MessageMetadata {
    * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
    */
   sent_from?: 'stack_detail'
-  broadcast_id?: string
-  broadcast_name?: string
+  /**
+   * Opaque Outbound Record id on automation broadcast messages. Hosts resolve
+   * this server-side to the current automation id and name.
+   */
+  outbound_id?: string
 }
 
 /**

package/src/types.ts

@@ -36,12 +36,16 @@ export type MessageLinkClickHandler = (
   message: LocalMessage | undefined
 ) => void
 
-export type BroadcastClickHandler = (broadcast: {
+export type ResolvedBroadcast = {
   id: string
   name?: string
-}) => void
+}
+
+export type BroadcastClickHandler = (broadcast: ResolvedBroadcast) => void
 
-export type BroadcastNameResolver = (broadcastId: string) => string | undefined
+export type BroadcastResolver = (
+  outboundId: string
+) => ResolvedBroadcast | undefined
 
 export type ChannelPreviewProps = ChannelPreviewUIComponentProps & {
   selectedChannel?: Channel | null
@@ -369,12 +373,12 @@ export interface ChannelViewProps {
   onBroadcastClick?: BroadcastClickHandler
 
   /**
-   * Resolves the current campaign name for a broadcast label. The host must
-   * provide a new resolver reference when a returned name changes so
-   * ChannelView re-renders and publishes the new value to memoized rows. The
-   * stamped message name remains the fallback until this returns a name.
+   * Resolves an outbound record id to the current broadcast id and name. The
+   * host must provide a new resolver reference when a returned broadcast
+   * changes so ChannelView re-renders and publishes the new value to memoized
+   * rows. Missing records stay unresolved and render no label.
    */
-  resolveBroadcastName?: BroadcastNameResolver
+  resolveBroadcast?: BroadcastResolver
 
   /**
    * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
@@ -444,7 +448,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'onBroadcastClick'
-  | 'resolveBroadcastName'
+  | 'resolveBroadcast'
   | 'showChannelInfo'
   | 'composerInput'
 >