How to indicate other user is typing with a (...) message?

[jkanalakis]

I came across this request and have a very similar question. I don't have multiple users in a chat, only one. But the same question, how can I show a "..." message bubble to indicate that the other user is typing a response? Right now, I present a full-screen "Thinking..." overlay but it is not very satisfying. I would love to present a "..." that is ideally animated (lottie, gif, etc.) to show that a response is coming. Here's how my app looks today for some context.

Can you offer any advice?

Thank you,

John K.

[f3dm76]

Hey @jkanalakis, unfortunately we do not have time for open source right now. You are most welcome to support this library by submitting a PR adding this functionality

[jkanalakis]

@f3dm76 Thank you, Alisa. I completely understand. I am a big fan of the ExyteChat library and all of the open source work that your team has done.
Best wishes,
John K.

[floriangbh]

Hello,

I think you can use betweenListAndInputViewBuilder modifier to add a bubble, like this :

struct ContentView: View {
    @StateObject var viewModel = ChatViewModel()
    
    var body: some View {
        NavigationStack {
            VStack {
                ChatView(messages: viewModel.messages) { draft in
                    viewModel.send(draft: draft)
                }
                .setAvailableInput(.textOnly)
                .betweenListAndInputViewBuilder {
                    VStack {
                        if viewModel.isLoading {
                            HStack {
                                LottieView(animation: .named("message-typing"))
                                    .looping()
                                    .frame(width: 120)
                                Spacer()
                            }
                            .frame(height: 120)
                        } else {
                            EmptyView()
                        }
                    }
                }
            }
        }
    }
}

Not perfect, but it do the job !

[jkanalakis]

@floriangbh Thank you for the great idea! I ended up just posting an empty message with "..." and then removing it when the response arrives. I love your solution and am going to give it a try today!
John K.