@linktr.ee/messaging-react 3.4.1 → 3.4.2-rc-1782453401

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cds2w5zi.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.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DkqM2z_j.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.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1471,6 +1471,13 @@ 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.
@@ -1488,5 +1495,10 @@ 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 n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, 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 } from "./index-DPGZRLRM.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, 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 } from "./index-CbWEp3Zs.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

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

@@ -55,6 +55,8 @@ const createMockChannel = (options: {
     thumb_url?: string
   }>
   lastMessageMetadata?: CustomMessageData['metadata']
+  isCustomer?: boolean
+  isStarred?: boolean
 }): Channel => {
   const {
     id,
@@ -66,6 +68,8 @@ const createMockChannel = (options: {
     unreadCount = 0,
     lastMessageAttachments,
     lastMessageMetadata,
+    isCustomer = false,
+    isStarred = false,
   } = options
 
   const eventListeners = new Map<string, Set<(...args: unknown[]) => void>>()
@@ -89,8 +93,12 @@ const createMockChannel = (options: {
             image: participantImage,
           },
           user_id: participantId,
+          ...(isCustomer ? { customer: true } : {}),
         },
       },
+      membership: {
+        pinned_at: isStarred ? now().toISOString() : null,
+      },
       messages:
         lastMessageText || lastMessageAttachments || lastMessageMetadata
           ? ([
@@ -249,6 +257,61 @@ 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({

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

@@ -12,12 +12,15 @@ const mockUser = {
 }
 
 type MockChannel = Channel & {
-  emitMemberUpdated: (member?: { pinned_at?: string | null }) => void
+  emitMemberUpdated: (member?: {
+    pinned_at?: string | null
+    user_id?: string
+  }) => void
 }
 
 const createMockChannel = (messages: Partial<LocalMessage>[]): MockChannel => {
   const memberUpdatedListeners = new Set<
-    (event: { member?: { pinned_at?: string | null } }) => void
+    (event: { member?: { pinned_at?: string | null; user_id?: string } }) => void
   >()
 
   return {
@@ -38,24 +41,34 @@ const createMockChannel = (messages: Partial<LocalMessage>[]): MockChannel => {
     on: vi.fn(
       (
         eventName: string,
-        listener: (event: { member?: { pinned_at?: string | null } }) => void
+        listener: (event: {
+          member?: { pinned_at?: string | null; user_id?: string }
+        }) => 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 } }) => void
+        listener: (event: {
+          member?: { pinned_at?: string | null; user_id?: string }
+        }) => void
       ) => {
         if (eventName === 'member.updated') {
           memberUpdatedListeners.delete(listener)
         }
       }
     ),
-    emitMemberUpdated: (member?: { pinned_at?: string | null }) => {
+    emitMemberUpdated: (member?: {
+      pinned_at?: string | null
+      user_id?: string
+    }) => {
       memberUpdatedListeners.forEach((listener) => listener({ member }))
     },
   } as unknown as MockChannel
@@ -253,6 +266,21 @@ 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([])
 
@@ -265,11 +293,33 @@ describe('CustomChannelPreview', () => {
     ).not.toBeInTheDocument()
 
     act(() => {
-      channel.emitMemberUpdated({ pinned_at: new Date().toISOString() })
+      channel.emitMemberUpdated({
+        pinned_at: new Date().toISOString(),
+        user_id: mockUser.id,
+      })
     })
 
     expect(
       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('heading', { name: /starred conversation/i })
+    ).not.toBeInTheDocument()
+  })
 })

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -8,6 +8,7 @@ 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'
 
@@ -139,22 +140,18 @@ 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={classNames(
-                  'text-sm font-medium truncate text-[#191918]'
-                )}
-              >
-                {isChannelStarred && (
-                  <span className="sr-only">Starred conversation. </span>
-                )}
-                {participantName}
+              <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
+                  participant={participant}
+                  isStarred={isChannelStarred}
+                />
               </h3>
               {lastMessageTime && (
                 <span className="text-xs text-[#717070] flex-shrink-0">

package/src/components/ChannelView.stories.tsx

@@ -41,7 +41,14 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false
+  isFrozen = false,
+  {
+    isCustomer = false,
+    isStarred = false,
+  }: {
+    isCustomer?: boolean
+    isStarred?: boolean
+  } = {}
 ) => {
   const participant = mockParticipants[0]
 
@@ -142,8 +149,12 @@ 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: [],
@@ -171,6 +182,8 @@ const createMockChannel = async (
 type TemplateProps = ComponentProps & {
   followerStatus?: string | boolean
   isFrozen?: boolean
+  isCustomer?: boolean
+  isStarred?: boolean
   typingUser?: {
     id: string
     name?: string
@@ -182,6 +195,8 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const {
     followerStatus,
     isFrozen = false,
+    isCustomer = false,
+    isStarred = false,
     typingUser,
     ...channelViewProps
   } = args
@@ -197,12 +212,13 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus, isFrozen).then(
-      (mockChannel) => {
-        setChannel(mockChannel)
-      }
-    )
-  }, [client, followerStatus, isFrozen])
+    createMockChannel(client, true, followerStatus, isFrozen, {
+      isCustomer,
+      isStarred,
+    }).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [client, followerStatus, isCustomer, isFrozen, isStarred])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -307,6 +323,21 @@ 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

@@ -98,9 +98,11 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
+  otherMemberCustomer = false,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
+  otherMemberCustomer?: boolean
   otherUser?: {
     id: string
     name?: string
@@ -133,6 +135,7 @@ const createChannel = ({
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
           role: currentUserRole === 'owner' ? 'member' : 'owner',
+          customer: otherMemberCustomer,
         },
       },
       membership: {},
@@ -287,38 +290,49 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar when showStarButton is false', () => {
+  it('does not pass starred to avatar when channel is starred', () => {
     mockIsStarred = true
     const channel = createChannel()
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={false} />
+      <ChannelView channel={channel} showStarButton={true} />
     )
 
     expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(avatarRenderCalls.every((call) => !('starred' in call))).toBe(true)
   })
 
-  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
-    mockIsStarred = true
-    const channel = createChannel()
-
+  it('renders built-in customer badges from participant member data', () => {
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={true} />
+      <ChannelView
+        channel={createChannel({ otherMemberCustomer: true })}
+        renderHeaderTitleBadges={() => (
+          <span data-testid="custom-header-badge">VIP</span>
+        )}
+      />
     )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(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()
+    })
   })
 
-  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+  it('renders built-in starred badges from channel star state', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
-    renderWithProviders(<ChannelView channel={channel} />)
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(
+      screen.getAllByRole('img', { name: 'Starred conversation' }).length
+    ).toBeGreaterThan(0)
   })
 
   it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {

package/src/components/ChannelView.tsx

@@ -32,6 +32,7 @@ import CustomTypingIndicator from './CustomTypingIndicator'
 import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
+import { ParticipantBadges } from './ParticipantBadges'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
@@ -136,7 +137,6 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -148,6 +148,10 @@ const CustomChannelHeader: React.FC<{
               className="flex max-w-full items-center gap-0.5 rounded text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70"
             >
               <span className="min-w-0 truncate">{participantName}</span>
+              <ParticipantBadges
+                participant={participant}
+                isStarred={isStarred}
+              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -156,6 +160,10 @@ const CustomChannelHeader: React.FC<{
           ) : (
             <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
               <span className="min-w-0 truncate">{participantName}</span>
+              <ParticipantBadges
+                participant={participant}
+                isStarred={isStarred}
+              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -228,7 +236,6 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -241,6 +248,10 @@ const CustomChannelHeader: React.FC<{
                 className="flex min-w-0 max-w-full items-center gap-1 rounded font-medium text-black/90 transition-opacity hover:opacity-70"
               >
                 <span className="min-w-0 truncate">{participantName}</span>
+                <ParticipantBadges
+                  participant={participant}
+                  isStarred={isStarred}
+                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -249,6 +260,10 @@ const CustomChannelHeader: React.FC<{
             ) : (
               <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
                 <span className="min-w-0 truncate">{participantName}</span>
+                <ParticipantBadges
+                  participant={participant}
+                  isStarred={isStarred}
+                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -388,10 +403,10 @@ const ChannelViewInner: React.FC<{
   }, [channel._client?.userID, channel.state?.members])
 
   const currentUserIsAccount =
-    (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
+    currentMember?.user?.is_account ??
     (currentMember as { is_account?: boolean } | undefined)?.is_account
   const participantIsAccount =
-    (participant?.user as { is_account?: boolean } | undefined)?.is_account ??
+    participant?.user?.is_account ??
     (participant as { is_account?: boolean } | undefined)?.is_account
 
   const showDmAgentHeader =

package/src/components/ParticipantBadges.tsx

@@ -0,0 +1,39 @@
+import { CurrencyDollarIcon, StarIcon } from '@phosphor-icons/react'
+import React from 'react'
+import type { ChannelMemberResponse } from 'stream-chat'
+
+export const ParticipantBadges: React.FC<{
+  participant?: ChannelMemberResponse
+  isStarred?: boolean
+}> = ({ participant, isStarred = false }) => {
+  const isCustomer = participant?.customer === true
+
+  if (!isCustomer && !isStarred) return null
+
+  return (
+    <span className="inline-flex shrink-0 items-center gap-1">
+      {isCustomer && (
+        <span
+          role="img"
+          aria-label="Customer"
+          className="inline-flex size-4 items-center justify-center rounded-full bg-[#22C55E] text-white"
+        >
+          <CurrencyDollarIcon
+            aria-hidden="true"
+            className="size-3"
+            weight="bold"
+          />
+        </span>
+      )}
+      {isStarred && (
+        <span
+          role="img"
+          aria-label="Starred conversation"
+          className="inline-flex size-4 items-center justify-center rounded-full bg-[#F6C343] text-white"
+        >
+          <StarIcon aria-hidden="true" className="size-3" weight="fill" />
+        </span>
+      )}
+    </span>
+  )
+}

package/src/hooks/useChannelStar.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Channel, Event } from 'stream-chat'
+import type { Channel, Event } from 'stream-chat'
 
 export const useChannelStar = (channel?: Channel) => {
   const [isChannelStarred, setIsChannelStarred] = useState(
@@ -15,15 +15,18 @@ export const useChannelStar = (channel?: Channel) => {
     setIsChannelStarred(!!channel.state.membership?.pinned_at)
 
     const handleMemberUpdate = (event: Event) => {
-      setIsChannelStarred(
-        event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at
-      )
+      const currentUserId = channel._client?.userID
+      const memberUserId = event.member?.user_id ?? event.member?.user?.id
+
+      if (!currentUserId || memberUserId !== currentUserId) return
+
+      setIsChannelStarred(!!event.member?.pinned_at)
     }
 
-    channel.on('member.updated', handleMemberUpdate)
+    const subscription = channel.on('member.updated', handleMemberUpdate)
 
     return () => {
-      channel.off('member.updated', handleMemberUpdate)
+      subscription.unsubscribe()
     }
   }, [channel])
 

package/src/stream-custom-data.ts

@@ -2,7 +2,8 @@
  * Stream Chat custom data type augmentation.
  *
  * This file extends Stream Chat's type system by augmenting their empty
- * CustomMessageData and CustomChannelData interfaces with our custom properties.
+ * CustomMessageData, CustomChannelData, CustomMemberData, and CustomUserData
+ * interfaces with our custom properties.
  *
  * @see https://getstream.io/chat/docs/sdk/react/guides/typescript_and_custom_data_types/
  *
@@ -98,6 +99,14 @@ 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.
@@ -115,4 +124,10 @@ declare module 'stream-chat' {
      */
     dm_agent_system_type?: DmAgentSystemType
   }
+
+  interface CustomUserData {
+    is_account?: boolean
+    is_follower?: boolean
+    username?: string
+  }
 }