+page.svelte 16.8 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, 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
89

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

92
93
94
95
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
96
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98
99
		await Promise.all(
			selectedModels.map(async (model) => {
				if (model.includes('gpt-')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
100
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
101
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
102
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
105
				}
			})
		);
106

107
		await chats.set(await $db.getChats());
108
109
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
110
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
111
		console.log('sendPromptOllama');
Timothy J. Baek's avatar
Timothy J. Baek committed
112
		let responseMessageId = uuidv4();
113
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
117
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
118
119
			content: '',
			model: model
120
121
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
122
123
124
125
126
127
128
129
130
		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
131
132
		await tick();
		window.scrollTo({ top: document.body.scrollHeight });
133

Timothy J. Baek's avatar
Timothy J. Baek committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
		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
153
154
155
156
157
158
159
160
161
					.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
162
163
164
165
166
167
168
169
170
171
172
				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
			})
173
174
175
		}).catch((err) => {
			console.log(err);
			return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
		});

178
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
179
180
181
182
183
184
185
186
187
188
189
190
			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;
				}
191

Rohit Das's avatar
Rohit Das committed
192
193
				try {
					let lines = value.split('\n');
194

Rohit Das's avatar
Rohit Das committed
195
196
197
198
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
199

Rohit Das's avatar
Rohit Das committed
200
201
202
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
203

Rohit Das's avatar
Rohit Das committed
204
205
206
207
208
209
210
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
								} else {
									responseMessage.content += data.message.content;
									messages = messages;
								}
211
							} else {
Rohit Das's avatar
Rohit Das committed
212
213
214
215
								responseMessage.done = true;
								responseMessage.context = data.context ?? null;
								responseMessage.info = {
									total_duration: data.total_duration,
Timothy J. Baek's avatar
Timothy J. Baek committed
216
217
218
									load_duration: data.load_duration,
									sample_count: data.sample_count,
									sample_duration: data.sample_duration,
Rohit Das's avatar
Rohit Das committed
219
220
221
222
223
									prompt_eval_count: data.prompt_eval_count,
									prompt_eval_duration: data.prompt_eval_duration,
									eval_count: data.eval_count,
									eval_duration: data.eval_duration
								};
224
								messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

								if ($settings.responseNotification && !document.hasFocus()) {
									const notification = new Notification(
										selectedModelfile
											? `${
													selectedModelfile.title.charAt(0).toUpperCase() +
													selectedModelfile.title.slice(1)
											  }`
											: `Ollama - ${model}`,
										{
											body: responseMessage.content,
											icon: selectedModelfile?.imageUrl ?? '/favicon.png'
										}
									);
								}
240
241
242
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
243
244
245
246
247
248
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
249
				}
Rohit Das's avatar
Rohit Das committed
250
251
252

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

Rohit Das's avatar
Rohit Das committed
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
				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
				});
271
			}
272
273
274
		} else {
			if (res !== null) {
				const error = await res.json();
275
				console.log(error);
276
277
				if ('detail' in error) {
					toast.error(error.detail);
278
					responseMessage.content = error.detail;
279
280
				} else {
					toast.error(error.error);
281
					responseMessage.content = error.error;
282
				}
283
284
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
285
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
286
287
			}

288
289
290
291
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
292
293
294
295
296
297
298
		}

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

300
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
303
304
305
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
306
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
307
		if ($settings.OPENAI_API_KEY) {
308
			if (models) {
309
310
				let responseMessageId = uuidv4();

311
				let responseMessage = {
312
313
314
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
315
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
316
317
					content: '',
					model: model
318
319
				};

320
321
322
323
324
325
326
327
328
				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
329
330
				await tick();

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

				const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
Timothy J. Baek's avatar
Timothy J. Baek committed
337
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
338
339
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
340
						model: model,
341
						stream: true,
342
						messages: [
343
							$settings.system
344
345
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
346
										content: $settings.system
347
348
349
350
351
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
							.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 })
							})),
373
374
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
375
						num_ctx: $settings.num_ctx ?? undefined,
376
						frequency_penalty: $settings.repeat_penalty ?? undefined
377
378
379
380
381
382
383
384
385
386
					})
				});

				const reader = res.body
					.pipeThrough(new TextDecoderStream())
					.pipeThrough(splitStream('\n'))
					.getReader();

				while (true) {
					const { value, done } = await reader.read();
Timothy J. Baek's avatar
Timothy J. Baek committed
387
388
389
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;
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
419
420
421
422
						break;
					}

					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;
								} 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;
									}
								}
							}
						}
					} catch (error) {
						console.log(error);
					}

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

Timothy J. Baek's avatar
Timothy J. Baek committed
423
					await $db.updateChatById(_chatId, {
424
						title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
425
						models: selectedModels,
426
						system: $settings.system ?? undefined,
427
						options: {
428
429
430
431
							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
432
							top_p: $settings.top_p ?? undefined,
433
434
							num_ctx: $settings.num_ctx ?? undefined,
							...($settings.options ?? {})
435
						},
Timothy J. Baek's avatar
Timothy J. Baek committed
436
						messages: messages,
437
						history: history
438
439
440
441
442
443
444
445
446
447
448
					});
				}

				stopResponseFlag = false;

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

				if (messages.length == 2) {
Timothy J. Baek's avatar
Timothy J. Baek committed
449
450
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
451
452
453
				}
			}
		}
454
455
456
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
460
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
461
			toast.error('Model not selected');
462
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
463
464
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
465
466
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
467
468
469
470
471
472
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
473
474
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
475
476
477
478
479
480
481
482
			};

			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
483

Timothy J. Baek's avatar
Timothy J. Baek committed
484
485
			await tick();
			if (messages.length == 1) {
486
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
487
					id: _chatId,
488
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
489
					models: selectedModels,
490
					system: $settings.system ?? undefined,
491
					options: {
492
493
494
495
						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
496
						top_p: $settings.top_p ?? undefined,
497
498
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
499
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
500
					messages: messages,
501
					history: history
502
503
				});
			}
504

Timothy J. Baek's avatar
Timothy J. Baek committed
505
506
507
			prompt = '';
			files = [];

508
509
510
511
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
512
			await sendPrompt(userPrompt, userMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
513
514
515
		}
	};

516
517
518
519
520
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

521
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
522
523
524
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('regenerateResponse', _chatId);

525
526
527
		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
528

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

Timothy J. Baek's avatar
Timothy J. Baek committed
532
			await sendPrompt(userPrompt, userMessage.id, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
533
		}
534
	};
535

536
	const generateChatTitle = async (_chatId, userPrompt) => {
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
		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
				})
552
			})
553
554
555
556
557
558
559
560
561
562
563
				.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;
				});
564

565
566
567
568
569
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
570
571
572
573
		}
	};

	const setChatTitle = async (_chatId, _title) => {
574
575
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
576
			title = _title;
577
578
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
579
580
</script>

581
582
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
583
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
584
585
586
	}}
/>

Timothy J. Baek's avatar
Timothy J. Baek committed
587
<Navbar {title} shareEnabled={messages.length > 0} />
588
589
590
591
<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
592
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
593

594
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
595
596
597
598
599
600
			<Messages
				{selectedModels}
				{selectedModelfile}
				bind:history
				bind:messages
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
601
				bottomPadding={files.length > 0}
602
603
604
				{sendPrompt}
				{regenerateResponse}
			/>
605
606
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
607

608
609
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
610
		bind:prompt
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
		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}
	/>
634
</div>