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

package/components/zalo-login-qr.js

@@ -0,0 +1,237 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { QrCode } from "lucide-react";
+import { Button } from "./custom/button.js";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "./ui/dialog.js";
+import ZaloLoginStatusModal from "./zalo-login-status-modal.js";
+import { getZaloLoginQr, getZaloLoginStatus } from "@zenify-omni/chat-js/api/settings/channel.js";
+import { checkAccessByPZaloConnection } from "@zenify-omni/chat-js/api/chat.js";
+import { toast } from "sonner";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { checkIsViewAsMode, getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import useChatStore from "../store/chat-store.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function ZaloLoginQr({
+  trigger,
+  type,
+  id,
+  onLoginStatus = () => {
+  },
+  onLoginSuccessAcknowledged = () => {
+  }
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const [open, setOpen] = useState(false);
+  const [openLoginStatusModal, setOpenLoginStatusModal] = useState(false);
+  const [base64QR, setBase64QR] = useState(null);
+  const [sessionId, setSessionId] = useState(null);
+  const queryClient = useQueryClient();
+  const abortControlRef = useRef(new AbortController());
+  const setIsZaloConnected = useChatStore((s) => s.setIsZaloConnected);
+  const syncZaloPersonalInfo = useCallback(
+    (loginStatusInfo) => {
+      if (checkIsViewAsMode()) return;
+      if (user) {
+        const updateUserInfo = {
+          ...user,
+          zalo_id: loginStatusInfo.zalo_id,
+          zalo_phone: loginStatusInfo.zalo_phone,
+          zalo_page_name: loginStatusInfo.zalo_page_name
+        };
+        localStorage.setItem("zenify-sdk-user", JSON.stringify(updateUserInfo));
+      }
+    },
+    [user]
+  );
+  const { isLoading: isLoadingGetLoginQR, refetch: refetchGetLoginQR } = useQuery({
+    enabled: false,
+    queryKey: ["getZaloLoginQr"],
+    queryFn: async () => {
+      try {
+        const { data } = await getZaloLoginQr(id, type);
+        setBase64QR(data?.image);
+        setSessionId(data?.id);
+        return data;
+      } catch {
+        toast.error(
+          i18n.t("common:toast.zaloQrFetchError", {
+            defaultValue: "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra khi l\u1EA5y m\xE3 QR \u0111\u0103ng nh\u1EADp Zalo, vui l\xF2ng th\u1EED l\u1EA1i!"
+          })
+        );
+      }
+    }
+  });
+  useEffect(() => {
+    if (sessionId) {
+      queryClient.fetchQuery({
+        queryKey: ["getZaloLoginStatus"],
+        queryFn: async () => {
+          try {
+            const { data } = await getZaloLoginStatus(sessionId, type, {
+              signal: abortControlRef.current.signal
+              // AbortController supported in Axios v1+
+            });
+            if (!data.login_status) {
+              toast.error(
+                i18n.t("common:toast.zaloLoginFailed", {
+                  defaultValue: "\u0110\u0103ng nh\u1EADp Zalo th\u1EA5t b\u1EA1i, vui l\xF2ng th\u1EED l\u1EA1i!"
+                })
+              );
+            } else {
+              setOpenLoginStatusModal({
+                open: true,
+                status: data.login_status,
+                content: data.message || null,
+                data
+              });
+              syncZaloPersonalInfo(data);
+              let isZaloConnected = true;
+              const isOnChatRoute = window.location.pathname.startsWith("/chat");
+              const chatRoomId = useChatStore.getState().currentChatId;
+              if (isOnChatRoute && chatRoomId) {
+                try {
+                  const response = await checkAccessByPZaloConnection({
+                    ticketId: chatRoomId,
+                    userId: user?._id
+                  });
+                  isZaloConnected = !!response?.data?.success;
+                } catch {
+                }
+              }
+              setIsZaloConnected(isZaloConnected);
+              queryClient.invalidateQueries({
+                queryKey: [QUERY_KEY.GET_ZALOS_ALLOCATED]
+              });
+              onLoginStatus(data);
+            }
+            return data;
+          } catch (error) {
+            toast.error(
+              i18n.t("common:toast.zaloLoginError", {
+                defaultValue: "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra trong qu\xE1 tr\xECnh \u0111\u0103ng nh\u1EADp Zalo, vui l\xF2ng th\u1EED l\u1EA1i!"
+              })
+            );
+          } finally {
+            setBase64QR(null);
+            setSessionId(null);
+            setOpen(false);
+          }
+        }
+      });
+    }
+    return () => {
+      queryClient.cancelQueries({ queryKey: ["getZaloLoginStatus"] });
+    };
+  }, [queryClient, sessionId, type]);
+  useEffect(() => {
+    if (open) {
+      abortControlRef.current = new AbortController();
+    } else {
+      abortControlRef.current.abort();
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger ? React.cloneElement(trigger, {
+        onClick: () => setOpen(true)
+      }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "relative m-0 scale-95 transform rounded-[10px] px-2 shadow-inner active:scale-90",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsx(QrCode, { size: 18, className: "text-primary" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[640px]", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: t("common:action.addZaloAccount", {
+            defaultValue: "Th\xEAm t\xE0i kho\u1EA3n Zalo"
+          }) }),
+          /* @__PURE__ */ jsx(
+            DialogDescription,
+            {
+              className: "hidden",
+              "aria-describedby": "zalo-login-dialog"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            !base64QR && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                leftSection: /* @__PURE__ */ jsx(QrCode, { className: "h-4 w-4 cursor-pointer" }),
+                onClick: () => {
+                  refetchGetLoginQR();
+                },
+                disabled: isLoadingGetLoginQR,
+                children: isLoadingGetLoginQR ? t("common:status.loading", {
+                  defaultValue: "\u0110ang t\u1EA3i..."
+                }) : t("common:action.getZaloLoginQr", {
+                  defaultValue: "L\u1EA5y m\xE3 QR \u0111\u0103ng nh\u1EADp Zalo"
+                })
+              }
+            ) }),
+            base64QR && /* @__PURE__ */ jsx("div", { className: "relative h-[200px] w-[200px]", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "h-full w-full",
+                src: `data:image/png;base64,${base64QR}`
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-lg font-medium", children: t("common:message.scanQrConnectZalo", {
+              defaultValue: "Qu\xE9t QR \u0111\u1EC3 k\u1EBFt n\u1ED1i Zalo v\u1EDBi Zenify"
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-light", children: t("common:message.zaloLoginStep1", {
+                defaultValue: "1. M\u1EDF \u1EE9ng d\u1EE5ng Zalo tr\xEAn di \u0111\u1ED9ng"
+              }) }),
+              /* @__PURE__ */ jsx("p", { className: "font-light", children: t("common:message.zaloLoginStep2", {
+                defaultValue: "2. \u1EDE m\u1EE5c C\xE0i \u0111\u1EB7t, nh\u1EA5n n\xFAt qu\xE9t QR"
+              }) }),
+              /* @__PURE__ */ jsx("p", { className: "font-light", children: t("common:message.zaloLoginStep3", {
+                defaultValue: "3. Qu\xE9t m\xE3 QR \u0111\u1EC3 \u0111\u0103ng nh\u1EADp"
+              }) })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ZaloLoginStatusModal,
+      {
+        open: openLoginStatusModal?.open || false,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) {
+            queryClient.invalidateQueries({
+              queryKey: [QUERY_KEY.GET_LIST_ZALO_GENERAL_ACCOUNT]
+            });
+            if (openLoginStatusModal?.status) {
+              onLoginSuccessAcknowledged(openLoginStatusModal.data);
+            }
+          }
+          setOpenLoginStatusModal(isOpen ? openLoginStatusModal : false);
+        },
+        status: openLoginStatusModal?.open ? openLoginStatusModal?.status : void 0,
+        content: openLoginStatusModal?.open ? openLoginStatusModal?.content : void 0
+      }
+    )
+  ] });
+}
+export {
+  ZaloLoginQr as default
+};

package/components/zalo-login-status-modal.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle, AlertCircle } from "lucide-react";
+import { Dialog, DialogContent } from "./ui/dialog.js";
+function ZaloLoginSuccessModal({
+  open = true,
+  onOpenChange,
+  status = true,
+  content = null
+}) {
+  const getIcon = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(CheckCircle, { className: "h-8 w-8 text-success" });
+    }
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-warning" });
+  };
+  const getIconBgColor = () => {
+    if (status) return "bg-[--label-green]";
+    return "bg-[--label-red]";
+  };
+  const getTitle = () => {
+    if (status) return "Li\xEAn k\u1EBFt th\xE0nh c\xF4ng!";
+    return "Li\xEAn k\u1EBFt th\u1EA5t b\u1EA1i!";
+  };
+  const getDescription = () => {
+    if (content) return content;
+    if (status) return "Zalo c\xE1 nh\xE2n c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c k\u1EBFt n\u1ED1i v\u1EC1 h\u1EC7 th\u1ED1ng.";
+    return "Zalo c\xE1 nh\xE2n c\u1EE7a b\u1EA1n ch\u01B0a \u0111\u01B0\u1EE3c k\u1EBFt n\u1ED1i v\u1EC1 h\u1EC7 th\u1ED1ng.";
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-md", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 py-6", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex h-16 w-16 items-center justify-center rounded-full ${getIconBgColor()}`,
+        children: getIcon()
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: getTitle() }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-muted-foreground", children: getDescription() })
+    ] })
+  ] }) }) });
+}
+export {
+  ZaloLoginSuccessModal as default
+};

package/config/env.js

@@ -0,0 +1,27 @@
+import { registerEnvDefaults } from "@zenify-omni/chat-js/config/env.js";
+registerEnvDefaults({
+  // --- URL ---
+  // socket chat (chat_socket + typing_socket). Không có mặc định.
+  CHAT_URL: "https://chat.zenify.vn/chatroom",
+  // --- Facebook SDK ---
+  // --- Cờ theo tenant ---
+  // Nhận cả chuỗi phân tách bằng dấu phẩy lẫn mảng.
+  //
+  // CHÚ Ý ngữ nghĩa khi để rỗng KHÔNG giống nhau giữa các khoá — giữ nguyên
+  // như mã cũ: hai khoá đầu rỗng = BẬT cho mọi tenant, các khoá còn lại rỗng =
+  // TẮT với mọi tenant.
+  TENANT_ENABLE_FB_HUMAN_TAG: ["646ae9cffe32b43426f45165", "699e5aee1c8e694cd7744529", "68a2cf5739f7509d7ee6b3f2", "688048ee365f35cb45c397da"],
+  // rỗng = bật cho mọi tenant
+  TENANT_ENABLE_DEAL_NAME_SUGGEST: ["693fafe2beef395b73cc22ac", "646ae9cffe32b43426f45165"],
+  // rỗng = tắt
+  // --- Khác ---
+  SPECIAL_TENANT_ID: "694816f69eba11635c959f07",
+  SORT_FIELD_KEY: "ad_str_1"
+});
+import { env, envList, envSet, configureChatEnv } from "@zenify-omni/chat-js/config/env.js";
+export {
+  configureChatEnv,
+  env,
+  envList,
+  envSet
+};

package/config/hmr.js

@@ -0,0 +1,8 @@
+const disposers = /* @__PURE__ */ new Set();
+function onModuleDispose(fn) {
+  disposers.add(fn);
+  return () => disposers.delete(fn);
+}
+export {
+  onModuleDispose
+};

package/config/navigation.js

@@ -0,0 +1,54 @@
+import useChatStore from "../store/chat-store.js";
+let navigateFunc = null;
+function setNavigateFunc(fn) {
+  navigateFunc = typeof fn === "function" ? fn : null;
+}
+function resetChatNavigation() {
+  navigateFunc = null;
+  mounted = 0;
+  warnedMissingFunc = false;
+}
+function matchChatRoomTarget(target) {
+  const to = typeof target === "string" ? target : target?.to;
+  if (typeof to !== "string") return void 0;
+  if (to === "/chat/$chatRoomId") return target?.params?.chatRoomId ?? null;
+  if (to === "/chat" || to === "/chat/") return null;
+  const m = to.match(/^\/chat\/([^/?#]+)/);
+  return m ? m[1] : void 0;
+}
+function navigate(target) {
+  const roomId = matchChatRoomTarget(target);
+  if (roomId !== void 0) {
+    useChatStore.getState().setCurrentChatId(roomId);
+  } else if (!navigateFunc) {
+    warnMissingFunc(target);
+  }
+  navigateFunc?.(target);
+}
+let warnedMissingFunc = false;
+const warnMissingFunc = (target) => {
+  if (warnedMissingFunc) return;
+  warnedMissingFunc = true;
+  console.warn(
+    "[chat-ui] SDK mu\u1ED1n \u0111i\u1EC1u h\u01B0\u1EDBng ra ngo\xE0i m\xE0n chat nh\u01B0ng app nh\xFAng ch\u01B0a truy\u1EC1n <ChatProvider navigateFunc={...}>. L\u1EDDi g\u1ECDi b\u1ECB b\u1ECF qua. Target: " + JSON.stringify(target)
+  );
+};
+let mounted = 0;
+function markChatSurface() {
+  mounted += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    mounted = Math.max(0, mounted - 1);
+  };
+}
+const isChatVisible = () => mounted > 0;
+export {
+  isChatVisible,
+  markChatSurface,
+  matchChatRoomTarget,
+  navigate,
+  resetChatNavigation,
+  setNavigateFunc
+};

package/config/runtime.js

@@ -0,0 +1,46 @@
+let runtime = { queryClient: null };
+function setChatRuntime(next) {
+  for (const key of ["queryClient"]) {
+    if (!(key in next)) continue;
+    const prev = runtime[key];
+    if (prev && prev !== next[key]) {
+      console.warn(
+        `[chat-ui] setChatRuntime: thay ${key} b\u1EB1ng m\u1ED9t instance kh\xE1c. Th\u01B0\u1EDDng l\xE0 app \u0111\xE3 d\u1EF1ng ${key} hai l\u1EA7n \u2014 ki\u1EC3m tra l\u1EA1i ch\u1ED7 kh\u1EDFi t\u1EA1o.`
+      );
+    }
+  }
+  runtime = { ...runtime, ...next };
+}
+function resetChatRuntime() {
+  runtime = { queryClient: null };
+}
+const required = (key) => {
+  const value = runtime[key];
+  if (!value) {
+    throw new Error(
+      `[chat-ui] ch\u01B0a c\xF3 "${key}". G\u1ECDi setChatRuntime({ ${key} }) l\xFAc app kh\u1EDFi \u0111\u1ED9ng, ho\u1EB7c truy\u1EC1n qua <ChatProvider ${key}={...}>.`
+    );
+  }
+  return value;
+};
+const getQueryClient = () => required("queryClient");
+const hasChatRuntime = () => !!runtime.queryClient;
+const liveBinding = (key) => new Proxy(
+  {},
+  {
+    get(_target, prop) {
+      const real = required(key);
+      const value = real[prop];
+      return typeof value === "function" ? value.bind(real) : value;
+    },
+    has: (_target, prop) => prop in required(key)
+  }
+);
+const queryClient = liveBinding("queryClient");
+export {
+  getQueryClient,
+  hasChatRuntime,
+  queryClient,
+  resetChatRuntime,
+  setChatRuntime
+};

package/config/theme.js

@@ -0,0 +1,274 @@
+const VAR_FORMAT = Object.freeze({
+  // hex trần — dùng qua `bg-[--label-red]`, KHÔNG bọc hsl()
+  "label-blue": "hex",
+  "label-blue-foreground": "hex",
+  "label-green": "hex",
+  "label-green-prime": "hex",
+  "label-green-foreground": "hex",
+  "label-red": "hex",
+  "label-red-foreground": "hex",
+  "label-orange": "hex",
+  "label-orange-foreground": "hex",
+  "label-gray": "hex",
+  "label-dark-blue": "hex",
+  // CSV + alpha — dùng qua `hsl(var(--icon-danger))` kiểu cũ
+  "icon-primary": "csv",
+  "icon-success": "csv",
+  "icon-danger": "csv",
+  "icon-eye-viewer": "csv",
+  "border-secondary": "csv",
+  "border-eye-viewer": "csv",
+  // giá trị không phải màu — đi thẳng
+  radius: "raw",
+  "header-height": "raw",
+  "modal-max-height": "raw",
+  "body-padding-x": "raw",
+  "body-padding-y": "raw",
+  // độ mờ của bóng: số trần (0–1), KHÔNG phải màu. '--shadow-color' thì là
+  // bộ ba HSL bình thường nên để mặc định 'triplet'.
+  "shadow-strength": "raw",
+  "shadow-rim": "raw"
+});
+const CHAT_THEME_VARS = Object.freeze([
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "success",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "shadow-color",
+  "shadow-strength",
+  "shadow-rim",
+  "radius",
+  "header-height",
+  "modal-max-height",
+  "body-padding-x",
+  "body-padding-y",
+  "campaign-create-bg",
+  "sidebar-background",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  "icon-primary",
+  "icon-success",
+  "icon-danger",
+  "icon-eye-viewer",
+  "border-secondary",
+  "border-eye-viewer",
+  "label-blue",
+  "label-blue-foreground",
+  "label-green",
+  "label-green-prime",
+  "label-green-foreground",
+  "label-red",
+  "label-red-foreground",
+  "label-orange",
+  "label-orange-foreground",
+  "label-gray",
+  "label-dark-blue",
+  // Token thêm khi chuyển màu hex cứng sang Tailwind
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "foreground-secondary",
+  "border-subtle",
+  "surface-subtle",
+  "chat-own-bubble",
+  "chat-own-bubble-foreground",
+  "chat-thread-bg",
+  ...Array.from({ length: 11 }, (_, i) => `chart-${i + 1}`)
+]);
+const VAR_SET = new Set(CHAT_THEME_VARS);
+const formatOf = (name) => VAR_FORMAT[name] || "triplet";
+const toKebab = (key) => String(key).replace(/^--/, "").replace(/_/g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-f]{3,8})$/i.exec(String(hex).trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
+  if (h.length !== 6 && h.length !== 8) return null;
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function rgbToHslTriplet([r, g, b]) {
+  const [R, G, B] = [r / 255, g / 255, b / 255];
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === R) h = ((G - B) / d + (G < B ? 6 : 0)) * 60;
+    else if (max === G) h = ((B - R) / d + 2) * 60;
+    else h = ((R - G) / d + 4) * 60;
+  }
+  const round = (n) => Number(n.toFixed(1));
+  return `${round(h)} ${round(s * 100)}% ${round(l * 100)}%`;
+}
+function toHslTriplet(value) {
+  const v = String(value).trim();
+  if (/^-?[\d.]+\s+[\d.]+%\s+[\d.]+%$/.test(v)) return v;
+  const hsl = /^hsla?\(\s*([-\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%/i.exec(v);
+  if (hsl) return `${hsl[1]} ${hsl[2]}% ${hsl[3]}%`;
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(v);
+  if (rgb) return rgbToHslTriplet(rgb.slice(1, 4).map((n) => clamp(+n, 0, 255)));
+  const fromHex = hexToRgb(v);
+  if (fromHex) return rgbToHslTriplet(fromHex);
+  return v;
+}
+const rgbToHex = ([r, g, b]) => "#" + [r, g, b].map((n) => Math.round(n).toString(16).padStart(2, "0")).join("");
+function anyToRgb(value) {
+  const v = String(value).trim();
+  const fromHex = hexToRgb(v);
+  if (fromHex) return fromHex;
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(v);
+  if (rgb) return rgb.slice(1, 4).map((n) => clamp(+n, 0, 255));
+  const t = toHslTriplet(v);
+  const m = /^(-?[\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/.exec(t);
+  if (!m) return null;
+  const [h, S, L] = [+m[1], +m[2] / 100, +m[3] / 100];
+  const c = (1 - Math.abs(2 * L - 1)) * S;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const mm = L - c / 2;
+  const seg = [[c, x, 0], [x, c, 0], [0, c, x], [0, x, c], [x, 0, c], [c, 0, x]][Math.floor((h % 360 + 360) % 360 / 60)];
+  return seg.map((n) => (n + mm) * 255);
+}
+function toVarValue(value, format = "triplet") {
+  if (format === "raw") return String(value).trim();
+  const triplet = toHslTriplet(value);
+  const m = /^(-?[\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/.exec(triplet);
+  if (!m) return triplet;
+  if (format === "triplet") return triplet;
+  if (format === "csv") return `${m[1]}, ${m[2]}%, ${m[3]}%, 1`;
+  if (format === "hex") {
+    const rgb = anyToRgb(value);
+    return rgb ? rgbToHex(rgb) : triplet;
+  }
+  return triplet;
+}
+const CHAT_SURFACE = {
+  // Bong bóng tin của chính mình (agent gửi).
+  ownBubble: [".bg-\\[\\#e5f1ff\\]", "background-color"],
+  ownBubbleBorder: [".border-\\[\\#e5f1ff\\]", "border-color"],
+  // Nền vùng cuộn tin nhắn.
+  threadBackground: [".bg-\\[\\#f9f9f9\\]", "background-color"]
+};
+const escapeCssValue = (v) => String(v).replace(/[<>{}\;]/g, "");
+function buildChatTheme(theme = {}) {
+  const vars = {};
+  const unknown = [];
+  const rules = [];
+  for (const [rawKey, rawValue] of Object.entries(theme)) {
+    if (rawValue == null || rawValue === "") continue;
+    if (rawKey === "chat") {
+      for (const [k, v] of Object.entries(rawValue || {})) {
+        const hit = CHAT_SURFACE[k];
+        if (!hit) {
+          unknown.push(`chat.${k}`);
+          continue;
+        }
+        const [selector, prop] = hit;
+        rules.push(`${selector}{${prop}:${escapeCssValue(v)} !important}`);
+        if (k === "ownBubble") {
+          const fg = theme.chat?.ownBubbleForeground;
+          if (fg) rules.push(`${selector},${selector} *{color:${escapeCssValue(fg)} !important}`);
+        }
+      }
+      continue;
+    }
+    const name = toKebab(rawKey);
+    if (!VAR_SET.has(name)) {
+      unknown.push(rawKey);
+      continue;
+    }
+    vars[`--${name}`] = escapeCssValue(toVarValue(rawValue, formatOf(name)));
+  }
+  const known = /* @__PURE__ */ new Set(["ownBubbleForeground", ...Object.keys(CHAT_SURFACE)]);
+  return {
+    vars,
+    css: rules.join("\n"),
+    unknown: unknown.filter((u) => !known.has(u.replace(/^chat\./, "")))
+  };
+}
+function applyColorScheme(scheme = "light") {
+  if (typeof document === "undefined") return () => {
+  };
+  const root = document.documentElement;
+  const had = root.classList.contains("dark");
+  const prevScheme = root.style.colorScheme;
+  const isDark = scheme === "dark";
+  root.classList.toggle("dark", isDark);
+  root.style.colorScheme = isDark ? "dark" : "light";
+  return () => {
+    root.classList.toggle("dark", had);
+    root.style.colorScheme = prevScheme;
+  };
+}
+function resolveTheme(theme, isDark) {
+  if (!theme) return null;
+  const hasModes = "light" in theme || "dark" in theme;
+  if (!hasModes) return theme;
+  return { ...theme.light || {}, ...isDark ? theme.dark || {} : {} };
+}
+const STYLE_ID = "zenify-chat-theme";
+let warned = false;
+function applyChatTheme(theme) {
+  if (typeof document === "undefined") return () => {
+  };
+  const { vars, css, unknown } = buildChatTheme(theme);
+  if (unknown.length && !warned) {
+    warned = true;
+    console.warn(
+      `[chat-ui] theme: kh\xF4ng nh\u1EADn ra ${unknown.map((u) => `"${u}"`).join(", ")}. T\xEAn h\u1EE3p l\u1EC7: ${CHAT_THEME_VARS.slice(0, 8).join(", ")}\u2026 (xem CHAT_THEME_VARS)`
+    );
+  }
+  const root = document.documentElement;
+  const previous = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(vars)) {
+    previous.set(name, root.style.getPropertyValue(name));
+    root.style.setProperty(name, value);
+  }
+  let styleEl = null;
+  if (css) {
+    styleEl = document.getElementById(STYLE_ID) || document.createElement("style");
+    styleEl.id = STYLE_ID;
+    styleEl.textContent = css;
+    if (!styleEl.isConnected) document.head.appendChild(styleEl);
+  }
+  return () => {
+    for (const [name, old] of previous) {
+      if (old) root.style.setProperty(name, old);
+      else root.style.removeProperty(name);
+    }
+    if (styleEl?.isConnected) styleEl.remove();
+  };
+}
+export {
+  CHAT_THEME_VARS,
+  applyChatTheme,
+  applyColorScheme,
+  buildChatTheme,
+  resolveTheme,
+  toHslTriplet,
+  toVarValue
+};