forked from open-webui/open-webui
Merge pull request #170 from ollama-webui/dev
feat: chat history delete confirmation & pwa support
This commit is contained in:
Timothy Jaeryang Baek
GitHub
commit
b8919e46cc
4 changed files with 107 additions and 24 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
<script>
|
<script>
|
||||||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
||||||
|
|
|
||||||
|
|
@ -84,8 +84,8 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="fixed bottom-0 w-full">
|
<div class="fixed bottom-0 w-full bg-white dark:bg-gray-800">
|
||||||
<div class=" pt-5">
|
<div class=" absolute right-0 left-0 bottom-0 mb-20">
|
||||||
<div class="max-w-3xl px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0">
|
<div class="max-w-3xl px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0">
|
||||||
{#if messages.length == 0 && suggestions !== 'false'}
|
{#if messages.length == 0 && suggestions !== 'false'}
|
||||||
<Suggestions {submitPrompt} />
|
<Suggestions {submitPrompt} />
|
||||||
|
|
@ -115,7 +115,10 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="max-w-3xl px-2.5 -mb-0.5 mx-auto inset-x-0">
|
||||||
<div class="bg-gradient-to-t from-white dark:from-gray-800 from-40% pb-2">
|
<div class="bg-gradient-to-t from-white dark:from-gray-800 from-40% pb-2">
|
||||||
<input
|
<input
|
||||||
bind:this={filesInputElement}
|
bind:this={filesInputElement}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,8 @@
|
||||||
|
|
||||||
let showDropdown = false;
|
let showDropdown = false;
|
||||||
|
|
||||||
|
let showDeleteHistoryConfirm = false;
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
if (window.innerWidth > 1280) {
|
if (window.innerWidth > 1280) {
|
||||||
show = true;
|
show = true;
|
||||||
|
|
@ -447,13 +449,73 @@
|
||||||
<div class=" self-center">Export</div>
|
<div class=" self-center">Export</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
{#if showDeleteHistoryConfirm}
|
||||||
|
<div class="flex justify-between rounded-md items-center py-3 px-3.5 w-full transition">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-5 h-5 mr-3"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
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>
|
||||||
|
<span>Are you sure?</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex space-x-1.5 items-center">
|
||||||
|
<button
|
||||||
|
class="hover:text-white transition"
|
||||||
|
on:click={() => {
|
||||||
|
deleteChatHistory();
|
||||||
|
showDeleteHistoryConfirm = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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="hover:text-white transition"
|
||||||
|
on:click={() => {
|
||||||
|
showDeleteHistoryConfirm = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
<button
|
<button
|
||||||
class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
|
class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
deleteChatHistory();
|
showDeleteHistoryConfirm = true;
|
||||||
}}
|
}}>
|
||||||
>
|
<div class="mr-3">
|
||||||
<div class=" self-center mr-3">
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
|
@ -469,8 +531,9 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class=" self-center">Clear conversations</div>
|
<span>Clear conversations</span>
|
||||||
</button>
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
{#if $user !== undefined}
|
{#if $user !== undefined}
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
16
static/manifest.json
Normal file
16
static/manifest.json
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "Ollama Web UI",
|
||||||
|
"short_name": "Ollama",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#343541",
|
||||||
|
"theme_color": "#343541",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "844x884"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue