refac

src/lib/components/chat/Placeholder/FolderPlaceholder.svelte

@@ -1,15 +1,40 @@
 <script>
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { fade } from 'svelte/transition';
 
 	import ChatList from './ChatList.svelte';
 	import FolderKnowledge from './FolderKnowledge.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { getChatListByFolderId } from '$lib/apis/chats';
 
 	export let folder = null;
 
 	let selectedTab = 'chats';
+
+	let chats = null;
+	let page = 1;
+
+	const setChatList = async () => {
+		chats = null;
+
+		if (folder && folder.id) {
+			const res = await getChatListByFolderId(localStorage.token, folder.id, page);
+
+			if (res) {
+				chats = res;
+			} else {
+				chats = [];
+			}
+		} else {
+			chats = [];
+		}
+	};
+
+	$: if (folder) {
+		setChatList();
+	}
 </script>
 
 <div>
@@ -45,7 +70,13 @@
 		{#if selectedTab === 'knowledge'}
 			<FolderKnowledge />
 		{:else if selectedTab === 'chats'}
-			<ChatList chats={folder?.items?.chats ?? []} />
+			{#if chats !== null}
+				<ChatList {chats} />
+			{:else}
+				<div class="py-10">
+					<Spinner />
+				</div>
+			{/if}
 		{/if}
 	</div>
 </div>

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -115,7 +115,12 @@
 </script>
 
 {#if folder}
-	<FolderModal bind:show={showFolderModal} edit={true} {folder} onSubmit={updateHandler} />
+	<FolderModal
+		bind:show={showFolderModal}
+		edit={true}
+		folderId={folder.id}
+		onSubmit={updateHandler}
+	/>
 
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}