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

	import { onMount, tick } from 'svelte';
	import { goto } from '$app/navigation';
7
8
	import { page } from '$app/stores';

Timothy J. Baek's avatar
Timothy J. Baek committed
9
10
11
12
13
14
15
16
17
18
	import {
		models,
		modelfiles,
		user,
		settings,
		chats,
		chatId,
		config,
		tags as _tags
	} from '$lib/stores';
Brandon Hulston's avatar
Brandon Hulston committed
19
	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils';
20
21

	import { generateChatCompletion, generateTitle } from '$lib/apis/ollama';
22
23
24
25
	import {
		addTagById,
		createNewChat,
		deleteTagById,
Timothy J. Baek's avatar
Timothy J. Baek committed
26
		getAllChatTags,
27
28
29
30
31
		getChatById,
		getChatList,
		getTagsById,
		updateChatById
	} from '$lib/apis/chats';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import { queryVectorDB } from '$lib/apis/rag';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
	import { generateOpenAIChatCompletion } from '$lib/apis/openai';

35
36
37
38
	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';
Timothy J. Baek's avatar
Timothy J. Baek committed
39
	import { RAGTemplate } from '$lib/utils/rag';
40
41

	let loaded = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
42

43
44
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
45
	let processing = '';
46

Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
	let currentRequestId = null;

49
50
	// let chatId = $page.params.id;
	let selectedModels = [''];
51
52
53
54
55
56
	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;
57

Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
61
62
63
64
65
66
67
68
	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 })
		};
	}, {});

69
	let chat = null;
70
	let tags = [];
71

72
73
	let title = '';
	let prompt = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
74
	let files = [];
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

	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
92
93
	} else {
		messages = [];
94
95
96
97
	}

	$: if ($page.params.id) {
		(async () => {
98
99
			if (await loadChat()) {
				await tick();
100
101
102
103
				loaded = true;
			} else {
				await goto('/');
			}
104
105
106
107
108
109
110
111
112
		})();
	}

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

	const loadChat = async () => {
		await chatId.set($page.params.id);
113
114
		chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
			await goto('/');
115
			return null;
116
117
118
		});

		if (chat) {
119
			tags = await getTags();
120
121
122
123
124
125
126
127
			const chatContent = chat.chat;

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

				selectedModels =
					(chatContent?.models ?? undefined) !== undefined
						? chatContent.models
Brandon Hulston's avatar
Brandon Hulston committed
128
						: [chatContent.models ?? ''];
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
				history =
					(chatContent?.history ?? undefined) !== undefined
						? chatContent.history
						: convertMessagesToHistory(chatContent.messages);
				title = chatContent.title;

				let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
				await settings.set({
					..._settings,
					system: chatContent.system ?? _settings.system,
					options: chatContent.options ?? _settings.options
				});
				autoScroll = true;
				await tick();

				if (messages.length > 0) {
					history.messages[messages.at(-1).id].done = true;
				}
				await tick();

				return true;
			} else {
				return null;
			}
153
154
155
156
157
158
159
		}
	};

	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
160
	const submitPrompt = async (userPrompt, _user = null) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
161
162
163
164
165
166
167
		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');
Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
170
171
172
173
174
175
		} 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.`
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
178
179
180
181
182
183
184
185
186
		} 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
187
				user: _user ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
188
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
189
				files: files.length > 0 ? files : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
190
				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
Timothy J. Baek's avatar
Timothy J. Baek committed
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
			};

			// 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();
226
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
227
228
229
230
231
232
233
234
235
			// Reset chat input textarea
			prompt = '';
			files = [];

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

236
237
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
Timothy J. Baek's avatar
Timothy J. Baek committed
238
239
240
241
242
243
244
245

		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) => message.files.filter((item) => item.type === 'doc'))
			.flat(1);

		console.log(docs);
		if (docs.length > 0) {
Timothy J. Baek's avatar
Timothy J. Baek committed
246
			processing = 'Reading';
Timothy J. Baek's avatar
Timothy J. Baek committed
247
248
			const query = history.messages[parentId].content;

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
249
250
251
252
253
254
255
256
257
			let relevantContexts = await queryVectorDB(
				localStorage.token,
				docs.map((d) => d.collection_name),
				query,
				4
			).catch((error) => {
				console.log(error);
				return null;
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
258

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
259
260
			if (relevantContexts) {
				relevantContexts = relevantContexts.filter((context) => context);
Timothy J. Baek's avatar
Timothy J. Baek committed
261

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
262
263
264
				const contextString = relevantContexts.reduce((a, context, i, arr) => {
					return `${a}${context.documents.join(' ')}\n`;
				}, '');
Timothy J. Baek's avatar
Timothy J. Baek committed
265

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
266
267
268
269
270
				console.log(contextString);

				history.messages[parentId].raContent = RAGTemplate(contextString, query);
				history.messages[parentId].contexts = relevantContexts;
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
271
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
272
			processing = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
273
274
		}

275
276
		await Promise.all(
			selectedModels.map(async (model) => {
277
				console.log(model);
Timothy J. Baek's avatar
Timothy J. Baek committed
278
279
280
				const modelTag = $models.filter((m) => m.name === model).at(0);

				if (modelTag?.external) {
281
					await sendPromptOpenAI(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
282
				} else if (modelTag) {
283
					await sendPromptOllama(model, prompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
284
285
				} else {
					toast.error(`Model ${model} not found`);
286
287
288
289
				}
			})
		);

Timothy J. Baek's avatar
Timothy J. Baek committed
290
		await chats.set(await getChatList(localStorage.token));
291
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
292

Timothy J. Baek's avatar
Timothy J. Baek committed
293
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
294
		// Create response message
295
296
297
298
299
300
301
		let responseMessageId = uuidv4();
		let responseMessage = {
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
			role: 'assistant',
			content: '',
Timothy J. Baek's avatar
Timothy J. Baek committed
302
			model: model,
Timothy J. Baek's avatar
Timothy J. Baek committed
303
			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
304
305
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
306
		// Add message to history and Set currentId to messageId
307
308
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
Timothy J. Baek's avatar
Timothy J. Baek committed
309
310

		// Append messageId to childrenIds of parent message
311
312
313
314
315
316
317
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
318
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
319
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
320
321

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

324
		const [res, controller] = await generateChatCompletion(localStorage.token, {
325
326
327
328
329
330
331
332
333
334
335
			model: model,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
				...messages
			]
				.filter((message) => message)
336
				.map((message, idx, arr) => ({
337
					role: message.role,
338
					content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content,
339
340
341
342
343
344
345
346
347
348
349
					...(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
350

351
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
352
353
354
355
356
357
358
359
360
361
			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;
362
363
364

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
Timothy J. Baek's avatar
Timothy J. Baek committed
365
						await cancelChatCompletion(localStorage.token, currentRequestId);
366
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
367
368

					currentRequestId = null;
Rohit Das's avatar
Rohit Das committed
369
370
					break;
				}
371

Rohit Das's avatar
Rohit Das committed
372
373
				try {
					let lines = value.split('\n');
374

Rohit Das's avatar
Rohit Das committed
375
376
377
378
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
379

Rohit Das's avatar
Rohit Das committed
380
381
382
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
383

384
385
							if ('id' in data) {
								console.log(data);
Timothy J. Baek's avatar
Timothy J. Baek committed
386
								currentRequestId = data.id;
387
388
389
390
391
392
393
394
							} 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
395
								} else {
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
									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
415
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
416

417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
									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
435
								}
436
437
438
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
439
440
441
442
443
444
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
445
				}
Rohit Das's avatar
Rohit Das committed
446
447
448

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

452
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
453
454
455
456
457
458
459
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
460
			}
461
462
463
		} else {
			if (res !== null) {
				const error = await res.json();
464
465
466
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
467
					responseMessage.content = error.detail;
468
469
				} else {
					toast.error(error.error);
470
					responseMessage.content = error.error;
471
				}
472
473
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
474
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
475
476
			}

477
478
479
480
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
481
482
483
484
		}

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

486
487
488
489
490
		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
491
492
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
493
494
495
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
499
500
501
502
503
504
		let responseMessage = {
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
			role: 'assistant',
			content: '',
Timothy J. Baek's avatar
Timothy J. Baek committed
505
			model: model,
Timothy J. Baek's avatar
Timothy J. Baek committed
506
			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
Timothy J. Baek's avatar
Timothy J. Baek committed
507
		};
508

Timothy J. Baek's avatar
Timothy J. Baek committed
509
510
511
512
513
514
515
516
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}
517

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

Timothy J. Baek's avatar
Timothy J. Baek committed
520
521
522
523
524
525
526
527
528
529
530
531
532
		const res = await generateOpenAIChatCompletion(localStorage.token, {
			model: model,
			stream: true,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
				...messages
			]
				.filter((message) => message)
533
				.map((message, idx, arr) => ({
Timothy J. Baek's avatar
Timothy J. Baek committed
534
					role: message.role,
535
					...(message.files?.filter((file) => file.type === 'image').length > 0 ?? false
Timothy J. Baek's avatar
Timothy J. Baek committed
536
537
538
539
						? {
								content: [
									{
										type: 'text',
540
541
542
543
										text:
											arr.length - 1 !== idx
												? message.content
												: message?.raContent ?? message.content
Timothy J. Baek's avatar
Timothy J. Baek committed
544
545
546
547
548
549
550
551
552
553
554
									},
									...message.files
										.filter((file) => file.type === 'image')
										.map((file) => ({
											type: 'image_url',
											image_url: {
												url: file.url
											}
										}))
								]
						  }
555
556
557
558
						: {
								content:
									arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
						  })
Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
561
562
563
564
565
566
567
				})),
			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
		});
568

Timothy J. Baek's avatar
Timothy J. Baek committed
569
570
571
572
573
		if (res && res.ok) {
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
574

Timothy J. Baek's avatar
Timothy J. Baek committed
575
576
577
578
579
580
581
			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
582

Timothy J. Baek's avatar
Timothy J. Baek committed
583
584
585
586
587
588
589
590
591
				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;
592
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
593
594
595
596
597
598
599
600
601
								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;
								}
602
603
604
							}
						}
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
605
606
607
				} catch (error) {
					console.log(error);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
608

Timothy J. Baek's avatar
Timothy J. Baek committed
609
610
611
612
613
				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
614
615
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
616
617
618
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
619

620
621
622
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
623
			}
624

Timothy J. Baek's avatar
Timothy J. Baek committed
625
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
626
627
628
629
630
631
632
				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
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
			}
		} 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;
					}
649
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
650
651
652
			} else {
				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
653
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670

			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);
671
672
673
674
675
676
677
678
679
		}
	};

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

	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
680
		console.log('regenerateResponse');
681
682
683
684
685
686
687
		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
688
			await sendPrompt(userPrompt, userMessage.id);
689
690
691
692
		}
	};

	const generateChatTitle = async (_chatId, userPrompt) => {
693
		if ($settings.titleAutoGenerate ?? true) {
694
			const title = await generateTitle(localStorage.token, selectedModels[0], userPrompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
695
696
697

			if (title) {
				await setChatTitle(_chatId, title);
698
699
700
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
701
702
703
704
		}
	};

	const setChatTitle = async (_chatId, _title) => {
705
		if (_chatId === $chatId) {
706
707
			title = _title;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
708
709
710

		chat = await updateChatById(localStorage.token, _chatId, { title: _title });
		await chats.set(await getChatList(localStorage.token));
711
	};
712

713
714
715
716
717
718
719
720
721
	const getTags = async () => {
		return await getTagsById(localStorage.token, $chatId).catch(async (error) => {
			return [];
		});
	};

	const addTag = async (tagName) => {
		const res = await addTagById(localStorage.token, $chatId, tagName);
		tags = await getTags();
Timothy J. Baek's avatar
Timothy J. Baek committed
722
723

		chat = await updateChatById(localStorage.token, $chatId, {
Timothy J. Baek's avatar
Timothy J. Baek committed
724
			tags: tags
Timothy J. Baek's avatar
Timothy J. Baek committed
725
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
726
727

		_tags.set(await getAllChatTags(localStorage.token));
728
729
730
731
732
	};

	const deleteTag = async (tagName) => {
		const res = await deleteTagById(localStorage.token, $chatId, tagName);
		tags = await getTags();
Timothy J. Baek's avatar
Timothy J. Baek committed
733
734

		chat = await updateChatById(localStorage.token, $chatId, {
Timothy J. Baek's avatar
Timothy J. Baek committed
735
			tags: tags
Timothy J. Baek's avatar
Timothy J. Baek committed
736
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
737
738

		_tags.set(await getAllChatTags(localStorage.token));
739
740
	};

741
742
743
744
745
	onMount(async () => {
		if (!($settings.saveChatHistory ?? true)) {
			await goto('/');
		}
	});
746
747
748
749
750
751
752
753
</script>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
754
{#if loaded}
755
756
757
	<Navbar
		{title}
		shareEnabled={messages.length > 0}
758
759
760
761
762
763
		initNewChat={async () => {
			if (currentRequestId !== null) {
				await cancelChatCompletion(localStorage.token, currentRequestId);
				currentRequestId = null;
			}

764
765
			goto('/');
		}}
766
767
768
		{tags}
		{addTag}
		{deleteTag}
769
	/>
Timothy J. Baek's avatar
Timothy J. Baek committed
770
771
772
	<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">
Timothy J. Baek's avatar
Timothy J. Baek committed
773
774
775
776
				<ModelSelector
					bind:selectedModels
					disabled={messages.length > 0 && !selectedModels.includes('')}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
777
778
779
			</div>

			<div class=" h-full mt-10 mb-32 w-full flex flex-col">
780
				<Messages
781
					chatId={$chatId}
782
					{selectedModels}
Timothy J. Baek's avatar
Timothy J. Baek committed
783
					{selectedModelfiles}
Timothy J. Baek's avatar
Timothy J. Baek committed
784
					{processing}
785
786
787
					bind:history
					bind:messages
					bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
788
					bottomPadding={files.length > 0}
789
790
791
					{sendPrompt}
					{regenerateResponse}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
792
			</div>
793
794
		</div>

795
		<MessageInput
Timothy J. Baek's avatar
Timothy J. Baek committed
796
			bind:files
797
798
			bind:prompt
			bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
799
			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
800
801
802
803
			{messages}
			{submitPrompt}
			{stopResponse}
		/>
804
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
805
{/if}