forked from open-webui/open-webui
		
	refac: styling
This commit is contained in:
		
							parent
							
								
									c419949bf9
								
							
						
					
					
						commit
						82fcec826c
					
				
					 8 changed files with 309 additions and 322 deletions
				
			
		|  | @ -83,10 +83,16 @@ | ||||||
| 				<div class="py-10 w-full"> | 				<div class="py-10 w-full"> | ||||||
| 					<div class=" flex flex-col justify-center"> | 					<div class=" flex flex-col justify-center"> | ||||||
| 						<div class=" flex justify-between items-center"> | 						<div class=" flex justify-between items-center"> | ||||||
| 							<div class=" text-2xl font-semibold">Users ({users.length})</div> | 							<div class="flex items-center text-2xl font-semibold"> | ||||||
|  | 								All Users | ||||||
|  | 								<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" /> | ||||||
|  | 								<span class="text-lg font-medium text-gray-500 dark:text-gray-300" | ||||||
|  | 									>{users.length}</span | ||||||
|  | 								> | ||||||
|  | 							</div> | ||||||
| 							<div> | 							<div> | ||||||
| 								<button | 								<button | ||||||
| 									class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg" | 									class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition" | ||||||
| 									type="button" | 									type="button" | ||||||
| 									on:click={() => { | 									on:click={() => { | ||||||
| 										showSettingsModal = !showSettingsModal; | 										showSettingsModal = !showSettingsModal; | ||||||
|  | @ -110,7 +116,7 @@ | ||||||
| 							</div> | 							</div> | ||||||
| 						</div> | 						</div> | ||||||
| 						<div class=" text-gray-500 text-xs mt-1"> | 						<div class=" text-gray-500 text-xs mt-1"> | ||||||
| 							Click on the user role cell in the table to change a user's role. | 							ⓘ Click on the user role button to change a user's role. | ||||||
| 						</div> | 						</div> | ||||||
| 
 | 
 | ||||||
| 						<hr class=" my-3 dark:border-gray-600" /> | 						<hr class=" my-3 dark:border-gray-600" /> | ||||||
|  |  | ||||||
|  | @ -184,34 +184,39 @@ | ||||||
| <SettingsModal bind:show={showSettingsModal} /> | <SettingsModal bind:show={showSettingsModal} /> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class=" flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<div class="mb-6 flex justify-between items-center"> | 			<div class="mb-6"> | ||||||
| 				<div class=" text-2xl font-semibold self-center">My Documents</div> | 				<div class="flex justify-between items-center"> | ||||||
|  | 					<div class=" text-2xl font-semibold self-center">My Documents</div> | ||||||
| 
 | 
 | ||||||
| 				<div> | 					<div> | ||||||
| 					<button | 						<button | ||||||
| 						class="flex items-center space-x-1 border border-gray-200 dark:border-gray-600 px-3 py-1 rounded-lg" | 							class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition" | ||||||
| 						type="button" | 							type="button" | ||||||
| 						on:click={() => { | 							on:click={() => { | ||||||
| 							showSettingsModal = !showSettingsModal; | 								showSettingsModal = !showSettingsModal; | ||||||
| 						}} | 							}} | ||||||
| 					> |  | ||||||
| 						<svg |  | ||||||
| 							xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 							viewBox="0 0 16 16" |  | ||||||
| 							fill="currentColor" |  | ||||||
| 							class="w-4 h-4" |  | ||||||
| 						> | 						> | ||||||
| 							<path | 							<svg | ||||||
| 								fill-rule="evenodd" | 								xmlns="http://www.w3.org/2000/svg" | ||||||
| 								d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z" | 								viewBox="0 0 16 16" | ||||||
| 								clip-rule="evenodd" | 								fill="currentColor" | ||||||
| 							/> | 								class="w-4 h-4" | ||||||
| 						</svg> | 							> | ||||||
|  | 								<path | ||||||
|  | 									fill-rule="evenodd" | ||||||
|  | 									d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z" | ||||||
|  | 									clip-rule="evenodd" | ||||||
|  | 								/> | ||||||
|  | 							</svg> | ||||||
| 
 | 
 | ||||||
| 						<div class=" text-xs">Document Settings</div> | 							<div class=" text-xs">Document Settings</div> | ||||||
| 					</button> | 						</button> | ||||||
|  | 					</div> | ||||||
|  | 				</div> | ||||||
|  | 				<div class=" text-gray-500 text-xs mt-1"> | ||||||
|  | 					ⓘ Use '#' in the prompt input to load and select your documents. | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 
 | 
 | ||||||
|  | @ -240,7 +245,7 @@ | ||||||
| 
 | 
 | ||||||
| 				<div> | 				<div> | ||||||
| 					<button | 					<button | ||||||
| 						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1" | 						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1" | ||||||
| 						on:click={() => { | 						on:click={() => { | ||||||
| 							document.getElementById('upload-doc-input')?.click(); | 							document.getElementById('upload-doc-input')?.click(); | ||||||
| 						}} | 						}} | ||||||
|  | @ -307,156 +312,154 @@ | ||||||
| 				</div> | 				</div> | ||||||
| 			{/if} | 			{/if} | ||||||
| 
 | 
 | ||||||
| 			{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? []) | 			<div class="my-3 mb-5"> | ||||||
| 							.map((tag) => tag.name) | 				{#each $documents.filter((doc) => (selectedTag === '' || (doc?.content?.tags ?? []) | ||||||
| 							.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc} | 								.map((tag) => tag.name) | ||||||
| 				<div class=" flex space-x-4 cursor-pointer w-full mt-3 mb-3"> | 								.includes(selectedTag)) && (query === '' || doc.name.includes(query))) as doc} | ||||||
| 					<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> | 					<div class=" flex space-x-4 cursor-pointer w-full mt-3 mb-3"> | ||||||
| 						<div class=" flex items-center space-x-3"> | 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> | ||||||
| 							<div class="p-2.5 bg-red-400 text-white rounded-lg"> | 							<div class=" flex items-center space-x-3"> | ||||||
| 								{#if doc} | 								<div class="p-2.5 bg-red-400 text-white rounded-lg"> | ||||||
| 									<svg | 									{#if doc} | ||||||
| 										xmlns="http://www.w3.org/2000/svg" | 										<svg | ||||||
| 										viewBox="0 0 24 24" | 											xmlns="http://www.w3.org/2000/svg" | ||||||
| 										fill="currentColor" | 											viewBox="0 0 24 24" | ||||||
| 										class="w-6 h-6" | 											fill="currentColor" | ||||||
| 									> | 											class="w-6 h-6" | ||||||
| 										<path | 										> | ||||||
| 											fill-rule="evenodd" | 											<path | ||||||
| 											d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" | 												fill-rule="evenodd" | ||||||
| 											clip-rule="evenodd" | 												d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" | ||||||
| 										/> | 												clip-rule="evenodd" | ||||||
| 										<path | 											/> | ||||||
| 											d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" | 											<path | ||||||
| 										/> | 												d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" | ||||||
| 									</svg> | 											/> | ||||||
| 								{:else} | 										</svg> | ||||||
| 									<svg | 									{:else} | ||||||
| 										class=" w-6 h-6 translate-y-[0.5px]" | 										<svg | ||||||
| 										fill="currentColor" | 											class=" w-6 h-6 translate-y-[0.5px]" | ||||||
| 										viewBox="0 0 24 24" | 											fill="currentColor" | ||||||
| 										xmlns="http://www.w3.org/2000/svg" | 											viewBox="0 0 24 24" | ||||||
| 										><style> | 											xmlns="http://www.w3.org/2000/svg" | ||||||
| 											.spinner_qM83 { | 											><style> | ||||||
| 												animation: spinner_8HQG 1.05s infinite; | 												.spinner_qM83 { | ||||||
| 											} | 													animation: spinner_8HQG 1.05s infinite; | ||||||
| 											.spinner_oXPr { |  | ||||||
| 												animation-delay: 0.1s; |  | ||||||
| 											} |  | ||||||
| 											.spinner_ZTLf { |  | ||||||
| 												animation-delay: 0.2s; |  | ||||||
| 											} |  | ||||||
| 											@keyframes spinner_8HQG { |  | ||||||
| 												0%, |  | ||||||
| 												57.14% { |  | ||||||
| 													animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); |  | ||||||
| 													transform: translate(0); |  | ||||||
| 												} | 												} | ||||||
| 												28.57% { | 												.spinner_oXPr { | ||||||
| 													animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); | 													animation-delay: 0.1s; | ||||||
| 													transform: translateY(-6px); |  | ||||||
| 												} | 												} | ||||||
| 												100% { | 												.spinner_ZTLf { | ||||||
| 													transform: translate(0); | 													animation-delay: 0.2s; | ||||||
| 												} | 												} | ||||||
| 											} | 												@keyframes spinner_8HQG { | ||||||
| 										</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle | 													0%, | ||||||
| 											class="spinner_qM83 spinner_oXPr" | 													57.14% { | ||||||
| 											cx="12" | 														animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); | ||||||
| 											cy="12" | 														transform: translate(0); | ||||||
| 											r="2.5" | 													} | ||||||
| 										/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg | 													28.57% { | ||||||
| 									> | 														animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); | ||||||
| 								{/if} | 														transform: translateY(-6px); | ||||||
| 							</div> | 													} | ||||||
| 							<div class=" flex-1 self-center flex-1"> | 													100% { | ||||||
| 								<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div> | 														transform: translate(0); | ||||||
| 								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> | 													} | ||||||
| 									{doc.title} | 												} | ||||||
|  | 											</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle | ||||||
|  | 												class="spinner_qM83 spinner_oXPr" | ||||||
|  | 												cx="12" | ||||||
|  | 												cy="12" | ||||||
|  | 												r="2.5" | ||||||
|  | 											/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg | ||||||
|  | 										> | ||||||
|  | 									{/if} | ||||||
|  | 								</div> | ||||||
|  | 								<div class=" flex-1 self-center flex-1"> | ||||||
|  | 									<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div> | ||||||
|  | 									<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> | ||||||
|  | 										{doc.title} | ||||||
|  | 									</div> | ||||||
| 								</div> | 								</div> | ||||||
| 							</div> | 							</div> | ||||||
| 						</div> | 						</div> | ||||||
| 					</div> | 						<div class="flex flex-row space-x-1 self-center"> | ||||||
| 					<div class="flex flex-row space-x-1 self-center"> | 							<button | ||||||
| 						<button | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 								type="button" | ||||||
| 							type="button" | 								on:click={async () => { | ||||||
| 							on:click={async () => { | 									showEditDocModal = !showEditDocModal; | ||||||
| 								showEditDocModal = !showEditDocModal; | 									selectedDoc = doc; | ||||||
| 								selectedDoc = doc; | 								}} | ||||||
| 							}} |  | ||||||
| 						> |  | ||||||
| 							<svg |  | ||||||
| 								xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 								fill="none" |  | ||||||
| 								viewBox="0 0 24 24" |  | ||||||
| 								stroke-width="1.5" |  | ||||||
| 								stroke="currentColor" |  | ||||||
| 								class="w-4 h-4" |  | ||||||
| 							> | 							> | ||||||
| 								<path | 								<svg | ||||||
| 									stroke-linecap="round" | 									xmlns="http://www.w3.org/2000/svg" | ||||||
| 									stroke-linejoin="round" | 									fill="none" | ||||||
| 									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" | 									viewBox="0 0 24 24" | ||||||
| 								/> | 									stroke-width="1.5" | ||||||
| 							</svg> | 									stroke="currentColor" | ||||||
| 						</button> | 									class="w-4 h-4" | ||||||
| 
 |  | ||||||
| 						<!-- <button |  | ||||||
| 									class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" |  | ||||||
| 									type="button" |  | ||||||
| 									on:click={() => { |  | ||||||
| 										console.log('download file'); |  | ||||||
| 									}} |  | ||||||
| 								> | 								> | ||||||
| 									<svg | 									<path | ||||||
| 										xmlns="http://www.w3.org/2000/svg" | 										stroke-linecap="round" | ||||||
| 										viewBox="0 0 16 16" | 										stroke-linejoin="round" | ||||||
| 										fill="currentColor" | 										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" | ||||||
| 										class="w-4 h-4" | 									/> | ||||||
| 									> | 								</svg> | ||||||
| 										<path | 							</button> | ||||||
| 											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z" |  | ||||||
| 										/> |  | ||||||
| 										<path |  | ||||||
| 											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z" |  | ||||||
| 										/> |  | ||||||
| 									</svg> |  | ||||||
| 								</button> --> |  | ||||||
| 
 | 
 | ||||||
| 						<button | 							<!-- <button | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 						class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
| 							type="button" | 						type="button" | ||||||
| 							on:click={() => { | 						on:click={() => { | ||||||
| 								deleteDoc(doc.name); | 							console.log('download file'); | ||||||
| 							}} | 						}} | ||||||
|  | 					> | ||||||
|  | 						<svg | ||||||
|  | 							xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 							viewBox="0 0 16 16" | ||||||
|  | 							fill="currentColor" | ||||||
|  | 							class="w-4 h-4" | ||||||
| 						> | 						> | ||||||
| 							<svg | 							<path | ||||||
| 								xmlns="http://www.w3.org/2000/svg" | 								d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z" | ||||||
| 								fill="none" | 							/> | ||||||
| 								viewBox="0 0 24 24" | 							<path | ||||||
| 								stroke-width="1.5" | 								d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z" | ||||||
| 								stroke="currentColor" | 							/> | ||||||
| 								class="w-4 h-4" | 						</svg> | ||||||
|  | 					</button> --> | ||||||
|  | 
 | ||||||
|  | 							<button | ||||||
|  | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
|  | 								type="button" | ||||||
|  | 								on:click={() => { | ||||||
|  | 									deleteDoc(doc.name); | ||||||
|  | 								}} | ||||||
| 							> | 							> | ||||||
| 								<path | 								<svg | ||||||
| 									stroke-linecap="round" | 									xmlns="http://www.w3.org/2000/svg" | ||||||
| 									stroke-linejoin="round" | 									fill="none" | ||||||
| 									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" | 									viewBox="0 0 24 24" | ||||||
| 								/> | 									stroke-width="1.5" | ||||||
| 							</svg> | 									stroke="currentColor" | ||||||
| 						</button> | 									class="w-4 h-4" | ||||||
|  | 								> | ||||||
|  | 									<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> | ||||||
|  | 							</button> | ||||||
|  | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				</div> |  | ||||||
| 
 | 
 | ||||||
| 				<div class=" my-2.5" /> | 					<div class=" my-2.5" /> | ||||||
| 			{/each} | 				{/each} | ||||||
|  | 			</div> | ||||||
| 
 | 
 | ||||||
| 			{#if $documents.length > 0} | 			<div class=" flex justify-end w-full mb-2"> | ||||||
| 				<hr class=" dark:border-gray-700 my-2.5" /> |  | ||||||
| 			{/if} |  | ||||||
| 
 |  | ||||||
| 			<div class=" flex justify-between w-full mb-3"> |  | ||||||
| 				<div class="flex space-x-2"> | 				<div class="flex space-x-2"> | ||||||
| 					<input | 					<input | ||||||
| 						id="documents-import-input" | 						id="documents-import-input" | ||||||
|  | @ -544,29 +547,6 @@ | ||||||
| 					</button> | 					</button> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 
 |  | ||||||
| 			<div class="text-xs flex items-center space-x-1"> |  | ||||||
| 				<div> |  | ||||||
| 					<svg |  | ||||||
| 						xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 						fill="none" |  | ||||||
| 						viewBox="0 0 24 24" |  | ||||||
| 						stroke-width="1.5" |  | ||||||
| 						stroke="currentColor" |  | ||||||
| 						class="w-3 h-3" |  | ||||||
| 					> |  | ||||||
| 						<path |  | ||||||
| 							stroke-linecap="round" |  | ||||||
| 							stroke-linejoin="round" |  | ||||||
| 							d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" |  | ||||||
| 						/> |  | ||||||
| 					</svg> |  | ||||||
| 				</div> |  | ||||||
| 
 |  | ||||||
| 				<div class="line-clamp-1"> |  | ||||||
| 					Tip: Use '#' in the prompt input to swiftly load and select your documents. |  | ||||||
| 				</div> |  | ||||||
| 			</div> |  | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
|  |  | ||||||
|  | @ -70,11 +70,11 @@ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div> | 			<div class=" text-2xl font-semibold mb-3">My Modelfiles</div> | ||||||
| 
 | 
 | ||||||
| 			<a class=" flex space-x-4 cursor-pointer w-full mb-3" href="/modelfiles/create"> | 			<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/modelfiles/create"> | ||||||
| 				<div class=" self-center w-10"> | 				<div class=" self-center w-10"> | ||||||
| 					<div | 					<div | ||||||
| 						class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200" | 						class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200" | ||||||
|  | @ -100,130 +100,133 @@ | ||||||
| 				</div> | 				</div> | ||||||
| 			</a> | 			</a> | ||||||
| 
 | 
 | ||||||
| 			{#each $modelfiles as modelfile} | 			<hr class=" dark:border-gray-700" /> | ||||||
| 				<hr class=" dark:border-gray-700 my-2.5" /> | 
 | ||||||
| 				<div class=" flex space-x-4 cursor-pointer w-full mb-3"> | 			<div class=" my-2 mb-5"> | ||||||
| 					<a | 				{#each $modelfiles as modelfile} | ||||||
| 						class=" flex flex-1 space-x-4 cursor-pointer w-full" | 					<div | ||||||
| 						href={`/?models=${encodeURIComponent(modelfile.tagName)}`} | 						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl" | ||||||
| 					> | 					> | ||||||
| 						<div class=" self-center w-10"> |  | ||||||
| 							<div class=" rounded-full bg-stone-700"> |  | ||||||
| 								<img |  | ||||||
| 									src={modelfile.imageUrl ?? '/user.png'} |  | ||||||
| 									alt="modelfile profile" |  | ||||||
| 									class=" rounded-full w-full h-auto object-cover" |  | ||||||
| 								/> |  | ||||||
| 							</div> |  | ||||||
| 						</div> |  | ||||||
| 
 |  | ||||||
| 						<div class=" flex-1 self-center"> |  | ||||||
| 							<div class=" font-bold capitalize">{modelfile.title}</div> |  | ||||||
| 							<div class=" text-sm overflow-hidden text-ellipsis line-clamp-2"> |  | ||||||
| 								{modelfile.desc} |  | ||||||
| 							</div> |  | ||||||
| 						</div> |  | ||||||
| 					</a> |  | ||||||
| 					<div class="flex flex-row space-x-1 self-center"> |  | ||||||
| 						<a | 						<a | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 							class=" flex flex-1 space-x-4 cursor-pointer w-full" | ||||||
| 							type="button" | 							href={`/?models=${encodeURIComponent(modelfile.tagName)}`} | ||||||
| 							href={`/modelfiles/edit?tag=${encodeURIComponent(modelfile.tagName)}`} |  | ||||||
| 						> | 						> | ||||||
| 							<svg | 							<div class=" self-center w-10"> | ||||||
| 								xmlns="http://www.w3.org/2000/svg" | 								<div class=" rounded-full bg-stone-700"> | ||||||
| 								fill="none" | 									<img | ||||||
| 								viewBox="0 0 24 24" | 										src={modelfile.imageUrl ?? '/user.png'} | ||||||
| 								stroke-width="1.5" | 										alt="modelfile profile" | ||||||
| 								stroke="currentColor" | 										class=" rounded-full w-full h-auto object-cover" | ||||||
| 								class="w-4 h-4" | 									/> | ||||||
| 							> | 								</div> | ||||||
| 								<path | 							</div> | ||||||
| 									stroke-linecap="round" | 
 | ||||||
| 									stroke-linejoin="round" | 							<div class=" flex-1 self-center"> | ||||||
| 									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" | 								<div class=" font-bold capitalize">{modelfile.title}</div> | ||||||
| 								/> | 								<div class=" text-sm overflow-hidden text-ellipsis line-clamp-1"> | ||||||
| 							</svg> | 									{modelfile.desc} | ||||||
|  | 								</div> | ||||||
|  | 							</div> | ||||||
| 						</a> | 						</a> | ||||||
| 
 | 						<div class="flex flex-row space-x-1 self-center"> | ||||||
| 						<button | 							<a | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
| 							type="button" | 								type="button" | ||||||
| 							on:click={() => { | 								href={`/modelfiles/edit?tag=${encodeURIComponent(modelfile.tagName)}`} | ||||||
| 								// console.log(modelfile); |  | ||||||
| 								sessionStorage.modelfile = JSON.stringify(modelfile); |  | ||||||
| 								goto('/modelfiles/create'); |  | ||||||
| 							}} |  | ||||||
| 						> |  | ||||||
| 							<svg |  | ||||||
| 								xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 								fill="none" |  | ||||||
| 								viewBox="0 0 24 24" |  | ||||||
| 								stroke-width="1.5" |  | ||||||
| 								stroke="currentColor" |  | ||||||
| 								class="w-4 h-4" |  | ||||||
| 							> | 							> | ||||||
| 								<path | 								<svg | ||||||
| 									stroke-linecap="round" | 									xmlns="http://www.w3.org/2000/svg" | ||||||
| 									stroke-linejoin="round" | 									fill="none" | ||||||
| 									d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" | 									viewBox="0 0 24 24" | ||||||
| 								/> | 									stroke-width="1.5" | ||||||
| 							</svg> | 									stroke="currentColor" | ||||||
| 						</button> | 									class="w-4 h-4" | ||||||
|  | 								> | ||||||
|  | 									<path | ||||||
|  | 										stroke-linecap="round" | ||||||
|  | 										stroke-linejoin="round" | ||||||
|  | 										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> | ||||||
|  | 							</a> | ||||||
| 
 | 
 | ||||||
| 						<button | 							<button | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
| 							type="button" | 								type="button" | ||||||
| 							on:click={() => { | 								on:click={() => { | ||||||
| 								shareModelfile(modelfile); | 									// console.log(modelfile); | ||||||
| 							}} | 									sessionStorage.modelfile = JSON.stringify(modelfile); | ||||||
| 						> | 									goto('/modelfiles/create'); | ||||||
| 							<!-- TODO: update to share icon --> | 								}} | ||||||
| 							<svg |  | ||||||
| 								xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 								fill="none" |  | ||||||
| 								viewBox="0 0 24 24" |  | ||||||
| 								stroke-width="1.5" |  | ||||||
| 								stroke="currentColor" |  | ||||||
| 								class="w-4 h-4" |  | ||||||
| 							> | 							> | ||||||
| 								<path | 								<svg | ||||||
| 									stroke-linecap="round" | 									xmlns="http://www.w3.org/2000/svg" | ||||||
| 									stroke-linejoin="round" | 									fill="none" | ||||||
| 									d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" | 									viewBox="0 0 24 24" | ||||||
| 								/> | 									stroke-width="1.5" | ||||||
| 							</svg> | 									stroke="currentColor" | ||||||
| 						</button> | 									class="w-4 h-4" | ||||||
|  | 								> | ||||||
|  | 									<path | ||||||
|  | 										stroke-linecap="round" | ||||||
|  | 										stroke-linejoin="round" | ||||||
|  | 										d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" | ||||||
|  | 									/> | ||||||
|  | 								</svg> | ||||||
|  | 							</button> | ||||||
| 
 | 
 | ||||||
| 						<button | 							<button | ||||||
| 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
| 							type="button" | 								type="button" | ||||||
| 							on:click={() => { | 								on:click={() => { | ||||||
| 								deleteModelfile(modelfile.tagName); | 									shareModelfile(modelfile); | ||||||
| 							}} | 								}} | ||||||
| 						> |  | ||||||
| 							<svg |  | ||||||
| 								xmlns="http://www.w3.org/2000/svg" |  | ||||||
| 								fill="none" |  | ||||||
| 								viewBox="0 0 24 24" |  | ||||||
| 								stroke-width="1.5" |  | ||||||
| 								stroke="currentColor" |  | ||||||
| 								class="w-4 h-4" |  | ||||||
| 							> | 							> | ||||||
| 								<path | 								<!-- TODO: update to share icon --> | ||||||
| 									stroke-linecap="round" | 								<svg | ||||||
| 									stroke-linejoin="round" | 									xmlns="http://www.w3.org/2000/svg" | ||||||
| 									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" | 									fill="none" | ||||||
| 								/> | 									viewBox="0 0 24 24" | ||||||
| 							</svg> | 									stroke-width="1.5" | ||||||
| 						</button> | 									stroke="currentColor" | ||||||
|  | 									class="w-4 h-4" | ||||||
|  | 								> | ||||||
|  | 									<path | ||||||
|  | 										stroke-linecap="round" | ||||||
|  | 										stroke-linejoin="round" | ||||||
|  | 										d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" | ||||||
|  | 									/> | ||||||
|  | 								</svg> | ||||||
|  | 							</button> | ||||||
|  | 
 | ||||||
|  | 							<button | ||||||
|  | 								class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl" | ||||||
|  | 								type="button" | ||||||
|  | 								on:click={() => { | ||||||
|  | 									deleteModelfile(modelfile.tagName); | ||||||
|  | 								}} | ||||||
|  | 							> | ||||||
|  | 								<svg | ||||||
|  | 									xmlns="http://www.w3.org/2000/svg" | ||||||
|  | 									fill="none" | ||||||
|  | 									viewBox="0 0 24 24" | ||||||
|  | 									stroke-width="1.5" | ||||||
|  | 									stroke="currentColor" | ||||||
|  | 									class="w-4 h-4" | ||||||
|  | 								> | ||||||
|  | 									<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> | ||||||
|  | 							</button> | ||||||
|  | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				</div> | 				{/each} | ||||||
| 			{/each} | 			</div> | ||||||
| 
 | 
 | ||||||
| 			<hr class=" dark:border-gray-700 my-2.5" /> | 			<div class=" flex justify-end w-full mb-3"> | ||||||
| 
 |  | ||||||
| 			<div class=" flex justify-between w-full mb-3"> |  | ||||||
| 				<div class="flex space-x-1"> | 				<div class="flex space-x-1"> | ||||||
| 					<input | 					<input | ||||||
| 						id="modelfiles-import-input" | 						id="modelfiles-import-input" | ||||||
|  | @ -374,10 +377,10 @@ | ||||||
| 			</div> | 			</div> | ||||||
| 
 | 
 | ||||||
| 			<div class=" my-16"> | 			<div class=" my-16"> | ||||||
| 				<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div> | 				<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div> | ||||||
| 
 | 
 | ||||||
| 				<a | 				<a | ||||||
| 					class=" flex space-x-4 cursor-pointer w-full mb-3" | 					class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" | ||||||
| 					href="https://openwebui.com/" | 					href="https://openwebui.com/" | ||||||
| 					target="_blank" | 					target="_blank" | ||||||
| 				> | 				> | ||||||
|  | @ -402,7 +405,7 @@ | ||||||
| 
 | 
 | ||||||
| 					<div class=" self-center"> | 					<div class=" self-center"> | ||||||
| 						<div class=" font-bold">Discover a modelfile</div> | 						<div class=" font-bold">Discover a modelfile</div> | ||||||
| 						<div class=" text-sm">Discover, download, and explore Ollama Modelfiles</div> | 						<div class=" text-sm">Discover, download, and explore model presets</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				</a> | 				</a> | ||||||
| 			</div> | 			</div> | ||||||
|  |  | ||||||
|  | @ -282,7 +282,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class=" flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<input | 			<input | ||||||
| 				bind:this={filesInputElement} | 				bind:this={filesInputElement} | ||||||
|  |  | ||||||
|  | @ -181,7 +181,7 @@ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<input | 			<input | ||||||
| 				bind:this={filesInputElement} | 				bind:this={filesInputElement} | ||||||
|  |  | ||||||
|  | @ -37,7 +37,7 @@ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<div class="mb-6 flex justify-between items-center"> | 			<div class="mb-6 flex justify-between items-center"> | ||||||
| 				<div class=" text-2xl font-semibold self-center">My Prompts</div> | 				<div class=" text-2xl font-semibold self-center">My Prompts</div> | ||||||
|  | @ -84,13 +84,13 @@ | ||||||
| 					</a> | 					</a> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
|  | 			<hr class=" dark:border-gray-700 my-2.5" /> | ||||||
| 
 | 
 | ||||||
| 			{#if $prompts.length === 0} | 			<div class="my-3 mb-5"> | ||||||
| 				<div /> |  | ||||||
| 			{:else} |  | ||||||
| 				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt} | 				{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt} | ||||||
| 					<hr class=" dark:border-gray-700 my-2.5" /> | 					<div | ||||||
| 					<div class=" flex space-x-4 cursor-pointer w-full mb-3"> | 						class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl" | ||||||
|  | 					> | ||||||
| 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> | 						<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> | ||||||
| 							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}> | 							<a href={`/prompts/edit?command=${encodeURIComponent(prompt.command)}`}> | ||||||
| 								<div class=" flex-1 self-center pl-5"> | 								<div class=" flex-1 self-center pl-5"> | ||||||
|  | @ -196,11 +196,9 @@ | ||||||
| 						</div> | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				{/each} | 				{/each} | ||||||
| 			{/if} | 			</div> | ||||||
| 
 | 
 | ||||||
| 			<hr class=" dark:border-gray-700 my-2.5" /> | 			<div class=" flex justify-end w-full mb-3"> | ||||||
| 
 |  | ||||||
| 			<div class=" flex justify-between w-full mb-3"> |  | ||||||
| 				<div class="flex space-x-2"> | 				<div class="flex space-x-2"> | ||||||
| 					<input | 					<input | ||||||
| 						id="prompts-import-input" | 						id="prompts-import-input" | ||||||
|  | @ -301,7 +299,7 @@ | ||||||
| 				<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div> | 				<div class=" text-2xl font-semibold mb-6">Made by OpenWebUI Community</div> | ||||||
| 
 | 
 | ||||||
| 				<a | 				<a | ||||||
| 					class=" flex space-x-4 cursor-pointer w-full mb-3" | 					class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2" | ||||||
| 					href="https://openwebui.com/?type=prompts" | 					href="https://openwebui.com/?type=prompts" | ||||||
| 					target="_blank" | 					target="_blank" | ||||||
| 				> | 				> | ||||||
|  | @ -326,7 +324,7 @@ | ||||||
| 
 | 
 | ||||||
| 					<div class=" self-center"> | 					<div class=" self-center"> | ||||||
| 						<div class=" font-bold">Discover a prompt</div> | 						<div class=" font-bold">Discover a prompt</div> | ||||||
| 						<div class=" text-sm">Discover, download, and explore custom Prompts</div> | 						<div class=" text-sm">Discover, download, and explore custom prompts</div> | ||||||
| 					</div> | 					</div> | ||||||
| 				</a> | 				</a> | ||||||
| 			</div> | 			</div> | ||||||
|  |  | ||||||
|  | @ -90,7 +90,7 @@ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class=" flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<div class=" text-2xl font-semibold mb-6">My Prompts</div> | 			<div class=" text-2xl font-semibold mb-6">My Prompts</div> | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -72,7 +72,7 @@ | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class=" py-2.5 flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
| 			<div class=" text-2xl font-semibold mb-6">My Prompts</div> | 			<div class=" text-2xl font-semibold mb-6">My Prompts</div> | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Timothy J. Baek
						Timothy J. Baek