refac: call overlay styling

src/lib/components/chat/Chat.svelte

@@ -1634,6 +1634,25 @@
 
 <audio id="audioElement" src="" style="display: none;" />
 
+<ChatControls
+	models={selectedModelIds.reduce((a, e, i, arr) => {
+		const model = $models.find((m) => m.id === e);
+		if (model) {
+			return [...a, model];
+		}
+		return a;
+	}, [])}
+	bind:show={showControls}
+	bind:chatFiles
+	bind:params
+	bind:files
+	{submitPrompt}
+	{stopResponse}
+	modelId={selectedModelIds?.at(0) ?? null}
+	chatId={$chatId}
+	{eventTarget}
+/>
+
 <EventConfirmDialog
 	bind:show={showEventConfirmation}
 	title={eventConfirmationTitle}
@@ -1653,17 +1672,6 @@
 	}}
 />
 
-{#if $showCallOverlay}
-	<CallOverlay
-		{submitPrompt}
-		{stopResponse}
-		bind:files
-		modelId={selectedModelIds?.at(0) ?? null}
-		chatId={$chatId}
-		{eventTarget}
-	/>
-{/if}
-
 {#if !chatIdProp || (loaded && chatIdProp)}
 	<div
 		class="h-screen max-h-[100dvh] {$showSidebar
@@ -1774,21 +1782,11 @@
 					{messages}
 					{submitPrompt}
 					{stopResponse}
+					on:call={() => {
+						showControls = true;
+					}}
 				/>
 			</div>
 		</div>
-
-		<ChatControls
-			models={selectedModelIds.reduce((a, e, i, arr) => {
-				const model = $models.find((m) => m.id === e);
-				if (model) {
-					return [...a, model];
-				}
-				return a;
-			}, [])}
-			bind:show={showControls}
-			bind:chatFiles
-			bind:params
-		/>
 	</div>
 {/if}

src/lib/components/chat/ChatControls.svelte

@@ -3,6 +3,8 @@
 	import Modal from '../common/Modal.svelte';
 	import Controls from './Controls/Controls.svelte';
 	import { onMount } from 'svelte';
+	import { mobile, showCallOverlay } from '$lib/stores';
+	import CallOverlay from './MessageInput/CallOverlay.svelte';
 
 	export let show = false;
 
@@ -12,6 +14,12 @@
 	export let chatFiles = [];
 	export let params = {};
 
+	export let eventTarget: EventTarget;
+	export let submitPrompt: Function;
+	export let stopResponse: Function;
+	export let files;
+	export let modelId;
+
 	let largeScreen = false;
 	onMount(() => {
 		// listen to resize 1024px
@@ -42,6 +50,16 @@
 				<div
 					class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
 				>
+					{#if $showCallOverlay}
+						<CallOverlay
+							bind:files
+							{submitPrompt}
+							{stopResponse}
+							{modelId}
+							{chatId}
+							{eventTarget}
+						/>
+					{:else}
 						<Controls
 							on:close={() => {
 								show = false;
@@ -50,10 +68,19 @@
 							bind:chatFiles
 							bind:params
 						/>
+					{/if}
 				</div>
 			</div>
 		</div>
 	{/if}
+{:else if $showCallOverlay}
+	<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
+		<div
+			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
+		>
+			<CallOverlay bind:files {submitPrompt} {stopResponse} {modelId} {chatId} {eventTarget} />
+		</div>
+	</div>
 {:else}
 	<Modal bind:show>
 		<div class="  px-6 py-4 h-full">

src/lib/components/chat/Controls/Controls.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
@@ -10,9 +10,7 @@
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
 	import { user } from '$lib/stores';
-
 	export let models = [];
-
 	export let chatFiles = [];
 	export let params = {};
 </script>

src/lib/components/chat/MessageInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { onMount, tick, getContext } from 'svelte';
+	import { onMount, tick, getContext, createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 
 	import {
 		type Model,
@@ -762,10 +763,14 @@
 													}
 													// check if user has access to getUserMedia
 													try {
-														await navigator.mediaDevices.getUserMedia({ audio: true });
+														let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 														// If the user grants the permission, proceed to show the call overlay
 
+														stream.getTracks().forEach((track) => track.stop());
+														stream = null;
+
 														showCallOverlay.set(true);
+														dispatch('call');
 													} catch (err) {
 														// If the user denies the permission or an error occurs, show an error message
 														toast.error($i18n.t('Permission denied when accessing media devices'));

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

@@ -19,12 +19,9 @@
 	const i18n = getContext('i18n');
 
 	export let eventTarget: EventTarget;
-
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
-
 	export let files;
-
 	export let chatId;
 	export let modelId;
 
@@ -631,11 +628,7 @@
 </script>
 
 {#if $showCallOverlay}
-	<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
-		<div
-			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
-		>
-			<div class="max-w-lg w-full h-screen max-h-[100dvh] flex flex-col justify-between p-3 md:p-6">
+	<div class="max-w-lg w-full h-full max-h-[100dvh] flex flex-col justify-between p-3 md:p-6">
 		{#if camera}
 			<button
 				type="button"
@@ -798,9 +791,7 @@
 					{/if}
 				</button>
 			{:else}
-						<div
-							class="relative flex video-container w-full max-h-full pt-2 pb-4 md:py-6 px-2 h-full"
-						>
+				<div class="relative flex video-container w-full max-h-full pt-2 pb-4 md:py-6 px-2 h-full">
 					<video
 						id="camera-feed"
 						autoplay
@@ -938,6 +929,4 @@
 			</div>
 		</div>
 	</div>
-		</div>
-	</div>
 {/if}