enh/refac: kb pagination
This commit is contained in:
Timothy Jaeryang Baek
@@ -4,114 +4,296 @@
|
||||
import { decodeString } from '$lib/utils';
|
||||
import { knowledge } from '$lib/stores';
|
||||
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
import { getKnowledgeBases, searchKnowledgeFilesById } from '$lib/apis/knowledge';
|
||||
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Database from '$lib/components/icons/Database.svelte';
|
||||
import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Loader from '$lib/components/common/Loader.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let onSelect = (e) => {};
|
||||
|
||||
let loaded = false;
|
||||
let items = [];
|
||||
let selectedIdx = 0;
|
||||
|
||||
onMount(async () => {
|
||||
if ($knowledge === null) {
|
||||
await knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
let selectedItem = null;
|
||||
|
||||
let selectedFileItemsPage = 1;
|
||||
|
||||
let selectedFileItems = null;
|
||||
let selectedFileItemsTotal = null;
|
||||
|
||||
let selectedFileItemsLoading = false;
|
||||
let selectedFileAllItemsLoaded = false;
|
||||
|
||||
$: if (selectedItem) {
|
||||
initSelectedFileItems();
|
||||
}
|
||||
|
||||
const initSelectedFileItems = async () => {
|
||||
selectedFileItemsPage = 1;
|
||||
selectedFileItems = null;
|
||||
selectedFileItemsTotal = null;
|
||||
selectedFileAllItemsLoaded = false;
|
||||
selectedFileItemsLoading = false;
|
||||
await tick();
|
||||
await getSelectedFileItemsPage();
|
||||
};
|
||||
|
||||
const loadMoreSelectedFileItems = async () => {
|
||||
if (selectedFileAllItemsLoaded) return;
|
||||
selectedFileItemsPage += 1;
|
||||
await getSelectedFileItemsPage();
|
||||
};
|
||||
|
||||
const getSelectedFileItemsPage = async () => {
|
||||
if (!selectedItem) return;
|
||||
selectedFileItemsLoading = true;
|
||||
|
||||
const res = await searchKnowledgeFilesById(
|
||||
localStorage.token,
|
||||
selectedItem.id,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
selectedFileItemsPage
|
||||
).catch(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
selectedFileItemsTotal = res.total;
|
||||
const pageItems = res.items;
|
||||
|
||||
if ((pageItems ?? []).length === 0) {
|
||||
selectedFileAllItemsLoaded = true;
|
||||
} else {
|
||||
selectedFileAllItemsLoaded = false;
|
||||
}
|
||||
|
||||
if (selectedFileItems) {
|
||||
selectedFileItems = [...selectedFileItems, ...pageItems];
|
||||
} else {
|
||||
selectedFileItems = pageItems;
|
||||
}
|
||||
}
|
||||
|
||||
let collections = $knowledge
|
||||
.filter((item) => !item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
type: 'collection'
|
||||
}));
|
||||
``;
|
||||
let collection_files =
|
||||
$knowledge.length > 0
|
||||
? [
|
||||
...$knowledge
|
||||
.reduce((a, item) => {
|
||||
return [
|
||||
...new Set([
|
||||
...a,
|
||||
...(item?.files ?? []).map((file) => ({
|
||||
...file,
|
||||
collection: { name: item.name, description: item.description } // DO NOT REMOVE, USED IN FILE DESCRIPTION/ATTACHMENT
|
||||
}))
|
||||
])
|
||||
];
|
||||
}, [])
|
||||
.map((file) => ({
|
||||
...file,
|
||||
name: file?.meta?.name,
|
||||
description: `${file?.collection?.name} - ${file?.collection?.description}`,
|
||||
knowledge: true, // DO NOT REMOVE, USED TO INDICATE KNOWLEDGE BASE FILE
|
||||
type: 'file'
|
||||
}))
|
||||
]
|
||||
: [];
|
||||
selectedFileItemsLoading = false;
|
||||
return res;
|
||||
};
|
||||
|
||||
items = [...collections, ...collection_files];
|
||||
let page = 1;
|
||||
let items = null;
|
||||
let total = null;
|
||||
|
||||
let itemsLoading = false;
|
||||
let allItemsLoaded = false;
|
||||
|
||||
$: if (loaded) {
|
||||
init();
|
||||
}
|
||||
|
||||
const init = async () => {
|
||||
reset();
|
||||
await tick();
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
page = 1;
|
||||
items = null;
|
||||
total = null;
|
||||
allItemsLoaded = false;
|
||||
itemsLoading = false;
|
||||
};
|
||||
|
||||
const loadMoreItems = async () => {
|
||||
if (allItemsLoaded) return;
|
||||
page += 1;
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const getItemsPage = async () => {
|
||||
itemsLoading = true;
|
||||
const res = await getKnowledgeBases(localStorage.token, page).catch(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
console.log(res);
|
||||
total = res.total;
|
||||
const pageItems = res.items;
|
||||
|
||||
if ((pageItems ?? []).length === 0) {
|
||||
allItemsLoaded = true;
|
||||
} else {
|
||||
allItemsLoaded = false;
|
||||
}
|
||||
|
||||
if (items) {
|
||||
items = [...items, ...pageItems];
|
||||
} else {
|
||||
items = pageItems;
|
||||
}
|
||||
}
|
||||
|
||||
itemsLoading = false;
|
||||
return res;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await tick();
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#if loaded && items !== null}
|
||||
<div class="flex flex-col gap-0.5">
|
||||
{#each items as item, idx}
|
||||
<button
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(item);
|
||||
onSelect(item);
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (idx === 0) {
|
||||
selectedIdx = -1;
|
||||
}
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1">
|
||||
<Tooltip
|
||||
content={item?.legacy
|
||||
? $i18n.t('Legacy')
|
||||
: item?.type === 'file'
|
||||
? $i18n.t('File')
|
||||
: item?.type === 'collection'
|
||||
? $i18n.t('Collection')
|
||||
: ''}
|
||||
placement="top"
|
||||
{#if items.length === 0}
|
||||
<div class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
{$i18n.t('No knowledge bases found.')}
|
||||
</div>
|
||||
{:else}
|
||||
{#each items as item, idx (item.id)}
|
||||
<div
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
|
||||
selectedIdx
|
||||
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
|
||||
: ''}"
|
||||
>
|
||||
<button
|
||||
class="w-full flex-1"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
onSelect({
|
||||
type: 'collection',
|
||||
...item
|
||||
});
|
||||
}}
|
||||
on:mousemove={() => {
|
||||
selectedIdx = idx;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (idx === 0) {
|
||||
selectedIdx = -1;
|
||||
}
|
||||
}}
|
||||
data-selected={idx === selectedIdx}
|
||||
>
|
||||
{#if item?.type === 'collection'}
|
||||
<Database className="size-4" />
|
||||
{:else}
|
||||
<DocumentPage className="size-4" />
|
||||
{/if}
|
||||
</Tooltip>
|
||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1 shrink-0">
|
||||
<Tooltip content={$i18n.t('Collection')} placement="top">
|
||||
<Database className="size-4" />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1">
|
||||
{decodeString(item?.name)}
|
||||
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1 text-sm">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Tooltip content={$i18n.t('Show Files')} placement="top">
|
||||
<button
|
||||
type="button"
|
||||
class=" ml-2 opacity-50 hover:opacity-100 transition"
|
||||
on:click={() => {
|
||||
if (selectedItem && selectedItem.id === item.id) {
|
||||
selectedItem = null;
|
||||
} else {
|
||||
selectedItem = item;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if selectedItem && selectedItem.id === item.id}
|
||||
<ChevronDown className="size-3" />
|
||||
{:else}
|
||||
<ChevronRight className="size-3" />
|
||||
{/if}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if selectedItem && selectedItem.id === item.id}
|
||||
<div class="pl-3 mb-1 flex flex-col gap-0.5">
|
||||
{#if selectedFileItems === null && selectedFileItemsTotal === null}
|
||||
<div class=" py-1 flex justify-center">
|
||||
<Spinner className="size-3" />
|
||||
</div>
|
||||
{:else if selectedFileItemsTotal === 0}
|
||||
<div class=" text-xs text-gray-500 dark:text-gray-400 italic py-0.5 px-2">
|
||||
{$i18n.t('No files in this knowledge base.')}
|
||||
</div>
|
||||
{:else}
|
||||
{#each selectedFileItems as file, fileIdx (file.id)}
|
||||
<button
|
||||
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm hover:bg-gray-50 hover:dark:bg-gray-800 hover:dark:text-gray-100"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log(file);
|
||||
onSelect({
|
||||
type: 'file',
|
||||
name: file?.meta?.name,
|
||||
...file
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div class=" flex items-center gap-1.5">
|
||||
<Tooltip content={$i18n.t('Collection')} placement="top">
|
||||
<DocumentPage className="size-4" />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={decodeString(file?.meta?.name)} placement="top-start">
|
||||
<div class="line-clamp-1 flex-1 text-sm">
|
||||
{decodeString(file?.meta?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if !selectedFileAllItemsLoaded && !selectedFileItemsLoading}
|
||||
<Loader
|
||||
on:visible={async (e) => {
|
||||
if (!selectedFileItemsLoading) {
|
||||
await loadMoreSelectedFileItems();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2"
|
||||
>
|
||||
<Spinner className=" size-3" />
|
||||
<div class=" ">{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if !allItemsLoaded}
|
||||
<Loader
|
||||
on:visible={(e) => {
|
||||
if (!itemsLoading) {
|
||||
loadMoreItems();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
|
||||
<Spinner className=" size-4" />
|
||||
<div class=" ">{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="py-4.5">
|
||||
|
||||
Reference in New Issue
Block a user