reachat 2.0.0 → 2.0.2

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" } });
@@ -55,7 +55,12 @@
           ref: fileInputRef,
           className: "hidden",
           accept: allowedFiles.join(","),
-          onChange: onFileUpload
+          onChange: (e) => {
+            onFileUpload(e);
+            if (fileInputRef.current) {
+              fileInputRef.current.value = "";
+            }
+          }
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2339,144 +2344,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;