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).

Author: AndrewKushnir

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>

report-app/src/app/shared/ai-assistant/ai-assistant.ts

@@ -1,5 +1,14 @@
 import {HttpClient} from '@angular/common/http';
-import {Component, input, output} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  inject,
+  Injector,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {firstValueFrom} from 'rxjs';
 import {
@@ -20,17 +29,20 @@ interface Model {
   styleUrl: './ai-assistant.scss',
   imports: [FormsModule, MessageSpinner],
   host: {
-    '[class.expanded]': 'isExpanded',
+    '[class.expanded]': 'isExpanded()',
   },
 })
 export class AiAssistant {
   readonly reportGroupId = input.required<string>();
   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);
+  protected messagesContainer = viewChild('messagesContainer', {read: ElementRef});
+
+  private readonly http = inject(HttpClient);
 
   protected readonly models: Model[] = [
     {id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash'},
@@ -39,23 +51,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 +85,7 @@ export class AiAssistant {
         text: 'Sorry, I failed to get a response. Please try again.',
       });
     } finally {
-      this.isLoading = false;
+      this.isLoading.set(false);
     }
   }
 }