This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 04:12:11 -04:00
parent 05e3f71317
commit f8350360df
13 changed files with 492 additions and 249 deletions
+15 -1
View File
@@ -22,7 +22,9 @@
import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import ItemMenu from './Knowledge/ItemMenu.svelte';
import CreateKnowledgeBase from './Knowledge/CreateKnowledgeBase.svelte';
import Badge from '../common/Badge.svelte';
import Modal from '../common/Modal.svelte';
import Search from '../icons/Search.svelte';
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
@@ -46,6 +48,7 @@
let loaded = false;
let showDeleteConfirm = false;
let showCreateModal = false;
let tagsContainerElement: HTMLDivElement;
let selectedItem: KnowledgeListItem | null = null;
@@ -67,7 +70,9 @@
{
id: 'knowledge-new',
label: $i18n.t('Create'),
href: '/workspace/knowledge/create'
onClick: () => {
showCreateModal = true;
}
}
]);
}
@@ -197,6 +202,15 @@
}}
/>
<Modal bind:show={showCreateModal} size="sm">
<CreateKnowledgeBase
modal={true}
onBack={() => {
showCreateModal = false;
}}
/>
</Modal>
<div class="space-y-1">
<div class="flex h-8 w-full items-center gap-2">
<div class="flex min-w-0 flex-1">
@@ -10,11 +10,19 @@
import AccessControl from '../common/AccessControl.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
export let modal = false;
/** @type {() => void | Promise<void>} */
export let onBack = () => goto('/workspace/knowledge');
/** @type {(knowledge: { id: string }) => void | Promise<void>} */
export let onCreated = (knowledge) => goto(`/workspace/knowledge/${knowledge.id}`);
let loading = false;
let name = '';
let description = '';
/** @type {{ id?: string; principal_type: 'user' | 'group'; principal_id: string; permission: 'read' | 'write' }[]} */
let accessGrants = [];
const submitHandler = async () => {
@@ -36,7 +44,7 @@
if (res) {
toast.success($i18n.t('Knowledge created successfully.'));
goto(`/workspace/knowledge/${res.id}`);
await onCreated(res);
}
loading = false;
@@ -44,39 +52,57 @@
</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"
{#if modal}
<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
<h3 class="text-base font-normal">{$i18n.t('Create a knowledge base')}</h3>
<button
class="self-center shrink-0 ml-2"
aria-label={$i18n.t('Close')}
type="button"
on:click={() => {
onBack();
}}
>
<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>
<XMark className="size-5" />
</button>
</div>
<div class=" self-center font-normal text-sm">{$i18n.t('Back')}</div>
</button>
{:else}
<button
class="flex space-x-1"
on:click={() => {
onBack();
}}
>
<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-normal text-sm">{$i18n.t('Back')}</div>
</button>
{/if}
<form
class="flex flex-col max-w-lg mx-auto mt-10 mb-10"
class="flex flex-col {modal ? 'px-5 pb-3' : 'max-w-lg mx-auto mt-10 mb-10'}"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<div class=" w-full flex flex-col justify-center">
<div class=" text-2xl font-normal mb-2.5">
{$i18n.t('Create a knowledge base')}
</div>
{#if !modal}
<div class=" text-2xl font-normal mb-2.5">
{$i18n.t('Create a knowledge base')}
</div>
{/if}
<div class="w-full flex flex-col gap-2.5">
<div class="w-full">
@@ -103,7 +129,7 @@
bind:value={description}
placeholder={$i18n.t('Describe your knowledge base and objectives')}
required
/>
></textarea>
</div>
</div>
</div>
@@ -120,12 +146,24 @@
/>
</div>
<div class="flex justify-end mt-2">
<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'mt-2'}">
{#if modal}
<button
class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
type="button"
on:click={() => {
onBack();
}}
>
{$i18n.t('Cancel')}
</button>
{/if}
<div>
<button
class=" text-sm px-4 py-2 transition rounded-lg {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800'} flex"
class="{modal
? `px-3.5 py-1.5 text-sm bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full ${loading ? 'cursor-not-allowed' : ''}`
: `text-sm px-4 py-2 transition rounded-lg ${loading ? 'cursor-not-allowed bg-gray-100 dark:bg-gray-800' : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800'}`} flex"
type="submit"
disabled={loading}
>