Fix gr.Chatbot panels layout (#9499)

* fix avatar margins

* separate component logic out and add message component

* fix panel mode and upate chatbot buttons

* add changeset

* fix type check

* fix typecheck

* reduce message padding

* fix empty message

* revert css removal

* test

* test

* Revert "test"

This reverts commit 40c9e39.

* Revert "test"

This reverts commit 660a6b0.

* move message-wrap styes

* bubble width + markdown tweak

* fix test

---------

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

.changeset/tasty-tigers-mate.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Fix `gr.Chatbot` panels layout

js/chatbot/Chatbot.stories.svelte

@@ -38,6 +38,7 @@
 
 <Template let:args>
 	<Chatbot
+		latex_delimiters={[{ left: "$$", right: "$$", display: true }]}
 		value={[
 			[
 				"Can you write a function in Python?",
@@ -86,7 +87,6 @@
 <Story
 	name="Chatbot with copy button"
 	args={{
-		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
 		show_copy_button: true
 	}}
 />

js/chatbot/shared/ButtonPanel.svelte

@@ -87,23 +87,31 @@
 {/if}
 
 <style>
-	:global(.icon-button-wrapper) {
+	.bubble :global(.icon-button-wrapper) {
 		margin: 0px calc(var(--spacing-xl) * 2);
 	}
 
 	.message-buttons-left {
 		align-self: flex-start;
 	}
 
-	.message-buttons-right {
+	.bubble.message-buttons-right {
 		align-self: flex-end;
 	}
 
 	.message-buttons-right :global(.icon-button-wrapper) {
 		margin-left: auto;
 	}
 
-	.with-avatar {
-		margin-left: calc(var(--spacing-xl) * 4 + 31px);
+	.bubble.with-avatar {
+		margin-left: calc(var(--spacing-xl) * 5);
+		margin-right: calc(var(--spacing-xl) * 5);
+	}
+
+	.panel {
+		display: flex;
+		align-self: flex-start;
+		padding: 0 var(--spacing-xl);
+		z-index: var(--layer-1);
 	}
 </style>