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

package/components/chat-route/chat-list/chat-item.js

@@ -0,0 +1,749 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import React, { useMemo, useRef, useEffect } from "react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../../custom/avatar.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  Link,
+  Pin,
+  Map,
+  PinOff,
+  User,
+  ShoppingBag,
+  Image as ImageIcon,
+  File as FileIcon,
+  Mic,
+  Video as VideoIcon,
+  Smile,
+  CalendarClock
+} from "lucide-react";
+import useChatStore from "../../../store/chat-store.js";
+import {
+  MessageType,
+  MessageTypeContext,
+  ChatFilterAssignStatus
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import { getUser, checkIsViewAsMode } from "@zenify-omni/chat-js/utils/auth.js";
+import { generateLastMsgTimeText } from "@zenify-omni/chat-js/utils/date.js";
+import { ActionChatItem } from "./action-chat-item.js";
+import {
+  getChatAvatarSrc,
+  getChatAvatarAlt,
+  getChatDisplayName,
+  getPageDisplayName
+} from "../util.js";
+import { ChatIcon } from "../../../constants/chat-icon.js";
+import {
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent
+} from "../../ui/tooltip.js";
+import { CHATTER_TYPES } from "../chat-box/constants.js";
+import ChatterAgentIcon from "../../../assets/icons/chatter_agent.js";
+import ChatterContactIcon from "../../../assets/icons/chatter_contact.js";
+import { notFoundValue } from "@zenify-omni/chat-js/constants/common.js";
+import useTenantConfigStore from "../../../store/tenant-config-store.js";
+import { ChatReadRule } from "../../settings-route/routing/settings-dialog.js";
+import ChatterChatbotIcon from "../../../assets/icons/chatter_chatbot.js";
+import DOMPurify from "dompurify";
+import {
+  replaceZaloSprite,
+  applyZaloEmojiStyles
+} from "../../../utils/replaceZaloSprite.js";
+import { ChatItemTags } from "./chat-item-tags.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { getConversationLabels } from "@zenify-omni/chat-js/api/facebook-labels.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+function ZaloLastMsg({ text }) {
+  const ref = useRef(null);
+  const html = DOMPurify.sanitize(replaceZaloSprite(text));
+  useEffect(() => {
+    applyZaloEmojiStyles(ref.current, 16);
+  }, [html]);
+  return /* @__PURE__ */ jsx("span", { ref, dangerouslySetInnerHTML: { __html: html } });
+}
+const TEMPLATE_MESSAGE_TYPES = [
+  MessageType.GENERIC_TEMPLATE,
+  MessageType.BUTTON_TEMPLATE,
+  MessageType.MEDIA_TEMPLATE,
+  MessageType.PRODUCT_TEMPLATE,
+  MessageType.IMAGE_GRID_TEMPLATE,
+  MessageType.RECEIPT_TEMPLATE,
+  MessageType.TEMPLATE
+];
+const lastMsgTypeHidden = [
+  MessageType.CREATE_REMINDER,
+  MessageType.UPDATE_REMINDER,
+  MessageType.DELETE_REMINDER,
+  MessageType.REMINDER_RECEIVE,
+  MessageType.ACTION_RECEIVE,
+  MessageType.ACTION_JOIN,
+  MessageType.ACTION_OPT_IN,
+  MessageType.ACTION_STARTED,
+  MessageType.ACTION_LEAVE,
+  MessageType.ACTION_END,
+  MessageType.ACTION_REOPEN,
+  MessageType.ZALO_CALL,
+  MessageType.ZALO_ACCEPT_FRIEND,
+  MessageType.ZALO_CREATE_GROUP,
+  MessageType.CHAT_SIGNAL
+];
+const ChatItem = React.memo(
+  ({
+    item,
+    onSelect,
+    isSelected,
+    onPin,
+    isPinned,
+    onMarkUnread,
+    currentChatTab,
+    isSelectMode = false,
+    isChecked = false,
+    onToggleSelect
+  }) => {
+    const { t } = useTranslation();
+    const user = getUser();
+    const sortUnansweredFirst = useTenantConfigStore(
+      (s) => s.chatConfig?.sort_chat ?? false
+    );
+    const { _id: id, last_msg, unread } = item;
+    const unansweredBg = [
+      "695b2bc0fbcf10042ea543ad",
+      "6a38933648331560a41b602d"
+    ].includes(user?.tenant_id) ? "bg-secondary" : "bg-card";
+    const { time: updated_at } = last_msg || {};
+    const formattedLastMsgTime = useMemo(
+      () => generateLastMsgTimeText(updated_at),
+      [updated_at]
+    );
+    const lastChatMessage = useChatStore((state) => {
+      const msgs = state.ticketChatMessages[id];
+      return msgs?.[msgs.length - 1];
+    });
+    const draftMessage = useChatStore((state) => state.draftMessages[id]);
+    const currentChatId = useChatStore((state) => state.currentChatId);
+    const aliasMap = useChatStore((state) => state.aliasMap);
+    const showDraft = draftMessage && id !== currentChatId;
+    const chatReadRule = useTenantConfigStore(
+      (s) => s.chatConfig?.chat_read_rule
+    );
+    const isChatAllowed = useChatStore((state) => state.isChatAllowed);
+    const showUnread = useMemo(() => {
+      if (!unread) return false;
+      if (checkIsViewAsMode()) return true;
+      if (id === currentChatId) {
+        if (chatReadRule && chatReadRule === ChatReadRule.ASSIGNEE_VIEW && item.assigned?._id !== user?._id) {
+          return true;
+        }
+        return !isChatAllowed;
+      }
+      return unread > 0;
+    }, [
+      chatReadRule,
+      currentChatId,
+      id,
+      isChatAllowed,
+      item.assigned?._id,
+      unread,
+      user?._id
+    ]);
+    const previewMsg = () => {
+      const isIncomingMsg = last_msg?.chatter_type && last_msg.chatter_type !== CHATTER_TYPES.AGENT && last_msg.chatter_type !== CHATTER_TYPES.CHATBOT;
+      const maskIfIncoming = (value) => isIncomingMsg ? maskData(value) : value;
+      const hideIcon = item.source === "facebook" && !!last_msg?.chatter_type && !lastMsgTypeHidden.includes(last_msg?.type);
+      if (last_msg?.type === MessageType.CONTACT_CARD) {
+        return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+          !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+          " ",
+          t("chat:message.attachedContactCard", {
+            defaultValue: "Danh thi\u1EBFp \u0111\xEDnh\n            k\xE8m"
+          })
+        ] });
+      }
+      if (last_msg?.type === "ads_content") {
+        return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: [
+          t("chat:label.adPrefix", { defaultValue: "Qu\u1EA3ng c\xE1o:" }),
+          " ",
+          last_msg?.ad_name || "Facebook Ads"
+        ] });
+      }
+      if (item.source === "facebook" || item.source === "instagram") {
+        if (last_msg?.type === MessageType.UNSUPPORTED) {
+          return /* @__PURE__ */ jsx("span", { className: "ml-1 line-clamp-1 text-[13px] italic text-muted-foreground", children: t("chat:message.unsupportedMessage", {
+            defaultValue: "Tin nh\u1EAFn ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3"
+          }) });
+        }
+        if (last_msg?.type === MessageType.UTILITY_MESSAGES) {
+          const title = last_msg?.title || last_msg?.text || "";
+          return title ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: title }) : /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: t("chat:label.utilityMessage", {
+            defaultValue: "Tin nh\u1EAFn ti\u1EC7n \xEDch"
+          }) });
+        }
+        if (TEMPLATE_MESSAGE_TYPES.includes(last_msg?.type)) {
+          return /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: t("chat:status.sentOneMessage") });
+        }
+        if (last_msg?.type === "reel") {
+          return last_msg?.description ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: last_msg.description }) : /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedReel", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB\n              Reel"
+            })
+          ] });
+        }
+        if (last_msg?.type === "share_post") {
+          return last_msg?.description ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: last_msg.description }) : /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedPost", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB\n              b\xE0i vi\u1EBFt"
+            })
+          ] });
+        }
+        if (last_msg?.type === "share_group") {
+          return last_msg?.description ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: last_msg.description }) : /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedGroup", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB\n              nh\xF3m"
+            })
+          ] });
+        }
+        if (last_msg?.type === "share_page") {
+          return last_msg?.description ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: last_msg.description }) : /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedPage", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB\n              trang"
+            })
+          ] });
+        }
+        if (last_msg?.type === "share_event") {
+          return last_msg?.description ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: last_msg.description }) : /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedEvent", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB s\u1EF1\n              ki\u1EC7n"
+            })
+          ] });
+        }
+        if (last_msg?.type === "share_review") {
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedReview", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB\n              \u0111\xE1nh gi\xE1"
+            })
+          ] });
+        }
+        if (last_msg?.type === "forward") {
+          const fwdText = last_msg?.text || "";
+          return fwdText ? /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: fwdText }) : /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: t("chat:status.forwardedMessage", {
+            defaultValue: "Tin nh\u1EAFn \u0111\xE3 chuy\u1EC3n ti\u1EBFp"
+          }) });
+        }
+        if (last_msg?.type === "chat_form") {
+          return /* @__PURE__ */ jsx("div", { className: "ml-1 line-clamp-1 text-[13px] text-muted-foreground", children: t("chat:label.chatForm", { defaultValue: "Bi\u1EC3u m\u1EABu chat" }) });
+        }
+        if (last_msg?.type === "appointment_booking") {
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(CalendarClock, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.bookedAppointment", {
+              defaultValue: "\u0110\xE3\n              \u0111\u1EB7t l\u1ECBch h\u1EB9n"
+            })
+          ] });
+        }
+      }
+      let text = "";
+      const agentName = t("common:label.agent", {
+        defaultValue: "Chuy\xEAn vi\xEAn"
+      });
+      switch (last_msg?.type) {
+        case MessageType.ACTION_RECEIVE:
+          text = t("common:message.conversationAcceptedBy", {
+            name: agentName,
+            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: agentName,
+            defaultValue: "{name} \u0111\xE3 tham gia cu\u1ED9c h\u1ED9i tho\u1EA1i."
+          });
+          break;
+        case MessageType.ACTION_OPT_IN:
+          text = t("common:message.conversationActionBy", {
+            defaultValue: "{name} \u0111\xE3 {action}",
+            name: maskData(
+              last_msg?.chatter_name || i18n.t("common:label.customer", {
+                defaultValue: "Kh\xE1ch h\xE0ng"
+              })
+            ),
+            action: MessageTypeContext[MessageType.ACTION_OPT_IN]
+          });
+          break;
+        case MessageType.SHARE_POST:
+          text = t("chat:message.sharedPost", {
+            defaultValue: "\u0110\xE3 chia s\u1EBB b\xE0i vi\u1EBFt"
+          });
+          break;
+        case MessageType.ACTION_STARTED: {
+          const customerName = maskData(
+            last_msg?.chatter_name || t("common:label.customer", {
+              defaultValue: "Kh\xE1ch h\xE0ng"
+            })
+          );
+          text = t("common:message.conversationStartedBy", {
+            name: customerName,
+            defaultValue: "{name} \u0111\xE3 b\u1EAFt \u0111\u1EA7u cu\u1ED9c h\u1ED9i tho\u1EA1i."
+          });
+          break;
+        }
+        case MessageType.ACTION_LEAVE: {
+          const leaverName = last_msg?.chatter_id && String(last_msg.chatter_id) === String(user._id) ? t("chat:label.you", { defaultValue: "B\u1EA1n" }) : last_msg?.chatter_name || agentName;
+          const removerName = last_msg?.removed_by_id && String(last_msg.removed_by_id) === String(user._id) ? t("chat:label.you", { defaultValue: "B\u1EA1n" }) : last_msg?.removed_by_name;
+          text = last_msg?.removed_by_name ? t("common:message.conversationMemberRemovedBy", {
+            name: leaverName,
+            actor: removerName,
+            defaultValue: "{actor} \u0111\xE3 x\xF3a {name} ra kh\u1ECFi \u0111o\u1EA1n chat."
+          }) : t("common:message.conversationLeftBy", {
+            name: leaverName,
+            defaultValue: "{name} \u0111\xE3 r\u1EDDi cu\u1ED9c h\u1ED9i tho\u1EA1i."
+          });
+          break;
+        }
+        case MessageType.ACTION_END: {
+          const closedByName = last_msg?.chatter_id ? agentName : last_msg?.chatter_name || agentName;
+          text = t("common:message.conversationClosedBy", {
+            name: closedByName,
+            defaultValue: "{name} \u0111\xE3 \u0111\xF3ng h\u1ED9i tho\u1EA1i n\xE0y."
+          });
+          break;
+        }
+        case MessageType.ACTION_REOPEN:
+          text = t("common:message.conversationReopenedBy", {
+            name: agentName,
+            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.IMAGE: {
+          if (item.source === "facebook") {
+            const imgUrl = last_msg?.src || last_msg?.url || "";
+            if (/\.gif/i.test(imgUrl)) {
+              return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+                !hideIcon && /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+                " ",
+                t("chat:message.sentGifImage", {
+                  defaultValue: "\u0110\xE3\n                  g\u1EEDi \u1EA3nh GIF"
+                })
+              ] });
+            }
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentAnImage", {
+              defaultValue: "\u0110\xE3 g\u1EEDi\n              m\u1ED9t \u1EA3nh"
+            })
+          ] });
+        }
+        case MessageType.POLL_CREATION: {
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.createdPoll", {
+              defaultValue: "\u0110\xE3 t\u1EA1o th\u0103m\n              d\xF2 \xFD ki\u1EBFn"
+            })
+          ] });
+        }
+        case MessageType.IMAGES: {
+          if (last_msg?.src) {
+            const images = last_msg?.src?.split("||") || [];
+            if (images.length === 1) {
+              if (item.source === "facebook" && /\.gif/i.test(images[0])) {
+                return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+                  !hideIcon && /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+                  " ",
+                  t("chat:message.sentAGifImage", {
+                    defaultValue: "\u0110\xE3\n                    g\u1EEDi m\u1ED9t \u1EA3nh GIF"
+                  })
+                ] });
+              }
+              return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+                !hideIcon && /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+                " ",
+                t("chat:message.sentAnImage", {
+                  defaultValue: "\u0110\xE3\n                  g\u1EEDi m\u1ED9t \u1EA3nh"
+                })
+              ] });
+            }
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentMultipleImages", {
+              defaultValue: "\u0110\xE3 g\u1EEDi\n              nhi\u1EC1u \u1EA3nh"
+            })
+          ] });
+        }
+        case MessageType.FILE: {
+          if (item.source === "facebook") {
+            return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+              !hideIcon && /* @__PURE__ */ jsx(FileIcon, { size: 12, className: "inline" }),
+              " ",
+              t("chat:message.sentAFile", {
+                defaultValue: "\u0110\xE3 g\u1EEDi\n                m\u1ED9t t\u1EC7p"
+              })
+            ] });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(FileIcon, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentAFile", { defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t t\u1EC7p" })
+          ] });
+        }
+        case MessageType.AUDIO:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Mic, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentAudioClip", {
+              defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t\n              \u0111o\u1EA1n \xE2m thanh"
+            })
+          ] });
+        case MessageType.VIDEO:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(VideoIcon, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentAVideo", {
+              defaultValue: "\u0110\xE3 g\u1EEDi\n              m\u1ED9t video"
+            })
+          ] });
+        case MessageType.STICKER:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Smile, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentASticker", {
+              defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t\n              nh\xE3n d\xE1n"
+            })
+          ] });
+        case MessageType.REEL:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:label.attachedFile", { defaultValue: "T\u1EC7p \u0111\xEDnh k\xE8m" })
+          ] });
+        case MessageType.FALLBACK:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            !hideIcon && /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+            " ",
+            t("chat:label.attachedFile", { defaultValue: "T\u1EC7p \u0111\xEDnh k\xE8m" })
+          ] });
+        case MessageType.PRODUCT:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 truncate text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ShoppingBag, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedProduct", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB s\u1EA3n ph\u1EA9m"
+            })
+          ] });
+        case MessageType.LOCATION:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Map, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sentALocation", {
+              defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t v\u1ECB tr\xED"
+            })
+          ] });
+        case MessageType.PIN:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Pin, { size: 12, className: "inline" }),
+            " ",
+            t("chat:toast.pinMessageSuccess", {
+              defaultValue: "\u0110\xE3 ghim m\u1ED9t tin nh\u1EAFn"
+            })
+          ] });
+        case MessageType.UN_PIN:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(PinOff, { size: 12, className: "inline" }),
+            " ",
+            t("chat:toast.unpinMessageSuccess", {
+              defaultValue: "\u0110\xE3 b\u1ECF ghim m\u1ED9t tin nh\u1EAFn"
+            })
+          ] });
+        case MessageType.COUPON:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ShoppingBag, { size: 12, className: "inline" }),
+            " ",
+            t("chat:message.sharedVoucher", {
+              defaultValue: "\u0110\xE3 chia s\u1EBB voucher"
+            })
+          ] });
+        case MessageType.ORDER:
+          return /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ShoppingBag, { size: 12, className: "inline" }),
+            " ",
+            t("chat:label.orderPrefix", { defaultValue: "\u0110\u01A1n h\xE0ng:" }),
+            " ",
+            maskIfIncoming(last_msg.text || "")
+          ] });
+        default:
+          text = typeof last_msg?.text == "string" ? maskIfIncoming(last_msg?.text) : "";
+      }
+      if (!text) {
+        const lastStoreMsg = lastChatMessage;
+        if (Array.isArray(lastStoreMsg?.extra_data?.products))
+          return /* @__PURE__ */ jsx("span", { children: t("chat:label.attachedProduct", {
+            defaultValue: "S\u1EA3n ph\u1EA9m \u0111\xEDnh k\xE8m"
+          }) });
+        return /* @__PURE__ */ jsx("span", { className: "italic", children: t("chat:message.unsupportedMessage", {
+          defaultValue: "Tin nh\u1EAFn ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3"
+        }) });
+      }
+      return /* @__PURE__ */ jsx(ZaloLastMsg, { text });
+    };
+    const isChatbot = last_msg?.chatter_type === CHATTER_TYPES.CHATBOT;
+    const isAgentMessage = last_msg?.chatter_type === CHATTER_TYPES.AGENT;
+    const isCustomerMessage = !isChatbot && !isAgentMessage;
+    const { data: liveConvLabelsData } = useQuery({
+      queryKey: [
+        QUERY_KEY.GET_CONVERSATION_FACEBOOK_LABELS,
+        item.source_id,
+        item.source_room_id
+      ],
+      queryFn: () => getConversationLabels({
+        page_id: item.source_id,
+        psid: item.source_room_id
+      }),
+      enabled: isSelected && item.source === "facebook" && !!item.source_id && !!item.source_room_id
+    });
+    const mergedTags = useMemo(() => {
+      const baseTags = item.tags ?? [];
+      const personalTags = item.personal_tags ?? [];
+      if (item.source !== "facebook") return [...baseTags, ...personalTags];
+      let facebookLabels = item.facebook_labels ?? [];
+      if (isSelected && liveConvLabelsData !== void 0) {
+        facebookLabels = liveConvLabelsData?.data || [];
+      }
+      if (facebookLabels.length === 0) return [...baseTags, ...personalTags];
+      const existingIds = new Set(baseTags.map((t2) => String(t2._id)));
+      const additionalTags = facebookLabels.filter((label) => !existingIds.has(String(label.id))).map((label) => ({
+        _id: label.id,
+        name: label.name,
+        color: "hsl(var(--primary))",
+        isFacebookLabel: true
+      }));
+      return [...baseTags, ...additionalTags, ...personalTags];
+    }, [
+      item.tags,
+      item.personal_tags,
+      item.facebook_labels,
+      item.source,
+      isSelected,
+      liveConvLabelsData
+    ]);
+    const getChatterTypePreview = () => {
+      if (lastMsgTypeHidden.includes(last_msg?.type) || !last_msg?.chatter_type) {
+        return;
+      }
+      return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+          isAgentMessage && /* @__PURE__ */ jsx(ChatterAgentIcon, { className: "mr-0.5" }),
+          isChatbot && /* @__PURE__ */ jsx(ChatterChatbotIcon, { className: "mr-0.5" }),
+          isCustomerMessage && /* @__PURE__ */ jsx(ChatterContactIcon, { className: "mr-0.5" }),
+          ":"
+        ] }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", align: "center", sideOffset: 6, children: /* @__PURE__ */ jsxs("p", { children: [
+          isAgentMessage && t("chat:label.agentName", {
+            defaultValue: "Chuy\xEAn vi\xEAn: {name}",
+            name: last_msg?.chatter_name || notFoundValue
+          }),
+          isChatbot && "Chatbot",
+          isCustomerMessage && t("chat:label.customerName", {
+            defaultValue: "Kh\xE1ch h\xE0ng: {name}",
+            name: last_msg?.chatter_name || notFoundValue
+          })
+        ] }) })
+      ] }) });
+    };
+    const hasTags = mergedTags.length > 0 || item.assigned?._id;
+    const isCheckedItem = isSelectMode && isChecked;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative flex w-full cursor-pointer items-center rounded-none border-b border-b-border-subtle px-2 py-1 text-left text-sm hover:bg-accent",
+          hasTags ? "min-h-[110px]" : "min-h-[90px]",
+          isSelected ? "bg-secondary" : item.is_unanswered && sortUnansweredFirst && currentChatTab !== ChatFilterAssignStatus.Closed && unansweredBg,
+          isCheckedItem && "border-l-2 border-l-primary bg-secondary hover:bg-secondary"
+        ),
+        onClick: () => isSelectMode ? onToggleSelect?.(id) : onSelect(id),
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-0 w-full px-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2 px-2 py-2", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-1 items-center gap-2 truncate text-xs capitalize text-muted-foreground",
+                  (isSelected || isCheckedItem) && "text-primary"
+                ),
+                children: [
+                  isSelectMode && /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      className: cn(
+                        "h-[18px] w-[18px] flex-shrink-0 border-muted-foreground",
+                        isChecked && "border-primary"
+                      ),
+                      checked: isChecked,
+                      onCheckedChange: () => onToggleSelect?.(id),
+                      onClick: (e) => e.stopPropagation(),
+                      "aria-label": t("chat:action.selectConversation", {
+                        defaultValue: "Ch\u1ECDn h\u1ED9i tho\u1EA1i"
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: ChatIcon[item.source] }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: getPageDisplayName(item, aliasMap) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+              ActionChatItem,
+              {
+                data: item,
+                onPin,
+                isPinned,
+                isChecked: isCheckedItem,
+                onMarkUnread,
+                showMarkUnread: !unread
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-2", children: [
+            /* @__PURE__ */ jsxs(Avatar, { children: [
+              /* @__PURE__ */ jsx(
+                AvatarImage,
+                {
+                  src: getChatAvatarSrc(item),
+                  alt: getChatAvatarAlt(item)
+                }
+              ),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted", children: /* @__PURE__ */ jsx(User, { size: 18 }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex w-[calc(100%-40px-0.5rem)] flex-col gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "ml-1 truncate text-[13px] font-medium", children: getChatDisplayName(item) }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-right text-xs font-normal text-muted-foreground", children: formattedLastMsgTime })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center", children: showDraft ? /* @__PURE__ */ jsxs("div", { className: "ml-1 line-clamp-1 w-full text-[13px]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-destructive", children: t("chat:label.draftBracket", {
+                    defaultValue: "[Nh\xE1p]"
+                  }) }),
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: draftMessage })
+                ] }) : item.source !== "facebook" && last_msg?.type !== "chat_form" && [
+                  MessageType.FILE,
+                  MessageType.AUDIO,
+                  MessageType.VIDEO,
+                  MessageType.IMAGE,
+                  MessageType.STICKER,
+                  MessageType.LINK
+                ].includes(last_msg?.type) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  getChatterTypePreview(),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "ml-1 line-clamp-2 text-[13px] font-bold text-muted-foreground",
+                        showUnread && "font-medium text-foreground"
+                      ),
+                      children: last_msg?.type === MessageType.IMAGE ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(ImageIcon, { size: 12, className: "inline" }),
+                        " ",
+                        t("chat:message.sentAnImage", {
+                          defaultValue: "\u0110\xE3 g\u1EEDi\n                            m\u1ED9t \u1EA3nh"
+                        })
+                      ] }) : last_msg?.type === MessageType.VIDEO ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(VideoIcon, { size: 12, className: "inline" }),
+                        " ",
+                        t("chat:message.sentAVideo", {
+                          defaultValue: "\u0110\xE3 g\u1EEDi\n                            m\u1ED9t video"
+                        })
+                      ] }) : last_msg?.type === MessageType.AUDIO ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(Mic, { size: 12, className: "inline" }),
+                        " ",
+                        t("chat:message.sentAnAudio", {
+                          defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t \u0111o\u1EA1n\n                            \xE2m thanh"
+                        })
+                      ] }) : last_msg?.type === MessageType.FILE ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate", children: [
+                        /* @__PURE__ */ jsx(FileIcon, { size: 12, className: "shrink-0" }),
+                        " ",
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: t("chat:message.sentAFile", {
+                          defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t t\u1EC7p"
+                        }) })
+                      ] }) : last_msg?.type === MessageType.STICKER ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(Smile, { size: 12, className: "inline" }),
+                        " ",
+                        t("chat:message.sentASticker", {
+                          defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t\n                            nh\xE3n d\xE1n"
+                        })
+                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(Link, { size: 12, className: "inline" }),
+                        " ",
+                        t("chat:label.attachedFile", {
+                          defaultValue: "T\u1EC7p \u0111\xEDnh k\xE8m"
+                        })
+                      ] })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  getChatterTypePreview(),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "ml-1 line-clamp-1 w-full text-[13px] text-muted-foreground",
+                        showUnread && "font-medium text-foreground",
+                        item.is_unanswered && sortUnansweredFirst && "font-medium text-foreground"
+                      ),
+                      children: previewMsg()
+                    }
+                  )
+                ] }) }),
+                showUnread ? /* @__PURE__ */ jsx("span", { className: "flex min-w-[18px] shrink-0 items-center justify-center rounded-full bg-destructive px-1 py-0.5 text-[10px] font-bold leading-none text-white", children: unread > 99 ? "99+" : unread }) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
+                ChatItemTags,
+                {
+                  tags: mergedTags,
+                  _id: item.assigned?._id,
+                  assignName: item.assigned?.name
+                }
+              ) })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+ChatItem.displayName = "ChatItem";
+var chat_item_default = ChatItem;
+export {
+  chat_item_default as default
+};