Show translated text for participant messages (#776)

Author: laevandus

CHANGELOG.md

@@ -7,11 +7,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Feature rich markdown rendering with AttributedString [#757](https://github.com/GetStream/stream-chat-swiftui/pull/757)
 - Add `Fonts.title2` for supporting markdown headers [#757](https://github.com/GetStream/stream-chat-swiftui/pull/757)
 - Add `resignsFirstResponderOnScrollDown` to `MessageListConfig` [#769](https://github.com/GetStream/stream-chat-swiftui/pull/769)
+- Show auto-translated message translations ([learn more](https://getstream.io/chat/docs/ios-swift/translation/#enabling-automatic-translation)) [#776](https://github.com/GetStream/stream-chat-swiftui/pull/776)
 ### 🔄 Changed
 - Uploading a HEIC photo from the library is now converted to JPEG for better compatibility [#767](https://github.com/GetStream/stream-chat-swiftui/pull/767)
 - Customizing the message avatar view is reflected in all views that use it [#772](https://github.com/GetStream/stream-chat-swiftui/pull/772)
 - Made the sendMessage method in MessageComposerViewModel open [#779](https://github.com/GetStream/stream-chat-swiftui/pull/779)
 - Move `ChangeBarsVisibilityModifier` into `ViewFactory` for better customization [#774](https://github.com/GetStream/stream-chat-swiftui/pull/774)
+### 🎭 New Localizations
+- `message.translatedTo` [#776](https://github.com/GetStream/stream-chat-swiftui/pull/776)
 
 # [4.73.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.73.0)
 _February 28, 2025_

DemoAppSwiftUI/AppConfiguration/AppConfiguration.swift

@@ -0,0 +1,14 @@
+//
+// Copyright © 2025 Stream.io Inc. All rights reserved.
+//
+
+import Foundation
+import StreamChat
+import StreamChatSwiftUI
+
+final class AppConfiguration {
+    static let `default` = AppConfiguration()
+    
+    /// The translation language to set on connect.
+    var translationLanguage: TranslationLanguage?
+}

DemoAppSwiftUI/AppConfiguration/AppConfigurationTranslationView.swift

@@ -0,0 +1,47 @@
+//
+// Copyright © 2025 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import SwiftUI
+
+struct AppConfigurationTranslationView: View {
+    @Environment(\.dismiss) var dismiss
+    
+    var selection: Binding<TranslationLanguage?> = Binding {
+        AppConfiguration.default.translationLanguage
+    } set: { newValue in
+        AppConfiguration.default.translationLanguage = newValue
+    }
+    
+    var body: some View {
+        List {
+            ForEach(TranslationLanguage.all, id: \.languageCode) { language in
+                Button(action: {
+                    selection.wrappedValue = language
+                    dismiss()
+                }) {
+                    HStack {
+                        Text(language.languageCode)
+                        Spacer()
+                        if selection.wrappedValue == language {
+                            Image(systemName: "checkmark")
+                        }
+                    }
+                }
+                .foregroundStyle(.primary)
+            }
+            .navigationTitle("Translation Language")
+        }
+    }
+}
+
+extension TranslationLanguage {
+    static let all = allCases.sorted(by: { $0.languageCode < $1.languageCode })
+}
+
+#Preview {
+    NavigationView {
+        AppConfigurationTranslationView()
+    }
+}

DemoAppSwiftUI/AppConfiguration/AppConfigurationView.swift

@@ -0,0 +1,26 @@
+//
+// Copyright © 2025 Stream.io Inc. All rights reserved.
+//
+
+import Combine
+import SwiftUI
+
+struct AppConfigurationView: View {
+    var body: some View {
+        NavigationView {
+            List {
+                Section("Connect User Configuration") {
+                    NavigationLink("Translation") {
+                        AppConfigurationTranslationView()
+                    }
+                }
+            }
+            .navigationBarTitleDisplayMode(.inline)
+            .navigationTitle("App Configuration")
+        }
+    }
+}
+
+#Preview {
+    AppConfigurationView()
+}

DemoAppSwiftUI/AppDelegate.swift

@@ -81,7 +81,8 @@ class AppDelegate: NSObject, UIApplicationDelegate {
                 userInfo: .init(
                     id: credentials.id,
                     name: credentials.name,
-                    imageURL: credentials.avatarURL
+                    imageURL: credentials.avatarURL,
+                    language: AppConfiguration.default.translationLanguage
                 ),
                 token: token
             )

DemoAppSwiftUI/LoginView.swift

@@ -20,6 +20,11 @@ struct LoginView: View {
             Text("Welcome to Stream Chat")
                 .font(.title)
                 .padding(.all, 8)
+            
+            Button("Configuration") {
+                viewModel.showsConfiguration = true
+            }
+            .buttonStyle(.borderedProminent)
 
             Text("Select a user to try the iOS SDK:")
                 .font(.body)
@@ -42,6 +47,9 @@ struct LoginView: View {
         .overlay(
             viewModel.loading ? ProgressView() : nil
         )
+        .sheet(isPresented: $viewModel.showsConfiguration) {
+            AppConfigurationView()
+        }
     }
 }
 

DemoAppSwiftUI/LoginViewModel.swift

@@ -10,6 +10,7 @@ class LoginViewModel: ObservableObject {
 
     @Published var demoUsers = UserCredentials.builtInUsers
     @Published var loading = false
+    @Published var showsConfiguration = false
 
     @Injected(\.chatClient) var chatClient
 
@@ -28,7 +29,12 @@ class LoginViewModel: ObservableObject {
         LogConfig.level = .warning
 
         chatClient.connectUser(
-            userInfo: .init(id: credentials.id, name: credentials.name, imageURL: credentials.avatarURL),
+            userInfo: .init(
+                id: credentials.id,
+                name: credentials.name,
+                imageURL: credentials.avatarURL,
+                language: AppConfiguration.default.translationLanguage
+            ),
             token: token
         ) { [weak self] error in
             if let error = error {

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/PinnedMessagesView.swift

@@ -101,6 +101,6 @@ struct PinnedMessageView<Factory: ViewFactory>: View {
             return "📊 \(L10n.Channel.Item.poll)"
         }
         let messageFormatter = InjectedValues[\.utils].messagePreviewFormatter
-        return messageFormatter.formatAttachmentContent(for: message) ?? message.adjustedText
+        return messageFormatter.formatAttachmentContent(for: message, in: channel) ?? message.adjustedText
     }
 }

Sources/StreamChatSwiftUI/ChatChannel/Composer/MessageComposerView.swift

@@ -300,6 +300,7 @@ public struct ComposerInputView<Factory: ViewFactory>: View, KeyboardReadable {
                     isInComposer: true,
                     scrolledId: .constant(nil)
                 )
+                .environment(\.channelTranslationLanguage, viewModel.channelController.channel?.membership?.language)
             }
 
             if !addedAssets.isEmpty {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -7,7 +7,8 @@ import StreamChat
 import SwiftUI
 
 public struct MessageContainerView<Factory: ViewFactory>: View {
-
+    @Environment(\.channelTranslationLanguage) var translationLanguage
+    
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
     @Injected(\.images) private var images
@@ -225,6 +226,12 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
                         }
                     }
 
+                    if message.textContent(for: translationLanguage) != nil,
+                       let localizedName = translationLanguage?.localizedName {
+                        Text(L10n.Message.translatedTo(localizedName))
+                            .font(fonts.footnote)
+                            .foregroundColor(Color(colors.subtitleText))
+                    }
                     if showsAllInfo && !message.isDeleted {
                         if message.isSentByCurrentUser && channel.config.readEventsEnabled {
                             HStack(spacing: 4) {