diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx index fa00fc11d1f..99c75df13d2 100644 --- a/webview-ui/src/components/chat/ChatTextArea.tsx +++ b/webview-ui/src/components/chat/ChatTextArea.tsx @@ -103,6 +103,7 @@ const ChatTextArea = forwardRef( const [intendedCursorPosition, setIntendedCursorPosition] = useState(null) const contextMenuContainerRef = useRef(null) const [isEnhancingPrompt, setIsEnhancingPrompt] = useState(false) + const [isFocused, setIsFocused] = useState(false) // Fetch git commits when Git is selected or when typing a hash useEffect(() => { @@ -379,6 +380,7 @@ const ChatTextArea = forwardRef( if (!isMouseDownOnMenu) { setShowContextMenu(false) } + setIsFocused(false) }, [isMouseDownOnMenu]) const handlePaste = useCallback( @@ -537,6 +539,10 @@ const ChatTextArea = forwardRef( backgroundColor: "var(--vscode-input-background)", margin: "10px 15px", padding: "8px", + outline: "none", + border: "1px solid", + borderColor: isFocused ? "var(--vscode-focusBorder)" : "transparent", + borderRadius: "2px", }} onDrop={async (e) => { e.preventDefault() @@ -627,7 +633,8 @@ const ChatTextArea = forwardRef( fontFamily: "var(--vscode-font-family)", fontSize: "var(--vscode-editor-font-size)", lineHeight: "var(--vscode-editor-line-height)", - padding: "8px", + padding: "2px", + paddingRight: "8px", marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0, zIndex: 1, }} @@ -647,6 +654,7 @@ const ChatTextArea = forwardRef( handleInputChange(e) updateHighlights() }} + onFocus={() => setIsFocused(true)} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} onBlur={handleBlur} @@ -660,11 +668,12 @@ const ChatTextArea = forwardRef( onHeightChange?.(height) }} placeholder={placeholderText} - minRows={2} - maxRows={20} + minRows={3} + maxRows={15} autoFocus={true} style={{ width: "100%", + outline: "none", boxSizing: "border-box", backgroundColor: "transparent", color: "var(--vscode-input-foreground)", @@ -676,11 +685,13 @@ const ChatTextArea = forwardRef( overflowX: "hidden", overflowY: "auto", border: "none", - padding: "8px", + padding: "2px", + paddingRight: "8px", marginBottom: thumbnailsHeight > 0 ? `${thumbnailsHeight + 16}px` : 0, cursor: textAreaDisabled ? "not-allowed" : undefined, flex: "0 1 auto", zIndex: 2, + scrollbarWidth: "none", }} onScroll={() => updateHighlights()} /> @@ -696,7 +707,7 @@ const ChatTextArea = forwardRef( bottom: "36px", left: "16px", zIndex: 2, - marginBottom: "8px", + marginBottom: "4px", }} /> )} @@ -707,7 +718,7 @@ const ChatTextArea = forwardRef( justifyContent: "space-between", alignItems: "center", marginTop: "auto", - paddingTop: "8px", + paddingTop: "2px", }}>
+