+page.svelte 17.3 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';
Timothy J. Baek's avatar
Timothy J. Baek committed
19
	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
20

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

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

26
27
28
29
30
31
	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;
32

33
34
35
36
37
38
39
40
41
42
43
	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 })
		};
	}, {});

44
45
	let chat = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
46
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
47
	let prompt = '';
48
	let files = [];
49
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
	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
65
66
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
67
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
68

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

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

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

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

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

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

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

		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 = [''];
		}
105
106
107
108
109

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

112
113
114
115
	//////////////////////////
	// Ollama functions
	//////////////////////////

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

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

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

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

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

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

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

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
164
		window.scrollTo({ top: document.body.scrollHeight });
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
191
		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
192

193
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
194
195
196
197
198
199
200
201
202
203
204
205
			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;
				}
206

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

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
248
								if ($settings.notificationEnabled && !document.hasFocus()) {
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
251
252
253
254
255
256
257
258
259
260
261
									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
262
263
264
265

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

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

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

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

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

316
317
318
		if (autoScroll) {
			window.scrollTo({ top: document.body.scrollHeight });
		}
319

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

Timothy J. Baek's avatar
Timothy J. Baek committed
326
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
327
		let responseMessageId = uuidv4();
328

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

Timothy J. Baek's avatar
Timothy J. Baek committed
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

Timothy J. Baek's avatar
Timothy J. Baek committed
347
		window.scrollTo({ top: document.body.scrollHeight });
348

Timothy J. Baek's avatar
Timothy J. Baek committed
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
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
390
		const res = await generateOpenAIChatCompletion(localStorage.token, {
			model: model,
			stream: true,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: 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 })
				})),
			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
		});
391

Timothy J. Baek's avatar
Timothy J. Baek committed
392
393
394
395
396
		if (res && res.ok) {
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
397

Timothy J. Baek's avatar
Timothy J. Baek committed
398
399
400
401
402
403
404
			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
405

Timothy J. Baek's avatar
Timothy J. Baek committed
406
407
408
409
410
411
412
413
414
				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;
415
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
420
421
422
423
424
								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;
								}
425
426
427
							}
						}
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
428
429
430
				} catch (error) {
					console.log(error);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
431

Timothy J. Baek's avatar
Timothy J. Baek committed
432
433
434
435
436
				if ($settings.notificationEnabled && !document.hasFocus()) {
					const notification = new Notification(`OpenAI ${model}`, {
						body: responseMessage.content,
						icon: '/favicon.png'
					});
Timothy J. Baek's avatar
Timothy J. Baek committed
437
438
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
439
440
441
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
442

443
444
445
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
446
			}
447

Timothy J. Baek's avatar
Timothy J. Baek committed
448
			if ($chatId == _chatId) {
449
450
451
452
453
454
455
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
			}
		} 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;
					}
472
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
473
474
475
			} else {
				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
476
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493

			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
			responseMessage.done = true;
			messages = messages;
		}

		stopResponseFlag = false;
		await tick();

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

		if (messages.length == 2) {
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await setChatTitle(_chatId, userPrompt);
494
		}
495
496
497
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
500
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
501
			toast.error('Model not selected');
502
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
503
			// Response not done
Timothy J. Baek's avatar
Timothy J. Baek committed
504
505
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
506
			// Reset chat message textarea height
Timothy J. Baek's avatar
Timothy J. Baek committed
507
508
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
509
			// Create user message
Timothy J. Baek's avatar
Timothy J. Baek committed
510
511
512
513
514
515
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
516
517
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
518
519
			};

Timothy J. Baek's avatar
Timothy J. Baek committed
520
521
522
523
524
			// 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
525
526
527
528
			if (messages.length !== 0) {
				history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
529
			// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
530
			await tick();
531

Timothy J. Baek's avatar
Timothy J. Baek committed
532
			// Create new chat if only one message in messages
Timothy J. Baek's avatar
Timothy J. Baek committed
533
			if (messages.length == 1) {
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
				if ($settings.saveChatHistory ?? true) {
					chat = await createNewChat(localStorage.token, {
						id: $chatId,
						title: 'New Chat',
						models: selectedModels,
						system: $settings.system ?? undefined,
						options: {
							...($settings.options ?? {})
						},
						messages: messages,
						history: history,
						timestamp: Date.now()
					});
					await chats.set(await getChatList(localStorage.token));
					await chatId.set(chat.id);
				} else {
					await chatId.set('local');
				}
552
				await tick();
553
			}
554

Timothy J. Baek's avatar
Timothy J. Baek committed
555
			// Reset chat input textarea
Timothy J. Baek's avatar
Timothy J. Baek committed
556
557
558
			prompt = '';
			files = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
559
			// Send prompt
560
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
561
562
563
		}
	};

564
565
566
567
568
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

569
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
570
		console.log('regenerateResponse');
571
572
573
		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
574

575
576
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
577

Timothy J. Baek's avatar
Timothy J. Baek committed
578
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
579
		}
580
	};
581

582
	const generateChatTitle = async (_chatId, userPrompt) => {
583
		if ($settings.titleAutoGenerate ?? true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
584
585
			const title = await generateTitle(
				localStorage.token,
586
				$settings?.titleAutoGenerateModel ?? selectedModels[0],
Timothy J. Baek's avatar
Timothy J. Baek committed
587
588
589
590
591
				userPrompt
			);

			if (title) {
				await setChatTitle(_chatId, title);
592
593
594
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
595
596
597
598
		}
	};

	const setChatTitle = async (_chatId, _title) => {
599
		if (_chatId === $chatId) {
600
			title = _title;
601
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
602

603
604
605
606
		if ($settings.saveChatHistory ?? true) {
			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
			await chats.set(await getChatList(localStorage.token));
		}
607
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
608
609
</script>

610
611
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
612
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
613
614
615
	}}
/>

616
<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} />
617
618
619
620
<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
621
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
622

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

638
639
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
640
		bind:prompt
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
		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}
	/>
664
</div>