V5: message list attachments redesign

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListView.swift

@@ -108,7 +108,7 @@ public struct ChatChannelListView<Factory: ViewFactory>: View {
     private func content() -> some View {
         Group {
             if viewModel.loading {
-                viewFactory.makeLoadingView(options: LoadingViewOptions())
+                viewFactory.makeLoadingView(options: LoadingViewOptions(type: .redactedChannelList))
             } else if viewModel.channels.isEmpty {
                 viewFactory.makeNoChannelsView(options: NoChannelsViewOptions())
             } else {

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,41 +40,23 @@
     }
 
     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,
-                            textColor: textColor(for: message),
-                            addedVoiceRecording: AddedVoiceRecording(
-                                url: attachment.payload.voiceRecordingURL,
-                                duration: attachment.payload.duration ?? 0,
-                                waveform: attachment.payload.waveformData ?? []
-                            ),
-                            index: index(for: attachment)
-                        )
-                        .padding(.all, 8)
-                        .background(Color(colors.background8))
-                        .roundWithBorder(cornerRadius: 14)
-                    }
-                }
-            }
-            if !message.text.isEmpty {
-                AttachmentTextView(factory: factory, message: message)
-                    .frame(maxWidth: .infinity)
+        VStack(spacing: 2) {
+            ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
+                VoiceRecordingView(
+                    handler: handler,
+                    textColor: textColor(for: message),
+                    addedVoiceRecording: AddedVoiceRecording(
+                        url: attachment.payload.voiceRecordingURL,
+                        duration: attachment.payload.duration ?? 0,
+                        waveform: attachment.payload.waveformData ?? []
+                    ),
+                    index: index(for: attachment)
+                )
+                .padding(.all, tokens.spacingXs)
+                .background(backgroundColor)
+                .roundWithBorder(cornerRadius: tokens.messageBubbleRadiusAttachment)
             }
         }
-        .padding(.all, 2)
         .onReceive(handler.$context, perform: { value in
             guard message.voiceRecordingAttachments.count > 1 else { return }
             if value.state == .playing {
@@ -95,26 +78,26 @@
         .onAppear {
             player.subscribe(handler)
         }
-        .modifier(
-            factory.styles.makeMessageViewModifier(
-                for: MessageModifierInfo(
-                    message: message,
-                    isFirst: isFirst,
-                    cornerRadius: 16
-                )
-            )
-        )
     }
 
     private func index(for attachment: ChatMessageVoiceRecordingAttachment) -> Int {
         message.voiceRecordingAttachments.firstIndex(of: attachment) ?? 0
     }
+
+    private var backgroundColor: Color {
+        let attachmentCounts = message.attachmentCounts
+        if message.text.isEmpty, attachmentCounts.count == 1, attachmentCounts[.voiceRecording] == 1 {
+            return .clear
+        }
+        return Color(message.isSentByCurrentUser ? colors.chatBackgroundAttachmentOutgoing : colors.chatBackgroundAttachmentIncoming)
+    }
 }
 
 struct VoiceRecordingView: View {
     @Injected(\.utils) var utils
     @Injected(\.colors) var colors
     @Injected(\.images) var images
+    @Injected(\.tokens) var tokens
 
     @State var isPlaying: Bool = false
     @State var loading: Bool = false
@@ -139,7 +122,7 @@
     }
 
     var body: some View {
-        HStack {
+        HStack(spacing: tokens.spacingXs) {
             Button(action: {
                 handlePlayTap()
             }, label: {
@@ -169,7 +152,7 @@
                 .lineLimit(1)
                 .foregroundColor(textColor)
 
-                HStack {
+                HStack(spacing: tokens.spacingXs) {
                     RecordingDurationView(
                         duration: showContextDuration ? handler.context.currentTime : addedVoiceRecording.duration
                     )
@@ -256,7 +239,7 @@
     @Published var context: AudioPlaybackContext = .notLoaded
 
     func audioPlayer(
         _ audioPlayer: AudioPlaying,
         didUpdateContext context: AudioPlaybackContext
     ) {
         self.context = context

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,55 +29,35 @@
     }
 
     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: 4) {
+            ForEach(message.fileAttachments, id: \.self) { attachment in
+                FileAttachmentView(
+                    attachment: attachment,
+                    width: width,
+                    isFirst: isFirst
                 )
+                .background(backgroundColor)
+                .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")
     }
+
+    private var backgroundColor: Color {
+        let attachmentCounts = message.attachmentCounts
+        if message.text.isEmpty, attachmentCounts.count == 1, attachmentCounts[.file] == 1 {
+            return .clear
+        }
+        return Color(message.isSentByCurrentUser ? colors.chatBackgroundAttachmentOutgoing : colors.chatBackgroundAttachmentIncoming)
+    }
 }
 
 public struct FileAttachmentView: View {
     @Injected(\.utils) private var utils
     @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 +92,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 +115,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 +128,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 +222,5 @@
         UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
     }
 
     func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {}
 }

Sources/StreamChatSwiftUI/ChatMessageList/GiphyAttachmentView.swift

@@ -32,6 +32,7 @@
                         scrolledId: $scrolledId
                     )
                 )
+                .padding(tokens.spacingXs)
             }
 
             if visibleOnlyToCurrentUser {
@@ -152,7 +153,7 @@
 private struct AnimatedGifView: UIViewRepresentable {
     let imageContainer: ImageContainer
 
     func makeUIView(context: Context) -> UIImageView {
         let imageView = UIImageView()
         imageView.contentMode = .scaleAspectFit
         if let gifData = imageContainer.data, let image = try? UIImage(gifData: gifData) {
@@ -161,5 +162,5 @@
         return imageView
     }
 
     func updateUIView(_ uiView: UIImageView, context: Context) {}
 }