+page.svelte 26.7 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

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

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,
		showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	} from '$lib/stores';
21
	import { copyToClipboard, splitStream } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
22

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
		getChatList,
		getTagsById,
		updateChatById
	} from '$lib/apis/chats';
33
	import { queryCollection, queryDoc, runWebSearch } from '$lib/apis/rag';
34
35
36
37
38
	import {
		generateOpenAIChatCompletion,
		generateSearchQuery,
		generateTitle
	} from '$lib/apis/openai';
39
40
41
42

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
43
	import Navbar from '$lib/components/layout/Navbar.svelte';
44
	import { RAGTemplate } from '$lib/utils/rag';
45
	import { LITELLM_API_BASE_URL, OLLAMA_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants';
46
	import { WEBUI_BASE_URL } from '$lib/constants';
47
	import { createOpenAITextStream } from '$lib/apis/streaming';
Ased Mammad's avatar
Ased Mammad committed
48
49
50

	const i18n = getContext('i18n');

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

57
	let showModelSelector = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
58

Timothy J. Baek's avatar
Timothy J. Baek committed
59
	let selectedModels = [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
60
	let atSelectedModel = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
61

62
63
	let useWebSearch = false;

64
65
66
67
68
69
	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;
70

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

Timothy J. Baek's avatar
Timothy J. Baek committed
85
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
86
	let prompt = '';
87
	let files = [];
88
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
	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
104
105
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
106
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
107

108
	onMount(async () => {
109
		await initNewChat();
110
111
112
113
114
115
	});

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

116
	const initNewChat = async () => {
117
		if (currentRequestId !== null) {
Timothy J. Baek's avatar
Timothy J. Baek committed
118
			await cancelOllamaRequest(localStorage.token, currentRequestId);
119
120
			currentRequestId = null;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
121
		window.history.replaceState(history.state, '', `/`);
122
		await chatId.set('');
Timothy J. Baek's avatar
Timothy J. Baek committed
123

124
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
125

126
127
128
129
130
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
131
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
135
136
137
138
139
140
141

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

143
144
145
146
147
148
149
150
		if ($page.url.searchParams.get('q')) {
			prompt = $page.url.searchParams.get('q') ?? '';
			if (prompt) {
				await tick();
				submitPrompt(prompt);
			}
		}

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

155
156
157
158
		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		settings.set({
			..._settings
		});
159
160
161

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

Timothy J. Baek's avatar
Timothy J. Baek committed
164
165
	const scrollToBottom = async () => {
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
		if (messagesContainerElement) {
			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
169
170
	};

171
172
173
174
	//////////////////////////
	// Ollama functions
	//////////////////////////

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

Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
180
181
		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

182
		if (selectedModels.includes('')) {
Ased Mammad's avatar
Ased Mammad committed
183
			toast.error($i18n.t('Model not selected'));
184
185
186
		} else if (messages.length != 0 && messages.at(-1).done != true) {
			// Response not done
			console.log('wait');
187
188
189
190
191
192
		} else if (
			files.length > 0 &&
			files.filter((file) => file.upload_status === false).length > 0
		) {
			// Upload not done
			toast.error(
Ased Mammad's avatar
Ased Mammad committed
193
194
195
				$i18n.t(
					`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.`
				)
196
			);
197
198
199
200
201
202
203
204
205
206
207
		} 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
208
				user: _user ?? undefined,
209
				content: userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
210
				files: files.length > 0 ? files : undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
211
				timestamp: Math.floor(Date.now() / 1000) // Unix epoch
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,
231
						title: $i18n.t('New Chat'),
232
233
234
235
236
237
238
						models: selectedModels,
						system: $settings.system ?? undefined,
						options: {
							...($settings.options ?? {})
						},
						messages: messages,
						history: history,
Timothy J. Baek's avatar
Timothy J. Baek committed
239
						tags: [],
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
						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);
		}
	};

259
260
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
261

Timothy J. Baek's avatar
Timothy J. Baek committed
262
		await Promise.all(
Timothy J. Baek's avatar
Timothy J. Baek committed
263
264
			(atSelectedModel !== '' ? [atSelectedModel.id] : selectedModels).map(async (modelId) => {
				console.log('modelId', modelId);
265
				const model = $models.filter((m) => m.id === modelId).at(0);
Timothy J. Baek's avatar
Timothy J. Baek committed
266

Timothy J. Baek's avatar
Timothy J. Baek committed
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
				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
291

292
					if (useWebSearch) {
293
						await runWebSearchForPrompt(parentId, responseMessageId);
294
295
					}

Timothy J. Baek's avatar
Timothy J. Baek committed
296
297
298
299
300
					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
301
				} else {
Ased Mammad's avatar
Ased Mammad committed
302
					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
Timothy J. Baek's avatar
Timothy J. Baek committed
303
304
305
				}
			})
		);
306

Timothy J. Baek's avatar
Timothy J. Baek committed
307
		await chats.set(await getChatList(localStorage.token));
308
309
	};

310
	const runWebSearchForPrompt = async (parentId: string, responseId: string) => {
311
312
313
		const responseMessage = history.messages[responseId];
		responseMessage.progress = $i18n.t('Generating search query');
		messages = messages;
314
		const searchQuery = await generateChatSearchQuery(parentId);
315
316
317
318
319
320
321
322
323
		if (!searchQuery) {
			toast.warning($i18n.t('No search query generated'));
			responseMessage.progress = undefined;
			messages = messages;
			return;
		}
		responseMessage.progress = $i18n.t("Searching the web for '{{searchQuery}}'", { searchQuery });
		messages = messages;
		const searchDocument = await runWebSearch(localStorage.token, searchQuery);
324
		if (searchDocument === undefined) {
325
326
327
328
329
			toast.warning($i18n.t('No search results found'));
			responseMessage.progress = undefined;
			messages = messages;
			return;
		}
330
331
		if (!responseMessage.files) {
			responseMessage.files = [];
332
		}
333
		responseMessage.files.push({
334
			collection_name: searchDocument.collection_name,
335
			name: searchQuery,
336
			type: 'websearch',
337
			upload_status: true,
338
339
			error: '',
			urls: searchDocument.filenames,
340
341
342
343
344
		});
		responseMessage.progress = undefined;
		messages = messages;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
345
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
346
		model = model.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
347
		const responseMessage = history.messages[responseMessageId];
Timothy J. Baek's avatar
Timothy J. Baek committed
348

Timothy J. Baek's avatar
Timothy J. Baek committed
349
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
350
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
351
352

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
353
		scrollToBottom();
354

355
356
357
358
359
360
361
		const messagesBody = [
			$settings.system
				? {
						role: 'system',
						content: $settings.system
				  }
				: undefined,
Danny Liu's avatar
Danny Liu committed
362
			...messages
363
364
		]
			.filter((message) => message)
Timothy J. Baek's avatar
Timothy J. Baek committed
365
366
367
368
369
370
371
372
373
374
375
376
377
			.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
378
				if (imageUrls && imageUrls.length > 0 && message.role === 'user') {
Timothy J. Baek's avatar
Timothy J. Baek committed
379
380
381
382
383
					baseMessage.images = imageUrls;
				}

				return baseMessage;
			});
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400

		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
401
402
403
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
404
				message.files.filter((item) => ['doc', 'collection', 'websearch'].includes(item.type))
Timothy J. Baek's avatar
Timothy J. Baek committed
405
406
407
			)
			.flat(1);

408
		const [res, controller] = await generateChatCompletion(localStorage.token, {
409
			model: model,
410
			messages: messagesBody,
411
			options: {
412
413
414
415
416
417
418
				...($settings.options ?? {}),
				stop:
					$settings?.options?.stop ?? undefined
						? $settings.options.stop.map((str) =>
								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
						  )
						: undefined
419
			},
Zohaib Rauf's avatar
Zohaib Rauf committed
420
			format: $settings.requestFormat ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
421
			keep_alive: $settings.keepAlive ?? undefined,
422
423
			docs: docs.length > 0 ? docs : undefined,
			citations: docs.length > 0
424
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
425

426
		if (res && res.ok) {
427
428
			console.log('controller', controller);

Rohit Das's avatar
Rohit Das committed
429
430
431
432
433
434
435
436
437
438
			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;
439
440
441

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
Timothy J. Baek's avatar
Timothy J. Baek committed
442
						await cancelOllamaRequest(localStorage.token, currentRequestId);
443
444
445
446
					}

					currentRequestId = null;

Rohit Das's avatar
Rohit Das committed
447
448
					break;
				}
449

Rohit Das's avatar
Rohit Das committed
450
451
				try {
					let lines = value.split('\n');
452

Rohit Das's avatar
Rohit Das committed
453
454
455
456
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
457

458
459
460
461
462
							if ('citations' in data) {
								responseMessage.citations = data.citations;
								continue;
							}

Rohit Das's avatar
Rohit Das committed
463
464
465
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
466

467
468
469
470
471
472
473
474
475
476
477
							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
478
								} else {
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
									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
498
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
499

500
501
502
503
504
505
506
									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
507
												: `${model}`,
508
509
											{
												body: responseMessage.content,
510
												icon: selectedModelfile?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`
511
512
513
514
515
516
517
											}
										);
									}

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

									if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
520
										await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
521
522
										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
523
								}
524
525
526
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
527
528
529
530
531
532
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
533
				}
Rohit Das's avatar
Rohit Das committed
534
535

				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
536
					scrollToBottom();
537
				}
538
			}
539

540
			if ($chatId == _chatId) {
541
542
543
544
545
546
547
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
548
			}
549
550
551
		} else {
			if (res !== null) {
				const error = await res.json();
552
				console.log(error);
553
554
				if ('detail' in error) {
					toast.error(error.detail);
555
					responseMessage.content = error.detail;
556
557
				} else {
					toast.error(error.error);
558
					responseMessage.content = error.error;
559
				}
560
			} else {
Ased Mammad's avatar
Ased Mammad committed
561
562
563
564
565
566
				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'
				});
567
568
			}

569
			responseMessage.error = true;
Ased Mammad's avatar
Ased Mammad committed
570
571
572
			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
				provider: 'Ollama'
			});
573
574
			responseMessage.done = true;
			messages = messages;
575
576
577
578
		}

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

580
		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
581
			scrollToBottom();
582
		}
583

584
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
585
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
586
587
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
588
589
590
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
594
595
596
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
597
				message.files.filter((item) => ['doc', 'collection', 'websearch'].includes(item.type))
Timothy J. Baek's avatar
Timothy J. Baek committed
598
599
600
			)
			.flat(1);

601
602
		console.log(docs);

Timothy J. Baek's avatar
Timothy J. Baek committed
603
		scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
604

605
606
607
608
609
610
611
612
		try {
			const [res, controller] = await generateOpenAIChatCompletion(
				localStorage.token,
				{
					model: model.id,
					stream: true,
					messages: [
						$settings.system
613
							? {
614
615
									role: 'system',
									content: $settings.system
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
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
							: 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
670

671
672
			// Wait until history/message have been updated
			await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
673

674
			scrollToBottom();
675

676
677
			if (res && res.ok && res.body) {
				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
678

679
680
681
682
683
				for await (const update of textStream) {
					const { value, done, citations, error } = update;
					if (error) {
						await handleOpenAIError(error, null, model, responseMessage);
						break;
684
					}
685
686
687
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;
688

689
690
691
						if (stopResponseFlag) {
							controller.abort('User: Stop Response');
						}
692

693
694
						break;
					}
695

696
697
698
699
					if (citations) {
						responseMessage.citations = citations;
						continue;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
700

701
702
703
704
705
706
					if (responseMessage.content == '' && value == '\n') {
						continue;
					} else {
						responseMessage.content += value;
						messages = messages;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
707

708
709
710
711
712
713
					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
714

715
716
717
					if ($settings.responseAutoCopy) {
						copyToClipboard(responseMessage.content);
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
718

719
720
721
722
					if ($settings.responseAutoPlayback) {
						await tick();
						document.getElementById(`speak-button-${responseMessage.id}`)?.click();
					}
723

724
725
726
					if (autoScroll) {
						scrollToBottom();
					}
727
				}
728
729
730
731
732
733
734
735

				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
736
					}
737
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
738
			} else {
739
				await handleOpenAIError(null, res, model, responseMessage);
740
			}
741
742
		} catch (error) {
			await handleOpenAIError(error, null, model, responseMessage);
Timothy J. Baek's avatar
Timothy J. Baek committed
743
		}
744
		messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
745
746
747
748
749

		stopResponseFlag = false;
		await tick();

		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
750
			scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
751
752
753
754
		}

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

756
757
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
758
		}
759
760
	};

761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
	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}}.`, {
				provider: model.name ?? model.id
			}) +
			'\n' +
			errorMessage;
		responseMessage.done = true;

		messages = messages;
	};

799
800
801
802
803
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

804
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
805
		console.log('regenerateResponse');
806
807
808
		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
809

810
811
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
812

Timothy J. Baek's avatar
Timothy J. Baek committed
813
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
814
		}
815
	};
816

Timothy J. Baek's avatar
Timothy J. Baek committed
817
818
819
820
821
822
	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];
823
824
825
			responseMessage.done = false;
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
			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
843
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
844
		} else {
Ased Mammad's avatar
Ased Mammad committed
845
			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
Timothy J. Baek's avatar
Timothy J. Baek committed
846
847
848
		}
	};

849
850
851
852
853
854
855
856
857
858
859
	const generateChatTitle = async (userPrompt) => {
		if ($settings?.title?.auto ?? true) {
			const model = $models.find((model) => model.id === selectedModels[0]);

			const titleModelId =
				model?.external ?? false
					? $settings?.title?.modelExternal ?? selectedModels[0]
					: $settings?.title?.model ?? selectedModels[0];
			const titleModel = $models.find((model) => model.id === titleModelId);

			console.log(titleModel);
Timothy J. Baek's avatar
Timothy J. Baek committed
860
861
			const title = await generateTitle(
				localStorage.token,
862
				$settings?.title?.prompt ??
Ased Mammad's avatar
Ased Mammad committed
863
864
865
					$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}}',
866
867
868
				titleModelId,
				userPrompt,
				titleModel?.external ?? false
869
					? titleModel?.source?.toLowerCase() === 'litellm'
870
871
872
						? `${LITELLM_API_BASE_URL}/v1`
						: `${OPENAI_API_BASE_URL}`
					: `${OLLAMA_API_BASE_URL}/v1`
Timothy J. Baek's avatar
Timothy J. Baek committed
873
874
			);

875
			return title;
876
		} else {
877
			return `${userPrompt}`;
878
879
880
		}
	};

881
	const generateChatSearchQuery = async (messageId: string) => {
882
883
		const model = $models.find((model) => model.id === selectedModels[0]);

884
		const taskModelId =
885
886
887
			model?.external ?? false
				? $settings?.title?.modelExternal ?? selectedModels[0]
				: $settings?.title?.model ?? selectedModels[0];
888
		const taskModel = $models.find((model) => model.id === taskModelId);
889

890
891
892
		const userMessage = history.messages[messageId];
		const userPrompt = userMessage.content;

Jun Siang Cheah's avatar
Jun Siang Cheah committed
893
894
895
		const previousMessages = messages
			.filter((message) => message.role === 'user')
			.map((message) => message.content);
896

897
898
		return await generateSearchQuery(
			localStorage.token,
899
			taskModelId,
900
			previousMessages,
901
			userPrompt,
902
903
			taskModel?.external ?? false
				? taskModel?.source?.toLowerCase() === 'litellm'
904
905
906
907
908
909
					? `${LITELLM_API_BASE_URL}/v1`
					: `${OPENAI_API_BASE_URL}`
				: `${OLLAMA_API_BASE_URL}/v1`
		);
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
910
911
912
913
914
915
916
917
918
919
920
	const setChatTitle = async (_chatId, _title) => {
		if (_chatId === $chatId) {
			title = _title;
		}

		if ($settings.saveChatHistory ?? true) {
			chat = await updateChatById(localStorage.token, _chatId, { title: _title });
			await chats.set(await getChatList(localStorage.token));
		}
	};

921
922
923
924
925
926
927
928
929
	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
930
931
932
933

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

		_tags.set(await getAllChatTags(localStorage.token));
936
937
938
939
940
	};

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

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

		_tags.set(await getAllChatTags(localStorage.token));
947
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
948
949
</script>

950
951
<svelte:head>
	<title>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
952
953
954
		{title
			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
			: `${$WEBUI_NAME}`}
955
956
957
	</title>
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
958
959
<div
	class="min-h-screen max-h-screen {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
960
		? 'md:max-w-[calc(100%-260px)]'
Timothy J. Baek's avatar
Timothy J. Baek committed
961
962
		: ''} w-full max-w-full flex flex-col"
>
Timothy J. Baek's avatar
Timothy J. Baek committed
963
964
965
966
967
	<Navbar
		{title}
		bind:selectedModels
		bind:showModelSelector
		shareEnabled={messages.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
968
		{chat}
Timothy J. Baek's avatar
Timothy J. Baek committed
969
970
		{initNewChat}
	/>
Timothy J. Baek's avatar
Timothy J. Baek committed
971
972
	<div class="flex flex-col flex-auto">
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
973
			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
974
			id="messages-container"
975
			bind:this={messagesContainerElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
976
			on:scroll={(e) => {
977
978
				autoScroll =
					messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
979
					messagesContainerElement.clientHeight + 5;
Timothy J. Baek's avatar
Timothy J. Baek committed
980
981
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
982
			<div class=" h-full w-full flex flex-col pt-2 pb-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
983
984
985
986
987
988
989
990
				<Messages
					chatId={$chatId}
					{selectedModels}
					{selectedModelfiles}
					{processing}
					bind:history
					bind:messages
					bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
991
					bind:prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
992
					bottomPadding={files.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
993
994
					suggestionPrompts={selectedModelfile?.suggestionPrompts ??
						$config.default_prompt_suggestions}
Timothy J. Baek's avatar
Timothy J. Baek committed
995
996
997
998
999
					{sendPrompt}
					{continueGeneration}
					{regenerateResponse}
				/>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1000
		</div>
1001
1002
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1003
1004
1005
1006
1007
1008

<MessageInput
	bind:files
	bind:prompt
	bind:autoScroll
	bind:selectedModel={atSelectedModel}
1009
	bind:useWebSearch
Timothy J. Baek's avatar
Timothy J. Baek committed
1010
1011
1012
	{messages}
	{submitPrompt}
	{stopResponse}
1013
	webSearchAvailable={$config.websearch ?? false}
Timothy J. Baek's avatar
Timothy J. Baek committed
1014
/>