+layout.svelte 12.2 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import toast from 'svelte-french-toast';
3
	import { openDB, deleteDB } from 'idb';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
	import { onMount, tick } from 'svelte';
5
6
	import { goto } from '$app/navigation';

7
8
9
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

10
	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
11
	import { getModelfiles } from '$lib/apis/modelfiles';
12
	import { getPrompts } from '$lib/apis/prompts';
13

Timothy J. Baek's avatar
Timothy J. Baek committed
14
	import { getOpenAIModels } from '$lib/apis/openai';
15
	import { getLiteLLMModels } from '$lib/apis/litellm';
Timothy J. Baek's avatar
Timothy J. Baek committed
16

Timothy J. Baek's avatar
Timothy J. Baek committed
17
18
19
20
21
22
23
	import {
		user,
		showSettings,
		settings,
		models,
		modelfiles,
		prompts,
Timothy J. Baek's avatar
Timothy J. Baek committed
24
25
		documents,
		tags
Timothy J. Baek's avatar
Timothy J. Baek committed
26
	} from '$lib/stores';
27
	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
28

Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
	import Sidebar from '$lib/components/layout/Sidebar.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	import { checkVersion } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	import { getDocs } from '$lib/apis/documents';
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	import { getAllChatTags } from '$lib/apis/chats';
Timothy J. Baek's avatar
Timothy J. Baek committed
35

Timothy J. Baek's avatar
Timothy J. Baek committed
36
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
37
	let loaded = false;
38

39
40
41
	let DB = null;
	let localDBChats = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
42
43
	let showShortcuts = false;

44
45
	const getModels = async () => {
		let models = [];
46
		models.push(
47
			...(await getOllamaModels(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
48
49
50
				toast.error(error);
				return [];
			}))
51
		);
52

53
54
55
56
57
58
59
60
61
62
		// $settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1',
		// 		$settings.OPENAI_API_KEY

		const openAIModels = await getOpenAIModels(localStorage.token).catch((error) => {
			console.log(error);
			return null;
		});

		models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));

63
64
65
66
67
68
69
		const liteLLMModels = await getLiteLLMModels(localStorage.token).catch((error) => {
			console.log(error);
			return null;
		});

		models.push(...(liteLLMModels ? [{ name: 'hr' }, ...liteLLMModels] : []));

70
71
72
		return models;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
73
74
	const setOllamaVersion = async (version: string = '') => {
		if (version === '') {
75
			version = await getOllamaVersion(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
76
				return '';
Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
79
80
81
82
83
84

		ollamaVersion = version;

		console.log(ollamaVersion);
		if (checkVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion)) {
			toast.error(`Ollama Version: ${ollamaVersion !== '' ? ollamaVersion : 'Not Detected'}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
85
86
87
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
88
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
89
		if ($user === undefined) {
Timothy J. Baek's avatar
Timothy J. Baek committed
90
			await goto('/auth');
Timothy J. Baek's avatar
Timothy J. Baek committed
91
		} else if (['user', 'admin'].includes($user.role)) {
92
93
94
			try {
				// Check if IndexedDB exists
				DB = await openDB('Chats', 1);
95

96
97
98
				if (DB) {
					const chats = await DB.getAllFromIndex('chats', 'timestamp');
					localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
99

100
101
102
103
104
105
					if (localDBChats.length === 0) {
						await deleteDB('Chats');
					}

					console.log('localdb', localDBChats);
				}
106

107
108
109
110
111
				console.log(DB);
			} catch (error) {
				// IndexedDB Not Found
				console.log('IDB Not Found');
			}
112
113

			console.log();
Timothy J. Baek's avatar
Timothy J. Baek committed
114
			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
115

Timothy J. Baek's avatar
Timothy J. Baek committed
116
			await modelfiles.set(await getModelfiles(localStorage.token));
117
			await prompts.set(await getPrompts(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
118
			await documents.set(await getDocs(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
119
			await tags.set(await getAllChatTags(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
120

Timothy J. Baek's avatar
Timothy J. Baek committed
121
122
			modelfiles.subscribe(async () => {
				// should fetch models
123
				await models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
124
			});
125

Timothy J. Baek's avatar
Timothy J. Baek committed
126
			await setOllamaVersion();
Timothy J. Baek's avatar
Timothy J. Baek committed
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

			document.addEventListener('keydown', function (event) {
				const isCtrlPressed = event.ctrlKey || event.metaKey; // metaKey is for Cmd key on Mac
				// Check if the Shift key is pressed
				const isShiftPressed = event.shiftKey;

				// Check if Ctrl + Shift + O is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 'o') {
					event.preventDefault();
					console.log('newChat');
					document.getElementById('sidebar-new-chat-button')?.click();
				}

				// Check if Shift + Esc is pressed
				if (isShiftPressed && event.key === 'Escape') {
					event.preventDefault();
					console.log('focusInput');
					document.getElementById('chat-textarea')?.focus();
				}

				// Check if Ctrl + Shift + ; is pressed
				if (isCtrlPressed && isShiftPressed && event.key === ';') {
					event.preventDefault();
					console.log('copyLastCodeBlock');
					const button = [...document.getElementsByClassName('copy-code-button')]?.at(-1);
					button?.click();
				}

				// Check if Ctrl + Shift + C is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 'c') {
					event.preventDefault();
					console.log('copyLastResponse');
					const button = [...document.getElementsByClassName('copy-response-button')]?.at(-1);
					console.log(button);
					button?.click();
				}

				// Check if Ctrl + Shift + S is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 's') {
					event.preventDefault();
					console.log('toggleSidebar');
					document.getElementById('sidebar-toggle-button')?.click();
				}

				// Check if Ctrl + Shift + Backspace is pressed
				if (isCtrlPressed && isShiftPressed && event.key === 'Backspace') {
					event.preventDefault();
					console.log('deleteChat');
					document.getElementById('delete-chat-button')?.click();
				}

178
179
				// Check if Ctrl + . is pressed
				if (isCtrlPressed && event.key === '.') {
180
181
182
183
184
					event.preventDefault();
					console.log('openSettings');
					document.getElementById('open-settings-button')?.click();
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
185
186
187
188
189
190
191
192
				// Check if Ctrl + / is pressed
				if (isCtrlPressed && event.key === '/') {
					event.preventDefault();
					console.log('showShortcuts');
					document.getElementById('show-shortcuts-button')?.click();
				}
			});

Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
			await tick();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
195

Timothy J. Baek's avatar
Timothy J. Baek committed
196
197
		loaded = true;
	});
198
199
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
200
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
201
202
203
204
205
206
207
208
209
210
211
212
213
214
	<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
		<button
			id="show-shortcuts-button"
			class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
			on:click={() => {
				showShortcuts = !showShortcuts;
			}}
		>
			?
		</button>
	</div>

	<ShortcutsModal bind:show={showShortcuts} />

Timothy J. Baek's avatar
Timothy J. Baek committed
215
	<div class="app relative">
216
		{#if !['user', 'admin'].includes($user.role)}
217
			<div class="fixed w-full h-full flex z-50">
218
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
219
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Account Activation Pending<br /> Contact Admin for WebUI Access
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Your account status is currently pending activation. To access the WebUI, please
								reach out to the administrator. Admins can manage user statuses from the Admin
								Panel.
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
235
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
									on:click={async () => {
										location.href = '/';
									}}
								>
									Check Again
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localStorage.removeItem('token');
										location.href = '/auth';
									}}>Sign Out</button
								>
							</div>
						</div>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
255
		{:else if checkVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion ?? '0')}
256
			<div class="fixed w-full h-full flex z-50">
Timothy J. Baek's avatar
Timothy J. Baek committed
257
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
258
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
Timothy J. Baek's avatar
Timothy J. Baek committed
259
				>
260
261
262
263
264
265
266
267
268
269
270
271
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Connection Issue or Update Needed
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Oops! It seems like your Ollama needs a little attention. <br
									class=" hidden sm:flex"
								/>We've detected either a connection hiccup or observed that you're using an older
								version. Ensure you're on the latest Ollama version
								<br class=" hidden sm:flex" />(version
Timothy J. Baek's avatar
Timothy J. Baek committed
272
273
								<span class=" dark:text-white font-medium">{REQUIRED_OLLAMA_VERSION} or higher</span
								>) or check your connection.
274
275
276
277
278

								<div class="mt-1 text-sm">
									Trouble accessing Ollama?
									<a
										class=" text-black dark:text-white font-semibold underline"
Timothy J. Baek's avatar
rename  
Timothy J. Baek committed
279
										href="https://github.com/open-webui/open-webui#troubleshooting"
280
281
282
283
284
										target="_blank"
									>
										Click here for help.
									</a>
								</div>
285
286
287
288
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
289
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
290
									on:click={async () => {
291
292
										location.href = '/';
										// await setOllamaVersion();
293
294
295
296
297
298
299
300
									}}
								>
									Check Again
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
301
										await setOllamaVersion(REQUIRED_OLLAMA_VERSION);
302
									}}>Close</button
303
304
305
306
307
308
309
310
311
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		{:else if localDBChats.length > 0}
			<div class="fixed w-full h-full flex z-50">
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
312
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
313
314
315
316
317
318
319
320
321
322
323
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Important Update<br /> Action Required for Chat Log Storage
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Saving chat logs directly to your browser's storage is no longer supported. Please
								take a moment to download and delete your chat logs by clicking the button below.
								Don't worry, you can easily re-import your chat logs to the backend through <span
Timothy J. Baek's avatar
Timothy J. Baek committed
324
									class="font-semibold dark:text-white">Settings > Chats > Import Chats</span
325
326
327
328
329
330
								>. This ensures that your valuable conversations are securely saved to your backend
								database. Thank you!
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
331
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
332
333
334
335
336
337
338
339
									on:click={async () => {
										let blob = new Blob([JSON.stringify(localDBChats)], {
											type: 'application/json'
										});
										saveAs(blob, `chat-export-${Date.now()}.json`);

										const tx = DB.transaction('chats', 'readwrite');
										await Promise.all([tx.store.clear(), tx.done]);
340
										await deleteDB('Chats');
341
342
343
344
345
346
347
348
349
350
351
352

										localDBChats = [];
									}}
								>
									Download & Delete
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localDBChats = [];
									}}>Close</button
353
354
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
355
356
357
358
359
360
						</div>
					</div>
				</div>
			</div>
		{/if}

361
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
362
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
363
364
365
366
367
368
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
			<slot />
		</div>
	</div>
369
{/if}
370
371
372
373
374
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

<style>
	.loading {
		display: inline-block;
		clip-path: inset(0 1ch 0 0);
		animation: l 1s steps(3) infinite;
		letter-spacing: -0.5px;
	}

	@keyframes l {
		to {
			clip-path: inset(0 -1ch 0 0);
		}
	}

	pre[class*='language-'] {
		position: relative;
		overflow: auto;

		/* make space  */
		margin: 5px 0;
		padding: 1.75rem 0 1.75rem 1rem;
		border-radius: 10px;
	}

	pre[class*='language-'] button {
		position: absolute;
		top: 5px;
		right: 5px;

		font-size: 0.9rem;
		padding: 0.15rem;
		background-color: #828282;

		border: ridge 1px #7b7b7c;
		border-radius: 5px;
		text-shadow: #c4c4c4 0 0 2px;
	}

	pre[class*='language-'] button:hover {
		cursor: pointer;
		background-color: #bcbabb;
	}
</style>