@linktr.ee/messaging-react 3.5.0-rc-1782792813 → 3.5.0-rc-1782793221

package/dist/index.cjs

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

@@ -1501,13 +1501,6 @@ declare module 'stream-chat' {
          */
         chatbot_paused?: boolean;
     }
-    interface CustomMemberData {
-        /**
-         * Whether the member should be identified as a customer in participant UI.
-         * Stored on the channel member so it is scoped to this conversation.
-         */
-        customer?: boolean;
-    }
     interface CustomMessageData {
         /**
          * When true, hides the date timestamp in system messages.
@@ -1525,10 +1518,5 @@ declare module 'stream-chat' {
          */
         dm_agent_system_type?: DmAgentSystemType;
     }
-    interface CustomUserData {
-        is_account?: boolean;
-        is_follower?: boolean;
-        username?: string;
-    }
 }
 

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 g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B, E as D } from "./index-ubCRSgQk.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B, E as D } from "./index-DxzkXLSW.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.5.0-rc-1782792813",
+  "version": "3.5.0-rc-1782793221",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1782792813",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1782793221",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelList/ChannelList.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
+import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { MockChatProviderWithChannels } from '../../stories/mocks'
 
@@ -37,6 +38,35 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
+const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
+  channel,
+  unread,
+}) => {
+  const participant = Object.values(channel?.state?.members || {}).find(
+    (member) => member.user?.id !== channel?._client?.userID
+  )
+
+  return (
+    <div className="mx-3 mt-3 rounded-[20px] border border-[#e0dfdb] bg-white p-4 shadow-[0_4px_16px_rgba(0,0,0,0.06)]">
+      <div className="flex items-center justify-between">
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-[#191918]">
+            {participant?.user?.name ?? 'Unknown visitor'}
+          </p>
+          <p className="mt-1 line-clamp-1 text-xs text-[#717070]">
+            Host-owned channel preview
+          </p>
+        </div>
+        {Boolean(unread) && (
+          <span className="ml-3 rounded-full bg-[#7f22fe] px-2 py-1 text-xs font-medium text-white">
+            {unread}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
   filters: { type: 'messaging' },
@@ -49,4 +79,11 @@ WithSelection.args = {
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
+export const Custom: StoryFn<ComponentProps> = Template.bind({})
+Custom.args = {
+  filters: { type: 'messaging' },
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+  channelPreview: HostChannelPreview,
+}
+
 

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -6,7 +6,6 @@ import {
   LocalMessage,
   StreamChat,
 } from 'stream-chat'
-import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import {
   daysAgo,
@@ -15,12 +14,9 @@ import {
   now,
   secondsAgo,
 } from '../../stories/decorators/storyTime'
-import { MockChatProviderWithChannels } from '../../stories/mocks'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
-import { ChannelList } from '.'
-
 type ComponentProps = React.ComponentProps<typeof CustomChannelPreview>
 
 const meta: Meta<ComponentProps> = {
@@ -59,8 +55,6 @@ const createMockChannel = (options: {
     thumb_url?: string
   }>
   lastMessageMetadata?: CustomMessageData['metadata']
-  isCustomer?: boolean
-  isStarred?: boolean
 }): Channel => {
   const {
     id,
@@ -72,8 +66,6 @@ const createMockChannel = (options: {
     unreadCount = 0,
     lastMessageAttachments,
     lastMessageMetadata,
-    isCustomer = false,
-    isStarred = false,
   } = options
 
   const eventListeners = new Map<string, Set<(...args: unknown[]) => void>>()
@@ -97,12 +89,8 @@ const createMockChannel = (options: {
             image: participantImage,
           },
           user_id: participantId,
-          ...(isCustomer ? { customer: true } : {}),
         },
       },
-      membership: {
-        pinned_at: isStarred ? now().toISOString() : null,
-      },
       messages:
         lastMessageText || lastMessageAttachments || lastMessageMetadata
           ? ([
@@ -261,61 +249,6 @@ ChatbotMessage.args = {
   }),
 }
 
-export const ParticipantBadges: StoryFn = () => {
-  const channels = [
-    createMockChannel({
-      id: 'channel-customer',
-      participantName: 'Alice Customer',
-      participantId: 'participant-customer',
-      participantImage: 'https://i.pravatar.cc/150?img=40',
-      lastMessageText: 'I bought this from your Linktree',
-      lastMessageTime: minutesAgo(2),
-      isCustomer: true,
-    }),
-    createMockChannel({
-      id: 'channel-starred',
-      participantName: 'Bob Starred',
-      participantId: 'participant-starred',
-      participantImage: 'https://i.pravatar.cc/150?img=41',
-      lastMessageText: 'Following up on this thread',
-      lastMessageTime: minutesAgo(8),
-      isStarred: true,
-    }),
-    createMockChannel({
-      id: 'channel-customer-starred',
-      participantName: 'Carol Customer',
-      participantId: 'participant-customer-starred',
-      participantImage: 'https://i.pravatar.cc/150?img=42',
-      lastMessageText: 'Thanks for the quick reply',
-      lastMessageTime: minutesAgo(15),
-      isCustomer: true,
-      isStarred: true,
-    }),
-  ]
-
-  return (
-    <div className="w-[360px] bg-chalk border border-sand rounded-lg overflow-hidden">
-      {channels.map((channel) => (
-        <CustomChannelPreview
-          key={channel.id}
-          channel={channel}
-          onChannelSelect={(channel) => {
-            console.log('Channel selected:', channel.id)
-          }}
-        />
-      ))}
-    </div>
-  )
-}
-ParticipantBadges.parameters = {
-  docs: {
-    description: {
-      story:
-        'Shows the built-in customer badge from participant.member customer data and the starred badge from the current user membership pinned_at value.',
-    },
-  },
-}
-
 export const TipMessage: StoryFn<ComponentProps> = Template.bind({})
 TipMessage.args = {
   channel: createMockChannel({
@@ -866,46 +799,3 @@ WithLongAttachmentUrl.args = {
   }),
 }
 WithLongAttachmentUrl.parameters = skipInChromatic
-
-const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
-  channel,
-  unread,
-}) => {
-  const participant = Object.values(channel?.state?.members || {}).find(
-    (member) => member.user?.id !== channel?._client?.userID
-  )
-
-  return (
-    <div className="mx-3 mt-3 rounded-[20px] border border-[#e0dfdb] bg-white p-4 shadow-[0_4px_16px_rgba(0,0,0,0.06)]">
-      <div className="flex items-center justify-between">
-        <div className="min-w-0">
-          <p className="truncate text-sm font-semibold text-[#191918]">
-            {participant?.user?.name ?? 'Unknown visitor'}
-          </p>
-          <p className="mt-1 line-clamp-1 text-xs text-[#717070]">
-            Host-owned channel preview
-          </p>
-        </div>
-        {Boolean(unread) && (
-          <span className="ml-3 rounded-full bg-[#7f22fe] px-2 py-1 text-xs font-medium text-white">
-            {unread}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export const Custom: StoryFn = () => (
-  <MockChatProviderWithChannels>
-    <div className="h-screen w-full md:w-[360px] bg-chalk">
-      <ChannelList
-        filters={{ type: 'messaging' }}
-        onChannelSelect={(channel) => {
-          console.log('Channel selected:', channel.id)
-        }}
-        channelPreview={HostChannelPreview}
-      />
-    </div>
-  </MockChatProviderWithChannels>
-)

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -12,15 +12,12 @@ const mockUser = {
 }
 
 type MockChannel = Channel & {
-  emitMemberUpdated: (member?: {
-    pinned_at?: string | null
-    user_id?: string
-  }) => void
+  emitMemberUpdated: (member?: { pinned_at?: string | null }) => void
 }
 
 const createMockChannel = (messages: Partial<LocalMessage>[]): MockChannel => {
   const memberUpdatedListeners = new Set<
-    (event: { member?: { pinned_at?: string | null; user_id?: string } }) => void
+    (event: { member?: { pinned_at?: string | null } }) => void
   >()
 
   return {
@@ -41,34 +38,24 @@ const createMockChannel = (messages: Partial<LocalMessage>[]): MockChannel => {
     on: vi.fn(
       (
         eventName: string,
-        listener: (event: {
-          member?: { pinned_at?: string | null; user_id?: string }
-        }) => void
+        listener: (event: { member?: { pinned_at?: string | null } }) => void
       ) => {
         if (eventName === 'member.updated') {
           memberUpdatedListeners.add(listener)
         }
-        return {
-          unsubscribe: () => memberUpdatedListeners.delete(listener),
-        }
       }
     ),
     off: vi.fn(
       (
         eventName: string,
-        listener: (event: {
-          member?: { pinned_at?: string | null; user_id?: string }
-        }) => void
+        listener: (event: { member?: { pinned_at?: string | null } }) => void
       ) => {
         if (eventName === 'member.updated') {
           memberUpdatedListeners.delete(listener)
         }
       }
     ),
-    emitMemberUpdated: (member?: {
-      pinned_at?: string | null
-      user_id?: string
-    }) => {
+    emitMemberUpdated: (member?: { pinned_at?: string | null }) => {
       memberUpdatedListeners.forEach((listener) => listener({ member }))
     },
   } as unknown as MockChannel
@@ -266,21 +253,6 @@ describe('CustomChannelPreview', () => {
     expect(screen.getByText('No messages yet')).toBeInTheDocument()
   })
 
-  it('shows a customer badge from participant member data', () => {
-    const channel = createMockChannel([])
-    channel.state.members['participant-1'] = {
-      user: { id: 'participant-1', name: 'Alice' },
-      user_id: 'participant-1',
-      customer: true,
-    }
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-
-    expect(screen.getByRole('img', { name: 'Customer' })).toBeInTheDocument()
-  })
-
   it('updates starred state when the channel membership changes', () => {
     const channel = createMockChannel([])
 
@@ -289,37 +261,15 @@ describe('CustomChannelPreview', () => {
     )
 
     expect(
-      screen.queryByRole('img', { name: 'Starred conversation' })
+      screen.queryByRole('heading', { name: /starred conversation/i })
     ).not.toBeInTheDocument()
 
     act(() => {
-      channel.emitMemberUpdated({
-        pinned_at: new Date().toISOString(),
-        user_id: mockUser.id,
-      })
+      channel.emitMemberUpdated({ pinned_at: new Date().toISOString() })
     })
 
     expect(
-      screen.getByRole('img', { name: 'Starred conversation' })
+      screen.getByRole('heading', { name: /starred conversation/i })
     ).toBeInTheDocument()
   })
-
-  it('ignores starred updates for other members', () => {
-    const channel = createMockChannel([])
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-
-    act(() => {
-      channel.emitMemberUpdated({
-        pinned_at: new Date().toISOString(),
-        user_id: 'participant-1',
-      })
-    })
-
-    expect(
-      screen.queryByRole('img', { name: 'Starred conversation' })
-    ).not.toBeInTheDocument()
-  })
 })

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -2,12 +2,12 @@ import classNames from 'classnames'
 import React from 'react'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
+import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { resolveParticipantDisplayName } from '../../utils/resolveParticipantDisplayName'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
-import { ParticipantBadges } from '../ParticipantBadges'
 
 import { useChannelListContext } from './ChannelListContext'
 
@@ -105,6 +105,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     const messagePreview = renderMessagePreview
       ? renderMessagePreview(lastMessage, lastMessageText)
       : `${isLastMessageFromChatbot ? '✨ ' : ''}${lastMessageText}`
+    const isChannelStarred = useChannelStar(channel)
 
     // Use the unread prop passed by Stream Chat (reactive and updates automatically)
     const unreadCount = unread ?? 0
@@ -141,18 +142,22 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             name={participantName}
             image={participantImage}
             size={48}
+            starred={isChannelStarred}
           />
 
           {/* Content column */}
           <div className="flex-1 min-w-0 flex flex-col gap-1">
             {/* Name and timestamp row */}
             <div className="flex items-center justify-between gap-2">
-              <h3 className="flex min-w-0 items-center gap-1 text-sm font-medium text-[#191918]">
-                <span className="min-w-0 truncate">{participantName}</span>
-                <ParticipantBadges
-                  channel={channel}
-                  participant={participant}
-                />
+              <h3
+                className={classNames(
+                  'text-sm font-medium truncate text-[#191918]'
+                )}
+              >
+                {isChannelStarred && (
+                  <span className="sr-only">Starred conversation. </span>
+                )}
+                {participantName}
               </h3>
               {lastMessageTime && (
                 <span className="text-xs text-[#717070] flex-shrink-0">

package/src/components/ChannelView.stories.tsx

@@ -41,14 +41,7 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false,
-  {
-    isCustomer = false,
-    isStarred = false,
-  }: {
-    isCustomer?: boolean
-    isStarred?: boolean
-  } = {}
+  isFrozen = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -149,12 +142,8 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
-        ...(isCustomer ? { customer: true } : {}),
       },
     }
-    channel.state.membership = {
-      pinned_at: isStarred ? now().toISOString() : null,
-    } as ChannelMemberResponse
     return {
       channel: channelData,
       members: [],
@@ -182,8 +171,6 @@ const createMockChannel = async (
 type TemplateProps = ComponentProps & {
   followerStatus?: string | boolean
   isFrozen?: boolean
-  isCustomer?: boolean
-  isStarred?: boolean
   typingUser?: {
     id: string
     name?: string
@@ -195,8 +182,6 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const {
     followerStatus,
     isFrozen = false,
-    isCustomer = false,
-    isStarred = false,
     typingUser,
     ...channelViewProps
   } = args
@@ -212,13 +197,12 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus, isFrozen, {
-      isCustomer,
-      isStarred,
-    }).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [client, followerStatus, isCustomer, isFrozen, isStarred])
+    createMockChannel(client, true, followerStatus, isFrozen).then(
+      (mockChannel) => {
+        setChannel(mockChannel)
+      }
+    )
+  }, [client, followerStatus, isFrozen])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -325,21 +309,6 @@ WithHeaderTitleBadges.parameters = {
   },
 }
 
-export const ParticipantBadges: StoryFn<TemplateProps> = Template.bind({})
-ParticipantBadges.args = {
-  showBackButton: false,
-  isCustomer: true,
-  isStarred: true,
-}
-ParticipantBadges.parameters = {
-  docs: {
-    description: {
-      story:
-        'Shows the built-in customer badge from participant.customer and the starred badge from the current user membership pinned_at value in the channel header.',
-    },
-  },
-}
-
 export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
   {}
 )

package/src/components/ChannelView.test.tsx

@@ -84,9 +84,13 @@ vi.mock('./Avatar', () => ({
   },
 }))
 
+let mockIsStarred = false
+vi.mock('../hooks/useChannelStar', () => ({
+  useChannelStar: () => mockIsStarred,
+}))
+
 const createChannel = ({
   currentUserId = 'visitor-1',
-  currentUserPinnedAt,
   currentUserRole = 'owner',
   otherUser = {
     id: 'linker-1' as const,
@@ -94,12 +98,9 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
-  otherMemberCustomer = false,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
-  currentUserPinnedAt?: string
   currentUserRole?: 'owner' | 'member'
-  otherMemberCustomer?: boolean
   otherUser?: {
     id: string
     name?: string
@@ -132,15 +133,12 @@ const createChannel = ({
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
           role: currentUserRole === 'owner' ? 'member' : 'owner',
-          customer: otherMemberCustomer,
         },
       },
-      membership: {
-        pinned_at: currentUserPinnedAt,
-      },
+      membership: {},
       messages: [],
     },
-    on: vi.fn(() => ({ unsubscribe: vi.fn() })),
+    on: vi.fn(),
     off: vi.fn(),
     sendMessage: vi.fn(),
     hide: vi.fn(),
@@ -155,6 +153,7 @@ describe('ChannelView', () => {
     avatarRenderCalls.length = 0
     channelActionsMenuProps.length = 0
     messageInputProps.length = 0
+    mockIsStarred = false
   })
 
   const lastActionsMenuProps = () =>
@@ -308,54 +307,38 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar when channel is starred', () => {
-    const channel = createChannel({
-      currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
-    })
+  it('does not pass starred to avatar when showStarButton is false', () => {
+    mockIsStarred = true
+    const channel = createChannel()
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={true} />
+      <ChannelView channel={channel} showStarButton={false} />
     )
 
     expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => !('starred' in call))).toBe(true)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
   })
 
-  it('renders built-in customer badges from participant member data', () => {
+  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
     renderWithProviders(
-      <ChannelView
-        channel={createChannel({ otherMemberCustomer: true })}
-        renderHeaderTitleBadges={() => (
-          <span data-testid="custom-header-badge">VIP</span>
-        )}
-      />
+      <ChannelView channel={channel} showStarButton={true} />
     )
 
-    const customerBadges = screen.getAllByRole('img', { name: 'Customer' })
-    const customBadges = screen.getAllByTestId('custom-header-badge')
-
-    expect(customerBadges.length).toBeGreaterThan(0)
-    expect(customBadges.length).toBe(customerBadges.length)
-    customerBadges.forEach((badge, index) => {
-      expect(
-        badge.compareDocumentPosition(customBadges[index]) &
-          Node.DOCUMENT_POSITION_FOLLOWING
-      ).toBeTruthy()
-    })
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
   })
 
-  it('renders built-in starred badges from channel star state', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
-        })}
-      />
-    )
+  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+    mockIsStarred = true
+    const channel = createChannel()
 
-    expect(
-      screen.getAllByRole('img', { name: 'Starred conversation' }).length
-    ).toBeGreaterThan(0)
+    renderWithProviders(<ChannelView channel={channel} />)
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
   })
 
   it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {