livechat-widget
Version:
LiveChat Widget for Next.js applications
74 lines (73 loc) • 5.21 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Image from 'next/image';
var DEFAULT_PROFILE_IMAGE = '/image/profile.png';
var MessageItem = function (_a) {
var _b, _c, _d;
var message = _a.message, isOwnMessage = _a.isOwnMessage, _e = _a.theme, theme = _e === void 0 ? 'light' : _e, textColor = _a.textColor, textColorClass = _a.textColorClass, bgColor = _a.bgColor, bgColorClass = _a.bgColorClass, currentUserColor = _a.currentUserColor, currentUserColorClass = _a.currentUserColorClass, adminColor = _a.adminColor, adminColorClass = _a.adminColorClass, _f = _a.isWarning, isWarning = _f === void 0 ? false : _f;
// Format date
var formatDate = function (dateString) {
var date = new Date(dateString);
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};
// ตรวจสอบว่า message.user_info มีค่าหรือไม่
var username = ((_b = message.user_info) === null || _b === void 0 ? void 0 : _b.username) || 'Unknown User';
var profileImage = ((_c = message.user_info) === null || _c === void 0 ? void 0 : _c.profile_image) || DEFAULT_PROFILE_IMAGE;
var userRole = ((_d = message.user_info) === null || _d === void 0 ? void 0 : _d.role) || 'user';
var isAdmin = userRole === 'admin';
// console.log("user_info", message.user_info);
// console.log("isAdmin", isAdmin);
var isDark = theme === 'dark';
// กำหนดสีพื้นฐานจาก props
var baseTextColor = textColor || (isDark ? '#ffffff' : '#333333');
// สร้างสีสำหรับส่วนต่างๆ โดยใช้การ drop opacity
var getUsernameColor = function () {
// ถ้าเป็นข้อความของเรา ใช้สีที่กำหนดเฉพาะ
var usernameColor = isOwnMessage && currentUserColor
? currentUserColor
: isAdmin && adminColor
? adminColor
: baseTextColor;
return usernameColor;
};
var getTimeColor = function () {
// ใช้สีเดียวกับ textColor แต่ลดความเข้มลงมากที่สุด
return {
color: baseTextColor,
opacity: 0.5
};
};
var getMessageColor = function () {
// ใช้สีเดียวกับ textColor แต่ใช้ความเข้มเต็มที่
return {
color: baseTextColor,
opacity: 1.0
};
};
// กำหนด Tailwind class สำหรับสีของผู้ใช้ปัจจุบัน
var usernameTailwindClass = isOwnMessage && currentUserColorClass
? "".concat(currentUserColorClass)
: isAdmin && adminColorClass
? "".concat(adminColorClass)
: textColorClass
? "".concat(textColorClass, " opacity-90")
: '';
// กำหนด class สำหรับพื้นหลังข้อความ
var messageBgClass = isWarning
? isDark ? 'bg-gray-700' : 'bg-gray-100'
: isOwnMessage
? isDark ? 'bg-blue-700' : 'bg-blue-100'
: isAdmin
? isDark ? 'bg-purple-700' : 'bg-purple-100'
: isDark ? 'bg-gray-700' : 'bg-gray-100';
// กำหนด class สำหรับข้อความ
var messageTextClass = isWarning
? isDark ? 'text-red-400 font-semibold' : 'text-red-600 font-semibold'
: isAdmin && adminColorClass
? adminColorClass
: textColorClass || (isDark ? 'text-white' : 'text-gray-800');
return (_jsxs("div", { className: "flex items-start gap-2 mb-4", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "relative w-8 h-8 rounded-full overflow-hidden", children: _jsx(Image, { src: profileImage, alt: username, fill: true, className: "object-cover" }) }) }), _jsxs("div", { className: "flex flex-col max-w-[75%]", children: [_jsxs("div", { className: "flex items-baseline mb-0.5", children: [_jsx("span", { className: "text-sm ".concat(usernameTailwindClass), style: !usernameTailwindClass ? { color: getUsernameColor() } : {}, children: username }), _jsx("span", { className: "text-xs ml-1.5 ".concat(textColorClass ? "".concat(textColorClass, " opacity-50") : ''), style: !textColorClass ? getTimeColor() : {}, children: message.created_at && formatDate(message.created_at) })] }), _jsx("div", { className: "rounded-lg p-2 ".concat(bgColorClass ? "".concat(bgColorClass) : messageBgClass), style: {
backgroundColor: bgColor || ''
}, children: _jsx("span", { className: "".concat(messageTextClass), style: !textColorClass && !adminColorClass ? { color: textColor || '' } : {}, children: message.is_deleted ? (_jsx("span", { className: "italic text-gray-500", children: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E16\u0E39\u0E01\u0E25\u0E1A\u0E41\u0E25\u0E49\u0E27" })) : (message.content) }) })] })] }));
};
export default MessageItem;