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

package/components/custom/previews/whatsapp/whatsapp-poll-preview.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BarChart2 } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { useTranslation } from "react-i18next";
+function WhatsAppPollPreview({ msg, className, timeText }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[240px] overflow-hidden rounded-xl border bg-card shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(BarChart2, { className: "h-5 w-5 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[15px] font-medium leading-snug", children: t("common:message.pollCreated", {
+            defaultValue: "\u0110\xE3 t\u1EA1o th\u0103m d\xF2 \xFD ki\u1EBFn"
+          }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status, className: "px-3" })
+      ]
+    }
+  );
+}
+export {
+  WhatsAppPollPreview as default
+};

package/components/custom/previews/whatsapp/whatsapp-product-preview.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ShoppingBag } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { useTranslation } from "react-i18next";
+function WhatsAppProductPreview({ msg, className, timeText }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[240px] overflow-hidden rounded-xl border bg-card shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(ShoppingBag, { className: "h-5 w-5 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[15px] font-medium leading-snug", children: t("common:message.productSent", {
+            defaultValue: "\u0110\xE3 g\u1EEDi s\u1EA3n ph\u1EA9m"
+          }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status, className: "px-3" })
+      ]
+    }
+  );
+}
+export {
+  WhatsAppProductPreview as default
+};

package/components/custom/retry-image.js

@@ -0,0 +1,44 @@
+import { createElement } from "react";
+import { imagesFallbackJpg } from "../../assets/public-urls.js";
+import { useState, useEffect, useCallback, useRef } from "react";
+const getFallbackSrc = () => imagesFallbackJpg;
+const RETRY_DELAYS_MS = [500, 1500];
+function RetryImage({ src, onFinalError, className, style, ...props }) {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [attempt, setAttempt] = useState(0);
+  const retryTimerRef = useRef(null);
+  useEffect(() => {
+    setImgSrc(src);
+    setAttempt(0);
+    return () => clearTimeout(retryTimerRef.current);
+  }, [src]);
+  const handleError = useCallback(() => {
+    if (imgSrc === getFallbackSrc()) return;
+    if (attempt < RETRY_DELAYS_MS.length) {
+      retryTimerRef.current = setTimeout(() => {
+        setAttempt((current) => current + 1);
+      }, RETRY_DELAYS_MS[attempt]);
+      return;
+    }
+    if (onFinalError) {
+      onFinalError();
+    } else {
+      setImgSrc(getFallbackSrc());
+    }
+  }, [imgSrc, attempt, onFinalError]);
+  return /* @__PURE__ */ createElement(
+    "img",
+    {
+      ...props,
+      key: `${imgSrc}-${attempt}`,
+      className,
+      style,
+      src: imgSrc,
+      onError: handleError,
+      referrerPolicy: "no-referrer"
+    }
+  );
+}
+export {
+  RetryImage
+};

package/components/custom/search-input.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search } from "lucide-react";
+import { Input } from "../ui/input.js";
+import { cn } from "../../lib/utils.js";
+const SearchInput = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-card px-3 py-1 pl-8 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+          className
+        ),
+        ref,
+        ...props
+      }
+    )
+  ] });
+});
+SearchInput.displayName = "SearchInput";
+export {
+  SearchInput
+};

package/components/custom/separator-with-text.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+function SeparatorWithText({ text, className, ...prop }) {
+  return /* @__PURE__ */ jsxs("div", { className: "my-6 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "inset-0 flex flex-1 items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border-subtle" }) }),
+    /* @__PURE__ */ jsx("div", { className: cn("mx-1 text-xs text-muted-foreground", className), ...prop, children: text }),
+    /* @__PURE__ */ jsx("div", { className: "inset-0 flex flex-1 items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border-subtle" }) })
+  ] });
+}
+var separator_with_text_default = SeparatorWithText;
+export {
+  separator_with_text_default as default
+};

package/components/custom/showToast.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { Bell } from "lucide-react";
+const showToast = (title, type, config) => {
+  const handleRenderIcon = () => {
+    switch (config.action) {
+      case "ring":
+        return /* @__PURE__ */ jsx(Bell, { size: 20 });
+      default:
+        return null;
+    }
+  };
+  return toast(title, {
+    type,
+    icon: handleRenderIcon(),
+    ...config
+  });
+};
+export {
+  showToast
+};

package/components/custom/sortable-header.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownAZ, ArrowDownZA, ChevronsUpDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../lib/utils.js";
+function parseSortBy(sortBy) {
+  if (!sortBy || typeof sortBy !== "string") return { field: null, dir: null };
+  const [field, dir] = sortBy.split(":");
+  return { field: field || null, dir: dir || null };
+}
+function nextSortState(currentSortBy, field) {
+  const { field: curField, dir } = parseSortBy(currentSortBy);
+  if (curField !== field) return `${field}:asc`;
+  if (dir === "asc") return `${field}:desc`;
+  if (dir === "desc") return null;
+  return `${field}:asc`;
+}
+function SortableHeader({ label, field, sortBy, onToggle, className }) {
+  const { field: curField, dir } = parseSortBy(sortBy);
+  const active = curField === field;
+  const Icon = !active ? ChevronsUpDown : dir === "asc" ? ArrowDownAZ : ArrowDownZA;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex select-none items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: 14,
+        className: cn(
+          "shrink-0 cursor-pointer",
+          active ? "text-primary" : "opacity-50"
+        ),
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onToggle(nextSortState(sortBy, field));
+        }
+      }
+    )
+  ] });
+}
+function makeSortableHeader(label, field, useSortBinding, labelDefault) {
+  function SortableHeaderCell() {
+    const { t } = useTranslation();
+    const { sortBy, setSort } = useSortBinding();
+    return /* @__PURE__ */ jsx(
+      SortableHeader,
+      {
+        label: labelDefault === void 0 ? label : t(label, { defaultValue: labelDefault }),
+        field,
+        sortBy,
+        onToggle: setSort
+      }
+    );
+  }
+  SortableHeaderCell.displayName = `SortableHeader(${field})`;
+  return SortableHeaderCell;
+}
+export {
+  SortableHeader,
+  makeSortableHeader,
+  nextSortState,
+  parseSortBy
+};

package/components/custom/table-resize-line.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/utils.js";
+function TableResizeLine({ header, scrollContainerRef }) {
+  const canResize = header.column.getCanResize() && !header.column.columnDef.isNotResize;
+  const resizeHandler = header.getResizeHandler();
+  const isResizingRef = useRef(false);
+  const removeListenersRef = useRef(() => {
+  });
+  const attachBlockMoveOutside = () => {
+    const blockMouseMove = (ev) => {
+      if (!isResizingRef.current) return;
+      const container = scrollContainerRef?.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = ev.clientX;
+      if (x <= rect.left || x >= rect.right) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation?.();
+      }
+    };
+    const blockTouchMove = (ev) => {
+      if (!isResizingRef.current) return;
+      const container = scrollContainerRef?.current;
+      if (!container) return;
+      const t = ev.touches?.[0] || ev.changedTouches?.[0];
+      const x = t?.clientX;
+      if (x == null) return;
+      const rect = container.getBoundingClientRect();
+      if (x <= rect.left || x >= rect.right) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation?.();
+      }
+    };
+    window.addEventListener("mousemove", blockMouseMove, true);
+    window.addEventListener("touchmove", blockTouchMove, {
+      capture: true,
+      passive: false
+    });
+    removeListenersRef.current = () => {
+      window.removeEventListener("mousemove", blockMouseMove, true);
+      window.removeEventListener("touchmove", blockTouchMove, true);
+    };
+  };
+  const cleanup = () => {
+    isResizingRef.current = false;
+    removeListenersRef.current?.();
+    removeListenersRef.current = () => {
+    };
+  };
+  const handleMouseDown = (e) => {
+    isResizingRef.current = true;
+    attachBlockMoveOutside();
+    resizeHandler(e);
+    const onUp = () => {
+      cleanup();
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mouseup", onUp);
+  };
+  const handleTouchStart = (e) => {
+    isResizingRef.current = true;
+    attachBlockMoveOutside();
+    resizeHandler(e);
+    const onEnd = () => {
+      cleanup();
+      window.removeEventListener("touchend", onEnd);
+      window.removeEventListener("touchcancel", onEnd);
+    };
+    window.addEventListener("touchend", onEnd);
+    window.addEventListener("touchcancel", onEnd);
+  };
+  useEffect(() => () => cleanup(), []);
+  if (!canResize) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      className: cn(
+        "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
+        "bg-border/0 hover:bg-border/80",
+        header.column.getIsResizing() && "bg-primary"
+      )
+    }
+  );
+}
+export {
+  TableResizeLine
+};

package/components/custom/time-picker/index.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Clock } from "lucide-react";
+import { TimePickerInput } from "./time-picker-input.js";
+function TimePicker({
+  date,
+  setDate,
+  showHour = true,
+  showMinute = true,
+  showSecond = true,
+  minTime = null,
+  maxTime = null
+}) {
+  const minuteRef = useRef(null);
+  const hourRef = useRef(null);
+  const secondRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-10 cursor-pointer items-center",
+        onClick: () => hourRef.current?.focus(),
+        children: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      showHour && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        TimePickerInput,
+        {
+          picker: "hours",
+          date,
+          setDate,
+          ref: hourRef,
+          onRightFocus: () => minuteRef.current?.focus(),
+          minTime,
+          maxTime
+        }
+      ) }),
+      showMinute && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: ":" }),
+        /* @__PURE__ */ jsx(
+          TimePickerInput,
+          {
+            picker: "minutes",
+            date,
+            setDate,
+            ref: minuteRef,
+            onLeftFocus: () => hourRef.current?.focus(),
+            onRightFocus: () => secondRef.current?.focus(),
+            minTime,
+            maxTime
+          }
+        )
+      ] }),
+      showSecond && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: ":" }),
+        /* @__PURE__ */ jsx(
+          TimePickerInput,
+          {
+            picker: "seconds",
+            date,
+            setDate,
+            ref: secondRef,
+            onLeftFocus: () => minuteRef.current?.focus()
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TimePicker as default
+};

package/components/custom/time-picker/time-picker-input.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "../../ui/input.js";
+import { cn } from "../../../lib/utils.js";
+import { useEffect, useMemo, useState, forwardRef } from "react";
+import {
+  getArrowByType,
+  getDateByType,
+  setDateByType
+} from "./time-picker-utils.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { Button } from "../button.js";
+const TimePickerInput = forwardRef(function TimePickerInput2({
+  className,
+  type = "tel",
+  value,
+  id,
+  name,
+  date = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
+  setDate,
+  onChange,
+  onKeyDown,
+  picker,
+  period,
+  onLeftFocus,
+  onRightFocus,
+  minTime = null,
+  maxTime = null,
+  ...props
+}, ref) {
+  const [flag, setFlag] = useState(false);
+  const [prevIntKey, setPrevIntKey] = useState("0");
+  const isUnitDisabled = (unit) => {
+    const minH = minTime?.getHours?.();
+    const minM = minTime?.getMinutes?.();
+    const maxH = maxTime?.getHours?.();
+    const maxM = maxTime?.getMinutes?.();
+    const curH = date.getHours();
+    if (minTime) {
+      if (picker === "hours") {
+        if (unit <= minH) return true;
+      }
+      if (picker === "minutes") {
+        if (curH < minH) return true;
+        if (curH === minH && unit <= minM) return true;
+      }
+    }
+    if (maxTime) {
+      if (picker === "hours") {
+        if (unit >= maxH) return true;
+      }
+      if (picker === "minutes") {
+        if (curH > maxH) return true;
+        if (curH === maxH && unit >= maxM) return true;
+      }
+    }
+    return false;
+  };
+  useEffect(() => {
+    if (flag) {
+      const timer = setTimeout(() => {
+        setFlag(false);
+      }, 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, [flag]);
+  const calculatedValue = useMemo(() => {
+    return getDateByType(date, picker);
+  }, [date, picker]);
+  const calculateNewValue = (key) => {
+    if (picker === "12hours") {
+      if (flag && calculatedValue.slice(1, 2) === "1" && prevIntKey === "0")
+        return "0" + key;
+    }
+    return !flag ? "0" + key : calculatedValue.slice(1, 2) + key;
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Tab") return;
+    e.preventDefault();
+    if (e.key === "ArrowRight") onRightFocus && onRightFocus();
+    if (e.key === "ArrowLeft") onLeftFocus && onLeftFocus();
+    if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+      const step = e.key === "ArrowUp" ? 1 : -1;
+      const newValue = getArrowByType(calculatedValue, step, picker);
+      if (flag) setFlag(false);
+      const tempDate = new Date(date);
+      setDate(setDateByType(tempDate, newValue, picker, period));
+    }
+    if (e.key >= "0" && e.key <= "9") {
+      if (picker === "12hours") setPrevIntKey(e.key);
+      const newValue = calculateNewValue(e.key);
+      if (flag) onRightFocus && onRightFocus();
+      setFlag((prev) => !prev);
+      const tempDate = new Date(date);
+      setDate(setDateByType(tempDate, newValue, picker, period));
+    }
+  };
+  const handleTimeChange = (type2, value2) => {
+    const tempDate = new Date(date);
+    if (type2 === "hours") {
+      const hour = parseInt(value2, 10);
+      tempDate.setHours(hour);
+    } else if (type2 === "minutes") {
+      tempDate.setMinutes(parseInt(value2, 10));
+    } else if (type2 === "seconds") {
+      tempDate.setSeconds(parseInt(value2, 10));
+    }
+    setDate(tempDate);
+    onChange && onChange(tempDate);
+  };
+  const units = picker === "hours" ? 24 : picker === "minutes" ? 60 : picker === "seconds" ? 60 : 0;
+  return /* @__PURE__ */ jsxs(Popover, { modal: true, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        id: id || picker,
+        name: name || picker,
+        className: cn(
+          "w-[48px] cursor-pointer text-center font-mono text-base tabular-nums caret-transparent focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none",
+          className
+        ),
+        value: value || calculatedValue,
+        onChange: (e) => {
+          e.preventDefault();
+          onChange && onChange(e);
+        },
+        type,
+        inputMode: "decimal",
+        onKeyDown: (e) => {
+          onKeyDown && onKeyDown(e);
+          handleKeyDown(e);
+        },
+        ...props
+      }
+    ) }),
+    (picker === "hours" || picker === "minutes" || picker === "seconds") && /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[300px] overflow-auto p-3", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: Array.from({ length: units }, (_, i) => i).map((unitValue) => {
+      const disabled = isUnitDisabled(unitValue);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          size: "sm",
+          variant: date && Number(calculatedValue) === unitValue ? "default" : "ghost",
+          onClick: () => handleTimeChange(picker, unitValue.toString()),
+          children: unitValue
+        },
+        unitValue
+      );
+    }) }) }) })
+  ] });
+});
+export {
+  TimePickerInput
+};