From c9103a29ffc94fba69ab20e221257ab0cd7d3a39 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 04:26:18 -0400
Subject: [PATCH] refac

---
 src/lib/components/chat/Suggestions.svelte | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index 20bcc4fbcb..bd17e5588a 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Fuse from 'fuse.js';
 	import Bolt from '$lib/components/icons/Bolt.svelte';
-	import { onMount, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import { settings, WEBUI_NAME } from '$lib/stores';
 	import { WEBUI_VERSION } from '$lib/constants';
 
@@ -10,7 +10,7 @@
 	export let suggestionPrompts = [];
 	export let className = '';
 	export let inputValue = '';
-	export let onSelect = (e) => {};
+	export let onSelect = () => {};
 
 	let sortedPrompts = [];
 
@@ -81,36 +81,40 @@
 	{/if}
 </div>
 
-<div class="h-40 w-full">
+<div class="h-36 w-full">
 	{#if filteredPrompts.length > 0}
-		<div role="list" class="max-h-40 overflow-auto scrollbar-none items-start {className}">
+		<div role="list" class="max-h-36 overflow-auto scrollbar-none items-start {className}">
 			{#each filteredPrompts as prompt, idx (prompt.id || `${prompt.content}-${idx}`)}
 				<!-- svelte-ignore a11y-no-interactive-element-to-noninteractive-role -->
 				<button
 					role="listitem"
 					class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
-				       px-3 py-2 rounded-xl bg-transparent hover:bg-black/5
-				       dark:hover:bg-white/5 transition group"
-					style="animation-delay: {idx * 60}ms"
+				       px-2.5 py-1.5 rounded-lg bg-transparent transition-colors
+				       hover:text-gray-950 dark:hover:text-white group"
+					style="animation-delay: {idx * 45}ms"
 					on:click={() => onSelect({ type: 'prompt', data: prompt.content })}
 				>
-					<div class="flex flex-col text-left">
+					<div class="flex flex-col text-left leading-snug">
 						{#if prompt.title && prompt.title[0] !== ''}
 							<div
-								class="font-normal dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+								class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
 							>
 								{prompt.title[0]}
 							</div>
-							<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
+							<div
+								class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
+							>
 								{prompt.title[1]}
 							</div>
 						{:else}
 							<div
-								class="font-normal dark:text-gray-300 dark:group-hover:text-gray-200 transition line-clamp-1"
+								class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
 							>
 								{prompt.content}
 							</div>
-							<div class="text-xs text-gray-600 dark:text-gray-400 font-normal line-clamp-1">
+							<div
+								class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
+							>
 								{$i18n.t('Prompt')}
 							</div>
 						{/if}
@@ -126,7 +130,7 @@
 	@keyframes fadeInUp {
 		0% {
 			opacity: 0;
-			transform: translateY(20px);
+			transform: translateY(6px);
 		}
 		100% {
 			opacity: 1;