From 0bc5441d725827e512a9bbb8f9f5997cafc3c6c1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 31 Mar 2025 17:58:48 -0700
Subject: [PATCH] refac: styling

---
 .../chat/ModelSelector/Selector.svelte        | 328 +++++++++---------
 1 file changed, 163 insertions(+), 165 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 47f06f8f5..4b8eb39ca 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -374,7 +374,7 @@
 			{/if}
 
 			<div class="px-3 mb-2 max-h-64 overflow-y-auto scrollbar-hidden group relative">
-				{#if tags}
+				{#if tags && items.filter((item) => !(item.model?.info?.meta?.hidden ?? false)).length > 0}
 					<div
 						class=" flex w-full sticky top-0 z-10 bg-white dark:bg-gray-850 overflow-x-auto scrollbar-none"
 						on:wheel={(e) => {
@@ -457,177 +457,175 @@
 					</div>
 				{/if}
 
-				{#each filteredItems as item, index}
-					{#if !(item.model?.info?.meta?.hidden ?? false)}
-						<button
-							aria-label="model-item"
-							class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===
-							selectedModelIdx
-								? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
-								: ''}"
-							data-arrow-selected={index === selectedModelIdx}
-							data-value={item.value}
-							on:click={() => {
-								value = item.value;
-								selectedModelIdx = index;
+				{#each filteredItems.filter((item) => !(item.model?.info?.meta?.hidden ?? false)) as item, index}
+					<button
+						aria-label="model-item"
+						class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===
+						selectedModelIdx
+							? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
+							: ''}"
+						data-arrow-selected={index === selectedModelIdx}
+						data-value={item.value}
+						on:click={() => {
+							value = item.value;
+							selectedModelIdx = index;
 
-								show = false;
-							}}
-						>
-							<div class="flex flex-col">
-								{#if $mobile && (item?.model?.tags ?? []).length > 0}
-									<div class="flex gap-0.5 self-start h-full mb-1.5 -translate-x-1">
-										{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
-											<div
-												class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
+							show = false;
+						}}
+					>
+						<div class="flex flex-col">
+							{#if $mobile && (item?.model?.tags ?? []).length > 0}
+								<div class="flex gap-0.5 self-start h-full mb-1.5 -translate-x-1">
+									{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
+										<div
+											class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
+										>
+											{tag.name}
+										</div>
+									{/each}
+								</div>
+							{/if}
+							<div class="flex items-center gap-2">
+								<div class="flex items-center min-w-fit">
+									<div class="line-clamp-1">
+										<div class="flex items-center min-w-fit">
+											<Tooltip
+												content={$user?.role === 'admin' ? (item?.value ?? '') : ''}
+												placement="top-start"
 											>
-												{tag.name}
-											</div>
+												<img
+													src={item.model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+													alt="Model"
+													class="rounded-full size-5 flex items-center mr-2"
+												/>
+
+												<div class="flex items-center line-clamp-1">
+													<div class="line-clamp-1">
+														{item.label}
+													</div>
+
+													{#if item.model.owned_by === 'ollama' && (item.model.ollama?.details?.parameter_size ?? '') !== ''}
+														<div class="flex ml-1 items-center translate-y-[0.5px]">
+															<Tooltip
+																content={`${
+																	item.model.ollama?.details?.quantization_level
+																		? item.model.ollama?.details?.quantization_level + ' '
+																		: ''
+																}${
+																	item.model.ollama?.size
+																		? `(${(item.model.ollama?.size / 1024 ** 3).toFixed(1)}GB)`
+																		: ''
+																}`}
+																className="self-end"
+															>
+																<span
+																	class=" text-xs font-medium text-gray-600 dark:text-gray-400 line-clamp-1"
+																	>{item.model.ollama?.details?.parameter_size ?? ''}</span
+																>
+															</Tooltip>
+														</div>
+													{/if}
+												</div>
+											</Tooltip>
+										</div>
+									</div>
+								</div>
+
+								<!-- {JSON.stringify(item.info)} -->
+
+								{#if item.model?.direct}
+									<Tooltip content={`${'Direct'}`}>
+										<div class="translate-y-[1px]">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 16 16"
+												fill="currentColor"
+												class="size-3"
+											>
+												<path
+													fill-rule="evenodd"
+													d="M2 2.75A.75.75 0 0 1 2.75 2C8.963 2 14 7.037 14 13.25a.75.75 0 0 1-1.5 0c0-5.385-4.365-9.75-9.75-9.75A.75.75 0 0 1 2 2.75Zm0 4.5a.75.75 0 0 1 .75-.75 6.75 6.75 0 0 1 6.75 6.75.75.75 0 0 1-1.5 0C8 10.35 5.65 8 2.75 8A.75.75 0 0 1 2 7.25ZM3.5 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</div>
+									</Tooltip>
+								{:else if item.model.owned_by === 'openai'}
+									<Tooltip content={`${'External'}`}>
+										<div class="translate-y-[1px]">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 16 16"
+												fill="currentColor"
+												class="size-3"
+											>
+												<path
+													fill-rule="evenodd"
+													d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
+													clip-rule="evenodd"
+												/>
+												<path
+													fill-rule="evenodd"
+													d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</div>
+									</Tooltip>
+								{/if}
+
+								{#if item.model?.info?.meta?.description}
+									<Tooltip
+										content={`${marked.parse(
+											sanitizeResponseContent(item.model?.info?.meta?.description).replaceAll(
+												'\n',
+												'<br>'
+											)
+										)}`}
+									>
+										<div class=" translate-y-[1px]">
+											<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="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>
+									</Tooltip>
+								{/if}
+
+								{#if !$mobile && (item?.model?.tags ?? []).length > 0}
+									<div
+										class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
+									>
+										{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
+											<Tooltip content={tag.name} className="flex-shrink-0">
+												<div
+													class=" text-xs font-bold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
+												>
+													{tag.name}
+												</div>
+											</Tooltip>
 										{/each}
 									</div>
 								{/if}
-								<div class="flex items-center gap-2">
-									<div class="flex items-center min-w-fit">
-										<div class="line-clamp-1">
-											<div class="flex items-center min-w-fit">
-												<Tooltip
-													content={$user?.role === 'admin' ? (item?.value ?? '') : ''}
-													placement="top-start"
-												>
-													<img
-														src={item.model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
-														alt="Model"
-														class="rounded-full size-5 flex items-center mr-2"
-													/>
-
-													<div class="flex items-center line-clamp-1">
-														<div class="line-clamp-1">
-															{item.label}
-														</div>
-
-														{#if item.model.owned_by === 'ollama' && (item.model.ollama?.details?.parameter_size ?? '') !== ''}
-															<div class="flex ml-1 items-center translate-y-[0.5px]">
-																<Tooltip
-																	content={`${
-																		item.model.ollama?.details?.quantization_level
-																			? item.model.ollama?.details?.quantization_level + ' '
-																			: ''
-																	}${
-																		item.model.ollama?.size
-																			? `(${(item.model.ollama?.size / 1024 ** 3).toFixed(1)}GB)`
-																			: ''
-																	}`}
-																	className="self-end"
-																>
-																	<span
-																		class=" text-xs font-medium text-gray-600 dark:text-gray-400 line-clamp-1"
-																		>{item.model.ollama?.details?.parameter_size ?? ''}</span
-																	>
-																</Tooltip>
-															</div>
-														{/if}
-													</div>
-												</Tooltip>
-											</div>
-										</div>
-									</div>
-
-									<!-- {JSON.stringify(item.info)} -->
-
-									{#if item.model?.direct}
-										<Tooltip content={`${'Direct'}`}>
-											<div class="translate-y-[1px]">
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="size-3"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M2 2.75A.75.75 0 0 1 2.75 2C8.963 2 14 7.037 14 13.25a.75.75 0 0 1-1.5 0c0-5.385-4.365-9.75-9.75-9.75A.75.75 0 0 1 2 2.75Zm0 4.5a.75.75 0 0 1 .75-.75 6.75 6.75 0 0 1 6.75 6.75.75.75 0 0 1-1.5 0C8 10.35 5.65 8 2.75 8A.75.75 0 0 1 2 7.25ZM3.5 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</div>
-										</Tooltip>
-									{:else if item.model.owned_by === 'openai'}
-										<Tooltip content={`${'External'}`}>
-											<div class="translate-y-[1px]">
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													viewBox="0 0 16 16"
-													fill="currentColor"
-													class="size-3"
-												>
-													<path
-														fill-rule="evenodd"
-														d="M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z"
-														clip-rule="evenodd"
-													/>
-													<path
-														fill-rule="evenodd"
-														d="M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z"
-														clip-rule="evenodd"
-													/>
-												</svg>
-											</div>
-										</Tooltip>
-									{/if}
-
-									{#if item.model?.info?.meta?.description}
-										<Tooltip
-											content={`${marked.parse(
-												sanitizeResponseContent(item.model?.info?.meta?.description).replaceAll(
-													'\n',
-													'<br>'
-												)
-											)}`}
-										>
-											<div class=" translate-y-[1px]">
-												<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="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>
-										</Tooltip>
-									{/if}
-
-									{#if !$mobile && (item?.model?.tags ?? []).length > 0}
-										<div
-											class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
-										>
-											{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
-												<Tooltip content={tag.name} className="flex-shrink-0">
-													<div
-														class=" text-xs font-bold px-1 rounded-sm uppercase bg-gray-500/20 text-gray-700 dark:text-gray-200"
-													>
-														{tag.name}
-													</div>
-												</Tooltip>
-											{/each}
-										</div>
-									{/if}
-								</div>
 							</div>
+						</div>
 
-							{#if value === item.value}
-								<div class="ml-auto pl-2 pr-2 md:pr-0">
-									<Check />
-								</div>
-							{/if}
-						</button>
-					{/if}
+						{#if value === item.value}
+							<div class="ml-auto pl-2 pr-2 md:pr-0">
+								<Check />
+							</div>
+						{/if}
+					</button>
 				{:else}
 					<div>
 						<div class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-100">