diff --git a/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.html b/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.html index a2c6a19..5748d17 100644 --- a/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.html +++ b/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.html @@ -1,96 +1,122 @@ -
- -
+ +
- -
-
-
-
+ + +
+ + + + + +
+ +
+
+ + +
+
+
+
+ AI +
+
+
+
+ ผู้ช่วยวิเคราะห์ข้อมูล + ตอบกลับทันที +
+
+ + +
+ + + + + + +
+
+ + +
+
+ +
AI
-
-
-
- ผู้ช่วยวิเคราะห์ข้อมูล - ตอบกลับภายใน 1 นาที + +
+ {{ msg.text }} +
- -
- -
-
- - -
- AI -
- -
- {{ msg.text }} - - - -
+ +
+ + +
- -
- - - -
+ + +
- - - -
+ +
diff --git a/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.ts b/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.ts index b1b573c..476e897 100644 --- a/ng-ttc-frontend/src/app/component/chat-widget-component/chat-widget-component.ts +++ b/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; + } }