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

package/components/chat-route/chat-box/pinned-messages.js

@@ -0,0 +1,255 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useState, useMemo, useEffect } from "react";
+import {
+  MessageCircle,
+  EllipsisVertical,
+  ChevronDown,
+  ChevronUp,
+  PinOff,
+  FileText,
+  Image,
+  Sticker
+} from "lucide-react";
+import { sendMessage } from "../../../utils/chat_socket.js";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/shallow";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../ui/dropdown-menu.js";
+import DOMPurify from "dompurify";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+const PIN_MSG_TYPE = {
+  TEXT: 1,
+  IMAGE: 32,
+  STICKER: 36,
+  FILE: 46
+};
+const parsePinParams = (params) => {
+  try {
+    return typeof params === "string" ? JSON.parse(params) : params;
+  } catch {
+    return {};
+  }
+};
+function PinnedMessages({
+  chatRoomId,
+  isChatAllowed,
+  ticket,
+  pinnedData
+}) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const [setFindPinSelected] = useChatStore(
+    useShallow((state) => [state.setFindPinSelected])
+  );
+  const handleClickPin = (pin) => {
+    if (pin.chat_message_id) {
+      setFindPinSelected(pin.chat_message_id);
+    }
+  };
+  useEffect(() => {
+    setExpanded(false);
+  }, [chatRoomId]);
+  const handleUnpin = (topicId) => {
+    if (!ticket) return;
+    const contentOption = {
+      unpin: {
+        type: "unpin_message",
+        topic_id: topicId
+      }
+    };
+    sendMessage(
+      ticket,
+      "",
+      "unpin_message",
+      { is_personal_zalo: ticket?.is_personal_zalo },
+      null,
+      contentOption
+    );
+  };
+  const pins = useMemo(() => {
+    if (!pinnedData?.data?.data?.length) return [];
+    return pinnedData.data.data.map((pin) => {
+      const params = parsePinParams(pin.params);
+      const msgType = params.msg_type || PIN_MSG_TYPE.TEXT;
+      const rawTitle = params.title || "";
+      let parsedTitle = null;
+      if (msgType !== PIN_MSG_TYPE.TEXT) {
+        try {
+          parsedTitle = typeof rawTitle === "string" ? JSON.parse(rawTitle) : rawTitle;
+        } catch {
+          if (rawTitle) {
+            parsedTitle = { url: rawTitle };
+          }
+        }
+      }
+      return {
+        id: pin.id,
+        msgType,
+        rawTitle,
+        parsedTitle,
+        senderName: pin.senderAlias || params.senderName || "",
+        createTime: pin.createTime,
+        chat_message_id: pin.chat_message_id || ""
+      };
+    });
+  }, [pinnedData]);
+  const renderPinContent = (pin) => {
+    switch (pin.msgType) {
+      case PIN_MSG_TYPE.FILE: {
+        const fileName = pin.parsedTitle?.url?.split("/").pop() || i18n.t("chat:label.attachedFile", {
+          defaultValue: "T\u1EC7p \u0111\xEDnh k\xE8m"
+        });
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(FileText, { size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: fileName })
+        ] });
+      }
+      case PIN_MSG_TYPE.IMAGE: {
+        const imageUrl = pin.parsedTitle?.thumb || pin.parsedTitle?.url;
+        const imageName = pin.parsedTitle?.thumb || pin.parsedTitle?.url?.split("/").pop() || i18n.t("chat:label.attachedFile", {
+          defaultValue: "T\u1EC7p \u0111\xEDnh k\xE8m"
+        });
+        return imageUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: imageName,
+            className: "size-8 rounded object-cover",
+            referrerPolicy: "no-referrer"
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Image, { size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: t("common:label.image", { defaultValue: "H\xECnh \u1EA3nh" }) })
+        ] });
+      }
+      case PIN_MSG_TYPE.STICKER:
+        return pin.parsedTitle?.url ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: pin.parsedTitle.url,
+            alt: "Sticker",
+            className: "size-8 rounded object-cover",
+            referrerPolicy: "no-referrer"
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Sticker, { size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: "Sticker" })
+        ] });
+      default:
+        return /* @__PURE__ */ jsx("span", { className: "truncate", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            dangerouslySetInnerHTML: {
+              // Che SĐT/email trước khi sanitize — cùng pattern với
+              // text-content.jsx.
+              __html: DOMPurify.sanitize(maskData(pin.rawTitle))
+            }
+          }
+        ) });
+    }
+  };
+  if (!pins.length) return null;
+  const latestPin = pins[0];
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto absolute left-1/2 top-2 z-50 w-[98%] -translate-x-1/2 rounded-lg border bg-card opacity-100 shadow-md transition-all duration-200 ease-in-out", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => {
+          handleClickPin(latestPin);
+        },
+        className: "flex cursor-pointer items-center gap-3 px-4 py-2",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(MessageCircle, { size: 18, className: "text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.message", { defaultValue: "Tin nh\u1EAFn" }) }),
+            /* @__PURE__ */ jsxs("p", { className: "flex items-center truncate text-sm text-muted-foreground", children: [
+              latestPin.senderName && /* @__PURE__ */ jsxs("span", { className: "mr-1", children: [
+                maskData(latestPin.senderName),
+                ": "
+              ] }),
+              renderPinContent(latestPin)
+            ] })
+          ] }),
+          pins.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (pins.length > 1) {
+                  setExpanded((prev) => !prev);
+                }
+              },
+              className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-accent",
+              children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+            }
+          ),
+          isChatAllowed && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-accent",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx(EllipsisVertical, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleUnpin(latestPin.id), children: [
+              /* @__PURE__ */ jsx(PinOff, { size: 14, className: "mr-2" }),
+              t("chat:action.unpin", { defaultValue: "B\u1ECF ghim" })
+            ] }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid transition-[grid-template-rows] duration-200 ease-in-out",
+        style: { gridTemplateRows: expanded ? "1fr" : "0fr" },
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto border-t", children: pins.slice(1).map((pin) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => handleClickPin(pin),
+            className: "flex cursor-pointer items-center gap-3 px-4 py-2 hover:bg-accent/50",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(MessageCircle, { size: 18, className: "text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.message", { defaultValue: "Tin nh\u1EAFn" }) }),
+                /* @__PURE__ */ jsxs("p", { className: "flex items-center truncate text-sm text-muted-foreground", children: [
+                  pin.senderName && /* @__PURE__ */ jsxs("span", { className: "mr-1", children: [
+                    maskData(pin.senderName),
+                    ": "
+                  ] }),
+                  renderPinContent(pin)
+                ] })
+              ] }),
+              isChatAllowed && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => e.stopPropagation(),
+                    className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-accent",
+                    children: /* @__PURE__ */ jsx(EllipsisVertical, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleUnpin(pin.id), children: [
+                  /* @__PURE__ */ jsx(PinOff, { size: 14, className: "mr-2" }),
+                  t("chat:action.unpin", { defaultValue: "B\u1ECF ghim" })
+                ] }) })
+              ] })
+            ]
+          },
+          pin.id
+        )) }) })
+      }
+    )
+  ] });
+}
+export {
+  PinnedMessages as default
+};

package/components/chat-route/chat-box/react-message/react-preview.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  isFacebook,
+  isZalo,
+  isZaloPersonal
+} from "../../util.js";
+import { SourceDetailTicket } from "@zenify-omni/chat-js/constants/chat-source.js";
+import { FB_REACTIONS } from "../constants.js";
+import { ZALO_REACTIONS } from "./reaction-button.js";
+const isWhatsApp = (ticket) => ticket?.source === SourceDetailTicket.WHATSAPP;
+function ReactionPreview({
+  reactions = [],
+  ticket,
+  isPending = false
+}) {
+  const isWA = isWhatsApp(ticket);
+  if (!isZalo(ticket) && !isZaloPersonal(ticket) && !isFacebook(ticket) && !isWA) {
+    return null;
+  }
+  if (!Array.isArray(reactions) || reactions.length === 0) return null;
+  if (isWA) {
+    const uniqueEmojis = [...new Set(reactions.map((r) => r.emoji))].slice(0, 3);
+    const totalReact2 = reactions.length;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `absolute bottom-0.5 right-6 inline-flex items-center justify-center gap-1 rounded-full bg-background px-1.5 py-0.5 shadow-xl ${isPending ? "animate-pulse opacity-80" : ""}`,
+        children: [
+          uniqueEmojis.map((emoji, index) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex h-4 w-4 items-center justify-center text-xs",
+              children: emoji
+            },
+            `${emoji}-${index}`
+          )),
+          totalReact2 > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-medium text-muted-foreground", children: totalReact2 })
+        ]
+      }
+    );
+  }
+  const isFB = isFacebook(ticket);
+  const reactionSource = isFB ? FB_REACTIONS : ZALO_REACTIONS;
+  const getIconReact = (reaction) => {
+    if (isFB) {
+      return reactionSource.find((r) => r.rType === reaction?.reaction)?.icon || reaction?.emoji;
+    }
+    return reactionSource.find(
+      (r) => r.key === reaction || r.key === reaction?.rType
+    )?.icon;
+  };
+  const sortedReactions = [...reactions].sort(
+    (a, b) => isFB ? (a.timestamp || 0) - (b.timestamp || 0) : new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()
+  );
+  const visibleReactions = sortedReactions.filter((reaction, index, arr) => {
+    return isFB ? index === arr.findIndex((item) => item.reaction === reaction.reaction) : index === arr.findIndex((item) => item.rType === reaction.rType);
+  }).slice(0, 3);
+  const totalReact = sortedReactions.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `absolute bottom-0.5 right-6 inline-flex items-center justify-center gap-1 rounded-full bg-background px-1.5 py-0.5 shadow-xl ${isPending ? "animate-pulse opacity-80" : ""}`,
+      children: [
+        visibleReactions.map((reaction, index) => {
+          const icon = getIconReact(reaction) || reaction?.emoji;
+          if (!icon) return null;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex h-4 w-4 items-center justify-center text-xs",
+              children: icon
+            },
+            `${reaction?.rType ?? reaction?.reaction}-${reaction?.updated_at ?? reaction?.timestamp}-${index}`
+          );
+        }),
+        totalReact > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-medium text-muted-foreground", children: totalReact })
+      ]
+    }
+  );
+}
+export {
+  ReactionPreview as default
+};

package/components/chat-route/chat-box/react-message/reaction-button.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FB_REACTIONS } from "../constants.js";
+import { X } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from "../../../ui/dropdown-menu.js";
+import { isFacebook } from "../../util.js";
+import { sendMessage } from "../../../../utils/chat_socket.js";
+import { MessageType } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { useCallback, useState, useRef } from "react";
+import Icon from "../../../custom/icon.js";
+import useChatStore from "../../../../store/chat-store.js";
+const FB_REACTION_CONFIRM_TIMEOUT_MS = 8e3;
+const pendingFbReactionTimers = /* @__PURE__ */ new Map();
+const ZALO_REACTIONS = [
+  { key: 3, rType: 3, rIcon: "/-strong", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_like" }) },
+  { key: 5, rType: 5, rIcon: "/-heart", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_love" }) },
+  { key: 0, rType: 0, rIcon: ":>", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_haha" }) },
+  { key: 32, rType: 32, rIcon: ":o", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_wow" }) },
+  { key: 2, rType: 2, rIcon: ":-(", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_sad" }) },
+  { key: 20, rType: 20, rIcon: ":-h", icon: /* @__PURE__ */ jsx(Icon, { name: "emoji_angry" }) },
+  { key: "un_react", rType: -1, rIcon: "", icon: /* @__PURE__ */ jsx(X, { size: 16 }) }
+];
+const FB_UN_REACT = {
+  key: "un_react",
+  rType: "",
+  rIcon: "",
+  icon: /* @__PURE__ */ jsx(X, { size: 16 })
+};
+function ReactionButton({ isMychat, chatRoom, message }) {
+  const [open, setOpen] = useState(false);
+  const closeTimerRef = useRef(null);
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+  const handleOpen = () => {
+    clearCloseTimer();
+    setOpen(true);
+  };
+  const handleClose = () => {
+    clearCloseTimer();
+    closeTimerRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 120);
+  };
+  const getReactOption = () => {
+    const isFb = isFacebook(chatRoom);
+    const options = isFb ? FB_REACTIONS : ZALO_REACTIONS;
+    if (!getLastMyReact()) {
+      return options.filter((r) => r.key !== "un_react");
+    }
+    return isFb ? [...options, FB_UN_REACT] : options;
+  };
+  const isShowReact = message?.extra_data?.reactions && message?.extra_data?.reactions?.length;
+  const isPendingFbReaction = "_pendingReactionTs" in (message || {});
+  const getLastMyReact = () => {
+    const isFb = isFacebook(chatRoom);
+    const reacts = message?.extra_data?.reactions?.filter(
+      (e) => isFb ? e.user_id === chatRoom?.source_id : e.uid_from === chatRoom?.source_id
+    );
+    if (reacts && reacts.length > 0) {
+      return [...reacts].sort(
+        (a, b) => isFb ? (b.timestamp || 0) - (a.timestamp || 0) : new Date(b.updated_at) - new Date(a.updated_at)
+      )[0];
+    }
+    return null;
+  };
+  const getIconReact = () => {
+    const myReact = getLastMyReact();
+    if (myReact) {
+      const isFb = isFacebook(chatRoom);
+      const reactionSource = isFb ? FB_REACTIONS : ZALO_REACTIONS;
+      const matchKey = isFb ? myReact?.reaction : myReact?.rType;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex h-4 w-4 items-center justify-center text-xs",
+          children: reactionSource.find((r) => r.rType === matchKey)?.icon
+        },
+        `${matchKey}-${myReact?.updated_at || myReact?.timestamp}`
+      );
+    }
+    return null;
+  };
+  const handleSendMessage = useCallback(
+    (msg, type = "text", fileName = null, react) => {
+      const content = msg?.trim();
+      const contentOption = {};
+      const options = {
+        is_personal_zalo: chatRoom?.is_personal_zalo
+      };
+      if (react) {
+        const isFb = isFacebook(chatRoom);
+        contentOption.reaction = {
+          type: MessageType.REACTION,
+          r_type: react.rType,
+          r_icon: react.rIcon,
+          msg_id: isFb ? message.extra_data?.msg_id : message.content?.meta?.msgId,
+          cli_msg_id: isFb ? void 0 : message.content?.meta?.cliMsgId
+        };
+      }
+      sendMessage(chatRoom, content, type, options, fileName, contentOption);
+    },
+    [chatRoom, message]
+  );
+  const applyOptimisticFbReaction = (react) => {
+    const roomId = chatRoom?._id;
+    const msgId = message?._id;
+    if (!roomId || !msgId) return;
+    const myUserId = chatRoom?.source_id;
+    const previousReactions = message?.extra_data?.reactions || [];
+    const opTs = Date.now();
+    const nextReactions = react.key === "un_react" ? previousReactions.filter((r) => r.user_id !== myUserId) : [
+      ...previousReactions.filter((r) => r.user_id !== myUserId),
+      {
+        user_id: myUserId,
+        reaction: react.rType,
+        emoji: react.rIcon,
+        timestamp: opTs
+      }
+    ];
+    useChatStore.getState().applyOptimisticReaction(roomId, msgId, nextReactions, opTs);
+    const timerKey = `${roomId}:${msgId}`;
+    const prevTimer = pendingFbReactionTimers.get(timerKey);
+    if (prevTimer) clearTimeout(prevTimer);
+    const timer = setTimeout(() => {
+      pendingFbReactionTimers.delete(timerKey);
+      useChatStore.getState().rollbackPendingReaction(roomId, msgId, opTs, previousReactions);
+    }, FB_REACTION_CONFIRM_TIMEOUT_MS);
+    pendingFbReactionTimers.set(timerKey, timer);
+  };
+  const onSelect = (react) => {
+    if (isFacebook(chatRoom)) {
+      applyOptimisticFbReaction(react);
+    }
+    handleSendMessage("", "reaction", null, react);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onClick: (e) => e.preventDefault(),
+        className: cn(
+          "inset-shadow-sm h-5 w-5 rounded-full bg-card p-0.5 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+          "data-[state=open]:!opacity-100",
+          "rounded-full",
+          (getIconReact() || isShowReact) && "opacity-100",
+          isPendingFbReaction && "animate-pulse !opacity-60"
+        ),
+        children: getIconReact() ? getIconReact() : /* @__PURE__ */ jsx(Icon, { name: "emoji_like_outline", size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: isMychat ? "end" : "start",
+        side: "top",
+        sideOffset: 4,
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        className: "flex w-fit flex-row gap-1 overflow-hidden rounded-full px-2.5 py-2 opacity-90",
+        children: getReactOption().map((r, index) => /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            onClick: () => onSelect(r),
+            className: "cursor-pointer p-0 hover:bg-transparent focus:bg-transparent",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "mx-1 inline-flex text-xl opacity-0",
+                style: {
+                  animation: "reaction-pop-in 220ms ease-out forwards",
+                  animationDelay: `${index * 30}ms`
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "inline-block scale-125 transition-all duration-100 ease-out hover:-translate-y-1 hover:scale-150", children: r.icon })
+              }
+            )
+          },
+          r.key
+        ))
+      }
+    )
+  ] });
+}
+export {
+  ZALO_REACTIONS,
+  ReactionButton as default
+};

package/components/chat-route/chat-box/right-side/chat-history.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, Fragment } from "react";
+import { ArrowLeft, LoaderCircle, ChevronDown } from "lucide-react";
+import useIntersectionObserver from "../../../../hooks/use-intersection-observer.js";
+import { Button } from "../../../custom/button.js";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { getLastChatHistory } from "@zenify-omni/chat-js/api/chat.js";
+import ChatMessage from "../chat-message.js";
+import { toast } from "sonner";
+import { normalizeChatMessagesBulk } from "../../../../store/chat-store.js";
+import SeparatorWithText from "../../../custom/separator-with-text.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const PAGE_LIMIT = 20;
+function ChatHistory({ selectedChat = {}, onHideHistory }) {
+  const { t } = useTranslation();
+  const ticketId = selectedChat._id;
+  const [topRef, isTopRefVisible] = useIntersectionObserver({
+    root: null,
+    threshold: 0.1
+  });
+  const [bottomRef, isBottomRefVisible] = useIntersectionObserver({
+    root: null,
+    threshold: 0.1
+  });
+  const containerRef = useRef(null);
+  const topMsgIdRef = useRef(null);
+  const scrollHeightRef = useRef(0);
+  const {
+    isLoading,
+    data: queryData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage
+  } = useInfiniteQuery({
+    queryKey: [QUERY_KEY.GET_LAST_CHAT_HISTORY, { ticketId }],
+    queryFn: async ({ pageParam = 1 }) => {
+      const { data } = await getLastChatHistory(
+        ticketId,
+        selectedChat.requester_id,
+        pageParam,
+        PAGE_LIMIT
+      );
+      if (!data || !data.length) {
+        toast.error(
+          i18n.t("chat:toast.loadOldMessagesFail", {
+            defaultValue: "T\u1EA3i tin nh\u1EAFn c\u0169 th\u1EA5t b\u1EA1i"
+          })
+        );
+        return [];
+      }
+      return data.reverse();
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage) return;
+      const lastPageLength = lastPage.length;
+      if (lastPageLength < PAGE_LIMIT) return null;
+      return lastPage[0]?._id;
+    },
+    initialPageParam: null
+  });
+  useEffect(() => {
+    if (!isTopRefVisible) return;
+    if (isLoading || isFetchingNextPage) return;
+    if (!hasNextPage) return;
+    fetchNextPage();
+  }, [isTopRefVisible]);
+  useEffect(() => {
+    const scrollTimeout = setTimeout(() => {
+      bottomRef.current.scrollIntoView();
+    }, 100);
+    return () => clearTimeout(scrollTimeout);
+  }, [ticketId]);
+  let messages = [];
+  if (!isLoading) {
+    for (let i = (queryData?.pages?.length || 0) - 1; i >= 0; i--) {
+      const page = queryData?.pages[i] || [];
+      messages = [...messages, ...page];
+    }
+    messages = normalizeChatMessagesBulk(messages);
+  }
+  useEffect(() => {
+    const topMsgId = messages[0]?._id;
+    if (!topMsgId) return;
+    const msgContainer = containerRef.current;
+    const prevScrollHeight = scrollHeightRef.current;
+    if (!topMsgIdRef.current) {
+      topMsgIdRef.current = topMsgId;
+    }
+    if (topMsgIdRef.current !== topMsgId) {
+      topMsgIdRef.current = topMsgId;
+      msgContainer.scrollTop = msgContainer.scrollHeight - prevScrollHeight;
+    }
+    scrollHeightRef.current = msgContainer.scrollHeight;
+  }, [messages.length]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full grow flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[80px] items-center space-x-3 border-b pl-5", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onHideHistory, children: /* @__PURE__ */ jsx(ArrowLeft, { size: 16 }) }),
+      /* @__PURE__ */ jsx("h4", { className: "text-md font-semibold", children: t("chat:title.recentMessageHistory", {
+        defaultValue: "L\u1ECBch s\u1EED tin nh\u1EAFn g\u1EA7n nh\u1EA5t v\u1EDBi kh\xE1ch h\xE0ng"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-[calc(100%-80px)] bg-primary-foreground", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: "h-full gap-2 overflow-y-scroll px-4 pb-4",
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: topRef }),
+            messages?.length && !isLoading && !isFetchingNextPage ? messages.map((message) => {
+              if (message.dateLabel) {
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(SeparatorWithText, { text: message.dateLabel }),
+                  /* @__PURE__ */ jsx(ChatMessage, { message })
+                ] }, message._id);
+              }
+              return /* @__PURE__ */ jsx(ChatMessage, { message }, message._id);
+            }) : /* @__PURE__ */ jsx("div", { className: "text-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "italic", children: t("chat:empty.noChatHistory", {
+              defaultValue: "Kh\xF4ng t\xECm th\u1EA5y l\u1ECBch s\u1EED tr\xF2 chuy\u1EC7n"
+            }) }) }),
+            /* @__PURE__ */ jsx("div", { ref: bottomRef })
+          ]
+        }
+      ),
+      (isLoading || isFetchingNextPage) && /* @__PURE__ */ jsx("div", { className: "absolute right-[50%] top-2 rounded-full bg-card p-1", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin", size: 32 }) }),
+      !isBottomRefVisible && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "z-1 absolute bottom-2 right-[40%] cursor-pointer rounded-full bg-card p-1 text-muted-foreground shadow-xl",
+          onClick: () => bottomRef.current.scrollIntoView({ behavior: "smooth" }),
+          "aria-label": "Scroll to bottom",
+          children: /* @__PURE__ */ jsx(ChevronDown, { size: 32, className: "translate-y-[1px] scale-[0.9]" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ChatHistory
+};