+page.svelte 22.2 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { v4 as uuidv4 } from 'uuid';
Jannik Streidl's avatar
Jannik Streidl committed
3
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
4

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
10
11
12
13
14
15
16
	import {
		models,
		modelfiles,
		user,
		settings,
		chats,
		chatId,
		config,
17
		WEBUI_NAME,
Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
		tags as _tags
	} from '$lib/stores';
20
	import { copyToClipboard, splitStream } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
21

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

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
38
	import Navbar from '$lib/components/layout/Navbar.svelte';
39
	import { RAGTemplate } from '$lib/utils/rag';
40
	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants';
41
	import { WEBUI_BASE_URL } from '$lib/constants';
42
43
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
44
	let processing = '';
45
	let messagesContainerElement: HTMLDivElement;
46
47
	let currentRequestId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
48
	let selectedModels = [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
49

50
51
52
53
54
55
	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;
56

57
58
59
60
61
62
63
64
65
66
67
	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 })
		};
	}, {});

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

Timothy J. Baek's avatar
Timothy J. Baek committed
71
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
72
	let prompt = '';
73
	let files = [];
74
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
	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
90
91
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
92
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
93

94
	onMount(async () => {
95
		await initNewChat();
96
97
98
99
100
101
	});

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

102
	const initNewChat = async () => {
103
104
105
106
		if (currentRequestId !== null) {
			await cancelChatCompletion(localStorage.token, currentRequestId);
			currentRequestId = null;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
107
		window.history.replaceState(history.state, '', `/`);
108
		await chatId.set('');
Timothy J. Baek's avatar
Timothy J. Baek committed
109

110
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
111

112
113
114
115
116
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
117
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
118
119
120
121
122
123
124
125
126
127

		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 = [''];
		}
128

Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131
132
		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

133
134
135
136
		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		settings.set({
			..._settings
		});
137
138
139

		const chatInput = document.getElementById('chat-textarea');
		setTimeout(() => chatInput?.focus(), 0);
Timothy J. Baek's avatar
Timothy J. Baek committed
140
141
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
142
	const scrollToBottom = () => {
143
		messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
Timothy J. Baek's avatar
Timothy J. Baek committed
144
145
	};

146
147
148
149
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
150
	const submitPrompt = async (userPrompt, _user = null) => {
151
152
		console.log('submitPrompt', $chatId);

Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
156
		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

157
158
159
160
161
		if (selectedModels.includes('')) {
			toast.error('Model not selected');
		} else if (messages.length != 0 && messages.at(-1).done != true) {
			// Response not done
			console.log('wait');
162
163
164
165
166
167
168
169
		} 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.`
			);
170
171
172
173
174
175
176
177
178
179
180
		} 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
181
				user: _user ?? undefined,
182
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
183
				files: files.length > 0 ? files : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
184
				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
			};

			// 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,
Timothy J. Baek's avatar
Timothy J. Baek committed
212
						tags: [],
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
						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);
		}
	};

232
233
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
234

Timothy J. Baek's avatar
Timothy J. Baek committed
235
		await Promise.all(
236
237
			selectedModels.map(async (modelId) => {
				const model = $models.filter((m) => m.id === modelId).at(0);
Timothy J. Baek's avatar
Timothy J. Baek committed
238

Timothy J. Baek's avatar
Timothy J. Baek committed
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
				if (model) {
					// Create response message
					let responseMessageId = uuidv4();
					let responseMessage = {
						parentId: parentId,
						id: responseMessageId,
						childrenIds: [],
						role: 'assistant',
						content: '',
						model: model.id,
						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
263

Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
267
268
					if (model?.external) {
						await sendPromptOpenAI(model, prompt, responseMessageId, _chatId);
					} else if (model) {
						await sendPromptOllama(model, prompt, responseMessageId, _chatId);
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
269
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
270
					toast.error(`Model ${modelId} not found`);
Timothy J. Baek's avatar
Timothy J. Baek committed
271
272
273
				}
			})
		);
274

Timothy J. Baek's avatar
Timothy J. Baek committed
275
		await chats.set(await getChatList(localStorage.token));
276
277
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
278
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
279
		model = model.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
280
		const responseMessage = history.messages[responseMessageId];
Timothy J. Baek's avatar
Timothy J. Baek committed
281

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

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
286
		scrollToBottom();
287

288
289
290
291
292
293
294
		const messagesBody = [
			$settings.system
				? {
						role: 'system',
						content: $settings.system
				  }
				: undefined,
Danny Liu's avatar
Danny Liu committed
295
			...messages
296
297
		]
			.filter((message) => message)
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
			.map((message, idx, arr) => {
				// Prepare the base message object
				const baseMessage = {
					role: message.role,
					content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content
				};

				// Extract and format image URLs if any exist
				const imageUrls = message.files
					?.filter((file) => file.type === 'image')
					.map((file) => file.url.slice(file.url.indexOf(',') + 1));

				// Add images array only if it contains elements
				if (imageUrls && imageUrls.length > 0) {
					baseMessage.images = imageUrls;
				}

				return baseMessage;
			});
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333

		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;
			}
		});

Timothy J. Baek's avatar
Timothy J. Baek committed
334
335
336
337
338
339
340
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

341
		const [res, controller] = await generateChatCompletion(localStorage.token, {
342
			model: model,
343
			messages: messagesBody,
344
345
346
			options: {
				...($settings.options ?? {})
			},
Zohaib Rauf's avatar
Zohaib Rauf committed
347
			format: $settings.requestFormat ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
348
			keep_alive: $settings.keepAlive ?? undefined,
349
			docs: docs.length > 0 ? docs : undefined
350
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
351

352
		if (res && res.ok) {
353
354
			console.log('controller', controller);

Rohit Das's avatar
Rohit Das committed
355
356
357
358
359
360
361
362
363
364
			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;
365
366
367
368
369
370
371
372

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

					currentRequestId = null;

Rohit Das's avatar
Rohit Das committed
373
374
					break;
				}
375

Rohit Das's avatar
Rohit Das committed
376
377
				try {
					let lines = value.split('\n');
378

Rohit Das's avatar
Rohit Das committed
379
380
381
382
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
383

Rohit Das's avatar
Rohit Das committed
384
385
386
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
387

388
389
390
391
392
393
394
395
396
397
398
							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
399
								} else {
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
									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
419
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
420

421
422
423
424
425
426
427
									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
428
												: `${model}`,
429
430
											{
												body: responseMessage.content,
431
												icon: selectedModelfile?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`
432
433
434
435
436
437
438
											}
										);
									}

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

									if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
441
										await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
442
443
										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
444
								}
445
446
447
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
448
449
450
451
452
453
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
454
				}
Rohit Das's avatar
Rohit Das committed
455
456

				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
457
					scrollToBottom();
458
				}
459
			}
460

461
			if ($chatId == _chatId) {
462
463
464
465
466
467
468
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
469
			}
470
471
472
		} else {
			if (res !== null) {
				const error = await res.json();
473
				console.log(error);
474
475
				if ('detail' in error) {
					toast.error(error.detail);
476
					responseMessage.content = error.detail;
477
478
				} else {
					toast.error(error.error);
479
					responseMessage.content = error.error;
480
				}
481
482
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
483
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
484
485
			}

486
487
488
489
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
490
491
492
493
		}

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

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

499
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
500
501
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
502
503
504
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
505
506
	const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => {
		const responseMessage = history.messages[responseMessageId];
Timothy J. Baek's avatar
Timothy J. Baek committed
507
		scrollToBottom();
508

Timothy J. Baek's avatar
Timothy J. Baek committed
509
510
511
512
513
514
515
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

516
517
		console.log(docs);

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
612
613
614
				if ($settings.notificationEnabled && !document.hasFocus()) {
					const notification = new Notification(`OpenAI ${model}`, {
						body: responseMessage.content,
615
						icon: `${WEBUI_BASE_URL}/static/favicon.png`
Timothy J. Baek's avatar
Timothy J. Baek committed
616
					});
Timothy J. Baek's avatar
Timothy J. Baek committed
617
618
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
619
620
621
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
622

Timothy J. Baek's avatar
Timothy J. Baek committed
623
				if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
624
					await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
625
626
627
					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
				}

628
				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
629
					scrollToBottom();
630
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
631
			}
632

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

			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
673
			scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
674
675
676
677
678
		}

		if (messages.length == 2) {
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await setChatTitle(_chatId, userPrompt);
679
		}
680
681
	};

682
683
684
685
686
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

687
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
688
		console.log('regenerateResponse');
689
690
691
		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
692

693
694
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
695

Timothy J. Baek's avatar
Timothy J. Baek committed
696
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
697
		}
698
	};
699

Timothy J. Baek's avatar
Timothy J. Baek committed
700
701
702
703
704
705
	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];
706
707
708
			responseMessage.done = false;
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
			const model = $models.filter((m) => m.id === responseMessage.model).at(0);

			if (model) {
				if (model?.external) {
					await sendPromptOpenAI(
						model,
						history.messages[responseMessage.parentId].content,
						responseMessage.id,
						_chatId
					);
				} else
					await sendPromptOllama(
						model,
						history.messages[responseMessage.parentId].content,
						responseMessage.id,
						_chatId
					);
Timothy J. Baek's avatar
Timothy J. Baek committed
726
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
727
728
		} else {
			toast.error(`Model ${modelId} not found`);
Timothy J. Baek's avatar
Timothy J. Baek committed
729
730
731
		}
	};

732
	const generateChatTitle = async (_chatId, userPrompt) => {
733
		if ($settings.titleAutoGenerate ?? true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
734
735
			const title = await generateTitle(
				localStorage.token,
736
737
				$settings?.titleGenerationPrompt ??
					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
738
				$settings?.titleAutoGenerateModel ?? selectedModels[0],
Timothy J. Baek's avatar
Timothy J. Baek committed
739
740
741
742
743
				userPrompt
			);

			if (title) {
				await setChatTitle(_chatId, title);
744
745
746
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
747
748
749
		}
	};

750
751
752
753
754
755
756
757
758
	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
759
760
761
762

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

		_tags.set(await getAllChatTags(localStorage.token));
765
766
767
768
769
	};

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

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

		_tags.set(await getAllChatTags(localStorage.token));
776
777
	};

778
	const setChatTitle = async (_chatId, _title) => {
779
		if (_chatId === $chatId) {
780
			title = _title;
781
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
782

783
784
785
786
		if ($settings.saveChatHistory ?? true) {
			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
			await chats.set(await getChatList(localStorage.token));
		}
787
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
788
789
</script>

790
791
<svelte:head>
	<title>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
792
793
794
		{title
			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
			: `${$WEBUI_NAME}`}
795
796
797
	</title>
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
798
<div class="h-screen max-h-[100dvh] w-full flex flex-col">
Timothy J. Baek's avatar
Timothy J. Baek committed
799
	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
Timothy J. Baek's avatar
Timothy J. Baek committed
800
801
	<div class="flex flex-col flex-auto">
		<div
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
802
			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
Timothy J. Baek's avatar
Timothy J. Baek committed
803
			id="messages-container"
804
			bind:this={messagesContainerElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
805
			on:scroll={(e) => {
806
807
808
				autoScroll =
					messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
					messagesContainerElement.clientHeight + 50;
Timothy J. Baek's avatar
Timothy J. Baek committed
809
810
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
811
812
813
814
815
			<div
				class="{$settings?.fullScreenMode ?? null
					? 'max-w-full'
					: 'max-w-2xl md:px-0'} mx-auto w-full px-4"
			>
816
				<ModelSelector bind:selectedModels />
Timothy J. Baek's avatar
Timothy J. Baek committed
817
818
			</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
819
			<div class=" h-full w-full flex flex-col py-8">
Timothy J. Baek's avatar
Timothy J. Baek committed
820
821
822
823
824
825
826
827
828
829
830
831
832
833
				<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
834
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
835

Timothy J. Baek's avatar
Timothy J. Baek committed
836
837
838
839
840
841
842
843
844
		<MessageInput
			bind:files
			bind:prompt
			bind:autoScroll
			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
			{messages}
			{submitPrompt}
			{stopResponse}
		/>
845
846
	</div>
</div>