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

package/components/chat-route/chat-list/chat-list-selection-bar.js

@@ -0,0 +1,426 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { ArrowRightLeft, CircleMinus, CircleX, Tag, X } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import useChatStore from "../../../store/chat-store.js";
+import { isChatSelected } from "../../../store/chat-store-helpers.js";
+import { isRoleAgent, isRoleSale } from "@zenify-omni/chat-js/utils/auth.js";
+import {
+  closeSessionsBatch,
+  reassignChatRoomsBatch,
+  updateChatRoomTagsBatch
+} from "@zenify-omni/chat-js/api/chatroom.js";
+import { buildFilterConditions } from "./util.js";
+import { TransferOption } from "../util.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { ChatRoomTagBatchAction } from "@zenify-omni/chat-js/constants/chat-room-tag.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { CHAT_TAB_CONFIGS } from "../../settings-route/chat-layout/detail/constants.js";
+import { Button } from "../../custom/button.js";
+import CloseConversationDialog from "../shared/close-conversation-dialog.js";
+import ForceTransferDialog from "../shared/force-transfer-dialog.js";
+import AssignAgentDialog from "./assign-agent-dialog.js";
+import AssignTagDialog from "./assign-tag-dialog.js";
+import { formatNumber } from "@zenify-omni/chat-js/utils/formatters.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const BulkDialog = {
+  Close: "close",
+  AssignTag: "assign-tag",
+  UnassignTag: "unassign-tag",
+  Agent: "agent",
+  TransferTicket: "transfer-ticket"
+};
+const TAG_DIALOG_ACTIONS = {
+  [BulkDialog.AssignTag]: ChatRoomTagBatchAction.Add,
+  [BulkDialog.UnassignTag]: ChatRoomTagBatchAction.Remove
+};
+function ChatListSelectionBar({ className }) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [openDialog, setOpenDialog] = useState(null);
+  const [pendingAgent, setPendingAgent] = useState(null);
+  const [transferOption, setTransferOption] = useState(
+    TransferOption.ConversationOnly
+  );
+  const [
+    isChatListSelectMode,
+    selectedChatIds,
+    setChatListSelectMode,
+    isChatListSelectAll,
+    setChatListSelectAll,
+    excludeChatIds,
+    updateTagsForChats,
+    updateAssigneeForChats,
+    getFullFilterState,
+    chatList,
+    currentChatId,
+    currentChatTab
+  ] = useChatStore(
+    useShallow((state) => [
+      state.isChatListSelectMode,
+      state.selectedChatIds,
+      state.setChatListSelectMode,
+      state.isChatListSelectAll,
+      state.setChatListSelectAll,
+      state.excludeChatIds,
+      state.updateTagsForChats,
+      state.updateAssigneeForChats,
+      state.getFullFilterState,
+      state.chatList,
+      state.currentChatId,
+      state.currentChatTab
+    ])
+  );
+  const toSucceededRoomIds = (results = []) => results.filter((item) => item.success).map((item) => item.room_id);
+  const invalidateCurrentRoom = () => {
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId: currentChatId }]
+    });
+  };
+  const invalidateCurrentRoomIfAffected = () => {
+    const isAffected = !!currentChatId && isChatSelected(currentChatId, {
+      isSelectAll: isChatListSelectAll,
+      selectedChatIds,
+      excludeChatIds
+    });
+    if (!isAffected) return;
+    invalidateCurrentRoom();
+  };
+  const { mutate: bulkUpdateTags, isPending: isUpdatingTags } = useMutation({
+    mutationFn: ({ data }) => updateChatRoomTagsBatch({ data }),
+    onSuccess: (response, { tags, personalTags, action }) => {
+      toast.success(
+        action === ChatRoomTagBatchAction.Remove ? t("chat:toast.unassignLabelSuccess", {
+          defaultValue: "B\u1ECF g\xE1n nh\xE3n th\xE0nh c\xF4ng"
+        }) : t("chat:toast.assignLabelSuccess", {
+          defaultValue: "G\xE1n nh\xE3n th\xE0nh c\xF4ng"
+        })
+      );
+      const succeededRoomIds = toSucceededRoomIds(response?.data?.results);
+      updateTagsForChats({
+        chatIds: succeededRoomIds,
+        tags,
+        personalTags,
+        action
+      });
+      if (currentChatId && succeededRoomIds.includes(currentChatId)) {
+        invalidateCurrentRoom();
+      }
+      setOpenDialog(null);
+      setChatListSelectMode(false);
+    },
+    onError: throwException
+  });
+  const { mutate: bulkAssignAgent, isPending: isAssigningAgent } = useMutation({
+    mutationFn: ({ data }) => reassignChatRoomsBatch({ data }),
+    onSuccess: (response, { agent }) => {
+      const {
+        success = 0,
+        failed = 0,
+        total = 0,
+        results = []
+      } = response?.data ?? {};
+      if (failed > 0) {
+        toast.success(
+          t("chat:toast.changeAssigneeResult", {
+            success,
+            failed,
+            total,
+            defaultValue: "Chuy\u1EC3n th\xE0nh c\xF4ng {success}/{total} h\u1ED9i tho\u1EA1i, th\u1EA5t b\u1EA1i {failed}"
+          })
+        );
+      } else {
+        toast.success(
+          t("chat:toast.changeAssigneeSuccess", {
+            defaultValue: "Chuy\u1EC3n ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch th\xE0nh c\xF4ng"
+          })
+        );
+      }
+      const succeededRoomIds = toSucceededRoomIds(results);
+      updateAssigneeForChats({
+        chatIds: succeededRoomIds,
+        assignedId: agent.value,
+        assignedName: agent.label
+      });
+      if (currentChatId && succeededRoomIds.includes(currentChatId)) {
+        invalidateCurrentRoom();
+      }
+      setOpenDialog(null);
+      setPendingAgent(null);
+      setChatListSelectMode(false);
+    },
+    onError: throwException
+  });
+  const closeBatchErrorMessage = (error) => {
+    switch (error?.message) {
+      case "error:chatSession.roomLocked":
+        return t("chat:error.chatSessionRoomLocked", {
+          defaultValue: "H\u1ED9i tho\u1EA1i \u0111ang \u0111\u01B0\u1EE3c thao t\xE1c \u1EDF n\u01A1i kh\xE1c, vui l\xF2ng th\u1EED l\u1EA1i sau"
+        });
+      case "error:chatSession.notFound":
+        return t("chat:error.chatSessionNotFound", {
+          defaultValue: "Kh\xF4ng t\xECm th\u1EA5y phi\xEAn h\u1ED9i tho\u1EA1i"
+        });
+      case "error:chatSession.noValidIds":
+        return t("chat:error.chatSessionNoValidIds", {
+          defaultValue: "Kh\xF4ng c\xF3 h\u1ED9i tho\u1EA1i h\u1EE3p l\u1EC7 \u0111\u1EC3 th\u1EF1c hi\u1EC7n"
+        });
+      default:
+        return null;
+    }
+  };
+  const { mutate: bulkCloseSessions, isPending: isClosingSessions } = useMutation({
+    mutationFn: ({ data }) => closeSessionsBatch({ data }),
+    // Không cập nhật optimistic: socket ACTION_END của từng phòng đẩy về rồi
+    // applyEndedChat lo hết (chuyển tab, dọn SLA, log phân phối), dùng chung
+    // một nguồn dữ liệu cho cả chọn lẻ lẫn chọn tất cả.
+    onSuccess: () => {
+      toast.success(
+        t("chat:toast.closeConversationSuccess", {
+          defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i th\xE0nh c\xF4ng"
+        })
+      );
+      invalidateCurrentRoomIfAffected();
+      setOpenDialog(null);
+      setChatListSelectMode(false);
+    },
+    onError: (error) => {
+      const message = closeBatchErrorMessage(error);
+      if (!message) {
+        throwException(error);
+        return;
+      }
+      toast.error(message);
+    }
+  });
+  if (!isChatListSelectMode) return null;
+  const hasSelection = isChatListSelectAll || selectedChatIds.length > 0;
+  const currentTabLabel = CHAT_TAB_CONFIGS.find((tab) => tab.value === currentChatTab)?.label(t) ?? "";
+  const tagDialogAction = TAG_DIALOG_ACTIONS[openDialog];
+  const buildCurrentFilter = () => {
+    const filterState = getFullFilterState({
+      tab: currentChatTab,
+      options: { is_new: true }
+    });
+    return {
+      ...buildFilterConditions(filterState),
+      ...filterState.keyword?.length > 0 ? { search: filterState.keyword } : {}
+    };
+  };
+  const getChatRoomsByIds = (ids) => {
+    const idSet = new Set(ids);
+    return chatList.filter((chat) => idSet.has(chat._id));
+  };
+  const toSessionIds = (chatRooms) => chatRooms.map((chat) => chat.last_msg?.session_id).filter(Boolean);
+  const buildSelectAllScope = () => ({
+    all: true,
+    filter: buildCurrentFilter()
+  });
+  const buildBatchScope = () => isChatListSelectAll ? {
+    ...buildSelectAllScope(),
+    ...excludeChatIds.length ? { exclude_room_ids: excludeChatIds } : {}
+  } : { room_ids: selectedChatIds };
+  const buildSessionBatchScope = () => {
+    if (!isChatListSelectAll) {
+      return { session_ids: toSessionIds(getChatRoomsByIds(selectedChatIds)) };
+    }
+    const excludeSessionIds = toSessionIds(getChatRoomsByIds(excludeChatIds));
+    return {
+      ...buildSelectAllScope(),
+      ...excludeSessionIds.length ? { exclude_session_ids: excludeSessionIds } : {}
+    };
+  };
+  const handleConfirmClose = (closeTickets) => {
+    bulkCloseSessions({
+      data: {
+        ...buildSessionBatchScope(),
+        close_tickets: closeTickets
+      }
+    });
+  };
+  const handleConfirmTags = (selected, action) => {
+    const personalTags = selected.filter((tag) => tag.user_id);
+    const tags = selected.filter((tag) => !tag.user_id);
+    bulkUpdateTags({
+      data: {
+        ...buildBatchScope(),
+        action,
+        tag_ids: tags.map((tag) => tag._id),
+        personal_tag_ids: personalTags.map((tag) => tag._id)
+      },
+      tags,
+      personalTags,
+      action
+    });
+  };
+  const handleConfirmAssignee = (agent) => {
+    setPendingAgent(agent);
+    setTransferOption(TransferOption.ConversationOnly);
+    setOpenDialog(BulkDialog.TransferTicket);
+  };
+  const handleConfirmTransfer = (option) => {
+    if (!pendingAgent) return;
+    bulkAssignAgent({
+      data: {
+        ...buildSessionBatchScope(),
+        assigned_id: pendingAgent.value,
+        force: true,
+        reassign_tickets: option === TransferOption.WithTicket
+      },
+      agent: pendingAgent
+    });
+  };
+  const isShowAssignAgentButton = !isRoleAgent() && !isRoleSale();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-max max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border-subtle bg-card p-2 shadow-[0px_4px_16px_0px_rgba(16,24,40,0.12)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground", children: isChatListSelectAll ? t("chat:label.selectedAllConversationsInTab", {
+            tab: currentTabLabel,
+            defaultValue: "\u0110\xE3 ch\u1ECDn t\u1EA5t c\u1EA3 h\u1ED9i tho\u1EA1i \u1EDF tab {tab}"
+          }) : t("chat:label.selectedConversationsCount", {
+            count: formatNumber(selectedChatIds.length),
+            defaultValue: "\u0110\xE3 ch\u1ECDn {count} h\u1ED9i tho\u1EA1i"
+          }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground",
+              onClick: () => setChatListSelectAll(!isChatListSelectAll),
+              children: isChatListSelectAll ? t("common:action.deselectAll", { defaultValue: "B\u1ECF ch\u1ECDn t\u1EA5t c\u1EA3" }) : t("chat:action.selectAllConversations", {
+                defaultValue: "Ch\u1ECDn t\u1EA5t c\u1EA3 h\u1ED9i tho\u1EA1i"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              className: "shrink-0 gap-1.5 whitespace-nowrap bg-destructive text-white hover:bg-destructive",
+              disabled: !hasSelection,
+              loading: isClosingSessions,
+              onClick: () => setOpenDialog(BulkDialog.Close),
+              children: [
+                /* @__PURE__ */ jsx(CircleX, { className: "h-3.5 w-3.5" }),
+                t("chat:action.closeConversation", {
+                  defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i"
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "shrink-0 gap-1.5 whitespace-nowrap text-xs font-medium text-foreground",
+              disabled: !hasSelection,
+              onClick: () => setOpenDialog(BulkDialog.AssignTag),
+              children: [
+                /* @__PURE__ */ jsx(Tag, { className: "h-3.5 w-3.5" }),
+                t("chat:action.assignTags", { defaultValue: "G\xE1n tags" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "shrink-0 gap-1.5 whitespace-nowrap text-xs font-medium text-foreground",
+              disabled: !hasSelection,
+              onClick: () => setOpenDialog(BulkDialog.UnassignTag),
+              children: [
+                /* @__PURE__ */ jsx(CircleMinus, { className: "h-3.5 w-3.5" }),
+                t("chat:action.unassignTags", { defaultValue: "B\u1ECF g\xE1n tags" })
+              ]
+            }
+          ),
+          isShowAssignAgentButton && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "shrink-0 gap-1.5 whitespace-nowrap text-xs font-medium text-foreground",
+              disabled: !hasSelection,
+              loading: isAssigningAgent,
+              onClick: () => setOpenDialog(BulkDialog.Agent),
+              children: [
+                /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5" }),
+                t("chat:action.changeAssignee", {
+                  defaultValue: "\u0110\u1ED5i ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ml-1 shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+              onClick: () => setChatListSelectMode(false),
+              "aria-label": t("common:action.close", { defaultValue: "\u0110\xF3ng" }),
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CloseConversationDialog,
+      {
+        open: openDialog === BulkDialog.Close,
+        onOpenChange: (next) => setOpenDialog(next ? BulkDialog.Close : null),
+        isSubmitting: isClosingSessions,
+        onConfirm: handleConfirmClose
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssignTagDialog,
+      {
+        open: !!tagDialogAction,
+        onOpenChange: (next) => !next && setOpenDialog(null),
+        action: tagDialogAction ?? ChatRoomTagBatchAction.Add,
+        isSubmitting: isUpdatingTags,
+        onConfirm: handleConfirmTags
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssignAgentDialog,
+      {
+        open: openDialog === BulkDialog.Agent,
+        onOpenChange: (next) => setOpenDialog(next ? BulkDialog.Agent : null),
+        onConfirm: handleConfirmAssignee
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ForceTransferDialog,
+      {
+        open: openDialog === BulkDialog.TransferTicket,
+        onClose: () => setOpenDialog(BulkDialog.Agent),
+        transferOption,
+        setTransferOption,
+        isSubmitting: isAssigningAgent,
+        onConfirm: handleConfirmTransfer
+      }
+    )
+  ] });
+}
+export {
+  ChatListSelectionBar as default
+};

package/components/chat-route/chat-list/chat-search-preview.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import ChatListItem from "./chat-list-item.js";
+import InlineSearchResults from "./inline-search-results.js";
+import SearchResultHeader, { EMPTY_SEARCH_META } from "./search-result-header.js";
+const PREVIEW_LIMIT = 10;
+function ChatSearchPreview({
+  keyword,
+  onViewAllChats,
+  onViewAllMessages
+}) {
+  const { t } = useTranslation();
+  const [chatMeta, setChatMeta] = useState(EMPTY_SEARCH_META);
+  const [messageMeta, setMessageMeta] = useState(EMPTY_SEARCH_META);
+  const handleChatMeta = useCallback((meta) => setChatMeta(meta), []);
+  const handleMessageMeta = useCallback((meta) => setMessageMeta(meta), []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto border-t", children: [
+    /* @__PURE__ */ jsx(
+      SearchResultHeader,
+      {
+        title: t("common:label.conversation", { defaultValue: "H\u1ED9i tho\u1EA1i" }),
+        meta: chatMeta,
+        onViewAll: onViewAllChats
+      }
+    ),
+    /* @__PURE__ */ jsx(ChatListItem, { limit: PREVIEW_LIMIT, onMetaChange: handleChatMeta }),
+    /* @__PURE__ */ jsx(
+      SearchResultHeader,
+      {
+        title: t("common:label.message", { defaultValue: "Tin nh\u1EAFn" }),
+        meta: messageMeta,
+        onViewAll: onViewAllMessages
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InlineSearchResults,
+      {
+        keyword,
+        limit: PREVIEW_LIMIT,
+        onMetaChange: handleMessageMeta
+      }
+    )
+  ] });
+}
+export {
+  ChatSearchPreview as default
+};

package/components/chat-route/chat-list/chat-sort-menu.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowDownWideNarrow,
+  ClockArrowDown,
+  ClockArrowUp,
+  MessageSquareReply
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../../custom/button.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import { ChatSortValue } from "@zenify-omni/chat-js/constants/chat-message.js";
+import useChatSort from "../../../hooks/use-chat-sort.js";
+import { cn } from "../../../lib/utils.js";
+const CHAT_SORT_OPTIONS = [
+  {
+    value: ChatSortValue.LastMessageDesc,
+    icon: ArrowDownWideNarrow,
+    label: (t) => t("chat:sort.latestMessageFirst", {
+      defaultValue: "Tin nh\u1EAFn m\u1EDBi nh\u1EA5t l\xEAn \u0111\u1EA7u"
+    })
+  },
+  {
+    value: ChatSortValue.CreatedDesc,
+    icon: ClockArrowDown,
+    label: (t) => t("chat:sort.newestConversationFirst", {
+      defaultValue: "H\u1ED9i tho\u1EA1i m\u1EDBi t\u1EDBi c\u0169"
+    })
+  },
+  {
+    value: ChatSortValue.CreatedAsc,
+    icon: ClockArrowUp,
+    label: (t) => t("chat:sort.oldestConversationFirst", {
+      defaultValue: "H\u1ED9i tho\u1EA1i c\u0169 t\u1EDBi m\u1EDBi"
+    })
+  },
+  {
+    value: ChatSortValue.UnansweredFirst,
+    icon: MessageSquareReply,
+    label: (t) => t("chat:sort.unansweredFirst", {
+      defaultValue: "Ch\u01B0a tr\u1EA3 l\u1EDDi l\xEAn \u0111\u1EA7u"
+    })
+  }
+];
+function ChatSortMenu() {
+  const { t } = useTranslation();
+  const { sort, setSort } = useChatSort();
+  const selected = CHAT_SORT_OPTIONS.find((option) => option.value === sort) ?? CHAT_SORT_OPTIONS[0];
+  const TriggerIcon = selected.icon;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "icon",
+        variant: "outline",
+        className: "rounded-md p-2",
+        title: selected.label(t),
+        children: /* @__PURE__ */ jsx(TriggerIcon, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-64 p-1", children: CHAT_SORT_OPTIONS.map((option) => {
+      const OptionIcon = option.icon;
+      const isActive = option.value === selected.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSort(option.value),
+          className: cn(
+            "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-secondary",
+            isActive && "bg-secondary text-primary hover:bg-secondary"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(OptionIcon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label(t) })
+          ]
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+export {
+  ChatSortMenu as default
+};