update api context

src/components/chat-view/AssistantMessageActions.tsx

@@ -2,6 +2,7 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { Check, CopyIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
+import { useSettings } from '../../contexts/SettingsContext'
 import { t } from '../../lang/helpers'
 import { ChatAssistantMessage } from '../../types/chat'
 import { calculateLLMCost } from '../../utils/price-calculator'
@@ -46,6 +47,7 @@ function CopyButton({ message }: { message: ChatAssistantMessage }) {
 
 function LLMResponesInfoButton({ message }: { message: ChatAssistantMessage }) {
   const [cost, setCost] = useState<number | null>(0);
+  const { settings } = useSettings();
 
   useEffect(() => {
     async function calculateCost() {
@@ -56,12 +58,13 @@ function LLMResponesInfoButton({ message }: { message: ChatAssistantMessage }) {
       const calculatedCost = await calculateLLMCost({
         model: message.metadata.model,
         usage: message.metadata.usage,
+        settings: settings,
       });
       setCost(calculatedCost);
     }
 
     calculateCost();
-  }, [message]);	
+  }, [message, settings]);	
 
   return (
     <Tooltip.Provider delayDuration={0}>

src/components/chat-view/chat-input/ModelSelect.tsx

@@ -151,7 +151,7 @@ export function ModelSelect() {
 		const fetchModels = async () => {
 			setIsLoading(true)
 			try {
-				const models = await GetProviderModelIds(modelProvider)
+				const models = await GetProviderModelIds(modelProvider, settings)
 				setModelIds(models)
 			} catch (error) {
 				console.error('Failed to fetch provider models:', error)
@@ -162,7 +162,7 @@ export function ModelSelect() {
 		}
 
 		fetchModels()
-	}, [modelProvider])
+	}, [modelProvider, settings])
 
 	// Sync chat model id & chat model provider
 	useEffect(() => {

src/components/inline-edit/InlineEdit.tsx

@@ -83,7 +83,7 @@ const ControlArea: React.FC<ControlAreaProps> = ({
 	useEffect(() => {
 		const fetchModels = async () => {
 			try {
-				const models = await GetProviderModelIds(settings.chatModelProvider);
+				const models = await GetProviderModelIds(settings.chatModelProvider, settings);
 				setProviderModels(models);
 			} catch (err) {
 				const error = err as Error;

src/settings/components/ProviderModelsPicker.tsx

@@ -185,7 +185,7 @@ export const ComboBoxComponent: React.FC<ComboBoxComponentProps> = ({
 		};
 
 		fetchModelIds();
-	}, [modelProvider, isEmbedding]);
+	}, [modelProvider, isEmbedding, settings]);
 
 	const searchableItems = useMemo(() => {
 		return modelIds.map((id) => ({

src/utils/api.ts

@@ -143,6 +143,7 @@ export const infioDefaultModelInfo: ModelInfo = {
 let infioModelsCache: Record<string, ModelInfo> | null = null;
 
 async function fetchInfioModels(apiKey?: string): Promise<Record<string, ModelInfo>> {
+	console.log("fetchInfioModels apiKey", apiKey)
 	if (infioModelsCache) {
 		return infioModelsCache;
 	}
@@ -1606,6 +1607,7 @@ export const GetProviderModels = async (provider: ApiProvider, settings?: InfioS
 	switch (provider) {
 		case ApiProvider.Infio: {
 			const apiKey = settings?.infioProvider?.apiKey
+			console.log("apiKey", apiKey)
 			return await fetchInfioModels(apiKey)
 		}
 		case ApiProvider.OpenRouter:
@@ -1640,6 +1642,8 @@ export const GetProviderModelsWithSettings = async (provider: ApiProvider, setti
 	switch (provider) {
 		case ApiProvider.Infio: {
 			const apiKey = settings?.infioProvider?.apiKey
+			console.log("apiKey", apiKey)
+			console.log("settings", settings)
 			return await fetchInfioModels(apiKey)
 		}
 		case ApiProvider.OpenRouter:

src/utils/price-calculator.ts

@@ -1,5 +1,6 @@
 import { LLMModel } from '../types/llm/model'
 import { ResponseUsage } from '../types/llm/response'
+import { InfioSettings } from '../types/settings'
 
 import { GetProviderModels } from './api'
 
@@ -7,11 +8,13 @@ import { GetProviderModels } from './api'
 export const calculateLLMCost = async ({
 	model,
 	usage,
+	settings,
 }: {
 	model: LLMModel
 	usage: ResponseUsage
+	settings?: InfioSettings
 }): Promise<number | null> => {
-	const providerModels = await GetProviderModels(model.provider)
+	const providerModels = await GetProviderModels(model.provider, settings)
 	if (!providerModels) {
 		return null
 	}