UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-07 22:25:05 +00:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refac: folder

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-15 00:35:14 -07:00
parent 73a251fc49
commit b01f9e8ec3
5 changed files with 101 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/common/Collapsible.svelte
View File

@ -1,4 +1,9 @@
<script lang="ts">
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
$: dispatch('change', open);
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';

56
src/lib/components/common/Folder.svelte Normal file
View File

@ -0,0 +1,56 @@
<script>
import { getContext, createEventDispatcher } from 'svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
import ChevronDown from '../icons/ChevronDown.svelte';
import ChevronRight from '../icons/ChevronRight.svelte';
import Collapsible from './Collapsible.svelte';
export let open = true;
export let name = '';
</script>
<div>
<Collapsible
bind:open
className="w-full"
buttonClassName="w-full"
on:change={(e) => {
dispatch('change', e.detail);
}}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="mx-2 w-full"
on:dragenter={(e) => {
e.stopPropagation();
}}
on:drop={(e) => {
console.log('Dropped on the Button');
}}
on:dragleave={(e) => {}}
>
<button
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="text-gray-300">
{#if open}
<ChevronDown className=" size-3" strokeWidth="2.5" />
{:else}
<ChevronRight className=" size-3" strokeWidth="2.5" />
{/if}
</div>
<div class="translate-y-[0.5px]">
{name}
</div>
</button>
</div>
<div slot="content">
<slot></slot>
</div>
</Collapsible>
</div>

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

@ -53,6 +53,7 @@
import ChevronUp from '../icons/ChevronUp.svelte';
import ChevronRight from '../icons/ChevronRight.svelte';
import Collapsible from '../common/Collapsible.svelte';
import Folder from '../common/Folder.svelte';
const BREAKPOINT = 768;
@ -517,61 +518,42 @@
{#if !search && $pinnedChats.length > 0}
<div class=" pb-2 flex flex-col space-y-1">
<div class="">
<Collapsible className="w-full" buttonClassName="w-full">
<div class="px-2 w-full">
<button
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"
on:click={() => {
showPinnedChat = !showPinnedChat;
localStorage.setItem('showPinnedChat', showPinnedChat);
<Folder
bind:open={showPinnedChat}
on:change={(e) => {
localStorage.setItem('showPinnedChat', e.detail);
console.log(e.detail);
}}
name={$i18n.t('Pinned')}
>
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
>
<div class="text-gray-300">
{#if showPinnedChat}
<ChevronDown className=" size-3" strokeWidth="2.5" />
{:else}
<ChevronRight className=" text-gra size-3" strokeWidth="2.5" />
{/if}
</div>
<div class=" translate-y-[0.5px]">
{$i18n.t('Pinned')}
</div>
</button>
</div>
<div slot="content">
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</div>
</Collapsible>
</div>
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</Folder>
</div>
{/if}

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

@ -98,10 +98,10 @@
let y = 0;
const dragImage = new Image();
dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
dragImage.src =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
const onDragStart = (event) => {
console.log('Dragging started:', event.target);
event.dataTransfer.setDragImage(dragImage, 0, 0);
drag = true;
@ -114,7 +114,6 @@
};
const onDragEnd = (event) => {
console.log('Dragging ended:', event.target);
drag = false;
itemElement.style.opacity = '1'; // Reset visual cue after drag
};
@ -143,9 +142,9 @@
{#if drag && x && y}
<DragGhost {x} {y}>
<div class=" bg-black/50 backdrop-blur-2xl px-2 py-1 rounded-lg">
<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg">
<div>
<div class=" text-xs text-gray-500">
<div class=" text-xs text-white">
{chat.title}
</div>
</div>

4
src/lib/components/layout/Sidebar/SearchInput.svelte
View File

@ -51,10 +51,6 @@
const chatSearch = document.getElementById('chat-search');
if (!searchContainer.contains(e.target) && !chatSearch.contains(e.target)) {
console.log(
e.target.id,
e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')
);
if (e.target.id.startsWith('search-tag-') || e.target.id.startsWith('search-option-')) {
return;
}