ADK changes

PiperOrigin-RevId: 813414139

Author: google-genai-bot

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

@@ -34,26 +34,11 @@
     >
   }
   <mat-drawer class="side-drawer" #sideDrawer mode="side" appResizableDrawer>
-  @if (isApplicationSelectorEnabledObs | async) {
-    <div class="app-select-container">
-      <mat-select
-        class="app-select"
-        (selectionChange)="onAppSelection($event)"
-        [placeholder]="isLoadingApps() ? 'Loading...' : 'Select an agent'"
-        [formControl]="selectedAppControl"
-      >
-        @if (apps$ | async; as availableApps) {
-          @for (appName of availableApps; track appName) {
-            <mat-option class="app-name-option" [value]="appName">{{ appName }}</mat-option>
-          }
-        }
-        @if (selectedAppControl.value && isLoadingApps()) {
-          <mat-option class="app-name-option" [value]="selectedAppControl.value">{{ selectedAppControl.value }}</mat-option>
-        }
-      </mat-select>
-    </div>
-  }
     <app-side-panel
+      [isApplicationSelectorEnabledObs]="isApplicationSelectorEnabledObs"
+      [apps$]="apps$"
+      [isLoadingApps]="isLoadingApps"
+      [selectedAppControl]="selectedAppControl"
       [showSidePanel]="showSidePanel"
       [appName]="appName"
       [userId]="userId"
@@ -80,6 +65,7 @@
       (page)="handlePageEvent($event)"
       (closeSelectedEvent)="closeSelectedEvent()"
       (openImageDialog)="openViewImageDialog($event)"
+      (appSelectionChange)="onAppSelection($event)"
     >
     </app-side-panel>
   </mat-drawer>

src/app/components/chat/chat.component.scss

@@ -257,10 +257,6 @@ button {
   margin-right: 20px;
 }
 
-.app-select {
-  width: 100%;
-}
-
 .empty-state-container {
   color: #eee;
   height: 100%;
@@ -350,30 +346,6 @@ button {
   font-size: 14px;
 }
 
-.app-select-container {
-  width: 35%;
-  margin-top: 12px;
-  background-color: #212123;
-  margin-left: 10px;
-  height: 30px;
-  display: flex;
-  justify-content: space-between;
-  padding-left: 20px;
-  padding-right: 20px;
-  border-radius: 10px;
-  padding-top: 5px;
-}
-
-.app-select-container {
-  @include mat.select-overrides(
-    (
-      placeholder-text-color: #8ab4f8,
-      enabled-trigger-text-color: #8ab4f8,
-      enabled-arrow-color: #8ab4f8,
-    )
-  );
-}
-
 .adk-checkbox {
   position: fixed;
   bottom: 0;
@@ -470,12 +442,3 @@ button {
 ::ng-deep .mat-drawer {
   border-right: 1px solid #444746 !important;
 }
-
-.app-name-option,
-.app-select {
-  color: #9aa0a6;
-  font-family: 'Google Sans Mono', monospace;
-  font-style: normal;
-  font-weight: 400;
-  padding-left: unset;
-}

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

@@ -15,14 +15,17 @@
  * limitations under the License.
  */
 
+
 import {Location} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+
 import {BehaviorSubject, NEVER, of, Subject, throwError} from 'rxjs';
 
 import {EvalCase} from '../../core/models/Eval';
@@ -37,7 +40,6 @@ import {GRAPH_SERVICE, GraphService} from '../../core/services/graph.service';
 import {SAFE_VALUES_SERVICE} from '../../core/services/interfaces/safevalues';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {SESSION_SERVICE, SessionService,} from '../../core/services/session.service';
-import {StringToColorServiceImpl} from '../../core/services/string-to-color.service';
 import {MockAgentService} from '../../core/services/testing/mock-agent.service';
 import {MockArtifactService} from '../../core/services/testing/mock-artifact.service';
 import {MockAudioService} from '../../core/services/testing/mock-audio.service';
@@ -55,11 +57,10 @@ import {MockWebSocketService} from '../../core/services/testing/mock-websocket.s
 import {TRACE_SERVICE, TraceService} from '../../core/services/trace.service';
 import {VIDEO_SERVICE, VideoService} from '../../core/services/video.service';
 import {WEBSOCKET_SERVICE, WebSocketService,} from '../../core/services/websocket.service';
-import {Component} from '@angular/core';
-import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
-import {MarkdownComponent} from '../markdown/markdown.component';
-
+import {fakeAsync,  tick} from '../../testing/utils';
 import {ChatPanelComponent} from '../chat-panel/chat-panel.component';
+import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
+import {MockMarkdownComponent} from '../markdown/testing/mock-markdown.component';
 import {SidePanelComponent} from '../side-panel/side-panel.component';
 
 import {ChatComponent} from './chat.component';
@@ -136,6 +137,8 @@ describe('ChatComponent', () => {
     mockStringToColorService = new MockStringToColorService();
     mockSafeValuesService = new MockSafeValuesService();
 
+    mockStringToColorService.stc.and.returnValue('#8c8526ff');
+
     mockSessionService.createSessionResponse.next(
         {id: SESSION_1_ID, state: {}});
     mockTraceService.selectedTraceRow$.next(undefined);
@@ -196,15 +199,18 @@ describe('ChatComponent', () => {
             {provide: TRACE_SERVICE, useValue: mockTraceService},
             {provide: AGENT_SERVICE, useValue: mockAgentService},
             {provide: FEATURE_FLAG_SERVICE, useValue: mockFeatureFlagService},
-            {provide: STRING_TO_COLOR_SERVICE, useClass: StringToColorServiceImpl},
+            {
+              provide: STRING_TO_COLOR_SERVICE,
+              useValue: mockStringToColorService,
+            },
             {provide: GRAPH_SERVICE, useValue: graphService},
             {provide: SAFE_VALUES_SERVICE, useValue: mockSafeValuesService},
             {provide: MatDialog, useValue: mockDialog},
             {provide: MatSnackBar, useValue: mockSnackBar},
             {provide: Router, useValue: mockRouter},
             {provide: ActivatedRoute, useValue: mockActivatedRoute},
             {provide: Location, useValue: mockLocation},
-            {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
+            {provide: MARKDOWN_COMPONENT, useValue: MockMarkdownComponent},
           ],
         })
         .compileComponents();

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

@@ -24,7 +24,7 @@
         @if (isTraceView()) {
           <p>Trace</p>
         }
-        @if (traceData()) {
+        @if (traceData().length > 0) {
           <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>