Add hyperlinks to download files in chatbot (#4848)

* add file links

* changelog

CHANGELOG.md

@@ -1,8 +1,7 @@
 # Upcoming Release
 
 ## New Features:
-
-No changes to highlight.
+- Chatbot messages now show hyperlinks to download files uploaded to `gr.Chatbot()` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4848](https://github.com/gradio-app/gradio/pull/4848)
 
 ## Bug Fixes:
 

js/app/src/components/Chatbot/Chatbot.test.ts

@@ -150,4 +150,34 @@ describe("Chatbot", () => {
 		assert.isTrue(audio[0].src.includes("audio_sample.wav"));
 		assert.isTrue(audio[1].src.includes("audio_sample.wav"));
 	});
+
+	test("renders hyperlinks to file bot and user messages", async () => {
+		const { component, getAllByTestId } = await render(Chatbot, {
+			loading_status,
+			label: "chatbot",
+			value: null,
+			root: "",
+			root_url: "",
+			latex_delimiters: null,
+			theme_mode: "dark"
+		});
+
+		let value = Array(2).fill([
+			{
+				name: "https://gradio-builds.s3.amazonaws.com/demo-files/titanic.csv",
+				mime_type: "text/csv",
+				alt_text: null,
+				data: "https://gradio-builds.s3.amazonaws.com/demo-files/titanic.csv",
+				is_file: true
+			}
+		]);
+
+		await component.$set({
+			value: value
+		});
+
+		const file_link = getAllByTestId("chatbot-file");
+		assert.isTrue(file_link[0].href.includes("titanic.csv"));
+		assert.isTrue(file_link[0].href.includes("titanic.csv"));
+	});
 });

js/chatbot/src/ChatBot.svelte

@@ -147,6 +147,17 @@
 								src={message.data}
 								alt={message.alt_text}
 							/>
+						{:else if message !== null && message.data !== null}
+							<a
+								data-testid="chatbot-file"
+								href={message.data}
+								target="_blank"
+								download={window.__is_colab__
+									? null
+									: message.orig_name || message.name}
+							>
+								{message.orig_name || message.name}
+							</a>
 						{/if}
 					</div>
 				{/each}