feat: call ui scaffold

src/lib/components/chat/MessageInput.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { onMount, tick, getContext } from 'svelte';
-	import { type Model, mobile, settings, showSidebar, models, config } from '$lib/stores';
+	import {
+		type Model,
+		mobile,
+		settings,
+		showSidebar,
+		models,
+		config,
+		showCallOverlay
+	} from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
 	import {
@@ -889,7 +897,7 @@
 												class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center"
 												type="button"
 												on:click={() => {
-													console.log('call');
+													showCallOverlay.set(true);
 												}}
 											>
 												<Headphone className="size-6" />

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { showCallOverlay } from '$lib/stores';
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	onMount(async () => {
+		console.log('wip');
+	});
+</script>
+
+<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"
+	>
+		<div class="max-w-md w-full h-screen flex flex-col justify-between p-6">
+			<div>
+				<!-- navbar -->
+			</div>
+
+			<div class="flex justify-center items-center w-ull">
+				<div class=" size-44 bg-black dark:bg-white rounded-full animate-pulse" />
+			</div>
+
+			<div class="flex justify-between items-center pb-2 w-full">
+				<div>
+					<button class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<div class=" line-clamp-1 text-sm font-medium">Listening...</div>
+
+				<div>
+					<button
+						class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
+						on:click={async () => {
+							showCallOverlay.set(false);
+						}}
+						type="button"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/lib/stores/index.ts

@@ -50,6 +50,7 @@ export const showSidebar = writable(false);
 export const showSettings = writable(false);
 export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
+export const showCallOverlay = writable(false);
 
 export type Model = OpenAIModel | OllamaModel;
 

src/routes/(app)/+layout.svelte

@@ -24,7 +24,8 @@
 		tags,
 		banners,
 		showChangelog,
-		config
+		config,
+		showCallOverlay
 	} from '$lib/stores';
 	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 	import { compareVersion } from '$lib/utils';
@@ -39,6 +40,7 @@
 	import Help from '$lib/components/layout/Help.svelte';
 	import AccountPending from '$lib/components/layout/Overlay/AccountPending.svelte';
 	import { error } from '@sveltejs/kit';
+	import CallOverlay from '$lib/components/chat/MessageInput/CallOverlay.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -190,6 +192,10 @@
 		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"
 	>
 		{#if loaded}
+			{#if $showCallOverlay}
+				<CallOverlay />
+			{/if}
+
 			{#if !['user', 'admin'].includes($user.role)}
 				<AccountPending />
 			{:else if localDBChats.length > 0}