xertica-ui 2.2.1 → 2.4.0

package/dist/BrandColorsContext-awnBCmC4.cjs

@@ -0,0 +1,666 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+const ApiKeyContext = React.createContext(void 0);
+const readStorage = (key) => typeof window !== "undefined" ? window.localStorage?.getItem(key) : null;
+const writeStorage = (key, value) => {
+  if (typeof window === "undefined") return;
+  window.localStorage?.setItem(key, value);
+};
+const removeStorage = (key) => {
+  if (typeof window === "undefined") return;
+  window.localStorage?.removeItem(key);
+};
+function ApiKeyProvider({
+  children,
+  initialApiKey,
+  initialGeminiApiKey,
+  initialGoogleMapsApiKey
+}) {
+  const LEAKED_KEYS = [
+    "AIzaSyCMsAMytBeOK0Qd7RKFyA5IW9eWt2WTJg",
+    "AIzaSyAiYWEIEmx212Up9zfM8kqyMXB4jLs8gq0"
+  ];
+  const [apiKey, setApiKeyState] = React.useState(() => {
+    if (initialApiKey) return initialApiKey;
+    const saved = readStorage("xertica-api-key");
+    return saved || "";
+  });
+  const [geminiApiKey, setGeminiApiKeyState] = React.useState(() => {
+    if (initialGeminiApiKey) return initialGeminiApiKey;
+    const saved = readStorage("xertica-gemini-api-key");
+    if (saved && LEAKED_KEYS.includes(saved)) {
+      removeStorage("xertica-gemini-api-key");
+      return "";
+    }
+    return saved || "";
+  });
+  const [googleMapsApiKey, setGoogleMapsApiKeyState] = React.useState(() => {
+    if (initialGoogleMapsApiKey) return initialGoogleMapsApiKey;
+    const saved = readStorage("xertica-googlemaps-api-key");
+    return saved || "";
+  });
+  const [isApiKeyValid, setIsApiKeyValid] = React.useState(false);
+  const [isGoogleMapsKeyValid, setIsGoogleMapsKeyValid] = React.useState(false);
+  React.useEffect(() => {
+    if (initialApiKey !== void 0) {
+      setApiKeyState(initialApiKey.trim());
+    }
+  }, [initialApiKey]);
+  React.useEffect(() => {
+    if (initialGeminiApiKey !== void 0) {
+      setGeminiApiKeyState(initialGeminiApiKey.trim());
+    }
+  }, [initialGeminiApiKey]);
+  React.useEffect(() => {
+    if (initialGoogleMapsApiKey !== void 0) {
+      setGoogleMapsApiKeyState(initialGoogleMapsApiKey.trim());
+    }
+  }, [initialGoogleMapsApiKey]);
+  React.useEffect(() => {
+    if (apiKey) {
+      writeStorage("xertica-api-key", apiKey);
+      setIsApiKeyValid(apiKey.length > 0);
+    } else {
+      removeStorage("xertica-api-key");
+      setIsApiKeyValid(false);
+    }
+  }, [apiKey]);
+  React.useEffect(() => {
+    if (geminiApiKey) {
+      writeStorage("xertica-gemini-api-key", geminiApiKey);
+      setIsApiKeyValid(geminiApiKey.startsWith("AIzaSy") && geminiApiKey.length > 20);
+    } else {
+      removeStorage("xertica-gemini-api-key");
+      setIsApiKeyValid(false);
+    }
+  }, [geminiApiKey]);
+  React.useEffect(() => {
+    if (googleMapsApiKey) {
+      writeStorage("xertica-googlemaps-api-key", googleMapsApiKey);
+      setIsGoogleMapsKeyValid(
+        googleMapsApiKey.startsWith("AIzaSy") && googleMapsApiKey.length > 20
+      );
+      const reloadMaps = async () => {
+        if (googleMapsApiKey.length < 10) return;
+        try {
+          const { reloadGoogleMaps } = await Promise.resolve().then(() => require('./index-9GWd0qxq.cjs'));
+          await reloadGoogleMaps(googleMapsApiKey);
+          console.log("[ApiKeyContext] Google Maps recarregado com sucesso");
+        } catch (error) {
+          console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
+        }
+      };
+      reloadMaps();
+    } else {
+      removeStorage("xertica-googlemaps-api-key");
+      setIsGoogleMapsKeyValid(false);
+    }
+  }, [googleMapsApiKey]);
+  const setApiKey = (key) => {
+    setApiKeyState(key.trim());
+  };
+  const setGeminiApiKey = (key) => {
+    setGeminiApiKeyState(key.trim());
+  };
+  const setGoogleMapsApiKey = (key) => {
+    setGoogleMapsApiKeyState(key.trim());
+  };
+  const reloadMapsApi = async () => {
+    if (!googleMapsApiKey || googleMapsApiKey.length < 10) {
+      return;
+    }
+    try {
+      const { reloadGoogleMaps } = await Promise.resolve().then(() => require('./index-9GWd0qxq.cjs'));
+      await reloadGoogleMaps(googleMapsApiKey);
+      console.log("[ApiKeyContext] Google Maps recarregado manualmente");
+    } catch (error) {
+      console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ApiKeyContext.Provider,
+    {
+      value: {
+        apiKey,
+        setApiKey,
+        geminiApiKey,
+        setGeminiApiKey,
+        isApiKeyValid,
+        googleMapsApiKey,
+        setGoogleMapsApiKey,
+        isGoogleMapsKeyValid,
+        reloadMapsApi
+      },
+      children
+    }
+  );
+}
+function useApiKey() {
+  const context = React.useContext(ApiKeyContext);
+  if (!context) {
+    throw new Error("useApiKey must be used within ApiKeyProvider");
+  }
+  return context;
+}
+
+const AssistenteContext = React.createContext(void 0);
+function AssistenteProvider({ children }) {
+  const [conversaAtual, setConversaAtual] = React.useState("1");
+  const [conversas, setConversas] = React.useState([
+    {
+      id: "1",
+      titulo: "Nova Conversa",
+      mensagens: [],
+      ultimaMensagem: "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      favorita: false
+    }
+  ]);
+  const [isTyping, setIsTyping] = React.useState(false);
+  const [abaSelecionada, setAbaSelecionada] = React.useState("chat");
+  const [editingDocument, setEditingDocument] = React.useState(
+    null
+  );
+  const [searchFilter, setSearchFilter] = React.useState("all");
+  const [savedSearches, setSavedSearches] = React.useState([]);
+  const historico = conversas.find((c) => c.id === conversaAtual)?.mensagens || [];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AssistenteContext.Provider,
+    {
+      value: {
+        historico,
+        conversaAtual,
+        setConversaAtual,
+        conversas,
+        setConversas,
+        isTyping,
+        setIsTyping,
+        abaSelecionada,
+        setAbaSelecionada,
+        editingDocument,
+        setEditingDocument,
+        searchFilter,
+        setSearchFilter,
+        savedSearches,
+        setSavedSearches
+      },
+      children
+    }
+  );
+}
+function useAssistente() {
+  const context = React.useContext(AssistenteContext);
+  if (!context) {
+    throw new Error("useAssistente must be used within AssistenteProvider");
+  }
+  return context;
+}
+
+const colorThemes = [
+  {
+    id: "xertica-original",
+    name: "Xertica Original",
+    description: "A identidade visual clássica da Xertica com o gradiente original",
+    colors: {
+      primary: "#2C275B",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#5B568F",
+      primaryDarkMode: "#72CDFD",
+      primaryForegroundDark: "#09090B",
+      sidebarLight: "#2C275B",
+      // Primary Color
+      sidebarDark: "#1a1928",
+      // Original Dark BG
+      gradientStart: "#FDB0F2",
+      gradientEnd: "#72CDFD",
+      gradientStartDark: "#7B4A7A",
+      gradientEndDark: "#3A5C7D",
+      chart1: "#2C275B",
+      chart2: "#047857",
+      chart3: "#B45309",
+      chart4: "#1D4ED8",
+      chart5: "#B91C1C"
+    },
+    preview: {
+      primary: "#2C275B",
+      secondary: "#FDB0F2",
+      accent: "#72CDFD"
+    }
+  },
+  {
+    id: "zinc",
+    name: "Zinc",
+    description: "Minimalista, sério e elegante (Escala de Cinza)",
+    colors: {
+      primary: "#18181B",
+      primaryForeground: "#FAFAFA",
+      primaryLight: "#E4E4E7",
+      primaryDarkMode: "#FAFAFA",
+      primaryForegroundDark: "#18181B",
+      sidebarLight: "#18181B",
+      // Primary Color
+      sidebarDark: "#09090B",
+      gradientStart: "#52525B",
+      gradientEnd: "#D4D4D8",
+      gradientStartDark: "#27272A",
+      gradientEndDark: "#52525B",
+      chart1: "#18181B",
+      chart2: "#52525B",
+      chart3: "#A1A1AA",
+      chart4: "#D4D4D8",
+      chart5: "#E4E4E7"
+    },
+    preview: {
+      primary: "#18181B",
+      secondary: "#52525B",
+      accent: "#E4E4E7"
+    }
+  },
+  {
+    id: "slate",
+    name: "Slate",
+    description: "Profissional com tons de azul acinzentado",
+    colors: {
+      primary: "#0F172A",
+      primaryForeground: "#F8FAFC",
+      primaryLight: "#CBD5E1",
+      primaryDarkMode: "#F8FAFC",
+      primaryForegroundDark: "#0F172A",
+      sidebarLight: "#0F172A",
+      // Primary Color
+      sidebarDark: "#020617",
+      gradientStart: "#475569",
+      gradientEnd: "#94A3B8",
+      gradientStartDark: "#1E293B",
+      gradientEndDark: "#475569",
+      chart1: "#0F172A",
+      chart2: "#475569",
+      chart3: "#94A3B8",
+      chart4: "#CBD5E1",
+      chart5: "#E2E8F0"
+    },
+    preview: {
+      primary: "#0F172A",
+      secondary: "#475569",
+      accent: "#94A3B8"
+    }
+  },
+  {
+    id: "blue",
+    name: "Blue",
+    description: "Confiável e seguro, padrão corporativo",
+    colors: {
+      primary: "#2563EB",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#DBEAFE",
+      primaryDarkMode: "#3B82F6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#1E3A8A",
+      // Blue 900 (High Contrast Sidebar)
+      sidebarDark: "#172554",
+      gradientStart: "#2563EB",
+      gradientEnd: "#60A5FA",
+      gradientStartDark: "#1D4ED8",
+      gradientEndDark: "#2563EB",
+      chart1: "#2563EB",
+      chart2: "#3B82F6",
+      chart3: "#60A5FA",
+      chart4: "#93C5FD",
+      chart5: "#BFDBFE"
+    },
+    preview: {
+      primary: "#2563EB",
+      secondary: "#60A5FA",
+      accent: "#DBEAFE"
+    }
+  },
+  {
+    id: "violet",
+    name: "Violet",
+    description: "Criativo e vibrante",
+    colors: {
+      primary: "#7C3AED",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#EDE9FE",
+      primaryDarkMode: "#8B5CF6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#4C1D95",
+      // Violet 900 (High Contrast Sidebar)
+      sidebarDark: "#2E1065",
+      gradientStart: "#7C3AED",
+      gradientEnd: "#A78BFA",
+      gradientStartDark: "#5B21B6",
+      gradientEndDark: "#7C3AED",
+      chart1: "#7C3AED",
+      chart2: "#8B5CF6",
+      chart3: "#A78BFA",
+      chart4: "#C4B5FD",
+      chart5: "#DDD6FE"
+    },
+    preview: {
+      primary: "#7C3AED",
+      secondary: "#A78BFA",
+      accent: "#EDE9FE"
+    }
+  },
+  {
+    id: "rose",
+    name: "Rose",
+    description: "Elegante e suave",
+    colors: {
+      primary: "#BE123C",
+      // Rose 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFE4E6",
+      primaryDarkMode: "#F43F5E",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#881337",
+      // Rose 900 (High Contrast Sidebar)
+      sidebarDark: "#881337",
+      gradientStart: "#E11D48",
+      gradientEnd: "#FB7185",
+      gradientStartDark: "#9F1239",
+      gradientEndDark: "#E11D48",
+      chart1: "#E11D48",
+      chart2: "#F43F5E",
+      chart3: "#FB7185",
+      chart4: "#FDA4AF",
+      chart5: "#FECDD3"
+    },
+    preview: {
+      primary: "#BE123C",
+      secondary: "#FB7185",
+      accent: "#FFE4E6"
+    }
+  },
+  {
+    id: "emerald",
+    name: "Emerald",
+    description: "Natural e equilibrado",
+    colors: {
+      primary: "#047857",
+      // Emerald 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#D1FAE5",
+      primaryDarkMode: "#10B981",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#064E3B",
+      // Emerald 900 (High Contrast Sidebar)
+      sidebarDark: "#064E3B",
+      gradientStart: "#059669",
+      gradientEnd: "#34D399",
+      gradientStartDark: "#064E3B",
+      gradientEndDark: "#059669",
+      chart1: "#059669",
+      chart2: "#10B981",
+      chart3: "#34D399",
+      chart4: "#6EE7B7",
+      chart5: "#A7F3D0"
+    },
+    preview: {
+      primary: "#047857",
+      secondary: "#34D399",
+      accent: "#D1FAE5"
+    }
+  },
+  {
+    id: "amber",
+    name: "Amber",
+    description: "Quente e energético",
+    colors: {
+      primary: "#B45309",
+      // Amber 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FEF3C7",
+      primaryDarkMode: "#F59E0B",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#78350F",
+      // Amber 900 (High Contrast Sidebar)
+      sidebarDark: "#78350F",
+      gradientStart: "#D97706",
+      gradientEnd: "#FBBF24",
+      gradientStartDark: "#92400E",
+      gradientEndDark: "#D97706",
+      chart1: "#D97706",
+      chart2: "#F59E0B",
+      chart3: "#FBBF24",
+      chart4: "#FDE68A",
+      chart5: "#FEF3C7"
+    },
+    preview: {
+      primary: "#B45309",
+      secondary: "#FBBF24",
+      accent: "#FEF3C7"
+    }
+  },
+  {
+    id: "orange",
+    name: "Orange",
+    description: "Vibrante e amigável",
+    colors: {
+      primary: "#C2410C",
+      // Orange 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFEDD5",
+      primaryDarkMode: "#F97316",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#7C2D12",
+      // Orange 900 (High Contrast Sidebar)
+      sidebarDark: "#7C2D12",
+      gradientStart: "#EA580C",
+      gradientEnd: "#FB923C",
+      gradientStartDark: "#9A3412",
+      gradientEndDark: "#EA580C",
+      chart1: "#EA580C",
+      chart2: "#F97316",
+      chart3: "#FB923C",
+      chart4: "#FDBA74",
+      chart5: "#FED7AA"
+    },
+    preview: {
+      primary: "#C2410C",
+      secondary: "#FB923C",
+      accent: "#FFEDD5"
+    }
+  }
+];
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+const BrandColorsContext = React.createContext(void 0);
+const BrandColorsProvider = ({
+  children,
+  defaultTheme,
+  primaryColor,
+  useCustomTokens = false
+}) => {
+  const [currentTheme, setCurrentTheme] = React.useState(() => {
+    if (primaryColor) return "custom";
+    return defaultTheme || "xertica-original";
+  });
+  const [radius, setRadius] = React.useState(0.5);
+  const [colors, setColors] = React.useState(() => {
+    if (primaryColor) {
+      return {
+        ...colorThemes[0].colors,
+        primary: primaryColor,
+        primaryDarkMode: primaryColor,
+        sidebarLight: primaryColor,
+        sidebarDark: primaryColor,
+        chart1: primaryColor
+      };
+    }
+    const theme = colorThemes.find((t) => t.id === currentTheme);
+    return theme?.colors || colorThemes[0].colors;
+  });
+  React.useEffect(() => {
+    if (primaryColor) {
+      setColors({
+        ...colorThemes[0].colors,
+        primary: primaryColor,
+        primaryDarkMode: primaryColor,
+        sidebarLight: primaryColor,
+        sidebarDark: primaryColor,
+        chart1: primaryColor
+      });
+      setCurrentTheme("custom");
+      return;
+    }
+    const theme = colorThemes.find((t) => t.id === currentTheme);
+    if (theme) {
+      setColors(theme.colors);
+    }
+  }, [currentTheme, primaryColor]);
+  const applyColors = React.useCallback(() => {
+    if (useCustomTokens) return;
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const isDark = root.classList.contains("dark");
+    const primary = isDark ? colors.primaryDarkMode : colors.primary;
+    const primaryForeground = isDark ? colors.primaryForegroundDark : colors.primaryForeground;
+    const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
+    const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
+    const semantic = {
+      success: isDark ? "#4ade80" : "#047857",
+      // Green 400 / 700
+      warning: isDark ? "#fbbf24" : "#b45309",
+      // Amber 400 / 700
+      info: isDark ? "#60a5fa" : "#1d4ed8",
+      // Blue 400 / 700
+      destructive: isDark ? "#f87171" : "#b91c1c",
+      // Red 400 / 700
+      foreground: isDark ? "#050505" : "#ffffff"
+    };
+    const cssVars = [];
+    cssVars.push(`--primary: ${primary}`);
+    cssVars.push(`--primary-foreground: ${primaryForeground}`);
+    cssVars.push(`--success: ${semantic.success}`);
+    cssVars.push(`--success-foreground: ${semantic.foreground}`);
+    cssVars.push(`--warning: ${semantic.warning}`);
+    cssVars.push(`--warning-foreground: ${semantic.foreground}`);
+    cssVars.push(`--info: ${semantic.info}`);
+    cssVars.push(`--info-foreground: ${semantic.foreground}`);
+    cssVars.push(`--destructive: ${semantic.destructive}`);
+    cssVars.push(`--destructive-foreground: ${semantic.foreground}`);
+    const primaryRGB = hexToRgb(primary);
+    if (primaryRGB) {
+      cssVars.push(
+        `--ring: ${isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`}`
+      );
+      cssVars.push(`--xertica-primary: ${primary}`);
+      cssVars.push(
+        `--primary-light: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`
+      );
+      cssVars.push(`--primary-light-foreground: ${primary}`);
+    }
+    cssVars.push(`--radius: ${radius}rem`);
+    cssVars.push(`--chart-1: ${colors.chart1}`);
+    cssVars.push(`--chart-2: ${colors.chart2}`);
+    cssVars.push(`--chart-3: ${colors.chart3}`);
+    cssVars.push(`--chart-4: ${colors.chart4}`);
+    cssVars.push(`--chart-5: ${colors.chart5}`);
+    const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
+    const isSidebarLight = sidebarBg.toLowerCase() === "#ffffff" || sidebarBg.toLowerCase() === "#f3f4f6" || sidebarBg.toLowerCase() === "#fafafa";
+    const sidebarFg = isSidebarLight ? "#0F172A" : "#FFFFFF";
+    cssVars.push(`--sidebar: ${sidebarBg}`);
+    cssVars.push(`--sidebar-foreground: ${sidebarFg}`);
+    if (primaryRGB) {
+      if (isSidebarLight) {
+        cssVars.push(
+          `--sidebar-accent: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`
+        );
+        cssVars.push(`--sidebar-accent-foreground: ${primary}`);
+        cssVars.push(`--sidebar-border: rgba(0,0,0,0.1)`);
+      } else {
+        cssVars.push(`--sidebar-accent: rgba(255, 255, 255, 0.1)`);
+        cssVars.push(`--sidebar-accent-foreground: #FFFFFF`);
+        cssVars.push(`--sidebar-border: rgba(255,255,255,0.1)`);
+      }
+      cssVars.push(`--sidebar-ring: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+    }
+    if (!isSidebarLight) {
+      cssVars.push(`--sidebar-primary: #FFFFFF`);
+      cssVars.push(`--sidebar-primary-foreground: ${primary}`);
+    } else {
+      cssVars.push(`--sidebar-primary: ${primary}`);
+      cssVars.push(`--sidebar-primary-foreground: ${primaryForeground}`);
+    }
+    cssVars.push(
+      `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
+    );
+    const styleId = "xertica-brand-colors-injection";
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      document.head.prepend(styleEl);
+    }
+    styleEl.innerHTML = `:root {
+  ${cssVars.join(";\n  ")};
+}`;
+  }, [colors, currentTheme, radius, useCustomTokens]);
+  React.useEffect(() => {
+    applyColors();
+  }, [applyColors]);
+  React.useEffect(() => {
+    if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+    const root = document.documentElement;
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          applyColors();
+        }
+      });
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, [applyColors]);
+  const setTheme = (themeId) => {
+    setCurrentTheme(themeId);
+  };
+  const setBrandColor = (colorKey, value) => {
+    setColors((prev) => ({
+      ...prev,
+      [colorKey]: value
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BrandColorsContext.Provider,
+    {
+      value: {
+        colors,
+        currentTheme,
+        themes: colorThemes,
+        setTheme,
+        setBrandColor,
+        radius,
+        setRadius
+      },
+      children
+    }
+  );
+};
+const useBrandColors = () => {
+  const context = React.useContext(BrandColorsContext);
+  if (context === void 0) {
+    throw new Error("useBrandColors must be used within a BrandColorsProvider");
+  }
+  return context;
+};
+
+exports.ApiKeyProvider = ApiKeyProvider;
+exports.AssistenteProvider = AssistenteProvider;
+exports.BrandColorsProvider = BrandColorsProvider;
+exports.useApiKey = useApiKey;
+exports.useAssistente = useAssistente;
+exports.useBrandColors = useBrandColors;