From f2cf21d64ced6ef5113e08ef29a6156866b75c90 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 4 May 2025 17:29:59 +0400
Subject: [PATCH] enh: file item display audio

---
 .../components/common/FileItemModal.svelte    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index ef55e96b2..1ff724638 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -16,10 +16,21 @@
 	export let edit = false;
 
 	let enableFullContent = false;
+
+	let isPdf = false;
+	let isAudio = false;
+
 	$: isPDF =
 		item?.meta?.content_type === 'application/pdf' ||
 		(item?.name && item?.name.toLowerCase().endsWith('.pdf'));
 
+	$: isAudio =
+		item?.meta?.content_type.startsWith('audio/') ||
+		(item?.name && item?.name.toLowerCase().endsWith('.mp3')) ||
+		(item?.name && item?.name.toLowerCase().endsWith('.wav')) ||
+		(item?.name && item?.name.toLowerCase().endsWith('.ogg')) ||
+		(item?.name && item?.name.toLowerCase().endsWith('.m4a'));
+
 	onMount(() => {
 		console.log(item);
 		if (item?.context === 'full') {
@@ -122,6 +133,15 @@
 					class="w-full h-[70vh] border-0 rounded-lg mt-4"
 				/>
 			{:else}
+				{#if isAudio}
+					<audio
+						src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
+						class="w-full border-0 rounded-lg mb-2"
+						controls
+						playsinline
+					/>
+				{/if}
+
 				<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
 					{item?.file?.data?.content ?? 'No content'}
 				</div>