ChatUserName for Typing Indicators (#97)

Author: adolfogarza

CHANGELOG.md

@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### ✅ Added
 - Possibility to view channel info on channel options
 - Date separators in the message list
+- ChatUserNamer to customize user name on typing indicator
 
 ### 🐞 Fixed
 - Bug about link attachments not opening when the URL was missing the scheme

Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift

@@ -47,8 +47,9 @@ extension ChatChannel {
     ///  - currentUserId: the id of the current user.
     /// - Returns: the typing indicator string.
     public func typingIndicatorString(currentUserId: UserId?) -> String {
+        let chatUserNamer = InjectedValues[\.utils].chatUserNamer
         let typingUsers = currentlyTypingUsersFiltered(currentUserId: currentUserId)
-        if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
+        if let user = typingUsers.first(where: { user in user.name != nil }), let name = chatUserNamer.name(forUser: user) {
             return L10n.MessageList.TypingIndicator.users(name, typingUsers.count - 1)
         } else {
             // If we somehow cannot fetch any user name, we simply show that `Someone is typing`

Sources/StreamChatSwiftUI/Utils.swift

@@ -15,6 +15,7 @@ public class Utils {
     public var imageProcessor: ImageProcessor
     public var imageMerger: ImageMerging
     public var channelNamer: ChatChannelNamer
+    public var chatUserNamer: ChatUserNamer
     public var channelAvatarsMerger: ChannelAvatarsMerging
     public var messageTypeResolver: MessageTypeResolving
     public var messageActionsResolver: MessageActionsResolving
@@ -40,6 +41,7 @@ public class Utils {
         messageListConfig: MessageListConfig = MessageListConfig(),
         composerConfig: ComposerConfig = ComposerConfig(),
         channelNamer: @escaping ChatChannelNamer = DefaultChatChannelNamer(),
+        chatUserNamer: ChatUserNamer = DefaultChatUserNamer(),
         shouldSyncChannelControllerOnAppear: @escaping (ChatChannelController) -> Bool = { _ in true }
     ) {
         self.dateFormatter = dateFormatter
@@ -49,6 +51,7 @@ public class Utils {
         self.imageProcessor = imageProcessor
         self.imageMerger = imageMerger
         self.channelNamer = channelNamer
+        self.chatUserNamer = chatUserNamer
         self.channelAvatarsMerger = channelAvatarsMerger
         self.messageTypeResolver = messageTypeResolver
         messageActionsResolver = messageActionResolver

Sources/StreamChatSwiftUI/Utils/Common/ChatUserNamer.swift

@@ -0,0 +1,24 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import Foundation
+import StreamChat
+
+public protocol ChatUserNamer {
+    /// Creates the user name string representation from a ChatUser object.
+    /// - Parameter user: The chat user from which the name will be generated from.
+    /// - Returns: A string value that represents the name of the user.
+    func name(forUser user: ChatUser) -> String?
+}
+
+/// Default implementation of the `ChatUserNamer` protocol.
+public class DefaultChatUserNamer: ChatUserNamer {
+    public init() {
+        // Public init.
+    }
+    
+    public func name(forUser user: ChatUser) -> String? {
+        user.name
+    }
+}

StreamChatSwiftUI.xcodeproj/project.pbxproj

@@ -332,6 +332,8 @@
 		84FF723F2782FB2E006E26C8 /* iMessagePocView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84FF723E2782FB2E006E26C8 /* iMessagePocView.swift */; };
 		91B763A4283EB19900B458A9 /* MoreChannelActionsFullScreenWrappingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91B763A3283EB19800B458A9 /* MoreChannelActionsFullScreenWrappingView.swift */; };
 		91B763A6283EB39600B458A9 /* MoreChannelActionsFullScreenWrappingView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91B763A5283EB39600B458A9 /* MoreChannelActionsFullScreenWrappingView_Tests.swift */; };
+		91B79FD7284E21E0005B6E4F /* ChatUserNamer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91B79FD6284E21E0005B6E4F /* ChatUserNamer.swift */; };
+		91B79FD9284E7E9C005B6E4F /* ChatUserNamer_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91B79FD8284E7E9C005B6E4F /* ChatUserNamer_Tests.swift */; };
 		91CC203A283C3E7F0049A146 /* URLExtensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91CC2039283C3E7F0049A146 /* URLExtensions.swift */; };
 		91CC203C283C4C250049A146 /* URLUtils_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 91CC203B283C4C250049A146 /* URLUtils_Tests.swift */; };
 		C14A465B284665B100EF498E /* SDKIdentifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = C14A465A284665B100EF498E /* SDKIdentifier.swift */; };
@@ -705,6 +707,8 @@
 		84FF723E2782FB2E006E26C8 /* iMessagePocView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = iMessagePocView.swift; sourceTree = "<group>"; };
 		91B763A3283EB19800B458A9 /* MoreChannelActionsFullScreenWrappingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MoreChannelActionsFullScreenWrappingView.swift; sourceTree = "<group>"; };
 		91B763A5283EB39600B458A9 /* MoreChannelActionsFullScreenWrappingView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MoreChannelActionsFullScreenWrappingView_Tests.swift; sourceTree = "<group>"; };
+		91B79FD6284E21E0005B6E4F /* ChatUserNamer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatUserNamer.swift; sourceTree = "<group>"; };
+		91B79FD8284E7E9C005B6E4F /* ChatUserNamer_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatUserNamer_Tests.swift; sourceTree = "<group>"; };
 		91CC2039283C3E7F0049A146 /* URLExtensions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = URLExtensions.swift; sourceTree = "<group>"; };
 		91CC203B283C4C250049A146 /* URLUtils_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = URLUtils_Tests.swift; sourceTree = "<group>"; };
 		C14A465A284665B100EF498E /* SDKIdentifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SDKIdentifier.swift; sourceTree = "<group>"; };
@@ -1094,6 +1098,7 @@
 				8465FD3F2746A95600AF091E /* UIImage+Extensions.swift */,
 				8465FD402746A95600AF091E /* DateUtils.swift */,
 				8465FD412746A95600AF091E /* ChatChannelNamer.swift */,
+				91B79FD6284E21E0005B6E4F /* ChatUserNamer.swift */,
 				8465FD422746A95600AF091E /* InputTextView.swift */,
 				8465FD432746A95600AF091E /* NSLayoutConstraint+Extensions.swift */,
 				8465FD442746A95600AF091E /* ChatMessage+Extensions.swift */,
@@ -1389,6 +1394,7 @@
 				84C94D5D275A3AA9007FE2B9 /* ImageCDN_Tests.swift */,
 				84C94D5F275A45D2007FE2B9 /* ViewFactory_Tests.swift */,
 				84C94D61275A5BB7007FE2B9 /* ChatChannelNamer_Tests.swift */,
+				91B79FD8284E7E9C005B6E4F /* ChatUserNamer_Tests.swift */,
 			);
 			path = Utils;
 			sourceTree = "<group>";
@@ -1731,6 +1737,7 @@
 				8423C33D277C94F30092DCF1 /* TwoStepMentionCommand.swift in Sources */,
 				8465FD802746A95700AF091E /* WebView.swift in Sources */,
 				8465FD942746A95700AF091E /* AddedFileAttachmentsView.swift in Sources */,
+				91B79FD7284E21E0005B6E4F /* ChatUserNamer.swift in Sources */,
 				84F29090276CC1280045472D /* ShareButtonView.swift in Sources */,
 				84AB7B282773D4FE00631A10 /* TypingSuggester.swift in Sources */,
 				91B763A4283EB19900B458A9 /* MoreChannelActionsFullScreenWrappingView.swift in Sources */,
@@ -1791,6 +1798,7 @@
 				84C94D0B27578BF2007FE2B9 /* QueueAwareDelegate.swift in Sources */,
 				846B15F42817E7630017F7A1 /* ChatChannelInfoViewModel_Tests.swift in Sources */,
 				84C94CE427578B92007FE2B9 /* ChatChannelController_Mock.swift in Sources */,
+				91B79FD9284E7E9C005B6E4F /* ChatUserNamer_Tests.swift in Sources */,
 				84C94D58275A1B89007FE2B9 /* MessageTypeResolver_Tests.swift in Sources */,
 				84C94D282757954C007FE2B9 /* VirtualTimer.swift in Sources */,
 				84C94D60275A45D2007FE2B9 /* ViewFactory_Tests.swift in Sources */,

StreamChatSwiftUITests/Tests/Utils/ChatUserNamer_Tests.swift

@@ -0,0 +1,38 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+@testable import StreamChatSwiftUI
+import XCTest
+
+class ChatUserNamer_Tests: XCTestCase {
+    func test_defaultChatUserNamer_whenUserHasName_showsStringName() {
+        // Given
+        let chatUser = ChatUser.mock(id: .unique, name: "Darth Vader")
+        
+        // When
+        let defaultChatUserNamer = DefaultChatUserNamer()
+        let userNameString = defaultChatUserNamer.name(forUser: chatUser)
+        
+        // Then
+        guard let userNameString = userNameString else {
+            XCTFail()
+            return
+        }
+        
+        XCTAssertEqual(userNameString, "Darth Vader")
+    }
+    
+    func test_defaultChatUserNamer_whenUserHasNoName_showsNil() {
+        // Given
+        let chatUser = ChatUser.mock(id: .unique, name: nil)
+        
+        // When
+        let defaultChatUserNamer = DefaultChatUserNamer()
+        let userNameString = defaultChatUserNamer.name(forUser: chatUser)
+        
+        // Then
+        XCTAssertNil(userNameString)
+    }
+}

docusaurus/docs/iOS/swiftui/components/typing-indicators.md

@@ -4,7 +4,9 @@ title: Typing Indicators
 
 ## Typing Indicators Overview
 
-The SwiftUI SDK has support for typing indicators which are shown when other participants in a conversation are typing. 
+The SwiftUI SDK has support for typing indicators which are shown when other participants in a conversation are typing.
+
+### Typing Indicator Placement
 
 There are two places where the typing indicators are shown. The first one is when the user is in the channels list - when someone in a channel is typing, the indicator appears in the corresponding channel list item. 
 The second place, where a typing indicator is shown, is in the chat channel view. Depending on the configuration provided, the typing indicator can be shown either in the navigation bar or above the composer, as an overlay over the message list. 
@@ -20,4 +22,31 @@ let utils = Utils(messageListConfig: messageListConfig)
 let streamChat = StreamChat(chatClient: chatClient, utils: utils)
 ```
 
-This setup is done when the `StreamChat` object is being created, usually at the start of the app (e.g. in the `AppDelegate`).
+This setup is done when the `StreamChat` object is being created, usually at the start of the app (e.g. in the `AppDelegate`).
+
+### Typing Indicator User Name String
+
+The user name string that is displayed on the typing indicator message can also be personalized. By default the displayed string in the typing indicator message is obtained from the `name` property in the `ChatUser` model, however this can be altered by creating a custom implementation of `ChatUserNamer`.
+
+Here's an example of how to achieve this customization, so that the message prepends a role to the name of the user.
+
+```swift
+class CustomChatUserNamer: ChatUserNamer {
+    func name(forUser user: ChatUser) -> String? {
+        guard let name = user.name else {
+            return nil
+        }
+        
+        return "admin: \(name)"
+    }
+}
+```
+
+This setup is done when the `StreamChat` object is being created, usually at the start of the app (e.g. in the `AppDelegate`).
+
+```swift
+let customChatUserNamer = CustomChatUserNamer()
+let utils = Utils(chatUserNamer: customChatUserNamer)
+        
+let streamChat = StreamChat(chatClient: chatClient, utils: utils)
+```