import React, { useContext, useEffect, useState } from 'react';
import { FaFileImage } from 'react-icons/fa';
import { AiOutlineSend } from 'react-icons/ai';
import { MdOndemandVideo } from 'react-icons/md';
import { AiOutlineFileAdd } from 'react-icons/ai';
import axios from 'axios';
import toast from 'react-hot-toast';
import { AuthContext } from '../../../context/UserContext';
import { Client } from '@stomp/stompjs';
import { sendChatMessage } from './SendMessageFunction';
const MessageInput = ({
setAllChat,
selectedCustomerChat,
allChat,
}) => {
const [message, setMessage] = useState('');
const [selectedFiles, setSelectedFiles] = useState([]);
const [fileType, setFileType] = useState(null); // Default to 'image'
const [allPart, setAllPart] = useState([]);
const { chattingUser } = useContext(AuthContext);
const [newOne, setNewOne] = useState({});
const MAX_WAIT_TIME = 60000;
const [response, setResponse] = useState({});
function getCurrentTimestampInSeconds() {
const currentDate = new Date();
const timestampInSeconds = Math.floor(currentDate.getTime() / 1000);
return timestampInSeconds;
}
// <---------------------------Final Web
Socket------------------------------------>
const [connected, setConnected] = useState(false);
const [parts, setParts] = useState("");
const stompClient = new Client({
brokerURL: 'wss://grozziie.zjweiting.com:3091/CustomerService-Chat/websocket',
// brokerURL: 'ws://web-api-tht-env.eba-kcaa52ff.us-east-
1.elasticbeanstalk.com/websocket',
});
useEffect(() => {
const connect = () => {
stompClient.onConnect = (frame) => {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe(`/topic/${chattingUser?.userId}`, (message) => {
console.log(message?.body, "coming sms")
const newSMS = JSON.parse(message.body);
showGreeting(message.body, newSMS)
// console.log(newSMS, "newSMS")
toast.success(`Sms send from Name:${chattingUser?.userName} Id:$
{chattingUser?.userId}`, {
position: "top-right"
})
});
};
stompClient.onWebSocketError = (error) => {
console.error('Error with websocket', error);
// Handle error here, you can update state or show an error message to the
user.
};
stompClient.activate();
};
// Try to connect
connect();
// Retry every 5 seconds if not connected
const retryInterval = setInterval(() => {
if (!connected) {
console.log('Reconnecting to WebSocket...');
connect();
} else {
clearInterval(retryInterval);
}
}, 5000);
// Cleanup on unmount
return () => {
clearInterval(retryInterval);
stompClient.deactivate();
};
}, [connected]);
// function after getting every sms
//public =========================
let myArraySentId = [];
let myArryPartTotal = [];
let myArryPartNumberCount = [];
let myArryGetFlag = [false];
let myArryGetString = [];
const [newChat, setNewChat] = useState([]);
let id = 0;
let flag = false;
//===========================
const showGreeting = async (message, sms) => {
if (sms.msgType === "ans") {
//setResponse(sms);
getAnswer(sms);
return;
}
console.log(sms, "checking response sms")
//Add New response
const textMessage = {
chatId: sms?.chatId,
sentBy: sms?.sentTo,
sentTo: sms?.sentBy,
sentId: sms?.sentId,
message: sms?.msgType,
msgType: "ans",
totalPart: sms?.totalPart,
partNo: sms?.partNo,
timestamp: getCurrentTime(),
};
//one user
const getAnswer=()=>{
if(sms.totalPart==1)
{
//show your message/video/file/image
}
else
{
if(sms.partNo==sms.totalPart)
{
//show your message/video/file/image
}
else
{
//getmap [10] totalpart=10; getpartnumber=1
//sent next part
sendChatMessage(1);
}
}
};
sendChatMessage(textMessage);
// try {
// const response = await axios.post(
// 'https://grozziie.zjweiting.com:3091/CustomerService-Chat/api/dev/
messages',
// sms
// );
// console.log(response, "response")
// if (response.status === 201) {
// sendChatMessage(sms);
// }
// return sms; // Return the message if sent successfully
// } catch (error) {
// // Handle errors from the API request
// console.error('Error sending message(s):', error);
// throw error;
// }
//finish in here
//console.log(sms,"intial value")
// setComingSMS(sms);
// setAllChat((prevChat) => [...prevChat, sms]);
//==============================================
console.log(sms.totalPart);
console.log(sms.message);
/*
if(id==0)
{
myArraySentId.push(sms.sentId);//4
myArryPartTotal.push(sms.totalPart);//1
myArryGetString.push(sms.message);//hello
//mytype:text
//let partNumber=sms.partNo;
if(sms.totalPart==1)
{
myArryPartNumberCount.push(sms.partNo)//2
myArryGetFlag.push(true);//can show
console.log("======================")
console.log(myArryGetString[0])
console.log("======================")
//setAllChat((prevChat) => [...prevChat, sms]);
}
else
{
myArryGetFlag.push(false);
myArryPartNumberCount.push(1)//2
}
id++;
}
else
{
console.log("totalpart")
console.log(sms.totalPart)
for(let i=0;i<id;i++)
{
console.log("0000000")
console.log(sms.sentId)
console.log(myArraySentId[i])
if(myArraySentId[i]==sms.sentId)
{
myArryPartNumberCount[i]=myArryPartNumberCount[i]+1; //2 1
console.log("------------------------2")
console.log(myArryPartNumberCount[i])
myArryGetString[i]=myArryPartTotal[i]+sms.message;
if(myArryPartNumberCount[i]==myArryPartTotal[i])
{
myArryGetFlag[i]=true;//can show
console.log("======================")
console.log(myArryGetString[i])
console.log("======================")
flag=true;
}
else
{
}
break;
}
if(!flag)
{
flag=false;
myArraySentId.push(sms.sentId);//4
myArryPartTotal.push(sms.totalPart);//1
myArryGetString.push(sms.message);//hello
//mytype:text
//let partNumber=sms.partNo;
if(sms.totalPart==1)
{
myArryGetFlag.push(true);//can show
myArryPartNumberCount.push(sms.partNo)//2
//setAllChat((prevChat) => [...prevChat, sms]);
}
else
{
myArryGetFlag.push(false);
console.log("ssssss")
myArryPartNumberCount.push(1)//2
console.log(myArryPartNumberCount)
console.log(myArraySentId)
}
id++;
}
*/
//==============================================
// const newSMS = mergeMessagesBySentId(sms)
// if (sms?.totalPart > 1) {
// if (sms?.partNo === 1) {
// console.log(sms?.partNo, "check the part no to send")
// setNewOne(sms);
// }
// else if (sms?.partNo === sms?.totalPart && sms?.sentId === newOne?.sentId)
{
// console.log(sms?.partNo, "check the part no to send")
// setAllChat((prevChat) => [...prevChat, {
// chatId: newOne?.chatId,
// sentBy: newOne?.sentBy,
// sentTo: newOne?.sentTo,
// sentId: newOne?.sentId,
// message: newOne?.message + sms?.message,
// msgType: newOne?.msgType,
// totalPart: newOne?.totalPart,
// partNo: newOne?.partNo,
// timestamp: getCurrentTime(),
// }]);
// setNewOne({});
// }
// else if (sms?.partNo > 1 && sms?.partNo < sms?.totalPart && sms?.sentId
=== newOne?.sentId) {
// console.log(sms?.partNo, "check the part no to send")
// setNewOne({
// chatId: newOne?.chatId,
// sentBy: newOne?.sentBy,
// sentTo: newOne?.sentTo,
// sentId: newOne?.sentId,
// message: newOne?.message + sms?.message,
// msgType: newOne?.msgType,
// totalPart: newOne?.totalPart,
// partNo: newOne?.partNo,
// timestamp: getCurrentTime(),
// })
// }
// }
setAllChat((prevChat) => [...prevChat, sms]);
};
// console.log(allChat, "show after marge")
// <---------------------------Final Web
Socket------------------------------------>
const handleFileChange = (e) => {
const files = e.target.files;
const fileArray = Array.from(files);
setSelectedFiles(fileArray);
};
function getCurrentTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
// Determine AM or PM
const ampm = hours >= 12 ? 'PM' : 'AM';
// Convert hours to 12-hour format
const formattedHours = hours % 12 || 12;
// Add leading zeros to minutes if needed
const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
return `${formattedHours}:${formattedMinutes} ${ampm}`;
}
const handleRemoveFile = (fileIndex) => {
const updatedFiles = selectedFiles.filter((_, index) => index !== fileIndex);
setSelectedFiles(updatedFiles);
};
// Function to read a file as base64
const readAsBase64 = (file) => {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
resolve(reader.result.split(',')[1]); // Remove the
"data:image/jpeg;base64," part
};
});
};
function splitBase64String(base64Data, maxSizeInBytes) {
const base64Parts = [];
let currentPart = '';
for (let i = 0; i < base64Data.length; i++) {
currentPart += base64Data.charAt(i);
if (currentPart.length * 0.75 >= maxSizeInBytes) {
// If the current part exceeds the specified size, push it to the array
base64Parts.push(currentPart);
currentPart = '';
}
}
if (currentPart.length > 0) {
// Push any remaining data as a part
base64Parts.push(currentPart);
}
return base64Parts;
}
const handleFileIconClick = (type) => {
// Programmatically trigger the input file dialog when the icon is clicked
document.getElementById('fileInput').click();
setFileType(type);
};
const handleKeyDown = (e) => {
// Check if the Enter key is pressed (key code 13)
if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
}
};
// function to send the sms part by part
const handleSubmit = async (e) => {
e.preventDefault();
if (message.trim() !== '' || selectedFiles.length > 0) {
const allMessages = [];
if (message.trim() !== '') {
const textMessage = {
chatId: selectedCustomerChat?.chatId,
sentBy: selectedCustomerChat?.customerServiceId,
sentTo: selectedCustomerChat?.userId,
sentId: getCurrentTimestampInSeconds(),
message: message,
msgType: "text",
totalPart: 1,
partNo: 1,
timestamp: getCurrentTime(),
};
allMessages.push(textMessage);
setAllChat([...allChat, ...allMessages]);
setResponse({});
sendChatMessage(textMessage);
if (selectedFiles.length > 0) {
// Use Promise.all to read and convert selected files to base64
Promise.all(
selectedFiles.map(async (file) => {
const base64Data = await readAsBase64(file);
const stringParts = splitBase64String(base64Data, 45000);
setAllChat((prevChat) => [...prevChat, {
chatId: selectedCustomerChat?.chatId,
sentBy: selectedCustomerChat?.customerServiceId,
sentTo: selectedCustomerChat?.userId,
sentId: getCurrentTimestampInSeconds(),
message: fileType === 'video' ? `${base64Data}` : `${base64Data}`,
msgType: fileType === "video" ? "video" : "image",
from: true,
totalPart: stringParts?.length,
timestamp: getCurrentTime(),
}]);
return stringParts.map((part, index) => {
if (fileType === "video" || fileType === "image") {
return {
chatId: selectedCustomerChat?.chatId,
sentBy: selectedCustomerChat?.customerServiceId,
sentTo: selectedCustomerChat?.userId,
sentId: getCurrentTimestampInSeconds(),
message: fileType === 'video' ? `${part}` : `${part}`,
msgType: fileType === "video" ? "video" : "image",
totalPart: stringParts?.length,
partNo: index + 1,
timestamp: getCurrentTime(),
}
} else {
return {
chatId: selectedCustomerChat?.chatId,
sentBy: selectedCustomerChat?.customerServiceId,
sentTo: selectedCustomerChat?.userId,
sentId: getCurrentTimestampInSeconds(),
message: fileType === 'file' ? `${part}` : `${part}`,
msgType: fileType === "file" ? "file" : "text", // Adjusted this
line
totalPart: stringParts?.length,
partNo: index + 1,
timestamp: getCurrentTime(),
}
};
});
})
).then(async (filesMessages) => {
// Flatten the array of arrays into a single array
// do get message public map part
// list[0]="a"
//list[1]="b"
//list[2]="c"
// allMessages.map
sendChatMessage(allMessages[0]);
send(list[0])
const allMessages = [].concat(...filesMessages);
let sendPromises;
// Check if there are messages to send
if (allMessages && allMessages.length > 0) {
if (allMessages?.length === 1) {
sendPromises = allMessages.map(async (sms, index) => {
await sendChatMessage(allMessages[0])
})
}
else {
sendChatMessage(sms[0]);// send first part
const waitForResponse = async () => {
console.log("partNo",response.partNo+1 , sms.partNo)
if (response && response.msgType === "ans" ) {
console.log(response, "into the more than 2 part");
setResponse({});
await sendChatMessage(sms);
sent = true;
resolve(sms); // Resolve the promise when the message is sent
} else {
// Wait for a short delay (e.g., 3000 milliseconds) before checking
the condition again
//setTimeout(waitForResponse, 3000);
}
};
sendPromises = allMessages.map(async (sms, index) => {
console.log(sms, response, "1st line");
async function sendPart(sms) {
if (sms.partNo === 1) {
await sendChatMessage(sms);
} else if (sms.partNo > 1) {
return new Promise(async (resolve, reject) => {
let sent = false;
const waitForResponse = async () => {
console.log("partNo",response.partNo+1 , sms.partNo)
if (response && response.msgType === "ans" ) {
console.log(response, "into the more than 2 part");
setResponse({});
await sendChatMessage(sms);
sent = true;
resolve(sms); // Resolve the promise when the message is
sent
} else {
// Wait for a short delay (e.g., 3000 milliseconds)
before checking the condition again
setTimeout(waitForResponse, 3000);
}
};
// Start waiting for the response
await waitForResponse();
// Set a timeout to handle cases where the condition is never
met
const timeout = setTimeout(() => {
if (!sent) {
reject("Message sending timeout"); // Reject the promise
on timeout
}
}, MAX_WAIT_TIME);
});
}
}
// Call the function to send the part
return sendPart(sms);
});
}
// Use Promise.all to wait for all sendPromises to complete
Promise.all(sendPromises)
.then((sentMessages) => {
// Update the chat state with all sent messages
setAllChat((prevChat) => [...prevChat, ...sentMessages]);
toast.success("All messages sent successfully");
})
.catch((error) => {
toast.error("Error sending messages: " + error);
});
}
});
}
else {
// Clear the 'text' variable if needed
setMessage('');
// Update the chat state with only text messages
setAllChat([...allChat, ...allMessages]);
}
}
};
return (
<div className=" absolute rounded-b-lg z-40 bg-white pt-1 w-full bottom-0 ">
<div className="flex justify-around text-sm">
<button className="bg-[#004368] text-white ml-8 hover:bg-blue-700 px-2 py-1
rounded-md mr-3">
Auto Reply
</button>
<button className="">
Select & Reply
</button>
<button className="mr-10">
Typically
</button>
</div>
<form onSubmit={handleSubmit} className="p-4">
<div className="flex gap-2 w-full items-center px-3 my-2 bg-white z-40">
<button
onClick={() => handleFileIconClick('image')}
className={` ${fileType === 'image' ? 'selected' : ''}`}
>
<FaFileImage className="mr-2 text-gray-400
cursor-pointer"></FaFileImage>
</button>
<button
onClick={() => handleFileIconClick('video')}
className={` ${fileType === 'video' ? 'selected' : 'image'}`}
>
<MdOndemandVideo className="mr-2 text-gray-400 text-xl cursor-
pointer"></MdOndemandVideo>
</button>
<input
id="fileInput"
type="file"
accept={fileType === 'image' ? 'image/*' : 'video/*'}
onChange={handleFileChange}
className="hidden"
/>
<div>
<button
onClick={() => handleFileIconClick('file')}
className={` ${fileType === 'file'}`}
>
<AiOutlineFileAdd className="mr-2 text-gray-400 text-xl cursor-
pointer"></AiOutlineFileAdd>
</button>
<input
id="fileInput"
type="file"
accept=".pdf, .doc, .docx, .txt, .xls, .xlsx, .ppt, .pptx, .csv"
onChange={handleFileChange}
className="hidden"
/>
</div>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Type your message..."
className=" relative w-9/12 md:w-8/12 lg:9/12 py-1 px-2 rounded-md bg-
cyan-200"
/>
<button className="flex items-center absolute right-[55px] lg:right-
[95px] " type="submit">
<AiOutlineSend className=" cursor-pointer"></AiOutlineSend>
</button>
</div>
<div className="mt-2">
{selectedFiles.map((file, index) => (
<div key={index} className="flex items-center bg-gray-300 p-2 w-10/12">
<span className="mr-2">{file.name}</span>
<button
type="button"
onClick={() => handleRemoveFile(index)}
className="text-red-600 font-bold cursor-pointer"
>
X
</button>
</div>
))}
</div>
</form>
</div>
);
};
export default MessageInput;
