+layout.svelte 10.6 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
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
38

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

Timothy J. Baek's avatar
Timothy J. Baek committed
41
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
42
	let loaded = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
43
	let showShortcutsButtonElement: HTMLButtonElement;
44
45
46
	let DB = null;
	let localDBChats = [];

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

49
	const getModels = async () => {
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' }] : [])), []);

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
					if (localDBChats.length === 0) {
						await deleteDB('Chats');
					}
				}
103

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

			console.log();
110
111
112
113

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
183
184
185
186
				// Check if Ctrl + / is pressed
				if (isCtrlPressed && event.key === '/') {
					event.preventDefault();
					console.log('showShortcuts');
187
					showShortcutsButtonElement.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
				}
			});

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
202
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
203
	<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
Timothy J. Baek's avatar
Timothy J. Baek committed
204
		<Tooltip content="Help" placement="left">
Timothy J. Baek's avatar
Timothy J. Baek committed
205
206
207
208
209
210
211
212
213
214
215
			<button
				id="show-shortcuts-button"
				bind:this={showShortcutsButtonElement}
				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>
		</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
216
217
218
219
	</div>

	<ShortcutsModal bind:show={showShortcuts} />

Timothy J. Baek's avatar
Timothy J. Baek committed
220
	<div class="app relative">
221
		{#if !['user', 'admin'].includes($user.role)}
222
			<div class="fixed w-full h-full flex z-50">
223
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
224
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
				>
					<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
240
									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"
241
242
243
244
									on:click={async () => {
										location.href = '/';
									}}
								>
Ased Mammad's avatar
Ased Mammad committed
245
									{$i18n.t('Check Again')}
246
247
248
249
250
251
252
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localStorage.removeItem('token');
										location.href = '/auth';
Ased Mammad's avatar
Ased Mammad committed
253
									}}>{$i18n.t('Sign Out')}</button
254
255
256
257
258
259
								>
							</div>
						</div>
					</div>
				</div>
			</div>
260
261
262
		{: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
263
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
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">
								Important Update<br /> Action Required for Chat Log Storage
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
272
273
274
275
276
277
278
279
								{$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!'
								)}
280
281
282
283
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
284
									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"
285
286
287
288
289
290
291
292
									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]);
293
										await deleteDB('Chats');
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 = [];
Ased Mammad's avatar
Ased Mammad committed
305
									}}>{$i18n.t('Close')}</button
306
307
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
308
309
310
311
312
313
						</div>
					</div>
				</div>
			</div>
		{/if}

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

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