fix:Made the main inputbox focus styling better, added better spacing in openai compatible section

Author: psv2522

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -103,6 +103,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const [intendedCursorPosition, setIntendedCursorPosition] = useState<number | null>(null)
 		const contextMenuContainerRef = useRef<HTMLDivElement>(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<HTMLTextAreaElement, ChatTextAreaProps>(
 			if (!isMouseDownOnMenu) {
 				setShowContextMenu(false)
 			}
+			setIsFocused(false)
 		}, [isMouseDownOnMenu])
 
 		const handlePaste = useCallback(
@@ -537,6 +539,10 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					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()
@@ -647,6 +653,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							handleInputChange(e)
 							updateHighlights()
 						}}
+						onFocus={() => setIsFocused(true)}
 						onKeyDown={handleKeyDown}
 						onKeyUp={handleKeyUp}
 						onBlur={handleBlur}
@@ -665,6 +672,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						autoFocus={true}
 						style={{
 							width: "100%",
+							outline: "none",
 							boxSizing: "border-box",
 							backgroundColor: "transparent",
 							color: "var(--vscode-input-foreground)",

webview-ui/src/components/settings/ApiOptions.tsx

@@ -563,7 +563,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 			)}
 
 			{selectedProvider === "openai" && (
-				<div>
+				<div style={{ display: "flex", flexDirection: "column", rowGap: "5px" }}>
 					<VSCodeTextField
 						value={apiConfiguration?.openAiBaseUrl || ""}
 						style={{ width: "100%" }}