@foisit/vue-wrapper 2.4.5 → 3.0.0

package/README.md

@@ -33,7 +33,7 @@ Transform your Vue app into an intelligent, voice-ready platform. Foisit provide
 - **Programmatic UI Triggers** - Direct command execution via `runCommand()`
 - **Rich Markdown Rendering** - Enhanced response formatting with headings, code, and links
 - **Advanced File Validations** - Comprehensive client-side file validation with size, type, and dimension checks
-- **Premium UI** - Glassmorphic overlay with dark/light mode support
+- **Premium UI** - Glass or solid theme with dark/light mode support
 - **Zero Backend Required** - Secure proxy architecture keeps API keys server-side
 - **Vue Native** - Uses Composition API, `provide/inject`, and Vue 3 patterns
 - **Type-Safe** - Full TypeScript support with comprehensive types
@@ -454,9 +454,57 @@ interface AssistantConfig {
     customHtml?: string;
     position?: { bottom: string; right: string };
   };
+
+  // Theme mode: 'glass' (default) or 'solid'
+  theme?: 'glass' | 'solid';
+
+  // Custom colors for solid theme (ignored in glass mode)
+  themeColors?: ThemeColors;
+}
+```
+
+### `ThemeColors`
+
+Custom colors for solid theme mode:
+
+```typescript
+interface ThemeColors {
+  background?: string; // Background color (e.g., '#1e1e2e')
+  text?: string; // Primary text color (e.g., '#ffffff')
+  accent?: string; // Accent color for highlights (e.g., '#89b4fa' or a gradient)
+  userBubbleBg?: string; // User message bubble background
+  systemBubbleBg?: string; // System message bubble background
+  border?: string; // Border color
 }
 ```
 
+### Theme Customization Example
+
+```vue
+<script setup>
+const config = {
+  commands: [...],
+  // Use solid theme with custom colors
+  theme: 'solid',
+  themeColors: {
+    background: '#1e1e2e',
+    text: '#cdd6f4',
+    accent: '#89b4fa',
+    userBubbleBg: 'rgba(137, 180, 250, 0.2)',
+    systemBubbleBg: 'rgba(255, 255, 255, 0.05)',
+  },
+};
+</script>
+
+<template>
+  <AssistantProvider :config="config">
+    <App />
+  </AssistantProvider>
+</template>
+```
+
+> **Note**: Glass theme (default) uses glassmorphism with blur effects and adapts to light/dark mode via `prefers-color-scheme`. Solid theme ignores system preferences and uses configured colors.
+
 ---
 
 ## Advanced Usage

package/index.d.ts

@@ -1,3 +1,4 @@
 export { default as AssistantProvider } from './lib/components/AssistantProvider.vue';
 export { useAssistant } from './lib/composables/useAssistant';
 export { AssistantService } from './lib/services/AssistantService';
+export type { ThemeColors } from '../../core/src/index.ts';

package/index.mjs

@@ -5,11 +5,11 @@
 **/
 const se = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {}, ze = process.env.NODE_ENV !== "production" ? Object.freeze([]) : [], we = () => {
 }, Be = (i) => i.charCodeAt(0) === 111 && i.charCodeAt(1) === 110 && // uppercase letter
-(i.charCodeAt(2) > 122 || i.charCodeAt(2) < 97), z = Object.assign, k = Array.isArray, I = (i) => typeof i == "function", R = (i) => typeof i == "string", xe = (i) => typeof i == "symbol", T = (i) => i !== null && typeof i == "object";
+(i.charCodeAt(2) > 122 || i.charCodeAt(2) < 97), z = Object.assign, E = Array.isArray, M = (i) => typeof i == "function", R = (i) => typeof i == "string", xe = (i) => typeof i == "symbol", T = (i) => i !== null && typeof i == "object";
 let he;
 const Q = () => he || (he = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
 function le(i) {
-  if (k(i)) {
+  if (E(i)) {
     const e = {};
     for (let t = 0; t < i.length; t++) {
       const s = i[t], n = R(s) ? Ye(s) : le(s);
@@ -35,7 +35,7 @@ function ce(i) {
   let e = "";
   if (R(i))
     e = i;
-  else if (k(i))
+  else if (E(i))
     for (let t = 0; t < i.length; t++) {
       const s = ce(i[t]);
       s && (e += s + " ");
@@ -156,9 +156,9 @@ function Ze(i) {
   }), t.length > 3 && e.push(" ..."), e;
 }
 function Se(i, e, t) {
-  return R(e) ? (e = JSON.stringify(e), t ? e : [`${i}=${e}`]) : typeof e == "number" || typeof e == "boolean" || e == null ? t ? e : [`${i}=${e}`] : de(e) ? (e = Se(i, O(e.value), !0), t ? e : [`${i}=Ref<`, e, ">"]) : I(e) ? [`${i}=fn${e.name ? `<${e.name}>` : ""}`] : (e = O(e), t ? e : [`${i}=`, e]);
+  return R(e) ? (e = JSON.stringify(e), t ? e : [`${i}=${e}`]) : typeof e == "number" || typeof e == "boolean" || e == null ? t ? e : [`${i}=${e}`] : de(e) ? (e = Se(i, O(e.value), !0), t ? e : [`${i}=Ref<`, e, ">"]) : M(e) ? [`${i}=fn${e.name ? `<${e.name}>` : ""}`] : (e = O(e), t ? e : [`${i}=`, e]);
 }
-const Ee = {
+const ke = {
   sp: "serverPrefetch hook",
   bc: "beforeCreate hook",
   c: "created hook",
@@ -195,14 +195,14 @@ function ue(i, e, t, s) {
   try {
     return s ? i(...s) : i();
   } catch (n) {
-    ke(n, e, t);
+    Ee(n, e, t);
   }
 }
-function ke(i, e, t, s = !0) {
+function Ee(i, e, t, s = !0) {
   const n = e ? e.vnode : null, { errorHandler: o, throwUnhandledErrorInProduction: a } = e && e.appContext.config || se;
   if (e) {
     let r = e.parent;
-    const c = e.proxy, h = process.env.NODE_ENV !== "production" ? Ee[t] : `https://vuejs.org/error-reference/#runtime-${t}`;
+    const c = e.proxy, h = process.env.NODE_ENV !== "production" ? ke[t] : `https://vuejs.org/error-reference/#runtime-${t}`;
     for (; r; ) {
       const d = r.ec;
       if (d) {
@@ -225,7 +225,7 @@ function ke(i, e, t, s = !0) {
 }
 function et(i, e, t, s = !0, n = !1) {
   if (process.env.NODE_ENV !== "production") {
-    const o = Ee[e];
+    const o = ke[e];
     if (t && Ge(t), _(`Unhandled error${o ? ` during execution of ${o}` : ""}`), t && Ke(), s)
       throw i;
     console.error(i);
@@ -261,7 +261,7 @@ function _e() {
   re || (re = tt.then(Ae));
 }
 function ot(i) {
-  k(i) ? P.push(...i) : N && i.id === -1 ? N.splice(F + 1, 0, i) : i.flags & 1 || (P.push(i), i.flags |= 1), _e();
+  E(i) ? P.push(...i) : N && i.id === -1 ? N.splice(F + 1, 0, i) : i.flags & 1 || (P.push(i), i.flags |= 1), _e();
 }
 function rt(i) {
   if (P.length) {
@@ -308,7 +308,7 @@ function Le(i, e) {
   const t = i.get(e) || 0;
   if (t > it) {
     const s = e.i, n = s && Pe(s.type);
-    return ke(
+    return Ee(
       `Maximum recursive updates exceeded${n ? ` in component <${n}>` : ""}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
       null,
       10
@@ -373,18 +373,18 @@ function ie(i) {
   };
 }
 let H, j = [];
-function Me(i, e) {
+function Ie(i, e) {
   var t, s;
   H = i, H ? (H.enabled = !0, j.forEach(({ event: n, args: o }) => H.emit(n, ...o)), j = []) : /* handle late devtools injection - only do this if we are in an actual */ /* browser environment to avoid the timer handle stalling test runner exit */ /* (#4815) */ typeof window < "u" && // some envs mock window but not fully
   window.HTMLElement && // also exclude jsdom
   // eslint-disable-next-line no-restricted-syntax
   !((s = (t = window.navigator) == null ? void 0 : t.userAgent) != null && s.includes("jsdom")) ? ((e.__VUE_DEVTOOLS_HOOK_REPLAY__ = e.__VUE_DEVTOOLS_HOOK_REPLAY__ || []).push((o) => {
-    Me(o, e);
+    Ie(o, e);
   }), setTimeout(() => {
     H || (e.__VUE_DEVTOOLS_HOOK_REPLAY__ = null, j = []);
   }, 3e3)) : j = [];
 }
-let M = null, dt = null;
+let I = null, dt = null;
 function ut(i, e) {
   if (process.env.NODE_ENV !== "production" && (!L || L.isMounted) && _("provide() can only be used inside setup()."), L) {
     let t = L.provides;
@@ -393,23 +393,23 @@ function ut(i, e) {
   }
 }
 function ft(i, e, t = !1) {
-  const s = It();
+  const s = Mt();
   if (s || vt) {
     let n = s ? s.parent == null || s.ce ? s.vnode.appContext && s.vnode.appContext.provides : s.parent.provides : void 0;
     if (n && i in n)
       return n[i];
     if (arguments.length > 1)
-      return t && I(e) ? e.call(s && s.proxy) : e;
+      return t && M(e) ? e.call(s && s.proxy) : e;
     process.env.NODE_ENV !== "production" && _(`injection "${String(i)}" not found.`);
   } else process.env.NODE_ENV !== "production" && _("inject() can only be used inside setup() or functional components.");
 }
 const mt = (i) => i.__isTeleport;
-function Ie(i, e) {
-  i.shapeFlag & 6 && i.component ? (i.transition = e, Ie(i.component.subTree, e)) : i.shapeFlag & 128 ? (i.ssContent.transition = e.clone(i.ssContent), i.ssFallback.transition = e.clone(i.ssFallback)) : i.transition = e;
+function Me(i, e) {
+  i.shapeFlag & 6 && i.component ? (i.transition = e, Me(i.component.subTree, e)) : i.shapeFlag & 128 ? (i.ssContent.transition = e.clone(i.ssContent), i.ssFallback.transition = e.clone(i.ssFallback)) : i.transition = e;
 }
 // @__NO_SIDE_EFFECTS__
 function ht(i, e) {
-  return I(i) ? (
+  return M(i) ? (
     // #8236: extend call and options.name access are considered side-effects
     // by Rollup, so we have to wrap it in a pure-annotated IIFE.
     z({ name: i.name }, e, { setup: i })
@@ -418,10 +418,10 @@ function ht(i, e) {
 Q().requestIdleCallback;
 Q().cancelIdleCallback;
 const pt = (i) => !!i.type.__asyncLoader, gt = /* @__PURE__ */ Symbol.for("v-ndc");
-function yt(i, e, t = {}, s, n) {
-  if (M.ce || M.parent && pt(M.parent) && M.parent.ce) {
+function bt(i, e, t = {}, s, n) {
+  if (I.ce || I.parent && pt(I.parent) && I.parent.ce) {
     const h = Object.keys(t).length > 0;
-    return ge(), ye(
+    return ge(), be(
       q,
       null,
       [fe("slot", t, s)],
@@ -434,7 +434,7 @@ function yt(i, e, t = {}, s, n) {
   ), o = () => []), o && o._c && (o._d = !1), ge();
   const a = o && Ne(o(t)), r = t.key || // slot content array of a dynamic conditional slot may have a branch
   // key attached in the `createSlots` helper, respect that
-  a && a.key, c = ye(
+  a && a.key, c = be(
     q,
     {
       key: (r && !xe(r) ? r : `_${e}`) + // #7256 force differentiate fallback content from actual content
@@ -448,24 +448,24 @@ function yt(i, e, t = {}, s, n) {
 function Ne(i) {
   return i.some((e) => Oe(e) ? !(e.type === Te || e.type === q && !Ne(e.children)) : !0) ? i : null;
 }
-const bt = {};
-process.env.NODE_ENV !== "production" && (bt.ownKeys = (i) => (_(
+const yt = {};
+process.env.NODE_ENV !== "production" && (yt.ownKeys = (i) => (_(
   "Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead."
 ), Reflect.ownKeys(i)));
 let vt = null;
 const wt = {}, Re = (i) => Object.getPrototypeOf(i) === wt, xt = (i) => i.__isSuspense, q = /* @__PURE__ */ Symbol.for("v-fgt"), Ct = /* @__PURE__ */ Symbol.for("v-txt"), Te = /* @__PURE__ */ Symbol.for("v-cmt"), Y = [];
-let E = null;
+let k = null;
 function ge(i = !1) {
-  Y.push(E = i ? null : []);
+  Y.push(k = i ? null : []);
 }
 function St() {
-  Y.pop(), E = Y[Y.length - 1] || null;
+  Y.pop(), k = Y[Y.length - 1] || null;
 }
-function Et(i) {
-  return i.dynamicChildren = E || ze, St(), E && E.push(i), i;
+function kt(i) {
+  return i.dynamicChildren = k || ze, St(), k && k.push(i), i;
 }
-function ye(i, e, t, s, n) {
-  return Et(
+function be(i, e, t, s, n) {
+  return kt(
     fe(
       i,
       e,
@@ -479,13 +479,13 @@ function ye(i, e, t, s, n) {
 function Oe(i) {
   return i ? i.__v_isVNode === !0 : !1;
 }
-const kt = (...i) => Fe(
+const Et = (...i) => Fe(
   ...i
 ), $e = ({ key: i }) => i ?? null, G = ({
   ref: i,
   ref_key: e,
   ref_for: t
-}) => (typeof i == "number" && (i = "" + i), i != null ? R(i) || de(i) || I(i) ? { i: M, r: i, k: e, f: !!t } : i : null);
+}) => (typeof i == "number" && (i = "" + i), i != null ? R(i) || de(i) || M(i) ? { i: I, r: i, k: e, f: !!t } : i : null);
 function _t(i, e = null, t = null, s = 0, n = null, o = i === q ? 0 : 1, a = !1, r = !1) {
   const c = {
     __v_isVNode: !0,
@@ -514,19 +514,19 @@ function _t(i, e = null, t = null, s = 0, n = null, o = i === q ? 0 : 1, a = !1,
     dynamicProps: n,
     dynamicChildren: null,
     appContext: null,
-    ctx: M
+    ctx: I
   };
   return r ? (me(c, t), o & 128 && i.normalize(c)) : t && (c.shapeFlag |= R(t) ? 8 : 16), process.env.NODE_ENV !== "production" && c.key !== c.key && _("VNode created with invalid key (NaN). VNode type:", c.type), // avoid a block node from tracking itself
   !a && // has current parent block
-  E && // presence of a patch flag indicates this node needs patching on updates.
+  k && // presence of a patch flag indicates this node needs patching on updates.
   // component nodes also should always be patched, because even if the
   // component doesn't need to update, it needs to persist the instance on to
   // the next vnode so that it can be properly unmounted later.
   (c.patchFlag > 0 || o & 6) && // the EVENTS flag is only for hydration and if it is the only flag, the
   // vnode should not be considered dynamic due to handler caching.
-  c.patchFlag !== 32 && E.push(c), c;
+  c.patchFlag !== 32 && k.push(c), c;
 }
-const fe = process.env.NODE_ENV !== "production" ? kt : Fe;
+const fe = process.env.NODE_ENV !== "production" ? Et : Fe;
 function Fe(i, e = null, t = null, s = 0, n = null, o = !1) {
   if ((!i || i === gt) && (process.env.NODE_ENV !== "production" && !i && _(`Invalid vnode type when creating vnode: ${i}.`), i = Te), Oe(i)) {
     const r = X(
@@ -535,14 +535,14 @@ function Fe(i, e = null, t = null, s = 0, n = null, o = !1) {
       !0
       /* mergeRef: true */
     );
-    return t && me(r, t), !o && E && (r.shapeFlag & 6 ? E[E.indexOf(i)] = r : E.push(r)), r.patchFlag = -2, r;
+    return t && me(r, t), !o && k && (r.shapeFlag & 6 ? k[k.indexOf(i)] = r : k.push(r)), r.patchFlag = -2, r;
   }
   if (De(i) && (i = i.__vccOpts), e) {
     e = At(e);
     let { class: r, style: c } = e;
-    r && !R(r) && (e.class = ce(r)), T(c) && (oe(c) && !k(c) && (c = z({}, c)), e.style = le(c));
+    r && !R(r) && (e.class = ce(r)), T(c) && (oe(c) && !E(c) && (c = z({}, c)), e.style = le(c));
   }
-  const a = R(i) ? 1 : xt(i) ? 128 : mt(i) ? 64 : T(i) ? 4 : I(i) ? 2 : 0;
+  const a = R(i) ? 1 : xt(i) ? 128 : mt(i) ? 64 : T(i) ? 4 : M(i) ? 2 : 0;
   return process.env.NODE_ENV !== "production" && a & 4 && oe(i) && (i = O(i), _(
     "Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.",
     `
@@ -563,7 +563,7 @@ function At(i) {
   return i ? oe(i) || Re(i) ? z({}, i) : i : null;
 }
 function X(i, e, t = !1, s = !1) {
-  const { props: n, ref: o, patchFlag: a, children: r, transition: c } = i, h = e ? Mt(n || {}, e) : n, d = {
+  const { props: n, ref: o, patchFlag: a, children: r, transition: c } = i, h = e ? It(n || {}, e) : n, d = {
     __v_isVNode: !0,
     __v_skip: !0,
     type: i.type,
@@ -573,11 +573,11 @@ function X(i, e, t = !1, s = !1) {
       // #2078 in the case of <component :is="vnode" ref="extra"/>
       // if the vnode itself already has a ref, cloneVNode will need to merge
       // the refs so the single vnode can be set on multiple refs
-      t && o ? k(o) ? o.concat(G(e)) : [o, G(e)] : G(e)
+      t && o ? E(o) ? o.concat(G(e)) : [o, G(e)] : G(e)
     ) : o,
     scopeId: i.scopeId,
     slotScopeIds: i.slotScopeIds,
-    children: process.env.NODE_ENV !== "production" && a === -1 && k(r) ? r.map(He) : r,
+    children: process.env.NODE_ENV !== "production" && a === -1 && E(r) ? r.map(He) : r,
     target: i.target,
     targetStart: i.targetStart,
     targetAnchor: i.targetAnchor,
@@ -607,14 +607,14 @@ function X(i, e, t = !1, s = !1) {
     ctx: i.ctx,
     ce: i.ce
   };
-  return c && s && Ie(
+  return c && s && Me(
     d,
     c.clone(d)
   ), d;
 }
 function He(i) {
   const e = X(i);
-  return k(i.children) && (e.children = i.children.map(He)), e;
+  return E(i.children) && (e.children = i.children.map(He)), e;
 }
 function Lt(i = " ", e = 0) {
   return fe(Ct, null, i, e);
@@ -624,7 +624,7 @@ function me(i, e) {
   const { shapeFlag: s } = i;
   if (e == null)
     e = null;
-  else if (k(e))
+  else if (E(e))
     t = 16;
   else if (typeof e == "object")
     if (s & 65) {
@@ -632,11 +632,11 @@ function me(i, e) {
       n && (n._c && (n._d = !1), me(i, n()), n._c && (n._d = !0));
       return;
     } else
-      t = 32, !e._ && !Re(e) && (e._ctx = M);
-  else I(e) ? (e = { default: e, _ctx: M }, t = 32) : (e = String(e), s & 64 ? (t = 16, e = [Lt(e)]) : t = 8);
+      t = 32, !e._ && !Re(e) && (e._ctx = I);
+  else M(e) ? (e = { default: e, _ctx: I }, t = 32) : (e = String(e), s & 64 ? (t = 16, e = [Lt(e)]) : t = 8);
   i.children = e, i.shapeFlag |= t;
 }
-function Mt(...i) {
+function It(...i) {
   const e = {};
   for (let t = 0; t < i.length; t++) {
     const s = i[t];
@@ -647,13 +647,13 @@ function Mt(...i) {
         e.style = le([e.style, s.style]);
       else if (Be(n)) {
         const o = e[n], a = s[n];
-        a && o !== a && !(k(o) && o.includes(a)) && (e[n] = o ? [].concat(o, a) : a);
+        a && o !== a && !(E(o) && o.includes(a)) && (e[n] = o ? [].concat(o, a) : a);
       } else n !== "" && (e[n] = s[n]);
   }
   return e;
 }
 let L = null;
-const It = () => L || M;
+const Mt = () => L || I;
 {
   const i = Q(), e = (t, s) => {
     let n;
@@ -672,7 +672,7 @@ const It = () => L || M;
 process.env.NODE_ENV;
 const Nt = /(?:^|[-_])\w/g, Rt = (i) => i.replace(Nt, (e) => e.toUpperCase()).replace(/[-_]/g, "");
 function Pe(i, e = !0) {
-  return I(i) ? i.displayName || i.name : i.name || e && i.__name;
+  return M(i) ? i.displayName || i.name : i.name || e && i.__name;
 }
 function Ve(i, e, t = !1) {
   let s = Pe(e);
@@ -693,7 +693,7 @@ function Ve(i, e, t = !1) {
   return s ? Rt(s) : t ? "App" : "Anonymous";
 }
 function De(i) {
-  return I(i) && "__vccOpts" in i;
+  return M(i) && "__vccOpts" in i;
 }
 function Tt() {
   if (process.env.NODE_ENV === "production" || typeof window > "u")
@@ -754,8 +754,8 @@ function Tt() {
     l.type.props && l.props && f.push(a("props", O(l.props))), l.setupState !== se && f.push(a("setup", l.setupState)), l.data !== se && f.push(a("data", O(l.data)));
     const m = c(l, "computed");
     m && f.push(a("computed", m));
-    const y = c(l, "inject");
-    return y && f.push(a("injected", y)), f.push([
+    const b = c(l, "inject");
+    return b && f.push(a("injected", b)), f.push([
       "div",
       {},
       [
@@ -798,16 +798,16 @@ function Tt() {
   }
   function c(l, f) {
     const m = l.type;
-    if (I(m))
+    if (M(m))
       return;
-    const y = {};
+    const b = {};
     for (const u in l.ctx)
-      h(m, u, f) && (y[u] = l.ctx[u]);
-    return y;
+      h(m, u, f) && (b[u] = l.ctx[u]);
+    return b;
   }
   function h(l, f, m) {
-    const y = l[m];
-    if (k(y) && y.includes(f) || T(y) && f in y || l.extends && h(l.extends, f, m) || l.mixins && l.mixins.some((u) => h(u, f, m)))
+    const b = l[m];
+    if (E(b) && b.includes(f) || T(b) && f in b || l.extends && h(l.extends, f, m) || l.mixins && l.mixins.some((u) => h(u, f, m)))
       return !0;
   }
   function d(l) {
@@ -827,7 +827,7 @@ function Ot() {
   Tt();
 }
 process.env.NODE_ENV !== "production" && Ot();
-class be {
+class ye {
   constructor(e) {
     this.endpoint = e || "https://foisit-ninja.netlify.app/.netlify/functions/intent";
   }
@@ -861,10 +861,10 @@ class be {
 class $t {
   constructor(e = !0) {
     if (this.commands = /* @__PURE__ */ new Map(), this.openAIService = null, this.context = null, this.pendingConfirmation = null, this.enableSmartIntent = !0, this.selectOptionsCache = /* @__PURE__ */ new Map(), typeof e == "boolean") {
-      this.enableSmartIntent = e, this.enableSmartIntent && (this.openAIService = new be());
+      this.enableSmartIntent = e, this.enableSmartIntent && (this.openAIService = new ye());
       return;
     }
-    this.enableSmartIntent = e.enableSmartIntent ?? !0, this.enableSmartIntent && (this.openAIService = new be(e.intentEndpoint));
+    this.enableSmartIntent = e.enableSmartIntent ?? !0, this.enableSmartIntent && (this.openAIService = new ye(e.intentEndpoint));
   }
   /** Add a new command (string or object) */
   addCommand(e, t) {
@@ -891,7 +891,7 @@ class $t {
       if (this.isStructured(e)) {
         const c = String(e.commandId), h = e.params ?? {}, d = this.getCommandById(c);
         if (!d) return { message: "That command is not available.", type: "error" };
-        const l = this.sanitizeParamsForCommand(d, h), m = (d.parameters ?? []).filter((y) => y.required).filter((y) => l[y.name] == null || l[y.name] === "");
+        const l = this.sanitizeParamsForCommand(d, h), m = (d.parameters ?? []).filter((b) => b.required).filter((b) => l[b.name] == null || l[b.name] === "");
         return m.length > 0 ? (this.context = { commandId: this.getCommandIdentifier(d), params: l }, {
           message: `Please provide the required details for "${d.command}".`,
           type: "form",
@@ -1504,8 +1504,14 @@ class Bt {
    * - `showInvocation`: if true, show the invocation as a user message
    */
   async runCommand(e) {
-    if (!e || !e.commandId) throw new Error("runCommand requires a commandId");
-    const { commandId: t, params: s, openOverlay: n = !0, showInvocation: o = !0 } = e;
+    if (!e || !e.commandId)
+      throw new Error("runCommand requires a commandId");
+    const {
+      commandId: t,
+      params: s,
+      openOverlay: n = !0,
+      showInvocation: o = !0
+    } = e;
     n && !this.isOpen && this.toggle();
     const a = this.commandHandlers.get(t);
     if (a && o && this.messagesContainer && this.addMessage(`Command: ${t}`, "user"), a)
@@ -1523,7 +1529,10 @@ class Bt {
         else r == null || this.addMessage(String(r), "system");
         return r;
       } catch (r) {
-        throw this.hideLoading(), this.addMessage(`Command "${t}" failed: ${String(r)}`, "system"), r;
+        throw this.hideLoading(), this.addMessage(
+          `Command "${t}" failed: ${String(r)}`,
+          "system"
+        ), r;
       }
     if (this.externalCommandExecutor)
       try {
@@ -1531,9 +1540,15 @@ class Bt {
         const r = await this.externalCommandExecutor({ commandId: t, params: s });
         return this.hideLoading(), r;
       } catch (r) {
-        throw this.hideLoading(), this.addMessage(`Command "${t}" failed: ${String(r)}`, "system"), r;
-      }
-    this.addMessage(`No handler registered for command "${t}".`, "system");
+        throw this.hideLoading(), this.addMessage(
+          `Command "${t}" failed: ${String(r)}`,
+          "system"
+        ), r;
+      }
+    this.addMessage(
+      `No handler registered for command "${t}".`,
+      "system"
+    );
   }
   init() {
     var t, s;
@@ -1541,7 +1556,13 @@ class Bt {
     this.injectOverlayStyles();
     const e = document.getElementById("foisit-overlay-container");
     if (e && e instanceof HTMLElement) {
-      this.container = e, this.chatWindow = e.querySelector(".foisit-chat"), this.messagesContainer = e.querySelector(".foisit-messages"), this.input = e.querySelector("input.foisit-input"), ((t = this.config.floatingButton) == null ? void 0 : t.visible) !== !1 && !e.querySelector(".foisit-floating-btn") && this.renderFloatingButton(), this.chatWindow || this.renderChatWindow(), this.config.enableGestureActivation && (this.gestureHandler = new ae(), this.gestureHandler.setupTripleTapListener(() => this.toggle()));
+      this.container = e, this.chatWindow = e.querySelector(
+        ".foisit-chat"
+      ), this.messagesContainer = e.querySelector(
+        ".foisit-messages"
+      ), this.input = e.querySelector(
+        "input.foisit-input"
+      ), ((t = this.config.floatingButton) == null ? void 0 : t.visible) !== !1 && !e.querySelector(".foisit-floating-btn") && this.renderFloatingButton(), this.chatWindow || this.renderChatWindow(), this.config.enableGestureActivation && (this.gestureHandler = new ae(), this.gestureHandler.setupTripleTapListener(() => this.toggle()));
       return;
     }
     this.container = document.createElement("div"), this.container.id = "foisit-overlay-container", this.container.className = "foisit-overlay-container", document.body.appendChild(this.container), ((s = this.config.floatingButton) == null ? void 0 : s.visible) !== !1 && this.renderFloatingButton(), this.renderChatWindow(), this.config.enableGestureActivation && (this.gestureHandler = new ae(), this.gestureHandler.setupTripleTapListener(() => this.toggle()));
@@ -1642,47 +1663,53 @@ class Bt {
         v.value = "", v.textContent = "Select...", u.appendChild(v);
         const x = (p) => {
           (p ?? []).forEach((C) => {
-            const b = document.createElement("option");
-            b.value = String(C.value ?? C.label ?? ""), b.textContent = String(C.label ?? C.value ?? ""), u.appendChild(b);
+            const y = document.createElement("option");
+            y.value = String(C.value ?? C.label ?? ""), y.textContent = String(C.label ?? C.value ?? ""), u.appendChild(y);
           });
         };
         if (Array.isArray(d.options) && d.options.length)
           x(d.options);
         else if (typeof d.getOptions == "function") {
           const p = d.getOptions, C = document.createElement("option");
-          C.value = "", C.textContent = "Loading...", u.appendChild(C), Promise.resolve().then(() => p()).then((b) => {
+          C.value = "", C.textContent = "Loading...", u.appendChild(C), Promise.resolve().then(() => p()).then((y) => {
             for (; u.options.length > 1; ) u.remove(1);
-            x(b);
+            x(y);
           }).catch(() => {
             for (; u.options.length > 1; ) u.remove(1);
-            const b = document.createElement("option");
-            b.value = "", b.textContent = "Error loading options", u.appendChild(b);
+            const y = document.createElement("option");
+            y.value = "", y.textContent = "Error loading options", u.appendChild(y);
           });
         }
         d.defaultValue != null && (u.value = String(d.defaultValue)), m = u;
       } else if (d.type === "file") {
         const u = d, v = document.createElement("input");
         v.className = "foisit-form-input", v.type = "file", u.accept && Array.isArray(u.accept) && (v.accept = u.accept.join(",")), u.multiple && (v.multiple = !0), u.capture && (u.capture === !0 ? v.setAttribute("capture", "") : v.setAttribute("capture", String(u.capture))), v.addEventListener("change", async () => {
-          const x = Array.from(v.files || []), p = y;
+          const x = Array.from(v.files || []), p = b;
           if (p.style.display = "none", p.textContent = "", x.length === 0) return;
           const C = u.maxFiles ?? (u.multiple ? 10 : 1);
           if (x.length > C) {
             p.textContent = `Please select at most ${C} file(s).`, p.style.display = "block";
             return;
           }
-          const b = u.maxSizeBytes ?? 1 / 0, g = x.reduce((w, B) => w + B.size, 0);
-          if (x.some((w) => w.size > b)) {
-            p.textContent = `One or more files exceed the maximum size of ${Math.round(b / 1024)} KB.`, p.style.display = "block";
+          const y = u.maxSizeBytes ?? 1 / 0, g = x.reduce((w, B) => w + B.size, 0);
+          if (x.some((w) => w.size > y)) {
+            p.textContent = `One or more files exceed the maximum size of ${Math.round(
+              y / 1024
+            )} KB.`, p.style.display = "block";
             return;
           }
           const V = u.maxTotalBytes ?? 1 / 0;
           if (g > V) {
-            p.textContent = `Total selected files exceed the maximum of ${Math.round(V / 1024)} KB.`, p.style.display = "block";
+            p.textContent = `Total selected files exceed the maximum of ${Math.round(
+              V / 1024
+            )} KB.`, p.style.display = "block";
             return;
           }
           if (u.accept && Array.isArray(u.accept)) {
             const w = u.accept;
-            if (!x.every((U) => U.type ? w.some((W) => W.startsWith(".") ? U.name.toLowerCase().endsWith(W.toLowerCase()) : U.type === W || U.type.startsWith(W.split("/")[0] + "/")) : !0)) {
+            if (!x.every((U) => U.type ? w.some(
+              (W) => W.startsWith(".") ? U.name.toLowerCase().endsWith(W.toLowerCase()) : U.type === W || U.type.startsWith(W.split("/")[0] + "/")
+            ) : !0)) {
               p.textContent = "One or more files have an unsupported type.", p.style.display = "block";
               return;
             }
@@ -1692,8 +1719,8 @@ class Bt {
         const u = document.createElement("input");
         u.className = "foisit-form-input", d.type === "string" && (u.placeholder = d.placeholder || "Type here..."), d.type === "number" ? (u.type = "number", typeof d.min == "number" && (u.min = String(d.min)), typeof d.max == "number" && (u.max = String(d.max)), typeof d.step == "number" && (u.step = String(d.step)), d.defaultValue != null && (u.value = String(d.defaultValue))) : d.type === "date" ? (u.type = "date", typeof d.min == "string" && (u.min = d.min), typeof d.max == "string" && (u.max = d.max), d.defaultValue != null && (u.value = String(d.defaultValue))) : (u.type = "text", d.defaultValue != null && (u.value = String(d.defaultValue))), m = u;
       }
-      const y = r();
-      l.appendChild(m), l.appendChild(y), o.push({
+      const b = r();
+      l.appendChild(m), l.appendChild(b), o.push({
         name: d.name,
         type: d.type,
         el: m,
@@ -1714,16 +1741,18 @@ class Bt {
       });
       for (const m of o) {
         if (m.type === "file") {
-          const x = m.el.parentElement, p = x == null ? void 0 : x.querySelector(".foisit-form-error"), C = m.el, b = Array.from(C.files || []);
-          if (m.required && b.length === 0) {
+          const x = m.el.parentElement, p = x == null ? void 0 : x.querySelector(
+            ".foisit-form-error"
+          ), C = m.el, y = Array.from(C.files || []);
+          if (m.required && y.length === 0) {
             f = !0, C.classList.add("foisit-error-border"), p && (p.textContent = "This file is required", p.style.display = "block");
             continue;
           }
-          if (b.length === 0) continue;
+          if (y.length === 0) continue;
           const g = (t ?? []).find((w) => w.name === m.name), V = (g == null ? void 0 : g.delivery) ?? "file";
           if (g != null && g.maxWidth || g != null && g.maxHeight)
             try {
-              const w = await this.getImageDimensions(b[0]);
+              const w = await this.getImageDimensions(y[0]);
               if (g.maxWidth && w.width > g.maxWidth) {
                 f = !0, p && (p.textContent = `Image width must be ≤ ${g.maxWidth}px`, p.style.display = "block");
                 continue;
@@ -1736,7 +1765,7 @@ class Bt {
             }
           if (g != null && g.maxDurationSec)
             try {
-              const w = await this.getMediaDuration(b[0]);
+              const w = await this.getMediaDuration(y[0]);
               if (w && w > g.maxDurationSec) {
                 f = !0, p && (p.textContent = `Media duration must be ≤ ${g.maxDurationSec}s`, p.style.display = "block");
                 continue;
@@ -1744,10 +1773,12 @@ class Bt {
             } catch {
             }
           if (V === "file")
-            l[m.name] = g != null && g.multiple ? b : b[0];
+            l[m.name] = g != null && g.multiple ? y : y[0];
           else if (V === "base64")
             try {
-              const w = await Promise.all(b.map((B) => this.readFileAsDataURL(B)));
+              const w = await Promise.all(
+                y.map((B) => this.readFileAsDataURL(B))
+              );
               l[m.name] = g != null && g.multiple ? w : w[0];
             } catch {
               f = !0, p && (p.textContent = "Failed to encode file(s) to base64.", p.style.display = "block");
@@ -1755,17 +1786,19 @@ class Bt {
             }
           continue;
         }
-        const y = (m.el.value ?? "").toString().trim(), u = m.el.parentElement, v = u == null ? void 0 : u.querySelector(".foisit-form-error");
-        if (m.required && (y == null || y === "")) {
+        const b = (m.el.value ?? "").toString().trim(), u = m.el.parentElement, v = u == null ? void 0 : u.querySelector(
+          ".foisit-form-error"
+        );
+        if (m.required && (b == null || b === "")) {
           f = !0, m.el.classList.add("foisit-error-border"), v && (v.textContent = "This field is required", v.style.display = "block");
           continue;
         }
-        if (y !== "")
+        if (b !== "")
           if (m.type === "number") {
-            const x = Number(y);
+            const x = Number(b);
             Number.isNaN(x) || (l[m.name] = x);
           } else
-            l[m.name] = y;
+            l[m.name] = b;
       }
       if (f) {
         n.classList.add("foisit-shake"), setTimeout(() => n.classList.remove("foisit-shake"), 400);
@@ -1796,7 +1829,10 @@ class Bt {
   /** Subtle entrance animation for new messages */
   animateMessageEntrance(e, t) {
     if (!e) return;
-    e.style.transition = `opacity ${t}ms cubic-bezier(0.22, 0.9, 0.32, 1), transform ${Math.max(120, t)}ms cubic-bezier(0.22, 0.9, 0.32, 1)`, requestAnimationFrame(() => {
+    e.style.transition = `opacity ${t}ms cubic-bezier(0.22, 0.9, 0.32, 1), transform ${Math.max(
+      120,
+      t
+    )}ms cubic-bezier(0.22, 0.9, 0.32, 1)`, requestAnimationFrame(() => {
       e.style.opacity = "1", e.style.transform = "translateY(0)";
     });
     const s = () => {
@@ -1840,7 +1876,22 @@ class Bt {
   /** Simple markdown renderer for AI responses */
   renderMarkdown(e) {
     let t = this.escapeHtml(e);
-    return t = t.replace(/```(\w*)\n([\s\S]*?)```/g, (s, n, o) => `<pre class="foisit-code-block"><code${n ? ` class="language-${n}"` : ""}>${o.trim()}</code></pre>`), t = t.replace(/`([^`]+)`/g, '<code class="foisit-inline-code">$1</code>'), t = t.replace(/^###### (.+)$/gm, '<h6 class="foisit-md-h6">$1</h6>'), t = t.replace(/^##### (.+)$/gm, '<h5 class="foisit-md-h5">$1</h5>'), t = t.replace(/^#### (.+)$/gm, '<h4 class="foisit-md-h4">$1</h4>'), t = t.replace(/^### (.+)$/gm, '<h3 class="foisit-md-h3">$1</h3>'), t = t.replace(/^## (.+)$/gm, '<h2 class="foisit-md-h2">$1</h2>'), t = t.replace(/^# (.+)$/gm, '<h1 class="foisit-md-h1">$1</h1>'), t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__([^_]+)__/g, "<strong>$1</strong>"), t = t.replace(/\*([^*]+)\*/g, "<em>$1</em>"), t = t.replace(new RegExp("(?<!_)_([^_]+)_(?!_)", "g"), "<em>$1</em>"), t = t.replace(/~~([^~]+)~~/g, "<del>$1</del>"), t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="foisit-md-link">$1</a>'), t = t.replace(/^[\-\*] (.+)$/gm, '<li class="foisit-md-li">$1</li>'), t = t.replace(/(<li class="foisit-md-li">.*<\/li>\n?)+/g, (s) => `<ul class="foisit-md-ul">${s}</ul>`), t = t.replace(/^\d+\. (.+)$/gm, '<li class="foisit-md-li">$1</li>'), t = t.replace(new RegExp('(?<!<\\/ul>)(<li class="foisit-md-li">.*<\\/li>\\n?)+', "g"), (s) => s.includes("<ul") ? s : `<ol class="foisit-md-ol">${s}</ol>`), t = t.replace(/^&gt; (.+)$/gm, '<blockquote class="foisit-md-blockquote">$1</blockquote>'), t = t.replace(/^(---|___|\*\*\*)$/gm, '<hr class="foisit-md-hr">'), t = t.replace(/\n\n+/g, '</p><p class="foisit-md-p">'), t = t.replace(/\n/g, "<br>"), t.match(/^<(h[1-6]|ul|ol|pre|blockquote|hr|p)/) || (t = `<p class="foisit-md-p">${t}</p>`), t;
+    return t = t.replace(/```(\w*)\n([\s\S]*?)```/g, (s, n, o) => `<pre class="foisit-code-block"><code${n ? ` class="language-${n}"` : ""}>${o.trim()}</code></pre>`), t = t.replace(
+      /`([^`]+)`/g,
+      '<code class="foisit-inline-code">$1</code>'
+    ), t = t.replace(/^###### (.+)$/gm, '<h6 class="foisit-md-h6">$1</h6>'), t = t.replace(/^##### (.+)$/gm, '<h5 class="foisit-md-h5">$1</h5>'), t = t.replace(/^#### (.+)$/gm, '<h4 class="foisit-md-h4">$1</h4>'), t = t.replace(/^### (.+)$/gm, '<h3 class="foisit-md-h3">$1</h3>'), t = t.replace(/^## (.+)$/gm, '<h2 class="foisit-md-h2">$1</h2>'), t = t.replace(/^# (.+)$/gm, '<h1 class="foisit-md-h1">$1</h1>'), t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__([^_]+)__/g, "<strong>$1</strong>"), t = t.replace(/\*([^*]+)\*/g, "<em>$1</em>"), t = t.replace(new RegExp("(?<!_)_([^_]+)_(?!_)", "g"), "<em>$1</em>"), t = t.replace(/~~([^~]+)~~/g, "<del>$1</del>"), t = t.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener noreferrer" class="foisit-md-link">$1</a>'
+    ), t = t.replace(/^[\-\*] (.+)$/gm, '<li class="foisit-md-li">$1</li>'), t = t.replace(
+      /(<li class="foisit-md-li">.*<\/li>\n?)+/g,
+      (s) => `<ul class="foisit-md-ul">${s}</ul>`
+    ), t = t.replace(/^\d+\. (.+)$/gm, '<li class="foisit-md-li">$1</li>'), t = t.replace(
+      new RegExp('(?<!<\\/ul>)(<li class="foisit-md-li">.*<\\/li>\\n?)+', "g"),
+      (s) => s.includes("<ul") ? s : `<ol class="foisit-md-ol">${s}</ol>`
+    ), t = t.replace(
+      /^&gt; (.+)$/gm,
+      '<blockquote class="foisit-md-blockquote">$1</blockquote>'
+    ), t = t.replace(/^(---|___|\*\*\*)$/gm, '<hr class="foisit-md-hr">'), t = t.replace(/\n\n+/g, '</p><p class="foisit-md-p">'), t = t.replace(/\n/g, "<br>"), t.match(/^<(h[1-6]|ul|ol|pre|blockquote|hr|p)/) || (t = `<p class="foisit-md-p">${t}</p>`), t;
   }
   readFileAsDataURL(e) {
     return new Promise((t, s) => {
@@ -1853,7 +1904,10 @@ class Bt {
       try {
         const s = URL.createObjectURL(e), n = new Image();
         n.onload = () => {
-          const o = { width: n.naturalWidth || n.width, height: n.naturalHeight || n.height };
+          const o = {
+            width: n.naturalWidth || n.width,
+            height: n.naturalHeight || n.height
+          };
           URL.revokeObjectURL(s), t(o);
         }, n.onerror = () => {
           URL.revokeObjectURL(s), t({ width: 0, height: 0 });
@@ -1887,57 +1941,93 @@ class Bt {
   injectOverlayStyles() {
     if (document.getElementById("foisit-overlay-styles")) return;
     const e = document.createElement("style");
-    e.id = "foisit-overlay-styles", e.textContent = `
-      :root {
-        /* LIGHT MODE (Default) - Smoother gradient */
-        /* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
-        --foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
-        --foisit-border: 1px solid rgba(255, 255, 255, 0.25);
-        --foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-        --foisit-text: #333;
-
-        /* Input */
-        --foisit-input-color: #333;
-        --foisit-input-placeholder: rgba(60, 60, 67, 0.6);
+    e.id = "foisit-overlay-styles";
+    const t = this.config.theme || "glass", s = this.config.themeColors || {};
+    if (t === "solid") {
+      const n = s.background || "#1a1a2e", o = s.text || "#ffffff", a = s.accent || "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", r = s.userBubbleBg || "rgba(102, 126, 234, 0.2)", c = s.systemBubbleBg || "rgba(255, 255, 255, 0.08)", h = s.border || "rgba(255, 255, 255, 0.1)";
+      e.textContent = `
+        :root {
+          /* SOLID THEME - Custom Colors */
+          --foisit-bg: ${n};
+          --foisit-border: 1px solid ${h};
+          --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
+          --foisit-text: ${o};
+          --foisit-accent: ${a};
+          --foisit-backdrop: none;
 
-        /* Bubbles */
-        --foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
-        --foisit-bubble-user-text: #333;
+          /* Input */
+          --foisit-input-color: ${o};
+          --foisit-input-placeholder: ${o}99;
 
-        --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
-        --foisit-bubble-sys-text: #333;
+          /* Bubbles */
+          --foisit-bubble-user-bg: ${r};
+          --foisit-bubble-user-text: ${o};
 
-        /* Form Colors */
-        --foisit-req-star: #ef4444; /* Red asterisk */
-        --foisit-error-text: #dc2626;
-        --foisit-error-border: #fca5a5;
-      }
+          --foisit-bubble-sys-bg: ${c};
+          --foisit-bubble-sys-text: ${o}ee;
 
-      @media (prefers-color-scheme: dark) {
+          /* Form Colors */
+          --foisit-req-star: #f87171;
+          --foisit-error-text: #fca5a5;
+          --foisit-error-border: #f87171;
+        }
+      `;
+    } else
+      e.textContent = `
         :root {
-          /* DARK MODE */
-          --foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
-          --foisit-border: 1px solid rgba(255, 255, 255, 0.1);
-          --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
-          --foisit-text: #fff;
+          /* LIGHT MODE (Default) - Smoother gradient */
+          /* Changed: Softer, right-focused radial highlight to avoid a heavy white bottom */
+          --foisit-bg: radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
+          --foisit-border: 1px solid rgba(255, 255, 255, 0.25);
+          --foisit-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+          --foisit-text: #333;
+          --foisit-backdrop: blur(20px);
 
           /* Input */
-          --foisit-input-color: white;
-          --foisit-input-placeholder: rgba(235, 235, 245, 0.5);
+          --foisit-input-color: #333;
+          --foisit-input-placeholder: rgba(60, 60, 67, 0.6);
 
           /* Bubbles */
-          --foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
-          --foisit-bubble-user-text: white;
+          --foisit-bubble-user-bg: rgba(0, 0, 0, 0.04);
+          --foisit-bubble-user-text: #333;
 
-          --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
-          --foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
+          --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.45);
+          --foisit-bubble-sys-text: #333;
 
           /* Form Colors */
-          --foisit-req-star: #f87171;
-          --foisit-error-text: #fca5a5;
-          --foisit-error-border: #f87171;
+          --foisit-req-star: #ef4444; /* Red asterisk */
+          --foisit-error-text: #dc2626;
+          --foisit-error-border: #fca5a5;
         }
-      }
+
+        @media (prefers-color-scheme: dark) {
+          :root {
+            /* DARK MODE */
+            --foisit-bg: linear-gradient(135deg, rgba(40, 40, 40, 0.65), rgba(40, 40, 40, 0.25));
+            --foisit-border: 1px solid rgba(255, 255, 255, 0.1);
+            --foisit-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+            --foisit-text: #fff;
+            --foisit-backdrop: blur(20px);
+
+            /* Input */
+            --foisit-input-color: white;
+            --foisit-input-placeholder: rgba(235, 235, 245, 0.5);
+
+            /* Bubbles */
+            --foisit-bubble-user-bg: rgba(255, 255, 255, 0.1);
+            --foisit-bubble-user-text: white;
+
+            --foisit-bubble-sys-bg: rgba(255, 255, 255, 0.05);
+            --foisit-bubble-sys-text: rgba(255, 255, 255, 0.9);
+
+            /* Form Colors */
+            --foisit-req-star: #f87171;
+            --foisit-error-text: #fca5a5;
+            --foisit-error-border: #f87171;
+          }
+        }
+      `;
+    e.textContent += `
 
       @keyframes foisitPulse {
         0%, 100% { transform: scale(0.8); opacity: 0.5; }
@@ -1985,8 +2075,8 @@ class Bt {
         border: var(--foisit-border);
         box-shadow: var(--foisit-shadow);
 
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: var(--foisit-backdrop);
+        -webkit-backdrop-filter: var(--foisit-backdrop);
 
         border-radius: 18px;
         display: none;
@@ -2195,8 +2285,8 @@ class Bt {
         border: 1px solid rgba(255,255,255,0.2);
         background: var(--foisit-bg);
         color: var(--foisit-text);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: var(--foisit-backdrop);
+        -webkit-backdrop-filter: var(--foisit-backdrop);
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
         cursor: pointer;
         pointer-events: auto;
@@ -2304,7 +2394,9 @@ class Ut {
     }), this.fallbackHandler = new Ft(), this.voiceProcessor = new Ht(), this.textToSpeech = new qe(), this.stateManager = new zt(), this.gestureHandler = new ae(), this.overlayManager = new Bt({
       floatingButton: this.config.floatingButton,
       inputPlaceholder: this.config.inputPlaceholder,
-      enableGestureActivation: this.config.enableGestureActivation
+      enableGestureActivation: this.config.enableGestureActivation,
+      theme: this.config.theme,
+      themeColors: this.config.themeColors
     }), this.overlayManager.setExternalCommandExecutor(async (t) => this.commandHandler.executeCommand(t)), this.config.commands.forEach((t) => this.commandHandler.addCommand(t)), this.config.fallbackResponse && this.fallbackHandler.setFallbackMessage(this.config.fallbackResponse), this.overlayManager.registerCallbacks(
       async (t) => {
         if (typeof t == "string")
@@ -2320,11 +2412,15 @@ class Ut {
   }
   /** Start listening for activation and commands */
   startListening() {
-    console.log("AssistantService: Voice is disabled; startListening() is a no-op.");
+    console.log(
+      "AssistantService: Voice is disabled; startListening() is a no-op."
+    );
   }
   /** Stop listening */
   stopListening() {
-    console.log("AssistantService: Voice is disabled; stopListening() is a no-op."), this.isActivated = !1;
+    console.log(
+      "AssistantService: Voice is disabled; stopListening() is a no-op."
+    ), this.isActivated = !1;
   }
   /** Reset activation state so the next activation flow can occur. */
   reactivate() {
@@ -2370,7 +2466,10 @@ class Ut {
     }
     if (t.type === "error") {
       const s = typeof e == "string" ? e : "";
-      s ? (this.fallbackHandler.handleFallback(s), this.overlayManager.addMessage(this.fallbackHandler.getFallbackMessage(), "system")) : t.message && this.overlayManager.addMessage(t.message, "system");
+      s ? (this.fallbackHandler.handleFallback(s), this.overlayManager.addMessage(
+        this.fallbackHandler.getFallbackMessage(),
+        "system"
+      )) : t.message && this.overlayManager.addMessage(t.message, "system");
       return;
     }
     if ((t.type === "ambiguous" || t.type === "confirm") && t.options) {
@@ -2481,7 +2580,7 @@ const Wt = /* @__PURE__ */ ht({
   return t;
 };
 function Yt(i, e, t, s, n, o) {
-  return yt(i.$slots, "default");
+  return bt(i.$slots, "default");
 }
 const Gt = /* @__PURE__ */ jt(Wt, [["render", Yt]]), Kt = () => {
   const i = ft("assistantService");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foisit/vue-wrapper",
-  "version": "2.4.5",
+  "version": "3.0.0",
   "main": "./index.mjs",
   "types": "./index.d.ts",
   "exports": {
@@ -26,7 +26,7 @@
     "accessibility",
     "website-integration"
   ],
-  "homepage": "https://foisit-vue-demo.netlify.app/",
+  "homepage": "https://foisit-vue.netlify.app/",
   "funding": {
     "type": "github",
     "url": "https://github.com/sponsors/boluwatifee4"