aizek-chatbot 1.0.16 → 1.0.21

package/dist/index.mjs

@@ -1,932 +0,0 @@
-import { useRef, useState, useEffect } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import Anthropic from "@anthropic-ai/sdk";
-import { Client } from "@modelcontextprotocol/sdk/client";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-import "./index.css";
-
-// src/services/chat-widget-api.ts
-var API_BASE_URL = "https://api-alpha.aizek.ai";
-var fetchChatWidgetSettings = async (clientId) => {
-  try {
-    const response = await fetch(`${API_BASE_URL}/ChatWidgetSettings/GetByClientId?client_id=${clientId}`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Error fetching chat widget settings:", error);
-    throw error;
-  }
-};
-
-// src/utils/cx.ts
-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 };
-}
-
-// src/store/static.ts
-var defaultConfig = {
-  auth_config: {
-    header: "",
-  },
-  chat_widget_settings: {
-    welcome_message: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
-    button_background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    placeholder: "Mesaj\u0131n\u0131z\u0131 yaz\u0131n...",
-    button_position: "bottom-left",
-    button_size: "medium",
-    chat_width: "400px",
-    chat_height: "600px",
-    show_typing_indicator: true,
-    initial_open: true,
-    header_background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    company_logo: "",
-    company_name: "Aizek",
-    api_source_id: 0,
-    chat_widget_settings_id: 0,
-    created_at: "",
-    updated_at: "",
-  },
-  mcp_url: "",
-  openai_key: "",
-};
-var GENERATIVE_UI_SYSTEM_PROMPT = `
-You can generate interactive UI components as part of your responses.
-When users need to:
-- Provide multiple pieces of information \u2192 Generate a FORM
-- Make a choice between options \u2192 Generate BUTTONS
-- View structured data \u2192 Generate a TABLE or LIST
-- See entity details \u2192 Generate a CARD
-
-For each component type, include JSON in this format:
-
-\`\`\`ui-component
-{
-  "version": "1.0",
-  "title": string,
-  "description"?: string,
-  "components": Array<{
-    id: string,
-    type:
-      | "text"
-      | "input"
-      | "button"
-      | "select"
-      | "card"
-      | "list"
-      | "image"
-      | "link"
-      | "table"
-      | "form",
-    label?: string,
-    fieldType?: "text" | "number" | "date" | "textarea",
-    requiredField?: boolean,
-    placeholder?: string,
-    options?: string[],
-    columns?: string[],
-    rows?: string[][],
-    url?: string,
-    fieldName?: string
-    buttonType?: click | submit
-  }>
-}
-\`\`\`
-
-
-
-
-
-Always provide both a conversational text response AND appropriate UI components.
-
-`;
-var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
-  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__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsxs("div", {
-      className: `alert-container ${alertType}`,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "alert-icon-container", children: getAlertIcon() }),
-        /* @__PURE__ */ jsxs("div", {
-          className: "alert-content",
-          children: [
-            /* @__PURE__ */ jsx("h4", { className: "alert-title", children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
-            /* @__PURE__ */ jsx("p", {
-              className: "alert-message",
-              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", { children: "Eksik Header'lar:" }),
-                  /* @__PURE__ */ jsx("ul", {
-                    className: "alert-list",
-                    children: missingKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key })] }, index)),
-                  }),
-                ],
-              }),
-            emptyValueKeys.length > 0 &&
-              /* @__PURE__ */ jsxs("div", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", { children: "Bo\u015F De\u011Ferli Header'lar:" }),
-                  /* @__PURE__ */ jsx("ul", {
-                    className: "alert-list",
-                    children: emptyValueKeys.map((key, index) =>
-                      /* @__PURE__ */ jsxs(
-                        "li",
-                        { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key }), /* @__PURE__ */ jsx("span", { children: "(de\u011Fer bo\u015F olamaz)" })] },
-                        index
-                      )
-                    ),
-                  }),
-                ],
-              }),
-            extraKeys.length > 0 &&
-              /* @__PURE__ */ jsxs("div", {
-                children: [
-                  /* @__PURE__ */ jsx("strong", { children: "Fazla Header'lar:" }),
-                  /* @__PURE__ */ jsx("ul", {
-                    className: "alert-list",
-                    children: extraKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key })] }, index)),
-                  }),
-                ],
-              }),
-          ],
-        }),
-        /* @__PURE__ */ jsx("button", {
-          onClick: () => setShowAlert(false),
-          className: "alert-close-button",
-          "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" }),
-          }),
-        }),
-      ],
-    }),
-  });
-};
-var LoadingSpinner = () => {
-  return /* @__PURE__ */ jsx("div", { className: "loading-spinner" });
-};
-var ChatInput = ({ isLoading, placeholder, handleSendMessage }) => {
-  const [message, setMessage] = useState("");
-  const textareaRef = useRef(null);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (message.trim() && !isLoading) {
-      handleSendMessage(message.trim());
-      setMessage("");
-      if (textareaRef.current) {
-        textareaRef.current.style.height = "auto";
-      }
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-  const handleInputChange = (e) => {
-    setMessage(e.target.value);
-    const textarea = e.target;
-    textarea.style.height = "auto";
-    textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
-  };
-  return /* @__PURE__ */ jsxs("form", {
-    onSubmit: handleSubmit,
-    className: "input-container",
-    children: [
-      /* @__PURE__ */ jsx("textarea", {
-        ref: textareaRef,
-        value: message,
-        onChange: handleInputChange,
-        onKeyDown: handleKeyDown,
-        placeholder,
-        disabled: isLoading,
-        className: "textarea",
-      }),
-      /* @__PURE__ */ jsx("button", {
-        type: "submit",
-        disabled: isLoading || !message.trim(),
-        className: "send-button",
-        children: isLoading
-          ? /* @__PURE__ */ jsx(LoadingSpinner, {})
-          : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }),
-      }),
-    ],
-  });
-};
-var GenericUIRenderer = ({ uiData, onInteraction }) => {
-  const containerRef = useRef(null);
-  if (!uiData || !uiData.components) return null;
-  const collectFormValues = () => {
-    if (!containerRef.current) return {};
-    const formData = {};
-    const inputs = containerRef.current.querySelectorAll("input, textarea, select");
-    inputs.forEach((element) => {
-      const name = element.getAttribute("name");
-      if (name) {
-        if (element instanceof HTMLInputElement && element.type === "checkbox") {
-          formData[name] = element.checked;
-        } else if (element instanceof HTMLInputElement && element.type === "radio") {
-          if (element.checked) {
-            formData[name] = element.value;
-          }
-        } else {
-          formData[name] = element.value;
-        }
-      }
-    });
-    return formData;
-  };
-  const renderComponent = (comp) => {
-    switch (comp.type) {
-      case "text":
-        return /* @__PURE__ */ jsx("p", { className: "gen-ui-text", children: comp.value ?? comp.label }, comp.id);
-      case "input":
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "gen-ui-input-wrapper",
-            children: [
-              comp.label && /* @__PURE__ */ jsx("label", { className: "gen-ui-input-label", children: comp.label }),
-              comp.fieldType === "textarea"
-                ? /* @__PURE__ */ jsx("textarea", {
-                    name: comp.id,
-                    placeholder: comp.placeholder,
-                    className: "gen-ui-textarea",
-                  })
-                : /* @__PURE__ */ jsx("input", {
-                    name: comp.id,
-                    type: comp.fieldType || "text",
-                    placeholder: comp.placeholder,
-                    className: "gen-ui-input",
-                  }),
-            ],
-          },
-          comp.id
-        );
-      case "select":
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "gen-ui-select-wrapper",
-            children: [
-              comp.label && /* @__PURE__ */ jsx("label", { className: "gen-ui-select-label", children: comp.label }),
-              /* @__PURE__ */ jsx("select", { name: comp.id, className: "gen-ui-select", children: comp.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt)) }),
-            ],
-          },
-          comp.id
-        );
-      case "button":
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              const formValues = collectFormValues();
-              onInteraction({
-                action: comp.label,
-                buttonId: comp.buttonType,
-                formData: formValues,
-              });
-            },
-            className: "gen-ui-button",
-            children: comp.label,
-          },
-          comp.id
-        );
-      case "card":
-        return /* @__PURE__ */ jsxs(
-          "div",
-          { className: "gen-ui-card", children: [comp.label && /* @__PURE__ */ jsx("h2", { className: "gen-ui-card-title", children: comp.label }), comp.value && /* @__PURE__ */ jsx("p", { className: "gen-ui-card-content", children: comp.value })] },
-          comp.id
-        );
-      case "list":
-        return /* @__PURE__ */ jsx("ul", { className: "gen-ui-list", children: comp.items?.map((item) => /* @__PURE__ */ jsx("li", { className: "gen-ui-list-item", children: item.label ?? String(item.value ?? "") }, item.id)) }, comp.id);
-      case "image":
-        return /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: comp.url,
-            alt: comp.label || "",
-            className: "gen-ui-image",
-          },
-          comp.id
-        );
-      case "link":
-        return /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: comp.url,
-            className: "gen-ui-link",
-            children: comp.label || comp.url,
-          },
-          comp.id
-        );
-      case "table":
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "gen-ui-table-wrapper",
-            children: /* @__PURE__ */ jsxs("table", {
-              className: "gen-ui-table",
-              children: [
-                comp.columns &&
-                  /* @__PURE__ */ jsx("thead", { className: "gen-ui-table-header", children: /* @__PURE__ */ jsx("tr", { children: comp.columns.map((col) => /* @__PURE__ */ jsx("th", { className: "gen-ui-table-th", children: col }, col)) }) }),
-                comp.rows &&
-                  /* @__PURE__ */ jsx("tbody", {
-                    className: "gen-ui-table-body",
-                    children: comp.rows.map((row, ridx) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cidx) => /* @__PURE__ */ jsx("td", { className: "gen-ui-table-td", children: cell }, cidx)) }, ridx)),
-                  }),
-              ],
-            }),
-          },
-          comp.id
-        );
-      case "form":
-        return /* @__PURE__ */ jsx("form", { className: "gen-ui-form", children: comp.items?.map((field) => renderComponent(field)) }, comp.id);
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: "generative-ui-container",
-    ref: containerRef,
-    children: [
-      (uiData.title || uiData.description) &&
-        /* @__PURE__ */ jsxs("div", {
-          className: "generative-ui-header",
-          children: [uiData.title && /* @__PURE__ */ jsx("h1", { className: "generative-ui-title", children: uiData.title }), uiData.description && /* @__PURE__ */ jsx("p", { className: "generative-ui-description", children: uiData.description })],
-        }),
-      uiData.components.map((comp) => renderComponent(comp)),
-    ],
-  });
-};
-var MessageBubble = ({ message, onAction }) => {
-  console.log("MESSAGE", message);
-  const isUser = message.role === "user";
-  const approval = message.role === "approval";
-  if (approval) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    className: `message-container ${isUser ? "user" : "assistant"}`,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: `message-bubble ${isUser ? "user" : "assistant"}`,
-        children: isUser
-          ? message.text && /* @__PURE__ */ jsx("div", { className: "markdown-content", children: message.text })
-          : /* @__PURE__ */ jsxs(Fragment, {
-              children: [
-                message.text && /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.text }) }),
-                message.ui &&
-                  /* @__PURE__ */ jsx(GenericUIRenderer, {
-                    uiData: message.ui,
-                    onInteraction: (event) => {
-                      console.log("event", event);
-                      if (event.buttonId === "submit") {
-                        onAction(JSON.stringify(event.formData), true);
-                      } else {
-                        onAction(event.action, true);
-                      }
-                    },
-                  }),
-              ],
-            }),
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: `message-time ${isUser ? "user" : "assistant"}`,
-        children: message.timestamp.toLocaleTimeString("tr-TR", {
-          hour: "2-digit",
-          minute: "2-digit",
-        }),
-      }),
-    ],
-  });
-};
-var TypingDots = () => {
-  const [dots, setDots] = useState("");
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots((prev) => {
-        if (prev === "...") return "";
-        return prev + ".";
-      });
-    }, 500);
-    return () => clearInterval(interval);
-  }, []);
-  return /* @__PURE__ */ jsx("div", {
-    className: "message-container assistant",
-    children: /* @__PURE__ */ jsx("div", { className: "message-bubble assistant", children: /* @__PURE__ */ jsx("div", { className: "message-typing-indicator", children: /* @__PURE__ */ jsx("span", { children: dots }) }) }),
-  });
-};
-
-// src/utils/chatbot.ts
-var extractUIJsonFromText = (text) => {
-  const regex = /```ui-component([\s\S]*?)```/g;
-  let cleaned = text;
-  let match;
-  let uiData = null;
-  while ((match = regex.exec(text)) !== null) {
-    const block = match[1].trim();
-    try {
-      const parsed = JSON.parse(block);
-      if (parsed && parsed.components && Array.isArray(parsed.components)) {
-        parsed.components = parsed.components.map((comp, index) => {
-          if (!comp.id || typeof comp.id !== "string" || !comp.id.trim()) {
-            comp.id = `ui-comp-${index}-${Date.now()}`;
-          }
-          if (comp.type === "button") {
-            if (!comp.buttonType) {
-              comp.buttonType = "click";
-            }
-          }
-          if (comp.type === "input") {
-            if (!comp.fieldType) {
-              comp.fieldType = "text";
-            }
-          }
-          if (comp.type === "select") {
-            if (comp.options && Array.isArray(comp.options)) {
-              const firstOption = comp.options[0];
-              if (typeof firstOption === "object" && firstOption !== null) {
-                if ("label" in firstOption || "value" in firstOption) {
-                  comp.options = comp.options.map((opt) => opt.label || opt.value || String(opt));
-                }
-              }
-            }
-          }
-          if (comp.type === "table") {
-            if (comp.columns && Array.isArray(comp.columns)) {
-              const firstCol = comp.columns[0];
-              if (typeof firstCol === "object" && firstCol !== null) {
-                comp.columns = comp.columns.map((col) => col.label || col.id || String(col));
-              }
-            }
-            if (comp.rows && Array.isArray(comp.rows)) {
-              const firstRow = comp.rows[0];
-              if (typeof firstRow === "object" && !Array.isArray(firstRow)) {
-                comp.rows = comp.rows.map((row) => {
-                  if (Array.isArray(row)) return row;
-                  return Object.values(row).map((val) => {
-                    if (typeof val === "object" && val !== null) {
-                      if (val.type === "image" && val.src) return val.src;
-                      if (val.value !== void 0) return String(val.value);
-                    }
-                    return String(val || "");
-                  });
-                });
-              }
-            }
-          }
-          if (comp.type === "form" && comp.items && Array.isArray(comp.items)) {
-            comp.items = comp.items.map((field, fieldIndex) => {
-              if (!field.id || !field.id.trim()) {
-                field.id = `field-${fieldIndex}-${Date.now()}`;
-              }
-              if (field.optional !== void 0) {
-                field.requiredField = !field.optional;
-                delete field.optional;
-              }
-              if (field.required !== void 0) {
-                field.requiredField = field.required;
-                delete field.required;
-              }
-              if (field.type === "input" && !field.fieldType) {
-                field.fieldType = "text";
-              }
-              if (field.type === "select" && field.options && Array.isArray(field.options)) {
-                const firstOpt = field.options[0];
-                if (typeof firstOpt === "object" && firstOpt !== null) {
-                  field.options = field.options.map((opt) => opt.label || opt.value || String(opt));
-                }
-              }
-              return field;
-            });
-          }
-          if (comp.type === "list" && comp.items && Array.isArray(comp.items)) {
-            comp.items = comp.items.map((item, itemIndex) => {
-              if (typeof item === "string") {
-                return {
-                  id: `list-item-${itemIndex}-${Date.now()}`,
-                  type: "text",
-                  value: item,
-                  label: item,
-                };
-              }
-              if (!item.id || !item.id.trim()) {
-                item.id = `list-item-${itemIndex}-${Date.now()}`;
-              }
-              return item;
-            });
-          }
-          return comp;
-        });
-        uiData = parsed;
-      }
-      cleaned = cleaned.replace(match[0], "").trim();
-      break;
-    } catch (e) {
-      console.error("Invalid ui-component JSON:", e, block);
-    }
-  }
-  return {
-    cleanedText: cleaned,
-    uiData,
-  };
-};
-var historyMessages = (history, currentUserText) => {
-  const claudeHistory = history
-    .filter((m) => m.role === "user" || m.role === "assistant")
-    .map((m) => ({
-      role: m.role,
-      content: m.text ?? JSON.stringify(m.ui ?? ""),
-    }));
-  claudeHistory.push({
-    role: "user",
-    content: currentUserText,
-  });
-  return claudeHistory;
-};
-var generateId = () => Date.now().toString() + Math.random().toString(36).substr(2, 9);
-var normalizeHeaders = (headers) => {
-  const result = {};
-  for (const [key, value] of Object.entries(headers)) {
-    if (!value) continue;
-    if (key.toLowerCase() === "cookie") {
-      result["x-cookie"] = value;
-    } else {
-      result[key] = value;
-    }
-  }
-  return result;
-};
-var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, onMessage, onToolCall }) => {
-  const messagesEndRef = useRef(null);
-  const [config, setConfig] = useState(defaultConfig);
-  const [anthropic, setAnthropic] = useState();
-  const [messages, setMessages] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [mcpClient, setMcpClient] = useState();
-  const [isConfigLoading, setIsConfigLoading] = useState(true);
-  const [isOpen, setIsOpen] = useState(false);
-  const [headerValidation, setHeaderValidation] = useState(null);
-  const [showAlert, setShowAlert] = useState(true);
-  const { button_background, button_position, button_size, chat_height, chat_width, company_logo, company_name, header_background, initial_open, placeholder, show_typing_indicator, welcome_message } = config.chat_widget_settings;
-  useEffect(() => {
-    onMounted?.();
-  }, []);
-  useEffect(() => {
-    if (!isConfigLoading && mcpClient && anthropic && config) {
-      onReady?.({
-        config,
-      });
-    }
-  }, [isConfigLoading, mcpClient, anthropic, config]);
-  useEffect(() => {
-    const loadConfig = async () => {
-      try {
-        setIsConfigLoading(true);
-        const apiResponse = await fetchChatWidgetSettings(clientId);
-        if (apiResponse.success) {
-          const anthropic2 = new Anthropic({
-            apiKey: apiResponse.data.openai_key,
-            dangerouslyAllowBrowser: true,
-          });
-          const mcpClient2 = new Client({
-            name: "mcp-client-cli",
-            version: "1.0.0",
-          });
-          const transport = new SSEClientTransport(new URL("", apiResponse.data.mcp_url), {
-            eventSourceInit: {
-              fetch: (url, init) => {
-                if (headers) {
-                  const dynamicHeaders = normalizeHeaders(headers);
-                  return fetch(url, {
-                    headers: {
-                      ...(init?.headers ?? {}),
-                      ...dynamicHeaders,
-                    },
-                  });
-                } else {
-                  return fetch(url, {
-                    headers: {
-                      ...(init?.headers ?? {}),
-                    },
-                  });
-                }
-              },
-            },
-          });
-          await mcpClient2.connect(transport);
-          setMcpClient(mcpClient2);
-          setAnthropic(anthropic2);
-          if (headers && apiResponse.data.auth_config) {
-            const validationResult = validateHeaders(headers, apiResponse.data.auth_config, {
-              allowExtra: false,
-              caseSensitive: true,
-            });
-            setHeaderValidation(validationResult);
-          }
-          if (!apiResponse.data.chat_widget_settings) {
-            setConfig({
-              auth_config: apiResponse.data.auth_config,
-              mcp_url: apiResponse.data.mcp_url,
-              openai_key: apiResponse.data.openai_key,
-              chat_widget_settings: {
-                api_source_id: 0,
-                chat_widget_settings_id: 0,
-                created_at: "",
-                updated_at: "",
-                button_background: defaultConfig.chat_widget_settings.button_background,
-                button_position: defaultConfig.chat_widget_settings.button_position,
-                button_size: defaultConfig.chat_widget_settings.button_size,
-                chat_height: defaultConfig.chat_widget_settings.chat_height,
-                chat_width: defaultConfig.chat_widget_settings.chat_width,
-                company_logo: defaultConfig.chat_widget_settings.company_logo,
-                company_name: defaultConfig.chat_widget_settings.company_name,
-                header_background: defaultConfig.chat_widget_settings.header_background,
-                initial_open: defaultConfig.chat_widget_settings.initial_open,
-                placeholder: defaultConfig.chat_widget_settings.placeholder,
-                show_typing_indicator: defaultConfig.chat_widget_settings.show_typing_indicator,
-                welcome_message: defaultConfig.chat_widget_settings.welcome_message,
-              },
-            });
-          } else {
-            setConfig(apiResponse.data);
-          }
-        }
-      } catch (error) {
-        console.error("Failed to load chat widget config:", error);
-      } finally {
-        setIsConfigLoading(false);
-      }
-    };
-    loadConfig();
-  }, []);
-  useEffect(() => {
-    setIsOpen(initial_open);
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-    if (newIsOpen) onOpen?.();
-    else onClose?.();
-  }, [initial_open]);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  if (isConfigLoading || !mcpClient || !anthropic) {
-    return /* @__PURE__ */ jsx("button", {
-      className: `floating-button ${button_position} button-sizes ${button_size}`,
-      style: { background: button_background },
-      children: /* @__PURE__ */ jsx("div", { className: "loading-spinner" }),
-    });
-  }
-  const addMessage = (payload) => {
-    const newMessage = {
-      id: generateId(),
-      text: payload.text,
-      ui: payload.ui,
-      role: payload.role,
-      timestamp: /* @__PURE__ */ new Date(),
-    };
-    onMessage?.(newMessage);
-    setMessages((prev) => [...prev, newMessage]);
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    return newMessage;
-  };
-  const sendMessage = async (message, approval) => {
-    if (!message.trim() || isLoading) return;
-    const newMessage = {
-      id: generateId(),
-      text: message,
-      ui: void 0,
-      role: approval ? "approval" : "user",
-      timestamp: /* @__PURE__ */ new Date(),
-    };
-    setMessages((prev) => [...prev, newMessage]);
-    setIsLoading(true);
-    const toolsResult = await mcpClient.listTools();
-    const tools = toolsResult.tools.map((tool) => ({ name: tool.name, description: tool.description, input_schema: tool.inputSchema }));
-    try {
-      const historyForContext = historyMessages([...messages, newMessage], message);
-      const response = await anthropic.beta.messages.create({
-        model: "claude-sonnet-4-5",
-        betas: ["structured-outputs-2025-11-13"],
-        max_tokens: 5e3,
-        messages: historyForContext,
-        tools,
-        system: [
-          {
-            type: "text",
-            text: GENERATIVE_UI_SYSTEM_PROMPT,
-            cache_control: {
-              type: "ephemeral",
-              ttl: "1h",
-            },
-          },
-        ],
-      });
-      for (const content of response.content) {
-        if (content.type === "tool_use") {
-          const toolCall = await mcpClient.callTool({ name: content.name, arguments: content.input });
-          onToolCall?.({ name: content.name, args: content.input, result: toolCall });
-          const toolMessagesForContext = historyMessages([...messages, newMessage], JSON.stringify(toolCall.structuredContent));
-          const finalResponse = await anthropic.beta.messages.create({
-            model: "claude-sonnet-4-5",
-            max_tokens: 1024,
-            betas: ["structured-outputs-2025-11-13"],
-            messages: toolMessagesForContext,
-            tools,
-            system: [
-              {
-                type: "text",
-                text: GENERATIVE_UI_SYSTEM_PROMPT,
-                cache_control: {
-                  type: "ephemeral",
-                  ttl: "1h",
-                },
-              },
-            ],
-          });
-          const textBlock = finalResponse.content.find((x) => x.type === "text");
-          const { cleanedText, uiData } = extractUIJsonFromText(textBlock?.text ?? "");
-          addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
-        } else if (content.type === "text") {
-          const { cleanedText, uiData } = extractUIJsonFromText(content?.text);
-          addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
-        }
-      }
-      setIsLoading(false);
-    } catch (error) {
-      console.error("Error sending message:", error);
-      addMessage({
-        text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.",
-        role: "assistant",
-      });
-      setIsLoading(false);
-    }
-  };
-  const toggleChat = () => {
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-    if (newIsOpen) onOpen?.();
-    else onClose?.();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      isOpen &&
-        /* @__PURE__ */ jsx("div", {
-          className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`,
-          onClick: toggleChat,
-        }),
-      /* @__PURE__ */ jsx("div", {
-        className: `chat-container ${button_position} ${isOpen ? "is-open" : ""}`,
-        style: { width: chat_width, height: chat_height },
-        children: /* @__PURE__ */ jsxs("div", {
-          className: "chatbot-container",
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              className: "header",
-              style: { background: header_background },
-              children: [
-                /* @__PURE__ */ jsx("div", {
-                  className: "logo-container",
-                  children: company_logo
-                    ? company_logo.startsWith("http") || company_logo.startsWith("data:")
-                      ? /* @__PURE__ */ jsx("img", {
-                          src: company_logo,
-                          alt: "Company Logo",
-                          className: "logo-image",
-                        })
-                      : /* @__PURE__ */ jsx("span", { className: "logo-text", children: company_logo })
-                    : "\u{1F916}",
-                }),
-                /* @__PURE__ */ jsxs("div", {
-                  children: [/* @__PURE__ */ jsx("h3", { className: "company-name", children: company_name }), /* @__PURE__ */ jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })],
-                }),
-              ],
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              className: "messages-container",
-              children: [
-                /* @__PURE__ */ jsx(HeaderAlert, {
-                  headerValidation,
-                  setShowAlert,
-                  showAlert,
-                }),
-                messages.length === 0
-                  ? /* @__PURE__ */ jsxs("div", {
-                      className: "empty-state",
-                      children: [
-                        /* @__PURE__ */ jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
-                        /* @__PURE__ */ jsx("h4", { className: "empty-state-title", children: welcome_message }),
-                        /* @__PURE__ */ jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." }),
-                      ],
-                    })
-                  : /* @__PURE__ */ jsxs(Fragment, {
-                      children: [
-                        messages.map((message) =>
-                          /* @__PURE__ */ jsx(
-                            MessageBubble,
-                            {
-                              message,
-                              onAction: sendMessage,
-                            },
-                            message.id
-                          )
-                        ),
-                        show_typing_indicator && isLoading && /* @__PURE__ */ jsx(TypingDots, {}),
-                      ],
-                    }),
-                /* @__PURE__ */ jsx("div", { ref: messagesEndRef }),
-              ],
-            }),
-            /* @__PURE__ */ jsx(ChatInput, {
-              handleSendMessage: sendMessage,
-              isLoading,
-              placeholder,
-            }),
-          ],
-        }),
-      }),
-      /* @__PURE__ */ jsx("button", {
-        onClick: toggleChat,
-        className: `floating-button ${button_position} button-sizes ${button_size} ${isOpen ? "is-open" : ""}`,
-        style: { background: button_background },
-        "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
-        children: isOpen
-          ? /* @__PURE__ */ jsx("svg", {
-              width: "24",
-              height: "24",
-              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" }),
-            })
-          : /* @__PURE__ */ jsx("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }),
-            }),
-      }),
-    ],
-  });
-};
-
-export { AizekChatBot };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map