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

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

@@ -0,0 +1,1164 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../custom/button.js";
+import {
+  ImagePlus,
+  Paperclip,
+  CalendarIcon,
+  UserRoundPlus,
+  Users,
+  ALargeSmall,
+  Smile,
+  IdCard
+} from "lucide-react";
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
+} from "../../ui/tooltip.js";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  lazy,
+  Suspense
+} from "react";
+import { createPortal } from "react-dom";
+const EmojiPickerCombined = lazy(
+  () => import("./emoji-picker-combined.js").then((m) => ({
+    default: m.EmojiPickerCombined
+  }))
+);
+import FileInput from "../../custom/inputs/file-input.js";
+import { Textarea } from "../../ui/textarea.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { sendMessage } from "../../../utils/chat_socket.js";
+import { emitTyping } from "../../../utils/typing_socket.js";
+import {
+  getAcceptFileSize,
+  getAcceptFileType,
+  getAcceptImageType,
+  getImageInputMaxSize,
+  getFileExtension,
+  isImage,
+  isVideo,
+  shouldValidateImageInputSize,
+  uploadFileToCloudflare,
+  validateFileExtension,
+  validateFileSize,
+  validateImageInputSize
+} from "../../../utils/file.js";
+import useChatStore from "../../../store/chat-store.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { useGetZaloAllocatedList } from "../../../hooks/use-setting-common.js";
+import { cn, isEnableFBHumanTag } from "../../../lib/utils.js";
+import { SourceDetailTicket } from "@zenify-omni/chat-js/constants/chat-source.js";
+import {
+  CreateZaloReminder
+} from "./zalo-reminder/create-zalo-reminder.js";
+import {
+  useCheckAccessByPZaloConnection,
+  useSendZaloReminder
+} from "./zalo-reminder/use-send-zalo-reminder.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import {
+  showErrorToast,
+  showWarningToast
+} from "../../ui/sonner.js";
+import useModelAddZalo from "../zalo/modal-add-friend-zalo.js";
+import {
+  TypeModelAddZalo
+} from "../zalo/modal-add-friend-zalo.js";
+import ModalAddZalo from "../zalo/modal-action-zalo.js";
+import { CHATTER_TYPES } from "./constants.js";
+import {
+  isFacebook,
+  isZalo,
+  isZaloGroup,
+  isZaloPersonal,
+  isZaloGeneralChannel,
+  isTiktok
+} from "../util.js";
+import PastedFilePreview from "./pasted-file-preview.js";
+import { useImagePreviewQueue } from "../../../hooks/use-image-preview-queue.js";
+import { CommonGroupsModal } from "./common-groups-modal.js";
+import { SendContactCardModal } from "./send-contact-card-modal.js";
+import { ChatReplyPreview } from "./chat-reply-preview.js";
+import { sendZaloPersonalMessageWithFiles } from "@zenify-omni/chat-js/api/chat.js";
+import { v4 as uuidv4 } from "uuid";
+import { syncShopeeMessages } from "@zenify-omni/chat-js/api/shopee.js";
+import { ZaloPersonalEditor } from "./zalo-personal-editor.js";
+import { toast } from "sonner";
+import { useZaloMentionList } from "../../../hooks/use-zalo-mention-list.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const EMPTY = {};
+function ChatInput({ isChatAllowed: isChatAllowedProp, className, ...rest }) {
+  const isChatAllowedStore = useChatStore((state) => state.isChatAllowed);
+  const isChatAllowed = isChatAllowedProp ?? isChatAllowedStore;
+  if (!isChatAllowed) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 border-t border-t-border bg-card", className), children: /* @__PURE__ */ jsx(ChatInputInner, { ...rest }) });
+}
+function ChatInputInner({
+  isAddFriendZalo,
+  ticketId,
+  chatRoom = {},
+  requester,
+  pastedFiles = [],
+  setPastedFiles,
+  showPreview
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const replySelected = useChatStore((state) => state.replySelected);
+  const setReplySelected = useChatStore((state) => state.setReplySelected);
+  const setDraftMessages = useChatStore((state) => state.setDraftMessages);
+  const clearDraftMessage = useChatStore((state) => state.clearDraftMessage);
+  const [message, setMessage] = useState("");
+  const messageRef = useRef(message);
+  const [isReminderDialogOpen, setIsReminderDialogOpen] = useState(false);
+  const [isPastedFilesSending, setIsPastedFilesSending] = useState(false);
+  const [isCommonGroupsOpen, setIsCommonGroupsOpen] = useState(false);
+  const [isSendContactCardOpen, setIsSendContactCardOpen] = useState(false);
+  const [isToolbarVisible, setIsToolbarVisible] = useState(false);
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
+  const [emojiPickerPos, setEmojiPickerPos] = useState({ top: 0, left: 0 });
+  const emojiButtonRef = useRef(null);
+  const emojiPickerRef = useRef(null);
+  const handleToggleEmojiPicker = useCallback(() => {
+    if (!isEmojiPickerOpen && emojiButtonRef.current) {
+      const rect = emojiButtonRef.current.getBoundingClientRect();
+      setEmojiPickerPos({ top: rect.top, left: rect.left });
+    }
+    setIsEmojiPickerOpen((v) => !v);
+  }, [isEmojiPickerOpen]);
+  useEffect(() => {
+    if (!isEmojiPickerOpen) return;
+    const handleClickOutside = (e) => {
+      if (emojiPickerRef.current && !emojiPickerRef.current.contains(e.target) && emojiButtonRef.current && !emojiButtonRef.current.contains(e.target)) {
+        setIsEmojiPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isEmojiPickerOpen]);
+  const lastCustomerMsgTime = useChatStore((state) => {
+    const messages = state.ticketChatMessages[ticketId] || [];
+    const customerTypes = [CHATTER_TYPES.CONTACT, CHATTER_TYPES.CUSTOMER];
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (customerTypes.includes(msg.chatter_type) && msg.created_at) {
+        return new Date(msg.created_at).getTime();
+      }
+    }
+    return null;
+  });
+  const isLastMsgOver24h = useMemo(() => {
+    if (!lastCustomerMsgTime) return false;
+    return Date.now() - lastCustomerMsgTime > 24 * 60 * 60 * 1e3;
+  }, [lastCustomerMsgTime]);
+  const isHumanTagEnabled = isFacebook(chatRoom) && isEnableFBHumanTag();
+  const [isHumanTag, setIsHumanTag] = useState(false);
+  useEffect(() => {
+    setIsHumanTag(isHumanTagEnabled && isLastMsgOver24h);
+  }, [isHumanTagEnabled, isLastMsgOver24h]);
+  const fileInputRef = useRef(null);
+  const imageInputRef = useRef(null);
+  const typingTimerRef = useRef(null);
+  const textareaRef = useRef(null);
+  const tiptapRef = useRef(null);
+  const chatInputContainerRef = useRef(null);
+  useEffect(() => {
+    setReplySelected(null);
+  }, [setReplySelected, ticketId]);
+  useEffect(() => {
+    setIsToolbarVisible(false);
+  }, [ticketId]);
+  useEffect(() => {
+    messageRef.current = message;
+  }, [message]);
+  useEffect(() => {
+    const currentTicketId = ticketId;
+    return () => {
+      const text = messageRef.current;
+      if (text?.trim()) {
+        useChatStore.getState().setDraftMessages(currentTicketId, text);
+      } else {
+        useChatStore.getState().clearDraftMessage(currentTicketId);
+      }
+    };
+  }, [ticketId]);
+  useEffect(() => {
+    const draft = useChatStore.getState().draftMessages[ticketId];
+    if (draft) {
+      setMessage(draft);
+      messageRef.current = draft;
+      setTimeout(() => {
+        tiptapRef.current?.setContent(draft, []);
+      }, 50);
+    } else {
+      setMessage("");
+      messageRef.current = "";
+    }
+  }, [ticketId]);
+  useEffect(() => {
+    if (message !== messageRef.current) return;
+    const timer = setTimeout(() => {
+      if (message.trim()) {
+        setDraftMessages(ticketId, message);
+      } else {
+        clearDraftMessage(ticketId);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [message, ticketId, setDraftMessages, clearDraftMessage]);
+  const handleTyping = useCallback(() => {
+    if (!chatRoom?._id) return;
+    emitTyping(chatRoom._id, true);
+    clearTimeout(typingTimerRef.current);
+    typingTimerRef.current = setTimeout(() => {
+      emitTyping(chatRoom._id, false);
+    }, 3e3);
+  }, [chatRoom?._id]);
+  const handleEmojiSelect = useCallback(
+    (emojiOrCode) => {
+      const text = typeof emojiOrCode === "string" ? emojiOrCode : emojiOrCode.native ?? emojiOrCode.id;
+      if (isZaloPersonal(chatRoom)) {
+        tiptapRef.current?.insertText(text);
+      } else {
+        const el = textareaRef.current;
+        if (el) {
+          const start = el.selectionStart;
+          const end = el.selectionEnd;
+          const newVal = message.slice(0, start) + text + message.slice(end);
+          setMessage(newVal);
+          setTimeout(() => {
+            el.focus();
+            el.setSelectionRange(start + text.length, start + text.length);
+          }, 0);
+        } else {
+          setMessage((prev) => prev + text);
+        }
+      }
+    },
+    [chatRoom, message]
+  );
+  const clearFileInput = useCallback((inputRef) => {
+    if (inputRef?.current) {
+      inputRef.current.value = "";
+    }
+  }, []);
+  const uploadFile = useCallback(async (file) => {
+    try {
+      const contentType = file.type || "application/octet-stream";
+      const data = await uploadFileToCloudflare(file, {
+        content_type: contentType
+      });
+      return data || null;
+    } catch (error) {
+      throwException(error);
+      return null;
+    }
+  }, []);
+  const handleSendMessage = useCallback(
+    (msg, type = "text", fileName = null) => {
+      let content = msg?.trim();
+      if (!content) return;
+      const options = {
+        is_personal_zalo: chatRoom?.is_personal_zalo
+      };
+      if (isHumanTag) {
+        options.tag = "HUMAN_AGENT";
+      }
+      clearTimeout(typingTimerRef.current);
+      emitTyping(chatRoom?._id, false);
+      sendMessage(chatRoom, content, type, options, fileName);
+      setMessage("");
+      clearDraftMessage(ticketId);
+      setReplySelected(null);
+      if (isHumanTag) {
+        setIsHumanTag(false);
+      }
+    },
+    [chatRoom, isHumanTag, setReplySelected, clearDraftMessage, ticketId]
+  );
+  const handleSendZaloMessage = (text, styles, mentionData) => {
+    if (!text?.trim()) return;
+    const options = {};
+    if (styles?.length > 0) options.styles = styles;
+    if (mentionData) options._mentionData = mentionData;
+    clearTimeout(typingTimerRef.current);
+    emitTyping(chatRoom?._id, false);
+    sendMessage(chatRoom, text, "text", options, null);
+    clearDraftMessage(ticketId);
+    setReplySelected(null);
+  };
+  const { addFilesToPreview } = useImagePreviewQueue(chatRoom, setPastedFiles);
+  const handleSelectImage = useCallback(
+    (files) => {
+      const valid = [];
+      for (const file of Array.from(files)) {
+        const [ok, message2] = shouldValidateImageInputSize(file) ? validateImageInputSize(file, chatRoom) : validateFileSize(file, chatRoom);
+        if (!ok) {
+          showWarningToast(message2);
+          clearFileInput(imageInputRef);
+          return;
+        }
+        valid.push(file);
+      }
+      addFilesToPreview(valid);
+      clearFileInput(imageInputRef);
+    },
+    [chatRoom, addFilesToPreview, clearFileInput]
+  );
+  const handleSelectFile = useCallback(
+    (files) => {
+      addFilesToPreview(files);
+      clearFileInput(fileInputRef);
+    },
+    [addFilesToPreview, clearFileInput]
+  );
+  const { handleSendReminderRequest } = useSendZaloReminder(chatRoom);
+  const { success: isPersonalZaloConnection, _refetch } = useCheckAccessByPZaloConnection({ ticketId, userId: user?._id });
+  const handleOpenReminderDialog = useCallback(() => {
+    _refetch().then(() => {
+      if (!isPersonalZaloConnection) {
+        showErrorToast(
+          i18n.t("chat:message.noPersonalZaloLinked", {
+            defaultValue: "B\u1EA1n ch\u01B0a li\xEAn k\u1EBFt Zalo c\xE1 nh\xE2n"
+          })
+        );
+      } else {
+        setIsReminderDialogOpen(true);
+      }
+    }).catch(() => {
+      showErrorToast(
+        i18n.t("chat:message.noPersonalZaloLinked", {
+          defaultValue: "B\u1EA1n ch\u01B0a li\xEAn k\u1EBFt Zalo c\xE1 nh\xE2n"
+        })
+      );
+    });
+  }, [isPersonalZaloConnection, _refetch]);
+  const handlePasteMessage = (e) => {
+    const items = e.clipboardData.items;
+    const collected = [];
+    let fileValid = true;
+    let errorMessage = "";
+    for (let i = 0; i < items.length; i++) {
+      const entry = items[i].webkitGetAsEntry?.();
+      if (entry?.isDirectory) continue;
+      const item = items[i];
+      if (item.kind !== "file") continue;
+      const file = item.getAsFile?.();
+      if (!file) continue;
+      if (shouldValidateImageInputSize(file)) {
+        ;
+        [fileValid, errorMessage] = validateImageInputSize(file, chatRoom);
+      } else {
+        ;
+        [fileValid, errorMessage] = validateFileSize(file, chatRoom);
+      }
+      if (!fileValid) break;
+      [fileValid, errorMessage] = validateFileExtension(file, chatRoom);
+      if (!fileValid) break;
+      collected.push(file);
+    }
+    if (!fileValid) {
+      showWarningToast(errorMessage);
+    } else if (collected.length > 0) {
+      addFilesToPreview(collected);
+    }
+  };
+  const removeFile = (fileId) => {
+    setPastedFiles?.((prev) => {
+      const updated = prev.filter((f) => f.id !== fileId);
+      const removed = prev.find((f) => f.id === fileId);
+      if (removed) {
+        URL.revokeObjectURL(removed.preview);
+      }
+      return updated;
+    });
+  };
+  const sendPastedFilesImpl = useCallback(async () => {
+    const sendableFiles = pastedFiles.filter(
+      (f) => !f.compressionError && !f.isCompressing
+    );
+    const skippedFiles = pastedFiles.filter(
+      (f) => f.compressionError || f.isCompressing
+    );
+    const revokeSkippedPreviews = () => skippedFiles.forEach((f) => URL.revokeObjectURL(f.preview));
+    if (skippedFiles.length > 0) {
+      showWarningToast(
+        i18n.t("chat:message.imagesSkippedLimit", {
+          length: skippedFiles.length,
+          defaultValue: "{length} \u1EA3nh b\u1ECB b\u1ECF qua do ch\u01B0a t\u1ED1i \u01B0u xong ho\u1EB7c v\u01B0\u1EE3t gi\u1EDBi h\u1EA1n."
+        })
+      );
+    }
+    if (sendableFiles.length === 0) {
+      return;
+    }
+    if (isZaloPersonal(chatRoom)) {
+      const sourceId = chatRoom?.source_id;
+      const userZaloId = chatRoom?.source_room_id;
+      const { text: zaloText } = tiptapRef.current?.getData() ?? { text: "" };
+      const isGroup = isZaloGroup(chatRoom);
+      const BATCH_SIZE = 4;
+      const chunkArray = (arr, size) => {
+        const chunks = [];
+        for (let i = 0; i < arr.length; i += size) {
+          chunks.push(arr.slice(i, i + size));
+        }
+        return chunks;
+      };
+      const prepareBatch = async (batch, contentType, text = "") => {
+        const clientMsgId = uuidv4();
+        const settled = await Promise.allSettled(
+          batch.map(async (pastedFile) => {
+            if (pastedFile.isTemplateUrl) {
+              return { url: pastedFile.url, file: null };
+            }
+            try {
+              const url = await uploadFile(pastedFile.file);
+              return {
+                url,
+                file: pastedFile.file
+              };
+            } catch (err) {
+              throwException(err);
+            } finally {
+              URL.revokeObjectURL(pastedFile.preview);
+            }
+          })
+        );
+        const validResults = settled.filter((r) => r.status === "fulfilled" && r.value?.url).map((r) => r.value);
+        if (!validResults.length) return null;
+        const validUrls = validResults.map((r) => r.url);
+        const validFiles = validResults.map((r) => r.file).filter(Boolean);
+        const combinedUrl = validUrls.join("||");
+        const fileName = contentType === "image" ? null : validResults[0]?.file?.name ?? null;
+        const content = contentType === "image" ? {
+          type: "image",
+          text,
+          src: combinedUrl
+        } : {
+          type: contentType,
+          src: combinedUrl,
+          filename: fileName
+        };
+        useChatStore.getState().addNewMessage(chatRoom._id, {
+          _id: clientMsgId,
+          client_msg_id: clientMsgId,
+          room_id: chatRoom._id,
+          chatter_id: user?._id,
+          chatter_name: user?.name,
+          chatter_type: "agent",
+          source: chatRoom.source,
+          session_id: chatRoom.session?._id,
+          session: chatRoom.session,
+          content,
+          created_at: (/* @__PURE__ */ new Date()).toISOString(),
+          status: "pending"
+        });
+        return {
+          clientMsgId,
+          sourceId,
+          userZaloId,
+          isGroup,
+          text,
+          roomId: chatRoom._id,
+          sessionId: chatRoom.session?._id,
+          chatterId: user?._id,
+          chatterName: user?.name,
+          chatterAvatar: user?.avatar,
+          files: validFiles,
+          content
+        };
+      };
+      const callBatchApi = async ({ clientMsgId, ...apiParams }) => {
+        try {
+          const { data: body } = await sendZaloPersonalMessageWithFiles({
+            clientMsgId,
+            ...apiParams
+          });
+          if (body?.success) {
+            useChatStore.getState().updateMessageByClientMsgId(chatRoom._id, clientMsgId, {
+              _id: body.data.chat_message_id,
+              status: "success"
+            });
+          } else {
+            useChatStore.getState().updateMessageByClientMsgId(chatRoom._id, clientMsgId, {
+              _id: body.data.chat_message_id,
+              status: "failed"
+            });
+          }
+        } catch {
+          useChatStore.getState().updateMessageByClientMsgId(chatRoom._id, clientMsgId, {
+            status: "failed"
+          });
+        }
+      };
+      const templateEntries = sendableFiles.filter((f) => f.isTemplateUrl);
+      const regularEntries = sendableFiles.filter((f) => !f.isTemplateUrl);
+      const imageFiles = regularEntries.filter(
+        (f) => isImage(f.type, getFileExtension(f.name))
+      );
+      const videoFiles = regularEntries.filter(
+        (f) => !isImage(f.type, getFileExtension(f.name)) && isVideo(f.type, getFileExtension(f.name))
+      );
+      const otherFiles = regularEntries.filter(
+        (f) => !isImage(f.type, getFileExtension(f.name)) && !isVideo(f.type, getFileExtension(f.name))
+      );
+      const imageBatches = chunkArray(imageFiles, BATCH_SIZE);
+      const apiDescriptors = [];
+      const sendTextSeparately = !(regularEntries.length === 1 && imageFiles.length === 1);
+      if (sendTextSeparately && zaloText?.trim()) {
+        handleSendMessage(zaloText, "text");
+      }
+      let textSent = sendTextSeparately;
+      for (const batch of imageBatches) {
+        const descriptor = await prepareBatch(
+          batch,
+          "image",
+          textSent ? "" : zaloText
+        );
+        if (descriptor) {
+          apiDescriptors.push(descriptor);
+          textSent = true;
+        }
+      }
+      const singleFileEntries = [
+        ...videoFiles.map((file) => ({ file, contentType: "video" })),
+        ...otherFiles.map((file) => ({ file, contentType: "file" }))
+      ];
+      for (const { file, contentType } of singleFileEntries) {
+        const descriptor = await prepareBatch([file], contentType, "");
+        if (descriptor) {
+          apiDescriptors.push(descriptor);
+        }
+      }
+      if (templateEntries.length > 0) {
+        if (!textSent && zaloText?.trim()) {
+          handleSendMessage(zaloText, "text");
+          textSent = true;
+        }
+        templateEntries.forEach((f) => {
+          const ext = getFileExtension(f.name);
+          let msgType = "file";
+          if (isImage(f.type, ext)) msgType = "image";
+          else if (isVideo(f.type, ext)) msgType = "video";
+          const fileName = msgType === "file" ? null : f.name;
+          handleSendMessage(f.url, msgType, fileName);
+        });
+      }
+      if (!apiDescriptors.length && !templateEntries.length) {
+        return;
+      }
+      tiptapRef.current?.clear();
+      clearDraftMessage(ticketId);
+      revokeSkippedPreviews();
+      setPastedFiles?.([]);
+      (async () => {
+        for (const descriptor of apiDescriptors) {
+          await callBatchApi(descriptor);
+        }
+      })();
+      return;
+    } else {
+      const files = [];
+      const images = [];
+      for (const pastedFile of sendableFiles) {
+        if (pastedFile.isTemplateUrl) {
+          if (isImage(pastedFile.type, getFileExtension(pastedFile.name))) {
+            images.push(pastedFile.url);
+          } else {
+            files.push({ url: pastedFile.url, name: pastedFile.name });
+          }
+          continue;
+        }
+        try {
+          const uploadedUrl = await uploadFile(pastedFile.file);
+          if (uploadedUrl) {
+            if (isImage(pastedFile.type, getFileExtension(pastedFile.name))) {
+              images.push(uploadedUrl);
+            } else {
+              files.push({ url: uploadedUrl, name: pastedFile.name });
+            }
+          }
+        } catch (error) {
+          throwException(error);
+        } finally {
+          URL.revokeObjectURL(pastedFile.preview);
+        }
+      }
+      if (images.length > 0) {
+        if (isZalo(chatRoom)) {
+          images.forEach((url) => handleSendMessage(url, "image"));
+        } else {
+          handleSendMessage(images.join("||"), "image");
+        }
+      }
+      files.forEach(({ url, name }) => handleSendMessage(url, "file", name));
+      const text = textareaRef.current?.value?.trim();
+      if (text) {
+        handleSendMessage(text, "text");
+      }
+      revokeSkippedPreviews();
+      setPastedFiles?.([]);
+    }
+  }, [
+    chatRoom,
+    setPastedFiles,
+    user?.name,
+    user?._id,
+    user?.avatar,
+    pastedFiles,
+    clearDraftMessage,
+    ticketId,
+    uploadFile,
+    handleSendMessage
+  ]);
+  const sendingRoomIdsRef = useRef(/* @__PURE__ */ new Set());
+  const currentRoomIdRef = useRef(chatRoom?._id);
+  useEffect(() => {
+    currentRoomIdRef.current = chatRoom?._id;
+    setIsPastedFilesSending(sendingRoomIdsRef.current.has(chatRoom?._id));
+  }, [chatRoom?._id]);
+  const handleSendPastedFiles = useCallback(async () => {
+    const roomId = chatRoom?._id;
+    const inflightRooms = sendingRoomIdsRef.current;
+    if (inflightRooms.has(roomId)) return;
+    inflightRooms.add(roomId);
+    setIsPastedFilesSending(true);
+    try {
+      await sendPastedFilesImpl();
+    } finally {
+      inflightRooms.delete(roomId);
+      if (currentRoomIdRef.current === roomId) setIsPastedFilesSending(false);
+    }
+  }, [sendPastedFilesImpl, chatRoom?._id]);
+  const clearAllFiles = () => {
+    pastedFiles.forEach((f) => URL.revokeObjectURL(f.preview));
+    setPastedFiles?.([]);
+  };
+  const handleSendPastedFilesRef = useRef(handleSendPastedFiles);
+  useEffect(() => {
+    handleSendPastedFilesRef.current = handleSendPastedFiles;
+  }, [handleSendPastedFiles]);
+  useEffect(() => {
+    const container = chatInputContainerRef.current;
+    if (!pastedFiles?.length || !container) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Enter" || e.shiftKey) return;
+      e.preventDefault();
+      e.stopPropagation();
+      handleSendPastedFilesRef.current();
+    };
+    container.addEventListener("keydown", onKeyDown, true);
+    return () => container.removeEventListener("keydown", onKeyDown, true);
+  }, [pastedFiles?.length]);
+  const [isMentionTriggered, setIsMentionTriggered] = useState(false);
+  useEffect(() => {
+    setIsMentionTriggered(false);
+  }, [chatRoom?._id]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(typingTimerRef.current);
+      if (chatRoom?._id) emitTyping(chatRoom._id, false);
+    };
+  }, [chatRoom?._id]);
+  const typingUsers = useChatStore(
+    (state) => state.typingUsers[chatRoom?._id] ?? EMPTY
+  );
+  const typingUserList = Object.values(typingUsers);
+  const typingLabel = typingUserList.length > 0 ? t("chat:status.typing", {
+    defaultValue: "{name} \u0111ang nh\u1EADp",
+    name: `${typingUserList.slice(0, 3).map((u) => u.name).join(", ")}${typingUserList.length > 3 ? ` +${typingUserList.length - 3}` : ""}`
+  }) : null;
+  const mentionList = useZaloMentionList(chatRoom, {
+    enabled: isMentionTriggered
+  });
+  const isShowGroupModal = (() => {
+    if (isZaloGroup(chatRoom)) return false;
+    if (isZaloPersonal(chatRoom) && !isZaloGeneralChannel(chatRoom) && chatRoom?.source_id === user?.zalo_id)
+      return true;
+    return isZaloGeneralChannel(chatRoom);
+  })();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chatInputContainerRef,
+      className: cn(
+        "relative flex w-full flex-none flex-col",
+        isZaloPersonal(chatRoom) && isToolbarVisible || replySelected ? "min-h-[248px]" : "min-h-[188px]"
+      ),
+      children: [
+        showPreview && pastedFiles?.length > 0 && /* @__PURE__ */ jsx(
+          PastedFilePreview,
+          {
+            pastedFiles,
+            onRemove: removeFile,
+            onRemoveAll: clearAllFiles,
+            onSendPastedFiles: handleSendPastedFiles,
+            isSending: isPastedFilesSending
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-1 flex-col overflow-hidden rounded-md border-input", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-1 flex-col", children: [
+            replySelected && /* @__PURE__ */ jsx(ChatReplyPreview, { isHideReplyPreview: true, ticketId }),
+            isHumanTagEnabled && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2 border-b border-b-border px-3 py-1.5", children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isHumanTag,
+                  onCheckedChange: setIsHumanTag
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "select-none text-xs text-muted-foreground", children: t("chat:action.sendWithHumanAgentTag", {
+                defaultValue: "G\u1EEDi tin nh\u1EAFn v\u1EDBi Human Agent tag"
+              }) })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "relative flex h-full w-full flex-1", children: isZaloPersonal(chatRoom) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ZaloPersonalEditor,
+                {
+                  ref: tiptapRef,
+                  mentionList: isZaloGroup(chatRoom) ? mentionList : null,
+                  onMentionTrigger: isZaloGroup(chatRoom) ? () => setIsMentionTriggered(true) : void 0,
+                  onSend: handleSendZaloMessage,
+                  onPaste: handlePasteMessage,
+                  onUpdate: (text) => {
+                    messageRef.current = text;
+                    if (text.trim()) {
+                      setDraftMessages(ticketId, text);
+                    } else {
+                      clearDraftMessage(ticketId);
+                    }
+                    handleTyping();
+                  },
+                  showToolbar: isToolbarVisible
+                }
+              ),
+              typingLabel && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-2 left-3 flex items-center gap-1.5 duration-300 animate-in fade-in", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: typingLabel }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "0ms"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "200ms"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "400ms"
+                    }
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ref: textareaRef,
+                  id: "textarea-chat-input",
+                  rows: 4,
+                  value: message,
+                  onFocus: () => {
+                    if (chatRoom?.source === SourceDetailTicket.SHOPEE) {
+                      const messages = useChatStore.getState().ticketChatMessages[ticketId] || [];
+                      const oldestMsg = messages[0];
+                      syncShopeeMessages({
+                        roomId: ticketId,
+                        pageId: chatRoom?.source_id,
+                        shopeeConversationId: chatRoom?.source_room_id,
+                        oldestMessageTimestamp: oldestMsg?.created_at
+                      }).catch((error) => {
+                        console.error(error);
+                      });
+                    }
+                  },
+                  onPaste: handlePasteMessage,
+                  onChange: (e) => {
+                    const val = e.target.value;
+                    setMessage(val);
+                    handleTyping();
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                      e.preventDefault();
+                      handleSendMessage(message);
+                    }
+                  },
+                  placeholder: t("chat:placeholder.typeMessage", {
+                    defaultValue: "Nh\u1EADp tin nh\u1EAFn"
+                  }),
+                  className: "flex-1 resize-none rounded-md !border-none p-3 !shadow-none focus-visible:ring-0"
+                }
+              ),
+              typingLabel && !message && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-2 left-3 flex items-center gap-1.5 duration-300 animate-in fade-in", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: typingLabel }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "0ms"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "200ms"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
+                    style: {
+                      animation: "typing-bounce 1.2s infinite ease-in-out",
+                      animationDelay: "400ms"
+                    }
+                  }
+                )
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 px-3 py-2", children: [
+            !isTiktok(chatRoom) && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: "h-8 w-8 p-0",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        htmlFor: "file-upload",
+                        className: "flex cursor-pointer items-center justify-center",
+                        children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4 stroke-muted-foreground" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FileInput,
+                      {
+                        ref: fileInputRef,
+                        id: "file-upload",
+                        className: "hidden",
+                        multiple: true,
+                        onChange: handleSelectFile,
+                        acceptType: getAcceptFileType(chatRoom),
+                        maxFileSize: getAcceptFileSize(chatRoom)
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:label.file", { defaultValue: "T\u1EC7p" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: "h-8 w-8 p-0",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        htmlFor: "image-upload",
+                        className: "flex cursor-pointer items-center justify-center",
+                        children: /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4 stroke-muted-foreground" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FileInput,
+                      {
+                        ref: imageInputRef,
+                        id: "image-upload",
+                        className: "hidden",
+                        multiple: true,
+                        acceptType: getAcceptImageType(chatRoom),
+                        maxFileSize: getImageInputMaxSize(chatRoom),
+                        onChange: handleSelectImage
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:label.image", { defaultValue: "\u1EA2nh" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ref: emojiButtonRef,
+                    size: "sm",
+                    type: "button",
+                    variant: "ghost",
+                    className: cn(
+                      "h-8 w-8 p-0",
+                      isEmojiPickerOpen && "bg-accent text-accent-foreground"
+                    ),
+                    onClick: handleToggleEmojiPicker,
+                    children: /* @__PURE__ */ jsx(Smile, { className: "h-4 w-4 stroke-muted-foreground" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:label.emotion", { defaultValue: "C\u1EA3m x\xFAc" }) })
+              ] }),
+              isEmojiPickerOpen && createPortal(
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: emojiPickerRef,
+                    style: {
+                      position: "fixed",
+                      top: emojiPickerPos.top,
+                      left: emojiPickerPos.left,
+                      transform: "translateY(-100%)",
+                      zIndex: 9999
+                    },
+                    children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                      EmojiPickerCombined,
+                      {
+                        onSelect: handleEmojiSelect,
+                        showZaloTab: isZaloPersonal(chatRoom)
+                      }
+                    ) })
+                  }
+                ),
+                document.body
+              )
+            ] }),
+            isZaloPersonal(chatRoom) && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: "h-8 w-8 p-0",
+                  onClick: handleOpenReminderDialog,
+                  children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 stroke-muted-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:field.appointment", { defaultValue: "L\u1ECBch h\u1EB9n" }) })
+            ] }),
+            user?.has_permission_login_zalo_qr && isAddFriendZalo && isZaloPersonal(chatRoom) && !isZaloGroup(chatRoom) && /* @__PURE__ */ jsx(BtnAddFriend, { contact: requester, chat_room: chatRoom }),
+            isShowGroupModal && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: "h-8 w-8 p-0",
+                  onClick: () => setIsCommonGroupsOpen(true),
+                  children: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4 stroke-muted-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:field.commonGroup", {
+                defaultValue: "Nh\xF3m chung"
+              }) })
+            ] }),
+            isZaloPersonal(chatRoom) && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: "h-8 w-8 p-0",
+                  onClick: () => setIsSendContactCardOpen(true),
+                  children: /* @__PURE__ */ jsx(IdCard, { className: "h-4 w-4 stroke-muted-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: i18n.t("chat:label.guiDanhThiep", {
+                defaultValue: "G\u1EEDi danh thi\u1EBFp"
+              }) })
+            ] }),
+            isZaloPersonal(chatRoom) && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  className: cn(
+                    "h-8 w-8 p-0",
+                    isToolbarVisible && "bg-accent text-accent-foreground"
+                  ),
+                  onClick: () => setIsToolbarVisible((v) => !v),
+                  children: /* @__PURE__ */ jsx(ALargeSmall, { className: "h-4 w-4 stroke-muted-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Format" })
+            ] }),
+            isReminderDialogOpen && /* @__PURE__ */ jsx(
+              CreateZaloReminder,
+              {
+                ticket: chatRoom,
+                requester,
+                reminderData: null,
+                open: isReminderDialogOpen,
+                onOpenChange: setIsReminderDialogOpen,
+                onSubmit: handleSendReminderRequest
+              }
+            ),
+            isCommonGroupsOpen && /* @__PURE__ */ jsx(
+              CommonGroupsModal,
+              {
+                open: isCommonGroupsOpen,
+                onOpenChange: setIsCommonGroupsOpen,
+                zaloId: chatRoom?.source_id,
+                customerZaloId: chatRoom?.source_room_id,
+                customerName: requester?.name || requester?.zalo_name,
+                customerAvatar: requester?.avatar,
+                customerCrmType: requester?.crm_type
+              }
+            ),
+            isSendContactCardOpen && /* @__PURE__ */ jsx(
+              SendContactCardModal,
+              {
+                open: isSendContactCardOpen,
+                onOpenChange: setIsSendContactCardOpen,
+                zaloId: chatRoom?.source_id,
+                chatRoom
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                className: "h-8 px-4",
+                onClick: () => {
+                  if (isZaloPersonal(chatRoom)) {
+                    const data = tiptapRef.current?.getData();
+                    if (data?.text?.trim()) {
+                      handleSendZaloMessage(
+                        data.text,
+                        data.styles,
+                        data.mentionData
+                      );
+                      tiptapRef.current?.clear();
+                    }
+                  } else {
+                    handleSendMessage(message);
+                  }
+                },
+                children: t("common:action.send", { defaultValue: "G\u1EEDi" })
+              }
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+const BtnAddFriend = ({ contact, chat_room }) => {
+  const { t } = useTranslation();
+  const user = getUser();
+  const [loadingSendMess, setLoadingSendMess] = useState(false);
+  const [loadingZalo, setLoadingZalo] = useState(false);
+  const { data: zaloAllocatedList } = useGetZaloAllocatedList(user);
+  const {
+    zaloPop,
+    setZaloPop,
+    textareaRef,
+    handleSubmit,
+    getTitle,
+    getTitleButon,
+    handleFindUserZalo
+  } = useModelAddZalo({
+    contact,
+    ticket: chat_room,
+    setLoadingZalo,
+    setLoadingSendMess
+  });
+  const checkZaloLimit = () => {
+    if (zaloAllocatedList) {
+      const zaloInfo = zaloAllocatedList.find(
+        (e) => e.zalo_id === chat_room?.source_id
+      );
+      if (!zaloInfo || zaloInfo.sent_friend_requests >= zaloInfo.limit_send_friend_request) {
+        toast.error(
+          i18n.t("chat:message.dailyFriendRequestLimitReached", {
+            defaultValue: "T\xE0i kho\u1EA3n \u0111\xE3 \u0111\u1EA1t \u0111\u1EBFn gi\u1EDBi h\u1EA1n k\u1EBFt b\u1EA1n trong ng\xE0y"
+          })
+        );
+        return false;
+      }
+    }
+    return true;
+  };
+  const handleSubmitRequest = () => {
+    if (!checkZaloLimit()) return;
+    handleFindUserZalo(null, TypeModelAddZalo.AddFriendInChat, {
+      personal_zalo_id: chat_room.source_room_id,
+      page_id: chat_room?.source_id
+    }).then(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block w-fit", children: [
+    /* @__PURE__ */ jsx(
+      ModalAddZalo,
+      {
+        isLoading: loadingSendMess,
+        zaloPop,
+        setZaloPop,
+        getTitle,
+        textareaRef,
+        getTitleButon,
+        handleSubmit
+      }
+    ),
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: loadingZalo,
+          variant: "ghost",
+          size: "sm",
+          className: "h-8 w-8 p-0",
+          onClick: handleSubmitRequest,
+          children: /* @__PURE__ */ jsx(UserRoundPlus, { className: "h-4 w-4 stroke-muted-foreground" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("chat:action.addFriend", { defaultValue: "K\u1EBFt b\u1EA1n" }) })
+    ] })
+  ] });
+};
+export {
+  ChatInput
+};