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

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')
@@ -423,7 +426,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus />
+        <SentMessageDeliveryStatus onBroadcastClick={onBroadcastClick} />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -443,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/MessagingShell/index.tsx

@@ -38,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customChannelActions,
   renderChannelActions,
   onParticipantNameClick,
+  onBroadcastClick,
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
@@ -263,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/index.ts

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

package/src/stream-custom-data.ts

@@ -54,6 +54,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,18 @@
   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;
+}
+
 .str-chat__li .str-chat__message-inner {
   grid-column-gap: 4px;
 }
@@ -581,11 +593,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 +609,36 @@
   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 {
+  --sent-message-broadcast-badge-color: var(
+    --str-chat__message-broadcast-badge-color,
+    #ed007c
+  );
+  --sent-message-broadcast-name-color: var(
+    --str-chat__message-broadcast-name-color,
+    rgba(4, 4, 3, 0.898)
+  );
+  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 +651,44 @@
 .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-row
+  .sent-message-broadcast-badge {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+  border-radius: 50%;
+  background: var(--sent-message-broadcast-badge-color);
+  color: #fff;
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-badge svg {
+  width: 10px;
+  height: 10px;
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-badge svg path {
+  fill: currentColor;
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-name {
+  color: var(--sent-message-broadcast-name-color);
+}
+.str-chat__li .str-chat__message--me .sent-message-status-row
+  .sent-message-broadcast-link
+  .sent-message-broadcast-name {
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+}
 .str-chat__li .str-chat__message--me .sent-message-status--failed {
   color: var(--str-chat__message-error-color, #d92d20);
 }

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'
 >