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

package/dist/index.cjs

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

@@ -351,6 +351,16 @@ 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 {
@@ -1389,17 +1399,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;
@@ -1472,13 +1471,6 @@ 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,35 +1,34 @@
-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";
+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-BOsrtjME.js";
 export {
-  s as ActionButton,
+  e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
   m as CustomMessageProvider,
   g as FaqList,
-  r as FaqListItem,
-  l as LinkAttachment,
+  l as FaqListItem,
+  r as LinkAttachment,
   M as LockedAttachment,
   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,
-  k as getMessageDisplayText,
-  f as isLinkAttachment,
-  V as isUuidLike,
-  b as messageAttachmentGroupPositionFromStream,
+  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,
   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 useCustomMessage,
+  z as useMessageVote,
+  B as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

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

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

package/src/components/ChannelList/CustomChannelPreview.tsx

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

package/src/components/ChannelView.stories.tsx

@@ -251,6 +251,22 @@ Default.parameters = {
   },
 }
 
+export const ParticipantNameTrigger: StoryFn<TemplateProps> = Template.bind({})
+ParticipantNameTrigger.args = {
+  showBackButton: false,
+  onParticipantNameClick: () =>
+    // eslint-disable-next-line no-alert
+    window.alert('Participant name clicked — open Thread content'),
+}
+ParticipantNameTrigger.parameters = {
+  docs: {
+    description: {
+      story:
+        'Header with `onParticipantNameClick` set: the participant name renders as a button with a trailing caret (both the mobile and desktop header layouts). Click the name to fire the callback (shows an alert here). With the prop omitted (see Default) the name is plain, non-interactive text.',
+    },
+  },
+}
+
 export const DmAgentHeader: StoryFn<TemplateProps> = Template.bind({})
 DmAgentHeader.args = {
   showBackButton: false,

package/src/components/ChannelView.test.tsx

@@ -106,7 +106,6 @@ const createChannel = ({
     name?: string
     username?: string
     is_account?: boolean
-    is_verified?: boolean
   }
 } = {}) =>
   ({
@@ -194,6 +193,26 @@ 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()} />)
 
@@ -456,40 +475,6 @@ 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,4 +1,9 @@
-import { ArrowLeftIcon, SparkleIcon, StarIcon } from '@phosphor-icons/react'
+import {
+  ArrowLeftIcon,
+  CaretRightIcon,
+  SparkleIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -27,7 +32,6 @@ 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'
@@ -53,6 +57,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
+  onParticipantNameClick?: () => void
   renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
 }> = ({
   onBack,
@@ -70,6 +75,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions,
   renderChannelActions,
   showChannelInfo = true,
+  onParticipantNameClick,
   renderHeaderTitleBadges,
 }) => {
   const { channel } = useChannelStateContext()
@@ -86,7 +92,6 @@ 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,
@@ -135,13 +140,27 @@ const CustomChannelHeader: React.FC<{
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
-          <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>
+          {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="min-w-0 truncate">{participantName}</span>
+              {headerTitleBadges && (
+                <span className="shrink-0">{headerTitleBadges}</span>
+              )}
+              <CaretRightIcon className="size-3 shrink-0" weight="bold" />
+            </button>
+          ) : (
+            <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>
+              {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" />
@@ -214,13 +233,27 @@ const CustomChannelHeader: React.FC<{
             size={48}
           />
           <div className="min-w-0">
-            <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>
+            {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="min-w-0 truncate">{participantName}</span>
+                {headerTitleBadges && (
+                  <span className="shrink-0">{headerTitleBadges}</span>
+                )}
+                <CaretRightIcon className="size-4 shrink-0" weight="bold" />
+              </button>
+            ) : (
+              <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+                <span className="min-w-0 truncate">{participantName}</span>
+                {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" />
@@ -306,6 +339,7 @@ const ChannelViewInner: React.FC<{
   dmAgentEnabled?: boolean
   viewerLanguage?: string
   showChannelInfo?: boolean
+  onParticipantNameClick?: () => void
 }> = ({
   onBack,
   showBackButton,
@@ -332,6 +366,7 @@ const ChannelViewInner: React.FC<{
   dmAgentEnabled = false,
   viewerLanguage,
   showChannelInfo = true,
+  onParticipantNameClick,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -413,6 +448,7 @@ const ChannelViewInner: React.FC<{
               onReportParticipantClick={onReportParticipantClick}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
+              onParticipantNameClick={onParticipantNameClick}
               renderHeaderTitleBadges={renderHeaderTitleBadges}
             />
           </div>
@@ -492,6 +528,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     attachmentPreviewList,
     viewerLanguage,
     showChannelInfo = true,
+    onParticipantNameClick,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -605,6 +642,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
+              onParticipantNameClick={onParticipantNameClick}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/index.ts

@@ -10,8 +10,6 @@ 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,14 +98,6 @@ 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

@@ -323,6 +323,17 @@ 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
 }
 
 /**