@sampleapp.ai/sdk 1.0.27 → 1.0.29

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import * as L from "react";
-import { useState as f, useEffect as M, forwardRef as oe, useRef as U, useMemo as ne } from "react";
-import * as ee from "react-dom/client";
-import { jsxs as c, jsx as e, Fragment as z } from "react/jsx-runtime";
-const ie = ({ settings: t, onClick: i }) => {
-  const [r, l] = f(!1), s = () => {
-    const d = new CustomEvent("chatButtonClick", {
-      detail: { settings: t }
+import * as M from "react";
+import { useState as u, useEffect as E, forwardRef as oe, useRef as V, useMemo as ne } from "react";
+import * as Z from "react-dom/client";
+import { jsxs as g, jsx as o, Fragment as q } from "react/jsx-runtime";
+const ie = ({ settings: e, onClick: i }) => {
+  const [n, d] = u(!1), s = () => {
+    const l = new CustomEvent("chatButtonClick", {
+      detail: { settings: e }
     });
-    document.dispatchEvent(d), i?.();
+    document.dispatchEvent(l), i?.();
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ g(
     "button",
     {
       style: {
@@ -19,7 +19,7 @@ const ie = ({ settings: t, onClick: i }) => {
         right: "20px",
         zIndex: 1e3,
         // Colors
-        backgroundColor: t.baseSettings.primaryBrandColor,
+        backgroundColor: e.baseSettings.primaryBrandColor,
         color: "white",
         // Typography
         fontSize: "14px",
@@ -31,11 +31,11 @@ const ie = ({ settings: t, onClick: i }) => {
         border: "none",
         borderRadius: "50px",
         // Visual Effects
-        boxShadow: r ? "0 6px 20px rgba(0,0,0,0.2)" : "0 4px 12px rgba(0,0,0,0.15)",
+        boxShadow: n ? "0 6px 20px rgba(0,0,0,0.2)" : "0 4px 12px rgba(0,0,0,0.15)",
         cursor: "pointer",
         // Animations
         transition: "all 0.2s ease-in-out",
-        transform: r ? "scale(1.05)" : "scale(1)",
+        transform: n ? "scale(1.05)" : "scale(1)",
         // Layout for icon + text
         display: "flex",
         alignItems: "center",
@@ -44,16 +44,16 @@ const ie = ({ settings: t, onClick: i }) => {
         outline: "none",
         userSelect: "none"
       },
-      onMouseEnter: () => l(!0),
-      onMouseLeave: () => l(!1),
+      onMouseEnter: () => d(!0),
+      onMouseLeave: () => d(!1),
       onClick: s,
-      onFocus: () => l(!0),
-      onBlur: () => l(!1),
+      onFocus: () => d(!0),
+      onBlur: () => d(!1),
       children: [
-        t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ e(
+        e.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ o(
           "img",
           {
-            src: t.aiChatSettings.aiAssistantAvatar,
+            src: e.aiChatSettings.aiAssistantAvatar,
             alt: "AI Assistant",
             style: {
               width: "20px",
@@ -62,8 +62,8 @@ const ie = ({ settings: t, onClick: i }) => {
               objectFit: "cover",
               flexShrink: 0
             },
-            onError: (d) => {
-              d.currentTarget.style.display = "none";
+            onError: (l) => {
+              l.currentTarget.style.display = "none";
             }
           }
         ),
@@ -72,27 +72,27 @@ const ie = ({ settings: t, onClick: i }) => {
     }
   );
 }, se = ({
-  settings: t,
+  settings: e,
   onClose: i
 }) => {
-  const [r, l] = f(!0), [s, d] = f(""), g = () => {
-    l(!1), i?.();
-  }, T = (o) => {
-    d(o);
+  const [n, d] = u(!0), [s, l] = u(""), m = () => {
+    d(!1), i?.();
+  }, T = (r) => {
+    l(r);
   };
-  return M(() => {
-    const o = (b) => {
-      b.key === "Escape" && g();
+  return E(() => {
+    const r = (x) => {
+      x.key === "Escape" && m();
     };
-    if (r)
-      return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [r]), M(() => {
-    if (r)
+    if (n)
+      return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [n]), E(() => {
+    if (n)
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = "";
       };
-  }, [r]), r ? /* @__PURE__ */ c(z, { children: [
-    /* @__PURE__ */ e(
+  }, [n]), n ? /* @__PURE__ */ g(q, { children: [
+    /* @__PURE__ */ o(
       "div",
       {
         style: {
@@ -106,10 +106,10 @@ const ie = ({ settings: t, onClick: i }) => {
           zIndex: 999,
           animation: "fadeIn 0.2s ease-out"
         },
-        onClick: g
+        onClick: m
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ g(
       "div",
       {
         style: {
@@ -128,9 +128,9 @@ const ie = ({ settings: t, onClick: i }) => {
           fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
           animation: "slideIn 0.3s ease-out"
         },
-        onClick: (o) => o.stopPropagation(),
+        onClick: (r) => r.stopPropagation(),
         children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ g(
             "div",
             {
               style: {
@@ -139,14 +139,14 @@ const ie = ({ settings: t, onClick: i }) => {
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                background: `linear-gradient(135deg, ${t.baseSettings.primaryBrandColor}10, ${t.baseSettings.primaryBrandColor}05)`
+                background: `linear-gradient(135deg, ${e.baseSettings.primaryBrandColor}10, ${e.baseSettings.primaryBrandColor}05)`
               },
               children: [
-                /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                  t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ e(
+                /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                  e.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ o(
                     "img",
                     {
-                      src: t.aiChatSettings.aiAssistantAvatar,
+                      src: e.aiChatSettings.aiAssistantAvatar,
                       alt: "AI Assistant",
                       style: {
                         width: "32px",
@@ -154,29 +154,29 @@ const ie = ({ settings: t, onClick: i }) => {
                         borderRadius: "50%",
                         objectFit: "cover"
                       },
-                      onError: (o) => {
-                        o.currentTarget.style.display = "none";
+                      onError: (r) => {
+                        r.currentTarget.style.display = "none";
                       }
                     }
                   ),
-                  /* @__PURE__ */ e(
+                  /* @__PURE__ */ o(
                     "h3",
                     {
                       style: {
                         margin: 0,
-                        color: t.baseSettings.primaryBrandColor,
+                        color: e.baseSettings.primaryBrandColor,
                         fontSize: "18px",
                         fontWeight: "600",
                         letterSpacing: "-0.025em"
                       },
-                      children: t.baseSettings.organizationDisplayName
+                      children: e.baseSettings.organizationDisplayName
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ o(
                   "button",
                   {
-                    onClick: g,
+                    onClick: m,
                     style: {
                       background: "none",
                       border: "none",
@@ -190,11 +190,11 @@ const ie = ({ settings: t, onClick: i }) => {
                       justifyContent: "center",
                       transition: "all 0.15s ease"
                     },
-                    onMouseEnter: (o) => {
-                      o.currentTarget.style.backgroundColor = "#f1f5f9", o.currentTarget.style.color = "#334155";
+                    onMouseEnter: (r) => {
+                      r.currentTarget.style.backgroundColor = "#f1f5f9", r.currentTarget.style.color = "#334155";
                     },
-                    onMouseLeave: (o) => {
-                      o.currentTarget.style.backgroundColor = "transparent", o.currentTarget.style.color = "#64748b";
+                    onMouseLeave: (r) => {
+                      r.currentTarget.style.backgroundColor = "transparent", r.currentTarget.style.color = "#64748b";
                     },
                     children: "×"
                   }
@@ -202,7 +202,7 @@ const ie = ({ settings: t, onClick: i }) => {
               ]
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ g(
             "div",
             {
               style: {
@@ -211,14 +211,14 @@ const ie = ({ settings: t, onClick: i }) => {
                 overflowY: "auto"
               },
               children: [
-                /* @__PURE__ */ c("div", { style: { position: "relative", marginBottom: "24px" }, children: [
-                  /* @__PURE__ */ e(
+                /* @__PURE__ */ g("div", { style: { position: "relative", marginBottom: "24px" }, children: [
+                  /* @__PURE__ */ o(
                     "input",
                     {
                       type: "text",
                       placeholder: "Ask a question...",
                       value: s,
-                      onChange: (o) => d(o.target.value),
+                      onChange: (r) => l(r.target.value),
                       style: {
                         width: "100%",
                         padding: "14px 16px",
@@ -231,16 +231,16 @@ const ie = ({ settings: t, onClick: i }) => {
                         transition: "border-color 0.15s ease",
                         backgroundColor: "#fafafa"
                       },
-                      onFocus: (o) => {
-                        o.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, o.currentTarget.style.backgroundColor = "white";
+                      onFocus: (r) => {
+                        r.currentTarget.style.borderColor = e.baseSettings.primaryBrandColor, r.currentTarget.style.backgroundColor = "white";
                       },
-                      onBlur: (o) => {
-                        o.currentTarget.style.borderColor = "#e2e8f0", o.currentTarget.style.backgroundColor = "#fafafa";
+                      onBlur: (r) => {
+                        r.currentTarget.style.borderColor = "#e2e8f0", r.currentTarget.style.backgroundColor = "#fafafa";
                       },
                       autoFocus: !0
                     }
                   ),
-                  /* @__PURE__ */ e(
+                  /* @__PURE__ */ o(
                     "button",
                     {
                       style: {
@@ -248,7 +248,7 @@ const ie = ({ settings: t, onClick: i }) => {
                         right: "8px",
                         top: "50%",
                         transform: "translateY(-50%)",
-                        backgroundColor: t.baseSettings.primaryBrandColor,
+                        backgroundColor: e.baseSettings.primaryBrandColor,
                         color: "white",
                         border: "none",
                         borderRadius: "8px",
@@ -258,11 +258,11 @@ const ie = ({ settings: t, onClick: i }) => {
                         fontWeight: "500",
                         transition: "opacity 0.15s ease"
                       },
-                      onMouseEnter: (o) => {
-                        o.currentTarget.style.opacity = "0.9";
+                      onMouseEnter: (r) => {
+                        r.currentTarget.style.opacity = "0.9";
                       },
-                      onMouseLeave: (o) => {
-                        o.currentTarget.style.opacity = "1";
+                      onMouseLeave: (r) => {
+                        r.currentTarget.style.opacity = "1";
                       },
                       onClick: () => {
                         console.log("Search for:", s);
@@ -271,8 +271,8 @@ const ie = ({ settings: t, onClick: i }) => {
                     }
                   )
                 ] }),
-                t.aiChatSettings?.exampleQuestions && t.aiChatSettings.exampleQuestions.length > 0 && /* @__PURE__ */ c("div", { children: [
-                  /* @__PURE__ */ e(
+                e.aiChatSettings?.exampleQuestions && e.aiChatSettings.exampleQuestions.length > 0 && /* @__PURE__ */ g("div", { children: [
+                  /* @__PURE__ */ o(
                     "p",
                     {
                       style: {
@@ -285,15 +285,15 @@ const ie = ({ settings: t, onClick: i }) => {
                       children: "Popular questions:"
                     }
                   ),
-                  /* @__PURE__ */ e(
+                  /* @__PURE__ */ o(
                     "div",
                     {
                       style: { display: "flex", flexDirection: "column", gap: "8px" },
-                      children: t.aiChatSettings.exampleQuestions.map(
-                        (o, b) => /* @__PURE__ */ e(
+                      children: e.aiChatSettings.exampleQuestions.map(
+                        (r, x) => /* @__PURE__ */ o(
                           "button",
                           {
-                            onClick: () => T(o),
+                            onClick: () => T(r),
                             style: {
                               display: "block",
                               width: "100%",
@@ -309,15 +309,15 @@ const ie = ({ settings: t, onClick: i }) => {
                               transition: "all 0.15s ease",
                               lineHeight: "1.4"
                             },
-                            onMouseEnter: (p) => {
-                              p.currentTarget.style.backgroundColor = "#f8fafc", p.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, p.currentTarget.style.transform = "translateY(-1px)", p.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
+                            onMouseEnter: (c) => {
+                              c.currentTarget.style.backgroundColor = "#f8fafc", c.currentTarget.style.borderColor = e.baseSettings.primaryBrandColor, c.currentTarget.style.transform = "translateY(-1px)", c.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
                             },
-                            onMouseLeave: (p) => {
-                              p.currentTarget.style.backgroundColor = "white", p.currentTarget.style.borderColor = "#e2e8f0", p.currentTarget.style.transform = "translateY(0)", p.currentTarget.style.boxShadow = "none";
+                            onMouseLeave: (c) => {
+                              c.currentTarget.style.backgroundColor = "white", c.currentTarget.style.borderColor = "#e2e8f0", c.currentTarget.style.transform = "translateY(0)", c.currentTarget.style.boxShadow = "none";
                             },
-                            children: o
+                            children: r
                           },
-                          b
+                          x
                         )
                       )
                     }
@@ -329,7 +329,7 @@ const ie = ({ settings: t, onClick: i }) => {
         ]
       }
     ),
-    /* @__PURE__ */ e("style", { children: `
+    /* @__PURE__ */ o("style", { children: `
           @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -367,35 +367,35 @@ const ie = ({ settings: t, onClick: i }) => {
 }, le = {
   borderColor: "#0f172a",
   boxShadow: "0 0 0 1px #0f172a"
-}, ce = "#64748b", G = L.forwardRef(
-  ({ style: t, onFocus: i, onBlur: r, ...l }, s) => {
-    const [d, g] = L.useState(!1), T = {
+}, ce = "#64748b", G = M.forwardRef(
+  ({ style: e, onFocus: i, onBlur: n, ...d }, s) => {
+    const [l, m] = M.useState(!1), T = {
       ...de,
-      ...d ? le : {},
-      ...t,
+      ...l ? le : {},
+      ...e,
       // Handle placeholder color via CSS custom property
       // @ts-ignore - CSS custom properties are valid
       "--placeholder-color": ce
     };
-    return l.disabled && (T.cursor = "not-allowed", T.opacity = 0.5), /* @__PURE__ */ c(z, { children: [
-      /* @__PURE__ */ e("style", { children: `
+    return d.disabled && (T.cursor = "not-allowed", T.opacity = 0.5), /* @__PURE__ */ g(q, { children: [
+      /* @__PURE__ */ o("style", { children: `
             .textarea-with-placeholder::placeholder {
               color: var(--placeholder-color);
             }
           ` }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ o(
         "textarea",
         {
           className: "textarea-with-placeholder",
           style: T,
           ref: s,
-          onFocus: (p) => {
-            g(!0), i?.(p);
+          onFocus: (c) => {
+            m(!0), i?.(c);
           },
-          onBlur: (p) => {
-            g(!1), r?.(p);
+          onBlur: (c) => {
+            m(!1), n?.(c);
           },
-          ...l
+          ...d
         }
       )
     ] });
@@ -481,8 +481,8 @@ const pe = {
     width: "32px",
     padding: "0"
   }
-}, he = (t) => {
-  switch (t) {
+}, ge = (e) => {
+  switch (e) {
     case "default":
       return { backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%) / 0.9)" };
     case "destructive":
@@ -513,12 +513,12 @@ const pe = {
     default:
       return {};
   }
-}, ge = (t) => {
+}, he = (e) => {
   const i = {
     outline: "1px solid hsl(var(--sdk-ring, 240 10% 3.9%))",
     outlineOffset: "1px"
   };
-  switch (t) {
+  switch (e) {
     case "outline":
       return {
         ...i,
@@ -528,60 +528,60 @@ const pe = {
     default:
       return i;
   }
-}, J = L.forwardRef(
+}, te = M.forwardRef(
   ({
-    variant: t = "default",
+    variant: e = "default",
     size: i = "default",
-    asChild: r = !1,
-    style: l,
+    asChild: n = !1,
+    style: d,
     onMouseEnter: s,
-    onMouseLeave: d,
-    onFocus: g,
+    onMouseLeave: l,
+    onFocus: m,
     onBlur: T,
-    onClick: o,
-    ...b
-  }, p) => {
-    const [H, A] = L.useState(!1), [y, F] = L.useState(!1), k = {
+    onClick: r,
+    ...x
+  }, c) => {
+    const [z, A] = M.useState(!1), [k, F] = M.useState(!1), w = {
       ...pe,
-      ...ue[t],
+      ...ue[e],
       ...fe[i],
-      ...H ? he(t) : {},
-      ...y ? ge(t) : {},
-      ...l
+      ...z ? ge(e) : {},
+      ...k ? he(e) : {},
+      ...d
       // Allow style override
     };
-    b.disabled && (k.pointerEvents = "none", k.opacity = 0.5, k.cursor = "not-allowed");
-    const I = (u) => {
-      A(!0), s?.(u);
-    }, R = (u) => {
-      A(!1), d?.(u);
-    }, w = (u) => {
-      F(!0), g?.(u);
-    }, D = (u) => {
-      F(!1), T?.(u);
-    }, j = (u) => {
+    x.disabled && (w.pointerEvents = "none", w.opacity = 0.5, w.cursor = "not-allowed");
+    const I = (p) => {
+      A(!0), s?.(p);
+    }, R = (p) => {
+      A(!1), l?.(p);
+    }, y = (p) => {
+      F(!0), m?.(p);
+    }, D = (p) => {
+      F(!1), T?.(p);
+    }, N = (p) => {
       setTimeout(() => {
-        u.currentTarget && u.currentTarget.blur();
-      }, 150), o?.(u);
+        p.currentTarget && p.currentTarget.blur();
+      }, 150), r?.(p);
     };
-    return r && console.warn(
+    return n && console.warn(
       "asChild prop is not supported in the inline CSS version of Button."
-    ), /* @__PURE__ */ e(
+    ), /* @__PURE__ */ o(
       "button",
       {
-        style: k,
-        ref: p,
+        style: w,
+        ref: c,
         onMouseEnter: I,
         onMouseLeave: R,
-        onFocus: w,
+        onFocus: y,
         onBlur: D,
-        onClick: j,
-        ...b
+        onClick: N,
+        ...x
       }
     );
   }
 );
-J.displayName = "Button";
+te.displayName = "Button";
 const me = {
   ocean: {
     primary: "#1ca0fb",
@@ -835,23 +835,23 @@ const me = {
       }
     }
   }
-}, te = (t) => me[t || "ocean"], Re = "ocean", xe = ({
-  size: t = 20,
+}, ee = (e) => me[e || "ocean"], Ce = "ocean", be = ({
+  size: e = 20,
   className: i = "",
-  style: r = {}
-}) => /* @__PURE__ */ c(z, { children: [
-  /* @__PURE__ */ e("style", { children: `
+  style: n = {}
+}) => /* @__PURE__ */ g(q, { children: [
+  /* @__PURE__ */ o("style", { children: `
           @keyframes icon-spin {
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
           }
         ` }),
-  /* @__PURE__ */ e(
+  /* @__PURE__ */ o(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: t,
-      height: t,
+      width: e,
+      height: e,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -861,21 +861,21 @@ const me = {
       className: `lucide lucide-loader-circle ${i}`,
       style: {
         animation: "icon-spin 1s linear infinite",
-        ...r
+        ...n
       },
-      children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ o("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
   )
-] }), be = ({
-  size: t = 20,
+] }), xe = ({
+  size: e = 20,
   className: i = "",
-  style: r = {}
-}) => /* @__PURE__ */ c(
+  style: n = {}
+}) => /* @__PURE__ */ g(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: t,
-    height: t,
+    width: e,
+    height: e,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -884,256 +884,77 @@ const me = {
     strokeLinejoin: "round",
     className: `lucide lucide-arrow-up ${i}`,
     style: {
-      ...r
+      ...n
     },
     children: [
-      /* @__PURE__ */ e("path", { d: "m5 12 7-7 7 7" }),
-      /* @__PURE__ */ e("path", { d: "M12 19V5" })
+      /* @__PURE__ */ o("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ o("path", { d: "M12 19V5" })
     ]
   }
-), ye = ({
-  isRecording: t = !1,
-  isTranscribing: i = !1,
-  size: r = 20,
-  style: l = {}
-}) => {
-  const s = {
-    position: "relative",
-    width: `${r}px`,
-    height: `${Math.floor(r * 0.8)}px`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    ...l
-  };
-  if (i)
-    return /* @__PURE__ */ c(z, { children: [
-      /* @__PURE__ */ e("style", { children: `
-            @keyframes icon-spin {
-              from { transform: rotate(0deg); }
-              to { transform: rotate(360deg); }
-            }
-          ` }),
-      /* @__PURE__ */ e("div", { style: s, children: /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${Math.floor(r * 0.6)}px`,
-            height: `${Math.floor(r * 0.6)}px`,
-            border: "2px solid currentColor",
-            borderTop: "2px solid transparent",
-            borderRadius: "50%",
-            animation: "icon-spin 1s linear infinite"
-          }
-        }
-      ) })
-    ] });
-  if (t)
-    return /* @__PURE__ */ c(z, { children: [
-      /* @__PURE__ */ e("style", { children: `
-            @keyframes icon-pulse {
-              0%, 100% { transform: scale(1); }
-              50% { transform: scale(0.95); }
-            }
-          ` }),
-      /* @__PURE__ */ e("div", { style: s, children: /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${Math.floor(r * 0.6)}px`,
-            height: `${Math.floor(r * 0.6)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "2px",
-            animation: "icon-pulse 1s ease-in-out infinite"
-          }
-        }
-      ) })
-    ] });
-  const d = Math.max(1, Math.floor(r * 0.075)), g = Math.max(1, Math.floor(r * 0.1));
-  return /* @__PURE__ */ c(z, { children: [
-    /* @__PURE__ */ e("style", { children: `
-          @keyframes wave1 {
-            0%, 100% {
-              transform: scaleY(0.4);
-              opacity: 0.6;
-            }
-            50% {
-              transform: scaleY(0.8);
-              opacity: 0.9;
-            }
-          }
-          
-          @keyframes wave2 {
-            0%, 100% {
-              transform: scaleY(0.5);
-              opacity: 0.7;
-            }
-            50% {
-              transform: scaleY(1);
-              opacity: 1;
-            }
-          }
-          
-          @keyframes wave3 {
-            0%, 100% {
-              transform: scaleY(0.6);
-              opacity: 0.8;
-            }
-            50% {
-              transform: scaleY(1);
-              opacity: 1;
-            }
-          }
-          
-          @keyframes wave4 {
-            0%, 100% {
-              transform: scaleY(0.5);
-              opacity: 0.7;
-            }
-            50% {
-              transform: scaleY(0.9);
-              opacity: 1;
-            }
-          }
-          
-          @keyframes wave5 {
-            0%, 100% {
-              transform: scaleY(0.4);
-              opacity: 0.6;
-            }
-            50% {
-              transform: scaleY(0.7);
-              opacity: 0.9;
-            }
-          }
-        ` }),
-    /* @__PURE__ */ e("div", { style: s, children: /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: `${g}px` }, children: [
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${d}px`,
-            height: `${Math.floor(r * 0.4)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "999px",
-            animation: "wave1 1.8s ease-in-out infinite"
-          }
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${d}px`,
-            height: `${Math.floor(r * 0.6)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "999px",
-            animation: "wave2 2.1s ease-in-out infinite"
-          }
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${d}px`,
-            height: `${Math.floor(r * 0.8)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "999px",
-            animation: "wave3 1.6s ease-in-out infinite"
-          }
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${d}px`,
-            height: `${Math.floor(r * 0.6)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "999px",
-            animation: "wave4 1.9s ease-in-out infinite"
-          }
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            width: `${d}px`,
-            height: `${Math.floor(r * 0.4)}px`,
-            backgroundColor: "currentColor",
-            borderRadius: "999px",
-            animation: "wave5 2.2s ease-in-out infinite"
-          }
-        }
-      )
-    ] }) })
-  ] });
-}, re = oe(
+), re = oe(
   ({
-    texts: t,
+    texts: e,
     typingSpeed: i = 30,
-    deletingSpeed: r = 15,
-    delayAfterText: l = 800,
+    deletingSpeed: n = 15,
+    delayAfterText: d = 800,
     onSubmit: s,
-    isStreaming: d = !1,
-    className: g = "",
+    isStreaming: l = !1,
+    className: m = "",
     placeholderClassName: T = "",
-    value: o,
-    onChange: b,
-    onFocus: p,
-    onBlur: H,
+    value: r,
+    onChange: x,
+    onFocus: c,
+    onBlur: z,
     onKeyDown: A,
-    onPaste: y,
+    onPaste: k,
     placeholder: F,
-    rows: k = 1,
+    rows: w = 1,
     ...I
   }, R) => {
-    const [w, D] = f(""), [j, u] = f(!1), [C, W] = f(0), [x, S] = f(!1), [v, N] = f(!1), [K, $] = f(!1), [P, Q] = f(!1), _ = U(null), O = R || _, B = t[C], E = o === "" || o === void 0;
-    M(() => {
-      if (!E) return;
-      let n;
-      return x ? (n = setTimeout(() => {
-        S(!1), $(!0), N(!0), Q(!0);
-      }, l), () => clearTimeout(n)) : K ? (n = setTimeout(() => {
-        Q(!1), setTimeout(() => {
-          N(!1), $(!1), u(!0);
+    const [y, D] = u(""), [N, p] = u(!1), [S, P] = u(0), [b, C] = u(!1), [v, W] = u(!1), [O, H] = u(!1), [Q, K] = u(!1), Y = V(null), $ = R || Y, L = e[S], B = r === "" || r === void 0;
+    E(() => {
+      if (!B) return;
+      let a;
+      return b ? (a = setTimeout(() => {
+        C(!1), H(!0), W(!0), K(!0);
+      }, d), () => clearTimeout(a)) : O ? (a = setTimeout(() => {
+        K(!1), setTimeout(() => {
+          W(!1), H(!1), p(!0);
         }, 300);
-      }, 3e3), () => clearTimeout(n)) : (j ? w === "" ? (u(!1), W((m) => (m + 1) % t.length)) : n = setTimeout(() => {
-        D((m) => m.slice(0, -1));
-      }, r) : w === B ? S(!0) : n = setTimeout(() => {
-        D(B.slice(0, w.length + 1));
-      }, i), () => clearTimeout(n));
+      }, 3e3), () => clearTimeout(a)) : (N ? y === "" ? (p(!1), P((h) => (h + 1) % e.length)) : a = setTimeout(() => {
+        D((h) => h.slice(0, -1));
+      }, n) : y === L ? C(!0) : a = setTimeout(() => {
+        D(L.slice(0, y.length + 1));
+      }, i), () => clearTimeout(a));
     }, [
-      w,
-      j,
-      C,
-      x,
-      K,
-      B,
-      t,
+      y,
+      N,
+      S,
+      b,
+      O,
+      L,
+      e,
       i,
-      r,
-      l,
-      E
+      n,
+      d,
+      B
     ]);
-    const a = (n) => {
-      if (n.key === "Tab" && E) {
-        n.preventDefault(), b?.({
-          target: { value: B }
+    const t = (a) => {
+      if (a.key === "Tab" && B) {
+        a.preventDefault(), x?.({
+          target: { value: L }
         });
         return;
       }
-      if (n.key === "Enter") {
-        if (n.shiftKey || (n.preventDefault(), d))
+      if (a.key === "Enter") {
+        if (a.shiftKey || (a.preventDefault(), l))
           return;
-        s?.(n);
+        s?.(a);
       }
-      A?.(n);
+      A?.(a);
     };
-    return /* @__PURE__ */ c("div", { style: { position: "relative", width: "100%" }, children: [
-      E && /* @__PURE__ */ e(
+    return /* @__PURE__ */ g("div", { style: { position: "relative", width: "100%" }, children: [
+      B && /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -1151,7 +972,7 @@ const me = {
             paddingBottom: "0",
             marginTop: "5px"
           },
-          children: /* @__PURE__ */ c(
+          children: /* @__PURE__ */ g(
             "p",
             {
               style: {
@@ -1161,8 +982,8 @@ const me = {
                 ...T ? {} : {}
               },
               children: [
-                w,
-                /* @__PURE__ */ e(
+                y,
+                /* @__PURE__ */ o(
                   "span",
                   {
                     style: {
@@ -1179,8 +1000,8 @@ const me = {
                       marginLeft: "8px",
                       display: "inline-flex",
                       whiteSpace: "nowrap",
-                      opacity: P ? 1 : 0,
-                      transform: P ? "scale(1)" : "scale(0.8)",
+                      opacity: Q ? 1 : 0,
+                      transform: Q ? "scale(1)" : "scale(0.8)",
                       transition: "opacity 0.3s ease, transform 0.3s ease",
                       visibility: v ? "visible" : "hidden",
                       verticalAlign: "middle"
@@ -1193,19 +1014,19 @@ const me = {
           )
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ o(
         G,
         {
-          ref: O,
+          ref: $,
           placeholder: F,
-          style: g ? {} : {},
-          value: o,
-          onFocus: p,
-          onBlur: H,
-          onChange: b,
-          onKeyDown: a,
-          onPaste: y,
-          rows: k,
+          style: m ? {} : {},
+          value: r,
+          onFocus: c,
+          onBlur: z,
+          onChange: x,
+          onKeyDown: t,
+          onPaste: k,
+          rows: w,
           ...I
         }
       )
@@ -1213,59 +1034,22 @@ const me = {
   }
 );
 re.displayName = "TypingTextarea";
-const ke = ({
-  isRecording: t,
-  isTranscribing: i,
-  onVoiceRecording: r
-}) => /* @__PURE__ */ e(
-  J,
-  {
-    size: "icon",
-    variant: "outline",
-    style: {
-      height: "32px",
-      paddingLeft: "8px",
-      paddingRight: "8px",
-      fontSize: "12px",
-      fontWeight: "500",
-      transition: "all 0.2s ease-in-out",
-      ...t && {
-        backgroundColor: "#ef4444",
-        // red-500
-        borderColor: "#ef4444",
-        boxShadow: "0 10px 15px -3px rgba(239, 68, 68, 0.25)",
-        color: "white"
-      },
-      ...i && {
-        backgroundColor: "#3b82f6",
-        // blue-500
-        borderColor: "#3b82f6",
-        boxShadow: "0 10px 15px -3px rgba(59, 130, 246, 0.25)",
-        color: "white"
-      }
-    },
-    onClick: () => {
-      r();
-    },
-    disabled: i,
-    children: /* @__PURE__ */ e(ye, { isRecording: t, isTranscribing: i })
-  }
-), Y = {
+const j = {
   gradient: "linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899)",
   shadow: {
     dark: "rgba(0, 0, 0, 0.2)"
   }
-}, we = (t, i) => {
+}, ye = (e, i) => {
   try {
-    return t ? te(t) || Y : te() || Y;
-  } catch (r) {
-    return console.warn("Theme system error, using fallback:", r), Y;
+    return e ? ee(e) || j : ee() || j;
+  } catch (n) {
+    return console.warn("Theme system error, using fallback:", n), j;
   }
-}, Ie = ({
-  placeholder: t = "Ask anything...",
+}, Te = ({
+  placeholder: e = "Ask anything...",
   onSubmit: i,
-  playgroundUid: r,
-  isSubmitting: l,
+  playgroundUid: n,
+  isSubmitting: d,
   typingTexts: s = [
     "Build me an AI chatbot application using OpenAI API",
     "Build me an ecommerce website using Stripe API",
@@ -1275,154 +1059,154 @@ const ke = ({
     "Build me a SMS notification system using Twilio API",
     "Build me a travel booking platform using Skyscanner API"
   ],
-  shouldFocusOnMount: d = !0,
-  showModelSelector: g = !0,
+  shouldFocusOnMount: l = !0,
+  showModelSelector: m = !0,
   projectUid: T,
-  theme: o,
-  height: b = "auto",
+  theme: r,
+  height: x = "auto",
   // Add default for required height prop
-  deepgramApiKey: p
+  deepgramApiKey: c
 }) => {
-  const [H, A] = f(!0), [y, F] = f(!1), [k, I] = f(!1), [, R] = f(!1), [w, D] = f(null), [j, u] = f(
+  const [z, A] = u(!0), [k, F] = u(!1), [w, I] = u(!1), [, R] = u(!1), [y, D] = u(null), [N, p] = u(
     null
-  ), [C, W] = f(""), x = U(null), S = U([]), v = U(null), [N, K] = f(!1), $ = ne(() => {
+  ), [S, P] = u(""), b = V(null), C = V([]), v = V(null), [W, O] = u(!1), H = ne(() => {
     try {
-      return we(o, r);
-    } catch (a) {
-      return console.warn("Error getting color scheme:", a), Y;
+      return ye(r, n);
+    } catch (t) {
+      return console.warn("Error getting color scheme:", t), j;
     }
-  }, [o, r]);
-  M(() => {
-    K(!0);
-  }, []), M(() => {
-    if (d && v.current && N)
+  }, [r, n]);
+  E(() => {
+    O(!0);
+  }, []), E(() => {
+    if (l && v.current && W)
       try {
         v.current.focus(), v.current.select();
-      } catch (a) {
-        console.warn("Focus error:", a);
+      } catch (t) {
+        console.warn("Focus error:", t);
       }
-  }, [N, d]);
-  const P = () => {
+  }, [W, l]);
+  const Q = () => {
     A(!0);
-  }, Q = () => {
+  }, K = () => {
     A(!0);
-  }, _ = () => {
-    const a = v.current;
-    if (a)
+  }, Y = () => {
+    const t = v.current;
+    if (t)
       try {
-        a.style.height = "auto";
-        const n = Math.min(a.scrollHeight, 200);
-        a.style.height = `${n}px`;
-      } catch (n) {
-        console.warn("Textarea height adjustment error:", n);
+        t.style.height = "auto";
+        const a = Math.min(t.scrollHeight, 200);
+        t.style.height = `${a}px`;
+      } catch (a) {
+        console.warn("Textarea height adjustment error:", a);
       }
   };
-  M(() => {
-    _();
-  }, [C]), M(() => {
-    const a = (n) => {
-      const m = (n.metaKey || n.ctrlKey) && n.key === "/", h = (n.key === "Enter" || n.key === "Escape") && (y || k);
-      m ? (n.preventDefault(), B()) : h && (n.preventDefault(), y && !k && B());
+  E(() => {
+    Y();
+  }, [S]), E(() => {
+    const t = (a) => {
+      const h = (a.metaKey || a.ctrlKey) && a.key === "/", f = (a.key === "Enter" || a.key === "Escape") && (k || w);
+      h ? (a.preventDefault(), L()) : f && (a.preventDefault(), k && !w && L());
     };
-    return document.addEventListener("keydown", a), () => {
-      document.removeEventListener("keydown", a);
+    return document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
     };
-  }, [y, k]), M(() => () => {
-    w && clearTimeout(w), x.current && y && x.current.stop(), R(!1);
-  }, [w, y]);
-  const O = async () => {
-    if (x.current && y)
-      return F(!1), I(!0), w && (clearTimeout(w), D(null)), new Promise((a) => {
-        if (x.current) {
-          let n = !1, m;
-          x.current.ondataavailable = (h) => {
-            h.data.size > 0 && (n = !0, S.current.push(h.data));
-          }, x.current.onstop = async () => {
-            m && clearTimeout(m);
+  }, [k, w]), E(() => () => {
+    y && clearTimeout(y), b.current && k && b.current.stop(), R(!1);
+  }, [y, k]);
+  const $ = async () => {
+    if (b.current && k)
+      return F(!1), I(!0), y && (clearTimeout(y), D(null)), new Promise((t) => {
+        if (b.current) {
+          let a = !1, h;
+          b.current.ondataavailable = (f) => {
+            f.data.size > 0 && (a = !0, C.current.push(f.data));
+          }, b.current.onstop = async () => {
+            h && clearTimeout(h);
             try {
-              if (!n || S.current.length === 0)
+              if (!a || C.current.length === 0)
                 throw new Error("No audio data recorded");
-              const h = new Blob(S.current, {
+              const f = new Blob(C.current, {
                 type: "audio/wav"
               });
-              if (h.size < 1024)
+              if (f.size < 1024)
                 throw new Error("Audio recording too short");
-              const q = new FormData();
-              q.append("audio", h, "recording.wav"), p && q.append("deepgramApiKey", p);
-              const X = await fetch("/api/voice/transcribe", {
+              const _ = new FormData();
+              _.append("audio", f, "recording.wav"), c && _.append("deepgramApiKey", c);
+              const J = await fetch("/api/voice/transcribe", {
                 method: "POST",
-                body: q
+                body: _
               });
-              if (X.ok) {
-                const { transcription: V } = await X.json();
-                if (V && V.trim()) {
-                  const ae = C ? `${C} ${V}` : V;
-                  W(ae.trim()), setTimeout(() => {
+              if (J.ok) {
+                const { transcription: U } = await J.json();
+                if (U && U.trim()) {
+                  const ae = S ? `${S} ${U}` : U;
+                  P(ae.trim()), setTimeout(() => {
                     if (v.current) {
                       v.current.focus();
-                      const Z = v.current.value.length;
-                      v.current.setSelectionRange(Z, Z);
+                      const X = v.current.value.length;
+                      v.current.setSelectionRange(X, X);
                     }
                   }, 100);
                 }
               } else
                 throw new Error("Transcription failed");
-            } catch (h) {
-              console.error("Transcription error:", h), h instanceof Error && (h.message.includes("No audio data") || h.message.includes("too short"));
+            } catch (f) {
+              console.error("Transcription error:", f), f instanceof Error && (f.message.includes("No audio data") || f.message.includes("too short"));
             } finally {
-              S.current = [], x.current = null, u(null), I(!1), R(!1), a();
+              C.current = [], b.current = null, p(null), I(!1), R(!1), t();
             }
-          }, m = setTimeout(() => {
-            console.warn("MediaRecorder stop timeout, forcing cleanup"), S.current = [], x.current = null, u(null), I(!1), R(!1), a();
+          }, h = setTimeout(() => {
+            console.warn("MediaRecorder stop timeout, forcing cleanup"), C.current = [], b.current = null, p(null), I(!1), R(!1), t();
           }, 5e3);
           try {
-            x.current.stop();
-          } catch (h) {
-            console.error("Error stopping MediaRecorder:", h), m && clearTimeout(m), S.current = [], x.current = null, u(null), I(!1), R(!1), a();
+            b.current.stop();
+          } catch (f) {
+            console.error("Error stopping MediaRecorder:", f), h && clearTimeout(h), C.current = [], b.current = null, p(null), I(!1), R(!1), t();
           }
         } else
-          u(null), I(!1), R(!1), a();
+          p(null), I(!1), R(!1), t();
       });
-  }, B = async () => {
-    if (!k)
-      if (y)
-        await O();
+  }, L = async () => {
+    if (!w)
+      if (k)
+        await $();
       else
         try {
           if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
             throw new Error("Browser doesn't support microphone access");
-          const a = await navigator.mediaDevices.getUserMedia({
+          const t = await navigator.mediaDevices.getUserMedia({
             audio: {
               echoCancellation: !0,
               noiseSuppression: !0,
               sampleRate: 44100
             }
-          }), n = new MediaRecorder(a, {
+          }), a = new MediaRecorder(t, {
             mimeType: MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4"
           });
-          x.current = n, S.current = [], n.ondataavailable = (h) => {
-            h.data.size > 0 && S.current.push(h.data);
-          }, n.start(200), F(!0), u(Date.now()), R(!0);
-          const m = setTimeout(async () => {
-            await O();
+          b.current = a, C.current = [], a.ondataavailable = (f) => {
+            f.data.size > 0 && C.current.push(f.data);
+          }, a.start(200), F(!0), p(Date.now()), R(!0);
+          const h = setTimeout(async () => {
+            await $();
           }, 6e4);
-          D(m);
-        } catch (a) {
-          console.error("Microphone access error:", a), a instanceof Error && (a.name === "NotAllowedError" || a.name === "NotFoundError" || a.name === "NotReadableError" || a.name);
+          D(h);
+        } catch (t) {
+          console.error("Microphone access error:", t), t instanceof Error && (t.name === "NotAllowedError" || t.name === "NotFoundError" || t.name === "NotReadableError" || t.name);
         }
-  }, E = (a) => {
-    if (a.preventDefault(), !!C.trim())
+  }, B = (t) => {
+    if (t.preventDefault(), !!S.trim())
       try {
-        if (r) {
-          const n = encodeURIComponent(C.trim()), m = `https://${r}.sampleapp.ai?q=${n}`;
-          window.open(m, "_blank");
+        if (n) {
+          const a = encodeURIComponent(S.trim()), h = `https://${n}.sampleapp.ai?q=${a}`;
+          window.open(h, "_blank");
         }
-        i && i(a);
-      } catch (n) {
-        console.error("Submit error:", n);
+        i && i(t);
+      } catch (a) {
+        console.error("Submit error:", a);
       }
   };
-  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ g(
     "div",
     {
       style: {
@@ -1434,11 +1218,11 @@ const ke = ({
         marginRight: "auto"
       },
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              backgroundColor: $.shadow?.dark || "rgba(0, 0, 0, 0.2)",
+              backgroundColor: H.shadow?.dark || "rgba(0, 0, 0, 0.2)",
               position: "absolute",
               top: "0",
               right: "0",
@@ -1452,11 +1236,11 @@ const ke = ({
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              background: $.gradient || Y.gradient,
+              background: H.gradient || j.gradient,
               backgroundSize: "400% 400%",
               position: "absolute",
               top: "0",
@@ -1468,16 +1252,16 @@ const ke = ({
               filter: "blur(12px)",
               transition: "opacity 0.3s ease-in-out",
               pointerEvents: "none",
-              opacity: H ? "0.8" : "0.4",
+              opacity: z ? "0.8" : "0.4",
               animation: "gradient-bg 5s ease infinite"
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              background: $.gradient || Y.gradient,
+              background: H.gradient || j.gradient,
               backgroundSize: "400% 400%",
               position: "absolute",
               top: "0",
@@ -1488,12 +1272,12 @@ const ke = ({
               zIndex: 1,
               transition: "opacity 0.3s ease-in-out",
               pointerEvents: "none",
-              opacity: H ? "1" : "0.7",
+              opacity: z ? "1" : "0.7",
               animation: "gradient-bg 5s ease infinite"
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
@@ -1508,8 +1292,8 @@ const ke = ({
               paddingTop: "0.5rem",
               paddingBottom: "0.5rem"
             },
-            children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-              /* @__PURE__ */ c(
+            children: /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+              /* @__PURE__ */ g(
                 "div",
                 {
                   style: {
@@ -1522,7 +1306,7 @@ const ke = ({
                     paddingBottom: "4px"
                   },
                   children: [
-                    s.length > 0 ? /* @__PURE__ */ e(
+                    s.length > 0 ? /* @__PURE__ */ o(
                       re,
                       {
                         texts: s,
@@ -1548,26 +1332,26 @@ const ke = ({
                           marginTop: "4px",
                           color: "#f4f4f5",
                           fontFamily: "inherit",
-                          height: b
+                          height: x
                         },
-                        value: C,
-                        onFocus: P,
-                        onBlur: Q,
-                        onChange: (a) => W(a.target.value),
-                        onSubmit: (a) => {
-                          if (y || k) {
-                            a.preventDefault();
+                        value: S,
+                        onFocus: Q,
+                        onBlur: K,
+                        onChange: (t) => P(t.target.value),
+                        onSubmit: (t) => {
+                          if (k || w) {
+                            t.preventDefault();
                             return;
                           }
-                          E(a);
+                          B(t);
                         },
                         rows: 1
                       }
-                    ) : /* @__PURE__ */ e(
+                    ) : /* @__PURE__ */ o(
                       G,
                       {
                         ref: v,
-                        placeholder: t,
+                        placeholder: e,
                         style: {
                           flex: 1,
                           width: "100%",
@@ -1589,56 +1373,46 @@ const ke = ({
                           marginTop: "4px",
                           color: "#f4f4f5",
                           fontFamily: "inherit",
-                          height: b
+                          height: x
                         },
-                        value: C,
-                        onFocus: P,
-                        onBlur: Q,
-                        onChange: (a) => W(a.target.value),
-                        onKeyDown: (a) => {
-                          if (a.key === "Enter") {
-                            if (a.shiftKey)
+                        value: S,
+                        onFocus: Q,
+                        onBlur: K,
+                        onChange: (t) => P(t.target.value),
+                        onKeyDown: (t) => {
+                          if (t.key === "Enter") {
+                            if (t.shiftKey)
                               return;
-                            a.preventDefault(), E(a);
+                            t.preventDefault(), B(t);
                           }
                         },
                         rows: 1
                       }
                     ),
-                    /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "row", gap: "4px" }, children: [
-                      /* @__PURE__ */ e(
-                        ke,
-                        {
-                          isRecording: y,
-                          isTranscribing: k,
-                          onVoiceRecording: B
-                        }
-                      ),
-                      /* @__PURE__ */ e(
-                        J,
-                        {
-                          style: {
-                            height: "32px",
-                            width: "32px"
-                          },
-                          disabled: C.length === 0 || l,
-                          variant: "secondary",
-                          onClick: E,
-                          size: "icon",
-                          children: l ? /* @__PURE__ */ e(
-                            xe,
-                            {
-                              size: 20,
-                              style: { animation: "spin 1s linear infinite" }
-                            }
-                          ) : /* @__PURE__ */ e(be, { style: { width: "20px", height: "20px" } })
-                        }
-                      )
-                    ] })
+                    /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "row", gap: "4px" }, children: /* @__PURE__ */ o(
+                      te,
+                      {
+                        style: {
+                          height: "32px",
+                          width: "32px"
+                        },
+                        disabled: S.length === 0 || d,
+                        variant: "secondary",
+                        onClick: B,
+                        size: "icon",
+                        children: d ? /* @__PURE__ */ o(
+                          be,
+                          {
+                            size: 20,
+                            style: { animation: "spin 1s linear infinite" }
+                          }
+                        ) : /* @__PURE__ */ o(xe, { style: { width: "20px", height: "20px" } })
+                      }
+                    ) })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ o(
                 "div",
                 {
                   style: {
@@ -1648,7 +1422,7 @@ const ke = ({
                     paddingLeft: "8px",
                     paddingRight: "8px"
                   },
-                  children: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: g && /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: m && /* @__PURE__ */ o(
                     "div",
                     {
                       style: { display: "flex", alignItems: "center", gap: "8px" }
@@ -1659,7 +1433,7 @@ const ke = ({
             ] })
           }
         ),
-        /* @__PURE__ */ e("style", { children: `
+        /* @__PURE__ */ o("style", { children: `
         @keyframes gradient-bg {
           0%,
           100% {
@@ -1682,20 +1456,20 @@ const ke = ({
     }
   ) });
 };
-class ve {
+class ke {
   constructor() {
-    this.ModalSearchAndChat = (i, r) => {
-      const l = r || document.body, s = document.createElement("div");
-      s.id = "sampleapp-modal-" + Date.now(), l.appendChild(s);
-      const d = ee.createRoot(s), g = L.createElement(se, {
+    this.ModalSearchAndChat = (i, n) => {
+      const d = n || document.body, s = document.createElement("div");
+      s.id = "sampleapp-modal-" + Date.now(), d.appendChild(s);
+      const l = Z.createRoot(s), m = M.createElement(se, {
         settings: i,
         onClose: () => {
-          d.unmount(), s.remove();
+          l.unmount(), s.remove();
         }
       });
-      return d.render(g), {
+      return l.render(m), {
         unmount: () => {
-          d.unmount(), s.remove();
+          l.unmount(), s.remove();
         },
         show: () => {
           s.style.display = "block";
@@ -1704,11 +1478,11 @@ class ve {
           s.style.display = "none";
         }
       };
-    }, this.ChatButton = (i, r) => {
-      const l = r || this.createButtonContainer(), s = ee.createRoot(l), d = L.createElement(ie, { settings: i });
-      return s.render(d), {
+    }, this.ChatButton = (i, n) => {
+      const d = n || this.createButtonContainer(), s = Z.createRoot(d), l = M.createElement(ie, { settings: i });
+      return s.render(l), {
         unmount: () => {
-          s.unmount(), l.remove();
+          s.unmount(), d.remove();
         }
       };
     };
@@ -1718,14 +1492,14 @@ class ve {
     return i.id = "sampleapp-button-" + Date.now(), document.body.appendChild(i), i;
   }
 }
-const Ce = new ve();
-typeof window < "u" && (window.SampleApp = Ce);
+const we = new ke();
+typeof window < "u" && (window.SampleApp = we);
 export {
-  Ie as ChatBar,
+  Te as ChatBar,
   ie as ChatButton,
-  Re as DEFAULT_THEME,
+  Ce as DEFAULT_THEME,
   se as ModalSearchAndChat,
-  Ce as default,
-  te as getTheme,
+  we as default,
+  ee as getTheme,
   me as themes
 };