@wallavi/widget 1.6.7 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -56,7 +56,7 @@ function styleInject(css, { insertAt } = {}) {
56
56
  }
57
57
 
58
58
  // src/styles.css
59
- styleInject(".ww-pointer-events-none {\n pointer-events: none;\n}\n.ww-absolute {\n position: absolute;\n}\n.ww-relative {\n position: relative;\n}\n.ww-inset-0 {\n inset: 0px;\n}\n.ww-left-2\\.5 {\n left: 0.625rem;\n}\n.ww-top-1\\/2 {\n top: 50%;\n}\n.ww-z-50 {\n z-index: 50;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ww-mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.ww-mt-1 {\n margin-top: 0.25rem;\n}\n.ww-block {\n display: block;\n}\n.ww-inline-block {\n display: inline-block;\n}\n.ww-flex {\n display: flex;\n}\n.ww-inline-flex {\n display: inline-flex;\n}\n.ww-grid {\n display: grid;\n}\n.ww-hidden {\n display: none;\n}\n.ww-h-10 {\n height: 2.5rem;\n}\n.ww-h-2\\.5 {\n height: 0.625rem;\n}\n.ww-h-20 {\n height: 5rem;\n}\n.ww-h-3 {\n height: 0.75rem;\n}\n.ww-h-3\\.5 {\n height: 0.875rem;\n}\n.ww-h-4 {\n height: 1rem;\n}\n.ww-h-6 {\n height: 1.5rem;\n}\n.ww-h-7 {\n height: 1.75rem;\n}\n.ww-h-8 {\n height: 2rem;\n}\n.ww-h-full {\n height: 100%;\n}\n.ww-max-h-32 {\n max-height: 8rem;\n}\n.ww-max-h-48 {\n max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n max-height: 180px;\n}\n.ww-w-0\\.5 {\n width: 0.125rem;\n}\n.ww-w-10 {\n width: 2.5rem;\n}\n.ww-w-2\\.5 {\n width: 0.625rem;\n}\n.ww-w-20 {\n width: 5rem;\n}\n.ww-w-3 {\n width: 0.75rem;\n}\n.ww-w-3\\.5 {\n width: 0.875rem;\n}\n.ww-w-4 {\n width: 1rem;\n}\n.ww-w-6 {\n width: 1.5rem;\n}\n.ww-w-7 {\n width: 1.75rem;\n}\n.ww-w-8 {\n width: 2rem;\n}\n.ww-w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.ww-w-full {\n width: 100%;\n}\n.ww-min-w-0 {\n min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n max-width: 82%;\n}\n.ww-max-w-none {\n max-width: none;\n}\n.ww-flex-1 {\n flex: 1 1 0%;\n}\n.ww-shrink-0 {\n flex-shrink: 0;\n}\n.ww-rotate-180 {\n --tw-rotate: 180deg;\n 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));\n}\n@keyframes ww-pulse {\n 50% {\n opacity: .5;\n }\n}\n.ww-animate-pulse {\n animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.ww-animate-spin {\n animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n cursor: default;\n}\n.ww-cursor-pointer {\n cursor: pointer;\n}\n.ww-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.ww-resize-none {\n resize: none;\n}\n.ww-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-col {\n flex-direction: column;\n}\n.ww-flex-wrap {\n flex-wrap: wrap;\n}\n.ww-items-start {\n align-items: flex-start;\n}\n.ww-items-end {\n align-items: flex-end;\n}\n.ww-items-center {\n align-items: center;\n}\n.ww-justify-end {\n justify-content: flex-end;\n}\n.ww-justify-center {\n justify-content: center;\n}\n.ww-justify-between {\n justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n gap: 0.125rem;\n}\n.ww-gap-1 {\n gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n gap: 0.375rem;\n}\n.ww-gap-2 {\n gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n gap: 0.625rem;\n}\n.ww-gap-4 {\n gap: 1rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n overflow: hidden;\n}\n.ww-overflow-y-auto {\n overflow-y: auto;\n}\n.ww-overscroll-contain {\n overscroll-behavior: contain;\n}\n.ww-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.ww-rounded {\n border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n border-radius: 1rem;\n}\n.ww-rounded-full {\n border-radius: 9999px;\n}\n.ww-rounded-lg {\n border-radius: var(--radius);\n}\n.ww-rounded-xl {\n border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n border-width: 1px;\n}\n.ww-border-2 {\n border-width: 2px;\n}\n.ww-border-b {\n border-bottom-width: 1px;\n}\n.ww-border-l-2 {\n border-left-width: 2px;\n}\n.ww-border-t {\n border-top-width: 1px;\n}\n.ww-border-background {\n border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/70 {\n border-color: hsl(var(--border) / 0.7);\n}\n.ww-border-muted {\n border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-white\\/20 {\n border-color: rgb(255 255 255 / 0.2);\n}\n.ww-bg-background {\n background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/40 {\n background-color: hsl(var(--background) / 0.4);\n}\n.ww-bg-background\\/50 {\n background-color: hsl(var(--background) / 0.5);\n}\n.ww-bg-background\\/90 {\n background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-foreground {\n background-color: hsl(var(--foreground));\n}\n.ww-bg-foreground\\/60 {\n background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/50 {\n background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/5 {\n background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n background-color: transparent;\n}\n.ww-bg-white\\/10 {\n background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n background-color: rgb(255 255 255 / 0.15);\n}\n.ww-fill-current {\n fill: currentColor;\n}\n.ww-object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.ww-p-0\\.5 {\n padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n padding: 0.375rem;\n}\n.ww-p-3 {\n padding: 0.75rem;\n}\n.ww-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.ww-px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n padding-left: 0.625rem;\n padding-right: 0.625rem;\n}\n.ww-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n padding-left: 0.875rem;\n padding-right: 0.875rem;\n}\n.ww-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n padding-bottom: 0.375rem;\n}\n.ww-pb-4 {\n padding-bottom: 1rem;\n}\n.ww-pl-2 {\n padding-left: 0.5rem;\n}\n.ww-pl-7 {\n padding-left: 1.75rem;\n}\n.ww-pr-0\\.5 {\n padding-right: 0.125rem;\n}\n.ww-pr-3 {\n padding-right: 0.75rem;\n}\n.ww-pt-2 {\n padding-top: 0.5rem;\n}\n.ww-pt-5 {\n padding-top: 1.25rem;\n}\n.ww-text-left {\n text-align: left;\n}\n.ww-text-center {\n text-align: center;\n}\n.ww-align-middle {\n vertical-align: middle;\n}\n.ww-text-\\[10\\.5px\\] {\n font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n font-size: 12.5px;\n}\n.ww-text-\\[12px\\] {\n font-size: 12px;\n}\n.ww-text-\\[8px\\] {\n font-size: 8px;\n}\n.ww-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.ww-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.ww-font-medium {\n font-weight: 500;\n}\n.ww-font-semibold {\n font-weight: 600;\n}\n.ww-uppercase {\n text-transform: uppercase;\n}\n.ww-leading-none {\n line-height: 1;\n}\n.ww-leading-relaxed {\n line-height: 1.625;\n}\n.ww-leading-snug {\n line-height: 1.375;\n}\n.ww-leading-tight {\n line-height: 1.25;\n}\n.ww-tracking-widest {\n letter-spacing: 0.1em;\n}\n.ww-text-background {\n color: hsl(var(--background));\n}\n.ww-text-black\\/40 {\n color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n --tw-text-opacity: 1;\n color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-muted-foreground {\n color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n.ww-line-through {\n text-decoration-line: line-through;\n}\n.ww-no-underline {\n text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n opacity: 1;\n}\n.ww-opacity-30 {\n opacity: 0.3;\n}\n.ww-opacity-35 {\n opacity: 0.35;\n}\n.ww-opacity-40 {\n opacity: 0.4;\n}\n.ww-opacity-60 {\n opacity: 0.6;\n}\n.ww-opacity-70 {\n opacity: 0.7;\n}\n.ww-opacity-80 {\n opacity: 0.8;\n}\n.ww-shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.ww-ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/60 {\n --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-duration-100 {\n transition-duration: 100ms;\n}\n.ww-duration-150 {\n transition-duration: 150ms;\n}\n.ww-duration-200 {\n transition-duration: 200ms;\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n.ww-duration-100 {\n animation-duration: 100ms;\n}\n.ww-duration-150 {\n animation-duration: 150ms;\n}\n.ww-duration-200 {\n animation-duration: 200ms;\n}\n.wallavi-widget *,\n.wallavi-widget *::before,\n.wallavi-widget *::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n}\n.wallavi-widget button {\n cursor: pointer;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n max-width: 100%;\n height: auto;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::-moz-placeholder {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::placeholder {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.focus-within\\:ww-ring-1:focus-within {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:ww-border-foreground\\/25:hover {\n border-color: hsl(var(--foreground) / 0.25);\n}\n.hover\\:ww-border-foreground\\/30:hover {\n border-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-background:hover {\n background-color: hsl(var(--background));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-muted:hover {\n background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-foreground:hover {\n color: hsl(var(--foreground));\n}\n.focus\\:ww-ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.disabled\\:ww-opacity-40:disabled {\n opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n opacity: 0.5;\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
59
+ styleInject(".ww-pointer-events-none {\n pointer-events: none;\n}\n.ww-absolute {\n position: absolute;\n}\n.ww-relative {\n position: relative;\n}\n.ww-inset-0 {\n inset: 0px;\n}\n.ww-left-2\\.5 {\n left: 0.625rem;\n}\n.ww-top-1\\/2 {\n top: 50%;\n}\n.ww-z-50 {\n z-index: 50;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ww-mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.ww-mt-1 {\n margin-top: 0.25rem;\n}\n.ww-block {\n display: block;\n}\n.ww-inline-block {\n display: inline-block;\n}\n.ww-flex {\n display: flex;\n}\n.ww-inline-flex {\n display: inline-flex;\n}\n.ww-grid {\n display: grid;\n}\n.ww-hidden {\n display: none;\n}\n.ww-h-10 {\n height: 2.5rem;\n}\n.ww-h-2 {\n height: 0.5rem;\n}\n.ww-h-2\\.5 {\n height: 0.625rem;\n}\n.ww-h-20 {\n height: 5rem;\n}\n.ww-h-3 {\n height: 0.75rem;\n}\n.ww-h-3\\.5 {\n height: 0.875rem;\n}\n.ww-h-4 {\n height: 1rem;\n}\n.ww-h-6 {\n height: 1.5rem;\n}\n.ww-h-7 {\n height: 1.75rem;\n}\n.ww-h-8 {\n height: 2rem;\n}\n.ww-h-full {\n height: 100%;\n}\n.ww-max-h-32 {\n max-height: 8rem;\n}\n.ww-max-h-48 {\n max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n max-height: 180px;\n}\n.ww-w-0\\.5 {\n width: 0.125rem;\n}\n.ww-w-10 {\n width: 2.5rem;\n}\n.ww-w-2 {\n width: 0.5rem;\n}\n.ww-w-2\\.5 {\n width: 0.625rem;\n}\n.ww-w-20 {\n width: 5rem;\n}\n.ww-w-3 {\n width: 0.75rem;\n}\n.ww-w-3\\.5 {\n width: 0.875rem;\n}\n.ww-w-4 {\n width: 1rem;\n}\n.ww-w-6 {\n width: 1.5rem;\n}\n.ww-w-7 {\n width: 1.75rem;\n}\n.ww-w-8 {\n width: 2rem;\n}\n.ww-w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.ww-w-full {\n width: 100%;\n}\n.ww-min-w-0 {\n min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n max-width: 82%;\n}\n.ww-max-w-none {\n max-width: none;\n}\n.ww-flex-1 {\n flex: 1 1 0%;\n}\n.ww-shrink-0 {\n flex-shrink: 0;\n}\n.ww-rotate-180 {\n --tw-rotate: 180deg;\n 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));\n}\n@keyframes ww-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ww-animate-ping {\n animation: ww-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ww-pulse {\n 50% {\n opacity: .5;\n }\n}\n.ww-animate-pulse {\n animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.ww-animate-spin {\n animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n cursor: default;\n}\n.ww-cursor-pointer {\n cursor: pointer;\n}\n.ww-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.ww-resize-none {\n resize: none;\n}\n.ww-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-col {\n flex-direction: column;\n}\n.ww-flex-wrap {\n flex-wrap: wrap;\n}\n.ww-items-start {\n align-items: flex-start;\n}\n.ww-items-end {\n align-items: flex-end;\n}\n.ww-items-center {\n align-items: center;\n}\n.ww-justify-end {\n justify-content: flex-end;\n}\n.ww-justify-center {\n justify-content: center;\n}\n.ww-justify-between {\n justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n gap: 0.125rem;\n}\n.ww-gap-1 {\n gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n gap: 0.375rem;\n}\n.ww-gap-2 {\n gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n gap: 0.625rem;\n}\n.ww-gap-4 {\n gap: 1rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n overflow: hidden;\n}\n.ww-overflow-y-auto {\n overflow-y: auto;\n}\n.ww-overscroll-contain {\n overscroll-behavior: contain;\n}\n.ww-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.ww-rounded {\n border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n border-radius: 1rem;\n}\n.ww-rounded-full {\n border-radius: 9999px;\n}\n.ww-rounded-lg {\n border-radius: var(--radius);\n}\n.ww-rounded-xl {\n border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n border-width: 1px;\n}\n.ww-border-2 {\n border-width: 2px;\n}\n.ww-border-b {\n border-bottom-width: 1px;\n}\n.ww-border-l-2 {\n border-left-width: 2px;\n}\n.ww-border-t {\n border-top-width: 1px;\n}\n.ww-border-background {\n border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/70 {\n border-color: hsl(var(--border) / 0.7);\n}\n.ww-border-muted {\n border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-white\\/20 {\n border-color: rgb(255 255 255 / 0.2);\n}\n.ww-bg-background {\n background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/40 {\n background-color: hsl(var(--background) / 0.4);\n}\n.ww-bg-background\\/50 {\n background-color: hsl(var(--background) / 0.5);\n}\n.ww-bg-background\\/90 {\n background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-emerald-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-foreground {\n background-color: hsl(var(--foreground));\n}\n.ww-bg-foreground\\/60 {\n background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/50 {\n background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/5 {\n background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n background-color: transparent;\n}\n.ww-bg-white\\/10 {\n background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n background-color: rgb(255 255 255 / 0.15);\n}\n.ww-fill-current {\n fill: currentColor;\n}\n.ww-object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.ww-p-0\\.5 {\n padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n padding: 0.375rem;\n}\n.ww-p-3 {\n padding: 0.75rem;\n}\n.ww-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.ww-px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n padding-left: 0.625rem;\n padding-right: 0.625rem;\n}\n.ww-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n padding-left: 0.875rem;\n padding-right: 0.875rem;\n}\n.ww-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n padding-bottom: 0.375rem;\n}\n.ww-pb-2 {\n padding-bottom: 0.5rem;\n}\n.ww-pb-4 {\n padding-bottom: 1rem;\n}\n.ww-pl-2 {\n padding-left: 0.5rem;\n}\n.ww-pl-7 {\n padding-left: 1.75rem;\n}\n.ww-pr-0\\.5 {\n padding-right: 0.125rem;\n}\n.ww-pr-3 {\n padding-right: 0.75rem;\n}\n.ww-pt-2 {\n padding-top: 0.5rem;\n}\n.ww-pt-5 {\n padding-top: 1.25rem;\n}\n.ww-text-left {\n text-align: left;\n}\n.ww-text-center {\n text-align: center;\n}\n.ww-align-middle {\n vertical-align: middle;\n}\n.ww-text-\\[10\\.5px\\] {\n font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n font-size: 12.5px;\n}\n.ww-text-\\[12px\\] {\n font-size: 12px;\n}\n.ww-text-\\[8px\\] {\n font-size: 8px;\n}\n.ww-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.ww-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.ww-font-medium {\n font-weight: 500;\n}\n.ww-font-semibold {\n font-weight: 600;\n}\n.ww-uppercase {\n text-transform: uppercase;\n}\n.ww-leading-none {\n line-height: 1;\n}\n.ww-leading-relaxed {\n line-height: 1.625;\n}\n.ww-leading-snug {\n line-height: 1.375;\n}\n.ww-leading-tight {\n line-height: 1.25;\n}\n.ww-tracking-widest {\n letter-spacing: 0.1em;\n}\n.ww-text-background {\n color: hsl(var(--background));\n}\n.ww-text-black\\/40 {\n color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n --tw-text-opacity: 1;\n color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-muted-foreground {\n color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n.ww-line-through {\n text-decoration-line: line-through;\n}\n.ww-no-underline {\n text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n opacity: 1;\n}\n.ww-opacity-25 {\n opacity: 0.25;\n}\n.ww-opacity-30 {\n opacity: 0.3;\n}\n.ww-opacity-35 {\n opacity: 0.35;\n}\n.ww-opacity-40 {\n opacity: 0.4;\n}\n.ww-opacity-60 {\n opacity: 0.6;\n}\n.ww-opacity-70 {\n opacity: 0.7;\n}\n.ww-opacity-75 {\n opacity: 0.75;\n}\n.ww-opacity-80 {\n opacity: 0.8;\n}\n.ww-shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.ww-ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/60 {\n --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-duration-100 {\n transition-duration: 100ms;\n}\n.ww-duration-150 {\n transition-duration: 150ms;\n}\n.ww-duration-200 {\n transition-duration: 200ms;\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n.ww-duration-100 {\n animation-duration: 100ms;\n}\n.ww-duration-150 {\n animation-duration: 150ms;\n}\n.ww-duration-200 {\n animation-duration: 200ms;\n}\n.wallavi-widget *,\n.wallavi-widget *::before,\n.wallavi-widget *::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n}\n.wallavi-widget button {\n -moz-appearance: none;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n cursor: pointer;\n}\n.wallavi-widget textarea,\n.wallavi-widget input,\n.wallavi-widget select {\n font-family: inherit;\n font-size: inherit;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n max-width: 100%;\n height: auto;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::-moz-placeholder {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::placeholder {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.focus-within\\:ww-ring-1:focus-within {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:ww-border-foreground\\/25:hover {\n border-color: hsl(var(--foreground) / 0.25);\n}\n.hover\\:ww-border-foreground\\/30:hover {\n border-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-background:hover {\n background-color: hsl(var(--background));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-muted:hover {\n background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-foreground:hover {\n color: hsl(var(--foreground));\n}\n.hover\\:ww-opacity-80:hover {\n opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n opacity: 0.85;\n}\n.focus\\:ww-ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.active\\:ww-scale-\\[0\\.98\\]:active {\n --tw-scale-x: 0.98;\n --tw-scale-y: 0.98;\n 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));\n}\n.disabled\\:ww-pointer-events-none:disabled {\n pointer-events: none;\n}\n.disabled\\:ww-opacity-40:disabled {\n opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n opacity: 0.5;\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
60
60
  var twMerge = tailwindMerge.extendTailwindMerge({ prefix: "ww-" });
61
61
  var cn = (...inputs) => twMerge(clsx.clsx(inputs));
62
62
 
@@ -105,7 +105,8 @@ function useChat({
105
105
  userContext,
106
106
  persist = false,
107
107
  onNavigate,
108
- playgroundOverrides
108
+ playgroundOverrides,
109
+ customBackend
109
110
  }) {
110
111
  const persistKey = persist ? `wallavi_${agentId}` : null;
111
112
  const onNavigateRef = react.useRef(onNavigate);
@@ -125,26 +126,47 @@ function useChat({
125
126
  const [streaming, setStreaming] = react.useState(false);
126
127
  const [threadId, setThreadId] = react.useState(() => {
127
128
  if (persistKey && typeof window !== "undefined") {
128
- const saved = sessionStorage.getItem(`${persistKey}_tid`);
129
+ const saved = localStorage.getItem(`${persistKey}_tid`);
129
130
  if (saved) return saved;
130
131
  }
131
132
  return crypto.randomUUID();
132
133
  });
133
134
  const streamingMsgIdRef = react.useRef(null);
134
135
  react.useEffect(() => {
135
- if (!persistKey) return;
136
+ if (customBackend || !persistKey) return;
136
137
  try {
137
138
  sessionStorage.setItem(`${persistKey}_msgs`, JSON.stringify(messages));
138
139
  } catch {
139
140
  }
140
- }, [persistKey, messages]);
141
+ }, [customBackend, persistKey, messages]);
141
142
  react.useEffect(() => {
142
- if (!persistKey) return;
143
+ if (customBackend || !persistKey) return;
143
144
  try {
144
- sessionStorage.setItem(`${persistKey}_tid`, threadId);
145
+ localStorage.setItem(`${persistKey}_tid`, threadId);
145
146
  } catch {
146
147
  }
147
- }, [persistKey, threadId]);
148
+ }, [customBackend, persistKey, threadId]);
149
+ react.useEffect(() => {
150
+ if (customBackend || !persistKey || typeof window === "undefined") return;
151
+ if (messages.length > 0) return;
152
+ void (async () => {
153
+ try {
154
+ const res = await fetch(
155
+ `${API_URL}/api/chat/messages?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`
156
+ );
157
+ if (!res.ok) return;
158
+ const { data } = await res.json();
159
+ if (!data?.length) return;
160
+ const restored = data.map((m) => ({
161
+ id: m.id,
162
+ role: m.role,
163
+ parts: m.parts.filter((p) => p?.type)
164
+ })).filter((m) => m.parts.length > 0);
165
+ if (restored.length > 0) setMessages(restored);
166
+ } catch {
167
+ }
168
+ })();
169
+ }, []);
148
170
  const reset = react.useCallback(() => {
149
171
  setMessages([]);
150
172
  setInput("");
@@ -155,6 +177,7 @@ function useChat({
155
177
  try {
156
178
  sessionStorage.removeItem(`${persistKey}_msgs`);
157
179
  sessionStorage.removeItem(`${persistKey}_tid`);
180
+ localStorage.removeItem(`${persistKey}_tid`);
158
181
  } catch {
159
182
  }
160
183
  }
@@ -299,6 +322,15 @@ function useChat({
299
322
  const pendingAttachmentsRef = react.useRef([]);
300
323
  const send = react.useCallback(
301
324
  async (text) => {
325
+ if (customBackend) {
326
+ const content = (text ?? input).trim();
327
+ const attachments2 = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
328
+ pendingAttachmentsRef.current = [];
329
+ if (!content && !attachments2?.length || customBackend.streaming) return;
330
+ setInput("");
331
+ await customBackend.send(content, attachments2);
332
+ return;
333
+ }
302
334
  const userInput = (text ?? input).trim();
303
335
  if (!userInput || streaming) return;
304
336
  setInput("");
@@ -387,7 +419,18 @@ function useChat({
387
419
  });
388
420
  await send(lastText);
389
421
  }, [streaming, messages, send]);
390
- return { messages, input, setInput, streaming, threadId, send, queueAttachments, regenerate, reset, selectPickerOption };
422
+ return {
423
+ messages: customBackend ? customBackend.messages : messages,
424
+ streaming: customBackend ? customBackend.streaming : streaming,
425
+ input,
426
+ setInput,
427
+ threadId,
428
+ send,
429
+ queueAttachments,
430
+ regenerate,
431
+ reset: customBackend?.reset ?? reset,
432
+ selectPickerOption
433
+ };
391
434
  }
392
435
  function getPreferredMimeType() {
393
436
  if (typeof MediaRecorder === "undefined") return "";
@@ -771,11 +814,12 @@ function PlanStepIcon({ status }) {
771
814
  if (status === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" });
772
815
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-h-3 ww-w-3 ww-rounded-full ww-border-2 ww-border-muted-foreground/30" });
773
816
  }
774
- function PlanCard({ part }) {
817
+ function PlanCard({ part, onSend, disabled }) {
775
818
  const successCount = part.steps.filter((s) => s.status === "success").length;
776
819
  const hasExecuting = part.steps.some((s) => s.status === "executing");
777
820
  const allDone = successCount === part.steps.length && part.steps.length > 0;
778
821
  const anyFailed = part.steps.some((s) => s.status === "failed");
822
+ const allPending = part.steps.length > 0 && part.steps.every((s) => s.status === "pending");
779
823
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-rounded-xl ww-border ww-bg-background ww-overflow-hidden ww-text-xs ww-w-full ww-shadow-sm", children: [
780
824
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-2 ww-px-3 ww-py-2 ww-bg-muted/50 ww-border-b", children: [
781
825
  hasExecuting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-animate-spin ww-text-primary/80" }) : allDone ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-destructive" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-primary/70" }),
@@ -816,7 +860,34 @@ function PlanCard({ part }) {
816
860
  ]
817
861
  },
818
862
  step.index
819
- )) })
863
+ )) }),
864
+ allPending && onSend && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2 ww-px-3 ww-py-2.5 ww-border-t", children: [
865
+ /* @__PURE__ */ jsxRuntime.jsxs(
866
+ "button",
867
+ {
868
+ onClick: () => onSend("s\xED, proceder"),
869
+ disabled,
870
+ className: "ww-flex-1 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-rounded-lg ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-opacity hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
871
+ style: { backgroundColor: "var(--primary, #18181b)", color: "var(--primary-foreground, #fff)" },
872
+ children: [
873
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
874
+ "Proceder"
875
+ ]
876
+ }
877
+ ),
878
+ /* @__PURE__ */ jsxRuntime.jsxs(
879
+ "button",
880
+ {
881
+ onClick: () => onSend("cancelar"),
882
+ disabled,
883
+ className: "ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-rounded-lg ww-px-3 ww-py-1.5 ww-text-xs ww-font-medium ww-bg-muted ww-text-muted-foreground ww-transition-opacity hover:ww-opacity-80 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
884
+ children: [
885
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
886
+ "Cancelar"
887
+ ]
888
+ }
889
+ )
890
+ ] })
820
891
  ] });
821
892
  }
822
893
  function ThinkingDots() {
@@ -1000,7 +1071,8 @@ function MessageBubble({
1000
1071
  profilePicture,
1001
1072
  isStreaming,
1002
1073
  showThinking = true,
1003
- onPickerSelect
1074
+ onPickerSelect,
1075
+ onSend
1004
1076
  }) {
1005
1077
  const isUser = message.role === "user";
1006
1078
  const textPart = message.parts.find((p) => p.type === "text");
@@ -1023,12 +1095,12 @@ function MessageBubble({
1023
1095
  ) });
1024
1096
  }
1025
1097
  const visibleToolParts = showThinking ? toolParts : [];
1026
- const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0;
1098
+ const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0 && planParts.length === 0;
1027
1099
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start", children: [
1028
1100
  /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
1029
1101
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
1030
1102
  showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
1031
- planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { part: p }, p.planId)),
1103
+ planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { part: p, onSend, disabled: isStreaming }, p.planId)),
1032
1104
  visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
1033
1105
  pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
1034
1106
  PickerSelector,
@@ -1091,7 +1163,7 @@ function ChatMessages({
1091
1163
  const showGreeting = messages.length === 0;
1092
1164
  react.useEffect(() => {
1093
1165
  bottomRef.current?.scrollIntoView({ behavior: "smooth" });
1094
- }, [messages]);
1166
+ }, [messages, streaming]);
1095
1167
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-flex ww-flex-col ww-overflow-y-auto ww-overscroll-contain", children: [
1096
1168
  showGreeting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pt-5", children: [
1097
1169
  /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { className: "ww-h-7 ww-w-7 ww-shrink-0 ww-mt-0.5 ww-border", children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback3, { className: "ww-text-[10px] ww-font-semibold ww-bg-primary ww-text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
@@ -1107,10 +1179,41 @@ function ChatMessages({
1107
1179
  profilePicture,
1108
1180
  isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
1109
1181
  showThinking,
1110
- onPickerSelect
1182
+ onPickerSelect,
1183
+ onSend: i === messages.length - 1 ? onSuggest : void 0
1111
1184
  },
1112
1185
  msg.id
1113
1186
  )) }),
1187
+ streaming && messages.length > 0 && messages[messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pb-2", children: [
1188
+ /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { className: "ww-h-7 ww-w-7 ww-shrink-0 ww-mt-0.5 ww-border", children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback3, { className: "ww-text-[10px] ww-font-semibold ww-bg-primary ww-text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
1189
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
1190
+ @keyframes wDotBounce {
1191
+ 0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
1192
+ 40% { transform: translateY(-6px) scale(1.15); opacity: 1; }
1193
+ }
1194
+ ` }),
1195
+ /* @__PURE__ */ jsxRuntime.jsx(
1196
+ "div",
1197
+ {
1198
+ className: "ww-bg-muted",
1199
+ style: { display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "18px 18px 18px 4px", padding: "13px 18px" },
1200
+ children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
1201
+ "span",
1202
+ {
1203
+ style: {
1204
+ display: "block",
1205
+ width: 7,
1206
+ height: 7,
1207
+ borderRadius: "50%",
1208
+ backgroundColor: "currentColor",
1209
+ animation: `wDotBounce 1.2s cubic-bezier(0.4,0,0.2,1) ${i * 0.16}s infinite`
1210
+ }
1211
+ },
1212
+ i
1213
+ ))
1214
+ }
1215
+ )
1216
+ ] }),
1114
1217
  showGreeting && suggestedMessages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-2 ww-px-4 ww-pb-4", children: suggestedMessages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx(
1115
1218
  "button",
1116
1219
  {
@@ -1286,7 +1389,7 @@ function ChatWidget({
1286
1389
  suggestedMessages = [],
1287
1390
  messagePlaceholder,
1288
1391
  watermark = true,
1289
- watermarkLogoUrl = "https:ww-//app.wallavi.com/wallavi.svg",
1392
+ watermarkLogoUrl = "https://app.wallavi.com/wallavi.svg",
1290
1393
  footer,
1291
1394
  theme,
1292
1395
  showThinking = false,
@@ -1300,13 +1403,15 @@ function ChatWidget({
1300
1403
  enableVoice = false,
1301
1404
  voiceAutoSend = false,
1302
1405
  enableAttachments = false,
1406
+ customBackend,
1303
1407
  className,
1304
1408
  onClose,
1305
1409
  onReset,
1306
1410
  onExpand,
1307
- expanded
1411
+ expanded,
1412
+ embedded = false
1308
1413
  }) {
1309
- const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides });
1414
+ const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides, customBackend });
1310
1415
  const voice = useVoice({
1311
1416
  agentId,
1312
1417
  onTranscript: (text) => {
@@ -1359,6 +1464,7 @@ function ChatWidget({
1359
1464
  };
1360
1465
  const isDark = theme === "dark";
1361
1466
  const cssVars = {
1467
+ fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
1362
1468
  colorScheme: theme,
1363
1469
  // Inline style has higher specificity than any host-site stylesheet,
1364
1470
  // so background-color set here cannot be overridden by host CSS.
@@ -1381,7 +1487,8 @@ function ChatWidget({
1381
1487
  "div",
1382
1488
  {
1383
1489
  className: cn(
1384
- "wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-rounded-2xl ww-border ww-shadow-xl ww-bg-background ww-h-full ww-relative",
1490
+ "wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative",
1491
+ !embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
1385
1492
  isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
1386
1493
  className
1387
1494
  ),
@@ -1409,6 +1516,20 @@ function ChatWidget({
1409
1516
  expanded
1410
1517
  }
1411
1518
  ),
1519
+ customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
1520
+ "div",
1521
+ {
1522
+ className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
1523
+ style: { backgroundColor: `${userMessageColor}0d` },
1524
+ children: [
1525
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
1526
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
1527
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
1528
+ ] }),
1529
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
1530
+ ]
1531
+ }
1532
+ ),
1412
1533
  /* @__PURE__ */ jsxRuntime.jsx(
1413
1534
  ChatMessages,
1414
1535
  {
@@ -1424,6 +1545,30 @@ function ChatWidget({
1424
1545
  onPickerSelect: chat.selectPickerOption
1425
1546
  }
1426
1547
  ),
1548
+ customBackend?.footerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(
1549
+ "button",
1550
+ {
1551
+ onClick: () => void customBackend.footerAction.onClick(),
1552
+ disabled: customBackend.footerAction.loading,
1553
+ style: customBackend.footerAction.icon === "human" ? { backgroundColor: userMessageColor, color: "#ffffff", boxShadow: `0 2px 12px ${userMessageColor}55` } : { borderColor: `${userMessageColor}35`, backgroundColor: `${userMessageColor}0d`, color: userMessageColor },
1554
+ className: [
1555
+ "ww-w-full ww-flex ww-items-center ww-gap-2 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-all",
1556
+ "hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
1557
+ customBackend.footerAction.icon === "human" ? "" : "ww-border"
1558
+ ].join(" "),
1559
+ children: [
1560
+ customBackend.footerAction.loading ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0", viewBox: "0 0 24 24", fill: "none", children: [
1561
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "ww-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
1562
+ /* @__PURE__ */ jsxRuntime.jsx("path", { className: "ww-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
1563
+ ] }) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "ww-w-3.5 ww-h-3.5 ww-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "ww-w-3.5 ww-h-3.5 ww-shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
1564
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
1565
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
1566
+ ] }),
1567
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
1568
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" }) })
1569
+ ]
1570
+ }
1571
+ ) }),
1427
1572
  /* @__PURE__ */ jsxRuntime.jsx(
1428
1573
  ChatInput,
1429
1574
  {
@@ -1452,7 +1597,7 @@ function ChatWidget({
1452
1597
  /* @__PURE__ */ jsxRuntime.jsxs(
1453
1598
  "a",
1454
1599
  {
1455
- href: "https:ww-//wallavi.com",
1600
+ href: "https://wallavi.com",
1456
1601
  target: "_blank",
1457
1602
  rel: "noopener noreferrer",
1458
1603
  className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
@@ -1531,9 +1676,233 @@ function useAutoConfig(agentId, enabled) {
1531
1676
  }, [agentId, enabled]);
1532
1677
  return result;
1533
1678
  }
1679
+ function toWidgetMsg(m) {
1680
+ return {
1681
+ id: m.id,
1682
+ role: m.role === "customer" ? "user" : "assistant",
1683
+ parts: [{ type: "text", text: m.content }],
1684
+ attachments: m.metadata?.attachments ?? void 0
1685
+ };
1686
+ }
1687
+ function useSupportChat({
1688
+ inboxToken,
1689
+ apiBase = "https://app.wallavi.com",
1690
+ requestHumanLabel = "Hablar con un agente",
1691
+ returnToAiLabel
1692
+ }) {
1693
+ const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
1694
+ const STORAGE_KEY = `wlv_support_${inboxToken}`;
1695
+ const base = apiBase.replace(/\/$/, "");
1696
+ const [session, setSession] = react.useState(null);
1697
+ const [rawMessages, setRawMessages] = react.useState([]);
1698
+ const [sending, setSending] = react.useState(false);
1699
+ const [isAiMode, setIsAiMode] = react.useState(false);
1700
+ const [agentTyping, setAgentTyping] = react.useState(false);
1701
+ const [requestingHuman, setRequestingHuman] = react.useState(false);
1702
+ const [returningToAi, setReturningToAi] = react.useState(false);
1703
+ const typingTimerRef = react.useRef(null);
1704
+ react.useEffect(() => {
1705
+ if (!enabled) return;
1706
+ try {
1707
+ const saved = localStorage.getItem(STORAGE_KEY);
1708
+ if (saved) {
1709
+ const { session: s, isAiMode: ai } = JSON.parse(saved);
1710
+ setSession(s);
1711
+ setIsAiMode(ai ?? false);
1712
+ }
1713
+ } catch {
1714
+ localStorage.removeItem(STORAGE_KEY);
1715
+ }
1716
+ }, [STORAGE_KEY, enabled]);
1717
+ const loadMessages = react.useCallback(async (sess) => {
1718
+ try {
1719
+ const res = await fetch(`${base}/api/support-chat/${sess.conversationId}/messages`, {
1720
+ headers: { "x-visitor-token": sess.visitorToken }
1721
+ });
1722
+ const data = await res.json();
1723
+ if (Array.isArray(data.data)) setRawMessages(data.data);
1724
+ } catch {
1725
+ }
1726
+ }, [base]);
1727
+ react.useEffect(() => {
1728
+ if (!enabled || !session) return;
1729
+ void loadMessages(session);
1730
+ let ablyClient = null;
1731
+ const setupAbly = async () => {
1732
+ try {
1733
+ const res = await fetch(`${base}/api/support-chat/${session.conversationId}/ably-token`, {
1734
+ headers: { "x-visitor-token": session.visitorToken }
1735
+ });
1736
+ if (!res.ok) return;
1737
+ const { tokenRequest, channel: channelName } = await res.json();
1738
+ const AblyLib = (await import('ably')).default;
1739
+ ablyClient = new AblyLib.Realtime({ authCallback: (_, cb) => cb(null, tokenRequest) });
1740
+ const ch = ablyClient.channels.get(channelName);
1741
+ ch.subscribe((msg) => {
1742
+ const event = { type: msg.name, ...msg.data };
1743
+ if (event.type === "message.created" && event.message) {
1744
+ setRawMessages((prev) => {
1745
+ if (prev.some((m) => m.id === event.message.id)) return prev;
1746
+ return [...prev.filter((m) => !m.id.startsWith("tmp_")), event.message];
1747
+ });
1748
+ } else if (event.type === "agent.typing") {
1749
+ setAgentTyping(!!event.isTyping);
1750
+ if (event.isTyping) {
1751
+ if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
1752
+ typingTimerRef.current = setTimeout(() => setAgentTyping(false), 6e3);
1753
+ } else {
1754
+ if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
1755
+ }
1756
+ } else if (event.type === "mode.changed") {
1757
+ const newIsAi = event.mode === "auto";
1758
+ setIsAiMode(newIsAi);
1759
+ setSession((s) => {
1760
+ if (s) localStorage.setItem(STORAGE_KEY, JSON.stringify({ session: s, isAiMode: newIsAi }));
1761
+ return s;
1762
+ });
1763
+ }
1764
+ });
1765
+ } catch {
1766
+ }
1767
+ };
1768
+ void setupAbly();
1769
+ const pollId = setInterval(() => void loadMessages(session), 3e4);
1770
+ return () => {
1771
+ if (ablyClient) try {
1772
+ ablyClient.close();
1773
+ } catch {
1774
+ }
1775
+ clearInterval(pollId);
1776
+ if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
1777
+ };
1778
+ }, [session, STORAGE_KEY, base, loadMessages]);
1779
+ const send = react.useCallback(async (text, attachments) => {
1780
+ if (!text.trim() && !attachments?.length) return;
1781
+ if (sending) return;
1782
+ setSending(true);
1783
+ if (!session) {
1784
+ try {
1785
+ const res = await fetch(`${base}/api/support-chat/start`, {
1786
+ method: "POST",
1787
+ headers: { "Content-Type": "application/json" },
1788
+ body: JSON.stringify({
1789
+ inboxToken,
1790
+ message: text || `[${attachments.length} archivo(s)]`,
1791
+ attachments
1792
+ })
1793
+ });
1794
+ const data = await res.json();
1795
+ if (data.data) {
1796
+ const sess = {
1797
+ conversationId: data.data.conversationId,
1798
+ visitorToken: data.data.visitorToken
1799
+ };
1800
+ const ai = data.data.isAiMode ?? false;
1801
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({ session: sess, isAiMode: ai }));
1802
+ setSession(sess);
1803
+ setIsAiMode(ai);
1804
+ if (Array.isArray(data.data.messages)) {
1805
+ setRawMessages(data.data.messages);
1806
+ }
1807
+ }
1808
+ } catch {
1809
+ }
1810
+ } else {
1811
+ setRawMessages((prev) => [...prev, {
1812
+ id: `tmp_${Date.now()}`,
1813
+ role: "customer",
1814
+ content: text || `[${attachments.length} archivo(s)]`,
1815
+ createdAt: (/* @__PURE__ */ new Date()).toISOString(),
1816
+ metadata: attachments?.length ? { attachments } : void 0
1817
+ }]);
1818
+ try {
1819
+ const body = { content: text };
1820
+ if (attachments?.length) body.attachments = attachments;
1821
+ const res = await fetch(`${base}/api/support-chat/${session.conversationId}/messages`, {
1822
+ method: "POST",
1823
+ headers: { "Content-Type": "application/json", "x-visitor-token": session.visitorToken },
1824
+ body: JSON.stringify(body)
1825
+ });
1826
+ const data = await res.json();
1827
+ if (data.data?.aiReply) {
1828
+ setRawMessages((prev) => {
1829
+ const withoutTemp = prev.filter((m) => !m.id.startsWith("tmp_"));
1830
+ return [...withoutTemp, data.data.aiReply];
1831
+ });
1832
+ }
1833
+ } catch {
1834
+ }
1835
+ }
1836
+ setSending(false);
1837
+ }, [session, sending, inboxToken, base, STORAGE_KEY]);
1838
+ const requestHuman = react.useCallback(async () => {
1839
+ if (!session || !isAiMode || requestingHuman) return;
1840
+ setRequestingHuman(true);
1841
+ try {
1842
+ await fetch(`${base}/api/support-chat/${session.conversationId}/mode`, {
1843
+ method: "PATCH",
1844
+ headers: { "Content-Type": "application/json", "x-visitor-token": session.visitorToken },
1845
+ body: JSON.stringify({ mode: "human" })
1846
+ });
1847
+ setIsAiMode(false);
1848
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({ session, isAiMode: false }));
1849
+ } catch {
1850
+ }
1851
+ setRequestingHuman(false);
1852
+ }, [session, isAiMode, requestingHuman, base, STORAGE_KEY]);
1853
+ const returnToAi = react.useCallback(async () => {
1854
+ if (!session || isAiMode || returningToAi) return;
1855
+ setReturningToAi(true);
1856
+ try {
1857
+ await fetch(`${base}/api/support-chat/${session.conversationId}/mode`, {
1858
+ method: "PATCH",
1859
+ headers: { "Content-Type": "application/json", "x-visitor-token": session.visitorToken },
1860
+ body: JSON.stringify({ mode: "auto" })
1861
+ });
1862
+ setIsAiMode(true);
1863
+ localStorage.setItem(STORAGE_KEY, JSON.stringify({ session, isAiMode: true }));
1864
+ } catch {
1865
+ }
1866
+ setReturningToAi(false);
1867
+ }, [session, isAiMode, returningToAi, base, STORAGE_KEY]);
1868
+ const reset = react.useCallback(() => {
1869
+ localStorage.removeItem(STORAGE_KEY);
1870
+ setSession(null);
1871
+ setRawMessages([]);
1872
+ setIsAiMode(false);
1873
+ setAgentTyping(false);
1874
+ setRequestingHuman(false);
1875
+ setReturningToAi(false);
1876
+ }, [STORAGE_KEY]);
1877
+ const messages = react.useMemo(
1878
+ () => rawMessages.filter((m) => m.role !== "system").map(toWidgetMsg),
1879
+ [rawMessages]
1880
+ );
1881
+ const footerAction = react.useMemo(() => {
1882
+ if (isAiMode) {
1883
+ return { label: requestHumanLabel, sublabel: "Te conectamos con un agente disponible", icon: "human", onClick: requestHuman, loading: requestingHuman };
1884
+ }
1885
+ if (!isAiMode && session && returnToAiLabel) {
1886
+ return { label: returnToAiLabel, sublabel: "Respuesta instant\xE1nea con inteligencia artificial", icon: "ai", onClick: returnToAi, loading: returningToAi };
1887
+ }
1888
+ return void 0;
1889
+ }, [isAiMode, session, requestHumanLabel, requestHuman, requestingHuman, returnToAiLabel, returnToAi, returningToAi]);
1890
+ return react.useMemo(() => ({
1891
+ messages,
1892
+ streaming: sending || agentTyping,
1893
+ send,
1894
+ reset,
1895
+ mode: isAiMode ? "ai" : "human",
1896
+ ...footerAction ? { footerAction } : {}
1897
+ }), [messages, sending, agentTyping, send, reset, isAiMode, footerAction]);
1898
+ }
1534
1899
  var KEY_EXPANDED = "wallavi_bubble_expanded";
1535
1900
  var KEY_DISMISSED = "wallavi_bubble_dismissed";
1536
1901
  function BubbleWidget({
1902
+ inboxToken,
1903
+ supportApiBase,
1904
+ requestHumanLabel,
1905
+ returnToAiLabel,
1537
1906
  position: positionProp,
1538
1907
  width: widthProp,
1539
1908
  height: heightProp,
@@ -1551,6 +1920,9 @@ function BubbleWidget({
1551
1920
  onOpenChange,
1552
1921
  ...chatProps
1553
1922
  }) {
1923
+ const supportBackend = useSupportChat(
1924
+ inboxToken ? { inboxToken, apiBase: supportApiBase, requestHumanLabel, returnToAiLabel } : { inboxToken: "__disabled__", apiBase: supportApiBase }
1925
+ );
1554
1926
  const isControlled = isOpenProp !== void 0;
1555
1927
  const [internalOpen, setInternalOpen] = react.useState(false);
1556
1928
  const open = isControlled ? isOpenProp : internalOpen;
@@ -1577,7 +1949,7 @@ function BubbleWidget({
1577
1949
  react.useEffect(() => {
1578
1950
  if (localStorage.getItem(KEY_EXPANDED) === "true") setExpanded(true);
1579
1951
  }, []);
1580
- const remote = useAutoConfig(chatProps.agentId, autoConfig);
1952
+ const remote = useAutoConfig(inboxToken ? "" : chatProps.agentId ?? "", !inboxToken && autoConfig);
1581
1953
  const resolvedPosition = positionProp ?? remote.position;
1582
1954
  const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
1583
1955
  const resolvedAutoOpen = autoOpenProp || remote.autoOpen;
@@ -1591,8 +1963,8 @@ function BubbleWidget({
1591
1963
  const mergedConfig = {
1592
1964
  ...remote.remoteConfig,
1593
1965
  ...definedChatProps,
1594
- agentId: chatProps.agentId,
1595
- agentName: chatProps.agentName
1966
+ agentId: chatProps.agentId ?? "",
1967
+ agentName: chatProps.agentName ?? ""
1596
1968
  };
1597
1969
  const setOpenRef = react.useRef(setOpen);
1598
1970
  react.useEffect(() => {
@@ -1668,6 +2040,8 @@ function BubbleWidget({
1668
2040
  ChatWidget,
1669
2041
  {
1670
2042
  ...mergedConfig,
2043
+ agentId: inboxToken ? "support" : chatProps.agentId ?? "",
2044
+ customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
1671
2045
  onClose: handleClose,
1672
2046
  onExpand: toggleExpanded,
1673
2047
  expanded,
@@ -1717,4 +2091,5 @@ exports.formatToolName = formatToolName;
1717
2091
  exports.getContrastColor = getContrastColor;
1718
2092
  exports.useAttachments = useAttachments;
1719
2093
  exports.useChat = useChat;
2094
+ exports.useSupportChat = useSupportChat;
1720
2095
  exports.useVoice = useVoice;