refac

2026-07-14 04:53:37 -04:00
parent c7f1ff9323
commit 3be493f5b0
7 changed files with 709 additions and 458 deletions
@@ -0,0 +1,383 @@
+<script lang="ts">
+	// @ts-ignore
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import dayjs from 'dayjs';
+	import calendar from 'dayjs/plugin/calendar';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import { goto } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+
+	import {
+		archiveChatById,
+		deleteChatById,
+		getAllArchivedChats,
+		getArchivedChatCount,
+		getArchivedChatList,
+		unarchiveAllChats
+	} from '$lib/apis/chats';
+	import { chatId, showSettings } from '$lib/stores';
+	import { refreshChatList } from '$lib/stores/chat-list';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Loader from '$lib/components/common/Loader.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	dayjs.extend(localizedFormat);
+	dayjs.extend(calendar);
+
+	const i18n: Writable<any> = getContext('i18n');
+
+	let loading = false;
+	let chatList: any[] | null = null;
+	let chatCount: number | null = null;
+	let page = 1;
+
+	let query = '';
+	let orderBy = 'updated_at';
+	let direction = 'desc';
+
+	let allChatsLoaded = false;
+	let chatListLoading = false;
+	let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	let selectedChatId: string | null = null;
+	let showDeleteConfirmDialog = false;
+	let showUnarchiveAllConfirmDialog = false;
+
+	const getFilter = () => ({
+		...(query ? { query } : {}),
+		...(orderBy ? { order_by: orderBy } : {}),
+		...(direction ? { direction } : {})
+	});
+
+	const loadChats = async () => {
+		page = 1;
+		chatList = null;
+		chatList = await getArchivedChatList(localStorage.token, page, getFilter());
+		allChatsLoaded = (chatList ?? []).length === 0;
+		chatCount = await getArchivedChatCount(localStorage.token);
+	};
+
+	const searchHandler = () => {
+		if (searchDebounceTimeout) {
+			clearTimeout(searchDebounceTimeout);
+		}
+
+		if (query === '') {
+			loadChats();
+		} else {
+			searchDebounceTimeout = setTimeout(loadChats, 300);
+		}
+	};
+
+	const loadMoreChats = async () => {
+		chatListLoading = true;
+		page += 1;
+
+		const newChatList = await getArchivedChatList(localStorage.token, page, getFilter());
+		allChatsLoaded = newChatList.length === 0;
+
+		if (newChatList.length > 0) {
+			chatList = [...(chatList || []), ...newChatList];
+		}
+
+		chatListLoading = false;
+	};
+
+	const setSortKey = async (key: string) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
+		}
+
+		await loadChats();
+	};
+
+	const exportChatsHandler = async () => {
+		const chats = await getAllArchivedChats(localStorage.token);
+		const blob = new Blob([JSON.stringify(chats)], {
+			type: 'application/json'
+		});
+		saveAs(blob, `${$i18n.t('archived-chat-export')}-${Date.now()}.json`);
+	};
+
+	const unarchiveHandler = async (id: string) => {
+		await archiveChatById(localStorage.token, id).catch((error) => {
+			toast.error(`${error}`);
+		});
+
+		chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
+		if (chatCount !== null) chatCount -= 1;
+		await refreshChatList(localStorage.token);
+	};
+
+	const deleteHandler = async () => {
+		if (!selectedChatId) return;
+
+		const id = selectedChatId;
+		await deleteChatById(localStorage.token, id).catch((error) => {
+			toast.error(`${error}`);
+		});
+
+		chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
+		if (chatCount !== null) chatCount -= 1;
+		selectedChatId = null;
+
+		if ($chatId === id) {
+			await goto('/');
+			chatId.set('');
+		}
+
+		await refreshChatList(localStorage.token);
+	};
+
+	const unarchiveAllHandler = async () => {
+		loading = true;
+		try {
+			await unarchiveAllChats(localStorage.token);
+			toast.success($i18n.t('All chats have been unarchived.'));
+			await loadChats();
+			await refreshChatList(localStorage.token);
+		} catch (error) {
+			toast.error(`${error}`);
+		} finally {
+			loading = false;
+		}
+	};
+
+	onMount(loadChats);
+</script>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirmDialog}
+	on:confirm={() => {
+		deleteHandler();
+	}}
+/>
+
+<ConfirmDialog
+	bind:show={showUnarchiveAllConfirmDialog}
+	message={$i18n.t('Are you sure you want to unarchive all archived chats?')}
+	confirmLabel={$i18n.t('Unarchive All')}
+	on:confirm={() => {
+		unarchiveAllHandler();
+	}}
+/>
+
+<div id="tab-archived-chats" class="flex flex-col h-full justify-between text-sm">
+	<div class="space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
+		<div>
+			<div class="flex items-center gap-2 text-base font-normal">
+				{$i18n.t('Archived Chats')}
+				<span class="text-base font-normal text-gray-500 dark:text-gray-500">
+					{chatCount ?? ''}
+				</span>
+			</div>
+
+			<div class="text-xs text-gray-500 mt-0.5">
+				{$i18n.t('Manage conversations you have archived.')}
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2 rounded-xl bg-gray-100 dark:bg-gray-850 px-2">
+			<input
+				class="w-full bg-transparent py-1.5 text-xs outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-600"
+				bind:value={query}
+				on:input={searchHandler}
+				placeholder={$i18n.t('Search Chats')}
+				maxlength="500"
+			/>
+			{#if query}
+				<button
+					class="rounded-full p-1 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
+					type="button"
+					aria-label={$i18n.t('Clear search')}
+					on:click={() => {
+						query = '';
+						searchHandler();
+					}}
+				>
+					<XMark className="size-3" strokeWidth="2" />
+				</button>
+			{/if}
+		</div>
+
+		{#if chatList === null}
+			<div class="flex min-h-20 items-center justify-center">
+				<Spinner className="size-5" />
+			</div>
+		{:else if chatList.length === 0}
+			<div
+				class="flex min-h-20 items-center justify-center px-4 text-center text-xs text-gray-500 dark:text-gray-400"
+			>
+				{$i18n.t('You have no archived conversations.')}
+			</div>
+		{:else}
+			<div class="flex items-center px-1 text-xs text-gray-500 dark:text-gray-500">
+				<button
+					class="flex flex-1 items-center gap-1 py-1 text-left"
+					type="button"
+					on:click={() => setSortKey('title')}
+				>
+					{$i18n.t('Title')}
+					{#if orderBy === 'title'}
+						{#if direction === 'asc'}
+							<ChevronUp className="size-2" />
+						{:else}
+							<ChevronDown className="size-2" />
+						{/if}
+					{/if}
+				</button>
+				<button
+					class="hidden w-24 items-center justify-end gap-1 py-1 text-right sm:flex"
+					type="button"
+					on:click={() => setSortKey('updated_at')}
+				>
+					{$i18n.t('Updated at')}
+					{#if orderBy === 'updated_at'}
+						{#if direction === 'asc'}
+							<ChevronUp className="size-2" />
+						{:else}
+							<ChevronDown className="size-2" />
+						{/if}
+					{/if}
+				</button>
+			</div>
+
+			<div class="divide-y divide-gray-50 dark:divide-gray-850/80">
+				{#each chatList as chat (chat.id)}
+					<div class="flex items-center gap-2 py-2 text-xs">
+						<a
+							class="min-w-0 flex-1 truncate text-gray-800 hover:text-black dark:text-gray-200 dark:hover:text-white"
+							href={`/c/${chat.id}`}
+							on:click={(event) => {
+								event.preventDefault();
+								showSettings.set(false);
+								goto(`/c/${chat.id}`);
+							}}
+						>
+							{chat?.title}
+						</a>
+						<div class="hidden w-24 shrink-0 justify-end text-gray-500 dark:text-gray-500 sm:flex">
+							{$i18n.t(
+								dayjs(chat?.updated_at * 1000).calendar(null, {
+									sameDay: '[Today]',
+									nextDay: '[Tomorrow]',
+									nextWeek: 'dddd',
+									lastDay: '[Yesterday]',
+									lastWeek: '[Last] dddd',
+									sameElse: 'L'
+								})
+							)}
+						</div>
+						<div class="flex shrink-0 items-center text-gray-600 dark:text-gray-300">
+							<Tooltip content={$i18n.t('Unarchive Chat')}>
+								<button
+									class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									type="button"
+									aria-label={$i18n.t('Unarchive Chat')}
+									on:click={() => {
+										unarchiveHandler(chat.id);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
+							<Tooltip content={$i18n.t('Delete Chat')}>
+								<button
+									class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									type="button"
+									aria-label={$i18n.t('Delete Chat')}
+									on:click={() => {
+										selectedChatId = chat.id;
+										showDeleteConfirmDialog = true;
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			{#if !allChatsLoaded}
+				<Loader
+					on:visible={() => {
+						if (!chatListLoading) {
+							loadMoreChats();
+						}
+					}}
+				>
+					<div class="flex w-full items-center justify-center gap-2 py-1 text-xs animate-pulse">
+						<Spinner className="size-4" />
+						<div>{$i18n.t('Loading...')}</div>
+					</div>
+				</Loader>
+			{/if}
+		{/if}
+	</div>
+
+	<div class="flex justify-end gap-1.5 pt-3 text-sm font-normal">
+		{#if query === ''}
+			<button
+				class="px-3.5 py-1.5 text-sm font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-full disabled:opacity-50"
+				disabled={loading || chatCount === 0}
+				type="button"
+				on:click={() => {
+					showUnarchiveAllConfirmDialog = true;
+				}}
+			>
+				{#if loading}
+					<Spinner className="size-4" />
+				{:else}
+					{$i18n.t('Unarchive All')}
+				{/if}
+			</button>
+
+			<button
+				class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full disabled:opacity-50"
+				disabled={loading || chatCount === 0}
+				type="button"
+				on:click={exportChatsHandler}
+			>
+				{$i18n.t('Export')}
+			</button>
+		{/if}
+	</div>
+</div>
@@ -2,24 +2,14 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;

-	import {
-		chatId,
-		user,
-		settings
-	} from '$lib/stores';
+	import { user } from '$lib/stores';
 	import { refreshChatList } from '$lib/stores/chat-list';

-	import {
-		archiveAllChats,
-		deleteAllChats,
-		getAllChats,
-		importChats
-	} from '$lib/apis/chats';
+	import { archiveAllChats, deleteAllChats, getAllChats, importChats } from '$lib/apis/chats';
 	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
-	import { onMount, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
-	import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte';
 	import SharedChatsModal from '$lib/components/layout/SharedChatsModal.svelte';
 	import FilesModal from '$lib/components/layout/FilesModal.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@@ -33,7 +23,6 @@

 	let showArchiveConfirmDialog = false;
 	let showDeleteConfirmDialog = false;
-	let showArchivedChatsModal = false;
 	let showSharedChatsModal = false;
 	let showFilesModal = false;

@@ -118,22 +107,8 @@

 		await refreshChatList(localStorage.token);
 	};
-
-	const handleArchivedChatsChange = async () => {
-		await refreshChatList(localStorage.token);
-	};
 </script>

-<ArchivedChatsModal
-	bind:show={showArchivedChatsModal}
-	onUpdate={handleArchivedChatsChange}
-	onDelete={(id) => {
-		if ($chatId === id) {
-			goto('/');
-			chatId.set('');
-		}
-	}}
-/>
 <SharedChatsModal bind:show={showSharedChatsModal} />
 <FilesModal bind:show={showFilesModal} />

@@ -205,21 +180,6 @@
 				</div>
 			{/if}

-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Archived Chats')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showArchivedChatsModal = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Manage')}</span>
-					</button>
-				</div>
-			</div>
-
 			<div>
 				<div class="py-0.5 flex w-full justify-between">
 					<div class="self-center text-xs">{$i18n.t('Shared Chats')}</div>