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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DzOGH7lG.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.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B1u9TBSD.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.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -85,12 +85,9 @@ export declare interface AvatarProps {
     dmAgentEnabled?: boolean;
 }
 
-export declare type BroadcastClickHandler = (broadcast: {
-    id: string;
-    name?: string;
-}) => void;
+export declare type BroadcastClickHandler = (broadcast: ResolvedBroadcast) => void;
 
-export declare type BroadcastNameResolver = (broadcastId: string) => string | undefined;
+export declare type BroadcastResolver = (outboundId: string) => ResolvedBroadcast | undefined;
 
 /**
  * Build the meta line shown under the title in compact document / file
@@ -215,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' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'resolveBroadcastName' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'resolveBroadcast' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -400,12 +397,12 @@ export declare 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
      * the send control: `Channel` merges this into `ComponentContext` and an
@@ -1409,8 +1406,11 @@ export declare 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;
 }
 
 declare type MessageWithI18n = Pick<LocalMessage, 'text'> & {
@@ -1635,6 +1635,11 @@ export declare interface ReceivedBubbleProps extends MessageBubbleBaseProps {
  */
 export declare function resolveConversationParticipant(members: ChannelMembers | undefined, currentUserId: string | undefined, channelType: string | undefined): ChannelMember | undefined;
 
+export declare type ResolvedBroadcast = {
+    id: string;
+    name?: string;
+};
+
 export declare function resolveLinkAttachment(message: LocalMessage): Attachment | undefined;
 
 export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;

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 r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-i03XGFsr.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-NfAAanC-.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -56,8 +56,11 @@ export declare 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.38.2",
+  "version": "4.0.0-rc-1786383199",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.4.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786383199",
     "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/{ChannelHeaderRedesign.tsx → ChannelHeader.tsx}

@@ -28,7 +28,7 @@ const isCustomerPaidTag = (value: unknown) =>
     .replace(/[\s-]+/g, '_')
     .toUpperCase() === CUSTOMER_PAID_TAG
 
-interface ChannelHeaderRedesignProps {
+interface ChannelHeaderProps {
   className?: string
   onBack?: () => void
   showBackButton: boolean
@@ -47,7 +47,7 @@ interface ChannelHeaderRedesignProps {
   onParticipantNameClick?: () => void
 }
 
-export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({
   className,
   onBack,
   showBackButton,
@@ -241,3 +241,5 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
     </div>
   )
 }
+
+export default ChannelHeader

package/src/components/{ChannelView.broadcast-name.integration.test.tsx → ChannelView.broadcast-resolution.integration.test.tsx}

@@ -14,8 +14,7 @@ const message = {
   status: 'received',
   user: { id: 'linker-1', name: 'Linker' },
   metadata: {
-    broadcast_id: 'broadcast-1',
-    broadcast_name: 'July 9th Class attendees',
+    outbound_id: 'outbound-1',
   },
   attachments: [],
   latest_reactions: [],
@@ -54,11 +53,14 @@ const createChannel = () => {
   return { channel, client }
 }
 
-describe('ChannelView broadcast-name resolution', () => {
-  it('updates an existing Stream message row when the resolved name arrives', async () => {
+describe('ChannelView broadcast resolution', () => {
+  it('updates an existing Stream message row when its outbound lookup resolves', async () => {
     const { channel, client } = createChannel()
     const firstResolver = () => undefined
-    const secondResolver = () => 'July 9th Class absentee'
+    const secondResolver = () => ({
+      id: 'broadcast-1',
+      name: 'July 9th Class absentee',
+    })
     const mounts = vi.fn()
     const unmounts = vi.fn()
 
@@ -80,7 +82,7 @@ describe('ChannelView broadcast-name resolution', () => {
           <Channel channel={channel as StreamChannel}>
             <ChannelView
               channel={channel as StreamChannel}
-              resolveBroadcastName={firstResolver}
+              resolveBroadcast={firstResolver}
               renderMessage={renderMessage}
             />
           </Channel>
@@ -89,8 +91,8 @@ describe('ChannelView broadcast-name resolution', () => {
     })
 
     expect(
-      screen.getByTestId('sent-message-broadcast-status')
-    ).toHaveTextContent('July 9th Class attendees')
+      screen.queryByTestId('sent-message-broadcast-status')
+    ).not.toBeInTheDocument()
     expect(mounts).toHaveBeenCalledOnce()
 
     act(() => {
@@ -99,7 +101,7 @@ describe('ChannelView broadcast-name resolution', () => {
           <Channel channel={channel as StreamChannel}>
             <ChannelView
               channel={channel as StreamChannel}
-              resolveBroadcastName={secondResolver}
+              resolveBroadcast={secondResolver}
               renderMessage={renderMessage}
             />
           </Channel>

package/src/components/ChannelView.tsx

@@ -13,13 +13,13 @@ import {
 
 import type { ChannelViewProps } from '../types'
 
-import { ChannelHeaderRedesign } from './ChannelHeaderRedesign'
+import ChannelHeader from './ChannelHeader'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import {
-  BroadcastNameContext,
-  useBroadcastNamesById,
-} from './CustomMessage/BroadcastNameContext'
+  BroadcastContext,
+  useBroadcastsByOutboundId,
+} from './CustomMessage/BroadcastContext'
 import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
@@ -60,7 +60,7 @@ const ChannelViewInner: React.FC<{
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
   onBroadcastClick?: ChannelViewProps['onBroadcastClick']
-  resolveBroadcastName?: ChannelViewProps['resolveBroadcastName']
+  resolveBroadcast?: ChannelViewProps['resolveBroadcast']
   composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
@@ -87,7 +87,7 @@ const ChannelViewInner: React.FC<{
   showChannelInfo = true,
   onParticipantNameClick,
   onBroadcastClick,
-  resolveBroadcastName,
+  resolveBroadcast,
   composerInput,
 }) => {
   const { channel, messages } = useChannelStateContext()
@@ -103,11 +103,11 @@ const ChannelViewInner: React.FC<{
   const messageBroadcastClick = onBroadcastClick
     ? stableOnBroadcastClick
     : undefined
-  // Resolve outside memoized Stream rows so new campaign names publish without
-  // remounting the rows.
-  const broadcastNamesById = useBroadcastNamesById(
+  // Resolve outside memoized Stream rows so current campaign details publish
+  // without remounting the rows.
+  const broadcastsByOutboundId = useBroadcastsByOutboundId(
     messages,
-    resolveBroadcastName
+    resolveBroadcast
   )
 
   const hasVisibleMessages = channel.state.messages.some(
@@ -119,7 +119,7 @@ const ChannelViewInner: React.FC<{
     </React.Fragment>
   ) : null
   const channelHeader = (
-    <ChannelHeaderRedesign
+    <ChannelHeader
       className="-mx-[var(--str-chat\_\_spacing-2)] px-[var(--str-chat\_\_spacing-2)] md:-mx-[min(var(--str-chat\_\_spacing-10),4%)] md:px-[min(var(--str-chat\_\_spacing-10),4%)]"
       onBack={onBack}
       showBackButton={showBackButton}
@@ -162,7 +162,7 @@ const ChannelViewInner: React.FC<{
   )
 
   return (
-    <BroadcastNameContext.Provider value={broadcastNamesById}>
+    <BroadcastContext.Provider value={broadcastsByOutboundId}>
       <WithComponents
         overrides={{
           Message: MessageOverride,
@@ -274,7 +274,7 @@ const ChannelViewInner: React.FC<{
           )}
         </Window>
       </WithComponents>
-    </BroadcastNameContext.Provider>
+    </BroadcastContext.Provider>
   )
 }
 
@@ -316,7 +316,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showChannelInfo = true,
     onParticipantNameClick,
     onBroadcastClick,
-    resolveBroadcastName,
+    resolveBroadcast,
     composerInput,
   }) => {
     // Custom send message handler that:
@@ -430,7 +430,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
               onBroadcastClick={onBroadcastClick}
-              resolveBroadcastName={resolveBroadcastName}
+              resolveBroadcast={resolveBroadcast}
               composerInput={composerInput}
             />
           </Channel>

package/src/components/CustomMessage/BroadcastContext.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { buildBroadcastsByOutboundId } from './BroadcastContext'
+
+describe('buildBroadcastsByOutboundId', () => {
+  it('returns undefined when no resolver is provided', () => {
+    expect(
+      buildBroadcastsByOutboundId(
+        [{ metadata: { outbound_id: 'outbound-1' } }],
+        undefined
+      )
+    ).toBeUndefined()
+  })
+
+  it('resolves each unique outbound id once', () => {
+    const resolveBroadcast = vi.fn((outboundId: string) => ({
+      id: `broadcast-for-${outboundId}`,
+      name: `name-for-${outboundId}`,
+    }))
+
+    expect(
+      buildBroadcastsByOutboundId(
+        [
+          { metadata: { outbound_id: 'outbound-1' } },
+          { metadata: { outbound_id: 'outbound-1' } },
+          { metadata: { outbound_id: 'outbound-2' } },
+          { metadata: {} },
+        ],
+        resolveBroadcast
+      )
+    ).toEqual({
+      'outbound-1': {
+        id: 'broadcast-for-outbound-1',
+        name: 'name-for-outbound-1',
+      },
+      'outbound-2': {
+        id: 'broadcast-for-outbound-2',
+        name: 'name-for-outbound-2',
+      },
+    })
+    expect(resolveBroadcast).toHaveBeenCalledTimes(2)
+  })
+
+  it('omits outbound records the resolver cannot resolve', () => {
+    expect(
+      buildBroadcastsByOutboundId(
+        [{ metadata: { outbound_id: 'outbound-1' } }],
+        () => undefined
+      )
+    ).toBeUndefined()
+  })
+})

package/src/components/CustomMessage/BroadcastContext.ts

@@ -0,0 +1,101 @@
+import { createContext, useState } from 'react'
+
+import type { BroadcastResolver, ResolvedBroadcast } from '../../types'
+
+/** Current broadcasts keyed by the outbound record id stored on each message. */
+export type BroadcastsByOutboundId = Readonly<
+  Record<string, ResolvedBroadcast>
+>
+
+export const BroadcastContext = createContext<
+  BroadcastsByOutboundId | undefined
+>(undefined)
+
+const outboundIdFromMessage = (message: {
+  metadata?: { outbound_id?: unknown }
+}): string | undefined => {
+  const outboundId = message.metadata?.outbound_id
+  return typeof outboundId === 'string' ? outboundId : undefined
+}
+
+/**
+ * Resolve broadcasts for the messages currently in view.
+ *
+ * Built outside memoized Stream rows so a new resolver reference can publish
+ * current automation details without remounting the Stream message rows.
+ */
+export const buildBroadcastsByOutboundId = (
+  messages: readonly { metadata?: { outbound_id?: unknown } }[] | undefined,
+  resolveBroadcast: BroadcastResolver | undefined
+): BroadcastsByOutboundId | undefined => {
+  if (!resolveBroadcast || !messages?.length) {
+    return undefined
+  }
+
+  const seen = new Set<string>()
+  let broadcasts: Record<string, ResolvedBroadcast> | undefined
+
+  for (const message of messages) {
+    const outboundId = outboundIdFromMessage(message)
+    if (!outboundId || seen.has(outboundId)) {
+      continue
+    }
+    seen.add(outboundId)
+
+    const resolved = resolveBroadcast(outboundId)
+    if (!resolved) {
+      continue
+    }
+
+    broadcasts ??= {}
+    broadcasts[outboundId] = resolved
+  }
+
+  return broadcasts
+}
+
+const areBroadcastsEqual = (
+  previous: BroadcastsByOutboundId | undefined,
+  next: BroadcastsByOutboundId | undefined
+): boolean => {
+  if (previous === next) {
+    return true
+  }
+  if (!previous || !next) {
+    return false
+  }
+
+  const previousOutboundIds = Object.keys(previous)
+  const nextOutboundIds = Object.keys(next)
+  if (previousOutboundIds.length !== nextOutboundIds.length) {
+    return false
+  }
+
+  return previousOutboundIds.every(
+    (outboundId) =>
+      previous[outboundId].id === next[outboundId]?.id &&
+      previous[outboundId].name === next[outboundId]?.name
+  )
+}
+
+/**
+ * Re-invokes the resolver on every render, but only returns a new object when
+ * the resolved id/name pairs actually change — so context consumers update for
+ * late-arriving broadcasts without thrashing on unrelated renders.
+ */
+export const useBroadcastsByOutboundId = (
+  messages: readonly { metadata?: { outbound_id?: unknown } }[] | undefined,
+  resolveBroadcast: BroadcastResolver | undefined
+): BroadcastsByOutboundId | undefined => {
+  const broadcasts = buildBroadcastsByOutboundId(messages, resolveBroadcast)
+  const [publishedBroadcasts, setPublishedBroadcasts] = useState<
+    BroadcastsByOutboundId | undefined
+  >(broadcasts)
+
+  if (!areBroadcastsEqual(publishedBroadcasts, broadcasts)) {
+    setPublishedBroadcasts(broadcasts)
+    return broadcasts
+  }
+
+  return publishedBroadcasts
+}

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

@@ -23,13 +23,13 @@ import {
   storyUsers,
 } from '../../stories/decorators/storyUser'
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import type { BroadcastNameResolver } from '../../types'
+import type { BroadcastResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
 import {
-  BroadcastNameContext,
-  buildBroadcastNamesById,
-} from './BroadcastNameContext'
+  BroadcastContext,
+  buildBroadcastsByOutboundId,
+} from './BroadcastContext'
 import { CustomMessageActions } from './CustomMessageActions'
 
 import { CustomMessage } from './index'
@@ -112,7 +112,7 @@ const createMockChannel = async (
 interface TemplateProps {
   currentUser: StoryUser
   typingUser?: StoryUser
-  resolveBroadcastName?: BroadcastNameResolver
+  resolveBroadcast?: BroadcastResolver
   messages: Array<{
     id: string
     text: string
@@ -134,8 +134,7 @@ interface TemplateProps {
       attachment_thumbnail?: string
       attachment_detail?: string
       attachment_content_type?: 'text' | 'media'
-      broadcast_id?: string
-      broadcast_name?: string
+      outbound_id?: string
     }
   }>
 }
@@ -144,8 +143,8 @@ const TemplateInner: React.FC<{
   currentUser: StoryUser
   typingUser?: StoryUser
   messages: TemplateProps['messages']
-  resolveBroadcastName?: BroadcastNameResolver
-}> = ({ currentUser, typingUser, messages, resolveBroadcastName }) => {
+  resolveBroadcast?: BroadcastResolver
+}> = ({ currentUser, typingUser, messages, resolveBroadcast }) => {
   const [client] = React.useState(() => createMockStreamChatClient(currentUser))
 
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
@@ -171,9 +170,9 @@ const TemplateInner: React.FC<{
     return () => clearTimeout(timer)
   }, [channel, client, typingUser])
 
-  const broadcastNamesById = React.useMemo(
-    () => buildBroadcastNamesById(messages, resolveBroadcastName),
-    [messages, resolveBroadcastName]
+  const broadcastsByOutboundId = React.useMemo(
+    () => buildBroadcastsByOutboundId(messages, resolveBroadcast),
+    [messages, resolveBroadcast]
   )
 
   const MessageComponent = React.useMemo(() => {
@@ -187,7 +186,7 @@ const TemplateInner: React.FC<{
   }
 
   return (
-    <BroadcastNameContext.Provider value={broadcastNamesById}>
+    <BroadcastContext.Provider value={broadcastsByOutboundId}>
       <Chat client={client}>
         <div className="h-screen w-full bg-white">
           <Channel
@@ -201,7 +200,7 @@ const TemplateInner: React.FC<{
           </Channel>
         </div>
       </Chat>
-    </BroadcastNameContext.Provider>
+    </BroadcastContext.Provider>
   )
 }
 
@@ -209,14 +208,14 @@ const Template: StoryFn<TemplateProps> = ({
   currentUser = storyUsers.creator,
   typingUser,
   messages,
-  resolveBroadcastName,
+  resolveBroadcast,
 }) => (
   <TemplateInner
     key={currentUser.id}
     currentUser={currentUser}
     typingUser={typingUser}
     messages={messages}
-    resolveBroadcastName={resolveBroadcastName}
+    resolveBroadcast={resolveBroadcast}
   />
 )
 
@@ -303,11 +302,14 @@ BroadcastStatus.args = {
       user: storyUsers.creator,
       metadata: {
         custom_type: 'MESSAGE_OUTBOUND',
-        broadcast_id: 'broadcast-1',
-        broadcast_name: 'July 9th Class attendees',
+        outbound_id: 'outbound-1',
       },
     },
   ],
+  resolveBroadcast: () => ({
+    id: 'broadcast-1',
+    name: 'July 9th Class attendees',
+  }),
 }
 
 export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind(
@@ -321,8 +323,7 @@ BroadcastStatusNonLatest.args = {
       user: storyUsers.creator,
       metadata: {
         custom_type: 'MESSAGE_OUTBOUND',
-        broadcast_id: 'broadcast-1',
-        broadcast_name: 'July 9th Class attendees',
+        outbound_id: 'outbound-1',
       },
     },
     {
@@ -331,12 +332,19 @@ BroadcastStatusNonLatest.args = {
       user: storyUsers.creator,
     },
   ],
+  resolveBroadcast: () => ({
+    id: 'broadcast-1',
+    name: 'July 9th Class attendees',
+  }),
 }
 
 export const BroadcastStatusResolved: StoryFn<TemplateProps> = Template.bind({})
 BroadcastStatusResolved.args = {
   ...BroadcastStatus.args,
-  resolveBroadcastName: () => 'July 9th Class absentee',
+  resolveBroadcast: () => ({
+    id: 'broadcast-1',
+    name: 'July 9th Class absentee',
+  }),
 }
 
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})