add agent search

Author: wyf7107

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

@@ -33,10 +33,22 @@
         class="app-select"
         panelClass="wide-agent-dropdown-panel"
         (selectionChange)="appSelectionChange.emit($event)"
+        (openedChange)="agentSearchControl.setValue('')"
         [placeholder]="isLoadingApps()() ? 'Loading...' : 'Select an agent'"
         [formControl]="selectedAppControl()"
       >
-        @if (apps$() | async; as availableApps) {
+        <mat-option class="search-option" (click)="$event.stopPropagation()" [value]="null">
+          <mat-form-field class="agent-search-field" subscriptSizing="dynamic" (click)="$event.stopPropagation()">
+            <input
+              matInput
+              placeholder="Search agents..."
+              [formControl]="agentSearchControl"
+              (click)="$event.stopPropagation()"
+              (keydown)="$event.stopPropagation()"
+            />
+          </mat-form-field>
+        </mat-option>
+        @if (filteredApps$ | async; as availableApps) {
           @for (appName of availableApps; track appName) {
             <mat-option class="app-name-option" [value]="appName">{{ appName }}</mat-option>
           }

src/app/components/side-panel/side-panel.component.scss

@@ -233,6 +233,7 @@
 :host ::ng-deep .wide-agent-dropdown-panel {
   min-width: 300px;
   max-width: 600px;
+  max-height: 400px;
 
   .mat-mdc-option {
     white-space: normal;
@@ -241,4 +242,34 @@
     min-height: 48px;
     padding: 8px 16px;
   }
+
+  .search-option {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 1000 !important;
+    background-color: var(--mat-select-panel-background-color, white) !important;
+    padding: 8px 16px !important;
+    border-bottom: 1px solid var(--mat-divider-color, rgba(0, 0, 0, 0.12));
+    min-height: auto !important;
+    height: auto !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    opacity: 1 !important;
+
+    &:hover {
+      background-color: var(--mat-select-panel-background-color, white) !important;
+    }
+
+    &.mat-mdc-option.mat-mdc-option-active {
+      background-color: var(--mat-select-panel-background-color, white) !important;
+    }
+  }
+}
+
+
+.agent-search-field {
+  width: 100%;
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
 }

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

@@ -253,7 +253,9 @@ describe('SidePanelComponent', () => {
     it('shows all apps in selector', () => {
       const appSelect = fixture.debugElement.query(APP_SELECT_SELECTOR);
       const options = appSelect.componentInstance.options;
-      expect(options.map((option: MatOption) => option.value)).toEqual([
+      // Filter out the search option (which has value=null)
+      const appOptions = options.filter((option: MatOption) => option.value !== null);
+      expect(appOptions.map((option: MatOption) => option.value)).toEqual([
         'app1',
         'app2',
       ]);

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

@@ -17,9 +17,12 @@
 
 import {AsyncPipe, NgComponentOutlet, NgTemplateOutlet} from '@angular/common';
 import {AfterViewInit, Component, DestroyRef, effect, EnvironmentInjector, inject, input, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef, type WritableSignal} from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatMiniFabButton} from '@angular/material/button';
 import {MatOption} from '@angular/material/core';
+import {MatFormField} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
 import {MatIcon} from '@angular/material/icon';
 import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatProgressSpinner} from '@angular/material/progress-spinner';
@@ -29,7 +32,7 @@ import {MatTooltip} from '@angular/material/tooltip';
 import {type SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {combineLatest, Observable, of} from 'rxjs';
-import {first, map} from 'rxjs/operators';
+import {first, map, startWith, switchMap} from 'rxjs/operators';
 
 import {EvalCase} from '../../core/models/Eval';
 import {Session} from '../../core/models/Session';
@@ -77,6 +80,8 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
     MatSelect,
     ReactiveFormsModule,
     MatProgressSpinner,
+    MatFormField,
+    MatInput,
   ],
 })
 export class SidePanelComponent implements AfterViewInit {
@@ -154,6 +159,27 @@ export class SidePanelComponent implements AfterViewInit {
   protected readonly isSessionsTabReorderingEnabledObs =
       this.featureFlagService.isSessionsTabReorderingEnabled();
 
+  // Agent search
+  readonly agentSearchControl = new FormControl('', { nonNullable: true });
+  readonly filteredApps$: Observable<string[] | undefined> = toObservable(this.apps$).pipe(
+    switchMap(appsObservable =>
+      combineLatest([
+        appsObservable,
+        this.agentSearchControl.valueChanges.pipe(startWith(''))
+      ])
+    ),
+    map(([apps, searchTerm]) => {
+      if (!apps) {
+        return apps;
+      }
+      if (!searchTerm || searchTerm.trim() === '') {
+        return apps;
+      }
+      const lowerSearch = searchTerm.toLowerCase().trim();
+      return apps.filter(app => app.toLowerCase().startsWith(lowerSearch));
+    })
+  );
+
   ngAfterViewInit() {
     // Wait one tick until the eval tab container is ready.
     setTimeout(() => {

src/styles.scss

@@ -885,3 +885,32 @@ html.dark-theme {
     border-bottom: none !important;
   }
 }
+
+.wide-agent-dropdown-panel {
+  padding: 0 !important;
+
+  .search-option {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 1000 !important;
+    opacity: 1 !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  span {
+    width: 100%;
+  }
+}
+
+html.dark-theme .wide-agent-dropdown-panel .search-option {
+  background-color: #2b2b2f !important;
+
+  input {
+    caret-color: white !important;
+  }
+}
+
+html.light-theme .wide-agent-dropdown-panel .search-option {
+  background-color: #ffffff !important;
+}