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

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -342,6 +342,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 {

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-BHFdqj7Z.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-DKq7HA0h.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelView.test.tsx

@@ -193,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()} />)
 

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'
@@ -52,6 +57,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
+  onParticipantNameClick?: () => void
 }> = ({
   onBack,
   showBackButton,
@@ -68,6 +74,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions,
   renderChannelActions,
   showChannelInfo = true,
+  onParticipantNameClick,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -127,9 +134,21 @@ const CustomChannelHeader: React.FC<{
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
-          <p className="text-center text-xs font-medium text-black/90">
-            {participantName}
-          </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="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>
+          )}
           {dmAgentEnabled && (
             <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
               <SparkleIcon className="size-3 shrink-0 text-black/55" />
@@ -202,9 +221,21 @@ const CustomChannelHeader: React.FC<{
             size={48}
           />
           <div className="min-w-0">
-            <h1 className="font-medium text-black/90 truncate">
-              {participantName}
-            </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="truncate">{participantName}</span>
+                <CaretRightIcon className="size-4 shrink-0" weight="bold" />
+              </button>
+            ) : (
+              <h1 className="font-medium text-black/90 truncate">
+                {participantName}
+              </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" />
@@ -289,6 +320,7 @@ const ChannelViewInner: React.FC<{
   dmAgentEnabled?: boolean
   viewerLanguage?: string
   showChannelInfo?: boolean
+  onParticipantNameClick?: () => void
 }> = ({
   onBack,
   showBackButton,
@@ -314,6 +346,7 @@ const ChannelViewInner: React.FC<{
   dmAgentEnabled = false,
   viewerLanguage,
   showChannelInfo = true,
+  onParticipantNameClick,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -395,6 +428,7 @@ const ChannelViewInner: React.FC<{
               onReportParticipantClick={onReportParticipantClick}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
+              onParticipantNameClick={onParticipantNameClick}
             />
           </div>
 
@@ -472,6 +506,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     attachmentPreviewList,
     viewerLanguage,
     showChannelInfo = true,
+    onParticipantNameClick,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -584,6 +619,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
+              onParticipantNameClick={onParticipantNameClick}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/types.ts

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