Ensure undo/try shows for final bot message in gr.Chatbot (#9600)

* fix undo and retry reactivity * add changeset * tweak * fix ts check * changes * changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: Ali Abid <aliabid94@gmail.com>
gradio-app · Oct 9, 2024 · 9f71086 · 9f71086
1 parent 0ec31af
commit 9f71086
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 28 deletions.
diff --git a/.changeset/large-impalas-take.md b/.changeset/large-impalas-take.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure undo/try shows for final bot message in gr.Chatbot
diff --git a/js/chatbot/shared/ButtonPanel.svelte b/js/chatbot/shared/ButtonPanel.svelte
@@ -10,8 +10,8 @@
 	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 
 	export let likeable: boolean;
-	export let _retryable: boolean;
-	export let _undoable: boolean;
+	export let show_retry: boolean;
+	export let show_undo: boolean;
 	export let show_copy_button: boolean;
 	export let show: boolean;
 	export let message: NormalisedMessage | NormalisedMessage[];
@@ -65,14 +65,14 @@
 					<IconButton Icon={DownloadIcon} />
 				</DownloadLink>
 			{/if}
-			{#if _retryable}
+			{#if show_retry}
 				<IconButton
 					Icon={Retry}
 					on:click={() => handle_action("retry")}
 					disabled={disable}
 				/>
 			{/if}
-			{#if _undoable}
+			{#if show_undo}
 				<IconButton
 					Icon={Undo}
 					on:click={() => handle_action("undo")}

diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -291,10 +291,6 @@
 						>
 					</div>
 				{/if}
-				{@const show_like =
-					role === "user" ? likeable && like_user_message : likeable}
-				{@const show_retry = _retryable && is_last_bot_message(messages, value)}
-				{@const show_undo = _undoable && is_last_bot_message(messages, value)}
 				<Message
 					{messages}
 					{opposite_avatar_img}
@@ -320,9 +316,9 @@
 					{_components}
 					{generating}
 					{msg_format}
-					{show_like}
-					{show_retry}
-					{show_undo}
+					show_like={role === "user" ? likeable && like_user_message : likeable}
+					show_retry={_retryable && is_last_bot_message(messages, value)}
+					show_undo={_undoable && is_last_bot_message(messages, value)}
 					{show_copy_button}
 					handle_action={(selected) => handle_like(i, messages[0], selected)}
 					{scroll}

diff --git a/js/chatbot/shared/Message.svelte b/js/chatbot/shared/Message.svelte
@@ -70,21 +70,34 @@
 		return `a component of type ${message.content.component ?? "unknown"}`;
 	}
 
-	function get_button_panel_props(): any {
-		return {
-			show: show_like || show_retry || show_undo || show_copy_button,
-			handle_action,
-			likeable: show_like,
-			_retryable: show_retry,
-			_undoable: show_undo,
-			disable: generating,
-			show_copy_button,
-			message: msg_format === "tuples" ? messages[0] : messages,
-			position: role === "user" ? "right" : "left",
-			avatar: avatar_img,
-			layout
-		};
-	}
+	type ButtonPanelProps = {
+		show: boolean;
+		handle_action: (selected: string | null) => void;
+		likeable: boolean;
+		show_retry: boolean;
+		show_undo: boolean;
+		disable: boolean;
+		show_copy_button: boolean;
+		message: NormalisedMessage[] | NormalisedMessage;
+		position: "left" | "right";
+		layout: "bubble" | "panel";
+		avatar: FileData | null;
+	};
+
+	let button_panel_props: ButtonPanelProps;
+	$: button_panel_props = {
+		show: show_like || show_retry || show_undo || show_copy_button,
+		handle_action,
+		likeable: show_like,
+		show_retry,
+		show_undo,
+		disable: generating,
+		show_copy_button,
+		message: msg_format === "tuples" ? messages[0] : messages,
+		position: role === "user" ? "right" : "left",
+		avatar: avatar_img,
+		layout
+	};
 </script>
 
 <div
@@ -194,14 +207,14 @@
 			</div>
 
 			{#if layout === "panel"}
-				<ButtonPanel {...get_button_panel_props()} />
+				<ButtonPanel {...button_panel_props} />
 			{/if}
 		{/each}
 	</div>
 </div>
 
 {#if layout === "bubble"}
-	<ButtonPanel {...get_button_panel_props()} />
+	<ButtonPanel {...button_panel_props} />
 {/if}
 
 <style>