From 20444f9b56f95240d00759f31a1b831b9eb53160 Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Mon, 29 Jul 2024 10:27:18 -0400
Subject: [PATCH] Fix Chatbot Multimodal Examples (#8899)

* fix media

* add changeset

* fix image sizing

* fix sizes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/common-poets-retire.md   |  6 +++++
 js/multimodaltextbox/Example.svelte | 37 +++++++++++++++++++++++++----
 js/multimodaltextbox/package.json   |  1 +
 pnpm-lock.yaml                      |  3 +++
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/common-poets-retire.md

diff --git a/.changeset/common-poets-retire.md b/.changeset/common-poets-retire.md
new file mode 100644
index 0000000000..e5136cfaa9
--- /dev/null
+++ b/.changeset/common-poets-retire.md
@@ -0,0 +1,6 @@
+---
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Fix Chatbot Multimodal Examples
diff --git a/js/multimodaltextbox/Example.svelte b/js/multimodaltextbox/Example.svelte
index 6e2aadc42f..dde751badf 100644
--- a/js/multimodaltextbox/Example.svelte
+++ b/js/multimodaltextbox/Example.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { Image } from "@gradio/image/shared";
+	import { Video } from "@gradio/video/shared";
 	import type { FileData } from "@gradio/client";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -28,18 +29,24 @@
 </script>
 
 <div
+	class="container"
 	bind:clientWidth={size}
 	bind:this={el}
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected
+	class:border={value}
 >
 	<p>{value.text ? value.text : ""}</p>
 	{#each value.files as file}
 		{#if file.mime_type && file.mime_type.includes("image")}
 			<Image src={file.url} alt="" />
+		{:else if file.mime_type && file.mime_type.includes("video")}
+			<Video src={file.url} alt="" loop={true} />
+		{:else if file.mime_type && file.mime_type.includes("audio")}
+			<audio src={file.url} controls />
 		{:else}
-			{file.path}
+			{file.orig_name}
 		{/if}
 	{/each}
 </div>
@@ -56,14 +63,36 @@
 	div {
 		overflow: hidden;
 		min-width: var(--local-text-width);
-
 		white-space: nowrap;
 	}
 
-	/* :global(img) {
+	.container :global(img),
+	.container :global(video) {
+		object-fit: contain;
 		width: 100px;
 		height: 100px;
-	} */
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border-radius: var(--radius-lg);
+		overflow-x: auto;
+		width: max-content;
+		height: max-content;
+		object-fit: cover;
+		padding: var(--size-2);
+	}
+
+	.container.gallery {
+		object-fit: cover;
+	}
 
 	div > :global(p) {
 		font-size: var(--text-lg);
diff --git a/js/multimodaltextbox/package.json b/js/multimodaltextbox/package.json
index e7ba89ce6f..dcaaca5010 100644
--- a/js/multimodaltextbox/package.json
+++ b/js/multimodaltextbox/package.json
@@ -20,6 +20,7 @@
 		"@gradio/utils": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/image": "workspace:^",
+		"@gradio/video": "workspace:^",
 		"@gradio/client": "workspace:^"
 	},
 	"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3211b53735..71dca92f8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1553,6 +1553,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/video':
+        specifier: workspace:^
+        version: link:../video
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^