MessageInput.svelte 29.1 KB
Newer Older
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
3
	import { onMount, tick, getContext } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
	import { settings, showSidebar } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
5
	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
6

Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
	import Prompts from './MessageInput/PromptCommands.svelte';
	import Suggestions from './MessageInput/Suggestions.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
9
	import { uploadDocToVectorDB, uploadWebToVectorDB } from '$lib/apis/rag';
Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
11
	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
12
	import Documents from './MessageInput/Documents.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
13
	import Models from './MessageInput/Models.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
14
	import { transcribeAudio } from '$lib/apis/audio';
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	import Tooltip from '../common/Tooltip.svelte';
16
	import Page from '../../../routes/(app)/+page.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
17

18
19
	const i18n = getContext('i18n');

20
21
22
23
	export let submitPrompt: Function;
	export let stopResponse: Function;

	export let autoScroll = true;
Ased Mammad's avatar
Ased Mammad committed
24
	let chatTextAreaElement: HTMLTextAreaElement;
25
	let filesInputElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
26

Timothy J. Baek's avatar
Timothy J. Baek committed
27
	let promptsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
28
	let documentsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
29
	let modelsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
30

31
	let inputFiles;
32
	let dragged = false;
33

Timothy J. Baek's avatar
Timothy J. Baek committed
34
35
36
	let user = null;
	let chatInputPlaceholder = '';

37
38
	export let files = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
39
	export let fileUploadEnabled = true;
40
41
42
43
44
45
46
	export let speechRecognitionEnabled = true;

	export let prompt = '';
	export let messages = [];

	let speechRecognition;

Timothy J. Baek's avatar
Timothy J. Baek committed
47
	$: if (prompt) {
48
49
50
		if (chatTextAreaElement) {
			chatTextAreaElement.style.height = '';
			chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px';
Timothy J. Baek's avatar
Timothy J. Baek committed
51
52
53
		}
	}

Timothy J. Baek's avatar
Timothy J. Baek committed
54
55
56
57
58
	let mediaRecorder;
	let audioChunks = [];
	let isRecording = false;
	const MIN_DECIBELS = -45;

Timothy J. Baek's avatar
Timothy J. Baek committed
59
60
61
62
63
	const scrollToBottom = () => {
		const element = document.getElementById('messages-container');
		element.scrollTop = element.scrollHeight;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
	const startRecording = async () => {
		const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
		mediaRecorder = new MediaRecorder(stream);
		mediaRecorder.onstart = () => {
			isRecording = true;
			console.log('Recording started');
		};
		mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
		mediaRecorder.onstop = async () => {
			isRecording = false;
			console.log('Recording stopped');

			// Create a blob from the audio chunks
			const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });

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

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

			if (res) {
				prompt = res.text;
				await tick();
89
				chatTextAreaElement?.focus();
Timothy J. Baek's avatar
Timothy J. Baek committed
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

				if (prompt !== '' && $settings?.speechAutoSend === true) {
					submitPrompt(prompt, user);
				}
			}

			// saveRecording(audioBlob);
			audioChunks = [];
		};

		// Start recording
		mediaRecorder.start();

		// Monitor silence
		monitorSilence(stream);
	};

	const monitorSilence = (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);

		let lastSoundTime = Date.now();

		const detectSound = () => {
			analyser.getByteFrequencyData(domainData);

			if (domainData.some((value) => value > 0)) {
				lastSoundTime = Date.now();
			}

			if (isRecording && Date.now() - lastSoundTime > 3000) {
				mediaRecorder.stop();
				audioContext.close();
				return;
			}

			window.requestAnimationFrame(detectSound);
		};

		window.requestAnimationFrame(detectSound);
	};

	const saveRecording = (blob) => {
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		document.body.appendChild(a);
		a.style = 'display: none';
		a.href = url;
		a.download = 'recording.wav';
		a.click();
		window.URL.revokeObjectURL(url);
	};

149
150
151
	const speechRecognitionHandler = () => {
		// Check if SpeechRecognition is supported

Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
155
		if (isRecording) {
			if (speechRecognition) {
				speechRecognition.stop();
			}
156

Timothy J. Baek's avatar
Timothy J. Baek committed
157
158
159
160
161
			if (mediaRecorder) {
				mediaRecorder.stop();
			}
		} else {
			isRecording = true;
162

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
163
			if ($settings?.audio?.STTEngine ?? '' !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
164
				startRecording();
165
			} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
				if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
					// Create a SpeechRecognition object
					speechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

					// Set continuous to true for continuous recognition
					speechRecognition.continuous = true;

					// Set the timeout for turning off the recognition after inactivity (in milliseconds)
					const inactivityTimeout = 3000; // 3 seconds

					let timeoutId;
					// Start recognition
					speechRecognition.start();

					// Event triggered when speech is recognized
					speechRecognition.onresult = async (event) => {
						// Clear the inactivity timeout
						clearTimeout(timeoutId);

						// Handle recognized speech
						console.log(event);
						const transcript = event.results[Object.keys(event.results).length - 1][0].transcript;

						prompt = `${prompt}${transcript}`;

						await tick();
192
						chatTextAreaElement?.focus();
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

						// Restart the inactivity timeout
						timeoutId = setTimeout(() => {
							console.log('Speech recognition turned off due to inactivity.');
							speechRecognition.stop();
						}, inactivityTimeout);
					};

					// Event triggered when recognition is ended
					speechRecognition.onend = function () {
						// Restart recognition after it ends
						console.log('recognition ended');
						isRecording = false;
						if (prompt !== '' && $settings?.speechAutoSend === true) {
							submitPrompt(prompt, user);
						}
					};

					// Event triggered when an error occurs
					speechRecognition.onerror = function (event) {
						console.log(event);
Ased Mammad's avatar
Ased Mammad committed
214
						toast.error($i18n.t(`Speech recognition error: {{error}}`, { error: event.error }));
Timothy J. Baek's avatar
Timothy J. Baek committed
215
216
217
						isRecording = false;
					};
				} else {
218
					toast.error($i18n.t('SpeechRecognition API is not supported in this browser.'));
Timothy J. Baek's avatar
Timothy J. Baek committed
219
				}
220
221
222
			}
		}
	};
223

224
225
226
227
228
229
230
231
232
233
234
	const uploadDoc = async (file) => {
		console.log(file);

		const doc = {
			type: 'doc',
			name: file.name,
			collection_name: '',
			upload_status: false,
			error: ''
		};

Dave Bauman's avatar
Dave Bauman committed
235
236
		try {
			files = [...files, doc];
Timothy J. Baek's avatar
Timothy J. Baek committed
237
238
239
240
241
242
243
244
245
246
247
248
249
250

			if (['audio/mpeg', 'audio/wav'].includes(file['type'])) {
				const res = await transcribeAudio(localStorage.token, file).catch((error) => {
					toast.error(error);
					return null;
				});

				if (res) {
					console.log(res);
					const blob = new Blob([res.text], { type: 'text/plain' });
					file = blobToFile(blob, `${file.name}.txt`);
				}
			}

Dave Bauman's avatar
Dave Bauman committed
251
252
253
254
255
256
257
258
259
260
261
			const res = await uploadDocToVectorDB(localStorage.token, '', file);

			if (res) {
				doc.upload_status = true;
				doc.collection_name = res.collection_name;
				files = files;
			}
		} catch (e) {
			// Remove the failed doc from the files array
			files = files.filter((f) => f.name !== file.name);
			toast.error(e);
262
263
264
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
267
268
269
270
271
272
	const uploadWeb = async (url) => {
		console.log(url);

		const doc = {
			type: 'doc',
			name: url,
			collection_name: '',
			upload_status: false,
Timothy J. Baek's avatar
Timothy J. Baek committed
273
			url: url,
Timothy J. Baek's avatar
Timothy J. Baek committed
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
			error: ''
		};

		try {
			files = [...files, doc];
			const res = await uploadWebToVectorDB(localStorage.token, '', url);

			if (res) {
				doc.upload_status = true;
				doc.collection_name = res.collection_name;
				files = files;
			}
		} catch (e) {
			// Remove the failed doc from the files array
			files = files.filter((f) => f.name !== url);
			toast.error(e);
		}
	};

293
	onMount(() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
294
		console.log(document.getElementById('sidebar'));
295
		window.setTimeout(() => chatTextAreaElement?.focus(), 0);
296

297
298
		const dropZone = document.querySelector('body');

299
300
301
302
303
304
305
		const handleKeyDown = (event: KeyboardEvent) => {
			if (event.key === 'Escape') {
				console.log('Escape');
				dragged = false;
			}
		};

306
		const onDragOver = (e) => {
307
308
			e.preventDefault();
			dragged = true;
309
310
311
312
313
		};

		const onDragLeave = () => {
			dragged = false;
		};
314

315
		const onDrop = async (e) => {
316
317
318
319
			e.preventDefault();
			console.log(e);

			if (e.dataTransfer?.files) {
Timothy J. Baek's avatar
Timothy J. Baek committed
320
				const inputFiles = Array.from(e.dataTransfer?.files);
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322

				if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
323
324
325
					inputFiles.forEach((file) => {
						console.log(file, file.name.split('.').at(-1));
						if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
326
327
328
329
330
331
332
333
334
335
							let reader = new FileReader();
							reader.onload = (event) => {
								files = [
									...files,
									{
										type: 'image',
										url: `${event.target.result}`
									}
								];
							};
Timothy J. Baek's avatar
Timothy J. Baek committed
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
							reader.readAsDataURL(file);
						} else if (
							SUPPORTED_FILE_TYPE.includes(file['type']) ||
							SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
						) {
							uploadDoc(file);
						} else {
							toast.error(
								$i18n.t(
									`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
									{ file_type: file['type'] }
								)
							);
							uploadDoc(file);
						}
					});
352
				} else {
353
					toast.error($i18n.t(`File not found.`));
354
355
356
357
				}
			}

			dragged = false;
358
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
359

360
361
		window.addEventListener('keydown', handleKeyDown);

362
363
364
365
366
		dropZone?.addEventListener('dragover', onDragOver);
		dropZone?.addEventListener('drop', onDrop);
		dropZone?.addEventListener('dragleave', onDragLeave);

		return () => {
367
368
			window.removeEventListener('keydown', handleKeyDown);

369
370
371
372
			dropZone?.removeEventListener('dragover', onDragOver);
			dropZone?.removeEventListener('drop', onDrop);
			dropZone?.removeEventListener('dragleave', onDragLeave);
		};
373
	});
374
375
</script>

376
377
{#if dragged}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
378
		class="fixed lg:w-[calc(100%-260px)] w-full h-full flex z-50 touch-none pointer-events-none"
379
380
381
382
		id="dropzone"
		role="region"
		aria-label="Drag and Drop Container"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
383
		<div class="absolute w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
384
			<div class="m-auto pt-64 flex flex-col justify-center">
385
				<div class="max-w-md">
Timothy J. Baek's avatar
Timothy J. Baek committed
386
					<AddFilesPlaceholder />
387
388
389
390
391
392
				</div>
			</div>
		</div>
	</div>
{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
393
394
395
396
397
398
399
400
401
402
403
404
405
<div class="fixed bottom-0 {$showSidebar ? 'left-0 lg:left-[260px]' : 'left-0'} right-0">
	<div class="w-full">
		<div class=" px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
			<div class="flex flex-col max-w-3xl w-full">
				<div class="relative">
					{#if autoScroll === false && messages.length > 0}
						<div class=" absolute -top-12 left-0 right-0 flex justify-center">
							<button
								class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full"
								on:click={() => {
									autoScroll = true;
									scrollToBottom();
								}}
Timothy J. Baek's avatar
Timothy J. Baek committed
406
							>
Timothy J. Baek's avatar
Timothy J. Baek committed
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 20 20"
									fill="currentColor"
									class="w-5 h-5"
								>
									<path
										fill-rule="evenodd"
										d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
										clip-rule="evenodd"
									/>
								</svg>
							</button>
						</div>
					{/if}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
423

Timothy J. Baek's avatar
Timothy J. Baek committed
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
				<div class="w-full relative">
					{#if prompt.charAt(0) === '/'}
						<Prompts bind:this={promptsElement} bind:prompt />
					{:else if prompt.charAt(0) === '#'}
						<Documents
							bind:this={documentsElement}
							bind:prompt
							on:url={(e) => {
								console.log(e);
								uploadWeb(e.detail);
							}}
							on:select={(e) => {
								console.log(e);
								files = [
									...files,
									{
										type: e?.detail?.type ?? 'doc',
										...e.detail,
										upload_status: true
									}
								];
							}}
						/>
					{:else if prompt.charAt(0) === '@'}
						<Models
							bind:this={modelsElement}
							bind:prompt
							bind:user
							bind:chatInputPlaceholder
							{messages}
						/>
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
456

Timothy J. Baek's avatar
Timothy J. Baek committed
457
458
459
460
					<!-- {#if messages.length == 0 && suggestionPrompts.length !== 0}
						<Suggestions {suggestionPrompts} {submitPrompt} />
					{/if} -->
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
461
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
462
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
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
		<div class="bg-white dark:bg-gray-900">
			<div class="max-w-3xl px-2.5 mx-auto inset-x-0">
				<div class=" pb-2">
					<input
						bind:this={filesInputElement}
						bind:files={inputFiles}
						type="file"
						hidden
						multiple
						on:change={async () => {
							if (inputFiles && inputFiles.length > 0) {
								const _inputFiles = Array.from(inputFiles);
								_inputFiles.forEach((file) => {
									if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
										let reader = new FileReader();
										reader.onload = (event) => {
											files = [
												...files,
												{
													type: 'image',
													url: `${event.target.result}`
												}
											];
											inputFiles = null;
											filesInputElement.value = '';
										};
										reader.readAsDataURL(file);
									} else if (
										SUPPORTED_FILE_TYPE.includes(file['type']) ||
										SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
									) {
										uploadDoc(file);
495
										filesInputElement.value = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
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
532
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
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
									} else {
										toast.error(
											$i18n.t(
												`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
												{ file_type: file['type'] }
											)
										);
										uploadDoc(file);
										filesInputElement.value = '';
									}
								});
							} else {
								toast.error($i18n.t(`File not found.`));
							}
						}}
					/>
					<form
						class=" flex flex-col relative w-full rounded-3xl px-1.5 border border-gray-100 dark:border-gray-850 bg-white dark:bg-gray-900 dark:text-gray-100"
						on:submit|preventDefault={() => {
							submitPrompt(prompt, user);
						}}
					>
						{#if files.length > 0}
							<div class="mx-2 mt-2 mb-1 flex flex-wrap gap-2">
								{#each files as file, fileIdx}
									<div class=" relative group">
										{#if file.type === 'image'}
											<img src={file.url} alt="input" class=" h-16 w-16 rounded-xl object-cover" />
										{:else if file.type === 'doc'}
											<div
												class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none"
											>
												<div class="p-2.5 bg-red-400 text-white rounded-lg">
													{#if file.upload_status}
														<svg
															xmlns="http://www.w3.org/2000/svg"
															viewBox="0 0 24 24"
															fill="currentColor"
															class="w-6 h-6"
														>
															<path
																fill-rule="evenodd"
																d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
																clip-rule="evenodd"
															/>
															<path
																d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
															/>
														</svg>
													{:else}
														<svg
															class=" w-6 h-6 translate-y-[0.5px]"
															fill="currentColor"
															viewBox="0 0 24 24"
															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="2.5" /><circle
																class="spinner_qM83 spinner_oXPr"
																cx="12"
																cy="12"
																r="2.5"
															/><circle
																class="spinner_qM83 spinner_ZTLf"
																cx="20"
																cy="12"
																r="2.5"
															/></svg
														>
													{/if}
												</div>

												<div class="flex flex-col justify-center -space-y-0.5">
													<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
														{file.name}
													</div>

													<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
												</div>
											</div>
										{:else if file.type === 'collection'}
											<div
												class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none"
											>
												<div class="p-2.5 bg-red-400 text-white rounded-lg">
603
604
605
606
607
608
609
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 24 24"
														fill="currentColor"
														class="w-6 h-6"
													>
														<path
Timothy J. Baek's avatar
Timothy J. Baek committed
610
															d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
611
612
														/>
														<path
Timothy J. Baek's avatar
Timothy J. Baek committed
613
															d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
614
615
														/>
													</svg>
616
617
												</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
618
619
620
621
622
623
624
												<div class="flex flex-col justify-center -space-y-0.5">
													<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
														{file?.title ?? `#${file.name}`}
													</div>

													<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
												</div>
625
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
626
627
628
629
630
631
632
633
634
635
636
										{/if}

										<div class=" absolute -top-1 -right-1">
											<button
												class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
												type="button"
												on:click={() => {
													files.splice(fileIdx, 1);
													files = files;
												}}
											>
637
638
												<svg
													xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
639
													viewBox="0 0 20 20"
640
													fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
641
													class="w-4 h-4"
642
643
												>
													<path
Timothy J. Baek's avatar
Timothy J. Baek committed
644
														d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
645
646
													/>
												</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
647
											</button>
648
										</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
649
650
651
652
									</div>
								{/each}
							</div>
						{/if}
653

Timothy J. Baek's avatar
Timothy J. Baek committed
654
655
656
657
						<div class=" flex">
							{#if fileUploadEnabled}
								<div class=" self-end mb-2 ml-1">
									<Tooltip content={$i18n.t('Upload files')}>
658
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
659
											class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
660
661
											type="button"
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
662
												filesInputElement.click();
663
664
665
666
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
667
												viewBox="0 0 16 16"
668
												fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
669
												class="w-[1.2rem] h-[1.2rem]"
670
671
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
672
													d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
673
674
675
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
676
									</Tooltip>
677
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
678
							{/if}
679

Timothy J. Baek's avatar
Timothy J. Baek committed
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
							<textarea
								id="chat-textarea"
								bind:this={chatTextAreaElement}
								class=" dark:bg-gray-900 dark:text-gray-100 outline-none w-full py-3 px-3 {fileUploadEnabled
									? ''
									: ' pl-4'} rounded-xl resize-none h-[48px]"
								placeholder={chatInputPlaceholder !== ''
									? chatInputPlaceholder
									: isRecording
									? $i18n.t('Listening...')
									: $i18n.t('Send a Message')}
								bind:value={prompt}
								on:keypress={(e) => {
									if (window.innerWidth > 1024) {
										if (e.keyCode == 13 && !e.shiftKey) {
											e.preventDefault();
										}
										if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
											submitPrompt(prompt, user);
										}
700
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
701
702
703
								}}
								on:keydown={async (e) => {
									const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
704

Timothy J. Baek's avatar
Timothy J. Baek committed
705
706
707
708
									// Check if Ctrl + R is pressed
									if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
										e.preventDefault();
										console.log('regenerate');
709

Timothy J. Baek's avatar
Timothy J. Baek committed
710
711
712
										const regenerateButton = [
											...document.getElementsByClassName('regenerate-response-button')
										]?.at(-1);
713

Timothy J. Baek's avatar
Timothy J. Baek committed
714
715
										regenerateButton?.click();
									}
716

Timothy J. Baek's avatar
Timothy J. Baek committed
717
718
									if (prompt === '' && e.key == 'ArrowUp') {
										e.preventDefault();
719

Timothy J. Baek's avatar
Timothy J. Baek committed
720
721
722
										const userMessageElement = [
											...document.getElementsByClassName('user-message')
										]?.at(-1);
723

Timothy J. Baek's avatar
Timothy J. Baek committed
724
725
726
										const editButton = [
											...document.getElementsByClassName('edit-user-message-button')
										]?.at(-1);
727

Timothy J. Baek's avatar
Timothy J. Baek committed
728
										console.log(userMessageElement);
729

Timothy J. Baek's avatar
Timothy J. Baek committed
730
731
732
										userMessageElement.scrollIntoView({ block: 'center' });
										editButton?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
733

Timothy J. Baek's avatar
Timothy J. Baek committed
734
735
									if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowUp') {
										e.preventDefault();
Timothy J. Baek's avatar
Timothy J. Baek committed
736

Timothy J. Baek's avatar
Timothy J. Baek committed
737
										(promptsElement || documentsElement || modelsElement).selectUp();
Timothy J. Baek's avatar
Timothy J. Baek committed
738

Timothy J. Baek's avatar
Timothy J. Baek committed
739
740
741
742
743
										const commandOptionButton = [
											...document.getElementsByClassName('selected-command-option-button')
										]?.at(-1);
										commandOptionButton.scrollIntoView({ block: 'center' });
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
744

Timothy J. Baek's avatar
Timothy J. Baek committed
745
746
									if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
										e.preventDefault();
Timothy J. Baek's avatar
Timothy J. Baek committed
747

Timothy J. Baek's avatar
Timothy J. Baek committed
748
										(promptsElement || documentsElement || modelsElement).selectDown();
Timothy J. Baek's avatar
Timothy J. Baek committed
749

Timothy J. Baek's avatar
Timothy J. Baek committed
750
751
752
753
754
										const commandOptionButton = [
											...document.getElementsByClassName('selected-command-option-button')
										]?.at(-1);
										commandOptionButton.scrollIntoView({ block: 'center' });
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
755

Timothy J. Baek's avatar
Timothy J. Baek committed
756
757
									if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Enter') {
										e.preventDefault();
Timothy J. Baek's avatar
Timothy J. Baek committed
758

Timothy J. Baek's avatar
Timothy J. Baek committed
759
760
761
										const commandOptionButton = [
											...document.getElementsByClassName('selected-command-option-button')
										]?.at(-1);
Timothy J. Baek's avatar
Timothy J. Baek committed
762

Timothy J. Baek's avatar
Timothy J. Baek committed
763
764
765
766
767
										if (commandOptionButton) {
											commandOptionButton?.click();
										} else {
											document.getElementById('send-message-button')?.click();
										}
768
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
769

Timothy J. Baek's avatar
Timothy J. Baek committed
770
771
									if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Tab') {
										e.preventDefault();
772

Timothy J. Baek's avatar
Timothy J. Baek committed
773
774
775
										const commandOptionButton = [
											...document.getElementsByClassName('selected-command-option-button')
										]?.at(-1);
776

Timothy J. Baek's avatar
Timothy J. Baek committed
777
778
779
										commandOptionButton?.click();
									} else if (e.key === 'Tab') {
										const words = findWordIndices(prompt);
780

Timothy J. Baek's avatar
Timothy J. Baek committed
781
782
783
										if (words.length > 0) {
											const word = words.at(0);
											const fullPrompt = prompt;
784

Timothy J. Baek's avatar
Timothy J. Baek committed
785
786
											prompt = prompt.substring(0, word?.endIndex + 1);
											await tick();
787

Timothy J. Baek's avatar
Timothy J. Baek committed
788
789
790
											e.target.scrollTop = e.target.scrollHeight;
											prompt = fullPrompt;
											await tick();
791

Timothy J. Baek's avatar
Timothy J. Baek committed
792
793
											e.preventDefault();
											e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
794
795
										}
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
								}}
								rows="1"
								on:input={(e) => {
									e.target.style.height = '';
									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
									user = null;
								}}
								on:focus={(e) => {
									e.target.style.height = '';
									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
								}}
								on:paste={(e) => {
									const clipboardData = e.clipboardData || window.clipboardData;

									if (clipboardData && clipboardData.items) {
										for (const item of clipboardData.items) {
											if (item.type.indexOf('image') !== -1) {
												const blob = item.getAsFile();
												const reader = new FileReader();

												reader.onload = function (e) {
													files = [
														...files,
														{
															type: 'image',
															url: `${e.target.result}`
822
														}
Timothy J. Baek's avatar
Timothy J. Baek committed
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
													];
												};

												reader.readAsDataURL(blob);
											}
										}
									}
								}}
							/>

							<div class="self-end mb-2 flex space-x-1 mr-1">
								{#if messages.length == 0 || messages.at(-1).done == true}
									<Tooltip content={$i18n.t('Record voice')}>
										{#if speechRecognitionEnabled}
											<button
												id="voice-input-button"
												class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center"
												type="button"
												on:click={() => {
													speechRecognitionHandler();
												}}
											>
												{#if isRecording}
													<svg
														class=" w-5 h-5 translate-y-[0.5px]"
														fill="currentColor"
														viewBox="0 0 24 24"
														xmlns="http://www.w3.org/2000/svg"
														><style>
															.spinner_qM83 {
																animation: spinner_8HQG 1.05s infinite;
Timothy J. Baek's avatar
Timothy J. Baek committed
854
															}
Timothy J. Baek's avatar
Timothy J. Baek committed
855
856
															.spinner_oXPr {
																animation-delay: 0.1s;
Timothy J. Baek's avatar
Timothy J. Baek committed
857
															}
Timothy J. Baek's avatar
Timothy J. Baek committed
858
859
															.spinner_ZTLf {
																animation-delay: 0.2s;
Timothy J. Baek's avatar
Timothy J. Baek committed
860
															}
Timothy J. Baek's avatar
Timothy J. Baek committed
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
															@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="2.5" /><circle
															class="spinner_qM83 spinner_oXPr"
															cx="12"
															cy="12"
															r="2.5"
														/><circle
															class="spinner_qM83 spinner_ZTLf"
															cx="20"
															cy="12"
															r="2.5"
														/></svg
													>
												{:else}
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 20 20"
														fill="currentColor"
														class="w-5 h-5 translate-y-[0.5px]"
													>
														<path d="M7 4a3 3 0 016 0v6a3 3 0 11-6 0V4z" />
														<path
															d="M5.5 9.643a.75.75 0 00-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-1.5v-1.546A6.001 6.001 0 0016 10v-.357a.75.75 0 00-1.5 0V10a4.5 4.5 0 01-9 0v-.357z"
														/>
													</svg>
												{/if}
											</button>
										{/if}
									</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
903

Timothy J. Baek's avatar
Timothy J. Baek committed
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
									<Tooltip content={$i18n.t('Send message')}>
										<button
											id="send-message-button"
											class="{prompt !== ''
												? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
												: 'text-white bg-gray-100 dark:text-gray-900 dark:bg-gray-800 disabled'} transition rounded-full p-1.5 self-center"
											type="submit"
											disabled={prompt === ''}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-5 h-5"
											>
												<path
													fill-rule="evenodd"
													d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
													clip-rule="evenodd"
												/>
											</svg>
										</button>
									</Tooltip>
								{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
928
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
929
930
										class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
										on:click={stopResponse}
931
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
932
933
										<svg
											xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
934
											viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
935
936
937
938
939
											fill="currentColor"
											class="w-5 h-5"
										>
											<path
												fill-rule="evenodd"
Timothy J. Baek's avatar
Timothy J. Baek committed
940
												d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
Timothy J. Baek's avatar
Timothy J. Baek committed
941
942
943
944
												clip-rule="evenodd"
											/>
										</svg>
									</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
945
946
								{/if}
							</div>
947
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
948
					</form>
949

Timothy J. Baek's avatar
Timothy J. Baek committed
950
951
952
					<div class="mt-1.5 text-xs text-gray-500 text-center">
						{$i18n.t('LLMs can make mistakes. Verify important information.')}
					</div>
953
954
955
956
957
				</div>
			</div>
		</div>
	</div>
</div>