Fix chatbot component streaming bug and visible bug (#9730)

* Fix chatbot

* fix styling

* add changeset

* fix visible

* add changeset

* comments

* add changeset

---------

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

.changeset/fair-regions-shave.md

@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": patch
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Fix chatbot component streaming bug and visible bug

gradio/components/chatbot.py

@@ -439,6 +439,7 @@ class Chatbot(Component):
         | FileDataDict
         | FileData
         | GradioComponent
+        | ComponentMessage
         | None,
     ) -> str | FileMessage | ComponentMessage | None:
         if chat_message is None:
@@ -447,6 +448,8 @@ class Chatbot(Component):
             return chat_message
         elif isinstance(chat_message, FileData):
             return FileMessage(file=chat_message)
+        elif isinstance(chat_message, ComponentMessage):
+            return chat_message
         elif isinstance(chat_message, GradioComponent):
             chat_message.unrender()
             component = import_component_and_data(type(chat_message).__name__)

js/atoms/src/Block.svelte

@@ -19,6 +19,8 @@
 	export let min_width = 0;
 	export let flex = false;
 
+	if (!visible) flex = false;
+
 	let tag = type === "fieldset" ? "fieldset" : "div";
 
 	const get_dimension = (

js/chatbot/shared/ChatBot.svelte

@@ -284,12 +284,13 @@
 				{#if is_image_preview_open}
 					<div class="image-preview">
 						<img src={image_preview_source} alt={image_preview_source_alt} />
-						<button
-							class="image-preview-close-button"
-							on:click={() => {
-								is_image_preview_open = false;
-							}}><Clear /></button
-						>
+						<IconButtonWrapper>
+							<IconButton
+								Icon={Clear}
+								on:click={() => (is_image_preview_open = false)}
+								label={"Clear"}
+							/>
+						</IconButtonWrapper>
 					</div>
 				{/if}
 				<Message
@@ -595,4 +596,18 @@
 			0 2px 2px rgba(0, 0, 0, 0.05);
 		transform: translateY(-2px);
 	}
+
+	.image-preview {
+		position: absolute;
+		z-index: 999;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: var(--background-fill-secondary);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>