mirror of
https://github.com/open-webui/open-webui
synced 2025-06-22 18:07:17 +00:00
Create EditFolderModal.svelte
This commit is contained in:
Classic298
GitHub
parent
a9c4554017
commit
99949c6d0b
139
src/lib/components/layout/Sidebar/Folders/EditFolderModal.svelte
Normal file
139
src/lib/components/layout/Sidebar/Folders/EditFolderModal.svelte
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher, getContext } from 'svelte';
|
||||||
|
import Modal from '$lib/components/common/Modal.svelte';
|
||||||
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||||
|
import { user } from '$lib/stores';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const i18n = getContext('i18n');
|
||||||
|
export let show = false;
|
||||||
|
export let folder = { id: '', name: '', system_prompt: '' };
|
||||||
|
let currentName = '';
|
||||||
|
let currentSystemPrompt = '';
|
||||||
|
let loading = false;
|
||||||
|
let initialized = false;
|
||||||
|
// Initialize values once when modal opens
|
||||||
|
$: if (show && folder && !initialized) {
|
||||||
|
currentName = folder.name || '';
|
||||||
|
currentSystemPrompt = folder.system_prompt || '';
|
||||||
|
initialized = true;
|
||||||
|
}
|
||||||
|
// Reset when modal closes
|
||||||
|
$: if (!show) {
|
||||||
|
initialized = false;
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
// Auto-focus name input when modal opens
|
||||||
|
$: if (show && initialized) {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById('folderName')?.focus();
|
||||||
|
}, 150);
|
||||||
|
}
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (!currentName.trim()) return;
|
||||||
|
loading = true;
|
||||||
|
dispatch('saveFolder', {
|
||||||
|
id: folder.id,
|
||||||
|
name: currentName.trim(),
|
||||||
|
system_prompt: currentSystemPrompt.trim() || null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleClose = () => {
|
||||||
|
loading = false;
|
||||||
|
initialized = false;
|
||||||
|
dispatch('close');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal bind:show on:close={handleClose} size="md">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-1.5">
|
||||||
|
<div class="text-lg font-medium self-center font-primary">
|
||||||
|
{$i18n.t('Edit Folder')}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="self-center p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
|
||||||
|
on:click={handleClose}
|
||||||
|
aria-label={$i18n.t('Close')}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-5 h-5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
class="flex flex-col w-full px-6 pb-6 md:space-y-5 dark:text-gray-200"
|
||||||
|
on:submit|preventDefault={handleSubmit}
|
||||||
|
>
|
||||||
|
<div class="px-1 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="folderName" class="block mb-1 text-xs text-gray-500">
|
||||||
|
{$i18n.t('Folder Name')}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="folderName"
|
||||||
|
class="w-full text-sm bg-transparent placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:ring-1 focus:ring-blue-500"
|
||||||
|
type="text"
|
||||||
|
bind:value={currentName}
|
||||||
|
placeholder={$i18n.t('Enter folder name')}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
|
||||||
|
<div>
|
||||||
|
<label for="systemPrompt" class="block mb-1 text-xs text-gray-500">
|
||||||
|
{$i18n.t('System Prompt (Optional)')}
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
id="systemPrompt"
|
||||||
|
bind:value={currentSystemPrompt}
|
||||||
|
placeholder={$i18n.t('Enter a system prompt for all chats in this folder...')}
|
||||||
|
className="w-full text-sm bg-transparent placeholder:text-gray-400 dark:placeholder:text-gray-600 outline-none border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:ring-1 focus:ring-blue-500 min-h-[120px] resize-y"
|
||||||
|
rows={5}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end items-center pt-4 text-sm font-medium gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="px-3.5 py-1.5 text-sm font-medium dark:bg-gray-700 dark:hover:bg-gray-600 bg-gray-100 hover:bg-gray-200 text-black dark:text-white transition rounded-full"
|
||||||
|
on:click={handleClose}
|
||||||
|
>
|
||||||
|
{$i18n.t('Cancel')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-800 text-white dark:bg-white dark:text-black dark:hover:bg-gray-200 transition rounded-full flex items-center"
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{#if loading}
|
||||||
|
<div class="mr-2 self-center">
|
||||||
|
<svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
||||||
|
<circle
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
fill="none"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-dasharray="32"
|
||||||
|
stroke-dashoffset="32"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{$i18n.t('Save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
Loading…
Reference in New Issue
Block a user