refactor: use signals in the AI Assistant UI

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

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,17 +20,19 @@ 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);
+
+  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);
     }
   }
 }

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;