@linktr.ee/messaging-react 3.12.1 → 3.13.0-rc-1783924547

package/src/components/ChannelView.tsx

@@ -1,9 +1,3 @@
-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'
@@ -18,13 +12,9 @@ import {
   MessageUIComponentProps,
 } 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'
 import { ChannelHeaderRedesign } from './ChannelHeaderRedesign'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
@@ -36,339 +26,6 @@ import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
-const ICON_BTN_CLASS =
-  'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
-
-const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
-
-/**
- * Custom channel header component
- */
-const CustomChannelHeader: React.FC<{
-  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']
-}> = ({
-  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()
-
-  // Get participant info (excluding current user)
-  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 headerTitleBadges = renderHeaderTitleBadges?.({
-    channel,
-    participant,
-  })
-  const mobileParticipantIdentityClassName =
-    'flex max-w-full flex-col items-center gap-1 rounded-[12px] px-1 py-0.5 text-center text-xs font-medium text-black/90'
-  const desktopParticipantIdentityClassName =
-    'flex min-w-0 max-w-full items-center gap-4 rounded-[12px] px-1 py-0.5 text-left text-black/90'
-  const participantTitle = (
-    <>
-      <span className="min-w-0 truncate">{participantName}</span>
-      {headerTitleBadges && (
-        <span className="shrink-0">{headerTitleBadges}</span>
-      )}
-    </>
-  )
-
-  const handleStarClick = async () => {
-    try {
-      if (isStarred) {
-        await channel.unpin()
-      } else {
-        await channel.pin()
-      }
-    } catch (error) {
-      console.error(
-        '[CustomChannelHeader] Failed to update pinned status:',
-        error
-      )
-    }
-  }
-
-  return (
-    <div className="@container">
-      <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden px-6 py-3">
-        <div className="flex items-center gap-2">
-          {showBackButton && (
-            <button
-              className={classNames(
-                ICON_BTN_CLASS,
-                'messaging-channel-view-back-button-mobile bg-[#F1F0EE]'
-              )}
-              onClick={onBack || (() => {})}
-              type="button"
-              aria-label="Back to conversations"
-            >
-              <ArrowLeftIcon className="size-5 text-black/90" />
-            </button>
-          )}
-        </div>
-        <div
-          className="flex flex-col gap-1 items-center"
-          data-dd-privacy="mask"
-        >
-          {onParticipantNameClick ? (
-            <button
-              type="button"
-              onClick={onParticipantNameClick}
-              aria-label={`View details for ${participantName}`}
-              className={classNames(
-                mobileParticipantIdentityClassName,
-                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
-              )}
-            >
-              <Avatar
-                id={participant?.user?.id || channel.id || 'unknown'}
-                name={participantName}
-                image={participantImage}
-                starred={showStarButton && isStarred}
-                dmAgentEnabled={dmAgentEnabled}
-                size={48}
-              />
-              <span className="flex max-w-full items-center gap-0.5">
-                {participantTitle}
-                <CaretRightIcon className="size-3 shrink-0" weight="bold" />
-              </span>
-              {dmAgentEnabled && (
-                <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
-                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
-                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
-                </div>
-              )}
-            </button>
-          ) : (
-            <div className={mobileParticipantIdentityClassName}>
-              <Avatar
-                id={participant?.user?.id || channel.id || 'unknown'}
-                name={participantName}
-                image={participantImage}
-                starred={showStarButton && isStarred}
-                dmAgentEnabled={dmAgentEnabled}
-                size={48}
-              />
-              <p className="flex max-w-full items-center justify-center gap-0.5">
-                {participantTitle}
-                <CaretRightIcon
-                  className="invisible size-3 shrink-0"
-                  weight="bold"
-                />
-              </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" />
-                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex justify-end items-center gap-2">
-          {showStarButton && (
-            <button
-              className={ICON_BTN_CLASS}
-              onClick={handleStarClick}
-              type="button"
-              aria-label={
-                isStarred ? 'Unstar conversation' : 'Star conversation'
-              }
-            >
-              <StarIcon
-                className={classNames('size-5', {
-                  'text-yellow-600': isStarred,
-                  'text-black/90': !isStarred,
-                })}
-                weight={isStarred ? 'duotone' : 'regular'}
-              />
-            </button>
-          )}
-          {showChannelInfo &&
-            (renderChannelActions !== undefined ? (
-              renderChannelActions
-            ) : (
-              <ChannelActionsMenu
-                channel={channel}
-                participant={participant}
-                showDeleteConversation={showDeleteConversation}
-                showBlockParticipant={showBlockParticipant}
-                showReportParticipant={showReportParticipant}
-                onLeaveConversation={onLeaveConversation}
-                onBlockParticipant={onBlockParticipant}
-                onDeleteConversationClick={onDeleteConversationClick}
-                onBlockParticipantClick={onBlockParticipantClick}
-                onReportParticipantClick={onReportParticipantClick}
-                customChannelActions={customChannelActions}
-                triggerClassName={classNames(ICON_BTN_CLASS, 'bg-[#F1F0EE]')}
-              />
-            ))}
-        </div>
-      </div>
-      <div className="px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]">
-        <div className="flex items-center gap-4 min-w-0" data-dd-privacy="mask">
-          {showBackButton && onBack && (
-            <button
-              className={classNames(
-                ICON_BTN_CLASS,
-                'messaging-channel-view-back-button-desktop'
-              )}
-              type="button"
-              onClick={onBack}
-              aria-label="Back to conversations"
-            >
-              <ArrowLeftIcon className="size-5 text-black/90" />
-            </button>
-          )}
-          {onParticipantNameClick ? (
-            <button
-              type="button"
-              onClick={onParticipantNameClick}
-              aria-label={`View details for ${participantName}`}
-              className={classNames(
-                desktopParticipantIdentityClassName,
-                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
-              )}
-            >
-              <Avatar
-                id={participant?.user?.id || channel.id || 'unknown'}
-                name={participantName}
-                image={participantImage}
-                starred={showStarButton && isStarred}
-                dmAgentEnabled={dmAgentEnabled}
-                size={48}
-              />
-              <div className="min-w-0">
-                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
-                  {participantTitle}
-                  <CaretRightIcon className="size-4 shrink-0" weight="bold" />
-                </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" />
-                    <span className="truncate">
-                      {DM_AGENT_HEADER_HELPER_TEXT}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </button>
-          ) : (
-            <div className={desktopParticipantIdentityClassName}>
-              <Avatar
-                id={participant?.user?.id || channel.id || 'unknown'}
-                name={participantName}
-                image={participantImage}
-                starred={showStarButton && isStarred}
-                dmAgentEnabled={dmAgentEnabled}
-                size={48}
-              />
-              <div className="min-w-0">
-                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
-                  {participantTitle}
-                  <CaretRightIcon
-                    className="invisible size-4 shrink-0"
-                    weight="bold"
-                  />
-                </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" />
-                    <span className="truncate">
-                      {DM_AGENT_HEADER_HELPER_TEXT}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          {showStarButton && (
-            <button
-              className={ICON_BTN_CLASS}
-              onClick={handleStarClick}
-              type="button"
-              aria-label={
-                isStarred ? 'Unstar conversation' : 'Star conversation'
-              }
-            >
-              <StarIcon
-                className={classNames('size-6', {
-                  'text-yellow-600': isStarred,
-                  'text-black/90': !isStarred,
-                })}
-                weight={isStarred ? 'duotone' : 'regular'}
-              />
-            </button>
-          )}
-          {showChannelInfo &&
-            (renderChannelActions !== undefined ? (
-              renderChannelActions
-            ) : (
-              <ChannelActionsMenu
-                channel={channel}
-                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>
-  )
-}
-
 /**
  * Inner component that has access to channel context
  */
@@ -392,7 +49,6 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
-  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   renderMessage?: (
@@ -423,7 +79,6 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
-  renderHeaderTitleBadges,
   customChannelActions,
   renderChannelActions,
   renderMessage,
@@ -473,7 +128,7 @@ const ChannelViewInner: React.FC<{
       {renderChannelBanner()}
     </React.Fragment>
   ) : null
-  const redesignedHeader = onParticipantNameClick ? (
+  const channelHeader = (
     <ChannelHeaderRedesign
       className="-mx-[var(--str-chat\_\_spacing-2)] px-[var(--str-chat\_\_spacing-2)] md:-mx-[min(var(--str-chat\_\_spacing-10),4%)] md:px-[min(var(--str-chat\_\_spacing-10),4%)]"
       onBack={onBack}
@@ -493,7 +148,7 @@ const ChannelViewInner: React.FC<{
       renderChannelActions={renderChannelActions}
       onParticipantNameClick={onParticipantNameClick}
     />
-  ) : null
+  )
 
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
@@ -523,48 +178,20 @@ const ChannelViewInner: React.FC<{
         overrides={{
           Message: MessageOverride,
           MessageActions: CustomMessageActions,
-          UnreadMessagesSeparator: () => null,
         }}
       >
         <Window>
-          {/* Custom Channel Header */}
-          {!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>
-              {channelBanner}
-            </>
-          )}
-
           {/* Message List */}
           <div
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
             {/* Stream only renders MessageList.head when there are messages, so
-              empty redesigned channels need the header and banner in normal flow. */}
-            {onParticipantNameClick && !hasVisibleMessages && (
+              empty channels need the header and banner in normal flow. */}
+            {!hasVisibleMessages && (
               <div className="str-chat__list">
                 <div className="str-chat__message-list-scroll">
-                  {redesignedHeader}
+                  {channelHeader}
                   {channelBanner}
                 </div>
               </div>
@@ -572,9 +199,9 @@ const ChannelViewInner: React.FC<{
 
             <MessageList
               head={
-                onParticipantNameClick && hasVisibleMessages ? (
+                hasVisibleMessages ? (
                   <div className="sticky top-0 z-10">
-                    {redesignedHeader}
+                    {channelHeader}
                     {channelBanner}
                   </div>
                 ) : undefined
@@ -636,7 +263,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
-    renderHeaderTitleBadges,
     customChannelActions,
     renderChannelActions,
     renderMessage,
@@ -754,7 +380,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
               dmAgentEnabled={dmAgentEnabled}
               chatbotVotingEnabled={chatbotVotingEnabled}
               renderChannelBanner={renderChannelBanner}
-              renderHeaderTitleBadges={renderHeaderTitleBadges}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
               renderMessage={renderMessage}

package/src/components/MessagingShell/index.tsx

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

package/src/types.ts

@@ -268,8 +268,8 @@ export 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
@@ -399,10 +399,9 @@ export 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()}
@@ -425,7 +424,6 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onMessageSent'
   | 'chatbotVotingEnabled'
   | 'viewerLanguage'
-  | 'renderHeaderTitleBadges'
   | 'renderChannelBanner'
   | 'customChannelActions'
   | 'renderChannelActions'