@linktr.ee/messaging-react 3.31.0-rc-1785485102 → 3.31.0

package/src/components/CustomMessage/BroadcastNameContext.ts

@@ -0,0 +1,95 @@
+import { createContext, useState } from 'react'
+
+import type { BroadcastNameResolver } from '../../types'
+
+/** Live campaign names keyed by broadcast id — not the resolver function. */
+export type BroadcastNamesById = Readonly<Record<string, string>>
+
+export const BroadcastNameContext = createContext<
+  BroadcastNamesById | undefined
+>(undefined)
+
+const broadcastIdFromMessage = (message: {
+  metadata?: { broadcast_id?: unknown }
+}): string | undefined => {
+  const broadcastId = message.metadata?.broadcast_id
+  return typeof broadcastId === 'string' ? broadcastId : undefined
+}
+
+/**
+ * Resolve campaign names for the messages currently in view.
+ *
+ * Built outside memoized Stream rows so a new resolver reference can publish
+ * new campaign names without remounting the Stream message rows.
+ */
+export const buildBroadcastNamesById = (
+  messages: readonly { metadata?: { broadcast_id?: unknown } }[] | undefined,
+  resolveBroadcastName: BroadcastNameResolver | undefined
+): BroadcastNamesById | undefined => {
+  if (!resolveBroadcastName || !messages?.length) {
+    return undefined
+  }
+
+  const seen = new Set<string>()
+  let names: Record<string, string> | undefined
+
+  for (const message of messages) {
+    const broadcastId = broadcastIdFromMessage(message)
+    if (!broadcastId || seen.has(broadcastId)) {
+      continue
+    }
+    seen.add(broadcastId)
+
+    const resolved = resolveBroadcastName(broadcastId)
+    if (!resolved) {
+      continue
+    }
+
+    names ??= {}
+    names[broadcastId] = resolved
+  }
+
+  return names
+}
+
+const areBroadcastNamesEqual = (
+  previous: BroadcastNamesById | undefined,
+  next: BroadcastNamesById | undefined
+): boolean => {
+  if (previous === next) {
+    return true
+  }
+  if (!previous || !next) {
+    return false
+  }
+
+  const previousIds = Object.keys(previous)
+  const nextIds = Object.keys(next)
+  if (previousIds.length !== nextIds.length) {
+    return false
+  }
+
+  return previousIds.every((id) => previous[id] === next[id])
+}
+
+/**
+ * Re-invokes the resolver on every render, but only returns a new object when
+ * the resolved strings actually change — so context consumers update for
+ * late-arriving campaign names without thrashing on unrelated renders.
+ */
+export const useBroadcastNamesById = (
+  messages: readonly { metadata?: { broadcast_id?: unknown } }[] | undefined,
+  resolveBroadcastName: BroadcastNameResolver | undefined
+): BroadcastNamesById | undefined => {
+  const names = buildBroadcastNamesById(messages, resolveBroadcastName)
+  const [publishedNames, setPublishedNames] = useState<
+    BroadcastNamesById | undefined
+  >(names)
+
+  if (!areBroadcastNamesEqual(publishedNames, names)) {
+    setPublishedNames(names)
+    return names
+  }
+
+  return publishedNames
+}

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

@@ -23,8 +23,10 @@ import {
   storyUsers,
 } from '../../stories/decorators/storyUser'
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
+import type { BroadcastNameResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
+import { BroadcastNameContext, buildBroadcastNamesById } from './BroadcastNameContext'
 import { CustomMessageActions } from './CustomMessageActions'
 
 import { CustomMessage } from './index'
@@ -49,7 +51,6 @@ const createMockChannel = async (
     type: msg.type ?? ('regular' as const),
     created_at: minutesAgo(messages.length - index),
     updated_at: minutesAgo(messages.length - index),
-    html: `<p>${msg.text}</p>`,
     attachments: msg.attachments ?? [],
     latest_reactions: [],
     own_reactions: [],
@@ -58,7 +59,7 @@ const createMockChannel = async (
     reply_count: 0,
     status: 'received',
     cid: 'messaging:storybook-channel-1',
-    mentioned_users: [],
+    mentioned_users: msg.mentioned_users ?? [],
   }))
 
   const channelData = {
@@ -108,10 +109,12 @@ const createMockChannel = async (
 interface TemplateProps {
   currentUser: StoryUser
   typingUser?: StoryUser
+  resolveBroadcastName?: BroadcastNameResolver
   messages: Array<{
     id: string
     text: string
     user: StoryUser
+    mentioned_users?: StoryUser[]
     type?: 'regular' | 'system'
     attachments?: Array<Record<string, unknown>>
     metadata?: {
@@ -138,7 +141,8 @@ const TemplateInner: React.FC<{
   currentUser: StoryUser
   typingUser?: StoryUser
   messages: TemplateProps['messages']
-}> = ({ currentUser, typingUser, messages }) => {
+  resolveBroadcastName?: BroadcastNameResolver
+}> = ({ currentUser, typingUser, messages, resolveBroadcastName }) => {
   const [client] = React.useState(() => createMockStreamChatClient(currentUser))
 
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
@@ -164,14 +168,14 @@ const TemplateInner: React.FC<{
     return () => clearTimeout(timer)
   }, [channel, client, typingUser])
 
+  const broadcastNamesById = React.useMemo(
+    () => buildBroadcastNamesById(messages, resolveBroadcastName),
+    [messages, resolveBroadcastName]
+  )
+
   const MessageComponent = React.useMemo(() => {
     return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return (
-        <CustomMessage
-          {...props}
-          onBroadcastClick={() => undefined}
-        />
-      )
+      return <CustomMessage {...props} onBroadcastClick={() => undefined} />
     }
   }, [])
 
@@ -180,19 +184,21 @@ const TemplateInner: React.FC<{
   }
 
   return (
-    <Chat client={client}>
-      <div className="h-screen w-full bg-white">
-        <Channel
-          channel={channel}
-          Message={MessageComponent}
-          TypingIndicator={CustomTypingIndicator}
-        >
-          <Window>
-            <MessageList />
-          </Window>
-        </Channel>
-      </div>
-    </Chat>
+    <BroadcastNameContext.Provider value={broadcastNamesById}>
+      <Chat client={client}>
+        <div className="h-screen w-full bg-white">
+          <Channel
+            channel={channel}
+            Message={MessageComponent}
+            TypingIndicator={CustomTypingIndicator}
+          >
+            <Window>
+              <MessageList />
+            </Window>
+          </Channel>
+        </div>
+      </Chat>
+    </BroadcastNameContext.Provider>
   )
 }
 
@@ -200,12 +206,14 @@ const Template: StoryFn<TemplateProps> = ({
   currentUser = storyUsers.creator,
   typingUser,
   messages,
+  resolveBroadcastName,
 }) => (
   <TemplateInner
     key={currentUser.id}
     currentUser={currentUser}
     typingUser={typingUser}
     messages={messages}
+    resolveBroadcastName={resolveBroadcastName}
   />
 )
 
@@ -230,6 +238,24 @@ Default.args = {
   ],
 }
 
+export const MentionContrast: StoryFn<TemplateProps> = Template.bind({})
+MentionContrast.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hi @Creator, could you take a look at this?',
+      user: storyUsers.visitor,
+      mentioned_users: [storyUsers.creator],
+    },
+    {
+      id: 'msg-2',
+      text: 'Sure thing, @Visitor — I will check it now.',
+      user: storyUsers.creator,
+      mentioned_users: [storyUsers.visitor],
+    },
+  ],
+}
+
 // MES-1036: "✓✓ Delivered" appears below only the most recent *sent*
 // message. Every mock message carries status: 'received', and stream's
 // MessageList derives `lastOwnMessage`, so the indicator lands on the last
@@ -302,6 +328,12 @@ BroadcastStatusNonLatest.args = {
   ],
 }
 
+export const BroadcastStatusResolved: StoryFn<TemplateProps> = Template.bind({})
+BroadcastStatusResolved.args = {
+  ...BroadcastStatus.args,
+  resolveBroadcastName: () => 'July 9th Class absentee',
+}
+
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
 WithTipTag.args = {
   messages: [

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

@@ -4,6 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 
+import { BroadcastNameContext } from './BroadcastNameContext'
+
 import { CustomMessage } from './index'
 
 vi.mock('stream-chat-react', () => ({
@@ -138,4 +140,50 @@ describe('CustomMessage', () => {
       name: 'July 9th Class attendees',
     })
   })
+
+  it('prefers a resolved broadcast name over the stamped name', () => {
+    renderWithProviders(
+      <BroadcastNameContext.Provider
+        value={{ 'broadcast-1': 'July 9th Class absentee' }}
+      >
+        <CustomMessage />
+      </BroadcastNameContext.Provider>
+    )
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class absentee')
+  })
+
+  it('falls back to the stamped broadcast name when resolution is unavailable', () => {
+    renderWithProviders(
+      <BroadcastNameContext.Provider value={{}}>
+        <CustomMessage />
+      </BroadcastNameContext.Provider>
+    )
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class attendees')
+  })
+
+  it('renders a later resolved name when the live context value changes', () => {
+    const { rerender } = renderWithProviders(
+      <BroadcastNameContext.Provider value={{}}>
+        <CustomMessage />
+      </BroadcastNameContext.Provider>
+    )
+
+    rerender(
+      <BroadcastNameContext.Provider
+        value={{ 'broadcast-1': 'July 9th Class absentee' }}
+      >
+        <CustomMessage />
+      </BroadcastNameContext.Provider>
+    )
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class absentee')
+  })
 })

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

@@ -269,6 +269,68 @@ describe('SentMessageDeliveryStatus', () => {
     )
   })
 
+  it('passes the resolved broadcast name to the click callback', () => {
+    const onBroadcastClick = vi.fn()
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-2',
+        metadata: {
+          broadcast_id: 'broadcast-1',
+          broadcast_name: 'July 9th Class attendees',
+        },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(
+      <SentMessageDeliveryStatus
+        onBroadcastClick={onBroadcastClick}
+        resolvedBroadcastName="July 9th Class absentee"
+      />
+    )
+
+    screen.getByRole('button', {
+      name: 'View broadcast July 9th Class absentee',
+    }).click()
+
+    expect(onBroadcastClick).toHaveBeenCalledWith({
+      id: 'broadcast-1',
+      name: 'July 9th Class absentee',
+    })
+  })
+
+  it('reports a campaign named Broadcast on click', () => {
+    const onBroadcastClick = vi.fn()
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-3',
+        metadata: {
+          broadcast_id: 'broadcast-1',
+          broadcast_name: 'Old campaign name',
+        },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(
+      <SentMessageDeliveryStatus
+        onBroadcastClick={onBroadcastClick}
+        resolvedBroadcastName="Broadcast"
+      />
+    )
+
+    screen.getByRole('button', {
+      name: 'View broadcast Broadcast',
+    }).click()
+
+    expect(onBroadcastClick).toHaveBeenCalledWith({
+      id: 'broadcast-1',
+      name: 'Broadcast',
+    })
+  })
+
   it('does not render a broadcast label for a visitor viewing a broadcast message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: {

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -97,13 +97,16 @@ const SendingStatus = () => {
 const BroadcastStatus = ({
   broadcastId,
   broadcastName,
+  resolvedBroadcastName,
   onBroadcastClick,
 }: {
   broadcastId: string
   broadcastName?: string
+  resolvedBroadcastName?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }) => {
-  const name = broadcastName || 'Broadcast'
+  const campaignName = resolvedBroadcastName || broadcastName
+  const name = campaignName || 'Broadcast'
   const content = (
     <>
       <span className="sent-message-broadcast-badge" aria-hidden="true">
@@ -126,7 +129,7 @@ const BroadcastStatus = ({
       onClick={() =>
         onBroadcastClick({
           id: broadcastId,
-          ...(broadcastName ? { name: broadcastName } : {}),
+          ...(campaignName ? { name: campaignName } : {}),
         })
       }
     >
@@ -160,8 +163,10 @@ const FailedStatus = () => (
  */
 export const SentMessageDeliveryStatus = ({
   onBroadcastClick,
+  resolvedBroadcastName,
 }: {
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  resolvedBroadcastName?: string
 }) => {
   const { isMyMessage, message, threadList } = useMessageContext(
     'SentMessageDeliveryStatus'
@@ -192,6 +197,7 @@ export const SentMessageDeliveryStatus = ({
       <BroadcastStatus
         broadcastId={broadcastId}
         broadcastName={broadcastName}
+        resolvedBroadcastName={resolvedBroadcastName}
         onBroadcastClick={onBroadcastClick}
       />
     ) : null

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

@@ -258,37 +258,4 @@ describe('StreamAttachmentMessage', () => {
       )
     ).toHaveTextContent('from the trip')
   })
-
-  it('forwards a persisted duration and waveform to the audio card', () => {
-    // Audio is sent as `type: "file"` with an `audio/*` mime type (for
-    // mobile compatibility), and the composer persists `duration` +
-    // `waveform_data` on the outgoing attachment. Without this
-    // passthrough every sent and received card would fall back to
-    // `--:--` and a flat placeholder even though the data is there.
-    renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage
-        message={message([
-          {
-            type: 'file',
-            asset_url: 'https://cdn.example.com/take-1.mp3',
-            mime_type: 'audio/mpeg',
-            title: 'take-1.mp3',
-            duration: 12,
-            waveform_data: [0.2, 0.9, 0.5, 0.7],
-          },
-        ])}
-      />
-    )
-
-    expect(screen.getByText('00:12')).toBeInTheDocument()
-    // The flat placeholder renders every bar at 0%; a real waveform is
-    // observable as bars drawn above that floor.
-    const barHeights = screen
-      .getAllByTestId('amplitude-bar')
-      .map((bar) => bar.style.getPropertyValue('--mes-audio-wave-bar'))
-    expect(barHeights).toHaveLength(35)
-    expect(barHeights.some((height) => height !== '0%')).toBe(true)
-  })
 })

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -225,8 +225,6 @@ function buildMediaClusterRenderProps(
             src: trimToUndefined(attachment.asset_url) ?? '',
             mimeType: trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
             filename: trimToUndefined((attachment as { title?: string }).title),
-            durationSeconds: attachment.duration,
-            waveformData: attachment.waveform_data,
           })),
         }
       case 'pdf':
@@ -273,12 +271,6 @@ function buildMediaClusterRenderProps(
         src: trimToUndefined(attachment.asset_url) ?? '',
         mimeType: trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
         filename: trimToUndefined((attachment as { title?: string }).title),
-        // Both are first-class `stream-chat` Attachment fields. The
-        // composer writes them at send time so the waveform card paints
-        // the real amplitudes and the correct duration with no remote
-        // decode and no CDN CORS exposure.
-        durationSeconds: attachment.duration,
-        waveformData: attachment.waveform_data,
       }
     case 'pdf':
       return {

package/src/components/CustomMessage/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { useMemo, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import {
   Attachment as DefaultAttachment,
   EditMessageModal as DefaultEditMessageModal,
@@ -35,6 +35,7 @@ import { Avatar } from '../Avatar'
 import { isLinkAttachment } from '../MediaMessage'
 import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
 
+import { BroadcastNameContext } from './BroadcastNameContext'
 import { useCustomMessage } from './context'
 import LockedAttachment from './LockedAttachment'
 import {
@@ -61,6 +62,7 @@ type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  resolvedBroadcastName?: string
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -82,6 +84,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     threadList,
     viewerLanguage,
     onBroadcastClick,
+    resolvedBroadcastName,
   } = props
 
   const { client } = useChatContext('CustomMessage')
@@ -426,7 +429,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+        <SentMessageDeliveryStatus
+          onBroadcastClick={onBroadcastClick}
+          resolvedBroadcastName={resolvedBroadcastName}
+        />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -447,11 +453,25 @@ const MemoizedCustomMessage = React.memo(
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
     if (prev.viewerLanguage !== next.viewerLanguage) return false
     if (prev.onBroadcastClick !== next.onBroadcastClick) return false
+    if (prev.resolvedBroadcastName !== next.resolvedBroadcastName) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext
 
 export const CustomMessage = (props: CustomMessageUIComponentProps) => {
   const messageContext = useMessageContext('CustomMessage')
-  return <MemoizedCustomMessage {...messageContext} {...props} />
+  const broadcastNamesById = useContext(BroadcastNameContext)
+  const broadcastId = messageContext.message.metadata?.broadcast_id
+  const resolvedBroadcastName =
+    typeof broadcastId === 'string'
+      ? broadcastNamesById?.[broadcastId]
+      : undefined
+
+  return (
+    <MemoizedCustomMessage
+      {...messageContext}
+      {...props}
+      resolvedBroadcastName={resolvedBroadcastName}
+    />
+  )
 }

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -6,6 +6,7 @@ import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
 import LockedAttachment from '../CustomMessage/LockedAttachment'
+import LinkAttachment from '../LinkAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -75,10 +76,16 @@ type WrapperProps = {
   sendButton?: React.ComponentType<SendButtonProps>
   attachmentPreviewList?: React.ComponentType
   renderFooter?: () => React.ReactNode
+  /**
+   * Stands in for a host that publishes `--messaging-surface-height` — the
+   * keyboard-shrunk viewport height the composer caps itself against. Set it to
+   * pin the cap to a known value instead of leaving it viewport-relative.
+   */
+  surfaceHeight?: number
 }
 
 const Wrapper: React.FC<WrapperProps> = (props) => {
-  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter } = props
+  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter, surfaceHeight } = props
 
   const [client] = React.useState(() => createMockStreamChatClient(mockUser))
 
@@ -97,7 +104,23 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
         {...(sendButton ? { SendButton: sendButton } : {})}
         {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
       >
-        <div className="bg-white" style={{ minWidth: 360 }}>
+        <div
+          className="bg-white"
+          style={
+            {
+              minWidth: 360,
+              // Bottom-anchored inside a fixed-height surface, the way the host
+              // lays the composer out under a raised keyboard.
+              ...(surfaceHeight && {
+                height: surfaceHeight,
+                '--messaging-surface-height': `${surfaceHeight}px`,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-end',
+              }),
+            } as React.CSSProperties
+          }
+        >
           <CustomMessageInput renderActions={renderActions} renderFooter={renderFooter} />
         </div>
       </Channel>
@@ -226,6 +249,31 @@ WithAttachments.parameters = {
   },
 }
 
+export const WithStagedLinkPreviewUnderKeyboard: StoryFn<WrapperProps> = (args) => (
+  <Wrapper {...args} />
+)
+WithStagedLinkPreviewUnderKeyboard.args = {
+  // Roughly a 393x852 phone with the soft keyboard up, so the 250px staged card
+  // alone outgrows the composer's cap (half of this) and the card scrolls.
+  surfaceHeight: 516,
+  attachmentPreviewList: () => (
+    <LinkAttachment.Composer
+      title="How to run your first marathon"
+      url="https://example.com/marathon"
+      thumbnailUrl="https://picsum.photos/seed/marathon/580/300"
+      onDismiss={() => console.log('dismiss link preview')}
+    />
+  ),
+}
+WithStagedLinkPreviewUnderKeyboard.parameters = {
+  docs: {
+    description: {
+      story:
+        'MES-1037: with a link preview staged the composer used to grow tall enough for the soft keyboard to cover the textarea and send button. The white card is now capped at half `--messaging-surface-height` (the keyboard-shrunk height its host publishes) and scrolls as ONE region — the preview keeps its full height instead of being cropped to make room, and the send button sticks to the bottom of the scroll so a long message cannot carry it out of view.',
+    },
+  },
+}
+
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (