99 lines
4.1 KiB
TypeScript
99 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { Star1 } from "iconsax-react";
|
||
import { useMemo } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { ReviewThread, buildThreadMessages, formatReviewMessageTime } from "../utils/reviewHelpers";
|
||
|
||
type Props = {
|
||
thread: ReviewThread;
|
||
};
|
||
|
||
function ReviewChatThread({ thread }: Props) {
|
||
const { t } = useTranslation("rating");
|
||
|
||
const messages = useMemo(() => buildThreadMessages(thread), [thread]);
|
||
|
||
const getTranslationKey = (point: string, isPositive: boolean): string => {
|
||
const basePath = isPositive ? "Tabs.Strengths.Options" : "Tabs.Weeknesses.Options";
|
||
return `${basePath}.${point}`;
|
||
};
|
||
|
||
return (
|
||
<article className="py-4 border-b border-border/60 last:border-b-0">
|
||
<ul className="flex flex-col gap-4">
|
||
{messages.map((message) => {
|
||
const isAdmin = message.type === "admin";
|
||
|
||
return (
|
||
<li key={message.id} className={`flex w-full ${isAdmin ? "justify-start" : "justify-end"}`}>
|
||
<div
|
||
className={`w-full max-w-[min(420px,85%)] rounded-[24px] px-5 py-4 ${
|
||
isAdmin ? "bg-[#F6F7FA] dark:bg-gray-700 rounded-tr-none" : "bg-[#EBEDF5] dark:bg-gray-600 rounded-tl-none"
|
||
}`}
|
||
>
|
||
<h6 className="text-xs font-medium text-gray-700 dark:text-gray-200 mb-2">{message.senderName}</h6>
|
||
|
||
{message.parentMessage && (
|
||
<div className="mb-3 rounded-xl border-r-2 border-primary/50 bg-white/70 dark:bg-black/10 px-3 py-2">
|
||
<p className="text-[11px] font-medium text-gray-600 dark:text-gray-300">{message.parentMessage.senderName}</p>
|
||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-3 whitespace-pre-wrap break-words">
|
||
{message.parentMessage.content}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!isAdmin && message.rating !== undefined && message.rating > 0 && (
|
||
<div className="flex items-center gap-1.5 mb-2">
|
||
<Star1 size={16} color="#FFB800" variant="Bold" />
|
||
<span className="text-sm font-medium">{message.rating}</span>
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">از ۵</span>
|
||
</div>
|
||
)}
|
||
|
||
<p className="text-sm leading-7 text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">{message.content}</p>
|
||
|
||
{!isAdmin && message.positivePoints && message.positivePoints.length > 0 && (
|
||
<div className="flex flex-wrap gap-2 mt-3">
|
||
{message.positivePoints.map((point, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-3 py-1 border border-green-500 text-green-600 dark:text-green-400 rounded-xl text-xs bg-white dark:bg-transparent"
|
||
>
|
||
{t(getTranslationKey(point, true))}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{!isAdmin && message.negativePoints && message.negativePoints.length > 0 && (
|
||
<div className="flex flex-wrap gap-2 mt-2">
|
||
{message.negativePoints.map((point, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-3 py-1 border border-red-500 text-red-600 dark:text-red-400 rounded-xl text-xs bg-white dark:bg-transparent"
|
||
>
|
||
{t(getTranslationKey(point, false))}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{message.createdAt && (
|
||
<div className="mt-3 flex justify-end">
|
||
<span dir="ltr" className="text-[11px] text-gray-400 dark:text-gray-500">
|
||
{formatReviewMessageTime(message.createdAt)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
export default ReviewChatThread;
|