refac

src/lib/components/chat/MessageInput/Commands/Prompts.svelte

@@ -57,18 +57,19 @@
 	};
 </script>
 
-<div class="px-2 text-xs text-gray-500 py-1">
+<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
 	{$i18n.t('Prompts')}
 </div>
 
 {#if filteredItems.length > 0}
-	<div class=" space-y-0.5 scrollbar-hidden">
+	<div class="scrollbar-hidden">
 		{#each filteredItems as promptItem, promptIdx}
 			<Tooltip content={promptItem.name} placement="top-start">
 				<button
-					class=" px-3 py-1 rounded-xl w-full text-left {promptIdx === selectedPromptIdx
-						? '  bg-gray-50 dark:bg-gray-800 selected-command-option-button'
-						: ''} truncate"
+					class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {promptIdx ===
+					selectedPromptIdx
+						? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
+						: ''}"
 					type="button"
 					on:click={() => {
 						onSelect({ type: 'prompt', data: promptItem });
@@ -79,11 +80,11 @@
 					on:focus={() => {}}
 					data-selected={promptIdx === selectedPromptIdx}
 				>
-					<span class=" font-normal text-black dark:text-gray-100">
+					<span class="shrink-0 font-normal text-black dark:text-gray-100">
 						{promptItem.command}
 					</span>
 
-					<span class=" text-xs text-gray-600 dark:text-gray-100">
+					<span class="min-w-0 truncate text-xs text-gray-500 dark:text-gray-400">
 						{promptItem.name}
 					</span>
 				</button>