From 173c7b8624371d89c40eb667bc28b9955c61b063 Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Wed, 21 Aug 2024 13:43:56 -0400
Subject: [PATCH] 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>
---
 .changeset/fifty-toys-burn.md     |  6 ++++++
 js/chatbot/Chatbot.stories.svelte | 11 +++++++++++
 js/chatbot/shared/ChatBot.svelte  | 19 +++++++++++++------
 3 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fifty-toys-burn.md

diff --git a/.changeset/fifty-toys-burn.md b/.changeset/fifty-toys-burn.md
new file mode 100644
index 0000000000000..85c8889c34153
--- /dev/null
+++ 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
index 38b5734814afe..1a8a6097c2c29 100644
--- 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
index a84a6caa4826f..52ee8b98f7728 100644
--- 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);