Revert chatbot styling

.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,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", "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}
+<<<<<<< HEAD
+{"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(msg_format=\"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}
+=======
+{"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}
+>>>>>>> main

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/chatbot/Index.svelte

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

js/chatbot/shared/ButtonPanel.svelte

@@ -39,7 +39,7 @@
 				</span>
 			</DownloadLink>
 		{/if}
-		{#if likeable && position === "left"}
+		{#if likeable}
 			<LikeDislike {handle_action} padded={show_copy || show_download} />
 		{/if}
 	</div>
@@ -54,36 +54,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 +90,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>