From d03a00758f00f9da340514a508839ec12fb3ee90 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Fri, 14 Jun 2024 11:06:19 -0700 Subject: [PATCH] refac: sidebar --- src/lib/components/layout/Sidebar.svelte | 299 +----------------- .../components/layout/Sidebar/ChatItem.svelte | 298 +++++++++++++++++ 2 files changed, 306 insertions(+), 291 deletions(-) create mode 100644 src/lib/components/layout/Sidebar/ChatItem.svelte diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 9bd4f0e16..8d13c7efb 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -28,34 +28,18 @@ import { toast } from 'svelte-sonner'; import { fade, slide } from 'svelte/transition'; import { WEBUI_BASE_URL } from '$lib/constants'; - import Tooltip from '../common/Tooltip.svelte'; - import ChatMenu from './Sidebar/ChatMenu.svelte'; - import ShareChatModal from '../chat/ShareChatModal.svelte'; - import ArchiveBox from '../icons/ArchiveBox.svelte'; import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte'; import UserMenu from './Sidebar/UserMenu.svelte'; import { updateUserSettings } from '$lib/apis/users'; + import ChatItem from './Sidebar/ChatItem.svelte'; const BREAKPOINT = 768; - let show = false; let navElement; - - let title: string = 'UI'; let search = ''; - let shareChatId = null; - let selectedChatId = null; - - let chatDeleteId = null; - let chatTitleEditId = null; - let chatTitle = ''; - - let showShareChatModal = false; let showDropdown = false; - let isEditing = false; - let filteredChatList = []; $: filteredChatList = $chats.filter((chat) => { @@ -78,13 +62,6 @@ } }); - mobile; - const onResize = () => { - if ($showSidebar && window.innerWidth < BREAKPOINT) { - showSidebar.set(false); - } - }; - onMount(async () => { mobile.subscribe((e) => { if ($showSidebar && e) { @@ -149,69 +126,13 @@ await chats.set(enrichedChats); }; - const loadChat = async (id) => { - goto(`/c/${id}`); - }; - - const editChatTitle = async (id, _title) => { - if (_title === '') { - toast.error($i18n.t('Title cannot be an empty string.')); - } else { - title = _title; - - await updateChatById(localStorage.token, id, { - title: _title - }); - await chats.set(await getChatList(localStorage.token)); - } - }; - - const deleteChat = async (id) => { - const res = await deleteChatById(localStorage.token, id).catch((error) => { - toast.error(error); - chatDeleteId = null; - - return null; - }); - - if (res) { - if ($chatId === id) { - goto('/'); - } - - await chats.set(await getChatList(localStorage.token)); - } - }; - - const cloneChatHandler = async (id) => { - const res = await cloneChatById(localStorage.token, id).catch((error) => { - toast.error(error); - return null; - }); - - if (res) { - goto(`/c/${res.id}`); - await chats.set(await getChatList(localStorage.token)); - } - }; - const saveSettings = async (updated) => { await settings.set({ ...$settings, ...updated }); await updateUserSettings(localStorage.token, { ui: $settings }); location.href = '/'; }; - - const archiveChatHandler = async (id) => { - await archiveChatById(localStorage.token, id); - await chats.set(await getChatList(localStorage.token)); - }; - - const focusEdit = async (node: HTMLInputElement) => { - node.focus(); - }; - { @@ -252,12 +173,10 @@ draggable="false" on:click={async () => { selectedChatId = null; - await goto('/'); const newChatButton = document.getElementById('new-chat-button'); setTimeout(() => { newChatButton?.click(); - if ($mobile) { showSidebar.set(false); } @@ -486,215 +405,13 @@ {/if} -
- {#if chatTitleEditId === chat.id} -
- -
- {:else} - { - selectedChatId = chat.id; - if ($mobile) { - showSidebar.set(false); - } - }} - on:dblclick={() => { - chatTitle = chat.title; - chatTitleEditId = chat.id; - }} - draggable="false" - > -
-
- {chat.title} -
-
- - {/if} - -
- {#if chatTitleEditId === chat.id} -
- - -
- {:else if chatDeleteId === chat.id} -
- - -
- {:else} -
- { - cloneChatHandler(chat.id); - }} - shareHandler={() => { - shareChatId = selectedChatId; - showShareChatModal = true; - }} - archiveChatHandler={() => { - archiveChatHandler(chat.id); - }} - renameHandler={() => { - chatTitle = chat.title; - chatTitleEditId = chat.id; - }} - deleteHandler={() => { - chatDeleteId = chat.id; - }} - onClose={() => { - selectedChatId = null; - }} - > - - - - {#if chat.id === $chatId} - - {/if} -
- {/if} -
-
+ { + selectedChatId = chat.id; + }} + /> {/each} diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte new file mode 100644 index 000000000..d79c1ab06 --- /dev/null +++ b/src/lib/components/layout/Sidebar/ChatItem.svelte @@ -0,0 +1,298 @@ + + + + +
+ {#if confirmEdit} +
+ +
+ {:else} + { + dispatch('select'); + + if ($mobile) { + showSidebar.set(false); + } + }} + on:dblclick={() => { + chatTitle = chat.title; + confirmEdit = true; + }} + on:mouseover={(e) => { + if (e.shiftKey) { + // Your code here + console.log('hi'); + } + }} + on:focus={(e) => {}} + draggable="false" + > +
+
+ {chat.title} +
+
+ + {/if} + +
+ {#if confirmEdit} +
+ + +
+ {:else if confirmDelete} +
+ + +
+ {:else} +
+ { + cloneChatHandler(chat.id); + }} + shareHandler={() => { + showShareChatModal = true; + }} + archiveChatHandler={() => { + archiveChatHandler(chat.id); + }} + renameHandler={() => { + confirmEdit = true; + }} + deleteHandler={() => { + confirmDelete = true; + }} + onClose={() => { + selected = false; + }} + > + + + + {#if chat.id === $chatId} + + + {/if} +
+ {/if} +
+