Fix message attachments sizes and message content width on iPad

CHANGELOG.md

@@ -23,6 +23,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix giphy previews in the channel list and quote replies [#1333](https://github.com/GetStream/stream-chat-swiftui/pull/1333)
 - Fix black borders on image preview in composer when editing or quoting a message [#1334](https://github.com/GetStream/stream-chat-swiftui/pull/1334)
 - Fix quoted image preview not updating when switching to a different quoted message [#1334](https://github.com/GetStream/stream-chat-swiftui/pull/1334)
+- Use fixed width for attachment previews [#1335](https://github.com/GetStream/stream-chat-swiftui/pull/1335)
+- Fix showing bubble for quoted message and file or image attachment [#1335](https://github.com/GetStream/stream-chat-swiftui/pull/1335)
+- Fix scaling of giphy attachments [#1335](https://github.com/GetStream/stream-chat-swiftui/pull/1335)
 
 ### 🔄 Changed
 - Renamed the `onMessageSent` callback to `willSendMessage` in `MessageComposerViewModel`, `ViewModelsFactory`, and `ComposerViewFactoryOptions` [#1327](https://github.com/GetStream/stream-chat-swiftui/pull/1327)

Sources/StreamChatSwiftUI/ChatMessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift

@@ -56,6 +56,7 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
                 .roundWithBorder(cornerRadius: tokens.messageBubbleRadiusAttachment)
             }
         }
+        .frame(width: width, alignment: message.isRightAligned ? .trailing : .leading)
         .onReceive(handler.$context, perform: { value in
             guard message.voiceRecordingAttachments.count > 1 else { return }
             if value.state == .playing {

Sources/StreamChatSwiftUI/ChatMessageList/AttachmentTextView.swift

@@ -6,35 +6,40 @@ 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?
+    var availableWidth: CGFloat
 
-    public init(factory: Factory = DefaultViewFactory.shared, message: ChatMessage, injectedBackgroundColor: UIColor? = nil) {
+    public init(
+        factory: Factory = DefaultViewFactory.shared,
+        message: ChatMessage,
+        availableWidth: CGFloat
+    ) {
         self.factory = factory
         self.message = message
-        self.injectedBackgroundColor = injectedBackgroundColor
+        self.availableWidth = availableWidth
     }
 
     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")
+        factory.makeStreamTextView(options: .init(message: message))
+            .padding(.horizontal, tokens.spacingXxs)
+            .fixedSize(horizontal: false, vertical: true)
+            .frame(maxWidth: maxTextWidth, alignment: .leading)
+            .accessibilityIdentifier("MessageTextView")
     }
 
-    private var backgroundColor: UIColor {
-        if let injectedBackgroundColor {
-            return injectedBackgroundColor
-        }
-        return message.isSentByCurrentUser ? colors.chatBackgroundOutgoing : colors.chatBackgroundIncoming
+    /// Limit text width for messages with portrait image attachment.
+    private var maxTextWidth: CGFloat {
+        guard message.hasSingleMediaAttachmentWithCaption else { return availableWidth }
+        let mediaAttachments = MediaAttachment.galleryOrdered(from: message)
+        let orientation = MediaGalleryOrientation(mediaAttachments: mediaAttachments)
+        let size = MessageMediaAttachmentsContainerView<Factory>.containerSize(
+            for: mediaAttachments.count,
+            orientation: orientation,
+            maxItemWidth: availableWidth
+        )
+        return size.width
     }
 }

Sources/StreamChatSwiftUI/ChatMessageList/GiphyAttachmentView.swift

@@ -12,6 +12,7 @@
     @Injected(\.fonts) private var fonts
     @Injected(\.images) private var images
     @Injected(\.tokens) private var tokens
+    @Injected(\.utils) private var utils
 
     let factory: Factory
     let message: ChatMessage
@@ -47,7 +48,6 @@
                 .foregroundColor(colors.chatTextOutgoing.toColor)
                 .padding(.all, tokens.spacingSm)
             }
-
             LazyGiphyView(
                 source: message.giphyAttachments[0].previewURL,
                 width: width
@@ -69,6 +69,8 @@
                             execute(action: action)
                         } label: {
                             Text(action.value.firstUppercased)
+                                .lineLimit(1)
+                                .minimumScaleFactor(0.5)
                                 .padding(.horizontal, 4)
                                 .padding(.vertical)
                         }
@@ -83,6 +85,7 @@
                 }
             }
         }
+        .frame(maxWidth: width)
         .modifier(
             factory.styles.makeMessageViewModifier(
                 for: MessageModifierInfo(
@@ -91,7 +94,6 @@
                 )
             )
         )
-        .frame(maxWidth: width)
         .accessibilityIdentifier("GiphyAttachmentView")
     }
 
@@ -127,8 +129,10 @@
             if let imageContainer = state.imageContainer {
                 if imageContainer.type == .gif {
                     AnimatedGifView(imageContainer: imageContainer)
-                } else {
-                    state.image
+                } else if let image = state.image {
+                    image
+                        .resizable()
+                        .scaledToFill()
                 }
             } else if state.error != nil {
                 Color(.secondarySystemBackground)
@@ -142,26 +146,42 @@
         .onDisappear(.cancel)
         .processors([ImageProcessors.Resize(width: width)])
         .priority(.high)
-        .aspectRatio(contentMode: .fit)
-        .frame(width: width)
-        .frame(maxHeight: 250)
+        .frame(width: width, height: width)
         .clipped()
     }
 }
 
 /// Recommended implementation by SwiftyGif for rendering gifs in SwiftUI
 /// Nuke dropped gif support and therefore it needs to be implemented separately.
+/// The UIImageView is wrapped in a container with auto-layout constraints
+/// to ensure contentMode scaling works correctly with SwiftyGif's
+/// CADisplayLink-driven frame updates.
 private struct AnimatedGifView: UIViewRepresentable {
     let imageContainer: ImageContainer
 
-    func makeUIView(context: Context) -> UIImageView {
+    func makeUIView(context: Context) -> UIView {
+        let container = UIView()
+        container.clipsToBounds = true
+
         let imageView = UIImageView()
-        imageView.contentMode = .scaleAspectFit
+        imageView.contentMode = .scaleAspectFill
+        imageView.clipsToBounds = true
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        container.addSubview(imageView)
+
+        NSLayoutConstraint.activate([
+            imageView.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+            imageView.trailingAnchor.constraint(equalTo: container.trailingAnchor),
+            imageView.topAnchor.constraint(equalTo: container.topAnchor),
+            imageView.bottomAnchor.constraint(equalTo: container.bottomAnchor)
+        ])
+
         if let gifData = imageContainer.data, let image = try? UIImage(gifData: gifData) {
             imageView.setGifImage(image)
         }
-        return imageView
+
+        return container
     }
 
-    func updateUIView(_ uiView: UIImageView, context: Context) {}
+    func updateUIView(_ uiView: UIView, context: Context) {}
 }

Sources/StreamChatSwiftUI/ChatMessageList/LinkAttachmentView.swift

@@ -44,6 +44,7 @@ public struct LinkAttachmentContainer<Factory: ViewFactory>: View {
                 isRightAligned: message.isRightAligned,
                 onImageTap: onImageTap
             )
+            .frame(width: width, alignment: message.isRightAligned ? .trailing : .leading)
             .background(MessageAttachmentsBubbleConfiguration.attachmentBackgroundColor(for: message))
             .roundWithBorder()
             .accessibilityIdentifier("LinkAttachmentContainer")

Sources/StreamChatSwiftUI/ChatMessageList/MessageAttachmentsView.swift

@@ -112,7 +112,10 @@ public struct MessageAttachmentsView<Factory: ViewFactory>: View {
             // Text caption
             if !message.text.isEmpty {
                 factory.makeAttachmentTextView(
-                    options: AttachmentTextViewOptions(message: message)
+                    options: AttachmentTextViewOptions(
+                        message: message,
+                        availableWidth: width
+                    )
                 )
             }
         }
@@ -162,14 +165,19 @@ enum MessageAttachmentsBubbleConfiguration {
     }
 }
 
-private extension ChatMessage {
+extension ChatMessage {
     var hasSingleFileOrVoiceAttachmentWithoutCaption: Bool {
-        guard text.isEmpty else { return false }
+        guard text.isEmpty, quotedMessage == nil else { return false }
         return attachmentCounts.count == 1 && (attachmentCounts[.file] == 1 || attachmentCounts[.voiceRecording] == 1)
     }
 
     var hasSingleMediaAttachmentWithoutCaption: Bool {
-        guard text.isEmpty else { return false }
+        guard text.isEmpty, quotedMessage == nil else { return false }
+        return attachmentCounts.count == 1 && (attachmentCounts[.image] == 1 || attachmentCounts[.video] == 1)
+    }
+
+    var hasSingleMediaAttachmentWithCaption: Bool {
+        guard !text.isEmpty, quotedMessage == nil else { return false }
         return attachmentCounts.count == 1 && (attachmentCounts[.image] == 1 || attachmentCounts[.video] == 1)
     }
 }

Sources/StreamChatSwiftUI/ChatMessageList/MessageItemView.swift

@@ -157,9 +157,11 @@ public struct MessageItemView<Factory: ViewFactory>: View {
             return fixedContentWidth
         }
         let minimumWidth: CGFloat = 240
-        let padding = messageListConfig.messagePaddings.horizontal
-        let avatarWithSpacing = AvatarSize.medium + tokens.spacingXs
-        let available = (width ?? 0) - spacerWidth - padding - avatarWithSpacing
+        var padding = messageListConfig.messagePaddings.horizontal
+        if utils.messageListConfig.messageDisplayOptions.showAvatars(for: channel, incoming: !messageViewModel.isRightAligned) {
+            padding += AvatarSize.medium + tokens.spacingXs
+        }
+        let available = (width ?? 0) - spacerWidth - padding
         return max(minimumWidth, available)
     }
 

Sources/StreamChatSwiftUI/ChatMessageList/MessageListConfig.swift

@@ -40,6 +40,7 @@ import SwiftUI
         downloadFileAttachmentsEnabled: Bool = true,
         hidesCommandsOverlayOnMessageListTap: Bool = true,
         hidesAttachmentsPickersOnMessageListTap: Bool = true,
+        attachmentPreviewWidth: CGFloat = 256,
         navigationBarDisplayMode: NavigationBarItem.TitleDisplayMode = .inline,
         supportedMessageActions: @escaping @MainActor (SupportedMessageActionsOptions) -> [MessageAction] = MessageAction.defaultActions(for:)
     ) {
@@ -74,6 +75,7 @@ import SwiftUI
         self.downloadFileAttachmentsEnabled = downloadFileAttachmentsEnabled
         self.hidesCommandsOverlayOnMessageListTap = hidesCommandsOverlayOnMessageListTap
         self.hidesAttachmentsPickersOnMessageListTap = hidesAttachmentsPickersOnMessageListTap
+        self.attachmentPreviewWidth = attachmentPreviewWidth
         self.navigationBarDisplayMode = navigationBarDisplayMode
         self.supportedMessageActions = supportedMessageActions
     }
@@ -113,6 +115,9 @@ import SwiftUI
     /// It is enabled by default.
     public let hidesAttachmentsPickersOnMessageListTap: Bool
 
+    /// The width used for attachment previews in the message list.
+    public let attachmentPreviewWidth: CGFloat
+
     /// A boolean to enable the alert actions for bounced messages.
     ///
     /// By default it is true and the bounced actions are displayed as an alert instead of a context menu.
@@ -280,7 +285,7 @@ public final class MessageDisplayOptions {
     public static var defaultSpacerWidth: @MainActor (CGFloat) -> (CGFloat) {
         { availableWidth in
             if isIPad && availableWidth > 500 {
-                return 2 * availableWidth / 3
+                return (availableWidth * 0.4).rounded()
             } else {
                 @Injected(\.utils) var utils
                 @Injected(\.tokens) var tokens

Sources/StreamChatSwiftUI/ChatMessageList/MessageMediaAttachmentsContainerView.swift

@@ -31,6 +31,17 @@ public enum MediaGalleryOrientation: Sendable {
             self = .square
         }
     }
+
+    init(mediaAttachments: [MediaAttachment]) {
+        if let first = mediaAttachments.first {
+            self = MediaGalleryOrientation(
+                width: first.originalWidth,
+                height: first.originalHeight
+            )
+        } else {
+            self = .landscape
+        }
+    }
 }
 
 /// A container view that displays media (image and video) attachments in a
@@ -65,6 +76,8 @@ public struct MessageMediaAttachmentsContainerView<Factory: ViewFactory>: View {
     private var spacing: CGFloat { tokens.spacingXxxs }
     private var cornerRadius: CGFloat { tokens.messageBubbleRadiusAttachment }
     private let maxDisplayedItems = 4
+    private let orientation: MediaGalleryOrientation
+    private let sources: [MediaAttachment]
 
     public init(
         factory: Factory,
@@ -76,6 +89,8 @@ public struct MessageMediaAttachmentsContainerView<Factory: ViewFactory>: View {
         self.message = message
         self.width = width
         self.isFirst = isFirst
+        self.sources = MediaAttachment.galleryOrdered(from: message)
+        self.orientation = MediaGalleryOrientation(mediaAttachments: sources)
     }
 
     public var body: some View {
@@ -291,36 +306,26 @@ public struct MessageMediaAttachmentsContainerView<Factory: ViewFactory>: View {
         )
     }
 
-    private var orientation: MediaGalleryOrientation {
-        if let first = sources.first {
-            return MediaGalleryOrientation(
-                width: first.originalWidth,
-                height: first.originalHeight
-            )
-        }
-        return .landscape
-    }
-
-    private var sources: [MediaAttachment] {
-        MediaAttachment.galleryOrdered(from: message)
-    }
-
     private func containerSize(for itemCount: Int) -> CGSize {
+        Self.containerSize(for: itemCount, orientation: orientation, maxItemWidth: width)
+    }
+
+    static func containerSize(
+        for itemCount: Int,
+        orientation: MediaGalleryOrientation,
+        maxItemWidth: CGFloat
+    ) -> CGSize {
         guard itemCount > 0 else { return .zero }
-        let maxItemWidth = width
         if itemCount == 1 {
             switch orientation {
             case .landscape:
-                // Width-constrained: 256×192 at max width
                 return CGSize(width: maxItemWidth, height: maxItemWidth * 3.0 / 4.0)
             case .portrait:
-                // Height-constrained: 192×256 at max width
                 return CGSize(width: maxItemWidth * 3.0 / 4.0, height: maxItemWidth)
             case .square:
                 return CGSize(width: maxItemWidth, height: maxItemWidth)
             }
         } else {
-            // Multi-item always uses landscape ratio
             return CGSize(width: maxItemWidth, height: maxItemWidth * 3.0 / 4.0)
         }
     }

Sources/StreamChatSwiftUI/ChatMessageList/MessageView.swift

@@ -52,7 +52,14 @@ public struct MessageView<Factory: ViewFactory>: View {
                     )
                 )
             } else if let poll = message.poll {
-                factory.makePollView(options: PollViewOptions(message: message, poll: poll, isFirst: isFirst))
+                factory.makePollView(
+                    options: PollViewOptions(
+                        message: message,
+                        poll: poll,
+                        isFirst: isFirst,
+                        availableWidth: contentWidth
+                    )
+                )
             } else if messageTypeResolver.hasGiphyAttachment(message: message) {
                 factory.makeGiphyAttachmentView(
                     options: GiphyAttachmentViewOptions(