Adds feature flags to show/hide features

Allows enabling/disabling:
- token streaming toggle
- message file upload
- manual state updates
- bidi streaming
- trace features
- trace, artifact, eval tabs

PiperOrigin-RevId: 813590425

Author: hoonji

src/app/components/chat-panel/chat-panel.component.html

@@ -355,6 +355,7 @@
           (click)="fileInput.click()"
           class="function-event-button"
           [matTooltip]="i18n.uploadFileTooltip"
+          [disabled]="!(isMessageFileUploadEnabledObs | async)"
         >
           <mat-icon>attach_file</mat-icon>
         </button>
@@ -363,6 +364,7 @@
           [matMenuTriggerFor]="moreMenu"
           class="function-event-button"
           [matTooltip]="i18n.moreOptionsTooltip"
+          [disabled]="!(isManualStateUpdateEnabledObs | async)"
         >
           <mat-icon>more_vert</mat-icon>
         </button>
@@ -379,6 +381,7 @@
               'background-color': isAudioRecording ? 'rgb(234, 67, 53)' : 'rgb(51, 53, 55)'
             }"
           [matTooltip]="isAudioRecording ? i18n.turnOffMicTooltip : i18n.useMicTooltip"
+          [disabled]="!(isBidiStreamingEnabledObs | async)"
         >
           <mat-icon>mic</mat-icon>
         </button>
@@ -390,6 +393,7 @@
               'background-color': isVideoRecording ? 'rgb(234, 67, 53)' : 'rgb(51, 53, 55)'
             }"
           [matTooltip]="isVideoRecording ? i18n.turnOffCamTooltip : i18n.useCamTooltip"
+          [disabled]="!(isBidiStreamingEnabledObs | async)"
         >
           <mat-icon>videocam</mat-icon>
         </button>

src/app/components/chat-panel/chat-panel.component.spec.ts

@@ -24,8 +24,10 @@ import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {of} from 'rxjs';
 
+import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {StringToColorServiceImpl} from '../../core/services/string-to-color.service';
+import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
 import {MockStringToColorService} from '../../core/services/testing/mock-string-to-color.service';
 import {ChatPanelComponent} from './chat-panel.component';
 import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
@@ -37,8 +39,15 @@ const FUNC1_NAME = 'func1';
 describe('ChatPanelComponent', () => {
   let component: ChatPanelComponent;
   let fixture: ComponentFixture<ChatPanelComponent>;
+  let mockFeatureFlagService: MockFeatureFlagService;
 
   beforeEach(async () => {
+    mockFeatureFlagService = new MockFeatureFlagService();
+
+    mockFeatureFlagService.isMessageFileUploadEnabledResponse.next(true);
+    mockFeatureFlagService.isManualStateUpdateEnabledResponse.next(true);
+    mockFeatureFlagService.isBidiStreamingEnabledResponse.next(true);
+
     await TestBed
         .configureTestingModule({
           imports: [
@@ -54,6 +63,7 @@ describe('ChatPanelComponent', () => {
               useClass: StringToColorServiceImpl,
             },
             {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
+            {provide: FEATURE_FLAG_SERVICE, useValue: mockFeatureFlagService},
           ],
         })
         .compileComponents();
@@ -327,4 +337,58 @@ describe('ChatPanelComponent', () => {
          expect(scrollContainerElement.scrollTo).toHaveBeenCalled();
        }));
   });
+
+  describe('disabled features', () => {
+    it('should have the attach_file button disabled', () => {
+      mockFeatureFlagService.isMessageFileUploadEnabledResponse.next(false);
+      fixture.detectChanges();
+
+      const allButtons =
+          fixture.debugElement.queryAll(By.css('button[mat-icon-button]'));
+      const button = allButtons.find(
+          b =>
+              b.nativeElement.querySelector('mat-icon')?.textContent?.trim() ===
+              'attach_file');
+      expect(button!.nativeElement.disabled).toBeTrue();
+    });
+
+    it('should have the more_vert button disabled', () => {
+      mockFeatureFlagService.isManualStateUpdateEnabledResponse.next(false);
+      fixture.detectChanges();
+
+      const allButtons =
+          fixture.debugElement.queryAll(By.css('button[mat-icon-button]'));
+      const button = allButtons.find(
+          b =>
+              b.nativeElement.querySelector('mat-icon')?.textContent?.trim() ===
+              'more_vert');
+      expect(button!.nativeElement.disabled).toBeTrue();
+    });
+
+    it('should have the mic button disabled', () => {
+      mockFeatureFlagService.isBidiStreamingEnabledResponse.next(false);
+      fixture.detectChanges();
+
+      const allButtons =
+          fixture.debugElement.queryAll(By.css('button[mat-icon-button]'));
+      const button = allButtons.find(
+          b =>
+              b.nativeElement.querySelector('mat-icon')?.textContent?.trim() ===
+              'mic');
+      expect(button!.nativeElement.disabled).toBeTrue();
+    });
+
+    it('should have the videocam button disabled', () => {
+      mockFeatureFlagService.isBidiStreamingEnabledResponse.next(false);
+      fixture.detectChanges();
+
+      const allButtons =
+          fixture.debugElement.queryAll(By.css('button[mat-icon-button]'));
+      const button = allButtons.find(
+          b =>
+              b.nativeElement.querySelector('mat-icon')?.textContent?.trim() ===
+              'videocam');
+      expect(button!.nativeElement.disabled).toBeTrue();
+    });
+  });
 });

src/app/components/chat-panel/chat-panel.component.ts

@@ -31,6 +31,7 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 
 import type {EvalCase} from '../../core/models/Eval';
+import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {MediaType,} from '../artifact-tab/artifact-tab.component';
 import {AudioPlayerComponent} from '../audio-player/audio-player.component';
@@ -104,13 +105,17 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   readonly markdownComponent: Type<MarkdownComponentInterface> = inject(
     MARKDOWN_COMPONENT,
   );
+  private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
   readonly MediaType = MediaType;
 
-  constructor(
-      private sanitizer: DomSanitizer,
-      @Inject(DOCUMENT) private document: Document,
-      private renderer: Renderer2,
-  ) {}
+  readonly isMessageFileUploadEnabledObs =
+      this.featureFlagService.isMessageFileUploadEnabled();
+  readonly isManualStateUpdateEnabledObs =
+      this.featureFlagService.isManualStateUpdateEnabled();
+  readonly isBidiStreamingEnabledObs =
+      this.featureFlagService.isBidiStreamingEnabled();
+
+  constructor(private sanitizer: DomSanitizer) {}
 
   ngAfterViewInit() {
     if (this.scrollContainer?.nativeElement) {

src/app/components/chat/chat.component.html

@@ -147,6 +147,7 @@
                 class="example-margin"
                 [checked]="enableSseIndicator()"
                 (change)="toggleSse()"
+                [disabled]="!(isTokenStreamingEnabledObs | async)"
               >
                 Token Streaming
               </mat-slide-toggle>

src/app/components/chat/chat.component.spec.ts

@@ -143,6 +143,8 @@ describe('ChatComponent', () => {
     mockFeatureFlagService.isImportSessionEnabledResponse.next(true);
     mockFeatureFlagService.isEditFunctionArgsEnabledResponse.next(true);
     mockFeatureFlagService.isSessionUrlEnabledResponse.next(true);
+    mockFeatureFlagService.isApplicationSelectorEnabledResponse.next(true);
+    mockFeatureFlagService.isTokenStreamingEnabledResponse.next(true);
 
     mockDialog = jasmine.createSpyObj('MatDialog', ['open']);
     mockSnackBar = jasmine.createSpyObj('MatSnackBar', ['open']);
@@ -854,4 +856,18 @@ describe('ChatComponent', () => {
       });
     });
   });
+
+  describe('Feature Disabling', () => {
+    describe('when token streaming is disabled', () => {
+      beforeEach(() => {
+        mockFeatureFlagService.isTokenStreamingEnabledResponse.next(false);
+        fixture.detectChanges();
+      });
+
+      it('should have the token streaming toggle disabled', () => {
+        const slideToggle = fixture.debugElement.query(By.css('mat-slide-toggle'));
+        expect(slideToggle.componentInstance.disabled).toBe(true);
+      });
+    });
+  });
 });

src/app/components/chat/chat.component.ts

@@ -251,17 +251,12 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     shareReplay(),
   );
 
-  // Import session
-  importSessionEnabledObs: Observable<boolean>;
-
-  // Edit eval tool use
-  isEditFunctionArgsEnabledObs: Observable<boolean>;
-
-  // Session url
-  isSessionUrlEnabledObs: Observable<boolean>;
-
-  // Application selector
-  isApplicationSelectorEnabledObs: Observable<boolean>;
+  // Feature flag references for use in template.
+  readonly importSessionEnabledObs: Observable<boolean>;
+  readonly isEditFunctionArgsEnabledObs: Observable<boolean>;
+  readonly isSessionUrlEnabledObs: Observable<boolean>;
+  readonly isApplicationSelectorEnabledObs: Observable<boolean>;
+  readonly isTokenStreamingEnabledObs: Observable<boolean>;
 
   // Trace detail
   bottomPanelVisible = false;
@@ -294,6 +289,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.isSessionUrlEnabledObs = this.featureFlagService.isSessionUrlEnabled();
     this.isApplicationSelectorEnabledObs =
         this.featureFlagService.isApplicationSelectorEnabled();
+    this.isTokenStreamingEnabledObs =
+        this.featureFlagService.isTokenStreamingEnabled();
   }
 
   ngOnInit(): void {

src/app/components/event-tab/event-tab.component.html

@@ -27,7 +27,9 @@
         @if (traceData()) {
           <mat-button-toggle-group name="fontStyle" aria-label="Font Style" style="scale: 0.8" [(ngModel)]="view">
             <mat-button-toggle value="events">Events</mat-button-toggle>
-            <mat-button-toggle value="trace">Trace</mat-button-toggle>
+            @if (isTraceEnabledObs | async) {
+              <mat-button-toggle value="trace">Trace</mat-button-toggle>
+            }
           </mat-button-toggle-group>
         }
       </div>

src/app/components/event-tab/event-tab.component.spec.ts

@@ -19,19 +19,29 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
 
 
+import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
+import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
 import {EventTabComponent} from './event-tab.component';
 
 describe('EventTabComponent', () => {
   let component: EventTabComponent;
   let fixture: ComponentFixture<EventTabComponent>;
+  let featureFlagService: MockFeatureFlagService;
   const mockDialogRef = {
     close: jasmine.createSpy('close'),
   };
 
   beforeEach(async () => {
+    featureFlagService = new MockFeatureFlagService();
+
+    featureFlagService.isTraceEnabledResponse.next(true);
+
     await TestBed.configureTestingModule({
     imports: [MatDialogModule, EventTabComponent],
-    providers: [{ provide: MatDialogRef, useValue: mockDialogRef }],
+    providers: [
+      {provide: MatDialogRef, useValue: mockDialogRef},
+      {provide: FEATURE_FLAG_SERVICE, useValue: featureFlagService},
+    ],
 }).compileComponents();
 
     fixture = TestBed.createComponent(EventTabComponent);
@@ -43,3 +53,46 @@ describe('EventTabComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+
+describe('EventTabComponent feature disabling', () => {
+  let component: EventTabComponent;
+  let fixture: ComponentFixture<EventTabComponent>;
+  let featureFlagService: MockFeatureFlagService;
+  const mockDialogRef = {
+    close: jasmine.createSpy('close'),
+  };
+
+  beforeEach(async () => {
+    featureFlagService = new MockFeatureFlagService();
+
+    featureFlagService.isTraceEnabledResponse.next(false);
+
+    await TestBed.configureTestingModule({
+      imports: [MatDialogModule, EventTabComponent],
+      providers: [
+        {provide: MatDialogRef, useValue: mockDialogRef},
+        {provide: FEATURE_FLAG_SERVICE, useValue: featureFlagService},
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventTabComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('traceData', [
+      {
+        trace_id: '1',
+        span_id: '1',
+        start_time: 1,
+        end_time: 2,
+        name: 'test',
+      },
+    ]);
+    fixture.detectChanges();
+  });
+
+  it('should hide the Trace mat-button-toggle', () => {
+    const traceToggle = fixture.nativeElement.querySelector(
+      'mat-button-toggle[value="trace"]',
+    );
+    expect(traceToggle).toBeNull();
+  });
+});

src/app/components/event-tab/event-tab.component.ts

@@ -19,11 +19,12 @@ import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, comput
 import {MatDialog} from '@angular/material/dialog';
 
 import {Span} from '../../core/models/Trace';
+import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
 import {TraceChartComponent} from './trace-chart/trace-chart.component';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { FormsModule } from '@angular/forms';
 import { MatList, MatListItem } from '@angular/material/list';
-import { KeyValuePipe } from '@angular/common';
+import {AsyncPipe, KeyValuePipe} from '@angular/common';
 import {InvocIdPipe} from './invoc-id.pipe';
 
 @Component({
@@ -38,13 +39,15 @@ import {InvocIdPipe} from './invoc-id.pipe';
         MatListItem,
         KeyValuePipe,
         InvocIdPipe,
+        AsyncPipe,
     ],
 })
 export class EventTabComponent {
   readonly eventsMap = input<Map<string, any>>(new Map<string, any>());
   readonly traceData = input<Span[]>([]);
   @Output() selectedEvent = new EventEmitter<string>();
   private readonly dialog = inject(MatDialog);
+  private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
 
   readonly view = signal<string>('events');
   readonly isTraceView = computed(() => this.view() === 'trace');
@@ -67,6 +70,7 @@ export class EventTabComponent {
   });
 
   showJson: boolean[] = Array(this.eventsMap().size).fill(false);
+  readonly isTraceEnabledObs = this.featureFlagService.isTraceEnabled();
 
   toggleJson(index: number) {
     this.showJson[index] = !this.showJson[index];