160 lines
4 KiB
Svelte
160 lines
4 KiB
Svelte
<script lang="ts">
|
|
import { getContext, createEventDispatcher, onMount } from 'svelte';
|
|
|
|
import Spinner from '$lib/components/common/Spinner.svelte';
|
|
import Modal from '$lib/components/common/Modal.svelte';
|
|
import XMark from '$lib/components/icons/XMark.svelte';
|
|
|
|
import { toast } from 'svelte-sonner';
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
|
import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
|
|
import { user } from '$lib/stores';
|
|
const i18n = getContext('i18n');
|
|
|
|
export let show = false;
|
|
export let onSubmit: Function = (e) => {};
|
|
|
|
export let edit = false;
|
|
|
|
export let folder = null;
|
|
|
|
let name = '';
|
|
let data = {
|
|
system_prompt: '',
|
|
files: []
|
|
};
|
|
|
|
let loading = false;
|
|
|
|
const submitHandler = async () => {
|
|
loading = true;
|
|
|
|
if ((data?.files ?? []).some((file) => file.status === 'uploading')) {
|
|
toast.error($i18n.t('Please wait until all files are uploaded.'));
|
|
loading = false;
|
|
return;
|
|
}
|
|
|
|
await onSubmit({
|
|
name,
|
|
data
|
|
});
|
|
show = false;
|
|
loading = false;
|
|
};
|
|
|
|
const init = () => {
|
|
name = folder.name;
|
|
data = folder.data || {
|
|
system_prompt: '',
|
|
files: []
|
|
};
|
|
};
|
|
|
|
$: if (folder) {
|
|
init();
|
|
}
|
|
|
|
$: if (!show && !edit) {
|
|
name = '';
|
|
data = {
|
|
system_prompt: '',
|
|
files: []
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<Modal size="md" bind:show>
|
|
<div>
|
|
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
|
|
<div class=" text-lg font-medium self-center">
|
|
{#if edit}
|
|
{$i18n.t('Edit Folder')}
|
|
{:else}
|
|
{$i18n.t('Create Folder')}
|
|
{/if}
|
|
</div>
|
|
<button
|
|
class="self-center"
|
|
on:click={() => {
|
|
show = false;
|
|
}}
|
|
>
|
|
<XMark className={'size-5'} />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
|
|
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
|
<form
|
|
class="flex flex-col w-full"
|
|
on:submit|preventDefault={() => {
|
|
submitHandler();
|
|
}}
|
|
>
|
|
<div class="flex flex-col w-full mt-1">
|
|
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Folder Name')}</div>
|
|
|
|
<div class="flex-1">
|
|
<input
|
|
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
|
|
type="text"
|
|
bind:value={name}
|
|
placeholder={$i18n.t('Enter folder name')}
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class=" border-gray-50 dark:border-gray-850 my-2.5 w-full" />
|
|
|
|
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
|
|
<div class="my-1">
|
|
<div class="mb-2 text-xs text-gray-500">{$i18n.t('System Prompt')}</div>
|
|
<div>
|
|
<Textarea
|
|
className=" text-sm w-full bg-transparent outline-hidden "
|
|
placeholder={`Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.`}
|
|
maxSize={200}
|
|
bind:value={data.system_prompt}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="my-2">
|
|
<Knowledge bind:selectedItems={data.files}>
|
|
<div slot="label">
|
|
<div class="flex w-full justify-between">
|
|
<div class=" mb-2 text-xs text-gray-500">
|
|
{$i18n.t('Knowledge')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Knowledge>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
|
|
<button
|
|
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
|
|
? ' cursor-not-allowed'
|
|
: ''}"
|
|
type="submit"
|
|
disabled={loading}
|
|
>
|
|
{$i18n.t('Save')}
|
|
|
|
{#if loading}
|
|
<div class="ml-2 self-center">
|
|
<Spinner />
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|