implemented top and bottom typing indicator

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/ChatChannelHeaderViewModifier.swift

@@ -30,12 +30,20 @@ public struct DefaultChatChannelHeader: ToolbarContent {
 
     public var body: some ToolbarContent {
         ToolbarItem(placement: .principal) {
-            VStack {
+            VStack(spacing: 2) {
                 Text(channelNamer(channel, currentUserId) ?? "")
                     .font(fonts.bodyBold)
-                Text(channel.onlineInfoText(currentUserId: currentUserId))
-                    .font(fonts.footnote)
-                    .foregroundColor(Color(colors.textLowEmphasis))
+                if !channel.currentlyTypingUsers.isEmpty
+                    && utils.typingIndicatorPlacement == .navigationBar {
+                    HStack {
+                        TypingIndicatorView()
+                        SubtitleText(text: channel.typingIndicatorString)
+                    }
+                } else {
+                    Text(channel.onlineInfoText(currentUserId: currentUserId))
+                        .font(fonts.footnote)
+                        .foregroundColor(Color(colors.textLowEmphasis))
+                }
             }
         }
 

Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/TypingIndicatorPlacement.swift

@@ -0,0 +1,13 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import SwiftUI
+
+/// Defines the placement of the typing indicator.
+public enum TypingIndicatorPlacement {
+    /// Typing indicator is shown in the navigation bar.
+    case navigationBar
+    /// Typing indicator is shown at the bottom of the message list.
+    case bottomOverlay
+}

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelView.swift

@@ -59,10 +59,13 @@ public struct ChatChannelView<Factory: ViewFactory>: View {
                 .if(viewModel.reactionsShown, transform: { view in
                     view.navigationBarHidden(true)
                 })
-                .if(!viewModel.reactionsShown && !viewModel.isMessageThread) { view in
+                .if(viewModel.channelHeaderType == .regular) { view in
                     view.modifier(factory.makeChannelHeaderViewModifier(for: viewModel.channel))
                 }
-                .if(!viewModel.reactionsShown && viewModel.isMessageThread) { view in
+                .if(viewModel.channelHeaderType == .typingIndicator) { view in
+                    view.modifier(factory.makeChannelHeaderViewModifier(for: viewModel.channel))
+                }
+                .if(viewModel.channelHeaderType == .messageThread) { view in
                     view.modifier(factory.makeMessageThreadHeaderViewModifier())
                 }
 

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -86,9 +86,15 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         }
     }
 
-    @Published public var reactionsShown = false
+    @Published public var reactionsShown = false {
+        didSet {
+            checkHeaderType()
+        }
+    }
+
     @Published public var quotedMessage: ChatMessage?
     @Published public var editedMessage: ChatMessage?
+    @Published public var channelHeaderType: ChannelHeaderType = .regular
 
     public var channel: ChatChannel {
         channelController.channel!
@@ -123,6 +129,8 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             name: UIApplication.didReceiveMemoryWarningNotification,
             object: nil
         )
+        
+        checkHeaderType()
     }
 
     @objc
@@ -178,6 +186,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         channelController: ChatChannelController
     ) {
         messages = channelController.messages
+        checkHeaderType()
     }
 
     public func showReactionOverlay() {
@@ -259,6 +268,21 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             channelController.markRead()
         }
     }
+    
+    private func checkHeaderType() {
+        let type: ChannelHeaderType
+        if !reactionsShown && isMessageThread {
+            type = .messageThread
+        } else if !channel.currentlyTypingUsers.isEmpty {
+            type = .typingIndicator
+        } else {
+            type = .regular
+        }
+        
+        if type != channelHeaderType {
+            channelHeaderType = type
+        }
+    }
 }
 
 extension ChatMessage: Identifiable {
@@ -316,3 +340,13 @@ extension ChatMessage: Identifiable {
         return output
     }
 }
+
+/// The type of header shown in the chat channel screen.
+public enum ChannelHeaderType {
+    /// The regular header showing the channel name and members.
+    case regular
+    /// The header shown in message threads.
+    case messageThread
+    /// The header shown when someone is typing.
+    case typingIndicator
+}

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

@@ -144,6 +144,13 @@ struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
             if let date = currentDateString {
                 DateIndicatorView(date: date)
             }
+                
+            if !channel.currentlyTypingUsers.isEmpty
+                && utils.typingIndicatorPlacement == .bottomOverlay {
+                TypingIndicatorBottomView(
+                    typingIndicatorString: channel.typingIndicatorString
+                )
+            }
         }
         .onReceive(keyboardPublisher) { visible in
             if currentDateString != nil {
@@ -241,3 +248,28 @@ public struct DateIndicatorView: View {
         }
     }
 }
+
+struct TypingIndicatorBottomView: View {
+    @Injected(\.colors) private var colors
+    @Injected(\.fonts) private var fonts
+    
+    var typingIndicatorString: String
+    
+    var body: some View {
+        VStack {
+            Spacer()
+            HStack {
+                TypingIndicatorView()
+                Text(typingIndicatorString)
+                    .font(.footnote)
+                    .foregroundColor(Color(colors.textLowEmphasis))
+                Spacer()
+            }
+            .standardPadding()
+            .background(
+                Color(colors.background)
+                    .opacity(0.9)
+            )
+        }
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift

@@ -27,6 +27,16 @@ extension ChatChannel {
         return L10n.Message.Title.group(memberCount, watcherCount)
     }
 
+    var typingIndicatorString: String {
+        let typingUsers = Array(currentlyTypingUsers)
+        if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
+            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`
+            return L10n.MessageList.TypingIndicator.typingUnknown
+        }
+    }
+    
     private var lastSeenDateFormatter: (Date) -> String? {
         DateUtils.timeAgo
     }

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -82,7 +82,7 @@ public struct ChatChannelListItem: View {
         if channel.isMuted {
             return L10n.Channel.Item.muted
         } else if !channel.currentlyTypingUsers.isEmpty {
-            return typingIndicatorString(for: Array(channel.currentlyTypingUsers))
+            return channel.typingIndicatorString
         } else if let latestMessage = channel.latestMessages.first {
             return "\(latestMessage.author.name ?? latestMessage.author.id): \(latestMessage.textContent ?? latestMessage.text)"
         } else {
@@ -104,15 +104,6 @@ public struct ChatChannelListItem: View {
             return ""
         }
     }
-    
-    private func typingIndicatorString(for typingUsers: [ChatUser]) -> String {
-        if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
-            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`
-            return L10n.MessageList.TypingIndicator.typingUnknown
-        }
-    }
 }
 
 /// View for the avatar used in channels (includes online indicator overlay).

Sources/StreamChatSwiftUI/CommonViews/TypingIndicatorView.swift

@@ -30,7 +30,10 @@ struct TypingIndicatorView: View {
                 )
         }
         .onAppear {
-            isTyping = true
+            /// NOTE: This is needed because of a glitch when the animation is performed in a navigation bar.
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                isTyping = true
+            }
         }
     }
 }

Sources/StreamChatSwiftUI/Utils.swift

@@ -18,6 +18,7 @@ public class Utils {
     public var messageTypeResolver: MessageTypeResolving
     public var messageActionsResolver: MessageActionsResolving
     public var commandsConfig: CommandsConfig
+    public var typingIndicatorPlacement: TypingIndicatorPlacement
 
     public init(
         dateFormatter: DateFormatter = .makeDefault(),
@@ -30,6 +31,7 @@ public class Utils {
         messageTypeResolver: MessageTypeResolving = MessageTypeResolver(),
         messageActionResolver: MessageActionsResolving = MessageActionsResolver(),
         commandsConfig: CommandsConfig = DefaultCommandsConfig(),
+        typingIndicatorPlacement: TypingIndicatorPlacement = .bottomOverlay,
         channelNamer: @escaping ChatChannelNamer = DefaultChatChannelNamer()
     ) {
         self.dateFormatter = dateFormatter
@@ -43,5 +45,6 @@ public class Utils {
         self.messageTypeResolver = messageTypeResolver
         messageActionsResolver = messageActionResolver
         self.commandsConfig = commandsConfig
+        self.typingIndicatorPlacement = typingIndicatorPlacement
     }
 }

StreamChatSwiftUI.xcodeproj/project.pbxproj

@@ -153,6 +153,7 @@
 		8465FDD82746AA2700AF091E /* StreamChatSwiftUI.h in Headers */ = {isa = PBXBuildFile; fileRef = 8465FD602746A95700AF091E /* StreamChatSwiftUI.h */; settings = {ATTRIBUTES = (Public, ); }; };
 		8465FDDD2747A14700AF091E /* CustomComposerAttachmentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8465FDDC2747A14700AF091E /* CustomComposerAttachmentView.swift */; };
 		846608E3278C303800D3D7B3 /* TypingIndicatorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 846608E2278C303800D3D7B3 /* TypingIndicatorView.swift */; };
+		846608E5278C865200D3D7B3 /* TypingIndicatorPlacement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 846608E4278C865200D3D7B3 /* TypingIndicatorPlacement.swift */; };
 		848399EA275FB3E9003075E4 /* SnapshotTesting in Frameworks */ = {isa = PBXBuildFile; productRef = 848399E9275FB3E9003075E4 /* SnapshotTesting */; };
 		848399EC275FB41B003075E4 /* ChatChannelListView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 848399EB275FB41B003075E4 /* ChatChannelListView_Tests.swift */; };
 		848399F227601231003075E4 /* ReactionsOverlayView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 848399F127601231003075E4 /* ReactionsOverlayView_Tests.swift */; };
@@ -455,6 +456,7 @@
 		8465FD692746A95700AF091E /* Appearance.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Appearance.swift; sourceTree = "<group>"; };
 		8465FDDC2747A14700AF091E /* CustomComposerAttachmentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomComposerAttachmentView.swift; sourceTree = "<group>"; };
 		846608E2278C303800D3D7B3 /* TypingIndicatorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypingIndicatorView.swift; sourceTree = "<group>"; };
+		846608E4278C865200D3D7B3 /* TypingIndicatorPlacement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypingIndicatorPlacement.swift; sourceTree = "<group>"; };
 		848399EB275FB41B003075E4 /* ChatChannelListView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatChannelListView_Tests.swift; sourceTree = "<group>"; };
 		848399F127601231003075E4 /* ReactionsOverlayView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReactionsOverlayView_Tests.swift; sourceTree = "<group>"; };
 		849CDD932768E0E1003C7A51 /* MessageActionsResolver.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageActionsResolver.swift; sourceTree = "<group>"; };
@@ -885,6 +887,7 @@
 			children = (
 				8465FD2F2746A95600AF091E /* ChatChannelHeaderViewModifier.swift */,
 				84DEC8E92761089A00172876 /* MessageThreadHeaderViewModifier.swift */,
+				846608E4278C865200D3D7B3 /* TypingIndicatorPlacement.swift */,
 			);
 			path = ChannelHeader;
 			sourceTree = "<group>";
@@ -1460,6 +1463,7 @@
 				8465FD6F2746A95700AF091E /* StreamChat.swift in Sources */,
 				8465FD8F2746A95700AF091E /* AttachmentUploadingStateView.swift in Sources */,
 				8465FD732746A95700AF091E /* ActionItemView.swift in Sources */,
+				846608E5278C865200D3D7B3 /* TypingIndicatorPlacement.swift in Sources */,
 				8465FDA72746A95700AF091E /* KeyboardHandling.swift in Sources */,
 				8465FDD72746A95800AF091E /* Appearance.swift in Sources */,
 				8465FD8A2746A95700AF091E /* DiscardAttachmentButton.swift in Sources */,