OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-22 18:07:17 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Update RecursiveFolder.svelte

Browse Source
This commit is contained in:
Classic298 2025-06-21 13:58:25 +02:00 committed by GitHub
parent 21193b62e6
commit 3595d17918
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 48 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte'; import { getContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -12,13 +11,18 @@
import ChevronRight from '../../icons/ChevronRight.svelte'; import ChevronRight from '../../icons/ChevronRight.svelte';
import Collapsible from '../../common/Collapsible.svelte'; import Collapsible from '../../common/Collapsible.svelte';
import DragGhost from '$lib/components/common/DragGhost.svelte'; import DragGhost from '$lib/components/common/DragGhost.svelte';
import Plus from '../../icons/Plus.svelte';
import FolderOpen from '$lib/components/icons/FolderOpen.svelte'; import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import { goto } from '$app/navigation';
import { get } from 'svelte/store';
import { pendingFolderId, pendingFolderName, mobile, showSidebar } from '$lib/stores';
import { import {
deleteFolderById, deleteFolderById,
updateFolderIsExpandedById, updateFolderIsExpandedById,
updateFolderNameById,
updateFolderParentIdById updateFolderParentIdById
} from '$lib/apis/folders'; } from '$lib/apis/folders';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
@ -28,6 +32,7 @@
importChat, importChat,
updateChatFolderIdById updateChatFolderIdById
} from '$lib/apis/chats'; } from '$lib/apis/chats';
import ChatItem from './ChatItem.svelte'; import ChatItem from './ChatItem.svelte';
import FolderMenu from './Folders/FolderMenu.svelte'; import FolderMenu from './Folders/FolderMenu.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@ -43,13 +48,9 @@
let folderElement; let folderElement;
let edit = false;
let draggedOver = false; let draggedOver = false;
let dragged = false; let dragged = false;
let name = '';
const onDragOver = (e) => { const onDragOver = (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -172,6 +173,7 @@
const onDragStart = (event) => { const onDragStart = (event) => {
event.stopPropagation(); event.stopPropagation();
event.dataTransfer.setDragImage(dragImage, 0, 0); event.dataTransfer.setDragImage(dragImage, 0, 0);
// Set the data to be transferred // Set the data to be transferred
@ -196,7 +198,6 @@
const onDragEnd = (event) => { const onDragEnd = (event) => {
event.stopPropagation(); event.stopPropagation();
folderElement.style.opacity = '1'; // Reset visual cue after drag folderElement.style.opacity = '1'; // Reset visual cue after drag
dragged = false; dragged = false;
}; };
@ -216,17 +217,11 @@
folderElement.addEventListener('dragend', onDragEnd); folderElement.addEventListener('dragend', onDragEnd);
} }
if (folders[folderId]?.new) {
delete folders[folderId].new;
await tick();
editHandler();
}
}); });
onDestroy(() => { onDestroy(() => {
if (folderElement) { if (folderElement) {
folderElement.addEventListener('dragover', onDragOver); folderElement.removeEventListener('dragover', onDragOver);
folderElement.removeEventListener('drop', onDrop); folderElement.removeEventListener('drop', onDrop);
folderElement.removeEventListener('dragleave', onDragLeave); folderElement.removeEventListener('dragleave', onDragLeave);
@ -250,36 +245,6 @@
} }
}; };
const nameUpdateHandler = async () => {
if (name === '') {
toast.error($i18n.t('Folder name cannot be empty.'));
return;
}
if (name === folders[folderId].name) {
edit = false;
return;
}
const currentName = folders[folderId].name;
name = name.trim();
folders[folderId].name = name;
const res = await updateFolderNameById(localStorage.token, folderId, name).catch((error) => {
toast.error(`${error}`);
folders[folderId].name = currentName;
return null;
});
if (res) {
folders[folderId].name = name;
toast.success($i18n.t('Folder name updated successfully'));
dispatch('update');
}
};
const isExpandedUpdateHandler = async () => { const isExpandedUpdateHandler = async () => {
const res = await updateFolderIsExpandedById(localStorage.token, folderId, open).catch( const res = await updateFolderIsExpandedById(localStorage.token, folderId, open).catch(
(error) => { (error) => {
@ -300,21 +265,6 @@
$: isExpandedUpdateDebounceHandler(open); $: isExpandedUpdateDebounceHandler(open);
const editHandler = async () => {
console.log('Edit');
await tick();
name = folders[folderId].name;
edit = true;
await tick();
const input = document.getElementById(`folder-${folderId}-input`);
if (input) {
input.focus();
}
};
const exportHandler = async () => { const exportHandler = async () => {
const chats = await getChatsByFolderId(localStorage.token, folderId).catch((error) => { const chats = await getChatsByFolderId(localStorage.token, folderId).catch((error) => {
toast.error(`${error}`); toast.error(`${error}`);
@ -383,9 +333,6 @@
<button <button
id="folder-{folderId}-button" id="folder-{folderId}-button"
class="relative w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition" class="relative w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:dblclick={() => {
editHandler();
}}
> >
<div class="text-gray-300 dark:text-gray-600"> <div class="text-gray-300 dark:text-gray-600">
{#if open} {#if open}
@ -396,64 +343,41 @@
</div> </div>
<div class="translate-y-[0.5px] flex-1 justify-start text-start line-clamp-1"> <div class="translate-y-[0.5px] flex-1 justify-start text-start line-clamp-1">
{#if edit} {folders[folderId].name}
<input
id="folder-{folderId}-input"
type="text"
bind:value={name}
on:focus={(e) => {
e.target.select();
}}
on:blur={() => {
nameUpdateHandler();
edit = false;
}}
on:click={(e) => {
// Prevent accidental collapse toggling when clicking inside input
e.stopPropagation();
}}
on:mousedown={(e) => {
// Prevent accidental collapse toggling when clicking inside input
e.stopPropagation();
}}
on:keydown={(e) => {
if (e.key === 'Enter') {
nameUpdateHandler();
edit = false;
}
}}
class="w-full h-full bg-transparent text-gray-500 dark:text-gray-500 outline-hidden"
/>
{:else}
{folders[folderId].name}
{/if}
</div> </div>
<button <div class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center gap-1 dark:text-gray-300">
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300" <!-- Plus Button -->
on:pointerup={(e) => { <button
class="p-0.5 dark:hover:bg-gray-850 hover:bg-gray-200 rounded-lg touch-auto" on:click={(e) => {
e.stopPropagation(); e.stopPropagation();
dispatch('createChatInFolder', { folderId });
}} }}
> on:pointerup={(e) => {
<FolderMenu e.stopPropagation();
on:rename={() => { }}
// Requires a timeout to prevent the click event from closing the dropdown title={$i18n.t('Create new chat in folder')}
setTimeout(() => { >
editHandler(); <Plus className="size-3.5" strokeWidth="2.5" />
}, 200); </button>
}}
on:delete={() => { <!-- Three-dot Menu -->
showDeleteConfirm = true; <FolderMenu
}} on:editFolder={() => {
on:export={() => { dispatch('editFolder', folders[folderId]);
exportHandler(); }}
}} on:delete={() => {
> showDeleteConfirm = true;
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}> }}
<EllipsisHorizontal className="size-4" strokeWidth="2.5" /> on:export={() => {
</button> exportHandler();
</FolderMenu> }}
</button> >
<button class="p-0.5 dark:hover:bg-gray-850 hover:bg-gray-200 rounded-lg touch-auto" on:click={(e) => {}}>
<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
</button>
</FolderMenu>
</div>
</button> </button>
</div> </div>
@ -486,6 +410,12 @@
on:change={(e) => { on:change={(e) => {
dispatch('change', e.detail); dispatch('change', e.detail);
}} }}
on:editFolder={(e) => {
dispatch('editFolder', e.detail);
}}
on:createChatInFolder={(e) => {
dispatch('createChatInFolder', e.detail);
}}
/> />
{/each} {/each}
{/if} {/if}