diff --git a/src/app/components/chat-panel/chat-panel.component.html b/src/app/components/chat-panel/chat-panel.component.html index 97664029..e990be0b 100644 --- a/src/app/components/chat-panel/chat-panel.component.html +++ b/src/app/components/chat-panel/chat-panel.component.html @@ -284,104 +284,109 @@ } } @if (appName != "" && isChatMode) { -
- - - @if ((selectedFiles.length && appName != "") || updatedSessionState) { -
- @for (file of selectedFiles; track file; let i = $index) { -
- @if (file.file.type.startsWith("image/")) { -
- preview - + +
+ + + @if ((selectedFiles.length && appName != "") || updatedSessionState) { +
+ @for (file of selectedFiles; track file; let i = $index) { +
+ @if (file.file.type.startsWith("image/")) { +
+ preview + +
+ } @else if (!file.file.type.startsWith("image/")) { +
+ +
+ insert_drive_file + {{ file.file.name }} +
+
+ }
- } @else if (!file.file.type.startsWith("image/")) { + } @if (updatedSessionState) {
-
- insert_drive_file - {{ file.file.name }} + {{ i18n.updatedSessionStateChipLabel }}
}
- } @if (updatedSessionState) { -
- -
- {{ i18n.updatedSessionStateChipLabel }} -
-
} -
- } - -
-
- - - - {{ i18n.updateStateMenuLabel }} - -
-
- - + +
+
+ + + + {{ i18n.updateStateMenuLabel }} + + +
+
+ + +
+
- -
+ + } diff --git a/src/app/components/chat-panel/chat-panel.component.spec.ts b/src/app/components/chat-panel/chat-panel.component.spec.ts index e78eae0b..686c65cc 100644 --- a/src/app/components/chat-panel/chat-panel.component.spec.ts +++ b/src/app/components/chat-panel/chat-panel.component.spec.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import {MarkdownModule} from 'ngx-markdown'; import {HttpClientTestingModule} from '@angular/common/http/testing'; import {SimpleChange} from '@angular/core'; import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {MatDialogModule} from '@angular/material/dialog'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {MarkdownModule} from 'ngx-markdown'; import {of} from 'rxjs'; import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service'; @@ -29,9 +29,10 @@ import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to- 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'; import {MarkdownComponent} from '../markdown/markdown.component'; +import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface'; + +import {ChatPanelComponent} from './chat-panel.component'; const USER_ID = 'user'; const FUNC1_NAME = 'func1'; @@ -390,5 +391,6 @@ describe('ChatPanelComponent', () => { 'videocam'); expect(button!.nativeElement.disabled).toBeTrue(); }); + }); }); diff --git a/src/app/components/chat-panel/chat-panel.component.ts b/src/app/components/chat-panel/chat-panel.component.ts index b95cbaed..487b7346 100644 --- a/src/app/components/chat-panel/chat-panel.component.ts +++ b/src/app/components/chat-panel/chat-panel.component.ts @@ -17,7 +17,7 @@ import {TextFieldModule} from '@angular/cdk/text-field'; import {CommonModule, DOCUMENT, NgClass, NgStyle} from '@angular/common'; -import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Inject, Input, OnChanges, Output, Renderer2, signal, SimpleChanges, ViewChild, Type} from '@angular/core'; +import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Inject, Input, OnChanges, Output, Renderer2, signal, SimpleChanges, Type, ViewChild} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; @@ -47,10 +47,21 @@ const ROOT_AGENT = 'root_agent'; styleUrl: './chat-panel.component.scss', standalone: true, imports: [ - CommonModule, FormsModule, MatIconModule, MatCardModule, - MatProgressBarModule, MatButtonModule, MatInputModule, TextFieldModule, - MatFormFieldModule, MatMenuModule, NgxJsonViewerModule, - AudioPlayerComponent, MatTooltipModule, NgClass, NgStyle, + CommonModule, + FormsModule, + MatIconModule, + MatCardModule, + MatProgressBarModule, + MatButtonModule, + MatInputModule, + TextFieldModule, + MatFormFieldModule, + MatMenuModule, + NgxJsonViewerModule, + AudioPlayerComponent, + MatTooltipModule, + NgClass, + NgStyle, ], }) export class ChatPanelComponent implements OnChanges, AfterViewInit { @@ -103,7 +114,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit { protected readonly i18n = inject(ChatPanelMessagesInjectionToken); private readonly stringToColorService = inject(STRING_TO_COLOR_SERVICE); readonly markdownComponent: Type = inject( - MARKDOWN_COMPONENT, + MARKDOWN_COMPONENT, ); private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE); readonly MediaType = MediaType; @@ -162,7 +173,8 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit { customIconColorClass(i: number) { const agentName = this.getAgentNameFromEvent(i); return agentName !== ROOT_AGENT ? - `custom-icon-color-${this.stringToColorService.stc(agentName).replace('#', '')}` : + `custom-icon-color-${ + this.stringToColorService.stc(agentName).replace('#', '')}` : ''; } diff --git a/src/app/components/chat/chat.component.html b/src/app/components/chat/chat.component.html index 59c3a751..d5d865f2 100644 --- a/src/app/components/chat/chat.component.html +++ b/src/app/components/chat/chat.component.html @@ -16,22 +16,22 @@ @if (!showSidePanel && appName === "") { - left_panel_open + left_panel_open }
@if (appName != "") { -
- @if (!showSidePanel) { - left_panel_open - } - @if (evalCase) { -
-
Eval Case ID
-
{{ evalCase.evalId }}
-
-
- @if (this.isEvalEditMode()) { - - - } @else { - - edit - - - delete - - } -
+
+ @if (!showSidePanel) { + left_panel_open + } @if (evalCase) { +
+
Eval Case ID
+
{{ evalCase.evalId }}
+
+
+ @if (this.isEvalEditMode()) { + + } @else { -
-
Session ID
-
{{ sessionId }}
-
-
-
- - Token Streaming - -
- -
-
- add - New Session -
- - delete - - - download - - @if (importSessionEnabledObs | async) { - - upload - - } -
-
+ + edit + + + delete + }
+ } @else { +
+
Session ID
+
{{ sessionId }}
+
+
+
+ + Token Streaming + +
+ +
+
+ add + New Session +
+ + delete + + + download + + @if (importSessionEnabledObs | async) { + + upload + + } +
+
+ } +
} - @if (!selectedAppControl.value) { - @if (isLoadingApps()) { -
- Loading agents, please wait... -
- } @else if (isApplicationSelectorEnabledObs | async) { -
- @if (((apps$ | async) || []).length > 0) { - Welcome to ADK!
- Select an agent on the left to begin with. - } @else { -
- Failed to load agents. To get started, run - 
adk web
- in the folder that contains the agents.
- @if (loadingError()) { - Error message:
- 
{{ loadingError() }}
- } @else { - 
Warning: No agents found in current folder.
- } -
- } -
+ @if (!selectedAppControl.value) { @if (isLoadingApps()) { +
+ Loading agents, please wait... +
+ } @else if (isApplicationSelectorEnabledObs | async) { +
+ @if (((apps$ | async) || []).length > 0) { + Welcome to ADK!
+ Select an agent on the left to begin with. + } @else { +
+ Failed to load agents. To get started, run + 
adk web
+ in the folder that contains the agents.
+ @if (loadingError()) { Error message:
+ 
{{ loadingError() }}
+ } @else { + 
Warning: No agents found in current folder.
+ } +
} - } - @if (longRunningEvents.length > 0) { - - } - @if (appName != "") { - +
+ } } @if (longRunningEvents.length > 0) { + + } @if (appName != "") { + } @if (bottomPanelVisible) { -
-
- -
+
+
+ +
}
diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts index 4db916d6..b25bb39f 100644 --- a/src/app/components/chat/chat.component.spec.ts +++ b/src/app/components/chat/chat.component.spec.ts @@ -25,7 +25,6 @@ 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'; @@ -141,7 +140,6 @@ describe('ChatComponent', () => { mockStringToColorService = new MockStringToColorService(); mockSafeValuesService = new MockSafeValuesService(); mockLocalFileService = new MockLocalFileService(); - mockStringToColorService.stc.and.returnValue('#8c8526ff'); mockSessionService.createSessionResponse.next( @@ -468,6 +466,7 @@ describe('ChatComponent', () => { expect(mockEventService.getTrace) .toHaveBeenCalledWith(SESSION_1_ID); }); + }); }); @@ -877,7 +876,8 @@ describe('ChatComponent', () => { }); it('should have the token streaming toggle disabled', () => { - const slideToggle = fixture.debugElement.query(By.css('mat-slide-toggle')); + const slideToggle = + fixture.debugElement.query(By.css('mat-slide-toggle')); expect(slideToggle.componentInstance.disabled).toBe(true); }); }); diff --git a/src/app/components/session-tab/session-tab.component.html b/src/app/components/session-tab/session-tab.component.html index f010fc1c..5308b04b 100644 --- a/src/app/components/session-tab/session-tab.component.html +++ b/src/app/components/session-tab/session-tab.component.html @@ -15,18 +15,20 @@ -->
-
+
@for (session of sessionList; track session) { -
-
-
- {{session.id}} -
-
- {{ getDate(session) }} -
+
+
+
+ {{session.id}} +
+
{{ getDate(session) }}
+
}
diff --git a/src/app/components/session-tab/session-tab.component.ts b/src/app/components/session-tab/session-tab.component.ts index 203fe6a2..ad9563d1 100644 --- a/src/app/components/session-tab/session-tab.component.ts +++ b/src/app/components/session-tab/session-tab.component.ts @@ -15,8 +15,9 @@ * limitations under the License. */ -import {NgClass} from '@angular/common'; +import {AsyncPipe, NgClass} from '@angular/common'; import {ChangeDetectorRef, Component, EventEmitter, Inject, inject, Input, OnInit, Output} from '@angular/core'; +import {MatChip} from '@angular/material/chips'; import {MatDialog} from '@angular/material/dialog'; import {Subject} from 'rxjs'; import {switchMap} from 'rxjs/operators'; @@ -28,7 +29,7 @@ import {SESSION_SERVICE, SessionService} from '../../core/services/session.servi selector: 'app-session-tab', templateUrl: './session-tab.component.html', styleUrl: './session-tab.component.scss', - imports: [NgClass], + imports: [NgClass, AsyncPipe, MatChip], }) export class SessionTabComponent implements OnInit { @Input() userId: string = ''; @@ -44,7 +45,7 @@ export class SessionTabComponent implements OnInit { private readonly changeDetectorRef = inject(ChangeDetectorRef); constructor( - @Inject(SESSION_SERVICE) private sessionService: SessionService, + @Inject(SESSION_SERVICE) protected readonly sessionService: SessionService, private dialog: MatDialog, ) { this.refreshSessionsSubject diff --git a/src/app/core/services/session.service.ts b/src/app/core/services/session.service.ts index 799e1e8c..6216b8fd 100644 --- a/src/app/core/services/session.service.ts +++ b/src/app/core/services/session.service.ts @@ -17,7 +17,7 @@ import {HttpClient} from '@angular/common/http'; import {Injectable, InjectionToken} from '@angular/core'; -import {Observable} from 'rxjs'; +import {Observable, of} from 'rxjs'; import {URLUtil} from '../../../utils/url-util'; import {Session} from '../models/Session'; @@ -78,4 +78,5 @@ export class SessionService { return new Observable(); } + }