Sidebar.svelte 17.8 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
2
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
5
6
7
8
9
10
11
	import {
		user,
		chats,
		settings,
		showSettings,
		chatId,
		tags,
		showSidebar,
Timothy J. Baek's avatar
Timothy J. Baek committed
12
		mobile,
Timothy J. Baek's avatar
Timothy J. Baek committed
13
		showArchivedChats,
14
15
16
		pinnedChats,
		pageSkip,
		pageLimit,
17
18
		scrollPaginationEnabled,
		tagView
Timothy J. Baek's avatar
Timothy J. Baek committed
19
	} from '$lib/stores';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
20
	import { onMount, getContext, tick } from 'svelte';
21
22

	const i18n = getContext('i18n');
23
	import { disablePagination } from '$lib/utils';
24

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
25
	import { updateUserSettings } from '$lib/apis/users';
Timothy J. Baek's avatar
Timothy J. Baek committed
26
27
28
	import {
		deleteChatById,
		getChatList,
Henry Holloway's avatar
Henry Holloway committed
29
		getChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
30
		getChatListByTagName,
Timothy J. Baek's avatar
Timothy J. Baek committed
31
		updateChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
32
		getAllChatTags,
Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
		archiveChatById,
		cloneChatById
Timothy J. Baek's avatar
Timothy J. Baek committed
35
	} from '$lib/apis/chats';
36
	import { WEBUI_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
37

38
	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
39
	import UserMenu from './Sidebar/UserMenu.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
40
	import ChatItem from './Sidebar/ChatItem.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
41
	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
Aryan Kothari's avatar
Aryan Kothari committed
42
	import Sparkles from '../icons/Sparkles.svelte';
43

Timothy J. Baek's avatar
Timothy J. Baek committed
44
	const BREAKPOINT = 768;
Timothy J. Baek's avatar
Timothy J. Baek committed
45

46
	let navElement;
47
	let search = '';
48

49
50
	let shiftKey = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
51
	let selectedChatId = null;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
52
	let deleteChat = null;
53

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
54
	let showDeleteConfirm = false;
55
	let showDropdown = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
56

57
	let filteredChatList = [];
58
59
60
	let paginationScrollThreashold = 0.6;
	let nextPageLoading = false;
	let chatPagniationComplete = false;
61
62
63
64
	// number of chats per page depends on screen size.
	// 35px is the height of each chat item.
	// load 5 extra chats
	pageLimit.set(Math.round(window.innerHeight / 35) + 5);
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

	$: filteredChatList = $chats.filter((chat) => {
		if (search === '') {
			return true;
		} else {
			let title = chat.title.toLowerCase();
			const query = search.toLowerCase();

			let contentMatches = false;
			// Access the messages within chat.chat.messages
			if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) {
				contentMatches = chat.chat.messages.some((message) => {
					// Check if message.content exists and includes the search query
					return message.content && message.content.toLowerCase().includes(query);
				});
			}

			return title.includes(query) || contentMatches;
		}
	});

86
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
87
88
89
90
91
92
93
94
95
96
		mobile.subscribe((e) => {
			if ($showSidebar && e) {
				showSidebar.set(false);
			}

			if (!$showSidebar && !e) {
				showSidebar.set(true);
			}
		});

Timothy J. Baek's avatar
Timothy J. Baek committed
97
		showSidebar.set(window.innerWidth > BREAKPOINT);
Timothy J. Baek's avatar
Timothy J. Baek committed
98
99

		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
100
		await chats.set(await getChatList(localStorage.token, $pageSkip, $pageLimit));
Timothy J. Baek's avatar
Timothy J. Baek committed
101

102
103
		let touchstart;
		let touchend;
Timothy J. Baek's avatar
Timothy J. Baek committed
104
105
106

		function checkDirection() {
			const screenWidth = window.innerWidth;
107
			const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
Timothy J. Baek's avatar
Timothy J. Baek committed
108
			if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
109
				if (touchend.screenX < touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
110
					showSidebar.set(false);
Timothy J. Baek's avatar
Timothy J. Baek committed
111
				}
112
				if (touchend.screenX > touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
113
					showSidebar.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116
117
				}
			}
		}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
118
		const onTouchStart = (e) => {
119
120
			touchstart = e.changedTouches[0];
			console.log(touchstart.clientX);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
121
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
122

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
123
		const onTouchEnd = (e) => {
124
			touchend = e.changedTouches[0];
Timothy J. Baek's avatar
Timothy J. Baek committed
125
			checkDirection();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
126
127
		};

128
129
130
131
132
133
134
135
136
137
138
139
		const onKeyDown = (e) => {
			if (e.key === 'Shift') {
				shiftKey = true;
			}
		};

		const onKeyUp = (e) => {
			if (e.key === 'Shift') {
				shiftKey = false;
			}
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
140
141
142
143
		const onFocus = () => {};

		const onBlur = () => {
			shiftKey = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
144
			selectedChatId = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
145
146
147
148
		};

		window.addEventListener('keydown', onKeyDown);
		window.addEventListener('keyup', onKeyUp);
149

150
151
		window.addEventListener('touchstart', onTouchStart);
		window.addEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
152

Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
		window.addEventListener('focus', onFocus);
		window.addEventListener('blur', onBlur);

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
156
		return () => {
157
158
159
			window.removeEventListener('keydown', onKeyDown);
			window.removeEventListener('keyup', onKeyUp);

160
161
			window.removeEventListener('touchstart', onTouchStart);
			window.removeEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
164

			window.removeEventListener('focus', onFocus);
			window.removeEventListener('blur', onBlur);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
165
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
	});

	// Helper function to fetch and add chat content to each chat
	const enrichChatsWithContent = async (chatList) => {
		const enrichedChats = await Promise.all(
			chatList.map(async (chat) => {
				const chatDetails = await getChatById(localStorage.token, chat.id).catch((error) => null); // Handle error or non-existent chat gracefully
				if (chatDetails) {
					chat.chat = chatDetails.chat; // Assuming chatDetails.chat contains the chat content
				}
				return chat;
			})
		);

		await chats.set(enrichedChats);
	};
182

183
184
	const saveSettings = async (updated) => {
		await settings.set({ ...$settings, ...updated });
185
		await updateUserSettings(localStorage.token, { ui: $settings });
186
187
		location.href = '/';
	};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
188
189
190
191
192
193
194
195
196
197
198
199
200

	const deleteChatHandler = async (id) => {
		const res = await deleteChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			return null;
		});

		if (res) {
			if ($chatId === id) {
				await chatId.set('');
				await tick();
				goto('/');
			}
201
202
203
			await chats.set(
				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
			);
204
			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
205
206
		}
	};
207
208
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
209
<ArchivedChatsModal
Timothy J. Baek's avatar
Timothy J. Baek committed
210
	bind:show={$showArchivedChats}
Timothy J. Baek's avatar
Timothy J. Baek committed
211
212
213
214
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
215

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
216
217
<DeleteConfirmDialog
	bind:show={showDeleteConfirm}
218
	title={$i18n.t('Delete chat?')}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
219
220
221
222
223
	on:confirm={() => {
		deleteChatHandler(deleteChat.id);
	}}
>
	<div class=" text-sm text-gray-500">
224
		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteChat.title}</span>.
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
225
226
227
	</div>
</DeleteConfirmDialog>

Timothy J. Baek's avatar
Timothy J. Baek committed
228
229
230
231
<!-- svelte-ignore a11y-no-static-element-interactions -->

{#if $showSidebar}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
232
		class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
235
236
237
238
		on:mousedown={() => {
			showSidebar.set(!$showSidebar);
		}}
	/>
{/if}

239
240
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
241
	id="sidebar"
Timothy J. Baek's avatar
Timothy J. Baek committed
242
	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
243
		? 'md:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
244
		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl
245
        "
Timothy J. Baek's avatar
Timothy J. Baek committed
246
	data-state={$showSidebar}
247
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
248
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
249
		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
250
251
252
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
253
		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
254
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
255
				id="sidebar-new-chat-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
256
				class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
257
				href="/"
258
				draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
259
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
260
					selectedChatId = null;
261
					await goto('/');
262
					const newChatButton = document.getElementById('new-chat-button');
263
264
					setTimeout(() => {
						newChatButton?.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
265
266
267
						if ($mobile) {
							showSidebar.set(false);
						}
268
					}, 0);
269
270
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
271
272
				<div class="self-center mx-1.5">
					<img
Timothy J. Baek's avatar
Timothy J. Baek committed
273
						crossorigin="anonymous"
Timothy J. Baek's avatar
Timothy J. Baek committed
274
275
276
277
278
						src="{WEBUI_BASE_URL}/static/favicon.png"
						class=" size-6 -translate-x-1.5 rounded-full"
						alt="logo"
					/>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
279
				<div class=" self-center font-medium text-sm text-gray-850 dark:text-white font-primary">
Timothy J. Baek's avatar
Timothy J. Baek committed
280
281
					{$i18n.t('New Chat')}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
282
				<div class="self-center ml-auto">
283
284
285
286
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
287
						class="size-5"
288
289
290
291
292
293
294
295
296
					>
						<path
							d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
						/>
						<path
							d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
						/>
					</svg>
				</div>
297
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
298
299

			<button
Timothy J. Baek's avatar
Timothy J. Baek committed
300
				class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
				on:click={() => {
					showSidebar.set(!$showSidebar);
				}}
			>
				<div class=" m-auto self-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="2"
						stroke="currentColor"
						class="size-5"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
						/>
					</svg>
				</div>
			</button>
322
323
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
324
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
325
			<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
326
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
327
					class="flex-grow flex space-x-3 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
328
					href="/workspace"
Timothy J. Baek's avatar
Timothy J. Baek committed
329
330
331
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
Timothy J. Baek's avatar
Timothy J. Baek committed
332
333
334
335

						if ($mobile) {
							showSidebar.set(false);
						}
Timothy J. Baek's avatar
Timothy J. Baek committed
336
					}}
337
					draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
338
339
340
341
342
343
				>
					<div class="self-center">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
344
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
345
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
346
							class="size-[1.1rem]"
Timothy J. Baek's avatar
Timothy J. Baek committed
347
348
349
350
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
351
								d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
Timothy J. Baek's avatar
Timothy J. Baek committed
352
353
354
							/>
						</svg>
					</div>
355

Timothy J. Baek's avatar
Timothy J. Baek committed
356
					<div class="flex self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
357
						<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
358
					</div>
359
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
360
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
361
		{/if}
362

363
364
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
365
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
366
					<div class=" text-left px-5 py-2">
367
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
368
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
369
370
371
372
373
							{$i18n.t(
								"When history is turned off, new chats on this browser won't appear in your history on any of your devices."
							)}
							<span class=" font-semibold"
								>{$i18n.t('This setting does not sync across browsers or devices.')}</span
374
375
376
377
378
							>
						</div>

						<div class="mt-3">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
379
								class="flex justify-center items-center space-x-1.5 px-3 py-2.5 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 transition text-gray-800 font-medium w-full"
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
								type="button"
								on:click={() => {
									saveSettings({
										saveChatHistory: true
									});
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-3 h-3"
								>
									<path
										fill-rule="evenodd"
										d="M8 1a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0v-6.5A.75.75 0 0 1 8 1ZM4.11 3.05a.75.75 0 0 1 0 1.06 5.5 5.5 0 1 0 7.78 0 .75.75 0 0 1 1.06-1.06 7 7 0 1 1-9.9 0 .75.75 0 0 1 1.06 0Z"
										clip-rule="evenodd"
									/>
								</svg>

Jannik Streidl's avatar
Jannik Streidl committed
400
								<div>{$i18n.t('Enable Chat History')}</div>
401
402
403
							</button>
						</div>
					</div>
404
				</div>
405
			{/if}
406

Timothy J. Baek's avatar
Timothy J. Baek committed
407
408
409
			<div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2">
				<div class="flex w-full rounded-xl" id="chat-search">
					<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
410
411
412
413
414
415
416
417
418
419
420
421
422
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
423

424
					<input
Timothy J. Baek's avatar
Timothy J. Baek committed
425
						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
Jannik Streidl's avatar
Jannik Streidl committed
426
						placeholder={$i18n.t('Search')}
427
						bind:value={search}
428
						on:focus={async () => {
429
							disablePagination();
430
431
							await chats.set(await getChatList(localStorage.token)); // when searching, load all chats

Timothy J. Baek's avatar
Timothy J. Baek committed
432
433
							enrichChatsWithContent($chats);
						}}
434
435
436
					/>
				</div>
			</div>
437

Timothy J. Baek's avatar
Timothy J. Baek committed
438
			{#if $tags.filter((t) => t.name !== 'pinned').length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
439
				<div class="px-2.5 mb-2 flex gap-1 flex-wrap">
Timothy J. Baek's avatar
Timothy J. Baek committed
440
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
441
						class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
442
						on:click={async () => {
443
							disablePagination();
444
445
446
447

							await chats.set(
								await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit)
							);
Timothy J. Baek's avatar
Timothy J. Baek committed
448
449
						}}
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
450
						{$i18n.t('all')}
Timothy J. Baek's avatar
Timothy J. Baek committed
451
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
452
					{#each $tags.filter((t) => t.name !== 'pinned') as tag}
Timothy J. Baek's avatar
Timothy J. Baek committed
453
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
454
							class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
455
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
456
457
								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
								if (chatIds.length === 0) {
458
									// no chats found in the tag
Timothy J. Baek's avatar
Timothy J. Baek committed
459
									await tags.set(await getAllChatTags(localStorage.token));
460
									disablePagination();
461
462
463
464
465
									chatIds = await getChatList(
										localStorage.token,
										$pageSkip * $pageLimit,
										$pageLimit
									);
Timothy J. Baek's avatar
Timothy J. Baek committed
466
								}
467
								tagView.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
468
								await chats.set(chatIds);
Timothy J. Baek's avatar
Timothy J. Baek committed
469
470
471
472
473
474
475
476
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
			{#if $pinnedChats.length > 0}
				<div class="pl-2 py-2 flex flex-col space-y-1">
					<div class="">
						<div class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium pb-1.5">
							{$i18n.t('Pinned')}
						</div>

						{#each $pinnedChats as chat, idx}
							<ChatItem
								{chat}
								{shiftKey}
								selected={selectedChatId === chat.id}
								on:select={() => {
									selectedChatId = chat.id;
								}}
								on:unselect={() => {
									selectedChatId = null;
								}}
								on:delete={(e) => {
									if ((e?.detail ?? '') === 'shift') {
										deleteChatHandler(chat.id);
									} else {
										deleteChat = chat;
										showDeleteConfirm = true;
									}
								}}
							/>
						{/each}
					</div>
				</div>
			{/if}

509
510
511
512
			<div
				class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden"
				on:scroll={async (e) => {
					if (!$scrollPaginationEnabled) return;
513
					if ($tagView) return;
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
					if (nextPageLoading) return;
					if (chatPagniationComplete) return;

					const maxScroll = e.target.scrollHeight - e.target.clientHeight;
					const currentPos = e.target.scrollTop;
					const ratio = currentPos / maxScroll;
					if (ratio >= paginationScrollThreashold) {
						nextPageLoading = true;
						pageSkip.set($pageSkip + 1);
						// extend existing chats
						const nextPageChats = await getChatList(
							localStorage.token,
							$pageSkip * $pageLimit,
							$pageLimit
						);
						// once the bottom of the list has been reached (no results) there is no need to continue querying
						chatPagniationComplete = nextPageChats.length === 0;
						await chats.set([...$chats, ...nextPageChats]);
						nextPageLoading = false;
					}
				}}
			>
536
				{#each filteredChatList as chat, idx}
Timothy J. Baek's avatar
Timothy J. Baek committed
537
					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
538
539
540
						<div
							class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
								? ''
Timothy J. Baek's avatar
Timothy J. Baek committed
541
								: 'pt-5'} pb-0.5"
542
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
543
							{$i18n.t(chat.time_range)}
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
							<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
							{$i18n.t('Today')}
							{$i18n.t('Yesterday')}
							{$i18n.t('Previous 7 days')}
							{$i18n.t('Previous 30 days')}
							{$i18n.t('January')}
							{$i18n.t('February')}
							{$i18n.t('March')}
							{$i18n.t('April')}
							{$i18n.t('May')}
							{$i18n.t('June')}
							{$i18n.t('July')}
							{$i18n.t('August')}
							{$i18n.t('September')}
							{$i18n.t('October')}
							{$i18n.t('November')}
							{$i18n.t('December')}
							-->
562
563
564
						</div>
					{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
565
566
					<ChatItem
						{chat}
567
						{shiftKey}
Timothy J. Baek's avatar
Timothy J. Baek committed
568
569
570
571
						selected={selectedChatId === chat.id}
						on:select={() => {
							selectedChatId = chat.id;
						}}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
572
573
574
						on:unselect={() => {
							selectedChatId = null;
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
575
576
577
578
579
580
581
						on:delete={(e) => {
							if ((e?.detail ?? '') === 'shift') {
								deleteChatHandler(chat.id);
							} else {
								deleteChat = chat;
								showDeleteConfirm = true;
							}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
582
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
583
					/>
584
				{/each}
Aryan Kothari's avatar
Aryan Kothari committed
585
586
587
588
589
				{#if nextPageLoading}
					<div class="w-full flex justify-center py-4 animate-pulse">
						<Sparkles />
					</div>
				{/if}
590
			</div>
591
592
		</div>

593
594
595
		<div class="px-2.5">
			<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->

Timothy J. Baek's avatar
Timothy J. Baek committed
596
			<div class="flex flex-col font-primary">
597
598
599
600
601
602
603
604
605
606
607
608
609
				{#if $user !== undefined}
					<UserMenu
						role={$user.role}
						on:show={(e) => {
							if (e.detail === 'archived-chat') {
								showArchivedChats.set(true);
							}
						}}
					>
						<button
							class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
							on:click={() => {
								showDropdown = !showDropdown;
Timothy J. Baek's avatar
Timothy J. Baek committed
610
							}}
611
						>
612
613
614
615
616
617
618
							<div class=" self-center mr-3">
								<img
									src={$user.profile_image_url}
									class=" max-w-[30px] object-cover rounded-full"
									alt="User profile"
								/>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
619
							<div class=" self-center font-medium">{$user.name}</div>
620
621
622
						</button>
					</UserMenu>
				{/if}
623
			</div>
624
		</div>
625
626
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
627
628

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
629
630
631
	.scrollbar-hidden:active::-webkit-scrollbar-thumb,
	.scrollbar-hidden:focus::-webkit-scrollbar-thumb,
	.scrollbar-hidden:hover::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
632
		visibility: visible;
Timothy J. Baek's avatar
Timothy J. Baek committed
633
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
634
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
635
		visibility: hidden;
Timothy J. Baek's avatar
Timothy J. Baek committed
636
637
	}
</style>