droplinked-chatbot-next 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as Chakra from '@chakra-ui/react';
-import { VStack, Text, Box, Input, Button, HStack, Image as Image$1, Spacer, IconButton, Link, Grid, Flex, Tooltip as Tooltip$1, Center, DrawerHeader, useDisclosure, DrawerBody } from '@chakra-ui/react';
+import { VStack, Text, Box, Input, Button, HStack, Image as Image$1, Spacer, IconButton, Link, Grid, Flex, Tooltip as Tooltip$1, Center, DrawerHeader, useDisclosure, useBreakpointValue, DrawerBody } from '@chakra-ui/react';
 import * as React from 'react';
 import React__default, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 
@@ -4968,80 +4968,72 @@ function MessageInput(_ref) {
       borderTop: "1px solid",
       borderColor: "#27272A",
       borderBottomRadius: 16,
-      children: jsx(VStack, {
-        gap: 6,
+      children: jsxs(VStack, {
+        gap: 4,
         w: "full",
         align: "stretch",
-        children: jsxs(VStack, {
-          gap: 4,
+        children: [jsx(Input, {
+          value: input,
+          onChange: function onChange(e) {
+            return setInput(e.target.value);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return e.key === "Enter" && handleSend();
+          },
+          placeholder: "Send a message",
+          bg: "transparent",
+          color: "white",
+          border: "none",
+          outline: "none",
+          _placeholder: {
+            color: "#737373"
+          },
+          _focus: {
+            border: "none",
+            outline: "none",
+            boxShadow: "none"
+          },
+          _active: {
+            border: "none",
+            outline: "none",
+            boxShadow: "none"
+          },
+          p: 3,
+          fontSize: "sm"
+        }), jsxs(HStack, {
+          align: "center",
           w: "full",
-          children: [jsx(Box, {
-            w: "full",
-            position: "relative",
-            children: jsx(Input, {
-              value: input,
-              onChange: function onChange(e) {
-                return setInput(e.target.value);
-              },
-              onKeyDown: function onKeyDown(e) {
-                return e.key === "Enter" && handleSend();
-              },
-              placeholder: "Send a message",
-              bg: "transparent",
-              color: "white",
-              border: "none",
-              outline: "none",
-              _placeholder: {
-                color: "#737373"
-              },
-              _focus: {
-                border: "none",
-                outline: "none",
-                boxShadow: "none"
-              },
-              _active: {
-                border: "none",
-                outline: "none",
-                boxShadow: "none"
-              },
-              p: 3,
-              fontSize: "sm"
+          children: [user.logoUrl && jsx(HStack, {
+            gap: 3,
+            children: jsx(Image$1, {
+              boxSize: "40px",
+              src: user.logoUrl,
+              alt: "User avatar",
+              border: "1px solid",
+              borderColor: "#27272A",
+              borderRadius: "24px"
+            })
+          }), jsx(Spacer, {}), jsx(IconButton, {
+            "aria-label": "Send message",
+            onClick: handleSend,
+            isDisabled: !input.trim() || isLoading,
+            isLoading: isLoading,
+            size: "md",
+            bg: !input.trim() || isLoading ? "#262626" : "#2BCFA1",
+            _hover: {
+              bg: !input.trim() || isLoading ? "#262626" : "#22B890"
+            },
+            _disabled: {
+              bg: "#262626",
+              cursor: "not-allowed"
+            },
+            borderRadius: "lg",
+            border: "none",
+            children: jsx(SendMd, {
+              color: !input.trim() || isLoading ? "#525252" : "white"
             })
-          }), jsxs(HStack, {
-            align: "center",
-            w: "full",
-            children: [user.logoUrl && jsx(HStack, {
-              gap: 3,
-              children: jsx(Image$1, {
-                boxSize: "40px",
-                src: user.logoUrl,
-                alt: "User avatar",
-                border: "1px solid",
-                borderColor: "#27272A",
-                borderRadius: "24px"
-              })
-            }), jsx(Spacer, {}), jsx(IconButton, {
-              "aria-label": "Send message",
-              onClick: handleSend,
-              isDisabled: !input.trim() || isLoading,
-              isLoading: isLoading,
-              size: "md",
-              bg: !input.trim() || isLoading ? "#262626" : "#2BCFA1",
-              _hover: {
-                bg: !input.trim() || isLoading ? "#262626" : "#22B890"
-              },
-              _disabled: {
-                bg: "#262626",
-                cursor: "not-allowed"
-              },
-              borderRadius: "lg",
-              border: "none",
-              children: jsx(SendMd, {
-                color: !input.trim() || isLoading ? "#525252" : "white"
-              })
-            })]
           })]
-        })
+        })]
       })
     })]
   });
@@ -5113,17 +5105,15 @@ var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(
     maxW: "80%",
     mb: 2,
     style: containerAnimationStyle,
-    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
-      })
+    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
     })
   });
 });
@@ -41396,8 +41386,8 @@ function MarkdownRenderer(_ref) {
             fontSize: fontSize,
             lineHeight: lineHeight,
             css: {
-              listStyleType: 'disc',
-              listStylePosition: 'outside'
+              listStylePosition: 'outside',
+              listStyleType: 'disc'
             },
             children: children
           });
@@ -41412,8 +41402,8 @@ function MarkdownRenderer(_ref) {
             fontSize: fontSize,
             lineHeight: lineHeight,
             css: {
-              listStyleType: 'decimal',
-              listStylePosition: 'outside'
+              listStylePosition: 'outside',
+              listStyleType: 'decimal'
             },
             children: children
           });
@@ -41586,109 +41576,93 @@ function GradualMessageDisplay(_ref) {
     return jsx(Box, {
       alignSelf: "flex-start",
       mb: 4,
-      children: jsx(Box, {
-        p: 4,
-        borderRadius: "12px",
-        borderBottomLeftRadius: "6px",
-        children: jsx(MarkdownRenderer, {
-          content: message,
-          fontSize: "sm",
-          lineHeight: "1.4",
-          color: "white"
-        })
+      p: 4,
+      borderRadius: "12px",
+      borderBottomLeftRadius: "6px",
+      children: jsx(MarkdownRenderer, {
+        content: message,
+        fontSize: "sm",
+        lineHeight: "1.4",
+        color: "white"
       })
     });
   }
-  return jsx(Box, {
+  return jsxs(Box, {
     alignSelf: "flex-start",
     mb: 4,
-    children: jsxs(Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      children: [(phase === "typing" || phase === "revealing") && jsx(TypingIndicator, {
-        isVisible: true
-      }), (phase === "revealing" || phase === "complete") && jsx(Box, {
-        position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    children: [(phase === "typing" || phase === "revealing") && jsx(TypingIndicator, {
+      isVisible: true
+    }), (phase === "revealing" || phase === "complete") && jsx(Box, {
+      position: "relative",
+      borderRadius: "12px",
+      _before: {
+        content: '""',
+        position: "absolute",
+        zIndex: -1,
+        width: "calc(100% + 1px)",
+        height: "calc(100% + 1px)",
+        top: 0,
+        left: 0,
         borderRadius: "12px",
-        _before: {
-          content: '""',
-          position: "absolute",
-          zIndex: -1,
-          width: "calc(100% + 1px)",
-          height: "calc(100% + 1px)",
-          top: 0,
-          left: 0,
-          borderRadius: "12px",
-          backgroundSize: "400% 400%",
-          opacity: phase === "revealing" ? 1 : 0,
-          transition: "opacity 0.3s ease"
-        },
-        _after: {
-          content: '""',
-          position: "absolute",
-          zIndex: -1,
-          width: "calc(100% + 1px)",
-          height: "calc(100% + 1px)",
-          top: 0,
-          left: 0,
-          borderRadius: "12px",
-          backgroundSize: "400% 400%",
-          opacity: phase === "revealing" ? 1 : 0,
-          transition: "opacity 0.3s ease",
-          filter: "blur(100px)"
-        },
-        children: jsx(Box, {
-          borderRadius: "11px",
-          p: "12px 16px",
-          position: "relative",
-          zIndex: 1,
-          children: displayedLines.map(function (line, lineIndex) {
-            var isCurrentLine = lineIndex === currentLineIndex && phase === "revealing";
-            return jsxs(Box, {
-              position: "relative",
-              css: isCurrentLine ? {
-                maskImage: "linear-gradient(to right, \n                                                black 0%, \n                                                black ".concat(Math.max(0, lineProgress - 10), "%, \n                                                transparent ").concat(lineProgress, "%, \n                                                transparent 100%)"),
-                WebkitMaskImage: "linear-gradient(to right, \n                                                black 0%, \n                                                black ".concat(Math.max(0, lineProgress - 10), "%, \n                                                transparent ").concat(lineProgress, "%, \n                                                transparent 100%)")
-              } : {},
-              children: [isCurrentLine && jsxs(Fragment, {
-                children: [jsx(Box, {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  css: {
-                    filter: "blur(800px)",
-                    opacity: 0,
-                    transform: "scale(500)"
-                  },
-                  children: jsx(MarkdownRenderer, {
-                    content: line || " ",
-                    fontSize: "sm",
-                    lineHeight: "1.4",
-                    color: "white"
-                  })
-                }), jsx(Box, {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  css: {
-                    filter: "blur(8px)",
-                    opacity: 0.7
-                  },
-                  children: jsx(MarkdownRenderer, {
-                    content: line || " ",
-                    fontSize: "sm",
-                    lineHeight: "1.4",
-                    color: "white"
-                  })
-                })]
+        backgroundSize: "400% 400%",
+        opacity: phase === "revealing" ? 1 : 0,
+        transition: "opacity 0.3s ease"
+      },
+      _after: {
+        content: '""',
+        position: "absolute",
+        zIndex: -1,
+        width: "calc(100% + 1px)",
+        height: "calc(100% + 1px)",
+        top: 0,
+        left: 0,
+        borderRadius: "12px",
+        backgroundSize: "400% 400%",
+        opacity: phase === "revealing" ? 1 : 0,
+        transition: "opacity 0.3s ease",
+        filter: "blur(100px)"
+      },
+      children: jsx(Box, {
+        borderRadius: "11px",
+        p: "12px 16px",
+        position: "relative",
+        zIndex: 1,
+        children: displayedLines.map(function (line, lineIndex) {
+          var isCurrentLine = lineIndex === currentLineIndex && phase === "revealing";
+          return jsxs(Box, {
+            position: "relative",
+            css: isCurrentLine ? {
+              WebkitMaskImage: "linear-gradient(to right, \n                                                black 0%, \n                                                black ".concat(Math.max(0, lineProgress - 10), "%, \n                                                transparent ").concat(lineProgress, "%, \n                                                transparent 100%)"),
+              maskImage: "linear-gradient(to right, \n                                                black 0%, \n                                                black ".concat(Math.max(0, lineProgress - 10), "%, \n                                                transparent ").concat(lineProgress, "%, \n                                                transparent 100%)")
+            } : {},
+            children: [isCurrentLine && jsxs(Fragment, {
+              children: [jsx(Box, {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                css: {
+                  filter: "blur(800px)",
+                  opacity: 0,
+                  transform: "scale(500)"
+                },
+                children: jsx(MarkdownRenderer, {
+                  content: line || " ",
+                  fontSize: "sm",
+                  lineHeight: "1.4",
+                  color: "white"
+                })
               }), jsx(Box, {
-                position: "relative",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
                 css: {
-                  filter: isCurrentLine ? "blur(".concat(Math.max(0, 6 - lineProgress / 100 * 6), "px)") : "blur(0px)",
-                  opacity: isCurrentLine ? Math.min(1, lineProgress / 70) : 1
+                  filter: "blur(8px)",
+                  opacity: 0.7
                 },
                 children: jsx(MarkdownRenderer, {
                   content: line || " ",
@@ -41697,11 +41671,23 @@ function GradualMessageDisplay(_ref) {
                   color: "white"
                 })
               })]
-            }, lineIndex);
-          })
+            }), jsx(Box, {
+              position: "relative",
+              css: {
+                filter: isCurrentLine ? "blur(".concat(Math.max(0, 6 - lineProgress / 100 * 6), "px)") : "blur(0px)",
+                opacity: isCurrentLine ? Math.min(1, lineProgress / 70) : 1
+              },
+              children: jsx(MarkdownRenderer, {
+                content: line || " ",
+                fontSize: "sm",
+                lineHeight: "1.4",
+                color: "white"
+              })
+            })]
+          }, lineIndex);
         })
-      })]
-    })
+      })
+    })]
   });
 }
 
@@ -41788,41 +41774,35 @@ function ErrorMessage(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  return jsxs(Box, {
+  return jsxs(HStack, {
     alignSelf: "stretch",
     p: 4,
     bg: "rgba(244, 63, 94, 0.05)",
     borderRadius: "lg",
     border: "1px solid",
     borderColor: "rgb(244, 63, 94)",
-    display: "flex",
-    alignItems: "flex-start",
+    align: "flex-start",
     gap: 4,
-    children: [jsxs(HStack, {
+    children: [jsx(WarningMd, {
+      color: "#F24"
+    }), jsxs(VStack, {
       flex: 1,
       align: "flex-start",
-      gap: 2,
-      children: [jsx(WarningMd, {
-        color: "#F24"
-      }), jsxs(VStack, {
-        flex: 1,
-        align: "flex-start",
-        gap: 1,
-        children: [jsx(Text, {
-          w: "full",
-          color: "white",
-          fontSize: "sm",
-          fontWeight: "bold",
-          lineHeight: "tight",
-          children: "Connection Lost"
-        }), jsx(Text, {
-          w: "full",
-          color: "white",
-          fontSize: "sm",
-          fontWeight: "normal",
-          lineHeight: "tight",
-          children: "Chatbot encountered connected issues."
-        })]
+      gap: 1,
+      children: [jsx(Text, {
+        w: "full",
+        color: "white",
+        fontSize: "sm",
+        fontWeight: "bold",
+        lineHeight: "tight",
+        children: "Connection Lost"
+      }), jsx(Text, {
+        w: "full",
+        color: "white",
+        fontSize: "sm",
+        fontWeight: "normal",
+        lineHeight: "tight",
+        children: "Chatbot encountered connected issues."
       })]
     }), showRetry && onRetry && jsx(Button, {
       px: "14px",
@@ -41877,19 +41857,17 @@ function MessageItem(_ref) {
   return jsx(Box, {
     alignSelf: "flex-end",
     maxW: "80%",
-    children: jsx(Box, {
-      p: 4,
-      borderRadius: "16px",
-      borderBottomRightRadius: "sm",
-      border: "1px solid",
-      borderColor: "#292929",
-      bg: "#222222",
-      color: "white",
-      children: jsx(Text, {
-        fontSize: "sm",
-        lineHeight: "1.4",
-        children: message.text
-      })
+    p: 4,
+    borderRadius: "16px",
+    borderBottomRightRadius: "sm",
+    border: "1px solid",
+    borderColor: "#292929",
+    bg: "#222222",
+    color: "white",
+    children: jsx(Text, {
+      fontSize: "sm",
+      lineHeight: "1.4",
+      children: message.text
     })
   });
 }
@@ -65657,10 +65635,6 @@ function MessageList(_ref) {
       "&::-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"
@@ -65668,6 +65642,10 @@ function MessageList(_ref) {
       "&::-webkit-scrollbar-thumb:hover": {
         background: "rgba(255, 255, 255, 0.5)"
       },
+      "&::-webkit-scrollbar-track": {
+        background: "rgba(255, 255, 255, 0.1)",
+        borderRadius: "3px"
+      },
       scrollBehavior: "smooth"
     },
     children: jsx(VStack, {
@@ -65721,8 +65699,8 @@ function MessageList(_ref) {
                 loop: true,
                 autoplay: true,
                 style: {
-                  width: "100%",
-                  height: "100%"
+                  height: "100%",
+                  width: "100%"
                 }
               })
             })]
@@ -66279,33 +66257,187 @@ function ChatHeader(_ref) {
 }
 
 function EmbeddedChatButton(_ref) {
-  var onClick = _ref.onClick;
-  return jsx(Button, {
+  var showIconOnly = _ref.showIconOnly,
+    onClick = _ref.onClick;
+  return jsxs(Button, {
     onClick: onClick,
     bg: "transparent",
-    color: "#2BCFA1",
-    border: "1px solid #292929",
-    borderRadius: "8px",
-    px: "14px",
-    py: "10px",
-    h: "auto",
-    fontWeight: "medium",
-    fontSize: "sm",
-    transition: "all 0.2s",
+    color: "white",
+    borderRadius: "12px",
+    px: "12px",
+    py: "8px",
+    h: "36px",
+    minW: "36px",
+    fontWeight: "500",
+    fontSize: "14px",
+    lineHeight: "20px",
+    transition: "all 0.2s ease-in-out",
+    position: "relative",
+    overflow: "hidden",
+    leftIcon: jsx(AIMd, {
+      color: "currentColor"
+    }),
     _hover: {
-      bg: "rgba(255, 255, 255, 0.05)",
-      borderColor: "#404040"
+      bg: "#2BCFA1",
+      color: "#FFFFFF"
     },
     _active: {
-      bg: "rgba(255, 255, 255, 0.1)"
+      bg: "#26B894",
+      color: "#FFFFFF"
     },
-    children: jsxs(Flex, {
-      align: "center",
-      gap: "6px",
-      children: [jsx(AIMd, {
-        color: "currentColor"
-      }), "AI Assistant"]
-    })
+    _focus: {
+      boxShadow: "none"
+    },
+    _focusVisible: {
+      boxShadow: "0 0 0 2px rgba(43, 207, 161, 0.3)"
+    },
+    children: [!showIconOnly && "AI Assistant", jsx(Box, {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      height: "36px",
+      pointerEvents: "none",
+      opacity: 0,
+      transition: "opacity 0.2s ease-in-out",
+      sx: {
+        '.chakra-button:hover &': {
+          opacity: 1
+        },
+        '.chakra-button:active &': {
+          opacity: 1
+        }
+      },
+      children: jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 188 48",
+        fill: "none",
+        preserveAspectRatio: "none",
+        children: [jsxs("g", {
+          clipPath: "url(#clip0_ai_overlay)",
+          children: [jsx("rect", {
+            width: "188",
+            height: "48",
+            rx: "12",
+            fill: "url(#paint0_radial_ai_overlay)"
+          }), jsx("g", {
+            style: {
+              mixBlendMode: "hard-light"
+            },
+            filter: "url(#filter0_f_ai_overlay)",
+            children: jsx("path", {
+              d: "M221.009 20.167C224.17 22.8539 225.861 25.6847 225.861 28.6104C225.861 45.9462 166.533 60 93.3477 60C20.1622 60 -39.167 45.9462 -39.167 28.6104C-39.1668 25.6847 -37.4754 22.8539 -34.3145 20.167C-18.7449 33.4011 32.5139 43.1123 93.3477 43.1123C154.181 43.1123 205.439 33.401 221.009 20.167Z",
+              fill: "#2BCFA1"
+            })
+          }), jsx("g", {
+            style: {
+              mixBlendMode: "color-dodge"
+            },
+            filter: "url(#filter1_f_ai_overlay)",
+            children: jsx("path", {
+              d: "M229.808 46.167C233.191 47.0105 234.999 47.8979 235 48.8164C235 54.2565 171.58 58.667 93.3474 58.667C15.1147 58.667 -48.3049 54.2565 -48.3049 48.8164C-48.3045 47.8979 -46.4965 47.0105 -43.1145 46.167C-26.4654 50.3193 28.3245 53.3672 93.3474 53.3672C158.369 53.3672 213.158 50.3192 229.808 46.167Z",
+              fill: "white"
+            })
+          }), jsx("g", {
+            style: {
+              mixBlendMode: "plus-lighter"
+            },
+            filter: "url(#filter2_f_ai_overlay)",
+            children: jsx("path", {
+              d: "M200.885 39.5C203.548 40.8829 204.972 42.3399 204.972 43.8457C204.972 52.7675 154.996 60 93.3469 60C31.6984 60 -18.2778 52.7675 -18.2781 43.8457C-18.2781 42.3401 -16.8545 40.8827 -14.1921 39.5C-1.07789 46.3111 42.1018 51.3086 93.3469 51.3086C144.591 51.3086 187.769 46.3108 200.885 39.5Z",
+              fill: "white"
+            })
+          })]
+        }), jsxs("defs", {
+          children: [jsxs("filter", {
+            id: "filter0_f_ai_overlay",
+            x: "-58.067",
+            y: "1.26699",
+            width: "302.828",
+            height: "77.633",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [jsx("feFlood", {
+              floodOpacity: "0",
+              result: "BackgroundImageFix"
+            }), jsx("feBlend", {
+              mode: "normal",
+              "in": "SourceGraphic",
+              in2: "BackgroundImageFix",
+              result: "shape"
+            }), jsx("feGaussianBlur", {
+              stdDeviation: "9.45",
+              result: "effect1_foregroundBlur_ai_overlay"
+            })]
+          }), jsxs("filter", {
+            id: "filter1_f_ai_overlay",
+            x: "-61.1716",
+            y: "33.3003",
+            width: "309.038",
+            height: "38.2333",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [jsx("feFlood", {
+              floodOpacity: "0",
+              result: "BackgroundImageFix"
+            }), jsx("feBlend", {
+              mode: "normal",
+              "in": "SourceGraphic",
+              in2: "BackgroundImageFix",
+              result: "shape"
+            }), jsx("feGaussianBlur", {
+              stdDeviation: "6.43333",
+              result: "effect1_foregroundBlur_ai_overlay"
+            })]
+          }), jsxs("filter", {
+            id: "filter2_f_ai_overlay",
+            x: "-30.5781",
+            y: "27.2",
+            width: "247.85",
+            height: "45.1",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [jsx("feFlood", {
+              floodOpacity: "0",
+              result: "BackgroundImageFix"
+            }), jsx("feBlend", {
+              mode: "normal",
+              "in": "SourceGraphic",
+              in2: "BackgroundImageFix",
+              result: "shape"
+            }), jsx("feGaussianBlur", {
+              stdDeviation: "6.15",
+              result: "effect1_foregroundBlur_ai_overlay"
+            })]
+          }), jsxs("radialGradient", {
+            id: "paint0_radial_ai_overlay",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(94 -5.33333) rotate(90) scale(70.8333 150.489)",
+            children: [jsx("stop", {
+              offset: "0.707302",
+              stopOpacity: "0"
+            }), jsx("stop", {
+              offset: "0.897964",
+              stopColor: "#2BCFA1"
+            })]
+          }), jsx("clipPath", {
+            id: "clip0_ai_overlay",
+            children: jsx("rect", {
+              width: "188",
+              height: "48",
+              rx: "12",
+              fill: "white"
+            })
+          })]
+        })]
+      })
+    })]
   });
 }
 
@@ -66393,6 +66525,7 @@ function FloatingChatButton(_ref) {
 }
 
 function Chatbot(_ref) {
+  var _useBreakpointValue;
   var apiBaseUrl = _ref.apiBaseUrl,
     apiKey = _ref.apiKey,
     _ref$buttonType = _ref.buttonType,
@@ -66423,10 +66556,15 @@ function Chatbot(_ref) {
     handleSendMessage = _useChatbot.handleSendMessage,
     handleRetryLastMessage = _useChatbot.handleRetryLastMessage,
     clearProcessingMessageId = _useChatbot.clearProcessingMessageId;
+  var showIconOnly = (_useBreakpointValue = useBreakpointValue({
+    base: true,
+    md: false
+  })) !== null && _useBreakpointValue !== void 0 ? _useBreakpointValue : false;
   return jsxs(Fragment, {
     children: [buttonType === "floating" ? jsx(FloatingChatButton, {
       onClick: onOpen
     }) : jsx(EmbeddedChatButton, {
+      showIconOnly: showIconOnly,
       onClick: onOpen
     }), jsxs(ChatDrawer, {
       isOpen: isOpen,