Disable like/dislike from input message

[sglbl]

• [y] I have searched to see if a similar issue already exists. gr.__version__: '4.38.1'

Is your feature request related to a problem? Please describe.
I don't think it's necessary to put like/dislike button in user message. Previous gradio versions didn't have this problem.

Describe the solution you'd like
Don't show like/dislike button in user message. Show only for the bot message. (or at least a parameter for this)

import gradio as gr
def test(value, like_data: gr.LikeData):
    return {
        "liked_message": like_data.value,
        "input": value
    }

with gr.Blocks() as demo:
    input = gr.Chatbot([("question", "answer")])
    output = gr.Json()
    input.like(test, input, output)
demo.launch()

Additional context

[abidlabs]

Hi @sglbl we've seen use cases where users need to be able to upvote/downvote both the "user" messages as well as the "bot" messages, so we've included both for the sake of completion. If you really need to remove the like/dislike buttons from the user messages, I think this would be a great case for a custom component!

The tldr we've made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps.

Here's an example of a Gradio custom component: https://github.com/PhyscalX/gradio-image-prompter -- it lets you upload images and process points or draw boxes on top of the image.

If you'd like to create your own, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. The idea here would be to use the current gr.Chatbot as a template and then just remove the lines that add the like/dislike to the user message

[remiconnesson]

Hi @sglbl we've seen use cases where users need to be able to upvote/downvote both the "user" messages as well as the "bot" messages, so we've included both for the sake of completion. If you really need to remove the like/dislike buttons from the user messages, I think this would be a great case for a custom component!

Honestly, more often than not, we don't want to let the user upvote / downvote their own messages though.

The idea here would be to use the current gr.Chatbot as a template and then just remove the lines that add the like/dislike to the user message

For anybody wanting to attempt this, then modifiying maybe this line https://github.com/gradio-app/gradio/blob/10a2260fc0791c3f3bca2ae487befe90727d762a/js/chatbot/shared/ChatBot.svelte#L412 to be something like

show={(likeable && role !== "user") || show_copy_button }

would maybe do the trick.

However, I haven't tested it, as dealing with creating a custom component just for this feature seems above my budget for my demo, my current work around is to not process the feedback event if like_data.index[1] == 0 and keep it in the UI.

Then to display a Toast when the feedback button is clicked to inform the user that feedbacks regading user messages are not processed.

Minimal code for doing so below for those whom are interested:

import gradio as gr

def chat(message, history):
    return message[::-1]

def is_user_message(data: gr.LikeData):
    return data.index[1] == 0

def vote(data: gr.LikeData):
    if is_user_message(data):
        gr.Warning("Feedback on user's messages are ignored.")
    else:
        print("liked_message", data.value)

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    chatbot.like(vote, None, None)
    gr.ChatInterface(
        fn=chat,
        chatbot=chatbot,
    )

demo.launch()

[sglbl]

Hi @sglbl we've seen use cases where users need to be able to upvote/downvote both the "user" messages as well as the "bot" messages, so we've included both for the sake of completion. If you really need to remove the like/dislike buttons from the user messages, I think this would be a great case for a custom component!

Honestly, more often than not, we don't want to let the user upvote / downvote their own messages though.

The idea here would be to use the current gr.Chatbot as a template and then just remove the lines that add the like/dislike to the user message

For anybody wanting to attempt this, then modifiying maybe this line

https://github.com/gradio-app/gradio/blob/10a2260fc0791c3f3bca2ae487befe90727d762a/js/chatbot/shared/ChatBot.svelte#L412

to be something like

show={(likeable && role !== "user") || show_copy_button }

would maybe do the trick.

However, I haven't tested it, as dealing with creating a custom component just for this feature seems above my budget for my demo, my current work around is to not process the feedback event if like_data.index[1] == 0 and keep it in the UI.

Then to display a Toast when the feedback button is clicked to inform the user that feedbacks regading user messages are not processed.

Minimal code for doing so below for those whom are interested:

import gradio as gr

def chat(message, history):
    return message[::-1]

def is_user_message(data: gr.LikeData):
    return data.index[1] == 0

def vote(data: gr.LikeData):
    if is_user_message(data):
        gr.Warning("Feedback on user's messages are ignored.")
    else:
        print("liked_message", data.value)

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    chatbot.like(vote, None, None)
    gr.ChatInterface(
        fn=chat,
        chatbot=chatbot,
    )

demo.launch()

Thank you. Honestly, I believe it makes more sense if Gradio Team adds a parameter in .like() function to allow us to disable for users. I think most of the use-cases don't require like/dislike information in user message.

[abidlabs]

Thank you. Honestly, I believe it makes more sense if Gradio Team adds a parameter in .like() function to allow us to disable for users. I think most of the use-cases don't require like/dislike information in user message.

That seems reasonable actually, let me reopen

[StevenLaan]

As a temporary workaround, you can hide the buttons for the user messages using CSS:

.message-buttons-right {
    display: none;
}

[sglbl]

As a temporary workaround, you can hide the buttons for the user messages using CSS:

.message-buttons-right {
    display: none;
}

Thank you. This workaround worked like a charm.