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

package/components/custom/multi-select-search-cc.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import React, { useEffect, useState } from "react";
+import MultipleSelector from "./multiple-selector.js";
+import { Network, UsersRound } from "lucide-react";
+import { searchCcUser, searchCcUserV3 } from "@zenify-omni/chat-js/api/user.js";
+const MAX_DISPLAY_AGENTS = 3;
+function buildOptionsFromResponse({ data = {}, hideGroups = [] }) {
+  const users = data.users || [];
+  const groups = data.groups || [];
+  const queues = data.queues || data.queue || [];
+  const groupOptions = groups.map((group) => ({
+    type: "group",
+    value: `group-${group.id || group._id}`,
+    label: group.name,
+    groupKey: "group",
+    group_name: group.name,
+    // keep raw data if needed
+    raw: group,
+    users: group.users || []
+  })) || [];
+  const queueOptions = queues.map((queue) => ({
+    type: "queue",
+    value: `queue-${queue.QUEUE_ID || queue.id || queue._id}`,
+    label: queue.QUEUE_NAME || queue.name,
+    groupKey: "queue",
+    raw: queue,
+    users: queue.users || []
+  })) || [];
+  const userOptions = users.map((user) => ({
+    type: "user",
+    value: user._id,
+    label: user.name,
+    email: user.email,
+    group_name: user.group_name,
+    groupKey: "user",
+    raw: user
+  })) || [];
+  if (!hideGroups.length) {
+    return [...groupOptions, ...queueOptions, ...userOptions];
+  }
+  const options = [];
+  if (!hideGroups.includes("queue")) {
+    options.push(...queueOptions);
+  }
+  if (!hideGroups.includes("group")) {
+    options.push(...groupOptions);
+  }
+  if (!hideGroups.includes("user")) {
+    options.push(...userOptions);
+  }
+  return options;
+}
+function dedupeByValue(items = []) {
+  const map = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    if (!item?.value) return;
+    if (!map.has(item.value)) {
+      map.set(item.value, item);
+    }
+  });
+  return Array.from(map.values());
+}
+const MultipleSelectSearchCc = React.forwardRef(
+  ({ value, version = "v2", activeOnly = false, onChange, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(value || []);
+    const hideGroups = Array.isArray(props.hideGroups) ? props.hideGroups : [];
+    const roles = Array.isArray(props.roles) ? props.roles : [];
+    useEffect(() => {
+      setInternalValue(value || []);
+    }, [value]);
+    const handleSearch = async (keyword) => {
+      const searchText = (keyword || "").trim();
+      if (searchText && searchText.length < 2) {
+        return [];
+      }
+      const params = {};
+      if (roles.length) {
+        params.roles = JSON.stringify(roles);
+      }
+      if (searchText) {
+        params.keyword = searchText;
+      }
+      if (activeOnly) {
+        params.active = true;
+      }
+      let data;
+      if (version === "v3") {
+        data = await searchCcUserV3(params);
+      } else {
+        data = await searchCcUser(params);
+      }
+      if (activeOnly && Array.isArray(data?.users)) {
+        data = {
+          ...data,
+          users: data.users.filter(
+            (u) => u.active !== false && u.is_disabled !== true
+          )
+        };
+      }
+      return buildOptionsFromResponse({ data, hideGroups });
+    };
+    const handleChange = (newOptions) => {
+      const added = newOptions.find(
+        (opt) => !internalValue?.some((s) => s.value === opt.value)
+      );
+      if (!added) {
+        setInternalValue(newOptions);
+        onChange?.(newOptions);
+        return;
+      }
+      if (added.type === "group" || added.type === "queue") {
+        const members = (added.users || []).map((user) => ({
+          type: "user",
+          value: user._id,
+          label: user.name,
+          email: user.email,
+          groupKey: "user",
+          group_name: added.type === "group" ? added.group_name || "" : user.group_name || ""
+        }));
+        const merged = [...internalValue || [], ...members];
+        const unique = dedupeByValue(merged);
+        setInternalValue(unique);
+        onChange?.(unique);
+        return;
+      }
+      const normalized = newOptions.map((item) => ({
+        ...item,
+        type: item.type || "user"
+      }));
+      setInternalValue(normalized);
+      onChange?.(normalized);
+    };
+    const renderGroupHeading = (key) => {
+      if (key === "group") return "B\u1ED9 ph\u1EADn";
+      if (key === "queue") return "H\xE0ng \u0111\u1EE3i";
+      if (key === "user") return "Chuy\xEAn vi\xEAn";
+      return key;
+    };
+    const renderOptionLabel = (option) => {
+      if (option.type === "group") {
+        return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Network, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ jsx("span", { children: option.label })
+        ] });
+      }
+      if (option.type === "queue") {
+        return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(UsersRound, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ jsx("span", { children: option.label })
+        ] });
+      }
+      return option.label;
+    };
+    return /* @__PURE__ */ jsx(
+      MultipleSelector,
+      {
+        ref,
+        ...props,
+        delay: 500,
+        value: internalValue,
+        onChange: handleChange,
+        onSearch: handleSearch,
+        groupBy: "groupKey",
+        renderGroupHeading,
+        renderOptionLabel,
+        maxDisplayCount: MAX_DISPLAY_AGENTS,
+        placeholder: props.placeholder || i18n.t("common:label.typeToFindAnAgent", {
+          defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm chuy\xEAn vi\xEAn, h\xE0ng \u0111\u1EE3i, b\u1ED9 ph\u1EADn"
+        })
+      }
+    );
+  }
+);
+MultipleSelectSearchCc.displayName = "MultipleSelectSearchCc";
+var multi_select_search_cc_default = MultipleSelectSearchCc;
+export {
+  multi_select_search_cc_default as default
+};

package/components/custom/multiple-select-setting-tags.js

@@ -0,0 +1,404 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { X, Check, LoaderCircle, Tag, Bookmark } from "lucide-react";
+import { Badge } from "../ui/badge.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList
+} from "../ui/command.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { cn } from "../../lib/utils.js";
+import { Root, Anchor, Content } from "@radix-ui/react-popper";
+import useDebounce from "../../hooks/use-debounce.js";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { getProductTags } from "@zenify-omni/chat-js/api/tag.js";
+import { cva } from "class-variance-authority";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useTranslation } from "react-i18next";
+const fieldVariants = cva("", {
+  variants: {
+    size: {
+      small: "text-xs",
+      default: "text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function MultipleSelectSettingTags({
+  selected = [],
+  onChange,
+  target,
+  placeholder,
+  size,
+  className,
+  inputClassName,
+  disabled = false,
+  popupClassName,
+  includePersonal = false,
+  hideSelectedBadges = false,
+  showTagIcon = false
+}) {
+  const { t } = useTranslation();
+  const queryKey = useMemo(
+    () => `select_${QUERY_KEY.GET_LIST_TAGS}_${target}`,
+    [target]
+  );
+  const queryClient = useQueryClient();
+  const inputRef = useRef(null);
+  const observerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [isNewChange, setIsNewChange] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const debouncedSearchTerm = useDebounce(inputValue, 500);
+  useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+      inputRef.current?.blur();
+    }
+  }, [disabled]);
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (disabled) return;
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        inputRef.current.blur();
+        setOpen(false);
+      }
+    },
+    [disabled]
+  );
+  const handleUnSelect = (option) => {
+    if (disabled) return;
+    onChange?.(selected.filter((x) => x._id !== option._id));
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const input = inputRef.current;
+    if (!input) return;
+    if (event.key === "Delete" || event.key === "Backspace") {
+      if (input.value === "" && selected.length > 0) {
+        handleUnSelect(selected[selected.length - 1]);
+      }
+    }
+    if (event.key === "Escape") {
+      input.blur();
+    }
+  };
+  useEffect(() => {
+    if (open && !disabled) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchend", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchend", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchend", handleClickOutside);
+    };
+  }, [open, disabled, handleClickOutside]);
+  const {
+    data: queryData,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useInfiniteQuery({
+    queryKey: [
+      queryKey,
+      { search: debouncedSearchTerm.trim(), includePersonal }
+    ],
+    queryFn: async ({ pageParam = 1 }) => {
+      const limit = 10;
+      const offset = (pageParam - 1) * limit;
+      const params = {
+        limit,
+        offset,
+        where: JSON.stringify({ type: target })
+      };
+      if (includePersonal) {
+        params.include_personal = true;
+      }
+      if (debouncedSearchTerm.trim()) {
+        params.search = debouncedSearchTerm.trim();
+      }
+      const { data } = await getProductTags(params);
+      const tags = data?.tags ?? [];
+      return {
+        data: tags,
+        page: pageParam,
+        hasMore: tags.length === limit
+      };
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.hasMore ? lastPage.page + 1 : void 0;
+    },
+    enabled: open && !disabled
+    // ✅
+  });
+  const options = queryData?.pages.flatMap((page) => page.data) ?? [];
+  const lastItemRef = (node) => {
+    if (disabled) return;
+    if (isFetchingNextPage) return;
+    if (observerRef.current) observerRef.current.disconnect();
+    observerRef.current = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && hasNextPage) {
+        fetchNextPage();
+      }
+    });
+    if (node) observerRef.current.observe(node);
+  };
+  useEffect(() => {
+    if (!open) {
+      queryClient.removeQueries({
+        queryKey: [queryKey]
+      });
+    }
+  }, [open, queryClient, queryKey]);
+  const DISABLED_BG = "hsl(var(--muted))";
+  const DISABLED_TEXT = "hsl(var(--muted-foreground))";
+  return /* @__PURE__ */ jsx(
+    Command,
+    {
+      ref: dropdownRef,
+      onKeyDown: handleKeyDown,
+      className: "h-auto overflow-visible bg-transparent",
+      shouldFilter: false,
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      children: /* @__PURE__ */ jsxs(Root, { children: [
+        /* @__PURE__ */ jsx(Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: disabled ? {
+              backgroundColor: DISABLED_BG,
+              color: DISABLED_TEXT
+            } : void 0,
+            className: cn(
+              "flex min-h-9 items-center rounded-md border border-input bg-card text-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring",
+              {
+                "px-1 py-[0.35rem]": selected.length !== 0,
+                "cursor-text": selected.length !== 0
+              },
+              disabled && "cursor-not-allowed",
+              className
+            ),
+            "aria-disabled": disabled,
+            onClick: () => {
+              if (disabled) return;
+              inputRef?.current?.focus();
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative flex w-full flex-wrap items-center gap-1 px-0",
+                  !hideSelectedBadges && selected.length && "px-2",
+                  fieldVariants({ size }),
+                  disabled && "cursor-not-allowed"
+                ),
+                children: [
+                  !hideSelectedBadges && selected.map((option, index) => /* @__PURE__ */ jsxs(
+                    Badge,
+                    {
+                      variant: "chip",
+                      className: cn(
+                        "bg-[data-[fixed]:bg-muted-foreground] text-[data-[fixed]:text-muted] break-all data-[fixed]:hover:bg-muted-foreground"
+                      ),
+                      style: {
+                        backgroundColor: option.color ? option.color + Math.round(255 * 0.2).toString(16).padStart(2, "0") : ""
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("div", { style: { color: option.color }, children: option.name }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            disabled,
+                            className: cn(
+                              "ml-1 rounded-full outline-none ring-offset-background focus:ring-1 focus:ring-ring",
+                              disabled && "pointer-events-none"
+                            ),
+                            onMouseDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            onClick: () => handleUnSelect?.(option),
+                            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+                          }
+                        )
+                      ]
+                    },
+                    index
+                  )),
+                  showTagIcon && /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      size: size === "small" ? 14 : 16,
+                      className: "ml-2 mr-1 shrink-0 self-center text-muted-foreground"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CommandPrimitive.Input,
+                    {
+                      ref: inputRef,
+                      value: isNewChange ? "" : inputValue,
+                      disabled,
+                      onFocus: () => {
+                        if (disabled) return;
+                        setOpen(true);
+                      },
+                      onValueChange: (v) => {
+                        if (disabled) return;
+                        setIsNewChange(false);
+                        setInputValue(v);
+                      },
+                      placeholder,
+                      className: cn(
+                        "my-1 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                        {
+                          "px-3 py-[0.35rem]": selected.length === 0 && !showTagIcon,
+                          "py-[0.35rem] pr-3": selected.length === 0 && showTagIcon,
+                          "ml-1": selected.length !== 0
+                        },
+                        fieldVariants({ size }),
+                        disabled && "cursor-not-allowed",
+                        inputClassName
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      onClick: () => {
+                        if (disabled) return;
+                        onChange?.([]);
+                      },
+                      className: cn(
+                        "absolute right-0 top-[3px] h-5 w-5 p-0",
+                        hideSelectedBadges || selected.length < 1 ? "hidden" : "",
+                        disabled && "cursor-not-allowed opacity-60"
+                      ),
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        open && !disabled && /* @__PURE__ */ jsx(
+          Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 5,
+            className: "z-[60] w-[var(--radix-popper-anchor-width)]",
+            children: /* @__PURE__ */ jsxs(
+              CommandList,
+              {
+                className: cn(
+                  "z-[60] w-full bg-popover text-popover-foreground shadow-md outline-none animate-in",
+                  open && options.length > 0 && "rounded-md border",
+                  fieldVariants({ size }),
+                  popupClassName
+                ),
+                onMouseUp: () => {
+                  if (disabled) return;
+                  inputRef?.current?.focus();
+                },
+                children: [
+                  isLoading && /* @__PURE__ */ jsx(CommandGroup, { heading: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }), children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(CommandItem, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }, index)) }),
+                  !isLoading && options.length > 0 && options.map((groupOption, groupIndex) => /* @__PURE__ */ jsx(
+                    CommandGroup,
+                    {
+                      heading: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsx("p", { className: "cursor-pointer text-xs", children: groupOption.name })
+                      ] }),
+                      className: "h-full overflow-auto",
+                      ref: groupIndex === options.length - 1 ? lastItemRef : null,
+                      children: (groupOption.sub_tags ?? []).map((option, itemIndex) => {
+                        const isChecked = selected.some(
+                          (x) => x._id === option._id
+                        );
+                        const itemDisabled = !!groupOption.disable;
+                        return /* @__PURE__ */ jsxs(
+                          CommandItem,
+                          {
+                            value: option._id,
+                            keywords: [option.name],
+                            disabled: itemDisabled,
+                            onMouseDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            onSelect: () => {
+                              if (itemDisabled) return;
+                              const newOptions = !isChecked ? [
+                                ...selected,
+                                {
+                                  _id: option._id,
+                                  name: option.name,
+                                  color: option.color,
+                                  ...option?.user_id ? { user_id: option.user_id } : {}
+                                }
+                              ] : selected.filter((x) => x._id !== option._id);
+                              onChange?.(newOptions);
+                              setIsNewChange(true);
+                            },
+                            className: cn(
+                              "flex items-center justify-between gap-1",
+                              itemDisabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer",
+                              fieldVariants({ size })
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row gap-1", children: [
+                                /* @__PURE__ */ jsx(
+                                  Bookmark,
+                                  {
+                                    className: "h-4 w-4 flex-shrink-0",
+                                    style: {
+                                      fill: option.color,
+                                      stroke: option.color
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("div", { className: "flex-1", children: option.name })
+                              ] }),
+                              isChecked && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 flex-shrink-0 cursor-pointer text-success" })
+                            ]
+                          },
+                          itemIndex
+                        );
+                      })
+                    },
+                    groupOption.name
+                  )),
+                  !isLoading && !options.length && /* @__PURE__ */ jsx(CommandEmpty, { children: t("common:empty.noData", {
+                    defaultValue: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u"
+                  }) }),
+                  isFetchingNextPage && /* @__PURE__ */ jsx(CommandItem, { disabled: true, className: "flex justify-center", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }) })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  MultipleSelectSettingTags as default
+};