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

package/components/chat-route/chat-box/edit-customer-alias-dialog.js

@@ -0,0 +1,197 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "../../ui/dialog.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "../../ui/alert-dialog.js";
+import { Input } from "../../ui/input.js";
+import { Button } from "../../custom/button.js";
+import { setFriendAlias, removeFriendAlias } from "@zenify-omni/chat-js/api/chat.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function EditCustomerAliasDialog({
+  open,
+  onOpenChange,
+  chatRoom
+}) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const updateChatDetail = useChatStore((state) => state.updateChatDetail);
+  const [aliasInput, setAliasInput] = useState("");
+  const [confirmRemoveOpen, setConfirmRemoveOpen] = useState(false);
+  const inputRef = useRef(null);
+  const zaloId = chatRoom?.source_id;
+  const friendId = chatRoom?.source_room_id;
+  const currentName = chatRoom?.name ?? "";
+  const originalName = chatRoom?.extra_data?.original_name;
+  const hasAlias = !!originalName;
+  useEffect(() => {
+    if (open) setAliasInput(currentName);
+  }, [open]);
+  const syncRoomName = (newName) => {
+    if (chatRoom?._id && newName) {
+      updateChatDetail(chatRoom._id, { name: newName });
+    }
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId: chatRoom?._id }]
+    });
+  };
+  const setMutation = useMutation({
+    mutationFn: (alias) => setFriendAlias({ zaloId, friendId, alias }),
+    onSuccess: (_data, alias) => {
+      toast.success(
+        i18n.t("chat:toast.setAliasSuccess", {
+          defaultValue: "\u0110\u1EB7t bi\u1EC7t danh th\xE0nh c\xF4ng"
+        })
+      );
+      syncRoomName(alias);
+      onOpenChange(false);
+    },
+    onError: (error) => throwException({
+      message: error?.response?.data?.message || i18n.t("chat:label.failedToSetNickname", {
+        defaultValue: "\u0110\u1EB7t bi\u1EC7t danh th\u1EA5t b\u1EA1i"
+      })
+    })
+  });
+  const removeMutation = useMutation({
+    mutationFn: () => removeFriendAlias({ zaloId, friendId }),
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.aliasRemoved", { defaultValue: "\u0110\xE3 b\u1ECF bi\u1EC7t danh" })
+      );
+      syncRoomName(originalName);
+      setConfirmRemoveOpen(false);
+      onOpenChange(false);
+    },
+    onError: (error) => throwException({
+      message: error?.response?.data?.message || i18n.t("chat:label.failedToRemoveNickname", {
+        defaultValue: "B\u1ECF bi\u1EC7t danh th\u1EA5t b\u1EA1i"
+      })
+    })
+  });
+  const isPending = setMutation.isPending || removeMutation.isPending;
+  const isUnchanged = aliasInput.trim() === currentName.trim();
+  const handleSave = () => {
+    if (isUnchanged) return;
+    const value = aliasInput.trim();
+    if (!value) {
+      toast.error(
+        i18n.t("chat:message.aliasRequired", {
+          defaultValue: "Bi\u1EC7t danh kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+        })
+      );
+      return;
+    }
+    setMutation.mutate(value);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "w-[440px]",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          const el = inputRef.current;
+          if (!el) return;
+          el.focus();
+          const len = el.value.length;
+          el.setSelectionRange(len, len);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:title.setCustomerAlias", {
+              defaultValue: "\u0110\u1EB7t bi\u1EC7t danh kh\xE1ch h\xE0ng"
+            }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:message.setAliasDescription", {
+              defaultValue: "Bi\u1EC7t danh s\u1EBD \u0111\u01B0\u1EE3c \u0111\u1ED3ng b\u1ED9 l\xEAn Zalo v\xE0 hi\u1EC3n th\u1ECB thay cho t\xEAn kh\xE1ch."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              value: aliasInput,
+              onChange: (e) => setAliasInput(e.target.value),
+              placeholder: t("chat:placeholder.alias", {
+                defaultValue: "Nh\u1EADp bi\u1EC7t danh"
+              }),
+              maxLength: 100,
+              disabled: isPending,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleSave();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 sm:justify-end", children: [
+            hasAlias && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "text-destructive hover:text-destructive",
+                onClick: () => setConfirmRemoveOpen(true),
+                disabled: isPending,
+                children: t("chat:action.removeAlias", { defaultValue: "B\u1ECF bi\u1EC7t danh" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => onOpenChange(false),
+                disabled: isPending,
+                children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: isPending || isUnchanged, children: t("common:action.save", { defaultValue: "L\u01B0u" }) })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AlertDialog, { open: confirmRemoveOpen, onOpenChange: setConfirmRemoveOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: t("chat:dialog.removeAliasTitle", {
+          defaultValue: "B\u1ECF bi\u1EC7t danh?"
+        }) }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: t("chat:message.removeAliasDescription", {
+          defaultValue: "Bi\u1EC7t danh s\u1EBD b\u1ECB g\u1EE1 tr\xEAn Zalo v\xE0 t\xEAn hi\u1EC3n th\u1ECB quay v\u1EC1 t\xEAn g\u1ED1c. B\u1EA1n\n              c\xF3 th\u1EC3 \u0111\u1EB7t l\u1EA1i sau."
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: removeMutation.isPending, children: t("common:action.cancel", { defaultValue: "H\u1EE7y" }) }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            disabled: removeMutation.isPending,
+            onClick: (e) => {
+              e.preventDefault();
+              removeMutation.mutate();
+            },
+            children: t("chat:action.removeAlias", { defaultValue: "B\u1ECF bi\u1EC7t danh" })
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  EditCustomerAliasDialog as default
+};

package/components/chat-route/chat-box/emoji-picker-combined.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Picker from "@emoji-mart/react";
+import { Smile } from "lucide-react";
+import { ZaloEmojiPicker } from "./zalo-emoji-picker.js";
+const TAB_HEIGHT = 36;
+const TAB_BAR_STYLE = {
+  display: "flex",
+  width: 352,
+  height: TAB_HEIGHT,
+  borderBottom: "1px solid #e5e7eb",
+  background: "#f9fafb"
+};
+const tabStyle = (active) => ({
+  flex: 1,
+  height: "100%",
+  border: "none",
+  borderBottom: active ? "2px solid #2b54e9" : "2px solid transparent",
+  background: "transparent",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 5,
+  fontSize: 13,
+  color: active ? "#2b54e9" : "#6b7280",
+  fontWeight: active ? 600 : 400,
+  transition: "color 0.15s"
+});
+function EmojiPickerCombined({ onSelect, showZaloTab = false }) {
+  const [activeTab, setActiveTab] = useState("emoji");
+  const [emojiData, setEmojiData] = useState(null);
+  useEffect(() => {
+    import("@emoji-mart/data").then((m) => setEmojiData(m.default));
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: "1px solid #e1e7ef",
+        borderRadius: 10,
+        boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
+        overflow: "hidden",
+        width: 352,
+        background: "#fff"
+      },
+      children: [
+        showZaloTab && /* @__PURE__ */ jsxs("div", { style: TAB_BAR_STYLE, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              style: tabStyle(activeTab === "emoji"),
+              onClick: () => setActiveTab("emoji"),
+              children: [
+                /* @__PURE__ */ jsx(Smile, { size: 15 }),
+                " Emoji"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              style: tabStyle(activeTab === "zalo"),
+              onClick: () => setActiveTab("zalo"),
+              children: [
+                /* @__PURE__ */ jsx(Smile, { size: 15 }),
+                " Zalo"
+              ]
+            }
+          )
+        ] }),
+        activeTab === "zalo" && showZaloTab ? /* @__PURE__ */ jsx(ZaloEmojiPicker, { onSelect }) : emojiData && /* @__PURE__ */ jsx(
+          Picker,
+          {
+            data: emojiData,
+            onEmojiSelect: (emoji) => onSelect(emoji.native),
+            locale: "en",
+            theme: "light",
+            previewPosition: "none",
+            skinTonePosition: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EmojiPickerCombined
+};

package/components/chat-route/chat-box/emoji-sprite.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import emojiSprite__asset from "../../../assets/images/emoji.webp";
+import emojiMap from "./emojiMap.js";
+import { assetUrl } from "../../../assets/asset-url.js";
+const emojiSprite = assetUrl(emojiSprite__asset);
+const sizeMap = {
+  small: { width: 16, height: 16 },
+  medium: { width: 20, height: 20 },
+  larger: { width: 24, height: 24 },
+  picker: { width: 28, height: 28 }
+};
+function EmojiSprite({
+  code,
+  size = "larger",
+  style = {},
+  className = ""
+}) {
+  const position = emojiMap[code];
+  if (!position) {
+    return /* @__PURE__ */ jsx("span", { className, style, children: code });
+  }
+  const { width, height } = sizeMap[size] ?? sizeMap.larger;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      title: code,
+      style: {
+        display: "inline-block",
+        width,
+        height,
+        backgroundImage: `url(${emojiSprite})`,
+        backgroundSize: "5100%",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: `${position.x} ${position.y}`,
+        margin: "0px 0px -3px",
+        flexShrink: 0,
+        ...style
+      }
+    }
+  );
+}
+export {
+  EmojiSprite
+};

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

@@ -0,0 +1,92 @@
+const emojiMap = {
+  ":)": { x: "82%", y: "17.5%" },
+  ":~": { x: "84%", y: "37.5%" },
+  ":b": { x: "82%", y: "30%" },
+  ":')": { x: "82%", y: "5%" },
+  "8-)": { x: "82%", y: "45%" },
+  ":-((": { x: "84%", y: "2.5%" },
+  ":$": { x: "82%", y: "20%" },
+  ":3": { x: "82%", y: "37.5%" },
+  ":z": { x: "84%", y: "50%" },
+  ":((": { x: "82%", y: "95%" },
+  "&-(": { x: "84%", y: "35%" },
+  ":-h": { x: "84%", y: "5%" },
+  ":p": { x: "82%", y: "40%" },
+  ":d": { x: "82%", y: "0%" },
+  ":o": { x: "84%", y: "20%" },
+  ":(": { x: "82%", y: "85%" },
+  ";-)": { x: "82%", y: "50%" },
+  "--b": { x: "84%", y: "30%" },
+  ":))": { x: "82%", y: "10%" },
+  ":-*": { x: "82%", y: "32.5%" },
+  ";p": { x: "82%", y: "22.5%" },
+  ";-d": { x: "82%", y: "27.5%" },
+  "/-showlove": { x: "82%", y: "25%" },
+  ";d": { x: "82%", y: "60%" },
+  ";o": { x: "82%", y: "87.5%" },
+  ";g": { x: "82%", y: "42.5%" },
+  "|-)": { x: "84%", y: "45%" },
+  ":!": { x: "84%", y: "0%" },
+  ":l": { x: "82%", y: "70%" },
+  ":>": { x: "82%", y: "7.5%" },
+  ":;": { x: "82%", y: "47.5%" },
+  ";f": { x: "82%", y: "57.5%" },
+  ":v": { x: "82%", y: "55%" },
+  ":wipe": { x: "84%", y: "32.5%" },
+  ":-dig": { x: "82%", y: "80%" },
+  ":handclap": { x: "82%", y: "77.5%" },
+  "b-)": { x: "82%", y: "2.5%" },
+  ":-r": { x: "82%", y: "72.5%" },
+  ":-<": { x: "82%", y: "65%" },
+  ":-o": { x: "84%", y: "47.5%" },
+  ";-s": { x: "84%", y: "7.5%" },
+  ";?": { x: "84%", y: "17.5%" },
+  ";-x": { x: "82%", y: "75%" },
+  ":-f": { x: "84%", y: "40%" },
+  "8*)": { x: "84%", y: "25%" },
+  ";!": { x: "82%", y: "100%" },
+  ";-!": { x: "84%", y: "52.5%" },
+  ";xx": { x: "84%", y: "12.5%" },
+  ":-bye": { x: "82%", y: "12.5%" },
+  ">-|": { x: "82%", y: "82.5%" },
+  "p-(": { x: "82%", y: "90%" },
+  ":--|": { x: "82%", y: "92.5%" },
+  ":q": { x: "84%", y: "10%" },
+  "x-)": { x: "82%", y: "52.5%" },
+  ":*": { x: "82%", y: "35%" },
+  ";-a": { x: "84%", y: "22.5%" },
+  "8*": { x: "82%", y: "97.5%" },
+  ":|": { x: "82%", y: "67.5%" },
+  ":x": { x: "84%", y: "27.5%" },
+  ":t": { x: "84%", y: "42.5%" },
+  ";-/": { x: "84%", y: "15%" },
+  ":-l": { x: "82%", y: "62.5%" },
+  "$-)": { x: "82%", y: "15%" },
+  "/-beer": { x: "84%", y: "55%" },
+  "/-coffee": { x: "84%", y: "57.5%" },
+  "/-rose": { x: "84%", y: "60%" },
+  "/-fade": { x: "84%", y: "62.5%" },
+  "/-bd": { x: "84%", y: "65%" },
+  "/-bome": { x: "84%", y: "67.5%" },
+  "/-cake": { x: "84%", y: "70%" },
+  "/-heart": { x: "84%", y: "72.5%" },
+  "/-break": { x: "84%", y: "75%" },
+  "/-shit": { x: "84%", y: "77.5%" },
+  "/-li": { x: "84%", y: "80%" },
+  "/-flag": { x: "86%", y: "7.5%" },
+  "/-strong": { x: "84%", y: "82.5%" },
+  "/-weak": { x: "84%", y: "85%" },
+  "/-ok": { x: "84%", y: "87.5%" },
+  "/-v": { x: "84%", y: "90%" },
+  "/-thanks": { x: "84%", y: "92.5%" },
+  "/-punch": { x: "84%", y: "95%" },
+  "/-share": { x: "84%", y: "97.5%" },
+  "_()_": { x: "84%", y: "100%" },
+  "/-no": { x: "86%", y: "0%" },
+  "/-bad": { x: "86%", y: "2.5%" },
+  "/-loveu": { x: "86%", y: "5%" }
+};
+var emojiMap_default = emojiMap;
+export {
+  emojiMap_default as default
+};

package/components/chat-route/chat-box/facebook-reconnect-notice.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "../../custom/button.js";
+import { TriangleAlert } from "lucide-react";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { Trans, useTranslation } from "react-i18next";
+const FacebookReconnectNotice = forwardRef(
+  function FacebookReconnectNotice2({ pageName, onGoToSettings }, ref) {
+    const { t } = useTranslation();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: "absolute bottom-0 left-0 right-0 z-10 bg-transparent px-3 py-2",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-destructive/30 bg-[--label-red] px-3.5 py-2.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-[--label-red]", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-[18px] w-[18px] text-destructive" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-destructive", children: t("chat:toast.sendMessageFail", {
+              defaultValue: "Kh\xF4ng th\u1EC3 g\u1EEDi tin nh\u1EAFn"
+            }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: /* @__PURE__ */ jsx(
+              Trans,
+              {
+                i18nKey: "chat:message.facebookPageDisconnected",
+                defaults: "K\u1EBFt n\u1ED1i c\u1EE7a trang <0>{{page}}</0> \u0111\xE3 h\u1EBFt h\u1EA1n ho\u1EB7c b\u1ECB thu h\u1ED3i n\xEAn Zenify kh\xF4ng g\u1EEDi \u0111\u01B0\u1EE3c tin t\u1EDBi kh\xE1ch.",
+                values: { page: maskData(pageName) || "Facebook" },
+                components: [
+                  /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground" })
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: onGoToSettings,
+              className: "h-8 flex-shrink-0 bg-destructive px-3 text-white shadow-sm hover:bg-destructive/90",
+              children: t("common:action.reconnect", { defaultValue: "K\u1EBFt n\u1ED1i l\u1EA1i" })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+export {
+  FacebookReconnectNotice
+};