57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
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";
|
|
import { getPresignedUrl } from "@/pages/uploader/service/UploaderService";
|
|
|
|
export type MessageBubbleProps = { item: TicketThreadItemType };
|
|
|
|
const MessageBubble: FC<MessageBubbleProps> = ({ item }) => {
|
|
const isUser = item.isFromUser;
|
|
|
|
const handleOpenLink = async (key: string) => {
|
|
const url = await getPresignedUrl(key);
|
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
};
|
|
|
|
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) => (
|
|
<button
|
|
key={att.id}
|
|
type="button"
|
|
onClick={() => handleOpenLink(att.attachmentUrl)}
|
|
className="text-[#0047FF] flex gap-1 items-center"
|
|
>
|
|
<Paperclip2 size={20} color="#0047FF" />
|
|
{t("attach")} {index + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MessageBubble;
|