refac: knowledge item modal

src/lib/components/common/FileItemModal.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
+	import { getContext, onMount, tick } from 'svelte';
 	import { formatFileSize, getLineCount } from '$lib/utils';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
+	import { getKnowledgeById } from '$lib/apis/knowledge';
 
 	const i18n = getContext('i18n');
 
@@ -11,6 +12,7 @@
 	import Switch from './Switch.svelte';
 	import Tooltip from './Tooltip.svelte';
 	import dayjs from 'dayjs';
+	import Spinner from './Spinner.svelte';
 
 	export let item;
 	export let show = false;
@@ -20,6 +22,7 @@
 
 	let isPdf = false;
 	let isAudio = false;
+	let loading = false;
 
 	$: isPDF =
 		item?.meta?.content_type === 'application/pdf' ||
@@ -33,6 +36,28 @@
 		(item?.name && item?.name.toLowerCase().endsWith('.m4a')) ||
 		(item?.name && item?.name.toLowerCase().endsWith('.webm'));
 
+	const loadContent = async () => {
+		if (item?.type === 'collection') {
+			loading = true;
+
+			const knowledge = await getKnowledgeById(localStorage.token, item.id).catch((e) => {
+				console.error('Error fetching knowledge base:', e);
+				return null;
+			});
+
+			if (knowledge) {
+				item.files = knowledge.files || [];
+			}
+			loading = false;
+		}
+
+		await tick();
+	};
+
+	$: if (show) {
+		loadContent();
+	}
+
 	onMount(() => {
 		console.log(item);
 		if (item?.context === 'full') {
@@ -152,6 +177,7 @@
 		</div>
 
 		<div class="max-h-[75vh] overflow-auto">
+			{#if !loading}
 				{#if item?.type === 'collection'}
 					<div>
 						{#each item?.files as file}
@@ -184,6 +210,11 @@
 						</div>
 					{/if}
 				{/if}
+			{:else}
+				<div class="flex items-center justify-center py-6">
+					<Spinner className="size-5" />
+				</div>
+			{/if}
 		</div>
 	</div>
 </Modal>

src/lib/components/workspace/Models/Knowledge.svelte

@@ -181,7 +181,7 @@
 						loading={file.status === 'uploading'}
 						type={file?.legacy
 							? `Legacy${file.type ? ` ${file.type}` : ''}`
-							: (file?.type ?? 'Collection')}
+							: (file?.type ?? 'collection')}
 						dismissible
 						on:dismiss={(e) => {
 							selectedItems = selectedItems.filter((_, idx) => idx !== fileIdx);