136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
import { GeneralService } from './../../services/generalservice';
|
|
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
|
|
import { IChat } from '../../interfaces/main.interface'
|
|
import { Component, HostListener } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-chat-widget-component',
|
|
standalone: false,
|
|
templateUrl: './chat-widget-component.html',
|
|
styleUrl: './chat-widget-component.css',
|
|
})
|
|
export class ChatWidgetComponent {
|
|
isOpen = false;
|
|
// newMessage = '';
|
|
chatForm!: FormGroup;
|
|
messages:IChat[]=[];
|
|
|
|
// State สำหรับจัดการขนาด
|
|
isMaximized = false;
|
|
isResizing = false;
|
|
|
|
// ขนาดเริ่มต้น (px)
|
|
chatWidth = 320;
|
|
chatHeight = 384;
|
|
|
|
// ตัวแปรสำหรับคำนวณการลาก
|
|
private startX = 0;
|
|
private startY = 0;
|
|
private startWidth = 0;
|
|
private startHeight = 0;
|
|
|
|
|
|
constructor(
|
|
private generalService: GeneralService
|
|
) {
|
|
this.setupFormControl(); // เรียกใช้ตอนเริ่ม Component
|
|
}
|
|
|
|
setupFormControl() {
|
|
this.chatForm = new FormGroup({
|
|
message: new FormControl('', [Validators.required])
|
|
});
|
|
}
|
|
|
|
|
|
|
|
toggleChat() {
|
|
this.isOpen = !this.isOpen;
|
|
let body = {methods: 'ind'}
|
|
this.OnAiChat(body);
|
|
const isAlreadyHave = this.messages.some(sub => sub.text == 'รอAi ประมวณผลสักครู่');
|
|
if(isAlreadyHave === false){
|
|
this.messages.push({
|
|
text: 'รอAi ประมวณผลสักครู่',
|
|
isUser: false
|
|
})
|
|
}
|
|
this.isMaximized = false;
|
|
}
|
|
|
|
OnAiChat(value: any){
|
|
let url = 'https://n8n.nuttakit.work/webhook/Ai'
|
|
let request = {
|
|
methods: value.methods || 'cht',
|
|
message: value.message ?? ''
|
|
}
|
|
this.generalService.postUrl(url, request).subscribe({
|
|
next: (result: any) => {
|
|
if (result.code === 200) {
|
|
this.messages.push(result.data)
|
|
}else{
|
|
this.generalService.trowApi(result);
|
|
}
|
|
},
|
|
error: (error: any) => {
|
|
|
|
},
|
|
complete: () => {
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
toggleMaximize() {
|
|
this.isMaximized = !this.isMaximized;
|
|
}
|
|
|
|
sendMessage() {
|
|
let newMessage = this.chatForm.get('message')?.value;
|
|
if (newMessage.trim()) {
|
|
this.messages.push({ text: newMessage, isUser: true });
|
|
newMessage = '';
|
|
// setTimeout(() => {
|
|
// this.messages.push({
|
|
// 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;
|
|
}
|
|
}
|