Revert chatbot styling (#8758)

* fix

* fix

* add changeset

* add changeset

* tests

* Fix button panel (#8762)

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>

.changeset/nine-ways-sink.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Revert chatbot styling

demo/chatbot_with_tools/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_with_tools"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio import ChatMessage\n", "import time\n", "\n", "def generate_response(history):\n", "    history.append(ChatMessage(role=\"user\", content=\"What is the weather in San Francisco right now?\"))\n", "    yield history\n", "    time.sleep(0.25)\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"In order to find the current weather in San Francisco, I will need to use my weather tool.\")\n", "                               )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"API Error when connecting to weather service.\",\n", "                              metadata={\"title\": \"\ud83d\udca5 Error using tool 'Weather'\"})\n", "                  )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"I will try again\",\n", "                              ))\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"Weather 72 degrees Fahrenheit with 20% chance of rain.\",\n", "                                metadata={\"title\": \"\ud83d\udee0\ufe0f Used tool 'Weather'\"}\n", "                              ))\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"Now that the API succeeded I can complete my task.\",\n", "                              ))\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(ChatMessage(role=\"assistant\",\n", "                               content=\"It's a sunny day in San Francisco with a current temperature of 72 degrees Fahrenheit and a 20% chance of rain. Enjoy the weather!\",\n", "                              ))\n", "    yield history\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot  = gr.Chatbot(type=\"messages\")\n", "    button = gr.Button(\"Get San Francisco Weather\")\n", "    button.click(generate_response, chatbot, chatbot)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_with_tools"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio import ChatMessage\n", "import time\n", "\n", "\n", "def generate_response(history):\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"user\", content=\"What is the weather in San Francisco right now?\"\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"In order to find the current weather in San Francisco, I will need to use my weather tool.\",\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"API Error when connecting to weather service.\",\n", "            metadata={\"title\": \"\ud83d\udca5 Error using tool 'Weather'\"},\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"I will try again\",\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"Weather 72 degrees Fahrenheit with 20% chance of rain.\",\n", "            metadata={\"title\": \"\ud83d\udee0\ufe0f Used tool 'Weather'\"},\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"Now that the API succeeded I can complete my task.\",\n", "        )\n", "    )\n", "    yield history\n", "    time.sleep(0.25)\n", "\n", "    history.append(\n", "        ChatMessage(\n", "            role=\"assistant\",\n", "            content=\"It's a sunny day in San Francisco with a current temperature of 72 degrees Fahrenheit and a 20% chance of rain. Enjoy the weather!\",\n", "        )\n", "    )\n", "    yield history\n", "\n", "\n", "def like(evt: gr.LikeData):\n", "    print(\"User liked the response\")\n", "    print(evt.index, evt.liked, evt.value)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(type=\"messages\", height=500, show_copy_button=True)\n", "    button = gr.Button(\"Get San Francisco Weather\")\n", "    button.click(generate_response, chatbot, chatbot)\n", "    chatbot.like(like)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/chatbot_with_tools/run.py

@@ -2,52 +2,81 @@
 from gradio import ChatMessage
 import time
 
+
 def generate_response(history):
-    history.append(ChatMessage(role="user", content="What is the weather in San Francisco right now?"))
+    history.append(
+        ChatMessage(
+            role="user", content="What is the weather in San Francisco right now?"
+        )
+    )
     yield history
     time.sleep(0.25)
-    history.append(ChatMessage(role="assistant",
-                               content="In order to find the current weather in San Francisco, I will need to use my weather tool.")
-                               )
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="In order to find the current weather in San Francisco, I will need to use my weather tool.",
+        )
+    )
     yield history
     time.sleep(0.25)
 
-    history.append(ChatMessage(role="assistant",
-                               content="API Error when connecting to weather service.",
-                              metadata={"title": "💥 Error using tool 'Weather'"})
-                  )
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="API Error when connecting to weather service.",
+            metadata={"title": "💥 Error using tool 'Weather'"},
+        )
+    )
     yield history
     time.sleep(0.25)
 
-    history.append(ChatMessage(role="assistant",
-                               content="I will try again",
-                              ))
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="I will try again",
+        )
+    )
     yield history
     time.sleep(0.25)
 
-    history.append(ChatMessage(role="assistant",
-                               content="Weather 72 degrees Fahrenheit with 20% chance of rain.",
-                                metadata={"title": "🛠️ Used tool 'Weather'"}
-                              ))
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="Weather 72 degrees Fahrenheit with 20% chance of rain.",
+            metadata={"title": "🛠️ Used tool 'Weather'"},
+        )
+    )
     yield history
     time.sleep(0.25)
 
-    history.append(ChatMessage(role="assistant",
-                               content="Now that the API succeeded I can complete my task.",
-                              ))
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="Now that the API succeeded I can complete my task.",
+        )
+    )
     yield history
     time.sleep(0.25)
 
-    history.append(ChatMessage(role="assistant",
-                               content="It's a sunny day in San Francisco with a current temperature of 72 degrees Fahrenheit and a 20% chance of rain. Enjoy the weather!",
-                              ))
+    history.append(
+        ChatMessage(
+            role="assistant",
+            content="It's a sunny day in San Francisco with a current temperature of 72 degrees Fahrenheit and a 20% chance of rain. Enjoy the weather!",
+        )
+    )
     yield history
 
 
+def like(evt: gr.LikeData):
+    print("User liked the response")
+    print(evt.index, evt.liked, evt.value)
+
+
 with gr.Blocks() as demo:
-    chatbot  = gr.Chatbot(type="messages")
+    chatbot = gr.Chatbot(type="messages", height=500, show_copy_button=True)
     button = gr.Button("Get San Francisco Weather")
     button.click(generate_response, chatbot, chatbot)
+    chatbot.like(like)
 
 if __name__ == "__main__":
     demo.launch()

gradio/events.py

@@ -58,9 +58,11 @@ def set_cancel_events(
 
         root_block.set_event_trigger(
             triggers,
-            fn=lambda: [Timer(active=False) for _ in timers_to_cancel]
-            if len(timers_to_cancel) > 1
-            else Timer(active=False),
+            fn=lambda: (
+                [Timer(active=False) for _ in timers_to_cancel]
+                if len(timers_to_cancel) > 1
+                else Timer(active=False)
+            ),
             inputs=None,
             outputs=timers_to_cancel,
             show_api=False,

js/app/test/chatbot_multimodal.spec.ts

@@ -239,7 +239,7 @@ for (const msg_format of ["tuples", "messages"]) {
 		await page.getByTestId("textbox").fill("hello");
 		await page.keyboard.press("Enter");
 		await page.getByLabel("like", { exact: true }).click();
-		await page.getByLabel("dislike").click();
+		await page.getByLabel("dislike", { exact: true }).click();
 
 		expect(await page.getByLabel("clicked dislike").count()).toEqual(1);
 		expect(await page.getByLabel("clicked like").count()).toEqual(0);

js/chatbot/Index.svelte

@@ -124,6 +124,7 @@
 			upload={gradio.client.upload}
 			_fetch={gradio.client.fetch}
 			load_component={gradio.load_component}
+			msg_format={type}
 		/>
 	</div>
 </Block>

js/chatbot/shared/ButtonPanel.svelte

@@ -4,19 +4,43 @@
 	import type { FileData } from "@gradio/client";
 	import DownloadIcon from "./Download.svelte";
 	import { DownloadLink } from "@gradio/wasm/svelte";
+	import type { NormalisedMessage, TextMessage } from "../types";
+	import { is_component_message } from "./utils";
 
 	export let likeable: boolean;
 	export let show_copy_button: boolean;
 	export let show: boolean;
-	export let message: Record<string, any>;
+	export let message: NormalisedMessage | NormalisedMessage[];
 	export let position: "right" | "left";
 	export let avatar: FileData | null;
 
 	export let handle_action: (selected: string | null) => void;
 	export let layout: "bubble" | "panel";
-	$: show_copy = show_copy_button && message && message?.type === "text";
+
+	function is_all_text(
+		message: NormalisedMessage[] | NormalisedMessage
+	): message is TextMessage[] | TextMessage {
+		return (
+			(Array.isArray(message) &&
+				message.every((m) => typeof m.content === "string")) ||
+			(!Array.isArray(message) && typeof message.content === "string")
+		);
+	}
+
+	function all_text(message: TextMessage[] | TextMessage): string {
+		if (Array.isArray(message)) {
+			return message.map((m) => m.content).join("\n");
+		}
+		return message.content;
+	}
+
+	$: message_text = is_all_text(message) ? all_text(message) : "";
+
+	$: show_copy = show_copy_button && message && is_all_text(message);
 	$: show_download =
-		show_copy_button && (message?.value?.video?.url || message?.value?.url);
+		!Array.isArray(message) &&
+		is_component_message(message) &&
+		message.content.value.url;
 </script>
 
 {#if show}
@@ -25,21 +49,19 @@
 			null && 'with-avatar'}"
 	>
 		{#if show_copy}
-			<Copy value={message.value} />
+			<Copy value={message_text} />
 		{/if}
-		{#if show_download}
+		{#if show_download && !Array.isArray(message) && is_component_message(message)}
 			<DownloadLink
-				href={message?.value?.video?.url || message?.value?.url}
-				download={message?.value?.video?.orig_name ||
-					message.value.orig_name ||
-					"image"}
+				href={message?.content?.value.url}
+				download={message.content.value.orig_name || "image"}
 			>
 				<span class="icon-wrap">
 					<DownloadIcon />
 				</span>
 			</DownloadLink>
 		{/if}
-		{#if likeable && position === "left"}
+		{#if likeable}
 			<LikeDislike {handle_action} padded={show_copy || show_download} />
 		{/if}
 	</div>
@@ -54,36 +76,34 @@
 	.icon-wrap:hover {
 		color: var(--body-text-color);
 	}
-	.message-buttons-right,
-	.message-buttons-left {
+
+	.message-buttons {
 		border-radius: var(--radius-md);
 		display: flex;
 		align-items: center;
-		bottom: 0;
+
 		height: var(--size-7);
 		align-self: self-end;
-		/* position: absolute; */
-		bottom: -15px;
-		margin: 2px;
+		margin: 0px calc(var(--spacing-xl) * 3);
 		padding-left: 5px;
 		z-index: 1;
 		padding-bottom: var(--spacing-xl);
-		padding: var(--spacing-md) 2px;
+		padding: var(--spacing-md) var(--spacing-md);
+		border: 1px solid var(--border-color-primary);
+		background: var(--border-color-secondary);
+		gap: var(--spacing-md);
 	}
 	.message-buttons-left {
 		align-self: start;
 		left: 0px;
 	}
-	.message-buttons-right {
-		right: 5px;
-	}
 
 	.panel.message-buttons-left,
 	.panel.message-buttons-right {
 		margin: 10px 0 2px 0;
 	}
 
-	.message-buttons {
+	/* .message-buttons {
 		left: 0px;
 		right: 0px;
 		top: unset;
@@ -92,9 +112,13 @@
 		justify-content: flex-start;
 		align-items: center;
 		gap: 0px;
-	}
+	} */
 
 	.message-buttons :global(> *) {
-		margin-right: 7px;
+		margin-right: 0px;
+	}
+
+	.with-avatar {
+		margin-left: calc(var(--spacing-xl) * 4 + 31px);
 	}
 </style>