+layout.svelte 10.5 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';
4
5
6
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

7
8
9
	import { onMount, tick } from 'svelte';
	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

Timothy J. Baek's avatar
Timothy J. Baek committed
38
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
39
	let loaded = false;
40

41
42
43
	let DB = null;
	let localDBChats = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
44
45
	let showShortcuts = false;

46
	const getModels = async () => {
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
		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' }] : [])), []);

		// models.push(...(ollamaModels ? [{ name: 'hr' }, ...ollamaModels] : []));
		// models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
		// models.push(...(liteLLMModels ? [{ name: 'hr' }, ...liteLLMModels] : []));
69
70
71
		return models;
	};

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

		ollamaVersion = version;

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

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

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

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

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
			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();
				}

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

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

190
191
192
			if ($user.role === 'admin') {
				showChangelog.set(localStorage.version !== $config.version);
			}
193

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
201
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
204
205
206
207
208
209
210
211
212
213
214
215
	<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
216
	<div class="app relative">
217
		{#if !['user', 'admin'].includes($user.role)}
218
			<div class="fixed w-full h-full flex z-50">
219
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
220
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
				>
					<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
236
									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"
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
									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>
256
257
258
		{: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
259
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
260
261
262
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">
								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
271
									class="font-semibold dark:text-white">Settings > Chats > Import Chats</span
272
273
274
275
276
277
								>. 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
278
									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"
279
280
281
282
283
284
285
286
									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]);
287
										await deleteDB('Chats');
288
289
290
291
292
293
294
295
296
297
298
299

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

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

308
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
309
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
310
311
312
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
313
			<ChangelogModal bind:show={$showChangelog} />
314
315
316
			<slot />
		</div>
	</div>
317
{/if}
318
319
320
321
322
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

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