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:
		
						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,30 +449,91 @@ | ||||||
| 						<div class=" self-center">Export</div> | 						<div class=" self-center">Export</div> | ||||||
| 					</button> | 					</button> | ||||||
| 				</div> | 				</div> | ||||||
| 				<button |         {#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 | ||||||
| 					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" |                 viewBox="0 0 24 24" | ||||||
| 							viewBox="0 0 24 24" |                 stroke-width="1.5" | ||||||
| 							stroke-width="1.5" |                 stroke="currentColor" | ||||||
| 							stroke="currentColor" |                 class="w-5 h-5" | ||||||
| 							class="w-5 h-5" |               > | ||||||
| 						> |                 <path | ||||||
| 							<path |                   stroke-linecap="round" | ||||||
| 								stroke-linecap="round" |                   stroke-linejoin="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" | ||||||
| 								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> | ||||||
| 						</svg> |             </div> | ||||||
| 					</div> |             <span>Clear conversations</span> | ||||||
| 					<div class=" self-center">Clear conversations</div> |  | ||||||
| 				</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…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Timothy Jaeryang Baek
						Timothy Jaeryang Baek