Problem with "typing" indicator for chatbot/messaging

I’m trying to build a simple (non-AI) chatbot for my app. I’ve managed a couple basics: a “chat-style” window, some basic interactions.

I’m stuck trying to display a “typing” indicator/motion gif for the chatbot’s side so it gives the UX that the chatbot is composing its reply…like imessage typing indicator except I don’t need to know when a user is typing, this is just for UX.

Here’s what I’ve done:

The chatbot is just a repeating group that pulls BotText (Type: Script) from database. The flow is controlled by states/workflows based on Script’s Chapter and Verse, which are just numbers that dictate the order of the flow. It also prompts input from User by un-hiding input buttons in a cell if the Script specifies a “Transition”. The flow works correctly albeit unpolished.

I have the indicator/motion gif, I just can’t get it to display WHEN I want: I want it to appear for about one second before each message from the chatbot. I have a 1500ms pause in the Goto Next Chapter and Goto Next Verse workflows for this purpose. Right now there is a barely-perceptible flash.

I tried custom state toggling like I did the input buttons: a custom state on the repeating group (“Typing”) is toggled yes/no via Goto Next Chapter/Verse workflows but I couldn’t get it to work. Right now there is also a conditional on the “Typing” group that obviously is not accomplishing it either.

Any help is much appreciated! I’ve wrestled with this so long that nothing makes sense anymore!!

Here is an editable page of the app: I think you have to manually reveal the groups in the element tree…

https://bubble.io/page?type=page&name=copy_to_edit&id=flexbot&tab=tabs-1

And the preview link:

https://flexbot.bubbleapps.io/version-test/copy_to_edit

This topic was automatically closed after 70 days. New replies are no longer allowed.