76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
import Icon from "@ant-design/icons";
|
|
import { Tooltip } from "antd";
|
|
import i18n from "i18next";
|
|
import dayjs from "../../utils/day";
|
|
import { MdClose, MdDone, MdDoneAll } from "react-icons/md";
|
|
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
|
|
|
export const renderMessage = (messages, index) => {
|
|
const message = messages[index];
|
|
const isSystem = message.is_system;
|
|
|
|
// Determine message class
|
|
const messageClass = isSystem ? "system messages" : message.isoutbound ? "mine messages" : "yours messages";
|
|
|
|
// Tooltip content based on message type
|
|
const tooltipTitle = isSystem ? (
|
|
i18n.t("consent.text_body")
|
|
) : (
|
|
<DateTimeFormatter>{message.created_at}</DateTimeFormatter>
|
|
);
|
|
|
|
return (
|
|
<div key={index} className={messageClass}>
|
|
<div className="message msgmargin">
|
|
<Tooltip title={tooltipTitle}>
|
|
<div>
|
|
{isSystem && <span className="system-label">System</span>}
|
|
{/* 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 className="message-text">{message.text}</div>}
|
|
{/* Render date for system messages */}
|
|
{isSystem && (
|
|
<div className="system-date">
|
|
<DateTimeFormatter>{message.created_at}</DateTimeFormatter>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
{/* Message status icons for non-system messages */}
|
|
{!isSystem &&
|
|
message.status &&
|
|
(message.status === "sent" || message.status === "delivered" || message.status === "failed") && (
|
|
<div className="message-status">
|
|
<Icon
|
|
component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : MdClose}
|
|
className="message-icon"
|
|
style={message.status === "failed" ? { color: "#ff0000" } : undefined}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Outbound message metadata for non-system messages */}
|
|
{!isSystem && 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>
|
|
);
|
|
};
|