@linktr.ee/messaging-react 3.20.0 → 3.22.0-rc-1785413501

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DSZ8Rxnl.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-BnBvT5FW.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

@@ -82,6 +82,11 @@ export declare interface AvatarProps {
     dmAgentEnabled?: boolean;
 }
 
+export declare type BroadcastClickHandler = (broadcast: {
+    id: string;
+    name?: string;
+}) => void;
+
 /**
  * Build the meta line shown under the title in compact document / file
  * attachments — `EXT · SIZE` (`PDF · 379.5 KB`). Either part is dropped
@@ -205,7 +210,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' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -391,6 +396,11 @@ export declare interface ChannelViewProps {
      * onMessageLinkClick={(url) => trackChannelLinkClicked(url)}
      */
     onMessageLinkClick?: MessageLinkClickHandler;
+    /**
+     * Fired when a broadcast label is clicked on an outgoing broadcast message.
+     * Hosts own navigation so this shared package never assumes an admin URL.
+     */
+    onBroadcastClick?: BroadcastClickHandler;
     /**
      * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
      * the send control: `Channel` merges this into `ComponentContext` and an
@@ -1373,6 +1383,8 @@ 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;
 }
 
 export declare const MessageVoteButtons: default_2.FC<MessageVoteButtonsProps>;

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-BuqmY6ae.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-DIKyFjPC.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -55,6 +55,8 @@ 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;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.20.0",
+  "version": "3.22.0-rc-1785413501",
   "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-1785413501",
     "@linktr.ee/messaging-taxonomy": "^0.3.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/ChannelView.tsx

@@ -56,6 +56,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
+  onBroadcastClick?: ChannelViewProps['onBroadcastClick']
   composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
@@ -82,6 +83,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
+  onBroadcastClick,
   composerInput,
 }) => {
   const { channel } = useChannelStateContext()
@@ -125,6 +127,7 @@ const ChannelViewInner: React.FC<{
           {...props}
           chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
+          onBroadcastClick={onBroadcastClick}
         />
       )
 
@@ -134,7 +137,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, renderMessage, viewerLanguage]
+    [chatbotVotingEnabled, onBroadcastClick, renderMessage, viewerLanguage]
   )
 
   return (
@@ -292,6 +295,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
+    onBroadcastClick,
     composerInput,
   }) => {
     // Custom send message handler that:
@@ -405,6 +409,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
+              onBroadcastClick={onBroadcastClick}
               composerInput={composerInput}
             />
           </Channel>

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

@@ -120,6 +120,7 @@ interface TemplateProps {
         | 'MESSAGE_PAID'
         | 'MESSAGE_CHATBOT'
         | 'MESSAGE_ATTACHMENT'
+        | 'MESSAGE_OUTBOUND'
       payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
       amount_text?: string
       attachment_title?: string
@@ -127,6 +128,8 @@ interface TemplateProps {
       attachment_thumbnail?: string
       attachment_detail?: string
       attachment_content_type?: 'text' | 'media'
+      broadcast_id?: string
+      broadcast_name?: string
     }
   }>
 }
@@ -163,7 +166,12 @@ const TemplateInner: React.FC<{
 
   const MessageComponent = React.useMemo(() => {
     return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return <CustomMessage {...props} />
+      return (
+        <CustomMessage
+          {...props}
+          onBroadcastClick={() => undefined}
+        />
+      )
     }
   }, [])
 
@@ -257,6 +265,43 @@ DeliveredStatus.args = {
   ],
 }
 
+export const BroadcastStatus: StoryFn<TemplateProps> = Template.bind({})
+BroadcastStatus.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'July class details',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_OUTBOUND',
+        broadcast_id: 'broadcast-1',
+        broadcast_name: 'July 9th Class attendees',
+      },
+    },
+  ],
+}
+
+export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind({})
+BroadcastStatusNonLatest.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'July class details',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_OUTBOUND',
+        broadcast_id: 'broadcast-1',
+        broadcast_name: 'July 9th Class attendees',
+      },
+    },
+    {
+      id: 'msg-2',
+      text: 'Let me know if you have any questions.',
+      user: storyUsers.creator,
+    },
+  ],
+}
+
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
 WithTipTag.args = {
   messages: [

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

@@ -0,0 +1,141 @@
+import React from 'react'
+import { useChannelStateContext, useMessageContext } from 'stream-chat-react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { CustomMessage } from './index'
+
+vi.mock('stream-chat-react', () => ({
+  Attachment: () => null,
+  EditMessageModal: () => null,
+  MessageBounceModal: () => null,
+  MessageBouncePrompt: () => null,
+  MessageBlocked: () => null,
+  MessageDeleted: () => null,
+  MessageErrorIcon: () => null,
+  MessageIsThreadReplyInChannelButtonIndicator: () => null,
+  MessageRepliesCountButton: () => null,
+  MessageStatus: ({
+    MessageSentStatus,
+  }: {
+    MessageSentStatus: React.ComponentType
+  }) => <MessageSentStatus />,
+  MessageText: () => <span>Message</span>,
+  Poll: () => null,
+  ReminderNotification: () => null,
+  StreamedMessageText: () => null,
+  areMessageUIPropsEqual: () => true,
+  isDateSeparatorMessage: () => false,
+  isMessageBlocked: () => false,
+  isMessageBounced: () => false,
+  messageHasAttachments: () => false,
+  messageHasReactions: () => false,
+  useChannelStateContext: vi.fn(),
+  useChatContext: () => ({ client: { polls: { fromState: vi.fn() } } }),
+  useComponentContext: () => ({
+    Attachment: () => null,
+    MessageRepliesCountButton: () => null,
+  }),
+  useMessageContext: vi.fn(),
+  useMessageReminder: () => undefined,
+}))
+
+vi.mock('../../hooks/useMessageVote', () => ({
+  useMessageVote: () => ({
+    selected: undefined,
+    voteUp: vi.fn(),
+    voteDown: vi.fn(),
+  }),
+}))
+
+vi.mock('./context', () => ({
+  useCustomMessage: () => ({
+    isUnlocking: () => false,
+  }),
+}))
+
+vi.mock('../Avatar', () => ({
+  Avatar: () => null,
+}))
+
+vi.mock('./MessageTag', () => ({
+  MessageTag: () => null,
+  isAttachmentMessage: () => false,
+  isChatbotMessage: () => false,
+  isMediaAttachmentMessage: () => false,
+  isTextAttachmentMessage: () => false,
+  isTipOnlyMessage: () => false,
+}))
+
+vi.mock('./MessageVoteButtons', () => ({
+  MessageVoteButtons: () => null,
+}))
+
+vi.mock('./LockedAttachment', () => ({
+  default: () => null,
+}))
+
+vi.mock('./StreamAttachmentMessage', () => ({
+  default: () => null,
+  buildOrderedAttachmentSegments: () => [],
+}))
+
+vi.mock('../MediaMessage', () => ({
+  isLinkAttachment: () => false,
+}))
+
+const mockedUseChannelStateContext = vi.mocked(useChannelStateContext)
+const mockedUseMessageContext = vi.mocked(useMessageContext)
+
+describe('CustomMessage', () => {
+  beforeEach(() => {
+    mockedUseChannelStateContext.mockReturnValue({
+      messages: [{ id: 'message-1', user: { id: 'me' } }],
+    } as never)
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'message-1',
+        text: 'Hello',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          broadcast_id: 'broadcast-1',
+          broadcast_name: 'July 9th Class attendees',
+        },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+  })
+
+  it('uses the latest broadcast click handler after rerendering', () => {
+    const firstHandler = vi.fn()
+    const secondHandler = vi.fn()
+    const { rerender } = renderWithProviders(
+      <CustomMessage onBroadcastClick={firstHandler} />
+    )
+
+    rerender(<CustomMessage onBroadcastClick={secondHandler} />)
+    screen.getByRole('button', {
+      name: 'View broadcast July 9th Class attendees',
+    }).click()
+
+    expect(firstHandler).not.toHaveBeenCalled()
+    expect(secondHandler).toHaveBeenCalledWith({
+      id: 'broadcast-1',
+      name: 'July 9th Class attendees',
+    })
+  })
+})

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

@@ -1,8 +1,5 @@
 import React from 'react'
-import {
-  useChannelStateContext,
-  useMessageContext,
-} from 'stream-chat-react'
+import { useChannelStateContext, useMessageContext } from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen, within } from '../../test/utils'
@@ -69,6 +66,7 @@ describe('SentMessageDeliveryStatus', () => {
     // avatars.
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
+      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -83,6 +81,7 @@ describe('SentMessageDeliveryStatus', () => {
   it('renders nothing for an earlier own message once a later message exists', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1' },
+      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -104,6 +103,7 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
+      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -124,6 +124,7 @@ describe('SentMessageDeliveryStatus', () => {
     } as never)
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },
+      isMyMessage: () => true,
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -138,6 +139,7 @@ describe('SentMessageDeliveryStatus', () => {
   it('renders "Sending" in the sending slot for the latest message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2', status: 'sending' },
+      isMyMessage: () => true,
       threadList: false,
     } as never)
 
@@ -149,6 +151,7 @@ describe('SentMessageDeliveryStatus', () => {
   it('does not render "Sending" for an earlier message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1', status: 'sending' },
+      isMyMessage: () => true,
       threadList: false,
     } as never)
 
@@ -162,6 +165,7 @@ describe('SentMessageDeliveryStatus', () => {
     // threadList is true; we suppress the stamp ourselves.
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2', status: 'sending' },
+      isMyMessage: () => true,
       threadList: true,
     } as never)
 
@@ -173,6 +177,120 @@ describe('SentMessageDeliveryStatus', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('renders a broadcast label for every own broadcast message, including non-latest messages', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'own-1',
+        metadata: {
+          broadcast_id: 'broadcast-1',
+          broadcast_name: 'July 9th Class attendees',
+        },
+      },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('July 9th Class attendees')
+    expect(
+      screen.queryByTestId('sent-message-delivery-status')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('•')).not.toBeInTheDocument()
+  })
+
+  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' } },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(
+      <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
+    )
+
+    expect(
+      screen.getByTestId('sent-message-broadcast-status')
+    ).toHaveTextContent('Broadcast')
+    expect(
+      screen.getByRole('button', { name: 'View broadcast Broadcast' })
+    ).toBeInTheDocument()
+    const button = screen.getByRole('button', {
+      name: 'View broadcast Broadcast',
+    })
+    expect(
+      button.querySelector('.sent-message-broadcast-badge')
+    ).toBeInTheDocument()
+    expect(
+      button.querySelector('.sent-message-broadcast-name')
+    ).toHaveTextContent('Broadcast')
+    expect(button).not.toHaveTextContent('•')
+    expect(screen.getAllByText('•')).toHaveLength(1)
+    button.click()
+    expect(onBroadcastClick).toHaveBeenCalledWith({ id: 'broadcast-1' })
+  })
+
+  it('keeps the latest separator outside the button and underlines only the name', () => {
+    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} />
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'View broadcast July 9th Class attendees',
+    })
+    const name = within(button).getByTestId('sent-message-broadcast-status')
+
+    expect(screen.getAllByText('•')).toHaveLength(1)
+    expect(button).not.toHaveTextContent('•')
+    expect(name).toHaveClass('sent-message-broadcast-name')
+    expect(button.querySelector('.sent-message-broadcast-badge')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    )
+    expect(screen.getAllByTestId('sent-message-delivery-status')).toHaveLength(
+      3
+    )
+  })
+
+  it('does not render a broadcast label for a visitor viewing a broadcast message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'broadcast-1',
+        metadata: {
+          broadcast_id: 'broadcast-1',
+          broadcast_name: 'July 9th Class attendees',
+        },
+      },
+      isMyMessage: () => false,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(
+      <SentMessageDeliveryStatus onBroadcastClick={vi.fn()} />
+    )
+
+    expect(
+      screen.queryByTestId('sent-message-broadcast-status')
+    ).not.toBeInTheDocument()
+  })
+
   it('renders "Failed to send" for every own failed message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1', status: 'failed', type: 'regular' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,6 +1,7 @@
 import {
   ChecksIcon,
   CircleNotchIcon,
+  MegaphoneIcon,
   WarningCircleIcon,
 } from '@phosphor-icons/react'
 import {
@@ -93,6 +94,49 @@ const SendingStatus = () => {
   )
 }
 
+const BroadcastStatus = ({
+  broadcastId,
+  broadcastName,
+  onBroadcastClick,
+}: {
+  broadcastId: string
+  broadcastName?: string
+  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+}) => {
+  const name = broadcastName || 'Broadcast'
+  const content = (
+    <>
+      <span className="sent-message-broadcast-badge" aria-hidden="true">
+        <MegaphoneIcon weight="fill" />
+      </span>
+      <span
+        className="sent-message-broadcast-name"
+        data-testid="sent-message-broadcast-status"
+      >
+        {name}
+      </span>
+    </>
+  )
+
+  return onBroadcastClick ? (
+    <button
+      type="button"
+      className="sent-message-broadcast-link"
+      aria-label={`View broadcast ${name}`}
+      onClick={() =>
+        onBroadcastClick({
+          id: broadcastId,
+          ...(broadcastName ? { name: broadcastName } : {}),
+        })
+      }
+    >
+      {content}
+    </button>
+  ) : (
+    content
+  )
+}
+
 const FailedStatus = () => (
   <span className="str-chat__message-status sent-message-status--failed">
     <WarningCircleIcon weight="bold" aria-hidden="true" />
@@ -114,10 +158,16 @@ const FailedStatus = () => (
  * because it has no failed slot and are shown on every own, non-thread
  * failed message.
  */
-export const SentMessageDeliveryStatus = () => {
+export const SentMessageDeliveryStatus = ({
+  onBroadcastClick,
+}: {
+  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+}) => {
   const { isMyMessage, message, threadList } = useMessageContext(
     'SentMessageDeliveryStatus'
   )
+  const isOwnMessage = isMyMessage()
+  const isLatestRealMessage = useIsLatestRealMessage()
 
   // Stream's MessageStatus still mounts MessageSendingStatus when
   // threadList is true; keep all of our stamps out of thread replies.
@@ -125,15 +175,28 @@ export const SentMessageDeliveryStatus = () => {
     return null
   }
 
-  if (
-    message.status === 'failed' &&
-    isMyMessage() &&
-    message.type !== 'error'
-  ) {
+  if (message.status === 'failed' && isOwnMessage && message.type !== 'error') {
     return <FailedStatus />
   }
 
-  return (
+  if (!isOwnMessage) {
+    return null
+  }
+
+  const broadcastId = message.metadata?.broadcast_id
+  const broadcastName = message.metadata?.broadcast_name
+  const broadcastStatus =
+    message.status !== 'sending' &&
+    message.status !== 'failed' &&
+    broadcastId ? (
+      <BroadcastStatus
+        broadcastId={broadcastId}
+        broadcastName={broadcastName}
+        onBroadcastClick={onBroadcastClick}
+      />
+    ) : null
+
+  const messageStatus = (
     <MessageStatus
       MessageSentStatus={DeliveredStatus}
       MessageDeliveredStatus={DeliveredStatus}
@@ -141,4 +204,23 @@ export const SentMessageDeliveryStatus = () => {
       MessageSendingStatus={SendingStatus}
     />
   )
+
+  if (!broadcastStatus) {
+    return messageStatus
+  }
+
+  return (
+    <span className="sent-message-status-row">
+      {messageStatus}
+      {isLatestRealMessage && (
+        <span
+          className="sent-message-broadcast-separator"
+          aria-hidden="true"
+        >
+          •
+        </span>
+      )}
+      {broadcastStatus}
+    </span>
+  )
 }