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

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

@@ -0,0 +1,243 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useChatStore from "../../../store/chat-store.js";
+import { useQuery } from "@tanstack/react-query";
+import { useShallow } from "zustand/react/shallow";
+import { useCallback, useEffect, useState } from "react";
+import { LoaderCircle } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { ChatFilterAssignStatus } from "@zenify-omni/chat-js/constants/chat-message.js";
+import FilterChat from "./filter-chat.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import ChatListItem from "./chat-list-item.js";
+import { getChatRoomList } from "@zenify-omni/chat-js/api/chatroom.js";
+import { buildQueryParams } from "./util.js";
+import {
+  getReceivedSessionPayload,
+  getClosedSessionPayload
+} from "../../../store/chat-store-helpers.js";
+import InlineSearchResults from "./inline-search-results.js";
+import ChatSearchPreview from "./chat-search-preview.js";
+import SearchResultHeader, { EMPTY_SEARCH_META } from "./search-result-header.js";
+import useChatSort from "../../../hooks/use-chat-sort.js";
+import useChatConfigs from "../../../hooks/use-chat-configs.js";
+import useChatSurface from "../../../hooks/use-chat-surface.js";
+const SearchView = {
+  Chats: "chats",
+  Messages: "messages"
+};
+function ChatList() {
+  useChatSurface();
+  const { t } = useTranslation();
+  const [searchView, setSearchView] = useState(null);
+  const [fullViewMeta, setFullViewMeta] = useState(EMPTY_SEARCH_META);
+  const [isClearing, setIsClearing] = useState(false);
+  const { isReady: isChatConfigReady } = useChatConfigs();
+  const { isSortReady } = useChatSort();
+  const {
+    setIsReceivedTabLoading,
+    setIsNotReceivedTabLoading,
+    setIsClosedTabLoading,
+    setChatList,
+    lastRefreshTime,
+    setTabInitialChats,
+    getFullFilterState,
+    isReceivedTabLoading,
+    isNotReceivedTabLoading,
+    isClosedTabLoading,
+    setPinChatIds,
+    searchKeyword
+  } = useChatStore(
+    useShallow((state) => ({
+      setIsReceivedTabLoading: state.setIsReceivedTabLoading,
+      setIsNotReceivedTabLoading: state.setIsNotReceivedTabLoading,
+      setIsClosedTabLoading: state.setIsClosedTabLoading,
+      setChatList: state.setChatList,
+      lastRefreshTime: state.lastRefreshTime,
+      setTabInitialChats: state.setTabInitialChats,
+      getFullFilterState: state.getFullFilterState,
+      isReceivedTabLoading: state.isReceivedTabLoading,
+      isNotReceivedTabLoading: state.isNotReceivedTabLoading,
+      isClosedTabLoading: state.isClosedTabLoading,
+      setPinChatIds: state.setPinChatIds,
+      searchKeyword: state.filterState.keyword
+    }))
+  );
+  useEffect(() => {
+    if (isClearing && (isReceivedTabLoading || isNotReceivedTabLoading || isClosedTabLoading)) {
+      setIsClearing(false);
+    }
+  }, [
+    isClearing,
+    isReceivedTabLoading,
+    isNotReceivedTabLoading,
+    isClosedTabLoading
+  ]);
+  useEffect(() => {
+    setSearchView(null);
+  }, [searchKeyword]);
+  const handleClearKeyword = useCallback(() => {
+    setIsClearing(true);
+  }, []);
+  const handleBackToPreview = useCallback(() => {
+    setSearchView(null);
+    setFullViewMeta(EMPTY_SEARCH_META);
+  }, []);
+  const handleFullViewMeta = useCallback((meta) => setFullViewMeta(meta), []);
+  const buildParams = (tab) => buildQueryParams(
+    getFullFilterState({
+      tab,
+      options: {
+        is_new: true
+      }
+    })
+  );
+  const tabConfigs = [
+    {
+      tab: ChatFilterAssignStatus.Received,
+      setLoading: setIsReceivedTabLoading,
+      getSessionPayload: () => getReceivedSessionPayload(true),
+      getTotalFromResponse: (data) => data?.total || 0,
+      isPinnedItemForTab: (chat) => chat.is_received === true && chat.state !== "closed"
+    },
+    {
+      tab: ChatFilterAssignStatus.NotReceived,
+      setLoading: setIsNotReceivedTabLoading,
+      getSessionPayload: () => getReceivedSessionPayload(false),
+      getTotalFromResponse: (data) => data?.total || 0,
+      isPinnedItemForTab: (chat) => chat.is_received === false && chat.state !== "closed"
+    },
+    {
+      tab: ChatFilterAssignStatus.Closed,
+      setLoading: setIsClosedTabLoading,
+      getSessionPayload: () => getClosedSessionPayload(),
+      getTotalFromResponse: (data) => data?.total || 0,
+      isPinnedItemForTab: (chat) => chat.state === "closed"
+    }
+  ];
+  useQuery({
+    initialData: [],
+    // Đợi /v2/chat-configs resolve xong (store đã có sort_chat) rồi mới fetch
+    // list, tránh race khiến buildQueryParams gửi sort_unanswered_first sai ở
+    // lần load đầu. Lỗi cũng tính là sẵn sàng — store rỗng, mặc định false.
+    //
+    // Cùng lý do với isSortReady: kiểu sắp xếp người dùng đã lưu nằm ở user
+    // config, chưa nạp xong mà fetch thì phải fetch lại lần hai.
+    enabled: isChatConfigReady && isSortReady,
+    queryKey: [
+      QUERY_KEY.GET_LIST_TICKET_CHAT,
+      { last_refresh_time: lastRefreshTime }
+    ],
+    queryFn: async ({ signal }) => {
+      const silent = useChatStore.getState().isSilentRefreshChatList;
+      if (!silent) setChatList([]);
+      const preFetchPinIds = useChatStore.getState().pinChatIds;
+      const promises = tabConfigs.map(
+        async ({
+          tab,
+          setLoading,
+          getSessionPayload,
+          getTotalFromResponse,
+          isPinnedItemForTab
+        }) => {
+          if (!silent) setLoading(true);
+          return getChatRoomList({
+            params: buildParams(tab),
+            signal
+          }).then((response) => {
+            const pinnedItems = (response?.data?.pinned_items || []).filter(
+              isPinnedItemForTab
+            );
+            setTabInitialChats({
+              tab,
+              chats: [
+                ...pinnedItems.map((chat) => ({
+                  ...chat,
+                  session: {
+                    is_received: chat.is_received,
+                    ...chat.state === "closed" ? { status: "closed" } : {}
+                  }
+                })),
+                ...(response?.data?.items || []).map((chat) => ({
+                  ...chat,
+                  ...getSessionPayload()
+                }))
+              ],
+              total: getTotalFromResponse(response?.data),
+              cursor: response?.data?.next_cursor
+            });
+            return {
+              tab,
+              ids: pinnedItems.map((c) => c._id)
+            };
+          }).catch((err) => {
+            if (signal.aborted) return { tab, ids: null };
+            throwException(err);
+            return { tab, ids: null };
+          }).finally(() => {
+            if (!silent) setLoading(false);
+          });
+        }
+      );
+      const pinnedResults = await Promise.all(promises);
+      if (!silent) {
+        const currentPinIds = useChatStore.getState().pinChatIds;
+        const newPinChatIds = pinnedResults.reduce((acc, { tab, ids }) => {
+          if (ids === null) return acc;
+          const preIds = preFetchPinIds[tab] ?? [];
+          const curIds = acc[tab] ?? [];
+          const merged = [
+            ...ids.filter((id) => !preIds.includes(id) || curIds.includes(id)),
+            ...curIds.filter((id) => !preIds.includes(id) && !ids.includes(id))
+          ];
+          return { ...acc, [tab]: merged };
+        }, currentPinIds);
+        setPinChatIds(newPinChatIds);
+      }
+      if (silent) useChatStore.getState().setIsSilentRefreshChatList(false);
+      return [];
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col gap-2 border-r p-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-0 pb-0 pt-3", children: /* @__PURE__ */ jsx(FilterChat, { onClearKeyword: handleClearKeyword }) }),
+    isClearing || !isChatConfigReady ? /* @__PURE__ */ jsx("div", { className: "flex h-[80%] items-center justify-center", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) : !searchKeyword ? /* @__PURE__ */ jsx(ChatListItem, {}) : searchView === SearchView.Chats ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t", children: [
+      /* @__PURE__ */ jsx(
+        SearchResultHeader,
+        {
+          title: t("common:label.conversation", {
+            defaultValue: "H\u1ED9i tho\u1EA1i"
+          }),
+          meta: fullViewMeta,
+          onBack: handleBackToPreview
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(ChatListItem, { onMetaChange: handleFullViewMeta }) })
+    ] }) : searchView === SearchView.Messages ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col border-t", children: [
+      /* @__PURE__ */ jsx(
+        SearchResultHeader,
+        {
+          title: t("common:label.message", { defaultValue: "Tin nh\u1EAFn" }),
+          meta: fullViewMeta,
+          onBack: handleBackToPreview
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InlineSearchResults,
+        {
+          keyword: searchKeyword,
+          onMetaChange: handleFullViewMeta
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      ChatSearchPreview,
+      {
+        keyword: searchKeyword,
+        onViewAllChats: () => setSearchView(SearchView.Chats),
+        onViewAllMessages: () => setSearchView(SearchView.Messages)
+      }
+    )
+  ] });
+}
+export {
+  ChatList as default
+};

package/components/chat-route/chat-list/inline-search-results.js

@@ -0,0 +1,178 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef } from "react";
+import { Loader2, MessageSquareOff } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { searchChatMessages } from "@zenify-omni/chat-js/api/chatroom.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/react/shallow";
+import { navigate } from "../../../config/navigation.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { MessageType } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { useTranslation } from "react-i18next";
+const LIMIT = 20;
+const CONTENT_PREVIEWS = {
+  [MessageType.IMAGE]: "[H\xECnh \u1EA3nh]",
+  [MessageType.IMAGES]: "[H\xECnh \u1EA3nh]",
+  [MessageType.FILE]: "[File]",
+  [MessageType.AUDIO]: "[\xC2m thanh]",
+  [MessageType.VIDEO]: "[Video]",
+  [MessageType.STICKER]: "[Sticker]",
+  [MessageType.LOCATION]: "[V\u1ECB tr\xED]"
+};
+const getContentPreview = (content) => {
+  if (!content) return "";
+  return CONTENT_PREVIEWS[content.type] ?? content.text ?? "[Tin nh\u1EAFn]";
+};
+const HighlightedText = memo(({ text, keyword }) => {
+  if (!keyword || !text) return /* @__PURE__ */ jsx("span", { children: text });
+  const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const parts = text.split(new RegExp(`(${escaped})`, "gi"));
+  return /* @__PURE__ */ jsx("span", { children: parts.map(
+    (part, i) => part.toLowerCase() === keyword.toLowerCase() ? /* @__PURE__ */ jsx(
+      "mark",
+      {
+        className: "rounded-sm bg-[--label-orange] px-0.5 text-foreground",
+        children: part
+      },
+      i
+    ) : part
+  ) });
+});
+HighlightedText.displayName = "HighlightedText";
+const MessageResultItem = memo(({ message, keyword, onClick }) => {
+  const { t } = useTranslation();
+  const name = message.chatter_name || (message.chatter_type === "agent" ? "Agent" : t("common:label.customer", { defaultValue: "Kh\xE1ch h\xE0ng" }));
+  const initial = name.charAt(0).toUpperCase();
+  const preview = getContentPreview(message.content);
+  const time = formatDayWithTime(message.created_at || message.date);
+  const isAgent = message.chatter_type === "agent";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/50",
+      onClick: () => onClick(message),
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "mt-0.5 h-9 w-9 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: message.chatter_avatar, alt: name }),
+          /* @__PURE__ */ jsx(
+            AvatarFallback,
+            {
+              className: `text-xs ${isAgent ? "bg-secondary text-primary" : "bg-[--label-green] text-success"}`,
+              children: initial
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-0.5 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: name }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: time })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(HighlightedText, { text: preview, keyword }) })
+        ] })
+      ]
+    }
+  );
+});
+MessageResultItem.displayName = "MessageResultItem";
+function InlineSearchResults({
+  keyword,
+  limit = 0,
+  onMetaChange
+}) {
+  const isPreview = limit > 0;
+  const { t } = useTranslation();
+  const sentinelRef = useRef(null);
+  const [setFindReplySelected] = useChatStore(
+    useShallow((state) => [state.setFindReplySelected])
+  );
+  const { data, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: ["search-messages-inline", keyword],
+    queryFn: async ({ pageParam = 1 }) => {
+      const { data: data2 } = await searchChatMessages({
+        keyword,
+        page: pageParam,
+        limit: LIMIT
+      });
+      return data2;
+    },
+    getNextPageParam: (lastPage, pages) => {
+      const items = Array.isArray(lastPage) ? lastPage : lastPage?.items ?? [];
+      return items.length === LIMIT ? pages.length + 1 : void 0;
+    },
+    enabled: keyword.length >= 2
+  });
+  const allMessages = (data?.pages ?? []).flatMap(
+    (page) => Array.isArray(page) ? page : page?.items ?? []
+  );
+  const messages = isPreview ? allMessages.slice(0, limit) : allMessages;
+  useEffect(() => {
+    onMetaChange?.({
+      // API tìm kiếm không trả tổng, chỉ báo được số đã tải kèm cờ còn trang sau.
+      total: allMessages.length,
+      hasMore: !!hasNextPage,
+      shown: messages.length,
+      isLoading: isFetching && allMessages.length === 0
+    });
+  }, [
+    onMetaChange,
+    allMessages.length,
+    hasNextPage,
+    messages.length,
+    isFetching
+  ]);
+  useEffect(() => {
+    if (isPreview) return;
+    const node = sentinelRef.current;
+    if (!node || !hasNextPage) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !isFetchingNextPage) fetchNextPage();
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, isPreview]);
+  const handleMessageClick = useCallback(
+    (message) => {
+      const roomId = message.room_id || message.chat_room_id;
+      if (roomId) {
+        setFindReplySelected(message._id);
+        navigate({ to: "/chat/$chatRoomId", params: { chatRoomId: roomId } });
+      }
+    },
+    [setFindReplySelected]
+  );
+  const showEmpty = !isFetching && messages.length === 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: isPreview ? "flex shrink-0 flex-col" : "flex min-h-0 flex-1 flex-col overflow-y-auto",
+      children: isFetching && messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : showEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(MessageSquareOff, { className: "h-8 w-8 opacity-30" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("chat:empty.noMessagesFound", {
+          defaultValue: "Kh\xF4ng t\xECm th\u1EA5y tin nh\u1EAFn n\xE0o"
+        }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        messages.map((message) => /* @__PURE__ */ jsx(
+          MessageResultItem,
+          {
+            message,
+            keyword,
+            onClick: handleMessageClick
+          },
+          message._id
+        )),
+        !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "h-1" }),
+          isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  InlineSearchResults as default
+};

package/components/chat-route/chat-list/post-ids-field.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { Info, X } from "lucide-react";
+import { FormField } from "../../ui/form.js";
+import { Badge } from "../../ui/badge.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import { Button } from "../../custom/button.js";
+import DialogSelectPosts from "../../posts-route/dialog-select-posts.js";
+import { cn } from "../../../lib/utils.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function PostIdsField({ form }) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const pageIds = useWatch({ control: form.control, name: "page_ids" }) || [];
+  const hasFbAds = useWatch({ control: form.control, name: "has_fb_ads" });
+  const fbPages = pageIds.filter((p) => p.source === "facebook");
+  const enabled = fbPages.length === 1 && hasFbAds === "post";
+  useEffect(() => {
+    if (!enabled && form.getValues("post_ids")?.length > 0) {
+      form.setValue("post_ids", []);
+    }
+  }, [enabled, form]);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: "post_ids",
+      render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        field.value?.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: field.value.map((post) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate", children: post.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => field.onChange(
+                field.value.filter((p) => p.value !== post.value)
+              ),
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+            }
+          )
+        ] }, post.value)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: !enabled,
+              onClick: () => setDialogOpen(true),
+              className: cn(
+                "w-full justify-start font-normal text-muted-foreground",
+                !enabled && "pr-8"
+              ),
+              children: i18n.t("chat:action.selectPost", {
+                defaultValue: "Ch\u1ECDn b\xE0i vi\u1EBFt"
+              })
+            }
+          ),
+          !enabled && /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(
+              TooltipTrigger,
+              {
+                type: "button",
+                className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground",
+                children: /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(TooltipContent, { children: i18n.t("chat:hint.onlyAppliesWhenFacebookPageAndPost", {
+              defaultValue: "Ch\u1EC9 \xE1p d\u1EE5ng khi Ngu\u1ED3n chi ti\u1EBFt ch\u1ECDn \u0111\xFAng 1 Trang Facebook v\xE0 Lo\u1EA1i tin nh\u1EAFn l\xE0 Post"
+            }) })
+          ] }) })
+        ] }),
+        enabled && /* @__PURE__ */ jsx(
+          DialogSelectPosts,
+          {
+            open: dialogOpen,
+            onClose: () => setDialogOpen(false),
+            pageId: fbPages[0]?.value,
+            selectedPosts: (field.value || []).map((post) => ({
+              id: post.value,
+              message: post.label
+            })),
+            onConfirm: (posts) => field.onChange(
+              posts.map((post) => ({
+                label: post.message || i18n.t("posts:label.noContent", {
+                  defaultValue: "(Kh\xF4ng c\xF3 n\u1ED9i dung)"
+                }),
+                value: post.id || post._id || post.post_id
+              }))
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  PostIdsField as default
+};