+page.svelte 19.2 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';

5
	import { OLLAMA_API_BASE_URL } from '$lib/constants';
6
	import { onMount, tick } from 'svelte';
7
8
	import { splitStream } from '$lib/utils';
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
9

10
	import { config, models, modelfiles, user, settings, db, chats, chatId } from '$lib/stores';
11
12
13
14

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
15
	import Navbar from '$lib/components/layout/Navbar.svelte';
16
	import { page } from '$app/stores';
17

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

Timothy J. Baek's avatar
Timothy J. Baek committed
21
	let selectedModels = [''];
22
23
24
25
26
27
	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;
28

Timothy J. Baek's avatar
Timothy J. Baek committed
29
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
30
	let prompt = '';
31
	let files = [];
32

33
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
	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
49
50
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
51
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
52

Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
56
	$: if (files) {
		console.log(files);
	}

57
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
61
62
		await chatId.set(uuidv4());

		chatId.subscribe(async () => {
			await initNewChat();
		});
63
64
65
66
67
68
	});

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

69
70
	const initNewChat = async () => {
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
71

72
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
73

74
75
76
77
78
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
79
		};
80
81
82
		selectedModels = $page.url.searchParams.get('models')
			? $page.url.searchParams.get('models')?.split(',')
			: $settings.models ?? [''];
83
84
85
86
87
88

		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		console.log(_settings);
		settings.set({
			..._settings
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
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
125
	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!');
			},
			function (err) {
				console.error('Async: Could not copy text: ', err);
			}
		);
	};

126
127
128
129
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
130
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
131
132
		await Promise.all(
			selectedModels.map(async (model) => {
133
134
				console.log(model);
				if ($models.filter((m) => m.name === model)[0].external) {
Timothy J. Baek's avatar
Timothy J. Baek committed
135
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
136
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
137
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
138
139
140
				}
			})
		);
141

142
		await chats.set(await $db.getChats());
143
144
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
145
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
146
		console.log('sendPromptOllama');
Timothy J. Baek's avatar
Timothy J. Baek committed
147
		let responseMessageId = uuidv4();
148
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
149
150
151
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
152
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
			content: '',
			model: model
155
156
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
157
158
159
160
161
162
163
164
165
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
		await tick();
		window.scrollTo({ top: document.body.scrollHeight });
168

Timothy J. Baek's avatar
Timothy J. Baek committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream',
				...($settings.authHeader && { Authorization: $settings.authHeader }),
				...($user && { Authorization: `Bearer ${localStorage.token}` })
			},
			body: JSON.stringify({
				model: model,
				messages: [
					$settings.system
						? {
								role: 'system',
								content: $settings.system
						  }
						: undefined,
					...messages
				]
					.filter((message) => message)
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
191
192
193
194
195
196
					.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))
						})
					})),
Timothy J. Baek's avatar
Timothy J. Baek committed
197
198
199
200
201
202
203
204
205
206
207
				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,
					num_ctx: $settings.num_ctx ?? undefined,
					...($settings.options ?? {})
				},
				format: $settings.requestFormat ?? undefined
			})
208
209
210
		}).catch((err) => {
			console.log(err);
			return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
211
212
		});

213
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
214
215
216
217
218
219
220
221
222
223
224
225
			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;
				}
226

Rohit Das's avatar
Rohit Das committed
227
228
				try {
					let lines = value.split('\n');
229

Rohit Das's avatar
Rohit Das committed
230
231
232
233
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
234

Rohit Das's avatar
Rohit Das committed
235
236
237
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
238

Rohit Das's avatar
Rohit Das committed
239
240
241
242
243
244
245
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
								} else {
									responseMessage.content += data.message.content;
									messages = messages;
								}
246
							} else {
Rohit Das's avatar
Rohit Das committed
247
248
249
250
								responseMessage.done = true;
								responseMessage.context = data.context ?? null;
								responseMessage.info = {
									total_duration: data.total_duration,
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
									load_duration: data.load_duration,
									sample_count: data.sample_count,
									sample_duration: data.sample_duration,
Rohit Das's avatar
Rohit Das committed
254
255
256
257
258
									prompt_eval_count: data.prompt_eval_count,
									prompt_eval_duration: data.prompt_eval_duration,
									eval_count: data.eval_count,
									eval_duration: data.eval_duration
								};
259
								messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
260

Timothy J. Baek's avatar
Timothy J. Baek committed
261
								if ($settings.notificationEnabled && !document.hasFocus()) {
Timothy J. Baek's avatar
Timothy J. Baek committed
262
263
264
265
266
267
268
269
270
271
272
273
274
									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
275
276
277
278

								if ($settings.responseAutoCopy) {
									copyToClipboard(responseMessage.content);
								}
279
280
281
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
282
283
284
285
286
287
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
288
				}
Rohit Das's avatar
Rohit Das committed
289
290
291

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

Rohit Das's avatar
Rohit Das committed
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
				await $db.updateChatById(_chatId, {
					title: title === '' ? 'New Chat' : title,
					models: selectedModels,
					system: $settings.system ?? undefined,
					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,
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
					},
					messages: messages,
					history: history
				});
310
			}
311
312
313
		} else {
			if (res !== null) {
				const error = await res.json();
314
				console.log(error);
315
316
				if ('detail' in error) {
					toast.error(error.detail);
317
					responseMessage.content = error.detail;
318
319
				} else {
					toast.error(error.error);
320
					responseMessage.content = error.error;
321
				}
322
323
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
324
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
325
326
			}

327
328
329
330
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
331
332
333
334
335
336
337
		}

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

339
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
340
341
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
342
343
344
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
345
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
346
		if ($settings.OPENAI_API_KEY) {
347
			if (models) {
348
349
				let responseMessageId = uuidv4();

350
				let responseMessage = {
351
352
353
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
354
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
355
356
					content: '',
					model: model
357
358
				};

359
360
361
362
363
364
365
366
367
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
368
369
				await tick();

370
371
				window.scrollTo({ top: document.body.scrollHeight });

372
373
374
375
376
377
				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
378
							'Content-Type': 'application/json'
379
380
381
382
383
384
						},
						body: JSON.stringify({
							model: model,
							stream: true,
							messages: [
								$settings.system
385
									? {
386
387
											role: 'system',
											content: $settings.system
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
416
417
418
									: 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 })
								})),
							temperature: $settings.temperature ?? undefined,
							top_p: $settings.top_p ?? undefined,
							num_ctx: $settings.num_ctx ?? undefined,
							frequency_penalty: $settings.repeat_penalty ?? undefined
						})
419
					}
420
421
422
423
				).catch((err) => {
					console.log(err);
					return null;
				});
424

425
426
427
428
429
430
431
432
433
434
435
436
437
				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;
						}
438

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

442
443
444
445
446
							for (const line of lines) {
								if (line !== '') {
									console.log(line);
									if (line === 'data: [DONE]') {
										responseMessage.done = true;
447
										messages = messages;
448
449
450
451
452
453
454
455
456
457
									} 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;
										}
458
459
460
									}
								}
							}
461
462
						} catch (error) {
							console.log(error);
463
464
						}

465
466
467
468
469
470
						if ($settings.notificationEnabled && !document.hasFocus()) {
							const notification = new Notification(`OpenAI ${model}`, {
								body: responseMessage.content,
								icon: '/favicon.png'
							});
						}
471

472
473
474
						if ($settings.responseAutoCopy) {
							copyToClipboard(responseMessage.content);
						}
475

476
477
478
						if (autoScroll) {
							window.scrollTo({ top: document.body.scrollHeight });
						}
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
						await $db.updateChatById(_chatId, {
							title: title === '' ? 'New Chat' : title,
							models: selectedModels,
							system: $settings.system ?? undefined,
							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,
								num_ctx: $settings.num_ctx ?? undefined,
								...($settings.options ?? {})
							},
							messages: messages,
							history: history
						});
					}
				} 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
517

518
519
520
521
					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
522
523
				}

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

527
528
529
530
531
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}

				if (messages.length == 2) {
Timothy J. Baek's avatar
Timothy J. Baek committed
532
533
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
534
535
536
				}
			}
		}
537
538
539
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
540
541
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('submitPrompt', _chatId);
542

Timothy J. Baek's avatar
Timothy J. Baek committed
543
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
544
			toast.error('Model not selected');
545
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
546
547
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
548
549
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
550
551
552
553
554
555
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
556
557
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
558
559
560
561
562
563
564
565
			};

			if (messages.length !== 0) {
				history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
			}

			history.messages[userMessageId] = userMessage;
			history.currentId = userMessageId;
Timothy J. Baek's avatar
Timothy J. Baek committed
566

Timothy J. Baek's avatar
Timothy J. Baek committed
567
568
			await tick();
			if (messages.length == 1) {
569
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
570
					id: _chatId,
571
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
572
					models: selectedModels,
573
					system: $settings.system ?? undefined,
574
					options: {
575
576
577
578
						seed: $settings.seed ?? undefined,
						temperature: $settings.temperature ?? undefined,
						repeat_penalty: $settings.repeat_penalty ?? undefined,
						top_k: $settings.top_k ?? undefined,
Anthony Cucci's avatar
Anthony Cucci committed
579
						top_p: $settings.top_p ?? undefined,
580
581
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
582
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
583
					messages: messages,
584
					history: history
585
586
				});
			}
587

Timothy J. Baek's avatar
Timothy J. Baek committed
588
589
590
			prompt = '';
			files = [];

591
592
593
594
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
595
			await sendPrompt(userPrompt, userMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
596
597
598
		}
	};

599
600
601
602
603
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

604
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
605
606
607
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('regenerateResponse', _chatId);

608
609
610
		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
611

612
613
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
614

Timothy J. Baek's avatar
Timothy J. Baek committed
615
			await sendPrompt(userPrompt, userMessage.id, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
616
		}
617
	};
618

619
	const generateChatTitle = async (_chatId, userPrompt) => {
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
		if ($settings.titleAutoGenerate ?? true) {
			console.log('generateChatTitle');

			const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
				method: 'POST',
				headers: {
					'Content-Type': 'text/event-stream',
					...($settings.authHeader && { Authorization: $settings.authHeader }),
					...($user && { Authorization: `Bearer ${localStorage.token}` })
				},
				body: JSON.stringify({
					model: selectedModels[0],
					prompt: `Generate a brief 3-5 word title for this question, excluding the term 'title.' Then, please reply with only the title: ${userPrompt}`,
					stream: false
				})
635
			})
636
637
638
639
640
641
642
643
644
645
646
				.then(async (res) => {
					if (!res.ok) throw await res.json();
					return res.json();
				})
				.catch((error) => {
					if ('detail' in error) {
						toast.error(error.detail);
					}
					console.log(error);
					return null;
				});
647

648
649
650
651
652
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
653
654
655
656
		}
	};

	const setChatTitle = async (_chatId, _title) => {
657
658
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
659
			title = _title;
660
661
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
662
663
</script>

664
665
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
666
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
667
668
669
	}}
/>

Timothy J. Baek's avatar
Timothy J. Baek committed
670
<Navbar {title} shareEnabled={messages.length > 0} />
671
672
673
674
<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
675
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
676

677
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
678
679
680
681
682
683
			<Messages
				{selectedModels}
				{selectedModelfile}
				bind:history
				bind:messages
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
684
				bottomPadding={files.length > 0}
685
686
687
				{sendPrompt}
				{regenerateResponse}
			/>
688
689
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
690

691
692
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
693
		bind:prompt
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
		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}
	/>
717
</div>