Sidebar.svelte 21.8 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
5
6
7
8
9
10
	import {
		user,
		chats,
		settings,
		showSettings,
		chatId,
		tags,
		showSidebar,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
		mobile,
		showArchivedChats
Timothy J. Baek's avatar
Timothy J. Baek committed
13
	} from '$lib/stores';
14
	import { onMount, getContext } from 'svelte';
15
16
17

	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
20
	import {
		deleteChatById,
		getChatList,
Henry Holloway's avatar
Henry Holloway committed
21
		getChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
22
		getChatListByTagName,
Timothy J. Baek's avatar
Timothy J. Baek committed
23
		updateChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
24
25
		getAllChatTags,
		archiveChatById
Timothy J. Baek's avatar
Timothy J. Baek committed
26
	} from '$lib/apis/chats';
Jannik Streidl's avatar
Jannik Streidl committed
27
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
28
	import { fade, slide } from 'svelte/transition';
29
	import { WEBUI_BASE_URL } from '$lib/constants';
30
	import Tooltip from '../common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	import ChatMenu from './Sidebar/ChatMenu.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
32
	import ShareChatModal from '../chat/ShareChatModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
33
	import ArchiveBox from '../icons/ArchiveBox.svelte';
34
	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
35
	import UserMenu from './Sidebar/UserMenu.svelte';
36

Timothy J. Baek's avatar
Timothy J. Baek committed
37
	const BREAKPOINT = 768;
Timothy J. Baek's avatar
Timothy J. Baek committed
38

39
40
41
	let show = false;
	let navElement;

Timothy J. Baek's avatar
Timothy J. Baek committed
42
	let title: string = 'UI';
43
	let search = '';
44

Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
	let shareChatId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
	let selectedChatId = null;

49
50
	let chatDeleteId = null;
	let chatTitleEditId = null;
51
52
	let chatTitle = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
53
	let showShareChatModal = false;
54
	let showDropdown = false;
55
	let isEditing = false;
56

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
	let filteredChatList = [];

	$: 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
Timothy J. Baek committed
79
80
81
82
83
84
85
	mobile;
	const onResize = () => {
		if ($showSidebar && window.innerWidth < BREAKPOINT) {
			showSidebar.set(false);
		}
	};

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
		await chats.set(await getChatList(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
99

100
101
		let touchstart;
		let touchend;
Timothy J. Baek's avatar
Timothy J. Baek committed
102
103
104

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

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

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

126
127
		window.addEventListener('touchstart', onTouchStart);
		window.addEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
128
129

		return () => {
130
131
			window.removeEventListener('touchstart', onTouchStart);
			window.removeEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
132
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
	});

	// 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);
	};
149
150
151
152
153
154

	const loadChat = async (id) => {
		goto(`/c/${id}`);
	};

	const editChatTitle = async (id, _title) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
155
		if (_title === '') {
Jannik Streidl's avatar
Jannik Streidl committed
156
			toast.error($i18n.t('Title cannot be an empty string.'));
Timothy J. Baek's avatar
Timothy J. Baek committed
157
158
159
160
161
162
163
164
		} else {
			title = _title;

			await updateChatById(localStorage.token, id, {
				title: _title
			});
			await chats.set(await getChatList(localStorage.token));
		}
165
166
167
	};

	const deleteChat = async (id) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
170
		const res = await deleteChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			chatDeleteId = null;
171

Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
174
175
			return null;
		});

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
178
179
			if ($chatId === id) {
				goto('/');
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
180
181
			await chats.set(await getChatList(localStorage.token));
		}
182
	};
183
184
185
186
187
188

	const saveSettings = async (updated) => {
		await settings.set({ ...$settings, ...updated });
		localStorage.setItem('settings', JSON.stringify($settings));
		location.href = '/';
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
189
190
191
192
193

	const archiveChatHandler = async (id) => {
		await archiveChatById(localStorage.token, id);
		await chats.set(await getChatList(localStorage.token));
	};
194
195
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
196
<ShareChatModal bind:show={showShareChatModal} chatId={shareChatId} />
Timothy J. Baek's avatar
Timothy J. Baek committed
197
<ArchivedChatsModal
Timothy J. Baek's avatar
Timothy J. Baek committed
198
	bind:show={$showArchivedChats}
Timothy J. Baek's avatar
Timothy J. Baek committed
199
200
201
202
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
203

Timothy J. Baek's avatar
Timothy J. Baek committed
204
205
206
207
<!-- svelte-ignore a11y-no-static-element-interactions -->

{#if $showSidebar}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
208
		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
209
210
211
212
213
214
		on:mousedown={() => {
			showSidebar.set(!$showSidebar);
		}}
	/>
{/if}

215
216
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
217
	id="sidebar"
Timothy J. Baek's avatar
Timothy J. Baek committed
218
	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
219
		? 'md:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
220
		: '-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
221
        "
Timothy J. Baek's avatar
Timothy J. Baek committed
222
	data-state={$showSidebar}
223
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
224
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
225
		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
226
227
228
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
229
		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
230
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
231
				id="sidebar-new-chat-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
232
				class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
233
				href="/"
234
				draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
235
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
236
237
					selectedChatId = null;

238
					await goto('/');
239
					const newChatButton = document.getElementById('new-chat-button');
240
241
					setTimeout(() => {
						newChatButton?.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
242
243
244
245

						if ($mobile) {
							showSidebar.set(false);
						}
246
					}, 0);
247
248
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
				<div class="self-center mx-1.5">
					<img
Timothy J. Baek's avatar
Timothy J. Baek committed
251
						crossorigin="anonymous"
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
254
255
256
						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
257
258
259
				<div class=" self-center font-medium text-sm text-gray-850 dark:text-white">
					{$i18n.t('New Chat')}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
260
				<div class="self-center ml-auto">
261
262
263
264
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
265
						class="size-5"
266
267
268
269
270
271
272
273
274
					>
						<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>
275
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299

			<button
				class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
				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>
300
301
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
302
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
303
			<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
304
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
305
					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
306
					href="/workspace"
Timothy J. Baek's avatar
Timothy J. Baek committed
307
308
309
310
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
311
					draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
312
313
314
315
316
317
				>
					<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
318
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
319
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
320
							class="size-[1.1rem]"
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
323
324
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
325
								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
326
327
328
							/>
						</svg>
					</div>
329

Timothy J. Baek's avatar
Timothy J. Baek committed
330
					<div class="flex self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
331
						<div class=" self-center font-medium text-sm">{$i18n.t('Workspace')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
332
					</div>
333
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
334
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
335
		{/if}
336

337
338
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
339
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
340
					<div class=" text-left px-5 py-2">
341
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
342
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
343
344
345
346
347
							{$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
348
349
350
351
352
							>
						</div>

						<div class="mt-3">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
353
								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"
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
								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
374
								<div>{$i18n.t('Enable Chat History')}</div>
375
376
377
							</button>
						</div>
					</div>
378
				</div>
379
			{/if}
380

Timothy J. Baek's avatar
Timothy J. Baek committed
381
382
383
			<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">
384
385
386
387
388
389
390
391
392
393
394
395
396
						<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>
397

398
					<input
Timothy J. Baek's avatar
Timothy J. Baek committed
399
						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
400
						placeholder={$i18n.t('Search')}
401
						bind:value={search}
Timothy J. Baek's avatar
Timothy J. Baek committed
402
403
404
						on:focus={() => {
							enrichChatsWithContent($chats);
						}}
405
406
407
					/>
				</div>
			</div>
408

Timothy J. Baek's avatar
Timothy J. Baek committed
409
			{#if $tags.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
410
				<div class="px-2.5 mb-2 flex gap-1 flex-wrap">
Timothy J. Baek's avatar
Timothy J. Baek committed
411
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
412
						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
413
414
415
416
						on:click={async () => {
							await chats.set(await getChatList(localStorage.token));
						}}
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
417
						{$i18n.t('all')}
Timothy J. Baek's avatar
Timothy J. Baek committed
418
419
420
					</button>
					{#each $tags as tag}
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
421
							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
422
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
423
424
425
426
427
428
								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
								if (chatIds.length === 0) {
									await tags.set(await getAllChatTags(localStorage.token));
									chatIds = await getChatList(localStorage.token);
								}
								await chats.set(chatIds);
Timothy J. Baek's avatar
Timothy J. Baek committed
429
430
431
432
433
434
435
436
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
437
			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
438
				{#each filteredChatList as chat, idx}
Timothy J. Baek's avatar
Timothy J. Baek committed
439
					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
440
441
442
						<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
443
								: 'pt-5'} pb-0.5"
444
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
445
							{$i18n.t(chat.time_range)}
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
							<!-- 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')}
							-->
464
465
466
						</div>
					{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
467
					<div class=" w-full pr-2 relative group">
Timothy J. Baek's avatar
Timothy J. Baek committed
468
469
						{#if chatTitleEditId === chat.id}
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
470
471
472
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
473
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
474
									: chat.id === selectedChatId
475
476
									? 'bg-gray-100 dark:bg-gray-950'
									: 'group-hover:bg-gray-100 dark:group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
Timothy J. Baek's avatar
Timothy J. Baek committed
477
478
479
480
481
							>
								<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
							</div>
						{:else}
							<a
Timothy J. Baek's avatar
Timothy J. Baek committed
482
483
484
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
485
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
486
									: chat.id === selectedChatId
487
488
									? 'bg-gray-100 dark:bg-gray-950'
									: ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
Timothy J. Baek's avatar
Timothy J. Baek committed
489
								href="/c/{chat.id}"
490
								on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
491
									selectedChatId = chat.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
492
									if ($mobile) {
Timothy J. Baek's avatar
Timothy J. Baek committed
493
										showSidebar.set(false);
494
495
									}
								}}
Timothy J. Baek's avatar
Timothy J. Baek committed
496
								draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
497
498
							>
								<div class=" flex self-center flex-1 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
499
									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
500
										{chat.title}
Timothy J. Baek's avatar
Timothy J. Baek committed
501
									</div>
502
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
503
504
							</a>
						{/if}
505

Timothy J. Baek's avatar
Timothy J. Baek committed
506
						<div
Timothy J. Baek's avatar
Timothy J. Baek committed
507
							class="
508

Timothy J. Baek's avatar
Timothy J. Baek committed
509
							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
510
								? 'from-gray-200 dark:from-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
511
								: chat.id === selectedChatId
512
513
								? 'from-gray-100 dark:from-gray-950'
								: 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
Timothy J. Baek's avatar
Timothy J. Baek committed
514
								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
515

Timothy J. Baek's avatar
Timothy J. Baek committed
516
								  to-transparent"
Timothy J. Baek's avatar
Timothy J. Baek committed
517
518
519
520
						>
							{#if chatTitleEditId === chat.id}
								<div class="flex self-center space-x-1.5 z-10">
									<button
521
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
522
523
524
525
526
527
528
529
530
531
532
										on:click={() => {
											editChatTitle(chat.id, chatTitle);
											chatTitleEditId = null;
											chatTitle = '';
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
533
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
534
535
536
537
538
539
540
541
											<path
												fill-rule="evenodd"
												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
									<button
542
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
543
544
545
546
547
548
549
550
551
552
										on:click={() => {
											chatTitleEditId = null;
											chatTitle = '';
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
553
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
554
555
556
557
558
559
560
561
562
											<path
												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
											/>
										</svg>
									</button>
								</div>
							{:else if chatDeleteId === chat.id}
								<div class="flex self-center space-x-1.5 z-10">
									<button
563
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
564
565
566
567
568
569
570
571
572
										on:click={() => {
											deleteChat(chat.id);
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
573
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
574
575
576
577
578
579
580
581
											<path
												fill-rule="evenodd"
												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
									<button
582
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
583
584
585
586
587
588
589
590
591
										on:click={() => {
											chatDeleteId = null;
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
592
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
593
594
595
596
597
598
599
											<path
												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
											/>
										</svg>
									</button>
								</div>
							{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
600
								<div class="flex self-center space-x-1 z-10">
Timothy J. Baek's avatar
Timothy J. Baek committed
601
									<ChatMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
602
										chatId={chat.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
603
604
605
606
										shareHandler={() => {
											shareChatId = selectedChatId;
											showShareChatModal = true;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
607
608
609
										archiveChatHandler={() => {
											archiveChatHandler(chat.id);
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
610
										renameHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
611
612
613
											chatTitle = chat.title;
											chatTitleEditId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
614
										deleteHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
615
616
											chatDeleteId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
617
618
619
										onClose={() => {
											selectedChatId = null;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
620
									>
621
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
622
											aria-label="Chat Menu"
623
											class=" self-center dark:hover:text-white transition"
624
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
625
												selectedChatId = chat.id;
626
											}}
627
										>
628
629
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
630
631
												viewBox="0 0 16 16"
												fill="currentColor"
632
633
634
												class="w-4 h-4"
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
635
													d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
636
637
638
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
639
									</ChatMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
640

Timothy J. Baek's avatar
Timothy J. Baek committed
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
									{#if chat.id === $chatId}
										<button
											id="delete-chat-button"
											class="hidden"
											on:click={() => {
												chatDeleteId = chat.id;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
												/>
											</svg>
										</button>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
661
662
663
								</div>
							{/if}
						</div>
664
665
666
					</div>
				{/each}
			</div>
667
668
		</div>

669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
		<div class="px-2.5">
			<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->

			<div class="flex flex-col">
				{#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
686
							}}
687
						>
688
689
690
691
692
693
694
695
696
697
698
							<div class=" self-center mr-3">
								<img
									src={$user.profile_image_url}
									class=" max-w-[30px] object-cover rounded-full"
									alt="User profile"
								/>
							</div>
							<div class=" self-center font-semibold">{$user.name}</div>
						</button>
					</UserMenu>
				{/if}
699
			</div>
700
		</div>
701
702
	</div>

703
	<!-- <div
Timothy J. Baek's avatar
Timothy J. Baek committed
704
		id="sidebar-handle"
Timothy J. Baek's avatar
Timothy J. Baek committed
705
		class=" hidden md:fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
706
	>
Jannik Streidl's avatar
Jannik Streidl committed
707
708
		<Tooltip
			placement="right"
Timothy J. Baek's avatar
Timothy J. Baek committed
709
			content={`${$showSidebar ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
Jannik Streidl's avatar
Jannik Streidl committed
710
711
			touch={false}
		>
712
713
714
715
			<button
				id="sidebar-toggle-button"
				class=" group"
				on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
716
					showSidebar.set(!$showSidebar);
717
718
719
				}}
				><span class="" data-state="closed"
					><div
720
						class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition"
721
722
723
					>
						<div class="flex h-6 w-6 flex-col items-center">
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
724
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {$showSidebar
725
726
727
728
									? 'group-hover:rotate-[15deg]'
									: 'group-hover:rotate-[-15deg]'}"
							/>
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
729
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {$showSidebar
730
731
732
733
									? 'group-hover:rotate-[-15deg]'
									: 'group-hover:rotate-[15deg]'}"
							/>
						</div>
734
					</div>
735
736
737
				</span>
			</button>
		</Tooltip>
738
	</div> -->
739
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
740
741

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
742
743
744
	.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
745
		visibility: visible;
Timothy J. Baek's avatar
Timothy J. Baek committed
746
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
747
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
748
		visibility: hidden;
Timothy J. Baek's avatar
Timothy J. Baek committed
749
750
	}
</style>