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

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';
10
	import { copyToClipboard, splitStream } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
11

12
	import { generateChatCompletion, cancelChatCompletion, generateTitle } from '$lib/apis/ollama';
13
14
15
	import { createNewChat, getChatList, updateChatById } from '$lib/apis/chats';
	import { queryVectorDB } from '$lib/apis/rag';
	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
16
17
18
19

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
20
	import Navbar from '$lib/components/layout/Navbar.svelte';
21
	import { RAGTemplate } from '$lib/utils/rag';
22

23
24
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
25
	let processing = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
26

27
28
	let currentRequestId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
29
	let selectedModels = [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
30

31
32
33
34
35
36
	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;
37

38
39
40
41
42
43
44
45
46
47
48
	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 })
		};
	}, {});

49
50
	let chat = null;

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

74
	onMount(async () => {
75
		await initNewChat();
76
77
78
79
80
81
	});

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

82
	const initNewChat = async () => {
83
84
85
86
87
		if (currentRequestId !== null) {
			await cancelChatCompletion(localStorage.token, currentRequestId);
			currentRequestId = null;
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
88
89
		window.history.replaceState(history.state, '', `/`);

90
91
92
		console.log('initNewChat');

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

95
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
96

97
98
99
100
101
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
102
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
105
106
107
108
109
110
111
112
113
114

		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 = [''];
		}
115
116
117
118
119

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

122
123
124
125
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
126
	const submitPrompt = async (userPrompt, _user = null) => {
127
128
129
130
131
132
133
		console.log('submitPrompt', $chatId);

		if (selectedModels.includes('')) {
			toast.error('Model not selected');
		} else if (messages.length != 0 && messages.at(-1).done != true) {
			// Response not done
			console.log('wait');
134
135
136
137
138
139
140
141
		} else if (
			files.length > 0 &&
			files.filter((file) => file.upload_status === false).length > 0
		) {
			// Upload not done
			toast.error(
				`Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.`
			);
142
143
144
145
146
147
148
149
150
151
152
		} else {
			// Reset chat message textarea height
			document.getElementById('chat-textarea').style.height = '';

			// Create user message
			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
153
				user: _user ?? undefined,
154
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
155
				files: files.length > 0 ? files : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
156
				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
			};

			// Add message to history and Set currentId to messageId
			history.messages[userMessageId] = userMessage;
			history.currentId = userMessageId;

			// Append messageId to childrenIds of parent message
			if (messages.length !== 0) {
				history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
			}

			// Wait until history/message have been updated
			await tick();

			// Create new chat if only one message in messages
			if (messages.length == 1) {
				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');
				}
				await tick();
			}

			// Reset chat input textarea
			prompt = '';
			files = [];

			// Send prompt
			await sendPrompt(userPrompt, userMessageId);
		}
	};

203
204
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
205

206
207
208
209
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) => message.files.filter((item) => item.type === 'doc'))
			.flat(1);
Timothy J. Baek's avatar
Timothy J. Baek committed
210
211

		console.log(docs);
212
		if (docs.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
213
			processing = 'Reading';
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
			const query = history.messages[parentId].content;

			let relevantContexts = await Promise.all(
				docs.map(async (doc) => {
					return await queryVectorDB(localStorage.token, doc.collection_name, query, 4).catch(
						(error) => {
							console.log(error);
							return null;
						}
					);
				})
			);
			relevantContexts = relevantContexts.filter((context) => context);

			const contextString = relevantContexts.reduce((a, context, i, arr) => {
				return `${a}${context.documents.join(' ')}\n`;
			}, '');

Timothy J. Baek's avatar
Timothy J. Baek committed
232
233
			console.log(contextString);

234
235
236
			history.messages[parentId].raContent = RAGTemplate(contextString, query);
			history.messages[parentId].contexts = relevantContexts;
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
237
			processing = '';
238
239
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
		await Promise.all(
			selectedModels.map(async (model) => {
242
				console.log(model);
Timothy J. Baek's avatar
Timothy J. Baek committed
243
244
245
				const modelTag = $models.filter((m) => m.name === model).at(0);

				if (modelTag?.external) {
246
					await sendPromptOpenAI(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
247
				} else if (modelTag) {
248
					await sendPromptOllama(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
				} else {
					toast.error(`Model ${model} not found`);
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
				}
			})
		);
254

Timothy J. Baek's avatar
Timothy J. Baek committed
255
		await chats.set(await getChatList(localStorage.token));
256
257
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
258
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
259
		// Create response message
Timothy J. Baek's avatar
Timothy J. Baek committed
260
		let responseMessageId = uuidv4();
261
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
262
263
264
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
265
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
266
			content: '',
Timothy J. Baek's avatar
Timothy J. Baek committed
267
			model: model,
Timothy J. Baek's avatar
Timothy J. Baek committed
268
			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
269
270
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
271
		// Add message to history and Set currentId to messageId
Timothy J. Baek's avatar
Timothy J. Baek committed
272
273
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
Timothy J. Baek's avatar
Timothy J. Baek committed
274
275

		// Append messageId to childrenIds of parent message
Timothy J. Baek's avatar
Timothy J. Baek committed
276
277
278
279
280
281
282
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
283
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
284
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286

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

289
		const [res, controller] = await generateChatCompletion(localStorage.token, {
290
291
292
293
294
295
296
297
298
299
300
			model: model,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
				...messages
			]
				.filter((message) => message)
301
				.map((message, idx, arr) => ({
302
					role: message.role,
303
					content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content,
304
305
306
307
308
309
310
311
312
313
314
					...(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
315

316
		if (res && res.ok) {
317
318
			console.log('controller', controller);

Rohit Das's avatar
Rohit Das committed
319
320
321
322
323
324
325
326
327
328
			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;
329
330
331
332
333
334
335
336

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
						await cancelChatCompletion(localStorage.token, currentRequestId);
					}

					currentRequestId = null;

Rohit Das's avatar
Rohit Das committed
337
338
					break;
				}
339

Rohit Das's avatar
Rohit Das committed
340
341
				try {
					let lines = value.split('\n');
342

Rohit Das's avatar
Rohit Das committed
343
344
345
346
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
347

Rohit Das's avatar
Rohit Das committed
348
349
350
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
351

352
353
354
355
356
357
358
359
360
361
362
							if ('id' in data) {
								console.log(data);
								currentRequestId = data.id;
							} else {
								if (data.done == false) {
									if (responseMessage.content == '' && data.message.content == '\n') {
										continue;
									} else {
										responseMessage.content += data.message.content;
										messages = messages;
									}
Rohit Das's avatar
Rohit Das committed
363
								} else {
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
									responseMessage.done = true;

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

									responseMessage.context = data.context ?? null;
									responseMessage.info = {
										total_duration: data.total_duration,
										load_duration: data.load_duration,
										sample_count: data.sample_count,
										sample_duration: data.sample_duration,
										prompt_eval_count: data.prompt_eval_count,
										prompt_eval_duration: data.prompt_eval_duration,
										eval_count: data.eval_count,
										eval_duration: data.eval_duration
									};
Rohit Das's avatar
Rohit Das committed
383
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
384

385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
									if ($settings.notificationEnabled && !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'
											}
										);
									}

									if ($settings.responseAutoCopy) {
										copyToClipboard(responseMessage.content);
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
403
								}
404
405
406
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
407
408
409
410
411
412
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
413
				}
Rohit Das's avatar
Rohit Das committed
414
415
416

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

420
			if ($chatId == _chatId) {
421
422
423
424
425
426
427
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
428
			}
429
430
431
		} else {
			if (res !== null) {
				const error = await res.json();
432
				console.log(error);
433
434
				if ('detail' in error) {
					toast.error(error.detail);
435
					responseMessage.content = error.detail;
436
437
				} else {
					toast.error(error.error);
438
					responseMessage.content = error.error;
439
				}
440
441
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
442
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
443
444
			}

445
446
447
448
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
449
450
451
452
		}

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

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

458
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
459
460
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
461
462
463
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
467
468
469
470
471
472
		let responseMessage = {
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
			role: 'assistant',
			content: '',
Timothy J. Baek's avatar
Timothy J. Baek committed
473
			model: model,
Timothy J. Baek's avatar
Timothy J. Baek committed
474
			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
Timothy J. Baek's avatar
Timothy J. Baek committed
475
		};
476

Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
482
483
484
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}
485

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

Timothy J. Baek's avatar
Timothy J. Baek committed
488
489
490
491
492
493
494
495
496
497
498
499
500
		const res = await generateOpenAIChatCompletion(localStorage.token, {
			model: model,
			stream: true,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
				...messages
			]
				.filter((message) => message)
501
				.map((message, idx, arr) => ({
Timothy J. Baek's avatar
Timothy J. Baek committed
502
503
504
505
506
507
					role: message.role,
					...(message.files
						? {
								content: [
									{
										type: 'text',
508
509
510
511
										text:
											arr.length - 1 !== idx
												? message.content
												: message?.raContent ?? message.content
Timothy J. Baek's avatar
Timothy J. Baek committed
512
513
514
515
516
517
518
519
520
521
522
									},
									...message.files
										.filter((file) => file.type === 'image')
										.map((file) => ({
											type: 'image_url',
											image_url: {
												url: file.url
											}
										}))
								]
						  }
523
524
525
526
						: {
								content:
									arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
						  })
Timothy J. Baek's avatar
Timothy J. Baek committed
527
528
529
530
531
532
533
534
535
				})),
			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
		});
536

Timothy J. Baek's avatar
Timothy J. Baek committed
537
538
539
540
541
		if (res && res.ok) {
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
542

Timothy J. Baek's avatar
Timothy J. Baek committed
543
544
545
546
547
548
549
			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
550

Timothy J. Baek's avatar
Timothy J. Baek committed
551
552
553
554
555
556
557
558
559
				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;
560
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
561
562
563
564
565
566
567
568
569
								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;
								}
570
571
572
							}
						}
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
573
574
575
				} catch (error) {
					console.log(error);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
576

Timothy J. Baek's avatar
Timothy J. Baek committed
577
578
579
580
581
				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
582
583
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
584
585
586
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
587

588
589
590
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
591
			}
592

Timothy J. Baek's avatar
Timothy J. Baek committed
593
			if ($chatId == _chatId) {
594
595
596
597
598
599
600
				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
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
			}
		} 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;
					}
617
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
618
619
620
			} else {
				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
621
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638

			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);
639
		}
640
641
	};

642
643
644
645
646
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

647
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
648
		console.log('regenerateResponse');
649
650
651
		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
652

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

Timothy J. Baek's avatar
Timothy J. Baek committed
656
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
657
		}
658
	};
659

660
	const generateChatTitle = async (_chatId, userPrompt) => {
661
		if ($settings.titleAutoGenerate ?? true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
662
663
			const title = await generateTitle(
				localStorage.token,
664
				$settings?.titleAutoGenerateModel ?? selectedModels[0],
Timothy J. Baek's avatar
Timothy J. Baek committed
665
666
667
668
669
				userPrompt
			);

			if (title) {
				await setChatTitle(_chatId, title);
670
671
672
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
673
674
675
676
		}
	};

	const setChatTitle = async (_chatId, _title) => {
677
		if (_chatId === $chatId) {
678
			title = _title;
679
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
680

681
682
683
684
		if ($settings.saveChatHistory ?? true) {
			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
			await chats.set(await getChatList(localStorage.token));
		}
685
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
686
687
</script>

688
689
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
690
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
691
692
693
	}}
/>

694
<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} />
695
696
697
698
<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
699
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
700

701
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
702
			<Messages
703
				chatId={$chatId}
704
				{selectedModels}
705
				{selectedModelfiles}
Timothy J. Baek's avatar
Timothy J. Baek committed
706
				{processing}
707
708
709
				bind:history
				bind:messages
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
710
				bottomPadding={files.length > 0}
711
712
713
				{sendPrompt}
				{regenerateResponse}
			/>
714
715
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
716

717
718
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
719
		bind:prompt
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
		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}
	/>
743
</div>