.

ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.html

@@ -3,7 +3,6 @@
     <div class="fixed bottom-5 right-5 z-50 flex flex-col items-end space-y-4 font-sans">
 
       <!-- หน้าต่างแชท -->
-      <!-- เราใช้ [style.width] และ [style.height] เพื่อควบคุมขนาดจากการยืดขยาย -->
       <div *ngIf="isOpen"
            [style.width.px]="isMaximized ? 600 : chatWidth"
            [style.height.px]="isMaximized ? 800 : chatHeight"
@@ -11,14 +10,10 @@
            [class.max-w-[90vw]]="isMaximized"
            [class.max-h-[80vh]]="isMaximized">
 
-        <!-- ============================== -->
         <!-- 1. ส่วนจุดดึงขยาย (Resize Handle) -->
-        <!-- ============================== -->
-        <!-- แสดงเฉพาะตอนไม่ได้ Maximize -->
         <div *ngIf="!isMaximized"
              (mousedown)="startResizing($event)"
              class="absolute top-0 left-0 w-6 h-6 z-50 cursor-nw-resize flex items-start justify-start p-1 opacity-0 hover:opacity-100 transition-opacity group">
-             <!-- Visual Indicator (มุมสามเหลี่ยมเล็กๆ) -->
              <div class="w-2 h-2 border-t-2 border-l-2 border-red-400 rounded-tl-sm"></div>
         </div>
 
@@ -37,22 +32,15 @@
             </div>
           </div>
 
-          <!-- ปุ่มควบคุม (Control Buttons) -->
           <div class="flex items-center space-x-1">
-
-            <!-- 2. ปุ่ม Maximize / Minimize -->
             <button (click)="toggleMaximize()" class="hover:bg-red-700 p-1 rounded transition text-red-100 hover:text-white" title="ขยาย/ย่อ">
-              <!-- Icon: Maximize -->
               <svg *ngIf="!isMaximized" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
               </svg>
-              <!-- Icon: Minimize -->
               <svg *ngIf="isMaximized" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9l-6-6M15 9V4.5M15 9h4.5M15 9l6-6M9 15v4.5M9 15H4.5M9 15l-6 6M15 15v4.5M15 15h4.5M15 15l6 6" />
               </svg>
             </button>
-
-            <!-- ปุ่ม Close -->
             <button (click)="toggleChat()" class="hover:bg-red-700 p-1 rounded transition text-red-100 hover:text-white">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -75,26 +63,31 @@
                   'bg-red-800 text-white rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl': msg.isUser,
                   'bg-white text-gray-800 border border-gray-200 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl': !msg.isUser
                  }"
-                 class="max-w-[85%] px-4 py-2 text-sm shadow-sm wrap-break-words relative group">
+                 class="max-w-[85%] px-4 py-2 text-sm shadow-sm break-words relative group">
               {{ msg.text }}
             </div>
           </div>
         </div>
 
-        <!-- Footer / Input -->
-        <div class="p-3 bg-white border-t border-gray-200 flex items-center space-x-2 shrink-0">
+        <!-- Footer / Input [Reactive Form] -->
+        <!-- Bind [formGroup] ที่ div นี้เพื่อให้ input ใช้งาน formControlName ได้ -->
+        <div class="p-3 bg-white border-t border-gray-200 flex items-center space-x-2 shrink-0" [formGroup]="chatForm">
           <button class="text-gray-400 hover:text-red-800 transition">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
             </svg>
           </button>
+
+          <!-- ใช้ formControlName แทน ngModel -->
           <input type="text"
-                 [(ngModel)]="newMessage"
+                 formControlName="message"
                  (keyup.enter)="sendMessage()"
                  placeholder="พิมพ์ข้อความ..."
                  class="flex-1 bg-gray-100 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:bg-white transition text-gray-700 placeholder-gray-400">
+
+          <!-- ใช้ chatForm.invalid ในการ disable ปุ่ม -->
           <button (click)="sendMessage()"
-                  [disabled]="!newMessage.trim()"
+                  [disabled]="chatForm.invalid"
                   class="text-red-950 hover:text-red-800 p-2 transition disabled:opacity-50 disabled:cursor-not-allowed">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
               <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
@@ -118,5 +111,5 @@
 
     </div>
 
-    <!-- Overlay กันกดส่วนอื่นตอนกำลังลาก (Optional) -->
+    <!-- Overlay กันกดส่วนอื่นตอนกำลังลาก -->
     <div *ngIf="isResizing" class="fixed inset-0 z-[60] cursor-nw-resize"></div>