+page.svelte 22.4 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, cancelChatCompletion } 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';
32
	import { queryCollection, queryDoc } 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
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
156
157
158
159
160
	const scrollToBottom = () => {
		const element = document.getElementById('messages-container');
		element.scrollTop = element.scrollHeight;
	};

161
162
163
164
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
165
	const submitPrompt = async (userPrompt, _user = null) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169
170
171
172
		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
173
174
175
176
177
178
179
180
		} 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
181
182
183
184
185
186
187
188
189
190
191
		} 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
192
				user: _user ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
193
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
194
				files: files.length > 0 ? files : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
195
				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
Timothy J. Baek's avatar
Timothy J. Baek committed
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
226
227
228
229
230
			};

			// 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();
231
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
232
233
234
235
236
237
238
239
240
			// Reset chat input textarea
			prompt = '';
			files = [];

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

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

		const docs = messages
			.filter((message) => message?.files ?? null)
246
247
248
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
251
252
			.flat(1);

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

256
257
			let relevantContexts = await Promise.all(
				docs.map(async (doc) => {
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
					if (doc.type === 'collection') {
						return await queryCollection(localStorage.token, doc.collection_names, query, 4).catch(
							(error) => {
								console.log(error);
								return null;
							}
						);
					} else {
						return await queryDoc(localStorage.token, doc.collection_name, query, 4).catch(
							(error) => {
								console.log(error);
								return null;
							}
						);
					}
273
274
275
				})
			);
			relevantContexts = relevantContexts.filter((context) => context);
Timothy J. Baek's avatar
Timothy J. Baek committed
276

277
278
279
			const contextString = relevantContexts.reduce((a, context, i, arr) => {
				return `${a}${context.documents.join(' ')}\n`;
			}, '');
Timothy J. Baek's avatar
Timothy J. Baek committed
280

281
			console.log(contextString);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
282

Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
285
286
287
			history.messages[parentId].raContent = await RAGTemplate(
				localStorage.token,
				contextString,
				query
			);
288
			history.messages[parentId].contexts = relevantContexts;
Timothy J. Baek's avatar
Timothy J. Baek committed
289
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
290
			processing = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
291
292
		}

293
294
		await Promise.all(
			selectedModels.map(async (model) => {
295
				console.log(model);
Timothy J. Baek's avatar
Timothy J. Baek committed
296
297
				const modelTag = $models.filter((m) => m.name === model).at(0);

Timothy J. Baek's avatar
Timothy J. Baek committed
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
				// Create response message
				let responseMessageId = uuidv4();
				let responseMessage = {
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
					role: 'assistant',
					content: '',
					model: model,
					timestamp: Math.floor(Date.now() / 1000) // Unix epoch
				};

				// Add message to history and Set currentId to messageId
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;

				// Append messageId to childrenIds of parent message
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
322
				if (modelTag?.external) {
Timothy J. Baek's avatar
Timothy J. Baek committed
323
					await sendPromptOpenAI(model, prompt, responseMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
324
				} else if (modelTag) {
Timothy J. Baek's avatar
Timothy J. Baek committed
325
					await sendPromptOllama(model, prompt, responseMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
326
327
				} else {
					toast.error(`Model ${model} not found`);
328
329
330
331
				}
			})
		);

Timothy J. Baek's avatar
Timothy J. Baek committed
332
		await chats.set(await getChatList(localStorage.token));
333
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
334

Timothy J. Baek's avatar
Timothy J. Baek committed
335
336
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
		const responseMessage = history.messages[responseMessageId];
337

Timothy J. Baek's avatar
Timothy J. Baek committed
338
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
339
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
340
341

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
342
		scrollToBottom();
343

344
345
346
347
348
349
350
		const messagesBody = [
			$settings.system
				? {
						role: 'system',
						content: $settings.system
				  }
				: undefined,
351
			...messages.filter((message) => !message.deleted)
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
		]
			.filter((message) => message)
			.map((message, idx, arr) => ({
				role: message.role,
				content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content,
				...(message.files && {
					images: message.files
						.filter((file) => file.type === 'image')
						.map((file) => file.url.slice(file.url.indexOf(',') + 1))
				})
			}));

		let lastImageIndex = -1;

		// Find the index of the last object with images
		messagesBody.forEach((item, index) => {
			if (item.images) {
				lastImageIndex = index;
			}
		});

		// Remove images from all but the last one
		messagesBody.forEach((item, index) => {
			if (index !== lastImageIndex) {
				delete item.images;
			}
		});

380
		const [res, controller] = await generateChatCompletion(localStorage.token, {
381
			model: model,
382
			messages: messagesBody,
383
384
385
			options: {
				...($settings.options ?? {})
			},
Zohaib Rauf's avatar
Zohaib Rauf committed
386
387
			format: $settings.requestFormat ?? undefined,
			keep_alive: $settings.keepAlive ?? undefined
388
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
389

390
		if (res && res.ok) {
391
392
			console.log('controller', controller);

Rohit Das's avatar
Rohit Das committed
393
394
395
396
397
398
399
400
401
402
			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;
403
404
405

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
Timothy J. Baek's avatar
Timothy J. Baek committed
406
						await cancelChatCompletion(localStorage.token, currentRequestId);
407
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
408
409

					currentRequestId = null;
410

Rohit Das's avatar
Rohit Das committed
411
412
					break;
				}
413

Rohit Das's avatar
Rohit Das committed
414
415
				try {
					let lines = value.split('\n');
416

Rohit Das's avatar
Rohit Das committed
417
418
419
420
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
421

Rohit Das's avatar
Rohit Das committed
422
423
424
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
425

426
427
							if ('id' in data) {
								console.log(data);
Timothy J. Baek's avatar
Timothy J. Baek committed
428
								currentRequestId = data.id;
429
430
431
432
433
434
435
436
							} 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
437
								} else {
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
									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
457
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
458

459
460
461
462
463
464
465
									if ($settings.notificationEnabled && !document.hasFocus()) {
										const notification = new Notification(
											selectedModelfile
												? `${
														selectedModelfile.title.charAt(0).toUpperCase() +
														selectedModelfile.title.slice(1)
												  }`
Timothy J. Baek's avatar
Timothy J. Baek committed
466
												: `${model}`,
467
468
469
470
471
472
473
474
475
476
											{
												body: responseMessage.content,
												icon: selectedModelfile?.imageUrl ?? '/favicon.png'
											}
										);
									}

									if ($settings.responseAutoCopy) {
										copyToClipboard(responseMessage.content);
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
477
478

									if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
479
										await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
480
481
										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
482
								}
483
484
485
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
486
487
488
489
490
491
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
492
				}
Rohit Das's avatar
Rohit Das committed
493
494

				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
495
					scrollToBottom();
496
				}
497
			}
498

499
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
500
501
502
503
504
505
506
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
507
			}
508
509
510
		} else {
			if (res !== null) {
				const error = await res.json();
511
512
513
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
514
					responseMessage.content = error.detail;
515
516
				} else {
					toast.error(error.error);
517
					responseMessage.content = error.error;
518
				}
519
520
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
521
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
522
523
			}

524
525
526
527
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
528
529
530
531
		}

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

533
		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
534
			scrollToBottom();
535
536
537
		}

		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
538
539
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
540
541
542
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
543
544
	const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => {
		const responseMessage = history.messages[responseMessageId];
545

Timothy J. Baek's avatar
Timothy J. Baek committed
546
		scrollToBottom();
547

Timothy J. Baek's avatar
Timothy J. Baek committed
548
549
550
551
552
553
554
555
556
557
		const res = await generateOpenAIChatCompletion(localStorage.token, {
			model: model,
			stream: true,
			messages: [
				$settings.system
					? {
							role: 'system',
							content: $settings.system
					  }
					: undefined,
558
				...messages.filter((message) => !message.deleted)
Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
			]
				.filter((message) => message)
561
				.map((message, idx, arr) => ({
Timothy J. Baek's avatar
Timothy J. Baek committed
562
					role: message.role,
563
					...(message.files?.filter((file) => file.type === 'image').length > 0 ?? false
Timothy J. Baek's avatar
Timothy J. Baek committed
564
565
566
567
						? {
								content: [
									{
										type: 'text',
568
569
570
571
										text:
											arr.length - 1 !== idx
												? message.content
												: message?.raContent ?? message.content
Timothy J. Baek's avatar
Timothy J. Baek committed
572
573
574
575
576
577
578
579
580
581
582
									},
									...message.files
										.filter((file) => file.type === 'image')
										.map((file) => ({
											type: 'image_url',
											image_url: {
												url: file.url
											}
										}))
								]
						  }
583
584
585
586
						: {
								content:
									arr.length - 1 !== idx ? message.content : message?.raContent ?? message.content
						  })
Timothy J. Baek's avatar
Timothy J. Baek committed
587
588
589
590
591
592
593
594
595
				})),
			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
		});
596

Timothy J. Baek's avatar
Timothy J. Baek committed
597
598
599
600
601
		if (res && res.ok) {
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
602

Timothy J. Baek's avatar
Timothy J. Baek committed
603
604
605
606
607
608
609
			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
610

Timothy J. Baek's avatar
Timothy J. Baek committed
611
612
613
614
615
616
617
618
619
				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;
620
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
621
622
623
624
625
626
627
628
629
								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;
								}
630
631
632
							}
						}
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
633
634
635
				} catch (error) {
					console.log(error);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
636

Timothy J. Baek's avatar
Timothy J. Baek committed
637
638
639
640
641
				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
642
643
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
644
645
646
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
647

Timothy J. Baek's avatar
Timothy J. Baek committed
648
				if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
649
					await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
650
651
652
					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
				}

653
				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
654
					scrollToBottom();
655
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
656
			}
657

Timothy J. Baek's avatar
Timothy J. Baek committed
658
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
659
660
661
662
663
664
665
				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
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
			}
		} 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;
					}
682
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
683
684
685
			} else {
				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
686
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
687
688
689
690
691
692
693
694
695
696
697

			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) {
Timothy J. Baek's avatar
Timothy J. Baek committed
698
			scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
699
700
701
702
703
		}

		if (messages.length == 2) {
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await setChatTitle(_chatId, userPrompt);
704
705
706
707
708
709
710
711
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
712
713
714
715
716
717
	const continueGeneration = async () => {
		console.log('continueGeneration');
		const _chatId = JSON.parse(JSON.stringify($chatId));

		if (messages.length != 0 && messages.at(-1).done == true) {
			const responseMessage = history.messages[history.currentId];
718
719
720
			responseMessage.done = false;
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
721
722
723
			const modelTag = $models.filter((m) => m.name === responseMessage.model).at(0);

			if (modelTag?.external) {
Timothy J. Baek's avatar
Timothy J. Baek committed
724
725
726
727
728
729
				await sendPromptOpenAI(
					responseMessage.model,
					history.messages[responseMessage.parentId].content,
					responseMessage.id,
					_chatId
				);
Timothy J. Baek's avatar
Timothy J. Baek committed
730
			} else if (modelTag) {
Timothy J. Baek's avatar
Timothy J. Baek committed
731
732
733
734
735
736
				await sendPromptOllama(
					responseMessage.model,
					history.messages[responseMessage.parentId].content,
					responseMessage.id,
					_chatId
				);
Timothy J. Baek's avatar
Timothy J. Baek committed
737
738
739
740
741
742
			} else {
				toast.error(`Model ${model} not found`);
			}
		}
	};

743
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
744
		console.log('regenerateResponse');
745
746
747
748
749
750
751
		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
752
			await sendPrompt(userPrompt, userMessage.id);
753
754
755
756
		}
	};

	const generateChatTitle = async (_chatId, userPrompt) => {
757
		if ($settings.titleAutoGenerate ?? true) {
758
			const title = await generateTitle(localStorage.token, selectedModels[0], userPrompt);
Timothy J. Baek's avatar
Timothy J. Baek committed
759
760
761

			if (title) {
				await setChatTitle(_chatId, title);
762
763
764
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
765
766
767
768
		}
	};

	const setChatTitle = async (_chatId, _title) => {
769
		if (_chatId === $chatId) {
770
771
			title = _title;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
772
773
774

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

777
778
779
780
781
782
783
784
785
	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
786
787

		chat = await updateChatById(localStorage.token, $chatId, {
Timothy J. Baek's avatar
Timothy J. Baek committed
788
			tags: tags
Timothy J. Baek's avatar
Timothy J. Baek committed
789
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
790
791

		_tags.set(await getAllChatTags(localStorage.token));
792
793
794
795
796
	};

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

		chat = await updateChatById(localStorage.token, $chatId, {
Timothy J. Baek's avatar
Timothy J. Baek committed
799
			tags: tags
Timothy J. Baek's avatar
Timothy J. Baek committed
800
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
801
802

		_tags.set(await getAllChatTags(localStorage.token));
803
804
	};

805
806
807
808
809
	onMount(async () => {
		if (!($settings.saveChatHistory ?? true)) {
			await goto('/');
		}
	});
810
811
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
812
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
813
	<div class="min-h-screen max-h-screen w-full flex flex-col">
Timothy J. Baek's avatar
Timothy J. Baek committed
814
815
816
817
818
819
820
821
		<Navbar
			{title}
			shareEnabled={messages.length > 0}
			initNewChat={async () => {
				if (currentRequestId !== null) {
					await cancelChatCompletion(localStorage.token, currentRequestId);
					currentRequestId = null;
				}
822

Timothy J. Baek's avatar
Timothy J. Baek committed
823
824
825
826
827
828
				goto('/');
			}}
			{tags}
			{addTag}
			{deleteTag}
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
829
830
831
832
833
834
835
836
		<div class="flex flex-col flex-auto">
			<div
				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
				id="messages-container"
				on:scroll={(e) => {
					autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
837
838
839
840
841
842
843
844
845
846
847
				<div
					class="{$settings?.fullScreenMode ?? null
						? 'max-w-full'
						: 'max-w-2xl md:px-0'} mx-auto w-full px-4"
				>
					<ModelSelector
						bind:selectedModels
						disabled={messages.length > 0 && !selectedModels.includes('')}
					/>
				</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
848
				<div class=" h-full w-full flex flex-col py-8">
Timothy J. Baek's avatar
Timothy J. Baek committed
849
850
851
852
853
854
855
856
857
858
859
860
861
862
					<Messages
						chatId={$chatId}
						{selectedModels}
						{selectedModelfiles}
						{processing}
						bind:history
						bind:messages
						bind:autoScroll
						bottomPadding={files.length > 0}
						{sendPrompt}
						{continueGeneration}
						{regenerateResponse}
					/>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
863
864
			</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
865
866
867
868
869
870
871
872
873
874
			<MessageInput
				bind:files
				bind:prompt
				bind:autoScroll
				suggestionPrompts={selectedModelfile?.suggestionPrompts ??
					$config.default_prompt_suggestions}
				{messages}
				{submitPrompt}
				{stopResponse}
			/>
875
876
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
877
{/if}