Skip to content

Commit 68ecf4f

Browse files
nuno-vieiranuno-vieira
authored
Introduce MessageViewModel + Show original translated message (#815)
* Introduction of ChatMessageViewModel * Add ChatChannelViewModel and ChatMessageViewModel as environment objects * Extract the Message View Model to a separate file * Fix show original text not working properly * Extract some properties from the view to the MessageViewModel * Fix MessageContainerView_Tests * Fix MessageListView_Tests * Fix MessageListViewAvatars_Tests * Use EnvironmentObject for the main container and EnvironmentValue for the child views * Fix existing unit tests * Add Stream's show original translation button + make it configurable * Add test coverage to show original text feature * Fix reaction overlay tests * Fix message container tests * Refactor code to avoid environment objects in MessageContainerView * Provide view model by default * Add warning about thread-safeness in the singletone store * Example of performing translations from message actions * Revert "Example of performing translations from message actions" This reverts commit afd7e0e. * Fix reactions overlay view not shown correct translated or original text * Open `ChatChannelViewModel.messageActionExecuted` so that it can be observed from channel view model * Rename originalTextTranslationsStore to originalTranslationsStore * Make the LinkDetectionTextView change wheneve the translations store changes * Clear the original translations when opening the channel * Add TODO v5 comments * PR Feedback * Refactor using utils * Reapply "Example of performing translations from message actions" This reverts commit 4584aa7. * Revert "Reapply "Example of performing translations from message actions"" This reverts commit 33520f9. * Update CHANGELOG.md * Fix editing message not working * Revert "Fix MessageListView_Tests" This reverts commit b3b00ef. * Revert "Fix MessageListViewAvatars_Tests" This reverts commit 43df718. * Revert "Fix MessageContainerView_Tests" This reverts commit ab0e511. # Conflicts: # Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift # StreamChatSwiftUITests/Tests/ChatChannel/MessageContainerView_Tests.swift * Revert "Fix existing unit tests" This reverts commit bd695bf. # Conflicts: # Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift * Revert "Fix message container tests" This reverts commit ab8f758. # Conflicts: # StreamChatSwiftUITests/Tests/ChatChannel/MessageContainerView_Tests.swift * Fix message container tests * Allow providing custom view models to reactions view
1 parent 15a0f70 commit 68ecf4f

22 files changed

+476
-116
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
66
### ✅ Added
77
- Add extra data to user display info [#819](https://github.com/GetStream/stream-chat-swiftui/pull/819)
88
- Make message spacing in message list configurable [#830](https://github.com/GetStream/stream-chat-swiftui/pull/830)
9+
- Add `MessageViewModel` to `MessageContainerView` to make it easier to customise presentation logic [#815](https://github.com/GetStream/stream-chat-swiftui/pull/815)
10+
- Add `MessageListConfig.messaeDisplayOptions.showOriginalTranslatedButton` to enable showing original text in translated message [#815](https://github.com/GetStream/stream-chat-swiftui/pull/815)
11+
- Add `Utils.originalTranslationsStore` to keep track of messages that should show the original text [#815](https://github.com/GetStream/stream-chat-swiftui/pull/815)
912
### 🐞 Fixed
1013
- Fix swipe to reply enabled when quoting a message is disabled [#824](https://github.com/GetStream/stream-chat-swiftui/pull/824)
1114
- Fix mark unread action not removed when read events are disabled [#823](https://github.com/GetStream/stream-chat-swiftui/pull/823)

‎DemoAppSwiftUI/AppDelegate.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ class AppDelegate: NSObject, UIApplicationDelegate {
6464

6565
let utils = Utils(
6666
messageListConfig: MessageListConfig(
67+
messageDisplayOptions: .init(showOriginalTranslatedButton: true),
6768
dateIndicatorPlacement: .messageList,
6869
userBlockingEnabled: true,
6970
bouncedMessagesAlertActionsEnabled: true,

‎Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
130130
}
131131

132132
@Published public private(set) var channel: ChatChannel?
133-
133+
134134
public var isMessageThread: Bool {
135135
messageController != nil
136136
}
@@ -158,7 +158,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
158158
channelDataSource.delegate = self
159159
messages = channelDataSource.messages
160160
channel = channelController.channel
161-
161+
162162
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
163163
if let scrollToMessage, let parentMessageId = scrollToMessage.parentMessageId, messageController == nil {
164164
let message = channelController.dataStore.message(id: parentMessageId)
@@ -221,7 +221,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
221221
checkHeaderType()
222222
checkUnreadCount()
223223
}
224-
224+
225225
@objc
226226
private func selectedMessageThread(notification: Notification) {
227227
if let message = notification.userInfo?[MessageRepliesConstants.selectedMessage] as? ChatMessage {
@@ -490,14 +490,15 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
490490
messageActionExecuted(.init(message: message, identifier: "edit"))
491491
}
492492

493-
public func messageActionExecuted(_ messageActionInfo: MessageActionInfo) {
493+
open func messageActionExecuted(_ messageActionInfo: MessageActionInfo) {
494494
utils.messageActionsResolver.resolveMessageAction(
495495
info: messageActionInfo,
496496
viewModel: self
497497
)
498498
}
499499

500500
@objc public func onViewAppear() {
501+
utils.originalTranslationsStore.clear()
501502
setActive()
502503
messages = channelDataSource.messages
503504
firstUnreadMessageId = channelDataSource.firstUnreadMessageId

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import StreamChat
77
import SwiftUI
88

99
public struct MessageContainerView<Factory: ViewFactory>: View {
10+
@StateObject var messageViewModel: MessageViewModel
1011
@Environment(\.channelTranslationLanguage) var translationLanguage
1112

1213
@Injected(\.fonts) private var fonts
@@ -41,10 +42,6 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
4142
utils.messageListConfig.messagePaddings.groupBottom
4243
}
4344

44-
var isSwipeToReplyPossible: Bool {
45-
message.isInteractionEnabled && channel.canQuoteMessage
46-
}
47-
4845
public init(
4946
factory: Factory,
5047
channel: ChatChannel,
@@ -55,7 +52,8 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
5552
isLast: Bool,
5653
scrolledId: Binding<String?>,
5754
quotedMessage: Binding<ChatMessage?>,
58-
onLongPress: @escaping (MessageDisplayInfo) -> Void
55+
onLongPress: @escaping (MessageDisplayInfo) -> Void,
56+
viewModel: MessageViewModel? = nil
5957
) {
6058
self.factory = factory
6159
self.channel = channel
@@ -65,30 +63,36 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
6563
self.isInThread = isInThread
6664
self.isLast = isLast
6765
self.onLongPress = onLongPress
66+
_messageViewModel = .init(
67+
wrappedValue: viewModel ?? MessageViewModel(
68+
message: message,
69+
channel: channel
70+
)
71+
)
6872
_scrolledId = scrolledId
6973
_quotedMessage = quotedMessage
7074
}
7175

7276
public var body: some View {
7377
HStack(alignment: .bottom) {
74-
if message.type == .system || (message.type == .error && message.isBounced == false) {
78+
if messageViewModel.systemMessageShown {
7579
factory.makeSystemMessageView(message: message)
7680
} else {
77-
if message.isRightAligned {
81+
if messageViewModel.isRightAligned {
7882
MessageSpacer(spacerWidth: spacerWidth)
7983
} else {
80-
if messageListConfig.messageDisplayOptions.showAvatars(for: channel) {
84+
if let userDisplayInfo = messageViewModel.userDisplayInfo {
8185
factory.makeMessageAvatarView(
82-
for: message.authorDisplayInfo
86+
for: userDisplayInfo
8387
)
8488
.opacity(showsAllInfo ? 1 : 0)
8589
.offset(y: bottomReactionsShown ? offsetYAvatar : 0)
8690
.animation(nil)
8791
}
8892
}
8993

90-
VStack(alignment: message.isRightAligned ? .trailing : .leading) {
91-
if isMessagePinned {
94+
VStack(alignment: messageViewModel.isRightAligned ? .trailing : .leading) {
95+
if messageViewModel.isPinned {
9296
MessagePinDetailsView(
9397
message: message,
9498
reactionsShown: topReactionsShown
@@ -115,9 +119,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
115119
}
116120
)
117121
: nil
118-
119-
((message.localState == .sendingFailed || message.isBounced) && !message.text.isEmpty) ?
120-
SendFailureIndicator() : nil
122+
messageViewModel.failureIndicatorShown ? SendFailureIndicator() : nil
121123
}
122124
)
123125
.background(
@@ -143,7 +145,7 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
143145
coordinateSpace: .local
144146
)
145147
.updating($offset) { (value, gestureState, _) in
146-
guard isSwipeToReplyPossible else {
148+
guard messageViewModel.isSwipeToQuoteReplyPossible else {
147149
return
148150
}
149151
// Using updating since onEnded is not called if the gesture is canceled.
@@ -235,12 +237,12 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
235237
}
236238
}
237239

238-
if message.textContent(for: translationLanguage) != nil,
239-
let localizedName = translationLanguage?.localizedName {
240-
Text(L10n.Message.translatedTo(localizedName))
241-
.font(fonts.footnote)
242-
.foregroundColor(Color(colors.subtitleText))
240+
if messageViewModel.translatedText != nil {
241+
factory.makeMessageTranslationFooterView(
242+
messageViewModel: messageViewModel
243+
)
243244
}
245+
244246
if showsAllInfo && !message.isDeleted {
245247
if message.isSentByCurrentUser && channel.config.readEventsEnabled {
246248
HStack(spacing: 4) {
@@ -249,15 +251,13 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
249251
message: message
250252
)
251253

252-
if messageListConfig.messageDisplayOptions.showMessageDate {
254+
if messageViewModel.messageDateShown {
253255
factory.makeMessageDateView(for: message)
254256
}
255257
}
256-
} else if !message.isRightAligned
257-
&& channel.memberCount > 2
258-
&& messageListConfig.messageDisplayOptions.showAuthorName {
258+
} else if messageViewModel.authorAndDateShown {
259259
factory.makeMessageAuthorAndDateView(for: message)
260-
} else if messageListConfig.messageDisplayOptions.showMessageDate {
260+
} else if messageViewModel.messageDateShown {
261261
factory.makeMessageDateView(for: message)
262262
}
263263
}
@@ -271,43 +271,43 @@ public struct MessageContainerView<Factory: ViewFactory>: View {
271271
: nil
272272
)
273273

274-
if !message.isRightAligned {
274+
if !messageViewModel.isRightAligned {
275275
MessageSpacer(spacerWidth: spacerWidth)
276276
}
277277
}
278278
}
279279
.padding(
280280
.top,
281-
topReactionsShown && !isMessagePinned ? messageListConfig.messageDisplayOptions.reactionsTopPadding(message) : 0
281+
topReactionsShown && !messageViewModel.isPinned ? messageListConfig.messageDisplayOptions
282+
.reactionsTopPadding(message) : 0
282283
)
283284
.padding(.horizontal, messageListConfig.messagePaddings.horizontal)
284-
.padding(.bottom, showsAllInfo || isMessagePinned ? paddingValue : groupMessageInterItemSpacing)
285+
.padding(.bottom, showsAllInfo || messageViewModel.isPinned ? paddingValue : groupMessageInterItemSpacing)
285286
.padding(.top, isLast ? paddingValue : 0)
286-
.background(isMessagePinned ? Color(colors.pinnedBackground) : nil)
287-
.padding(.bottom, isMessagePinned ? paddingValue / 2 : 0)
287+
.background(messageViewModel.isPinned ? Color(colors.pinnedBackground) : nil)
288+
.padding(.bottom, messageViewModel.isPinned ? paddingValue / 2 : 0)
288289
.transition(
289290
message.isSentByCurrentUser ?
290291
messageListConfig.messageDisplayOptions.currentUserMessageTransition :
291292
messageListConfig.messageDisplayOptions.otherUserMessageTransition
292293
)
293294
.accessibilityElement(children: .contain)
294295
.accessibilityIdentifier("MessageContainerView")
296+
// This is needed for the LinkDetectionTextView to work properly.
297+
// TODO: This should be refactored on v5 so the TextView does not depend directly on the view model.
298+
.environment(\.messageViewModel, messageViewModel)
295299
}
296300

297301
private var maximumHorizontalSwipeDisplacement: CGFloat {
298302
replyThreshold + 30
299303
}
300304

301-
private var isMessagePinned: Bool {
302-
message.pinDetails != nil
303-
}
304-
305305
private var contentWidth: CGFloat {
306306
let padding: CGFloat = messageListConfig.messagePaddings.horizontal
307307
let minimumWidth: CGFloat = 240
308308
let available = max(minimumWidth, (width ?? 0) - spacerWidth) - 2 * padding
309309
let avatarSize: CGFloat = CGSize.messageAvatarSize.width + padding
310-
let totalWidth = message.isRightAligned ? available : available - avatarSize
310+
let totalWidth = messageViewModel.isRightAligned ? available : available - avatarSize
311311
return totalWidth
312312
}
313313

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListConfig.swift‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ public struct MessageDisplayOptions {
148148
public let otherUserMessageTransition: AnyTransition
149149
public let shouldAnimateReactions: Bool
150150
public let reactionsPlacement: ReactionsPlacement
151+
public let showOriginalTranslatedButton: Bool
151152
public let messageLinkDisplayResolver: (ChatMessage) -> [NSAttributedString.Key: Any]
152153
public let spacerWidth: (CGFloat) -> CGFloat
153154
public let reactionsTopPadding: (ChatMessage) -> CGFloat
@@ -167,6 +168,7 @@ public struct MessageDisplayOptions {
167168
otherUserMessageTransition: AnyTransition = .identity,
168169
shouldAnimateReactions: Bool = true,
169170
reactionsPlacement: ReactionsPlacement = .top,
171+
showOriginalTranslatedButton: Bool = false,
170172
messageLinkDisplayResolver: @escaping (ChatMessage) -> [NSAttributedString.Key: Any] = MessageDisplayOptions
171173
.defaultLinkDisplay,
172174
spacerWidth: @escaping (CGFloat) -> CGFloat = MessageDisplayOptions.defaultSpacerWidth,
@@ -190,6 +192,7 @@ public struct MessageDisplayOptions {
190192
self.newMessagesSeparatorSize = newMessagesSeparatorSize
191193
self.dateSeparator = dateSeparator
192194
self.reactionsPlacement = reactionsPlacement
195+
self.showOriginalTranslatedButton = showOriginalTranslatedButton
193196
}
194197

195198
public func showAvatars(for channel: ChatChannel) -> Bool {

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import StreamChat
66
import SwiftUI
77

88
public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
9-
109
@Injected(\.utils) private var utils
1110
@Injected(\.chatClient) private var chatClient
1211
@Injected(\.colors) private var colors
@@ -603,6 +602,10 @@ private struct ChannelTranslationLanguageKey: EnvironmentKey {
603602
static let defaultValue: TranslationLanguage? = nil
604603
}
605604

605+
private struct MessageViewModelKey: EnvironmentKey {
606+
static let defaultValue: MessageViewModel? = nil
607+
}
608+
606609
extension EnvironmentValues {
607610
var channelTranslationLanguage: TranslationLanguage? {
608611
get {
@@ -612,4 +615,13 @@ extension EnvironmentValues {
612615
self[ChannelTranslationLanguageKey.self] = newValue
613616
}
614617
}
618+
619+
var messageViewModel: MessageViewModel? {
620+
get {
621+
self[MessageViewModelKey.self]
622+
}
623+
set {
624+
self[MessageViewModelKey.self] = newValue
625+
}
626+
}
615627
}

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageTranslationFooterView.swift‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//
2+
// Copyright © 2025 Stream.io Inc. All rights reserved.
3+
//
4+
5+
import StreamChat
6+
import SwiftUI
7+
8+
public struct MessageTranslationFooterView: View {
9+
@ObservedObject var messageViewModel: MessageViewModel
10+
11+
@Injected(\.fonts) private var fonts
12+
@Injected(\.colors) private var colors
13+
@Injected(\.utils) private var utils
14+
15+
public init(
16+
messageViewModel: MessageViewModel
17+
) {
18+
self.messageViewModel = messageViewModel
19+
}
20+
21+
public var body: some View {
22+
if utils.messageListConfig.messageDisplayOptions.showOriginalTranslatedButton {
23+
HStack(spacing: 4) {
24+
if !messageViewModel.originalTextShown {
25+
translatedToView
26+
separatorView
27+
}
28+
showOriginalButton
29+
}
30+
} else {
31+
translatedToView
32+
}
33+
}
34+
35+
private var translatedToView: some View {
36+
Text(messageViewModel.translatedLanguageText ?? "")
37+
.font(fonts.footnote)
38+
.foregroundColor(Color(colors.subtitleText))
39+
}
40+
41+
private var separatorView: some View {
42+
Text("•")
43+
.font(fonts.footnote)
44+
.foregroundColor(Color(colors.subtitleText))
45+
}
46+
47+
private var showOriginalButton: some View {
48+
Button(
49+
action: {
50+
if messageViewModel.originalTextShown {
51+
messageViewModel.hideOriginalText()
52+
} else {
53+
messageViewModel.showOriginalText()
54+
}
55+
},
56+
label: {
57+
Text(messageViewModel.originalTranslationButtonText)
58+
.font(fonts.footnote)
59+
.foregroundColor(Color(colors.subtitleText))
60+
}
61+
)
62+
}
63+
}

0 commit comments

Comments
 (0)