Remove chevrons from chat buttons

Author: mrubens

webview-ui/src/components/chat/ApiConfigSelector.tsx

@@ -1,6 +1,5 @@
 import { useState, useMemo, useCallback } from "react"
 import { Fzf } from "fzf"
-import { ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useRooPortal } from "@/components/ui/hooks/useRooPortal"
@@ -149,20 +148,14 @@ export const ApiConfigSelector = ({
 					disabled={disabled}
 					data-testid="dropdown-trigger"
 					className={cn(
-						"min-w-0 inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"min-w-0 inline-flex items-center relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled
 							? "opacity-50 cursor-not-allowed"
 							: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
 						triggerClassName,
 					)}>
-					<ChevronUp
-						className={cn(
-							"pointer-events-none opacity-80 flex-shrink-0 size-3 transition-transform duration-200",
-							open && "rotate-180",
-						)}
-					/>
 					<span className="truncate">{displayName}</span>
 				</PopoverTrigger>
 			</StandardTooltip>

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -1191,7 +1191,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							disabled={selectApiConfigDisabled}
 							title={t("chat:selectApiConfig")}
 							onChange={handleApiConfigChange}
-							triggerClassName="min-w-16 text-ellipsis overflow-hidden"
+							triggerClassName="min-w-13 text-ellipsis overflow-hidden"
 							listApiConfigMeta={listApiConfigMeta || []}
 							pinnedApiConfigs={pinnedApiConfigs}
 							togglePinnedApiConfig={togglePinnedApiConfig}

webview-ui/src/components/chat/ModeSelector.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Fzf } from "fzf"
-import { ChevronUp, Check, X } from "lucide-react"
+import { Check, X } from "lucide-react"
 
 import { type ModeConfig, type CustomModePrompts, TelemetryEventName } from "@roo-code/types"
 
@@ -198,7 +198,7 @@ export const ModeSelector = ({
 					disabled={disabled}
 					data-testid="mode-selector-trigger"
 					className={cn(
-						"inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
+						"inline-flex items-center relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
 						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
 						disabled
@@ -209,12 +209,6 @@ export const ModeSelector = ({
 							? "bg-primary opacity-90 hover:bg-primary-hover text-vscode-button-foreground"
 							: null,
 					)}>
-					<ChevronUp
-						className={cn(
-							"pointer-events-none opacity-80 flex-shrink-0 size-3 transition-transform duration-200",
-							open && "rotate-180",
-						)}
-					/>
 					<span className="truncate">{selectedMode?.name || ""}</span>
 				</PopoverTrigger>
 			</StandardTooltip>

webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx

@@ -86,15 +86,6 @@ describe("ApiConfigSelector", () => {
 		expect(trigger).toHaveTextContent("Config 1")
 	})
 
-	test("renders with ChevronUp icon", () => {
-		render(<ApiConfigSelector {...defaultProps} />)
-
-		const trigger = screen.getByTestId("dropdown-trigger")
-		// Check for the icon by looking for the svg element (ChevronUp from lucide-react renders as svg)
-		const icon = trigger.querySelector("svg")
-		expect(icon).toBeInTheDocument()
-	})
-
 	test("handles disabled state correctly", () => {
 		render(<ApiConfigSelector {...defaultProps} disabled={true} />)