+layout.svelte 10.5 KB
Newer Older
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
3
	import { onMount, tick, getContext } from 'svelte';
4
	import { openDB, deleteDB } from 'idb';
5
6
7
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

8
9
	import { goto } from '$app/navigation';

10
	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
11
	import { getModelfiles } from '$lib/apis/modelfiles';
12
	import { getPrompts } from '$lib/apis/prompts';
Timothy J. Baek's avatar
Timothy J. Baek committed
13
	import { getOpenAIModels } from '$lib/apis/openai';
14
	import { getLiteLLMModels } from '$lib/apis/litellm';
15
16
	import { getDocs } from '$lib/apis/documents';
	import { getAllChatTags } from '$lib/apis/chats';
Timothy J. Baek's avatar
Timothy J. Baek committed
17

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

Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
	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
35
	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
36
	import ChangelogModal from '$lib/components/ChangelogModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
37

38
39
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
40
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
41
	let loaded = false;
42

43
44
45
	let DB = null;
	let localDBChats = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
46
47
	let showShortcuts = false;

48
	const getModels = async () => {
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
		let models = await Promise.all([
			await getOllamaModels(localStorage.token).catch((error) => {
				console.log(error);
				return null;
			}),
			await getOpenAIModels(localStorage.token).catch((error) => {
				console.log(error);
				return null;
			}),
			await getLiteLLMModels(localStorage.token).catch((error) => {
				console.log(error);
				return null;
			})
		]);

		models = models
			.filter((models) => models)
			.reduce((a, e, i, arr) => a.concat(e, ...(i < arr.length - 1 ? [{ name: 'hr' }] : [])), []);

68
69
70
		return models;
	};

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

		ollamaVersion = version;

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

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

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

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

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

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

			console.log();
112
113
114
115

			await models.set(await getModels());
			await tick();

Timothy J. Baek's avatar
Timothy J. Baek committed
116
			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
117

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
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();
				}
			});

193
194
195
			if ($user.role === 'admin') {
				showChangelog.set(localStorage.version !== $config.version);
			}
196

Timothy J. Baek's avatar
Timothy J. Baek committed
197
198
			await tick();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
199

Timothy J. Baek's avatar
Timothy J. Baek committed
200
201
		loaded = true;
	});
202
203
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
204
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
205
206
207
208
209
210
211
212
213
214
215
216
217
218
	<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
219
	<div class="app relative">
220
		{#if !['user', 'admin'].includes($user.role)}
221
			<div class="fixed w-full h-full flex z-50">
222
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
223
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
				>
					<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
239
									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"
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
									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>
259
260
261
		{: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
262
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
263
264
265
266
267
268
269
270
				>
					<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">
271
272
273
274
275
276
277
278
								{$i18n.t(
									"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 class="font-semibold dark:text-white"
									>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
								>. {$i18n.t(
									'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
								)}
279
280
281
282
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
283
									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"
284
285
286
287
288
289
290
291
									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]);
292
										await deleteDB('Chats');
293
294
295
296
297
298
299
300
301
302
303
304

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

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localDBChats = [];
									}}>Close</button
305
306
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
307
308
309
310
311
312
						</div>
					</div>
				</div>
			</div>
		{/if}

313
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
314
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
315
316
317
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
318
			<ChangelogModal bind:show={$showChangelog} />
319
320
321
			<slot />
		</div>
	</div>
322
{/if}
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366

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