aizek-chatbot 1.0.10 → 1.0.11

package/dist/index.mjs

@@ -4,7 +4,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import OpenAI from 'openai';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import DOMPurify from 'dompurify';
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -106,210 +105,299 @@ var useChatbot = (options = {}) => {
   const generateId = () => {
     return Date.now().toString() + Math.random().toString(36).substr(2, 9);
   };
-  const addMessage = (content, role) => {
+  const addMessage = (payload, role) => {
     const newMessage = {
       id: generateId(),
-      content,
+      text: payload.text,
+      ui: payload.ui,
       role,
       timestamp: /* @__PURE__ */ new Date()
     };
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
   };
-  const getHtmlUiInstructions = (config2) => {
-    const headerColor = config2?.headerBackground || "#f5f5f5";
-    const accentColor = config2?.buttonBackground || "#007bff";
-    return `
-You are a helpful assistant that creates UI using ONLY HTML tags.
+  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.
 
-Your task:
-- Read the user message and respond.
-- Render your response as a small HTML layout (card OR table OR mini-table).
-- Use inline CSS styles.
-- Use a clean, light (white-based) theme.
-- Use colors from options.config (headerBackground, buttonBackground).
-- Return ONLY raw HTML (no markdown, no backticks, no JSON, no explanations).
+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.
 
-====================
-THEME (from options.config)
-====================
-The chat widget configuration provides:
+==================================================
+1. GENERAL BEHAVIOR
+==================================================
 
-- Header Background Color: ${headerColor}
-- Button / Accent Color:   ${accentColor}
+- 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.
 
-How to use these:
-- Use Header Background Color mainly for top headers, title strips, or main highlight areas.
-- Use Button / Accent Color for important accents: borders, highlights, badges, table headers, key text highlights, links, etc.
-- Use a white or very light background for main surfaces.
-- Text color should generally be dark (#111\u2013#333) for readability.
+==================================================
+2. MCP TOOL PRIORITY RULES
+==================================================
 
-====================
-ALLOWED / FORBIDDEN TAGS
-====================
-You may use ANY NON-INTERACTIVE HTML element, for example:
-- Text and headings:
-  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
-  <p>, <span>, <strong>, <em>, <small>, <blockquote>, <code>, <pre>
-- Layout:
-  <div>, <section>, <article>, <header>, <footer>
-- Lists:
-  <ul>, <ol>, <li>
-- Tables:
-  <table>, <thead>, <tbody>, <tr>, <th>, <td>
-- Media:
-  <img>, <figure>, <figcaption>
-- Links (non-interactive navigation style only):
-  <a>
+ALWAYS prefer MCP tools over any other strategy WHEN:
 
-GENERAL RULE:
-- In NORMAL responses, you MUST NOT use <button>.
+- 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.
 
-FORBIDDEN (NORMAL MODE):
-- <button>, <input>, <textarea>, <select>, <option>, <form>, <label>
-- <details>, <summary>, <dialog>
-- <video> or <audio> with controls for user interaction
-- Any inline event handlers like onclick, onmouseover, etc.
-- <script> or any JavaScript code.
+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.
 
-====================
-LAYOUT TYPE RULES
-====================
-You have exactly THREE layout types you can use:
+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.
 
-1) CARD
-2) TABLE
-3) MINI TABLE
+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.
 
-For EACH response:
-- You MUST choose exactly ONE of these layout types.
-- You MUST NOT mix layout types in the same response.
-  (Do NOT render card + table together, or table + mini-table together.)
+==================================================
+3. ACTION TOOLS VS. DRAFTS (IKAS MCP, PRODUCT CREATION)
+==================================================
 
-Which layout to choose:
-- CARD (DEFAULT):
-  - Use this for normal answers, explanations, descriptions, welcome messages,
-    and any content that is mostly free text.
-- TABLE:
-  - Use this ONLY when the content is clearly structured with multiple columns
-    (for example: comparisons, lists of items with several attributes).
-- MINI TABLE:
-  - Use this for small, compact key-value style data
-    (for example: a few fields like "Token", "Price", "Network"),
-    or when a full table would be visually too heavy.
+Some MCP tools can PERFORM REAL ACTIONS (e.g., create a product in an e-commerce system via ikas MCP).
 
-If the user does NOT explicitly ask for a table or very structured data,
-you MUST use the CARD layout.
+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.
 
-====================
-STYLE RULES
-====================
-General style (CARD or container):
-- Use a main wrapper <div> with styles similar to:
-  background: #ffffff;
-  color: #111111;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  padding: 12px;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+Examples (Turkish / ikas):
 
-Header area (if you use one):
-- You may add a top header area using the header background color:
-  background: ${headerColor};
+1) User: 
+   "\u0130kas'ta yeni bir \xFCr\xFCn olu\u015Ftur: 
+    isim: Siyah T-Shirt, 
+    fiyat: 299 TL, 
+    stok: 50, 
+    kategori: Ti\u015F\xF6rtler."
 
-Typography:
-- Titles: 18\u201322px, bold.
-- Body text: 12\u201316px, regular.
-- Line-height should be comfortable (around 1.4\u20131.6).
+   \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."
 
-Tables:
-- Use <table> with <thead> and <tbody> where appropriate.
-- Header row background: ${accentColor};
-- Header row text color: #ffffff;
-- Body rows background: #ffffff;
-- Row borders: 1px solid #e5e5e5 (or a faint version of the border color).
+   \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.
 
-Mini table:
-- Can be a simple two-column table or stacked key-value pairs.
-- Keep it compact (less padding, fewer rows).
+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.
 
-Links:
-- You can use <a> for styling or static URLs.
-- Use the accent color for links:
-  color: ${accentColor};
+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.
 
-====================
-CONFIRMATION MODE (SPECIAL CASE)
-====================
-Sometimes, during a workflow or tool usage, you may need the user to confirm an action
-(e.g., deleting a workflow, sending a transaction, performing an irreversible change).
+==================================================
+4. INTERPRETING USER INTENT
+==================================================
 
-In such CONFIRMATION cases ONLY:
-- You ARE allowed to use exactly TWO <button> elements.
-- They MUST be rendered with these exact data attributes:
+- 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.
 
-  <button data-ai-action="approve">Onayla</button>
-  <button data-ai-action="cancel">Vazge\xE7</button>
+- 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.
 
-Rules for confirmation buttons:
-- Do NOT add onclick or any other JS event attributes.
-- Do NOT add custom data attributes besides data-ai-action.
-- The host application will detect these buttons by data-ai-action
-  and will send the following messages back to you:
-    "__APPROVE__" when the user clicks "Onayla"
-    "__CANCEL__"  when the user clicks "Vazge\xE7"
+Examples:
 
-Behavior after user choice:
-- When you receive "__APPROVE__", behave as if the user confirmed YES.
-- When you receive "__CANCEL__", behave as if the user declined or cancelled.
-- After that, go back to NORMAL mode and return standard HTML output again
-  (card, table, or mini table, WITHOUT <button>).
+- "\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."
 
-IMPORTANT:
-- In NORMAL responses (no confirmation needed), you MUST NOT use <button>.
-- In CONFIRMATION MODE, you MUST use exactly these two buttons and NO others.
+- "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.
 
-====================
-OUTPUT FORMAT
-====================
-Your final output MUST follow these rules:
-- Output ONLY a single HTML snippet.
-- Do NOT wrap it in backticks or markdown.
-- Do NOT include any explanation text.
-- Do NOT include JSON.
-- Must use exactly ONE of: card, table, mini table.
-- Must respect allowed/forbidden tags.
-- Must use colors derived from:
-  - headerBackground
-  - buttonBackground
-  and otherwise a light theme.
+==================================================
+7. FALLBACK LOGIC
+==================================================
 
-====================
-BEHAVIOR SUMMARY
-====================
-1) Read the user message.
-2) If it is a normal response:
-   - Decide whether CARD, TABLE, or MINI TABLE is most suitable.
-   - Generate a single HTML layout using only allowed, non-interactive tags (no <button>).
-3) If you need explicit user confirmation:
-   - Enter CONFIRMATION MODE.
-   - Render a short explanation AND exactly two <button> elements with:
-       data-ai-action="approve" and data-ai-action="cancel".
-4) Style the layout with inline CSS using:
-   - ${headerColor} for header areas,
-   - ${accentColor} for accents,
-   - white/light backgrounds and dark text.
-5) Return ONLY the HTML snippet.
+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.`;
+  const 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:
+- 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):
+
+\`\`\`ui-component
+{
+  "type": "form" | "buttons" | "table" | "card",
+  "data": { ...component-specific fields... }
+}
+\`\`\`
+
+IMPORTANT:
+- Do NOT invent HTML. Only JSON as described.
+- Keep JSON strictly valid.
+- Text response should be outside of code blocks.
 `;
-  };
-  const sendMessage = async (message) => {
+  const sendMessage = async (message, approval) => {
     if (!message.trim() || isLoading) return;
-    addMessage(message, "user");
+    if (approval) {
+      addMessage({ text: message }, "approval");
+    } else {
+      addMessage({ text: message }, "user");
+    }
     setIsLoading(true);
-    console.log(options.config);
     try {
       let resp;
-      console.log(options.headers);
       resp = await client.responses.create({
         model: "gpt-5",
         tools: [
@@ -321,38 +409,43 @@ BEHAVIOR SUMMARY
             headers: options.headers || {}
           }
         ],
-        input: message,
+        input: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: message }
+        ],
         previous_response_id: responseId || void 0,
-        instructions: getHtmlUiInstructions(options.config)
+        instructions
       });
+      console.log("Response:", resp);
       setResponseId(resp.id);
-      let responseText = "";
-      if (resp && Array.isArray(resp)) {
-        const messageItem = resp.find((item) => item.type === "message");
-        if (messageItem && messageItem.content && Array.isArray(messageItem.content)) {
-          const textContent = messageItem.content.find(
-            (content) => content.type === "output_text"
+      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 (textContent && textContent.text) {
-            responseText = textContent.text;
+          if (textItem?.text?.value) {
+            rawText = textItem.text.value;
+          } else if (textItem?.text?.annotations?.[0]?.text) {
+            rawText = textItem.text.annotations[0].text;
           }
         }
-      } else {
-        if (resp && resp.output_text) {
-          responseText = resp.output_text;
-        } else if (typeof resp === "string") {
-          responseText = resp;
-        }
       }
-      if (!responseText) {
-        responseText = `"${message}" mesaj\u0131n\u0131z\u0131 ald\u0131m. Size nas\u0131l yard\u0131mc\u0131 olabilirim?`;
+      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?`;
       }
-      addMessage(responseText, "assistant");
+      const { text, components } = extractUiComponents(rawText);
+      addMessage({ text, ui: components }, "assistant");
       setIsLoading(false);
     } catch (error) {
       console.error("Error sending message:", error);
       addMessage(
-        "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.",
+        { text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin." },
         "assistant"
       );
       setIsLoading(false);
@@ -367,7 +460,7 @@ BEHAVIOR SUMMARY
 };
 
 // src/services/chatWidgetApi.ts
-var API_BASE_URL = "https://api.elviz24.com";
+var API_BASE_URL = "https://api-alpha.aizek.ai";
 var fetchChatWidgetSettings = async (clientId) => {
   try {
     const response = await fetch(`${API_BASE_URL}/ChatWidgetSettings/GetByClientId?client_id=${clientId}`, {
@@ -380,7 +473,6 @@ var fetchChatWidgetSettings = async (clientId) => {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     const data = await response.json();
-    console.log(data);
     return data;
   } catch (error) {
     console.error("Error fetching chat widget settings:", error);
@@ -414,7 +506,6 @@ var mapApiSettingsToConfig = (apiSettings) => {
 
 // src/styles/messageStyles.ts
 var getMessageBubbleStyles = (isUser, isTyping) => ({
-  display: !isTyping && !isUser ? "none" : "block",
   maxWidth: "80%",
   padding: "12px 16px",
   borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
@@ -443,7 +534,8 @@ var getTimeStyles = (isUser) => ({
   textAlign: isUser ? "right" : "left"
 });
 var getMarkdownStyles = () => ({
-  lineHeight: 1.6
+  lineHeight: 1.6,
+  marginBottom: "6px"
 });
 var getMarkdownElementStyles = (isUser) => `
     .markdown-content p {
@@ -890,6 +982,901 @@ var getAlertAnimationStyles = () => `
         }
     }
 `;
+function UIRenderer({ components, onInteraction }) {
+  console.log(components);
+  if (!Array.isArray(components) || components.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              ButtonsComponent,
+              {
+                data: comp.data,
+                onClick: (value) => onInteraction?.({ type: "buttonClick", value })
+              },
+              key
+            );
+          case "table":
+            return /* @__PURE__ */ jsx(TableComponent, { data: comp.data }, key);
+          case "card":
+            return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+          "h3",
+          {
+            style: {
+              fontWeight: 600,
+              fontSize: "16px",
+              marginBottom: "20px",
+              color: "#1a1a1a",
+              marginTop: 0
+            },
+            children: data.title
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        style: {
+                          fontWeight: 500,
+                          fontSize: "13px",
+                          color: "#374151",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "4px"
+                        },
+                        children: [
+                          field.label,
+                          field.required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", fontSize: "14px" }, children: "*" })
+                        ]
+                      }
+                    ),
+                    field.type === "select" ? /* @__PURE__ */ 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__ */ 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);
+                          })
+                        ]
+                      }
+                    ) : /* @__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,
+                        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__ */ 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"
+          }
+        )
+      ]
+    }
+  );
+}
+function ButtonsComponent({
+  data,
+  onClick
+}) {
+  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__ */ 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__ */ 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
+        );
+      })
+    }
+  );
+}
+function TableComponent({ data }) {
+  if (!data.columns || !Array.isArray(data.columns) || data.columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              fontWeight: 600,
+              fontSize: "14px",
+              borderBottom: "1px solid #e0e0e0",
+              backgroundColor: "#f8f9fa",
+              color: "#1a1a1a"
+            },
+            children: data.caption
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              minWidth: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx("thead", { style: { backgroundColor: "#f8f9fa" }, 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",
+                  {
+                    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__ */ jsx("tbody", { children: data.rows && data.rows.length > 0 ? data.rows.map((row, rowIdx) => /* @__PURE__ */ 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__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center"
+                                },
+                                children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                            "div",
+                            {
+                              style: { display: "flex", alignItems: "center" },
+                              children: /* @__PURE__ */ 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__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                color: "#2d3748",
+                                lineHeight: "1.5"
+                              },
+                              children: stringValue
+                            }
+                          );
+                        }
+                      }
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          borderBottom: "1px solid #e8e8e8",
+                          padding: "16px 20px",
+                          fontSize: "13px",
+                          verticalAlign: "middle"
+                        },
+                        children: cellContent || /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: { color: "#a0a0a0", fontStyle: "italic" },
+                            children: "\u2014"
+                          }
+                        )
+                      },
+                      cellKey
+                    );
+                  })
+                },
+                `row-${rowIdx}`
+              )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: data.columns.length,
+                  style: {
+                    padding: "40px",
+                    textAlign: "center",
+                    color: "#9ca3af",
+                    fontSize: "13px"
+                  },
+                  children: "Veri bulunamad\u0131"
+                }
+              ) }) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+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",
+      {
+        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__ */ jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
+          hasImage && /* @__PURE__ */ 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";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(
+              "h4",
+              {
+                style: {
+                  fontWeight: 600,
+                  fontSize: "14px",
+                  marginBottom: "8px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: data.title
+              }
+            ),
+            hasStatus && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: "8px",
+                  fontSize: "12px",
+                  marginBottom: "4px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: "#6b7280", fontWeight: 500 }, children: "Durum:" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: "#374151" }, children: data.status })
+                ]
+              }
+            ),
+            hasSubtitle && /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  color: "#6b7280",
+                  fontSize: "12px",
+                  marginBottom: "4px",
+                  margin: 0
+                },
+                children: data.subtitle
+              }
+            ),
+            displayFields && displayFields.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "flex", flexDirection: "column", gap: "4px" },
+                children: displayFields.map((field, i) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: { display: "flex", gap: "8px", fontSize: "12px" },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { style: { color: "#6b7280", fontWeight: 500 }, children: [
+                        field.label,
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { color: "#374151" }, children: field.value })
+                    ]
+                  },
+                  i
+                ))
+              }
+            ),
+            data.description && /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  color: "#6b7280",
+                  fontSize: "12px",
+                  marginTop: "8px",
+                  margin: 0
+                },
+                children: data.description
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  if (!data.items || !Array.isArray(data.items) || data.items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+    data.title && !data.items.some((item) => item.title) && /* @__PURE__ */ jsx(
+      "h3",
+      {
+        style: {
+          fontWeight: 600,
+          marginBottom: "12px",
+          fontSize: "14px",
+          color: "#1a1a1a",
+          marginTop: 0
+        },
+        children: data.title
+      }
+    ),
+    data.description && /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          color: "#6b7280",
+          marginBottom: "12px",
+          fontSize: "12px",
+          marginTop: 0
+        },
+        children: data.description
+      }
+    ),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      gap: "8px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("dt", { style: { color: "#6b7280", margin: 0 }, children: item.label }),
+                      /* @__PURE__ */ jsx(
+                        "dd",
+                        {
+                          style: {
+                            fontWeight: 500,
+                            color: "#1a1a1a",
+                            margin: 0
+                          },
+                          children: item.value
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              itemKey
+            );
+          }
+          return /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
+                hasImage && /* @__PURE__ */ 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__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0
+                    },
+                    children: [
+                      hasTitle && /* @__PURE__ */ jsx(
+                        "h4",
+                        {
+                          style: {
+                            fontWeight: 600,
+                            fontSize: "14px",
+                            marginBottom: "4px",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            color: "#1a1a1a",
+                            marginTop: 0
+                          },
+                          children: item.title
+                        }
+                      ),
+                      hasSubtitle && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          style: {
+                            color: "#6b7280",
+                            fontSize: "12px",
+                            margin: 0
+                          },
+                          children: item.subtitle
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            },
+            itemKey
+          );
+        })
+      }
+    )
+  ] });
+}
+function renderField(field) {
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ jsx("span", { children: field.value });
+    case "image":
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: field.src,
+          alt: field.alt ?? "",
+          style: {
+            width: 24,
+            height: 24,
+            borderRadius: "999px",
+            objectFit: "cover"
+          }
+        }
+      );
+    case "link":
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: field.href,
+          target: "_blank",
+          rel: "noreferrer",
+          style: { textDecoration: "underline" },
+          children: field.label
+        }
+      );
+    case "badge":
+      return /* @__PURE__ */ 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
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: 16 }, children: field.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: renderField(item) }, i)) });
+    default:
+      return null;
+  }
+}
 var AizekChatBot = ({
   clientId,
   headers
@@ -929,9 +1916,7 @@ var AizekChatBot = ({
   const [isOpen, setIsOpen] = useState(false);
   const [headerValidation, setHeaderValidation] = useState(null);
   const [showAlert, setShowAlert] = useState(true);
-  console.log("Component rendered");
   useEffect(() => {
-    console.log("use");
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
@@ -945,7 +1930,6 @@ var AizekChatBot = ({
               caseSensitive: true
             }
           );
-          console.log(validationResult);
           setHeaderValidation(validationResult);
         }
         setFinalMcpUrl(apiResponse.data.mcp_url);
@@ -987,41 +1971,54 @@ var AizekChatBot = ({
   }, [messages]);
   const MessageBubble = ({ message, onAction }) => {
     const isUser = message.role === "user";
-    const cleanContent = DOMPurify.sanitize(message.content);
-    const htmlRef = useRef(null);
-    useEffect(() => {
-      if (!htmlRef.current || isUser) return;
-      const root = htmlRef.current;
-      const approveBtn = root.querySelector(
-        'button[data-ai-action="approve"]'
-      );
-      const cancelBtn = root.querySelector(
-        'button[data-ai-action="cancel"]'
-      );
-      const handleApprove = () => onAction("__APPROVE__");
-      const handleCancel = () => onAction("__CANCEL__");
-      if (approveBtn) approveBtn.addEventListener("click", handleApprove);
-      if (cancelBtn) cancelBtn.addEventListener("click", handleCancel);
-      return () => {
-        if (approveBtn) approveBtn.removeEventListener("click", handleApprove);
-        if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
-      };
-    }, [message.content, isUser, onAction]);
     return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
       /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
-      /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser, message.isTyping ?? false), children: [
-        isUser && /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }),
-        message.isTyping && /* @__PURE__ */ jsx("div", { style: {
-          display: "inline-flex",
-          alignItems: "center",
-          marginLeft: "8px"
-        }, children: /* @__PURE__ */ jsx(TypingDots, {}) })
+      isUser && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { style: getMessageBubbleStyles(isUser), children: message.text && /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), children: message.text }) }),
+        /* @__PURE__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
       ] }),
-      !isUser && /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: cleanContent } }),
-      /* @__PURE__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
-        hour: "2-digit",
-        minute: "2-digit"
-      }) })
+      !isUser && message.role !== "approval" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: getMessageBubbleStyles(isUser, message.isTyping ?? false),
+            children: message.isTyping ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  marginLeft: message.text ? "8px" : "0"
+                },
+                children: /* @__PURE__ */ jsx(TypingDots, {})
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.text }) }),
+              message.ui && /* @__PURE__ */ 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__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ] })
     ] });
   };
   const TypingDots = () => {
@@ -1305,14 +2302,15 @@ var AizekChatBot = ({
               MessageBubble,
               {
                 message: {
-                  id: "typing",
-                  content: "",
+                  id: `typing-${messages.length}`,
+                  text: "",
                   role: "assistant",
                   timestamp: /* @__PURE__ */ new Date(),
                   isTyping: true
                 },
                 onAction: handleSendMessage
-              }
+              },
+              `typing-${messages.length}`
             ),
             /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
           ] }),