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

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

@@ -52,22 +52,24 @@ import { ApiService, Environment } from '../../services/api.service';
                 <mat-option value="hfcloud">HF Cloud</mat-option>
                 <mat-option value="cloud">Cloud</mat-option>
                 <mat-option value="on-premise">On-Premise</mat-option>
+                <mat-option value="gpt4o">GPT-4o</mat-option>
+                <mat-option value="gpt4o-mini">GPT-4o Mini</mat-option>
               </mat-select>
               <mat-icon matPrefix>cloud</mat-icon>
             </mat-form-field>
 
             <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Cloud Token</mat-label>
+              <mat-label>{{ getTokenLabel() }}</mat-label>
               <input
                 matInput
                 type="password"
                 name="cloudToken"
                 [(ngModel)]="environment.cloud_token"
                 [disabled]="loading || environment.work_mode === 'on-premise'"
-                placeholder="Enter cloud token"
+                [placeholder]="getTokenPlaceholder()"
               >
               <mat-icon matPrefix>vpn_key</mat-icon>
-              <mat-hint>Required for HF Cloud and Cloud modes</mat-hint>
+              <mat-hint>{{ isGPTMode() ? 'Required for OpenAI API access' : 'Required for HF Cloud and Cloud modes' }}</mat-hint>
             </mat-form-field>
 
             <mat-form-field appearance="outline" class="full-width">
@@ -77,8 +79,8 @@ import { ApiService, Environment } from '../../services/api.service';
                 type="url"
                 name="sparkEndpoint"
                 [(ngModel)]="environment.spark_endpoint"
-                required
-                [disabled]="loading"
+                [required]="!isGPTMode()"
+                [disabled]="loading || isGPTMode()"
                 placeholder="https://spark-service.example.com"
               >
               <mat-icon matPrefix>link</mat-icon>
@@ -87,12 +89,27 @@ import { ApiService, Environment } from '../../services/api.service';
                 matSuffix
                 type="button"
                 (click)="testConnection()"
-                [disabled]="loading || !environment.spark_endpoint"
+                [disabled]="loading || !environment.spark_endpoint || isGPTMode()"
                 matTooltip="Test Connection"
               >
                 <mat-icon>wifi_tethering</mat-icon>
               </button>
+              <mat-hint *ngIf="isGPTMode()">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>
@@ -212,6 +229,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;
+        }
+      }
+    }
+
     ::ng-deep {
       .mat-mdc-form-field-icon-prefix {
         padding-right: 12px;
@@ -268,6 +306,36 @@ export class EnvironmentComponent implements OnInit {
     }
   }
 
+  getTokenLabel(): string {
+    switch(this.environment.work_mode) {
+      case 'gpt4o':
+      case 'gpt4o-mini':
+        return 'OpenAI API Key';
+      case 'hfcloud':
+      case 'cloud':
+        return 'Cloud Token';
+      default:
+        return 'Cloud Token';
+    }
+  }
+  
+  getTokenPlaceholder(): string {
+    switch(this.environment.work_mode) {
+      case 'gpt4o':
+      case 'gpt4o-mini':
+        return 'Enter OpenAI API key (sk-...)';
+      case 'hfcloud':
+      case 'cloud':
+        return 'Enter cloud token';
+      default:
+        return 'Enter cloud token';
+    }
+  }
+  
+  isGPTMode(): boolean {
+    return this.environment.work_mode === 'gpt4o' || this.environment.work_mode === 'gpt4o-mini';
+  }
+  
   save() {
     this.saving = true;