aizek-chatbot 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -1,10 +1,9 @@
-"use client";
-import * as React from "react";
-import { useState, useEffect, useRef } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import OpenAI from "openai";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import OpenAI from 'openai';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -19,18 +18,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) {
@@ -38,45 +37,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.forwardRef(({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
-  const [hover, setHover] = React.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__ */ 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.forwardRef(
+  ({ variant = "primary", size = "md", style, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const [hover, setHover] = React.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__ */ 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;
@@ -92,7 +91,7 @@ var useChatbot = (options = {}) => {
       id: generateId(),
       content,
       role,
-      timestamp: /* @__PURE__ */ new Date(),
+      timestamp: /* @__PURE__ */ new Date()
     };
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
@@ -103,38 +102,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)) {
@@ -167,7 +149,7 @@ var useChatbot = (options = {}) => {
     messages,
     isLoading,
     sendMessage,
-    addMessage,
+    addMessage
   };
 };
 
@@ -178,8 +160,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}`);
@@ -196,9 +178,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,
@@ -212,7 +194,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
   };
 };
 
@@ -226,29 +208,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 {
@@ -409,7 +389,7 @@ var getMessageContainerStyles = (isUser) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: isUser ? "flex-end" : "flex-start",
-  width: "100%",
+  width: "100%"
 });
 
 // src/styles/inputStyles.ts
@@ -420,7 +400,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,
@@ -437,12 +417,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",
@@ -456,7 +434,7 @@ var getSendButtonStyles = (isLoading, hasMessage) => ({
   alignItems: "center",
   justifyContent: "center",
   transition: "all 0.2s ease",
-  fontSize: "16px",
+  fontSize: "16px"
 });
 
 // src/styles/headerStyles.ts
@@ -466,7 +444,7 @@ var getHeaderStyles = (headerBackground) => ({
   color: "#ffffff",
   display: "flex",
   alignItems: "center",
-  gap: "12px",
+  gap: "12px"
 });
 var getLogoContainerStyles = () => ({
   width: "40px",
@@ -477,34 +455,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();
@@ -527,7 +505,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) => ({
@@ -541,7 +519,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",
@@ -553,7 +531,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",
@@ -563,7 +541,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,
@@ -572,7 +550,7 @@ var getMessagesContainerStyles = () => ({
   display: "flex",
   flexDirection: "column",
   gap: "4px",
-  background: "#f8fafc",
+  background: "#f8fafc"
 });
 var getEmptyStateStyles = () => ({
   display: "flex",
@@ -582,7 +560,7 @@ var getEmptyStateStyles = () => ({
   height: "100%",
   color: "#64748b",
   textAlign: "center",
-  padding: "40px 20px",
+  padding: "40px 20px"
 });
 
 // src/styles/loadingStyles.ts
@@ -592,9 +570,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%)",
@@ -607,7 +585,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] = useState(defaultConfig);
   const [isConfigLoading, setIsConfigLoading] = useState(true);
@@ -635,7 +613,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;
@@ -652,34 +630,21 @@ var AizekChatBot = ({ clientId, userToken }) => {
   }, [messages]);
   const MessageBubble = ({ message }) => {
     const isUser = message.role === "user";
-    return /* @__PURE__ */ jsxs("div", {
-      style: getMessageContainerStyles(isUser),
-      children: [
-        /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
-        /* @__PURE__ */ jsxs("div", {
-          style: getMessageBubbleStyles(isUser),
-          children: [
-            /* @__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, {}),
-              }),
-          ],
-        }),
-        /* @__PURE__ */ jsx("div", {
-          style: getTimeStyles(isUser),
-          children: message.timestamp.toLocaleTimeString("tr-TR", {
-            hour: "2-digit",
-            minute: "2-digit",
-          }),
-        }),
-      ],
-    });
+    return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
+      /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
+      /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
+        /* @__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, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
+        hour: "2-digit",
+        minute: "2-digit"
+      }) })
+    ] });
   };
   const TypingDots = () => {
     const [dots, setDots] = useState("");
@@ -719,20 +684,22 @@ var AizekChatBot = ({ clientId, userToken }) => {
       textarea.style.height = "auto";
       textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
     };
-    return /* @__PURE__ */ jsxs("form", {
-      onSubmit: handleSubmit,
-      style: getInputContainerStyles(),
-      children: [
-        /* @__PURE__ */ jsx("textarea", {
+    return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: getInputContainerStyles(), children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
           ref: textareaRef,
           value: message,
           onChange: handleInputChange,
           onKeyDown: handleKeyDown,
           placeholder,
           disabled: isLoading,
-          style: getTextareaStyles(isLoading),
-        }),
-        /* @__PURE__ */ jsx("button", {
+          style: getTextareaStyles(isLoading)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
           type: "submit",
           disabled: isLoading || !message.trim(),
           style: getSendButtonStyles(isLoading, !!message.trim()),
@@ -744,12 +711,10 @@ var AizekChatBot = ({ clientId, userToken }) => {
           onMouseLeave: (e) => {
             e.currentTarget.style.transform = "scale(1)";
           },
-          children: isLoading
-            ? /* @__PURE__ */ jsx(LoadingSpinner, {})
-            : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }),
-        }),
-      ],
-    });
+          children: isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+        }
+      )
+    ] });
   };
   const LoadingSpinner = () => {
     return /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() });
@@ -757,73 +722,55 @@ var AizekChatBot = ({ clientId, userToken }) => {
   if (isConfigLoading) {
     return /* @__PURE__ */ jsx("div", { style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, false), children: /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() }) });
   }
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      isOpen &&
-        /* @__PURE__ */ jsx("div", {
-          style: getOverlayStyles(isOpen),
-          onClick: toggleChat,
-          className: "floating-chat-overlay",
-        }),
-      /* @__PURE__ */ jsx("div", {
-        style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen),
-        className: "floating-chat-container",
-        children: /* @__PURE__ */ jsxs("div", {
-          style: getChatbotContainerStyles(),
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              style: getHeaderStyles(headerBackground),
-              children: [
-                /* @__PURE__ */ jsx("div", {
-                  style: getLogoContainerStyles(),
-                  children: companyLogo
-                    ? companyLogo.startsWith("http") || companyLogo.startsWith("data:")
-                      ? /* @__PURE__ */ jsx("img", {
-                          src: companyLogo,
-                          alt: "Company Logo",
-                          style: getLogoImageStyles(),
-                        })
-                      : /* @__PURE__ */ jsx("span", { style: getLogoTextStyles(), children: companyLogo })
-                    : "\u{1F916}",
-                }),
-                /* @__PURE__ */ jsxs("div", {
-                  children: [/* @__PURE__ */ jsx("h3", { style: getCompanyNameStyles(), children: companyName }), /* @__PURE__ */ jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })],
-                }),
-              ],
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              style: getMessagesContainerStyles(),
-              children: [
-                messages.length === 0
-                  ? /* @__PURE__ */ jsxs("div", {
-                      style: getEmptyStateStyles(),
-                      children: [
-                        /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
-                        /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
-                        /* @__PURE__ */ 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__ */ jsx(MessageBubble, { message }, message.id)),
-                showTypingIndicator &&
-                  isLoading &&
-                  messages.length > 0 &&
-                  /* @__PURE__ */ jsx(MessageBubble, {
-                    message: {
-                      id: "typing",
-                      content: "",
-                      role: "assistant",
-                      timestamp: /* @__PURE__ */ new Date(),
-                      isTyping: true,
-                    },
-                  }),
-                /* @__PURE__ */ jsx("div", { ref: messagesEndRef }),
-              ],
-            }),
-            /* @__PURE__ */ jsx(ChatInput, {}),
-          ],
-        }),
-      }),
-      /* @__PURE__ */ jsx("button", {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: getOverlayStyles(isOpen),
+        onClick: toggleChat,
+        className: "floating-chat-overlay"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: getChatContainerStyles(buttonPosition, chatWidth, chatHeight, isOpen), className: "floating-chat-container", children: /* @__PURE__ */ jsxs("div", { style: getChatbotContainerStyles(), children: [
+      /* @__PURE__ */ jsxs("div", { style: getHeaderStyles(headerBackground), children: [
+        /* @__PURE__ */ jsx("div", { style: getLogoContainerStyles(), children: companyLogo ? companyLogo.startsWith("http") || companyLogo.startsWith("data:") ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: companyLogo,
+            alt: "Company Logo",
+            style: getLogoImageStyles()
+          }
+        ) : /* @__PURE__ */ jsx("span", { style: getLogoTextStyles(), children: companyLogo }) : "\u{1F916}" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { style: getCompanyNameStyles(), children: companyName }),
+          /* @__PURE__ */ jsx("p", { style: getStatusTextStyles(), children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: getMessagesContainerStyles(), children: [
+        messages.length === 0 ? /* @__PURE__ */ jsxs("div", { style: getEmptyStateStyles(), children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4AC}" }),
+          /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: welcomeMessage }),
+          /* @__PURE__ */ 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__ */ jsx(MessageBubble, { message }, message.id)),
+        showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            message: {
+              id: "typing",
+              content: "",
+              role: "assistant",
+              timestamp: /* @__PURE__ */ new Date(),
+              isTyping: true
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsx(ChatInput, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
         onClick: toggleChat,
         style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, isOpen),
         onMouseEnter: (e) => {
@@ -836,26 +783,12 @@ var AizekChatBot = ({ clientId, userToken }) => {
         },
         className: "floating-chat-button",
         "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
-        children: isOpen
-          ? /* @__PURE__ */ jsx("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
-            })
-          : /* @__PURE__ */ jsx("svg", {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }),
-            }),
-      }),
-    ],
-  });
+        children: isOpen ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
+      }
+    )
+  ] });
 };
 
 export { AizekChatBot, Button, useChatbot };
 //# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map