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

package/hooks/use-horizontal-scroll.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const SCROLL_STEP = 200;
+function useHorizontalScroll(deps = []) {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  const scrollToLeft = useCallback(() => {
+    scrollRef.current?.scrollBy({ left: -SCROLL_STEP, behavior: "smooth" });
+  }, []);
+  const scrollToRight = useCallback(() => {
+    scrollRef.current?.scrollBy({ left: SCROLL_STEP, behavior: "smooth" });
+  }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    checkScroll();
+    el.addEventListener("scroll", checkScroll);
+    const observer = new ResizeObserver(checkScroll);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkScroll);
+      observer.disconnect();
+    };
+  }, [checkScroll, ...deps]);
+  return {
+    scrollRef,
+    canScrollLeft,
+    canScrollRight,
+    scrollToLeft,
+    scrollToRight
+  };
+}
+export {
+  useHorizontalScroll as default
+};

package/hooks/use-image-preview-queue.js

@@ -0,0 +1,101 @@
+import { useCallback } from "react";
+import { compressImageForChannel } from "@zenify-omni/chat-js/utils/image-compression.js";
+import { getAcceptImageSize, needsImageCompression } from "../utils/file.js";
+import { showErrorToast } from "../components/ui/sonner.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const COMPRESSION_CONCURRENCY = 3;
+function useImagePreviewQueue(chatRoom, setPastedFiles) {
+  const startImageCompression = useCallback(
+    async (entry) => {
+      const limit = getAcceptImageSize(chatRoom);
+      let result;
+      try {
+        result = await compressImageForChannel(entry.file, {
+          maxSizeBytes: limit
+        });
+      } catch {
+        setPastedFiles?.(
+          (prev) => prev.map(
+            (f) => f.id === entry.id ? { ...f, isCompressing: false, compressionError: true } : f
+          )
+        );
+        showErrorToast(
+          i18n.t("common:message.imageProcessFailed", {
+            name: entry.name,
+            defaultValue: 'Kh\xF4ng x\u1EED l\xFD \u0111\u01B0\u1EE3c \u1EA3nh "{name}". \u0110\u1ECBnh d\u1EA1ng c\xF3 th\u1EC3 kh\xF4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3.'
+          })
+        );
+        return;
+      }
+      setPastedFiles?.(
+        (prev) => prev.map((f) => {
+          if (f.id !== entry.id) return f;
+          if (result.stillTooLarge) {
+            return { ...f, isCompressing: false, compressionError: true };
+          }
+          if (!result.wasCompressed) {
+            return { ...f, isCompressing: false, compressionError: false };
+          }
+          URL.revokeObjectURL(f.preview);
+          return {
+            ...f,
+            file: result.file,
+            preview: URL.createObjectURL(result.file),
+            type: result.file.type,
+            name: result.file.name,
+            size: result.file.size,
+            isCompressing: false,
+            compressionError: false
+          };
+        })
+      );
+      if (result.stillTooLarge) {
+        showErrorToast(
+          i18n.t("common:toast.imageOptimizeFailed", {
+            name: entry.name,
+            channel: chatRoom?.source || "chat",
+            defaultValue: 'Kh\xF4ng t\u1ED1i \u01B0u \u0111\u01B0\u1EE3c \u1EA3nh "{name}" \u0111\u1EC3 g\u1EEDi qua k\xEAnh {channel}. Vui l\xF2ng th\u1EED \u1EA3nh kh\xE1c.'
+          })
+        );
+      }
+    },
+    [chatRoom, setPastedFiles]
+  );
+  const addFilesToPreview = useCallback(
+    (files) => {
+      if (!files?.length) return;
+      const timestamp = Date.now();
+      const newFiles = Array.from(files).map((file, i) => {
+        const fileExtension = file.type ? file.type.split("/")[1] : "bin";
+        const needsCompression = needsImageCompression(file, chatRoom);
+        return {
+          file,
+          id: `${timestamp}-${i}-${Math.random().toString(36).slice(2, 8)}`,
+          preview: URL.createObjectURL(file),
+          type: file.type || "application/octet-stream",
+          name: file.name || `upload-${timestamp}.${fileExtension}`,
+          size: file.size,
+          isCompressing: needsCompression,
+          compressionError: false
+        };
+      });
+      setPastedFiles?.((prev) => [...prev, ...newFiles]);
+      const pending = newFiles.filter((entry) => entry.isCompressing);
+      let cursor = 0;
+      const runNext = () => {
+        if (cursor >= pending.length) return;
+        const entry = pending[cursor];
+        cursor += 1;
+        startImageCompression(entry).finally(runNext);
+      };
+      for (let i = 0; i < Math.min(COMPRESSION_CONCURRENCY, pending.length); i++) {
+        runNext();
+      }
+    },
+    [chatRoom, setPastedFiles, startImageCompression]
+  );
+  return { addFilesToPreview };
+}
+export {
+  useImagePreviewQueue
+};

package/hooks/use-inline-editable-cell.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const COMPLEX_TYPES = /* @__PURE__ */ new Set(["multi-select", "date", "date-time"]);
+const PORTAL_SELECTOR = "[data-radix-popper-content-wrapper], [cmdk-list], [data-inline-portal]";
+function resolveSaveMode() {
+  return "explicit";
+}
+function isComplexField(fieldConfig) {
+  if (typeof fieldConfig.isComplex === "boolean") return fieldConfig.isComplex;
+  if (fieldConfig.editor) return true;
+  return COMPLEX_TYPES.has(fieldConfig.type);
+}
+function useInlineEditableCell({ row, fieldConfig, onSave }) {
+  const containerRef = useRef(null);
+  const savingRef = useRef(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [value, setValue] = useState();
+  const saveMode = resolveSaveMode(fieldConfig);
+  const isComplex = isComplexField(fieldConfig);
+  const cancel = useCallback(() => {
+    if (savingRef.current) return;
+    setIsEditing(false);
+  }, []);
+  const startEditing = useCallback(
+    (event) => {
+      event?.stopPropagation();
+      const initialValue = fieldConfig.getInputValue ? fieldConfig.getInputValue(row) : row.original[fieldConfig.key];
+      setValue(initialValue);
+      setIsEditing(true);
+    },
+    [fieldConfig, row]
+  );
+  const save = useCallback(
+    async (nextValue = value) => {
+      if (savingRef.current) return;
+      savingRef.current = true;
+      setIsSaving(true);
+      try {
+        await onSave(nextValue);
+        setIsEditing(false);
+      } catch {
+      } finally {
+        savingRef.current = false;
+        setIsSaving(false);
+      }
+    },
+    [onSave, value]
+  );
+  useEffect(() => {
+    if (!isEditing || isComplex) return void 0;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (containerRef.current?.contains(target)) return;
+      if (target instanceof Element && target.closest(PORTAL_SELECTOR)) return;
+      cancel();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [cancel, isComplex, isEditing]);
+  const handleChange = useCallback((nextValue) => {
+    setValue(nextValue);
+  }, []);
+  const handleKeyDown = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+        return;
+      }
+      if (isComplex || event.key !== "Enter") return;
+      if (!(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      void save();
+    },
+    [cancel, isComplex, save]
+  );
+  return {
+    containerRef,
+    isEditing,
+    isSaving,
+    value,
+    setValue,
+    saveMode,
+    isComplex,
+    startEditing,
+    cancel,
+    save,
+    handleChange,
+    handleKeyDown
+  };
+}
+export {
+  isComplexField,
+  resolveSaveMode,
+  useInlineEditableCell
+};

package/hooks/use-intersection-observer.js

@@ -0,0 +1,24 @@
+import { useEffect, useState, useRef } from "react";
+const useIntersectionObserver = (options) => {
+  const targetRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    }, options);
+    const target = targetRef.current;
+    if (target) {
+      observer.observe(target);
+    }
+    return () => {
+      if (target) {
+        observer.unobserve(target);
+      }
+    };
+  }, [options]);
+  return [targetRef, isVisible];
+};
+var use_intersection_observer_default = useIntersectionObserver;
+export {
+  use_intersection_observer_default as default
+};

package/hooks/use-interval.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};
+var use_interval_default = useInterval;
+export {
+  use_interval_default as default
+};

package/hooks/use-latest-message-id.js

@@ -0,0 +1,13 @@
+import useChatStore from "../store/chat-store.js";
+function useLatestMessageId(chatRoomId, chatRoom) {
+  const latestFromList = useChatStore((state) => {
+    const messages = state.ticketChatMessages[chatRoomId] || [];
+    return messages.length ? messages[messages.length - 1]?._id || null : null;
+  });
+  return latestFromList || chatRoom?.last_msg?._id || null;
+}
+var use_latest_message_id_default = useLatestMessageId;
+export {
+  use_latest_message_id_default as default,
+  useLatestMessageId
+};

package/hooks/use-logout-listener.js

@@ -0,0 +1,43 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import { LOGOUT_EVENT } from "@zenify-omni/chat-js/constants/events.js";
+import {
+  getSessionEndReason,
+  logout as logoutStorage,
+  SessionEndReason
+} from "@zenify-omni/chat-js/utils/auth.js";
+import { logout } from "@zenify-omni/chat-js/utils/session-end.js";
+const useLogoutListener = () => {
+  useEffect(() => {
+    const eventHandler = (ev) => {
+      const detail = ev.detail || {};
+      logoutStorage();
+      if (detail.isExpired) {
+        toast.error(
+          getSessionEndReason() === SessionEndReason.REVOKED ? i18n.t("common:message.sessionRevokedRelogin", {
+            defaultValue: "Phi\xEAn \u0111\u0103ng nh\u1EADp \u0111\xE3 k\u1EBFt th\xFAc, vui l\xF2ng \u0111\u0103ng nh\u1EADp l\u1EA1i!"
+          }) : i18n.t("common:message.sessionExpiredRelogin", {
+            defaultValue: "Phi\xEAn \u0111\u0103ng nh\u1EADp \u0111\xE3 h\u1EBFt h\u1EA1n, vui l\xF2ng \u0111\u0103ng nh\u1EADp l\u1EA1i!"
+          })
+        );
+      }
+    };
+    document.addEventListener(LOGOUT_EVENT, eventHandler);
+    return () => document.removeEventListener(LOGOUT_EVENT, eventHandler);
+  }, []);
+  useEffect(() => {
+    const eventHandler = (event) => {
+      if (event.key === "zenify-sdk-user" && !event.newValue) {
+        logout();
+      }
+    };
+    window.addEventListener("storage", eventHandler);
+    return () => window.removeEventListener("storage", eventHandler);
+  }, []);
+};
+var use_logout_listener_default = useLogoutListener;
+export {
+  use_logout_listener_default as default,
+  logout
+};

package/hooks/use-org-tree.js

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getOrgTree } from "@zenify-omni/chat-js/api/orgTree.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { buildTree } from "@zenify-omni/chat-js/utils/org-tree.js";
+import { useOrgTreeEnabled } from "./use-feature-flags.js";
+const EMPTY_LIST = [];
+const DEFAULT_SUMMARY = {
+  total_units: 0,
+  total_roots: 0,
+  total_members: 0
+};
+function useOrgTree({ enabled } = {}) {
+  const orgTreeEnabled = useOrgTreeEnabled();
+  const effectiveEnabled = enabled ?? orgTreeEnabled;
+  const query = useQuery({
+    queryKey: [QUERY_KEY.ORG_TREE],
+    queryFn: async () => {
+      const res = await getOrgTree();
+      const payload = res?.data ?? res ?? {};
+      return {
+        list: payload.list || [],
+        summary: payload.summary || DEFAULT_SUMMARY
+      };
+    },
+    enabled: !!effectiveEnabled,
+    staleTime: 5 * 60 * 1e3,
+    refetchOnWindowFocus: false
+  });
+  const tree = useMemo(
+    () => buildTree(query.data?.list || []),
+    [query.data?.list]
+  );
+  return {
+    ...query,
+    list: query.data?.list || EMPTY_LIST,
+    summary: query.data?.summary || DEFAULT_SUMMARY,
+    tree
+  };
+}
+export {
+  useOrgTree
+};

package/hooks/use-permission.js

@@ -0,0 +1,33 @@
+import { KeyApplyTo } from "@zenify-omni/chat-js/constants/mask-data-config.js";
+const checkApplyToWithUser = (applyTo = [], user) => {
+  if (applyTo.length === 0) return true;
+  if (!user) return false;
+  let check = false;
+  for (const item of applyTo) {
+    if (item.key === KeyApplyTo.USER && item?.value?.includes(user._id)) {
+      check = true;
+    }
+    if (item.key === KeyApplyTo.ROLE && item?.value?.includes(user.role)) {
+      check = true;
+    }
+    if (item.key === KeyApplyTo.GROUP && item?.value?.map(String)?.includes(String(user.group_id))) {
+      check = true;
+    }
+    if (item.key === KeyApplyTo.ORGANIZATION && item?.value?.map(String)?.includes(String(user.organize_id))) {
+      check = true;
+    }
+  }
+  return check;
+};
+const checkParentPermission = (parentKey, configs, user, ruleKey = "enabled") => {
+  if (!parentKey) return true;
+  if (!user) return false;
+  const parentConfig = configs?.find((config) => config.key === parentKey);
+  if (!parentConfig) {
+    return true;
+  }
+  if (!checkApplyToWithUser(parentConfig.apply_to, user)) {
+    return false;
+  }
+  return parentConfig.rules?.[ruleKey] === true;
+};

package/hooks/use-quick-filters.js

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient
+} from "@tanstack/react-query";
+import {
+  getQuickFilters,
+  deleteQuickFilter,
+  updateQuickFilterOrder,
+  toggleQuickFilterVisibility
+} from "@zenify-omni/chat-js/api/chatroom.js";
+import { throwException } from "../exceptions/throw-exception.js";
+const PAGE_LIMIT = 10;
+const QUICK_FILTERS_QUERY_KEY = ["quick-filters-bar"];
+function useInvalidateQuickFilters() {
+  const queryClient = useQueryClient();
+  return useCallback(
+    () => queryClient.invalidateQueries({ queryKey: QUICK_FILTERS_QUERY_KEY }),
+    [queryClient]
+  );
+}
+function useQuickFilters({ onFilterUnavailable } = {}) {
+  const queryClient = useQueryClient();
+  const queryKey = QUICK_FILTERS_QUERY_KEY;
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    isLoading
+  } = useInfiniteQuery({
+    queryKey,
+    queryFn: async ({ pageParam = null }) => {
+      const response = await getQuickFilters({
+        params: { limit: PAGE_LIMIT, cursor: pageParam }
+      });
+      return response?.data;
+    },
+    getNextPageParam: (lastPage) => lastPage?.next_cursor ?? void 0
+  });
+  const filters = useMemo(
+    () => data?.pages.flatMap((page) => page?.items || []) || [],
+    [data]
+  );
+  const visibleCount = useMemo(
+    () => filters.filter((filter) => !filter.is_hidden).length,
+    [filters]
+  );
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage && visibleCount < PAGE_LIMIT) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, visibleCount, fetchNextPage]);
+  const hasNextPageRef = useRef(hasNextPage);
+  const isFetchingNextPageRef = useRef(isFetchingNextPage);
+  useEffect(() => {
+    hasNextPageRef.current = hasNextPage;
+  }, [hasNextPage]);
+  useEffect(() => {
+    isFetchingNextPageRef.current = isFetchingNextPage;
+  }, [isFetchingNextPage]);
+  const observerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+    };
+  }, []);
+  const lastItemRef = useCallback(
+    (node) => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      if (!node) return;
+      observerRef.current = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting && hasNextPageRef.current && !isFetchingNextPageRef.current) {
+            fetchNextPage();
+          }
+        },
+        { threshold: 0.9 }
+      );
+      observerRef.current.observe(node);
+    },
+    [fetchNextPage]
+  );
+  const patchCache = useCallback(
+    (updateItems) => {
+      queryClient.setQueryData(queryKey, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            items: updateItems(page?.items || [])
+          }))
+        };
+      });
+    },
+    [queryClient, queryKey]
+  );
+  const dropFilter = useCallback(
+    (id) => patchCache((items) => items.filter((item) => item._id !== id)),
+    [patchCache]
+  );
+  const deleteMutation = useMutation({
+    mutationFn: (id) => deleteQuickFilter({ id }),
+    onSuccess: (_result, id) => {
+      dropFilter(id);
+      onFilterUnavailable?.(id);
+    },
+    onError: throwException
+  });
+  const toggleVisibilityMutation = useMutation({
+    mutationFn: ({ id, is_hidden }) => toggleQuickFilterVisibility({ id, is_hidden }),
+    onSuccess: (_result, { id, is_hidden }) => {
+      patchCache(
+        (items) => items.map((item) => item._id === id ? { ...item, is_hidden } : item)
+      );
+      if (is_hidden) onFilterUnavailable?.(id);
+    },
+    onError: throwException
+  });
+  const reorderMutation = useMutation({
+    mutationFn: (nextFilters) => updateQuickFilterOrder({
+      data: nextFilters.map((filter, index) => ({
+        filter_id: filter._id,
+        order: index
+      }))
+    }),
+    onMutate: async (nextFilters) => {
+      await queryClient.cancelQueries({ queryKey });
+      const previous = queryClient.getQueryData(queryKey);
+      const remaining = [...nextFilters];
+      patchCache((items) => remaining.splice(0, items.length));
+      return { previous };
+    },
+    onError: (error, _nextFilters, context) => {
+      queryClient.setQueryData(queryKey, context?.previous);
+      throwException(error);
+    }
+  });
+  const toggleVisibility = useCallback(
+    (filter) => toggleVisibilityMutation.mutate({
+      id: filter._id,
+      is_hidden: !filter.is_hidden
+    }),
+    [toggleVisibilityMutation]
+  );
+  const reorder = useCallback(
+    (nextFilters) => reorderMutation.mutate(nextFilters),
+    [reorderMutation]
+  );
+  const remove = useCallback(
+    (id) => id && deleteMutation.mutate(id),
+    [deleteMutation]
+  );
+  return {
+    filters,
+    isLoading,
+    isFetching,
+    hasNextPage,
+    isFetchingNextPage,
+    lastItemRef,
+    toggleVisibility,
+    reorder,
+    remove,
+    dropFilter
+  };
+}
+export {
+  useQuickFilters as default,
+  useInvalidateQuickFilters
+};