fix: prompt agent button style

3 files changed, 33 insertions, 1 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 072ef0bdd..e05b6646b 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1583,6 +1583,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     onSelect={local.agent.set}
                     class="capitalize"
                     variant="ghost"
+                    triggerVariant="button"
                   />
                 </TooltipKeybind>
                 <Show
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index c5ad67e33..73e2b2a6d 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -41,6 +41,34 @@
       box-shadow: none;
     }
   }
+
+  &[data-trigger-style="button"] {
+    [data-slot="select-select-trigger"] {
+      padding: 0 6px;
+      min-width: auto;
+      height: 24px;
+      justify-content: center;
+      gap: 6px;
+
+      [data-slot="select-select-trigger-icon"] {
+        width: auto;
+        height: auto;
+        background-color: transparent;
+        border-radius: 0;
+      }
+
+      &[data-slot="select-select-trigger"]:hover:not(:disabled) {
+        background-color: var(--surface-raised-base-hover);
+        box-shadow: none;
+      }
+
+      &[data-slot="select-select-trigger"][data-expanded],
+      &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) {
+        background-color: var(--surface-raised-base-active);
+        box-shadow: none;
+      }
+    }
+  }
 }
 
 [data-component="select-content"] {
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 9fb3a9016..f7d212848 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -17,6 +17,7 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "
   classList?: ComponentProps<"div">["classList"]
   children?: (item: T | undefined) => JSX.Element
   triggerStyle?: JSX.CSSProperties
+  triggerVariant?: "default" | "button"
 }
 
 export function Select<T>(props: SelectProps<T> & ButtonProps) {
@@ -34,6 +35,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
     "onOpenChange",
     "children",
     "triggerStyle",
+    "triggerVariant",
   ])
 
   const state = {
@@ -81,6 +83,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
     <Kobalte<T, { category: string; options: T[] }>
       {...others}
       data-component="select"
+      data-trigger-style={local.triggerVariant}
       placement="bottom-end"
       gutter={4}
       value={local.current}
@@ -145,7 +148,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
           }}
         </Kobalte.Value>
         <Kobalte.Icon data-slot="select-select-trigger-icon">
-          <Icon name="selector" size="small" />
+          <Icon name={local.triggerVariant === "button" ? "chevron-down" : "selector"} size="small" />
         </Kobalte.Icon>
       </Kobalte.Trigger>
       <Kobalte.Portal>