aizek-chatbot 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var OpenAI = require('openai');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
+var DOMPurify = require('dompurify');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -30,6 +31,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var OpenAI__default = /*#__PURE__*/_interopDefault(OpenAI);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -123,7 +125,7 @@ var Button = React__namespace.forwardRef(
 );
 Button.displayName = "Button";
 var useChatbot = (options = {}) => {
-  const { mcpUrl, apiKey } = options;
+  const { mcpUrl, apiKey, config } = options;
   const client = new OpenAI__default.default({ apiKey, dangerouslyAllowBrowser: true });
   const [responseId, setResponseId] = React.useState(null);
   const [messages, setMessages] = React.useState([]);
@@ -141,10 +143,197 @@ var useChatbot = (options = {}) => {
     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.
+
+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).
+
+====================
+THEME (from options.config)
+====================
+The chat widget configuration provides:
+
+- Header Background Color: ${headerColor}
+- Button / Accent Color:   ${accentColor}
+
+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.
+
+====================
+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>
+
+GENERAL RULE:
+- In NORMAL responses, you MUST NOT use <button>.
+
+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.
+
+====================
+LAYOUT TYPE RULES
+====================
+You have exactly THREE layout types you can use:
+
+1) CARD
+2) TABLE
+3) MINI TABLE
+
+For EACH response:
+- You MUST choose exactly ONE of these layout types.
+- You MUST NOT mix layout types in the same response.
+  (Do NOT render card + table together, or table + mini-table together.)
+
+Which layout to choose:
+- CARD (DEFAULT):
+  - Use this for normal answers, explanations, descriptions, welcome messages,
+    and any content that is mostly free text.
+- TABLE:
+  - Use this ONLY when the content is clearly structured with multiple columns
+    (for example: comparisons, lists of items with several attributes).
+- MINI TABLE:
+  - Use this for small, compact key-value style data
+    (for example: a few fields like "Token", "Price", "Network"),
+    or when a full table would be visually too heavy.
+
+If the user does NOT explicitly ask for a table or very structured data,
+you MUST use the CARD layout.
+
+====================
+STYLE RULES
+====================
+General style (CARD or container):
+- Use a main wrapper <div> with styles similar to:
+  background: #ffffff;
+  color: #111111;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+Header area (if you use one):
+- You may add a top header area using the header background color:
+  background: ${headerColor};
+
+Typography:
+- Titles: 18\u201322px, bold.
+- Body text: 12\u201316px, regular.
+- Line-height should be comfortable (around 1.4\u20131.6).
+
+Tables:
+- Use <table> with <thead> and <tbody> where appropriate.
+- Header row background: ${accentColor};
+- Header row text color: #ffffff;
+- Body rows background: #ffffff;
+- Row borders: 1px solid #e5e5e5 (or a faint version of the border color).
+
+Mini table:
+- Can be a simple two-column table or stacked key-value pairs.
+- Keep it compact (less padding, fewer rows).
+
+Links:
+- You can use <a> for styling or static URLs.
+- Use the accent color for links:
+  color: ${accentColor};
+
+====================
+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).
+
+In such CONFIRMATION cases ONLY:
+- You ARE allowed to use exactly TWO <button> elements.
+- They MUST be rendered with these exact data attributes:
+
+  <button data-ai-action="approve">Onayla</button>
+  <button data-ai-action="cancel">Vazge\xE7</button>
+
+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"
+
+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>).
+
+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.
+
+====================
+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.
+
+====================
+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.
+`;
+  };
   const sendMessage = async (message) => {
     if (!message.trim() || isLoading) return;
     addMessage(message, "user");
     setIsLoading(true);
+    console.log(options.config);
     try {
       let resp;
       console.log(options.headers);
@@ -160,14 +349,17 @@ var useChatbot = (options = {}) => {
           }
         ],
         input: message,
-        previous_response_id: responseId || void 0
+        previous_response_id: responseId || void 0,
+        instructions: getHtmlUiInstructions(options.config)
       });
       setResponseId(resp.id);
       let responseText = "";
       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");
+          const textContent = messageItem.content.find(
+            (content) => content.type === "output_text"
+          );
           if (textContent && textContent.text) {
             responseText = textContent.text;
           }
@@ -186,7 +378,10 @@ var useChatbot = (options = {}) => {
       setIsLoading(false);
     } catch (error) {
       console.error("Error sending message:", error);
-      addMessage("\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", "assistant");
+      addMessage(
+        "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.",
+        "assistant"
+      );
       setIsLoading(false);
     }
   };
@@ -245,7 +440,8 @@ var mapApiSettingsToConfig = (apiSettings) => {
 };
 
 // src/styles/messageStyles.ts
-var getMessageBubbleStyles = (isUser) => ({
+var getMessageBubbleStyles = (isUser, isTyping) => ({
+  display: !isTyping && !isUser ? "none" : "block",
   maxWidth: "80%",
   padding: "12px 16px",
   borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
@@ -721,7 +917,10 @@ var getAlertAnimationStyles = () => `
         }
     }
 `;
-var AizekChatBot = ({ clientId, headers }) => {
+var AizekChatBot = ({
+  clientId,
+  headers
+}) => {
   const defaultConfig = {
     welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
     buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
@@ -740,27 +939,47 @@ var AizekChatBot = ({ clientId, headers }) => {
   const [isConfigLoading, setIsConfigLoading] = React.useState(true);
   const [finalMcpUrl, setFinalMcpUrl] = React.useState("");
   const [apiKey, setApiKey] = React.useState("");
-  const [validConfig, setValidConfig] = React.useState(false);
-  const { welcomeMessage, buttonBackground, placeholder, buttonPosition, buttonSize, chatWidth, chatHeight, showTypingIndicator, initialOpen, headerBackground, companyLogo, companyName } = config;
+  const {
+    welcomeMessage,
+    buttonBackground,
+    placeholder,
+    buttonPosition,
+    buttonSize,
+    chatWidth,
+    chatHeight,
+    showTypingIndicator,
+    initialOpen,
+    headerBackground,
+    companyLogo,
+    companyName
+  } = config;
   const [isOpen, setIsOpen] = React.useState(false);
   const [headerValidation, setHeaderValidation] = React.useState(null);
   const [showAlert, setShowAlert] = React.useState(true);
+  console.log("Component rendered");
   React.useEffect(() => {
+    console.log("use");
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
         const apiResponse = await fetchChatWidgetSettings(clientId);
         if (headers && apiResponse.data.auth_config) {
-          const validationResult = validateHeaders(headers, apiResponse.data.auth_config, {
-            allowExtra: false,
-            caseSensitive: true
-          });
+          const validationResult = validateHeaders(
+            headers,
+            apiResponse.data.auth_config,
+            {
+              allowExtra: false,
+              caseSensitive: true
+            }
+          );
           console.log(validationResult);
           setHeaderValidation(validationResult);
         }
         setFinalMcpUrl(apiResponse.data.mcp_url);
         setApiKey(apiResponse.data.openai_key || "");
-        const apiConfig = mapApiSettingsToConfig(apiResponse.data.chat_widget_settings);
+        const apiConfig = mapApiSettingsToConfig(
+          apiResponse.data.chat_widget_settings
+        );
         if (apiConfig) {
           setConfig(apiConfig);
         }
@@ -773,7 +992,12 @@ var AizekChatBot = ({ clientId, headers }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers });
+  const internalChatbot = useChatbot({
+    mcpUrl: finalMcpUrl,
+    apiKey,
+    headers,
+    config
+  });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -788,18 +1012,39 @@ var AizekChatBot = ({ clientId, headers }) => {
   React.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const MessageBubble = ({ message }) => {
+  const MessageBubble = ({ message, onAction }) => {
     const isUser = message.role === "user";
+    const cleanContent = DOMPurify__default.default.sanitize(message.content);
+    const htmlRef = React.useRef(null);
+    React.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__ */ jsxRuntime.jsxs("div", { style: getMessageContainerStyles(isUser), children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: getMarkdownElementStyles(isUser) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], children: message.content }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessageBubbleStyles(isUser, message.isTyping ?? false), children: [
+        isUser && /* @__PURE__ */ jsxRuntime.jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], children: message.content }) }),
         message.isTyping && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
           display: "inline-flex",
           alignItems: "center",
           marginLeft: "8px"
         }, children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}) })
       ] }),
+      !isUser && /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: cleanContent } }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
         hour: "2-digit",
         minute: "2-digit"
@@ -844,60 +1089,102 @@ var AizekChatBot = ({ clientId, headers }) => {
           missingKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Eksik Header'lar:" }),
             /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: missingKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsxRuntime.jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              )
             ] }, index)) })
           ] }),
           emptyValueKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Bo\u015F De\u011Ferli Header'lar:" }),
             /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsxRuntime.jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                marginLeft: "6px",
-                fontSize: "11px",
-                opacity: 0.9
-              }, children: "(de\u011Fer bo\u015F olamaz)" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    marginLeft: "6px",
+                    fontSize: "11px",
+                    opacity: 0.9
+                  },
+                  children: "(de\u011Fer bo\u015F olamaz)"
+                }
+              )
             ] }, index)) })
           ] }),
           extraKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: "13px" }, children: "Fazla Header'lar:" }),
             /* @__PURE__ */ jsxRuntime.jsx("ul", { style: getAlertListStyles(), children: extraKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsxRuntime.jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              )
             ] }, index)) })
           ] })
         ] }),
@@ -980,7 +1267,18 @@ var AizekChatBot = ({ clientId, headers }) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() });
   };
   if (isConfigLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, false), children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: getFloatingButtonStyles(
+          buttonPosition,
+          buttonSize,
+          buttonBackground,
+          false
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() })
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -991,49 +1289,74 @@ var AizekChatBot = ({ clientId, headers }) => {
         className: "floating-chat-overlay"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen), className: "floating-chat-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getChatbotContainerStyles(), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getHeaderStyles(headerBackground), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: companyLogo,
-            alt: "Company Logo",
-            style: getLogoImageStyles()
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessagesContainerStyles(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderValidationAlert, {}),
-        messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getEmptyStateStyles(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "14px", opacity: 0.8 }, children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
-        ] }) : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message }, message.id)),
-        showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          MessageBubble,
-          {
-            message: {
-              id: "typing",
-              content: "",
-              role: "assistant",
-              timestamp: /* @__PURE__ */ new Date(),
-              isTyping: true
-            }
-          }
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: getChatContainerStyles(
+          buttonPosition,
+          chatWidth,
+          chatHeight,
+          isOpen
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {})
-    ] }) }),
+        className: "floating-chat-container",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getChatbotContainerStyles(), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getHeaderStyles(headerBackground), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: companyLogo,
+                alt: "Company Logo",
+                style: getLogoImageStyles()
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessagesContainerStyles(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HeaderValidationAlert, {}),
+            messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getEmptyStateStyles(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "14px", opacity: 0.8 }, children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
+            ] }) : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+              MessageBubble,
+              {
+                message,
+                onAction: handleSendMessage
+              },
+              message.id
+            )),
+            showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              MessageBubble,
+              {
+                message: {
+                  id: "typing",
+                  content: "",
+                  role: "assistant",
+                  timestamp: /* @__PURE__ */ new Date(),
+                  isTyping: true
+                },
+                onAction: handleSendMessage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {})
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: toggleChat,
-        style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, isOpen),
+        style: getFloatingButtonStyles(
+          buttonPosition,
+          buttonSize,
+          buttonBackground,
+          isOpen
+        ),
         onMouseEnter: (e) => {
           e.currentTarget.style.transform = isOpen ? "scale(0.85)" : "scale(1.1)";
           e.currentTarget.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.25)";