refac

src/lib/components/AddServerModal.svelte

@@ -30,6 +30,8 @@
 	let url = '';
 	let path = 'openapi.json';
 
+	let type = 'openapi'; // 'openapi', 'mcp'
+
 	let auth_type = 'bearer';
 	let key = '';
 
@@ -137,6 +139,7 @@
 			url = connection.url;
 			path = connection?.path ?? 'openapi.json';
 
+			type = connection?.type ?? 'openapi';
 			auth_type = connection?.auth_type ?? 'bearer';
 			key = connection?.key ?? '';
 
@@ -189,6 +192,30 @@
 					}}
 				>
 					<div class="px-1">
+						{#if !direct}
+							<div class="flex gap-2 mb-1.5">
+								<div class="flex w-full justify-between items-center">
+									<div class=" text-xs text-gray-500">{$i18n.t('Type')}</div>
+
+									<div class="">
+										<button
+											on:click={() => {
+												type = ['', 'openapi'].includes(type) ? 'mcp' : 'openapi';
+											}}
+											type="button"
+											class=" text-xs text-gray-700 dark:text-gray-300"
+										>
+											{#if ['', 'openapi'].includes(type)}
+												{$i18n.t('OpenAPI')}
+											{:else if type === 'mcp'}
+												{$i18n.t('MCP')}
+											{/if}
+										</button>
+									</div>
+								</div>
+							</div>
+						{/if}
+
 						<div class="flex gap-2">
 							<div class="flex flex-col w-full">
 								<div class="flex justify-between mb-0.5">
@@ -243,30 +270,36 @@
 									</Tooltip>
 								</div>
 
-								<div class="flex-1 flex items-center">
-									<label for="url-or-path" class="sr-only"
-										>{$i18n.t('openapi.json URL or Path')}</label
-									>
-									<input
-										class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
-										type="text"
-										id="url-or-path"
-										bind:value={path}
-										placeholder={$i18n.t('openapi.json URL or Path')}
-										autocomplete="off"
-										required
-									/>
-								</div>
+								{#if ['', 'openapi'].includes(type)}
+									<div class="flex-1 flex items-center">
+										<label for="url-or-path" class="sr-only"
+											>{$i18n.t('openapi.json URL or Path')}</label
+										>
+										<input
+											class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											type="text"
+											id="url-or-path"
+											bind:value={path}
+											placeholder={$i18n.t('openapi.json URL or Path')}
+											autocomplete="off"
+											required
+										/>
+									</div>
+								{/if}
 							</div>
 						</div>
 
-						<div
-							class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
-						>
-							{$i18n.t(`WebUI will make requests to "{{url}}"`, {
-								url: path.includes('://') ? path : `${url}${path.startsWith('/') ? '' : '/'}${path}`
-							})}
-						</div>
+						{#if ['', 'openapi'].includes(type)}
+							<div
+								class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+							>
+								{$i18n.t(`WebUI will make requests to "{{url}}"`, {
+									url: path.includes('://')
+										? path
+										: `${url}${path.startsWith('/') ? '' : '/'}${path}`
+								})}
+							</div>
+						{/if}
 
 						<div class="flex gap-2 mt-2">
 							<div class="flex flex-col w-full">
@@ -396,7 +429,7 @@
 							<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
 							<div class="my-2 -mx-2">
-								<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+								<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
 									<AccessControl bind:accessControl />
 								</div>
 							</div>

src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte

@@ -293,7 +293,7 @@
 						<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
 						<div class="my-2 -mx-2">
-							<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+							<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
 								<AccessControl bind:accessControl />
 							</div>
 						</div>

src/lib/components/chat/Settings/General.svelte

@@ -277,7 +277,7 @@
 		</div>
 
 		{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
-			<hr class="border-gray-50 dark:border-gray-850 my-3" />
+			<hr class="border-gray-50/50 dark:border-gray-850/50 my-3" />
 
 			<div>
 				<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
@@ -285,8 +285,8 @@
 					bind:value={system}
 					className={'w-full text-sm outline-hidden resize-vertical' +
 						($settings.highContrastMode
-							? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-850 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
-							: ' bg-white dark:text-gray-300 dark:bg-gray-900')}
+							? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
+							: '  dark:text-gray-300 ')}
 					rows="4"
 					placeholder={$i18n.t('Enter system prompt here')}
 				/>

src/lib/components/chat/SettingsModal.svelte

@@ -591,7 +591,7 @@
 				class="tabs flex flex-row overflow-x-auto gap-2.5 mx-3 md:pr-4 md:gap-1 md:flex-col flex-1 md:flex-none md:w-50 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
 			>
 				<div
-					class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-50 dark:bg-gray-850 my-1 mb-1.5"
+					class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-1 mb-1.5"
 					id="settings-search"
 				>
 					<div class="self-center rounded-l-xl bg-transparent">

src/lib/components/common/Modal.svelte

@@ -7,7 +7,7 @@
 	export let show = true;
 	export let size = 'md';
 	export let containerClassName = 'p-3';
-	export let className = 'bg-white dark:bg-gray-900 rounded-4xl';
+	export let className = 'bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-4xl';
 
 	let modalElement = null;
 	let mounted = false;

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

@@ -63,7 +63,7 @@
 	{/if}
 
 	<button
-		class=" cursor-pointer self-center p-0.5 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
+		class=" cursor-pointer self-center p-0.5 flex h-fit items-center rounded-full transition border dark:border-gray-600 border-dashed"
 		type="button"
 		aria-label={$i18n.t('Add Tag')}
 		on:click={() => {
@@ -76,7 +76,7 @@
 				viewBox="0 0 16 16"
 				aria-hidden="true"
 				fill="currentColor"
-				class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform"
+				class="size-2.5 {showTagInput ? 'rotate-45' : ''} transition-all transform"
 			>
 				<path
 					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"

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

@@ -0,0 +1,33 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	import Tooltip from '../Tooltip.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	export let tag;
+	export let onDelete = () => {};
+</script>
+
+{#if tag}
+	<Tooltip content={tag.name}>
+		<button
+			aria-label={$i18n.t('Remove this tag from list')}
+			class="relative group/tags px-1.5 py-[0.5px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-lg bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
+			on:click={() => {
+				onDelete();
+			}}
+		>
+			<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
+				{tag.name}
+			</div>
+
+			<div class="hidden group-hover/tags:block transition">
+				<div class="rounded-full pl-[1px] backdrop-blur-sm h-full flex self-center cursor-pointer">
+					<XMark className="size-3" strokeWidth="2.5" />
+				</div>
+			</div>
+		</button>
+	</Tooltip>
+{/if}

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

@@ -2,34 +2,18 @@
 	import { createEventDispatcher } from 'svelte';
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
-	import Tooltip from '../Tooltip.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	import Badge from '../Badge.svelte';
+
+	import TagItem from './TagItem.svelte';
 	const dispatch = createEventDispatcher();
 
 	export let tags = [];
 </script>
 
 {#each tags as tag}
-	<Tooltip content={tag.name}>
-		<li
-			class="relative group/tags 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"
-		>
-			<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/tags: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"
-					aria-label={$i18n.t('Remove this tag from list')}
-				>
-					<XMark className="size-3" strokeWidth="2.5" />
-				</button>
-			</div>
-		</li>
-	</Tooltip>
+	<TagItem
+		{tag}
+		onDelete={() => {
+			dispatch('delete', tag.name);
+		}}
+	/>
 {/each}

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

@@ -125,7 +125,7 @@
 					<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
 					<div class="my-2 -mx-2">
-						<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+						<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
 							<AccessControl bind:accessControl />
 						</div>
 					</div>

src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte

@@ -112,7 +112,7 @@
 		</div>
 
 		<div class="mt-2">
-			<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+			<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
 				<AccessControl
 					bind:accessControl
 					accessRoles={['read', 'write']}

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -587,7 +587,7 @@
 					</div>
 
 					<div class="my-2">
-						<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg">
+						<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
 							<AccessControl
 								bind:accessControl
 								accessRoles={['read', 'write']}

src/lib/components/workspace/common/AccessControl.svelte

@@ -62,7 +62,7 @@
 
 <div class=" rounded-lg flex flex-col gap-2">
 	<div class="">
-		<div class=" text-sm font-semibold mb-1">{$i18n.t('Visibility')}</div>
+		<div class=" text-sm font-semibold mb-1.5">{$i18n.t('Visibility')}</div>
 
 		<div class="flex gap-2.5 items-center mb-1">
 			<div>