CallOverlay.svelte 17.5 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { settings, showCallOverlay } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
	import { onMount, tick, getContext } from 'svelte';

Timothy J. Baek's avatar
Timothy J. Baek committed
5
6
	import { blobToFile, calculateSHA256, extractSentences, findWordIndices } from '$lib/utils';
	import { synthesizeOpenAISpeech, transcribeAudio } from '$lib/apis/audio';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
7
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
8

Timothy J. Baek's avatar
Timothy J. Baek committed
9
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import VideoInputMenu from './CallOverlay/VideoInputMenu.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
11
	import { get } from 'svelte/store';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
12

Timothy J. Baek's avatar
Timothy J. Baek committed
13
14
	const i18n = getContext('i18n');

15
	export let submitPrompt: Function;
Timothy J. Baek's avatar
Timothy J. Baek committed
16
	export let files;
17

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
18
19
	let loading = false;
	let confirmed = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
20

Timothy J. Baek's avatar
Timothy J. Baek committed
21
22
23
	let camera = false;
	let cameraStream = null;

24
	let assistantSpeaking = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
	let assistantAudio = {};
	let assistantAudioIdx = null;
27

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
28
	let rmsLevel = 0;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
29
	let hasStartedSpeaking = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
30

Timothy J. Baek's avatar
Timothy J. Baek committed
31
	let currentUtterance = null;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

	let mediaRecorder;
	let audioChunks = [];

	const MIN_DECIBELS = -45;
	const VISUALIZER_BUFFER_LENGTH = 300;

	// Function to calculate the RMS level from time domain data
	const calculateRMS = (data: Uint8Array) => {
		let sumSquares = 0;
		for (let i = 0; i < data.length; i++) {
			const normalizedValue = (data[i] - 128) / 128; // Normalize the data
			sumSquares += normalizedValue * normalizedValue;
		}
		return Math.sqrt(sumSquares / data.length);
	};

	const normalizeRMS = (rms) => {
		rms = rms * 10;
		const exp = 1.5; // Adjust exponent value; values greater than 1 expand larger numbers more and compress smaller numbers more
		const scaledRMS = Math.pow(rms, exp);

		// Scale between 0.01 (1%) and 1.0 (100%)
		return Math.min(1.0, Math.max(0.01, scaledRMS));
	};

	const analyseAudio = (stream) => {
		const audioContext = new AudioContext();
		const audioStreamSource = audioContext.createMediaStreamSource(stream);

		const analyser = audioContext.createAnalyser();
		analyser.minDecibels = MIN_DECIBELS;
		audioStreamSource.connect(analyser);

		const bufferLength = analyser.frequencyBinCount;

		const domainData = new Uint8Array(bufferLength);
		const timeDomainData = new Uint8Array(analyser.fftSize);

		let lastSoundTime = Date.now();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
72
		hasStartedSpeaking = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
73
74
75

		const detectSound = () => {
			const processFrame = () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
76
77
78
79
80
81
82
				if (!mediaRecorder || !$showCallOverlay) {
					if (mediaRecorder) {
						mediaRecorder.stop();
					}

					return;
				}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
83
84
85
86
87
88
89
90
91
				analyser.getByteTimeDomainData(timeDomainData);
				analyser.getByteFrequencyData(domainData);

				// Calculate RMS level from time domain data
				rmsLevel = calculateRMS(timeDomainData);

				// Check if initial speech/noise has started
				const hasSound = domainData.some((value) => value > 0);
				if (hasSound) {
Timothy J. Baek's avatar
Timothy J. Baek committed
92
					stopAllAudio();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
					hasStartedSpeaking = true;
					lastSoundTime = Date.now();
				}

				// Start silence detection only after initial speech/noise has been detected
				if (hasStartedSpeaking) {
					if (Date.now() - lastSoundTime > 2000) {
						confirmed = true;

						if (mediaRecorder) {
							mediaRecorder.stop();
						}
					}
				}

				window.requestAnimationFrame(processFrame);
			};

			window.requestAnimationFrame(processFrame);
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
113

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
114
115
116
		detectSound();
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
119
120
121
122
123
124
125
	const stopAllAudio = () => {
		if (currentUtterance) {
			speechSynthesis.cancel();
			currentUtterance = null;
		}
		if (assistantAudio[assistantAudioIdx]) {
			assistantAudio[assistantAudioIdx].pause();
			assistantAudio[assistantAudioIdx].currentTime = 0;
		}
126
127
128
129
130

		const audioElement = document.getElementById('audioElement');
		audioElement.pause();
		audioElement.currentTime = 0;

Timothy J. Baek's avatar
Timothy J. Baek committed
131
132
133
134
		assistantSpeaking = false;
	};

	const playAudio = (idx) => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
135
136
137
138
139
		if ($showCallOverlay) {
			return new Promise((res) => {
				assistantAudioIdx = idx;
				const audioElement = document.getElementById('audioElement');
				const audio = assistantAudio[idx];
140

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
141
142
				audioElement.src = audio.src; // Assume `assistantAudio` has objects with a `src` property
				audioElement.play();
143

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
144
145
				audioElement.onended = async (e) => {
					await new Promise((r) => setTimeout(r, 300));
Timothy J. Baek's avatar
Timothy J. Baek committed
146

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
147
148
149
					if (Object.keys(assistantAudio).length - 1 === idx) {
						assistantSpeaking = false;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
150

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
151
152
153
154
155
156
					res(e);
				};
			});
		} else {
			return Promise.resolve();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
	};

	const getOpenAISpeech = async (text) => {
		const res = await synthesizeOpenAISpeech(
			localStorage.token,
			$settings?.audio?.speaker ?? 'alloy',
			text,
			$settings?.audio?.model ?? 'tts-1'
		).catch((error) => {
			toast.error(error);
			assistantSpeaking = false;
			return null;
		});

		if (res) {
			const blob = await res.blob();
			const blobUrl = URL.createObjectURL(blob);
			const audio = new Audio(blobUrl);
			assistantAudio = audio;
		}
	};

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
179
180
181
182
183
184
185
186
187
188
189
190
	const transcribeHandler = async (audioBlob) => {
		// Create a blob from the audio chunks

		await tick();
		const file = blobToFile(audioBlob, 'recording.wav');

		const res = await transcribeAudio(localStorage.token, file).catch((error) => {
			toast.error(error);
			return null;
		});

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
191
			console.log(res.text);
192

Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197
198
199
200
201
			if (res.text !== '') {
				const _responses = await submitPrompt(res.text);
				console.log(_responses);

				if (_responses.at(0)) {
					const content = _responses[0];
					if (content) {
						assistantSpeakingHandler(content);
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
204
205
				}
			}
		}
	};
206

Timothy J. Baek's avatar
Timothy J. Baek committed
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
	const assistantSpeakingHandler = async (content) => {
		assistantSpeaking = true;

		if (($settings?.audio?.TTSEngine ?? '') == '') {
			currentUtterance = new SpeechSynthesisUtterance(content);
			speechSynthesis.speak(currentUtterance);
		} else if ($settings?.audio?.TTSEngine === 'openai') {
			console.log('openai');

			const sentences = extractSentences(content).reduce((mergedTexts, currentText) => {
				const lastIndex = mergedTexts.length - 1;
				if (lastIndex >= 0) {
					const previousText = mergedTexts[lastIndex];
					const wordCount = previousText.split(/\s+/).length;
					if (wordCount < 2) {
						mergedTexts[lastIndex] = previousText + ' ' + currentText;
223
					} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
224
						mergedTexts.push(currentText);
225
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
				} else {
					mergedTexts.push(currentText);
				}
				return mergedTexts;
			}, []);

			console.log(sentences);

			let lastPlayedAudioPromise = Promise.resolve(); // Initialize a promise that resolves immediately

			for (const [idx, sentence] of sentences.entries()) {
				const res = await synthesizeOpenAISpeech(
					localStorage.token,
					$settings?.audio?.speaker,
					sentence,
					$settings?.audio?.model
				).catch((error) => {
					toast.error(error);

					assistantSpeaking = false;
					return null;
				});

				if (res) {
					const blob = await res.blob();
					const blobUrl = URL.createObjectURL(blob);
					const audio = new Audio(blobUrl);
					assistantAudio[idx] = audio;
					lastPlayedAudioPromise = lastPlayedAudioPromise.then(() => playAudio(idx));
255
256
				}
			}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
257
258
259
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
260
	const stopRecordingCallback = async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
261
262
263
264
		if ($showCallOverlay) {
			if (confirmed) {
				loading = true;

Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
267
268
269
270
271
272
273
274
275
276
				if (cameraStream) {
					const imageUrl = takeScreenshot();

					files = [
						...files,
						{
							type: 'image',
							url: imageUrl
						}
					];
				}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
277
278
279
280
281
282
283
284
285
286
				const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
				await transcribeHandler(audioBlob);

				confirmed = false;
				loading = false;
			}
			audioChunks = [];
			mediaRecorder = false;

			startRecording();
Timothy J. Baek's avatar
Timothy J. Baek committed
287
288
289
		} else {
			audioChunks = [];
			mediaRecorder = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
290
291
292
293
294
295
296
297
298
299
300
		}
	};

	const startRecording = async () => {
		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
		mediaRecorder = new MediaRecorder(stream);
		mediaRecorder.onstart = () => {
			console.log('Recording started');
			audioChunks = [];
			analyseAudio(stream);
		};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
301
302
303
304
305
		mediaRecorder.ondataavailable = (event) => {
			if (hasStartedSpeaking) {
				audioChunks.push(event.data);
			}
		};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
306
307
308
		mediaRecorder.onstop = async () => {
			console.log('Recording stopped');

Timothy J. Baek's avatar
Timothy J. Baek committed
309
			await stopRecordingCallback();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
310
311
312
313
		};
		mediaRecorder.start();
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
	let videoInputDevices = [];
	let selectedVideoInputDeviceId = null;

	const getVideoInputDevices = async () => {
		const devices = await navigator.mediaDevices.enumerateDevices();
		videoInputDevices = devices.filter((device) => device.kind === 'videoinput');

		videoInputDevices = [
			...videoInputDevices,
			{
				deviceId: 'screen',
				label: 'Screen Share'
			}
		];

		console.log(videoInputDevices);

		if (selectedVideoInputDeviceId === null && videoInputDevices.length > 0) {
			selectedVideoInputDeviceId = videoInputDevices[0].deviceId;
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
336
	const startCamera = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
337
338
		await getVideoInputDevices();

Timothy J. Baek's avatar
Timothy J. Baek committed
339
340
341
342
		if (cameraStream === null) {
			camera = true;
			await tick();
			try {
Timothy J. Baek's avatar
Timothy J. Baek committed
343
				await startVideoStream();
Timothy J. Baek's avatar
Timothy J. Baek committed
344
345
346
347
348
349
			} catch (err) {
				console.error('Error accessing webcam: ', err);
			}
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
	const startVideoStream = async () => {
		const video = document.getElementById('camera-feed');
		if (video) {
			if (selectedVideoInputDeviceId === 'screen') {
				cameraStream = await navigator.mediaDevices.getDisplayMedia({
					video: {
						cursor: 'always'
					},
					audio: false
				});
			} else {
				cameraStream = await navigator.mediaDevices.getUserMedia({
					video: {
						deviceId: selectedVideoInputDeviceId ? { exact: selectedVideoInputDeviceId } : undefined
					}
				});
			}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
368
369
370
371
372
			if (cameraStream) {
				await getVideoInputDevices();
				video.srcObject = cameraStream;
				await video.play();
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
373
374
375
376
377
378
379
380
381
382
383
384
		}
	};

	const stopVideoStream = async () => {
		if (cameraStream) {
			const tracks = cameraStream.getTracks();
			tracks.forEach((track) => track.stop());
		}

		cameraStream = null;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
385
386
387
388
389
390
391
392
393
	const takeScreenshot = () => {
		const video = document.getElementById('camera-feed');
		const canvas = document.getElementById('camera-canvas');

		if (!canvas) {
			return;
		}

		const context = canvas.getContext('2d');
Timothy J. Baek's avatar
Timothy J. Baek committed
394

Timothy J. Baek's avatar
Timothy J. Baek committed
395
396
397
		// Make the canvas match the video dimensions
		canvas.width = video.videoWidth;
		canvas.height = video.videoHeight;
Timothy J. Baek's avatar
Timothy J. Baek committed
398
399
400

		// Draw the image from the video onto the canvas
		context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
404
405
406
407
408

		// Convert the canvas to a data base64 URL and console log it
		const dataURL = canvas.toDataURL('image/png');
		console.log(dataURL);

		return dataURL;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
409
410
	const stopCamera = async () => {
		await stopVideoStream();
Timothy J. Baek's avatar
Timothy J. Baek committed
411
412
413
		camera = false;
	};

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
414
415
	$: if ($showCallOverlay) {
		startRecording();
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
	} else {
		stopCamera();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
418
419
420
421
	}
</script>

{#if $showCallOverlay}
422
	<audio id="audioElement" src="" style="display: none;" />
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
423
424
425
426
	<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"
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
427
			<div class="max-w-lg w-full h-screen max-h-[100dvh] flex flex-col justify-between p-6">
Timothy J. Baek's avatar
Timothy J. Baek committed
428
429
430
431
432
433
434
435
436
437
438
				{#if camera}
					<div class="flex justify-center items-center pt-2 w-full h-20">
						{#if loading}
							<svg
								class="size-12 text-gray-900 dark:text-gray-400"
								viewBox="0 0 24 24"
								fill="currentColor"
								xmlns="http://www.w3.org/2000/svg"
								><style>
									.spinner_qM83 {
										animation: spinner_8HQG 1.05s infinite;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
439
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
440
441
									.spinner_oXPr {
										animation-delay: 0.1s;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
442
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
443
444
									.spinner_ZTLf {
										animation-delay: 0.2s;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
445
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
									@keyframes spinner_8HQG {
										0%,
										57.14% {
											animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
											transform: translate(0);
										}
										28.57% {
											animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
											transform: translateY(-6px);
										}
										100% {
											transform: translate(0);
										}
									}
								</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
									class="spinner_qM83 spinner_oXPr"
									cx="12"
									cy="12"
									r="3"
								/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
							>
						{:else}
							<div
								class=" {rmsLevel * 100 > 4
									? ' size-[4.5rem]'
									: rmsLevel * 100 > 2
									? ' size-16'
									: rmsLevel * 100 > 1
									? 'size-14'
									: 'size-12'}  transition-all bg-black dark:bg-white rounded-full"
							/>
						{/if}
						<!-- navbar -->
					</div>
				{/if}

				<div class="flex justify-center items-center w-full flex-1">
					{#if !camera}
						{#if loading}
							<svg
								class="size-44 text-gray-900 dark:text-gray-400"
								viewBox="0 0 24 24"
								fill="currentColor"
								xmlns="http://www.w3.org/2000/svg"
								><style>
									.spinner_qM83 {
										animation: spinner_8HQG 1.05s infinite;
									}
									.spinner_oXPr {
										animation-delay: 0.1s;
									}
									.spinner_ZTLf {
										animation-delay: 0.2s;
									}
									@keyframes spinner_8HQG {
										0%,
										57.14% {
											animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
											transform: translate(0);
										}
										28.57% {
											animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
											transform: translateY(-6px);
										}
										100% {
											transform: translate(0);
										}
									}
								</style><circle class="spinner_qM83" cx="4" cy="12" r="3" /><circle
									class="spinner_qM83 spinner_oXPr"
									cx="12"
									cy="12"
									r="3"
								/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3" /></svg
							>
						{:else}
							<div
								class=" {rmsLevel * 100 > 4
									? ' size-52'
									: rmsLevel * 100 > 2
									? 'size-48'
									: rmsLevel * 100 > 1
									? 'size-[11.5rem]'
									: 'size-44'}  transition-all bg-black dark:bg-white rounded-full"
							/>
						{/if}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
532
					{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
						<div class="relative video-container w-full h-full py-6 px-2">
							<video
								id="camera-feed"
								autoplay
								class="w-full h-full object-cover object-center rounded-2xl"
							/>

							<canvas id="camera-canvas" style="display:none;" />

							<div class=" absolute top-8 left-4">
								<button
									type="button"
									class="p-1.5 text-white cursor-pointer backdrop-blur-xl bg-black/10 rounded-full"
									on:click={() => {
										stopCamera();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 16 16"
										fill="currentColor"
										class="size-6"
									>
										<path
											d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
										/>
									</svg>
								</button>
							</div>
						</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
563
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
564
565
				</div>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
566
567
				<div class="flex justify-between items-center pb-2 w-full">
					<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
568
569
570
571
572
573
574
575
						{#if camera}
							<VideoInputMenu
								devices={videoInputDevices}
								on:change={async (e) => {
									console.log(e.detail);
									selectedVideoInputDeviceId = e.detail;
									await stopVideoStream();
									await startVideoStream();
Timothy J. Baek's avatar
Timothy J. Baek committed
576
577
								}}
							>
Timothy J. Baek's avatar
Timothy J. Baek committed
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
								<button class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900" type="button">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="size-5"
									>
										<path
											fill-rule="evenodd"
											d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							</VideoInputMenu>
						{:else}
							<Tooltip content="Camera">
								<button
									class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
									type="button"
									on:click={() => {
										startCamera();
									}}
Timothy J. Baek's avatar
Timothy J. Baek committed
601
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
									<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>
							</Tooltip>
						{/if}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
624
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
625

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
626
					<div>
627
						<button type="button">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
628
629
630
631
							<div class=" line-clamp-1 text-sm font-medium">
								{#if loading}
									Thinking...
								{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
632
									Listening...
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
633
634
635
636
637
638
639
640
641
642
643
644
								{/if}
							</div>
						</button>
					</div>

					<div>
						<button
							class=" p-3 rounded-full bg-gray-50 dark:bg-gray-900"
							on:click={async () => {
								showCallOverlay.set(false);
							}}
							type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
645
						>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
646
647
648
649
650
651
652
653
654
655
656
657
							<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
658
659
660
661
				</div>
			</div>
		</div>
	</div>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
662
{/if}