+page.svelte 25.3 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
3
4
<script lang="ts">
	import toast from 'svelte-french-toast';
	import Navbar from '$lib/components/layout/Navbar.svelte';

5
	import { v4 as uuidv4 } from 'uuid';
Timothy J. Baek's avatar
Timothy J. Baek committed
6
	import { marked } from 'marked';
Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
9
10

	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

11
12
	import hljs from 'highlight.js';
	import 'highlight.js/styles/dark.min.css';
Timothy J. Baek's avatar
Timothy J. Baek committed
13
14

	import type { PageData } from './$types';
15
	import { onMount, tick } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
16

17
	import { openDB, deleteDB } from 'idb';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
	import { ENDPOINT as SERVER_ENDPOINT } from '$lib/contants';
Timothy J. Baek's avatar
Timothy J. Baek committed
19
	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
20

Timothy J. Baek's avatar
Timothy J. Baek committed
21
	export let data: PageData;
Timothy J. Baek's avatar
Timothy J. Baek committed
22
23
	$: ({ models, OLLAMA_ENDPOINT } = data);

Timothy J. Baek's avatar
Timothy J. Baek committed
24
	let ENDPOINT;
25
	let textareaElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
26
	let showSettings = false;
27
	let db;
Timothy J. Baek's avatar
Timothy J. Baek committed
28
29

	let selectedModel = '';
30
31
	let system = null;
	let temperature = null;
32
33
34
35

	let chats = [];
	let chatId = uuidv4();
	let title = ``;
Timothy J. Baek's avatar
Timothy J. Baek committed
36
	let prompt = '';
37
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
38

39
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
42
43
44
		ENDPOINT = OLLAMA_ENDPOINT ? OLLAMA_ENDPOINT : SERVER_ENDPOINT;
		console.log(OLLAMA_ENDPOINT);
		console.log(SERVER_ENDPOINT);
		console.log(ENDPOINT);

45
46
47
48
49
50
		let settings = localStorage.getItem('settings');
		if (settings) {
			settings = JSON.parse(settings);
			console.log(settings);

			selectedModel = settings.model ?? '';
51
52
			system = settings.system ?? null;
			temperature = settings.temperature ?? null;
53
		}
54
55
56
57
58
59
60
61
62
63
64
65
66
67

		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');
		console.log(chats);
		console.log(chatId);
68
69
	});

70
71
72
	//////////////////////////
	// Helper functions
	//////////////////////////
Timothy J. Baek's avatar
Timothy J. Baek committed
73

74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
	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);
			}
		});
	};

89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
	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);
			}
		);
	};

125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
	//////////////////////////
	// Web functions
	//////////////////////////

	const saveDefaultModel = () => {
		let settings = localStorage.getItem('settings') ?? '{}';
		if (settings) {
			settings = JSON.parse(settings);
			settings.model = selectedModel;
			localStorage.setItem('settings', JSON.stringify(settings));
		}

		console.log('saved');
		toast.success('Default model updated');
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
	const saveSettings = (_system, _temperature) => {
		system = _system;
		temperature = _temperature;

		let settings = localStorage.getItem('settings') ?? '{}';
		if (settings) {
			settings = JSON.parse(settings);
			settings.system = system;
			settings.temperature = temperature;
			localStorage.setItem('settings', JSON.stringify(settings));
		}

		console.log(settings);

		console.log('saved');
	};

158
159
	const createNewChat = () => {
		if (messages.length > 0) {
160
161
			chatId = uuidv4();

162
163
			messages = [];
			title = '';
164
165
166
167
168
169
170
171
172
173
174
			console.log(localStorage.settings.model);

			let settings = localStorage.getItem('settings');
			if (settings) {
				settings = JSON.parse(settings);
				console.log(settings);

				selectedModel = settings.model ?? selectedModel;
				system = settings.system ?? system;
				temperature = settings.temperature ?? temperature;
			}
175
176
177
178
179
180
181
182
		}
	};

	const loadChat = async (id) => {
		const chat = await db.get('chats', id);
		messages = chat.messages;
		title = chat.title;
		chatId = chat.id;
183
184
185
		selectedModel = chat.model ?? selectedModel;
		system = chat.system ?? system;
		temperature = chat.temperature ?? temperature;
186
187
188
189
190
191
192
193
	};

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

194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
	const importChatHistory = async (results) => {
		for (const chat of results) {
			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
219
220
221
222
	const openSettings = async () => {
		showSettings = true;
	};

223
224
225
226
	//////////////////////////
	// Ollama functions
	//////////////////////////

227
	const submitPrompt = async (user_prompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
228
		console.log('submitPrompt');
229

Timothy J. Baek's avatar
Timothy J. Baek committed
230
231
		if (selectedModel === '') {
			toast.error('Model not selected');
232
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
			console.log('wait');
		} else {
235
236
237
			if (messages.length == 0) {
				await db.put('chats', {
					id: chatId,
238
239
240
241
242
					model: selectedModel,
					system: system,
					options: {
						temperature: temperature
					},
243
244
245
246
247
248
					title: 'New Chat',
					timestamp: Date.now(),
					messages: messages
				});
				chats = await db.getAllFromIndex('chats', 'timestamp');
			}
249
250
251
252
253
254
255
			messages = [
				...messages,
				{
					role: 'user',
					content: user_prompt
				}
			];
Timothy J. Baek's avatar
Timothy J. Baek committed
256
257
			prompt = '';

258
			textareaElement.style.height = '';
259
260
261
262
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

263
			let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
				role: 'assistant',
				content: ''
			};
267
268

			messages = [...messages, responseMessage];
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270
			window.scrollTo({ top: document.body.scrollHeight });

Timothy J. Baek's avatar
Timothy J. Baek committed
271
272
273
274
275
276
277
278
			const res = await fetch(`${ENDPOINT}/api/generate`, {
				method: 'POST',
				headers: {
					'Content-Type': 'text/event-stream'
				},
				body: JSON.stringify({
					model: selectedModel,
					prompt: user_prompt,
279
280
281
282
283
284
285
					system: system ?? undefined,
					options:
						temperature != null
							? {
									temperature: temperature
							  }
							: undefined,
286
287
288
289
					context:
						messages.length > 3 && messages.at(-3).context != undefined
							? messages.at(-3).context
							: undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
290
291
292
				})
			});

293
294
295
296
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
297

Timothy J. Baek's avatar
Timothy J. Baek committed
298
299
300
301
302
			while (true) {
				const { value, done } = await reader.read();
				if (done) break;

				try {
303
304
305
306
307
308
309
					let lines = value.split('\n');

					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
							if (data.done == false) {
310
								if (responseMessage.content == '' && data.response == '\n') {
311
312
									continue;
								} else {
313
314
									responseMessage.content += data.response;
									messages = messages;
315
316
								}
							} else {
317
318
319
								responseMessage.done = true;
								responseMessage.context = data.context;
								messages = messages;
320
								hljs.highlightAll();
321
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
322
323
324
325
326
						}
					}
				} catch (error) {
					console.log(error);
				}
327
				window.scrollTo({ top: document.body.scrollHeight });
Timothy J. Baek's avatar
Timothy J. Baek committed
328
			}
329
330

			window.scrollTo({ top: document.body.scrollHeight });
331
332
333
334
335
336
337

			if (messages.length == 2) {
				await generateTitle(user_prompt);
			}
			await db.put('chats', {
				id: chatId,
				title: title,
338
339
340
341
342
				model: selectedModel,
				system: system,
				options: {
					temperature: temperature
				},
343
344
345
346
				timestamp: Date.now(),
				messages: messages
			});
			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
347
348
349
		}
	};

350
351
	const regenerateResponse = async () => {
		console.log('regenerateResponse');
Timothy J. Baek's avatar
Timothy J. Baek committed
352

353
354
355
		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
356

357
			let lastUserMessage = messages.at(-1);
Timothy J. Baek's avatar
Timothy J. Baek committed
358

359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
			let responseMessage = {
				role: 'assistant',
				content: ''
			};

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

			const res = await fetch(`${ENDPOINT}/api/generate`, {
				method: 'POST',
				headers: {
					'Content-Type': 'text/event-stream'
				},
				body: JSON.stringify({
					model: selectedModel,
					prompt: lastUserMessage.content,
375
376
377
378
379
380
381
					system: system ?? undefined,
					options:
						temperature != null
							? {
									temperature: temperature
							  }
							: undefined,
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
					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) 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;
416
								hljs.highlightAll();
417
418
419
420
421
422
423
							}
						}
					}
				} catch (error) {
					console.log(error);
				}
				window.scrollTo({ top: document.body.scrollHeight });
Timothy J. Baek's avatar
Timothy J. Baek committed
424
425
			}

426
			window.scrollTo({ top: document.body.scrollHeight });
427
428
429
			await db.put('chats', {
				id: chatId,
				title: title,
430
431
432
433
434
				model: selectedModel,
				system: system,
				options: {
					temperature: temperature
				},
435
436
437
438
				timestamp: Date.now(),
				messages: messages
			});
			chats = await db.getAllFromIndex('chats', 'timestamp');
Timothy J. Baek's avatar
Timothy J. Baek committed
439
		}
440
441

		console.log(messages);
Timothy J. Baek's avatar
Timothy J. Baek committed
442
	};
443
444
445
446
447
448
449
450
451
452
453

	const generateTitle = async (user_prompt) => {
		console.log('generateTitle');

		const res = await fetch(`${ENDPOINT}/api/generate`, {
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream'
			},
			body: JSON.stringify({
				model: selectedModel,
Timothy J. Baek's avatar
Timothy J. Baek committed
454
				prompt: `Generate a brief 3-5 word title for this question, excluding the term 'title.' Then, please reply with only the title: ${user_prompt}`,
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
				stream: false
			})
		})
			.then(async (res) => {
				if (!res.ok) throw await res.json();
				return res.json();
			})
			.catch((error) => {
				console.log(error);
				return null;
			});

		if (res) {
			console.log(res);
			title = res.response;
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
472
473
474
475
</script>

<div class="app text-gray-100">
	<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
476
477
478
479
480
481
482
483
		<Navbar
			{chats}
			{title}
			{loadChat}
			{createNewChat}
			{importChatHistory}
			{exportChatHistory}
			{deleteChatHistory}
Timothy J. Baek's avatar
Timothy J. Baek committed
484
			{openSettings}
485
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
486

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

Timothy J. Baek's avatar
Timothy J. Baek committed
489
490
491
492
493
		<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">
					<div class="p-3 rounded-lg bg-gray-900">
						<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
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
							<label
								for="models"
								class="block mb-2 text-sm font-medium text-gray-200 flex justify-between"
							>
								<div class="self-center">Model</div>

								<button
									class=" self-center 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>
							</label>
527
528
529
530
531
532
533
534
535
536

							<div>
								<select
									id="models"
									class="outline-none border border-gray-600 bg-gray-700 text-gray-200 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400"
									bind:value={selectedModel}
									disabled={messages.length != 0}
								>
									<option value="" selected>Select a model</option>

Timothy J. Baek's avatar
Timothy J. Baek committed
537
									{#each models as model}
538
539
540
541
542
543
544
										<option value={model.name}>{model.name}</option>
									{/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
545
546
547
548
						</div>
					</div>
				</div>

549
				<div class=" h-full mb-48 w-full flex flex-col">
550
					{#if messages.length == 0}
551
						<div class="m-auto text-center max-w-md pb-16">
Timothy J. Baek's avatar
Timothy J. Baek committed
552
							<div class="flex justify-center mt-8">
Timothy J. Baek's avatar
Timothy J. Baek committed
553
554
555
556
557
558
								<img src="/ollama.png" class="w-16 invert-[80%]" />
							</div>
							<div class="mt-6 text-3xl text-gray-500 font-semibold">
								Get up and running with large language models, locally.
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
559
							<div class=" my-4 text-gray-600">
Timothy J. Baek's avatar
Timothy J. Baek committed
560
561
562
								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
563
					{:else}
564
565
						{#each messages as message, messageIdx}
							<div class=" w-full {message.role == 'user' ? '' : ' bg-gray-700'}">
Timothy J. Baek's avatar
Timothy J. Baek committed
566
								<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg">
Timothy J. Baek's avatar
Timothy J. Baek committed
567
									<div class="space-x-7 flex w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
568
569
										<div class="">
											<img
570
												src="/{message.role == 'user' ? 'user' : 'favicon'}.png"
Timothy J. Baek's avatar
Timothy J. Baek committed
571
572
573
574
												class=" max-w-[32px] object-cover rounded"
											/>
										</div>

575
										{#if message.role != 'user' && message.content == ''}
Timothy J. Baek's avatar
Timothy J. Baek committed
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
											<div class="w-full pr-28">
												<div class="animate-pulse flex w-full">
													<div class="space-y-2 w-full">
														<div class="h-2 bg-gray-600 rounded mr-14" />

														<div class="grid grid-cols-3 gap-4">
															<div class="h-2 bg-gray-600 rounded col-span-2" />
															<div class="h-2 bg-gray-600 rounded col-span-1" />
														</div>
														<div class="grid grid-cols-4 gap-4">
															<div class="h-2 bg-gray-600 rounded col-span-1" />
															<div class="h-2 bg-gray-600 rounded col-span-2" />
															<div class="h-2 bg-gray-600 rounded col-span-1 mr-4" />
														</div>

														<div class="h-2 bg-gray-600 rounded" />
													</div>
												</div>
											</div>
										{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
596
											<div class="markdown-body whitespace-pre-line">
597
												{@html marked.parse(message.content)}
Timothy J. Baek's avatar
Timothy J. Baek committed
598
599
600
											</div>
										{/if}
										<!-- {} -->
Timothy J. Baek's avatar
Timothy J. Baek committed
601
602
603
									</div>

									<div>
604
										{#if message.role != 'user' && message.done}
Timothy J. Baek's avatar
Timothy J. Baek committed
605
606
607
											<button
												class="p-1 rounded hover:bg-gray-700 transition"
												on:click={() => {
608
													copyToClipboard(message.content);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
												}}
											>
												<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" /> -->

				<div class=" bg-gradient-to-t from-gray-900 pt-5">
					<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
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
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
						{#if messages.length == 0}
							<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
								<button
									class=" flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
									on:click={() => {
										submitPrompt(`Tell me a random fun fact about the Roman Empire`);
									}}
								>
									<div class="flex flex-col text-left">
										<div class="text-sm font-medium text-gray-300">Tell me a fun fact</div>
										<div class="text-sm text-gray-500">about the Roman Empire</div>
									</div>

									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
										<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
										>
									</div>
								</button>

								<button
									class="flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
									on:click={() => {
										submitPrompt(
											`Show me a code snippet of a website's sticky header in CSS and JavaScript.`
										);
									}}
								>
									<div class="flex flex-col text-left">
										<div class="text-sm font-medium text-gray-300">Show me a code snippet</div>
										<div class="text-sm text-gray-500">of a website's sticky header</div>
									</div>
									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
										<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
										>
									</div>
								</button>

								<button
									class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
									on:click={() => {
										submitPrompt(
											`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
										);
									}}
								>
									<div class="flex flex-col text-left">
										<div class="text-sm font-medium text-gray-300">Help me study</div>
										<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
									</div>
									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
										<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
										>
									</div>
								</button>

								<button
									class="  hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
									on:click={() => {
										submitPrompt(
											`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
										);
									}}
								>
									<div class="flex flex-col text-left">
										<div class="text-sm font-medium text-gray-300">Give me ideas</div>
										<div class="text-sm text-gray-500">for what to do with my kids' art</div>
									</div>
									<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
										<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
										>
									</div>
								</button>
							</div>
						{/if}

747
748
749
						{#if messages.length != 0 && messages.at(-1).role == 'assistant' && messages.at(-1).done == true}
							<div class=" flex justify-end mb-2.5">
								<button
750
									class=" flex px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg"
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
									on:click={regenerateResponse}
								>
									<div class=" self-center mr-1">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											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>
									<div class=" self-center text-sm">Regenerate</div>
								</button>
							</div>
						{/if}
771
772
773
774
775
776
						<form
							class=" flex shadow-sm relative w-full"
							on:submit|preventDefault={() => {
								submitPrompt(prompt);
							}}
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
777
778
779
780
781
782
783
784
785
786
							<textarea
								class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none"
								placeholder="Send a message"
								bind:this={textareaElement}
								bind:value={prompt}
								on:keypress={(e) => {
									if (e.keyCode == 13 && !e.shiftKey) {
										e.preventDefault();
									}
									if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
787
										submitPrompt(prompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
788
789
790
791
792
793
794
795
796
797
									}
								}}
								rows="1"
								on:input={() => {
									textareaElement.style.height = '';
									textareaElement.style.height = Math.min(textareaElement.scrollHeight, 200) + 'px';
								}}
							/>
							<div class=" absolute right-0 bottom-0">
								<div class="pr-3 pb-2">
798
									{#if messages.length == 0 || messages.at(-1).done == true}
Timothy J. Baek's avatar
Timothy J. Baek committed
799
800
801
802
803
										<button
											class="{prompt !== ''
												? 'bg-emerald-600 text-gray-100 hover:bg-emerald-700 '
												: 'text-gray-600 disabled'} transition rounded p-2"
											type="submit"
Timothy J. Baek's avatar
Timothy J. Baek committed
804
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
805
806
807
808
809
810
811
812
813
814
815
816
817
818
											<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
819
820
821
822
823
								</div>
							</div>
						</form>

						<div class="mt-2.5 text-xs text-gray-500 text-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
824
							LLMs may produce inaccurate information about people, places, or facts.
Timothy J. Baek's avatar
Timothy J. Baek committed
825
826
827
828
829
830
831
832
833
834
835
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- <main class="w-full flex justify-center">
			<div class="max-w-lg w-screen p-5" />
		</main> -->
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850

<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);
		}
	}
</style>