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

package/components/shared/linked-customer-fields/use-linked-customer-fields.js

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { requestApi } from "@zenify-omni/chat-js/utils/request.js";
+const isMissingLinkedValue = (value) => {
+  if (value === null || value === void 0 || value === "") return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  return false;
+};
+const DEFAULT_ENDPOINT = "/v2/object-rules/linked-fields";
+const defaultBuildParams = ({ hostTarget, customerId, context }) => ({
+  host_target: hostTarget,
+  customer_id: customerId,
+  context
+});
+const fetchLinkedFields = async ({ endpoint, params }) => {
+  const { data } = await requestApi({
+    method: "get",
+    endpoint,
+    params
+  });
+  return data?.fields ?? [];
+};
+function useLinkedCustomerFields({
+  hostTarget,
+  customerId,
+  context,
+  endpoint = DEFAULT_ENDPOINT,
+  buildParams = defaultBuildParams
+}) {
+  const resolvedContext = context || "create";
+  const resolutionKey = hostTarget && customerId ? `${endpoint}::${hostTarget}::${customerId}::${resolvedContext}` : null;
+  const { data: fields = [], isLoading } = useQuery({
+    queryKey: [
+      "linked-customer-fields",
+      endpoint,
+      hostTarget,
+      customerId,
+      resolvedContext
+    ],
+    enabled: !!resolutionKey,
+    queryFn: () => fetchLinkedFields({
+      endpoint,
+      params: buildParams({
+        hostTarget,
+        customerId,
+        context: resolvedContext
+      })
+    })
+  });
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const baselineRef = useRef({});
+  const seededKeyRef = useRef(null);
+  useEffect(() => {
+    setValues({});
+    setErrors({});
+    baselineRef.current = {};
+    seededKeyRef.current = null;
+  }, [resolutionKey]);
+  useEffect(() => {
+    if (!resolutionKey || isLoading) return;
+    if (seededKeyRef.current === resolutionKey) return;
+    seededKeyRef.current = resolutionKey;
+    const seeded = {};
+    fields.forEach((field) => {
+      seeded[field.key] = field.value;
+    });
+    baselineRef.current = seeded;
+    setValues(seeded);
+  }, [fields, isLoading, resolutionKey]);
+  const setValue = useCallback((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const getPayload = useCallback(() => {
+    const customerFields = {};
+    fields.forEach((field) => {
+      if (field.read_only) return;
+      const currentValue = Object.prototype.hasOwnProperty.call(
+        values,
+        field.key
+      ) ? values[field.key] : field.value;
+      const baselineValue = baselineRef.current[field.key];
+      const changed = currentValue !== baselineValue;
+      if (field.required || changed) {
+        const normalized = field.type === "multi-select" && Array.isArray(currentValue) ? currentValue.map(
+          (v) => v !== null && typeof v === "object" ? v.value ?? v.key : v
+        ) : currentValue;
+        customerFields[field.key] = normalized;
+      }
+    });
+    return { customer_fields: customerFields };
+  }, [fields, values]);
+  const applyServerErrors = useCallback((errorFields) => {
+    if (!Array.isArray(errorFields) || errorFields.length === 0) return;
+    setErrors((prev) => {
+      const next = { ...prev };
+      errorFields.forEach((entry) => {
+        if (!entry || !entry.key) return;
+        next[entry.key] = entry.message;
+      });
+      return next;
+    });
+  }, []);
+  return {
+    fields,
+    values,
+    errors,
+    setValue,
+    getPayload,
+    applyServerErrors,
+    isLoading
+  };
+}
+export {
+  isMissingLinkedValue,
+  useLinkedCustomerFields
+};

package/components/smartqc-route/qc-form/controls/multi-select-search-agents.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import MultipleSelector from "../../../custom/multiple-selector.js";
+import { UserRole } from "@zenify-omni/chat-js/constants/user.js";
+import { allUser as searchAllUser } from "@zenify-omni/chat-js/api/user.js";
+import { useTranslation } from "react-i18next";
+const MultipleSelectSearchAgents = React.forwardRef((props, ref) => {
+  const { t } = useTranslation();
+  const handleSearchAllUsers = async (keyword) => {
+    if (keyword.length < 2) {
+      return [];
+    }
+    const params = {
+      keyword,
+      roles: JSON.stringify([
+        UserRole.AGENT,
+        UserRole.TEAM_LEADER,
+        UserRole.SUPERVISOR,
+        UserRole.ADMINISTRATOR
+      ])
+    };
+    if (props.groupId) {
+      params.group_id = props.groupId;
+    }
+    const { data } = await searchAllUser(params);
+    const options = data?.list?.map((option) => ({
+      label: option.name,
+      value: option._id,
+      group_id: option?.group_id?.toString(),
+      role: option.role
+    }));
+    return options ?? [];
+  };
+  return /* @__PURE__ */ jsx(
+    MultipleSelector,
+    {
+      ref,
+      ...props,
+      onSearch: handleSearchAllUsers,
+      placeholder: t("common:placeholder.searchAgent", {
+        defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm chuy\xEAn vi\xEAn"
+      })
+    }
+  );
+});
+MultipleSelectSearchAgents.displayName = "MultipleSelectSearchAgents";
+var multi_select_search_agents_default = MultipleSelectSearchAgents;
+export {
+  multi_select_search_agents_default as default
+};

package/components/ui/alert-dialog.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      ref,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};

package/components/ui/avatar.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/utils.js";
+const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    loading: "lazy",
+    decoding: "async",
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/components/ui/badge.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      size: {
+        small: "px-1.5 py-0.5 text-xs",
+        medium: "px-2.5 py-0.5 text-xs",
+        large: "px-3 py-1 text-base"
+      },
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        "default-soft": "border-transparent bg-primary/15 text-primary hover:bg-primary/25",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        "destructive-soft": "border-transparent bg-[--label-red] text-[--label-red-foreground] hover:bg-[--label-red]/80",
+        chip: "bg-secondary text-foreground font-normal",
+        outline: "text-foreground border-border",
+        "outline-primary": "border-primary text-primary hover:bg-primary/10",
+        "outline-secondary": "border-secondary text-secondary hover:bg-secondary/10",
+        "outline-destructive": "border-destructive text-destructive hover:bg-destructive/10",
+        "outline-success": "border-[--label-green-foreground] text-[--label-green-foreground] hover:bg-[--label-green-foreground]/10",
+        "outline-warning": "border-[--label-orange-foreground] text-[--label-orange-foreground] hover:bg-[--label-orange-foreground]/10",
+        "outline-info": "border-primary text-primary hover:bg-blue-500/10",
+        success: "border-transparent bg-[--label-green-foreground] text-white shadow hover:bg-[--label-green-foreground]/10",
+        warning: "border-transparent bg-[--label-orange-foreground] text-white shadow hover:bg-[--label-orange-foreground]/10",
+        "warning-soft": "border-transparent bg-[--label-orange] text-[--label-orange-foreground] hover:bg-[--label-orange]/80",
+        "success-soft": "border-transparent bg-[--label-green] text-[--label-green-foreground] hover:bg-[--label-green]/80",
+        info: "border-transparent bg-primary text-white shadow hover:bg-primary",
+        ghost: "border-transparent bg-background text-foreground hover:bg-muted",
+        muted: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80"
+      }
+    },
+    defaultVariants: {
+      size: "medium",
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props
+    }
+  );
+}
+export {
+  Badge,
+  badgeVariants
+};

package/components/ui/button.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};

package/components/ui/calendar.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  Components = {},
+  ...props
+}) {
+  const navButton = cn(
+    buttonVariants({ variant: "outline" }),
+    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+  );
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        month_caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        button_previous: cn(navButton, "absolute left-1"),
+        button_next: cn(navButton, "absolute right-1"),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-7 font-normal text-[0.7rem]",
+        week: "flex w-full mt-2",
+        day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-7 w-7 p-0 font-normal"
+        ),
+        range_start: "day-range-start rounded-l-md",
+        range_end: "day-range-end rounded-r-md",
+        range_middle: "bg-accent [&>button]:text-accent-foreground",
+        selected: cn(
+          "[&>button]:bg-primary [&>button]:text-primary-foreground",
+          "[&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
+          "[&>button]:focus:bg-primary [&>button]:focus:text-primary-foreground"
+        ),
+        today: "[&>button]:bg-accent [&>button]:text-accent-foreground",
+        outside: "day-outside [&>button]:text-muted-foreground [&>button]:opacity-50",
+        disabled: "[&>button]:text-muted-foreground [&>button]:opacity-50",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        // v9 gộp IconLeft/IconRight thành MỘT `Chevron` nhận `orientation`.
+        // Chỉ chuyền `className` xuống: `orientation`/`size`/`disabled` không
+        // phải thuộc tính hợp lệ của <svg>, React sẽ cảnh báo.
+        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" }),
+        ...Components
+      },
+      ...props,
+      onSelect: (date) => {
+        props.onSelect?.(date);
+      }
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+export {
+  Calendar
+};

package/components/ui/card.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};