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
				fileItem.status = 'processed';
Dave Bauman's avatar
Dave Bauman committed
150
151
152
153
				files = files;
			}
		} catch (e) {
			// Remove the failed doc from the files array
Timothy J. Baek's avatar
Timothy J. Baek committed
154
			files = files.filter((f) => f.id !== fileItem.id);
Dave Bauman's avatar
Dave Bauman committed
155
			toast.error(e);
156
157
158
		}
	};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
309
310
311
312
313
314
315
316
317
318
319
<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
320
							}}
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
						>
							<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
338

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

Timothy J. Baek's avatar
Timothy J. Baek committed
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
				{#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
394
							<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
395
								Talking to <span class=" font-medium">{atSelectedModel.name}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
396
397
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
398
399
400
401
402
403
404
405
406
407
408
409
						<div>
							<button
								class="flex items-center"
								on:click={() => {
									atSelectedModel = undefined;
								}}
							>
								<XMark />
							</button>
						</div>
					</div>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
410
			</div>
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

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
414
	<div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
Timothy J. Baek's avatar
Timothy J. Baek committed
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
		<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
431
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
432
433
434
435
436
437
438
439
440
441
442
443
									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
444
									uploadFileHandler(file);
Timothy J. Baek's avatar
Timothy J. Baek committed
445
446
447
448
449
								}
							});
						} else {
							toast.error($i18n.t(`File not found.`));
						}
Timothy J. Baek's avatar
Timothy J. Baek committed
450
451

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

				{#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();
472
473

							if ($settings?.speechAutoSend ?? false) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
474
								submitPrompt(prompt);
475
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
476
477
478
479
480
481
482
						}}
					/>
				{: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
483
							submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
						}}
					>
						<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>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
525
											{:else if ['doc', 'file'].includes(file.type)}
Timothy J. Baek's avatar
Timothy J. Baek committed
526
527
												<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
528
												>
Timothy J. Baek's avatar
Timothy J. Baek committed
529
													<div class="p-2.5 bg-red-400 text-white rounded-lg">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
530
														{#if file.status === 'processed'}
Timothy J. Baek's avatar
Timothy J. Baek committed
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
															<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
632
											{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
633
634
635
636
637
638
639
640
641
642

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

Timothy J. Baek's avatar
Timothy J. Baek committed
660
661
662
663
							<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
664
										bind:selectedToolIds
Timothy J. Baek's avatar
Timothy J. Baek committed
665
666
667
668
669
670
671
672
673
674
										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
675
676
677
678
679
680
681
682
										uploadFilesHandler={() => {
											filesInputElement.click();
										}}
										onClose={async () => {
											await tick();
											chatTextAreaElement?.focus();
										}}
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
683
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
684
											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
685
686
687
688
											type="button"
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
689
												viewBox="0 0 16 16"
Timothy J. Baek's avatar
Timothy J. Baek committed
690
												fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
691
												class="size-5"
Timothy J. Baek's avatar
Timothy J. Baek committed
692
693
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
694
													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
695
696
697
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
698
									</InputMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
699
								</div>
700

Timothy J. Baek's avatar
Timothy J. Baek committed
701
702
703
								<textarea
									id="chat-textarea"
									bind:this={chatTextAreaElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
704
									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
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
									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();
											}
722

Timothy J. Baek's avatar
Timothy J. Baek committed
723
724
											// 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
725
												submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
726
727
728
729
730
											}
										}
									}}
									on:keydown={async (e) => {
										const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
731

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
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
854
855
856
857
858
										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
859
															}
Timothy J. Baek's avatar
Timothy J. Baek committed
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
														];
													};

													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
877
												on:click={async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
													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
898
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
899
900
												}}
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
901
902
903
904
905
906
907
908
909
910
911
												<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
912
913
											</button>
										</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
914
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
915
916
917
918
919
920
921
922
923
924
								</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
925
												type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
926
												on:click={async () => {
927
928
													if (selectedModels.length > 1) {
														toast.error($i18n.t('Select only one model to call'));
Timothy J. Baek's avatar
Timothy J. Baek committed
929
930
931

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

													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
940
941
													// check if user has access to getUserMedia
													try {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
942
														await navigator.mediaDevices.getUserMedia({ audio: true });
Timothy J. Baek's avatar
Timothy J. Baek committed
943
														// If the user grants the permission, proceed to show the call overlay
Timothy J. Baek's avatar
Timothy J. Baek committed
944

Timothy J. Baek's avatar
Timothy J. Baek committed
945
														showCallOverlay.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
946
947
948
													} 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'));
949
													}
Timothy J. Baek's avatar
Timothy J. Baek committed
950
												}}
Timothy J. Baek's avatar
Timothy J. Baek committed
951
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
											>
												<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
985
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
986
987
988
989
										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();
										}}
990
									>
Timothy J. Baek's avatar
Timothy J. Baek committed
991
992
										<svg
											xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
993
											viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
994
											fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
995
											class="size-6"
Timothy J. Baek's avatar
Timothy J. Baek committed
996
997
998
										>
											<path
												fill-rule="evenodd"
Timothy J. Baek's avatar
Timothy J. Baek committed
999
												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
1000
1001
1002
1003
												clip-rule="evenodd"
											/>
										</svg>
									</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
1004
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1005
							{/if}
1006
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1007
1008
					</form>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1009

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

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
1019
1020
1021
	.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
1022
1023
		visibility: visible;
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
1024
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
1025
1026
1027
		visibility: hidden;
	}
</style>