@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-box/chat-message.js

@@ -0,0 +1,2099 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  User,
+  Bot,
+  AlarmClock,
+  Send,
+  CircleAlert,
+  ExternalLink,
+  ImageIcon,
+  MapPin,
+  Eye,
+  EyeOff,
+  Forward,
+  Check,
+  Copy
+} from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../custom/avatar.js";
+import { AudioPlayer } from "../../custom/audio-player.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { LinkPreview } from "../../custom/previews/link-preview.js";
+import { FilePreview } from "../../custom/previews/file-preview.js";
+import { ImagePreview } from "../../custom/previews/image-preview.js";
+import {
+  FacebookPostPreview,
+  FacebookReelPreview,
+  FacebookEventPreview,
+  FacebookGroupPreview,
+  FacebookPagePreview,
+  FacebookStickerPreview,
+  FacebookImagePreview,
+  FacebookFilePreview,
+  FacebookAppointmentBookingPreview,
+  FacebookVideoPreview,
+  FacebookAudioPreview
+} from "../../custom/previews/facebook/index.js";
+import {
+  formatDayWithTime,
+  formatTime,
+  generateReminderTimeText
+} from "@zenify-omni/chat-js/utils/date.js";
+import {
+  MessageType,
+  ActionMessageTypes,
+  MessageTypeContext,
+  ReminderMessageTypes,
+  PinMessageTypes
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { TextContent } from "./text-content.js";
+import ProductPreview from "../../custom/previews/product-preview.js";
+import TiktokProductPreview from "../../custom/previews/tiktok-product-preview.js";
+import TiktokOrderPreview from "../../custom/previews/tiktok-order-preview.js";
+import TiktokVoucherPreview from "../../custom/previews/tiktok-voucher-preview.js";
+import { parseMessageUrl, withMentionsHighlighted } from "@zenify-omni/chat-js/utils/string.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { isImageFile, getVideoMimeType, isVideoFile } from "../../../utils/file.js";
+import { CHATTER_TYPES } from "./constants.js";
+import { convertURLsToLinks } from "@zenify-omni/chat-js/utils/string.js";
+import SafeHTML from "../../custom/SafeHTML.js";
+import { ZaloReminderContent } from "./zalo-reminder/zalo-reminder-content.js";
+import ZaloContactCardContent from "./contact-card/index.js";
+import {
+  isZalo,
+  isTiktok,
+  isZaloGeneralChannel,
+  isZaloGroup,
+  isZaloPersonal,
+  isZaloPersonChannel,
+  isFacebook
+} from "../util.js";
+import useChatStore from "../../../store/chat-store.js";
+import { parseMessageUrls } from "@zenify-omni/chat-js/utils/string.js";
+import { FriendRequestCard } from "../chat-list/friend-request/list-friend-request.js";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { BrandColor } from "../../../constants/brand-colors.js";
+import {
+  fetchMicrolinkPreview,
+  LINK_PREVIEW_QUERY_OPTIONS
+} from "@zenify-omni/chat-js/utils/microlink.js";
+import { acceptFriendRequest, rejectFriendRequest } from "@zenify-omni/chat-js/api/chat.js";
+import { showSuccessToast } from "../../ui/sonner.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { MessageContext } from "./message-viewers.js";
+import { sendMessage } from "../../../utils/chat_socket.js";
+import ReactionPreview from "./react-message/react-preview.js";
+import { ChatMessageActions, IsMessageAction } from "./chat-message-action.js";
+import ReactionButton from "./react-message/reaction-button.js";
+import { MessageTime } from "./message-time.js";
+import AdsContextCard from "./ads-context-card.js";
+import {
+  WhatsAppContactCardPreview,
+  WhatsAppOrderPreview,
+  WhatsAppPollPreview,
+  WhatsAppProductPreview
+} from "../../custom/previews/whatsapp/index.js";
+import { InstagramSharePostPreview } from "../../custom/previews/instagram/index.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from "../../ui/carousel.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { translateServerLabel } from "@zenify-omni/chat-js/lib/i18n/server-label.js";
+const isMessageFromSelf = ({ message, ticket, user, isAgent }) => {
+  if ((message?.source_id || message?.sub_source_id) && ticket?.source_id && (message.source_id === ticket.source_id || isZaloGroup(ticket) && message.sub_source_id === ticket.source_id && message.chatter_type === "agent")) {
+    return true;
+  }
+  return (!isZaloGroup(ticket) || isZaloGeneralChannel(ticket)) && isAgent || isZaloPersonChannel(ticket) && user?._id === message.chatter_id;
+};
+const ImageContent = ({
+  msg,
+  className,
+  isZalo: isZalo2,
+  isTiktok: isTiktok2,
+  isChatAllowed,
+  ticket,
+  timeText
+}) => {
+  const user = getUser();
+  const isSelf = isMessageFromSelf({
+    message: msg,
+    ticket,
+    user,
+    isAgent: msg.chatter_type === CHATTER_TYPES.AGENT
+  });
+  return /* @__PURE__ */ jsx(
+    ImagePreview,
+    {
+      ticket,
+      isZalo: isZalo2,
+      isTiktok: isTiktok2,
+      isChatAllowed,
+      msg,
+      className,
+      url: msg.content.src,
+      title: formatDayWithTime(msg.date || msg.created_at),
+      timeText,
+      isMasked: !isSelf
+    }
+  );
+};
+const FileContent = ({ msg, className, ticket, timeText }) => {
+  return /* @__PURE__ */ jsx(
+    FilePreview,
+    {
+      msg,
+      ticket,
+      className,
+      url: msg.content.src,
+      title: formatDayWithTime(msg.date || msg.created_at),
+      showImage: !isZalo(ticket),
+      timeText
+    }
+  );
+};
+const ReelContent = ({ msg, className, timeText }) => {
+  const url = msg.content.src;
+  const { data: preview, isLoading: loading } = useQuery({
+    queryKey: [QUERY_KEY.GET_LINK_PREVIEW, url],
+    queryFn: () => fetchMicrolinkPreview(url),
+    enabled: !!url,
+    ...LINK_PREVIEW_QUERY_OPTIONS
+  });
+  const thumbnail = preview?.image?.url || preview?.video?.poster || null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[200px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "block overflow-hidden rounded-lg shadow-md",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative aspect-[9/16] overflow-hidden bg-foreground", children: [
+                loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" }) : thumbnail ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: thumbnail,
+                    alt: "Reel",
+                    className: "h-full w-full object-cover",
+                    referrerPolicy: "no-referrer"
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center bg-gradient-to-b from-gray-700 to-gray-900" }),
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/40", children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "white",
+                    className: "ml-1 h-6 w-6",
+                    children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-2 rounded bg-black/50 px-1.5 py-0.5 text-[10px] text-white", children: "Reel" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 bg-card p-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: url }),
+                /* @__PURE__ */ jsx(ExternalLink, { size: 14, className: "flex-shrink-0 text-primary" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const LinkContent = ({ msg, className, isReply, timeText, ticket }) => {
+  const user = getUser();
+  const isSelf = isMessageFromSelf({
+    message: msg,
+    ticket,
+    user,
+    isAgent: msg.chatter_type === CHATTER_TYPES.AGENT
+  });
+  const bubbleClass = !isReply && (isSelf ? "border border-chat-own-bubble bg-chat-own-bubble px-4 py-2 text-accent-foreground shadow-md" : "bg-card px-4 py-2 text-foreground shadow-md");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("cursor-pointer rounded-[8px]", bubbleClass, className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: /* @__PURE__ */ jsx(
+        LinkPreview,
+        {
+          url: msg.content?.text || msg.content?.src,
+          isReply,
+          isMasked: !isSelf,
+          children: /* @__PURE__ */ jsx(
+            MessageTime,
+            {
+              timeText,
+              status: msg?.status,
+              className: "justify-start",
+              agentReads: msg?.agent_reads
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const VideoContent = ({ msg, className, ticket, timeText }) => {
+  const user = getUser();
+  const rawContent = msg?.content?.meta?.content;
+  let link = rawContent?.href || msg?.content.src;
+  const { afterText } = parseMessageUrl(link);
+  if (afterText && link.endsWith(afterText)) {
+    link = link.slice(0, -afterText.length);
+  }
+  const isSelf = isMessageFromSelf({
+    message: msg,
+    ticket,
+    user,
+    isAgent: msg.chatter_type === "agent"
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("max-w-[360px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden rounded-xl shadow-md",
+              isSelf ? "bg-chat-own-bubble" : "bg-card"
+            ),
+            children: /* @__PURE__ */ jsx("video", { controls: true, className: "block max-h-[400px] min-h-[200px] w-full", children: /* @__PURE__ */ jsx("source", { src: link, type: getVideoMimeType(link) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const AudioContent = ({ msg, className, timeText }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn("w-[300px]", className),
+    title: formatDayWithTime(msg.date || msg.created_at),
+    children: [
+      /* @__PURE__ */ jsx(AudioPlayer, { src: msg.content.src }),
+      /* @__PURE__ */ jsx(
+        MessageTime,
+        {
+          timeText,
+          status: msg?.status,
+          agentReads: msg?.agent_reads
+        }
+      )
+    ]
+  }
+);
+const LocationContent = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const { latitude, longitude, src } = msg?.content || {};
+  const lat = parseFloat(latitude);
+  const lng = parseFloat(longitude);
+  const hasCoords = Number.isFinite(lat) && Number.isFinite(lng);
+  const url = src || (hasCoords ? `https://www.google.com/maps?q=${lat},${lng}` : null);
+  if (!hasCoords && !url) {
+    return null;
+  }
+  const mapUrl = hasCoords ? `https://maps.google.com/maps?q=${lat},${lng}&z=15&output=embed` : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[260px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "block overflow-hidden rounded-lg bg-card shadow-md",
+            children: [
+              mapUrl && /* @__PURE__ */ jsx("div", { className: "relative aspect-[16/10] overflow-hidden bg-muted", children: /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: mapUrl,
+                  className: "pointer-events-none h-full w-full border-0",
+                  title: t("chat:label.locationMap", {
+                    defaultValue: "B\u1EA3n \u0111\u1ED3 v\u1ECB tr\xED"
+                  }),
+                  loading: "lazy"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+                /* @__PURE__ */ jsx(MapPin, { size: 16, className: "flex-shrink-0 text-primary" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-foreground", children: t("chat:label.location", { defaultValue: "V\u1ECB tr\xED" }) }),
+                  hasCoords && /* @__PURE__ */ jsxs("p", { className: "truncate text-[11px] text-muted-foreground", children: [
+                    lat.toFixed(6),
+                    ", ",
+                    lng.toFixed(6)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(ExternalLink, { size: 14, className: "flex-shrink-0 text-primary" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const UnsupportedContent = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full break-words rounded-[0_8px_8px_8px] bg-muted px-4 py-2 italic text-muted-foreground shadow-md",
+        className
+      ),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        t("chat:message.unsupportedMessage", {
+          defaultValue: "Tin nh\u1EAFn ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3"
+        }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            className: "not-italic",
+            agentReads: msg?.agent_reads,
+            messageId: msg?._id
+          }
+        )
+      ]
+    }
+  );
+};
+const ForwardContent = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const original = msg.content?.original;
+  const caption = msg.content?.text;
+  const renderOriginalPreview = () => {
+    if (!original)
+      return /* @__PURE__ */ jsx("span", { className: "text-xs italic text-muted-foreground", children: t("chat:status.forwardedMessage", {
+        defaultValue: "Tin nh\u1EAFn \u0111\xE3 chuy\u1EC3n ti\u1EBFp"
+      }) });
+    switch (original.type) {
+      case "image":
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          original.src && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: original.src.split(" \n ")[0],
+              className: "h-10 w-10 flex-shrink-0 rounded object-cover",
+              alt: ""
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: original.text || i18n.t("chat:message.imageBracket", {
+            defaultValue: "[H\xECnh \u1EA3nh]"
+          }) })
+        ] });
+      case "video":
+        return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "[Video] ",
+          original.filename || original.text || ""
+        ] });
+      case "audio":
+        return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "[Audio] ",
+          original.filename || ""
+        ] });
+      case "file":
+        return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "[File] ",
+          original.filename || original.text || ""
+        ] });
+      case "sticker":
+        return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "[Sticker]" });
+      default:
+        return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: original.text || i18n.t("chat:message.messageBracket", {
+          defaultValue: "[Tin nh\u1EAFn]"
+        }) });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "break-words rounded-[0_8px_8px_8px] px-3 py-2 shadow-md",
+        className
+      ),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-1 border-l-2 border-primary pl-2", children: [
+          /* @__PURE__ */ jsx(Forward, { size: 12, className: "flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-primary", children: t("chat:status.forwardedMessage", {
+            defaultValue: "Tin nh\u1EAFn \u0111\xE3 chuy\u1EC3n ti\u1EBFp"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mb-1.5 rounded bg-black/5 px-2 py-1.5", children: renderOriginalPreview() }),
+        caption && /* @__PURE__ */ jsx("p", { className: "text-sm", children: caption }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const getContentObj = (msg) => {
+  if (!msg?.content?.meta?.content_obj) return null;
+  return msg.content.meta.content_obj;
+};
+const FriendEventContent = ({ msg, className, ticket, timeText }) => {
+  const user = getUser();
+  const contentObj = getContentObj(msg);
+  const friendRequest = useMemo(() => {
+    if (!contentObj) return null;
+    if (contentObj.zalo_id) {
+      return contentObj;
+    }
+    if (Array.isArray(contentObj.received) && contentObj.received.length > 0) {
+      return contentObj.received[0];
+    }
+    if (Array.isArray(contentObj) && contentObj.length > 0) {
+      return contentObj[0];
+    }
+    return null;
+  }, [contentObj]);
+  const acceptMutate = useMutation({
+    mutationFn: async ({ zaloId, parentZaloId }) => {
+      const { data } = await acceptFriendRequest(
+        user?._id,
+        zaloId,
+        parentZaloId
+      );
+      return data;
+    },
+    onSuccess: () => {
+      showSuccessToast(
+        i18n.t("chat:toast.acceptFriendRequestSuccess", {
+          defaultValue: "Ch\u1EA5p nh\u1EADn l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n th\xE0nh c\xF4ng"
+        })
+      );
+    },
+    onError: throwException
+  });
+  const rejectMutate = useMutation({
+    mutationFn: async ({ zaloId, parentZaloId }) => {
+      const { data } = await rejectFriendRequest(
+        user?._id,
+        zaloId,
+        parentZaloId
+      );
+      return data;
+    },
+    onSuccess: () => {
+      showSuccessToast(
+        i18n.t("chat:toast.rejectFriendRequestSuccess", {
+          defaultValue: "T\u1EEB ch\u1ED1i l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n th\xE0nh c\xF4ng"
+        })
+      );
+    },
+    onError: throwException
+  });
+  const handleAccept = useCallback(
+    (zaloId) => {
+      let parentZaloId = null;
+      parentZaloId = ticket?.source_id || null;
+      acceptMutate.mutate({ zaloId, parentZaloId });
+    },
+    [ticket?.pzalo_type, ticket?.page_id, ticket?.source_id, acceptMutate]
+  );
+  const handleReject = useCallback(
+    (zaloId) => {
+      let parentZaloId = null;
+      parentZaloId = ticket?.source_id || null;
+      rejectMutate.mutate({ zaloId, parentZaloId });
+    },
+    [ticket?.pzalo_type, ticket?.page_id, ticket?.source_id, rejectMutate]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full rounded-[8px] bg-card px-4 py-2 shadow-md",
+        className
+      ),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        friendRequest && /* @__PURE__ */ jsx(
+          FriendRequestCard,
+          {
+            data: friendRequest,
+            type: "received",
+            onAccept: handleAccept,
+            onReject: handleReject
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const ChatFormContent = ({
+  msg,
+  className,
+  ticket,
+  isChatAllowed,
+  timeText
+}) => {
+  const isAgent = useMemo(() => {
+    return msg?.chatter_type === "agent" || msg?.chatter_type === "chatbot";
+  }, [msg?.chatter_type]);
+  const greeting = useMemo(() => {
+    return msg?.content?.text || "";
+  }, [msg?.content?.text]);
+  const buttons = useMemo(() => {
+    return msg?.content?.buttons;
+  }, [msg?.content?.buttons]);
+  const options = useMemo(() => {
+    if (!buttons) return [];
+    if (Array.isArray(buttons)) {
+      return buttons;
+    }
+    return [];
+  }, [buttons]);
+  const handleOptionClick = useCallback(
+    (optionValue, optionLabel) => {
+      if (!isChatAllowed || !ticket) return;
+      const messageText = optionValue || optionLabel;
+      sendMessage(ticket, messageText, MessageType.TEXT, {
+        is_personal_zalo: ticket?.is_personal_zalo
+      });
+    },
+    [ticket, isChatAllowed]
+  );
+  if (!isAgent) {
+    return null;
+  }
+  if (!buttons || !Array.isArray(buttons) || buttons.length === 0) {
+    return null;
+  }
+  if (!greeting && (!options || options.length === 0)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full rounded-[8px] bg-card px-4 py-3 shadow-md",
+        className
+      ),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        greeting && /* @__PURE__ */ jsx("div", { className: "mb-3 text-sm text-foreground", children: greeting }),
+        options && options.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-0", children: options.map((option, index) => {
+          const optionValue = option?.value || option?.text;
+          const optionLabel = option?.label || option?.text || option;
+          if (!optionLabel) return null;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            index > 0 && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-border-subtle" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => handleOptionClick(optionValue, optionLabel),
+                disabled: !isChatAllowed,
+                className: cn(
+                  "flex w-full items-center justify-between rounded-md bg-muted px-3 py-2 text-left text-sm text-foreground transition-colors",
+                  isChatAllowed ? "cursor-pointer hover:bg-muted hover:text-primary" : "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: optionLabel }),
+                  /* @__PURE__ */ jsx(
+                    Send,
+                    {
+                      size: 16,
+                      className: cn(
+                        "ml-2 flex-shrink-0",
+                        isChatAllowed ? "text-primary" : "text-muted-foreground"
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }, index);
+        }) }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const UtilityMessageContent = ({ msg, className, timeText }) => {
+  const content = msg?.content || {};
+  const title = content.title || content.text || "";
+  const body = content.subtitle || content.body || "";
+  const buttons = Array.isArray(content.buttons) ? content.buttons : [];
+  const imageUrl = content.media_url || null;
+  const isFailed = msg?.status === "failed";
+  const errorMessage = translateServerLabel(msg?.extra_data?.send_error?.message) || translateServerLabel(msg?.extra_data?.send_error?.exception_message) || i18n.t("chat:label.failedToSendMessage", {
+    defaultValue: "G\u1EEDi tin nh\u1EAFn th\u1EA5t b\u1EA1i"
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[320px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden rounded-xl shadow-md",
+              isFailed ? "bg-destructive/10" : "bg-muted"
+            ),
+            children: [
+              imageUrl && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: "",
+                  className: "h-[150px] w-full object-cover",
+                  referrerPolicy: "no-referrer"
+                }
+              ),
+              (title || body) && /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-3", isFailed ? "bg-[--label-red]" : "bg-card"), children: [
+                title && /* @__PURE__ */ jsx("p", { className: "text-[15px] font-bold text-foreground", children: title }),
+                body && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: body })
+              ] }),
+              buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-border-subtle py-1", children: buttons.map((btn, index) => {
+                const label = btn.title || btn.text || btn.label || "";
+                const url = btn.url || btn.href || null;
+                const phone = btn.phone_number || btn.phone || null;
+                const btnContent = /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center rounded-md py-2 text-center text-[15px] font-semibold",
+                      index > 0 && "border-t border-border-subtle",
+                      isFailed ? "bg-[--label-red] text-muted-foreground" : "bg-card text-foreground",
+                      !isFailed && (url || phone) && "cursor-pointer hover:bg-muted"
+                    ),
+                    children: label
+                  },
+                  index
+                );
+                if (!isFailed && url) {
+                  return /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: url,
+                      target: "_blank",
+                      className: "block p-2",
+                      rel: "noopener noreferrer",
+                      children: btnContent
+                    },
+                    index
+                  );
+                }
+                if (!isFailed && phone) {
+                  return /* @__PURE__ */ jsx("a", { href: `tel:${phone}`, className: "block p-2", children: btnContent }, index);
+                }
+                return /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: btnContent }, index);
+              }) }),
+              isFailed && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 border-t border-destructive/30 bg-[--label-red] px-3 py-2", children: [
+                /* @__PURE__ */ jsx(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: errorMessage })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const ORDER_STATUS_LABELS = {
+  UNPAID: {
+    get label() {
+      return i18n.t("chat:label.awaitingPayment", {
+        defaultValue: "Ch\u1EDD thanh to\xE1n"
+      });
+    },
+    color: "text-warning"
+  },
+  READY_TO_SHIP: {
+    get label() {
+      return i18n.t("chat:label.awaitingPickup", {
+        defaultValue: "Ch\u1EDD l\u1EA5y h\xE0ng"
+      });
+    },
+    color: "text-primary"
+  },
+  SHIPPED: {
+    get label() {
+      return i18n.t("chat:label.delivering", {
+        defaultValue: "\u0110ang giao"
+      });
+    },
+    color: "text-primary"
+  },
+  CANCELLED: {
+    get label() {
+      return i18n.t("common:status.cancelled", {
+        defaultValue: "\u0110\xE3 h\u1EE7y"
+      });
+    },
+    color: "text-destructive"
+  },
+  TO_RETURN: {
+    get label() {
+      return i18n.t("chat:label.returnRefund", {
+        defaultValue: "Tr\u1EA3 h\xE0ng Ho\xE0n ti\u1EC1n"
+      });
+    },
+    color: "text-destructive"
+  },
+  COMPLETED: {
+    get label() {
+      return i18n.t("common:status.finished", {
+        defaultValue: "Ho\xE0n th\xE0nh"
+      });
+    },
+    color: "text-success"
+  },
+  IN_CANCEL: {
+    get label() {
+      return i18n.t("chat:label.canceling", {
+        defaultValue: "\u0110ang h\u1EE7y"
+      });
+    },
+    color: "text-muted-foreground"
+  }
+};
+const formatVND = (amount) => Number(amount).toLocaleString("vi-VN") + " \u20AB";
+const formatOrderDate = (unixTs) => {
+  const d = new Date(unixTs * 1e3);
+  const hh = d.getHours().toString().padStart(2, "0");
+  const mm = d.getMinutes().toString().padStart(2, "0");
+  const dd = d.getDate().toString().padStart(2, "0");
+  const mo = (d.getMonth() + 1).toString().padStart(2, "0");
+  const yy = d.getFullYear();
+  return `${hh}:${mm} ${dd}-${mo}-${yy}`;
+};
+const OrderContent = ({ msg, className, timeText }) => {
+  const { t } = useTranslation();
+  const order = msg?.extra_data?.order;
+  const [copied, setCopied] = useState(false);
+  if (!order) return null;
+  const {
+    order_sn,
+    order_status,
+    total_amount,
+    create_time,
+    ship_by_date,
+    buyer_username,
+    shipping_carrier,
+    actual_shipping_fee,
+    items = []
+  } = order;
+  const statusInfo = ORDER_STATUS_LABELS[order_status] || {
+    label: order_status,
+    color: "text-muted-foreground"
+  };
+  const firstItem = items[0];
+  const handleCopy = () => {
+    navigator.clipboard.writeText(order_sn);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[300px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl bg-card shadow-md", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-3 pb-2 pt-3", children: /* @__PURE__ */ jsx("p", { className: "text-xs font-normal text-muted-foreground", children: t("chat:message.askingAboutOrder", {
+            defaultValue: "B\u1EA1n \u0111ang h\u1ECFi th\xF4ng tin v\u1EC1 \u0111\u01A1n h\xE0ng..."
+          }) }) }),
+          firstItem && /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-3 flex gap-3 rounded-lg border border-border-subtle p-2", children: [
+            firstItem.image_url && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: firstItem.image_url,
+                alt: firstItem.item_name,
+                className: "h-[72px] w-[72px] flex-shrink-0 rounded object-cover",
+                referrerPolicy: "no-referrer"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-sm font-medium text-foreground", children: firstItem.item_name }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-0.5 line-clamp-1 text-xs text-muted-foreground", children: [
+                items.length,
+                " ",
+                t("chat:label.productsTotalOrderValue", {
+                  defaultValue: "s\u1EA3n ph\u1EA9m, T\u1ED5ng \u0111\u01A1n h\xE0ng"
+                }),
+                " ",
+                formatVND(total_amount)
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: cn("mt-1.5 text-sm font-medium", statusInfo.color), children: statusInfo.label })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border-subtle border-t border-border-subtle", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("common:label.orderCode", { defaultValue: "M\xE3 \u0111\u01A1n h\xE0ng" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: order_sn.length > 12 ? `${order_sn.slice(0, 12)}...` : order_sn }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleCopy,
+                    className: "flex-shrink-0 text-muted-foreground hover:text-primary",
+                    children: copied ? /* @__PURE__ */ jsx(Check, { size: 13 }) : /* @__PURE__ */ jsx(Copy, { size: 13 })
+                  }
+                )
+              ] })
+            ] }),
+            create_time && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("chat:label.orderTime", {
+                defaultValue: "Th\u1EDDi gian \u0111\u1EB7t h\xE0ng"
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: formatOrderDate(create_time) })
+            ] }),
+            ship_by_date && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("chat:label.deliverBefore", { defaultValue: "Giao tr\u01B0\u1EDBc" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: formatOrderDate(ship_by_date) })
+            ] }),
+            total_amount && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("chat:label.orderValue", {
+                defaultValue: "Gi\xE1 tr\u1ECB \u0111\u01A1n h\xE0ng"
+              }) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-xs font-semibold",
+                  style: { color: BrandColor.shopee.fg },
+                  children: formatVND(total_amount)
+                }
+              )
+            ] }),
+            buyer_username && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("chat:label.buyer", { defaultValue: "Ng\u01B0\u1EDDi mua" }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: buyer_username })
+            ] }),
+            shipping_carrier && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: t("common:label.shipping", { defaultValue: "V\u1EADn chuy\u1EC3n" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-4 line-clamp-1 text-right text-xs font-medium text-foreground", children: [
+                shipping_carrier,
+                Number(actual_shipping_fee) > 0 && ` \xB7 ${formatVND(actual_shipping_fee)}`
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const getTikTokEmbedUrls = (rawUrl) => {
+  try {
+    const match = rawUrl?.match(/\/player\/v\d+\/(\d+)/);
+    if (match) {
+      const videoId = match[1];
+      return {
+        embedUrl: `https://www.tiktok.com/embed/v2/${videoId}`,
+        shareUrl: `https://www.tiktok.com/video/${videoId}`
+      };
+    }
+  } catch {
+  }
+  return { embedUrl: rawUrl, shareUrl: rawUrl };
+};
+const SharePostContent = ({ msg, className, timeText }) => {
+  const rawUrl = msg.content?.url || msg.content?.src;
+  if (!rawUrl) return null;
+  const { embedUrl, shareUrl } = getTikTokEmbedUrls(rawUrl);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[280px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl shadow-md", children: [
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: embedUrl,
+              className: "block w-full",
+              style: { height: "498px", border: "none" },
+              allow: "autoplay; encrypted-media",
+              allowFullScreen: true,
+              title: "TikTok video"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 bg-card px-2 py-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: "TikTok" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: shareUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex-shrink-0 text-primary",
+                children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const TiktokSharePostPreview = ({ msg, className, timeText }) => {
+  const rawUrl = msg?.content?.src || msg?.content?.url;
+  if (!rawUrl) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[280px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl shadow-md", children: [
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: rawUrl,
+              className: "block w-full",
+              style: { height: "498px", border: "none" },
+              allow: "autoplay; encrypted-media",
+              allowFullScreen: true,
+              title: "TikTok video"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 bg-card px-2 py-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: "TikTok" }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: rawUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex-shrink-0 text-primary",
+                children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status })
+      ]
+    }
+  );
+};
+const GenericTemplateCard = ({ el }) => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-xl bg-card", children: [
+  el.image_url && /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: el.image_url,
+      alt: el.title,
+      className: "h-[200px] w-full object-cover",
+      referrerPolicy: "no-referrer"
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col px-3 py-2", children: [
+    el.title && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-semibold text-foreground", children: el.title }),
+    el.subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 whitespace-pre-line text-xs text-muted-foreground", children: el.subtitle })
+  ] }),
+  Array.isArray(el.buttons) && el.buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-border-subtle border-t border-border-subtle", children: el.buttons.map((btn, bi) => {
+    const label = btn.title || btn.text || btn.label || "";
+    const url = btn.url || btn.href || null;
+    const phone = btn.phone_number || btn.phone || null;
+    const linkClass = "flex items-center justify-center px-3 py-2 text-center text-sm font-semibold text-primary hover:bg-surface-subtle";
+    if (url)
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: linkClass,
+          children: label
+        },
+        bi
+      );
+    if (phone)
+      return /* @__PURE__ */ jsx("a", { href: `tel:${phone}`, className: linkClass, children: label }, bi);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center justify-center px-3 py-2 text-center text-sm font-semibold text-foreground",
+        children: label
+      },
+      bi
+    );
+  }) })
+] });
+const GenericTemplateContent = ({ msg, className, timeText }) => {
+  const elements = msg?.content?.elements;
+  if (!Array.isArray(elements) || elements.length === 0) return null;
+  if (elements.length === 1) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("w-[300px]", className),
+        title: formatDayWithTime(msg.date || msg.created_at),
+        children: [
+          /* @__PURE__ */ jsx(GenericTemplateCard, { el: elements[0] }),
+          /* @__PURE__ */ jsx(
+            MessageTime,
+            {
+              timeText,
+              status: msg?.status,
+              agentReads: msg?.agent_reads
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[500px] px-6", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            opts: { align: "start", slidesToScroll: 1, containScroll: "trimSnaps" },
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2", children: elements.map((el, i) => /* @__PURE__ */ jsx(CarouselItem, { className: "basis-[57%] pl-2", children: /* @__PURE__ */ jsx(GenericTemplateCard, { el }) }, i)) }),
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-5 z-10 h-9 w-9" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "-right-5 z-10 h-9 w-9" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const TemplateButtonList = ({ buttons }) => /* @__PURE__ */ jsx("div", { className: "divide-y divide-border-subtle border-t border-border-subtle", children: buttons.map((btn, bi) => {
+  const label = btn.title || btn.text || btn.label || "";
+  const url = btn.url || btn.href || null;
+  const phone = btn.phone_number || btn.phone || null;
+  const linkClass = "flex items-center justify-center px-3 py-2 text-center text-sm font-semibold text-primary hover:bg-surface-subtle";
+  if (url)
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: linkClass,
+        children: label
+      },
+      bi
+    );
+  if (phone)
+    return /* @__PURE__ */ jsx("a", { href: `tel:${phone}`, className: linkClass, children: label }, bi);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center px-3 py-2 text-center text-sm font-semibold text-foreground",
+      children: label
+    },
+    bi
+  );
+}) });
+const ButtonTemplateCard = ({ doc }) => /* @__PURE__ */ jsxs("div", { className: "flex w-[280px] flex-col overflow-hidden rounded-xl bg-card", children: [
+  doc.text && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-foreground", children: doc.text }),
+  Array.isArray(doc.buttons) && doc.buttons.length > 0 && /* @__PURE__ */ jsx(TemplateButtonList, { buttons: doc.buttons })
+] });
+const ButtonTemplateContent = ({ msg, className, timeText }) => {
+  const doc = msg?.content;
+  if (!doc) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[280px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsx(ButtonTemplateCard, { doc }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const ElementsTemplateContent = ({ msg, className, timeText }) => {
+  const doc = msg?.content;
+  const elements = doc?.elements;
+  if (!Array.isArray(elements) || elements.length === 0) return null;
+  const topTitle = doc?.title;
+  const topButtons = Array.isArray(doc?.buttons) ? doc.buttons : [];
+  if (elements.length === 1 && !topTitle && topButtons.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("w-[300px]", className),
+        title: formatDayWithTime(msg.date || msg.created_at),
+        children: [
+          /* @__PURE__ */ jsx(GenericTemplateCard, { el: elements[0] }),
+          /* @__PURE__ */ jsx(
+            MessageTime,
+            {
+              timeText,
+              status: msg?.status,
+              agentReads: msg?.agent_reads
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[500px] px-6", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        topTitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold text-foreground", children: topTitle }),
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            opts: { align: "start", slidesToScroll: 1, containScroll: "trimSnaps" },
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2", children: elements.map((el, i) => /* @__PURE__ */ jsx(CarouselItem, { className: "basis-[57%] pl-2", children: /* @__PURE__ */ jsx(GenericTemplateCard, { el }) }, i)) }),
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-5 z-10 h-9 w-9" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "-right-5 z-10 h-9 w-9" })
+            ]
+          }
+        ),
+        topButtons.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 overflow-hidden rounded-xl bg-card", children: /* @__PURE__ */ jsx(TemplateButtonList, { buttons: topButtons }) }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const ReceiptTemplateContent = ({ msg, className, timeText }) => {
+  const doc = msg?.content;
+  if (!doc) return null;
+  const {
+    recipient_name,
+    order_number,
+    currency,
+    payment_method,
+    address,
+    summary,
+    adjustments,
+    elements
+  } = doc;
+  const money = (v) => typeof v === "number" ? `${v.toLocaleString()}${currency ? ` ${currency}` : ""}` : v;
+  const addressLine = address ? [
+    address.street_1,
+    address.street_2,
+    address.city,
+    address.state,
+    address.postal_code,
+    address.country
+  ].filter(Boolean).join(", ") : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-[320px]", className),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-subtle bg-card shadow-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 bg-surface-subtle px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-sm font-semibold text-foreground", children: recipient_name || "Receipt" }),
+              order_number && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+                "Order #",
+                order_number
+              ] })
+            ] }),
+            payment_method && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 rounded-full bg-card px-2 py-1 text-[11px] font-medium text-muted-foreground shadow-sm", children: payment_method })
+          ] }),
+          Array.isArray(elements) && elements.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-border-subtle px-4", children: elements.map((el, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-11 w-11 flex-shrink-0 overflow-hidden rounded-lg bg-muted", children: el.image_url && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: el.image_url,
+                alt: "",
+                className: "h-full w-full object-cover",
+                referrerPolicy: "no-referrer",
+                onError: (e) => {
+                  e.currentTarget.style.display = "none";
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-[13px] font-medium text-foreground", children: el.title }),
+              el.subtitle && /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-xs text-muted-foreground", children: el.subtitle }),
+              el.quantity != null && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+                "Qty ",
+                el.quantity
+              ] })
+            ] }),
+            el.price != null && /* @__PURE__ */ jsx("p", { className: "flex-shrink-0 text-xs font-medium text-foreground", children: money(el.price) })
+          ] }, i)) }),
+          Array.isArray(adjustments) && adjustments.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1 border-t border-border-subtle px-4 py-2.5", children: adjustments.map((adj, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between text-xs text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: adj.name }),
+                /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 pl-2", children: money(adj.amount) })
+              ]
+            },
+            i
+          )) }),
+          summary && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border-subtle px-4 py-2.5 text-xs", children: [
+            summary.subtotal != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: "Subtotal" }),
+              /* @__PURE__ */ jsx("span", { children: money(summary.subtotal) })
+            ] }),
+            summary.shipping_cost != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: "Shipping" }),
+              /* @__PURE__ */ jsx("span", { children: money(summary.shipping_cost) })
+            ] }),
+            summary.total_tax != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: "Tax" }),
+              /* @__PURE__ */ jsx("span", { children: money(summary.total_tax) })
+            ] }),
+            summary.total_cost != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between border-t border-dashed border-border-subtle pt-1.5 text-sm font-semibold text-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: "Total" }),
+              /* @__PURE__ */ jsx("span", { children: money(summary.total_cost) })
+            ] })
+          ] }),
+          addressLine && /* @__PURE__ */ jsx("div", { className: "border-t border-border-subtle bg-surface-subtle px-4 py-2.5 text-xs text-muted-foreground", children: addressLine })
+        ] }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const TEMPLATE_DOC_HANDLERS = {
+  [MessageType.GENERIC_TEMPLATE]: GenericTemplateContent,
+  [MessageType.BUTTON_TEMPLATE]: ButtonTemplateContent,
+  [MessageType.MEDIA_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.PRODUCT_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.IMAGE_GRID_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.RECEIPT_TEMPLATE]: ReceiptTemplateContent
+};
+const TemplateFallbackContent = ({ msg, className, timeText }) => {
+  const text = msg?.content?.text;
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "max-w-[300px] rounded-xl bg-card px-3 py-2 text-sm text-foreground",
+        className
+      ),
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line", children: text }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+};
+const TemplateContent = ({ msg, className, timeText }) => {
+  const templates = msg?.extra_data?.templates;
+  if (!Array.isArray(templates) || templates.length <= 1) {
+    return /* @__PURE__ */ jsx(
+      TemplateFallbackContent,
+      {
+        msg,
+        className,
+        timeText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: templates.map((doc, i) => {
+    const DocHandler = TEMPLATE_DOC_HANDLERS[doc?.type] || TemplateFallbackContent;
+    return /* @__PURE__ */ jsx(
+      DocHandler,
+      {
+        msg: { ...msg, content: doc },
+        className,
+        timeText: i === templates.length - 1 ? timeText : ""
+      },
+      i
+    );
+  }) });
+};
+const CONTENT_HANDLERS = {
+  image: ImageContent,
+  images: ImageContent,
+  file: FileContent,
+  link: LinkContent,
+  fallback: LinkContent,
+  video: VideoContent,
+  audio: AudioContent,
+  text: TextContent,
+  sticker: ImageContent,
+  product: ProductPreview,
+  tiktok_product: TiktokProductPreview,
+  reel: ReelContent,
+  unsupported: UnsupportedContent,
+  contact_card: ZaloContactCardContent,
+  location: LocationContent,
+  friend_request: FriendEventContent,
+  chat_form: ChatFormContent,
+  "utility-messages": UtilityMessageContent,
+  forward: ForwardContent,
+  order: OrderContent,
+  tiktok_order: TiktokOrderPreview,
+  tiktok_voucher: TiktokVoucherPreview,
+  share_post: SharePostContent,
+  [MessageType.GENERIC_TEMPLATE]: GenericTemplateContent,
+  [MessageType.BUTTON_TEMPLATE]: ButtonTemplateContent,
+  [MessageType.MEDIA_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.PRODUCT_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.IMAGE_GRID_TEMPLATE]: ElementsTemplateContent,
+  [MessageType.RECEIPT_TEMPLATE]: ReceiptTemplateContent,
+  [MessageType.TEMPLATE]: TemplateContent,
+  default: () => ""
+};
+const FACEBOOK_CONTENT_HANDLERS = {
+  ...CONTENT_HANDLERS,
+  image: FacebookImagePreview,
+  images: FacebookImagePreview,
+  file: FacebookFilePreview,
+  share_post: FacebookPostPreview,
+  reel: FacebookReelPreview,
+  share_event: FacebookEventPreview,
+  share_page: FacebookPagePreview,
+  share_group: FacebookGroupPreview,
+  sticker: FacebookStickerPreview,
+  appointment_booking: FacebookAppointmentBookingPreview,
+  video: FacebookVideoPreview,
+  audio: FacebookAudioPreview
+};
+const INSTAGRAM_CONTENT_HANDLERS = {
+  ...CONTENT_HANDLERS,
+  share_post: InstagramSharePostPreview
+};
+const TIKTOK_CONTENT_HANDLERS = {
+  ...CONTENT_HANDLERS,
+  share_post: TiktokSharePostPreview
+};
+const WHATSAPP_CONTENT_HANDLERS = {
+  ...CONTENT_HANDLERS,
+  contact_card: WhatsAppContactCardPreview,
+  order: WhatsAppOrderPreview,
+  poll_creation: WhatsAppPollPreview,
+  product: WhatsAppProductPreview
+};
+const areMessageBubblePropsEqual = (prev, next) => {
+  const pm = prev.msg;
+  const nm = next.msg;
+  return pm._id === nm._id && pm.updated_at === nm.updated_at && pm.status === nm.status && pm.agent_reads === nm.agent_reads && pm.extra_data?.reactions === nm.extra_data?.reactions && pm.extra_data?.is_undo === nm.extra_data?.is_undo && pm.extra_data?.is_deleted === nm.extra_data?.is_deleted && prev.isChatAllowed === next.isChatAllowed && prev.requester === next.requester;
+};
+const MessageBubbleBase = ({
+  msg,
+  isReply = false,
+  isZalo: isZalo2,
+  isTiktok: isTiktok2,
+  isChatAllowed,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [showOriginal, setShowOriginal] = useState(false);
+  const isUndone = msg?.extra_data?.is_undo === true;
+  const undoOriginalContent = msg?.extra_data?.undo_original?.content;
+  const isDeleted = msg?.extra_data?.is_deleted === true;
+  const deletedOriginalContent = msg?.extra_data?.deleted_original?.content;
+  const canShowOriginal = (isUndone && !!undoOriginalContent || isDeleted && !!deletedOriginalContent) && !isReply;
+  const undoByName = msg?.extra_data?.undo_by || "";
+  const effectiveMsg = useMemo(() => {
+    if (canShowOriginal && showOriginal) {
+      const originalContent = isUndone ? undoOriginalContent : deletedOriginalContent;
+      return { ...msg, content: originalContent };
+    }
+    return msg;
+  }, [
+    msg,
+    canShowOriginal,
+    showOriginal,
+    isUndone,
+    undoOriginalContent,
+    deletedOriginalContent
+  ]);
+  const contentType = effectiveMsg?.content?.type || (Array.isArray(effectiveMsg?.extra_data?.products) && effectiveMsg.extra_data.products.length > 0 ? "product" : void 0);
+  let ContentHandler = contentType ? CONTENT_HANDLERS[contentType] || CONTENT_HANDLERS.default : CONTENT_HANDLERS.default;
+  if (effectiveMsg?.ticket_source === "facebook") {
+    ContentHandler = FACEBOOK_CONTENT_HANDLERS[contentType] || CONTENT_HANDLERS.default;
+  }
+  if (effectiveMsg?.ticket_source === "instagram") {
+    ContentHandler = INSTAGRAM_CONTENT_HANDLERS[contentType] || CONTENT_HANDLERS.default;
+  }
+  if (effectiveMsg?.ticket_source === "tiktok" || effectiveMsg?.ticket_source === "tiktok_shop") {
+    ContentHandler = TIKTOK_CONTENT_HANDLERS[contentType] || CONTENT_HANDLERS.default;
+  }
+  if (effectiveMsg?.ticket_source === "whatsapp") {
+    ContentHandler = WHATSAPP_CONTENT_HANDLERS[contentType] || CONTENT_HANDLERS.default;
+  }
+  if (contentType === "product" && effectiveMsg.extra_data.type === "tiktok-shop") {
+    ContentHandler = CONTENT_HANDLERS["tiktok_product"];
+  }
+  if (contentType === "order" && effectiveMsg?.extra_data?.type === "tiktok-shop") {
+    ContentHandler = CONTENT_HANDLERS["tiktok_order"];
+  }
+  if (contentType === "coupon" && effectiveMsg?.extra_data?.type === "tiktok-shop") {
+    ContentHandler = CONTENT_HANDLERS["tiktok_voucher"];
+  }
+  if (contentType === "file") {
+    const firstSrc = effectiveMsg.content?.src?.split("||")[0];
+    if (firstSrc && isImageFile(firstSrc)) {
+      ContentHandler = CONTENT_HANDLERS["image"];
+    } else if (firstSrc && isVideoFile(firstSrc)) {
+      ContentHandler = CONTENT_HANDLERS["video"];
+    }
+  }
+  if (!ContentHandler) {
+    return null;
+  }
+  const timeText = !isReply ? formatTime(effectiveMsg.date || effectiveMsg.created_at) : "";
+  let className = "";
+  switch (effectiveMsg.status) {
+    case "pending":
+      className += " opacity-60";
+      break;
+    case "failed":
+      if (contentType === "product") {
+        return /* @__PURE__ */ jsx(
+          ContentHandler,
+          {
+            isZalo: isZalo2,
+            isTiktok: isTiktok2,
+            isChatAllowed,
+            className: cn("min-w-[80px]", props.className),
+            isReply,
+            msg,
+            ...props,
+            timeText
+          }
+        );
+      }
+      if (contentType === "utility-messages") {
+        return /* @__PURE__ */ jsx(
+          ContentHandler,
+          {
+            isZalo: isZalo2,
+            isTiktok: isTiktok2,
+            isChatAllowed,
+            className: cn("mb-2 min-w-[80px]", props.className),
+            isReply,
+            msg,
+            ...props,
+            timeText
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-xl shadow-md", children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 bg-destructive/20" }),
+        /* @__PURE__ */ jsx(
+          ContentHandler,
+          {
+            isZalo: isZalo2,
+            isTiktok: isTiktok2,
+            isChatAllowed,
+            className: cn("relative z-0 min-w-[80px]", props.className),
+            isReply,
+            msg,
+            ...props,
+            timeText
+          }
+        )
+      ] });
+  }
+  if (!contentType) {
+    return "";
+  }
+  const isUndoPlaceholder = canShowOriginal && !showOriginal;
+  const undoToggle = canShowOriginal ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowOriginal((v) => !v),
+      title: showOriginal ? t("chat:action.hideOriginalMessage", {
+        defaultValue: "\u1EA8n tin nh\u1EAFn g\u1ED1c"
+      }) : t("chat:action.viewOriginalMessage", {
+        defaultValue: "Xem tin nh\u1EAFn g\u1ED1c"
+      }),
+      className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-primary hover:bg-secondary",
+      children: showOriginal ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
+    }
+  ) : null;
+  const handlerSupportsInlineToggle = contentType === "text";
+  const renderedContent = /* @__PURE__ */ jsx(
+    ContentHandler,
+    {
+      isZalo: isZalo2,
+      isTiktok: isTiktok2,
+      isChatAllowed,
+      className: cn("mb-2 min-w-[80px]" + className, props.className),
+      isReply,
+      msg: effectiveMsg,
+      ...props,
+      timeText,
+      undoToggle: handlerSupportsInlineToggle ? undoToggle : void 0,
+      isUndoPlaceholder: handlerSupportsInlineToggle ? isUndoPlaceholder : void 0,
+      undoByName: handlerSupportsInlineToggle ? undoByName : void 0
+    }
+  );
+  if (canShowOriginal && !handlerSupportsInlineToggle) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1.5", children: [
+        renderedContent,
+        undoToggle
+      ] }),
+      undoByName && isUndoPlaceholder && /* @__PURE__ */ jsx("span", { className: "text-[11px] italic text-muted-foreground", children: t("chat:label.performedBy", {
+        undoByName,
+        defaultValue: "Th\u1EF1c hi\u1EC7n b\u1EDFi: {undoByName}"
+      }) })
+    ] });
+  }
+  return renderedContent;
+};
+const MessageBubble = memo(MessageBubbleBase, areMessageBubblePropsEqual);
+const FbCommentActionMessage = ({ message }) => {
+  const { t } = useTranslation();
+  const comment = message.extra_data?.comment;
+  const postMessage = comment?.post?.message || "";
+  const postImage = comment?.post?.attachments?.data?.[0]?.media?.image?.src || "";
+  const createdTime = comment?.post?.created_time ? formatDayWithTime(comment.post.created_time) : "";
+  const permalinkUrl = (() => {
+    try {
+      const src = message.content?.src;
+      if (src) {
+        const parsed = JSON.parse(src);
+        return parsed?.permalink_url || "";
+      }
+    } catch {
+    }
+    return "";
+  })();
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto my-3 flex w-[calc(100%-82px)] items-center gap-2 rounded-lg border border-border-subtle bg-card p-3 text-sm shadow-lg", children: [
+    postImage && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: postImage,
+        alt: "",
+        className: "h-10 w-10 shrink-0 rounded object-cover",
+        referrerPolicy: "no-referrer"
+      }
+    ),
+    !postImage && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded bg-muted", children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-5 w-5" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 overflow-hidden text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "line-clamp-1 font-medium", children: postMessage }),
+      createdTime && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("chat:label.createdTimeValue", {
+        createdTime,
+        defaultValue: "Th\u1EDDi gian t\u1EA1o: {createdTime}"
+      }) })
+    ] }),
+    permalinkUrl && /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: permalinkUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "ml-auto flex-shrink-0 text-foreground hover:text-primary",
+        children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+      }
+    )
+  ] });
+};
+const ActionMessage = ({ message, ...props }) => {
+  const { t } = useTranslation();
+  const user = getUser();
+  const chatterName = message.chatter_id === user?._id ? t("chat:label.you", { defaultValue: "B\u1EA1n" }) : message.chatter_name;
+  if (ReminderMessageTypes.includes(message.content?.type)) {
+    return /* @__PURE__ */ jsx(ZaloReminderContent, { msg: message, ...props });
+  }
+  if (message.content?.type === MessageType.REMINDER_RECEIVE) {
+    const { content, date } = message;
+    const reminder = getContentObj(message);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto my-3 flex w-fit max-w-[50%] flex-col items-center justify-center gap-1 rounded-lg border border-warning/40 bg-[--label-orange] p-2 px-6 text-center text-sm text-[--label-orange-foreground] shadow-lg"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1 p-1", children: [
+            /* @__PURE__ */ jsx(AlarmClock, { className: "h-4 w-4 pb-0.5" }),
+            " ",
+            t("chat:label.reminderPrefix", { defaultValue: "Nh\u1EAFc h\u1EB9n:" }),
+            " ",
+            reminder?.title || content
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1 p-1 text-xs", children: generateReminderTimeText(reminder?.start_time || date) || formatDayWithTime(date) })
+        ]
+      }
+    );
+  }
+  let text = "";
+  switch (message.content.type) {
+    case MessageType.ACTION_RECEIVE:
+      text = t("common:message.conversationAcceptedBy", {
+        name: `<strong>${chatterName}</strong>`,
+        defaultValue: "{name} \u0111\xE3 ti\u1EBFp nh\u1EADn cu\u1ED9c h\u1ED9i tho\u1EA1i."
+      });
+      break;
+    case MessageType.ACTION_JOIN:
+      text = t("common:message.conversationJoinedBy", {
+        name: `<strong>${chatterName}</strong>`,
+        defaultValue: "{name} \u0111\xE3 tham gia cu\u1ED9c h\u1ED9i tho\u1EA1i."
+      });
+      break;
+    case MessageType.ACTION_OPT_IN:
+      text = t("common:message.conversationActionBy", {
+        name: `<strong>${chatterName}</strong>`,
+        action: MessageTypeContext[MessageType.ACTION_OPT_IN],
+        defaultValue: "{name} \u0111\xE3 {action}"
+      });
+      break;
+    case MessageType.ACTION_STARTED:
+      text = t("common:message.conversationStartedBy", {
+        name: `<strong>${maskData(String(chatterName))}</strong>`,
+        defaultValue: "{name} \u0111\xE3 b\u1EAFt \u0111\u1EA7u cu\u1ED9c h\u1ED9i tho\u1EA1i."
+      });
+      break;
+    case MessageType.ACTION_LEAVE: {
+      const removedById = message.content?.removed_by_id;
+      const actorName = removedById && String(removedById) === String(user?._id) ? t("chat:label.you", { defaultValue: "B\u1EA1n" }) : message.content?.removed_by_name;
+      text = message.content?.removed_by_name ? t("common:message.conversationMemberRemovedBy", {
+        name: `<strong>${chatterName}</strong>`,
+        actor: `<strong>${actorName}</strong>`,
+        defaultValue: "{actor} \u0111\xE3 x\xF3a {name} ra kh\u1ECFi \u0111o\u1EA1n chat."
+      }) : t("common:message.conversationLeftBy", {
+        name: `<strong>${chatterName}</strong>`,
+        defaultValue: "{name} \u0111\xE3 r\u1EDDi cu\u1ED9c h\u1ED9i tho\u1EA1i."
+      });
+      break;
+    }
+    case MessageType.ACTION_END: {
+      const timeValue = message?.created_at ? formatDayWithTime(message.created_at) : "";
+      text = timeValue ? t("common:message.conversationClosedByAt", {
+        name: `<strong>${chatterName}</strong>`,
+        timeValue,
+        defaultValue: "{name} \u0111\xE3 \u0111\xF3ng h\u1ED9i tho\u1EA1i n\xE0y l\xFAc <span>{timeValue}</span>."
+      }) : t("common:message.conversationClosedBy", {
+        name: `<strong>${chatterName}</strong>`,
+        defaultValue: "{name} \u0111\xE3 \u0111\xF3ng h\u1ED9i tho\u1EA1i n\xE0y."
+      });
+      break;
+    }
+    case MessageType.ACTION_REOPEN:
+      text = t("common:message.conversationReopenedBy", {
+        name: `<strong>${chatterName}</strong>`,
+        defaultValue: "{name} \u0111\xE3 m\u1EDF l\u1EA1i cu\u1ED9c h\u1ED9i tho\u1EA1i."
+      });
+      break;
+    case MessageType.ACTION_TIKTOK_END_SESSION:
+      text = t("common:message.tiktokEndSessionSuccess", {
+        defaultValue: "\u0110\xE3 g\u1EEDi kh\u1EA3o s\xE1t m\u1EE9c \u0111\u1ED9 h\xE0i l\xF2ng \u0111\u1EBFn kh\xE1ch h\xE0ng."
+      });
+      break;
+    case MessageType.ZALO_ACCEPT_FRIEND:
+    case MessageType.ZALO_CREATE_GROUP:
+    case MessageType.CHAT_SIGNAL:
+    case MessageType.PIN:
+    case MessageType.UN_PIN:
+      text = message.content.text || message.content.src;
+      break;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "my-2 text-center text-xs italic text-muted-foreground",
+      title: formatDayWithTime(message.date),
+      style: { whiteSpace: "pre-wrap" },
+      children: /* @__PURE__ */ jsx(
+        SafeHTML,
+        {
+          html: [MessageType.PIN, MessageType.UN_PIN].includes(message.content.type) ? text : convertURLsToLinks(text)
+        }
+      )
+    }
+  );
+};
+const ChatMessage = ({
+  message,
+  isChatAllowed,
+  nextMessage,
+  pinnedData,
+  zaloAllocatedList,
+  isSelectMode,
+  isSelected,
+  onSelect,
+  ticketSource,
+  ...props
+}) => {
+  const isHighlighted = useChatStore(
+    (s) => s.highlightMessageId === message?._id
+  );
+  const displayContent = useMemo(
+    () => withMentionsHighlighted(message),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [message._id, message.updated_at]
+  );
+  const user = getUser();
+  const isAgent = message.chatter_type === "agent" || message.chatter_type === "chatbot";
+  if (message.content?.type === MessageType.ACTION_COMMENT_FB) {
+    return /* @__PURE__ */ jsx(FbCommentActionMessage, { message });
+  }
+  if (message.content?.type === "ads_content") {
+    const adData = props.ticket?.extra_data?.ad_data;
+    const postLinkUrl = adData?.post_id ? props.ticket?.source_id ? `https://www.facebook.com/${props.ticket.source_id}/posts/${adData.post_id}` : `https://www.facebook.com/${adData.post_id}` : void 0;
+    return /* @__PURE__ */ jsx("div", { className: "my-3 flex w-full justify-end", children: /* @__PURE__ */ jsx("div", { className: "mr-[44px] w-full max-w-[420px]", children: /* @__PURE__ */ jsx(AdsContextCard, { payload: message.content, postLinkUrl }) }) });
+  }
+  if (ActionMessageTypes.includes(message.content?.type) || ReminderMessageTypes.includes(message.content?.type) || PinMessageTypes.includes(message.content?.type)) {
+    return /* @__PURE__ */ jsx(ActionMessage, { message, ...props });
+  }
+  const isReplyInMessage = () => {
+    if (!isChatAllowed) {
+      return false;
+    }
+    if (message?.extra_data?.is_undo || message?.extra_data?.is_deleted) {
+      return false;
+    }
+    if (message?.content?.type === "friend_request") {
+      return false;
+    }
+    if (nextMessage?.content?.type === "friend_request" || nextMessage?.extra_data?.old_type === "friend_request") {
+      return false;
+    }
+    if (message?.content?.type == "image") {
+      const contentImage = parseMessageUrls(message?.content.src);
+      if (contentImage?.previewUrls?.length !== 1) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const isPinInMessage = () => {
+    if (!isChatAllowed) {
+      return false;
+    }
+    if (message?.extra_data?.is_undo || message?.extra_data?.is_deleted) {
+      return false;
+    }
+    if (message?.content?.type === "friend_request") {
+      return false;
+    }
+    if (nextMessage?.content?.type === "friend_request" || nextMessage?.extra_data?.old_type === "friend_request") {
+      return false;
+    }
+    if (message?.content?.type == "image") {
+      const contentImage = parseMessageUrls(message?.content.src);
+      if (contentImage?.previewUrls?.length !== 1) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const isForwardInMessage = () => {
+    if (!isChatAllowed) return false;
+    if (message?.extra_data?.is_undo || message?.extra_data?.is_deleted)
+      return false;
+    if (message?.content?.type === "friend_request") return false;
+    if (!message?.content?.meta?.msgId) return false;
+    return true;
+  };
+  const isMychat = isMessageFromSelf({
+    message,
+    ticket: props.ticket,
+    user,
+    isAgent
+  });
+  const getIsMychat = () => isMychat;
+  return /* @__PURE__ */ jsx(
+    MessageContext.Provider,
+    {
+      value: {
+        messageId: message._id,
+        roomId: props.ticket?._id,
+        messageSeq: message.seq ?? null,
+        messageCreatedAt: message.created_at ?? null,
+        isAgent,
+        readReceipt: message?.read_receipt ?? null
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full items-start gap-3 overflow-hidden",
+            isMychat && "flex-row-reverse",
+            message.showUserName && "mt-2",
+            isHighlighted && "rounded-lg bg-secondary"
+          ),
+          children: [
+            isSelectMode && onSelect && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0 z-10 cursor-pointer",
+                onClick: () => onSelect(message)
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Avatar,
+              {
+                className: cn(
+                  "size-8 self-start",
+                  !message.showUserName && "invisible"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: message.chatter_avatar,
+                      alt: message.chatter_name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted", children: message.chatter_type === "chatbot" ? /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 max-w-[70%] flex-col gap-1",
+                  isMychat ? "items-end" : "items-start"
+                ),
+                children: [
+                  message.showUserName && (isAgent || isZaloGroup(props.ticket)) && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "max-w-full truncate"
+                        // isAgent ? 'text-right' : 'text-left',
+                      ),
+                      children: message.chatter_name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "group relative flex min-w-0 max-w-full flex-row items-center",
+                        isAgent ? "flex-row-reverse justify-end" : "justify-start"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          MessageBubble,
+                          {
+                            isZalo: isZalo(props.ticket),
+                            isTiktok: message?.source === "tiktok" || message?.source === "tiktok_shop" || isTiktok(props.ticket),
+                            isAgent,
+                            isChatAllowed,
+                            msg: {
+                              ...message,
+                              content: displayContent,
+                              ticket_source: message.ticket_source ?? ticketSource
+                            },
+                            ...props
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          ReactionPreview,
+                          {
+                            ticket: props.ticket,
+                            reactions: message.extra_data?.reactions,
+                            isPending: "_pendingReactionTs" in message
+                          }
+                        ),
+                        isChatAllowed && message.status === "success" && (isZaloPersonal(props.ticket) || isFacebook(props.ticket)) && IsMessageAction(message) && !message?.extra_data?.is_undo && !message?.extra_data?.is_deleted && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "inset-shadow-sm absolute -bottom-1.5 -right-3 flex -translate-y-1 cursor-pointer items-center justify-center rounded-full p-[4px] hover:text-primary"
+                            ),
+                            children: /* @__PURE__ */ jsx(
+                              ReactionButton,
+                              {
+                                chatRoom: props.ticket,
+                                isMychat: getIsMychat(),
+                                message
+                              }
+                            )
+                          }
+                        ),
+                        !isSelectMode && /* @__PURE__ */ jsx(
+                          ChatMessageActions,
+                          {
+                            ticket: props.ticket,
+                            isAgent,
+                            isChatAllowed,
+                            isReplyInMessage,
+                            isPinInMessage,
+                            isForwardInMessage,
+                            message,
+                            isReply: isZaloPersonal(props.ticket) || isFacebook(props.ticket) || isZalo(props.ticket),
+                            isPin: isZaloPersonal(props.ticket),
+                            isForward: isZaloPersonal(props.ticket) || isZaloGroup(props.ticket),
+                            isMychat: getIsMychat(),
+                            pinnedData,
+                            zaloAllocatedList,
+                            className: cn(
+                              "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+                              !isAgent && "scale-x-[-1]"
+                            )
+                          }
+                        ),
+                        isSelectMode && onSelect && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "relative z-[9] order-last mx-2.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                              isSelected ? "border-primary bg-primary" : "border-border bg-card"
+                            ),
+                            children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  message.status === "failed" && message?.content?.type !== "utility-messages" && /* @__PURE__ */ jsx("div", { className: "text-end text-xs text-destructive", children: translateServerLabel(
+                    message?.extra_data?.send_error?.message
+                  ) || translateServerLabel(
+                    message?.extra_data?.send_error?.exception_message
+                  ) || i18n.t("chat:label.failedToSendMessage", {
+                    defaultValue: "G\u1EEDi tin nh\u1EAFn th\u1EA5t b\u1EA1i"
+                  }) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const messageRenderEqual = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a._id === b._id && a.status === b.status && a.updated_at === b.updated_at && a.content === b.content && a.extra_data === b.extra_data && a.dateLabel === b.dateLabel && a.showUserName === b.showUserName;
+};
+const chatMessagePropsAreEqual = (prev, next) => prev.isChatAllowed === next.isChatAllowed && prev.ticket === next.ticket && prev.chatRoom === next.chatRoom && prev.ticketSource === next.ticketSource && prev.requester === next.requester && prev.pinnedData?.data?.data === next.pinnedData?.data?.data && prev.zaloAllocatedList === next.zaloAllocatedList && prev.reminderAction === next.reminderAction && prev.isSelectMode === next.isSelectMode && prev.isSelected === next.isSelected && prev.onSelect === next.onSelect && messageRenderEqual(prev.message, next.message) && messageRenderEqual(prev.nextMessage, next.nextMessage);
+var chat_message_default = memo(ChatMessage, chatMessagePropsAreEqual);
+export {
+  MessageBubble,
+  chat_message_default as default
+};