droplinked-chatbot-next 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -4730,31 +4730,59 @@ var useChatbot = function useChatbot(_ref) {
   };
 };
 
-var _excluded$a = ["color"];
-var SendSm = function SendSm(_ref) {
+var _excluded$b = ["color"];
+var SendMd = function SendMd(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? "black" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return jsxs("svg", _objectSpread2(_objectSpread2({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {}, {
     children: [jsx("path", {
-      d: "M4.29963 2.79051L12.7242 7.00511C12.9077 7.0989 13.0618 7.24144 13.1693 7.41707C13.2769 7.59258 13.3337 7.79437 13.3337 8.00007C13.3337 8.20588 13.2769 8.40756 13.1693 8.58319C13.0618 8.7587 12.9077 8.90124 12.7242 8.99503L4.29963 13.2096C4.08923 13.3176 3.84998 13.3563 3.61616 13.3203C3.38235 13.2842 3.16598 13.1752 2.99807 13.0089C2.83016 12.8426 2.71932 12.6275 2.68144 12.3945C2.64357 12.1614 2.6806 11.9223 2.78723 11.7116L4.40045 8.50314C4.47924 8.34708 4.52029 8.1748 4.52029 8.00007C4.52029 7.82534 4.47924 7.65306 4.40045 7.497L2.78723 4.28854C2.6806 4.07778 2.64357 3.83876 2.68144 3.60571C2.71932 3.37267 2.83016 3.15757 2.99807 2.99125C3.16598 2.82494 3.38235 2.71593 3.61616 2.67986C3.84998 2.64381 4.08923 2.68254 4.29963 2.79051Z",
+      d: "M5.3738 3.48795L15.9045 8.7562C16.1339 8.87345 16.3265 9.05162 16.4609 9.27115C16.5953 9.49055 16.6663 9.74278 16.6663 9.99991C16.6663 10.2572 16.5953 10.5093 16.4609 10.7288C16.3265 10.9482 16.1339 11.1264 15.9045 11.2436L5.3738 16.5119C5.1108 16.6469 4.81174 16.6952 4.51947 16.6502C4.22721 16.6051 3.95674 16.4688 3.74686 16.2609C3.53697 16.0531 3.39842 15.7842 3.35107 15.4929C3.30372 15.2015 3.35002 14.9027 3.48331 14.6393L5.49983 10.6287C5.59832 10.4337 5.64963 10.2183 5.64963 9.99991C5.64963 9.78149 5.59832 9.56615 5.49983 9.37107L3.48331 5.36049C3.35002 5.09705 3.30372 4.79827 3.35107 4.50696C3.39842 4.21565 3.53697 3.94678 3.74686 3.73888C3.95674 3.53099 4.22721 3.39473 4.51947 3.34965C4.81174 3.30458 5.1108 3.35299 5.3738 3.48795Z",
       stroke: color,
+      strokeWidth: "1.5",
       "stroke-miterlimit": "10"
     }), jsx("path", {
-      d: "M4.66699 8H7.33366",
+      d: "M5.83301 10H9.16634",
       stroke: color,
+      strokeWidth: "1.5",
       "stroke-miterlimit": "10",
       strokeLinecap: "round"
     })]
   }));
 };
 
+var _excluded$a = ["color"];
+var LetterMd = function LetterMd(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "black" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  return jsxs("svg", _objectSpread2(_objectSpread2({
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: [jsx("path", {
+      d: "M5.83301 7.5L9.99967 10.4167L14.1663 7.5",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), jsx("path", {
+      d: "M1.66699 14.1667V5.83334C1.66699 4.91286 2.41318 4.16667 3.33366 4.16667H16.667C17.5875 4.16667 18.3337 4.91286 18.3337 5.83334V14.1667C18.3337 15.0872 17.5875 15.8333 16.667 15.8333H3.33366C2.41318 15.8333 1.66699 15.0872 1.66699 14.1667Z",
+      stroke: color,
+      strokeWidth: "1.5"
+    })]
+  }));
+};
+
 function EmailCapture(_ref) {
   var onSubmit = _ref.onSubmit,
     _ref$isSubmitting = _ref.isSubmitting,
@@ -4788,7 +4816,9 @@ function EmailCapture(_ref) {
       border: "1px solid",
       borderColor: "#27272A",
       overflow: "hidden",
-      children: [jsx(Input, {
+      children: [jsx(LetterMd, {
+        color: "#7B7B7B"
+      }), jsx(Input, {
         value: email,
         onChange: function onChange(e) {
           return setEmail(e.target.value);
@@ -4834,8 +4864,8 @@ function EmailCapture(_ref) {
           color: "#525252",
           cursor: "not-allowed"
         },
-        px: 2,
-        py: 1,
+        px: 3,
+        py: 2,
         borderRadius: "md",
         height: "auto",
         minHeight: "auto",
@@ -4877,6 +4907,8 @@ function SuggestionChips(_ref) {
         fontSize: "sm",
         fontWeight: "normal",
         lineHeight: "tight",
+        _hover: "none",
+        _active: "none",
         children: s.text
       }, s.id);
     })
@@ -4954,7 +4986,7 @@ function MessageInput(_ref) {
               onKeyDown: function onKeyDown(e) {
                 return e.key === "Enter" && handleSend();
               },
-              placeholder: "  Send a message",
+              placeholder: "Send a message",
               bg: "transparent",
               color: "white",
               border: "none",
@@ -4976,7 +5008,6 @@ function MessageInput(_ref) {
               fontSize: "sm"
             })
           }), jsxs(HStack, {
-            p: 2,
             align: "center",
             w: "full",
             children: [user.logoUrl && jsx(HStack, {
@@ -4994,7 +5025,7 @@ function MessageInput(_ref) {
               onClick: handleSend,
               isDisabled: !input.trim() || isLoading,
               isLoading: isLoading,
-              size: "sm",
+              size: "md",
               bg: !input.trim() || isLoading ? "#262626" : "#2BCFA1",
               _hover: {
                 bg: !input.trim() || isLoading ? "#262626" : "#22B890"
@@ -5005,7 +5036,7 @@ function MessageInput(_ref) {
               },
               borderRadius: "lg",
               border: "none",
-              children: jsx(SendSm, {
+              children: jsx(SendMd, {
                 color: !input.trim() || isLoading ? "#525252" : "white"
               })
             })]
@@ -5024,13 +5055,9 @@ if (typeof document !== "undefined" && !document.getElementById("typing-indicato
   document.head.appendChild(styleElement);
 }
 var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(_ref) {
-  var isVisible = _ref.isVisible,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "normal" : _ref$size,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? "typing" : _ref$state;
+  var isVisible = _ref.isVisible;
   var getDotStyle = React__default.useMemo(function () {
-    return function (index, delay, small) {
+    return function (index, delay) {
       var animationDelay = "".concat(index * 0.2 + delay * 0.5, "s");
       return {
         animation: "typingDotBounce 1.6s ease-in-out infinite",
@@ -5063,85 +5090,40 @@ var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(
     };
   }, [isVisible]);
   if (!shouldRender) return null;
-  var isSmall = size === "small";
-  var dotSize = isSmall ? "6px" : "8px";
-  var smallDotSize = isSmall ? "5px" : "6px";
-  var containerPadding = isSmall ? "8px 12px" : "12px 16px";
-  var smallContainerPadding = isSmall ? "6px 10px" : "8px 12px";
-  var isCompleted = state === "completed";
   var TypingDots = React__default.useMemo(function () {
     return /*#__PURE__*/React__default.memo(function (_ref2) {
       var _ref2$delay = _ref2.delay,
-        delay = _ref2$delay === void 0 ? 0 : _ref2$delay,
-        _ref2$small = _ref2.small,
-        small = _ref2$small === void 0 ? false : _ref2$small;
+        delay = _ref2$delay === void 0 ? 0 : _ref2$delay;
       return jsx(HStack, {
-        gap: small ? "4px" : "6px",
+        gap: "4px",
         justify: "center",
         children: [0, 1, 2].map(function (index) {
           return jsx(Box, {
-            w: small ? smallDotSize : dotSize,
-            h: small ? smallDotSize : dotSize,
+            boxSize: "8px",
             bg: "#2BCFA1",
             borderRadius: "full",
-            style: getDotStyle(index, delay, small)
+            style: getDotStyle(index, delay)
           }, index);
         })
       });
     });
-  }, [getDotStyle, dotSize, smallDotSize]);
-  if (isCompleted) {
-    return jsx(Box, {
-      alignSelf: "flex-start",
-      maxW: "80%",
-      mb: isSmall ? 2 : 4,
-      style: containerAnimationStyle,
-      children: jsx(Box, {
-        bg: "rgba(43, 207, 161, 0.15)",
-        p: smallContainerPadding,
-        borderRadius: "16px",
-        w: "fit-content",
-        border: "1px solid rgba(43, 207, 161, 0.2)",
-        backdropFilter: "blur(10px)",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-        children: jsx(TypingDots, {
-          delay: 0.1,
-          small: true
-        })
-      })
-    });
-  }
+  }, [getDotStyle]);
   return jsx(Box, {
     alignSelf: "flex-start",
     maxW: "80%",
-    mb: isSmall ? 2 : 4,
+    mb: 2,
     style: containerAnimationStyle,
-    children: jsxs(Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      children: [jsx(Box, {
-        bg: "rgba(34, 197, 94, 0.2)",
-        p: containerPadding,
-        borderRadius: "20px",
-        w: "fit-content",
-        border: "1px solid rgba(34, 197, 94, 0.3)",
-        backdropFilter: "blur(10px)",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-        children: jsx(TypingDots, {})
-      }), jsx(Box, {
-        bg: "rgba(34, 197, 94, 0.2)",
-        p: smallContainerPadding,
-        borderRadius: "16px",
-        w: "fit-content",
-        border: "1px solid rgba(34, 197, 94, 0.3)",
-        backdropFilter: "blur(10px)",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-        children: jsx(TypingDots, {
-          delay: 0.1,
-          small: true
-        })
-      })]
+    children: jsx(Box, {
+      bg: "rgba(34, 197, 94, 0.2)",
+      p: "10px 14px",
+      borderRadius: "16px",
+      w: "fit-content",
+      border: "1px solid rgba(34, 197, 94, 0.3)",
+      backdropFilter: "blur(10px)",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+      children: jsx(TypingDots, {
+        delay: 0.1
+      })
     })
   });
 });
@@ -41625,38 +41607,36 @@ function GradualMessageDisplay(_ref) {
       flexDirection: "column",
       gap: 2,
       children: [(phase === "typing" || phase === "revealing") && jsx(TypingIndicator, {
-        isVisible: true,
-        size: "normal",
-        state: phase === "typing" ? "typing" : "completed"
+        isVisible: true
       }), (phase === "revealing" || phase === "complete") && jsx(Box, {
         position: "relative",
         borderRadius: "12px",
         _before: {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           zIndex: -1,
-          width: 'calc(100% + 1px)',
-          height: 'calc(100% + 1px)',
+          width: "calc(100% + 1px)",
+          height: "calc(100% + 1px)",
           top: 0,
           left: 0,
-          borderRadius: '12px',
-          backgroundSize: '400% 400%',
+          borderRadius: "12px",
+          backgroundSize: "400% 400%",
           opacity: phase === "revealing" ? 1 : 0,
-          transition: 'opacity 0.3s ease'
+          transition: "opacity 0.3s ease"
         },
         _after: {
           content: '""',
-          position: 'absolute',
+          position: "absolute",
           zIndex: -1,
-          width: 'calc(100% + 1px)',
-          height: 'calc(100% + 1px)',
+          width: "calc(100% + 1px)",
+          height: "calc(100% + 1px)",
           top: 0,
           left: 0,
-          borderRadius: '12px',
-          backgroundSize: '400% 400%',
+          borderRadius: "12px",
+          backgroundSize: "400% 400%",
           opacity: phase === "revealing" ? 1 : 0,
-          transition: 'opacity 0.3s ease',
-          filter: 'blur(100px)'
+          transition: "opacity 0.3s ease",
+          filter: "blur(100px)"
         },
         children: jsx(Box, {
           borderRadius: "11px",
@@ -65762,8 +65742,7 @@ function MessageList(_ref) {
             clearProcessingMessageId: clearProcessingMessageId
           }, message.id);
         }), isTyping && !currentlyDisplayingMessage && jsx(TypingIndicator, {
-          isVisible: true,
-          size: "normal"
+          isVisible: true
         })]
       })
     })
@@ -65864,7 +65843,9 @@ function HelloPage(_ref) {
   var userName = _ref.userName,
     onStartChat = _ref.onStartChat,
     _ref$isStartingChat = _ref.isStartingChat,
-    isStartingChat = _ref$isStartingChat === void 0 ? false : _ref$isStartingChat;
+    isStartingChat = _ref$isStartingChat === void 0 ? false : _ref$isStartingChat,
+    LinkComponent = _ref.LinkComponent;
+  var hasRouterLink = Boolean(LinkComponent);
   var navigationItems = [{
     label: "Documentation",
     href: "https://droplinked.gitbook.io/droplinked-store-front-help-center",
@@ -65873,10 +65854,6 @@ function HelloPage(_ref) {
     label: "Contact Us",
     href: "/contact-us",
     isExternal: false
-  }, {
-    label: "About Us",
-    href: "/about",
-    isExternal: false
   }, {
     label: "Changelog",
     href: "/analytics/changelog",
@@ -65890,114 +65867,142 @@ function HelloPage(_ref) {
     href: "https://www.youtube.com/watch?v=fuZLWeku6fw&list=PLwoJzeXHsBW6bAHmPz04RtWvpg_09-vqi",
     isExternal: true
   }];
-  return jsx(Box, {
+  return jsx(VStack, {
     w: "full",
-    h: "100%",
-    overflowY: "auto",
-    overflowX: "hidden",
-    p: 4,
-    children: jsxs(VStack, {
-      align: "stretch",
-      justify: "flex-end",
-      gap: 4,
-      height: "full",
-      children: [jsxs(Flex, {
-        flexDirection: "column",
-        justifyContent: "flex-end",
-        flexShrink: 0,
-        paddingTop: "48px",
-        children: [jsx(Text, {
-          color: "#2BCFA1",
-          fontSize: "3xl",
-          fontWeight: "bold",
-          lineHeight: "40px",
-          children: "Hi ".concat(userName ? userName : "", " \uD83D\uDC4B\uD83C\uDFFB")
-        }), jsx(Text, {
-          color: "white",
-          fontSize: "3xl",
-          fontWeight: "bold",
-          lineHeight: "40px",
-          children: "How can I help?"
-        })]
-      }), jsxs(RuledGrid, {
-        columns: 1,
-        borderRadius: 16,
-        bg: "#222",
-        overflow: "hidden",
-        children: [jsxs(VStack, {
-          align: "stretch",
-          gap: 3,
-          p: 4,
-          children: [jsx(Box, {
-            p: 2.5,
-            w: "fit-content",
-            bg: "rgba(43, 207, 161, 0.1)",
-            border: "1px solid",
-            borderColor: "rgba(43, 207, 161, 0.1)",
-            borderRadius: "lg",
-            children: jsx(AIMd, {
-              color: "#2BCFA1"
-            })
-          }), jsxs(VStack, {
-            gap: 0.5,
+    h: "full",
+    minH: 0,
+    spacing: 0,
+    flex: 1,
+    children: jsx(Box, {
+      flex: 1,
+      minH: 0,
+      w: "full",
+      overflowY: "auto",
+      overflowX: "hidden",
+      p: 4,
+      css: {
+        "&::-webkit-scrollbar": {
+          width: "6px"
+        },
+        "&::-webkit-scrollbar-track": {
+          background: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "3px"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: "rgba(255, 255, 255, 0.3)",
+          borderRadius: "3px"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          background: "rgba(255, 255, 255, 0.5)"
+        },
+        scrollBehavior: "smooth",
+        WebkitOverflowScrolling: "touch"
+      },
+      children: jsxs(VStack, {
+        align: "stretch",
+        justify: "flex-end",
+        gap: 4,
+        minH: "full",
+        children: [jsxs(Flex, {
+          flexDirection: "column",
+          justifyContent: "flex-end",
+          flexShrink: 0,
+          paddingTop: "48px",
+          children: [jsx(Text, {
+            color: "#2BCFA1",
+            fontSize: "3xl",
+            fontWeight: "bold",
+            lineHeight: "40px",
+            children: "Hi ".concat(userName ? userName : "", " \uD83D\uDC4B\uD83C\uDFFB")
+          }), jsx(Text, {
+            color: "white",
+            fontSize: "3xl",
+            fontWeight: "bold",
+            lineHeight: "40px",
+            children: "How can I help?"
+          })]
+        }), jsxs(RuledGrid, {
+          columns: 1,
+          borderRadius: 16,
+          bg: "#222",
+          overflow: "hidden",
+          children: [jsxs(VStack, {
             align: "stretch",
-            children: [jsx(Text, {
-              color: "white",
-              fontSize: "base",
-              fontWeight: "medium",
-              lineHeight: "normal",
-              children: "AI Merchant Assistant"
-            }), jsx(Text, {
-              color: "#737373",
-              fontSize: "sm",
-              fontWeight: "normal",
-              lineHeight: "tight",
-              children: "I can help with your shop setup, payment and more"
+            gap: 3,
+            p: 4,
+            children: [jsx(Box, {
+              p: 2.5,
+              w: "fit-content",
+              bg: "rgba(43, 207, 161, 0.1)",
+              border: "1px solid",
+              borderColor: "rgba(43, 207, 161, 0.1)",
+              borderRadius: "lg",
+              children: jsx(AIMd, {
+                color: "#2BCFA1"
+              })
+            }), jsxs(VStack, {
+              gap: 0.5,
+              align: "stretch",
+              children: [jsx(Text, {
+                color: "white",
+                fontSize: "base",
+                fontWeight: "medium",
+                lineHeight: "normal",
+                children: "AI Merchant Assistant"
+              }), jsx(Text, {
+                color: "#737373",
+                fontSize: "sm",
+                fontWeight: "normal",
+                lineHeight: "tight",
+                children: "I can help with your shop setup, payment and more"
+              })]
             })]
-          })]
-        }), jsx(Button, {
-          w: "full",
-          padding: "10px 14px",
-          borderRadius: 0,
-          variant: "ghost",
-          _hover: {
-            bg: "rgba(43, 207, 161, 0.1)"
-          },
-          fontSize: 14,
-          fontWeight: 500,
-          color: "#2BCFA1",
-          onClick: onStartChat,
-          isLoading: isStartingChat,
-          isDisabled: isStartingChat,
-          _disabled: {
-            color: "#525252",
-            cursor: "not-allowed"
-          },
-          children: "Start Chat"
-        })]
-      }), jsx(RuledGrid, {
-        columns: 1,
-        borderRadius: 16,
-        bg: "#222",
-        children: navigationItems.map(function (item, index) {
-          return jsxs(Link, {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            gap: 4,
-            padding: "12px 16px",
+          }), jsx(Button, {
+            w: "full",
+            padding: "10px 14px",
+            borderRadius: 0,
+            variant: "ghost",
+            _hover: {
+              bg: "rgba(43, 207, 161, 0.1)"
+            },
             fontSize: 14,
             fontWeight: 500,
-            color: "white",
-            textDecoration: "none",
-            href: item.href,
-            isExternal: item.isExternal,
-            children: [item.label, jsx(ExternalarrowMd, {
-              color: "white"
-            })]
-          }, index);
-        })
-      })]
+            color: "#2BCFA1",
+            onClick: onStartChat,
+            isLoading: isStartingChat,
+            isDisabled: isStartingChat,
+            _disabled: {
+              color: "#525252",
+              cursor: "not-allowed"
+            },
+            children: "Start Chat"
+          })]
+        }), jsx(RuledGrid, {
+          columns: 1,
+          borderRadius: 16,
+          bg: "#222",
+          children: navigationItems.map(function (item, index) {
+            return jsxs(Link, {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 4,
+              padding: "12px 16px",
+              fontSize: 14,
+              fontWeight: 500,
+              color: "white",
+              textDecoration: "none",
+              as: !item.isExternal && hasRouterLink ? LinkComponent : undefined,
+              to: !item.isExternal && hasRouterLink ? item.href : undefined,
+              href: item.isExternal || !hasRouterLink ? item.href : undefined,
+              isExternal: item.isExternal,
+              children: [item.label, jsx(ExternalarrowMd, {
+                color: "white"
+              })]
+            }, index);
+          })
+        })]
+      })
     })
   });
 }
@@ -66024,6 +66029,7 @@ function ChatDrawer(_ref) {
       flexDirection: "column",
       position: "relative",
       overflow: "hidden",
+      minH: 0,
       maxW: {
         base: "100%",
         md: "420px"
@@ -66173,24 +66179,26 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref2, _ref) {
     children = _ref2.children,
     disabled = _ref2.disabled;
     _ref2.portalled;
-    var content = _ref2.content,
-    portalRef = _ref2.portalRef,
-    placement = _ref2.placement,
+    var content = _ref2.content;
+    _ref2.portalRef;
+    var placement = _ref2.placement,
     rest = _objectWithoutProperties(_ref2, _excluded);
   if (disabled) return jsx(Fragment, {
     children: children
   });
   return jsx(Tooltip$1, _objectSpread2(_objectSpread2({
+    border: "1px solid",
+    borderColor: "#292929",
+    borderRadius: "6px",
+    padding: "4px 16px",
+    backgroundColor: "#1c1c1c",
+    color: "white",
+    placement: placement !== null && placement !== void 0 ? placement : "auto",
     label: content,
     hasArrow: !!showArrow,
-    portalProps: {
-      containerRef: portalRef
-    },
-    placement: placement
+    shouldWrapChildren: true
   }, rest), {}, {
-    children: jsx("span", {
-      children: children
-    })
+    children: children
   }));
 });
 
@@ -66433,6 +66441,9 @@ function Chatbot(_ref) {
         flex: 1,
         overflow: "hidden",
         p: 0,
+        minH: 0,
+        display: "flex",
+        flexDirection: "column",
         children: currentView === "hello" ? jsx(HelloPage, {
           userName: user === null || user === void 0 ? void 0 : user.name,
           onStartChat: handleStartChat,