-complete mockup

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

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
+import { Component, HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-chat-widget-component',
@@ -7,30 +8,94 @@ import { Component } from '@angular/core';
   styleUrl: './chat-widget-component.css',
 })
 export class ChatWidgetComponent {
-  isOpen = false;
+  isOpen = true;
   newMessage = '';
+  chatForm!: FormGroup;
+
+  // State สำหรับจัดการขนาด
+  isMaximized = false;
+  isResizing = false;
+
+  // ขนาดเริ่มต้น (px)
+  chatWidth = 320;
+  chatHeight = 384;
+
+  // ตัวแปรสำหรับคำนวณการลาก
+  private startX = 0;
+  private startY = 0;
+  private startWidth = 0;
+  private startHeight = 0;
+
+
+  constructor() {
+    this.setupFormControl(); // เรียกใช้ตอนเริ่ม Component
+  }
+
+  setupFormControl() {
+    this.chatForm = new FormGroup({
+      message: new FormControl('', [Validators.required])
+    });
+  }
+
 
   messages = [
-    { text: 'สวัสดีครับ มีอะไรให้ทีมงานช่วยเหลือไหมครับ? 👋', isUser: false },
+    { text: 'สวัสดีครับ AI พร้อมช่วยเหลือครับ 👋', isUser: false },
+    { text: 'ลองกดปุ่มขยายที่หัวมุม หรือลากมุมซ้ายบนของกล่องเพื่อปรับขนาดได้เลยครับ', isUser: false },
   ];
 
   toggleChat() {
     this.isOpen = !this.isOpen;
+    this.isMaximized = false; // Reset ขนาดเมื่อปิด
+  }
+
+  toggleMaximize() {
+    this.isMaximized = !this.isMaximized;
   }
 
   sendMessage() {
     if (this.newMessage.trim()) {
-      // 1. ใส่ข้อความเราลงไป
       this.messages.push({ text: this.newMessage, isUser: true });
       this.newMessage = '';
-
-      // 2. จำลองบอทตอบกลับ (Auto Reply Simulation)
       setTimeout(() => {
         this.messages.push({
-          text: 'ขอบคุณที่ติดต่อมาครับ ขณะนี้เจ้าหน้าที่กำลังติดลูกค้าท่านอื่น จะรีบตอบกลับให้เร็วที่สุดครับ',
+          text: 'รับทราบครับ ระบบกำลังประมวลผล...',
           isUser: false
         });
       }, 1000);
     }
   }
+
+  // --- Logic สำหรับการ Resize (ลากขยาย) ---
+
+  startResizing(event: MouseEvent) {
+    event.preventDefault(); // ป้องกันการเลือก Text
+    this.isResizing = true;
+
+    // บันทึกตำแหน่งเมาส์และขนาดปัจจุบัน
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.startWidth = this.chatWidth;
+    this.startHeight = this.chatHeight;
+  }
+
+  // ใช้ @HostListener เพื่อดักจับ MouseMove ทั่วทั้ง Window
+  @HostListener('window:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    if (!this.isResizing) return;
+
+    // คำนวณความต่าง (Delta)
+    // หมายเหตุ: ลากไปทางซ้าย (ค่า X น้อยลง) ต้องทำให้กว้างขึ้น -> ใช้ startX - clientX
+    // ลากไปข้างบน (ค่า Y น้อยลง) ต้องทำให้สูงขึ้น -> ใช้ startY - clientY
+    const deltaX = this.startX - event.clientX;
+    const deltaY = this.startY - event.clientY;
+
+    // กำหนดขนาดใหม่ (จำกัดขนาดต่ำสุดไม่ให้เล็กเกินไป)
+    this.chatWidth = Math.max(300, this.startWidth + deltaX);
+    this.chatHeight = Math.max(350, this.startHeight + deltaY);
+  }
+
+  @HostListener('window:mouseup')
+  stopResizing() {
+    this.isResizing = false;
+  }
 }