enh/refac: kb pagination
This commit is contained in:
Timothy Jaeryang Baek
@@ -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