MessageInput.svelte 28.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 } 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';
Timothy J. Baek's avatar
Timothy J. Baek committed
16

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

19
20
21
	export let submitPrompt: Function;
	export let stopResponse: Function;

22
	export let suggestionPrompts = [];
23
	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(() => {
294
		window.setTimeout(() => chatTextAreaElement?.focus(), 0);
295

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

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

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

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

314
		const onDrop = async (e) => {
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
			e.preventDefault();
			console.log(e);

			if (e.dataTransfer?.files) {
				let reader = new FileReader();

				reader.onload = (event) => {
					files = [
						...files,
						{
							type: 'image',
							url: `${event.target.result}`
						}
					];
				};

Timothy J. Baek's avatar
Timothy J. Baek committed
331
				const inputFiles = Array.from(e.dataTransfer?.files);
Timothy J. Baek's avatar
Timothy J. Baek committed
332
333

				if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
					inputFiles.forEach((file) => {
						console.log(file, file.name.split('.').at(-1));
						if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
							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);
						}
					});
353
				} else {
354
					toast.error($i18n.t(`File not found.`));
355
356
357
358
				}
			}

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

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
394
395
<div class="w-full">
	<div class="px-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
396
		<div class="flex flex-col max-w-3xl w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
397
			<div class="relative">
Timothy J. Baek's avatar
Timothy J. Baek committed
398
				{#if autoScroll === false && messages.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
399
					<div class=" absolute -top-12 left-0 right-0 flex justify-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
400
401
402
403
						<button
							class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full"
							on:click={() => {
								autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
404
								scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
							}}
						>
							<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}
Timothy J. Baek's avatar
Timothy J. Baek committed
422
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
423

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

				{#if messages.length == 0 && suggestionPrompts.length !== 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
458
459
					<Suggestions {suggestionPrompts} {submitPrompt} />
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
460
			</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
	<div class="bg-white dark:bg-gray-900">
Timothy J. Baek's avatar
Timothy J. Baek committed
464
		<div class="max-w-3xl px-2.5 mx-auto inset-x-0">
Timothy J. Baek's avatar
Timothy J. Baek committed
465
			<div class=" pb-2">
466
467
468
469
470
				<input
					bind:this={filesInputElement}
					bind:files={inputFiles}
					type="file"
					hidden
Timothy J. Baek's avatar
Timothy J. Baek committed
471
					multiple
Timothy J. Baek's avatar
Timothy J. Baek committed
472
					on:change={async () => {
473
474
475
476
477
478
479
480
481
482
						let reader = new FileReader();
						reader.onload = (event) => {
							files = [
								...files,
								{
									type: 'image',
									url: `${event.target.result}`
								}
							];
							inputFiles = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
483
							filesInputElement.value = '';
484
485
						};

Timothy J. Baek's avatar
Timothy J. Baek committed
486
						if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
							const _inputFiles = Array.from(inputFiles);
							_inputFiles.forEach((file) => {
								if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
									reader.readAsDataURL(file);
								} else if (
									SUPPORTED_FILE_TYPE.includes(file['type']) ||
									SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
								) {
									uploadDoc(file);
									filesInputElement.value = '';
								} 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 = '';
								}
							});
508
						} else {
509
							toast.error($i18n.t(`File not found.`));
510
511
512
						}
					}}
				/>
513
				<form
Timothy J. Baek's avatar
Timothy J. Baek committed
514
					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"
515
					on:submit|preventDefault={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
516
						submitPrompt(prompt, user);
517
518
					}}
				>
519
					{#if files.length > 0}
520
						<div class="mx-2 mt-2 mb-1 flex flex-wrap gap-2">
521
522
							{#each files as file, fileIdx}
								<div class=" relative group">
523
524
525
526
									{#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
Timothy J. Baek's avatar
Timothy J. Baek committed
527
											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"
528
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
529
											<div class="p-2.5 bg-red-400 text-white rounded-lg">
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
												{#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}
589
590
591
											</div>

											<div class="flex flex-col justify-center -space-y-0.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
592
												<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
593
594
595
													{file.name}
												</div>

596
												<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
597
598
											</div>
										</div>
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
									{: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">
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 24 24"
													fill="currentColor"
													class="w-6 h-6"
												>
													<path
														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"
													/>
													<path
														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"
													/>
												</svg>
											</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">
Timothy J. Baek's avatar
Timothy J. Baek committed
621
													{file?.title ?? `#${file.name}`}
622
623
												</div>

624
												<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
625
626
											</div>
										</div>
627
									{/if}
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653

									<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;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													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"
												/>
											</svg>
										</button>
									</div>
								</div>
							{/each}
						</div>
					{/if}
654

655
656
					<div class=" flex">
						{#if fileUploadEnabled}
Timothy J. Baek's avatar
Timothy J. Baek committed
657
							<div class=" self-end mb-2 ml-1">
658
								<Tooltip content={$i18n.t('Upload files')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
659
660
661
662
663
664
									<button
										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"
										type="button"
										on:click={() => {
											filesInputElement.click();
										}}
665
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
666
667
668
669
670
671
672
673
674
675
676
677
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 16 16"
											fill="currentColor"
											class="w-[1.2rem] h-[1.2rem]"
										>
											<path
												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"
											/>
										</svg>
									</button>
								</Tooltip>
678
							</div>
679
680
681
682
						{/if}

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

								// Check if Ctrl + R is pressed
								if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
									e.preventDefault();
									console.log('regenerate');

									const regenerateButton = [
										...document.getElementsByClassName('regenerate-response-button')
									]?.at(-1);

									regenerateButton?.click();
								}

716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
								if (prompt === '' && e.key == 'ArrowUp') {
									e.preventDefault();

									const userMessageElement = [
										...document.getElementsByClassName('user-message')
									]?.at(-1);

									const editButton = [
										...document.getElementsByClassName('edit-user-message-button')
									]?.at(-1);

									console.log(userMessageElement);

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
736
									(promptsElement || documentsElement || modelsElement).selectUp();
Timothy J. Baek's avatar
Timothy J. Baek committed
737
738
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
								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
Timothy J. Baek's avatar
Timothy J. Baek committed
745
746
									e.preventDefault();

Timothy J. Baek's avatar
Timothy J. Baek committed
747
									(promptsElement || documentsElement || modelsElement).selectDown();
Timothy J. Baek's avatar
Timothy J. Baek committed
748
749
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
								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Enter') {
Timothy J. Baek's avatar
Timothy J. Baek committed
756
757
758
759
760
761
762
763
764
									e.preventDefault();

									const commandOptionButton = [
										...document.getElementsByClassName('selected-command-option-button')
									]?.at(-1);

									commandOptionButton?.click();
								}

Timothy J. Baek's avatar
Timothy J. Baek committed
765
								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Tab') {
Timothy J. Baek's avatar
Timothy J. Baek committed
766
									e.preventDefault();
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789

									const commandOptionButton = [
										...document.getElementsByClassName('selected-command-option-button')
									]?.at(-1);

									commandOptionButton?.click();
								} else if (e.key === 'Tab') {
									const words = findWordIndices(prompt);

									if (words.length > 0) {
										const word = words.at(0);
										const fullPrompt = prompt;

										prompt = prompt.substring(0, word?.endIndex + 1);
										await tick();

										e.target.scrollTop = e.target.scrollHeight;
										prompt = fullPrompt;
										await tick();

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
828
						<div class="self-end mb-2 flex space-x-1 mr-1">
829
							{#if messages.length == 0 || messages.at(-1).done == true}
830
								<Tooltip content={$i18n.t('Record voice')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
									{#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;
849
														}
Timothy J. Baek's avatar
Timothy J. Baek committed
850
851
														.spinner_oXPr {
															animation-delay: 0.1s;
852
														}
Timothy J. Baek's avatar
Timothy J. Baek committed
853
854
														.spinner_ZTLf {
															animation-delay: 0.2s;
855
														}
Timothy J. Baek's avatar
Timothy J. Baek committed
856
857
858
859
860
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
														@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>

899
								<Tooltip content={$i18n.t('Send message')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
900
901
902
903
904
905
									<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 === ''}
906
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
907
908
909
910
911
912
913
914
915
916
917
918
919
920
										<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>
921
922
							{:else}
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
923
									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"
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
									on:click={stopResponse}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										fill="currentColor"
										class="w-5 h-5"
									>
										<path
											fill-rule="evenodd"
											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"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							{/if}
						</div>
					</div>
				</form>

				<div class="mt-1.5 text-xs text-gray-500 text-center">
945
					{$i18n.t('LLMs can make mistakes. Verify important information.')}
946
947
948
949
950
				</div>
			</div>
		</div>
	</div>
</div>