+page.svelte 23.9 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 } from '$lib/apis/rag';
34
	import { generateOpenAIChatCompletion, generateTitle } from '$lib/apis/openai';
35
36
37
38

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

	const i18n = getContext('i18n');

47
48
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
49
	let processing = '';
50
	let messagesContainerElement: HTMLDivElement;
51
52
	let currentRequestId = null;

53
	let showModelSelector = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
54

Timothy J. Baek's avatar
Timothy J. Baek committed
55
	let selectedModels = [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
56
	let atSelectedModel = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
57

58
59
60
61
62
63
	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;
64

65
66
67
68
69
70
71
72
73
74
75
	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 })
		};
	}, {});

76
	let chat = null;
77
	let tags = [];
78

Timothy J. Baek's avatar
Timothy J. Baek committed
79
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
80
	let prompt = '';
81
	let files = [];
82
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
	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
98
99
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
100
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
101

102
	onMount(async () => {
103
		await initNewChat();
104
105
106
107
108
109
	});

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

110
	const initNewChat = async () => {
111
		if (currentRequestId !== null) {
Timothy J. Baek's avatar
Timothy J. Baek committed
112
			await cancelOllamaRequest(localStorage.token, currentRequestId);
113
114
			currentRequestId = null;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
115
		window.history.replaceState(history.state, '', `/`);
116
		await chatId.set('');
Timothy J. Baek's avatar
Timothy J. Baek committed
117

118
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
119

120
121
122
123
124
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
125
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
126
127
128
129
130
131
132
133
134
135

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

Timothy J. Baek's avatar
Timothy J. Baek committed
137
138
139
140
		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

141
142
143
144
		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		settings.set({
			..._settings
		});
145
146
147

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

Timothy J. Baek's avatar
Timothy J. Baek committed
150
151
	const scrollToBottom = async () => {
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
		if (messagesContainerElement) {
			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
	};

157
158
159
160
	//////////////////////////
	// Ollama functions
	//////////////////////////

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

Timothy J. Baek's avatar
Timothy J. Baek committed
164
165
166
167
		selectedModels = selectedModels.map((modelId) =>
			$models.map((m) => m.id).includes(modelId) ? modelId : ''
		);

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

			// 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,
217
						title: $i18n.t('New Chat'),
218
219
220
221
222
223
224
						models: selectedModels,
						system: $settings.system ?? undefined,
						options: {
							...($settings.options ?? {})
						},
						messages: messages,
						history: history,
Timothy J. Baek's avatar
Timothy J. Baek committed
225
						tags: [],
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
						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);
		}
	};

245
246
	const sendPrompt = async (prompt, parentId) => {
		const _chatId = JSON.parse(JSON.stringify($chatId));
247

Timothy J. Baek's avatar
Timothy J. Baek committed
248
		await Promise.all(
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
			(atSelectedModel !== '' ? [atSelectedModel.id] : selectedModels).map(async (modelId) => {
				console.log('modelId', modelId);
251
				const model = $models.filter((m) => m.id === modelId).at(0);
Timothy J. Baek's avatar
Timothy J. Baek committed
252

Timothy J. Baek's avatar
Timothy J. Baek committed
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
				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
277

Timothy J. Baek's avatar
Timothy J. Baek committed
278
279
280
281
282
					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
283
				} else {
Ased Mammad's avatar
Ased Mammad committed
284
					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286
287
				}
			})
		);
288

Timothy J. Baek's avatar
Timothy J. Baek committed
289
		await chats.set(await getChatList(localStorage.token));
290
291
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
292
	const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => {
293
		model = model.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
294
		const responseMessage = history.messages[responseMessageId];
Timothy J. Baek's avatar
Timothy J. Baek committed
295

Timothy J. Baek's avatar
Timothy J. Baek committed
296
		// Wait until history/message have been updated
Timothy J. Baek's avatar
Timothy J. Baek committed
297
		await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
298
299

		// Scroll down
Timothy J. Baek's avatar
Timothy J. Baek committed
300
		scrollToBottom();
301

302
303
304
305
306
307
308
		const messagesBody = [
			$settings.system
				? {
						role: 'system',
						content: $settings.system
				  }
				: undefined,
Danny Liu's avatar
Danny Liu committed
309
			...messages
310
311
		]
			.filter((message) => message)
Timothy J. Baek's avatar
Timothy J. Baek committed
312
313
314
315
316
317
318
319
320
321
322
323
324
			.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
325
				if (imageUrls && imageUrls.length > 0 && message.role === 'user') {
Timothy J. Baek's avatar
Timothy J. Baek committed
326
327
328
329
330
					baseMessage.images = imageUrls;
				}

				return baseMessage;
			});
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347

		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
348
349
350
351
352
353
354
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

355
		const [res, controller] = await generateChatCompletion(localStorage.token, {
356
			model: model,
357
			messages: messagesBody,
358
			options: {
359
360
361
362
363
364
365
				...($settings.options ?? {}),
				stop:
					$settings?.options?.stop ?? undefined
						? $settings.options.stop.map((str) =>
								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
						  )
						: undefined
366
			},
Zohaib Rauf's avatar
Zohaib Rauf committed
367
			format: $settings.requestFormat ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
368
			keep_alive: $settings.keepAlive ?? undefined,
369
370
			docs: docs.length > 0 ? docs : undefined,
			citations: docs.length > 0
371
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
372

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

Rohit Das's avatar
Rohit Das committed
376
377
378
379
380
381
382
383
384
385
			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;
386
387
388

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
Timothy J. Baek's avatar
Timothy J. Baek committed
389
						await cancelOllamaRequest(localStorage.token, currentRequestId);
390
391
392
393
					}

					currentRequestId = null;

Rohit Das's avatar
Rohit Das committed
394
395
					break;
				}
396

Rohit Das's avatar
Rohit Das committed
397
398
				try {
					let lines = value.split('\n');
399

Rohit Das's avatar
Rohit Das committed
400
401
402
403
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
404

405
406
407
408
409
							if ('citations' in data) {
								responseMessage.citations = data.citations;
								continue;
							}

Rohit Das's avatar
Rohit Das committed
410
411
412
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
413

414
415
416
417
418
419
420
421
422
423
424
							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
425
								} else {
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
									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
445
									messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
446

447
448
449
450
451
452
453
									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
454
												: `${model}`,
455
456
											{
												body: responseMessage.content,
457
												icon: selectedModelfile?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`
458
459
460
461
462
463
464
											}
										);
									}

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

									if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
467
										await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
468
469
										document.getElementById(`speak-button-${responseMessage.id}`)?.click();
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
470
								}
471
472
473
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
474
475
476
477
478
479
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
480
				}
Rohit Das's avatar
Rohit Das committed
481
482

				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
483
					scrollToBottom();
484
				}
485
			}
486

487
			if ($chatId == _chatId) {
488
489
490
491
492
493
494
				if ($settings.saveChatHistory ?? true) {
					chat = await updateChatById(localStorage.token, _chatId, {
						messages: messages,
						history: history
					});
					await chats.set(await getChatList(localStorage.token));
				}
495
			}
496
497
498
		} else {
			if (res !== null) {
				const error = await res.json();
499
				console.log(error);
500
501
				if ('detail' in error) {
					toast.error(error.detail);
502
					responseMessage.content = error.detail;
503
504
				} else {
					toast.error(error.error);
505
					responseMessage.content = error.error;
506
				}
507
			} else {
Ased Mammad's avatar
Ased Mammad committed
508
509
510
511
512
513
				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'
				});
514
515
			}

516
			responseMessage.error = true;
Ased Mammad's avatar
Ased Mammad committed
517
518
519
			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
				provider: 'Ollama'
			});
520
521
			responseMessage.done = true;
			messages = messages;
522
523
524
525
		}

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

527
		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
528
			scrollToBottom();
529
		}
530

531
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
532
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
533
534
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
535
536
537
		}
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
541
542
543
544
545
546
547
		const docs = messages
			.filter((message) => message?.files ?? null)
			.map((message) =>
				message.files.filter((item) => item.type === 'doc' || item.type === 'collection')
			)
			.flat(1);

548
549
		console.log(docs);

Timothy J. Baek's avatar
Timothy J. Baek committed
550
		scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
551

552
		const [res, controller] = await generateOpenAIChatCompletion(
553
554
555
556
557
558
			localStorage.token,
			{
				model: model.id,
				stream: true,
				messages: [
					$settings.system
Timothy J. Baek's avatar
Timothy J. Baek committed
559
						? {
560
561
								role: 'system',
								content: $settings.system
Timothy J. Baek's avatar
Timothy J. Baek committed
562
						  }
563
						: undefined,
Danny Liu's avatar
Danny Liu committed
564
					...messages
565
566
567
568
				]
					.filter((message) => message)
					.map((message, idx, arr) => ({
						role: message.role,
569
570
						...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
						message.role === 'user'
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
							? {
									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,
596
597
598
599
600
601
				stop:
					$settings?.options?.stop ?? undefined
						? $settings?.options?.stop.map((str) =>
								decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
						  )
						: undefined,
602
603
604
605
				temperature: $settings?.options?.temperature ?? undefined,
				top_p: $settings?.options?.top_p ?? undefined,
				num_ctx: $settings?.options?.num_ctx ?? undefined,
				frequency_penalty: $settings?.options?.repeat_penalty ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
606
				max_tokens: $settings?.options?.num_predict ?? undefined,
607
608
				docs: docs.length > 0 ? docs : undefined,
				citations: docs.length > 0
609
			},
Timothy J. Baek's avatar
Timothy J. Baek committed
610
			model?.source?.toLowerCase() === 'litellm'
Timothy J. Baek's avatar
Timothy J. Baek committed
611
612
				? `${LITELLM_API_BASE_URL}/v1`
				: `${OPENAI_API_BASE_URL}`
613
		);
614

Timothy J. Baek's avatar
Timothy J. Baek committed
615
616
617
618
619
		// Wait until history/message have been updated
		await tick();

		scrollToBottom();

620
621
		if (res && res.ok && res.body) {
			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
622
623

			for await (const update of textStream) {
624
				const { value, done, citations } = update;
Timothy J. Baek's avatar
Timothy J. Baek committed
625
626
627
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
628
629
630
631
632

					if (stopResponseFlag) {
						controller.abort('User: Stop Response');
					}

Timothy J. Baek's avatar
Timothy J. Baek committed
633
634
					break;
				}
635

636
637
638
639
640
				if (citations) {
					responseMessage.citations = citations;
					continue;
				}

641
642
643
644
645
				if (responseMessage.content == '' && value == '\n') {
					continue;
				} else {
					responseMessage.content += value;
					messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
646
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
647

Timothy J. Baek's avatar
Timothy J. Baek committed
648
649
650
				if ($settings.notificationEnabled && !document.hasFocus()) {
					const notification = new Notification(`OpenAI ${model}`, {
						body: responseMessage.content,
651
						icon: `${WEBUI_BASE_URL}/static/favicon.png`
Timothy J. Baek's avatar
Timothy J. Baek committed
652
					});
Timothy J. Baek's avatar
Timothy J. Baek committed
653
654
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
655
656
657
				if ($settings.responseAutoCopy) {
					copyToClipboard(responseMessage.content);
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
658

Timothy J. Baek's avatar
Timothy J. Baek committed
659
				if ($settings.responseAutoPlayback) {
Timothy J. Baek's avatar
Timothy J. Baek committed
660
					await tick();
Timothy J. Baek's avatar
Timothy J. Baek committed
661
662
663
					document.getElementById(`speak-button-${responseMessage.id}`)?.click();
				}

664
				if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
665
					scrollToBottom();
666
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
667
			}
668

Timothy J. Baek's avatar
Timothy J. Baek committed
669
			if ($chatId == _chatId) {
670
671
672
673
674
675
676
				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
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
			}
		} else {
			if (res !== null) {
				const error = await res.json();
				console.log(error);
				if ('detail' in error) {
					toast.error(error.detail);
					responseMessage.content = error.detail;
				} else {
					if ('message' in error.error) {
						toast.error(error.error.message);
						responseMessage.content = error.error.message;
					} else {
						toast.error(error.error);
						responseMessage.content = error.error;
					}
693
				}
Timothy J. Baek's avatar
Timothy J. Baek committed
694
			} else {
Ased Mammad's avatar
Ased Mammad committed
695
				toast.error(
696
697
698
					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
						provider: model.name ?? model.id
					})
Ased Mammad's avatar
Ased Mammad committed
699
700
				);
				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
701
					provider: model.name ?? model.id
Ased Mammad's avatar
Ased Mammad committed
702
				});
703
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
704
705

			responseMessage.error = true;
Ased Mammad's avatar
Ased Mammad committed
706
			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
707
				provider: model.name ?? model.id
Ased Mammad's avatar
Ased Mammad committed
708
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
709
710
711
712
713
714
715
716
			responseMessage.done = true;
			messages = messages;
		}

		stopResponseFlag = false;
		await tick();

		if (autoScroll) {
Timothy J. Baek's avatar
Timothy J. Baek committed
717
			scrollToBottom();
Timothy J. Baek's avatar
Timothy J. Baek committed
718
719
720
721
		}

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

723
724
			const _title = await generateChatTitle(userPrompt);
			await setChatTitle(_chatId, _title);
725
		}
726
727
	};

728
729
730
731
732
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

733
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
734
		console.log('regenerateResponse');
735
736
737
		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
738

739
740
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
741

Timothy J. Baek's avatar
Timothy J. Baek committed
742
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
743
		}
744
	};
745

Timothy J. Baek's avatar
Timothy J. Baek committed
746
747
748
749
750
751
	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];
752
753
754
			responseMessage.done = false;
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
			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
772
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
773
		} else {
Ased Mammad's avatar
Ased Mammad committed
774
			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
Timothy J. Baek's avatar
Timothy J. Baek committed
775
776
777
		}
	};

778
779
780
781
782
783
784
785
786
787
788
	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
789
790
			const title = await generateTitle(
				localStorage.token,
791
				$settings?.title?.prompt ??
Ased Mammad's avatar
Ased Mammad committed
792
793
794
					$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}}',
795
796
797
				titleModelId,
				userPrompt,
				titleModel?.external ?? false
798
					? titleModel?.source?.toLowerCase() === 'litellm'
799
800
801
						? `${LITELLM_API_BASE_URL}/v1`
						: `${OPENAI_API_BASE_URL}`
					: `${OLLAMA_API_BASE_URL}/v1`
Timothy J. Baek's avatar
Timothy J. Baek committed
802
803
			);

804
			return title;
805
		} else {
806
			return `${userPrompt}`;
807
808
809
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
810
811
812
813
814
815
816
817
818
819
820
	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));
		}
	};

821
822
823
824
825
826
827
828
829
	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
830
831
832
833

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

		_tags.set(await getAllChatTags(localStorage.token));
836
837
838
839
840
	};

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

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

		_tags.set(await getAllChatTags(localStorage.token));
847
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
848
849
</script>

850
851
<svelte:head>
	<title>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
852
853
854
		{title
			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
			: `${$WEBUI_NAME}`}
855
856
857
	</title>
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
858
859
860
861
862
<div
	class="min-h-screen max-h-screen {$showSidebar
		? 'lg:max-w-[calc(100%-260px)]'
		: ''} w-full max-w-full flex flex-col"
>
Timothy J. Baek's avatar
Timothy J. Baek committed
863
864
865
866
867
	<Navbar
		{title}
		bind:selectedModels
		bind:showModelSelector
		shareEnabled={messages.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
868
		{chat}
Timothy J. Baek's avatar
Timothy J. Baek committed
869
870
		{initNewChat}
	/>
Timothy J. Baek's avatar
Timothy J. Baek committed
871
872
	<div class="flex flex-col flex-auto">
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
873
			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
874
			id="messages-container"
875
			bind:this={messagesContainerElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
876
			on:scroll={(e) => {
877
878
				autoScroll =
					messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
879
					messagesContainerElement.clientHeight + 5;
Timothy J. Baek's avatar
Timothy J. Baek committed
880
881
			}}
		>
Timothy J. Baek's avatar
Timothy J. Baek committed
882
			<div class=" h-full w-full flex flex-col pt-2 pb-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
883
884
885
886
887
888
889
890
				<Messages
					chatId={$chatId}
					{selectedModels}
					{selectedModelfiles}
					{processing}
					bind:history
					bind:messages
					bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
891
					bind:prompt
Timothy J. Baek's avatar
Timothy J. Baek committed
892
					bottomPadding={files.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
893
894
					suggestionPrompts={selectedModelfile?.suggestionPrompts ??
						$config.default_prompt_suggestions}
Timothy J. Baek's avatar
Timothy J. Baek committed
895
896
897
898
899
					{sendPrompt}
					{continueGeneration}
					{regenerateResponse}
				/>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
900
		</div>
901
902
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
903
904
905
906
907
908
909
910
911
912

<MessageInput
	bind:files
	bind:prompt
	bind:autoScroll
	bind:selectedModel={atSelectedModel}
	{messages}
	{submitPrompt}
	{stopResponse}
/>