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

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

@@ -0,0 +1,225 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Loader2, Search, MessageSquareOff } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "../../../ui/dialog.js";
+import { Input } from "../../../ui/input.js";
+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 useDebounce from "../../../../hooks/use-debounce.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 SearchMessagesModal({
+  open,
+  handleClose,
+  initialKeyword = "",
+  roomId,
+  navigateOnSelect = true
+}) {
+  const { t } = useTranslation();
+  const [keyword, setKeyword] = useState(initialKeyword);
+  const debouncedKeyword = useDebounce(keyword, 350);
+  const trimmedKeyword = debouncedKeyword.trim();
+  useEffect(() => {
+    if (open) setKeyword(initialKeyword);
+  }, [open, initialKeyword]);
+  const sentinelRef = useRef(null);
+  const [setFindReplySelected] = useChatStore(
+    useShallow((state) => [state.setFindReplySelected])
+  );
+  const { data, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: roomId ? ["search-messages-room", roomId, trimmedKeyword] : ["search-messages-global", trimmedKeyword],
+    queryFn: async ({ pageParam = 1 }) => {
+      const { data: data2 } = await searchChatMessages({
+        keyword: trimmedKeyword,
+        page: pageParam,
+        limit: LIMIT,
+        ...roomId ? { room_id: roomId } : {}
+      });
+      return data2;
+    },
+    getNextPageParam: (lastPage, pages) => {
+      const items = Array.isArray(lastPage) ? lastPage : lastPage?.items ?? [];
+      return items.length === LIMIT ? pages.length + 1 : void 0;
+    },
+    enabled: trimmedKeyword.length >= 2
+  });
+  const messages = (data?.pages ?? []).flatMap(
+    (page) => Array.isArray(page) ? page : page?.items ?? []
+  );
+  useEffect(() => {
+    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]);
+  const handleMessageClick = useCallback(
+    (message) => {
+      const messageRoomId = message.room_id || message.chat_room_id;
+      if (messageRoomId) {
+        setFindReplySelected(message._id);
+        if (navigateOnSelect) {
+          navigate({
+            to: "/chat/$chatRoomId",
+            params: { chatRoomId: messageRoomId }
+          });
+        }
+      }
+      handleClose();
+    },
+    [setFindReplySelected, handleClose, navigateOnSelect]
+  );
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      setKeyword("");
+      handleClose();
+    }
+  };
+  const showEmpty = !isFetching && messages.length === 0 && trimmedKeyword.length >= 2;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:title.searchMessages", {
+      defaultValue: "T\xECm ki\u1EBFm tin nh\u1EAFn"
+    }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          className: "pl-9",
+          placeholder: t("chat:placeholder.searchKeywordMin2Chars", {
+            defaultValue: "Nh\u1EADp t\u1EEB kh\xF3a t\xECm ki\u1EBFm (\xEDt nh\u1EA5t 2 k\xFD t\u1EF1)..."
+          }),
+          value: keyword,
+          onChange: (e) => setKeyword(e.target.value)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: trimmedKeyword.length < 2 ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        message: "Nh\u1EADp \xEDt nh\u1EA5t 2 k\xFD t\u1EF1 \u0111\u1EC3 t\xECm ki\u1EBFm",
+        icon: "search"
+      }
+    ) : isFetching && messages.length === 0 ? /* @__PURE__ */ jsx(LoadingState, {}) : showEmpty ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        message: t("chat:empty.noMessagesFoundForKeyword", {
+          trimmedKeyword,
+          defaultValue: 'Kh\xF4ng t\xECm th\u1EA5y tin nh\u1EAFn n\xE0o cho "{trimmedKeyword}"'
+        })
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "px-4 py-2 text-xs text-muted-foreground", children: [
+        messages.length,
+        " ",
+        t("chat:label.results", { defaultValue: "k\u1EBFt qu\u1EA3" }),
+        hasNextPage ? "+" : ""
+      ] }),
+      messages.map((message) => /* @__PURE__ */ jsx(
+        MessageResultItem,
+        {
+          message,
+          keyword: trimmedKeyword,
+          onClick: handleMessageClick
+        },
+        message._id
+      )),
+      /* @__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" }) })
+    ] }) })
+  ] }) });
+}
+function LoadingState() {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-40 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) });
+}
+function EmptyState({ message, icon }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-40 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
+    icon === "search" ? /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 opacity-30" }) : /* @__PURE__ */ jsx(MessageSquareOff, { className: "h-8 w-8 opacity-30" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm", children: message })
+  ] });
+}
+export {
+  SearchMessagesModal as default
+};

package/components/chat-route/chat-list/search-result-header.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ChevronRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { formatNumber } from "@zenify-omni/chat-js/utils/formatters.js";
+const EMPTY_SEARCH_META = {
+  total: 0,
+  shown: 0,
+  hasMore: false,
+  isLoading: false
+};
+function SearchResultHeader({ title, meta, onBack, onViewAll }) {
+  const { t } = useTranslation();
+  const showCount = !meta.isLoading && meta.total > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 bg-muted/50 px-4 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      onBack && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          "aria-label": t("common:action.back", { defaultValue: "Quay l\u1EA1i" }),
+          className: "shrink-0 text-primary transition-colors hover:text-primary",
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: [
+        title,
+        showCount && /* @__PURE__ */ jsx("span", { className: "ml-1 font-normal normal-case", children: `(${formatNumber(meta.total)}${meta.hasMore ? "+" : ""} ${t(
+          "chat:label.results",
+          { defaultValue: "k\u1EBFt qu\u1EA3" }
+        )})` })
+      ] })
+    ] }),
+    onViewAll && meta.shown > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onViewAll,
+        className: "flex shrink-0 items-center gap-0.5 text-xs font-medium text-primary transition-colors hover:text-primary",
+        children: [
+          t("common:action.viewAll", { defaultValue: "Xem t\u1EA5t c\u1EA3" }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  EMPTY_SEARCH_META,
+  SearchResultHeader as default
+};