Added working

Author: nang-dev

src/shared/api.ts

@@ -792,9 +792,9 @@ export const unboundDefaultModelInfo: ModelInfo = {
 }
 // CHANGE AS NEEDED FOR TESTING
 // PROD:
-// export const PEARAI_URL = "https://stingray-app-gb2an.ondigitalocean.app/pearai-server-api2/integrations/cline"
+export const PEARAI_URL = "https://stingray-app-gb2an.ondigitalocean.app/pearai-server-api2/integrations/cline"
 // DEV:
-export const PEARAI_URL = "http://localhost:8000/integrations/cline"
+// export const PEARAI_URL = "http://localhost:8000/integrations/cline"
 
 // PearAI
 export type PearAiModelId = keyof typeof pearAiModels
@@ -812,7 +812,7 @@ export const pearAiDefaultModelInfo: ModelInfo = {
 		"DeepSeek-V3 achieves a significant breakthrough in inference speed over previous models. It tops the leaderboard among open-source models and rivals the most advanced closed-source models globally.",
 }
 
-export let pearAiModels = {
+export const pearAiModels = {
 	"pearai-model": {
 		maxTokens: 8192,
 		contextWindow: 64000,
@@ -826,27 +826,3 @@ export let pearAiModels = {
 			"DeepSeek-V3 achieves a significant breakthrough in inference speed over previous models. It tops the leaderboard among open-source models and rivals the most advanced closed-source models globally.",
 	},
 } as const satisfies Record<string, ModelInfo>
-
-// Initialize models with a Promise
-export let modelsInitialized: Promise<Record<string, ModelInfo>>
-
-modelsInitialized = (async () => {
-	try {
-		const res = await fetch(`${PEARAI_URL}/getPearAIAgentModels`)
-		if (!res.ok) throw new Error("Failed to fetch models")
-		const config = await res.json()
-
-		if (config.models && Object.keys(config.models).length > 0) {
-			console.log("Models successfully loaded from server")
-			console.dir(config.models)
-			pearAiModels = config.models
-			return config.models
-		} else {
-			console.log("Using default models (no models returned from server)")
-			return { [pearAiDefaultModelId]: pearAiDefaultModelInfo }
-		}
-	} catch (error) {
-		console.error("Error fetching PearAI models:", error)
-		return { [pearAiDefaultModelId]: pearAiDefaultModelInfo }
-	}
-})()

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

@@ -1,4 +1,4 @@
-import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
+import { Fragment, memo, useCallback, useEffect, useMemo, useState, useRef } from "react"
 import { useEvent, useDebounce, useInterval } from "react-use"
 import { Checkbox, Dropdown, Pane, type DropdownOption } from "vscrui"
 import {
@@ -40,6 +40,8 @@ import {
 	requestyDefaultModelInfo,
 	pearAiModels,
 	pearAiDefaultModelId,
+	pearAiDefaultModelInfo,
+	PEARAI_URL,
 } from "../../../../src/shared/api"
 import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 
@@ -52,17 +54,6 @@ import { validateApiConfiguration, validateModelId } from "@/utils/validate"
 import { ApiErrorMessage } from "./ApiErrorMessage"
 import { ThinkingBudget } from "./ThinkingBudget"
 
-const modelsByProvider: Record<string, Record<string, ModelInfo>> = {
-	anthropic: anthropicModels,
-	bedrock: bedrockModels,
-	vertex: vertexModels,
-	gemini: geminiModels,
-	"openai-native": openAiNativeModels,
-	deepseek: deepSeekModels,
-	mistral: mistralModels,
-	pearai: pearAiModels,
-}
-
 interface ApiOptionsProps {
 	uriScheme: string | undefined
 	apiConfiguration: ApiConfiguration
@@ -101,6 +92,9 @@ const ApiOptions = ({
 	})
 
 	const [openAiModels, setOpenAiModels] = useState<Record<string, ModelInfo> | null>(null)
+	const [pearAiModels, setPearAiModels] = useState<Record<string, ModelInfo>>({
+		[pearAiDefaultModelId]: pearAiDefaultModelInfo,
+	})
 
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
 	const [azureApiVersionSelected, setAzureApiVersionSelected] = useState(!!apiConfiguration?.azureApiVersion)
@@ -123,10 +117,16 @@ const ApiOptions = ({
 		[setApiConfigurationField],
 	)
 
-	const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(
-		() => normalizeApiConfiguration(apiConfiguration),
-		[apiConfiguration],
-	)
+	const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(() => {
+		const result = normalizeApiConfiguration(apiConfiguration)
+		if (result.selectedProvider === "pearai") {
+			return {
+				...result,
+				selectedModelInfo: pearAiModels[result.selectedModelId] || pearAiModels[pearAiDefaultModelId],
+			}
+		}
+		return result
+	}, [apiConfiguration, pearAiModels])
 
 	// Debounced refresh model updates, only executed 250ms after the user
 	// stops typing.
@@ -167,6 +167,28 @@ const ApiOptions = ({
 		],
 	)
 
+	// Fetch PearAI models when provider is selected
+	useEffect(() => {
+		if (selectedProvider === "pearai") {
+			const fetchPearAiModels = async () => {
+				try {
+					const res = await fetch(`${PEARAI_URL}/getPearAIAgentModels`)
+					if (!res.ok) throw new Error("Failed to fetch models")
+					const config = await res.json()
+
+					if (config.models && Object.keys(config.models).length > 0) {
+						console.log("Models successfully loaded from server")
+						setPearAiModels(config.models)
+					}
+				} catch (error) {
+					console.error("Error fetching PearAI models:", error)
+				}
+			}
+
+			fetchPearAiModels()
+		}
+	}, [selectedProvider, setPearAiModels])
+
 	useEffect(() => {
 		const apiValidationResult =
 			validateApiConfiguration(apiConfiguration) ||
@@ -227,6 +249,28 @@ const ApiOptions = ({
 
 	useEvent("message", onMessage)
 
+	const modelsByProvider = useMemo(
+		() => ({
+			anthropic: anthropicModels,
+			bedrock: bedrockModels,
+			vertex: vertexModels,
+			gemini: geminiModels,
+			"openai-native": openAiNativeModels,
+			deepseek: deepSeekModels,
+			mistral: mistralModels,
+			pearai: pearAiModels,
+			glama: glamaModels,
+			openrouter: openRouterModels,
+			unbound: unboundModels,
+			requesty: requestyModels,
+			openai: openAiModels || {},
+			ollama: {},
+			lmstudio: {},
+			"vscode-lm": {},
+		}),
+		[pearAiModels, glamaModels, openRouterModels, unboundModels, requestyModels, openAiModels],
+	)
+
 	const selectedProviderModelOptions: DropdownOption[] = useMemo(
 		() =>
 			modelsByProvider[selectedProvider]
@@ -238,7 +282,7 @@ const ApiOptions = ({
 						})),
 					]
 				: [],
-		[selectedProvider],
+		[selectedProvider, modelsByProvider],
 	)
 
 	return (