ADK changes

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

@@ -73,6 +73,7 @@
         @if (shouldShowMessageCard(message)) {
         <mat-card
           class="message-card"
+          [class.landing-message]="message.isLanding"
           [ngClass]="{
             'eval-fail': message.evalStatus === 2,
             'message-card--highlighted': shouldMessageHighlighted(i)

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

@@ -49,6 +49,14 @@
       --chat-panel-function-event-button-highlight-background-color
     );
   }
+
+  &.landing-message {
+    border: 2px solid var(--chat-panel-landing-message-border-color, #4285f4);
+    background-color: var(
+      --chat-panel-landing-message-background-color,
+      #e8f0fe
+    );
+  }
 }
 
 .function-event-button {
@@ -67,11 +75,15 @@
 }
 
 .state-delta-button {
-  background-color: var(--chat-panel-function-event-button-background-color) !important;
+  background-color: var(
+    --chat-panel-function-event-button-background-color
+  ) !important;
 }
 
 .artifact-delta-button {
-  background-color: var(--chat-panel-function-event-button-background-color) !important;
+  background-color: var(
+    --chat-panel-function-event-button-background-color
+  ) !important;
 }
 
 .function-event-button-highlight {
@@ -322,7 +334,10 @@
 }
 
 :host ::ng-deep .mat-mdc-mini-fab {
-  background-color: var(--chat-panel-mat-mdc-mini-fab-background-color, #4285f4);
+  background-color: var(
+    --chat-panel-mat-mdc-mini-fab-background-color,
+    #4285f4
+  );
   mat-icon {
     color: var(--chat-panel-mat-mdc-mini-fab-mat-icon-color, white);
   }
@@ -496,8 +511,6 @@ button.video-rec-btn {
   height: 100%;
 }
 
-
-
 .messages-loading-container {
   margin-top: 1em;
   margin-bottom: 1em;

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

@@ -70,7 +70,7 @@ 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, HIDE_SIDE_PANEL_QUERY_PARAM, INITIAL_USER_INPUT_QUERY_PARAM,} from './chat.component';
+import {ChatComponent, HIDE_SIDE_PANEL_QUERY_PARAM, INITIAL_USER_INPUT_QUERY_PARAM, LANDING_PAGE_CONTENT_QUERY_PARAM,} from './chat.component';
 
 // Mock EvalTabComponent to satisfy the required viewChild in ChatComponent
 @Component({
@@ -506,6 +506,37 @@ describe('ChatComponent', () => {
         });
       });
     });
+
+    it(
+        'should display landing page content from "landing" query param',
+        fakeAsync(() => {
+          const markdownContent = '# Welcome to the App\n\nThis is the landing page.';
+          const encodedContent = encodeURIComponent(markdownContent);
+          const queryParams = {
+            [LANDING_PAGE_CONTENT_QUERY_PARAM]: encodedContent,
+          };
+          mockActivatedRoute.snapshot!.queryParams = queryParams;
+          mockActivatedRoute.queryParams = of(queryParams);
+
+          // Mock session service to return a new session
+          mockSessionService.createSessionResponse.next(
+              {id: SESSION_1_ID, state: {}, events: []});
+
+          fixture = TestBed.createComponent(ChatComponent);
+          component = fixture.componentInstance;
+          fixture.detectChanges();
+          tick(); // Allow component to stabilize and load session
+
+          // Manually call displayLandingPageContent to simulate the effect
+          (component as any).displayLandingPageContent();
+          tick();
+
+          const messages = component.messages();
+          expect(messages.length).toBe(1);
+          expect(messages[0].role).toBe('bot');
+          expect(messages[0].text).toBe(markdownContent);
+          expect(messages[0].isLanding).toBeTrue();
+        }));
   });
 
   describe('Session Management', () => {

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

@@ -79,6 +79,8 @@ const ROOT_AGENT = 'root_agent';
 export const INITIAL_USER_INPUT_QUERY_PARAM = 'q';
 /** Query parameter for hiding the side panel. */
 export const HIDE_SIDE_PANEL_QUERY_PARAM = 'hideSidePanel';
+/** Query parameter for landing page content. */
+export const LANDING_PAGE_CONTENT_QUERY_PARAM = 'landing';
 
 
 /** A2A data part markers */
@@ -273,6 +275,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
           this.router.navigate([], {
             relativeTo: this.activatedRoute,
             queryParams: {app: app[0]},
+            queryParamsHandling: 'merge',
           });
         }
       }),
@@ -467,6 +470,26 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  private displayLandingPageContent() {
+    this.activatedRoute.queryParams.pipe(first()).subscribe(params => {
+      const landingContent = params[LANDING_PAGE_CONTENT_QUERY_PARAM];
+      if (landingContent) {
+        try {
+          const decodedContent = decodeURIComponent(landingContent);
+          // Check if the landing message already exists
+          if (!this.messages().some(m => m.isLanding)) {
+            this.messages.update(messages => [
+              {role: 'bot', text: decodedContent, isLanding: true},
+              ...messages
+            ]);
+          }
+        } catch (e) {
+          console.error('Error decoding landing page content:', e);
+        }
+      }
+    });
+  }
+
   private hideSidePanelIfNeeded() {
     this.activatedRoute.queryParams
         .pipe(
@@ -486,6 +509,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.artifacts = [];
     this.userInput = '';
     this.longRunningEvents = [];
+    this.displayLandingPageContent();
   }
 
   createSession() {
@@ -1709,6 +1733,8 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
           }
           this.loadTraceData();
         });
+
+    this.displayLandingPageContent();
   }
 
   protected updateWithSelectedEvalCase(evalCase: EvalCase) {