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

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
 import { ChannelMemberResponse } from 'stream-chat';
+import { ChannelPreviewUIComponentProps } from 'stream-chat-react';
 import { ChannelSort } from 'stream-chat';
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
@@ -132,6 +133,11 @@ export declare interface ChannelListProps {
      */
     sort?: ChannelSort;
     customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
+    /**
+     * Custom component rendered for each channel row in the conversation list.
+     * Defaults to the package's built-in CustomChannelPreview.
+     */
+    channelPreview?: ComponentType<ChannelPreviewUIComponentProps>;
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
     /**
      * Language code used to pick translated message text from Stream Chat i18n.
@@ -149,7 +155,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderHeaderTitleBadges' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderHeaderTitleBadges' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -351,6 +357,22 @@ export declare interface ChannelViewProps {
      * Use this to render staged paid or media attachments inside the input.
      */
     attachmentPreviewList?: ComponentType;
+    /**
+     * Replace the entire inner composer — the textarea + send arrangement — with
+     * a host-owned component. Passed to Stream's `<MessageInput>` as the `Input`
+     * component, so it runs inside the message-input context and reuses the
+     * library's send pipeline (`doSendMessageRequest`, message metadata, DM-agent
+     * suppression), attachments, and previews via the Stream hooks
+     * (`useMessageInputContext`, `useMessageComposerHasSendableData`,
+     * `TextareaComposer`, …). Use it when a surface needs a different composer
+     * layout (e.g. a full-width textarea above a toolbar row) than the default.
+     *
+     * The outer wrapper — frozen handling and the `renderMessageInputActions` /
+     * `renderMessageInputFooter` slots — is unchanged. Read the exported
+     * `useComposerLocked()` hook to honour the frozen state. Defaults to the
+     * built-in composer when omitted.
+     */
+    composerInput?: ComponentType;
     /**
      * Fired when the participant's name in the channel header is clicked. When
      * provided, the name renders as a button with a trailing caret (an affordance
@@ -1376,6 +1398,14 @@ export declare interface SentCardProps extends LockedAttachmentBaseProps {
     onFetchSource?: () => Promise<LockedAttachmentSource | void>;
 }
 
+/**
+ * Read the composer's locked (frozen-channel) state from inside a custom
+ * composer supplied via `composerInput`. Returns true when the channel is
+ * frozen; mirror the default composer by rendering the textarea read-only and
+ * disabling the send control.
+ */
+export declare const useComposerLocked: () => boolean;
+
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
 /**
@@ -1399,17 +1429,6 @@ declare interface UseMessageVoteResult {
  */
 export declare const useMessaging: () => MessagingContextValue;
 
-/**
- * Linktree verification badge shown next to the name of a verified profile.
- * Rendered when a participant's Stream user has `is_verified` set to true.
- */
-export declare const VerifiedBadge: default_2.FC<VerifiedBadgeProps>;
-
-export declare interface VerifiedBadgeProps {
-    className?: string;
-    size?: number;
-}
-
 declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Single video — convenience for the most common case. */
     src?: string;
@@ -1482,12 +1501,12 @@ declare module 'stream-chat' {
          */
         chatbot_paused?: boolean;
     }
-    interface CustomUserData {
+    interface CustomMemberData {
         /**
-         * Whether the user is a verified Linktree profile. When true, a
-         * verification badge is shown next to their name in messaging.
+         * Whether the member should be identified as a customer in participant UI.
+         * Stored on the channel member so it is scoped to this conversation.
          */
-        is_verified?: boolean;
+        customer?: boolean;
     }
     interface CustomMessageData {
         /**
@@ -1506,5 +1525,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,10 +1,10 @@
-import { a as s, b as t, C as i, c as n, d as o, 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 d, l as h, V as p, m as v, n as A, o as C, p as F, q as k, s as f, t as V, u as b, v as x, w as y, x as B, y as P, z as S, B as q, D as z } from "./index-BlpDX5fl.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-ubCRSgQk.js";
 export {
-  s as ActionButton,
+  e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
-  n as ChannelList,
-  o as ChannelView,
+  o as ChannelList,
+  n as ChannelView,
   m as CustomMessageProvider,
   g as FaqList,
   r as FaqListItem,
@@ -13,23 +13,23 @@ export {
   u as MediaMessage,
   L as MessageAttachment,
   c as MessageVoteButtons,
-  d as MessagingProvider,
-  h as MessagingShell,
-  p as VerifiedBadge,
-  v as buildCompactMetaLabel,
-  A as formatFileSize,
-  C as formatRelativeTime,
-  F as getFileExtensionLabel,
+  h as MessagingProvider,
+  d as MessagingShell,
+  p as buildCompactMetaLabel,
+  C as formatFileSize,
+  v as formatRelativeTime,
+  A as getFileExtensionLabel,
   k as getMessageDisplayText,
-  f as isLinkAttachment,
-  V as isUuidLike,
-  b as messageAttachmentGroupPositionFromStream,
+  F as isLinkAttachment,
+  b as isUuidLike,
+  f as messageAttachmentGroupPositionFromStream,
   x as normalizeLanguageCode,
   y as resolveLinkAttachment,
-  B as resolveMediaFromMessage,
-  P as resolveParticipantDisplayName,
-  S as useCustomMessage,
-  q as useMessageVote,
-  z as useMessaging
+  P as resolveMediaFromMessage,
+  S as resolveParticipantDisplayName,
+  q as useComposerLocked,
+  z as useCustomMessage,
+  B as useMessageVote,
+  D as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
-import { MockChatProvider } from '../../stories/mocks'
+import { MockChatProviderWithChannels } from '../../stories/mocks'
 
 import { ChannelList } from '.'
 
@@ -21,9 +21,9 @@ const meta: Meta<ComponentProps> = {
   },
   decorators: [
     (Story) => (
-      <MockChatProvider>
+      <MockChatProviderWithChannels>
         <Story />
-      </MockChatProvider>
+      </MockChatProviderWithChannels>
     ),
   ],
 }
@@ -39,11 +39,13 @@ const Template: StoryFn<ComponentProps> = (args) => {
 
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
+  filters: { type: 'messaging' },
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const WithSelection: StoryFn<ComponentProps> = Template.bind({})
 WithSelection.args = {
+  filters: { type: 'messaging' },
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 

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

@@ -6,6 +6,7 @@ import {
   LocalMessage,
   StreamChat,
 } from 'stream-chat'
+import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import {
   daysAgo,
@@ -14,13 +15,16 @@ 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> = {
-  title: 'ChannelList/CustomChannelPreview',
+  title: 'ChannelList/ChannelPreview',
   component: CustomChannelPreview,
   parameters: {
     layout: 'centered',
@@ -55,6 +59,8 @@ const createMockChannel = (options: {
     thumb_url?: string
   }>
   lastMessageMetadata?: CustomMessageData['metadata']
+  isCustomer?: boolean
+  isStarred?: boolean
 }): Channel => {
   const {
     id,
@@ -66,6 +72,8 @@ const createMockChannel = (options: {
     unreadCount = 0,
     lastMessageAttachments,
     lastMessageMetadata,
+    isCustomer = false,
+    isStarred = false,
   } = options
 
   const eventListeners = new Map<string, Set<(...args: unknown[]) => void>>()
@@ -89,8 +97,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 +261,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({
@@ -799,3 +866,46 @@ 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,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
@@ -101,44 +114,6 @@ describe('CustomChannelPreview', () => {
     expect(screen.getByText('Unknown member')).toBeInTheDocument()
   })
 
-  it('shows the verification badge when the participant is verified', () => {
-    const channel = createMockChannel([])
-    channel.state.members['participant-1'] = {
-      user: { id: 'participant-1', name: 'Alice', is_verified: true },
-      user_id: 'participant-1',
-    }
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-
-    expect(screen.getByLabelText('Verified')).toBeInTheDocument()
-  })
-
-  it('does not show the verification badge when the participant is not verified', () => {
-    const channel = createMockChannel([])
-    channel.state.members['participant-1'] = {
-      user: { id: 'participant-1', name: 'Alice', is_verified: false },
-      user_id: 'participant-1',
-    }
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-
-    expect(screen.queryByLabelText('Verified')).not.toBeInTheDocument()
-  })
-
-  it('does not show the verification badge when is_verified is absent', () => {
-    const channel = createMockChannel([])
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-
-    expect(screen.queryByLabelText('Verified')).not.toBeInTheDocument()
-  })
-
   it('shows the latest non-system message when the last message is a system message', () => {
     const channel = createMockChannel([
       {
@@ -291,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([])
 
@@ -299,15 +289,37 @@ describe('CustomChannelPreview', () => {
     )
 
     expect(
-      screen.queryByRole('heading', { name: /starred conversation/i })
+      screen.queryByRole('img', { name: 'Starred conversation' })
     ).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 })
+      screen.getByRole('img', { name: 'Starred conversation' })
     ).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,13 +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 { VerifiedBadge } from '../VerifiedBadge'
+import { ParticipantBadges } from '../ParticipantBadges'
 
 import { useChannelListContext } from './ChannelListContext'
 
@@ -49,7 +48,6 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     )
     const participantName = resolveParticipantDisplayName(participant?.user)
     const participantImage = participant?.user?.image
-    const isParticipantVerified = participant?.user?.is_verified === true
 
     // Get last non-system message for preview
     const lastMessage = (() => {
@@ -71,11 +69,13 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
       if (isTip) return displayText ? `💵 ${displayText}` : '💵 Sent a tip'
       const isPaid = lastMessage?.metadata?.custom_type === 'MESSAGE_PAID'
       if (isPaid) return displayText ? `💰 ${displayText}` : '💰 Sent a message'
-      const isPaidAttachment = lastMessage?.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
-      if (isPaidAttachment) return displayText ? `📎 ${displayText}` : '📎 Sent an attachment'
-      
+      const isPaidAttachment =
+        lastMessage?.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
+      if (isPaidAttachment)
+        return displayText ? `📎 ${displayText}` : '📎 Sent an attachment'
+
       if (displayText) return displayText
-      
+
       const attachment = lastMessage?.attachments?.[0]
       if (attachment) {
         // Link previews - show the actual URL
@@ -105,7 +105,6 @@ 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
@@ -133,6 +132,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             'hover:bg-black/[0.02]': !isSelected,
           }
         )}
+        data-dd-privacy="mask"
       >
         <div className="flex items-start gap-4">
           {/* Avatar */}
@@ -141,7 +141,6 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             name={participantName}
             image={participantImage}
             size={48}
-            starred={isChannelStarred}
           />
 
           {/* Content column */}
@@ -149,11 +148,11 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             {/* 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]">
-                {isChannelStarred && (
-                  <span className="sr-only">Starred conversation. </span>
-                )}
                 <span className="min-w-0 truncate">{participantName}</span>
-                {isParticipantVerified && <VerifiedBadge />}
+                <ParticipantBadges
+                  channel={channel}
+                  participant={participant}
+                />
               </h3>
               {lastMessageTime && (
                 <span className="text-xs text-[#717070] flex-shrink-0">