zenit-sdk 0.0.1 → 0.0.3

package/dist/index.js

@@ -3374,6 +3374,11 @@ var styles = {
     height: 56,
     padding: 0
   },
+  floatingButtonMobile: {
+    width: 56,
+    height: 56,
+    padding: 0
+  },
   // Panel (expandable)
   panel: {
     position: "fixed",
@@ -3623,7 +3628,9 @@ var FloatingChatBox = ({
   baseUrl,
   accessToken,
   getAccessToken,
-  onActionClick
+  onActionClick,
+  onOpenChange,
+  hideButton
 }) => {
   const [open, setOpen] = (0, import_react4.useState)(false);
   const [expanded, setExpanded] = (0, import_react4.useState)(false);
@@ -3642,6 +3649,14 @@ var FloatingChatBox = ({
   }, [accessToken, baseUrl, getAccessToken]);
   const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
   const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
+  (0, import_react4.useEffect)(() => {
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
+  (0, import_react4.useEffect)(() => {
+    if (open && isMobile) {
+      setExpanded(true);
+    }
+  }, [open, isMobile]);
   const scrollToBottom = (0, import_react4.useCallback)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -3663,8 +3678,9 @@ var FloatingChatBox = ({
   }, [messages, streamingText, scrollToBottom]);
   (0, import_react4.useEffect)(() => {
     if (!open) return;
+    if (isMobile && expanded) return;
     const handleClickOutside = (event) => {
-      if (open && chatBoxRef.current && !chatBoxRef.current.contains(event.target)) {
+      if (chatBoxRef.current && !chatBoxRef.current.contains(event.target)) {
         setOpen(false);
       }
     };
@@ -3672,7 +3688,7 @@ var FloatingChatBox = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [open]);
+  }, [open, isMobile, expanded]);
   (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 768px)");
@@ -3692,31 +3708,13 @@ var FloatingChatBox = ({
     };
   }, []);
   (0, import_react4.useEffect)(() => {
-    if (typeof window === "undefined" || typeof document === "undefined") return;
-    const mediaQuery = window.matchMedia("(max-width: 768px)");
-    const originalOverflow = document.body.style.overflow;
-    const updateOverflow = () => {
-      if (open && expanded && mediaQuery.matches) {
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.overflow = originalOverflow;
-      }
-    };
-    updateOverflow();
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", updateOverflow);
-    } else {
-      mediaQuery.addListener(updateOverflow);
-    }
+    if (typeof document === "undefined") return;
+    if (!open || !isMobile) return;
+    document.body.style.overflow = "hidden";
     return () => {
-      if (mediaQuery.removeEventListener) {
-        mediaQuery.removeEventListener("change", updateOverflow);
-      } else {
-        mediaQuery.removeListener(updateOverflow);
-      }
-      document.body.style.overflow = originalOverflow;
+      document.body.style.overflow = "";
     };
-  }, [open, expanded]);
+  }, [open, isMobile]);
   const addMessage = (0, import_react4.useCallback)((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
@@ -3925,13 +3923,18 @@ var FloatingChatBox = ({
             display: flex !important;
             flex-direction: column !important;
             overflow: hidden !important;
-            z-index: 3000 !important;
+            z-index: 100000 !important;
             padding-top: env(safe-area-inset-top);
-            padding-bottom: env(safe-area-inset-bottom);
           }
           .zenit-chat-panel.zenit-chat-panel--fullscreen .zenit-ai-body {
             flex: 1;
-            overflow: auto;
+            min-height: 0;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+          }
+          .zenit-chat-panel.zenit-chat-panel--fullscreen .zenit-ai-input-area {
+            flex-shrink: 0;
+            padding-bottom: max(14px, env(safe-area-inset-bottom));
           }
           .zenit-ai-button.zenit-ai-button--hidden-mobile {
             display: none !important;
@@ -3942,7 +3945,7 @@ var FloatingChatBox = ({
       "div",
       {
         ref: chatBoxRef,
-        className: `zenit-chat-panel${expanded ? " zenit-chat-panel--expanded" : ""}${expanded && isMobile ? " zenit-chat-panel--fullscreen" : ""}`,
+        className: `zenit-chat-panel${expanded ? " zenit-chat-panel--expanded" : ""}${isMobile ? " zenit-chat-panel--fullscreen" : ""}`,
         style: {
           ...styles.panel,
           ...expanded ? styles.panelExpanded : styles.panelNormal
@@ -4042,7 +4045,7 @@ var FloatingChatBox = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: messagesEndRef })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.inputWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "textarea",
               {
@@ -4079,20 +4082,20 @@ var FloatingChatBox = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    !(hideButton && !open) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
-        className: `zenit-ai-button ${open ? "open" : ""}${open && expanded && isMobile ? " zenit-ai-button--hidden-mobile" : ""}`,
+        className: `zenit-ai-button ${open ? "open" : ""}${open && isMobile ? " zenit-ai-button--hidden-mobile" : ""}`,
         style: {
           ...styles.floatingButton,
-          ...open ? styles.floatingButtonOpen : styles.floatingButtonClosed
+          ...open ? styles.floatingButtonOpen : isMobile ? styles.floatingButtonMobile : styles.floatingButtonClosed
         },
         onClick: () => setOpen((prev) => !prev),
         "aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
         children: open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Asistente IA" })
+          !isMobile && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Asistente IA" })
         ] })
       }
     )