Update flare-ui/src/app/components/environment/environment.component.ts

flare-ui/src/app/components/environment/environment.component.ts

@@ -39,6 +39,19 @@ import { ApiService, Environment } from '../../services/api.service';
         </mat-card-header>
         
         <mat-card-content>
+          @if (isGPTMode()) {
+            <mat-card class="info-card">
+              <mat-card-content>
+                <mat-icon>info</mat-icon>
+                <div>
+                  <strong>{{ environment.work_mode === 'gpt4o' ? 'GPT-4o' : 'GPT-4o Mini' }} Mode</strong>
+                  <p>This mode uses OpenAI's API which has usage-based pricing.</p>
+                  <p>Approximate cost: {{ environment.work_mode === 'gpt4o' ? '$0.01-0.03' : '$0.001-0.003' }} per conversation turn.</p>
+                </div>
+              </mat-card-content>
+            </mat-card>
+          }
+
           <form (ngSubmit)="save()" #envForm="ngForm">
             <mat-form-field appearance="outline" class="full-width">
               <mat-label>Work Mode</mat-label>
@@ -94,22 +107,10 @@ import { ApiService, Environment } from '../../services/api.service';
               >
                 <mat-icon>wifi_tethering</mat-icon>
               </button>
-              <mat-hint *ngIf="isGPTMode()">Not required for GPT mode</mat-hint>
+              @if (isGPTMode()) {
+                <mat-hint>Not required for GPT mode</mat-hint>
+              }
             </mat-form-field>
-            
-            // GPT mode için bilgi alert'i ekle (mat-card-content içine, form'dan önce)
-            @if (isGPTMode()) {
-              <mat-card class="info-card">
-                <mat-card-content>
-                  <mat-icon>info</mat-icon>
-                  <div>
-                    <strong>{{ environment.work_mode === 'gpt4o' ? 'GPT-4o' : 'GPT-4o Mini' }} Mode</strong>
-                    <p>This mode uses OpenAI's API which has usage-based pricing.</p>
-                    <p>Approximate cost: {{ environment.work_mode === 'gpt4o' ? '$0.01-0.03' : '$0.001-0.003' }} per conversation turn.</p>
-                  </div>
-                </mat-card-content>
-              </mat-card>
-            }
 
             <mat-expansion-panel class="prompt-panel">
               <mat-expansion-panel-header>
@@ -118,7 +119,7 @@ import { ApiService, Environment } from '../../services/api.service';
                   Internal System Prompt
                 </mat-panel-title>
                 <mat-panel-description>
-                  Advanced configuration for Spark LLM
+                  Advanced configuration for LLM
                 </mat-panel-description>
               </mat-expansion-panel-header>
               
@@ -130,7 +131,7 @@ import { ApiService, Environment } from '../../services/api.service';
                   [(ngModel)]="environment.internal_prompt"
                   [disabled]="loading"
                   rows="10"
-                  placeholder="Enter internal system prompt for Spark..."
+                  placeholder="Enter internal system prompt..."
                 ></textarea>
                 <mat-hint>This prompt will be prepended to all project prompts</mat-hint>
               </mat-form-field>
@@ -156,7 +157,7 @@ import { ApiService, Environment } from '../../services/api.service';
                 mat-raised-button
                 type="button"
                 (click)="reloadFromSpark()"
-                [disabled]="loading"
+                [disabled]="loading || isGPTMode()"
               >
                 <mat-icon>refresh</mat-icon>
                 Reload from Spark
@@ -190,6 +191,27 @@ import { ApiService, Environment } from '../../services/api.service';
       }
     }
 
+    .info-card {
+      margin-bottom: 20px;
+      background-color: #e3f2fd;
+      
+      mat-card-content {
+        display: flex;
+        gap: 16px;
+        align-items: flex-start;
+        
+        mat-icon {
+          color: #1976d2;
+          margin-top: 4px;
+        }
+        
+        p {
+          margin: 4px 0;
+          font-size: 14px;
+        }
+      }
+    }
+
     .full-width {
       width: 100%;
       margin-bottom: 20px;
@@ -229,27 +251,6 @@ import { ApiService, Environment } from '../../services/api.service';
       }
     }
 
-    .info-card {
-      margin-bottom: 20px;
-      background-color: #e3f2fd;
-      
-      mat-card-content {
-        display: flex;
-        gap: 16px;
-        align-items: flex-start;
-        
-        mat-icon {
-          color: #1976d2;
-          margin-top: 4px;
-        }
-        
-        p {
-          margin: 4px 0;
-          font-size: 14px;
-        }
-      }
-    }
-
     ::ng-deep {
       .mat-mdc-form-field-icon-prefix {
         padding-right: 12px;
@@ -300,12 +301,6 @@ export class EnvironmentComponent implements OnInit {
     });
   }
 
-  onWorkModeChange() {
-    if (this.environment.work_mode === 'on-premise') {
-      this.environment.cloud_token = '';
-    }
-  }
-
   getTokenLabel(): string {
     switch(this.environment.work_mode) {
       case 'gpt4o':
@@ -318,7 +313,7 @@ export class EnvironmentComponent implements OnInit {
         return 'Cloud Token';
     }
   }
-  
+
   getTokenPlaceholder(): string {
     switch(this.environment.work_mode) {
       case 'gpt4o':
@@ -331,11 +326,17 @@ export class EnvironmentComponent implements OnInit {
         return 'Enter cloud token';
     }
   }
-  
+
   isGPTMode(): boolean {
     return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
   }
-  
+
+  onWorkModeChange() {
+    if (this.environment.work_mode === 'on-premise') {
+      this.environment.cloud_token = '';
+    }
+  }
+
   save() {
     this.saving = true;
 
@@ -371,6 +372,10 @@ export class EnvironmentComponent implements OnInit {
   }
 
   reloadFromSpark() {
+    if (this.isGPTMode()) {
+      return;
+    }
+
     this.snackBar.open('Reloading configuration from Spark...', undefined, {
       duration: 2000
     });