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

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

@@ -0,0 +1,465 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TicketSourceIconUrl } from "../../../assets/public-urls.js";
+import { Button } from "../../custom/button.js";
+import {
+  User,
+  Search,
+  Pencil,
+  ChevronLeft,
+  Loader2,
+  QrCode
+} from "lucide-react";
+import { toast } from "sonner";
+import ChatHeaderActionsInline from "./chat-header-actions-inline.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../../custom/avatar.js";
+import usePreviewImageStore from "../../../store/preview-image-store.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { useShallow } from "zustand/shallow";
+import { SourceDetailTicketContext, SourceDetailTicket } from "@zenify-omni/chat-js/constants/chat-source.js";
+import { BrandColor } from "../../../constants/brand-colors.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  getChatAvatarAlt,
+  getChatAvatarSrc,
+  isZaloGeneralChannel,
+  isZaloGroup,
+  isZaloPersonal,
+  isTiktok
+} from "../util.js";
+import { getUser, isRoleAgent, isRoleSale } from "@zenify-omni/chat-js/utils/auth.js";
+import ZaloLoginQr from "../../zalo-login-qr.js";
+import { useQueryClient } from "@tanstack/react-query";
+import { getFullAvatar } from "@zenify-omni/chat-js/api/chat.js";
+import { isJxlUrl, decodeJxlToBlobUrl } from "../../custom/jxl-decode.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useEffect, useRef, useState } from "react";
+import SearchMessagesModal from "../chat-list/search-messages/index.js";
+import EditCustomerAliasDialog from "./edit-customer-alias-dialog.js";
+import { useTranslation } from "react-i18next";
+const FB_GLOBAL_ID_TOAST = "fb-global-id-fetch";
+const FB_GLOBAL_ID_TIMEOUT_MS = 8e3;
+const SOURCE_BADGE_CONFIGS = {
+  [SourceDetailTicket.FACEBOOK]: { icon: "facebook.png", brand: "facebook" },
+  [SourceDetailTicket.ZALO]: { icon: "zalo.png", brand: "zalo" },
+  [SourceDetailTicket.PZALO]: { icon: "zalo.png", brand: "zalo" },
+  [SourceDetailTicket.TIKTOK]: { icon: "tiktok.png", brand: "tiktok" },
+  [SourceDetailTicket.TIKTOK_SHOP]: { icon: "tiktok_shop.png", brand: "tiktok" },
+  [SourceDetailTicket.INSTAGRAM]: { icon: "instagram.png", brand: "instagram" },
+  [SourceDetailTicket.SHOPEE]: { icon: "shopee.svg", brand: "shopee" },
+  [SourceDetailTicket.WHATSAPP]: { icon: "whatsapp.svg", brand: "whatsapp" },
+  [SourceDetailTicket.WEB]: { icon: "livechat.png", brand: "livechat" },
+  [SourceDetailTicket.CHAT]: { icon: "livechat.png", brand: "livechat" },
+  // Không phải nền tảng -> theo theme
+  [SourceDetailTicket.EMAIL]: { icon: "email.png" },
+  [SourceDetailTicket.SMS]: { icon: "sms.png" },
+  [SourceDetailTicket.CALL_IN]: { icon: "telephone-call-in.png" },
+  [SourceDetailTicket.CALL_OUT]: { icon: "telephone-call-out.png" },
+  [SourceDetailTicket.CALL_INTERNAL]: { icon: "telephone-call-out.png" }
+};
+function SourceBadge({ chatRoom, isFetchingFbGlobalId, onFetchFbGlobalId }) {
+  const { t } = useTranslation();
+  const source = chatRoom?.source;
+  const isFacebook = source === SourceDetailTicket.FACEBOOK;
+  const isFacebookAds = isFacebook && chatRoom?.extra_data?.ad_data?.ad_id;
+  const config = SOURCE_BADGE_CONFIGS[source] || { icon: "hand.png" };
+  const brand = config.brand ? BrandColor[config.brand] : null;
+  const label = isFacebookAds ? "Facebook Ads" : SourceDetailTicketContext[source];
+  const icon = TicketSourceIconUrl[isFacebookAds ? "facebook.png" : config.icon];
+  const handleClick = (event) => {
+    event.stopPropagation();
+    if (!isFacebook) return;
+    onFetchFbGlobalId?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: handleClick,
+      title: isFacebook ? t("chat:action.getCustomerFacebookId", {
+        defaultValue: "L\u1EA5y Facebook ID kh\xE1ch h\xE0ng"
+      }) : label,
+      style: brand ? { backgroundColor: brand.bg } : void 0,
+      className: cn(
+        "absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full ring-2 ring-white lg:size-5",
+        !brand && "bg-muted",
+        isFacebook && "cursor-pointer"
+      ),
+      children: isFacebook && isFetchingFbGlobalId ? /* @__PURE__ */ jsx(
+        Loader2,
+        {
+          style: brand ? { color: brand.fg } : void 0,
+          className: cn(
+            "size-3 animate-spin lg:size-3.5",
+            !brand && "text-muted-foreground"
+          )
+        }
+      ) : /* @__PURE__ */ jsx("img", { src: icon, alt: label, className: "size-3 lg:size-3.5" })
+    }
+  );
+}
+function ChatHeader({
+  isLoading,
+  chatRoom,
+  showHeaderAction = true,
+  isZaloConnected,
+  chatItem,
+  contactDetail,
+  setShowHistory = () => {
+  },
+  topPriorityTicket,
+  onMobileBack
+}) {
+  const { t } = useTranslation();
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isAliasDialogOpen, setIsAliasDialogOpen] = useState(false);
+  const [isFetchingFbGlobalId, setIsFetchingFbGlobalId] = useState(false);
+  const fbGlobalIdTimeoutRef = useRef(null);
+  const contactId = chatRoom?.customer_ids?.[0];
+  const zaloRelation = chatRoom?.extra_data?.zalo_relation_type;
+  const canEditCustomerAlias = isZaloPersonal(chatRoom) && !isZaloGroup(chatRoom);
+  const currentUser = getUser();
+  const isZaloGeneral = isZaloGeneralChannel(chatRoom);
+  const zaloConnectionLabel = isZaloConnected ? t("common:status.connecting", { defaultValue: "\u0110ang k\u1EBFt n\u1ED1i" }) : t("chat:status.disconnected", { defaultValue: "\u0110\xE3 ng\u1EAFt k\u1EBFt n\u1ED1i" });
+  const canScanZaloQr = (() => {
+    if (isZaloGeneral) return !isRoleSale() && !isRoleAgent();
+    return !!currentUser?.zalo_id;
+  })();
+  const [setModalImages, setPreviewModal] = usePreviewImageStore(
+    useShallow((state) => [state.setModalImages, state.setPreviewModal])
+  );
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!contactId) return;
+    const clearFbGlobalIdTimeout = () => {
+      if (!fbGlobalIdTimeoutRef.current) return;
+      clearTimeout(fbGlobalIdTimeoutRef.current);
+      fbGlobalIdTimeoutRef.current = null;
+    };
+    const handler = (e) => {
+      if (!e.data?.__zenify_fb_global_id_result) return;
+      if (e.data.contactId !== contactId) return;
+      clearFbGlobalIdTimeout();
+      setIsFetchingFbGlobalId(false);
+      if (e.data.ok) {
+        toast.success(
+          t("chat:message.facebookIdFetched", {
+            defaultValue: "\u0110\xE3 l\u1EA5y Facebook ID v\xE0 c\u1EADp nh\u1EADt v\xE0o li\xEAn h\u1EC7"
+          }),
+          { id: FB_GLOBAL_ID_TOAST }
+        );
+      } else {
+        toast.error(
+          e.data.error || t("chat:message.facebookIdFetchFailed", {
+            defaultValue: "Kh\xF4ng l\u1EA5y \u0111\u01B0\u1EE3c Facebook ID"
+          }),
+          { id: FB_GLOBAL_ID_TOAST }
+        );
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+      clearFbGlobalIdTimeout();
+    };
+  }, [contactId, t]);
+  const handleGetFbGlobalId = () => {
+    const fbGlobalUserId = chatRoom?.extra_data?.fb_global_user_id;
+    if (fbGlobalUserId) {
+      window.open(
+        `https://facebook.com/${fbGlobalUserId}`,
+        "_blank",
+        "noopener,noreferrer"
+      );
+      return;
+    }
+    const conversationId = chatRoom?.extra_data?.fb_conversation_id;
+    if (!contactId || !chatRoom?.source_id || !conversationId) {
+      console.warn("handleGetFbGlobalId: missing required field(s)", {
+        contactId,
+        pageId: chatRoom?.source_id,
+        conversationId
+      });
+      toast.error(
+        t("chat:toast.facebookDataMissing", {
+          defaultValue: "H\u1ED9i tho\u1EA1i thi\u1EBFu d\u1EEF li\u1EC7u Facebook c\u1EA7n thi\u1EBFt, kh\xF4ng th\u1EC3 l\u1EA5y Facebook ID"
+        }),
+        { id: FB_GLOBAL_ID_TOAST }
+      );
+      return;
+    }
+    setIsFetchingFbGlobalId(true);
+    toast.loading(
+      t("chat:toast.fetchingFacebookId", {
+        defaultValue: "\u0110ang l\u1EA5y Facebook ID kh\xE1ch h\xE0ng..."
+      }),
+      { id: FB_GLOBAL_ID_TOAST }
+    );
+    window.postMessage(
+      {
+        __zenify_get_fb_global_id: true,
+        pageId: chatRoom.source_id,
+        conversationId,
+        contactId
+      },
+      "*"
+    );
+    if (fbGlobalIdTimeoutRef.current) clearTimeout(fbGlobalIdTimeoutRef.current);
+    fbGlobalIdTimeoutRef.current = setTimeout(() => {
+      fbGlobalIdTimeoutRef.current = null;
+      setIsFetchingFbGlobalId(false);
+      toast.error(
+        t("chat:toast.facebookExtensionRequired", {
+          defaultValue: "Kh\xF4ng nh\u1EADn \u0111\u01B0\u1EE3c ph\u1EA3n h\u1ED3i t\u1EEB extension. Vui l\xF2ng ki\u1EC3m tra \u0111\xE3 c\xE0i v\xE0 b\u1EADt extension ch\u01B0a"
+        }),
+        { id: FB_GLOBAL_ID_TOAST }
+      );
+    }, FB_GLOBAL_ID_TIMEOUT_MS);
+  };
+  const handleAvatarClick = async () => {
+    const avatarSrc = getChatAvatarSrc(chatRoom);
+    if (!avatarSrc) return;
+    const altText = getChatAvatarAlt(chatRoom) || "avatar";
+    const sourceId = chatRoom?.source_id;
+    const sourceRoomId = chatRoom?.source_room_id;
+    if (!isZaloConnected || !isZaloPersonal(chatRoom) || isZaloGroup(chatRoom)) {
+      setModalImages([{ url: avatarSrc, name: altText }]);
+      setPreviewModal({ isOpen: true, currentIndex: 0 });
+      return;
+    }
+    usePreviewImageStore.getState().modalImages.forEach((img) => {
+      if (img?.url?.startsWith("blob:")) {
+        URL.revokeObjectURL(img.url);
+      }
+    });
+    setModalImages([{ url: null, name: altText, loading: true }]);
+    setPreviewModal({ isOpen: true, currentIndex: 0 });
+    try {
+      const data = await queryClient.fetchQuery({
+        queryKey: [QUERY_KEY.GET_FULL_AVATAR, sourceId, sourceRoomId],
+        queryFn: () => getFullAvatar(sourceId, sourceRoomId).then((res) => res.data),
+        staleTime: 5 * 60 * 1e3
+      });
+      const { bk_full_avatar: bkFullAvatarUrl, full_avatar: fullAvatarUrl } = data || {};
+      if (!bkFullAvatarUrl && !fullAvatarUrl) throw new Error("empty");
+      const displayUrl = !isJxlUrl(bkFullAvatarUrl) && bkFullAvatarUrl || !isJxlUrl(fullAvatarUrl) && fullAvatarUrl || bkFullAvatarUrl || fullAvatarUrl;
+      if (isJxlUrl(displayUrl)) {
+        decodeJxlToBlobUrl(displayUrl).then((blobUrl) => {
+          usePreviewImageStore.getState().setModalImages([{ url: blobUrl, name: altText, loading: false }]);
+        }).catch(() => {
+          usePreviewImageStore.getState().setModalImages([
+            { url: avatarSrc, name: altText, loading: false }
+          ]);
+        });
+      } else {
+        usePreviewImageStore.getState().setModalImages([{ url: displayUrl, name: altText, loading: false }]);
+      }
+    } catch {
+      usePreviewImageStore.getState().setModalImages([{ url: avatarSrc, name: altText, loading: false }]);
+    }
+  };
+  const displayHeaderTitle = () => {
+    if (chatRoom?.source !== SourceDetailTicket.PZALO && chatRoom?.source !== SourceDetailTicket.ZALO)
+      return `${maskData(chatRoom?.title || chatRoom?.name || "")}`;
+    return `${maskData(chatRoom?.name || chatRoom?.title || "")}`;
+  };
+  const getTiktokUsername = () => {
+    if (!isTiktok(chatRoom)) return null;
+    if (chatRoom?.name) {
+      return chatRoom.name.replace(/^@/, "");
+    }
+    return null;
+  };
+  const handleTitleClick = () => {
+    const username = getTiktokUsername();
+    if (username) {
+      window.open(`https://www.tiktok.com/@${username}`, "_blank");
+    }
+  };
+  const isTiktokRoom = isTiktok(chatRoom);
+  const tiktokUsername = getTiktokUsername();
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[90px] flex-wrap items-center justify-between gap-1 border-b border-b-border bg-card px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 cursor-pointer gap-2 md:gap-3", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-9 shrink-0 rounded-full lg:size-11" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded lg:w-44" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20 rounded-full lg:w-24" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 md:gap-2 lg:gap-4", children: [
+      onMobileBack && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onMobileBack();
+          },
+          className: "flex items-center justify-center rounded-full p-1 hover:bg-muted xl:hidden",
+          title: t("chat:title.chatList", {
+            defaultValue: "Danh s\xE1ch chat"
+          }),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20, className: "stroke-muted-foreground" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsxs(
+          Avatar,
+          {
+            className: "size-9 cursor-pointer lg:size-11",
+            onClick: handleAvatarClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                AvatarImage,
+                {
+                  src: getChatAvatarSrc(chatRoom),
+                  alt: getChatAvatarAlt(chatRoom)
+                }
+              ),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(User, { size: 32 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SourceBadge,
+          {
+            chatRoom,
+            isFetchingFbGlobalId,
+            onFetchFbGlobalId: handleGetFbGlobalId
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-row items-center justify-start gap-2", children: [
+          isTiktokRoom && tiktokUsername ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: handleTitleClick,
+              title: displayHeaderTitle(),
+              className: "col-start-2 row-span-2 inline-block max-w-[120px] truncate align-middle text-sm font-medium text-primary hover:underline md:max-w-[180px] lg:max-w-[280px] lg:text-base",
+              children: displayHeaderTitle()
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: displayHeaderTitle(),
+              className: "col-start-2 row-span-2 inline-block max-w-[120px] truncate align-middle text-sm font-medium md:max-w-[180px] lg:max-w-[280px] lg:text-base",
+              children: displayHeaderTitle()
+            }
+          ),
+          canEditCustomerAlias && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsAliasDialogOpen(true),
+              title: t("chat:action.setAlias", {
+                defaultValue: "\u0110\u1EB7t bi\u1EC7t danh"
+              }),
+              className: "text-primary transition-colors hover:text-primary/80",
+              children: /* @__PURE__ */ jsx(Pencil, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+          isZaloPersonal(chatRoom) && !isZaloGroup(chatRoom) && /* @__PURE__ */ jsx("span", { className: cn("mt-1 flex text-xs lg:text-sm"), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mr-1 rounded-md border px-2 py-0.5 text-xs font-medium",
+                zaloRelation != "friend" ? "border-muted-foreground/50 bg-secondary text-foreground" : "border-success bg-[--label-green] text-success"
+              ),
+              children: zaloRelation == "friend" ? t("chat:tab.friends", { defaultValue: "B\u1EA1n b\xE8" }) : t("chat:label.stranger", {
+                defaultValue: "Ng\u01B0\u1EDDi l\u1EA1"
+              })
+            }
+          ) }),
+          isZaloPersonal(chatRoom) && /* @__PURE__ */ jsxs("span", { className: "mr-1 mt-1 flex items-center gap-1 text-xs lg:text-sm", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
+                  isZaloConnected ? "border-success bg-[--label-green] text-success" : "border-destructive bg-card text-destructive"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "h-1.5 w-1.5 rounded-full",
+                        isZaloConnected ? "bg-success" : "bg-destructive"
+                      )
+                    }
+                  ),
+                  zaloConnectionLabel
+                ]
+              }
+            ),
+            !isZaloConnected && canScanZaloQr && /* @__PURE__ */ jsx(
+              ZaloLoginQr,
+              {
+                id: isZaloGeneral ? currentUser?.tenant_id : currentUser?._id,
+                type: isZaloGeneral ? "general" : "personal",
+                trigger: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: t("common:action.getZaloLoginQr", {
+                      defaultValue: "L\u1EA5y m\xE3 QR \u0111\u0103ng nh\u1EADp Zalo"
+                    }),
+                    className: "flex size-6 items-center justify-center rounded-md bg-secondary text-primary transition-colors hover:bg-secondary/70 lg:size-7",
+                    children: /* @__PURE__ */ jsx(QrCode, { size: 14, strokeWidth: 2.5 })
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-md" }, i)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      showHeaderAction && chatItem && /* @__PURE__ */ jsx(
+        ChatHeaderActionsInline,
+        {
+          chatItem,
+          customer: contactDetail,
+          setShowHistory,
+          topPriorityTicket
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-muted" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          className: "px-0 hover:bg-transparent max-sm:hidden",
+          onClick: () => setIsSearchOpen(true),
+          title: t("chat:title.searchMessages", {
+            defaultValue: "T\xECm ki\u1EBFm tin nh\u1EAFn"
+          }),
+          children: /* @__PURE__ */ jsx(Search, { size: 22, className: "stroke-muted-foreground" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      SearchMessagesModal,
+      {
+        open: isSearchOpen,
+        handleClose: () => setIsSearchOpen(false),
+        roomId: chatRoom?._id
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditCustomerAliasDialog,
+      {
+        open: isAliasDialogOpen,
+        onOpenChange: setIsAliasDialogOpen,
+        chatRoom
+      }
+    )
+  ] });
+}
+export {
+  ChatHeader
+};