Chat.svelte 33.3 KB
Newer Older
1
2
3
<script lang="ts">
	import { v4 as uuidv4 } from 'uuid';
	import { toast } from 'svelte-sonner';
4
	import mermaid from 'mermaid';
5
6
7
8
9

	import { getContext, onMount, tick } from 'svelte';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';

Timothy J. Baek's avatar
Timothy J. Baek committed
10
11
12
13
	import type { Writable } from 'svelte/store';
	import type { i18n as i18nType } from 'i18next';
	import { OLLAMA_API_BASE_URL, OPENAI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';

14
15
16
17
	import {
		chatId,
		chats,
		config,
18
		type Model,
19
20
21
22
		models,
		settings,
		showSidebar,
		tags as _tags,
Timothy J. Baek's avatar
Timothy J. Baek committed
23
		WEBUI_NAME,
24
		banners,
25
		user,
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
26
		socket,
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
27
28
		showCallOverlay,
		tools
29
	} from '$lib/stores';
30
31
32
33
34
35
	import {
		convertMessagesToHistory,
		copyToClipboard,
		promptTemplate,
		splitStream
	} from '$lib/utils';
36

37
	import { generateChatCompletion } from '$lib/apis/ollama';
38
39
40
41
42
43
44
45
46
47
	import {
		addTagById,
		createNewChat,
		deleteTagById,
		getAllChatTags,
		getChatById,
		getChatList,
		getTagsById,
		updateChatById
	} from '$lib/apis/chats';
Timothy J. Baek's avatar
Timothy J. Baek committed
48
	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
Timothy J. Baek's avatar
Timothy J. Baek committed
49
50
51
52
	import { runWebSearch } from '$lib/apis/rag';
	import { createOpenAITextStream } from '$lib/apis/streaming';
	import { queryMemory } from '$lib/apis/memories';
	import { getUserSettings } from '$lib/apis/users';
Timothy J. Baek's avatar
Timothy J. Baek committed
53
	import { chatCompleted, generateTitle, generateSearchQuery } from '$lib/apis';
54

Timothy J. Baek's avatar
Timothy J. Baek committed
55
	import Banner from '../common/Banner.svelte';
56
57
58
	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
59
	import CallOverlay from './MessageInput/CallOverlay.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
60
	import { error } from '@sveltejs/kit';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
61

62
63
64
65
66
67
68
69
70
71
72
73
74
	const i18n: Writable<i18nType> = getContext('i18n');

	export let chatIdProp = '';
	let loaded = false;

	let stopResponseFlag = false;
	let autoScroll = true;
	let processing = '';
	let messagesContainerElement: HTMLDivElement;

	let showModelSelector = true;

	let selectedModels = [''];
75
	let atSelectedModel: Model | undefined;
76

Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
79
	let selectedModelIds = [];
	$: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels;

Timothy J. Baek's avatar
Timothy J. Baek committed
80
	let selectedToolIds = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
81
	let webSearchEnabled = false;
82

83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
	let chat = null;
	let tags = [];

	let title = '';
	let prompt = '';
	let files = [];
	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;
	} else {
		messages = [];
	}

	$: if (chatIdProp) {
		(async () => {
			if (await loadChat()) {
				await tick();
				loaded = true;

				window.setTimeout(() => scrollToBottom(), 0);
				const chatInput = document.getElementById('chat-textarea');
				chatInput?.focus();
			} else {
				await goto('/');
			}
		})();
	}

	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
125
		if (!$chatId) {
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
			await initNewChat();
		} else {
			if (!($settings.saveChatHistory ?? true)) {
				await goto('/');
			}
		}
	});

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

	const initNewChat = async () => {
		window.history.replaceState(history.state, '', `/`);
		await chatId.set('');

		autoScroll = true;

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

		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) {
156
			console.log($config?.default_models.split(',') ?? '');
157
158
159
160
161
162
163
			selectedModels = $config?.default_models.split(',');
		} else {
			selectedModels = [''];
		}

		if ($page.url.searchParams.get('q')) {
			prompt = $page.url.searchParams.get('q') ?? '';
Timothy J. Baek's avatar
Timothy J. Baek committed
164

165
166
167
168
169
170
171
172
173
174
			if (prompt) {
				await tick();
				submitPrompt(prompt);
			}
		}

		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

175
176
177
178
179
180
181
		const userSettings = await getUserSettings(localStorage.token);

		if (userSettings) {
			settings.set(userSettings.ui);
		} else {
			settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
		}
182
183
184
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

		const chatInput = document.getElementById('chat-textarea');
		setTimeout(() => chatInput?.focus(), 0);
	};

	const loadChat = async () => {
		chatId.set(chatIdProp);
		chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
			await goto('/');
			return null;
		});

		if (chat) {
			tags = await getTags();
			const chatContent = chat.chat;

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

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

211
212
213
214
215
216
217
218
				const userSettings = await getUserSettings(localStorage.token);

				if (userSettings) {
					await settings.set(userSettings.ui);
				} else {
					await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
				}

219
				await settings.set({
220
221
222
					...$settings,
					system: chatContent.system ?? $settings.system,
					params: chatContent.options ?? $settings.params
223
				});
224

225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
				autoScroll = true;
				await tick();

				if (messages.length > 0) {
					history.messages[messages.at(-1).id].done = true;
				}
				await tick();

				return true;
			} else {
				return null;
			}
		}
	};

	const scrollToBottom = async () => {
		await tick();
		if (messagesContainerElement) {
			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
		}
	};

247
248
249
250
251
252
253
254
255
	const createMessagesList = (responseMessageId) => {
		const message = history.messages[responseMessageId];
		if (message.parentId) {
			return [...createMessagesList(message.parentId), message];
		} else {
			return [message];
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
256
	const chatCompletedHandler = async (modelId, messages) => {
257
258
259
260
261
		await mermaid.run({
			querySelector: '.mermaid'
		});

		const res = await chatCompleted(localStorage.token, {
Timothy J. Baek's avatar
Timothy J. Baek committed
262
			model: modelId,
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
			messages: messages.map((m) => ({
				id: m.id,
				role: m.role,
				content: m.content,
				timestamp: m.timestamp
			})),
			chat_id: $chatId
		}).catch((error) => {
			console.error(error);
			return null;
		});

		if (res !== null) {
			// Update chat history with the new messages
			for (const message of res.messages) {
				history.messages[message.id] = {
					...history.messages[message.id],
					...(history.messages[message.id].content !== message.content
						? { originalContent: history.messages[message.id].content }
						: {}),
					...message
				};
			}
		}
	};

289
290
291
292
293
294
295
296
297
298
	const getChatEventEmitter = async (modelId: string, chatId: string = '') => {
		return setInterval(() => {
			$socket?.emit('usage', {
				action: 'chat',
				model: modelId,
				chat_id: chatId
			});
		}, 1000);
	};

299
	//////////////////////////
Timothy J. Baek's avatar
Timothy J. Baek committed
300
	// Chat functions
301
302
303
	//////////////////////////

	const submitPrompt = async (userPrompt, _user = null) => {
304
		let _responses = [];
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
		console.log('submitPrompt', $chatId);

		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

		if (selectedModels.includes('')) {
			toast.error($i18n.t('Model not selected'));
		} else if (messages.length != 0 && messages.at(-1).done != true) {
			// Response not done
			console.log('wait');
		} else if (
			files.length > 0 &&
			files.filter((file) => file.upload_status === false).length > 0
		) {
			// Upload not done
			toast.error(
				$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.`
				)
			);
		} else {
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
327
328
329
330
331
332
333
334
			// Reset chat input textarea
			const chatTextAreaElement = document.getElementById('chat-textarea');

			if (chatTextAreaElement) {
				chatTextAreaElement.value = '';
				chatTextAreaElement.style.height = '';
			}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
335
336
337
			const _files = JSON.parse(JSON.stringify(files));
			files = [];

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
338
			prompt = '';
339
340
341
342
343
344
345
346
347
348

			// Create user message
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
				user: _user ?? undefined,
				content: userPrompt,
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
349
				files: _files.length > 0 ? _files : undefined,
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
				timestamp: Math.floor(Date.now() / 1000), // Unix epoch
				models: selectedModels.filter((m, mIdx) => selectedModels.indexOf(m) === mIdx)
			};

			// 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();

			// Send prompt
367
			_responses = await sendPrompt(userPrompt, userMessageId);
368
		}
369
370

		return _responses;
371
372
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
373
	const sendPrompt = async (prompt, parentId, modelId = null, newChat = true) => {
374
		let _responses = [];
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419

		// If modelId is provided, use it, else use selected model
		let selectedModelIds = modelId
			? [modelId]
			: atSelectedModel !== undefined
			? [atSelectedModel.id]
			: selectedModels;

		// Create response messages for each selected model
		const responseMessageIds = {};
		for (const modelId of selectedModelIds) {
			const model = $models.filter((m) => m.id === modelId).at(0);

			if (model) {
				let responseMessageId = uuidv4();
				let responseMessage = {
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
					role: 'assistant',
					content: '',
					model: model.id,
					modelName: model.name ?? model.id,
					userContext: null,
					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
					];
				}

				responseMessageIds[modelId] = responseMessageId;
			}
		}
		await tick();

		// Create new chat if only one message in messages
Timothy J. Baek's avatar
Timothy J. Baek committed
420
		if (newChat && messages.length == 2) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
			if ($settings.saveChatHistory ?? true) {
				chat = await createNewChat(localStorage.token, {
					id: $chatId,
					title: $i18n.t('New Chat'),
					models: selectedModels,
					system: $settings.system ?? undefined,
					options: {
						...($settings.params ?? {})
					},
					messages: messages,
					history: history,
					tags: [],
					timestamp: Date.now()
				});
				await chats.set(await getChatList(localStorage.token));
				await chatId.set(chat.id);
			} else {
				await chatId.set('local');
			}
			await tick();
		}

443
444
445
		const _chatId = JSON.parse(JSON.stringify($chatId));

		await Promise.all(
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
446
			selectedModelIds.map(async (modelId) => {
447
448
449
450
451
452
453
454
				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')
					);
455

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
456
					if (hasImages && !(model.info?.meta?.capabilities?.vision ?? true)) {
457
458
						toast.error(
							$i18n.t('Model {{modelName}} is not vision capable', {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
459
								modelName: model.name ?? model.id
460
461
462
							})
						);
					}
463

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
464
465
					let responseMessageId = responseMessageIds[modelId];
					let responseMessage = history.messages[responseMessageId];
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483

					let userContext = null;
					if ($settings?.memory ?? false) {
						if (userContext === null) {
							const res = await queryMemory(localStorage.token, prompt).catch((error) => {
								toast.error(error);
								return null;
							});
							if (res) {
								if (res.documents[0].length > 0) {
									userContext = res.documents.reduce((acc, doc, index) => {
										const createdAtTimestamp = res.metadatas[index][0].created_at;
										const createdAtDate = new Date(createdAtTimestamp * 1000)
											.toISOString()
											.split('T')[0];
										acc.push(`${index + 1}. [${createdAtDate}]. ${doc[0]}`);
										return acc;
									}, []);
484
								}
485
486

								console.log(userContext);
487
488
							}
						}
489
490
					}
					responseMessage.userContext = userContext;
491

492
493
					const chatEventEmitter = await getChatEventEmitter(model.id, _chatId);

Timothy J. Baek's avatar
Timothy J. Baek committed
494
					if (webSearchEnabled) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
495
						await getWebSearchResults(model.id, parentId, responseMessageId);
496
					}
497

498
					let _response = null;
499
					if (model?.owned_by === 'openai') {
500
						_response = await sendPromptOpenAI(model, prompt, responseMessageId, _chatId);
501
					} else if (model) {
502
						_response = await sendPromptOllama(model, prompt, responseMessageId, _chatId);
503
					}
504
					_responses.push(_response);
505
506
507
508

					console.log('chatEventEmitter', chatEventEmitter);

					if (chatEventEmitter) clearInterval(chatEventEmitter);
509
510
				} else {
					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
511
				}
512
			})
513
514
515
		);

		await chats.set(await getChatList(localStorage.token));
516
517

		return _responses;
518
519
	};

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
520
	const getWebSearchResults = async (model: string, parentId: string, responseId: string) => {
521
		const responseMessage = history.messages[responseId];
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
522

523
524
525
526
527
528
529
		responseMessage.statusHistory = [
			{
				done: false,
				action: 'web_search',
				description: $i18n.t('Generating search query')
			}
		];
530
		messages = messages;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
531

Timothy J. Baek's avatar
Timothy J. Baek committed
532
		const prompt = history.messages[parentId].content;
Timothy J. Baek's avatar
Timothy J. Baek committed
533
534
535
536
537
538
539
		let searchQuery = await generateSearchQuery(localStorage.token, model, messages, prompt).catch(
			(error) => {
				console.log(error);
				return prompt;
			}
		);

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
540
541
		if (!searchQuery) {
			toast.warning($i18n.t('No search query generated'));
542
			responseMessage.statusHistory.push({
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
543
544
				done: true,
				error: true,
545
				action: 'web_search',
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
546
				description: 'No search query generated'
547
548
			});

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
549
			messages = messages;
550
		}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
551

552
553
554
555
556
		responseMessage.statusHistory.push({
			done: false,
			action: 'web_search',
			description: $i18n.t(`Searching "{{searchQuery}}"`, { searchQuery })
		});
557
		messages = messages;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
558

Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
561
562
563
564
565
566
		const results = await runWebSearch(localStorage.token, searchQuery).catch((error) => {
			console.log(error);
			toast.error(error);

			return null;
		});

		if (results) {
567
			responseMessage.statusHistory.push({
Timothy J. Baek's avatar
Timothy J. Baek committed
568
				done: true,
569
				action: 'web_search',
Timothy J. Baek's avatar
Timothy J. Baek committed
570
				description: $i18n.t('Searched {{count}} sites', { count: results.filenames.length }),
571
				query: searchQuery,
Timothy J. Baek's avatar
Timothy J. Baek committed
572
				urls: results.filenames
573
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
574
575
576
577
578
579
580
581
582
583
584
585
586
587

			if (responseMessage?.files ?? undefined === undefined) {
				responseMessage.files = [];
			}

			responseMessage.files.push({
				collection_name: results.collection_name,
				name: searchQuery,
				type: 'web_search_results',
				urls: results.filenames
			});

			messages = messages;
		} else {
588
			responseMessage.statusHistory.push({
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
589
590
				done: true,
				error: true,
591
				action: 'web_search',
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
592
				description: 'No search results found'
593
			});
594
595
596
597
			messages = messages;
		}
	};

598
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
599
600
		let _response = null;

601
602
603
604
605
606
607
608
609
610
611
612
		const responseMessage = history.messages[responseMessageId];

		// Wait until history/message have been updated
		await tick();

		// Scroll down
		scrollToBottom();

		const messagesBody = [
			$settings.system || (responseMessage?.userContext ?? null)
				? {
						role: 'system',
613
						content: `${promptTemplate($settings?.system ?? '', $user.name)}${
614
615
616
617
618
619
620
621
							responseMessage?.userContext ?? null
								? `\n\nUser Context:\n${(responseMessage?.userContext ?? []).join('\n')}`
								: ''
						}`
				  }
				: undefined,
			...messages
		]
Yanyutin753's avatar
Yanyutin753 committed
622
			.filter((message) => message?.content?.trim())
623
624
625
626
			.map((message, idx, arr) => {
				// Prepare the base message object
				const baseMessage = {
					role: message.role,
Timothy J. Baek's avatar
Timothy J. Baek committed
627
					content: message.content
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
				};

				// 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 && message.role === 'user') {
					baseMessage.images = imageUrls;
				}
				return baseMessage;
			});

		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
658
659
		let docs = [];

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
660
		if (model?.info?.meta?.knowledge ?? false) {
Timothy J. Baek's avatar
Timothy J. Baek committed
661
662
663
664
665
666
667
668
669
670
671
			docs = model.info.meta.knowledge;
		}

		docs = [
			...docs,
			...messages
				.filter((message) => message?.files ?? null)
				.map((message) =>
					message.files.filter((item) =>
						['doc', 'collection', 'web_search_results'].includes(item.type)
					)
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
672
				)
Timothy J. Baek's avatar
Timothy J. Baek committed
673
674
675
676
677
				.flat(1)
		].filter(
			(item, index, array) =>
				array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
		);
678
679

		const [res, controller] = await generateChatCompletion(localStorage.token, {
Timothy J. Baek's avatar
Timothy J. Baek committed
680
			model: model.id,
681
682
			messages: messagesBody,
			options: {
Timothy J. Baek's avatar
Timothy J. Baek committed
683
				...($settings.params ?? {}),
684
				stop:
Timothy J. Baek's avatar
Timothy J. Baek committed
685
686
					$settings?.params?.stop ?? undefined
						? $settings.params.stop.map((str) =>
687
688
								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
						  )
689
						: undefined,
690
691
				num_predict: $settings?.params?.max_tokens ?? undefined,
				repeat_penalty: $settings?.params?.frequency_penalty ?? undefined
692
693
694
			},
			format: $settings.requestFormat ?? undefined,
			keep_alive: $settings.keepAlive ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
695
			tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
696
			docs: docs.length > 0 ? docs : undefined,
697
698
			citations: docs.length > 0,
			chat_id: $chatId
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
		});

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

			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;

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
717
					} else {
718
						const messages = createMessagesList(responseMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
719
						await chatCompletedHandler(model.id, messages);
720
721
					}

722
					_response = responseMessage.content;
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
					break;
				}

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

					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);

							if ('citations' in data) {
								responseMessage.citations = data.citations;
								continue;
							}

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

743
744
745
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
746
								} else {
747
									responseMessage.content += data.message.content;
748
									messages = messages;
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
								}
							} else {
								responseMessage.done = true;

								if (responseMessage.content == '') {
									responseMessage.error = {
										code: 400,
										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
								};
								messages = messages;

								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
780
											: `${model.id}`,
781
782
783
784
785
786
787
788
789
790
										{
											body: responseMessage.content,
											icon: selectedModelfile?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`
										}
									);
								}

								if ($settings.responseAutoCopy) {
									copyToClipboard(responseMessage.content);
								}
791

Timothy J. Baek's avatar
Timothy J. Baek committed
792
								if ($settings.responseAutoPlayback && !$showCallOverlay) {
793
794
									await tick();
									document.getElementById(`speak-button-${responseMessage.id}`)?.click();
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
								}
							}
						}
					}
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
				}

				if (autoScroll) {
					scrollToBottom();
				}
			}

			if ($chatId == _chatId) {
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
Timothy J. Baek's avatar
Timothy J. Baek committed
816
817
						history: history,
						models: selectedModels
818
819
820
821
822
823
824
825
826
827
					});
					await chats.set(await getChatList(localStorage.token));
				}
			}
		} else {
			if (res !== null) {
				const error = await res.json();
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
828
					responseMessage.error = { content: error.detail };
829
830
				} else {
					toast.error(error.error);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
831
					responseMessage.error = { content: error.error };
832
833
834
835
836
				}
			} else {
				toast.error(
					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: 'Ollama' })
				);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
837
838
839
840
841
				responseMessage.error = {
					content: $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
						provider: 'Ollama'
					})
				};
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
			}
			responseMessage.done = true;
			messages = messages;
		}

		stopResponseFlag = false;
		await tick();

		if (autoScroll) {
			scrollToBottom();
		}

		if (messages.length == 2 && messages.at(1).content !== '') {
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
		}
859
860

		return _response;
861
862
863
	};

	const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => {
864
		let _response = null;
865
866
		const responseMessage = history.messages[responseMessageId];

Timothy J. Baek's avatar
Timothy J. Baek committed
867
868
		let docs = [];

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
869
		if (model?.info?.meta?.knowledge ?? false) {
Timothy J. Baek's avatar
Timothy J. Baek committed
870
871
			docs = model.info.meta.knowledge;
		}
872

Timothy J. Baek's avatar
Timothy J. Baek committed
873
874
875
876
877
878
879
880
881
882
883
884
885
886
		docs = [
			...docs,
			...messages
				.filter((message) => message?.files ?? null)
				.map((message) =>
					message.files.filter((item) =>
						['doc', 'collection', 'web_search_results'].includes(item.type)
					)
				)
				.flat(1)
		].filter(
			(item, index, array) =>
				array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
		);
887
888
889
890
891
892
893
894
895

		scrollToBottom();

		try {
			const [res, controller] = await generateOpenAIChatCompletion(
				localStorage.token,
				{
					model: model.id,
					stream: true,
896
897
898
899
900
901
					stream_options:
						model.info?.meta?.capabilities?.usage ?? false
							? {
									include_usage: true
							  }
							: undefined,
902
903
904
905
					messages: [
						$settings.system || (responseMessage?.userContext ?? null)
							? {
									role: 'system',
906
									content: `${promptTemplate($settings?.system ?? '', $user.name)}${
907
908
909
910
911
912
913
914
										responseMessage?.userContext ?? null
											? `\n\nUser Context:\n${(responseMessage?.userContext ?? []).join('\n')}`
											: ''
									}`
							  }
							: undefined,
						...messages
					]
Yanyutin753's avatar
Yanyutin753 committed
915
						.filter((message) => message?.content?.trim())
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
						.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
								  })
						})),
Timothy J. Baek's avatar
Timothy J. Baek committed
946
					seed: $settings?.params?.seed ?? undefined,
947
					stop:
Timothy J. Baek's avatar
Timothy J. Baek committed
948
949
						$settings?.params?.stop ?? undefined
							? $settings.params.stop.map((str) =>
950
951
952
									decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
							  )
							: undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
953
954
					temperature: $settings?.params?.temperature ?? undefined,
					top_p: $settings?.params?.top_p ?? undefined,
955
					frequency_penalty: $settings?.params?.frequency_penalty ?? undefined,
956
					max_tokens: $settings?.params?.max_tokens ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
957
					tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
958
					docs: docs.length > 0 ? docs : undefined,
959
960
					citations: docs.length > 0,
					chat_id: $chatId
961
				},
Timothy J. Baek's avatar
Timothy J. Baek committed
962
				`${OPENAI_API_BASE_URL}`
963
964
965
966
967
968
969
970
971
			);

			// Wait until history/message have been updated
			await tick();

			scrollToBottom();

			if (res && res.ok && res.body) {
				const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
972
				let lastUsage = null;
973
974

				for await (const update of textStream) {
975
					const { value, done, citations, error, usage } = update;
976
977
978
979
980
981
982
983
984
985
					if (error) {
						await handleOpenAIError(error, null, model, responseMessage);
						break;
					}
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;

						if (stopResponseFlag) {
							controller.abort('User: Stop Response');
986
						} else {
987
988
							const messages = createMessagesList(responseMessageId);

Timothy J. Baek's avatar
Timothy J. Baek committed
989
							await chatCompletedHandler(model.id, messages);
990
991
						}

992
993
						_response = responseMessage.content;

994
995
996
						break;
					}

997
998
999
1000
					if (usage) {
						lastUsage = usage;
					}

1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
					if (citations) {
						responseMessage.citations = citations;
						continue;
					}

					if (responseMessage.content == '' && value == '\n') {
						continue;
					} else {
						responseMessage.content += value;
						messages = messages;
					}

1013
1014
					if (autoScroll) {
						scrollToBottom();
1015
					}
1016
				}
1017

1018
				if ($settings.notificationEnabled && !document.hasFocus()) {
Timothy J. Baek's avatar
Timothy J. Baek committed
1019
					const notification = new Notification(`${model.id}`, {
1020
1021
1022
1023
						body: responseMessage.content,
						icon: `${WEBUI_BASE_URL}/static/favicon.png`
					});
				}
1024

1025
1026
1027
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
1028

Timothy J. Baek's avatar
Timothy J. Baek committed
1029
				if ($settings.responseAutoPlayback && !$showCallOverlay) {
1030
					await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
1031

1032
					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
1033
1034
				}

1035
1036
1037
1038
				if (lastUsage) {
					responseMessage.info = { ...lastUsage, openai: true };
				}

1039
1040
1041
				if ($chatId == _chatId) {
					if ($settings.saveChatHistory ?? true) {
						chat = await updateChatById(localStorage.token, _chatId, {
Timothy J. Baek's avatar
Timothy J. Baek committed
1042
							models: selectedModels,
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
							messages: messages,
							history: history
						});
						await chats.set(await getChatList(localStorage.token));
					}
				}
			} else {
				await handleOpenAIError(null, res, model, responseMessage);
			}
		} catch (error) {
			await handleOpenAIError(error, null, model, responseMessage);
		}
		messages = messages;

		stopResponseFlag = false;
		await tick();

		if (autoScroll) {
			scrollToBottom();
		}

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

			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
		}
1070
1071

		return _response;
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
	};

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

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1100
		responseMessage.error = {
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
1101
1102
1103
1104
1105
1106
			content:
				$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
					provider: model.name ?? model.id
				}) +
				'\n' +
				errorMessage
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1107
		};
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
		responseMessage.done = true;

		messages = messages;
	};

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

	const regenerateResponse = async (message) => {
		console.log('regenerateResponse');

		if (messages.length != 0) {
			let userMessage = history.messages[message.parentId];
			let userPrompt = userMessage.content;

			if ((userMessage?.models ?? [...selectedModels]).length == 1) {
Timothy J. Baek's avatar
Timothy J. Baek committed
1126
				await sendPrompt(userPrompt, userMessage.id, undefined, false);
1127
			} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
1128
				await sendPrompt(userPrompt, userMessage.id, message.model, false);
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
			}
		}
	};

	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];
			responseMessage.done = false;
			await tick();

			const model = $models.filter((m) => m.id === responseMessage.model).at(0);

			if (model) {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1145
				if (model?.owned_by === 'openai') {
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
					await sendPromptOpenAI(
						model,
						history.messages[responseMessage.parentId].content,
						responseMessage.id,
						_chatId
					);
				} else
					await sendPromptOllama(
						model,
						history.messages[responseMessage.parentId].content,
						responseMessage.id,
						_chatId
					);
			}
		} else {
			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
		}
	};

	const generateChatTitle = async (userPrompt) => {
		if ($settings?.title?.auto ?? true) {
			const title = await generateTitle(
				localStorage.token,
Timothy J. Baek's avatar
Timothy J. Baek committed
1169
				selectedModels[0],
1170
				userPrompt,
Timothy J. Baek's avatar
Timothy J. Baek committed
1171
1172
1173
1174
1175
				$chatId
			).catch((error) => {
				console.error(error);
				return 'New Chat';
			});
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208

			return title;
		} else {
			return `${userPrompt}`;
		}
	};

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

	const getTags = async () => {
		return await getTagsById(localStorage.token, $chatId).catch(async (error) => {
			return [];
		});
	};
</script>

<svelte:head>
	<title>
		{title
			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
			: `${$WEBUI_NAME}`}
	</title>
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
1209
<CallOverlay {submitPrompt} bind:files />
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
1210

1211
1212
{#if !chatIdProp || (loaded && chatIdProp)}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
1213
		class="h-screen max-h-[100dvh] {$showSidebar
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
			? 'md:max-w-[calc(100%-260px)]'
			: ''} w-full max-w-full flex flex-col"
	>
		<Navbar
			{title}
			bind:selectedModels
			bind:showModelSelector
			shareEnabled={messages.length > 0}
			{chat}
			{initNewChat}
		/>
Timothy J. Baek's avatar
Timothy J. Baek committed
1225

Timothy J. Baek's avatar
Timothy J. Baek committed
1226
		{#if $banners.length > 0 && messages.length === 0 && !$chatId && selectedModels.length <= 1}
Timothy J. Baek's avatar
Timothy J. Baek committed
1227
1228
1229
			<div
				class="absolute top-[4.25rem] w-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}"
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
				<div class=" flex flex-col gap-1 w-full">
					{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
						<Banner
							{banner}
							on:dismiss={(e) => {
								const bannerId = e.detail;

								localStorage.setItem(
									'dismissedBannerIds',
									JSON.stringify(
										[
											bannerId,
											...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
										].filter((id) => $banners.find((b) => b.id === id))
									)
								);
							}}
						/>
					{/each}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1250
1251
1252
			</div>
		{/if}

1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
		<div class="flex flex-col flex-auto">
			<div
				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full"
				id="messages-container"
				bind:this={messagesContainerElement}
				on:scroll={(e) => {
					autoScroll =
						messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
						messagesContainerElement.clientHeight + 5;
				}}
			>
				<div class=" h-full w-full flex flex-col {chatIdProp ? 'py-4' : 'pt-2 pb-4'}">
					<Messages
						chatId={$chatId}
						{selectedModels}
						{processing}
						bind:history
						bind:messages
						bind:autoScroll
						bind:prompt
						bottomPadding={files.length > 0}
						{sendPrompt}
						{continueGeneration}
						{regenerateResponse}
					/>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1280
1281
1282
1283
			<MessageInput
				bind:files
				bind:prompt
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
1284
				bind:selectedToolIds
Timothy J. Baek's avatar
Timothy J. Baek committed
1285
1286
				bind:webSearchEnabled
				bind:atSelectedModel
Timothy J. Baek's avatar
Timothy J. Baek committed
1287
1288
1289
1290
1291
1292
1293
				availableToolIds={selectedModelIds.reduce((a, e, i, arr) => {
					const model = $models.find((m) => m.id === e);
					if (model?.info?.meta?.toolIds ?? false) {
						return [...new Set([...a, ...model.info.meta.toolIds])];
					}
					return a;
				}, [])}
Timothy J. Baek's avatar
Timothy J. Baek committed
1294
1295
1296
1297
1298
				{selectedModels}
				{messages}
				{submitPrompt}
				{stopResponse}
			/>
1299
1300
1301
		</div>
	</div>
{/if}