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

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

@@ -0,0 +1,399 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import {
+  Clock4,
+  Forward,
+  MessageCircleWarning,
+  Quote,
+  Lightbulb,
+  Pin,
+  PinOff,
+  MoreHorizontal,
+  MessageSquareX,
+  RotateCcw,
+  SquareCheck
+} from "lucide-react";
+import { toast } from "sonner";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/shallow";
+import { useMemo } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { sendMessage } from "../../../utils/chat_socket.js";
+import { getMessageInsightData } from "./chat-feedback/chat-insight.js";
+import { undoZaloMessage } from "@zenify-omni/chat-js/api/chat.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { isZaloGroup, isZaloPersonal } from "../util.js";
+import { sendContactCardMessage } from "./send-contact-card.js";
+import { showSuccessToast } from "../../ui/sonner.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../ui/dropdown-menu.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const getPinTitle = (message) => {
+  const content = message.content;
+  const type = content?.type;
+  if (type === "image") {
+    return JSON.stringify({
+      url: content?.src,
+      thumb: content?.thumb || content?.src
+    });
+  }
+  if (type === "file") {
+    return JSON.stringify({
+      url: content?.src,
+      name: content?.fileName,
+      size: content?.fileSize
+    });
+  }
+  if (type === "video") {
+    return JSON.stringify({ url: content?.src, thumb: content?.thumb });
+  }
+  if (type === "audio") {
+    return JSON.stringify({ url: content?.src });
+  }
+  if (type === "sticker") {
+    return JSON.stringify({ url: content?.src });
+  }
+  return content?.text || "";
+};
+const ChatMessageActions = ({
+  message,
+  isMychat,
+  className,
+  isAgent,
+  isChatAllowed,
+  isReplyInMessage,
+  isPinInMessage,
+  isForwardInMessage,
+  isReply,
+  isPin,
+  isForward,
+  ticket,
+  pinnedData,
+  zaloAllocatedList
+}) => {
+  const { t } = useTranslation();
+  const [
+    setReplySelected,
+    setFeedbackMessage,
+    setInsightMessage,
+    setForwardMessage,
+    isSelectMode,
+    setSelectMode,
+    toggleSelectedMessage
+  ] = useChatStore(
+    useShallow((state) => [
+      state.setReplySelected,
+      state.setFeedbackMessage,
+      state.setInsightMessage,
+      state.setForwardMessage,
+      state.isSelectMode,
+      state.setSelectMode,
+      state.toggleSelectedMessage
+    ])
+  );
+  const pinnedInfo = useMemo(() => {
+    const cliMsgId = message.content?.meta?.cliMsgId;
+    if (!cliMsgId || !pinnedData?.data?.data?.length) return null;
+    const pin = pinnedData.data.data.find((p) => {
+      try {
+        const params = typeof p.params === "string" ? JSON.parse(p.params) : p.params;
+        return params.client_msg_id === cliMsgId;
+      } catch {
+        return false;
+      }
+    });
+    return pin ? { topicId: pin.id } : null;
+  }, [pinnedData, message.content?.meta?.cliMsgId]);
+  const hasInsight = useMemo(
+    () => getMessageInsightData(message).hasAny,
+    [message]
+  );
+  const handleReply = () => {
+    if (!isReply) return;
+    setReplySelected(message);
+  };
+  const handleForward = () => {
+    if (!isForward) return;
+    setForwardMessage({ message, ticket });
+  };
+  const handleSelect = () => {
+    setSelectMode(true);
+    toggleSelectedMessage(message);
+  };
+  const handleFeedback = () => {
+    setFeedbackMessage(message);
+  };
+  const handleInsight = () => {
+    setInsightMessage(message);
+  };
+  const currentUser = getUser();
+  const isUndoEnabled = useMemo(() => {
+    if (!isMychat) return false;
+    if (message?.extra_data?.is_undo || message?.extra_data?.is_deleted)
+      return false;
+    if (!isZaloPersonal(ticket)) return false;
+    if (!message?.source_id) return false;
+    if (zaloAllocatedList?.some?.((e) => e.zalo_id === message.source_id))
+      return true;
+    const isInRoomOrTicket = (ticket?.users_in_room || []).some((u) => u._id === currentUser?._id) || (ticket?.tickets || []).some(
+      (t2) => [...t2?.cc_users || [], t2?.assign_agent_id].includes(currentUser?._id)
+    );
+    return isInRoomOrTicket && ticket?.source_id === message.source_id;
+  }, [
+    zaloAllocatedList,
+    ticket,
+    isMychat,
+    message?.source_id,
+    message?.extra_data?.is_undo,
+    message?.extra_data?.is_deleted,
+    currentUser?._id
+  ]);
+  const undoMutation = useMutation({
+    mutationFn: () => undoZaloMessage({
+      zaloId: message?.source_id,
+      threadId: ticket?.source_room_id,
+      msgId: message?.content?.meta?.msgId,
+      isGroup: isZaloGroup(ticket)
+    }),
+    onSuccess: () => showSuccessToast(
+      i18n.t("chat:status.messageRecalled", {
+        defaultValue: "\u0110\xE3 thu h\u1ED3i tin nh\u1EAFn"
+      })
+    ),
+    onError: throwException
+  });
+  const handleUndo = () => {
+    if (undoMutation.isPending) return;
+    if (!message?.content?.meta?.msgId) {
+      toast.warning(
+        i18n.t("chat:message.messageNotReadyRetry", {
+          defaultValue: "Tin nh\u1EAFn ch\u01B0a s\u1EB5n s\xE0ng, vui l\xF2ng th\u1EED l\u1EA1i sau gi\xE2y l\xE1t"
+        })
+      );
+      return;
+    }
+    undoMutation.mutate();
+  };
+  const handleRetry = () => {
+    const { content, extra_data } = message;
+    const type = content?.type;
+    if (type === "contact_card") {
+      const contactObj = content?.meta?.content_obj || {};
+      if (!contactObj.zalo_id) {
+        toast.warning(
+          i18n.t("chat:message.khongTheGuiLaiDanh", {
+            defaultValue: "Kh\xF4ng th\u1EC3 g\u1EEDi l\u1EA1i danh thi\u1EBFp n\xE0y, vui l\xF2ng g\u1EEDi l\u1EA1i t\u1EEB \u0111\u1EA7u"
+          })
+        );
+        return;
+      }
+      sendContactCardMessage({
+        chatRoom: ticket,
+        user: currentUser,
+        contact: {
+          zalo_id: contactObj.zalo_id,
+          name: contactObj.title,
+          phone: contactObj.phone,
+          avatar: contactObj.avatar
+        }
+      });
+      return;
+    }
+    const options = { is_personal_zalo: ticket?.is_personal_zalo };
+    if (extra_data?.styles) options.styles = extra_data.styles;
+    const contentTxt = type === "image" || type === "file" ? content?.src : content?.text;
+    const fileName = content?.file_name || content?.fileName || null;
+    sendMessage(ticket, contentTxt, type, options, fileName);
+  };
+  const handlePin = () => {
+    if (pinnedInfo) {
+      const contentOption = {
+        unpin: {
+          type: "unpin_message",
+          topic_id: pinnedInfo.topicId
+        }
+      };
+      sendMessage(
+        ticket,
+        "",
+        "unpin_message",
+        { is_personal_zalo: ticket?.is_personal_zalo },
+        null,
+        contentOption
+      );
+    } else {
+      const currentPins = pinnedData?.data?.data || [];
+      if (currentPins.length >= 3) {
+        toast.warning(
+          i18n.t("chat:message.maxPinnedLimit3", {
+            defaultValue: "Danh s\xE1ch t\u1ED1i \u0111a 3 ghim, b\u1EA1n c\u1EA7n b\u1ECF b\u1EDBt ghim c\u0169"
+          })
+        );
+        return;
+      }
+      const contentOption = {
+        pin: {
+          type: "pin_message",
+          msg_id: message.content?.meta?.msgId,
+          msg_type: message.content?.type,
+          sender_uid: message.content?.meta?.uidFrom,
+          sender_name: message.content?.meta?.dName,
+          title: getPinTitle(message),
+          client_msg_id: message.content?.meta?.cliMsgId
+        }
+      };
+      sendMessage(
+        ticket,
+        "",
+        "pin_message",
+        { is_personal_zalo: ticket?.is_personal_zalo },
+        null,
+        contentOption
+      );
+    }
+  };
+  if (isSelectMode) return null;
+  if (!IsMessageAction(message)) {
+    return null;
+  }
+  const showReply = isChatAllowed && isReplyInMessage() && isReply && message.status === "success";
+  const showForward = isChatAllowed && isForward && isForwardInMessage() && message.status === "success";
+  const showSelect = isChatAllowed && isForwardInMessage() && message.status === "success";
+  const showUndo = isChatAllowed && isUndoEnabled && message.status === "success";
+  const showPin = isChatAllowed && isPinInMessage() && isPin && message.status === "success";
+  const showRetry = isChatAllowed && isMychat && message.status === "failed" && message?.content?.type !== "utility-messages";
+  const secondaryItems = [
+    hasInsight && {
+      key: "insight",
+      icon: /* @__PURE__ */ jsx(Lightbulb, { size: 15, className: "text-primary" }),
+      label: "Xem insight",
+      onClick: handleInsight
+    },
+    !!message?.chatbot_setting_id && {
+      key: "feedback",
+      icon: /* @__PURE__ */ jsx(MessageCircleWarning, { size: 15, className: "text-primary" }),
+      label: i18n.t("lumi:action.sendFeedback", {
+        defaultValue: "G\u1EEDi ph\u1EA3n h\u1ED3i"
+      }),
+      onClick: handleFeedback
+    },
+    showPin && {
+      key: "pin",
+      icon: pinnedInfo ? /* @__PURE__ */ jsx(PinOff, { size: 15, className: "text-muted-foreground" }) : /* @__PURE__ */ jsx(Pin, { size: 15, className: "rotate-45 text-muted-foreground" }),
+      label: pinnedInfo ? t("chat:action.unpin", { defaultValue: "B\u1ECF ghim" }) : t("chat:action.pinMessage", { defaultValue: "Ghim tin nh\u1EAFn" }),
+      onClick: handlePin
+    },
+    showSelect && {
+      key: "select",
+      icon: /* @__PURE__ */ jsx(SquareCheck, { size: 16, className: "text-muted-foreground" }),
+      label: i18n.t("common:action.select", {
+        defaultValue: "Ch\u1ECDn"
+      }),
+      onClick: handleSelect
+    },
+    showUndo && {
+      key: "undo",
+      icon: /* @__PURE__ */ jsx(
+        MessageSquareX,
+        {
+          size: 15,
+          className: cn(
+            "text-destructive",
+            undoMutation.isPending && "animate-spin"
+          )
+        }
+      ),
+      label: i18n.t("chat:label.recallMessage", {
+        defaultValue: "Thu h\u1ED3i tin nh\u1EAFn"
+      }),
+      onClick: handleUndo,
+      danger: true
+    }
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute flex flex-row items-center gap-1",
+        isAgent ? "right-full flex-row-reverse pr-2" : "left-full pl-2"
+      ),
+      children: [
+        message.status === "pending" && /* @__PURE__ */ jsx(Clock4, { color: "gray", size: 16 }),
+        showRetry && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: handleRetry,
+            title: t("chat:action.resend", { defaultValue: "G\u1EEDi l\u1EA1i" }),
+            className: "flex cursor-pointer items-center justify-center rounded-full border border-destructive/40 p-[3px] text-destructive opacity-0 transition-opacity duration-200 hover:bg-[--label-red] group-hover:opacity-100",
+            children: /* @__PURE__ */ jsx(RotateCcw, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex -translate-y-1 items-center gap-1", className), children: [
+          showReply && /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleReply,
+              className: "flex cursor-pointer items-center justify-center rounded-full border p-[3px] hover:text-primary",
+              children: /* @__PURE__ */ jsx(
+                Quote,
+                {
+                  size: 16,
+                  className: cn("text-muted-foreground", !isMychat && "scale-x-[-1]")
+                }
+              )
+            }
+          ),
+          showForward && /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: handleForward,
+              title: t("common:action.forward", { defaultValue: "Chuy\u1EC3n ti\u1EBFp" }),
+              className: "flex cursor-pointer items-center justify-center rounded-full border p-[3px] hover:text-primary",
+              children: /* @__PURE__ */ jsx(
+                Forward,
+                {
+                  size: 16,
+                  className: cn("text-muted-foreground", !isMychat && "scale-x-[-1]")
+                }
+              )
+            }
+          ),
+          secondaryItems.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-full border p-[3px] hover:text-primary", children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16, className: "text-muted-foreground" }) }) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: isMychat ? "end" : "start", children: secondaryItems.map((item) => /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: item.onClick,
+                className: cn(
+                  "flex cursor-pointer items-center gap-2",
+                  item.danger && "text-destructive focus:text-destructive"
+                ),
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ]
+              },
+              item.key
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const IsMessageAction = (message) => {
+  if (message?.content?.meta?.msgType === "friend_event") {
+    return false;
+  }
+  return true;
+};
+export {
+  ChatMessageActions,
+  IsMessageAction
+};