+page.svelte 35.3 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { openDB, deleteDB } from 'idb';
3
	import { v4 as uuidv4 } from 'uuid';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
	import { marked } from 'marked';
Timothy J. Baek's avatar
Timothy J. Baek committed
5
6
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;
7
	import hljs from 'highlight.js';
8
	import 'highlight.js/styles/github-dark.min.css';
Timothy J. Baek's avatar
Timothy J. Baek committed
9
	import auto_render from 'katex/dist/contrib/auto-render.mjs';
10
	import 'katex/dist/katex.min.css';
Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
	import toast from 'svelte-french-toast';

13
	import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
14
	import { onMount, tick } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
15

16
	import Navbar from '$lib/components/layout/Navbar.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
17
	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
18
	import Suggestions from '$lib/components/chat/Suggestions.svelte';
19

20
	let API_BASE_URL = BUILD_TIME_API_BASE_URL;
21
	let db;
Timothy J. Baek's avatar
Timothy J. Baek committed
22
23

	let selectedModel = '';
24
25
26
27
	let settings = {
		system: null,
		temperature: null
	};
28

29
	let models = [];
30
	let chats = [];
31

32
	let chatId = uuidv4();
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	let prompt = '';
35
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
36

37
	let showSettings = false;
38
39
	let stopResponseFlag = false;
	let autoScroll = true;
40
	let suggestions = ''; // $page.url.searchParams.get('suggestions');
41

42
	onMount(async () => {
43
44
		await createNewChat(true);
		await setDBandLoadChats();
45
46
	});

47
48
49
	//////////////////////////
	// Helper functions
	//////////////////////////
Timothy J. Baek's avatar
Timothy J. Baek committed
50

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
	const splitStream = (splitOn) => {
		let buffer = '';
		return new TransformStream({
			transform(chunk, controller) {
				buffer += chunk;
				const parts = buffer.split(splitOn);
				parts.slice(0, -1).forEach((part) => controller.enqueue(part));
				buffer = parts[parts.length - 1];
			},
			flush(controller) {
				if (buffer) controller.enqueue(buffer);
			}
		});
	};

66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
	const copyToClipboard = (text) => {
		if (!navigator.clipboard) {
			var textArea = document.createElement('textarea');
			textArea.value = text;

			// Avoid scrolling to bottom
			textArea.style.top = '0';
			textArea.style.left = '0';
			textArea.style.position = 'fixed';

			document.body.appendChild(textArea);
			textArea.focus();
			textArea.select();

			try {
				var successful = document.execCommand('copy');
				var msg = successful ? 'successful' : 'unsuccessful';
				console.log('Fallback: Copying text command was ' + msg);
			} catch (err) {
				console.error('Fallback: Oops, unable to copy', err);
			}

			document.body.removeChild(textArea);
			return;
		}
		navigator.clipboard.writeText(text).then(
			function () {
				console.log('Async: Copying to clipboard was successful!');
				toast.success('Copying to clipboard was successful!');
			},
			function (err) {
				console.error('Async: Could not copy text: ', err);
			}
		);
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
102
103
104
105
106
107
108
	const createCopyCodeBlockButton = () => {
		// use a class selector if available
		let blocks = document.querySelectorAll('pre');
		console.log(blocks);

		blocks.forEach((block) => {
			// only add button if browser supports Clipboard API
Timothy J. Baek's avatar
Timothy J. Baek committed
109
110

			if (navigator.clipboard && block.childNodes.length < 2) {
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
				let code = block.querySelector('code');
				code.style.borderTopRightRadius = 0;
				code.style.borderTopLeftRadius = 0;

				let topBarDiv = document.createElement('div');
				topBarDiv.style.backgroundColor = '#343541';
				topBarDiv.style.overflowX = 'auto';
				topBarDiv.style.display = 'flex';
				topBarDiv.style.justifyContent = 'space-between';
				topBarDiv.style.padding = '0 1rem';
				topBarDiv.style.paddingTop = '4px';
				topBarDiv.style.borderTopRightRadius = '8px';
				topBarDiv.style.borderTopLeftRadius = '8px';

				let langDiv = document.createElement('div');
				langDiv.textContent = code?.className.split(' ')[0].slice(9);
				langDiv.style.color = 'white';
				langDiv.style.margin = '4px';
				langDiv.style.fontSize = '0.75rem';
Timothy J. Baek's avatar
Timothy J. Baek committed
130

131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
				let button = document.createElement('button');
				button.textContent = 'Copy Code';
				button.style.background = 'none';
				button.style.fontSize = '0.75rem';
				button.style.border = 'none';
				button.style.margin = '4px';
				button.style.cursor = 'pointer';
				button.style.color = '#ddd';
				button.addEventListener('click', () => copyCode(block, button));

				topBarDiv.appendChild(langDiv);
				topBarDiv.appendChild(button);

				block.prepend(topBarDiv);

				// button.addEventListener('click', async () => {
				// 	await copyCode(block, button);
				// });
Timothy J. Baek's avatar
Timothy J. Baek committed
149
150
151
152
153
154
155
156
157
158
			}
		});

		async function copyCode(block, button) {
			let code = block.querySelector('code');
			let text = code.innerText;

			await navigator.clipboard.writeText(text);

			// visual feedback that task is completed
159
			button.innerText = 'Copied!';
Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162

			setTimeout(() => {
				button.innerText = 'Copy Code';
163
			}, 1000);
Timothy J. Baek's avatar
Timothy J. Baek committed
164
165
166
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
167
168
169
170
171
172
173
174
175
176
	const renderLatex = () => {
		let chatMessageElements = document.getElementsByClassName('chat-assistant');
		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];

		for (const element of chatMessageElements) {
			auto_render(element, {
				// customised options
				// • auto-render specific keys, e.g.:
				delimiters: [
					{ left: '$$', right: '$$', display: true },
177
178
					{ left: '$', right: '$', display: true },
					{ left: '\\(', right: '\\)', display: true },
Timothy J. Baek's avatar
Timothy J. Baek committed
179
180
181
					{ left: '\\[', right: '\\]', display: true }
				],
				// • rendering keys, e.g.:
182
				throwOnError: false
Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186
			});
		}
	};

187
188
189
190
	//////////////////////////
	// Web functions
	//////////////////////////

191
192
193
194
195
	const createNewChat = async (init = false) => {
		if (init || messages.length > 0) {
			chatId = uuidv4();
			messages = [];
			title = '';
196

197
198
199
200
			settings = JSON.parse(localStorage.getItem('settings') ?? JSON.stringify(settings));

			API_BASE_URL = settings?.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
			console.log(API_BASE_URL);
201

202
203
204
			if (models.length === 0) {
				await getModelTags();
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
205

206
207
208
209
			selectedModel =
				settings.model && models.map((model) => model.name).includes(settings.model)
					? settings.model
					: '';
210

211
			console.log(chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
212
		}
213
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
214

215
216
217
218
219
220
221
222
223
224
225
226
	const setDBandLoadChats = async () => {
		db = await openDB('Chats', 1, {
			upgrade(db) {
				const store = db.createObjectStore('chats', {
					keyPath: 'id',
					autoIncrement: true
				});
				store.createIndex('timestamp', 'timestamp');
			}
		});

		chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
227
228
	};

229
230
231
232
233
	const saveDefaultModel = () => {
		settings.model = selectedModel;
		localStorage.setItem('settings', JSON.stringify(settings));
		toast.success('Default model updated');
	};
234

235
	const saveSettings = async (updated) => {
236
		console.log(updated);
237
238
		settings = { ...settings, ...updated };
		localStorage.setItem('settings', JSON.stringify(settings));
239
		API_BASE_URL = updated?.API_BASE_URL ?? API_BASE_URL;
240
		await getModelTags();
241
242
243
244
	};

	const loadChat = async (id) => {
		const chat = await db.get('chats', id);
Timothy J. Baek's avatar
Timothy J. Baek committed
245
		if (chatId !== chat.id) {
246
247
248
			if (chat.messages.length > 0) {
				chat.messages.at(-1).done = true;
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
251
252
			messages = chat.messages;
			title = chat.title;
			chatId = chat.id;
			selectedModel = chat.model ?? selectedModel;
253
254
			settings.system = chat.system ?? settings.system;
			settings.temperature = chat.temperature ?? settings.temperature;
Timothy J. Baek's avatar
Timothy J. Baek committed
255
256

			await tick();
257
258
			renderLatex();

Timothy J. Baek's avatar
Timothy J. Baek committed
259
260
261
			hljs.highlightAll();
			createCopyCodeBlockButton();
		}
262
263
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
	const editChatTitle = async (id, _title) => {
		const chat = await db.get('chats', id);
		console.log(chat);

		await db.put('chats', {
			...chat,
			title: _title
		});

		title = _title;
		chats = await db.getAllFromIndex('chats', 'timestamp');
	};

	const deleteChat = async (id) => {
		createNewChat();

		const chat = await db.delete('chats', id);
		console.log(chat);
		chats = await db.getAllFromIndex('chats', 'timestamp');
	};

285
286
287
288
289
290
	const deleteChatHistory = async () => {
		const tx = db.transaction('chats', 'readwrite');
		await Promise.all([tx.store.clear(), tx.done]);
		chats = await db.getAllFromIndex('chats', 'timestamp');
	};

291
292
	const importChatHistory = async (chatHistory) => {
		for (const chat of chatHistory) {
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
			console.log(chat);

			await db.put('chats', {
				id: chat.id,
				model: chat.model,
				system: chat.system,
				options: chat.options,
				title: chat.title,
				timestamp: chat.timestamp,
				messages: chat.messages
			});
		}
		chats = await db.getAllFromIndex('chats', 'timestamp');

		console.log(chats);
	};

	const exportChatHistory = async () => {
		chats = await db.getAllFromIndex('chats', 'timestamp');
		let blob = new Blob([JSON.stringify(chats)], { type: 'application/json' });
		saveAs(blob, `chat-export-${Date.now()}.json`);
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
316
317
318
319
	const openSettings = async () => {
		showSettings = true;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
320
321
322
323
324
325
326
327
328
329
330
	const editMessage = async (messageIdx) => {
		messages = messages.map((message, idx) => {
			if (messageIdx === idx) {
				message.edit = true;
				message.editedContent = message.content;
			}
			return message;
		});
	};

	const confirmEditMessage = async (messageIdx) => {
331
		let userPrompt = messages.at(messageIdx).editedContent;
Timothy J. Baek's avatar
Timothy J. Baek committed
332
333
334
335

		messages.splice(messageIdx, messages.length - messageIdx);
		messages = messages;

336
		await submitPrompt(userPrompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
337
338
339
340
341
342
343
344
345
346
347
348
349
350
	};

	const cancelEditMessage = (messageIdx) => {
		messages = messages.map((message, idx) => {
			if (messageIdx === idx) {
				message.edit = undefined;
				message.editedContent = undefined;
			}
			return message;
		});

		console.log(messages);
	};

351
352
353
354
355
356
357
358
359
360
361
362
	const rateMessage = async (messageIdx, rating) => {
		messages = messages.map((message, idx) => {
			if (messageIdx === idx) {
				message.rating = rating;
			}
			return message;
		});

		await db.put('chats', {
			id: chatId,
			title: title === '' ? 'New Chat' : title,
			model: selectedModel,
363
			system: settings.system,
364
			options: {
365
				temperature: settings.temperature
366
367
368
369
370
371
372
373
			},
			timestamp: Date.now(),
			messages: messages
		});

		console.log(messages);
	};

374
375
376
377
	//////////////////////////
	// Ollama functions
	//////////////////////////

378
	const getModelTags = async (url = null, type = 'all') => {
379
		const res = await fetch(`${url === null ? API_BASE_URL : url}/tags`, {
380
381
382
383
384
385
386
387
388
389
390
391
			method: 'GET',
			headers: {
				Accept: 'application/json',
				'Content-Type': 'application/json'
			}
		})
			.then(async (res) => {
				if (!res.ok) throw await res.json();
				return res.json();
			})
			.catch((error) => {
				console.log(error);
392
393
				toast.error('Server connection failed');
				return null;
394
395
			});

396
		console.log(res);
397

398
399
400
401
402
403
404
405
406
		if (type === 'all') {
			if (settings.OPENAI_API_KEY) {
				// Validate OPENAI_API_KEY
				const openaiModelRes = await fetch(`https://api.openai.com/v1/models`, {
					method: 'GET',
					headers: {
						'Content-Type': 'application/json',
						Authorization: `Bearer ${settings.OPENAI_API_KEY}`
					}
407
				})
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
					.then(async (res) => {
						if (!res.ok) throw await res.json();
						return res.json();
					})
					.catch((error) => {
						console.log(error);
						toast.error(`OpenAI: ${error?.error?.message ?? 'Network Problem'}`);
						return null;
					});
				const openaiModels = openaiModelRes?.data ?? null;

				if (openaiModels) {
					models = [
						...(res?.models ?? []),
						{ name: 'hr' },

						...openaiModels
							.map((model) => ({ name: model.id, label: 'OpenAI' }))
							.filter((model) => model.name.includes('gpt'))
					];
				} else {
					models = res?.models ?? [];
				}
431
432
433
			} else {
				models = res?.models ?? [];
			}
434
435

			return models;
436
		} else {
437
			return res?.models ?? null;
438
		}
439
440
	};

441
	const sendPrompt = async (userPrompt) => {
442
		if (selectedModel.includes('gpt-')) {
443
444
445
446
447
448
449
			await sendPromptOpenAI(userPrompt);
		} else {
			await sendPromptOllama(userPrompt);
		}
	};

	const sendPromptOllama = async (userPrompt) => {
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
		let responseMessage = {
			role: 'assistant',
			content: ''
		};

		messages = [...messages, responseMessage];
		window.scrollTo({ top: document.body.scrollHeight });

		const res = await fetch(`${API_BASE_URL}/generate`, {
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream'
			},
			body: JSON.stringify({
				model: selectedModel,
				prompt: userPrompt,
466
				system: settings.system ?? undefined,
467
468
469
470
471
472
473
				options: {
					seed: settings.seed ?? undefined,
					temperature: settings.temperature ?? undefined,
					repeat_penalty: settings.repeat_penalty ?? undefined,
					top_k: settings.top_k ?? undefined,
					top_p: settings.top_p ?? undefined
				},
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
				context:
					messages.length > 3 && messages.at(-3).context != undefined
						? messages.at(-3).context
						: undefined
			})
		});

		const reader = res.body
			.pipeThrough(new TextDecoderStream())
			.pipeThrough(splitStream('\n'))
			.getReader();

		while (true) {
			const { value, done } = await reader.read();
			if (done || stopResponseFlag) {
				if (stopResponseFlag) {
					responseMessage.done = true;
					messages = messages;
					hljs.highlightAll();
					createCopyCodeBlockButton();
					renderLatex();
				}

				break;
			}

			try {
				let lines = value.split('\n');

				for (const line of lines) {
					if (line !== '') {
						console.log(line);
						let data = JSON.parse(line);
						if (data.done == false) {
							if (responseMessage.content == '' && data.response == '\n') {
								continue;
							} else {
								responseMessage.content += data.response;
								messages = messages;
							}
						} else {
							responseMessage.done = true;
							responseMessage.context = data.context;
							messages = messages;
							hljs.highlightAll();
							createCopyCodeBlockButton();
							renderLatex();
						}
					}
				}
			} catch (error) {
				console.log(error);
			}

			if (autoScroll) {
				window.scrollTo({ top: document.body.scrollHeight });
			}

			await db.put('chats', {
				id: chatId,
				title: title === '' ? 'New Chat' : title,
				model: selectedModel,
536
				system: settings.system,
537
				options: {
538
					temperature: settings.temperature
539
540
541
542
543
544
545
546
547
548
549
				},
				timestamp: Date.now(),
				messages: messages
			});
		}

		stopResponseFlag = false;
		await tick();
		if (autoScroll) {
			window.scrollTo({ top: document.body.scrollHeight });
		}
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573

		if (messages.length == 2) {
			await generateChatTitle(chatId, userPrompt);
		}
	};

	const sendPromptOpenAI = async (userPrompt) => {
		if (settings.OPENAI_API_KEY) {
			if (models) {
				let responseMessage = {
					role: 'assistant',
					content: ''
				};

				messages = [...messages, responseMessage];
				window.scrollTo({ top: document.body.scrollHeight });

				const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						Authorization: `Bearer ${settings.OPENAI_API_KEY}`
					},
					body: JSON.stringify({
574
						model: selectedModel,
575
						stream: true,
576
577
578
579
580
581
582
583
584
585
586
587
588
589
						messages: [
							settings.system
								? {
										role: 'system',
										content: settings.system
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
							.map((message) => ({ ...message, done: undefined })),
						temperature: settings.temperature ?? undefined,
						top_p: settings.top_p ?? undefined,
						frequency_penalty: settings.repeat_penalty ?? undefined
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
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
					})
				});

				const reader = res.body
					.pipeThrough(new TextDecoderStream())
					.pipeThrough(splitStream('\n'))
					.getReader();

				while (true) {
					const { value, done } = await reader.read();
					if (done || stopResponseFlag) {
						if (stopResponseFlag) {
							responseMessage.done = true;
							messages = messages;
						}

						break;
					}

					try {
						let lines = value.split('\n');

						for (const line of lines) {
							if (line !== '') {
								console.log(line);
								if (line === 'data: [DONE]') {
									responseMessage.done = true;
									messages = messages;
								} else {
									let data = JSON.parse(line.replace(/^data: /, ''));
									console.log(data);

									if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
										continue;
									} else {
										responseMessage.content += data.choices[0].delta.content ?? '';
										messages = messages;
									}
								}
							}
						}
					} catch (error) {
						console.log(error);
					}

					if (autoScroll) {
						window.scrollTo({ top: document.body.scrollHeight });
					}

					await db.put('chats', {
						id: chatId,
						title: title === '' ? 'New Chat' : title,
						model: selectedModel,
						system: settings.system,
						options: {
							temperature: settings.temperature
						},
						timestamp: Date.now(),
						messages: messages
					});
				}

				stopResponseFlag = false;

				hljs.highlightAll();
				createCopyCodeBlockButton();
				renderLatex();

				await tick();
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}

				if (messages.length == 2) {
					await setChatTitle(chatId, userPrompt);
				}
			}
		}
668
669
670
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
671
		console.log('submitPrompt');
672

Timothy J. Baek's avatar
Timothy J. Baek committed
673
674
		if (selectedModel === '') {
			toast.error('Model not selected');
675
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
676
677
			console.log('wait');
		} else {
678
679
680
			if (messages.length == 0) {
				await db.put('chats', {
					id: chatId,
681
					model: selectedModel,
682
					system: settings.system,
683
					options: {
684
						temperature: settings.temperature
685
					},
686
687
688
689
690
691
					title: 'New Chat',
					timestamp: Date.now(),
					messages: messages
				});
				chats = await db.getAllFromIndex('chats', 'timestamp');
			}
692

693
694
695
696
			messages = [
				...messages,
				{
					role: 'user',
697
					content: userPrompt
698
699
				}
			];
Timothy J. Baek's avatar
Timothy J. Baek committed
700

701
702
			prompt = '';

703
704
705
706
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

707
			await sendPrompt(userPrompt);
708
709

			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
710
711
712
		}
	};

713
714
715
716
717
	const regenerateResponse = async () => {
		console.log('regenerateResponse');
		if (messages.length != 0 && messages.at(-1).done == true) {
			messages.splice(messages.length - 1, 1);
			messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
718

719
720
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
721

722
			await sendPrompt(userPrompt);
723

724
			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
725
		}
726
	};
727

728
729
730
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
Timothy J. Baek's avatar
Timothy J. Baek committed
731
	};
732

733
734
	const generateChatTitle = async (_chatId, userPrompt) => {
		console.log('generateChatTitle');
735

736
		const res = await fetch(`${API_BASE_URL}/generate`, {
737
738
739
740
741
742
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream'
			},
			body: JSON.stringify({
				model: selectedModel,
743
				prompt: `Generate a brief 3-5 word title for this question, excluding the term 'title.' Then, please reply with only the title: ${userPrompt}`,
744
745
746
747
748
749
750
751
752
753
754
755
756
				stream: false
			})
		})
			.then(async (res) => {
				if (!res.ok) throw await res.json();
				return res.json();
			})
			.catch((error) => {
				console.log(error);
				return null;
			});

		if (res) {
757
758
759
760
761
762
763
764
765
			await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
		}
	};

	const setChatTitle = async (_chatId, _title) => {
		const chat = await db.get('chats', _chatId);
		await db.put('chats', { ...chat, title: _title });
		if (chat.id === chatId) {
			title = _title;
766
767
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
768
769
</script>

770
771
772
773
774
775
<svelte:window
	on:scroll={(e) => {
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 30;
	}}
/>

Timothy J. Baek's avatar
Timothy J. Baek committed
776
777
778
779
<div class="app">
	<div
		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 min-h-screen overflow-auto flex flex-row"
	>
780
		<Navbar
Timothy J. Baek's avatar
Timothy J. Baek committed
781
			selectedChatId={chatId}
782
783
784
			{chats}
			{title}
			{loadChat}
Timothy J. Baek's avatar
Timothy J. Baek committed
785
786
			{editChatTitle}
			{deleteChat}
787
788
789
790
			{createNewChat}
			{importChatHistory}
			{exportChatHistory}
			{deleteChatHistory}
Timothy J. Baek's avatar
Timothy J. Baek committed
791
			{openSettings}
792
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
793

794
		<SettingsModal bind:show={showSettings} {saveSettings} {getModelTags} />
Timothy J. Baek's avatar
Timothy J. Baek committed
795

Timothy J. Baek's avatar
Timothy J. Baek committed
796
797
798
		<div class="min-h-screen w-full flex justify-center">
			<div class=" py-2.5 flex flex-col justify-between w-full">
				<div class="max-w-2xl mx-auto w-full px-2.5 mt-14">
Timothy J. Baek's avatar
Timothy J. Baek committed
799
					<div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-900">
Timothy J. Baek's avatar
Timothy J. Baek committed
800
						<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
801
802
							<label
								for="models"
Timothy J. Baek's avatar
Timothy J. Baek committed
803
								class="block mb-2 text-sm font-medium dark:text-gray-200 flex justify-between"
Timothy J. Baek's avatar
Timothy J. Baek committed
804
805
806
807
							>
								<div class="self-center">Model</div>

								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
808
									class=" self-center dark:hover:text-gray-300"
Timothy J. Baek's avatar
Timothy J. Baek committed
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
									on:click={() => {
										openSettings();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
										stroke-width="1.5"
										stroke="currentColor"
										class="w-4 h-4"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
										/>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
										/>
									</svg>
								</button>
							</label>
834
835
836
837

							<div>
								<select
									id="models"
Timothy J. Baek's avatar
Timothy J. Baek committed
838
									class="outline-none border dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
839
840
841
842
843
									bind:value={selectedModel}
									disabled={messages.length != 0}
								>
									<option value="" selected>Select a model</option>

Timothy J. Baek's avatar
Timothy J. Baek committed
844
									{#each models as model}
845
846
847
848
849
										{#if model.name === 'hr'}
											<hr />
										{:else}
											<option value={model.name}>{model.name}</option>
										{/if}
850
851
852
853
854
855
									{/each}
								</select>
								<div class="text-right mt-1.5 text-xs text-gray-500">
									<button on:click={saveDefaultModel}> Set as default</button>
								</div>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
856
857
858
859
						</div>
					</div>
				</div>

860
				<div class=" h-full mb-48 w-full flex flex-col">
861
					{#if messages.length == 0}
862
						<div class="m-auto text-center max-w-md pb-16">
Timothy J. Baek's avatar
Timothy J. Baek committed
863
							<div class="flex justify-center mt-8">
Timothy J. Baek's avatar
Timothy J. Baek committed
864
865
								<img src="/ollama.png" class="w-16 invert-[80%]" />
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
866
							<div class="mt-6 text-3xl text-gray-400 dark:text-gray-500 font-semibold">
Timothy J. Baek's avatar
Timothy J. Baek committed
867
868
869
								Get up and running with large language models, locally.
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
870
							<div class=" my-4 text-gray-300 dark:text-gray-600">
Timothy J. Baek's avatar
Timothy J. Baek committed
871
872
873
								Run Llama 2, Code Llama, and other models. <br /> Customize and create your own.
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
874
					{:else}
875
						{#each messages as message, messageIdx}
Timothy J. Baek's avatar
Timothy J. Baek committed
876
							<div class=" w-full {message.role == 'user' ? '' : ' bg-gray-100  dark:bg-gray-700'}">
Timothy J. Baek's avatar
Timothy J. Baek committed
877
								<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg group">
Timothy J. Baek's avatar
Timothy J. Baek committed
878
									<div class="space-x-7 flex w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
879
880
										<div class="">
											<img
Timothy J. Baek's avatar
Timothy J. Baek committed
881
882
883
884
885
												src="{message.role == 'user'
													? settings.gravatarUrl
														? settings.gravatarUrl
														: '/user'
													: '/favicon'}.png"
Timothy J. Baek's avatar
Timothy J. Baek committed
886
887
888
889
												class=" max-w-[32px] object-cover rounded"
											/>
										</div>

890
										{#if message.role != 'user' && message.content == ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
891
892
893
											<div class="w-full pr-28">
												<div class="animate-pulse flex w-full">
													<div class="space-y-2 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
894
														<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />
Timothy J. Baek's avatar
Timothy J. Baek committed
895
896

														<div class="grid grid-cols-3 gap-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
897
898
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
Timothy J. Baek's avatar
Timothy J. Baek committed
899
900
														</div>
														<div class="grid grid-cols-4 gap-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
901
902
903
904
905
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1" />
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-2" />
															<div
																class="h-2 bg-gray-200 dark:bg-gray-600 rounded col-span-1 mr-4"
															/>
Timothy J. Baek's avatar
Timothy J. Baek committed
906
907
														</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
908
														<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded" />
Timothy J. Baek's avatar
Timothy J. Baek committed
909
910
911
912
													</div>
												</div>
											</div>
										{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
913
											<div
Timothy J. Baek's avatar
Timothy J. Baek committed
914
												class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-8 prose-ol:-mb-8 prose-li:-mb-4 whitespace-pre-line"
Timothy J. Baek's avatar
Timothy J. Baek committed
915
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
												{#if message.role == 'user'}
													{#if message?.edit === true}
														<div>
															<textarea
																class=" bg-transparent outline-none w-full resize-none"
																bind:value={message.editedContent}
																on:input={(e) => {
																	e.target.style.height = '';
																	e.target.style.height = `${e.target.scrollHeight}px`;
																}}
																on:focus={(e) => {
																	e.target.style.height = '';
																	e.target.style.height = `${e.target.scrollHeight}px`;
																}}
															/>

Timothy J. Baek's avatar
Timothy J. Baek committed
932
															<div class=" flex justify-end space-x-2 text-sm font-medium">
Timothy J. Baek's avatar
Timothy J. Baek committed
933
																<button
Timothy J. Baek's avatar
Timothy J. Baek committed
934
																	class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
Timothy J. Baek's avatar
Timothy J. Baek committed
935
936
937
938
939
940
941
942
																	on:click={() => {
																		confirmEditMessage(messageIdx);
																	}}
																>
																	Save & Submit
																</button>

																<button
943
																	class=" px-4 py-2.5 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
Timothy J. Baek's avatar
Timothy J. Baek committed
944
945
946
947
948
949
950
951
952
953
954
955
																	on:click={() => {
																		cancelEditMessage(messageIdx);
																	}}
																>
																	Cancel
																</button>
															</div>
														</div>
													{:else}
														{message.content}
													{/if}
												{:else}
956
													{@html marked(message.content.replace('\\\\', '\\\\\\'))}
957
958
959
960

													{#if message.done}
														<div class=" flex justify-end space-x-1 text-gray-400">
															<button
Timothy J. Baek's avatar
Timothy J. Baek committed
961
962
																class="p-1 rounded dark:hover:bg-gray-800 {message.rating === 1
																	? ' bg-gray-200 dark:bg-gray-800'
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
																	: ''} transition"
																on:click={() => {
																	rateMessage(messageIdx, 1);
																}}
															>
																<svg
																	stroke="currentColor"
																	fill="none"
																	stroke-width="2"
																	viewBox="0 0 24 24"
																	stroke-linecap="round"
																	stroke-linejoin="round"
																	class="w-4 h-4"
																	xmlns="http://www.w3.org/2000/svg"
																	><path
																		d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
																	/></svg
																>
															</button>
															<button
Timothy J. Baek's avatar
Timothy J. Baek committed
983
984
																class="p-1 rounded dark:hover:bg-gray-800 {message.rating === -1
																	? 'bg-gray-200 dark:bg-gray-800'
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
																	: ''} transition"
																on:click={() => {
																	rateMessage(messageIdx, -1);
																}}
															>
																<svg
																	stroke="currentColor"
																	fill="none"
																	stroke-width="2"
																	viewBox="0 0 24 24"
																	stroke-linecap="round"
																	stroke-linejoin="round"
																	class="w-4 h-4"
																	xmlns="http://www.w3.org/2000/svg"
																	><path
																		d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
																	/></svg
																>
															</button>
														</div>
													{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1006
												{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1007
1008
1009
											</div>
										{/if}
										<!-- {} -->
Timothy J. Baek's avatar
Timothy J. Baek committed
1010
1011
1012
									</div>

									<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1013
1014
1015
										{#if message.role == 'user'}
											{#if message?.edit !== true}
												<button
Timothy J. Baek's avatar
Timothy J. Baek committed
1016
													class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-700 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
													on:click={() => {
														editMessage(messageIdx);
													}}
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 20 20"
														fill="currentColor"
														class="w-4 h-4"
													>
														<path
															d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
														/>
														<path
															d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
														/>
													</svg>
												</button>
											{/if}
										{:else if message.done}
Timothy J. Baek's avatar
Timothy J. Baek committed
1037
											<button
Timothy J. Baek's avatar
Timothy J. Baek committed
1038
												class="p-1 rounded dark:hover:bg-gray-700 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
1039
												on:click={() => {
1040
													copyToClipboard(message.content);
Timothy J. Baek's avatar
Timothy J. Baek committed
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
												}}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													fill="none"
													viewBox="0 0 24 24"
													stroke-width="1.5"
													stroke="currentColor"
													class="w-4 h-4"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
													/>
												</svg>
											</button>
										{/if}
									</div>
								</div>
							</div>
						{/each}
					{/if}
				</div>
			</div>

			<div class="fixed bottom-0 w-full">
				<!-- <hr class=" mb-3 border-gray-600" /> -->

Timothy J. Baek's avatar
Timothy J. Baek committed
1070
				<div class=" bg-gradient-to-t from-gray-100 dark:from-gray-900 pt-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
1071
					<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
1072
						{#if messages.length == 0 && suggestions !== 'false'}
1073
1074
							<Suggestions {submitPrompt} />
						{/if}
1075

1076
1077
1078
1079
						{#if messages.length != 0 && messages.at(-1).role == 'assistant'}
							{#if messages.at(-1).done == true}
								<div class=" flex justify-end mb-2.5">
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
1080
										class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
1081
1082
1083
1084
1085
1086
										on:click={regenerateResponse}
									>
										<div class=" self-center mr-1">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
1087
												fill="currentColor"
1088
1089
1090
1091
1092
1093
1094
1095
1096
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
													clip-rule="evenodd"
												/>
											</svg>
										</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1097
										<div class=" self-center text-sm font-medium">Regenerate</div>
1098
1099
1100
1101
1102
									</button>
								</div>
							{:else}
								<div class=" flex justify-end mb-2.5">
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
1103
										class=" flex px-4 py-2.5 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
1104
1105
1106
1107
1108
1109
										on:click={stopResponse}
									>
										<div class=" self-center mr-1">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
1110
												fill="currentColor"
1111
1112
1113
1114
1115
1116
1117
1118
1119
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z"
													clip-rule="evenodd"
												/>
											</svg>
										</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1120
										<div class=" self-center text-sm font-medium">Stop generating</div>
1121
1122
1123
									</button>
								</div>
							{/if}
1124
						{/if}
1125
1126
1127
1128
1129
1130
						<form
							class=" flex shadow-sm relative w-full"
							on:submit|preventDefault={() => {
								submitPrompt(prompt);
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
1131
							<textarea
Timothy J. Baek's avatar
Timothy J. Baek committed
1132
								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none shadow border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
1133
1134
1135
1136
1137
1138
1139
								placeholder="Send a message"
								bind:value={prompt}
								on:keypress={(e) => {
									if (e.keyCode == 13 && !e.shiftKey) {
										e.preventDefault();
									}
									if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
1140
										e.target.style.height = '';
1141
										submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
1142
1143
1144
									}
								}}
								rows="1"
1145
1146
								on:input={(e) => {
									e.target.style.height = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
1147
									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 2 + 'px';
Timothy J. Baek's avatar
Timothy J. Baek committed
1148
1149
1150
1151
								}}
							/>
							<div class=" absolute right-0 bottom-0">
								<div class="pr-3 pb-2">
1152
									{#if messages.length == 0 || messages.at(-1).done == true}
Timothy J. Baek's avatar
Timothy J. Baek committed
1153
1154
1155
										<button
											class="{prompt !== ''
												? 'bg-emerald-600 text-gray-100 hover:bg-emerald-700 '
Timothy J. Baek's avatar
Timothy J. Baek committed
1156
												: 'text-gray-200 dark:text-gray-600 disabled'} transition rounded p-2"
Timothy J. Baek's avatar
Timothy J. Baek committed
1157
											type="submit"
Timothy J. Baek's avatar
Timothy J. Baek committed
1158
											disabled={prompt === ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
1159
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="none"
												class="w-4 h-4"
												><path
													d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
													fill="currentColor"
												/></svg
											>
										</button>
									{:else}
										<div class="loading mb-1.5 mr-1 font-semibold text-lg">...</div>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1174
1175
1176
1177
1178
								</div>
							</div>
						</form>

						<div class="mt-2.5 text-xs text-gray-500 text-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
1179
							LLMs may produce inaccurate information about people, places, or facts.
Timothy J. Baek's avatar
Timothy J. Baek committed
1180
1181
1182
1183
1184
1185
1186
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200

<style>
	.loading {
		display: inline-block;
		clip-path: inset(0 1ch 0 0);
		animation: l 1s steps(3) infinite;
		letter-spacing: -0.5px;
	}

	@keyframes l {
		to {
			clip-path: inset(0 -1ch 0 0);
		}
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229

	pre[class*='language-'] {
		position: relative;
		overflow: auto;

		/* make space  */
		margin: 5px 0;
		padding: 1.75rem 0 1.75rem 1rem;
		border-radius: 10px;
	}

	pre[class*='language-'] button {
		position: absolute;
		top: 5px;
		right: 5px;

		font-size: 0.9rem;
		padding: 0.15rem;
		background-color: #828282;

		border: ridge 1px #7b7b7c;
		border-radius: 5px;
		text-shadow: #c4c4c4 0 0 2px;
	}

	pre[class*='language-'] button:hover {
		cursor: pointer;
		background-color: #bcbabb;
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
1230
</style>