@linktr.ee/messaging-react 3.5.6 → 3.5.7-rc-1783064389

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BflWZq0e.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.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-BIJpO0jL.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.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.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 d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-BXzwYXLT.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 d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-3vM1UOPb.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelHeaderRedesign.tsx

@@ -0,0 +1,231 @@
+import {
+  ArrowLeftIcon,
+  CaretRightIcon,
+  CurrencyDollarIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+import type { ChannelMemberResponse, Channel as ChannelType } from 'stream-chat'
+import { useChannelStateContext, useChatContext } from 'stream-chat-react'
+
+import { useChannelStar } from '../hooks/useChannelStar'
+import type { ChannelViewProps } from '../types'
+import { resolveConversationParticipant } from '../utils/resolveConversationParticipant'
+import { resolveParticipantDisplayName } from '../utils/resolveParticipantDisplayName'
+
+import { Avatar } from './Avatar'
+import { ChannelActionsMenu } from './ChannelActionsMenu'
+
+const ICON_BTN_CLASS =
+  'pointer-events-auto 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 isCustomerPaidTag = (value: unknown) =>
+  typeof value === 'string' &&
+  value
+    .trim()
+    .replace(/[\s-]+/g, '_')
+    .toUpperCase() === CUSTOMER_PAID_TAG
+
+const hasCustomerPaidTag = (participant?: ChannelMemberResponse) => {
+  const member = participant as
+    | {
+        customerTag?: unknown
+        customer_tag?: unknown
+      }
+    | undefined
+
+  return [member?.customerTag, member?.customer_tag].some(isCustomerPaidTag)
+}
+
+interface ChannelHeaderRedesignProps {
+  onBack?: () => void
+  showBackButton: boolean
+  showStarButton?: boolean
+  dmAgentEnabled?: boolean
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  showDeleteConversation?: boolean
+  showBlockParticipant?: boolean
+  showReportParticipant?: boolean
+  onDeleteConversationClick?: () => void
+  onBlockParticipantClick?: () => void
+  onReportParticipantClick?: () => void
+  customChannelActions?: React.ReactNode
+  renderChannelActions?: React.ReactNode
+  showChannelInfo?: boolean
+  onParticipantNameClick: () => void
+  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
+}
+
+export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
+  onBack,
+  showBackButton,
+  showStarButton = false,
+  dmAgentEnabled = false,
+  onLeaveConversation,
+  onBlockParticipant,
+  showDeleteConversation = true,
+  showBlockParticipant = true,
+  showReportParticipant = true,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  customChannelActions,
+  renderChannelActions,
+  showChannelInfo = true,
+  onParticipantNameClick,
+  renderHeaderTitleBadges,
+}) => {
+  const { channel } = useChannelStateContext()
+  const { client } = useChatContext()
+
+  const participant = React.useMemo(
+    () =>
+      resolveConversationParticipant(
+        channel.state?.members,
+        client?.userID,
+        channel.type
+      ),
+    [channel.state?.members, client?.userID, channel.type]
+  )
+
+  const participantName = resolveParticipantDisplayName(participant?.user)
+  const participantImage = participant?.user?.image
+  const isStarred = useChannelStar(channel)
+  const isPaidCustomer = hasCustomerPaidTag(participant)
+  const headerTitleBadges = renderHeaderTitleBadges?.({
+    channel,
+    participant,
+  })
+
+  const handleStarClick = async () => {
+    try {
+      if (isStarred) {
+        await (channel as ChannelType).unpin()
+      } else {
+        await (channel as ChannelType).pin()
+      }
+    } catch (error) {
+      console.error(
+        '[ChannelHeaderRedesign] Failed to update pinned status:',
+        error
+      )
+    }
+  }
+
+  return (
+    <div className="@container pointer-events-none sticky top-0 z-10 w-full bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]">
+      <div className="grid min-h-[100px] grid-cols-[40px_minmax(0,1fr)_40px] items-start pb-2 pt-5 @lg:min-h-[104px] @lg:pt-6">
+        <div className="flex items-start">
+          {showBackButton && (
+            <button
+              className={classNames(
+                ICON_BTN_CLASS,
+                'messaging-channel-view-back-button-mobile messaging-channel-view-back-button-desktop'
+              )}
+              onClick={onBack || (() => {})}
+              type="button"
+              aria-label="Back to conversations"
+            >
+              <ArrowLeftIcon className="size-5 text-black/90" />
+            </button>
+          )}
+        </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 pointer-events-auto 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 inline-flex max-w-full 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-colors duration-150 group-hover:bg-white/80">
+              <span className="min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90">
+                {participantName}
+              </span>
+              <div 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>
+                )}
+                {headerTitleBadges && (
+                  <span className="shrink-0">{headerTitleBadges}</span>
+                )}
+                <CaretRightIcon
+                  aria-hidden="true"
+                  className="size-4 shrink-0 text-black/65"
+                  weight="bold"
+                />
+              </div>
+            </span>
+          </button>
+        </div>
+
+        <div className="flex items-start justify-end gap-2">
+          {showStarButton && (
+            <button
+              className={ICON_BTN_CLASS}
+              onClick={handleStarClick}
+              type="button"
+              aria-pressed={isStarred}
+              aria-label={
+                isStarred ? 'Unstar conversation' : 'Star conversation'
+              }
+            >
+              <StarIcon
+                className={classNames('size-5', {
+                  'text-[#FFD60A]': isStarred,
+                  'text-black/90': !isStarred,
+                })}
+                weight={isStarred ? 'fill' : 'regular'}
+              />
+            </button>
+          )}
+          {showChannelInfo &&
+            (renderChannelActions !== undefined ? (
+              renderChannelActions
+            ) : (
+              <ChannelActionsMenu
+                channel={channel as ChannelType}
+                participant={participant}
+                showDeleteConversation={showDeleteConversation}
+                showBlockParticipant={showBlockParticipant}
+                showReportParticipant={showReportParticipant}
+                onLeaveConversation={onLeaveConversation}
+                onBlockParticipant={onBlockParticipant}
+                onDeleteConversationClick={onDeleteConversationClick}
+                onBlockParticipantClick={onBlockParticipantClick}
+                onReportParticipantClick={onReportParticipantClick}
+                customChannelActions={customChannelActions}
+                triggerClassName={ICON_BTN_CLASS}
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ChannelView.stories.tsx

@@ -16,6 +16,7 @@ import { ChannelView } from './ChannelView'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 type ComponentProps = React.ComponentProps<typeof ChannelView>
+const SCROLLABLE_MESSAGE_COUNT = 10
 
 const meta: Meta<ComponentProps> = {
   title: 'ChannelView',
@@ -41,7 +42,9 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false
+  isFrozen = false,
+  participantCustomerTag?: string,
+  hasScrollableMessages = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -101,6 +104,34 @@ const createMockChannel = async (
           cid: 'messaging:storybook-channel-1',
           mentioned_users: [],
         },
+        ...(hasScrollableMessages
+          ? Array.from({ length: SCROLLABLE_MESSAGE_COUNT }, (_, index) => {
+              const isParticipantMessage = index % 2 === 0
+              const user = isParticipantMessage ? participant : mockUser
+              const text = isParticipantMessage
+                ? `Here is another message to show how the redesigned header floats above the thread (${index + 1}).`
+                : `Replying so the conversation has enough content to scroll under the header (${index + 1}).`
+
+              return {
+                id: `msg-extra-${index + 1}`,
+                text,
+                type: 'regular' as const,
+                created_at: minutesAgo(Math.max(1, 25 - index)),
+                updated_at: minutesAgo(Math.max(1, 25 - index)),
+                user,
+                html: `<p>${text}</p>`,
+                attachments: [],
+                latest_reactions: [],
+                own_reactions: [],
+                reaction_counts: {},
+                reaction_scores: {},
+                reply_count: 0,
+                status: 'received',
+                cid: 'messaging:storybook-channel-1',
+                mentioned_users: [],
+              }
+            })
+          : []),
       ]
     : []
 
@@ -118,7 +149,11 @@ const createMockChannel = async (
   }
 
   // Create a real channel using the client
-  const channel = client.channel('messaging', 'storybook-channel-1', channelData)
+  const channel = client.channel(
+    'messaging',
+    'storybook-channel-1',
+    channelData
+  )
 
   // Mock the watch method to return mocked data
   channel.watch = async () => {
@@ -142,6 +177,7 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
+        customerTag: participantCustomerTag,
       },
     }
     return {
@@ -176,12 +212,16 @@ type TemplateProps = ComponentProps & {
     name?: string
     image?: string
   }
+  participantCustomerTag?: string
+  hasScrollableMessages?: boolean
 }
 
 const Template: StoryFn<TemplateProps> = (args) => {
   const {
     followerStatus,
     isFrozen = false,
+    participantCustomerTag,
+    hasScrollableMessages,
     typingUser,
     ...channelViewProps
   } = args
@@ -193,16 +233,27 @@ const Template: StoryFn<TemplateProps> = (args) => {
     client.user = mockUser
     return client
   })
-  
+
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus, isFrozen).then(
-      (mockChannel) => {
-        setChannel(mockChannel)
-      }
-    )
-  }, [client, followerStatus, isFrozen])
+    createMockChannel(
+      client,
+      true,
+      followerStatus,
+      isFrozen,
+      participantCustomerTag,
+      hasScrollableMessages
+    ).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [
+    client,
+    followerStatus,
+    isFrozen,
+    participantCustomerTag,
+    hasScrollableMessages,
+  ])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -256,6 +307,9 @@ export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
 )
 ParticipantIdentityTrigger.args = {
   showBackButton: false,
+  showStarButton: true,
+  participantCustomerTag: 'CUSTOMER_PAID',
+  hasScrollableMessages: true,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert
     window.alert('Participant details clicked — open Thread content'),
@@ -264,7 +318,7 @@ ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the participant avatar and name render as one button with a trailing caret in both the mobile and desktop header layouts. Click the identity block to fire the callback (shows an alert here). With the prop omitted (see Default) the header remains non-interactive.',
+        'Header with `onParticipantNameClick` set: the redesigned floating header centers the avatar and name pill, shows paid/star badges when present, and fires the callback when clicked (shows an alert here). With the prop omitted (see Default) the previous header remains in use.',
     },
   },
 }
@@ -542,7 +596,7 @@ const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
     client.user = mockUser
     return client
   })
-  
+
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {

package/src/components/ChannelView.test.tsx

@@ -22,7 +22,9 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: () => <div data-testid="message-list" />,
+  MessageList: ({ head }: { head?: React.ReactElement }) => (
+    <div data-testid="message-list">{head}</div>
+  ),
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),
@@ -100,9 +102,11 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
+  otherMemberCustomerTag,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
+  otherMemberCustomerTag?: string
   otherUser?: {
     id: string
     name?: string
@@ -134,6 +138,7 @@ const createChannel = ({
             is_account:
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
+          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
@@ -203,7 +208,7 @@ describe('ChannelView', () => {
     )
   })
 
-  it('renders the participant name as a button that fires onParticipantNameClick', () => {
+  it('renders the redesigned header button when onParticipantNameClick is provided', () => {
     const onParticipantNameClick = vi.fn()
     renderWithProviders(
       <ChannelView
@@ -212,29 +217,42 @@ describe('ChannelView', () => {
       />
     )
 
-    // 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', {
+    const button = screen.getByRole('button', {
       name: /view details for linker/i,
     })
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
-    expect(buttons[0]).toHaveClass(
+    expect(button).toHaveClass(
       'appearance-none',
       'border-0',
       'bg-transparent',
-      'rounded-[12px]',
-      'px-1',
-      'py-0.5'
+      'flex-col'
     )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBe(buttons[0])
+    expect(avatars[0].closest('button')).toBe(button)
+    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
 
-    buttons[0].click()
+    button.click()
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
   })
 
+  it('renders redesigned header badges for paid and starred conversations', () => {
+    mockIsStarred = true
+
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherMemberCustomerTag: 'CUSTOMER_PAID',
+        })}
+        onParticipantNameClick={vi.fn()}
+        showStarButton={true}
+      />
+    )
+
+    expect(screen.getByLabelText('Paid customer')).toBeInTheDocument()
+    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
+  })
+
   it('renders the actions menu by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 

package/src/components/ChannelView.tsx

@@ -25,6 +25,7 @@ import { resolveParticipantDisplayName } from '../utils/resolveParticipantDispla
 
 import { Avatar } from './Avatar'
 import { ChannelActionsMenu } from './ChannelActionsMenu'
+import { ChannelHeaderRedesign } from './ChannelHeaderRedesign'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
@@ -497,27 +498,28 @@ const ChannelViewInner: React.FC<{
       >
         <Window>
           {/* Custom Channel Header */}
-          <div key="lt-channel-header">
-            <CustomChannelHeader
-              onBack={onBack}
-              showBackButton={showBackButton}
-              showChannelInfo={showChannelInfo}
-              showStarButton={showStarButton}
-              dmAgentEnabled={showDmAgentHeader}
-              onLeaveConversation={onLeaveConversation}
-              onBlockParticipant={onBlockParticipant}
-              showDeleteConversation={showDeleteConversation}
-              showBlockParticipant={showBlockParticipant}
-              showReportParticipant={showReportParticipant}
-              onDeleteConversationClick={onDeleteConversationClick}
-              onBlockParticipantClick={onBlockParticipantClick}
-              onReportParticipantClick={onReportParticipantClick}
-              customChannelActions={customChannelActions}
-              renderChannelActions={renderChannelActions}
-              onParticipantNameClick={onParticipantNameClick}
-              renderHeaderTitleBadges={renderHeaderTitleBadges}
-            />
-          </div>
+          {!onParticipantNameClick && (
+            <div key="lt-channel-header">
+              <CustomChannelHeader
+                onBack={onBack}
+                showBackButton={showBackButton}
+                showChannelInfo={showChannelInfo}
+                showStarButton={showStarButton}
+                dmAgentEnabled={showDmAgentHeader}
+                onLeaveConversation={onLeaveConversation}
+                onBlockParticipant={onBlockParticipant}
+                showDeleteConversation={showDeleteConversation}
+                showBlockParticipant={showBlockParticipant}
+                showReportParticipant={showReportParticipant}
+                onDeleteConversationClick={onDeleteConversationClick}
+                onBlockParticipantClick={onBlockParticipantClick}
+                onReportParticipantClick={onReportParticipantClick}
+                customChannelActions={customChannelActions}
+                renderChannelActions={renderChannelActions}
+                renderHeaderTitleBadges={renderHeaderTitleBadges}
+              />
+            </div>
+          )}
 
           {/* Custom Banner/Summary */}
           {renderChannelBanner ? (
@@ -531,7 +533,33 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
+            <MessageList
+              head={
+                onParticipantNameClick ? (
+                  <ChannelHeaderRedesign
+                    onBack={onBack}
+                    showBackButton={showBackButton}
+                    showChannelInfo={showChannelInfo}
+                    showStarButton={showStarButton}
+                    dmAgentEnabled={showDmAgentHeader}
+                    onLeaveConversation={onLeaveConversation}
+                    onBlockParticipant={onBlockParticipant}
+                    showDeleteConversation={showDeleteConversation}
+                    showBlockParticipant={showBlockParticipant}
+                    showReportParticipant={showReportParticipant}
+                    onDeleteConversationClick={onDeleteConversationClick}
+                    onBlockParticipantClick={onBlockParticipantClick}
+                    onReportParticipantClick={onReportParticipantClick}
+                    customChannelActions={customChannelActions}
+                    renderChannelActions={renderChannelActions}
+                    onParticipantNameClick={onParticipantNameClick}
+                    renderHeaderTitleBadges={renderHeaderTitleBadges}
+                  />
+                ) : undefined
+              }
+              hideDeletedMessages
+              hideNewMessageSeparator={false}
+            />
           </div>
 
           {renderConversationFooter ? (