@linktr.ee/messaging-react 3.12.3-rc-1784034329 → 3.12.3-rc-1784036626

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-C1eZGd_f.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-BB78YkWG.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,6 +1713,16 @@ 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, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, y, z as B, B as S, D as q, E as z, G as D, H as E, I as V } from "./index-BvuCjzqJ.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, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, y, z as B, B as S, D as q, E as z, G as D, H as E, I as V } from "./index-5kR8BcYv.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -133,6 +133,16 @@ 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.3-rc-1784034329",
+  "version": "3.12.3-rc-1784036626",
   "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-1784034329",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784036626",
     "@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 { ChannelMemberResponse, Channel as ChannelType } from 'stream-chat'
+import type { Channel as ChannelType } from 'stream-chat'
 import { useChannelStateContext, useChatContext } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -30,17 +30,6 @@ 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
@@ -96,7 +85,9 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
   const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
   const isStarred = useChannelStar(channel)
-  const isPaidCustomer = hasCustomerPaidTag(participant)
+  const isPaidCustomer =
+    isCustomerPaidTag(channel.data?.customer_tag) &&
+    participant?.is_follower === true
 
   const handleStarClick = async () => {
     try {

package/src/components/ChannelView.stories.tsx

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

package/src/components/ChannelView.test.tsx

@@ -103,12 +103,14 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
-  otherMemberCustomerTag,
+  channelCustomerTag,
+  otherMemberIsFollower,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
   messages?: Channel['state']['messages']
-  otherMemberCustomerTag?: string
+  channelCustomerTag?: string
+  otherMemberIsFollower?: boolean
   otherUser?: {
     id: string
     name?: string
@@ -119,7 +121,9 @@ const createChannel = ({
   ({
     id: 'channel-1',
     cid: 'messaging:channel-1',
-    data: {},
+    data: {
+      customer_tag: channelCustomerTag,
+    },
     _client: { userID: currentUserId },
     state: {
       members: {
@@ -139,7 +143,7 @@ const createChannel = ({
               (currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1'),
             is_account: otherUser.is_account ?? currentUserId === 'visitor-1',
           },
-          customerTag: otherMemberCustomerTag,
+          is_follower: otherMemberIsFollower,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
@@ -242,7 +246,8 @@ describe('ChannelView', () => {
     renderWithProviders(
       <ChannelView
         channel={createChannel({
-          otherMemberCustomerTag: 'CUSTOMER_PAID',
+          channelCustomerTag: 'CUSTOMER_PAID',
+          otherMemberIsFollower: true,
         })}
         onParticipantNameClick={vi.fn()}
         showStarButton={true}
@@ -253,6 +258,20 @@ 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

package/src/stream-custom-data.ts

@@ -97,6 +97,17 @@ 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/src/utils/cdnImageUrl.test.ts

@@ -34,4 +34,24 @@ describe('optimizeMessagingAttachmentUrl', () => {
       'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
     )
   })
+
+  it('replaces a different optimized size preset on Linktree hosts', () => {
+    expect(
+      optimizeMessagingAttachmentUrl(
+        'https://ugc.production.linktr.ee/photo.jpg?io=true&size=avatar-v1_0'
+      )
+    ).toBe(
+      'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
+  it('preserves unrelated query params when replacing an existing size preset', () => {
+    expect(
+      optimizeMessagingAttachmentUrl(
+        'https://ugc.production.linktr.ee/photo.jpg?token=abc&size=preview-v2_0&io=true'
+      )
+    ).toBe(
+      'https://ugc.production.linktr.ee/photo.jpg?token=abc&size=messaging-attachment-v1_0&io=true'
+    )
+  })
 })

package/src/utils/cdnImageUrl.ts

@@ -25,10 +25,17 @@ export function optimizeMessagingAttachmentUrl(
   const hostname = hostnameFromUrl(trimmed)
   if (!hostname || !isLinktreeCdnHost(hostname)) return trimmed
 
-  if (/[?&]io=true(?:&|$)/.test(trimmed) && /[?&]size=/.test(trimmed)) {
+  const parsedUrl = new URL(trimmed)
+  const isAlreadyMessagingOptimized =
+    parsedUrl.searchParams.get('io') === 'true' &&
+    parsedUrl.searchParams.get('size') === ATTACHMENT_IMAGE_SIZE_PRESET
+
+  if (isAlreadyMessagingOptimized) {
     return trimmed
   }
 
-  const separator = trimmed.includes('?') ? '&' : '?'
-  return `${trimmed}${separator}io=true&size=${ATTACHMENT_IMAGE_SIZE_PRESET}`
+  parsedUrl.searchParams.set('io', 'true')
+  parsedUrl.searchParams.set('size', ATTACHMENT_IMAGE_SIZE_PRESET)
+
+  return parsedUrl.toString()
 }