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

package/components/chat-route/chat-box/common-groups-modal.js

@@ -0,0 +1,430 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2, MessageCircle, Search, Users } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogDescription,
+  DialogTitle
+} 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 { useMutation, useQuery } from "@tanstack/react-query";
+import { getCommonGroups } from "@zenify-omni/chat-js/api/chat.js";
+import { navigate } from "../../../config/navigation.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/shallow";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { checkOpenChat, checkSendMessageStatus } from "@zenify-omni/chat-js/api/chat.js";
+import {
+  distributeManual,
+  getChatSessionDetail,
+  receiveInvite
+} from "@zenify-omni/chat-js/api/chatroom.js";
+import { sendMessageZalo } from "@zenify-omni/chat-js/api/settings/channel.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { CrmType } from "@zenify-omni/chat-js/constants/user.js";
+import ModalAddZalo from "../zalo/modal-action-zalo.js";
+import { toast } from "sonner";
+import { Trans, useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const CommonGroupItem = memo(({ group, onNavigate, isNavigating }) => {
+  const { t } = useTranslation();
+  const displayName = group?.name || "Unknown";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [
+    /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx(AvatarImage, { src: group?.avt || group?.fullAvt, alt: displayName }),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-sm font-medium text-muted-foreground", children: displayName.charAt(0).toUpperCase() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: displayName }),
+      group?.totalMember != null && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Users, { className: "h-3 w-3" }),
+        t("chat:label.totalMemberCount", {
+          totalMember: group.totalMember,
+          defaultValue: "{totalMember} th\xE0nh vi\xEAn"
+        })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-7 gap-1 px-2 text-xs text-primary",
+        disabled: isNavigating,
+        onClick: () => onNavigate(group),
+        children: [
+          /* @__PURE__ */ jsx(MessageCircle, { className: "h-3.5 w-3.5" }),
+          t("chat:action.sendChatMessage", { defaultValue: "Nh\u1EAFn tin" })
+        ]
+      }
+    )
+  ] });
+});
+CommonGroupItem.displayName = "CommonGroupItem";
+const useCommonGroups = (zaloId, customerZaloId, open) => {
+  return useQuery({
+    queryKey: ["CommonGroupsModal:groups", zaloId, customerZaloId],
+    queryFn: async () => {
+      const { data } = await getCommonGroups({ zaloId, customerZaloId });
+      const result = data?.data ?? data ?? {};
+      return {
+        totalGroups: result.totalGroups ?? 0,
+        groups: result.groups ?? []
+      };
+    },
+    enabled: !!zaloId && !!customerZaloId && open,
+    onError: throwException
+  });
+};
+function CommonGroupsModal({
+  open,
+  onOpenChange,
+  zaloId,
+  customerZaloId,
+  customerName,
+  customerAvatar,
+  customerCrmType
+}) {
+  const { t } = useTranslation();
+  const [
+    setCurrentChatId,
+    setLastRefreshTime,
+    setChatContentRefreshAt,
+    chatList
+  ] = useChatStore(
+    useShallow((s) => [
+      s.setCurrentChatId,
+      s.setLastRefreshTime,
+      s.setChatContentRefreshAt,
+      s.chatList
+    ])
+  );
+  const user = getUser();
+  const [searchText, setSearchText] = useState("");
+  const [navigatingGroupId, setNavigatingGroupId] = useState(null);
+  const [zaloPop, setZaloPop] = useState(false);
+  const [isSendingMessage, setIsSendingMessage] = useState(false);
+  const [pendingGroup, setPendingGroup] = useState(null);
+  const textareaRef = useRef(null);
+  const [inQueueConfirm, setInQueueConfirm] = useState(false);
+  const [inQueuePayload, setInQueuePayload] = useState(null);
+  const { data: { totalGroups = 0, groups = [] } = {}, isLoading } = useCommonGroups(zaloId, customerZaloId, open);
+  useEffect(() => {
+    if (open) {
+      setSearchText("");
+      setNavigatingGroupId(null);
+    } else {
+      setZaloPop(false);
+    }
+  }, [open]);
+  const filtered = useMemo(() => {
+    const trimmed = searchText.trim();
+    if (!trimmed) return groups;
+    const q = trimmed.toLowerCase();
+    return groups.filter((g) => g?.name?.toLowerCase().includes(q));
+  }, [groups, searchText]);
+  const handleNavigateToChat = useCallback(
+    (chatRoomId) => {
+      onOpenChange(false);
+      if (useChatStore.getState().currentChatId !== chatRoomId) {
+        navigate({ to: "/chat/$chatRoomId", params: { chatRoomId } });
+      }
+      setTimeout(() => {
+        const existing = chatList.find((c) => c._id === chatRoomId);
+        if (existing) setLastRefreshTime(Date.now());
+        setChatContentRefreshAt(Date.now());
+        setCurrentChatId(chatRoomId);
+      }, 300);
+    },
+    [
+      chatList,
+      setCurrentChatId,
+      setChatContentRefreshAt,
+      setLastRefreshTime,
+      onOpenChange
+    ]
+  );
+  const onSendMessageSuccess = useCallback(
+    async (msgId, sourceId) => {
+      if (!msgId) return;
+      let attempts = 0;
+      const maxAttempts = 3;
+      while (attempts < maxAttempts) {
+        const res = await checkSendMessageStatus({ msgId, sourceId });
+        if (res.data?.data?.completed && res.data?.data?.chat_room_id) {
+          handleNavigateToChat(res.data.data.chat_room_id);
+          return;
+        }
+        attempts++;
+        if (attempts < maxAttempts) {
+          await new Promise((resolve) => setTimeout(resolve, 1e3));
+        }
+      }
+    },
+    [handleNavigateToChat]
+  );
+  const openComposeForGroup = useCallback((group) => {
+    setPendingGroup(group);
+    setZaloPop({
+      zalo_data: {
+        avatar: group.avt || group.fullAvt,
+        name: group.name,
+        displayName: group.name
+      },
+      modal_type: 2,
+      defaultMessage: ""
+    });
+  }, []);
+  const handleNavigate = useCallback(
+    async (group) => {
+      if (!group?.groupId) return;
+      setNavigatingGroupId(group.groupId);
+      try {
+        const response = await checkOpenChat({
+          data: {
+            user_zalo_id: group.groupId,
+            source_id: zaloId
+          }
+        });
+        const { has_open_chat, chat_session_id, in_queue, in_room, is_hidden } = response?.data?.data || {};
+        if (has_open_chat && chat_session_id) {
+          if (is_hidden) {
+            if (in_room || in_queue || zaloId === user?.zalo_id) {
+              openComposeForGroup(group);
+            } else {
+              toast.error(
+                i18n.t("chat:toast.noPermissionOpenChat", {
+                  defaultValue: "B\u1EA1n kh\xF4ng c\xF3 quy\u1EC1n m\u1EDF chat n\xE0y"
+                })
+              );
+            }
+            return;
+          }
+          const sessionRes = await getChatSessionDetail(chat_session_id);
+          const sessionData = sessionRes?.data;
+          const chatRoomId = sessionData?.room_id;
+          if (in_room) {
+            handleNavigateToChat(chatRoomId);
+          } else if (in_queue) {
+            if (!sessionData.distribution) {
+              await distributeManual({
+                data: {
+                  target_type: "CHAT",
+                  target_id: chat_session_id,
+                  assigned_id: user?._id
+                }
+              });
+              handleNavigateToChat(chatRoomId);
+            } else {
+              onOpenChange(false);
+              setInQueuePayload({
+                chat_session_id,
+                chat_room_id: chatRoomId
+              });
+              setInQueueConfirm(true);
+            }
+          } else if (zaloId === user?.zalo_id) {
+            openComposeForGroup(group);
+          }
+        } else if (!has_open_chat && (in_queue || !in_queue && zaloId === user?.zalo_id)) {
+          openComposeForGroup(group);
+        } else {
+          toast.error(
+            i18n.t("chat:toast.noPermissionOpenChat", {
+              defaultValue: "B\u1EA1n kh\xF4ng c\xF3 quy\u1EC1n m\u1EDF chat n\xE0y"
+            })
+          );
+        }
+      } catch {
+      } finally {
+        setNavigatingGroupId(null);
+      }
+    },
+    [
+      zaloId,
+      user?.zalo_id,
+      user?._id,
+      handleNavigateToChat,
+      onOpenChange,
+      openComposeForGroup
+    ]
+  );
+  const handleSubmit = useCallback(async () => {
+    const message = textareaRef.current?.value?.trim();
+    if (!message)
+      return toast.error(
+        i18n.t("chat:message.messageRequired", {
+          defaultValue: "Tin nh\u1EAFn kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+        })
+      );
+    setIsSendingMessage(true);
+    try {
+      const res = await sendMessageZalo({
+        user_id: user._id,
+        user_zalo_id: pendingGroup?.groupId,
+        page_id: zaloId,
+        first_message: message,
+        is_group: true
+      });
+      setZaloPop(false);
+      const {
+        msgId,
+        source_id: sourceId,
+        is_hidden: isHidden
+      } = res?.data?.data || {};
+      if (msgId && isHidden) {
+        toast.success(
+          i18n.t("chat:toast.sendZaloMessageSuccess", {
+            defaultValue: "\u0110\xE3 g\u1EEDi tin nh\u1EAFn Zalo th\xE0nh c\xF4ng"
+          })
+        );
+      } else if (msgId) {
+        await onSendMessageSuccess(msgId, sourceId);
+      }
+    } catch (err) {
+      throwException({ message: err.response?.data?.error?.message });
+    } finally {
+      setIsSendingMessage(false);
+    }
+  }, [user, pendingGroup, zaloId, onSendMessageSuccess]);
+  const handleInQueueConfirmMutation = useMutation({
+    mutationFn: async ({ chat_session_id }) => {
+      await receiveInvite({
+        sessionId: chat_session_id
+      });
+    },
+    onSuccess: () => {
+      setInQueueConfirm(false);
+      setInQueuePayload(null);
+      navigate({
+        to: "/chat/$chatRoomId",
+        params: { chatRoomId: inQueuePayload.chat_room_id }
+      });
+    },
+    onError: throwException
+  });
+  const handleInQueueConfirm = () => {
+    if (!inQueuePayload) return;
+    handleInQueueConfirmMutation.mutate({
+      chat_session_id: inQueuePayload.chat_session_id
+    });
+  };
+  const customerInitial = (customerName || "K").charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onOpenChange: (v) => {
+          if (!zaloPop) onOpenChange(v);
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            className: `flex max-h-[80vh] max-w-xl flex-col overflow-hidden p-0 ${zaloPop ? "hidden" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(DialogHeader, { className: "px-5 pt-5", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: t("chat:list.commonGroupList", {
+                defaultValue: "Danh s\xE1ch nh\xF3m chung"
+              }) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 pt-1", children: [
+                /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx(AvatarImage, { src: customerAvatar, alt: customerName }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-sm", children: customerInitial })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: customerName || i18n.t("common:label.customer", {
+                    defaultValue: "Kh\xE1ch h\xE0ng"
+                  }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: customerCrmType === CrmType.Lead ? t("common:label.potential", { defaultValue: "Ti\u1EC1m n\u0103ng" }) : t("common:label.customer", { defaultValue: "Kh\xE1ch h\xE0ng" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "px-4 pt-3", 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: t("chat:placeholder.searchGroup", {
+                      defaultValue: "T\xECm ki\u1EBFm nh\xF3m"
+                    }),
+                    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: t("chat:empty.noCommonGroups", {
+                defaultValue: "Kh\xF4ng c\xF3 nh\xF3m chung n\xE0o"
+              }) }) }) : filtered.map((group) => /* @__PURE__ */ jsx(
+                CommonGroupItem,
+                {
+                  group,
+                  onNavigate: handleNavigate,
+                  isNavigating: navigatingGroupId === group.groupId
+                },
+                group.groupId
+              )) }),
+              !isLoading && totalGroups > 0 && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  i18nKey: "chat:label.totalGroupCount",
+                  defaults: "T\u1ED5ng c\u1ED9ng: <0>{{count}} / {{total}} nh\xF3m</0>",
+                  values: { count: filtered?.length || 0, total: totalGroups },
+                  components: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold text-primary" }, "0")
+                  ]
+                }
+              ) }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ModalAddZalo,
+      {
+        isLoading: isSendingMessage,
+        zaloPop,
+        setZaloPop,
+        getTitle: () => "G\u1EEDi tin nh\u1EAFn Zalo",
+        textareaRef,
+        getTitleButon: () => "G\u1EEDi tin nh\u1EAFn",
+        handleSubmit,
+        zaloInfo: zaloPop,
+        hideOverLay: true
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: inQueueConfirm, onOpenChange: setInQueueConfirm, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.joinConversation", {
+          defaultValue: "Tham gia h\u1ED9i tho\u1EA1i"
+        }) }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:dialog.confirmJoinOccupiedConversation", {
+          defaultValue: "\u0110ang c\xF3 chuy\xEAn vi\xEAn ph\u1EE5 tr\xE1ch h\u1ED9i tho\u1EA1i v\u1EDBi kh\xE1ch h\xE0ng n\xE0y. B\u1EA1n\n              ch\u1EAFc ch\u1EAFn mu\u1ED1n tham gia?"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => {
+              setInQueueConfirm(false);
+              setInQueuePayload(null);
+            },
+            children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: handleInQueueConfirm, children: t("common:action.continue", { defaultValue: "Ti\u1EBFp t\u1EE5c" }) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  CommonGroupsModal
+};

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

@@ -0,0 +1,29 @@
+const FB_REACTIONS = [
+  { key: "LIKE", rType: "\u{1F44D}", rIcon: "\u{1F44D}", icon: "\u{1F44D}" },
+  // 👍
+  {
+    key: "LOVE",
+    rType: "\u2764\uFE0F",
+    rIcon: "\u2764\uFE0F",
+    icon: "\u2764\uFE0F"
+  },
+  // ❤️
+  { key: "HAHA", rType: "\u{1F606}", rIcon: "\u{1F606}", icon: "\u{1F606}" },
+  // 😆
+  { key: "WOW", rType: "\u{1F62E}", rIcon: "\u{1F62E}", icon: "\u{1F62E}" },
+  // 😮
+  { key: "SAD", rType: "\u{1F622}", rIcon: "\u{1F622}", icon: "\u{1F622}" },
+  // 😢
+  { key: "ANGRY", rType: "\u{1F621}", rIcon: "\u{1F621}", icon: "\u{1F621}" }
+  // 😡
+];
+const CHATTER_TYPES = {
+  CONTACT: "contact",
+  CUSTOMER: "customer",
+  AGENT: "agent",
+  CHATBOT: "chatbot"
+};
+export {
+  CHATTER_TYPES,
+  FB_REACTIONS
+};

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

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { contactCardUserSvg } from "../../../../assets/public-urls.js";
+import React, { useMemo, useState } from "react";
+import { MessageTime } from "../message-time.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../custom/avatar.js";
+import { QrCode, User } from "lucide-react";
+import ZaloSendMessageDialog from "../right-side/zalo-group/send-message-dialog.js";
+import ZaloAddFriendDialog from "../right-side/zalo-group/add-friend-dialog.js";
+function ZaloContactCardContent({ msg, timeText }) {
+  const [openSendMessageDialog, setOpenSendMessageDialog] = useState(false);
+  const [openAddFriendDialog, setOpenAddFriendDialog] = useState(false);
+  const phoneNumber = useMemo(
+    () => msg?.content?.meta?.content_obj?.phone || msg?.content?.phone,
+    [msg?.content?.meta?.content_obj?.phone, msg?.content?.phone]
+  );
+  const zaloQR = useMemo(
+    () => msg?.content?.meta?.content_obj?.qr || msg?.content?.qr,
+    [msg?.content?.meta?.content_obj?.qr, msg?.content?.qr]
+  );
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative my-2 w-[300px] rounded-xl border border-primary/40 bg-transparent shadow-md", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex w-full cursor-pointer flex-col gap-4 rounded-lg bg-cover bg-repeat p-4",
+          style: { backgroundImage: `url(${contactCardUserSvg})` },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 flex-shrink-0 overflow-hidden object-cover", children: [
+                /* @__PURE__ */ jsx(
+                  AvatarImage,
+                  {
+                    src: msg?.content.meta?.content_obj?.avatar || msg?.content.thumb,
+                    alt: msg?.content.meta?.content_obj?.title || msg?.content.text
+                  }
+                ),
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted", children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-0.5 truncate", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-white", children: msg?.content.meta?.content_obj?.title || msg?.content.text }),
+                phoneNumber && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-white", children: phoneNumber })
+              ] })
+            ] }),
+            (zaloQR || msg?.status === "pending" || msg?.status === "success") && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: zaloQR ? /* @__PURE__ */ jsx("img", { className: "h-14 w-14", src: String(zaloQR), alt: "" }) : /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded bg-white/90 blur-[2px]", children: /* @__PURE__ */ jsx(QrCode, { className: "h-10 w-10 text-black/70" }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MessageTime,
+        {
+          timeText,
+          status: msg?.status,
+          className: "px-4"
+        }
+      )
+    ] }),
+    openSendMessageDialog && /* @__PURE__ */ jsx(
+      ZaloSendMessageDialog,
+      {
+        zaloUser: {
+          user_id: msg.content_obj.zalo_id,
+          avatar: msg.content_obj.avatar,
+          display_name: msg.content_obj.title
+        },
+        open: openSendMessageDialog,
+        handleClose: () => setOpenSendMessageDialog(false)
+      }
+    ),
+    openAddFriendDialog && /* @__PURE__ */ jsx(
+      ZaloAddFriendDialog,
+      {
+        toZaloUser: {
+          user_id: msg.content_obj.zalo_id,
+          avatar: msg.content_obj.avatar,
+          display_name: msg.content_obj.title
+        },
+        contactId: msg.chatter_id,
+        pageId: msg.page_id,
+        open: openAddFriendDialog,
+        handleClose: () => setOpenAddFriendDialog(false)
+      }
+    )
+  ] });
+}
+export {
+  ZaloContactCardContent as default
+};