From f076f81e0c0c1c0107172469f0dc3e1fb2170ce2 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 7 Jun 2024 00:57:53 -0700
Subject: [PATCH] fix: safari compatibility issue

---
 .../chat/MessageInput/CallOverlay.svelte           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index 1b204db3e..23918603d 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -145,15 +145,24 @@
 			assistantAudio[assistantAudioIdx].pause();
 			assistantAudio[assistantAudioIdx].currentTime = 0;
 		}
+
+		const audioElement = document.getElementById('audioElement');
+		audioElement.pause();
+		audioElement.currentTime = 0;
+
 		assistantSpeaking = false;
 	};
 
 	const playAudio = (idx) => {
 		return new Promise((res) => {
 			assistantAudioIdx = idx;
+			const audioElement = document.getElementById('audioElement');
 			const audio = assistantAudio[idx];
-			audio.play();
-			audio.onended = async (e) => {
+
+			audioElement.src = audio.src; // Assume `assistantAudio` has objects with a `src` property
+			audioElement.play();
+
+			audioElement.onended = async (e) => {
 				await new Promise((r) => setTimeout(r, 300));
 
 				if (Object.keys(assistantAudio).length - 1 === idx) {
@@ -314,6 +323,7 @@
 </script>
 
 {#if $showCallOverlay}
+	<audio id="audioElement" src="" style="display: none;" />
 	<div class=" absolute w-full h-full flex z-[999]">
 		<div
 			class="absolute w-full h-full bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"