tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: sidebar ui update

Browse source
This commit is contained in:
Timothy J. Baek 2024-03-16 00:27:29 -07:00
parent 91efd6cb63
commit d6905d6297
1 changed files with 143 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/layout/Sidebar.svelte
View file

@ -82,7 +82,10 @@
}); });
if (res) { if (res) {
if ($chatId === id) {
goto('/'); goto('/');
}
await chats.set(await getChatList(localStorage.token)); await chats.set(await getChatList(localStorage.token));
} }
}; };
@ -370,22 +373,22 @@
return title.includes(query) || contentMatches; return title.includes(query) || contentMatches;
} }
}) as chat, i} }) as chat, i}
<div class=" w-full pr-2 relative"> <div class=" w-full pr-2 relative group">
{#if chatTitleEditId === chat.id} {#if chatTitleEditId === chat.id}
<div <div
class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id === class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
$chatId $chatId
? 'bg-gray-900' ? 'bg-gray-900'
: ''} transition whitespace-nowrap text-ellipsis" : ''} whitespace-nowrap text-ellipsis"
> >
<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" /> <input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
</div> </div>
{:else} {:else}
<a <a
class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id === class=" w-full flex justify-between rounded-xl px-3 py-2 group-hover:bg-gray-900 {chat.id ===
$chatId $chatId
? 'bg-gray-900' ? 'bg-gray-900'
: ''} transition whitespace-nowrap text-ellipsis" : ''} whitespace-nowrap text-ellipsis"
href="/c/{chat.id}" href="/c/{chat.id}"
on:click={() => { on:click={() => {
if (window.innerWidth < 1024) { if (window.innerWidth < 1024) {
@ -395,21 +398,18 @@
draggable="false" draggable="false"
> >
<div class=" flex self-center flex-1 w-full"> <div class=" flex self-center flex-1 w-full">
<div <div class=" text-left self-center overflow-hidden w-full h-[20px]">
class=" text-left self-center overflow-hidden {chat.id === $chatId
? 'w-[160px]'
: 'w-full'} h-[20px]"
>
{chat.title} {chat.title}
</div> </div>
</div> </div>
</a> </a>
{/if} {/if}
{#if chat.id === $chatId} <div
<div class=" absolute right-[22px] top-[10px]"> class=" invisible group-hover:visible absolute right-[14px] top-[10px] px-2 bg-gradient-to-l from-80% from-gray-900 to-transparent"
>
{#if chatTitleEditId === chat.id} {#if chatTitleEditId === chat.id}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5 z-10">
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
@ -451,7 +451,7 @@
</button> </button>
</div> </div>
{:else if chatDeleteId === chat.id} {:else if chatDeleteId === chat.id}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5 z-10">
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
@ -490,7 +490,7 @@
</button> </button>
</div> </div>
{:else} {:else}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5 z-10">
<button <button
id="delete-chat-button" id="delete-chat-button"
class=" hidden" class=" hidden"
@ -544,7 +544,6 @@
</div> </div>
{/if} {/if}
</div> </div>
{/if}
</div> </div>
{/each} {/each}
</div> </div>