diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 993912f240..c7813372fa 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -247,10 +247,10 @@ export const ChatTextArea = forwardRef( const allModes = useMemo(() => getAllModes(customModes), [customModes]) - // Memoized check for whether the input has content + // Memoized check for whether the input has content (text or images) const hasInputContent = useMemo(() => { - return inputValue.trim().length > 0 - }, [inputValue]) + return inputValue.trim().length > 0 || selectedImages.length > 0 + }, [inputValue, selectedImages]) const queryItems = useMemo(() => { return [ diff --git a/webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx b/webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx index 23c365ab59..af7704aa1b 100644 --- a/webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx +++ b/webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx @@ -1057,4 +1057,86 @@ describe("ChatTextArea", () => { expect(apiConfigDropdown).toHaveAttribute("disabled") }) }) + + describe("send button visibility", () => { + it("should show send button when there are images but no text", () => { + const { container } = render( + , + ) + + // Find the send button by looking for the button with SendHorizontal icon + const buttons = container.querySelectorAll("button") + const sendButton = Array.from(buttons).find( + (button) => button.querySelector(".lucide-send-horizontal") !== null, + ) + + expect(sendButton).toBeInTheDocument() + + // Check that the button is visible (has opacity-100 class when content exists) + expect(sendButton).toHaveClass("opacity-100") + expect(sendButton).toHaveClass("pointer-events-auto") + expect(sendButton).not.toHaveClass("opacity-0") + expect(sendButton).not.toHaveClass("pointer-events-none") + }) + + it("should hide send button when there is no text and no images", () => { + const { container } = render() + + // Find the send button by looking for the button with SendHorizontal icon + const buttons = container.querySelectorAll("button") + const sendButton = Array.from(buttons).find( + (button) => button.querySelector(".lucide-send-horizontal") !== null, + ) + + expect(sendButton).toBeInTheDocument() + + // Check that the button is hidden (has opacity-0 class when no content) + expect(sendButton).toHaveClass("opacity-0") + expect(sendButton).toHaveClass("pointer-events-none") + expect(sendButton).not.toHaveClass("opacity-100") + expect(sendButton).not.toHaveClass("pointer-events-auto") + }) + + it("should show send button when there is text but no images", () => { + const { container } = render() + + // Find the send button by looking for the button with SendHorizontal icon + const buttons = container.querySelectorAll("button") + const sendButton = Array.from(buttons).find( + (button) => button.querySelector(".lucide-send-horizontal") !== null, + ) + + expect(sendButton).toBeInTheDocument() + + // Check that the button is visible + expect(sendButton).toHaveClass("opacity-100") + expect(sendButton).toHaveClass("pointer-events-auto") + }) + + it("should show send button when there is both text and images", () => { + const { container } = render( + , + ) + + // Find the send button by looking for the button with SendHorizontal icon + const buttons = container.querySelectorAll("button") + const sendButton = Array.from(buttons).find( + (button) => button.querySelector(".lucide-send-horizontal") !== null, + ) + + expect(sendButton).toBeInTheDocument() + + // Check that the button is visible + expect(sendButton).toHaveClass("opacity-100") + expect(sendButton).toHaveClass("pointer-events-auto") + }) + }) })