ADK changes

PiperOrigin-RevId: 841664815

Author: google-genai-bot

package-lock.json

@@ -16,7 +16,12 @@
 
 @let isSessionLoading = uiStateService.isSessionLoading() | async;
 @if (appName != "" && !isSessionLoading) {
-<div #autoScroll class="chat-messages">
+<div #autoScroll class="chat-messages" (scroll)="onScroll.next($event)">
+  @if(uiStateService.isMessagesLoading() | async) {
+    <div class="messages-loading-container">
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  }
   <div #videoContainer></div>
   @for (message of messages; track message; let i = $index) {
   <div class="message-column-container">

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

@@ -436,3 +436,8 @@ button.video-rec-btn {
     width: 12px;
   }
 }
+
+.messages-loading-container {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}

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

@@ -19,18 +19,23 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {SimpleChange} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 // 1p-ONLY-IMPORTS: import {beforeEach, describe, expect, it}
+import {of} from 'rxjs';
 import {fakeAsync, initTestBed, tick} from '../../testing/utils';
 import {MatDialogModule} from '@angular/material/dialog';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
+import {SESSION_SERVICE} from '../../core/services/interfaces/session';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {
   MockFeatureFlagService
 } from '../../core/services/testing/mock-feature-flag.service';
+import {
+  MockSessionService
+} from '../../core/services/testing/mock-session.service';
 import {
   MockStringToColorService
 } from '../../core/services/testing/mock-string-to-color.service';
@@ -50,16 +55,19 @@ describe('ChatPanelComponent', () => {
   let mockUiStateService: MockUiStateService;
   let mockStringToColorService: MockStringToColorService;
   let mockAgentService: MockAgentService;
+  let mockSessionService: MockSessionService;
 
   beforeEach(async () => {
     mockFeatureFlagService = new MockFeatureFlagService();
     mockUiStateService = new MockUiStateService();
     mockAgentService = new MockAgentService();
+    mockSessionService = new MockSessionService();
 
     mockFeatureFlagService.isMessageFileUploadEnabledResponse.next(true);
     mockFeatureFlagService.isManualStateUpdateEnabledResponse.next(true);
     mockFeatureFlagService.isBidiStreamingEnabledResponse.next(true);
     mockFeatureFlagService.isFeedbackServiceEnabledResponse.next(true);
+    mockFeatureFlagService.isInfinityMessageScrollingEnabledResponse.next(true);
 
     mockStringToColorService = new MockStringToColorService();
     mockStringToColorService.stc.and.returnValue('rgb(255, 0, 0)');
@@ -84,6 +92,7 @@ describe('ChatPanelComponent', () => {
             {provide: FEATURE_FLAG_SERVICE, useValue: mockFeatureFlagService},
             {provide: UI_STATE_SERVICE, useValue: mockUiStateService},
             {provide: AGENT_SERVICE, useValue: mockAgentService},
+            {provide: SESSION_SERVICE, useValue: mockSessionService},
           ],
         })
         .compileComponents();
@@ -364,6 +373,54 @@ describe('ChatPanelComponent', () => {
          expect(component.scrollInterrupted).toBeFalse();
          expect(scrollContainerElement.scrollTo).toHaveBeenCalled();
        }));
+
+    it(
+        'should call uiStateService.lazyLoadMessages when scrolled to top',
+        fakeAsync(() => {
+          // Given
+          const initialMessageCount = 50;
+          const initialMessages = Array.from(
+              {length: initialMessageCount},
+              (_, i) => ({role: 'bot', text: `message ${i}`}));
+          component.messages = initialMessages;
+          fixture.detectChanges();
+
+          const scrollContainerElement = component.scrollContainer.nativeElement;
+          // Make sure the scroll height is greater than the client height
+          scrollContainerElement.style.height = '100px';
+          scrollContainerElement.style.overflow = 'auto';
+          scrollContainerElement.scrollTop = 100;
+          fixture.detectChanges();
+
+          // Initialize nextPageToken to allow loading more messages
+          mockUiStateService.newMessagesLoadedResponse.next(
+              {items: [], nextPageToken: 'initial-token'});
+          tick();
+
+          // When
+          scrollContainerElement.scrollTop = 0;
+          scrollContainerElement.dispatchEvent(new Event('scroll'));
+          tick(200);  // Wait for debounce
+
+          // Then
+          expect(mockUiStateService.lazyLoadMessages).toHaveBeenCalled();
+
+          mockUiStateService.lazyLoadMessagesResponse.next();
+
+          // When more messages are loaded
+          const newMessages =
+              Array.from({length: 20}, (_, i) => ({role: 'bot', text: `new ${i}`}));
+          component.messages = [...newMessages, ...component.messages];
+          mockUiStateService.newMessagesLoadedResponse.next(
+              {items: newMessages, nextPageToken: 'next'});
+          tick();
+          fixture.detectChanges();
+
+          // Then
+          expect(component.messages.length)
+              .toBe(initialMessageCount + newMessages.length);
+          expect(component.messages[0]).toEqual(newMessages[0]);
+        }));
   });
 
   describe('disabled features', () => {

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

@@ -17,7 +17,8 @@
 
 import {TextFieldModule} from '@angular/cdk/text-field';
 import {CommonModule, NgClass} from '@angular/common';
-import {AfterViewInit, Component, ElementRef, EventEmitter, inject, Input, OnChanges, Output, signal, SimpleChanges, Type, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, DestroyRef, effect, ElementRef, EventEmitter, inject, input, Input, OnChanges, Output, signal, SimpleChanges, Type, ViewChild} from '@angular/core';
+import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
@@ -30,18 +31,21 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
+import {EMPTY, NEVER, of, Subject} from 'rxjs';
+import {catchError, first, switchMap, tap} from 'rxjs/operators';
 
 import type {EvalCase} from '../../core/models/Eval';
+import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
+import {SESSION_SERVICE} from '../../core/services/interfaces/session';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
+import {ListResponse} from '../../core/services/interfaces/types';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {MediaType,} from '../artifact-tab/artifact-tab.component';
 import {AudioPlayerComponent} from '../audio-player/audio-player.component';
 import {MARKDOWN_COMPONENT, MarkdownComponentInterface} from '../markdown/markdown.component.interface';
 
 import {ChatPanelMessagesInjectionToken} from './chat-panel.component.i18n';
-import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
-import {toSignal} from '@angular/core/rxjs-interop';
 
 const ROOT_AGENT = 'root_agent';
 
@@ -70,6 +74,7 @@ const ROOT_AGENT = 'root_agent';
 })
 export class ChatPanelComponent implements OnChanges, AfterViewInit {
   @Input() appName: string = '';
+  sessionName = input<string>('');
   @Input() messages: any[] = [];
   @Input() isChatMode: boolean = true;
   @Input() evalCase: EvalCase|null = null;
@@ -109,15 +114,14 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   @Output() readonly updateState = new EventEmitter<void>();
   @Output() readonly toggleAudioRecording = new EventEmitter<void>();
   @Output() readonly toggleVideoRecording = new EventEmitter<void>();
-  @Output()
-  readonly feedback =
-      new EventEmitter<{direction: 'up'|'down'}>();
+  @Output() readonly feedback = new EventEmitter<{direction: 'up' | 'down'}>();
 
   @ViewChild('videoContainer', {read: ElementRef}) videoContainer!: ElementRef;
   @ViewChild('autoScroll') scrollContainer!: ElementRef;
   @ViewChild('messageTextarea') public textarea: ElementRef|undefined;
   scrollInterrupted = false;
   private previousMessageCount = 0;
+  private nextPageToken = '';
   protected readonly i18n = inject(ChatPanelMessagesInjectionToken);
   protected readonly uiStateService = inject(UI_STATE_SERVICE);
   private readonly stringToColorService = inject(STRING_TO_COLOR_SERVICE);
@@ -126,6 +130,8 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   );
   private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
   private readonly agentService = inject(AGENT_SERVICE);
+  private readonly sessionService = inject(SESSION_SERVICE);
+  private readonly destroyRef = inject(DestroyRef);
   readonly MediaType = MediaType;
 
   readonly isMessageFileUploadEnabledObs =
@@ -135,10 +141,73 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   readonly isBidiStreamingEnabledObs =
       this.featureFlagService.isBidiStreamingEnabled();
   readonly canEditSession = signal(true);
-  readonly isUserFeedbackEnabled = toSignal(this.featureFlagService.isFeedbackServiceEnabled());
-  readonly isLoadingAgentResponse = toSignal(this.agentService.getLoadingState());
+  readonly isUserFeedbackEnabled =
+      toSignal(this.featureFlagService.isFeedbackServiceEnabled());
+  readonly isLoadingAgentResponse =
+      toSignal(this.agentService.getLoadingState());
+
+  protected readonly onScroll = new Subject<Event>();
+
+  constructor(private sanitizer: DomSanitizer) {
+    effect(() => {
+      const sessionName = this.sessionName();
+      if (sessionName) {
+        this.nextPageToken = '';
+        this.uiStateService
+            .lazyLoadMessages(sessionName, {
+              pageSize: 100,
+              pageToken: this.nextPageToken,
+            })
+            .pipe(first())
+            .subscribe();
+      }
+    });
+  }
+
+  ngOnInit() {
+    if (this.featureFlagService.isInfinityMessageScrollingEnabled()) {
+      this.uiStateService.onNewMessagesLoaded()
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe((response: ListResponse<any>) => {
+            this.nextPageToken = response.nextPageToken ?? '';
+            // 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;
+              });
+            }
+          });
+
+      this.onScroll
+          .pipe(
+              takeUntilDestroyed(this.destroyRef),
+              switchMap((event: Event) => {
+                const element = event.target as HTMLElement;
+                if (element.scrollTop !== 0) {
+                  return EMPTY;
+                }
 
-  constructor(private sanitizer: DomSanitizer) {}
+                if (!this.nextPageToken) {
+                  return EMPTY;
+                }
+
+                return this.uiStateService
+                    .lazyLoadMessages(this.sessionName(), {
+                      pageSize: 100,
+                      pageToken: this.nextPageToken,
+                    })
+                    .pipe(first(), catchError(() => NEVER));
+              }),
+              )
+          .subscribe();
+    }
+  }
 
   ngAfterViewInit() {
     if (this.scrollContainer?.nativeElement) {

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

@@ -316,6 +316,7 @@
         (updateState)="updateState()"
         (toggleAudioRecording)="toggleAudioRecording()"
         (toggleVideoRecording)="toggleVideoRecording()"
+        [sessionName]="sessionId"
       ></app-chat-panel>
       }
     </mat-card>