ticket detail

2026-02-24 15:40:50 +03:30
parent 5b938d1525
commit cb2a6daa29
9 changed files with 421 additions and 269 deletions
@@ -0,0 +1,50 @@
+import { type FC } from "react";
+import { Paperclip2 } from "iconsax-react";
+import { clx } from "@/helpers/utils";
+import { t } from "@/locale";
+import type { TicketThreadItemType } from "./types/TicketTypes";
+import { formatDate } from "./detailUtils";
+
+export type MessageBubbleProps = { item: TicketThreadItemType };
+
+const MessageBubble: FC<MessageBubbleProps> = ({ item }) => {
+    const isUser = item.isFromUser;
+    return (
+        <div
+            className={clx(
+                "mt-6 xl:text-sm text-xs p-6 rounded-3xl xl:max-w-[70%] max-w-[90%]",
+                isUser
+                    ? "bg-[#F6F7FA] rounded-tr-none"
+                    : "bg-[#EBEDF5] rounded-tl-none"
+            )}
+        >
+            <div className="flex gap-1 mb-4">
+                <span className="font-bold">
+                    {isUser ? t("ticket.customer") : t("ticket.expert")}
+                </span>
+            </div>
+            <div className="leading-7">{item.content}</div>
+            <div className="flex dltr end mt-6 text-xs text-description">
+                {formatDate(item.createdAt)}
+            </div>
+            {item.attachments && item.attachments.length > 0 && (
+                <div className="flex gap-2 flex-wrap text-sm mt-2">
+                    {item.attachments.map((att, index) => (
+                        <a
+                            key={att.id}
+                            href={att.attachmentUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-[#0047FF] flex gap-1 items-center"
+                        >
+                            <Paperclip2 size={20} color="#0047FF" />
+                            {t("attach")} {index + 1}
+                        </a>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MessageBubble;