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

package/components/chat-route/chat-box/chat-header-actions-inline.js

@@ -0,0 +1,1055 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "../../ui/dialog.js";
+import { Button } from "../../custom/button.js";
+import {
+  Power,
+  RotateCcw,
+  UserPlus,
+  Users,
+  UserCheck,
+  Forward,
+  Inbox,
+  ChevronDown,
+  Search,
+  MoreVertical,
+  Bot,
+  LogOut
+} from "lucide-react";
+import InRoomDialog from "./right-side/in-room-dialog.js";
+import InviteAgentDialog from "../../dialogs/invite-agent.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  inviteUsers,
+  closeSession,
+  reopenSession,
+  receiveInvite,
+  receiveSession,
+  distributeManual,
+  getSessionMembers,
+  removeUsers
+} from "@zenify-omni/chat-js/api/chatroom.js";
+import { getUsersInQueues } from "@zenify-omni/chat-js/api/settings/queue-v3.js";
+import { toast } from "sonner";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import {
+  getAvailableAgents,
+  allUser as searchAllUser,
+  findUser
+} from "@zenify-omni/chat-js/api/user.js";
+import { getChatTimeoutConfig } from "@zenify-omni/chat-js/api/settings/chat-timeout.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { UserRole, UserRoleContext } from "@zenify-omni/chat-js/constants/user.js";
+import { useGetQueueDetail } from "../../../hooks/use-setting-common.js";
+import useDebounce from "../../../hooks/use-debounce.js";
+import { SubscribedUserPermission } from "../../settings-route/switchboard/queue-new/constant.js";
+import CloseConversationDialog from "../shared/close-conversation-dialog.js";
+import useChatStore from "../../../store/chat-store.js";
+import {
+  getTabStatusFromChat,
+  isClosedChat,
+  isReceivedChat
+} from "../../../store/chat-store-helpers.js";
+import {
+  buildActionReceiveMessage,
+  ChatFilterAssignStatus
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import {
+  appendOptimisticDistributionLog,
+  applyReceivedChat,
+  clearReceiveHandled,
+  markReceiveHandled
+} from "../../../utils/chat-actions.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import useReassign from "../hooks/use-reassign.js";
+import { isZaloGeneralChannel, isZaloPersonal } from "../util.js";
+import ForceTransferDialog from "../shared/force-transfer-dialog.js";
+import { Avatar, AvatarFallback } from "../../custom/avatar.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import PopupConfirm from "../../custom/popup-confirm.js";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from "../../ui/dropdown-menu.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function removeSkipReasonLabel(reason) {
+  switch (reason) {
+    case "assigned_agent":
+      return i18n.t("chat:message.cannotRemoveAssignedAgent", {
+        defaultValue: "Kh\xF4ng x\xF3a \u0111\u01B0\u1EE3c chuy\xEAn vi\xEAn ph\u1EE5 tr\xE1ch \u2014 h\xE3y chuy\u1EC3n ti\u1EBFp ho\u1EB7c \u0111\xF3ng h\u1ED9i tho\u1EA1i"
+      });
+    case "ticket_linked":
+      return i18n.t("chat:message.cannotRemoveTicketLinked", {
+        defaultValue: "Th\xE0nh vi\xEAn n\xE0y \u0111ang g\u1EAFn v\u1EDBi ticket c\u1EE7a h\u1ED9i tho\u1EA1i"
+      });
+    case "queue_member":
+      return i18n.t("chat:message.cannotRemoveQueueMember", {
+        defaultValue: "Th\xE0nh vi\xEAn n\xE0y th\u1EA5y h\u1ED9i tho\u1EA1i nh\u1EDD thu\u1ED9c nh\xF3m ph\xE2n ph\u1ED1i, kh\xF4ng x\xF3a ri\xEAng \u0111\u01B0\u1EE3c"
+      });
+    case "not_a_member":
+      return i18n.t("chat:message.cannotRemoveNotAMember", {
+        defaultValue: "Ng\u01B0\u1EDDi n\xE0y kh\xF4ng ph\u1EA3i th\xE0nh vi\xEAn c\u1EE7a \u0111o\u1EA1n chat"
+      });
+    default:
+      return "";
+  }
+}
+const AVATAR_COLORS = [
+  { bg: "bg-chart-1/20", text: "text-chart-1" },
+  { bg: "bg-chart-2/20", text: "text-chart-2" },
+  { bg: "bg-chart-4/20", text: "text-chart-4" },
+  { bg: "bg-chart-5/20", text: "text-chart-5" },
+  { bg: "bg-chart-7/20", text: "text-chart-7" },
+  { bg: "bg-chart-8/20", text: "text-chart-8" },
+  { bg: "bg-chart-9/20", text: "text-chart-9" }
+];
+function colorForName(name = "") {
+  const hash = name.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length];
+}
+function nameInitials(name = "") {
+  return name.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase() || "?";
+}
+function isAssignPillDisabled(chatRoom) {
+  const user = getUser();
+  if (isClosedChat(chatRoom)) {
+    return true;
+  }
+  if (isZaloPersonal(chatRoom) && !isZaloGeneralChannel(chatRoom)) {
+    return true;
+  }
+  return ![UserRole.ADMINISTRATOR, UserRole.SUPERVISOR].includes(user?.role);
+}
+function AgentPickerContent({ chatRoom, assignedId, onClose }) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const user = getUser();
+  const [search, setSearch] = useState("");
+  const [assignAgent, setAssignAgent] = useState(null);
+  const previousAgentRef = useRef(null);
+  const callingAPIRef = useRef(false);
+  const confirmRef = useRef(null);
+  const sessionId = chatRoom?.session?._id;
+  const {
+    reassignMutation,
+    forceAssignMutation,
+    showForceDialog,
+    closeForceDialog,
+    transferOption,
+    setTransferOption
+  } = useReassign({
+    chatRoom,
+    targetAssignedId: assignAgent?.value,
+    targetAssignedName: assignAgent?.label,
+    onError: () => setAssignAgent(previousAgentRef.current),
+    onClose
+  });
+  useQuery({
+    queryKey: [
+      QUERY_KEY.GET_CHAT_ASSIGN_AGENT,
+      { assign_agent_id: assignedId }
+    ],
+    queryFn: async () => {
+      const { data } = await findUser({ _id: assignedId });
+      setAssignAgent(
+        !data ? null : { value: data._id, label: data.name, role: data.role }
+      );
+      return data || null;
+    },
+    enabled: !!assignedId && !chatRoom?.users_in_room?.some((x) => x._id === assignedId)
+  });
+  const debouncedSearch = useDebounce(search, 500);
+  const keyword = debouncedSearch.trim();
+  const { data: agentList = [] } = useQuery({
+    queryKey: ["agent-picker-list", keyword],
+    queryFn: async () => {
+      const params = {
+        roles: [
+          UserRole.ADMINISTRATOR,
+          UserRole.SUPERVISOR,
+          UserRole.AGENT,
+          UserRole.SALE,
+          UserRole.SALE_TEAM_LEADER,
+          UserRole.TEAM_LEADER
+        ],
+        ...keyword.length > 0 ? { keyword } : {}
+      };
+      const response = await searchAllUser(params);
+      return response.data?.list?.map((u) => ({
+        value: u._id,
+        label: u.name,
+        role: u.role
+      })) ?? [];
+    },
+    staleTime: 3e4
+  });
+  useEffect(() => {
+    if (!assignedId) {
+      setAssignAgent(null);
+    } else if (chatRoom?.users_in_room?.some((user2) => user2._id === assignedId)) {
+      const userInRoom = chatRoom.users_in_room.find(
+        (user2) => user2._id === assignedId
+      );
+      setAssignAgent({
+        value: userInRoom?._id,
+        label: userInRoom?.name
+      });
+    }
+  }, [assignedId, chatRoom?.users_in_room]);
+  const distributeManualMutation = useMutation({
+    mutationFn: (data) => distributeManual({ data }),
+    onError: (error) => {
+      callingAPIRef.current = false;
+      onClose?.();
+      throwException(error);
+    },
+    onSettled: () => {
+      callingAPIRef.current = false;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+      onClose?.();
+    }
+  });
+  const receiveChatMutation = useMutation({
+    mutationFn: async (id) => {
+      await receiveSession(id);
+    },
+    // Đánh dấu guard NGAY khi bấm (không chờ API trả về): echo ACTION_RECEIVE từ
+    // socket có thể tới sớm hơn onSuccess -> nếu chỉ mark ở onSuccess sẽ bị nhân
+    // đôi msg. Mark sớm để socket handler tự bỏ qua echo (key: room_id + user_id).
+    onMutate: () => {
+      const roomId = chatRoom?._id;
+      if (roomId) markReceiveHandled(roomId, user?._id);
+    },
+    onError: (error) => {
+      const roomId = chatRoom?._id;
+      if (roomId) clearReceiveHandled(roomId, user?._id);
+      onClose?.();
+      throwException(error);
+    },
+    onSettled: () => {
+      callingAPIRef.current = false;
+    },
+    onSuccess: async () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_LIST_USER_TICKETS_PREVIEW, sessionId]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+      const roomId = chatRoom?._id;
+      if (roomId) {
+        const message = buildActionReceiveMessage({
+          roomId,
+          source: chatRoom?.source,
+          user,
+          tenantId: user?.tenant_id
+        });
+        await applyReceivedChat(message);
+        appendOptimisticDistributionLog(roomId, "receive", user?.name);
+      }
+      onClose?.();
+    }
+  });
+  const handleSelectAgent = (agent) => {
+    previousAgentRef.current = assignAgent;
+    setAssignAgent(agent);
+    confirmRef?.current?.click();
+  };
+  const handleAssignAgent = async () => {
+    callingAPIRef.current = true;
+    if (!isReceivedChat(chatRoom) && assignAgent?.value === user?._id) {
+      receiveChatMutation.mutate(sessionId);
+      return;
+    }
+    if (!chatRoom?.session?.distribution) {
+      distributeManualMutation.mutate({
+        target_type: "CHAT",
+        target_id: sessionId,
+        assigned_id: assignAgent?.value
+      });
+    } else {
+      reassignMutation.mutate(assignAgent.value);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("common:placeholder.selectAssignee", {
+        defaultValue: "Ch\u1ECDn ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full bg-muted px-3 py-2", children: [
+        /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: t("chat:action.findAgent", {
+              defaultValue: "T\xECm chuy\xEAn vi\xEAn"
+            }),
+            className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto overflow-x-hidden", children: agentList.map((agent) => {
+        const color = colorForName(agent.label);
+        const isSelected = agent.value === assignAgent?.value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleSelectAgent(agent),
+            className: cn(
+              "flex w-full min-w-0 items-center gap-3 rounded-lg px-2 py-2.5 text-left transition-colors hover:bg-surface-subtle",
+              isSelected && "bg-primary/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold",
+                    color.bg,
+                    color.text
+                  ),
+                  children: nameInitials(agent.label)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: maskData(agent.label) }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: UserRoleContext[agent.role] || agent.role })
+              ] })
+            ]
+          },
+          agent.value
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PopupConfirm,
+      {
+        trigger: /* @__PURE__ */ jsx(Button, { ref: confirmRef, variant: "destructive", className: "hidden" }),
+        title: chatRoom?.session?.distribution ? t("chat:dialog.confirmTransferOwner", {
+          defaultValue: "B\u1EA1n c\xF3 mu\u1ED1n chuy\u1EC3n ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch cho h\u1ED9i tho\u1EA1i n\xE0y?"
+        }) : t("chat:dialog.confirmDistributeConversation", {
+          defaultValue: "B\u1EA1n c\xF3 mu\u1ED1n ph\xE2n b\u1ED5 cu\u1ED9c h\u1ED9i tho\u1EA1i n\xE0y?"
+        }),
+        description: t("chat:message.agentWillHandleConversation", {
+          defaultValue: "Chuy\xEAn vi\xEAn n\xE0y s\u1EBD ti\u1EBFp nh\u1EADn v\xE0 x\u1EED l\xFD \u0111o\u1EA1n h\u1ED9i tho\u1EA1i n\xE0y!"
+        }),
+        onConfirm: handleAssignAgent,
+        onCancel: () => setAssignAgent(previousAgentRef.current),
+        onOpenChanged: (open) => {
+          if (!open && !callingAPIRef.current)
+            setAssignAgent(previousAgentRef.current);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ForceTransferDialog,
+      {
+        open: showForceDialog,
+        onClose: () => {
+          closeForceDialog();
+          setAssignAgent(previousAgentRef.current);
+          callingAPIRef.current = false;
+        },
+        transferOption,
+        setTransferOption,
+        forceAssignMutation
+      }
+    )
+  ] });
+}
+function AgentAssignPill({ chatItem, assignedId }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const assignedUser = chatItem?.users_in_room?.find(
+    (u) => u._id === assignedId
+  );
+  const assignedName = assignedUser?.name || chatItem?.assigned?.name || "";
+  const initials = assignedName?.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase() || "?";
+  const isUnassigned = !assignedId;
+  const isDisabled = isAssignPillDisabled(chatItem);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: open && !isDisabled,
+      onOpenChange: (next) => setOpen(isDisabled ? false : next),
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            disabled: isDisabled,
+            className: `flex min-w-[100px] max-w-[180px] items-center justify-between gap-1.5 rounded-full border p-1 hover:bg-surface-subtle focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent ${isUnassigned ? "border-dashed border-muted" : "border-muted"}`,
+            title: isUnassigned ? t("common:placeholder.selectAssignee", {
+              defaultValue: "Ch\u1ECDn ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+            }) : assignedName,
+            children: [
+              isUnassigned ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-muted", children: /* @__PURE__ */ jsx(UserPlus, { size: 14, className: "text-muted-foreground" }) }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground", children: t("common:label.assignee", {
+                  defaultValue: "Ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+                }) })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/10 text-xs font-semibold text-primary", children: initials }) }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-foreground", children: assignedName })
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "shrink-0 text-muted-foreground" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-3", align: "start", children: /* @__PURE__ */ jsx(
+          AgentPickerContent,
+          {
+            chatRoom: chatItem,
+            assignedId,
+            onClose: () => setOpen(false)
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ChatHeaderActionsInline({
+  chatItem = {},
+  customer,
+  setShowHistory,
+  hideViewMembers = false,
+  hideInvite = false,
+  topPriorityTicket,
+  onToggleAiPanel
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const queryClient = useQueryClient();
+  const queueIds = chatItem?.session?.distribution?.queue_ids || [];
+  const queueId = queueIds.length > 0 ? queueIds[0] : null;
+  const { data: usersInQueues } = useQuery({
+    queryKey: ["users-in-queues", queueId],
+    queryFn: async () => {
+      const { data } = await getUsersInQueues({ queueIds: [queueId] });
+      return data;
+    },
+    enabled: !!queueId
+  });
+  const { data: queueDetail } = useGetQueueDetail({ queueId });
+  const [isInviteDialogOpen, setIsInviteDialogOpen] = useState(false);
+  const [showCloseDialog, setShowCloseDialog] = useState(false);
+  const [showConfirmCloseDialog, setShowConfirmCloseDialog] = useState(false);
+  const [viewMembersOpen, setViewMembersOpen] = useState(false);
+  const [removingUserId, setRemovingUserId] = useState(null);
+  const [showConfirmLeaveDialog, setShowConfirmLeaveDialog] = useState(false);
+  const isClosed = isClosedChat(chatItem);
+  const isReceived = isReceivedChat(chatItem);
+  const isNotReceivedChat = useMemo(
+    () => getTabStatusFromChat(chatItem) === ChatFilterAssignStatus.NotReceived,
+    [chatItem]
+  );
+  const assignedId = useMemo(() => {
+    if (topPriorityTicket?.assign_agent_id) {
+      return topPriorityTicket.assign_agent_id;
+    }
+    if (Array.isArray(chatItem.session?.distribution?.user_ids) && chatItem.session.distribution.user_ids.length > 0) {
+      return chatItem.session.assigned_id;
+    }
+    if (Array.isArray(chatItem.session?.distribution?.queue_ids) && chatItem.session.distribution.queue_ids.length > 0 && usersInQueues?.includes(user?._id)) {
+      return user?._id;
+    }
+    return null;
+  }, [chatItem.session, topPriorityTicket, user?._id, usersInQueues]);
+  const canReceive = useMemo(() => {
+    if (topPriorityTicket?.assign_agent_id) {
+      return [topPriorityTicket.assign_agent_id].includes(user?._id);
+    }
+    if (Array.isArray(chatItem.session?.distribution?.user_ids) && chatItem.session.distribution.user_ids.length > 0) {
+      if (Array.isArray(chatItem.session?.distribution?.queue_ids) && chatItem.session.distribution.queue_ids.length > 0) {
+        if (queueDetail && [SubscribedUserPermission.CAN_TAKE_OVER].includes(
+          queueDetail.subscribed_user_permission
+        ) && usersInQueues?.includes(user?._id)) {
+          return true;
+        }
+      }
+      return [chatItem.session.assigned_id].includes(user?._id);
+    }
+    if (Array.isArray(chatItem.session?.distribution?.queue_ids) && chatItem.session.distribution.queue_ids.length > 0 && usersInQueues?.includes(user?._id)) {
+      return true;
+    }
+    return false;
+  }, [
+    chatItem.session,
+    queueDetail,
+    topPriorityTicket?.assign_agent_id,
+    user?._id,
+    usersInQueues
+  ]);
+  const receiveChatMutation = useMutation({
+    mutationFn: async (sessionId) => {
+      await receiveSession(sessionId);
+    },
+    // Đánh dấu guard NGAY khi bấm (không chờ API trả về): echo ACTION_RECEIVE từ
+    // socket có thể tới sớm hơn onSuccess -> nếu chỉ mark ở onSuccess sẽ bị nhân
+    // đôi msg. Mark sớm để socket handler tự bỏ qua echo (key: room_id + user_id).
+    onMutate: () => {
+      const roomId = chatItem?._id;
+      if (roomId) markReceiveHandled(roomId, user?._id);
+    },
+    onError: (error) => {
+      const roomId = chatItem?._id;
+      if (roomId) clearReceiveHandled(roomId, user?._id);
+      throwException(error);
+    },
+    onSuccess: async () => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEY.GET_LIST_USER_TICKETS_PREVIEW,
+          chatItem?.session?._id
+        ]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+      const roomId = chatItem?._id;
+      if (roomId) {
+        const message = buildActionReceiveMessage({
+          roomId,
+          source: chatItem?.source,
+          user,
+          tenantId: user?.tenant_id
+        });
+        await applyReceivedChat(message);
+        appendOptimisticDistributionLog(roomId, "receive", user?.name);
+      }
+    }
+  });
+  const reopenMutation = useMutation({
+    mutationFn: () => reopenSession(chatItem?._id),
+    onError: throwException,
+    // Không cập nhật optimistic: reopen sinh session mới ở BE nên chỉ echo
+    // ACTION_REOPEN từ socket mới mang đủ dữ liệu (session_id...) để vá store;
+    // log phân phối cũng do applyReopenedChat ghi.
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.reopenConversationSuccess", {
+          defaultValue: "M\u1EDF l\u1EA1i h\u1ED9i tho\u1EA1i th\xE0nh c\xF4ng"
+        })
+      );
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+    }
+  });
+  const {
+    data: agentChatOnlineList,
+    isLoading: isAgentChatOnlineListLoading,
+    refetch
+  } = useQuery({
+    queryKey: ["agent-chat-online-list"],
+    queryFn: async () => {
+      const { data } = await getAvailableAgents();
+      return data;
+    },
+    enabled: false
+  });
+  const agentChatOnlineListFiltered = useMemo(() => {
+    const excludeUserIds = [
+      ...(chatItem?.users_in_room || []).map((user2) => user2._id),
+      user?._id,
+      ...chatItem?.session?.invited_user_ids || []
+    ];
+    return (agentChatOnlineList || []).filter(
+      (agent) => !excludeUserIds.includes(agent._id)
+    );
+  }, [
+    agentChatOnlineList,
+    chatItem?.users_in_room,
+    chatItem?.session?.invited_user_ids,
+    user?._id
+  ]);
+  const sessionMembersQueryKey = [
+    "chat-session-members",
+    chatItem?.session?._id
+  ];
+  const { data: sessionMembers, isLoading: isMembersLoading } = useQuery({
+    queryKey: sessionMembersQueryKey,
+    queryFn: async () => {
+      const { data } = await getSessionMembers({
+        sessionId: chatItem.session._id
+      });
+      return data;
+    },
+    enabled: viewMembersOpen && !!chatItem?.session?._id
+  });
+  const canLeaveSession = useMemo(() => {
+    const session = chatItem?.session;
+    const uid = user?._id;
+    if (!session || !uid) return false;
+    if (String(session.assigned_id ?? "") === String(uid)) return false;
+    const joined = session.invited_user_ids?.includes(uid);
+    const pendingJoin = session.subscribed_user_ids?.includes(uid) && !joined;
+    if (pendingJoin) return false;
+    return Boolean(
+      joined || session.view_only_user_ids?.includes(uid) || session.can_take_over_user_ids?.includes(uid)
+    );
+  }, [chatItem?.session, user?._id]);
+  const leaveSessionMutation = useMutation({
+    mutationFn: () => removeUsers({
+      sessionId: chatItem?.session?._id,
+      data: { user_ids: [user?._id] }
+    }),
+    onSuccess: ({ data }) => {
+      setShowConfirmLeaveDialog(false);
+      if (data?.skipped?.length && !data?.removed?.length) {
+        toast.error(removeSkipReasonLabel(data.skipped[0]?.reason));
+        return;
+      }
+      toast.success(
+        i18n.t("chat:toast.leaveConversationSuccess", {
+          defaultValue: "\u0110\xE3 r\u1EDDi kh\u1ECFi \u0111o\u1EA1n chat"
+        })
+      );
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+    },
+    onError: throwException
+  });
+  const removeMemberMutation = useMutation({
+    mutationFn: (userId) => removeUsers({
+      sessionId: chatItem?.session?._id,
+      data: { user_ids: [userId] }
+    }),
+    onMutate: (userId) => setRemovingUserId(userId),
+    onSettled: () => setRemovingUserId(null),
+    onSuccess: ({ data }) => {
+      if (data?.skipped?.length && !data?.removed?.length) {
+        toast.error(removeSkipReasonLabel(data.skipped[0]?.reason));
+      } else {
+        toast.success(
+          i18n.t("chat:toast.removeMemberSuccess", {
+            defaultValue: "X\xF3a th\xE0nh vi\xEAn kh\u1ECFi \u0111o\u1EA1n chat th\xE0nh c\xF4ng"
+          })
+        );
+      }
+      queryClient.invalidateQueries({ queryKey: sessionMembersQueryKey });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL]
+      });
+    },
+    onError: throwException
+  });
+  const inviteMutation = useMutation({
+    mutationFn: (data) => inviteUsers({ sessionId: chatItem?.session?._id, data }),
+    onSuccess: () => {
+      setIsInviteDialogOpen(false);
+      toast.success(
+        i18n.t("chat:toast.inviteAgentSuccess", {
+          defaultValue: "M\u1EDDi chuy\xEAn vi\xEAn th\xE0nh c\xF4ng"
+        })
+      );
+    },
+    onError: throwException
+  });
+  const closeSessionMutation = useMutation({
+    mutationFn: ({ sessionId, closeTickets }) => closeSession({ sessionId, payload: { close_tickets: closeTickets } }),
+    // Không cập nhật optimistic: chuyển tab, thêm msg, dọn SLA và log phân phối
+    // đều do socket ACTION_END -> applyEndedChat lo, để mọi client dùng chung
+    // một nguồn dữ liệu.
+    onSuccess: () => {
+      setShowCloseDialog(false);
+      setShowConfirmCloseDialog(false);
+      toast.success(
+        i18n.t("chat:toast.closeConversationSuccess", {
+          defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i th\xE0nh c\xF4ng"
+        })
+      );
+    },
+    onError: throwException
+  });
+  const receiveInviteMutation = useMutation({
+    mutationFn: (sessionId) => receiveInvite({ sessionId }),
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.joinConversationSuccess", {
+          defaultValue: "Tham gia h\u1ED9i tho\u1EA1i th\xE0nh c\xF4ng"
+        })
+      );
+      useChatStore.getState().resetLastRefreshTimeTicketPage();
+    },
+    onError: throwException
+  });
+  const {
+    reassignMutation: takeOverMutation,
+    forceAssignMutation: takeOverForceMutation,
+    showForceDialog: showTakeOverForceDialog,
+    closeForceDialog: closeTakeOverForceDialog,
+    transferOption: takeOverTransferOption,
+    setTransferOption: setTakeOverTransferOption
+  } = useReassign({ chatRoom: chatItem, targetAssignedId: user?._id });
+  const userRoles = user?.roles?.length > 0 ? user.roles : user?.role ? [user.role] : [];
+  const isAgentOrSale = userRoles.some(
+    (r) => r === UserRole.AGENT || r === UserRole.SALE
+  );
+  const shouldCheckLivechatCloseConfig = isAgentOrSale && chatItem?.source === "chat";
+  const {
+    data: livechatTimeoutConfig,
+    isLoading: isLivechatConfigLoading,
+    isError: isLivechatConfigError
+  } = useQuery({
+    queryKey: [QUERY_KEY.GET_CHAT_TIMEOUT_CONFIG, "livechat"],
+    queryFn: () => getChatTimeoutConfig({ channelType: "livechat" }),
+    enabled: shouldCheckLivechatCloseConfig
+  });
+  const hasTenantSpecificLivechatConfig = !!livechatTimeoutConfig && livechatTimeoutConfig?.tenant_id !== "default";
+  const canShowCloseSessionButton = !shouldCheckLivechatCloseConfig || isLivechatConfigLoading || isLivechatConfigError || !hasTenantSpecificLivechatConfig || livechatTimeoutConfig?.agent_can_end === true && livechatTimeoutConfig?.tenant_id === user?.tenant_id;
+  const handleCloseSession = (isCloseWithTicket) => {
+    closeSessionMutation.mutate({
+      sessionId: chatItem?.session?._id,
+      closeTickets: isCloseWithTicket
+    });
+  };
+  const actions = useMemo(() => {
+    const items = [];
+    if (isClosed) {
+      if (!hideViewMembers) {
+        items.push({
+          key: "view-members",
+          label: i18n.t("chat:action.viewMembers", {
+            defaultValue: "Xem th\xE0nh vi\xEAn"
+          }),
+          icon: Users,
+          onClick: () => setViewMembersOpen(true),
+          overflow: true
+        });
+      }
+      items.push({
+        key: "reopen",
+        label: i18n.t("chat:action.reopenConversation", {
+          defaultValue: "M\u1EDF l\u1EA1i h\u1ED9i tho\u1EA1i"
+        }),
+        icon: RotateCcw,
+        onClick: () => reopenMutation.mutate(),
+        disabled: reopenMutation.isPending,
+        overflow: true
+      });
+    } else if (isReceived) {
+      if (!hideViewMembers) {
+        items.push({
+          key: "view-members",
+          label: i18n.t("chat:action.viewMembers", {
+            defaultValue: "Xem th\xE0nh vi\xEAn"
+          }),
+          icon: Users,
+          onClick: () => setViewMembersOpen(true),
+          overflow: true
+        });
+      }
+      if (!hideInvite) {
+        items.push({
+          key: "invite",
+          label: i18n.t("chat:action.inviteAgent", {
+            defaultValue: "M\u1EDDi chuy\xEAn vi\xEAn"
+          }),
+          icon: UserPlus,
+          onClick: () => {
+            refetch();
+            setIsInviteDialogOpen(true);
+          },
+          overflow: true
+        });
+      }
+      if (canShowCloseSessionButton) {
+        items.push({
+          key: "close",
+          label: i18n.t("chat:action.closeConversation", {
+            defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i"
+          }),
+          icon: Power,
+          onClick: () => {
+            if (!chatItem?.tickets?.length) {
+              setShowConfirmCloseDialog(true);
+            } else {
+              setShowCloseDialog(true);
+            }
+          },
+          disabled: closeSessionMutation.isPending,
+          danger: true,
+          overflow: true
+        });
+      }
+      if (chatItem.session?.subscribed_user_ids?.includes(user?._id) && !chatItem.session?.invited_user_ids?.includes(user?._id) && chatItem.session?.assigned_id !== user?._id) {
+        items.push({
+          key: "join",
+          label: "Tham gia",
+          icon: UserCheck,
+          onClick: () => receiveInviteMutation.mutate(chatItem?.session?._id),
+          disabled: receiveInviteMutation.isPending
+        });
+      }
+      if (canLeaveSession) {
+        items.push({
+          key: "leave",
+          label: i18n.t("chat:action.leaveConversation", {
+            defaultValue: "R\u1EDDi kh\u1ECFi \u0111o\u1EA1n chat"
+          }),
+          icon: LogOut,
+          onClick: () => setShowConfirmLeaveDialog(true),
+          disabled: leaveSessionMutation.isPending,
+          danger: true,
+          overflow: true
+        });
+      }
+      if (chatItem.session?.can_take_over_user_ids?.includes(user?._id) && chatItem.session?.assigned_id !== user?._id) {
+        items.push({
+          key: "take-over",
+          label: i18n.t("common:action.grabChat", {
+            defaultValue: "C\u01B0\u1EDBp chat"
+          }),
+          icon: Forward,
+          onClick: () => takeOverMutation.mutate(user?._id),
+          disabled: takeOverMutation.isPending
+        });
+      }
+    } else {
+      if (canReceive) {
+        items.push({
+          key: "receive",
+          label: i18n.t("chat:action.receiveChat", {
+            defaultValue: "Ti\u1EBFp nh\u1EADn"
+          }),
+          icon: Inbox,
+          onClick: () => receiveChatMutation.mutate(chatItem?.session?._id),
+          disabled: receiveChatMutation.isPending
+        });
+      }
+    }
+    if (onToggleAiPanel) {
+      items.push({
+        key: "ai-assistant",
+        label: "AI Assistant",
+        icon: Bot,
+        onClick: onToggleAiPanel,
+        overflow: true
+      });
+    }
+    return items;
+  }, [
+    isClosed,
+    isReceived,
+    canReceive,
+    hideViewMembers,
+    hideInvite,
+    chatItem,
+    user,
+    canShowCloseSessionButton,
+    canLeaveSession,
+    leaveSessionMutation.isPending,
+    reopenMutation.isPending,
+    receiveInviteMutation.isPending,
+    takeOverMutation.isPending,
+    closeSessionMutation.isPending,
+    receiveChatMutation.isPending,
+    onToggleAiPanel
+  ]);
+  const overflowActions = actions.filter((a) => a.overflow);
+  const inlineActions = actions.filter((a) => !a.overflow);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(AgentAssignPill, { chatItem, assignedId }),
+      inlineActions.map((action) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: cn(
+            "size-9 shrink-0 gap-1.5 rounded-full bg-primary text-white hover:bg-primary/90 hover:text-white md:h-9 md:w-auto md:px-3.5",
+            action.danger && "bg-destructive text-white hover:bg-destructive"
+          ),
+          disabled: action.disabled,
+          onClick: action.onClick,
+          title: action.label,
+          "aria-label": action.label,
+          children: [
+            /* @__PURE__ */ jsx(action.icon, { size: 16, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: action.label })
+          ]
+        },
+        action.key
+      )),
+      overflowActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "rounded-full border",
+            children: /* @__PURE__ */ jsx(MoreVertical, { size: 16, className: "text-muted-foreground" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: overflowActions.map((action) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            disabled: action.disabled,
+            onClick: action.onClick,
+            className: cn(
+              "gap-2",
+              action.danger && "text-destructive focus:text-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(action.icon, { size: 14 }),
+              action.label
+            ]
+          },
+          action.key
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: viewMembersOpen, onOpenChange: setViewMembersOpen, children: viewMembersOpen && /* @__PURE__ */ jsx(
+      InRoomDialog,
+      {
+        data: sessionMembers?.members || chatItem?.users_in_room || [],
+        isLoading: isMembersLoading,
+        title: t("chat:title.membersInChat", {
+          defaultValue: "Th\xE0nh vi\xEAn trong \u0111o\u1EA1n chat"
+        }),
+        onRemove: (userId) => removeMemberMutation.mutate(userId),
+        removingUserId,
+        canRemove: (row) => !!sessionMembers?.can_remove && !!row.removable,
+        removeDisabledReason: (row) => sessionMembers?.can_remove ? removeSkipReasonLabel(row.skip_reason) : i18n.t("chat:message.cannotRemoveNoPermission", {
+          defaultValue: "Ch\u1EC9 chuy\xEAn vi\xEAn ph\u1EE5 tr\xE1ch, tr\u01B0\u1EDFng b\u1ED9 ph\u1EADn, supervisor ho\u1EB7c qu\u1EA3n tr\u1ECB vi\xEAn m\u1EDBi x\xF3a \u0111\u01B0\u1EE3c th\xE0nh vi\xEAn"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Dialog, { open: isInviteDialogOpen, onOpenChange: setIsInviteDialogOpen, children: isInviteDialogOpen && /* @__PURE__ */ jsx(
+      InviteAgentDialog,
+      {
+        agentOnlineList: agentChatOnlineListFiltered,
+        onInvite: (data) => inviteMutation.mutate(data),
+        isLoading: isAgentChatOnlineListLoading,
+        title: t("common:action.inviteAgentToJoin", {
+          defaultValue: "M\u1EDDi chuy\xEAn vi\xEAn tham gia"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: showConfirmLeaveDialog,
+        onOpenChange: (open) => {
+          if (!open) setShowConfirmLeaveDialog(false);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.leaveConversation", {
+              defaultValue: "R\u1EDDi kh\u1ECFi \u0111o\u1EA1n chat"
+            }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:message.confirmLeaveConversationDescription", {
+              defaultValue: "B\u1EA1n s\u1EBD kh\xF4ng c\xF2n g\u1EEDi \u0111\u01B0\u1EE3c tin nh\u1EAFn trong h\u1ED9i tho\u1EA1i n\xE0y. Mu\u1ED1n quay l\u1EA1i th\xEC c\u1EA7n \u0111\u01B0\u1EE3c m\u1EDDi l\u1EA1i."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: () => setShowConfirmLeaveDialog(false),
+                children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "destructive",
+                loading: leaveSessionMutation.isPending,
+                onClick: () => leaveSessionMutation.mutate(),
+                children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: showConfirmCloseDialog,
+        onOpenChange: (open) => {
+          if (!open) setShowConfirmCloseDialog(false);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.closeConversation", {
+              defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i"
+            }) }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:message.closeConversationWarning", {
+              defaultValue: "L\u01B0u \xFD: khi b\u1EA1n \u0111\xF3ng s\u1EBD k\u1EBFt th\xFAc cu\u1ED9c h\u1ED9i tho\u1EA1i n\xE0y v\xE0 t\u1EA5t c\u1EA3 nh\u1EEFng\n              chuy\xEAn vi\xEAn \u0111ang tham gia cu\u1ED9c h\u1ED9i tho\u1EA1i s\u1EBD kh\xF4ng th\u1EC3 ti\u1EBFp t\u1EE5c\n              cu\u1ED9c h\u1ED9i tho\u1EA1i n\xE0y!"
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: () => setShowConfirmCloseDialog(false),
+                children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                disabled: closeSessionMutation.isPending,
+                onClick: () => handleCloseSession(false),
+                children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CloseConversationDialog,
+      {
+        open: showCloseDialog,
+        onOpenChange: setShowCloseDialog,
+        isSubmitting: closeSessionMutation.isPending,
+        onConfirm: handleCloseSession
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ForceTransferDialog,
+      {
+        open: showTakeOverForceDialog,
+        onClose: closeTakeOverForceDialog,
+        transferOption: takeOverTransferOption,
+        setTransferOption: setTakeOverTransferOption,
+        forceAssignMutation: takeOverForceMutation
+      }
+    )
+  ] });
+}
+export {
+  AgentAssignPill,
+  ChatHeaderActionsInline as default
+};