@gauravrathod674/super-customizable-chatbot 0.4.0 → 0.5.0

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

@@ -1,14 +1,17 @@
-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(
+import { jsx as t, jsxs as u, Fragment as He } from "react/jsx-runtime";
+import { useState as R, useRef as j, useMemo as S, useEffect as $, useCallback as Te } from "react";
+import { AnimatePresence as V, motion as x } from "framer-motion";
+import { FontAwesomeIcon as B } from "@fortawesome/react-fontawesome";
+import { faCommentDots as Ge, faFileAlt as Ie, faPaperclip as qe, faMicrophoneSlash as Ve, faMicrophone as _e, faTimes as Ye } from "@fortawesome/free-solid-svg-icons";
+import { GoogleGenerativeAI as Ze } from "@google/generative-ai";
+import Xe from "openai";
+import Je from "@anthropic-ai/sdk";
+import Ke from "groq-sdk";
+import F from "react-markdown";
+const se = (n) => new Promise((c, h) => {
+  const a = new FileReader();
+  a.readAsDataURL(n), a.onload = () => c(a.result.split(",")[1]), a.onerror = (g) => h(g);
+}), Qe = () => /* @__PURE__ */ u(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -17,19 +20,19 @@ const Le = () => /* @__PURE__ */ u(
     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(
+      /* @__PURE__ */ t("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__ */ t(
         "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" })
+      /* @__PURE__ */ t("circle", { cx: "9", cy: "10", r: "1", fill: "currentColor" }),
+      /* @__PURE__ */ t("circle", { cx: "15", cy: "10", r: "1", fill: "currentColor" })
     ]
   }
-), Re = () => /* @__PURE__ */ u(
+), et = () => /* @__PURE__ */ u(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -38,14 +41,14 @@ const Le = () => /* @__PURE__ */ u(
     strokeWidth: "1.5",
     className: "w-full h-full",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         "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(
+      /* @__PURE__ */ t(
         "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",
@@ -54,7 +57,7 @@ const Le = () => /* @__PURE__ */ u(
       )
     ]
   }
-), Ae = () => /* @__PURE__ */ u(
+), tt = () => /* @__PURE__ */ u(
   "svg",
   {
     fill: "none",
@@ -63,7 +66,7 @@ const Le = () => /* @__PURE__ */ u(
     stroke: "currentColor",
     className: "w-5 h-5",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         "path",
         {
           strokeLinecap: "round",
@@ -71,155 +74,195 @@ const Le = () => /* @__PURE__ */ u(
           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" })
+      /* @__PURE__ */ t("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(() => {
+), ot = () => /* @__PURE__ */ u("div", { className: "flex items-center space-x-1 p-3", children: [
+  /* @__PURE__ */ t("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]" }),
+  /* @__PURE__ */ t("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]" }),
+  /* @__PURE__ */ t("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse" })
+] }), rt = ({ file: n, onRemove: c }) => {
+  const [h, a] = R(null);
+  return $(() => {
+    if (n && n.type.startsWith("image/")) {
+      const g = URL.createObjectURL(n);
+      return a(g), () => URL.revokeObjectURL(g);
+    }
+    a(null);
+  }, [n]), n ? /* @__PURE__ */ u("div", { className: "relative inline-flex items-center gap-2 p-2 mb-2 bg-[--chatbot-bot-msg-bg] rounded-lg border border-[--chatbot-input-border-color] max-w-xs", children: [
+    /* @__PURE__ */ t("div", { className: "flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/20 rounded-md", children: h ? /* @__PURE__ */ t(
+      "img",
+      {
+        src: h,
+        alt: n.name,
+        className: "w-full h-full object-cover rounded-md"
+      }
+    ) : /* @__PURE__ */ t(B, { icon: Ie, className: "w-5 h-5 text-white/70" }) }),
+    /* @__PURE__ */ t("div", { className: "flex-1 min-w-0 pr-6", children: /* @__PURE__ */ t(
+      "p",
+      {
+        className: "text-sm font-medium text-[--chatbot-input-text-color] truncate",
+        title: n.name,
+        children: n.name
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: c,
+        "aria-label": "Remove file",
+        className: "absolute top-1 right-1 w-2 h-2 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors",
+        children: /* @__PURE__ */ t(B, { icon: Ye, className: "w-3 h-3" })
+      }
+    )
+  ] }) : null;
+}, nt = ({ fullText: n, onComplete: c, components: h }) => {
+  const a = typeof n == "string" ? n : "", [g, l] = R("");
+  return $(() => {
     if (a.length === 0) {
-      d == null || d();
+      c == null || c();
       return;
     }
-    let w = 0;
-    r("");
-    const h = setInterval(() => {
-      if (w < a.length) {
-        const g = a.charAt(w);
-        r((R) => R + g), w++;
+    let C = 0;
+    l("");
+    const m = setInterval(() => {
+      if (C < a.length) {
+        const v = a.charAt(C);
+        l((O) => O + v), C++;
       } else
-        clearInterval(h), d == null || d();
+        clearInterval(m), c == null || c();
     }, 25);
-    return () => clearInterval(h);
-  }, [a, d]), /* @__PURE__ */ e(
+    return () => clearInterval(m);
+  }, [a, c]), /* @__PURE__ */ t(
     "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: $ || "" })
+      children: /* @__PURE__ */ t(F, { components: h, children: g || "" })
     }
   );
-}, Pe = ({ text: c, animationType: d, components: b }) => {
+}, at = ({ text: n, animationType: c, components: h }) => {
   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) {
+  switch (c) {
     case "typing":
-      return /* @__PURE__ */ e(Oe, { fullText: c, components: b });
+      return /* @__PURE__ */ t(nt, { fullText: n, components: h });
     case "fade-in":
-      return /* @__PURE__ */ e(
-        C.div,
+      return /* @__PURE__ */ t(
+        x.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 }) })
+          children: /* @__PURE__ */ t("div", { className: a, children: /* @__PURE__ */ t(F, { components: h, children: n }) })
         }
       );
     case "slide-up":
-      return /* @__PURE__ */ e(
-        C.div,
+      return /* @__PURE__ */ t(
+        x.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 }) })
+          children: /* @__PURE__ */ t("div", { className: a, children: /* @__PURE__ */ t(F, { components: h, children: n }) })
         }
       );
     case "zoom-in":
-      return /* @__PURE__ */ e(
-        C.div,
+      return /* @__PURE__ */ t(
+        x.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 }) })
+          children: /* @__PURE__ */ t("div", { className: a, children: /* @__PURE__ */ t(F, { components: h, children: n }) })
         }
       );
     case "flip":
-      return /* @__PURE__ */ e(
-        C.div,
+      return /* @__PURE__ */ t(
+        x.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 }) })
+          children: /* @__PURE__ */ t("div", { className: a, children: /* @__PURE__ */ t(F, { components: h, children: n }) })
         }
       );
     default:
-      return /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e(T, { components: b, children: c }) });
+      return /* @__PURE__ */ t("div", { className: a, children: /* @__PURE__ */ t(F, { components: h, children: n }) });
   }
-}, 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}`
+}, st = (n) => {
+  const c = [];
+  if (!n || n.length === 0)
+    return c;
+  let a = n.reduce((l, C) => {
+    const m = l.length > 0 ? l[l.length - 1] : null;
+    if (m && m.sender === C.sender) {
+      const v = {
+        ...m,
+        text: `${m.text}
+${C.text}`
       };
-      r[r.length - 1] = g;
+      l[l.length - 1] = v;
     } else
-      r.push({ ...w });
-    return r;
-  }, []).map((r) => ({
-    role: r.sender === "bot" ? "model" : "user",
-    parts: [{ text: r.text }]
+      l.push({ ...C });
+    return l;
+  }, []).map((l) => ({
+    role: l.sender === "bot" ? "model" : "user",
+    parts: [{ text: l.text }]
   }));
-  const $ = a.findIndex((r) => r.role === "user");
-  if ($ > -1)
-    a = a.slice($);
+  const g = a.findIndex((l) => l.role === "user");
+  if (g > -1)
+    a = a.slice(g);
   else
     return [];
   return a;
-}, Qe = ({
-  botName: c = "ChatBot",
-  botAvatar: d = /* @__PURE__ */ e(Le, {}),
-  userAvatar: b = /* @__PURE__ */ e(Re, {}),
+}, gt = ({
+  botName: n = "ChatBot",
+  botAvatar: c = /* @__PURE__ */ t(Qe, {}),
+  userAvatar: h = /* @__PURE__ */ t(et, {}),
   welcomeMessage: a = "Hello! How can I help?",
-  placeholderText: $ = "Type a message...",
-  customInstruction: r = "",
-  isOpen: w = !1,
-  disabled: h = !1,
-  isTyping: g = !1,
-  onSend: R = () => {
+  placeholderText: g = "Type a message...",
+  customInstruction: l = "",
+  isOpen: C = !1,
+  disabled: m = !1,
+  isTyping: v = !1,
+  onSend: O = () => {
   },
-  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
+  theme: k = {},
+  geminiApiKey: _,
+  geminiModelName: ie = "gemini-1.5-flash",
+  openaiApiKey: Y,
+  openaiModelName: le = "gpt-4o-mini",
+  anthropicApiKey: Z,
+  anthropicModelName: ce = "claude-3-haiku-20240307",
+  grokApiKey: X,
+  grokModelName: de = "llama3-8b-8192",
+  messages: ue,
+  googleSTTCredentialsPath: Se,
+  enableFileUpload: Be = !1,
+  fileUploadAccept: Fe = "*",
+  onFileUpload: Le = () => {
+  }
 }) => {
-  const [k] = S(
+  const [w] = R(
     () => `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;
+  ), [I, P] = R(C), [Me, je] = R(() => a ? [{ id: 1, text: a, sender: "bot" }] : []), [L, U] = R(""), [D, W] = R(!1), [J, he] = R(!1), [f, E] = R(null), H = typeof ue < "u", T = H ? ue : Me, K = H ? () => {
+  } : je, Q = j(null), be = j(null), me = j(null), ze = j(null), fe = j(null), z = j(null), ee = S(() => {
+    if (!_) return null;
     try {
-      return new Se(W).getGenerativeModel({
-        model: K,
-        systemInstruction: r
+      return new Ze(_).getGenerativeModel({
+        model: ie,
+        systemInstruction: l
       });
-    } catch (o) {
-      return console.error("Failed to initialize Gemini:", o), null;
+    } catch (e) {
+      return console.error("Failed to initialize Gemini:", e), null;
     }
-  }, [W, K, r]), V = M(() => G ? new De({ apiKey: G, dangerouslyAllowBrowser: !0 }) : null, [G]), Z = M(() => H ? new ze({
-    apiKey: H,
+  }, [_, ie, l]), te = S(() => Y ? new Xe({ apiKey: Y, dangerouslyAllowBrowser: !0 }) : null, [Y]), oe = S(() => Z ? new Je({
+    apiKey: Z,
     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 = {
+  }) : null, [Z]), re = S(() => X ? new Ke({ apiKey: X, dangerouslyAllowBrowser: !0 }) : null, [X]), o = S(() => {
+    var s;
+    const e = ((s = k == null ? void 0 : k.window) == null ? void 0 : s.placement) === "center", r = {
       launcher: {
         backgroundColor: "#4f46e5",
         iconColor: "#ffffff",
@@ -255,8 +298,8 @@ ${w.text}`
         backgroundColor: "#ffffff",
         borderColor: "#e5e7eb",
         borderRadius: "0.75rem",
-        width: o ? "80vw" : "22rem",
-        height: o ? "80vh" : "30rem",
+        width: e ? "80vw" : "22rem",
+        height: e ? "80vh" : "30rem",
         placement: "bottom-right",
         backdrop: !1,
         backdropColor: "rgba(0, 0, 0, 0.4)",
@@ -268,279 +311,310 @@ ${w.text}`
       }
     };
     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 }
+      launcher: { ...r.launcher, ...k.launcher },
+      header: { ...r.header, ...k.header },
+      messages: { ...r.messages, ...k.messages },
+      input: { ...r.input, ...k.input },
+      window: { ...r.window, ...k.window }
     };
-  }, [y]), Ce = M(
+  }, [k]), Ae = S(
     () => ({
       // Launcher
-      "--chatbot-launcher-bg": t.launcher.backgroundColor,
-      "--chatbot-launcher-icon-color": t.launcher.iconColor,
-      "--chatbot-launcher-size": t.launcher.size,
+      "--chatbot-launcher-bg": o.launcher.backgroundColor,
+      "--chatbot-launcher-icon-color": o.launcher.iconColor,
+      "--chatbot-launcher-size": o.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,
+      "--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": 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,
+      "--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": 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,
+      "--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": 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
+      "--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
     }),
-    [t]
-  ), ie = M(() => {
-    const o = t.messages.markdownStyles || {};
+    [o]
+  ), pe = S(() => {
+    const e = o.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(
+      strong: ({ node: r, ...s }) => /* @__PURE__ */ t("strong", { style: { color: e.boldColor || "inherit" }, ...s }),
+      em: ({ node: r, ...s }) => /* @__PURE__ */ t("em", { style: { color: e.italicColor || "inherit" }, ...s }),
+      a: ({ node: r, ...s }) => /* @__PURE__ */ t("a", { style: { color: e.linkColor || "#3b82f6" }, ...s }),
+      code: ({ node: r, ...s }) => /* @__PURE__ */ t(
         "code",
         {
           style: {
-            color: o.codeColor || "inherit",
-            backgroundColor: o.codeBackgroundColor || "rgba(0, 0, 0, 0.1)",
+            color: e.codeColor || "inherit",
+            backgroundColor: e.codeBackgroundColor || "rgba(0, 0, 0, 0.1)",
             padding: "0.1rem 0.3rem",
             borderRadius: "0.25rem"
           },
-          ...l
+          ...s
         }
       )
     };
-  }, [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 {
+  }, [o.messages.markdownStyles]);
+  $(() => {
+    const e = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (e) {
+      const r = new e();
+      r.continuous = !0, r.interimResults = !1, r.lang = "en-US", r.onstart = () => he(!0), r.onresult = (s) => {
+        const i = s.results[s.results.length - 1][0].transcript;
+        U((d) => d + (d ? " " : "") + i);
+      }, r.onerror = (s) => {
+        console.error("Speech error:", s);
+      }, r.onend = () => {
+      }, z.current = r;
+    }
+  }, []), $(() => {
+    var d;
+    const e = o.window.scrollbarThumbColor, r = o.window.scrollbarTrackColor, s = `scrollbar-style-${w}`;
+    (d = document.getElementById(s)) == null || d.remove();
+    const i = document.createElement("style");
+    return i.id = s, i.innerHTML = `
+      /* Target both the message list and the textarea input */
+      #${w} .chatbot-message-list,
+      #${w} .chatbot-textarea-input {
         scrollbar-width: thin;
-        scrollbar-color: ${o} ${s};
+        scrollbar-color: ${e} ${r};
       }
       /* WebKit-based browsers (Chrome, Safari, Edge) */
-      #${k} .chatbot-message-list::-webkit-scrollbar {
+      #${w} .chatbot-message-list::-webkit-scrollbar,
+      #${w} .chatbot-textarea-input::-webkit-scrollbar {
         width: 8px;
       }
-      #${k} .chatbot-message-list::-webkit-scrollbar-track {
-        background: ${s};
+      #${w} .chatbot-message-list::-webkit-scrollbar-track,
+      #${w} .chatbot-textarea-input::-webkit-scrollbar-track {
+        background: ${r};
         border-radius: 4px;
       }
-      #${k} .chatbot-message-list::-webkit-scrollbar-thumb {
-        background-color: ${o};
+      #${w} .chatbot-message-list::-webkit-scrollbar-thumb,
+      #${w} .chatbot-textarea-input::-webkit-scrollbar-thumb {
+        background-color: ${e};
         border-radius: 4px;
-        border: 2px solid ${s};
+        border: 2px solid ${r};
       }
-    `, document.head.appendChild(I), () => {
-      var L;
-      (L = document.getElementById(l)) == null || L.remove();
+    `, document.head.appendChild(i), () => {
+      var A;
+      (A = document.getElementById(s)) == null || A.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);
+    w,
+    o.window.scrollbarThumbColor,
+    o.window.scrollbarTrackColor
+  ]), $(() => {
+    W(v);
+  }, [v]), $(() => {
+    var e;
+    (e = be.current) == null || e.scrollIntoView({ behavior: "smooth" });
+  }, [T, D, v]), $(() => {
+    var e, r;
+    I ? (e = Q.current) == null || e.focus() : (r = me.current) == null || r.focus();
+  }, [I]), $(() => {
+    const e = (r) => {
+      r.key === "Escape" && I && P(!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,
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [I]), $(() => {
+    const e = Q.current;
+    if (!e) return;
+    e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+    const s = e.scrollHeight - e.clientHeight > 4;
+    e.style.overflowY = s ? "auto" : "hidden";
+  }, [L]);
+  const ne = Te(async () => {
+    var A, we, ye, xe, ve, Ce, ke, Ne, Re, $e;
+    const e = L.trim();
+    if (!e && !f || m || D || v)
+      return;
+    const r = f ? {
+      name: f.name,
+      type: f.type,
+      size: f.size,
+      // Create a temporary URL for rendering in the message list.
+      // This URL is valid for the current browser session.
+      previewUrl: f.type.startsWith("image/") ? URL.createObjectURL(f) : null
+    } : null, s = {
+      id: `user-${Date.now()}`,
+      text: e,
+      sender: "user",
+      // Attach file metadata to the message for potential future use (not displayed).
+      attachment: r
+    };
+    H || K((b) => [...b, s]), O(e, f), U(""), W(!0);
+    const i = f;
+    E(null);
+    let d = "Sorry, an error occurred. Please check the console for details.";
+    try {
+      if (ee) {
+        const b = ee.startChat({
+          history: st(T)
+        }), p = [e];
+        if (i) {
+          const y = await se(i);
+          p.push({
+            inlineData: {
+              data: y,
+              mimeType: i.type
+            }
+          });
+        }
+        d = await (await (await b.sendMessage(p)).response).text() || "(no response from Gemini)";
+      } else if (te) {
+        const b = T.map((y) => ({
+          role: y.sender === "bot" ? "assistant" : "user",
+          content: y.text
+        })), p = [{ type: "text", text: e }];
+        if (i && i.type.startsWith("image/")) {
+          const y = await se(i);
+          p.push({
+            type: "image_url",
+            image_url: { url: `data:${i.type};base64,${y}` }
+          });
+        } else i && (console.warn(
+          "OpenAI integration currently only supports image files. File was ignored."
+        ), d = "Note: The attached file was not an image and was ignored. ");
+        const N = ((xe = (ye = (we = (A = (await te.chat.completions.create({
+          model: le,
           messages: [
-            ...n,
-            ...i,
-            { role: "user", content: o }
+            ...b,
+            { role: "user", content: p }
           ]
-        })).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
+        })).choices) == null ? void 0 : A[0]) == null ? void 0 : we.message) == null ? void 0 : ye.content) == null ? void 0 : xe.trim()) || "(no response from OpenAI)";
+        d = i && !i.type.startsWith("image/") ? d + N : N;
+      } else if (oe) {
+        const b = T.map((y) => ({
+          role: y.sender === "bot" ? "assistant" : "user",
+          content: y.text
+        })), p = [{ type: "text", text: e }];
+        if (i && i.type.startsWith("image/")) {
+          const y = await se(i);
+          p.unshift({
+            type: "image",
+            source: {
+              type: "base64",
+              media_type: i.type,
+              data: y
+            }
+          });
+        } else i && (console.warn(
+          "Anthropic integration currently only supports image files. File was ignored."
+        ), d = "Note: The attached file was not an image and was ignored. ");
+        const N = ((ke = (Ce = (ve = (await oe.messages.create({
+          model: ce,
+          system: l,
           messages: [
-            ...n,
-            { role: "user", content: o }
+            ...b,
+            { role: "user", content: p }
           ],
           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({
+        })).content) == null ? void 0 : ve[0]) == null ? void 0 : Ce.text) == null ? void 0 : ke.trim()) || "(no response from Claude)";
+        d = i && !i.type.startsWith("image/") ? d + N : N;
+      } else if (re) {
+        let b = "";
+        i && (console.warn(
+          "Groq API does not support file uploads. Sending text only."
+        ), b = `Note: The attached file was ignored as this AI model does not support file uploads. Here is my response to your text:
+
+`);
+        const p = T.map((N) => ({
+          role: N.sender === "bot" ? "assistant" : "user",
+          content: N.text
+        })), q = await re.chat.completions.create({
           messages: [
-            ...n,
-            ...i,
-            { role: "user", content: o }
+            ...p,
+            { role: "user", content: e }
           ],
-          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"
+          model: de
+        });
+        d = b + ((($e = (Re = (Ne = q.choices[0]) == null ? void 0 : Ne.message) == null ? void 0 : Re.content) == null ? void 0 : $e.trim()) || "(no response from Groq)");
+      } else
+        d = `You said: "${e}"`, i && (d += ` and attached a file named "${i.name}".`), await new Promise((b) => setTimeout(b, 800));
+    } catch (b) {
+      console.error("ChatBot handleSend Error:", b), d = "An error occurred while processing your request.";
+    } finally {
+      const b = {
+        id: `bot-${Date.now()}`,
+        text: d,
+        sender: "bot",
+        attachment: null
       };
-      m((i) => [...i, n]), f(!1);
-    }, 800));
+      K((p) => [...p, b]), W(!1);
+    }
   }, [
-    F,
-    h,
+    // Dependency array ensures the function is recreated only when necessary.
+    L,
+    f,
+    m,
+    D,
+    v,
+    H,
+    T,
     O,
-    g,
-    R,
+    K,
+    E,
     U,
-    V,
-    Z,
-    X,
-    z,
-    v,
-    m,
+    W,
+    l,
     ee,
-    oe,
     te,
-    r
-    // Add to dependency array
-  ]), ke = we(
-    (o) => {
-      o.key === "Enter" && Y();
+    oe,
+    re,
+    le,
+    ce,
+    de
+  ]), Oe = Te(
+    (e) => {
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), ne());
     },
-    [Y]
-  ), _ = (o) => typeof o == "string" ? /* @__PURE__ */ e(
+    [ne]
+  ), Pe = () => {
+    z.current && !J && z.current.start();
+  }, Ue = () => {
+    z.current && J && (z.current.stop(), he(!1));
+  }, De = () => {
+    var e;
+    (e = fe.current) == null || e.click();
+  }, We = (e) => {
+    var s;
+    const r = (s = e.target.files) == null ? void 0 : s[0];
+    r && (E(r), Le(r)), e.target && (e.target.value = null);
+  }, ae = (e) => typeof e == "string" ? /* @__PURE__ */ t(
     "img",
     {
-      src: o,
+      src: e,
       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 = {
+  ) : /* @__PURE__ */ t("div", { className: "w-8 h-8 rounded-full text-gray-500", children: e }), G = D || v, ge = {
     "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 = {
+  }, Ee = o.window.placement === "center", M = {
     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,
+  return /* @__PURE__ */ u("div", { id: w, style: Ae, className: "font-sans", children: [
+    /* @__PURE__ */ t(V, { children: !I && /* @__PURE__ */ t(
+      x.button,
       {
-        ref: le,
-        onClick: () => A(!0),
+        ref: me,
+        onClick: () => P(!0),
         "aria-label": "Open Chat",
         initial: { scale: 0, opacity: 0 },
         animate: { scale: 1, opacity: 1 },
@@ -553,34 +627,34 @@ ${w.text}`
           width: "var(--chatbot-launcher-size)",
           height: "var(--chatbot-launcher-size)"
         },
-        children: /* @__PURE__ */ e($e, { icon: Ie })
+        children: /* @__PURE__ */ t(B, { icon: Ge })
       }
     ) }),
-    /* @__PURE__ */ u(Q, { children: [
-      N && Ne && t.window.backdrop && /* @__PURE__ */ e(
-        C.div,
+    /* @__PURE__ */ u(V, { children: [
+      I && Ee && o.window.backdrop && /* @__PURE__ */ t(
+        x.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           style: {
-            backgroundColor: t.window.backdropColor,
-            backdropFilter: `blur(${t.window.backdropBlur})`,
+            backgroundColor: o.window.backdropColor,
+            backdropFilter: `blur(${o.window.backdropBlur})`,
             // For Safari compatibility
-            WebkitBackdropFilter: `blur(${t.window.backdropBlur})`
+            WebkitBackdropFilter: `blur(${o.window.backdropBlur})`
           },
           className: "fixed inset-0 z-40",
-          onClick: () => A(!1)
+          onClick: () => P(!1)
         },
         "chatbot-backdrop"
       ),
-      N && /* @__PURE__ */ u(
+      I && /* @__PURE__ */ u(
         "div",
         {
-          ref: ve,
+          ref: ze,
           "aria-modal": "true",
           role: "dialog",
-          className: `fixed ${ce[t.window.placement] || ce["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,
+          className: `fixed ${ge[o.window.placement] || ge["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,
           style: {
             width: "var(--chatbot-window-width)",
             height: "var(--chatbot-window-height)",
@@ -599,8 +673,8 @@ ${w.text}`
                 },
                 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(
+                    /* @__PURE__ */ t("div", { className: "w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1", children: ae(c) }),
+                    /* @__PURE__ */ t(
                       "span",
                       {
                         style: {
@@ -608,17 +682,17 @@ ${w.text}`
                           fontWeight: "var(--chatbot-header-font-weight)"
                         },
                         className: "text-lg",
-                        children: c
+                        children: n
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ e(
+                  /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: () => A(!1),
+                      onClick: () => P(!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(
+                      children: /* @__PURE__ */ t(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -627,7 +701,7 @@ ${w.text}`
                           strokeWidth: 2,
                           stroke: "currentColor",
                           className: "w-6 h-6",
-                          children: /* @__PURE__ */ e(
+                          children: /* @__PURE__ */ t(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -649,76 +723,112 @@ ${w.text}`
                 "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,
+                  /* @__PURE__ */ t(V, { initial: !1, children: T.map((e, r) => /* @__PURE__ */ u(
+                    x.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"}`,
+                      className: `flex items-end max-w-[85%] gap-2 ${e.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
+                        o.messages.showAvatars && /* @__PURE__ */ t("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: ae(
+                          e.sender === "user" ? h : c
                         ) }),
-                        /* @__PURE__ */ e(
-                          C.div,
+                        /* @__PURE__ */ u(
+                          "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 })
-                              }
-                            )
+                            className: `flex flex-col ${e.sender === "user" ? "items-end" : "items-start"}`,
+                            children: [
+                              e.sender === "user" && e.attachment && /* @__PURE__ */ t(
+                                "div",
+                                {
+                                  className: `p-2 mb-1 max-w-full self-end ${M[o.messages.bubbleShape] || M.rounded} ${// Add pointer ONLY if there's no text bubble below it
+                                  !e.text && o.messages.bubblePointer ? "rounded-br-none" : ""}`,
+                                  style: {
+                                    backgroundColor: "var(--chatbot-user-msg-bg)",
+                                    color: "var(--chatbot-user-msg-text-color)"
+                                  },
+                                  children: e.attachment.previewUrl ? /* @__PURE__ */ t(
+                                    "img",
+                                    {
+                                      src: e.attachment.previewUrl,
+                                      alt: e.attachment.name,
+                                      className: "w-full h-auto object-cover rounded-md max-w-[200px]"
+                                    }
+                                  ) : /* @__PURE__ */ u("div", { className: "flex items-center gap-2 text-sm", children: [
+                                    /* @__PURE__ */ t(
+                                      B,
+                                      {
+                                        icon: Ie,
+                                        className: "w-4 h-4 flex-shrink-0"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ t("span", { className: "truncate", children: e.attachment.name })
+                                  ] })
+                                }
+                              ),
+                              e.text && /* @__PURE__ */ t(
+                                x.div,
+                                {
+                                  layout: "position",
+                                  transition: { duration: 0.2, ease: "easeOut" },
+                                  className: `px-3 py-2 ${M[o.messages.bubbleShape] || M.rounded} ${// The text bubble always gets the pointer if it exists
+                                  o.messages.bubblePointer ? e.sender === "user" ? "rounded-br-none" : "rounded-bl-none" : ""}`,
+                                  style: {
+                                    backgroundColor: e.sender === "user" ? "var(--chatbot-user-msg-bg)" : "var(--chatbot-bot-msg-bg)",
+                                    color: e.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: e.sender === "bot" && r === T.length - 1 ? /* @__PURE__ */ t(
+                                    at,
+                                    {
+                                      text: e.text,
+                                      animationType: o.messages.animation,
+                                      components: pe
+                                    }
+                                  ) : /* @__PURE__ */ t(
+                                    "div",
+                                    {
+                                      className: "prose prose-sm max-w-none text-inherit prose-p:my-0",
+                                      style: { color: "inherit" },
+                                      children: /* @__PURE__ */ t(F, { components: pe, children: e.text })
+                                    }
+                                  )
+                                }
+                              )
+                            ]
                           }
                         )
                       ]
                     },
-                    o.id
+                    e.id
                   )) }),
-                  J && /* @__PURE__ */ u(
+                  G && /* @__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(
+                        o.messages.showAvatars && /* @__PURE__ */ t("div", { className: "w-7 h-7 rounded-full flex-shrink-0 overflow-hidden", children: ae(c) }),
+                        /* @__PURE__ */ t(
                           "div",
                           {
-                            className: `px-3 py-2 ${P[t.messages.bubbleShape] || P.rounded} rounded-bl-none`,
+                            className: `px-3 py-2 ${M[o.messages.bubbleShape] || M.rounded} rounded-bl-none`,
                             style: { backgroundColor: "var(--chatbot-bot-msg-bg)" },
-                            children: /* @__PURE__ */ e(Fe, {})
+                            children: /* @__PURE__ */ t(ot, {})
                           }
                         )
                       ]
                     },
                     "typing-indicator"
                   ),
-                  /* @__PURE__ */ e("div", { ref: ae })
+                  /* @__PURE__ */ t("div", { ref: be })
                 ]
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ u(
               "footer",
               {
                 className: "p-3 border-t flex-shrink-0",
@@ -726,42 +836,134 @@ ${w.text}`
                   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",
+                children: [
+                  /* @__PURE__ */ t(V, { children: f && /* @__PURE__ */ t(
+                    x.div,
                     {
-                      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, {})
+                      initial: { opacity: 0, height: 0 },
+                      animate: { opacity: 1, height: "auto" },
+                      exit: { opacity: 0, height: 0 },
+                      transition: { duration: 0.2 },
+                      children: /* @__PURE__ */ t(rt, { file: f, onRemove: () => E(null) })
                     }
-                  )
-                ] })
+                  ) }),
+                  /* @__PURE__ */ u("div", { className: "flex items-end space-x-2", children: [
+                    Be && /* @__PURE__ */ u(He, { children: [
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          onClick: De,
+                          disabled: m || G,
+                          "aria-label": "Upload File",
+                          className: "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 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__ */ t(B, { icon: qe, className: "w-5 h-5" })
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "input",
+                        {
+                          type: "file",
+                          ref: fe,
+                          onChange: We,
+                          accept: Fe,
+                          style: { display: "none" },
+                          "aria-hidden": "true"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ t(
+                      "textarea",
+                      {
+                        ref: Q,
+                        rows: "1",
+                        value: L,
+                        onChange: (e) => U(e.target.value),
+                        onKeyDown: Oe,
+                        placeholder: g,
+                        disabled: m || G,
+                        "aria-label": "Chat input",
+                        className: "chatbot-textarea-input flex-1 w-full px-4 py-2 bg-transparent rounded-xl border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60 resize-none overflow-hidden",
+                        style: {
+                          color: "var(--chatbot-input-text-color)",
+                          borderColor: "var(--chatbot-input-border-color)",
+                          "--tw-ring-color": "var(--chatbot-input-focus-ring)",
+                          maxHeight: "100px",
+                          // Set a max-height before scrollbar appears
+                          overflowY: "hidden",
+                          // Add scrollbar when content exceeds max-height
+                          lineHeight: "1.5"
+                        }
+                      }
+                    ),
+                    J ? (
+                      // 1. ALWAYS show STOP button when recording is active.
+                      /* @__PURE__ */ t(
+                        x.button,
+                        {
+                          onClick: Ue,
+                          "aria-label": "Stop Recording",
+                          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)"
+                          },
+                          animate: { opacity: [1, 0.8, 1], scale: [1, 1.1, 1] },
+                          transition: {
+                            duration: 1,
+                            repeat: 1 / 0,
+                            ease: "easeInOut"
+                          },
+                          children: /* @__PURE__ */ t(
+                            B,
+                            {
+                              icon: Ve,
+                              className: "w-5 h-5"
+                            }
+                          )
+                        }
+                      )
+                    ) : Se && !L.trim() ? (
+                      // 2. Show START button ONLY if not recording, STT is enabled, and there is no text.
+                      /* @__PURE__ */ t(
+                        x.button,
+                        {
+                          onClick: Pe,
+                          "aria-label": "Start Recording",
+                          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__ */ t(B, { icon: _e, className: "w-5 h-5" })
+                        }
+                      )
+                    ) : (
+                      // 3. Otherwise, show the SEND button.
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          onClick: ne,
+                          disabled: !L.trim() || m || G,
+                          "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__ */ t(tt, {})
+                        }
+                      )
+                    )
+                  ] })
+                ]
               }
             )
           ]
@@ -772,5 +974,5 @@ ${w.text}`
   ] });
 };
 export {
-  Qe as ChatBot
+  gt as ChatBot
 };