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

Merge pull request #143 from ollama-webui/dev

Browse source 
fix: delete current chat issue
This commit is contained in:
Timothy Jaeryang Baek 2023-11-25 00:50:15 -05:00 committed by GitHub
commit 0b6365374b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,9 @@
let title: string = 'Ollama Web UI'; let title: string = 'Ollama Web UI';
let search = ''; let search = '';
let chatTitleEditIdx = null; let chatDeleteId = null;
let chatTitleEditId = null;
let chatTitle = ''; let chatTitle = '';
let showDropdown = false; let showDropdown = false;
@ -118,25 +120,25 @@
</div> </div>
<div class="px-2.5 flex justify-center my-1"> <div class="px-2.5 flex justify-center my-1">
<!-- <button <button
class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition" class="flex-grow flex space-x-3 rounded-md px-3 py-2 hover:bg-gray-900 transition"
on:click={async () => {}} on:click={async () => {
goto('/presets');
}}
> >
<div class="self-center"> <div class="self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="none"
fill="currentColor" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4" class="w-4 h-4"
> >
<path <path
d="M3.196 12.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 12.87z" stroke-linecap="round"
/> stroke-linejoin="round"
<path d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
d="M3.196 8.87l-.825.483a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.758 0l7.25-4.25a.75.75 0 000-1.294l-.825-.484-5.666 3.322a2.25 2.25 0 01-2.276 0L3.196 8.87z"
/>
<path
d="M10.38 1.103a.75.75 0 00-.76 0l-7.25 4.25a.75.75 0 000 1.294l7.25 4.25a.75.75 0 00.76 0l7.25-4.25a.75.75 0 000-1.294l-7.25-4.25z"
/> />
</svg> </svg>
</div> </div>
@ -144,7 +146,7 @@
<div class="flex self-center"> <div class="flex self-center">
<div class=" self-center font-medium text-sm">Presets</div> <div class=" self-center font-medium text-sm">Presets</div>
</div> </div>
</button> --> </button>
</div> </div>
<div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2"> <div class="px-2.5 mt-1 mb-2 flex justify-center space-x-2">
@ -169,34 +171,24 @@
placeholder="Search" placeholder="Search"
bind:value={search} bind:value={search}
/> />
</div>
<!-- <button <!-- <div class="self-center pr-3 py-2 bg-gray-900">
class=" cursor-pointer w-12 rounded-md flex"
on:click={() => {
show = !show;
}}
>
<div class=" m-auto self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="none"
fill="currentColor" viewBox="0 0 24 24"
class="w-5 h-5" stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
> >
<path <path
fill-rule="evenodd" stroke-linecap="round"
d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z" stroke-linejoin="round"
clip-rule="evenodd" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
/>
<path
fill-rule="evenodd"
d="M19 10a.75.75 0 00-.75-.75H8.704l1.048-.943a.75.75 0 10-1.004-1.114l-2.5 2.25a.75.75 0 000 1.114l2.5 2.25a.75.75 0 101.004-1.114l-1.048-.943h9.546A.75.75 0 0019 10z"
clip-rule="evenodd"
/> />
</svg> </svg>
</div> </div> -->
</button> --> </div>
</div> </div>
<div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto"> <div class="pl-2.5 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
@ -221,8 +213,8 @@
: ''} transition whitespace-nowrap text-ellipsis" : ''} transition whitespace-nowrap text-ellipsis"
on:click={() => { on:click={() => {
// goto(`/c/${chat.id}`); // goto(`/c/${chat.id}`);
if (chat.id !== chatTitleEditIdx) { if (chat.id !== chatTitleEditId) {
chatTitleEditIdx = null; chatTitleEditId = null;
chatTitle = ''; chatTitle = '';
} }
@ -253,7 +245,7 @@
? 'w-[120px]' ? 'w-[120px]'
: 'w-[180px]'} " : 'w-[180px]'} "
> >
{#if chatTitleEditIdx === chat.id} {#if chatTitleEditId === chat.id}
<input bind:value={chatTitle} class=" bg-transparent w-full" /> <input bind:value={chatTitle} class=" bg-transparent w-full" />
{:else} {:else}
{chat.title} {chat.title}
@ -264,13 +256,13 @@
{#if chat.id === $chatId} {#if chat.id === $chatId}
<div class=" absolute right-[22px] top-[10px]"> <div class=" absolute right-[22px] top-[10px]">
{#if chatTitleEditIdx === chat.id} {#if chatTitleEditId === chat.id}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5">
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
editChatTitle(chat.id, chatTitle); editChatTitle(chat.id, chatTitle);
chatTitleEditIdx = null; chatTitleEditId = null;
chatTitle = ''; chatTitle = '';
}} }}
> >
@ -290,7 +282,7 @@
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
chatTitleEditIdx = null; chatTitleEditId = null;
chatTitle = ''; chatTitle = '';
}} }}
> >
@ -306,13 +298,52 @@
</svg> </svg>
</button> </button>
</div> </div>
{:else if chatDeleteId === chat.id}
<div class="flex self-center space-x-1.5">
<button
class=" self-center hover:text-white transition"
on:click={() => {
deleteChat(chat.id);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
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"
clip-rule="evenodd"
/>
</svg>
</button>
<button
class=" self-center hover:text-white transition"
on:click={() => {
chatDeleteId = null;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
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"
/>
</svg>
</button>
</div>
{:else} {:else}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5">
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
chatTitle = chat.title; chatTitle = chat.title;
chatTitleEditIdx = chat.id; chatTitleEditId = chat.id;
// editChatTitle(chat.id, 'a'); // editChatTitle(chat.id, 'a');
}} }}
> >
@ -334,7 +365,7 @@
<button <button
class=" self-center hover:text-white transition" class=" self-center hover:text-white transition"
on:click={() => { on:click={() => {
deleteChat(chat.id); chatDeleteId = chat.id;
}} }}
> >
<svg <svg

9
src/routes/(app)/+layout.svelte
View file

@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
import { v4 as uuidv4 } from 'uuid';
import { openDB, deleteDB } from 'idb'; import { openDB, deleteDB } from 'idb';
import { onMount, tick } from 'svelte'; import { onMount, tick } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { config, user, showSettings, settings, models, db, chats } from '$lib/stores'; import { config, user, showSettings, settings, models, db, chats, chatId } from '$lib/stores';
import SettingsModal from '$lib/components/chat/SettingsModal.svelte'; import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
import Sidebar from '$lib/components/layout/Sidebar.svelte'; import Sidebar from '$lib/components/layout/Sidebar.svelte';
import toast from 'svelte-french-toast'; import toast from 'svelte-french-toast';
import { OLLAMA_API_BASE_URL } from '$lib/constants'; import { OLLAMA_API_BASE_URL, WEBUI_API_BASE_URL } from '$lib/constants';
let loaded = false; let loaded = false;
@ -133,6 +134,10 @@
await chats.set(await this.getChats()); await chats.set(await this.getChats());
}, },
deleteChatById: async function (id) { deleteChatById: async function (id) {
if ($chatId === id) {
goto('/');
await chatId.set(uuidv4());
}
await this.db.delete('chats', id); await this.db.delete('chats', id);
await chats.set(await this.getChats()); await chats.set(await this.getChats());
}, },