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

package/components/custom/inputs/file-input.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import React, { useMemo } from "react";
+import { Input } from "../../ui/input.js";
+import { toast } from "sonner";
+import { formatBytes } from "../../../utils/file.js";
+import { DEFAULT_FILE_SIZE } from "@zenify-omni/chat-js/constants/file-upload.js";
+import { useFileUpload } from "../../../hooks/use-file-upload.js";
+const FileInput = React.forwardRef(
+  ({
+    acceptType = "*",
+    multiple = false,
+    maxFileSize = DEFAULT_FILE_SIZE,
+    onChange,
+    ...props
+  }, ref) => {
+    const extensions = useMemo(() => {
+      if (!acceptType || acceptType === "*") return [];
+      return acceptType.split(",").map((t) => t.trim().replace(/^\./, "").toLowerCase()).filter(Boolean);
+    }, [acceptType]);
+    const maxFileSizeMB = useMemo(
+      () => maxFileSize / (1024 * 1024),
+      [maxFileSize]
+    );
+    const { onChange: onFileChange } = useFileUpload({
+      extensions,
+      maxFileSizeMB,
+      multiple,
+      messages: {
+        FILE_TOO_LARGE: () => i18n.t("common:message.selectedFileTooLarge", {
+          size: formatBytes(maxFileSize),
+          defaultValue: "File b\u1EA1n v\u1EEBa ch\u1ECDn c\xF3 dung l\u01B0\u1EE3ng v\u01B0\u1EE3t qu\xE1 gi\u1EDBi h\u1EA1n cho ph\xE9p (T\u1ED1i \u0111a {size})"
+        }),
+        INVALID_EXTENSION: () => "File kh\xF4ng \u0111\xFAng \u0111\u1ECBnh d\u1EA1ng"
+      }
+    });
+    const handleChange = (e) => {
+      onFileChange(e, {
+        onSuccess: (items) => {
+          const firstError = items.find((item) => item.error);
+          if (firstError) {
+            toast.error(
+              firstError.error.message || i18n.t("common:label.invalidFile", {
+                defaultValue: "File kh\xF4ng h\u1EE3p l\u1EC7"
+              })
+            );
+            e.target.value = "";
+            return;
+          }
+          onChange(e.target.files);
+        }
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "file",
+        multiple,
+        accept: acceptType,
+        ...props,
+        onChange: handleChange
+      }
+    );
+  }
+);
+FileInput.displayName = "FileInput";
+var file_input_default = FileInput;
+export {
+  file_input_default as default
+};

package/components/custom/inputs/mask-data/mask-data-input.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { cn } from "../../../../lib/utils.js";
+import { Input } from "../../../ui/input.js";
+import { reconcileMaskedEdit } from "./reconcile-masked-edit.js";
+const MaskDataInput = ({
+  isChange = true,
+  inputType,
+  value,
+  onChange,
+  placeholder,
+  // Giữ lại để tương thích call site cũ (không còn dùng vì che/hiện đã tức thì).
+  // Khai báo ở đây để không lọt xuống DOM qua ...rest.
+  // eslint-disable-next-line no-unused-vars
+  maskDelay,
+  className,
+  disabled = false,
+  onFocus = () => {
+  },
+  onBlur = () => {
+  },
+  ...rest
+}) => {
+  const notFound = "--";
+  const [typingValue, setTypingValue] = useState(null);
+  const masked = value ? maskData(value) : "";
+  const isPositional = !!value && masked.length === value.length;
+  const displayValue = typingValue !== null ? typingValue : masked;
+  const sanitize = (str) => {
+    let v = str;
+    if (inputType === "phone") v = v.replace(/[^0-9]/g, "");
+    if (inputType === "email") v = v.replace(/\s/g, "");
+    return v;
+  };
+  const emit = (e, realValue) => {
+    onChange({ ...e, target: { ...e.target, value: realValue } });
+  };
+  const handleFocus = (e) => {
+    if (!isPositional && value) setTypingValue(value);
+    onFocus(e);
+  };
+  const handleBlur = (e) => {
+    setTypingValue(null);
+    onBlur(e);
+  };
+  const handleChange = (e) => {
+    if (!isChange) return;
+    const maskedNew = e.target.value;
+    if (!isPositional) {
+      const v = sanitize(maskedNew);
+      setTypingValue(v);
+      emit(e, v);
+      return;
+    }
+    const maskedOld = typingValue !== null ? typingValue : masked;
+    const realNew = reconcileMaskedEdit(value || "", maskedOld, maskedNew);
+    const cleaned = sanitize(realNew);
+    if (cleaned !== realNew) return;
+    setTypingValue(maskedNew);
+    emit(e, cleaned);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value: displayValue,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      placeholder: placeholder || notFound,
+      disabled,
+      className: cn(className, "!placeholder:text-left"),
+      ...rest
+    }
+  );
+};
+var mask_data_input_default = MaskDataInput;
+export {
+  mask_data_input_default as default
+};

package/components/custom/inputs/mask-data/mask-data-select.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { cn } from "../../../../lib/utils.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../ui/select.js";
+import { CustomSelect } from "../../custom-select.js";
+const MaskDataSelect = ({
+  value,
+  onChange = () => {
+  },
+  options = [],
+  isSearch = false,
+  placeholder = "-Ch\u1ECDn-",
+  disabled = false,
+  className,
+  size,
+  ...rest
+}) => {
+  const normalizedOptions = (options ?? []).filter(
+    (option) => option !== null && option !== void 0 && option !== ""
+  ).map((option) => {
+    const isObject = typeof option === "object";
+    const realValue = isObject ? option.value : option;
+    const rawLabel = isObject ? option.label ?? option.value : option;
+    return {
+      value: realValue,
+      label: maskData(String(rawLabel ?? "")) || "",
+      disabled: isObject ? option.disabled : false,
+      group: isObject ? option.group : void 0
+    };
+  });
+  if (isSearch) {
+    return /* @__PURE__ */ jsx(
+      CustomSelect,
+      {
+        ...rest,
+        size,
+        isSearch: true,
+        disabled,
+        value,
+        onChange: (selectedValue) => onChange(selectedValue),
+        placeholder,
+        SelectTriggerOptions: { className: cn(className), disabled },
+        options: normalizedOptions
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      ...rest,
+      value: value ?? "",
+      onValueChange: onChange,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: cn(className), children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: normalizedOptions.map((option, index) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            children: option.label
+          },
+          `${option.value}-${index}`
+        )) })
+      ]
+    }
+  );
+};
+var mask_data_select_default = MaskDataSelect;
+export {
+  mask_data_select_default as default
+};

package/components/custom/inputs/mask-data/mask-data-textarea.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { cn } from "../../../../lib/utils.js";
+import { Textarea } from "../../../ui/textarea.js";
+import { reconcileMaskedEdit } from "./reconcile-masked-edit.js";
+const MaskDataTextarea = ({
+  isChange = true,
+  inputType,
+  value,
+  onChange,
+  placeholder,
+  className,
+  disabled = false,
+  onFocus = () => {
+  },
+  onBlur = () => {
+  },
+  ...rest
+}) => {
+  const [typingValue, setTypingValue] = useState(null);
+  const masked = value ? maskData(value) : "";
+  const isPositional = !!value && masked.length === value.length;
+  const displayValue = typingValue !== null ? typingValue : masked;
+  const sanitize = (str) => {
+    let v = str;
+    if (inputType === "phone") v = v.replace(/[^0-9]/g, "");
+    if (inputType === "email") v = v.replace(/\s/g, "");
+    return v;
+  };
+  const emit = (e, realValue) => {
+    onChange({ ...e, target: { ...e.target, value: realValue } });
+  };
+  const handleFocus = (e) => {
+    if (!isPositional && value) setTypingValue(value);
+    onFocus(e);
+  };
+  const handleBlur = (e) => {
+    setTypingValue(null);
+    onBlur(e);
+  };
+  const handleChange = (e) => {
+    if (!isChange) return;
+    const maskedNew = e.target.value;
+    if (!isPositional) {
+      const v = sanitize(maskedNew);
+      setTypingValue(v);
+      emit(e, v);
+      return;
+    }
+    const maskedOld = typingValue !== null ? typingValue : masked;
+    const realNew = reconcileMaskedEdit(value || "", maskedOld, maskedNew);
+    const cleaned = sanitize(realNew);
+    if (cleaned !== realNew) return;
+    setTypingValue(maskedNew);
+    emit(e, cleaned);
+  };
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      value: displayValue,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      className: cn(className),
+      ...rest
+    }
+  );
+};
+var mask_data_textarea_default = MaskDataTextarea;
+export {
+  mask_data_textarea_default as default
+};

package/components/custom/inputs/mask-data/reconcile-masked-edit.js

@@ -0,0 +1,20 @@
+function reconcileMaskedEdit(real, maskedOld, maskedNew) {
+  const r = real ?? "";
+  const a = maskedOld ?? "";
+  const b = maskedNew ?? "";
+  let prefix = 0;
+  const maxPrefix = Math.min(a.length, b.length);
+  while (prefix < maxPrefix && a[prefix] === b[prefix]) prefix++;
+  let suffix = 0;
+  const maxSuffix = Math.min(a.length - prefix, b.length - prefix);
+  while (suffix < maxSuffix && a[a.length - 1 - suffix] === b[b.length - 1 - suffix]) {
+    suffix++;
+  }
+  const head = r.slice(0, prefix);
+  const changed = b.slice(prefix, b.length - suffix);
+  const tail = suffix > 0 ? r.slice(r.length - suffix) : "";
+  return head + changed + tail;
+}
+export {
+  reconcileMaskedEdit
+};

package/components/custom/jxl-decode.js

@@ -0,0 +1,34 @@
+let worker = null;
+let idCounter = 0;
+const pending = /* @__PURE__ */ new Map();
+const getWorker = () => {
+  if (!worker) {
+    worker = new Worker(new URL("./jxl-worker.js", import.meta.url), {
+      type: "module"
+    });
+    worker.onmessage = ({ data: { id, buffer, type, error } }) => {
+      const resolve = pending.get(id);
+      if (!resolve) return;
+      pending.delete(id);
+      resolve({ buffer, type, error });
+    };
+  }
+  return worker;
+};
+const isJxlUrl = (url) => url?.split("?")[0].toLowerCase().endsWith(".jxl");
+const decodeJxl = (src) => new Promise((resolve) => {
+  const id = ++idCounter;
+  pending.set(id, resolve);
+  getWorker().postMessage({ id, src });
+});
+const decodeJxlToBlobUrl = async (src) => {
+  const { buffer, type, error } = await decodeJxl(src);
+  if (error) throw new Error(error);
+  const blob = new Blob([buffer], { type: type || "image/png" });
+  return URL.createObjectURL(blob);
+};
+export {
+  decodeJxl,
+  decodeJxlToBlobUrl,
+  isJxlUrl
+};

package/components/custom/jxl-image.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { decodeJxlToBlobUrl } from "./jxl-decode.js";
+function JxlImage({
+  src,
+  alt,
+  className,
+  style,
+  onClick,
+  fallback,
+  ...props
+}) {
+  const [pngSrc, setPngSrc] = useState(null);
+  const [error, setError] = useState(false);
+  const [imgLoadFailed, setImgLoadFailed] = useState(false);
+  useEffect(() => {
+    if (!src) return;
+    setImgLoadFailed(false);
+    setPngSrc(null);
+    setError(false);
+    let objectUrl = null;
+    let cancelled = false;
+    async function render() {
+      try {
+        objectUrl = await decodeJxlToBlobUrl(src);
+        if (cancelled) return;
+        setPngSrc(objectUrl);
+      } catch (err) {
+        console.log("jxl decode error", err);
+        if (!cancelled) setError(true);
+      }
+    }
+    render();
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [src]);
+  if (imgLoadFailed && fallback) {
+    return fallback;
+  }
+  if (!pngSrc && !error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("animate-pulse rounded bg-muted", className),
+        style,
+        onClick
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: error ? src : pngSrc,
+      alt,
+      className,
+      style,
+      onClick,
+      ...props,
+      onError: () => setImgLoadFailed(true)
+    }
+  );
+}
+export {
+  JxlImage
+};

package/components/custom/jxl-worker.js

@@ -0,0 +1,12 @@
+import { initWasm, decodeJxlFromUrl } from "jxl-rs-polyfill";
+const ready = initWasm("/jxl_wasm_bg.wasm");
+self.onmessage = async ({ data: { id, src } }) => {
+  try {
+    await ready;
+    const blob = await decodeJxlFromUrl(src);
+    const buffer = await blob.arrayBuffer();
+    self.postMessage({ id, buffer, type: blob.type }, [buffer]);
+  } catch (err) {
+    self.postMessage({ id, error: err.message });
+  }
+};

package/components/custom/label.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { Asterisk } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const labelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        default: "text-sm",
+        small: "text-xs",
+        large: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const Label = React.forwardRef(
+  ({ className, isRequired, children, size, ...props }, ref) => /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn(labelVariants({ size }), className),
+      ...props,
+      children: [
+        children,
+        isRequired && /* @__PURE__ */ jsx(
+          Asterisk,
+          {
+            className: "ml-0.5 inline-block -translate-y-1 text-[--label-red-foreground]",
+            size: 12
+          }
+        )
+      ]
+    }
+  )
+);
+const RequiredIcon = () => {
+  return /* @__PURE__ */ jsx(
+    Asterisk,
+    {
+      className: "ml-0.5 inline-block -translate-y-1 text-[--label-red-foreground]",
+      size: 12
+    }
+  );
+};
+Label.displayName = LabelPrimitive.Root.displayName;
+export {
+  Label,
+  RequiredIcon
+};

package/components/custom/layout.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Layout = (props) => /* @__PURE__ */ jsx("div", { className: "relative h-screen w-full overflow-hidden", ...props });
+Layout.displayName = "Layout";
+const Header = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: "sticky top-0 z-10 flex h-[var(--header-height)] w-full items-center justify-between space-x-4 bg-card px-4 shadow",
+    ...props
+  }
+));
+Header.displayName = "Header";
+const Body = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "h-[calc(100vh-var(--header-height))] overflow-y-auto px-[--body-padding-x] py-[--body-padding-y]",
+      className
+    ),
+    ...props
+  }
+);
+Body.displayName = "Body";
+Layout.Header = Header;
+Layout.Body = Body;
+export {
+  Layout
+};