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,37 +177,43 @@
 		</div>
 
 		<div class="max-h-[75vh] overflow-auto">
-			{#if item?.type === 'collection'}
-				<div>
-					{#each item?.files as file}
-						<div class="flex items-center gap-2 mb-2">
-							<div class="flex-shrink-0 text-xs">
-								{file?.meta?.name}
+			{#if !loading}
+				{#if item?.type === 'collection'}
+					<div>
+						{#each item?.files as file}
+							<div class="flex items-center gap-2 mb-2">
+								<div class="flex-shrink-0 text-xs">
+									{file?.meta?.name}
+								</div>
 							</div>
-						</div>
-					{/each}
-				</div>
-			{:else if isPDF}
-				<iframe
-					title={item?.name}
-					src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
-					class="w-full h-[70vh] border-0 rounded-lg mt-4"
-				/>
-			{:else}
-				{#if isAudio}
-					<audio
+						{/each}
+					</div>
+				{:else if isPDF}
+					<iframe
+						title={item?.name}
 						src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
-						class="w-full border-0 rounded-lg mb-2"
-						controls
-						playsinline
+						class="w-full h-[70vh] border-0 rounded-lg mt-4"
 					/>
-				{/if}
+				{:else}
+					{#if isAudio}
+						<audio
+							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
+							class="w-full border-0 rounded-lg mb-2"
+							controls
+							playsinline
+						/>
+					{/if}
 
-				{#if item?.file?.data}
-					<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
-						{item?.file?.data?.content ?? 'No content'}
-					</div>
+					{#if item?.file?.data}
+						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
+							{item?.file?.data?.content ?? 'No content'}
+						</div>
+					{/if}
 				{/if}
+			{:else}
+				<div class="flex items-center justify-center py-6">
+					<Spinner className="size-5" />
+				</div>
 			{/if}
 		</div>
 	</div>

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);