@voxket-ai/voxket-live 1.0.101 → 1.0.103

package/dist/index.js

@@ -13855,7 +13855,7 @@ function fb({ onSendMessage: e, onSendAttachments: t, disabled: n, theme: r, onE
       A.type.startsWith("image/") ? t([A]) : console.warn("Selected file is not an image"), f.current && (f.current.value = "");
     }
   };
-  return /* @__PURE__ */ u("div", { className: `${m ? "px-2 py-1" : "px-4 py-3"} !w-full backdrop-blur-xl border-0 shadow-lg `, children: /* @__PURE__ */ u("form", { onSubmit: v, className: `flex items-center !w-full mx-auto ${m ? "max-w-xs" : "max-w-4xl"}`, children: /* @__PURE__ */ S("div", { className: `flex items-center ${m ? "gap-1" : "gap-2"} !w-full backdrop-blur-md rounded-full ${m ? "px-2 py-1" : "px-3 py-2"} shadow-sm hover:shadow-md focus-within:shadow-lg focus-within:ring-2 focus-within:ring-blue-500/30 focus-within:border-blue-500/50 transition-all duration-200 border ${r === "light" ? "bg-white/90" : b.chatInput.container}`, children: [
+  return /* @__PURE__ */ u("div", { className: `${m ? "px-2 py-1" : "px-4 py-3"} !w-full backdrop-blur-xl border-0 shadow-lg `, children: /* @__PURE__ */ u("form", { onSubmit: v, className: `w-full mx-auto ${m ? "max-w-xs" : ""}`, children: /* @__PURE__ */ S("div", { className: `flex items-center ${m ? "gap-1" : "gap-2"} !w-full backdrop-blur-md rounded-full ${m ? "px-2 py-1" : "px-3 py-2"} shadow-sm hover:shadow-md focus-within:shadow-lg focus-within:ring-2 focus-within:ring-blue-500/30 focus-within:border-blue-500/50 transition-all duration-200 border ${r === "light" ? "bg-white/90" : b.chatInput.container}`, children: [
     /* @__PURE__ */ u(
       se.button,
       {
@@ -14425,7 +14425,7 @@ function xb({
         }
       )
     ] });
-  const D = x && v ? "fullscreen" : o, Y = o === "popup", N = D === "fullscreen" ? x && v ? "fixed inset-0 z-[9999] flex flex-col h-screen w-screen bg-black" : "flex flex-col h-full w-full max-w-none" : "flex flex-col h-full w-full backdrop-blur-sm max-h-full overflow-hidden", z = D === "fullscreen" ? x && v ? "flex items-center w-full justify-between px-4 pt-3 pb-3 bg-black/80 text-white border-b border-gray-700" : `flex items-center w-full justify-between px-6 pt-5 pb-4 border-b ${A.chatHeader.container}` : `flex items-center w-full justify-between ${Y ? "px-3 pt-3 pb-3 text-xs" : "px-5 pt-6 pb-5"} border-b ${A.chatHeader.container}`, J = D === "fullscreen" ? x && v ? "flex-1 overflow-y-auto scrollbar-hide p-4 w-full max-w-none chat-scrollable min-h-0" : "flex-1 overflow-y-auto scrollbar-hide p-6 w-full max-w-none chat-scrollable min-h-0" : `flex-1 overflow-y-auto scrollbar-hide w-full ${Y ? "p-2 text-xs" : "p-4"} chat-scrollable min-h-0`, Z = "flex-shrink-0 !w-full", H = () => {
+  const D = x && v ? "fullscreen" : o, Y = o === "popup", N = D === "fullscreen" ? x && v ? "fixed inset-0 z-[9999] flex flex-col h-screen w-screen bg-black" : "flex flex-col h-full w-full max-w-none" : "flex flex-col h-full w-full backdrop-blur-sm max-h-full overflow-hidden", z = D === "fullscreen" ? x && v ? "flex items-center w-full justify-between px-4 pt-3 pb-3 bg-black/80 text-white border-b border-gray-700" : `flex items-center w-full justify-between px-6 pt-3 pb-4 border-b ${A.chatHeader.container}` : `flex items-center w-full justify-between ${Y ? "px-3 pt-3 pb-3 text-xs" : "px-5 pt-3 pb-5"} border-b ${A.chatHeader.container}`, J = D === "fullscreen" ? x && v ? "flex-1 overflow-y-auto scrollbar-hide p-4 w-full max-w-none chat-scrollable min-h-0" : "flex-1 overflow-y-auto scrollbar-hide p-6 w-full max-w-none chat-scrollable min-h-0" : `flex-1 overflow-y-auto scrollbar-hide w-full ${Y ? "p-2 text-xs" : "p-4"} chat-scrollable min-h-0`, Z = "flex-shrink-0 !w-full", H = () => {
     T(!1), n && n();
   };
   return /* @__PURE__ */ S("div", { className: `${N} chat-view`, children: [
@@ -16765,6 +16765,488 @@ function Rd() {
 .voxket-widget-root .text-blue-600 {
   color: #2563eb !important;
 }
+
+/* GLOBAL STYLES FOR POPUP AND FULLSCREEN MODES */
+/* These styles apply globally when popup/fullscreen elements are rendered outside normal widget scope */
+
+/* Popup and fullscreen containers */
+.fixed.z-\\[9999\\],
+div[class*="fixed"][class*="z-[9999]"] {
+  /* Ensure fixed positioned elements get theme context */
+}
+
+/* Global theme classes for popup/fullscreen */
+.theme-vox {
+  color: #ffffff;
+}
+
+.theme-dark {
+  color: #ffffff;  
+}
+
+.theme-light {
+  color: #1f2937;
+}
+
+/* Global background utilities for popup/fullscreen */
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+/* Global gradient stops */
+.from-black {
+  --tw-gradient-from: #000000;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #111827;
+}
+
+.from-\\[\\#171727\\] {
+  --tw-gradient-from: #171727;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23, 23, 39, 0));
+}
+
+.to-\\[\\#12121F\\] {
+  --tw-gradient-to: #12121F;
+}
+
+.from-slate-950 {
+  --tw-gradient-from: #020617;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 6, 23, 0));
+}
+
+.via-slate-900 {
+  --tw-gradient-to: rgba(15, 23, 42, 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #0f172a, var(--tw-gradient-to, rgba(15, 23, 42, 0));
+}
+
+.to-gray-950 {
+  --tw-gradient-to: #030712;
+}
+
+.from-sky-50 {
+  --tw-gradient-from: #f0f9ff;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 249, 255, 0));
+}
+
+.via-white {
+  --tw-gradient-to: rgba(255, 255, 255, 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
+.to-indigo-50 {
+  --tw-gradient-to: #eef2ff;
+}
+
+.from-\\[\\#0a0a1a\\] {
+  --tw-gradient-from: #0a0a1a;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(10, 10, 26, 0));
+}
+
+.to-\\[\\#0f0f23\\] {
+  --tw-gradient-to: #0f0f23;
+}
+
+/* Global background colors */
+.bg-black\\/40 {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.bg-\\[\\#171727\\]\\/90 {
+  background-color: rgba(23, 23, 39, 0.9);
+}
+
+.bg-\\[\\#1E1E2E\\] {
+  background-color: #1E1E2E;
+}
+
+.bg-\\[\\#0a0a1a\\] {
+  background-color: #0a0a1a;
+}
+
+.bg-\\[\\#0f0f23\\] {
+  background-color: #0f0f23;
+}
+
+.bg-slate-950 {
+  background-color: #020617;
+}
+
+.bg-slate-900 {
+  background-color: #0f172a;
+}
+
+.bg-sky-50 {
+  background-color: #f0f9ff;
+}
+
+.bg-indigo-50 {
+  background-color: #eef2ff;
+}
+
+/* Global backdrop blur */
+.backdrop-blur-sm {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Global layout utilities */
+.fixed {
+  position: fixed;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.shadow-2xl {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Global button and interactive element styles */
+.bg-gradient-to-br.from-blue-500.to-purple-600 {
+  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
+}
+
+.bg-gradient-to-br.from-green-500.to-blue-600 {
+  background: linear-gradient(to bottom right, #10b981, #2563eb);
+}
+
+.bg-gradient-to-br.from-purple-500.to-pink-600 {
+  background: linear-gradient(to bottom right, #8b5cf6, #db2777);
+}
+
+.bg-gradient-to-br.from-orange-500.to-red-600 {
+  background: linear-gradient(to bottom right, #f97316, #dc2626);
+}
+
+/* Button hover effects */
+.hover\\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+.hover\\:shadow-lg:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Button states and colors */
+.bg-blue-600 {
+  background-color: #2563eb;
+}
+
+.bg-green-500 {
+  background-color: #10b981;
+}
+
+.bg-purple-600 {
+  background-color: #9333ea;
+}
+
+.bg-orange-500 {
+  background-color: #f97316;
+}
+
+.hover\\:bg-blue-700:hover {
+  background-color: #1d4ed8;
+}
+
+.hover\\:bg-green-600:hover {
+  background-color: #059669;
+}
+
+.hover\\:bg-purple-700:hover {
+  background-color: #7c3aed;
+}
+
+.hover\\:bg-orange-600:hover {
+  background-color: #ea580c;
+}
+
+/* Disabled button states */
+.disabled\\:opacity-50:disabled,
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.disabled\\:cursor-not-allowed:disabled,
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/* Text colors for buttons */
+.text-gray-800 {
+  color: #1f2937;
+}
+
+/* Transitions */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Bar visualizer styles */
+.bg-blue-400 {
+  background-color: #60a5fa;
+}
+
+.bg-blue-500 {
+  background-color: #3b82f6;
+}
+
+.bg-purple-400 {
+  background-color: #c084fc;
+}
+
+.bg-purple-500 {
+  background-color: #a855f7;
+}
+
+.bg-pink-400 {
+  background-color: #f472b6;
+}
+
+.bg-pink-500 {
+  background-color: #ec4899;
+}
+
+/* Animation classes */
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+/* Spacing utilities */
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.m-2 {
+  margin: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+/* Font styles */
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+/* Border and radius */
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+/* Focus states */
+.focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\\:ring-2:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* Overflow */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+/* Transform */
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* Cursor */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Popup Trigger positioning overrides for all contexts */
+.voxket-popup-trigger {
+  position: fixed !important;
+  z-index: 9999 !important;
+}
+
+.voxket-popup-trigger[data-position="bottom-right"] {
+  bottom: 1rem !important;
+  right: 1rem !important;
+  left: auto !important;
+  top: auto !important;
+}
+
+.voxket-popup-trigger[data-position="bottom-left"] {
+  bottom: 1rem !important;
+  left: 1rem !important;
+  right: auto !important;
+  top: auto !important;
+}
+
+.voxket-popup-trigger[data-position="top-right"] {
+  top: 1rem !important;
+  right: 1rem !important;
+  left: auto !important;
+  bottom: auto !important;
+}
+
+.voxket-popup-trigger[data-position="top-left"] {
+  top: 1rem !important;
+  left: 1rem !important;
+  right: auto !important;
+  bottom: auto !important;
+}
 `, t = document.createElement("style");
   t.type = "text/css", t.setAttribute("data-voxket-styles", "true"), t.textContent = e, document.head.appendChild(t), Xa = !0;
 }
@@ -17930,7 +18412,36 @@ function $b({
     se.button,
     {
       onClick: e,
-      className: `fixed ${o[n]} z-50 px-4 py-2 rounded-full shadow-lg ${i.popupTrigger} transition-all duration-200 hover:scale-105`,
+      className: `voxket-popup-trigger fixed ${o[n]} z-[9999] px-4 py-2 rounded-full shadow-lg ${i.popupTrigger} transition-all duration-200 hover:scale-105`,
+      "data-position": n,
+      style: {
+        position: "fixed",
+        zIndex: 9999,
+        ...n === "bottom-right" && {
+          bottom: "1rem",
+          right: "1rem",
+          left: "auto",
+          top: "auto"
+        },
+        ...n === "bottom-left" && {
+          bottom: "1rem",
+          left: "1rem",
+          right: "auto",
+          top: "auto"
+        },
+        ...n === "top-right" && {
+          top: "1rem",
+          right: "1rem",
+          left: "auto",
+          bottom: "auto"
+        },
+        ...n === "top-left" && {
+          top: "1rem",
+          left: "1rem",
+          right: "auto",
+          bottom: "auto"
+        }
+      },
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0, opacity: 0 },
@@ -18038,15 +18549,6 @@ function Ja({
       className: `theme-${t} ${s.card}`,
       style: { height: "100%", maxHeight: "100%" },
       children: [
-        i && /* @__PURE__ */ u(
-          "button",
-          {
-            onClick: i,
-            className: "absolute top-4 right-4 z-20 w-10 h-10 rounded-full bg-gray-900 bg-opacity-90 text-white flex items-center justify-center hover:bg-gray-800 transition-all duration-200 shadow-lg border border-gray-700 backdrop-blur-sm",
-            title: "Enter Fullscreen",
-            children: /* @__PURE__ */ u("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ u("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) })
-          }
-        ),
         /* @__PURE__ */ u("div", { className: s.cardTopGradient }),
         /* @__PURE__ */ u("div", { className: s.cardPurpleBlur }),
         /* @__PURE__ */ u("div", { className: s.cardPinkBlur }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voxket-ai/voxket-live",
-  "version": "1.0.101",
+  "version": "1.0.103",
   "description": "A React widget for embedding Voxket-powered audio/video/chat experiences.",
   "type": "module",
   "main": "./dist/index.cjs",