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

package/components/custom/html-edtior.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { Editor } from "@tinymce/tinymce-react";
+import { uploadFileToCloudflare } from "../../utils/file.js";
+import { cn } from "../../lib/utils.js";
+import React, { useEffect } from "react";
+const HtmlEditor = React.forwardRef(
+  ({
+    value,
+    onValueChange,
+    initOptions = {},
+    className,
+    maxHeight,
+    toggleEditerOption = true,
+    minHeight = 200,
+    disabled = false
+  }, ref) => {
+    const handleImageUpload = async (blobInfo) => {
+      try {
+        const file = blobInfo.blob();
+        const fileType = file.type;
+        return await uploadFileToCloudflare(file, { content_type: fileType });
+      } catch (error) {
+        console.error("Image upload failed:", error);
+        throw error;
+      }
+    };
+    useEffect(() => {
+      if (ref?.current) {
+        const headerEl = ref.current.getContainer()?.querySelector(".tox-editor-header");
+        if (headerEl) {
+          if (toggleEditerOption) {
+            headerEl.style.display = "";
+          } else {
+            headerEl.style.display = "none";
+          }
+        }
+      }
+    }, [toggleEditerOption, ref]);
+    const toolbars = "undo redo | fontfamily fontsize | forecolor backcolor | bold italic |        alignleft aligncenter alignright alignjustify |        bullist numlist outdent indent | removeformat | link image media |        table | preview fullscreen | lineheight";
+    return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsx(
+      Editor,
+      {
+        onInit: (_, editor) => {
+          if (ref) {
+            ref.current = editor;
+          }
+          const headerEl = editor.getContainer()?.querySelector(".tox-editor-header");
+          if (headerEl) {
+            headerEl.style.display = toggleEditerOption ? "" : "none";
+          }
+        },
+        tinymceScriptSrc: `${window.location.origin}/tinymce/tinymce.min.js`,
+        licenseKey: "gpl",
+        value,
+        disabled,
+        onEditorChange: onValueChange,
+        init: {
+          line_height_formats: "0.5 0.8 1 1.2 1.5",
+          get placeholder() {
+            return i18n.t("common:placeholder.enterContent", {
+              defaultValue: "Nh\u1EADp n\u1ED9i dung"
+            });
+          },
+          content_style: 'body { font-size: 14px; } img {max-width: 100%; width: auto; height: auto;} .mce-content-body[data-mce-placeholder]:focus:not(.mce-visualblocks)::before { content: "" !important; }',
+          min_height: minHeight,
+          ...maxHeight ? { max_height: maxHeight } : {},
+          language: "vi",
+          menubar: false,
+          branding: false,
+          statusbar: false,
+          plugins: [
+            "advlist",
+            "autolink",
+            "autoresize",
+            "lists",
+            "link",
+            "image",
+            "preview",
+            "anchor",
+            "fullscreen",
+            "media",
+            "table"
+          ],
+          toolbar: toolbars,
+          font_size_formats: "10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 48px 60px 72px 96px",
+          images_upload_handler: handleImageUpload,
+          automatic_uploads: true,
+          file_picker_types: "image",
+          ...initOptions
+        }
+      },
+      minHeight
+    ) });
+  }
+);
+HtmlEditor.displayName = "HtmlEditor";
+export {
+  HtmlEditor
+};

package/components/custom/icon.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import Zalo__asset from "../../assets/icons/zalo_icon.png";
+import Email__asset from "../../assets/icons/email_icon.png";
+import Phone__asset from "../../assets/icons/phone_icon.png";
+import SMS__asset from "../../assets/icons/sms_icon.png";
+import ZNS__asset from "../../assets/icons/zns_icon.png";
+import NOTFOUND__asset from "../../assets/icons/not_found.png";
+import EMOJI_LIKE__asset from "../../assets/icons/emoji/like.svg";
+import EMOJI_HAHA__asset from "../../assets/icons/emoji/haha.svg";
+import EMOJI_SAD__asset from "../../assets/icons/emoji/sad.svg";
+import EMOJI_WOW__asset from "../../assets/icons/emoji/wow.svg";
+import EMOJI_LOVE__asset from "../../assets/icons/emoji/love.svg";
+import EMOJI_ANGRY__asset from "../../assets/icons/emoji/angry.svg";
+import EMOJI_LIKE_OUTLINE__asset from "../../assets/icons/emoji/like_out_line.png";
+import { assetUrl } from "../../assets/asset-url.js";
+const Zalo = assetUrl(Zalo__asset);
+const Email = assetUrl(Email__asset);
+const Phone = assetUrl(Phone__asset);
+const SMS = assetUrl(SMS__asset);
+const ZNS = assetUrl(ZNS__asset);
+const NOTFOUND = assetUrl(NOTFOUND__asset);
+const EMOJI_LIKE = assetUrl(EMOJI_LIKE__asset);
+const EMOJI_HAHA = assetUrl(EMOJI_HAHA__asset);
+const EMOJI_SAD = assetUrl(EMOJI_SAD__asset);
+const EMOJI_WOW = assetUrl(EMOJI_WOW__asset);
+const EMOJI_LOVE = assetUrl(EMOJI_LOVE__asset);
+const EMOJI_ANGRY = assetUrl(EMOJI_ANGRY__asset);
+const EMOJI_LIKE_OUTLINE = assetUrl(EMOJI_LIKE_OUTLINE__asset);
+const names = {
+  zalo: Zalo,
+  email: Email,
+  phone: Phone,
+  sms: SMS,
+  zns: ZNS,
+  notFound: NOTFOUND,
+  emoji_like: EMOJI_LIKE,
+  emoji_haha: EMOJI_HAHA,
+  emoji_sad: EMOJI_SAD,
+  emoji_wow: EMOJI_WOW,
+  emoji_love: EMOJI_LOVE,
+  emoji_angry: EMOJI_ANGRY,
+  emoji_like_outline: EMOJI_LIKE_OUTLINE
+};
+const Icon = ({ name, className }) => /* @__PURE__ */ jsx("img", { src: names[name], className });
+Icon.displayName = "Icon";
+var icon_default = Icon;
+export {
+  icon_default as default
+};

package/components/custom/infinite-scroll-combobox.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CaretSortIcon,
+  CheckIcon,
+  MagnifyingGlassIcon
+} from "@radix-ui/react-icons";
+import { LoaderCircle } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList
+} from "../ui/command.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover.js";
+import { Button } from "./button.js";
+import useDebounce from "../../hooks/use-debounce.js";
+import { cva } from "class-variance-authority";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+const InfiniteScrollComboboxVariants = cva("", {
+  variants: {
+    size: {
+      default: "!text-sm",
+      small: "!text-xs",
+      large: "!text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function InfiniteScrollCombobox({
+  className,
+  value,
+  onChange,
+  onSearch,
+  placeholder = "",
+  disabled = false,
+  buildOption = (option) => option,
+  searchDelay = 500,
+  queryKey,
+  size,
+  isOutlineError = false,
+  defaultOptions = [],
+  multiple = false,
+  // Khi bật, áp maskData lên label HIỂN THỊ (trigger + item) để che dữ liệu nhạy
+  // cảm (vd sđt nằm trong tên KH). Giá trị thật của option giữ nguyên.
+  maskLabel = false
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const displayLabel = (label) => maskLabel ? maskData(String(label ?? "")) || "" : label;
+  const [searchText, setSearchText] = useState("");
+  const debounceSearchText = useDebounce(searchText, searchDelay);
+  const observerRef = useRef(null);
+  const queryClient = useQueryClient();
+  const {
+    data: queryData,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useInfiniteQuery({
+    queryKey: [queryKey, { keyword: debounceSearchText }],
+    queryFn: async ({ pageParam = 1 }) => {
+      const limit = 10;
+      const offset = (pageParam - 1) * limit;
+      const data = await onSearch(debounceSearchText, { limit, offset });
+      return {
+        data,
+        page: pageParam,
+        hasMore: data.length === limit
+      };
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.hasMore ? lastPage.page + 1 : void 0;
+    },
+    enabled: open
+    // Only fetch when dropdown is open
+  });
+  const searchResults = queryData?.pages.flatMap((page) => page.data.map(buildOption)) ?? [];
+  const allOptions = [...defaultOptions, ...searchResults];
+  const lastItemRef = (node) => {
+    if (isFetchingNextPage) return;
+    if (observerRef.current) observerRef.current.disconnect();
+    observerRef.current = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && hasNextPage) {
+        fetchNextPage();
+      }
+    });
+    if (node) observerRef.current.observe(node);
+  };
+  useEffect(() => {
+    const isEmpty = multiple ? !value || !Array.isArray(value) || value.length === 0 : !value;
+    if (isEmpty) {
+      setSearchText("");
+    }
+  }, [value, multiple]);
+  useEffect(() => {
+    const trimToFirstPage = () => {
+      queryClient.setQueryData(
+        [queryKey, { keyword: debounceSearchText }],
+        (oldData) => {
+          if (!oldData?.pages?.length) return void 0;
+          return {
+            pageParams: [1],
+            pages: [oldData.pages[0]]
+          };
+        }
+      );
+    };
+    if (!open) {
+      trimToFirstPage();
+    }
+    return () => {
+      trimToFirstPage();
+    };
+  }, [open, queryClient, queryKey, debounceSearchText]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "flex w-full justify-between font-normal",
+          (multiple ? !Array.isArray(value) || value.length === 0 : !value) && "text-muted-foreground",
+          disabled && "cursor-not-allowed bg-muted",
+          className,
+          InfiniteScrollComboboxVariants({ size }),
+          isOutlineError && "border border-[--label-red-foreground] focus-visible:border-[--label-red-foreground] focus-visible:ring-0"
+        ),
+        onClick: (e) => {
+          if (!disabled) return;
+          e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-w-[calc(100%-1.5rem)] truncate",
+              title: multiple ? Array.isArray(value) ? value.map((v) => displayLabel(v.label)).join(", ") : "" : displayLabel(value?.label),
+              children: multiple ? Array.isArray(value) && value.length > 0 ? value.map((v) => displayLabel(v.label)).join(", ") : placeholder : value && value.label ? displayLabel(value.label) : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(CaretSortIcon, { className: "ml-2 h-4 w-4 shrink-0" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "max-h-[--radix-popover-content-available-height] w-[--radix-popover-trigger-width] overflow-auto p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", children: [
+        isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: cn(
+              "flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              InfiniteScrollComboboxVariants({ size })
+            ),
+            placeholder: t("common:placeholder.typeToSearch", {
+              defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm ki\u1EBFm"
+            }),
+            value: searchText,
+            onChange: (e) => {
+              setSearchText(e.target.value);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        !isLoading && allOptions.length === 0 && /* @__PURE__ */ jsx(
+          CommandEmpty,
+          {
+            className: cn(
+              "mt-2 text-center text-muted-foreground",
+              InfiniteScrollComboboxVariants({ size })
+            ),
+            children: t("common:empty.noData", { defaultValue: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandGroup, { children: [
+          allOptions.map((option, index) => {
+            const isLastItem = index === allOptions.length - 1;
+            return /* @__PURE__ */ jsxs(
+              CommandItem,
+              {
+                className: cn(
+                  "cursor-pointer",
+                  InfiniteScrollComboboxVariants({ size })
+                ),
+                value: option.value,
+                onSelect: () => {
+                  if (multiple) {
+                    const current = Array.isArray(value) ? value : [];
+                    const alreadySelected = current.some(
+                      (v) => v.value === option.value
+                    );
+                    onChange(
+                      alreadySelected ? current.filter((v) => v.value !== option.value) : [...current, option]
+                    );
+                  } else {
+                    onChange(option.value === value?.value ? null : option);
+                    setOpen(false);
+                  }
+                },
+                ref: isLastItem ? lastItemRef : null,
+                title: displayLabel(option.label),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel(option.label) }),
+                  /* @__PURE__ */ jsx(
+                    CheckIcon,
+                    {
+                      className: cn(
+                        "ml-auto h-4 w-4 shrink-0",
+                        (multiple ? Array.isArray(value) && value.some((v) => v.value === option.value) : value?.value === option.value) ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  )
+                ]
+              },
+              option.value
+            );
+          }),
+          isFetchingNextPage && /* @__PURE__ */ jsxs(CommandItem, { disabled: true, children: [
+            /* @__PURE__ */ jsx(
+              LoaderCircle,
+              {
+                className: cn(
+                  "mr-2 h-4 w-4 animate-spin",
+                  InfiniteScrollComboboxVariants({ size })
+                )
+              }
+            ),
+            t("common:status.loadingMore", {
+              defaultValue: "\u0110ang t\u1EA3i th\xEAm..."
+            })
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  InfiniteScrollCombobox as default
+};

package/components/custom/inline-edit-popover.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover.js";
+import { Button } from "./button.js";
+import { cn } from "../../lib/utils.js";
+const PORTAL_SELECTOR = "[data-radix-popper-content-wrapper], [cmdk-list], [data-inline-portal]";
+function InlineEditPopover({
+  open,
+  trigger,
+  children,
+  onSave,
+  onCancel,
+  isSaving = false,
+  align = "start",
+  className
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onCancel();
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            align,
+            className: cn("flex w-auto flex-col gap-2 p-2", className),
+            onClick: (event) => event.stopPropagation(),
+            onInteractOutside: (event) => {
+              const target = event.target;
+              if (target instanceof Element && target.closest(PORTAL_SELECTOR)) {
+                event.preventDefault();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "min-w-[220px]", children }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
+                isSaving && /* @__PURE__ */ jsx(
+                  LoaderCircle,
+                  {
+                    "aria-label": t("common:status.saving"),
+                    className: "h-3.5 w-3.5 shrink-0 animate-spin"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    "aria-label": t("common:action.cancelEdit"),
+                    className: "h-6 w-6 shrink-0",
+                    disabled: isSaving,
+                    onClick: onCancel,
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: "ghost",
+                    "aria-label": t("common:action.saveChanges"),
+                    className: "h-6 w-6 shrink-0",
+                    disabled: isSaving,
+                    onClick: onSave,
+                    children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  InlineEditPopover
+};

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

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useState } from "react";
+import { X } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { Badge } from "../../ui/badge.js";
+import { cn } from "../../../lib/utils.js";
+import { cva } from "class-variance-authority";
+const ChipInput = ({
+  type = "text",
+  closeSize,
+  className,
+  value = [],
+  onValueChange,
+  disabled,
+  inputProps,
+  placeholder,
+  size
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const fieldVariants = cva("", {
+    variants: {
+      size: {
+        small: "text-xs flex",
+        default: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "min-h-9 items-center rounded-md border border-input bg-card text-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring",
+        {
+          "px-1 py-[0.35rem]": value.length !== 0,
+          "cursor-text": !disabled && value.length !== 0
+        },
+        fieldVariants({ size }),
+        className,
+        disabled && "bg-muted"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-wrap gap-1 pr-[20px]", children: [
+        (Array.isArray(value) ? value : []).map((chip) => {
+          return /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: "chip",
+              className: cn(
+                "word-break break-all data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground",
+                fieldVariants({ size })
+              ),
+              "data-disabled": disabled || void 0,
+              children: [
+                chip.text,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: cn(
+                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-1 focus:ring-ring",
+                      disabled && "hidden"
+                    ),
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    onClick: () => {
+                      onValueChange(value.filter((v) => v.key !== chip.key));
+                    },
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+                  }
+                )
+              ]
+            },
+            chip.key
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type,
+            disabled,
+            className: cn(
+              "w-full flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+              {
+                "px-3 py-[0.35rem]": value.length === 0,
+                "ml-1": value.length !== 0,
+                "pr-6": !disabled && value.length !== 0
+              },
+              inputProps?.className
+            ),
+            placeholder: value.length == 0 ? placeholder || i18n.t("common:placeholder.enterTags", {
+              defaultValue: "Nh\u1EADp tags"
+            }) : null,
+            value: inputValue,
+            onChange: (e) => setInputValue(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Backspace") {
+                if (inputValue === "" && value.length > 0) {
+                  onValueChange(value.slice(0, value.length - 1));
+                }
+              } else if (e.key === "Enter" && inputValue.trim() !== "") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!value.find((item) => item.text === inputValue)) {
+                  onValueChange([...value, { key: uuidv4(), text: inputValue }]);
+                }
+                setInputValue("");
+              }
+            },
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onValueChange([]);
+            },
+            className: cn(
+              "absolute right-0 h-5 w-5 p-0",
+              (disabled || value.length < 1) && "hidden"
+            ),
+            children: /* @__PURE__ */ jsx(X, { size: closeSize || 20 })
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  ChipInput
+};