@enjoys/react-chatbot-plugin 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1295 @@
+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) {
+  switch (t.type) {
+    case "TOGGLE_OPEN":
+      return {
+        ...e,
+        isOpen: !e.isOpen
+      };
+    case "SET_OPEN":
+      return {
+        ...e,
+        isOpen: t.payload
+      };
+    case "ADD_MESSAGE":
+      return {
+        ...e,
+        messages: [...e.messages, t.payload]
+      };
+    case "ADD_MESSAGES":
+      return {
+        ...e,
+        messages: [...e.messages, ...t.payload]
+      };
+    case "SET_TYPING":
+      return {
+        ...e,
+        isTyping: t.payload
+      };
+    case "DISMISS_WELCOME":
+      return {
+        ...e,
+        showWelcome: !1
+      };
+    case "SET_STEP":
+      return {
+        ...e,
+        currentStepId: t.payload
+      };
+    case "SET_DATA":
+      return {
+        ...e,
+        collectedData: {
+          ...e.collectedData,
+          ...t.payload
+        }
+      };
+    case "SET_LOGGED_IN":
+      return {
+        ...e,
+        isLoggedIn: t.payload
+      };
+    case "CLEAR_QUICK_REPLIES":
+      return {
+        ...e,
+        messages: e.messages.map((n) => n.quickReplies ? {
+          ...n,
+          quickReplies: void 0
+        } : n)
+      };
+    default:
+      return e;
+  }
+}
+var _ = (e) => ({
+  isOpen: e.defaultOpen ?? !1,
+  messages: e.initialMessages ?? [],
+  isTyping: !1,
+  showWelcome: !!e.welcomeScreen,
+  currentStepId: null,
+  collectedData: {},
+  isLoggedIn: !e.loginForm
+}), F = L(null);
+function D() {
+  const e = z(F);
+  if (!e) throw new Error("useChatContext must be used within ChatProvider");
+  return e;
+}
+var W = {
+  primaryColor: "#0066FF",
+  headerBg: "#0066FF",
+  headerText: "#FFFFFF",
+  bubbleBg: "#F1F1F1",
+  bubbleText: "#333333",
+  userBubbleBg: "#0066FF",
+  userBubbleText: "#FFFFFF",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontSize: "14px",
+  borderRadius: "12px",
+  windowWidth: "380px",
+  windowHeight: "550px"
+};
+function T(e) {
+  return {
+    ...W,
+    ...e
+  };
+}
+function M(e, t) {
+  return {
+    root: {
+      fontFamily: e.fontFamily,
+      fontSize: e.fontSize,
+      lineHeight: "1.5"
+    },
+    launcher: {
+      position: "fixed",
+      width: "60px",
+      height: "60px",
+      borderRadius: "50%",
+      backgroundColor: e.primaryColor,
+      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",
+      zIndex: 9998,
+      ...t?.launcher
+    },
+    window: {
+      position: "fixed",
+      width: e.windowWidth,
+      height: e.windowHeight,
+      maxHeight: "80vh",
+      borderRadius: e.borderRadius,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
+      backgroundColor: "#FFFFFF",
+      zIndex: 9999,
+      ...t?.window
+    },
+    header: {
+      backgroundColor: e.headerBg,
+      color: e.headerText,
+      padding: "16px 20px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "12px",
+      flexShrink: 0,
+      ...t?.header
+    },
+    messageList: {
+      flex: 1,
+      overflowY: "auto",
+      padding: "16px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      ...t?.messageList
+    },
+    inputArea: {
+      padding: "12px 16px",
+      borderTop: "1px solid #E8E8E8",
+      display: "flex",
+      gap: "8px",
+      alignItems: "flex-end",
+      flexShrink: 0,
+      ...t?.inputArea
+    },
+    botBubble: {
+      backgroundColor: e.bubbleBg,
+      color: e.bubbleText,
+      padding: "10px 14px",
+      borderRadius: "16px 16px 16px 4px",
+      maxWidth: "80%",
+      alignSelf: "flex-start",
+      wordBreak: "break-word",
+      whiteSpace: "pre-wrap"
+    },
+    userBubble: {
+      backgroundColor: e.userBubbleBg,
+      color: e.userBubbleText,
+      padding: "10px 14px",
+      borderRadius: "16px 16px 4px 16px",
+      maxWidth: "80%",
+      alignSelf: "flex-end",
+      wordBreak: "break-word",
+      whiteSpace: "pre-wrap"
+    }
+  };
+}
+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",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  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",
+  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"
+  })]
+}), N = ({ config: e, styles: t, onClose: n }) => /* @__PURE__ */ d("div", {
+  style: t.header,
+  children: [/* @__PURE__ */ d("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      flex: 1
+    },
+    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", {
+      style: {
+        fontWeight: 600,
+        fontSize: "15px"
+      },
+      children: e.title ?? "Chat with us"
+    }), e.subtitle && /* @__PURE__ */ o("div", {
+      style: {
+        fontSize: "12px",
+        opacity: 0.85
+      },
+      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"
+      })]
+    })
+  })]
+}), P = ({ content: e, onDismiss: t, primaryColor: n }) => /* @__PURE__ */ d("div", {
+  style: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto"
+  },
+  children: [/* @__PURE__ */ o("div", {
+    style: {
+      flex: 1,
+      padding: "20px",
+      overflow: "auto"
+    },
+    children: e
+  }), /* @__PURE__ */ o("div", {
+    style: {
+      padding: "12px 16px",
+      borderTop: "1px solid #E8E8E8",
+      flexShrink: 0
+    },
+    children: /* @__PURE__ */ o("button", {
+      onClick: t,
+      style: {
+        width: "100%",
+        padding: "12px",
+        backgroundColor: n,
+        color: "#fff",
+        border: "none",
+        borderRadius: "8px",
+        fontSize: "14px",
+        fontWeight: 600,
+        cursor: "pointer"
+      },
+      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 = {
+    width: "100%",
+    padding: "8px 12px",
+    border: `1px solid ${r ? "#E53E3E" : "#D1D5DB"}`,
+    borderRadius: "8px",
+    fontSize: "13px",
+    fontFamily: "inherit",
+    outline: "none",
+    boxSizing: "border-box",
+    transition: "border-color 0.15s ease"
+  };
+  return /* @__PURE__ */ d("div", {
+    style: { marginBottom: "12px" },
+    children: [
+      e.label && /* @__PURE__ */ d("label", {
+        style: {
+          display: "block",
+          marginBottom: "4px",
+          fontSize: "13px",
+          fontWeight: 500
+        },
+        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+          style: {
+            color: "#E53E3E",
+            marginLeft: "2px"
+          },
+          children: "*"
+        })]
+      }),
+      i ? /* @__PURE__ */ o("textarea", {
+        value: t,
+        onChange: (l) => n(l.target.value),
+        placeholder: e.placeholder,
+        required: e.required,
+        rows: 3,
+        style: {
+          ...u,
+          resize: "vertical"
+        },
+        minLength: e.validation?.minLength,
+        maxLength: e.validation?.maxLength
+      }) : /* @__PURE__ */ o("input", {
+        type: s,
+        value: t,
+        onChange: (l) => n(l.target.value),
+        placeholder: e.placeholder,
+        required: e.required,
+        style: u,
+        min: e.validation?.min,
+        max: e.validation?.max,
+        minLength: e.validation?.minLength,
+        maxLength: e.validation?.maxLength,
+        pattern: e.validation?.pattern
+      }),
+      r && /* @__PURE__ */ o("div", {
+        style: {
+          color: "#E53E3E",
+          fontSize: "12px",
+          marginTop: "2px"
+        },
+        children: r
+      })
+    ]
+  });
+}, $ = ({ 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" },
+    children: [
+      e.label && /* @__PURE__ */ d("label", {
+        style: {
+          display: "block",
+          marginBottom: "4px",
+          fontSize: "13px",
+          fontWeight: 500
+        },
+        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+          style: {
+            color: "#E53E3E",
+            marginLeft: "2px"
+          },
+          children: "*"
+        })]
+      }),
+      /* @__PURE__ */ d("select", {
+        value: u,
+        onChange: s,
+        multiple: i,
+        required: e.required,
+        style: {
+          width: "100%",
+          padding: "8px 12px",
+          border: `1px solid ${r ? "#E53E3E" : "#D1D5DB"}`,
+          borderRadius: "8px",
+          fontSize: "13px",
+          fontFamily: "inherit",
+          outline: "none",
+          backgroundColor: "#fff",
+          boxSizing: "border-box",
+          ...i ? { minHeight: "80px" } : {}
+        },
+        children: [!i && /* @__PURE__ */ o("option", {
+          value: "",
+          children: "Select..."
+        }), e.options?.map((l) => /* @__PURE__ */ o("option", {
+          value: l.value,
+          children: l.label
+        }, l.value))]
+      }),
+      i && /* @__PURE__ */ o("div", {
+        style: {
+          fontSize: "11px",
+          color: "#888",
+          marginTop: "2px"
+        },
+        children: "Hold Ctrl/Cmd to select multiple"
+      }),
+      r && /* @__PURE__ */ o("div", {
+        style: {
+          color: "#E53E3E",
+          fontSize: "12px",
+          marginTop: "2px"
+        },
+        children: r
+      })
+    ]
+  });
+}, H = ({ field: e, value: t, onChange: n, error: r }) => /* @__PURE__ */ d("div", {
+  style: { marginBottom: "12px" },
+  children: [
+    e.label && /* @__PURE__ */ d("label", {
+      style: {
+        display: "block",
+        marginBottom: "6px",
+        fontSize: "13px",
+        fontWeight: 500
+      },
+      children: [e.label, e.required && /* @__PURE__ */ o("span", {
+        style: {
+          color: "#E53E3E",
+          marginLeft: "2px"
+        },
+        children: "*"
+      })]
+    }),
+    /* @__PURE__ */ o("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px"
+      },
+      children: e.options?.map((i) => /* @__PURE__ */ d("label", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          cursor: "pointer",
+          fontSize: "13px"
+        },
+        children: [/* @__PURE__ */ o("input", {
+          type: "radio",
+          name: e.name,
+          value: i.value,
+          checked: t === i.value,
+          onChange: () => n(i.value),
+          style: { margin: 0 }
+        }), i.label]
+      }, i.value))
+    }),
+    r && /* @__PURE__ */ o("div", {
+      style: {
+        color: "#E53E3E",
+        fontSize: "12px",
+        marginTop: "2px"
+      },
+      children: r
+    })
+  ]
+}), Q = ({ field: e, value: t, onChange: n, error: r }) => {
+  const i = (s) => {
+    t.includes(s) ? n(t.filter((u) => u !== s)) : n([...t, s]);
+  };
+  return /* @__PURE__ */ d("div", {
+    style: { marginBottom: "12px" },
+    children: [
+      e.label && /* @__PURE__ */ d("label", {
+        style: {
+          display: "block",
+          marginBottom: "6px",
+          fontSize: "13px",
+          fontWeight: 500
+        },
+        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+          style: {
+            color: "#E53E3E",
+            marginLeft: "2px"
+          },
+          children: "*"
+        })]
+      }),
+      /* @__PURE__ */ o("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px"
+        },
+        children: e.options?.map((s) => /* @__PURE__ */ d("label", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: "pointer",
+            fontSize: "13px"
+          },
+          children: [/* @__PURE__ */ o("input", {
+            type: "checkbox",
+            checked: t.includes(s.value),
+            onChange: () => i(s.value),
+            style: { margin: 0 }
+          }), s.label]
+        }, s.value))
+      }),
+      r && /* @__PURE__ */ o("div", {
+        style: {
+          color: "#E53E3E",
+          fontSize: "12px",
+          marginTop: "2px"
+        },
+        children: r
+      })
+    ]
+  });
+}, 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", {
+    style: { marginBottom: "12px" },
+    children: [
+      e.label && /* @__PURE__ */ d("label", {
+        style: {
+          display: "block",
+          marginBottom: "4px",
+          fontSize: "13px",
+          fontWeight: 500
+        },
+        children: [e.label, e.required && /* @__PURE__ */ o("span", {
+          style: {
+            color: "#E53E3E",
+            marginLeft: "2px"
+          },
+          children: "*"
+        })]
+      }),
+      /* @__PURE__ */ o("input", {
+        ref: s,
+        type: "file",
+        accept: e.accept,
+        multiple: e.multiple,
+        onChange: (l) => n(l.target.files),
+        style: { display: "none" }
+      }),
+      /* @__PURE__ */ o("button", {
+        type: "button",
+        onClick: () => s.current?.click(),
+        style: {
+          padding: "8px 16px",
+          border: `1px dashed ${r ? "#E53E3E" : "#D1D5DB"}`,
+          borderRadius: "8px",
+          backgroundColor: "#FAFAFA",
+          cursor: "pointer",
+          fontSize: "13px",
+          color: "#555",
+          width: "100%",
+          textAlign: "left"
+        },
+        children: u || e.placeholder || "Choose file(s)..."
+      }),
+      u && /* @__PURE__ */ d("div", {
+        style: {
+          fontSize: "12px",
+          color: i,
+          marginTop: "4px"
+        },
+        children: [Array.from(t).length, " file(s) selected"]
+      }),
+      r && /* @__PURE__ */ o("div", {
+        style: {
+          color: "#E53E3E",
+          fontSize: "12px",
+          marginTop: "2px"
+        },
+        children: r
+      })
+    ]
+  });
+}, 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;
+    });
+  }, []), 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`;
+        continue;
+      }
+      c.validation?.pattern && typeof m == "string" && m && (new RegExp(c.validation.pattern).test(m) || (a[c.name] = c.validation.message ?? "Invalid format"));
+    }
+    return u(a), Object.keys(a).length === 0;
+  }, h = (a) => {
+    a.preventDefault(), p() && (g(!0), t(r));
+  };
+  return l ? /* @__PURE__ */ o("div", {
+    style: {
+      padding: "12px",
+      backgroundColor: "#F0FFF4",
+      borderRadius: "8px",
+      fontSize: "13px",
+      color: "#276749",
+      textAlign: "center"
+    },
+    children: "Submitted successfully"
+  }) : /* @__PURE__ */ d("form", {
+    onSubmit: h,
+    style: {
+      backgroundColor: "#FAFAFA",
+      borderRadius: "10px",
+      padding: "16px",
+      border: "1px solid #E8E8E8"
+    },
+    children: [
+      e.title && /* @__PURE__ */ o("div", {
+        style: {
+          fontWeight: 600,
+          fontSize: "14px",
+          marginBottom: "4px"
+        },
+        children: e.title
+      }),
+      e.description && /* @__PURE__ */ o("div", {
+        style: {
+          fontSize: "12px",
+          color: "#888",
+          marginBottom: "12px"
+        },
+        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", {
+        type: "submit",
+        style: {
+          width: "100%",
+          padding: "10px",
+          backgroundColor: n,
+          color: "#fff",
+          border: "none",
+          borderRadius: "8px",
+          fontSize: "14px",
+          fontWeight: 600,
+          cursor: "pointer",
+          marginTop: "4px"
+        },
+        children: e.submitLabel ?? "Submit"
+      })
+    ]
+  });
+}, K = ({ field: e, value: t, onChange: n, error: r, primaryColor: i }) => {
+  switch (e.type) {
+    case "text":
+    case "email":
+    case "password":
+    case "number":
+    case "tel":
+    case "url":
+    case "textarea":
+    case "date":
+    case "time":
+      return /* @__PURE__ */ o(j, {
+        field: e,
+        value: String(t ?? ""),
+        onChange: n,
+        error: r
+      });
+    case "select":
+    case "multiselect":
+      return /* @__PURE__ */ o($, {
+        field: e,
+        value: t,
+        onChange: n,
+        error: r
+      });
+    case "radio":
+      return /* @__PURE__ */ o(H, {
+        field: e,
+        value: String(t ?? ""),
+        onChange: n,
+        error: r
+      });
+    case "checkbox":
+      return /* @__PURE__ */ o(Q, {
+        field: e,
+        value: t ?? [],
+        onChange: n,
+        error: r
+      });
+    case "file":
+      return /* @__PURE__ */ o(Y, {
+        field: e,
+        value: t,
+        onChange: n,
+        error: r,
+        primaryColor: i
+      });
+    case "hidden":
+      return /* @__PURE__ */ o("input", {
+        type: "hidden",
+        name: e.name,
+        value: String(t ?? "")
+      });
+    default:
+      return null;
+  }
+}, U = ({ config: e, onLogin: t, primaryColor: n }) => /* @__PURE__ */ o("div", {
+  style: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: "20px",
+    overflow: "auto"
+  },
+  children: /* @__PURE__ */ o(I, {
+    config: e,
+    onSubmit: t,
+    primaryColor: n
+  })
+}), 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]
+      })
+    })]
+  });
+}, J = ({ replies: e, onSelect: t, primaryColor: n }) => /* @__PURE__ */ o("div", {
+  style: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px",
+    alignSelf: "flex-start",
+    maxWidth: "90%"
+  },
+  children: e.map((r) => /* @__PURE__ */ o("button", {
+    onClick: () => t(r.value, r.label),
+    style: {
+      padding: "6px 14px",
+      borderRadius: "18px",
+      border: `1px solid ${n}`,
+      backgroundColor: "transparent",
+      color: n,
+      cursor: "pointer",
+      fontSize: "13px",
+      fontWeight: 500,
+      transition: "all 0.15s ease"
+    },
+    onMouseEnter: (i) => {
+      i.currentTarget.style.backgroundColor = n, i.currentTarget.style.color = "#fff";
+    },
+    onMouseLeave: (i) => {
+      i.currentTarget.style.backgroundColor = "transparent", i.currentTarget.style.color = n;
+    },
+    children: r.label
+  }, r.value))
+}), X = ({ color: e }) => {
+  const t = {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: e,
+    opacity: 0.4,
+    animation: "chatbot-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", {
+    style: {
+      display: "flex",
+      gap: "4px",
+      padding: "12px 16px",
+      backgroundColor: "#F1F1F1",
+      borderRadius: "16px 16px 16px 4px",
+      alignSelf: "flex-start",
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ o("span", { style: {
+        ...t,
+        animationDelay: "0s"
+      } }),
+      /* @__PURE__ */ o("span", { style: {
+        ...t,
+        animationDelay: "0.2s"
+      } }),
+      /* @__PURE__ */ o("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,
+    children: [
+      e.map((l) => /* @__PURE__ */ d(R.Fragment, { children: [
+        /* @__PURE__ */ o(V, {
+          message: l,
+          styles: n
+        }),
+        l.quickReplies && l.quickReplies.length > 0 && /* @__PURE__ */ o(J, {
+          replies: l.quickReplies,
+          onSelect: i,
+          primaryColor: r
+        }),
+        l.form && /* @__PURE__ */ o("div", {
+          style: {
+            alignSelf: "flex-start",
+            width: "90%"
+          },
+          children: /* @__PURE__ */ o(I, {
+            config: l.form,
+            onSubmit: (g) => s(l.form.id, g),
+            primaryColor: r
+          })
+        })
+      ] }, l.id)),
+      t && /* @__PURE__ */ o(X, { color: r }),
+      /* @__PURE__ */ o("div", { ref: u })
+    ]
+  });
+}, 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", {
+    style: {
+      display: "flex",
+      gap: "8px",
+      alignItems: "flex-end",
+      ...i
+    },
+    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",
+      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"
+      },
+      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" })
+      })
+    })]
+  });
+}, te = 0, k = () => `msg_${Date.now()}_${++te}`, ne = class {
+  constructor(e) {
+    this.collectedData = {}, this.startStep = e.startStep, this.steps = new Map(e.steps.map((t) => [t.id, t]));
+  }
+  getStartStepId() {
+    return this.startStep;
+  }
+  getStep(e) {
+    return this.steps.get(e);
+  }
+  getData() {
+    return { ...this.collectedData };
+  }
+  setData(e, t) {
+    this.collectedData[e] = t;
+  }
+  mergeData(e) {
+    Object.assign(this.collectedData, e);
+  }
+  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;
+    }
+    if (t && e.quickReplies) {
+      const n = e.quickReplies.find((r) => r.value === t);
+      if (n?.next) return n.next;
+    }
+    return e.next;
+  }
+  buildMessages(e) {
+    const t = [], n = e.messages ?? (e.message ? [e.message] : []);
+    for (const r of n) t.push({
+      id: k(),
+      sender: "bot",
+      text: r,
+      timestamp: Date.now()
+    });
+    return e.quickReplies && t.length > 0 && (t[t.length - 1].quickReplies = e.quickReplies), e.form && t.push({
+      id: k(),
+      sender: "bot",
+      timestamp: Date.now(),
+      form: e.form
+    }), t;
+  }
+  evaluate(e, t, n) {
+    switch (t) {
+      case "eq":
+        return String(e) === String(n);
+      case "neq":
+        return String(e) !== String(n);
+      case "contains":
+        return String(e).includes(String(n));
+      case "gt":
+        return Number(e) > Number(n);
+      case "lt":
+        return Number(e) < Number(n);
+      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) => {
+    t({
+      type: "SET_TYPING",
+      payload: !0
+    }), await v(400);
+    const h = {
+      id: f(),
+      sender: "bot",
+      text: x,
+      timestamp: Date.now(),
+      ...p
+    };
+    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({
+      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
+        }));
+      }
+    }
+  }, [
+    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({
+      type: "SET_STEP",
+      payload: x
+    }), t({
+      type: "SET_TYPING",
+      payload: !0
+    }), await v(h.delay ?? 500);
+    const a = p.buildMessages(h);
+    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();
+  }, [
+    n.flow,
+    e.showWelcome,
+    e.isLoggedIn,
+    g
+  ]), {
+    state: e,
+    sendMessage: u,
+    addBotMessage: s,
+    handleQuickReply: y((x, p) => {
+      if (t({ type: "CLEAR_QUICK_REPLIES" }), t({
+        type: "ADD_MESSAGE",
+        payload: {
+          id: f(),
+          sender: "user",
+          text: p,
+          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({
+            type: "SET_STEP",
+            payload: null
+          }));
+        }
+      }
+    }, [
+      t,
+      n.callbacks,
+      e.currentStepId,
+      l
+    ]),
+    handleFormSubmit: y(async (x, p) => {
+      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(`
+`);
+      if (t({
+        type: "ADD_MESSAGE",
+        payload: {
+          id: f(),
+          sender: "user",
+          text: h,
+          formData: p,
+          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({
+            type: "SET_STEP",
+            payload: null
+          }));
+        }
+      }
+    }, [
+      t,
+      n.callbacks,
+      e.currentStepId,
+      l
+    ]),
+    handleLogin: y(async (x) => {
+      await n.callbacks?.onLogin?.(x), 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({ type: "DISMISS_WELCOME" });
+    }, [t]),
+    startFlow: g,
+    processFlowStep: l
+  };
+}
+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"
+  } : {
+    bottom: "90px",
+    right: "20px"
+  };
+  return /* @__PURE__ */ d("div", {
+    style: {
+      ...e.window,
+      ...a,
+      ...n != null ? { zIndex: n } : {}
+    },
+    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,
+      primaryColor: i.primaryColor
+    }) : !s.isLoggedIn && r.loginForm ? /* @__PURE__ */ o(U, {
+      config: r.loginForm,
+      onLogin: x,
+      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,
+        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, {
+    value: {
+      state: t,
+      dispatch: n,
+      props: e
+    },
+    children: /* @__PURE__ */ d("div", {
+      style: r.root,
+      className: e.className,
+      children: [t.isOpen && /* @__PURE__ */ o(ie, {
+        styles: r,
+        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?.();
+        },
+        isOpen: t.isOpen,
+        position: i,
+        styles: r,
+        icon: e.launcherIcon,
+        closeIcon: e.closeIcon,
+        zIndex: e.zIndex
+      })]
+    })
+  });
+};
+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
+};
+
+//# sourceMappingURL=index.mjs.map