Implemented typing indicators

Author: martinmitrevski

README.md

@@ -6,6 +6,8 @@
 
 The SwiftUI SDK is built on top of the [StreamChat](https://getstream.io/chat/docs/ios-swift/?language=swift) framework and it's a SwiftUI alternative to the [StreamChatUI](https://getstream.io/chat/docs/sdk/ios/) SDK. It's built completely in SwiftUI, using declarative patterns, that will be familiar to developers working with SwiftUI. The SDK includes an extensive set of performant and customizable UI components which allow you to get started quickly with little to no plumbing required.
 
+The complete documentation and capabilities of the SwiftUI SDK can be found [here](https://getstream.io/chat/docs/sdk/ios/swiftui/).
+
 ## Main Features
 
 - **Channel list:** Browse channels and perform actions on them.

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.currentlyTypingUsersFiltered(currentUserId: currentUserId).isEmpty
+                    && utils.typingIndicatorPlacement == .navigationBar {
+                    HStack {
+                        TypingIndicatorView()
+                        SubtitleText(text: channel.typingIndicatorString(currentUserId: currentUserId))
+                    }
+                } 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,17 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         }
     }
 
-    @Published public var reactionsShown = false
+    @Published public var reactionsShown = false {
+        didSet {
+            // When reactions are shown, the navigation bar is hidden.
+            // Check the header type and trigger an update.
+            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 +131,8 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             name: UIApplication.didReceiveMemoryWarningNotification,
             object: nil
         )
+        
+        checkHeaderType()
     }
 
     @objc
@@ -178,6 +188,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         channelController: ChatChannelController
     ) {
         messages = channelController.messages
+        checkHeaderType()
     }
 
     public func showReactionOverlay() {
@@ -259,6 +270,32 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             channelController.markRead()
         }
     }
+    
+    private func checkHeaderType() {
+        let type: ChannelHeaderType
+        let typingUsers = channel.currentlyTypingUsersFiltered(
+            currentUserId: chatClient.currentUserId
+        )
+        
+        if !reactionsShown && isMessageThread {
+            type = .messageThread
+        } else if !typingUsers.isEmpty {
+            type = .typingIndicator
+        } else {
+            type = .regular
+        }
+        
+        if type != channelHeaderType {
+            channelHeaderType = type
+        } else if type == .typingIndicator {
+            // Toolbar is not updated when new user starts typing.
+            // Therefore, we shortly update the state to regular to trigger an update.
+            channelHeaderType = .regular
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+                self?.channelHeaderType = .typingIndicator
+            }
+        }
+    }
 }
 
 extension ChatMessage: Identifiable {
@@ -316,3 +353,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

@@ -7,6 +7,7 @@ import SwiftUI
 
 struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
     @Injected(\.utils) private var utils
+    @Injected(\.chatClient) private var chatClient
 
     var factory: Factory
     var channel: ChatChannel
@@ -144,6 +145,13 @@ struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
             if let date = currentDateString {
                 DateIndicatorView(date: date)
             }
+                
+            if !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty
+                && utils.typingIndicatorPlacement == .bottomOverlay {
+                TypingIndicatorBottomView(
+                    typingIndicatorString: channel.typingIndicatorString(currentUserId: chatClient.currentUserId)
+                )
+            }
         }
         .onReceive(keyboardPublisher) { visible in
             if currentDateString != nil {
@@ -241,3 +249,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

@@ -6,6 +6,7 @@ import Foundation
 import StreamChat
 
 extension ChatChannel {
+    
     func onlineInfoText(currentUserId: String) -> String {
         if isDirectMessageChannel {
             guard let member = lastActiveMembers
@@ -27,6 +28,22 @@ extension ChatChannel {
         return L10n.Message.Title.group(memberCount, watcherCount)
     }
 
+    func currentlyTypingUsersFiltered(currentUserId: UserId?) -> [ChatUser] {
+        currentlyTypingUsers.filter { user in
+            user.id != currentUserId
+        }
+    }
+    
+    func typingIndicatorString(currentUserId: UserId?) -> String {
+        let typingUsers = currentlyTypingUsersFiltered(currentUserId: currentUserId)
+        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/ChatChannelList.swift

@@ -93,13 +93,20 @@ extension ChatChannel: Identifiable {
     }
 
     public var id: String {
-        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)"
+        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)-\(typingUsersString)"
     }
 
-    public var lastActiveMembersCount: Int {
+    private var lastActiveMembersCount: Int {
         lastActiveMembers.filter { member in
             member.isOnline
         }
         .count
     }
+    
+    private var typingUsersString: String {
+        currentlyTypingUsers.map { user in
+            user.id
+        }
+        .joined(separator: "-")
+    }
 }

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -12,6 +12,7 @@ public struct ChatChannelListItem: View {
     @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
     @Injected(\.images) private var images
+    @Injected(\.chatClient) private var chatClient
 
     var channel: ChatChannel
     var channelName: String
@@ -46,7 +47,15 @@ public struct ChatChannelListItem: View {
                                 Spacer()
                             }
                         } else {
-                            SubtitleText(text: subtitleText)
+                            HStack(spacing: 4) {
+                                if !channel.currentlyTypingUsersFiltered(
+                                    currentUserId: chatClient.currentUserId
+                                ).isEmpty {
+                                    TypingIndicatorView()
+                                }
+                                SubtitleText(text: subtitleText)
+                                Spacer()
+                            }
                         }
                     }
 
@@ -75,6 +84,10 @@ public struct ChatChannelListItem: View {
     private var subtitleText: String {
         if channel.isMuted {
             return L10n.Channel.Item.muted
+        } else if !channel.currentlyTypingUsersFiltered(
+            currentUserId: chatClient.currentUserId
+        ).isEmpty {
+            return channel.typingIndicatorString(currentUserId: chatClient.currentUserId)
         } else if let latestMessage = channel.latestMessages.first {
             return "\(latestMessage.author.name ?? latestMessage.author.id): \(latestMessage.textContent ?? latestMessage.text)"
         } else {

Sources/StreamChatSwiftUI/CommonViews/TypingIndicatorView.swift

@@ -0,0 +1,58 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import SwiftUI
+
+/// View shown when other users are typing.
+struct TypingIndicatorView: View {
+    
+    @State private var isTyping = false
+    
+    private let animationDuration: CGFloat = 0.75
+    
+    var body: some View {
+        HStack(spacing: 4) {
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeOut(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeInOut(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeIn(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+        }
+        .onAppear {
+            /// 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
+            }
+        }
+    }
+}
+
+/// View that represents one circle of the typing indicator view.
+private struct TypingIndicatorCircle: View {
+    
+    private let circleWidth: CGFloat = 4
+    private let circleHeight: CGFloat = 4
+    private let yOffset: CGFloat = 1.5
+    private let minOpacity: CGFloat = 0.1
+    private let maxOpacity: CGFloat = 1.0
+    
+    var isTyping: Bool
+    
+    var body: some View {
+        Circle()
+            .frame(width: circleWidth, height: circleHeight)
+            .opacity(isTyping ? maxOpacity : minOpacity)
+            .offset(y: isTyping ? yOffset : -yOffset)
+    }
+}