Upvote/Downvote Functionality Issue

[yvrjsharma]

Describe the bug

• Expected Behavior:

When a user upvotes or downvotes a chat message, the functionality should reflect the selected vote, visually indicating that it has been clicked, and subsequently disable further clicks on the same button. Additionally, the other vote button should disappear to prevent multiple votes on the same message.

• Current Behavior:

Currently, you can click on the upvote or downvote button multiple times. While the color of the button changes to indicate that it has been clicked, it remains clickable, and the other vote button doesn't disappear as expected.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

1. Run the code provided below.
2. Send a chat message and await the bot's reply.
3. Click the upvote or downvote button repeatedly.

import gradio as gr
import random

def vote(tmp, index_state, data: gr.LikeData):
    value_new = data.value
    index_new = data.index
    if len(index_state) == 0 :
        index_state.append(index_new)
    else:
        if index_new in index_state:
            return "Your feedback is already saved", index_state
        else:
            index_state.append(index_new)
    return str(data.value) + ";" + str(data.index)+";"+ str(data.liked)+";"+str(index_state), index_state

with gr.Blocks() as demo:
    tmp = gr.Textbox(visible=True, value="")
    chatbot = gr.Chatbot(layout='panel')
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])
    index_state = gr.State(value=[])
    
    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        chat_history.append((message, bot_message))
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
    chatbot.like(vote, [tmp, index_state], [tmp, index_state])

demo.launch()

Screenshot

The below video explains what is currently happening -

gradio.chatbot.mp4

The below video explains how ChatGpt handles such a situation -

chatgpt.mp4

Logs

No response

System Info

Gradio Version: 3.47.1

Severity

I can work around it

[hannahblair]

Ah, interesting. I don't think any logic has been in place to ensure that you can only upvote or downvote. It makes sense to only allow one or the other!

[yvrjsharma]

Also, it would be ideal if only the chosen option remained visible throughout the chat session. Thanks @hannahblair.

[abidlabs]

the functionality should reflect the selected vote, visually indicating that it has been clicked, and subsequently disable further clicks on the same button. Additionally, the other vote button should disappear to prevent multiple votes on the same message.

Do we really want to make this change? Wouldn't it be better to let a user define the appropriate behavior in their own function? For example, if they want to disregards subsequent likes/dislikes of the same message, they can do that by handling this in their function. Or if they want to keep the final vote of a user, they can do that.

This change would prevent a user from changing their mind -- perhaps they meant to click button but accidentally clicked on the other one.

Also as an side, I don't think we should keep changing the Chatbot UI unless there's a good reason to do so -- otherwise, it will be hard for users to build consistent downstream applications.

[yvrjsharma]

This change would prevent a user from changing their mind -- perhaps they meant to click button but accidentally clicked on the other one.

This makes sense to me too.

However, I would kindly like to suggest one minor enhancement. It would be beneficial to ensure that when a user changes their vote from Upvote to Downvote (or vice versa) on a chat message, the previously selected voting button is automatically unchecked. Presently, both buttons remain checked if the user has interacted with both of them. While it is possible to address this issue programmatically, as demonstrated in my example, the current user interface behavior might potentially confuse users.

chatbot.voting.2.mp4

Also as an side, I don't think we should keep changing the Chatbot UI unless there's a good reason to do so -- otherwise, it will be hard for users to build consistent downstream applications.

Thanks for sharing your concern. I find it valid too, consistency is important for users building complex applications downstream (for example, text gen web ui). Therefore, I won't insist too strongly on the enhancement, as I mentioned in the ticket that this is something we can address with workarounds.

[abidlabs]

However, I would kindly like to suggest one minor enhancement. It would be beneficial to ensure that when a user changes their vote from Upvote to Downvote (or vice versa) on a chat message, the previously selected voting button is automatically unchecked. Presently, both buttons remain checked if the user has interacted with both of them

This makes sense to me!

[surajspass]

Has this feature been removed in the latest version 4.0.2?

[freddyaboulton]

It shouldn't have been. Can you please share a small code snippet where it's not working as intended? Thank you!

[surajspass]

import gradio as gr
import random

def vote(tmp, index_state, data: gr.LikeData):
    value_new = data.value
    index_new = data.index
    if len(index_state) == 0 :
        index_state.append(index_new)
    else:
        if index_new in index_state:
            return "Your feedback is already saved", index_state
        else:
            index_state.append(index_new)
    return str(data.value) + ";" + str(data.index)+";"+ str(data.liked)+";"+str(index_state), index_state

with gr.Blocks() as demo:
    tmp = gr.Textbox(visible=True, value="")
    chatbot = gr.Chatbot(layout='panel')
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])
    index_state = gr.State(value=[])
    
    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        chat_history.append((message, bot_message))
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
    chatbot.like(vote, [tmp, index_state], [tmp, index_state])

demo.launch()

Would be great to have this built in the ChatInterface

[surajspass]

Could this be the issue? likable disabled

It does have like chatbot.has_event(gr.events.Events.like) set True after chatbot.like. but no options showing up in the box

[freddyaboulton]

Found the issue @surajspass. Opening a PR now

[surajspass]

thank you :)