remove env vars from bottom menu model setting (#1584)

ui/desktop/src/components/BottomMenu.tsx

@@ -118,10 +118,7 @@ export default function BottomMenu({
     };
   }, [isGooseModeMenuOpen]);
 
-  let envModelProvider = null;
+  // Removed the envModelProvider code that was checking for environment variables
-  if (window.electron.getConfig().GOOSE_MODEL && window.electron.getConfig().GOOSE_PROVIDER) {
-    envModelProvider = `${window.electron.getConfig().GOOSE_MODEL}  - ${window.electron.getConfig().GOOSE_PROVIDER}`;
-  }
 
   return (
     <div className="flex justify-between items-center text-textSubtle relative bg-bgSubtle border-t border-borderSubtle text-xs pl-4 h-[40px] pb-1 align-middle">
@@ -167,9 +164,7 @@ export default function BottomMenu({
           className="flex items-center cursor-pointer"
           onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
         >
-          <span>
+          <span>{(currentModel?.alias ?? currentModel?.name) || 'Select Model'}</span>
-            {envModelProvider || (currentModel?.alias ?? currentModel?.name) || 'Select Model'}
-          </span>
           {isModelMenuOpen ? (
             <ChevronDown className="w-4 h-4 ml-1" />
           ) : (

ui/desktop/src/utils/providerUtils.ts

@@ -1,7 +1,8 @@
 import { getApiUrl, getSecretKey } from '../config';
 import { loadAndAddStoredExtensions } from '../extensions';
-import { GOOSE_PROVIDER } from '../env_vars';
+import { GOOSE_PROVIDER, GOOSE_MODEL } from '../env_vars';
 import { Model } from '../components/settings/models/ModelContext';
+import { gooseModels } from '../components/settings/models/GooseModels';
 
 export function getStoredProvider(config: any): string | null {
   return config.GOOSE_PROVIDER || localStorage.getItem(GOOSE_PROVIDER);
@@ -31,28 +32,6 @@ export interface Provider {
   requiredKeys: string[]; // List of required keys
 }
 
-export async function getProvidersList(): Promise<Provider[]> {
-  const response = await fetch(getApiUrl('/agent/providers'), {
-    method: 'GET',
-  });
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch providers: ${response.statusText}`);
-  }
-
-  const data = await response.json();
-  console.log('Raw API Response:', data); // Log the raw response
-
-  // Format the response into an array of providers
-  return data.map((item: any) => ({
-    id: item.id, // Root-level ID
-    name: item.details?.name || 'Unknown Provider', // Nested name in details
-    description: item.details?.description || 'No description available.', // Nested description
-    models: item.details?.models || [], // Nested models array
-    requiredKeys: item.details?.required_keys || [], // Nested required keys array
-  }));
-}
-
 const addAgent = async (provider: string, model: string) => {
   const response = await fetch(getApiUrl('/agent'), {
     method: 'POST',
@@ -92,6 +71,10 @@ export const initializeSystem = async (provider: string, model: string) => {
     console.log('initializing agent with provider', provider, 'model', model);
     await addAgent(provider.toLowerCase().replace(/ /g, '_'), model);
 
+    // Sync the model state with React
+    const syncedModel = syncModelWithAgent(provider, model);
+    console.log('Model synced with React state:', syncedModel);
+
     // Extend the system prompt with desktop-specific information
     const response = await fetch(getApiUrl('/agent/prompt'), {
       method: 'POST',
@@ -116,3 +99,43 @@ export const initializeSystem = async (provider: string, model: string) => {
     throw error;
   }
 };
+
+// This function ensures the agent initialization values and React model state stay in sync
+const syncModelWithAgent = (provider: string, modelName: string): Model | null => {
+  console.log('Syncing model state with agent:', { provider, modelName });
+
+  // First, try to find a matching model in our predefined list
+  let matchingModel = gooseModels.find(
+    (m) => m.name === modelName && m.provider.toLowerCase() === provider.toLowerCase()
+  );
+
+  // If no match by exact name and provider, try just by provider
+  if (!matchingModel) {
+    matchingModel = gooseModels.find((m) => m.provider.toLowerCase() === provider.toLowerCase());
+
+    if (matchingModel) {
+      console.log('Found model by provider only:', matchingModel);
+    }
+  }
+
+  // If still no match, create a custom model
+  if (!matchingModel) {
+    console.log('No matching model found, creating custom model');
+    matchingModel = {
+      id: Date.now(),
+      name: modelName,
+      provider: provider,
+      alias: `${provider} - ${modelName}`,
+    };
+  }
+
+  // Update localStorage with the model
+  if (matchingModel) {
+    localStorage.setItem(GOOSE_PROVIDER, matchingModel.provider.toLowerCase());
+    localStorage.setItem(GOOSE_MODEL, JSON.stringify(matchingModel));
+
+    return matchingModel;
+  }
+
+  return null;
+};