@wallavi/widget 1.11.0 → 1.12.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 +57 -7
- package/dist/index.d.ts +57 -7
- package/dist/index.js +1066 -269
- package/dist/index.mjs +1064 -270
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -58,7 +58,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// src/styles.css
|
|
61
|
-
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");
|
|
61
|
+
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-mb-2\\.5 {\n margin-bottom: 0.625rem;\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-1\\.5 {\n margin-top: 0.375rem;\n}\n.ww-line-clamp-1 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\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-\\[300px\\] {\n width: 300px;\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-\\[170px\\] {\n max-width: 170px;\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-translate-x-\\[-4px\\] {\n --tw-translate-x: -4px;\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-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-3\\.5 {\n gap: 0.875rem;\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-full {\n border-radius: 9999px !important;\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-br-2xl {\n border-bottom-right-radius: 1rem;\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\\/15 {\n border-color: hsl(var(--primary) / 0.15);\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-indigo-500\\/10 {\n background-color: rgb(99 102 241 / 0.1);\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-3 {\n padding: 0.75rem;\n}\n.ww-p-3\\.5 {\n padding: 0.875rem;\n}\n.ww-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.ww-px-1\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\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-3 {\n padding-bottom: 0.75rem;\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-0\\.5 {\n padding-top: 0.125rem;\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-4 {\n padding-top: 1rem;\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-font-mono {\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n}\n.ww-text-\\[10\\.5px\\] {\n font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n font-size: 12.5px;\n}\n.ww-text-\\[12px\\] {\n font-size: 12px;\n}\n.ww-text-\\[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-leading-none {\n line-height: 1;\n}\n.ww-leading-normal {\n line-height: 1.5;\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-\\[0\\.06em\\] {\n letter-spacing: 0.06em;\n}\n.ww-tracking-\\[0\\.12em\\] {\n letter-spacing: 0.12em;\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-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity, 1));\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-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / var(--tw-text-opacity, 1));\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\\/45 {\n color: hsl(var(--muted-foreground) / 0.45);\n}\n.ww-text-muted-foreground\\/50 {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/60 {\n color: hsl(var(--muted-foreground) / 0.6);\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\\/60 {\n color: hsl(var(--primary) / 0.6);\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-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-0 {\n opacity: 0;\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-55 {\n opacity: 0.55;\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-\\[0_1px_2px_rgba\\(0\\,0\\,0\\,0\\.03\\)\\] {\n --tw-shadow: 0 1px 2px rgba(0,0,0,0.03);\n --tw-shadow-colored: 0 1px 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-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-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-bottom-1 {\n --tw-enter-translate-y: 0.25rem;\n}\n.ww-slide-in-from-bottom-2 {\n --tw-enter-translate-y: 0.5rem;\n}\n.ww-slide-in-from-right-2 {\n --tw-enter-translate-x: 0.5rem;\n}\n.ww-duration-1000 {\n animation-duration: 1000ms;\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-border\\/80:hover {\n border-color: hsl(var(--border) / 0.8);\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-muted\\/20:hover {\n background-color: hsl(var(--muted) / 0.2);\n}\n.hover\\:ww-bg-primary\\/10:hover {\n background-color: hsl(var(--primary) / 0.1);\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-md:hover {\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.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.focus-visible\\:ww-outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus-visible\\:ww-ring-2:focus-visible {\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.focus-visible\\:ww-ring-ring\\/40:focus-visible {\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-translate-x-0 {\n --tw-translate-x: 0px;\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-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-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-group:hover .group-hover\\: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-group:hover .group-hover\\:ww-opacity-100 {\n opacity: 1;\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-indigo-400\\/10:is(.ww-dark *) {\n background-color: rgb(129 140 248 / 0.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-indigo-400:is(.ww-dark *) {\n --tw-text-opacity: 1;\n color: rgb(129 140 248 / var(--tw-text-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');
|
|
62
62
|
var twMerge = tailwindMerge.extendTailwindMerge({ prefix: "ww-" });
|
|
63
63
|
var cn = (...inputs) => twMerge(clsx.clsx(inputs));
|
|
64
64
|
async function getFreshClerkToken() {
|
|
@@ -366,9 +366,12 @@ function useChat({
|
|
|
366
366
|
});
|
|
367
367
|
const streamingMsgIdRef = react.useRef(null);
|
|
368
368
|
const [debugTraces, setDebugTraces] = react.useState([]);
|
|
369
|
-
const [selectedContext, setSelectedContext] = react.useState(
|
|
369
|
+
const [selectedContext, setSelectedContext] = react.useState(
|
|
370
|
+
null
|
|
371
|
+
);
|
|
370
372
|
react.useEffect(() => {
|
|
371
|
-
if (typeof window === "undefined" || typeof document === "undefined")
|
|
373
|
+
if (typeof window === "undefined" || typeof document === "undefined")
|
|
374
|
+
return;
|
|
372
375
|
const handleContextSelected = (event) => {
|
|
373
376
|
const customEvent = event;
|
|
374
377
|
if (customEvent.detail && customEvent.detail.id) {
|
|
@@ -377,7 +380,9 @@ function useChat({
|
|
|
377
380
|
};
|
|
378
381
|
const handleGlobalClick = (e) => {
|
|
379
382
|
if (e.metaKey || e.ctrlKey) {
|
|
380
|
-
const target = e.target.closest(
|
|
383
|
+
const target = e.target.closest(
|
|
384
|
+
"[data-wallavi-id]"
|
|
385
|
+
);
|
|
381
386
|
if (target) {
|
|
382
387
|
e.preventDefault();
|
|
383
388
|
e.stopPropagation();
|
|
@@ -414,7 +419,10 @@ function useChat({
|
|
|
414
419
|
window.addEventListener("wallavi:context-selected", handleContextSelected);
|
|
415
420
|
document.addEventListener("click", handleGlobalClick, true);
|
|
416
421
|
return () => {
|
|
417
|
-
window.removeEventListener(
|
|
422
|
+
window.removeEventListener(
|
|
423
|
+
"wallavi:context-selected",
|
|
424
|
+
handleContextSelected
|
|
425
|
+
);
|
|
418
426
|
document.removeEventListener("click", handleGlobalClick, true);
|
|
419
427
|
};
|
|
420
428
|
}, []);
|
|
@@ -1138,6 +1146,118 @@ function MinimizeIcon() {
|
|
|
1138
1146
|
}
|
|
1139
1147
|
) });
|
|
1140
1148
|
}
|
|
1149
|
+
|
|
1150
|
+
// src/lib/translations.ts
|
|
1151
|
+
var WIDGET_TRANSLATIONS = {
|
|
1152
|
+
en: {
|
|
1153
|
+
quickActions: "Quick Actions",
|
|
1154
|
+
documentation: "Documentation",
|
|
1155
|
+
askAbout: "Ask about",
|
|
1156
|
+
poweredBy: "Powered by",
|
|
1157
|
+
sendMessage: "Send a message\u2026",
|
|
1158
|
+
search: "Search\u2026",
|
|
1159
|
+
generalContext: "General Context",
|
|
1160
|
+
defaultGreeting: "Hello! How can I help you today?",
|
|
1161
|
+
connecting: "Connecting...",
|
|
1162
|
+
listening: "Listening...",
|
|
1163
|
+
speaking: "Speaking...",
|
|
1164
|
+
ready: "Ready",
|
|
1165
|
+
aiAssistant: "AI Assistant",
|
|
1166
|
+
minimize: "Minimize",
|
|
1167
|
+
expand: "Expand",
|
|
1168
|
+
voiceCall: "Voice Call",
|
|
1169
|
+
newConversation: "New conversation",
|
|
1170
|
+
close: "Close",
|
|
1171
|
+
dropFiles: "Drop files to attach",
|
|
1172
|
+
talkingToAgent: "Talking to an agent",
|
|
1173
|
+
muteMic: "Mute microphone",
|
|
1174
|
+
unmuteMic: "Unmute microphone",
|
|
1175
|
+
disconnect: "Disconnect",
|
|
1176
|
+
calling: "Calling",
|
|
1177
|
+
called: "Called",
|
|
1178
|
+
failed: "Failed",
|
|
1179
|
+
reasoning: "Reasoning",
|
|
1180
|
+
noResults: "No results",
|
|
1181
|
+
proceed: "Proceed",
|
|
1182
|
+
proceedMessage: "yes, proceed",
|
|
1183
|
+
cancel: "Cancel",
|
|
1184
|
+
cancelMessage: "cancel",
|
|
1185
|
+
regenerateResponse: "Regenerate response",
|
|
1186
|
+
removeContext: "Remove context",
|
|
1187
|
+
stopRecording: "Stop recording",
|
|
1188
|
+
recordVoiceMessage: "Record voice message",
|
|
1189
|
+
attachFile: "Attach file (CSV, image\u2026)",
|
|
1190
|
+
requestHuman: "Talk to an agent",
|
|
1191
|
+
requestHumanSublabel: "We'll connect you with an available agent",
|
|
1192
|
+
returnToAi: "Return to AI chat",
|
|
1193
|
+
returnToAiSublabel: "Instant response with artificial intelligence",
|
|
1194
|
+
filesCount: "{count} file(s)",
|
|
1195
|
+
tellMeAbout: "Tell me about {name}",
|
|
1196
|
+
tellMeMoreAbout: "Tell me more about: {name}",
|
|
1197
|
+
whatDoYouKnowAbout: "What do you know about {name}?",
|
|
1198
|
+
uploadFailed: "Upload failed",
|
|
1199
|
+
remove: "Remove"
|
|
1200
|
+
},
|
|
1201
|
+
es: {
|
|
1202
|
+
quickActions: "Acciones r\xE1pidas",
|
|
1203
|
+
documentation: "Documentaci\xF3n",
|
|
1204
|
+
askAbout: "Preguntas frecuentes",
|
|
1205
|
+
poweredBy: "Powered by",
|
|
1206
|
+
sendMessage: "Enviar un mensaje...",
|
|
1207
|
+
search: "Buscar...",
|
|
1208
|
+
generalContext: "Contexto general",
|
|
1209
|
+
defaultGreeting: "\xA1Hola! \xBFC\xF3mo puedo ayudarte hoy?",
|
|
1210
|
+
connecting: "Conectando...",
|
|
1211
|
+
listening: "Escuchando...",
|
|
1212
|
+
speaking: "Hablando...",
|
|
1213
|
+
ready: "Listo",
|
|
1214
|
+
aiAssistant: "Asistente de IA",
|
|
1215
|
+
minimize: "Minimizar",
|
|
1216
|
+
expand: "Expandir",
|
|
1217
|
+
voiceCall: "Llamada de voz",
|
|
1218
|
+
newConversation: "Nueva conversaci\xF3n",
|
|
1219
|
+
close: "Cerrar",
|
|
1220
|
+
dropFiles: "Arrastra archivos para adjuntar",
|
|
1221
|
+
talkingToAgent: "Hablando con un agente",
|
|
1222
|
+
muteMic: "Silenciar micr\xF3fono",
|
|
1223
|
+
unmuteMic: "Activar micr\xF3fono",
|
|
1224
|
+
disconnect: "Desconectar",
|
|
1225
|
+
calling: "Llamando",
|
|
1226
|
+
called: "Llamado",
|
|
1227
|
+
failed: "Fall\xF3",
|
|
1228
|
+
reasoning: "Razonamiento",
|
|
1229
|
+
noResults: "Sin resultados",
|
|
1230
|
+
proceed: "Proceder",
|
|
1231
|
+
proceedMessage: "s\xED, proceder",
|
|
1232
|
+
cancel: "Cancelar",
|
|
1233
|
+
cancelMessage: "cancelar",
|
|
1234
|
+
regenerateResponse: "Regenerar respuesta",
|
|
1235
|
+
removeContext: "Eliminar contexto",
|
|
1236
|
+
stopRecording: "Detener grabaci\xF3n",
|
|
1237
|
+
recordVoiceMessage: "Grabar mensaje de voz",
|
|
1238
|
+
attachFile: "Adjuntar archivo (CSV, imagen...)",
|
|
1239
|
+
requestHuman: "Hablar con un agente",
|
|
1240
|
+
requestHumanSublabel: "Te conectamos con un agente disponible",
|
|
1241
|
+
returnToAi: "Volver a chatear con la IA",
|
|
1242
|
+
returnToAiSublabel: "Respuesta instant\xE1nea con inteligencia artificial",
|
|
1243
|
+
filesCount: "{count} archivo(s)",
|
|
1244
|
+
tellMeAbout: "H\xE1blame de {name}",
|
|
1245
|
+
tellMeMoreAbout: "Cu\xE9ntame m\xE1s sobre: {name}",
|
|
1246
|
+
whatDoYouKnowAbout: "\xBFQu\xE9 sabes sobre {name}?",
|
|
1247
|
+
uploadFailed: "Error al subir",
|
|
1248
|
+
remove: "Quitar"
|
|
1249
|
+
}
|
|
1250
|
+
};
|
|
1251
|
+
function getWidgetTranslation(key, locale, replacements) {
|
|
1252
|
+
const lang = locale === "es" ? "es" : "en";
|
|
1253
|
+
let text = WIDGET_TRANSLATIONS[lang][key];
|
|
1254
|
+
if (replacements) {
|
|
1255
|
+
Object.entries(replacements).forEach(([k, v]) => {
|
|
1256
|
+
text = text.replace(`{${k}}`, v);
|
|
1257
|
+
});
|
|
1258
|
+
}
|
|
1259
|
+
return text;
|
|
1260
|
+
}
|
|
1141
1261
|
var Avatar = ({
|
|
1142
1262
|
style,
|
|
1143
1263
|
...p
|
|
@@ -1200,7 +1320,8 @@ function ChatHeader({
|
|
|
1200
1320
|
onExpand,
|
|
1201
1321
|
expanded,
|
|
1202
1322
|
onCall,
|
|
1203
|
-
isCallLoading
|
|
1323
|
+
isCallLoading,
|
|
1324
|
+
locale
|
|
1204
1325
|
}) {
|
|
1205
1326
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1206
1327
|
"header",
|
|
@@ -1233,7 +1354,7 @@ function ChatHeader({
|
|
|
1233
1354
|
),
|
|
1234
1355
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-min-w-0", children: [
|
|
1235
1356
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-font-semibold ww-text-sm ww-truncate ww-leading-tight", children: title }),
|
|
1236
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: "
|
|
1357
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: getWidgetTranslation("aiAssistant", locale) })
|
|
1237
1358
|
] })
|
|
1238
1359
|
] }),
|
|
1239
1360
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1", children: [
|
|
@@ -1242,7 +1363,7 @@ function ChatHeader({
|
|
|
1242
1363
|
{
|
|
1243
1364
|
onClick: onExpand,
|
|
1244
1365
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1245
|
-
title: expanded ? "
|
|
1366
|
+
title: expanded ? getWidgetTranslation("minimize", locale) : getWidgetTranslation("expand", locale),
|
|
1246
1367
|
children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
|
|
1247
1368
|
}
|
|
1248
1369
|
),
|
|
@@ -1252,7 +1373,7 @@ function ChatHeader({
|
|
|
1252
1373
|
onClick: onCall,
|
|
1253
1374
|
disabled: isCallLoading,
|
|
1254
1375
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10 disabled:ww-opacity-50",
|
|
1255
|
-
title: "
|
|
1376
|
+
title: getWidgetTranslation("voiceCall", locale),
|
|
1256
1377
|
children: isCallLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1257
1378
|
"svg",
|
|
1258
1379
|
{
|
|
@@ -1296,7 +1417,7 @@ function ChatHeader({
|
|
|
1296
1417
|
{
|
|
1297
1418
|
onClick: onReset,
|
|
1298
1419
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1299
|
-
title: "
|
|
1420
|
+
title: getWidgetTranslation("newConversation", locale),
|
|
1300
1421
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1301
1422
|
lucideReact.RotateCcw,
|
|
1302
1423
|
{
|
|
@@ -1311,7 +1432,7 @@ function ChatHeader({
|
|
|
1311
1432
|
{
|
|
1312
1433
|
onClick: onClose,
|
|
1313
1434
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1314
|
-
title: "
|
|
1435
|
+
title: getWidgetTranslation("close", locale),
|
|
1315
1436
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-3.5 ww-w-3.5", style: { color: headerText } })
|
|
1316
1437
|
}
|
|
1317
1438
|
)
|
|
@@ -1353,7 +1474,8 @@ function ChipLeading({ a }) {
|
|
|
1353
1474
|
}
|
|
1354
1475
|
function AttachmentChips({
|
|
1355
1476
|
attachments,
|
|
1356
|
-
onRemove
|
|
1477
|
+
onRemove,
|
|
1478
|
+
locale
|
|
1357
1479
|
}) {
|
|
1358
1480
|
if (attachments.length === 0) return null;
|
|
1359
1481
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5 ww-px-1 ww-pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1365,7 +1487,7 @@ function AttachmentChips({
|
|
|
1365
1487
|
),
|
|
1366
1488
|
children: [
|
|
1367
1489
|
/* @__PURE__ */ jsxRuntime.jsx(ChipLeading, { a }),
|
|
1368
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? "
|
|
1490
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? getWidgetTranslation("uploadFailed", locale) : a.name }),
|
|
1369
1491
|
a.status === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-shrink-0 ww-text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
|
|
1370
1492
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1371
1493
|
"button",
|
|
@@ -1373,7 +1495,7 @@ function AttachmentChips({
|
|
|
1373
1495
|
type: "button",
|
|
1374
1496
|
onClick: () => onRemove(a.id),
|
|
1375
1497
|
className: "ww-shrink-0 ww-rounded-full ww-p-0.5 hover:ww-bg-foreground/10 ww-transition-colors ww-ml-0.5",
|
|
1376
|
-
title: "
|
|
1498
|
+
title: getWidgetTranslation("remove", locale),
|
|
1377
1499
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-2.5 ww-w-2.5" })
|
|
1378
1500
|
}
|
|
1379
1501
|
)
|
|
@@ -1453,7 +1575,8 @@ function PlanStepIcon({ status }) {
|
|
|
1453
1575
|
function PlanCard({
|
|
1454
1576
|
part,
|
|
1455
1577
|
onSend,
|
|
1456
|
-
disabled
|
|
1578
|
+
disabled,
|
|
1579
|
+
locale
|
|
1457
1580
|
}) {
|
|
1458
1581
|
const successCount = part.steps.filter((s) => s.status === "success").length;
|
|
1459
1582
|
const hasExecuting = part.steps.some((s) => s.status === "executing");
|
|
@@ -1505,7 +1628,7 @@ function PlanCard({
|
|
|
1505
1628
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1506
1629
|
"button",
|
|
1507
1630
|
{
|
|
1508
|
-
onClick: () => onSend("
|
|
1631
|
+
onClick: () => onSend(getWidgetTranslation("proceedMessage", locale)),
|
|
1509
1632
|
disabled,
|
|
1510
1633
|
className: "ww-flex-1 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-rounded-lg ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-opacity hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
1511
1634
|
style: {
|
|
@@ -1514,19 +1637,19 @@ function PlanCard({
|
|
|
1514
1637
|
},
|
|
1515
1638
|
children: [
|
|
1516
1639
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1517
|
-
"
|
|
1640
|
+
getWidgetTranslation("proceed", locale)
|
|
1518
1641
|
]
|
|
1519
1642
|
}
|
|
1520
1643
|
),
|
|
1521
1644
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1522
1645
|
"button",
|
|
1523
1646
|
{
|
|
1524
|
-
onClick: () => onSend("
|
|
1647
|
+
onClick: () => onSend(getWidgetTranslation("cancelMessage", locale)),
|
|
1525
1648
|
disabled,
|
|
1526
1649
|
className: "ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-rounded-lg ww-px-3 ww-py-1.5 ww-text-xs ww-font-medium ww-bg-muted ww-text-muted-foreground ww-transition-opacity hover:ww-opacity-80 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
1527
1650
|
children: [
|
|
1528
1651
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1529
|
-
"
|
|
1652
|
+
getWidgetTranslation("cancel", locale)
|
|
1530
1653
|
]
|
|
1531
1654
|
}
|
|
1532
1655
|
)
|
|
@@ -1570,19 +1693,25 @@ function ThinkingDots() {
|
|
|
1570
1693
|
)
|
|
1571
1694
|
] });
|
|
1572
1695
|
}
|
|
1573
|
-
function ToolCallBadge({
|
|
1696
|
+
function ToolCallBadge({
|
|
1697
|
+
part,
|
|
1698
|
+
locale
|
|
1699
|
+
}) {
|
|
1574
1700
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-text-xs ww-text-muted-foreground ww-bg-muted/60 ww-border ww-rounded-full ww-px-3 ww-py-1 ww-w-fit", children: [
|
|
1575
1701
|
part.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin" }),
|
|
1576
1702
|
part.status === "done" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" }),
|
|
1577
1703
|
part.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" }),
|
|
1578
1704
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1579
|
-
part.status === "running" ? "
|
|
1705
|
+
part.status === "running" ? getWidgetTranslation("calling", locale) : part.status === "done" ? getWidgetTranslation("called", locale) : getWidgetTranslation("failed", locale),
|
|
1580
1706
|
" ",
|
|
1581
1707
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-font-medium ww-text-foreground", children: formatToolName(part.toolName) })
|
|
1582
1708
|
] })
|
|
1583
1709
|
] });
|
|
1584
1710
|
}
|
|
1585
|
-
function ReasoningBlock({
|
|
1711
|
+
function ReasoningBlock({
|
|
1712
|
+
text,
|
|
1713
|
+
locale
|
|
1714
|
+
}) {
|
|
1586
1715
|
const [open, setOpen] = react.useState(false);
|
|
1587
1716
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-mb-1", children: [
|
|
1588
1717
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1592,7 +1721,7 @@ function ReasoningBlock({ text }) {
|
|
|
1592
1721
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-xs ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
1593
1722
|
children: [
|
|
1594
1723
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "ww-h-3 ww-w-3" }),
|
|
1595
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "
|
|
1724
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: getWidgetTranslation("reasoning", locale) }),
|
|
1596
1725
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1597
1726
|
lucideReact.ChevronDown,
|
|
1598
1727
|
{
|
|
@@ -1611,7 +1740,8 @@ function ReasoningBlock({ text }) {
|
|
|
1611
1740
|
function PickerSelector({
|
|
1612
1741
|
part,
|
|
1613
1742
|
disabled,
|
|
1614
|
-
onSelect
|
|
1743
|
+
onSelect,
|
|
1744
|
+
locale
|
|
1615
1745
|
}) {
|
|
1616
1746
|
const count = part.options.length;
|
|
1617
1747
|
const mode = count <= 6 ? "pills" : count <= 20 ? "grid" : "list";
|
|
@@ -1643,7 +1773,7 @@ function PickerSelector({
|
|
|
1643
1773
|
type: "text",
|
|
1644
1774
|
value: query,
|
|
1645
1775
|
onChange: (e) => setQuery(e.target.value),
|
|
1646
|
-
placeholder: "
|
|
1776
|
+
placeholder: getWidgetTranslation("search", locale),
|
|
1647
1777
|
disabled: disabled || isConsumed,
|
|
1648
1778
|
className: "ww-w-full ww-rounded-lg ww-border ww-bg-background ww-pl-7 ww-pr-3 ww-py-1.5 ww-text-xs ww-outline-none focus:ww-ring-1 focus:ww-ring-ring/40 placeholder:ww-text-muted-foreground/40 disabled:ww-opacity-50"
|
|
1649
1779
|
}
|
|
@@ -1692,7 +1822,7 @@ function PickerSelector({
|
|
|
1692
1822
|
);
|
|
1693
1823
|
}) }),
|
|
1694
1824
|
mode === "list" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-0.5 ww-max-h-[180px] ww-overflow-y-auto ww-pr-0.5", children: [
|
|
1695
|
-
filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: "
|
|
1825
|
+
filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: getWidgetTranslation("noResults", locale) }),
|
|
1696
1826
|
filtered.map((opt, i) => {
|
|
1697
1827
|
const sel = part.selectedValue === opt.value;
|
|
1698
1828
|
const faded = isConsumed && !sel;
|
|
@@ -1729,7 +1859,10 @@ function PickerSelector({
|
|
|
1729
1859
|
);
|
|
1730
1860
|
}
|
|
1731
1861
|
var ReactMarkdown = ReactMarkdownLib__default.default;
|
|
1732
|
-
function MarkdownContent({
|
|
1862
|
+
function MarkdownContent({
|
|
1863
|
+
text,
|
|
1864
|
+
isUser
|
|
1865
|
+
}) {
|
|
1733
1866
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1734
1867
|
ReactMarkdown,
|
|
1735
1868
|
{
|
|
@@ -1817,10 +1950,15 @@ function MarkdownContent({ text }) {
|
|
|
1817
1950
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1818
1951
|
"span",
|
|
1819
1952
|
{
|
|
1820
|
-
className:
|
|
1953
|
+
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"}`,
|
|
1821
1954
|
title: `${type}: ${id}`,
|
|
1822
1955
|
children: [
|
|
1823
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1956
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1957
|
+
"span",
|
|
1958
|
+
{
|
|
1959
|
+
className: `ww-h-1.5 ww-w-1.5 ww-rounded-full ${isUser ? "ww-bg-white" : "ww-bg-primary"}`
|
|
1960
|
+
}
|
|
1961
|
+
),
|
|
1824
1962
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-opacity-70 ww-uppercase ww-text-[8px] ww-tracking-wider", children: [
|
|
1825
1963
|
type,
|
|
1826
1964
|
":"
|
|
@@ -1836,7 +1974,7 @@ function MarkdownContent({ text }) {
|
|
|
1836
1974
|
href,
|
|
1837
1975
|
target: "_blank",
|
|
1838
1976
|
rel: "noopener noreferrer",
|
|
1839
|
-
|
|
1977
|
+
className: isUser ? "ww-text-inherit ww-underline ww-opacity-90" : "ww-underline ww-opacity-75",
|
|
1840
1978
|
children
|
|
1841
1979
|
}
|
|
1842
1980
|
);
|
|
@@ -1941,10 +2079,11 @@ function MessageBubble({
|
|
|
1941
2079
|
userColor,
|
|
1942
2080
|
agentName,
|
|
1943
2081
|
profilePicture,
|
|
1944
|
-
isStreaming,
|
|
2082
|
+
isStreaming = false,
|
|
1945
2083
|
showThinking = true,
|
|
1946
2084
|
onPickerSelect,
|
|
1947
|
-
onSend
|
|
2085
|
+
onSend,
|
|
2086
|
+
locale
|
|
1948
2087
|
}) {
|
|
1949
2088
|
const isUser = message.role === "user";
|
|
1950
2089
|
const textPart = message.parts.find((p) => p.type === "text");
|
|
@@ -1973,7 +2112,7 @@ function MessageBubble({
|
|
|
1973
2112
|
contrastColor
|
|
1974
2113
|
}
|
|
1975
2114
|
),
|
|
1976
|
-
textPart?.text && /* @__PURE__ */ jsxRuntime.jsx("
|
|
2115
|
+
textPart?.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-prose ww-prose-sm ww-max-w-none ww-text-inherit prose-p:ww-my-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { text: textPart.text, isUser: true }) })
|
|
1977
2116
|
]
|
|
1978
2117
|
}
|
|
1979
2118
|
) });
|
|
@@ -2005,24 +2144,26 @@ function MessageBubble({
|
|
|
2005
2144
|
}
|
|
2006
2145
|
),
|
|
2007
2146
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
|
|
2008
|
-
showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
|
|
2147
|
+
showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text, locale }),
|
|
2009
2148
|
planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2010
2149
|
PlanCard,
|
|
2011
2150
|
{
|
|
2012
2151
|
part: p,
|
|
2013
2152
|
onSend,
|
|
2014
|
-
disabled: isStreaming
|
|
2153
|
+
disabled: isStreaming,
|
|
2154
|
+
locale
|
|
2015
2155
|
},
|
|
2016
2156
|
p.planId
|
|
2017
2157
|
)),
|
|
2018
|
-
visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
|
|
2158
|
+
visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t, locale }, t.toolCallId)),
|
|
2019
2159
|
pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2020
2160
|
PickerSelector,
|
|
2021
2161
|
{
|
|
2022
2162
|
part: p,
|
|
2023
2163
|
disabled: isStreaming ?? false,
|
|
2024
2164
|
onSelect: onPickerSelect ?? (() => {
|
|
2025
|
-
})
|
|
2165
|
+
}),
|
|
2166
|
+
locale
|
|
2026
2167
|
},
|
|
2027
2168
|
p.pickerId
|
|
2028
2169
|
)),
|
|
@@ -2070,7 +2211,9 @@ function ChatMessages({
|
|
|
2070
2211
|
suggestedMessages = [],
|
|
2071
2212
|
showThinking = true,
|
|
2072
2213
|
onSuggest,
|
|
2073
|
-
onPickerSelect
|
|
2214
|
+
onPickerSelect,
|
|
2215
|
+
commandPanel,
|
|
2216
|
+
locale
|
|
2074
2217
|
}) {
|
|
2075
2218
|
const bottomRef = react.useRef(null);
|
|
2076
2219
|
const greetText = initialMessages[0];
|
|
@@ -2083,6 +2226,7 @@ function ChatMessages({
|
|
|
2083
2226
|
/* @__PURE__ */ jsxRuntime.jsx(Avatar3, { className: "ww-h-7 ww-w-7 ww-shrink-0 ww-mt-0.5 ww-border", children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback3, { className: "ww-text-[10px] ww-font-semibold ww-bg-primary ww-text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
|
|
2084
2227
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-rounded-2xl ww-rounded-tl-sm ww-bg-muted ww-px-4 ww-py-2.5 ww-text-sm ww-leading-relaxed ww-max-w-[82%]", children: greetText })
|
|
2085
2228
|
] }),
|
|
2229
|
+
showGreeting && commandPanel,
|
|
2086
2230
|
showGreeting && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex-1" }),
|
|
2087
2231
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-4 ww-px-4 ww-py-4", children: messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2088
2232
|
MessageBubble,
|
|
@@ -2094,7 +2238,8 @@ function ChatMessages({
|
|
|
2094
2238
|
isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
|
|
2095
2239
|
showThinking,
|
|
2096
2240
|
onPickerSelect,
|
|
2097
|
-
onSend: i === messages.length - 1 ? onSuggest : void 0
|
|
2241
|
+
onSend: i === messages.length - 1 ? onSuggest : void 0,
|
|
2242
|
+
locale
|
|
2098
2243
|
},
|
|
2099
2244
|
msg.id
|
|
2100
2245
|
)) }),
|
|
@@ -2148,6 +2293,88 @@ function ChatMessages({
|
|
|
2148
2293
|
] });
|
|
2149
2294
|
}
|
|
2150
2295
|
var cn3 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
2296
|
+
var serializeNode = (node) => {
|
|
2297
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
2298
|
+
return node.nodeValue || "";
|
|
2299
|
+
}
|
|
2300
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
2301
|
+
const el = node;
|
|
2302
|
+
if (el.tagName === "SPAN" && el.getAttribute("data-wlv-context-id")) {
|
|
2303
|
+
const id = el.getAttribute("data-wlv-context-id");
|
|
2304
|
+
const type = el.getAttribute("data-wlv-context-type");
|
|
2305
|
+
const name = el.getAttribute("data-wlv-context-name");
|
|
2306
|
+
return `[${name}](wallavi://${type}/${id})`;
|
|
2307
|
+
}
|
|
2308
|
+
if (el.tagName === "BR") {
|
|
2309
|
+
return "\n";
|
|
2310
|
+
}
|
|
2311
|
+
let childText = "";
|
|
2312
|
+
for (const child of Array.from(el.childNodes)) {
|
|
2313
|
+
childText += serializeNode(child);
|
|
2314
|
+
}
|
|
2315
|
+
const isBlock = ["DIV", "P", "TR", "LI"].includes(el.tagName);
|
|
2316
|
+
return isBlock ? `
|
|
2317
|
+
${childText}` : childText;
|
|
2318
|
+
}
|
|
2319
|
+
return "";
|
|
2320
|
+
};
|
|
2321
|
+
var serializeEditor = (editor) => {
|
|
2322
|
+
let text = "";
|
|
2323
|
+
for (const child of Array.from(editor.childNodes)) {
|
|
2324
|
+
text += serializeNode(child);
|
|
2325
|
+
}
|
|
2326
|
+
return text.replace(/^\n+/, "").replace(/\n+$/, "");
|
|
2327
|
+
};
|
|
2328
|
+
var createChipElement = (name, type, id, accentColor) => {
|
|
2329
|
+
const span = document.createElement("span");
|
|
2330
|
+
span.setAttribute("contenteditable", "false");
|
|
2331
|
+
span.className = "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/8 ww-border ww-border-primary/15 ww-text-primary ww-text-xs ww-font-semibold ww-px-2.5 ww-py-0.5 ww-rounded-lg ww-mx-0.5 ww-align-middle ww-shadow-2xs ww-select-all ww-backdrop-blur-sm";
|
|
2332
|
+
span.style.setProperty("--primary", accentColor);
|
|
2333
|
+
span.setAttribute("data-wlv-context-id", id);
|
|
2334
|
+
span.setAttribute("data-wlv-context-type", type);
|
|
2335
|
+
span.setAttribute("data-wlv-context-name", name);
|
|
2336
|
+
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
2337
|
+
icon.setAttribute("viewBox", "0 0 24 24");
|
|
2338
|
+
icon.setAttribute("fill", "none");
|
|
2339
|
+
icon.setAttribute("stroke", "currentColor");
|
|
2340
|
+
icon.setAttribute("stroke-width", "2");
|
|
2341
|
+
icon.setAttribute("stroke-linecap", "round");
|
|
2342
|
+
icon.setAttribute("stroke-linejoin", "round");
|
|
2343
|
+
icon.classList.add("ww-w-3", "ww-h-3", "ww-shrink-0", "ww-opacity-70");
|
|
2344
|
+
const c1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2345
|
+
c1.setAttribute("cx", "12");
|
|
2346
|
+
c1.setAttribute("cy", "12");
|
|
2347
|
+
c1.setAttribute("r", "10");
|
|
2348
|
+
const c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2349
|
+
c2.setAttribute("cx", "12");
|
|
2350
|
+
c2.setAttribute("cy", "12");
|
|
2351
|
+
c2.setAttribute("r", "6");
|
|
2352
|
+
const c3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2353
|
+
c3.setAttribute("cx", "12");
|
|
2354
|
+
c3.setAttribute("cy", "12");
|
|
2355
|
+
c3.setAttribute("r", "2");
|
|
2356
|
+
icon.appendChild(c1);
|
|
2357
|
+
icon.appendChild(c2);
|
|
2358
|
+
icon.appendChild(c3);
|
|
2359
|
+
span.appendChild(icon);
|
|
2360
|
+
const typeSpan = document.createElement("span");
|
|
2361
|
+
typeSpan.className = "ww-opacity-60 ww-uppercase ww-text-[8px] ww-tracking-[0.06em] ww-font-bold";
|
|
2362
|
+
typeSpan.textContent = `${type}:`;
|
|
2363
|
+
span.appendChild(typeSpan);
|
|
2364
|
+
const nameSpan = document.createElement("span");
|
|
2365
|
+
nameSpan.textContent = name;
|
|
2366
|
+
span.appendChild(nameSpan);
|
|
2367
|
+
const button = document.createElement("button");
|
|
2368
|
+
button.type = "button";
|
|
2369
|
+
button.className = "ww-ml-1 ww-text-primary/60 hover:ww-text-primary hover:ww-scale-110 ww-transition-all ww-font-bold ww-rounded-full hover:ww-bg-primary/10 ww-w-3.5 ww-h-3.5 ww-flex ww-items-center ww-justify-center ww-text-[10px]";
|
|
2370
|
+
button.textContent = "\xD7";
|
|
2371
|
+
button.onclick = () => {
|
|
2372
|
+
span.remove();
|
|
2373
|
+
window.dispatchEvent(new CustomEvent("wallavi:editor-change"));
|
|
2374
|
+
};
|
|
2375
|
+
span.appendChild(button);
|
|
2376
|
+
return span;
|
|
2377
|
+
};
|
|
2151
2378
|
function ChatInput({
|
|
2152
2379
|
input,
|
|
2153
2380
|
setInput,
|
|
@@ -2165,38 +2392,73 @@ function ChatInput({
|
|
|
2165
2392
|
onRemoveAttachment,
|
|
2166
2393
|
isUploading = false,
|
|
2167
2394
|
selectedContext,
|
|
2168
|
-
onClearContext
|
|
2395
|
+
onClearContext,
|
|
2396
|
+
locale
|
|
2169
2397
|
}) {
|
|
2170
2398
|
const hasVoice = onVoiceStart !== void 0;
|
|
2171
2399
|
const hasAttachments = onAttach !== void 0;
|
|
2172
2400
|
const fileInputRef = react.useRef(null);
|
|
2173
2401
|
const textareaRef = react.useRef(null);
|
|
2402
|
+
const insertNodeAtCursor = (node) => {
|
|
2403
|
+
const sel = window.getSelection();
|
|
2404
|
+
if (sel && sel.rangeCount > 0) {
|
|
2405
|
+
const range = sel.getRangeAt(0);
|
|
2406
|
+
const editor = textareaRef.current;
|
|
2407
|
+
if (editor && editor.contains(range.commonAncestorContainer)) {
|
|
2408
|
+
range.deleteContents();
|
|
2409
|
+
const frag = document.createDocumentFragment();
|
|
2410
|
+
frag.appendChild(node);
|
|
2411
|
+
const spaceNode = document.createTextNode(" ");
|
|
2412
|
+
frag.appendChild(spaceNode);
|
|
2413
|
+
range.insertNode(frag);
|
|
2414
|
+
const newRange = range.cloneRange();
|
|
2415
|
+
newRange.setStartAfter(spaceNode);
|
|
2416
|
+
newRange.collapse(true);
|
|
2417
|
+
sel.removeAllRanges();
|
|
2418
|
+
sel.addRange(newRange);
|
|
2419
|
+
return;
|
|
2420
|
+
}
|
|
2421
|
+
}
|
|
2422
|
+
if (textareaRef.current) {
|
|
2423
|
+
textareaRef.current.appendChild(node);
|
|
2424
|
+
textareaRef.current.appendChild(document.createTextNode(" "));
|
|
2425
|
+
}
|
|
2426
|
+
};
|
|
2174
2427
|
react.useEffect(() => {
|
|
2175
|
-
if (!input && textareaRef.current) {
|
|
2176
|
-
textareaRef.current.
|
|
2428
|
+
if (!input && textareaRef.current && textareaRef.current.innerHTML !== "") {
|
|
2429
|
+
textareaRef.current.innerHTML = "";
|
|
2177
2430
|
}
|
|
2178
2431
|
}, [input]);
|
|
2432
|
+
const handleInput = () => {
|
|
2433
|
+
if (textareaRef.current) {
|
|
2434
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2435
|
+
}
|
|
2436
|
+
};
|
|
2179
2437
|
react.useEffect(() => {
|
|
2180
2438
|
if (selectedContext && textareaRef.current) {
|
|
2181
|
-
const
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2439
|
+
const chipEl = createChipElement(
|
|
2440
|
+
selectedContext.name,
|
|
2441
|
+
selectedContext.type,
|
|
2442
|
+
selectedContext.id,
|
|
2443
|
+
accentColor
|
|
2444
|
+
);
|
|
2445
|
+
textareaRef.current.focus();
|
|
2446
|
+
insertNodeAtCursor(chipEl);
|
|
2447
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2188
2448
|
if (onClearContext) {
|
|
2189
2449
|
onClearContext();
|
|
2190
2450
|
}
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
}
|
|
2198
|
-
}
|
|
2199
|
-
|
|
2451
|
+
}
|
|
2452
|
+
}, [selectedContext, onClearContext, setInput, accentColor]);
|
|
2453
|
+
react.useEffect(() => {
|
|
2454
|
+
const handleEditorChange = () => {
|
|
2455
|
+
if (textareaRef.current) {
|
|
2456
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2457
|
+
}
|
|
2458
|
+
};
|
|
2459
|
+
window.addEventListener("wallavi:editor-change", handleEditorChange);
|
|
2460
|
+
return () => window.removeEventListener("wallavi:editor-change", handleEditorChange);
|
|
2461
|
+
}, [setInput]);
|
|
2200
2462
|
react.useEffect(() => {
|
|
2201
2463
|
if (!streaming) {
|
|
2202
2464
|
textareaRef.current?.focus();
|
|
@@ -2208,8 +2470,40 @@ function ChatInput({
|
|
|
2208
2470
|
onSend();
|
|
2209
2471
|
}
|
|
2210
2472
|
};
|
|
2473
|
+
const handlePaste = (e) => {
|
|
2474
|
+
if (hasAttachments && onAttach) {
|
|
2475
|
+
const files = Array.from(e.clipboardData?.files ?? []).filter(
|
|
2476
|
+
(f) => f.type.startsWith("image/")
|
|
2477
|
+
);
|
|
2478
|
+
if (files.length > 0) {
|
|
2479
|
+
e.preventDefault();
|
|
2480
|
+
const dt = new DataTransfer();
|
|
2481
|
+
files.forEach((f) => dt.items.add(f));
|
|
2482
|
+
onAttach(dt.files);
|
|
2483
|
+
return;
|
|
2484
|
+
}
|
|
2485
|
+
}
|
|
2486
|
+
e.preventDefault();
|
|
2487
|
+
const text = e.clipboardData?.getData("text/plain") || "";
|
|
2488
|
+
const selection = window.getSelection();
|
|
2489
|
+
if (!selection || selection.rangeCount === 0) return;
|
|
2490
|
+
const range = selection.getRangeAt(0);
|
|
2491
|
+
range.deleteContents();
|
|
2492
|
+
range.insertNode(document.createTextNode(text));
|
|
2493
|
+
range.collapse(false);
|
|
2494
|
+
if (textareaRef.current) {
|
|
2495
|
+
setInput(serializeEditor(textareaRef.current));
|
|
2496
|
+
}
|
|
2497
|
+
};
|
|
2211
2498
|
const hasText = input.trim().length > 0;
|
|
2212
2499
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-shrink-0 ww-border-t ww-bg-background ww-px-3 ww-py-2.5", children: [
|
|
2500
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2501
|
+
#wallavi-chat-input:empty::before {
|
|
2502
|
+
content: attr(placeholder);
|
|
2503
|
+
color: rgba(120, 120, 120, 0.45);
|
|
2504
|
+
pointer-events: none;
|
|
2505
|
+
}
|
|
2506
|
+
` }),
|
|
2213
2507
|
canRegenerate && onRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2214
2508
|
"button",
|
|
2215
2509
|
{
|
|
@@ -2218,25 +2512,41 @@ function ChatInput({
|
|
|
2218
2512
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-[11px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors ww-mb-2 disabled:ww-opacity-40",
|
|
2219
2513
|
children: [
|
|
2220
2514
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "ww-h-3 ww-w-3" }),
|
|
2221
|
-
"
|
|
2515
|
+
getWidgetTranslation("regenerateResponse", locale)
|
|
2222
2516
|
]
|
|
2223
2517
|
}
|
|
2224
2518
|
),
|
|
2225
2519
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-rounded-2xl ww-border ww-bg-background ww-shadow-sm focus-within:ww-ring-1 focus-within:ww-ring-ring/40 ww-transition-shadow", children: [
|
|
2226
|
-
selectedContext && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-px-3 ww-pt-2.5 ww-flex ww-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-
|
|
2227
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2228
|
-
|
|
2520
|
+
selectedContext && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-px-3 ww-pt-2.5 ww-flex ww-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-2 ww-bg-primary/5 ww-border ww-border-primary/10 ww-text-primary ww-text-xs ww-font-semibold ww-px-3 ww-py-1.5 ww-rounded-xl ww-shadow-2xs ww-backdrop-blur-sm ww-animate-in ww-fade-in ww-slide-in-from-bottom-2 ww-duration-200", children: [
|
|
2521
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2522
|
+
"svg",
|
|
2523
|
+
{
|
|
2524
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-opacity-60",
|
|
2525
|
+
viewBox: "0 0 24 24",
|
|
2526
|
+
fill: "none",
|
|
2527
|
+
stroke: "currentColor",
|
|
2528
|
+
strokeWidth: "2",
|
|
2529
|
+
strokeLinecap: "round",
|
|
2530
|
+
strokeLinejoin: "round",
|
|
2531
|
+
children: [
|
|
2532
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2533
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2534
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2535
|
+
]
|
|
2536
|
+
}
|
|
2537
|
+
),
|
|
2538
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-opacity-55 ww-uppercase ww-text-[9px] ww-tracking-[0.06em] ww-font-bold", children: [
|
|
2229
2539
|
selectedContext.type,
|
|
2230
2540
|
":"
|
|
2231
2541
|
] }),
|
|
2232
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedContext.name }),
|
|
2542
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-font-semibold", children: selectedContext.name }),
|
|
2233
2543
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2234
2544
|
"button",
|
|
2235
2545
|
{
|
|
2236
2546
|
type: "button",
|
|
2237
2547
|
onClick: onClearContext,
|
|
2238
|
-
className: "ww-ml-
|
|
2239
|
-
title: "
|
|
2548
|
+
className: "ww-ml-0.5 ww-text-muted-foreground hover:ww-text-foreground ww-transition-all ww-rounded-full hover:ww-bg-primary/10 ww-w-4 ww-h-4 ww-flex ww-items-center ww-justify-center",
|
|
2549
|
+
title: getWidgetTranslation("removeContext", locale),
|
|
2240
2550
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2241
2551
|
"svg",
|
|
2242
2552
|
{
|
|
@@ -2260,7 +2570,8 @@ function ChatInput({
|
|
|
2260
2570
|
AttachmentChips,
|
|
2261
2571
|
{
|
|
2262
2572
|
attachments,
|
|
2263
|
-
onRemove: (id) => onRemoveAttachment?.(id)
|
|
2573
|
+
onRemove: (id) => onRemoveAttachment?.(id),
|
|
2574
|
+
locale
|
|
2264
2575
|
}
|
|
2265
2576
|
) }),
|
|
2266
2577
|
hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2281,34 +2592,19 @@ function ChatInput({
|
|
|
2281
2592
|
),
|
|
2282
2593
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-end ww-gap-2 ww-px-3 ww-py-2", children: [
|
|
2283
2594
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2284
|
-
"
|
|
2595
|
+
"div",
|
|
2285
2596
|
{
|
|
2286
2597
|
id: "wallavi-chat-input",
|
|
2287
2598
|
ref: textareaRef,
|
|
2288
|
-
|
|
2289
|
-
className: "ww-flex-1 ww-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
onChange: (e) => {
|
|
2293
|
-
setInput(e.target.value);
|
|
2294
|
-
e.target.style.height = "auto";
|
|
2295
|
-
e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
|
|
2599
|
+
contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
|
|
2600
|
+
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",
|
|
2601
|
+
...{
|
|
2602
|
+
placeholder: placeholder || getWidgetTranslation("sendMessage", locale)
|
|
2296
2603
|
},
|
|
2297
2604
|
onKeyDown: handleKeyDown,
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
(f) => f.type.startsWith("image/")
|
|
2302
|
-
);
|
|
2303
|
-
if (files.length > 0) {
|
|
2304
|
-
e.preventDefault();
|
|
2305
|
-
const dt = new DataTransfer();
|
|
2306
|
-
files.forEach((f) => dt.items.add(f));
|
|
2307
|
-
onAttach(dt.files);
|
|
2308
|
-
}
|
|
2309
|
-
},
|
|
2310
|
-
disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
|
|
2311
|
-
autoFocus: true
|
|
2605
|
+
onInput: handleInput,
|
|
2606
|
+
onPaste: handlePaste,
|
|
2607
|
+
style: { wordBreak: "break-word" }
|
|
2312
2608
|
}
|
|
2313
2609
|
),
|
|
2314
2610
|
hasVoice && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2317,7 +2613,7 @@ function ChatInput({
|
|
|
2317
2613
|
type: "button",
|
|
2318
2614
|
onClick: voiceState === "recording" ? onVoiceStop : onVoiceStart,
|
|
2319
2615
|
disabled: streaming || voiceState === "transcribing",
|
|
2320
|
-
title: voiceState === "recording" ? "
|
|
2616
|
+
title: voiceState === "recording" ? getWidgetTranslation("stopRecording", locale) : getWidgetTranslation("recordVoiceMessage", locale),
|
|
2321
2617
|
className: cn3(
|
|
2322
2618
|
"ww-h-7 ww-w-7 ww-shrink-0 ww-rounded-xl ww-flex ww-items-center ww-justify-center ww-transition-all ww-duration-200",
|
|
2323
2619
|
voiceState === "recording" && "ww-animate-pulse",
|
|
@@ -2334,7 +2630,7 @@ function ChatInput({
|
|
|
2334
2630
|
type: "button",
|
|
2335
2631
|
onClick: () => fileInputRef.current?.click(),
|
|
2336
2632
|
disabled: streaming || isUploading,
|
|
2337
|
-
title: "
|
|
2633
|
+
title: getWidgetTranslation("attachFile", locale),
|
|
2338
2634
|
className: cn3(
|
|
2339
2635
|
"ww-h-7 ww-w-7 ww-shrink-0 ww-rounded-xl ww-flex ww-items-center ww-justify-center ww-transition-all ww-duration-200",
|
|
2340
2636
|
"ww-text-muted-foreground hover:ww-text-foreground",
|
|
@@ -2363,7 +2659,10 @@ function ChatInput({
|
|
|
2363
2659
|
] })
|
|
2364
2660
|
] });
|
|
2365
2661
|
}
|
|
2366
|
-
function CustomControlBar({
|
|
2662
|
+
function CustomControlBar({
|
|
2663
|
+
onClose,
|
|
2664
|
+
locale
|
|
2665
|
+
}) {
|
|
2367
2666
|
const { localParticipant, isMicrophoneEnabled } = componentsReact.useLocalParticipant();
|
|
2368
2667
|
const room = componentsReact.useRoomContext();
|
|
2369
2668
|
const toggleMic = async () => {
|
|
@@ -2383,7 +2682,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2383
2682
|
{
|
|
2384
2683
|
onClick: toggleMic,
|
|
2385
2684
|
className: `ww-flex ww-items-center ww-justify-center ww-h-16 ww-w-16 ww-rounded-full ww-transition-all ww-duration-300 ${isMicrophoneEnabled ? "ww-bg-foreground/5 hover:ww-bg-foreground/10 ww-text-foreground" : "ww-bg-foreground/20 hover:ww-bg-foreground/30 ww-text-foreground"}`,
|
|
2386
|
-
title: isMicrophoneEnabled ? "
|
|
2685
|
+
title: isMicrophoneEnabled ? getWidgetTranslation("muteMic", locale) : getWidgetTranslation("unmuteMic", locale),
|
|
2387
2686
|
children: isMicrophoneEnabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "ww-w-6 ww-h-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { className: "ww-w-6 ww-h-6" })
|
|
2388
2687
|
}
|
|
2389
2688
|
),
|
|
@@ -2393,7 +2692,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2393
2692
|
onClick: disconnect,
|
|
2394
2693
|
className: "ww-flex ww-items-center ww-justify-center ww-h-16 ww-w-16 ww-rounded-full ww-text-white ww-transition-all ww-duration-300 ww-shadow-lg hover:ww-shadow-xl hover:-ww-translate-y-1",
|
|
2395
2694
|
style: { backgroundColor: "#ef4444" },
|
|
2396
|
-
title: "
|
|
2695
|
+
title: getWidgetTranslation("disconnect", locale),
|
|
2397
2696
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { className: "ww-w-6 ww-h-6" })
|
|
2398
2697
|
}
|
|
2399
2698
|
)
|
|
@@ -2456,17 +2755,25 @@ function ChatGPTOrb() {
|
|
|
2456
2755
|
)
|
|
2457
2756
|
] });
|
|
2458
2757
|
}
|
|
2459
|
-
function AssistantVisualizer({
|
|
2758
|
+
function AssistantVisualizer({
|
|
2759
|
+
onClose,
|
|
2760
|
+
locale
|
|
2761
|
+
}) {
|
|
2460
2762
|
const { state } = componentsReact.useVoiceAssistant();
|
|
2461
2763
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-items-center ww-justify-center ww-h-full ww-w-full", children: [
|
|
2462
2764
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex-1 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ChatGPTOrb, {}) }),
|
|
2463
2765
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-h-40 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-8 ww-mb-12", children: [
|
|
2464
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-text-sm ww-font-medium ww-tracking-wide ww-text-foreground/60 ww-uppercase", children: state === "connecting" || state === "initializing" ? "
|
|
2465
|
-
/* @__PURE__ */ jsxRuntime.jsx(CustomControlBar, { onClose })
|
|
2766
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-text-sm ww-font-medium ww-tracking-wide ww-text-foreground/60 ww-uppercase", children: state === "connecting" || state === "initializing" ? getWidgetTranslation("connecting", locale) : state === "listening" ? getWidgetTranslation("listening", locale) : state === "speaking" ? getWidgetTranslation("speaking", locale) : getWidgetTranslation("ready", locale) }),
|
|
2767
|
+
/* @__PURE__ */ jsxRuntime.jsx(CustomControlBar, { onClose, locale })
|
|
2466
2768
|
] })
|
|
2467
2769
|
] });
|
|
2468
2770
|
}
|
|
2469
|
-
function VoiceOverlay({
|
|
2771
|
+
function VoiceOverlay({
|
|
2772
|
+
token,
|
|
2773
|
+
serverUrl,
|
|
2774
|
+
onClose,
|
|
2775
|
+
locale
|
|
2776
|
+
}) {
|
|
2470
2777
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-absolute ww-inset-0 ww-z-[100] ww-flex ww-flex-col ww-bg-background/95 ww-backdrop-blur-xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2471
2778
|
componentsReact.LiveKitRoom,
|
|
2472
2779
|
{
|
|
@@ -2478,11 +2785,395 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
|
|
|
2478
2785
|
className: "ww-flex-1",
|
|
2479
2786
|
children: [
|
|
2480
2787
|
/* @__PURE__ */ jsxRuntime.jsx(componentsReact.RoomAudioRenderer, {}),
|
|
2481
|
-
/* @__PURE__ */ jsxRuntime.jsx(AssistantVisualizer, { onClose })
|
|
2788
|
+
/* @__PURE__ */ jsxRuntime.jsx(AssistantVisualizer, { onClose, locale })
|
|
2482
2789
|
]
|
|
2483
2790
|
}
|
|
2484
2791
|
) });
|
|
2485
2792
|
}
|
|
2793
|
+
function SvgIcon({
|
|
2794
|
+
className,
|
|
2795
|
+
strokeWidth = "1.8",
|
|
2796
|
+
children
|
|
2797
|
+
}) {
|
|
2798
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2799
|
+
"svg",
|
|
2800
|
+
{
|
|
2801
|
+
className,
|
|
2802
|
+
viewBox: "0 0 24 24",
|
|
2803
|
+
fill: "none",
|
|
2804
|
+
stroke: "currentColor",
|
|
2805
|
+
strokeWidth,
|
|
2806
|
+
strokeLinecap: "round",
|
|
2807
|
+
strokeLinejoin: "round",
|
|
2808
|
+
children
|
|
2809
|
+
}
|
|
2810
|
+
);
|
|
2811
|
+
}
|
|
2812
|
+
function IconBolt({ className }) {
|
|
2813
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" }) });
|
|
2814
|
+
}
|
|
2815
|
+
function IconDocument({ className }) {
|
|
2816
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { className, children: [
|
|
2817
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
2818
|
+
/* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
|
|
2819
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
|
|
2820
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
|
|
2821
|
+
/* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "10 9 9 9 8 9" })
|
|
2822
|
+
] });
|
|
2823
|
+
}
|
|
2824
|
+
function IconSparkle({ className }) {
|
|
2825
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
|
|
2826
|
+
}
|
|
2827
|
+
function IconTarget({ className }) {
|
|
2828
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { className, children: [
|
|
2829
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2830
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2831
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2832
|
+
] });
|
|
2833
|
+
}
|
|
2834
|
+
function IconArrowRight({ className }) {
|
|
2835
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(SvgIcon, { className, strokeWidth: "2", children: [
|
|
2836
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
|
|
2837
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })
|
|
2838
|
+
] });
|
|
2839
|
+
}
|
|
2840
|
+
function LiveDot({ size = "sm" }) {
|
|
2841
|
+
const px = size === "md" ? "ww-h-2 ww-w-2" : "ww-h-1.5 ww-w-1.5";
|
|
2842
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `ww-relative ww-flex ${px} ww-shrink-0`, children: [
|
|
2843
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2844
|
+
"span",
|
|
2845
|
+
{
|
|
2846
|
+
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`
|
|
2847
|
+
}
|
|
2848
|
+
),
|
|
2849
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2850
|
+
"span",
|
|
2851
|
+
{
|
|
2852
|
+
className: `ww-relative ww-inline-flex ww-rounded-full ${px} ww-bg-emerald-500`
|
|
2853
|
+
}
|
|
2854
|
+
)
|
|
2855
|
+
] });
|
|
2856
|
+
}
|
|
2857
|
+
function urlRelevance(docUrl, pageUrl) {
|
|
2858
|
+
if (!docUrl || !pageUrl) return 0;
|
|
2859
|
+
const docClean = docUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2860
|
+
const pageClean = pageUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2861
|
+
if (docClean === pageClean) return 100;
|
|
2862
|
+
if (docClean.startsWith(pageClean) || pageClean.startsWith(docClean))
|
|
2863
|
+
return 50;
|
|
2864
|
+
const docParts = docClean.split(/[/?#]/).filter(Boolean);
|
|
2865
|
+
const pageParts = pageClean.split(/[/?#]/).filter(Boolean);
|
|
2866
|
+
let score = 0;
|
|
2867
|
+
for (const part of pageParts) {
|
|
2868
|
+
if (docParts.includes(part)) score += 10;
|
|
2869
|
+
}
|
|
2870
|
+
return score;
|
|
2871
|
+
}
|
|
2872
|
+
function topicToQuestion(topic, locale) {
|
|
2873
|
+
const name = topic.name.trim();
|
|
2874
|
+
if (name.endsWith("?")) return name;
|
|
2875
|
+
return getWidgetTranslation("tellMeAbout", locale, { name });
|
|
2876
|
+
}
|
|
2877
|
+
var STAGGER_MS = 50;
|
|
2878
|
+
var cardBase = "ww-group ww-w-full ww-rounded-xl ww-border ww-border-border ww-bg-background ww-text-left ww-shadow-[0_1px_2px_rgba(0,0,0,0.03)] hover:ww-bg-muted/20 hover:ww-border-border/80 hover:ww-shadow-md active:ww-scale-[0.98] ww-transition-all ww-duration-200 ww-animate-in ww-fade-in ww-slide-in-from-bottom-1 focus-visible:ww-ring-2 focus-visible:ww-ring-ring/40 focus-visible:ww-outline-none";
|
|
2879
|
+
function SectionLabel({ children }) {
|
|
2880
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ww-text-[10px] ww-font-semibold ww-uppercase ww-tracking-[0.12em] ww-mb-2.5 ww-text-muted-foreground/80", children });
|
|
2881
|
+
}
|
|
2882
|
+
function PageBadge({
|
|
2883
|
+
pageTitle,
|
|
2884
|
+
pageUrl,
|
|
2885
|
+
locale
|
|
2886
|
+
}) {
|
|
2887
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-px-4 ww-pt-4 ww-pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-justify-between ww-px-3 ww-py-2 ww-rounded-xl ww-bg-muted/40 ww-border ww-border-border/60", children: [
|
|
2888
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-2.5 ww-min-w-0", children: [
|
|
2889
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-w-2 ww-h-2 ww-rounded-full ww-bg-emerald-500 ww-animate-pulse ww-shrink-0" }),
|
|
2890
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[11px] ww-font-medium ww-text-foreground ww-truncate ww-max-w-[170px]", children: pageTitle || pageUrl || getWidgetTranslation("generalContext", locale) })
|
|
2891
|
+
] }),
|
|
2892
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[9px] ww-font-mono ww-bg-background ww-border ww-border-border ww-text-muted-foreground ww-px-1.5 ww-py-0.5 ww-rounded-md", children: "LIVE" })
|
|
2893
|
+
] }) });
|
|
2894
|
+
}
|
|
2895
|
+
function ActionCard({
|
|
2896
|
+
action,
|
|
2897
|
+
index,
|
|
2898
|
+
accentColor,
|
|
2899
|
+
onExecute
|
|
2900
|
+
}) {
|
|
2901
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2902
|
+
"button",
|
|
2903
|
+
{
|
|
2904
|
+
onClick: onExecute,
|
|
2905
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
2906
|
+
style: {
|
|
2907
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2908
|
+
animationFillMode: "both"
|
|
2909
|
+
},
|
|
2910
|
+
children: [
|
|
2911
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2912
|
+
"div",
|
|
2913
|
+
{
|
|
2914
|
+
className: "ww-shrink-0 ww-w-8 ww-h-8 ww-rounded-lg ww-flex ww-items-center ww-justify-center ww-transition-transform ww-duration-200 group-hover:ww-scale-105",
|
|
2915
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2916
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2917
|
+
}
|
|
2918
|
+
),
|
|
2919
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
2920
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2921
|
+
action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[11px] ww-mt-0.5 ww-block ww-line-clamp-2 ww-text-muted-foreground ww-leading-normal", children: action.description })
|
|
2922
|
+
] }),
|
|
2923
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-mt-1.5 ww-text-muted-foreground/60 ww-opacity-0 group-hover:ww-opacity-100 ww-transition-all ww-duration-200 ww-translate-x-[-4px] group-hover:ww-translate-x-0" })
|
|
2924
|
+
]
|
|
2925
|
+
}
|
|
2926
|
+
);
|
|
2927
|
+
}
|
|
2928
|
+
function ActionCardCompact({
|
|
2929
|
+
action,
|
|
2930
|
+
index,
|
|
2931
|
+
accentColor,
|
|
2932
|
+
onExecute
|
|
2933
|
+
}) {
|
|
2934
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2935
|
+
"button",
|
|
2936
|
+
{
|
|
2937
|
+
onClick: onExecute,
|
|
2938
|
+
className: `${cardBase} ww-flex ww-flex-col ww-items-start ww-gap-2.5 ww-p-3.5`,
|
|
2939
|
+
style: {
|
|
2940
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2941
|
+
animationFillMode: "both"
|
|
2942
|
+
},
|
|
2943
|
+
children: [
|
|
2944
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2945
|
+
"div",
|
|
2946
|
+
{
|
|
2947
|
+
className: "ww-w-8 ww-h-8 ww-rounded-lg ww-flex ww-items-center ww-justify-center ww-transition-transform ww-duration-200 group-hover:ww-scale-105",
|
|
2948
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2949
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2950
|
+
}
|
|
2951
|
+
),
|
|
2952
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-min-w-0 ww-w-full", children: [
|
|
2953
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[12px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2954
|
+
action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-mt-0.5 ww-block ww-line-clamp-1 ww-text-muted-foreground ww-leading-normal", children: action.description })
|
|
2955
|
+
] })
|
|
2956
|
+
]
|
|
2957
|
+
}
|
|
2958
|
+
);
|
|
2959
|
+
}
|
|
2960
|
+
function DocCard({
|
|
2961
|
+
doc,
|
|
2962
|
+
index,
|
|
2963
|
+
onSend,
|
|
2964
|
+
locale
|
|
2965
|
+
}) {
|
|
2966
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2967
|
+
"button",
|
|
2968
|
+
{
|
|
2969
|
+
onClick: () => onSend(
|
|
2970
|
+
doc.summary ? getWidgetTranslation("tellMeMoreAbout", locale, {
|
|
2971
|
+
name: doc.name
|
|
2972
|
+
}) : getWidgetTranslation("whatDoYouKnowAbout", locale, {
|
|
2973
|
+
name: doc.name
|
|
2974
|
+
})
|
|
2975
|
+
),
|
|
2976
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
2977
|
+
style: {
|
|
2978
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2979
|
+
animationFillMode: "both"
|
|
2980
|
+
},
|
|
2981
|
+
children: [
|
|
2982
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-w-8 ww-h-8 ww-rounded-lg ww-flex ww-items-center ww-justify-center ww-bg-indigo-500/10 ww-text-indigo-500 dark:ww-bg-indigo-400/10 dark:ww-text-indigo-400 ww-transition-transform ww-duration-200 group-hover:ww-scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(IconDocument, { className: "ww-w-4 ww-h-4" }) }),
|
|
2983
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
2984
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: doc.name }),
|
|
2985
|
+
doc.summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[11px] ww-mt-0.5 ww-block ww-line-clamp-2 ww-text-muted-foreground ww-leading-normal", children: doc.summary })
|
|
2986
|
+
] }),
|
|
2987
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-mt-1.5 ww-text-muted-foreground/60 ww-opacity-0 group-hover:ww-opacity-100 ww-transition-all ww-duration-200 ww-translate-x-[-4px] group-hover:ww-translate-x-0" })
|
|
2988
|
+
]
|
|
2989
|
+
}
|
|
2990
|
+
);
|
|
2991
|
+
}
|
|
2992
|
+
function TopicChip({
|
|
2993
|
+
topic,
|
|
2994
|
+
index,
|
|
2995
|
+
compact = false,
|
|
2996
|
+
onSend
|
|
2997
|
+
}) {
|
|
2998
|
+
const cls = compact ? `${cardBase} ww-flex ww-items-center ww-gap-1.5 !ww-rounded-full ww-px-3 ww-py-1.5` : `${cardBase} ww-flex ww-items-center ww-gap-2.5 ww-px-3.5 ww-py-2.5 !ww-rounded-full`;
|
|
2999
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3000
|
+
"button",
|
|
3001
|
+
{
|
|
3002
|
+
onClick: () => onSend(topic.question),
|
|
3003
|
+
className: cls,
|
|
3004
|
+
style: {
|
|
3005
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
3006
|
+
animationFillMode: "both"
|
|
3007
|
+
},
|
|
3008
|
+
children: [
|
|
3009
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3010
|
+
IconSparkle,
|
|
3011
|
+
{
|
|
3012
|
+
className: `${compact ? "ww-w-3 ww-h-3" : "ww-w-3.5 ww-h-3.5"} ww-shrink-0 ww-text-amber-500 ww-transition-transform ww-duration-200 group-hover:ww-scale-110 group-hover:ww-rotate-12`
|
|
3013
|
+
}
|
|
3014
|
+
),
|
|
3015
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3016
|
+
"span",
|
|
3017
|
+
{
|
|
3018
|
+
className: `${compact ? "ww-text-[11px]" : "ww-text-[12px]"} ww-font-medium ww-text-foreground ww-flex-1 ww-text-left`,
|
|
3019
|
+
children: topic.question
|
|
3020
|
+
}
|
|
3021
|
+
),
|
|
3022
|
+
!compact && /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-text-muted-foreground/60 ww-opacity-0 group-hover:ww-opacity-100 ww-transition-all ww-duration-200 ww-translate-x-[-4px] group-hover:ww-translate-x-0" })
|
|
3023
|
+
]
|
|
3024
|
+
}
|
|
3025
|
+
);
|
|
3026
|
+
}
|
|
3027
|
+
function CommandPanel({
|
|
3028
|
+
mode,
|
|
3029
|
+
pageUrl = "",
|
|
3030
|
+
pageTitle,
|
|
3031
|
+
clientActions = [],
|
|
3032
|
+
ragTopics = [],
|
|
3033
|
+
ragDocuments = [],
|
|
3034
|
+
onSend,
|
|
3035
|
+
onExecuteAction,
|
|
3036
|
+
accentColor = "#3b82f6",
|
|
3037
|
+
watermark = false,
|
|
3038
|
+
watermarkLogoUrl = "/wallavi.svg",
|
|
3039
|
+
footer,
|
|
3040
|
+
locale
|
|
3041
|
+
}) {
|
|
3042
|
+
const relevantDocs = react.useMemo(() => {
|
|
3043
|
+
if (!pageUrl && ragDocuments.length > 0) return ragDocuments.slice(0, 5);
|
|
3044
|
+
return ragDocuments.map((doc) => ({ ...doc, score: urlRelevance(doc.url, pageUrl) })).sort((a, b) => b.score - a.score).slice(0, 5);
|
|
3045
|
+
}, [ragDocuments, pageUrl]);
|
|
3046
|
+
const topicQuestions = react.useMemo(
|
|
3047
|
+
() => ragTopics.slice(0, 5).map((t) => ({
|
|
3048
|
+
...t,
|
|
3049
|
+
question: topicToQuestion(t, locale)
|
|
3050
|
+
})),
|
|
3051
|
+
[ragTopics, locale]
|
|
3052
|
+
);
|
|
3053
|
+
const hasActions = clientActions.length > 0;
|
|
3054
|
+
const hasDocs = relevantDocs.length > 0;
|
|
3055
|
+
const hasTopics = topicQuestions.length > 0;
|
|
3056
|
+
const hasContent = hasActions || hasDocs || hasTopics;
|
|
3057
|
+
if (!hasContent) return null;
|
|
3058
|
+
const isSidebar = mode === "sidebar";
|
|
3059
|
+
const handleExecute = (steps) => onExecuteAction?.(steps);
|
|
3060
|
+
if (isSidebar) {
|
|
3061
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-w-[300px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/50 ww-flex ww-flex-col ww-h-full ww-overflow-hidden ww-animate-in ww-fade-in ww-slide-in-from-right-2 ww-duration-300", children: [
|
|
3062
|
+
/* @__PURE__ */ jsxRuntime.jsx(PageBadge, { pageTitle, pageUrl, locale }),
|
|
3063
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-overflow-y-auto ww-px-4 ww-pb-4 ww-flex ww-flex-col ww-gap-5", children: [
|
|
3064
|
+
hasActions && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3065
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3066
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3067
|
+
ActionCard,
|
|
3068
|
+
{
|
|
3069
|
+
action,
|
|
3070
|
+
index: i,
|
|
3071
|
+
accentColor,
|
|
3072
|
+
onExecute: () => handleExecute(action.steps)
|
|
3073
|
+
},
|
|
3074
|
+
action.name
|
|
3075
|
+
)) })
|
|
3076
|
+
] }),
|
|
3077
|
+
hasDocs && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3078
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3079
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.map((doc, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3080
|
+
DocCard,
|
|
3081
|
+
{
|
|
3082
|
+
doc,
|
|
3083
|
+
index: i,
|
|
3084
|
+
onSend,
|
|
3085
|
+
locale
|
|
3086
|
+
},
|
|
3087
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3088
|
+
)) })
|
|
3089
|
+
] }),
|
|
3090
|
+
hasTopics && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3091
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3092
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-1.5", children: topicQuestions.map((topic, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3093
|
+
TopicChip,
|
|
3094
|
+
{
|
|
3095
|
+
topic,
|
|
3096
|
+
index: i,
|
|
3097
|
+
onSend
|
|
3098
|
+
},
|
|
3099
|
+
topic.name
|
|
3100
|
+
)) })
|
|
3101
|
+
] })
|
|
3102
|
+
] }),
|
|
3103
|
+
watermark && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-py-2.5 ww-border-t ww-border-border/40 ww-touch-none ww-bg-muted/10", children: [
|
|
3104
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3105
|
+
"a",
|
|
3106
|
+
{
|
|
3107
|
+
href: "https://wallavi.com",
|
|
3108
|
+
target: "_blank",
|
|
3109
|
+
rel: "noopener noreferrer",
|
|
3110
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3111
|
+
children: [
|
|
3112
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3113
|
+
"img",
|
|
3114
|
+
{
|
|
3115
|
+
src: watermarkLogoUrl,
|
|
3116
|
+
alt: "Wallavi",
|
|
3117
|
+
width: 11,
|
|
3118
|
+
height: 11
|
|
3119
|
+
}
|
|
3120
|
+
),
|
|
3121
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3122
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3123
|
+
" Wallavi"
|
|
3124
|
+
] })
|
|
3125
|
+
]
|
|
3126
|
+
}
|
|
3127
|
+
),
|
|
3128
|
+
footer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3129
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-muted-foreground/45 ww-text-[10px]", children: "\xB7" }),
|
|
3130
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-truncate ww-max-w-[120px]", children: footer })
|
|
3131
|
+
] })
|
|
3132
|
+
] })
|
|
3133
|
+
] });
|
|
3134
|
+
}
|
|
3135
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-px-4 ww-pt-2 ww-pb-3 ww-flex ww-flex-col ww-gap-4 ww-animate-in ww-fade-in ww-duration-300", children: [
|
|
3136
|
+
hasActions && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3137
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3138
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-grid ww-grid-cols-2 ww-gap-2", children: clientActions.slice(0, 4).map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3139
|
+
ActionCardCompact,
|
|
3140
|
+
{
|
|
3141
|
+
action,
|
|
3142
|
+
index: i,
|
|
3143
|
+
accentColor,
|
|
3144
|
+
onExecute: () => handleExecute(action.steps)
|
|
3145
|
+
},
|
|
3146
|
+
action.name
|
|
3147
|
+
)) })
|
|
3148
|
+
] }),
|
|
3149
|
+
hasDocs && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3150
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3151
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.slice(0, 3).map((doc, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3152
|
+
DocCard,
|
|
3153
|
+
{
|
|
3154
|
+
doc,
|
|
3155
|
+
index: i,
|
|
3156
|
+
onSend,
|
|
3157
|
+
locale
|
|
3158
|
+
},
|
|
3159
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3160
|
+
)) })
|
|
3161
|
+
] }),
|
|
3162
|
+
hasTopics && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
|
|
3163
|
+
/* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3164
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5", children: topicQuestions.slice(0, 4).map((topic, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3165
|
+
TopicChip,
|
|
3166
|
+
{
|
|
3167
|
+
topic,
|
|
3168
|
+
index: i,
|
|
3169
|
+
compact: true,
|
|
3170
|
+
onSend
|
|
3171
|
+
},
|
|
3172
|
+
topic.name
|
|
3173
|
+
)) })
|
|
3174
|
+
] })
|
|
3175
|
+
] });
|
|
3176
|
+
}
|
|
2486
3177
|
function ChatWidget({
|
|
2487
3178
|
agentId,
|
|
2488
3179
|
workspaceId,
|
|
@@ -2490,7 +3181,7 @@ function ChatWidget({
|
|
|
2490
3181
|
displayName,
|
|
2491
3182
|
profilePicture,
|
|
2492
3183
|
userMessageColor = "#19191c",
|
|
2493
|
-
initialMessages
|
|
3184
|
+
initialMessages,
|
|
2494
3185
|
suggestedMessages = [],
|
|
2495
3186
|
messagePlaceholder,
|
|
2496
3187
|
watermark = true,
|
|
@@ -2516,8 +3207,25 @@ function ChatWidget({
|
|
|
2516
3207
|
expanded,
|
|
2517
3208
|
embedded = false,
|
|
2518
3209
|
envId,
|
|
2519
|
-
onDebugTrace
|
|
3210
|
+
onDebugTrace,
|
|
3211
|
+
widgetLayout,
|
|
3212
|
+
showCommandPanel = true,
|
|
3213
|
+
showRagTopics = true,
|
|
3214
|
+
showRagDocuments = true,
|
|
3215
|
+
showQuickActions = true,
|
|
3216
|
+
locale = "en",
|
|
3217
|
+
clientActions = [],
|
|
3218
|
+
ragTopics = [],
|
|
3219
|
+
ragDocuments = []
|
|
2520
3220
|
}) {
|
|
3221
|
+
const [isDesktop, setIsDesktop] = react.useState(false);
|
|
3222
|
+
react.useEffect(() => {
|
|
3223
|
+
if (typeof window === "undefined") return;
|
|
3224
|
+
const checkSize = () => setIsDesktop(window.innerWidth >= 768);
|
|
3225
|
+
checkSize();
|
|
3226
|
+
window.addEventListener("resize", checkSize);
|
|
3227
|
+
return () => window.removeEventListener("resize", checkSize);
|
|
3228
|
+
}, []);
|
|
2521
3229
|
const chat = useChat({
|
|
2522
3230
|
agentId,
|
|
2523
3231
|
workspaceId,
|
|
@@ -2597,10 +3305,24 @@ function ChatWidget({
|
|
|
2597
3305
|
chat.reset();
|
|
2598
3306
|
onReset?.();
|
|
2599
3307
|
};
|
|
2600
|
-
const
|
|
3308
|
+
const [resolvedTheme, setResolvedTheme] = react.useState("light");
|
|
3309
|
+
react.useEffect(() => {
|
|
3310
|
+
if (theme === "system") {
|
|
3311
|
+
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
3312
|
+
setResolvedTheme(media.matches ? "dark" : "light");
|
|
3313
|
+
const listener = (e) => {
|
|
3314
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
3315
|
+
};
|
|
3316
|
+
media.addEventListener("change", listener);
|
|
3317
|
+
return () => media.removeEventListener("change", listener);
|
|
3318
|
+
} else {
|
|
3319
|
+
setResolvedTheme(theme || "light");
|
|
3320
|
+
}
|
|
3321
|
+
}, [theme]);
|
|
3322
|
+
const isDark = resolvedTheme === "dark";
|
|
2601
3323
|
const cssVars = {
|
|
2602
3324
|
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
2603
|
-
colorScheme:
|
|
3325
|
+
colorScheme: resolvedTheme,
|
|
2604
3326
|
// Inline style has higher specificity than any host-site stylesheet,
|
|
2605
3327
|
// so background-color set here cannot be overridden by host CSS.
|
|
2606
3328
|
backgroundColor: isDark ? "hsl(240 10% 3.9%)" : "hsl(0 0% 100%)",
|
|
@@ -2618,6 +3340,31 @@ function ChatWidget({
|
|
|
2618
3340
|
["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
|
|
2619
3341
|
["--radius"]: "0.5rem"
|
|
2620
3342
|
};
|
|
3343
|
+
const defaultEnglishGreeting = "Hello! How can I help you today?";
|
|
3344
|
+
const isDefaultGreeting = !initialMessages || initialMessages.length === 0 || initialMessages.length === 1 && initialMessages[0] === defaultEnglishGreeting;
|
|
3345
|
+
const messagesList = isDefaultGreeting ? [getWidgetTranslation("defaultGreeting", locale)] : initialMessages;
|
|
3346
|
+
const showSidebar = showCommandPanel && widgetLayout === "center" && isDesktop;
|
|
3347
|
+
const showInlineCommandPanel = showCommandPanel && !showSidebar && chat.messages.length === 0 && (showQuickActions && clientActions.length > 0 || showRagTopics && ragTopics.length > 0 || showRagDocuments && ragDocuments.length > 0);
|
|
3348
|
+
const handleExecuteAction = react.useCallback(
|
|
3349
|
+
(steps) => {
|
|
3350
|
+
executeDeclarativeSteps(steps, onNavigate);
|
|
3351
|
+
},
|
|
3352
|
+
[onNavigate]
|
|
3353
|
+
);
|
|
3354
|
+
const commandPanelProps = {
|
|
3355
|
+
pageUrl: userContext?.pageContext?.url,
|
|
3356
|
+
pageTitle: userContext?.pageContext?.title,
|
|
3357
|
+
clientActions: showQuickActions ? clientActions : [],
|
|
3358
|
+
ragTopics: showRagTopics ? ragTopics : [],
|
|
3359
|
+
ragDocuments: showRagDocuments ? ragDocuments : [],
|
|
3360
|
+
onSend: (text) => chat.send(text),
|
|
3361
|
+
onExecuteAction: handleExecuteAction,
|
|
3362
|
+
accentColor: userMessageColor,
|
|
3363
|
+
watermark,
|
|
3364
|
+
watermarkLogoUrl,
|
|
3365
|
+
footer,
|
|
3366
|
+
locale
|
|
3367
|
+
};
|
|
2621
3368
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2622
3369
|
"div",
|
|
2623
3370
|
{
|
|
@@ -2633,11 +3380,6 @@ function ChatWidget({
|
|
|
2633
3380
|
onDragLeave: handleDragLeave,
|
|
2634
3381
|
onDrop: handleDrop,
|
|
2635
3382
|
children: [
|
|
2636
|
-
isDragOver && enableAttachments && /* @__PURE__ */ jsxRuntime.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: [
|
|
2637
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
|
|
2638
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: "Drop files to attach" }),
|
|
2639
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
|
|
2640
|
-
] }),
|
|
2641
3383
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2642
3384
|
ChatHeader,
|
|
2643
3385
|
{
|
|
@@ -2650,167 +3392,197 @@ function ChatWidget({
|
|
|
2650
3392
|
onExpand,
|
|
2651
3393
|
expanded,
|
|
2652
3394
|
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
2653
|
-
isCallLoading: chat.voiceCall?.loading
|
|
3395
|
+
isCallLoading: chat.voiceCall?.loading,
|
|
3396
|
+
locale
|
|
2654
3397
|
}
|
|
2655
3398
|
),
|
|
2656
|
-
|
|
2657
|
-
VoiceOverlay,
|
|
2658
|
-
{
|
|
2659
|
-
token: chat.voiceCall.token,
|
|
2660
|
-
serverUrl: chat.voiceCall.serverUrl,
|
|
2661
|
-
onClose: chat.voiceCall.stop,
|
|
2662
|
-
accentColor: userMessageColor
|
|
2663
|
-
}
|
|
2664
|
-
),
|
|
2665
|
-
customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3399
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2666
3400
|
"div",
|
|
2667
3401
|
{
|
|
2668
|
-
className:
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
|
|
2673
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
|
|
2674
|
-
] }),
|
|
2675
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
|
|
2676
|
-
]
|
|
2677
|
-
}
|
|
2678
|
-
),
|
|
2679
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2680
|
-
ChatMessages,
|
|
2681
|
-
{
|
|
2682
|
-
messages: chat.messages,
|
|
2683
|
-
streaming: chat.streaming,
|
|
2684
|
-
agentName,
|
|
2685
|
-
profilePicture,
|
|
2686
|
-
userColor: userMessageColor,
|
|
2687
|
-
initialMessages,
|
|
2688
|
-
suggestedMessages,
|
|
2689
|
-
showThinking,
|
|
2690
|
-
onSuggest: (msg) => chat.send(msg),
|
|
2691
|
-
onPickerSelect: chat.selectPickerOption
|
|
2692
|
-
}
|
|
2693
|
-
),
|
|
2694
|
-
customBackend?.footerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2695
|
-
"button",
|
|
2696
|
-
{
|
|
2697
|
-
onClick: () => void customBackend.footerAction.onClick(),
|
|
2698
|
-
disabled: customBackend.footerAction.loading,
|
|
2699
|
-
style: customBackend.footerAction.icon === "human" ? {
|
|
2700
|
-
backgroundColor: userMessageColor,
|
|
2701
|
-
color: "#ffffff",
|
|
2702
|
-
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
2703
|
-
} : {
|
|
2704
|
-
borderColor: `${userMessageColor}35`,
|
|
2705
|
-
backgroundColor: `${userMessageColor}0d`,
|
|
2706
|
-
color: userMessageColor
|
|
2707
|
-
},
|
|
2708
|
-
className: [
|
|
2709
|
-
"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",
|
|
2710
|
-
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
2711
|
-
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
2712
|
-
].join(" "),
|
|
3402
|
+
className: cn(
|
|
3403
|
+
"ww-flex ww-flex-row ww-flex-1 ww-w-full ww-overflow-hidden",
|
|
3404
|
+
showSidebar && "ww-bg-muted/50"
|
|
3405
|
+
),
|
|
2713
3406
|
children: [
|
|
2714
|
-
|
|
2715
|
-
"
|
|
3407
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3408
|
+
"div",
|
|
2716
3409
|
{
|
|
2717
|
-
className:
|
|
2718
|
-
|
|
2719
|
-
|
|
3410
|
+
className: cn(
|
|
3411
|
+
"ww-flex ww-flex-col ww-flex-1 ww-h-full ww-overflow-hidden ww-relative ww-bg-background",
|
|
3412
|
+
showSidebar && "ww-rounded-br-2xl"
|
|
3413
|
+
),
|
|
2720
3414
|
children: [
|
|
3415
|
+
isDragOver && enableAttachments && /* @__PURE__ */ jsxRuntime.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: [
|
|
3416
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
|
|
3417
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: getWidgetTranslation("dropFiles", locale) }),
|
|
3418
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
|
|
3419
|
+
] }),
|
|
3420
|
+
chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3421
|
+
VoiceOverlay,
|
|
3422
|
+
{
|
|
3423
|
+
token: chat.voiceCall.token,
|
|
3424
|
+
serverUrl: chat.voiceCall.serverUrl,
|
|
3425
|
+
onClose: chat.voiceCall.stop,
|
|
3426
|
+
accentColor: userMessageColor,
|
|
3427
|
+
locale
|
|
3428
|
+
}
|
|
3429
|
+
),
|
|
3430
|
+
customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3431
|
+
"div",
|
|
3432
|
+
{
|
|
3433
|
+
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
3434
|
+
style: { backgroundColor: `${userMessageColor}0d` },
|
|
3435
|
+
children: [
|
|
3436
|
+
/* @__PURE__ */ jsxRuntime.jsx(LiveDot, { size: "md" }),
|
|
3437
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: getWidgetTranslation("talkingToAgent", locale) })
|
|
3438
|
+
]
|
|
3439
|
+
}
|
|
3440
|
+
),
|
|
2721
3441
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2722
|
-
|
|
3442
|
+
ChatMessages,
|
|
2723
3443
|
{
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
3444
|
+
messages: chat.messages,
|
|
3445
|
+
streaming: chat.streaming,
|
|
3446
|
+
agentName,
|
|
3447
|
+
profilePicture,
|
|
3448
|
+
userColor: userMessageColor,
|
|
3449
|
+
initialMessages: messagesList,
|
|
3450
|
+
suggestedMessages,
|
|
3451
|
+
showThinking,
|
|
3452
|
+
onSuggest: (msg) => chat.send(msg),
|
|
3453
|
+
onPickerSelect: chat.selectPickerOption,
|
|
3454
|
+
locale,
|
|
3455
|
+
commandPanel: showInlineCommandPanel ? /* @__PURE__ */ jsxRuntime.jsx(CommandPanel, { mode: "inline", ...commandPanelProps }) : void 0
|
|
2730
3456
|
}
|
|
2731
3457
|
),
|
|
3458
|
+
customBackend?.footerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3459
|
+
"button",
|
|
3460
|
+
{
|
|
3461
|
+
onClick: () => void customBackend.footerAction.onClick(),
|
|
3462
|
+
disabled: customBackend.footerAction.loading,
|
|
3463
|
+
style: customBackend.footerAction.icon === "human" ? {
|
|
3464
|
+
backgroundColor: userMessageColor,
|
|
3465
|
+
color: "#ffffff",
|
|
3466
|
+
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
3467
|
+
} : {
|
|
3468
|
+
borderColor: `${userMessageColor}35`,
|
|
3469
|
+
backgroundColor: `${userMessageColor}0d`,
|
|
3470
|
+
color: userMessageColor
|
|
3471
|
+
},
|
|
3472
|
+
className: [
|
|
3473
|
+
"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",
|
|
3474
|
+
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
3475
|
+
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
3476
|
+
].join(" "),
|
|
3477
|
+
children: [
|
|
3478
|
+
customBackend.footerAction.loading ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3479
|
+
"svg",
|
|
3480
|
+
{
|
|
3481
|
+
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3482
|
+
viewBox: "0 0 24 24",
|
|
3483
|
+
fill: "none",
|
|
3484
|
+
children: [
|
|
3485
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3486
|
+
"circle",
|
|
3487
|
+
{
|
|
3488
|
+
className: "ww-opacity-25",
|
|
3489
|
+
cx: "12",
|
|
3490
|
+
cy: "12",
|
|
3491
|
+
r: "10",
|
|
3492
|
+
stroke: "currentColor",
|
|
3493
|
+
strokeWidth: "3"
|
|
3494
|
+
}
|
|
3495
|
+
),
|
|
3496
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3497
|
+
"path",
|
|
3498
|
+
{
|
|
3499
|
+
className: "ww-opacity-75",
|
|
3500
|
+
fill: "currentColor",
|
|
3501
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
3502
|
+
}
|
|
3503
|
+
)
|
|
3504
|
+
]
|
|
3505
|
+
}
|
|
3506
|
+
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3507
|
+
"svg",
|
|
3508
|
+
{
|
|
3509
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3510
|
+
viewBox: "0 0 24 24",
|
|
3511
|
+
fill: "none",
|
|
3512
|
+
stroke: "currentColor",
|
|
3513
|
+
strokeWidth: "2",
|
|
3514
|
+
strokeLinecap: "round",
|
|
3515
|
+
strokeLinejoin: "round",
|
|
3516
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
|
|
3517
|
+
}
|
|
3518
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3519
|
+
"svg",
|
|
3520
|
+
{
|
|
3521
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3522
|
+
viewBox: "0 0 24 24",
|
|
3523
|
+
fill: "none",
|
|
3524
|
+
stroke: "currentColor",
|
|
3525
|
+
strokeWidth: "2",
|
|
3526
|
+
strokeLinecap: "round",
|
|
3527
|
+
strokeLinejoin: "round",
|
|
3528
|
+
children: [
|
|
3529
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
3530
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
|
|
3531
|
+
]
|
|
3532
|
+
}
|
|
3533
|
+
),
|
|
3534
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
3535
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3536
|
+
"svg",
|
|
3537
|
+
{
|
|
3538
|
+
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
3539
|
+
viewBox: "0 0 24 24",
|
|
3540
|
+
fill: "none",
|
|
3541
|
+
stroke: "currentColor",
|
|
3542
|
+
strokeWidth: "2.5",
|
|
3543
|
+
strokeLinecap: "round",
|
|
3544
|
+
strokeLinejoin: "round",
|
|
3545
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
|
|
3546
|
+
}
|
|
3547
|
+
)
|
|
3548
|
+
]
|
|
3549
|
+
}
|
|
3550
|
+
) }),
|
|
2732
3551
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2733
|
-
|
|
3552
|
+
ChatInput,
|
|
2734
3553
|
{
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
3554
|
+
input: chat.input,
|
|
3555
|
+
setInput: chat.setInput,
|
|
3556
|
+
onSend: handleSend,
|
|
3557
|
+
streaming: chat.streaming,
|
|
3558
|
+
placeholder: messagePlaceholder,
|
|
3559
|
+
accentColor: userMessageColor,
|
|
3560
|
+
locale,
|
|
3561
|
+
canRegenerate: !!canRegenerate,
|
|
3562
|
+
onRegenerate: () => void chat.regenerate(),
|
|
3563
|
+
selectedContext: chat.selectedContext,
|
|
3564
|
+
onClearContext: () => chat.setSelectedContext(null),
|
|
3565
|
+
...enableVoice && voice.isSupported ? {
|
|
3566
|
+
voiceState: voice.voiceState,
|
|
3567
|
+
onVoiceStart: () => void voice.start(),
|
|
3568
|
+
onVoiceStop: voice.stop
|
|
3569
|
+
} : {},
|
|
3570
|
+
...enableAttachments ? {
|
|
3571
|
+
attachments: attachmentHook.attachments,
|
|
3572
|
+
onAttach: attachmentHook.attach,
|
|
3573
|
+
onRemoveAttachment: attachmentHook.remove,
|
|
3574
|
+
isUploading: attachmentHook.isUploading
|
|
3575
|
+
} : {}
|
|
2738
3576
|
}
|
|
2739
3577
|
)
|
|
2740
3578
|
]
|
|
2741
3579
|
}
|
|
2742
|
-
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2743
|
-
"svg",
|
|
2744
|
-
{
|
|
2745
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2746
|
-
viewBox: "0 0 24 24",
|
|
2747
|
-
fill: "none",
|
|
2748
|
-
stroke: "currentColor",
|
|
2749
|
-
strokeWidth: "2",
|
|
2750
|
-
strokeLinecap: "round",
|
|
2751
|
-
strokeLinejoin: "round",
|
|
2752
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
|
|
2753
|
-
}
|
|
2754
|
-
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2755
|
-
"svg",
|
|
2756
|
-
{
|
|
2757
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2758
|
-
viewBox: "0 0 24 24",
|
|
2759
|
-
fill: "none",
|
|
2760
|
-
stroke: "currentColor",
|
|
2761
|
-
strokeWidth: "2",
|
|
2762
|
-
strokeLinecap: "round",
|
|
2763
|
-
strokeLinejoin: "round",
|
|
2764
|
-
children: [
|
|
2765
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
2766
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
|
|
2767
|
-
]
|
|
2768
|
-
}
|
|
2769
3580
|
),
|
|
2770
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2771
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2772
|
-
"svg",
|
|
2773
|
-
{
|
|
2774
|
-
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
2775
|
-
viewBox: "0 0 24 24",
|
|
2776
|
-
fill: "none",
|
|
2777
|
-
stroke: "currentColor",
|
|
2778
|
-
strokeWidth: "2.5",
|
|
2779
|
-
strokeLinecap: "round",
|
|
2780
|
-
strokeLinejoin: "round",
|
|
2781
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
|
|
2782
|
-
}
|
|
2783
|
-
)
|
|
3581
|
+
showSidebar && /* @__PURE__ */ jsxRuntime.jsx(CommandPanel, { mode: "sidebar", ...commandPanelProps })
|
|
2784
3582
|
]
|
|
2785
3583
|
}
|
|
2786
|
-
) }),
|
|
2787
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2788
|
-
ChatInput,
|
|
2789
|
-
{
|
|
2790
|
-
input: chat.input,
|
|
2791
|
-
setInput: chat.setInput,
|
|
2792
|
-
onSend: handleSend,
|
|
2793
|
-
streaming: chat.streaming,
|
|
2794
|
-
placeholder: messagePlaceholder,
|
|
2795
|
-
accentColor: userMessageColor,
|
|
2796
|
-
canRegenerate: !!canRegenerate,
|
|
2797
|
-
onRegenerate: () => void chat.regenerate(),
|
|
2798
|
-
selectedContext: chat.selectedContext,
|
|
2799
|
-
onClearContext: () => chat.setSelectedContext(null),
|
|
2800
|
-
...enableVoice && voice.isSupported ? {
|
|
2801
|
-
voiceState: voice.voiceState,
|
|
2802
|
-
onVoiceStart: () => void voice.start(),
|
|
2803
|
-
onVoiceStop: voice.stop
|
|
2804
|
-
} : {},
|
|
2805
|
-
...enableAttachments ? {
|
|
2806
|
-
attachments: attachmentHook.attachments,
|
|
2807
|
-
onAttach: attachmentHook.attach,
|
|
2808
|
-
onRemoveAttachment: attachmentHook.remove,
|
|
2809
|
-
isUploading: attachmentHook.isUploading
|
|
2810
|
-
} : {}
|
|
2811
|
-
}
|
|
2812
3584
|
),
|
|
2813
|
-
watermark && /* @__PURE__ */ jsxRuntime.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: [
|
|
3585
|
+
watermark && !showSidebar && /* @__PURE__ */ jsxRuntime.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: [
|
|
2814
3586
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2815
3587
|
"a",
|
|
2816
3588
|
{
|
|
@@ -2820,7 +3592,10 @@ function ChatWidget({
|
|
|
2820
3592
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
2821
3593
|
children: [
|
|
2822
3594
|
/* @__PURE__ */ jsxRuntime.jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
|
|
2823
|
-
/* @__PURE__ */ jsxRuntime.
|
|
3595
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3596
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3597
|
+
" Wallavi"
|
|
3598
|
+
] })
|
|
2824
3599
|
]
|
|
2825
3600
|
}
|
|
2826
3601
|
),
|
|
@@ -2841,6 +3616,7 @@ var EMPTY = {
|
|
|
2841
3616
|
keyboardShortcut: false,
|
|
2842
3617
|
position: "bottom-right",
|
|
2843
3618
|
widgetLayout: "bubble",
|
|
3619
|
+
clientActions: [],
|
|
2844
3620
|
bubbleSize: 52,
|
|
2845
3621
|
panelWidth: 360,
|
|
2846
3622
|
panelHeight: 580,
|
|
@@ -2884,6 +3660,12 @@ function useAutoConfig(agentId, enabled) {
|
|
|
2884
3660
|
remote.widgetLayout = cfg.widgetLayout;
|
|
2885
3661
|
if (cfg.enableVoice != null)
|
|
2886
3662
|
remote.enableVoice = cfg.enableVoice;
|
|
3663
|
+
if (cfg.clientActions)
|
|
3664
|
+
remote.clientActions = cfg.clientActions;
|
|
3665
|
+
if (Array.isArray(cfg.ragTopics))
|
|
3666
|
+
remote.ragTopics = cfg.ragTopics;
|
|
3667
|
+
if (Array.isArray(cfg.ragDocuments))
|
|
3668
|
+
remote.ragDocuments = cfg.ragDocuments;
|
|
2887
3669
|
setResult({
|
|
2888
3670
|
remoteConfig: remote,
|
|
2889
3671
|
bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
|
|
@@ -2891,6 +3673,7 @@ function useAutoConfig(agentId, enabled) {
|
|
|
2891
3673
|
keyboardShortcut: Boolean(cfg.keyboardShortcut),
|
|
2892
3674
|
position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
|
|
2893
3675
|
widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
|
|
3676
|
+
clientActions: Array.isArray(cfg.clientActions) ? cfg.clientActions : [],
|
|
2894
3677
|
bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
|
|
2895
3678
|
panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
|
|
2896
3679
|
panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
|
|
@@ -2917,8 +3700,11 @@ function useSupportChat({
|
|
|
2917
3700
|
inboxToken,
|
|
2918
3701
|
apiBase = "https://app.wallavi.com",
|
|
2919
3702
|
requestHumanLabel = "Hablar con un agente",
|
|
2920
|
-
returnToAiLabel
|
|
3703
|
+
returnToAiLabel,
|
|
3704
|
+
locale
|
|
2921
3705
|
}) {
|
|
3706
|
+
const resolvedRequestHumanLabel = requestHumanLabel && requestHumanLabel !== "Hablar con un agente" ? requestHumanLabel : getWidgetTranslation("requestHuman", locale);
|
|
3707
|
+
const resolvedReturnToAiLabel = returnToAiLabel && returnToAiLabel !== "Volver a chatear con la IA" ? returnToAiLabel : returnToAiLabel ? getWidgetTranslation("returnToAi", locale) : void 0;
|
|
2922
3708
|
const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
|
|
2923
3709
|
const STORAGE_KEY = `wlv_support_${inboxToken}`;
|
|
2924
3710
|
const base = apiBase.replace(/\/$/, "");
|
|
@@ -3059,7 +3845,9 @@ function useSupportChat({
|
|
|
3059
3845
|
{
|
|
3060
3846
|
id: `tmp_${Date.now()}`,
|
|
3061
3847
|
role: "customer",
|
|
3062
|
-
content: text || `[${
|
|
3848
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3849
|
+
count: String(attachments?.length ?? 0)
|
|
3850
|
+
})}]`,
|
|
3063
3851
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3064
3852
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3065
3853
|
}
|
|
@@ -3070,7 +3858,9 @@ function useSupportChat({
|
|
|
3070
3858
|
headers: { "Content-Type": "application/json" },
|
|
3071
3859
|
body: JSON.stringify({
|
|
3072
3860
|
inboxToken,
|
|
3073
|
-
message: text || `[${
|
|
3861
|
+
message: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3862
|
+
count: String(attachments.length)
|
|
3863
|
+
})}]`,
|
|
3074
3864
|
attachments
|
|
3075
3865
|
})
|
|
3076
3866
|
});
|
|
@@ -3099,7 +3889,9 @@ function useSupportChat({
|
|
|
3099
3889
|
{
|
|
3100
3890
|
id: `tmp_${Date.now()}`,
|
|
3101
3891
|
role: "customer",
|
|
3102
|
-
content: text || `[${
|
|
3892
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3893
|
+
count: String(attachments.length)
|
|
3894
|
+
})}]`,
|
|
3103
3895
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3104
3896
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3105
3897
|
}
|
|
@@ -3219,17 +4011,17 @@ function useSupportChat({
|
|
|
3219
4011
|
const footerAction = react.useMemo(() => {
|
|
3220
4012
|
if (isAiMode) {
|
|
3221
4013
|
return {
|
|
3222
|
-
label:
|
|
3223
|
-
sublabel: "
|
|
4014
|
+
label: resolvedRequestHumanLabel,
|
|
4015
|
+
sublabel: getWidgetTranslation("requestHumanSublabel", locale),
|
|
3224
4016
|
icon: "human",
|
|
3225
4017
|
onClick: requestHuman,
|
|
3226
4018
|
loading: requestingHuman
|
|
3227
4019
|
};
|
|
3228
4020
|
}
|
|
3229
|
-
if (
|
|
4021
|
+
if (session && resolvedReturnToAiLabel) {
|
|
3230
4022
|
return {
|
|
3231
|
-
label:
|
|
3232
|
-
sublabel: "
|
|
4023
|
+
label: resolvedReturnToAiLabel,
|
|
4024
|
+
sublabel: getWidgetTranslation("returnToAiSublabel", locale),
|
|
3233
4025
|
icon: "ai",
|
|
3234
4026
|
onClick: returnToAi,
|
|
3235
4027
|
loading: returningToAi
|
|
@@ -3239,12 +4031,13 @@ function useSupportChat({
|
|
|
3239
4031
|
}, [
|
|
3240
4032
|
isAiMode,
|
|
3241
4033
|
session,
|
|
3242
|
-
|
|
4034
|
+
resolvedRequestHumanLabel,
|
|
4035
|
+
resolvedReturnToAiLabel,
|
|
3243
4036
|
requestHuman,
|
|
3244
4037
|
requestingHuman,
|
|
3245
|
-
returnToAiLabel,
|
|
3246
4038
|
returnToAi,
|
|
3247
|
-
returningToAi
|
|
4039
|
+
returningToAi,
|
|
4040
|
+
locale
|
|
3248
4041
|
]);
|
|
3249
4042
|
return react.useMemo(
|
|
3250
4043
|
() => ({
|
|
@@ -3307,14 +4100,6 @@ function BubbleWidget({
|
|
|
3307
4100
|
onOpenChange,
|
|
3308
4101
|
...chatProps
|
|
3309
4102
|
}) {
|
|
3310
|
-
const supportBackend = useSupportChat(
|
|
3311
|
-
inboxToken ? {
|
|
3312
|
-
inboxToken,
|
|
3313
|
-
apiBase: supportApiBase,
|
|
3314
|
-
requestHumanLabel,
|
|
3315
|
-
returnToAiLabel
|
|
3316
|
-
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
3317
|
-
);
|
|
3318
4103
|
const isControlled = isOpenProp !== void 0;
|
|
3319
4104
|
const [internalOpen, setInternalOpen] = react.useState(false);
|
|
3320
4105
|
const open = isControlled ? isOpenProp : internalOpen;
|
|
@@ -3366,6 +4151,15 @@ function BubbleWidget({
|
|
|
3366
4151
|
agentName: remote.remoteConfig.agentName ?? chatProps.agentName ?? "Asistente",
|
|
3367
4152
|
source: chatProps.source ?? remote.remoteConfig.source ?? "web"
|
|
3368
4153
|
};
|
|
4154
|
+
const supportBackend = useSupportChat(
|
|
4155
|
+
inboxToken ? {
|
|
4156
|
+
inboxToken,
|
|
4157
|
+
apiBase: supportApiBase,
|
|
4158
|
+
requestHumanLabel,
|
|
4159
|
+
returnToAiLabel,
|
|
4160
|
+
locale: mergedConfig.locale
|
|
4161
|
+
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
4162
|
+
);
|
|
3369
4163
|
const setOpenRef = react.useRef(setOpen);
|
|
3370
4164
|
react.useEffect(() => {
|
|
3371
4165
|
setOpenRef.current = setOpen;
|
|
@@ -3523,6 +4317,9 @@ function BubbleWidget({
|
|
|
3523
4317
|
|
|
3524
4318
|
exports.BubbleWidget = BubbleWidget;
|
|
3525
4319
|
exports.ChatWidget = ChatWidget;
|
|
4320
|
+
exports.CommandPanel = CommandPanel;
|
|
4321
|
+
exports.IconTarget = IconTarget;
|
|
4322
|
+
exports.LiveDot = LiveDot;
|
|
3526
4323
|
exports.PlanCard = PlanCard;
|
|
3527
4324
|
exports.ReasoningBlock = ReasoningBlock;
|
|
3528
4325
|
exports.ToolCallBadge = ToolCallBadge;
|