Show translated text for participant messages #776

laevandus · 2025-03-07T10:28:16Z

🔗 Issue Link

🎯 Goal

Support showing auto-translated text

🛠 Implementation

Note

Added debug view support since otherwise it is hard to manually test this.

When auto-translation is enabled, we get back translated text with the message payload. ChatMessage.text is always the original text.

Added the same "Translated to XYZ" label to messages which are translated (like UIKit). Use channel's membership for accessing the preferred language (like UIKit).

🧪 Testing

Launch the app, A uses app configuration and chooses a language, let's say es
Launch the app on a second simulator, B uses app configuration and chooses a language, let's say en
A creates a channel with B
A sends message Hola, B sees it as Hello
B sends Hello, A sees it as Hola

🎨 Changes

translation_demo.mov

☑️ Checklist

I have signed the Stream CLA (required)
Changelog is updated with client-facing changes
New code is covered by unit tests
Affected documentation updated (docusaurus, tutorial, CMS (task created)

laevandus · 2025-03-07T10:34:11Z

Sources/StreamChatSwiftUI/Utils/MessageCachingUtils.swift

+    var channelTranslationLanguages = [ChannelId: TranslationLanguage?]()
+
+    // ChatMessage.adjustedText is used everywhere, but there is no easy way to get the
+    // language used in the channel. Therefore, it is cached here.
+    func translationLanguage(for cid: ChannelId) -> TranslationLanguage? {
+        if let language = channelTranslationLanguages[cid] {
+            return language
+        }
+        let language = InjectedValues[\.chatClient].channelController(for: cid).channel?.membership?.language
+        channelTranslationLanguages[cid] = language
+        return language
+    }


Struggled to think about a good solution here. UIKit's implementation uses channel.membership.language for figuring out which language to show if there are translations. ChatMessage.adjustText has no direct access to get that information.
I am not really happy about how this looks like at the moment, but can't figure out a better way. Ideally, ChatMessage would have some sort of property which tells the language to use for translations. That would be must cleaner, but would involve adding a new property to ChatMessage. When ChatMessage is created, we could access channel's membership.language and read the state from there. In summary, we would add ChatMessage.translationLanguage or something similar. WDYT?

We can have a discussion in the next meeting on Monday if needed.

Adding a property to the message would simplify things, but then all SDKs would need to add it, so it kind of becomes complex.
The solution is also a bit hacky. Maybe we can simplify it by setting an active channel when the chat view appears in this caching utils, and clean it up when the channel is dismissed?

I'll give it another try. This also needs to work in the channel list so I need to make sure it works there as well. I'll see if it would be better to try to explicitly handle it and not doing it in the adjustedText method where is no channel information available.

I think I found a better way. It sure got too hacky with trying to do this in the adjustedText.

Stream-SDK-Bot · 2025-03-07T10:36:40Z

SDK Size

`title`	`develop`	`branch`	`diff`	`status`
StreamChatSwiftUI	8.16 MB	8.18 MB	+18 KB	🟢

… preview message formatter to use channels translation language

laevandus · 2025-03-10T12:25:59Z

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

+private struct ChannelTranslationLanguageKey: EnvironmentKey {
+    static let defaultValue: TranslationLanguage? = nil
+}
+
+extension EnvironmentValues {
+    var channelTranslationLanguage: TranslationLanguage? {
+        get {
+            self[ChannelTranslationLanguageKey.self]
+        }
+        set {
+            self[ChannelTranslationLanguageKey.self] = newValue
+        }
+    }
+}


Channel data is not available in the message's text view. Interfaces are public so no easy way to forward this information with function arguments. Next best way is to use environment key for this.

Note: MessageContainerView is the last one to have access to channel.

V5 is a good option to improve this.

laevandus · 2025-03-10T12:26:41Z

Sources/StreamChatSwiftUI/Utils/Common/ChatMessage+Extensions.swift

+    func textContent(for translationLanguage: TranslationLanguage?) -> String? {
+        guard let translationLanguage else { return nil }
+        guard !isSentByCurrentUser, !isDeleted else { return nil }
+        return translatedText(for: translationLanguage)
+    }


Convenience since similar logic is used in multiple places

martinmitrevski

this also works, just check that it won't crash under circumstances where customers might replace views where we setup the environment.

martinmitrevski · 2025-03-10T20:06:04Z

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)


Customers might have their own message composer view implementation. Just to make sure, if we access it @Environment(\.channelTranslationLanguage) var translationLanguage, but this line is not called, it won't crash, because it's optional, right?

Yes, then it uses the the default value for the key which is nil

martinmitrevski · 2025-03-10T20:07:01Z

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

+private struct ChannelTranslationLanguageKey: EnvironmentKey {
+    static let defaultValue: TranslationLanguage? = nil
+}
+
+extension EnvironmentValues {
+    var channelTranslationLanguage: TranslationLanguage? {
+        get {
+            self[ChannelTranslationLanguageKey.self]
+        }
+        set {
+            self[ChannelTranslationLanguageKey.self] = newValue
+        }
+    }
+}


V5 is a good option to improve this.

nuno-vieira

LGTM! ✅

# Conflicts: # CHANGELOG.md

sonarqubecloud · 2025-03-12T14:37:05Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
95.3% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

laevandus added 🤞 Ready for QA ✅ Feature An issue or PR related to a feature labels Mar 7, 2025

laevandus requested a review from a team as a code owner March 7, 2025 10:28

laevandus force-pushed the feature/auto-translation branch from cb445f7 to 0ca671b Compare March 7, 2025 10:29

laevandus commented Mar 7, 2025

View reviewed changes

laevandus force-pushed the feature/auto-translation branch from 0ca671b to 3183a80 Compare March 7, 2025 10:35

Show translated text for participant messages

b0dbffe

laevandus force-pushed the feature/auto-translation branch from 3183a80 to b0dbffe Compare March 7, 2025 10:38

laevandus marked this pull request as draft March 10, 2025 09:29

Use environment key for passing down the translation language. Update…

b25cc61

… preview message formatter to use channels translation language

laevandus commented Mar 10, 2025

View reviewed changes

laevandus marked this pull request as ready for review March 10, 2025 12:27

Translated text for quoted messages

f882035

laevandus force-pushed the feature/auto-translation branch from 1b07ceb to f882035 Compare March 10, 2025 12:42

Show translated text in the composer

926cfaf

martinmitrevski approved these changes Mar 10, 2025

View reviewed changes

nuno-vieira approved these changes Mar 11, 2025

View reviewed changes

Merge branch 'develop' into feature/auto-translation

af2af77

# Conflicts: # CHANGELOG.md

testableapple added 🧪 QAing and removed 🤞 Ready for QA labels Mar 12, 2025

Always show the translated text

89868fa

testableapple added ✅ QAed and removed 🧪 QAing labels Mar 12, 2025

testableapple approved these changes Mar 12, 2025

View reviewed changes

Merge branch 'develop' into feature/auto-translation

5b5722e

laevandus enabled auto-merge (squash) March 12, 2025 13:52

laevandus merged commit 9e49e0f into develop Mar 13, 2025
12 checks passed

laevandus deleted the feature/auto-translation branch March 13, 2025 06:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show translated text for participant messages #776

Show translated text for participant messages #776

laevandus commented Mar 7, 2025 •

edited

Loading

laevandus Mar 7, 2025

laevandus Mar 7, 2025

martinmitrevski Mar 7, 2025

laevandus Mar 10, 2025 •

edited

Loading

laevandus Mar 10, 2025

Stream-SDK-Bot commented Mar 7, 2025 •

edited

Loading

laevandus Mar 10, 2025

martinmitrevski Mar 10, 2025

laevandus Mar 10, 2025

martinmitrevski left a comment

martinmitrevski Mar 10, 2025

laevandus Mar 12, 2025

martinmitrevski Mar 10, 2025

nuno-vieira left a comment

sonarqubecloud bot commented Mar 12, 2025

Show translated text for participant messages #776

Show translated text for participant messages #776

Conversation

laevandus commented Mar 7, 2025 • edited Loading

🔗 Issue Link

🎯 Goal

🛠 Implementation

🧪 Testing

🎨 Changes

☑️ Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laevandus Mar 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Stream-SDK-Bot commented Mar 7, 2025 • edited Loading

SDK Size

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinmitrevski left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nuno-vieira left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Mar 12, 2025

Quality Gate passed

laevandus commented Mar 7, 2025 •

edited

Loading

laevandus Mar 10, 2025 •

edited

Loading

Stream-SDK-Bot commented Mar 7, 2025 •

edited

Loading