livechat-widget
Version:
LiveChat Widget for Next.js applications
59 lines (58 loc) • 4.67 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { IoSendSharp } from "react-icons/io5";
var MessageInput = function (_a) {
var onSendMessage = _a.onSendMessage, isConnected = _a.isConnected, _b = _a.theme, theme = _b === void 0 ? 'light' : _b, bgColor = _a.bgColor, bgColorClass = _a.bgColorClass, textColor = _a.textColor, textColorClass = _a.textColorClass, bgInput = _a.bgInput, bgInputClass = _a.bgInputClass, textInputColor = _a.textInputColor, textInputColorClass = _a.textInputColorClass, buttonBgColor = _a.buttonBgColor, buttonBgClass = _a.buttonBgClass, _c = _a.userRole, userRole = _c === void 0 ? 'user' : _c;
var _d = useState(''), message = _d[0], setMessage = _d[1];
var _e = useState(''), errorMessage = _e[0], setErrorMessage = _e[1];
var _f = useState(false), isConnecting = _f[0], setIsConnecting = _f[1];
// เพิ่ม useEffect เพื่อตรวจสอบสถานะการเชื่อมต่อ
useEffect(function () {
if (!isConnected) {
setIsConnecting(true);
}
else {
setIsConnecting(false);
}
}, [isConnected]);
var containsLink = function (text) {
var urlRegex = /(https?:\/\/[^\s]+)|(www\.[^\s]+)|([^\s]+\.(com|net|org|io|co|me|dev|app|site|xyz|info))/gi;
return urlRegex.test(text);
};
var handleSubmit = function (e) {
e.preventDefault();
if (message.trim() && isConnected) {
if (userRole !== 'admin' && containsLink(message)) {
onSendMessage("ส่งข้อความผิดกฏ");
setErrorMessage('ไม่อนุญาตให้ส่งลิงค์');
setTimeout(function () { return setErrorMessage(''); }, 3000);
}
else {
onSendMessage(message.trim());
setErrorMessage('');
}
setMessage('');
}
};
var isDark = theme === 'dark';
var formBgClass = isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200';
var inputBgClass = isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-100 border-transparent';
var inputTextClass = isDark ? 'text-white' : 'text-gray-800';
var formTextClass = isDark ? 'text-white' : 'text-gray-800';
var defaultButtonBgClass = isDark ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-500 hover:bg-blue-600';
return (_jsxs("form", { onSubmit: handleSubmit, className: "p-4 border-t ".concat(textInputColorClass || (textInputColor ? '' : inputTextClass), " ").concat(bgColorClass ? "".concat(bgColorClass) : (bgColor ? '' : formBgClass), " ").concat(textColorClass ? "".concat(textColorClass) : (textColor ? '' : formTextClass)), style: {
backgroundColor: bgColor || '',
color: textInputColor || '',
width: '100%'
}, children: [errorMessage && (_jsx("div", { className: "mb-2 text-red-500 text-sm", children: errorMessage })), _jsxs("div", { className: "flex items-center w-full", children: [_jsx("input", { type: "text", value: message, onChange: function (e) { return setMessage(e.target.value); }, placeholder: isConnected ? "พิมพ์ข้อความ..." : isConnecting ? "กำลังเชื่อมต่อ..." : "ไม่สามารถเชื่อมต่อได้", disabled: !isConnected, className: "flex-1 px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 ".concat(bgInputClass ? "".concat(bgInputClass) : (bgInput ? '' : inputBgClass), " ").concat(textInputColorClass || (textInputColor ? '' : inputTextClass), " ").concat(!isConnected && 'opacity-50'), style: {
backgroundColor: bgInput || '',
color: textInputColor || '',
minWidth: 0,
} }), _jsx("button", { type: "submit", disabled: !message.trim() || !isConnected, className: "px-4 py-2 rounded-r-md text-white font-medium ".concat(buttonBgClass ? buttonBgClass : (buttonBgColor ? '' : defaultButtonBgClass), " ").concat((!message.trim() || !isConnected) ? 'opacity-50 cursor-not-allowed' : ''), style: {
whiteSpace: 'nowrap',
flexShrink: 0,
backgroundColor: buttonBgColor || ''
}, children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "mr-1", children: "\u0E2A\u0E48\u0E07" }), _jsx(IoSendSharp, { size: 16 })] }) })] })] }));
};
export default MessageInput;