Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac: rename projects -> knowledge

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-01 22:45:04 -07:00
parent 3e012f0219
commit 08969ecf89
24 changed files with 335 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/Projects.svelte → src/lib/components/workspace/Knowledge.svelte
+30 -30
View File
@@ -7,9 +7,9 @@
import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n');
import { WEBUI_NAME, projects } from '$lib/stores';
import { WEBUI_NAME, knowledge } from '$lib/stores';
import { getProjects, deleteProjectById } from '$lib/apis/projects';
import { getKnowledgeItems, deleteKnowledgeById } from '$lib/apis/knowledge';
import { blobToFile, transformFileName } from '$lib/utils';
@@ -18,50 +18,50 @@
import GarbageBin from '../icons/GarbageBin.svelte';
import Pencil from '../icons/Pencil.svelte';
import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import ProjectMenu from './Projects/ProjectMenu.svelte';
import ItemMenu from './Knowledge/ItemMenu.svelte';
let query = '';
let selectedProject = null;
let selectedItem = null;
let showDeleteConfirm = false;
let filteredProjects;
$: filteredProjects = $projects.filter((project) => query === '' || project.name.includes(query));
let filteredItems;
$: filteredItems = $knowledge.filter((item) => query === '' || item.name.includes(query));
const deleteHandler = async (project) => {
const res = await deleteProjectById(localStorage.token, project.id).catch((e) => {
const deleteHandler = async (item) => {
const res = await deleteKnowledgeById(localStorage.token, item.id).catch((e) => {
toast.error(e);
});
if (res) {
projects.set(await getProjects(localStorage.token));
toast.success($i18n.t('Project deleted successfully.'));
knowledge.set(await getKnowledgeItems(localStorage.token));
toast.success($i18n.t('Knowledge deleted successfully.'));
}
};
onMount(async () => {
projects.set(await getProjects(localStorage.token));
knowledge.set(await getKnowledgeItems(localStorage.token));
});
</script>
<svelte:head>
<title>
{$i18n.t('Projects')} | {$WEBUI_NAME}
{$i18n.t('Knowledge')} | {$WEBUI_NAME}
</title>
</svelte:head>
<DeleteConfirmDialog
bind:show={showDeleteConfirm}
on:confirm={() => {
deleteHandler(selectedProject);
deleteHandler(selectedItem);
}}
/>
<div class="mb-3">
<div class="flex justify-between items-center">
<div class="flex md:self-center text-lg font-medium px-0.5">
{$i18n.t('Projects')}
{$i18n.t('Knowledge')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$projects.length}</span>
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$knowledge.length}</span>
</div>
</div>
</div>
@@ -85,16 +85,16 @@
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Projects')}
placeholder={$i18n.t('Search Knowledge')}
/>
</div>
<div>
<button
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
aria-label={$i18n.t('Create Project')}
aria-label={$i18n.t('Create Knowledge')}
on:click={() => {
goto('/workspace/projects/create');
goto('/workspace/knowledge/create');
}}
>
<svg
@@ -114,25 +114,25 @@
<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
<div class="my-3 mb-5 grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
{#each filteredProjects as project}
{#each filteredItems as item}
<button
class=" flex space-x-4 cursor-pointer text-left w-full px-4 py-3 border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 rounded-xl"
on:click={() => {
if (project?.meta?.document) {
toast.error($i18n.t('Documents cannot be edited, please create a new project.'));
if (item?.meta?.document) {
toast.error($i18n.t('Only collections can be edited, create a new knowledge instead.'));
} else {
goto(`/workspace/projects/${project.id}`);
goto(`/workspace/knowledge/${item.id}`);
}
}}
>
<div class=" w-full">
<div class="flex items-center justify-between -mt-1">
<div class=" font-semibold line-clamp-1 h-fit">{project.name}</div>
<div class=" font-semibold line-clamp-1 h-fit">{item.name}</div>
<div class=" flex self-center">
<ProjectMenu
<ItemMenu
on:delete={() => {
selectedProject = project;
selectedItem = item;
showDeleteConfirm = true;
}}
/>
@@ -141,12 +141,12 @@
<div class=" self-center flex-1">
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
{project.description}
{item.description}
</div>
<div class="mt-5 flex justify-between">
<div>
{#if project?.meta?.document}
{#if item?.meta?.document}
<div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1"
>
@@ -156,12 +156,12 @@
<div
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded uppercase text-xs font-bold px-1"
>
{$i18n.t('Project')}
{$i18n.t('Collection')}
</div>
{/if}
</div>
<div class=" text-xs text-gray-500">
Updated {dayjs(project.updated_at * 1000).fromNow()}
Updated {dayjs(item.updated_at * 1000).fromNow()}
</div>
</div>
</div>
@@ -171,5 +171,5 @@
</div>
<div class=" text-gray-500 text-xs mt-1 mb-2">
ⓘ {$i18n.t("Use '#' in the prompt input to load and select your projects.")}
ⓘ {$i18n.t("Use '#' in the prompt input to load and include your knowledge.")}
</div>
src/lib/components/workspace/Projects/CreateProject.svelte → src/lib/components/workspace/Knowledge/CreateKnowledge.svelte
+11 -11
View File
@@ -3,9 +3,9 @@
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import { createNewProject, getProjects } from '$lib/apis/projects';
import { createNewKnowledge, getKnowledgeItems } from '$lib/apis/knowledge';
import { toast } from 'svelte-sonner';
import { projects } from '$lib/stores';
import { knowledge } from '$lib/stores';
let loading = false;
@@ -15,14 +15,14 @@
const submitHandler = async () => {
loading = true;
const res = await createNewProject(localStorage.token, name, description).catch((e) => {
const res = await createNewKnowledge(localStorage.token, name, description).catch((e) => {
toast.error(e);
});
if (res) {
toast.success($i18n.t('Project created successfully.'));
projects.set(await getProjects(localStorage.token));
goto(`/workspace/projects/${res.id}`);
toast.success($i18n.t('Knowledge created successfully.'));
knowledge.set(await getKnowledgeItems(localStorage.token));
goto(`/workspace/knowledge/${res.id}`);
}
loading = false;
@@ -33,7 +33,7 @@
<button
class="flex space-x-1"
on:click={() => {
goto('/workspace/projects');
goto('/workspace/knowledge');
}}
>
<div class=" self-center">
@@ -60,7 +60,7 @@
}}
>
<div class=" w-full flex flex-col justify-center">
<div class=" text-2xl font-medium font-primary mb-2.5">Create a project</div>
<div class=" text-2xl font-medium font-primary mb-2.5">Create a knowledge base</div>
<div class="w-full flex flex-col gap-2.5">
<div class="w-full">
@@ -71,7 +71,7 @@
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
type="text"
bind:value={name}
placeholder={`Name your project`}
placeholder={`Name your knowledge base`}
required
/>
</div>
@@ -85,7 +85,7 @@
class="w-full resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
rows="4"
bind:value={description}
placeholder={`Describe your project, its goals, and objectives`}
placeholder={`Describe your knowledge base and objectives`}
required
/>
</div>
@@ -102,7 +102,7 @@
type="submit"
disabled={loading}
>
<div class=" self-center font-medium">{$i18n.t('Create Project')}</div>
<div class=" self-center font-medium">{$i18n.t('Create Knowledge')}</div>
{#if loading}
<div class="ml-1.5 self-center">
src/lib/components/workspace/Knowledge/Item.svelte
+68
View File
@@ -0,0 +1,68 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n');
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { getKnowledgeById } from '$lib/apis/knowledge';
import Spinner from '$lib/components/common/Spinner.svelte';
let id = null;
let knowledge = null;
onMount(async () => {
id = $page.params.id;
const res = await getKnowledgeById(localStorage.token, id).catch((e) => {
console.error(e);
});
if (res) {
knowledge = res;
} else {
goto('/workspace/knowledge');
}
});
</script>
<div class="w-full max-h-full">
<button
class="flex space-x-1"
on:click={() => {
goto('/workspace/knowledge');
}}
>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<div class="flex flex-col my-2">
{#if id && knowledge}
<div>
<div>
<div class=" font-medium text-xl font-primary">
{knowledge.name}
</div>
<div class=" line-clamp-2 font-medium text-sm">
{knowledge.description}
</div>
</div>
</div>
{:else}
<Spinner />
{/if}
</div>
</div>
src/lib/components/workspace/Projects/ProjectMenu.svelte → src/lib/components/workspace/Knowledge/ItemMenu.svelte
View File
src/lib/components/workspace/Models/Knowledge/Selector.svelte
+8 -8
View File
@@ -3,33 +3,33 @@
import { onMount, getContext } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { projects } from '$lib/stores';
import { knowledge } from '$lib/stores';
import Dropdown from '$lib/components/common/Dropdown.svelte';
const i18n = getContext('i18n');
export let onClose: Function = () => {};
export let knowledge = [];
export let _knowledge = [];
let items = [];
onMount(() => {
let collections = [
...$projects
...$knowledge
.reduce((a, e, i, arr) => {
return [...new Set([...a, ...(e?.content?.tags ?? []).map((tag) => tag.name)])];
}, [])
.map((tag) => ({
name: tag,
type: 'collection',
collection_names: $projects
collection_names: $knowledge
.filter((doc) => (doc?.content?.tags ?? []).map((tag) => tag.name).includes(tag))
.map((doc) => doc.collection_name)
}))
];
items = [...collections, ...$projects];
items = [...collections, ...$knowledge];
});
</script>
@@ -60,9 +60,9 @@
<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={() => {
if (!knowledge.find((k) => k.name === item.name)) {
knowledge = [
...knowledge,
if (!_knowledge.find((k) => k.name === item.name)) {
_knowledge = [
..._knowledge,
{
...item,
type: item?.type ?? 'doc'
src/lib/components/workspace/Projects/Project.svelte
View File