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

package/components/chat-route/chat-box/send-contact-card-modal.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { memo, useMemo, useState } from "react";
+import { Loader2, Search, Send } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader } from "../../ui/dialog.js";
+import { Input } from "../../ui/input.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { Button } from "../../ui/button.js";
+import { useQuery } from "@tanstack/react-query";
+import { getListFriendZaloGroup } from "@zenify-omni/chat-js/api/chat.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { sendContactCardMessage } from "./send-contact-card.js";
+const FriendCardItem = memo(({ friend, onSend }) => {
+  const displayName = friend?.name || friend?.zalo_name || "Unknown";
+  const initial = displayName.charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [
+    /* @__PURE__ */ jsxs(Avatar, { className: "h-9 w-9 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx(AvatarImage, { src: friend?.avatar, alt: displayName }),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initial })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm", children: displayName }),
+      /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: friend?.phone || "--" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-7 gap-1 px-2 text-xs text-primary",
+        onClick: () => onSend(friend),
+        children: [
+          /* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }),
+          i18n.t("common:action.send", {
+            defaultValue: "G\u1EEDi"
+          })
+        ]
+      }
+    )
+  ] });
+});
+FriendCardItem.displayName = "FriendCardItem";
+const useZaloFriendList = (zaloId, open) => {
+  return useQuery({
+    queryKey: ["SendContactCardModal:friends", zaloId],
+    queryFn: async () => {
+      const { data } = await getListFriendZaloGroup(zaloId);
+      return data?.data ?? [];
+    },
+    enabled: !!zaloId && open,
+    onError: throwException
+  });
+};
+function SendContactCardModal({ open, onOpenChange, zaloId, chatRoom }) {
+  const user = getUser();
+  const [searchText, setSearchText] = useState("");
+  const { data: friendList = [], isLoading } = useZaloFriendList(zaloId, open);
+  const filtered = useMemo(() => {
+    const trimmed = searchText.trim().toLowerCase();
+    if (!trimmed) return friendList;
+    return friendList.filter(
+      (f) => f?.name?.toLowerCase().includes(trimmed) || f?.zalo_name?.toLowerCase().includes(trimmed) || f?.phone?.toLowerCase().includes(trimmed)
+    );
+  }, [friendList, searchText]);
+  const handleSend = (friend) => {
+    onOpenChange(false);
+    sendContactCardMessage({ chatRoom, user, contact: friend });
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-md flex-col gap-1 overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "px-4 pb-1 pt-5", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: i18n.t("chat:label.guiDanhThiep", {
+      defaultValue: "G\u1EEDi danh thi\u1EBFp"
+    }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "h-8 pl-8 text-sm",
+          placeholder: i18n.t("chat:placeholder.searchNameOrPhone", {
+            defaultValue: "T\xECm ki\u1EBFm t\xEAn ho\u1EB7c s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+          }),
+          value: searchText,
+          onChange: (e) => setSearchText(e.target.value)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-32 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: i18n.t("chat:empty.noFriends", {
+      defaultValue: "Kh\xF4ng c\xF3 b\u1EA1n b\xE8 n\xE0o"
+    }) }) }) : filtered.map((friend) => /* @__PURE__ */ jsx(
+      FriendCardItem,
+      {
+        friend,
+        onSend: handleSend
+      },
+      friend.zalo_id
+    )) })
+  ] }) });
+}
+export {
+  SendContactCardModal
+};

package/components/chat-route/chat-box/send-contact-card.js

@@ -0,0 +1,80 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { v4 as uuidv4 } from "uuid";
+import { toast } from "sonner";
+import useChatStore from "../../../store/chat-store.js";
+import { sendZaloPersonalContactCard } from "@zenify-omni/chat-js/api/chat.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { isZaloGroup } from "../util.js";
+const buildContactCardContent = (contact, contactName, qr) => ({
+  type: "contact_card",
+  text: contactName,
+  meta: {
+    content_obj: {
+      title: contactName,
+      phone: contact.phone,
+      avatar: contact.avatar,
+      zalo_id: contact.zalo_id,
+      ...qr ? { qr } : {}
+    }
+  }
+});
+async function sendContactCardMessage({ chatRoom, user, contact }) {
+  const clientMsgId = uuidv4();
+  const contactName = contact.name || contact.zalo_name;
+  const roomId = chatRoom._id;
+  useChatStore.getState().addNewMessage(roomId, {
+    _id: clientMsgId,
+    client_msg_id: clientMsgId,
+    room_id: roomId,
+    chatter_id: user?._id,
+    chatter_name: user?.name,
+    chatter_type: "agent",
+    source: chatRoom.source,
+    session_id: chatRoom.session?._id,
+    session: chatRoom.session,
+    content: buildContactCardContent(contact, contactName),
+    created_at: (/* @__PURE__ */ new Date()).toISOString(),
+    status: "pending"
+  });
+  try {
+    const { data: body } = await sendZaloPersonalContactCard({
+      sourceId: chatRoom?.source_id,
+      userZaloId: chatRoom?.source_room_id,
+      isGroup: isZaloGroup(chatRoom),
+      roomId,
+      sessionId: chatRoom.session?._id,
+      clientMsgId,
+      chatterId: user?._id,
+      chatterName: user?.name,
+      chatterAvatar: user?.avatar,
+      contactZaloId: contact.zalo_id,
+      contactName,
+      contactPhone: contact.phone,
+      contactAvatar: contact.avatar
+    });
+    if (body?.success) {
+      useChatStore.getState().updateMessageByClientMsgId(roomId, clientMsgId, {
+        _id: body.data.chat_message_id,
+        status: "success",
+        content: buildContactCardContent(contact, contactName, body.data.qr)
+      });
+    } else {
+      useChatStore.getState().updateMessageByClientMsgId(roomId, clientMsgId, {
+        _id: body?.data?.chat_message_id ?? clientMsgId,
+        status: "failed"
+      });
+      toast.error(
+        body?.data?.error || i18n.t("chat:label.guiDanhThiepThatBai", {
+          defaultValue: "G\u1EEDi danh thi\u1EBFp th\u1EA5t b\u1EA1i"
+        })
+      );
+    }
+  } catch (err) {
+    useChatStore.getState().updateMessageByClientMsgId(roomId, clientMsgId, { status: "failed" });
+    throwException(err);
+  }
+}
+export {
+  buildContactCardContent,
+  sendContactCardMessage
+};

package/components/chat-route/chat-box/text-content.js

@@ -0,0 +1,400 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { cn } from "../../../lib/utils.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { Button } from "../../custom/button.js";
+import { Separator } from "../../ui/separator.js";
+import { EMAIL_REGEX } from "@zenify-omni/chat-js/constants/regex.js";
+import { LinkPreview } from "../../custom/previews/link-preview.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { updateContact } from "@zenify-omni/chat-js/api/contact.js";
+import { autoAssignTagChatRoom } from "@zenify-omni/chat-js/api/chatroom.js";
+import { AutoAssignTagTrigger } from "@zenify-omni/chat-js/constants/auto-assign-tag.js";
+import { showDuplicatePhoneWarning } from "../../leads-route/duplicate-phone-warning-toast.js";
+import { isDuplicateContactWarning } from "@zenify-omni/chat-js/constants/user.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { showInfoToast, showSuccessToast } from "../../ui/sonner.js";
+import { convertURLsToLinks, getFirstURL } from "@zenify-omni/chat-js/utils/string.js";
+import { replaceEmoticons } from "@zenify-omni/chat-js/utils/emoticon.js";
+import { replaceZaloSprite } from "../../../utils/replaceZaloSprite.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { findVNPhonesInText, isVNPhoneLike } from "@zenify-omni/chat-js/lib/phone.js";
+import SafeHTML from "../../custom/SafeHTML.js";
+import { MessageTime } from "./message-time.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import {
+  isZaloGroup,
+  isZaloGeneralChannel,
+  isZaloPersonChannel,
+  isAgentStyle
+} from "../util.js";
+import { ChatReplyPreview } from "./chat-reply-preview.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { CHATTER_TYPES } from "./constants.js";
+import { getZaloMessageStyles, zaloRtfToDisplayHtml } from "./zalo-rtf-utils.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const CUSTOMER_TYPES = [CHATTER_TYPES.CONTACT, CHATTER_TYPES.CUSTOMER];
+const TOAST_MESSAGES = {
+  EMAIL_EXISTS: "Email \u0111\xE3 t\u1ED3n t\u1EA1i",
+  PHONE_EXISTS: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i \u0111\xE3 t\u1ED3n t\u1EA1i",
+  BOTH_EXIST: "Email v\xE0 s\u1ED1 \u0111i\u1EC7n tho\u1EA1i \u0111\xE3 t\u1ED3n t\u1EA1i",
+  UPDATE_SUCCESS: "C\u1EADp nh\u1EADt th\xF4ng tin li\xEAn h\u1EC7 th\xE0nh c\xF4ng",
+  UPDATE_FAILED: "C\u1EADp nh\u1EADt li\xEAn h\u1EC7 th\u1EA5t b\u1EA1i"
+};
+const wrapWithHighlight = (text) => `<strong class="underline text-primary">${text}</strong>`;
+const wrapOrder = (text) => `<strong class="underline text-chart-9">${text}</strong>`;
+const highlightPatterns = (str, regex) => {
+  if (!str) return str;
+  return str.replace(regex, wrapWithHighlight);
+};
+const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const highlightEntities = (str, values, wrap) => {
+  if (!str || !values?.length) return str;
+  const uniq = [...new Set(values.filter(Boolean).map(String))].sort(
+    (a, b) => b.length - a.length
+  );
+  if (!uniq.length) return str;
+  const pattern = new RegExp(uniq.map(escapeRegExp).join("|"), "g");
+  return str.replace(pattern, wrap);
+};
+const extractMatches = (content, regex) => {
+  if (!content) return [];
+  const freshRegex = new RegExp(regex.source, regex.flags);
+  return [...content.matchAll(freshRegex)].map((match) => match[0]);
+};
+const normalizePhoneNumber = (phone) => phone?.replace(/\D/g, "") ?? "";
+const getMessageStyleClass = (msg, ticket, userId) => {
+  if (msg.target) {
+    return "bg-[--label-orange] text-[--label-orange-foreground]";
+  }
+  const isAgentMessage = msg.chatter_type === CHATTER_TYPES.AGENT;
+  const isNonGroupOrGeneral = !isZaloGroup(ticket) || isZaloGeneralChannel(ticket);
+  const isPersonChannelOwner = isZaloPersonChannel(ticket) && userId === msg.chatter_id;
+  const isSameSource = msg.source_id && ticket?.source_id && msg.source_id === ticket.source_id;
+  if (isSameSource || isAgentMessage && isNonGroupOrGeneral || isPersonChannelOwner) {
+    return "border border-chat-own-bubble bg-chat-own-bubble text-accent-foreground";
+  }
+  if (msg.chatter_type === CHATTER_TYPES.CHATBOT) {
+    return "bg-[--label-orange] text-accent-foreground";
+  }
+  return "bg-card text-foreground";
+};
+const useContactUpdate = (ticketId, updateRequester) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["updateContact", ticketId],
+    mutationFn: async (payload) => {
+      const { error, message, data } = await updateContact(payload);
+      if (error) {
+        throwException({
+          title: TOAST_MESSAGES.UPDATE_FAILED,
+          message
+        });
+      }
+      return data ?? {};
+    },
+    onSuccess: (data, variables) => {
+      if (isDuplicateContactWarning(data?.type)) {
+        showDuplicatePhoneWarning(variables.id, data);
+        return;
+      }
+      showSuccessToast(TOAST_MESSAGES.UPDATE_SUCCESS);
+      updateRequester(ticketId, data);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CUSTOMER_DETAIL, data._id]
+      });
+      useChatStore.getState().setSubInfoExpanded(true);
+    },
+    onError: throwException
+  });
+};
+const useExtractedContactInfo = (content, chatterType, aiEntities) => {
+  return useMemo(() => {
+    if (!CUSTOMER_TYPES.includes(chatterType) || !content) {
+      return { emails: [], phoneNumbers: [], processedContent: content };
+    }
+    const regexEmails = extractMatches(content, EMAIL_REGEX).map(
+      (e) => e.toLowerCase()
+    );
+    const libPhones = findVNPhonesInText(content);
+    const aiPhones = (aiEntities?.phones || []).filter(
+      (p) => isVNPhoneLike(String(p))
+    );
+    const aiEmails = (aiEntities?.emails || []).map(
+      (e) => String(e).toLowerCase()
+    );
+    const aiOrders = aiEntities?.orders || [];
+    const emails = [.../* @__PURE__ */ new Set([...regexEmails, ...aiEmails])];
+    const phoneNumbers = [.../* @__PURE__ */ new Set([...libPhones, ...aiPhones])];
+    let processedContent = content;
+    processedContent = highlightEntities(processedContent, aiOrders, wrapOrder);
+    if (regexEmails.length) {
+      processedContent = highlightPatterns(processedContent, EMAIL_REGEX);
+    }
+    processedContent = highlightEntities(
+      processedContent,
+      libPhones,
+      wrapWithHighlight
+    );
+    const missedPhones = aiPhones.filter((p) => !libPhones.includes(p));
+    const missedEmails = aiEmails.filter((e) => !regexEmails.includes(e));
+    processedContent = highlightEntities(
+      processedContent,
+      [...missedPhones, ...missedEmails],
+      wrapWithHighlight
+    );
+    return { emails, phoneNumbers, processedContent };
+  }, [content, chatterType, aiEntities]);
+};
+function SaveContactButton({ onClick, isLoading }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx("div", { className: "my-1 flex w-full flex-row justify-end py-2", children: /* @__PURE__ */ jsx(Button, { loading: isLoading, onClick, children: t("chat:action.saveContact", { defaultValue: "L\u01B0u li\xEAn h\u1EC7" }) }) })
+  ] });
+}
+function TextContent({
+  msg,
+  className,
+  isReply,
+  // `ticket` ở luồng chat thực chất là chat room. Prop `chatRoom` là tên đúng,
+  // fallback về `ticket` vì một số nơi gọi TextContent chưa truyền prop mới.
+  chatRoom: chatRoomProp,
+  ticket,
+  ticketId,
+  requester,
+  timeText,
+  undoToggle,
+  isUndoPlaceholder,
+  undoByName
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const chatRoom = chatRoomProp ?? ticket;
+  const updateRequester = useChatStore((state) => state.updateRequester);
+  const { emails, phoneNumbers, processedContent } = useExtractedContactInfo(
+    msg.content.text,
+    msg.chatter_type,
+    void 0
+  );
+  const updateMutation = useContactUpdate(ticket?._id, updateRequester);
+  const autoAssignTagsMutation = useMutation({
+    mutationFn: autoAssignTagChatRoom
+  });
+  const handleSaveInfo = useCallback(() => {
+    if (!requester) {
+      showInfoToast(
+        i18n.t("chat:empty.noContactInfoToSave", {
+          defaultValue: "Kh\xF4ng t\xECm th\u1EA5y th\xF4ng tin li\xEAn h\u1EC7 \u0111\u1EC3 l\u01B0u"
+        })
+      );
+      return;
+    }
+    const payload = {};
+    const emailsToAdd = [...emails];
+    const phonesToAdd = [...phoneNumbers].map(normalizePhoneNumber);
+    let isEmailExisting = false;
+    let isPhoneExisting = false;
+    if (emailsToAdd.length) {
+      const existingIndex = emailsToAdd.indexOf(requester.email);
+      if (existingIndex !== -1) {
+        emailsToAdd.splice(existingIndex, 1);
+        isEmailExisting = true;
+      }
+      if (!requester.email && emailsToAdd.length) {
+        payload.email = emailsToAdd.shift();
+      }
+      if (emailsToAdd.length) {
+        payload.$addToSet = {
+          ...payload.$addToSet,
+          sub_email: { $each: emailsToAdd }
+        };
+      }
+    }
+    if (phonesToAdd.length) {
+      const existingIndex = phonesToAdd.indexOf(requester.phone);
+      if (existingIndex !== -1) {
+        phonesToAdd.splice(existingIndex, 1);
+        isPhoneExisting = true;
+      }
+      if (!requester.phone && phonesToAdd.length) {
+        payload.phone = phonesToAdd.shift();
+      }
+      if (phonesToAdd.length) {
+        payload.$addToSet = {
+          ...payload.$addToSet,
+          sub_phone: { $each: phonesToAdd }
+        };
+      }
+    }
+    if (Object.keys(payload).length === 0) {
+      if (isEmailExisting && isPhoneExisting) {
+        showInfoToast(TOAST_MESSAGES.BOTH_EXIST);
+      } else if (isPhoneExisting) {
+        showInfoToast(TOAST_MESSAGES.PHONE_EXISTS);
+      } else if (isEmailExisting) {
+        showInfoToast(TOAST_MESSAGES.EMAIL_EXISTS);
+      }
+      return;
+    }
+    const savedPhones = [
+      payload.phone,
+      ...payload.$addToSet?.sub_phone?.$each ?? []
+    ].filter(Boolean);
+    const contactId = requester._id || chatRoom?.requester_id || chatRoom?.customer_ids?.[0];
+    updateMutation.mutate(
+      { id: contactId, data: payload },
+      {
+        onSuccess: (data) => {
+          if (isDuplicateContactWarning(data?.type)) return;
+          if (!savedPhones.length || !chatRoom?._id) return;
+          autoAssignTagsMutation.mutate({
+            chatRoomId: chatRoom._id,
+            data: {
+              triggers: [
+                {
+                  type: AutoAssignTagTrigger.SAVE_CONTACT,
+                  context: { phones: savedPhones, contact_id: contactId }
+                }
+              ]
+            }
+          });
+        }
+      }
+    );
+  }, [
+    emails,
+    phoneNumbers,
+    requester,
+    chatRoom,
+    updateMutation,
+    autoAssignTagsMutation
+  ]);
+  const { displayContent, allowStyledRtf } = useMemo(() => {
+    const rawText = msg.content?.text ?? "";
+    const looksLikeHtml = /<\/?[a-z][\s\S]*>/i.test(rawText);
+    const styles = getZaloMessageStyles(msg);
+    const isIncoming = CUSTOMER_TYPES.includes(msg.chatter_type);
+    if (styles.length > 0 && rawText && !looksLikeHtml) {
+      const html = zaloRtfToDisplayHtml(rawText, styles);
+      const maskedHtml = isIncoming ? maskData(html) : html;
+      return {
+        displayContent: replaceEmoticons(
+          replaceZaloSprite(convertURLsToLinks(maskedHtml))
+        ),
+        allowStyledRtf: true
+      };
+    }
+    const text = processedContent ?? "";
+    const maskedText = isIncoming ? maskData(text) : text;
+    const withLineBreaks = maskedText?.replace(/\n/g, "<br/>");
+    return {
+      displayContent: replaceEmoticons(
+        replaceZaloSprite(convertURLsToLinks(withLineBreaks))
+      ),
+      allowStyledRtf: false
+    };
+  }, [msg, processedContent]);
+  const messageStyleClass = getMessageStyleClass(msg, ticket, user?._id);
+  const hasContactActions = useMemo(() => {
+    const hasExtracted = emails.length > 0 || phoneNumbers.length > 0;
+    if (!hasExtracted) return false;
+    if (!requester) return true;
+    const existingPhones = new Set(
+      [requester.phone, ...requester.sub_phone || []].map(normalizePhoneNumber).filter(Boolean)
+    );
+    const hasNewPhone = phoneNumbers.some(
+      (phone) => !existingPhones.has(normalizePhoneNumber(phone))
+    );
+    const existingEmails = new Set(
+      [requester.email, ...requester.sub_email || []].filter(Boolean).map((email) => String(email).toLowerCase())
+    );
+    const hasNewEmail = emails.some(
+      (email) => !existingEmails.has(String(email).toLowerCase())
+    );
+    return hasNewPhone || hasNewEmail;
+  }, [emails, phoneNumbers, requester]);
+  const previewUrl = useMemo(() => {
+    if (isReply) return null;
+    const rawText = msg.content?.text;
+    if (!rawText) return null;
+    return getFirstURL(rawText);
+  }, [msg.content?.text, isReply]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full break-words rounded-[8px] px-4 py-2 shadow-md",
+        messageStyleClass,
+        isReply && "m-0 truncate border-none bg-transparent !p-0 text-xs text-card-foreground shadow-none",
+        className
+      ),
+      title: formatDayWithTime(msg.created_at),
+      children: [
+        msg.extra_data?.reply_msg_info && !isUndoPlaceholder && /* @__PURE__ */ jsx(
+          ChatReplyPreview,
+          {
+            isAgent: isAgentStyle({ msg, ticket, user }),
+            ticketId,
+            isView: true,
+            classNameContent: "text-card-foreground",
+            className: "!m-0",
+            replyContent: {
+              ...msg.extra_data?.reply_msg_info,
+              _id: msg.extra_data?.reply_msg_info?.chat_message_id || msg.extra_data?.reply_msg_info?._id
+            }
+          }
+        ),
+        undoToggle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              SafeHTML,
+              {
+                isReply: true,
+                className: cn("flex-1", isUndoPlaceholder && "italic opacity-60"),
+                html: displayContent,
+                allowStyledRtf
+              }
+            ),
+            undoToggle
+          ] }),
+          undoByName && isUndoPlaceholder && /* @__PURE__ */ jsx("span", { className: "self-end text-[11px] italic text-muted-foreground", children: t("chat:label.performedBy", {
+            undoByName,
+            defaultValue: "Th\u1EF1c hi\u1EC7n b\u1EDFi: {undoByName}"
+          }) })
+        ] }) : /* @__PURE__ */ jsx(
+          SafeHTML,
+          {
+            isReply: true,
+            html: displayContent,
+            allowStyledRtf
+          }
+        ),
+        previewUrl && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(LinkPreview, { url: previewUrl, compact: true }) }),
+        hasContactActions && /* @__PURE__ */ jsx(
+          SaveContactButton,
+          {
+            onClick: handleSaveInfo,
+            isLoading: updateMutation.isPending
+          }
+        ),
+        msg.extra_data?.tag === "HUMAN_AGENT" && /* @__PURE__ */ jsx("div", { className: "text-xs italic text-muted-foreground", children: t("chat:message.humanAgentTagNote", {
+          defaultValue: "*Tin nh\u1EAFn \u0111\u01B0\u1EE3c g\u1EEDi v\u1EDBi Human Agent tag"
+        }) }),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msg?.status,
+            agentReads: msg?.agent_reads
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TextContent
+};

package/components/chat-route/chat-box/use-facebook-page-invalid.js

@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPageDetail } from "@zenify-omni/chat-js/api/settings/channel.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { isFacebook } from "../util.js";
+function useFacebookPageInvalid(chatRoom) {
+  const isFacebookChat = isFacebook(chatRoom);
+  const pageId = chatRoom?.source_id;
+  const { data: page } = useQuery({
+    queryKey: [QUERY_KEY.GET_SOCIAL_PAGE_DETAIL, pageId],
+    queryFn: async () => {
+      const resp = await getPageDetail(pageId);
+      return resp?.data ?? null;
+    },
+    enabled: isFacebookChat && !!pageId,
+    staleTime: 60 * 1e3
+  });
+  if (!isFacebookChat || !pageId || page?.is_valid == null) return false;
+  return page.is_valid != 1 && page.is_valid != true;
+}
+export {
+  useFacebookPageInvalid
+};