aizek-chatbot 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -1,35 +1,24 @@
-"use client";
-"use strict";
+'use strict';
 
-var React = require("react");
-var jsxRuntime = require("react/jsx-runtime");
-var OpenAI = require("openai");
-var ReactMarkdown = require("react-markdown");
-var remarkGfm = require("remark-gfm");
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var OpenAI = require('openai');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
 
-function _interopDefault(e) {
-  return e && e.__esModule ? e : { default: e };
-}
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
-      if (k !== "default") {
+      if (k !== 'default') {
         var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(
-          n,
-          k,
-          d.get
-            ? d
-            : {
-                enumerable: true,
-                get: function () {
-                  return e[k];
-                },
-              }
-        );
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
       }
     });
   }
@@ -37,10 +26,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/ _interopNamespace(React);
-var OpenAI__default = /*#__PURE__*/ _interopDefault(OpenAI);
-var ReactMarkdown__default = /*#__PURE__*/ _interopDefault(ReactMarkdown);
-var remarkGfm__default = /*#__PURE__*/ _interopDefault(remarkGfm);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var OpenAI__default = /*#__PURE__*/_interopDefault(OpenAI);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -55,18 +44,18 @@ var base = {
   lineHeight: 1,
   transition: "background-color .2s ease, color .2s ease, border-color .2s ease",
   outline: "none",
-  cursor: "pointer",
+  cursor: "pointer"
 };
 var sizes = {
   sm: { height: 36, padding: "0 12px", fontSize: 14 },
   md: { height: 40, padding: "0 16px", fontSize: 16 },
-  lg: { height: 44, padding: "0 20px", fontSize: 18 },
+  lg: { height: 44, padding: "0 20px", fontSize: 18 }
 };
 var palette = {
   brand: {
     primary: "#2563eb",
-    primaryHover: "#1d4ed8",
-  },
+    primaryHover: "#1d4ed8"
+  }
 };
 function styleFor(variant) {
   switch (variant) {
@@ -74,45 +63,45 @@ function styleFor(variant) {
       return {
         background: "transparent",
         color: palette.brand.primary,
-        border: `1px solid ${palette.brand.primary}`,
+        border: `1px solid ${palette.brand.primary}`
       };
     case "ghost":
       return {
         background: "transparent",
         color: palette.brand.primary,
-        border: "1px solid transparent",
+        border: "1px solid transparent"
       };
     default:
       return {
         background: palette.brand.primary,
         color: "#fff",
-        border: "1px solid transparent",
+        border: "1px solid transparent"
       };
   }
 }
-var Button = React__namespace.forwardRef(({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
-  const [hover, setHover] = React__namespace.useState(false);
-  const hoverStyle =
-    variant === "primary"
-      ? { background: hover ? palette.brand.primaryHover : palette.brand.primary }
-      : variant === "outline"
-      ? { borderColor: hover ? palette.brand.primaryHover : palette.brand.primary }
-      : { background: hover ? "rgba(37, 99, 235, 0.08)" : "transparent" };
-  return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    ref,
-    className: cx("rui-btn", className),
-    style: { ...base, ...sizes[size], ...styleFor(variant), ...(hover ? hoverStyle : {}), ...style },
-    onMouseEnter: (e) => {
-      setHover(true);
-      onMouseEnter?.(e);
-    },
-    onMouseLeave: (e) => {
-      setHover(false);
-      onMouseLeave?.(e);
-    },
-    ...props,
-  });
-});
+var Button = React__namespace.forwardRef(
+  ({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const [hover, setHover] = React__namespace.useState(false);
+    const hoverStyle = variant === "primary" ? { background: hover ? palette.brand.primaryHover : palette.brand.primary } : variant === "outline" ? { borderColor: hover ? palette.brand.primaryHover : palette.brand.primary } : { background: hover ? "rgba(37, 99, 235, 0.08)" : "transparent" };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: cx("rui-btn", className),
+        style: { ...base, ...sizes[size], ...styleFor(variant), ...hover ? hoverStyle : {}, ...style },
+        onMouseEnter: (e) => {
+          setHover(true);
+          onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          setHover(false);
+          onMouseLeave?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
 Button.displayName = "Button";
 var useChatbot = (options = {}) => {
   const { mcpUrl, apiKey } = options;
@@ -128,7 +117,7 @@ var useChatbot = (options = {}) => {
       id: generateId(),
       content,
       role,
-      timestamp: /* @__PURE__ */ new Date(),
+      timestamp: /* @__PURE__ */ new Date()
     };
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
@@ -139,38 +128,21 @@ var useChatbot = (options = {}) => {
     setIsLoading(true);
     try {
       let resp;
-      if (options.userToken) {
-        resp = await client.responses.create({
-          model: "gpt-5",
-          tools: [
-            {
-              type: "mcp",
-              server_label: "aizek-mcp",
-              server_url: mcpUrl,
-              require_approval: "never",
-              headers: {
-                Authorization: `Bearer ${options.userToken}`,
-              },
-            },
-          ],
-          input: message,
-          previous_response_id: responseId || void 0,
-        });
-      } else {
-        resp = await client.responses.create({
-          model: "gpt-5",
-          tools: [
-            {
-              type: "mcp",
-              server_label: "aizek-mcp",
-              server_url: mcpUrl,
-              require_approval: "never",
-            },
-          ],
-          input: message,
-          previous_response_id: responseId || void 0,
-        });
-      }
+      console.log(options.headers);
+      resp = await client.responses.create({
+        model: "gpt-5",
+        tools: [
+          {
+            type: "mcp",
+            server_label: "aizek-mcp",
+            server_url: mcpUrl,
+            require_approval: "never",
+            headers: options.headers || {}
+          }
+        ],
+        input: message,
+        previous_response_id: responseId || void 0
+      });
       setResponseId(resp.id);
       let responseText = "";
       if (resp && Array.isArray(resp)) {
@@ -203,7 +175,7 @@ var useChatbot = (options = {}) => {
     messages,
     isLoading,
     sendMessage,
-    addMessage,
+    addMessage
   };
 };
 
@@ -214,8 +186,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}`);
@@ -232,9 +204,9 @@ var mapApiSettingsToConfig = (apiSettings) => {
     return null;
   }
   const buttonSizeMap = {
-    small: "sm",
-    medium: "md",
-    large: "lg",
+    "small": "sm",
+    "medium": "md",
+    "large": "lg"
   };
   return {
     welcomeMessage: apiSettings.welcome_message,
@@ -248,7 +220,7 @@ var mapApiSettingsToConfig = (apiSettings) => {
     initialOpen: apiSettings.initial_open,
     headerBackground: apiSettings.header_background,
     companyLogo: apiSettings.company_logo || void 0,
-    companyName: apiSettings.company_name,
+    companyName: apiSettings.company_name
   };
 };
 
@@ -262,29 +234,27 @@ var getMessageBubbleStyles = (isUser) => ({
   lineHeight: 1.4,
   fontSize: "14px",
   position: "relative",
-  ...(isUser
-    ? {
-        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-        color: "#ffffff",
-        marginLeft: "auto",
-        marginRight: "0",
-      }
-    : {
-        background: "#f8fafc",
-        color: "#334155",
-        border: "1px solid #e2e8f0",
-        marginLeft: "0",
-        marginRight: "auto",
-      }),
+  ...isUser ? {
+    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    color: "#ffffff",
+    marginLeft: "auto",
+    marginRight: "0"
+  } : {
+    background: "#f8fafc",
+    color: "#334155",
+    border: "1px solid #e2e8f0",
+    marginLeft: "0",
+    marginRight: "auto"
+  }
 });
 var getTimeStyles = (isUser) => ({
   fontSize: "11px",
   opacity: 0.7,
   marginTop: "4px",
-  textAlign: isUser ? "right" : "left",
+  textAlign: isUser ? "right" : "left"
 });
 var getMarkdownStyles = () => ({
-  lineHeight: 1.6,
+  lineHeight: 1.6
 });
 var getMarkdownElementStyles = (isUser) => `
     .markdown-content p {
@@ -445,7 +415,7 @@ var getMessageContainerStyles = (isUser) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: isUser ? "flex-end" : "flex-start",
-  width: "100%",
+  width: "100%"
 });
 
 // src/styles/inputStyles.ts
@@ -456,7 +426,7 @@ var getInputContainerStyles = () => ({
   padding: "16px",
   background: "#ffffff",
   borderTop: "1px solid #e2e8f0",
-  borderRadius: "0 0 12px 12px",
+  borderRadius: "0 0 12px 12px"
 });
 var getTextareaStyles = (isLoading) => ({
   flex: 1,
@@ -473,12 +443,10 @@ var getTextareaStyles = (isLoading) => ({
   fontFamily: "inherit",
   background: "#f8fafc",
   color: "#334155",
-  ...(isLoading
-    ? {
-        opacity: 0.6,
-        cursor: "not-allowed",
-      }
-    : {}),
+  ...isLoading ? {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  } : {}
 });
 var getSendButtonStyles = (isLoading, hasMessage) => ({
   width: "44px",
@@ -492,7 +460,7 @@ var getSendButtonStyles = (isLoading, hasMessage) => ({
   alignItems: "center",
   justifyContent: "center",
   transition: "all 0.2s ease",
-  fontSize: "16px",
+  fontSize: "16px"
 });
 
 // src/styles/headerStyles.ts
@@ -502,7 +470,7 @@ var getHeaderStyles = (headerBackground) => ({
   color: "#ffffff",
   display: "flex",
   alignItems: "center",
-  gap: "12px",
+  gap: "12px"
 });
 var getLogoContainerStyles = () => ({
   width: "40px",
@@ -513,34 +481,34 @@ var getLogoContainerStyles = () => ({
   alignItems: "center",
   justifyContent: "center",
   fontSize: "18px",
-  overflow: "hidden",
+  overflow: "hidden"
 });
 var getLogoImageStyles = () => ({
   width: "100%",
   height: "100%",
   objectFit: "cover",
-  borderRadius: "50%",
+  borderRadius: "50%"
 });
 var getLogoTextStyles = () => ({
   fontSize: "16px",
-  fontWeight: "bold",
+  fontWeight: "bold"
 });
 var getCompanyNameStyles = () => ({
   margin: 0,
   fontSize: "16px",
-  fontWeight: 600,
+  fontWeight: 600
 });
 var getStatusTextStyles = () => ({
   margin: 0,
   fontSize: "12px",
-  opacity: 0.8,
+  opacity: 0.8
 });
 
 // src/styles/containerStyles.ts
 var getButtonSizes = () => ({
   sm: { width: "50px", height: "50px", fontSize: "20px" },
   md: { width: "60px", height: "60px", fontSize: "24px" },
-  lg: { width: "70px", height: "70px", fontSize: "28px" },
+  lg: { width: "70px", height: "70px", fontSize: "28px" }
 });
 var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isOpen) => {
   const buttonSizes = getButtonSizes();
@@ -563,7 +531,7 @@ var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isO
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
     transition: "all 0.3s ease",
     zIndex: 1e3,
-    transform: isOpen ? "scale(0.9)" : "scale(1)",
+    transform: isOpen ? "scale(0.9)" : "scale(1)"
   };
 };
 var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) => ({
@@ -577,7 +545,7 @@ var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) =>
   opacity: isOpen ? 1 : 0,
   visibility: isOpen ? "visible" : "hidden",
   transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-  transformOrigin: buttonPosition === "bottom-left" ? "bottom left" : "bottom right",
+  transformOrigin: buttonPosition === "bottom-left" ? "bottom left" : "bottom right"
 });
 var getOverlayStyles = (isOpen) => ({
   position: "fixed",
@@ -589,7 +557,7 @@ var getOverlayStyles = (isOpen) => ({
   zIndex: 998,
   opacity: isOpen ? 1 : 0,
   visibility: isOpen ? "visible" : "hidden",
-  transition: "all 0.3s ease",
+  transition: "all 0.3s ease"
 });
 var getChatbotContainerStyles = () => ({
   display: "flex",
@@ -599,7 +567,7 @@ var getChatbotContainerStyles = () => ({
   borderRadius: "12px",
   boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
   border: "1px solid #e2e8f0",
-  overflow: "hidden",
+  overflow: "hidden"
 });
 var getMessagesContainerStyles = () => ({
   flex: 1,
@@ -608,7 +576,7 @@ var getMessagesContainerStyles = () => ({
   display: "flex",
   flexDirection: "column",
   gap: "4px",
-  background: "#f8fafc",
+  background: "#f8fafc"
 });
 var getEmptyStateStyles = () => ({
   display: "flex",
@@ -618,7 +586,7 @@ var getEmptyStateStyles = () => ({
   height: "100%",
   color: "#64748b",
   textAlign: "center",
-  padding: "40px 20px",
+  padding: "40px 20px"
 });
 
 // src/styles/loadingStyles.ts
@@ -628,9 +596,9 @@ var getLoadingSpinnerStyles = () => ({
   border: "2px solid transparent",
   borderTop: "2px solid currentColor",
   borderRadius: "50%",
-  animation: "spin 1s linear infinite",
+  animation: "spin 1s linear infinite"
 });
-var AizekChatBot = ({ clientId, userToken }) => {
+var AizekChatBot = ({ clientId, headers }) => {
   const defaultConfig = {
     welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
     buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
@@ -643,7 +611,7 @@ var AizekChatBot = ({ clientId, userToken }) => {
     initialOpen: true,
     headerBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
     companyLogo: void 0,
-    companyName: "AI Asistan",
+    companyName: "AI Asistan"
   };
   const [config, setConfig] = React.useState(defaultConfig);
   const [isConfigLoading, setIsConfigLoading] = React.useState(true);
@@ -671,7 +639,7 @@ var AizekChatBot = ({ clientId, userToken }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, userToken });
+  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -688,38 +656,21 @@ var AizekChatBot = ({ clientId, userToken }) => {
   }, [messages]);
   const MessageBubble = ({ message }) => {
     const isUser = message.role === "user";
-    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 }),
-            }),
-            message.isTyping &&
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  marginLeft: "8px",
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}),
-              }),
-          ],
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          style: getTimeStyles(isUser),
-          children: message.timestamp.toLocaleTimeString("tr-TR", {
-            hour: "2-digit",
-            minute: "2-digit",
-          }),
-        }),
-      ],
-    });
+    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 }) }),
+        message.isTyping && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          display: "inline-flex",
+          alignItems: "center",
+          marginLeft: "8px"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+        hour: "2-digit",
+        minute: "2-digit"
+      }) })
+    ] });
   };
   const TypingDots = () => {
     const [dots, setDots] = React.useState("");
@@ -759,20 +710,22 @@ var AizekChatBot = ({ clientId, userToken }) => {
       textarea.style.height = "auto";
       textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("form", {
-      onSubmit: handleSubmit,
-      style: getInputContainerStyles(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("textarea", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: getInputContainerStyles(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
           ref: textareaRef,
           value: message,
           onChange: handleInputChange,
           onKeyDown: handleKeyDown,
           placeholder,
           disabled: isLoading,
-          style: getTextareaStyles(isLoading),
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", {
+          style: getTextareaStyles(isLoading)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
           type: "submit",
           disabled: isLoading || !message.trim(),
           style: getSendButtonStyles(isLoading, !!message.trim()),
@@ -784,12 +737,10 @@ var AizekChatBot = ({ clientId, userToken }) => {
           onMouseLeave: (e) => {
             e.currentTarget.style.transform = "scale(1)";
           },
-          children: isLoading
-            ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
-            : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }),
-        }),
-      ],
-    });
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+        }
+      )
+    ] });
   };
   const LoadingSpinner = () => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLoadingSpinnerStyles() });
@@ -797,76 +748,55 @@ var AizekChatBot = ({ clientId, userToken }) => {
   if (isConfigLoading) {
     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("div", {
-          style: getOverlayStyles(isOpen),
-          onClick: toggleChat,
-          className: "floating-chat-overlay",
-        }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen),
-        className: "floating-chat-container",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          style: getChatbotContainerStyles(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              style: getHeaderStyles(headerBackground),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", {
-                  style: getLogoContainerStyles(),
-                  children: companyLogo
-                    ? companyLogo.startsWith("http") || companyLogo.startsWith("data:")
-                      ? /* @__PURE__ */ jsxRuntime.jsx("img", {
-                          src: companyLogo,
-                          alt: "Company Logo",
-                          style: getLogoImageStyles(),
-                        })
-                      : /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLogoTextStyles(), children: companyLogo })
-                    : "\u{1F916}",
-                }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" }),
-                  ],
-                }),
-              ],
-            }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              style: getMessagesContainerStyles(),
-              children: [
-                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", { ref: messagesEndRef }),
-              ],
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {}),
-          ],
-        }),
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: getOverlayStyles(isOpen),
+        onClick: toggleChat,
+        className: "floating-chat-overlay"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen), className: "floating-chat-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getChatbotContainerStyles(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getHeaderStyles(headerBackground), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: companyLogo,
+            alt: "Company Logo",
+            style: getLogoImageStyles()
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: getMessagesContainerStyles(), children: [
+        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", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChatInput, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
         onClick: toggleChat,
         style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, isOpen),
         onMouseEnter: (e) => {
@@ -879,28 +809,14 @@ var AizekChatBot = ({ clientId, userToken }) => {
         },
         className: "floating-chat-button",
         "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
-        children: isOpen
-          ? /* @__PURE__ */ jsxRuntime.jsx("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
-            })
-          : /* @__PURE__ */ jsxRuntime.jsx("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }),
-            }),
-      }),
-    ],
-  });
+        children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
+      }
+    )
+  ] });
 };
 
 exports.AizekChatBot = AizekChatBot;
 exports.Button = Button;
 exports.useChatbot = useChatbot;
 //# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map