+page.svelte 39.1 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 () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
43
		await Promise.all([await createNewChat(true), await setDBandLoadChats()]);
44
45
	});

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

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
	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);
			}
		});
	};

65
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
	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
101
102
103
104
105
106
107
	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
108
109

			if (navigator.clipboard && block.childNodes.length < 2) {
110
111
112
113
114
				let code = block.querySelector('code');
				code.style.borderTopRightRadius = 0;
				code.style.borderTopLeftRadius = 0;

				let topBarDiv = document.createElement('div');
Timothy J. Baek's avatar
Timothy J. Baek committed
115
				topBarDiv.style.backgroundColor = '#202123';
116
117
118
119
120
121
122
123
124
				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');
Timothy J. Baek's avatar
Timothy J. Baek committed
125
126
127
128

				let codeClassNames = code?.className.split(' ');
				langDiv.textContent =
					codeClassNames[0] === 'hljs' ? codeClassNames[1].slice(9) : codeClassNames[0].slice(9);
129
130
131
				langDiv.style.color = 'white';
				langDiv.style.margin = '4px';
				langDiv.style.fontSize = '0.75rem';
Timothy J. Baek's avatar
Timothy J. Baek committed
132

133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
				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
151
152
153
154
155
156
157
158
159
160
			}
		});

		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
161
			button.innerText = 'Copied!';
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
164

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

Timothy J. Baek's avatar
Timothy J. Baek committed
169
170
171
172
173
174
175
176
177
178
	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 },
179
180
					{ left: '$', right: '$', display: true },
					{ left: '\\(', right: '\\)', display: true },
Timothy J. Baek's avatar
Timothy J. Baek committed
181
182
183
					{ left: '\\[', right: '\\]', display: true }
				],
				// • rendering keys, e.g.:
184
				throwOnError: false
Timothy J. Baek's avatar
Timothy J. Baek committed
185
186
187
188
			});
		}
	};

189
190
191
192
	//////////////////////////
	// Web functions
	//////////////////////////

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

199
200
201
202
			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);
203

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

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

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

217
218
219
220
221
222
223
224
225
226
227
228
	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
229
230
	};

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

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

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

			await tick();
259
260
			renderLatex();

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

Timothy J. Baek's avatar
Timothy J. Baek committed
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
	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');
	};

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

293
294
	const importChatHistory = async (chatHistory) => {
		for (const chat of chatHistory) {
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
			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
318
319
320
321
	const openSettings = async () => {
		showSettings = true;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
322
323
324
325
326
327
328
329
330
331
332
	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) => {
333
		let userPrompt = messages.at(messageIdx).editedContent;
Timothy J. Baek's avatar
Timothy J. Baek committed
334
335
336
337

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

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

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

		console.log(messages);
	};

353
354
355
356
357
358
359
360
361
362
363
364
	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,
365
			system: settings.system,
366
			options: {
367
				temperature: settings.temperature
368
369
370
371
372
373
374
375
			},
			timestamp: Date.now(),
			messages: messages
		});

		console.log(messages);
	};

376
377
378
379
	//////////////////////////
	// Ollama functions
	//////////////////////////

380
	const getModelTags = async (url = null, type = 'all') => {
381
		const res = await fetch(`${url === null ? API_BASE_URL : url}/tags`, {
382
383
384
385
386
387
388
389
390
391
392
393
			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);
394
395
				toast.error('Server connection failed');
				return null;
396
397
			});

398
		console.log(res);
399

400
401
402
403
404
405
406
407
408
		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}`
					}
409
				})
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
					.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 ?? [];
				}
433
434
435
			} else {
				models = res?.models ?? [];
			}
436
437

			return models;
438
		} else {
439
			return res?.models ?? null;
440
		}
441
442
	};

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

	const sendPromptOllama = async (userPrompt) => {
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
		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,
468
				system: settings.system ?? undefined,
469
470
471
472
473
474
475
				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
				},
476
				format: settings.requestFormat ?? undefined,
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
536
537
538
				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,
539
				system: settings.system,
540
				options: {
541
					temperature: settings.temperature
542
543
544
545
546
547
548
549
550
551
552
				},
				timestamp: Date.now(),
				messages: messages
			});
		}

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

		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({
577
						model: selectedModel,
578
						stream: true,
579
580
581
582
583
584
585
586
587
588
589
590
591
592
						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
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
668
669
670
					})
				});

				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);
				}
			}
		}
671
672
673
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
676
677
		if (selectedModel === '') {
			toast.error('Model not selected');
678
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
679
680
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
681
682
683
684
685
686
687
688
689
690
691
692
			document.getElementById('chat-textarea').style.height = '';

			messages = [
				...messages,
				{
					role: 'user',
					content: userPrompt
				}
			];

			prompt = '';

693
694
695
			if (messages.length == 0) {
				await db.put('chats', {
					id: chatId,
696
					model: selectedModel,
697
					system: settings.system,
698
					options: {
699
						temperature: settings.temperature
700
					},
701
702
703
704
705
706
					title: 'New Chat',
					timestamp: Date.now(),
					messages: messages
				});
				chats = await db.getAllFromIndex('chats', 'timestamp');
			}
707

708
709
710
711
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

712
			await sendPrompt(userPrompt);
713
714

			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
715
716
717
		}
	};

718
719
720
721
722
	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
723

724
725
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
726

727
			await sendPrompt(userPrompt);
728

729
			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
730
		}
731
	};
732

733
734
735
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
Timothy J. Baek's avatar
Timothy J. Baek committed
736
	};
737

738
739
	const generateChatTitle = async (_chatId, userPrompt) => {
		console.log('generateChatTitle');
740

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

		if (res) {
762
763
764
765
766
767
768
769
770
			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;
771
772
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
773
774
</script>

775
776
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
777
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
778
779
780
	}}
/>

Timothy J. Baek's avatar
Timothy J. Baek committed
781
782
783
784
<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"
	>
785
		<Navbar
Timothy J. Baek's avatar
Timothy J. Baek committed
786
			selectedChatId={chatId}
787
788
789
			{chats}
			{title}
			{loadChat}
Timothy J. Baek's avatar
Timothy J. Baek committed
790
791
			{editChatTitle}
			{deleteChat}
792
793
794
795
			{createNewChat}
			{importChatHistory}
			{exportChatHistory}
			{deleteChatHistory}
Timothy J. Baek's avatar
Timothy J. Baek committed
796
			{openSettings}
797
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
798

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

Timothy J. Baek's avatar
Timothy J. Baek committed
801
802
		<div class="min-h-screen w-full flex justify-center">
			<div class=" py-2.5 flex flex-col justify-between w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
803
				<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-14">
Timothy J. Baek's avatar
Timothy J. Baek committed
804
805
806
					<div class="flex justify-between my-2 text-sm">
						<select
							id="models"
Timothy J. Baek's avatar
Timothy J. Baek committed
807
							class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-800"
Timothy J. Baek's avatar
Timothy J. Baek committed
808
809
810
							bind:value={selectedModel}
							disabled={messages.length != 0}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
811
							<option class=" text-gray-700" value="" selected>Select a model</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
812
813
814
815
816

							{#each models as model}
								{#if model.name === 'hr'}
									<hr />
								{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
817
									<option value={model.name} class="text-gray-700 text-lg">{model.name}</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
								{/if}
							{/each}
						</select>
						<button
							class=" self-center dark:hover:text-gray-300"
							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>
					</div>

849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
					<!-- <div class="flex flex-col">
						{#each selectedModels as selectedModel, selectedModelIdx}
							<div class="flex">
								<select
									id="models"
									class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-400"
									bind:value={selectedModel}
									disabled={messages.length != 0}
								>
									<option value="" selected>Select a model</option>

									{#each models as model}
										{#if model.name === 'hr'}
											<hr />
										{:else}
											<option value={model.name} class=" text-lg">{model.name}</option>
										{/if}
									{/each}
								</select>

								{#if selectedModelIdx === selectedModels.length - 1}
									<button
										class="  self-center {selectedModelIdx === 0
											? 'mr-3'
											: 'mr-7'} disabled:text-gray-600 disabled:hover:text-gray-600"
										disabled={selectedModels.length === 3}
										on:click={() => {
											if (selectedModels.length < 3) {
												selectedModels = ['', ...selectedModels];
											}
										}}
									>
										<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="M12 6v12m6-6H6" />
										</svg>
									</button>
								{:else}
									<button
										class="  self-center dark:hover:text-gray-300 {selectedModelIdx === 0
											? 'mr-3'
											: 'mr-7'}"
										on:click={() => {
											selectedModels.splice(selectedModelIdx, 1);
											selectedModels = selectedModels;
										}}
									>
										<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="M19.5 12h-15" />
										</svg>
									</button>
								{/if}

								{#if selectedModelIdx === 0}
									<button
										class=" self-center dark:hover:text-gray-300"
										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>
								{/if}
							</div>
						{/each}
					</div> -->

Timothy J. Baek's avatar
Timothy J. Baek committed
947
948
949
					<div class="text-left mt-1.5 text-xs text-gray-500">
						<button on:click={saveDefaultModel}> Set as default</button>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
950
951
				</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
952
				<div class=" h-full mt-10 mb-32 w-full flex flex-col">
953
					{#if messages.length == 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
954
						<div class="m-auto text-center max-w-md pb-56 px-2">
Timothy J. Baek's avatar
Timothy J. Baek committed
955
							<div class="flex justify-center mt-8">
Timothy J. Baek's avatar
Timothy J. Baek committed
956
								<img src="/ollama.png" class=" w-16 invert-[10%] dark:invert-[100%] rounded-full" />
Timothy J. Baek's avatar
Timothy J. Baek committed
957
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
958
959
							<div class=" mt-1 text-2xl text-gray-800 dark:text-gray-100 font-semibold">
								How can I help you today?
Timothy J. Baek's avatar
Timothy J. Baek committed
960
961
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
962
					{:else}
963
						{#each messages as message, messageIdx}
Timothy J. Baek's avatar
Timothy J. Baek committed
964
							<div class=" w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
965
								<div class="flex justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
Timothy J. Baek's avatar
Timothy J. Baek committed
966
967
									<div class=" flex w-full">
										<div class=" mr-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
968
											<img
Timothy J. Baek's avatar
Timothy J. Baek committed
969
970
971
972
973
												src="{message.role == 'user'
													? settings.gravatarUrl
														? settings.gravatarUrl
														: '/user'
													: '/favicon'}.png"
Timothy J. Baek's avatar
Timothy J. Baek committed
974
												class=" max-w-[28px] object-cover rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
975
976
977
											/>
										</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
978
979
980
981
										<div class="w-full">
											<div class=" self-center font-bold mb-0.5">
												{message.role === 'user' ? 'You' : 'Ollama'}
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
982

Timothy J. Baek's avatar
Timothy J. Baek committed
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
											{#if message.role !== 'user' && message.content === ''}
												<div class="w-full mt-3">
													<div class="animate-pulse flex w-full">
														<div class="space-y-2 w-full">
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />

															<div class="grid grid-cols-3 gap-4">
																<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" />
															</div>
															<div class="grid grid-cols-4 gap-4">
																<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"
																/>
															</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1000

Timothy J. Baek's avatar
Timothy J. Baek committed
1001
1002
															<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded" />
														</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1003
1004
													</div>
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1005
1006
											{:else}
												<div
Timothy J. Baek's avatar
Timothy J. Baek committed
1007
													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-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
Timothy J. Baek's avatar
Timothy J. Baek committed
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
												>
													{#if message.role == 'user'}
														{#if message?.edit === true}
															<div class=" w-full">
																<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`;
Timothy J. Baek's avatar
Timothy J. Baek committed
1018
																	}}
Timothy J. Baek's avatar
Timothy J. Baek committed
1019
1020
1021
																	on:focus={(e) => {
																		e.target.style.height = '';
																		e.target.style.height = `${e.target.scrollHeight}px`;
Timothy J. Baek's avatar
Timothy J. Baek committed
1022
																	}}
Timothy J. Baek's avatar
Timothy J. Baek committed
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
																/>

																<div class=" flex justify-end space-x-2 text-sm font-medium">
																	<button
																		class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
																		on:click={() => {
																			confirmEditMessage(messageIdx);
																		}}
																	>
																		Save & Submit
																	</button>

																	<button
																		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"
																		on:click={() => {
																			cancelEditMessage(messageIdx);
																		}}
																	>
																		Cancel
																	</button>
																</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1044
															</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1045
1046
1047
1048
1049
1050
														{:else}
															<div class="w-full">
																{message.content}

																<div class=" flex justify-start space-x-1">
																	<button
Timothy J. Baek's avatar
Timothy J. Baek committed
1051
																		class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
1052
1053
1054
1055
1056
1057
																		on:click={() => {
																			editMessage(messageIdx);
																		}}
																	>
																		<svg
																			xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
1058
1059
1060
1061
																			fill="none"
																			viewBox="0 0 24 24"
																			stroke-width="1.5"
																			stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
1062
1063
1064
																			class="w-4 h-4"
																		>
																			<path
Timothy J. Baek's avatar
Timothy J. Baek committed
1065
1066
1067
																				stroke-linecap="round"
																				stroke-linejoin="round"
																				d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
Timothy J. Baek's avatar
Timothy J. Baek committed
1068
1069
1070
1071
1072
1073
																			/>
																		</svg>
																	</button>
																</div>
															</div>
														{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1074
													{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
														<div class="w-full">
															{@html marked(message.content.replace('\\\\', '\\\\\\'))}

															{#if message.done}
																<div class=" flex justify-start space-x-1 -mt-2">
																	<button
																		class="{messageIdx + 1 === messages.length
																			? 'visible'
																			: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
																		on:click={() => {
																			copyToClipboard(message.content);
																		}}
																	>
																		<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>

																	<button
																		class="{messageIdx + 1 === messages.length
																			? 'visible'
																			: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 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
																		class="{messageIdx + 1 === messages.length
																			? 'visible'
																			: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
																		on:click={() => {
																			rateMessage(messageIdx, -1);
																		}}
Timothy J. Baek's avatar
Timothy J. Baek committed
1133
																	>
Timothy J. Baek's avatar
Timothy J. Baek committed
1134
1135
1136
1137
1138
																		<svg
																			stroke="currentColor"
																			fill="none"
																			stroke-width="2"
																			viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
1139
1140
																			stroke-linecap="round"
																			stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
																			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>

																	{#if messageIdx + 1 === messages.length}
																		<button
																			class="{messageIdx + 1 === messages.length
																				? 'visible'
																				: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
																			on:click={regenerateResponse}
																		>
																			<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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
																				/>
																			</svg>
																		</button>
																	{/if}
																</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1173
															{/if}
1174
1175
														</div>
													{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1176
												</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1177
											{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1178
1179
										</div>
										<!-- {} -->
Timothy J. Baek's avatar
Timothy J. Baek committed
1180
1181
1182
1183
1184
1185
1186
1187
1188
									</div>
								</div>
							</div>
						{/each}
					{/if}
				</div>
			</div>

			<div class="fixed bottom-0 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
1189
				<div class=" bg-gradient-to-t from-white/90 dark:from-gray-900 pt-5">
Timothy J. Baek's avatar
Timothy J. Baek committed
1190
					<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
1191
						{#if messages.length == 0 && suggestions !== 'false'}
1192
1193
							<Suggestions {submitPrompt} />
						{/if}
1194
						<form
Timothy J. Baek's avatar
Timothy J. Baek committed
1195
							class=" flex relative w-full"
1196
1197
1198
1199
							on:submit|preventDefault={() => {
								submitPrompt(prompt);
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
1200
							<textarea
Timothy J. Baek's avatar
Timothy J. Baek committed
1201
								id="chat-textarea"
Timothy J. Baek's avatar
Timothy J. Baek committed
1202
								class="rounded-xl dark:bg-gray-700 dark:text-gray-100 outline-none border dark:border-gray-700 w-full py-3 px-5 pr-12 resize-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
1203
1204
1205
1206
1207
1208
1209
								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) {
1210
										submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
1211
1212
1213
									}
								}}
								rows="1"
1214
1215
								on:input={(e) => {
									e.target.style.height = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
1216
									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 2 + 'px';
Timothy J. Baek's avatar
Timothy J. Baek committed
1217
1218
1219
								}}
							/>
							<div class=" absolute right-0 bottom-0">
Timothy J. Baek's avatar
Timothy J. Baek committed
1220
								<div class="pr-3 pb-[9px]">
1221
									{#if messages.length == 0 || messages.at(-1).done == true}
Timothy J. Baek's avatar
Timothy J. Baek committed
1222
1223
										<button
											class="{prompt !== ''
Timothy J. Baek's avatar
Timothy J. Baek committed
1224
												? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
Timothy J. Baek's avatar
Timothy J. Baek committed
1225
												: 'text-white bg-gray-100 dark:text-gray-800 dark:bg-gray-600 disabled'} transition rounded-lg p-1.5"
Timothy J. Baek's avatar
Timothy J. Baek committed
1226
											type="submit"
Timothy J. Baek's avatar
Timothy J. Baek committed
1227
											disabled={prompt === ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
1228
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
1229
1230
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
1231
1232
1233
												viewBox="0 0 20 20"
												fill="currentColor"
												class="w-5 h-5"
Timothy J. Baek's avatar
Timothy J. Baek committed
1234
											>
Timothy J. Baek's avatar
Timothy J. Baek committed
1235
1236
1237
1238
1239
1240
												<path
													fill-rule="evenodd"
													d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
													clip-rule="evenodd"
												/>
											</svg>
Timothy J. Baek's avatar
Timothy J. Baek committed
1241
1242
										</button>
									{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
										<button
											class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-lg p-1.5"
											on:click={stopResponse}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 24 24"
												fill="currentColor"
												class="w-5 h-5"
											>
												<path
													fill-rule="evenodd"
													d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
													clip-rule="evenodd"
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
1260
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1261
1262
1263
1264
1265
								</div>
							</div>
						</form>

						<div class="mt-2.5 text-xs text-gray-500 text-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
1266
							LLMs can make mistakes. Verify important information.
Timothy J. Baek's avatar
Timothy J. Baek committed
1267
1268
1269
1270
1271
1272
1273
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287

<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
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316

	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
1317
</style>