aizek-chatbot 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -1,251 +1,19 @@
 'use strict';
 
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var OpenAI = require('openai');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var OpenAI__default = /*#__PURE__*/_interopDefault(OpenAI);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 
-// src/utils/cx.ts
-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",
-  justifyContent: "center",
-  borderRadius: 12,
-  fontWeight: 600,
-  lineHeight: 1,
-  transition: "background-color .2s ease, color .2s ease, border-color .2s ease",
-  outline: "none",
-  cursor: "pointer"
-};
-var sizes = {
-  sm: { height: 36, padding: "0 12px", fontSize: 14 },
-  md: { height: 40, padding: "0 16px", fontSize: 16 },
-  lg: { height: 44, padding: "0 20px", fontSize: 18 }
-};
-var palette = {
-  brand: {
-    primary: "#2563eb",
-    primaryHover: "#1d4ed8"
-  }
-};
-function styleFor(variant) {
-  switch (variant) {
-    case "outline":
-      return {
-        background: "transparent",
-        color: palette.brand.primary,
-        border: `1px solid ${palette.brand.primary}`
-      };
-    case "ghost":
-      return {
-        background: "transparent",
-        color: palette.brand.primary,
-        border: "1px solid transparent"
-      };
-    default:
-      return {
-        background: palette.brand.primary,
-        color: "#fff",
-        border: "1px solid transparent"
-      };
-  }
-}
-var Button = React__namespace.forwardRef(
-  ({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
-    const [hover, setHover] = React__namespace.useState(false);
-    const hoverStyle = variant === "primary" ? { background: hover ? palette.brand.primaryHover : palette.brand.primary } : variant === "outline" ? { borderColor: hover ? palette.brand.primaryHover : palette.brand.primary } : { background: hover ? "rgba(37, 99, 235, 0.08)" : "transparent" };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        className: cx("rui-btn", className),
-        style: { ...base, ...sizes[size], ...styleFor(variant), ...hover ? hoverStyle : {}, ...style },
-        onMouseEnter: (e) => {
-          setHover(true);
-          onMouseEnter?.(e);
-        },
-        onMouseLeave: (e) => {
-          setHover(false);
-          onMouseLeave?.(e);
-        },
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var useChatbot = (options = {}) => {
-  const { mcpUrl, apiKey, config } = options;
-  const client = new OpenAI__default.default({ apiKey, dangerouslyAllowBrowser: true });
-  const [responseId, setResponseId] = React.useState(null);
-  const [messages, setMessages] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const generateId = () => {
-    return Date.now().toString() + Math.random().toString(36).substr(2, 9);
-  };
-  const addMessage = (payload, role) => {
-    const newMessage = {
-      id: generateId(),
-      text: payload.text,
-      ui: payload.ui,
-      role,
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    setMessages((prev) => [...prev, newMessage]);
-    return newMessage;
-  };
-  const extractUiComponents = (raw) => {
-    const regex = /```ui-component([\s\S]*?)```/g;
-    const components = [];
-    let cleaned = raw;
-    let match;
-    let componentIndex = 0;
-    while ((match = regex.exec(raw)) !== null) {
-      const block = match[1].trim();
-      try {
-        const json = JSON.parse(block);
-        if (json.type === "buttons" && json.data && typeof json.data === "object" && !Array.isArray(json.data)) {
-          if (json.data.options && Array.isArray(json.data.options)) {
-            json.data = json.data.options.map((opt) => {
-              if (opt.id && opt.label) {
-                return {
-                  label: opt.label,
-                  value: opt.id,
-                  variant: opt.variant
-                };
-              }
-              return opt;
-            });
-          }
-        }
-        if (json.type === "table" && json.data) {
-          if (Array.isArray(json.data.columns) && json.data.columns.length > 0) {
-            const firstCol = json.data.columns[0];
-            if (typeof firstCol === "string") {
-              json.data.columns = json.data.columns.map(
-                (col, idx) => ({
-                  id: `col-${idx}`,
-                  label: col
-                })
-              );
-            }
-          }
-          if (Array.isArray(json.data.rows) && json.data.rows.length > 0) {
-            const firstRow = json.data.rows[0];
-            if (Array.isArray(firstRow) && typeof firstRow[0] === "string") {
-              json.data.rows = json.data.rows.map((row) => {
-                const rowObj = {};
-                json.data.columns.forEach((col, idx) => {
-                  const colId = typeof col === "string" ? `col-${idx}` : col.id;
-                  const cellValue = row[idx];
-                  if (typeof cellValue === "string" && (cellValue.startsWith("http") || cellValue.startsWith("data:"))) {
-                    rowObj[colId] = {
-                      type: "image",
-                      src: cellValue,
-                      alt: ""
-                    };
-                  } else {
-                    rowObj[colId] = {
-                      type: "text",
-                      value: cellValue || ""
-                    };
-                  }
-                });
-                return rowObj;
-              });
-            }
-          }
-        }
-        if (json.type === "form" && json.data) {
-          if (!json.data.id) {
-            json.data.id = json.id || `form-${componentIndex}`;
-          }
-          if (json.data.fields && Array.isArray(json.data.fields)) {
-            json.data.fields = json.data.fields.map((field) => {
-              if (field.optional !== void 0) {
-                field.required = !field.optional;
-                delete field.optional;
-              }
-              if (!field.type) {
-                field.type = "text";
-              }
-              if (field.options && Array.isArray(field.options)) {
-                const firstOption = field.options[0];
-                if (typeof firstOption === "string") {
-                  field.options = field.options.map((opt) => ({
-                    label: opt,
-                    value: opt
-                  }));
-                }
-              }
-              return field;
-            });
-          }
-        }
-        if (json.id && typeof json.id !== "string") {
-          json.id = String(json.id);
-        }
-        if (!json.id || !json.id.trim()) {
-          json.id = `ui-comp-${componentIndex}-${Date.now()}`;
-        }
-        components.push(json);
-        componentIndex++;
-      } catch (e) {
-        console.error("Invalid ui-component JSON:", e, block);
-      }
-      cleaned = cleaned.replace(match[0], "").trim();
-    }
-    return { text: cleaned, components };
-  };
-  const instructions = `You are Aizek, an AI assistant running in an environment with Model Context Protocol (MCP) tools.
+// src/utils/prompt.ts
+var instructions = `You are Aizek, an AI assistant running in an environment with Model Context Protocol (MCP) tools.
 
 Your top priority is to USE MCP TOOLS whenever they can handle the user's request.
 Do NOT bypass available tools to answer from generic knowledge, web browsing, or other external sources if a suitable MCP tool exists.
@@ -387,33 +155,301 @@ In this order of priority:
 
 Always keep in mind:
 Your core value in this environment is to be an intelligent router and operator for MCP tools, not a generic, unconstrained chatbot.`;
-  const SYSTEM_PROMPT = `
+var SYSTEM_PROMPT = `
 You are a helpful assistant that can generate both natural language responses and UI components.
 
 You MUST:
 - Always respond with normal conversational text.
 - Optionally include one or more UI components inside code blocks with language "ui-component".
 
-When to use components:
+IMPORTANT:
+- Do NOT invent HTML. Only JSON as described.
+- Keep JSON strictly valid.
+- Text response should be outside of code blocks.
+
+STRICT REQUIREMENTS (CRITICAL):
+- All component JSON must STRICTLY MATCH the TypeScript types given below.
+- You MUST NOT create extra fields not defined in the types.
+- You MUST NOT rename keys. Example: using "key" instead of "id" in a form field is INVALID.
+- Only use the exact field names defined in the interfaces below.
+- All JSON must be strictly valid.
+
+-------------------------------------------
+TYPES YOU MUST FOLLOW EXACTLY:
+
+UIField =
+  UITextField | UIImageField | UILinkField | UIBadgeField | UIListField
+
+UITextField:
+{
+  "type": "text",
+  "value": string
+}
+
+UIImageField:
+{
+  "type": "image",
+  "src": string,
+  "alt"?: string
+}
+
+UILinkField:
+{
+  "type": "link",
+  "label": string,
+  "href": string
+}
+
+UIBadgeField:
+{
+  "type": "badge",
+  "label": string,
+  "tone"?: "success" | "warning" | "danger" | "info" | "neutral"
+}
+
+UIListField:
+{
+  "type": "list",
+  "items": UIField[]
+}
+
+-------------------------------------------------
+
+UIFormData:
+{
+  "id": string,
+  "title"?: string,
+  "fields": UIFormField[],
+  "submitLabel"?: string
+}
+
+UIFormField:
+{
+  "id": string,
+  "name": string,
+  "label": string,
+  "placeholder"?: string,
+  "type": "text" | "select" | "number" | "file",
+  "accept"?: string,
+  "required"?: boolean,
+  "validation"?: string,
+  "options"?: { "label": string, "value": string }[],
+  "value"?: string | number,
+  "min"?: number,
+  "max"?: number
+}
+
+-------------------------------------------------
+
+UIButtonData:
+{
+  "label": string,
+  "value": string,
+  "variant"?: "primary" | "secondary" | "danger"
+}
+
+-------------------------------------------------
+
+UITableData:
+{
+  "caption"?: string,
+  "columns": UITableColumn[] | string[],
+  "rows": Array<Record<string, UIField | string>> | string[][]
+}
+
+UITableColumn:
+{
+  "id"?: string,
+  "key"?: string,
+  "label": string,
+  "type"?: "image" | "text" | "badge"
+}
+
+-------------------------------------------------
+
+UICardData:
+{
+  "title"?: string,
+  "description"?: string,
+  "image"?: string,
+  "status"?: string,
+  "subtitle"?: string,
+  "fields"?: UICardField[],
+  "attributes"?: UICardField[],
+  "items"?: UICardItem[],
+  "[key: string]": any
+}
+
+UICardField:
+{
+  "label": string,
+  "value": string
+}
+
+UICardItem:
+{
+  "id"?: string,
+  "title"?: string,
+  "subtitle"?: string,
+  "image"?: string,
+  "label"?: string,
+  "value"?: string
+}
+
+-------------------------------------------------
+
+UIComponent:
+{
+  "type": "form" | "buttons" | "table" | "card",
+  "data": (the relevant data according to type)
+}
+
+-------------------------------------------
+
+RULES FOR WHEN TO USE COMPONENTS:
 - User needs to provide multiple structured values \u2192 generate a FORM
 - User must choose among options \u2192 generate BUTTONS
 - User must see structured data comparison \u2192 generate a TABLE
 - User must see entity details/summary \u2192 generate a CARD
 
-Format for each component (strictly):
+FORMAT FOR EACH COMPONENT:
 
 \`\`\`ui-component
 {
-  "type": "form" | "buttons" | "table" | "card",
-  "data": { ...component-specific fields... }
+  "type": "...",
+  "data": { ... }
 }
 \`\`\`
-
-IMPORTANT:
-- Do NOT invent HTML. Only JSON as described.
-- Keep JSON strictly valid.
-- Text response should be outside of code blocks.
 `;
+
+// src/hooks/use-chatbot.ts
+var useChatbot = (options = {}) => {
+  const { mcpUrl, apiKey, config } = options;
+  const client = new OpenAI__default.default({
+    apiKey,
+    baseURL: "https://api.anthropic.com/v1/",
+    dangerouslyAllowBrowser: true
+  });
+  const [responseId, setResponseId] = react.useState(null);
+  const [messages, setMessages] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const generateId = () => {
+    return Date.now().toString() + Math.random().toString(36).substr(2, 9);
+  };
+  const addMessage = (payload, role) => {
+    const newMessage = {
+      id: generateId(),
+      text: payload.text,
+      ui: payload.ui,
+      role,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, newMessage]);
+    return newMessage;
+  };
+  const extractUiComponents = (raw) => {
+    const regex = /```ui-component([\s\S]*?)```/g;
+    const components = [];
+    let cleaned = raw;
+    let match;
+    let componentIndex = 0;
+    while ((match = regex.exec(raw)) !== null) {
+      const block = match[1].trim();
+      try {
+        const json = JSON.parse(block);
+        if (json.type === "buttons" && json.data && typeof json.data === "object" && !Array.isArray(json.data)) {
+          if (json.data.options && Array.isArray(json.data.options)) {
+            json.data = json.data.options.map((opt) => {
+              if (opt.id && opt.label) {
+                return {
+                  label: opt.label,
+                  value: opt.id,
+                  variant: opt.variant
+                };
+              }
+              return opt;
+            });
+          }
+        }
+        if (json.type === "table" && json.data) {
+          if (Array.isArray(json.data.columns) && json.data.columns.length > 0) {
+            const firstCol = json.data.columns[0];
+            if (typeof firstCol === "string") {
+              json.data.columns = json.data.columns.map(
+                (col, idx) => ({
+                  id: `col-${idx}`,
+                  label: col
+                })
+              );
+            }
+          }
+          if (Array.isArray(json.data.rows) && json.data.rows.length > 0) {
+            const firstRow = json.data.rows[0];
+            if (Array.isArray(firstRow) && typeof firstRow[0] === "string") {
+              json.data.rows = json.data.rows.map((row) => {
+                const rowObj = {};
+                json.data.columns.forEach((col, idx) => {
+                  const colId = typeof col === "string" ? `col-${idx}` : col.id;
+                  const cellValue = row[idx];
+                  if (typeof cellValue === "string" && (cellValue.startsWith("http") || cellValue.startsWith("data:"))) {
+                    rowObj[colId] = {
+                      type: "image",
+                      src: cellValue,
+                      alt: ""
+                    };
+                  } else {
+                    rowObj[colId] = {
+                      type: "text",
+                      value: cellValue || ""
+                    };
+                  }
+                });
+                return rowObj;
+              });
+            }
+          }
+        }
+        if (json.type === "form" && json.data) {
+          if (!json.data.id) {
+            json.data.id = json.id || `form-${componentIndex}`;
+          }
+          if (json.data.fields && Array.isArray(json.data.fields)) {
+            json.data.fields = json.data.fields.map((field) => {
+              if (field.optional !== void 0) {
+                field.required = !field.optional;
+                delete field.optional;
+              }
+              if (!field.type) {
+                field.type = "text";
+              }
+              if (field.options && Array.isArray(field.options)) {
+                const firstOption = field.options[0];
+                if (typeof firstOption === "string") {
+                  field.options = field.options.map((opt) => ({
+                    label: opt,
+                    value: opt
+                  }));
+                }
+              }
+              return field;
+            });
+          }
+        }
+        if (json.id && typeof json.id !== "string") {
+          json.id = String(json.id);
+        }
+        if (!json.id || !json.id.trim()) {
+          json.id = `ui-comp-${componentIndex}-${Date.now()}`;
+        }
+        components.push(json);
+        componentIndex++;
+      } catch (e) {
+        console.error("Invalid ui-component JSON:", e, block);
+      }
+      cleaned = cleaned.replace(match[0], "").trim();
+    }
+    return { text: cleaned, components };
+  };
   const sendMessage = async (message, approval) => {
     if (!message.trim() || isLoading) return;
     if (approval) {
@@ -425,7 +461,7 @@ IMPORTANT:
     try {
       let resp;
       resp = await client.responses.create({
-        model: "gpt-5",
+        model: "claude-sonnet-4-5",
         tools: [
           {
             type: "mcp",
@@ -485,7 +521,7 @@ IMPORTANT:
   };
 };
 
-// src/services/chatWidgetApi.ts
+// src/services/chat-widget-api.ts
 var API_BASE_URL = "https://api-alpha.aizek.ai";
 var fetchChatWidgetSettings = async (clientId) => {
   try {
@@ -530,730 +566,25 @@ var mapApiSettingsToConfig = (apiSettings) => {
   };
 };
 
-// src/styles/messageStyles.ts
-var getMessageBubbleStyles = (isUser, isTyping) => ({
-  maxWidth: "80%",
-  padding: "12px 16px",
-  borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
-  marginBottom: "8px",
-  wordWrap: "break-word",
-  lineHeight: 1.4,
-  fontSize: "14px",
-  position: "relative",
-  ...isUser ? {
-    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    color: "#ffffff",
-    marginLeft: "auto",
-    marginRight: "0"
-  } : {
-    background: "#f8fafc",
-    color: "#334155",
-    border: "1px solid #e2e8f0",
-    marginLeft: "0",
-    marginRight: "auto"
-  }
-});
-var getTimeStyles = (isUser) => ({
-  fontSize: "11px",
-  opacity: 0.7,
-  marginTop: "4px",
-  textAlign: isUser ? "right" : "left"
-});
-var getMarkdownStyles = () => ({
-  lineHeight: 1.6,
-  marginBottom: "6px"
-});
-var getMarkdownElementStyles = (isUser) => `
-    .markdown-content p {
-        margin: 0 0 12px 0;
-        line-height: 1.6;
-    }
-    .markdown-content p:last-child {
-        margin-bottom: 0;
-    }
-    .markdown-content ul {
-        margin: 12px 0 16px 0;
-        padding-left: 0;
-        list-style: none;
-    }
-    .markdown-content li {
-        margin-bottom: 12px;
-        line-height: 1.6;
-        padding: 12px 16px;
-        background: ${isUser ? "rgba(255,255,255,0.1)" : "#ffffff"};
-        border-radius: 12px;
-        border: 1px solid ${isUser ? "rgba(255,255,255,0.2)" : "#e2e8f0"};
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        position: relative;
-        transition: all 0.2s ease;
-    }
-    .markdown-content li:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-    .markdown-content li::before {
-        content: "\u2022";
-        color: ${isUser ? "#ffffff" : "#667eea"};
-        font-weight: bold;
-        font-size: 18px;
-        position: absolute;
-        left: -8px;
-        top: 12px;
-    }
-    .markdown-content li strong {
-        display: block;
-        font-size: 15px;
-        margin-bottom: 4px;
-        color: ${isUser ? "#ffffff" : "#1e293b"};
-    }
-    .markdown-content li em {
-        display: block;
-        font-size: 13px;
-        opacity: 0.8;
-        margin-top: 4px;
-    }
-    .markdown-content strong {
-        font-weight: 600;
-        color: ${isUser ? "#ffffff" : "#1e293b"};
-    }
-    .markdown-content em {
-        font-style: italic;
-        opacity: 0.9;
-    }
-    .markdown-content code {
-        background: ${isUser ? "rgba(255,255,255,0.2)" : "#f1f5f9"};
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-        font-size: 13px;
-    }
-    .markdown-content pre {
-        background: ${isUser ? "rgba(255,255,255,0.1)" : "#f8fafc"};
-        padding: 12px;
-        border-radius: 8px;
-        overflow-x: auto;
-        margin: 8px 0;
-        border: 1px solid ${isUser ? "rgba(255,255,255,0.2)" : "#e2e8f0"};
-    }
-    .markdown-content pre code {
-        background: none;
-        padding: 0;
-    }
-    .markdown-content blockquote {
-        border-left: 3px solid ${isUser ? "rgba(255,255,255,0.5)" : "#cbd5e1"};
-        padding-left: 12px;
-        margin: 8px 0;
-        opacity: 0.8;
-    }
-    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
-        margin: 16px 0 8px 0;
-        font-weight: 600;
-    }
-    .markdown-content h1 {
-        font-size: 18px;
-    }
-    .markdown-content h2 {
-        font-size: 16px;
-    }
-    .markdown-content h3 {
-        font-size: 15px;
-    }
-    .markdown-content table {
-        border-collapse: collapse;
-        width: 100%;
-        margin: 8px 0;
-    }
-    .markdown-content th, .markdown-content td {
-        border: 1px solid ${isUser ? "rgba(255,255,255,0.3)" : "#e2e8f0"};
-        padding: 8px 12px;
-        text-align: left;
-    }
-    .markdown-content th {
-        background: ${isUser ? "rgba(255,255,255,0.1)" : "#f8fafc"};
-        font-weight: 600;
-    }
-    
-    /* Enhanced list styling */
-    .markdown-content li {
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .markdown-content li::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        background: linear-gradient(135deg, ${isUser ? "#ffffff" : "#667eea"}, ${isUser ? "rgba(255,255,255,0.5)" : "#764ba2"});
-        border-radius: 0 2px 2px 0;
-    }
-    
-    /* Product name styling */
-    .markdown-content li strong:first-child {
-        color: ${isUser ? "#ffffff" : "#1e293b"};
-        font-size: 16px;
-        font-weight: 700;
-        display: block;
-        margin-bottom: 8px;
-    }
-    
-    /* Product details styling */
-    .markdown-content li strong:not(:first-child) {
-        color: ${isUser ? "#ffffff" : "#059669"};
-        font-size: 13px;
-        font-weight: 600;
-        margin-right: 8px;
-    }
-    
-    /* Add some spacing between product details */
-    .markdown-content li br + * {
-        margin-top: 4px;
-    }
-    
-    /* Hover effect enhancement */
-    .markdown-content li:hover::after {
-        width: 6px;
-        background: linear-gradient(135deg, ${isUser ? "#ffffff" : "#667eea"}, ${isUser ? "#ffffff" : "#764ba2"});
-    }
-`;
-var getMessageContainerStyles = (isUser) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: isUser ? "flex-end" : "flex-start",
-  width: "100%"
-});
-
-// src/styles/inputStyles.ts
-var getInputContainerStyles = () => ({
-  display: "flex",
-  alignItems: "flex-end",
-  gap: "12px",
-  padding: "16px",
-  background: "#ffffff",
-  borderTop: "1px solid #e2e8f0",
-  borderRadius: "0 0 12px 12px"
-});
-var getTextareaStyles = (isLoading) => ({
-  flex: 1,
-  minHeight: "44px",
-  maxHeight: "120px",
-  padding: "12px 16px",
-  border: "1px solid #e2e8f0",
-  borderRadius: "22px",
-  fontSize: "14px",
-  lineHeight: 1.4,
-  resize: "none",
-  outline: "none",
-  transition: "border-color 0.2s ease, box-shadow 0.2s ease",
-  fontFamily: "inherit",
-  background: "#f8fafc",
-  color: "#334155",
-  ...isLoading ? {
-    opacity: 0.6,
-    cursor: "not-allowed"
-  } : {}
-});
-var getSendButtonStyles = (isLoading, hasMessage) => ({
-  width: "44px",
-  height: "44px",
-  borderRadius: "50%",
-  border: "none",
-  background: isLoading || !hasMessage ? "#e2e8f0" : "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  color: "#ffffff",
-  cursor: isLoading || !hasMessage ? "not-allowed" : "pointer",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  transition: "all 0.2s ease",
-  fontSize: "16px"
-});
-
-// src/styles/headerStyles.ts
-var getHeaderStyles = (headerBackground) => ({
-  padding: "16px 20px",
-  background: headerBackground,
-  color: "#ffffff",
-  display: "flex",
-  alignItems: "center",
-  gap: "12px"
-});
-var getLogoContainerStyles = () => ({
-  width: "40px",
-  height: "40px",
-  borderRadius: "50%",
-  background: "rgba(255, 255, 255, 0.2)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontSize: "18px",
-  overflow: "hidden"
-});
-var getLogoImageStyles = () => ({
-  width: "100%",
-  height: "100%",
-  objectFit: "cover",
-  borderRadius: "50%"
-});
-var getLogoTextStyles = () => ({
-  fontSize: "16px",
-  fontWeight: "bold"
-});
-var getCompanyNameStyles = () => ({
-  margin: 0,
-  fontSize: "16px",
-  fontWeight: 600
-});
-var getStatusTextStyles = () => ({
-  margin: 0,
-  fontSize: "12px",
-  opacity: 0.8
-});
-
-// src/styles/containerStyles.ts
-var getButtonSizes = () => ({
-  sm: { width: "50px", height: "50px", fontSize: "20px" },
-  md: { width: "60px", height: "60px", fontSize: "24px" },
-  lg: { width: "70px", height: "70px", fontSize: "28px" }
-});
-var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isOpen) => {
-  const buttonSizes = getButtonSizes();
-  const buttonSizeStyle = buttonSizes[buttonSize];
-  return {
-    position: "fixed",
-    [buttonPosition === "bottom-left" ? "left" : "right"]: "20px",
-    bottom: "20px",
-    width: buttonSizeStyle.width,
-    height: buttonSizeStyle.height,
-    borderRadius: "50%",
-    background: buttonBackground,
-    border: "none",
-    color: "#ffffff",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: buttonSizeStyle.fontSize,
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-    transition: "all 0.3s ease",
-    zIndex: 1e3,
-    transform: isOpen ? "scale(0.9)" : "scale(1)"
-  };
-};
-var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) => ({
-  position: "fixed",
-  [buttonPosition === "bottom-left" ? "left" : "right"]: "20px",
-  bottom: "90px",
-  width: chatWidth,
-  height: chatHeight,
-  zIndex: 9999999,
-  transform: isOpen ? "translateY(0) scale(1)" : "translateY(20px) scale(0.95)",
-  opacity: isOpen ? 1 : 0,
-  visibility: isOpen ? "visible" : "hidden",
-  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-  transformOrigin: buttonPosition === "bottom-left" ? "bottom left" : "bottom right"
-});
-var getOverlayStyles = (isOpen) => ({
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  background: "rgba(0, 0, 0, 0.1)",
-  zIndex: 998,
-  opacity: isOpen ? 1 : 0,
-  visibility: isOpen ? "visible" : "hidden",
-  transition: "all 0.3s ease"
-});
-var getChatbotContainerStyles = () => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  background: "#ffffff",
-  borderRadius: "12px",
-  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-  border: "1px solid #e2e8f0",
-  overflow: "hidden"
-});
-var getMessagesContainerStyles = () => ({
-  flex: 1,
-  overflowY: "auto",
-  padding: "16px",
-  display: "flex",
-  flexDirection: "column",
-  gap: "4px",
-  background: "#f8fafc"
-});
-var getEmptyStateStyles = () => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "100%",
-  color: "#64748b",
-  textAlign: "center",
-  padding: "40px 20px"
-});
-
-// src/styles/loadingStyles.ts
-var getLoadingSpinnerStyles = () => ({
-  width: "16px",
-  height: "16px",
-  border: "2px solid transparent",
-  borderTop: "2px solid currentColor",
-  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);
-        }
-    }
-`;
-function UIRenderer({ components, onInteraction }) {
-  console.log(components);
-  if (!Array.isArray(components) || components.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-        width: "100%"
-      },
-      children: components.map((comp, idx) => {
-        if (!comp || typeof comp !== "object" || !comp.type) {
-          return null;
-        }
-        const key = typeof comp.id === "string" && comp.id.trim() ? comp.id : `${comp.type}-${idx}`;
-        switch (comp.type) {
-          case "form":
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              FormComponent,
-              {
-                data: comp.data,
-                onSubmit: (values) => onInteraction?.({
-                  type: "formSubmit",
-                  componentId: comp.data.id,
-                  values
-                })
-              },
-              key
-            );
-          case "buttons":
-            if (!comp.data || !Array.isArray(comp.data)) {
-              return null;
-            }
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              ButtonsComponent,
-              {
-                data: comp.data,
-                onClick: (value) => onInteraction?.({ type: "buttonClick", value })
-              },
-              key
-            );
-          case "table":
-            return /* @__PURE__ */ jsxRuntime.jsx(TableComponent, { data: comp.data }, key);
-          case "card":
-            return /* @__PURE__ */ jsxRuntime.jsx(CardComponent, { data: comp.data }, key);
-          default:
-            return null;
-        }
-      })
-    }
-  );
-}
-function FormComponent({
-  data,
-  onSubmit
-}) {
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log(e.currentTarget);
-    const formData = new FormData(e.currentTarget);
-    console.log(formData);
-    const values = {};
-    data.fields.forEach((f) => {
-      values[f.id || f.name] = String(formData.get(f.id || f.name) ?? "");
-    });
-    onSubmit(values);
-  };
-  console.log("formdata", data);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      style: {
-        width: "100%",
-        maxWidth: "500px",
-        border: "1px solid #e0e0e0",
-        borderRadius: "12px",
-        padding: "24px",
-        backgroundColor: "#ffffff",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-      },
-      children: [
-        data.title && /* @__PURE__ */ jsxRuntime.jsx(
-          "h3",
-          {
-            style: {
-              fontWeight: 600,
-              fontSize: "16px",
-              marginBottom: "20px",
-              color: "#1a1a1a",
-              marginTop: 0
-            },
-            children: data.title
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: "20px"
-            },
-            children: data.fields.map((field, fieldIdx) => {
-              const fieldKey = typeof field.id === "string" && field.id.trim() ? field.id : `field-${fieldIdx}`;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "8px"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "label",
-                      {
-                        style: {
-                          fontWeight: 500,
-                          fontSize: "13px",
-                          color: "#374151",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "4px"
-                        },
-                        children: [
-                          field.label,
-                          field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#ef4444", fontSize: "14px" }, children: "*" })
-                        ]
-                      }
-                    ),
-                    field.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
-                      "select",
-                      {
-                        name: field.id || field.name,
-                        required: field.required,
-                        defaultValue: field.value ? String(field.value) : "",
-                        style: {
-                          border: "1px solid #d1d5db",
-                          borderRadius: "8px",
-                          padding: "10px 12px",
-                          fontSize: "13px",
-                          color: "#1a1a1a",
-                          backgroundColor: "#ffffff",
-                          fontFamily: "inherit",
-                          outline: "none",
-                          transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-                          cursor: "pointer"
-                        },
-                        onFocus: (e) => {
-                          e.currentTarget.style.borderColor = "#3b82f6";
-                          e.currentTarget.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.1)";
-                        },
-                        onBlur: (e) => {
-                          e.currentTarget.style.borderColor = "#d1d5db";
-                          e.currentTarget.style.boxShadow = "none";
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Se\xE7iniz" }),
-                          field.options?.map((opt, optIdx) => {
-                            const optKey = typeof opt.value === "string" ? opt.value : `opt-${fieldIdx}-${optIdx}`;
-                            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, optKey);
-                          })
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        type: field.type === "number" ? "number" : "text",
-                        name: field.id || field.name,
-                        required: field.required,
-                        defaultValue: field.value ? String(field.value) : "",
-                        placeholder: field.placeholder || "",
-                        min: field.min,
-                        max: field.max,
-                        style: {
-                          border: "1px solid #d1d5db",
-                          borderRadius: "8px",
-                          padding: "10px 12px",
-                          fontSize: "13px",
-                          color: "#1a1a1a",
-                          backgroundColor: "#ffffff",
-                          fontFamily: "inherit",
-                          outline: "none",
-                          transition: "border-color 0.15s ease, box-shadow 0.15s ease"
-                        },
-                        onFocus: (e) => {
-                          e.currentTarget.style.borderColor = "#3b82f6";
-                          e.currentTarget.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.1)";
-                        },
-                        onBlur: (e) => {
-                          e.currentTarget.style.borderColor = "#d1d5db";
-                          e.currentTarget.style.boxShadow = "none";
-                        }
-                      }
-                    )
-                  ]
-                },
-                fieldKey
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "submit",
-            style: {
-              marginTop: "24px",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: "8px",
-              padding: "12px 24px",
-              fontSize: "13px",
-              fontWeight: 500,
-              backgroundColor: "#3b82f6",
-              color: "#ffffff",
-              border: "none",
-              cursor: "pointer",
-              transition: "background-color 0.15s ease, transform 0.1s ease",
-              fontFamily: "inherit"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "#2563eb";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "#3b82f6";
-            },
-            onMouseDown: (e) => {
-              e.currentTarget.style.transform = "scale(0.98)";
-            },
-            onMouseUp: (e) => {
-              e.currentTarget.style.transform = "scale(1)";
-            },
-            children: data.submitLabel ?? "G\xF6nder"
-          }
-        )
-      ]
-    }
-  );
+// 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 };
 }
 function ButtonsComponent({
   data,
@@ -1262,319 +593,30 @@ function ButtonsComponent({
   if (!Array.isArray(data) || data.length === 0) {
     return null;
   }
-  const getButtonStyles = (variant) => {
-    const baseStyles = {
-      borderRadius: "8px",
-      padding: "10px 20px",
-      fontSize: "13px",
-      fontWeight: 500,
-      border: "1px solid #e0e0e0",
-      backgroundColor: "#ffffff",
-      color: "#374151",
-      cursor: "pointer",
-      transition: "all 0.15s ease",
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-      outline: "none"
-    };
-    if (variant === "primary") {
-      return {
-        ...baseStyles,
-        backgroundColor: "#3b82f6",
-        color: "#ffffff",
-        borderColor: "#3b82f6"
-      };
-    } else if (variant === "secondary") {
-      return {
-        ...baseStyles,
-        backgroundColor: "#f3f4f6",
-        color: "#374151",
-        borderColor: "#d1d5db"
-      };
-    } else if (variant === "danger") {
-      return {
-        ...baseStyles,
-        backgroundColor: "#ef4444",
-        color: "#ffffff",
-        borderColor: "#ef4444"
-      };
-    }
-    return baseStyles;
-  };
-  const getHoverStyles = (variant) => {
-    if (variant === "primary") {
-      return { backgroundColor: "#2563eb", borderColor: "#2563eb" };
-    } else if (variant === "secondary") {
-      return { backgroundColor: "#e5e7eb", borderColor: "#9ca3af" };
-    } else if (variant === "danger") {
-      return { backgroundColor: "#dc2626", borderColor: "#dc2626" };
-    }
-    return { backgroundColor: "#f9fafb", borderColor: "#d1d5db" };
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: "12px",
-        flexWrap: "wrap"
-      },
-      children: data.map((btn, idx) => {
-        if (!btn || typeof btn !== "object") {
-          return null;
-        }
-        const btnValue = typeof btn.value === "string" ? btn.value : typeof btn.value === "number" ? String(btn.value) : btn.value && typeof btn.value === "object" ? JSON.stringify(btn.value) : `btn-value-${idx}`;
-        const btnKey = typeof btn.value === "string" && btn.value.trim() ? btn.value : `btn-${idx}`;
-        const btnLabel = btn.label || `Button ${idx + 1}`;
-        const buttonStyles = getButtonStyles(btn.variant);
-        const hoverStyles = getHoverStyles(btn.variant);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              try {
-                onClick(btnValue);
-              } catch (error) {
-                console.error("Error in button onClick:", error);
-              }
-            },
-            style: buttonStyles,
-            onMouseEnter: (e) => {
-              Object.assign(e.currentTarget.style, hoverStyles);
-            },
-            onMouseLeave: (e) => {
-              Object.assign(e.currentTarget.style, buttonStyles);
-            },
-            onMouseDown: (e) => {
-              e.currentTarget.style.transform = "scale(0.97)";
-            },
-            onMouseUp: (e) => {
-              e.currentTarget.style.transform = "scale(1)";
-            },
-            children: btnLabel
-          },
-          btnKey
-        );
-      })
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "buttons-component", children: data.map((btn, idx) => {
+    if (!btn || typeof btn !== "object") {
+      return null;
     }
-  );
-}
-function TableComponent({ data }) {
-  if (!data.columns || !Array.isArray(data.columns) || data.columns.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        border: "1px solid #e0e0e0",
-        borderRadius: "12px",
-        overflow: "hidden",
-        fontSize: "13px",
-        backgroundColor: "#ffffff",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-      },
-      children: [
-        data.caption && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              padding: "16px 20px",
-              fontWeight: 600,
-              fontSize: "14px",
-              borderBottom: "1px solid #e0e0e0",
-              backgroundColor: "#f8f9fa",
-              color: "#1a1a1a"
-            },
-            children: data.caption
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "table",
-          {
-            style: {
-              width: "100%",
-              borderCollapse: "collapse",
-              minWidth: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("thead", { style: { backgroundColor: "#f8f9fa" }, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: data.columns.map((col, i) => {
-                const colKey = typeof col === "string" ? `col-${i}` : col.key || col.id || `col-${i}`;
-                const colLabel = typeof col === "string" ? col : col.label || "";
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "th",
-                  {
-                    style: {
-                      borderBottom: "2px solid #e0e0e0",
-                      padding: "14px 20px",
-                      textAlign: "left",
-                      fontWeight: 600,
-                      fontSize: "12px",
-                      color: "#4a5568",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.5px",
-                      whiteSpace: "nowrap"
-                    },
-                    children: colLabel
-                  },
-                  colKey
-                );
-              }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.rows && data.rows.length > 0 ? data.rows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-                "tr",
-                {
-                  style: {
-                    backgroundColor: rowIdx % 2 === 0 ? "#ffffff" : "#fafbfc",
-                    transition: "background-color 0.15s ease"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "#f0f4f8";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = rowIdx % 2 === 0 ? "#ffffff" : "#fafbfc";
-                  },
-                  children: data.columns.map((col, colIdx) => {
-                    const colKey = typeof col === "string" ? `col-${colIdx}` : col.key || col.id || `col-${colIdx}`;
-                    const colType = typeof col === "object" ? col.type : void 0;
-                    const cellKey = `cell-${rowIdx}-${colIdx}`;
-                    let cellContent = null;
-                    if (typeof row === "object" && row !== null && !Array.isArray(row)) {
-                      const cellValue = row[colKey];
-                      if (cellValue !== void 0 && cellValue !== null) {
-                        if (typeof cellValue === "object" && "type" in cellValue) {
-                          cellContent = renderField(cellValue);
-                        } else {
-                          const stringValue = String(cellValue);
-                          const isImageUrl = typeof stringValue === "string" && (stringValue.startsWith("http") || stringValue.startsWith("data:") || stringValue.startsWith("/")) && (stringValue.match(
-                            /\.(jpg|jpeg|png|gif|webp|svg)$/i
-                          ) || stringValue.includes("image") || stringValue.includes("avatar"));
-                          if (colType === "image" || !colType && isImageUrl) {
-                            cellContent = /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center"
-                                },
-                                children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "img",
-                                  {
-                                    src: stringValue,
-                                    alt: "",
-                                    style: {
-                                      width: "40px",
-                                      height: "40px",
-                                      borderRadius: "8px",
-                                      objectFit: "cover",
-                                      border: "1px solid #e0e0e0"
-                                    },
-                                    onError: (e) => {
-                                      e.target.style.display = "none";
-                                    }
-                                  }
-                                )
-                              }
-                            );
-                          } else {
-                            cellContent = /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  color: "#2d3748",
-                                  lineHeight: "1.5"
-                                },
-                                children: stringValue
-                              }
-                            );
-                          }
-                        }
-                      }
-                    } else if (Array.isArray(row)) {
-                      const cellValue = row[colIdx];
-                      if (cellValue !== void 0 && cellValue !== null) {
-                        const stringValue = String(cellValue);
-                        const isImageUrl = typeof stringValue === "string" && (stringValue.startsWith("http") || stringValue.startsWith("data:") || stringValue.startsWith("/")) && (stringValue.match(
-                          /\.(jpg|jpeg|png|gif|webp|svg)$/i
-                        ) || stringValue.includes("image") || stringValue.includes("avatar"));
-                        if (colType === "image" || !colType && isImageUrl) {
-                          cellContent = /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              style: { display: "flex", alignItems: "center" },
-                              children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "img",
-                                {
-                                  src: stringValue,
-                                  alt: "",
-                                  style: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "8px",
-                                    objectFit: "cover",
-                                    border: "1px solid #e0e0e0"
-                                  },
-                                  onError: (e) => {
-                                    e.target.style.display = "none";
-                                  }
-                                }
-                              )
-                            }
-                          );
-                        } else {
-                          cellContent = /* @__PURE__ */ jsxRuntime.jsx(
-                            "span",
-                            {
-                              style: {
-                                color: "#2d3748",
-                                lineHeight: "1.5"
-                              },
-                              children: stringValue
-                            }
-                          );
-                        }
-                      }
-                    }
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "td",
-                      {
-                        style: {
-                          borderBottom: "1px solid #e8e8e8",
-                          padding: "16px 20px",
-                          fontSize: "13px",
-                          verticalAlign: "middle"
-                        },
-                        children: cellContent || /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            style: { color: "#a0a0a0", fontStyle: "italic" },
-                            children: "\u2014"
-                          }
-                        )
-                      },
-                      cellKey
-                    );
-                  })
-                },
-                `row-${rowIdx}`
-              )) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
-                {
-                  colSpan: data.columns.length,
-                  style: {
-                    padding: "40px",
-                    textAlign: "center",
-                    color: "#9ca3af",
-                    fontSize: "13px"
-                  },
-                  children: "Veri bulunamad\u0131"
-                }
-              ) }) })
-            ]
+    const btnValue = typeof btn.value === "string" ? btn.value : typeof btn.value === "number" ? String(btn.value) : btn.value && typeof btn.value === "object" ? JSON.stringify(btn.value) : `btn-value-${idx}`;
+    const btnKey = typeof btn.value === "string" && btn.value.trim() ? btn.value : `btn-${idx}`;
+    const btnLabel = btn.label || `Button ${idx + 1}`;
+    const variantClass = btn.variant || "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          try {
+            onClick(btnValue);
+          } catch (error) {
+            console.error("Error in button onClick:", error);
           }
-        ) })
-      ]
-    }
-  );
+        },
+        className: `button-component ${variantClass}`,
+        children: btnLabel
+      },
+      btnKey
+    );
+  }) });
 }
 function CardComponent({ data }) {
   if (data.title) {
@@ -1584,290 +626,165 @@ function CardComponent({ data }) {
     const hasStatus = data.status && typeof data.status === "string";
     const hasSubtitle = data.subtitle && typeof data.subtitle === "string";
     const displayFields = hasAttributes ? data.attributes : hasFields ? data.fields : [];
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          border: "1px solid #e5e7eb",
-          borderRadius: "16px",
-          padding: "16px",
-          backgroundColor: "#ffffff",
-          boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
-          overflow: "hidden",
-          marginBottom: "12px"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
-          hasImage && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: data.image,
-              alt: data.title || "Card image",
-              style: {
-                width: "64px",
-                height: "64px",
-                borderRadius: "8px",
-                objectFit: "cover",
-                flexShrink: 0
-              },
-              onError: (e) => {
-                e.target.style.display = "none";
-              }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-component", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-content", children: [
+      hasImage && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: data.image,
+          alt: data.title || "Card image",
+          className: "card-image",
+          onError: (e) => {
+            e.target.style.display = "none";
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-info", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "card-title", children: data.title }),
+        hasStatus && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-status", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "card-status-label", children: "Durum:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "card-status-value", children: data.status })
+        ] }),
+        hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card-subtitle", children: data.subtitle }),
+        displayFields && displayFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-fields", children: displayFields.map((field, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "card-field-label", children: [
+            field.label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "card-field-value", children: field.value })
+        ] }, i)) }),
+        data.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card-description", children: data.description })
+      ] })
+    ] }) });
+  }
+  if (!data.items || !Array.isArray(data.items) || data.items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-list", children: [
+    data.title && !data.items.some((item) => item.title) && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "card-list-title", children: data.title }),
+    data.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card-list-description", children: data.description }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-grid", children: data.items.map((item, i) => {
+      const itemKey = item.id || `card-item-${i}`;
+      const hasImage = item.image && typeof item.image === "string";
+      const hasTitle = item.title && typeof item.title === "string";
+      const hasSubtitle = item.subtitle && typeof item.subtitle === "string";
+      const isLegacyFormat = item.label && item.value;
+      if (isLegacyFormat && !hasTitle) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-item", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-item-legacy", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "card-item-legacy-label", children: item.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "card-item-legacy-value", children: item.value })
+        ] }) }, itemKey);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-item", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-item-content", children: [
+        hasImage && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: item.image,
+            alt: item.title || `Card ${i + 1}`,
+            className: "card-item-image",
+            onError: (e) => {
+              e.target.style.display = "none";
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "h4",
-              {
-                style: {
-                  fontWeight: 600,
-                  fontSize: "14px",
-                  marginBottom: "8px",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                },
-                children: data.title
-              }
-            ),
-            hasStatus && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-item-info", children: [
+          hasTitle && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "card-item-title", children: item.title }),
+          hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "card-item-subtitle", children: item.subtitle })
+        ] })
+      ] }) }, itemKey);
+    }) })
+  ] });
+}
+function FormComponent({
+  data,
+  onSubmit
+}) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const values = {};
+    data.fields.forEach((f) => {
+      const fieldName = f.id || f.name || `field-${data.fields.indexOf(f)}`;
+      values[fieldName] = String(formData.get(fieldName) ?? "");
+      if (f.type === "file") {
+        const file = formData.get(fieldName);
+        values[fieldName] = JSON.stringify({
+          name: file?.name,
+          size: file?.size,
+          type: file?.type
+        });
+      }
+    });
+    console.log(values);
+    onSubmit(values);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: "form-component",
+      children: [
+        data.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "form-title", children: data.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-fields", children: data.fields.map((field, fieldIdx) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+              field.label,
+              field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" })
+            ] }),
+            field.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
               {
-                style: {
-                  display: "flex",
-                  gap: "8px",
-                  fontSize: "12px",
-                  marginBottom: "4px"
-                },
+                name: field.id || field.name,
+                required: field.required,
+                defaultValue: field.value ? String(field.value) : "",
+                className: "form-select",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280", fontWeight: 500 }, children: "Durum:" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151" }, children: data.status })
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Se\xE7iniz" }),
+                  field.options?.map((opt, optIdx) => {
+                    const optKey = typeof opt.value === "string" ? opt.value : `opt-${fieldIdx}-${optIdx}`;
+                    return /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, optKey);
+                  })
                 ]
               }
-            ),
-            hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                style: {
-                  color: "#6b7280",
-                  fontSize: "12px",
-                  marginBottom: "4px",
-                  margin: 0
-                },
-                children: data.subtitle
-              }
-            ),
-            displayFields && displayFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+            ) : field.type === "file" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                style: { display: "flex", flexDirection: "column", gap: "4px" },
-                children: displayFields.map((field, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: { display: "flex", gap: "8px", fontSize: "12px" },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#6b7280", fontWeight: 500 }, children: [
-                        field.label,
-                        ":"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151" }, children: field.value })
-                    ]
-                  },
-                  i
-                ))
+                type: "file",
+                name: field.id || field.name,
+                required: field.required,
+                className: "form-input",
+                accept: field.accept || "*"
               }
-            ),
-            data.description && /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                style: {
-                  color: "#6b7280",
-                  fontSize: "12px",
-                  marginTop: "8px",
-                  margin: 0
-                },
-                children: data.description
+                type: field.type === "number" ? "number" : "text",
+                name: field.id || field.name,
+                required: field.required,
+                defaultValue: field.value ? String(field.value) : "",
+                placeholder: field.placeholder || "",
+                min: field.min,
+                max: field.max,
+                className: "form-input"
               }
             )
-          ] })
-        ] })
-      }
-    );
-  }
-  if (!data.items || !Array.isArray(data.items) || data.items.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%" }, children: [
-    data.title && !data.items.some((item) => item.title) && /* @__PURE__ */ jsxRuntime.jsx(
-      "h3",
-      {
-        style: {
-          fontWeight: 600,
-          marginBottom: "12px",
-          fontSize: "14px",
-          color: "#1a1a1a",
-          marginTop: 0
-        },
-        children: data.title
-      }
-    ),
-    data.description && /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        style: {
-          color: "#6b7280",
-          marginBottom: "12px",
-          fontSize: "12px",
-          marginTop: 0
-        },
-        children: data.description
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-          gap: "12px"
-        },
-        children: data.items.map((item, i) => {
-          const itemKey = item.id || `card-item-${i}`;
-          const hasImage = item.image && typeof item.image === "string";
-          const hasTitle = item.title && typeof item.title === "string";
-          const hasSubtitle = item.subtitle && typeof item.subtitle === "string";
-          const isLegacyFormat = item.label && item.value;
-          if (isLegacyFormat && !hasTitle) {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  border: "1px solid #e0e0e0",
-                  borderRadius: "12px",
-                  padding: "16px",
-                  backgroundColor: "#ffffff",
-                  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
-                  fontSize: "12px"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      gap: "8px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("dt", { style: { color: "#6b7280", margin: 0 }, children: item.label }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "dd",
-                        {
-                          style: {
-                            fontWeight: 500,
-                            color: "#1a1a1a",
-                            margin: 0
-                          },
-                          children: item.value
-                        }
-                      )
-                    ]
-                  }
-                )
-              },
-              itemKey
-            );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                border: "1px solid #e0e0e0",
-                borderRadius: "12px",
-                padding: "16px",
-                backgroundColor: "#ffffff",
-                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
-                hasImage && /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: item.image,
-                    alt: item.title || `Card ${i + 1}`,
-                    style: {
-                      width: "64px",
-                      height: "64px",
-                      borderRadius: "8px",
-                      objectFit: "cover",
-                      flexShrink: 0
-                    },
-                    onError: (e) => {
-                      e.target.style.display = "none";
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      minWidth: 0
-                    },
-                    children: [
-                      hasTitle && /* @__PURE__ */ jsxRuntime.jsx(
-                        "h4",
-                        {
-                          style: {
-                            fontWeight: 600,
-                            fontSize: "14px",
-                            marginBottom: "4px",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            color: "#1a1a1a",
-                            marginTop: 0
-                          },
-                          children: item.title
-                        }
-                      ),
-                      hasSubtitle && /* @__PURE__ */ jsxRuntime.jsx(
-                        "p",
-                        {
-                          style: {
-                            color: "#6b7280",
-                            fontSize: "12px",
-                            margin: 0
-                          },
-                          children: item.subtitle
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            },
-            itemKey
-          );
-        })
-      }
-    )
-  ] });
+          ] }, fieldIdx);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "form-submit-button", children: data.submitLabel ?? "G\xF6nder" })
+      ]
+    }
+  );
 }
 function renderField(field) {
   switch (field.type) {
     case "text":
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.value });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "field-text", children: field.value });
     case "image":
       return /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
           src: field.src,
           alt: field.alt ?? "",
-          style: {
-            width: 24,
-            height: 24,
-            borderRadius: "999px",
-            objectFit: "cover"
-          }
+          className: "field-image"
         }
       );
     case "link":
@@ -1877,38 +794,143 @@ function renderField(field) {
           href: field.href,
           target: "_blank",
           rel: "noreferrer",
-          style: { textDecoration: "underline" },
+          className: "field-link",
           children: field.label
         }
       );
     case "badge":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            padding: "2px 6px",
-            borderRadius: 999,
-            fontSize: 10,
-            fontWeight: 500,
-            backgroundColor: field.tone === "success" ? "#e0fce5" : field.tone === "warning" ? "#fff7d6" : field.tone === "danger" ? "#ffe4e4" : "#f2f2f2",
-            color: field.tone === "success" ? "#1a7f36" : field.tone === "warning" ? "#8a6a00" : field.tone === "danger" ? "#b42318" : "#333"
-          },
-          children: field.label
-        }
-      );
+      const toneClass = field.tone || "neutral";
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `field-badge ${toneClass}`, children: field.label });
     case "list":
-      return /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: 16 }, children: field.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderField(item) }, i)) });
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "field-list", children: field.items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderField(item) }, i)) });
     default:
       return null;
   }
 }
+function TableComponent({ data }) {
+  if (!data.columns || !Array.isArray(data.columns) || data.columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "table-component", children: [
+    data.caption && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-caption", children: data.caption }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "table", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "table-header", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: data.columns.map((col, i) => {
+        const colKey = typeof col === "string" ? `col-${i}` : col.key || col.id || `col-${i}`;
+        const colLabel = typeof col === "string" ? col : col.label || "";
+        return /* @__PURE__ */ jsxRuntime.jsx("th", { className: "table-th", children: colLabel }, colKey);
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "table-tbody", children: data.rows && data.rows.length > 0 ? data.rows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: data.columns.map((col, colIdx) => {
+        const colKey = typeof col === "string" ? `col-${colIdx}` : col.key || col.id || `col-${colIdx}`;
+        const colType = typeof col === "object" ? col.type : void 0;
+        const cellKey = `cell-${rowIdx}-${colIdx}`;
+        let cellContent = null;
+        if (typeof row === "object" && row !== null && !Array.isArray(row)) {
+          const cellValue = row[colKey];
+          if (cellValue !== void 0 && cellValue !== null) {
+            if (typeof cellValue === "object" && "type" in cellValue) {
+              cellContent = renderField(cellValue);
+            } else {
+              const stringValue = String(cellValue);
+              const isImageUrl = typeof stringValue === "string" && (stringValue.startsWith("http") || stringValue.startsWith("data:") || stringValue.startsWith("/")) && (stringValue.match(
+                /\.(jpg|jpeg|png|gif|webp|svg)$/i
+              ) || stringValue.includes("image") || stringValue.includes("avatar"));
+              if (colType === "image" || !colType && isImageUrl) {
+                cellContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-cell-image", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: stringValue,
+                    alt: "",
+                    className: "table-image",
+                    onError: (e) => {
+                      e.target.style.display = "none";
+                    }
+                  }
+                ) });
+              } else {
+                cellContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "table-cell-text", children: stringValue });
+              }
+            }
+          }
+        } else if (Array.isArray(row)) {
+          const cellValue = row[colIdx];
+          if (cellValue !== void 0 && cellValue !== null) {
+            const stringValue = String(cellValue);
+            const isImageUrl = typeof stringValue === "string" && (stringValue.startsWith("http") || stringValue.startsWith("data:") || stringValue.startsWith("/")) && (stringValue.match(
+              /\.(jpg|jpeg|png|gif|webp|svg)$/i
+            ) || stringValue.includes("image") || stringValue.includes("avatar"));
+            if (colType === "image" || !colType && isImageUrl) {
+              cellContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-cell-image", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: stringValue,
+                  alt: "",
+                  className: "table-image",
+                  onError: (e) => {
+                    e.target.style.display = "none";
+                  }
+                }
+              ) });
+            } else {
+              cellContent = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "table-cell-text", children: stringValue });
+            }
+          }
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "table-td", children: cellContent || /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2014" }) }, cellKey);
+      }) }, `row-${rowIdx}`)) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: data.columns.length, className: "table-empty", children: "Veri bulunamad\u0131" }) }) })
+    ] }) })
+  ] });
+}
+function GenerativeUI({ components, onInteraction }) {
+  console.log(components);
+  if (!Array.isArray(components) || components.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-renderer", children: components.map((comp, idx) => {
+    if (!comp || typeof comp !== "object" || !comp.type) {
+      return null;
+    }
+    const key = typeof comp.id === "string" && comp.id.trim() ? comp.id : `${comp.type}-${idx}`;
+    switch (comp.type) {
+      case "form":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FormComponent,
+          {
+            data: comp.data,
+            onSubmit: (values) => onInteraction?.({
+              type: "formSubmit",
+              componentId: comp.data.id,
+              values
+            })
+          },
+          key
+        );
+      case "buttons":
+        if (!comp.data || !Array.isArray(comp.data)) {
+          return null;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonsComponent,
+          {
+            data: comp.data,
+            onClick: (value) => onInteraction?.({ type: "buttonClick", value })
+          },
+          key
+        );
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsx(TableComponent, { data: comp.data }, key);
+      case "card":
+        return /* @__PURE__ */ jsxRuntime.jsx(CardComponent, { data: comp.data }, key);
+      default:
+        return null;
+    }
+  }) });
+}
 var AizekChatBot = ({
   clientId,
   headers
 }) => {
   const defaultConfig = {
-    welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
+    welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirimmmmm?",
     buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
     placeholder: "Mesaj\u0131n\u0131z\u0131 yaz\u0131n...",
     buttonPosition: "bottom-left",
@@ -1921,10 +943,10 @@ var AizekChatBot = ({
     companyLogo: void 0,
     companyName: "AI Asistan"
   };
-  const [config, setConfig] = React.useState(defaultConfig);
-  const [isConfigLoading, setIsConfigLoading] = React.useState(true);
-  const [finalMcpUrl, setFinalMcpUrl] = React.useState("");
-  const [apiKey, setApiKey] = React.useState("");
+  const [config, setConfig] = react.useState(defaultConfig);
+  const [isConfigLoading, setIsConfigLoading] = react.useState(true);
+  const [finalMcpUrl, setFinalMcpUrl] = react.useState("");
+  const [apiKey, setApiKey] = react.useState("");
   const {
     welcomeMessage,
     buttonBackground,
@@ -1939,10 +961,10 @@ var AizekChatBot = ({
     companyLogo,
     companyName
   } = config;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [headerValidation, setHeaderValidation] = React.useState(null);
-  const [showAlert, setShowAlert] = React.useState(true);
-  React.useEffect(() => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [headerValidation, setHeaderValidation] = react.useState(null);
+  const [showAlert, setShowAlert] = react.useState(true);
+  react.useEffect(() => {
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
@@ -1988,59 +1010,42 @@ var AizekChatBot = ({
     const newIsOpen = !isOpen;
     setIsOpen(newIsOpen);
   };
-  React.useEffect(() => {
+  react.useEffect(() => {
     setIsOpen(initialOpen);
   }, [initialOpen]);
-  const messagesEndRef = React.useRef(null);
-  React.useEffect(() => {
+  const messagesEndRef = react.useRef(null);
+  react.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const MessageBubble = ({ message, onAction }) => {
     const isUser = message.role === "user";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessageContainerStyles(isUser), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: getMarkdownElementStyles(isUser) }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `message-container ${isUser ? "user" : "assistant"}`, children: [
       isUser && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getMessageBubbleStyles(isUser), children: message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { style: getMarkdownStyles(), children: message.text }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `message-bubble ${isUser ? "user" : "assistant"}`, children: message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-content", children: message.text }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `message-time ${isUser ? "user" : "assistant"}`, children: message.timestamp.toLocaleTimeString("tr-TR", {
           hour: "2-digit",
           minute: "2-digit"
         }) })
       ] }),
       !isUser && message.role !== "approval" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: getMessageBubbleStyles(isUser, message.isTyping ?? false),
-            children: message.isTyping ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  marginLeft: message.text ? "8px" : "0"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {})
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], children: message.text }) }),
-              message.ui && /* @__PURE__ */ jsxRuntime.jsx(
-                UIRenderer,
-                {
-                  components: message.ui,
-                  onInteraction: (event) => {
-                    console.log(event);
-                    if (event.type === "buttonClick" && typeof event.value === "string") {
-                      onAction(event.value, true);
-                    } else if (event.type === "formSubmit") {
-                      onAction(JSON.stringify(event.values), true);
-                    }
-                  }
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `message-bubble ${isUser ? "user" : "assistant"}`, children: message.isTyping ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-typing-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], children: message.text }) }),
+          message.ui && /* @__PURE__ */ jsxRuntime.jsx(
+            GenerativeUI,
+            {
+              components: message.ui,
+              onInteraction: (event) => {
+                console.log(event);
+                if (event.type === "buttonClick" && typeof event.value === "string") {
+                  onAction(event.value, true);
+                } else if (event.type === "formSubmit") {
+                  onAction(JSON.stringify(event.values), true);
                 }
-              )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `message-time ${isUser ? "user" : "assistant"}`, children: message.timestamp.toLocaleTimeString("tr-TR", {
           hour: "2-digit",
           minute: "2-digit"
         }) })
@@ -2048,8 +1053,8 @@ var AizekChatBot = ({
     ] });
   };
   const TypingDots = () => {
-    const [dots, setDots] = React.useState("");
-    React.useEffect(() => {
+    const [dots, setDots] = react.useState("");
+    react.useEffect(() => {
       const interval = setInterval(() => {
         setDots((prev) => {
           if (prev === "...") return "";
@@ -2075,136 +1080,48 @@ var AizekChatBot = ({
       }
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: getAlertAnimationStyles() }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getAlertContainerStyles(alertType), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getAlertIconContainerStyles(), children: getAlertIcon() }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getAlertContentStyles(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { style: getAlertTitleStyles(), children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Eksik Header'lar:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: missingKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: "0",
-                    top: "2px",
-                    fontWeight: "bold"
-                  },
-                  children: "\u2022"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Bo\u015F De\u011Ferli Header'lar:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: "0",
-                    top: "2px",
-                    fontWeight: "bold"
-                  },
-                  children: "\u2022"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "code",
-                {
-                  style: {
-                    background: "rgba(255, 255, 255, 0.2)",
-                    padding: "2px 6px",
-                    borderRadius: "4px",
-                    fontFamily: "monospace",
-                    fontSize: "12px"
-                  },
-                  children: key
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    marginLeft: "6px",
-                    fontSize: "11px",
-                    opacity: 0.9
-                  },
-                  children: "(de\u011Fer bo\u015F olamaz)"
-                }
-              )
-            ] }, index)) })
-          ] }),
-          extraKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Fazla Header'lar:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: extraKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: "0",
-                    top: "2px",
-                    fontWeight: "bold"
-                  },
-                  children: "\u2022"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "code",
-                {
-                  style: {
-                    background: "rgba(255, 255, 255, 0.2)",
-                    padding: "2px 6px",
-                    borderRadius: "4px",
-                    fontFamily: "monospace",
-                    fontSize: "12px"
-                  },
-                  children: key
-                }
-              )
-            ] }, index)) })
-          ] })
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `alert-container ${alertType}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-icon-container", children: getAlertIcon() }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "alert-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "alert-title", children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Eksik Header'lar:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "alert-list", children: missingKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "alert-list-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsxRuntime.jsx("code", { children: key })
+          ] }, index)) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) })
-          }
-        )
-      ] })
-    ] });
+        emptyValueKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Bo\u015F De\u011Ferli Header'lar:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "alert-list", children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "alert-list-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsxRuntime.jsx("code", { children: key }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(de\u011Fer bo\u015F olamaz)" })
+          ] }, index)) })
+        ] }),
+        extraKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Fazla Header'lar:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "alert-list", children: extraKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "alert-list-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsxRuntime.jsx("code", { children: key })
+          ] }, index)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setShowAlert(false),
+          className: "alert-close-button",
+          "aria-label": "Uyar\u0131y\u0131 kapat",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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] = React.useState("");
-    const textareaRef = React.useRef(null);
+    const [message, setMessage] = react.useState("");
+    const textareaRef = react.useRef(null);
     const handleSubmit = (e) => {
       e.preventDefault();
       if (message.trim() && !isLoading) {
@@ -2227,7 +1144,7 @@ var AizekChatBot = ({
       textarea.style.height = "auto";
       textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: getInputContainerStyles(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "input-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -2237,7 +1154,7 @@ var AizekChatBot = ({
           onKeyDown: handleKeyDown,
           placeholder,
           disabled: isLoading,
-          style: getTextareaStyles(isLoading)
+          className: "textarea"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2245,124 +1162,80 @@ var AizekChatBot = ({
         {
           type: "submit",
           disabled: isLoading || !message.trim(),
-          style: getSendButtonStyles(isLoading, !!message.trim()),
-          onMouseEnter: (e) => {
-            if (!isLoading && message.trim()) {
-              e.currentTarget.style.transform = "scale(1.05)";
-            }
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.transform = "scale(1)";
-          },
+          className: "send-button",
           children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
         }
       )
     ] });
   };
   const LoadingSpinner = () => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" });
   };
   if (isConfigLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      "button",
       {
-        style: getFloatingButtonStyles(
-          buttonPosition,
-          buttonSize,
-          buttonBackground,
-          false
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() })
+        className: `floating-button ${buttonPosition} button-sizes ${buttonSize}`,
+        style: { background: buttonBackground },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" })
       }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: getOverlayStyles(isOpen),
-        onClick: toggleChat,
-        className: "floating-chat-overlay"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: getChatContainerStyles(
-          buttonPosition,
-          chatWidth,
-          chatHeight,
-          isOpen
-        ),
-        className: "floating-chat-container",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getChatbotContainerStyles(), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getHeaderStyles(headerBackground), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: companyLogo,
-                alt: "Company Logo",
-                style: getLogoImageStyles()
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessagesContainerStyles(), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HeaderValidationAlert, {}),
-            messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getEmptyStateStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "14px", opacity: 0.8 }, children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
-            ] }) : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-              MessageBubble,
-              {
-                message,
-                onAction: handleSendMessage
-              },
-              message.id
-            )),
-            showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              MessageBubble,
-              {
-                message: {
-                  id: `typing-${messages.length}`,
-                  text: "",
-                  role: "assistant",
-                  timestamp: /* @__PURE__ */ new Date(),
-                  isTyping: true
-                },
-                onAction: handleSendMessage
-              },
-              `typing-${messages.length}`
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {})
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `chat-container ${buttonPosition} ${isOpen ? "is-open" : ""}`, style: { width: chatWidth, height: chatHeight }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatbot-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header", style: { background: headerBackground }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo-container", children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: companyLogo,
+            alt: "Company Logo",
+            className: "logo-image"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "logo-text", children: companyLogo }) : "\u{1F916}" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "company-name", children: companyName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
         ] })
-      }
-    ),
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "messages-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HeaderValidationAlert, {}),
+        messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "empty-state-title", children: welcomeMessage }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
+        ] }) : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+          MessageBubble,
+          {
+            message,
+            onAction: handleSendMessage
+          },
+          message.id
+        )),
+        showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          MessageBubble,
+          {
+            message: {
+              id: `typing-${messages.length}`,
+              text: "",
+              role: "assistant",
+              timestamp: /* @__PURE__ */ new Date(),
+              isTyping: true
+            },
+            onAction: handleSendMessage
+          },
+          `typing-${messages.length}`
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {})
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: toggleChat,
-        style: getFloatingButtonStyles(
-          buttonPosition,
-          buttonSize,
-          buttonBackground,
-          isOpen
-        ),
-        onMouseEnter: (e) => {
-          e.currentTarget.style.transform = isOpen ? "scale(0.85)" : "scale(1.1)";
-          e.currentTarget.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.25)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.transform = isOpen ? "scale(0.9)" : "scale(1)";
-          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
-        },
-        className: "floating-chat-button",
+        className: `floating-button ${buttonPosition} button-sizes ${buttonSize} ${isOpen ? "is-open" : ""}`,
+        style: { background: buttonBackground },
         "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
         children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) })
       }
@@ -2371,7 +1244,5 @@ var AizekChatBot = ({
 };
 
 exports.AizekChatBot = AizekChatBot;
-exports.Button = Button;
-exports.useChatbot = useChatbot;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map