From 9e33b05a7473f43b84ed1fde0780c2058e9cff05 Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Wed, 1 Oct 2025 21:23:36 -0700
Subject: [PATCH 1/2] refactor: use signals in the AI Assistant UI

This commit updates the AI Assistant UI to use signals, to fix the problem with not clearing the textarea after the message submission (likely appeared after switching to zoneless).
---
 .../app/shared/ai-assistant/ai-assistant.html | 13 +++++----
 .../app/shared/ai-assistant/ai-assistant.ts   | 28 +++++++++----------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/report-app/src/app/shared/ai-assistant/ai-assistant.html b/report-app/src/app/shared/ai-assistant/ai-assistant.html
index f705c23..d9df3c6 100644
--- a/report-app/src/app/shared/ai-assistant/ai-assistant.html
+++ b/report-app/src/app/shared/ai-assistant/ai-assistant.html
@@ -15,7 +15,7 @@ <h2>AI Assistant</h2>
     <div class="header-actions">
       <button class="expand-button" (click)="toggleExpanded()">
         <span class="material-symbols-outlined">
-          @if (isExpanded) {
+          @if (isExpanded()) {
             close_fullscreen
           } @else {
             open_in_full
@@ -38,7 +38,7 @@ <h2>AI Assistant</h2>
           <div [innerHTML]="message.text"></div>
         </div>
       }
-      @if (isLoading) {
+      @if (isLoading()) {
         <div class="message model-message">
           <message-spinner message="Thinking..." />
         </div>
@@ -47,12 +47,13 @@ <h2>AI Assistant</h2>
     <div class="input-container">
       <textarea
         #userInputElement
-        [(ngModel)]="userInput"
+        [ngModel]="userInput()"
+        (ngModelChange)="userInput.set($event)"
         placeholder="Ask a question about the report..."
-        (keydown.enter)="send()"
-        [readonly]="isLoading"
+        (keydown.enter)="$event.preventDefault(); send()"
+        [readonly]="isLoading()"
       ></textarea>
-      <button (click)="send()" [disabled]="isLoading">
+      <button (click)="send()" [disabled]="isLoading()">
         <span class="material-symbols-outlined">send</span>
       </button>
     </div>
diff --git a/report-app/src/app/shared/ai-assistant/ai-assistant.ts b/report-app/src/app/shared/ai-assistant/ai-assistant.ts
index 1e1327b..abc3290 100644
--- a/report-app/src/app/shared/ai-assistant/ai-assistant.ts
+++ b/report-app/src/app/shared/ai-assistant/ai-assistant.ts
@@ -1,5 +1,5 @@
 import {HttpClient} from '@angular/common/http';
-import {Component, input, output} from '@angular/core';
+import {Component, inject, input, output, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {firstValueFrom} from 'rxjs';
 import {
@@ -20,7 +20,7 @@ interface Model {
   styleUrl: './ai-assistant.scss',
   imports: [FormsModule, MessageSpinner],
   host: {
-    '[class.expanded]': 'isExpanded',
+    '[class.expanded]': 'isExpanded()',
   },
 })
 export class AiAssistant {
@@ -28,9 +28,11 @@ export class AiAssistant {
   readonly close = output();
 
   protected messages: AiChatMessage[] = [];
-  protected userInput = '';
-  protected isLoading = false;
-  protected isExpanded = false;
+  protected userInput = signal('');
+  protected isLoading = signal(false);
+  protected isExpanded = signal(false);
+
+  private readonly http = inject(HttpClient);
 
   protected readonly models: Model[] = [
     {id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash'},
@@ -39,23 +41,21 @@ export class AiAssistant {
   ];
   protected selectedModel = this.models[0].id;
 
-  constructor(private readonly http: HttpClient) {}
-
   protected toggleExpanded(): void {
-    this.isExpanded = !this.isExpanded;
+    this.isExpanded.set(!this.isExpanded());
   }
 
   async send(): Promise<void> {
-    if (!this.userInput.trim() || this.isLoading) {
+    if (!this.userInput().trim() || this.isLoading()) {
       return;
     }
 
     const pastMessages = this.messages.slice();
 
-    this.messages.push({role: 'user', text: this.userInput});
-    const prompt = this.userInput;
-    this.userInput = '';
-    this.isLoading = true;
+    this.messages.push({role: 'user', text: this.userInput()});
+    const prompt = this.userInput();
+    this.userInput.set('');
+    this.isLoading.set(true);
 
     const payload: AiChatRequest = {
       prompt,
@@ -75,7 +75,7 @@ export class AiAssistant {
         text: 'Sorry, I failed to get a response. Please try again.',
       });
     } finally {
-      this.isLoading = false;
+      this.isLoading.set(false);
     }
   }
 }

From d38ca2d7457f52cbfd20a982f1e69d1a3c1b297f Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Wed, 1 Oct 2025 21:51:34 -0700
Subject: [PATCH 2/2] refactor: minor style updates for the AI Assistant UI

---
 report-app/src/app/shared/ai-assistant/ai-assistant.scss | 7 +++----
 report-app/src/styles.scss                               | 1 +
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/report-app/src/app/shared/ai-assistant/ai-assistant.scss b/report-app/src/app/shared/ai-assistant/ai-assistant.scss
index aa8e0d7..8cc49ba 100644
--- a/report-app/src/app/shared/ai-assistant/ai-assistant.scss
+++ b/report-app/src/app/shared/ai-assistant/ai-assistant.scss
@@ -7,7 +7,7 @@
   width: 500px;
   height: 650px;
   border-radius: 12px;
-  box-shadow: var(--shadow);
+  box-shadow: var(--overlay-shadow);
   background-color: var(--card-bg-color);
   overflow: hidden;
   display: flex;
@@ -38,7 +38,6 @@
 
   .header-title {
     display: flex;
-    flex-direction: column;
     gap: 8px;
     flex: 1;
     min-width: 0;
@@ -52,7 +51,7 @@
 
   h2 {
     margin: 0;
-    font-size: 1em;
+    font-size: 1.2em;
     color: var(--text-primary);
   }
 
@@ -158,7 +157,7 @@
     font-family: inherit;
     font-size: 1em;
     line-height: 1.4;
-    max-height: 100px;
+    height: 45px;
 
     &:focus {
       outline: none;
diff --git a/report-app/src/styles.scss b/report-app/src/styles.scss
index 6cf25e1..016c12f 100644
--- a/report-app/src/styles.scss
+++ b/report-app/src/styles.scss
@@ -45,6 +45,7 @@
     0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05),
     0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2)
   );
+  --overlay-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
   --transition-speed: 0.2s;
   --main-container-width: 1200px;
   --control-height: 36px;