Skip to content

Commit 50e6778

Browse files
thecodacusthecodacus
authored
Merge pull request #816 from thecodacus/env-file-fix
fix: fixed model not loading/working, even after baseUrl set in .env file
2 parents 90c9c9c + 3fba4f0 commit 50e6778

File tree

11 files changed

+325
-116
lines changed

11 files changed

+325
-116
lines changed

‎app/components/chat/BaseChat.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
119119

120120
useEffect(() => {
121121
// Load API keys from cookies on component mount
122+
123+
let parsedApiKeys: Record<string, string> | undefined = {};
124+
122125
try {
123126
const storedApiKeys = Cookies.get('apiKeys');
124127

@@ -127,6 +130,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
127130

128131
if (typeof parsedKeys === 'object' && parsedKeys !== null) {
129132
setApiKeys(parsedKeys);
133+
parsedApiKeys = parsedKeys;
130134
}
131135
}
132136
} catch (error) {
@@ -155,7 +159,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
155159
Cookies.remove('providers');
156160
}
157161

158-
initializeModelList(providerSettings).then((modelList) => {
162+
initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
159163
setModelList(modelList);
160164
});
161165

‎app/components/settings/debug/DebugTab.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
22
import { useSettings } from '~/lib/hooks/useSettings';
33
import commit from '~/commit.json';
44
import { toast } from 'react-toastify';
5+
import { providerBaseUrlEnvKeys } from '~/utils/constants';
56

67
interface ProviderStatus {
78
name: string;
@@ -236,7 +237,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
236237
}
237238

238239
// Try different endpoints based on provider
239-
const checkUrls = [`${url}/api/health`, `${url}/v1/models`];
240+
const checkUrls = [`${url}/api/health`, url.endsWith('v1') ? `${url}/models` : `${url}/v1/models`];
240241
console.log(`[Debug] Checking additional endpoints:`, checkUrls);
241242

242243
const results = await Promise.all(
@@ -321,14 +322,16 @@ export default function DebugTab() {
321322
.filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
322323
.map(async ([, provider]) => {
323324
const envVarName =
324-
provider.name.toLowerCase() === 'ollama'
325-
? 'OLLAMA_API_BASE_URL'
326-
: provider.name.toLowerCase() === 'lmstudio'
327-
? 'LMSTUDIO_API_BASE_URL'
328-
: `REACT_APP_${provider.name.toUpperCase()}_URL`;
325+
providerBaseUrlEnvKeys[provider.name].baseUrlKey || `REACT_APP_${provider.name.toUpperCase()}_URL`;
329326

330327
// Access environment variables through import.meta.env
331-
const url = import.meta.env[envVarName] || provider.settings.baseUrl || null; // Ensure baseUrl is used
328+
let settingsUrl = provider.settings.baseUrl;
329+
330+
if (settingsUrl && settingsUrl.trim().length === 0) {
331+
settingsUrl = undefined;
332+
}
333+
334+
const url = settingsUrl || import.meta.env[envVarName] || null; // Ensure baseUrl is used
332335
console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
333336

334337
const status = await checkProviderStatus(url, provider.name);

‎app/components/settings/providers/ProvidersTab.tsx‎

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { logStore } from '~/lib/stores/logs';
77

88
// Import a default fallback icon
99
import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
10+
import { providerBaseUrlEnvKeys } from '~/utils/constants';
1011

1112
export default function ProvidersTab() {
1213
const { providers, updateProviderSettings, isLocalModel } = useSettings();
@@ -47,60 +48,77 @@ export default function ProvidersTab() {
4748
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"
4849
/>
4950
</div>
50-
{filteredProviders.map((provider) => (
51-
<div
52-
key={provider.name}
53-
className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
54-
>
55-
<div className="flex items-center justify-between mb-2">
56-
<div className="flex items-center gap-2">
57-
<img
58-
src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
59-
onError={(e) => {
60-
// Fallback to default icon on error
61-
e.currentTarget.src = DefaultIcon;
51+
{filteredProviders.map((provider) => {
52+
const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
53+
const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
54+
55+
return (
56+
<div
57+
key={provider.name}
58+
className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
59+
>
60+
<div className="flex items-center justify-between mb-2">
61+
<div className="flex items-center gap-2">
62+
<img
63+
src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
64+
onError={(e) => {
65+
// Fallback to default icon on error
66+
e.currentTarget.src = DefaultIcon;
67+
}}
68+
alt={`${provider.name} icon`}
69+
className="w-6 h-6 dark:invert"
70+
/>
71+
<span className="text-bolt-elements-textPrimary">{provider.name}</span>
72+
</div>
73+
<Switch
74+
className="ml-auto"
75+
checked={provider.settings.enabled}
76+
onCheckedChange={(enabled) => {
77+
updateProviderSettings(provider.name, { ...provider.settings, enabled });
78+
79+
if (enabled) {
80+
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
81+
} else {
82+
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
83+
}
6284
}}
63-
alt={`${provider.name} icon`}
64-
className="w-6 h-6 dark:invert"
6585
/>
66-
<span className="text-bolt-elements-textPrimary">{provider.name}</span>
6786
</div>
68-
<Switch
69-
className="ml-auto"
70-
checked={provider.settings.enabled}
71-
onCheckedChange={(enabled) => {
72-
updateProviderSettings(provider.name, { ...provider.settings, enabled });
87+
{/* Base URL input for configurable providers */}
88+
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
89+
<div className="mt-2">
90+
{envBaseUrl && (
91+
<label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
92+
Set On (.env) : {envBaseUrl}
93+
</label>
94+
)}
95+
<label className="block text-sm text-bolt-elements-textSecondary mb-2">
96+
{envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
97+
</label>
98+
<input
99+
type="text"
100+
value={provider.settings.baseUrl || ''}
101+
onChange={(e) => {
102+
let newBaseUrl: string | undefined = e.target.value;
103+
104+
if (newBaseUrl && newBaseUrl.trim().length === 0) {
105+
newBaseUrl = undefined;
106+
}
73107

74-
if (enabled) {
75-
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
76-
} else {
77-
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
78-
}
79-
}}
80-
/>
108+
updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
109+
logStore.logProvider(`Base URL updated for ${provider.name}`, {
110+
provider: provider.name,
111+
baseUrl: newBaseUrl,
112+
});
113+
}}
114+
placeholder={`Enter ${provider.name} base URL`}
115+
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"
116+
/>
117+
</div>
118+
)}
81119
</div>
82-
{/* Base URL input for configurable providers */}
83-
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
84-
<div className="mt-2">
85-
<label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
86-
<input
87-
type="text"
88-
value={provider.settings.baseUrl || ''}
89-
onChange={(e) => {
90-
const newBaseUrl = e.target.value;
91-
updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
92-
logStore.logProvider(`Base URL updated for ${provider.name}`, {
93-
provider: provider.name,
94-
baseUrl: newBaseUrl,
95-
});
96-
}}
97-
placeholder={`Enter ${provider.name} base URL`}
98-
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"
99-
/>
100-
</div>
101-
)}
102-
</div>
103-
))}
120+
);
121+
})}
104122
</div>
105123
);
106124
}

‎app/entry.server.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default async function handleRequest(
1414
remixContext: EntryContext,
1515
_loadContext: AppLoadContext,
1616
) {
17-
await initializeModelList();
17+
await initializeModelList({});
1818

1919
const readable = await renderToReadableStream(<RemixServer context={remixContext} url={request.url} />, {
2020
signal: request.signal,

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

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
* Preventing TS checks with files presented in the video for a better presentation.
44
*/
55
import { env } from 'node:process';
6+
import type { IProviderSetting } from '~/types/model';
7+
import { getProviderBaseUrlAndKey } from '~/utils/constants';
68

79
export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Record<string, string>) {
810
/**
@@ -15,7 +17,20 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
1517
return userApiKeys[provider];
1618
}
1719

18-
// Fall back to environment variables
20+
const { apiKey } = getProviderBaseUrlAndKey({
21+
provider,
22+
apiKeys: userApiKeys,
23+
providerSettings: undefined,
24+
serverEnv: cloudflareEnv as any,
25+
defaultBaseUrlKey: '',
26+
defaultApiTokenKey: '',
27+
});
28+
29+
if (apiKey) {
30+
return apiKey;
31+
}
32+
33+
// Fall back to hardcoded environment variables names
1934
switch (provider) {
2035
case 'Anthropic':
2136
return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;
@@ -50,16 +65,43 @@ export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Re
5065
}
5166
}
5267

53-
export function getBaseURL(cloudflareEnv: Env, provider: string) {
68+
export function getBaseURL(cloudflareEnv: Env, provider: string, providerSettings?: Record<string, IProviderSetting>) {
69+
const { baseUrl } = getProviderBaseUrlAndKey({
70+
provider,
71+
apiKeys: {},
72+
providerSettings,
73+
serverEnv: cloudflareEnv as any,
74+
defaultBaseUrlKey: '',
75+
defaultApiTokenKey: '',
76+
});
77+
78+
if (baseUrl) {
79+
return baseUrl;
80+
}
81+
82+
let settingBaseUrl = providerSettings?.[provider].baseUrl;
83+
84+
if (settingBaseUrl && settingBaseUrl.length == 0) {
85+
settingBaseUrl = undefined;
86+
}
87+
5488
switch (provider) {
5589
case 'Together':
56-
return env.TOGETHER_API_BASE_URL || cloudflareEnv.TOGETHER_API_BASE_URL || 'https://api.together.xyz/v1';
90+
return (
91+
settingBaseUrl ||
92+
env.TOGETHER_API_BASE_URL ||
93+
cloudflareEnv.TOGETHER_API_BASE_URL ||
94+
'https://api.together.xyz/v1'
95+
);
5796
case 'OpenAILike':
58-
return env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
97+
return settingBaseUrl || env.OPENAI_LIKE_API_BASE_URL || cloudflareEnv.OPENAI_LIKE_API_BASE_URL;
5998
case 'LMStudio':
60-
return env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234';
99+
return (
100+
settingBaseUrl || env.LMSTUDIO_API_BASE_URL || cloudflareEnv.LMSTUDIO_API_BASE_URL || 'http://localhost:1234'
101+
);
61102
case 'Ollama': {
62-
let baseUrl = env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';
103+
let baseUrl =
104+
settingBaseUrl || env.OLLAMA_API_BASE_URL || cloudflareEnv.OLLAMA_API_BASE_URL || 'http://localhost:11434';
63105

64106
if (env.RUNNING_IN_DOCKER === 'true') {
65107
baseUrl = baseUrl.replace('localhost', 'host.docker.internal');

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,17 +140,20 @@ export function getPerplexityModel(apiKey: OptionalApiKey, model: string) {
140140
export function getModel(
141141
provider: string,
142142
model: string,
143-
env: Env,
143+
serverEnv: Env,
144144
apiKeys?: Record<string, string>,
145145
providerSettings?: Record<string, IProviderSetting>,
146146
) {
147147
/*
148148
* let apiKey; // Declare first
149149
* let baseURL;
150150
*/
151+
// console.log({provider,model});
151152

152-
const apiKey = getAPIKey(env, provider, apiKeys); // Then assign
153-
const baseURL = providerSettings?.[provider].baseUrl || getBaseURL(env, provider);
153+
const apiKey = getAPIKey(serverEnv, provider, apiKeys); // Then assign
154+
const baseURL = getBaseURL(serverEnv, provider, providerSettings);
155+
156+
// console.log({apiKey,baseURL});
154157

155158
switch (provider) {
156159
case 'Anthropic':

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,13 @@ export async function streamText(props: {
151151
providerSettings?: Record<string, IProviderSetting>;
152152
promptId?: string;
153153
}) {
154-
const { messages, env, options, apiKeys, files, providerSettings, promptId } = props;
154+
const { messages, env: serverEnv, options, apiKeys, files, providerSettings, promptId } = props;
155+
156+
// console.log({serverEnv});
157+
155158
let currentModel = DEFAULT_MODEL;
156159
let currentProvider = DEFAULT_PROVIDER.name;
157-
const MODEL_LIST = await getModelList(apiKeys || {}, providerSettings);
160+
const MODEL_LIST = await getModelList({ apiKeys, providerSettings, serverEnv: serverEnv as any });
158161
const processedMessages = messages.map((message) => {
159162
if (message.role === 'user') {
160163
const { model, provider, content } = extractPropertiesFromMessage(message);
@@ -196,7 +199,7 @@ export async function streamText(props: {
196199
}
197200

198201
return _streamText({
199-
model: getModel(currentProvider, currentModel, env, apiKeys, providerSettings) as any,
202+
model: getModel(currentProvider, currentModel, serverEnv, apiKeys, providerSettings) as any,
200203
system: systemPrompt,
201204
maxTokens: dynamicMaxTokens,
202205
messages: convertToCoreMessages(processedMessages as any),

‎app/lib/hooks/useEditChatDescription.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export function useEditChatDescription({
9292
}
9393

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

‎app/types/model.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import type { ModelInfo } from '~/utils/types';
33
export type ProviderInfo = {
44
staticModels: ModelInfo[];
55
name: string;
6-
getDynamicModels?: (apiKeys?: Record<string, string>, providerSettings?: IProviderSetting) => Promise<ModelInfo[]>;
6+
getDynamicModels?: (
7+
providerName: string,
8+
apiKeys?: Record<string, string>,
9+
providerSettings?: IProviderSetting,
10+
serverEnv?: Record<string, string>,
11+
) => Promise<ModelInfo[]>;
712
getApiKeyLink?: string;
813
labelForGetApiKey?: string;
914
icon?: string;

0 commit comments

Comments
 (0)