@linktr.ee/messaging-react 3.4.0-rc-1782373728 → 3.4.0-rc-1782387968

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
+import { ChannelMemberResponse } from 'stream-chat';
 import { ChannelSort } from 'stream-chat';
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
@@ -148,7 +149,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' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderHeaderTitleBadges' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo'>;
 
 /**
  * ChannelView component props
@@ -250,6 +251,14 @@ export declare interface ChannelViewProps {
      * and filter by starred/pinned status.
      */
     showStarButton?: boolean;
+    /**
+     * Custom badges rendered inline after the participant name in the channel
+     * header title.
+     */
+    renderHeaderTitleBadges?: (context: {
+        channel: Channel;
+        participant?: ChannelMemberResponse;
+    }) => React.ReactNode;
     /**
      * Show the channel actions menu (the `...` popover) in the header, which
      * exposes the block/report/delete moderation actions. Defaults to true.
@@ -342,16 +351,6 @@ export declare interface ChannelViewProps {
      * Use this to render staged paid or media attachments inside the input.
      */
     attachmentPreviewList?: 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
-     * for opening participant details / thread content); when omitted, the name
-     * renders as plain text.
-     *
-     * @example
-     * onParticipantNameClick={() => openThreadContentDialog()}
-     */
-    onParticipantNameClick?: () => void;
 }
 
 export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
@@ -1390,6 +1389,17 @@ 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;
@@ -1462,6 +1472,13 @@ declare module 'stream-chat' {
          */
         chatbot_paused?: boolean;
     }
+    interface CustomUserData {
+        /**
+         * Whether the user is a verified Linktree profile. When true, a
+         * verification badge is shown next to their name in messaging.
+         */
+        is_verified?: boolean;
+    }
     interface CustomMessageData {
         /**
          * When true, hides the date timestamp in system messages.

package/dist/index.js

@@ -1,34 +1,35 @@
-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-DKq7HA0h.js";
+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-DG5LOHey.js";
 export {
-  e as ActionButton,
+  s as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
   m as CustomMessageProvider,
   g as FaqList,
-  l as FaqListItem,
-  r as LinkAttachment,
+  r as FaqListItem,
+  l as LinkAttachment,
   M as LockedAttachment,
   u as MediaMessage,
   L as MessageAttachment,
   c as MessageVoteButtons,
-  h as MessagingProvider,
-  d as MessagingShell,
-  p as buildCompactMetaLabel,
-  v as formatFileSize,
-  A as formatRelativeTime,
-  C as getFileExtensionLabel,
-  F as getMessageDisplayText,
-  k as isLinkAttachment,
-  b as isUuidLike,
-  f as messageAttachmentGroupPositionFromStream,
+  d as MessagingProvider,
+  h as MessagingShell,
+  p as VerifiedBadge,
+  v as buildCompactMetaLabel,
+  A as formatFileSize,
+  C as formatRelativeTime,
+  F as getFileExtensionLabel,
+  k as getMessageDisplayText,
+  f as isLinkAttachment,
+  V as isUuidLike,
+  b as messageAttachmentGroupPositionFromStream,
   x as normalizeLanguageCode,
   y as resolveLinkAttachment,
-  P as resolveMediaFromMessage,
-  S as resolveParticipantDisplayName,
-  q as useCustomMessage,
-  z as useMessageVote,
-  B as useMessaging
+  B as resolveMediaFromMessage,
+  P as resolveParticipantDisplayName,
+  S as useCustomMessage,
+  q as useMessageVote,
+  z as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

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

@@ -101,6 +101,44 @@ 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([
       {

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 { VerifiedBadge } from '../VerifiedBadge'
 
 import { useChannelListContext } from './ChannelListContext'
 
@@ -48,6 +49,7 @@ 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 = (() => {
@@ -146,15 +148,12 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
           <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]'
-                )}
-              >
+              <h3 className="flex min-w-0 items-center gap-1 text-sm font-medium text-[#191918]">
                 {isChannelStarred && (
                   <span className="sr-only">Starred conversation. </span>
                 )}
-                {participantName}
+                <span className="min-w-0 truncate">{participantName}</span>
+                {isParticipantVerified && <VerifiedBadge />}
               </h3>
               {lastMessageTime && (
                 <span className="text-xs text-[#717070] flex-shrink-0">

package/src/components/ChannelView.stories.tsx

@@ -270,6 +270,27 @@ DmAgentHeader.parameters = {
   },
 }
 
+export const WithHeaderTitleBadges: StoryFn<TemplateProps> = Template.bind({})
+WithHeaderTitleBadges.args = {
+  showBackButton: false,
+  renderHeaderTitleBadges: ({ participant }) => (
+    <span
+      aria-label={`${participant?.user?.name ?? 'Participant'} is a customer`}
+      className="flex size-4 items-center justify-center rounded-full bg-[#E8F8EF] text-[10px] font-semibold text-[#136C3A]"
+    >
+      $
+    </span>
+  ),
+}
+WithHeaderTitleBadges.parameters = {
+  docs: {
+    description: {
+      story:
+        'Renders custom badges inline after the participant name in the channel header via renderHeaderTitleBadges.',
+    },
+  },
+}
+
 export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
   {}
 )

package/src/components/ChannelView.test.tsx

@@ -106,6 +106,7 @@ const createChannel = ({
     name?: string
     username?: string
     is_account?: boolean
+    is_verified?: boolean
   }
 } = {}) =>
   ({
@@ -193,26 +194,6 @@ describe('ChannelView', () => {
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
   })
 
-  it('renders the participant name as a button that fires onParticipantNameClick', () => {
-    const onParticipantNameClick = vi.fn()
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel()}
-        onParticipantNameClick={onParticipantNameClick}
-      />
-    )
-
-    // Both the mobile and desktop header layouts render the button (one is
-    // hidden via CSS), so there is at least one match.
-    const buttons = screen.getAllByRole('button', {
-      name: /view details for linker/i,
-    })
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
-
-    buttons[0].click()
-    expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
-  })
-
   it('renders the actions menu by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 
@@ -475,6 +456,40 @@ describe('ChannelView', () => {
     expect(screen.getAllByText('Unknown member').length).toBeGreaterThan(0)
   })
 
+  it('shows the verification badge in the header when the participant is verified', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherUser: {
+            id: 'linker-1',
+            name: 'Linker',
+            is_account: true,
+            is_verified: true,
+          },
+        })}
+      />
+    )
+
+    expect(screen.getAllByLabelText('Verified').length).toBeGreaterThan(0)
+  })
+
+  it('does not show the verification badge in the header when the participant is not verified', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherUser: {
+            id: 'linker-1',
+            name: 'Linker',
+            is_account: true,
+            is_verified: false,
+          },
+        })}
+      />
+    )
+
+    expect(screen.queryByLabelText('Verified')).not.toBeInTheDocument()
+  })
+
   it('fires onMessageLinkClick with the href and undefined message when the link is not inside a message wrapper', () => {
     const handler = vi.fn()
     const { container } = renderWithProviders(

package/src/components/ChannelView.tsx

@@ -1,9 +1,4 @@
-import {
-  ArrowLeftIcon,
-  CaretRightIcon,
-  SparkleIcon,
-  StarIcon,
-} from '@phosphor-icons/react'
+import { ArrowLeftIcon, SparkleIcon, StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -32,6 +27,7 @@ import CustomTypingIndicator from './CustomTypingIndicator'
 import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
+import { VerifiedBadge } from './VerifiedBadge'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
@@ -57,7 +53,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
-  onParticipantNameClick?: () => void
+  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
 }> = ({
   onBack,
   showBackButton,
@@ -74,7 +70,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions,
   renderChannelActions,
   showChannelInfo = true,
-  onParticipantNameClick,
+  renderHeaderTitleBadges,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -90,7 +86,12 @@ const CustomChannelHeader: React.FC<{
 
   const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
+  const isParticipantVerified = participant?.user?.is_verified === true
   const isStarred = useChannelStar(channel)
+  const headerTitleBadges = renderHeaderTitleBadges?.({
+    channel,
+    participant,
+  })
 
   const handleStarClick = async () => {
     try {
@@ -134,21 +135,13 @@ const CustomChannelHeader: React.FC<{
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
-          {onParticipantNameClick ? (
-            <button
-              type="button"
-              onClick={onParticipantNameClick}
-              aria-label={`View details for ${participantName}`}
-              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="truncate">{participantName}</span>
-              <CaretRightIcon className="size-3 shrink-0" weight="bold" />
-            </button>
-          ) : (
-            <p className="text-center text-xs font-medium text-black/90">
-              {participantName}
-            </p>
-          )}
+          <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>
+            {isParticipantVerified && <VerifiedBadge />}
+            {headerTitleBadges && (
+              <span className="shrink-0">{headerTitleBadges}</span>
+            )}
+          </p>
           {dmAgentEnabled && (
             <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
               <SparkleIcon className="size-3 shrink-0 text-black/55" />
@@ -221,21 +214,13 @@ const CustomChannelHeader: React.FC<{
             size={48}
           />
           <div className="min-w-0">
-            {onParticipantNameClick ? (
-              <button
-                type="button"
-                onClick={onParticipantNameClick}
-                aria-label={`View details for ${participantName}`}
-                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="truncate">{participantName}</span>
-                <CaretRightIcon className="size-4 shrink-0" weight="bold" />
-              </button>
-            ) : (
-              <h1 className="font-medium text-black/90 truncate">
-                {participantName}
-              </h1>
-            )}
+            <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+              <span className="min-w-0 truncate">{participantName}</span>
+              {isParticipantVerified && <VerifiedBadge />}
+              {headerTitleBadges && (
+                <span className="shrink-0">{headerTitleBadges}</span>
+              )}
+            </h1>
             {dmAgentEnabled && (
               <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
                 <SparkleIcon className="size-3 shrink-0 text-black/55" />
@@ -311,6 +296,7 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
+  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   renderMessage?: (
@@ -320,7 +306,6 @@ const ChannelViewInner: React.FC<{
   dmAgentEnabled?: boolean
   viewerLanguage?: string
   showChannelInfo?: boolean
-  onParticipantNameClick?: () => void
 }> = ({
   onBack,
   showBackButton,
@@ -340,13 +325,13 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
+  renderHeaderTitleBadges,
   customChannelActions,
   renderChannelActions,
   renderMessage,
   dmAgentEnabled = false,
   viewerLanguage,
   showChannelInfo = true,
-  onParticipantNameClick,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -428,7 +413,7 @@ const ChannelViewInner: React.FC<{
               onReportParticipantClick={onReportParticipantClick}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
-              onParticipantNameClick={onParticipantNameClick}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
             />
           </div>
 
@@ -498,6 +483,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
+    renderHeaderTitleBadges,
     customChannelActions,
     renderChannelActions,
     renderMessage,
@@ -506,7 +492,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     attachmentPreviewList,
     viewerLanguage,
     showChannelInfo = true,
-    onParticipantNameClick,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -614,12 +599,12 @@ export const ChannelView = React.memo<ChannelViewProps>(
               dmAgentEnabled={dmAgentEnabled}
               chatbotVotingEnabled={chatbotVotingEnabled}
               renderChannelBanner={renderChannelBanner}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
-              onParticipantNameClick={onParticipantNameClick}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/components/MessagingShell/index.tsx

@@ -31,6 +31,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageSent,
   chatbotVotingEnabled = false,
   viewerLanguage,
+  renderHeaderTitleBadges,
   renderChannelBanner,
   customChannelActions,
   renderChannelActions,
@@ -255,6 +256,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           onMessageSent={onMessageSent}
           chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
+          renderHeaderTitleBadges={renderHeaderTitleBadges}
           customChannelActions={customChannelActions}
           renderChannelActions={renderChannelActions}
           renderMessage={renderMessage}

package/src/components/VerifiedBadge/index.tsx

@@ -0,0 +1,25 @@
+import { SealCheckIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+
+export interface VerifiedBadgeProps {
+  className?: string
+  size?: number
+}
+
+/**
+ * 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 const VerifiedBadge: React.FC<VerifiedBadgeProps> = ({
+  className,
+  size = 16,
+}) => (
+  <SealCheckIcon
+    weight="fill"
+    size={size}
+    className={classNames('shrink-0 text-[#1D9BF0]', className)}
+    aria-label="Verified"
+    role="img"
+  />
+)

package/src/index.ts

@@ -10,6 +10,8 @@ export { default as LockedAttachment } from './components/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
+export { VerifiedBadge } from './components/VerifiedBadge'
+export type { VerifiedBadgeProps } from './components/VerifiedBadge'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'

package/src/stream-custom-data.ts

@@ -98,6 +98,14 @@ declare module 'stream-chat' {
     chatbot_paused?: boolean
   }
 
+  interface CustomUserData {
+    /**
+     * Whether the user is a verified Linktree profile. When true, a
+     * verification badge is shown next to their name in messaging.
+     */
+    is_verified?: boolean
+  }
+
   interface CustomMessageData {
     /**
      * When true, hides the date timestamp in system messages.

package/src/types.ts

@@ -6,6 +6,7 @@ import type { ComponentType } from 'react'
 import type {
   Channel,
   ChannelFilters,
+  ChannelMemberResponse,
   ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
@@ -209,6 +210,15 @@ export interface ChannelViewProps {
    */
   showStarButton?: boolean
 
+  /**
+   * Custom badges rendered inline after the participant name in the channel
+   * header title.
+   */
+  renderHeaderTitleBadges?: (context: {
+    channel: Channel
+    participant?: ChannelMemberResponse
+  }) => React.ReactNode
+
   /**
    * Show the channel actions menu (the `...` popover) in the header, which
    * exposes the block/report/delete moderation actions. Defaults to true.
@@ -313,17 +323,6 @@ export interface ChannelViewProps {
    * Use this to render staged paid or media attachments inside the input.
    */
   attachmentPreviewList?: 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
-   * for opening participant details / thread content); when omitted, the name
-   * renders as plain text.
-   *
-   * @example
-   * onParticipantNameClick={() => openThreadContentDialog()}
-   */
-  onParticipantNameClick?: () => void
 }
 
 /**
@@ -341,6 +340,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onMessageSent'
   | 'chatbotVotingEnabled'
   | 'viewerLanguage'
+  | 'renderHeaderTitleBadges'
   | 'renderChannelBanner'
   | 'customChannelActions'
   | 'renderChannelActions'