fix: fixed model not loading, even after baseUrl set in .env file

app/components/chat/BaseChat.tsx

@@ -119,6 +119,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
     useEffect(() => {
       // Load API keys from cookies on component mount
+
+      let parsedApiKeys: Record<string, string> | undefined = {};
+
       try {
         const storedApiKeys = Cookies.get('apiKeys');
 
@@ -127,6 +130,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
           if (typeof parsedKeys === 'object' && parsedKeys !== null) {
             setApiKeys(parsedKeys);
+            parsedApiKeys = parsedKeys;
           }
         }
       } catch (error) {
@@ -155,7 +159,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         Cookies.remove('providers');
       }
 
-      initializeModelList(providerSettings).then((modelList) => {
+      initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
         setModelList(modelList);
       });
 

app/components/settings/debug/DebugTab.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
 import commit from '~/commit.json';
 import { toast } from 'react-toastify';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
 
 interface ProviderStatus {
   name: string;
@@ -236,7 +237,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
     }
 
     // Try different endpoints based on provider
-    const checkUrls = [`${url}/api/health`, `${url}/v1/models`];
+    const checkUrls = [`${url}/api/health`, url.endsWith('v1') ? `${url}/models` : `${url}/v1/models`];
     console.log(`[Debug] Checking additional endpoints:`, checkUrls);
 
     const results = await Promise.all(
@@ -321,14 +322,16 @@ export default function DebugTab() {
           .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
           .map(async ([, provider]) => {
             const envVarName =
-              provider.name.toLowerCase() === 'ollama'
-                ? 'OLLAMA_API_BASE_URL'
-                : provider.name.toLowerCase() === 'lmstudio'
-                  ? 'LMSTUDIO_API_BASE_URL'
-                  : `REACT_APP_${provider.name.toUpperCase()}_URL`;
+              providerBaseUrlEnvKeys[provider.name].baseUrlKey || `REACT_APP_${provider.name.toUpperCase()}_URL`;
 
             // Access environment variables through import.meta.env
-            const url = import.meta.env[envVarName] || provider.settings.baseUrl || null; // Ensure baseUrl is used
+            let settingsUrl = provider.settings.baseUrl;
+
+            if (settingsUrl && settingsUrl.trim().length === 0) {
+              settingsUrl = undefined;
+            }
+
+            const url = settingsUrl || import.meta.env[envVarName] || null; // Ensure baseUrl is used
             console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
 
             const status = await checkProviderStatus(url, provider.name);

app/components/settings/providers/ProvidersTab.tsx

@@ -7,6 +7,7 @@ import { logStore } from '~/lib/stores/logs';
 
 // Import a default fallback icon
 import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
 
 export default function ProvidersTab() {
   const { providers, updateProviderSettings, isLocalModel } = useSettings();
@@ -47,60 +48,77 @@ export default function ProvidersTab() {
           className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
         />
       </div>
-      {filteredProviders.map((provider) => (
-        <div
-          key={provider.name}
-          className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
-        >
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex items-center gap-2">
-              <img
-                src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
-                onError={(e) => {
-                  // Fallback to default icon on error
-                  e.currentTarget.src = DefaultIcon;
+      {filteredProviders.map((provider) => {
+        const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
+        const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
+
+        return (
+          <div
+            key={provider.name}
+            className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <img
+                  src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
+                  onError={(e) => {
+                    // Fallback to default icon on error
+                    e.currentTarget.src = DefaultIcon;
+                  }}
+                  alt={`${provider.name} icon`}
+                  className="w-6 h-6 dark:invert"
+                />
+                <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+              </div>
+              <Switch
+                className="ml-auto"
+                checked={provider.settings.enabled}
+                onCheckedChange={(enabled) => {
+                  updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+                  if (enabled) {
+                    logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+                  } else {
+                    logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+                  }
                 }}
-                alt={`${provider.name} icon`}
-                className="w-6 h-6 dark:invert"
               />
-              <span className="text-bolt-elements-textPrimary">{provider.name}</span>
             </div>
-            <Switch
-              className="ml-auto"
-              checked={provider.settings.enabled}
-              onCheckedChange={(enabled) => {
-                updateProviderSettings(provider.name, { ...provider.settings, enabled });
+            {/* Base URL input for configurable providers */}
+            {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
+              <div className="mt-2">
+                {envBaseUrl && (
+                  <label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
+                    Set On (.env) : {envBaseUrl}
+                  </label>
+                )}
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+                  {envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
+                </label>
+                <input
+                  type="text"
+                  value={provider.settings.baseUrl || ''}
+                  onChange={(e) => {
+                    let newBaseUrl: string | undefined = e.target.value;
+
+                    if (newBaseUrl && newBaseUrl.trim().length === 0) {
+                      newBaseUrl = undefined;
+                    }
 
-                if (enabled) {
-                  logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
-                } else {
-                  logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
-                }
-              }}
-            />
+                    updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+                    logStore.logProvider(`Base URL updated for ${provider.name}`, {
+                      provider: provider.name,
+                      baseUrl: newBaseUrl,
+                    });
+                  }}
+                  placeholder={`Enter ${provider.name} base URL`}
+                  className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
+                />
+              </div>
+            )}
           </div>
-          {/* Base URL input for configurable providers */}
-          {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
-            <div className="mt-2">
-              <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
-              <input
-                type="text"
-                value={provider.settings.baseUrl || ''}
-                onChange={(e) => {
-                  const newBaseUrl = e.target.value;
-                  updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
-                  logStore.logProvider(`Base URL updated for ${provider.name}`, {
-                    provider: provider.name,
-                    baseUrl: newBaseUrl,
-                  });
-                }}
-                placeholder={`Enter ${provider.name} base URL`}
-                className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-              />
-            </div>
-          )}
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }

app/entry.server.tsx

@@ -14,7 +14,7 @@ export default async function handleRequest(
   remixContext: EntryContext,
   _loadContext: AppLoadContext,
 ) {
-  await initializeModelList();
+  await initializeModelList({});
 
   const readable = await renderToReadableStream(<RemixServer context={remixContext} url={request.url} />, {
     signal: request.signal,

app/lib/.server/llm/api-key.ts

@@ -3,6 +3,8 @@
  * Preventing TS checks with files presented in the video for a better presentation.
  */
 import { env } from 'node:process';
+import type { IProviderSetting } from '~/types/model';
+import { getProviderBaseUrlAndKey } from '~/utils/constants';
 
 export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Record<string, string>) {
   /**
@@ -15,7 +17,20 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
     return userApiKeys[provider];
   }
 
-  // Fall back to environment variables
+  const { apiKey } = getProviderBaseUrlAndKey({
+    provider,
+    apiKeys: userApiKeys,
+    providerSettings: undefined,
+    serverEnv: cloudflareEnv as any,
+    defaultBaseUrlKey: '',
+    defaultApiTokenKey: '',
+  });
+
+  if (apiKey) {
+    return apiKey;
+  }
+
+  // Fall back to hardcoded  environment variables names
   switch (provider) {
     case 'Anthropic':
       return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;
@@ -50,16 +65,43 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
   }
 }
 
-export function getBaseURL(cloudflareEnv: Env, provider: string) {
+export function getBaseURL(cloudflareEnv: Env, provider: string, providerSettings?: Record<string, IProviderSetting>) {
+  const { baseUrl } = getProviderBaseUrlAndKey({
+    provider,
+    apiKeys: {},
+    providerSettings,
+    serverEnv: cloudflareEnv as any,
+    defaultBaseUrlKey: '',
+    defaultApiTokenKey: '',
+  });
+
+  if (baseUrl) {
+    return baseUrl;
+  }
+
+  let settingBaseUrl = providerSettings?.[provider].baseUrl;
+
+  if (settingBaseUrl && settingBaseUrl.length == 0) {
+    settingBaseUrl = undefined;
+  }
+
   switch (provider) {
     case 'Together':
-      return env.TOGETHER_API_BASE_URL || cloudflareEnv.TOGETHER_API_BASE_URL || 'https://api.together.xyz/v1';
+      return (
+        settingBaseUrl ||
+        env.TOGETHER_API_BASE_URL ||
+        cloudflareEnv.TOGETHER_API_BASE_URL ||
+        'https://api.together.xyz/v1'
+      );
     case 'OpenAILike':
-      return env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
+      return settingBaseUrl || env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
     case 'LMStudio':
-      return env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
+      return (
+        settingBaseUrl || env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234'
+      );
     case 'Ollama': {
-      let baseUrl = env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';
+      let baseUrl =
+        settingBaseUrl || env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';
 
       if (env.RUNNING_IN_DOCKER === 'true') {
         baseUrl = baseUrl.replace('localhost', 'host.docker.internal');

app/lib/.server/llm/model.ts

@@ -140,17 +140,20 @@ export function getPerplexityModel(apiKey: OptionalApiKey, model: string) {
 export function getModel(
   provider: string,
   model: string,
-  env: Env,
+  serverEnv: Env,
   apiKeys?: Record<string, string>,
   providerSettings?: Record<string, IProviderSetting>,
 ) {
   /*
    * let apiKey; // Declare first
    * let baseURL;
    */
+  // console.log({provider,model});
 
-  const apiKey = getAPIKey(env, provider, apiKeys); // Then assign
-  const baseURL = providerSettings?.[provider].baseUrl || getBaseURL(env, provider);
+  const apiKey = getAPIKey(serverEnv, provider, apiKeys); // Then assign
+  const baseURL = getBaseURL(serverEnv, provider, providerSettings);
+
+  // console.log({apiKey,baseURL});
 
   switch (provider) {
     case 'Anthropic':

app/lib/.server/llm/stream-text.ts

@@ -151,10 +151,13 @@ export async function streamText(props: {
   providerSettings?: Record<string, IProviderSetting>;
   promptId?: string;
 }) {
-  const { messages, env, options, apiKeys, files, providerSettings, promptId } = props;
+  const { messages, env: serverEnv, options, apiKeys, files, providerSettings, promptId } = props;
+
+  // console.log({serverEnv});
+
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER.name;
-  const MODEL_LIST = await getModelList(apiKeys || {}, providerSettings);
+  const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: serverEnv as any });
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
       const { model, provider, content } = extractPropertiesFromMessage(message);
@@ -196,7 +199,7 @@ export async function streamText(props: {
   }
 
   return _streamText({
-    model: getModel(currentProvider, currentModel, env, apiKeys, providerSettings) as any,
+    model: getModel(currentProvider, currentModel, serverEnv, apiKeys, providerSettings) as any,
     system: systemPrompt,
     maxTokens: dynamicMaxTokens,
     messages: convertToCoreMessages(processedMessages as any),

app/lib/hooks/useEditChatDescription.ts

@@ -92,6 +92,7 @@ export function useEditChatDescription({
     }
 
     const lengthValid = trimmedDesc.length > 0 && trimmedDesc.length <= 100;
+
     // Allow letters, numbers, spaces, and common punctuation but exclude characters that could cause issues
     const characterValid = /^[a-zA-Z0-9\s\-_.,!?()[\]{}'"]+$/.test(trimmedDesc);
 

app/types/model.ts

@@ -3,7 +3,12 @@ import type { ModelInfo } from '~/utils/types';
 export type ProviderInfo = {
   staticModels: ModelInfo[];
   name: string;
-  getDynamicModels?: (apiKeys?: Record<string, string>, providerSettings?: IProviderSetting) => Promise<ModelInfo[]>;
+  getDynamicModels?: (
+    providerName: string,
+    apiKeys?: Record<string, string>,
+    providerSettings?: IProviderSetting,
+    serverEnv?: Record<string, string>,
+  ) => Promise<ModelInfo[]>;
   getApiKeyLink?: string;
   labelForGetApiKey?: string;
   icon?: string;