From 96ecb47bc71c072aa34ef2be10781b042bef4e8c Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Sun, 5 Oct 2025 00:25:40 -0500 Subject: [PATCH] refac --- src/lib/components/workspace/Knowledge.svelte | 111 +++-- src/lib/components/workspace/Models.svelte | 423 ++++++++++-------- .../workspace/Models/ModelMenu.svelte | 9 +- src/routes/(app)/workspace/+layout.svelte | 5 +- .../workspace/models/create/+page.svelte | 14 +- 5 files changed, 327 insertions(+), 235 deletions(-) diff --git a/src/lib/components/workspace/Knowledge.svelte b/src/lib/components/workspace/Knowledge.svelte index d8bc8edfba..fcf15b7de3 100644 --- a/src/lib/components/workspace/Knowledge.svelte +++ b/src/lib/components/workspace/Knowledge.svelte @@ -6,10 +6,10 @@ dayjs.extend(relativeTime); import { toast } from 'svelte-sonner'; - import { onMount, getContext } from 'svelte'; + import { onMount, getContext, tick } from 'svelte'; const i18n = getContext('i18n'); - import { WEBUI_NAME, knowledge } from '$lib/stores'; + import { WEBUI_NAME, knowledge, user } from '$lib/stores'; import { getKnowledgeBases, deleteKnowledgeById, @@ -17,6 +17,7 @@ } from '$lib/apis/knowledge'; import { goto } from '$app/navigation'; + import { capitalizeFirstLetter } from '$lib/utils'; import DeleteConfirmDialog from '../common/ConfirmDialog.svelte'; import ItemMenu from './Knowledge/ItemMenu.svelte'; @@ -24,9 +25,9 @@ import Search from '../icons/Search.svelte'; import Plus from '../icons/Plus.svelte'; import Spinner from '../common/Spinner.svelte'; - import { capitalizeFirstLetter } from '$lib/utils'; import Tooltip from '../common/Tooltip.svelte'; import XMark from '../icons/XMark.svelte'; + import ViewSelector from './common/ViewSelector.svelte'; let loaded = false; @@ -34,14 +35,25 @@ let selectedItem = null; let showDeleteConfirm = false; + let tagsContainerElement: HTMLDivElement; + let viewOption = ''; + let fuse = null; let knowledgeBases = []; + + let items = []; let filteredItems = []; - $: if (knowledgeBases.length > 0) { - // Added a check for non-empty array, good practice - fuse = new Fuse(knowledgeBases, { + const setFuse = async () => { + items = knowledgeBases.filter( + (item) => + viewOption === '' || + (viewOption === 'created' && item.user_id === $user?.id) || + (viewOption === 'shared' && item.user_id !== $user?.id) + ); + + fuse = new Fuse(items, { keys: [ 'name', 'description', @@ -50,16 +62,24 @@ ], threshold: 0.3 }); + + await tick(); + setFilteredItems(); + }; + + $: 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 } - $: if (fuse) { - filteredItems = query - ? fuse.search(query).map((e) => { - return e.item; - }) - : knowledgeBases; + const setFilteredItems = () => { + filteredItems = query ? fuse.search(query).map((result) => result.item) : items; + }; + + $: if (query !== undefined && fuse) { + setFilteredItems(); } const deleteHandler = async (item) => { @@ -75,6 +95,7 @@ }; onMount(async () => { + viewOption = localStorage?.workspaceViewOption || ''; knowledgeBases = await getKnowledgeBaseList(localStorage.token); loaded = true; }); @@ -94,18 +115,31 @@ }} /> -
+
-
- {$i18n.t('Knowledge')} -
- {filteredItems.length} +
+ {$i18n.t('Knowledge')} +
+ +
+ {filteredItems.length} +
+
+ +
+ + + + +
-
+
@@ -128,22 +162,35 @@
{/if}
- -
- -
-
+
{ + if (e.deltaY !== 0) { + e.preventDefault(); + e.currentTarget.scrollLeft += e.deltaY; + } + }} + > +
+ { + localStorage.workspaceViewOption = value; + + await tick(); + }} + /> +
+
+ + +
{#each filteredItems as item}
-
+
+
@@ -369,213 +373,240 @@ {/if}
-
-
{ - if (e.deltaY !== 0) { - e.preventDefault(); - e.currentTarget.scrollLeft += e.deltaY; - } - }} - >
{ + if (e.deltaY !== 0) { + e.preventDefault(); + e.currentTarget.scrollLeft += e.deltaY; + } + }} > - { - localStorage.workspaceViewOption = value; - - await tick(); - setTags(); - }} - /> - - {#if (tags ?? []).length > 0} - { - return { value: tag, label: tag }; - })} - /> - {/if} -
-
- -
- {#each filteredModels as model (model.id)}
-
-
-
- modelfile profile -
-
+ { + localStorage.workspaceViewOption = value; - + + {#if (tags ?? []).length > 0} + { + return { value: tag, label: tag }; + })} + /> + {/if} +
+
+ + {#if (filteredModels ?? []).length !== 0} +
+ {#each filteredModels as model (model.id)} + + + + + + + {:else} + { + shareModelHandler(model); + }} + cloneHandler={() => { + cloneModelHandler(model); + }} + exportHandler={() => { + exportModelHandler(model); + }} + hideHandler={() => { + hideModelHandler(model); + }} + copyLinkHandler={() => { + copyLinkHandler(model); + }} + deleteHandler={() => { + selectedModel = model; + showModelDeleteConfirm = true; + }} + onClose={() => {}} + > +
+ +
+ + {/if} +
+
+
+ + +
+
+ +
+ +
+ {$i18n.t('By {{name}}', { + name: capitalizeFirstLetter( + model?.user?.name ?? model?.user?.email ?? $i18n.t('Deleted User') + ) + })} +
+ + +
ยท
+ + +
+
+ {#if (model?.meta?.description ?? '').trim()} + {model?.meta?.description} + {:else} + {model.id} + {/if} +
+
+ +
+
- - - -
-
- -
- {$i18n.t('By {{name}}', { - name: capitalizeFirstLetter( - model?.user?.name ?? model?.user?.email ?? $i18n.t('Deleted User') - ) - })} -
- -
- -
- {#if shiftKey} - - - - - - - - {:else} - {#if $user?.role === 'admin' || model.user_id === $user?.id || model.access_control.write.group_ids.some( (wg) => group_ids.includes(wg) )} - - - - - - {/if} - - { - shareModelHandler(model); - }} - cloneHandler={() => { - cloneModelHandler(model); - }} - exportHandler={() => { - exportModelHandler(model); - }} - hideHandler={() => { - hideModelHandler(model); - }} - copyLinkHandler={() => { - copyLinkHandler(model); - }} - deleteHandler={() => { - selectedModel = model; - showModelDeleteConfirm = true; - }} - onClose={() => {}} - > - - - -
- - { - toggleModelById(localStorage.token, model.id); - _models.set( - await getModels( - localStorage.token, - $config?.features?.enable_direct_connections && - ($settings?.directConnections ?? null) - ) - ); - }} - /> - -
- {/if} + + {/each} +
+ {:else} +
+
+
๐Ÿ˜•
+
{$i18n.t('No models found')}
+
+ {$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
- {/each} + {/if}
{#if $config?.features.enable_community_sharing} diff --git a/src/lib/components/workspace/Models/ModelMenu.svelte b/src/lib/components/workspace/Models/ModelMenu.svelte index 710008252d..a17b9258f3 100644 --- a/src/lib/components/workspace/Models/ModelMenu.svelte +++ b/src/lib/components/workspace/Models/ModelMenu.svelte @@ -43,7 +43,14 @@ }} > - +
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte index 3918f3593a..4473a2bae3 100644 --- a/src/routes/(app)/workspace/+layout.svelte +++ b/src/routes/(app)/workspace/+layout.svelte @@ -128,7 +128,10 @@
-
+
diff --git a/src/routes/(app)/workspace/models/create/+page.svelte b/src/routes/(app)/workspace/models/create/+page.svelte index d611b0aec8..31bdd96c38 100644 --- a/src/routes/(app)/workspace/models/create/+page.svelte +++ b/src/routes/(app)/workspace/models/create/+page.svelte @@ -71,13 +71,17 @@ return; } - let data = JSON.parse(event.data); + try { + let data = JSON.parse(event.data); - if (data?.info) { - data = data.info; + if (data?.info) { + data = data.info; + } + + model = data; + } catch (e) { + console.error('Failed to parse message data:', e); } - - model = data; }); if (window.opener ?? false) {