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

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

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { navigate } from "../../../config/navigation.js";
+import { cn } from "../../../lib/utils.js";
+import { ChatHeader } from "./chat-header.js";
+import { ChatInput } from "./chat-input.js";
+import useChatStore from "../../../store/chat-store.js";
+import useChatSurface from "../../../hooks/use-chat-surface.js";
+import ChatMessageList from "./chat-message-list.js";
+import { ChatDropFile } from "./chat-drop-file.js";
+import { ChatHistory } from "./right-side/chat-history.js";
+import { X, CornerUpRight } from "lucide-react";
+import { getTabStatusFromChat } from "../../../store/chat-store-helpers.js";
+import useChatSelection from "../../../hooks/use-chat-selection.js";
+import ChatRoomProvider from "../../../provider/chat-room-provider.js";
+import {
+  useChatRoomContext,
+  useChatComposerContext
+} from "../../../provider/chat-room-hooks.js";
+import { useTranslation } from "react-i18next";
+function ChatBox({ chatRoomId }) {
+  useChatSurface();
+  return /* @__PURE__ */ jsx(ChatRoomProvider, { chatRoomId, children: /* @__PURE__ */ jsx(ChatBoxLayout, {}) });
+}
+function ChatBoxLayout() {
+  const { t } = useTranslation();
+  const [showHistory, setShowHistory] = useState(false);
+  const {
+    chatRoomId,
+    chatRoom,
+    chatRoomDetailReady,
+    isLoading: isChatRoomLoading,
+    isFetching,
+    customerDetail,
+    isChatAllowed: isChatAllowedComputed,
+    isZaloConnected,
+    topPriorityTicket,
+    noticeHeight
+  } = useChatRoomContext();
+  const { pastedFiles, setPastedFiles, showPreview, showDragBlur, dropZoneProps } = useChatComposerContext();
+  const setViewModeRightSide = useChatStore(
+    (state) => state.setViewModeRightSide
+  );
+  const setCurrentChatTab = useChatStore((state) => state.setCurrentChatTab);
+  const setCurrentChatId = useChatStore((state) => state.setCurrentChatId);
+  const { isSelectMode, selectedMessages, setSelectMode, forwardSelected } = useChatSelection(chatRoomId, chatRoom);
+  useEffect(() => {
+    if (chatRoom && !isFetching) {
+      setCurrentChatTab(getTabStatusFromChat(chatRoom));
+    }
+  }, [chatRoom, isFetching, setCurrentChatTab]);
+  useEffect(() => {
+    setViewModeRightSide(null);
+  }, [chatRoomId, setViewModeRightSide]);
+  const showCustomerSlot = showHistory;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full grow gap-0", children: [
+    /* @__PURE__ */ jsxs(
+      ChatDropFile,
+      {
+        className: cn(
+          "rounded-0 relative flex min-w-0 flex-1 flex-col overflow-hidden shadow-sm transition-all duration-200",
+          "rounded-xl"
+        ),
+        dropZoneProps,
+        showDragBlur,
+        children: [
+          isSelectMode ? /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-3 border-b bg-card px-4 py-3", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setSelectMode(false),
+                className: "flex h-7 w-7 items-center justify-center rounded-full hover:bg-muted",
+                children: /* @__PURE__ */ jsx(X, { size: 18, className: "text-muted-foreground" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: t("chat:label.selectedMessageCount", {
+              length: selectedMessages.length,
+              defaultValue: "{length} tin nh\u1EAFn \u0111\xE3 ch\u1ECDn"
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: forwardSelected,
+                disabled: selectedMessages.length === 0,
+                className: "flex items-center gap-1.5 rounded-full bg-primary px-3.5 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+                children: [
+                  /* @__PURE__ */ jsx(CornerUpRight, { size: 14 }),
+                  t("common:action.forward", { defaultValue: "Chuy\u1EC3n ti\u1EBFp" })
+                ]
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsx(
+            ChatHeader,
+            {
+              isLoading: isChatRoomLoading,
+              setShowHistory,
+              chatRoom,
+              chatItem: chatRoom,
+              contactDetail: customerDetail,
+              showHeaderAction: true,
+              isZaloConnected,
+              topPriorityTicket,
+              onMobileBack: () => {
+                setCurrentChatId(null);
+                navigate({ to: "/chat" });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative flex min-h-0 flex-1 flex-col bg-card", children: /* @__PURE__ */ jsx(
+            ChatMessageList,
+            {
+              isZaloConnected,
+              chatRoomId,
+              isChatAllowed: isChatAllowedComputed,
+              chatRoomDetailReady,
+              chatRoom,
+              ticket: chatRoom,
+              requester: customerDetail,
+              scrollPaddingBottom: noticeHeight || void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            ChatInput,
+            {
+              isAddFriendZalo: true,
+              ticketId: chatRoomId,
+              chatRoom,
+              requester: customerDetail,
+              pastedFiles,
+              setPastedFiles,
+              showPreview
+            }
+          )
+        ]
+      }
+    ),
+    showCustomerSlot && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "h-full w-[400px] shrink-0 rounded-xl border-l bg-card transition-all duration-200 max-xl:absolute max-xl:inset-y-0 max-xl:right-0 max-xl:z-20 max-xl:w-[400px] max-lg:w-[360px]"
+        ),
+        children: showHistory ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-xl", children: /* @__PURE__ */ jsx(
+          ChatHistory,
+          {
+            selectedChat: chatRoom,
+            onHideHistory: () => setShowHistory(false)
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-r-xl" })
+      }
+    ),
+    showCustomerSlot && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 z-10 bg-black/20 xl:hidden",
+        onClick: () => {
+          if (showCustomerSlot) setShowHistory(false);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ChatBox as default
+};

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCheck } from "lucide-react";
+import { useContext } from "react";
+import { cn } from "../../../lib/utils.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider
+} from "../../ui/tooltip.js";
+import { MessageContext, MessageViewers } from "./message-viewers.js";
+import { useTranslation } from "react-i18next";
+const MessageTime = ({ timeText, status, className, agentReads }) => {
+  const { t } = useTranslation();
+  const { isAgent, readReceipt } = useContext(MessageContext);
+  if (!timeText) return null;
+  const isSeen = isAgent && !!readReceipt;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mt-1 flex items-center justify-end gap-1 text-[10px] text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MessageViewers, { agentReads }),
+        timeText,
+        status === "success" && (isSeen ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            CheckCheck,
+            {
+              className: "h-3 w-3 text-success",
+              strokeWidth: 3
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: t("common:status.seen", { defaultValue: "\u0110\xE3 xem" }) })
+        ] }) }) : /* @__PURE__ */ jsx(CheckCheck, { className: "h-3 w-3" }))
+      ]
+    }
+  );
+};
+export {
+  MessageTime
+};

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

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, User } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../custom/avatar.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { createContext, useContext, useState, useMemo, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
+import useChatStore from "../../../store/chat-store.js";
+import { useShallow } from "zustand/shallow";
+import { getMessageViewers } from "@zenify-omni/chat-js/api/chatroom.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { useTranslation } from "react-i18next";
+const MessageContext = createContext({
+  messageId: null,
+  roomId: null,
+  messageSeq: null,
+  messageCreatedAt: null,
+  isAgent: false,
+  readReceipt: null
+});
+const MessageViewers = ({ agentReads }) => {
+  const { t } = useTranslation();
+  const { messageId, roomId, messageSeq, messageCreatedAt, isAgent } = useContext(MessageContext);
+  const [isOpen, setIsOpen] = useState(false);
+  const currentUser = getUser();
+  const mountedAtRef = useRef((/* @__PURE__ */ new Date()).toISOString());
+  const currentChatId = useChatStore((s) => s.currentChatId);
+  const { data: fetchedViewers, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_MESSAGE_VIEWERS, messageId],
+    queryFn: () => getMessageViewers(messageId).then(
+      (res) => (res?.data ?? []).map((v) => ({
+        _id: v._id ?? v.id,
+        name: v.name,
+        avatar: v.avatar,
+        readAt: v.readAt ?? v.lastReadAt
+      }))
+    ),
+    enabled: isOpen && !!messageId,
+    staleTime: 0
+  });
+  const storeReadsMap = useChatStore(
+    useShallow((s) => s.roomReadUpdates?.[roomId] ?? {})
+  );
+  const viewers = useMemo(() => {
+    const merged = {};
+    for (const r of agentReads ?? []) {
+      merged[r._id] = { ...r, readAt: r.readAt ?? r.readed_at };
+    }
+    for (const r of fetchedViewers ?? []) {
+      merged[r._id] = { ...merged[r._id], ...r };
+    }
+    const createdAtMs = messageCreatedAt ? new Date(messageCreatedAt).getTime() : null;
+    for (const [id, store] of Object.entries(storeReadsMap)) {
+      const covers = messageSeq != null ? store.lastReadSeq != null && store.lastReadSeq >= messageSeq : createdAtMs != null && store.readAt != null && new Date(store.readAt).getTime() >= createdAtMs;
+      if (covers) {
+        merged[id] = {
+          _id: id,
+          name: store.name ?? merged[id]?.name ?? id,
+          avatar: store.avatar ?? merged[id]?.avatar,
+          readAt: store.readAt ?? merged[id]?.readAt
+        };
+      }
+    }
+    if (roomId && currentChatId === roomId && currentUser?._id && !merged[currentUser._id]) {
+      merged[currentUser._id] = {
+        _id: currentUser._id,
+        name: currentUser.name,
+        avatar: currentUser.avatar,
+        readAt: mountedAtRef.current
+      };
+    }
+    return Object.values(merged);
+  }, [
+    fetchedViewers,
+    agentReads,
+    storeReadsMap,
+    messageSeq,
+    messageCreatedAt,
+    currentChatId,
+    roomId,
+    currentUser?._id
+  ]);
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex items-center gap-0.5 text-[10px] text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(Eye, { className: "h-3 w-3" }) }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "top",
+        align: isAgent ? "end" : "start",
+        className: "w-56 p-3",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: t("chat:label.viewers", { defaultValue: "Ng\u01B0\u1EDDi xem" }) }),
+          isLoading && !viewers.length ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("common:status.loading", { defaultValue: "\u0110ang t\u1EA3i..." }) }) : viewers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("chat:empty.noOneViewed", { defaultValue: "Ch\u01B0a c\xF3 ai xem" }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: viewers.map((viewer) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6 shrink-0", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: viewer.avatar, alt: viewer.name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted", children: /* @__PURE__ */ jsx(User, { className: "h-3 w-3" }) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs", children: viewer.name }),
+            viewer.readAt && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: formatDayWithTime(viewer.readAt) })
+          ] }, viewer._id)) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  MessageContext,
+  MessageViewers
+};

package/components/chat-route/chat-box/pasted-file-preview.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Send, X, Trash2, Loader2, AlertTriangle } from "lucide-react";
+import { useCallback } from "react";
+import { isImage } from "../../../utils/file.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  getColor,
+  getIconForContentType
+} from "../../custom/previews/file-preview.js";
+import "react";
+import { useTranslation } from "react-i18next";
+function PastedFilePreview({
+  pastedFiles,
+  onRemove,
+  onSendPastedFiles,
+  onRemoveAll,
+  isSending,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const renderPreview = useCallback((file) => {
+    if (file.isCompressing) {
+      return /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded bg-muted dark:bg-gray-700", children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 animate-pulse rounded bg-muted dark:bg-gray-600" }) });
+    }
+    const type = file.type;
+    const extension = file.name?.split(".")?.pop();
+    if (isImage(type, extension)) {
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: file.preview,
+            alt: file.name,
+            title: file.name,
+            className: cn(
+              "h-20 w-20 cursor-pointer rounded object-cover",
+              file.compressionError && "opacity-60"
+            ),
+            draggable: false
+          }
+        ),
+        file.compressionError && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 flex items-center justify-center rounded border-2 border-destructive bg-destructive/20",
+            title: t("chat:message.imageExceedsChannelLimit", {
+              defaultValue: "\u1EA2nh v\u01B0\u1EE3t gi\u1EDBi h\u1EA1n dung l\u01B0\u1EE3ng c\u1EE7a k\xEAnh"
+            }),
+            children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-20 w-20 cursor-pointer flex-col items-center justify-center gap-0.5 rounded bg-muted dark:bg-gray-700",
+          getColor(file.type, file.name)
+        ),
+        title: file.name,
+        children: [
+          getIconForContentType(type, extension, "h-6 w-6 text-muted-foreground"),
+          /* @__PURE__ */ jsx("span", { children: extension })
+        ]
+      }
+    );
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-full left-0 z-50 mb-1 min-w-[300px] rounded-lg border border-border-subtle bg-card p-2 shadow-lg animate-in fade-in slide-in-from-bottom-2 dark:border-border dark:bg-gray-800",
+        props.containerClassName
+      ),
+      children: [
+        isSending && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-primary/20", children: /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between border-b border-border-subtle pb-2 dark:border-border", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground dark:text-muted-foreground", children: t("chat:label.pastedFileCount", {
+            length: pastedFiles.length,
+            defaultValue: "{length} t\u1EC7p \u0111\xE3 d\xE1n"
+          }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onSendPastedFiles,
+                disabled: isSending,
+                className: "flex h-7 items-center gap-1 rounded-md bg-primary px-2 text-xs font-medium text-white transition-colors hover:bg-primary disabled:cursor-not-allowed disabled:opacity-60",
+                title: t("chat:action.sendNow", { defaultValue: "G\u1EEDi ngay" }),
+                children: [
+                  /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                  /* @__PURE__ */ jsx("span", { children: t("common:action.send", { defaultValue: "G\u1EEDi" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onRemoveAll,
+                className: "flex h-7 items-center gap-1 rounded-md bg-destructive px-2 text-xs font-medium text-white transition-colors hover:bg-destructive",
+                title: t("common:action.deleteAll", { defaultValue: "X\xF3a t\u1EA5t c\u1EA3" }),
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" }),
+                  /* @__PURE__ */ jsx("span", { children: t("common:action.deleteAll", { defaultValue: "X\xF3a t\u1EA5t c\u1EA3" }) })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-w-full overflow-hidden rounded-md bg-surface-subtle p-2 dark:bg-foreground", children: /* @__PURE__ */ jsx("div", { className: "flex flex-nowrap gap-2 overflow-x-auto px-2 pt-2", children: pastedFiles.map((file) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "group relative flex flex-shrink-0 items-center gap-2 rounded-md border border-border-subtle bg-card p-0 transition-colors hover:border-border dark:border-border dark:bg-gray-800 dark:hover:border-border",
+            children: [
+              renderPreview(file),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onRemove(file.id),
+                  className: "absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-white opacity-0 transition-opacity hover:bg-destructive group-hover:opacity-100",
+                  "aria-label": t("chat:action.deleteFile", {
+                    defaultValue: "X\xF3a file"
+                  }),
+                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        )) }) })
+      ]
+    }
+  );
+}
+export {
+  PastedFilePreview as default
+};