@wallavi/widget 1.6.8 → 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.d.mts +75 -5
- package/dist/index.d.ts +75 -5
- package/dist/index.js +374 -21
- package/dist/index.mjs +375 -23
- package/package.json +2 -1
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);
|
|
@@ -132,21 +133,21 @@ function useChat({
|
|
|
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
145
|
localStorage.setItem(`${persistKey}_tid`, threadId);
|
|
145
146
|
} catch {
|
|
146
147
|
}
|
|
147
|
-
}, [persistKey, threadId]);
|
|
148
|
+
}, [customBackend, persistKey, threadId]);
|
|
148
149
|
react.useEffect(() => {
|
|
149
|
-
if (!persistKey || typeof window === "undefined") return;
|
|
150
|
+
if (customBackend || !persistKey || typeof window === "undefined") return;
|
|
150
151
|
if (messages.length > 0) return;
|
|
151
152
|
void (async () => {
|
|
152
153
|
try {
|
|
@@ -321,6 +322,15 @@ function useChat({
|
|
|
321
322
|
const pendingAttachmentsRef = react.useRef([]);
|
|
322
323
|
const send = react.useCallback(
|
|
323
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
|
+
}
|
|
324
334
|
const userInput = (text ?? input).trim();
|
|
325
335
|
if (!userInput || streaming) return;
|
|
326
336
|
setInput("");
|
|
@@ -409,7 +419,18 @@ function useChat({
|
|
|
409
419
|
});
|
|
410
420
|
await send(lastText);
|
|
411
421
|
}, [streaming, messages, send]);
|
|
412
|
-
return {
|
|
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
|
+
};
|
|
413
434
|
}
|
|
414
435
|
function getPreferredMimeType() {
|
|
415
436
|
if (typeof MediaRecorder === "undefined") return "";
|
|
@@ -793,11 +814,12 @@ function PlanStepIcon({ status }) {
|
|
|
793
814
|
if (status === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" });
|
|
794
815
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-h-3 ww-w-3 ww-rounded-full ww-border-2 ww-border-muted-foreground/30" });
|
|
795
816
|
}
|
|
796
|
-
function PlanCard({ part }) {
|
|
817
|
+
function PlanCard({ part, onSend, disabled }) {
|
|
797
818
|
const successCount = part.steps.filter((s) => s.status === "success").length;
|
|
798
819
|
const hasExecuting = part.steps.some((s) => s.status === "executing");
|
|
799
820
|
const allDone = successCount === part.steps.length && part.steps.length > 0;
|
|
800
821
|
const anyFailed = part.steps.some((s) => s.status === "failed");
|
|
822
|
+
const allPending = part.steps.length > 0 && part.steps.every((s) => s.status === "pending");
|
|
801
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: [
|
|
802
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: [
|
|
803
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" }),
|
|
@@ -838,7 +860,34 @@ function PlanCard({ part }) {
|
|
|
838
860
|
]
|
|
839
861
|
},
|
|
840
862
|
step.index
|
|
841
|
-
)) })
|
|
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
|
+
] })
|
|
842
891
|
] });
|
|
843
892
|
}
|
|
844
893
|
function ThinkingDots() {
|
|
@@ -1022,7 +1071,8 @@ function MessageBubble({
|
|
|
1022
1071
|
profilePicture,
|
|
1023
1072
|
isStreaming,
|
|
1024
1073
|
showThinking = true,
|
|
1025
|
-
onPickerSelect
|
|
1074
|
+
onPickerSelect,
|
|
1075
|
+
onSend
|
|
1026
1076
|
}) {
|
|
1027
1077
|
const isUser = message.role === "user";
|
|
1028
1078
|
const textPart = message.parts.find((p) => p.type === "text");
|
|
@@ -1045,12 +1095,12 @@ function MessageBubble({
|
|
|
1045
1095
|
) });
|
|
1046
1096
|
}
|
|
1047
1097
|
const visibleToolParts = showThinking ? toolParts : [];
|
|
1048
|
-
const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0;
|
|
1098
|
+
const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0 && planParts.length === 0;
|
|
1049
1099
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start", children: [
|
|
1050
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() }) }),
|
|
1051
1101
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
|
|
1052
1102
|
showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
|
|
1053
|
-
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)),
|
|
1054
1104
|
visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
|
|
1055
1105
|
pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1056
1106
|
PickerSelector,
|
|
@@ -1113,7 +1163,7 @@ function ChatMessages({
|
|
|
1113
1163
|
const showGreeting = messages.length === 0;
|
|
1114
1164
|
react.useEffect(() => {
|
|
1115
1165
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1116
|
-
}, [messages]);
|
|
1166
|
+
}, [messages, streaming]);
|
|
1117
1167
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-flex ww-flex-col ww-overflow-y-auto ww-overscroll-contain", children: [
|
|
1118
1168
|
showGreeting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pt-5", children: [
|
|
1119
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() }) }),
|
|
@@ -1129,10 +1179,41 @@ function ChatMessages({
|
|
|
1129
1179
|
profilePicture,
|
|
1130
1180
|
isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
|
|
1131
1181
|
showThinking,
|
|
1132
|
-
onPickerSelect
|
|
1182
|
+
onPickerSelect,
|
|
1183
|
+
onSend: i === messages.length - 1 ? onSuggest : void 0
|
|
1133
1184
|
},
|
|
1134
1185
|
msg.id
|
|
1135
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
|
+
] }),
|
|
1136
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(
|
|
1137
1218
|
"button",
|
|
1138
1219
|
{
|
|
@@ -1322,13 +1403,15 @@ function ChatWidget({
|
|
|
1322
1403
|
enableVoice = false,
|
|
1323
1404
|
voiceAutoSend = false,
|
|
1324
1405
|
enableAttachments = false,
|
|
1406
|
+
customBackend,
|
|
1325
1407
|
className,
|
|
1326
1408
|
onClose,
|
|
1327
1409
|
onReset,
|
|
1328
1410
|
onExpand,
|
|
1329
|
-
expanded
|
|
1411
|
+
expanded,
|
|
1412
|
+
embedded = false
|
|
1330
1413
|
}) {
|
|
1331
|
-
const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides });
|
|
1414
|
+
const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides, customBackend });
|
|
1332
1415
|
const voice = useVoice({
|
|
1333
1416
|
agentId,
|
|
1334
1417
|
onTranscript: (text) => {
|
|
@@ -1381,6 +1464,7 @@ function ChatWidget({
|
|
|
1381
1464
|
};
|
|
1382
1465
|
const isDark = theme === "dark";
|
|
1383
1466
|
const cssVars = {
|
|
1467
|
+
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
1384
1468
|
colorScheme: theme,
|
|
1385
1469
|
// Inline style has higher specificity than any host-site stylesheet,
|
|
1386
1470
|
// so background-color set here cannot be overridden by host CSS.
|
|
@@ -1403,7 +1487,8 @@ function ChatWidget({
|
|
|
1403
1487
|
"div",
|
|
1404
1488
|
{
|
|
1405
1489
|
className: cn(
|
|
1406
|
-
"wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-
|
|
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",
|
|
1407
1492
|
isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
|
|
1408
1493
|
className
|
|
1409
1494
|
),
|
|
@@ -1431,6 +1516,20 @@ function ChatWidget({
|
|
|
1431
1516
|
expanded
|
|
1432
1517
|
}
|
|
1433
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
|
+
),
|
|
1434
1533
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1435
1534
|
ChatMessages,
|
|
1436
1535
|
{
|
|
@@ -1446,6 +1545,30 @@ function ChatWidget({
|
|
|
1446
1545
|
onPickerSelect: chat.selectPickerOption
|
|
1447
1546
|
}
|
|
1448
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
|
+
) }),
|
|
1449
1572
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1450
1573
|
ChatInput,
|
|
1451
1574
|
{
|
|
@@ -1553,9 +1676,233 @@ function useAutoConfig(agentId, enabled) {
|
|
|
1553
1676
|
}, [agentId, enabled]);
|
|
1554
1677
|
return result;
|
|
1555
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
|
+
}
|
|
1556
1899
|
var KEY_EXPANDED = "wallavi_bubble_expanded";
|
|
1557
1900
|
var KEY_DISMISSED = "wallavi_bubble_dismissed";
|
|
1558
1901
|
function BubbleWidget({
|
|
1902
|
+
inboxToken,
|
|
1903
|
+
supportApiBase,
|
|
1904
|
+
requestHumanLabel,
|
|
1905
|
+
returnToAiLabel,
|
|
1559
1906
|
position: positionProp,
|
|
1560
1907
|
width: widthProp,
|
|
1561
1908
|
height: heightProp,
|
|
@@ -1573,6 +1920,9 @@ function BubbleWidget({
|
|
|
1573
1920
|
onOpenChange,
|
|
1574
1921
|
...chatProps
|
|
1575
1922
|
}) {
|
|
1923
|
+
const supportBackend = useSupportChat(
|
|
1924
|
+
inboxToken ? { inboxToken, apiBase: supportApiBase, requestHumanLabel, returnToAiLabel } : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
1925
|
+
);
|
|
1576
1926
|
const isControlled = isOpenProp !== void 0;
|
|
1577
1927
|
const [internalOpen, setInternalOpen] = react.useState(false);
|
|
1578
1928
|
const open = isControlled ? isOpenProp : internalOpen;
|
|
@@ -1599,7 +1949,7 @@ function BubbleWidget({
|
|
|
1599
1949
|
react.useEffect(() => {
|
|
1600
1950
|
if (localStorage.getItem(KEY_EXPANDED) === "true") setExpanded(true);
|
|
1601
1951
|
}, []);
|
|
1602
|
-
const remote = useAutoConfig(chatProps.agentId, autoConfig);
|
|
1952
|
+
const remote = useAutoConfig(inboxToken ? "" : chatProps.agentId ?? "", !inboxToken && autoConfig);
|
|
1603
1953
|
const resolvedPosition = positionProp ?? remote.position;
|
|
1604
1954
|
const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
|
|
1605
1955
|
const resolvedAutoOpen = autoOpenProp || remote.autoOpen;
|
|
@@ -1613,8 +1963,8 @@ function BubbleWidget({
|
|
|
1613
1963
|
const mergedConfig = {
|
|
1614
1964
|
...remote.remoteConfig,
|
|
1615
1965
|
...definedChatProps,
|
|
1616
|
-
agentId: chatProps.agentId,
|
|
1617
|
-
agentName: chatProps.agentName
|
|
1966
|
+
agentId: chatProps.agentId ?? "",
|
|
1967
|
+
agentName: chatProps.agentName ?? ""
|
|
1618
1968
|
};
|
|
1619
1969
|
const setOpenRef = react.useRef(setOpen);
|
|
1620
1970
|
react.useEffect(() => {
|
|
@@ -1690,6 +2040,8 @@ function BubbleWidget({
|
|
|
1690
2040
|
ChatWidget,
|
|
1691
2041
|
{
|
|
1692
2042
|
...mergedConfig,
|
|
2043
|
+
agentId: inboxToken ? "support" : chatProps.agentId ?? "",
|
|
2044
|
+
customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
|
|
1693
2045
|
onClose: handleClose,
|
|
1694
2046
|
onExpand: toggleExpanded,
|
|
1695
2047
|
expanded,
|
|
@@ -1739,4 +2091,5 @@ exports.formatToolName = formatToolName;
|
|
|
1739
2091
|
exports.getContrastColor = getContrastColor;
|
|
1740
2092
|
exports.useAttachments = useAttachments;
|
|
1741
2093
|
exports.useChat = useChat;
|
|
2094
|
+
exports.useSupportChat = useSupportChat;
|
|
1742
2095
|
exports.useVoice = useVoice;
|