@linktr.ee/messaging-react 3.25.0 → 3.27.0-rc-1785466017

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-QulHlER7.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.MessageBubble=e.MessageBubble;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;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-ByySBsKx.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.MessageBubble=e.MessageBubble;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -87,6 +87,8 @@ export declare type BroadcastClickHandler = (broadcast: {
     name?: string;
 }) => void;
 
+export declare type BroadcastNameResolver = (broadcastId: string) => string | undefined;
+
 /**
  * Build the meta line shown under the title in compact document / file
  * attachments — `EXT · SIZE` (`PDF · 379.5 KB`). Either part is dropped
@@ -210,7 +212,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'resolveBroadcastName' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -401,6 +403,11 @@ export declare interface ChannelViewProps {
      * Hosts own navigation so this shared package never assumes an admin URL.
      */
     onBroadcastClick?: BroadcastClickHandler;
+    /**
+     * Resolves the current campaign name for a broadcast label. The stamped
+     * message name remains the fallback when this returns undefined.
+     */
+    resolveBroadcastName?: BroadcastNameResolver;
     /**
      * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
      * the send control: `Channel` merges this into `ComponentContext` and an

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.25.0",
+  "version": "3.27.0-rc-1785466017",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1785466017",
     "@linktr.ee/messaging-taxonomy": "^0.3.0",
     "@phosphor-icons/react": "^2.1.10",
     "culori": "^4.0.2"

package/src/components/ChannelView.tsx

@@ -57,6 +57,7 @@ const ChannelViewInner: React.FC<{
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
   onBroadcastClick?: ChannelViewProps['onBroadcastClick']
+  resolveBroadcastName?: ChannelViewProps['resolveBroadcastName']
   composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
@@ -84,6 +85,7 @@ const ChannelViewInner: React.FC<{
   showChannelInfo = true,
   onParticipantNameClick,
   onBroadcastClick,
+  resolveBroadcastName,
   composerInput,
 }) => {
   const { channel } = useChannelStateContext()
@@ -99,6 +101,16 @@ const ChannelViewInner: React.FC<{
   const messageBroadcastClick = onBroadcastClick
     ? stableOnBroadcastClick
     : undefined
+  const resolveBroadcastNameRef = useRef(resolveBroadcastName)
+  useEffect(() => {
+    resolveBroadcastNameRef.current = resolveBroadcastName
+  }, [resolveBroadcastName])
+  const stableResolveBroadcastName = useCallback<
+    NonNullable<ChannelViewProps['resolveBroadcastName']>
+  >((broadcastId) => resolveBroadcastNameRef.current?.(broadcastId), [])
+  const messageBroadcastName = resolveBroadcastName
+    ? stableResolveBroadcastName
+    : undefined
 
   const hasVisibleMessages = channel.state.messages.some(
     (message) => message.type !== 'deleted'
@@ -140,6 +152,7 @@ const ChannelViewInner: React.FC<{
           chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
           onBroadcastClick={messageBroadcastClick}
+          resolveBroadcastName={messageBroadcastName}
         />
       )
 
@@ -149,7 +162,13 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, messageBroadcastClick, renderMessage, viewerLanguage]
+    [
+      chatbotVotingEnabled,
+      messageBroadcastClick,
+      messageBroadcastName,
+      renderMessage,
+      viewerLanguage,
+    ]
   )
 
   return (
@@ -308,6 +327,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showChannelInfo = true,
     onParticipantNameClick,
     onBroadcastClick,
+    resolveBroadcastName,
     composerInput,
   }) => {
     // Custom send message handler that:
@@ -422,6 +442,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
               onBroadcastClick={onBroadcastClick}
+              resolveBroadcastName={resolveBroadcastName}
               composerInput={composerInput}
             />
           </Channel>

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

@@ -23,6 +23,7 @@ import {
   storyUsers,
 } from '../../stories/decorators/storyUser'
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
+import type { BroadcastNameResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
 import { CustomMessageActions } from './CustomMessageActions'
@@ -108,6 +109,7 @@ const createMockChannel = async (
 interface TemplateProps {
   currentUser: StoryUser
   typingUser?: StoryUser
+  resolveBroadcastName?: BroadcastNameResolver
   messages: Array<{
     id: string
     text: string
@@ -138,7 +140,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)
@@ -170,10 +173,11 @@ const TemplateInner: React.FC<{
         <CustomMessage
           {...props}
           onBroadcastClick={() => undefined}
+          resolveBroadcastName={resolveBroadcastName}
         />
       )
     }
-  }, [])
+  }, [resolveBroadcastName])
 
   if (!channel) {
     return <div className="p-4">Loading...</div>
@@ -200,12 +204,14 @@ const Template: StoryFn<TemplateProps> = ({
   currentUser = storyUsers.creator,
   typingUser,
   messages,
+  resolveBroadcastName,
 }) => (
   <TemplateInner
     key={currentUser.id}
     currentUser={currentUser}
     typingUser={typingUser}
     messages={messages}
+    resolveBroadcastName={resolveBroadcastName}
   />
 )
 
@@ -302,6 +308,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

@@ -138,4 +138,39 @@ describe('CustomMessage', () => {
       name: 'July 9th Class attendees',
     })
   })
+
+  it('prefers a resolved broadcast name over the stamped name', () => {
+    renderWithProviders(
+      <CustomMessage
+        resolveBroadcastName={() => 'July 9th Class absentee'}
+      />
+    )
+
+    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(<CustomMessage resolveBroadcastName={() => undefined} />)
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class attendees')
+  })
+
+  it('renders a later resolved name when the resolver value changes', () => {
+    const resolvedName: { current?: string } = {}
+    const resolveBroadcastName = () => resolvedName.current
+    const { rerender } = renderWithProviders(
+      <CustomMessage resolveBroadcastName={resolveBroadcastName} />
+    )
+
+    resolvedName.current = 'July 9th Class absentee'
+    rerender(<CustomMessage resolveBroadcastName={resolveBroadcastName} />)
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class absentee')
+  })
 })

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -97,13 +97,18 @@ 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 name =
+    resolvedBroadcastName ||
+    broadcastName ||
+    'Broadcast'
   const content = (
     <>
       <span className="sent-message-broadcast-badge" aria-hidden="true">
@@ -160,8 +165,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 +199,7 @@ export const SentMessageDeliveryStatus = ({
       <BroadcastStatus
         broadcastId={broadcastId}
         broadcastName={broadcastName}
+        resolvedBroadcastName={resolvedBroadcastName}
         onBroadcastClick={onBroadcastClick}
       />
     ) : null

package/src/components/CustomMessage/index.tsx

@@ -30,6 +30,7 @@ import {
 } from 'stream-chat-react'
 
 import { useMessageVote } from '../../hooks/useMessageVote'
+import type { BroadcastNameResolver } from '../../types'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import { isLinkAttachment } from '../MediaMessage'
@@ -55,12 +56,14 @@ type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  resolveBroadcastName?: BroadcastNameResolver
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+  resolvedBroadcastName?: string
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -82,6 +85,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     threadList,
     viewerLanguage,
     onBroadcastClick,
+    resolvedBroadcastName,
   } = props
 
   const { client } = useChatContext('CustomMessage')
@@ -426,7 +430,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+        <SentMessageDeliveryStatus
+          onBroadcastClick={onBroadcastClick}
+          resolvedBroadcastName={resolvedBroadcastName}
+        />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -447,11 +454,23 @@ 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 broadcastId = messageContext.message.metadata?.broadcast_id
+  const resolvedBroadcastName = broadcastId
+    ? props.resolveBroadcastName?.(broadcastId)
+    : undefined
+
+  return (
+    <MemoizedCustomMessage
+      {...messageContext}
+      {...props}
+      resolvedBroadcastName={resolvedBroadcastName}
+    />
+  )
 }

package/src/components/MessagingShell/index.tsx

@@ -39,6 +39,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderChannelActions,
   onParticipantNameClick,
   onBroadcastClick,
+  resolveBroadcastName,
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
@@ -265,6 +266,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           renderChannelActions={renderChannelActions}
           onParticipantNameClick={onParticipantNameClick}
           onBroadcastClick={onBroadcastClick}
+          resolveBroadcastName={resolveBroadcastName}
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}

package/src/index.ts

@@ -61,6 +61,7 @@ export type {
   MessagingCapabilities,
   MessageLinkClickHandler,
   BroadcastClickHandler,
+  BroadcastNameResolver,
   Participant,
   LockedAttachmentSource,
 } from './types'

package/src/types.ts

@@ -41,6 +41,8 @@ export type BroadcastClickHandler = (broadcast: {
   name?: string
 }) => void
 
+export type BroadcastNameResolver = (broadcastId: string) => string | undefined
+
 export type ChannelPreviewProps = ChannelPreviewUIComponentProps & {
   selectedChannel?: Channel | null
   onChannelSelect: (channel: Channel) => void
@@ -373,6 +375,12 @@ export interface ChannelViewProps {
    */
   onBroadcastClick?: BroadcastClickHandler
 
+  /**
+   * Resolves the current campaign name for a broadcast label. The stamped
+   * message name remains the fallback when this returns undefined.
+   */
+  resolveBroadcastName?: BroadcastNameResolver
+
   /**
    * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
    * the send control: `Channel` merges this into `ComponentContext` and an
@@ -442,6 +450,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'onBroadcastClick'
+  | 'resolveBroadcastName'
   | 'showChannelInfo'
   | 'composerInput'
 >