@wallavi/widget 1.11.1 → 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 +56 -7
- package/dist/index.d.ts +56 -7
- package/dist/index.js +911 -417
- package/dist/index.mjs +909 -418
- 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-mt-2 {\n margin-top: 0.5rem;\n}\n.ww-line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.ww-block {\n display: block;\n}\n.ww-inline-block {\n display: inline-block;\n}\n.ww-flex {\n display: flex;\n}\n.ww-inline-flex {\n display: inline-flex;\n}\n.ww-grid {\n display: grid;\n}\n.ww-hidden {\n display: none;\n}\n.ww-h-1\\.5 {\n height: 0.375rem;\n}\n.ww-h-10 {\n height: 2.5rem;\n}\n.ww-h-16 {\n height: 4rem;\n}\n.ww-h-2 {\n height: 0.5rem;\n}\n.ww-h-2\\.5 {\n height: 0.625rem;\n}\n.ww-h-20 {\n height: 5rem;\n}\n.ww-h-3 {\n height: 0.75rem;\n}\n.ww-h-3\\.5 {\n height: 0.875rem;\n}\n.ww-h-4 {\n height: 1rem;\n}\n.ww-h-40 {\n height: 10rem;\n}\n.ww-h-48 {\n height: 12rem;\n}\n.ww-h-6 {\n height: 1.5rem;\n}\n.ww-h-7 {\n height: 1.75rem;\n}\n.ww-h-8 {\n height: 2rem;\n}\n.ww-h-full {\n height: 100%;\n}\n.ww-max-h-32 {\n max-height: 8rem;\n}\n.ww-max-h-48 {\n max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n max-height: 180px;\n}\n.ww-min-h-\\[22px\\] {\n min-height: 22px;\n}\n.ww-w-0\\.5 {\n width: 0.125rem;\n}\n.ww-w-1\\.5 {\n width: 0.375rem;\n}\n.ww-w-10 {\n width: 2.5rem;\n}\n.ww-w-16 {\n width: 4rem;\n}\n.ww-w-2 {\n width: 0.5rem;\n}\n.ww-w-2\\.5 {\n width: 0.625rem;\n}\n.ww-w-20 {\n width: 5rem;\n}\n.ww-w-3 {\n width: 0.75rem;\n}\n.ww-w-3\\.5 {\n width: 0.875rem;\n}\n.ww-w-4 {\n width: 1rem;\n}\n.ww-w-48 {\n width: 12rem;\n}\n.ww-w-6 {\n width: 1.5rem;\n}\n.ww-w-7 {\n width: 1.75rem;\n}\n.ww-w-8 {\n width: 2rem;\n}\n.ww-w-\\[280px\\] {\n width: 280px;\n}\n.ww-w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.ww-w-full {\n width: 100%;\n}\n.ww-min-w-0 {\n min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n max-width: 82%;\n}\n.ww-max-w-full {\n max-width: 100%;\n}\n.ww-max-w-none {\n max-width: none;\n}\n.ww-flex-1 {\n flex: 1 1 0%;\n}\n.ww-shrink-0 {\n flex-shrink: 0;\n}\n.ww-rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-90 {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes ww-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ww-animate-ping {\n animation: ww-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ww-pulse {\n 50% {\n opacity: .5;\n }\n}\n.ww-animate-pulse {\n animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.ww-animate-spin {\n animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n cursor: default;\n}\n.ww-cursor-pointer {\n cursor: pointer;\n}\n.ww-touch-none {\n touch-action: none;\n}\n.ww-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.ww-select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n}\n.ww-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-row {\n flex-direction: row;\n}\n.ww-flex-col {\n flex-direction: column;\n}\n.ww-flex-wrap {\n flex-wrap: wrap;\n}\n.ww-items-start {\n align-items: flex-start;\n}\n.ww-items-end {\n align-items: flex-end;\n}\n.ww-items-center {\n align-items: center;\n}\n.ww-justify-end {\n justify-content: flex-end;\n}\n.ww-justify-center {\n justify-content: center;\n}\n.ww-justify-between {\n justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n gap: 0.125rem;\n}\n.ww-gap-1 {\n gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n gap: 0.375rem;\n}\n.ww-gap-2 {\n gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n gap: 0.625rem;\n}\n.ww-gap-4 {\n gap: 1rem;\n}\n.ww-gap-5 {\n gap: 1.25rem;\n}\n.ww-gap-6 {\n gap: 1.5rem;\n}\n.ww-gap-8 {\n gap: 2rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n overflow: hidden;\n}\n.ww-overflow-y-auto {\n overflow-y: auto;\n}\n.ww-overscroll-contain {\n overscroll-behavior: contain;\n}\n.ww-overscroll-none {\n overscroll-behavior: none;\n}\n.ww-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.ww-rounded {\n border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n border-radius: 1rem;\n}\n.ww-rounded-full {\n border-radius: 9999px;\n}\n.ww-rounded-lg {\n border-radius: var(--radius);\n}\n.ww-rounded-md {\n border-radius: calc(var(--radius) - 2px);\n}\n.ww-rounded-xl {\n border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n border-width: 1px;\n}\n.ww-border-2 {\n border-width: 2px;\n}\n.ww-border-b {\n border-bottom-width: 1px;\n}\n.ww-border-l {\n border-left-width: 1px;\n}\n.ww-border-l-2 {\n border-left-width: 2px;\n}\n.ww-border-t {\n border-top-width: 1px;\n}\n.ww-border-background {\n border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/80 {\n border-color: hsl(var(--border) / 0.8);\n}\n.ww-border-muted {\n border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-primary\\/10 {\n border-color: hsl(var(--primary) / 0.1);\n}\n.ww-border-primary\\/20 {\n border-color: hsl(var(--primary) / 0.2);\n}\n.ww-border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-transparent {\n border-color: transparent;\n}\n.ww-border-white\\/20 {\n border-color: rgb(255 255 255 / 0.2);\n}\n.ww-border-white\\/30 {\n border-color: rgb(255 255 255 / 0.3);\n}\n.ww-bg-background {\n background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/90 {\n background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n background-color: hsl(var(--background) / 0.95);\n}\n.ww-bg-black\\/10 {\n background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-emerald-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500\\/10 {\n background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n background-color: hsl(var(--foreground) / 0.05);\n}\n.ww-bg-foreground\\/60 {\n background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/10 {\n background-color: hsl(var(--muted) / 0.1);\n}\n.ww-bg-muted\\/30 {\n background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n background-color: hsl(var(--muted) / 0.4);\n}\n.ww-bg-muted\\/50 {\n background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/10 {\n background-color: hsl(var(--primary) / 0.1);\n}\n.ww-bg-primary\\/5 {\n background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n background-color: rgb(168 85 247 / 0.3);\n}\n.ww-bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n background-color: transparent;\n}\n.ww-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-white\\/10 {\n background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n background-color: rgb(255 255 255 / 0.15);\n}\n.ww-bg-white\\/20 {\n background-color: rgb(255 255 255 / 0.2);\n}\n.ww-fill-current {\n fill: currentColor;\n}\n.ww-object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.ww-p-0\\.5 {\n padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n padding: 0.375rem;\n}\n.ww-p-2\\.5 {\n padding: 0.625rem;\n}\n.ww-p-3 {\n padding: 0.75rem;\n}\n.ww-p-4 {\n padding: 1rem;\n}\n.ww-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.ww-px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n padding-left: 0.625rem;\n padding-right: 0.625rem;\n}\n.ww-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n padding-left: 0.875rem;\n padding-right: 0.875rem;\n}\n.ww-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n padding-bottom: 0.375rem;\n}\n.ww-pb-2 {\n padding-bottom: 0.5rem;\n}\n.ww-pb-4 {\n padding-bottom: 1rem;\n}\n.ww-pl-2 {\n padding-left: 0.5rem;\n}\n.ww-pl-7 {\n padding-left: 1.75rem;\n}\n.ww-pr-0\\.5 {\n padding-right: 0.125rem;\n}\n.ww-pr-3 {\n padding-right: 0.75rem;\n}\n.ww-pt-2 {\n padding-top: 0.5rem;\n}\n.ww-pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.ww-pt-5 {\n padding-top: 1.25rem;\n}\n.ww-text-left {\n text-align: left;\n}\n.ww-text-center {\n text-align: center;\n}\n.ww-align-middle {\n vertical-align: middle;\n}\n.ww-text-\\[10\\.5px\\] {\n font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n font-size: 12.5px;\n}\n.ww-text-\\[13px\\] {\n font-size: 13px;\n}\n.ww-text-\\[8px\\] {\n font-size: 8px;\n}\n.ww-text-\\[9px\\] {\n font-size: 9px;\n}\n.ww-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.ww-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.ww-font-bold {\n font-weight: 700;\n}\n.ww-font-medium {\n font-weight: 500;\n}\n.ww-font-semibold {\n font-weight: 600;\n}\n.ww-uppercase {\n text-transform: uppercase;\n}\n.ww-italic {\n font-style: italic;\n}\n.ww-leading-none {\n line-height: 1;\n}\n.ww-leading-relaxed {\n line-height: 1.625;\n}\n.ww-leading-snug {\n line-height: 1.375;\n}\n.ww-leading-tight {\n line-height: 1.25;\n}\n.ww-tracking-wide {\n letter-spacing: 0.025em;\n}\n.ww-tracking-wider {\n letter-spacing: 0.05em;\n}\n.ww-tracking-widest {\n letter-spacing: 0.1em;\n}\n.ww-text-black\\/40 {\n color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n --tw-text-opacity: 1;\n color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-foreground\\/90 {\n color: hsl(var(--foreground) / 0.9);\n}\n.ww-text-inherit {\n color: inherit;\n}\n.ww-text-muted-foreground {\n color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n.ww-text-zinc-400 {\n --tw-text-opacity: 1;\n color: rgb(161 161 170 / var(--tw-text-opacity, 1));\n}\n.ww-underline {\n text-decoration-line: underline;\n}\n.ww-line-through {\n text-decoration-line: line-through;\n}\n.ww-no-underline {\n text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n opacity: 1;\n}\n.ww-opacity-25 {\n opacity: 0.25;\n}\n.ww-opacity-30 {\n opacity: 0.3;\n}\n.ww-opacity-40 {\n opacity: 0.4;\n}\n.ww-opacity-60 {\n opacity: 0.6;\n}\n.ww-opacity-70 {\n opacity: 0.7;\n}\n.ww-opacity-75 {\n opacity: 0.75;\n}\n.ww-opacity-80 {\n opacity: 0.8;\n}\n.ww-opacity-90 {\n opacity: 0.9;\n}\n.ww-shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.ww-outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.ww-ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/20 {\n --tw-ring-color: hsl(var(--primary) / 0.2);\n}\n.ww-ring-primary\\/60 {\n --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-backdrop-blur-xl {\n --tw-backdrop-blur: blur(24px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ww-duration-1000 {\n transition-duration: 1000ms;\n}\n.ww-duration-150 {\n transition-duration: 150ms;\n}\n.ww-duration-200 {\n transition-duration: 200ms;\n}\n.ww-duration-300 {\n transition-duration: 300ms;\n}\n.ww-duration-500 {\n transition-duration: 500ms;\n}\n.ww-duration-700 {\n transition-duration: 700ms;\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n.ww-animate-in {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n}\n.ww-fade-in {\n --tw-enter-opacity: 0;\n}\n.ww-slide-in-from-top-1 {\n --tw-enter-translate-y: -0.25rem;\n}\n.ww-duration-1000 {\n animation-duration: 1000ms;\n}\n.ww-duration-150 {\n animation-duration: 150ms;\n}\n.ww-duration-200 {\n animation-duration: 200ms;\n}\n.ww-duration-300 {\n animation-duration: 300ms;\n}\n.ww-duration-500 {\n animation-duration: 500ms;\n}\n.ww-duration-700 {\n animation-duration: 700ms;\n}\n.wallavi-widget *,\n.wallavi-widget *::before,\n.wallavi-widget *::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n}\n.wallavi-widget button {\n -moz-appearance: none;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n cursor: pointer;\n}\n.wallavi-widget textarea,\n.wallavi-widget input,\n.wallavi-widget select {\n font-family: inherit;\n font-size: inherit;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n max-width: 100%;\n height: auto;\n}\n.wallavi-widget .lk-control-bar {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n padding: 0 !important;\n gap: 1.5rem !important;\n justify-content: center !important;\n}\n.wallavi-widget .lk-button {\n background: rgba(25, 25, 28, 0.05) !important;\n border-radius: 9999px !important;\n padding: 1.25rem !important;\n color: var(--ww-fg, #19191c) !important;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n border: 1px solid rgba(25, 25, 28, 0.1) !important;\n}\n.wallavi-widget .lk-button:hover {\n background: rgba(25, 25, 28, 0.1) !important;\n transform: scale(1.05) !important;\n}\n.wallavi-widget .lk-disconnect-button {\n background: #ef4444 !important;\n color: white !important;\n border: none !important;\n}\n.wallavi-widget .lk-disconnect-button:hover {\n background: #dc2626 !important;\n}\n.wallavi-widget .lk-device-menu {\n bottom: 100% !important;\n top: auto !important;\n margin-bottom: 1rem !important;\n max-width: 250px !important;\n width: -moz-max-content !important;\n width: max-content !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #ffffff !important;\n border-radius: 16px !important;\n box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1) !important;\n z-index: 1000 !important;\n overflow: hidden !important;\n border: 1px solid rgba(0, 0, 0, 0.05) !important;\n padding: 0.5rem !important;\n}\n.wallavi-widget .lk-device-menu > li {\n padding: 0.75rem 1rem !important;\n font-size: 0.875rem !important;\n color: #19191c !important;\n white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n border-radius: 8px !important;\n transition: background 0.15s !important;\n}\n.wallavi-widget .lk-device-menu > li:hover {\n background: rgba(0, 0, 0, 0.05) !important;\n}\n.wallavi-widget .lk-device-menu > li.lk-active {\n background: rgba(0, 0, 0, 0.08) !important;\n font-weight: 600 !important;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n color: hsl(var(--muted-foreground) / 0.4);\n}\n.focus-within\\:ww-ring-1:focus-within {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:-ww-translate-y-1:hover {\n --tw-translate-y: -0.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-border-accent-foreground\\/20:hover {\n border-color: hsl(var(--accent-foreground) / 0.2);\n}\n.hover\\:ww-border-accent-foreground\\/25:hover {\n border-color: hsl(var(--accent-foreground) / 0.25);\n}\n.hover\\:ww-border-primary\\/40:hover {\n border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-accent\\/30:hover {\n background-color: hsl(var(--accent) / 0.3);\n}\n.hover\\:ww-bg-accent\\/40:hover {\n background-color: hsl(var(--accent) / 0.4);\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n background-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-muted:hover {\n background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-accent-foreground:hover {\n color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.hover\\:ww-shadow-xl:hover {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.focus\\:ww-ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow:\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.active\\:ww-scale-\\[0\\.98\\]:active {\n --tw-scale-x: 0.98;\n --tw-scale-y: 0.98;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:ww-pointer-events-none:disabled {\n pointer-events: none;\n}\n.disabled\\:ww-opacity-40:disabled {\n opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n opacity: 0.5;\n}\n.ww-group:hover .group-hover\\:ww-rotate-12 {\n --tw-rotate: 12deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-group:hover .group-hover\\:ww-text-primary {\n color: hsl(var(--primary));\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
|
|
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() {
|
|
@@ -1146,6 +1146,118 @@ function MinimizeIcon() {
|
|
|
1146
1146
|
}
|
|
1147
1147
|
) });
|
|
1148
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
|
+
}
|
|
1149
1261
|
var Avatar = ({
|
|
1150
1262
|
style,
|
|
1151
1263
|
...p
|
|
@@ -1208,7 +1320,8 @@ function ChatHeader({
|
|
|
1208
1320
|
onExpand,
|
|
1209
1321
|
expanded,
|
|
1210
1322
|
onCall,
|
|
1211
|
-
isCallLoading
|
|
1323
|
+
isCallLoading,
|
|
1324
|
+
locale
|
|
1212
1325
|
}) {
|
|
1213
1326
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1214
1327
|
"header",
|
|
@@ -1241,7 +1354,7 @@ function ChatHeader({
|
|
|
1241
1354
|
),
|
|
1242
1355
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-min-w-0", children: [
|
|
1243
1356
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "ww-font-semibold ww-text-sm ww-truncate ww-leading-tight", children: title }),
|
|
1244
|
-
/* @__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) })
|
|
1245
1358
|
] })
|
|
1246
1359
|
] }),
|
|
1247
1360
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1", children: [
|
|
@@ -1250,7 +1363,7 @@ function ChatHeader({
|
|
|
1250
1363
|
{
|
|
1251
1364
|
onClick: onExpand,
|
|
1252
1365
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1253
|
-
title: expanded ? "
|
|
1366
|
+
title: expanded ? getWidgetTranslation("minimize", locale) : getWidgetTranslation("expand", locale),
|
|
1254
1367
|
children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
|
|
1255
1368
|
}
|
|
1256
1369
|
),
|
|
@@ -1260,7 +1373,7 @@ function ChatHeader({
|
|
|
1260
1373
|
onClick: onCall,
|
|
1261
1374
|
disabled: isCallLoading,
|
|
1262
1375
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10 disabled:ww-opacity-50",
|
|
1263
|
-
title: "
|
|
1376
|
+
title: getWidgetTranslation("voiceCall", locale),
|
|
1264
1377
|
children: isCallLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1265
1378
|
"svg",
|
|
1266
1379
|
{
|
|
@@ -1304,7 +1417,7 @@ function ChatHeader({
|
|
|
1304
1417
|
{
|
|
1305
1418
|
onClick: onReset,
|
|
1306
1419
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1307
|
-
title: "
|
|
1420
|
+
title: getWidgetTranslation("newConversation", locale),
|
|
1308
1421
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1309
1422
|
lucideReact.RotateCcw,
|
|
1310
1423
|
{
|
|
@@ -1319,7 +1432,7 @@ function ChatHeader({
|
|
|
1319
1432
|
{
|
|
1320
1433
|
onClick: onClose,
|
|
1321
1434
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1322
|
-
title: "
|
|
1435
|
+
title: getWidgetTranslation("close", locale),
|
|
1323
1436
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-3.5 ww-w-3.5", style: { color: headerText } })
|
|
1324
1437
|
}
|
|
1325
1438
|
)
|
|
@@ -1361,7 +1474,8 @@ function ChipLeading({ a }) {
|
|
|
1361
1474
|
}
|
|
1362
1475
|
function AttachmentChips({
|
|
1363
1476
|
attachments,
|
|
1364
|
-
onRemove
|
|
1477
|
+
onRemove,
|
|
1478
|
+
locale
|
|
1365
1479
|
}) {
|
|
1366
1480
|
if (attachments.length === 0) return null;
|
|
1367
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(
|
|
@@ -1373,7 +1487,7 @@ function AttachmentChips({
|
|
|
1373
1487
|
),
|
|
1374
1488
|
children: [
|
|
1375
1489
|
/* @__PURE__ */ jsxRuntime.jsx(ChipLeading, { a }),
|
|
1376
|
-
/* @__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 }),
|
|
1377
1491
|
a.status === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-shrink-0 ww-text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
|
|
1378
1492
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1379
1493
|
"button",
|
|
@@ -1381,7 +1495,7 @@ function AttachmentChips({
|
|
|
1381
1495
|
type: "button",
|
|
1382
1496
|
onClick: () => onRemove(a.id),
|
|
1383
1497
|
className: "ww-shrink-0 ww-rounded-full ww-p-0.5 hover:ww-bg-foreground/10 ww-transition-colors ww-ml-0.5",
|
|
1384
|
-
title: "
|
|
1498
|
+
title: getWidgetTranslation("remove", locale),
|
|
1385
1499
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-2.5 ww-w-2.5" })
|
|
1386
1500
|
}
|
|
1387
1501
|
)
|
|
@@ -1461,7 +1575,8 @@ function PlanStepIcon({ status }) {
|
|
|
1461
1575
|
function PlanCard({
|
|
1462
1576
|
part,
|
|
1463
1577
|
onSend,
|
|
1464
|
-
disabled
|
|
1578
|
+
disabled,
|
|
1579
|
+
locale
|
|
1465
1580
|
}) {
|
|
1466
1581
|
const successCount = part.steps.filter((s) => s.status === "success").length;
|
|
1467
1582
|
const hasExecuting = part.steps.some((s) => s.status === "executing");
|
|
@@ -1513,7 +1628,7 @@ function PlanCard({
|
|
|
1513
1628
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1514
1629
|
"button",
|
|
1515
1630
|
{
|
|
1516
|
-
onClick: () => onSend("
|
|
1631
|
+
onClick: () => onSend(getWidgetTranslation("proceedMessage", locale)),
|
|
1517
1632
|
disabled,
|
|
1518
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",
|
|
1519
1634
|
style: {
|
|
@@ -1522,19 +1637,19 @@ function PlanCard({
|
|
|
1522
1637
|
},
|
|
1523
1638
|
children: [
|
|
1524
1639
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1525
|
-
"
|
|
1640
|
+
getWidgetTranslation("proceed", locale)
|
|
1526
1641
|
]
|
|
1527
1642
|
}
|
|
1528
1643
|
),
|
|
1529
1644
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1530
1645
|
"button",
|
|
1531
1646
|
{
|
|
1532
|
-
onClick: () => onSend("
|
|
1647
|
+
onClick: () => onSend(getWidgetTranslation("cancelMessage", locale)),
|
|
1533
1648
|
disabled,
|
|
1534
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",
|
|
1535
1650
|
children: [
|
|
1536
1651
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1537
|
-
"
|
|
1652
|
+
getWidgetTranslation("cancel", locale)
|
|
1538
1653
|
]
|
|
1539
1654
|
}
|
|
1540
1655
|
)
|
|
@@ -1578,19 +1693,25 @@ function ThinkingDots() {
|
|
|
1578
1693
|
)
|
|
1579
1694
|
] });
|
|
1580
1695
|
}
|
|
1581
|
-
function ToolCallBadge({
|
|
1696
|
+
function ToolCallBadge({
|
|
1697
|
+
part,
|
|
1698
|
+
locale
|
|
1699
|
+
}) {
|
|
1582
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: [
|
|
1583
1701
|
part.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin" }),
|
|
1584
1702
|
part.status === "done" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" }),
|
|
1585
1703
|
part.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" }),
|
|
1586
1704
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
1587
|
-
part.status === "running" ? "
|
|
1705
|
+
part.status === "running" ? getWidgetTranslation("calling", locale) : part.status === "done" ? getWidgetTranslation("called", locale) : getWidgetTranslation("failed", locale),
|
|
1588
1706
|
" ",
|
|
1589
1707
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-font-medium ww-text-foreground", children: formatToolName(part.toolName) })
|
|
1590
1708
|
] })
|
|
1591
1709
|
] });
|
|
1592
1710
|
}
|
|
1593
|
-
function ReasoningBlock({
|
|
1711
|
+
function ReasoningBlock({
|
|
1712
|
+
text,
|
|
1713
|
+
locale
|
|
1714
|
+
}) {
|
|
1594
1715
|
const [open, setOpen] = react.useState(false);
|
|
1595
1716
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-mb-1", children: [
|
|
1596
1717
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1600,7 +1721,7 @@ function ReasoningBlock({ text }) {
|
|
|
1600
1721
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-xs ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
1601
1722
|
children: [
|
|
1602
1723
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "ww-h-3 ww-w-3" }),
|
|
1603
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "
|
|
1724
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: getWidgetTranslation("reasoning", locale) }),
|
|
1604
1725
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1605
1726
|
lucideReact.ChevronDown,
|
|
1606
1727
|
{
|
|
@@ -1619,7 +1740,8 @@ function ReasoningBlock({ text }) {
|
|
|
1619
1740
|
function PickerSelector({
|
|
1620
1741
|
part,
|
|
1621
1742
|
disabled,
|
|
1622
|
-
onSelect
|
|
1743
|
+
onSelect,
|
|
1744
|
+
locale
|
|
1623
1745
|
}) {
|
|
1624
1746
|
const count = part.options.length;
|
|
1625
1747
|
const mode = count <= 6 ? "pills" : count <= 20 ? "grid" : "list";
|
|
@@ -1651,7 +1773,7 @@ function PickerSelector({
|
|
|
1651
1773
|
type: "text",
|
|
1652
1774
|
value: query,
|
|
1653
1775
|
onChange: (e) => setQuery(e.target.value),
|
|
1654
|
-
placeholder: "
|
|
1776
|
+
placeholder: getWidgetTranslation("search", locale),
|
|
1655
1777
|
disabled: disabled || isConsumed,
|
|
1656
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"
|
|
1657
1779
|
}
|
|
@@ -1700,7 +1822,7 @@ function PickerSelector({
|
|
|
1700
1822
|
);
|
|
1701
1823
|
}) }),
|
|
1702
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: [
|
|
1703
|
-
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) }),
|
|
1704
1826
|
filtered.map((opt, i) => {
|
|
1705
1827
|
const sel = part.selectedValue === opt.value;
|
|
1706
1828
|
const faded = isConsumed && !sel;
|
|
@@ -1957,10 +2079,11 @@ function MessageBubble({
|
|
|
1957
2079
|
userColor,
|
|
1958
2080
|
agentName,
|
|
1959
2081
|
profilePicture,
|
|
1960
|
-
isStreaming,
|
|
2082
|
+
isStreaming = false,
|
|
1961
2083
|
showThinking = true,
|
|
1962
2084
|
onPickerSelect,
|
|
1963
|
-
onSend
|
|
2085
|
+
onSend,
|
|
2086
|
+
locale
|
|
1964
2087
|
}) {
|
|
1965
2088
|
const isUser = message.role === "user";
|
|
1966
2089
|
const textPart = message.parts.find((p) => p.type === "text");
|
|
@@ -2021,24 +2144,26 @@ function MessageBubble({
|
|
|
2021
2144
|
}
|
|
2022
2145
|
),
|
|
2023
2146
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
|
|
2024
|
-
showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
|
|
2147
|
+
showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text, locale }),
|
|
2025
2148
|
planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2026
2149
|
PlanCard,
|
|
2027
2150
|
{
|
|
2028
2151
|
part: p,
|
|
2029
2152
|
onSend,
|
|
2030
|
-
disabled: isStreaming
|
|
2153
|
+
disabled: isStreaming,
|
|
2154
|
+
locale
|
|
2031
2155
|
},
|
|
2032
2156
|
p.planId
|
|
2033
2157
|
)),
|
|
2034
|
-
visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
|
|
2158
|
+
visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t, locale }, t.toolCallId)),
|
|
2035
2159
|
pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2036
2160
|
PickerSelector,
|
|
2037
2161
|
{
|
|
2038
2162
|
part: p,
|
|
2039
2163
|
disabled: isStreaming ?? false,
|
|
2040
2164
|
onSelect: onPickerSelect ?? (() => {
|
|
2041
|
-
})
|
|
2165
|
+
}),
|
|
2166
|
+
locale
|
|
2042
2167
|
},
|
|
2043
2168
|
p.pickerId
|
|
2044
2169
|
)),
|
|
@@ -2086,7 +2211,9 @@ function ChatMessages({
|
|
|
2086
2211
|
suggestedMessages = [],
|
|
2087
2212
|
showThinking = true,
|
|
2088
2213
|
onSuggest,
|
|
2089
|
-
onPickerSelect
|
|
2214
|
+
onPickerSelect,
|
|
2215
|
+
commandPanel,
|
|
2216
|
+
locale
|
|
2090
2217
|
}) {
|
|
2091
2218
|
const bottomRef = react.useRef(null);
|
|
2092
2219
|
const greetText = initialMessages[0];
|
|
@@ -2099,6 +2226,7 @@ function ChatMessages({
|
|
|
2099
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() }) }),
|
|
2100
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 })
|
|
2101
2228
|
] }),
|
|
2229
|
+
showGreeting && commandPanel,
|
|
2102
2230
|
showGreeting && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex-1" }),
|
|
2103
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(
|
|
2104
2232
|
MessageBubble,
|
|
@@ -2110,7 +2238,8 @@ function ChatMessages({
|
|
|
2110
2238
|
isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
|
|
2111
2239
|
showThinking,
|
|
2112
2240
|
onPickerSelect,
|
|
2113
|
-
onSend: i === messages.length - 1 ? onSuggest : void 0
|
|
2241
|
+
onSend: i === messages.length - 1 ? onSuggest : void 0,
|
|
2242
|
+
locale
|
|
2114
2243
|
},
|
|
2115
2244
|
msg.id
|
|
2116
2245
|
)) }),
|
|
@@ -2199,16 +2328,37 @@ var serializeEditor = (editor) => {
|
|
|
2199
2328
|
var createChipElement = (name, type, id, accentColor) => {
|
|
2200
2329
|
const span = document.createElement("span");
|
|
2201
2330
|
span.setAttribute("contenteditable", "false");
|
|
2202
|
-
span.className = "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/
|
|
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";
|
|
2203
2332
|
span.style.setProperty("--primary", accentColor);
|
|
2204
2333
|
span.setAttribute("data-wlv-context-id", id);
|
|
2205
2334
|
span.setAttribute("data-wlv-context-type", type);
|
|
2206
2335
|
span.setAttribute("data-wlv-context-name", name);
|
|
2207
|
-
const
|
|
2208
|
-
|
|
2209
|
-
|
|
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);
|
|
2210
2360
|
const typeSpan = document.createElement("span");
|
|
2211
|
-
typeSpan.className = "ww-opacity-
|
|
2361
|
+
typeSpan.className = "ww-opacity-60 ww-uppercase ww-text-[8px] ww-tracking-[0.06em] ww-font-bold";
|
|
2212
2362
|
typeSpan.textContent = `${type}:`;
|
|
2213
2363
|
span.appendChild(typeSpan);
|
|
2214
2364
|
const nameSpan = document.createElement("span");
|
|
@@ -2216,7 +2366,7 @@ var createChipElement = (name, type, id, accentColor) => {
|
|
|
2216
2366
|
span.appendChild(nameSpan);
|
|
2217
2367
|
const button = document.createElement("button");
|
|
2218
2368
|
button.type = "button";
|
|
2219
|
-
button.className = "ww-ml-1 ww-text-primary/
|
|
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]";
|
|
2220
2370
|
button.textContent = "\xD7";
|
|
2221
2371
|
button.onclick = () => {
|
|
2222
2372
|
span.remove();
|
|
@@ -2242,7 +2392,8 @@ function ChatInput({
|
|
|
2242
2392
|
onRemoveAttachment,
|
|
2243
2393
|
isUploading = false,
|
|
2244
2394
|
selectedContext,
|
|
2245
|
-
onClearContext
|
|
2395
|
+
onClearContext,
|
|
2396
|
+
locale
|
|
2246
2397
|
}) {
|
|
2247
2398
|
const hasVoice = onVoiceStart !== void 0;
|
|
2248
2399
|
const hasAttachments = onAttach !== void 0;
|
|
@@ -2361,25 +2512,41 @@ function ChatInput({
|
|
|
2361
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",
|
|
2362
2513
|
children: [
|
|
2363
2514
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "ww-h-3 ww-w-3" }),
|
|
2364
|
-
"
|
|
2515
|
+
getWidgetTranslation("regenerateResponse", locale)
|
|
2365
2516
|
]
|
|
2366
2517
|
}
|
|
2367
2518
|
),
|
|
2368
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: [
|
|
2369
|
-
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-
|
|
2370
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2371
|
-
|
|
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: [
|
|
2372
2539
|
selectedContext.type,
|
|
2373
2540
|
":"
|
|
2374
2541
|
] }),
|
|
2375
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedContext.name }),
|
|
2542
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-font-semibold", children: selectedContext.name }),
|
|
2376
2543
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2377
2544
|
"button",
|
|
2378
2545
|
{
|
|
2379
2546
|
type: "button",
|
|
2380
2547
|
onClick: onClearContext,
|
|
2381
|
-
className: "ww-ml-
|
|
2382
|
-
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),
|
|
2383
2550
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2384
2551
|
"svg",
|
|
2385
2552
|
{
|
|
@@ -2403,7 +2570,8 @@ function ChatInput({
|
|
|
2403
2570
|
AttachmentChips,
|
|
2404
2571
|
{
|
|
2405
2572
|
attachments,
|
|
2406
|
-
onRemove: (id) => onRemoveAttachment?.(id)
|
|
2573
|
+
onRemove: (id) => onRemoveAttachment?.(id),
|
|
2574
|
+
locale
|
|
2407
2575
|
}
|
|
2408
2576
|
) }),
|
|
2409
2577
|
hasAttachments && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2430,7 +2598,9 @@ function ChatInput({
|
|
|
2430
2598
|
ref: textareaRef,
|
|
2431
2599
|
contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
|
|
2432
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",
|
|
2433
|
-
...{
|
|
2601
|
+
...{
|
|
2602
|
+
placeholder: placeholder || getWidgetTranslation("sendMessage", locale)
|
|
2603
|
+
},
|
|
2434
2604
|
onKeyDown: handleKeyDown,
|
|
2435
2605
|
onInput: handleInput,
|
|
2436
2606
|
onPaste: handlePaste,
|
|
@@ -2443,7 +2613,7 @@ function ChatInput({
|
|
|
2443
2613
|
type: "button",
|
|
2444
2614
|
onClick: voiceState === "recording" ? onVoiceStop : onVoiceStart,
|
|
2445
2615
|
disabled: streaming || voiceState === "transcribing",
|
|
2446
|
-
title: voiceState === "recording" ? "
|
|
2616
|
+
title: voiceState === "recording" ? getWidgetTranslation("stopRecording", locale) : getWidgetTranslation("recordVoiceMessage", locale),
|
|
2447
2617
|
className: cn3(
|
|
2448
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",
|
|
2449
2619
|
voiceState === "recording" && "ww-animate-pulse",
|
|
@@ -2460,7 +2630,7 @@ function ChatInput({
|
|
|
2460
2630
|
type: "button",
|
|
2461
2631
|
onClick: () => fileInputRef.current?.click(),
|
|
2462
2632
|
disabled: streaming || isUploading,
|
|
2463
|
-
title: "
|
|
2633
|
+
title: getWidgetTranslation("attachFile", locale),
|
|
2464
2634
|
className: cn3(
|
|
2465
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",
|
|
2466
2636
|
"ww-text-muted-foreground hover:ww-text-foreground",
|
|
@@ -2489,7 +2659,10 @@ function ChatInput({
|
|
|
2489
2659
|
] })
|
|
2490
2660
|
] });
|
|
2491
2661
|
}
|
|
2492
|
-
function CustomControlBar({
|
|
2662
|
+
function CustomControlBar({
|
|
2663
|
+
onClose,
|
|
2664
|
+
locale
|
|
2665
|
+
}) {
|
|
2493
2666
|
const { localParticipant, isMicrophoneEnabled } = componentsReact.useLocalParticipant();
|
|
2494
2667
|
const room = componentsReact.useRoomContext();
|
|
2495
2668
|
const toggleMic = async () => {
|
|
@@ -2509,7 +2682,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2509
2682
|
{
|
|
2510
2683
|
onClick: toggleMic,
|
|
2511
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"}`,
|
|
2512
|
-
title: isMicrophoneEnabled ? "
|
|
2685
|
+
title: isMicrophoneEnabled ? getWidgetTranslation("muteMic", locale) : getWidgetTranslation("unmuteMic", locale),
|
|
2513
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" })
|
|
2514
2687
|
}
|
|
2515
2688
|
),
|
|
@@ -2519,7 +2692,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2519
2692
|
onClick: disconnect,
|
|
2520
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",
|
|
2521
2694
|
style: { backgroundColor: "#ef4444" },
|
|
2522
|
-
title: "
|
|
2695
|
+
title: getWidgetTranslation("disconnect", locale),
|
|
2523
2696
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { className: "ww-w-6 ww-h-6" })
|
|
2524
2697
|
}
|
|
2525
2698
|
)
|
|
@@ -2582,17 +2755,25 @@ function ChatGPTOrb() {
|
|
|
2582
2755
|
)
|
|
2583
2756
|
] });
|
|
2584
2757
|
}
|
|
2585
|
-
function AssistantVisualizer({
|
|
2758
|
+
function AssistantVisualizer({
|
|
2759
|
+
onClose,
|
|
2760
|
+
locale
|
|
2761
|
+
}) {
|
|
2586
2762
|
const { state } = componentsReact.useVoiceAssistant();
|
|
2587
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: [
|
|
2588
2764
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex-1 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ChatGPTOrb, {}) }),
|
|
2589
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: [
|
|
2590
|
-
/* @__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" ? "
|
|
2591
|
-
/* @__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 })
|
|
2592
2768
|
] })
|
|
2593
2769
|
] });
|
|
2594
2770
|
}
|
|
2595
|
-
function VoiceOverlay({
|
|
2771
|
+
function VoiceOverlay({
|
|
2772
|
+
token,
|
|
2773
|
+
serverUrl,
|
|
2774
|
+
onClose,
|
|
2775
|
+
locale
|
|
2776
|
+
}) {
|
|
2596
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(
|
|
2597
2778
|
componentsReact.LiveKitRoom,
|
|
2598
2779
|
{
|
|
@@ -2604,78 +2785,394 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
|
|
|
2604
2785
|
className: "ww-flex-1",
|
|
2605
2786
|
children: [
|
|
2606
2787
|
/* @__PURE__ */ jsxRuntime.jsx(componentsReact.RoomAudioRenderer, {}),
|
|
2607
|
-
/* @__PURE__ */ jsxRuntime.jsx(AssistantVisualizer, { onClose })
|
|
2788
|
+
/* @__PURE__ */ jsxRuntime.jsx(AssistantVisualizer, { onClose, locale })
|
|
2608
2789
|
]
|
|
2609
2790
|
}
|
|
2610
2791
|
) });
|
|
2611
2792
|
}
|
|
2612
|
-
function
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
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",
|
|
2622
2845
|
{
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
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",
|
|
2626
2851
|
{
|
|
2627
|
-
|
|
2628
|
-
category: "pricing"
|
|
2852
|
+
className: `ww-relative ww-inline-flex ww-rounded-full ${px} ww-bg-emerald-500`
|
|
2629
2853
|
}
|
|
2630
|
-
|
|
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;
|
|
2631
2869
|
}
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
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"
|
|
2640
2909
|
},
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
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"
|
|
2651
2942
|
},
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
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"
|
|
2666
2980
|
},
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
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
|
+
] });
|
|
2673
3134
|
}
|
|
2674
|
-
return [
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
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
|
+
] });
|
|
2679
3176
|
}
|
|
2680
3177
|
function ChatWidget({
|
|
2681
3178
|
agentId,
|
|
@@ -2684,7 +3181,7 @@ function ChatWidget({
|
|
|
2684
3181
|
displayName,
|
|
2685
3182
|
profilePicture,
|
|
2686
3183
|
userMessageColor = "#19191c",
|
|
2687
|
-
initialMessages
|
|
3184
|
+
initialMessages,
|
|
2688
3185
|
suggestedMessages = [],
|
|
2689
3186
|
messagePlaceholder,
|
|
2690
3187
|
watermark = true,
|
|
@@ -2712,7 +3209,14 @@ function ChatWidget({
|
|
|
2712
3209
|
envId,
|
|
2713
3210
|
onDebugTrace,
|
|
2714
3211
|
widgetLayout,
|
|
2715
|
-
|
|
3212
|
+
showCommandPanel = true,
|
|
3213
|
+
showRagTopics = true,
|
|
3214
|
+
showRagDocuments = true,
|
|
3215
|
+
showQuickActions = true,
|
|
3216
|
+
locale = "en",
|
|
3217
|
+
clientActions = [],
|
|
3218
|
+
ragTopics = [],
|
|
3219
|
+
ragDocuments = []
|
|
2716
3220
|
}) {
|
|
2717
3221
|
const [isDesktop, setIsDesktop] = react.useState(false);
|
|
2718
3222
|
react.useEffect(() => {
|
|
@@ -2801,10 +3305,24 @@ function ChatWidget({
|
|
|
2801
3305
|
chat.reset();
|
|
2802
3306
|
onReset?.();
|
|
2803
3307
|
};
|
|
2804
|
-
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";
|
|
2805
3323
|
const cssVars = {
|
|
2806
3324
|
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
2807
|
-
colorScheme:
|
|
3325
|
+
colorScheme: resolvedTheme,
|
|
2808
3326
|
// Inline style has higher specificity than any host-site stylesheet,
|
|
2809
3327
|
// so background-color set here cannot be overridden by host CSS.
|
|
2810
3328
|
backgroundColor: isDark ? "hsl(240 10% 3.9%)" : "hsl(0 0% 100%)",
|
|
@@ -2822,13 +3340,36 @@ function ChatWidget({
|
|
|
2822
3340
|
["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
|
|
2823
3341
|
["--radius"]: "0.5rem"
|
|
2824
3342
|
};
|
|
2825
|
-
const
|
|
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
|
+
};
|
|
2826
3368
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2827
3369
|
"div",
|
|
2828
3370
|
{
|
|
2829
3371
|
className: cn(
|
|
2830
|
-
"wallavi-widget ww-flex ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2831
|
-
showSplitLayout ? "ww-flex-row" : "ww-flex-col",
|
|
3372
|
+
"wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2832
3373
|
!embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
|
|
2833
3374
|
isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
|
|
2834
3375
|
className
|
|
@@ -2839,293 +3380,228 @@ function ChatWidget({
|
|
|
2839
3380
|
onDragLeave: handleDragLeave,
|
|
2840
3381
|
onDrop: handleDrop,
|
|
2841
3382
|
children: [
|
|
2842
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
VoiceOverlay,
|
|
2865
|
-
{
|
|
2866
|
-
token: chat.voiceCall.token,
|
|
2867
|
-
serverUrl: chat.voiceCall.serverUrl,
|
|
2868
|
-
onClose: chat.voiceCall.stop,
|
|
2869
|
-
accentColor: userMessageColor
|
|
2870
|
-
}
|
|
2871
|
-
),
|
|
2872
|
-
customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2873
|
-
"div",
|
|
2874
|
-
{
|
|
2875
|
-
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
2876
|
-
style: { backgroundColor: `${userMessageColor}0d` },
|
|
2877
|
-
children: [
|
|
2878
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
|
|
2879
|
-
/* @__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" }),
|
|
2880
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
|
|
2881
|
-
] }),
|
|
2882
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
|
|
2883
|
-
]
|
|
2884
|
-
}
|
|
2885
|
-
),
|
|
2886
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2887
|
-
ChatMessages,
|
|
2888
|
-
{
|
|
2889
|
-
messages: chat.messages,
|
|
2890
|
-
streaming: chat.streaming,
|
|
2891
|
-
agentName,
|
|
2892
|
-
profilePicture,
|
|
2893
|
-
userColor: userMessageColor,
|
|
2894
|
-
initialMessages,
|
|
2895
|
-
suggestedMessages,
|
|
2896
|
-
showThinking,
|
|
2897
|
-
onSuggest: (msg) => chat.send(msg),
|
|
2898
|
-
onPickerSelect: chat.selectPickerOption
|
|
2899
|
-
}
|
|
2900
|
-
),
|
|
2901
|
-
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(
|
|
2902
|
-
"button",
|
|
2903
|
-
{
|
|
2904
|
-
onClick: () => void customBackend.footerAction.onClick(),
|
|
2905
|
-
disabled: customBackend.footerAction.loading,
|
|
2906
|
-
style: customBackend.footerAction.icon === "human" ? {
|
|
2907
|
-
backgroundColor: userMessageColor,
|
|
2908
|
-
color: "#ffffff",
|
|
2909
|
-
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
2910
|
-
} : {
|
|
2911
|
-
borderColor: `${userMessageColor}35`,
|
|
2912
|
-
backgroundColor: `${userMessageColor}0d`,
|
|
2913
|
-
color: userMessageColor
|
|
2914
|
-
},
|
|
2915
|
-
className: [
|
|
2916
|
-
"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",
|
|
2917
|
-
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
2918
|
-
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
2919
|
-
].join(" "),
|
|
2920
|
-
children: [
|
|
2921
|
-
customBackend.footerAction.loading ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2922
|
-
"svg",
|
|
2923
|
-
{
|
|
2924
|
-
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2925
|
-
viewBox: "0 0 24 24",
|
|
2926
|
-
fill: "none",
|
|
2927
|
-
children: [
|
|
2928
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2929
|
-
"circle",
|
|
2930
|
-
{
|
|
2931
|
-
className: "ww-opacity-25",
|
|
2932
|
-
cx: "12",
|
|
2933
|
-
cy: "12",
|
|
2934
|
-
r: "10",
|
|
2935
|
-
stroke: "currentColor",
|
|
2936
|
-
strokeWidth: "3"
|
|
2937
|
-
}
|
|
2938
|
-
),
|
|
2939
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2940
|
-
"path",
|
|
2941
|
-
{
|
|
2942
|
-
className: "ww-opacity-75",
|
|
2943
|
-
fill: "currentColor",
|
|
2944
|
-
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
2945
|
-
}
|
|
2946
|
-
)
|
|
2947
|
-
]
|
|
2948
|
-
}
|
|
2949
|
-
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2950
|
-
"svg",
|
|
2951
|
-
{
|
|
2952
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2953
|
-
viewBox: "0 0 24 24",
|
|
2954
|
-
fill: "none",
|
|
2955
|
-
stroke: "currentColor",
|
|
2956
|
-
strokeWidth: "2",
|
|
2957
|
-
strokeLinecap: "round",
|
|
2958
|
-
strokeLinejoin: "round",
|
|
2959
|
-
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" })
|
|
2960
|
-
}
|
|
2961
|
-
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2962
|
-
"svg",
|
|
2963
|
-
{
|
|
2964
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2965
|
-
viewBox: "0 0 24 24",
|
|
2966
|
-
fill: "none",
|
|
2967
|
-
stroke: "currentColor",
|
|
2968
|
-
strokeWidth: "2",
|
|
2969
|
-
strokeLinecap: "round",
|
|
2970
|
-
strokeLinejoin: "round",
|
|
2971
|
-
children: [
|
|
2972
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
2973
|
-
/* @__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" })
|
|
2974
|
-
]
|
|
2975
|
-
}
|
|
2976
|
-
),
|
|
2977
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
2978
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2979
|
-
"svg",
|
|
2980
|
-
{
|
|
2981
|
-
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
2982
|
-
viewBox: "0 0 24 24",
|
|
2983
|
-
fill: "none",
|
|
2984
|
-
stroke: "currentColor",
|
|
2985
|
-
strokeWidth: "2.5",
|
|
2986
|
-
strokeLinecap: "round",
|
|
2987
|
-
strokeLinejoin: "round",
|
|
2988
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
|
|
2989
|
-
}
|
|
2990
|
-
)
|
|
2991
|
-
]
|
|
2992
|
-
}
|
|
2993
|
-
) }),
|
|
2994
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2995
|
-
ChatInput,
|
|
2996
|
-
{
|
|
2997
|
-
input: chat.input,
|
|
2998
|
-
setInput: chat.setInput,
|
|
2999
|
-
onSend: handleSend,
|
|
3000
|
-
streaming: chat.streaming,
|
|
3001
|
-
placeholder: messagePlaceholder,
|
|
3002
|
-
accentColor: userMessageColor,
|
|
3003
|
-
canRegenerate: !!canRegenerate,
|
|
3004
|
-
onRegenerate: () => void chat.regenerate(),
|
|
3005
|
-
selectedContext: chat.selectedContext,
|
|
3006
|
-
onClearContext: () => chat.setSelectedContext(null),
|
|
3007
|
-
...enableVoice && voice.isSupported ? {
|
|
3008
|
-
voiceState: voice.voiceState,
|
|
3009
|
-
onVoiceStart: () => void voice.start(),
|
|
3010
|
-
onVoiceStop: voice.stop
|
|
3011
|
-
} : {},
|
|
3012
|
-
...enableAttachments ? {
|
|
3013
|
-
attachments: attachmentHook.attachments,
|
|
3014
|
-
onAttach: attachmentHook.attach,
|
|
3015
|
-
onRemoveAttachment: attachmentHook.remove,
|
|
3016
|
-
isUploading: attachmentHook.isUploading
|
|
3017
|
-
} : {}
|
|
3018
|
-
}
|
|
3019
|
-
),
|
|
3020
|
-
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: [
|
|
3021
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3022
|
-
"a",
|
|
3023
|
-
{
|
|
3024
|
-
href: "https://wallavi.com",
|
|
3025
|
-
target: "_blank",
|
|
3026
|
-
rel: "noopener noreferrer",
|
|
3027
|
-
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3028
|
-
children: [
|
|
3029
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3030
|
-
"img",
|
|
3031
|
-
{
|
|
3032
|
-
src: watermarkLogoUrl,
|
|
3033
|
-
alt: "Wallavi",
|
|
3034
|
-
width: 12,
|
|
3035
|
-
height: 12
|
|
3036
|
-
}
|
|
3037
|
-
),
|
|
3038
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Wallavi" })
|
|
3039
|
-
]
|
|
3040
|
-
}
|
|
3383
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3384
|
+
ChatHeader,
|
|
3385
|
+
{
|
|
3386
|
+
title,
|
|
3387
|
+
profilePicture,
|
|
3388
|
+
headerBg,
|
|
3389
|
+
headerText,
|
|
3390
|
+
onReset: handleReset,
|
|
3391
|
+
onClose: hideCloseButton ? void 0 : onClose,
|
|
3392
|
+
onExpand,
|
|
3393
|
+
expanded,
|
|
3394
|
+
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
3395
|
+
isCallLoading: chat.voiceCall?.loading,
|
|
3396
|
+
locale
|
|
3397
|
+
}
|
|
3398
|
+
),
|
|
3399
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3400
|
+
"div",
|
|
3401
|
+
{
|
|
3402
|
+
className: cn(
|
|
3403
|
+
"ww-flex ww-flex-row ww-flex-1 ww-w-full ww-overflow-hidden",
|
|
3404
|
+
showSidebar && "ww-bg-muted/50"
|
|
3041
3405
|
),
|
|
3042
|
-
|
|
3043
|
-
/* @__PURE__ */ jsxRuntime.
|
|
3044
|
-
|
|
3045
|
-
] })
|
|
3046
|
-
] })
|
|
3047
|
-
] }),
|
|
3048
|
-
showSplitLayout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-w-[280px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/10 ww-flex ww-flex-col ww-h-full ww-overflow-hidden", children: [
|
|
3049
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-p-4 ww-border-b ww-border-border ww-shrink-0", children: [
|
|
3050
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ww-text-xs ww-font-bold ww-text-foreground ww-uppercase ww-tracking-wider", children: "Centro de Comando" }),
|
|
3051
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-px-2.5 ww-py-1 ww-rounded-full ww-text-[10px] ww-font-medium ww-bg-emerald-500/10 ww-text-emerald-500 ww-w-fit ww-mt-2 ww-max-w-full", children: [
|
|
3052
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-1.5 ww-w-1.5", children: [
|
|
3053
|
-
/* @__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" }),
|
|
3054
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-1.5 ww-w-1.5 ww-bg-emerald-500" })
|
|
3055
|
-
] }),
|
|
3056
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-truncate", children: userContext?.pageContext?.title || userContext?.pageContext?.url || "P\xE1gina General" })
|
|
3057
|
-
] })
|
|
3058
|
-
] }),
|
|
3059
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-overflow-y-auto ww-p-4 ww-flex ww-flex-col ww-gap-5", children: [
|
|
3060
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3061
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Acciones R\xE1pidas" }),
|
|
3062
|
-
clientActions && clientActions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3063
|
-
"button",
|
|
3406
|
+
children: [
|
|
3407
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3408
|
+
"div",
|
|
3064
3409
|
{
|
|
3065
|
-
|
|
3066
|
-
|
|
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
|
+
),
|
|
3067
3414
|
children: [
|
|
3068
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-
|
|
3069
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
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
|
+
),
|
|
3441
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3442
|
+
ChatMessages,
|
|
3443
|
+
{
|
|
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
|
|
3456
|
+
}
|
|
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",
|
|
3079
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",
|
|
3080
3514
|
strokeLinecap: "round",
|
|
3081
3515
|
strokeLinejoin: "round",
|
|
3082
|
-
d: "
|
|
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" })
|
|
3083
3517
|
}
|
|
3084
|
-
)
|
|
3085
|
-
|
|
3086
|
-
),
|
|
3087
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-semibold ww-text-foreground ww-truncate", children: action.name })
|
|
3088
|
-
] }),
|
|
3089
|
-
action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-line-clamp-2", children: action.description })
|
|
3090
|
-
]
|
|
3091
|
-
},
|
|
3092
|
-
action.name
|
|
3093
|
-
)) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-italic ww-px-1", children: "No hay acciones disponibles para esta p\xE1gina" })
|
|
3094
|
-
] }),
|
|
3095
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3096
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Sugerencias" }),
|
|
3097
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: getContextQueries(userContext?.pageContext?.url || "").map(
|
|
3098
|
-
(query) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3099
|
-
"button",
|
|
3100
|
-
{
|
|
3101
|
-
onClick: () => chat.send(query.text),
|
|
3102
|
-
className: "ww-w-full ww-flex ww-items-start ww-gap-2 ww-rounded-xl ww-border ww-border-border/60 ww-p-2.5 ww-text-left ww-bg-muted/30 hover:ww-bg-accent/30 hover:ww-border-accent-foreground/20 active:ww-scale-[0.98] ww-transition-all ww-duration-200",
|
|
3103
|
-
children: [
|
|
3104
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3105
|
-
"svg",
|
|
3106
|
-
{
|
|
3107
|
-
className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 ww-shrink-0 ww-mt-0.5",
|
|
3108
|
-
viewBox: "0 0 24 24",
|
|
3109
|
-
fill: "none",
|
|
3110
|
-
stroke: "currentColor",
|
|
3111
|
-
strokeWidth: "2",
|
|
3112
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3113
|
-
"path",
|
|
3518
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3519
|
+
"svg",
|
|
3114
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",
|
|
3115
3526
|
strokeLinecap: "round",
|
|
3116
3527
|
strokeLinejoin: "round",
|
|
3117
|
-
|
|
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" })
|
|
3118
3546
|
}
|
|
3119
3547
|
)
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3548
|
+
]
|
|
3549
|
+
}
|
|
3550
|
+
) }),
|
|
3551
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3552
|
+
ChatInput,
|
|
3553
|
+
{
|
|
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
|
+
} : {}
|
|
3576
|
+
}
|
|
3577
|
+
)
|
|
3578
|
+
]
|
|
3579
|
+
}
|
|
3580
|
+
),
|
|
3581
|
+
showSidebar && /* @__PURE__ */ jsxRuntime.jsx(CommandPanel, { mode: "sidebar", ...commandPanelProps })
|
|
3582
|
+
]
|
|
3583
|
+
}
|
|
3584
|
+
),
|
|
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: [
|
|
3586
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3587
|
+
"a",
|
|
3588
|
+
{
|
|
3589
|
+
href: "https://wallavi.com",
|
|
3590
|
+
target: "_blank",
|
|
3591
|
+
rel: "noopener noreferrer",
|
|
3592
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3593
|
+
children: [
|
|
3594
|
+
/* @__PURE__ */ jsxRuntime.jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
|
|
3595
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
3596
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3597
|
+
" Wallavi"
|
|
3598
|
+
] })
|
|
3599
|
+
]
|
|
3600
|
+
}
|
|
3601
|
+
),
|
|
3602
|
+
footer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3603
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
|
|
3604
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
|
|
3129
3605
|
] })
|
|
3130
3606
|
] })
|
|
3131
3607
|
]
|
|
@@ -3186,6 +3662,10 @@ function useAutoConfig(agentId, enabled) {
|
|
|
3186
3662
|
remote.enableVoice = cfg.enableVoice;
|
|
3187
3663
|
if (cfg.clientActions)
|
|
3188
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;
|
|
3189
3669
|
setResult({
|
|
3190
3670
|
remoteConfig: remote,
|
|
3191
3671
|
bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
|
|
@@ -3220,8 +3700,11 @@ function useSupportChat({
|
|
|
3220
3700
|
inboxToken,
|
|
3221
3701
|
apiBase = "https://app.wallavi.com",
|
|
3222
3702
|
requestHumanLabel = "Hablar con un agente",
|
|
3223
|
-
returnToAiLabel
|
|
3703
|
+
returnToAiLabel,
|
|
3704
|
+
locale
|
|
3224
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;
|
|
3225
3708
|
const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
|
|
3226
3709
|
const STORAGE_KEY = `wlv_support_${inboxToken}`;
|
|
3227
3710
|
const base = apiBase.replace(/\/$/, "");
|
|
@@ -3362,7 +3845,9 @@ function useSupportChat({
|
|
|
3362
3845
|
{
|
|
3363
3846
|
id: `tmp_${Date.now()}`,
|
|
3364
3847
|
role: "customer",
|
|
3365
|
-
content: text || `[${
|
|
3848
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3849
|
+
count: String(attachments?.length ?? 0)
|
|
3850
|
+
})}]`,
|
|
3366
3851
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3367
3852
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3368
3853
|
}
|
|
@@ -3373,7 +3858,9 @@ function useSupportChat({
|
|
|
3373
3858
|
headers: { "Content-Type": "application/json" },
|
|
3374
3859
|
body: JSON.stringify({
|
|
3375
3860
|
inboxToken,
|
|
3376
|
-
message: text || `[${
|
|
3861
|
+
message: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3862
|
+
count: String(attachments.length)
|
|
3863
|
+
})}]`,
|
|
3377
3864
|
attachments
|
|
3378
3865
|
})
|
|
3379
3866
|
});
|
|
@@ -3402,7 +3889,9 @@ function useSupportChat({
|
|
|
3402
3889
|
{
|
|
3403
3890
|
id: `tmp_${Date.now()}`,
|
|
3404
3891
|
role: "customer",
|
|
3405
|
-
content: text || `[${
|
|
3892
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3893
|
+
count: String(attachments.length)
|
|
3894
|
+
})}]`,
|
|
3406
3895
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3407
3896
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3408
3897
|
}
|
|
@@ -3522,17 +4011,17 @@ function useSupportChat({
|
|
|
3522
4011
|
const footerAction = react.useMemo(() => {
|
|
3523
4012
|
if (isAiMode) {
|
|
3524
4013
|
return {
|
|
3525
|
-
label:
|
|
3526
|
-
sublabel: "
|
|
4014
|
+
label: resolvedRequestHumanLabel,
|
|
4015
|
+
sublabel: getWidgetTranslation("requestHumanSublabel", locale),
|
|
3527
4016
|
icon: "human",
|
|
3528
4017
|
onClick: requestHuman,
|
|
3529
4018
|
loading: requestingHuman
|
|
3530
4019
|
};
|
|
3531
4020
|
}
|
|
3532
|
-
if (
|
|
4021
|
+
if (session && resolvedReturnToAiLabel) {
|
|
3533
4022
|
return {
|
|
3534
|
-
label:
|
|
3535
|
-
sublabel: "
|
|
4023
|
+
label: resolvedReturnToAiLabel,
|
|
4024
|
+
sublabel: getWidgetTranslation("returnToAiSublabel", locale),
|
|
3536
4025
|
icon: "ai",
|
|
3537
4026
|
onClick: returnToAi,
|
|
3538
4027
|
loading: returningToAi
|
|
@@ -3542,12 +4031,13 @@ function useSupportChat({
|
|
|
3542
4031
|
}, [
|
|
3543
4032
|
isAiMode,
|
|
3544
4033
|
session,
|
|
3545
|
-
|
|
4034
|
+
resolvedRequestHumanLabel,
|
|
4035
|
+
resolvedReturnToAiLabel,
|
|
3546
4036
|
requestHuman,
|
|
3547
4037
|
requestingHuman,
|
|
3548
|
-
returnToAiLabel,
|
|
3549
4038
|
returnToAi,
|
|
3550
|
-
returningToAi
|
|
4039
|
+
returningToAi,
|
|
4040
|
+
locale
|
|
3551
4041
|
]);
|
|
3552
4042
|
return react.useMemo(
|
|
3553
4043
|
() => ({
|
|
@@ -3610,14 +4100,6 @@ function BubbleWidget({
|
|
|
3610
4100
|
onOpenChange,
|
|
3611
4101
|
...chatProps
|
|
3612
4102
|
}) {
|
|
3613
|
-
const supportBackend = useSupportChat(
|
|
3614
|
-
inboxToken ? {
|
|
3615
|
-
inboxToken,
|
|
3616
|
-
apiBase: supportApiBase,
|
|
3617
|
-
requestHumanLabel,
|
|
3618
|
-
returnToAiLabel
|
|
3619
|
-
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
3620
|
-
);
|
|
3621
4103
|
const isControlled = isOpenProp !== void 0;
|
|
3622
4104
|
const [internalOpen, setInternalOpen] = react.useState(false);
|
|
3623
4105
|
const open = isControlled ? isOpenProp : internalOpen;
|
|
@@ -3669,6 +4151,15 @@ function BubbleWidget({
|
|
|
3669
4151
|
agentName: remote.remoteConfig.agentName ?? chatProps.agentName ?? "Asistente",
|
|
3670
4152
|
source: chatProps.source ?? remote.remoteConfig.source ?? "web"
|
|
3671
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
|
+
);
|
|
3672
4163
|
const setOpenRef = react.useRef(setOpen);
|
|
3673
4164
|
react.useEffect(() => {
|
|
3674
4165
|
setOpenRef.current = setOpen;
|
|
@@ -3826,6 +4317,9 @@ function BubbleWidget({
|
|
|
3826
4317
|
|
|
3827
4318
|
exports.BubbleWidget = BubbleWidget;
|
|
3828
4319
|
exports.ChatWidget = ChatWidget;
|
|
4320
|
+
exports.CommandPanel = CommandPanel;
|
|
4321
|
+
exports.IconTarget = IconTarget;
|
|
4322
|
+
exports.LiveDot = LiveDot;
|
|
3829
4323
|
exports.PlanCard = PlanCard;
|
|
3830
4324
|
exports.ReasoningBlock = ReasoningBlock;
|
|
3831
4325
|
exports.ToolCallBadge = ToolCallBadge;
|