refac
This commit is contained in:
Timothy Jaeryang Baek committed
1 parent
251ef952bf
commit
b9d5462ed0
7 files changed
+321
-137
No files matched your search
@@ -63,6 +63,7 @@
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
import Loader from '../common/Loader.svelte';
|
||||
import Folder from '../common/Folder.svelte';
|
||||
import SidebarSection from './Sidebar/Section.svelte';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import Folders from './Sidebar/Folders.svelte';
|
||||
import SharedFolderItem from './Sidebar/SharedFolderItem.svelte';
|
||||
@@ -1213,25 +1214,23 @@
|
||||
</div>
|
||||
|
||||
{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
|
||||
<Folder
|
||||
<SidebarSection
|
||||
id="sidebar-models"
|
||||
bind:open={showPinnedModels}
|
||||
className="px-2 mt-0.5"
|
||||
className="mt-0.5"
|
||||
name={$i18n.t('Models')}
|
||||
chevron={false}
|
||||
dragAndDrop={false}
|
||||
>
|
||||
<PinnedModelList bind:selectedChatId {shiftKey} />
|
||||
</Folder>
|
||||
</SidebarSection>
|
||||
{/if}
|
||||
|
||||
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0}
|
||||
<Folder
|
||||
<SidebarSection
|
||||
id="sidebar-pinned-notes"
|
||||
bind:open={showPinnedNotes}
|
||||
className="px-2 mt-0.5"
|
||||
className="mt-0.5"
|
||||
name={$i18n.t('Notes')}
|
||||
chevron={false}
|
||||
dragAndDrop={false}
|
||||
onAdd={async () => {
|
||||
const note = await createNoteHandler('New Note');
|
||||
@@ -1242,16 +1241,15 @@
|
||||
onAddLabel={$i18n.t('New Note')}
|
||||
>
|
||||
<PinnedNoteList bind:selectedChatId />
|
||||
</Folder>
|
||||
</SidebarSection>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
|
||||
<Folder
|
||||
<SidebarSection
|
||||
id="sidebar-channels"
|
||||
bind:open={showChannels}
|
||||
className="px-2 mt-0.5"
|
||||
className="mt-0.5"
|
||||
name={$i18n.t('Channels')}
|
||||
chevron={false}
|
||||
dragAndDrop={false}
|
||||
onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
|
||||
? async () => {
|
||||
@@ -1277,16 +1275,15 @@
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</Folder>
|
||||
</SidebarSection>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))}
|
||||
<Folder
|
||||
<SidebarSection
|
||||
id="sidebar-folders"
|
||||
bind:open={showFolders}
|
||||
className="px-2 mt-0.5"
|
||||
className="mt-0.5"
|
||||
name={$i18n.t('Folders')}
|
||||
chevron={false}
|
||||
onAdd={() => {
|
||||
showCreateFolderModal = true;
|
||||
}}
|
||||
@@ -1331,14 +1328,13 @@
|
||||
initChatList();
|
||||
}}
|
||||
/>
|
||||
</Folder>
|
||||
</SidebarSection>
|
||||
{/if}
|
||||
|
||||
<Folder
|
||||
<SidebarSection
|
||||
id="sidebar-chats"
|
||||
className="px-2 mt-0.5"
|
||||
className="mt-0.5"
|
||||
name={$i18n.t('Chats')}
|
||||
chevron={false}
|
||||
on:change={async (e) => {
|
||||
selectedFolder.set(null);
|
||||
}}
|
||||
@@ -1582,7 +1578,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Folder>
|
||||
</SidebarSection>
|
||||
</div>
|
||||
|
||||
<div class="px-1.5 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
|
||||
import Collapsible from '$lib/components/common/Collapsible.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
type AddHandler = () => void | Promise<void>;
|
||||
|
||||
export let open = true;
|
||||
export let id = '';
|
||||
export let name = '';
|
||||
export let collapsible = true;
|
||||
export let className = '';
|
||||
export let buttonClassName = '';
|
||||
export let contentClassName = 'px-1.5';
|
||||
export let onAddLabel = '';
|
||||
export let onAdd: null | AddHandler = null;
|
||||
export let dragAndDrop = true;
|
||||
|
||||
let sectionElement: HTMLDivElement;
|
||||
let loaded = false;
|
||||
let draggedOver = false;
|
||||
|
||||
const onDragOver = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
draggedOver = true;
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (!sectionElement.contains(e.target as Node)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
|
||||
for (const item of Array.from(e.dataTransfer.items)) {
|
||||
if (item.kind === 'file') {
|
||||
const file = item.getAsFile();
|
||||
if (file && file.type === 'application/json') {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async function (event) {
|
||||
try {
|
||||
const fileContent = JSON.parse(event.target?.result as string);
|
||||
open = true;
|
||||
dispatch('import', fileContent);
|
||||
} catch (error) {
|
||||
console.error('Error parsing JSON file:', error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
} else {
|
||||
open = true;
|
||||
try {
|
||||
const dataTransfer = e.dataTransfer.getData('text/plain');
|
||||
if (dataTransfer) {
|
||||
dispatch('drop', JSON.parse(dataTransfer));
|
||||
}
|
||||
} catch {
|
||||
// Ignore drops that are not sidebar JSON payloads.
|
||||
} finally {
|
||||
draggedOver = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
draggedOver = false;
|
||||
};
|
||||
|
||||
const onDragLeave = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
draggedOver = false;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const state = localStorage.getItem(`${id}-folder-state`);
|
||||
if (state !== null) {
|
||||
open = state === 'true';
|
||||
}
|
||||
|
||||
loaded = true;
|
||||
|
||||
if (!dragAndDrop) {
|
||||
return;
|
||||
}
|
||||
|
||||
sectionElement.addEventListener('dragover', onDragOver);
|
||||
sectionElement.addEventListener('drop', onDrop);
|
||||
sectionElement.addEventListener('dragleave', onDragLeave);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (!dragAndDrop) {
|
||||
return;
|
||||
}
|
||||
|
||||
sectionElement.removeEventListener('dragover', onDragOver);
|
||||
sectionElement.removeEventListener('drop', onDrop);
|
||||
sectionElement.removeEventListener('dragleave', onDragLeave);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={sectionElement} class="relative {className}">
|
||||
{#if loaded}
|
||||
{#if draggedOver}
|
||||
<div
|
||||
class="absolute inset-0 z-50 rounded-md bg-gray-100/50 pointer-events-none touch-none dark:bg-gray-700/20"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
{#if collapsible}
|
||||
<Collapsible
|
||||
bind:open
|
||||
className="w-full"
|
||||
buttonClassName="w-full"
|
||||
onChange={(state: boolean) => {
|
||||
dispatch('change', state);
|
||||
localStorage.setItem(`${id}-folder-state`, `${state}`);
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center justify-between h-8 w-full pl-3.5 pr-1.5 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="group flex flex-1 h-full items-center gap-1 text-left text-xs text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100 {buttonClassName}"
|
||||
aria-expanded={open}
|
||||
aria-controls="{id}-content"
|
||||
>
|
||||
<span>{name}</span>
|
||||
<span
|
||||
class="flex opacity-0 group-hover:opacity-100 transition-all duration-100"
|
||||
style="transform: rotate({open ? '90deg' : '0deg'})"
|
||||
>
|
||||
<ChevronRight className="size-[11px]" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if onAdd}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
|
||||
aria-label={onAddLabel}
|
||||
on:pointerup={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
onAdd();
|
||||
}}
|
||||
>
|
||||
<Tooltip content={onAddLabel}>
|
||||
<Plus className="size-3.5" />
|
||||
</Tooltip>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div id="{id}-content" slot="content" class="w-full {contentClassName}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</Collapsible>
|
||||
{:else}
|
||||
<slot></slot>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in new issue
Block a user