aizek-chatbot 1.0.13 → 1.0.15

package/dist/index.mjs

@@ -1,518 +1,11 @@
-import { useState, useEffect, useRef } from 'react';
-import OpenAI from 'openai';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import "./index.css"
-
-// 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.
-
-==================================================
-1. GENERAL BEHAVIOR
-==================================================
-
-- Default language: reply in the same language as the user (Turkish/English).
-- Be concise and task-focused. Avoid small talk, philosophy, or meta-chat unless the user explicitly asks.
-- Do not invent capabilities or tools that are not actually defined in the MCP tool list.
-- If a tool call fails or returns an error, explain briefly and either:
-  - try again with a corrected call, or
-  - ask the user for the minimal extra info required.
-
-==================================================
-2. MCP TOOL PRIORITY RULES
-==================================================
-
-ALWAYS prefer MCP tools over any other strategy WHEN:
-
-- The user asks for information that matches a tool's domain (weather, products, etc.).
-- The user asks to perform an action (create/update/delete something) that an MCP tool can perform.
-
-Only if NO provided MCP tool is relevant may you fall back to:
-1) other tools such as web/browsing, or
-2) your own internal knowledge.
-
-When deciding whether a tool is relevant:
-- Read the tool name, description, and parameters.
-- If it is even moderately related to what the user wants, you SHOULD try using it.
-- Do NOT choose external (e.g., MGM, random APIs) sources when a matching MCP tool exists.
-
-If multiple tools could work:
-- Choose the single BEST-FIT tool first.
-- If the task clearly requires multiple tools (e.g., get weather then log it), you may call them sequentially.
-
-==================================================
-3. ACTION TOOLS VS. DRAFTS (IKAS MCP, PRODUCT CREATION)
-==================================================
-
-Some MCP tools can PERFORM REAL ACTIONS (e.g., create a product in an e-commerce system via ikas MCP).
-
-Critical rule:
-- If the user's intent is to PERFORM an action, you MUST call the appropriate tool.
-- Do NOT just "simulate" the action or write a draft object.
-- Do NOT stop at: "Burada \u015F\xF6yle bir \xFCr\xFCn olu\u015Fturabilirim..." and then not call the tool.
-- The goal is that the side effect actually happens through the tool.
-
-Examples (Turkish / ikas):
-
-1) User: 
-   "\u0130kas'ta yeni bir \xFCr\xFCn olu\u015Ftur: 
-    isim: Siyah T-Shirt, 
-    fiyat: 299 TL, 
-    stok: 50, 
-    kategori: Ti\u015F\xF6rtler."
-
-   \u2192 You MUST:
-     - Map these fields to the ikas product-creation tool schema.
-     - CALL the ikas MCP tool to actually create the product.
-     - Then answer with something like:
-       "\xDCr\xFCn ba\u015Far\u0131yla olu\u015Fturuldu. ID: <tool_output_id>, ad: Siyah T-Shirt, fiyat: 299 TL, stok: 50."
-
-   \u2192 You MUST NOT:
-     - Only respond with a JSON draft or description like:
-       "\u015E\xF6yle bir taslak \xFCr\xFCn olu\u015Fturabilirsin: {...}" 
-       without calling the tool.
-
-2) If the tool requires fields that the user didn't provide (e.g. currency code, SKU):
-   - Ask ONLY the minimal clarifying question needed.
-   - Or, if the field is safely inferrable by convention (e.g. default currency for a given store), use the default.
-
-3) If the tool response indicates "draft" vs. "published" status:
-   - Respect the user's explicit intention.
-   - If the user says "taslak olarak kaydet", then request draft=true.
-   - If the user says "direkt yay\u0131na al" or clearly wants the product live, then request published/active status.
-   - Do NOT downgrade a clear "publish" intent into just a draft.
-
-==================================================
-4. INTERPRETING USER INTENT
-==================================================
-
-- Treat verbs like "olu\u015Ftur", "yarat", "ekle", "sil", "g\xFCncelle", "publish et", "yay\u0131na al"
-  as strong indicators that an ACTION tool call is expected, not just text output.
-
-- Treat questions like "nas\u0131l yap\u0131l\u0131r?", "bana g\xF6ster", "\xF6rnek ver", "JSON tasla\u011F\u0131 olu\u015Ftur"
-  as more educational; then you may provide drafts/examples without executing tools,
-  UNLESS the user explicitly says they want the real action too.
-
-Examples:
-
-- "\u0130kas'ta \xFCr\xFCn olu\u015Fturmay\u0131 bana JSON \xF6rne\u011Fiyle anlat\u0131r m\u0131s\u0131n?"
-  \u2192 Explain the schema, show a draft, you may skip real tool call unless they also say "ve bunu benim i\xE7in \u015Fimdi olu\u015Ftur."
-
-- "Benim ad\u0131ma bu \xFCr\xFCn\xFC ger\xE7ekten olu\u015Ftur ve yay\u0131na al."
-  \u2192 This MUST trigger the actual ikas MCP product-creation tool call.
-
-==================================================
-5. IRRELEVANT TOPICS & SCOPE
-==================================================
-
-- Aizek's primary job in this environment is:
-  - Using MCP tools effectively (weather, e-commerce, etc.).
-  - Providing concise, helpful answers strictly related to the user's requests.
-
-- Avoid:
-  - Long off-topic chats.
-  - Unnecessary explanations of MCP internals or tool schemas unless the user specifically asks.
-  - Using random non-MCP APIs or external services when an MCP tool already exists in that domain.
-
-==================================================
-6. TOOL-CALLING STYLE
-==================================================
-
-When you decide to call a tool:
-- Use the exact tool name and parameter schema given by the environment.
-- Provide all required parameters; do NOT omit fields the schema marks as required.
-- Prefer a single well-structured call over multiple fragmented ones whenever possible.
-
-Once you receive tool results:
-- Summarize them clearly for the user in natural language.
-- If the user requested an action (e.g., create product, update something), confirm:
-  - What was done,
-  - Any IDs or references returned,
-  - Any next steps they might need.
-
-==================================================
-7. FALLBACK LOGIC
-==================================================
-
-In this order of priority:
-
-1) If an MCP tool matches the user's request \u2192 USE IT.
-2) If no tool fits, and the user just needs information \u2192 answer from your own knowledge or other allowed tools.
-3) If the user asks something completely outside your domain/scope \u2192 
-   - Briefly explain that it is outside Aizek's scope or that you have limited info,
-   - Offer to help only if you can still add value without contradicting previous rules.
-
-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.`;
-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".
-
-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:
-
-\`\`\`ui-component
-{
-  "type": "...",
-  "data": { ... }
-}
-\`\`\`
-`;
-
-// src/hooks/use-chatbot.ts
-var useChatbot = (options = {}) => {
-  const { mcpUrl, apiKey, config } = options;
-  const client = new OpenAI({
-    apiKey,
-    baseURL: "https://api.anthropic.com/v1/",
-    dangerouslyAllowBrowser: true
-  });
-  const [responseId, setResponseId] = useState(null);
-  const [messages, setMessages] = useState([]);
-  const [isLoading, setIsLoading] = 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) {
-      addMessage({ text: message }, "approval");
-    } else {
-      addMessage({ text: message }, "user");
-    }
-    setIsLoading(true);
-    try {
-      let resp;
-      resp = await client.responses.create({
-        model: "claude-sonnet-4-5",
-        tools: [
-          {
-            type: "mcp",
-            server_label: "aizek-mcp",
-            server_url: mcpUrl,
-            require_approval: "never",
-            headers: options.headers || {}
-          }
-        ],
-        input: [
-          { role: "system", content: SYSTEM_PROMPT },
-          { role: "user", content: message }
-        ],
-        previous_response_id: responseId || void 0,
-        instructions
-      });
-      console.log("Response:", resp);
-      setResponseId(resp.id);
-      let rawText = "";
-      const output = resp.output;
-      if (Array.isArray(output) && output.length > 0) {
-        const assistantMsg = output.find((o) => o.role === "assistant") ?? output[0];
-        if (assistantMsg && Array.isArray(assistantMsg.content)) {
-          const textItem = assistantMsg.content.find(
-            (c) => c.type === "output_text"
-          );
-          if (textItem?.text?.value) {
-            rawText = textItem.text.value;
-          } else if (textItem?.text?.annotations?.[0]?.text) {
-            rawText = textItem.text.annotations[0].text;
-          }
-        }
-      }
-      if (!rawText && resp.output_text) {
-        rawText = resp.output_text;
-      }
-      if (!rawText) {
-        rawText = `"${message}" mesaj\u0131n\u0131z\u0131 ald\u0131m. Size nas\u0131l yard\u0131mc\u0131 olabilirim?`;
-      }
-      const { text, components } = extractUiComponents(rawText);
-      addMessage({ text, ui: components }, "assistant");
-      setIsLoading(false);
-    } catch (error) {
-      console.error("Error sending message:", error);
-      addMessage(
-        { text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin." },
-        "assistant"
-      );
-      setIsLoading(false);
-    }
-  };
-  return {
-    messages,
-    isLoading,
-    sendMessage,
-    addMessage
-  };
-};
+import { useRef, useState, useEffect } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import Anthropic from "@anthropic-ai/sdk";
+import { Client } from "@modelcontextprotocol/sdk/client";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import "./index.css";
 
 // src/services/chat-widget-api.ts
 var API_BASE_URL = "https://api-alpha.aizek.ai";
@@ -521,8 +14,8 @@ var fetchChatWidgetSettings = async (clientId) => {
     const response = await fetch(`${API_BASE_URL}/ChatWidgetSettings/GetByClientId?client_id=${clientId}`, {
       method: "GET",
       headers: {
-        "Content-Type": "application/json"
-      }
+        "Content-Type": "application/json",
+      },
     });
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
@@ -534,35 +27,11 @@ var fetchChatWidgetSettings = async (clientId) => {
     throw error;
   }
 };
-var mapApiSettingsToConfig = (apiSettings) => {
-  if (!apiSettings) {
-    return null;
-  }
-  const buttonSizeMap = {
-    "small": "sm",
-    "medium": "md",
-    "large": "lg"
-  };
-  return {
-    welcomeMessage: apiSettings.welcome_message,
-    buttonBackground: apiSettings.button_background,
-    placeholder: apiSettings.placeholder,
-    buttonPosition: apiSettings.button_position,
-    buttonSize: buttonSizeMap[apiSettings.button_size] || "md",
-    chatWidth: apiSettings.chat_width,
-    chatHeight: apiSettings.chat_height,
-    showTypingIndicator: apiSettings.show_typing_indicator,
-    initialOpen: apiSettings.initial_open,
-    headerBackground: apiSettings.header_background,
-    companyLogo: apiSettings.company_logo || void 0,
-    companyName: apiSettings.company_name
-  };
-};
 
 // src/utils/cx.ts
 function validateHeaders(headers, authConfig, opts = {}) {
   const { caseSensitive = false, allowExtra = false } = opts;
-  const normalize = (s) => caseSensitive ? s : s.toLowerCase();
+  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);
@@ -579,663 +48,831 @@ function validateHeaders(headers, authConfig, opts = {}) {
   const isValid = hasAllRequired && !hasExtraKeys && emptyValueKeys.length === 0;
   return { isValid, missingKeys, extraKeys, emptyValueKeys };
 }
-function ButtonsComponent({
-  data,
-  onClick
-}) {
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: "buttons-component", 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 variantClass = btn.variant || "";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => {
-          try {
-            onClick(btnValue);
-          } catch (error) {
-            console.error("Error in button onClick:", error);
-          }
-        },
-        className: `button-component ${variantClass}`,
-        children: btnLabel
-      },
-      btnKey
-    );
-  }) });
+
+// src/store/static.ts
+var defaultConfig = {
+  auth_config: {
+    header: "",
+  },
+  chat_widget_settings: {
+    welcome_message: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
+    button_background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    placeholder: "Mesaj\u0131n\u0131z\u0131 yaz\u0131n...",
+    button_position: "bottom-left",
+    button_size: "medium",
+    chat_width: "400px",
+    chat_height: "600px",
+    show_typing_indicator: true,
+    initial_open: true,
+    header_background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    company_logo: "",
+    company_name: "Aizek",
+    api_source_id: 0,
+    chat_widget_settings_id: 0,
+    created_at: "",
+    updated_at: "",
+  },
+  mcp_url: "",
+  openai_key: "",
+};
+var GENERATIVE_UI_SYSTEM_PROMPT = `
+You can generate interactive UI components as part of your responses.
+When users need to:
+- Provide multiple pieces of information \u2192 Generate a FORM
+- Make a choice between options \u2192 Generate BUTTONS
+- View structured data \u2192 Generate a TABLE or LIST
+- See entity details \u2192 Generate a CARD
+
+For each component type, include JSON in this format:
+
+\`\`\`ui-component
+{
+  "version": "1.0",
+  "title": string,
+  "description"?: string,
+  "components": Array<{
+    id: string,
+    type:
+      | "text"
+      | "input"
+      | "button"
+      | "select"
+      | "card"
+      | "list"
+      | "image"
+      | "link"
+      | "table"
+      | "form",
+    label?: string,
+    fieldType?: "text" | "number" | "date" | "textarea",
+    requiredField?: boolean,
+    placeholder?: string,
+    options?: string[],
+    columns?: string[],
+    rows?: string[][],
+    url?: string,
+    fieldName?: string
+    buttonType?: click | submit
+  }>
 }
-function CardComponent({ data }) {
-  if (data.title) {
-    const hasImage = data.image && typeof data.image === "string";
-    const hasFields = data.fields && Array.isArray(data.fields) && data.fields.length > 0;
-    const hasAttributes = data.attributes && Array.isArray(data.attributes) && data.attributes.length > 0;
-    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__ */ jsx("div", { className: "card-component", children: /* @__PURE__ */ jsxs("div", { className: "card-content", children: [
-      hasImage && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: data.image,
-          alt: data.title || "Card image",
-          className: "card-image",
-          onError: (e) => {
-            e.target.style.display = "none";
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "card-info", children: [
-        /* @__PURE__ */ jsx("h4", { className: "card-title", children: data.title }),
-        hasStatus && /* @__PURE__ */ jsxs("div", { className: "card-status", children: [
-          /* @__PURE__ */ jsx("span", { className: "card-status-label", children: "Durum:" }),
-          /* @__PURE__ */ jsx("span", { className: "card-status-value", children: data.status })
-        ] }),
-        hasSubtitle && /* @__PURE__ */ jsx("p", { className: "card-subtitle", children: data.subtitle }),
-        displayFields && displayFields.length > 0 && /* @__PURE__ */ jsx("div", { className: "card-fields", children: displayFields.map((field, i) => /* @__PURE__ */ jsxs("div", { className: "card-field", children: [
-          /* @__PURE__ */ jsxs("span", { className: "card-field-label", children: [
-            field.label,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "card-field-value", children: field.value })
-        ] }, i)) }),
-        data.description && /* @__PURE__ */ jsx("p", { className: "card-description", children: data.description })
-      ] })
-    ] }) });
-  }
-  if (!data.items || !Array.isArray(data.items) || data.items.length === 0) {
+\`\`\`
+
+
+
+
+
+Always provide both a conversational text response AND appropriate UI components.
+
+`;
+var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
+  if (!headerValidation || !showAlert) return null;
+  const { isValid, missingKeys, extraKeys, emptyValueKeys } = headerValidation;
+  if (isValid && missingKeys.length === 0 && extraKeys.length === 0 && emptyValueKeys.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "card-list", children: [
-    data.title && !data.items.some((item) => item.title) && /* @__PURE__ */ jsx("h3", { className: "card-list-title", children: data.title }),
-    data.description && /* @__PURE__ */ jsx("p", { className: "card-list-description", children: data.description }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: "card-item", children: /* @__PURE__ */ jsxs("div", { className: "card-item-legacy", children: [
-          /* @__PURE__ */ jsx("dt", { className: "card-item-legacy-label", children: item.label }),
-          /* @__PURE__ */ jsx("dd", { className: "card-item-legacy-value", children: item.value })
-        ] }) }, itemKey);
-      }
-      return /* @__PURE__ */ jsx("div", { className: "card-item", children: /* @__PURE__ */ jsxs("div", { className: "card-item-content", children: [
-        hasImage && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: item.image,
-            alt: item.title || `Card ${i + 1}`,
-            className: "card-item-image",
-            onError: (e) => {
-              e.target.style.display = "none";
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "card-item-info", children: [
-          hasTitle && /* @__PURE__ */ jsx("h4", { className: "card-item-title", children: item.title }),
-          hasSubtitle && /* @__PURE__ */ jsx("p", { className: "card-item-subtitle", children: item.subtitle })
-        ] })
-      ] }) }, itemKey);
-    }) })
-  ] });
-}
-function FormComponent({
-  data,
-  onSubmit
-}) {
+  const hasErrors = missingKeys.length > 0 || emptyValueKeys.length > 0;
+  const hasWarnings = extraKeys.length > 0;
+  const alertType = hasErrors ? "error" : "warning";
+  const getAlertIcon = () => {
+    if (hasErrors) {
+      return /* @__PURE__ */ jsx("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }),
+      });
+    }
+    return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
+  };
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: `alert-container ${alertType}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "alert-icon-container", children: getAlertIcon() }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "alert-content",
+          children: [
+            /* @__PURE__ */ jsx("h4", { className: "alert-title", children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
+            /* @__PURE__ */ jsx("p", {
+              className: "alert-message",
+              children:
+                hasErrors && hasWarnings
+                  ? "Header yap\u0131land\u0131rman\u0131zda hatalar ve uyar\u0131lar bulundu."
+                  : hasErrors
+                  ? "Header yap\u0131land\u0131rman\u0131zda hatalar bulundu."
+                  : "Header yap\u0131land\u0131rman\u0131zda fazla anahtarlar bulundu.",
+            }),
+            missingKeys.length > 0 &&
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("strong", { children: "Eksik Header'lar:" }),
+                  /* @__PURE__ */ jsx("ul", {
+                    className: "alert-list",
+                    children: missingKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key })] }, index)),
+                  }),
+                ],
+              }),
+            emptyValueKeys.length > 0 &&
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("strong", { children: "Bo\u015F De\u011Ferli Header'lar:" }),
+                  /* @__PURE__ */ jsx("ul", {
+                    className: "alert-list",
+                    children: emptyValueKeys.map((key, index) =>
+                      /* @__PURE__ */ jsxs(
+                        "li",
+                        { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key }), /* @__PURE__ */ jsx("span", { children: "(de\u011Fer bo\u015F olamaz)" })] },
+                        index
+                      )
+                    ),
+                  }),
+                ],
+              }),
+            extraKeys.length > 0 &&
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("strong", { children: "Fazla Header'lar:" }),
+                  /* @__PURE__ */ jsx("ul", {
+                    className: "alert-list",
+                    children: extraKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [/* @__PURE__ */ jsx("span", { children: "\u2022" }), /* @__PURE__ */ jsx("code", { children: key })] }, index)),
+                  }),
+                ],
+              }),
+          ],
+        }),
+        /* @__PURE__ */ jsx("button", {
+          onClick: () => setShowAlert(false),
+          className: "alert-close-button",
+          "aria-label": "Uyar\u0131y\u0131 kapat",
+          children: /* @__PURE__ */ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
+          }),
+        }),
+      ],
+    }),
+  });
+};
+var LoadingSpinner = () => {
+  return /* @__PURE__ */ jsx("div", { className: "loading-spinner" });
+};
+var ChatInput = ({ isLoading, placeholder, handleSendMessage }) => {
+  const [message, setMessage] = useState("");
+  const textareaRef = useRef(null);
   const handleSubmit = (e) => {
     e.preventDefault();
-    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
-        });
+    if (message.trim() && !isLoading) {
+      handleSendMessage(message.trim());
+      setMessage("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
       }
-    });
-    console.log(values);
-    onSubmit(values);
+    }
   };
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "form-component",
-      children: [
-        data.title && /* @__PURE__ */ jsx("h3", { className: "form-title", children: data.title }),
-        /* @__PURE__ */ jsx("div", { className: "form-fields", children: data.fields.map((field, fieldIdx) => {
-          return /* @__PURE__ */ jsxs("div", { className: "form-field", children: [
-            /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
-              field.label,
-              field.required && /* @__PURE__ */ jsx("span", { children: "*" })
-            ] }),
-            field.type === "select" ? /* @__PURE__ */ jsxs(
-              "select",
-              {
-                name: field.id || field.name,
-                required: field.required,
-                defaultValue: field.value ? String(field.value) : "",
-                className: "form-select",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Se\xE7iniz" }),
-                  field.options?.map((opt, optIdx) => {
-                    const optKey = typeof opt.value === "string" ? opt.value : `opt-${fieldIdx}-${optIdx}`;
-                    return /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, optKey);
-                  })
-                ]
-              }
-            ) : field.type === "file" ? /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                name: field.id || field.name,
-                required: field.required,
-                className: "form-input",
-                accept: field.accept || "*"
-              }
-            ) : /* @__PURE__ */ 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,
-                className: "form-input"
-              }
-            )
-          ] }, fieldIdx);
-        }) }),
-        /* @__PURE__ */ jsx("button", { type: "submit", className: "form-submit-button", children: data.submitLabel ?? "G\xF6nder" })
-      ]
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
     }
-  );
-}
-function renderField(field) {
-  switch (field.type) {
-    case "text":
-      return /* @__PURE__ */ jsx("span", { className: "field-text", children: field.value });
-    case "image":
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: field.src,
-          alt: field.alt ?? "",
-          className: "field-image"
-        }
-      );
-    case "link":
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: field.href,
-          target: "_blank",
-          rel: "noreferrer",
-          className: "field-link",
-          children: field.label
-        }
-      );
-    case "badge":
-      const toneClass = field.tone || "neutral";
-      return /* @__PURE__ */ jsx("span", { className: `field-badge ${toneClass}`, children: field.label });
-    case "list":
-      return /* @__PURE__ */ jsx("ul", { className: "field-list", children: field.items.map((item, i) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "table-component", children: [
-    data.caption && /* @__PURE__ */ jsx("div", { className: "table-caption", children: data.caption }),
-    /* @__PURE__ */ jsx("div", { className: "table-wrapper", children: /* @__PURE__ */ jsxs("table", { className: "table", children: [
-      /* @__PURE__ */ jsx("thead", { className: "table-header", children: /* @__PURE__ */ 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__ */ jsx("th", { className: "table-th", children: colLabel }, colKey);
-      }) }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "table-tbody", children: data.rows && data.rows.length > 0 ? data.rows.map((row, rowIdx) => /* @__PURE__ */ 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__ */ jsx("div", { className: "table-cell-image", children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: stringValue,
-                    alt: "",
-                    className: "table-image",
-                    onError: (e) => {
-                      e.target.style.display = "none";
-                    }
-                  }
-                ) });
-              } else {
-                cellContent = /* @__PURE__ */ 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__ */ jsx("div", { className: "table-cell-image", children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: stringValue,
-                  alt: "",
-                  className: "table-image",
-                  onError: (e) => {
-                    e.target.style.display = "none";
-                  }
-                }
-              ) });
-            } else {
-              cellContent = /* @__PURE__ */ jsx("span", { className: "table-cell-text", children: stringValue });
-            }
+  };
+  const handleInputChange = (e) => {
+    setMessage(e.target.value);
+    const textarea = e.target;
+    textarea.style.height = "auto";
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+  };
+  return /* @__PURE__ */ jsxs("form", {
+    onSubmit: handleSubmit,
+    className: "input-container",
+    children: [
+      /* @__PURE__ */ jsx("textarea", {
+        ref: textareaRef,
+        value: message,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled: isLoading,
+        className: "textarea",
+      }),
+      /* @__PURE__ */ jsx("button", {
+        type: "submit",
+        disabled: isLoading || !message.trim(),
+        className: "send-button",
+        children: isLoading
+          ? /* @__PURE__ */ jsx(LoadingSpinner, {})
+          : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }),
+      }),
+    ],
+  });
+};
+var GenericUIRenderer = ({ uiData, onInteraction }) => {
+  const containerRef = useRef(null);
+  if (!uiData || !uiData.components) return null;
+  const collectFormValues = () => {
+    if (!containerRef.current) return {};
+    const formData = {};
+    const inputs = containerRef.current.querySelectorAll("input, textarea, select");
+    inputs.forEach((element) => {
+      const name = element.getAttribute("name");
+      if (name) {
+        if (element instanceof HTMLInputElement && element.type === "checkbox") {
+          formData[name] = element.checked;
+        } else if (element instanceof HTMLInputElement && element.type === "radio") {
+          if (element.checked) {
+            formData[name] = element.value;
           }
+        } else {
+          formData[name] = element.value;
         }
-        return /* @__PURE__ */ jsx("td", { className: "table-td", children: cellContent || /* @__PURE__ */ jsx("span", { children: "\u2014" }) }, cellKey);
-      }) }, `row-${rowIdx}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ 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__ */ 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}`;
+      }
+    });
+    return formData;
+  };
+  const renderComponent = (comp) => {
     switch (comp.type) {
-      case "form":
+      case "text":
+        return /* @__PURE__ */ jsx("p", { className: "gen-ui-text", children: comp.value ?? comp.label }, comp.id);
+      case "input":
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "gen-ui-input-wrapper",
+            children: [
+              comp.label && /* @__PURE__ */ jsx("label", { className: "gen-ui-input-label", children: comp.label }),
+              comp.fieldType === "textarea"
+                ? /* @__PURE__ */ jsx("textarea", {
+                    name: comp.id,
+                    placeholder: comp.placeholder,
+                    className: "gen-ui-textarea",
+                  })
+                : /* @__PURE__ */ jsx("input", {
+                    name: comp.id,
+                    type: comp.fieldType || "text",
+                    placeholder: comp.placeholder,
+                    className: "gen-ui-input",
+                  }),
+            ],
+          },
+          comp.id
+        );
+      case "select":
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "gen-ui-select-wrapper",
+            children: [
+              comp.label && /* @__PURE__ */ jsx("label", { className: "gen-ui-select-label", children: comp.label }),
+              /* @__PURE__ */ jsx("select", { name: comp.id, className: "gen-ui-select", children: comp.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt)) }),
+            ],
+          },
+          comp.id
+        );
+      case "button":
         return /* @__PURE__ */ jsx(
-          FormComponent,
+          "button",
           {
-            data: comp.data,
-            onSubmit: (values) => onInteraction?.({
-              type: "formSubmit",
-              componentId: comp.data.id,
-              values
-            })
+            onClick: () => {
+              const formValues = collectFormValues();
+              onInteraction({
+                action: comp.label,
+                buttonId: comp.buttonType,
+                formData: formValues,
+              });
+            },
+            className: "gen-ui-button",
+            children: comp.label,
           },
-          key
+          comp.id
         );
-      case "buttons":
-        if (!comp.data || !Array.isArray(comp.data)) {
-          return null;
-        }
+      case "card":
+        return /* @__PURE__ */ jsxs(
+          "div",
+          { className: "gen-ui-card", children: [comp.label && /* @__PURE__ */ jsx("h2", { className: "gen-ui-card-title", children: comp.label }), comp.value && /* @__PURE__ */ jsx("p", { className: "gen-ui-card-content", children: comp.value })] },
+          comp.id
+        );
+      case "list":
+        return /* @__PURE__ */ jsx("ul", { className: "gen-ui-list", children: comp.items?.map((item) => /* @__PURE__ */ jsx("li", { className: "gen-ui-list-item", children: item.label ?? String(item.value ?? "") }, item.id)) }, comp.id);
+      case "image":
         return /* @__PURE__ */ jsx(
-          ButtonsComponent,
+          "img",
           {
-            data: comp.data,
-            onClick: (value) => onInteraction?.({ type: "buttonClick", value })
+            src: comp.url,
+            alt: comp.label || "",
+            className: "gen-ui-image",
           },
-          key
+          comp.id
+        );
+      case "link":
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: comp.url,
+            className: "gen-ui-link",
+            children: comp.label || comp.url,
+          },
+          comp.id
         );
       case "table":
-        return /* @__PURE__ */ jsx(TableComponent, { data: comp.data }, key);
-      case "card":
-        return /* @__PURE__ */ jsx(CardComponent, { data: comp.data }, key);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "gen-ui-table-wrapper",
+            children: /* @__PURE__ */ jsxs("table", {
+              className: "gen-ui-table",
+              children: [
+                comp.columns &&
+                  /* @__PURE__ */ jsx("thead", { className: "gen-ui-table-header", children: /* @__PURE__ */ jsx("tr", { children: comp.columns.map((col) => /* @__PURE__ */ jsx("th", { className: "gen-ui-table-th", children: col }, col)) }) }),
+                comp.rows &&
+                  /* @__PURE__ */ jsx("tbody", {
+                    className: "gen-ui-table-body",
+                    children: comp.rows.map((row, ridx) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cidx) => /* @__PURE__ */ jsx("td", { className: "gen-ui-table-td", children: cell }, cidx)) }, ridx)),
+                  }),
+              ],
+            }),
+          },
+          comp.id
+        );
+      case "form":
+        return /* @__PURE__ */ jsx("form", { className: "gen-ui-form", children: comp.items?.map((field) => renderComponent(field)) }, comp.id);
       default:
         return null;
     }
-  }) });
-}
-var AizekChatBot = ({
-  clientId,
-  headers
-}) => {
-  const defaultConfig = {
-    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",
-    buttonSize: "md",
-    chatWidth: "400px",
-    chatHeight: "600px",
-    showTypingIndicator: true,
-    initialOpen: true,
-    headerBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-    companyLogo: void 0,
-    companyName: "AI Asistan"
   };
+  return /* @__PURE__ */ jsxs("div", {
+    className: "generative-ui-container",
+    ref: containerRef,
+    children: [
+      (uiData.title || uiData.description) &&
+        /* @__PURE__ */ jsxs("div", {
+          className: "generative-ui-header",
+          children: [uiData.title && /* @__PURE__ */ jsx("h1", { className: "generative-ui-title", children: uiData.title }), uiData.description && /* @__PURE__ */ jsx("p", { className: "generative-ui-description", children: uiData.description })],
+        }),
+      uiData.components.map((comp) => renderComponent(comp)),
+    ],
+  });
+};
+var MessageBubble = ({ message, onAction }) => {
+  console.log("MESSAGE", message);
+  const isUser = message.role === "user";
+  const approval = message.role === "approval";
+  if (approval) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: `message-container ${isUser ? "user" : "assistant"}`,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: `message-bubble ${isUser ? "user" : "assistant"}`,
+        children: isUser
+          ? message.text && /* @__PURE__ */ jsx("div", { className: "markdown-content", children: message.text })
+          : /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                message.text && /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.text }) }),
+                message.ui &&
+                  /* @__PURE__ */ jsx(GenericUIRenderer, {
+                    uiData: message.ui,
+                    onInteraction: (event) => {
+                      console.log("event", event);
+                      if (event.buttonId === "submit") {
+                        onAction(JSON.stringify(event.formData), true);
+                      } else {
+                        onAction(event.action, true);
+                      }
+                    },
+                  }),
+              ],
+            }),
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: `message-time ${isUser ? "user" : "assistant"}`,
+        children: message.timestamp.toLocaleTimeString("tr-TR", {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+      }),
+    ],
+  });
+};
+var TypingDots = () => {
+  const [dots, setDots] = useState("");
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDots((prev) => {
+        if (prev === "...") return "";
+        return prev + ".";
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsx("div", {
+    className: "message-container assistant",
+    children: /* @__PURE__ */ jsx("div", { className: "message-bubble assistant", children: /* @__PURE__ */ jsx("div", { className: "message-typing-indicator", children: /* @__PURE__ */ jsx("span", { children: dots }) }) }),
+  });
+};
+
+// src/utils/chatbot.ts
+var extractUIJsonFromText = (text) => {
+  const regex = /```ui-component([\s\S]*?)```/g;
+  let cleaned = text;
+  let match;
+  let uiData = null;
+  while ((match = regex.exec(text)) !== null) {
+    const block = match[1].trim();
+    try {
+      const parsed = JSON.parse(block);
+      if (parsed && parsed.components && Array.isArray(parsed.components)) {
+        parsed.components = parsed.components.map((comp, index) => {
+          if (!comp.id || typeof comp.id !== "string" || !comp.id.trim()) {
+            comp.id = `ui-comp-${index}-${Date.now()}`;
+          }
+          if (comp.type === "button") {
+            if (!comp.buttonType) {
+              comp.buttonType = "click";
+            }
+          }
+          if (comp.type === "input") {
+            if (!comp.fieldType) {
+              comp.fieldType = "text";
+            }
+          }
+          if (comp.type === "select") {
+            if (comp.options && Array.isArray(comp.options)) {
+              const firstOption = comp.options[0];
+              if (typeof firstOption === "object" && firstOption !== null) {
+                if ("label" in firstOption || "value" in firstOption) {
+                  comp.options = comp.options.map((opt) => opt.label || opt.value || String(opt));
+                }
+              }
+            }
+          }
+          if (comp.type === "table") {
+            if (comp.columns && Array.isArray(comp.columns)) {
+              const firstCol = comp.columns[0];
+              if (typeof firstCol === "object" && firstCol !== null) {
+                comp.columns = comp.columns.map((col) => col.label || col.id || String(col));
+              }
+            }
+            if (comp.rows && Array.isArray(comp.rows)) {
+              const firstRow = comp.rows[0];
+              if (typeof firstRow === "object" && !Array.isArray(firstRow)) {
+                comp.rows = comp.rows.map((row) => {
+                  if (Array.isArray(row)) return row;
+                  return Object.values(row).map((val) => {
+                    if (typeof val === "object" && val !== null) {
+                      if (val.type === "image" && val.src) return val.src;
+                      if (val.value !== void 0) return String(val.value);
+                    }
+                    return String(val || "");
+                  });
+                });
+              }
+            }
+          }
+          if (comp.type === "form" && comp.items && Array.isArray(comp.items)) {
+            comp.items = comp.items.map((field, fieldIndex) => {
+              if (!field.id || !field.id.trim()) {
+                field.id = `field-${fieldIndex}-${Date.now()}`;
+              }
+              if (field.optional !== void 0) {
+                field.requiredField = !field.optional;
+                delete field.optional;
+              }
+              if (field.required !== void 0) {
+                field.requiredField = field.required;
+                delete field.required;
+              }
+              if (field.type === "input" && !field.fieldType) {
+                field.fieldType = "text";
+              }
+              if (field.type === "select" && field.options && Array.isArray(field.options)) {
+                const firstOpt = field.options[0];
+                if (typeof firstOpt === "object" && firstOpt !== null) {
+                  field.options = field.options.map((opt) => opt.label || opt.value || String(opt));
+                }
+              }
+              return field;
+            });
+          }
+          if (comp.type === "list" && comp.items && Array.isArray(comp.items)) {
+            comp.items = comp.items.map((item, itemIndex) => {
+              if (typeof item === "string") {
+                return {
+                  id: `list-item-${itemIndex}-${Date.now()}`,
+                  type: "text",
+                  value: item,
+                  label: item,
+                };
+              }
+              if (!item.id || !item.id.trim()) {
+                item.id = `list-item-${itemIndex}-${Date.now()}`;
+              }
+              return item;
+            });
+          }
+          return comp;
+        });
+        uiData = parsed;
+      }
+      cleaned = cleaned.replace(match[0], "").trim();
+      break;
+    } catch (e) {
+      console.error("Invalid ui-component JSON:", e, block);
+    }
+  }
+  return {
+    cleanedText: cleaned,
+    uiData,
+  };
+};
+var generateId = () => Date.now().toString() + Math.random().toString(36).substr(2, 9);
+var normalizeHeaders = (headers) => {
+  const result = {};
+  for (const [key, value] of Object.entries(headers)) {
+    if (!value) continue;
+    if (key.toLowerCase() === "cookie") {
+      result["x-cookie"] = value;
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+};
+var AizekChatBot = ({ clientId, headers }) => {
+  const messagesEndRef = useRef(null);
   const [config, setConfig] = useState(defaultConfig);
+  const [anthropic, setAnthropic] = useState();
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [mcpClient, setMcpClient] = useState();
   const [isConfigLoading, setIsConfigLoading] = useState(true);
-  const [finalMcpUrl, setFinalMcpUrl] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const {
-    welcomeMessage,
-    buttonBackground,
-    placeholder,
-    buttonPosition,
-    buttonSize,
-    chatWidth,
-    chatHeight,
-    showTypingIndicator,
-    initialOpen,
-    headerBackground,
-    companyLogo,
-    companyName
-  } = config;
   const [isOpen, setIsOpen] = useState(false);
   const [headerValidation, setHeaderValidation] = useState(null);
   const [showAlert, setShowAlert] = useState(true);
+  const { button_background, button_position, button_size, chat_height, chat_width, company_logo, company_name, header_background, initial_open, placeholder, show_typing_indicator, welcome_message } = config.chat_widget_settings;
   useEffect(() => {
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
         const apiResponse = await fetchChatWidgetSettings(clientId);
-        if (headers && apiResponse.data.auth_config) {
-          const validationResult = validateHeaders(
-            headers,
-            apiResponse.data.auth_config,
-            {
+        if (apiResponse.success) {
+          const anthropic2 = new Anthropic({ apiKey: apiResponse.data.openai_key, dangerouslyAllowBrowser: true });
+          const mcpClient2 = new Client({ name: "mcp-client-cli", version: "1.0.0" });
+          const transport = new SSEClientTransport(new URL("", apiResponse.data.mcp_url), {
+            eventSourceInit: {
+              fetch: (url, init) => {
+                if (headers) {
+                  const dynamicHeaders = normalizeHeaders(headers);
+                  return fetch(url, {
+                    headers: {
+                      ...(init?.headers ?? {}),
+                      ...dynamicHeaders,
+                    },
+                  });
+                } else {
+                  return fetch(url, {
+                    headers: {
+                      ...(init?.headers ?? {}),
+                    },
+                  });
+                }
+              },
+            },
+          });
+          await mcpClient2.connect(transport);
+          setMcpClient(mcpClient2);
+          setAnthropic(anthropic2);
+          if (headers && apiResponse.data.auth_config) {
+            const validationResult = validateHeaders(headers, apiResponse.data.auth_config, {
               allowExtra: false,
-              caseSensitive: true
-            }
-          );
-          setHeaderValidation(validationResult);
-        }
-        setFinalMcpUrl(apiResponse.data.mcp_url);
-        setApiKey(apiResponse.data.openai_key || "");
-        const apiConfig = mapApiSettingsToConfig(
-          apiResponse.data.chat_widget_settings
-        );
-        if (apiConfig) {
-          setConfig(apiConfig);
+              caseSensitive: true,
+            });
+            setHeaderValidation(validationResult);
+          }
+          if (!apiResponse.data.chat_widget_settings) {
+            setConfig({
+              auth_config: apiResponse.data.auth_config,
+              mcp_url: apiResponse.data.mcp_url,
+              openai_key: apiResponse.data.openai_key,
+              chat_widget_settings: {
+                api_source_id: 0,
+                chat_widget_settings_id: 0,
+                created_at: "",
+                updated_at: "",
+                button_background: defaultConfig.chat_widget_settings.button_background,
+                button_position: defaultConfig.chat_widget_settings.button_position,
+                button_size: defaultConfig.chat_widget_settings.button_size,
+                chat_height: defaultConfig.chat_widget_settings.chat_height,
+                chat_width: defaultConfig.chat_widget_settings.chat_width,
+                company_logo: defaultConfig.chat_widget_settings.company_logo,
+                company_name: defaultConfig.chat_widget_settings.company_name,
+                header_background: defaultConfig.chat_widget_settings.header_background,
+                initial_open: defaultConfig.chat_widget_settings.initial_open,
+                placeholder: defaultConfig.chat_widget_settings.placeholder,
+                show_typing_indicator: defaultConfig.chat_widget_settings.show_typing_indicator,
+                welcome_message: defaultConfig.chat_widget_settings.welcome_message,
+              },
+            });
+          } else {
+            setConfig(apiResponse.data);
+          }
         }
       } catch (error) {
         console.error("Failed to load chat widget config:", error);
-        setFinalMcpUrl("");
       } finally {
         setIsConfigLoading(false);
       }
     };
     loadConfig();
-  }, [clientId]);
-  const internalChatbot = useChatbot({
-    mcpUrl: finalMcpUrl,
-    apiKey,
-    headers,
-    config
-  });
-  const messages = internalChatbot.messages;
-  const isLoading = internalChatbot.isLoading;
-  const handleSendMessage = internalChatbot.sendMessage;
-  const toggleChat = () => {
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-  };
+  }, []);
   useEffect(() => {
-    setIsOpen(initialOpen);
-  }, [initialOpen]);
-  const messagesEndRef = useRef(null);
+    setIsOpen(initial_open);
+  }, [initial_open]);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const MessageBubble = ({ message, onAction }) => {
-    const isUser = message.role === "user";
-    return /* @__PURE__ */ jsxs("div", { className: `message-container ${isUser ? "user" : "assistant"}`, children: [
-      isUser && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: `message-bubble ${isUser ? "user" : "assistant"}`, children: message.text && /* @__PURE__ */ jsx("div", { className: "markdown-content", children: message.text }) }),
-        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: `message-bubble ${isUser ? "user" : "assistant"}`, children: message.isTyping ? /* @__PURE__ */ jsx("div", { className: "message-typing-indicator", children: /* @__PURE__ */ jsx(TypingDots, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.text }) }),
-          message.ui && /* @__PURE__ */ 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__ */ jsx("div", { className: `message-time ${isUser ? "user" : "assistant"}`, children: message.timestamp.toLocaleTimeString("tr-TR", {
-          hour: "2-digit",
-          minute: "2-digit"
-        }) })
-      ] })
-    ] });
-  };
-  const TypingDots = () => {
-    const [dots, setDots] = useState("");
-    useEffect(() => {
-      const interval = setInterval(() => {
-        setDots((prev) => {
-          if (prev === "...") return "";
-          return prev + ".";
-        });
-      }, 500);
-      return () => clearInterval(interval);
-    }, []);
-    return /* @__PURE__ */ jsx("span", { children: dots });
+  if (isConfigLoading || !mcpClient || !anthropic) {
+    return /* @__PURE__ */ jsx("button", { className: `floating-button ${button_position} button-sizes ${button_size}`, style: { background: button_background }, children: /* @__PURE__ */ jsx("div", { className: "loading-spinner" }) });
+  }
+  const historyMessages = (history, currentUserText) => {
+    const claudeHistory = history
+      .filter((m) => m.role === "user" || m.role === "assistant")
+      .map((m) => ({
+        role: m.role,
+        content: m.text ?? JSON.stringify(m.ui ?? ""),
+      }));
+    claudeHistory.push({
+      role: "user",
+      content: currentUserText,
+    });
+    return claudeHistory;
   };
-  const HeaderValidationAlert = () => {
-    if (!headerValidation || !showAlert) return null;
-    const { isValid, missingKeys, extraKeys, emptyValueKeys } = headerValidation;
-    if (isValid && missingKeys.length === 0 && extraKeys.length === 0 && emptyValueKeys.length === 0) {
-      return null;
-    }
-    const hasErrors = missingKeys.length > 0 || emptyValueKeys.length > 0;
-    const hasWarnings = extraKeys.length > 0;
-    const alertType = hasErrors ? "error" : "warning";
-    const getAlertIcon = () => {
-      if (hasErrors) {
-        return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
-      }
-      return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
+  const addMessage = (payload) => {
+    const newMessage = {
+      id: generateId(),
+      text: payload.text,
+      ui: payload.ui,
+      role: payload.role,
+      timestamp: /* @__PURE__ */ new Date(),
     };
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `alert-container ${alertType}`, children: [
-      /* @__PURE__ */ jsx("div", { className: "alert-icon-container", children: getAlertIcon() }),
-      /* @__PURE__ */ jsxs("div", { className: "alert-content", children: [
-        /* @__PURE__ */ jsx("h4", { className: "alert-title", children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
-        /* @__PURE__ */ jsx("p", { className: "alert-message", children: hasErrors && hasWarnings ? "Header yap\u0131land\u0131rman\u0131zda hatalar ve uyar\u0131lar bulundu." : hasErrors ? "Header yap\u0131land\u0131rman\u0131zda hatalar bulundu." : "Header yap\u0131land\u0131rman\u0131zda fazla anahtarlar bulundu." }),
-        missingKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("strong", { children: "Eksik Header'lar:" }),
-          /* @__PURE__ */ jsx("ul", { className: "alert-list", children: missingKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [
-            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx("code", { children: key })
-          ] }, index)) })
-        ] }),
-        emptyValueKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("strong", { children: "Bo\u015F De\u011Ferli Header'lar:" }),
-          /* @__PURE__ */ jsx("ul", { className: "alert-list", children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [
-            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx("code", { children: key }),
-            /* @__PURE__ */ jsx("span", { children: "(de\u011Fer bo\u015F olamaz)" })
-          ] }, index)) })
-        ] }),
-        extraKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("strong", { children: "Fazla Header'lar:" }),
-          /* @__PURE__ */ jsx("ul", { className: "alert-list", children: extraKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { className: "alert-list-item", children: [
-            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx("code", { children: key })
-          ] }, index)) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => setShowAlert(false),
-          className: "alert-close-button",
-          "aria-label": "Uyar\u0131y\u0131 kapat",
-          children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
-        }
-      )
-    ] }) });
+    setMessages((prev) => [...prev, newMessage]);
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    return newMessage;
   };
-  const ChatInput = () => {
-    const [message, setMessage] = useState("");
-    const textareaRef = useRef(null);
-    const handleSubmit = (e) => {
-      e.preventDefault();
-      if (message.trim() && !isLoading) {
-        handleSendMessage(message.trim());
-        setMessage("");
-        if (textareaRef.current) {
-          textareaRef.current.style.height = "auto";
-        }
-      }
-    };
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit(e);
-      }
-    };
-    const handleInputChange = (e) => {
-      setMessage(e.target.value);
-      const textarea = e.target;
-      textarea.style.height = "auto";
-      textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+  const sendMessage = async (message, approval) => {
+    if (!message.trim() || isLoading) return;
+    const newMessage = {
+      id: generateId(),
+      text: message,
+      ui: void 0,
+      role: approval ? "approval" : "user",
+      timestamp: /* @__PURE__ */ new Date(),
     };
-    return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "input-container", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: textareaRef,
-          value: message,
-          onChange: handleInputChange,
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled: isLoading,
-          className: "textarea"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: isLoading || !message.trim(),
-          className: "send-button",
-          children: isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+    setMessages((prev) => [...prev, newMessage]);
+    setIsLoading(true);
+    const toolsResult = await mcpClient.listTools();
+    const tools = toolsResult.tools.map((tool) => {
+      return {
+        name: tool.name,
+        description: tool.description,
+        input_schema: tool.inputSchema,
+      };
+    });
+    try {
+      const historyForContext = historyMessages([...messages, newMessage], message);
+      const response = await anthropic.beta.messages.create({
+        model: "claude-sonnet-4-5",
+        betas: ["structured-outputs-2025-11-13"],
+        max_tokens: 5e3,
+        messages: historyForContext,
+        tools,
+        system: GENERATIVE_UI_SYSTEM_PROMPT,
+      });
+      for (const content of response.content) {
+        if (content.type === "tool_use") {
+          const toolCall = await mcpClient.callTool({ name: content.name, arguments: content.input });
+          const toolMessagesForContext = historyMessages([...messages, newMessage], JSON.stringify(toolCall.structuredContent));
+          const finalResponse = await anthropic.beta.messages.create({
+            model: "claude-sonnet-4-5",
+            max_tokens: 1024,
+            betas: ["structured-outputs-2025-11-13"],
+            messages: toolMessagesForContext,
+            tools,
+            system: GENERATIVE_UI_SYSTEM_PROMPT,
+          });
+          const textBlock = finalResponse.content.find((x) => x.type === "text");
+          const { cleanedText, uiData } = extractUIJsonFromText(textBlock?.text ?? "");
+          addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
+        } else if (content.type === "text") {
+          const { cleanedText, uiData } = extractUIJsonFromText(content?.text);
+          console.log(cleanedText, uiData);
+          addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
         }
-      )
-    ] });
+      }
+      setIsLoading(false);
+    } catch (error) {
+      console.error("Error sending message:", error);
+      addMessage({ text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", role: "assistant" });
+      setIsLoading(false);
+    }
   };
-  const LoadingSpinner = () => {
-    return /* @__PURE__ */ jsx("div", { className: "loading-spinner" });
+  const toggleChat = () => {
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
   };
-  if (isConfigLoading) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: `floating-button ${buttonPosition} button-sizes ${buttonSize}`,
-        style: { background: buttonBackground },
-        children: /* @__PURE__ */ jsx("div", { className: "loading-spinner" })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isOpen && /* @__PURE__ */ jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
-    /* @__PURE__ */ jsx("div", { className: `chat-container ${buttonPosition} ${isOpen ? "is-open" : ""}`, style: { width: chatWidth, height: chatHeight }, children: /* @__PURE__ */ jsxs("div", { className: "chatbot-container", children: [
-      /* @__PURE__ */ jsxs("div", { className: "header", style: { background: headerBackground }, children: [
-        /* @__PURE__ */ jsx("div", { className: "logo-container", children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: companyLogo,
-            alt: "Company Logo",
-            className: "logo-image"
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "logo-text", children: companyLogo }) : "\u{1F916}" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "company-name", children: companyName }),
-          /* @__PURE__ */ jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "messages-container", children: [
-        /* @__PURE__ */ jsx(HeaderValidationAlert, {}),
-        messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "empty-state", children: [
-          /* @__PURE__ */ jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
-          /* @__PURE__ */ jsx("h4", { className: "empty-state-title", children: welcomeMessage }),
-          /* @__PURE__ */ jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
-        ] }) : messages.map((message) => /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message,
-            onAction: handleSendMessage
-          },
-          message.id
-        )),
-        showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsx(
-          MessageBubble,
-          {
-            message: {
-              id: `typing-${messages.length}`,
-              text: "",
-              role: "assistant",
-              timestamp: /* @__PURE__ */ new Date(),
-              isTyping: true
-            },
-            onAction: handleSendMessage
-          },
-          `typing-${messages.length}`
-        ),
-        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsx(ChatInput, {})
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      isOpen && /* @__PURE__ */ jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
+      /* @__PURE__ */ jsx("div", {
+        className: `chat-container ${button_position} ${isOpen ? "is-open" : ""}`,
+        style: { width: chat_width, height: chat_height },
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "chatbot-container",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "header",
+              style: { background: header_background },
+              children: [
+                /* @__PURE__ */ jsx("div", {
+                  className: "logo-container",
+                  children: company_logo
+                    ? company_logo.startsWith("http") || company_logo.startsWith("data:")
+                      ? /* @__PURE__ */ jsx("img", {
+                          src: company_logo,
+                          alt: "Company Logo",
+                          className: "logo-image",
+                        })
+                      : /* @__PURE__ */ jsx("span", { className: "logo-text", children: company_logo })
+                    : "\u{1F916}",
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  children: [/* @__PURE__ */ jsx("h3", { className: "company-name", children: company_name }), /* @__PURE__ */ jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })],
+                }),
+              ],
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "messages-container",
+              children: [
+                /* @__PURE__ */ jsx(HeaderAlert, { headerValidation, setShowAlert, showAlert }),
+                messages.length === 0
+                  ? /* @__PURE__ */ jsxs("div", {
+                      className: "empty-state",
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
+                        /* @__PURE__ */ jsx("h4", { className: "empty-state-title", children: welcome_message }),
+                        /* @__PURE__ */ jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." }),
+                      ],
+                    })
+                  : /* @__PURE__ */ jsxs(Fragment, {
+                      children: [
+                        messages.map((message) =>
+                          /* @__PURE__ */ jsx(
+                            MessageBubble,
+                            {
+                              message,
+                              onAction: sendMessage,
+                            },
+                            message.id
+                          )
+                        ),
+                        show_typing_indicator && isLoading && /* @__PURE__ */ jsx(TypingDots, {}),
+                      ],
+                    }),
+                /* @__PURE__ */ jsx("div", { ref: messagesEndRef }),
+              ],
+            }),
+            /* @__PURE__ */ jsx(ChatInput, { handleSendMessage: sendMessage, isLoading, placeholder }),
+          ],
+        }),
+      }),
+      /* @__PURE__ */ jsx("button", {
         onClick: toggleChat,
-        className: `floating-button ${buttonPosition} button-sizes ${buttonSize} ${isOpen ? "is-open" : ""}`,
-        style: { background: buttonBackground },
+        className: `floating-button ${button_position} button-sizes ${button_size} ${isOpen ? "is-open" : ""}`,
+        style: { background: button_background },
         "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
-        children: isOpen ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
-      }
-    )
-  ] });
+        children: isOpen
+          ? /* @__PURE__ */ jsx("svg", {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
+            })
+          : /* @__PURE__ */ jsx("svg", {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }),
+            }),
+      }),
+    ],
+  });
 };
 
 export { AizekChatBot };
 //# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map