+page.svelte 17.7 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { v4 as uuidv4 } from 'uuid';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
	import toast from 'svelte-french-toast';

Timothy J. Baek's avatar
Timothy J. Baek committed
5
	import { onMount, tick } from 'svelte';
6
	import { goto } from '$app/navigation';
7
	import { page } from '$app/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
8

Timothy J. Baek's avatar
Timothy J. Baek committed
9
	import { models, modelfiles, user, settings, chats, chatId, config } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
10
11
12

	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
	import { copyToClipboard, splitStream } from '$lib/utils';
13
14
15
16

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
17
	import Navbar from '$lib/components/layout/Navbar.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
	import { createNewChat, getChatList, updateChatById } from '$lib/apis/chats';
19

20
21
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
22

Timothy J. Baek's avatar
Timothy J. Baek committed
23
	let selectedModels = [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
24

25
26
27
28
29
30
	let selectedModelfile = null;
	$: selectedModelfile =
		selectedModels.length === 1 &&
		$modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0]).length > 0
			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
			: null;
31

32
33
34
35
36
37
38
39
40
41
42
	let selectedModelfiles = {};
	$: selectedModelfiles = selectedModels.reduce((a, tagName, i, arr) => {
		const modelfile =
			$modelfiles.filter((modelfile) => modelfile.tagName === tagName)?.at(0) ?? undefined;

		return {
			...a,
			...(modelfile && { [tagName]: modelfile })
		};
	}, {});

43
44
	let chat = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
45
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
46
	let prompt = '';
47
	let files = [];
48
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
	let history = {
		messages: {},
		currentId: null
	};

	$: if (history.currentId !== null) {
		let _messages = [];

		let currentMessage = history.messages[history.currentId];
		while (currentMessage !== null) {
			_messages.unshift({ ...currentMessage });
			currentMessage =
				currentMessage.parentId !== null ? history.messages[currentMessage.parentId] : null;
		}
		messages = _messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
64
65
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
66
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
67

68
	onMount(async () => {
69
		await initNewChat();
70
71
72
73
74
75
	});

	//////////////////////////
	// Web functions
	//////////////////////////

76
	const initNewChat = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
		window.history.replaceState(history.state, '', `/`);

79
80
81
		console.log('initNewChat');

		await chatId.set('');
82
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
83

84
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
85

86
87
88
89
90
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
91
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
92
93
94
95
96
97
98
99
100
101
102
103

		console.log($config);

		if ($page.url.searchParams.get('models')) {
			selectedModels = $page.url.searchParams.get('models')?.split(',');
		} else if ($settings?.models) {
			selectedModels = $settings?.models;
		} else if ($config?.default_models) {
			selectedModels = $config?.default_models.split(',');
		} else {
			selectedModels = [''];
		}
104
105
106
107
108

		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		settings.set({
			..._settings
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
109
110
	};

111
112
113
114
	//////////////////////////
	// Ollama functions
	//////////////////////////

115
116
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
		await Promise.all(
			selectedModels.map(async (model) => {
119
				console.log(model);
Timothy J. Baek's avatar
Timothy J. Baek committed
120
121
122
				const modelTag = $models.filter((m) => m.name === model).at(0);

				if (modelTag?.external) {
123
					await sendPromptOpenAI(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
124
				} else if (modelTag) {
125
					await sendPromptOllama(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
126
127
				} else {
					toast.error(`Model ${model} not found`);
Timothy J. Baek's avatar
Timothy J. Baek committed
128
129
130
				}
			})
		);
131

Timothy J. Baek's avatar
Timothy J. Baek committed
132
		await chats.set(await getChatList(localStorage.token));
133
134
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
135
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
136
		// Create response message
Timothy J. Baek's avatar
Timothy J. Baek committed
137
		let responseMessageId = uuidv4();
138
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
139
140
141
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
142
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
143
144
			content: '',
			model: model
145
146
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
147
		// Add message to history and Set currentId to messageId
Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
Timothy J. Baek's avatar
Timothy J. Baek committed
150
151

		// Append messageId to childrenIds of parent message
Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
155
156
157
158
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
159
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
160
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
163
		window.scrollTo({ top: document.body.scrollHeight });
164

165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
		const res = await generateChatCompletion(localStorage.token, {
			model: model,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
				...messages
			]
				.filter((message) => message)
				.map((message) => ({
					role: message.role,
					content: message.content,
					...(message.files && {
						images: message.files
							.filter((file) => file.type === 'image')
							.map((file) => file.url.slice(file.url.indexOf(',') + 1))
					})
				})),
			options: {
				...($settings.options ?? {})
			},
			format: $settings.requestFormat ?? undefined
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
191

192
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
193
194
195
196
197
198
199
200
201
202
203
204
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();

			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
205

Rohit Das's avatar
Rohit Das committed
206
207
				try {
					let lines = value.split('\n');
208

Rohit Das's avatar
Rohit Das committed
209
210
211
212
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
213

Rohit Das's avatar
Rohit Das committed
214
215
216
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
217

Rohit Das's avatar
Rohit Das committed
218
219
220
221
222
223
224
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
								} else {
									responseMessage.content += data.message.content;
									messages = messages;
								}
225
							} else {
Rohit Das's avatar
Rohit Das committed
226
								responseMessage.done = true;
227
228
229
230
231
232
233

								if (responseMessage.content == '') {
									responseMessage.error = true;
									responseMessage.content =
										'Oops! No text generated from Ollama, Please try again.';
								}

Rohit Das's avatar
Rohit Das committed
234
235
236
								responseMessage.context = data.context ?? null;
								responseMessage.info = {
									total_duration: data.total_duration,
Timothy J. Baek's avatar
Timothy J. Baek committed
237
238
239
									load_duration: data.load_duration,
									sample_count: data.sample_count,
									sample_duration: data.sample_duration,
Rohit Das's avatar
Rohit Das committed
240
241
242
243
244
									prompt_eval_count: data.prompt_eval_count,
									prompt_eval_duration: data.prompt_eval_duration,
									eval_count: data.eval_count,
									eval_duration: data.eval_duration
								};
245
								messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
246

Timothy J. Baek's avatar
Timothy J. Baek committed
247
								if ($settings.notificationEnabled && !document.hasFocus()) {
Timothy J. Baek's avatar
Timothy J. Baek committed
248
249
250
251
252
253
254
255
256
257
258
259
260
									const notification = new Notification(
										selectedModelfile
											? `${
													selectedModelfile.title.charAt(0).toUpperCase() +
													selectedModelfile.title.slice(1)
											  }`
											: `Ollama - ${model}`,
										{
											body: responseMessage.content,
											icon: selectedModelfile?.imageUrl ?? '/favicon.png'
										}
									);
								}
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263
264

								if ($settings.responseAutoCopy) {
									copyToClipboard(responseMessage.content);
								}
265
266
267
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
268
269
270
271
272
273
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
274
				}
Rohit Das's avatar
Rohit Das committed
275
276
277

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

281
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
282
				chat = await updateChatById(localStorage.token, _chatId, {
Rohit Das's avatar
Rohit Das committed
283
284
285
					messages: messages,
					history: history
				});
Timothy J. Baek's avatar
Timothy J. Baek committed
286
				await chats.set(await getChatList(localStorage.token));
287
			}
288
289
290
		} else {
			if (res !== null) {
				const error = await res.json();
291
				console.log(error);
292
293
				if ('detail' in error) {
					toast.error(error.detail);
294
					responseMessage.content = error.detail;
295
296
				} else {
					toast.error(error.error);
297
					responseMessage.content = error.error;
298
				}
299
300
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
301
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
302
303
			}

304
305
306
307
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
308
309
310
311
		}

		stopResponseFlag = false;
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
312

313
314
315
		if (autoScroll) {
			window.scrollTo({ top: document.body.scrollHeight });
		}
316

317
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
318
319
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
320
321
322
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
323
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
324
		if ($settings.OPENAI_API_KEY) {
325
			if (models) {
326
327
				let responseMessageId = uuidv4();

328
				let responseMessage = {
329
330
331
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
332
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
333
334
					content: '',
					model: model
335
336
				};

337
338
339
340
341
342
343
344
345
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

346
347
				window.scrollTo({ top: document.body.scrollHeight });

348
349
350
351
352
353
				const res = await fetch(
					`${$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1'}/chat/completions`,
					{
						method: 'POST',
						headers: {
							Authorization: `Bearer ${$settings.OPENAI_API_KEY}`,
Timothy J. Baek's avatar
Timothy J. Baek committed
354
							'Content-Type': 'application/json'
355
356
357
358
359
360
						},
						body: JSON.stringify({
							model: model,
							stream: true,
							messages: [
								$settings.system
361
									? {
362
363
											role: 'system',
											content: $settings.system
364
									  }
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
									: undefined,
								...messages
							]
								.filter((message) => message)
								.map((message) => ({
									role: message.role,
									...(message.files
										? {
												content: [
													{
														type: 'text',
														text: message.content
													},
													...message.files
														.filter((file) => file.type === 'image')
														.map((file) => ({
															type: 'image_url',
															image_url: {
																url: file.url
															}
														}))
												]
										  }
										: { content: message.content })
								})),
Timothy J. Baek's avatar
Timothy J. Baek committed
390
391
392
393
394
395
396
							seed: $settings?.options?.seed ?? undefined,
							stop: $settings?.options?.stop ?? undefined,
							temperature: $settings?.options?.temperature ?? undefined,
							top_p: $settings?.options?.top_p ?? undefined,
							num_ctx: $settings?.options?.num_ctx ?? undefined,
							frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
							max_tokens: $settings?.options?.num_predict ?? undefined
397
						})
398
					}
399
400
401
402
				).catch((err) => {
					console.log(err);
					return null;
				});
403

404
405
406
407
408
409
410
411
412
413
414
415
416
				if (res && res.ok) {
					const reader = res.body
						.pipeThrough(new TextDecoderStream())
						.pipeThrough(splitStream('\n'))
						.getReader();

					while (true) {
						const { value, done } = await reader.read();
						if (done || stopResponseFlag || _chatId !== $chatId) {
							responseMessage.done = true;
							messages = messages;
							break;
						}
417

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

421
422
423
424
425
							for (const line of lines) {
								if (line !== '') {
									console.log(line);
									if (line === 'data: [DONE]') {
										responseMessage.done = true;
426
										messages = messages;
427
428
429
430
431
432
433
434
435
436
									} 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;
										}
437
438
439
									}
								}
							}
440
441
						} catch (error) {
							console.log(error);
442
443
						}

444
445
446
447
448
449
						if ($settings.notificationEnabled && !document.hasFocus()) {
							const notification = new Notification(`OpenAI ${model}`, {
								body: responseMessage.content,
								icon: '/favicon.png'
							});
						}
450

451
452
453
						if ($settings.responseAutoCopy) {
							copyToClipboard(responseMessage.content);
						}
454

455
456
457
						if (autoScroll) {
							window.scrollTo({ top: document.body.scrollHeight });
						}
458
					}
459

460
					if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
461
						chat = await updateChatById(localStorage.token, _chatId, {
462
463
464
							messages: messages,
							history: history
						});
Timothy J. Baek's avatar
Timothy J. Baek committed
465
						await chats.set(await getChatList(localStorage.token));
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
					}
				} else {
					if (res !== null) {
						const error = await res.json();
						console.log(error);
						if ('detail' in error) {
							toast.error(error.detail);
							responseMessage.content = error.detail;
						} else {
							if ('message' in error.error) {
								toast.error(error.error.message);
								responseMessage.content = error.error.message;
							} else {
								toast.error(error.error);
								responseMessage.content = error.error;
							}
						}
					} else {
						toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
						responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
487

488
489
490
491
					responseMessage.error = true;
					responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
					responseMessage.done = true;
					messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
492
493
				}

494
495
				stopResponseFlag = false;
				await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
496

497
498
499
500
501
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}

				if (messages.length == 2) {
Timothy J. Baek's avatar
Timothy J. Baek committed
502
503
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
504
505
506
				}
			}
		}
507
508
509
	};

	const submitPrompt = async (userPrompt) => {
510
		console.log('submitPrompt', $chatId);
511

Timothy J. Baek's avatar
Timothy J. Baek committed
512
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
513
			toast.error('Model not selected');
514
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
515
			// Response not done
Timothy J. Baek's avatar
Timothy J. Baek committed
516
517
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
518
			// Reset chat message textarea height
Timothy J. Baek's avatar
Timothy J. Baek committed
519
520
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
521
			// Create user message
Timothy J. Baek's avatar
Timothy J. Baek committed
522
523
524
525
526
527
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
528
529
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
530
531
			};

Timothy J. Baek's avatar
Timothy J. Baek committed
532
533
534
535
536
			// Add message to history and Set currentId to messageId
			history.messages[userMessageId] = userMessage;
			history.currentId = userMessageId;

			// Append messageId to childrenIds of parent message
Timothy J. Baek's avatar
Timothy J. Baek committed
537
538
539
540
			if (messages.length !== 0) {
				history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
541
			// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
542
			await tick();
543

Timothy J. Baek's avatar
Timothy J. Baek committed
544
			// Create new chat if only one message in messages
Timothy J. Baek's avatar
Timothy J. Baek committed
545
			if (messages.length == 1) {
Timothy J. Baek's avatar
Timothy J. Baek committed
546
				chat = await createNewChat(localStorage.token, {
547
					id: $chatId,
548
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
549
					models: selectedModels,
550
					system: $settings.system ?? undefined,
551
					options: {
552
						...($settings.options ?? {})
553
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
554
					messages: messages,
Timothy J. Baek's avatar
Timothy J. Baek committed
555
556
					history: history,
					timestamp: Date.now()
557
				});
Timothy J. Baek's avatar
Timothy J. Baek committed
558
				await chats.set(await getChatList(localStorage.token));
559
560
				await chatId.set(chat.id);
				await tick();
561
			}
562

Timothy J. Baek's avatar
Timothy J. Baek committed
563
			// Reset chat input textarea
Timothy J. Baek's avatar
Timothy J. Baek committed
564
565
566
			prompt = '';
			files = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
567
			// Send prompt
568
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
569
570
571
		}
	};

572
573
574
575
576
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

577
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
578
		console.log('regenerateResponse');
579
580
581
		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
582

583
584
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
585

Timothy J. Baek's avatar
Timothy J. Baek committed
586
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
587
		}
588
	};
589

590
	const generateChatTitle = async (_chatId, userPrompt) => {
591
		if ($settings.titleAutoGenerate ?? true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
592
593
			const title = await generateTitle(
				localStorage.token,
594
				$settings?.titleAutoGenerateModel ?? selectedModels[0],
Timothy J. Baek's avatar
Timothy J. Baek committed
595
596
597
598
599
				userPrompt
			);

			if (title) {
				await setChatTitle(_chatId, title);
600
601
602
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
603
604
605
606
		}
	};

	const setChatTitle = async (_chatId, _title) => {
607
		if (_chatId === $chatId) {
608
			title = _title;
609
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
610
611
612

		chat = await updateChatById(localStorage.token, _chatId, { title: _title });
		await chats.set(await getChatList(localStorage.token));
613
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
614
615
</script>

616
617
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
618
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
619
620
621
	}}
/>

622
<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} />
623
624
625
626
<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-3 md:px-0 mt-10">
			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
Timothy J. Baek's avatar
Timothy J. Baek committed
627
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
628

629
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
630
			<Messages
631
				chatId={$chatId}
632
				{selectedModels}
633
				{selectedModelfiles}
634
635
636
				bind:history
				bind:messages
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
637
				bottomPadding={files.length > 0}
638
639
640
				{sendPrompt}
				{regenerateResponse}
			/>
641
642
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
643

644
645
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
646
		bind:prompt
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
		bind:autoScroll
		suggestionPrompts={selectedModelfile?.suggestionPrompts ?? [
			{
				title: ['Help me study', 'vocabulary for a college entrance exam'],
				content: `Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
			},
			{
				title: ['Give me ideas', `for what to do with my kids' art`],
				content: `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.`
			},
			{
				title: ['Tell me a fun fact', 'about the Roman Empire'],
				content: 'Tell me a random fun fact about the Roman Empire'
			},
			{
				title: ['Show me a code snippet', `of a website's sticky header`],
				content: `Show me a code snippet of a website's sticky header in CSS and JavaScript.`
			}
		]}
		{messages}
		{submitPrompt}
		{stopResponse}
	/>
670
</div>