@wallavi/widget 1.11.0 → 1.11.1
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 +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +544 -241
- package/dist/index.mjs +544 -241
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -32,7 +32,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
// src/styles.css
|
|
35
|
-
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-inset-4 {\n inset: 1rem;\n}\n.ww-inset-8 {\n inset: 2rem;\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-z-\\[100\\] {\n z-index: 100;\n}\n.ww-mx-0\\.5 {\n margin-left: 0.125rem;\n margin-right: 0.125rem;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n margin-bottom: 3rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ww-ml-1 {\n margin-left: 0.25rem;\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-1\\.5 {\n height: 0.375rem;\n}\n.ww-h-10 {\n height: 2.5rem;\n}\n.ww-h-16 {\n height: 4rem;\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-40 {\n height: 10rem;\n}\n.ww-h-48 {\n height: 12rem;\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-1\\.5 {\n width: 0.375rem;\n}\n.ww-w-10 {\n width: 2.5rem;\n}\n.ww-w-16 {\n width: 4rem;\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-48 {\n width: 12rem;\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.ww-scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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.ww-scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\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.ww-scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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.ww-scale-90 {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\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-touch-none {\n touch-action: none;\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-gap-6 {\n gap: 1.5rem;\n}\n.ww-gap-8 {\n gap: 2rem;\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-overscroll-none {\n overscroll-behavior: none;\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-md {\n border-radius: calc(var(--radius) - 2px);\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\\/80 {\n border-color: hsl(var(--border) / 0.8);\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-primary\\/10 {\n border-color: hsl(var(--primary) / 0.1);\n}\n.ww-border-primary\\/20 {\n border-color: hsl(var(--primary) / 0.2);\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-transparent {\n border-color: transparent;\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\\/90 {\n background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n background-color: hsl(var(--background) / 0.95);\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-emerald-500\\/10 {\n background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n background-color: hsl(var(--foreground) / 0.05);\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\\/30 {\n background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n background-color: hsl(var(--muted) / 0.4);\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\\/10 {\n background-color: hsl(var(--primary) / 0.1);\n}\n.ww-bg-primary\\/5 {\n background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n background-color: rgb(168 85 247 / 0.3);\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-2\\.5 {\n padding-top: 0.625rem;\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-\\[13px\\] {\n font-size: 13px;\n}\n.ww-text-\\[8px\\] {\n font-size: 8px;\n}\n.ww-text-\\[9px\\] {\n font-size: 9px;\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-wide {\n letter-spacing: 0.025em;\n}\n.ww-tracking-wider {\n letter-spacing: 0.05em;\n}\n.ww-tracking-widest {\n letter-spacing: 0.1em;\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 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / 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-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-opacity-90 {\n opacity: 0.9;\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-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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\\/20 {\n --tw-ring-color: hsl(var(--primary) / 0.2);\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-backdrop-blur-xl {\n --tw-backdrop-blur: blur(24px);\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-1000 {\n transition-duration: 1000ms;\n}\n.ww-duration-150 {\n transition-duration: 150ms;\n}\n.ww-duration-200 {\n transition-duration: 200ms;\n}\n.ww-duration-300 {\n transition-duration: 300ms;\n}\n.ww-duration-500 {\n transition-duration: 500ms;\n}\n.ww-duration-700 {\n transition-duration: 700ms;\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-animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n.ww-fade-in {\n --tw-enter-opacity: 0;\n}\n.ww-slide-in-from-top-1 {\n --tw-enter-translate-y: -0.25rem;\n}\n.ww-duration-1000 {\n animation-duration: 1000ms;\n}\n.ww-duration-150 {\n animation-duration: 150ms;\n}\n.ww-duration-200 {\n animation-duration: 200ms;\n}\n.ww-duration-300 {\n animation-duration: 300ms;\n}\n.ww-duration-500 {\n animation-duration: 500ms;\n}\n.ww-duration-700 {\n animation-duration: 700ms;\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.wallavi-widget .lk-control-bar {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n gap: 1.5rem !important;\n justify-content: center !important;\n}\n.wallavi-widget .lk-button {\n background: rgba(25, 25, 28, 0.05) !important;\n border-radius: 9999px !important;\n padding: 1.25rem !important;\n color: var(--ww-fg, #19191c) !important;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n border: 1px solid rgba(25, 25, 28, 0.1) !important;\n}\n.wallavi-widget .lk-button:hover {\n background: rgba(25, 25, 28, 0.1) !important;\n transform: scale(1.05) !important;\n}\n.wallavi-widget .lk-disconnect-button {\n background: #ef4444 !important;\n color: white !important;\n border: none !important;\n}\n.wallavi-widget .lk-disconnect-button:hover {\n background: #dc2626 !important;\n}\n.wallavi-widget .lk-device-menu {\n bottom: 100% !important;\n top: auto !important;\n margin-bottom: 1rem !important;\n max-width: 250px !important;\n width: -moz-max-content !important;\n width: max-content !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #ffffff !important;\n border-radius: 16px !important;\n box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1) !important;\n z-index: 1000 !important;\n overflow: hidden !important;\n border: 1px solid rgba(0, 0, 0, 0.05) !important;\n padding: 0.5rem !important;\n}\n.wallavi-widget .lk-device-menu > li {\n padding: 0.75rem 1rem !important;\n font-size: 0.875rem !important;\n color: #19191c !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n border-radius: 8px !important;\n transition: background 0.15s !important;\n}\n.wallavi-widget .lk-device-menu > li:hover {\n background: rgba(0, 0, 0, 0.05) !important;\n}\n.wallavi-widget .lk-device-menu > li.lk-active {\n background: rgba(0, 0, 0, 0.08) !important;\n font-weight: 600 !important;\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-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\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.hover\\:ww-border-primary\\/40:hover {\n border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n background-color: hsl(var(--foreground) / 0.3);\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-accent-foreground:hover {\n color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\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.hover\\:ww-shadow-xl:hover {\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.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");
|
|
35
|
+
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-inset-4 {\n inset: 1rem;\n}\n.ww-inset-8 {\n inset: 2rem;\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-z-\\[100\\] {\n z-index: 100;\n}\n.ww-mx-0\\.5 {\n margin-left: 0.125rem;\n margin-right: 0.125rem;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n margin-bottom: 3rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ww-ml-1 {\n margin-left: 0.25rem;\n}\n.ww-mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.ww-mt-1 {\n margin-top: 0.25rem;\n}\n.ww-mt-2 {\n margin-top: 0.5rem;\n}\n.ww-line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\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-1\\.5 {\n height: 0.375rem;\n}\n.ww-h-10 {\n height: 2.5rem;\n}\n.ww-h-16 {\n height: 4rem;\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-40 {\n height: 10rem;\n}\n.ww-h-48 {\n height: 12rem;\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-min-h-\\[22px\\] {\n min-height: 22px;\n}\n.ww-w-0\\.5 {\n width: 0.125rem;\n}\n.ww-w-1\\.5 {\n width: 0.375rem;\n}\n.ww-w-10 {\n width: 2.5rem;\n}\n.ww-w-16 {\n width: 4rem;\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-48 {\n width: 12rem;\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-\\[280px\\] {\n width: 280px;\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-full {\n max-width: 100%;\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.ww-scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\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.ww-scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\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.ww-scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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.ww-scale-90 {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\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-touch-none {\n touch-action: none;\n}\n.ww-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.ww-select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n}\n.ww-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-row {\n flex-direction: row;\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-gap-5 {\n gap: 1.25rem;\n}\n.ww-gap-6 {\n gap: 1.5rem;\n}\n.ww-gap-8 {\n gap: 2rem;\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-overscroll-none {\n overscroll-behavior: none;\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-md {\n border-radius: calc(var(--radius) - 2px);\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 {\n border-left-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\\/80 {\n border-color: hsl(var(--border) / 0.8);\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-primary\\/10 {\n border-color: hsl(var(--primary) / 0.1);\n}\n.ww-border-primary\\/20 {\n border-color: hsl(var(--primary) / 0.2);\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-transparent {\n border-color: transparent;\n}\n.ww-border-white\\/20 {\n border-color: rgb(255 255 255 / 0.2);\n}\n.ww-border-white\\/30 {\n border-color: rgb(255 255 255 / 0.3);\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\\/90 {\n background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n background-color: hsl(var(--background) / 0.95);\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-emerald-500\\/10 {\n background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n background-color: hsl(var(--foreground) / 0.05);\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\\/10 {\n background-color: hsl(var(--muted) / 0.1);\n}\n.ww-bg-muted\\/30 {\n background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n background-color: hsl(var(--muted) / 0.4);\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\\/10 {\n background-color: hsl(var(--primary) / 0.1);\n}\n.ww-bg-primary\\/5 {\n background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n background-color: rgb(168 85 247 / 0.3);\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 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\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-bg-white\\/20 {\n background-color: rgb(255 255 255 / 0.2);\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-2\\.5 {\n padding: 0.625rem;\n}\n.ww-p-3 {\n padding: 0.75rem;\n}\n.ww-p-4 {\n padding: 1rem;\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-2\\.5 {\n padding-top: 0.625rem;\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-\\[13px\\] {\n font-size: 13px;\n}\n.ww-text-\\[8px\\] {\n font-size: 8px;\n}\n.ww-text-\\[9px\\] {\n font-size: 9px;\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-bold {\n font-weight: 700;\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-italic {\n font-style: italic;\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-wide {\n letter-spacing: 0.025em;\n}\n.ww-tracking-wider {\n letter-spacing: 0.05em;\n}\n.ww-tracking-widest {\n letter-spacing: 0.1em;\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-foreground\\/90 {\n color: hsl(var(--foreground) / 0.9);\n}\n.ww-text-inherit {\n color: inherit;\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 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / 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-text-zinc-400 {\n --tw-text-opacity: 1;\n color: rgb(161 161 170 / var(--tw-text-opacity, 1));\n}\n.ww-underline {\n text-decoration-line: underline;\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-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-opacity-90 {\n opacity: 0.9;\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-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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\\/20 {\n --tw-ring-color: hsl(var(--primary) / 0.2);\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-backdrop-blur-xl {\n --tw-backdrop-blur: blur(24px);\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-1000 {\n transition-duration: 1000ms;\n}\n.ww-duration-150 {\n transition-duration: 150ms;\n}\n.ww-duration-200 {\n transition-duration: 200ms;\n}\n.ww-duration-300 {\n transition-duration: 300ms;\n}\n.ww-duration-500 {\n transition-duration: 500ms;\n}\n.ww-duration-700 {\n transition-duration: 700ms;\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-animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n.ww-fade-in {\n --tw-enter-opacity: 0;\n}\n.ww-slide-in-from-top-1 {\n --tw-enter-translate-y: -0.25rem;\n}\n.ww-duration-1000 {\n animation-duration: 1000ms;\n}\n.ww-duration-150 {\n animation-duration: 150ms;\n}\n.ww-duration-200 {\n animation-duration: 200ms;\n}\n.ww-duration-300 {\n animation-duration: 300ms;\n}\n.ww-duration-500 {\n animation-duration: 500ms;\n}\n.ww-duration-700 {\n animation-duration: 700ms;\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.wallavi-widget .lk-control-bar {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n gap: 1.5rem !important;\n justify-content: center !important;\n}\n.wallavi-widget .lk-button {\n background: rgba(25, 25, 28, 0.05) !important;\n border-radius: 9999px !important;\n padding: 1.25rem !important;\n color: var(--ww-fg, #19191c) !important;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n border: 1px solid rgba(25, 25, 28, 0.1) !important;\n}\n.wallavi-widget .lk-button:hover {\n background: rgba(25, 25, 28, 0.1) !important;\n transform: scale(1.05) !important;\n}\n.wallavi-widget .lk-disconnect-button {\n background: #ef4444 !important;\n color: white !important;\n border: none !important;\n}\n.wallavi-widget .lk-disconnect-button:hover {\n background: #dc2626 !important;\n}\n.wallavi-widget .lk-device-menu {\n bottom: 100% !important;\n top: auto !important;\n margin-bottom: 1rem !important;\n max-width: 250px !important;\n width: -moz-max-content !important;\n width: max-content !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #ffffff !important;\n border-radius: 16px !important;\n box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1) !important;\n z-index: 1000 !important;\n overflow: hidden !important;\n border: 1px solid rgba(0, 0, 0, 0.05) !important;\n padding: 0.5rem !important;\n}\n.wallavi-widget .lk-device-menu > li {\n padding: 0.75rem 1rem !important;\n font-size: 0.875rem !important;\n color: #19191c !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n border-radius: 8px !important;\n transition: background 0.15s !important;\n}\n.wallavi-widget .lk-device-menu > li:hover {\n background: rgba(0, 0, 0, 0.05) !important;\n}\n.wallavi-widget .lk-device-menu > li.lk-active {\n background: rgba(0, 0, 0, 0.08) !important;\n font-weight: 600 !important;\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.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-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\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.hover\\:ww-scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\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.hover\\:ww-border-accent-foreground\\/20:hover {\n border-color: hsl(var(--accent-foreground) / 0.2);\n}\n.hover\\:ww-border-accent-foreground\\/25:hover {\n border-color: hsl(var(--accent-foreground) / 0.25);\n}\n.hover\\:ww-border-primary\\/40:hover {\n border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-accent\\/30:hover {\n background-color: hsl(var(--accent) / 0.3);\n}\n.hover\\:ww-bg-accent\\/40:hover {\n background-color: hsl(var(--accent) / 0.4);\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n background-color: hsl(var(--foreground) / 0.3);\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-accent-foreground:hover {\n color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\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.hover\\:ww-shadow-xl:hover {\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.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.ww-group:hover .group-hover\\:ww-rotate-12 {\n --tw-rotate: 12deg;\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.ww-group:hover .group-hover\\:ww-text-primary {\n color: hsl(var(--primary));\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");
|
|
36
36
|
var twMerge = extendTailwindMerge({ prefix: "ww-" });
|
|
37
37
|
var cn = (...inputs) => twMerge(clsx(inputs));
|
|
38
38
|
async function getFreshClerkToken() {
|
|
@@ -340,9 +340,12 @@ function useChat({
|
|
|
340
340
|
});
|
|
341
341
|
const streamingMsgIdRef = useRef(null);
|
|
342
342
|
const [debugTraces, setDebugTraces] = useState([]);
|
|
343
|
-
const [selectedContext, setSelectedContext] = useState(
|
|
343
|
+
const [selectedContext, setSelectedContext] = useState(
|
|
344
|
+
null
|
|
345
|
+
);
|
|
344
346
|
useEffect(() => {
|
|
345
|
-
if (typeof window === "undefined" || typeof document === "undefined")
|
|
347
|
+
if (typeof window === "undefined" || typeof document === "undefined")
|
|
348
|
+
return;
|
|
346
349
|
const handleContextSelected = (event) => {
|
|
347
350
|
const customEvent = event;
|
|
348
351
|
if (customEvent.detail && customEvent.detail.id) {
|
|
@@ -351,7 +354,9 @@ function useChat({
|
|
|
351
354
|
};
|
|
352
355
|
const handleGlobalClick = (e) => {
|
|
353
356
|
if (e.metaKey || e.ctrlKey) {
|
|
354
|
-
const target = e.target.closest(
|
|
357
|
+
const target = e.target.closest(
|
|
358
|
+
"[data-wallavi-id]"
|
|
359
|
+
);
|
|
355
360
|
if (target) {
|
|
356
361
|
e.preventDefault();
|
|
357
362
|
e.stopPropagation();
|
|
@@ -388,7 +393,10 @@ function useChat({
|
|
|
388
393
|
window.addEventListener("wallavi:context-selected", handleContextSelected);
|
|
389
394
|
document.addEventListener("click", handleGlobalClick, true);
|
|
390
395
|
return () => {
|
|
391
|
-
window.removeEventListener(
|
|
396
|
+
window.removeEventListener(
|
|
397
|
+
"wallavi:context-selected",
|
|
398
|
+
handleContextSelected
|
|
399
|
+
);
|
|
392
400
|
document.removeEventListener("click", handleGlobalClick, true);
|
|
393
401
|
};
|
|
394
402
|
}, []);
|
|
@@ -1703,7 +1711,10 @@ function PickerSelector({
|
|
|
1703
1711
|
);
|
|
1704
1712
|
}
|
|
1705
1713
|
var ReactMarkdown = ReactMarkdownLib;
|
|
1706
|
-
function MarkdownContent({
|
|
1714
|
+
function MarkdownContent({
|
|
1715
|
+
text,
|
|
1716
|
+
isUser
|
|
1717
|
+
}) {
|
|
1707
1718
|
return /* @__PURE__ */ jsx(
|
|
1708
1719
|
ReactMarkdown,
|
|
1709
1720
|
{
|
|
@@ -1791,10 +1802,15 @@ function MarkdownContent({ text }) {
|
|
|
1791
1802
|
return /* @__PURE__ */ jsxs(
|
|
1792
1803
|
"span",
|
|
1793
1804
|
{
|
|
1794
|
-
className:
|
|
1805
|
+
className: `ww-inline-flex ww-items-center ww-gap-1.5 ww-text-[11px] ww-font-semibold ww-px-2 ww-py-0.5 ww-rounded-md ww-mx-0.5 ww-shadow-3xs ${isUser ? "ww-bg-white/20 ww-border ww-border-white/30 ww-text-white" : "ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary"}`,
|
|
1795
1806
|
title: `${type}: ${id}`,
|
|
1796
1807
|
children: [
|
|
1797
|
-
/* @__PURE__ */ jsx(
|
|
1808
|
+
/* @__PURE__ */ jsx(
|
|
1809
|
+
"span",
|
|
1810
|
+
{
|
|
1811
|
+
className: `ww-h-1.5 ww-w-1.5 ww-rounded-full ${isUser ? "ww-bg-white" : "ww-bg-primary"}`
|
|
1812
|
+
}
|
|
1813
|
+
),
|
|
1798
1814
|
/* @__PURE__ */ jsxs("span", { className: "ww-opacity-70 ww-uppercase ww-text-[8px] ww-tracking-wider", children: [
|
|
1799
1815
|
type,
|
|
1800
1816
|
":"
|
|
@@ -1810,7 +1826,7 @@ function MarkdownContent({ text }) {
|
|
|
1810
1826
|
href,
|
|
1811
1827
|
target: "_blank",
|
|
1812
1828
|
rel: "noopener noreferrer",
|
|
1813
|
-
|
|
1829
|
+
className: isUser ? "ww-text-inherit ww-underline ww-opacity-90" : "ww-underline ww-opacity-75",
|
|
1814
1830
|
children
|
|
1815
1831
|
}
|
|
1816
1832
|
);
|
|
@@ -1947,7 +1963,7 @@ function MessageBubble({
|
|
|
1947
1963
|
contrastColor
|
|
1948
1964
|
}
|
|
1949
1965
|
),
|
|
1950
|
-
textPart?.text && /* @__PURE__ */ jsx("
|
|
1966
|
+
textPart?.text && /* @__PURE__ */ jsx("div", { className: "ww-prose ww-prose-sm ww-max-w-none ww-text-inherit prose-p:ww-my-0.5", children: /* @__PURE__ */ jsx(MarkdownContent, { text: textPart.text, isUser: true }) })
|
|
1951
1967
|
]
|
|
1952
1968
|
}
|
|
1953
1969
|
) });
|
|
@@ -2122,6 +2138,67 @@ function ChatMessages({
|
|
|
2122
2138
|
] });
|
|
2123
2139
|
}
|
|
2124
2140
|
var cn3 = (...inputs) => twMerge$1(clsx(inputs));
|
|
2141
|
+
var serializeNode = (node) => {
|
|
2142
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
2143
|
+
return node.nodeValue || "";
|
|
2144
|
+
}
|
|
2145
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
2146
|
+
const el = node;
|
|
2147
|
+
if (el.tagName === "SPAN" && el.getAttribute("data-wlv-context-id")) {
|
|
2148
|
+
const id = el.getAttribute("data-wlv-context-id");
|
|
2149
|
+
const type = el.getAttribute("data-wlv-context-type");
|
|
2150
|
+
const name = el.getAttribute("data-wlv-context-name");
|
|
2151
|
+
return `[${name}](wallavi://${type}/${id})`;
|
|
2152
|
+
}
|
|
2153
|
+
if (el.tagName === "BR") {
|
|
2154
|
+
return "\n";
|
|
2155
|
+
}
|
|
2156
|
+
let childText = "";
|
|
2157
|
+
for (const child of Array.from(el.childNodes)) {
|
|
2158
|
+
childText += serializeNode(child);
|
|
2159
|
+
}
|
|
2160
|
+
const isBlock = ["DIV", "P", "TR", "LI"].includes(el.tagName);
|
|
2161
|
+
return isBlock ? `
|
|
2162
|
+
${childText}` : childText;
|
|
2163
|
+
}
|
|
2164
|
+
return "";
|
|
2165
|
+
};
|
|
2166
|
+
var serializeEditor = (editor) => {
|
|
2167
|
+
let text = "";
|
|
2168
|
+
for (const child of Array.from(editor.childNodes)) {
|
|
2169
|
+
text += serializeNode(child);
|
|
2170
|
+
}
|
|
2171
|
+
return text.replace(/^\n+/, "").replace(/\n+$/, "");
|
|
2172
|
+
};
|
|
2173
|
+
var createChipElement = (name, type, id, accentColor) => {
|
|
2174
|
+
const span = document.createElement("span");
|
|
2175
|
+
span.setAttribute("contenteditable", "false");
|
|
2176
|
+
span.className = "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary ww-text-xs ww-font-semibold ww-px-2 ww-py-0.5 ww-rounded-md ww-mx-0.5 ww-align-middle ww-shadow-3xs ww-select-all";
|
|
2177
|
+
span.style.setProperty("--primary", accentColor);
|
|
2178
|
+
span.setAttribute("data-wlv-context-id", id);
|
|
2179
|
+
span.setAttribute("data-wlv-context-type", type);
|
|
2180
|
+
span.setAttribute("data-wlv-context-name", name);
|
|
2181
|
+
const dot = document.createElement("span");
|
|
2182
|
+
dot.className = "ww-h-1.5 ww-w-1.5 ww-rounded-full ww-bg-primary";
|
|
2183
|
+
span.appendChild(dot);
|
|
2184
|
+
const typeSpan = document.createElement("span");
|
|
2185
|
+
typeSpan.className = "ww-opacity-70 ww-uppercase ww-text-[8px] ww-tracking-wider";
|
|
2186
|
+
typeSpan.textContent = `${type}:`;
|
|
2187
|
+
span.appendChild(typeSpan);
|
|
2188
|
+
const nameSpan = document.createElement("span");
|
|
2189
|
+
nameSpan.textContent = name;
|
|
2190
|
+
span.appendChild(nameSpan);
|
|
2191
|
+
const button = document.createElement("button");
|
|
2192
|
+
button.type = "button";
|
|
2193
|
+
button.className = "ww-ml-1 ww-text-primary/70 hover:ww-text-primary hover:ww-scale-110 ww-transition-transform ww-font-bold";
|
|
2194
|
+
button.textContent = "\xD7";
|
|
2195
|
+
button.onclick = () => {
|
|
2196
|
+
span.remove();
|
|
2197
|
+
window.dispatchEvent(new CustomEvent("wallavi:editor-change"));
|
|
2198
|
+
};
|
|
2199
|
+
span.appendChild(button);
|
|
2200
|
+
return span;
|
|
2201
|
+
};
|
|
2125
2202
|
function ChatInput({
|
|
2126
2203
|
input,
|
|
2127
2204
|
setInput,
|
|
@@ -2145,32 +2222,66 @@ function ChatInput({
|
|
|
2145
2222
|
const hasAttachments = onAttach !== void 0;
|
|
2146
2223
|
const fileInputRef = useRef(null);
|
|
2147
2224
|
const textareaRef = useRef(null);
|
|
2225
|
+
const insertNodeAtCursor = (node) => {
|
|
2226
|
+
const sel = window.getSelection();
|
|
2227
|
+
if (sel && sel.rangeCount > 0) {
|
|
2228
|
+
const range = sel.getRangeAt(0);
|
|
2229
|
+
const editor = textareaRef.current;
|
|
2230
|
+
if (editor && editor.contains(range.commonAncestorContainer)) {
|
|
2231
|
+
range.deleteContents();
|
|
2232
|
+
const frag = document.createDocumentFragment();
|
|
2233
|
+
frag.appendChild(node);
|
|
2234
|
+
const spaceNode = document.createTextNode(" ");
|
|
2235
|
+
frag.appendChild(spaceNode);
|
|
2236
|
+
range.insertNode(frag);
|
|
2237
|
+
const newRange = range.cloneRange();
|
|
2238
|
+
newRange.setStartAfter(spaceNode);
|
|
2239
|
+
newRange.collapse(true);
|
|
2240
|
+
sel.removeAllRanges();
|
|
2241
|
+
sel.addRange(newRange);
|
|
2242
|
+
return;
|
|
2243
|
+
}
|
|
2244
|
+
}
|
|
2245
|
+
if (textareaRef.current) {
|
|
2246
|
+
textareaRef.current.appendChild(node);
|
|
2247
|
+
textareaRef.current.appendChild(document.createTextNode(" "));
|
|
2248
|
+
}
|
|
2249
|
+
};
|
|
2148
2250
|
useEffect(() => {
|
|
2149
|
-
if (!input && textareaRef.current) {
|
|
2150
|
-
textareaRef.current.
|
|
2251
|
+
if (!input && textareaRef.current && textareaRef.current.innerHTML !== "") {
|
|
2252
|
+
textareaRef.current.innerHTML = "";
|
|
2151
2253
|
}
|
|
2152
2254
|
}, [input]);
|
|
2255
|
+
const handleInput = () => {
|
|
2256
|
+
if (textareaRef.current) {
|
|
2257
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2258
|
+
}
|
|
2259
|
+
};
|
|
2153
2260
|
useEffect(() => {
|
|
2154
2261
|
if (selectedContext && textareaRef.current) {
|
|
2155
|
-
const
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2262
|
+
const chipEl = createChipElement(
|
|
2263
|
+
selectedContext.name,
|
|
2264
|
+
selectedContext.type,
|
|
2265
|
+
selectedContext.id,
|
|
2266
|
+
accentColor
|
|
2267
|
+
);
|
|
2268
|
+
textareaRef.current.focus();
|
|
2269
|
+
insertNodeAtCursor(chipEl);
|
|
2270
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2162
2271
|
if (onClearContext) {
|
|
2163
2272
|
onClearContext();
|
|
2164
2273
|
}
|
|
2165
|
-
setTimeout(() => {
|
|
2166
|
-
textarea.focus();
|
|
2167
|
-
const newPos = startPos + inlineTag.length;
|
|
2168
|
-
textarea.setSelectionRange(newPos, newPos);
|
|
2169
|
-
textarea.style.height = "auto";
|
|
2170
|
-
textarea.style.height = `${Math.min(textarea.scrollHeight, 128)}px`;
|
|
2171
|
-
}, 50);
|
|
2172
2274
|
}
|
|
2173
|
-
}, [selectedContext, onClearContext, setInput]);
|
|
2275
|
+
}, [selectedContext, onClearContext, setInput, accentColor]);
|
|
2276
|
+
useEffect(() => {
|
|
2277
|
+
const handleEditorChange = () => {
|
|
2278
|
+
if (textareaRef.current) {
|
|
2279
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2280
|
+
}
|
|
2281
|
+
};
|
|
2282
|
+
window.addEventListener("wallavi:editor-change", handleEditorChange);
|
|
2283
|
+
return () => window.removeEventListener("wallavi:editor-change", handleEditorChange);
|
|
2284
|
+
}, [setInput]);
|
|
2174
2285
|
useEffect(() => {
|
|
2175
2286
|
if (!streaming) {
|
|
2176
2287
|
textareaRef.current?.focus();
|
|
@@ -2182,8 +2293,40 @@ function ChatInput({
|
|
|
2182
2293
|
onSend();
|
|
2183
2294
|
}
|
|
2184
2295
|
};
|
|
2296
|
+
const handlePaste = (e) => {
|
|
2297
|
+
if (hasAttachments && onAttach) {
|
|
2298
|
+
const files = Array.from(e.clipboardData?.files ?? []).filter(
|
|
2299
|
+
(f) => f.type.startsWith("image/")
|
|
2300
|
+
);
|
|
2301
|
+
if (files.length > 0) {
|
|
2302
|
+
e.preventDefault();
|
|
2303
|
+
const dt = new DataTransfer();
|
|
2304
|
+
files.forEach((f) => dt.items.add(f));
|
|
2305
|
+
onAttach(dt.files);
|
|
2306
|
+
return;
|
|
2307
|
+
}
|
|
2308
|
+
}
|
|
2309
|
+
e.preventDefault();
|
|
2310
|
+
const text = e.clipboardData?.getData("text/plain") || "";
|
|
2311
|
+
const selection = window.getSelection();
|
|
2312
|
+
if (!selection || selection.rangeCount === 0) return;
|
|
2313
|
+
const range = selection.getRangeAt(0);
|
|
2314
|
+
range.deleteContents();
|
|
2315
|
+
range.insertNode(document.createTextNode(text));
|
|
2316
|
+
range.collapse(false);
|
|
2317
|
+
if (textareaRef.current) {
|
|
2318
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2319
|
+
}
|
|
2320
|
+
};
|
|
2185
2321
|
const hasText = input.trim().length > 0;
|
|
2186
2322
|
return /* @__PURE__ */ jsxs("div", { className: "ww-shrink-0 ww-border-t ww-bg-background ww-px-3 ww-py-2.5", children: [
|
|
2323
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
2324
|
+
#wallavi-chat-input:empty::before {
|
|
2325
|
+
content: attr(placeholder);
|
|
2326
|
+
color: rgba(120, 120, 120, 0.45);
|
|
2327
|
+
pointer-events: none;
|
|
2328
|
+
}
|
|
2329
|
+
` }),
|
|
2187
2330
|
canRegenerate && onRegenerate && /* @__PURE__ */ jsxs(
|
|
2188
2331
|
"button",
|
|
2189
2332
|
{
|
|
@@ -2255,34 +2398,17 @@ function ChatInput({
|
|
|
2255
2398
|
),
|
|
2256
2399
|
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-end ww-gap-2 ww-px-3 ww-py-2", children: [
|
|
2257
2400
|
/* @__PURE__ */ jsx(
|
|
2258
|
-
"
|
|
2401
|
+
"div",
|
|
2259
2402
|
{
|
|
2260
2403
|
id: "wallavi-chat-input",
|
|
2261
2404
|
ref: textareaRef,
|
|
2262
|
-
|
|
2263
|
-
className: "ww-flex-1 ww-
|
|
2264
|
-
placeholder: placeholder ?? "Send a message\u2026",
|
|
2265
|
-
value: input,
|
|
2266
|
-
onChange: (e) => {
|
|
2267
|
-
setInput(e.target.value);
|
|
2268
|
-
e.target.style.height = "auto";
|
|
2269
|
-
e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
|
|
2270
|
-
},
|
|
2405
|
+
contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
|
|
2406
|
+
className: "ww-flex-1 ww-min-h-[22px] ww-max-h-32 ww-overflow-y-auto ww-py-1 ww-outline-none ww-text-sm ww-leading-relaxed ww-bg-transparent",
|
|
2407
|
+
...{ placeholder: placeholder ?? "Send a message\u2026" },
|
|
2271
2408
|
onKeyDown: handleKeyDown,
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
(f) => f.type.startsWith("image/")
|
|
2276
|
-
);
|
|
2277
|
-
if (files.length > 0) {
|
|
2278
|
-
e.preventDefault();
|
|
2279
|
-
const dt = new DataTransfer();
|
|
2280
|
-
files.forEach((f) => dt.items.add(f));
|
|
2281
|
-
onAttach(dt.files);
|
|
2282
|
-
}
|
|
2283
|
-
},
|
|
2284
|
-
disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
|
|
2285
|
-
autoFocus: true
|
|
2409
|
+
onInput: handleInput,
|
|
2410
|
+
onPaste: handlePaste,
|
|
2411
|
+
style: { wordBreak: "break-word" }
|
|
2286
2412
|
}
|
|
2287
2413
|
),
|
|
2288
2414
|
hasVoice && /* @__PURE__ */ jsx(
|
|
@@ -2457,6 +2583,74 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
|
|
|
2457
2583
|
}
|
|
2458
2584
|
) });
|
|
2459
2585
|
}
|
|
2586
|
+
function getContextQueries(url = "") {
|
|
2587
|
+
const lowercaseUrl = url.toLowerCase();
|
|
2588
|
+
if (/pricing|precio|planes|tarifas|costos|comprar|suscrip|subscribe/i.test(
|
|
2589
|
+
lowercaseUrl
|
|
2590
|
+
)) {
|
|
2591
|
+
return [
|
|
2592
|
+
{
|
|
2593
|
+
text: "\xBFCu\xE1les son los planes de precios disponibles?",
|
|
2594
|
+
category: "pricing"
|
|
2595
|
+
},
|
|
2596
|
+
{
|
|
2597
|
+
text: "\xBFTienen alguna prueba gratuita o plan demo?",
|
|
2598
|
+
category: "pricing"
|
|
2599
|
+
},
|
|
2600
|
+
{
|
|
2601
|
+
text: "\xBFCu\xE1les son los m\xE9todos de pago aceptados?",
|
|
2602
|
+
category: "pricing"
|
|
2603
|
+
}
|
|
2604
|
+
];
|
|
2605
|
+
}
|
|
2606
|
+
if (/settings|config|cuenta|perfil|seguridad|account|profile|security/i.test(
|
|
2607
|
+
lowercaseUrl
|
|
2608
|
+
)) {
|
|
2609
|
+
return [
|
|
2610
|
+
{ text: "\xBFC\xF3mo puedo cambiar mi contrase\xF1a?", category: "settings" },
|
|
2611
|
+
{
|
|
2612
|
+
text: "\xBFD\xF3nde encuentro mis credenciales de API?",
|
|
2613
|
+
category: "settings"
|
|
2614
|
+
},
|
|
2615
|
+
{ text: "\xBFC\xF3mo configuro las notificaciones?", category: "settings" }
|
|
2616
|
+
];
|
|
2617
|
+
}
|
|
2618
|
+
if (/dashboard|inicio|panel|resumen|metri|home|stats|analytics/i.test(
|
|
2619
|
+
lowercaseUrl
|
|
2620
|
+
)) {
|
|
2621
|
+
return [
|
|
2622
|
+
{
|
|
2623
|
+
text: "\xBFC\xF3mo puedo ver las estad\xEDsticas de mi agente?",
|
|
2624
|
+
category: "dashboard"
|
|
2625
|
+
},
|
|
2626
|
+
{ text: "\xBFC\xF3mo interpreto las m\xE9tricas de uso?", category: "dashboard" },
|
|
2627
|
+
{
|
|
2628
|
+
text: "\xBFD\xF3nde descargo los reportes de actividad?",
|
|
2629
|
+
category: "dashboard"
|
|
2630
|
+
}
|
|
2631
|
+
];
|
|
2632
|
+
}
|
|
2633
|
+
if (/integration|conexi|conectar|plugins|api|webhooks|connect/i.test(
|
|
2634
|
+
lowercaseUrl
|
|
2635
|
+
)) {
|
|
2636
|
+
return [
|
|
2637
|
+
{
|
|
2638
|
+
text: "\xBFC\xF3mo puedo conectar Wallavi con mi CRM?",
|
|
2639
|
+
category: "integrations"
|
|
2640
|
+
},
|
|
2641
|
+
{ text: "\xBFTienen soporte para webhooks?", category: "integrations" },
|
|
2642
|
+
{
|
|
2643
|
+
text: "\xBFD\xF3nde est\xE1 la documentaci\xF3n de la API?",
|
|
2644
|
+
category: "integrations"
|
|
2645
|
+
}
|
|
2646
|
+
];
|
|
2647
|
+
}
|
|
2648
|
+
return [
|
|
2649
|
+
{ text: "\xBFQu\xE9 puede hacer este asistente?", category: "general" },
|
|
2650
|
+
{ text: "\xBFC\xF3mo puedo empezar?", category: "general" },
|
|
2651
|
+
{ text: "\xBFC\xF3mo entreno a mi agente?", category: "general" }
|
|
2652
|
+
];
|
|
2653
|
+
}
|
|
2460
2654
|
function ChatWidget({
|
|
2461
2655
|
agentId,
|
|
2462
2656
|
workspaceId,
|
|
@@ -2490,8 +2684,18 @@ function ChatWidget({
|
|
|
2490
2684
|
expanded,
|
|
2491
2685
|
embedded = false,
|
|
2492
2686
|
envId,
|
|
2493
|
-
onDebugTrace
|
|
2687
|
+
onDebugTrace,
|
|
2688
|
+
widgetLayout,
|
|
2689
|
+
clientActions = []
|
|
2494
2690
|
}) {
|
|
2691
|
+
const [isDesktop, setIsDesktop] = useState(false);
|
|
2692
|
+
useEffect(() => {
|
|
2693
|
+
if (typeof window === "undefined") return;
|
|
2694
|
+
const checkSize = () => setIsDesktop(window.innerWidth >= 768);
|
|
2695
|
+
checkSize();
|
|
2696
|
+
window.addEventListener("resize", checkSize);
|
|
2697
|
+
return () => window.removeEventListener("resize", checkSize);
|
|
2698
|
+
}, []);
|
|
2495
2699
|
const chat = useChat({
|
|
2496
2700
|
agentId,
|
|
2497
2701
|
workspaceId,
|
|
@@ -2592,11 +2796,13 @@ function ChatWidget({
|
|
|
2592
2796
|
["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
|
|
2593
2797
|
["--radius"]: "0.5rem"
|
|
2594
2798
|
};
|
|
2799
|
+
const showSplitLayout = widgetLayout === "center" && isDesktop;
|
|
2595
2800
|
return /* @__PURE__ */ jsxs(
|
|
2596
2801
|
"div",
|
|
2597
2802
|
{
|
|
2598
2803
|
className: cn(
|
|
2599
|
-
"wallavi-widget ww-flex ww-
|
|
2804
|
+
"wallavi-widget ww-flex ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2805
|
+
showSplitLayout ? "ww-flex-row" : "ww-flex-col",
|
|
2600
2806
|
!embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
|
|
2601
2807
|
isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
|
|
2602
2808
|
className
|
|
@@ -2607,200 +2813,293 @@ function ChatWidget({
|
|
|
2607
2813
|
onDragLeave: handleDragLeave,
|
|
2608
2814
|
onDrop: handleDrop,
|
|
2609
2815
|
children: [
|
|
2610
|
-
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
|
|
2613
|
-
|
|
2816
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-flex-1 ww-h-full ww-overflow-hidden ww-relative", children: [
|
|
2817
|
+
isDragOver && enableAttachments && /* @__PURE__ */ jsxs("div", { className: "ww-absolute ww-inset-0 ww-z-50 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-2 ww-rounded-2xl ww-bg-background/90 ww-backdrop-blur-sm ww-pointer-events-none", children: [
|
|
2818
|
+
/* @__PURE__ */ jsx(UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
|
|
2819
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: "Drop files to attach" }),
|
|
2820
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
|
|
2821
|
+
] }),
|
|
2822
|
+
/* @__PURE__ */ jsx(
|
|
2823
|
+
ChatHeader,
|
|
2824
|
+
{
|
|
2825
|
+
title,
|
|
2826
|
+
profilePicture,
|
|
2827
|
+
headerBg,
|
|
2828
|
+
headerText,
|
|
2829
|
+
onReset: handleReset,
|
|
2830
|
+
onClose: hideCloseButton ? void 0 : onClose,
|
|
2831
|
+
onExpand,
|
|
2832
|
+
expanded,
|
|
2833
|
+
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
2834
|
+
isCallLoading: chat.voiceCall?.loading
|
|
2835
|
+
}
|
|
2836
|
+
),
|
|
2837
|
+
chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsx(
|
|
2838
|
+
VoiceOverlay,
|
|
2839
|
+
{
|
|
2840
|
+
token: chat.voiceCall.token,
|
|
2841
|
+
serverUrl: chat.voiceCall.serverUrl,
|
|
2842
|
+
onClose: chat.voiceCall.stop,
|
|
2843
|
+
accentColor: userMessageColor
|
|
2844
|
+
}
|
|
2845
|
+
),
|
|
2846
|
+
customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
|
|
2847
|
+
"div",
|
|
2848
|
+
{
|
|
2849
|
+
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
2850
|
+
style: { backgroundColor: `${userMessageColor}0d` },
|
|
2851
|
+
children: [
|
|
2852
|
+
/* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
|
|
2853
|
+
/* @__PURE__ */ 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" }),
|
|
2854
|
+
/* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
|
|
2855
|
+
] }),
|
|
2856
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
|
|
2857
|
+
]
|
|
2858
|
+
}
|
|
2859
|
+
),
|
|
2860
|
+
/* @__PURE__ */ jsx(
|
|
2861
|
+
ChatMessages,
|
|
2862
|
+
{
|
|
2863
|
+
messages: chat.messages,
|
|
2864
|
+
streaming: chat.streaming,
|
|
2865
|
+
agentName,
|
|
2866
|
+
profilePicture,
|
|
2867
|
+
userColor: userMessageColor,
|
|
2868
|
+
initialMessages,
|
|
2869
|
+
suggestedMessages,
|
|
2870
|
+
showThinking,
|
|
2871
|
+
onSuggest: (msg) => chat.send(msg),
|
|
2872
|
+
onPickerSelect: chat.selectPickerOption
|
|
2873
|
+
}
|
|
2874
|
+
),
|
|
2875
|
+
customBackend?.footerAction && /* @__PURE__ */ jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxs(
|
|
2876
|
+
"button",
|
|
2877
|
+
{
|
|
2878
|
+
onClick: () => void customBackend.footerAction.onClick(),
|
|
2879
|
+
disabled: customBackend.footerAction.loading,
|
|
2880
|
+
style: customBackend.footerAction.icon === "human" ? {
|
|
2881
|
+
backgroundColor: userMessageColor,
|
|
2882
|
+
color: "#ffffff",
|
|
2883
|
+
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
2884
|
+
} : {
|
|
2885
|
+
borderColor: `${userMessageColor}35`,
|
|
2886
|
+
backgroundColor: `${userMessageColor}0d`,
|
|
2887
|
+
color: userMessageColor
|
|
2888
|
+
},
|
|
2889
|
+
className: [
|
|
2890
|
+
"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",
|
|
2891
|
+
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
2892
|
+
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
2893
|
+
].join(" "),
|
|
2894
|
+
children: [
|
|
2895
|
+
customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
|
|
2896
|
+
"svg",
|
|
2897
|
+
{
|
|
2898
|
+
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2899
|
+
viewBox: "0 0 24 24",
|
|
2900
|
+
fill: "none",
|
|
2901
|
+
children: [
|
|
2902
|
+
/* @__PURE__ */ jsx(
|
|
2903
|
+
"circle",
|
|
2904
|
+
{
|
|
2905
|
+
className: "ww-opacity-25",
|
|
2906
|
+
cx: "12",
|
|
2907
|
+
cy: "12",
|
|
2908
|
+
r: "10",
|
|
2909
|
+
stroke: "currentColor",
|
|
2910
|
+
strokeWidth: "3"
|
|
2911
|
+
}
|
|
2912
|
+
),
|
|
2913
|
+
/* @__PURE__ */ jsx(
|
|
2914
|
+
"path",
|
|
2915
|
+
{
|
|
2916
|
+
className: "ww-opacity-75",
|
|
2917
|
+
fill: "currentColor",
|
|
2918
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
2919
|
+
}
|
|
2920
|
+
)
|
|
2921
|
+
]
|
|
2922
|
+
}
|
|
2923
|
+
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
|
|
2924
|
+
"svg",
|
|
2925
|
+
{
|
|
2926
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2927
|
+
viewBox: "0 0 24 24",
|
|
2928
|
+
fill: "none",
|
|
2929
|
+
stroke: "currentColor",
|
|
2930
|
+
strokeWidth: "2",
|
|
2931
|
+
strokeLinecap: "round",
|
|
2932
|
+
strokeLinejoin: "round",
|
|
2933
|
+
children: /* @__PURE__ */ 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" })
|
|
2934
|
+
}
|
|
2935
|
+
) : /* @__PURE__ */ jsxs(
|
|
2936
|
+
"svg",
|
|
2937
|
+
{
|
|
2938
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2939
|
+
viewBox: "0 0 24 24",
|
|
2940
|
+
fill: "none",
|
|
2941
|
+
stroke: "currentColor",
|
|
2942
|
+
strokeWidth: "2",
|
|
2943
|
+
strokeLinecap: "round",
|
|
2944
|
+
strokeLinejoin: "round",
|
|
2945
|
+
children: [
|
|
2946
|
+
/* @__PURE__ */ jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
2947
|
+
/* @__PURE__ */ 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" })
|
|
2948
|
+
]
|
|
2949
|
+
}
|
|
2950
|
+
),
|
|
2951
|
+
/* @__PURE__ */ jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
2952
|
+
/* @__PURE__ */ jsx(
|
|
2953
|
+
"svg",
|
|
2954
|
+
{
|
|
2955
|
+
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
2956
|
+
viewBox: "0 0 24 24",
|
|
2957
|
+
fill: "none",
|
|
2958
|
+
stroke: "currentColor",
|
|
2959
|
+
strokeWidth: "2.5",
|
|
2960
|
+
strokeLinecap: "round",
|
|
2961
|
+
strokeLinejoin: "round",
|
|
2962
|
+
children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
|
|
2963
|
+
}
|
|
2964
|
+
)
|
|
2965
|
+
]
|
|
2966
|
+
}
|
|
2967
|
+
) }),
|
|
2968
|
+
/* @__PURE__ */ jsx(
|
|
2969
|
+
ChatInput,
|
|
2970
|
+
{
|
|
2971
|
+
input: chat.input,
|
|
2972
|
+
setInput: chat.setInput,
|
|
2973
|
+
onSend: handleSend,
|
|
2974
|
+
streaming: chat.streaming,
|
|
2975
|
+
placeholder: messagePlaceholder,
|
|
2976
|
+
accentColor: userMessageColor,
|
|
2977
|
+
canRegenerate: !!canRegenerate,
|
|
2978
|
+
onRegenerate: () => void chat.regenerate(),
|
|
2979
|
+
selectedContext: chat.selectedContext,
|
|
2980
|
+
onClearContext: () => chat.setSelectedContext(null),
|
|
2981
|
+
...enableVoice && voice.isSupported ? {
|
|
2982
|
+
voiceState: voice.voiceState,
|
|
2983
|
+
onVoiceStart: () => void voice.start(),
|
|
2984
|
+
onVoiceStop: voice.stop
|
|
2985
|
+
} : {},
|
|
2986
|
+
...enableAttachments ? {
|
|
2987
|
+
attachments: attachmentHook.attachments,
|
|
2988
|
+
onAttach: attachmentHook.attach,
|
|
2989
|
+
onRemoveAttachment: attachmentHook.remove,
|
|
2990
|
+
isUploading: attachmentHook.isUploading
|
|
2991
|
+
} : {}
|
|
2992
|
+
}
|
|
2993
|
+
),
|
|
2994
|
+
watermark && /* @__PURE__ */ jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
|
|
2995
|
+
/* @__PURE__ */ jsxs(
|
|
2996
|
+
"a",
|
|
2997
|
+
{
|
|
2998
|
+
href: "https://wallavi.com",
|
|
2999
|
+
target: "_blank",
|
|
3000
|
+
rel: "noopener noreferrer",
|
|
3001
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3002
|
+
children: [
|
|
3003
|
+
/* @__PURE__ */ jsx(
|
|
3004
|
+
"img",
|
|
3005
|
+
{
|
|
3006
|
+
src: watermarkLogoUrl,
|
|
3007
|
+
alt: "Wallavi",
|
|
3008
|
+
width: 12,
|
|
3009
|
+
height: 12
|
|
3010
|
+
}
|
|
3011
|
+
),
|
|
3012
|
+
/* @__PURE__ */ jsx("span", { children: "Powered by Wallavi" })
|
|
3013
|
+
]
|
|
3014
|
+
}
|
|
3015
|
+
),
|
|
3016
|
+
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3017
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
|
|
3018
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
|
|
3019
|
+
] })
|
|
3020
|
+
] })
|
|
2614
3021
|
] }),
|
|
2615
|
-
/* @__PURE__ */
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
headerBg,
|
|
2621
|
-
headerText,
|
|
2622
|
-
onReset: handleReset,
|
|
2623
|
-
onClose: hideCloseButton ? void 0 : onClose,
|
|
2624
|
-
onExpand,
|
|
2625
|
-
expanded,
|
|
2626
|
-
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
2627
|
-
isCallLoading: chat.voiceCall?.loading
|
|
2628
|
-
}
|
|
2629
|
-
),
|
|
2630
|
-
chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsx(
|
|
2631
|
-
VoiceOverlay,
|
|
2632
|
-
{
|
|
2633
|
-
token: chat.voiceCall.token,
|
|
2634
|
-
serverUrl: chat.voiceCall.serverUrl,
|
|
2635
|
-
onClose: chat.voiceCall.stop,
|
|
2636
|
-
accentColor: userMessageColor
|
|
2637
|
-
}
|
|
2638
|
-
),
|
|
2639
|
-
customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
|
|
2640
|
-
"div",
|
|
2641
|
-
{
|
|
2642
|
-
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
2643
|
-
style: { backgroundColor: `${userMessageColor}0d` },
|
|
2644
|
-
children: [
|
|
2645
|
-
/* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
|
|
3022
|
+
showSplitLayout && /* @__PURE__ */ jsxs("div", { className: "ww-w-[280px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/10 ww-flex ww-flex-col ww-h-full ww-overflow-hidden", children: [
|
|
3023
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-p-4 ww-border-b ww-border-border ww-shrink-0", children: [
|
|
3024
|
+
/* @__PURE__ */ jsx("h3", { className: "ww-text-xs ww-font-bold ww-text-foreground ww-uppercase ww-tracking-wider", children: "Centro de Comando" }),
|
|
3025
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-px-2.5 ww-py-1 ww-rounded-full ww-text-[10px] ww-font-medium ww-bg-emerald-500/10 ww-text-emerald-500 ww-w-fit ww-mt-2 ww-max-w-full", children: [
|
|
3026
|
+
/* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-1.5 ww-w-1.5", children: [
|
|
2646
3027
|
/* @__PURE__ */ 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" }),
|
|
2647
|
-
/* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-
|
|
3028
|
+
/* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-1.5 ww-w-1.5 ww-bg-emerald-500" })
|
|
2648
3029
|
] }),
|
|
2649
|
-
/* @__PURE__ */ jsx("span", { className: "ww-
|
|
2650
|
-
]
|
|
2651
|
-
}
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
streaming: chat.streaming,
|
|
2658
|
-
agentName,
|
|
2659
|
-
profilePicture,
|
|
2660
|
-
userColor: userMessageColor,
|
|
2661
|
-
initialMessages,
|
|
2662
|
-
suggestedMessages,
|
|
2663
|
-
showThinking,
|
|
2664
|
-
onSuggest: (msg) => chat.send(msg),
|
|
2665
|
-
onPickerSelect: chat.selectPickerOption
|
|
2666
|
-
}
|
|
2667
|
-
),
|
|
2668
|
-
customBackend?.footerAction && /* @__PURE__ */ jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxs(
|
|
2669
|
-
"button",
|
|
2670
|
-
{
|
|
2671
|
-
onClick: () => void customBackend.footerAction.onClick(),
|
|
2672
|
-
disabled: customBackend.footerAction.loading,
|
|
2673
|
-
style: customBackend.footerAction.icon === "human" ? {
|
|
2674
|
-
backgroundColor: userMessageColor,
|
|
2675
|
-
color: "#ffffff",
|
|
2676
|
-
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
2677
|
-
} : {
|
|
2678
|
-
borderColor: `${userMessageColor}35`,
|
|
2679
|
-
backgroundColor: `${userMessageColor}0d`,
|
|
2680
|
-
color: userMessageColor
|
|
2681
|
-
},
|
|
2682
|
-
className: [
|
|
2683
|
-
"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",
|
|
2684
|
-
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
2685
|
-
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
2686
|
-
].join(" "),
|
|
2687
|
-
children: [
|
|
2688
|
-
customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
|
|
2689
|
-
"svg",
|
|
2690
|
-
{
|
|
2691
|
-
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2692
|
-
viewBox: "0 0 24 24",
|
|
2693
|
-
fill: "none",
|
|
2694
|
-
children: [
|
|
2695
|
-
/* @__PURE__ */ jsx(
|
|
2696
|
-
"circle",
|
|
2697
|
-
{
|
|
2698
|
-
className: "ww-opacity-25",
|
|
2699
|
-
cx: "12",
|
|
2700
|
-
cy: "12",
|
|
2701
|
-
r: "10",
|
|
2702
|
-
stroke: "currentColor",
|
|
2703
|
-
strokeWidth: "3"
|
|
2704
|
-
}
|
|
2705
|
-
),
|
|
2706
|
-
/* @__PURE__ */ jsx(
|
|
2707
|
-
"path",
|
|
2708
|
-
{
|
|
2709
|
-
className: "ww-opacity-75",
|
|
2710
|
-
fill: "currentColor",
|
|
2711
|
-
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
2712
|
-
}
|
|
2713
|
-
)
|
|
2714
|
-
]
|
|
2715
|
-
}
|
|
2716
|
-
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
|
|
2717
|
-
"svg",
|
|
2718
|
-
{
|
|
2719
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2720
|
-
viewBox: "0 0 24 24",
|
|
2721
|
-
fill: "none",
|
|
2722
|
-
stroke: "currentColor",
|
|
2723
|
-
strokeWidth: "2",
|
|
2724
|
-
strokeLinecap: "round",
|
|
2725
|
-
strokeLinejoin: "round",
|
|
2726
|
-
children: /* @__PURE__ */ 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" })
|
|
2727
|
-
}
|
|
2728
|
-
) : /* @__PURE__ */ jsxs(
|
|
2729
|
-
"svg",
|
|
3030
|
+
/* @__PURE__ */ jsx("span", { className: "ww-truncate", children: userContext?.pageContext?.title || userContext?.pageContext?.url || "P\xE1gina General" })
|
|
3031
|
+
] })
|
|
3032
|
+
] }),
|
|
3033
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-overflow-y-auto ww-p-4 ww-flex ww-flex-col ww-gap-5", children: [
|
|
3034
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3035
|
+
/* @__PURE__ */ jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Acciones R\xE1pidas" }),
|
|
3036
|
+
clientActions && clientActions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action) => /* @__PURE__ */ jsxs(
|
|
3037
|
+
"button",
|
|
2730
3038
|
{
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
fill: "none",
|
|
2734
|
-
stroke: "currentColor",
|
|
2735
|
-
strokeWidth: "2",
|
|
2736
|
-
strokeLinecap: "round",
|
|
2737
|
-
strokeLinejoin: "round",
|
|
3039
|
+
onClick: () => executeDeclarativeSteps(action.steps, onNavigate),
|
|
3040
|
+
className: "ww-w-full ww-flex ww-flex-col ww-items-start ww-gap-1 ww-rounded-xl ww-border ww-border-border ww-p-3 ww-text-left ww-bg-background hover:ww-bg-accent/40 hover:ww-border-accent-foreground/25 active:ww-scale-[0.98] ww-transition-all ww-duration-200 ww-group",
|
|
2738
3041
|
children: [
|
|
2739
|
-
/* @__PURE__ */
|
|
2740
|
-
|
|
3042
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-w-full", children: [
|
|
3043
|
+
/* @__PURE__ */ jsx(
|
|
3044
|
+
"svg",
|
|
3045
|
+
{
|
|
3046
|
+
className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 group-hover:ww-text-primary group-hover:ww-rotate-12 ww-transition-transform",
|
|
3047
|
+
viewBox: "0 0 24 24",
|
|
3048
|
+
fill: "none",
|
|
3049
|
+
stroke: "currentColor",
|
|
3050
|
+
strokeWidth: "2",
|
|
3051
|
+
children: /* @__PURE__ */ jsx(
|
|
3052
|
+
"path",
|
|
3053
|
+
{
|
|
3054
|
+
strokeLinecap: "round",
|
|
3055
|
+
strokeLinejoin: "round",
|
|
3056
|
+
d: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
|
|
3057
|
+
}
|
|
3058
|
+
)
|
|
3059
|
+
}
|
|
3060
|
+
),
|
|
3061
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-semibold ww-text-foreground ww-truncate", children: action.name })
|
|
3062
|
+
] }),
|
|
3063
|
+
action.description && /* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-line-clamp-2", children: action.description })
|
|
2741
3064
|
]
|
|
2742
|
-
}
|
|
2743
|
-
|
|
2744
|
-
/* @__PURE__ */ jsx("span", { className: "ww-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
attachments: attachmentHook.attachments,
|
|
2781
|
-
onAttach: attachmentHook.attach,
|
|
2782
|
-
onRemoveAttachment: attachmentHook.remove,
|
|
2783
|
-
isUploading: attachmentHook.isUploading
|
|
2784
|
-
} : {}
|
|
2785
|
-
}
|
|
2786
|
-
),
|
|
2787
|
-
watermark && /* @__PURE__ */ jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
|
|
2788
|
-
/* @__PURE__ */ jsxs(
|
|
2789
|
-
"a",
|
|
2790
|
-
{
|
|
2791
|
-
href: "https://wallavi.com",
|
|
2792
|
-
target: "_blank",
|
|
2793
|
-
rel: "noopener noreferrer",
|
|
2794
|
-
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
2795
|
-
children: [
|
|
2796
|
-
/* @__PURE__ */ jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
|
|
2797
|
-
/* @__PURE__ */ jsx("span", { children: "Powered by Wallavi" })
|
|
2798
|
-
]
|
|
2799
|
-
}
|
|
2800
|
-
),
|
|
2801
|
-
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2802
|
-
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
|
|
2803
|
-
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
|
|
3065
|
+
},
|
|
3066
|
+
action.name
|
|
3067
|
+
)) }) : /* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-italic ww-px-1", children: "No hay acciones disponibles para esta p\xE1gina" })
|
|
3068
|
+
] }),
|
|
3069
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3070
|
+
/* @__PURE__ */ jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Sugerencias" }),
|
|
3071
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: getContextQueries(userContext?.pageContext?.url || "").map(
|
|
3072
|
+
(query) => /* @__PURE__ */ jsxs(
|
|
3073
|
+
"button",
|
|
3074
|
+
{
|
|
3075
|
+
onClick: () => chat.send(query.text),
|
|
3076
|
+
className: "ww-w-full ww-flex ww-items-start ww-gap-2 ww-rounded-xl ww-border ww-border-border/60 ww-p-2.5 ww-text-left ww-bg-muted/30 hover:ww-bg-accent/30 hover:ww-border-accent-foreground/20 active:ww-scale-[0.98] ww-transition-all ww-duration-200",
|
|
3077
|
+
children: [
|
|
3078
|
+
/* @__PURE__ */ jsx(
|
|
3079
|
+
"svg",
|
|
3080
|
+
{
|
|
3081
|
+
className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 ww-shrink-0 ww-mt-0.5",
|
|
3082
|
+
viewBox: "0 0 24 24",
|
|
3083
|
+
fill: "none",
|
|
3084
|
+
stroke: "currentColor",
|
|
3085
|
+
strokeWidth: "2",
|
|
3086
|
+
children: /* @__PURE__ */ jsx(
|
|
3087
|
+
"path",
|
|
3088
|
+
{
|
|
3089
|
+
strokeLinecap: "round",
|
|
3090
|
+
strokeLinejoin: "round",
|
|
3091
|
+
d: "M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.9 2.78 2.9h6.22l3.75 3.75V18.1H18c1.66 0 2.78-1.3 2.78-2.9v-7c0-1.6-1.12-2.9-2.78-2.9H5.25c-1.66 0-2.78 1.3-2.78 2.9v7z"
|
|
3092
|
+
}
|
|
3093
|
+
)
|
|
3094
|
+
}
|
|
3095
|
+
),
|
|
3096
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/90", children: query.text })
|
|
3097
|
+
]
|
|
3098
|
+
},
|
|
3099
|
+
query.text
|
|
3100
|
+
)
|
|
3101
|
+
) })
|
|
3102
|
+
] })
|
|
2804
3103
|
] })
|
|
2805
3104
|
] })
|
|
2806
3105
|
]
|
|
@@ -2815,6 +3114,7 @@ var EMPTY = {
|
|
|
2815
3114
|
keyboardShortcut: false,
|
|
2816
3115
|
position: "bottom-right",
|
|
2817
3116
|
widgetLayout: "bubble",
|
|
3117
|
+
clientActions: [],
|
|
2818
3118
|
bubbleSize: 52,
|
|
2819
3119
|
panelWidth: 360,
|
|
2820
3120
|
panelHeight: 580,
|
|
@@ -2858,6 +3158,8 @@ function useAutoConfig(agentId, enabled) {
|
|
|
2858
3158
|
remote.widgetLayout = cfg.widgetLayout;
|
|
2859
3159
|
if (cfg.enableVoice != null)
|
|
2860
3160
|
remote.enableVoice = cfg.enableVoice;
|
|
3161
|
+
if (cfg.clientActions)
|
|
3162
|
+
remote.clientActions = cfg.clientActions;
|
|
2861
3163
|
setResult({
|
|
2862
3164
|
remoteConfig: remote,
|
|
2863
3165
|
bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
|
|
@@ -2865,6 +3167,7 @@ function useAutoConfig(agentId, enabled) {
|
|
|
2865
3167
|
keyboardShortcut: Boolean(cfg.keyboardShortcut),
|
|
2866
3168
|
position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
|
|
2867
3169
|
widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
|
|
3170
|
+
clientActions: Array.isArray(cfg.clientActions) ? cfg.clientActions : [],
|
|
2868
3171
|
bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
|
|
2869
3172
|
panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
|
|
2870
3173
|
panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
|