@linktr.ee/messaging-react 3.6.1 → 3.6.2-rc-1783305084

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'
@@ -464,6 +465,34 @@ const ChannelViewInner: React.FC<{
     dmAgentEnabled &&
     currentUserIsAccount === false &&
     participantIsAccount === true
+  const hasVisibleMessages = channel.state.messages.some(
+    (message) => message.type !== 'deleted'
+  )
+  const channelBanner = renderChannelBanner ? (
+    <React.Fragment key="lt-channel-banner">
+      {renderChannelBanner()}
+    </React.Fragment>
+  ) : null
+  const redesignedHeader = 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}
+    />
+  ) : null
 
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
@@ -497,41 +526,58 @@ 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>
+              {channelBanner}
+            </>
+          )}
 
-          {/* Custom Banner/Summary */}
-          {renderChannelBanner ? (
-            <React.Fragment key="lt-channel-banner">
-              {renderChannelBanner()}
-            </React.Fragment>
-          ) : null}
+          {/* Stream only renders MessageList.head when there are messages, so
+              empty redesigned channels need the header and banner in normal flow. */}
+          {onParticipantNameClick && !hasVisibleMessages && (
+            <div className="px-4 @lg:px-6">
+              {redesignedHeader}
+              {channelBanner}
+            </div>
+          )}
 
           {/* Message List */}
           <div
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
+            <MessageList
+              head={
+                onParticipantNameClick && hasVisibleMessages ? (
+                  <div className="sticky top-0 z-10">
+                    {redesignedHeader}
+                    {channelBanner}
+                  </div>
+                ) : undefined
+              }
+              hideDeletedMessages
+              hideNewMessageSeparator={false}
+            />
           </div>
 
           {renderConversationFooter ? (