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

package/components/chat-route/chat-list/chat-list-item.js

@@ -0,0 +1,370 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  ChatFilterAssignStatus,
+  ChatSortValue
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import useChatSort from "../../../hooks/use-chat-sort.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/react/shallow";
+import ChatItem from "./chat-item.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { buildQueryParams } from "./util.js";
+import { navigate } from "../../../config/navigation.js";
+import { LoaderCircle } from "lucide-react";
+import { Skeleton } from "../../ui/skeleton.js";
+import { getChatRoomList, markRoomUnread } from "@zenify-omni/chat-js/api/chatroom.js";
+import { pinChatRoom, unpinChatRoom } from "@zenify-omni/chat-js/api/chat.js";
+import { toast } from "sonner";
+import {
+  getFilteredChatsForDisplay,
+  getReceivedSessionPayload,
+  getClosedSessionPayload,
+  isChatSelected
+} from "../../../store/chat-store-helpers.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function ChatListSkeleton({ count = 12 }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 border-b border-border/50 px-3 py-3",
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/5 rounded" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12 rounded" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4 rounded" })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+function ChatListEmpty() {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex h-[80%] items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("chat:empty.noConversationHistory", {
+    defaultValue: "Ch\u01B0a c\xF3 h\u1ED9i tho\u1EA1i n\xE0o trong l\u1ECBch s\u1EED c\u1EE7a b\u1EA1n"
+  }) }) });
+}
+const getTime = (value) => new Date(value).getTime() || 0;
+const compareBySort = (a, b, sort) => {
+  switch (sort) {
+    case ChatSortValue.CreatedDesc:
+      return getTime(b.created_at) - getTime(a.created_at);
+    case ChatSortValue.CreatedAsc:
+      return getTime(a.created_at) - getTime(b.created_at);
+    default:
+      return getTime(b.last_msg?.time) - getTime(a.last_msg?.time);
+  }
+};
+const sortChats = (chats, pinIds, sort) => {
+  const unansweredFirst = sort === ChatSortValue.UnansweredFirst;
+  return [...chats].sort((a, b) => {
+    const isAPinned = pinIds.includes(a._id);
+    const isBPinned = pinIds.includes(b._id);
+    if (isAPinned && !isBPinned) return -1;
+    if (!isAPinned && isBPinned) return 1;
+    if (isAPinned && isBPinned)
+      return pinIds.indexOf(a._id) - pinIds.indexOf(b._id);
+    if (unansweredFirst) {
+      if (a.is_unanswered && !b.is_unanswered) return -1;
+      if (!a.is_unanswered && b.is_unanswered) return 1;
+    }
+    return compareBySort(a, b, sort);
+  });
+};
+const EMPTY_PIN_IDS = [];
+function ChatListItem({ limit = 0, onMetaChange }) {
+  const isPreview = limit > 0;
+  const { t } = useTranslation();
+  const containerRef = useRef(null);
+  const scrollPositionsRef = useRef({
+    [ChatFilterAssignStatus.Received]: 0,
+    [ChatFilterAssignStatus.NotReceived]: 0,
+    [ChatFilterAssignStatus.Closed]: 0
+  });
+  const {
+    isReceivedTabLoading,
+    isNotReceivedTabLoading,
+    isClosedTabLoading,
+    currentChatTab,
+    currentChatId,
+    setCurrentChatId,
+    pinChatIds,
+    setPinChatIds,
+    appendChats,
+    setLoadMore,
+    getFullFilterState,
+    unreadReceivedTab,
+    notReceivedTab,
+    closedTab,
+    chatList,
+    setReplySelected,
+    isChatListSelectMode,
+    selectedChatIds,
+    isChatListSelectAll,
+    excludeChatIds,
+    toggleSelectedChatId
+  } = useChatStore(
+    useShallow((state) => ({
+      isReceivedTabLoading: state.isReceivedTabLoading,
+      isNotReceivedTabLoading: state.isNotReceivedTabLoading,
+      isClosedTabLoading: state.isClosedTabLoading,
+      currentChatTab: state.currentChatTab,
+      currentChatId: state.currentChatId,
+      setCurrentChatId: state.setCurrentChatId,
+      pinChatIds: state.pinChatIds,
+      setPinChatIds: state.setPinChatIds,
+      appendChats: state.appendChats,
+      setLoadMore: state.setLoadMore,
+      getFullFilterState: state.getFullFilterState,
+      unreadReceivedTab: state.unreadReceivedTab,
+      notReceivedTab: state.notReceivedTab,
+      closedTab: state.closedTab,
+      chatList: state.chatList,
+      setReplySelected: state.setReplySelected,
+      isChatListSelectMode: state.isChatListSelectMode,
+      selectedChatIds: state.selectedChatIds,
+      isChatListSelectAll: state.isChatListSelectAll,
+      excludeChatIds: state.excludeChatIds,
+      toggleSelectedChatId: state.toggleSelectedChatId
+    }))
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || isPreview) return;
+    const onScroll = () => {
+      scrollPositionsRef.current[currentChatTab] = container.scrollTop;
+    };
+    container.addEventListener("scroll", onScroll);
+    return () => container.removeEventListener("scroll", onScroll);
+  }, [currentChatTab, isPreview]);
+  useEffect(() => {
+    if (isPreview) return;
+    const container = containerRef.current;
+    if (container) {
+      container.scrollTop = scrollPositionsRef.current[currentChatTab] || 0;
+    }
+  }, [currentChatTab, isPreview]);
+  const chatTabState = useMemo(() => {
+    if (currentChatTab === ChatFilterAssignStatus.Closed) return closedTab;
+    if (currentChatTab === ChatFilterAssignStatus.NotReceived)
+      return notReceivedTab;
+    return unreadReceivedTab;
+  }, [currentChatTab, closedTab, notReceivedTab, unreadReceivedTab]);
+  const { sort } = useChatSort();
+  const currentTabPinIds = pinChatIds[currentChatTab] ?? EMPTY_PIN_IDS;
+  const filterChats = useMemo(
+    () => sortChats(
+      getFilteredChatsForDisplay(chatList, currentChatTab),
+      currentTabPinIds,
+      sort
+    ),
+    [chatList, currentChatTab, currentTabPinIds, sort]
+  );
+  const visibleChats = useMemo(
+    () => isPreview ? filterChats.slice(0, limit) : filterChats,
+    [filterChats, isPreview, limit]
+  );
+  const isTabLoading = currentChatTab === ChatFilterAssignStatus.Closed ? isClosedTabLoading : currentChatTab === ChatFilterAssignStatus.Received ? isReceivedTabLoading : isNotReceivedTabLoading;
+  useEffect(() => {
+    onMetaChange?.({
+      total: chatTabState.total ?? 0,
+      shown: visibleChats.length,
+      hasMore: false,
+      isLoading: isTabLoading
+    });
+  }, [onMetaChange, chatTabState.total, visibleChats.length, isTabLoading]);
+  const getItemKey = useCallback(
+    (index) => filterChats[index]?._id,
+    [filterChats]
+  );
+  const virtualizer = useVirtualizer({
+    // Preview không ảo hoá: count = 0 khiến virtualItems rỗng nên effect load
+    // more bên dưới tự thoát sớm.
+    count: isPreview ? 0 : filterChats.length,
+    getScrollElement: () => containerRef.current,
+    getItemKey,
+    estimateSize: (index) => {
+      const chat = filterChats[index];
+      return chat?.tags?.length > 0 || chat?.personal_tags?.length > 0 || chat?.assigned?.name || chat?.assigned?._id || chat?.facebook_labels?.length > 0 ? 110 : 90;
+    },
+    overscan: 5
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  useEffect(() => {
+    const lastItem = virtualItems.at(-1);
+    if (!lastItem) return;
+    if (lastItem.index >= filterChats.length - 1 && filterChats.length > 0 && !chatTabState.isLoadMore && chatTabState.cursor) {
+      const lastChat = filterChats[filterChats.length - 1];
+      if (lastChat) handleLoadMore(lastChat._id);
+    }
+  }, [virtualItems, filterChats.length, chatTabState]);
+  const handleLoadMore = async () => {
+    if (chatTabState.isLoadMore || // chatTabState.lastMsgId === chatId ||
+    !chatTabState.cursor) {
+      return;
+    }
+    setLoadMore(currentChatTab, true);
+    try {
+      const params = buildQueryParams(
+        getFullFilterState({
+          tab: currentChatTab
+        })
+      );
+      const { data } = await getChatRoomList({ params });
+      const sessionPayload = currentChatTab === ChatFilterAssignStatus.Closed ? getClosedSessionPayload() : getReceivedSessionPayload(
+        currentChatTab === ChatFilterAssignStatus.Received
+      );
+      const total = data.total;
+      appendChats({
+        tab: currentChatTab,
+        chats: (data?.items || []).map((chat) => ({
+          ...chat,
+          ...sessionPayload
+        })),
+        total,
+        next_cursor: data?.next_cursor
+      });
+    } catch (error) {
+      throwException(error);
+    } finally {
+      setLoadMore(currentChatTab, false);
+    }
+  };
+  const pinChat = useCallback(
+    async (id) => {
+      const { pinChatIds: pinIds, currentChatTab: tab } = useChatStore.getState();
+      const tabIds = pinIds[tab] ?? [];
+      const isPinned = tabIds.includes(id);
+      if (!isPinned && tabIds.length >= 5) {
+        toast.error(
+          i18n.t("chat:message.maxPinnedConversations", {
+            defaultValue: "Ch\u1EC9 c\xF3 th\u1EC3 ghim t\u1ED1i \u0111a 5 h\u1ED9i tho\u1EA1i"
+          })
+        );
+        return;
+      }
+      const newTabIds = isPinned ? tabIds.filter((x) => x !== id) : [...tabIds, id];
+      setPinChatIds({ ...pinIds, [tab]: newTabIds });
+      try {
+        await (isPinned ? unpinChatRoom(id) : pinChatRoom(id));
+      } catch {
+        const cur = useChatStore.getState().pinChatIds;
+        const curTabIds = cur[tab] ?? [];
+        const restored = isPinned ? [.../* @__PURE__ */ new Set([...curTabIds, id])] : curTabIds.filter((x) => x !== id);
+        setPinChatIds({ ...cur, [tab]: restored });
+        toast.error(
+          isPinned ? t("chat:toast.unpinFail", { defaultValue: "B\u1ECF ghim th\u1EA5t b\u1EA1i" }) : t("chat:toast.pinConversationFail", {
+            defaultValue: "Ghim h\u1ED9i tho\u1EA1i th\u1EA5t b\u1EA1i"
+          })
+        );
+      }
+    },
+    [setPinChatIds]
+  );
+  const markUnreadChat = useCallback(async (id) => {
+    useChatStore.getState().updateChatUnread(id, { unread: 1 });
+    try {
+      await markRoomUnread(id);
+    } catch {
+      useChatStore.getState().updateChatUnread(id, { unread: 0 });
+      toast.error(
+        t("chat:toast.markAsUnreadFail", {
+          defaultValue: "\u0110\xE1nh d\u1EA5u ch\u01B0a \u0111\u1ECDc th\u1EA5t b\u1EA1i"
+        })
+      );
+    }
+  }, []);
+  const handleSelectChat = useCallback(
+    (chatId) => {
+      if (currentChatId !== chatId) {
+        setCurrentChatId(chatId);
+        setReplySelected(null);
+        navigate({
+          to: "/chat/$chatRoomId",
+          params: { chatRoomId: chatId }
+        });
+      }
+    },
+    [currentChatId, setCurrentChatId, setReplySelected, navigate]
+  );
+  useEffect(() => {
+    if (!currentChatId || isPreview) return;
+    const index = filterChats.findIndex((c) => c._id === currentChatId);
+    if (index !== -1) {
+      virtualizer.scrollToIndex(index, { align: "auto", behavior: "auto" });
+    }
+  }, [currentChatId]);
+  const renderChatItem = (item) => /* @__PURE__ */ jsx(
+    ChatItem,
+    {
+      item,
+      isSelected: item._id === currentChatId,
+      onSelect: handleSelectChat,
+      onPin: pinChat,
+      isPinned: currentTabPinIds.includes(item._id),
+      onMarkUnread: markUnreadChat,
+      currentChatTab,
+      isSelectMode: isChatListSelectMode,
+      isChecked: isChatSelected(item._id, {
+        isSelectAll: isChatListSelectAll,
+        selectedChatIds,
+        excludeChatIds
+      }),
+      onToggleSelect: toggleSelectedChatId
+    }
+  );
+  if (isPreview) {
+    return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col", children: isTabLoading ? /* @__PURE__ */ jsx(ChatListSkeleton, { count: 3 }) : visibleChats.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-6 text-center text-sm text-muted-foreground", children: t("chat:empty.noConversations", {
+      defaultValue: "Kh\xF4ng c\xF3 cu\u1ED9c tr\xF2 chuy\u1EC7n n\xE0o"
+    }) }) : visibleChats.map((item) => /* @__PURE__ */ jsx("div", { "data-chat-id": item._id, children: renderChatItem(item) }, item._id)) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "h-full overflow-y-auto overflow-x-hidden",
+      children: [
+        isTabLoading ? /* @__PURE__ */ jsx(ChatListSkeleton, {}) : filterChats.length === 0 ? /* @__PURE__ */ jsx(ChatListEmpty, {}) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: virtualItems.map((virtualRow) => {
+              const item = filterChats[virtualRow.index];
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: virtualizer.measureElement,
+                  "data-index": virtualRow.index,
+                  "data-chat-id": item._id,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${virtualRow.start}px)`
+                  },
+                  children: renderChatItem(item)
+                },
+                item._id
+              );
+            })
+          }
+        ),
+        chatTabState.isLoadMore && /* @__PURE__ */ jsx("div", { className: "flex h-[90px] items-center justify-center", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin cursor-pointer" }) })
+      ]
+    }
+  );
+}
+export {
+  ChatListItem as default
+};