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

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

@@ -0,0 +1,995 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronDown, ChevronsUp } from "lucide-react";
+import { useShallow } from "zustand/shallow";
+import ChatMessage from "./chat-message.js";
+import useChatStore from "../../../store/chat-store.js";
+import { cn } from "../../../lib/utils.js";
+import { getUser, checkIsViewAsMode } from "@zenify-omni/chat-js/utils/auth.js";
+import SeparatorWithText from "../../custom/separator-with-text.js";
+import { navigate } from "../../../config/navigation.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { CreateZaloReminder } from "./zalo-reminder/create-zalo-reminder.js";
+import { MessageType, ActionMessageTypes } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { useSendZaloReminder } from "./zalo-reminder/use-send-zalo-reminder.js";
+import { getChatMessageList, markRoomRead } from "@zenify-omni/chat-js/api/chatroom.js";
+import { ChatFeedback } from "./chat-feedback/index.js";
+import { ChatInsight } from "./chat-feedback/chat-insight.js";
+import ForwardMessageModal from "./forward-message-modal.js";
+import PinnedMessages from "./pinned-messages.js";
+import { getPinnedMessages } from "@zenify-omni/chat-js/api/chat.js";
+import { isZaloPersonal } from "../util.js";
+import { useGetZaloAllocatedList } from "../../../hooks/use-setting-common.js";
+import { useTranslation } from "react-i18next";
+const REQUEST_LIMIT = 30;
+const AT_BOTTOM_THRESHOLD = 80;
+const AT_TOP_THRESHOLD = 80;
+const ACTION_LINE_SIZE = 40;
+const DEFAULT_MESSAGE_SIZE = 80;
+const ESTIMATED_SIZE_BY_TYPE = {
+  // Media: bubble cao do ảnh/video
+  [MessageType.IMAGE]: 280,
+  [MessageType.IMAGES]: 280,
+  [MessageType.VIDEO]: 280,
+  // Card bản đồ
+  [MessageType.LOCATION]: 200,
+  // Sticker
+  [MessageType.STICKER]: 160,
+  // Link preview (thumbnail + tiêu đề + mô tả)
+  [MessageType.LINK]: 140,
+  // Tin nhắn tiện ích / template
+  [MessageType.UTILITY_MESSAGES]: 120,
+  // Card nhắc hẹn (nội dung + thời gian)
+  [MessageType.CREATE_REMINDER]: 110,
+  [MessageType.UPDATE_REMINDER]: 110,
+  // Card đính kèm: file / danh thiếp / sản phẩm / lời mời kết bạn
+  [MessageType.FILE]: 90,
+  [MessageType.CONTACT_CARD]: 90,
+  [MessageType.PRODUCT]: 90,
+  [MessageType.FRIEND_REQUEST]: 90,
+  // Text / fallback
+  [MessageType.TEXT]: DEFAULT_MESSAGE_SIZE,
+  [MessageType.FALLBACK]: DEFAULT_MESSAGE_SIZE,
+  // Audio / cuộc gọi Zalo
+  [MessageType.AUDIO]: 60,
+  [MessageType.ZALO_CALL]: 60,
+  // Không hỗ trợ: render dòng ngắn
+  [MessageType.UNSUPPORTED]: 60
+};
+const estimateMessageSize = (message) => {
+  if (message?.isUnreadSeparator) return 44;
+  const type = message?.content?.type;
+  const base = ActionMessageTypes.includes(type) ? ACTION_LINE_SIZE : ESTIMATED_SIZE_BY_TYPE[type] ?? DEFAULT_MESSAGE_SIZE;
+  return message?.dateLabel ? base + 32 : base;
+};
+function ChatMessageList({
+  chatRoomId,
+  isChatAllowed,
+  chatRoomDetailReady,
+  className,
+  chatRoom,
+  ticket,
+  requester,
+  isZaloConnected,
+  // Additive, opt-in hooks for reuse outside the /chat route (e.g. Lumi).
+  // Defaults preserve the exact /chat behaviour.
+  redirectOnError = true,
+  renderMessageExtra,
+  // Optional override for the feedback dialog (defaults to the legacy ChatFeedback).
+  // Receives { open, onOpenChange, message }. Lumi plugs in its own real-submit form.
+  renderFeedbackDialog,
+  // Extra bottom padding for the scroll container (e.g. when an overlay notice sits above the input).
+  scrollPaddingBottom
+}) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const user = getUser();
+  const { data: zaloAllocatedList } = useGetZaloAllocatedList(user);
+  const [
+    ticketChatMessages,
+    setTicketChatMessages,
+    setCurrentChatId,
+    findReplySelected,
+    setFindReplySelected,
+    setHighlightMessageId,
+    setTokenForGetMessageApi,
+    feedbackMessage,
+    insightMessage,
+    forwardMessage,
+    setFeedbackMessage,
+    setInsightMessage,
+    setForwardMessage,
+    findPinSelected,
+    setFindPinSelected,
+    isSelectMode,
+    selectedMessages,
+    toggleSelectedMessage,
+    setSelectMode,
+    markRoomLoaded,
+    updateChatUnread
+  ] = useChatStore(
+    useShallow((state) => [
+      state.ticketChatMessages,
+      state.setTicketChatMessages,
+      state.setCurrentChatId,
+      state.findReplySelected,
+      state.setFindReplySelected,
+      state.setHighlightMessageId,
+      state.setTokenForGetMessageApi,
+      state.feedbackMessage,
+      state.insightMessage,
+      state.forwardMessage,
+      state.setFeedbackMessage,
+      state.setInsightMessage,
+      state.setForwardMessage,
+      state.findPinSelected,
+      state.setFindPinSelected,
+      state.isSelectMode,
+      state.selectedMessages,
+      state.toggleSelectedMessage,
+      state.setSelectMode,
+      state.markRoomLoaded,
+      state.updateChatUnread
+    ])
+  );
+  const isRoomLoaded = useChatStore(
+    (state) => !!state.loadedRooms?.[chatRoomId]
+  );
+  const { data: pinnedData } = useQuery({
+    queryKey: [QUERY_KEY.GET_PINNED_MESSAGES, chatRoomId, isZaloConnected],
+    queryFn: async () => {
+      const { data } = await getPinnedMessages(chatRoomId);
+      return data;
+    },
+    enabled: !!chatRoomId && isZaloPersonal(ticket) && isZaloConnected
+  });
+  const [isReminderDialogOpen, setIsReminderDialogOpen] = useState(false);
+  const [reminderData, setReminderData] = useState(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [remainingUnread, setRemainingUnread] = useState(0);
+  const [, setIsScrollingUp] = useState(false);
+  const [unreadConsumed, setUnreadConsumed] = useState(false);
+  const [isSeparatorInViewport, setIsSeparatorInViewport] = useState(false);
+  const [hasNewMsgWhileAway, setHasNewMsgWhileAway] = useState(false);
+  const [separatorHighlighted, setSeparatorHighlighted] = useState(false);
+  const separatorHighlightTimerRef = useRef(null);
+  const [isInitialBatch, setIsInitialBatch] = useState(false);
+  const hasAnimatedRef = useRef(false);
+  const batchAnimationTimerRef = useRef(null);
+  const shouldAnimateRef = useRef(false);
+  const [barProgress, setBarProgress] = useState(0);
+  const [barVisible, setBarVisible] = useState(false);
+  const barTimerRef = useRef(null);
+  const chatMessages = useMemo(
+    () => ticketChatMessages[chatRoomId] || [],
+    [ticketChatMessages, chatRoomId]
+  );
+  const ticketSource = useMemo(() => ticket?.source, [ticket]);
+  const containerRef = useRef(null);
+  const innerRef = useRef(null);
+  const roomIdRef = useRef(null);
+  const bottomMsgIdRef = useRef(null);
+  const wasAtBottomRef = useRef(true);
+  const loadingOlderRef = useRef(false);
+  const pendingAnchorRef = useRef(null);
+  const prevDistanceFromBottomRef = useRef(0);
+  const scrollAnchorRef = useRef(null);
+  const virtualItemsRef = useRef([]);
+  const isClearingRef = useRef(false);
+  const separatorTimerRef = useRef(null);
+  const prevRoomIdRef = useRef(null);
+  const firstNewMsgBoundaryRef = useRef(null);
+  const prevScrollTopRef = useRef(0);
+  const skipNextPaginationRef = useRef(false);
+  const hasInteractedRef = useRef(false);
+  const sepIdxRef = useRef(-1);
+  const scrollRafPendingRef = useRef(false);
+  const frameHadUserScrollRef = useRef(false);
+  const getItemKey = useCallback(
+    (index) => chatMessages[index]?._id,
+    [chatMessages]
+  );
+  const estimateSize = useCallback(
+    (index) => estimateMessageSize(chatMessages[index]),
+    [chatMessages]
+  );
+  const virtualizer = useVirtualizer({
+    count: chatMessages.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize,
+    overscan: 16,
+    getItemKey
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  virtualItemsRef.current = virtualItems;
+  const scrollToBottom = useCallback(
+    (behavior = "auto") => {
+      const last = chatMessages.length - 1;
+      if (last < 0) return;
+      virtualizer.scrollToIndex(last, { align: "end", behavior });
+      requestAnimationFrame(() => {
+        virtualizer.scrollToIndex(last, { align: "end", behavior: "auto" });
+        const el = containerRef.current;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    },
+    [chatMessages.length, virtualizer]
+  );
+  const scrollToUnreadOrBottom = useCallback(
+    (behavior = "auto") => {
+      const sepIdx = chatMessages.findIndex((m) => m.isUnreadSeparator);
+      if (sepIdx !== -1) {
+        virtualizer.scrollToIndex(sepIdx, { align: "start", behavior });
+        if (behavior !== "smooth") {
+          requestAnimationFrame(() => {
+            virtualizer.scrollToIndex(sepIdx, {
+              align: "start",
+              behavior: "auto"
+            });
+          });
+        }
+      } else {
+        scrollToBottom(behavior);
+      }
+    },
+    [chatMessages, virtualizer, scrollToBottom]
+  );
+  const computeRemainingUnread = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const sepIdx = sepIdxRef.current;
+    if (sepIdx === -1) {
+      setRemainingUnread(0);
+      return;
+    }
+    const msgs = useChatStore.getState().ticketChatMessages[chatRoomId] || [];
+    const totalUnread = msgs.length - sepIdx - 1;
+    const scrollBottom = el.scrollTop + el.clientHeight;
+    const seenCount = virtualItemsRef.current.filter(
+      (item) => item.index > sepIdx && item.start < scrollBottom
+    ).length;
+    const remaining = Math.max(0, totalUnread - seenCount);
+    setRemainingUnread(remaining);
+    if (remaining === 0 && hasInteractedRef.current) setUnreadConsumed(true);
+  }, [chatRoomId]);
+  const computeSeparatorVisibility = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const sepIdx = sepIdxRef.current;
+    if (sepIdx === -1) {
+      setIsSeparatorInViewport(false);
+      return;
+    }
+    const sepItem = virtualItemsRef.current.find(
+      (item) => item.index === sepIdx
+    );
+    if (!sepItem) {
+      setIsSeparatorInViewport(false);
+      return;
+    }
+    const inView = sepItem.start < el.scrollTop + el.clientHeight && sepItem.start + sepItem.size > el.scrollTop;
+    setIsSeparatorInViewport(inView);
+    if (inView && hasInteractedRef.current) setUnreadConsumed(true);
+  }, []);
+  useLayoutEffect(() => {
+    sepIdxRef.current = chatMessages.findIndex((m) => m.isUnreadSeparator);
+  }, [chatMessages]);
+  const { refetch, isRefetching } = useQuery({
+    queryKey: [QUERY_KEY.GET_CHAT_MESSAGES, { ticketId: chatRoomId }],
+    queryFn: async ({ signal }) => {
+      const currentToken = useChatStore.getState().tokenForGetMessageApi[chatRoomId] || null;
+      const roomUnreadHint = !currentToken ? useChatStore.getState().chatList.find((x) => x._id === chatRoomId)?.unread ?? 0 : 0;
+      const limit = Math.min(
+        200,
+        Math.max(REQUEST_LIMIT, roomUnreadHint + REQUEST_LIMIT)
+      );
+      const isSpy = checkIsViewAsMode();
+      const params = {
+        limit,
+        sort: "-created_at -_id",
+        type: "cursor",
+        cursor: currentToken,
+        ...currentToken ? { ignore_state: true } : {},
+        ...useChatStore.getState().isChatAllowed ? { isChatAllowed: true } : {},
+        ...isSpy ? { isSpy: true } : {}
+      };
+      try {
+        const { data } = await getChatMessageList(chatRoomId, {
+          params,
+          signal
+        });
+        if (signal.aborted) return [];
+        setTokenForGetMessageApi(chatRoomId, data?.next_cursor ?? null);
+        const { items } = data;
+        let readItems = [...items.reverse()];
+        const effectiveUnread = data.unread_count > 0 ? data.unread_count : roomUnreadHint;
+        const alreadyHasSeparator = (useChatStore.getState().ticketChatMessages[chatRoomId] || []).some((m) => m.isUnreadSeparator);
+        if (!currentToken && effectiveUnread > 0 && !alreadyHasSeparator) {
+          const separator = {
+            _id: `unread-separator-${chatRoomId}`,
+            isUnreadSeparator: true,
+            unreadCount: effectiveUnread,
+            normalized: true
+          };
+          const readCount = Math.max(0, readItems.length - effectiveUnread);
+          const readPart = readItems.slice(0, readCount);
+          separator.created_at = readPart[readPart.length - 1]?.created_at ?? (/* @__PURE__ */ new Date(0)).toISOString();
+          readItems = [...readPart, separator, ...readItems.slice(readCount)];
+        }
+        const latestMessages = useChatStore.getState().ticketChatMessages[chatRoomId] || [];
+        const newChatMessages = [...readItems, ...latestMessages];
+        if ((!data?.next_cursor || !items.length) && newChatMessages[0]) {
+          newChatMessages[0].isFirstMessage = true;
+        }
+        setTicketChatMessages(chatRoomId, newChatMessages);
+        if (useChatStore.getState().ticketChatMessages[chatRoomId]) {
+          markRoomLoaded(chatRoomId);
+        }
+        if (!currentToken && !isSpy && useChatStore.getState().isChatAllowed) {
+          useChatStore.getState().updateChatUnread(chatRoomId, { unread: 0 });
+          markRoomRead(chatRoomId, { isChatAllowed: true }).catch(() => {
+          });
+        }
+      } catch {
+        if (redirectOnError) {
+          setCurrentChatId(null);
+          navigate({ to: "/chat" });
+        }
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GET_CHAT_LIST] });
+      }
+      return [];
+    },
+    enabled: false
+  });
+  const handleScrollToMessage = (messageId) => {
+    const idx = chatMessages.findIndex((m) => m._id === messageId);
+    if (idx < 0) return;
+    virtualizer.scrollToIndex(idx, { align: "center" });
+    requestAnimationFrame(
+      () => virtualizer.scrollToIndex(idx, { align: "center" })
+    );
+    setHighlightMessageId(messageId);
+    setTimeout(() => {
+      setHighlightMessageId(null);
+    }, 3e3);
+  };
+  const fetchAndScrollTo = async (messageId, fetchingRef, clearState) => {
+    const existing = chatMessages?.find((e) => e._id === messageId);
+    if (existing) {
+      fetchingRef.current = false;
+      clearState(null);
+      handleScrollToMessage(existing._id);
+      return;
+    }
+    if (fetchingRef.current) return;
+    fetchingRef.current = true;
+    try {
+      const params = {
+        limit: 1e3,
+        sort: "-created_at -_id",
+        type: "cursor",
+        ignore_state: true,
+        until_id: messageId
+      };
+      const { data } = await getChatMessageList(chatRoomId, { params });
+      const { items } = data;
+      if (!items?.length) {
+        fetchingRef.current = false;
+        clearState(null);
+        return;
+      }
+      const latestMessages = useChatStore.getState().ticketChatMessages[chatRoomId] || [];
+      const newChatMessages = [...items.reverse(), ...latestMessages];
+      setTicketChatMessages(chatRoomId, newChatMessages);
+    } catch {
+      fetchingRef.current = false;
+      clearState(null);
+    }
+  };
+  const replyFetchingRef = useRef(false);
+  useEffect(() => {
+    if (!findReplySelected) return;
+    fetchAndScrollTo(findReplySelected, replyFetchingRef, setFindReplySelected);
+  }, [findReplySelected, chatMessages]);
+  const pinFetchingRef = useRef(false);
+  useEffect(() => {
+    if (!findPinSelected) return;
+    fetchAndScrollTo(findPinSelected, pinFetchingRef, setFindPinSelected);
+  }, [findPinSelected, chatMessages]);
+  useEffect(() => {
+    if (!chatRoomDetailReady) return;
+    if (useChatStore.getState().loadedRooms[chatRoomId]) {
+      const currentUnread = useChatStore.getState().chatList.find((c) => c._id === chatRoomId)?.unread ?? 0;
+      const cachedMsgs = useChatStore.getState().ticketChatMessages[chatRoomId] || [];
+      const msgsWithoutSep = cachedMsgs.filter((m) => !m.isUnreadSeparator);
+      if (currentUnread > 0 && currentUnread >= msgsWithoutSep.length) {
+        if (!checkIsViewAsMode() && useChatStore.getState().isChatAllowed) {
+          useChatStore.getState().updateChatUnread(chatRoomId, { unread: 0 });
+        }
+        setTokenForGetMessageApi(chatRoomId, null);
+        refetch();
+        return;
+      }
+      if (currentUnread > 0 && !checkIsViewAsMode() && useChatStore.getState().isChatAllowed) {
+        useChatStore.getState().updateChatUnread(chatRoomId, { unread: 0 });
+        markRoomRead(chatRoomId, { isChatAllowed: true }).catch(() => {
+        });
+      }
+      if (currentUnread > 0 && msgsWithoutSep.length > 0) {
+        const separator = {
+          _id: `unread-separator-${chatRoomId}`,
+          isUnreadSeparator: true,
+          unreadCount: currentUnread,
+          normalized: true
+        };
+        const readCount = Math.max(0, msgsWithoutSep.length - currentUnread);
+        const readPart = msgsWithoutSep.slice(0, readCount);
+        separator.created_at = readPart[readPart.length - 1]?.created_at ?? (/* @__PURE__ */ new Date(0)).toISOString();
+        setTicketChatMessages(chatRoomId, [
+          ...readPart,
+          separator,
+          ...msgsWithoutSep.slice(readCount)
+        ]);
+      } else if (msgsWithoutSep.length !== cachedMsgs.length) {
+        setTicketChatMessages(chatRoomId, msgsWithoutSep);
+      }
+      return;
+    }
+    setTokenForGetMessageApi(chatRoomId, null);
+    refetch();
+  }, [chatRoomId, chatRoomDetailReady]);
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState !== "hidden") return;
+      const state = useChatStore.getState();
+      const roomId = state.currentChatId;
+      if (!roomId || !state.isChatAllowed || checkIsViewAsMode()) return;
+      markRoomRead(roomId, { isChatAllowed: true }).catch(() => {
+      });
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, []);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    let scrollRafId = null;
+    const onScroll = () => {
+      const isProgrammatic = skipNextPaginationRef.current;
+      if (isProgrammatic) skipNextPaginationRef.current = false;
+      else frameHadUserScrollRef.current = true;
+      if (scrollRafPendingRef.current) return;
+      scrollRafPendingRef.current = true;
+      scrollRafId = requestAnimationFrame(() => {
+        scrollRafPendingRef.current = false;
+        const frameIsUserInitiated = frameHadUserScrollRef.current;
+        frameHadUserScrollRef.current = false;
+        const isGoingUp = element.scrollTop < prevScrollTopRef.current;
+        prevScrollTopRef.current = element.scrollTop;
+        const atBottom = element.scrollHeight - element.scrollTop - element.clientHeight < AT_BOTTOM_THRESHOLD;
+        wasAtBottomRef.current = atBottom;
+        setIsAtBottom(atBottom);
+        if (atBottom) setHasNewMsgWhileAway(false);
+        computeRemainingUnread();
+        computeSeparatorVisibility();
+        setIsScrollingUp(isGoingUp);
+        if (!atBottom && pendingAnchorRef.current == null) {
+          const scrollTop = element.scrollTop;
+          const firstVisible = virtualItemsRef.current.find(
+            (item) => item.start + item.size > scrollTop
+          );
+          if (firstVisible) {
+            scrollAnchorRef.current = {
+              key: firstVisible.key,
+              offset: scrollTop - firstVisible.start
+            };
+          }
+        }
+        if (!frameIsUserInitiated) return;
+        hasInteractedRef.current = true;
+        if (element.scrollTop > AT_TOP_THRESHOLD || loadingOlderRef.current)
+          return;
+        const messages = useChatStore.getState().ticketChatMessages[chatRoomId] || [];
+        if (!messages.length || messages[0]?.isFirstMessage) return;
+        loadingOlderRef.current = true;
+        pendingAnchorRef.current = messages[0]?._id;
+        prevDistanceFromBottomRef.current = element.scrollHeight - element.scrollTop;
+        refetch().finally(() => {
+          loadingOlderRef.current = false;
+        });
+      });
+    };
+    element.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      element.removeEventListener("scroll", onScroll);
+      if (scrollRafId != null) cancelAnimationFrame(scrollRafId);
+      scrollRafPendingRef.current = false;
+      frameHadUserScrollRef.current = false;
+    };
+  }, [chatRoomId, computeRemainingUnread, computeSeparatorVisibility]);
+  useEffect(() => {
+    computeRemainingUnread();
+    computeSeparatorVisibility();
+    const raf = requestAnimationFrame(() => {
+      computeRemainingUnread();
+      computeSeparatorVisibility();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [chatMessages, computeRemainingUnread, computeSeparatorVisibility]);
+  useLayoutEffect(() => {
+    const prevRoomId = prevRoomIdRef.current;
+    prevRoomIdRef.current = chatRoomId;
+    if (prevRoomId && prevRoomId !== chatRoomId) {
+      if (useChatStore.getState().isChatAllowed && !checkIsViewAsMode()) {
+        markRoomRead(prevRoomId, { isChatAllowed: true }).catch(() => {
+        });
+      }
+    }
+    const hasCachedMessages = (useChatStore.getState().ticketChatMessages[chatRoomId]?.length ?? 0) > 0;
+    isClearingRef.current = hasCachedMessages;
+    if (separatorTimerRef.current) {
+      clearTimeout(separatorTimerRef.current);
+      separatorTimerRef.current = null;
+    }
+    roomIdRef.current = null;
+    wasAtBottomRef.current = false;
+    replyFetchingRef.current = false;
+    pinFetchingRef.current = false;
+    pendingAnchorRef.current = null;
+    loadingOlderRef.current = false;
+    bottomMsgIdRef.current = null;
+    scrollAnchorRef.current = null;
+    prevScrollTopRef.current = 0;
+    skipNextPaginationRef.current = false;
+    frameHadUserScrollRef.current = false;
+    hasInteractedRef.current = false;
+    firstNewMsgBoundaryRef.current = null;
+    setUnreadConsumed(false);
+    setIsScrollingUp(false);
+    setIsSeparatorInViewport(false);
+    setHasNewMsgWhileAway(false);
+    hasAnimatedRef.current = false;
+    setIsInitialBatch(false);
+    clearTimeout(batchAnimationTimerRef.current);
+    shouldAnimateRef.current = !useChatStore.getState().loadedRooms[chatRoomId];
+  }, [chatRoomId]);
+  useLayoutEffect(() => {
+    if (chatMessages.length > 0 && !hasAnimatedRef.current && shouldAnimateRef.current) {
+      hasAnimatedRef.current = true;
+      setIsInitialBatch(true);
+      batchAnimationTimerRef.current = setTimeout(
+        () => setIsInitialBatch(false),
+        700
+      );
+    }
+  }, [chatMessages.length, chatRoomId]);
+  useLayoutEffect(() => {
+    if (!chatMessages.length) return;
+    if (roomIdRef.current !== chatRoomId) {
+      if (isClearingRef.current) {
+        isClearingRef.current = false;
+        if (useChatStore.getState().loadedRooms[chatRoomId]) {
+          roomIdRef.current = chatRoomId;
+          bottomMsgIdRef.current = chatMessages[chatMessages.length - 1]?._id;
+          wasAtBottomRef.current = true;
+          setIsAtBottom(true);
+          skipNextPaginationRef.current = true;
+          scrollToBottom("auto");
+          return;
+        }
+        wasAtBottomRef.current = false;
+        return;
+      }
+      roomIdRef.current = chatRoomId;
+      bottomMsgIdRef.current = chatMessages[chatMessages.length - 1]?._id;
+      wasAtBottomRef.current = true;
+      setIsAtBottom(true);
+      skipNextPaginationRef.current = true;
+      scrollToBottom("auto");
+      return;
+    }
+    const bottomMsg = chatMessages[chatMessages.length - 1];
+    if (bottomMsgIdRef.current !== bottomMsg?._id) {
+      const prevBottomId = bottomMsgIdRef.current;
+      bottomMsgIdRef.current = bottomMsg?._id;
+      if (wasAtBottomRef.current || bottomMsg?.chatter_id === user._id) {
+        firstNewMsgBoundaryRef.current = null;
+        scrollToBottom("auto");
+      } else {
+        setHasNewMsgWhileAway(true);
+        if (!firstNewMsgBoundaryRef.current && prevBottomId) {
+          firstNewMsgBoundaryRef.current = prevBottomId;
+        }
+        const boundaryId = firstNewMsgBoundaryRef.current;
+        if (boundaryId) {
+          const msgsWithoutSep = chatMessages.filter(
+            (m) => !m.isUnreadSeparator
+          );
+          const boundaryIdx = msgsWithoutSep.findLastIndex(
+            (m) => m._id === boundaryId
+          );
+          if (boundaryIdx !== -1) {
+            const newMsgs = msgsWithoutSep.slice(boundaryIdx + 1);
+            if (newMsgs.length > 0) {
+              const separator = {
+                _id: `unread-separator-${chatRoomId}`,
+                isUnreadSeparator: true,
+                unreadCount: newMsgs.length,
+                normalized: true,
+                created_at: msgsWithoutSep[boundaryIdx]?.created_at ?? (/* @__PURE__ */ new Date(0)).toISOString()
+              };
+              setTicketChatMessages(chatRoomId, [
+                ...msgsWithoutSep.slice(0, boundaryIdx + 1),
+                separator,
+                ...newMsgs
+              ]);
+              setUnreadConsumed(false);
+            }
+          }
+        }
+      }
+    }
+  }, [chatMessages, chatRoomId]);
+  useLayoutEffect(() => {
+    if (pendingAnchorRef.current == null) return;
+    const element = containerRef.current;
+    const inner = innerRef.current;
+    if (!element || !inner) return;
+    const anchor = () => {
+      element.scrollTop = element.scrollHeight - prevDistanceFromBottomRef.current;
+    };
+    anchor();
+    const ro = new ResizeObserver(anchor);
+    ro.observe(inner);
+    const timer = setTimeout(() => {
+      ro.disconnect();
+      pendingAnchorRef.current = null;
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+      ro.disconnect();
+    };
+  }, [chatMessages]);
+  const totalSize = virtualizer.getTotalSize();
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element || !chatMessages.length) return;
+    if (pendingAnchorRef.current != null) return;
+    if (wasAtBottomRef.current) {
+      element.scrollTop = element.scrollHeight;
+      return;
+    }
+    const anchor = scrollAnchorRef.current;
+    if (!anchor) return;
+    const anchoredItem = virtualItemsRef.current.find(
+      (item) => item.key === anchor.key
+    );
+    if (!anchoredItem) return;
+    const target = anchoredItem.start + anchor.offset;
+    if (Math.abs(element.scrollTop - target) > 1) {
+      element.scrollTop = target;
+    }
+  }, [totalSize]);
+  useEffect(() => {
+    if (!hasInteractedRef.current) return;
+    if (!isAtBottom && remainingUnread > 0) {
+      if (separatorTimerRef.current) {
+        clearTimeout(separatorTimerRef.current);
+        separatorTimerRef.current = null;
+      }
+      return;
+    }
+    if (separatorTimerRef.current) return;
+    const sepIdx = chatMessages.findIndex((m) => m.isUnreadSeparator);
+    if (sepIdx === -1) return;
+    const unreadMessages = chatMessages.slice(sepIdx + 1).filter((m) => m._id && !m.isUnreadSeparator);
+    if (!unreadMessages.length) return;
+    const roomId = chatRoomId;
+    const messageIds = unreadMessages.map((m) => m._id);
+    separatorTimerRef.current = setTimeout(() => {
+      separatorTimerRef.current = null;
+      if (useChatStore.getState().isChatAllowed && !checkIsViewAsMode()) {
+        markRoomRead(roomId, { messageIds, isChatAllowed: true }).catch(
+          () => {
+          }
+        );
+        updateChatUnread(roomId, { unread: 0 });
+      }
+    }, 1500);
+  }, [isAtBottom, remainingUnread, chatRoomId]);
+  const isLoading = chatMessages.length === 0 && !isRoomLoaded || isRefetching;
+  useEffect(() => {
+    clearTimeout(barTimerRef.current);
+    if (isLoading) {
+      setBarVisible(true);
+      setBarProgress(0);
+      let p = 0;
+      const tick = () => {
+        p = Math.min(88, p + Math.max(1.5, (88 - p) * 0.12));
+        setBarProgress(p);
+        if (p < 88) barTimerRef.current = setTimeout(tick, 50);
+      };
+      barTimerRef.current = setTimeout(tick, 30);
+    } else {
+      setBarProgress(100);
+      barTimerRef.current = setTimeout(() => setBarVisible(false), 350);
+    }
+    return () => clearTimeout(barTimerRef.current);
+  }, [isLoading]);
+  const { handleSendReminderRequest, handleDeleteReminder } = useSendZaloReminder(ticket);
+  const handleReminderAction = useCallback(
+    ({ data, type = MessageType.UPDATE_REMINDER }) => {
+      if (type === MessageType.UPDATE_REMINDER) {
+        setIsReminderDialogOpen(true);
+        if (data) {
+          setReminderData(data);
+        }
+      } else if (type === MessageType.DELETE_REMINDER) {
+        handleDeleteReminder(data);
+      }
+    },
+    [handleDeleteReminder]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative z-[5]", "min-h-0 flex-1", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: `h-full gap-2 overflow-y-scroll bg-chat-thread-bg px-4 pb-4 ${pinnedData?.data?.data?.length ? "pt-20" : ""}`,
+        style: scrollPaddingBottom ? { paddingBottom: scrollPaddingBottom } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            PinnedMessages,
+            {
+              isChatAllowed,
+              chatRoomId,
+              ticket,
+              pinnedData
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: innerRef,
+              style: {
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative"
+              },
+              children: virtualItems.map((virtualRow, visibleIdx) => {
+                const message = chatMessages[virtualRow.index];
+                if (!message) return null;
+                const staggerDelay = isInitialBatch ? Math.min((virtualItems.length - 1 - visibleIdx) * 25, 300) : 0;
+                const animationStyle = isInitialBatch ? {
+                  animationDelay: `${staggerDelay}ms`,
+                  animationFillMode: "both"
+                } : void 0;
+                if (message.isUnreadSeparator) {
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-index": virtualRow.index,
+                      ref: virtualizer.measureElement,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(isInitialBatch && "animate-message-cleave"),
+                          style: animationStyle,
+                          children: /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-3", children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  "h-px flex-1 bg-primary/30",
+                                  separatorHighlighted && "animate-pulse"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "rounded-full bg-primary/10 px-3 py-0.5 text-xs font-medium text-primary transition-all duration-300",
+                                  separatorHighlighted && "scale-105 bg-primary/25"
+                                ),
+                                children: t("chat:label.newMessages", {
+                                  defaultValue: "Tin nh\u1EAFn m\u1EDBi"
+                                })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  "h-px flex-1 bg-primary/30",
+                                  separatorHighlighted && "animate-pulse"
+                                )
+                              }
+                            )
+                          ] })
+                        }
+                      )
+                    },
+                    virtualRow.key
+                  );
+                }
+                const nextMessage = virtualRow.index < chatMessages.length - 1 ? chatMessages[virtualRow.index + 1] : null;
+                const isSelected = isSelectMode && selectedMessages.some((m) => m._id === message._id);
+                const isActionMessage = ActionMessageTypes.includes(
+                  message.content?.type
+                );
+                const canSelect = isSelectMode && !isActionMessage;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-index": virtualRow.index,
+                    ref: virtualizer.measureElement,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${virtualRow.start}px)`
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(isInitialBatch && "animate-message-cleave"),
+                        style: animationStyle,
+                        children: [
+                          message.dateLabel && /* @__PURE__ */ jsx(SeparatorWithText, { text: message.dateLabel }),
+                          /* @__PURE__ */ jsx(
+                            ChatMessage,
+                            {
+                              isChatAllowed,
+                              message,
+                              ticketSource,
+                              nextMessage,
+                              chatRoom: chatRoom ?? ticket,
+                              ticket,
+                              reminderAction: handleReminderAction,
+                              requester,
+                              pinnedData,
+                              zaloAllocatedList,
+                              isSelectMode: canSelect,
+                              isSelected: canSelect && isSelected,
+                              onSelect: canSelect ? toggleSelectedMessage : void 0
+                            }
+                          ),
+                          renderMessageExtra?.(message)
+                        ]
+                      }
+                    )
+                  },
+                  virtualRow.key
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
+    barVisible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-x-0 top-0 z-10 h-0.5 bg-primary/20 transition-opacity duration-200",
+          barProgress >= 100 && "opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-primary transition-[width] ease-out",
+            style: {
+              width: `${barProgress}%`,
+              transitionDuration: barProgress >= 100 ? "180ms" : "60ms"
+            }
+          }
+        )
+      }
+    ),
+    !unreadConsumed && chatMessages.some((m) => m.isUnreadSeparator) && !isSeparatorInViewport && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute right-1/2 top-4 z-50 translate-x-1/2 cursor-pointer duration-200 animate-in fade-in slide-in-from-top-2",
+        onClick: () => {
+          setUnreadConsumed(true);
+          scrollToUnreadOrBottom("auto");
+          clearTimeout(separatorHighlightTimerRef.current);
+          setSeparatorHighlighted(true);
+          separatorHighlightTimerRef.current = setTimeout(
+            () => setSeparatorHighlighted(false),
+            1500
+          );
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-white shadow-md ring-2 ring-white", children: [
+          /* @__PURE__ */ jsx(ChevronsUp, { size: 14, className: "animate-bounce" }),
+          t("chat:label.unreadMessages", { defaultValue: "Tin ch\u01B0a \u0111\u1ECDc" })
+        ] })
+      }
+    ),
+    !isAtBottom && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute bottom-4 right-1/2 z-50 flex translate-x-1/2 cursor-pointer flex-col items-center gap-1.5",
+        onClick: () => {
+          scrollToBottom("auto");
+          requestAnimationFrame(() => scrollToBottom("auto"));
+        },
+        "aria-label": "Scroll to bottom",
+        children: [
+          hasNewMsgWhileAway && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary px-3 py-1 text-xs font-bold text-white shadow-lg shadow-primary/40 ring-2 ring-white", children: t("chat:label.newMessages", { defaultValue: "Tin nh\u1EAFn m\u1EDBi" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-card shadow-md ring-1 ring-black/5 transition hover:bg-surface-subtle", children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 18,
+              className: "text-muted-foreground",
+              strokeWidth: 2.5
+            }
+          ) })
+        ]
+      }
+    ),
+    isReminderDialogOpen && /* @__PURE__ */ jsx(
+      CreateZaloReminder,
+      {
+        ticket,
+        requester,
+        reminderData,
+        open: isReminderDialogOpen,
+        onOpenChange: setIsReminderDialogOpen,
+        onSubmit: handleSendReminderRequest
+      }
+    ),
+    feedbackMessage && (renderFeedbackDialog ? renderFeedbackDialog({
+      open: !!feedbackMessage,
+      onOpenChange: (open) => setFeedbackMessage(open ? feedbackMessage : null),
+      message: feedbackMessage
+    }) : /* @__PURE__ */ jsx(
+      ChatFeedback,
+      {
+        open: !!feedbackMessage,
+        onOpenChange: (open) => setFeedbackMessage(open ? feedbackMessage : null),
+        message: feedbackMessage
+      }
+    )),
+    insightMessage && /* @__PURE__ */ jsx(
+      ChatInsight,
+      {
+        open: !!insightMessage,
+        onOpenChange: (open) => setInsightMessage(open ? insightMessage : null),
+        message: insightMessage
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ForwardMessageModal,
+      {
+        open: !!forwardMessage,
+        data: forwardMessage,
+        onClose: () => {
+          setForwardMessage(null);
+          setSelectMode(false);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ChatMessageList as default
+};