@sampleapp.ai/sdk 1.0.24 → 1.0.26

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import * as m from "react";
-import { useState as u, useEffect as y } from "react";
-import * as g from "react-dom/client";
-import { jsxs as d, jsx as s, Fragment as h } from "react/jsx-runtime";
-const x = ({ settings: t, onClick: a }) => {
-  const [r, i] = u(!1), o = () => {
-    const n = new CustomEvent("chatButtonClick", {
+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, d] = f(!1), s = () => {
+    const l = new CustomEvent("chatButtonClick", {
       detail: { settings: t }
     });
-    document.dispatchEvent(n), a?.();
+    document.dispatchEvent(l), i?.();
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "button",
     {
       style: {
@@ -44,13 +44,13 @@ const x = ({ settings: t, onClick: a }) => {
         outline: "none",
         userSelect: "none"
       },
-      onMouseEnter: () => i(!0),
-      onMouseLeave: () => i(!1),
-      onClick: o,
-      onFocus: () => i(!0),
-      onBlur: () => i(!1),
+      onMouseEnter: () => d(!0),
+      onMouseLeave: () => d(!1),
+      onClick: s,
+      onFocus: () => d(!0),
+      onBlur: () => d(!1),
       children: [
-        t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ s(
+        t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ e(
           "img",
           {
             src: t.aiChatSettings.aiAssistantAvatar,
@@ -62,8 +62,8 @@ const x = ({ settings: t, onClick: a }) => {
               objectFit: "cover",
               flexShrink: 0
             },
-            onError: (n) => {
-              n.currentTarget.style.display = "none";
+            onError: (l) => {
+              l.currentTarget.style.display = "none";
             }
           }
         ),
@@ -71,28 +71,28 @@ const x = ({ settings: t, onClick: a }) => {
       ]
     }
   );
-}, b = ({
+}, se = ({
   settings: t,
-  onClose: a
+  onClose: i
 }) => {
-  const [r, i] = u(!0), [o, n] = u(""), c = () => {
-    i(!1), a?.();
-  }, f = (e) => {
-    n(e);
+  const [r, d] = f(!0), [s, l] = f(""), h = () => {
+    d(!1), i?.();
+  }, C = (n) => {
+    l(n);
   };
-  return y(() => {
-    const e = (p) => {
-      p.key === "Escape" && c();
+  return M(() => {
+    const n = (b) => {
+      b.key === "Escape" && h();
     };
     if (r)
-      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [r]), y(() => {
+      return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [r]), M(() => {
     if (r)
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = "";
       };
-  }, [r]), r ? /* @__PURE__ */ d(h, { children: [
-    /* @__PURE__ */ s(
+  }, [r]), r ? /* @__PURE__ */ c(z, { children: [
+    /* @__PURE__ */ e(
       "div",
       {
         style: {
@@ -106,10 +106,10 @@ const x = ({ settings: t, onClick: a }) => {
           zIndex: 999,
           animation: "fadeIn 0.2s ease-out"
         },
-        onClick: c
+        onClick: h
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -128,9 +128,9 @@ const x = ({ settings: t, onClick: a }) => {
           fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
           animation: "slideIn 0.3s ease-out"
         },
-        onClick: (e) => e.stopPropagation(),
+        onClick: (n) => n.stopPropagation(),
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "div",
             {
               style: {
@@ -142,8 +142,8 @@ const x = ({ settings: t, onClick: a }) => {
                 background: `linear-gradient(135deg, ${t.baseSettings.primaryBrandColor}10, ${t.baseSettings.primaryBrandColor}05)`
               },
               children: [
-                /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                  t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ s(
+                /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                  t.aiChatSettings?.aiAssistantAvatar && /* @__PURE__ */ e(
                     "img",
                     {
                       src: t.aiChatSettings.aiAssistantAvatar,
@@ -154,12 +154,12 @@ const x = ({ settings: t, onClick: a }) => {
                         borderRadius: "50%",
                         objectFit: "cover"
                       },
-                      onError: (e) => {
-                        e.currentTarget.style.display = "none";
+                      onError: (n) => {
+                        n.currentTarget.style.display = "none";
                       }
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ e(
                     "h3",
                     {
                       style: {
@@ -173,10 +173,10 @@ const x = ({ settings: t, onClick: a }) => {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: c,
+                    onClick: h,
                     style: {
                       background: "none",
                       border: "none",
@@ -190,11 +190,11 @@ const x = ({ settings: t, onClick: a }) => {
                       justifyContent: "center",
                       transition: "all 0.15s ease"
                     },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.backgroundColor = "#f1f5f9", e.currentTarget.style.color = "#334155";
+                    onMouseEnter: (n) => {
+                      n.currentTarget.style.backgroundColor = "#f1f5f9", n.currentTarget.style.color = "#334155";
                     },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "#64748b";
+                    onMouseLeave: (n) => {
+                      n.currentTarget.style.backgroundColor = "transparent", n.currentTarget.style.color = "#64748b";
                     },
                     children: "×"
                   }
@@ -202,7 +202,7 @@ const x = ({ settings: t, onClick: a }) => {
               ]
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "div",
             {
               style: {
@@ -211,14 +211,14 @@ const x = ({ settings: t, onClick: a }) => {
                 overflowY: "auto"
               },
               children: [
-                /* @__PURE__ */ d("div", { style: { position: "relative", marginBottom: "24px" }, children: [
-                  /* @__PURE__ */ s(
+                /* @__PURE__ */ c("div", { style: { position: "relative", marginBottom: "24px" }, children: [
+                  /* @__PURE__ */ e(
                     "input",
                     {
                       type: "text",
                       placeholder: "Ask a question...",
-                      value: o,
-                      onChange: (e) => n(e.target.value),
+                      value: s,
+                      onChange: (n) => l(n.target.value),
                       style: {
                         width: "100%",
                         padding: "14px 16px",
@@ -231,16 +231,16 @@ const x = ({ settings: t, onClick: a }) => {
                         transition: "border-color 0.15s ease",
                         backgroundColor: "#fafafa"
                       },
-                      onFocus: (e) => {
-                        e.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, e.currentTarget.style.backgroundColor = "white";
+                      onFocus: (n) => {
+                        n.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, n.currentTarget.style.backgroundColor = "white";
                       },
-                      onBlur: (e) => {
-                        e.currentTarget.style.borderColor = "#e2e8f0", e.currentTarget.style.backgroundColor = "#fafafa";
+                      onBlur: (n) => {
+                        n.currentTarget.style.borderColor = "#e2e8f0", n.currentTarget.style.backgroundColor = "#fafafa";
                       },
                       autoFocus: !0
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ e(
                     "button",
                     {
                       style: {
@@ -258,21 +258,21 @@ const x = ({ settings: t, onClick: a }) => {
                         fontWeight: "500",
                         transition: "opacity 0.15s ease"
                       },
-                      onMouseEnter: (e) => {
-                        e.currentTarget.style.opacity = "0.9";
+                      onMouseEnter: (n) => {
+                        n.currentTarget.style.opacity = "0.9";
                       },
-                      onMouseLeave: (e) => {
-                        e.currentTarget.style.opacity = "1";
+                      onMouseLeave: (n) => {
+                        n.currentTarget.style.opacity = "1";
                       },
                       onClick: () => {
-                        console.log("Search for:", o);
+                        console.log("Search for:", s);
                       },
                       children: "Search"
                     }
                   )
                 ] }),
-                t.aiChatSettings?.exampleQuestions && t.aiChatSettings.exampleQuestions.length > 0 && /* @__PURE__ */ d("div", { children: [
-                  /* @__PURE__ */ s(
+                t.aiChatSettings?.exampleQuestions && t.aiChatSettings.exampleQuestions.length > 0 && /* @__PURE__ */ c("div", { children: [
+                  /* @__PURE__ */ e(
                     "p",
                     {
                       style: {
@@ -285,15 +285,15 @@ const x = ({ settings: t, onClick: a }) => {
                       children: "Popular questions:"
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ e(
                     "div",
                     {
                       style: { display: "flex", flexDirection: "column", gap: "8px" },
                       children: t.aiChatSettings.exampleQuestions.map(
-                        (e, p) => /* @__PURE__ */ s(
+                        (n, b) => /* @__PURE__ */ e(
                           "button",
                           {
-                            onClick: () => f(e),
+                            onClick: () => C(n),
                             style: {
                               display: "block",
                               width: "100%",
@@ -309,15 +309,15 @@ const x = ({ settings: t, onClick: a }) => {
                               transition: "all 0.15s ease",
                               lineHeight: "1.4"
                             },
-                            onMouseEnter: (l) => {
-                              l.currentTarget.style.backgroundColor = "#f8fafc", l.currentTarget.style.borderColor = t.baseSettings.primaryBrandColor, l.currentTarget.style.transform = "translateY(-1px)", l.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
+                            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)";
                             },
-                            onMouseLeave: (l) => {
-                              l.currentTarget.style.backgroundColor = "white", l.currentTarget.style.borderColor = "#e2e8f0", l.currentTarget.style.transform = "translateY(0)", l.currentTarget.style.boxShadow = "none";
+                            onMouseLeave: (u) => {
+                              u.currentTarget.style.backgroundColor = "white", u.currentTarget.style.borderColor = "#e2e8f0", u.currentTarget.style.transform = "translateY(0)", u.currentTarget.style.boxShadow = "none";
                             },
-                            children: e
+                            children: n
                           },
-                          p
+                          b
                         )
                       )
                     }
@@ -329,7 +329,7 @@ const x = ({ settings: t, onClick: a }) => {
         ]
       }
     ),
-    /* @__PURE__ */ s("style", { children: `
+    /* @__PURE__ */ e("style", { children: `
           @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -347,47 +347,1383 @@ const x = ({ settings: t, onClick: a }) => {
           }
         ` })
   ] }) : null;
+}, de = {
+  display: "flex",
+  minHeight: "60px",
+  width: "100%",
+  borderRadius: "6px",
+  border: "1px solid #e2e8f0",
+  backgroundColor: "transparent",
+  paddingLeft: "12px",
+  paddingRight: "12px",
+  paddingTop: "8px",
+  paddingBottom: "8px",
+  fontSize: "14px",
+  boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  outline: "none",
+  fontFamily: "inherit",
+  resize: "vertical",
+  transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+}, 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 = {
+      ...de,
+      ...l ? 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: [
+      /* @__PURE__ */ e("style", { children: `
+            .textarea-with-placeholder::placeholder {
+              color: var(--placeholder-color);
+            }
+          ` }),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          className: "textarea-with-placeholder",
+          style: C,
+          ref: s,
+          onFocus: (u) => {
+            h(!0), i?.(u);
+          },
+          onBlur: (u) => {
+            h(!1), r?.(u);
+          },
+          ...d
+        }
+      )
+    ] });
+  }
+);
+q.displayName = "Textarea";
+const pe = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  whiteSpace: "nowrap",
+  borderRadius: "15px",
+  fontSize: "14px",
+  fontWeight: "500",
+  transition: "all 0.15s ease-in-out",
+  outline: "none",
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  flexShrink: 0
+}, ue = {
+  default: {
+    backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%))",
+    color: "hsl(var(--sdk-primary-foreground, 0 0% 98%))",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  },
+  destructive: {
+    backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%))",
+    color: "hsl(var(--sdk-destructive-foreground, 0 0% 98%))",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  },
+  outline: {
+    border: "1px solid hsl(var(--sdk-border, 240 3.7% 25%))",
+    backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))",
+    color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  },
+  secondary: {
+    backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
+    color: "hsl(var(--sdk-secondary-foreground, 240 5.9% 10%))",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: "hsl(var(--sdk-foreground, 240 10% 3.9%))"
+  },
+  link: {
+    backgroundColor: "transparent",
+    color: "hsl(var(--sdk-primary, 240 5.9% 10%))",
+    textDecoration: "underline",
+    textUnderlineOffset: "4px"
+  },
+  ghostOutline: {
+    border: "1px solid hsl(var(--sdk-secondary, 240 4.8% 95.9%))",
+    backgroundColor: "transparent",
+    color: "hsl(var(--sdk-muted-foreground, 240 3.8% 46.1%))",
+    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  }
+}, fe = {
+  default: {
+    height: "36px",
+    paddingLeft: "16px",
+    paddingRight: "16px",
+    paddingTop: "8px",
+    paddingBottom: "8px"
+  },
+  sm: {
+    height: "32px",
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    fontSize: "12px",
+    borderRadius: "6px"
+  },
+  lg: {
+    height: "40px",
+    paddingLeft: "32px",
+    paddingRight: "32px",
+    borderRadius: "6px"
+  },
+  icon: {
+    height: "32px",
+    width: "32px",
+    padding: "0"
+  }
+}, he = (t) => {
+  switch (t) {
+    case "default":
+      return { backgroundColor: "hsl(var(--sdk-primary, 240 5.9% 10%) / 0.9)" };
+    case "destructive":
+      return {
+        backgroundColor: "hsl(var(--sdk-destructive, 0 84.2% 60.2%) / 0.9)"
+      };
+    case "outline":
+      return {
+        backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%) / 0.8)",
+        color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))"
+      };
+    case "secondary":
+      return {
+        backgroundColor: "hsl(var(--sdk-secondary, 240 4.8% 95.9%) / 0.7)"
+      };
+    case "ghost":
+      return {
+        backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+        color: "hsl(var(--sdk-accent-foreground, 240 5.9% 10%))"
+      };
+    case "link":
+      return { textDecoration: "underline" };
+    case "ghostOutline":
+      return {
+        backgroundColor: "hsl(var(--sdk-accent, 240 4.8% 95.9%))",
+        color: "hsl(var(--sdk-foreground, 240 10% 3.9%))"
+      };
+    default:
+      return {};
+  }
+}, ge = (t) => {
+  const i = {
+    outline: "1px solid hsl(var(--sdk-ring, 240 10% 3.9%))",
+    outlineOffset: "1px"
+  };
+  switch (t) {
+    case "outline":
+      return {
+        ...i,
+        backgroundColor: "hsl(var(--sdk-secondary, 240 3.7% 15.9%))",
+        color: "hsl(var(--sdk-secondary-foreground, 0 0% 98%))"
+      };
+    default:
+      return i;
+  }
+}, G = L.forwardRef(
+  ({
+    variant: t = "default",
+    size: i = "default",
+    asChild: r = !1,
+    style: d,
+    onMouseEnter: s,
+    onMouseLeave: l,
+    onFocus: h,
+    onBlur: C,
+    onClick: n,
+    ...b
+  }, u) => {
+    const [H, A] = L.useState(!1), [y, F] = L.useState(!1), k = {
+      ...pe,
+      ...ue[t],
+      ...fe[i],
+      ...H ? he(t) : {},
+      ...y ? ge(t) : {},
+      ...d
+      // 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) => {
+      setTimeout(() => {
+        p.currentTarget && p.currentTarget.blur();
+      }, 150), n?.(p);
+    };
+    return r && console.warn(
+      "asChild prop is not supported in the inline CSS version of Button."
+    ), /* @__PURE__ */ e(
+      "button",
+      {
+        style: k,
+        ref: u,
+        onMouseEnter: I,
+        onMouseLeave: R,
+        onFocus: w,
+        onBlur: D,
+        onClick: j,
+        ...b
+      }
+    );
+  }
+);
+G.displayName = "Button";
+const me = {
+  ocean: {
+    primary: "#1ca0fb",
+    shadow: {
+      light: "#dbeafe",
+      // blue-100
+      dark: "#1e40af"
+      // blue-800
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #00ccb1, transparent), radial-gradient(circle farthest-side at 100% 0, #7b61ff, transparent), radial-gradient(circle farthest-side at 100% 100%, #ffc414, transparent), radial-gradient(circle farthest-side at 0 0, #1ca0fb, #141316)",
+    placeholderText: {
+      light: "#60a5fa",
+      // blue-400
+      dark: "#93c5fd"
+      // blue-300
+    },
+    tabHint: {
+      text: {
+        light: "#1e40af",
+        // blue-800
+        dark: "#dbeafe"
+        // blue-100
+      },
+      bg: {
+        light: "#eff6ff",
+        // blue-50
+        dark: "#1e3a8a"
+        // blue-900
+      },
+      border: {
+        light: "#bfdbfe",
+        // blue-200
+        dark: "#1e40af"
+        // blue-800
+      }
+    }
+  },
+  autumn: {
+    primary: "#f97316",
+    shadow: {
+      light: "#fed7aa",
+      // orange-200
+      dark: "#c2410c"
+      // orange-700
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #dc2626, transparent), radial-gradient(circle farthest-side at 100% 0, #f59e0b, transparent), radial-gradient(circle farthest-side at 100% 100%, #eab308, transparent), radial-gradient(circle farthest-side at 0 0, #f97316, #141316)",
+    placeholderText: {
+      light: "#fb923c",
+      // orange-400
+      dark: "#fdba74"
+      // orange-300
+    },
+    tabHint: {
+      text: {
+        light: "#c2410c",
+        // orange-700
+        dark: "#fed7aa"
+        // orange-200
+      },
+      bg: {
+        light: "#fff7ed",
+        // orange-50
+        dark: "#9a3412"
+        // orange-800
+      },
+      border: {
+        light: "#fde68a",
+        // yellow-200
+        dark: "#c2410c"
+        // orange-700
+      }
+    }
+  },
+  mint: {
+    primary: "#10b981",
+    shadow: {
+      light: "#a7f3d0",
+      // emerald-200
+      dark: "#047857"
+      // emerald-700
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #059669, transparent), radial-gradient(circle farthest-side at 100% 0, #06b6d4, transparent), radial-gradient(circle farthest-side at 100% 100%, #10b981, transparent), radial-gradient(circle farthest-side at 0 0, #14b8a6, #141316)",
+    placeholderText: {
+      light: "#34d399",
+      // emerald-400
+      dark: "#6ee7b7"
+      // emerald-300
+    },
+    tabHint: {
+      text: {
+        light: "#047857",
+        // emerald-700
+        dark: "#a7f3d0"
+        // emerald-200
+      },
+      bg: {
+        light: "#ecfdf5",
+        // emerald-50
+        dark: "#064e3b"
+        // emerald-900
+      },
+      border: {
+        light: "#a7f3d0",
+        // emerald-200
+        dark: "#047857"
+        // emerald-700
+      }
+    }
+  },
+  sunset: {
+    primary: "#ec4899",
+    shadow: {
+      light: "#fce7f3",
+      // pink-100
+      dark: "#be185d"
+      // pink-700
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #f59e0b, transparent), radial-gradient(circle farthest-side at 100% 0, #ec4899, transparent), radial-gradient(circle farthest-side at 100% 100%, #f97316, transparent), radial-gradient(circle farthest-side at 0 0, #ef4444, #141316)",
+    placeholderText: {
+      light: "#f472b6",
+      // pink-400
+      dark: "#f9a8d4"
+      // pink-300
+    },
+    tabHint: {
+      text: {
+        light: "#be185d",
+        // pink-700
+        dark: "#fce7f3"
+        // pink-100
+      },
+      bg: {
+        light: "#fdf2f8",
+        // pink-50
+        dark: "#831843"
+        // pink-900
+      },
+      border: {
+        light: "#fbcfe8",
+        // pink-200
+        dark: "#be185d"
+        // pink-700
+      }
+    }
+  },
+  lavender: {
+    primary: "#8b5cf6",
+    shadow: {
+      light: "#ddd6fe",
+      // violet-200
+      dark: "#5b21b6"
+      // violet-800
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #6366f1, transparent), radial-gradient(circle farthest-side at 100% 0, #a855f7, transparent), radial-gradient(circle farthest-side at 100% 100%, #ec4899, transparent), radial-gradient(circle farthest-side at 0 0, #8b5cf6, #141316)",
+    placeholderText: {
+      light: "#a78bfa",
+      // violet-400
+      dark: "#c4b5fd"
+      // violet-300
+    },
+    tabHint: {
+      text: {
+        light: "#5b21b6",
+        // violet-800
+        dark: "#ddd6fe"
+        // violet-200
+      },
+      bg: {
+        light: "#f5f3ff",
+        // violet-50
+        dark: "#4c1d95"
+        // violet-900
+      },
+      border: {
+        light: "#ddd6fe",
+        // violet-200
+        dark: "#5b21b6"
+        // violet-800
+      }
+    }
+  },
+  forest: {
+    primary: "#16a34a",
+    shadow: {
+      light: "#bbf7d0",
+      // green-200
+      dark: "#15803d"
+      // green-700
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #059669, transparent), radial-gradient(circle farthest-side at 100% 0, #16a34a, transparent), radial-gradient(circle farthest-side at 100% 100%, #65a30d, transparent), radial-gradient(circle farthest-side at 0 0, #166534, #141316)",
+    placeholderText: {
+      light: "#4ade80",
+      // green-400
+      dark: "#86efac"
+      // green-300
+    },
+    tabHint: {
+      text: {
+        light: "#15803d",
+        // green-700
+        dark: "#bbf7d0"
+        // green-200
+      },
+      bg: {
+        light: "#f0fdf4",
+        // green-50
+        dark: "#14532d"
+        // green-900
+      },
+      border: {
+        light: "#bbf7d0",
+        // green-200
+        dark: "#15803d"
+        // green-700
+      }
+    }
+  },
+  coral: {
+    primary: "#06b6d4",
+    shadow: {
+      light: "#a5f3fc",
+      // cyan-200
+      dark: "#0e7490"
+      // cyan-700
+    },
+    gradient: "radial-gradient(circle farthest-side at 0 100%, #0891b2, transparent), radial-gradient(circle farthest-side at 100% 0, #06b6d4, transparent), radial-gradient(circle farthest-side at 100% 100%, #0d9488, transparent), radial-gradient(circle farthest-side at 0 0, #0284c7, #141316)",
+    placeholderText: {
+      light: "#22d3ee",
+      // cyan-400
+      dark: "#67e8f9"
+      // cyan-300
+    },
+    tabHint: {
+      text: {
+        light: "#0e7490",
+        // cyan-700
+        dark: "#a5f3fc"
+        // cyan-200
+      },
+      bg: {
+        light: "#ecfeff",
+        // cyan-50
+        dark: "#164e63"
+        // cyan-900
+      },
+      border: {
+        light: "#a5f3fc",
+        // cyan-200
+        dark: "#0e7490"
+        // cyan-700
+      }
+    }
+  }
+}, te = (t) => me[t || "ocean"], Re = "ocean", xe = ({
+  size: t = 20,
+  className: i = "",
+  style: r = {}
+}) => /* @__PURE__ */ c(z, { children: [
+  /* @__PURE__ */ e("style", { children: `
+          @keyframes icon-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` }),
+  /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: `lucide lucide-loader-circle ${i}`,
+      style: {
+        animation: "icon-spin 1s linear infinite",
+        ...r
+      },
+      children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  )
+] }), be = ({
+  size: t = 20,
+  className: i = "",
+  style: r = {}
+}) => /* @__PURE__ */ c(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: t,
+    height: t,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: `lucide lucide-arrow-up ${i}`,
+    style: {
+      ...r
+    },
+    children: [
+      /* @__PURE__ */ e("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ e("path", { d: "M12 19V5" })
+    ]
+  }
+), ye = ({
+  isRecording: t = !1,
+  isTranscribing: i = !1,
+  size: r = 20,
+  style: d = {}
+}) => {
+  const s = {
+    position: "relative",
+    width: `${r}px`,
+    height: `${Math.floor(r * 0.8)}px`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...d
+  };
+  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 l = Math.max(1, Math.floor(r * 0.075)), h = 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: `${h}px` }, children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: `${l}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: `${l}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: `${l}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: `${l}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: `${l}px`,
+            height: `${Math.floor(r * 0.4)}px`,
+            backgroundColor: "currentColor",
+            borderRadius: "999px",
+            animation: "wave5 2.2s ease-in-out infinite"
+          }
+        }
+      )
+    ] }) })
+  ] });
+}, re = oe(
+  ({
+    texts: t,
+    typingSpeed: i = 30,
+    deletingSpeed: r = 15,
+    delayAfterText: d = 800,
+    onSubmit: s,
+    isStreaming: l = !1,
+    className: h = "",
+    placeholderClassName: C = "",
+    value: n,
+    onChange: b,
+    onFocus: u,
+    onBlur: H,
+    onKeyDown: A,
+    onPaste: y,
+    placeholder: F,
+    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;
+    M(() => {
+      if (!E) return;
+      let o;
+      return x ? (o = setTimeout(() => {
+        T(!1), $(!0), N(!0), Q(!0);
+      }, d), () => clearTimeout(o)) : K ? (o = setTimeout(() => {
+        Q(!1), setTimeout(() => {
+          N(!1), $(!1), p(!0);
+        }, 300);
+      }, 3e3), () => clearTimeout(o)) : (j ? w === "" ? (p(!1), W((m) => (m + 1) % t.length)) : o = setTimeout(() => {
+        D((m) => m.slice(0, -1));
+      }, r) : w === B ? T(!0) : o = setTimeout(() => {
+        D(B.slice(0, w.length + 1));
+      }, i), () => clearTimeout(o));
+    }, [
+      w,
+      j,
+      S,
+      x,
+      K,
+      B,
+      t,
+      i,
+      r,
+      d,
+      E
+    ]);
+    const a = (o) => {
+      if (o.key === "Tab" && E) {
+        o.preventDefault(), b?.({
+          target: { value: B }
+        });
+        return;
+      }
+      if (o.key === "Enter") {
+        if (o.shiftKey || (o.preventDefault(), l))
+          return;
+        s?.(o);
+      }
+      A?.(o);
+    };
+    return /* @__PURE__ */ c("div", { style: { position: "relative", width: "100%" }, children: [
+      E && /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            pointerEvents: "none",
+            display: "flex",
+            alignItems: "flex-start",
+            paddingLeft: "4px",
+            paddingRight: "4px",
+            paddingTop: "0",
+            paddingBottom: "0",
+            marginTop: "5px"
+          },
+          children: /* @__PURE__ */ c(
+            "p",
+            {
+              style: {
+                color: "#a1a1aa",
+                fontWeight: "500",
+                lineHeight: "1.25",
+                ...C ? {} : {}
+              },
+              children: [
+                w,
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "#d1d5db",
+                      backgroundColor: "#27272a",
+                      paddingLeft: "6px",
+                      paddingRight: "6px",
+                      paddingTop: "2px",
+                      paddingBottom: "2px",
+                      borderRadius: "8px",
+                      border: "1px solid #3f3f46",
+                      alignItems: "center",
+                      marginLeft: "8px",
+                      display: "inline-flex",
+                      whiteSpace: "nowrap",
+                      opacity: P ? 1 : 0,
+                      transform: P ? "scale(1)" : "scale(0.8)",
+                      transition: "opacity 0.3s ease, transform 0.3s ease",
+                      visibility: v ? "visible" : "hidden",
+                      verticalAlign: "middle"
+                    },
+                    children: "Tab to select"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        q,
+        {
+          ref: O,
+          placeholder: F,
+          style: h ? {} : {},
+          value: n,
+          onFocus: u,
+          onBlur: H,
+          onChange: b,
+          onKeyDown: a,
+          onPaste: y,
+          rows: k,
+          ...I
+        }
+      )
+    ] });
+  }
+);
+re.displayName = "TypingTextarea";
+const ke = ({
+  isRecording: t,
+  isTranscribing: i,
+  onVoiceRecording: r
+}) => /* @__PURE__ */ e(
+  G,
+  {
+    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 = {
+  gradient: "linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899)",
+  shadow: {
+    dark: "rgba(0, 0, 0, 0.2)"
+  }
+}, we = (t, i) => {
+  try {
+    return t ? te(t) || Y : te() || Y;
+  } catch (r) {
+    return console.warn("Theme system error, using fallback:", r), Y;
+  }
+}, Ie = ({
+  placeholder: t = "Ask anything...",
+  onSubmit: i,
+  hasPendingEnv: r,
+  playgroundUid: d,
+  isSubmitting: s,
+  typingTexts: l = [
+    "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",
+    "Build me a movie recommendation system using Qdrant API",
+    "Build me a weather forecasting app using OpenWeather API",
+    "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"
+  // Add default for required height prop
+}) => {
+  const [H, A] = f(!0), [y, F] = f(!1), [k, I] = f(!1), [, R] = f(!1), [w, D] = f(null), [j, p] = f(
+    null
+  ), [S, W] = f(""), x = U(null), T = U([]), v = U(null), [N, K] = f(!1), $ = ne(() => {
+    try {
+      return we(b, d);
+    } catch (a) {
+      return console.warn("Error getting color scheme:", a), Y;
+    }
+  }, [b, d]);
+  M(() => {
+    K(!0);
+  }, []), M(() => {
+    if (h && v.current && N)
+      try {
+        v.current.focus(), v.current.select();
+      } catch (a) {
+        console.warn("Focus error:", a);
+      }
+  }, [N, h]);
+  const P = () => {
+    A(!0);
+  }, Q = () => {
+    A(!0);
+  }, _ = () => {
+    const a = v.current;
+    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);
+      }
+  };
+  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());
+    };
+    return document.addEventListener("keydown", a), () => {
+      document.removeEventListener("keydown", a);
+    };
+  }, [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 o = !1, m;
+          x.current.ondataavailable = (g) => {
+            g.data.size > 0 && (o = !0, T.current.push(g.data));
+          }, x.current.onstop = async () => {
+            m && clearTimeout(m);
+            try {
+              if (!o || T.current.length === 0)
+                throw new Error("No audio data recorded");
+              const g = new Blob(T.current, {
+                type: "audio/wav"
+              });
+              if (g.size < 1024)
+                throw new Error("Audio recording too short");
+              const J = new FormData();
+              J.append("audio", g, "recording.wav");
+              const X = await fetch("/api/voice/transcribe", {
+                method: "POST",
+                body: J
+              });
+              if (X.ok) {
+                const { transcription: V } = await X.json();
+                if (V && V.trim()) {
+                  const ae = S ? `${S} ${V}` : V;
+                  W(ae.trim()), setTimeout(() => {
+                    if (v.current) {
+                      v.current.focus();
+                      const Z = v.current.value.length;
+                      v.current.setSelectionRange(Z, Z);
+                    }
+                  }, 100);
+                }
+              } 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"));
+            } finally {
+              T.current = [], x.current = null, p(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();
+          }, 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();
+          }
+        } else
+          p(null), I(!1), R(!1), a();
+      });
+  }, B = async () => {
+    if (!k)
+      if (y)
+        await O();
+      else
+        try {
+          if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
+            throw new Error("Browser doesn't support microphone access");
+          const a = await navigator.mediaDevices.getUserMedia({
+            audio: {
+              echoCancellation: !0,
+              noiseSuppression: !0,
+              sampleRate: 44100
+            }
+          }), o = 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);
+          const m = setTimeout(async () => {
+            await O();
+          }, 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);
+        }
+  }, E = (a) => {
+    if (a.preventDefault(), !!S.trim())
+      try {
+        if (d) {
+          const o = encodeURIComponent(S.trim()), m = `https://${d}.sampleapp.ai?q=${o}`;
+          window.open(m, "_blank");
+        }
+        i && i(a);
+      } catch (o) {
+        console.error("Submit error:", o);
+      }
+  };
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        position: "relative",
+        padding: "2px",
+        width: "100%",
+        maxWidth: "100%",
+        marginLeft: "auto",
+        marginRight: "auto"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              backgroundColor: $.shadow?.dark || "rgba(0, 0, 0, 0.2)",
+              position: "absolute",
+              top: "0",
+              right: "0",
+              bottom: "0",
+              left: "0",
+              borderRadius: "0.85rem",
+              transition: "opacity 0.3s ease-in-out",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+              opacity: "1",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              background: $.gradient || Y.gradient,
+              backgroundSize: "400% 400%",
+              position: "absolute",
+              top: "0",
+              right: "0",
+              bottom: "0",
+              left: "0",
+              borderRadius: "0.85rem",
+              zIndex: 1,
+              filter: "blur(12px)",
+              transition: "opacity 0.3s ease-in-out",
+              pointerEvents: "none",
+              opacity: H ? "0.8" : "0.4",
+              animation: "gradient-bg 5s ease infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              background: $.gradient || Y.gradient,
+              backgroundSize: "400% 400%",
+              position: "absolute",
+              top: "0",
+              right: "0",
+              bottom: "0",
+              left: "0",
+              borderRadius: "0.85rem",
+              zIndex: 1,
+              transition: "opacity 0.3s ease-in-out",
+              pointerEvents: "none",
+              opacity: H ? "1" : "0.7",
+              animation: "gradient-bg 5s ease infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 10,
+              borderRadius: "0.75rem",
+              backgroundColor: "rgb(24, 24, 27)",
+              // zinc-900 equivalent
+              width: "100%",
+              paddingLeft: "0.25rem",
+              paddingRight: "0.25rem",
+              paddingTop: "0.5rem",
+              paddingBottom: "0.5rem"
+            },
+            children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+              /* @__PURE__ */ c(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    display: "flex",
+                    paddingLeft: "8px",
+                    paddingRight: "8px",
+                    gap: "8px",
+                    paddingTop: "4px",
+                    paddingBottom: "4px"
+                  },
+                  children: [
+                    l.length > 0 ? /* @__PURE__ */ e(
+                      re,
+                      {
+                        texts: l,
+                        ref: v,
+                        style: {
+                          flex: 1,
+                          width: "100%",
+                          border: "none",
+                          boxShadow: "none",
+                          outline: "none",
+                          paddingLeft: "4px",
+                          paddingRight: "4px",
+                          resize: "none",
+                          fontSize: "16px",
+                          overflow: "hidden",
+                          backgroundColor: "transparent",
+                          display: "block",
+                          paddingTop: "0",
+                          paddingBottom: "0",
+                          lineHeight: "1.5",
+                          overflowY: "auto",
+                          maxHeight: "192px",
+                          marginTop: "4px",
+                          color: "#f4f4f5",
+                          fontFamily: "inherit"
+                        },
+                        value: S,
+                        onFocus: P,
+                        onBlur: Q,
+                        onChange: (a) => W(a.target.value),
+                        onSubmit: (a) => {
+                          if (y || k) {
+                            a.preventDefault();
+                            return;
+                          }
+                          E(a);
+                        },
+                        rows: 1
+                      }
+                    ) : /* @__PURE__ */ e(
+                      q,
+                      {
+                        ref: v,
+                        placeholder: t,
+                        style: {
+                          flex: 1,
+                          width: "100%",
+                          border: "none",
+                          boxShadow: "none",
+                          outline: "none",
+                          paddingLeft: "4px",
+                          paddingRight: "4px",
+                          resize: "none",
+                          fontSize: "16px",
+                          overflow: "hidden",
+                          backgroundColor: "transparent",
+                          display: "block",
+                          paddingTop: "0",
+                          paddingBottom: "0",
+                          lineHeight: "1.5",
+                          overflowY: "auto",
+                          maxHeight: "192px",
+                          marginTop: "4px",
+                          color: "#f4f4f5",
+                          fontFamily: "inherit"
+                        },
+                        value: S,
+                        onFocus: P,
+                        onBlur: Q,
+                        onChange: (a) => W(a.target.value),
+                        onKeyDown: (a) => {
+                          if (a.key === "Enter") {
+                            if (a.shiftKey)
+                              return;
+                            a.preventDefault(), E(a);
+                          }
+                        },
+                        rows: 1
+                      }
+                    ),
+                    /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "row", gap: "4px" }, children: [
+                      /* @__PURE__ */ e(
+                        ke,
+                        {
+                          isRecording: y,
+                          isTranscribing: k,
+                          onVoiceRecording: B
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        G,
+                        {
+                          style: {
+                            height: "32px",
+                            width: "32px"
+                          },
+                          disabled: S.length === 0 || s || r,
+                          variant: "secondary",
+                          onClick: E,
+                          size: "icon",
+                          children: s ? /* @__PURE__ */ e(
+                            xe,
+                            {
+                              size: 20,
+                              style: { animation: "spin 1s linear infinite" }
+                            }
+                          ) : /* @__PURE__ */ e(be, { style: { width: "20px", height: "20px" } })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingLeft: "8px",
+                    paddingRight: "8px"
+                  },
+                  children: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: C && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: { display: "flex", alignItems: "center", gap: "8px" }
+                    }
+                  ) })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e("style", { children: `
+        @keyframes gradient-bg {
+          0%,
+          100% {
+            background-position: 0% 50%;
+          }
+          50% {
+            background-position: 100% 50%;
+          }
+        }
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      ` })
+      ]
+    }
+  ) });
 };
-class C {
+class ve {
   constructor() {
-    this.ModalSearchAndChat = (a, r) => {
-      const i = r || document.body, o = document.createElement("div");
-      o.id = "sampleapp-modal-" + Date.now(), i.appendChild(o);
-      const n = g.createRoot(o), c = m.createElement(b, {
-        settings: a,
+    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, {
+        settings: i,
         onClose: () => {
-          n.unmount(), o.remove();
+          l.unmount(), s.remove();
         }
       });
-      return n.render(c), {
+      return l.render(h), {
         unmount: () => {
-          n.unmount(), o.remove();
+          l.unmount(), s.remove();
         },
         show: () => {
-          o.style.display = "block";
+          s.style.display = "block";
         },
         hide: () => {
-          o.style.display = "none";
+          s.style.display = "none";
         }
       };
-    }, this.ChatButton = (a, r) => {
-      const i = r || this.createButtonContainer(), o = g.createRoot(i), n = m.createElement(x, { settings: a });
-      return o.render(n), {
+    }, this.ChatButton = (i, r) => {
+      const d = r || this.createButtonContainer(), s = ee.createRoot(d), l = L.createElement(ie, { settings: i });
+      return s.render(l), {
         unmount: () => {
-          o.unmount(), i.remove();
+          s.unmount(), d.remove();
         }
       };
     };
   }
   createButtonContainer() {
-    const a = document.createElement("div");
-    return a.id = "sampleapp-button-" + Date.now(), document.body.appendChild(a), a;
+    const i = document.createElement("div");
+    return i.id = "sampleapp-button-" + Date.now(), document.body.appendChild(i), i;
   }
 }
-const S = new C();
-typeof window < "u" && (window.SampleApp = S);
+const Ce = new ve();
+typeof window < "u" && (window.SampleApp = Ce);
 export {
-  x as ChatButton,
-  b as ModalSearchAndChat,
-  S as default
+  Ie as ChatBar,
+  ie as ChatButton,
+  Re as DEFAULT_THEME,
+  se as ModalSearchAndChat,
+  Ce as default,
+  te as getTheme,
+  me as themes
 };