aizek-chatbot 1.0.7 → 1.0.9

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",
@@ -78,7 +97,7 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 var useChatbot = (options = {}) => {
-  const { mcpUrl, apiKey } = options;
+  const { mcpUrl, apiKey, config } = options;
   const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true });
   const [responseId, setResponseId] = useState(null);
   const [messages, setMessages] = useState([]);
@@ -96,10 +115,168 @@ var useChatbot = (options = {}) => {
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
   };
+  const getHtmlUiInstructions = (config2) => {
+    const headerColor = config2?.headerBackground || "#f5f5f5";
+    const accentColor = config2?.buttonBackground || "#007bff";
+    const companyName = config2?.companyName || "AI Assistant";
+    const companyLogo = config2?.companyLogo || "\u{1F916}";
+    return `
+You are a helpful assistant that creates UI using ONLY HTML tags.
+
+Your task:
+- Read the user message and respond.
+- Render your response as a small HTML layout (card OR table OR mini-table).
+- Use inline CSS styles.
+- Use a clean, light (white-based) theme.
+- Use branding and colors from options.config.
+- Return ONLY raw HTML (no markdown, no backticks, no JSON, no explanations).
+
+====================
+THEME & BRANDING (from options.config)
+====================
+The chat widget configuration provides:
+
+- Header Background Color: ${headerColor}
+- Button / Accent Color:   ${accentColor}
+- Company Name:            ${companyName}
+- Company Logo:            ${companyLogo}
+
+How to use these:
+- Use Header Background Color mainly for top headers, title strips, or main highlight areas.
+- Use Button / Accent Color for important accents: borders, highlights, small badges, table headers, key text highlights, links, etc.
+- Use a white or very light background for main surfaces.
+- Text color should generally be dark (#111\u2013#333) for readability.
+
+Do NOT create real interactive buttons. You can visually style elements using the accent color, but you must NOT use <button>.
+
+====================
+ALLOWED / FORBIDDEN TAGS
+====================
+You may use ANY NON-INTERACTIVE HTML element, for example:
+- Text and headings:
+  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
+  <p>, <span>, <strong>, <em>, <small>, <blockquote>, <code>, <pre>
+- Layout:
+  <div>, <section>, <article>, <header>, <footer>
+- Lists:
+  <ul>, <ol>, <li>
+- Tables:
+  <table>, <thead>, <tbody>, <tr>, <th>, <td>
+- Media:
+  <img>, <figure>, <figcaption>
+- Links (non-interactive navigation style only):
+  <a>
+
+FORBIDDEN (NEVER USE):
+- <button>, <input>, <textarea>, <select>, <option>, <form>, <label>
+- <details>, <summary>, <dialog>
+- <video> or <audio> with controls for user interaction
+- Any inline event handlers like onclick, onmouseover, etc.
+- <script> or any JavaScript code.
+
+====================
+LAYOUT TYPE RULES
+====================
+You have exactly THREE layout types you can use:
+
+1) CARD
+2) TABLE
+3) MINI TABLE
+
+For EACH response:
+- You MUST choose exactly ONE of these layout types.
+- You MUST NOT mix layout types in the same response.
+  (Do NOT render card + table together, or table + mini-table together.)
+
+Which layout to choose:
+- CARD (DEFAULT):
+  - Use this for normal answers, explanations, descriptions, welcome messages,
+    and any content that is mostly free text.
+- TABLE:
+  - Use this ONLY when the content is clearly structured with multiple columns
+    (for example: comparisons, lists of items with several attributes).
+- MINI TABLE:
+  - Use this for small, compact key-value style data
+    (for example: a few fields like "Token", "Price", "Network"),
+    or when a full table would be visually too heavy.
+
+If the user does NOT explicitly ask for a table or very structured data,
+you MUST use the CARD layout.
+
+====================
+STYLE RULES
+====================
+General style (CARD or container):
+- Use a main wrapper <div> with styles similar to:
+  background: #ffffff;
+  color: #111111;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+- You may add a top header area using the header background color:
+  background: ${headerColor};
+
+Use branding:
+- Include the company logo and name in a subtle way when appropriate
+  (for example, in a small header bar):
+  - Logo (emoji or image) on the left,
+  - Company name text next to it.
+
+Typography:
+- Titles: 18\u201322px, bold.
+- Body text: 12\u201316px, regular.
+- Line-height should be comfortable (around 1.4\u20131.6).
+
+Tables:
+- Use <table> with <thead> and <tbody> where appropriate.
+- Header row background: ${accentColor};
+- Header row text color: #ffffff;
+- Body rows background: #ffffff;
+- Row borders: 1px solid #e5e5e5 (or a faint version of the border color).
+
+Mini table:
+- Can be a simple two-column table or stacked key-value pairs.
+- Keep it compact (less padding, fewer rows).
+
+Links:
+- You can use <a> for styling or static URLs.
+- Use the accent color for links:
+  color: ${accentColor};
+
+====================
+OUTPUT FORMAT
+====================
+Your final output MUST follow these rules:
+- Output ONLY a single HTML snippet.
+- Do NOT wrap it in backticks or markdown.
+- Do NOT include any explanation text.
+- Do NOT include JSON.
+- Must use exactly ONE of: card, table, mini table.
+- Must respect allowed/forbidden tags.
+- Must use colors derived from:
+  - header_background
+  - button_background
+  and otherwise a light theme.
+
+====================
+BEHAVIOR SUMMARY
+====================
+1) Read the user message.
+2) Decide whether CARD, TABLE, or MINI TABLE is most suitable.
+3) Generate a single HTML layout using only allowed, non-interactive tags.
+4) Style the layout with inline CSS using:
+   - ${headerColor} for header areas,
+   - ${accentColor} for accents,
+   - white/light backgrounds and dark text.
+5) Return ONLY the HTML snippet.
+`;
+  };
   const sendMessage = async (message) => {
     if (!message.trim() || isLoading) return;
     addMessage(message, "user");
     setIsLoading(true);
+    console.log(options.config);
     try {
       let resp;
       console.log(options.headers);
@@ -115,7 +292,8 @@ var useChatbot = (options = {}) => {
           }
         ],
         input: message,
-        previous_response_id: responseId || void 0
+        previous_response_id: responseId || void 0,
+        instructions: getHtmlUiInstructions(options.config)
       });
       setResponseId(resp.id);
       let responseText = "";
@@ -167,6 +345,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);
@@ -572,6 +751,109 @@ var getLoadingSpinnerStyles = () => ({
   borderRadius: "50%",
   animation: "spin 1s linear infinite"
 });
+
+// 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?",
@@ -593,11 +875,22 @@ var AizekChatBot = ({ clientId, headers }) => {
   const [apiKey, setApiKey] = useState("");
   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(() => {
+    console.log("render");
     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);
@@ -613,7 +906,7 @@ var AizekChatBot = ({ clientId, headers }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers });
+  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers, config });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -633,7 +926,7 @@ var AizekChatBot = ({ clientId, headers }) => {
     return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
       /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
       /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
-        /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }),
+        isUser ? /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: message.content } }),
         message.isTyping && /* @__PURE__ */ jsx("div", { style: {
           display: "inline-flex",
           alignItems: "center",
@@ -659,6 +952,106 @@ var AizekChatBot = ({ clientId, headers }) => {
     }, []);
     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);
@@ -747,6 +1140,7 @@ var AizekChatBot = ({ clientId, headers }) => {
         ] })
       ] }),
       /* @__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 }),