V5: message list attachments redesign

Sources/StreamChatSwiftUI/ChatMessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift

@@ -9,6 +9,7 @@
 public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
     @Injected(\.colors) var colors
     @Injected(\.images) var images
+    @Injected(\.tokens) var tokens
     @Injected(\.utils) var utils
 
     let factory: Factory
@@ -39,38 +40,22 @@
     }
 
     public var body: some View {
-        VStack(spacing: 0) {
-            VStack {
-                if let quotedMessage = message.quotedMessage {
-                    factory.makeChatQuotedMessageView(
-                        options: ChatQuotedMessageViewOptions(
-                            quotedMessage: quotedMessage,
-                            parentMessage: message,
-                            scrolledId: $scrolledId
-                        )
-                    )
-                }
-                VStack(spacing: 2) {
-                    ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
-                        VoiceRecordingView(
-                            handler: handler,
-                            addedVoiceRecording: AddedVoiceRecording(
-                                url: attachment.payload.voiceRecordingURL,
-                                duration: attachment.payload.duration ?? 0,
-                                waveform: attachment.payload.waveformData ?? []
-                            ),
-                            isSentByCurrentUser: message.isSentByCurrentUser
-                        )
-                        .padding(.all, 8)
-                    }
-                }
-            }
-            if !message.text.isEmpty {
-                AttachmentTextView(factory: factory, message: message)
-                    .frame(maxWidth: .infinity)
+        VStack(spacing: tokens.spacingXxxs) {
+            ForEach(message.voiceRecordingAttachments) { attachment in
+                VoiceRecordingView(
+                    handler: handler,
+                    addedVoiceRecording: AddedVoiceRecording(
+                        url: attachment.payload.voiceRecordingURL,
+                        duration: attachment.payload.duration ?? 0,
+                        waveform: attachment.payload.waveformData ?? []
+                    ),
+                    isSentByCurrentUser: message.isSentByCurrentUser
+                )
+                .padding(.all, tokens.spacingXs)
+                .background(MessageAttachmentsBubbleConfiguration.attachmentBackgroundColor(for: message))
+                .roundWithBorder(cornerRadius: tokens.messageBubbleRadiusAttachment)
             }
         }
-        .padding(.all, 2)
         .onReceive(handler.$context, perform: { value in
             guard message.voiceRecordingAttachments.count > 1 else { return }
             if value.state == .playing {
@@ -92,15 +77,6 @@
         .onAppear {
             player.subscribe(handler)
         }
-        .modifier(
-            factory.styles.makeMessageViewModifier(
-                for: MessageModifierInfo(
-                    message: message,
-                    isFirst: isFirst,
-                    cornerRadius: 16
-                )
-            )
-        )
     }
 
     private func index(for attachment: ChatMessageVoiceRecordingAttachment) -> Int {
@@ -124,7 +100,7 @@
     private var showContextDuration: Bool { isActive && handler.context.currentTime > 0 }
 
     private var controlBorderColor: Color? {
-        isSentByCurrentUser ? Color(colors.chatBorderOnChatOutgoing) : nil
+        isSentByCurrentUser ? Color(colors.chatBorderOnChatOutgoing) : Color(colors.chatBorderOnChatIncoming)
     }
 
     var body: some View {
@@ -230,7 +206,7 @@
     private var player: AudioPlaying { utils.audioPlayer }
 
     func audioPlayer(
         _ audioPlayer: AudioPlaying,
         didUpdateContext context: AudioPlaybackContext
     ) {
         self.context = context
@@ -239,7 +215,7 @@
     // MARK: - Shared Playback Helpers
 
     var rateTitle: String {
         switch rate {
         case .half: "x0.5"
         default: "x\(Int(rate.rawValue))"
         }

Sources/StreamChatSwiftUI/ChatMessageList/AttachmentTextView.swift

@@ -0,0 +1,40 @@
+//
+// Copyright © 2026 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import SwiftUI
+
+public struct AttachmentTextView<Factory: ViewFactory>: View {
+    @Injected(\.colors) private var colors
+    @Injected(\.fonts) private var fonts
+    @Injected(\.tokens) private var tokens
+
+    var factory: Factory
+    var message: ChatMessage
+    let injectedBackgroundColor: UIColor?
+
+    public init(factory: Factory = DefaultViewFactory.shared, message: ChatMessage, injectedBackgroundColor: UIColor? = nil) {
+        self.factory = factory
+        self.message = message
+        self.injectedBackgroundColor = injectedBackgroundColor
+    }
+
+    public var body: some View {
+        HStack {
+            factory.makeStreamTextView(options: .init(message: message))
+                .padding(.horizontal, tokens.spacingXxs)
+                .fixedSize(horizontal: false, vertical: true)
+            Spacer()
+        }
+        .background(Color(backgroundColor))
+        .accessibilityIdentifier("MessageTextView")
+    }
+
+    private var backgroundColor: UIColor {
+        if let injectedBackgroundColor {
+            return injectedBackgroundColor
+        }
+        return message.isSentByCurrentUser ? colors.chatBackgroundOutgoing : colors.chatBackgroundIncoming
+    }
+}

Sources/StreamChatSwiftUI/ChatMessageList/FileAttachmentView.swift

@@ -6,6 +6,8 @@
 import SwiftUI
 
 public struct FileAttachmentsContainer<Factory: ViewFactory>: View {
+    @Injected(\.colors) var colors
+    @Injected(\.tokens) var tokens
     var factory: Factory
     var message: ChatMessage
     var width: CGFloat
@@ -27,46 +29,17 @@
     }
 
     public var body: some View {
-        VStack(alignment: message.alignmentInBubble) {
-            if let quotedMessage = message.quotedMessage {
-                factory.makeChatQuotedMessageView(
-                    options: ChatQuotedMessageViewOptions(
-                        quotedMessage: quotedMessage,
-                        parentMessage: message,
-                        scrolledId: $scrolledId
-                    )
+        VStack(spacing: tokens.spacingXxs) {
+            ForEach(message.fileAttachments) { attachment in
+                FileAttachmentView(
+                    attachment: attachment,
+                    width: width,
+                    isFirst: isFirst
                 )
+                .background(MessageAttachmentsBubbleConfiguration.attachmentBackgroundColor(for: message))
+                .roundWithBorder(cornerRadius: tokens.messageBubbleRadiusAttachment)
             }
-
-            VStack(spacing: 0) {
-                VStack(spacing: 4) {
-                    ForEach(message.fileAttachments, id: \.self) { attachment in
-                        FileAttachmentView(
-                            attachment: attachment,
-                            width: width,
-                            isFirst: isFirst
-                        )
-                    }
-                }
-                if !message.text.isEmpty {
-                    HStack {
-                        Text(message.adjustedText)
-                            .foregroundColor(textColor(for: message))
-                            .standardPadding()
-                        Spacer()
-                    }
-                }
-            }
-            .padding(.all, 4)
         }
-        .modifier(
-            factory.styles.makeMessageViewModifier(
-                for: MessageModifierInfo(
-                    message: message,
-                    isFirst: isFirst
-                )
-            )
-        )
         .accessibilityIdentifier("FileAttachmentsContainer")
     }
 }
@@ -76,6 +49,7 @@
     @Injected(\.images) private var images
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
+    @Injected(\.tokens) private var tokens
     @Injected(\.chatClient) private var chatClient
 
     @State private var fullScreenShown = false
@@ -110,10 +84,8 @@
                 DownloadShareAttachmentView(attachment: attachment)
             }
         }
-        .padding(.all, 8)
-        .background(Color(colors.background))
+        .padding(.all, tokens.spacingSm)
         .frame(width: width)
-        .roundWithBorder()
         .withUploadingStateIndicator(for: attachment.uploadingState, url: attachment.assetURL)
         .withDownloadingStateIndicator(for: attachment.downloadingState, url: attachment.assetURL)
         .sheet(isPresented: $fullScreenShown) {
@@ -135,6 +107,7 @@
     @Injected(\.images) private var images
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
+    @Injected(\.tokens) private var tokens
 
     var url: URL
     var title: String
@@ -147,13 +120,13 @@
     }
 
     public var body: some View {
-        HStack {
+        HStack(spacing: tokens.spacingSm) {
             Image(uiImage: previewImage)
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 34, height: 40)
                 .accessibilityHidden(true)
-            VStack(alignment: .leading, spacing: 8) {
+            VStack(alignment: .leading, spacing: tokens.spacingXxs) {
                 Text(title)
                     .font(fonts.bodyBold)
                     .lineLimit(1)
@@ -241,5 +214,5 @@
         UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
     }
 
     func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {}
 }

Sources/StreamChatSwiftUI/ChatMessageList/GiphyAttachmentView.swift

@@ -32,6 +32,7 @@ public struct GiphyAttachmentView<Factory: ViewFactory>: View {
                         scrolledId: $scrolledId
                     )
                 )
+                .padding(tokens.spacingXs)
             }
 
             if visibleOnlyToCurrentUser {