refac

backend/open_webui/main.py

@@ -1570,12 +1570,15 @@ async def generate_chat_tags(form_data: dict, user=Depends(get_verified_user)):
     task_model_id = get_task_model_id(model_id)
     print(task_model_id)
 
-    template = """### Task:
-Generate 1-3 broad tags categorizing the main themes of the chat history.
+    if app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE != "":
+        template = app.state.config.TAGS_GENERATION_PROMPT_TEMPLATE
+    else:
+        template = """### Task:
+Generate 1-3 broad tags categorizing the main themes of the chat history, along with 1-3 more specific subtopic tags.
 
 ### Guidelines:
 - Start with high-level domains (e.g. Science, Technology, Philosophy, Arts, Politics, Business, Health, Sports, Entertainment, Education)
-- Only add more specific subdomains if they are strongly represented throughout the conversation
+- Consider including relevant subfields/subdomains if they are strongly represented throughout the conversation
 - If content is too short (less than 3 messages) or too diverse, use only ["General"]
 - Use the chat's primary language; default to English if multilingual
 - Prioritize accuracy over specificity

src/lib/components/common/Badge.svelte

@@ -7,7 +7,7 @@
 		success: 'bg-green-500/20 text-green-700 dark:text-green-200',
 		warning: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200',
 		error: 'bg-red-500/20 text-red-700 dark:text-red-200',
-		mute: 'bg-gray-500/20 text-gray-700 dark:text-gray-200'
+		muted: 'bg-gray-500/20 text-gray-700 dark:text-gray-200'
 	};
 </script>
 

src/lib/components/common/Tags/TagList.svelte

@@ -1,34 +1,32 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import Tooltip from '../Tooltip.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import Badge from '../Badge.svelte';
 	const dispatch = createEventDispatcher();
 
 	export let tags = [];
 </script>
 
 {#each tags as tag}
-	<div
-		class="px-2 py-[0.5px] gap-0.5 flex justify-between h-fit items-center rounded-full transition border dark:border-gray-800 dark:text-white"
-	>
-		<div class=" text-[0.7rem] font-medium self-center line-clamp-1">
-			{tag.name}
-		</div>
-		<button
-			class="h-full flex self-center cursor-pointer"
-			on:click={() => {
-				dispatch('delete', tag.name);
-			}}
-			type="button"
+	<Tooltip content={tag.name}>
+		<div
+			class="relative group px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="size-3 m-auto self-center translate-y-[0.3px] translate-x-[3px]"
-			>
-				<path
-					d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
-				/>
-			</svg>
-		</button>
-	</div>
+			<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
+				{tag.name}
+			</div>
+			<div class="absolute invisible right-0.5 group-hover:visible transition">
+				<button
+					class="rounded-full border bg-white dark:bg-gray-700 h-full flex self-center cursor-pointer"
+					on:click={() => {
+						dispatch('delete', tag.name);
+					}}
+					type="button"
+				>
+					<XMark className="size-3" strokeWidth="2.5" />
+				</button>
+			</div>
+		</div>
+	</Tooltip>
 {/each}

src/lib/components/layout/Navbar/Menu.svelte

@@ -274,7 +274,7 @@
 			</DropdownMenu.Item>
 
 			{#if !$temporaryChatEnabled}
-				<hr class="border-gray-100 dark:border-gray-800 my-1" />
+				<hr class="border-gray-50 dark:border-gray-850 my-0.5" />
 
 				<div class="flex p-1">
 					<Tags chatId={chat.id} />

src/lib/components/layout/Sidebar/ChatMenu.svelte

@@ -134,7 +134,7 @@
 
 	<div slot="content">
 		<DropdownMenu.Content
-			class="w-full max-w-[180px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-xl"
+			class="w-full max-w-[200px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-xl"
 			sideOffset={-2}
 			side="bottom"
 			align="start"
@@ -245,7 +245,7 @@
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</DropdownMenu.Item>
 
-			<hr class="border-gray-100 dark:border-gray-800 mt-1 mb-1" />
+			<hr class="border-gray-50 dark:border-gray-850 my-0.5" />
 
 			<div class="flex p-1">
 				<Tags

src/lib/components/workspace/Knowledge.svelte

@@ -168,7 +168,7 @@
 					<div class="mt-5 flex justify-between">
 						<div>
 							{#if item?.meta?.document}
-								<Badge type="mute" content={$i18n.t('Document')} />
+								<Badge type="muted" content={$i18n.t('Document')} />
 							{:else}
 								<Badge type="success" content={$i18n.t('Collection')} />
 							{/if}