70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import styles from "./styles.module.css";
|
|
|
|
interface IMessageProps {
|
|
text: string | React.ReactNode;
|
|
isSelf: boolean;
|
|
advisorName?: string;
|
|
avatar?: string;
|
|
backgroundTextColor?: string;
|
|
textColor?: string;
|
|
isVisible?: boolean;
|
|
messageId?: string;
|
|
isRead?: boolean;
|
|
isBlur?: boolean;
|
|
readMessage?: (messagesId: string[]) => void;
|
|
onClickBlur?: () => void;
|
|
}
|
|
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
function Message({
|
|
text,
|
|
avatar,
|
|
isSelf,
|
|
advisorName = "Advisor",
|
|
backgroundTextColor = "#0080ff",
|
|
textColor = "#fff",
|
|
isVisible = true,
|
|
messageId,
|
|
isRead,
|
|
isBlur = false,
|
|
readMessage,
|
|
onClickBlur,
|
|
}: IMessageProps) {
|
|
useEffect(() => {
|
|
if (!messageId || !readMessage || isRead) return;
|
|
readMessage([messageId]);
|
|
}, [isRead, messageId, readMessage]);
|
|
|
|
if (!isVisible) return <></>;
|
|
|
|
return (
|
|
<div
|
|
className={`${styles.container} ${isSelf && styles.self}`}
|
|
style={{ flexDirection: isSelf ? "row-reverse" : "row" }}
|
|
>
|
|
{!isSelf && avatar?.length && (
|
|
<img
|
|
className={styles.avatar}
|
|
src={avatar}
|
|
alt={`${advisorName} avatar`}
|
|
/>
|
|
)}
|
|
<div
|
|
className={styles.text}
|
|
style={{ color: textColor, backgroundColor: backgroundTextColor }}
|
|
>
|
|
{text}
|
|
{isBlur && (
|
|
<div className={styles["blur-element"]}>
|
|
<span onClick={onClickBlur}>See the answer</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
export default React.memo(Message);
|