+layout.svelte 11.8 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';
Timothy J. Baek's avatar
Timothy J. Baek committed
15

16
	import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
17
	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
18

Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
	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
21
	import { checkVersion } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
22
	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
23

Timothy J. Baek's avatar
Timothy J. Baek committed
24
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
25
	let loaded = false;
26

27
28
29
	let DB = null;
	let localDBChats = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
30
31
	let showShortcuts = false;

32
33
	const getModels = async () => {
		let models = [];
34
		models.push(
35
			...(await getOllamaModels(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
36
37
38
				toast.error(error);
				return [];
			}))
39
40
41
42
43
44
45
		);
		// If OpenAI API Key exists
		if ($settings.OPENAI_API_KEY) {
			const openAIModels = await getOpenAIModels(
				$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1',
				$settings.OPENAI_API_KEY
			).catch((error) => {
46
				console.log(error);
47
				toast.error(error);
48
49
50
				return null;
			});

51
			models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
52
53
54
55
		}
		return models;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
56
57
	const setOllamaVersion = async (version: string = '') => {
		if (version === '') {
58
			version = await getOllamaVersion(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
59
				return '';
Timothy J. Baek's avatar
Timothy J. Baek committed
60
61
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
62
63
64
65
66
67

		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
68
69
70
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
71
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
72
		if ($user === undefined) {
Timothy J. Baek's avatar
Timothy J. Baek committed
73
			await goto('/auth');
Timothy J. Baek's avatar
Timothy J. Baek committed
74
		} else if (['user', 'admin'].includes($user.role)) {
75
76
77
			try {
				// Check if IndexedDB exists
				DB = await openDB('Chats', 1);
78

79
80
81
				if (DB) {
					const chats = await DB.getAllFromIndex('chats', 'timestamp');
					localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
82

83
84
85
86
87
88
					if (localDBChats.length === 0) {
						await deleteDB('Chats');
					}

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

90
91
92
93
94
				console.log(DB);
			} catch (error) {
				// IndexedDB Not Found
				console.log('IDB Not Found');
			}
95
96

			console.log();
Timothy J. Baek's avatar
Timothy J. Baek committed
97
			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
98
			await modelfiles.set(await getModelfiles(localStorage.token));
99
100
101

			await prompts.set(await getPrompts(localStorage.token));

102
			console.log($modelfiles);
Timothy J. Baek's avatar
Timothy J. Baek committed
103

Timothy J. Baek's avatar
Timothy J. Baek committed
104
105
			modelfiles.subscribe(async () => {
				// should fetch models
106
				await models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
107
			});
108

Timothy J. Baek's avatar
Timothy J. Baek committed
109
			await setOllamaVersion();
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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
156
157
158
159
160

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

161
162
				// Check if Ctrl + . is pressed
				if (isCtrlPressed && event.key === '.') {
163
164
165
166
167
					event.preventDefault();
					console.log('openSettings');
					document.getElementById('open-settings-button')?.click();
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
170
171
172
173
174
175
				// 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
176
177
			await tick();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
178

Timothy J. Baek's avatar
Timothy J. Baek committed
179
180
		loaded = true;
	});
181
182
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
183
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
	<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
198
	<div class="app relative">
199
		{#if !['user', 'admin'].includes($user.role)}
200
			<div class="fixed w-full h-full flex z-50">
201
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
202
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
				>
					<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
218
									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"
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
									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
238
		{:else if checkVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion ?? '0')}
239
			<div class="fixed w-full h-full flex z-50">
Timothy J. Baek's avatar
Timothy J. Baek committed
240
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
241
					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
242
				>
243
244
245
246
247
248
249
250
251
252
253
254
					<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
255
256
								<span class=" dark:text-white font-medium">{REQUIRED_OLLAMA_VERSION} or higher</span
								>) or check your connection.
257
258
259
260
261
262
263
264
265
266
267

								<div class="mt-1 text-sm">
									Trouble accessing Ollama?
									<a
										class=" text-black dark:text-white font-semibold underline"
										href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
										target="_blank"
									>
										Click here for help.
									</a>
								</div>
268
269
270
271
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
272
									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"
273
									on:click={async () => {
274
275
										location.href = '/';
										// await setOllamaVersion();
276
277
278
279
280
281
282
283
									}}
								>
									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
284
										await setOllamaVersion(REQUIRED_OLLAMA_VERSION);
285
									}}>Close</button
286
287
288
289
290
291
292
293
294
								>
							</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
295
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
296
297
298
299
300
301
302
303
304
305
306
				>
					<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
307
									class="font-semibold dark:text-white">Settings > Chats > Import Chats</span
308
309
310
311
312
313
								>. 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
314
									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"
315
316
317
318
319
320
321
322
									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]);
323
										await deleteDB('Chats');
324
325
326
327
328
329
330
331
332
333
334
335

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

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localDBChats = [];
									}}>Close</button
336
337
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
338
339
340
341
342
343
						</div>
					</div>
				</div>
			</div>
		{/if}

344
345
346
347
348
349
350
351
		<div
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 min-h-screen overflow-auto flex flex-row"
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
			<slot />
		</div>
	</div>
352
{/if}
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
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

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