Chatbot Image size and list fixes (#9161)

* fixes * add changeset * stor * radius * max height --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Aug 21, 2024 · 173c7b8 · 173c7b8
1 parent ba6322e
commit 173c7b8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/.changeset/fifty-toys-burn.md b/.changeset/fifty-toys-burn.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Chatbot Image size and list fixes
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
@@ -214,3 +214,14 @@ This document is a showcase of various Markdown capabilities.`,
 		]
 	}}
 />
+
+<Story
+	name="Chatbot with image in markdown"
+	args={{
+		value: [
+			[
+				`![A cheetah](https://cdn.britannica.com/02/92702-120-6A02E613/Cheetah.jpg)`
+			]
+		]
+	}}
+/>
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -682,6 +682,19 @@
 		max-height: 200px;
 	}
 
+	.message-wrap
+		> div
+		:not(.avatar-container)
+		div
+		:not(.image-button)
+		:global(img) {
+		border-radius: var(--radius-xl);
+		margin: var(--size-2);
+		width: 400px;
+		max-width: 30vw;
+		max-height: 30vw;
+	}
+
 	.message-wrap .message :global(a) {
 		color: var(--color-text-link);
 		text-decoration: underline;
@@ -701,12 +714,6 @@
 		border: 1px solid var(--border-color-accent);
 	}
 
-	/* Lists */
-	.message-wrap :global(ol),
-	.message-wrap :global(ul) {
-		padding-inline-start: 2em;
-	}
-
 	/* KaTeX */
 	.message-wrap :global(span.katex) {
 		font-size: var(--text-lg);