ux: Makes text area buttons appear only when there's text (#7987)

This commit is contained in:
Bruno Bergher 2025-09-15 16:01:25 +01:00 committed by GitHub
parent d54ff8a604
commit 9d33c109c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -246,6 +246,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
const allModes = useMemo(() => getAllModes(customModes), [customModes])
// Memoized check for whether the input has content
const hasInputContent = useMemo(() => {
return inputValue.trim().length > 0
}, [inputValue])
const queryItems = useMemo(() => {
return [
{ type: ContextMenuOptionType.Problems, value: "problems" },
@ -1088,12 +1093,16 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
"text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-1000",
"cursor-pointer",
hasInputContent
? "opacity-50 hover:opacity-100 delay-750 pointer-events-auto"
: "opacity-0 pointer-events-none duration-200 delay-0",
hasInputContent &&
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
)}>
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
</button>
@ -1131,12 +1140,16 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-150",
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-200",
hasInputContent
? "opacity-100 hover:opacity-100 pointer-events-auto"
: "opacity-0 pointer-events-none",
hasInputContent &&
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
"cursor-pointer",
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
hasInputContent && "cursor-pointer",
)}>
<SendHorizontal className="w-4 h-4" />
</button>