Make user's message in a gr.Chatbot appear immediately

[aliabid94]

• the user's message should appear immediately
• in addition, loading bubbles should appear on the bot side

[abidlabs]

I don't know if this is actually possible given that the user message could contain markdown and so does need to be processed in the backend. Perhaps as discussed @aliabid94, we could rewrite the chatbot function itself to yield the user message first, and then return the full response

[abidlabs]

@usuyama brought up another good suggestion here: https://github.com/gradio-app/gradio/discussions/3129: the ability add a single message from the bot/user side. I would have expected something like this to work:

gr.Chatbot([("Hello", None)])

or

gr.Chatbot([(None, "Hello")])

But neither of them do. cc @dawoodkhan82

[pngwn]

#3165 didn't close this.

[abidlabs]

Just to clarify, it didn't close the first bullet point:

the user's message should appear immediately

But the other two things mentioned here are closed, right?

[Yelrose]

@usuyama brought up another good suggestion here: #3129: the ability add a single message from the bot/user side. I would have expected something like this to work:

gr.Chatbot([("Hello", None)])

or

gr.Chatbot([(None, "Hello")])

But neither of them do. cc @dawoodkhan82

Is there any quick way to do this? I have tried to inheritance Chatbot and rewrite the post-processing function to support these. But it doesn't work. 😅

[abidlabs]

It should now work as of the latest version of gradio (gradio==3.19.1) @Yelrose!

[abidlabs]

I think making a user's message appear immediately should not be a new feature of the chatbot, but rather a result of a how a user sets up the chatbot component. Specifically, a user should use the _js parameter of the event trigger to pass the user message into the chatbot to have it immediately render. Then, the function should run to get the bot's response and that should then appear underneath the user's response. Note that this will mean that the user's response cannot contain markdown (as their message does not get rendered by the backend) but that should almost always be fine.

I tried to put together a simple example but ran into issues with my knowledge of JS. @dawoodkhan82 do you wanna see if this is doable with Gradio? If so, perhaps we can update our demo / guide with these instructions. If it's not doable, then we can work on making it possible so that we have a really nice UX with the chatbot.

[dawoodkhan82]

@abidlabs I think it should actually be handled by the chatbot. I'll take a look into it. Shouldn't be too hard to implement.

[abidlabs]

Hmm but if we think very generally, a chatbot function might not even append a user's message to the state in the first place. I really don't think we should assume anything about the chatbot function when designing the component.

[abidlabs]

This is now doable via PR #3430 thanks guys!

[aetherwu]

Can I write a clickable () in message so that a user can click certain text (with underline) to call a function defined in Gradio script? Just to say it might be conventions for some user experience.

[dawoodkhan82]

@aetherwu not currently possible now, but we are planning on adding a button alongside chatbot messages, that you can use to call functions.