livechat-widget
Version:
LiveChat Widget for Next.js applications
87 lines (86 loc) • 4.04 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
const LiveChatNextWidget = ({ roomCode, appId, roomName, theme = 'light', position = 'bottom-right', buttonText = 'Chat', buttonIcon, width = 350, height = 500, bgColor, textColor, bgInput, textInputColor, currentUserColor, onReady, onOpen, onClose, onMessage,
// รับข้อมูลผู้ใช้
username, profile_image, userCode, }) => {
const [isOpen, setIsOpen] = useState(true); // เปลี่ยนเป็น true เพื่อให้แสดงตั้งแต่เริ่มต้น
const iframeRef = useRef(null);
// สร้าง URL สำหรับ iframe
const getWidgetUrl = () => {
const baseUrl = `${window.location.origin}/widget`;
const params = new URLSearchParams({
roomCode,
appId,
});
if (roomName)
params.append('roomName', roomName);
if (theme)
params.append('theme', theme);
if (bgColor)
params.append('bgColor', bgColor);
if (textColor)
params.append('textColor', textColor);
if (bgInput)
params.append('bgInput', bgInput);
if (textInputColor)
params.append('textInputColor', textInputColor);
if (currentUserColor)
params.append('current_user_color', currentUserColor);
// เพิ่มข้อมูลผู้ใช้ใน URL parameters
if (username)
params.append('username', username);
if (profile_image)
params.append('profile_image', profile_image);
if (userCode)
params.append('userCode', userCode);
return `${baseUrl}?${params.toString()}`;
};
// กำหนดตำแหน่งของ widget
const getPositionClasses = () => {
switch (position) {
case 'bottom-right':
return 'bottom-4 right-4';
case 'bottom-left':
return 'bottom-4 left-4';
case 'top-right':
return 'top-4 right-4';
case 'top-left':
return 'top-4 left-4';
default:
return 'bottom-4 right-4';
}
};
// รับ message จาก iframe
useEffect(() => {
const handleMessage = (event) => {
if (typeof event.data !== 'object' || !event.data.type)
return;
switch (event.data.type) {
case 'widget:ready':
onReady === null || onReady === void 0 ? void 0 : onReady();
break;
case 'widget:close':
setIsOpen(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
break;
case 'widget:message':
onMessage === null || onMessage === void 0 ? void 0 : onMessage(event.data);
break;
default:
break;
}
};
window.addEventListener('message', handleMessage);
// เรียก onOpen เมื่อ component mount เนื่องจากเราเปิดแชทตั้งแต่เริ่มต้น
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
return () => window.removeEventListener('message', handleMessage);
}, [onReady, onClose, onMessage, onOpen]);
// ปิด widget
const closeWidget = () => {
setIsOpen(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
};
return (_jsx("div", { className: "w-full h-full", children: isOpen && (_jsx("div", { className: "rounded-lg shadow-xl overflow-hidden w-full h-full relative", children: _jsx("iframe", { ref: iframeRef, src: getWidgetUrl(), className: "w-full h-full border-0", title: "Live Chat Widget" }) })) }));
};
export default LiveChatNextWidget;