Dataframe support in Chatbot (#10225)

* dataframe

* dataframe

* remove console log

* add changeset

* datatype

* fix border

* Update js/chatbot/shared/Component.svelte

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* border fix

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/long-months-wave.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Dataframe support in Chatbot

demo/chatbot_core_components/run.py

@@ -166,6 +166,15 @@ def bot(history, response_type):
         content = gr.Gallery(
             [os.path.join("files", "avatar.png"), os.path.join("files", "avatar.png")]
         )
+    elif response_type == "dataframe":
+        content = gr.Dataframe(
+            interactive=True,
+            headers=["One", "Two", "Three"],
+            col_count=(3, "fixed"),
+            row_count=(3, "fixed"),
+            value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]],
+            label="Dataframe",
+        )
     elif response_type == "image":
        content = gr.Image(os.path.join("files", "avatar.png"))
     elif response_type == "video":
@@ -216,6 +225,7 @@ with gr.Blocks(fill_height=True) as demo:
             "image",
             "text",
             "gallery",
+            "dataframe",
             "video",
             "audio",
             "html",

js/chatbot/shared/ChatBot.svelte

@@ -405,10 +405,10 @@
 	}
 
 	/* table styles */
-	.message-wrap :global(.bot table),
-	.message-wrap :global(.bot tr),
-	.message-wrap :global(.bot td),
-	.message-wrap :global(.bot th) {
+	.message-wrap :global(.bot:not(:has(.table-wrap)) table),
+	.message-wrap :global(.bot:not(:has(.table-wrap)) tr),
+	.message-wrap :global(.bot:not(:has(.table-wrap)) td),
+	.message-wrap :global(.bot:not(:has(.table-wrap)) th) {
 		border: 1px solid var(--border-color-primary);
 	}
 

js/chatbot/shared/Component.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-	export let type: "gallery" | "plot" | "audio" | "video" | "image" | string;
+	export let type:
+		| "gallery"
+		| "plot"
+		| "audio"
+		| "video"
+		| "image"
+		| "dataframe"
+		| string;
 	export let components;
 	export let value;
 	export let target;
@@ -27,6 +34,24 @@
 		fixed_height={1}
 		on:load
 	/>
+{:else if type === "dataframe"}
+	<svelte:component
+		this={components[type]}
+		{value}
+		show_label={false}
+		{i18n}
+		label=""
+		interactive={false}
+		line_breaks={props.line_breaks}
+		wrap={true}
+		root=""
+		gradio={{ dispatch: () => {} }}
+		datatype={props.datatype}
+		latex_delimiters={props.latex_delimiters}
+		col_count={props.col_count}
+		row_count={props.row_count}
+		on:load
+	/>
 {:else if type === "plot"}
 	<svelte:component
 		this={components[type]}

js/chatbot/shared/Message.svelte

@@ -352,6 +352,12 @@
 		text-align: right;
 	}
 
+	.bot:has(.table-wrap) {
+		border: none;
+		box-shadow: none;
+		background: none;
+	}
+
 	.panel .user :global(*) {
 		text-align: right;
 	}

js/chatbot/shared/utils.ts

@@ -228,13 +228,12 @@ export async function load_components(
 		if (_components[component_name] || component_name === "file") {
 			return;
 		}
-
-		const { name, component } = load_component(component_name, "base");
+		const variant = component_name === "dataframe" ? "component" : "base";
+		const { name, component } = load_component(component_name, variant);
 		names.push(name);
 		components.push(component);
 		component_name;
 	});
-
 	const loaded_components: LoadedComponent[] = await Promise.all(components);
 	loaded_components.forEach((component, i) => {
 		_components[names[i]] = component.default;