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

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 ? (

package/src/components/CustomMessage/index.tsx

@@ -34,9 +34,6 @@ import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import {
-  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
-} from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
 import {
@@ -46,9 +43,6 @@ import {
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
-import StreamAttachmentMessage, {
-  buildOrderedAttachmentSegments,
-} from './StreamAttachmentMessage'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
@@ -119,38 +113,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
     return filtered.length === raw.length ? raw : filtered
   }, [message])
-  const attachmentSegments = useMemo(
-    () => buildOrderedAttachmentSegments(finalAttachments),
-    [finalAttachments]
-  )
   const displayMessage = useMemo(() => {
     const displayText = getMessageDisplayText({ message, viewerLanguage })
     return displayText === message.text
       ? message
       : { ...message, text: displayText }
   }, [message, viewerLanguage])
-  // Route every generic Stream-attachment message (link OG previews and
-  // image/video/audio/pdf/file media) through the toolkit renderer, so
-  // messaging-react owns all shared attachment rendering rather than leaving
-  // media on stream-chat-react's default Attachment. App-specific types
-  // (locked/paid, tips, chatbot) are handled by the branches above.
-  const hasAttachmentSegments = attachmentSegments.length > 0
-  // Only own the message when every attachment maps to a representable segment.
-  // Otherwise a mixed message (e.g. an unsupported shared_location alongside a
-  // photo) would silently drop the unrepresented attachment — those fall
-  // through to the default `Attachment` renderer, which handles all of them.
-  const allAttachmentsRepresented =
-    attachmentSegments.reduce(
-      (total, segment) => total + segment.attachments.length,
-      0
-    ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
-    {
-      endOfGroup,
-      firstOfGroup,
-      groupedByUser,
-    }
-  )
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -211,19 +179,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   )
   const useAttachmentFooterChatbotTag =
     isChatbot && isMine && hasRenderableAttachments
-  // Route generic Stream attachments through the toolkit renderer only when it
-  // can faithfully own the whole message. Quoted replies (attachments are
-  // suppressed there), polls, AI-streamed, and chatbot messages fall through to
-  // the default branch so their Poll / StreamedMessageText / message-text and
-  // chatbot attribution (MessageTag) handling is preserved — the accompanying
-  // message text and attribution must never be dropped.
-  const canRenderAttachmentsInToolkit =
-    hasAttachmentSegments &&
-    allAttachmentsRepresented &&
-    !message.quoted_message &&
-    !poll &&
-    !isAIGenerated &&
-    !isChatbot
 
   return (
     <>
@@ -324,28 +279,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           ) : isTipOnly ? (
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
-          ) : canRenderAttachmentsInToolkit ? (
-            <div className="str-chat__message-bubble-wrapper">
-              <div
-                className="str-chat__message-bubble"
-                style={{
-                  background: 'transparent',
-                  borderRadius: 0,
-                  overflow: 'visible',
-                  padding: 0,
-                }}
-              >
-                <StreamAttachmentMessage
-                  groupPosition={streamAttachmentGroupPosition}
-                  isMyMessage={isMine}
-                  message={{
-                    attachments: finalAttachments,
-                    text: displayMessage.text,
-                  }}
-                />
-                <MessageErrorIcon />
-              </div>
-            </div>
           ) : (
             <div className="str-chat__message-bubble-wrapper">
               <div className="str-chat__message-bubble">