@linktr.ee/messaging-react 3.18.0 → 3.19.0-rc-1785389440

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,74 @@ 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()
+    screen.getByRole('button', { name: 'View broadcast Broadcast' }).click()
+    expect(onBroadcastClick).toHaveBeenCalledWith({ id: 'broadcast-1' })
+  })
+
+  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,44 @@ const SendingStatus = () => {
   )
 }
 
+const BroadcastStatus = ({
+  broadcastId,
+  broadcastName,
+  onBroadcastClick,
+}: {
+  broadcastId: string
+  broadcastName?: string
+  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
+}) => {
+  const name = broadcastName || 'Broadcast'
+  const isLatestRealMessage = useIsLatestRealMessage()
+  const content = (
+    <>
+      {isLatestRealMessage && <span aria-hidden="true">•</span>}
+      <MegaphoneIcon weight="bold" aria-hidden="true" />
+      <span 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 +153,15 @@ 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()
 
   // Stream's MessageStatus still mounts MessageSendingStatus when
   // threadList is true; keep all of our stamps out of thread replies.
@@ -125,15 +169,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 +198,15 @@ export const SentMessageDeliveryStatus = () => {
       MessageSendingStatus={SendingStatus}
     />
   )
+
+  if (!broadcastStatus) {
+    return messageStatus
+  }
+
+  return (
+    <span className="sent-message-status-row">
+      {messageStatus}
+      {broadcastStatus}
+    </span>
+  )
 }

package/src/components/CustomMessage/index.tsx

@@ -54,11 +54,13 @@ import StreamAttachmentMessage, {
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
+  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
   viewerLanguage?: string
+  onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -79,6 +81,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     renderText,
     threadList,
     viewerLanguage,
+    onBroadcastClick,
   } = props
 
   const { client } = useChatContext('CustomMessage')
@@ -278,7 +281,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             dmAgentEnabled={isChatbot}
           />
         )}
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           className={classNames('str-chat__message-inner', {
             'str-chat__simple-message--error-failed': allowRetry || isBounced,
@@ -424,7 +426,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus />
+        <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -444,6 +446,7 @@ const MemoizedCustomMessage = React.memo(
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
     if (prev.viewerLanguage !== next.viewerLanguage) return false
+    if (prev.onBroadcastClick !== next.onBroadcastClick) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext

package/src/components/LinkAttachment/components/_shared/useChinPalette.ts

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import React from 'react'
 
 import type { LinkAttachmentLayout, LinkAttachmentStatus } from '../../types'

package/src/components/MessageAttachment/Audio/AudioAttachment.stories.tsx

@@ -39,7 +39,6 @@ const meta: Meta = {
 export default meta
 
 const handleDismiss = () => {
-  // eslint-disable-next-line no-console
   console.log('Dismissed audio attachment')
 }
 

package/src/components/MessageAttachment/File/FileAttachment.stories.tsx

@@ -49,7 +49,6 @@ const meta: Meta = {
 export default meta
 
 const handleDismiss = () => {
-  // eslint-disable-next-line no-console
   console.log('Dismissed file attachment')
 }
 

package/src/components/MessageAttachment/Image/ImageAttachment.stories.tsx

@@ -74,7 +74,6 @@ const meta: Meta = {
 export default meta
 
 const handleDismiss = () => {
-  // eslint-disable-next-line no-console
   console.log('Dismissed image attachment')
 }
 

package/src/components/MessageAttachment/Pdf/PdfAttachment.stories.tsx

@@ -27,7 +27,6 @@ const meta: Meta = {
 export default meta
 
 const handleDismiss = () => {
-  // eslint-disable-next-line no-console
   console.log('Dismissed PDF attachment')
 }
 

package/src/components/MessageAttachment/Video/VideoAttachment.stories.tsx

@@ -46,7 +46,6 @@ const meta: Meta = {
 export default meta
 
 const handleDismiss = () => {
-  // eslint-disable-next-line no-console
   console.log('Dismissed video attachment')
 }
 

package/src/components/MessageAttachment/_shared/VideoViewer.tsx

@@ -74,7 +74,6 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
           for chat attachments, and an empty `<track kind="captions" />`
           emits a runtime warning. Re-add a real track (with `src`,
           `srcLang`, and `default`) once caption support ships. */}
-      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video
         // Forcing a key swap on item change ensures the new source
         // mounts a fresh element instead of reusing the previous

package/src/components/MessageAttachment/_shared/useCarousel.ts

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import { useCallback, useEffect, useState } from 'react'
 
 const clamp = (value: number, min: number, max: number) =>

package/src/components/MessagingShell/index.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/refs -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import type { Channel } from 'stream-chat'
 
@@ -35,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customChannelActions,
   renderChannelActions,
   onParticipantNameClick,
+  onBroadcastClick,
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
@@ -260,6 +264,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           customChannelActions={customChannelActions}
           renderChannelActions={renderChannelActions}
           onParticipantNameClick={onParticipantNameClick}
+          onBroadcastClick={onBroadcastClick}
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}

package/src/hooks/useChannelModerationActions.ts

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import { useEffect, useState } from 'react'
 import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
 

package/src/hooks/useChannelStar.ts

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import { useEffect, useState } from 'react'
 import { Channel, Event } from 'stream-chat'
 

package/src/index.ts

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

package/src/providers/MessagingProvider.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/refs, react-hooks/set-state-in-effect -- pre-existing pattern flagged by the React
+   Compiler rules added in eslint-plugin-react-hooks v7; refactoring it is
+   out of scope for the lint toolchain upgrade. */
 import { StreamChatService } from '@linktr.ee/messaging-core'
 import React, {
   createContext,

package/src/stream-custom-data.ts

@@ -27,6 +27,7 @@ export type MessageCustomType =
   | 'MESSAGE_TIP'
   | 'MESSAGE_PAID'
   | 'MESSAGE_CHATBOT'
+  | 'MESSAGE_OUTBOUND'
   | 'MESSAGE_ATTACHMENT'
   | AgeSafetySystemType
   | EscalationSystemType
@@ -57,6 +58,8 @@ export interface MessageMetadata {
    * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
    */
   sent_from?: 'stack_detail'
+  broadcast_id?: string
+  broadcast_name?: string
 }
 
 /**

package/src/styles.css

@@ -480,6 +480,19 @@
   position: relative;
 }
 
+.sent-message-broadcast-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .str-chat__li .str-chat__message-inner {
   grid-column-gap: 4px;
 }
@@ -581,11 +594,12 @@
 }
 
 /* Message delivery status under sent messages (MES-1036/MES-1296).
-   `SentMessageDeliveryStatus` renders it through stream's `MessageStatus`,
-   whose `.str-chat__message-status` span is the grid item here (right-aligned
-   via the outer grid's `justify-items: end`). Stream emits that span for every
-   own message and leaves it empty when no state is active (i.e. not the last
-   sent message), so `:empty` collapses those away. */
+   `SentMessageDeliveryStatus` renders stream's `.str-chat__message-status`
+   directly when there is no broadcast label. When a broadcast label is
+   present, `.sent-message-status-row` is the grid item and contains the
+   stream status span. Both cases are right-aligned via the outer grid's
+   `justify-items: end`; stream's empty status span collapses when no state is
+   active (i.e. not the last sent message). */
 .str-chat__li .str-chat__message--me .str-chat__message-status {
   grid-area: delivery-status;
   justify-content: flex-end;
@@ -596,6 +610,28 @@
   line-height: 1.4;
   color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
 }
+.str-chat__li .str-chat__message--me .sent-message-status-row {
+  display: inline-flex;
+  grid-area: delivery-status;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding-block-start: 4px;
+  padding-inline-end: 16px;
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .str-chat__message-status {
+  grid-area: auto;
+  justify-content: inherit;
+  gap: inherit;
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+}
 .str-chat__li .str-chat__message-status:empty {
   display: none;
 }
@@ -608,6 +644,13 @@
 .str-chat__li .str-chat__message--me .str-chat__message-status svg path {
   fill: currentColor;
 }
+.str-chat__li .str-chat__message--me .sent-message-status-row svg {
+  width: 14px;
+  height: 14px;
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row svg path {
+  fill: currentColor;
+}
 .str-chat__li .str-chat__message--me .sent-message-status--failed {
   color: var(--str-chat__message-error-color, #d92d20);
 }

package/src/testing/createMockMessagingClient.ts

@@ -145,7 +145,6 @@ export function createMockMessagingClient({
   })
   // Read/unread bookkeeping consults channel mute status; without a live
   // connection the real method throws, so report "not muted".
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   channel.muteStatus = (() => ({
     muted: false,
     createdAt: null,

package/src/types.ts

@@ -36,6 +36,11 @@ export type MessageLinkClickHandler = (
   message: LocalMessage | undefined
 ) => void
 
+export type BroadcastClickHandler = (broadcast: {
+  id: string
+  name?: string
+}) => void
+
 export type ChannelPreviewProps = ChannelPreviewUIComponentProps & {
   selectedChannel?: Channel | null
   onChannelSelect: (channel: Channel) => void
@@ -362,6 +367,12 @@ export interface ChannelViewProps {
    */
   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
@@ -430,6 +441,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onParticipantNameClick'
   | 'renderMessage'
   | 'onMessageLinkClick'
+  | 'onBroadcastClick'
   | 'showChannelInfo'
   | 'composerInput'
 >