From f88a86f9b071ab8af7c132bce5c0aa643b60e36a Mon Sep 17 00:00:00 2001
From: Zohaib Rauf <zabirauf@gmail.com>
Date: Sun, 8 Sep 2024 22:57:33 -0700
Subject: [PATCH 1/4] Fixed build error

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

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index 320efa922..b16b64a46 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -52,11 +52,36 @@
 	let videoInputDevices = [];
 	let selectedVideoInputDeviceId = null;
 
+	let speechRate = 1;
+	let showSpeedMenu = false;
+
+	const speedOptions = [0.5, 1, 1.5, 2, 2.5, 3];
+
+	const toggleSpeedMenu = () => {
+		showSpeedMenu = !showSpeedMenu;
+	};
+
+	const setSpeedRate = (rate: number) => {
+		speechRate = rate;
+		showSpeedMenu = false;
+		updateAudioSpeed();
+	};
+
+	const updateAudioSpeed = () => {
+		if (currentUtterance) {
+			currentUtterance.rate = speechRate;
+		}
+		const audioElement = document.getElementById('audioElement') as HTMLAudioElement;
+		if (audioElement) {
+			audioElement.playbackRate = speechRate;
+		}
+	};
+
 	const getVideoInputDevices = async () => {
 		const devices = await navigator.mediaDevices.enumerateDevices();
 		videoInputDevices = devices.filter((device) => device.kind === 'videoinput');
 
-		if (!!navigator.mediaDevices.getDisplayMedia) {
+		if (navigator.mediaDevices.getDisplayMedia) {
 			videoInputDevices = [
 				...videoInputDevices,
 				{
@@ -360,6 +385,7 @@
 								?.at(0) ?? undefined;
 
 						currentUtterance = new SpeechSynthesisUtterance(content);
+						currentUtterance.rate = speechRate;
 
 						if (voice) {
 							currentUtterance.voice = voice;
@@ -381,11 +407,12 @@
 	const playAudio = (audio) => {
 		if ($showCallOverlay) {
 			return new Promise((resolve) => {
-				const audioElement = document.getElementById('audioElement');
+				const audioElement = document.getElementById('audioElement') as HTMLAudioElement;
 
 				if (audioElement) {
 					audioElement.src = audio.src;
 					audioElement.muted = true;
+					audioElement.playbackRate = speechRate;
 
 					audioElement
 						.play()
@@ -918,6 +945,34 @@
 				</button>
 			</div>
 
+			<div class="relative">
+				<button on:click={toggleSpeedMenu} class="p-2 rounded-full bg-gray-100 dark:bg-gray-800">
+					<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<polygon points="8,5 8,19 19,12" fill="currentColor"/>
+						<path d="M12 2A10 10 0 0 0 12 22" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2,2"/>
+						<path d="M12 2A10 10 0 0 1 12 22" fill="none" stroke="currentColor" stroke-width="2"/>
+					</svg>
+				</button>
+				{#if showSpeedMenu}
+					<div 
+						class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg"
+						on:click|self={() => showSpeedMenu = false}
+						role="menu"
+						tabindex="0"
+					>
+						{#each speedOptions as speed}
+							<button 
+								on:click={() => setSpeedRate(speed)}
+								class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 {speechRate === speed ? 'bg-gray-200 dark:bg-gray-600' : ''}"
+								role="menuitem"
+							>
+								{speed}x
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
 			<div>
 				<button
 					class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"

From b33ab6c5fd772f5fdfc6726590319a198f5bcc05 Mon Sep 17 00:00:00 2001
From: Zohaib Rauf <zabirauf@gmail.com>
Date: Mon, 9 Sep 2024 21:33:48 -0700
Subject: [PATCH 2/4] Updated to use Dropdown menu which is being used
 elsewhere in app

---
 .../chat/MessageInput/CallOverlay.svelte      | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index b16b64a46..59e0549b9 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { config, models, settings, showCallOverlay } from '$lib/stores';
 	import { onMount, tick, getContext, onDestroy, createEventDispatcher } from 'svelte';
+	import { DropdownMenu } from 'bits-ui';
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import { flyAndScale } from '$lib/utils/transitions';
 
 	const dispatch = createEventDispatcher();
 
@@ -55,7 +58,7 @@
 	let speechRate = 1;
 	let showSpeedMenu = false;
 
-	const speedOptions = [0.5, 1, 1.5, 2, 2.5, 3];
+	const speedOptions = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5];
 
 	const toggleSpeedMenu = () => {
 		showSpeedMenu = !showSpeedMenu;
@@ -946,31 +949,38 @@
 			</div>
 
 			<div class="relative">
-				<button on:click={toggleSpeedMenu} class="p-2 rounded-full bg-gray-100 dark:bg-gray-800">
-					<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-						<polygon points="8,5 8,19 19,12" fill="currentColor"/>
-						<path d="M12 2A10 10 0 0 0 12 22" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2,2"/>
-						<path d="M12 2A10 10 0 0 1 12 22" fill="none" stroke="currentColor" stroke-width="2"/>
-					</svg>
-				</button>
-				{#if showSpeedMenu}
-					<div 
-						class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg"
-						on:click|self={() => showSpeedMenu = false}
-						role="menu"
-						tabindex="0"
-					>
-						{#each speedOptions as speed}
-							<button 
-								on:click={() => setSpeedRate(speed)}
-								class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 {speechRate === speed ? 'bg-gray-200 dark:bg-gray-600' : ''}"
-								role="menuitem"
-							>
-								{speed}x
-							</button>
-						{/each}
+				<Dropdown bind:show={showSpeedMenu}>
+					<button class="p-2 rounded-full bg-gray-50 dark:bg-gray-900">
+						<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							<polygon points="8,5 8,19 19,12" fill="currentColor"/>
+							<path d="M12 2A10 10 0 0 0 12 22" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2,2"/>
+							<path d="M12 2A10 10 0 0 1 12 22" fill="none" stroke="currentColor" stroke-width="2"/>
+						</svg>
+					</button>
+
+					<div slot="content">
+						<DropdownMenu.Content
+							class="w-full max-w-[180px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-sm"
+							sideOffset={6}
+							side="top"
+							align="start"
+							transition={flyAndScale}
+						>
+							{#each speedOptions as speed}
+								<DropdownMenu.Item
+									class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md {speechRate === speed ? 'bg-gray-200 dark:bg-gray-600' : ''}"
+									on:click={() => setSpeedRate(speed)}
+								>
+									<div class="flex items-center">
+										<div class="line-clamp-1">
+											{speed}x
+										</div>
+									</div>
+								</DropdownMenu.Item>
+							{/each}
+						</DropdownMenu.Content>
 					</div>
-				{/if}
+				</Dropdown>
 			</div>
 
 			<div>

From 62b01c5f8e62d75934c9389a1138658b4cde167e Mon Sep 17 00:00:00 2001
From: Zohaib Rauf <zabirauf@gmail.com>
Date: Mon, 9 Sep 2024 21:57:53 -0700
Subject: [PATCH 3/4] Cleaned up

---
 .../chat/MessageInput/CallOverlay.svelte      | 54 ++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index 59e0549b9..ddd892413 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -7,12 +7,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	import {
-		blobToFile,
-		calculateSHA256,
-		extractSentencesForAudio,
-		findWordIndices
-	} from '$lib/utils';
+	import { blobToFile } from '$lib/utils';
 	import { generateEmoji } from '$lib/apis';
 	import { synthesizeOpenAISpeech, transcribeAudio } from '$lib/apis/audio';
 
@@ -55,31 +50,6 @@
 	let videoInputDevices = [];
 	let selectedVideoInputDeviceId = null;
 
-	let speechRate = 1;
-	let showSpeedMenu = false;
-
-	const speedOptions = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5];
-
-	const toggleSpeedMenu = () => {
-		showSpeedMenu = !showSpeedMenu;
-	};
-
-	const setSpeedRate = (rate: number) => {
-		speechRate = rate;
-		showSpeedMenu = false;
-		updateAudioSpeed();
-	};
-
-	const updateAudioSpeed = () => {
-		if (currentUtterance) {
-			currentUtterance.rate = speechRate;
-		}
-		const audioElement = document.getElementById('audioElement') as HTMLAudioElement;
-		if (audioElement) {
-			audioElement.playbackRate = speechRate;
-		}
-	};
-
 	const getVideoInputDevices = async () => {
 		const devices = await navigator.mediaDevices.enumerateDevices();
 		videoInputDevices = devices.filter((device) => device.kind === 'videoinput');
@@ -460,6 +430,28 @@
 
 	let audioAbortController = new AbortController();
 
+	// Audio speed control
+	let speechRate = 1;
+	let showSpeedMenu = false;
+
+	const speedOptions = [2, 1.75, 1.5, 1.25, 1, 0.75, 0.5];
+
+	const setSpeedRate = (rate: number) => {
+		speechRate = rate;
+		showSpeedMenu = false;
+		updateAudioSpeed();
+	};
+
+	const updateAudioSpeed = () => {
+		if (currentUtterance) {
+			currentUtterance.rate = speechRate;
+		}
+		const audioElement = document.getElementById('audioElement') as HTMLAudioElement;
+		if (audioElement) {
+			audioElement.playbackRate = speechRate;
+		}
+	};
+
 	// Audio cache map where key is the content and value is the Audio object.
 	const audioCache = new Map();
 	const emojiCache = new Map();

From 91cd8c76080f42665785da9caca0bea56eb5369c Mon Sep 17 00:00:00 2001
From: Zohaib Rauf <zabirauf@gmail.com>
Date: Mon, 9 Sep 2024 21:59:13 -0700
Subject: [PATCH 4/4] Undid a unnecessary change

---
 src/lib/components/chat/MessageInput/CallOverlay.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index ddd892413..0abe8eef1 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -54,7 +54,7 @@
 		const devices = await navigator.mediaDevices.enumerateDevices();
 		videoInputDevices = devices.filter((device) => device.kind === 'videoinput');
 
-		if (navigator.mediaDevices.getDisplayMedia) {
+		if (!!navigator.mediaDevices.getDisplayMedia) {
 			videoInputDevices = [
 				...videoInputDevices,
 				{