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

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

@ -82,7 +82,10 @@
}); });
if (res) { if (res) {
goto('/'); if ($chatId === id) {
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,156 +398,152 @@
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} >
<div class="flex self-center space-x-1.5"> {#if chatTitleEditId === chat.id}
<button <div class="flex self-center space-x-1.5 z-10">
class=" self-center hover:text-white transition" <button
on:click={() => { class=" self-center hover:text-white transition"
editChatTitle(chat.id, chatTitle); on:click={() => {
chatTitleEditId = null; editChatTitle(chat.id, chatTitle);
chatTitle = ''; chatTitleEditId = null;
}} chatTitle = '';
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
viewBox="0 0 20 20" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
fill="currentColor" clip-rule="evenodd"
class="w-4 h-4" />
> </svg>
<path </button>
fill-rule="evenodd" <button
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" class=" self-center hover:text-white transition"
clip-rule="evenodd" on:click={() => {
/> chatTitleEditId = null;
</svg> chatTitle = '';
</button> }}
<button >
class=" self-center hover:text-white transition" <svg
on:click={() => { xmlns="http://www.w3.org/2000/svg"
chatTitleEditId = null; viewBox="0 0 20 20"
chatTitle = ''; fill="currentColor"
}} class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
viewBox="0 0 20 20" />
fill="currentColor" </svg>
class="w-4 h-4" </button>
> </div>
<path {:else if chatDeleteId === chat.id}
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" <div class="flex self-center space-x-1.5 z-10">
/> <button
</svg> class=" self-center hover:text-white transition"
</button> on:click={() => {
</div> deleteChat(chat.id);
{:else if chatDeleteId === chat.id} }}
<div class="flex self-center space-x-1.5"> >
<button <svg
class=" self-center hover:text-white transition" xmlns="http://www.w3.org/2000/svg"
on:click={() => { viewBox="0 0 20 20"
deleteChat(chat.id); fill="currentColor"
}} class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
viewBox="0 0 20 20" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
fill="currentColor" clip-rule="evenodd"
class="w-4 h-4" />
> </svg>
<path </button>
fill-rule="evenodd" <button
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" class=" self-center hover:text-white transition"
clip-rule="evenodd" on:click={() => {
/> chatDeleteId = null;
</svg> }}
</button> >
<button <svg
class=" self-center hover:text-white transition" xmlns="http://www.w3.org/2000/svg"
on:click={() => { viewBox="0 0 20 20"
chatDeleteId = null; fill="currentColor"
}} class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
viewBox="0 0 20 20" />
fill="currentColor" </svg>
class="w-4 h-4" </button>
> </div>
<path {:else}
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" <div class="flex self-center space-x-1.5 z-10">
/> <button
</svg> id="delete-chat-button"
</button> class=" hidden"
</div> on:click={() => {
{:else} deleteChat(chat.id);
<div class="flex self-center space-x-1.5"> }}
<button />
id="delete-chat-button" <button
class=" hidden" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
deleteChat(chat.id); chatTitle = chat.title;
}} chatTitleEditId = chat.id;
/> }}
<button >
class=" self-center hover:text-white transition" <svg
on:click={() => { xmlns="http://www.w3.org/2000/svg"
chatTitle = chat.title; fill="none"
chatTitleEditId = chat.id; viewBox="0 0 24 24"
}} stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" stroke-linecap="round"
fill="none" stroke-linejoin="round"
viewBox="0 0 24 24" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
stroke-width="1.5" />
stroke="currentColor" </svg>
class="w-4 h-4" </button>
> <button
<path class=" self-center hover:text-white transition"
stroke-linecap="round" on:click={() => {
stroke-linejoin="round" chatDeleteId = chat.id;
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" }}
/> >
</svg> <svg
</button> xmlns="http://www.w3.org/2000/svg"
<button fill="none"
class=" self-center hover:text-white transition" viewBox="0 0 24 24"
on:click={() => { stroke-width="1.5"
chatDeleteId = chat.id; stroke="currentColor"
}} class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" stroke-linecap="round"
fill="none" stroke-linejoin="round"
viewBox="0 0 24 24" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
stroke-width="1.5" />
stroke="currentColor" </svg>
class="w-4 h-4" </button>
> </div>
<path {/if}
stroke-linecap="round" </div>
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
</button>
</div>
{/if}
</div>
{/if}
</div> </div>
{/each} {/each}
</div> </div>