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

@@ -0,0 +1,6 @@
+---
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Fix Chatbot Multimodal Examples

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);

js/multimodaltextbox/package.json

@@ -20,6 +20,7 @@
 		"@gradio/utils": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/image": "workspace:^",
+		"@gradio/video": "workspace:^",
 		"@gradio/client": "workspace:^"
 	},
 	"devDependencies": {

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:^