feat(app): align custom agent selector with v2 (#36832)

packages/app/src/components/prompt-input.tsx

@@ -2203,10 +2203,7 @@ type ComposerModelControlState = {
 
 function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
   return (
-    <div class="relative">
+    <div>
-      <div class="pointer-events-none absolute left-2 top-1/2 z-10 flex size-4 -translate-y-1/2 items-center justify-center text-v2-icon-icon-muted">
-        <Icon name="sliders" size="small" />
-      </div>
       <TooltipV2
         placement="top"
         gutter={4}
@@ -2217,17 +2214,32 @@ function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
           </>
         }
       >
-        <Select
+        <MenuV2 gutter={6} modal={false} placement="top-start">
+          <MenuV2.Trigger
+            as={ButtonV2}
+            data-action="prompt-agent"
+            variant="ghost-muted"
             size="normal"
-          options={props.state.options}
+            class="max-w-[175px] justify-start ![font-weight:440]"
-          current={props.state.current}
+            style={props.state.style}
-          onSelect={props.state.onSelect}
+          >
-          class="max-w-[175px] justify-start text-v2-text-text-faint [&_[data-component=icon]]:text-v2-icon-icon-muted"
+            <span class="truncate capitalize leading-5">{props.state.current}</span>
-          valueClass="truncate pl-5 text-[13px] font-[440] leading-5 text-v2-text-text-faint"
+            <span class="-ml-0.5 -mr-1 flex shrink-0">
-          triggerStyle={props.state.style}
+              <Icon name="chevron-down" size="small" />
-          triggerProps={{ "data-action": "prompt-agent" }}
+            </span>
-          variant="ghost"
+          </MenuV2.Trigger>
-        />
+          <MenuV2.Portal>
+            <MenuV2.Content>
+              <MenuV2.RadioGroup value={props.state.current} onChange={props.state.onSelect}>
+                {props.state.options.map((value) => (
+                  <MenuV2.RadioItem value={value} class="capitalize">
+                    {value}
+                  </MenuV2.RadioItem>
+                ))}
+              </MenuV2.RadioGroup>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
       </TooltipV2>
     </div>
   )