From 2cecc4aceb869b829b9807225ba0b69569edd030 Mon Sep 17 00:00:00 2001
From: kushal-saha <kushal.sentientgeeks@outlook.com>
Date: Mon, 4 May 2026 12:00:13 +0000
Subject: [PATCH] refactor: migrate chat message form to signal based form

---
 frontend/src/app/chat/chat.html |  5 ++---
 frontend/src/app/chat/chat.ts   | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/chat/chat.html b/frontend/src/app/chat/chat.html
index d82157a..0410a41 100644
--- a/frontend/src/app/chat/chat.html
+++ b/frontend/src/app/chat/chat.html
@@ -64,15 +64,14 @@
         <input
           class="flex-1 bg-transparent border-none text-white text-base py-1 px-2 outline-none font-inherit placeholder-slate-500"
           type="text"
-          [formControl]="messageControl"
+          [formField]="messageForm.message"
           (keydown.enter)="sendMessage()"
           placeholder="Type a message..."
-          [disabled]="messageStore.isLoading()"
         />
         <button
           class="bg-linear-to-br from-[#00f2fe] to-[#4facfe] border-none w-8 h-8 rounded-full flex items-center justify-center cursor-pointer text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 hover:shadow-[0_10px_20px_rgba(79,172,254,0.3)] active:scale-95 disabled:hover:scale-100 disabled:hover:translate-y-0 disabled:!bg-none disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none"
           (click)="sendMessage()"
-          [disabled]="!messageControl.value || messageStore.isLoading()"
+          [disabled]="messageForm.message().invalid() || messageStore.isLoading()"
         >
           <svg class="w-3 h-3 fill-current" viewBox="0 0 24 24">
             <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
diff --git a/frontend/src/app/chat/chat.ts b/frontend/src/app/chat/chat.ts
index c819e8e..1d0d5bb 100644
--- a/frontend/src/app/chat/chat.ts
+++ b/frontend/src/app/chat/chat.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, effect, inject } from '@angular/core';
+import { Component, ElementRef, ViewChild, effect, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ChatStore, MessageStore } from './chat.store';
@@ -7,21 +7,26 @@ import { Sidebar } from '../core/layout/sidebar/sidebar';
 import { Loader } from '../shared/loader/loader';
 import { InfiniteScroll } from '../core/directives/infinite-scroll';
 import { environment } from '../../environments/environment.development';
+import { form, FormField, max, min, required } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-chat',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, Sidebar, Loader, InfiniteScroll],
+  imports: [CommonModule, Sidebar, Loader, InfiniteScroll, FormField],
   templateUrl: './chat.html',
   styleUrl: './chat.css',
 })
 export class Chat {
   protected readonly messageStore = inject(MessageStore);
   private readonly route = inject(ActivatedRoute);
+  private messageModel = signal<{ message: string }>({ message: '' });
 
   @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
 
-  messageControl = new FormControl('');
+  messageForm = form(this.messageModel, (schema) => {
+    required(schema.message, { message: 'Message is required' });
+    min(schema.message, 3, { message: 'Message must be minimum 3 letters' });
+  });
 
   constructor() {
     // Scroll to bottom when messages change
@@ -48,7 +53,7 @@ export class Chat {
   errorMessage = '';
 
   sendMessage() {
-    const value = this.messageControl.value;
+    const value = this.messageForm.message().value();
     if (value && value.trim() && !this.messageStore.isLoading()) {
       const words = value.trim().split(/\s+/).length;
       if (words > 400) {
@@ -57,7 +62,7 @@ export class Chat {
       }
       this.errorMessage = '';
       this.messageStore.sendMessage(value.trim());
-      this.messageControl.setValue('');
+      this.messageForm.message().value.set('');
     }
   }