aizek-chatbot 1.0.0

package/dist/index.mjs

@@ -0,0 +1,790 @@
+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) {
+  return args.filter(Boolean).join(" ");
+}
+var base = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 12,
+  fontWeight: 600,
+  lineHeight: 1,
+  transition: "background-color .2s ease, color .2s ease, border-color .2s ease",
+  outline: "none",
+  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 }
+};
+var palette = {
+  brand: {
+    primary: "#2563eb",
+    primaryHover: "#1d4ed8"
+  }
+};
+function styleFor(variant) {
+  switch (variant) {
+    case "outline":
+      return {
+        background: "transparent",
+        color: palette.brand.primary,
+        border: `1px solid ${palette.brand.primary}`
+      };
+    case "ghost":
+      return {
+        background: "transparent",
+        color: palette.brand.primary,
+        border: "1px solid transparent"
+      };
+    default:
+      return {
+        background: palette.brand.primary,
+        color: "#fff",
+        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
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var useChatbot = (options = {}) => {
+  const { mcpUrl, apiKey } = options;
+  const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true });
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const generateId = () => {
+    return Date.now().toString() + Math.random().toString(36).substr(2, 9);
+  };
+  const addMessage = (content, role) => {
+    const newMessage = {
+      id: generateId(),
+      content,
+      role,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, newMessage]);
+    return newMessage;
+  };
+  const sendMessage = async (message) => {
+    if (!message.trim() || isLoading) return;
+    addMessage(message, "user");
+    setIsLoading(true);
+    console.log(options.userToken);
+    try {
+      const resp = await client.responses.create({
+        model: "gpt-5",
+        tools: [
+          {
+            type: "mcp",
+            server_label: "aizek-mcp",
+            server_url: mcpUrl,
+            require_approval: "never",
+            authorization: options.userToken ? `Bearer ${options.userToken}` : void 0
+          }
+        ],
+        input: message
+      });
+      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");
+          if (textContent && textContent.text) {
+            responseText = textContent.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?`;
+      }
+      addMessage(responseText, "assistant");
+      setIsLoading(false);
+    } catch (error) {
+      console.error("Error sending message:", error);
+      addMessage("\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", "assistant");
+      setIsLoading(false);
+    }
+  };
+  return {
+    messages,
+    isLoading,
+    sendMessage,
+    addMessage
+  };
+};
+
+// src/services/chatWidgetApi.ts
+var API_BASE_URL = "https://api.elviz24.com";
+var fetchChatWidgetSettings = async (clientId) => {
+  try {
+    const response = await fetch(`${API_BASE_URL}/ChatWidgetSettings/GetByClientId?client_id=${clientId}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching chat widget settings:", error);
+    throw error;
+  }
+};
+var mapApiSettingsToConfig = (apiSettings) => {
+  if (!apiSettings) {
+    return null;
+  }
+  const buttonSizeMap = {
+    "small": "sm",
+    "medium": "md",
+    "large": "lg"
+  };
+  return {
+    welcomeMessage: apiSettings.welcome_message,
+    buttonBackground: apiSettings.button_background,
+    placeholder: apiSettings.placeholder,
+    buttonPosition: apiSettings.button_position,
+    buttonSize: buttonSizeMap[apiSettings.button_size] || "md",
+    chatWidth: apiSettings.chat_width,
+    chatHeight: apiSettings.chat_height,
+    showTypingIndicator: apiSettings.show_typing_indicator,
+    initialOpen: apiSettings.initial_open,
+    headerBackground: apiSettings.header_background,
+    companyLogo: apiSettings.company_logo || void 0,
+    companyName: apiSettings.company_name
+  };
+};
+
+// src/styles/messageStyles.ts
+var getMessageBubbleStyles = (isUser) => ({
+  maxWidth: "80%",
+  padding: "12px 16px",
+  borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
+  marginBottom: "8px",
+  wordWrap: "break-word",
+  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"
+  }
+});
+var getTimeStyles = (isUser) => ({
+  fontSize: "11px",
+  opacity: 0.7,
+  marginTop: "4px",
+  textAlign: isUser ? "right" : "left"
+});
+var getMarkdownStyles = () => ({
+  lineHeight: 1.6
+});
+var getMarkdownElementStyles = (isUser) => `
+    .markdown-content p {
+        margin: 0 0 12px 0;
+        line-height: 1.6;
+    }
+    .markdown-content p:last-child {
+        margin-bottom: 0;
+    }
+    .markdown-content ul {
+        margin: 12px 0 16px 0;
+        padding-left: 0;
+        list-style: none;
+    }
+    .markdown-content li {
+        margin-bottom: 12px;
+        line-height: 1.6;
+        padding: 12px 16px;
+        background: ${isUser ? "rgba(255,255,255,0.1)" : "#ffffff"};
+        border-radius: 12px;
+        border: 1px solid ${isUser ? "rgba(255,255,255,0.2)" : "#e2e8f0"};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        position: relative;
+        transition: all 0.2s ease;
+    }
+    .markdown-content li:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    .markdown-content li::before {
+        content: "\u2022";
+        color: ${isUser ? "#ffffff" : "#667eea"};
+        font-weight: bold;
+        font-size: 18px;
+        position: absolute;
+        left: -8px;
+        top: 12px;
+    }
+    .markdown-content li strong {
+        display: block;
+        font-size: 15px;
+        margin-bottom: 4px;
+        color: ${isUser ? "#ffffff" : "#1e293b"};
+    }
+    .markdown-content li em {
+        display: block;
+        font-size: 13px;
+        opacity: 0.8;
+        margin-top: 4px;
+    }
+    .markdown-content strong {
+        font-weight: 600;
+        color: ${isUser ? "#ffffff" : "#1e293b"};
+    }
+    .markdown-content em {
+        font-style: italic;
+        opacity: 0.9;
+    }
+    .markdown-content code {
+        background: ${isUser ? "rgba(255,255,255,0.2)" : "#f1f5f9"};
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 13px;
+    }
+    .markdown-content pre {
+        background: ${isUser ? "rgba(255,255,255,0.1)" : "#f8fafc"};
+        padding: 12px;
+        border-radius: 8px;
+        overflow-x: auto;
+        margin: 8px 0;
+        border: 1px solid ${isUser ? "rgba(255,255,255,0.2)" : "#e2e8f0"};
+    }
+    .markdown-content pre code {
+        background: none;
+        padding: 0;
+    }
+    .markdown-content blockquote {
+        border-left: 3px solid ${isUser ? "rgba(255,255,255,0.5)" : "#cbd5e1"};
+        padding-left: 12px;
+        margin: 8px 0;
+        opacity: 0.8;
+    }
+    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+        margin: 16px 0 8px 0;
+        font-weight: 600;
+    }
+    .markdown-content h1 {
+        font-size: 18px;
+    }
+    .markdown-content h2 {
+        font-size: 16px;
+    }
+    .markdown-content h3 {
+        font-size: 15px;
+    }
+    .markdown-content table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 8px 0;
+    }
+    .markdown-content th, .markdown-content td {
+        border: 1px solid ${isUser ? "rgba(255,255,255,0.3)" : "#e2e8f0"};
+        padding: 8px 12px;
+        text-align: left;
+    }
+    .markdown-content th {
+        background: ${isUser ? "rgba(255,255,255,0.1)" : "#f8fafc"};
+        font-weight: 600;
+    }
+    
+    /* Enhanced list styling */
+    .markdown-content li {
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .markdown-content li::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        background: linear-gradient(135deg, ${isUser ? "#ffffff" : "#667eea"}, ${isUser ? "rgba(255,255,255,0.5)" : "#764ba2"});
+        border-radius: 0 2px 2px 0;
+    }
+    
+    /* Product name styling */
+    .markdown-content li strong:first-child {
+        color: ${isUser ? "#ffffff" : "#1e293b"};
+        font-size: 16px;
+        font-weight: 700;
+        display: block;
+        margin-bottom: 8px;
+    }
+    
+    /* Product details styling */
+    .markdown-content li strong:not(:first-child) {
+        color: ${isUser ? "#ffffff" : "#059669"};
+        font-size: 13px;
+        font-weight: 600;
+        margin-right: 8px;
+    }
+    
+    /* Add some spacing between product details */
+    .markdown-content li br + * {
+        margin-top: 4px;
+    }
+    
+    /* Hover effect enhancement */
+    .markdown-content li:hover::after {
+        width: 6px;
+        background: linear-gradient(135deg, ${isUser ? "#ffffff" : "#667eea"}, ${isUser ? "#ffffff" : "#764ba2"});
+    }
+`;
+var getMessageContainerStyles = (isUser) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: isUser ? "flex-end" : "flex-start",
+  width: "100%"
+});
+
+// src/styles/inputStyles.ts
+var getInputContainerStyles = () => ({
+  display: "flex",
+  alignItems: "flex-end",
+  gap: "12px",
+  padding: "16px",
+  background: "#ffffff",
+  borderTop: "1px solid #e2e8f0",
+  borderRadius: "0 0 12px 12px"
+});
+var getTextareaStyles = (isLoading) => ({
+  flex: 1,
+  minHeight: "44px",
+  maxHeight: "120px",
+  padding: "12px 16px",
+  border: "1px solid #e2e8f0",
+  borderRadius: "22px",
+  fontSize: "14px",
+  lineHeight: 1.4,
+  resize: "none",
+  outline: "none",
+  transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+  fontFamily: "inherit",
+  background: "#f8fafc",
+  color: "#334155",
+  ...isLoading ? {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  } : {}
+});
+var getSendButtonStyles = (isLoading, hasMessage) => ({
+  width: "44px",
+  height: "44px",
+  borderRadius: "50%",
+  border: "none",
+  background: isLoading || !hasMessage ? "#e2e8f0" : "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  color: "#ffffff",
+  cursor: isLoading || !hasMessage ? "not-allowed" : "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "all 0.2s ease",
+  fontSize: "16px"
+});
+
+// src/styles/headerStyles.ts
+var getHeaderStyles = (headerBackground) => ({
+  padding: "16px 20px",
+  background: headerBackground,
+  color: "#ffffff",
+  display: "flex",
+  alignItems: "center",
+  gap: "12px"
+});
+var getLogoContainerStyles = () => ({
+  width: "40px",
+  height: "40px",
+  borderRadius: "50%",
+  background: "rgba(255, 255, 255, 0.2)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "18px",
+  overflow: "hidden"
+});
+var getLogoImageStyles = () => ({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  borderRadius: "50%"
+});
+var getLogoTextStyles = () => ({
+  fontSize: "16px",
+  fontWeight: "bold"
+});
+var getCompanyNameStyles = () => ({
+  margin: 0,
+  fontSize: "16px",
+  fontWeight: 600
+});
+var getStatusTextStyles = () => ({
+  margin: 0,
+  fontSize: "12px",
+  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" }
+});
+var getFloatingButtonStyles = (buttonPosition, buttonSize, buttonBackground, isOpen) => {
+  const buttonSizes = getButtonSizes();
+  const buttonSizeStyle = buttonSizes[buttonSize];
+  return {
+    position: "fixed",
+    [buttonPosition === "bottom-left" ? "left" : "right"]: "20px",
+    bottom: "20px",
+    width: buttonSizeStyle.width,
+    height: buttonSizeStyle.height,
+    borderRadius: "50%",
+    background: buttonBackground,
+    border: "none",
+    color: "#ffffff",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: buttonSizeStyle.fontSize,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    transition: "all 0.3s ease",
+    zIndex: 1e3,
+    transform: isOpen ? "scale(0.9)" : "scale(1)"
+  };
+};
+var getChatContainerStyles = (buttonPosition, chatWidth, chatHeight, isOpen) => ({
+  position: "fixed",
+  [buttonPosition === "bottom-left" ? "left" : "right"]: "20px",
+  bottom: "90px",
+  width: chatWidth,
+  height: chatHeight,
+  zIndex: 9999999,
+  transform: isOpen ? "translateY(0) scale(1)" : "translateY(20px) scale(0.95)",
+  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"
+});
+var getOverlayStyles = (isOpen) => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: "rgba(0, 0, 0, 0.1)",
+  zIndex: 998,
+  opacity: isOpen ? 1 : 0,
+  visibility: isOpen ? "visible" : "hidden",
+  transition: "all 0.3s ease"
+});
+var getChatbotContainerStyles = () => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  background: "#ffffff",
+  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"
+});
+var getMessagesContainerStyles = () => ({
+  flex: 1,
+  overflowY: "auto",
+  padding: "16px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  background: "#f8fafc"
+});
+var getEmptyStateStyles = () => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  color: "#64748b",
+  textAlign: "center",
+  padding: "40px 20px"
+});
+
+// src/styles/loadingStyles.ts
+var getLoadingSpinnerStyles = () => ({
+  width: "16px",
+  height: "16px",
+  border: "2px solid transparent",
+  borderTop: "2px solid currentColor",
+  borderRadius: "50%",
+  animation: "spin 1s linear infinite"
+});
+var AizekChatBot = ({ clientId, userToken }) => {
+  const defaultConfig = {
+    welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
+    buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    placeholder: "Mesaj\u0131n\u0131z\u0131 yaz\u0131n...",
+    buttonPosition: "bottom-left",
+    buttonSize: "md",
+    chatWidth: "400px",
+    chatHeight: "600px",
+    showTypingIndicator: true,
+    initialOpen: true,
+    headerBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    companyLogo: void 0,
+    companyName: "AI Asistan"
+  };
+  const [config, setConfig] = useState(defaultConfig);
+  const [isConfigLoading, setIsConfigLoading] = useState(true);
+  const [finalMcpUrl, setFinalMcpUrl] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const { welcomeMessage, buttonBackground, placeholder, buttonPosition, buttonSize, chatWidth, chatHeight, showTypingIndicator, initialOpen, headerBackground, companyLogo, companyName } = config;
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        setIsConfigLoading(true);
+        const apiResponse = await fetchChatWidgetSettings(clientId);
+        setFinalMcpUrl(apiResponse.data.mcp_url);
+        setApiKey(apiResponse.data.openai_key || "");
+        const apiConfig = mapApiSettingsToConfig(apiResponse.data.chat_widget_settings);
+        if (apiConfig) {
+          setConfig(apiConfig);
+        }
+      } catch (error) {
+        console.error("Failed to load chat widget config:", error);
+        setFinalMcpUrl("");
+      } finally {
+        setIsConfigLoading(false);
+      }
+    };
+    loadConfig();
+  }, [clientId]);
+  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, userToken });
+  const messages = internalChatbot.messages;
+  const isLoading = internalChatbot.isLoading;
+  const handleSendMessage = internalChatbot.sendMessage;
+  const toggleChat = () => {
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+  };
+  useEffect(() => {
+    setIsOpen(initialOpen);
+  }, [initialOpen]);
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [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"
+      }) })
+    ] });
+  };
+  const TypingDots = () => {
+    const [dots, setDots] = useState("");
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setDots((prev) => {
+          if (prev === "...") return "";
+          return prev + ".";
+        });
+      }, 500);
+      return () => clearInterval(interval);
+    }, []);
+    return /* @__PURE__ */ jsx("span", { children: dots });
+  };
+  const ChatInput = () => {
+    const [message, setMessage] = useState("");
+    const textareaRef = useRef(null);
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      if (message.trim() && !isLoading) {
+        handleSendMessage(message.trim());
+        setMessage("");
+        if (textareaRef.current) {
+          textareaRef.current.style.height = "auto";
+        }
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit(e);
+      }
+    };
+    const handleInputChange = (e) => {
+      setMessage(e.target.value);
+      const textarea = e.target;
+      textarea.style.height = "auto";
+      textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+    };
+    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",
+        {
+          type: "submit",
+          disabled: isLoading || !message.trim(),
+          style: getSendButtonStyles(isLoading, !!message.trim()),
+          onMouseEnter: (e) => {
+            if (!isLoading && message.trim()) {
+              e.currentTarget.style.transform = "scale(1.05)";
+            }
+          },
+          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" }) })
+        }
+      )
+    ] });
+  };
+  const LoadingSpinner = () => {
+    return /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() });
+  };
+  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",
+      {
+        onClick: toggleChat,
+        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)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = isOpen ? "scale(0.9)" : "scale(1)";
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+        },
+        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" }) })
+      }
+    )
+  ] });
+};
+
+export { AizekChatBot, Button, useChatbot };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map