@linktr.ee/messaging-react 3.12.2-rc-1784020746 → 3.12.3-rc-1784032997

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BMr8tbg4.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-B8niA4Dg.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-ZjkTaCN6.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-D9_M5IWl.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-1784020746",
+  "version": "3.12.3-rc-1784032997",
   "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-1784020746",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784032997",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/Thumbnail.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
+
 import MediaPlayer, { type MediaPlayerProps } from './MediaPlayer'
 import { renderTypeIcon } from './utils/icons'
 import { getSourceType } from './utils/mimeType'
@@ -48,13 +50,15 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
 }) => {
   const sourceType = getSourceType(mimeType)
   const [sourceReady, setSourceReady] = useState(false)
+  const optimizedSourceUrl = optimizeMessagingAttachmentUrl(sourceUrl)
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)
 
   if (sourceUrl && (sourceType === 'video' || sourceType === 'audio')) {
     return (
       <MediaPlayer
         source={sourceUrl}
         mimeType={mimeType}
-        poster={thumbnailUrl}
+        poster={optimizedThumbnailUrl}
         controls
         {...mediaPlayerProps}
       />
@@ -66,7 +70,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
       return (
         <div className="relative aspect-video overflow-hidden bg-black/5">
           <img
-            src={sourceUrl}
+            src={optimizedSourceUrl ?? sourceUrl}
             alt={title ?? ''}
             className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
             draggable={false}
@@ -77,7 +81,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
     }
     return (
       <img
-        src={sourceUrl}
+        src={optimizedSourceUrl ?? sourceUrl}
         alt={title ?? ''}
         className="block w-full"
         draggable={false}
@@ -91,7 +95,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
         return (
           <div className="relative aspect-video overflow-hidden bg-black/5">
             <img
-              src={thumbnailUrl}
+              src={optimizedThumbnailUrl ?? thumbnailUrl}
               alt={title ?? ''}
               className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
               draggable={false}
@@ -102,7 +106,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
       }
       return (
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt=""
           className="block w-full"
           draggable={false}
@@ -126,7 +130,7 @@ const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
     return (
       <div className={`relative ${posterShellClass(variant)}`}>
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt={title ?? ''}
           draggable={false}
           className="absolute inset-0 h-full w-full object-cover"

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

@@ -111,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
@@ -129,9 +127,7 @@ const createChannel = ({
   ({
     id: 'channel-1',
     cid: 'messaging:channel-1',
-    data: {
-      customer_tag: channelCustomerTag,
-    },
+    data: {},
     _client: { userID: currentUserId },
     state: {
       members: {
@@ -151,7 +147,7 @@ const createChannel = ({
               (currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1'),
             is_account: otherUser.is_account ?? currentUserId === 'visitor-1',
           },
-          is_follower: otherMemberIsFollower,
+          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
@@ -255,8 +251,7 @@ describe('ChannelView', () => {
     renderWithProviders(
       <ChannelView
         channel={createChannel({
-          channelCustomerTag: 'CUSTOMER_PAID',
-          otherMemberIsFollower: true,
+          otherMemberCustomerTag: 'CUSTOMER_PAID',
         })}
         onParticipantNameClick={vi.fn()}
         showStarButton={true}
@@ -267,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

package/src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -2,6 +2,7 @@ import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
@@ -46,6 +47,9 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const safeIndex = Math.min(index, total - 1)
   const current = gallery[safeIndex]
   const isVideoItem = isPlayableItem(current)
+  const optimizedCurrentThumbnailUrl = optimizeMessagingAttachmentUrl(
+    current.thumbnailUrl
+  )
 
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
   // wrapper on PreviewMediaCard / OwnMediaCard.
@@ -90,7 +94,7 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         >
           {current.thumbnailUrl && (
             <img
-              src={current.thumbnailUrl}
+              src={optimizedCurrentThumbnailUrl ?? current.thumbnailUrl}
               alt=""
               aria-hidden
               draggable={false}

package/src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
@@ -55,6 +56,9 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
   const effectiveThumbnailUrl = showLocked
     ? thumbnailUrl
     : (source?.thumbnailUrl ?? thumbnailUrl)
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(
+    effectiveThumbnailUrl
+  )
 
   const isDark = variant === 'dark'
 
@@ -80,7 +84,7 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
         >
           {effectiveThumbnailUrl ? (
             <img
-              src={effectiveThumbnailUrl}
+              src={optimizedThumbnailUrl ?? effectiveThumbnailUrl}
               alt=""
               aria-hidden
               draggable={false}

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

@@ -25,6 +25,18 @@ describe('linkCardPropsFromStreamAttachment', () => {
     ).toBe('featured')
   })
 
+  it('optimizes Linktree-hosted thumbnails for messaging attachment renders', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        image_url: 'https://assets.linktr.ee/thumb.jpg',
+      }).thumbnailUrl
+    ).toBe(
+      'https://assets.linktr.ee/thumb.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
   it('uses the classic layout for a plain link with no thumbnail', () => {
     expect(
       linkCardPropsFromStreamAttachment({
@@ -152,6 +164,27 @@ describe('StreamAttachmentMessage', () => {
     expect(container).toHaveTextContent('caption')
   })
 
+  it('optimizes Linktree-hosted image attachments for the channel bubble', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={message([
+          {
+            type: 'image',
+            image_url: 'https://ugc.production.linktr.ee/photo.jpg',
+            title: 'Vacation',
+          },
+        ])}
+      />
+    )
+
+    expect(screen.getByRole('img', { name: 'Vacation' })).toHaveAttribute(
+      'src',
+      'https://ugc.production.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
   it('renders the accompanying message text next to a link attachment', () => {
     const { container } = renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -6,6 +6,7 @@ import {
   type MessageContextValue,
 } from 'stream-chat-react'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 import LinkAttachment from '../LinkAttachment'
 import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
 import MessageAttachment from '../MessageAttachment'
@@ -65,7 +66,7 @@ export function linkCardPropsFromStreamAttachment(a: Attachment) {
     title: trimToUndefined((a as { title?: string }).title),
     description: trimToUndefined((a as { text?: string }).text),
     url,
-    thumbnailUrl,
+    thumbnailUrl: optimizeMessagingAttachmentUrl(thumbnailUrl),
     // Playable clip embedded in a link preview — lets LinkAttachment render its
     // native video/audio player in the hero instead of a static thumbnail.
     sourceUrl,
@@ -166,8 +167,10 @@ export function bubblePositionInRun(
 
 function imageSrcFromAttachment(attachment: Attachment): string {
   return (
-    trimToUndefined((attachment as { image_url?: string }).image_url) ??
-    trimToUndefined(attachment.asset_url) ??
+    optimizeMessagingAttachmentUrl(
+      trimToUndefined((attachment as { image_url?: string }).image_url)
+    ) ??
+    optimizeMessagingAttachmentUrl(trimToUndefined(attachment.asset_url)) ??
     ''
   )
 }

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../../utils/cdnImageUrl'
 import { renderTypeIcon } from '../../../AttachmentCard'
 import { getSourceType } from '../../../AttachmentCard/utils/mimeType'
 
@@ -81,6 +82,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
 }) => {
   const sourceType = getSourceType(mimeType)
   const isPlayableVideo = !!sourceUrl && sourceType === 'video'
+  const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)
 
   if (isPlayableAudio(mimeType, sourceUrl)) {
     // Audio collapses the hero entirely — the native player sits inside
@@ -110,7 +112,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       {isPlayableVideo ? (
         <video
           src={sourceUrl}
-          poster={thumbnailUrl}
+          poster={optimizedThumbnailUrl}
           controls
           playsInline
           preload="metadata"
@@ -120,7 +122,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
         </video>
       ) : thumbnailUrl ? (
         <img
-          src={thumbnailUrl}
+          src={optimizedThumbnailUrl ?? thumbnailUrl}
           alt={title ?? ''}
           draggable={false}
           className="absolute inset-0 h-full w-full object-cover"

package/src/components/MediaMessage/index.tsx

@@ -2,6 +2,7 @@ import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon } from '@phosphor-icons/r
 import React, { useState } from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 
+import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 import AttachmentCard, {
   AttachmentThumbnail,
   getSourceType,
@@ -54,7 +55,7 @@ const LinkCard: React.FC<{
       <div className="p-2">
         {image_url ? (
           <img
-            src={image_url}
+            src={optimizeMessagingAttachmentUrl(image_url) ?? image_url}
             alt={title ?? ''}
             className="aspect-video w-full rounded-[20px] object-cover"
           />

package/src/components/MessageAttachment/Image/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { optimizeMessagingAttachmentUrl } from '../../../utils/cdnImageUrl'
 import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
 import ImageViewer, {
@@ -61,7 +62,7 @@ const tileFromItem = (
   ariaLabel: `Open image ${index + 1} of ${totalCount}`,
   content: (
     <img
-      src={item.src}
+      src={optimizeMessagingAttachmentUrl(item.src) ?? item.src}
       alt={item.alt ?? ''}
       width={item.width}
       height={item.height}
@@ -148,7 +149,7 @@ const ImageComposerInner: React.FC<{
         className="block size-[280px] cursor-zoom-in overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40"
       >
         <img
-          src={src}
+          src={optimizeMessagingAttachmentUrl(src) ?? src}
           alt={alt ?? ''}
           draggable={false}
           loading={loading}

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -33,6 +33,26 @@ const expectViewerOpen = (testId: string) => {
 }
 
 describe('MessageAttachment.Image', () => {
+  it('optimizes Linktree-hosted composer previews without changing the viewer source', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Composer
+        src="https://assets.linktr.ee/photo.jpg"
+        alt="Photo"
+      />
+    )
+
+    expect(screen.getByRole('img', { name: 'Photo' })).toHaveAttribute(
+      'src',
+      'https://assets.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+
+    fireEvent.click(screen.getByLabelText('Open image'))
+    const viewer = expectViewerOpen('image-viewer')
+    expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
+      'https://assets.linktr.ee/photo.jpg'
+    )
+  })
+
   it('renders an image bubble with caption', () => {
     renderWithProviders(
       <MessageAttachment.Image.Sent

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 {

package/src/utils/cdnImageUrl.ts

@@ -0,0 +1,32 @@
+const LINKTREE_CDN_HOSTS = ['linktr.ee', 'cloudfront.net', 'cloudinary']
+
+const ATTACHMENT_IMAGE_SIZE_PRESET = 'messaging-attachment-v1_0'
+
+function hostnameFromUrl(url: string): string | null {
+  try {
+    return new URL(url).hostname.toLowerCase()
+  } catch {
+    return null
+  }
+}
+
+function isLinktreeCdnHost(hostname: string): boolean {
+  return LINKTREE_CDN_HOSTS.some((host) => hostname.includes(host))
+}
+
+export function optimizeMessagingAttachmentUrl(
+  url: string | undefined | null
+): string | undefined {
+  const trimmed = url?.trim()
+  if (!trimmed) return undefined
+
+  const hostname = hostnameFromUrl(trimmed)
+  if (!hostname || !isLinktreeCdnHost(hostname)) return trimmed
+
+  if (/[?&]io=true(?:&|$)/.test(trimmed) && /[?&]size=/.test(trimmed)) {
+    return trimmed
+  }
+
+  const separator = trimmed.includes('?') ? '&' : '?'
+  return `${trimmed}${separator}io=true&size=${ATTACHMENT_IMAGE_SIZE_PRESET}`
+}