aizek-chatbot 1.0.9 → 1.0.10

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import OpenAI from 'openai';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import DOMPurify from 'dompurify';
 
 // src/utils/cx.ts
 function cx(...args) {
@@ -118,8 +119,6 @@ var useChatbot = (options = {}) => {
   const getHtmlUiInstructions = (config2) => {
     const headerColor = config2?.headerBackground || "#f5f5f5";
     const accentColor = config2?.buttonBackground || "#007bff";
-    const companyName = config2?.companyName || "AI Assistant";
-    const companyLogo = config2?.companyLogo || "\u{1F916}";
     return `
 You are a helpful assistant that creates UI using ONLY HTML tags.
 
@@ -128,27 +127,23 @@ Your task:
 - Render your response as a small HTML layout (card OR table OR mini-table).
 - Use inline CSS styles.
 - Use a clean, light (white-based) theme.
-- Use branding and colors from options.config.
+- Use colors from options.config (headerBackground, buttonBackground).
 - Return ONLY raw HTML (no markdown, no backticks, no JSON, no explanations).
 
 ====================
-THEME & BRANDING (from options.config)
+THEME (from options.config)
 ====================
 The chat widget configuration provides:
 
 - Header Background Color: ${headerColor}
 - Button / Accent Color:   ${accentColor}
-- Company Name:            ${companyName}
-- Company Logo:            ${companyLogo}
 
 How to use these:
 - Use Header Background Color mainly for top headers, title strips, or main highlight areas.
-- Use Button / Accent Color for important accents: borders, highlights, small badges, table headers, key text highlights, links, etc.
+- Use Button / Accent Color for important accents: borders, highlights, badges, table headers, key text highlights, links, etc.
 - Use a white or very light background for main surfaces.
 - Text color should generally be dark (#111\u2013#333) for readability.
 
-Do NOT create real interactive buttons. You can visually style elements using the accent color, but you must NOT use <button>.
-
 ====================
 ALLOWED / FORBIDDEN TAGS
 ====================
@@ -167,7 +162,10 @@ You may use ANY NON-INTERACTIVE HTML element, for example:
 - Links (non-interactive navigation style only):
   <a>
 
-FORBIDDEN (NEVER USE):
+GENERAL RULE:
+- In NORMAL responses, you MUST NOT use <button>.
+
+FORBIDDEN (NORMAL MODE):
 - <button>, <input>, <textarea>, <select>, <option>, <form>, <label>
 - <details>, <summary>, <dialog>
 - <video> or <audio> with controls for user interaction
@@ -214,15 +212,11 @@ General style (CARD or container):
   border-radius: 8px;
   padding: 12px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+Header area (if you use one):
 - You may add a top header area using the header background color:
   background: ${headerColor};
 
-Use branding:
-- Include the company logo and name in a subtle way when appropriate
-  (for example, in a small header bar):
-  - Logo (emoji or image) on the left,
-  - Company name text next to it.
-
 Typography:
 - Titles: 18\u201322px, bold.
 - Body text: 12\u201316px, regular.
@@ -244,6 +238,37 @@ Links:
 - Use the accent color for links:
   color: ${accentColor};
 
+====================
+CONFIRMATION MODE (SPECIAL CASE)
+====================
+Sometimes, during a workflow or tool usage, you may need the user to confirm an action
+(e.g., deleting a workflow, sending a transaction, performing an irreversible change).
+
+In such CONFIRMATION cases ONLY:
+- You ARE allowed to use exactly TWO <button> elements.
+- They MUST be rendered with these exact data attributes:
+
+  <button data-ai-action="approve">Onayla</button>
+  <button data-ai-action="cancel">Vazge\xE7</button>
+
+Rules for confirmation buttons:
+- Do NOT add onclick or any other JS event attributes.
+- Do NOT add custom data attributes besides data-ai-action.
+- The host application will detect these buttons by data-ai-action
+  and will send the following messages back to you:
+    "__APPROVE__" when the user clicks "Onayla"
+    "__CANCEL__"  when the user clicks "Vazge\xE7"
+
+Behavior after user choice:
+- When you receive "__APPROVE__", behave as if the user confirmed YES.
+- When you receive "__CANCEL__", behave as if the user declined or cancelled.
+- After that, go back to NORMAL mode and return standard HTML output again
+  (card, table, or mini table, WITHOUT <button>).
+
+IMPORTANT:
+- In NORMAL responses (no confirmation needed), you MUST NOT use <button>.
+- In CONFIRMATION MODE, you MUST use exactly these two buttons and NO others.
+
 ====================
 OUTPUT FORMAT
 ====================
@@ -255,16 +280,21 @@ Your final output MUST follow these rules:
 - Must use exactly ONE of: card, table, mini table.
 - Must respect allowed/forbidden tags.
 - Must use colors derived from:
-  - header_background
-  - button_background
+  - headerBackground
+  - buttonBackground
   and otherwise a light theme.
 
 ====================
 BEHAVIOR SUMMARY
 ====================
 1) Read the user message.
-2) Decide whether CARD, TABLE, or MINI TABLE is most suitable.
-3) Generate a single HTML layout using only allowed, non-interactive tags.
+2) If it is a normal response:
+   - Decide whether CARD, TABLE, or MINI TABLE is most suitable.
+   - Generate a single HTML layout using only allowed, non-interactive tags (no <button>).
+3) If you need explicit user confirmation:
+   - Enter CONFIRMATION MODE.
+   - Render a short explanation AND exactly two <button> elements with:
+       data-ai-action="approve" and data-ai-action="cancel".
 4) Style the layout with inline CSS using:
    - ${headerColor} for header areas,
    - ${accentColor} for accents,
@@ -300,7 +330,9 @@ BEHAVIOR SUMMARY
       if (resp && Array.isArray(resp)) {
         const messageItem = resp.find((item) => item.type === "message");
         if (messageItem && messageItem.content && Array.isArray(messageItem.content)) {
-          const textContent = messageItem.content.find((content) => content.type === "output_text");
+          const textContent = messageItem.content.find(
+            (content) => content.type === "output_text"
+          );
           if (textContent && textContent.text) {
             responseText = textContent.text;
           }
@@ -319,7 +351,10 @@ BEHAVIOR SUMMARY
       setIsLoading(false);
     } catch (error) {
       console.error("Error sending message:", error);
-      addMessage("\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", "assistant");
+      addMessage(
+        "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.",
+        "assistant"
+      );
       setIsLoading(false);
     }
   };
@@ -378,7 +413,8 @@ var mapApiSettingsToConfig = (apiSettings) => {
 };
 
 // src/styles/messageStyles.ts
-var getMessageBubbleStyles = (isUser) => ({
+var getMessageBubbleStyles = (isUser, isTyping) => ({
+  display: !isTyping && !isUser ? "none" : "block",
   maxWidth: "80%",
   padding: "12px 16px",
   borderRadius: isUser ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
@@ -854,7 +890,10 @@ var getAlertAnimationStyles = () => `
         }
     }
 `;
-var AizekChatBot = ({ clientId, headers }) => {
+var AizekChatBot = ({
+  clientId,
+  headers
+}) => {
   const defaultConfig = {
     welcomeMessage: "Merhaba! Size nas\u0131l yard\u0131mc\u0131 olabilirim?",
     buttonBackground: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
@@ -873,27 +912,47 @@ var AizekChatBot = ({ clientId, headers }) => {
   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 {
+    welcomeMessage,
+    buttonBackground,
+    placeholder,
+    buttonPosition,
+    buttonSize,
+    chatWidth,
+    chatHeight,
+    showTypingIndicator,
+    initialOpen,
+    headerBackground,
+    companyLogo,
+    companyName
+  } = config;
   const [isOpen, setIsOpen] = useState(false);
   const [headerValidation, setHeaderValidation] = useState(null);
   const [showAlert, setShowAlert] = useState(true);
+  console.log("Component rendered");
   useEffect(() => {
-    console.log("render");
+    console.log("use");
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
         const apiResponse = await fetchChatWidgetSettings(clientId);
         if (headers && apiResponse.data.auth_config) {
-          const validationResult = validateHeaders(headers, apiResponse.data.auth_config, {
-            allowExtra: false,
-            caseSensitive: true
-          });
+          const validationResult = validateHeaders(
+            headers,
+            apiResponse.data.auth_config,
+            {
+              allowExtra: false,
+              caseSensitive: true
+            }
+          );
           console.log(validationResult);
           setHeaderValidation(validationResult);
         }
         setFinalMcpUrl(apiResponse.data.mcp_url);
         setApiKey(apiResponse.data.openai_key || "");
-        const apiConfig = mapApiSettingsToConfig(apiResponse.data.chat_widget_settings);
+        const apiConfig = mapApiSettingsToConfig(
+          apiResponse.data.chat_widget_settings
+        );
         if (apiConfig) {
           setConfig(apiConfig);
         }
@@ -906,7 +965,12 @@ var AizekChatBot = ({ clientId, headers }) => {
     };
     loadConfig();
   }, [clientId]);
-  const internalChatbot = useChatbot({ mcpUrl: finalMcpUrl, apiKey, headers, config });
+  const internalChatbot = useChatbot({
+    mcpUrl: finalMcpUrl,
+    apiKey,
+    headers,
+    config
+  });
   const messages = internalChatbot.messages;
   const isLoading = internalChatbot.isLoading;
   const handleSendMessage = internalChatbot.sendMessage;
@@ -921,18 +985,39 @@ var AizekChatBot = ({ clientId, headers }) => {
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const MessageBubble = ({ message }) => {
+  const MessageBubble = ({ message, onAction }) => {
     const isUser = message.role === "user";
+    const cleanContent = DOMPurify.sanitize(message.content);
+    const htmlRef = useRef(null);
+    useEffect(() => {
+      if (!htmlRef.current || isUser) return;
+      const root = htmlRef.current;
+      const approveBtn = root.querySelector(
+        'button[data-ai-action="approve"]'
+      );
+      const cancelBtn = root.querySelector(
+        'button[data-ai-action="cancel"]'
+      );
+      const handleApprove = () => onAction("__APPROVE__");
+      const handleCancel = () => onAction("__CANCEL__");
+      if (approveBtn) approveBtn.addEventListener("click", handleApprove);
+      if (cancelBtn) cancelBtn.addEventListener("click", handleCancel);
+      return () => {
+        if (approveBtn) approveBtn.removeEventListener("click", handleApprove);
+        if (cancelBtn) cancelBtn.removeEventListener("click", handleCancel);
+      };
+    }, [message.content, isUser, onAction]);
     return /* @__PURE__ */ jsxs("div", { style: getMessageContainerStyles(isUser), children: [
       /* @__PURE__ */ jsx("style", { children: getMarkdownElementStyles(isUser) }),
-      /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser), children: [
-        isUser ? /* @__PURE__ */ jsx("div", { style: getMarkdownStyles(), className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: message.content } }),
+      /* @__PURE__ */ jsxs("div", { style: getMessageBubbleStyles(isUser, message.isTyping ?? false), children: [
+        isUser && /* @__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, {}) })
       ] }),
+      !isUser && /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: cleanContent } }),
       /* @__PURE__ */ jsx("div", { style: getTimeStyles(isUser), children: message.timestamp.toLocaleTimeString("tr-TR", {
         hour: "2-digit",
         minute: "2-digit"
@@ -977,60 +1062,102 @@ var AizekChatBot = ({ clientId, headers }) => {
           missingKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Eksik Header'lar:" }),
             /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: missingKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              )
             ] }, index)) })
           ] }),
           emptyValueKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Bo\u015F De\u011Ferli Header'lar:" }),
             /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: emptyValueKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key }),
-              /* @__PURE__ */ jsx("span", { style: {
-                marginLeft: "6px",
-                fontSize: "11px",
-                opacity: 0.9
-              }, children: "(de\u011Fer bo\u015F olamaz)" })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    marginLeft: "6px",
+                    fontSize: "11px",
+                    opacity: 0.9
+                  },
+                  children: "(de\u011Fer bo\u015F olamaz)"
+                }
+              )
             ] }, index)) })
           ] }),
           extraKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("strong", { style: { fontSize: "13px" }, children: "Fazla Header'lar:" }),
             /* @__PURE__ */ jsx("ul", { style: getAlertListStyles(), children: extraKeys.map((key, index) => /* @__PURE__ */ jsxs("li", { style: getAlertListItemStyles(), children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                position: "absolute",
-                left: "0",
-                top: "2px",
-                fontWeight: "bold"
-              }, children: "\u2022" }),
-              /* @__PURE__ */ jsx("code", { style: {
-                background: "rgba(255, 255, 255, 0.2)",
-                padding: "2px 6px",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "12px"
-              }, children: key })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "0",
+                    top: "2px",
+                    fontWeight: "bold"
+                  },
+                  children: "\u2022"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    background: "rgba(255, 255, 255, 0.2)",
+                    padding: "2px 6px",
+                    borderRadius: "4px",
+                    fontFamily: "monospace",
+                    fontSize: "12px"
+                  },
+                  children: key
+                }
+              )
             ] }, index)) })
           ] })
         ] }),
@@ -1113,7 +1240,18 @@ var AizekChatBot = ({ clientId, headers }) => {
     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__ */ jsx(
+      "div",
+      {
+        style: getFloatingButtonStyles(
+          buttonPosition,
+          buttonSize,
+          buttonBackground,
+          false
+        ),
+        children: /* @__PURE__ */ jsx("div", { style: getLoadingSpinnerStyles() })
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isOpen && /* @__PURE__ */ jsx(
@@ -1124,49 +1262,74 @@ var AizekChatBot = ({ clientId, headers }) => {
         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: [
-        /* @__PURE__ */ jsx(HeaderValidationAlert, {}),
-        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",
+      {
+        style: getChatContainerStyles(
+          buttonPosition,
+          chatWidth,
+          chatHeight,
+          isOpen
         ),
-        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsx(ChatInput, {})
-    ] }) }),
+        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: [
+            /* @__PURE__ */ jsx(HeaderValidationAlert, {}),
+            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,
+                onAction: handleSendMessage
+              },
+              message.id
+            )),
+            showTypingIndicator && isLoading && messages.length > 0 && /* @__PURE__ */ jsx(
+              MessageBubble,
+              {
+                message: {
+                  id: "typing",
+                  content: "",
+                  role: "assistant",
+                  timestamp: /* @__PURE__ */ new Date(),
+                  isTyping: true
+                },
+                onAction: handleSendMessage
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+          ] }),
+          /* @__PURE__ */ jsx(ChatInput, {})
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         onClick: toggleChat,
-        style: getFloatingButtonStyles(buttonPosition, buttonSize, buttonBackground, isOpen),
+        style: getFloatingButtonStyles(
+          buttonPosition,
+          buttonSize,
+          buttonBackground,
+          isOpen
+        ),
         onMouseEnter: (e) => {
           e.currentTarget.style.transform = isOpen ? "scale(0.85)" : "scale(1.1)";
           e.currentTarget.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.25)";