UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-03 20:41:29 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

enh: drag and drop chat to pin

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-15 02:12:39 -07:00
parent b01f9e8ec3
commit 2f4c04055c
4 changed files with 195 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/common/DragGhost.svelte
View File

@ -22,8 +22,9 @@
<div <div
bind:this={popupElement} bind:this={popupElement}
class=" absolute text-white z-[99999]" class="fixed top-0 left-0 w-screen h-[100dvh] z-50 touch-none pointer-events-none"
style="top: {y}px; left: {x}px;"
> >
<slot></slot> <div class=" absolute text-white z-[99999]" style="top: {y}px; left: {x}px;">
<slot></slot>
</div>
</div> </div>

120
src/lib/components/common/Folder.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { getContext, createEventDispatcher } from 'svelte'; import { getContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -9,48 +9,94 @@
import Collapsible from './Collapsible.svelte'; import Collapsible from './Collapsible.svelte';
export let open = true; export let open = true;
export let id = '';
export let name = ''; export let name = '';
export let collapsible = true;
let folderElement;
let dragged = false;
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
};
const onDrop = (e) => {
e.preventDefault();
if (folderElement.contains(e.target)) {
console.log('Dropped on the Button');
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
dragged = false;
}
};
const onDragLeave = (e) => {
e.preventDefault();
dragged = false;
};
onMount(() => {
folderElement.addEventListener('dragover', onDragOver);
folderElement.addEventListener('drop', onDrop);
folderElement.addEventListener('dragleave', onDragLeave);
});
onDestroy(() => {
folderElement.addEventListener('dragover', onDragOver);
folderElement.removeEventListener('drop', onDrop);
folderElement.removeEventListener('dragleave', onDragLeave);
});
</script> </script>
<div> <div bind:this={folderElement} class="relative">
<Collapsible {#if dragged}
bind:open
className="w-full"
buttonClassName="w-full"
on:change={(e) => {
dispatch('change', e.detail);
}}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="mx-2 w-full" class="absolute top-0 left-0 w-full h-full rounded-sm bg-gray-200 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
on:dragenter={(e) => { ></div>
e.stopPropagation(); {/if}
{#if collapsible}
<Collapsible
bind:open
className="w-full "
buttonClassName="w-full"
on:change={(e) => {
dispatch('change', e.detail);
}} }}
on:drop={(e) => {
console.log('Dropped on the Button');
}}
on:dragleave={(e) => {}}
> >
<button <!-- svelte-ignore a11y-no-static-element-interactions -->
class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition" <div class="mx-2 w-full">
> <button
<div class="text-gray-300"> class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
{#if open} >
<ChevronDown className=" size-3" strokeWidth="2.5" /> <div class="text-gray-300">
{:else} {#if open}
<ChevronRight className=" size-3" strokeWidth="2.5" /> <ChevronDown className=" size-3" strokeWidth="2.5" />
{/if} {:else}
</div> <ChevronRight className=" size-3" strokeWidth="2.5" />
{/if}
</div>
<div class="translate-y-[0.5px]"> <div class="translate-y-[0.5px]">
{name} {name}
</div> </div>
</button> </button>
</div> </div>
<div slot="content"> <div slot="content">
<slot></slot> <slot></slot>
</div> </div>
</Collapsible> </Collapsible>
{:else}
<slot></slot>
{/if}
</div> </div>

153
src/lib/components/layout/Sidebar.svelte
View File

@ -35,7 +35,9 @@
cloneChatById, cloneChatById,
getChatListBySearchText, getChatListBySearchText,
createNewChat, createNewChat,
getPinnedChatList getPinnedChatList,
toggleChatPinnedStatusById,
getChatPinnedStatusById
} from '$lib/apis/chats'; } from '$lib/apis/chats';
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
@ -363,8 +365,8 @@
bind:this={navElement} bind:this={navElement}
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px]' ? 'md:relative w-[260px] max-w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 : '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 overflow-x-hidden
" "
data-state={$showSidebar} data-state={$showSidebar}
> >
@ -381,7 +383,7 @@
</div> </div>
{/if} {/if}
<div <div
class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar
? '' ? ''
: 'invisible'}" : 'invisible'}"
> >
@ -517,13 +519,27 @@
{/if} {/if}
{#if !search && $pinnedChats.length > 0} {#if !search && $pinnedChats.length > 0}
<div class=" pb-2 flex flex-col space-y-1"> <div class=" flex flex-col space-y-1">
<Folder <Folder
bind:open={showPinnedChat} bind:open={showPinnedChat}
on:change={(e) => { on:change={(e) => {
localStorage.setItem('showPinnedChat', e.detail); localStorage.setItem('showPinnedChat', e.detail);
console.log(e.detail); console.log(e.detail);
}} }}
on:drop={async (e) => {
const { id } = e.detail;
const status = await getChatPinnedStatusById(localStorage.token, id);
if (!status) {
const res = await toggleChatPinnedStatusById(localStorage.token, id);
if (res) {
await pinnedChats.set(await getPinnedChatList(localStorage.token));
initChatList();
}
}
}}
name={$i18n.t('Pinned')} name={$i18n.t('Pinned')}
> >
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden"> <div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
@ -557,17 +573,36 @@
</div> </div>
{/if} {/if}
<div class="pl-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden"> <div class="flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
{#if $chats} <Folder
{#each $chats as chat, idx} collapsible={false}
{#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)} on:drop={async (e) => {
<div const { id } = e.detail;
class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
? '' const status = await getChatPinnedStatusById(localStorage.token, id);
: 'pt-5'} pb-0.5"
> if (status) {
{$i18n.t(chat.time_range)} const res = await toggleChatPinnedStatusById(localStorage.token, id);
<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
if (res) {
await pinnedChats.set(await getPinnedChatList(localStorage.token));
initChatList();
}
}
}}
>
<div class="pt-2 pl-2">
{#if $chats}
{#each $chats as chat, idx}
{#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)}
<div
class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx ===
0
? ''
: 'pt-5'} pb-0.5"
>
{$i18n.t(chat.time_range)}
<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
{$i18n.t('Today')} {$i18n.t('Today')}
{$i18n.t('Yesterday')} {$i18n.t('Yesterday')}
{$i18n.t('Previous 7 days')} {$i18n.t('Previous 7 days')}
@ -585,54 +620,58 @@
{$i18n.t('November')} {$i18n.t('November')}
{$i18n.t('December')} {$i18n.t('December')}
--> -->
</div> </div>
{/if} {/if}
<ChatItem <ChatItem
{chat} {chat}
{shiftKey} {shiftKey}
selected={selectedChatId === chat.id} selected={selectedChatId === chat.id}
on:select={() => { on:select={() => {
selectedChatId = chat.id; selectedChatId = chat.id;
}} }}
on:unselect={() => { on:unselect={() => {
selectedChatId = null; selectedChatId = null;
}} }}
on:delete={(e) => { on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') { if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id); deleteChatHandler(chat.id);
} else { } else {
deleteChat = chat; deleteChat = chat;
showDeleteConfirm = true; showDeleteConfirm = true;
} }
}} }}
on:tag={(e) => { on:tag={(e) => {
const { type, name } = e.detail; const { type, name } = e.detail;
tagEventHandler(type, name, chat.id); tagEventHandler(type, name, chat.id);
}} }}
/> />
{/each} {/each}
{#if $scrollPaginationEnabled && !allChatsLoaded} {#if $scrollPaginationEnabled && !allChatsLoaded}
<Loader <Loader
on:visible={(e) => { on:visible={(e) => {
if (!chatListLoading) { if (!chatListLoading) {
loadMoreChats(); loadMoreChats();
} }
}} }}
> >
<div
class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
>
<Spinner className=" size-4" />
<div class=" ">Loading...</div>
</div>
</Loader>
{/if}
{:else}
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"> <div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
<Spinner className=" size-4" /> <Spinner className=" size-4" />
<div class=" ">Loading...</div> <div class=" ">Loading...</div>
</div> </div>
</Loader> {/if}
{/if}
{:else}
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
<Spinner className=" size-4" />
<div class=" ">Loading...</div>
</div> </div>
{/if} </Folder>
</div> </div>
</div> </div>

16
src/lib/components/layout/Sidebar/ChatItem.svelte
View File

@ -104,6 +104,14 @@
const onDragStart = (event) => { const onDragStart = (event) => {
event.dataTransfer.setDragImage(dragImage, 0, 0); event.dataTransfer.setDragImage(dragImage, 0, 0);
// Set the data to be transferred
event.dataTransfer.setData(
'text/plain',
JSON.stringify({
id: chat.id
})
);
drag = true; drag = true;
itemElement.style.opacity = '0.5'; // Optional: Visual cue to show it's being dragged itemElement.style.opacity = '0.5'; // Optional: Visual cue to show it's being dragged
}; };
@ -114,8 +122,8 @@
}; };
const onDragEnd = (event) => { const onDragEnd = (event) => {
drag = false;
itemElement.style.opacity = '1'; // Reset visual cue after drag itemElement.style.opacity = '1'; // Reset visual cue after drag
drag = false;
}; };
onMount(() => { onMount(() => {
@ -142,9 +150,9 @@
{#if drag && x && y} {#if drag && x && y}
<DragGhost {x} {y}> <DragGhost {x} {y}>
<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg"> <div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-44">
<div> <div>
<div class=" text-xs text-white"> <div class=" text-xs text-white line-clamp-1">
{chat.title} {chat.title}
</div> </div>
</div> </div>
@ -169,7 +177,7 @@
</div> </div>
{:else} {:else}
<a <a
class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId || confirmEdit class=" w-full flex justify-between rounded-lg px-3 py-2 {chat.id === $chatId || confirmEdit
? 'bg-gray-200 dark:bg-gray-900' ? 'bg-gray-200 dark:bg-gray-900'
: selected : selected
? 'bg-gray-100 dark:bg-gray-950' ? 'bg-gray-100 dark:bg-gray-950'