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

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

@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { ApiService, Environment } from '../../services/api.service';
 
 @Component({
@@ -24,7 +25,8 @@ import { ApiService, Environment } from '../../services/api.service';
     MatButtonModule,
     MatIconModule,
     MatProgressSpinnerModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatExpansionModule
   ],
   template: `
     <div class="environment-container">
@@ -92,6 +94,31 @@ import { ApiService, Environment } from '../../services/api.service';
               </button>
             </mat-form-field>
 
+            <mat-expansion-panel class="prompt-panel">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon>psychology</mat-icon>
+                  Internal System Prompt
+                </mat-panel-title>
+                <mat-panel-description>
+                  Advanced configuration for Spark LLM
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+              
+              <mat-form-field appearance="outline" class="full-width">
+                <mat-label>Internal Prompt</mat-label>
+                <textarea
+                  matInput
+                  name="internalPrompt"
+                  [(ngModel)]="environment.internal_prompt"
+                  [disabled]="loading"
+                  rows="10"
+                  placeholder="Enter internal system prompt for Spark..."
+                ></textarea>
+                <mat-hint>This prompt will be prepended to all project prompts</mat-hint>
+              </mat-form-field>
+            </mat-expansion-panel>
+
             <div class="form-actions">
               <button
                 mat-raised-button
@@ -151,6 +178,22 @@ import { ApiService, Environment } from '../../services/api.service';
       margin-bottom: 20px;
     }
 
+    .prompt-panel {
+      margin-bottom: 20px;
+      
+      mat-expansion-panel-header {
+        mat-panel-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          mat-icon {
+            color: #666;
+          }
+        }
+      }
+    }
+
     .form-actions {
       display: flex;
       gap: 16px;
@@ -177,6 +220,10 @@ import { ApiService, Environment } from '../../services/api.service';
       .mat-mdc-progress-spinner {
         --mdc-circular-progress-active-indicator-color: white;
       }
+      
+      .mat-expansion-panel-body {
+        padding: 16px 0 !important;
+      }
     }
   `]
 })
@@ -187,7 +234,8 @@ export class EnvironmentComponent implements OnInit {
   environment: Environment = {
     work_mode: 'hfcloud',
     cloud_token: '',
-    spark_endpoint: ''
+    spark_endpoint: '',
+    internal_prompt: ''
   };
 
   loading = true;