aizek-chatbot 1.0.6 → 1.0.8

package/dist/index.mjs

@@ -9,6 +9,25 @@ import remarkGfm from 'remark-gfm';
 function cx(...args) {
   return args.filter(Boolean).join(" ");
 }
+function validateHeaders(headers, authConfig, opts = {}) {
+  const { caseSensitive = false, allowExtra = false } = opts;
+  const normalize = (s) => caseSensitive ? s : s.toLowerCase();
+  const headerEntries = Object.entries(headers).map(([k, v]) => [normalize(k), v.trim()]);
+  const authEntries = Object.entries(authConfig).map(([k, v]) => [normalize(k), v.trim()]);
+  const headerKeys = headerEntries.map(([k]) => k);
+  const authKeys = authEntries.map(([k]) => k);
+  const requiredSet = new Set(authKeys);
+  const missingKeys = authKeys.filter((k) => !headerKeys.includes(k));
+  const extraKeys = headerKeys.filter((k) => !requiredSet.has(k));
+  const hasAllRequired = missingKeys.length === 0;
+  const hasExtraKeys = extraKeys.length > 0 && !allowExtra;
+  const emptyValueKeys = authKeys.filter((k) => {
+    const val = headerEntries.find(([key]) => key === k)?.[1];
+    return !val || val.length === 0;
+  });
+  const isValid = hasAllRequired && !hasExtraKeys && emptyValueKeys.length === 0;
+  return { isValid, missingKeys, extraKeys, emptyValueKeys };
+}
 var base = {
   display: "inline-flex",
   alignItems: "center",
@@ -102,44 +121,21 @@ var useChatbot = (options = {}) => {
     setIsLoading(true);
     try {
       let resp;
-      if (options.userToken) {
-        resp = await client.responses.create({
-          model: "gpt-5",
-          tools: [
-            {
-              type: "mcp",
-              server_label: "aizek-mcp",
-              server_url: mcpUrl,
-              require_approval: "never",
-              headers: {
-                Authorization: `Bearer ${options.userToken}`,
-                brandId: "c5bfc750-69fd-4653-8dbb-f01614bc3319",
-                "privy-token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlNLb3JzbjRsMnJWSllrNEFrd0EtY0NaVVY1M0ticUQ2eHZ6UTNPeDdsY3cifQ.eyJzaWQiOiJjbWdqN25yb3EwMWRqbGEwY2M3a3hoamVzIiwiaXNzIjoicHJpdnkuaW8iLCJpYXQiOjE3NjAwMTMzMTYsImF1ZCI6ImNsc3U1eWM4NTA4d2hpMGZhZWR1a2Uxd3MiLCJzdWIiOiJkaWQ6cHJpdnk6Y2x0Y3d4MTNuMGkwNTEyeXRmNWI5d3NzdSIsImV4cCI6MTc2MDAxNjkxNn0.qzUpTuk5e8W0mggf4FTAAP3zZyjJjwpMi-QXU_2pLO9kgfMV5IYPzymR9XjTEBMfJxgC9dApMDvOAX8MvX7URw"
-              }
-            }
-          ],
-          input: message,
-          previous_response_id: responseId || void 0
-        });
-      } else {
-        resp = await client.responses.create({
-          model: "gpt-5",
-          tools: [
-            {
-              type: "mcp",
-              server_label: "aizek-mcp",
-              server_url: mcpUrl,
-              require_approval: "never",
-              headers: {
-                brandId: "c5bfc750-69fd-4653-8dbb-f01614bc3319",
-                "privy-token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlNLb3JzbjRsMnJWSllrNEFrd0EtY0NaVVY1M0ticUQ2eHZ6UTNPeDdsY3cifQ.eyJzaWQiOiJjbWdqN25yb3EwMWRqbGEwY2M3a3hoamVzIiwiaXNzIjoicHJpdnkuaW8iLCJpYXQiOjE3NjAwMTMzMTYsImF1ZCI6ImNsc3U1eWM4NTA4d2hpMGZhZWR1a2Uxd3MiLCJzdWIiOiJkaWQ6cHJpdnk6Y2x0Y3d4MTNuMGkwNTEyeXRmNWI5d3NzdSIsImV4cCI6MTc2MDAxNjkxNn0.qzUpTuk5e8W0mggf4FTAAP3zZyjJjwpMi-QXU_2pLO9kgfMV5IYPzymR9XjTEBMfJxgC9dApMDvOAX8MvX7URw"
-              }
-            }
-          ],
-          input: message,
-          previous_response_id: responseId || void 0
-        });
-      }
+      console.log(options.headers);
+      resp = await client.responses.create({
+        model: "gpt-5",
+        tools: [
+          {
+            type: "mcp",
+            server_label: "aizek-mcp",
+            server_url: mcpUrl,
+            require_approval: "never",
+            headers: options.headers || {}
+          }
+        ],
+        input: message,
+        previous_response_id: responseId || void 0
+      });
       setResponseId(resp.id);
       let responseText = "";
       if (resp && Array.isArray(resp)) {
@@ -190,6 +186,7 @@ var fetchChatWidgetSettings = async (clientId) => {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     const data = await response.json();
+    console.log(data);
     return data;
   } catch (error) {
     console.error("Error fetching chat widget settings:", error);
@@ -595,7 +592,110 @@ var getLoadingSpinnerStyles = () => ({
   borderRadius: "50%",
   animation: "spin 1s linear infinite"
 });
-var AizekChatBot = ({ clientId, userToken }) => {
+
+// src/styles/alertStyles.ts
+var getAlertContainerStyles = (type) => {
+  const colors = {
+    error: {
+      background: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
+      border: "#dc2626",
+      shadow: "rgba(239, 68, 68, 0.2)"
+    },
+    warning: {
+      background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+      border: "#d97706",
+      shadow: "rgba(245, 158, 11, 0.2)"
+    },
+    success: {
+      background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+      border: "#059669",
+      shadow: "rgba(16, 185, 129, 0.2)"
+    }
+  };
+  const selectedColor = colors[type];
+  return {
+    background: selectedColor.background,
+    border: `1px solid ${selectedColor.border}`,
+    borderRadius: "12px",
+    padding: "14px 16px",
+    margin: "12px 16px",
+    boxShadow: `0 4px 12px ${selectedColor.shadow}`,
+    color: "#ffffff",
+    fontSize: "13px",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    position: "relative",
+    animation: "slideDown 0.3s ease-out"
+  };
+};
+var getAlertIconContainerStyles = () => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "24px",
+  height: "24px",
+  flexShrink: 0,
+  marginTop: "2px"
+});
+var getAlertContentStyles = () => ({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px"
+});
+var getAlertTitleStyles = () => ({
+  fontWeight: 600,
+  fontSize: "14px",
+  margin: 0,
+  lineHeight: 1.4
+});
+var getAlertMessageStyles = () => ({
+  margin: 0,
+  lineHeight: 1.5,
+  opacity: 0.95
+});
+var getAlertListStyles = () => ({
+  margin: "8px 0 0 0",
+  paddingLeft: "20px",
+  listStyle: "none"
+});
+var getAlertListItemStyles = () => ({
+  marginBottom: "4px",
+  position: "relative",
+  paddingLeft: "12px",
+  lineHeight: 1.4
+});
+var getAlertCloseButtonStyles = () => ({
+  position: "absolute",
+  top: "12px",
+  right: "12px",
+  background: "rgba(255, 255, 255, 0.2)",
+  border: "none",
+  borderRadius: "6px",
+  width: "24px",
+  height: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  color: "#ffffff",
+  transition: "all 0.2s ease",
+  padding: 0
+});
+var getAlertAnimationStyles = () => `
+    @keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+var AizekChatBot = ({ clientId, headers }) => {
   const defaultConfig = {
     welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
     buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
@@ -614,13 +714,24 @@ var AizekChatBot = ({ clientId, userToken }) => {
   const [isConfigLoading, setIsConfigLoading] = useState(true);
   const [finalMcpUrl, setFinalMcpUrl] = useState("");
   const [apiKey, setApiKey] = useState("");
+  const [validConfig, setValidConfig] = useState(false);
   const { welcomeMessage, buttonBackground, placeholder, buttonPosition, buttonSize, chatWidth, chatHeight, showTypingIndicator, initialOpen, headerBackground, companyLogo, companyName } = config;
   const [isOpen, setIsOpen] = useState(false);
+  const [headerValidation, setHeaderValidation] = useState(null);
+  const [showAlert, setShowAlert] = useState(true);
   useEffect(() => {
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
         const apiResponse = await fetchChatWidgetSettings(clientId);
+        if (headers && apiResponse.data.auth_config) {
+          const validationResult = validateHeaders(headers, apiResponse.data.auth_config, {
+            allowExtra: false,
+            caseSensitive: true
+          });
+          console.log(validationResult);
+          setHeaderValidation(validationResult);
+        }
         setFinalMcpUrl(apiResponse.data.mcp_url);
         setApiKey(apiResponse.data.openai_key || "");
         const apiConfig = mapApiSettingsToConfig(apiResponse.data.chat_widget_settings);
@@ -636,7 +747,7 @@ var AizekChatBot = ({ clientId, userToken }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, userToken });
+  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -682,6 +793,106 @@ var AizekChatBot = ({ clientId, userToken }) => {
     }, []);
     return /* @__PURE__ */ jsx("span", { children: dots });
   };
+  const HeaderValidationAlert = () => {
+    if (!headerValidation || !showAlert) return null;
+    const { isValid, missingKeys, extraKeys, emptyValueKeys } = headerValidation;
+    if (isValid && missingKeys.length === 0 && extraKeys.length === 0 && emptyValueKeys.length === 0) {
+      return null;
+    }
+    const hasErrors = missingKeys.length > 0 || emptyValueKeys.length > 0;
+    const hasWarnings = extraKeys.length > 0;
+    const alertType = hasErrors ? "error" : "warning";
+    const getAlertIcon = () => {
+      if (hasErrors) {
+        return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
+      }
+      return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: getAlertAnimationStyles() }),
+      /* @__PURE__ */ jsxs("div", { style: getAlertContainerStyles(alertType), children: [
+        /* @__PURE__ */ jsx("div", { style: getAlertIconContainerStyles(), children: getAlertIcon() }),
+        /* @__PURE__ */ jsxs("div", { style: getAlertContentStyles(), children: [
+          /* @__PURE__ */ jsx("h4", { style: getAlertTitleStyles(), children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
+          /* @__PURE__ */ jsx("p", { style: getAlertMessageStyles(), children: hasErrors && hasWarnings ? "Header yap\u0131land\u0131rman\u0131zda hatalar ve uyar\u0131lar bulundu." : hasErrors ? "Header yap\u0131land\u0131rman\u0131zda hatalar bulundu." : "Header yap\u0131land\u0131rman\u0131zda fazla anahtarlar bulundu." }),
+          missingKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Eksik Header'lar:" }),
+            /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: missingKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
+              /* @__PURE__ */ jsx("span", { style: {
+                position: "absolute",
+                left: "0",
+                top: "2px",
+                fontWeight: "bold"
+              }, children: "\u2022" }),
+              /* @__PURE__ */ jsx("code", { style: {
+                background: "rgba(255, 255, 255, 0.2)",
+                padding: "2px 6px",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }, children: key })
+            ] }, index)) })
+          ] }),
+          emptyValueKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Bo\u015F De\u011Ferli Header'lar:" }),
+            /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
+              /* @__PURE__ */ jsx("span", { style: {
+                position: "absolute",
+                left: "0",
+                top: "2px",
+                fontWeight: "bold"
+              }, children: "\u2022" }),
+              /* @__PURE__ */ jsx("code", { style: {
+                background: "rgba(255, 255, 255, 0.2)",
+                padding: "2px 6px",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }, children: key }),
+              /* @__PURE__ */ jsx("span", { style: {
+                marginLeft: "6px",
+                fontSize: "11px",
+                opacity: 0.9
+              }, children: "(de\u011Fer bo\u015F olamaz)" })
+            ] }, index)) })
+          ] }),
+          extraKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Fazla Header'lar:" }),
+            /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: extraKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
+              /* @__PURE__ */ jsx("span", { style: {
+                position: "absolute",
+                left: "0",
+                top: "2px",
+                fontWeight: "bold"
+              }, children: "\u2022" }),
+              /* @__PURE__ */ jsx("code", { style: {
+                background: "rgba(255, 255, 255, 0.2)",
+                padding: "2px 6px",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px"
+              }, children: key })
+            ] }, index)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowAlert(false),
+            style: getAlertCloseButtonStyles(),
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)";
+            },
+            "aria-label": "Uyar\u0131y\u0131 kapat",
+            children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+          }
+        )
+      ] })
+    ] });
+  };
   const ChatInput = () => {
     const [message, setMessage] = useState("");
     const textareaRef = useRef(null);
@@ -770,6 +981,7 @@ var AizekChatBot = ({ clientId, userToken }) => {
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: getMessagesContainerStyles(), children: [
+        /* @__PURE__ */ jsx(HeaderValidationAlert, {}),
         messages.length === 0 ? /* @__PURE__ */ jsxs("div", { style: getEmptyStateStyles(), children: [
           /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
           /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),