review

2026-07-17 10:54:14 +03:30
parent 81fc074708
commit 234729329c
4 changed files with 252 additions and 29 deletions
@@ -0,0 +1,98 @@
+"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;