chatbot conversation nodes can contain a copy button (#5125)

* chatbot conversation nodes can contain a copy button

* add changeset

* the newly added chatbot copy message button is now called show_copy_button

* chatbot's Copy component styling improved

* chatbot's Copy component - typing fix

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/famous-actors-clap.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:chatbot conversation nodes can contain a copy button

gradio/components/chatbot.py

@@ -53,6 +53,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         rtl: bool = False,
         show_share_button: bool | None = None,
+        show_copy_button: bool = False,
         **kwargs,
     ):
         """
@@ -72,6 +73,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
             rtl: If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            show_copy_button: If True, will show a copy button for each chatbot message.
         """
         if color_map is not None:
             warn_deprecation("The 'color_map' parameter has been deprecated.")
@@ -91,6 +93,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
             if show_share_button is None
             else show_share_button
         )
+        self.show_copy_button = show_copy_button
 
         IOComponent.__init__(
             self,
@@ -115,6 +118,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
             "height": self.height,
             "show_share_button": self.show_share_button,
             "rtl": self.rtl,
+            "show_copy_button": self.show_copy_button,
             **IOComponent.get_config(self),
         }
 
@@ -132,6 +136,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
         height: int | None = None,
         rtl: bool | None = None,
         show_share_button: bool | None = None,
+        show_copy_button: bool | None = None,
     ):
         updated_config = {
             "label": label,
@@ -144,6 +149,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
             "height": height,
             "show_share_button": show_share_button,
             "rtl": rtl,
+            "show_copy_button": show_copy_button,
             "__type__": "update",
         }
         return updated_config

js/chatbot/index.svelte

@@ -23,6 +23,7 @@
 	export let theme_mode: ThemeMode;
 	export let show_share_button = false;
 	export let rtl = false;
+	export let show_copy_button = false;
 
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let height = 400;
@@ -43,6 +44,7 @@
 	{theme_mode}
 	{show_share_button}
 	{rtl}
+	{show_copy_button}
 	{latex_delimiters}
 	on:change
 	on:select

js/chatbot/static/ChatBot.svelte

@@ -7,6 +7,7 @@
 	import type { ThemeMode } from "js/app/src/components/types";
 	import type { FileData } from "@gradio/upload";
 	import Markdown from "./MarkdownCode.svelte";
+	import Copy from "./Copy.svelte";
 
 	const code_highlight_css = {
 		light: (): Promise<typeof import("prismjs/themes/prism.css")> =>
@@ -31,6 +32,7 @@
 	export let show_share_button = false;
 	export let theme_mode: ThemeMode;
 	export let rtl = false;
+	export let show_copy_button = false;
 
 	$: if (theme_mode == "dark") {
 		code_highlight_css.dark();
@@ -96,6 +98,7 @@
 		/>
 	</div>
 {/if}
+
 <div class="wrap" bind:this={div}>
 	<div class="message-wrap" use:copy>
 		{#if value !== null}
@@ -122,6 +125,12 @@
 									{/each}
 								</div>
 							{/if}
+
+							{#if show_copy_button && message}
+								<div class="icon-button">
+									<Copy value={message} />
+								</div>
+							{/if}
 						{:else if message !== null && message.mime_type?.includes("audio")}
 							<audio
 								data-testid="chatbot-audio"

js/chatbot/static/Copy.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { Copy, Check } from "@gradio/icons";
 
 	let copied = false;
@@ -46,30 +45,25 @@
 </script>
 
 <button on:click={handle_copy} title="copy">
-	<span class="copy-text" class:copied><Copy /> </span>
+	{#if !copied}
+		<span><Copy /> </span>
+	{/if}
 	{#if copied}
-		<span class="check" transition:fade><Check /></span>
+		<span><Check /></span>
 	{/if}
 </button>
 
 <style>
 	button {
 		position: relative;
-		cursor: pointer;
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-	}
-
-	.check {
-		position: absolute;
 		top: 0;
 		right: 0;
-		z-index: var(--layer-top);
-		background: var(--background-fill-primary);
-		padding: var(--size-1);
-		width: 100%;
-		height: 100%;
-		color: var(--body-text-color);
+
+		width: 22px;
+		height: 22px;
+
+		padding: 5px;
+
+		cursor: pointer;
 	}
 </style>

js/chatbot/static/StaticChatbot.svelte

@@ -22,6 +22,7 @@
 	export let theme_mode: ThemeMode;
 	export let show_share_button = false;
 	export let rtl = false;
+	export let show_copy_button = false;
 	export let latex_delimiters: {
 		left: string;
 		right: string;
@@ -82,6 +83,7 @@
 			{latex_delimiters}
 			pending_message={loading_status?.status === "pending"}
 			{rtl}
+			{show_copy_button}
 			on:change
 			on:select
 			on:share

test/test_components.py

@@ -1997,6 +1997,7 @@ class TestChatbot:
             "selectable": False,
             "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
             "rtl": False,
+            "show_copy_button": False,
         }