reachat 2.0.0 → 2.0.1

package/dist/index.css

@@ -648,15 +648,6 @@
   .z-9998 {
     z-index: 9998;
   }
-  .z-\[998\] {
-    z-index: 998;
-  }
-  .z-\[999\] {
-    z-index: 999;
-  }
-  .z-\[1000\] {
-    z-index: 1000;
-  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -1085,18 +1076,6 @@
   .border-collapse {
     border-collapse: collapse;
   }
-  .origin-bottom {
-    transform-origin: bottom;
-  }
-  .origin-left {
-    transform-origin: left;
-  }
-  .origin-right {
-    transform-origin: right;
-  }
-  .origin-top {
-    transform-origin: top;
-  }
   .-translate-x-2 {
     --tw-translate-x: calc(var(--spacing) * -2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2138,6 +2117,16 @@
       content: var(--tw-content);
     }
   }
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .hover\:border-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -2716,3 +2705,18 @@ body {
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}

package/dist/index.js

@@ -10,7 +10,7 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { A, m, B, z, C, v, F, s, f, g, h, i, j, M, k, N, b, p, o, e, d, l, c, q, n, T, u, t, r, x, y, w } from "./index-B1krf7tH.js";
+import { A, m, B, z, C, v, F, s, f, g, h, i, j, M, k, N, b, p, o, e, d, l, c, q, n, T, u, t, r, x, y, w } from "./index-NuRjkHCl.js";
 import "react/jsx-runtime";
 import "react";
 import "reablocks";

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.reactDom));
-})(this, function(exports2, jsxRuntime, reablocks, React, react, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, reactDom) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("motion/react"), require("@radix-ui/react-slot"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns"), require("@floating-ui/react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "motion/react", "@radix-ui/react-slot", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns", "@floating-ui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.reablocks, global.React, global.react, global.reactSlot, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns, global.react$1));
+})(this, function(exports2, jsxRuntime, reablocks, React, react, reactSlot, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns, react$1) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -2339,144 +2339,39 @@ ${response}`),
     const theme = reablocks.useComponentTheme("chat", customTheme);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.appbar), children: content });
   };
-  const defaultPositions = {
-    "bottom-left": "bottom-5 left-5",
-    "bottom-right": "bottom-5 right-5",
-    "top-left": "top-5 left-5",
-    "top-right": "top-5 right-5"
-  };
   const ChatBubble = React.memo(
     ({
       children,
       bubbleContent,
-      position = "bottom-left",
-      customPosition,
-      portalTarget = typeof document !== "undefined" ? document.body : null,
+      position = "right-end",
+      modifiers = [react$1.offset({ mainAxis: 0, crossAxis: -40 })],
       className
     }) => {
       const [isOpen, setIsOpen] = React.useState(false);
-      const bubbleRef = React.useRef(null);
-      const contentRef = React.useRef(null);
-      const [bubbleRect, setBubbleRect] = React.useState(null);
-      React.useEffect(() => {
-        if (bubbleRef.current) {
-          setBubbleRect(bubbleRef.current.getBoundingClientRect());
-        }
-      }, [isOpen]);
-      const handleClose = React.useCallback(() => {
-        setIsOpen(false);
-      }, []);
-      const handleToggle = React.useCallback(() => {
-        setIsOpen((prev) => !prev);
-      }, []);
-      const getContentPosition = () => {
-        if (!bubbleRect) return {};
-        const positions = {
-          "bottom-left": {
-            bottom: `calc(100vh - ${bubbleRect.top}px)`,
-            left: `${bubbleRect.right}px`
-          },
-          "bottom-right": {
-            bottom: `calc(100vh - ${bubbleRect.top}px)`,
-            right: `calc(100vw - ${bubbleRect.left}px)`
-          },
-          "top-left": {
-            top: `${bubbleRect.bottom}px`,
-            left: `${bubbleRect.right}px`
-          },
-          "top-right": {
-            top: `${bubbleRect.bottom}px`,
-            right: `calc(100vw - ${bubbleRect.left}px)`
+      const ref = React.useRef(null);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reablocks.ConnectedOverlay,
+          {
+            placement: position,
+            modifiers,
+            reference: ref.current,
+            open: isOpen,
+            onOpen: () => setIsOpen(true),
+            onClose: () => setIsOpen(false),
+            content: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
           }
-        };
-        return positions[position];
-      };
-      const content = React.useMemo(
-        () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: bubbleRef,
-              style: {
-                ...customPosition,
-                ...portalTarget ? { position: "absolute" } : {}
-              },
-              onClick: handleToggle,
-              className: reablocks.cn(
-                "z-[1000]",
-                !portalTarget && "fixed",
-                defaultPositions[position],
-                "cursor-pointer",
-                className
-              ),
-              role: "button",
-              tabIndex: 0,
-              "aria-label": "Open chat",
-              children: bubbleContent
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: children && isOpen && bubbleRect && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.motion.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 0.5 },
-                exit: { opacity: 0 },
-                className: "fixed inset-0 z-[998]",
-                onClick: handleClose
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.motion.div,
-              {
-                ref: contentRef,
-                initial: false,
-                animate: {
-                  opacity: 1,
-                  scale: 1,
-                  x: 0,
-                  pointerEvents: "auto"
-                },
-                exit: {
-                  opacity: 0,
-                  scale: 0.8,
-                  x: position.includes("right") ? 20 : -20,
-                  pointerEvents: "none"
-                },
-                transition: { type: "spring", duration: 0.5 },
-                className: reablocks.cn(
-                  "fixed z-[999]",
-                  position.includes("right") ? "origin-right" : "origin-left",
-                  position.includes("top") ? "origin-top" : "origin-bottom"
-                ),
-                style: getContentPosition(),
-                children
-              }
-            )
-          ] }) })
-        ] }),
-        [
-          children,
-          customPosition,
-          portalTarget,
-          position,
-          className,
-          bubbleContent,
-          isOpen,
-          handleClose,
-          handleToggle,
-          bubbleRect
-        ]
-      );
-      if (!portalTarget) {
-        return content;
-      }
-      try {
-        return reactDom.createPortal(content, portalTarget);
-      } catch (error) {
-        console.error("Failed to create portal for ChatBubble:", error);
-        return content;
-      }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className,
+            onClick: () => setIsOpen((prev) => !prev),
+            children: bubbleContent
+          }
+        )
+      ] });
     }
   );
   exports2.AppBar = AppBar;