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

package/components/chat-route/chat-list/quick-filter-bar.js

@@ -0,0 +1,391 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  EllipsisVertical,
+  Filter,
+  LoaderCircle,
+  Pencil,
+  Trash2
+} from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { getQuickFilterById } from "@zenify-omni/chat-js/api/chatroom.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import useChatStore from "../../../store/chat-store.js";
+import useChatDisplayConfigStore, {
+  selectPinnedFilterIds
+} from "../../../store/chat-display-config-store.js";
+import { useShallow } from "zustand/react/shallow";
+import { PREDEFINED_FILTER_CHIPS } from "../../settings-route/chat-layout/detail/constants.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../ui/dropdown-menu.js";
+import PopupConfirm from "../../custom/popup-confirm.js";
+import useQuickFilters from "../../../hooks/use-quick-filters.js";
+import useHorizontalScroll from "../../../hooks/use-horizontal-scroll.js";
+import { useGetListSocialPage } from "../../../hooks/use-setting-common.js";
+import {
+  DEFAULT_FILTER_STATE,
+  filterToFormValues
+} from "./util.js";
+import FilterPinMenu from "./filter-pin-menu.js";
+import EditFilterModal from "./edit-filter-modal.js";
+import { useTranslation } from "react-i18next";
+const PREDEFINED_GROUP = "predefined";
+const SAVED_GROUP = "saved";
+function QuickFilterBar({ className }) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const [filterState, setFilterState, selectedFilterId, setSelectedFilterId] = useChatStore(
+    useShallow((state) => [
+      state.filterState,
+      state.setFilterState,
+      state.selectedFilterId,
+      state.setSelectedFilterId
+    ])
+  );
+  const { data: socialPageList } = useGetListSocialPage();
+  const visiblePredefinedChipIds = useChatDisplayConfigStore(
+    useShallow(selectPinnedFilterIds)
+  );
+  const applyChips = useChatDisplayConfigStore((state) => state.applyChips);
+  const [loadingFilterId, setLoadingFilterId] = useState(null);
+  const [editingFilterId, setEditingFilterId] = useState(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const isSelectingFilter = useRef(false);
+  const selectedItemRef = useRef(null);
+  const hasRestoredSelection = useRef(false);
+  const onSelectFilter = useCallback(
+    (detail) => {
+      if (!detail) {
+        setSelectedFilterId(null);
+        setFilterState(DEFAULT_FILTER_STATE);
+        return;
+      }
+      setSelectedFilterId(detail._id);
+      setFilterState(
+        filterToFormValues(detail.filter || {}, socialPageList ?? [])
+      );
+    },
+    [setSelectedFilterId, setFilterState, socialPageList]
+  );
+  const onSelectPredefined = (chipId) => {
+    const chip = PREDEFINED_FILTER_CHIPS.find((item) => item.id === chipId);
+    if (!chip) return;
+    setSelectedFilterId(null);
+    setFilterState(
+      chip.isActive(filterState) ? DEFAULT_FILTER_STATE : { ...DEFAULT_FILTER_STATE, ...chip.getFilterOverride(t) }
+    );
+  };
+  const onEditFilter = (filter) => {
+    setEditingFilterId(filter._id);
+    setIsEditModalOpen(true);
+  };
+  const handleFilterUpdated = (id) => {
+    if (id !== selectedFilterId) return;
+    getQuickFilterById({ id }).then((response) => onSelectFilter(response?.data)).catch(throwException);
+  };
+  const {
+    filters: apiItems,
+    isLoading,
+    isFetching,
+    hasNextPage,
+    isFetchingNextPage,
+    lastItemRef,
+    toggleVisibility,
+    reorder,
+    remove,
+    dropFilter
+  } = useQuickFilters({
+    // Bộ lọc đang chọn mà bị ẩn hoặc bị xoá thì bỏ lựa chọn.
+    onFilterUnavailable: (id) => {
+      if (id === selectedFilterId) onSelectFilter(null);
+    }
+  });
+  const {
+    scrollRef,
+    canScrollLeft,
+    canScrollRight,
+    scrollToLeft,
+    scrollToRight
+  } = useHorizontalScroll([visiblePredefinedChipIds.length, apiItems.length]);
+  useEffect(() => {
+    if (hasRestoredSelection.current) return;
+    if (isFetching) return;
+    if (!selectedFilterId) {
+      hasRestoredSelection.current = true;
+      return;
+    }
+    const isInList = apiItems.some((item) => item._id === selectedFilterId);
+    if (!isInList) {
+      onSelectFilter(null);
+      hasRestoredSelection.current = true;
+      return;
+    }
+    hasRestoredSelection.current = true;
+  }, [selectedFilterId, apiItems, isFetching, onSelectFilter]);
+  const handleSelect = async (filter) => {
+    if (isSelectingFilter.current) return;
+    if (selectedFilterId === filter._id) {
+      onSelectFilter(null);
+      return;
+    }
+    isSelectingFilter.current = true;
+    setLoadingFilterId(filter._id);
+    try {
+      const response = await getQuickFilterById({ id: filter._id });
+      onSelectFilter(response?.data);
+    } catch (error) {
+      if (error?.response?.status === 404) {
+        onSelectFilter(null);
+        dropFilter(filter._id);
+      } else {
+        throwException(error);
+      }
+    } finally {
+      isSelectingFilter.current = false;
+      setLoadingFilterId(null);
+    }
+  };
+  const predefinedChips = useMemo(() => {
+    const chipById = new Map(
+      PREDEFINED_FILTER_CHIPS.map((chip) => [chip.id, chip])
+    );
+    const pinned = visiblePredefinedChipIds.map((id) => chipById.get(id)).filter(Boolean);
+    const rest = PREDEFINED_FILTER_CHIPS.filter(
+      (chip) => !visiblePredefinedChipIds.includes(chip.id)
+    );
+    return [...pinned, ...rest].map((chip) => ({
+      id: chip.id,
+      name: chip.name(t),
+      chipColor: chip.chipColor,
+      isActive: chip.isActive(filterState)
+    }));
+  }, [filterState, visiblePredefinedChipIds, t]);
+  const menuItems = useMemo(
+    () => [
+      ...predefinedChips.map((chip) => ({
+        id: chip.id,
+        name: chip.name,
+        isPinned: visiblePredefinedChipIds.includes(chip.id),
+        group: PREDEFINED_GROUP,
+        raw: chip
+      })),
+      ...apiItems.map((filter) => ({
+        id: filter._id,
+        name: filter.name,
+        isPinned: !filter.is_hidden,
+        group: SAVED_GROUP,
+        raw: filter
+      }))
+    ],
+    [predefinedChips, apiItems, visiblePredefinedChipIds]
+  );
+  const applyChipOrder = (nextShown) => applyChips(
+    nextShown,
+    Object.fromEntries(
+      PREDEFINED_FILTER_CHIPS.filter(
+        (chip) => !nextShown.includes(chip.id)
+      ).map((chip) => [chip.id, true])
+    )
+  );
+  const handleTogglePin = (item) => {
+    if (item.group === SAVED_GROUP) {
+      toggleVisibility(item.raw);
+      return;
+    }
+    applyChipOrder(
+      visiblePredefinedChipIds.includes(item.id) ? visiblePredefinedChipIds.filter((id) => id !== item.id) : [...visiblePredefinedChipIds, item.id]
+    );
+  };
+  const handleReorder = (sortedItems, group) => {
+    if (group === PREDEFINED_GROUP) {
+      applyChipOrder(
+        sortedItems.filter((item) => item.isPinned).map((item) => item.id)
+      );
+      return;
+    }
+    if (hasNextPage) return;
+    reorder(sortedItems.map((item) => item.raw));
+  };
+  const renderRowActions = (item) => {
+    if (item.group !== SAVED_GROUP) return null;
+    const filter = item.raw;
+    if (user?._id !== filter.created_by) return null;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "shrink-0 text-muted-foreground hover:text-muted-foreground",
+          children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => onEditFilter?.(filter),
+            className: "text-xs",
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4" }),
+              t("common:action.modify", { defaultValue: "Ch\u1EC9nh s\u1EEDa" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PopupConfirm,
+          {
+            trigger: /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onSelect: (e) => e.preventDefault(),
+                className: "text-xs text-destructive focus:text-destructive",
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                  t("common:action.clearFilter", { defaultValue: "X\xF3a b\u1ED9 l\u1ECDc" })
+                ]
+              }
+            ),
+            title: t("common:action.clearFilter", {
+              defaultValue: "X\xF3a b\u1ED9 l\u1ECDc"
+            }),
+            description: t("chat:dialog.confirmDeleteFilter", {
+              name: filter.name,
+              defaultValue: 'B\u1EA1n c\xF3 ch\u1EAFc ch\u1EAFn mu\u1ED1n x\xF3a b\u1ED9 l\u1ECDc "{name}" kh\xF4ng?'
+            }),
+            onConfirm: () => remove(filter._id),
+            confirmButtonVariant: "destructive"
+          }
+        )
+      ] })
+    ] });
+  };
+  if (isLoading && predefinedChips.length === 0) return null;
+  if (!isLoading && apiItems.length === 0 && predefinedChips.length === 0)
+    return null;
+  const allItems = [
+    ...predefinedChips.filter((chip) => visiblePredefinedChipIds.includes(chip.id)).map((chip) => ({
+      ...chip,
+      _isPredefined: true
+    })),
+    ...apiItems.filter((item) => !item.is_hidden).map((item) => ({
+      ...item,
+      _isPredefined: false
+    }))
+  ];
+  const showManageButton = predefinedChips.length > 0 || apiItems.length > 0 || hasNextPage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto mt-2 flex w-[95%] items-center gap-1 rounded-lg border border-muted bg-card px-1.5 py-1",
+        className
+      ),
+      children: [
+        showManageButton && /* @__PURE__ */ jsx(
+          FilterPinMenu,
+          {
+            align: "start",
+            items: menuItems,
+            onTogglePin: handleTogglePin,
+            onReorder: handleReorder,
+            renderRowActions,
+            lastItemRef,
+            isFetchingNextPage,
+            trigger: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                title: t("common:label.filter", { defaultValue: "B\u1ED9 l\u1ECDc" }),
+                className: "flex size-8 shrink-0 items-center justify-center rounded-md text-primary transition-colors hover:bg-surface-subtle",
+                children: /* @__PURE__ */ jsx(Filter, { className: "size-4" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          canScrollLeft && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-card to-transparent" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollToLeft,
+                className: "absolute left-1 top-1/2 z-20 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtle bg-card shadow-sm hover:bg-surface-subtle",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 text-muted-foreground" })
+              }
+            )
+          ] }),
+          canScrollRight && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-card to-transparent" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollToRight,
+                className: "absolute right-1 top-1/2 z-20 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtle bg-card shadow-sm hover:bg-surface-subtle",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollRef,
+              className: "scroll-container-hide flex items-center gap-1.5 overflow-x-auto pr-1",
+              children: allItems.map((item) => {
+                const isActive = item._isPredefined ? item.isActive : selectedFilterId === item._id;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    ref: (node) => {
+                      if (!item._isPredefined && item._id === selectedFilterId)
+                        selectedItemRef.current = node;
+                    },
+                    type: "button",
+                    onClick: () => item._isPredefined ? onSelectPredefined(item.id) : handleSelect(item),
+                    style: item.chipColor ? {
+                      borderColor: item.chipColor,
+                      backgroundColor: isActive ? item.chipColor + "14" : void 0,
+                      color: item.chipColor
+                    } : void 0,
+                    className: cn(
+                      "flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-1 text-xs font-medium transition-colors",
+                      !item.chipColor && // Cả hai trạng thái đều không viền, chỉ khác nền và màu chữ.
+                      // Giữ `border-transparent` thay vì bỏ hẳn `border` để chip
+                      // màu tự đặt (có viền) cao bằng chip thường.
+                      (isActive ? "border-transparent bg-secondary text-primary" : "border-transparent bg-muted text-muted-foreground hover:bg-muted")
+                    ),
+                    children: [
+                      !item._isPredefined && loadingFilterId === item._id && /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }),
+                      /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: item.name })
+                    ]
+                  },
+                  item._isPredefined ? item.id : item._id
+                );
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          EditFilterModal,
+          {
+            open: isEditModalOpen,
+            onOpenChange: setIsEditModalOpen,
+            filterId: editingFilterId,
+            onUpdated: handleFilterUpdated
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  QuickFilterBar as default
+};

package/components/chat-route/chat-list/save-filter-popover.js

@@ -0,0 +1,258 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { createQuickFilter } from "@zenify-omni/chat-js/api/chatroom.js";
+import {
+  buildFilterConditions,
+  getVisibilityToOptions
+} from "./util.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { getUser, isRoleTeamLeader, isRoleTeamLeaderSale } from "@zenify-omni/chat-js/utils/auth.js";
+import { useSettings } from "../../../hooks/use-settings.js";
+import { useInvalidateQuickFilters } from "../../../hooks/use-quick-filters.js";
+import { searchUser } from "@zenify-omni/chat-js/api/user.js";
+import { Button } from "../../custom/button.js";
+import { Label } from "../../custom/label.js";
+import { Input } from "../../ui/input.js";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent
+} from "../../ui/popover.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function SaveFilterPopover({
+  trigger,
+  getFilterValues,
+  onCreated
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const user = getUser();
+  const { groups: groupOptions } = useSettings();
+  const visibilityToOptions = useMemo(() => getVisibilityToOptions(), []);
+  const defaultGroupsForTBP = useMemo(() => {
+    if (!(isRoleTeamLeader() || isRoleTeamLeaderSale()) || !user?.group_id) {
+      return [];
+    }
+    const group = groupOptions?.find((g) => g.id === user.group_id);
+    if (!group) return [];
+    return [{ label: group.name, value: user.group_id.toString() }];
+  }, [groupOptions, user?.group_id]);
+  const groupSelectOptions = useMemo(() => {
+    const base = groupOptions || [];
+    const filtered = isRoleTeamLeader() || isRoleTeamLeaderSale() ? base.filter((option) => option.id === user.group_id) : base;
+    return filtered.map((option) => ({
+      label: option.name,
+      value: option.id.toString()
+    }));
+  }, [groupOptions, user?.group_id]);
+  const [name, setName] = useState("");
+  const [visibilityTo, setVisibilityTo] = useState(
+    visibilityToOptions[0]?.value
+  );
+  const [visibilityAgents, setVisibilityAgents] = useState([]);
+  const [visibilityGroups, setVisibilityGroups] = useState(defaultGroupsForTBP);
+  const [nameError, setNameError] = useState("");
+  const [agentsError, setAgentsError] = useState("");
+  const [groupsError, setGroupsError] = useState("");
+  useEffect(() => {
+    if (!open || visibilityTo !== "department_agents") return;
+    setVisibilityGroups((prev) => prev.length ? prev : defaultGroupsForTBP);
+  }, [open, visibilityTo, defaultGroupsForTBP]);
+  const resetLocalState = () => {
+    setName("");
+    setVisibilityTo(visibilityToOptions[0]?.value);
+    setVisibilityAgents([]);
+    setVisibilityGroups(defaultGroupsForTBP);
+    setNameError("");
+    setAgentsError("");
+    setGroupsError("");
+  };
+  const invalidateQuickFilters = useInvalidateQuickFilters();
+  const createMutation = useMutation({
+    mutationFn: createQuickFilter,
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.createQuickFilterSuccess", {
+          defaultValue: "T\u1EA1o b\u1ED9 l\u1ECDc nhanh th\xE0nh c\xF4ng"
+        })
+      );
+      setOpen(false);
+      resetLocalState();
+      invalidateQuickFilters();
+      onCreated?.();
+    },
+    onError: throwException
+  });
+  const handleVisibilityChange = (value) => {
+    setVisibilityTo(value);
+    setVisibilityAgents([]);
+    setAgentsError("");
+    setGroupsError("");
+    setVisibilityGroups(
+      value === "department_agents" ? defaultGroupsForTBP : []
+    );
+  };
+  const handleConfirm = () => {
+    let hasError = false;
+    if (!name.trim()) {
+      setNameError(
+        i18n.t("common:message.filterNameRequired", {
+          defaultValue: "T\xEAn b\u1ED9 l\u1ECDc kh\xF4ng \u0111\u01B0\u1EE3c b\u1ECF tr\u1ED1ng"
+        })
+      );
+      hasError = true;
+    } else {
+      setNameError("");
+    }
+    if (visibilityTo === "selected_agents" && visibilityAgents.length === 0) {
+      setAgentsError(
+        i18n.t("chat:toast.selectAtLeastOneAgent", {
+          defaultValue: "Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t 1 chuy\xEAn vi\xEAn"
+        })
+      );
+      hasError = true;
+    } else {
+      setAgentsError("");
+    }
+    if (visibilityTo === "department_agents" && visibilityGroups.length === 0) {
+      setGroupsError(
+        i18n.t("chat:toast.selectAtLeastOneDepartment", {
+          defaultValue: "Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t 1 b\u1ED9 ph\u1EADn"
+        })
+      );
+      hasError = true;
+    } else {
+      setGroupsError("");
+    }
+    if (hasError) return;
+    const filter = buildFilterConditions(getFilterValues());
+    createMutation.mutate({
+      data: {
+        name: name.trim(),
+        visibility: visibilityTo,
+        group_ids: visibilityGroups.map((x) => Number(x.value)),
+        agent_ids: visibilityAgents.map((x) => x.value),
+        filter
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (next) resetLocalState();
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            className: "w-[420px] space-y-0 p-0",
+            side: "top",
+            align: "end",
+            sideOffset: 12,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-5 pb-1 pt-5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsx(Label, { isRequired: true, children: t("common:label.filterName", { defaultValue: "T\xEAn b\u1ED9 l\u1ECDc" }) }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      value: name,
+                      onChange: (e) => setName(e.target.value),
+                      placeholder: t("common:placeholder.enterFilterName", {
+                        defaultValue: "Nh\u1EADp t\xEAn b\u1ED9 l\u1ECDc"
+                      })
+                    }
+                  ),
+                  nameError && /* @__PURE__ */ jsx("p", { className: "text-xs text-[--label-red-foreground]", children: nameError })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsx(Label, { children: t("common:label.usageTarget", {
+                    defaultValue: "\u0110\u1ED1i t\u01B0\u1EE3ng s\u1EED d\u1EE5ng"
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    CustomSelect,
+                    {
+                      value: visibilityTo,
+                      onChange: handleVisibilityChange,
+                      placeholder: t("common:placeholder.selectUsageTarget", {
+                        defaultValue: "Ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng s\u1EED d\u1EE5ng"
+                      }),
+                      options: visibilityToOptions
+                    }
+                  )
+                ] }),
+                visibilityTo === "selected_agents" && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx(
+                    MultipleSelector,
+                    {
+                      value: visibilityAgents,
+                      onChange: setVisibilityAgents,
+                      placeholder: t("chat:field.selectApplicableAgent", {
+                        defaultValue: "Ch\u1ECDn chuy\xEAn vi\xEAn \xE1p d\u1EE5ng"
+                      }),
+                      onSearch: (value) => searchUser({
+                        searchText: value,
+                        ...isRoleTeamLeader() || isRoleTeamLeaderSale() ? { group_id: user.group_id } : {}
+                      }),
+                      buildOption: (u) => ({ label: u.name, value: u._id })
+                    }
+                  ),
+                  agentsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-[--label-red-foreground]", children: agentsError })
+                ] }),
+                visibilityTo === "department_agents" && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx(
+                    MultipleSelector,
+                    {
+                      value: visibilityGroups,
+                      onChange: setVisibilityGroups,
+                      placeholder: t("chat:field.selectApplicableDepartment", {
+                        defaultValue: "Ch\u1ECDn ph\xF2ng ban \xE1p d\u1EE5ng"
+                      }),
+                      options: groupSelectOptions,
+                      commandProps: {
+                        filter: (value, search, keywords) => keywords[0].toLowerCase().includes(search.trim().toLowerCase())
+                      }
+                    }
+                  ),
+                  groupsError && /* @__PURE__ */ jsx("p", { className: "text-xs text-[--label-red-foreground]", children: groupsError })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t px-5 py-3.5", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    onClick: () => setOpen(false),
+                    children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleConfirm,
+                    disabled: createMutation.isPending,
+                    children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SaveFilterPopover as default
+};