aizek-chatbot 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -1,9 +1,10 @@
-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';
+"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";
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -18,18 +19,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) {
@@ -37,45 +38,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;
@@ -91,7 +92,7 @@ var useChatbot = (options = {}) => {
       id: generateId(),
       content,
       role,
-      timestamp: /* @__PURE__ */ new Date()
+      timestamp: /* @__PURE__ */ new Date(),
     };
     setMessages((prev) => [...prev, newMessage]);
     return newMessage;
@@ -101,23 +102,39 @@ var useChatbot = (options = {}) => {
     addMessage(message, "user");
     setIsLoading(true);
     try {
-      const resp = await client.responses.create({
-        model: "gpt-5",
-        tools: [
-          {
-            type: "mcp",
-            server_label: "aizek-mcp",
-            server_url: mcpUrl,
-            require_approval: "never",
-            headers: {
-              Authorization: options.userToken ? `Bearer ${options.userToken}` : ""
-            }
-          }
-        ],
-        input: message,
-        previous_response_id: responseId || void 0
-      });
-      console.log(resp);
+      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,
+        });
+      }
       setResponseId(resp.id);
       let responseText = "";
       if (resp && Array.isArray(resp)) {
@@ -150,7 +167,7 @@ var useChatbot = (options = {}) => {
     messages,
     isLoading,
     sendMessage,
-    addMessage
+    addMessage,
   };
 };
 
@@ -161,8 +178,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}`);
@@ -179,9 +196,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,
@@ -195,7 +212,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,
   };
 };
 
@@ -209,27 +226,29 @@ 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 {
@@ -390,7 +409,7 @@ var getMessageContainerStyles = (isUser) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: isUser ? "flex-end" : "flex-start",
-  width: "100%"
+  width: "100%",
 });
 
 // src/styles/inputStyles.ts
@@ -401,7 +420,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,
@@ -418,10 +437,12 @@ 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",
@@ -435,7 +456,7 @@ var getSendButtonStyles = (isLoading, hasMessage) => ({
   alignItems: "center",
   justifyContent: "center",
   transition: "all 0.2s ease",
-  fontSize: "16px"
+  fontSize: "16px",
 });
 
 // src/styles/headerStyles.ts
@@ -445,7 +466,7 @@ var getHeaderStyles = (headerBackground) => ({
   color: "#ffffff",
   display: "flex",
   alignItems: "center",
-  gap: "12px"
+  gap: "12px",
 });
 var getLogoContainerStyles = () => ({
   width: "40px",
@@ -456,34 +477,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();
@@ -506,7 +527,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) => ({
@@ -520,7 +541,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",
@@ -532,7 +553,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",
@@ -542,7 +563,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,
@@ -551,7 +572,7 @@ var getMessagesContainerStyles = () => ({
   display: "flex",
   flexDirection: "column",
   gap: "4px",
-  background: "#f8fafc"
+  background: "#f8fafc",
 });
 var getEmptyStateStyles = () => ({
   display: "flex",
@@ -561,7 +582,7 @@ var getEmptyStateStyles = () => ({
   height: "100%",
   color: "#64748b",
   textAlign: "center",
-  padding: "40px 20px"
+  padding: "40px 20px",
 });
 
 // src/styles/loadingStyles.ts
@@ -571,7 +592,7 @@ 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 }) => {
   const defaultConfig = {
@@ -586,7 +607,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);
@@ -631,21 +652,34 @@ 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("");
@@ -685,22 +719,20 @@ 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()),
@@ -712,10 +744,12 @@ 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() });
@@ -723,55 +757,73 @@ 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) => {
@@ -784,12 +836,26 @@ 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