livechat-widget
Version:
LiveChat Widget for Next.js applications
35 lines (34 loc) • 3.23 kB
JavaScript
"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect } from 'react';
import MessageItem from './MessageItem';
// เพิ่ม array สำหรับเก็บข้อความแจ้งเตือน
var WARNING_TEXT_ARRAY = ["ส่งข้อความผิดกฏ"];
var MessageList = function (_a) {
var messages = _a.messages, userCode = _a.userCode, currentUserCode = _a.currentUserCode, _b = _a.theme, theme = _b === void 0 ? 'light' : _b, bgColor = _a.bgColor, bgColorClass = _a.bgColorClass, textColor = _a.textColor, textColorClass = _a.textColorClass, currentUserColor = _a.currentUserColor, currentUserColorClass = _a.currentUserColorClass, adminColor = _a.adminColor, adminColorClass = _a.adminColorClass;
// ใช้ currentUserCode ถ้ามี ไม่งั้นใช้ userCode
var effectiveUserCode = currentUserCode || userCode || '';
var messagesEndRef = useRef(null);
var containerRef = useRef(null);
var isDark = theme === 'dark';
var bgClass = isDark ? 'bg-gray-900' : 'bg-white';
var textClass = isDark ? 'text-white' : 'text-gray-800';
// Scroll to bottom whenever messages change
useEffect(function () {
if (containerRef.current && messagesEndRef.current) {
// ใช้ scrollTop แทน scrollIntoView เพื่อให้เลื่อนเฉพาะภายใน container
containerRef.current.scrollTop = containerRef.current.scrollHeight;
// เพิ่มการเลื่อนอีกครั้งหลังจากผ่านไป 100ms เพื่อให้แน่ใจว่าเลื่อนหลังจาก render เสร็จสมบูรณ์
setTimeout(function () {
if (containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
}
}, 100);
}
}, [messages]);
return (_jsx("div", { ref: containerRef, className: "h-full overflow-y-auto p-4 ".concat(bgColorClass ? "".concat(bgColorClass) : (bgColor ? '' : bgClass), " ").concat(textColorClass ? "".concat(textColorClass) : (textColor ? '' : textClass)), style: {
backgroundColor: bgColor || '',
color: textColor || ''
}, children: messages.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("p", { className: "text-gray-500", children: "No messages yet" }) })) : (_jsxs(_Fragment, { children: [messages.map(function (message, index) { return (_jsx(MessageItem, { message: message, isOwnMessage: message.user_code === effectiveUserCode, theme: theme, bgColor: bgColor, bgColorClass: bgColorClass, textColor: textColor, textColorClass: textColorClass, currentUserColor: currentUserColor, currentUserColorClass: currentUserColorClass, adminColor: adminColor, adminColorClass: adminColorClass, isWarning: WARNING_TEXT_ARRAY.includes(message.content) }, message.id || "".concat(message.user_code, "-").concat(index))); }), _jsx("div", { ref: messagesEndRef })] })) }));
};
export default MessageList;