MessageInput.svelte 31.5 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
5
6
7
8
9
10
	import {
		type Model,
		mobile,
		settings,
		showSidebar,
		models,
		config,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
		showCallOverlay,
Timothy J. Baek's avatar
Timothy J. Baek committed
12
13
		tools,
		user as _user
Timothy J. Baek's avatar
Timothy J. Baek committed
14
	} from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
16

Timothy J. Baek's avatar
Timothy J. Baek committed
17
	import {
Timothy J. Baek's avatar
Timothy J. Baek committed
18
		processDocToVectorDB,
Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
21
22
		uploadDocToVectorDB,
		uploadWebToVectorDB,
		uploadYoutubeTranscriptionToVectorDB
	} from '$lib/apis/rag';
Timothy J. Baek's avatar
Timothy J. Baek committed
23
24

	import { uploadFile } from '$lib/apis/files';
Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
27
28
	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS, WEBUI_BASE_URL } from '$lib/constants';

	import Prompts from './MessageInput/PromptCommands.svelte';
	import Suggestions from './MessageInput/Suggestions.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
	import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
	import Documents from './MessageInput/Documents.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	import Models from './MessageInput/Models.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import Tooltip from '../common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	import XMark from '$lib/components/icons/XMark.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	import InputMenu from './MessageInput/InputMenu.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
35
36
	import Headphone from '../icons/Headphone.svelte';
	import VoiceRecording from './MessageInput/VoiceRecording.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
37
	import { transcribeAudio } from '$lib/apis/audio';
Timothy J. Baek's avatar
Timothy J. Baek committed
38

39
40
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
41
42
	export let transparentBackground = false;

43
44
45
46
	export let submitPrompt: Function;
	export let stopResponse: Function;

	export let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48

	export let atSelectedModel: Model | undefined;
49
	export let selectedModels: [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
50

Timothy J. Baek's avatar
Timothy J. Baek committed
51
52
	let recording = false;

Ased Mammad's avatar
Ased Mammad committed
53
	let chatTextAreaElement: HTMLTextAreaElement;
54
	let filesInputElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
55

Timothy J. Baek's avatar
Timothy J. Baek committed
56
	let promptsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
57
	let documentsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
58
	let modelsElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
59

60
	let inputFiles;
61
	let dragged = false;
62

Timothy J. Baek's avatar
Timothy J. Baek committed
63
64
65
	let user = null;
	let chatInputPlaceholder = '';

66
67
	export let files = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
68
	export let availableToolIds = [];
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
69
	export let selectedToolIds = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
70
	export let webSearchEnabled = false;
71

72
73
74
	export let prompt = '';
	export let messages = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
75
76
77
78
	let visionCapableModels = [];
	$: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter(
		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
	);
79

Timothy J. Baek's avatar
Timothy J. Baek committed
80
	$: if (prompt) {
81
82
83
		if (chatTextAreaElement) {
			chatTextAreaElement.style.height = '';
			chatTextAreaElement.style.height = Math.min(chatTextAreaElement.scrollHeight, 200) + 'px';
Timothy J. Baek's avatar
Timothy J. Baek committed
84
85
86
		}
	}

Timothy J. Baek's avatar
Timothy J. Baek committed
87
88
89
90
91
	const scrollToBottom = () => {
		const element = document.getElementById('messages-container');
		element.scrollTop = element.scrollHeight;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
92
	const uploadFileHandler = async (file) => {
93
		console.log(file);
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
96
97
98
99
		// Check if the file is an audio file and transcribe/convert it to text file
		if (['audio/mpeg', 'audio/wav'].includes(file['type'])) {
			const res = await transcribeAudio(localStorage.token, file).catch((error) => {
				toast.error(error);
				return null;
			});
100

Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
103
104
105
106
			if (res) {
				console.log(res);
				const blob = new Blob([res.text], { type: 'text/plain' });
				file = blobToFile(blob, `${file.name}.txt`);
			}
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
107

Timothy J. Baek's avatar
Timothy J. Baek committed
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
		// Upload the file to the server
		const uploadedFile = await uploadFile(localStorage.token, file).catch((error) => {
			toast.error(error);
			return null;
		});

		if (uploadedFile) {
			const fileItem = {
				type: 'file',
				file: uploadedFile,
				id: uploadedFile.id,
				name: file.name,
				collection_name: '',
				status: 'uploaded',
				error: ''
			};
			files = [...files, fileItem];

			// TODO: Check if tools & functions have files support to skip this step to delegate file processing
			// Default Upload to VectorDB
			if (
				SUPPORTED_FILE_TYPE.includes(file['type']) ||
				SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
			) {
				processFileItem(fileItem);
			} else {
				toast.error(
					$i18n.t(`Unknown File Type '{{file_type}}', but accepting and treating as plain text`, {
						file_type: file['type']
					})
				);
				processFileItem(fileItem);
Timothy J. Baek's avatar
Timothy J. Baek committed
140
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
141
142
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
143

Timothy J. Baek's avatar
Timothy J. Baek committed
144
145
146
	const processFileItem = async (fileItem) => {
		try {
			const res = await processDocToVectorDB(localStorage.token, fileItem.id);
Dave Bauman's avatar
Dave Bauman committed
147
148

			if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
149
150
				fileItem.status = 'processed';
				fileItem.collection_name = res.collection_name;
Dave Bauman's avatar
Dave Bauman committed
151
152
153
154
				files = files;
			}
		} catch (e) {
			// Remove the failed doc from the files array
Timothy J. Baek's avatar
Timothy J. Baek committed
155
			files = files.filter((f) => f.id !== fileItem.id);
Dave Bauman's avatar
Dave Bauman committed
156
			toast.error(e);
157
158
159
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162
163
164
165
166
167
	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
168
			url: url,
Timothy J. Baek's avatar
Timothy J. Baek committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
			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);
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
	const uploadYoutubeTranscription = async (url) => {
		console.log(url);

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

		try {
			files = [...files, doc];
			const res = await uploadYoutubeTranscriptionToVectorDB(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);
		}
	};

216
	onMount(() => {
217
		window.setTimeout(() => chatTextAreaElement?.focus(), 0);
218

219
220
		const dropZone = document.querySelector('body');

221
222
223
224
225
226
227
		const handleKeyDown = (event: KeyboardEvent) => {
			if (event.key === 'Escape') {
				console.log('Escape');
				dragged = false;
			}
		};

228
		const onDragOver = (e) => {
229
230
			e.preventDefault();
			dragged = true;
231
232
233
234
235
		};

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

237
		const onDrop = async (e) => {
238
239
240
241
			e.preventDefault();
			console.log(e);

			if (e.dataTransfer?.files) {
Timothy J. Baek's avatar
Timothy J. Baek committed
242
				const inputFiles = Array.from(e.dataTransfer?.files);
Timothy J. Baek's avatar
Timothy J. Baek committed
243
244

				if (inputFiles && inputFiles.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
245
246
					inputFiles.forEach((file) => {
						console.log(file, file.name.split('.').at(-1));
247
						if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
Timothy J. Baek's avatar
Timothy J. Baek committed
248
249
							if (visionCapableModels.length === 0) {
								toast.error($i18n.t('Selected model(s) do not support image inputs'));
250
								return;
251
							}
252
253
254
255
256
257
258
259
260
261
							let reader = new FileReader();
							reader.onload = (event) => {
								files = [
									...files,
									{
										type: 'image',
										url: `${event.target.result}`
									}
								];
							};
Timothy J. Baek's avatar
Timothy J. Baek committed
262
263
							reader.readAsDataURL(file);
						} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
264
							uploadFileHandler(file);
Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
						}
					});
267
				} else {
268
					toast.error($i18n.t(`File not found.`));
269
270
271
272
				}
			}

			dragged = false;
273
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
274

275
276
		window.addEventListener('keydown', handleKeyDown);

277
278
279
280
281
		dropZone?.addEventListener('dragover', onDragOver);
		dropZone?.addEventListener('drop', onDrop);
		dropZone?.addEventListener('dragleave', onDragLeave);

		return () => {
282
283
			window.removeEventListener('keydown', handleKeyDown);

284
285
286
287
			dropZone?.removeEventListener('dragover', onDragOver);
			dropZone?.removeEventListener('drop', onDrop);
			dropZone?.removeEventListener('dragleave', onDragLeave);
		};
288
	});
289
290
</script>

291
292
{#if dragged}
	<div
293
		class="fixed {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
294
			? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
295
			: 'left-0'}  w-full h-full flex z-50 touch-none pointer-events-none"
296
297
298
299
		id="dropzone"
		role="region"
		aria-label="Drag and Drop Container"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
300
		<div class="absolute w-full h-full backdrop-blur bg-gray-800/40 flex justify-center">
301
			<div class="m-auto pt-64 flex flex-col justify-center">
302
				<div class="max-w-md">
Timothy J. Baek's avatar
Timothy J. Baek committed
303
					<AddFilesPlaceholder />
304
305
306
307
308
309
				</div>
			</div>
		</div>
	</div>
{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
310
311
312
313
314
315
316
317
318
319
320
<div class="w-full">
	<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
		<div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full">
			<div class="relative">
				{#if autoScroll === false && messages.length > 0}
					<div class=" absolute -top-12 left-0 right-0 flex justify-center z-30">
						<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
321
							}}
Timothy J. Baek's avatar
Timothy J. Baek committed
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
						>
							<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
339

Timothy J. Baek's avatar
Timothy J. Baek committed
340
341
			<div class="w-full relative">
				{#if prompt.charAt(0) === '/'}
342
					<Prompts bind:this={promptsElement} bind:prompt bind:files />
Timothy J. Baek's avatar
Timothy J. Baek committed
343
344
345
				{:else if prompt.charAt(0) === '#'}
					<Documents
						bind:this={documentsElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
346
						bind:prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
347
348
349
350
351
352
353
354
						on:youtube={(e) => {
							console.log(e);
							uploadYoutubeTranscription(e.detail);
						}}
						on:url={(e) => {
							console.log(e);
							uploadWeb(e.detail);
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
355
						on:select={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
356
357
358
359
360
361
362
363
364
							console.log(e);
							files = [
								...files,
								{
									type: e?.detail?.type ?? 'doc',
									...e.detail,
									upload_status: true
								}
							];
Timothy J. Baek's avatar
Timothy J. Baek committed
365
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
366
					/>
Timothy J. Baek's avatar
Timothy J. Baek committed
367
368
369
370
371
372
373
374
375
376
377
378
				{/if}

				<Models
					bind:this={modelsElement}
					bind:prompt
					bind:chatInputPlaceholder
					{messages}
					on:select={(e) => {
						atSelectedModel = e.detail;
						chatTextAreaElement?.focus();
					}}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
379

Timothy J. Baek's avatar
Timothy J. Baek committed
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
				{#if atSelectedModel !== undefined}
					<div
						class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900"
					>
						<div class="flex items-center gap-2 text-sm dark:text-gray-500">
							<img
								crossorigin="anonymous"
								alt="model profile"
								class="size-5 max-w-[28px] object-cover rounded-full"
								src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
									?.profile_image_url ??
									($i18n.language === 'dg-DG'
										? `/doge.png`
										: `${WEBUI_BASE_URL}/static/favicon.png`)}
							/>
Timothy J. Baek's avatar
Timothy J. Baek committed
395
							<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
396
								Talking to <span class=" font-medium">{atSelectedModel.name}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
397
398
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
399
400
401
402
403
404
405
406
407
408
409
410
						<div>
							<button
								class="flex items-center"
								on:click={() => {
									atSelectedModel = undefined;
								}}
							>
								<XMark />
							</button>
						</div>
					</div>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
411
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
412
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
413
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
414

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
415
	<div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
		<div class="max-w-6xl px-2.5 md:px-6 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/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
									if (visionCapableModels.length === 0) {
										toast.error($i18n.t('Selected model(s) do not support image inputs'));
										return;
Timothy J. Baek's avatar
Timothy J. Baek committed
432
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
433
434
435
436
437
438
439
440
441
442
443
444
									let reader = new FileReader();
									reader.onload = (event) => {
										files = [
											...files,
											{
												type: 'image',
												url: `${event.target.result}`
											}
										];
									};
									reader.readAsDataURL(file);
								} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
445
									uploadFileHandler(file);
Timothy J. Baek's avatar
Timothy J. Baek committed
446
447
448
449
450
								}
							});
						} else {
							toast.error($i18n.t(`File not found.`));
						}
Timothy J. Baek's avatar
Timothy J. Baek committed
451
452

						filesInputElement.value = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
453
454
					}}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472

				{#if recording}
					<VoiceRecording
						bind:recording
						on:cancel={async () => {
							recording = false;

							await tick();
							document.getElementById('chat-textarea')?.focus();
						}}
						on:confirm={async (e) => {
							const response = e.detail;
							prompt = `${prompt}${response} `;

							recording = false;

							await tick();
							document.getElementById('chat-textarea')?.focus();
473
474

							if ($settings?.speechAutoSend ?? false) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
475
								submitPrompt(prompt);
476
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
482
483
						}}
					/>
				{:else}
					<form
						class="w-full flex gap-1.5"
						on:submit|preventDefault={() => {
							// check if selectedModels support image input
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
484
							submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
						}}
					>
						<div
							class="flex-1 flex flex-col relative w-full rounded-3xl px-1.5 bg-gray-50 dark:bg-gray-850 dark:text-gray-100"
							dir={$settings?.chatDirection ?? 'LTR'}
						>
							{#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'}
												<div class="relative">
													<img
														src={file.url}
														alt="input"
														class=" h-16 w-16 rounded-xl object-cover"
													/>
													{#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length}
														<Tooltip
															className=" absolute top-1 left-1"
															content={$i18n.t('{{ models }}', {
																models: [...(atSelectedModel ? [atSelectedModel] : selectedModels)]
																	.filter((id) => !visionCapableModels.includes(id))
																	.join(', ')
															})}
														>
															<svg
																xmlns="http://www.w3.org/2000/svg"
																viewBox="0 0 24 24"
																fill="currentColor"
																class="size-4 fill-yellow-300"
															>
																<path
																	fill-rule="evenodd"
																	d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
																	clip-rule="evenodd"
																/>
															</svg>
														</Tooltip>
													{/if}
												</div>
											{: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"
Timothy J. Baek's avatar
Timothy J. Baek committed
529
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
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
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
													<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">
														<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">
															{file?.title ?? `#${file.name}`}
														</div>

														<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
													</div>
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
633
											{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
634
635
636
637
638
639
640
641
642
643

											<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;
													}}
												>
644
645
													<svg
														xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
646
														viewBox="0 0 20 20"
647
														fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
648
														class="w-4 h-4"
649
650
													>
														<path
Timothy J. Baek's avatar
Timothy J. Baek committed
651
															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"
652
653
														/>
													</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
654
												</button>
655
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
656
										</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
657
658
659
									{/each}
								</div>
							{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
660

Timothy J. Baek's avatar
Timothy J. Baek committed
661
662
663
664
							<div class=" flex">
								<div class=" ml-0.5 self-end mb-1.5 flex space-x-1">
									<InputMenu
										bind:webSearchEnabled
Timothy J. Baek's avatar
Timothy J. Baek committed
665
										bind:selectedToolIds
Timothy J. Baek's avatar
Timothy J. Baek committed
666
667
668
669
670
671
672
673
674
675
										tools={$tools.reduce((a, e, i, arr) => {
											if (availableToolIds.includes(e.id) || ($_user?.role ?? 'user') === 'admin') {
												a[e.id] = {
													name: e.name,
													description: e.meta.description,
													enabled: false
												};
											}
											return a;
										}, {})}
Timothy J. Baek's avatar
Timothy J. Baek committed
676
677
678
679
680
681
682
683
										uploadFilesHandler={() => {
											filesInputElement.click();
										}}
										onClose={async () => {
											await tick();
											chatTextAreaElement?.focus();
										}}
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
684
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
685
											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-2 outline-none focus:outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
686
687
688
689
											type="button"
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
690
												viewBox="0 0 16 16"
Timothy J. Baek's avatar
Timothy J. Baek committed
691
												fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
692
												class="size-5"
Timothy J. Baek's avatar
Timothy J. Baek committed
693
694
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
695
													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"
Timothy J. Baek's avatar
Timothy J. Baek committed
696
697
698
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
699
									</InputMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
700
								</div>
701

Timothy J. Baek's avatar
Timothy J. Baek committed
702
703
704
								<textarea
									id="chat-textarea"
									bind:this={chatTextAreaElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
705
									class="scrollbar-hidden bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-1 rounded-xl resize-none h-[48px]"
Timothy J. Baek's avatar
Timothy J. Baek committed
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
									placeholder={chatInputPlaceholder !== ''
										? chatInputPlaceholder
										: $i18n.t('Send a Message')}
									bind:value={prompt}
									on:keypress={(e) => {
										if (
											!$mobile ||
											!(
												'ontouchstart' in window ||
												navigator.maxTouchPoints > 0 ||
												navigator.msMaxTouchPoints > 0
											)
										) {
											// Prevent Enter key from creating a new line
											if (e.key === 'Enter' && !e.shiftKey) {
												e.preventDefault();
											}
723

Timothy J. Baek's avatar
Timothy J. Baek committed
724
725
											// Submit the prompt when Enter key is pressed
											if (prompt !== '' && e.key === 'Enter' && !e.shiftKey) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
726
												submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
727
728
729
730
731
											}
										}
									}}
									on:keydown={async (e) => {
										const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
732

Timothy J. Baek's avatar
Timothy J. Baek committed
733
734
735
736
										// Check if Ctrl + R is pressed
										if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
											e.preventDefault();
											console.log('regenerate');
737

Timothy J. Baek's avatar
Timothy J. Baek committed
738
739
740
											const regenerateButton = [
												...document.getElementsByClassName('regenerate-response-button')
											]?.at(-1);
741

Timothy J. Baek's avatar
Timothy J. Baek committed
742
743
											regenerateButton?.click();
										}
744

Timothy J. Baek's avatar
Timothy J. Baek committed
745
746
										if (prompt === '' && e.key == 'ArrowUp') {
											e.preventDefault();
747

Timothy J. Baek's avatar
Timothy J. Baek committed
748
749
750
											const userMessageElement = [
												...document.getElementsByClassName('user-message')
											]?.at(-1);
751

Timothy J. Baek's avatar
Timothy J. Baek committed
752
753
754
											const editButton = [
												...document.getElementsByClassName('edit-user-message-button')
											]?.at(-1);
755

Timothy J. Baek's avatar
Timothy J. Baek committed
756
											console.log(userMessageElement);
Timothy J. Baek's avatar
Timothy J. Baek committed
757

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
767
768
769
770
771
											const commandOptionButton = [
												...document.getElementsByClassName('selected-command-option-button')
											]?.at(-1);
											commandOptionButton.scrollIntoView({ block: 'center' });
										}
Timothy J. Baek's avatar
Timothy J. Baek committed
772

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
778
779
780
781
782
											const commandOptionButton = [
												...document.getElementsByClassName('selected-command-option-button')
											]?.at(-1);
											commandOptionButton.scrollIntoView({ block: 'center' });
										}
Timothy J. Baek's avatar
Timothy J. Baek committed
783

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

Timothy J. Baek's avatar
Timothy J. Baek committed
787
788
789
											const commandOptionButton = [
												...document.getElementsByClassName('selected-command-option-button')
											]?.at(-1);
Timothy J. Baek's avatar
Timothy J. Baek committed
790

Timothy J. Baek's avatar
Timothy J. Baek committed
791
792
793
794
795
796
797
798
											if (e.shiftKey) {
												prompt = `${prompt}\n`;
											} else if (commandOptionButton) {
												commandOptionButton?.click();
											} else {
												document.getElementById('send-message-button')?.click();
											}
										}
799

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

Timothy J. Baek's avatar
Timothy J. Baek committed
803
804
805
											const commandOptionButton = [
												...document.getElementsByClassName('selected-command-option-button')
											]?.at(-1);
806

Timothy J. Baek's avatar
Timothy J. Baek committed
807
808
809
											commandOptionButton?.click();
										} else if (e.key === 'Tab') {
											const words = findWordIndices(prompt);
810

Timothy J. Baek's avatar
Timothy J. Baek committed
811
812
813
											if (words.length > 0) {
												const word = words.at(0);
												const fullPrompt = prompt;
814

Timothy J. Baek's avatar
Timothy J. Baek committed
815
816
												prompt = prompt.substring(0, word?.endIndex + 1);
												await tick();
817

Timothy J. Baek's avatar
Timothy J. Baek committed
818
819
820
												e.target.scrollTop = e.target.scrollHeight;
												prompt = fullPrompt;
												await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
821

Timothy J. Baek's avatar
Timothy J. Baek committed
822
823
824
												e.preventDefault();
												e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
											}
Timothy J. Baek's avatar
Timothy J. Baek committed
825

Timothy J. Baek's avatar
Timothy J. Baek committed
826
827
											e.target.style.height = '';
											e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
Timothy J. Baek's avatar
Timothy J. Baek committed
828
829
										}

Timothy J. Baek's avatar
Timothy J. Baek committed
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
										if (e.key === 'Escape') {
											console.log('Escape');
											atSelectedModel = undefined;
										}
									}}
									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}`
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
														];
													};

													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')}>
											<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"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
878
												on:click={async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
													try {
														const res = await navigator.mediaDevices
															.getUserMedia({ audio: true })
															.catch(function (err) {
																toast.error(
																	$i18n.t(
																		`Permission denied when accessing microphone: {{error}}`,
																		{
																			error: err
																		}
																	)
																);
																return null;
															});

														if (res) {
															recording = true;
														}
													} catch {
														toast.error($i18n.t('Permission denied when accessing microphone'));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
899
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
900
901
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
902
903
904
905
906
907
908
909
910
911
912
												<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>
Timothy J. Baek's avatar
Timothy J. Baek committed
913
914
											</button>
										</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
915
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
916
917
918
919
920
921
922
923
924
925
								</div>
							</div>
						</div>
						<div class="flex items-end w-10">
							{#if messages.length == 0 || messages.at(-1).done == true}
								{#if prompt === ''}
									<div class=" flex items-center mb-1">
										<Tooltip content={$i18n.t('Call')}>
											<button
												class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center"
Timothy J. Baek's avatar
Timothy J. Baek committed
926
												type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
927
												on:click={async () => {
928
929
													if (selectedModels.length > 1) {
														toast.error($i18n.t('Select only one model to call'));
Timothy J. Baek's avatar
Timothy J. Baek committed
930
931
932

														return;
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
933
934
935
936
937
938
939
940

													if ($config.audio.stt.engine === 'web') {
														toast.error(
															$i18n.t('Call feature is not supported when using Web STT engine')
														);

														return;
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
941
942
													// check if user has access to getUserMedia
													try {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
943
														await navigator.mediaDevices.getUserMedia({ audio: true });
Timothy J. Baek's avatar
Timothy J. Baek committed
944
														// If the user grants the permission, proceed to show the call overlay
Timothy J. Baek's avatar
Timothy J. Baek committed
945

Timothy J. Baek's avatar
Timothy J. Baek committed
946
														showCallOverlay.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
947
948
949
													} catch (err) {
														// If the user denies the permission or an error occurs, show an error message
														toast.error($i18n.t('Permission denied when accessing media devices'));
950
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
951
												}}
Timothy J. Baek's avatar
Timothy J. Baek committed
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
											>
												<Headphone className="size-6" />
											</button>
										</Tooltip>
									</div>
								{:else}
									<div class=" flex items-center mb-1">
										<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-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"
												type="submit"
												disabled={prompt === ''}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 16 16"
													fill="currentColor"
													class="size-6"
												>
													<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>
									</div>
								{/if}
							{:else}
								<div class=" flex items-center mb-1.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
986
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
987
988
989
990
										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();
										}}
991
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
992
993
										<svg
											xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
994
											viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
995
											fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
996
											class="size-6"
Timothy J. Baek's avatar
Timothy J. Baek committed
997
998
999
										>
											<path
												fill-rule="evenodd"
Timothy J. Baek's avatar
Timothy J. Baek committed
1000
												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
1001
1002
1003
1004
												clip-rule="evenodd"
											/>
										</svg>
									</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
1005
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1006
							{/if}
1007
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1008
1009
					</form>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1010

Timothy J. Baek's avatar
Timothy J. Baek committed
1011
				<div class="mt-1.5 text-xs text-gray-500 text-center line-clamp-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
1012
					{$i18n.t('LLMs can make mistakes. Verify important information.')}
1013
1014
1015
1016
1017
				</div>
			</div>
		</div>
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1018
1019

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
1020
1021
1022
	.scrollbar-hidden:active::-webkit-scrollbar-thumb,
	.scrollbar-hidden:focus::-webkit-scrollbar-thumb,
	.scrollbar-hidden:hover::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
1023
1024
		visibility: visible;
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
1025
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
1026
1027
1028
		visibility: hidden;
	}
</style>