diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b068c6158..c3cbbb413d 100644 --- a/CHANGELOG.md +++ b/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: diff --git a/js/app/src/components/Chatbot/Chatbot.test.ts b/js/app/src/components/Chatbot/Chatbot.test.ts index f61f331129..3e656de0b7 100644 --- a/js/app/src/components/Chatbot/Chatbot.test.ts +++ b/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")); + }); }); diff --git a/js/chatbot/src/ChatBot.svelte b/js/chatbot/src/ChatBot.svelte index 13858691ea..dd70e31f5c 100644 --- a/js/chatbot/src/ChatBot.svelte +++ b/js/chatbot/src/ChatBot.svelte @@ -147,6 +147,17 @@ src={message.data} alt={message.alt_text} /> + {:else if message !== null && message.data !== null} + + {message.orig_name || message.name} + {/if} {/each}