From d8e9b000e31842c305e481e13f8a8808ae96e6db Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 4 May 2025 18:26:33 +0400
Subject: [PATCH] enh: upload audio

---
 src/lib/components/icons/ArrowUpTray.svelte   | 19 +++++++++++++++++++
 .../components/icons/DocumentArrowUp.svelte   | 19 +++++++++++++++++++
 src/lib/components/notes/NoteEditor.svelte    | 15 +++++++++++++++
 src/lib/components/notes/RecordMenu.svelte    | 19 ++++++++++++++++---
 4 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/icons/ArrowUpTray.svelte
 create mode 100644 src/lib/components/icons/DocumentArrowUp.svelte

diff --git a/src/lib/components/icons/ArrowUpTray.svelte b/src/lib/components/icons/ArrowUpTray.svelte
new file mode 100644
index 000000000..8f107c95c
--- /dev/null
+++ b/src/lib/components/icons/ArrowUpTray.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+	/>
+</svg>
diff --git a/src/lib/components/icons/DocumentArrowUp.svelte b/src/lib/components/icons/DocumentArrowUp.svelte
new file mode 100644
index 000000000..d78576742
--- /dev/null
+++ b/src/lib/components/icons/DocumentArrowUp.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+	/>
+</svg>
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index 61c80322d..3cccc40d7 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -445,6 +445,21 @@
 
 					recording = true;
 				}}
+				onUpload={async () => {
+					const input = document.createElement('input');
+					input.type = 'file';
+					input.accept = 'audio/*';
+					input.multiple = false;
+					input.click();
+
+					input.onchange = async (e) => {
+						const files = e.target.files;
+
+						if (files && files.length > 0) {
+							await uploadFileHandler(files[0]);
+						}
+					};
+				}}
 			>
 				<button
 					class="cursor-pointer p-2.5 flex rounded-full border border-gray-50 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition shadow-xl"
diff --git a/src/lib/components/notes/RecordMenu.svelte b/src/lib/components/notes/RecordMenu.svelte
index 4ab195497..5f585f95d 100644
--- a/src/lib/components/notes/RecordMenu.svelte
+++ b/src/lib/components/notes/RecordMenu.svelte
@@ -4,12 +4,11 @@
 
 	import { showSettings, activeUserIds, USAGE_POOL, mobile, showSidebar, user } from '$lib/stores';
 	import { fade, slide } from 'svelte/transition';
-	import { userSignOut } from '$lib/apis/auths';
 
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import Mic from '../icons/Mic.svelte';
 	import CursorArrowRays from '../icons/CursorArrowRays.svelte';
+	import DocumentArrowUp from '../icons/DocumentArrowUp.svelte';
+	import CloudArrowUp from '../icons/CloudArrowUp.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -18,6 +17,7 @@
 
 	export let onRecord = () => {};
 	export let onCaptureAudio = () => {};
+	export let onUpload = () => {};
 
 	const dispatch = createEventDispatcher();
 </script>
@@ -65,6 +65,19 @@
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Capture Audio')}</div>
 			</button>
+
+			<button
+				class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				on:click={() => {
+					onUpload();
+					show = false;
+				}}
+			>
+				<div class=" self-center mr-2">
+					<CloudArrowUp className="size-5" strokeWidth="1.5" />
+				</div>
+				<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
+			</button>
 		</DropdownMenu.Content>
 	</slot>
 </DropdownMenu.Root>