remove REGION_TO_URL duplication and fix event handler

Author: PrasangAPrajapati

packages/types/src/providers/ibm-watsonx.ts

@@ -1,5 +1,15 @@
 import type { ModelInfo } from "../model.js"
 
+export const REGION_TO_URL: Record<string, string> = {
+	"us-south": "https://us-south.ml.cloud.ibm.com",
+	"eu-de": "https://eu-de.ml.cloud.ibm.com",
+	"eu-gb": "https://eu-gb.ml.cloud.ibm.com",
+	"jp-tok": "https://jp-tok.ml.cloud.ibm.com",
+	"au-syd": "https://au-syd.ml.cloud.ibm.com",
+	"ca-tor": "https://ca-tor.ml.cloud.ibm.com",
+	"ap-south-1": "https://ap-south-1.aws.wxai.ibm.com",
+}
+
 export type WatsonxAIModelId = keyof typeof watsonxModels
 export const watsonxDefaultModelId = "ibm/granite-3-3-8b-instruct"
 

src/api/providers/fetchers/ibm-watsonx.ts

@@ -1,4 +1,4 @@
-import { ModelInfo } from "@roo-code/types"
+import { ModelInfo, REGION_TO_URL } from "@roo-code/types"
 import { IamAuthenticator, CloudPakForDataAuthenticator, UserOptions } from "ibm-cloud-sdk-core"
 import { WatsonXAI } from "@ibm-cloud/watsonx-ai"
 import WatsonxAiMlVml_v1 from "@ibm-cloud/watsonx-ai/dist/watsonx-ai-ml/vml_v1.js"
@@ -148,16 +148,6 @@ export async function getWatsonxModels(
 	}
 }
 
-export const REGION_TO_URL: Record<string, string> = {
-	"us-south": "https://us-south.ml.cloud.ibm.com",
-	"eu-de": "https://eu-de.ml.cloud.ibm.com",
-	"eu-gb": "https://eu-gb.ml.cloud.ibm.com",
-	"jp-tok": "https://jp-tok.ml.cloud.ibm.com",
-	"au-syd": "https://au-syd.ml.cloud.ibm.com",
-	"ca-tor": "https://ca-tor.ml.cloud.ibm.com",
-	"ap-south-1": "https://ap-south-1.aws.wxai.ibm.com",
-	custom: "",
-}
 /**
  * Returns the base URL for IBM Watsonx services corresponding to the given region.
  *

webview-ui/src/components/settings/providers/ibm-watsonx.tsx

@@ -1,6 +1,12 @@
 import { useCallback, useState, useEffect, useRef } from "react"
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import { ModelInfo, watsonxDefaultModelId, type OrganizationAllowList, type ProviderSettings } from "@roo-code/types"
+import {
+	ModelInfo,
+	watsonxDefaultModelId,
+	REGION_TO_URL,
+	type OrganizationAllowList,
+	type ProviderSettings,
+} from "@roo-code/types"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 
 import { vscode } from "@src/utils/vscode"
@@ -20,17 +26,6 @@ const WATSONX_REGIONS = {
 	"ap-south-1": "Mumbai",
 }
 
-const REGION_TO_URL = {
-	"us-south": "https://us-south.ml.cloud.ibm.com",
-	"eu-de": "https://eu-de.ml.cloud.ibm.com",
-	"eu-gb": "https://eu-gb.ml.cloud.ibm.com",
-	"jp-tok": "https://jp-tok.ml.cloud.ibm.com",
-	"au-syd": "https://au-syd.ml.cloud.ibm.com",
-	"ca-tor": "https://ca-tor.ml.cloud.ibm.com",
-	"ap-south-1": "https://ap-south-1.aws.wxai.ibm.com",
-	custom: "",
-}
-
 type WatsonxAIProps = {
 	apiConfiguration: ProviderSettings
 	setApiConfigurationField: (field: keyof ProviderSettings, value: ProviderSettings[keyof ProviderSettings]) => void
@@ -51,6 +46,48 @@ export const WatsonxAI = ({
 	const watsonxErrorJustReceived = useRef(false)
 	const initialModelFetchAttempted = useRef(false)
 
+	const refreshStatusRef = useRef(refreshStatus)
+	const refreshErrorRef = useRef(refreshError)
+	const tRef = useRef(t)
+
+	useEffect(() => {
+		refreshStatusRef.current = refreshStatus
+	}, [refreshStatus])
+	useEffect(() => {
+		refreshErrorRef.current = refreshError
+	}, [refreshError])
+	useEffect(() => {
+		tRef.current = t
+	}, [t])
+
+	useEffect(() => {
+		const handleMessage = (event: MessageEvent<ExtensionMessage>) => {
+			const message = event.data
+			if (message.type === "singleRouterModelFetchResponse" && !message.success) {
+				const providerName = message.values?.provider as RouterName
+				if (providerName === "ibm-watsonx") {
+					watsonxErrorJustReceived.current = true
+					setRefreshStatus("error")
+					setRefreshError(message.error)
+				}
+			} else if (message.type === "watsonxModels") {
+				setWatsonxModels(message.watsonxModels ?? {})
+				if (refreshStatusRef.current === "loading") {
+					if (!watsonxErrorJustReceived.current) {
+						setRefreshStatus("success")
+					} else {
+						watsonxErrorJustReceived.current = false
+					}
+				}
+			}
+		}
+
+		window.addEventListener("message", handleMessage)
+		return () => {
+			window.removeEventListener("message", handleMessage)
+		}
+	}, [])
+
 	useEffect(() => {
 		if (!apiConfiguration.watsonxPlatform) {
 			setApiConfigurationField("watsonxPlatform", "ibmCloud")
@@ -109,34 +146,6 @@ export const WatsonxAI = ({
 		[setApiConfigurationField],
 	)
 
-	useEffect(() => {
-		const handleMessage = (event: MessageEvent<ExtensionMessage>) => {
-			const message = event.data
-			if (message.type === "singleRouterModelFetchResponse" && !message.success) {
-				const providerName = message.values?.provider as RouterName
-				if (providerName === "ibm-watsonx") {
-					watsonxErrorJustReceived.current = true
-					setRefreshStatus("error")
-					setRefreshError(message.error)
-				}
-			} else if (message.type === "watsonxModels") {
-				setWatsonxModels(message.watsonxModels ?? {})
-				if (refreshStatus === "loading") {
-					if (!watsonxErrorJustReceived.current) {
-						setRefreshStatus("success")
-					} else {
-						watsonxErrorJustReceived.current = false
-					}
-				}
-			}
-		}
-
-		window.addEventListener("message", handleMessage)
-		return () => {
-			window.removeEventListener("message", handleMessage)
-		}
-	}, [refreshStatus, refreshError, t])
-
 	const handleInputChange = useCallback(
 		<E,>(field: keyof ProviderSettings, transform: (event: E) => any = inputEventTransform) =>
 			(event: E | Event) => {
@@ -212,7 +221,7 @@ export const WatsonxAI = ({
 				authType: authType,
 				username: username,
 				password: password,
-				region: selectedRegion,
+				region: platform === "ibmCloud" ? selectedRegion : undefined,
 			},
 		})
 	}, [apiConfiguration, setRefreshStatus, setRefreshError, t, selectedRegion])
@@ -381,7 +390,7 @@ export const WatsonxAI = ({
 					) : (
 						<div className="w-full mb-1">
 							<VSCodeTextField
-				value={apiConfiguration.watsonxPassword || ""}
+								value={apiConfiguration.watsonxPassword || ""}
 								type="password"
 								onInput={handleInputChange("watsonxPassword")}
 								placeholder={t("settings:providers.watsonx.password")}