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

package/components/chat-route/chat-box/right-side/customer/customer-info-item.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import MaskDataInput from "../../../../custom/inputs/mask-data/mask-data-input.js";
+import { cn } from "../../../../../lib/utils.js";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+const CustomerInfoItem = ({
+  type,
+  field,
+  label,
+  value,
+  actions,
+  onChange,
+  onBlur,
+  isLabel = true,
+  disabled = false,
+  children,
+  className,
+  placeholder,
+  maskDelay,
+  onKeyDown = () => {
+  },
+  options
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center",
+        className,
+        type === AttributeFieldType.Formula ? "mb-1" : null,
+        disabled && "my-1"
+      ),
+      children: [
+        isLabel && /* @__PURE__ */ jsx("div", { className: "w-1/3", children: /* @__PURE__ */ jsx("span", { className: "mr-1 text-muted-foreground", children: label }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-2/3 flex-1 break-words", children: children ? children : /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            MaskDataInput,
+            {
+              placeholder,
+              inputType: type,
+              disabled,
+              onBlur,
+              value,
+              onChange: (e) => onChange(field, e.target.value),
+              className: "mb-0 mr-2 flex-1 border-x-0 border-b-0 border-t-0 bg-transparent text-start text-xs !shadow-none focus:border-b focus:ring-0",
+              type: "text",
+              maskDelay: maskDelay || 3e3,
+              onKeyDown
+            }
+          ),
+          options
+        ] }) }),
+        actions && actions
+      ]
+    }
+  );
+};
+var customer_info_item_default = CustomerInfoItem;
+export {
+  customer_info_item_default as default
+};

package/components/chat-route/chat-box/right-side/in-room-dialog.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { LogOut } from "lucide-react";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../../../ui/dialog.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../../../ui/table.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "../../../ui/alert-dialog.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../../ui/tooltip.js";
+import { Badge } from "../../../ui/badge.js";
+import { Button } from "../../../ui/button.js";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { renderUserRoleContext } from "@zenify-omni/chat-js/utils/auth.js";
+import { useTranslation } from "react-i18next";
+const MEMBERSHIP_TYPE_ORDER = [
+  "assigned",
+  "invited",
+  "subscribed",
+  "view_only",
+  "can_take_over",
+  "queue"
+];
+const membershipTypeLabel = (type, t) => {
+  switch (type) {
+    case "assigned":
+      return t("chat:label.membershipAssigned", { defaultValue: "Ph\u1EE5 tr\xE1ch" });
+    case "invited":
+      return t("chat:label.membershipInvited", { defaultValue: "\u0110\u01B0\u1EE3c m\u1EDDi" });
+    case "subscribed":
+      return t("chat:label.membershipSubscribed", {
+        defaultValue: "Ch\u1EDD tham gia"
+      });
+    case "view_only":
+      return t("chat:label.membershipViewOnly", { defaultValue: "Ch\u1EC9 xem" });
+    case "can_take_over":
+      return t("chat:label.membershipCanTakeOver", {
+        defaultValue: "C\u01B0\u1EDBp chat"
+      });
+    case "queue":
+      return t("chat:label.membershipQueue", {
+        defaultValue: "Nh\xF3m ph\xE2n ph\u1ED1i"
+      });
+    default:
+      return "";
+  }
+};
+const membershipLabels = (row, t) => {
+  const types = Array.isArray(row?.membership_types) ? row.membership_types : [];
+  return MEMBERSHIP_TYPE_ORDER.filter((type) => types.includes(type)).map(
+    (type) => ({ type, label: membershipTypeLabel(type, t) })
+  );
+};
+const InRoomDialog = ({
+  data = [],
+  isLoading = false,
+  title,
+  onRemove,
+  removingUserId,
+  canRemove = () => false,
+  removeDisabledReason = () => ""
+}) => {
+  const { t } = useTranslation();
+  const [pendingRemove, setPendingRemove] = useState(null);
+  const showActions = typeof onRemove === "function";
+  const columnCount = showActions ? 5 : 4;
+  const renderSourceCell = (row) => {
+    const labels = membershipLabels(row, t);
+    if (!labels.length) return /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "-" });
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: labels.map(({ type, label }) => /* @__PURE__ */ jsx(Badge, { variant: "chip", size: "small", children: label }, type)) });
+  };
+  const disabledRemoveReason = (row, { allowed, isRemoving }) => {
+    if (isRemoving) {
+      return t("chat:status.removingMember", {
+        defaultValue: "\u0110ang x\xF3a th\xE0nh vi\xEAn\u2026"
+      });
+    }
+    if (allowed) return "";
+    return removeDisabledReason(row) || t("chat:message.cannotRemoveMemberGeneric", {
+      defaultValue: "Kh\xF4ng x\xF3a \u0111\u01B0\u1EE3c th\xE0nh vi\xEAn n\xE0y"
+    });
+  };
+  const renderRemoveCell = (row) => {
+    const allowed = canRemove(row);
+    const isRemoving = removingUserId === row._id;
+    const disabled = !allowed || isRemoving;
+    const button = /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        onClick: () => setPendingRemove(row),
+        "aria-label": t("chat:action.removeMember", {
+          defaultValue: "X\xF3a kh\u1ECFi \u0111o\u1EA1n chat"
+        }),
+        children: /* @__PURE__ */ jsx(
+          LogOut,
+          {
+            size: 16,
+            className: allowed ? "text-[hsl(var(--icon-danger))]" : void 0
+          }
+        )
+      }
+    );
+    if (!disabled) return button;
+    return (
+      // delayDuration mặc định của Radix là 700ms — hover lướt qua không kịp
+      // thấy lý do, đúng cái người dùng cần đọc nhất. 150ms là gần như tức thì
+      // nhưng vẫn không bật lên khi chỉ đưa chuột ngang qua bảng.
+      /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", tabIndex: 0, children: button }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: disabledRemoveReason(row, { allowed, isRemoving }) })
+      ] }) })
+    );
+  };
+  let tableBody = null;
+  if (isLoading) {
+    tableBody = Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((__, cellIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }, cellIndex)) }, index));
+  } else if (data.length) {
+    tableBody = data.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "h-6 w-full", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "truncate text-sm font-medium hover:opacity-75",
+          title: row.name,
+          children: row.name || "-"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "h-6 w-full", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "truncate text-sm font-medium hover:opacity-75",
+          title: row.email,
+          children: row.email || "-"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "h-6 w-full", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium hover:opacity-75", children: renderUserRoleContext(row) || "-" }) }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: renderSourceCell(row) }),
+      showActions && /* @__PURE__ */ jsx(TableCell, { className: "w-[60px] text-right", children: renderRemoveCell(row) })
+    ] }, row._id));
+  } else {
+    tableBody = /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columnCount, className: "h-24 text-center", children: t("common:empty.noAgentFoundAlt", {
+      defaultValue: "Kh\xF4ng t\xECm th\u1EA5y chuy\xEAn vi\xEAn n\xE0o"
+    }) }) });
+  }
+  return /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[80%] overflow-auto sm:max-w-[60%]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { className: "w-full table-fixed", children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: t("common:label.name", { defaultValue: "T\xEAn" }) }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Email" }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("common:label.position", { defaultValue: "Ch\u1EE9c v\u1EE5" }) }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("chat:label.memberSource", { defaultValue: "Vai tr\xF2" }) }),
+        showActions && /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: tableBody })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      AlertDialog,
+      {
+        open: !!pendingRemove,
+        onOpenChange: (open) => {
+          if (!open) setPendingRemove(null);
+        },
+        children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx(AlertDialogTitle, { children: t("chat:title.confirmRemoveMember", {
+              defaultValue: "X\xF3a th\xE0nh vi\xEAn kh\u1ECFi \u0111o\u1EA1n chat"
+            }) }),
+            /* @__PURE__ */ jsx(AlertDialogDescription, { children: t("chat:message.confirmRemoveMemberDescription", {
+              name: pendingRemove?.name || "",
+              defaultValue: "B\u1EA1n c\xF3 ch\u1EAFc mu\u1ED1n x\xF3a {name} kh\u1ECFi \u0111o\u1EA1n chat? Ng\u01B0\u1EDDi n\xE0y s\u1EBD kh\xF4ng c\xF2n th\u1EA5y h\u1ED9i tho\u1EA1i."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel, { children: t("common:action.cancel", { defaultValue: "H\u1EE7y" }) }),
+            /* @__PURE__ */ jsx(
+              AlertDialogAction,
+              {
+                disabled: removingUserId === pendingRemove?._id,
+                onClick: () => {
+                  const target = pendingRemove;
+                  setPendingRemove(null);
+                  if (target) onRemove(target._id);
+                },
+                children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" })
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+var in_room_dialog_default = InRoomDialog;
+export {
+  in_room_dialog_default as default
+};

package/components/chat-route/chat-box/right-side/zalo-group/add-friend-dialog.js

@@ -0,0 +1,154 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../../../ui/dialog.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../../custom/avatar.js";
+import { User } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Textarea } from "../../../../ui/textarea.js";
+import { Button } from "../../../../custom/button.js";
+import { Separator } from "../../../../ui/separator.js";
+import { useState } from "react";
+import { toast } from "sonner";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { addFriendZalo, findUserZalo } from "@zenify-omni/chat-js/api/settings/channel.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function ZaloAddFriendDialog({
+  toZaloUser,
+  contactId,
+  pageId,
+  open,
+  handleClose
+}) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const user = getUser();
+  const textareaRef = useRef(null);
+  const [value, setValue] = useState("");
+  const [isSendingAddFriend, setIsSendingAddFriend] = useState(false);
+  const { data: fromZaloUser } = useQuery({
+    queryKey: ["ZaloAddFriendDialog:FindUserZalo", user?._id],
+    queryFn: async () => {
+      const { data } = await findUserZalo({
+        page_id: pageId,
+        user_id: user?._id,
+        zalo_customer_id: toZaloUser.user_id
+      });
+      return data?.data?.me || {};
+    }
+  });
+  useEffect(() => {
+    if (fromZaloUser) {
+      setValue(
+        i18n.t("chat:message.friendRequestGreeting", {
+          displayName: fromZaloUser.displayName,
+          defaultValue: "Xin ch\xE0o, m\xECnh l\xE0 {displayName}. K\u1EBFt b\u1EA1n v\u1EDBi m\xECnh nh\xE9"
+        })
+      );
+    }
+  }, [fromZaloUser]);
+  const handleSubmit = async () => {
+    const message = value.trim();
+    if (!message) {
+      textareaRef.current?.focus();
+      toast.error(
+        i18n.t("chat:message.messageRequired", {
+          defaultValue: "Tin nh\u1EAFn kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+        })
+      );
+      return;
+    }
+    setIsSendingAddFriend(true);
+    try {
+      const payload = {
+        user_id: user?._id,
+        first_message: message,
+        zalo_user_id: toZaloUser.user_id,
+        customer_id: contactId,
+        page_id: pageId
+      };
+      await addFriendZalo(payload);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_ZALOS_ALLOCATED]
+      });
+      toast.success(
+        i18n.t("chat:toast.sendZaloFriendRequestSuccess", {
+          defaultValue: "\u0110\xE3 g\u1EEDi l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n Zalo th\xE0nh c\xF4ng"
+        })
+      );
+    } catch (error) {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_ZALOS_ALLOCATED]
+      });
+      toast.error(
+        error.response?.data?.error?.message || i18n.t("chat:label.anErrorOccurredPleaseDouble", {
+          defaultValue: "C\xF3 l\u1ED7i x\u1EA3y ra, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+        })
+      );
+    } finally {
+      setIsSendingAddFriend(false);
+      handleClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[400px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.sendZaloFriendRequest", {
+        defaultValue: "G\u1EEDi k\u1EBFt b\u1EA1n Zalo"
+      }) }),
+      /* @__PURE__ */ jsx(
+        DialogDescription,
+        {
+          className: "hidden",
+          "aria-describedby": "send-new-message-dialog"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs(Avatar, { className: "h-[200px] w-[200px]", children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: toZaloUser.avatar }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(User, { className: "h-8 w-8" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "mt-2 text-center text-lg font-medium", children: maskData(toZaloUser.alias || toZaloUser.display_name) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            maxLength: 3e3,
+            ref: textareaRef,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder: t("chat:placeholder.typeMessage", {
+              defaultValue: "Nh\u1EADp tin nh\u1EAFn"
+            })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: isSendingAddFriend || !fromZaloUser,
+          loading: isSendingAddFriend,
+          onClick: handleSubmit,
+          children: t("chat:action.addFriend", { defaultValue: "K\u1EBFt b\u1EA1n" })
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  ZaloAddFriendDialog as default
+};

package/components/chat-route/chat-box/right-side/zalo-group/send-message-dialog.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../../../ui/dialog.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../../custom/avatar.js";
+import { User } from "lucide-react";
+import { useRef } from "react";
+import { Textarea } from "../../../../ui/textarea.js";
+import { Button } from "../../../../custom/button.js";
+import { Separator } from "../../../../ui/separator.js";
+import { useState } from "react";
+import { toast } from "sonner";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { sendMessageZalo } from "@zenify-omni/chat-js/api/settings/channel.js";
+import { navigate } from "../../../../../config/navigation.js";
+import { checkSendMessageStatus } from "@zenify-omni/chat-js/api/chat.js";
+import useChatStore from "../../../../../store/chat-store.js";
+import { useShallow } from "zustand/shallow";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function ZaloSendMessageDialog({
+  chatRoom,
+  zaloUser,
+  open,
+  handleClose
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const textareaRef = useRef(null);
+  const [value, setValue] = useState("");
+  const [isSendingMessage, setIsSendingMessage] = useState(false);
+  const [setLastRefreshTime] = useChatStore(
+    useShallow((state) => [state.setLastRefreshTime])
+  );
+  const pollingSendMessageStatus = async (msgId, sourceId) => {
+    const maxAttempts = 3;
+    let attempts = 0;
+    while (attempts < maxAttempts) {
+      const { data } = await checkSendMessageStatus({ msgId, sourceId });
+      if (data?.data?.completed && data?.data?.chat_room_id) {
+        return data?.data?.chat_room_id;
+      }
+      attempts++;
+      if (attempts < maxAttempts) {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+      }
+    }
+    return null;
+  };
+  const handleSubmit = async () => {
+    const message = value.trim();
+    if (!message) {
+      textareaRef.current?.focus();
+      toast.error(
+        i18n.t("chat:message.messageRequired", {
+          defaultValue: "Tin nh\u1EAFn kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+        })
+      );
+      return;
+    }
+    setIsSendingMessage(true);
+    try {
+      const payload = {
+        user_id: user?._id,
+        first_message: message,
+        user_zalo_id: zaloUser.user_id
+      };
+      if (chatRoom) {
+        payload.page_id = chatRoom.source_id;
+      }
+      const { data } = await sendMessageZalo(payload);
+      const {
+        msgId,
+        source_id: sourceId,
+        is_hidden: isHidden
+      } = data?.data || {};
+      if (!msgId) {
+        toast.error(
+          i18n.t("chat:toast.sendZaloMessageFail", {
+            defaultValue: "Kh\xF4ng th\u1EC3 g\u1EEDi tin nh\u1EAFn Zalo, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+          })
+        );
+      } else if (isHidden) {
+        toast.success(
+          i18n.t("chat:toast.sendZaloMessageSuccess", {
+            defaultValue: "\u0110\xE3 g\u1EEDi tin nh\u1EAFn Zalo th\xE0nh c\xF4ng"
+          })
+        );
+      } else {
+        const ticketId = await pollingSendMessageStatus(msgId, sourceId);
+        if (ticketId) {
+          toast.success(
+            i18n.t("chat:toast.sendZaloMessageSuccess", {
+              defaultValue: "\u0110\xE3 g\u1EEDi tin nh\u1EAFn Zalo th\xE0nh c\xF4ng"
+            })
+          );
+          setLastRefreshTime(Date.now());
+          navigate({
+            to: "/chat/$chatRoomId",
+            params: { chatRoomId: ticketId }
+          });
+        }
+      }
+    } catch (error) {
+      toast.error(
+        error.response?.data?.error?.message || i18n.t("chat:label.anErrorOccurredPleaseDouble", {
+          defaultValue: "C\xF3 l\u1ED7i x\u1EA3y ra, h\xE3y ki\u1EC3m tra l\u1EA1i th\xF4ng tin zalo"
+        })
+      );
+    } finally {
+      setIsSendingMessage(false);
+      handleClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[400px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.sendZaloMessage", {
+        defaultValue: "G\u1EEDi tin nh\u1EAFn Zalo"
+      }) }),
+      /* @__PURE__ */ jsx(
+        DialogDescription,
+        {
+          className: "hidden",
+          "aria-describedby": "send-new-message-dialog"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs(Avatar, { className: "h-[200px] w-[200px]", children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: zaloUser.avatar }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(User, { className: "h-8 w-8" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "mt-2 text-center text-lg font-medium", children: maskData(zaloUser.alias || zaloUser.display_name) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            maxLength: 3e3,
+            ref: textareaRef,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder: t("chat:placeholder.typeMessage", {
+              defaultValue: "Nh\u1EADp tin nh\u1EAFn"
+            })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }) }),
+      /* @__PURE__ */ jsx(Button, { loading: isSendingMessage, onClick: handleSubmit, children: t("common:action.sendMessage", { defaultValue: "G\u1EEDi tin nh\u1EAFn" }) })
+    ] })
+  ] }) });
+}
+export {
+  ZaloSendMessageDialog as default
+};