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

Ased Mammad's avatar
Ased Mammad committed
5
	import { onMount, tick, getContext } from 'svelte';
6
	import { goto } from '$app/navigation';
7
	import { page } from '$app/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
8
9
10
11
12
13
14
15
	import {
		models,
		modelfiles,
		user,
		settings,
		chats,
		chatId,
		config,
16
		WEBUI_NAME,
Timothy J. Baek's avatar
Timothy J. Baek committed
17
		tags as _tags,
18
19
		showSidebar,
		type Model
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	} from '$lib/stores';
Brandon Hulston's avatar
Brandon Hulston committed
21
	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils';
22

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

36
37
38
	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import Navbar from '$lib/components/layout/Navbar.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
39

Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
42
43
44
45
	import {
		LITELLM_API_BASE_URL,
		OPENAI_API_BASE_URL,
		OLLAMA_API_BASE_URL,
		WEBUI_BASE_URL
	} from '$lib/constants';
46
	import { createOpenAITextStream } from '$lib/apis/streaming';
47

Ased Mammad's avatar
Ased Mammad committed
48
49
	const i18n = getContext('i18n');

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

52
53
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
54
	let processing = '';
55
	let messagesContainerElement: HTMLDivElement;
Timothy J. Baek's avatar
Timothy J. Baek committed
56
57
	let currentRequestId = null;

58
	// let chatId = $page.params.id;
59
	let showModelSelector = true;
60
	let selectedModels = [''];
61
	let atSelectedModel: Model | undefined;
Timothy J. Baek's avatar
Timothy J. Baek committed
62

63
	let selectedModelfile = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
64

65
66
67
68
69
	$: selectedModelfile =
		selectedModels.length === 1 &&
		$modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0]).length > 0
			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
			: null;
70

Timothy J. Baek's avatar
Timothy J. Baek committed
71
72
73
74
75
76
77
78
79
80
81
	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 })
		};
	}, {});

82
	let chat = null;
83
	let tags = [];
84

85
86
	let title = '';
	let prompt = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
87
	let files = [];
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

	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
105
106
	} else {
		messages = [];
107
108
109
110
	}

	$: if ($page.params.id) {
		(async () => {
111
112
			if (await loadChat()) {
				await tick();
113
				loaded = true;
114

115
				window.setTimeout(() => scrollToBottom(), 0);
116
117
				const chatInput = document.getElementById('chat-textarea');
				chatInput?.focus();
118
119
120
			} else {
				await goto('/');
			}
121
122
123
124
125
126
127
128
129
		})();
	}

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

	const loadChat = async () => {
		await chatId.set($page.params.id);
130
131
		chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
			await goto('/');
132
			return null;
133
134
135
		});

		if (chat) {
136
			tags = await getTags();
137
138
139
140
141
142
143
144
			const chatContent = chat.chat;

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

				selectedModels =
					(chatContent?.models ?? undefined) !== undefined
						? chatContent.models
Brandon Hulston's avatar
Brandon Hulston committed
145
						: [chatContent.models ?? ''];
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
				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;
			}
170
171
172
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
	const scrollToBottom = async () => {
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
175
176
177
		if (messagesContainerElement) {
			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
	};

180
181
182
183
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
184
	const submitPrompt = async (userPrompt, _user = null) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
185
186
187
		console.log('submitPrompt', $chatId);

		if (selectedModels.includes('')) {
Ased Mammad's avatar
Ased Mammad committed
188
			toast.error($i18n.t('Model not selected'));
Timothy J. Baek's avatar
Timothy J. Baek committed
189
190
191
		} 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
192
193
194
195
196
197
198
199
		} 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
200
201
202
203
204
205
206
207
208
209
210
		} 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
211
				user: _user ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
212
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
213
				files: files.length > 0 ? files : undefined,
214
215
				timestamp: Math.floor(Date.now() / 1000), // Unix epoch
				models: selectedModels
Timothy J. Baek's avatar
Timothy J. Baek committed
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
			};

			// 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,
235
						title: $i18n.t('New Chat'),
Timothy J. Baek's avatar
Timothy J. Baek committed
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
						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();
251
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
254
255
256
257
258
259
			// Reset chat input textarea
			prompt = '';
			files = [];

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

	const sendPrompt = async (prompt, parentId, modelId = null) => {
262
		const _chatId = JSON.parse(JSON.stringify($chatId));
Timothy J. Baek's avatar
Timothy J. Baek committed
263

264
		await Promise.all(
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
			(modelId
				? [modelId]
				: atSelectedModel !== undefined
				? [atSelectedModel.id]
				: selectedModels
			).map(async (modelId) => {
				console.log('modelId', modelId);
				const model = $models.filter((m) => m.id === modelId).at(0);

				if (model) {
					// If there are image files, check if model is vision capable
					const hasImages = messages.some((message) =>
						message.files?.some((file) => file.type === 'image')
					);
					if (hasImages && !(model.custom_info?.params.vision_capable ?? true)) {
						toast.error(
							$i18n.t('Model {{modelName}} is not vision capable', {
								modelName: model.custom_info?.name ?? model.name ?? model.id
							})
284
						);
285
					}
286

287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
					// Create response message
					let responseMessageId = uuidv4();
					let responseMessage = {
						parentId: parentId,
						id: responseMessageId,
						childrenIds: [],
						role: 'assistant',
						content: '',
						model: model.id,
						modelName: model.custom_info?.name ?? model.name ?? 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
310
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
311

312
313
314
315
					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
316
					}
317
318
				} else {
					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
319
				}
320
			})
321
322
		);

Timothy J. Baek's avatar
Timothy J. Baek committed
323
		await chats.set(await getChatList(localStorage.token));
324
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
325

Timothy J. Baek's avatar
Timothy J. Baek committed
326
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
327
		model = model.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
328
		const responseMessage = history.messages[responseMessageId];
329

Timothy J. Baek's avatar
Timothy J. Baek committed
330
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
331
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
332
333

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
334
		scrollToBottom();
335

336
337
338
339
340
341
342
		const messagesBody = [
			$settings.system
				? {
						role: 'system',
						content: $settings.system
				  }
				: undefined,
Danny Liu's avatar
Danny Liu committed
343
			...messages
344
345
		]
			.filter((message) => message)
Timothy J. Baek's avatar
Timothy J. Baek committed
346
347
348
349
350
351
352
353
354
355
356
357
358
			.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
359
				if (imageUrls && imageUrls.length > 0 && message.role === 'user') {
Timothy J. Baek's avatar
Timothy J. Baek committed
360
361
362
363
364
					baseMessage.images = imageUrls;
				}

				return baseMessage;
			});
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381

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

382
383
384
385
386
387
388
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

389
		const [res, controller] = await generateChatCompletion(localStorage.token, {
390
			model: model,
391
			messages: messagesBody,
392
			options: {
393
394
395
396
397
398
399
				...($settings.options ?? {}),
				stop:
					$settings?.options?.stop ?? undefined
						? $settings.options.stop.map((str) =>
								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
						  )
						: undefined
400
			},
Zohaib Rauf's avatar
Zohaib Rauf committed
401
			format: $settings.requestFormat ?? undefined,
402
			keep_alive: $settings.keepAlive ?? undefined,
403
404
			docs: docs.length > 0 ? docs : undefined,
			citations: docs.length > 0
405
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
406

407
		if (res && res.ok) {
408
409
			console.log('controller', controller);

Rohit Das's avatar
Rohit Das committed
410
411
412
413
414
415
416
417
418
419
			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;
420
421
422

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
Timothy J. Baek's avatar
Timothy J. Baek committed
423
						await cancelOllamaRequest(localStorage.token, currentRequestId);
424
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
425
426

					currentRequestId = null;
427

Rohit Das's avatar
Rohit Das committed
428
429
					break;
				}
430

Rohit Das's avatar
Rohit Das committed
431
432
				try {
					let lines = value.split('\n');
433

Rohit Das's avatar
Rohit Das committed
434
435
436
437
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
438

439
440
441
442
443
							if ('citations' in data) {
								responseMessage.citations = data.citations;
								continue;
							}

Rohit Das's avatar
Rohit Das committed
444
445
446
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
447

448
449
							if ('id' in data) {
								console.log(data);
Timothy J. Baek's avatar
Timothy J. Baek committed
450
								currentRequestId = data.id;
451
452
453
454
455
456
457
458
							} 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
459
								} else {
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
									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
479
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
480

481
482
483
484
485
486
487
									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
488
												: `${model}`,
489
490
											{
												body: responseMessage.content,
491
												icon: selectedModelfile?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`
492
493
494
495
496
497
498
											}
										);
									}

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

									if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
501
										await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
502
503
										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
504
								}
505
506
507
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
508
509
510
511
512
513
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
514
				}
Rohit Das's avatar
Rohit Das committed
515
516

				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
517
					scrollToBottom();
518
				}
519
			}
520

521
			if ($chatId == _chatId) {
Timothy J. Baek's avatar
Timothy J. Baek committed
522
523
524
525
526
527
528
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
529
			}
530
531
532
		} else {
			if (res !== null) {
				const error = await res.json();
533
534
535
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
536
					responseMessage.content = error.detail;
537
538
				} else {
					toast.error(error.error);
539
					responseMessage.content = error.error;
540
				}
541
			} else {
Ased Mammad's avatar
Ased Mammad committed
542
543
544
545
546
547
				toast.error(
					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: 'Ollama' })
				);
				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
					provider: 'Ollama'
				});
548
549
			}

550
			responseMessage.error = true;
Ased Mammad's avatar
Ased Mammad committed
551
552
553
			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
				provider: 'Ollama'
			});
554
555
			responseMessage.done = true;
			messages = messages;
556
557
558
559
		}

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

561
		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
562
			scrollToBottom();
563
564
565
		}

		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
566
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
567
568
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
569
570
571
		}
	};

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

575
576
577
578
579
580
581
582
583
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

		console.log(docs);

Timothy J. Baek's avatar
Timothy J. Baek committed
584
585
		scrollToBottom();

586
587
588
589
590
591
592
593
		try {
			const [res, controller] = await generateOpenAIChatCompletion(
				localStorage.token,
				{
					model: model.id,
					stream: true,
					messages: [
						$settings.system
Timothy J. Baek's avatar
Timothy J. Baek committed
594
							? {
595
596
									role: 'system',
									content: $settings.system
Timothy J. Baek's avatar
Timothy J. Baek committed
597
							  }
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
							: undefined,
						...messages
					]
						.filter((message) => message)
						.map((message, idx, arr) => ({
							role: message.role,
							...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
							message.role === 'user'
								? {
										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
							? $settings.options.stop.map((str) =>
									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
							  )
							: 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,
					docs: docs.length > 0 ? docs : undefined,
					citations: docs.length > 0
				},
				model?.source?.toLowerCase() === 'litellm'
					? `${LITELLM_API_BASE_URL}/v1`
					: `${OPENAI_API_BASE_URL}`
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
651

652
653
			// Wait until history/message have been updated
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
654

655
			scrollToBottom();
656

657
658
			if (res && res.ok && res.body) {
				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
659

660
661
662
663
664
				for await (const update of textStream) {
					const { value, done, citations, error } = update;
					if (error) {
						await handleOpenAIError(error, null, model, responseMessage);
						break;
665
					}
666
667
668
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;
669

670
671
672
						if (stopResponseFlag) {
							controller.abort('User: Stop Response');
						}
673

674
675
						break;
					}
676

677
678
679
680
					if (citations) {
						responseMessage.citations = citations;
						continue;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
681

682
683
684
685
686
687
					if (responseMessage.content == '' && value == '\n') {
						continue;
					} else {
						responseMessage.content += value;
						messages = messages;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
688

689
690
691
692
693
694
					if ($settings.notificationEnabled && !document.hasFocus()) {
						const notification = new Notification(`OpenAI ${model}`, {
							body: responseMessage.content,
							icon: `${WEBUI_BASE_URL}/static/favicon.png`
						});
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
695

696
697
698
					if ($settings.responseAutoCopy) {
						copyToClipboard(responseMessage.content);
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
699

700
701
702
703
					if ($settings.responseAutoPlayback) {
						await tick();
						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
					}
704

705
706
707
					if (autoScroll) {
						scrollToBottom();
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
708
				}
709
710
711
712
713
714
715
716

				if ($chatId == _chatId) {
					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
717
					}
718
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
719
			} else {
720
				await handleOpenAIError(null, res, model, responseMessage);
721
			}
722
723
		} catch (error) {
			await handleOpenAIError(error, null, model, responseMessage);
Timothy J. Baek's avatar
Timothy J. Baek committed
724
725
726
727
728
729
		}

		stopResponseFlag = false;
		await tick();

		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
730
			scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
731
732
733
734
		}

		if (messages.length == 2) {
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
735

Timothy J. Baek's avatar
Timothy J. Baek committed
736
737
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
738
739
		}
	};
740

741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
	const handleOpenAIError = async (error, res: Response | null, model, responseMessage) => {
		let errorMessage = '';
		let innerError;

		if (error) {
			innerError = error;
		} else if (res !== null) {
			innerError = await res.json();
		}
		console.error(innerError);
		if ('detail' in innerError) {
			toast.error(innerError.detail);
			errorMessage = innerError.detail;
		} else if ('error' in innerError) {
			if ('message' in innerError.error) {
				toast.error(innerError.error.message);
				errorMessage = innerError.error.message;
			} else {
				toast.error(innerError.error);
				errorMessage = innerError.error;
			}
		} else if ('message' in innerError) {
			toast.error(innerError.message);
			errorMessage = innerError.message;
		}

		responseMessage.error = true;
		responseMessage.content =
			$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
770
				provider: model.custom_info?.name ?? model.name ?? model.id
771
772
773
774
775
776
777
778
			}) +
			'\n' +
			errorMessage;
		responseMessage.done = true;

		messages = messages;
	};

779
780
781
782
783
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
784
	const regenerateResponse = async (message) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
785
786
		console.log('regenerateResponse');

Timothy J. Baek's avatar
Timothy J. Baek committed
787
788
		if (messages.length != 0) {
			let userMessage = history.messages[message.parentId];
Timothy J. Baek's avatar
Timothy J. Baek committed
789
790
			let userPrompt = userMessage.content;

Timothy J. Baek's avatar
Timothy J. Baek committed
791
792
793
794
795
			if ((userMessage?.models ?? [...selectedModels]).length == 1) {
				await sendPrompt(userPrompt, userMessage.id);
			} else {
				await sendPrompt(userPrompt, userMessage.id, message.model);
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
796
797
798
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
799
800
801
802
803
804
	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];
805
806
807
			responseMessage.done = false;
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
			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
825
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
826
		} else {
Ased Mammad's avatar
Ased Mammad committed
827
			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
Timothy J. Baek's avatar
Timothy J. Baek committed
828
829
830
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
831
832
833
	const generateChatTitle = async (userPrompt) => {
		if ($settings?.title?.auto ?? true) {
			const model = $models.find((model) => model.id === selectedModels[0]);
834

Timothy J. Baek's avatar
Timothy J. Baek committed
835
836
837
838
839
			const titleModelId =
				model?.external ?? false
					? $settings?.title?.modelExternal ?? selectedModels[0]
					: $settings?.title?.model ?? selectedModels[0];
			const titleModel = $models.find((model) => model.id === titleModelId);
840

Timothy J. Baek's avatar
Timothy J. Baek committed
841
			console.log(titleModel);
842
843
			const title = await generateTitle(
				localStorage.token,
Timothy J. Baek's avatar
Timothy J. Baek committed
844
				$settings?.title?.prompt ??
Ased Mammad's avatar
Ased Mammad committed
845
846
847
					$i18n.t(
						"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}}',
Timothy J. Baek's avatar
Timothy J. Baek committed
848
849
850
				titleModelId,
				userPrompt,
				titleModel?.external ?? false
851
					? titleModel?.source?.toLowerCase() === 'litellm'
Timothy J. Baek's avatar
Timothy J. Baek committed
852
853
854
						? `${LITELLM_API_BASE_URL}/v1`
						: `${OPENAI_API_BASE_URL}`
					: `${OLLAMA_API_BASE_URL}/v1`
855
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
856

Timothy J. Baek's avatar
Timothy J. Baek committed
857
			return title;
858
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
859
			return `${userPrompt}`;
860
861
862
863
		}
	};

	const setChatTitle = async (_chatId, _title) => {
864
		if (_chatId === $chatId) {
865
866
			title = _title;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
867

Timothy J. Baek's avatar
Timothy J. Baek committed
868
869
870
871
		if ($settings.saveChatHistory ?? true) {
			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
			await chats.set(await getChatList(localStorage.token));
		}
872
	};
873

874
875
876
877
878
879
880
881
882
	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
883
884

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

		_tags.set(await getAllChatTags(localStorage.token));
889
890
891
892
893
	};

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

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

		_tags.set(await getAllChatTags(localStorage.token));
900
901
	};

902
903
904
905
906
	onMount(async () => {
		if (!($settings.saveChatHistory ?? true)) {
			await goto('/');
		}
	});
907
908
</script>

909
<svelte:head>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
910
911
912
913
914
	<title>
		{title
			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
			: `${$WEBUI_NAME}`}
	</title>
915
916
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
917
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
918
919
	<div
		class="min-h-screen max-h-screen {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
920
			? 'md:max-w-[calc(100%-260px)]'
Timothy J. Baek's avatar
Timothy J. Baek committed
921
			: ''} w-full max-w-full flex flex-col"
Timothy J. Baek's avatar
Timothy J. Baek committed
922
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
923
924
		<Navbar
			{title}
Timothy J. Baek's avatar
Timothy J. Baek committed
925
			{chat}
Timothy J. Baek's avatar
Timothy J. Baek committed
926
927
			bind:selectedModels
			bind:showModelSelector
Timothy J. Baek's avatar
Timothy J. Baek committed
928
929
930
			shareEnabled={messages.length > 0}
			initNewChat={async () => {
				if (currentRequestId !== null) {
Timothy J. Baek's avatar
Timothy J. Baek committed
931
					await cancelOllamaRequest(localStorage.token, currentRequestId);
Timothy J. Baek's avatar
Timothy J. Baek committed
932
933
					currentRequestId = null;
				}
934

Timothy J. Baek's avatar
Timothy J. Baek committed
935
936
937
				goto('/');
			}}
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
938
939
		<div class="flex flex-col flex-auto">
			<div
Timothy J. Baek's avatar
Timothy J. Baek committed
940
				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
941
				id="messages-container"
942
				bind:this={messagesContainerElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
943
				on:scroll={(e) => {
944
945
					autoScroll =
						messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
946
						messagesContainerElement.clientHeight + 5;
Timothy J. Baek's avatar
Timothy J. Baek committed
947
948
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
949
				<div class=" h-full w-full flex flex-col py-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
950
951
952
953
954
955
956
957
					<Messages
						chatId={$chatId}
						{selectedModels}
						{selectedModelfiles}
						{processing}
						bind:history
						bind:messages
						bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
958
						bind:prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
959
960
961
962
963
964
						bottomPadding={files.length > 0}
						{sendPrompt}
						{continueGeneration}
						{regenerateResponse}
					/>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
965
			</div>
966
967
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
968
969
970
971
972

	<MessageInput
		bind:files
		bind:prompt
		bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
973
		bind:selectedModel={atSelectedModel}
974
		{selectedModels}
Timothy J. Baek's avatar
Timothy J. Baek committed
975
976
977
978
		{messages}
		{submitPrompt}
		{stopResponse}
	/>
Timothy J. Baek's avatar
Timothy J. Baek committed
979
{/if}