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

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

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

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

	// let chatId = $page.params.id;
	let selectedModels = [''];
23
24
25
26
27
28
	let selectedModelfile = null;
	$: selectedModelfile =
		selectedModels.length === 1 &&
		$modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0]).length > 0
			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
			: null;
29
30
31

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

	let messages = [];
	let history = {
		messages: {},
		currentId: null
	};

	$: if (history.currentId !== null) {
		let _messages = [];

		let currentMessage = history.messages[history.currentId];
		while (currentMessage !== null) {
			_messages.unshift({ ...currentMessage });
			currentMessage =
				currentMessage.parentId !== null ? history.messages[currentMessage.parentId] : null;
		}
		messages = _messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
50
51
	} else {
		messages = [];
52
53
	}

54
55
	// onMount(async () => {
	// 	let chat = await loadChat();
56

57
58
59
60
61
62
63
	// 	await tick();
	// 	if (chat) {
	// 		loaded = true;
	// 	} else {
	// 		await goto('/');
	// 	}
	// });
64
65
66

	$: if ($page.params.id) {
		(async () => {
67
68
69
70
71
72
73
74
			let chat = await loadChat();

			await tick();
			if (chat) {
				loaded = true;
			} else {
				await goto('/');
			}
75
76
77
78
79
80
81
82
83
		})();
	}

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

	const loadChat = async () => {
		await chatId.set($page.params.id);
84
		const chat = await $db.getChatById($chatId);
85
86
87
88
89
90
91
92
93
94

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

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

96
97
98
99
100
101
102
103
104
105
106
			await settings.set({
				...$settings,
				system: chat.system ?? $settings.system,
				options: chat.options ?? $settings.options
			});
			autoScroll = true;

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

109
110
111
112
113
114
115
116
117
118
			return chat;
		} else {
			return null;
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
119
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
120
121
122
		await Promise.all(
			selectedModels.map(async (model) => {
				if (model.includes('gpt-')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
123
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
124
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
125
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
126
127
128
129
				}
			})
		);

130
		await chats.set(await $db.getChats());
131
132
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
		console.log('sendPromptOllama');
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
		let responseMessageId = uuidv4();
		let responseMessage = {
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
			role: 'assistant',
			content: '',
			model: model
		};

		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
154
155
		await tick();
		window.scrollTo({ top: document.body.scrollHeight });
156

Timothy J. Baek's avatar
Timothy J. Baek committed
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
		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)
					.map((message) => ({ role: message.role, content: message.content })),
				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
			})
		});

190
191
192
193
194
195
196
		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
197
198
199
			if (done || stopResponseFlag || _chatId !== $chatId) {
				responseMessage.done = true;
				messages = messages;
200
201
202
203
204
205
206
207
208
209
				break;
			}

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

				for (const line of lines) {
					if (line !== '') {
						console.log(line);
						let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
210
211
212
213
214

						if ('detail' in data) {
							throw data;
						}

215
						if (data.done == false) {
Timothy J. Baek's avatar
Timothy J. Baek committed
216
							if (responseMessage.content == '' && data.message.content == '\n') {
217
218
								continue;
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
219
								responseMessage.content += data.message.content;
220
221
222
223
								messages = messages;
							}
						} else {
							responseMessage.done = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
224
225
226
227
228
229
230
231
							responseMessage.context = data.context ?? null;
							responseMessage.info = {
								total_duration: data.total_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
							};
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
							messages = messages;
						}
					}
				}
			} catch (error) {
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
				}
				break;
			}

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

Timothy J. Baek's avatar
Timothy J. Baek committed
248
			await $db.updateChatById(_chatId, {
249
250
251
252
253
254
255
256
				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,
Anthony Cucci's avatar
Anthony Cucci committed
257
					top_p: $settings.top_p ?? undefined,
258
259
					num_ctx: $settings.num_ctx ?? undefined,
					...($settings.options ?? {})
260
261
				},
				messages: messages,
262
				history: history
263
264
265
266
267
268
269
270
271
272
			});
		}

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

		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
273
274
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
275
276
277
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
278
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
279
		if ($settings.OPENAI_API_KEY) {
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
			if (models) {
				let responseMessageId = uuidv4();

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

				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
				await tick();

303
304
305
306
307
308
				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
309
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
310
311
312
313
314
315
316
317
					},
					body: JSON.stringify({
						model: model,
						stream: true,
						messages: [
							$settings.system
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
318
										content: $settings.system
319
320
321
322
323
324
325
326
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
							.map((message) => ({ role: message.role, content: message.content })),
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
327
						num_ctx: $settings.num_ctx ?? undefined,
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
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
						frequency_penalty: $settings.repeat_penalty ?? undefined
					})
				});

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

				while (true) {
					const { value, done } = await reader.read();
					if (done || stopResponseFlag) {
						if (stopResponseFlag) {
							responseMessage.done = true;
							messages = messages;
						}

						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
378
					await $db.updateChatById(_chatId, {
379
380
381
382
383
384
385
386
						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,
Anthony Cucci's avatar
Anthony Cucci committed
387
							top_p: $settings.top_p ?? undefined,
388
389
							num_ctx: $settings.num_ctx ?? undefined,
							...($settings.options ?? {})
390
391
						},
						messages: messages,
392
						history: history
393
394
395
396
397
398
399
400
401
402
403
					});
				}

				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
404
405
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
406
407
408
409
410
411
				}
			}
		}
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
412
413
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('submitPrompt', _chatId);
414
415
416
417
418
419
420
421
422
423
424
425
426
427

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

			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
Timothy J. Baek's avatar
Timothy J. Baek committed
428
429
				content: userPrompt,
				files: files.length > 0 ? files : undefined
430
431
432
433
434
435
436
437
438
			};

			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
439
440
			await tick();
			if (messages.length == 1) {
441
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
442
					id: _chatId,
443
444
445
446
447
448
449
450
					title: 'New Chat',
					models: selectedModels,
					system: $settings.system ?? undefined,
					options: {
						seed: $settings.seed ?? undefined,
						temperature: $settings.temperature ?? undefined,
						repeat_penalty: $settings.repeat_penalty ?? undefined,
						top_k: $settings.top_k ?? undefined,
Anthony Cucci's avatar
Anthony Cucci committed
451
						top_p: $settings.top_p ?? undefined,
452
453
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
454
455
					},
					messages: messages,
456
					history: history
457
458
459
				});
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
460
461
462
			prompt = '';
			files = [];

463
464
465
466
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
467
			await sendPrompt(userPrompt, userMessageId, _chatId);
468
469
470
471
472
473
474
475
476
		}
	};

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

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

480
481
482
483
484
485
486
		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
487
			await sendPrompt(userPrompt, userMessage.id, _chatId);
488
489
490
491
		}
	};

	const generateChatTitle = async (_chatId, userPrompt) => {
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
		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
				})
507
			})
508
509
510
511
512
513
514
515
516
517
518
				.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;
				});
519

520
521
522
523
524
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
525
526
527
528
		}
	};

	const setChatTitle = async (_chatId, _title) => {
529
530
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
531
532
533
534
535
536
537
538
539
540
541
			title = _title;
		}
	};
</script>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
542
543
544
545
546
547
548
549
550
{#if loaded}
	<Navbar {title} />
	<div class="min-h-screen w-full flex justify-center">
		<div class=" py-2.5 flex flex-col justify-between w-full">
			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
				<ModelSelector bind:selectedModels disabled={messages.length > 0} />
			</div>

			<div class=" h-full mt-10 mb-32 w-full flex flex-col">
551
552
553
554
555
556
557
558
559
				<Messages
					{selectedModels}
					{selectedModelfile}
					bind:history
					bind:messages
					bind:autoScroll
					{sendPrompt}
					{regenerateResponse}
				/>
Timothy J. Baek's avatar
Timothy J. Baek committed
560
			</div>
561
562
		</div>

563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
		<MessageInput
			bind:prompt
			bind:autoScroll
			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? [
				{
					title: ['Help me study', 'vocabulary for a college entrance exam'],
					content: `Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
				},
				{
					title: ['Give me ideas', `for what to do with my kids' art`],
					content: `What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
				},
				{
					title: ['Tell me a fun fact', 'about the Roman Empire'],
					content: 'Tell me a random fun fact about the Roman Empire'
				},
				{
					title: ['Show me a code snippet', `of a website's sticky header`],
					content: `Show me a code snippet of a website's sticky header in CSS and JavaScript.`
				}
			]}
			{messages}
			{submitPrompt}
			{stopResponse}
		/>
588
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
589
{/if}