@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.mjs
CHANGED
|
@@ -32,7 +32,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
// src/styles.css
|
|
35
|
-
styleInject(".ww-pointer-events-none {\n pointer-events: none;\n}\n.ww-absolute {\n position: absolute;\n}\n.ww-relative {\n position: relative;\n}\n.ww-inset-0 {\n inset: 0px;\n}\n.ww-inset-4 {\n inset: 1rem;\n}\n.ww-inset-8 {\n inset: 2rem;\n}\n.ww-left-2\\.5 {\n left: 0.625rem;\n}\n.ww-top-1\\/2 {\n top: 50%;\n}\n.ww-z-50 {\n z-index: 50;\n}\n.ww-z-\\[100\\] {\n z-index: 100;\n}\n.ww-mx-0\\.5 {\n margin-left: 0.125rem;\n margin-right: 0.125rem;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n margin-bottom: 3rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n margin-left: 0.125rem;\n}\n.ww-ml-1 {\n margin-left: 0.25rem;\n}\n.ww-mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.ww-mt-1 {\n margin-top: 0.25rem;\n}\n.ww-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");
|
|
35
|
+
styleInject('.ww-pointer-events-none {\n pointer-events: none;\n}\n.ww-absolute {\n position: absolute;\n}\n.ww-relative {\n position: relative;\n}\n.ww-inset-0 {\n inset: 0px;\n}\n.ww-inset-4 {\n inset: 1rem;\n}\n.ww-inset-8 {\n inset: 2rem;\n}\n.ww-left-2\\.5 {\n left: 0.625rem;\n}\n.ww-top-1\\/2 {\n top: 50%;\n}\n.ww-z-50 {\n z-index: 50;\n}\n.ww-z-\\[100\\] {\n z-index: 100;\n}\n.ww-mx-0\\.5 {\n margin-left: 0.125rem;\n margin-right: 0.125rem;\n}\n.ww-mb-1 {\n margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n margin-bottom: 3rem;\n}\n.ww-mb-2 {\n margin-bottom: 0.5rem;\n}\n.ww-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');
|
|
36
36
|
var twMerge = extendTailwindMerge({ prefix: "ww-" });
|
|
37
37
|
var cn = (...inputs) => twMerge(clsx(inputs));
|
|
38
38
|
async function getFreshClerkToken() {
|
|
@@ -1120,6 +1120,118 @@ function MinimizeIcon() {
|
|
|
1120
1120
|
}
|
|
1121
1121
|
) });
|
|
1122
1122
|
}
|
|
1123
|
+
|
|
1124
|
+
// src/lib/translations.ts
|
|
1125
|
+
var WIDGET_TRANSLATIONS = {
|
|
1126
|
+
en: {
|
|
1127
|
+
quickActions: "Quick Actions",
|
|
1128
|
+
documentation: "Documentation",
|
|
1129
|
+
askAbout: "Ask about",
|
|
1130
|
+
poweredBy: "Powered by",
|
|
1131
|
+
sendMessage: "Send a message\u2026",
|
|
1132
|
+
search: "Search\u2026",
|
|
1133
|
+
generalContext: "General Context",
|
|
1134
|
+
defaultGreeting: "Hello! How can I help you today?",
|
|
1135
|
+
connecting: "Connecting...",
|
|
1136
|
+
listening: "Listening...",
|
|
1137
|
+
speaking: "Speaking...",
|
|
1138
|
+
ready: "Ready",
|
|
1139
|
+
aiAssistant: "AI Assistant",
|
|
1140
|
+
minimize: "Minimize",
|
|
1141
|
+
expand: "Expand",
|
|
1142
|
+
voiceCall: "Voice Call",
|
|
1143
|
+
newConversation: "New conversation",
|
|
1144
|
+
close: "Close",
|
|
1145
|
+
dropFiles: "Drop files to attach",
|
|
1146
|
+
talkingToAgent: "Talking to an agent",
|
|
1147
|
+
muteMic: "Mute microphone",
|
|
1148
|
+
unmuteMic: "Unmute microphone",
|
|
1149
|
+
disconnect: "Disconnect",
|
|
1150
|
+
calling: "Calling",
|
|
1151
|
+
called: "Called",
|
|
1152
|
+
failed: "Failed",
|
|
1153
|
+
reasoning: "Reasoning",
|
|
1154
|
+
noResults: "No results",
|
|
1155
|
+
proceed: "Proceed",
|
|
1156
|
+
proceedMessage: "yes, proceed",
|
|
1157
|
+
cancel: "Cancel",
|
|
1158
|
+
cancelMessage: "cancel",
|
|
1159
|
+
regenerateResponse: "Regenerate response",
|
|
1160
|
+
removeContext: "Remove context",
|
|
1161
|
+
stopRecording: "Stop recording",
|
|
1162
|
+
recordVoiceMessage: "Record voice message",
|
|
1163
|
+
attachFile: "Attach file (CSV, image\u2026)",
|
|
1164
|
+
requestHuman: "Talk to an agent",
|
|
1165
|
+
requestHumanSublabel: "We'll connect you with an available agent",
|
|
1166
|
+
returnToAi: "Return to AI chat",
|
|
1167
|
+
returnToAiSublabel: "Instant response with artificial intelligence",
|
|
1168
|
+
filesCount: "{count} file(s)",
|
|
1169
|
+
tellMeAbout: "Tell me about {name}",
|
|
1170
|
+
tellMeMoreAbout: "Tell me more about: {name}",
|
|
1171
|
+
whatDoYouKnowAbout: "What do you know about {name}?",
|
|
1172
|
+
uploadFailed: "Upload failed",
|
|
1173
|
+
remove: "Remove"
|
|
1174
|
+
},
|
|
1175
|
+
es: {
|
|
1176
|
+
quickActions: "Acciones r\xE1pidas",
|
|
1177
|
+
documentation: "Documentaci\xF3n",
|
|
1178
|
+
askAbout: "Preguntas frecuentes",
|
|
1179
|
+
poweredBy: "Powered by",
|
|
1180
|
+
sendMessage: "Enviar un mensaje...",
|
|
1181
|
+
search: "Buscar...",
|
|
1182
|
+
generalContext: "Contexto general",
|
|
1183
|
+
defaultGreeting: "\xA1Hola! \xBFC\xF3mo puedo ayudarte hoy?",
|
|
1184
|
+
connecting: "Conectando...",
|
|
1185
|
+
listening: "Escuchando...",
|
|
1186
|
+
speaking: "Hablando...",
|
|
1187
|
+
ready: "Listo",
|
|
1188
|
+
aiAssistant: "Asistente de IA",
|
|
1189
|
+
minimize: "Minimizar",
|
|
1190
|
+
expand: "Expandir",
|
|
1191
|
+
voiceCall: "Llamada de voz",
|
|
1192
|
+
newConversation: "Nueva conversaci\xF3n",
|
|
1193
|
+
close: "Cerrar",
|
|
1194
|
+
dropFiles: "Arrastra archivos para adjuntar",
|
|
1195
|
+
talkingToAgent: "Hablando con un agente",
|
|
1196
|
+
muteMic: "Silenciar micr\xF3fono",
|
|
1197
|
+
unmuteMic: "Activar micr\xF3fono",
|
|
1198
|
+
disconnect: "Desconectar",
|
|
1199
|
+
calling: "Llamando",
|
|
1200
|
+
called: "Llamado",
|
|
1201
|
+
failed: "Fall\xF3",
|
|
1202
|
+
reasoning: "Razonamiento",
|
|
1203
|
+
noResults: "Sin resultados",
|
|
1204
|
+
proceed: "Proceder",
|
|
1205
|
+
proceedMessage: "s\xED, proceder",
|
|
1206
|
+
cancel: "Cancelar",
|
|
1207
|
+
cancelMessage: "cancelar",
|
|
1208
|
+
regenerateResponse: "Regenerar respuesta",
|
|
1209
|
+
removeContext: "Eliminar contexto",
|
|
1210
|
+
stopRecording: "Detener grabaci\xF3n",
|
|
1211
|
+
recordVoiceMessage: "Grabar mensaje de voz",
|
|
1212
|
+
attachFile: "Adjuntar archivo (CSV, imagen...)",
|
|
1213
|
+
requestHuman: "Hablar con un agente",
|
|
1214
|
+
requestHumanSublabel: "Te conectamos con un agente disponible",
|
|
1215
|
+
returnToAi: "Volver a chatear con la IA",
|
|
1216
|
+
returnToAiSublabel: "Respuesta instant\xE1nea con inteligencia artificial",
|
|
1217
|
+
filesCount: "{count} archivo(s)",
|
|
1218
|
+
tellMeAbout: "H\xE1blame de {name}",
|
|
1219
|
+
tellMeMoreAbout: "Cu\xE9ntame m\xE1s sobre: {name}",
|
|
1220
|
+
whatDoYouKnowAbout: "\xBFQu\xE9 sabes sobre {name}?",
|
|
1221
|
+
uploadFailed: "Error al subir",
|
|
1222
|
+
remove: "Quitar"
|
|
1223
|
+
}
|
|
1224
|
+
};
|
|
1225
|
+
function getWidgetTranslation(key, locale, replacements) {
|
|
1226
|
+
const lang = locale === "es" ? "es" : "en";
|
|
1227
|
+
let text = WIDGET_TRANSLATIONS[lang][key];
|
|
1228
|
+
if (replacements) {
|
|
1229
|
+
Object.entries(replacements).forEach(([k, v]) => {
|
|
1230
|
+
text = text.replace(`{${k}}`, v);
|
|
1231
|
+
});
|
|
1232
|
+
}
|
|
1233
|
+
return text;
|
|
1234
|
+
}
|
|
1123
1235
|
var Avatar = ({
|
|
1124
1236
|
style,
|
|
1125
1237
|
...p
|
|
@@ -1182,7 +1294,8 @@ function ChatHeader({
|
|
|
1182
1294
|
onExpand,
|
|
1183
1295
|
expanded,
|
|
1184
1296
|
onCall,
|
|
1185
|
-
isCallLoading
|
|
1297
|
+
isCallLoading,
|
|
1298
|
+
locale
|
|
1186
1299
|
}) {
|
|
1187
1300
|
return /* @__PURE__ */ jsxs(
|
|
1188
1301
|
"header",
|
|
@@ -1215,7 +1328,7 @@ function ChatHeader({
|
|
|
1215
1328
|
),
|
|
1216
1329
|
/* @__PURE__ */ jsxs("div", { className: "ww-min-w-0", children: [
|
|
1217
1330
|
/* @__PURE__ */ jsx("p", { className: "ww-font-semibold ww-text-sm ww-truncate ww-leading-tight", children: title }),
|
|
1218
|
-
/* @__PURE__ */ jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: "
|
|
1331
|
+
/* @__PURE__ */ jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: getWidgetTranslation("aiAssistant", locale) })
|
|
1219
1332
|
] })
|
|
1220
1333
|
] }),
|
|
1221
1334
|
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-1", children: [
|
|
@@ -1224,7 +1337,7 @@ function ChatHeader({
|
|
|
1224
1337
|
{
|
|
1225
1338
|
onClick: onExpand,
|
|
1226
1339
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1227
|
-
title: expanded ? "
|
|
1340
|
+
title: expanded ? getWidgetTranslation("minimize", locale) : getWidgetTranslation("expand", locale),
|
|
1228
1341
|
children: expanded ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {})
|
|
1229
1342
|
}
|
|
1230
1343
|
),
|
|
@@ -1234,7 +1347,7 @@ function ChatHeader({
|
|
|
1234
1347
|
onClick: onCall,
|
|
1235
1348
|
disabled: isCallLoading,
|
|
1236
1349
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10 disabled:ww-opacity-50",
|
|
1237
|
-
title: "
|
|
1350
|
+
title: getWidgetTranslation("voiceCall", locale),
|
|
1238
1351
|
children: isCallLoading ? /* @__PURE__ */ jsxs(
|
|
1239
1352
|
"svg",
|
|
1240
1353
|
{
|
|
@@ -1278,7 +1391,7 @@ function ChatHeader({
|
|
|
1278
1391
|
{
|
|
1279
1392
|
onClick: onReset,
|
|
1280
1393
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1281
|
-
title: "
|
|
1394
|
+
title: getWidgetTranslation("newConversation", locale),
|
|
1282
1395
|
children: /* @__PURE__ */ jsx(
|
|
1283
1396
|
RotateCcw,
|
|
1284
1397
|
{
|
|
@@ -1293,7 +1406,7 @@ function ChatHeader({
|
|
|
1293
1406
|
{
|
|
1294
1407
|
onClick: onClose,
|
|
1295
1408
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1296
|
-
title: "
|
|
1409
|
+
title: getWidgetTranslation("close", locale),
|
|
1297
1410
|
children: /* @__PURE__ */ jsx(X, { className: "ww-h-3.5 ww-w-3.5", style: { color: headerText } })
|
|
1298
1411
|
}
|
|
1299
1412
|
)
|
|
@@ -1335,7 +1448,8 @@ function ChipLeading({ a }) {
|
|
|
1335
1448
|
}
|
|
1336
1449
|
function AttachmentChips({
|
|
1337
1450
|
attachments,
|
|
1338
|
-
onRemove
|
|
1451
|
+
onRemove,
|
|
1452
|
+
locale
|
|
1339
1453
|
}) {
|
|
1340
1454
|
if (attachments.length === 0) return null;
|
|
1341
1455
|
return /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5 ww-px-1 ww-pb-1.5", children: attachments.map((a) => /* @__PURE__ */ jsxs(
|
|
@@ -1347,7 +1461,7 @@ function AttachmentChips({
|
|
|
1347
1461
|
),
|
|
1348
1462
|
children: [
|
|
1349
1463
|
/* @__PURE__ */ jsx(ChipLeading, { a }),
|
|
1350
|
-
/* @__PURE__ */ jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? "
|
|
1464
|
+
/* @__PURE__ */ jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? getWidgetTranslation("uploadFailed", locale) : a.name }),
|
|
1351
1465
|
a.status === "ready" && /* @__PURE__ */ jsx("span", { className: "ww-shrink-0 ww-text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
|
|
1352
1466
|
/* @__PURE__ */ jsx(
|
|
1353
1467
|
"button",
|
|
@@ -1355,7 +1469,7 @@ function AttachmentChips({
|
|
|
1355
1469
|
type: "button",
|
|
1356
1470
|
onClick: () => onRemove(a.id),
|
|
1357
1471
|
className: "ww-shrink-0 ww-rounded-full ww-p-0.5 hover:ww-bg-foreground/10 ww-transition-colors ww-ml-0.5",
|
|
1358
|
-
title: "
|
|
1472
|
+
title: getWidgetTranslation("remove", locale),
|
|
1359
1473
|
children: /* @__PURE__ */ jsx(X, { className: "ww-h-2.5 ww-w-2.5" })
|
|
1360
1474
|
}
|
|
1361
1475
|
)
|
|
@@ -1435,7 +1549,8 @@ function PlanStepIcon({ status }) {
|
|
|
1435
1549
|
function PlanCard({
|
|
1436
1550
|
part,
|
|
1437
1551
|
onSend,
|
|
1438
|
-
disabled
|
|
1552
|
+
disabled,
|
|
1553
|
+
locale
|
|
1439
1554
|
}) {
|
|
1440
1555
|
const successCount = part.steps.filter((s) => s.status === "success").length;
|
|
1441
1556
|
const hasExecuting = part.steps.some((s) => s.status === "executing");
|
|
@@ -1487,7 +1602,7 @@ function PlanCard({
|
|
|
1487
1602
|
/* @__PURE__ */ jsxs(
|
|
1488
1603
|
"button",
|
|
1489
1604
|
{
|
|
1490
|
-
onClick: () => onSend("
|
|
1605
|
+
onClick: () => onSend(getWidgetTranslation("proceedMessage", locale)),
|
|
1491
1606
|
disabled,
|
|
1492
1607
|
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",
|
|
1493
1608
|
style: {
|
|
@@ -1496,19 +1611,19 @@ function PlanCard({
|
|
|
1496
1611
|
},
|
|
1497
1612
|
children: [
|
|
1498
1613
|
/* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1499
|
-
"
|
|
1614
|
+
getWidgetTranslation("proceed", locale)
|
|
1500
1615
|
]
|
|
1501
1616
|
}
|
|
1502
1617
|
),
|
|
1503
1618
|
/* @__PURE__ */ jsxs(
|
|
1504
1619
|
"button",
|
|
1505
1620
|
{
|
|
1506
|
-
onClick: () => onSend("
|
|
1621
|
+
onClick: () => onSend(getWidgetTranslation("cancelMessage", locale)),
|
|
1507
1622
|
disabled,
|
|
1508
1623
|
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",
|
|
1509
1624
|
children: [
|
|
1510
1625
|
/* @__PURE__ */ jsx(X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1511
|
-
"
|
|
1626
|
+
getWidgetTranslation("cancel", locale)
|
|
1512
1627
|
]
|
|
1513
1628
|
}
|
|
1514
1629
|
)
|
|
@@ -1552,19 +1667,25 @@ function ThinkingDots() {
|
|
|
1552
1667
|
)
|
|
1553
1668
|
] });
|
|
1554
1669
|
}
|
|
1555
|
-
function ToolCallBadge({
|
|
1670
|
+
function ToolCallBadge({
|
|
1671
|
+
part,
|
|
1672
|
+
locale
|
|
1673
|
+
}) {
|
|
1556
1674
|
return /* @__PURE__ */ 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: [
|
|
1557
1675
|
part.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin" }),
|
|
1558
1676
|
part.status === "done" && /* @__PURE__ */ jsx(CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" }),
|
|
1559
1677
|
part.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" }),
|
|
1560
1678
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
1561
|
-
part.status === "running" ? "
|
|
1679
|
+
part.status === "running" ? getWidgetTranslation("calling", locale) : part.status === "done" ? getWidgetTranslation("called", locale) : getWidgetTranslation("failed", locale),
|
|
1562
1680
|
" ",
|
|
1563
1681
|
/* @__PURE__ */ jsx("span", { className: "ww-font-medium ww-text-foreground", children: formatToolName(part.toolName) })
|
|
1564
1682
|
] })
|
|
1565
1683
|
] });
|
|
1566
1684
|
}
|
|
1567
|
-
function ReasoningBlock({
|
|
1685
|
+
function ReasoningBlock({
|
|
1686
|
+
text,
|
|
1687
|
+
locale
|
|
1688
|
+
}) {
|
|
1568
1689
|
const [open, setOpen] = useState(false);
|
|
1569
1690
|
return /* @__PURE__ */ jsxs("div", { className: "ww-mb-1", children: [
|
|
1570
1691
|
/* @__PURE__ */ jsxs(
|
|
@@ -1574,7 +1695,7 @@ function ReasoningBlock({ text }) {
|
|
|
1574
1695
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-xs ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
1575
1696
|
children: [
|
|
1576
1697
|
/* @__PURE__ */ jsx(Zap, { className: "ww-h-3 ww-w-3" }),
|
|
1577
|
-
/* @__PURE__ */ jsx("span", { children: "
|
|
1698
|
+
/* @__PURE__ */ jsx("span", { children: getWidgetTranslation("reasoning", locale) }),
|
|
1578
1699
|
/* @__PURE__ */ jsx(
|
|
1579
1700
|
ChevronDown,
|
|
1580
1701
|
{
|
|
@@ -1593,7 +1714,8 @@ function ReasoningBlock({ text }) {
|
|
|
1593
1714
|
function PickerSelector({
|
|
1594
1715
|
part,
|
|
1595
1716
|
disabled,
|
|
1596
|
-
onSelect
|
|
1717
|
+
onSelect,
|
|
1718
|
+
locale
|
|
1597
1719
|
}) {
|
|
1598
1720
|
const count = part.options.length;
|
|
1599
1721
|
const mode = count <= 6 ? "pills" : count <= 20 ? "grid" : "list";
|
|
@@ -1625,7 +1747,7 @@ function PickerSelector({
|
|
|
1625
1747
|
type: "text",
|
|
1626
1748
|
value: query,
|
|
1627
1749
|
onChange: (e) => setQuery(e.target.value),
|
|
1628
|
-
placeholder: "
|
|
1750
|
+
placeholder: getWidgetTranslation("search", locale),
|
|
1629
1751
|
disabled: disabled || isConsumed,
|
|
1630
1752
|
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"
|
|
1631
1753
|
}
|
|
@@ -1674,7 +1796,7 @@ function PickerSelector({
|
|
|
1674
1796
|
);
|
|
1675
1797
|
}) }),
|
|
1676
1798
|
mode === "list" && /* @__PURE__ */ 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: [
|
|
1677
|
-
filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: "
|
|
1799
|
+
filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: getWidgetTranslation("noResults", locale) }),
|
|
1678
1800
|
filtered.map((opt, i) => {
|
|
1679
1801
|
const sel = part.selectedValue === opt.value;
|
|
1680
1802
|
const faded = isConsumed && !sel;
|
|
@@ -1931,10 +2053,11 @@ function MessageBubble({
|
|
|
1931
2053
|
userColor,
|
|
1932
2054
|
agentName,
|
|
1933
2055
|
profilePicture,
|
|
1934
|
-
isStreaming,
|
|
2056
|
+
isStreaming = false,
|
|
1935
2057
|
showThinking = true,
|
|
1936
2058
|
onPickerSelect,
|
|
1937
|
-
onSend
|
|
2059
|
+
onSend,
|
|
2060
|
+
locale
|
|
1938
2061
|
}) {
|
|
1939
2062
|
const isUser = message.role === "user";
|
|
1940
2063
|
const textPart = message.parts.find((p) => p.type === "text");
|
|
@@ -1995,24 +2118,26 @@ function MessageBubble({
|
|
|
1995
2118
|
}
|
|
1996
2119
|
),
|
|
1997
2120
|
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
|
|
1998
|
-
showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
|
|
2121
|
+
showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text, locale }),
|
|
1999
2122
|
planParts.map((p) => /* @__PURE__ */ jsx(
|
|
2000
2123
|
PlanCard,
|
|
2001
2124
|
{
|
|
2002
2125
|
part: p,
|
|
2003
2126
|
onSend,
|
|
2004
|
-
disabled: isStreaming
|
|
2127
|
+
disabled: isStreaming,
|
|
2128
|
+
locale
|
|
2005
2129
|
},
|
|
2006
2130
|
p.planId
|
|
2007
2131
|
)),
|
|
2008
|
-
visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
|
|
2132
|
+
visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t, locale }, t.toolCallId)),
|
|
2009
2133
|
pickerParts.map((p) => /* @__PURE__ */ jsx(
|
|
2010
2134
|
PickerSelector,
|
|
2011
2135
|
{
|
|
2012
2136
|
part: p,
|
|
2013
2137
|
disabled: isStreaming ?? false,
|
|
2014
2138
|
onSelect: onPickerSelect ?? (() => {
|
|
2015
|
-
})
|
|
2139
|
+
}),
|
|
2140
|
+
locale
|
|
2016
2141
|
},
|
|
2017
2142
|
p.pickerId
|
|
2018
2143
|
)),
|
|
@@ -2060,7 +2185,9 @@ function ChatMessages({
|
|
|
2060
2185
|
suggestedMessages = [],
|
|
2061
2186
|
showThinking = true,
|
|
2062
2187
|
onSuggest,
|
|
2063
|
-
onPickerSelect
|
|
2188
|
+
onPickerSelect,
|
|
2189
|
+
commandPanel,
|
|
2190
|
+
locale
|
|
2064
2191
|
}) {
|
|
2065
2192
|
const bottomRef = useRef(null);
|
|
2066
2193
|
const greetText = initialMessages[0];
|
|
@@ -2073,6 +2200,7 @@ function ChatMessages({
|
|
|
2073
2200
|
/* @__PURE__ */ jsx(Avatar3, { className: "ww-h-7 ww-w-7 ww-shrink-0 ww-mt-0.5 ww-border", children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback3, { className: "ww-text-[10px] ww-font-semibold ww-bg-primary ww-text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
|
|
2074
2201
|
/* @__PURE__ */ 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 })
|
|
2075
2202
|
] }),
|
|
2203
|
+
showGreeting && commandPanel,
|
|
2076
2204
|
showGreeting && /* @__PURE__ */ jsx("div", { className: "ww-flex-1" }),
|
|
2077
2205
|
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-4 ww-px-4 ww-py-4", children: messages.map((msg, i) => /* @__PURE__ */ jsx(
|
|
2078
2206
|
MessageBubble,
|
|
@@ -2084,7 +2212,8 @@ function ChatMessages({
|
|
|
2084
2212
|
isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
|
|
2085
2213
|
showThinking,
|
|
2086
2214
|
onPickerSelect,
|
|
2087
|
-
onSend: i === messages.length - 1 ? onSuggest : void 0
|
|
2215
|
+
onSend: i === messages.length - 1 ? onSuggest : void 0,
|
|
2216
|
+
locale
|
|
2088
2217
|
},
|
|
2089
2218
|
msg.id
|
|
2090
2219
|
)) }),
|
|
@@ -2173,16 +2302,37 @@ var serializeEditor = (editor) => {
|
|
|
2173
2302
|
var createChipElement = (name, type, id, accentColor) => {
|
|
2174
2303
|
const span = document.createElement("span");
|
|
2175
2304
|
span.setAttribute("contenteditable", "false");
|
|
2176
|
-
span.className = "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/
|
|
2305
|
+
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";
|
|
2177
2306
|
span.style.setProperty("--primary", accentColor);
|
|
2178
2307
|
span.setAttribute("data-wlv-context-id", id);
|
|
2179
2308
|
span.setAttribute("data-wlv-context-type", type);
|
|
2180
2309
|
span.setAttribute("data-wlv-context-name", name);
|
|
2181
|
-
const
|
|
2182
|
-
|
|
2183
|
-
|
|
2310
|
+
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
2311
|
+
icon.setAttribute("viewBox", "0 0 24 24");
|
|
2312
|
+
icon.setAttribute("fill", "none");
|
|
2313
|
+
icon.setAttribute("stroke", "currentColor");
|
|
2314
|
+
icon.setAttribute("stroke-width", "2");
|
|
2315
|
+
icon.setAttribute("stroke-linecap", "round");
|
|
2316
|
+
icon.setAttribute("stroke-linejoin", "round");
|
|
2317
|
+
icon.classList.add("ww-w-3", "ww-h-3", "ww-shrink-0", "ww-opacity-70");
|
|
2318
|
+
const c1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2319
|
+
c1.setAttribute("cx", "12");
|
|
2320
|
+
c1.setAttribute("cy", "12");
|
|
2321
|
+
c1.setAttribute("r", "10");
|
|
2322
|
+
const c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2323
|
+
c2.setAttribute("cx", "12");
|
|
2324
|
+
c2.setAttribute("cy", "12");
|
|
2325
|
+
c2.setAttribute("r", "6");
|
|
2326
|
+
const c3 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
|
2327
|
+
c3.setAttribute("cx", "12");
|
|
2328
|
+
c3.setAttribute("cy", "12");
|
|
2329
|
+
c3.setAttribute("r", "2");
|
|
2330
|
+
icon.appendChild(c1);
|
|
2331
|
+
icon.appendChild(c2);
|
|
2332
|
+
icon.appendChild(c3);
|
|
2333
|
+
span.appendChild(icon);
|
|
2184
2334
|
const typeSpan = document.createElement("span");
|
|
2185
|
-
typeSpan.className = "ww-opacity-
|
|
2335
|
+
typeSpan.className = "ww-opacity-60 ww-uppercase ww-text-[8px] ww-tracking-[0.06em] ww-font-bold";
|
|
2186
2336
|
typeSpan.textContent = `${type}:`;
|
|
2187
2337
|
span.appendChild(typeSpan);
|
|
2188
2338
|
const nameSpan = document.createElement("span");
|
|
@@ -2190,7 +2340,7 @@ var createChipElement = (name, type, id, accentColor) => {
|
|
|
2190
2340
|
span.appendChild(nameSpan);
|
|
2191
2341
|
const button = document.createElement("button");
|
|
2192
2342
|
button.type = "button";
|
|
2193
|
-
button.className = "ww-ml-1 ww-text-primary/
|
|
2343
|
+
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]";
|
|
2194
2344
|
button.textContent = "\xD7";
|
|
2195
2345
|
button.onclick = () => {
|
|
2196
2346
|
span.remove();
|
|
@@ -2216,7 +2366,8 @@ function ChatInput({
|
|
|
2216
2366
|
onRemoveAttachment,
|
|
2217
2367
|
isUploading = false,
|
|
2218
2368
|
selectedContext,
|
|
2219
|
-
onClearContext
|
|
2369
|
+
onClearContext,
|
|
2370
|
+
locale
|
|
2220
2371
|
}) {
|
|
2221
2372
|
const hasVoice = onVoiceStart !== void 0;
|
|
2222
2373
|
const hasAttachments = onAttach !== void 0;
|
|
@@ -2335,25 +2486,41 @@ function ChatInput({
|
|
|
2335
2486
|
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",
|
|
2336
2487
|
children: [
|
|
2337
2488
|
/* @__PURE__ */ jsx(RotateCcw, { className: "ww-h-3 ww-w-3" }),
|
|
2338
|
-
"
|
|
2489
|
+
getWidgetTranslation("regenerateResponse", locale)
|
|
2339
2490
|
]
|
|
2340
2491
|
}
|
|
2341
2492
|
),
|
|
2342
2493
|
/* @__PURE__ */ 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: [
|
|
2343
|
-
selectedContext && /* @__PURE__ */ jsx("div", { className: "ww-px-3 ww-pt-2.5 ww-flex ww-items-center", children: /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-
|
|
2344
|
-
/* @__PURE__ */
|
|
2345
|
-
|
|
2494
|
+
selectedContext && /* @__PURE__ */ jsx("div", { className: "ww-px-3 ww-pt-2.5 ww-flex ww-items-center", children: /* @__PURE__ */ 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: [
|
|
2495
|
+
/* @__PURE__ */ jsxs(
|
|
2496
|
+
"svg",
|
|
2497
|
+
{
|
|
2498
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-opacity-60",
|
|
2499
|
+
viewBox: "0 0 24 24",
|
|
2500
|
+
fill: "none",
|
|
2501
|
+
stroke: "currentColor",
|
|
2502
|
+
strokeWidth: "2",
|
|
2503
|
+
strokeLinecap: "round",
|
|
2504
|
+
strokeLinejoin: "round",
|
|
2505
|
+
children: [
|
|
2506
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2507
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2508
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2509
|
+
]
|
|
2510
|
+
}
|
|
2511
|
+
),
|
|
2512
|
+
/* @__PURE__ */ jsxs("span", { className: "ww-opacity-55 ww-uppercase ww-text-[9px] ww-tracking-[0.06em] ww-font-bold", children: [
|
|
2346
2513
|
selectedContext.type,
|
|
2347
2514
|
":"
|
|
2348
2515
|
] }),
|
|
2349
|
-
/* @__PURE__ */ jsx("span", { children: selectedContext.name }),
|
|
2516
|
+
/* @__PURE__ */ jsx("span", { className: "ww-font-semibold", children: selectedContext.name }),
|
|
2350
2517
|
/* @__PURE__ */ jsx(
|
|
2351
2518
|
"button",
|
|
2352
2519
|
{
|
|
2353
2520
|
type: "button",
|
|
2354
2521
|
onClick: onClearContext,
|
|
2355
|
-
className: "ww-ml-
|
|
2356
|
-
title: "
|
|
2522
|
+
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",
|
|
2523
|
+
title: getWidgetTranslation("removeContext", locale),
|
|
2357
2524
|
children: /* @__PURE__ */ jsxs(
|
|
2358
2525
|
"svg",
|
|
2359
2526
|
{
|
|
@@ -2377,7 +2544,8 @@ function ChatInput({
|
|
|
2377
2544
|
AttachmentChips,
|
|
2378
2545
|
{
|
|
2379
2546
|
attachments,
|
|
2380
|
-
onRemove: (id) => onRemoveAttachment?.(id)
|
|
2547
|
+
onRemove: (id) => onRemoveAttachment?.(id),
|
|
2548
|
+
locale
|
|
2381
2549
|
}
|
|
2382
2550
|
) }),
|
|
2383
2551
|
hasAttachments && /* @__PURE__ */ jsx(
|
|
@@ -2404,7 +2572,9 @@ function ChatInput({
|
|
|
2404
2572
|
ref: textareaRef,
|
|
2405
2573
|
contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
|
|
2406
2574
|
className: "ww-flex-1 ww-min-h-[22px] ww-max-h-32 ww-overflow-y-auto ww-py-1 ww-outline-none ww-text-sm ww-leading-relaxed ww-bg-transparent",
|
|
2407
|
-
...{
|
|
2575
|
+
...{
|
|
2576
|
+
placeholder: placeholder || getWidgetTranslation("sendMessage", locale)
|
|
2577
|
+
},
|
|
2408
2578
|
onKeyDown: handleKeyDown,
|
|
2409
2579
|
onInput: handleInput,
|
|
2410
2580
|
onPaste: handlePaste,
|
|
@@ -2417,7 +2587,7 @@ function ChatInput({
|
|
|
2417
2587
|
type: "button",
|
|
2418
2588
|
onClick: voiceState === "recording" ? onVoiceStop : onVoiceStart,
|
|
2419
2589
|
disabled: streaming || voiceState === "transcribing",
|
|
2420
|
-
title: voiceState === "recording" ? "
|
|
2590
|
+
title: voiceState === "recording" ? getWidgetTranslation("stopRecording", locale) : getWidgetTranslation("recordVoiceMessage", locale),
|
|
2421
2591
|
className: cn3(
|
|
2422
2592
|
"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",
|
|
2423
2593
|
voiceState === "recording" && "ww-animate-pulse",
|
|
@@ -2434,7 +2604,7 @@ function ChatInput({
|
|
|
2434
2604
|
type: "button",
|
|
2435
2605
|
onClick: () => fileInputRef.current?.click(),
|
|
2436
2606
|
disabled: streaming || isUploading,
|
|
2437
|
-
title: "
|
|
2607
|
+
title: getWidgetTranslation("attachFile", locale),
|
|
2438
2608
|
className: cn3(
|
|
2439
2609
|
"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",
|
|
2440
2610
|
"ww-text-muted-foreground hover:ww-text-foreground",
|
|
@@ -2463,7 +2633,10 @@ function ChatInput({
|
|
|
2463
2633
|
] })
|
|
2464
2634
|
] });
|
|
2465
2635
|
}
|
|
2466
|
-
function CustomControlBar({
|
|
2636
|
+
function CustomControlBar({
|
|
2637
|
+
onClose,
|
|
2638
|
+
locale
|
|
2639
|
+
}) {
|
|
2467
2640
|
const { localParticipant, isMicrophoneEnabled } = useLocalParticipant();
|
|
2468
2641
|
const room = useRoomContext();
|
|
2469
2642
|
const toggleMic = async () => {
|
|
@@ -2483,7 +2656,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2483
2656
|
{
|
|
2484
2657
|
onClick: toggleMic,
|
|
2485
2658
|
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"}`,
|
|
2486
|
-
title: isMicrophoneEnabled ? "
|
|
2659
|
+
title: isMicrophoneEnabled ? getWidgetTranslation("muteMic", locale) : getWidgetTranslation("unmuteMic", locale),
|
|
2487
2660
|
children: isMicrophoneEnabled ? /* @__PURE__ */ jsx(Mic, { className: "ww-w-6 ww-h-6" }) : /* @__PURE__ */ jsx(MicOff, { className: "ww-w-6 ww-h-6" })
|
|
2488
2661
|
}
|
|
2489
2662
|
),
|
|
@@ -2493,7 +2666,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2493
2666
|
onClick: disconnect,
|
|
2494
2667
|
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",
|
|
2495
2668
|
style: { backgroundColor: "#ef4444" },
|
|
2496
|
-
title: "
|
|
2669
|
+
title: getWidgetTranslation("disconnect", locale),
|
|
2497
2670
|
children: /* @__PURE__ */ jsx(PhoneOff, { className: "ww-w-6 ww-h-6" })
|
|
2498
2671
|
}
|
|
2499
2672
|
)
|
|
@@ -2556,17 +2729,25 @@ function ChatGPTOrb() {
|
|
|
2556
2729
|
)
|
|
2557
2730
|
] });
|
|
2558
2731
|
}
|
|
2559
|
-
function AssistantVisualizer({
|
|
2732
|
+
function AssistantVisualizer({
|
|
2733
|
+
onClose,
|
|
2734
|
+
locale
|
|
2735
|
+
}) {
|
|
2560
2736
|
const { state } = useVoiceAssistant();
|
|
2561
2737
|
return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-items-center ww-justify-center ww-h-full ww-w-full", children: [
|
|
2562
2738
|
/* @__PURE__ */ jsx("div", { className: "ww-flex-1 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsx(ChatGPTOrb, {}) }),
|
|
2563
2739
|
/* @__PURE__ */ jsxs("div", { className: "ww-h-40 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-8 ww-mb-12", children: [
|
|
2564
|
-
/* @__PURE__ */ jsx("div", { className: "ww-text-sm ww-font-medium ww-tracking-wide ww-text-foreground/60 ww-uppercase", children: state === "connecting" || state === "initializing" ? "
|
|
2565
|
-
/* @__PURE__ */ jsx(CustomControlBar, { onClose })
|
|
2740
|
+
/* @__PURE__ */ 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) }),
|
|
2741
|
+
/* @__PURE__ */ jsx(CustomControlBar, { onClose, locale })
|
|
2566
2742
|
] })
|
|
2567
2743
|
] });
|
|
2568
2744
|
}
|
|
2569
|
-
function VoiceOverlay({
|
|
2745
|
+
function VoiceOverlay({
|
|
2746
|
+
token,
|
|
2747
|
+
serverUrl,
|
|
2748
|
+
onClose,
|
|
2749
|
+
locale
|
|
2750
|
+
}) {
|
|
2570
2751
|
return /* @__PURE__ */ 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__ */ jsxs(
|
|
2571
2752
|
LiveKitRoom,
|
|
2572
2753
|
{
|
|
@@ -2578,78 +2759,394 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
|
|
|
2578
2759
|
className: "ww-flex-1",
|
|
2579
2760
|
children: [
|
|
2580
2761
|
/* @__PURE__ */ jsx(RoomAudioRenderer, {}),
|
|
2581
|
-
/* @__PURE__ */ jsx(AssistantVisualizer, { onClose })
|
|
2762
|
+
/* @__PURE__ */ jsx(AssistantVisualizer, { onClose, locale })
|
|
2582
2763
|
]
|
|
2583
2764
|
}
|
|
2584
2765
|
) });
|
|
2585
2766
|
}
|
|
2586
|
-
function
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2767
|
+
function SvgIcon({
|
|
2768
|
+
className,
|
|
2769
|
+
strokeWidth = "1.8",
|
|
2770
|
+
children
|
|
2771
|
+
}) {
|
|
2772
|
+
return /* @__PURE__ */ jsx(
|
|
2773
|
+
"svg",
|
|
2774
|
+
{
|
|
2775
|
+
className,
|
|
2776
|
+
viewBox: "0 0 24 24",
|
|
2777
|
+
fill: "none",
|
|
2778
|
+
stroke: "currentColor",
|
|
2779
|
+
strokeWidth,
|
|
2780
|
+
strokeLinecap: "round",
|
|
2781
|
+
strokeLinejoin: "round",
|
|
2782
|
+
children
|
|
2783
|
+
}
|
|
2784
|
+
);
|
|
2785
|
+
}
|
|
2786
|
+
function IconBolt({ className }) {
|
|
2787
|
+
return /* @__PURE__ */ jsx(SvgIcon, { className, children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" }) });
|
|
2788
|
+
}
|
|
2789
|
+
function IconDocument({ className }) {
|
|
2790
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, children: [
|
|
2791
|
+
/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
2792
|
+
/* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
|
|
2793
|
+
/* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
|
|
2794
|
+
/* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
|
|
2795
|
+
/* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
|
|
2796
|
+
] });
|
|
2797
|
+
}
|
|
2798
|
+
function IconSparkle({ className }) {
|
|
2799
|
+
return /* @__PURE__ */ jsx(SvgIcon, { className, children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
|
|
2800
|
+
}
|
|
2801
|
+
function IconTarget({ className }) {
|
|
2802
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, children: [
|
|
2803
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2804
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2805
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2806
|
+
] });
|
|
2807
|
+
}
|
|
2808
|
+
function IconArrowRight({ className }) {
|
|
2809
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, strokeWidth: "2", children: [
|
|
2810
|
+
/* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
|
|
2811
|
+
/* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
|
|
2812
|
+
] });
|
|
2813
|
+
}
|
|
2814
|
+
function LiveDot({ size = "sm" }) {
|
|
2815
|
+
const px = size === "md" ? "ww-h-2 ww-w-2" : "ww-h-1.5 ww-w-1.5";
|
|
2816
|
+
return /* @__PURE__ */ jsxs("span", { className: `ww-relative ww-flex ${px} ww-shrink-0`, children: [
|
|
2817
|
+
/* @__PURE__ */ jsx(
|
|
2818
|
+
"span",
|
|
2596
2819
|
{
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2820
|
+
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`
|
|
2821
|
+
}
|
|
2822
|
+
),
|
|
2823
|
+
/* @__PURE__ */ jsx(
|
|
2824
|
+
"span",
|
|
2600
2825
|
{
|
|
2601
|
-
|
|
2602
|
-
category: "pricing"
|
|
2826
|
+
className: `ww-relative ww-inline-flex ww-rounded-full ${px} ww-bg-emerald-500`
|
|
2603
2827
|
}
|
|
2604
|
-
|
|
2828
|
+
)
|
|
2829
|
+
] });
|
|
2830
|
+
}
|
|
2831
|
+
function urlRelevance(docUrl, pageUrl) {
|
|
2832
|
+
if (!docUrl || !pageUrl) return 0;
|
|
2833
|
+
const docClean = docUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2834
|
+
const pageClean = pageUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2835
|
+
if (docClean === pageClean) return 100;
|
|
2836
|
+
if (docClean.startsWith(pageClean) || pageClean.startsWith(docClean))
|
|
2837
|
+
return 50;
|
|
2838
|
+
const docParts = docClean.split(/[/?#]/).filter(Boolean);
|
|
2839
|
+
const pageParts = pageClean.split(/[/?#]/).filter(Boolean);
|
|
2840
|
+
let score = 0;
|
|
2841
|
+
for (const part of pageParts) {
|
|
2842
|
+
if (docParts.includes(part)) score += 10;
|
|
2605
2843
|
}
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2844
|
+
return score;
|
|
2845
|
+
}
|
|
2846
|
+
function topicToQuestion(topic, locale) {
|
|
2847
|
+
const name = topic.name.trim();
|
|
2848
|
+
if (name.endsWith("?")) return name;
|
|
2849
|
+
return getWidgetTranslation("tellMeAbout", locale, { name });
|
|
2850
|
+
}
|
|
2851
|
+
var STAGGER_MS = 50;
|
|
2852
|
+
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";
|
|
2853
|
+
function SectionLabel({ children }) {
|
|
2854
|
+
return /* @__PURE__ */ 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 });
|
|
2855
|
+
}
|
|
2856
|
+
function PageBadge({
|
|
2857
|
+
pageTitle,
|
|
2858
|
+
pageUrl,
|
|
2859
|
+
locale
|
|
2860
|
+
}) {
|
|
2861
|
+
return /* @__PURE__ */ jsx("div", { className: "ww-px-4 ww-pt-4 ww-pb-2", children: /* @__PURE__ */ 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: [
|
|
2862
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-2.5 ww-min-w-0", children: [
|
|
2863
|
+
/* @__PURE__ */ jsx("div", { className: "ww-w-2 ww-h-2 ww-rounded-full ww-bg-emerald-500 ww-animate-pulse ww-shrink-0" }),
|
|
2864
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[11px] ww-font-medium ww-text-foreground ww-truncate ww-max-w-[170px]", children: pageTitle || pageUrl || getWidgetTranslation("generalContext", locale) })
|
|
2865
|
+
] }),
|
|
2866
|
+
/* @__PURE__ */ 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" })
|
|
2867
|
+
] }) });
|
|
2868
|
+
}
|
|
2869
|
+
function ActionCard({
|
|
2870
|
+
action,
|
|
2871
|
+
index,
|
|
2872
|
+
accentColor,
|
|
2873
|
+
onExecute
|
|
2874
|
+
}) {
|
|
2875
|
+
return /* @__PURE__ */ jsxs(
|
|
2876
|
+
"button",
|
|
2877
|
+
{
|
|
2878
|
+
onClick: onExecute,
|
|
2879
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
2880
|
+
style: {
|
|
2881
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2882
|
+
animationFillMode: "both"
|
|
2614
2883
|
},
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2884
|
+
children: [
|
|
2885
|
+
/* @__PURE__ */ jsx(
|
|
2886
|
+
"div",
|
|
2887
|
+
{
|
|
2888
|
+
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",
|
|
2889
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2890
|
+
children: /* @__PURE__ */ jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2891
|
+
}
|
|
2892
|
+
),
|
|
2893
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
2894
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2895
|
+
action.description && /* @__PURE__ */ 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 })
|
|
2896
|
+
] }),
|
|
2897
|
+
/* @__PURE__ */ 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" })
|
|
2898
|
+
]
|
|
2899
|
+
}
|
|
2900
|
+
);
|
|
2901
|
+
}
|
|
2902
|
+
function ActionCardCompact({
|
|
2903
|
+
action,
|
|
2904
|
+
index,
|
|
2905
|
+
accentColor,
|
|
2906
|
+
onExecute
|
|
2907
|
+
}) {
|
|
2908
|
+
return /* @__PURE__ */ jsxs(
|
|
2909
|
+
"button",
|
|
2910
|
+
{
|
|
2911
|
+
onClick: onExecute,
|
|
2912
|
+
className: `${cardBase} ww-flex ww-flex-col ww-items-start ww-gap-2.5 ww-p-3.5`,
|
|
2913
|
+
style: {
|
|
2914
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2915
|
+
animationFillMode: "both"
|
|
2625
2916
|
},
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2917
|
+
children: [
|
|
2918
|
+
/* @__PURE__ */ jsx(
|
|
2919
|
+
"div",
|
|
2920
|
+
{
|
|
2921
|
+
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",
|
|
2922
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2923
|
+
children: /* @__PURE__ */ jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2924
|
+
}
|
|
2925
|
+
),
|
|
2926
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-min-w-0 ww-w-full", children: [
|
|
2927
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[12px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2928
|
+
action.description && /* @__PURE__ */ 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 })
|
|
2929
|
+
] })
|
|
2930
|
+
]
|
|
2931
|
+
}
|
|
2932
|
+
);
|
|
2933
|
+
}
|
|
2934
|
+
function DocCard({
|
|
2935
|
+
doc,
|
|
2936
|
+
index,
|
|
2937
|
+
onSend,
|
|
2938
|
+
locale
|
|
2939
|
+
}) {
|
|
2940
|
+
return /* @__PURE__ */ jsxs(
|
|
2941
|
+
"button",
|
|
2942
|
+
{
|
|
2943
|
+
onClick: () => onSend(
|
|
2944
|
+
doc.summary ? getWidgetTranslation("tellMeMoreAbout", locale, {
|
|
2945
|
+
name: doc.name
|
|
2946
|
+
}) : getWidgetTranslation("whatDoYouKnowAbout", locale, {
|
|
2947
|
+
name: doc.name
|
|
2948
|
+
})
|
|
2949
|
+
),
|
|
2950
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
2951
|
+
style: {
|
|
2952
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2953
|
+
animationFillMode: "both"
|
|
2640
2954
|
},
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2955
|
+
children: [
|
|
2956
|
+
/* @__PURE__ */ 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__ */ jsx(IconDocument, { className: "ww-w-4 ww-h-4" }) }),
|
|
2957
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
2958
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: doc.name }),
|
|
2959
|
+
doc.summary && /* @__PURE__ */ 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 })
|
|
2960
|
+
] }),
|
|
2961
|
+
/* @__PURE__ */ 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" })
|
|
2962
|
+
]
|
|
2963
|
+
}
|
|
2964
|
+
);
|
|
2965
|
+
}
|
|
2966
|
+
function TopicChip({
|
|
2967
|
+
topic,
|
|
2968
|
+
index,
|
|
2969
|
+
compact = false,
|
|
2970
|
+
onSend
|
|
2971
|
+
}) {
|
|
2972
|
+
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`;
|
|
2973
|
+
return /* @__PURE__ */ jsxs(
|
|
2974
|
+
"button",
|
|
2975
|
+
{
|
|
2976
|
+
onClick: () => onSend(topic.question),
|
|
2977
|
+
className: cls,
|
|
2978
|
+
style: {
|
|
2979
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2980
|
+
animationFillMode: "both"
|
|
2981
|
+
},
|
|
2982
|
+
children: [
|
|
2983
|
+
/* @__PURE__ */ jsx(
|
|
2984
|
+
IconSparkle,
|
|
2985
|
+
{
|
|
2986
|
+
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`
|
|
2987
|
+
}
|
|
2988
|
+
),
|
|
2989
|
+
/* @__PURE__ */ jsx(
|
|
2990
|
+
"span",
|
|
2991
|
+
{
|
|
2992
|
+
className: `${compact ? "ww-text-[11px]" : "ww-text-[12px]"} ww-font-medium ww-text-foreground ww-flex-1 ww-text-left`,
|
|
2993
|
+
children: topic.question
|
|
2994
|
+
}
|
|
2995
|
+
),
|
|
2996
|
+
!compact && /* @__PURE__ */ 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" })
|
|
2997
|
+
]
|
|
2998
|
+
}
|
|
2999
|
+
);
|
|
3000
|
+
}
|
|
3001
|
+
function CommandPanel({
|
|
3002
|
+
mode,
|
|
3003
|
+
pageUrl = "",
|
|
3004
|
+
pageTitle,
|
|
3005
|
+
clientActions = [],
|
|
3006
|
+
ragTopics = [],
|
|
3007
|
+
ragDocuments = [],
|
|
3008
|
+
onSend,
|
|
3009
|
+
onExecuteAction,
|
|
3010
|
+
accentColor = "#3b82f6",
|
|
3011
|
+
watermark = false,
|
|
3012
|
+
watermarkLogoUrl = "/wallavi.svg",
|
|
3013
|
+
footer,
|
|
3014
|
+
locale
|
|
3015
|
+
}) {
|
|
3016
|
+
const relevantDocs = useMemo(() => {
|
|
3017
|
+
if (!pageUrl && ragDocuments.length > 0) return ragDocuments.slice(0, 5);
|
|
3018
|
+
return ragDocuments.map((doc) => ({ ...doc, score: urlRelevance(doc.url, pageUrl) })).sort((a, b) => b.score - a.score).slice(0, 5);
|
|
3019
|
+
}, [ragDocuments, pageUrl]);
|
|
3020
|
+
const topicQuestions = useMemo(
|
|
3021
|
+
() => ragTopics.slice(0, 5).map((t) => ({
|
|
3022
|
+
...t,
|
|
3023
|
+
question: topicToQuestion(t, locale)
|
|
3024
|
+
})),
|
|
3025
|
+
[ragTopics, locale]
|
|
3026
|
+
);
|
|
3027
|
+
const hasActions = clientActions.length > 0;
|
|
3028
|
+
const hasDocs = relevantDocs.length > 0;
|
|
3029
|
+
const hasTopics = topicQuestions.length > 0;
|
|
3030
|
+
const hasContent = hasActions || hasDocs || hasTopics;
|
|
3031
|
+
if (!hasContent) return null;
|
|
3032
|
+
const isSidebar = mode === "sidebar";
|
|
3033
|
+
const handleExecute = (steps) => onExecuteAction?.(steps);
|
|
3034
|
+
if (isSidebar) {
|
|
3035
|
+
return /* @__PURE__ */ 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: [
|
|
3036
|
+
/* @__PURE__ */ jsx(PageBadge, { pageTitle, pageUrl, locale }),
|
|
3037
|
+
/* @__PURE__ */ 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: [
|
|
3038
|
+
hasActions && /* @__PURE__ */ jsxs("section", { children: [
|
|
3039
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3040
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action, i) => /* @__PURE__ */ jsx(
|
|
3041
|
+
ActionCard,
|
|
3042
|
+
{
|
|
3043
|
+
action,
|
|
3044
|
+
index: i,
|
|
3045
|
+
accentColor,
|
|
3046
|
+
onExecute: () => handleExecute(action.steps)
|
|
3047
|
+
},
|
|
3048
|
+
action.name
|
|
3049
|
+
)) })
|
|
3050
|
+
] }),
|
|
3051
|
+
hasDocs && /* @__PURE__ */ jsxs("section", { children: [
|
|
3052
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3053
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.map((doc, i) => /* @__PURE__ */ jsx(
|
|
3054
|
+
DocCard,
|
|
3055
|
+
{
|
|
3056
|
+
doc,
|
|
3057
|
+
index: i,
|
|
3058
|
+
onSend,
|
|
3059
|
+
locale
|
|
3060
|
+
},
|
|
3061
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3062
|
+
)) })
|
|
3063
|
+
] }),
|
|
3064
|
+
hasTopics && /* @__PURE__ */ jsxs("section", { children: [
|
|
3065
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3066
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-1.5", children: topicQuestions.map((topic, i) => /* @__PURE__ */ jsx(
|
|
3067
|
+
TopicChip,
|
|
3068
|
+
{
|
|
3069
|
+
topic,
|
|
3070
|
+
index: i,
|
|
3071
|
+
onSend
|
|
3072
|
+
},
|
|
3073
|
+
topic.name
|
|
3074
|
+
)) })
|
|
3075
|
+
] })
|
|
3076
|
+
] }),
|
|
3077
|
+
watermark && /* @__PURE__ */ 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: [
|
|
3078
|
+
/* @__PURE__ */ jsxs(
|
|
3079
|
+
"a",
|
|
3080
|
+
{
|
|
3081
|
+
href: "https://wallavi.com",
|
|
3082
|
+
target: "_blank",
|
|
3083
|
+
rel: "noopener noreferrer",
|
|
3084
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3085
|
+
children: [
|
|
3086
|
+
/* @__PURE__ */ jsx(
|
|
3087
|
+
"img",
|
|
3088
|
+
{
|
|
3089
|
+
src: watermarkLogoUrl,
|
|
3090
|
+
alt: "Wallavi",
|
|
3091
|
+
width: 11,
|
|
3092
|
+
height: 11
|
|
3093
|
+
}
|
|
3094
|
+
),
|
|
3095
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
3096
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3097
|
+
" Wallavi"
|
|
3098
|
+
] })
|
|
3099
|
+
]
|
|
3100
|
+
}
|
|
3101
|
+
),
|
|
3102
|
+
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3103
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/45 ww-text-[10px]", children: "\xB7" }),
|
|
3104
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-truncate ww-max-w-[120px]", children: footer })
|
|
3105
|
+
] })
|
|
3106
|
+
] })
|
|
3107
|
+
] });
|
|
2647
3108
|
}
|
|
2648
|
-
return [
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
3109
|
+
return /* @__PURE__ */ 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: [
|
|
3110
|
+
hasActions && /* @__PURE__ */ jsxs("section", { children: [
|
|
3111
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3112
|
+
/* @__PURE__ */ jsx("div", { className: "ww-grid ww-grid-cols-2 ww-gap-2", children: clientActions.slice(0, 4).map((action, i) => /* @__PURE__ */ jsx(
|
|
3113
|
+
ActionCardCompact,
|
|
3114
|
+
{
|
|
3115
|
+
action,
|
|
3116
|
+
index: i,
|
|
3117
|
+
accentColor,
|
|
3118
|
+
onExecute: () => handleExecute(action.steps)
|
|
3119
|
+
},
|
|
3120
|
+
action.name
|
|
3121
|
+
)) })
|
|
3122
|
+
] }),
|
|
3123
|
+
hasDocs && /* @__PURE__ */ jsxs("section", { children: [
|
|
3124
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3125
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.slice(0, 3).map((doc, i) => /* @__PURE__ */ jsx(
|
|
3126
|
+
DocCard,
|
|
3127
|
+
{
|
|
3128
|
+
doc,
|
|
3129
|
+
index: i,
|
|
3130
|
+
onSend,
|
|
3131
|
+
locale
|
|
3132
|
+
},
|
|
3133
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3134
|
+
)) })
|
|
3135
|
+
] }),
|
|
3136
|
+
hasTopics && /* @__PURE__ */ jsxs("section", { children: [
|
|
3137
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3138
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5", children: topicQuestions.slice(0, 4).map((topic, i) => /* @__PURE__ */ jsx(
|
|
3139
|
+
TopicChip,
|
|
3140
|
+
{
|
|
3141
|
+
topic,
|
|
3142
|
+
index: i,
|
|
3143
|
+
compact: true,
|
|
3144
|
+
onSend
|
|
3145
|
+
},
|
|
3146
|
+
topic.name
|
|
3147
|
+
)) })
|
|
3148
|
+
] })
|
|
3149
|
+
] });
|
|
2653
3150
|
}
|
|
2654
3151
|
function ChatWidget({
|
|
2655
3152
|
agentId,
|
|
@@ -2658,7 +3155,7 @@ function ChatWidget({
|
|
|
2658
3155
|
displayName,
|
|
2659
3156
|
profilePicture,
|
|
2660
3157
|
userMessageColor = "#19191c",
|
|
2661
|
-
initialMessages
|
|
3158
|
+
initialMessages,
|
|
2662
3159
|
suggestedMessages = [],
|
|
2663
3160
|
messagePlaceholder,
|
|
2664
3161
|
watermark = true,
|
|
@@ -2686,7 +3183,14 @@ function ChatWidget({
|
|
|
2686
3183
|
envId,
|
|
2687
3184
|
onDebugTrace,
|
|
2688
3185
|
widgetLayout,
|
|
2689
|
-
|
|
3186
|
+
showCommandPanel = true,
|
|
3187
|
+
showRagTopics = true,
|
|
3188
|
+
showRagDocuments = true,
|
|
3189
|
+
showQuickActions = true,
|
|
3190
|
+
locale = "en",
|
|
3191
|
+
clientActions = [],
|
|
3192
|
+
ragTopics = [],
|
|
3193
|
+
ragDocuments = []
|
|
2690
3194
|
}) {
|
|
2691
3195
|
const [isDesktop, setIsDesktop] = useState(false);
|
|
2692
3196
|
useEffect(() => {
|
|
@@ -2775,10 +3279,24 @@ function ChatWidget({
|
|
|
2775
3279
|
chat.reset();
|
|
2776
3280
|
onReset?.();
|
|
2777
3281
|
};
|
|
2778
|
-
const
|
|
3282
|
+
const [resolvedTheme, setResolvedTheme] = useState("light");
|
|
3283
|
+
useEffect(() => {
|
|
3284
|
+
if (theme === "system") {
|
|
3285
|
+
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
3286
|
+
setResolvedTheme(media.matches ? "dark" : "light");
|
|
3287
|
+
const listener = (e) => {
|
|
3288
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
3289
|
+
};
|
|
3290
|
+
media.addEventListener("change", listener);
|
|
3291
|
+
return () => media.removeEventListener("change", listener);
|
|
3292
|
+
} else {
|
|
3293
|
+
setResolvedTheme(theme || "light");
|
|
3294
|
+
}
|
|
3295
|
+
}, [theme]);
|
|
3296
|
+
const isDark = resolvedTheme === "dark";
|
|
2779
3297
|
const cssVars = {
|
|
2780
3298
|
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
2781
|
-
colorScheme:
|
|
3299
|
+
colorScheme: resolvedTheme,
|
|
2782
3300
|
// Inline style has higher specificity than any host-site stylesheet,
|
|
2783
3301
|
// so background-color set here cannot be overridden by host CSS.
|
|
2784
3302
|
backgroundColor: isDark ? "hsl(240 10% 3.9%)" : "hsl(0 0% 100%)",
|
|
@@ -2796,13 +3314,36 @@ function ChatWidget({
|
|
|
2796
3314
|
["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
|
|
2797
3315
|
["--radius"]: "0.5rem"
|
|
2798
3316
|
};
|
|
2799
|
-
const
|
|
3317
|
+
const defaultEnglishGreeting = "Hello! How can I help you today?";
|
|
3318
|
+
const isDefaultGreeting = !initialMessages || initialMessages.length === 0 || initialMessages.length === 1 && initialMessages[0] === defaultEnglishGreeting;
|
|
3319
|
+
const messagesList = isDefaultGreeting ? [getWidgetTranslation("defaultGreeting", locale)] : initialMessages;
|
|
3320
|
+
const showSidebar = showCommandPanel && widgetLayout === "center" && isDesktop;
|
|
3321
|
+
const showInlineCommandPanel = showCommandPanel && !showSidebar && chat.messages.length === 0 && (showQuickActions && clientActions.length > 0 || showRagTopics && ragTopics.length > 0 || showRagDocuments && ragDocuments.length > 0);
|
|
3322
|
+
const handleExecuteAction = useCallback(
|
|
3323
|
+
(steps) => {
|
|
3324
|
+
executeDeclarativeSteps(steps, onNavigate);
|
|
3325
|
+
},
|
|
3326
|
+
[onNavigate]
|
|
3327
|
+
);
|
|
3328
|
+
const commandPanelProps = {
|
|
3329
|
+
pageUrl: userContext?.pageContext?.url,
|
|
3330
|
+
pageTitle: userContext?.pageContext?.title,
|
|
3331
|
+
clientActions: showQuickActions ? clientActions : [],
|
|
3332
|
+
ragTopics: showRagTopics ? ragTopics : [],
|
|
3333
|
+
ragDocuments: showRagDocuments ? ragDocuments : [],
|
|
3334
|
+
onSend: (text) => chat.send(text),
|
|
3335
|
+
onExecuteAction: handleExecuteAction,
|
|
3336
|
+
accentColor: userMessageColor,
|
|
3337
|
+
watermark,
|
|
3338
|
+
watermarkLogoUrl,
|
|
3339
|
+
footer,
|
|
3340
|
+
locale
|
|
3341
|
+
};
|
|
2800
3342
|
return /* @__PURE__ */ jsxs(
|
|
2801
3343
|
"div",
|
|
2802
3344
|
{
|
|
2803
3345
|
className: cn(
|
|
2804
|
-
"wallavi-widget ww-flex ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2805
|
-
showSplitLayout ? "ww-flex-row" : "ww-flex-col",
|
|
3346
|
+
"wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2806
3347
|
!embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
|
|
2807
3348
|
isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
|
|
2808
3349
|
className
|
|
@@ -2813,293 +3354,228 @@ function ChatWidget({
|
|
|
2813
3354
|
onDragLeave: handleDragLeave,
|
|
2814
3355
|
onDrop: handleDrop,
|
|
2815
3356
|
children: [
|
|
2816
|
-
/* @__PURE__ */
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
VoiceOverlay,
|
|
2839
|
-
{
|
|
2840
|
-
token: chat.voiceCall.token,
|
|
2841
|
-
serverUrl: chat.voiceCall.serverUrl,
|
|
2842
|
-
onClose: chat.voiceCall.stop,
|
|
2843
|
-
accentColor: userMessageColor
|
|
2844
|
-
}
|
|
2845
|
-
),
|
|
2846
|
-
customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
|
|
2847
|
-
"div",
|
|
2848
|
-
{
|
|
2849
|
-
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
2850
|
-
style: { backgroundColor: `${userMessageColor}0d` },
|
|
2851
|
-
children: [
|
|
2852
|
-
/* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
|
|
2853
|
-
/* @__PURE__ */ jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
|
|
2854
|
-
/* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
|
|
2855
|
-
] }),
|
|
2856
|
-
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
|
|
2857
|
-
]
|
|
2858
|
-
}
|
|
2859
|
-
),
|
|
2860
|
-
/* @__PURE__ */ jsx(
|
|
2861
|
-
ChatMessages,
|
|
2862
|
-
{
|
|
2863
|
-
messages: chat.messages,
|
|
2864
|
-
streaming: chat.streaming,
|
|
2865
|
-
agentName,
|
|
2866
|
-
profilePicture,
|
|
2867
|
-
userColor: userMessageColor,
|
|
2868
|
-
initialMessages,
|
|
2869
|
-
suggestedMessages,
|
|
2870
|
-
showThinking,
|
|
2871
|
-
onSuggest: (msg) => chat.send(msg),
|
|
2872
|
-
onPickerSelect: chat.selectPickerOption
|
|
2873
|
-
}
|
|
2874
|
-
),
|
|
2875
|
-
customBackend?.footerAction && /* @__PURE__ */ jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxs(
|
|
2876
|
-
"button",
|
|
2877
|
-
{
|
|
2878
|
-
onClick: () => void customBackend.footerAction.onClick(),
|
|
2879
|
-
disabled: customBackend.footerAction.loading,
|
|
2880
|
-
style: customBackend.footerAction.icon === "human" ? {
|
|
2881
|
-
backgroundColor: userMessageColor,
|
|
2882
|
-
color: "#ffffff",
|
|
2883
|
-
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
2884
|
-
} : {
|
|
2885
|
-
borderColor: `${userMessageColor}35`,
|
|
2886
|
-
backgroundColor: `${userMessageColor}0d`,
|
|
2887
|
-
color: userMessageColor
|
|
2888
|
-
},
|
|
2889
|
-
className: [
|
|
2890
|
-
"ww-w-full ww-flex ww-items-center ww-gap-2 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-all",
|
|
2891
|
-
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
2892
|
-
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
2893
|
-
].join(" "),
|
|
2894
|
-
children: [
|
|
2895
|
-
customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
|
|
2896
|
-
"svg",
|
|
2897
|
-
{
|
|
2898
|
-
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2899
|
-
viewBox: "0 0 24 24",
|
|
2900
|
-
fill: "none",
|
|
2901
|
-
children: [
|
|
2902
|
-
/* @__PURE__ */ jsx(
|
|
2903
|
-
"circle",
|
|
2904
|
-
{
|
|
2905
|
-
className: "ww-opacity-25",
|
|
2906
|
-
cx: "12",
|
|
2907
|
-
cy: "12",
|
|
2908
|
-
r: "10",
|
|
2909
|
-
stroke: "currentColor",
|
|
2910
|
-
strokeWidth: "3"
|
|
2911
|
-
}
|
|
2912
|
-
),
|
|
2913
|
-
/* @__PURE__ */ jsx(
|
|
2914
|
-
"path",
|
|
2915
|
-
{
|
|
2916
|
-
className: "ww-opacity-75",
|
|
2917
|
-
fill: "currentColor",
|
|
2918
|
-
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
2919
|
-
}
|
|
2920
|
-
)
|
|
2921
|
-
]
|
|
2922
|
-
}
|
|
2923
|
-
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
|
|
2924
|
-
"svg",
|
|
2925
|
-
{
|
|
2926
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2927
|
-
viewBox: "0 0 24 24",
|
|
2928
|
-
fill: "none",
|
|
2929
|
-
stroke: "currentColor",
|
|
2930
|
-
strokeWidth: "2",
|
|
2931
|
-
strokeLinecap: "round",
|
|
2932
|
-
strokeLinejoin: "round",
|
|
2933
|
-
children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
|
|
2934
|
-
}
|
|
2935
|
-
) : /* @__PURE__ */ jsxs(
|
|
2936
|
-
"svg",
|
|
2937
|
-
{
|
|
2938
|
-
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
2939
|
-
viewBox: "0 0 24 24",
|
|
2940
|
-
fill: "none",
|
|
2941
|
-
stroke: "currentColor",
|
|
2942
|
-
strokeWidth: "2",
|
|
2943
|
-
strokeLinecap: "round",
|
|
2944
|
-
strokeLinejoin: "round",
|
|
2945
|
-
children: [
|
|
2946
|
-
/* @__PURE__ */ jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
2947
|
-
/* @__PURE__ */ jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
|
|
2948
|
-
]
|
|
2949
|
-
}
|
|
2950
|
-
),
|
|
2951
|
-
/* @__PURE__ */ jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
2952
|
-
/* @__PURE__ */ jsx(
|
|
2953
|
-
"svg",
|
|
2954
|
-
{
|
|
2955
|
-
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
2956
|
-
viewBox: "0 0 24 24",
|
|
2957
|
-
fill: "none",
|
|
2958
|
-
stroke: "currentColor",
|
|
2959
|
-
strokeWidth: "2.5",
|
|
2960
|
-
strokeLinecap: "round",
|
|
2961
|
-
strokeLinejoin: "round",
|
|
2962
|
-
children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
|
|
2963
|
-
}
|
|
2964
|
-
)
|
|
2965
|
-
]
|
|
2966
|
-
}
|
|
2967
|
-
) }),
|
|
2968
|
-
/* @__PURE__ */ jsx(
|
|
2969
|
-
ChatInput,
|
|
2970
|
-
{
|
|
2971
|
-
input: chat.input,
|
|
2972
|
-
setInput: chat.setInput,
|
|
2973
|
-
onSend: handleSend,
|
|
2974
|
-
streaming: chat.streaming,
|
|
2975
|
-
placeholder: messagePlaceholder,
|
|
2976
|
-
accentColor: userMessageColor,
|
|
2977
|
-
canRegenerate: !!canRegenerate,
|
|
2978
|
-
onRegenerate: () => void chat.regenerate(),
|
|
2979
|
-
selectedContext: chat.selectedContext,
|
|
2980
|
-
onClearContext: () => chat.setSelectedContext(null),
|
|
2981
|
-
...enableVoice && voice.isSupported ? {
|
|
2982
|
-
voiceState: voice.voiceState,
|
|
2983
|
-
onVoiceStart: () => void voice.start(),
|
|
2984
|
-
onVoiceStop: voice.stop
|
|
2985
|
-
} : {},
|
|
2986
|
-
...enableAttachments ? {
|
|
2987
|
-
attachments: attachmentHook.attachments,
|
|
2988
|
-
onAttach: attachmentHook.attach,
|
|
2989
|
-
onRemoveAttachment: attachmentHook.remove,
|
|
2990
|
-
isUploading: attachmentHook.isUploading
|
|
2991
|
-
} : {}
|
|
2992
|
-
}
|
|
2993
|
-
),
|
|
2994
|
-
watermark && /* @__PURE__ */ jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
|
|
2995
|
-
/* @__PURE__ */ jsxs(
|
|
2996
|
-
"a",
|
|
2997
|
-
{
|
|
2998
|
-
href: "https://wallavi.com",
|
|
2999
|
-
target: "_blank",
|
|
3000
|
-
rel: "noopener noreferrer",
|
|
3001
|
-
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3002
|
-
children: [
|
|
3003
|
-
/* @__PURE__ */ jsx(
|
|
3004
|
-
"img",
|
|
3005
|
-
{
|
|
3006
|
-
src: watermarkLogoUrl,
|
|
3007
|
-
alt: "Wallavi",
|
|
3008
|
-
width: 12,
|
|
3009
|
-
height: 12
|
|
3010
|
-
}
|
|
3011
|
-
),
|
|
3012
|
-
/* @__PURE__ */ jsx("span", { children: "Powered by Wallavi" })
|
|
3013
|
-
]
|
|
3014
|
-
}
|
|
3357
|
+
/* @__PURE__ */ jsx(
|
|
3358
|
+
ChatHeader,
|
|
3359
|
+
{
|
|
3360
|
+
title,
|
|
3361
|
+
profilePicture,
|
|
3362
|
+
headerBg,
|
|
3363
|
+
headerText,
|
|
3364
|
+
onReset: handleReset,
|
|
3365
|
+
onClose: hideCloseButton ? void 0 : onClose,
|
|
3366
|
+
onExpand,
|
|
3367
|
+
expanded,
|
|
3368
|
+
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
3369
|
+
isCallLoading: chat.voiceCall?.loading,
|
|
3370
|
+
locale
|
|
3371
|
+
}
|
|
3372
|
+
),
|
|
3373
|
+
/* @__PURE__ */ jsxs(
|
|
3374
|
+
"div",
|
|
3375
|
+
{
|
|
3376
|
+
className: cn(
|
|
3377
|
+
"ww-flex ww-flex-row ww-flex-1 ww-w-full ww-overflow-hidden",
|
|
3378
|
+
showSidebar && "ww-bg-muted/50"
|
|
3015
3379
|
),
|
|
3016
|
-
|
|
3017
|
-
/* @__PURE__ */
|
|
3018
|
-
|
|
3019
|
-
] })
|
|
3020
|
-
] })
|
|
3021
|
-
] }),
|
|
3022
|
-
showSplitLayout && /* @__PURE__ */ jsxs("div", { className: "ww-w-[280px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/10 ww-flex ww-flex-col ww-h-full ww-overflow-hidden", children: [
|
|
3023
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-p-4 ww-border-b ww-border-border ww-shrink-0", children: [
|
|
3024
|
-
/* @__PURE__ */ jsx("h3", { className: "ww-text-xs ww-font-bold ww-text-foreground ww-uppercase ww-tracking-wider", children: "Centro de Comando" }),
|
|
3025
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-px-2.5 ww-py-1 ww-rounded-full ww-text-[10px] ww-font-medium ww-bg-emerald-500/10 ww-text-emerald-500 ww-w-fit ww-mt-2 ww-max-w-full", children: [
|
|
3026
|
-
/* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-1.5 ww-w-1.5", children: [
|
|
3027
|
-
/* @__PURE__ */ jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
|
|
3028
|
-
/* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-1.5 ww-w-1.5 ww-bg-emerald-500" })
|
|
3029
|
-
] }),
|
|
3030
|
-
/* @__PURE__ */ jsx("span", { className: "ww-truncate", children: userContext?.pageContext?.title || userContext?.pageContext?.url || "P\xE1gina General" })
|
|
3031
|
-
] })
|
|
3032
|
-
] }),
|
|
3033
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-overflow-y-auto ww-p-4 ww-flex ww-flex-col ww-gap-5", children: [
|
|
3034
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3035
|
-
/* @__PURE__ */ jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Acciones R\xE1pidas" }),
|
|
3036
|
-
clientActions && clientActions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action) => /* @__PURE__ */ jsxs(
|
|
3037
|
-
"button",
|
|
3380
|
+
children: [
|
|
3381
|
+
/* @__PURE__ */ jsxs(
|
|
3382
|
+
"div",
|
|
3038
3383
|
{
|
|
3039
|
-
|
|
3040
|
-
|
|
3384
|
+
className: cn(
|
|
3385
|
+
"ww-flex ww-flex-col ww-flex-1 ww-h-full ww-overflow-hidden ww-relative ww-bg-background",
|
|
3386
|
+
showSidebar && "ww-rounded-br-2xl"
|
|
3387
|
+
),
|
|
3041
3388
|
children: [
|
|
3042
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-
|
|
3043
|
-
/* @__PURE__ */ jsx(
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3389
|
+
isDragOver && enableAttachments && /* @__PURE__ */ jsxs("div", { className: "ww-absolute ww-inset-0 ww-z-50 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-2 ww-rounded-2xl ww-bg-background/90 ww-backdrop-blur-sm ww-pointer-events-none", children: [
|
|
3390
|
+
/* @__PURE__ */ jsx(UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
|
|
3391
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: getWidgetTranslation("dropFiles", locale) }),
|
|
3392
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
|
|
3393
|
+
] }),
|
|
3394
|
+
chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsx(
|
|
3395
|
+
VoiceOverlay,
|
|
3396
|
+
{
|
|
3397
|
+
token: chat.voiceCall.token,
|
|
3398
|
+
serverUrl: chat.voiceCall.serverUrl,
|
|
3399
|
+
onClose: chat.voiceCall.stop,
|
|
3400
|
+
accentColor: userMessageColor,
|
|
3401
|
+
locale
|
|
3402
|
+
}
|
|
3403
|
+
),
|
|
3404
|
+
customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
|
|
3405
|
+
"div",
|
|
3406
|
+
{
|
|
3407
|
+
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
3408
|
+
style: { backgroundColor: `${userMessageColor}0d` },
|
|
3409
|
+
children: [
|
|
3410
|
+
/* @__PURE__ */ jsx(LiveDot, { size: "md" }),
|
|
3411
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: getWidgetTranslation("talkingToAgent", locale) })
|
|
3412
|
+
]
|
|
3413
|
+
}
|
|
3414
|
+
),
|
|
3415
|
+
/* @__PURE__ */ jsx(
|
|
3416
|
+
ChatMessages,
|
|
3417
|
+
{
|
|
3418
|
+
messages: chat.messages,
|
|
3419
|
+
streaming: chat.streaming,
|
|
3420
|
+
agentName,
|
|
3421
|
+
profilePicture,
|
|
3422
|
+
userColor: userMessageColor,
|
|
3423
|
+
initialMessages: messagesList,
|
|
3424
|
+
suggestedMessages,
|
|
3425
|
+
showThinking,
|
|
3426
|
+
onSuggest: (msg) => chat.send(msg),
|
|
3427
|
+
onPickerSelect: chat.selectPickerOption,
|
|
3428
|
+
locale,
|
|
3429
|
+
commandPanel: showInlineCommandPanel ? /* @__PURE__ */ jsx(CommandPanel, { mode: "inline", ...commandPanelProps }) : void 0
|
|
3430
|
+
}
|
|
3431
|
+
),
|
|
3432
|
+
customBackend?.footerAction && /* @__PURE__ */ jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxs(
|
|
3433
|
+
"button",
|
|
3434
|
+
{
|
|
3435
|
+
onClick: () => void customBackend.footerAction.onClick(),
|
|
3436
|
+
disabled: customBackend.footerAction.loading,
|
|
3437
|
+
style: customBackend.footerAction.icon === "human" ? {
|
|
3438
|
+
backgroundColor: userMessageColor,
|
|
3439
|
+
color: "#ffffff",
|
|
3440
|
+
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
3441
|
+
} : {
|
|
3442
|
+
borderColor: `${userMessageColor}35`,
|
|
3443
|
+
backgroundColor: `${userMessageColor}0d`,
|
|
3444
|
+
color: userMessageColor
|
|
3445
|
+
},
|
|
3446
|
+
className: [
|
|
3447
|
+
"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",
|
|
3448
|
+
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
3449
|
+
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
3450
|
+
].join(" "),
|
|
3451
|
+
children: [
|
|
3452
|
+
customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
|
|
3453
|
+
"svg",
|
|
3053
3454
|
{
|
|
3455
|
+
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3456
|
+
viewBox: "0 0 24 24",
|
|
3457
|
+
fill: "none",
|
|
3458
|
+
children: [
|
|
3459
|
+
/* @__PURE__ */ jsx(
|
|
3460
|
+
"circle",
|
|
3461
|
+
{
|
|
3462
|
+
className: "ww-opacity-25",
|
|
3463
|
+
cx: "12",
|
|
3464
|
+
cy: "12",
|
|
3465
|
+
r: "10",
|
|
3466
|
+
stroke: "currentColor",
|
|
3467
|
+
strokeWidth: "3"
|
|
3468
|
+
}
|
|
3469
|
+
),
|
|
3470
|
+
/* @__PURE__ */ jsx(
|
|
3471
|
+
"path",
|
|
3472
|
+
{
|
|
3473
|
+
className: "ww-opacity-75",
|
|
3474
|
+
fill: "currentColor",
|
|
3475
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
3476
|
+
}
|
|
3477
|
+
)
|
|
3478
|
+
]
|
|
3479
|
+
}
|
|
3480
|
+
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
|
|
3481
|
+
"svg",
|
|
3482
|
+
{
|
|
3483
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3484
|
+
viewBox: "0 0 24 24",
|
|
3485
|
+
fill: "none",
|
|
3486
|
+
stroke: "currentColor",
|
|
3487
|
+
strokeWidth: "2",
|
|
3054
3488
|
strokeLinecap: "round",
|
|
3055
3489
|
strokeLinejoin: "round",
|
|
3056
|
-
d: "
|
|
3490
|
+
children: /* @__PURE__ */ jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
|
|
3057
3491
|
}
|
|
3058
|
-
)
|
|
3059
|
-
|
|
3060
|
-
),
|
|
3061
|
-
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-semibold ww-text-foreground ww-truncate", children: action.name })
|
|
3062
|
-
] }),
|
|
3063
|
-
action.description && /* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-line-clamp-2", children: action.description })
|
|
3064
|
-
]
|
|
3065
|
-
},
|
|
3066
|
-
action.name
|
|
3067
|
-
)) }) : /* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-italic ww-px-1", children: "No hay acciones disponibles para esta p\xE1gina" })
|
|
3068
|
-
] }),
|
|
3069
|
-
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
|
|
3070
|
-
/* @__PURE__ */ jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Sugerencias" }),
|
|
3071
|
-
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: getContextQueries(userContext?.pageContext?.url || "").map(
|
|
3072
|
-
(query) => /* @__PURE__ */ jsxs(
|
|
3073
|
-
"button",
|
|
3074
|
-
{
|
|
3075
|
-
onClick: () => chat.send(query.text),
|
|
3076
|
-
className: "ww-w-full ww-flex ww-items-start ww-gap-2 ww-rounded-xl ww-border ww-border-border/60 ww-p-2.5 ww-text-left ww-bg-muted/30 hover:ww-bg-accent/30 hover:ww-border-accent-foreground/20 active:ww-scale-[0.98] ww-transition-all ww-duration-200",
|
|
3077
|
-
children: [
|
|
3078
|
-
/* @__PURE__ */ jsx(
|
|
3079
|
-
"svg",
|
|
3080
|
-
{
|
|
3081
|
-
className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 ww-shrink-0 ww-mt-0.5",
|
|
3082
|
-
viewBox: "0 0 24 24",
|
|
3083
|
-
fill: "none",
|
|
3084
|
-
stroke: "currentColor",
|
|
3085
|
-
strokeWidth: "2",
|
|
3086
|
-
children: /* @__PURE__ */ jsx(
|
|
3087
|
-
"path",
|
|
3492
|
+
) : /* @__PURE__ */ jsxs(
|
|
3493
|
+
"svg",
|
|
3088
3494
|
{
|
|
3495
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3496
|
+
viewBox: "0 0 24 24",
|
|
3497
|
+
fill: "none",
|
|
3498
|
+
stroke: "currentColor",
|
|
3499
|
+
strokeWidth: "2",
|
|
3089
3500
|
strokeLinecap: "round",
|
|
3090
3501
|
strokeLinejoin: "round",
|
|
3091
|
-
|
|
3502
|
+
children: [
|
|
3503
|
+
/* @__PURE__ */ jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
3504
|
+
/* @__PURE__ */ jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
|
|
3505
|
+
]
|
|
3506
|
+
}
|
|
3507
|
+
),
|
|
3508
|
+
/* @__PURE__ */ jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
3509
|
+
/* @__PURE__ */ jsx(
|
|
3510
|
+
"svg",
|
|
3511
|
+
{
|
|
3512
|
+
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
3513
|
+
viewBox: "0 0 24 24",
|
|
3514
|
+
fill: "none",
|
|
3515
|
+
stroke: "currentColor",
|
|
3516
|
+
strokeWidth: "2.5",
|
|
3517
|
+
strokeLinecap: "round",
|
|
3518
|
+
strokeLinejoin: "round",
|
|
3519
|
+
children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
|
|
3092
3520
|
}
|
|
3093
3521
|
)
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3522
|
+
]
|
|
3523
|
+
}
|
|
3524
|
+
) }),
|
|
3525
|
+
/* @__PURE__ */ jsx(
|
|
3526
|
+
ChatInput,
|
|
3527
|
+
{
|
|
3528
|
+
input: chat.input,
|
|
3529
|
+
setInput: chat.setInput,
|
|
3530
|
+
onSend: handleSend,
|
|
3531
|
+
streaming: chat.streaming,
|
|
3532
|
+
placeholder: messagePlaceholder,
|
|
3533
|
+
accentColor: userMessageColor,
|
|
3534
|
+
locale,
|
|
3535
|
+
canRegenerate: !!canRegenerate,
|
|
3536
|
+
onRegenerate: () => void chat.regenerate(),
|
|
3537
|
+
selectedContext: chat.selectedContext,
|
|
3538
|
+
onClearContext: () => chat.setSelectedContext(null),
|
|
3539
|
+
...enableVoice && voice.isSupported ? {
|
|
3540
|
+
voiceState: voice.voiceState,
|
|
3541
|
+
onVoiceStart: () => void voice.start(),
|
|
3542
|
+
onVoiceStop: voice.stop
|
|
3543
|
+
} : {},
|
|
3544
|
+
...enableAttachments ? {
|
|
3545
|
+
attachments: attachmentHook.attachments,
|
|
3546
|
+
onAttach: attachmentHook.attach,
|
|
3547
|
+
onRemoveAttachment: attachmentHook.remove,
|
|
3548
|
+
isUploading: attachmentHook.isUploading
|
|
3549
|
+
} : {}
|
|
3550
|
+
}
|
|
3551
|
+
)
|
|
3552
|
+
]
|
|
3553
|
+
}
|
|
3554
|
+
),
|
|
3555
|
+
showSidebar && /* @__PURE__ */ jsx(CommandPanel, { mode: "sidebar", ...commandPanelProps })
|
|
3556
|
+
]
|
|
3557
|
+
}
|
|
3558
|
+
),
|
|
3559
|
+
watermark && !showSidebar && /* @__PURE__ */ jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
|
|
3560
|
+
/* @__PURE__ */ jsxs(
|
|
3561
|
+
"a",
|
|
3562
|
+
{
|
|
3563
|
+
href: "https://wallavi.com",
|
|
3564
|
+
target: "_blank",
|
|
3565
|
+
rel: "noopener noreferrer",
|
|
3566
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3567
|
+
children: [
|
|
3568
|
+
/* @__PURE__ */ jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
|
|
3569
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
3570
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3571
|
+
" Wallavi"
|
|
3572
|
+
] })
|
|
3573
|
+
]
|
|
3574
|
+
}
|
|
3575
|
+
),
|
|
3576
|
+
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3577
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
|
|
3578
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
|
|
3103
3579
|
] })
|
|
3104
3580
|
] })
|
|
3105
3581
|
]
|
|
@@ -3160,6 +3636,10 @@ function useAutoConfig(agentId, enabled) {
|
|
|
3160
3636
|
remote.enableVoice = cfg.enableVoice;
|
|
3161
3637
|
if (cfg.clientActions)
|
|
3162
3638
|
remote.clientActions = cfg.clientActions;
|
|
3639
|
+
if (Array.isArray(cfg.ragTopics))
|
|
3640
|
+
remote.ragTopics = cfg.ragTopics;
|
|
3641
|
+
if (Array.isArray(cfg.ragDocuments))
|
|
3642
|
+
remote.ragDocuments = cfg.ragDocuments;
|
|
3163
3643
|
setResult({
|
|
3164
3644
|
remoteConfig: remote,
|
|
3165
3645
|
bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
|
|
@@ -3194,8 +3674,11 @@ function useSupportChat({
|
|
|
3194
3674
|
inboxToken,
|
|
3195
3675
|
apiBase = "https://app.wallavi.com",
|
|
3196
3676
|
requestHumanLabel = "Hablar con un agente",
|
|
3197
|
-
returnToAiLabel
|
|
3677
|
+
returnToAiLabel,
|
|
3678
|
+
locale
|
|
3198
3679
|
}) {
|
|
3680
|
+
const resolvedRequestHumanLabel = requestHumanLabel && requestHumanLabel !== "Hablar con un agente" ? requestHumanLabel : getWidgetTranslation("requestHuman", locale);
|
|
3681
|
+
const resolvedReturnToAiLabel = returnToAiLabel && returnToAiLabel !== "Volver a chatear con la IA" ? returnToAiLabel : returnToAiLabel ? getWidgetTranslation("returnToAi", locale) : void 0;
|
|
3199
3682
|
const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
|
|
3200
3683
|
const STORAGE_KEY = `wlv_support_${inboxToken}`;
|
|
3201
3684
|
const base = apiBase.replace(/\/$/, "");
|
|
@@ -3336,7 +3819,9 @@ function useSupportChat({
|
|
|
3336
3819
|
{
|
|
3337
3820
|
id: `tmp_${Date.now()}`,
|
|
3338
3821
|
role: "customer",
|
|
3339
|
-
content: text || `[${
|
|
3822
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3823
|
+
count: String(attachments?.length ?? 0)
|
|
3824
|
+
})}]`,
|
|
3340
3825
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3341
3826
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3342
3827
|
}
|
|
@@ -3347,7 +3832,9 @@ function useSupportChat({
|
|
|
3347
3832
|
headers: { "Content-Type": "application/json" },
|
|
3348
3833
|
body: JSON.stringify({
|
|
3349
3834
|
inboxToken,
|
|
3350
|
-
message: text || `[${
|
|
3835
|
+
message: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3836
|
+
count: String(attachments.length)
|
|
3837
|
+
})}]`,
|
|
3351
3838
|
attachments
|
|
3352
3839
|
})
|
|
3353
3840
|
});
|
|
@@ -3376,7 +3863,9 @@ function useSupportChat({
|
|
|
3376
3863
|
{
|
|
3377
3864
|
id: `tmp_${Date.now()}`,
|
|
3378
3865
|
role: "customer",
|
|
3379
|
-
content: text || `[${
|
|
3866
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3867
|
+
count: String(attachments.length)
|
|
3868
|
+
})}]`,
|
|
3380
3869
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3381
3870
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3382
3871
|
}
|
|
@@ -3496,17 +3985,17 @@ function useSupportChat({
|
|
|
3496
3985
|
const footerAction = useMemo(() => {
|
|
3497
3986
|
if (isAiMode) {
|
|
3498
3987
|
return {
|
|
3499
|
-
label:
|
|
3500
|
-
sublabel: "
|
|
3988
|
+
label: resolvedRequestHumanLabel,
|
|
3989
|
+
sublabel: getWidgetTranslation("requestHumanSublabel", locale),
|
|
3501
3990
|
icon: "human",
|
|
3502
3991
|
onClick: requestHuman,
|
|
3503
3992
|
loading: requestingHuman
|
|
3504
3993
|
};
|
|
3505
3994
|
}
|
|
3506
|
-
if (
|
|
3995
|
+
if (session && resolvedReturnToAiLabel) {
|
|
3507
3996
|
return {
|
|
3508
|
-
label:
|
|
3509
|
-
sublabel: "
|
|
3997
|
+
label: resolvedReturnToAiLabel,
|
|
3998
|
+
sublabel: getWidgetTranslation("returnToAiSublabel", locale),
|
|
3510
3999
|
icon: "ai",
|
|
3511
4000
|
onClick: returnToAi,
|
|
3512
4001
|
loading: returningToAi
|
|
@@ -3516,12 +4005,13 @@ function useSupportChat({
|
|
|
3516
4005
|
}, [
|
|
3517
4006
|
isAiMode,
|
|
3518
4007
|
session,
|
|
3519
|
-
|
|
4008
|
+
resolvedRequestHumanLabel,
|
|
4009
|
+
resolvedReturnToAiLabel,
|
|
3520
4010
|
requestHuman,
|
|
3521
4011
|
requestingHuman,
|
|
3522
|
-
returnToAiLabel,
|
|
3523
4012
|
returnToAi,
|
|
3524
|
-
returningToAi
|
|
4013
|
+
returningToAi,
|
|
4014
|
+
locale
|
|
3525
4015
|
]);
|
|
3526
4016
|
return useMemo(
|
|
3527
4017
|
() => ({
|
|
@@ -3584,14 +4074,6 @@ function BubbleWidget({
|
|
|
3584
4074
|
onOpenChange,
|
|
3585
4075
|
...chatProps
|
|
3586
4076
|
}) {
|
|
3587
|
-
const supportBackend = useSupportChat(
|
|
3588
|
-
inboxToken ? {
|
|
3589
|
-
inboxToken,
|
|
3590
|
-
apiBase: supportApiBase,
|
|
3591
|
-
requestHumanLabel,
|
|
3592
|
-
returnToAiLabel
|
|
3593
|
-
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
3594
|
-
);
|
|
3595
4077
|
const isControlled = isOpenProp !== void 0;
|
|
3596
4078
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
3597
4079
|
const open = isControlled ? isOpenProp : internalOpen;
|
|
@@ -3643,6 +4125,15 @@ function BubbleWidget({
|
|
|
3643
4125
|
agentName: remote.remoteConfig.agentName ?? chatProps.agentName ?? "Asistente",
|
|
3644
4126
|
source: chatProps.source ?? remote.remoteConfig.source ?? "web"
|
|
3645
4127
|
};
|
|
4128
|
+
const supportBackend = useSupportChat(
|
|
4129
|
+
inboxToken ? {
|
|
4130
|
+
inboxToken,
|
|
4131
|
+
apiBase: supportApiBase,
|
|
4132
|
+
requestHumanLabel,
|
|
4133
|
+
returnToAiLabel,
|
|
4134
|
+
locale: mergedConfig.locale
|
|
4135
|
+
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
4136
|
+
);
|
|
3646
4137
|
const setOpenRef = useRef(setOpen);
|
|
3647
4138
|
useEffect(() => {
|
|
3648
4139
|
setOpenRef.current = setOpen;
|
|
@@ -3798,4 +4289,4 @@ function BubbleWidget({
|
|
|
3798
4289
|
] });
|
|
3799
4290
|
}
|
|
3800
4291
|
|
|
3801
|
-
export { BubbleWidget, ChatWidget, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };
|
|
4292
|
+
export { BubbleWidget, ChatWidget, CommandPanel, IconTarget, LiveDot, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };
|