@linktr.ee/messaging-react 3.14.5 → 3.15.0

package/dist/index.cjs

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

@@ -206,7 +206,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' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -309,8 +309,8 @@ export declare interface ChannelViewProps {
      */
     showStarButton?: boolean;
     /**
-     * Custom badges rendered inline after the participant name in the channel
-     * header title.
+     * @deprecated No longer rendered. The redesigned header shows built-in paid
+     * and starred badges instead. Kept temporarily so existing call sites type-check.
      */
     renderHeaderTitleBadges?: (context: {
         channel: Channel;
@@ -425,10 +425,9 @@ export declare interface ChannelViewProps {
      */
     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
-     * for opening participant details / thread content); when omitted, the name
-     * renders as plain text.
+     * Fired when the participant identity in the channel header is clicked. When
+     * provided, the avatar + name pill render as a button with a trailing caret;
+     * when omitted, they render as non-interactive chrome.
      *
      * @example
      * onParticipantNameClick={() => openThreadContentDialog()}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-DMYxJz1w.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-DdVzOymJ.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.14.5",
+  "version": "3.15.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelHeaderRedesign.tsx

@@ -2,7 +2,6 @@ import {
   ArrowLeftIcon,
   CaretRightIcon,
   CurrencyDollarIcon,
-  SparkleIcon,
   StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
@@ -21,7 +20,6 @@ const ICON_BTN_CLASS =
   'flex size-10 flex-shrink-0 items-center justify-center rounded-full bg-white/65 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.06),0px_0px_0px_1px_rgba(0,0,0,0.04)] backdrop-blur-[40px] transition-filter duration-150 hover:brightness-95 aria-expanded:brightness-95 focus-ring'
 
 const CUSTOMER_PAID_TAG = 'CUSTOMER_PAID'
-const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 
 const isCustomerPaidTag = (value: unknown) =>
   typeof value === 'string' &&
@@ -35,7 +33,6 @@ interface ChannelHeaderRedesignProps {
   onBack?: () => void
   showBackButton: boolean
   showStarButton?: boolean
-  dmAgentEnabled?: boolean
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
   showDeleteConversation?: boolean
@@ -47,7 +44,7 @@ interface ChannelHeaderRedesignProps {
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
-  onParticipantNameClick: () => void
+  onParticipantNameClick?: () => void
 }
 
 export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
@@ -55,7 +52,6 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
   onBack,
   showBackButton,
   showStarButton = false,
-  dmAgentEnabled = false,
   onLeaveConversation,
   onBlockParticipant,
   showDeleteConversation = true,
@@ -104,6 +100,51 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
     }
   }
 
+  const identityContent = (
+    <>
+      <Avatar
+        id={participant?.user?.id || channel.id || 'unknown'}
+        name={participantName}
+        image={participantImage}
+        shape="circle"
+        size={48}
+        className="-mb-2"
+      />
+      <span className="relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 pl-3 pr-2 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95">
+        <span className="flex max-w-full items-center justify-center">
+          <span className="min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90">
+            {participantName}
+          </span>
+          <span className="ml-2 flex gap-1">
+            {isPaidCustomer && (
+              <span
+                aria-label="Paid customer"
+                className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white"
+              >
+                <CurrencyDollarIcon className="size-2.5" weight="bold" />
+              </span>
+            )}
+            {showStarButton && isStarred && (
+              <span
+                aria-label="Starred conversation"
+                className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
+              >
+                <StarIcon className="size-2.5" weight="fill" />
+              </span>
+            )}
+            {onParticipantNameClick && (
+              <CaretRightIcon
+                aria-hidden="true"
+                className="size-4 shrink-0 text-black/65"
+                weight="bold"
+              />
+            )}
+          </span>
+        </span>
+      </span>
+    </>
+  )
+
   return (
     <div
       className={classNames(
@@ -129,58 +170,20 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
         </div>
 
         <div className="flex min-w-0 justify-center" data-dd-privacy="mask">
-          <button
-            type="button"
-            onClick={onParticipantNameClick}
-            aria-label={`View details for ${participantName}`}
-            className="group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none"
-          >
-            <Avatar
-              id={participant?.user?.id || channel.id || 'unknown'}
-              name={participantName}
-              image={participantImage}
-              dmAgentEnabled={dmAgentEnabled}
-              shape="circle"
-              size={48}
-              className="-mb-2"
-            />
-            <span className="relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 pl-3 pr-2 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95">
-              <span className="flex max-w-full items-center justify-center">
-                <span className="min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90">
-                  {participantName}
-                </span>
-                <span className="ml-2 flex gap-1">
-                  {isPaidCustomer && (
-                    <span
-                      aria-label="Paid customer"
-                      className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white"
-                    >
-                      <CurrencyDollarIcon className="size-2.5" weight="bold" />
-                    </span>
-                  )}
-                  {showStarButton && isStarred && (
-                    <span
-                      aria-label="Starred conversation"
-                      className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
-                    >
-                      <StarIcon className="size-2.5" weight="fill" />
-                    </span>
-                  )}
-                  <CaretRightIcon
-                    aria-hidden="true"
-                    className="size-4 shrink-0 text-black/65"
-                    weight="bold"
-                  />
-                </span>
-              </span>
-              {dmAgentEnabled && (
-                <span className="mt-1 flex items-center gap-1 px-1 pb-0.5 text-[10px] leading-3 text-black/55">
-                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
-                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
-                </span>
-              )}
-            </span>
-          </button>
+          {onParticipantNameClick ? (
+            <button
+              type="button"
+              onClick={onParticipantNameClick}
+              aria-label={`View details for ${participantName}`}
+              className="group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none"
+            >
+              {identityContent}
+            </button>
+          ) : (
+            <div className="flex min-w-0 max-w-full flex-col items-center px-2">
+              {identityContent}
+            </div>
+          )}
         </div>
 
         <div className="flex items-start justify-end gap-2">

package/src/components/ChannelView.stories.tsx

@@ -370,25 +370,6 @@ ParticipantIdentityTrigger.parameters = {
   },
 }
 
-export const DmAgentHeader: StoryFn<TemplateProps> = Template.bind({})
-DmAgentHeader.args = {
-  showBackButton: false,
-  dmAgentEnabled: true,
-  onBack: () => console.log('Back clicked'),
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-DmAgentHeader.parameters = {
-  docs: {
-    description: {
-      story:
-        'Channel view with DM agent header treatment enabled (AI avatar border and "Replies instantly with AI assistant" helper text).',
-    },
-  },
-}
-
 export const WithHeaderTitleBadges: StoryFn<TemplateProps> = Template.bind({})
 WithHeaderTitleBadges.args = {
   showBackButton: false,

package/src/components/ChannelView.test.tsx

@@ -207,24 +207,18 @@ describe('ChannelView', () => {
     expect(lastActionsMenuProps().showReportParticipant).toBe(false)
   })
 
-  it('renders the participant name without an info trigger', () => {
+  it('renders the redesigned header without a participant click trigger by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    // The info sidebar was removed, so the participant name is plain text on
-    // both headers — there is no clickable affordance to open a profile
-    // dialog anymore.
     expect(
-      screen.queryByRole('button', { name: /view info for/i })
+      screen.queryByRole('button', { name: /view details for linker/i })
     ).not.toBeInTheDocument()
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].parentElement).toHaveClass(
-      'rounded-[12px]',
-      'px-1',
-      'py-0.5'
-    )
+    expect(avatars[0].closest('button')).toBeNull()
+    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
   })
 
   it('renders the redesigned header button when onParticipantNameClick is provided', () => {
@@ -264,7 +258,6 @@ describe('ChannelView', () => {
           channelCustomerTag: 'CUSTOMER_PAID',
           otherMemberIsFollower: true,
         })}
-        onParticipantNameClick={vi.fn()}
         showStarButton={true}
       />
     )
@@ -298,14 +291,12 @@ describe('ChannelView', () => {
             } as Channel['state']['messages'][number],
           ],
         })}
-        onParticipantNameClick={vi.fn()}
       />
     )
 
-    const button = screen.getByRole('button', {
-      name: /view details for linker/i,
-    })
-    expect(button.closest('[data-testid="message-list"]')).toBeNull()
+    expect(
+      screen.getByText('Linker').closest('[data-testid="message-list"]')
+    ).toBeNull()
   })
 
   it('renders the actions menu by default', () => {
@@ -416,79 +407,36 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar when showStarButton is false', () => {
+  it('does not show a starred badge when showStarButton is false', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={false} />
+      <ChannelView channel={createChannel()} showStarButton={false} />
     )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(
+      screen.queryByLabelText('Starred conversation')
+    ).not.toBeInTheDocument()
   })
 
-  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
+  it('shows a starred badge when showStarButton is true and channel is starred', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
-    renderWithProviders(<ChannelView channel={channel} showStarButton={true} />)
+    renderWithProviders(
+      <ChannelView channel={createChannel()} showStarButton={true} />
+    )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
+    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+  it('does not show a starred badge by default (showStarButton defaults to false)', () => {
     mockIsStarred = true
-    const channel = createChannel()
-
-    renderWithProviders(<ChannelView channel={channel} />)
-
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
-  })
-
-  it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {
-    const channel = createChannel({
-      currentUserId: 'visitor-1',
-      currentUserRole: 'owner',
-    })
-
-    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
-
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(
-      avatarRenderCalls.every((call) => call.dmAgentEnabled === true)
-    ).toBe(true)
-  })
-
-  it('renders dm agent helper text when dmAgentEnabled is true for visitor view', () => {
-    const channel = createChannel({
-      currentUserId: 'visitor-1',
-      currentUserRole: 'owner',
-    })
 
-    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
-
-    expect(
-      screen.getAllByText('Replies instantly with AI assistant').length
-    ).toBeGreaterThan(0)
-  })
-
-  it('does not render dm agent helper text for linker view even when dmAgentEnabled is true', () => {
-    const channel = createChannel({
-      currentUserId: 'linker-1',
-      currentUserRole: 'member',
-    })
-
-    renderWithProviders(<ChannelView channel={channel} dmAgentEnabled={true} />)
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
     expect(
-      screen.queryByText('Replies instantly with AI assistant')
+      screen.queryByLabelText('Starred conversation')
     ).not.toBeInTheDocument()
-    expect(
-      avatarRenderCalls.every((call) => call.dmAgentEnabled === false)
-    ).toBe(true)
   })
 
   it('keeps channel banner and input action renderers working', () => {