chatbot buttons support

[taoari]

• I have searched to see if a similar issue already exists.

Chatbot buttons are pretty much standard. It can restrict the user inputs and control the conversation flow. It would be great if gr.Chatbot() can have chatbot buttons support.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

It would be great that gr.Chatbot() can natively support Buttons. Currently, I developed a workaround for chatbot buttons with the following script:

import gradio as gr

def bot(history, msg):
    bot_msg = """
Hello, how can I help you today? <br /><button type="button" class="btn btn-primary btn-chatbot">Primary</button> \
<button type="button" class="btn btn-primary btn-chatbot">Secondary</button>
"""
    return history + [[msg, bot_msg]], ""

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox(show_label=False,
        placeholder="Enter text and press ENTER", container=False, elem_id="inputTextBox")
    msg.submit(bot, [chatbot, msg], [chatbot, msg])
    
def reload_javascript():
    js = """
// for bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

// for message buttons to work
<script>
function registerMessageButtons() {
	const collection = document.querySelectorAll(".btn-chatbot");
	for (let i = 0; i < collection.length; i++) {
      // NOTE: gradio use .value instead of .innerHTML for gr.Textbox
	  collection[i].onclick=function() {document.getElementById("inputTextBox").getElementsByTagName('textarea')[0].value = collection[i].innerHTML};
	}
}
// need to make sure registerMessageButtons() is executed all the time as new message can come out;
var intervalId = window.setInterval(function(){
  registerMessageButtons();
}, 1000);
</script>
"""
    def template_response(*args, **kwargs):
        res = GradioTemplateResponseOriginal(*args, **kwargs)
        res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))
        res.init_headers()
        return res

    gr.routes.templates.TemplateResponse = template_response

GradioTemplateResponseOriginal = gr.routes.templates.TemplateResponse

reload_javascript()
demo.launch()

It is almost done (click the button and the textbox got updated), but encountered a bug described in #4762 (the Textbox display text and sent text mismatch). Hope to find a solution.

Additional context
Add any other context or screenshots about the feature request here.

[abidlabs]

I agree this would be nice to support -- we just need to figure out the right API for this. cc @dawoodkhan82

[RobinIR]

Would you please let me know when the issue will be fixed? I am also stuck on implementing the chatbot response button.

[freddyaboulton]

Can you try building a custom chatbot component @RobinIR ?

Getting started building custom components: https://www.gradio.app/guides/five-minute-guide
Building a custom chatbot: https://www.gradio.app/guides/multimodal-chatbot-part1

[s-wel]

Hi, it is not so clear for me what the modification of the Chatbot component should do different. As far as I understand, the "in chat" buttons must have the same behavior as a "submit". Where to start?

[liwalayouni]

I see a huge value in implementing a button or a selector radio functionalities in chatbot component.