enh/refac: kb pagination
This commit is contained in:
Timothy Jaeryang Baek
@@ -1,6 +1,4 @@
|
||||
<script lang="ts">
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
dayjs.extend(relativeTime);
|
||||
@@ -10,11 +8,7 @@
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { WEBUI_NAME, knowledge, user } from '$lib/stores';
|
||||
import {
|
||||
getKnowledgeBases,
|
||||
deleteKnowledgeById,
|
||||
getKnowledgeBaseList
|
||||
} from '$lib/apis/knowledge';
|
||||
import { deleteKnowledgeById, searchKnowledgeBases } from '$lib/apis/knowledge';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import { capitalizeFirstLetter } from '$lib/utils';
|
||||
@@ -28,75 +22,90 @@
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
import ViewSelector from './common/ViewSelector.svelte';
|
||||
import Loader from '../common/Loader.svelte';
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let query = '';
|
||||
let selectedItem = null;
|
||||
let showDeleteConfirm = false;
|
||||
|
||||
let tagsContainerElement: HTMLDivElement;
|
||||
|
||||
let selectedItem = null;
|
||||
|
||||
let page = 1;
|
||||
let query = '';
|
||||
let viewOption = '';
|
||||
|
||||
let fuse = null;
|
||||
let items = null;
|
||||
let total = null;
|
||||
|
||||
let knowledgeBases = [];
|
||||
let allItemsLoaded = false;
|
||||
let itemsLoading = false;
|
||||
|
||||
let items = [];
|
||||
let filteredItems = [];
|
||||
$: if (loaded && query !== undefined && viewOption !== undefined) {
|
||||
init();
|
||||
}
|
||||
|
||||
const setFuse = async () => {
|
||||
items = knowledgeBases.filter(
|
||||
(item) =>
|
||||
viewOption === '' ||
|
||||
(viewOption === 'created' && item.user_id === $user?.id) ||
|
||||
(viewOption === 'shared' && item.user_id !== $user?.id)
|
||||
const reset = () => {
|
||||
page = 1;
|
||||
items = null;
|
||||
total = null;
|
||||
allItemsLoaded = false;
|
||||
itemsLoading = false;
|
||||
};
|
||||
|
||||
const loadMoreItems = async () => {
|
||||
if (allItemsLoaded) return;
|
||||
page += 1;
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
reset();
|
||||
await getItemsPage();
|
||||
};
|
||||
|
||||
const getItemsPage = async () => {
|
||||
itemsLoading = true;
|
||||
const res = await searchKnowledgeBases(localStorage.token, query, viewOption, page).catch(
|
||||
() => {
|
||||
return [];
|
||||
}
|
||||
);
|
||||
|
||||
fuse = new Fuse(items, {
|
||||
keys: [
|
||||
'name',
|
||||
'description',
|
||||
'user.name', // Ensures Fuse looks into item.user.name
|
||||
'user.email' // Ensures Fuse looks into item.user.email
|
||||
],
|
||||
threshold: 0.3
|
||||
});
|
||||
if (res) {
|
||||
console.log(res);
|
||||
total = res.total;
|
||||
const pageItems = res.items;
|
||||
|
||||
await tick();
|
||||
setFilteredItems();
|
||||
if ((pageItems ?? []).length === 0) {
|
||||
allItemsLoaded = true;
|
||||
} else {
|
||||
allItemsLoaded = false;
|
||||
}
|
||||
|
||||
if (items) {
|
||||
items = [...items, ...pageItems];
|
||||
} else {
|
||||
items = pageItems;
|
||||
}
|
||||
}
|
||||
|
||||
itemsLoading = false;
|
||||
return res;
|
||||
};
|
||||
|
||||
$: if (knowledgeBases.length > 0 && viewOption !== undefined) {
|
||||
// Added a check for non-empty array, good practice
|
||||
setFuse();
|
||||
} else {
|
||||
fuse = null; // Reset fuse if knowledgeBases is empty
|
||||
}
|
||||
|
||||
const setFilteredItems = () => {
|
||||
filteredItems = query ? fuse.search(query).map((result) => result.item) : items;
|
||||
};
|
||||
|
||||
$: if (query !== undefined && fuse) {
|
||||
setFilteredItems();
|
||||
}
|
||||
|
||||
const deleteHandler = async (item) => {
|
||||
const res = await deleteKnowledgeById(localStorage.token, item.id).catch((e) => {
|
||||
toast.error(`${e}`);
|
||||
});
|
||||
|
||||
if (res) {
|
||||
knowledgeBases = await getKnowledgeBaseList(localStorage.token);
|
||||
knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
toast.success($i18n.t('Knowledge deleted successfully.'));
|
||||
init();
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
viewOption = localStorage?.workspaceViewOption || '';
|
||||
knowledgeBases = await getKnowledgeBaseList(localStorage.token);
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
@@ -123,7 +132,7 @@
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
|
||||
{filteredItems.length}
|
||||
{total}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -192,96 +201,117 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if (filteredItems ?? []).length !== 0}
|
||||
<!-- The Aleph dreams itself into being, and the void learns its own name -->
|
||||
<div class=" my-2 px-3 grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
{#each filteredItems as item}
|
||||
<button
|
||||
class=" flex space-x-4 cursor-pointer text-left w-full px-3 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
|
||||
on:click={() => {
|
||||
if (item?.meta?.document) {
|
||||
toast.error(
|
||||
$i18n.t(
|
||||
'Only collections can be edited, create a new knowledge base to edit/add documents.'
|
||||
)
|
||||
);
|
||||
} else {
|
||||
goto(`/workspace/knowledge/${item.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" w-full">
|
||||
<div class=" self-center flex-1 justify-between">
|
||||
<div class="flex items-center justify-between -my-1 h-8">
|
||||
<div class=" flex gap-2 items-center justify-between w-full">
|
||||
<div>
|
||||
<Badge type="success" content={$i18n.t('Collection')} />
|
||||
</div>
|
||||
|
||||
{#if !item?.write_access}
|
||||
{#if items !== null && total !== null}
|
||||
{#if (items ?? []).length !== 0}
|
||||
<!-- The Aleph dreams itself into being, and the void learns its own name -->
|
||||
<div class=" my-2 px-3 grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
{#each items as item}
|
||||
<button
|
||||
class=" flex space-x-4 cursor-pointer text-left w-full px-3 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
|
||||
on:click={() => {
|
||||
if (item?.meta?.document) {
|
||||
toast.error(
|
||||
$i18n.t(
|
||||
'Only collections can be edited, create a new knowledge base to edit/add documents.'
|
||||
)
|
||||
);
|
||||
} else {
|
||||
goto(`/workspace/knowledge/${item.id}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class=" w-full">
|
||||
<div class=" self-center flex-1 justify-between">
|
||||
<div class="flex items-center justify-between -my-1 h-8">
|
||||
<div class=" flex gap-2 items-center justify-between w-full">
|
||||
<div>
|
||||
<Badge type="muted" content={$i18n.t('Read Only')} />
|
||||
<Badge type="success" content={$i18n.t('Collection')} />
|
||||
</div>
|
||||
|
||||
{#if !item?.write_access}
|
||||
<div>
|
||||
<Badge type="muted" content={$i18n.t('Read Only')} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if item?.write_access}
|
||||
<div class="flex items-center gap-2">
|
||||
<div class=" flex self-center">
|
||||
<ItemMenu
|
||||
on:delete={() => {
|
||||
selectedItem = item;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if item?.write_access}
|
||||
<div class="flex items-center gap-2">
|
||||
<div class=" flex self-center">
|
||||
<ItemMenu
|
||||
on:delete={() => {
|
||||
selectedItem = item;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class=" flex items-center gap-1 justify-between px-1.5">
|
||||
<Tooltip content={item?.description ?? item.name}>
|
||||
<div class=" flex items-center gap-2">
|
||||
<div class=" text-sm font-medium line-clamp-1 capitalize">{item.name}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Tooltip content={dayjs(item.updated_at * 1000).format('LLLL')}>
|
||||
<div class=" text-xs text-gray-500 line-clamp-1">
|
||||
{$i18n.t('Updated')}
|
||||
{dayjs(item.updated_at * 1000).fromNow()}
|
||||
<div class=" flex items-center gap-1 justify-between px-1.5">
|
||||
<Tooltip content={item?.description ?? item.name}>
|
||||
<div class=" flex items-center gap-2">
|
||||
<div class=" text-sm font-medium line-clamp-1 capitalize">{item.name}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div class="text-xs text-gray-500">
|
||||
<Tooltip
|
||||
content={item?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
item?.user?.name ?? item?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
<div class="flex items-center gap-2">
|
||||
<Tooltip content={dayjs(item.updated_at * 1000).format('LLLL')}>
|
||||
<div class=" text-xs text-gray-500 line-clamp-1 hidden sm:block">
|
||||
{$i18n.t('Updated')}
|
||||
{dayjs(item.updated_at * 1000).fromNow()}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div class="text-xs text-gray-500 shrink-0">
|
||||
<Tooltip
|
||||
content={item?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
item?.user?.name ?? item?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#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}
|
||||
{:else}
|
||||
<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
|
||||
<div class="max-w-md text-center">
|
||||
<div class=" text-3xl mb-3">😕</div>
|
||||
<div class=" text-lg font-medium mb-1">{$i18n.t('No knowledge found')}</div>
|
||||
<div class=" text-gray-500 text-center text-xs">
|
||||
{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
|
||||
<div class="max-w-md text-center">
|
||||
<div class=" text-3xl mb-3">😕</div>
|
||||
<div class=" text-lg font-medium mb-1">{$i18n.t('No knowledge found')}</div>
|
||||
<div class=" text-gray-500 text-center text-xs">
|
||||
{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="w-full h-full flex justify-center items-center py-10">
|
||||
<Spinner className="size-4" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script>
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
import { createNewKnowledge, getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { knowledge, user } from '$lib/stores';
|
||||
import { user } from '$lib/stores';
|
||||
import { createNewKnowledge } from '$lib/apis/knowledge';
|
||||
|
||||
import AccessControl from '../common/AccessControl.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
|
||||
@@ -37,7 +39,6 @@
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Knowledge created successfully.'));
|
||||
knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
goto(`/workspace/knowledge/${res.id}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
import {
|
||||
addFileToKnowledgeById,
|
||||
getKnowledgeById,
|
||||
getKnowledgeBases,
|
||||
removeFileFromKnowledgeById,
|
||||
resetKnowledgeById,
|
||||
updateFileFromKnowledgeById,
|
||||
@@ -534,7 +533,6 @@
|
||||
|
||||
if (res) {
|
||||
toast.success($i18n.t('Knowledge updated successfully'));
|
||||
_knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
@@ -43,13 +43,13 @@
|
||||
<div class="flex gap-2 items-center line-clamp-1">
|
||||
<div class="shrink-0">
|
||||
{#if file?.status !== 'uploading'}
|
||||
<DocumentPage className="size-3" />
|
||||
<DocumentPage className="size-3.5" />
|
||||
{:else}
|
||||
<Spinner className="size-3" />
|
||||
<Spinner className="size-3.5" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="line-clamp-1">
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{file?.name ?? file?.meta?.name}
|
||||
{#if file?.meta?.size}
|
||||
<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import { config, knowledge, settings, user } from '$lib/stores';
|
||||
|
||||
import Selector from './Knowledge/Selector.svelte';
|
||||
import KnowledgeSelector from './Knowledge/KnowledgeSelector.svelte';
|
||||
import FileItem from '$lib/components/common/FileItem.svelte';
|
||||
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
@@ -128,9 +128,6 @@
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (!$knowledge) {
|
||||
knowledge.set(await getKnowledgeBases(localStorage.token));
|
||||
}
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
@@ -190,8 +187,7 @@
|
||||
|
||||
{#if loaded}
|
||||
<div class="flex flex-wrap flex-row text-sm gap-1">
|
||||
<Selector
|
||||
knowledgeItems={$knowledge || []}
|
||||
<KnowledgeSelector
|
||||
on:select={(e) => {
|
||||
const item = e.detail;
|
||||
|
||||
@@ -210,7 +206,7 @@
|
||||
>
|
||||
{$i18n.t('Select Knowledge')}
|
||||
</div>
|
||||
</Selector>
|
||||
</KnowledgeSelector>
|
||||
|
||||
{#if $user?.role === 'admin' || $user?.permissions?.chat?.file_upload}
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { onMount, getContext, createEventDispatcher } from 'svelte';
|
||||
|
||||
import { searchNotes } from '$lib/apis/notes';
|
||||
import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
|
||||
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { decodeString } from '$lib/utils';
|
||||
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Database from '$lib/components/icons/Database.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import PageEdit from '$lib/components/icons/PageEdit.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let onClose: Function = () => {};
|
||||
|
||||
let show = false;
|
||||
|
||||
let query = '';
|
||||
|
||||
let noteItems = [];
|
||||
let knowledgeItems = [];
|
||||
let fileItems = [];
|
||||
|
||||
let items = [];
|
||||
|
||||
$: items = [...noteItems, ...knowledgeItems, ...fileItems];
|
||||
|
||||
$: if (query !== null) {
|
||||
getItems();
|
||||
}
|
||||
|
||||
const getItems = () => {
|
||||
getNoteItems();
|
||||
getKnowledgeItems();
|
||||
getKnowledgeFileItems();
|
||||
};
|
||||
|
||||
const getNoteItems = async () => {
|
||||
const res = await searchNotes(localStorage.token, query).catch(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
noteItems = res.items.map((note) => {
|
||||
return {
|
||||
...note,
|
||||
type: 'note',
|
||||
name: note.title,
|
||||
description: dayjs(note.updated_at / 1000000).fromNow()
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getKnowledgeItems = async () => {
|
||||
const res = await searchKnowledgeBases(localStorage.token, query).catch(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
knowledgeItems = res.items.map((note) => {
|
||||
return {
|
||||
...note,
|
||||
type: 'collection'
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getKnowledgeFileItems = async () => {
|
||||
const res = await searchKnowledgeFiles(localStorage.token, query).catch(() => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
fileItems = res.items.map((file) => {
|
||||
return {
|
||||
...file,
|
||||
type: 'file',
|
||||
name: file.meta?.name || file.filename,
|
||||
description: file.description || ''
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
getItems();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
bind:show
|
||||
on:change={(e) => {
|
||||
if (e.detail === false) {
|
||||
onClose();
|
||||
query = '';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class=" text-black dark:text-white rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-70 p-1.5"
|
||||
sideOffset={8}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
<div class=" flex w-full space-x-2 px-2 pb-0.5">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center mr-2">
|
||||
<Search className="size-3.5" />
|
||||
</div>
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-h-56 overflow-y-scroll gap-0.5 flex flex-col">
|
||||
{#if items.length === 0}
|
||||
<div class="text-center text-xs text-gray-500 dark:text-gray-400 pt-4 pb-6">
|
||||
{$i18n.t('No knowledge found')}
|
||||
</div>
|
||||
{:else}
|
||||
{#each items as item, i}
|
||||
{#if i === 0 || item?.type !== items[i - 1]?.type}
|
||||
<div class="px-2 text-xs text-gray-500 py-1">
|
||||
{#if item?.type === 'note'}
|
||||
{$i18n.t('Notes')}
|
||||
{:else if item?.type === 'collection'}
|
||||
{$i18n.t('Collections')}
|
||||
{:else if item?.type === 'file'}
|
||||
{$i18n.t('Files')}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
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 selected-command-option-button"
|
||||
>
|
||||
<button
|
||||
class="w-full flex-1"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
dispatch('select', item);
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<div class=" text-black dark:text-gray-100 flex items-center gap-1 shrink-0">
|
||||
{#if item.type === 'note'}
|
||||
<Tooltip content={$i18n.t('Note')} placement="top">
|
||||
<PageEdit className="size-4" />
|
||||
</Tooltip>
|
||||
{:else}
|
||||
<Tooltip content={$i18n.t('Collection')} placement="top">
|
||||
<Database className="size-4" />
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip
|
||||
content={item.description || decodeString(item?.name)}
|
||||
placement="top-start"
|
||||
>
|
||||
<div class="line-clamp-1 flex-1 text-sm text-left">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@@ -1,186 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
import { DropdownMenu } from 'bits-ui';
|
||||
import { onMount, getContext, createEventDispatcher } from 'svelte';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { knowledge } from '$lib/stores';
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import Search from '$lib/components/icons/Search.svelte';
|
||||
import { getNoteList } from '$lib/apis/notes';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let onClose: Function = () => {};
|
||||
|
||||
export let knowledgeItems = [];
|
||||
|
||||
let query = '';
|
||||
|
||||
let items = [];
|
||||
let filteredItems = [];
|
||||
|
||||
let fuse = null;
|
||||
$: if (fuse) {
|
||||
filteredItems = query
|
||||
? fuse.search(query).map((e) => {
|
||||
return e.item;
|
||||
})
|
||||
: items;
|
||||
}
|
||||
|
||||
const decodeString = (str: string) => {
|
||||
try {
|
||||
return decodeURIComponent(str);
|
||||
} catch (e) {
|
||||
return str;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
let notes = await getNoteList(localStorage.token).catch(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
notes = notes.map((note) => {
|
||||
return {
|
||||
...note,
|
||||
type: 'note',
|
||||
name: note.title,
|
||||
description: dayjs(note.updated_at / 1000000).fromNow()
|
||||
};
|
||||
});
|
||||
|
||||
let collections = knowledgeItems
|
||||
.filter((item) => !item?.meta?.document)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
type: 'collection'
|
||||
}));
|
||||
let collection_files =
|
||||
knowledgeItems.length > 0
|
||||
? [
|
||||
...knowledgeItems
|
||||
.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}`,
|
||||
type: 'file'
|
||||
}))
|
||||
]
|
||||
: [];
|
||||
|
||||
items = [...notes, ...collections, ...collection_files];
|
||||
fuse = new Fuse(items, {
|
||||
keys: ['name', 'description']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
on:change={(e) => {
|
||||
if (e.detail === false) {
|
||||
onClose();
|
||||
query = '';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
|
||||
<div slot="content">
|
||||
<DropdownMenu.Content
|
||||
class="w-full max-w-96 rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-[99999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg"
|
||||
sideOffset={8}
|
||||
side="bottom"
|
||||
align="start"
|
||||
transition={flyAndScale}
|
||||
>
|
||||
<div class=" flex w-full space-x-2 py-0.5 px-2 pb-2">
|
||||
<div class="flex flex-1">
|
||||
<div class=" self-center ml-1 mr-3">
|
||||
<Search />
|
||||
</div>
|
||||
<input
|
||||
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
|
||||
bind:value={query}
|
||||
placeholder={$i18n.t('Search Knowledge')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-h-56 overflow-y-scroll">
|
||||
{#if filteredItems.length === 0}
|
||||
<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-4">
|
||||
{$i18n.t('No knowledge found')}
|
||||
</div>
|
||||
{:else}
|
||||
{#each filteredItems as item}
|
||||
<DropdownMenu.Item
|
||||
class="flex gap-2.5 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
|
||||
on:click={() => {
|
||||
dispatch('select', item);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div class=" font-medium text-black dark:text-gray-100 flex items-center gap-1">
|
||||
{#if item.legacy}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
|
||||
>
|
||||
Legacy
|
||||
</div>
|
||||
{:else if item?.meta?.document}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
|
||||
>
|
||||
Document
|
||||
</div>
|
||||
{:else if item?.type === 'file'}
|
||||
<div
|
||||
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
|
||||
>
|
||||
File
|
||||
</div>
|
||||
{:else if item?.type === 'note'}
|
||||
<div
|
||||
class="bg-blue-500/20 text-blue-700 dark:text-blue-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
|
||||
>
|
||||
Note
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
|
||||
>
|
||||
Collection
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="line-clamp-1">
|
||||
{decodeString(item?.name)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
|
||||
{item?.description}
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</DropdownMenu.Content>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@@ -2,12 +2,11 @@
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
import { onMount, getContext, tick } from 'svelte';
|
||||
import { models, tools, functions, knowledge as knowledgeCollections, user } from '$lib/stores';
|
||||
import { models, tools, functions, user } from '$lib/stores';
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
|
||||
import { getTools } from '$lib/apis/tools';
|
||||
import { getFunctions } from '$lib/apis/functions';
|
||||
import { getKnowledgeBases } from '$lib/apis/knowledge';
|
||||
|
||||
import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
|
||||
import Tags from '$lib/components/common/Tags.svelte';
|
||||
@@ -223,7 +222,6 @@
|
||||
onMount(async () => {
|
||||
await tools.set(await getTools(localStorage.token));
|
||||
await functions.set(await getFunctions(localStorage.token));
|
||||
await knowledgeCollections.set([...(await getKnowledgeBases(localStorage.token))]);
|
||||
|
||||
// Scroll to top 'workspace-container' element
|
||||
const workspaceContainer = document.getElementById('workspace-container');
|
||||
|
||||
Reference in New Issue
Block a user