chatbot conversation nodes can contain a copy button

[fazpu]

Description

The PR introduces a new parameter show_chat_copy_button to the gr.Chatbot. When True, it exposes the Copy button for each converstation node.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Aug 10, 2023 1:35pm

[pseudotensor]

Cool!

[hannahblair]

This is really neat!

[freddyaboulton]

FYI @abidlabs - there was some hesitation against doing this in the past: #4911

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/chatbot	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

chatbot conversation nodes can contain a copy button

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[gradio-pr-bot]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-5125-all-demos

---

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/4eda1657fff8a049dd38c73efd1223a844f455e0/gradio-3.39.0-py3-none-any.whl

[abidlabs]

I tested the copy button and I think its fine to include. I still would disable it by default but providing developers with the option to include it if they want for their Chatbots seems like a good idea.

@hannahblair and I added some comments above. One more thing -- clicking on the copy button does not provide any sort of visual feedback that the button has been clicked. @fazpu could you do something similar to what we do for the JSON component where the copy button changes to a checkmark?

You can see that by running something like this:

with gr.Blocks() as demo:
    gr.JSON({"ab": "cd"})
    
demo.launch()

Once the changes have been made, I'm fine with merging, wdyt @freddyaboulton @hannahblair?

[freddyaboulton]

Sounds good to me @abidlabs @fazpu !

[fazpu]

added the positioning to improve readability and avoid unexpected behaviour

[fazpu]

this logic seemed to be unmaintained - it was not working. I simplified and removed all the outdated and non-necessary parts.

[fazpu]

I tested the copy button and I think its fine to include. I still would disable it by default but providing developers with the option to include it if they want for their Chatbots seems like a good idea.

@hannahblair and I added some comments above. One more thing -- clicking on the copy button does not provide any sort of visual feedback that the button has been clicked. @fazpu could you do something similar to what we do for the JSON component where the copy button changes to a checkmark?

You can see that by running something like this:

with gr.Blocks() as demo:
    gr.JSON({"ab": "cd"})
    
demo.launch()

Once the changes have been made, I'm fine with merging, wdyt @freddyaboulton @hannahblair?

@abidlabs Thank you for the feedback! The logic was already there in the Copy component. It just needed a small refresh. Please have a look.

[abidlabs]

Tested, looks good. Thanks @fazpu for the great contribution 👍

Let's figure out the type error and then I believe we can merge in.

[abidlabs]

Thanks @fazpu for this PR! Merging

[gradio-pr-bot]

🎉 Chromatic build completed!

There are 0 visual changes to review.
There are 0 failed tests to fix.

• Storybook Preview
• Build Review

[luoweb]

I tested the copy button and I think its fine to include. I still would disable it by default but providing developers with the option to include it if they want for their Chatbots seems like a good idea.

@hannahblair and I added some comments above. One more thing -- clicking on the copy button does not provide any sort of visual feedback that the button has been clicked. @fazpu could you do something similar to what we do for the JSON component where the copy button changes to a checkmark?

You can see that by running something like this:

with gr.Blocks() as demo:
    gr.JSON({"ab": "cd"})
    
demo.launch()

Once the changes have been made, I'm fine with merging, wdyt @freddyaboulton @hannahblair?

no properties with gradio v 3.39.0, how to configure?

GradioUnusedKwargWarning: You have unused kwarg parameters in Chatbot, please remove them: {'show_copy_button': True}

[abidlabs]

@luoweb you have to upgrade to the latest version of gradio:

pip install --upgrade gradio

[luoweb]

@luoweb you have to upgrade to the latest version of gradio:

pip install --upgrade gradio

it's OK now, Thanks

[huni0103]

Hi there.

I would like to make an additional suggestion regarding Chatbot Copy.
In the Chatbot, I am replacing "<" , ">" with ">", "<", etc. to display "<" , ">".
However, when I copy the Chatbot text, the "" is also being copied.
I only want "<" and ">" to be copied as they appear in the Chatbot.

Furthermore, I'm representing newlines as "
", but when I copy the Chatbot text, it's copying them as "
" even though they are displayed as "\n" in the Chatbot.

Is there any way to address the issues mentioned above?"