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

package/components/chat-route/chat-list/filter-group-select.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import GroupTreeMultiSelect from "../../org-tree/group-tree-multi-select.js";
+import { useOrgTreeEnabled } from "../../../hooks/use-feature-flags.js";
+import { useOrgTree } from "../../../hooks/use-org-tree.js";
+import { useSettings } from "../../../hooks/use-settings.js";
+import { getUser, isRoleTeamLeader, isRoleTeamLeaderSale } from "@zenify-omni/chat-js/utils/auth.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function FilterGroupSelect({ value, onChange, placeholder }) {
+  const orgTreeEnabled = useOrgTreeEnabled();
+  const settings = useSettings();
+  const user = getUser();
+  const lockedToOwnGroup = isRoleTeamLeader() || isRoleTeamLeaderSale();
+  const selectedIds = value || [];
+  const { list: orgList } = useOrgTree({
+    enabled: orgTreeEnabled && lockedToOwnGroup
+  });
+  const scopedOrgList = useMemo(() => {
+    if (!lockedToOwnGroup) return void 0;
+    return (orgList || []).filter(
+      (node) => String(node.id) === String(user?.group_id)
+    );
+  }, [orgList, lockedToOwnGroup, user?.group_id]);
+  const groupOptions = useMemo(() => {
+    const all = settings?.groups ?? [];
+    const filtered = lockedToOwnGroup ? all.filter((group) => String(group.id) === String(user?.group_id)) : all;
+    return filtered.map((group) => ({
+      label: group.name,
+      value: group.id.toString()
+    }));
+  }, [settings?.groups, lockedToOwnGroup, user?.group_id]);
+  const effectivePlaceholder = placeholder ?? i18n.t("common:placeholder.selectDepartment", {
+    defaultValue: "Ch\u1ECDn b\u1ED9 ph\u1EADn"
+  });
+  if (orgTreeEnabled) {
+    return /* @__PURE__ */ jsx(
+      GroupTreeMultiSelect,
+      {
+        value: selectedIds.map(Number),
+        onChange: (ids) => onChange?.(ids.map(String)),
+        list: scopedOrgList,
+        labelWithPath: false,
+        placeholder: effectivePlaceholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MultipleSelector,
+    {
+      value: groupOptions.filter(
+        (option) => selectedIds.includes(option.value)
+      ),
+      onChange: (options) => onChange?.(options.map((option) => option.value)),
+      options: groupOptions,
+      placeholder: effectivePlaceholder,
+      inputProps: { className: "px-1" },
+      commandProps: {
+        filter: (value2, search, keywords) => keywords[0].toLowerCase().includes(search.trim().toLowerCase())
+      }
+    }
+  );
+}
+export {
+  FilterGroupSelect as default
+};

package/components/chat-route/chat-list/filter-pin-menu.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  arrayMove,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { LoaderCircle, Menu, Pin, PinOff } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import { cn } from "../../../lib/utils.js";
+function PinRow({
+  item,
+  dragHandle,
+  actions,
+  onTogglePin,
+  showGroupDivider,
+  rowRef,
+  style,
+  isDragging
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowRef,
+      style,
+      className: cn(
+        "flex items-center gap-2 rounded-lg px-1.5 py-2 hover:bg-surface-subtle",
+        showGroupDivider && "mt-1 border-t border-border-subtle pt-3",
+        isDragging && "z-50 shadow-lg"
+      ),
+      children: [
+        dragHandle,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onTogglePin?.(item),
+            className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-xs", children: item.name }),
+              item.isPinned ? /* @__PURE__ */ jsx(Pin, { className: "shrink-0", size: 14, fill: "hsl(var(--primary))", stroke: "hsl(var(--primary))" }) : /* @__PURE__ */ jsx(PinOff, { className: "shrink-0", size: 14, stroke: "hsl(var(--muted-foreground))" })
+            ]
+          }
+        ),
+        actions
+      ]
+    }
+  );
+}
+function SortablePinRow({ item, ...props }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: item.id });
+  return /* @__PURE__ */ jsx(
+    PinRow,
+    {
+      ...props,
+      item,
+      rowRef: (node) => {
+        setNodeRef(node);
+        props.rowRef?.(node);
+      },
+      style: {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.6 : 1
+      },
+      isDragging,
+      dragHandle: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          ...attributes,
+          ...listeners,
+          className: "h-4 w-4 shrink-0 cursor-grab text-muted-foreground outline-none"
+        }
+      )
+    }
+  );
+}
+function FilterPinMenu({
+  trigger,
+  items = [],
+  onTogglePin,
+  onReorder,
+  renderRowActions,
+  lastItemRef,
+  isFetchingNextPage,
+  side = "bottom",
+  align = "end",
+  contentClassName
+}) {
+  const sensors = useSensors(useSensor(PointerSensor));
+  const handleDragEnd = ({ active, over }) => {
+    if (!over || active.id === over.id) return;
+    const dragged = items.find((item) => item.id === active.id);
+    const target = items.find((item) => item.id === over.id);
+    if (!dragged || !target) return;
+    if (dragged.group !== target.group) return;
+    const groupItems = items.filter((item) => item.group === dragged.group);
+    const oldIndex = groupItems.indexOf(dragged);
+    const newIndex = groupItems.indexOf(target);
+    onReorder?.(arrayMove(groupItems, oldIndex, newIndex), dragged.group);
+  };
+  const renderRow = (item, index) => /* @__PURE__ */ jsx(
+    SortablePinRow,
+    {
+      item,
+      onTogglePin,
+      actions: renderRowActions?.(item),
+      showGroupDivider: index > 0 && items[index - 1].group !== item.group,
+      rowRef: index === items.length - 1 ? lastItemRef : void 0
+    },
+    item.id
+  );
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side,
+        align,
+        className: cn("w-64 px-1 py-0.5", contentClassName),
+        children: /* @__PURE__ */ jsxs("div", { className: "scroll-container-hide max-h-80 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors,
+              collisionDetection: closestCenter,
+              onDragEnd: handleDragEnd,
+              children: /* @__PURE__ */ jsx(
+                SortableContext,
+                {
+                  items: items.map((item) => item.id),
+                  strategy: verticalListSortingStrategy,
+                  children: items.map(renderRow)
+                }
+              )
+            }
+          ),
+          isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  FilterPinMenu as default
+};

package/components/chat-route/chat-list/friend-request/list-friend-request.js

@@ -0,0 +1,287 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { Button } from "../../../ui/button.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../ui/avatar.js";
+import { Card, CardContent } from "../../../ui/card.js";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  acceptFriendRequest,
+  getListFriendRequestReceived,
+  getListFriendRequestSent,
+  rejectFriendRequest,
+  undoFriendRequest
+} from "@zenify-omni/chat-js/api/chat.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import {
+  formatDayWithTime,
+  formatDayWithTimeFromTimestamps
+} from "@zenify-omni/chat-js/utils/date.js";
+import { showSuccessToast } from "../../../ui/sonner.js";
+import { throwException } from "../../../../exceptions/throw-exception.js";
+import { cn } from "../../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const FILTER_OPTIONS = {
+  ALL: "all",
+  RECEIVED: "received",
+  SENT: "sent"
+};
+const REQUEST_TYPES = {
+  RECEIVED: "received",
+  SENT: "sent"
+};
+const getUserDisplayName = (data) => {
+  return data?.zalo_display_name || data?.name || data?.zalo_phone_number || data?.zalo_id || "Unknown";
+};
+const getInitials = (name) => {
+  return name.charAt(0).toUpperCase();
+};
+const normalizeSearchText = (text) => {
+  return text?.toLowerCase().trim() || "";
+};
+const matchesSearch = (data, query) => {
+  if (!query) return true;
+  const searchFields = [
+    data?.zalo_display_name,
+    data?.name,
+    data?.zalo_phone_number
+  ];
+  const normalizedQuery = normalizeSearchText(query);
+  return searchFields.some(
+    (field) => normalizeSearchText(field).includes(normalizedQuery)
+  );
+};
+const FriendRequestCard = memo(
+  ({ data, type, onAccept, onReject, onRevoke }) => {
+    const { t } = useTranslation();
+    const displayName = getUserDisplayName(data);
+    const initials = getInitials(displayName);
+    const handleCancel = useCallback(() => {
+      if (type === REQUEST_TYPES.RECEIVED) {
+        onReject?.(data?.zalo_id);
+      } else {
+        onRevoke?.(data?.zalo_id);
+      }
+    }, [type, data?.zalo_id, onReject, onRevoke]);
+    const handleAccept = useCallback(() => {
+      onAccept?.(data?.zalo_id);
+    }, [data?.zalo_id, onAccept]);
+    const displayTime = useMemo(() => {
+      if (!data?.time || isNaN(data.time) || data.time < 0) return "";
+      return type === REQUEST_TYPES.RECEIVED ? formatDayWithTime(data?.time) : formatDayWithTimeFromTimestamps(data?.time);
+    }, [type, data?.time]);
+    const displayMessage = useMemo(() => {
+      if (!data?.message) return "";
+      const maxChars = 100;
+      return data.message.length > maxChars ? data.message.slice(0, maxChars).trim() + "..." : data.message;
+    }, [data?.message]);
+    if (!data) return null;
+    return /* @__PURE__ */ jsx(Card, { className: "relative flex w-full flex-shrink-0 border shadow-sm", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex h-full w-full flex-col p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex gap-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-11 w-11 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: data.avatar, alt: displayName }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-0.5 truncate text-sm font-semibold leading-tight", children: displayName }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs leading-tight text-muted-foreground", children: displayTime })
+        ] })
+      ] }),
+      data.message && /* @__PURE__ */ jsx("div", { className: "mb-3 flex-1 overflow-hidden rounded-md bg-muted/50 p-2.5", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-xs leading-relaxed text-foreground/80", children: displayMessage }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-auto flex w-full gap-2", children: type === REQUEST_TYPES.RECEIVED ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleCancel,
+            className: "h-8 flex-1 text-xs font-normal",
+            children: t("common:action.reject", { defaultValue: "T\u1EEB ch\u1ED1i" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            onClick: handleAccept,
+            className: "h-8 flex-1 text-xs font-normal",
+            children: t("common:action.agree", { defaultValue: "\u0110\u1ED3ng \xFD" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: handleCancel,
+          className: "h-8 w-full text-xs font-normal",
+          children: t("chat:action.recallFriendRequest", {
+            defaultValue: "Thu h\u1ED3i l\u1EDDi m\u1EDDi"
+          })
+        }
+      ) })
+    ] }) });
+  }
+);
+FriendRequestCard.displayName = "FriendRequestCard";
+const FriendRequestSection = memo(
+  ({ requests, type, onAccept, onReject, onRevoke }) => {
+    const { t } = useTranslation();
+    if (requests.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-10", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("chat:empty.noFriendRequests", {
+        defaultValue: "Kh\xF4ng c\xF3 l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n n\xE0o"
+      }) }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "mb-6 px-2 last:mb-0", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid max-h-[500px] grid-cols-3 gap-2 overflow-y-auto pb-2"
+        ),
+        children: requests.map((request) => /* @__PURE__ */ jsx(
+          FriendRequestCard,
+          {
+            data: request,
+            type,
+            onAccept,
+            onReject,
+            onRevoke
+          },
+          `${type}-${request.zalo_id}`
+        ))
+      }
+    ) });
+  }
+);
+FriendRequestSection.displayName = "FriendRequestSection";
+const useFriendRequests = (userId, refreshFriendRequestListAt) => {
+  const {
+    data: receivedRequests = [],
+    isLoading: receivedLoading,
+    error: receivedError
+  } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_ZALO_FRIEND_REQUEST_RECEIVED,
+      userId,
+      refreshFriendRequestListAt
+    ],
+    queryFn: async () => {
+      const { data } = await getListFriendRequestReceived(userId, {
+        target: "all"
+      });
+      if (!data?.data?.length) {
+        return [];
+      }
+      return data.data.flatMap(
+        (item) => (item.requests || []).map((request) => ({
+          ...request,
+          parent_zalo_id: item.zalo_id,
+          parent_zalo_type: item.zalo_type,
+          parent_zalo_name: item.zalo_name
+        }))
+      );
+    },
+    enabled: !!userId,
+    refetchOnMount: true
+  });
+  const {
+    data: sentRequests = [],
+    isLoading: sentLoading,
+    error: sentError
+  } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_ZALO_FRIEND_REQUEST_SENT,
+      userId,
+      refreshFriendRequestListAt
+    ],
+    queryFn: async () => {
+      const { data } = await getListFriendRequestSent(userId, {
+        target: "all"
+      });
+      if (!data?.data?.length) {
+        return [];
+      }
+      return data.data.flatMap(
+        (item) => (item.requests || []).map((request) => ({
+          ...request,
+          parent_zalo_id: item.zalo_id,
+          parent_zalo_type: item.zalo_type,
+          parent_zalo_name: item.zalo_name
+        }))
+      );
+    },
+    enabled: !!userId,
+    refetchOnMount: true
+  });
+  return {
+    receivedRequests,
+    sentRequests,
+    isLoading: receivedLoading || sentLoading,
+    hasError: !!receivedError || !!sentError
+  };
+};
+const useMutateFriendRequests = (userId) => {
+  const queryClient = useQueryClient();
+  const reloadUseQuery = () => {
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEY.GET_ZALO_FRIEND_REQUEST_RECEIVED, userId]
+    });
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEY.GET_ZALO_FRIEND_REQUEST_SENT, userId]
+    });
+  };
+  const acceptMutate = useMutation({
+    mutationFn: async ({ zaloId, parentZaloId }) => {
+      const { data } = await acceptFriendRequest(userId, zaloId, parentZaloId);
+      return data;
+    },
+    onSuccess: () => {
+      showSuccessToast(
+        i18n.t("chat:toast.acceptFriendRequestSuccess", {
+          defaultValue: "Ch\u1EA5p nh\u1EADn l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n th\xE0nh c\xF4ng"
+        })
+      );
+      reloadUseQuery();
+    },
+    onError: throwException
+  });
+  const rejectMutate = useMutation({
+    mutationFn: async ({ zaloId, parentZaloId }) => {
+      const { data } = await rejectFriendRequest(userId, zaloId, parentZaloId);
+      return data;
+    },
+    onSuccess: () => {
+      showSuccessToast(
+        i18n.t("chat:toast.rejectFriendRequestSuccess", {
+          defaultValue: "T\u1EEB ch\u1ED1i l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n th\xE0nh c\xF4ng"
+        })
+      );
+      reloadUseQuery();
+    },
+    onError: throwException
+  });
+  const undoMutate = useMutation({
+    mutationFn: async ({ zaloId, parentZaloId }) => {
+      const { data } = await undoFriendRequest(userId, zaloId, parentZaloId);
+      return data;
+    },
+    onSuccess: () => {
+      showSuccessToast(
+        i18n.t("chat:toast.recallFriendRequestSuccess", {
+          defaultValue: "Thu h\u1ED3i l\u1EDDi m\u1EDDi k\u1EBFt b\u1EA1n th\xE0nh c\xF4ng"
+        })
+      );
+      reloadUseQuery();
+    },
+    onError: throwException
+  });
+  return {
+    acceptMutate,
+    rejectMutate,
+    undoMutate
+  };
+};
+export {
+  FriendRequestCard,
+  FriendRequestSection
+};