ADK changes

PiperOrigin-RevId: 859053463

Author: google-genai-bot

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

@@ -458,13 +458,17 @@ describe('ChatPanelComponent', () => {
             }));
 
         it('should restore scroll position', fakeAsync(() => {
+                      component['onScroll'].next(
+                          {target: scrollContainer} as unknown as Event);
+                      tick();
+
+                      Object.defineProperty(
+                          scrollContainer, 'scrollHeight',
+                          {value: 1500, configurable: true});
                       mockUiStateService.newMessagesLoadedResponse.next({
                         items: [{role: 'bot', text: 'message 1'}],
                         nextPageToken: nextToken
                       });
-                      Object.defineProperty(
-                          scrollContainer, 'scrollHeight',
-                          {value: 1500, configurable: true});
 
                       tick(50);
 

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

@@ -124,6 +124,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   @ViewChild('autoScroll') scrollContainer!: ElementRef;
   @ViewChild('messageTextarea') public textarea: ElementRef|undefined;
   scrollInterrupted = false;
+  private scrollHeight = 0;
   private lastMessageRef: any = null;
   private nextPageToken = '';
   protected readonly i18n = inject(ChatPanelMessagesInjectionToken);
@@ -176,9 +177,12 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
             switchMap(
                 () => merge(
                     this.uiStateService.onNewMessagesLoaded().pipe(
-                        tap((response: ListResponse<any>) => {
+                        tap((response: ListResponse<any>&
+                             {isBackground?: boolean}) => {
                           this.nextPageToken = response.nextPageToken ?? '';
-                          this.restoreScrollPosition();
+                          if (!response.isBackground) {
+                            this.restoreScrollPosition();
+                          }
                         })),
                     this.onScroll.pipe(switchMap((event: Event) => {
                       const element = event.target as HTMLElement;
@@ -190,6 +194,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
                         return EMPTY;
                       }
 
+                      this.scrollHeight = element.scrollHeight;
                       return this.uiStateService
                           .lazyLoadMessages(this.sessionName(), {
                             pageSize: 100,
@@ -264,14 +269,16 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   }
 
   private restoreScrollPosition() {
-    // Scroll to the last unseen message after the new messages are loaded.
-    if (this.scrollContainer?.nativeElement) {
-      const oldScrollHeight = this.scrollContainer.nativeElement.scrollHeight;
-      setTimeout(() => {
-        const newScrollHeight = this.scrollContainer.nativeElement.scrollHeight;
-        this.scrollContainer.nativeElement.scrollTop =
-            newScrollHeight - oldScrollHeight;
-      });
+    if (!this.scrollHeight) {
+      this.scrollInterrupted = false;
+      this.scrollToBottom();
+      return;
+    }
+    const scrollContainer = this.scrollContainer?.nativeElement;
+    if (scrollContainer) {
+      scrollContainer.scrollTop =
+          scrollContainer.scrollHeight - this.scrollHeight;
+      this.scrollHeight = 0;
     }
   }
 

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

@@ -377,6 +377,8 @@ describe('ChatComponent', () => {
         ];
 
         beforeEach(async () => {
+          component.messages.set([]);
+          component.eventData = new Map();
           mockUiStateService.newMessagesLoadedResponse.next({
             items: events,
             nextPageToken: '',
@@ -390,6 +392,42 @@ describe('ChatComponent', () => {
           expect(messages[1].text).toBe('bot response');
         });
 
+        it(
+            'should not clear existing messages when new messages are loaded',
+            fakeAsync(() => {
+              component.messages.set([
+                {role: 'user', text: 'existing message'},
+              ]);
+              mockUiStateService.newMessagesLoadedResponse.next({
+                items: events,
+                nextPageToken: '',
+              });
+              tick();
+              const messages = component.messages();
+              expect(messages.length).toBe(3);
+              expect(messages[0].text).toBe('user message');
+              expect(messages[1].text).toBe('bot response');
+              expect(messages[2].text).toBe('existing message');
+            }));
+
+        it(
+            'should clear existing messages when new messages are loaded for a different session',
+            fakeAsync(() => {
+              component.messages.set([
+                {role: 'user', text: 'existing message'},
+              ]);
+              component.sessionId = 'session-2'; // change session
+              mockUiStateService.newMessagesLoadedResponse.next({
+                items: events,
+                nextPageToken: '',
+              });
+              tick();
+              const messages = component.messages();
+              expect(messages.length).toBe(2);
+              expect(messages[0].text).toBe('user message');
+              expect(messages[1].text).toBe('bot response');
+            }));
+
         it('should store events', () => {
           expect(component.eventData.has('event-1')).toBeFalse();
           expect(component.eventData.has('event-2')).toBeTrue();

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

@@ -194,6 +194,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   userId = 'user';
   appName = '';
   sessionId = ``;
+  sessionIdOfLoadedMessages = '';
   evalCase: EvalCase|null = null;
   updatedEvalCase: EvalCase|null = null;
   evalSetId = '';
@@ -388,8 +389,9 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
         .subscribe((enabled) => {
           if (enabled) {
             this.uiStateService.onNewMessagesLoaded().subscribe(
-                (response: ListResponse<any>) => {
-                  this.populateMessages(response.items, true);
+                (response: ListResponse<any> & {isBackground?: boolean}) => {
+                  this.populateMessages(
+                      response.items, true, !response.isBackground);
                   this.loadTraceData();
                 });
 
@@ -1237,9 +1239,12 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  private resetEventsAndMessages() {
+  private resetEventsAndMessages({keepMessages}: {keepMessages?:
+                                                      boolean} = {}) {
     this.eventData.clear();
-    this.messages.set([]);
+    if (!keepMessages) {
+      this.messages.set([]);
+    }
     this.artifacts = [];
   }
 
@@ -1255,21 +1260,28 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.changeDetectorRef.detectChanges();
   }
 
-  private populateMessages(events: any[], reverse: boolean = false) {
-    this.resetEventsAndMessages();
+  private populateMessages(
+      events: any[], reverseOrder: boolean = false,
+      keepOldMessages: boolean = false) {
+    this.resetEventsAndMessages({
+      keepMessages:
+          keepOldMessages && this.sessionIdOfLoadedMessages === this.sessionId
+    });
 
     events.forEach((event: any) => {
       const parts = event.content?.parts || [];
-      const partsToProcess = reverse ? [...parts].reverse() : parts;
+      const partsToProcess = reverseOrder ? [...parts].reverse() : parts;
       partsToProcess.forEach((part: any) => {
         this.storeMessage(
             part, event, event.author === 'user' ? 'user' : 'bot', undefined,
-            undefined, reverse);
+            undefined, reverseOrder);
         if (event.author && event.author !== 'user') {
           this.storeEvents(part, event);
         }
       });
     });
+
+    this.sessionIdOfLoadedMessages = this.sessionId;
   }
 
   protected updateWithSelectedSession(session: Session) {

src/app/core/services/ui-state.service.ts

@@ -39,7 +39,7 @@ export class UiStateService implements UiStateServiceInterface {
       new BehaviorSubject<boolean>(false);
   private readonly _isMessagesLoading = new BehaviorSubject<boolean>(false);
   protected readonly _newMessagesLoadedResponse =
-      new Subject<ListResponse<any>>();
+      new Subject<ListResponse<any>&{isBackground?: boolean}>();
   protected readonly _newMessagesLoadingFailedResponse =
       new Subject<{message: string}>();
   private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
@@ -96,8 +96,9 @@ export class UiStateService implements UiStateServiceInterface {
     );
   }
 
-  lazyLoadMessages(sessionName: string, listParams?: ListParams, isBackground?: boolean):
-      Observable<void> {
+  lazyLoadMessages(
+      sessionName: string, listParams?: ListParams,
+      isBackground?: boolean): Observable<void> {
     throw new Error('Not implemented');
   }