+page.svelte 19.8 KB
Newer Older
1
2
3
4
5
6
7
8
<script lang="ts">
	import { v4 as uuidv4 } from 'uuid';
	import toast from 'svelte-french-toast';

	import { OLLAMA_API_BASE_URL } from '$lib/constants';
	import { onMount, tick } from 'svelte';
	import { convertMessagesToHistory, splitStream } from '$lib/utils';
	import { goto } from '$app/navigation';
9
	import { config, models, modelfiles, user, settings, db, chats, chatId } from '$lib/stores';
10
11
12
13
14
15
16
17
18
19
20
21
22

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

	let loaded = false;
	let stopResponseFlag = false;
	let autoScroll = true;

	// let chatId = $page.params.id;
	let selectedModels = [''];
23
24
25
26
27
28
	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;
29
30
31

	let title = '';
	let prompt = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	let files = [];
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

	let messages = [];
	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
50
51
	} else {
		messages = [];
52
53
54
55
	}

	$: if ($page.params.id) {
		(async () => {
56
57
58
59
60
61
62
63
			let chat = await loadChat();

			await tick();
			if (chat) {
				loaded = true;
			} else {
				await goto('/');
			}
64
65
66
67
68
69
70
71
72
		})();
	}

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

	const loadChat = async () => {
		await chatId.set($page.params.id);
73
		const chat = await $db.getChatById($chatId);
74
75
76
77
78
79
80
81
82
83

		if (chat) {
			console.log(chat);

			selectedModels = (chat?.models ?? undefined) !== undefined ? chat.models : [chat.model ?? ''];
			history =
				(chat?.history ?? undefined) !== undefined
					? chat.history
					: convertMessagesToHistory(chat.messages);
			title = chat.title;
84

Timothy J. Baek's avatar
Timothy J. Baek committed
85
			let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
86
			await settings.set({
Timothy J. Baek's avatar
Timothy J. Baek committed
87
88
89
				..._settings,
				system: chat.system ?? _settings.system,
				options: chat.options ?? _settings.options
90
91
92
93
94
95
96
			});
			autoScroll = true;

			await tick();
			if (messages.length > 0) {
				history.messages[messages.at(-1).id].done = true;
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98
			await tick();

99
100
101
102
103
104
			return chat;
		} else {
			return null;
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
	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);
			}
		);
	};

140
141
142
143
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
144
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
145
146
		await Promise.all(
			selectedModels.map(async (model) => {
147
148
				console.log(model);
				if ($models.filter((m) => m.name === model)[0].external) {
Timothy J. Baek's avatar
Timothy J. Baek committed
149
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
150
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
151
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
152
153
154
155
				}
			})
		);

156
		await chats.set(await $db.getChats());
157
158
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
		console.log('sendPromptOllama');
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
		let responseMessageId = uuidv4();
		let responseMessage = {
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
			role: 'assistant',
			content: '',
			model: model
		};

		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
180
181
		await tick();
		window.scrollTo({ top: document.body.scrollHeight });
182

Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
		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
202
203
204
205
206
207
208
209
210
					.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
211
212
213
214
215
216
217
218
219
220
221
				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
			})
222
223
224
		}).catch((err) => {
			console.log(err);
			return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
225
226
		});

227
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
228
229
230
231
232
233
234
235
236
237
238
239
			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;
				}
240

Rohit Das's avatar
Rohit Das committed
241
242
				try {
					let lines = value.split('\n');
243

Rohit Das's avatar
Rohit Das committed
244
245
246
247
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
248

Rohit Das's avatar
Rohit Das committed
249
250
251
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
252

Rohit Das's avatar
Rohit Das committed
253
254
255
256
257
258
259
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
								} else {
									responseMessage.content += data.message.content;
									messages = messages;
								}
260
							} else {
Rohit Das's avatar
Rohit Das committed
261
262
263
264
								responseMessage.done = true;
								responseMessage.context = data.context ?? null;
								responseMessage.info = {
									total_duration: data.total_duration,
Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
267
									load_duration: data.load_duration,
									sample_count: data.sample_count,
									sample_duration: data.sample_duration,
Rohit Das's avatar
Rohit Das committed
268
269
270
271
272
									prompt_eval_count: data.prompt_eval_count,
									prompt_eval_duration: data.prompt_eval_duration,
									eval_count: data.eval_count,
									eval_duration: data.eval_duration
								};
273
								messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
274

Timothy J. Baek's avatar
Timothy J. Baek committed
275
								if ($settings.notificationEnabled && !document.hasFocus()) {
Timothy J. Baek's avatar
Timothy J. Baek committed
276
277
278
279
280
281
282
283
284
285
286
287
288
									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
289
290
291
292

								if ($settings.responseAutoCopy) {
									copyToClipboard(responseMessage.content);
								}
293
294
295
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
296
297
298
299
300
301
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
302
				}
Rohit Das's avatar
Rohit Das committed
303
304
305

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

Rohit Das's avatar
Rohit Das committed
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
				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
				});
324
			}
325
326
327
		} else {
			if (res !== null) {
				const error = await res.json();
328
329
330
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
331
					responseMessage.content = error.detail;
332
333
				} else {
					toast.error(error.error);
334
					responseMessage.content = error.error;
335
				}
336
337
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
338
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
339
340
			}

341
342
343
344
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
345
346
347
348
349
350
351
352
353
		}

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

		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
354
355
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
356
357
358
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
359
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
360
		if ($settings.OPENAI_API_KEY) {
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
			if (models) {
				let responseMessageId = uuidv4();

				let responseMessage = {
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
					role: 'assistant',
					content: '',
					model: model
				};

				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
382
383
				await tick();

384
385
				window.scrollTo({ top: document.body.scrollHeight });

386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
				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}`,
							'Content-Type': 'application/json',
							'HTTP-Referer': `https://ollamahub.com/`,
							'X-Title': `Ollama WebUI`
						},
						body: JSON.stringify({
							model: model,
							stream: true,
							messages: [
								$settings.system
401
									? {
402
403
											role: 'system',
											content: $settings.system
404
									  }
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
									: 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
						})
435
					}
436
437
438
439
				).catch((err) => {
					console.log(err);
					return null;
				});
440

441
442
443
444
445
446
447
448
449
450
451
452
453
				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;
						}
454

455
456
						try {
							let lines = value.split('\n');
457

458
459
460
461
462
							for (const line of lines) {
								if (line !== '') {
									console.log(line);
									if (line === 'data: [DONE]') {
										responseMessage.done = true;
463
										messages = messages;
464
465
466
467
468
469
470
471
472
473
									} 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;
										}
474
475
476
									}
								}
							}
477
478
						} catch (error) {
							console.log(error);
479
480
						}

481
482
483
484
485
486
						if ($settings.notificationEnabled && !document.hasFocus()) {
							const notification = new Notification(`OpenAI ${model}`, {
								body: responseMessage.content,
								icon: '/favicon.png'
							});
						}
487

488
489
490
						if ($settings.responseAutoCopy) {
							copyToClipboard(responseMessage.content);
						}
491

492
493
494
						if (autoScroll) {
							window.scrollTo({ top: document.body.scrollHeight });
						}
495

496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
						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
533

534
535
536
537
					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
538
539
				}

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

543
544
545
546
547
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}

				if (messages.length == 2) {
Timothy J. Baek's avatar
Timothy J. Baek committed
548
549
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
550
551
552
553
554
555
				}
			}
		}
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
556
557
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('submitPrompt', _chatId);
558
559
560
561
562
563
564
565
566
567
568
569
570
571

		if (selectedModels.includes('')) {
			toast.error('Model not selected');
		} else if (messages.length != 0 && messages.at(-1).done != true) {
			console.log('wait');
		} else {
			document.getElementById('chat-textarea').style.height = '';

			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
Timothy J. Baek's avatar
Timothy J. Baek committed
572
573
				content: userPrompt,
				files: files.length > 0 ? files : undefined
574
575
576
577
578
579
580
581
582
			};

			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
583
584
			await tick();
			if (messages.length == 1) {
585
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
586
					id: _chatId,
587
588
589
590
591
592
593
594
					title: 'New Chat',
					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,
Anthony Cucci's avatar
Anthony Cucci committed
595
						top_p: $settings.top_p ?? undefined,
596
597
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
598
599
					},
					messages: messages,
600
					history: history
601
602
603
				});
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
604
605
606
			prompt = '';
			files = [];

607
608
609
610
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
611
			await sendPrompt(userPrompt, userMessageId, _chatId);
612
613
614
615
616
617
618
619
620
		}
	};

	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
621
622
623
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('regenerateResponse', _chatId);

624
625
626
627
628
629
630
		if (messages.length != 0 && messages.at(-1).done == true) {
			messages.splice(messages.length - 1, 1);
			messages = messages;

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

Timothy J. Baek's avatar
Timothy J. Baek committed
631
			await sendPrompt(userPrompt, userMessage.id, _chatId);
632
633
634
635
		}
	};

	const generateChatTitle = async (_chatId, userPrompt) => {
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
		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
				})
651
			})
652
653
654
655
656
657
658
659
660
661
662
				.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;
				});
663

664
665
666
667
668
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
669
670
671
672
		}
	};

	const setChatTitle = async (_chatId, _title) => {
673
674
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
675
676
677
678
679
680
681
682
683
684
685
			title = _title;
		}
	};
</script>

<svelte:window
	on:scroll={(e) => {
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
	}}
/>

Timothy J. Baek's avatar
Timothy J. Baek committed
686
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
687
	<Navbar {title} shareEnabled={messages.length > 0} />
Timothy J. Baek's avatar
Timothy J. Baek committed
688
689
690
691
692
693
694
	<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} />
			</div>

			<div class=" h-full mt-10 mb-32 w-full flex flex-col">
695
696
697
698
699
700
				<Messages
					{selectedModels}
					{selectedModelfile}
					bind:history
					bind:messages
					bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
701
					bottomPadding={files.length > 0}
702
703
704
					{sendPrompt}
					{regenerateResponse}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
705
			</div>
706
707
		</div>

708
		<MessageInput
Timothy J. Baek's avatar
Timothy J. Baek committed
709
			bind:files
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
			bind:prompt
			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}
		/>
734
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
735
{/if}