@linktr.ee/messaging-react 3.12.2-rc-1784003424 → 3.12.2-rc-1784010232

package/dist/index.cjs

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

@@ -1713,16 +1713,6 @@ declare module 'stream-chat' {
          * Whether DM agent auto-replies are paused for this channel.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
-    }
-    interface CustomMemberData {
-        /**
-         * Whether this member follows the channel's linker account.
-         */
-        is_follower?: boolean;
     }
     interface CustomMessageData {
         /**

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 u, i as c, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-6laoGk92.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 u, i as c, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-KfZ2Wx3D.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -133,16 +133,6 @@ declare module 'stream-chat' {
          * Whether DM agent auto-replies are paused for this channel.
          */
         chatbot_paused?: boolean;
-        /**
-         * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-         */
-        customer_tag?: string;
-    }
-    interface CustomMemberData {
-        /**
-         * Whether this member follows the channel's linker account.
-         */
-        is_follower?: boolean;
     }
     interface CustomMessageData {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.12.2-rc-1784003424",
+  "version": "3.12.2-rc-1784010232",
   "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.3.0-rc-1784003424",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784010232",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelHeaderRedesign.tsx

@@ -7,7 +7,7 @@ import {
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React from 'react'
-import type { Channel as ChannelType } from 'stream-chat'
+import type { ChannelMemberResponse, Channel as ChannelType } from 'stream-chat'
 import { useChannelStateContext, useChatContext } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -30,6 +30,17 @@ const isCustomerPaidTag = (value: unknown) =>
     .replace(/[\s-]+/g, '_')
     .toUpperCase() === CUSTOMER_PAID_TAG
 
+const hasCustomerPaidTag = (participant?: ChannelMemberResponse) => {
+  const member = participant as
+    | {
+        customerTag?: unknown
+        customer_tag?: unknown
+      }
+    | undefined
+
+  return [member?.customerTag, member?.customer_tag].some(isCustomerPaidTag)
+}
+
 interface ChannelHeaderRedesignProps {
   className?: string
   onBack?: () => void
@@ -85,9 +96,7 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
   const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
   const isStarred = useChannelStar(channel)
-  const isPaidCustomer =
-    isCustomerPaidTag(channel.data?.customer_tag) &&
-    participant?.is_follower === true
+  const isPaidCustomer = hasCustomerPaidTag(participant)
 
   const handleStarClick = async () => {
     try {

package/src/components/ChannelView.stories.tsx

@@ -44,7 +44,7 @@ const createMockChannel = async (
   hasMessages = true,
   followerStatus?: string | boolean,
   isFrozen = false,
-  channelCustomerTag?: string,
+  participantCustomerTag?: string,
   hasScrollableMessages = false
 ) => {
   const participant = mockParticipants[0]
@@ -140,7 +140,6 @@ const createMockChannel = async (
   const channelData: Record<string, unknown> = {
     members: [mockUser.id, participant.id],
     frozen: isFrozen,
-    ...(channelCustomerTag ? { customer_tag: channelCustomerTag } : {}),
   }
 
   // Add follower status if provided
@@ -179,7 +178,7 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
-        ...(channelCustomerTag ? { is_follower: true } : {}),
+        customerTag: participantCustomerTag,
       },
     }
     return {
@@ -215,7 +214,7 @@ type TemplateProps = ComponentProps & {
     name?: string
     image?: string
   }
-  channelCustomerTag?: string
+  participantCustomerTag?: string
   hasScrollableMessages?: boolean
 }
 
@@ -224,7 +223,7 @@ const Template: StoryFn<TemplateProps> = (args) => {
     hasMessages = true,
     followerStatus,
     isFrozen = false,
-    channelCustomerTag,
+    participantCustomerTag,
     hasScrollableMessages,
     typingUser,
     ...channelViewProps
@@ -239,7 +238,7 @@ const Template: StoryFn<TemplateProps> = (args) => {
       hasMessages,
       followerStatus,
       isFrozen,
-      channelCustomerTag,
+      participantCustomerTag,
       hasScrollableMessages
     ).then((mockChannel) => {
       setChannel(mockChannel)
@@ -249,7 +248,7 @@ const Template: StoryFn<TemplateProps> = (args) => {
     hasMessages,
     followerStatus,
     isFrozen,
-    channelCustomerTag,
+    participantCustomerTag,
     hasScrollableMessages,
   ])
 
@@ -306,7 +305,7 @@ export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
 ParticipantIdentityTrigger.args = {
   showBackButton: false,
   showStarButton: true,
-  channelCustomerTag: 'CUSTOMER_PAID',
+  participantCustomerTag: 'CUSTOMER_PAID',
   hasScrollableMessages: true,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert

package/src/components/ChannelView.test.tsx

@@ -8,6 +8,7 @@ import { ChannelView } from './ChannelView'
 
 let activeChannel: unknown
 let activeChannelProps: Record<string, unknown> = {}
+let activeComponentOverrides: Record<string, unknown> = {}
 
 vi.mock('stream-chat-react', () => ({
   Channel: (props: {
@@ -25,9 +26,16 @@ vi.mock('stream-chat-react', () => ({
   MessageList: ({ head }: { head?: React.ReactElement }) => (
     <div data-testid="message-list">{head}</div>
   ),
-  WithComponents: ({ children }: { children: React.ReactNode }) => (
-    <>{children}</>
-  ),
+  WithComponents: ({
+    children,
+    overrides,
+  }: {
+    children: React.ReactNode
+    overrides?: Record<string, unknown>
+  }) => {
+    activeComponentOverrides = overrides ?? {}
+    return <>{children}</>
+  },
   useMessageContext: () => ({ message: { id: 'message-1', text: 'hello' } }),
   useChannelStateContext: () => ({ channel: activeChannel }),
   useChatContext: () => ({
@@ -103,14 +111,12 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
-  channelCustomerTag,
-  otherMemberIsFollower,
+  otherMemberCustomerTag,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
   messages?: Channel['state']['messages']
-  channelCustomerTag?: string
-  otherMemberIsFollower?: boolean
+  otherMemberCustomerTag?: string
   otherUser?: {
     id: string
     name?: string
@@ -121,9 +127,7 @@ const createChannel = ({
   ({
     id: 'channel-1',
     cid: 'messaging:channel-1',
-    data: {
-      customer_tag: channelCustomerTag,
-    },
+    data: {},
     _client: { userID: currentUserId },
     state: {
       members: {
@@ -141,10 +145,9 @@ const createChannel = ({
             id:
               otherUser.id ??
               (currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1'),
-            is_account:
-              otherUser.is_account ?? currentUserId === 'visitor-1',
+            is_account: otherUser.is_account ?? currentUserId === 'visitor-1',
           },
-          is_follower: otherMemberIsFollower,
+          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
@@ -163,6 +166,7 @@ describe('ChannelView', () => {
   beforeEach(() => {
     activeChannel = undefined
     activeChannelProps = {}
+    activeComponentOverrides = {}
     avatarRenderCalls.length = 0
     channelActionsMenuProps.length = 0
     messageInputProps.length = 0
@@ -171,8 +175,7 @@ describe('ChannelView', () => {
 
   const lastActionsMenuProps = () =>
     channelActionsMenuProps[channelActionsMenuProps.length - 1]
-  const lastInputProps = () =>
-    messageInputProps[messageInputProps.length - 1]
+  const lastInputProps = () => messageInputProps[messageInputProps.length - 1]
 
   it('keeps block and report visible by default in the actions menu', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
@@ -248,8 +251,7 @@ describe('ChannelView', () => {
     renderWithProviders(
       <ChannelView
         channel={createChannel({
-          channelCustomerTag: 'CUSTOMER_PAID',
-          otherMemberIsFollower: true,
+          otherMemberCustomerTag: 'CUSTOMER_PAID',
         })}
         onParticipantNameClick={vi.fn()}
         showStarButton={true}
@@ -260,20 +262,6 @@ describe('ChannelView', () => {
     expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
   })
 
-  it('hides the paid customer badge when the participant is not a follower', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          channelCustomerTag: 'CUSTOMER_PAID',
-          otherMemberIsFollower: false,
-        })}
-        onParticipantNameClick={vi.fn()}
-      />
-    )
-
-    expect(screen.queryByLabelText('Paid customer')).not.toBeInTheDocument()
-  })
-
   it('renders the redesigned header outside MessageList head when all messages are deleted', () => {
     renderWithProviders(
       <ChannelView
@@ -303,6 +291,17 @@ describe('ChannelView', () => {
     ).toBeGreaterThan(0)
   })
 
+  it('suppresses stream unread message UI overrides', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(activeComponentOverrides.UnreadMessagesSeparator).toBeTypeOf(
+      'function'
+    )
+    expect(activeComponentOverrides.UnreadMessagesNotification).toBeTypeOf(
+      'function'
+    )
+  })
+
   it('hides the actions menu (both desktop and mobile) when showChannelInfo is false', () => {
     renderWithProviders(
       <ChannelView channel={createChannel()} showChannelInfo={false} />
@@ -335,9 +334,7 @@ describe('ChannelView', () => {
   it('renders conversation footer between message list and message input', () => {
     const channel = createChannel()
     const renderConversationFooter = vi.fn((currentChannel: Channel) => (
-      <div data-testid="conversation-footer">
-        footer-{currentChannel.id}
-      </div>
+      <div data-testid="conversation-footer">footer-{currentChannel.id}</div>
     ))
 
     renderWithProviders(
@@ -385,9 +382,7 @@ describe('ChannelView', () => {
     mockIsStarred = true
     const channel = createChannel()
 
-    renderWithProviders(
-      <ChannelView channel={channel} showStarButton={true} />
-    )
+    renderWithProviders(<ChannelView channel={channel} showStarButton={true} />)
 
     expect(avatarRenderCalls.length).toBeGreaterThan(0)
     expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
@@ -409,16 +404,12 @@ describe('ChannelView', () => {
       currentUserRole: 'owner',
     })
 
-    renderWithProviders(
-      <ChannelView channel={channel} dmAgentEnabled={true} />
-    )
+    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
 
     expect(avatarRenderCalls.length).toBeGreaterThan(0)
     expect(
       avatarRenderCalls.every((call) => call.dmAgentEnabled === true)
-    ).toBe(
-      true
-    )
+    ).toBe(true)
   })
 
   it('renders dm agent helper text when dmAgentEnabled is true for visitor view', () => {
@@ -427,9 +418,7 @@ describe('ChannelView', () => {
       currentUserRole: 'owner',
     })
 
-    renderWithProviders(
-      <ChannelView channel={channel} dmAgentEnabled={true} />
-    )
+    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
 
     expect(
       screen.getAllByText('Replies instantly with AI assistant').length
@@ -442,9 +431,7 @@ describe('ChannelView', () => {
       currentUserRole: 'member',
     })
 
-    renderWithProviders(
-      <ChannelView channel={channel} dmAgentEnabled={true} />
-    )
+    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
 
     expect(
       screen.queryByText('Replies instantly with AI assistant')
@@ -497,7 +484,11 @@ describe('ChannelView', () => {
 
   it('renders stable classes for channel header back buttons when enabled', () => {
     renderWithProviders(
-      <ChannelView channel={createChannel()} showBackButton={true} onBack={vi.fn()} />
+      <ChannelView
+        channel={createChannel()}
+        showBackButton={true}
+        onBack={vi.fn()}
+      />
     )
 
     expect(
@@ -510,7 +501,11 @@ describe('ChannelView', () => {
 
   it('does not render channel header back button classes when disabled', () => {
     renderWithProviders(
-      <ChannelView channel={createChannel()} showBackButton={false} onBack={vi.fn()} />
+      <ChannelView
+        channel={createChannel()}
+        showBackButton={false}
+        onBack={vi.fn()}
+      />
     )
 
     expect(
@@ -566,9 +561,7 @@ describe('ChannelView', () => {
     const anchor = document.createElement('a')
     anchor.href = 'https://example.com/clicked'
     anchor.addEventListener('click', (e) => e.preventDefault())
-    container
-      .querySelector('.messaging-channel-view')
-      ?.appendChild(anchor)
+    container.querySelector('.messaging-channel-view')?.appendChild(anchor)
     anchor.click()
 
     expect(handler).toHaveBeenCalledOnce()
@@ -584,13 +577,11 @@ describe('ChannelView', () => {
       id: 'message-42',
       text: 'check this out https://example.com/clicked',
       metadata: { custom_type: 'MESSAGE_CHATBOT' },
-    } as unknown as ReturnType<
-      Channel['state']['formatMessage']
-    >
+    } as unknown as ReturnType<Channel['state']['formatMessage']>
     const channel = createChannel()
-    ;(
-      channel.state as unknown as { messages: typeof message[] }
-    ).messages = [message]
+    ;(channel.state as unknown as { messages: (typeof message)[] }).messages = [
+      message,
+    ]
 
     const { container } = renderWithProviders(
       <ChannelView channel={channel} onMessageLinkClick={handler} />
@@ -639,9 +630,7 @@ describe('ChannelView', () => {
     const anchor = document.createElement('a')
     anchor.href = 'https://example.com'
     anchor.addEventListener('click', (e) => e.preventDefault())
-    container
-      .querySelector('.messaging-channel-view')
-      ?.appendChild(anchor)
+    container.querySelector('.messaging-channel-view')?.appendChild(anchor)
     expect(() => anchor.click()).not.toThrow()
   })
 })

package/src/components/ChannelView.tsx

@@ -523,6 +523,7 @@ const ChannelViewInner: React.FC<{
         overrides={{
           Message: MessageOverride,
           MessageActions: CustomMessageActions,
+          UnreadMessagesNotification: () => null,
           UnreadMessagesSeparator: () => null,
         }}
       >

package/src/stream-custom-data.ts

@@ -97,17 +97,6 @@ declare module 'stream-chat' {
      * Whether DM agent auto-replies are paused for this channel.
      */
     chatbot_paused?: boolean
-    /**
-     * Customer classification tag for this conversation (e.g. CUSTOMER_PAID).
-     */
-    customer_tag?: string
-  }
-
-  interface CustomMemberData {
-    /**
-     * Whether this member follows the channel's linker account.
-     */
-    is_follower?: boolean
   }
 
   interface CustomMessageData {