53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
import Icon from "@ant-design/icons";
|
|
import { Tooltip } from "antd";
|
|
import i18n from "i18next";
|
|
import dayjs from "../../utils/day";
|
|
import { MdDone, MdDoneAll } from "react-icons/md";
|
|
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
|
|
|
export const renderMessage = (messages, index) => {
|
|
const message = messages[index];
|
|
|
|
return (
|
|
<div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
|
|
<div className="message msgmargin">
|
|
<Tooltip title={DateTimeFormatter({ children: message.created_at })}>
|
|
<div>
|
|
{/* Render images if available */}
|
|
{message.image && message.image_path?.length > 0 && (
|
|
<div className="message-images">
|
|
{message.image_path.map((url, idx) => (
|
|
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
<img alt="Received" className="message-img" src={url} />
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* Render text if available */}
|
|
{message.text && <div>{message.text}</div>}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
{/* Message status icons */}
|
|
{message.status && (message.status === "sent" || message.status === "delivered") && (
|
|
<div className="message-status">
|
|
<Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Outbound message metadata */}
|
|
{message.isoutbound && (
|
|
<div style={{ fontSize: 10 }}>
|
|
{i18n.t("messaging.labels.sentby", {
|
|
by: message.userid,
|
|
time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|