@gauravrathod674/super-customizable-chatbot 0.1.2 → 0.3.0

package/dist/super-customizable-chatbot.es.js

@@ -0,0 +1,752 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as D, useRef as P, useMemo as I, useEffect as S, useCallback as ge } from "react";
+import { AnimatePresence as J, motion as C } from "framer-motion";
+import { FontAwesomeIcon as Te } from "@fortawesome/react-fontawesome";
+import { faCommentDots as $e } from "@fortawesome/free-solid-svg-icons";
+import { GoogleGenerativeAI as Ie } from "@google/generative-ai";
+import De from "openai";
+import Se from "@anthropic-ai/sdk";
+import ze from "groq-sdk";
+import T from "react-markdown";
+const Ee = () => /* @__PURE__ */ d(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    className: "w-full h-full",
+    children: [
+      /* @__PURE__ */ e("path", { d: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M16.5 14C16.5 14 15 15.5 12 15.5C9 15.5 7.5 14 7.5 14",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "10", r: "1", fill: "currentColor" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "10", r: "1", fill: "currentColor" })
+    ]
+  }
+), Le = () => /* @__PURE__ */ d(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    className: "w-full h-full",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M19.21 17.14C19.21 17.14 19 19 12 19C5 19 4.79 17.14 4.79 17.14C4.79 17.14 6.33 15 12 15C17.67 15 19.21 17.14 19.21 17.14Z",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), Re = () => /* @__PURE__ */ d(
+  "svg",
+  {
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className: "w-5 h-5",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.875L6 12z"
+        }
+      ),
+      /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 12h9" })
+    ]
+  }
+), Ae = () => /* @__PURE__ */ d("div", { className: "flex items-center space-x-1 p-3", children: [
+  /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]" }),
+  /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]" }),
+  /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse" })
+] }), Fe = ({ fullText: i, onComplete: l }) => {
+  const c = typeof i == "string" ? i : "", [p, k] = D("");
+  return S(() => {
+    if (c.length === 0) {
+      l == null || l();
+      return;
+    }
+    let r = 0;
+    k("");
+    const y = setInterval(() => {
+      if (r < c.length) {
+        const u = c.charAt(r);
+        k((f) => f + u), r++;
+      } else
+        clearInterval(y), l == null || l();
+    }, 25);
+    return () => clearInterval(y);
+  }, [c, l]), /* @__PURE__ */ e(
+    "div",
+    {
+      className: "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",
+      style: { color: "inherit" },
+      children: /* @__PURE__ */ e(T, { children: p || "" })
+    }
+  );
+}, Oe = ({ text: i, animationType: l }) => {
+  const c = "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5";
+  switch (l) {
+    case "typing":
+      return /* @__PURE__ */ e(Fe, { fullText: i });
+    case "fade-in":
+      return /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 1.5, ease: "easeOut" },
+          children: /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(T, { children: i }) })
+        }
+      );
+    case "slide-up":
+      return /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { y: 50, opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          transition: { duration: 0.7, ease: "anticipate" },
+          children: /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(T, { children: i }) })
+        }
+      );
+    case "zoom-in":
+      return /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { scale: 0.5, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { duration: 1, ease: "backOut" },
+          children: /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(T, { children: i }) })
+        }
+      );
+    case "flip":
+      return /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { rotateX: -90, opacity: 0 },
+          animate: { rotateX: 0, opacity: 1 },
+          transition: { duration: 1, ease: "easeOut" },
+          style: { transformPerspective: 400 },
+          children: /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(T, { children: i }) })
+        }
+      );
+    default:
+      return /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(T, { children: i }) });
+  }
+}, Pe = (i) => {
+  const l = [];
+  if (!i || i.length === 0)
+    return l;
+  let p = i.reduce((r, y) => {
+    const u = r.length > 0 ? r[r.length - 1] : null;
+    if (u && u.sender === y.sender) {
+      const f = {
+        ...u,
+        text: `${u.text}
+${y.text}`
+      };
+      r[r.length - 1] = f;
+    } else
+      r.push({ ...y });
+    return r;
+  }, []).map((r) => ({
+    role: r.sender === "bot" ? "model" : "user",
+    parts: [{ text: r.text }]
+  }));
+  const k = p.findIndex((r) => r.role === "user");
+  if (k > -1)
+    p = p.slice(k);
+  else
+    return [];
+  return p;
+}, Je = ({
+  botName: i = "ChatBot",
+  botAvatar: l = /* @__PURE__ */ e(Ee, {}),
+  userAvatar: c = /* @__PURE__ */ e(Le, {}),
+  welcomeMessage: p = "Hello! How can I help?",
+  placeholderText: k = "Type a message...",
+  customInstruction: r = "",
+  isOpen: y = !1,
+  disabled: u = !1,
+  isTyping: f = !1,
+  onSend: Q = () => {
+  },
+  theme: g = {},
+  geminiApiKey: j,
+  geminiModelName: K = "gemini-1.5-flash",
+  openaiApiKey: W,
+  openaiModelName: ee = "gpt-4o-mini",
+  anthropicApiKey: G,
+  anthropicModelName: te = "claude-3-haiku-20240307",
+  grokApiKey: H,
+  grokModelName: oe = "llama3-8b-8192",
+  messages: re
+}) => {
+  const [N] = D(
+    () => `chatbot-instance-${Math.random().toString(36).substring(2, 9)}`
+  ), [M, R] = D(y), [we, ye] = D(() => p ? [{ id: 1, text: p, sender: "bot" }] : []), [A, se] = D(""), [F, h] = D(!1), z = typeof re < "u", x = z ? re : we, b = z ? () => {
+  } : ye, ne = P(null), ae = P(null), ie = P(null), xe = P(null), q = I(() => {
+    if (!j) return null;
+    try {
+      return new Ie(j).getGenerativeModel({
+        model: K,
+        systemInstruction: r
+      });
+    } catch (t) {
+      return console.error("Failed to initialize Gemini:", t), null;
+    }
+  }, [j, K, r]), U = I(() => W ? new De({ apiKey: W, dangerouslyAllowBrowser: !0 }) : null, [W]), V = I(() => G ? new Se({ apiKey: G, dangerouslyAllowBrowser: !0 }) : null, [G]), Z = I(() => H ? new ze({ apiKey: H, dangerouslyAllowBrowser: !0 }) : null, [H]), o = I(() => {
+    var v;
+    const t = ((v = g == null ? void 0 : g.window) == null ? void 0 : v.placement) === "center", n = {
+      launcher: {
+        backgroundColor: "#4f46e5",
+        iconColor: "#ffffff",
+        size: "3.5rem"
+      },
+      header: {
+        backgroundColor: "#4f46e5",
+        textColor: "#ffffff",
+        fontFamily: "inherit",
+        fontWeight: "600"
+      },
+      messages: {
+        userBackgroundColor: "#4f46e5",
+        userTextColor: "#ffffff",
+        botBackgroundColor: "#f3f4f6",
+        botTextColor: "#1f2937",
+        fontFamily: "inherit",
+        fontSize: "0.9rem",
+        showAvatars: !0,
+        bubbleShape: "rounded",
+        bubblePointer: !0,
+        animation: "fade-in"
+      },
+      input: {
+        backgroundColor: "#ffffff",
+        textColor: "#1f2937",
+        placeholderTextColor: "#9ca3af",
+        borderColor: "#e5e7eb",
+        focusRingColor: "#4f46e5"
+      },
+      window: {
+        backgroundColor: "#ffffff",
+        borderColor: "#e5e7eb",
+        borderRadius: "0.75rem",
+        width: t ? "80vw" : "22rem",
+        height: t ? "80vh" : "30rem",
+        placement: "bottom-right",
+        backdrop: !1,
+        backdropColor: "rgba(0, 0, 0, 0.4)",
+        backdropBlur: "4px",
+        scrollbarThumbColor: "#a1a1aa",
+        // neutral-400
+        scrollbarTrackColor: "#f1f5f9"
+        // slate-100
+      }
+    };
+    return {
+      launcher: { ...n.launcher, ...g.launcher },
+      header: { ...n.header, ...g.header },
+      messages: { ...n.messages, ...g.messages },
+      input: { ...n.input, ...g.input },
+      window: { ...n.window, ...g.window }
+    };
+  }, [g]), ve = I(
+    () => ({
+      // Launcher
+      "--chatbot-launcher-bg": o.launcher.backgroundColor,
+      "--chatbot-launcher-icon-color": o.launcher.iconColor,
+      "--chatbot-launcher-size": o.launcher.size,
+      // Header
+      "--chatbot-header-bg": o.header.backgroundColor,
+      "--chatbot-header-text-color": o.header.textColor,
+      "--chatbot-header-font-family": o.header.fontFamily,
+      "--chatbot-header-font-weight": o.header.fontWeight,
+      // Messages
+      "--chatbot-user-msg-bg": o.messages.userBackgroundColor,
+      "--chatbot-user-msg-text-color": o.messages.userTextColor,
+      "--chatbot-bot-msg-bg": o.messages.botBackgroundColor,
+      "--chatbot-bot-msg-text-color": o.messages.botTextColor,
+      "--chatbot-msg-font-family": o.messages.fontFamily,
+      "--chatbot-msg-font-size": o.messages.fontSize,
+      // Input
+      "--chatbot-input-bg": o.input.backgroundColor,
+      "--chatbot-input-text-color": o.input.textColor,
+      "--chatbot-input-placeholder-color": o.input.placeholderTextColor,
+      "--chatbot-input-border-color": o.input.borderColor,
+      "--chatbot-input-focus-ring": o.input.focusRingColor,
+      // Window
+      "--chatbot-window-bg": o.window.backgroundColor,
+      "--chatbot-window-border-color": o.window.borderColor,
+      "--chatbot-window-border-radius": o.window.borderRadius,
+      "--chatbot-window-width": o.window.width,
+      "--chatbot-window-height": o.window.height
+    }),
+    [o]
+  );
+  S(() => {
+    var E;
+    const t = o.window.scrollbarThumbColor, n = o.window.scrollbarTrackColor, v = `scrollbar-style-${N}`;
+    (E = document.getElementById(v)) == null || E.remove();
+    const $ = document.createElement("style");
+    return $.id = v, $.innerHTML = `
+      /* Modern browsers */
+      #${N} .chatbot-message-list {
+        scrollbar-width: thin;
+        scrollbar-color: ${t} ${n};
+      }
+      /* WebKit-based browsers (Chrome, Safari, Edge) */
+      #${N} .chatbot-message-list::-webkit-scrollbar {
+        width: 8px;
+      }
+      #${N} .chatbot-message-list::-webkit-scrollbar-track {
+        background: ${n};
+        border-radius: 4px;
+      }
+      #${N} .chatbot-message-list::-webkit-scrollbar-thumb {
+        background-color: ${t};
+        border-radius: 4px;
+        border: 2px solid ${n};
+      }
+    `, document.head.appendChild($), () => {
+      var L;
+      (L = document.getElementById(v)) == null || L.remove();
+    };
+  }, [
+    N,
+    o.window.scrollbarThumbColor,
+    o.window.scrollbarTrackColor
+  ]), S(() => {
+    h(f);
+  }, [f]), S(() => {
+    var t;
+    (t = ae.current) == null || t.scrollIntoView({ behavior: "smooth" });
+  }, [x, F, f]), S(() => {
+    var t, n;
+    M ? (t = ne.current) == null || t.focus() : (n = ie.current) == null || n.focus();
+  }, [M]), S(() => {
+    const t = (n) => {
+      n.key === "Escape" && M && R(!1);
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [M]);
+  const X = ge(async () => {
+    var $, E, L, ce, de, ue, he, be, fe, me, pe;
+    const t = A.trim();
+    if (!t || u || F || f) return;
+    const n = {
+      id: Date.now(),
+      text: t,
+      sender: "user"
+    }, v = [...x, n];
+    if (z || b((s) => [...s, n]), Q(t), se(""), q) {
+      h(!0);
+      try {
+        const s = Pe(v), a = s.slice(0, -1), B = ((E = ($ = s[s.length - 1]) == null ? void 0 : $.parts[0]) == null ? void 0 : E.text) || "", Ne = await (await (await q.startChat({ history: a }).sendMessage(B)).response).text() || "(no response)", Me = { id: Date.now() + 1, text: Ne, sender: "bot" };
+        b((Be) => [...Be, Me]);
+      } catch (s) {
+        console.error("Gemini API Error:", s);
+        const a = {
+          id: Date.now() + 1,
+          text: "Sorry, an error occurred. Please try again.",
+          sender: "bot"
+        };
+        b((B) => [...B, a]);
+      } finally {
+        h(!1);
+      }
+    } else if (U) {
+      h(!0);
+      try {
+        const s = r ? [{ role: "system", content: r }] : [], a = x.map((m) => ({
+          role: m.sender === "bot" ? "assistant" : "user",
+          content: m.text
+        })), w = ((ue = (de = (ce = (L = (await U.chat.completions.create({
+          model: ee,
+          messages: [
+            ...s,
+            ...a,
+            { role: "user", content: t }
+          ]
+        })).choices) == null ? void 0 : L[0]) == null ? void 0 : ce.message) == null ? void 0 : de.content) == null ? void 0 : ue.trim()) || "(no response)";
+        b((m) => [
+          ...m,
+          { id: Date.now() + 1, text: w, sender: "bot" }
+        ]);
+      } catch (s) {
+        console.error("OpenAI Error:", s), b((a) => [
+          ...a,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, something went wrong with OpenAI.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        h(!1);
+      }
+    } else if (V) {
+      h(!0);
+      try {
+        const s = x.map((w) => ({
+          role: w.sender === "bot" ? "assistant" : "user",
+          content: w.text
+        })), B = ((be = (he = (await V.messages.create({
+          model: te,
+          system: r,
+          // Pass instruction to the dedicated 'system' parameter
+          messages: [
+            ...s,
+            { role: "user", content: t }
+          ],
+          max_tokens: 1024
+        })).content[0]) == null ? void 0 : he.text) == null ? void 0 : be.trim()) || "(no response)";
+        b((w) => [
+          ...w,
+          { id: Date.now() + 1, text: B, sender: "bot" }
+        ]);
+      } catch (s) {
+        console.error("Anthropic API Error:", s), b((a) => [
+          ...a,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, an error occurred with Claude.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        h(!1);
+      }
+    } else if (Z) {
+      h(!0);
+      try {
+        const s = r ? [{ role: "system", content: r }] : [], a = x.map((m) => ({
+          role: m.sender === "bot" ? "assistant" : "user",
+          content: m.text
+        })), w = ((pe = (me = (fe = (await Z.chat.completions.create({
+          messages: [
+            ...s,
+            ...a,
+            { role: "user", content: t }
+          ],
+          model: oe
+        })).choices[0]) == null ? void 0 : fe.message) == null ? void 0 : me.content) == null ? void 0 : pe.trim()) || "(no response)";
+        b((m) => [
+          ...m,
+          { id: Date.now() + 1, text: w, sender: "bot" }
+        ]);
+      } catch (s) {
+        console.error("Groq API Error:", s), b((a) => [
+          ...a,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, an error occurred with Groq.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        h(!1);
+      }
+    } else z || (h(!0), setTimeout(() => {
+      const s = {
+        id: Date.now() + 1,
+        text: `You said: "${t}"`,
+        sender: "bot"
+      };
+      b((a) => [...a, s]), h(!1);
+    }, 800));
+  }, [
+    A,
+    u,
+    F,
+    f,
+    Q,
+    q,
+    U,
+    V,
+    Z,
+    z,
+    x,
+    b,
+    ee,
+    te,
+    oe,
+    r
+    // Add to dependency array
+  ]), Ce = ge(
+    (t) => {
+      t.key === "Enter" && X();
+    },
+    [X]
+  ), Y = (t) => typeof t == "string" ? /* @__PURE__ */ e(
+    "img",
+    {
+      src: t,
+      alt: "avatar",
+      className: "w-8 h-8 rounded-full object-cover"
+    }
+  ) : /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full text-gray-500", children: t }), _ = F || f, le = {
+    "bottom-right": "bottom-5 right-5",
+    "bottom-left": "bottom-5 left-5",
+    center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+  }, ke = o.window.placement === "center", O = {
+    rounded: "rounded-xl",
+    square: "rounded-md"
+  };
+  return /* @__PURE__ */ d("div", { id: N, style: ve, className: "font-sans", children: [
+    /* @__PURE__ */ e(J, { children: !M && /* @__PURE__ */ e(
+      C.button,
+      {
+        ref: ie,
+        onClick: () => R(!0),
+        "aria-label": "Open Chat",
+        initial: { scale: 0, opacity: 0 },
+        animate: { scale: 1, opacity: 1 },
+        exit: { scale: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: "fixed bottom-10 right-10 z-50 rounded-full shadow-lg flex items-center justify-center cursor-pointer border-2 border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[--chatbot-launcher-bg]",
+        style: {
+          backgroundColor: "var(--chatbot-launcher-bg)",
+          color: "var(--chatbot-launcher-icon-color)",
+          width: "var(--chatbot-launcher-size)",
+          height: "var(--chatbot-launcher-size)"
+        },
+        children: /* @__PURE__ */ e(Te, { icon: $e })
+      }
+    ) }),
+    /* @__PURE__ */ d(J, { children: [
+      M && ke && o.window.backdrop && /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          style: {
+            backgroundColor: o.window.backdropColor,
+            backdropFilter: `blur(${o.window.backdropBlur})`,
+            // For Safari compatibility
+            WebkitBackdropFilter: `blur(${o.window.backdropBlur})`
+          },
+          className: "fixed inset-0 z-40",
+          onClick: () => R(!1)
+        },
+        "chatbot-backdrop"
+      ),
+      M && /* @__PURE__ */ d(
+        "div",
+        {
+          ref: xe,
+          "aria-modal": "true",
+          role: "dialog",
+          className: `fixed ${le[o.window.placement] || le["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,
+          style: {
+            width: "var(--chatbot-window-width)",
+            height: "var(--chatbot-window-height)",
+            borderRadius: "var(--chatbot-window-border-radius)",
+            backgroundColor: "var(--chatbot-window-bg)",
+            borderColor: "var(--chatbot-window-border-color)"
+          },
+          children: [
+            /* @__PURE__ */ d(
+              "header",
+              {
+                className: "flex items-center justify-between p-3 flex-shrink-0",
+                style: {
+                  background: "var(--chatbot-header-bg)",
+                  color: "var(--chatbot-header-text-color)"
+                },
+                children: [
+                  /* @__PURE__ */ d("div", { className: "flex items-center space-x-3", children: [
+                    /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1", children: Y(l) }),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: "var(--chatbot-header-font-family)",
+                          fontWeight: "var(--chatbot-header-font-weight)"
+                        },
+                        className: "text-lg",
+                        children: i
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => R(!1),
+                      "aria-label": "Close Chat",
+                      className: "p-1 rounded-full hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white",
+                      children: /* @__PURE__ */ e(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          strokeWidth: 2,
+                          stroke: "currentColor",
+                          className: "w-6 h-6",
+                          children: /* @__PURE__ */ e(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M6 18L18 6M6 6l12 12"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ d(
+              "div",
+              {
+                role: "log",
+                "aria-live": "polite",
+                className: "chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",
+                children: [
+                  /* @__PURE__ */ e(J, { initial: !1, children: x.map((t, n) => /* @__PURE__ */ d(
+                    C.div,
+                    {
+                      layout: !0,
+                      initial: { opacity: 0, y: 20 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: -10 },
+                      transition: { duration: 0.3, ease: "easeOut" },
+                      className: `flex items-end max-w-[85%] gap-2 ${t.sender === "user" ? "ml-auto flex-row-reverse" : "mr-auto"}`,
+                      children: [
+                        o.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: Y(
+                          t.sender === "user" ? c : l
+                        ) }),
+                        /* @__PURE__ */ e(
+                          C.div,
+                          {
+                            layout: "position",
+                            transition: { duration: 0.2, ease: "easeOut" },
+                            className: `px-3 py-2 ${O[o.messages.bubbleShape] || O.rounded} ${o.messages.bubblePointer ? t.sender === "user" ? "rounded-br-none" : "rounded-bl-none" : ""}`,
+                            style: {
+                              backgroundColor: t.sender === "user" ? "var(--chatbot-user-msg-bg)" : "var(--chatbot-bot-msg-bg)",
+                              color: t.sender === "user" ? "var(--chatbot-user-msg-text-color)" : "var(--chatbot-bot-msg-text-color)",
+                              fontFamily: "var(--chatbot-msg-font-family)",
+                              fontSize: "var(--chatbot-msg-font-size)"
+                            },
+                            children: t.sender === "bot" && n === x.length - 1 ? /* @__PURE__ */ e(
+                              Oe,
+                              {
+                                text: t.text,
+                                animationType: o.messages.animation
+                              }
+                            ) : /* @__PURE__ */ e(
+                              "div",
+                              {
+                                className: "prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",
+                                style: { color: "inherit" },
+                                children: /* @__PURE__ */ e(T, { children: t.text })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    t.id
+                  )) }),
+                  _ && /* @__PURE__ */ d(
+                    "div",
+                    {
+                      className: "flex items-end max-w-[85%] gap-2 mr-auto",
+                      children: [
+                        " ",
+                        o.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: Y(l) }),
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            className: `px-3 py-2 ${O[o.messages.bubbleShape] || O.rounded} rounded-bl-none`,
+                            style: { backgroundColor: "var(--chatbot-bot-msg-bg)" },
+                            children: /* @__PURE__ */ e(Ae, {})
+                          }
+                        )
+                      ]
+                    },
+                    "typing-indicator"
+                  ),
+                  /* @__PURE__ */ e("div", { ref: ae })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              "footer",
+              {
+                className: "p-3 border-t flex-shrink-0",
+                style: {
+                  borderColor: "var(--chatbot-window-border-color)",
+                  backgroundColor: "var(--chatbot-input-bg)"
+                },
+                children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: ne,
+                      type: "text",
+                      value: A,
+                      onChange: (t) => se(t.target.value),
+                      onKeyPress: Ce,
+                      placeholder: k,
+                      disabled: u || _,
+                      "aria-label": "Chat input",
+                      className: "flex-1 w-full px-4 py-2 bg-transparent rounded-full border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",
+                      style: {
+                        color: "var(--chatbot-input-text-color)",
+                        borderColor: "var(--chatbot-input-border-color)",
+                        "--tw-ring-color": "var(--chatbot-input-focus-ring)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: X,
+                      disabled: !A.trim() || u || _,
+                      "aria-label": "Send Message",
+                      className: "px-4 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+                      style: {
+                        backgroundColor: "var(--chatbot-user-msg-bg)",
+                        color: "var(--chatbot-user-msg-text-color)",
+                        "--tw-ring-color": "var(--chatbot-user-msg-bg)"
+                      },
+                      children: /* @__PURE__ */ e(Re, {})
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        },
+        "chatbot-window"
+      )
+    ] })
+  ] });
+};
+export {
+  Je as ChatBot
+};