refac

src/lib/components/chat/Chat.svelte

@@ -28,7 +28,8 @@
 		showCallOverlay,
 		currentChatPage,
 		temporaryChatEnabled,
-		mobile
+		mobile,
+		showOverview
 	} from '$lib/stores';
 	import {
 		convertMessagesToHistory,
@@ -292,6 +293,11 @@
 					controlPane.resize(0);
 				}
 			}
+
+			if (!value) {
+				showCallOverlay.set(false);
+				showOverview.set(false);
+			}
 		});
 	});
 

src/lib/components/chat/ChatControls.svelte

@@ -133,7 +133,8 @@
 				}
 			}}
 		>
-			<div class="pr-4 pb-8 flex max-h-full min-h-full" in:slide={{ duration: 200, axis: 'x' }}>
+			{#if $showControls}
+				<div class="pr-4 pb-8 flex max-h-full min-h-full">
 					<div
 						class="w-full {$showOverview && !$showCallOverlay
 							? ' '
@@ -175,6 +176,7 @@
 						{/if}
 					</div>
 				</div>
+			{/if}
 		</Pane>
 	{/if}
 </SvelteFlowProvider>

src/lib/components/chat/MessageInput/CallOverlay.svelte

@@ -525,39 +525,6 @@
 		console.log(`Audio monitoring and playing stopped for message ID ${id}`);
 	};
 
-	onMount(async () => {
-		const setWakeLock = async () => {
-			try {
-				wakeLock = await navigator.wakeLock.request('screen');
-			} catch (err) {
-				// The Wake Lock request has failed - usually system related, such as battery.
-				console.log(err);
-			}
-
-			if (wakeLock) {
-				// Add a listener to release the wake lock when the page is unloaded
-				wakeLock.addEventListener('release', () => {
-					// the wake lock has been released
-					console.log('Wake Lock released');
-				});
-			}
-		};
-
-		if ('wakeLock' in navigator) {
-			await setWakeLock();
-
-			document.addEventListener('visibilitychange', async () => {
-				// Re-request the wake lock if the document becomes visible
-				if (wakeLock !== null && document.visibilityState === 'visible') {
-					await setWakeLock();
-				}
-			});
-		}
-
-		model = $models.find((m) => m.id === modelId);
-
-		startRecording();
-
 	const chatStartHandler = async (e) => {
 		const { id } = e.detail;
 
@@ -612,6 +579,39 @@
 		chatStreaming = false;
 	};
 
+	onMount(async () => {
+		const setWakeLock = async () => {
+			try {
+				wakeLock = await navigator.wakeLock.request('screen');
+			} catch (err) {
+				// The Wake Lock request has failed - usually system related, such as battery.
+				console.log(err);
+			}
+
+			if (wakeLock) {
+				// Add a listener to release the wake lock when the page is unloaded
+				wakeLock.addEventListener('release', () => {
+					// the wake lock has been released
+					console.log('Wake Lock released');
+				});
+			}
+		};
+
+		if ('wakeLock' in navigator) {
+			await setWakeLock();
+
+			document.addEventListener('visibilitychange', async () => {
+				// Re-request the wake lock if the document becomes visible
+				if (wakeLock !== null && document.visibilityState === 'visible') {
+					await setWakeLock();
+				}
+			});
+		}
+
+		model = $models.find((m) => m.id === modelId);
+
+		startRecording();
+
 		eventTarget.addEventListener('chat:start', chatStartHandler);
 		eventTarget.addEventListener('chat', chatEventHandler);
 		eventTarget.addEventListener('chat:finish', chatFinishHandler);
@@ -632,7 +632,15 @@
 	});
 
 	onDestroy(async () => {
+		eventTarget.removeEventListener('chat:start', chatStartHandler);
+		eventTarget.removeEventListener('chat', chatEventHandler);
+		eventTarget.removeEventListener('chat:finish', chatFinishHandler);
+
+		audioAbortController.abort();
+		await tick();
+
 		await stopAllAudio();
+
 		await stopRecordingCallback(false);
 		await stopCamera();
 	});