@enjoys/react-chatbot-plugin 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import R, { createContext as L, useCallback as y, useContext as z, useEffect as E, useReducer as B, useRef as b, useState as S } from "react";
-import { Fragment as C, jsx as o, jsxs as d } from "react/jsx-runtime";
-function A(e, t) {
+import _, { createContext as N, useCallback as v, useContext as Y, useEffect as A, useMemo as U, useReducer as Q, useRef as C, useState as I } from "react";
+import { Fragment as K, jsx as a, jsxs as x } from "react/jsx-runtime";
+function J(e, t) {
   switch (t.type) {
     case "TOGGLE_OPEN":
       return {
@@ -50,19 +50,43 @@ function A(e, t) {
         ...e,
         isLoggedIn: t.payload
       };
-    case "CLEAR_QUICK_REPLIES":
+    case "CLEAR_QUICK_REPLIES": {
+      let r = -1;
+      for (let o = e.messages.length - 1; o >= 0; o--) if (e.messages[o].quickReplies) {
+        r = o;
+        break;
+      }
+      if (r === -1) return e;
+      const n = [...e.messages];
+      return n[r] = {
+        ...n[r],
+        quickReplies: void 0
+      }, {
+        ...e,
+        messages: n
+      };
+    }
+    case "RESET_CHAT":
       return {
         ...e,
-        messages: e.messages.map((n) => n.quickReplies ? {
-          ...n,
-          quickReplies: void 0
-        } : n)
+        messages: [],
+        isTyping: !1,
+        currentStepId: null,
+        collectedData: {}
+      };
+    case "UPDATE_MESSAGE":
+      return {
+        ...e,
+        messages: e.messages.map((r) => r.id === t.payload.id ? {
+          ...r,
+          ...t.payload.updates
+        } : r)
       };
     default:
       return e;
   }
 }
-var _ = (e) => ({
+var V = (e) => ({
   isOpen: e.defaultOpen ?? !1,
   messages: e.initialMessages ?? [],
   isTyping: !1,
@@ -70,33 +94,69 @@ var _ = (e) => ({
   currentStepId: null,
   collectedData: {},
   isLoggedIn: !e.loginForm
-}), F = L(null);
-function D() {
-  const e = z(F);
+}), $ = N(null);
+function j() {
+  const e = Y($);
   if (!e) throw new Error("useChatContext must be used within ChatProvider");
   return e;
 }
-var W = {
-  primaryColor: "#0066FF",
-  headerBg: "#0066FF",
+var X = {
+  primaryColor: "#6C5CE7",
+  headerBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
   headerText: "#FFFFFF",
-  bubbleBg: "#F1F1F1",
-  bubbleText: "#333333",
-  userBubbleBg: "#0066FF",
+  bubbleBg: "rgba(241, 243, 249, 0.85)",
+  bubbleText: "#2D3436",
+  userBubbleBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
   userBubbleText: "#FFFFFF",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: "14px",
-  borderRadius: "12px",
-  windowWidth: "380px",
-  windowHeight: "550px"
+  borderRadius: "20px",
+  windowWidth: "400px",
+  windowHeight: "600px",
+  mode: "light"
+}, Z = {
+  headerBg: "linear-gradient(135deg, #2D1B69 0%, #4A3298 100%)",
+  headerText: "#F0F0FF",
+  bubbleBg: "rgba(45, 45, 70, 0.85)",
+  bubbleText: "#E8E8F0",
+  userBubbleBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
+  userBubbleText: "#FFFFFF"
 };
-function T(e) {
-  return {
-    ...W,
+function O(e) {
+  const t = {
+    ...X,
+    ...e
+  };
+  return t.mode === "dark" ? {
+    ...t,
+    ...Z,
     ...e
+  } : t;
+}
+function ee(e) {
+  return {
+    "--cb-primary": e.primaryColor,
+    "--cb-header-bg": e.headerBg,
+    "--cb-header-text": e.headerText,
+    "--cb-bubble-bg": e.bubbleBg,
+    "--cb-bubble-text": e.bubbleText,
+    "--cb-user-bubble-bg": e.userBubbleBg,
+    "--cb-user-bubble-text": e.userBubbleText,
+    "--cb-font-family": e.fontFamily,
+    "--cb-font-size": e.fontSize,
+    "--cb-border-radius": e.borderRadius,
+    "--cb-window-width": e.windowWidth,
+    "--cb-window-height": e.windowHeight,
+    "--cb-bg": e.mode === "dark" ? "rgba(22, 22, 40, 0.95)" : "rgba(255, 255, 255, 0.92)",
+    "--cb-border": e.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
+    "--cb-input-bg": e.mode === "dark" ? "rgba(40, 40, 65, 0.8)" : "rgba(245, 247, 252, 0.9)",
+    "--cb-input-border": e.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)",
+    "--cb-input-text": e.mode === "dark" ? "#E0E0E0" : "#2D3436",
+    "--cb-branding-bg": e.mode === "dark" ? "rgba(20, 20, 35, 0.8)" : "rgba(250, 250, 255, 0.8)"
   };
 }
-function M(e, t) {
+function te(e, t) {
+  const r = e.mode === "dark";
   return {
     root: {
       fontFamily: e.fontFamily,
@@ -105,18 +165,18 @@ function M(e, t) {
     },
     launcher: {
       position: "fixed",
-      width: "60px",
-      height: "60px",
+      width: "62px",
+      height: "62px",
       borderRadius: "50%",
-      backgroundColor: e.primaryColor,
+      background: e.headerBg,
       color: "#fff",
       border: "none",
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-      transition: "transform 0.2s ease",
+      boxShadow: "0 6px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.1)",
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
       zIndex: 9998,
       ...t?.launcher
     },
@@ -124,330 +184,607 @@ function M(e, t) {
       position: "fixed",
       width: e.windowWidth,
       height: e.windowHeight,
-      maxHeight: "80vh",
+      maxHeight: "85vh",
       borderRadius: e.borderRadius,
       overflow: "hidden",
       display: "flex",
       flexDirection: "column",
-      boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
-      backgroundColor: "#FFFFFF",
+      boxShadow: r ? "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)" : "0 20px 60px rgba(108, 92, 231, 0.15), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)",
+      backgroundColor: r ? "rgba(22, 22, 40, 0.95)" : "rgba(255, 255, 255, 0.95)",
+      backdropFilter: "blur(20px)",
+      WebkitBackdropFilter: "blur(20px)",
+      border: r ? "1px solid rgba(255,255,255,0.08)" : "1px solid rgba(255,255,255,0.8)",
       zIndex: 9999,
+      animation: "cb-window-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
       ...t?.window
     },
     header: {
-      backgroundColor: e.headerBg,
+      background: e.headerBg,
       color: e.headerText,
-      padding: "16px 20px",
+      padding: "18px 20px",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       gap: "12px",
       flexShrink: 0,
+      position: "relative",
+      overflow: "hidden",
       ...t?.header
     },
     messageList: {
       flex: 1,
       overflowY: "auto",
-      padding: "16px",
+      padding: "20px 16px",
       display: "flex",
       flexDirection: "column",
-      gap: "8px",
+      gap: "10px",
+      background: r ? "linear-gradient(180deg, rgba(22, 22, 40, 0.98) 0%, rgba(30, 30, 50, 0.98) 100%)" : "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%)",
       ...t?.messageList
     },
     inputArea: {
-      padding: "12px 16px",
-      borderTop: "1px solid #E8E8E8",
-      display: "flex",
-      gap: "8px",
-      alignItems: "flex-end",
+      padding: "12px 16px 14px",
+      borderTop: `1px solid ${r ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)"}`,
+      backgroundColor: r ? "rgba(20, 20, 38, 0.9)" : "rgba(255, 255, 255, 0.95)",
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
       flexShrink: 0,
       ...t?.inputArea
     },
     botBubble: {
-      backgroundColor: e.bubbleBg,
-      color: e.bubbleText,
-      padding: "10px 14px",
-      borderRadius: "16px 16px 16px 4px",
-      maxWidth: "80%",
+      background: r ? "rgba(45, 45, 70, 0.7)" : "rgba(241, 243, 249, 0.9)",
+      color: r ? "#E8E8F0" : "#2D3436",
+      padding: "12px 16px",
+      borderRadius: "18px 18px 18px 4px",
+      maxWidth: "82%",
       alignSelf: "flex-start",
       wordBreak: "break-word",
-      whiteSpace: "pre-wrap"
+      whiteSpace: "pre-wrap",
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)",
+      border: r ? "1px solid rgba(255,255,255,0.06)" : "1px solid rgba(0,0,0,0.04)",
+      boxShadow: r ? "0 2px 8px rgba(0,0,0,0.2)" : "0 2px 8px rgba(0,0,0,0.04)",
+      fontSize: "14px",
+      lineHeight: "1.55",
+      letterSpacing: "0.01em"
     },
     userBubble: {
-      backgroundColor: e.userBubbleBg,
+      background: e.userBubbleBg,
       color: e.userBubbleText,
-      padding: "10px 14px",
-      borderRadius: "16px 16px 4px 16px",
-      maxWidth: "80%",
+      padding: "12px 16px",
+      borderRadius: "18px 18px 4px 18px",
+      maxWidth: "82%",
       alignSelf: "flex-end",
       wordBreak: "break-word",
-      whiteSpace: "pre-wrap"
+      whiteSpace: "pre-wrap",
+      boxShadow: "0 4px 14px rgba(108, 92, 231, 0.25)",
+      fontSize: "14px",
+      lineHeight: "1.55",
+      letterSpacing: "0.01em"
     }
   };
 }
-var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s, zIndex: u }) => {
-  const l = n === "bottom-left" ? {
-    bottom: "20px",
-    left: "20px"
-  } : {
-    bottom: "20px",
-    right: "20px"
-  };
-  return /* @__PURE__ */ o("button", {
-    onClick: e,
-    "aria-label": t ? "Close chat" : "Open chat",
-    style: {
-      ...r.launcher,
-      ...l,
-      ...u != null ? { zIndex: u } : {},
-      transform: t ? "scale(0.9)" : "scale(1)"
-    },
-    children: t ? s ?? /* @__PURE__ */ o(G, {}) : i ?? /* @__PURE__ */ o(q, {})
-  });
-}, q = () => /* @__PURE__ */ o("svg", {
-  width: "28",
-  height: "28",
+var re = ({ size: e = 18, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: t,
+  children: /* @__PURE__ */ a("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+}), ne = ({ size: e = 28, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
+  width: e,
+  height: e,
   viewBox: "0 0 24 24",
   fill: "none",
-  stroke: "currentColor",
+  stroke: t,
   strokeWidth: "2",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  children: /* @__PURE__ */ o("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-}), G = () => /* @__PURE__ */ d("svg", {
-  width: "24",
-  height: "24",
+  children: /* @__PURE__ */ a("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+}), P = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
   viewBox: "0 0 24 24",
   fill: "none",
-  stroke: "currentColor",
+  stroke: t,
   strokeWidth: "2",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  children: [/* @__PURE__ */ o("line", {
+  children: [/* @__PURE__ */ a("line", {
     x1: "18",
     y1: "6",
     x2: "6",
     y2: "18"
-  }), /* @__PURE__ */ o("line", {
+  }), /* @__PURE__ */ a("line", {
     x1: "6",
     y1: "6",
     x2: "18",
     y2: "18"
   })]
-}), N = ({ config: e, styles: t, onClose: n }) => /* @__PURE__ */ d("div", {
-  style: t.header,
-  children: [/* @__PURE__ */ d("div", {
+}), ae = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: /* @__PURE__ */ a("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  })
+}), oe = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ a("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }),
+    /* @__PURE__ */ a("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ a("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9.01",
+      y2: "9"
+    }),
+    /* @__PURE__ */ a("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15.01",
+      y2: "9"
+    })
+  ]
+}), ie = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: /* @__PURE__ */ a("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
+}), G = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/* @__PURE__ */ a("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), /* @__PURE__ */ a("polyline", { points: "14 2 14 8 20 8" })]
+}), se = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ a("rect", {
+      x: "3",
+      y: "3",
+      width: "18",
+      height: "18",
+      rx: "2",
+      ry: "2"
+    }),
+    /* @__PURE__ */ a("circle", {
+      cx: "8.5",
+      cy: "8.5",
+      r: "1.5"
+    }),
+    /* @__PURE__ */ a("polyline", { points: "21 15 16 10 5 21" })
+  ]
+}), le = ({ size: e = 14, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ a("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }),
+    /* @__PURE__ */ a("line", {
+      x1: "15",
+      y1: "9",
+      x2: "9",
+      y2: "15"
+    }),
+    /* @__PURE__ */ a("line", {
+      x1: "9",
+      y1: "9",
+      x2: "15",
+      y2: "15"
+    })
+  ]
+}), ce = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
+  width: e,
+  height: e,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: t,
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/* @__PURE__ */ a("polyline", { points: "1 4 1 10 7 10" }), /* @__PURE__ */ a("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })]
+}), de = ({ onClick: e, isOpen: t, position: r, styles: n, icon: o, closeIcon: s, zIndex: i }) => {
+  const c = r === "bottom-left" ? {
+    bottom: "24px",
+    left: "24px"
+  } : {
+    bottom: "24px",
+    right: "24px"
+  };
+  return /* @__PURE__ */ a("button", {
+    onClick: e,
+    "aria-label": t ? "Close chat" : "Open chat",
     style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "10px",
-      flex: 1
+      ...n.launcher,
+      ...c,
+      ...i != null ? { zIndex: i } : {},
+      transform: t ? "scale(0.92) rotate(90deg)" : "scale(1)",
+      animation: t ? "none" : "cb-launcher-pulse 3s ease-in-out infinite"
     },
-    children: [e.avatar && /* @__PURE__ */ o("img", {
-      src: e.avatar,
-      alt: "",
-      style: {
-        width: "36px",
-        height: "36px",
-        borderRadius: "50%",
-        objectFit: "cover"
-      }
-    }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ o("div", {
+    children: t ? s ?? /* @__PURE__ */ a(P, { size: 22 }) : o ?? /* @__PURE__ */ a(ne, { size: 26 })
+  });
+}, pe = ({ config: e, styles: t, onClose: r, onRestart: n, logo: o, logoWidth: s }) => /* @__PURE__ */ x("div", {
+  style: t.header,
+  children: [
+    /* @__PURE__ */ a("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: "linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)",
+      pointerEvents: "none"
+    } }),
+    /* @__PURE__ */ x("div", {
       style: {
-        fontWeight: 600,
-        fontSize: "15px"
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        flex: 1,
+        position: "relative",
+        zIndex: 1
       },
-      children: e.title ?? "Chat with us"
-    }), e.subtitle && /* @__PURE__ */ o("div", {
+      children: [
+        e.avatar && /* @__PURE__ */ x("div", {
+          style: { position: "relative" },
+          children: [/* @__PURE__ */ a("img", {
+            src: e.avatar,
+            alt: "",
+            style: {
+              width: "40px",
+              height: "40px",
+              borderRadius: "50%",
+              objectFit: "cover",
+              border: "2px solid rgba(255,255,255,0.3)"
+            }
+          }), /* @__PURE__ */ a("span", { style: {
+            position: "absolute",
+            bottom: "1px",
+            right: "1px",
+            width: "10px",
+            height: "10px",
+            backgroundColor: "#2ECC71",
+            borderRadius: "50%",
+            border: "2px solid rgba(255,255,255,0.8)"
+          } })]
+        }),
+        o && !e.avatar && /* @__PURE__ */ a("img", {
+          src: o,
+          alt: "",
+          style: {
+            width: s ?? "36px",
+            height: "auto",
+            objectFit: "contain",
+            filter: "brightness(1.1)"
+          }
+        }),
+        !e.avatar && !o && /* @__PURE__ */ a("div", {
+          style: {
+            width: "40px",
+            height: "40px",
+            borderRadius: "50%",
+            background: "rgba(255,255,255,0.2)",
+            backdropFilter: "blur(4px)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "18px",
+            fontWeight: 700,
+            color: "rgba(255,255,255,0.9)",
+            border: "1px solid rgba(255,255,255,0.2)"
+          },
+          children: (e.title ?? "C").charAt(0).toUpperCase()
+        }),
+        /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ a("div", {
+          style: {
+            fontWeight: 600,
+            fontSize: "16px",
+            letterSpacing: "-0.01em"
+          },
+          children: e.title ?? "Chat with us"
+        }), e.subtitle && /* @__PURE__ */ x("div", {
+          style: {
+            fontSize: "12px",
+            opacity: 0.8,
+            display: "flex",
+            alignItems: "center",
+            gap: "5px",
+            marginTop: "1px"
+          },
+          children: [/* @__PURE__ */ a("span", { style: {
+            width: "6px",
+            height: "6px",
+            borderRadius: "50%",
+            backgroundColor: "#2ECC71",
+            display: "inline-block"
+          } }), e.subtitle]
+        })] })
+      ]
+    }),
+    /* @__PURE__ */ x("div", {
       style: {
-        fontSize: "12px",
-        opacity: 0.85
+        display: "flex",
+        alignItems: "center",
+        gap: "2px",
+        position: "relative",
+        zIndex: 1
       },
-      children: e.subtitle
-    })] })]
-  }), e.showClose !== !1 && /* @__PURE__ */ o("button", {
-    onClick: n,
-    "aria-label": "Close chat",
-    style: {
-      background: "none",
-      border: "none",
-      color: "inherit",
-      cursor: "pointer",
-      padding: "4px",
-      display: "flex",
-      alignItems: "center"
-    },
-    children: /* @__PURE__ */ d("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [/* @__PURE__ */ o("line", {
-        x1: "18",
-        y1: "6",
-        x2: "6",
-        y2: "18"
-      }), /* @__PURE__ */ o("line", {
-        x1: "6",
-        y1: "6",
-        x2: "18",
-        y2: "18"
-      })]
+      children: [
+        e.showRestart && n && /* @__PURE__ */ a("button", {
+          onClick: n,
+          "aria-label": "Restart conversation",
+          title: "Restart conversation",
+          style: {
+            background: "rgba(255,255,255,0.1)",
+            border: "none",
+            color: "inherit",
+            cursor: "pointer",
+            padding: "6px",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "8px",
+            transition: "background 0.2s ease"
+          },
+          onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
+          onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
+          children: /* @__PURE__ */ a(ce, { size: 16 })
+        }),
+        e.showMinimize && /* @__PURE__ */ a("button", {
+          onClick: r,
+          "aria-label": "Minimize chat",
+          style: {
+            background: "rgba(255,255,255,0.1)",
+            border: "none",
+            color: "inherit",
+            cursor: "pointer",
+            padding: "6px",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "8px",
+            transition: "background 0.2s ease"
+          },
+          onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
+          onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
+          children: /* @__PURE__ */ a(ae, { size: 16 })
+        }),
+        e.showClose !== !1 && /* @__PURE__ */ a("button", {
+          onClick: r,
+          "aria-label": "Close chat",
+          style: {
+            background: "rgba(255,255,255,0.1)",
+            border: "none",
+            color: "inherit",
+            cursor: "pointer",
+            padding: "6px",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "8px",
+            transition: "background 0.2s ease"
+          },
+          onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
+          onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
+          children: /* @__PURE__ */ a(P, { size: 18 })
+        })
+      ]
     })
-  })]
-}), P = ({ content: e, onDismiss: t, primaryColor: n }) => /* @__PURE__ */ d("div", {
+  ]
+}), ue = ({ content: e, onDismiss: t, primaryColor: r }) => /* @__PURE__ */ x("div", {
   style: {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    overflow: "auto"
+    overflow: "auto",
+    background: "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)"
   },
-  children: [/* @__PURE__ */ o("div", {
+  children: [/* @__PURE__ */ a("div", {
     style: {
       flex: 1,
-      padding: "20px",
+      padding: "28px 24px",
       overflow: "auto"
     },
     children: e
-  }), /* @__PURE__ */ o("div", {
+  }), /* @__PURE__ */ a("div", {
     style: {
-      padding: "12px 16px",
-      borderTop: "1px solid #E8E8E8",
+      padding: "16px 20px",
+      borderTop: "1px solid rgba(0,0,0,0.05)",
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
       flexShrink: 0
     },
-    children: /* @__PURE__ */ o("button", {
+    children: /* @__PURE__ */ a("button", {
       onClick: t,
       style: {
         width: "100%",
-        padding: "12px",
-        backgroundColor: n,
+        padding: "14px",
+        background: `linear-gradient(135deg, ${r} 0%, ${ge(r, 30)} 100%)`,
         color: "#fff",
         border: "none",
-        borderRadius: "8px",
-        fontSize: "14px",
+        borderRadius: "14px",
+        fontSize: "15px",
         fontWeight: 600,
-        cursor: "pointer"
+        cursor: "pointer",
+        fontFamily: "inherit",
+        letterSpacing: "0.02em",
+        boxShadow: `0 6px 20px ${r}44`,
+        transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+      },
+      onMouseEnter: (n) => {
+        n.currentTarget.style.transform = "translateY(-1px)", n.currentTarget.style.boxShadow = `0 8px 28px ${r}55`;
+      },
+      onMouseLeave: (n) => {
+        n.currentTarget.style.transform = "translateY(0)", n.currentTarget.style.boxShadow = `0 6px 20px ${r}44`;
       },
       children: "Start Chat"
     })
   })]
-}), j = ({ field: e, value: t, onChange: n, error: r }) => {
-  const i = e.type === "textarea", s = e.type === "textarea" ? void 0 : e.type, u = {
+});
+function ge(e, t) {
+  const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
+  return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
+}
+var be = ({ field: e, value: t, onChange: r, error: n }) => {
+  const o = e.type === "textarea", s = e.type === "textarea" ? void 0 : e.type, i = {
     width: "100%",
-    padding: "8px 12px",
-    border: `1px solid ${r ? "#E53E3E" : "#D1D5DB"}`,
-    borderRadius: "8px",
+    padding: "10px 14px",
+    border: `1.5px solid ${n ? "rgba(229, 62, 62, 0.5)" : "rgba(0,0,0,0.08)"}`,
+    borderRadius: "12px",
     fontSize: "13px",
     fontFamily: "inherit",
     outline: "none",
     boxSizing: "border-box",
-    transition: "border-color 0.15s ease"
+    transition: "all 0.2s ease",
+    backgroundColor: "rgba(245, 247, 252, 0.6)",
+    color: "#2D3436",
+    letterSpacing: "0.01em"
   };
-  return /* @__PURE__ */ d("div", {
-    style: { marginBottom: "12px" },
+  return /* @__PURE__ */ x("div", {
+    style: { marginBottom: "14px" },
     children: [
-      e.label && /* @__PURE__ */ d("label", {
+      e.label && /* @__PURE__ */ x("label", {
         style: {
           display: "block",
-          marginBottom: "4px",
+          marginBottom: "6px",
           fontSize: "13px",
-          fontWeight: 500
+          fontWeight: 500,
+          color: "#2D3436"
         },
-        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+        children: [e.label, e.required && /* @__PURE__ */ a("span", {
           style: {
             color: "#E53E3E",
-            marginLeft: "2px"
+            marginLeft: "3px"
           },
           children: "*"
         })]
       }),
-      i ? /* @__PURE__ */ o("textarea", {
+      o ? /* @__PURE__ */ a("textarea", {
         value: t,
-        onChange: (l) => n(l.target.value),
+        onChange: (c) => r(c.target.value),
         placeholder: e.placeholder,
         required: e.required,
         rows: 3,
         style: {
-          ...u,
+          ...i,
           resize: "vertical"
         },
         minLength: e.validation?.minLength,
         maxLength: e.validation?.maxLength
-      }) : /* @__PURE__ */ o("input", {
+      }) : /* @__PURE__ */ a("input", {
         type: s,
         value: t,
-        onChange: (l) => n(l.target.value),
+        onChange: (c) => r(c.target.value),
         placeholder: e.placeholder,
         required: e.required,
-        style: u,
+        style: i,
         min: e.validation?.min,
         max: e.validation?.max,
         minLength: e.validation?.minLength,
         maxLength: e.validation?.maxLength,
         pattern: e.validation?.pattern
       }),
-      r && /* @__PURE__ */ o("div", {
+      n && /* @__PURE__ */ a("div", {
         style: {
           color: "#E53E3E",
           fontSize: "12px",
           marginTop: "2px"
         },
-        children: r
+        children: n
       })
     ]
   });
-}, $ = ({ field: e, value: t, onChange: n, error: r }) => {
-  const i = e.type === "multiselect" || e.multiple, s = (l) => {
-    n(i ? Array.from(l.target.selectedOptions, (g) => g.value) : l.target.value);
-  }, u = i ? Array.isArray(t) ? t : [t].filter(Boolean) : typeof t == "string" ? t : "";
-  return /* @__PURE__ */ d("div", {
-    style: { marginBottom: "12px" },
+}, xe = ({ field: e, value: t, onChange: r, error: n }) => {
+  const o = e.type === "multiselect" || e.multiple, s = (c) => {
+    r(o ? Array.from(c.target.selectedOptions, (u) => u.value) : c.target.value);
+  }, i = o ? Array.isArray(t) ? t : [t].filter(Boolean) : typeof t == "string" ? t : "";
+  return /* @__PURE__ */ x("div", {
+    style: { marginBottom: "14px" },
     children: [
-      e.label && /* @__PURE__ */ d("label", {
+      e.label && /* @__PURE__ */ x("label", {
         style: {
           display: "block",
-          marginBottom: "4px",
+          marginBottom: "6px",
           fontSize: "13px",
-          fontWeight: 500
+          fontWeight: 500,
+          color: "#2D3436"
         },
-        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+        children: [e.label, e.required && /* @__PURE__ */ a("span", {
           style: {
             color: "#E53E3E",
-            marginLeft: "2px"
+            marginLeft: "3px"
           },
           children: "*"
         })]
       }),
-      /* @__PURE__ */ d("select", {
-        value: u,
+      /* @__PURE__ */ x("select", {
+        value: i,
         onChange: s,
-        multiple: i,
+        multiple: o,
         required: e.required,
         style: {
           width: "100%",
-          padding: "8px 12px",
-          border: `1px solid ${r ? "#E53E3E" : "#D1D5DB"}`,
-          borderRadius: "8px",
+          padding: "10px 14px",
+          border: `1.5px solid ${n ? "rgba(229, 62, 62, 0.5)" : "rgba(0,0,0,0.08)"}`,
+          borderRadius: "12px",
           fontSize: "13px",
           fontFamily: "inherit",
           outline: "none",
-          backgroundColor: "#fff",
+          backgroundColor: "rgba(245, 247, 252, 0.6)",
+          color: "#2D3436",
           boxSizing: "border-box",
-          ...i ? { minHeight: "80px" } : {}
+          transition: "all 0.2s ease",
+          ...o ? { minHeight: "80px" } : {}
         },
-        children: [!i && /* @__PURE__ */ o("option", {
+        children: [!o && /* @__PURE__ */ a("option", {
           value: "",
           children: "Select..."
-        }), e.options?.map((l) => /* @__PURE__ */ o("option", {
-          value: l.value,
-          children: l.label
-        }, l.value))]
+        }), e.options?.map((c) => /* @__PURE__ */ a("option", {
+          value: c.value,
+          children: c.label
+        }, c.value))]
       }),
-      i && /* @__PURE__ */ o("div", {
+      o && /* @__PURE__ */ a("div", {
         style: {
           fontSize: "11px",
           color: "#888",
@@ -455,27 +792,27 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
         },
         children: "Hold Ctrl/Cmd to select multiple"
       }),
-      r && /* @__PURE__ */ o("div", {
+      n && /* @__PURE__ */ a("div", {
         style: {
           color: "#E53E3E",
           fontSize: "12px",
           marginTop: "2px"
         },
-        children: r
+        children: n
       })
     ]
   });
-}, H = ({ field: e, value: t, onChange: n, error: r }) => /* @__PURE__ */ d("div", {
+}, he = ({ field: e, value: t, onChange: r, error: n }) => /* @__PURE__ */ x("div", {
   style: { marginBottom: "12px" },
   children: [
-    e.label && /* @__PURE__ */ d("label", {
+    e.label && /* @__PURE__ */ x("label", {
       style: {
         display: "block",
         marginBottom: "6px",
         fontSize: "13px",
         fontWeight: 500
       },
-      children: [e.label, e.required && /* @__PURE__ */ o("span", {
+      children: [e.label, e.required && /* @__PURE__ */ a("span", {
         style: {
           color: "#E53E3E",
           marginLeft: "2px"
@@ -483,13 +820,13 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
         children: "*"
       })]
     }),
-    /* @__PURE__ */ o("div", {
+    /* @__PURE__ */ a("div", {
       style: {
         display: "flex",
         flexDirection: "column",
         gap: "6px"
       },
-      children: e.options?.map((i) => /* @__PURE__ */ d("label", {
+      children: e.options?.map((o) => /* @__PURE__ */ x("label", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -497,40 +834,40 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
           cursor: "pointer",
           fontSize: "13px"
         },
-        children: [/* @__PURE__ */ o("input", {
+        children: [/* @__PURE__ */ a("input", {
           type: "radio",
           name: e.name,
-          value: i.value,
-          checked: t === i.value,
-          onChange: () => n(i.value),
+          value: o.value,
+          checked: t === o.value,
+          onChange: () => r(o.value),
           style: { margin: 0 }
-        }), i.label]
-      }, i.value))
+        }), o.label]
+      }, o.value))
     }),
-    r && /* @__PURE__ */ o("div", {
+    n && /* @__PURE__ */ a("div", {
       style: {
         color: "#E53E3E",
         fontSize: "12px",
         marginTop: "2px"
       },
-      children: r
+      children: n
     })
   ]
-}), Q = ({ field: e, value: t, onChange: n, error: r }) => {
-  const i = (s) => {
-    t.includes(s) ? n(t.filter((u) => u !== s)) : n([...t, s]);
+}), me = ({ field: e, value: t, onChange: r, error: n }) => {
+  const o = (s) => {
+    t.includes(s) ? r(t.filter((i) => i !== s)) : r([...t, s]);
   };
-  return /* @__PURE__ */ d("div", {
+  return /* @__PURE__ */ x("div", {
     style: { marginBottom: "12px" },
     children: [
-      e.label && /* @__PURE__ */ d("label", {
+      e.label && /* @__PURE__ */ x("label", {
         style: {
           display: "block",
           marginBottom: "6px",
           fontSize: "13px",
           fontWeight: 500
         },
-        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+        children: [e.label, e.required && /* @__PURE__ */ a("span", {
           style: {
             color: "#E53E3E",
             marginLeft: "2px"
@@ -538,13 +875,13 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
           children: "*"
         })]
       }),
-      /* @__PURE__ */ o("div", {
+      /* @__PURE__ */ a("div", {
         style: {
           display: "flex",
           flexDirection: "column",
           gap: "6px"
         },
-        children: e.options?.map((s) => /* @__PURE__ */ d("label", {
+        children: e.options?.map((s) => /* @__PURE__ */ x("label", {
           style: {
             display: "flex",
             alignItems: "center",
@@ -552,37 +889,37 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
             cursor: "pointer",
             fontSize: "13px"
           },
-          children: [/* @__PURE__ */ o("input", {
+          children: [/* @__PURE__ */ a("input", {
             type: "checkbox",
             checked: t.includes(s.value),
-            onChange: () => i(s.value),
+            onChange: () => o(s.value),
             style: { margin: 0 }
           }), s.label]
         }, s.value))
       }),
-      r && /* @__PURE__ */ o("div", {
+      n && /* @__PURE__ */ a("div", {
         style: {
           color: "#E53E3E",
           fontSize: "12px",
           marginTop: "2px"
         },
-        children: r
+        children: n
       })
     ]
   });
-}, Y = ({ field: e, value: t, onChange: n, error: r, primaryColor: i }) => {
-  const s = b(null), u = t ? Array.from(t).map((l) => l.name).join(", ") : "";
-  return /* @__PURE__ */ d("div", {
+}, ye = ({ field: e, value: t, onChange: r, error: n, primaryColor: o }) => {
+  const s = C(null), i = t ? Array.from(t).map((c) => c.name).join(", ") : "";
+  return /* @__PURE__ */ x("div", {
     style: { marginBottom: "12px" },
     children: [
-      e.label && /* @__PURE__ */ d("label", {
+      e.label && /* @__PURE__ */ x("label", {
         style: {
           display: "block",
           marginBottom: "4px",
           fontSize: "13px",
           fontWeight: 500
         },
-        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+        children: [e.label, e.required && /* @__PURE__ */ a("span", {
           style: {
             color: "#E53E3E",
             marginLeft: "2px"
@@ -590,20 +927,20 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
           children: "*"
         })]
       }),
-      /* @__PURE__ */ o("input", {
+      /* @__PURE__ */ a("input", {
         ref: s,
         type: "file",
         accept: e.accept,
         multiple: e.multiple,
-        onChange: (l) => n(l.target.files),
+        onChange: (c) => r(c.target.files),
         style: { display: "none" }
       }),
-      /* @__PURE__ */ o("button", {
+      /* @__PURE__ */ a("button", {
         type: "button",
         onClick: () => s.current?.click(),
         style: {
           padding: "8px 16px",
-          border: `1px dashed ${r ? "#E53E3E" : "#D1D5DB"}`,
+          border: `1px dashed ${n ? "#E53E3E" : "#D1D5DB"}`,
           borderRadius: "8px",
           backgroundColor: "#FAFAFA",
           cursor: "pointer",
@@ -612,114 +949,137 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
           width: "100%",
           textAlign: "left"
         },
-        children: u || e.placeholder || "Choose file(s)..."
+        children: i || e.placeholder || "Choose file(s)..."
       }),
-      u && /* @__PURE__ */ d("div", {
+      i && /* @__PURE__ */ x("div", {
         style: {
           fontSize: "12px",
-          color: i,
+          color: o,
           marginTop: "4px"
         },
         children: [Array.from(t).length, " file(s) selected"]
       }),
-      r && /* @__PURE__ */ o("div", {
+      n && /* @__PURE__ */ a("div", {
         style: {
           color: "#E53E3E",
           fontSize: "12px",
           marginTop: "2px"
         },
-        children: r
+        children: n
       })
     ]
   });
-}, I = ({ config: e, onSubmit: t, primaryColor: n }) => {
-  const [r, i] = S(() => {
-    const a = {};
-    for (const c of e.fields) c.defaultValue !== void 0 ? a[c.name] = c.defaultValue : c.type === "checkbox" || c.type === "multiselect" ? a[c.name] = [] : c.type === "file" ? a[c.name] = null : a[c.name] = "";
-    return a;
-  }), [s, u] = S({}), [l, g] = S(!1), x = y((a, c) => {
-    i((m) => ({
-      ...m,
-      [a]: c
-    })), u((m) => {
-      const w = { ...m };
-      return delete w[a], w;
+}, H = ({ config: e, onSubmit: t, primaryColor: r }) => {
+  const [n, o] = I(() => {
+    const g = {};
+    for (const h of e.fields) h.defaultValue !== void 0 ? g[h.name] = h.defaultValue : h.type === "checkbox" || h.type === "multiselect" ? g[h.name] = [] : h.type === "file" ? g[h.name] = null : g[h.name] = "";
+    return g;
+  }), [s, i] = I({}), [c, u] = I(!1), f = v((g, h) => {
+    o((k) => ({
+      ...k,
+      [g]: h
+    })), i((k) => {
+      const D = { ...k };
+      return delete D[g], D;
     });
-  }, []), p = () => {
-    const a = {};
-    for (const c of e.fields) {
-      const m = r[c.name];
-      if (c.required && (m === "" || m === null || m === void 0 || Array.isArray(m) && m.length === 0)) {
-        a[c.name] = c.validation?.message ?? `${c.label || c.name} is required`;
+  }, []), w = () => {
+    const g = {};
+    for (const h of e.fields) {
+      const k = n[h.name];
+      if (h.required && (k === "" || k === null || k === void 0 || Array.isArray(k) && k.length === 0)) {
+        g[h.name] = h.validation?.message ?? `${h.label || h.name} is required`;
         continue;
       }
-      c.validation?.pattern && typeof m == "string" && m && (new RegExp(c.validation.pattern).test(m) || (a[c.name] = c.validation.message ?? "Invalid format"));
+      if (h.validation?.pattern && typeof k == "string" && k) try {
+        new RegExp(h.validation.pattern).test(k) || (g[h.name] = h.validation.message ?? "Invalid format");
+      } catch {
+      }
     }
-    return u(a), Object.keys(a).length === 0;
-  }, h = (a) => {
-    a.preventDefault(), p() && (g(!0), t(r));
+    return i(g), Object.keys(g).length === 0;
+  }, p = (g) => {
+    g.preventDefault(), w() && (u(!0), t(n));
   };
-  return l ? /* @__PURE__ */ o("div", {
+  return c ? /* @__PURE__ */ a("div", {
     style: {
-      padding: "12px",
-      backgroundColor: "#F0FFF4",
-      borderRadius: "8px",
-      fontSize: "13px",
-      color: "#276749",
-      textAlign: "center"
+      padding: "16px",
+      background: "linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(46, 213, 115, 0.05))",
+      borderRadius: "14px",
+      fontSize: "14px",
+      color: "#2ecc71",
+      textAlign: "center",
+      fontWeight: 500,
+      border: "1px solid rgba(46, 213, 115, 0.15)",
+      animation: "cb-fade-in 0.3s ease-out"
     },
-    children: "Submitted successfully"
-  }) : /* @__PURE__ */ d("form", {
-    onSubmit: h,
+    children: "✓ Submitted successfully"
+  }) : /* @__PURE__ */ x("form", {
+    onSubmit: p,
     style: {
-      backgroundColor: "#FAFAFA",
-      borderRadius: "10px",
-      padding: "16px",
-      border: "1px solid #E8E8E8"
+      background: "rgba(255, 255, 255, 0.7)",
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)",
+      borderRadius: "16px",
+      padding: "20px",
+      border: "1px solid rgba(0,0,0,0.06)",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.04)",
+      animation: "cb-slide-up 0.35s ease-out"
     },
     children: [
-      e.title && /* @__PURE__ */ o("div", {
+      e.title && /* @__PURE__ */ a("div", {
         style: {
           fontWeight: 600,
-          fontSize: "14px",
-          marginBottom: "4px"
+          fontSize: "15px",
+          marginBottom: "4px",
+          color: "#2D3436",
+          letterSpacing: "-0.01em"
         },
         children: e.title
       }),
-      e.description && /* @__PURE__ */ o("div", {
+      e.description && /* @__PURE__ */ a("div", {
         style: {
           fontSize: "12px",
-          color: "#888",
-          marginBottom: "12px"
+          color: "rgba(0,0,0,0.45)",
+          marginBottom: "16px",
+          lineHeight: "1.5"
         },
         children: e.description
       }),
-      e.fields.map((a) => /* @__PURE__ */ o(K, {
-        field: a,
-        value: r[a.name],
-        onChange: (c) => x(a.name, c),
-        error: s[a.name],
-        primaryColor: n
-      }, a.name)),
-      /* @__PURE__ */ o("button", {
+      e.fields.map((g) => /* @__PURE__ */ a(fe, {
+        field: g,
+        value: n[g.name],
+        onChange: (h) => f(g.name, h),
+        error: s[g.name],
+        primaryColor: r
+      }, g.name)),
+      /* @__PURE__ */ a("button", {
         type: "submit",
         style: {
           width: "100%",
-          padding: "10px",
-          backgroundColor: n,
+          padding: "12px",
+          background: `linear-gradient(135deg, ${r} 0%, ${Se(r, 30)} 100%)`,
           color: "#fff",
           border: "none",
-          borderRadius: "8px",
+          borderRadius: "12px",
           fontSize: "14px",
           fontWeight: 600,
           cursor: "pointer",
-          marginTop: "4px"
+          marginTop: "8px",
+          fontFamily: "inherit",
+          letterSpacing: "0.02em",
+          boxShadow: `0 4px 14px ${r}33`,
+          transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        onMouseEnter: (g) => {
+          g.currentTarget.style.transform = "translateY(-1px)", g.currentTarget.style.boxShadow = `0 6px 20px ${r}44`;
+        },
+        onMouseLeave: (g) => {
+          g.currentTarget.style.transform = "translateY(0)", g.currentTarget.style.boxShadow = `0 4px 14px ${r}33`;
         },
         children: e.submitLabel ?? "Submit"
       })
     ]
   });
-}, K = ({ field: e, value: t, onChange: n, error: r, primaryColor: i }) => {
+}, fe = ({ field: e, value: t, onChange: r, error: n, primaryColor: o }) => {
   switch (e.type) {
     case "text":
     case "email":
@@ -730,44 +1090,44 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
     case "textarea":
     case "date":
     case "time":
-      return /* @__PURE__ */ o(j, {
+      return /* @__PURE__ */ a(be, {
         field: e,
         value: String(t ?? ""),
-        onChange: n,
-        error: r
+        onChange: r,
+        error: n
       });
     case "select":
     case "multiselect":
-      return /* @__PURE__ */ o($, {
+      return /* @__PURE__ */ a(xe, {
         field: e,
         value: t,
-        onChange: n,
-        error: r
+        onChange: r,
+        error: n
       });
     case "radio":
-      return /* @__PURE__ */ o(H, {
+      return /* @__PURE__ */ a(he, {
         field: e,
         value: String(t ?? ""),
-        onChange: n,
-        error: r
+        onChange: r,
+        error: n
       });
     case "checkbox":
-      return /* @__PURE__ */ o(Q, {
+      return /* @__PURE__ */ a(me, {
         field: e,
         value: t ?? [],
-        onChange: n,
-        error: r
+        onChange: r,
+        error: n
       });
     case "file":
-      return /* @__PURE__ */ o(Y, {
+      return /* @__PURE__ */ a(ye, {
         field: e,
         value: t,
-        onChange: n,
-        error: r,
-        primaryColor: i
+        onChange: r,
+        error: n,
+        primaryColor: o
       });
     case "hidden":
-      return /* @__PURE__ */ o("input", {
+      return /* @__PURE__ */ a("input", {
         type: "hidden",
         name: e.name,
         value: String(t ?? "")
@@ -775,205 +1135,759 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
     default:
       return null;
   }
-}, U = ({ config: e, onLogin: t, primaryColor: n }) => /* @__PURE__ */ o("div", {
+};
+function Se(e, t) {
+  const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
+  return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
+}
+var ke = ({ config: e, onLogin: t, primaryColor: r }) => /* @__PURE__ */ a("div", {
   style: {
     flex: 1,
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
-    padding: "20px",
-    overflow: "auto"
+    padding: "24px",
+    overflow: "auto",
+    background: "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)"
   },
-  children: /* @__PURE__ */ o(I, {
+  children: /* @__PURE__ */ a(H, {
     config: e,
     onSubmit: t,
-    primaryColor: n
+    primaryColor: r
   })
-}), V = ({ message: e, styles: t }) => {
-  const n = e.sender === "bot" ? t.botBubble : t.userBubble;
-  return !e.text && !e.attachment ? null : /* @__PURE__ */ d("div", {
-    style: n,
-    children: [e.text && /* @__PURE__ */ o("span", { children: e.text }), e.attachment && /* @__PURE__ */ o("div", {
-      style: { marginTop: e.text ? "6px" : 0 },
-      children: /* @__PURE__ */ d("a", {
-        href: e.attachment.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: {
-          color: "inherit",
-          textDecoration: "underline",
-          fontSize: "13px"
-        },
-        children: ["📎 ", e.attachment.name]
-      })
+}), we = ({ message: e, styles: t }) => {
+  const r = e.sender === "bot", n = e.sender === "system", o = r || n ? t.botBubble : t.userBubble;
+  return e.text || e.attachments && e.attachments.length > 0 ? /* @__PURE__ */ x("div", {
+    style: {
+      ...o,
+      ...n ? {
+        background: "transparent",
+        border: "none",
+        boxShadow: "none",
+        color: "#999",
+        fontSize: "12px",
+        alignSelf: "center",
+        padding: "6px 12px",
+        backdropFilter: "none",
+        WebkitBackdropFilter: "none"
+      } : {},
+      animation: "cb-fade-in 0.3s ease-out"
+    },
+    children: [e.text && /* @__PURE__ */ a("span", {
+      style: { display: "block" },
+      children: e.text
+    }), e.attachments && e.attachments.length > 0 && /* @__PURE__ */ a("div", {
+      style: {
+        marginTop: e.text ? "10px" : 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px"
+      },
+      children: e.attachments.map((i, c) => /* @__PURE__ */ a(ve, {
+        attachment: i,
+        isBot: r
+      }, c))
     })]
-  });
-}, J = ({ replies: e, onSelect: t, primaryColor: n }) => /* @__PURE__ */ o("div", {
+  }) : null;
+}, ve = ({ attachment: e, isBot: t }) => e.type.startsWith("image/") && e.url ? /* @__PURE__ */ x("div", {
+  style: {
+    borderRadius: "12px",
+    overflow: "hidden",
+    maxWidth: "220px"
+  },
+  children: [/* @__PURE__ */ a("img", {
+    src: e.url,
+    alt: e.name,
+    style: {
+      width: "100%",
+      height: "auto",
+      display: "block",
+      borderRadius: "12px"
+    }
+  }), /* @__PURE__ */ a("div", {
+    style: {
+      fontSize: "11px",
+      padding: "4px 0",
+      opacity: 0.6
+    },
+    children: e.name
+  })]
+}) : /* @__PURE__ */ x("a", {
+  href: e.url,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "8px 12px",
+    backgroundColor: t ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.15)",
+    borderRadius: "10px",
+    textDecoration: "none",
+    color: "inherit",
+    fontSize: "13px",
+    border: t ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.15)",
+    transition: "background 0.2s ease"
+  },
+  children: [
+    /* @__PURE__ */ a(G, { size: 16 }),
+    /* @__PURE__ */ a("span", {
+      style: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        flex: 1
+      },
+      children: e.name
+    }),
+    e.size && /* @__PURE__ */ a("span", {
+      style: {
+        fontSize: "11px",
+        opacity: 0.5,
+        flexShrink: 0
+      },
+      children: Ee(e.size)
+    })
+  ]
+});
+function Ee(e) {
+  return e < 1024 ? `${e}B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)}KB` : `${(e / (1024 * 1024)).toFixed(1)}MB`;
+}
+var Ce = ({ replies: e, onSelect: t, primaryColor: r }) => /* @__PURE__ */ a("div", {
   style: {
     display: "flex",
     flexWrap: "wrap",
-    gap: "6px",
+    gap: "8px",
     alignSelf: "flex-start",
-    maxWidth: "90%"
+    maxWidth: "90%",
+    animation: "cb-slide-up 0.35s ease-out",
+    padding: "4px 0"
   },
-  children: e.map((r) => /* @__PURE__ */ o("button", {
-    onClick: () => t(r.value, r.label),
+  children: e.map((n) => /* @__PURE__ */ a("button", {
+    onClick: () => t(n.value, n.label),
     style: {
-      padding: "6px 14px",
-      borderRadius: "18px",
-      border: `1px solid ${n}`,
-      backgroundColor: "transparent",
-      color: n,
+      padding: "8px 18px",
+      borderRadius: "22px",
+      border: `1.5px solid ${r}`,
+      backgroundColor: "rgba(108, 92, 231, 0.06)",
+      color: r,
       cursor: "pointer",
       fontSize: "13px",
       fontWeight: 500,
-      transition: "all 0.15s ease"
+      fontFamily: "inherit",
+      transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+      backdropFilter: "blur(4px)",
+      WebkitBackdropFilter: "blur(4px)",
+      letterSpacing: "0.01em"
     },
-    onMouseEnter: (i) => {
-      i.currentTarget.style.backgroundColor = n, i.currentTarget.style.color = "#fff";
+    onMouseEnter: (o) => {
+      o.currentTarget.style.backgroundColor = r, o.currentTarget.style.color = "#fff", o.currentTarget.style.transform = "translateY(-1px)", o.currentTarget.style.boxShadow = `0 4px 14px ${r}44`;
     },
-    onMouseLeave: (i) => {
-      i.currentTarget.style.backgroundColor = "transparent", i.currentTarget.style.color = n;
+    onMouseLeave: (o) => {
+      o.currentTarget.style.backgroundColor = "rgba(108, 92, 231, 0.06)", o.currentTarget.style.color = r, o.currentTarget.style.transform = "translateY(0)", o.currentTarget.style.boxShadow = "none";
     },
-    children: r.label
-  }, r.value))
-}), X = ({ color: e }) => {
+    children: n.label
+  }, n.value))
+}), De = ({ color: e }) => {
   const t = {
-    width: "8px",
-    height: "8px",
+    width: "7px",
+    height: "7px",
     borderRadius: "50%",
     backgroundColor: e,
-    opacity: 0.4,
-    animation: "chatbot-typing-bounce 1.4s infinite ease-in-out"
+    opacity: 0.35,
+    animation: "cb-typing-bounce 1.4s infinite ease-in-out"
   };
-  return /* @__PURE__ */ d(C, { children: [/* @__PURE__ */ o("style", { children: `
-        @keyframes chatbot-typing-bounce {
-          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
-          40% { transform: scale(1); opacity: 1; }
-        }
-      ` }), /* @__PURE__ */ d("div", {
+  return /* @__PURE__ */ x("div", {
     style: {
       display: "flex",
-      gap: "4px",
-      padding: "12px 16px",
-      backgroundColor: "#F1F1F1",
-      borderRadius: "16px 16px 16px 4px",
+      gap: "5px",
+      padding: "14px 18px",
+      background: "rgba(241, 243, 249, 0.8)",
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)",
+      borderRadius: "18px 18px 18px 4px",
       alignSelf: "flex-start",
-      alignItems: "center"
+      alignItems: "center",
+      border: "1px solid rgba(0,0,0,0.04)",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
+      animation: "cb-fade-in 0.3s ease-out"
     },
     children: [
-      /* @__PURE__ */ o("span", { style: {
+      /* @__PURE__ */ a("span", { style: {
         ...t,
         animationDelay: "0s"
       } }),
-      /* @__PURE__ */ o("span", { style: {
+      /* @__PURE__ */ a("span", { style: {
         ...t,
         animationDelay: "0.2s"
       } }),
-      /* @__PURE__ */ o("span", { style: {
+      /* @__PURE__ */ a("span", { style: {
         ...t,
         animationDelay: "0.4s"
       } })
     ]
-  })] });
-}, Z = ({ messages: e, isTyping: t, styles: n, primaryColor: r, onQuickReply: i, onFormSubmit: s }) => {
-  const u = b(null);
-  return E(() => {
-    u.current?.scrollIntoView({ behavior: "smooth" });
-  }, [e, t]), /* @__PURE__ */ d("div", {
-    style: n.messageList,
+  });
+}, Fe = ({ messages: e, isTyping: t, styles: r, primaryColor: n, onQuickReply: o, onFormSubmit: s, components: i, onComponentComplete: c, collectedData: u, currentStepId: f }) => {
+  const w = C(null);
+  return A(() => {
+    w.current?.scrollIntoView({ behavior: "smooth" });
+  }, [e, t]), /* @__PURE__ */ x("div", {
+    style: r.messageList,
+    className: "cb-scrollbar",
     children: [
-      e.map((l) => /* @__PURE__ */ d(R.Fragment, { children: [
-        /* @__PURE__ */ o(V, {
-          message: l,
-          styles: n
+      e.map((p) => /* @__PURE__ */ x(_.Fragment, { children: [
+        /* @__PURE__ */ a(we, {
+          message: p,
+          styles: r
         }),
-        l.quickReplies && l.quickReplies.length > 0 && /* @__PURE__ */ o(J, {
-          replies: l.quickReplies,
-          onSelect: i,
-          primaryColor: r
+        p.quickReplies && p.quickReplies.length > 0 && /* @__PURE__ */ a(Ce, {
+          replies: p.quickReplies,
+          onSelect: o,
+          primaryColor: n
         }),
-        l.form && /* @__PURE__ */ o("div", {
+        p.form && /* @__PURE__ */ a("div", {
           style: {
             alignSelf: "flex-start",
-            width: "90%"
+            width: "92%",
+            animation: "cb-slide-up 0.35s ease-out"
           },
-          children: /* @__PURE__ */ o(I, {
-            config: l.form,
-            onSubmit: (g) => s(l.form.id, g),
-            primaryColor: r
+          children: /* @__PURE__ */ a(H, {
+            config: p.form,
+            onSubmit: (g) => s(p.form.id, g),
+            primaryColor: n
+          })
+        }),
+        p.component && i?.[p.component] && /* @__PURE__ */ a("div", {
+          style: {
+            alignSelf: "flex-start",
+            width: "92%",
+            animation: "cb-slide-up 0.35s ease-out"
+          },
+          children: _.createElement(i[p.component], {
+            stepId: f ?? "",
+            data: u ?? {},
+            onComplete: (g) => c?.(g)
           })
         })
-      ] }, l.id)),
-      t && /* @__PURE__ */ o(X, { color: r }),
-      /* @__PURE__ */ o("div", { ref: u })
+      ] }, p.id)),
+      t && /* @__PURE__ */ a(De, { color: n }),
+      /* @__PURE__ */ a("div", { ref: w })
     ]
   });
-}, ee = ({ onSend: e, placeholder: t = "Type a message...", primaryColor: n, disabled: r, styleOverride: i }) => {
-  const [s, u] = S(""), l = b(null), g = () => {
-    const p = s.trim();
-    p && (e(p), u(""), l.current?.focus());
-  }, x = (p) => {
-    p.key === "Enter" && !p.shiftKey && (p.preventDefault(), g());
-  };
-  return /* @__PURE__ */ d("div", {
+}, W = [
+  {
+    name: "Smileys",
+    emojis: [
+      "😀",
+      "😃",
+      "😄",
+      "😁",
+      "😅",
+      "😂",
+      "🤣",
+      "😊",
+      "😇",
+      "🙂",
+      "😉",
+      "😍",
+      "🥰",
+      "😘",
+      "😋",
+      "😜",
+      "🤪",
+      "🤗",
+      "🤔",
+      "🤫",
+      "🤭",
+      "😏",
+      "😐",
+      "😑",
+      "😶",
+      "😌",
+      "😴",
+      "🤤",
+      "😷",
+      "🤒"
+    ]
+  },
+  {
+    name: "Gestures",
+    emojis: [
+      "👍",
+      "👎",
+      "👌",
+      "✌️",
+      "🤞",
+      "🤟",
+      "🤘",
+      "👋",
+      "🤚",
+      "✋",
+      "🖖",
+      "👏",
+      "🙌",
+      "🤝",
+      "🙏",
+      "💪",
+      "🖐️",
+      "☝️",
+      "👆",
+      "👇",
+      "👈",
+      "👉",
+      "🤙",
+      "🫡",
+      "🫶",
+      "🫰",
+      "🫳",
+      "🫴",
+      "🫲",
+      "🫱"
+    ]
+  },
+  {
+    name: "Hearts",
+    emojis: [
+      "❤️",
+      "🧡",
+      "💛",
+      "💚",
+      "💙",
+      "💜",
+      "🖤",
+      "🤍",
+      "🤎",
+      "💔",
+      "❣️",
+      "💕",
+      "💞",
+      "💓",
+      "💗",
+      "💖",
+      "💘",
+      "💝",
+      "💟",
+      "♥️",
+      "🫀",
+      "💌",
+      "💐",
+      "🌹",
+      "🌺",
+      "🌸",
+      "🌼",
+      "🌻",
+      "🌷",
+      "💮"
+    ]
+  },
+  {
+    name: "Objects",
+    emojis: [
+      "🔥",
+      "⭐",
+      "✨",
+      "💯",
+      "🎉",
+      "🎊",
+      "🎯",
+      "🚀",
+      "💡",
+      "📌",
+      "📎",
+      "🔗",
+      "💻",
+      "📱",
+      "☎️",
+      "📧",
+      "📝",
+      "📋",
+      "📊",
+      "📈",
+      "🗂️",
+      "📁",
+      "🔒",
+      "🔑",
+      "⚙️",
+      "🛠️",
+      "🔧",
+      "📦",
+      "🏷️",
+      "✅"
+    ]
+  }
+], Te = ({ onSelect: e, onClose: t, primaryColor: r }) => {
+  const [n, o] = I(0), s = C(null);
+  A(() => {
+    const c = (u) => {
+      s.current && !s.current.contains(u.target) && t();
+    };
+    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+  }, [t]);
+  const i = W[n]?.emojis ?? [];
+  return /* @__PURE__ */ x("div", {
+    ref: s,
     style: {
-      display: "flex",
-      gap: "8px",
-      alignItems: "flex-end",
-      ...i
+      position: "absolute",
+      bottom: "100%",
+      left: 0,
+      width: "280px",
+      backgroundColor: "rgba(255, 255, 255, 0.92)",
+      backdropFilter: "blur(20px)",
+      WebkitBackdropFilter: "blur(20px)",
+      borderRadius: "16px",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)",
+      border: "1px solid rgba(255,255,255,0.8)",
+      overflow: "hidden",
+      zIndex: 10,
+      marginBottom: "8px",
+      animation: "cb-slide-up 0.25s ease-out"
     },
-    children: [/* @__PURE__ */ o("textarea", {
-      ref: l,
-      value: s,
-      onChange: (p) => u(p.target.value),
-      onKeyDown: x,
-      placeholder: t,
-      disabled: r,
-      rows: 1,
-      style: {
-        flex: 1,
-        padding: "10px 14px",
-        border: "1px solid #E0E0E0",
-        borderRadius: "20px",
-        outline: "none",
-        resize: "none",
-        fontFamily: "inherit",
-        fontSize: "14px",
-        lineHeight: "1.4",
-        maxHeight: "100px",
-        overflowY: "auto"
-      }
-    }), /* @__PURE__ */ o("button", {
-      onClick: g,
-      disabled: r || !s.trim(),
-      "aria-label": "Send message",
+    children: [/* @__PURE__ */ a("div", {
       style: {
-        width: "38px",
-        height: "38px",
-        borderRadius: "50%",
-        backgroundColor: s.trim() ? n : "#CCC",
-        color: "#fff",
-        border: "none",
-        cursor: s.trim() ? "pointer" : "default",
         display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-        transition: "background-color 0.15s ease"
+        borderBottom: "1px solid rgba(0,0,0,0.06)",
+        padding: "6px",
+        gap: "3px"
       },
-      children: /* @__PURE__ */ o("svg", {
-        width: "18",
-        height: "18",
-        viewBox: "0 0 24 24",
-        fill: "currentColor",
-        children: /* @__PURE__ */ o("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
-      })
+      children: W.map((c, u) => /* @__PURE__ */ a("button", {
+        onClick: () => o(u),
+        title: c.name,
+        style: {
+          flex: 1,
+          padding: "6px 4px",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontSize: "11px",
+          fontWeight: 600,
+          fontFamily: "inherit",
+          letterSpacing: "0.02em",
+          background: u === n ? `linear-gradient(135deg, ${r}, ${r}CC)` : "transparent",
+          color: u === n ? "#fff" : "rgba(0,0,0,0.4)",
+          transition: "all 0.2s ease",
+          boxShadow: u === n ? `0 2px 8px ${r}33` : "none"
+        },
+        children: c.name
+      }, c.name))
+    }), /* @__PURE__ */ a("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(8, 1fr)",
+        gap: "2px",
+        padding: "8px",
+        maxHeight: "180px",
+        overflowY: "auto"
+      },
+      children: i.map((c) => /* @__PURE__ */ a("button", {
+        onClick: () => {
+          e(c), t();
+        },
+        style: {
+          width: "30px",
+          height: "30px",
+          border: "none",
+          backgroundColor: "transparent",
+          cursor: "pointer",
+          fontSize: "18px",
+          borderRadius: "6px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "all 0.15s ease"
+        },
+        onMouseEnter: (u) => u.currentTarget.style.backgroundColor = "rgba(108, 92, 231, 0.08)",
+        onMouseLeave: (u) => u.currentTarget.style.backgroundColor = "transparent",
+        children: c
+      }, c))
     })]
   });
-}, te = 0, k = () => `msg_${Date.now()}_${++te}`, ne = class {
+}, Ie = ({ config: e, onFiles: t, selectedFiles: r, onRemoveFile: n, primaryColor: o }) => {
+  const s = C(null), i = (c) => {
+    const u = c.target.files;
+    if (!u || u.length === 0) return;
+    const f = Array.from(u);
+    if (e.maxSize && f.filter((p) => p.size > e.maxSize).length > 0) {
+      alert(`File(s) too large. Max size: ${q(e.maxSize)}`);
+      return;
+    }
+    const w = e.maxFiles ?? 5;
+    if (r.length + f.length > w) {
+      alert(`Maximum ${w} files allowed`);
+      return;
+    }
+    t(f), s.current && (s.current.value = "");
+  };
+  return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ a("input", {
+    ref: s,
+    type: "file",
+    accept: e.accept,
+    multiple: e.multiple !== !1,
+    onChange: i,
+    style: { display: "none" }
+  }), /* @__PURE__ */ a("button", {
+    type: "button",
+    onClick: () => s.current?.click(),
+    "aria-label": "Attach file",
+    title: "Attach file",
+    style: {
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      padding: "6px",
+      display: "flex",
+      alignItems: "center",
+      color: "#999",
+      borderRadius: "6px",
+      transition: "color 0.15s ease"
+    },
+    onMouseEnter: (c) => c.currentTarget.style.color = o,
+    onMouseLeave: (c) => c.currentTarget.style.color = "#999",
+    children: /* @__PURE__ */ a(ie, { size: 20 })
+  })] });
+}, Re = ({ files: e, onRemove: t, primaryColor: r }) => e.length === 0 ? null : /* @__PURE__ */ a("div", {
+  style: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px",
+    padding: "8px 12px 0"
+  },
+  children: e.map((n, o) => /* @__PURE__ */ a(Ae, {
+    file: n,
+    onRemove: () => t(o),
+    primaryColor: r
+  }, `${n.name}-${o}`))
+}), Ae = ({ file: e, onRemove: t, primaryColor: r }) => {
+  const n = e.type.startsWith("image/");
+  return /* @__PURE__ */ x("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      padding: "4px 8px",
+      backgroundColor: "#F3F4F6",
+      borderRadius: "8px",
+      fontSize: "12px",
+      maxWidth: "200px"
+    },
+    children: [
+      /* @__PURE__ */ a("span", {
+        style: {
+          color: r,
+          flexShrink: 0
+        },
+        children: n ? /* @__PURE__ */ a(se, { size: 14 }) : /* @__PURE__ */ a(G, { size: 14 })
+      }),
+      /* @__PURE__ */ a("span", {
+        style: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          color: "#555"
+        },
+        children: e.name
+      }),
+      /* @__PURE__ */ a("span", {
+        style: {
+          color: "#999",
+          fontSize: "11px",
+          flexShrink: 0
+        },
+        children: q(e.size)
+      }),
+      /* @__PURE__ */ a("button", {
+        onClick: t,
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "0",
+          display: "flex",
+          color: "#999",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ a(le, { size: 14 })
+      })
+    ]
+  });
+};
+function q(e) {
+  return e < 1024 ? `${e}B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)}KB` : `${(e / (1024 * 1024)).toFixed(1)}MB`;
+}
+var Me = ({ onSend: e, placeholder: t = "Type a message...", primaryColor: r, isDark: n = !1, disabled: o, styleOverride: s, enableEmoji: i = !1, fileUpload: c, onFileUpload: u }) => {
+  const [f, w] = I(""), [p, g] = I(!1), [h, k] = I([]), D = C(null), R = v(() => {
+    const d = f.trim();
+    !d && h.length === 0 || (e(d, h.length > 0 ? h : void 0), w(""), k([]), D.current?.focus());
+  }, [
+    f,
+    h,
+    e
+  ]), T = (d) => {
+    d.key === "Enter" && !d.shiftKey && (d.preventDefault(), R());
+  }, l = (d) => {
+    w((S) => S + d), D.current?.focus();
+  }, b = (d) => {
+    k((S) => [...S, ...d]), u?.(d);
+  }, m = (d) => {
+    k((S) => S.filter((M, E) => E !== d));
+  }, y = f.trim() || h.length > 0;
+  return /* @__PURE__ */ x("div", {
+    style: {
+      position: "relative",
+      ...s
+    },
+    children: [
+      h.length > 0 && /* @__PURE__ */ a(Re, {
+        files: h,
+        onRemove: m,
+        primaryColor: r
+      }),
+      p && /* @__PURE__ */ a(Te, {
+        onSelect: l,
+        onClose: () => g(!1),
+        primaryColor: r
+      }),
+      /* @__PURE__ */ x("div", {
+        style: {
+          display: "flex",
+          gap: "8px",
+          alignItems: "flex-end",
+          background: n ? "rgba(40, 40, 65, 0.5)" : "rgba(245, 247, 252, 0.7)",
+          borderRadius: "16px",
+          border: `1px solid ${n ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)"}`,
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          padding: "6px 6px 6px 12px"
+        },
+        children: [
+          /* @__PURE__ */ x("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "2px",
+              flexShrink: 0,
+              paddingBottom: "2px"
+            },
+            children: [i && /* @__PURE__ */ a("button", {
+              type: "button",
+              onClick: () => g(!p),
+              "aria-label": "Emoji",
+              title: "Emoji",
+              style: {
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: "6px",
+                display: "flex",
+                color: p ? r : n ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.3)",
+                borderRadius: "8px",
+                transition: "all 0.2s ease"
+              },
+              children: /* @__PURE__ */ a(oe, { size: 20 })
+            }), c?.enabled && /* @__PURE__ */ a(Ie, {
+              config: c,
+              onFiles: b,
+              selectedFiles: h,
+              onRemoveFile: m,
+              primaryColor: r
+            })]
+          }),
+          /* @__PURE__ */ a("textarea", {
+            ref: D,
+            value: f,
+            onChange: (d) => w(d.target.value),
+            onKeyDown: T,
+            placeholder: t,
+            disabled: o,
+            rows: 1,
+            style: {
+              flex: 1,
+              padding: "8px 2px",
+              border: "none",
+              borderRadius: "12px",
+              outline: "none",
+              resize: "none",
+              fontFamily: "inherit",
+              fontSize: "14px",
+              lineHeight: "1.45",
+              maxHeight: "100px",
+              overflowY: "auto",
+              backgroundColor: "transparent",
+              color: n ? "#E0E0E0" : "#2D3436",
+              letterSpacing: "0.01em"
+            }
+          }),
+          /* @__PURE__ */ a("button", {
+            onClick: R,
+            disabled: o || !y,
+            "aria-label": "Send message",
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "12px",
+              background: y ? `linear-gradient(135deg, ${r} 0%, ${Be(r, 30)} 100%)` : n ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
+              color: y ? "#fff" : n ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.2)",
+              border: "none",
+              cursor: y ? "pointer" : "default",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+              boxShadow: y ? `0 4px 12px ${r}44` : "none"
+            },
+            children: /* @__PURE__ */ a(re, { size: 16 })
+          })
+        ]
+      })
+    ]
+  });
+};
+function Be(e, t) {
+  const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
+  return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
+}
+var Le = ({ config: e, primaryColor: t }) => {
+  if (e.showBranding === !1) return null;
+  const r = e.poweredBy ?? "React ChatBot";
+  return /* @__PURE__ */ x("div", {
+    style: {
+      padding: "8px 16px",
+      textAlign: "center",
+      fontSize: "11px",
+      color: "rgba(0,0,0,0.35)",
+      background: "rgba(250, 250, 255, 0.7)",
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)",
+      borderTop: "1px solid rgba(0,0,0,0.04)",
+      flexShrink: 0,
+      letterSpacing: "0.02em"
+    },
+    children: [
+      "Powered by",
+      " ",
+      e.poweredByUrl ? /* @__PURE__ */ a("a", {
+        href: e.poweredByUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          color: t,
+          textDecoration: "none",
+          fontWeight: 600,
+          transition: "opacity 0.2s ease"
+        },
+        children: r
+      }) : /* @__PURE__ */ a("span", {
+        style: {
+          color: t,
+          fontWeight: 600
+        },
+        children: r
+      })
+    ]
+  });
+}, ze = class {
   constructor(e) {
-    this.collectedData = {}, this.startStep = e.startStep, this.steps = new Map(e.steps.map((t) => [t.id, t]));
+    this.collectedData = {}, this.idCounter = 0, this.uid = () => `msg_${Date.now()}_${++this.idCounter}`, this.stepHistory = [], this.startStep = e.startStep, this.steps = new Map(e.steps.map((t) => [t.id, t]));
   }
   getStartStepId() {
     return this.startStep;
@@ -990,277 +1904,683 @@ var O = ({ onClick: e, isOpen: t, position: n, styles: r, icon: i, closeIcon: s,
   mergeData(e) {
     Object.assign(this.collectedData, e);
   }
+  pushHistory(e) {
+    this.stepHistory.push(e);
+  }
+  popHistory() {
+    return this.stepHistory.pop(), this.stepHistory.pop();
+  }
+  canGoBack() {
+    return this.stepHistory.length > 1;
+  }
+  reset() {
+    this.collectedData = {}, this.stepHistory = [];
+  }
   resolveNext(e, t) {
     if (e.condition) {
-      const { field: n, operator: r, value: i, then: s, else: u } = e.condition, l = this.collectedData[n];
-      return this.evaluate(l, r, i) ? s : u;
+      const { field: r, operator: n, value: o, then: s, else: i } = e.condition, c = this.collectedData[r];
+      return this.evaluate(c, n, o) ? s : i;
     }
     if (t && e.quickReplies) {
-      const n = e.quickReplies.find((r) => r.value === t);
-      if (n?.next) return n.next;
+      const r = e.quickReplies.find((n) => n.value === t);
+      if (r?.next) return r.next;
     }
     return e.next;
   }
+  stepExpectsQuickReply(e) {
+    return !!(e.quickReplies && e.quickReplies.length > 0);
+  }
+  stepExpectsForm(e) {
+    return !!e.form;
+  }
+  matchQuickReply(e, t) {
+    if (!e.quickReplies) return;
+    const r = t.toLowerCase().trim(), n = e.quickReplies.find((s) => s.value.toLowerCase() === r);
+    if (n) return n;
+    const o = e.quickReplies.find((s) => s.label.toLowerCase().replace(/[^\w\s]/g, "").trim() === r);
+    return o || e.quickReplies.find((s) => r.includes(s.value.toLowerCase()) || s.label.toLowerCase().includes(r));
+  }
   buildMessages(e) {
-    const t = [], n = e.messages ?? (e.message ? [e.message] : []);
-    for (const r of n) t.push({
-      id: k(),
+    const t = [], r = e.messages ?? (e.message ? [e.message] : []);
+    for (const n of r) t.push({
+      id: this.uid(),
       sender: "bot",
-      text: r,
+      text: n,
       timestamp: Date.now()
     });
     return e.quickReplies && t.length > 0 && (t[t.length - 1].quickReplies = e.quickReplies), e.form && t.push({
-      id: k(),
+      id: this.uid(),
       sender: "bot",
       timestamp: Date.now(),
       form: e.form
+    }), e.component && t.push({
+      id: this.uid(),
+      sender: "bot",
+      timestamp: Date.now(),
+      component: e.component
     }), t;
   }
-  evaluate(e, t, n) {
+  evaluate(e, t, r) {
     switch (t) {
       case "eq":
-        return String(e) === String(n);
+        return String(e) === String(r);
       case "neq":
-        return String(e) !== String(n);
+        return String(e) !== String(r);
       case "contains":
-        return String(e).includes(String(n));
+        return String(e).includes(String(r));
       case "gt":
-        return Number(e) > Number(n);
+        return Number(e) > Number(r);
       case "lt":
-        return Number(e) < Number(n);
+        return Number(e) < Number(r);
       default:
         return !1;
     }
   }
-}, re = 0, f = () => `msg_${Date.now()}_${++re}`, v = (e) => new Promise((t) => setTimeout(t, e));
-function oe() {
-  const { state: e, dispatch: t, props: n } = D(), r = b(null), i = b(!1);
-  E(() => {
-    n.flow && (r.current = new ne(n.flow), i.current = !1);
-  }, [n.flow]);
-  const s = y(async (x, p) => {
+}, _e = 0, F = () => `msg_${Date.now()}_${++_e}`, B = (e) => new Promise((t) => setTimeout(t, e)), We = {
+  "/help": "Show available commands",
+  "/cancel": "Cancel current step and go back",
+  "/back": "Go back to the previous step",
+  "/restart": "Restart the conversation from the beginning"
+};
+function $e() {
+  const { state: e, dispatch: t, props: r } = j(), n = C(null), o = C(!1), s = C(e);
+  s.current = e;
+  const i = C(r);
+  i.current = r, A(() => {
+    r.flow && (n.current = new ze(r.flow), o.current = !1);
+  }, [r.flow]);
+  const c = v(async (l, b) => {
     t({
       type: "SET_TYPING",
       payload: !0
-    }), await v(400);
-    const h = {
-      id: f(),
+    }), await B(400);
+    const m = {
+      id: F(),
       sender: "bot",
-      text: x,
+      text: l,
       timestamp: Date.now(),
-      ...p
+      ...b
     };
     t({
       type: "SET_TYPING",
       payload: !1
     }), t({
       type: "ADD_MESSAGE",
-      payload: h
-    }), n.callbacks?.onMessageReceive?.(h);
-  }, [t, n.callbacks]), u = y((x) => {
-    const p = {
-      id: f(),
-      sender: "user",
-      text: x,
-      timestamp: Date.now()
-    };
-    if (t({
+      payload: m
+    }), i.current.callbacks?.onMessageReceive?.(m);
+  }, [t]), u = v((l) => {
+    t({
       type: "ADD_MESSAGE",
-      payload: p
-    }), n.callbacks?.onMessageSend?.(p), n.callbacks?.onSubmit?.({ message: x }), r.current && e.currentStepId) {
-      const h = r.current.getStep(e.currentStepId);
-      if (h) {
-        r.current.setData(h.id, x);
-        const a = r.current.resolveNext(h, x);
-        a ? l(a) : (n.callbacks?.onFlowEnd?.(r.current.getData()), t({
-          type: "SET_STEP",
-          payload: null
-        }));
+      payload: {
+        id: F(),
+        sender: "system",
+        text: l,
+        timestamp: Date.now()
       }
-    }
-  }, [
-    t,
-    n.callbacks,
-    e.currentStepId
-  ]), l = y(async (x) => {
-    const p = r.current;
-    if (!p) return;
-    const h = p.getStep(x);
-    if (!h) return;
-    t({
+    });
+  }, [t]), f = C(async () => {
+  });
+  f.current = async (l) => {
+    const b = n.current;
+    if (!b) return;
+    const m = b.getStep(l);
+    if (!m) return;
+    b.pushHistory(l), t({
       type: "SET_STEP",
-      payload: x
+      payload: l
     }), t({
       type: "SET_TYPING",
       payload: !0
-    }), await v(h.delay ?? 500);
-    const a = p.buildMessages(h);
-    t({
+    }), await B(m.delay ?? 500);
+    const y = b.buildMessages(m);
+    if (t({
       type: "SET_TYPING",
       payload: !1
     }), t({
       type: "ADD_MESSAGES",
-      payload: a
-    }), a.forEach((c) => n.callbacks?.onMessageReceive?.(c)), !h.quickReplies && !h.form && h.next && (await v(300), l(h.next));
-  }, [t, n.callbacks]), g = y(() => {
-    const x = r.current;
-    !x || i.current || (i.current = !0, l(x.getStartStepId()));
-  }, [l]);
-  return E(() => {
-    n.flow && !e.showWelcome && e.isLoggedIn && !i.current && g();
+      payload: y
+    }), y.forEach((d) => i.current.callbacks?.onMessageReceive?.(d)), m.asyncAction) {
+      const d = i.current.actionHandlers?.[m.asyncAction.handler];
+      if (d) {
+        const S = F();
+        t({
+          type: "ADD_MESSAGE",
+          payload: {
+            id: S,
+            sender: "bot",
+            text: m.asyncAction.loadingMessage ?? "Processing...",
+            timestamp: Date.now()
+          }
+        });
+        const M = { updateMessage: (E) => {
+          t({
+            type: "UPDATE_MESSAGE",
+            payload: {
+              id: S,
+              updates: { text: E }
+            }
+          });
+        } };
+        try {
+          const E = await d(b.getData(), M);
+          E.data && (b.mergeData(E.data), t({
+            type: "SET_DATA",
+            payload: E.data
+          })), t({
+            type: "UPDATE_MESSAGE",
+            payload: {
+              id: S,
+              updates: { text: E.message ?? (E.status === "success" ? m.asyncAction.successMessage ?? "Done!" : m.asyncAction.errorMessage ?? "Something went wrong.") }
+            }
+          });
+          const z = w(m, E);
+          z && (await B(600), f.current(z));
+        } catch {
+          t({
+            type: "UPDATE_MESSAGE",
+            payload: {
+              id: S,
+              updates: { text: m.asyncAction.errorMessage ?? "❌ Something went wrong." }
+            }
+          }), m.asyncAction.onError && (await B(600), f.current(m.asyncAction.onError));
+        }
+        return;
+      }
+    }
+    m.component && i.current.components?.[m.component] || !m.quickReplies && !m.form && m.next && (await B(300), f.current(m.next));
+  };
+  function w(l, b) {
+    return b.next ? b.next : l.asyncAction?.routes?.[b.status] ? l.asyncAction.routes[b.status] : b.status === "success" && l.asyncAction?.onSuccess ? l.asyncAction.onSuccess : b.status === "error" && l.asyncAction?.onError ? l.asyncAction.onError : l.next;
+  }
+  const p = v((l) => f.current(l), []), g = v(() => {
+    const l = n.current;
+    if (!l || !l.canGoBack()) {
+      u("There is no previous step to go back to.");
+      return;
+    }
+    t({ type: "CLEAR_QUICK_REPLIES" });
+    const b = l.popHistory();
+    b ? p(b) : u("There is no previous step to go back to.");
   }, [
-    n.flow,
+    t,
+    p,
+    u
+  ]), h = v(() => {
+    const l = n.current;
+    l && l.reset(), o.current = !1, t({ type: "RESET_CHAT" }), l && (o.current = !0, p(l.getStartStepId()));
+  }, [t, p]), k = C(() => !1);
+  k.current = (l) => {
+    const b = l.trim().toLowerCase();
+    if (!b.startsWith("/")) return !1;
+    switch (b) {
+      case "/help":
+        return u(`Available commands:
+${Object.entries(We).map(([m, y]) => `**${m}** — ${y}`).join(`
+`)}`), !0;
+      case "/cancel":
+      case "/back":
+        return g(), !0;
+      case "/restart":
+        return h(), !0;
+      default:
+        return u(`Unknown command: ${b}. Type /help for available commands.`), !0;
+    }
+  };
+  const D = v((l) => {
+    const b = n.current, m = s.current.currentStepId;
+    if (!b || !m) return;
+    const y = b.getStep(m);
+    if (!y) return;
+    l?.data && (b.mergeData(l.data), t({
+      type: "SET_DATA",
+      payload: l.data
+    })), l?.message && t({
+      type: "ADD_MESSAGE",
+      payload: {
+        id: F(),
+        sender: "bot",
+        text: l.message,
+        timestamp: Date.now()
+      }
+    });
+    const d = l?.next ?? y.next;
+    d ? p(d) : (i.current.callbacks?.onFlowEnd?.(b.getData()), t({
+      type: "SET_STEP",
+      payload: null
+    }));
+  }, [t, p]), R = v((l) => {
+    if (k.current(l)) return;
+    const b = {
+      id: F(),
+      sender: "user",
+      text: l,
+      timestamp: Date.now()
+    };
+    t({
+      type: "ADD_MESSAGE",
+      payload: b
+    }), i.current.callbacks?.onMessageSend?.(b), i.current.callbacks?.onSubmit?.({ message: l });
+    const m = s.current.currentStepId;
+    if (n.current && m) {
+      const y = n.current.getStep(m);
+      if (y) {
+        if (y.asyncAction || y.component) {
+          c("Please wait, I'm still processing. You can type /back to go back.");
+          return;
+        }
+        if (n.current.stepExpectsQuickReply(y)) {
+          const d = n.current.matchQuickReply(y, l);
+          if (d) {
+            t({ type: "CLEAR_QUICK_REPLIES" }), n.current.setData(y.id, d.value);
+            const S = n.current.resolveNext(y, d.value);
+            S ? p(S) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
+              type: "SET_STEP",
+              payload: null
+            }));
+          } else c("I didn't quite get that. Please choose one of the options below:", { quickReplies: y.quickReplies });
+        } else if (n.current.stepExpectsForm(y)) c("Please fill out the form above to continue.");
+        else {
+          n.current.setData(y.id, l);
+          const d = n.current.resolveNext(y, l);
+          d ? p(d) : (c("Thanks for your message! Our team will get back to you soon. 🙌"), i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
+            type: "SET_STEP",
+            payload: null
+          }));
+        }
+      }
+    }
+  }, [
+    t,
+    c,
+    p
+  ]), T = v(() => {
+    const l = n.current;
+    !l || o.current || (o.current = !0, p(l.getStartStepId()));
+  }, [p]);
+  return A(() => {
+    r.flow && !e.showWelcome && e.isLoggedIn && !o.current && T();
+  }, [
+    r.flow,
     e.showWelcome,
     e.isLoggedIn,
-    g
+    T
   ]), {
     state: e,
-    sendMessage: u,
-    addBotMessage: s,
-    handleQuickReply: y((x, p) => {
-      if (t({ type: "CLEAR_QUICK_REPLIES" }), t({
+    sendMessage: R,
+    addBotMessage: c,
+    handleQuickReply: v((l, b) => {
+      t({ type: "CLEAR_QUICK_REPLIES" }), t({
         type: "ADD_MESSAGE",
         payload: {
-          id: f(),
+          id: F(),
           sender: "user",
-          text: p,
+          text: b,
           timestamp: Date.now()
         }
-      }), n.callbacks?.onQuickReply?.(x, p), r.current && e.currentStepId) {
-        const h = r.current.getStep(e.currentStepId);
-        if (h) {
-          r.current.setData(h.id, x);
-          const a = r.current.resolveNext(h, x);
-          a ? l(a) : (n.callbacks?.onFlowEnd?.(r.current.getData()), t({
+      }), i.current.callbacks?.onQuickReply?.(l, b);
+      const m = s.current.currentStepId;
+      if (n.current && m) {
+        const y = n.current.getStep(m);
+        if (y) {
+          n.current.setData(y.id, l);
+          const d = n.current.resolveNext(y, l);
+          d ? p(d) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
             type: "SET_STEP",
             payload: null
           }));
         }
       }
-    }, [
-      t,
-      n.callbacks,
-      e.currentStepId,
-      l
-    ]),
-    handleFormSubmit: y(async (x, p) => {
+    }, [t, p]),
+    handleFormSubmit: v(async (l, b) => {
       t({
         type: "SET_DATA",
-        payload: p
-      }), r.current && r.current.mergeData(p);
-      const h = Object.entries(p).filter(([, a]) => a !== void 0 && a !== "").map(([a, c]) => `${a}: ${String(c)}`).join(`
+        payload: b
+      }), n.current && n.current.mergeData(b);
+      const m = Object.entries(b).filter(([, d]) => d !== void 0 && d !== "").map(([d, S]) => `${d}: ${String(S)}`).join(`
 `);
-      if (t({
+      t({
         type: "ADD_MESSAGE",
         payload: {
-          id: f(),
+          id: F(),
           sender: "user",
-          text: h,
-          formData: p,
+          text: m,
+          formData: b,
           timestamp: Date.now()
         }
-      }), await n.callbacks?.onFormSubmit?.(x, p), r.current && e.currentStepId) {
-        const a = r.current.getStep(e.currentStepId);
-        if (a) {
-          const c = r.current.resolveNext(a);
-          c ? l(c) : (n.callbacks?.onFlowEnd?.(r.current.getData()), t({
+      }), await i.current.callbacks?.onFormSubmit?.(l, b);
+      const y = s.current.currentStepId;
+      if (n.current && y) {
+        const d = n.current.getStep(y);
+        if (d) {
+          const S = n.current.resolveNext(d);
+          S ? p(S) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
             type: "SET_STEP",
             payload: null
           }));
         }
       }
-    }, [
-      t,
-      n.callbacks,
-      e.currentStepId,
-      l
-    ]),
-    handleLogin: y(async (x) => {
-      await n.callbacks?.onLogin?.(x), t({
+    }, [t, p]),
+    handleLogin: v(async (l) => {
+      await i.current.callbacks?.onLogin?.(l), t({
         type: "SET_LOGGED_IN",
         payload: !0
       });
-    }, [t, n.callbacks]),
-    toggleChat: y(() => {
-      const x = !e.isOpen;
-      t({ type: "TOGGLE_OPEN" }), x ? n.callbacks?.onOpen?.() : n.callbacks?.onClose?.();
-    }, [
-      t,
-      e.isOpen,
-      n.callbacks
-    ]),
-    dismissWelcome: y(() => {
+    }, [t]),
+    toggleChat: v(() => {
+      const l = !s.current.isOpen;
+      t({ type: "TOGGLE_OPEN" }), l ? i.current.callbacks?.onOpen?.() : i.current.callbacks?.onClose?.();
+    }, [t]),
+    dismissWelcome: v(() => {
       t({ type: "DISMISS_WELCOME" });
     }, [t]),
-    startFlow: g,
-    processFlowStep: l
+    startFlow: T,
+    processFlowStep: p,
+    goBack: g,
+    restartSession: h,
+    handleComponentComplete: D
   };
 }
-var ie = ({ styles: e, position: t, zIndex: n }) => {
-  const { props: r } = D(), i = T(r.theme), { state: s, sendMessage: u, handleQuickReply: l, handleFormSubmit: g, handleLogin: x, toggleChat: p, dismissWelcome: h } = oe(), a = t === "bottom-left" ? {
-    bottom: "90px",
-    left: "20px"
+var je = ({ styles: e, position: t, zIndex: r, hidden: n }) => {
+  const { props: o, dispatch: s } = j(), i = O(o.theme), c = i.mode === "dark", { state: u, sendMessage: f, handleQuickReply: w, handleFormSubmit: p, handleLogin: g, toggleChat: h, dismissWelcome: k, restartSession: D, handleComponentComplete: R } = $e(), T = t === "bottom-left" ? {
+    bottom: "96px",
+    left: "24px"
   } : {
-    bottom: "90px",
-    right: "20px"
-  };
-  return /* @__PURE__ */ d("div", {
+    bottom: "96px",
+    right: "24px"
+  }, l = v((d, S) => {
+    if (S && S.length > 0) {
+      const M = S.map((E) => ({
+        name: E.name,
+        url: URL.createObjectURL(E),
+        type: E.type,
+        size: E.size
+      }));
+      d ? (s({
+        type: "ADD_MESSAGE",
+        payload: {
+          id: F(),
+          sender: "user",
+          text: d,
+          timestamp: Date.now(),
+          attachments: M
+        }
+      }), f(d)) : s({
+        type: "ADD_MESSAGE",
+        payload: {
+          id: F(),
+          sender: "user",
+          timestamp: Date.now(),
+          attachments: M
+        }
+      }), o.callbacks?.onFileUpload?.(S);
+    } else d && f(d);
+  }, [
+    f,
+    s,
+    o.callbacks
+  ]), b = U(() => ({
+    currentStepId: u.currentStepId,
+    isOpen: u.isOpen,
+    messages: u.messages,
+    collectedData: u.collectedData,
+    toggleChat: h,
+    restartSession: D,
+    sendMessage: f
+  }), [
+    u.currentStepId,
+    u.isOpen,
+    u.messages,
+    u.collectedData,
+    h,
+    D,
+    f
+  ]), m = /* @__PURE__ */ a(pe, {
+    config: o.header ?? { title: "Chat with us" },
+    styles: e,
+    onClose: h,
+    onRestart: D,
+    logo: o.branding?.logo,
+    logoWidth: o.branding?.logoWidth
+  }), y = /* @__PURE__ */ a(Me, {
+    onSend: l,
+    placeholder: o.inputPlaceholder,
+    primaryColor: i.primaryColor,
+    isDark: c,
+    enableEmoji: o.enableEmoji,
+    fileUpload: o.fileUpload,
+    onFileUpload: o.callbacks?.onFileUpload
+  });
+  return n ? /* @__PURE__ */ a("div", { style: { display: "none" } }) : /* @__PURE__ */ x("div", {
     style: {
       ...e.window,
-      ...a,
-      ...n != null ? { zIndex: n } : {}
+      ...T,
+      ...r != null ? { zIndex: r } : {}
     },
-    children: [/* @__PURE__ */ o(N, {
-      config: r.header ?? { title: "Chat with us" },
-      styles: e,
-      onClose: p
-    }), s.showWelcome && r.welcomeScreen ? /* @__PURE__ */ o(P, {
-      content: r.welcomeScreen,
-      onDismiss: h,
+    children: [o.renderHeader ? o.renderHeader(b, m) : m, u.showWelcome && o.welcomeScreen ? /* @__PURE__ */ a(ue, {
+      content: o.welcomeScreen,
+      onDismiss: k,
       primaryColor: i.primaryColor
-    }) : !s.isLoggedIn && r.loginForm ? /* @__PURE__ */ o(U, {
-      config: r.loginForm,
-      onLogin: x,
+    }) : !u.isLoggedIn && o.loginForm ? /* @__PURE__ */ a(ke, {
+      config: o.loginForm,
+      onLogin: g,
       primaryColor: i.primaryColor
-    }) : /* @__PURE__ */ d(C, { children: [/* @__PURE__ */ o(Z, {
-      messages: s.messages,
-      isTyping: s.isTyping,
-      styles: e,
-      primaryColor: i.primaryColor,
-      onQuickReply: l,
-      onFormSubmit: g
-    }), /* @__PURE__ */ o("div", {
-      style: e.inputArea,
-      children: /* @__PURE__ */ o(ee, {
-        onSend: u,
-        placeholder: r.inputPlaceholder,
+    }) : /* @__PURE__ */ x(K, { children: [
+      /* @__PURE__ */ a(Fe, {
+        messages: u.messages,
+        isTyping: u.isTyping,
+        styles: e,
+        primaryColor: i.primaryColor,
+        onQuickReply: w,
+        onFormSubmit: p,
+        components: o.components,
+        onComponentComplete: R,
+        collectedData: u.collectedData,
+        currentStepId: u.currentStepId
+      }),
+      /* @__PURE__ */ a("div", {
+        style: e.inputArea,
+        children: o.renderInput ? o.renderInput(b, y) : y
+      }),
+      o.branding && /* @__PURE__ */ a(Le, {
+        config: o.branding,
         primaryColor: i.primaryColor
       })
-    })] })]
+    ] })]
   });
-}, se = (e) => {
-  const [t, n] = B(A, e, _), r = M(T(e.theme), e.style), i = e.position ?? "bottom-right", s = e.showLauncher !== !1;
-  return /* @__PURE__ */ o(F.Provider, {
+}, Oe = class {
+  constructor() {
+    this.plugins = [], this.context = null, this.eventHandlers = /* @__PURE__ */ new Map();
+  }
+  register(e) {
+    this.plugins = [...e];
+  }
+  setContext(e) {
+    this.context = {
+      ...e,
+      on: (t, r) => this.on(t, r),
+      emit: (t, ...r) => this.emit(t, ...r)
+    };
+  }
+  on(e, t) {
+    this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t);
+  }
+  emit(e, ...t) {
+    const r = this.eventHandlers.get(e);
+    r && r.forEach((n) => n(...t));
+  }
+  async init() {
+    if (this.context)
+      for (const e of this.plugins) try {
+        await e.onInit?.(this.context);
+      } catch (t) {
+        console.error(`[Plugin:${e.name}] onInit error:`, t);
+      }
+  }
+  async onMessage(e) {
+    if (!this.context) return e;
+    let t = e;
+    for (const r of this.plugins) try {
+      const n = await r.onMessage?.(t, this.context);
+      n && typeof n == "object" && "id" in n && (t = n);
+    } catch (n) {
+      console.error(`[Plugin:${r.name}] onMessage error:`, n);
+    }
+    return this.dispatchEvent({
+      type: "message",
+      payload: t,
+      timestamp: Date.now()
+    }), t;
+  }
+  async onSubmit(e) {
+    if (this.context) {
+      for (const t of this.plugins) try {
+        await t.onSubmit?.(e, this.context);
+      } catch (r) {
+        console.error(`[Plugin:${t.name}] onSubmit error:`, r);
+      }
+      this.dispatchEvent({
+        type: "submit",
+        payload: e,
+        timestamp: Date.now()
+      });
+    }
+  }
+  async destroy() {
+    if (this.context) {
+      for (const e of this.plugins) try {
+        await e.onDestroy?.(this.context);
+      } catch (t) {
+        console.error(`[Plugin:${e.name}] onDestroy error:`, t);
+      }
+      this.eventHandlers.clear(), this.plugins = [];
+    }
+  }
+  dispatchEvent(e) {
+    if (this.context)
+      for (const t of this.plugins) try {
+        t.onEvent?.(e, this.context);
+      } catch (r) {
+        console.error(`[Plugin:${t.name}] onEvent error:`, r);
+      }
+  }
+}, Pe = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@keyframes cb-window-enter {
+  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes cb-launcher-pulse {
+  0%, 100% { box-shadow: 0 6px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.1); }
+  50% { box-shadow: 0 8px 32px rgba(108, 92, 231, 0.55), 0 4px 12px rgba(0,0,0,0.15); }
+}
+
+@keyframes cb-fade-in {
+  0% { opacity: 0; transform: translateY(6px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes cb-typing-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes cb-slide-up {
+  0% { opacity: 0; transform: translateY(10px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.cb-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.cb-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cb-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(108, 92, 231, 0.2);
+  border-radius: 10px;
+}
+.cb-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(108, 92, 231, 0.35);
+}
+`, L = !1;
+function Ge() {
+  if (L || typeof document > "u") return;
+  if (document.querySelector("style[data-chatbot-styles]")) {
+    L = !0;
+    return;
+  }
+  const e = document.createElement("style");
+  e.setAttribute("data-chatbot-styles", ""), e.textContent = Pe, document.head.appendChild(e), L = !0;
+}
+var Ne = (e) => {
+  const [t, r] = Q(J, e, V), n = O(e.theme), o = te(n, e.style), s = ee(n), i = e.position ?? "bottom-right", c = e.showLauncher !== !1, u = C(null), f = C(t);
+  f.current = t, A(() => {
+    Ge();
+  }, []), A(() => {
+    if (e.plugins && e.plugins.length > 0) {
+      const p = new Oe();
+      return p.register(e.plugins), p.setContext({
+        sendMessage: (g) => {
+          r({
+            type: "ADD_MESSAGE",
+            payload: {
+              id: F(),
+              sender: "user",
+              text: g,
+              timestamp: Date.now()
+            }
+          });
+        },
+        addBotMessage: (g) => {
+          r({
+            type: "ADD_MESSAGE",
+            payload: {
+              id: F(),
+              sender: "bot",
+              text: g,
+              timestamp: Date.now()
+            }
+          });
+        },
+        getMessages: () => f.current.messages,
+        getData: () => f.current.collectedData,
+        setData: (g, h) => r({
+          type: "SET_DATA",
+          payload: { [g]: h }
+        })
+      }), p.init(), u.current = p, () => {
+        p.destroy();
+      };
+    }
+  }, [e.plugins]);
+  const w = v(() => {
+    const p = !t.isOpen;
+    r({ type: "TOGGLE_OPEN" }), p ? e.callbacks?.onOpen?.() : e.callbacks?.onClose?.();
+  }, [t.isOpen, e.callbacks]);
+  return /* @__PURE__ */ a($.Provider, {
     value: {
       state: t,
-      dispatch: n,
+      dispatch: r,
       props: e
     },
-    children: /* @__PURE__ */ d("div", {
-      style: r.root,
+    children: /* @__PURE__ */ x("div", {
+      style: {
+        ...o.root,
+        ...s
+      },
       className: e.className,
-      children: [t.isOpen && /* @__PURE__ */ o(ie, {
-        styles: r,
+      children: [/* @__PURE__ */ a(je, {
+        styles: o,
         position: i,
-        zIndex: e.zIndex
-      }), s && /* @__PURE__ */ o(O, {
-        onClick: () => {
-          const u = !t.isOpen;
-          n({ type: "TOGGLE_OPEN" }), u ? e.callbacks?.onOpen?.() : e.callbacks?.onClose?.();
-        },
+        zIndex: e.zIndex,
+        hidden: !t.isOpen
+      }), c && /* @__PURE__ */ a(de, {
+        onClick: w,
         isOpen: t.isOpen,
         position: i,
-        styles: r,
+        styles: o,
         icon: e.launcherIcon,
         closeIcon: e.closeIcon,
         zIndex: e.zIndex
@@ -1268,28 +2588,138 @@ var ie = ({ styles: e, position: t, zIndex: n }) => {
     })
   });
 };
+function Ye(e) {
+  let t = 0, r = 0;
+  return {
+    name: "analytics",
+    onInit(n) {
+      t = 0, r = 0, e?.onTrack?.("chatbot:init");
+    },
+    onMessage(n, o) {
+      t++, e?.onTrack?.("chatbot:message", {
+        sender: n.sender,
+        messageCount: t
+      });
+    },
+    onSubmit(n, o) {
+      r++, e?.onTrack?.("chatbot:submit", {
+        formSubmissions: r,
+        fields: Object.keys(n)
+      });
+    },
+    onDestroy() {
+      e?.onTrack?.("chatbot:destroy", {
+        totalMessages: t,
+        totalFormSubmissions: r
+      });
+    }
+  };
+}
+function Ue(e) {
+  const t = e.events ?? ["message", "submit"], r = async (n, o) => {
+    try {
+      await fetch(e.url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...e.headers
+        },
+        body: JSON.stringify({
+          type: n,
+          payload: o,
+          timestamp: Date.now()
+        })
+      });
+    } catch (s) {
+      console.error(`[webhook] Failed to send ${n}:`, s);
+    }
+  };
+  return {
+    name: "webhook",
+    async onInit() {
+      t.includes("init") && await r("init", {});
+    },
+    async onMessage(n) {
+      t.includes("message") && await r("message", n);
+    },
+    async onSubmit(n) {
+      t.includes("submit") && await r("submit", n);
+    },
+    async onDestroy() {
+      t.includes("destroy") && await r("destroy", {});
+    }
+  };
+}
+function Qe(e) {
+  const t = e?.storageKey ?? "chatbot_history", r = e?.storage === "session" ? sessionStorage : localStorage;
+  return {
+    name: "persistence",
+    onInit(n) {
+      try {
+        const o = r.getItem(t);
+        if (o) {
+          const s = JSON.parse(o);
+          Array.isArray(s) && s.forEach((i) => {
+            i.sender === "bot" && n.addBotMessage(i.text);
+          });
+        }
+      } catch {
+      }
+    },
+    onMessage(n, o) {
+      try {
+        const s = o.getMessages();
+        r.setItem(t, JSON.stringify(s.slice(-50)));
+      } catch {
+      }
+    },
+    onDestroy() {
+    }
+  };
+}
 export {
-  se as ChatBot,
-  F as ChatContext,
-  N as ChatHeader,
-  ee as ChatInput,
-  ie as ChatWindow,
-  Q as CheckboxField,
-  I as DynamicForm,
-  Y as FileUploadField,
-  ne as FlowEngine,
-  O as Launcher,
-  U as LoginScreen,
-  V as MessageBubble,
-  Z as MessageList,
-  J as QuickReplies,
-  H as RadioField,
-  $ as SelectField,
-  j as TextField,
-  X as TypingIndicator,
-  P as WelcomeScreen,
-  oe as useChat,
-  D as useChatContext
+  ie as AttachmentIcon,
+  Le as Branding,
+  Ne as ChatBot,
+  ne as ChatBubbleIcon,
+  $ as ChatContext,
+  pe as ChatHeader,
+  Me as ChatInput,
+  je as ChatWindow,
+  me as CheckboxField,
+  P as CloseIcon,
+  H as DynamicForm,
+  oe as EmojiIcon,
+  Te as EmojiPicker,
+  G as FileIcon,
+  Re as FilePreviewList,
+  Ie as FileUploadButton,
+  ye as FileUploadField,
+  ze as FlowEngine,
+  se as ImageIcon,
+  de as Launcher,
+  ke as LoginScreen,
+  we as MessageBubble,
+  Fe as MessageList,
+  ae as MinimizeIcon,
+  Oe as PluginManager,
+  Ce as QuickReplies,
+  he as RadioField,
+  le as RemoveIcon,
+  ce as RestartIcon,
+  xe as SelectField,
+  re as SendIcon,
+  be as TextField,
+  De as TypingIndicator,
+  ue as WelcomeScreen,
+  Ye as analyticsPlugin,
+  ee as buildCSSVariables,
+  te as buildStyles,
+  Qe as persistencePlugin,
+  O as resolveTheme,
+  $e as useChat,
+  j as useChatContext,
+  Ue as webhookPlugin
 };
 
 //# sourceMappingURL=index.mjs.map