@wallavi/widget 1.11.1 → 1.12.2
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 +1063 -514
- package/dist/index.mjs +1061 -515
- 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\\/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-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-baseline {\n vertical-align: baseline;\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_-4px_20px_rgba\\(0\\,0\\,0\\,0\\.02\\)\\] {\n --tw-shadow: 0 -4px 20px rgba(0,0,0,0.02);\n --tw-shadow-colored: 0 -4px 20px 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-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.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-105:hover {\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.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-muted\\/70:hover {\n background-color: hsl(var(--muted) / 0.7);\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-95:active {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\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.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() {
|
|
@@ -660,7 +660,20 @@ function useChat({
|
|
|
660
660
|
const userInput = (text ?? input).trim();
|
|
661
661
|
if (!userInput || streaming) return;
|
|
662
662
|
setInput("");
|
|
663
|
-
const
|
|
663
|
+
const contextMatches = Array.from(
|
|
664
|
+
userInput.matchAll(/\[([^\]]+)\]\(wallavi:\/\/([^/]+)\/([^)]+)\)/g)
|
|
665
|
+
);
|
|
666
|
+
let contextToSend = selectedContext;
|
|
667
|
+
if (!contextToSend && contextMatches.length > 0) {
|
|
668
|
+
const lastMatch = contextMatches[contextMatches.length - 1];
|
|
669
|
+
if (lastMatch) {
|
|
670
|
+
contextToSend = {
|
|
671
|
+
name: lastMatch[1] || "",
|
|
672
|
+
type: lastMatch[2] || "",
|
|
673
|
+
id: lastMatch[3] || ""
|
|
674
|
+
};
|
|
675
|
+
}
|
|
676
|
+
}
|
|
664
677
|
setSelectedContext(null);
|
|
665
678
|
const attachments = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
|
|
666
679
|
pendingAttachmentsRef.current = [];
|
|
@@ -1120,6 +1133,118 @@ function MinimizeIcon() {
|
|
|
1120
1133
|
}
|
|
1121
1134
|
) });
|
|
1122
1135
|
}
|
|
1136
|
+
|
|
1137
|
+
// src/lib/translations.ts
|
|
1138
|
+
var WIDGET_TRANSLATIONS = {
|
|
1139
|
+
en: {
|
|
1140
|
+
quickActions: "Quick Actions",
|
|
1141
|
+
documentation: "Documentation",
|
|
1142
|
+
askAbout: "Ask about",
|
|
1143
|
+
poweredBy: "Powered by",
|
|
1144
|
+
sendMessage: "Send a message\u2026",
|
|
1145
|
+
search: "Search\u2026",
|
|
1146
|
+
generalContext: "General Context",
|
|
1147
|
+
defaultGreeting: "Hello! How can I help you today?",
|
|
1148
|
+
connecting: "Connecting...",
|
|
1149
|
+
listening: "Listening...",
|
|
1150
|
+
speaking: "Speaking...",
|
|
1151
|
+
ready: "Ready",
|
|
1152
|
+
aiAssistant: "AI Assistant",
|
|
1153
|
+
minimize: "Minimize",
|
|
1154
|
+
expand: "Expand",
|
|
1155
|
+
voiceCall: "Voice Call",
|
|
1156
|
+
newConversation: "New conversation",
|
|
1157
|
+
close: "Close",
|
|
1158
|
+
dropFiles: "Drop files to attach",
|
|
1159
|
+
talkingToAgent: "Talking to an agent",
|
|
1160
|
+
muteMic: "Mute microphone",
|
|
1161
|
+
unmuteMic: "Unmute microphone",
|
|
1162
|
+
disconnect: "Disconnect",
|
|
1163
|
+
calling: "Calling",
|
|
1164
|
+
called: "Called",
|
|
1165
|
+
failed: "Failed",
|
|
1166
|
+
reasoning: "Reasoning",
|
|
1167
|
+
noResults: "No results",
|
|
1168
|
+
proceed: "Proceed",
|
|
1169
|
+
proceedMessage: "yes, proceed",
|
|
1170
|
+
cancel: "Cancel",
|
|
1171
|
+
cancelMessage: "cancel",
|
|
1172
|
+
regenerateResponse: "Regenerate response",
|
|
1173
|
+
removeContext: "Remove context",
|
|
1174
|
+
stopRecording: "Stop recording",
|
|
1175
|
+
recordVoiceMessage: "Record voice message",
|
|
1176
|
+
attachFile: "Attach file (CSV, image\u2026)",
|
|
1177
|
+
requestHuman: "Talk to an agent",
|
|
1178
|
+
requestHumanSublabel: "We'll connect you with an available agent",
|
|
1179
|
+
returnToAi: "Return to AI chat",
|
|
1180
|
+
returnToAiSublabel: "Instant response with artificial intelligence",
|
|
1181
|
+
filesCount: "{count} file(s)",
|
|
1182
|
+
tellMeAbout: "Tell me about {name}",
|
|
1183
|
+
tellMeMoreAbout: "Tell me more about: {name}",
|
|
1184
|
+
whatDoYouKnowAbout: "What do you know about {name}?",
|
|
1185
|
+
uploadFailed: "Upload failed",
|
|
1186
|
+
remove: "Remove"
|
|
1187
|
+
},
|
|
1188
|
+
es: {
|
|
1189
|
+
quickActions: "Acciones r\xE1pidas",
|
|
1190
|
+
documentation: "Documentaci\xF3n",
|
|
1191
|
+
askAbout: "Preguntas frecuentes",
|
|
1192
|
+
poweredBy: "Powered by",
|
|
1193
|
+
sendMessage: "Enviar un mensaje...",
|
|
1194
|
+
search: "Buscar...",
|
|
1195
|
+
generalContext: "Contexto general",
|
|
1196
|
+
defaultGreeting: "\xA1Hola! \xBFC\xF3mo puedo ayudarte hoy?",
|
|
1197
|
+
connecting: "Conectando...",
|
|
1198
|
+
listening: "Escuchando...",
|
|
1199
|
+
speaking: "Hablando...",
|
|
1200
|
+
ready: "Listo",
|
|
1201
|
+
aiAssistant: "Asistente de IA",
|
|
1202
|
+
minimize: "Minimizar",
|
|
1203
|
+
expand: "Expandir",
|
|
1204
|
+
voiceCall: "Llamada de voz",
|
|
1205
|
+
newConversation: "Nueva conversaci\xF3n",
|
|
1206
|
+
close: "Cerrar",
|
|
1207
|
+
dropFiles: "Arrastra archivos para adjuntar",
|
|
1208
|
+
talkingToAgent: "Hablando con un agente",
|
|
1209
|
+
muteMic: "Silenciar micr\xF3fono",
|
|
1210
|
+
unmuteMic: "Activar micr\xF3fono",
|
|
1211
|
+
disconnect: "Desconectar",
|
|
1212
|
+
calling: "Llamando",
|
|
1213
|
+
called: "Llamado",
|
|
1214
|
+
failed: "Fall\xF3",
|
|
1215
|
+
reasoning: "Razonamiento",
|
|
1216
|
+
noResults: "Sin resultados",
|
|
1217
|
+
proceed: "Proceder",
|
|
1218
|
+
proceedMessage: "s\xED, proceder",
|
|
1219
|
+
cancel: "Cancelar",
|
|
1220
|
+
cancelMessage: "cancelar",
|
|
1221
|
+
regenerateResponse: "Regenerar respuesta",
|
|
1222
|
+
removeContext: "Eliminar contexto",
|
|
1223
|
+
stopRecording: "Detener grabaci\xF3n",
|
|
1224
|
+
recordVoiceMessage: "Grabar mensaje de voz",
|
|
1225
|
+
attachFile: "Adjuntar archivo (CSV, imagen...)",
|
|
1226
|
+
requestHuman: "Hablar con un agente",
|
|
1227
|
+
requestHumanSublabel: "Te conectamos con un agente disponible",
|
|
1228
|
+
returnToAi: "Volver a chatear con la IA",
|
|
1229
|
+
returnToAiSublabel: "Respuesta instant\xE1nea con inteligencia artificial",
|
|
1230
|
+
filesCount: "{count} archivo(s)",
|
|
1231
|
+
tellMeAbout: "H\xE1blame de {name}",
|
|
1232
|
+
tellMeMoreAbout: "Cu\xE9ntame m\xE1s sobre: {name}",
|
|
1233
|
+
whatDoYouKnowAbout: "\xBFQu\xE9 sabes sobre {name}?",
|
|
1234
|
+
uploadFailed: "Error al subir",
|
|
1235
|
+
remove: "Quitar"
|
|
1236
|
+
}
|
|
1237
|
+
};
|
|
1238
|
+
function getWidgetTranslation(key, locale, replacements) {
|
|
1239
|
+
const lang = locale === "es" ? "es" : "en";
|
|
1240
|
+
let text = WIDGET_TRANSLATIONS[lang][key];
|
|
1241
|
+
if (replacements) {
|
|
1242
|
+
Object.entries(replacements).forEach(([k, v]) => {
|
|
1243
|
+
text = text.replace(`{${k}}`, v);
|
|
1244
|
+
});
|
|
1245
|
+
}
|
|
1246
|
+
return text;
|
|
1247
|
+
}
|
|
1123
1248
|
var Avatar = ({
|
|
1124
1249
|
style,
|
|
1125
1250
|
...p
|
|
@@ -1182,7 +1307,8 @@ function ChatHeader({
|
|
|
1182
1307
|
onExpand,
|
|
1183
1308
|
expanded,
|
|
1184
1309
|
onCall,
|
|
1185
|
-
isCallLoading
|
|
1310
|
+
isCallLoading,
|
|
1311
|
+
locale
|
|
1186
1312
|
}) {
|
|
1187
1313
|
return /* @__PURE__ */ jsxs(
|
|
1188
1314
|
"header",
|
|
@@ -1215,7 +1341,7 @@ function ChatHeader({
|
|
|
1215
1341
|
),
|
|
1216
1342
|
/* @__PURE__ */ jsxs("div", { className: "ww-min-w-0", children: [
|
|
1217
1343
|
/* @__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: "
|
|
1344
|
+
/* @__PURE__ */ jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: getWidgetTranslation("aiAssistant", locale) })
|
|
1219
1345
|
] })
|
|
1220
1346
|
] }),
|
|
1221
1347
|
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-1", children: [
|
|
@@ -1224,7 +1350,7 @@ function ChatHeader({
|
|
|
1224
1350
|
{
|
|
1225
1351
|
onClick: onExpand,
|
|
1226
1352
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1227
|
-
title: expanded ? "
|
|
1353
|
+
title: expanded ? getWidgetTranslation("minimize", locale) : getWidgetTranslation("expand", locale),
|
|
1228
1354
|
children: expanded ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {})
|
|
1229
1355
|
}
|
|
1230
1356
|
),
|
|
@@ -1234,7 +1360,7 @@ function ChatHeader({
|
|
|
1234
1360
|
onClick: onCall,
|
|
1235
1361
|
disabled: isCallLoading,
|
|
1236
1362
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10 disabled:ww-opacity-50",
|
|
1237
|
-
title: "
|
|
1363
|
+
title: getWidgetTranslation("voiceCall", locale),
|
|
1238
1364
|
children: isCallLoading ? /* @__PURE__ */ jsxs(
|
|
1239
1365
|
"svg",
|
|
1240
1366
|
{
|
|
@@ -1278,7 +1404,7 @@ function ChatHeader({
|
|
|
1278
1404
|
{
|
|
1279
1405
|
onClick: onReset,
|
|
1280
1406
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1281
|
-
title: "
|
|
1407
|
+
title: getWidgetTranslation("newConversation", locale),
|
|
1282
1408
|
children: /* @__PURE__ */ jsx(
|
|
1283
1409
|
RotateCcw,
|
|
1284
1410
|
{
|
|
@@ -1293,7 +1419,7 @@ function ChatHeader({
|
|
|
1293
1419
|
{
|
|
1294
1420
|
onClick: onClose,
|
|
1295
1421
|
className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
|
|
1296
|
-
title: "
|
|
1422
|
+
title: getWidgetTranslation("close", locale),
|
|
1297
1423
|
children: /* @__PURE__ */ jsx(X, { className: "ww-h-3.5 ww-w-3.5", style: { color: headerText } })
|
|
1298
1424
|
}
|
|
1299
1425
|
)
|
|
@@ -1335,7 +1461,8 @@ function ChipLeading({ a }) {
|
|
|
1335
1461
|
}
|
|
1336
1462
|
function AttachmentChips({
|
|
1337
1463
|
attachments,
|
|
1338
|
-
onRemove
|
|
1464
|
+
onRemove,
|
|
1465
|
+
locale
|
|
1339
1466
|
}) {
|
|
1340
1467
|
if (attachments.length === 0) return null;
|
|
1341
1468
|
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 +1474,7 @@ function AttachmentChips({
|
|
|
1347
1474
|
),
|
|
1348
1475
|
children: [
|
|
1349
1476
|
/* @__PURE__ */ jsx(ChipLeading, { a }),
|
|
1350
|
-
/* @__PURE__ */ jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? "
|
|
1477
|
+
/* @__PURE__ */ jsx("span", { className: "ww-truncate ww-leading-tight", children: a.status === "error" ? a.errorMessage ?? getWidgetTranslation("uploadFailed", locale) : a.name }),
|
|
1351
1478
|
a.status === "ready" && /* @__PURE__ */ jsx("span", { className: "ww-shrink-0 ww-text-muted-foreground/50", children: formatBytes(a.sizeBytes) }),
|
|
1352
1479
|
/* @__PURE__ */ jsx(
|
|
1353
1480
|
"button",
|
|
@@ -1355,7 +1482,7 @@ function AttachmentChips({
|
|
|
1355
1482
|
type: "button",
|
|
1356
1483
|
onClick: () => onRemove(a.id),
|
|
1357
1484
|
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: "
|
|
1485
|
+
title: getWidgetTranslation("remove", locale),
|
|
1359
1486
|
children: /* @__PURE__ */ jsx(X, { className: "ww-h-2.5 ww-w-2.5" })
|
|
1360
1487
|
}
|
|
1361
1488
|
)
|
|
@@ -1435,7 +1562,8 @@ function PlanStepIcon({ status }) {
|
|
|
1435
1562
|
function PlanCard({
|
|
1436
1563
|
part,
|
|
1437
1564
|
onSend,
|
|
1438
|
-
disabled
|
|
1565
|
+
disabled,
|
|
1566
|
+
locale
|
|
1439
1567
|
}) {
|
|
1440
1568
|
const successCount = part.steps.filter((s) => s.status === "success").length;
|
|
1441
1569
|
const hasExecuting = part.steps.some((s) => s.status === "executing");
|
|
@@ -1487,7 +1615,7 @@ function PlanCard({
|
|
|
1487
1615
|
/* @__PURE__ */ jsxs(
|
|
1488
1616
|
"button",
|
|
1489
1617
|
{
|
|
1490
|
-
onClick: () => onSend("
|
|
1618
|
+
onClick: () => onSend(getWidgetTranslation("proceedMessage", locale)),
|
|
1491
1619
|
disabled,
|
|
1492
1620
|
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
1621
|
style: {
|
|
@@ -1496,19 +1624,19 @@ function PlanCard({
|
|
|
1496
1624
|
},
|
|
1497
1625
|
children: [
|
|
1498
1626
|
/* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1499
|
-
"
|
|
1627
|
+
getWidgetTranslation("proceed", locale)
|
|
1500
1628
|
]
|
|
1501
1629
|
}
|
|
1502
1630
|
),
|
|
1503
1631
|
/* @__PURE__ */ jsxs(
|
|
1504
1632
|
"button",
|
|
1505
1633
|
{
|
|
1506
|
-
onClick: () => onSend("
|
|
1634
|
+
onClick: () => onSend(getWidgetTranslation("cancelMessage", locale)),
|
|
1507
1635
|
disabled,
|
|
1508
1636
|
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
1637
|
children: [
|
|
1510
1638
|
/* @__PURE__ */ jsx(X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
|
|
1511
|
-
"
|
|
1639
|
+
getWidgetTranslation("cancel", locale)
|
|
1512
1640
|
]
|
|
1513
1641
|
}
|
|
1514
1642
|
)
|
|
@@ -1552,19 +1680,25 @@ function ThinkingDots() {
|
|
|
1552
1680
|
)
|
|
1553
1681
|
] });
|
|
1554
1682
|
}
|
|
1555
|
-
function ToolCallBadge({
|
|
1683
|
+
function ToolCallBadge({
|
|
1684
|
+
part,
|
|
1685
|
+
locale
|
|
1686
|
+
}) {
|
|
1556
1687
|
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
1688
|
part.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin" }),
|
|
1558
1689
|
part.status === "done" && /* @__PURE__ */ jsx(CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" }),
|
|
1559
1690
|
part.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" }),
|
|
1560
1691
|
/* @__PURE__ */ jsxs("span", { children: [
|
|
1561
|
-
part.status === "running" ? "
|
|
1692
|
+
part.status === "running" ? getWidgetTranslation("calling", locale) : part.status === "done" ? getWidgetTranslation("called", locale) : getWidgetTranslation("failed", locale),
|
|
1562
1693
|
" ",
|
|
1563
1694
|
/* @__PURE__ */ jsx("span", { className: "ww-font-medium ww-text-foreground", children: formatToolName(part.toolName) })
|
|
1564
1695
|
] })
|
|
1565
1696
|
] });
|
|
1566
1697
|
}
|
|
1567
|
-
function ReasoningBlock({
|
|
1698
|
+
function ReasoningBlock({
|
|
1699
|
+
text,
|
|
1700
|
+
locale
|
|
1701
|
+
}) {
|
|
1568
1702
|
const [open, setOpen] = useState(false);
|
|
1569
1703
|
return /* @__PURE__ */ jsxs("div", { className: "ww-mb-1", children: [
|
|
1570
1704
|
/* @__PURE__ */ jsxs(
|
|
@@ -1574,7 +1708,7 @@ function ReasoningBlock({ text }) {
|
|
|
1574
1708
|
className: "ww-flex ww-items-center ww-gap-1 ww-text-xs ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
1575
1709
|
children: [
|
|
1576
1710
|
/* @__PURE__ */ jsx(Zap, { className: "ww-h-3 ww-w-3" }),
|
|
1577
|
-
/* @__PURE__ */ jsx("span", { children: "
|
|
1711
|
+
/* @__PURE__ */ jsx("span", { children: getWidgetTranslation("reasoning", locale) }),
|
|
1578
1712
|
/* @__PURE__ */ jsx(
|
|
1579
1713
|
ChevronDown,
|
|
1580
1714
|
{
|
|
@@ -1593,7 +1727,8 @@ function ReasoningBlock({ text }) {
|
|
|
1593
1727
|
function PickerSelector({
|
|
1594
1728
|
part,
|
|
1595
1729
|
disabled,
|
|
1596
|
-
onSelect
|
|
1730
|
+
onSelect,
|
|
1731
|
+
locale
|
|
1597
1732
|
}) {
|
|
1598
1733
|
const count = part.options.length;
|
|
1599
1734
|
const mode = count <= 6 ? "pills" : count <= 20 ? "grid" : "list";
|
|
@@ -1625,7 +1760,7 @@ function PickerSelector({
|
|
|
1625
1760
|
type: "text",
|
|
1626
1761
|
value: query,
|
|
1627
1762
|
onChange: (e) => setQuery(e.target.value),
|
|
1628
|
-
placeholder: "
|
|
1763
|
+
placeholder: getWidgetTranslation("search", locale),
|
|
1629
1764
|
disabled: disabled || isConsumed,
|
|
1630
1765
|
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
1766
|
}
|
|
@@ -1674,7 +1809,7 @@ function PickerSelector({
|
|
|
1674
1809
|
);
|
|
1675
1810
|
}) }),
|
|
1676
1811
|
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: "
|
|
1812
|
+
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
1813
|
filtered.map((opt, i) => {
|
|
1679
1814
|
const sel = part.selectedValue === opt.value;
|
|
1680
1815
|
const faded = isConsumed && !sel;
|
|
@@ -1931,10 +2066,11 @@ function MessageBubble({
|
|
|
1931
2066
|
userColor,
|
|
1932
2067
|
agentName,
|
|
1933
2068
|
profilePicture,
|
|
1934
|
-
isStreaming,
|
|
2069
|
+
isStreaming = false,
|
|
1935
2070
|
showThinking = true,
|
|
1936
2071
|
onPickerSelect,
|
|
1937
|
-
onSend
|
|
2072
|
+
onSend,
|
|
2073
|
+
locale
|
|
1938
2074
|
}) {
|
|
1939
2075
|
const isUser = message.role === "user";
|
|
1940
2076
|
const textPart = message.parts.find((p) => p.type === "text");
|
|
@@ -1995,24 +2131,26 @@ function MessageBubble({
|
|
|
1995
2131
|
}
|
|
1996
2132
|
),
|
|
1997
2133
|
/* @__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 }),
|
|
2134
|
+
showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text, locale }),
|
|
1999
2135
|
planParts.map((p) => /* @__PURE__ */ jsx(
|
|
2000
2136
|
PlanCard,
|
|
2001
2137
|
{
|
|
2002
2138
|
part: p,
|
|
2003
2139
|
onSend,
|
|
2004
|
-
disabled: isStreaming
|
|
2140
|
+
disabled: isStreaming,
|
|
2141
|
+
locale
|
|
2005
2142
|
},
|
|
2006
2143
|
p.planId
|
|
2007
2144
|
)),
|
|
2008
|
-
visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
|
|
2145
|
+
visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t, locale }, t.toolCallId)),
|
|
2009
2146
|
pickerParts.map((p) => /* @__PURE__ */ jsx(
|
|
2010
2147
|
PickerSelector,
|
|
2011
2148
|
{
|
|
2012
2149
|
part: p,
|
|
2013
2150
|
disabled: isStreaming ?? false,
|
|
2014
2151
|
onSelect: onPickerSelect ?? (() => {
|
|
2015
|
-
})
|
|
2152
|
+
}),
|
|
2153
|
+
locale
|
|
2016
2154
|
},
|
|
2017
2155
|
p.pickerId
|
|
2018
2156
|
)),
|
|
@@ -2060,7 +2198,9 @@ function ChatMessages({
|
|
|
2060
2198
|
suggestedMessages = [],
|
|
2061
2199
|
showThinking = true,
|
|
2062
2200
|
onSuggest,
|
|
2063
|
-
onPickerSelect
|
|
2201
|
+
onPickerSelect,
|
|
2202
|
+
commandPanel,
|
|
2203
|
+
locale
|
|
2064
2204
|
}) {
|
|
2065
2205
|
const bottomRef = useRef(null);
|
|
2066
2206
|
const greetText = initialMessages[0];
|
|
@@ -2073,6 +2213,7 @@ function ChatMessages({
|
|
|
2073
2213
|
/* @__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
2214
|
/* @__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
2215
|
] }),
|
|
2216
|
+
showGreeting && commandPanel,
|
|
2076
2217
|
showGreeting && /* @__PURE__ */ jsx("div", { className: "ww-flex-1" }),
|
|
2077
2218
|
/* @__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
2219
|
MessageBubble,
|
|
@@ -2084,7 +2225,8 @@ function ChatMessages({
|
|
|
2084
2225
|
isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
|
|
2085
2226
|
showThinking,
|
|
2086
2227
|
onPickerSelect,
|
|
2087
|
-
onSend: i === messages.length - 1 ? onSuggest : void 0
|
|
2228
|
+
onSend: i === messages.length - 1 ? onSuggest : void 0,
|
|
2229
|
+
locale
|
|
2088
2230
|
},
|
|
2089
2231
|
msg.id
|
|
2090
2232
|
)) }),
|
|
@@ -2173,16 +2315,16 @@ var serializeEditor = (editor) => {
|
|
|
2173
2315
|
var createChipElement = (name, type, id, accentColor) => {
|
|
2174
2316
|
const span = document.createElement("span");
|
|
2175
2317
|
span.setAttribute("contenteditable", "false");
|
|
2176
|
-
span.className = "ww-inline-flex ww-items-center ww-gap-1
|
|
2318
|
+
span.className = "ww-inline-flex ww-items-center ww-gap-1 ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary ww-text-[11px] ww-font-semibold ww-px-1.5 ww-py-0.5 ww-rounded ww-mx-0.5 ww-align-baseline ww-select-all ww-shadow-3xs";
|
|
2177
2319
|
span.style.setProperty("--primary", accentColor);
|
|
2178
2320
|
span.setAttribute("data-wlv-context-id", id);
|
|
2179
2321
|
span.setAttribute("data-wlv-context-type", type);
|
|
2180
2322
|
span.setAttribute("data-wlv-context-name", name);
|
|
2181
2323
|
const dot = document.createElement("span");
|
|
2182
|
-
dot.className = "ww-h-1.5 ww-w-1.5 ww-rounded-full ww-bg-primary";
|
|
2324
|
+
dot.className = "ww-h-1.5 ww-w-1.5 ww-rounded-full ww-bg-primary ww-shrink-0";
|
|
2183
2325
|
span.appendChild(dot);
|
|
2184
2326
|
const typeSpan = document.createElement("span");
|
|
2185
|
-
typeSpan.className = "ww-opacity-
|
|
2327
|
+
typeSpan.className = "ww-opacity-60 ww-uppercase ww-text-[8px] ww-tracking-[0.06em] ww-font-bold";
|
|
2186
2328
|
typeSpan.textContent = `${type}:`;
|
|
2187
2329
|
span.appendChild(typeSpan);
|
|
2188
2330
|
const nameSpan = document.createElement("span");
|
|
@@ -2190,7 +2332,7 @@ var createChipElement = (name, type, id, accentColor) => {
|
|
|
2190
2332
|
span.appendChild(nameSpan);
|
|
2191
2333
|
const button = document.createElement("button");
|
|
2192
2334
|
button.type = "button";
|
|
2193
|
-
button.className = "ww-ml-1 ww-text-primary/
|
|
2335
|
+
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
2336
|
button.textContent = "\xD7";
|
|
2195
2337
|
button.onclick = () => {
|
|
2196
2338
|
span.remove();
|
|
@@ -2216,12 +2358,23 @@ function ChatInput({
|
|
|
2216
2358
|
onRemoveAttachment,
|
|
2217
2359
|
isUploading = false,
|
|
2218
2360
|
selectedContext,
|
|
2219
|
-
onClearContext
|
|
2361
|
+
onClearContext,
|
|
2362
|
+
locale
|
|
2220
2363
|
}) {
|
|
2221
2364
|
const hasVoice = onVoiceStart !== void 0;
|
|
2222
2365
|
const hasAttachments = onAttach !== void 0;
|
|
2223
2366
|
const fileInputRef = useRef(null);
|
|
2224
2367
|
const textareaRef = useRef(null);
|
|
2368
|
+
const lastRangeRef = useRef(null);
|
|
2369
|
+
const saveSelection = () => {
|
|
2370
|
+
const sel = window.getSelection();
|
|
2371
|
+
if (sel && sel.rangeCount > 0) {
|
|
2372
|
+
const range = sel.getRangeAt(0);
|
|
2373
|
+
if (textareaRef.current?.contains(range.commonAncestorContainer)) {
|
|
2374
|
+
lastRangeRef.current = range.cloneRange();
|
|
2375
|
+
}
|
|
2376
|
+
}
|
|
2377
|
+
};
|
|
2225
2378
|
const insertNodeAtCursor = (node) => {
|
|
2226
2379
|
const sel = window.getSelection();
|
|
2227
2380
|
if (sel && sel.rangeCount > 0) {
|
|
@@ -2266,8 +2419,27 @@ function ChatInput({
|
|
|
2266
2419
|
accentColor
|
|
2267
2420
|
);
|
|
2268
2421
|
textareaRef.current.focus();
|
|
2422
|
+
const sel = window.getSelection();
|
|
2423
|
+
if (sel) {
|
|
2424
|
+
if (lastRangeRef.current && textareaRef.current.contains(
|
|
2425
|
+
lastRangeRef.current.commonAncestorContainer
|
|
2426
|
+
)) {
|
|
2427
|
+
sel.removeAllRanges();
|
|
2428
|
+
sel.addRange(lastRangeRef.current);
|
|
2429
|
+
} else {
|
|
2430
|
+
const range = document.createRange();
|
|
2431
|
+
range.selectNodeContents(textareaRef.current);
|
|
2432
|
+
range.collapse(false);
|
|
2433
|
+
sel.removeAllRanges();
|
|
2434
|
+
sel.addRange(range);
|
|
2435
|
+
}
|
|
2436
|
+
}
|
|
2269
2437
|
insertNodeAtCursor(chipEl);
|
|
2270
2438
|
setInput(serializeEditor(textareaRef.current));
|
|
2439
|
+
const newSel = window.getSelection();
|
|
2440
|
+
if (newSel && newSel.rangeCount > 0) {
|
|
2441
|
+
lastRangeRef.current = newSel.getRangeAt(0).cloneRange();
|
|
2442
|
+
}
|
|
2271
2443
|
if (onClearContext) {
|
|
2272
2444
|
onClearContext();
|
|
2273
2445
|
}
|
|
@@ -2319,13 +2491,28 @@ function ChatInput({
|
|
|
2319
2491
|
}
|
|
2320
2492
|
};
|
|
2321
2493
|
const hasText = input.trim().length > 0;
|
|
2322
|
-
return /* @__PURE__ */ jsxs("div", { className: "ww-shrink-0 ww-border-t ww-bg-
|
|
2494
|
+
return /* @__PURE__ */ jsxs("div", { className: "ww-shrink-0 ww-border-t ww-border-border/40 ww-bg-muted/30 ww-px-3.5 ww-py-3 ww-shadow-[0_-4px_20px_rgba(0,0,0,0.02)]", children: [
|
|
2323
2495
|
/* @__PURE__ */ jsx("style", { children: `
|
|
2324
2496
|
#wallavi-chat-input:empty::before {
|
|
2325
2497
|
content: attr(placeholder);
|
|
2326
2498
|
color: rgba(120, 120, 120, 0.45);
|
|
2327
2499
|
pointer-events: none;
|
|
2328
2500
|
}
|
|
2501
|
+
#wallavi-chat-input-container {
|
|
2502
|
+
border: 1.5px solid rgba(var(--accent-rgb), 0.18);
|
|
2503
|
+
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
|
|
2504
|
+
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
2505
|
+
}
|
|
2506
|
+
#wallavi-chat-input-container:hover {
|
|
2507
|
+
border-color: rgba(var(--accent-rgb), 0.42);
|
|
2508
|
+
box-shadow: 0 10px 20px -4px rgba(var(--accent-rgb), 0.08), 0 4px 8px -2px rgba(var(--accent-rgb), 0.04);
|
|
2509
|
+
transform: translateY(-1px);
|
|
2510
|
+
}
|
|
2511
|
+
#wallavi-chat-input-container:focus-within {
|
|
2512
|
+
border-color: var(--accent-color);
|
|
2513
|
+
box-shadow: 0 20px 32px -8px rgba(var(--accent-rgb), 0.15), 0 8px 16px -4px rgba(var(--accent-rgb), 0.08), 0 0 0 4px rgba(var(--accent-rgb), 0.18);
|
|
2514
|
+
transform: translateY(-2px) scale(1.005);
|
|
2515
|
+
}
|
|
2329
2516
|
` }),
|
|
2330
2517
|
canRegenerate && onRegenerate && /* @__PURE__ */ jsxs(
|
|
2331
2518
|
"button",
|
|
@@ -2335,135 +2522,176 @@ function ChatInput({
|
|
|
2335
2522
|
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
2523
|
children: [
|
|
2337
2524
|
/* @__PURE__ */ jsx(RotateCcw, { className: "ww-h-3 ww-w-3" }),
|
|
2338
|
-
"
|
|
2525
|
+
getWidgetTranslation("regenerateResponse", locale)
|
|
2339
2526
|
]
|
|
2340
2527
|
}
|
|
2341
2528
|
),
|
|
2342
|
-
/* @__PURE__ */ jsxs(
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2529
|
+
/* @__PURE__ */ jsxs(
|
|
2530
|
+
"div",
|
|
2531
|
+
{
|
|
2532
|
+
id: "wallavi-chat-input-container",
|
|
2533
|
+
className: "ww-flex ww-flex-col ww-rounded-2xl ww-bg-background ww-shadow-sm",
|
|
2534
|
+
style: {
|
|
2535
|
+
["--accent-color"]: accentColor,
|
|
2536
|
+
["--accent-rgb"]: (() => {
|
|
2537
|
+
const clean = accentColor.replace("#", "");
|
|
2538
|
+
const r = parseInt(clean.substring(0, 2), 16);
|
|
2539
|
+
const g = parseInt(clean.substring(2, 4), 16);
|
|
2540
|
+
const b = parseInt(clean.substring(4, 6), 16);
|
|
2541
|
+
return isNaN(r) || isNaN(g) || isNaN(b) ? "120, 120, 120" : `${r}, ${g}, ${b}`;
|
|
2542
|
+
})()
|
|
2543
|
+
},
|
|
2544
|
+
children: [
|
|
2545
|
+
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: [
|
|
2546
|
+
/* @__PURE__ */ jsxs(
|
|
2358
2547
|
"svg",
|
|
2359
2548
|
{
|
|
2360
|
-
className: "ww-h-3 ww-
|
|
2549
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0 ww-opacity-60",
|
|
2361
2550
|
viewBox: "0 0 24 24",
|
|
2362
2551
|
fill: "none",
|
|
2363
2552
|
stroke: "currentColor",
|
|
2364
|
-
strokeWidth: "2
|
|
2553
|
+
strokeWidth: "2",
|
|
2365
2554
|
strokeLinecap: "round",
|
|
2366
2555
|
strokeLinejoin: "round",
|
|
2367
2556
|
children: [
|
|
2368
|
-
/* @__PURE__ */ jsx("
|
|
2369
|
-
/* @__PURE__ */ jsx("
|
|
2557
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2558
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2559
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2370
2560
|
]
|
|
2371
2561
|
}
|
|
2562
|
+
),
|
|
2563
|
+
/* @__PURE__ */ jsxs("span", { className: "ww-opacity-55 ww-uppercase ww-text-[9px] ww-tracking-[0.06em] ww-font-bold", children: [
|
|
2564
|
+
selectedContext.type,
|
|
2565
|
+
":"
|
|
2566
|
+
] }),
|
|
2567
|
+
/* @__PURE__ */ jsx("span", { className: "ww-font-semibold", children: selectedContext.name }),
|
|
2568
|
+
/* @__PURE__ */ jsx(
|
|
2569
|
+
"button",
|
|
2570
|
+
{
|
|
2571
|
+
type: "button",
|
|
2572
|
+
onClick: onClearContext,
|
|
2573
|
+
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",
|
|
2574
|
+
title: getWidgetTranslation("removeContext", locale),
|
|
2575
|
+
children: /* @__PURE__ */ jsxs(
|
|
2576
|
+
"svg",
|
|
2577
|
+
{
|
|
2578
|
+
className: "ww-h-3 ww-w-3",
|
|
2579
|
+
viewBox: "0 0 24 24",
|
|
2580
|
+
fill: "none",
|
|
2581
|
+
stroke: "currentColor",
|
|
2582
|
+
strokeWidth: "2.5",
|
|
2583
|
+
strokeLinecap: "round",
|
|
2584
|
+
strokeLinejoin: "round",
|
|
2585
|
+
children: [
|
|
2586
|
+
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
2587
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
2588
|
+
]
|
|
2589
|
+
}
|
|
2590
|
+
)
|
|
2591
|
+
}
|
|
2372
2592
|
)
|
|
2373
|
-
}
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
onRemove: (id) => onRemoveAttachment?.(id)
|
|
2381
|
-
}
|
|
2382
|
-
) }),
|
|
2383
|
-
hasAttachments && /* @__PURE__ */ jsx(
|
|
2384
|
-
"input",
|
|
2385
|
-
{
|
|
2386
|
-
ref: fileInputRef,
|
|
2387
|
-
type: "file",
|
|
2388
|
-
multiple: true,
|
|
2389
|
-
accept: ".csv,.txt,.tsv,.pdf,text/plain,text/csv,application/pdf,image/jpeg,image/png,image/webp,image/gif",
|
|
2390
|
-
className: "ww-hidden",
|
|
2391
|
-
onChange: (e) => {
|
|
2392
|
-
if (e.target.files?.length) {
|
|
2393
|
-
onAttach(e.target.files);
|
|
2394
|
-
e.target.value = "";
|
|
2593
|
+
] }) }),
|
|
2594
|
+
hasAttachments && attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "ww-px-2 ww-pt-2", children: /* @__PURE__ */ jsx(
|
|
2595
|
+
AttachmentChips,
|
|
2596
|
+
{
|
|
2597
|
+
attachments,
|
|
2598
|
+
onRemove: (id) => onRemoveAttachment?.(id),
|
|
2599
|
+
locale
|
|
2395
2600
|
}
|
|
2396
|
-
}
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2601
|
+
) }),
|
|
2602
|
+
hasAttachments && /* @__PURE__ */ jsx(
|
|
2603
|
+
"input",
|
|
2604
|
+
{
|
|
2605
|
+
ref: fileInputRef,
|
|
2606
|
+
type: "file",
|
|
2607
|
+
multiple: true,
|
|
2608
|
+
accept: ".csv,.txt,.tsv,.pdf,text/plain,text/csv,application/pdf,image/jpeg,image/png,image/webp,image/gif",
|
|
2609
|
+
className: "ww-hidden",
|
|
2610
|
+
onChange: (e) => {
|
|
2611
|
+
if (e.target.files?.length) {
|
|
2612
|
+
onAttach(e.target.files);
|
|
2613
|
+
e.target.value = "";
|
|
2614
|
+
}
|
|
2615
|
+
}
|
|
2616
|
+
}
|
|
2617
|
+
),
|
|
2618
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-end ww-gap-2 ww-px-3 ww-py-2", children: [
|
|
2619
|
+
/* @__PURE__ */ jsx(
|
|
2620
|
+
"div",
|
|
2621
|
+
{
|
|
2622
|
+
id: "wallavi-chat-input",
|
|
2623
|
+
ref: textareaRef,
|
|
2624
|
+
contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
|
|
2625
|
+
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",
|
|
2626
|
+
...{
|
|
2627
|
+
placeholder: placeholder || getWidgetTranslation("sendMessage", locale)
|
|
2628
|
+
},
|
|
2629
|
+
onKeyDown: handleKeyDown,
|
|
2630
|
+
onInput: handleInput,
|
|
2631
|
+
onPaste: handlePaste,
|
|
2632
|
+
onMouseUp: saveSelection,
|
|
2633
|
+
onKeyUp: saveSelection,
|
|
2634
|
+
style: { wordBreak: "break-word" }
|
|
2635
|
+
}
|
|
2426
2636
|
),
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2637
|
+
hasVoice && /* @__PURE__ */ jsx(
|
|
2638
|
+
"button",
|
|
2639
|
+
{
|
|
2640
|
+
type: "button",
|
|
2641
|
+
onClick: voiceState === "recording" ? onVoiceStop : onVoiceStart,
|
|
2642
|
+
disabled: streaming || voiceState === "transcribing",
|
|
2643
|
+
title: voiceState === "recording" ? getWidgetTranslation("stopRecording", locale) : getWidgetTranslation("recordVoiceMessage", locale),
|
|
2644
|
+
className: cn3(
|
|
2645
|
+
"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 hover:ww-bg-muted/70 hover:ww-scale-105 active:ww-scale-95",
|
|
2646
|
+
voiceState === "recording" && "ww-animate-pulse",
|
|
2647
|
+
voiceState === "error" ? "ww-text-red-500 ww-opacity-80" : "ww-text-muted-foreground hover:ww-text-foreground",
|
|
2648
|
+
(streaming || voiceState === "transcribing") && "ww-opacity-40 ww-pointer-events-none"
|
|
2649
|
+
),
|
|
2650
|
+
style: voiceState === "recording" ? { color: accentColor } : void 0,
|
|
2651
|
+
children: voiceState === "transcribing" ? /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3.5 ww-w-3.5 ww-animate-spin" }) : voiceState === "recording" ? /* @__PURE__ */ jsx(Square, { className: "ww-h-3.5 ww-w-3.5 ww-fill-current" }) : /* @__PURE__ */ jsx(Mic, { className: "ww-h-3.5 ww-w-3.5" })
|
|
2652
|
+
}
|
|
2442
2653
|
),
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2654
|
+
hasAttachments && /* @__PURE__ */ jsx(
|
|
2655
|
+
"button",
|
|
2656
|
+
{
|
|
2657
|
+
type: "button",
|
|
2658
|
+
onClick: () => fileInputRef.current?.click(),
|
|
2659
|
+
disabled: streaming || isUploading,
|
|
2660
|
+
title: getWidgetTranslation("attachFile", locale),
|
|
2661
|
+
className: cn3(
|
|
2662
|
+
"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 hover:ww-bg-muted/70 hover:ww-scale-105 active:ww-scale-95",
|
|
2663
|
+
"ww-text-muted-foreground hover:ww-text-foreground",
|
|
2664
|
+
(streaming || isUploading) && "ww-opacity-40 ww-pointer-events-none"
|
|
2665
|
+
),
|
|
2666
|
+
children: isUploading ? /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3.5 ww-w-3.5 ww-animate-spin" }) : /* @__PURE__ */ jsx(Paperclip, { className: "ww-h-3.5 ww-w-3.5" })
|
|
2667
|
+
}
|
|
2454
2668
|
),
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2669
|
+
/* @__PURE__ */ jsx(
|
|
2670
|
+
"button",
|
|
2671
|
+
{
|
|
2672
|
+
onClick: onSend,
|
|
2673
|
+
disabled: streaming || !hasText || voiceState === "recording" || voiceState === "transcribing",
|
|
2674
|
+
className: cn3(
|
|
2675
|
+
"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 hover:ww-scale-105 active:ww-scale-95",
|
|
2676
|
+
hasText || streaming ? "ww-opacity-100 ww-shadow-sm hover:ww-shadow-md" : "ww-opacity-30"
|
|
2677
|
+
),
|
|
2678
|
+
style: hasText || streaming ? {
|
|
2679
|
+
backgroundColor: accentColor,
|
|
2680
|
+
color: getContrastColor(accentColor)
|
|
2681
|
+
} : { backgroundColor: "transparent", color: "currentColor" },
|
|
2682
|
+
children: streaming ? /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3.5 ww-w-3.5 ww-animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "ww-h-3.5 ww-w-3.5" })
|
|
2683
|
+
}
|
|
2684
|
+
)
|
|
2685
|
+
] })
|
|
2686
|
+
]
|
|
2687
|
+
}
|
|
2688
|
+
)
|
|
2464
2689
|
] });
|
|
2465
2690
|
}
|
|
2466
|
-
function CustomControlBar({
|
|
2691
|
+
function CustomControlBar({
|
|
2692
|
+
onClose,
|
|
2693
|
+
locale
|
|
2694
|
+
}) {
|
|
2467
2695
|
const { localParticipant, isMicrophoneEnabled } = useLocalParticipant();
|
|
2468
2696
|
const room = useRoomContext();
|
|
2469
2697
|
const toggleMic = async () => {
|
|
@@ -2483,7 +2711,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2483
2711
|
{
|
|
2484
2712
|
onClick: toggleMic,
|
|
2485
2713
|
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 ? "
|
|
2714
|
+
title: isMicrophoneEnabled ? getWidgetTranslation("muteMic", locale) : getWidgetTranslation("unmuteMic", locale),
|
|
2487
2715
|
children: isMicrophoneEnabled ? /* @__PURE__ */ jsx(Mic, { className: "ww-w-6 ww-h-6" }) : /* @__PURE__ */ jsx(MicOff, { className: "ww-w-6 ww-h-6" })
|
|
2488
2716
|
}
|
|
2489
2717
|
),
|
|
@@ -2493,7 +2721,7 @@ function CustomControlBar({ onClose }) {
|
|
|
2493
2721
|
onClick: disconnect,
|
|
2494
2722
|
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
2723
|
style: { backgroundColor: "#ef4444" },
|
|
2496
|
-
title: "
|
|
2724
|
+
title: getWidgetTranslation("disconnect", locale),
|
|
2497
2725
|
children: /* @__PURE__ */ jsx(PhoneOff, { className: "ww-w-6 ww-h-6" })
|
|
2498
2726
|
}
|
|
2499
2727
|
)
|
|
@@ -2556,17 +2784,25 @@ function ChatGPTOrb() {
|
|
|
2556
2784
|
)
|
|
2557
2785
|
] });
|
|
2558
2786
|
}
|
|
2559
|
-
function AssistantVisualizer({
|
|
2787
|
+
function AssistantVisualizer({
|
|
2788
|
+
onClose,
|
|
2789
|
+
locale
|
|
2790
|
+
}) {
|
|
2560
2791
|
const { state } = useVoiceAssistant();
|
|
2561
2792
|
return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-items-center ww-justify-center ww-h-full ww-w-full", children: [
|
|
2562
2793
|
/* @__PURE__ */ jsx("div", { className: "ww-flex-1 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsx(ChatGPTOrb, {}) }),
|
|
2563
2794
|
/* @__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 })
|
|
2795
|
+
/* @__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) }),
|
|
2796
|
+
/* @__PURE__ */ jsx(CustomControlBar, { onClose, locale })
|
|
2566
2797
|
] })
|
|
2567
2798
|
] });
|
|
2568
2799
|
}
|
|
2569
|
-
function VoiceOverlay({
|
|
2800
|
+
function VoiceOverlay({
|
|
2801
|
+
token,
|
|
2802
|
+
serverUrl,
|
|
2803
|
+
onClose,
|
|
2804
|
+
locale
|
|
2805
|
+
}) {
|
|
2570
2806
|
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
2807
|
LiveKitRoom,
|
|
2572
2808
|
{
|
|
@@ -2578,78 +2814,394 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
|
|
|
2578
2814
|
className: "ww-flex-1",
|
|
2579
2815
|
children: [
|
|
2580
2816
|
/* @__PURE__ */ jsx(RoomAudioRenderer, {}),
|
|
2581
|
-
/* @__PURE__ */ jsx(AssistantVisualizer, { onClose })
|
|
2817
|
+
/* @__PURE__ */ jsx(AssistantVisualizer, { onClose, locale })
|
|
2582
2818
|
]
|
|
2583
2819
|
}
|
|
2584
2820
|
) });
|
|
2585
2821
|
}
|
|
2586
|
-
function
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2822
|
+
function SvgIcon({
|
|
2823
|
+
className,
|
|
2824
|
+
strokeWidth = "1.8",
|
|
2825
|
+
children
|
|
2826
|
+
}) {
|
|
2827
|
+
return /* @__PURE__ */ jsx(
|
|
2828
|
+
"svg",
|
|
2829
|
+
{
|
|
2830
|
+
className,
|
|
2831
|
+
viewBox: "0 0 24 24",
|
|
2832
|
+
fill: "none",
|
|
2833
|
+
stroke: "currentColor",
|
|
2834
|
+
strokeWidth,
|
|
2835
|
+
strokeLinecap: "round",
|
|
2836
|
+
strokeLinejoin: "round",
|
|
2837
|
+
children
|
|
2838
|
+
}
|
|
2839
|
+
);
|
|
2840
|
+
}
|
|
2841
|
+
function IconBolt({ className }) {
|
|
2842
|
+
return /* @__PURE__ */ jsx(SvgIcon, { className, children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" }) });
|
|
2843
|
+
}
|
|
2844
|
+
function IconDocument({ className }) {
|
|
2845
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, children: [
|
|
2846
|
+
/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
|
|
2847
|
+
/* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
|
|
2848
|
+
/* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
|
|
2849
|
+
/* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
|
|
2850
|
+
/* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
|
|
2851
|
+
] });
|
|
2852
|
+
}
|
|
2853
|
+
function IconSparkle({ className }) {
|
|
2854
|
+
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" }) });
|
|
2855
|
+
}
|
|
2856
|
+
function IconTarget({ className }) {
|
|
2857
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, children: [
|
|
2858
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2859
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
|
|
2860
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
|
|
2861
|
+
] });
|
|
2862
|
+
}
|
|
2863
|
+
function IconArrowRight({ className }) {
|
|
2864
|
+
return /* @__PURE__ */ jsxs(SvgIcon, { className, strokeWidth: "2", children: [
|
|
2865
|
+
/* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
|
|
2866
|
+
/* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
|
|
2867
|
+
] });
|
|
2868
|
+
}
|
|
2869
|
+
function LiveDot({ size = "sm" }) {
|
|
2870
|
+
const px = size === "md" ? "ww-h-2 ww-w-2" : "ww-h-1.5 ww-w-1.5";
|
|
2871
|
+
return /* @__PURE__ */ jsxs("span", { className: `ww-relative ww-flex ${px} ww-shrink-0`, children: [
|
|
2872
|
+
/* @__PURE__ */ jsx(
|
|
2873
|
+
"span",
|
|
2596
2874
|
{
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2875
|
+
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`
|
|
2876
|
+
}
|
|
2877
|
+
),
|
|
2878
|
+
/* @__PURE__ */ jsx(
|
|
2879
|
+
"span",
|
|
2600
2880
|
{
|
|
2601
|
-
|
|
2602
|
-
category: "pricing"
|
|
2881
|
+
className: `ww-relative ww-inline-flex ww-rounded-full ${px} ww-bg-emerald-500`
|
|
2603
2882
|
}
|
|
2604
|
-
|
|
2883
|
+
)
|
|
2884
|
+
] });
|
|
2885
|
+
}
|
|
2886
|
+
function urlRelevance(docUrl, pageUrl) {
|
|
2887
|
+
if (!docUrl || !pageUrl) return 0;
|
|
2888
|
+
const docClean = docUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2889
|
+
const pageClean = pageUrl.toLowerCase().replace(/https?:\/\//, "");
|
|
2890
|
+
if (docClean === pageClean) return 100;
|
|
2891
|
+
if (docClean.startsWith(pageClean) || pageClean.startsWith(docClean))
|
|
2892
|
+
return 50;
|
|
2893
|
+
const docParts = docClean.split(/[/?#]/).filter(Boolean);
|
|
2894
|
+
const pageParts = pageClean.split(/[/?#]/).filter(Boolean);
|
|
2895
|
+
let score = 0;
|
|
2896
|
+
for (const part of pageParts) {
|
|
2897
|
+
if (docParts.includes(part)) score += 10;
|
|
2605
2898
|
}
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2899
|
+
return score;
|
|
2900
|
+
}
|
|
2901
|
+
function topicToQuestion(topic, locale) {
|
|
2902
|
+
const name = topic.name.trim();
|
|
2903
|
+
if (name.endsWith("?")) return name;
|
|
2904
|
+
return getWidgetTranslation("tellMeAbout", locale, { name });
|
|
2905
|
+
}
|
|
2906
|
+
var STAGGER_MS = 50;
|
|
2907
|
+
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";
|
|
2908
|
+
function SectionLabel({ children }) {
|
|
2909
|
+
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 });
|
|
2910
|
+
}
|
|
2911
|
+
function PageBadge({
|
|
2912
|
+
pageTitle,
|
|
2913
|
+
pageUrl,
|
|
2914
|
+
locale
|
|
2915
|
+
}) {
|
|
2916
|
+
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: [
|
|
2917
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-2.5 ww-min-w-0", children: [
|
|
2918
|
+
/* @__PURE__ */ jsx("div", { className: "ww-w-2 ww-h-2 ww-rounded-full ww-bg-emerald-500 ww-animate-pulse ww-shrink-0" }),
|
|
2919
|
+
/* @__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) })
|
|
2920
|
+
] }),
|
|
2921
|
+
/* @__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" })
|
|
2922
|
+
] }) });
|
|
2923
|
+
}
|
|
2924
|
+
function ActionCard({
|
|
2925
|
+
action,
|
|
2926
|
+
index,
|
|
2927
|
+
accentColor,
|
|
2928
|
+
onExecute
|
|
2929
|
+
}) {
|
|
2930
|
+
return /* @__PURE__ */ jsxs(
|
|
2931
|
+
"button",
|
|
2932
|
+
{
|
|
2933
|
+
onClick: onExecute,
|
|
2934
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
2935
|
+
style: {
|
|
2936
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2937
|
+
animationFillMode: "both"
|
|
2614
2938
|
},
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2939
|
+
children: [
|
|
2940
|
+
/* @__PURE__ */ jsx(
|
|
2941
|
+
"div",
|
|
2942
|
+
{
|
|
2943
|
+
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",
|
|
2944
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2945
|
+
children: /* @__PURE__ */ jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2946
|
+
}
|
|
2947
|
+
),
|
|
2948
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
2949
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2950
|
+
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 })
|
|
2951
|
+
] }),
|
|
2952
|
+
/* @__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" })
|
|
2953
|
+
]
|
|
2954
|
+
}
|
|
2955
|
+
);
|
|
2956
|
+
}
|
|
2957
|
+
function ActionCardCompact({
|
|
2958
|
+
action,
|
|
2959
|
+
index,
|
|
2960
|
+
accentColor,
|
|
2961
|
+
onExecute
|
|
2962
|
+
}) {
|
|
2963
|
+
return /* @__PURE__ */ jsxs(
|
|
2964
|
+
"button",
|
|
2965
|
+
{
|
|
2966
|
+
onClick: onExecute,
|
|
2967
|
+
className: `${cardBase} ww-flex ww-flex-col ww-items-start ww-gap-2.5 ww-p-3.5`,
|
|
2968
|
+
style: {
|
|
2969
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
2970
|
+
animationFillMode: "both"
|
|
2625
2971
|
},
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2972
|
+
children: [
|
|
2973
|
+
/* @__PURE__ */ jsx(
|
|
2974
|
+
"div",
|
|
2975
|
+
{
|
|
2976
|
+
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",
|
|
2977
|
+
style: { backgroundColor: `${accentColor}12`, color: accentColor },
|
|
2978
|
+
children: /* @__PURE__ */ jsx(IconBolt, { className: "ww-w-4 ww-h-4" })
|
|
2979
|
+
}
|
|
2980
|
+
),
|
|
2981
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-min-w-0 ww-w-full", children: [
|
|
2982
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[12px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: action.name }),
|
|
2983
|
+
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 })
|
|
2984
|
+
] })
|
|
2985
|
+
]
|
|
2986
|
+
}
|
|
2987
|
+
);
|
|
2988
|
+
}
|
|
2989
|
+
function DocCard({
|
|
2990
|
+
doc,
|
|
2991
|
+
index,
|
|
2992
|
+
onSend,
|
|
2993
|
+
locale
|
|
2994
|
+
}) {
|
|
2995
|
+
return /* @__PURE__ */ jsxs(
|
|
2996
|
+
"button",
|
|
2997
|
+
{
|
|
2998
|
+
onClick: () => onSend(
|
|
2999
|
+
doc.summary ? getWidgetTranslation("tellMeMoreAbout", locale, {
|
|
3000
|
+
name: doc.name
|
|
3001
|
+
}) : getWidgetTranslation("whatDoYouKnowAbout", locale, {
|
|
3002
|
+
name: doc.name
|
|
3003
|
+
})
|
|
3004
|
+
),
|
|
3005
|
+
className: `${cardBase} ww-flex ww-items-start ww-gap-3.5 ww-p-3.5`,
|
|
3006
|
+
style: {
|
|
3007
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
3008
|
+
animationFillMode: "both"
|
|
2640
3009
|
},
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
3010
|
+
children: [
|
|
3011
|
+
/* @__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" }) }),
|
|
3012
|
+
/* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-min-w-0 ww-pt-0.5", children: [
|
|
3013
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[13px] ww-font-medium ww-block ww-truncate ww-text-foreground", children: doc.name }),
|
|
3014
|
+
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 })
|
|
3015
|
+
] }),
|
|
3016
|
+
/* @__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" })
|
|
3017
|
+
]
|
|
3018
|
+
}
|
|
3019
|
+
);
|
|
3020
|
+
}
|
|
3021
|
+
function TopicChip({
|
|
3022
|
+
topic,
|
|
3023
|
+
index,
|
|
3024
|
+
compact = false,
|
|
3025
|
+
onSend
|
|
3026
|
+
}) {
|
|
3027
|
+
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`;
|
|
3028
|
+
return /* @__PURE__ */ jsxs(
|
|
3029
|
+
"button",
|
|
3030
|
+
{
|
|
3031
|
+
onClick: () => onSend(topic.question),
|
|
3032
|
+
className: cls,
|
|
3033
|
+
style: {
|
|
3034
|
+
animationDelay: `${index * STAGGER_MS}ms`,
|
|
3035
|
+
animationFillMode: "both"
|
|
3036
|
+
},
|
|
3037
|
+
children: [
|
|
3038
|
+
/* @__PURE__ */ jsx(
|
|
3039
|
+
IconSparkle,
|
|
3040
|
+
{
|
|
3041
|
+
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`
|
|
3042
|
+
}
|
|
3043
|
+
),
|
|
3044
|
+
/* @__PURE__ */ jsx(
|
|
3045
|
+
"span",
|
|
3046
|
+
{
|
|
3047
|
+
className: `${compact ? "ww-text-[11px]" : "ww-text-[12px]"} ww-font-medium ww-text-foreground ww-flex-1 ww-text-left`,
|
|
3048
|
+
children: topic.question
|
|
3049
|
+
}
|
|
3050
|
+
),
|
|
3051
|
+
!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" })
|
|
3052
|
+
]
|
|
3053
|
+
}
|
|
3054
|
+
);
|
|
3055
|
+
}
|
|
3056
|
+
function CommandPanel({
|
|
3057
|
+
mode,
|
|
3058
|
+
pageUrl = "",
|
|
3059
|
+
pageTitle,
|
|
3060
|
+
clientActions = [],
|
|
3061
|
+
ragTopics = [],
|
|
3062
|
+
ragDocuments = [],
|
|
3063
|
+
onSend,
|
|
3064
|
+
onExecuteAction,
|
|
3065
|
+
accentColor = "#3b82f6",
|
|
3066
|
+
watermark = false,
|
|
3067
|
+
watermarkLogoUrl = "/wallavi.svg",
|
|
3068
|
+
footer,
|
|
3069
|
+
locale
|
|
3070
|
+
}) {
|
|
3071
|
+
const relevantDocs = useMemo(() => {
|
|
3072
|
+
if (!pageUrl && ragDocuments.length > 0) return ragDocuments.slice(0, 5);
|
|
3073
|
+
return ragDocuments.map((doc) => ({ ...doc, score: urlRelevance(doc.url, pageUrl) })).sort((a, b) => b.score - a.score).slice(0, 5);
|
|
3074
|
+
}, [ragDocuments, pageUrl]);
|
|
3075
|
+
const topicQuestions = useMemo(
|
|
3076
|
+
() => ragTopics.slice(0, 5).map((t) => ({
|
|
3077
|
+
...t,
|
|
3078
|
+
question: topicToQuestion(t, locale)
|
|
3079
|
+
})),
|
|
3080
|
+
[ragTopics, locale]
|
|
3081
|
+
);
|
|
3082
|
+
const hasActions = clientActions.length > 0;
|
|
3083
|
+
const hasDocs = relevantDocs.length > 0;
|
|
3084
|
+
const hasTopics = topicQuestions.length > 0;
|
|
3085
|
+
const hasContent = hasActions || hasDocs || hasTopics;
|
|
3086
|
+
if (!hasContent) return null;
|
|
3087
|
+
const isSidebar = mode === "sidebar";
|
|
3088
|
+
const handleExecute = (steps) => onExecuteAction?.(steps);
|
|
3089
|
+
if (isSidebar) {
|
|
3090
|
+
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: [
|
|
3091
|
+
/* @__PURE__ */ jsx(PageBadge, { pageTitle, pageUrl, locale }),
|
|
3092
|
+
/* @__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: [
|
|
3093
|
+
hasActions && /* @__PURE__ */ jsxs("section", { children: [
|
|
3094
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3095
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action, i) => /* @__PURE__ */ jsx(
|
|
3096
|
+
ActionCard,
|
|
3097
|
+
{
|
|
3098
|
+
action,
|
|
3099
|
+
index: i,
|
|
3100
|
+
accentColor,
|
|
3101
|
+
onExecute: () => handleExecute(action.steps)
|
|
3102
|
+
},
|
|
3103
|
+
action.name
|
|
3104
|
+
)) })
|
|
3105
|
+
] }),
|
|
3106
|
+
hasDocs && /* @__PURE__ */ jsxs("section", { children: [
|
|
3107
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3108
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.map((doc, i) => /* @__PURE__ */ jsx(
|
|
3109
|
+
DocCard,
|
|
3110
|
+
{
|
|
3111
|
+
doc,
|
|
3112
|
+
index: i,
|
|
3113
|
+
onSend,
|
|
3114
|
+
locale
|
|
3115
|
+
},
|
|
3116
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3117
|
+
)) })
|
|
3118
|
+
] }),
|
|
3119
|
+
hasTopics && /* @__PURE__ */ jsxs("section", { children: [
|
|
3120
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3121
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-1.5", children: topicQuestions.map((topic, i) => /* @__PURE__ */ jsx(
|
|
3122
|
+
TopicChip,
|
|
3123
|
+
{
|
|
3124
|
+
topic,
|
|
3125
|
+
index: i,
|
|
3126
|
+
onSend
|
|
3127
|
+
},
|
|
3128
|
+
topic.name
|
|
3129
|
+
)) })
|
|
3130
|
+
] })
|
|
3131
|
+
] }),
|
|
3132
|
+
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: [
|
|
3133
|
+
/* @__PURE__ */ jsxs(
|
|
3134
|
+
"a",
|
|
3135
|
+
{
|
|
3136
|
+
href: "https://wallavi.com",
|
|
3137
|
+
target: "_blank",
|
|
3138
|
+
rel: "noopener noreferrer",
|
|
3139
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3140
|
+
children: [
|
|
3141
|
+
/* @__PURE__ */ jsx(
|
|
3142
|
+
"img",
|
|
3143
|
+
{
|
|
3144
|
+
src: watermarkLogoUrl,
|
|
3145
|
+
alt: "Wallavi",
|
|
3146
|
+
width: 11,
|
|
3147
|
+
height: 11
|
|
3148
|
+
}
|
|
3149
|
+
),
|
|
3150
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
3151
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3152
|
+
" Wallavi"
|
|
3153
|
+
] })
|
|
3154
|
+
]
|
|
3155
|
+
}
|
|
3156
|
+
),
|
|
3157
|
+
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3158
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/45 ww-text-[10px]", children: "\xB7" }),
|
|
3159
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-truncate ww-max-w-[120px]", children: footer })
|
|
3160
|
+
] })
|
|
3161
|
+
] })
|
|
3162
|
+
] });
|
|
2647
3163
|
}
|
|
2648
|
-
return [
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
3164
|
+
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: [
|
|
3165
|
+
hasActions && /* @__PURE__ */ jsxs("section", { children: [
|
|
3166
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("quickActions", locale) }),
|
|
3167
|
+
/* @__PURE__ */ jsx("div", { className: "ww-grid ww-grid-cols-2 ww-gap-2", children: clientActions.slice(0, 4).map((action, i) => /* @__PURE__ */ jsx(
|
|
3168
|
+
ActionCardCompact,
|
|
3169
|
+
{
|
|
3170
|
+
action,
|
|
3171
|
+
index: i,
|
|
3172
|
+
accentColor,
|
|
3173
|
+
onExecute: () => handleExecute(action.steps)
|
|
3174
|
+
},
|
|
3175
|
+
action.name
|
|
3176
|
+
)) })
|
|
3177
|
+
] }),
|
|
3178
|
+
hasDocs && /* @__PURE__ */ jsxs("section", { children: [
|
|
3179
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("documentation", locale) }),
|
|
3180
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: relevantDocs.slice(0, 3).map((doc, i) => /* @__PURE__ */ jsx(
|
|
3181
|
+
DocCard,
|
|
3182
|
+
{
|
|
3183
|
+
doc,
|
|
3184
|
+
index: i,
|
|
3185
|
+
onSend,
|
|
3186
|
+
locale
|
|
3187
|
+
},
|
|
3188
|
+
`${doc.name}-${doc.url ?? i}`
|
|
3189
|
+
)) })
|
|
3190
|
+
] }),
|
|
3191
|
+
hasTopics && /* @__PURE__ */ jsxs("section", { children: [
|
|
3192
|
+
/* @__PURE__ */ jsx(SectionLabel, { children: getWidgetTranslation("askAbout", locale) }),
|
|
3193
|
+
/* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5", children: topicQuestions.slice(0, 4).map((topic, i) => /* @__PURE__ */ jsx(
|
|
3194
|
+
TopicChip,
|
|
3195
|
+
{
|
|
3196
|
+
topic,
|
|
3197
|
+
index: i,
|
|
3198
|
+
compact: true,
|
|
3199
|
+
onSend
|
|
3200
|
+
},
|
|
3201
|
+
topic.name
|
|
3202
|
+
)) })
|
|
3203
|
+
] })
|
|
3204
|
+
] });
|
|
2653
3205
|
}
|
|
2654
3206
|
function ChatWidget({
|
|
2655
3207
|
agentId,
|
|
@@ -2658,7 +3210,7 @@ function ChatWidget({
|
|
|
2658
3210
|
displayName,
|
|
2659
3211
|
profilePicture,
|
|
2660
3212
|
userMessageColor = "#19191c",
|
|
2661
|
-
initialMessages
|
|
3213
|
+
initialMessages,
|
|
2662
3214
|
suggestedMessages = [],
|
|
2663
3215
|
messagePlaceholder,
|
|
2664
3216
|
watermark = true,
|
|
@@ -2686,7 +3238,14 @@ function ChatWidget({
|
|
|
2686
3238
|
envId,
|
|
2687
3239
|
onDebugTrace,
|
|
2688
3240
|
widgetLayout,
|
|
2689
|
-
|
|
3241
|
+
showCommandPanel = true,
|
|
3242
|
+
showRagTopics = true,
|
|
3243
|
+
showRagDocuments = true,
|
|
3244
|
+
showQuickActions = true,
|
|
3245
|
+
locale = "en",
|
|
3246
|
+
clientActions = [],
|
|
3247
|
+
ragTopics = [],
|
|
3248
|
+
ragDocuments = []
|
|
2690
3249
|
}) {
|
|
2691
3250
|
const [isDesktop, setIsDesktop] = useState(false);
|
|
2692
3251
|
useEffect(() => {
|
|
@@ -2775,10 +3334,24 @@ function ChatWidget({
|
|
|
2775
3334
|
chat.reset();
|
|
2776
3335
|
onReset?.();
|
|
2777
3336
|
};
|
|
2778
|
-
const
|
|
3337
|
+
const [resolvedTheme, setResolvedTheme] = useState("light");
|
|
3338
|
+
useEffect(() => {
|
|
3339
|
+
if (theme === "system") {
|
|
3340
|
+
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
3341
|
+
setResolvedTheme(media.matches ? "dark" : "light");
|
|
3342
|
+
const listener = (e) => {
|
|
3343
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
3344
|
+
};
|
|
3345
|
+
media.addEventListener("change", listener);
|
|
3346
|
+
return () => media.removeEventListener("change", listener);
|
|
3347
|
+
} else {
|
|
3348
|
+
setResolvedTheme(theme || "light");
|
|
3349
|
+
}
|
|
3350
|
+
}, [theme]);
|
|
3351
|
+
const isDark = resolvedTheme === "dark";
|
|
2779
3352
|
const cssVars = {
|
|
2780
3353
|
fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
2781
|
-
colorScheme:
|
|
3354
|
+
colorScheme: resolvedTheme,
|
|
2782
3355
|
// Inline style has higher specificity than any host-site stylesheet,
|
|
2783
3356
|
// so background-color set here cannot be overridden by host CSS.
|
|
2784
3357
|
backgroundColor: isDark ? "hsl(240 10% 3.9%)" : "hsl(0 0% 100%)",
|
|
@@ -2796,13 +3369,36 @@ function ChatWidget({
|
|
|
2796
3369
|
["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
|
|
2797
3370
|
["--radius"]: "0.5rem"
|
|
2798
3371
|
};
|
|
2799
|
-
const
|
|
3372
|
+
const defaultEnglishGreeting = "Hello! How can I help you today?";
|
|
3373
|
+
const isDefaultGreeting = !initialMessages || initialMessages.length === 0 || initialMessages.length === 1 && initialMessages[0] === defaultEnglishGreeting;
|
|
3374
|
+
const messagesList = isDefaultGreeting ? [getWidgetTranslation("defaultGreeting", locale)] : initialMessages;
|
|
3375
|
+
const showSidebar = showCommandPanel && widgetLayout === "center" && isDesktop;
|
|
3376
|
+
const showInlineCommandPanel = showCommandPanel && !showSidebar && chat.messages.length === 0 && (showQuickActions && clientActions.length > 0 || showRagTopics && ragTopics.length > 0 || showRagDocuments && ragDocuments.length > 0);
|
|
3377
|
+
const handleExecuteAction = useCallback(
|
|
3378
|
+
(steps) => {
|
|
3379
|
+
executeDeclarativeSteps(steps, onNavigate);
|
|
3380
|
+
},
|
|
3381
|
+
[onNavigate]
|
|
3382
|
+
);
|
|
3383
|
+
const commandPanelProps = {
|
|
3384
|
+
pageUrl: userContext?.pageContext?.url,
|
|
3385
|
+
pageTitle: userContext?.pageContext?.title,
|
|
3386
|
+
clientActions: showQuickActions ? clientActions : [],
|
|
3387
|
+
ragTopics: showRagTopics ? ragTopics : [],
|
|
3388
|
+
ragDocuments: showRagDocuments ? ragDocuments : [],
|
|
3389
|
+
onSend: (text) => chat.send(text),
|
|
3390
|
+
onExecuteAction: handleExecuteAction,
|
|
3391
|
+
accentColor: userMessageColor,
|
|
3392
|
+
watermark,
|
|
3393
|
+
watermarkLogoUrl,
|
|
3394
|
+
footer,
|
|
3395
|
+
locale
|
|
3396
|
+
};
|
|
2800
3397
|
return /* @__PURE__ */ jsxs(
|
|
2801
3398
|
"div",
|
|
2802
3399
|
{
|
|
2803
3400
|
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",
|
|
3401
|
+
"wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
|
|
2806
3402
|
!embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
|
|
2807
3403
|
isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
|
|
2808
3404
|
className
|
|
@@ -2813,293 +3409,228 @@ function ChatWidget({
|
|
|
2813
3409
|
onDragLeave: handleDragLeave,
|
|
2814
3410
|
onDrop: handleDrop,
|
|
2815
3411
|
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
|
-
}
|
|
3412
|
+
/* @__PURE__ */ jsx(
|
|
3413
|
+
ChatHeader,
|
|
3414
|
+
{
|
|
3415
|
+
title,
|
|
3416
|
+
profilePicture,
|
|
3417
|
+
headerBg,
|
|
3418
|
+
headerText,
|
|
3419
|
+
onReset: handleReset,
|
|
3420
|
+
onClose: hideCloseButton ? void 0 : onClose,
|
|
3421
|
+
onExpand,
|
|
3422
|
+
expanded,
|
|
3423
|
+
onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
|
|
3424
|
+
isCallLoading: chat.voiceCall?.loading,
|
|
3425
|
+
locale
|
|
3426
|
+
}
|
|
3427
|
+
),
|
|
3428
|
+
/* @__PURE__ */ jsxs(
|
|
3429
|
+
"div",
|
|
3430
|
+
{
|
|
3431
|
+
className: cn(
|
|
3432
|
+
"ww-flex ww-flex-row ww-flex-1 ww-w-full ww-overflow-hidden",
|
|
3433
|
+
showSidebar && "ww-bg-muted/50"
|
|
3015
3434
|
),
|
|
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",
|
|
3435
|
+
children: [
|
|
3436
|
+
/* @__PURE__ */ jsxs(
|
|
3437
|
+
"div",
|
|
3038
3438
|
{
|
|
3039
|
-
|
|
3040
|
-
|
|
3439
|
+
className: cn(
|
|
3440
|
+
"ww-flex ww-flex-col ww-flex-1 ww-h-full ww-overflow-hidden ww-relative ww-bg-background",
|
|
3441
|
+
showSidebar && "ww-rounded-br-2xl"
|
|
3442
|
+
),
|
|
3041
3443
|
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
|
-
|
|
3444
|
+
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: [
|
|
3445
|
+
/* @__PURE__ */ jsx(UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
|
|
3446
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: getWidgetTranslation("dropFiles", locale) }),
|
|
3447
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
|
|
3448
|
+
] }),
|
|
3449
|
+
chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsx(
|
|
3450
|
+
VoiceOverlay,
|
|
3451
|
+
{
|
|
3452
|
+
token: chat.voiceCall.token,
|
|
3453
|
+
serverUrl: chat.voiceCall.serverUrl,
|
|
3454
|
+
onClose: chat.voiceCall.stop,
|
|
3455
|
+
accentColor: userMessageColor,
|
|
3456
|
+
locale
|
|
3457
|
+
}
|
|
3458
|
+
),
|
|
3459
|
+
customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
|
|
3460
|
+
"div",
|
|
3461
|
+
{
|
|
3462
|
+
className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
|
|
3463
|
+
style: { backgroundColor: `${userMessageColor}0d` },
|
|
3464
|
+
children: [
|
|
3465
|
+
/* @__PURE__ */ jsx(LiveDot, { size: "md" }),
|
|
3466
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: getWidgetTranslation("talkingToAgent", locale) })
|
|
3467
|
+
]
|
|
3468
|
+
}
|
|
3469
|
+
),
|
|
3470
|
+
/* @__PURE__ */ jsx(
|
|
3471
|
+
ChatMessages,
|
|
3472
|
+
{
|
|
3473
|
+
messages: chat.messages,
|
|
3474
|
+
streaming: chat.streaming,
|
|
3475
|
+
agentName,
|
|
3476
|
+
profilePicture,
|
|
3477
|
+
userColor: userMessageColor,
|
|
3478
|
+
initialMessages: messagesList,
|
|
3479
|
+
suggestedMessages,
|
|
3480
|
+
showThinking,
|
|
3481
|
+
onSuggest: (msg) => chat.send(msg),
|
|
3482
|
+
onPickerSelect: chat.selectPickerOption,
|
|
3483
|
+
locale,
|
|
3484
|
+
commandPanel: showInlineCommandPanel ? /* @__PURE__ */ jsx(CommandPanel, { mode: "inline", ...commandPanelProps }) : void 0
|
|
3485
|
+
}
|
|
3486
|
+
),
|
|
3487
|
+
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(
|
|
3488
|
+
"button",
|
|
3489
|
+
{
|
|
3490
|
+
onClick: () => void customBackend.footerAction.onClick(),
|
|
3491
|
+
disabled: customBackend.footerAction.loading,
|
|
3492
|
+
style: customBackend.footerAction.icon === "human" ? {
|
|
3493
|
+
backgroundColor: userMessageColor,
|
|
3494
|
+
color: "#ffffff",
|
|
3495
|
+
boxShadow: `0 2px 12px ${userMessageColor}55`
|
|
3496
|
+
} : {
|
|
3497
|
+
borderColor: `${userMessageColor}35`,
|
|
3498
|
+
backgroundColor: `${userMessageColor}0d`,
|
|
3499
|
+
color: userMessageColor
|
|
3500
|
+
},
|
|
3501
|
+
className: [
|
|
3502
|
+
"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",
|
|
3503
|
+
"hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
|
|
3504
|
+
customBackend.footerAction.icon === "human" ? "" : "ww-border"
|
|
3505
|
+
].join(" "),
|
|
3506
|
+
children: [
|
|
3507
|
+
customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
|
|
3508
|
+
"svg",
|
|
3053
3509
|
{
|
|
3510
|
+
className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3511
|
+
viewBox: "0 0 24 24",
|
|
3512
|
+
fill: "none",
|
|
3513
|
+
children: [
|
|
3514
|
+
/* @__PURE__ */ jsx(
|
|
3515
|
+
"circle",
|
|
3516
|
+
{
|
|
3517
|
+
className: "ww-opacity-25",
|
|
3518
|
+
cx: "12",
|
|
3519
|
+
cy: "12",
|
|
3520
|
+
r: "10",
|
|
3521
|
+
stroke: "currentColor",
|
|
3522
|
+
strokeWidth: "3"
|
|
3523
|
+
}
|
|
3524
|
+
),
|
|
3525
|
+
/* @__PURE__ */ jsx(
|
|
3526
|
+
"path",
|
|
3527
|
+
{
|
|
3528
|
+
className: "ww-opacity-75",
|
|
3529
|
+
fill: "currentColor",
|
|
3530
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
3531
|
+
}
|
|
3532
|
+
)
|
|
3533
|
+
]
|
|
3534
|
+
}
|
|
3535
|
+
) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
|
|
3536
|
+
"svg",
|
|
3537
|
+
{
|
|
3538
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3539
|
+
viewBox: "0 0 24 24",
|
|
3540
|
+
fill: "none",
|
|
3541
|
+
stroke: "currentColor",
|
|
3542
|
+
strokeWidth: "2",
|
|
3054
3543
|
strokeLinecap: "round",
|
|
3055
3544
|
strokeLinejoin: "round",
|
|
3056
|
-
d: "
|
|
3545
|
+
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
3546
|
}
|
|
3058
|
-
)
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
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",
|
|
3547
|
+
) : /* @__PURE__ */ jsxs(
|
|
3548
|
+
"svg",
|
|
3549
|
+
{
|
|
3550
|
+
className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
|
|
3551
|
+
viewBox: "0 0 24 24",
|
|
3552
|
+
fill: "none",
|
|
3553
|
+
stroke: "currentColor",
|
|
3554
|
+
strokeWidth: "2",
|
|
3555
|
+
strokeLinecap: "round",
|
|
3556
|
+
strokeLinejoin: "round",
|
|
3557
|
+
children: [
|
|
3558
|
+
/* @__PURE__ */ jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
3559
|
+
/* @__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" })
|
|
3560
|
+
]
|
|
3561
|
+
}
|
|
3562
|
+
),
|
|
3563
|
+
/* @__PURE__ */ jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
|
|
3564
|
+
/* @__PURE__ */ jsx(
|
|
3565
|
+
"svg",
|
|
3088
3566
|
{
|
|
3567
|
+
className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
|
|
3568
|
+
viewBox: "0 0 24 24",
|
|
3569
|
+
fill: "none",
|
|
3570
|
+
stroke: "currentColor",
|
|
3571
|
+
strokeWidth: "2.5",
|
|
3089
3572
|
strokeLinecap: "round",
|
|
3090
3573
|
strokeLinejoin: "round",
|
|
3091
|
-
|
|
3574
|
+
children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
|
|
3092
3575
|
}
|
|
3093
3576
|
)
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3577
|
+
]
|
|
3578
|
+
}
|
|
3579
|
+
) }),
|
|
3580
|
+
/* @__PURE__ */ jsx(
|
|
3581
|
+
ChatInput,
|
|
3582
|
+
{
|
|
3583
|
+
input: chat.input,
|
|
3584
|
+
setInput: chat.setInput,
|
|
3585
|
+
onSend: handleSend,
|
|
3586
|
+
streaming: chat.streaming,
|
|
3587
|
+
placeholder: messagePlaceholder,
|
|
3588
|
+
accentColor: userMessageColor,
|
|
3589
|
+
locale,
|
|
3590
|
+
canRegenerate: !!canRegenerate,
|
|
3591
|
+
onRegenerate: () => void chat.regenerate(),
|
|
3592
|
+
selectedContext: chat.selectedContext,
|
|
3593
|
+
onClearContext: () => chat.setSelectedContext(null),
|
|
3594
|
+
...enableVoice && voice.isSupported ? {
|
|
3595
|
+
voiceState: voice.voiceState,
|
|
3596
|
+
onVoiceStart: () => void voice.start(),
|
|
3597
|
+
onVoiceStop: voice.stop
|
|
3598
|
+
} : {},
|
|
3599
|
+
...enableAttachments ? {
|
|
3600
|
+
attachments: attachmentHook.attachments,
|
|
3601
|
+
onAttach: attachmentHook.attach,
|
|
3602
|
+
onRemoveAttachment: attachmentHook.remove,
|
|
3603
|
+
isUploading: attachmentHook.isUploading
|
|
3604
|
+
} : {}
|
|
3605
|
+
}
|
|
3606
|
+
)
|
|
3607
|
+
]
|
|
3608
|
+
}
|
|
3609
|
+
),
|
|
3610
|
+
showSidebar && /* @__PURE__ */ jsx(CommandPanel, { mode: "sidebar", ...commandPanelProps })
|
|
3611
|
+
]
|
|
3612
|
+
}
|
|
3613
|
+
),
|
|
3614
|
+
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: [
|
|
3615
|
+
/* @__PURE__ */ jsxs(
|
|
3616
|
+
"a",
|
|
3617
|
+
{
|
|
3618
|
+
href: "https://wallavi.com",
|
|
3619
|
+
target: "_blank",
|
|
3620
|
+
rel: "noopener noreferrer",
|
|
3621
|
+
className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
|
|
3622
|
+
children: [
|
|
3623
|
+
/* @__PURE__ */ jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
|
|
3624
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
3625
|
+
getWidgetTranslation("poweredBy", locale),
|
|
3626
|
+
" Wallavi"
|
|
3627
|
+
] })
|
|
3628
|
+
]
|
|
3629
|
+
}
|
|
3630
|
+
),
|
|
3631
|
+
footer && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3632
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
|
|
3633
|
+
/* @__PURE__ */ jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
|
|
3103
3634
|
] })
|
|
3104
3635
|
] })
|
|
3105
3636
|
]
|
|
@@ -3160,6 +3691,10 @@ function useAutoConfig(agentId, enabled) {
|
|
|
3160
3691
|
remote.enableVoice = cfg.enableVoice;
|
|
3161
3692
|
if (cfg.clientActions)
|
|
3162
3693
|
remote.clientActions = cfg.clientActions;
|
|
3694
|
+
if (Array.isArray(cfg.ragTopics))
|
|
3695
|
+
remote.ragTopics = cfg.ragTopics;
|
|
3696
|
+
if (Array.isArray(cfg.ragDocuments))
|
|
3697
|
+
remote.ragDocuments = cfg.ragDocuments;
|
|
3163
3698
|
setResult({
|
|
3164
3699
|
remoteConfig: remote,
|
|
3165
3700
|
bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
|
|
@@ -3194,8 +3729,11 @@ function useSupportChat({
|
|
|
3194
3729
|
inboxToken,
|
|
3195
3730
|
apiBase = "https://app.wallavi.com",
|
|
3196
3731
|
requestHumanLabel = "Hablar con un agente",
|
|
3197
|
-
returnToAiLabel
|
|
3732
|
+
returnToAiLabel,
|
|
3733
|
+
locale
|
|
3198
3734
|
}) {
|
|
3735
|
+
const resolvedRequestHumanLabel = requestHumanLabel && requestHumanLabel !== "Hablar con un agente" ? requestHumanLabel : getWidgetTranslation("requestHuman", locale);
|
|
3736
|
+
const resolvedReturnToAiLabel = returnToAiLabel && returnToAiLabel !== "Volver a chatear con la IA" ? returnToAiLabel : returnToAiLabel ? getWidgetTranslation("returnToAi", locale) : void 0;
|
|
3199
3737
|
const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
|
|
3200
3738
|
const STORAGE_KEY = `wlv_support_${inboxToken}`;
|
|
3201
3739
|
const base = apiBase.replace(/\/$/, "");
|
|
@@ -3336,7 +3874,9 @@ function useSupportChat({
|
|
|
3336
3874
|
{
|
|
3337
3875
|
id: `tmp_${Date.now()}`,
|
|
3338
3876
|
role: "customer",
|
|
3339
|
-
content: text || `[${
|
|
3877
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3878
|
+
count: String(attachments?.length ?? 0)
|
|
3879
|
+
})}]`,
|
|
3340
3880
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3341
3881
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3342
3882
|
}
|
|
@@ -3347,7 +3887,9 @@ function useSupportChat({
|
|
|
3347
3887
|
headers: { "Content-Type": "application/json" },
|
|
3348
3888
|
body: JSON.stringify({
|
|
3349
3889
|
inboxToken,
|
|
3350
|
-
message: text || `[${
|
|
3890
|
+
message: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3891
|
+
count: String(attachments.length)
|
|
3892
|
+
})}]`,
|
|
3351
3893
|
attachments
|
|
3352
3894
|
})
|
|
3353
3895
|
});
|
|
@@ -3376,7 +3918,9 @@ function useSupportChat({
|
|
|
3376
3918
|
{
|
|
3377
3919
|
id: `tmp_${Date.now()}`,
|
|
3378
3920
|
role: "customer",
|
|
3379
|
-
content: text || `[${
|
|
3921
|
+
content: text || `[${getWidgetTranslation("filesCount", locale, {
|
|
3922
|
+
count: String(attachments.length)
|
|
3923
|
+
})}]`,
|
|
3380
3924
|
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
3381
3925
|
metadata: attachments?.length ? { attachments } : void 0
|
|
3382
3926
|
}
|
|
@@ -3496,17 +4040,17 @@ function useSupportChat({
|
|
|
3496
4040
|
const footerAction = useMemo(() => {
|
|
3497
4041
|
if (isAiMode) {
|
|
3498
4042
|
return {
|
|
3499
|
-
label:
|
|
3500
|
-
sublabel: "
|
|
4043
|
+
label: resolvedRequestHumanLabel,
|
|
4044
|
+
sublabel: getWidgetTranslation("requestHumanSublabel", locale),
|
|
3501
4045
|
icon: "human",
|
|
3502
4046
|
onClick: requestHuman,
|
|
3503
4047
|
loading: requestingHuman
|
|
3504
4048
|
};
|
|
3505
4049
|
}
|
|
3506
|
-
if (
|
|
4050
|
+
if (session && resolvedReturnToAiLabel) {
|
|
3507
4051
|
return {
|
|
3508
|
-
label:
|
|
3509
|
-
sublabel: "
|
|
4052
|
+
label: resolvedReturnToAiLabel,
|
|
4053
|
+
sublabel: getWidgetTranslation("returnToAiSublabel", locale),
|
|
3510
4054
|
icon: "ai",
|
|
3511
4055
|
onClick: returnToAi,
|
|
3512
4056
|
loading: returningToAi
|
|
@@ -3516,12 +4060,13 @@ function useSupportChat({
|
|
|
3516
4060
|
}, [
|
|
3517
4061
|
isAiMode,
|
|
3518
4062
|
session,
|
|
3519
|
-
|
|
4063
|
+
resolvedRequestHumanLabel,
|
|
4064
|
+
resolvedReturnToAiLabel,
|
|
3520
4065
|
requestHuman,
|
|
3521
4066
|
requestingHuman,
|
|
3522
|
-
returnToAiLabel,
|
|
3523
4067
|
returnToAi,
|
|
3524
|
-
returningToAi
|
|
4068
|
+
returningToAi,
|
|
4069
|
+
locale
|
|
3525
4070
|
]);
|
|
3526
4071
|
return useMemo(
|
|
3527
4072
|
() => ({
|
|
@@ -3584,14 +4129,6 @@ function BubbleWidget({
|
|
|
3584
4129
|
onOpenChange,
|
|
3585
4130
|
...chatProps
|
|
3586
4131
|
}) {
|
|
3587
|
-
const supportBackend = useSupportChat(
|
|
3588
|
-
inboxToken ? {
|
|
3589
|
-
inboxToken,
|
|
3590
|
-
apiBase: supportApiBase,
|
|
3591
|
-
requestHumanLabel,
|
|
3592
|
-
returnToAiLabel
|
|
3593
|
-
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
3594
|
-
);
|
|
3595
4132
|
const isControlled = isOpenProp !== void 0;
|
|
3596
4133
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
3597
4134
|
const open = isControlled ? isOpenProp : internalOpen;
|
|
@@ -3643,6 +4180,15 @@ function BubbleWidget({
|
|
|
3643
4180
|
agentName: remote.remoteConfig.agentName ?? chatProps.agentName ?? "Asistente",
|
|
3644
4181
|
source: chatProps.source ?? remote.remoteConfig.source ?? "web"
|
|
3645
4182
|
};
|
|
4183
|
+
const supportBackend = useSupportChat(
|
|
4184
|
+
inboxToken ? {
|
|
4185
|
+
inboxToken,
|
|
4186
|
+
apiBase: supportApiBase,
|
|
4187
|
+
requestHumanLabel,
|
|
4188
|
+
returnToAiLabel,
|
|
4189
|
+
locale: mergedConfig.locale
|
|
4190
|
+
} : { inboxToken: "__disabled__", apiBase: supportApiBase }
|
|
4191
|
+
);
|
|
3646
4192
|
const setOpenRef = useRef(setOpen);
|
|
3647
4193
|
useEffect(() => {
|
|
3648
4194
|
setOpenRef.current = setOpen;
|
|
@@ -3798,4 +4344,4 @@ function BubbleWidget({
|
|
|
3798
4344
|
] });
|
|
3799
4345
|
}
|
|
3800
4346
|
|
|
3801
|
-
export { BubbleWidget, ChatWidget, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };
|
|
4347
|
+
export { BubbleWidget, ChatWidget, CommandPanel, IconTarget, LiveDot, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };
|