From d182c857b335ca4ac89b92a365bf001276804541 Mon Sep 17 00:00:00 2001
From: Nestor Qin <imba.qxy@gmail.com>
Date: Tue, 10 Dec 2024 00:38:28 -0500
Subject: [PATCH] feat: highlight selected model families

---
 app/components/model-select.module.scss | 5 +++++
 app/components/model-select.tsx         | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/model-select.module.scss b/app/components/model-select.module.scss
index 1a39520b..331c6a37 100644
--- a/app/components/model-select.module.scss
+++ b/app/components/model-select.module.scss
@@ -55,6 +55,11 @@ input.input[type=text] {
             }
         }
     }
+
+    .selected-model-family {
+        border-color: var(--primary);
+        background-color: var(--second);
+    }
 }
 
 .model-icon {
diff --git a/app/components/model-select.tsx b/app/components/model-select.tsx
index 2bd46412..4c4caf6d 100644
--- a/app/components/model-select.tsx
+++ b/app/components/model-select.tsx
@@ -233,7 +233,7 @@ const ModelSelect: React.FC<ModelSearchProps> = ({
                     {Icon ? <Icon /> : <Cpu />}
                   </div>
                 }
-                className={style["model-family-button"]}
+                className={`${style["model-family-button"]}${selectedFamilies.includes(key) ? " " + style["selected-model-family"] : ""}`}
               />
             ))}
           </div>