Skip to content

Commit e9b20ac

Browse files
google-genai-botcopybara-github
google-genai-bot
authored and
copybara-github
committed
ADK changes
PiperOrigin-RevId: 811474005
1 parent 81bb701 commit e9b20ac

File tree

5 files changed

+132
-113
lines changed

5 files changed

+132
-113
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
>
3535
}
3636
<mat-drawer class="side-drawer" #sideDrawer mode="side" appResizableDrawer>
37+
@if (isApplicationSelectorEnabledObs | async) {
3738
<div class="app-select-container">
3839
<mat-select
3940
class="app-select"
@@ -51,6 +52,7 @@
5152
}
5253
</mat-select>
5354
</div>
55+
}
5456
<app-side-panel
5557
[showSidePanel]="showSidePanel"
5658
[appName]="appName"
@@ -192,7 +194,7 @@
192194
<div class="empty-state-container">
193195
<span>Loading agents, please wait...</span>
194196
</div>
195-
} @else {
197+
} @else if (isApplicationSelectorEnabledObs | async) {
196198
<div class="empty-state-container">
197199
@if (((apps$ | async) || []).length > 0) {
198200
<span

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,9 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
263263
// Session url
264264
isSessionUrlEnabledObs: Observable<boolean>;
265265

266+
// Application selector
267+
isApplicationSelectorEnabledObs: Observable<boolean>;
268+
266269
// Trace detail
267270
bottomPanelVisible = false;
268271
hoveredEventMessageIndices: number[] = [];
@@ -293,6 +296,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
293296
this.isEditFunctionArgsEnabledObs =
294297
this.featureFlagService.isEditFunctionArgsEnabled();
295298
this.isSessionUrlEnabledObs = this.featureFlagService.isSessionUrlEnabled();
299+
this.isApplicationSelectorEnabledObs =
300+
this.featureFlagService.isApplicationSelectorEnabled();
296301
}
297302

298303
ngOnInit(): void {

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

Lines changed: 103 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@if ((isAlwaysOnSidePanelEnabledObs | async) === false) {
12
<div style="margin-top: 20px; margin-left: 20px; display: flex">
23
<div style="width: 100%">
34
<div class="drawer-header">
@@ -15,116 +16,112 @@
1516
</div>
1617
</div>
1718
</div>
18-
@if (appName != "" && showSidePanel) {
19-
<div class="tabs-container">
20-
<mat-tab-group (selectedTabChange)="tabChange.emit($event)">
21-
<mat-tab class="tabs-header">
22-
<ng-template mat-tab-label>
23-
<span class="tab-label">{{ i18n.traceTabLabel }}</span>
24-
</ng-template>
25-
<app-trace-tab [traceData]="traceData"></app-trace-tab>
26-
</mat-tab>
27-
<mat-tab class="tabs-header">
28-
<ng-template mat-tab-label>
29-
<span class="tab-label">{{ i18n.eventsTabLabel }}</span>
30-
</ng-template>
31-
<app-event-tab
32-
[eventsMap]="eventData"
33-
[traceData]="traceData"
34-
(selectedEvent)="eventSelected.emit($event)"
35-
></app-event-tab>
36-
</mat-tab>
37-
<mat-tab>
38-
<ng-template mat-tab-label>
39-
<span class="tab-label">{{ i18n.stateTabLabel }}</span>
40-
</ng-template>
41-
<app-state-tab [sessionState]="currentSessionState"></app-state-tab>
19+
} @if (appName != "" && showSidePanel) {
20+
<div class="tabs-container">
21+
<mat-tab-group (selectedTabChange)="tabChange.emit($event)">
22+
<mat-tab class="tabs-header">
23+
<ng-template mat-tab-label>
24+
<span class="tab-label">{{ i18n.traceTabLabel }}</span>
25+
</ng-template>
26+
<app-trace-tab [traceData]="traceData"></app-trace-tab>
27+
</mat-tab>
28+
<mat-tab class="tabs-header">
29+
<ng-template mat-tab-label>
30+
<span class="tab-label">{{ i18n.eventsTabLabel }}</span>
31+
</ng-template>
32+
<app-event-tab
33+
[eventsMap]="eventData"
34+
[traceData]="traceData"
35+
(selectedEvent)="eventSelected.emit($event)"
36+
></app-event-tab>
37+
</mat-tab>
38+
<mat-tab>
39+
<ng-template mat-tab-label>
40+
<span class="tab-label">{{ i18n.stateTabLabel }}</span>
41+
</ng-template>
42+
<app-state-tab [sessionState]="currentSessionState"></app-state-tab>
43+
</mat-tab>
44+
<mat-tab>
45+
<ng-template mat-tab-label>
46+
<span class="tab-label">{{ i18n.artifactsTabLabel }}</span>
47+
</ng-template>
48+
<app-artifact-tab [artifacts]="artifacts"> </app-artifact-tab>
49+
</mat-tab>
50+
<mat-tab>
51+
<ng-template mat-tab-label>
52+
<span class="tab-label">{{ i18n.sessionsTabLabel }}</span>
53+
</ng-template>
54+
<app-session-tab
55+
[userId]="userId"
56+
[appName]="appName"
57+
[sessionId]="sessionId"
58+
(sessionSelected)="sessionSelected.emit($event)"
59+
(sessionReloaded)="sessionReloaded.emit($event)"
60+
>
61+
</app-session-tab>
62+
</mat-tab>
63+
@if (shouldShowEvalTab) {
64+
<mat-tab>
65+
<ng-template mat-tab-label>
66+
<span class="tab-label">{{ i18n.evalTabLabel }}</span>
67+
</ng-template>
68+
<app-eval-tab
69+
[appName]="appName"
70+
[userId]="userId"
71+
[sessionId]="sessionId"
72+
(shouldShowTab)="evalTabVisibilityChange.emit($event)"
73+
(sessionSelected)="sessionSelected.emit($event)"
74+
(evalCaseSelected)="evalCaseSelected.emit($event)"
75+
(evalSetIdSelected)="evalSetIdSelected.emit($event)"
76+
(shouldReturnToSession)="returnToSession.emit($event)"
77+
(evalNotInstalledMsg)="evalNotInstalled.emit($event)"
78+
></app-eval-tab>
79+
</mat-tab>
80+
}
81+
</mat-tab-group>
82+
</div>
83+
} @if (this.selectedEvent && showSidePanel) {
84+
<div class="details-panel-container">
85+
<div class="details-content">
86+
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
87+
<mat-paginator
88+
class="event-paginator"
89+
[length]="eventData.size"
90+
[pageSize]="1"
91+
[pageIndex]="selectedEventIndex"
92+
(page)="page.emit($event)"
93+
[attr.aria-label]="i18n.selectEventAriaLabel"
94+
>
95+
</mat-paginator>
96+
<button mat-mini-fab>
97+
<mat-icon (click)="closeSelectedEvent.emit()">close</mat-icon>
98+
</button>
99+
</div>
100+
</div>
101+
<div>
102+
<mat-tab-group>
103+
<mat-tab label="{{ i18n.eventDetailsTabLabel }}">
104+
<div class="event-graph-container">
105+
@if (renderedEventGraph) {
106+
<div [innerHtml]="renderedEventGraph" (click)="openImageDialog.emit(rawSvgString)"></div>
107+
}
108+
</div>
109+
<div class="json-viewer-container">
110+
<ngx-json-viewer [json]="selectedEvent"></ngx-json-viewer>
111+
</div>
42112
</mat-tab>
43-
<mat-tab>
44-
<ng-template mat-tab-label>
45-
<span class="tab-label">{{ i18n.artifactsTabLabel }}</span>
46-
</ng-template>
47-
<app-artifact-tab [artifacts]="artifacts"> </app-artifact-tab>
113+
<mat-tab label="{{ i18n.requestDetailsTabLabel }}">
114+
<div class="json-viewer-container">
115+
<ngx-json-viewer [json]="llmRequest"></ngx-json-viewer>
116+
</div>
48117
</mat-tab>
49-
<mat-tab>
50-
<ng-template mat-tab-label>
51-
<span class="tab-label">{{ i18n.sessionsTabLabel }}</span>
52-
</ng-template>
53-
<app-session-tab
54-
[userId]="userId"
55-
[appName]="appName"
56-
[sessionId]="sessionId"
57-
(sessionSelected)="sessionSelected.emit($event)"
58-
(sessionReloaded)="sessionReloaded.emit($event)"
59-
>
60-
</app-session-tab>
118+
<mat-tab label="{{ i18n.responseDetailsTabLabel }}">
119+
<div class="json-viewer-container">
120+
<ngx-json-viewer [json]="llmResponse"></ngx-json-viewer>
121+
</div>
61122
</mat-tab>
62-
@if (shouldShowEvalTab) {
63-
<mat-tab>
64-
<ng-template mat-tab-label>
65-
<span class="tab-label">{{ i18n.evalTabLabel }}</span>
66-
</ng-template>
67-
<app-eval-tab
68-
[appName]="appName"
69-
[userId]="userId"
70-
[sessionId]="sessionId"
71-
(shouldShowTab)="evalTabVisibilityChange.emit($event)"
72-
(sessionSelected)="sessionSelected.emit($event)"
73-
(evalCaseSelected)="evalCaseSelected.emit($event)"
74-
(evalSetIdSelected)="evalSetIdSelected.emit($event)"
75-
(shouldReturnToSession)="returnToSession.emit($event)"
76-
(evalNotInstalledMsg)="evalNotInstalled.emit($event)"
77-
></app-eval-tab>
78-
</mat-tab>
79-
}
80123
</mat-tab-group>
81124
</div>
82-
}
83-
@if (this.selectedEvent && showSidePanel) {
84-
<div class="details-panel-container">
85-
<div class="details-content">
86-
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
87-
<mat-paginator
88-
class="event-paginator"
89-
[length]="eventData.size"
90-
[pageSize]="1"
91-
[pageIndex]="selectedEventIndex"
92-
(page)="page.emit($event)"
93-
[attr.aria-label]="i18n.selectEventAriaLabel"
94-
>
95-
</mat-paginator>
96-
<button mat-mini-fab>
97-
<mat-icon (click)="closeSelectedEvent.emit()">close</mat-icon>
98-
</button>
99-
</div>
100-
</div>
101-
<div>
102-
<mat-tab-group>
103-
<mat-tab label="{{ i18n.eventDetailsTabLabel }}">
104-
<div class="event-graph-container">
105-
@if (renderedEventGraph) {
106-
<div
107-
[innerHtml]="renderedEventGraph"
108-
(click)="openImageDialog.emit(rawSvgString)"
109-
></div>
110-
}
111-
</div>
112-
<div class="json-viewer-container">
113-
<ngx-json-viewer [json]="selectedEvent"></ngx-json-viewer>
114-
</div>
115-
</mat-tab>
116-
<mat-tab label="{{ i18n.requestDetailsTabLabel }}">
117-
<div class="json-viewer-container">
118-
<ngx-json-viewer [json]="llmRequest"></ngx-json-viewer>
119-
</div>
120-
</mat-tab>
121-
<mat-tab label="{{ i18n.responseDetailsTabLabel }}">
122-
<div class="json-viewer-container">
123-
<ngx-json-viewer [json]="llmResponse"></ngx-json-viewer>
124-
</div>
125-
</mat-tab>
126-
</mat-tab-group>
127-
</div>
128-
</div>
125+
</div>
129126
}
130127
<div class="resize-handler"></div>

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* limitations under the License.
1616
*/
1717

18+
import {CommonModule} from '@angular/common';
1819
import {Component, EventEmitter, inject, Input, Output, viewChild} from '@angular/core';
1920
import {MatMiniFabButton} from '@angular/material/button';
2021
import {MatIcon} from '@angular/material/icon';
@@ -26,6 +27,7 @@ import {NgxJsonViewerModule} from 'ngx-json-viewer';
2627

2728
import {EvalCase} from '../../core/models/Eval';
2829
import {Session} from '../../core/models/Session';
30+
import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
2931
import {ArtifactTabComponent} from '../artifact-tab/artifact-tab.component';
3032
import {EvalTabComponent} from '../eval-tab/eval-tab.component';
3133
import {EventTabComponent} from '../event-tab/event-tab.component';
@@ -44,6 +46,7 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
4446
styleUrls: ['./side-panel.component.scss'],
4547
standalone: true,
4648
imports: [
49+
CommonModule,
4750
MatTooltip,
4851
MatTabGroup,
4952
MatTab,
@@ -69,12 +72,12 @@ export class SidePanelComponent {
6972
@Input() currentSessionState: any;
7073
@Input() artifacts: any[] = [];
7174
@Input() shouldShowEvalTab = false;
72-
@Input() selectedEvent: any | undefined;
73-
@Input() selectedEventIndex: number | undefined;
74-
@Input() renderedEventGraph: SafeHtml | undefined;
75-
@Input() rawSvgString: string | null = null;
76-
@Input() llmRequest: any | undefined;
77-
@Input() llmResponse: any | undefined;
75+
@Input() selectedEvent: any|undefined;
76+
@Input() selectedEventIndex: number|undefined;
77+
@Input() renderedEventGraph: SafeHtml|undefined;
78+
@Input() rawSvgString: string|null = null;
79+
@Input() llmRequest: any|undefined;
80+
@Input() llmResponse: any|undefined;
7881
@Input() showSidePanel = false;
7982

8083
@Output() readonly closePanel = new EventEmitter<void>();
@@ -96,4 +99,8 @@ export class SidePanelComponent {
9699
readonly evalTabComponent = viewChild(EvalTabComponent);
97100

98101
readonly i18n = inject(SidePanelMessagesInjectionToken);
102+
readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
103+
104+
readonly isAlwaysOnSidePanelEnabledObs =
105+
this.featureFlagService.isAlwaysOnSidePanelEnabled();
99106
}

‎src/app/core/services/feature-flag.service.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,12 @@ export class FeatureFlagService {
5656
map((params) => params[A2A_CARD] === 'true'),
5757
);
5858
}
59+
60+
isApplicationSelectorEnabled(): Observable<boolean> {
61+
return of(true);
62+
}
63+
64+
isAlwaysOnSidePanelEnabled(): Observable<boolean> {
65+
return of(false);
66+
}
5967
}

0 commit comments

Comments
 (0)