@sampleapp.ai/sdk 1.0.26 → 1.0.27

package/dist/index.es.js

@@ -3,11 +3,11 @@ import { useState as f, useEffect as M, forwardRef as oe, useRef as U, useMemo a
 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, d] = f(!1), s = () => {
-    const l = new CustomEvent("chatButtonClick", {
+  const [r, l] = f(!1), s = () => {
+    const d = new CustomEvent("chatButtonClick", {
       detail: { settings: t }
     });
-    document.dispatchEvent(l), i?.();
+    document.dispatchEvent(d), i?.();
   };
   return /* @__PURE__ */ c(
     "button",
@@ -44,11 +44,11 @@ const ie = ({ settings: t, onClick: i }) => {
         outline: "none",
         userSelect: "none"
       },
-      onMouseEnter: () => d(!0),
-      onMouseLeave: () => d(!1),
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
       onClick: s,
-      onFocus: () => d(!0),
-      onBlur: () => d(!1),
+      onFocus: () => l(!0),
+      onBlur: () => l(!1),
       children: [
         t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ e(
           "img",
@@ -62,8 +62,8 @@ const ie = ({ settings: t, onClick: i }) => {
               objectFit: "cover",
               flexShrink: 0
             },
-            onError: (l) => {
-              l.currentTarget.style.display = "none";
+            onError: (d) => {
+              d.currentTarget.style.display = "none";
             }
           }
         ),
@@ -75,17 +75,17 @@ const ie = ({ settings: t, onClick: i }) => {
   settings: t,
   onClose: i
 }) => {
-  const [r, d] = f(!0), [s, l] = f(""), h = () => {
-    d(!1), i?.();
-  }, C = (n) => {
-    l(n);
+  const [r, l] = f(!0), [s, d] = f(""), g = () => {
+    l(!1), i?.();
+  }, T = (o) => {
+    d(o);
   };
   return M(() => {
-    const n = (b) => {
-      b.key === "Escape" && h();
+    const o = (b) => {
+      b.key === "Escape" && g();
     };
     if (r)
-      return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+      return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
   }, [r]), M(() => {
     if (r)
       return document.body.style.overflow = "hidden", () => {
@@ -106,7 +106,7 @@ const ie = ({ settings: t, onClick: i }) => {
           zIndex: 999,
           animation: "fadeIn 0.2s ease-out"
         },
-        onClick: h
+        onClick: g
       }
     ),
     /* @__PURE__ */ c(
@@ -128,7 +128,7 @@ 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: (n) => n.stopPropagation(),
+        onClick: (o) => o.stopPropagation(),
         children: [
           /* @__PURE__ */ c(
             "div",
@@ -154,8 +154,8 @@ const ie = ({ settings: t, onClick: i }) => {
                         borderRadius: "50%",
                         objectFit: "cover"
                       },
-                      onError: (n) => {
-                        n.currentTarget.style.display = "none";
+                      onError: (o) => {
+                        o.currentTarget.style.display = "none";
                       }
                     }
                   ),
@@ -176,7 +176,7 @@ const ie = ({ settings: t, onClick: i }) => {
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: h,
+                    onClick: g,
                     style: {
                       background: "none",
                       border: "none",
@@ -190,11 +190,11 @@ const ie = ({ settings: t, onClick: i }) => {
                       justifyContent: "center",
                       transition: "all 0.15s ease"
                     },
-                    onMouseEnter: (n) => {
-                      n.currentTarget.style.backgroundColor = "#f1f5f9", n.currentTarget.style.color = "#334155";
+                    onMouseEnter: (o) => {
+                      o.currentTarget.style.backgroundColor = "#f1f5f9", o.currentTarget.style.color = "#334155";
                     },
-                    onMouseLeave: (n) => {
-                      n.currentTarget.style.backgroundColor = "transparent", n.currentTarget.style.color = "#64748b";
+                    onMouseLeave: (o) => {
+                      o.currentTarget.style.backgroundColor = "transparent", o.currentTarget.style.color = "#64748b";
                     },
                     children: "×"
                   }
@@ -218,7 +218,7 @@ const ie = ({ settings: t, onClick: i }) => {
                       type: "text",
                       placeholder: "Ask a question...",
                       value: s,
-                      onChange: (n) => l(n.target.value),
+                      onChange: (o) => d(o.target.value),
                       style: {
                         width: "100%",
                         padding: "14px 16px",
@@ -231,11 +231,11 @@ const ie = ({ settings: t, onClick: i }) => {
                         transition: "border-color 0.15s ease",
                         backgroundColor: "#fafafa"
                       },
-                      onFocus: (n) => {
-                        n.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, n.currentTarget.style.backgroundColor = "white";
+                      onFocus: (o) => {
+                        o.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, o.currentTarget.style.backgroundColor = "white";
                       },
-                      onBlur: (n) => {
-                        n.currentTarget.style.borderColor = "#e2e8f0", n.currentTarget.style.backgroundColor = "#fafafa";
+                      onBlur: (o) => {
+                        o.currentTarget.style.borderColor = "#e2e8f0", o.currentTarget.style.backgroundColor = "#fafafa";
                       },
                       autoFocus: !0
                     }
@@ -258,11 +258,11 @@ const ie = ({ settings: t, onClick: i }) => {
                         fontWeight: "500",
                         transition: "opacity 0.15s ease"
                       },
-                      onMouseEnter: (n) => {
-                        n.currentTarget.style.opacity = "0.9";
+                      onMouseEnter: (o) => {
+                        o.currentTarget.style.opacity = "0.9";
                       },
-                      onMouseLeave: (n) => {
-                        n.currentTarget.style.opacity = "1";
+                      onMouseLeave: (o) => {
+                        o.currentTarget.style.opacity = "1";
                       },
                       onClick: () => {
                         console.log("Search for:", s);
@@ -290,10 +290,10 @@ const ie = ({ settings: t, onClick: i }) => {
                     {
                       style: { display: "flex", flexDirection: "column", gap: "8px" },
                       children: t.aiChatSettings.exampleQuestions.map(
-                        (n, b) => /* @__PURE__ */ e(
+                        (o, b) => /* @__PURE__ */ e(
                           "button",
                           {
-                            onClick: () => C(n),
+                            onClick: () => T(o),
                             style: {
                               display: "block",
                               width: "100%",
@@ -309,13 +309,13 @@ const ie = ({ settings: t, onClick: i }) => {
                               transition: "all 0.15s ease",
                               lineHeight: "1.4"
                             },
-                            onMouseEnter: (u) => {
-                              u.currentTarget.style.backgroundColor = "#f8fafc", u.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, u.currentTarget.style.transform = "translateY(-1px)", u.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
+                            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)";
                             },
-                            onMouseLeave: (u) => {
-                              u.currentTarget.style.backgroundColor = "white", u.currentTarget.style.borderColor = "#e2e8f0", u.currentTarget.style.transform = "translateY(0)", u.currentTarget.style.boxShadow = "none";
+                            onMouseLeave: (p) => {
+                              p.currentTarget.style.backgroundColor = "white", p.currentTarget.style.borderColor = "#e2e8f0", p.currentTarget.style.transform = "translateY(0)", p.currentTarget.style.boxShadow = "none";
                             },
-                            children: n
+                            children: o
                           },
                           b
                         )
@@ -367,17 +367,17 @@ const ie = ({ settings: t, onClick: i }) => {
 }, le = {
   borderColor: "#0f172a",
   boxShadow: "0 0 0 1px #0f172a"
-}, ce = "#64748b", q = L.forwardRef(
-  ({ style: t, onFocus: i, onBlur: r, ...d }, s) => {
-    const [l, h] = L.useState(!1), C = {
+}, ce = "#64748b", G = L.forwardRef(
+  ({ style: t, onFocus: i, onBlur: r, ...l }, s) => {
+    const [d, g] = L.useState(!1), T = {
       ...de,
-      ...l ? le : {},
+      ...d ? le : {},
       ...t,
       // Handle placeholder color via CSS custom property
       // @ts-ignore - CSS custom properties are valid
       "--placeholder-color": ce
     };
-    return d.disabled && (C.cursor = "not-allowed", C.opacity = 0.5), /* @__PURE__ */ c(z, { children: [
+    return l.disabled && (T.cursor = "not-allowed", T.opacity = 0.5), /* @__PURE__ */ c(z, { children: [
       /* @__PURE__ */ e("style", { children: `
             .textarea-with-placeholder::placeholder {
               color: var(--placeholder-color);
@@ -387,21 +387,21 @@ const ie = ({ settings: t, onClick: i }) => {
         "textarea",
         {
           className: "textarea-with-placeholder",
-          style: C,
+          style: T,
           ref: s,
-          onFocus: (u) => {
-            h(!0), i?.(u);
+          onFocus: (p) => {
+            g(!0), i?.(p);
           },
-          onBlur: (u) => {
-            h(!1), r?.(u);
+          onBlur: (p) => {
+            g(!1), r?.(p);
           },
-          ...d
+          ...l
         }
       )
     ] });
   }
 );
-q.displayName = "Textarea";
+G.displayName = "Textarea";
 const pe = {
   display: "inline-flex",
   alignItems: "center",
@@ -528,41 +528,41 @@ const pe = {
     default:
       return i;
   }
-}, G = L.forwardRef(
+}, J = L.forwardRef(
   ({
     variant: t = "default",
     size: i = "default",
     asChild: r = !1,
-    style: d,
+    style: l,
     onMouseEnter: s,
-    onMouseLeave: l,
-    onFocus: h,
-    onBlur: C,
-    onClick: n,
+    onMouseLeave: d,
+    onFocus: g,
+    onBlur: T,
+    onClick: o,
     ...b
-  }, u) => {
+  }, p) => {
     const [H, A] = L.useState(!1), [y, F] = L.useState(!1), k = {
       ...pe,
       ...ue[t],
       ...fe[i],
       ...H ? he(t) : {},
       ...y ? ge(t) : {},
-      ...d
+      ...l
       // Allow style override
     };
     b.disabled && (k.pointerEvents = "none", k.opacity = 0.5, k.cursor = "not-allowed");
-    const I = (p) => {
-      A(!0), s?.(p);
-    }, R = (p) => {
-      A(!1), l?.(p);
-    }, w = (p) => {
-      F(!0), h?.(p);
-    }, D = (p) => {
-      F(!1), C?.(p);
-    }, j = (p) => {
+    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) => {
       setTimeout(() => {
-        p.currentTarget && p.currentTarget.blur();
-      }, 150), n?.(p);
+        u.currentTarget && u.currentTarget.blur();
+      }, 150), o?.(u);
     };
     return r && console.warn(
       "asChild prop is not supported in the inline CSS version of Button."
@@ -570,7 +570,7 @@ const pe = {
       "button",
       {
         style: k,
-        ref: u,
+        ref: p,
         onMouseEnter: I,
         onMouseLeave: R,
         onFocus: w,
@@ -581,7 +581,7 @@ const pe = {
     );
   }
 );
-G.displayName = "Button";
+J.displayName = "Button";
 const me = {
   ocean: {
     primary: "#1ca0fb",
@@ -895,7 +895,7 @@ const me = {
   isRecording: t = !1,
   isTranscribing: i = !1,
   size: r = 20,
-  style: d = {}
+  style: l = {}
 }) => {
   const s = {
     position: "relative",
@@ -904,7 +904,7 @@ const me = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    ...d
+    ...l
   };
   if (i)
     return /* @__PURE__ */ c(z, { children: [
@@ -949,7 +949,7 @@ const me = {
         }
       ) })
     ] });
-  const l = Math.max(1, Math.floor(r * 0.075)), h = Math.max(1, Math.floor(r * 0.1));
+  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 {
@@ -1007,12 +1007,12 @@ const me = {
             }
           }
         ` }),
-    /* @__PURE__ */ e("div", { style: s, children: /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: `${h}px` }, children: [
+    /* @__PURE__ */ e("div", { style: s, children: /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: `${g}px` }, children: [
       /* @__PURE__ */ e(
         "div",
         {
           style: {
-            width: `${l}px`,
+            width: `${d}px`,
             height: `${Math.floor(r * 0.4)}px`,
             backgroundColor: "currentColor",
             borderRadius: "999px",
@@ -1024,7 +1024,7 @@ const me = {
         "div",
         {
           style: {
-            width: `${l}px`,
+            width: `${d}px`,
             height: `${Math.floor(r * 0.6)}px`,
             backgroundColor: "currentColor",
             borderRadius: "999px",
@@ -1036,7 +1036,7 @@ const me = {
         "div",
         {
           style: {
-            width: `${l}px`,
+            width: `${d}px`,
             height: `${Math.floor(r * 0.8)}px`,
             backgroundColor: "currentColor",
             borderRadius: "999px",
@@ -1048,7 +1048,7 @@ const me = {
         "div",
         {
           style: {
-            width: `${l}px`,
+            width: `${d}px`,
             height: `${Math.floor(r * 0.6)}px`,
             backgroundColor: "currentColor",
             borderRadius: "999px",
@@ -1060,7 +1060,7 @@ const me = {
         "div",
         {
           style: {
-            width: `${l}px`,
+            width: `${d}px`,
             height: `${Math.floor(r * 0.4)}px`,
             backgroundColor: "currentColor",
             borderRadius: "999px",
@@ -1075,14 +1075,14 @@ const me = {
     texts: t,
     typingSpeed: i = 30,
     deletingSpeed: r = 15,
-    delayAfterText: d = 800,
+    delayAfterText: l = 800,
     onSubmit: s,
-    isStreaming: l = !1,
-    className: h = "",
-    placeholderClassName: C = "",
-    value: n,
+    isStreaming: d = !1,
+    className: g = "",
+    placeholderClassName: T = "",
+    value: o,
     onChange: b,
-    onFocus: u,
+    onFocus: p,
     onBlur: H,
     onKeyDown: A,
     onPaste: y,
@@ -1090,47 +1090,47 @@ const me = {
     rows: k = 1,
     ...I
   }, R) => {
-    const [w, D] = f(""), [j, p] = f(!1), [S, W] = f(0), [x, T] = f(!1), [v, N] = f(!1), [K, $] = f(!1), [P, Q] = f(!1), _ = U(null), O = R || _, B = t[S], E = n === "" || n === void 0;
+    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 o;
-      return x ? (o = setTimeout(() => {
-        T(!1), $(!0), N(!0), Q(!0);
-      }, d), () => clearTimeout(o)) : K ? (o = setTimeout(() => {
+      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), p(!0);
+          N(!1), $(!1), u(!0);
         }, 300);
-      }, 3e3), () => clearTimeout(o)) : (j ? w === "" ? (p(!1), W((m) => (m + 1) % t.length)) : o = setTimeout(() => {
+      }, 3e3), () => clearTimeout(n)) : (j ? w === "" ? (u(!1), W((m) => (m + 1) % t.length)) : n = setTimeout(() => {
         D((m) => m.slice(0, -1));
-      }, r) : w === B ? T(!0) : o = setTimeout(() => {
+      }, r) : w === B ? S(!0) : n = setTimeout(() => {
         D(B.slice(0, w.length + 1));
-      }, i), () => clearTimeout(o));
+      }, i), () => clearTimeout(n));
     }, [
       w,
       j,
-      S,
+      C,
       x,
       K,
       B,
       t,
       i,
       r,
-      d,
+      l,
       E
     ]);
-    const a = (o) => {
-      if (o.key === "Tab" && E) {
-        o.preventDefault(), b?.({
+    const a = (n) => {
+      if (n.key === "Tab" && E) {
+        n.preventDefault(), b?.({
           target: { value: B }
         });
         return;
       }
-      if (o.key === "Enter") {
-        if (o.shiftKey || (o.preventDefault(), l))
+      if (n.key === "Enter") {
+        if (n.shiftKey || (n.preventDefault(), d))
           return;
-        s?.(o);
+        s?.(n);
       }
-      A?.(o);
+      A?.(n);
     };
     return /* @__PURE__ */ c("div", { style: { position: "relative", width: "100%" }, children: [
       E && /* @__PURE__ */ e(
@@ -1158,7 +1158,7 @@ const me = {
                 color: "#a1a1aa",
                 fontWeight: "500",
                 lineHeight: "1.25",
-                ...C ? {} : {}
+                ...T ? {} : {}
               },
               children: [
                 w,
@@ -1194,13 +1194,13 @@ const me = {
         }
       ),
       /* @__PURE__ */ e(
-        q,
+        G,
         {
           ref: O,
           placeholder: F,
-          style: h ? {} : {},
-          value: n,
-          onFocus: u,
+          style: g ? {} : {},
+          value: o,
+          onFocus: p,
           onBlur: H,
           onChange: b,
           onKeyDown: a,
@@ -1218,7 +1218,7 @@ const ke = ({
   isTranscribing: i,
   onVoiceRecording: r
 }) => /* @__PURE__ */ e(
-  G,
+  J,
   {
     size: "icon",
     variant: "outline",
@@ -1264,10 +1264,9 @@ const ke = ({
 }, Ie = ({
   placeholder: t = "Ask anything...",
   onSubmit: i,
-  hasPendingEnv: r,
-  playgroundUid: d,
-  isSubmitting: s,
-  typingTexts: l = [
+  playgroundUid: r,
+  isSubmitting: l,
+  typingTexts: s = [
     "Build me an AI chatbot application using OpenAI API",
     "Build me an ecommerce website using Stripe API",
     "Build me a price tracking tool using AgentQL API",
@@ -1276,32 +1275,33 @@ const ke = ({
     "Build me a SMS notification system using Twilio API",
     "Build me a travel booking platform using Skyscanner API"
   ],
-  shouldFocusOnMount: h = !0,
-  showModelSelector: C = !0,
-  projectUid: n,
-  theme: b,
-  height: u = "auto"
+  shouldFocusOnMount: d = !0,
+  showModelSelector: g = !0,
+  projectUid: T,
+  theme: o,
+  height: b = "auto",
   // Add default for required height prop
+  deepgramApiKey: p
 }) => {
-  const [H, A] = f(!0), [y, F] = f(!1), [k, I] = f(!1), [, R] = f(!1), [w, D] = f(null), [j, p] = f(
+  const [H, A] = f(!0), [y, F] = f(!1), [k, I] = f(!1), [, R] = f(!1), [w, D] = f(null), [j, u] = f(
     null
-  ), [S, W] = f(""), x = U(null), T = U([]), v = U(null), [N, K] = f(!1), $ = ne(() => {
+  ), [C, W] = f(""), x = U(null), S = U([]), v = U(null), [N, K] = f(!1), $ = ne(() => {
     try {
-      return we(b, d);
+      return we(o, r);
     } catch (a) {
       return console.warn("Error getting color scheme:", a), Y;
     }
-  }, [b, d]);
+  }, [o, r]);
   M(() => {
     K(!0);
   }, []), M(() => {
-    if (h && v.current && N)
+    if (d && v.current && N)
       try {
         v.current.focus(), v.current.select();
       } catch (a) {
         console.warn("Focus error:", a);
       }
-  }, [N, h]);
+  }, [N, d]);
   const P = () => {
     A(!0);
   }, Q = () => {
@@ -1311,18 +1311,18 @@ const ke = ({
     if (a)
       try {
         a.style.height = "auto";
-        const o = Math.min(a.scrollHeight, 200);
-        a.style.height = `${o}px`;
-      } catch (o) {
-        console.warn("Textarea height adjustment error:", o);
+        const n = Math.min(a.scrollHeight, 200);
+        a.style.height = `${n}px`;
+      } catch (n) {
+        console.warn("Textarea height adjustment error:", n);
       }
   };
   M(() => {
     _();
-  }, [S]), M(() => {
-    const a = (o) => {
-      const m = (o.metaKey || o.ctrlKey) && o.key === "/", g = (o.key === "Enter" || o.key === "Escape") && (y || k);
-      m ? (o.preventDefault(), B()) : g && (o.preventDefault(), y && !k && B());
+  }, [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());
     };
     return document.addEventListener("keydown", a), () => {
       document.removeEventListener("keydown", a);
@@ -1334,29 +1334,29 @@ const ke = ({
     if (x.current && y)
       return F(!1), I(!0), w && (clearTimeout(w), D(null)), new Promise((a) => {
         if (x.current) {
-          let o = !1, m;
-          x.current.ondataavailable = (g) => {
-            g.data.size > 0 && (o = !0, T.current.push(g.data));
+          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);
             try {
-              if (!o || T.current.length === 0)
+              if (!n || S.current.length === 0)
                 throw new Error("No audio data recorded");
-              const g = new Blob(T.current, {
+              const h = new Blob(S.current, {
                 type: "audio/wav"
               });
-              if (g.size < 1024)
+              if (h.size < 1024)
                 throw new Error("Audio recording too short");
-              const J = new FormData();
-              J.append("audio", g, "recording.wav");
+              const q = new FormData();
+              q.append("audio", h, "recording.wav"), p && q.append("deepgramApiKey", p);
               const X = await fetch("/api/voice/transcribe", {
                 method: "POST",
-                body: J
+                body: q
               });
               if (X.ok) {
                 const { transcription: V } = await X.json();
                 if (V && V.trim()) {
-                  const ae = S ? `${S} ${V}` : V;
+                  const ae = C ? `${C} ${V}` : V;
                   W(ae.trim()), setTimeout(() => {
                     if (v.current) {
                       v.current.focus();
@@ -1367,21 +1367,21 @@ const ke = ({
                 }
               } else
                 throw new Error("Transcription failed");
-            } catch (g) {
-              console.error("Transcription error:", g), g instanceof Error && (g.message.includes("No audio data") || g.message.includes("too short"));
+            } catch (h) {
+              console.error("Transcription error:", h), h instanceof Error && (h.message.includes("No audio data") || h.message.includes("too short"));
             } finally {
-              T.current = [], x.current = null, p(null), I(!1), R(!1), a();
+              S.current = [], x.current = null, u(null), I(!1), R(!1), a();
             }
           }, m = setTimeout(() => {
-            console.warn("MediaRecorder stop timeout, forcing cleanup"), T.current = [], x.current = null, p(null), I(!1), R(!1), a();
+            console.warn("MediaRecorder stop timeout, forcing cleanup"), S.current = [], x.current = null, u(null), I(!1), R(!1), a();
           }, 5e3);
           try {
             x.current.stop();
-          } catch (g) {
-            console.error("Error stopping MediaRecorder:", g), m && clearTimeout(m), T.current = [], x.current = null, p(null), I(!1), R(!1), a();
+          } catch (h) {
+            console.error("Error stopping MediaRecorder:", h), m && clearTimeout(m), S.current = [], x.current = null, u(null), I(!1), R(!1), a();
           }
         } else
-          p(null), I(!1), R(!1), a();
+          u(null), I(!1), R(!1), a();
       });
   }, B = async () => {
     if (!k)
@@ -1397,12 +1397,12 @@ const ke = ({
               noiseSuppression: !0,
               sampleRate: 44100
             }
-          }), o = new MediaRecorder(a, {
+          }), n = new MediaRecorder(a, {
             mimeType: MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4"
           });
-          x.current = o, T.current = [], o.ondataavailable = (g) => {
-            g.data.size > 0 && T.current.push(g.data);
-          }, o.start(200), F(!0), p(Date.now()), R(!0);
+          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();
           }, 6e4);
@@ -1411,15 +1411,15 @@ const ke = ({
           console.error("Microphone access error:", a), a instanceof Error && (a.name === "NotAllowedError" || a.name === "NotFoundError" || a.name === "NotReadableError" || a.name);
         }
   }, E = (a) => {
-    if (a.preventDefault(), !!S.trim())
+    if (a.preventDefault(), !!C.trim())
       try {
-        if (d) {
-          const o = encodeURIComponent(S.trim()), m = `https://${d}.sampleapp.ai?q=${o}`;
+        if (r) {
+          const n = encodeURIComponent(C.trim()), m = `https://${r}.sampleapp.ai?q=${n}`;
           window.open(m, "_blank");
         }
         i && i(a);
-      } catch (o) {
-        console.error("Submit error:", o);
+      } catch (n) {
+        console.error("Submit error:", n);
       }
   };
   return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ c(
@@ -1522,10 +1522,10 @@ const ke = ({
                     paddingBottom: "4px"
                   },
                   children: [
-                    l.length > 0 ? /* @__PURE__ */ e(
+                    s.length > 0 ? /* @__PURE__ */ e(
                       re,
                       {
-                        texts: l,
+                        texts: s,
                         ref: v,
                         style: {
                           flex: 1,
@@ -1547,9 +1547,10 @@ const ke = ({
                           maxHeight: "192px",
                           marginTop: "4px",
                           color: "#f4f4f5",
-                          fontFamily: "inherit"
+                          fontFamily: "inherit",
+                          height: b
                         },
-                        value: S,
+                        value: C,
                         onFocus: P,
                         onBlur: Q,
                         onChange: (a) => W(a.target.value),
@@ -1563,7 +1564,7 @@ const ke = ({
                         rows: 1
                       }
                     ) : /* @__PURE__ */ e(
-                      q,
+                      G,
                       {
                         ref: v,
                         placeholder: t,
@@ -1587,9 +1588,10 @@ const ke = ({
                           maxHeight: "192px",
                           marginTop: "4px",
                           color: "#f4f4f5",
-                          fontFamily: "inherit"
+                          fontFamily: "inherit",
+                          height: b
                         },
-                        value: S,
+                        value: C,
                         onFocus: P,
                         onBlur: Q,
                         onChange: (a) => W(a.target.value),
@@ -1613,17 +1615,17 @@ const ke = ({
                         }
                       ),
                       /* @__PURE__ */ e(
-                        G,
+                        J,
                         {
                           style: {
                             height: "32px",
                             width: "32px"
                           },
-                          disabled: S.length === 0 || s || r,
+                          disabled: C.length === 0 || l,
                           variant: "secondary",
                           onClick: E,
                           size: "icon",
-                          children: s ? /* @__PURE__ */ e(
+                          children: l ? /* @__PURE__ */ e(
                             xe,
                             {
                               size: 20,
@@ -1646,7 +1648,7 @@ const ke = ({
                     paddingLeft: "8px",
                     paddingRight: "8px"
                   },
-                  children: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: C && /* @__PURE__ */ e(
+                  children: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: g && /* @__PURE__ */ e(
                     "div",
                     {
                       style: { display: "flex", alignItems: "center", gap: "8px" }
@@ -1683,17 +1685,17 @@ const ke = ({
 class ve {
   constructor() {
     this.ModalSearchAndChat = (i, r) => {
-      const d = r || document.body, s = document.createElement("div");
-      s.id = "sampleapp-modal-" + Date.now(), d.appendChild(s);
-      const l = ee.createRoot(s), h = L.createElement(se, {
+      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, {
         settings: i,
         onClose: () => {
-          l.unmount(), s.remove();
+          d.unmount(), s.remove();
         }
       });
-      return l.render(h), {
+      return d.render(g), {
         unmount: () => {
-          l.unmount(), s.remove();
+          d.unmount(), s.remove();
         },
         show: () => {
           s.style.display = "block";
@@ -1703,10 +1705,10 @@ class ve {
         }
       };
     }, this.ChatButton = (i, r) => {
-      const d = r || this.createButtonContainer(), s = ee.createRoot(d), l = L.createElement(ie, { settings: i });
-      return s.render(l), {
+      const l = r || this.createButtonContainer(), s = ee.createRoot(l), d = L.createElement(ie, { settings: i });
+      return s.render(d), {
         unmount: () => {
-          s.unmount(), d.remove();
+          s.unmount(), l.remove();
         }
       };
     };