Sidebar.svelte 17.6 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
		pinnedChats,
15
16
		scrollPaginationEnabled,
		currentChatPage
Timothy J. Baek's avatar
Timothy J. Baek committed
17
	} from '$lib/stores';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
18
	import { onMount, getContext, tick } from 'svelte';
19
20

	const i18n = getContext('i18n');
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
21
	import { disablePagination, enablePagination } from '$lib/utils';
22

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

36
	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
37
	import UserMenu from './Sidebar/UserMenu.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
38
	import ChatItem from './Sidebar/ChatItem.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
39
	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
40
	import Spinner from '../common/Spinner.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
41
	import Loader from '../common/Loader.svelte';
42

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

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

48
49
	let shiftKey = false;

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

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

56
	let filteredChatList = [];
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
57
58

	// Pagination variables
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
59
	let chatListLoading = true;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
60
	let allChatsLoaded = false;
61

62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
	$: 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;
		}
	});

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
82
83
	const loadMoreChats = async () => {
		chatListLoading = true;
84
85
86

		currentChatPage.set($currentChatPage + 1);
		const newChatList = await getChatList(localStorage.token, $currentChatPage);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
87
88
89
90
91
92
93
94

		// once the bottom of the list has been reached (no results) there is no need to continue querying
		allChatsLoaded = newChatList.length === 0;
		await chats.set([...$chats, ...newChatList]);

		chatListLoading = false;
	};

95
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
96
97
98
99
100
101
102
103
104
105
		mobile.subscribe((e) => {
			if ($showSidebar && e) {
				showSidebar.set(false);
			}

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

Timothy J. Baek's avatar
Timothy J. Baek committed
106
		showSidebar.set(window.innerWidth > BREAKPOINT);
Timothy J. Baek's avatar
Timothy J. Baek committed
107
108

		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
109
		await chats.set(await getChatList(localStorage.token, $currentChatPage));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
110
		chatListLoading = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
111

112
113
		let touchstart;
		let touchend;
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116

		function checkDirection() {
			const screenWidth = window.innerWidth;
117
			const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
Timothy J. Baek's avatar
Timothy J. Baek committed
118
			if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
119
				if (touchend.screenX < touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
120
					showSidebar.set(false);
Timothy J. Baek's avatar
Timothy J. Baek committed
121
				}
122
				if (touchend.screenX > touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
123
					showSidebar.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
124
125
126
127
				}
			}
		}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
128
		const onTouchStart = (e) => {
129
130
			touchstart = e.changedTouches[0];
			console.log(touchstart.clientX);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
131
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
132

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
133
		const onTouchEnd = (e) => {
134
			touchend = e.changedTouches[0];
Timothy J. Baek's avatar
Timothy J. Baek committed
135
			checkDirection();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
136
137
		};

138
139
140
141
142
143
144
145
146
147
148
149
		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
150
151
152
153
		const onFocus = () => {};

		const onBlur = () => {
			shiftKey = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
154
			selectedChatId = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
		};

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
165
		window.addEventListener('focus', onFocus);
		window.addEventListener('blur', onBlur);

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
166
		return () => {
167
168
169
			window.removeEventListener('keydown', onKeyDown);
			window.removeEventListener('keyup', onKeyUp);

170
171
			window.removeEventListener('touchstart', onTouchStart);
			window.removeEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174

			window.removeEventListener('focus', onFocus);
			window.removeEventListener('blur', onBlur);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
175
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
	});

	// 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);
	};
192

193
194
	const saveSettings = async (updated) => {
		await settings.set({ ...$settings, ...updated });
195
		await updateUserSettings(localStorage.token, { ui: $settings });
196
197
		location.href = '/';
	};
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
198
199
200
201
202
203
204
205
206
207
208
209
210

	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('/');
			}
211
212

			allChatsLoaded = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
213
			currentChatPage.set(1);
214
215
			await chats.set(await getChatList(localStorage.token, $currentChatPage));

216
			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
217
218
		}
	};
219
220
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
221
<ArchivedChatsModal
Timothy J. Baek's avatar
Timothy J. Baek committed
222
	bind:show={$showArchivedChats}
Timothy J. Baek's avatar
Timothy J. Baek committed
223
224
225
226
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
227

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
228
229
<DeleteConfirmDialog
	bind:show={showDeleteConfirm}
230
	title={$i18n.t('Delete chat?')}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
231
232
233
234
235
	on:confirm={() => {
		deleteChatHandler(deleteChat.id);
	}}
>
	<div class=" text-sm text-gray-500">
236
		{$i18n.t('This will delete')} <span class="  font-semibold">{deleteChat.title}</span>.
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
237
238
239
	</div>
</DeleteConfirmDialog>

Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
242
243
<!-- svelte-ignore a11y-no-static-element-interactions -->

{#if $showSidebar}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
244
		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
245
246
247
248
249
250
		on:mousedown={() => {
			showSidebar.set(!$showSidebar);
		}}
	/>
{/if}

251
252
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
253
	id="sidebar"
Timothy J. Baek's avatar
Timothy J. Baek committed
254
	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
255
		? 'md:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
256
		: '-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
257
        "
Timothy J. Baek's avatar
Timothy J. Baek committed
258
	data-state={$showSidebar}
259
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
260
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
261
		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
262
263
264
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
265
		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
266
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
267
				id="sidebar-new-chat-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
268
				class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
269
				href="/"
270
				draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
271
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
272
					selectedChatId = null;
273
					await goto('/');
274
					const newChatButton = document.getElementById('new-chat-button');
275
276
					setTimeout(() => {
						newChatButton?.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
277
278
279
						if ($mobile) {
							showSidebar.set(false);
						}
280
					}, 0);
281
282
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
				<div class="self-center mx-1.5">
					<img
Timothy J. Baek's avatar
Timothy J. Baek committed
285
						crossorigin="anonymous"
Timothy J. Baek's avatar
Timothy J. Baek committed
286
287
288
289
290
						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
291
				<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
292
293
					{$i18n.t('New Chat')}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
294
				<div class="self-center ml-auto">
295
296
297
298
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
299
						class="size-5"
300
301
302
303
304
305
306
307
308
					>
						<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>
309
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
310
311

			<button
Timothy J. Baek's avatar
Timothy J. Baek committed
312
				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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
				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>
334
335
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
336
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
337
			<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
338
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
339
					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
340
					href="/workspace"
Timothy J. Baek's avatar
Timothy J. Baek committed
341
342
343
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
Timothy J. Baek's avatar
Timothy J. Baek committed
344
345
346
347

						if ($mobile) {
							showSidebar.set(false);
						}
Timothy J. Baek's avatar
Timothy J. Baek committed
348
					}}
349
					draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
350
351
352
353
354
355
				>
					<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
356
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
357
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
358
							class="size-[1.1rem]"
Timothy J. Baek's avatar
Timothy J. Baek committed
359
360
361
362
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
363
								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
364
365
366
							/>
						</svg>
					</div>
367

Timothy J. Baek's avatar
Timothy J. Baek committed
368
					<div class="flex self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
369
						<div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
370
					</div>
371
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
372
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
373
		{/if}
374

375
376
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
377
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
378
					<div class=" text-left px-5 py-2">
379
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
380
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
381
382
383
384
385
							{$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
386
387
388
389
390
							>
						</div>

						<div class="mt-3">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
391
								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"
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
								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
412
								<div>{$i18n.t('Enable Chat History')}</div>
413
414
415
							</button>
						</div>
					</div>
416
				</div>
417
			{/if}
418

Timothy J. Baek's avatar
Timothy J. Baek committed
419
420
421
			<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">
422
423
424
425
426
427
428
429
430
431
432
433
434
						<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>
435

436
					<input
Timothy J. Baek's avatar
Timothy J. Baek committed
437
						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
438
						placeholder={$i18n.t('Search')}
439
						bind:value={search}
440
						on:focus={async () => {
441
							// TODO: migrate backend for more scalable search mechanism
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
442
							disablePagination();
443
							await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
Timothy J. Baek's avatar
Timothy J. Baek committed
444
445
							enrichChatsWithContent($chats);
						}}
446
447
448
					/>
				</div>
			</div>
449

Timothy J. Baek's avatar
Timothy J. Baek committed
450
			{#if $tags.filter((t) => t.name !== 'pinned').length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
451
				<div class="px-2.5 mb-2 flex gap-1 flex-wrap">
Timothy J. Baek's avatar
Timothy J. Baek committed
452
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
453
						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
454
						on:click={async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
455
456
							enablePagination();
							allChatsLoaded = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
457
							await chats.set(await getChatList(localStorage.token, $currentChatPage));
Timothy J. Baek's avatar
Timothy J. Baek committed
458
459
						}}
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
460
						{$i18n.t('all')}
Timothy J. Baek's avatar
Timothy J. Baek committed
461
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
462
					{#each $tags.filter((t) => t.name !== 'pinned') as tag}
Timothy J. Baek's avatar
Timothy J. Baek committed
463
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
464
							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
465
							on:click={async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
466
								disablePagination();
Timothy J. Baek's avatar
Timothy J. Baek committed
467
468
469
								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
								if (chatIds.length === 0) {
									await tags.set(await getAllChatTags(localStorage.token));
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
470

471
472
473
									// if the tag we deleted is no longer a valid tag, return to main chat list view
									enablePagination();
									allChatsLoaded = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
474
									chatIds = await getChatList(localStorage.token, $currentChatPage);
Timothy J. Baek's avatar
Timothy J. Baek committed
475
476
								}
								await chats.set(chatIds);
Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
482
483
484
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
			{#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}

517
			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
518
				{#each filteredChatList as chat, idx}
Timothy J. Baek's avatar
Timothy J. Baek committed
519
					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
520
521
522
						<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
523
								: 'pt-5'} pb-0.5"
524
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
525
							{$i18n.t(chat.time_range)}
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
							<!-- 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')}
							-->
544
545
546
						</div>
					{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
547
548
					<ChatItem
						{chat}
549
						{shiftKey}
Timothy J. Baek's avatar
Timothy J. Baek committed
550
551
552
553
						selected={selectedChatId === chat.id}
						on:select={() => {
							selectedChatId = chat.id;
						}}
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
554
555
556
						on:unselect={() => {
							selectedChatId = null;
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
557
558
559
560
561
562
563
						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
564
						}}
Timothy J. Baek's avatar
Timothy J. Baek committed
565
					/>
566
				{/each}
567

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
568
569
570
571
572
573
574
				{#if $scrollPaginationEnabled && !allChatsLoaded}
					<Loader
						on:visible={(e) => {
							if (!chatListLoading) {
								loadMoreChats();
							}
						}}
575
					>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
576
577
578
579
580
						<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
							<Spinner className=" size-4" />
							<div class=" ">Loading...</div>
						</div>
					</Loader>
Aryan Kothari's avatar
Aryan Kothari committed
581
				{/if}
582
			</div>
583
584
		</div>

585
586
587
		<div class="px-2.5">
			<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->

Timothy J. Baek's avatar
Timothy J. Baek committed
588
			<div class="flex flex-col font-primary">
589
590
591
592
593
594
595
596
597
598
599
600
601
				{#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
602
							}}
603
						>
604
605
606
607
608
609
610
							<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
611
							<div class=" self-center font-medium">{$user.name}</div>
612
613
614
						</button>
					</UserMenu>
				{/if}
615
			</div>
616
		</div>
617
618
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
619
620

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
621
622
623
	.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
624
		visibility: visible;
Timothy J. Baek's avatar
Timothy J. Baek committed
625
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
626
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
627
		visibility: hidden;
Timothy J. Baek's avatar
Timothy J. Baek committed
628
629
	}
</style>