scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-10-07 02:58:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove chevrons from chat buttons (#7970)

Browse source
This commit is contained in:
Matt Rubens 2025-09-14 15:02:42 -04:00 • committed by GitHub
parent b309a6ad8b
commit c79cb297a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 10 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webview-ui/src/components/chat/ApiConfigSelector.tsx
View file

@ -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,7 +148,7 @@ 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
@ -157,12 +156,6 @@ export const ApiConfigSelector = ({
: "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>

4
webview-ui/src/components/chat/AutoApproveDropdown.tsx
View file

@ -167,8 +167,8 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:
: "opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
triggerClassName,
)}>
<CheckCheck className="size-3" />
<span className="truncate">
<CheckCheck className="size-3 flex-shrink-0" />
<span className="truncate min-w-0">
{enabledCount === totalCount
? t("chat:autoApprove.triggerLabelAll")
: t("chat:autoApprove.triggerLabel", { count: enabledCount })}

10
webview-ui/src/components/chat/ChatTextArea.tsx
View file

@ -1100,7 +1100,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
</StandardTooltip>
</div>
<div className="absolute bottom-2 right-2 z-30">
<div className="absolute bottom-2 right-2 z-30 flex items-center gap-1">
{isEditMode && (
<StandardTooltip content={t("chat:cancel.title")}>
<button
@ -1175,12 +1175,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
)}
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 min-w-40 overflow-clip flex-1">
<div className="flex items-center gap-2 min-w-0 overflow-clip flex-1">
<ModeSelector
value={mode}
title={t("chat:selectMode")}
onChange={handleModeChange}
triggerClassName="min-w-20 text-ellipsis overflow-hidden"
triggerClassName="text-ellipsis overflow-hidden flex-shrink-0"
modeShortcutText={modeShortcutText}
customModes={customModes}
customModePrompts={customModePrompts}
@ -1191,12 +1191,12 @@ 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-[28px] text-ellipsis overflow-hidden flex-shrink"
listApiConfigMeta={listApiConfigMeta || []}
pinnedApiConfigs={pinnedApiConfigs}
togglePinnedApiConfig={togglePinnedApiConfig}
/>
<AutoApproveDropdown triggerClassName="min-w-20 text-ellipsis overflow-hidden" />
<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
</div>
<div className="flex flex-shrink-0 items-center gap-0.5">
{isTtsPlaying && (

10
webview-ui/src/components/chat/ModeSelector.tsx
View file

@ -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>

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

@ -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} />)