@eshal-bot/chat-widget 0.1.6 → 0.1.7

package/dist/chat-widget.js

@@ -57713,8 +57713,16 @@
       onboardingCompleted = false
     } = _ref;
     const [showTooltip, setShowTooltip] = reactExports.useState(false);
+    const [tooltipPosition, setTooltipPosition] = reactExports.useState({
+      top: 0,
+      left: 0,
+      placement: 'top',
+      arrowOffset: 0
+    });
     const tooltipTimeoutRef = reactExports.useRef(null);
     const textareaRef = reactExports.useRef(null);
+    const voiceButtonRef = reactExports.useRef(null);
+    const tooltipRef = reactExports.useRef(null);
     useGoogleFont(fontFamily);
     reactExports.useEffect(() => {
       if (isOpen && !isMinimized) {
@@ -57773,6 +57781,71 @@
     };
     const tooltipMessage = getTooltipMessage();
 
+    // Calculate tooltip position dynamically
+    const calculateTooltipPosition = () => {
+      if (!voiceButtonRef.current) return;
+      const buttonRect = voiceButtonRef.current.getBoundingClientRect();
+      const tooltipWidth = 220; // maxWidth from style
+      const tooltipHeight = 60; // approximate height
+      const spacing = 8; // spacing between button and tooltip
+
+      // Try to position above first (preferred)
+      const spaceAbove = buttonRect.top;
+      const spaceBelow = window.innerHeight - buttonRect.bottom;
+      let placement = 'top';
+      let top = 0;
+      let left = 0;
+      if (spaceAbove >= tooltipHeight + spacing) {
+        // Position above
+        placement = 'top';
+        top = buttonRect.top - tooltipHeight - spacing;
+        left = buttonRect.right - tooltipWidth; // Right-align with button
+
+        // Ensure tooltip doesn't go off-screen to the left
+        if (left < 10) {
+          left = 10;
+        }
+        // Ensure tooltip doesn't go off-screen to the right
+        if (left + tooltipWidth > window.innerWidth - 10) {
+          left = window.innerWidth - tooltipWidth - 10;
+        }
+      } else if (spaceBelow >= tooltipHeight + spacing) {
+        // Position below as fallback
+        placement = 'bottom';
+        top = buttonRect.bottom + spacing;
+        left = buttonRect.right - tooltipWidth;
+
+        // Ensure tooltip doesn't go off-screen
+        if (left < 10) {
+          left = 10;
+        }
+        if (left + tooltipWidth > window.innerWidth - 10) {
+          left = window.innerWidth - tooltipWidth - 10;
+        }
+      } else {
+        // Not enough space above or below, position above anyway (may be partially visible)
+        placement = 'top';
+        top = Math.max(10, buttonRect.top - tooltipHeight - spacing);
+        left = buttonRect.right - tooltipWidth;
+        if (left < 10) {
+          left = 10;
+        }
+        if (left + tooltipWidth > window.innerWidth - 10) {
+          left = window.innerWidth - tooltipWidth - 10;
+        }
+      }
+
+      // Calculate arrow offset (center of button relative to tooltip left edge)
+      const buttonCenterX = buttonRect.left + buttonRect.width / 2;
+      const arrowOffset = buttonCenterX - left;
+      return {
+        top,
+        left,
+        placement,
+        arrowOffset
+      };
+    };
+
     // Handle tooltip show/hide
     const handleMouseEnter = () => {
       if (isVoiceButtonDisabled && tooltipMessage) {
@@ -57780,6 +57853,9 @@
           clearTimeout(tooltipTimeoutRef.current);
           tooltipTimeoutRef.current = null;
         }
+        // Calculate position and show tooltip
+        const position = calculateTooltipPosition();
+        setTooltipPosition(position);
         setShowTooltip(true);
       }
     };
@@ -57790,6 +57866,22 @@
       }
       setShowTooltip(false);
     };
+
+    // Update tooltip position on scroll/resize
+    reactExports.useEffect(() => {
+      if (showTooltip && tooltipMessage) {
+        const updatePosition = () => {
+          const position = calculateTooltipPosition();
+          setTooltipPosition(position);
+        };
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+          window.removeEventListener('scroll', updatePosition, true);
+          window.removeEventListener('resize', updatePosition);
+        };
+      }
+    }, [showTooltip, tooltipMessage]);
     reactExports.useEffect(() => {
       return () => {
         if (tooltipTimeoutRef.current) {
@@ -57845,6 +57937,7 @@
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx("button", {
+            ref: voiceButtonRef,
             type: "button",
             onClick: onVoiceToggle,
             className: "h-10 w-10 rounded-xl flex items-center justify-center transition-all duration-200 shadow-md ".concat(isVoiceSessionActive ? "bg-red-500 text-white hover:bg-red-600" : isDark ? "bg-gray-800 text-gray-200 hover:bg-gray-700" : "bg-white text-gray-600 hover:bg-gray-100", " ").concat(isVoiceButtonDisabled ? "opacity-60 cursor-not-allowed shadow-none" : ""),
@@ -57854,15 +57947,18 @@
             }) : /*#__PURE__*/jsxRuntimeExports.jsx(AudioLines, {
               className: "w-4 h-4"
             })
-          }), showTooltip && tooltipMessage && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-            className: "absolute bottom-full mb-1.5 right-0 px-3 py-1.5 text-xs rounded-md shadow-md pointer-events-none",
+          }), showTooltip && tooltipMessage && typeof document !== 'undefined' && /*#__PURE__*/reactDomExports.createPortal(/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+            ref: tooltipRef,
+            className: "px-3 py-1.5 text-xs rounded-md shadow-md pointer-events-none",
             style: {
+              position: "fixed",
+              top: "".concat(tooltipPosition.top, "px"),
+              left: "".concat(tooltipPosition.left, "px"),
               maxWidth: "220px",
               whiteSpace: "normal",
               wordWrap: "break-word",
               minWidth: "180px",
-              zIndex: 99999,
-              position: "absolute",
+              zIndex: 999999,
               backgroundColor: isDark ? "#1f2937" : "#ffffff",
               color: isDark ? "#f3f4f6" : "#111827",
               border: isDark ? "1px solid #374151" : "1px solid #e5e7eb",
@@ -57871,26 +57967,56 @@
             children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
               className: "text-left leading-relaxed",
               children: tooltipMessage
-            }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-              className: "absolute top-full right-4",
-              style: {
-                width: 0,
-                height: 0,
-                borderLeft: "5px solid transparent",
-                borderRight: "5px solid transparent",
-                borderTop: isDark ? "5px solid #374151" : "5px solid #e5e7eb"
-              }
-            }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-              className: "absolute top-full right-4 -mt-px",
-              style: {
-                width: 0,
-                height: 0,
-                borderLeft: "4px solid transparent",
-                borderRight: "4px solid transparent",
-                borderTop: isDark ? "4px solid #1f2937" : "4px solid #ffffff"
-              }
+            }), tooltipPosition.placement === 'top' && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+              children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "absolute top-full",
+                style: {
+                  left: "".concat(tooltipPosition.arrowOffset, "px"),
+                  transform: "translateX(-50%)",
+                  width: 0,
+                  height: 0,
+                  borderLeft: "5px solid transparent",
+                  borderRight: "5px solid transparent",
+                  borderTop: isDark ? "5px solid #374151" : "5px solid #e5e7eb"
+                }
+              }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "absolute top-full -mt-px",
+                style: {
+                  left: "".concat(tooltipPosition.arrowOffset, "px"),
+                  transform: "translateX(-50%)",
+                  width: 0,
+                  height: 0,
+                  borderLeft: "4px solid transparent",
+                  borderRight: "4px solid transparent",
+                  borderTop: isDark ? "4px solid #1f2937" : "4px solid #ffffff"
+                }
+              })]
+            }), tooltipPosition.placement === 'bottom' && /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+              children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "absolute bottom-full",
+                style: {
+                  left: "".concat(tooltipPosition.arrowOffset, "px"),
+                  transform: "translateX(-50%)",
+                  width: 0,
+                  height: 0,
+                  borderLeft: "5px solid transparent",
+                  borderRight: "5px solid transparent",
+                  borderBottom: isDark ? "5px solid #374151" : "5px solid #e5e7eb"
+                }
+              }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "absolute bottom-full -mb-px",
+                style: {
+                  left: "".concat(tooltipPosition.arrowOffset, "px"),
+                  transform: "translateX(-50%)",
+                  width: 0,
+                  height: 0,
+                  borderLeft: "4px solid transparent",
+                  borderRight: "4px solid transparent",
+                  borderBottom: isDark ? "4px solid #1f2937" : "4px solid #ffffff"
+                }
+              })]
             })]
-          })]
+          }), document.body)]
         }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
           onClick: isVoiceSessionActive && onBidiSubmit ? onBidiSubmit : onSend,
           disabled: isDisabled || isVoiceSessionActive && voiceStatus !== "connected",