@gauravrathod674/super-customizable-chatbot 0.1.2 → 0.3.1

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

@@ -0,0 +1,776 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useState as S, useRef as j, useMemo as M, useEffect as D, useCallback as we } from "react";
+import { AnimatePresence as Q, motion as C } from "framer-motion";
+import { FontAwesomeIcon as $e } from "@fortawesome/react-fontawesome";
+import { faCommentDots as Ie } from "@fortawesome/free-solid-svg-icons";
+import { GoogleGenerativeAI as Se } from "@google/generative-ai";
+import De from "openai";
+import ze from "@anthropic-ai/sdk";
+import Ee from "groq-sdk";
+import T from "react-markdown";
+const Le = () => /* @__PURE__ */ u(
+  "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" })
+    ]
+  }
+), Re = () => /* @__PURE__ */ u(
+  "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"
+        }
+      )
+    ]
+  }
+), Ae = () => /* @__PURE__ */ u(
+  "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" })
+    ]
+  }
+), Fe = () => /* @__PURE__ */ u("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" })
+] }), Oe = ({ fullText: c, onComplete: d, components: b }) => {
+  const a = typeof c == "string" ? c : "", [$, r] = S("");
+  return D(() => {
+    if (a.length === 0) {
+      d == null || d();
+      return;
+    }
+    let w = 0;
+    r("");
+    const h = setInterval(() => {
+      if (w < a.length) {
+        const g = a.charAt(w);
+        r((R) => R + g), w++;
+      } else
+        clearInterval(h), d == null || d();
+    }, 25);
+    return () => clearInterval(h);
+  }, [a, d]), /* @__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, { components: b, children: $ || "" })
+    }
+  );
+}, Pe = ({ text: c, animationType: d, components: b }) => {
+  const a = "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 (d) {
+    case "typing":
+      return /* @__PURE__ */ e(Oe, { fullText: c, components: b });
+    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: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
+        }
+      );
+    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: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
+        }
+      );
+    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: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
+        }
+      );
+    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: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) })
+        }
+      );
+    default:
+      return /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) });
+  }
+}, je = (c) => {
+  const d = [];
+  if (!c || c.length === 0)
+    return d;
+  let a = c.reduce((r, w) => {
+    const h = r.length > 0 ? r[r.length - 1] : null;
+    if (h && h.sender === w.sender) {
+      const g = {
+        ...h,
+        text: `${h.text}
+${w.text}`
+      };
+      r[r.length - 1] = g;
+    } else
+      r.push({ ...w });
+    return r;
+  }, []).map((r) => ({
+    role: r.sender === "bot" ? "model" : "user",
+    parts: [{ text: r.text }]
+  }));
+  const $ = a.findIndex((r) => r.role === "user");
+  if ($ > -1)
+    a = a.slice($);
+  else
+    return [];
+  return a;
+}, Qe = ({
+  botName: c = "ChatBot",
+  botAvatar: d = /* @__PURE__ */ e(Le, {}),
+  userAvatar: b = /* @__PURE__ */ e(Re, {}),
+  welcomeMessage: a = "Hello! How can I help?",
+  placeholderText: $ = "Type a message...",
+  customInstruction: r = "",
+  isOpen: w = !1,
+  disabled: h = !1,
+  isTyping: g = !1,
+  onSend: R = () => {
+  },
+  theme: y = {},
+  geminiApiKey: W,
+  geminiModelName: K = "gemini-1.5-flash",
+  openaiApiKey: G,
+  openaiModelName: ee = "gpt-4o-mini",
+  anthropicApiKey: H,
+  anthropicModelName: oe = "claude-3-haiku-20240307",
+  grokApiKey: q,
+  grokModelName: te = "llama3-8b-8192",
+  messages: re
+}) => {
+  const [k] = S(
+    () => `chatbot-instance-${Math.random().toString(36).substring(2, 9)}`
+  ), [N, A] = S(w), [ye, xe] = S(() => a ? [{ id: 1, text: a, sender: "bot" }] : []), [F, se] = S(""), [O, f] = S(!1), z = typeof re < "u", v = z ? re : ye, m = z ? () => {
+  } : xe, ne = j(null), ae = j(null), le = j(null), ve = j(null), U = M(() => {
+    if (!W) return null;
+    try {
+      return new Se(W).getGenerativeModel({
+        model: K,
+        systemInstruction: r
+      });
+    } catch (o) {
+      return console.error("Failed to initialize Gemini:", o), null;
+    }
+  }, [W, K, r]), V = M(() => G ? new De({ apiKey: G, dangerouslyAllowBrowser: !0 }) : null, [G]), Z = M(() => H ? new ze({
+    apiKey: H,
+    dangerouslyAllowBrowser: !0
+  }) : null, [H]), X = M(() => q ? new Ee({ apiKey: q, dangerouslyAllowBrowser: !0 }) : null, [q]), t = M(() => {
+    var l;
+    const o = ((l = y == null ? void 0 : y.window) == null ? void 0 : l.placement) === "center", s = {
+      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",
+        markdownStyles: {}
+      },
+      input: {
+        backgroundColor: "#ffffff",
+        textColor: "#1f2937",
+        placeholderTextColor: "#9ca3af",
+        borderColor: "#e5e7eb",
+        focusRingColor: "#4f46e5"
+      },
+      window: {
+        backgroundColor: "#ffffff",
+        borderColor: "#e5e7eb",
+        borderRadius: "0.75rem",
+        width: o ? "80vw" : "22rem",
+        height: o ? "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: { ...s.launcher, ...y.launcher },
+      header: { ...s.header, ...y.header },
+      messages: { ...s.messages, ...y.messages },
+      input: { ...s.input, ...y.input },
+      window: { ...s.window, ...y.window }
+    };
+  }, [y]), Ce = M(
+    () => ({
+      // Launcher
+      "--chatbot-launcher-bg": t.launcher.backgroundColor,
+      "--chatbot-launcher-icon-color": t.launcher.iconColor,
+      "--chatbot-launcher-size": t.launcher.size,
+      // Header
+      "--chatbot-header-bg": t.header.backgroundColor,
+      "--chatbot-header-text-color": t.header.textColor,
+      "--chatbot-header-font-family": t.header.fontFamily,
+      "--chatbot-header-font-weight": t.header.fontWeight,
+      // Messages
+      "--chatbot-user-msg-bg": t.messages.userBackgroundColor,
+      "--chatbot-user-msg-text-color": t.messages.userTextColor,
+      "--chatbot-bot-msg-bg": t.messages.botBackgroundColor,
+      "--chatbot-bot-msg-text-color": t.messages.botTextColor,
+      "--chatbot-msg-font-family": t.messages.fontFamily,
+      "--chatbot-msg-font-size": t.messages.fontSize,
+      // Input
+      "--chatbot-input-bg": t.input.backgroundColor,
+      "--chatbot-input-text-color": t.input.textColor,
+      "--chatbot-input-placeholder-color": t.input.placeholderTextColor,
+      "--chatbot-input-border-color": t.input.borderColor,
+      "--chatbot-input-focus-ring": t.input.focusRingColor,
+      // Window
+      "--chatbot-window-bg": t.window.backgroundColor,
+      "--chatbot-window-border-color": t.window.borderColor,
+      "--chatbot-window-border-radius": t.window.borderRadius,
+      "--chatbot-window-width": t.window.width,
+      "--chatbot-window-height": t.window.height
+    }),
+    [t]
+  ), ie = M(() => {
+    const o = t.messages.markdownStyles || {};
+    return {
+      strong: ({ node: s, ...l }) => /* @__PURE__ */ e("strong", { style: { color: o.boldColor || "inherit" }, ...l }),
+      em: ({ node: s, ...l }) => /* @__PURE__ */ e("em", { style: { color: o.italicColor || "inherit" }, ...l }),
+      a: ({ node: s, ...l }) => /* @__PURE__ */ e("a", { style: { color: o.linkColor || "#3b82f6" }, ...l }),
+      code: ({ node: s, ...l }) => /* @__PURE__ */ e(
+        "code",
+        {
+          style: {
+            color: o.codeColor || "inherit",
+            backgroundColor: o.codeBackgroundColor || "rgba(0, 0, 0, 0.1)",
+            padding: "0.1rem 0.3rem",
+            borderRadius: "0.25rem"
+          },
+          ...l
+        }
+      )
+    };
+  }, [t.messages.markdownStyles]);
+  D(() => {
+    var E;
+    const o = t.window.scrollbarThumbColor, s = t.window.scrollbarTrackColor, l = `scrollbar-style-${k}`;
+    (E = document.getElementById(l)) == null || E.remove();
+    const I = document.createElement("style");
+    return I.id = l, I.innerHTML = `
+      /* Modern browsers */
+      #${k} .chatbot-message-list {
+        scrollbar-width: thin;
+        scrollbar-color: ${o} ${s};
+      }
+      /* WebKit-based browsers (Chrome, Safari, Edge) */
+      #${k} .chatbot-message-list::-webkit-scrollbar {
+        width: 8px;
+      }
+      #${k} .chatbot-message-list::-webkit-scrollbar-track {
+        background: ${s};
+        border-radius: 4px;
+      }
+      #${k} .chatbot-message-list::-webkit-scrollbar-thumb {
+        background-color: ${o};
+        border-radius: 4px;
+        border: 2px solid ${s};
+      }
+    `, document.head.appendChild(I), () => {
+      var L;
+      (L = document.getElementById(l)) == null || L.remove();
+    };
+  }, [
+    k,
+    t.window.scrollbarThumbColor,
+    t.window.scrollbarTrackColor
+  ]), D(() => {
+    f(g);
+  }, [g]), D(() => {
+    var o;
+    (o = ae.current) == null || o.scrollIntoView({ behavior: "smooth" });
+  }, [v, O, g]), D(() => {
+    var o, s;
+    N ? (o = ne.current) == null || o.focus() : (s = le.current) == null || s.focus();
+  }, [N]), D(() => {
+    const o = (s) => {
+      s.key === "Escape" && N && A(!1);
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [N]);
+  const Y = we(async () => {
+    var I, E, L, de, ue, he, be, fe, me, ge, pe;
+    const o = F.trim();
+    if (!o || h || O || g) return;
+    const s = {
+      id: Date.now(),
+      text: o,
+      sender: "user"
+    }, l = [...v, s];
+    if (z || m((n) => [...n, s]), R(o), se(""), U) {
+      f(!0);
+      try {
+        const n = je(l), i = n.slice(0, -1), B = ((E = (I = n[n.length - 1]) == null ? void 0 : I.parts[0]) == null ? void 0 : E.text) || "", Be = await (await (await U.startChat({ history: i }).sendMessage(B)).response).text() || "(no response)", Me = { id: Date.now() + 1, text: Be, sender: "bot" };
+        m((Te) => [...Te, Me]);
+      } catch (n) {
+        console.error("Gemini API Error:", n);
+        const i = {
+          id: Date.now() + 1,
+          text: "Sorry, an error occurred. Please try again.",
+          sender: "bot"
+        };
+        m((B) => [...B, i]);
+      } finally {
+        f(!1);
+      }
+    } else if (V) {
+      f(!0);
+      try {
+        const n = r ? [{ role: "system", content: r }] : [], i = v.map((p) => ({
+          role: p.sender === "bot" ? "assistant" : "user",
+          content: p.text
+        })), x = ((he = (ue = (de = (L = (await V.chat.completions.create({
+          model: ee,
+          messages: [
+            ...n,
+            ...i,
+            { role: "user", content: o }
+          ]
+        })).choices) == null ? void 0 : L[0]) == null ? void 0 : de.message) == null ? void 0 : ue.content) == null ? void 0 : he.trim()) || "(no response)";
+        m((p) => [
+          ...p,
+          { id: Date.now() + 1, text: x, sender: "bot" }
+        ]);
+      } catch (n) {
+        console.error("OpenAI Error:", n), m((i) => [
+          ...i,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, something went wrong with OpenAI.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        f(!1);
+      }
+    } else if (Z) {
+      f(!0);
+      try {
+        const n = v.map((x) => ({
+          role: x.sender === "bot" ? "assistant" : "user",
+          content: x.text
+        })), B = ((fe = (be = (await Z.messages.create({
+          model: oe,
+          system: r,
+          // Pass instruction to the dedicated 'system' parameter
+          messages: [
+            ...n,
+            { role: "user", content: o }
+          ],
+          max_tokens: 1024
+        })).content[0]) == null ? void 0 : be.text) == null ? void 0 : fe.trim()) || "(no response)";
+        m((x) => [
+          ...x,
+          { id: Date.now() + 1, text: B, sender: "bot" }
+        ]);
+      } catch (n) {
+        console.error("Anthropic API Error:", n), m((i) => [
+          ...i,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, an error occurred with Claude.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        f(!1);
+      }
+    } else if (X) {
+      f(!0);
+      try {
+        const n = r ? [{ role: "system", content: r }] : [], i = v.map((p) => ({
+          role: p.sender === "bot" ? "assistant" : "user",
+          content: p.text
+        })), x = ((pe = (ge = (me = (await X.chat.completions.create({
+          messages: [
+            ...n,
+            ...i,
+            { role: "user", content: o }
+          ],
+          model: te
+        })).choices[0]) == null ? void 0 : me.message) == null ? void 0 : ge.content) == null ? void 0 : pe.trim()) || "(no response)";
+        m((p) => [
+          ...p,
+          { id: Date.now() + 1, text: x, sender: "bot" }
+        ]);
+      } catch (n) {
+        console.error("Groq API Error:", n), m((i) => [
+          ...i,
+          {
+            id: Date.now() + 1,
+            text: "Sorry, an error occurred with Groq.",
+            sender: "bot"
+          }
+        ]);
+      } finally {
+        f(!1);
+      }
+    } else z || (f(!0), setTimeout(() => {
+      const n = {
+        id: Date.now() + 1,
+        text: `You said: "${o}"`,
+        sender: "bot"
+      };
+      m((i) => [...i, n]), f(!1);
+    }, 800));
+  }, [
+    F,
+    h,
+    O,
+    g,
+    R,
+    U,
+    V,
+    Z,
+    X,
+    z,
+    v,
+    m,
+    ee,
+    oe,
+    te,
+    r
+    // Add to dependency array
+  ]), ke = we(
+    (o) => {
+      o.key === "Enter" && Y();
+    },
+    [Y]
+  ), _ = (o) => typeof o == "string" ? /* @__PURE__ */ e(
+    "img",
+    {
+      src: o,
+      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: o }), J = O || g, ce = {
+    "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"
+  }, Ne = t.window.placement === "center", P = {
+    rounded: "rounded-xl",
+    square: "rounded-md"
+  };
+  return /* @__PURE__ */ u("div", { id: k, style: Ce, className: "font-sans", children: [
+    /* @__PURE__ */ e(Q, { children: !N && /* @__PURE__ */ e(
+      C.button,
+      {
+        ref: le,
+        onClick: () => A(!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($e, { icon: Ie })
+      }
+    ) }),
+    /* @__PURE__ */ u(Q, { children: [
+      N && Ne && t.window.backdrop && /* @__PURE__ */ e(
+        C.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          style: {
+            backgroundColor: t.window.backdropColor,
+            backdropFilter: `blur(${t.window.backdropBlur})`,
+            // For Safari compatibility
+            WebkitBackdropFilter: `blur(${t.window.backdropBlur})`
+          },
+          className: "fixed inset-0 z-40",
+          onClick: () => A(!1)
+        },
+        "chatbot-backdrop"
+      ),
+      N && /* @__PURE__ */ u(
+        "div",
+        {
+          ref: ve,
+          "aria-modal": "true",
+          role: "dialog",
+          className: `fixed ${ce[t.window.placement] || ce["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__ */ u(
+              "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__ */ u("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: _(d) }),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: "var(--chatbot-header-font-family)",
+                          fontWeight: "var(--chatbot-header-font-weight)"
+                        },
+                        className: "text-lg",
+                        children: c
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => A(!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__ */ u(
+              "div",
+              {
+                role: "log",
+                "aria-live": "polite",
+                className: "chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",
+                children: [
+                  /* @__PURE__ */ e(Q, { initial: !1, children: v.map((o, s) => /* @__PURE__ */ u(
+                    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 ${o.sender === "user" ? "ml-auto flex-row-reverse" : "mr-auto"}`,
+                      children: [
+                        t.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: _(
+                          o.sender === "user" ? b : d
+                        ) }),
+                        /* @__PURE__ */ e(
+                          C.div,
+                          {
+                            layout: "position",
+                            transition: { duration: 0.2, ease: "easeOut" },
+                            className: `px-3 py-2 ${P[t.messages.bubbleShape] || P.rounded} ${t.messages.bubblePointer ? o.sender === "user" ? "rounded-br-none" : "rounded-bl-none" : ""}`,
+                            style: {
+                              backgroundColor: o.sender === "user" ? "var(--chatbot-user-msg-bg)" : "var(--chatbot-bot-msg-bg)",
+                              color: o.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: o.sender === "bot" && s === v.length - 1 ? /* @__PURE__ */ e(
+                              Pe,
+                              {
+                                text: o.text,
+                                animationType: t.messages.animation,
+                                components: ie
+                              }
+                            ) : /* @__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, { components: ie, children: o.text })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    o.id
+                  )) }),
+                  J && /* @__PURE__ */ u(
+                    "div",
+                    {
+                      className: "flex items-end max-w-[85%] gap-2 mr-auto",
+                      children: [
+                        " ",
+                        t.messages.showAvatars && /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: _(d) }),
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            className: `px-3 py-2 ${P[t.messages.bubbleShape] || P.rounded} rounded-bl-none`,
+                            style: { backgroundColor: "var(--chatbot-bot-msg-bg)" },
+                            children: /* @__PURE__ */ e(Fe, {})
+                          }
+                        )
+                      ]
+                    },
+                    "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__ */ u("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: ne,
+                      type: "text",
+                      value: F,
+                      onChange: (o) => se(o.target.value),
+                      onKeyPress: ke,
+                      placeholder: $,
+                      disabled: h || J,
+                      "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: Y,
+                      disabled: !F.trim() || h || J,
+                      "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(Ae, {})
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        },
+        "chatbot-window"
+      )
+    ] })
+  ] });
+};
+export {
+  Qe as ChatBot
+};