Message Typing Indicators

Typing Indicators Overview

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 inline in the message list.

The configuration for placing the typing indicator can be found in the TypingIndicatorPlacement enum, which is part of the MessageListConfig struct in the Utils class. By default, the placement is .automatic, which shows the typing indicator inline in the message list and moves it to the navigation bar when the inline slot is not visible.

Here's an example of how to change the configuration, so that the typing indicator is always shown in the navigation bar (represented by the TypingIndicatorPlacement enum value .navigationBar).

let messageListConfig = MessageListConfig(typingIndicatorPlacement: .navigationBar)
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 (for example in the AppDelegate).

Typing Indicator Customizations

You can swap the typing indicator view with your custom implementation when the indicator is placed inline in the message list. In order to do this, you need to implement the makeInlineTypingIndicatorView method in the ViewFactory:

func makeInlineTypingIndicatorView(options: TypingIndicatorViewOptions) -> some View {
    let users = Array(options.channel.currentlyTypingUsersFiltered(currentUserId: options.currentUserId))
    let typingIndicatorString = options.channel.typingIndicatorString(currentUserId: options.currentUserId)
    return TypingIndicatorView(users: users, typingText: typingIndicatorString)
}

The TypingIndicatorViewOptions provides:

• channel – the channel where typing occurs.
• currentUserId – the id of the currently logged in user.

When the typing indicator placement is set to .navigationBar, implement makeSubtitleTypingIndicatorView instead:

func makeSubtitleTypingIndicatorView(options: SubtitleTypingIndicatorViewOptions) -> some View {
    let typingIndicatorString = options.channel.typingIndicatorString(currentUserId: nil)
    return Text(typingIndicatorString)
        .font(.footnote)
        .foregroundColor(.secondary)
}

The SubtitleTypingIndicatorViewOptions provides:

• channel – the channel where typing occurs.

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 prefixes a role to the name of the user.

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 (for example in the AppDelegate).

let customChatUserNamer = CustomChatUserNamer()
let utils = Utils(chatUserNamer: customChatUserNamer)

let streamChat = StreamChat(chatClient: chatClient, utils: utils)