diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index 3079e83ffad..654f2e1011e 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react" import { useEvent } from "react-use" import DynamicTextArea from "react-textarea-autosize" -import { VolumeX, Image, WandSparkles, SendHorizontal, MessageSquareX, ListEnd, Square } from "lucide-react" +import { VolumeX, Image, WandSparkles, SendHorizontal, X, ListEnd, Square } from "lucide-react" import type { ExtensionMessage } from "@roo-code/types" @@ -1148,30 +1148,7 @@ export const ChatTextArea = forwardRef( - - - - {isEditMode && ( + {isEditMode ? ( + + ) : ( + + )} @@ -1215,45 +1218,50 @@ export const ChatTextArea = forwardRef( )} - {/* Send/Stop button - morphs based on streaming state */} - {!isEditMode && ( - - - - )} + } + disabled={false} + onClick={isStreaming ? onStop : onSend} + className={cn( + "relative inline-flex items-center justify-center", + "bg-transparent border-none p-1.5", + "rounded-full min-w-[28px] min-h-[28px]", + "text-vscode-descriptionForeground hover:text-vscode-foreground", + "transition-all duration-200", + isEditMode || isStreaming || hasInputContent + ? "opacity-100 hover:opacity-100 pointer-events-auto" + : "opacity-0 pointer-events-none", + (isEditMode || isStreaming || 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", + (isEditMode || isStreaming || hasInputContent) && + "active:bg-[rgba(255,255,255,0.1)]", + (isEditMode || isStreaming || hasInputContent) && "cursor-pointer", + isStreaming && + "bg-vscode-button-background hover:bg-vscode-button-background", + )}> + {isStreaming ? ( + + ) : ( + + )} + + {!inputValue && (