@wallavi/widget 1.6.8 → 1.7.1

package/dist/index.mjs

@@ -1,11 +1,13 @@
 import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { UploadCloud, X, RotateCcw, Loader2, Square, Mic, Paperclip, ArrowUp, Zap, ChevronDown, CheckCircle2, AlertCircle, Search, Check, FileText, FileSpreadsheet } from 'lucide-react';
+import { Loader2, CheckCircle2, AlertCircle, Zap, Check, X, ChevronDown, UploadCloud, Phone, RotateCcw, Square, Mic, Paperclip, ArrowUp, MicOff, PhoneOff, Search, FileText, FileSpreadsheet } from 'lucide-react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactMarkdownLib from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { LiveKitRoom, RoomAudioRenderer, useVoiceAssistant, BarVisualizer, useLocalParticipant, useRoomContext } from '@livekit/components-react';
+import '@livekit/components-styles';
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -30,11 +32,11 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles.css
-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-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-mb-1 {\n  margin-bottom: 0.25rem;\n}\n.ww-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n  margin-left: 0.125rem;\n}\n.ww-mt-0\\.5 {\n  margin-top: 0.125rem;\n}\n.ww-mt-1 {\n  margin-top: 0.25rem;\n}\n.ww-block {\n  display: block;\n}\n.ww-inline-block {\n  display: inline-block;\n}\n.ww-flex {\n  display: flex;\n}\n.ww-inline-flex {\n  display: inline-flex;\n}\n.ww-grid {\n  display: grid;\n}\n.ww-hidden {\n  display: none;\n}\n.ww-h-10 {\n  height: 2.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-6 {\n  height: 1.5rem;\n}\n.ww-h-7 {\n  height: 1.75rem;\n}\n.ww-h-8 {\n  height: 2rem;\n}\n.ww-h-full {\n  height: 100%;\n}\n.ww-max-h-32 {\n  max-height: 8rem;\n}\n.ww-max-h-48 {\n  max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n  max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n  max-height: 180px;\n}\n.ww-w-0\\.5 {\n  width: 0.125rem;\n}\n.ww-w-10 {\n  width: 2.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-6 {\n  width: 1.5rem;\n}\n.ww-w-7 {\n  width: 1.75rem;\n}\n.ww-w-8 {\n  width: 2rem;\n}\n.ww-w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.ww-w-full {\n  width: 100%;\n}\n.ww-min-w-0 {\n  min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n  max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n  max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n  max-width: 82%;\n}\n.ww-max-w-none {\n  max-width: none;\n}\n.ww-flex-1 {\n  flex: 1 1 0%;\n}\n.ww-shrink-0 {\n  flex-shrink: 0;\n}\n.ww-rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@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-select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.ww-resize-none {\n  resize: none;\n}\n.ww-grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-col {\n  flex-direction: column;\n}\n.ww-flex-wrap {\n  flex-wrap: wrap;\n}\n.ww-items-start {\n  align-items: flex-start;\n}\n.ww-items-end {\n  align-items: flex-end;\n}\n.ww-items-center {\n  align-items: center;\n}\n.ww-justify-end {\n  justify-content: flex-end;\n}\n.ww-justify-center {\n  justify-content: center;\n}\n.ww-justify-between {\n  justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n  gap: 0.125rem;\n}\n.ww-gap-1 {\n  gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n  gap: 0.375rem;\n}\n.ww-gap-2 {\n  gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n  gap: 0.625rem;\n}\n.ww-gap-4 {\n  gap: 1rem;\n}\n.ww-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-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-xl {\n  border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n  border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n  border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n  border-width: 1px;\n}\n.ww-border-2 {\n  border-width: 2px;\n}\n.ww-border-b {\n  border-bottom-width: 1px;\n}\n.ww-border-l-2 {\n  border-left-width: 2px;\n}\n.ww-border-t {\n  border-top-width: 1px;\n}\n.ww-border-background {\n  border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n  border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n  border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n  border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n  border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n  border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/70 {\n  border-color: hsl(var(--border) / 0.7);\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-red-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-white\\/20 {\n  border-color: rgb(255 255 255 / 0.2);\n}\n.ww-bg-background {\n  background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n  background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/40 {\n  background-color: hsl(var(--background) / 0.4);\n}\n.ww-bg-background\\/50 {\n  background-color: hsl(var(--background) / 0.5);\n}\n.ww-bg-background\\/90 {\n  background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-black\\/10 {\n  background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-foreground {\n  background-color: hsl(var(--foreground));\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\\/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\\/5 {\n  background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-red-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n  background-color: transparent;\n}\n.ww-bg-white\\/10 {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n  background-color: rgb(255 255 255 / 0.15);\n}\n.ww-fill-current {\n  fill: currentColor;\n}\n.ww-object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ww-p-0\\.5 {\n  padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n  padding: 0.375rem;\n}\n.ww-p-3 {\n  padding: 0.75rem;\n}\n.ww-px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.ww-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.ww-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.ww-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n  padding-bottom: 0.375rem;\n}\n.ww-pb-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-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-\\[12px\\] {\n  font-size: 12px;\n}\n.ww-text-\\[8px\\] {\n  font-size: 8px;\n}\n.ww-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ww-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.ww-font-medium {\n  font-weight: 500;\n}\n.ww-font-semibold {\n  font-weight: 600;\n}\n.ww-uppercase {\n  text-transform: uppercase;\n}\n.ww-leading-none {\n  line-height: 1;\n}\n.ww-leading-relaxed {\n  line-height: 1.625;\n}\n.ww-leading-snug {\n  line-height: 1.375;\n}\n.ww-leading-tight {\n  line-height: 1.25;\n}\n.ww-tracking-widest {\n  letter-spacing: 0.1em;\n}\n.ww-text-background {\n  color: hsl(var(--background));\n}\n.ww-text-black\\/40 {\n  color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n  color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n  color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n  color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n  --tw-text-opacity: 1;\n  color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n  color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n  color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n  color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n  color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n  color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n  color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n  color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n  color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n  color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n  color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n  color: rgb(255 255 255 / 0.8);\n}\n.ww-line-through {\n  text-decoration-line: line-through;\n}\n.ww-no-underline {\n  text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n  text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n  opacity: 1;\n}\n.ww-opacity-30 {\n  opacity: 0.3;\n}\n.ww-opacity-35 {\n  opacity: 0.35;\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-80 {\n  opacity: 0.8;\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-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\\/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-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-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-100 {\n  transition-duration: 100ms;\n}\n.ww-duration-150 {\n  transition-duration: 150ms;\n}\n.ww-duration-200 {\n  transition-duration: 200ms;\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-duration-100 {\n  animation-duration: 100ms;\n}\n.ww-duration-150 {\n  animation-duration: 150ms;\n}\n.ww-duration-200 {\n  animation-duration: 200ms;\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  cursor: pointer;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n  max-width: 100%;\n  height: auto;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.focus-within\\:ww-ring-1:focus-within {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:ww-border-foreground\\/25:hover {\n  border-color: hsl(var(--foreground) / 0.25);\n}\n.hover\\:ww-border-foreground\\/30:hover {\n  border-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-background:hover {\n  background-color: hsl(var(--background));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n  background-color: hsl(var(--foreground) / 0.1);\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-foreground:hover {\n  color: hsl(var(--foreground));\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.disabled\\:ww-opacity-40:disabled {\n  opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n  opacity: 0.5;\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n  --tw-border-opacity: 1;\n  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
+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-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-mt-0\\.5 {\n  margin-top: 0.125rem;\n}\n.ww-mt-1 {\n  margin-top: 0.25rem;\n}\n.ww-block {\n  display: block;\n}\n.ww-inline-block {\n  display: inline-block;\n}\n.ww-flex {\n  display: flex;\n}\n.ww-inline-flex {\n  display: inline-flex;\n}\n.ww-grid {\n  display: grid;\n}\n.ww-hidden {\n  display: none;\n}\n.ww-h-10 {\n  height: 2.5rem;\n}\n.ww-h-16 {\n  height: 4rem;\n}\n.ww-h-2 {\n  height: 0.5rem;\n}\n.ww-h-2\\.5 {\n  height: 0.625rem;\n}\n.ww-h-20 {\n  height: 5rem;\n}\n.ww-h-3 {\n  height: 0.75rem;\n}\n.ww-h-3\\.5 {\n  height: 0.875rem;\n}\n.ww-h-4 {\n  height: 1rem;\n}\n.ww-h-40 {\n  height: 10rem;\n}\n.ww-h-48 {\n  height: 12rem;\n}\n.ww-h-6 {\n  height: 1.5rem;\n}\n.ww-h-7 {\n  height: 1.75rem;\n}\n.ww-h-8 {\n  height: 2rem;\n}\n.ww-h-full {\n  height: 100%;\n}\n.ww-max-h-32 {\n  max-height: 8rem;\n}\n.ww-max-h-48 {\n  max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n  max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n  max-height: 180px;\n}\n.ww-w-0\\.5 {\n  width: 0.125rem;\n}\n.ww-w-10 {\n  width: 2.5rem;\n}\n.ww-w-16 {\n  width: 4rem;\n}\n.ww-w-2 {\n  width: 0.5rem;\n}\n.ww-w-2\\.5 {\n  width: 0.625rem;\n}\n.ww-w-20 {\n  width: 5rem;\n}\n.ww-w-3 {\n  width: 0.75rem;\n}\n.ww-w-3\\.5 {\n  width: 0.875rem;\n}\n.ww-w-4 {\n  width: 1rem;\n}\n.ww-w-48 {\n  width: 12rem;\n}\n.ww-w-6 {\n  width: 1.5rem;\n}\n.ww-w-7 {\n  width: 1.75rem;\n}\n.ww-w-8 {\n  width: 2rem;\n}\n.ww-w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.ww-w-full {\n  width: 100%;\n}\n.ww-min-w-0 {\n  min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n  max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n  max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n  max-width: 82%;\n}\n.ww-max-w-none {\n  max-width: none;\n}\n.ww-flex-1 {\n  flex: 1 1 0%;\n}\n.ww-shrink-0 {\n  flex-shrink: 0;\n}\n.ww-rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-105 {\n  --tw-scale-x: 1.05;\n  --tw-scale-y: 1.05;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-110 {\n  --tw-scale-x: 1.1;\n  --tw-scale-y: 1.1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-90 {\n  --tw-scale-x: .9;\n  --tw-scale-y: .9;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes ww-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ww-animate-ping {\n  animation: ww-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ww-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n.ww-animate-pulse {\n  animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ww-animate-spin {\n  animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n  cursor: default;\n}\n.ww-cursor-pointer {\n  cursor: pointer;\n}\n.ww-touch-none {\n  touch-action: none;\n}\n.ww-select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.ww-resize-none {\n  resize: none;\n}\n.ww-grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-col {\n  flex-direction: column;\n}\n.ww-flex-wrap {\n  flex-wrap: wrap;\n}\n.ww-items-start {\n  align-items: flex-start;\n}\n.ww-items-end {\n  align-items: flex-end;\n}\n.ww-items-center {\n  align-items: center;\n}\n.ww-justify-end {\n  justify-content: flex-end;\n}\n.ww-justify-center {\n  justify-content: center;\n}\n.ww-justify-between {\n  justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n  gap: 0.125rem;\n}\n.ww-gap-1 {\n  gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n  gap: 0.375rem;\n}\n.ww-gap-2 {\n  gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n  gap: 0.625rem;\n}\n.ww-gap-4 {\n  gap: 1rem;\n}\n.ww-gap-6 {\n  gap: 1.5rem;\n}\n.ww-gap-8 {\n  gap: 2rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n  overflow: hidden;\n}\n.ww-overflow-y-auto {\n  overflow-y: auto;\n}\n.ww-overscroll-contain {\n  overscroll-behavior: contain;\n}\n.ww-overscroll-none {\n  overscroll-behavior: none;\n}\n.ww-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n.ww-rounded {\n  border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n  border-radius: 1rem;\n}\n.ww-rounded-full {\n  border-radius: 9999px;\n}\n.ww-rounded-lg {\n  border-radius: var(--radius);\n}\n.ww-rounded-xl {\n  border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n  border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n  border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n  border-width: 1px;\n}\n.ww-border-2 {\n  border-width: 2px;\n}\n.ww-border-b {\n  border-bottom-width: 1px;\n}\n.ww-border-l-2 {\n  border-left-width: 2px;\n}\n.ww-border-t {\n  border-top-width: 1px;\n}\n.ww-border-background {\n  border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n  border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n  border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n  border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n  border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n  border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/80 {\n  border-color: hsl(var(--border) / 0.8);\n}\n.ww-border-muted {\n  border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n  border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-red-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-transparent {\n  border-color: transparent;\n}\n.ww-border-white\\/20 {\n  border-color: rgb(255 255 255 / 0.2);\n}\n.ww-bg-background {\n  background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n  background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/90 {\n  background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n  background-color: hsl(var(--background) / 0.95);\n}\n.ww-bg-black\\/10 {\n  background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-emerald-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500\\/10 {\n  background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n  background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n  background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n  background-color: hsl(var(--foreground) / 0.05);\n}\n.ww-bg-foreground\\/60 {\n  background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n  background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n  background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/30 {\n  background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n  background-color: hsl(var(--muted) / 0.4);\n}\n.ww-bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n  background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n  background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/5 {\n  background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n  background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n  background-color: rgb(168 85 247 / 0.3);\n}\n.ww-bg-red-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n  background-color: transparent;\n}\n.ww-bg-white\\/10 {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n  background-color: rgb(255 255 255 / 0.15);\n}\n.ww-fill-current {\n  fill: currentColor;\n}\n.ww-object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ww-p-0\\.5 {\n  padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n  padding: 0.375rem;\n}\n.ww-p-3 {\n  padding: 0.75rem;\n}\n.ww-px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.ww-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.ww-px-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-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-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ww-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.ww-font-medium {\n  font-weight: 500;\n}\n.ww-font-semibold {\n  font-weight: 600;\n}\n.ww-uppercase {\n  text-transform: uppercase;\n}\n.ww-leading-none {\n  line-height: 1;\n}\n.ww-leading-relaxed {\n  line-height: 1.625;\n}\n.ww-leading-snug {\n  line-height: 1.375;\n}\n.ww-leading-tight {\n  line-height: 1.25;\n}\n.ww-tracking-wide {\n  letter-spacing: 0.025em;\n}\n.ww-tracking-widest {\n  letter-spacing: 0.1em;\n}\n.ww-text-black\\/40 {\n  color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n  color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n  color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n  color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n  --tw-text-opacity: 1;\n  color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n  color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n  color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n  color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n  color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n  color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n  color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n  color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n  color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n  color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n  color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n  color: rgb(255 255 255 / 0.8);\n}\n.ww-line-through {\n  text-decoration-line: line-through;\n}\n.ww-no-underline {\n  text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n  text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n  opacity: 1;\n}\n.ww-opacity-25 {\n  opacity: 0.25;\n}\n.ww-opacity-30 {\n  opacity: 0.3;\n}\n.ww-opacity-40 {\n  opacity: 0.4;\n}\n.ww-opacity-60 {\n  opacity: 0.6;\n}\n.ww-opacity-70 {\n  opacity: 0.7;\n}\n.ww-opacity-75 {\n  opacity: 0.75;\n}\n.ww-opacity-80 {\n  opacity: 0.8;\n}\n.ww-opacity-90 {\n  opacity: 0.9;\n}\n.ww-shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.ww-ring-2 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n  --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/20 {\n  --tw-ring-color: hsl(var(--primary) / 0.2);\n}\n.ww-ring-primary\\/60 {\n  --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-backdrop-blur-xl {\n  --tw-backdrop-blur: blur(24px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-shadow {\n  transition-property: box-shadow;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-duration-1000 {\n  transition-duration: 1000ms;\n}\n.ww-duration-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-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.placeholder\\:ww-text-muted-foreground\\/50::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.focus-within\\:ww-ring-1:focus-within {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:-ww-translate-y-1:hover {\n  --tw-translate-y: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-border-primary\\/40:hover {\n  border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n  background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n  background-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-muted:hover {\n  background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n  color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n  color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n  opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n  opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.hover\\:ww-shadow-xl:hover {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.focus\\:ww-ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.active\\:ww-scale-\\[0\\.98\\]:active {\n  --tw-scale-x: 0.98;\n  --tw-scale-y: 0.98;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:ww-pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:ww-opacity-40:disabled {\n  opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n  opacity: 0.5;\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n  --tw-border-opacity: 1;\n  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
 var twMerge = extendTailwindMerge({ prefix: "ww-" });
 var cn = (...inputs) => twMerge(clsx(inputs));
 
-// src/types.ts
+// src/lib/types.ts
 function getContrastColor(hex) {
   const clean = hex.replace("#", "");
   if (clean.length < 6) return "#ffffff";
@@ -46,15 +48,16 @@ function getContrastColor(hex) {
 function formatToolName(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim();
 }
+
+// src/core/stream-protocol.ts
 var STREAM_DELIMITER = "\u03B6\u236E";
 async function consumeStream(body, handler) {
   const reader = body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    buffer += decoder.decode(value, { stream: true });
+  let textAccumulator = "";
+  let eventCount = 0;
+  const processBuffer = () => {
     const chunks = buffer.split(STREAM_DELIMITER);
     buffer = chunks.pop() ?? "";
     for (const chunk of chunks) {
@@ -62,26 +65,229 @@ async function consumeStream(body, handler) {
       if (!raw) continue;
       try {
         const parsed = JSON.parse(raw);
-        if (parsed.data?.uiMessageProtocol) handler(parsed.data.uiMessageProtocol);
+        const proto = parsed.data?.uiMessageProtocol;
+        if (proto) {
+          eventCount++;
+          if (proto.type === "text-delta") {
+            textAccumulator += proto.delta ?? "";
+          }
+          handler(proto);
+        }
       } catch {
       }
     }
+  };
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    processBuffer();
+  }
+  if (buffer.trim()) {
+    buffer += STREAM_DELIMITER;
+    processBuffer();
+  }
+  return { textAccumulator, eventCount };
+}
+
+// src/core/chat-reducer.ts
+function applyUiEventToMessages(prev, proto, msgId) {
+  let idx = prev.findIndex((m) => m.id === msgId);
+  if (idx === -1) {
+    if (proto.type === "finish" || proto.type === "debug-trace" || proto.type === "step-start" || proto.type === "step-end" || proto.type === "navigate" || proto.type === "suggestions") {
+      return prev;
+    }
+    prev = [...prev, { id: msgId, role: "assistant", parts: [] }];
+    idx = prev.length - 1;
+  }
+  const existing = prev[idx];
+  const msg = {
+    id: existing.id,
+    role: existing.role,
+    parts: [...existing.parts]
+  };
+  switch (proto.type) {
+    case "text-delta": {
+      const textIdx = msg.parts.findIndex((p) => p.type === "text");
+      if (textIdx === -1) {
+        msg.parts.push({ type: "text", text: proto.delta });
+      } else {
+        const p = msg.parts[textIdx];
+        msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
+      }
+      break;
+    }
+    case "reasoning-delta": {
+      const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
+      if (rIdx === -1) {
+        msg.parts.unshift({ type: "reasoning", text: proto.delta });
+      } else {
+        const p = msg.parts[rIdx];
+        msg.parts[rIdx] = {
+          type: "reasoning",
+          text: p.text + proto.delta
+        };
+      }
+      break;
+    }
+    case "tool-input-available": {
+      msg.parts.push({
+        type: "tool",
+        toolCallId: proto.toolCallId,
+        toolName: proto.toolName,
+        input: proto.input ?? {},
+        status: "running"
+      });
+      break;
+    }
+    case "tool-output-available": {
+      const tIdx = msg.parts.findIndex(
+        (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+      );
+      if (tIdx !== -1) {
+        msg.parts[tIdx] = {
+          ...msg.parts[tIdx],
+          status: "done",
+          output: proto.output
+        };
+      }
+      break;
+    }
+    case "tool-output-error": {
+      const tIdx = msg.parts.findIndex(
+        (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+      );
+      if (tIdx !== -1) {
+        msg.parts[tIdx] = {
+          ...msg.parts[tIdx],
+          status: "error",
+          errorText: proto.errorText
+        };
+      }
+      break;
+    }
+    case "picker": {
+      const safeOptions = (proto.options ?? []).map((o) => ({
+        value: typeof o.value === "string" ? o.value : JSON.stringify(o.value ?? ""),
+        label: typeof o.label === "string" ? o.label : JSON.stringify(o.label ?? "")
+      }));
+      msg.parts.push({
+        type: "picker",
+        pickerId: proto.pickerId,
+        paramName: proto.paramName,
+        toolName: proto.toolName,
+        label: typeof proto.label === "string" ? proto.label : String(proto.label),
+        options: safeOptions
+      });
+      break;
+    }
+    case "plan-created": {
+      msg.parts.push({
+        type: "plan",
+        planId: proto.planId,
+        goal: proto.goal,
+        steps: proto.steps.map((s) => ({
+          ...s,
+          status: "pending"
+        }))
+      });
+      break;
+    }
+    case "plan-step-update": {
+      const pIdx = msg.parts.findIndex(
+        (p) => p.type === "plan" && p.planId === proto.planId
+      );
+      if (pIdx !== -1) {
+        const prevPlan = msg.parts[pIdx];
+        msg.parts[pIdx] = {
+          ...prevPlan,
+          steps: prevPlan.steps.map(
+            (s) => s.index === proto.stepIndex ? {
+              ...s,
+              status: proto.status,
+              ...proto.error ? { error: proto.error } : {}
+            } : s
+          )
+        };
+      }
+      break;
+    }
   }
+  const copy = [...prev];
+  copy[idx] = msg;
+  return copy;
 }
 var API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
+function useVoiceCall({
+  agentId,
+  threadId,
+  workspaceId,
+  customBackend
+}) {
+  const [active, setActive] = useState(false);
+  const [token, setToken] = useState(null);
+  const [serverUrl, setServerUrl] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const start = useCallback(async () => {
+    if (customBackend) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const isPrivate = Boolean(workspaceId);
+      const url = isPrivate ? `${API_URL}/api/threads/${threadId}/livekit-token?agentId=${encodeURIComponent(agentId)}` : `${API_URL}/api/chat/livekit-token?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
+      const res = await fetch(url, {
+        headers: isPrivate && typeof window !== "undefined" ? (
+          // @ts-ignore
+          {
+            Authorization: `Bearer ${await window.Clerk?.session?.getToken()}`
+          }
+        ) : {}
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to start call");
+      setToken(data.token);
+      setServerUrl(data.url);
+      setActive(true);
+    } catch (err) {
+      setError(err.message);
+    }
+    setLoading(false);
+  }, [agentId, threadId, workspaceId, customBackend]);
+  const stop = useCallback(() => {
+    setActive(false);
+    setToken(null);
+    setServerUrl(null);
+  }, []);
+  return customBackend?.voiceCall ?? {
+    active,
+    token,
+    serverUrl,
+    start,
+    stop,
+    loading,
+    error
+  };
+}
+
+// src/hooks/use-chat.ts
+var API_URL2 = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
 function newId() {
   return Math.random().toString(36).slice(2, 10);
 }
 function useChat({
   agentId,
   workspaceId = "",
+  envId,
   source = "playground",
   userContext,
   persist = false,
   onNavigate,
-  playgroundOverrides
+  playgroundOverrides,
+  customBackend
 }) {
-  const persistKey = persist ? `wallavi_${agentId}` : null;
+  const userId = userContext?.userId;
+  const persistKey = persist ? userId ? `wallavi_${agentId}_${userId}` : `wallavi_${agentId}` : null;
   const onNavigateRef = useRef(onNavigate);
   useEffect(() => {
     onNavigateRef.current = onNavigate;
@@ -105,46 +311,237 @@ function useChat({
     return crypto.randomUUID();
   });
   const streamingMsgIdRef = useRef(null);
+  const [debugTraces, setDebugTraces] = useState([]);
+  const initializedThreadsRef = useRef(/* @__PURE__ */ new Set());
+  const messagesRef = useRef(messages);
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+  const applyStreamEvent = useCallback(
+    (proto, msgId) => {
+      if (proto.type === "navigate") {
+        if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
+        return;
+      }
+      if (proto.type === "debug-trace") {
+        setDebugTraces((prev) => [
+          ...prev,
+          proto.trace
+        ]);
+        return;
+      }
+      setMessages((prev) => applyUiEventToMessages(prev, proto, msgId));
+    },
+    []
+  );
+  const fetchAndStream = useCallback(
+    async (opts) => {
+      const { input: userInput, msgId, extraMetadata, attachments } = opts;
+      const isPrivate = Boolean(workspaceId);
+      const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+      const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/stream` : `${API_URL2}/api/chat/stream`;
+      const res = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...token ? { Authorization: `Bearer ${token}` } : {}
+        },
+        body: JSON.stringify({
+          input: userInput,
+          agentId,
+          ...isPrivate ? {
+            workspaceId,
+            ...playgroundOverrides ? { playgroundOverrides } : {},
+            ...envId ? { envId } : {}
+          } : { threadId },
+          source,
+          ...attachments?.length ? { attachments } : {},
+          ...userContext?.userName ? { userName: userContext.userName } : {},
+          ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
+          userMetadata: {
+            ...userContext?.metadata ?? {},
+            ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
+            headers: {
+              ...token ? { Authorization: `Bearer ${token}` } : {},
+              ...userContext?.headers ?? {},
+              ...userContext?.metadata?.headers ?? {}
+            },
+            ...extraMetadata ?? {}
+          }
+        })
+      });
+      if (!res.ok) {
+        const errText = await res.text().catch(() => "");
+        throw new Error(errText || `API error ${res.status}`);
+      }
+      if (!res.body) throw new Error("No stream body");
+      const { textAccumulator, eventCount } = await consumeStream(
+        res.body,
+        (proto) => applyStreamEvent(proto, msgId)
+      );
+      if (textAccumulator) {
+        setMessages((prev) => {
+          const idx = prev.findIndex((m) => m.id === msgId);
+          if (idx === -1) {
+            return [
+              ...prev,
+              {
+                id: msgId,
+                role: "assistant",
+                parts: [{ type: "text", text: textAccumulator }]
+              }
+            ];
+          }
+          const existing = prev[idx];
+          const textPart = existing.parts.find((p) => p.type === "text");
+          if (!textPart?.text || textPart.text.length < textAccumulator.length) {
+            const copy = [...prev];
+            const parts = [
+              ...existing.parts.filter((p) => p.type !== "text"),
+              { type: "text", text: textAccumulator }
+            ];
+            copy[idx] = { ...existing, parts };
+            return copy;
+          }
+          return prev;
+        });
+      }
+    },
+    [
+      agentId,
+      workspaceId,
+      envId,
+      source,
+      threadId,
+      userContext,
+      playgroundOverrides,
+      applyStreamEvent
+    ]
+  );
+  const voiceCall = useVoiceCall({
+    agentId,
+    threadId,
+    workspaceId,
+    customBackend
+  });
   useEffect(() => {
-    if (!persistKey) return;
+    if (customBackend || !persistKey) return;
     try {
       sessionStorage.setItem(`${persistKey}_msgs`, JSON.stringify(messages));
     } catch {
     }
-  }, [persistKey, messages]);
+  }, [customBackend, persistKey, messages]);
   useEffect(() => {
-    if (!persistKey) return;
+    if (customBackend || !persistKey) return;
     try {
       localStorage.setItem(`${persistKey}_tid`, threadId);
     } catch {
     }
-  }, [persistKey, threadId]);
+  }, [customBackend, persistKey, threadId]);
   useEffect(() => {
-    if (!persistKey || typeof window === "undefined") return;
-    if (messages.length > 0) return;
-    void (async () => {
-      try {
-        const res = await fetch(
-          `${API_URL}/api/chat/messages?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`
-        );
-        if (!res.ok) return;
-        const { data } = await res.json();
-        if (!data?.length) return;
-        const restored = data.map((m) => ({
-          id: m.id,
-          role: m.role,
-          parts: m.parts.filter((p) => p?.type)
-        })).filter((m) => m.parts.length > 0);
-        if (restored.length > 0) setMessages(restored);
-      } catch {
+    if (customBackend || !persistKey || typeof window === "undefined") return;
+    const savedTid = localStorage.getItem(`${persistKey}_tid`);
+    if (savedTid) {
+      if (savedTid !== threadId) {
+        setThreadId(savedTid);
+        const savedMsgs = sessionStorage.getItem(`${persistKey}_msgs`);
+        if (savedMsgs) {
+          try {
+            setMessages(JSON.parse(savedMsgs));
+          } catch {
+          }
+        } else {
+          setMessages([]);
+        }
       }
-    })();
-  }, []);
+    } else {
+      const newTid = crypto.randomUUID();
+      setThreadId(newTid);
+      setMessages([]);
+      localStorage.setItem(`${persistKey}_tid`, newTid);
+    }
+  }, [customBackend, persistKey]);
+  useEffect(() => {
+    if (customBackend || typeof window === "undefined") return;
+    if (initializedThreadsRef.current.has(threadId)) return;
+    initializedThreadsRef.current.add(threadId);
+    if (persistKey) {
+      if (messagesRef.current.length > 0) return;
+      void (async () => {
+        try {
+          const isPrivate = Boolean(workspaceId);
+          const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+          const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/messages` : `${API_URL2}/api/chat/messages?agentId=${encodeURIComponent(agentId)}&threadId=${encodeURIComponent(threadId)}`;
+          const res = await fetch(url, {
+            headers: {
+              ...token ? { Authorization: `Bearer ${token}` } : {}
+            }
+          });
+          if (!res.ok) return;
+          const { data } = await res.json();
+          if (!data?.length) {
+            try {
+              fetchAndStream({
+                input: "__INIT__",
+                msgId: "init",
+                extraMetadata: { isSilentInit: true }
+              });
+            } catch {
+            }
+            return;
+          }
+          const restored = data.map((m) => ({
+            id: m.id,
+            role: m.role,
+            parts: m.parts.filter((p) => p?.type).map((p) => {
+              if (p.type === "picker" && Array.isArray(p.options)) {
+                return {
+                  ...p,
+                  label: typeof p.label === "string" ? p.label : String(p.label ?? ""),
+                  options: p.options.map((o) => ({
+                    ...o,
+                    value: typeof o.value === "string" ? o.value : JSON.stringify(o.value ?? ""),
+                    label: typeof o.label === "string" ? o.label : JSON.stringify(o.label ?? "")
+                  }))
+                };
+              }
+              return p;
+            })
+          })).filter((m) => m.parts.length > 0);
+          if (restored.length > 0) {
+            setMessages(restored);
+          } else {
+            try {
+              fetchAndStream({
+                input: "__INIT__",
+                msgId: "init",
+                extraMetadata: { isSilentInit: true }
+              });
+            } catch {
+            }
+          }
+        } catch {
+        }
+      })();
+    } else {
+      if (messagesRef.current.length === 0) {
+        try {
+          fetchAndStream({
+            input: "__INIT__",
+            msgId: "init",
+            extraMetadata: { isSilentInit: true }
+          });
+        } catch {
+        }
+      }
+    }
+  }, [threadId, agentId, workspaceId, envId, persistKey, fetchAndStream]);
   const reset = useCallback(() => {
     setMessages([]);
     setInput("");
     setStreaming(false);
     setThreadId(crypto.randomUUID());
+    setDebugTraces([]);
     streamingMsgIdRef.current = null;
     if (persistKey) {
       try {
@@ -155,146 +552,19 @@ function useChat({
       }
     }
   }, [persistKey]);
-  const applyStreamEvent = useCallback((proto, msgId) => {
-    if (proto.type === "navigate") {
-      if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
-      return;
-    }
-    setMessages((prev) => {
-      const idx = prev.findIndex((m) => m.id === msgId);
-      if (idx === -1) return prev;
-      const existing = prev[idx];
-      const msg = { id: existing.id, role: existing.role, parts: [...existing.parts] };
-      switch (proto.type) {
-        case "text-delta": {
-          const textIdx = msg.parts.findIndex((p) => p.type === "text");
-          if (textIdx === -1) {
-            msg.parts.push({ type: "text", text: proto.delta });
-          } else {
-            const p = msg.parts[textIdx];
-            msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
-          }
-          break;
-        }
-        case "reasoning-delta": {
-          const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
-          if (rIdx === -1) {
-            msg.parts.unshift({ type: "reasoning", text: proto.delta });
-          } else {
-            const p = msg.parts[rIdx];
-            msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
-          }
-          break;
-        }
-        case "tool-input-available": {
-          msg.parts.push({
-            type: "tool",
-            toolCallId: proto.toolCallId,
-            toolName: proto.toolName,
-            input: proto.input ?? {},
-            status: "running"
-          });
-          break;
-        }
-        case "tool-output-available": {
-          const tIdx = msg.parts.findIndex(
-            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-          );
-          if (tIdx !== -1) {
-            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "done", output: proto.output };
-          }
-          break;
-        }
-        case "tool-output-error": {
-          const tIdx = msg.parts.findIndex(
-            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-          );
-          if (tIdx !== -1) {
-            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "error", errorText: proto.errorText };
-          }
-          break;
-        }
-        case "picker": {
-          msg.parts.push({
-            type: "picker",
-            pickerId: proto.pickerId,
-            paramName: proto.paramName,
-            toolName: proto.toolName,
-            label: proto.label,
-            options: proto.options
-          });
-          break;
-        }
-        case "plan-created": {
-          msg.parts.push({
-            type: "plan",
-            planId: proto.planId,
-            goal: proto.goal,
-            steps: proto.steps.map((s) => ({ ...s, status: "pending" }))
-          });
-          break;
-        }
-        case "plan-step-update": {
-          const pIdx = msg.parts.findIndex(
-            (p) => p.type === "plan" && p.planId === proto.planId
-          );
-          if (pIdx !== -1) {
-            const prev2 = msg.parts[pIdx];
-            msg.parts[pIdx] = {
-              ...prev2,
-              steps: prev2.steps.map(
-                (s) => s.index === proto.stepIndex ? { ...s, status: proto.status, ...proto.error ? { error: proto.error } : {} } : s
-              )
-            };
-          }
-          break;
-        }
-      }
-      const copy = [...prev];
-      copy[idx] = msg;
-      return copy;
-    });
-  }, []);
-  const fetchAndStream = useCallback(async (opts) => {
-    const { input: userInput, msgId, extraMetadata, attachments } = opts;
-    const isPrivate = Boolean(workspaceId);
-    const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
-    const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
-    const res = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...token ? { Authorization: `Bearer ${token}` } : {}
-      },
-      body: JSON.stringify({
-        input: userInput,
-        agentId,
-        ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
-        source,
-        ...attachments?.length ? { attachments } : {},
-        ...userContext?.userName ? { userName: userContext.userName } : {},
-        ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
-        userMetadata: {
-          ...userContext?.metadata ?? {},
-          ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
-          headers: {
-            ...token ? { Authorization: `Bearer ${token}` } : {},
-            ...userContext?.headers ?? {}
-          },
-          ...extraMetadata ?? {}
-        }
-      })
-    });
-    if (!res.ok) {
-      const errText = await res.text().catch(() => "");
-      throw new Error(errText || `API error ${res.status}`);
-    }
-    if (!res.body) throw new Error("No stream body");
-    await consumeStream(res.body, (proto) => applyStreamEvent(proto, msgId));
-  }, [agentId, workspaceId, source, threadId, userContext, playgroundOverrides, applyStreamEvent]);
   const pendingAttachmentsRef = useRef([]);
   const send = useCallback(
     async (text) => {
+      if (customBackend) {
+        const content = (text ?? input).trim();
+        const attachments2 = pendingAttachmentsRef.current.length > 0 ? [...pendingAttachmentsRef.current] : void 0;
+        pendingAttachmentsRef.current = [];
+        if (!content && !attachments2?.length || customBackend.streaming)
+          return;
+        setInput("");
+        await customBackend.send(content, attachments2);
+        return;
+      }
       const userInput = (text ?? input).trim();
       if (!userInput || streaming) return;
       setInput("");
@@ -313,16 +583,32 @@ function useChat({
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
-      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
+      setMessages((prev) => [
+        ...prev,
+        { id: assistantMsgId, role: "assistant", parts: [] }
+      ]);
       try {
-        await fetchAndStream({ input: userInput, msgId: assistantMsgId, attachments });
+        await fetchAndStream({
+          input: userInput,
+          msgId: assistantMsgId,
+          attachments
+        });
       } catch {
         setMessages((prev) => {
           const idx = prev.findIndex((m) => m.id === assistantMsgId);
           if (idx === -1) return prev;
           const copy = [...prev];
           const err = copy[idx];
-          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
+          copy[idx] = {
+            id: err.id,
+            role: err.role,
+            parts: [
+              {
+                type: "text",
+                text: "Sorry, something went wrong. Please try again."
+              }
+            ]
+          };
           return copy;
         });
       }
@@ -338,19 +624,27 @@ function useChat({
         (prev) => prev.map((msg) => ({
           ...msg,
           parts: msg.parts.map(
-            (part) => part.type === "picker" && part.pickerId === pickerId ? { ...part, selectedValue: value } : part
+            (part) => part.type === "picker" && part.pickerId === pickerId ? {
+              ...part,
+              selectedValue: value
+            } : part
           )
         }))
       );
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
-      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
+      setMessages((prev) => [
+        ...prev,
+        { id: assistantMsgId, role: "assistant", parts: [] }
+      ]);
       try {
         await fetchAndStream({
           input: label,
           msgId: assistantMsgId,
-          extraMetadata: { __pickerSelection: { pickerId, paramName, value, label } }
+          extraMetadata: {
+            __pickerSelection: { pickerId, paramName, value, label }
+          }
         });
       } catch {
         setMessages((prev) => {
@@ -358,7 +652,16 @@ function useChat({
           if (idx === -1) return prev;
           const copy = [...prev];
           const err = copy[idx];
-          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
+          copy[idx] = {
+            id: err.id,
+            role: err.role,
+            parts: [
+              {
+                type: "text",
+                text: "Sorry, something went wrong. Please try again."
+              }
+            ]
+          };
           return copy;
         });
       }
@@ -383,7 +686,20 @@ function useChat({
     });
     await send(lastText);
   }, [streaming, messages, send]);
-  return { messages, input, setInput, streaming, threadId, send, queueAttachments, regenerate, reset, selectPickerOption };
+  return {
+    messages: customBackend ? customBackend.messages : messages,
+    streaming: customBackend ? customBackend.streaming : streaming,
+    input,
+    setInput,
+    threadId,
+    send,
+    queueAttachments,
+    regenerate,
+    reset: customBackend?.reset ?? reset,
+    selectPickerOption,
+    debugTraces,
+    voiceCall
+  };
 }
 function getPreferredMimeType() {
   if (typeof MediaRecorder === "undefined") return "";
@@ -402,7 +718,12 @@ function mimeTypeToExtension(mimeType) {
   return "webm";
 }
 var DEFAULT_API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app";
-function useVoice({ agentId, apiUrl, onTranscript, onError }) {
+function useVoice({
+  agentId,
+  apiUrl,
+  onTranscript,
+  onError
+}) {
   const [voiceState, setVoiceState] = useState("idle");
   const recorderRef = useRef(null);
   const chunksRef = useRef([]);
@@ -418,10 +739,14 @@ function useVoice({ agentId, apiUrl, onTranscript, onError }) {
         const form = new FormData();
         form.append("audio", blob, `recording.${ext}`);
         form.append("agentId", agentId);
-        const res = await fetch(`${base}/api/chat/transcribe`, { method: "POST", body: form });
+        const res = await fetch(`${base}/api/chat/transcribe`, {
+          method: "POST",
+          body: form
+        });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const data = await res.json();
-        if (!data.text?.trim()) throw new Error(data.error ?? "Empty transcript");
+        if (!data.text?.trim())
+          throw new Error(data.error ?? "Empty transcript");
         onTranscript(data.text.trim());
         setVoiceState("idle");
       } catch (err) {
@@ -439,14 +764,19 @@ function useVoice({ agentId, apiUrl, onTranscript, onError }) {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       streamRef.current = stream;
       const mimeType = getPreferredMimeType();
-      const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+      const recorder = new MediaRecorder(
+        stream,
+        mimeType ? { mimeType } : void 0
+      );
       chunksRef.current = [];
       recorder.ondataavailable = (e) => {
         if (e.data.size > 0) chunksRef.current.push(e.data);
       };
       recorder.onstop = async () => {
         stream.getTracks().forEach((t) => t.stop());
-        const blob = new Blob(chunksRef.current, { type: mimeType || "audio/webm" });
+        const blob = new Blob(chunksRef.current, {
+          type: mimeType || "audio/webm"
+        });
         if (blob.size === 0) {
           onError?.("Recording was empty \u2014 please try again.");
           setVoiceState("idle");
@@ -472,7 +802,8 @@ function useVoice({ agentId, apiUrl, onTranscript, onError }) {
   useEffect(() => {
     return () => {
       if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
-      if (recorderRef.current?.state === "recording") recorderRef.current.stop();
+      if (recorderRef.current?.state === "recording")
+        recorderRef.current.stop();
       streamRef.current?.getTracks().forEach((t) => t.stop());
     };
   }, []);
@@ -495,7 +826,10 @@ function useAttachments({
       form.append("file", file);
       form.append("agentId", agentId);
       try {
-        const res = await fetch(`${base}/api/chat/upload`, { method: "POST", body: form });
+        const res = await fetch(`${base}/api/chat/upload`, {
+          method: "POST",
+          body: form
+        });
         if (!res.ok) {
           const data = await res.json().catch(() => ({}));
           setAttachments(
@@ -511,7 +845,9 @@ function useAttachments({
         }
         const payload = await res.json();
         setAttachments(
-          (prev) => prev.map((a) => a.id === id ? { ...a, status: "ready", payload } : a)
+          (prev) => prev.map(
+            (a) => a.id === id ? { ...a, status: "ready", payload } : a
+          )
         );
       } catch (err) {
         const msg = err instanceof Error ? err.message : "Upload failed";
@@ -555,16 +891,13 @@ function useAttachments({
   return { attachments, attach, remove, clear, isUploading, readyPayloads };
 }
 function DefaultIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor", opacity: 0.12 }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M4 8.5C4 6.57 5.57 5 7.5 5h9C18.43 5 20 6.57 20 8.5v5c0 1.93-1.57 3.5-3.5 3.5H13l-3 2.5V17H7.5C5.57 17 4 15.43 4 13.5v-5Z",
-        fill: "currentColor"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4 8.5C4 6.57 5.57 5 7.5 5h9C18.43 5 20 6.57 20 8.5v5c0 1.93-1.57 3.5-3.5 3.5H13l-3 2.5V17H7.5C5.57 17 4 15.43 4 13.5v-5Z",
+      fill: "currentColor"
+    }
+  ) });
 }
 function ExpandIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 11, height: 11 }, children: /* @__PURE__ */ jsx(
@@ -590,9 +923,58 @@ function MinimizeIcon() {
     }
   ) });
 }
-var Avatar = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
-var AvatarImage = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
-var AvatarFallback = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
+var Avatar = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    style: {
+      position: "relative",
+      display: "flex",
+      flexShrink: 0,
+      overflow: "hidden",
+      borderRadius: "9999px",
+      ...style
+    },
+    ...p
+  }
+);
+var AvatarImage = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      ...style
+    },
+    ...p
+  }
+);
+var AvatarFallback = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    style: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      ...style
+    },
+    ...p
+  }
+);
 function ChatHeader({
   title,
   profilePicture,
@@ -601,22 +983,39 @@ function ChatHeader({
   onReset,
   onClose,
   onExpand,
-  expanded
+  expanded,
+  onCall,
+  isCallLoading
 }) {
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: "ww-flex ww-items-center ww-justify-between ww-px-4 ww-py-3 ww-shrink-0",
-      style: { backgroundColor: headerBg, color: headerText, borderBottom: `1px solid ${headerText}18` },
+      className: "ww-flex ww-items-center ww-justify-between ww-px-4 ww-py-3 ww-shrink-0 ww-touch-none",
+      style: {
+        backgroundColor: headerBg,
+        color: headerText,
+        borderBottom: `1px solid ${headerText}18`
+      },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-2.5 ww-min-w-0", children: [
-          /* @__PURE__ */ jsx(Avatar, { style: { width: 32, height: 32, border: `2px solid ${headerText}30` }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage, { src: profilePicture, alt: title }) : /* @__PURE__ */ jsx(
-            AvatarFallback,
+          /* @__PURE__ */ jsx(
+            Avatar,
             {
-              style: { backgroundColor: `${headerText}20`, color: headerText, fontSize: 11, fontWeight: 700 },
-              children: title.slice(0, 2).toUpperCase()
+              style: { width: 32, height: 32, border: `2px solid ${headerText}30` },
+              children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage, { src: profilePicture, alt: title }) : /* @__PURE__ */ jsx(
+                AvatarFallback,
+                {
+                  style: {
+                    backgroundColor: `${headerText}20`,
+                    color: headerText,
+                    fontSize: 11,
+                    fontWeight: 700
+                  },
+                  children: title.slice(0, 2).toUpperCase()
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsxs("div", { className: "ww-min-w-0", children: [
             /* @__PURE__ */ jsx("p", { className: "ww-font-semibold ww-text-sm ww-truncate ww-leading-tight", children: title }),
             /* @__PURE__ */ jsx("p", { className: "ww-text-[10px] ww-opacity-70 ww-leading-tight", children: "AI Assistant" })
@@ -632,13 +1031,64 @@ function ChatHeader({
               children: expanded ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {})
             }
           ),
+          onCall && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCall,
+              disabled: isCallLoading,
+              className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10 disabled:ww-opacity-50",
+              title: "Voice Call",
+              children: isCallLoading ? /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "ww-animate-spin ww-h-3.5 ww-w-3.5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  style: { color: headerText },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "ww-opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "ww-opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                Phone,
+                {
+                  className: "ww-h-3.5 ww-w-3.5",
+                  style: { color: headerText }
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: onReset,
               className: "ww-rounded-full ww-p-1.5 ww-transition-colors hover:ww-bg-white/10",
               title: "New conversation",
-              children: /* @__PURE__ */ jsx(RotateCcw, { className: "ww-h-3.5 ww-w-3.5", style: { color: headerText } })
+              children: /* @__PURE__ */ jsx(
+                RotateCcw,
+                {
+                  className: "ww-h-3.5 ww-w-3.5",
+                  style: { color: headerText }
+                }
+              )
             }
           ),
           onClose && /* @__PURE__ */ jsx(
@@ -662,8 +1112,10 @@ function formatBytes(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 function ChipLeading({ a }) {
-  if (a.status === "uploading") return /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-shrink-0 ww-animate-spin" });
-  if (a.status === "error") return /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-shrink-0" });
+  if (a.status === "uploading")
+    return /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-shrink-0 ww-animate-spin" });
+  if (a.status === "error")
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-shrink-0" });
   const thumbSrc = a.payload?.url ?? a.payload?.base64;
   if (a.mimeType.startsWith("image/") && thumbSrc) {
     return /* @__PURE__ */ jsx(
@@ -675,14 +1127,19 @@ function ChipLeading({ a }) {
       }
     );
   }
-  if (a.mimeType.startsWith("image/")) return /* @__PURE__ */ jsx("div", { className: "ww-h-6 ww-w-6 ww-rounded ww-bg-muted-foreground/10 ww-border ww-border-border/30 ww-shrink-0 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsx("span", { className: "ww-text-[8px] ww-font-semibold ww-text-muted-foreground/50", children: "IMG" }) });
-  if (a.mimeType === "application/pdf") return /* @__PURE__ */ jsx(FileText, { className: "ww-h-3 ww-w-3 ww-shrink-0 ww-text-red-400" });
+  if (a.mimeType.startsWith("image/"))
+    return /* @__PURE__ */ jsx("div", { className: "ww-h-6 ww-w-6 ww-rounded ww-bg-muted-foreground/10 ww-border ww-border-border/30 ww-shrink-0 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsx("span", { className: "ww-text-[8px] ww-font-semibold ww-text-muted-foreground/50", children: "IMG" }) });
+  if (a.mimeType === "application/pdf")
+    return /* @__PURE__ */ jsx(FileText, { className: "ww-h-3 ww-w-3 ww-shrink-0 ww-text-red-400" });
   if (a.mimeType.includes("csv") || a.mimeType.includes("spreadsheet") || a.name.endsWith(".csv")) {
     return /* @__PURE__ */ jsx(FileSpreadsheet, { className: "ww-h-3 ww-w-3 ww-shrink-0 ww-text-emerald-500" });
   }
   return /* @__PURE__ */ jsx(FileText, { className: "ww-h-3 ww-w-3 ww-shrink-0" });
 }
-function AttachmentChips({ attachments, onRemove }) {
+function AttachmentChips({
+  attachments,
+  onRemove
+}) {
   if (attachments.length === 0) return null;
   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(
     "div",
@@ -710,41 +1167,49 @@ function AttachmentChips({ attachments, onRemove }) {
     a.id
   )) });
 }
-var Avatar2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
-var AvatarImage2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
-var AvatarFallback2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
-var ReactMarkdown = ReactMarkdownLib;
-function SentAttachments({ attachments, contrastColor }) {
+function SentAttachments({
+  attachments,
+  contrastColor
+}) {
   const images = attachments.filter((a) => a.contentType === "image");
   const files = attachments.filter((a) => a.contentType !== "image");
   const isDark = contrastColor === "#ffffff" || contrastColor === "#fff";
   return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-w-full", children: [
-    images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("ww-flex ww-gap-1.5 ww-flex-wrap", images.length === 1 && ""), children: images.map((img) => {
-      const src = img.url ?? img.base64;
-      return src ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src,
-          alt: img.name,
-          className: cn(
-            "ww-rounded-xl ww-object-cover ww-border",
-            images.length === 1 ? "ww-w-full ww-max-h-48" : "ww-h-20 ww-w-20",
-            isDark ? "ww-border-white/20" : "ww-border-black/10"
-          )
-        },
-        img.id
-      ) : /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "ww-h-20 ww-w-20 ww-rounded-xl ww-flex ww-items-center ww-justify-center ww-text-[10px] ww-font-medium",
-            isDark ? "ww-bg-white/10 ww-text-white/60" : "ww-bg-black/10 ww-text-black/40"
-          ),
-          children: "IMG"
-        },
-        img.id
-      );
-    }) }),
+    images.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "ww-flex ww-gap-1.5 ww-flex-wrap",
+          images.length === 1 && ""
+        ),
+        children: images.map((img) => {
+          const src = img.url ?? img.base64;
+          return src ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: img.name,
+              className: cn(
+                "ww-rounded-xl ww-object-cover ww-border",
+                images.length === 1 ? "ww-w-full ww-max-h-48" : "ww-h-20 ww-w-20",
+                isDark ? "ww-border-white/20" : "ww-border-black/10"
+              )
+            },
+            img.id
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "ww-h-20 ww-w-20 ww-rounded-xl ww-flex ww-items-center ww-justify-center ww-text-[10px] ww-font-medium",
+                isDark ? "ww-bg-white/10 ww-text-white/60" : "ww-bg-black/10 ww-text-black/40"
+              ),
+              children: "IMG"
+            },
+            img.id
+          );
+        })
+      }
+    ),
     files.length > 0 && /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1", children: files.map((f) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -762,16 +1227,24 @@ function SentAttachments({ attachments, contrastColor }) {
   ] });
 }
 function PlanStepIcon({ status }) {
-  if (status === "executing") return /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin ww-text-primary" });
-  if (status === "success") return /* @__PURE__ */ jsx(CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" });
-  if (status === "failed") return /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" });
+  if (status === "executing")
+    return /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3 ww-w-3 ww-animate-spin ww-text-primary" });
+  if (status === "success")
+    return /* @__PURE__ */ jsx(CheckCircle2, { className: "ww-h-3 ww-w-3 ww-text-emerald-500" });
+  if (status === "failed")
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3 ww-w-3 ww-text-destructive" });
   return /* @__PURE__ */ jsx("div", { className: "ww-h-3 ww-w-3 ww-rounded-full ww-border-2 ww-border-muted-foreground/30" });
 }
-function PlanCard({ part }) {
+function PlanCard({
+  part,
+  onSend,
+  disabled
+}) {
   const successCount = part.steps.filter((s) => s.status === "success").length;
   const hasExecuting = part.steps.some((s) => s.status === "executing");
   const allDone = successCount === part.steps.length && part.steps.length > 0;
   const anyFailed = part.steps.some((s) => s.status === "failed");
+  const allPending = part.steps.length > 0 && part.steps.every((s) => s.status === "pending");
   return /* @__PURE__ */ jsxs("div", { className: "ww-rounded-xl ww-border ww-bg-background ww-overflow-hidden ww-text-xs ww-w-full ww-shadow-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-gap-2 ww-px-3 ww-py-2 ww-bg-muted/50 ww-border-b", children: [
       hasExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-animate-spin ww-text-primary/80" }) : allDone ? /* @__PURE__ */ jsx(CheckCircle2, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsx(AlertCircle, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-destructive" }) : /* @__PURE__ */ jsx(Zap, { className: "ww-h-3.5 ww-w-3.5 ww-shrink-0 ww-text-primary/70" }),
@@ -812,7 +1285,37 @@ function PlanCard({ part }) {
         ]
       },
       step.index
-    )) })
+    )) }),
+    allPending && onSend && /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-gap-2 ww-px-3 ww-py-2.5 ww-border-t", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onSend("s\xED, proceder"),
+          disabled,
+          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",
+          style: {
+            backgroundColor: "var(--primary, #18181b)",
+            color: "var(--primary-foreground, #fff)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
+            "Proceder"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onSend("cancelar"),
+          disabled,
+          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",
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
+            "Cancelar"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 function ThinkingDots() {
@@ -875,7 +1378,15 @@ function ReasoningBlock({ text }) {
         children: [
           /* @__PURE__ */ jsx(Zap, { className: "ww-h-3 ww-w-3" }),
           /* @__PURE__ */ jsx("span", { children: "Reasoning" }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: cn("ww-h-3 ww-w-3 ww-transition-transform", open && "ww-rotate-180") })
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "ww-h-3 ww-w-3 ww-transition-transform",
+                open && "ww-rotate-180"
+              )
+            }
+          )
         ]
       }
     ),
@@ -897,98 +1408,292 @@ function PickerSelector({
   }, [part.options, query]);
   const isConsumed = !!part.selectedValue;
   const handleClick = (opt) => {
-    if (!disabled && !isConsumed) onSelect(part.pickerId, part.paramName, opt.value, opt.label);
+    if (!disabled && !isConsumed)
+      onSelect(part.pickerId, part.paramName, opt.value, opt.label);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn(
-    "ww-flex ww-flex-col ww-gap-2.5 ww-rounded-xl ww-rounded-tl-none ww-border ww-bg-muted/60 ww-p-3",
-    "ww-border-border/50"
-  ), children: [
-    /* @__PURE__ */ jsx("p", { className: "ww-text-[10.5px] ww-font-semibold ww-uppercase ww-tracking-widest ww-text-muted-foreground/70 ww-leading-none", children: part.label }),
-    mode === "list" && /* @__PURE__ */ jsxs("div", { className: "ww-relative", children: [
-      /* @__PURE__ */ jsx(Search, { className: "ww-absolute ww-left-2.5 ww-top-1/2 -translate-y-1/2 ww-h-3 ww-w-3 ww-text-muted-foreground/50 ww-pointer-events-none" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          placeholder: "Search\u2026",
-          disabled: disabled || isConsumed,
-          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"
-        }
-      )
-    ] }),
-    mode === "pills" && /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5", children: part.options.map((opt) => {
-      const sel = part.selectedValue === opt.value;
-      const faded = isConsumed && !sel;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          disabled: disabled || isConsumed,
-          onClick: () => handleClick(opt),
-          className: cn(
-            "ww-inline-flex ww-items-center ww-gap-1 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-[12.5px] ww-font-medium ww-transition-all ww-duration-150 ww-select-none",
-            sel ? "ww-bg-foreground ww-text-background ww-shadow-sm" : faded ? "ww-bg-background/50 ww-text-muted-foreground ww-opacity-35 ww-cursor-default" : "ww-bg-background ww-border ww-border-border/70 ww-text-foreground hover:ww-border-foreground/30 hover:ww-bg-background ww-cursor-pointer",
-            disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
-          ),
-          children: [
-            sel && /* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
-            opt.label
-          ]
-        },
-        opt.value
-      );
-    }) }),
-    mode === "grid" && /* @__PURE__ */ jsx("div", { className: "ww-grid ww-grid-cols-2 ww-gap-1.5 ww-max-h-[168px] ww-overflow-y-auto ww-pr-0.5 scrollbar-thin", children: part.options.map((opt) => {
-      const sel = part.selectedValue === opt.value;
-      const faded = isConsumed && !sel;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          disabled: disabled || isConsumed,
-          onClick: () => handleClick(opt),
-          className: cn(
-            "ww-flex ww-items-center ww-gap-1.5 ww-rounded-lg ww-px-2.5 ww-py-1.5 ww-text-[12px] ww-font-medium ww-text-left ww-transition-all ww-duration-150 ww-select-none ww-truncate",
-            sel ? "ww-bg-foreground ww-text-background" : faded ? "ww-bg-background/40 ww-text-muted-foreground ww-opacity-35 ww-cursor-default" : "ww-bg-background ww-border ww-border-border/60 ww-text-foreground hover:ww-border-foreground/25 ww-cursor-pointer",
-            disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
-          ),
-          children: [
-            sel ? /* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "ww-truncate", children: opt.label })
-          ]
-        },
-        opt.value
-      );
-    }) }),
-    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: [
-      filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: "No results" }),
-      filtered.map((opt) => {
-        const sel = part.selectedValue === opt.value;
-        const faded = isConsumed && !sel;
-        return /* @__PURE__ */ jsxs(
-          "button",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ww-flex ww-flex-col ww-gap-2.5 ww-rounded-xl ww-rounded-tl-none ww-border ww-bg-muted/60 ww-p-3",
+        "ww-border-border/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "ww-text-[10.5px] ww-font-semibold ww-uppercase ww-tracking-widest ww-text-muted-foreground/70 ww-leading-none", children: part.label }),
+        mode === "list" && /* @__PURE__ */ jsxs("div", { className: "ww-relative", children: [
+          /* @__PURE__ */ jsx(Search, { className: "ww-absolute ww-left-2.5 ww-top-1/2 -translate-y-1/2 ww-h-3 ww-w-3 ww-text-muted-foreground/50 ww-pointer-events-none" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              placeholder: "Search\u2026",
+              disabled: disabled || isConsumed,
+              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"
+            }
+          )
+        ] }),
+        mode === "pills" && /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-1.5", children: part.options.map((opt, i) => {
+          const sel = part.selectedValue === opt.value;
+          const faded = isConsumed && !sel;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              disabled: disabled || isConsumed,
+              onClick: () => handleClick(opt),
+              className: cn(
+                "ww-inline-flex ww-items-center ww-gap-1.5 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-[12.5px] ww-font-medium ww-transition-all ww-duration-200 ww-select-none",
+                sel ? "ww-bg-primary ww-text-primary-foreground ww-shadow-md ww-ring-2 ww-ring-primary/20" : faded ? "ww-bg-muted/50 ww-border ww-border-transparent ww-text-muted-foreground ww-opacity-70 ww-cursor-default" : "ww-bg-background ww-border ww-border-border/80 ww-text-foreground hover:ww-border-primary/40 hover:ww-shadow-sm hover:ww-text-primary ww-cursor-pointer",
+                disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
+              ),
+              children: [
+                sel && /* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
+                opt.label
+              ]
+            },
+            `${opt.value}-${i}`
+          );
+        }) }),
+        mode === "grid" && /* @__PURE__ */ jsx("div", { className: "ww-grid ww-grid-cols-2 ww-gap-1.5 ww-max-h-[168px] ww-overflow-y-auto ww-pr-0.5 scrollbar-thin", children: part.options.map((opt, i) => {
+          const sel = part.selectedValue === opt.value;
+          const faded = isConsumed && !sel;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              disabled: disabled || isConsumed,
+              onClick: () => handleClick(opt),
+              className: cn(
+                "ww-flex ww-items-center ww-gap-2 ww-rounded-xl ww-px-3 ww-py-2 ww-text-[12.5px] ww-font-medium ww-text-left ww-transition-all ww-duration-200 ww-select-none ww-truncate",
+                sel ? "ww-bg-primary ww-text-primary-foreground ww-shadow-md ww-ring-2 ww-ring-primary/20" : faded ? "ww-bg-muted/40 ww-border ww-border-transparent ww-text-muted-foreground ww-opacity-70 ww-cursor-default" : "ww-bg-background ww-border ww-border-border/60 ww-text-foreground hover:ww-border-primary/40 hover:ww-shadow-sm hover:ww-text-primary ww-cursor-pointer",
+                disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
+              ),
+              children: [
+                sel ? /* @__PURE__ */ jsx(Check, { className: "ww-h-3 ww-w-3 ww-shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "ww-h-3 ww-w-3 ww-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "ww-truncate", children: opt.label })
+              ]
+            },
+            `${opt.value}-${i}`
+          );
+        }) }),
+        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: [
+          filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "ww-py-3 ww-text-center ww-text-xs ww-text-muted-foreground/50", children: "No results" }),
+          filtered.map((opt, i) => {
+            const sel = part.selectedValue === opt.value;
+            const faded = isConsumed && !sel;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                disabled: disabled || isConsumed,
+                onClick: () => handleClick(opt),
+                className: cn(
+                  "ww-flex ww-items-center ww-gap-2.5 ww-rounded-xl ww-px-3 ww-py-2.5 ww-text-[13px] ww-text-left ww-transition-all ww-duration-200 ww-select-none",
+                  sel ? "ww-bg-primary ww-text-primary-foreground ww-shadow-md ww-font-semibold ww-ring-2 ww-ring-primary/20" : faded ? "ww-opacity-70 ww-text-muted-foreground ww-bg-muted/30 ww-cursor-default" : "hover:ww-bg-accent hover:ww-text-accent-foreground ww-text-foreground ww-cursor-pointer",
+                  disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "ww-flex ww-h-4 ww-w-4 ww-shrink-0 ww-items-center ww-justify-center ww-rounded-full ww-border ww-text-[10px]",
+                        sel ? "ww-border-background ww-bg-background/20" : "ww-border-border/50"
+                      ),
+                      children: sel && /* @__PURE__ */ jsx(Check, { className: "ww-h-2.5 ww-w-2.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "ww-truncate", children: opt.label })
+                ]
+              },
+              `${opt.value}-${i}`
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+var ReactMarkdown = ReactMarkdownLib;
+function MarkdownContent({ text }) {
+  return /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        p: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "4px 0" }, children }),
+        h1: ({ children }) => /* @__PURE__ */ jsx(
+          "p",
           {
-            disabled: disabled || isConsumed,
-            onClick: () => handleClick(opt),
-            className: cn(
-              "ww-flex ww-items-center ww-gap-2 ww-rounded-lg ww-px-2.5 ww-py-2 ww-text-[12.5px] ww-text-left ww-transition-all ww-duration-100 ww-select-none",
-              sel ? "ww-bg-foreground ww-text-background ww-font-medium" : faded ? "ww-opacity-30 ww-cursor-default" : "hover:ww-bg-background ww-text-foreground ww-cursor-pointer",
-              disabled && !isConsumed && "ww-opacity-60 ww-pointer-events-none"
-            ),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: cn(
-                "ww-flex ww-h-4 ww-w-4 ww-shrink-0 ww-items-center ww-justify-center ww-rounded-full ww-border ww-text-[10px]",
-                sel ? "ww-border-background ww-bg-background/20" : "ww-border-border/50"
-              ), children: sel && /* @__PURE__ */ jsx(Check, { className: "ww-h-2.5 ww-w-2.5" }) }),
-              /* @__PURE__ */ jsx("span", { className: "ww-truncate", children: opt.label })
-            ]
-          },
-          opt.value
-        );
-      })
-    ] })
-  ] });
+            style: {
+              margin: "6px 0",
+              fontWeight: 700,
+              fontSize: "1em"
+            },
+            children
+          }
+        ),
+        h2: ({ children }) => /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "6px 0",
+              fontWeight: 700,
+              fontSize: "1em"
+            },
+            children
+          }
+        ),
+        h3: ({ children }) => /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "6px 0",
+              fontWeight: 600,
+              fontSize: "0.95em"
+            },
+            children
+          }
+        ),
+        ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
+        ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
+        li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { margin: "2px 0" }, children }),
+        strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children }),
+        code: ({ children }) => /* @__PURE__ */ jsx(
+          "code",
+          {
+            style: {
+              fontSize: "0.85em",
+              backgroundColor: "rgba(0,0,0,0.07)",
+              borderRadius: 4,
+              padding: "1px 5px",
+              fontFamily: "monospace"
+            },
+            children
+          }
+        ),
+        pre: ({ children }) => /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              overflowX: "auto",
+              margin: "6px 0",
+              padding: "8px 10px",
+              backgroundColor: "rgba(0,0,0,0.06)",
+              borderRadius: 8,
+              fontSize: "0.82em",
+              fontFamily: "monospace"
+            },
+            children
+          }
+        ),
+        a: ({
+          href,
+          children
+        }) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { textDecoration: "underline", opacity: 0.75 },
+            children
+          }
+        ),
+        table: ({ children }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              overflowX: "auto",
+              margin: "6px 0",
+              borderRadius: 8,
+              border: "1px solid rgba(0,0,0,0.1)"
+            },
+            children: /* @__PURE__ */ jsx(
+              "table",
+              {
+                style: {
+                  borderCollapse: "collapse",
+                  minWidth: "100%",
+                  fontSize: "0.82em"
+                },
+                children
+              }
+            )
+          }
+        ),
+        thead: ({ children }) => /* @__PURE__ */ jsx("thead", { style: { backgroundColor: "rgba(0,0,0,0.04)" }, children }),
+        tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
+        tr: ({ children }) => /* @__PURE__ */ jsx("tr", { style: { borderBottom: "1px solid rgba(0,0,0,0.07)" }, children }),
+        th: ({ children }) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            style: {
+              padding: "6px 10px",
+              textAlign: "left",
+              fontWeight: 600,
+              whiteSpace: "nowrap"
+            },
+            children
+          }
+        ),
+        td: ({ children }) => /* @__PURE__ */ jsx("td", { style: { padding: "5px 10px", verticalAlign: "top" }, children })
+      },
+      children: text
+    }
+  );
 }
+var Avatar2 = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    style: {
+      position: "relative",
+      display: "flex",
+      flexShrink: 0,
+      overflow: "hidden",
+      borderRadius: "9999px",
+      ...style
+    },
+    ...p
+  }
+);
+var AvatarImage2 = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      ...style
+    },
+    ...p
+  }
+);
+var AvatarFallback2 = ({
+  style,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    style: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "9999px",
+      ...style
+    },
+    ...p
+  }
+);
 function MessageBubble({
   message,
   userColor,
@@ -996,14 +1701,21 @@ function MessageBubble({
   profilePicture,
   isStreaming,
   showThinking = true,
-  onPickerSelect
+  onPickerSelect,
+  onSend
 }) {
   const isUser = message.role === "user";
   const textPart = message.parts.find((p) => p.type === "text");
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
-  const toolParts = message.parts.filter((p) => p.type === "tool");
-  const pickerParts = message.parts.filter((p) => p.type === "picker");
-  const planParts = message.parts.filter((p) => p.type === "plan");
+  const toolParts = message.parts.filter(
+    (p) => p.type === "tool"
+  );
+  const pickerParts = message.parts.filter(
+    (p) => p.type === "picker"
+  );
+  const planParts = message.parts.filter(
+    (p) => p.type === "plan"
+  );
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
     return /* @__PURE__ */ jsx("div", { className: "ww-flex ww-justify-end", children: /* @__PURE__ */ jsxs(
@@ -1012,19 +1724,55 @@ function MessageBubble({
         className: "ww-max-w-[78%] ww-rounded-2xl ww-rounded-tr-sm ww-px-4 ww-py-2.5 ww-text-sm ww-leading-relaxed ww-flex ww-flex-col ww-gap-2",
         style: { backgroundColor: userColor, color: contrastColor },
         children: [
-          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx(SentAttachments, { attachments: message.attachments, contrastColor }),
+          message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx(
+            SentAttachments,
+            {
+              attachments: message.attachments,
+              contrastColor
+            }
+          ),
           textPart?.text && /* @__PURE__ */ jsx("span", { children: textPart.text })
         ]
       }
     ) });
   }
   const visibleToolParts = showThinking ? toolParts : [];
-  const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0;
+  const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0 && planParts.length === 0;
   return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start", children: [
-    /* @__PURE__ */ jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
+    /* @__PURE__ */ jsx(
+      Avatar2,
+      {
+        style: {
+          width: 28,
+          height: 28,
+          marginTop: 2,
+          border: "1px solid rgba(0,0,0,0.08)"
+        },
+        children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(
+          AvatarFallback2,
+          {
+            style: {
+              fontSize: 10,
+              fontWeight: 600,
+              backgroundColor: "var(--primary, #19191c)",
+              color: "var(--primary-foreground, #fff)"
+            },
+            children: agentName.slice(0, 2).toUpperCase()
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-gap-1.5 ww-min-w-0 ww-max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
-      planParts.map((p) => /* @__PURE__ */ jsx(PlanCard, { part: p }, p.planId)),
+      planParts.map((p) => /* @__PURE__ */ jsx(
+        PlanCard,
+        {
+          part: p,
+          onSend,
+          disabled: isStreaming
+        },
+        p.planId
+      )),
       visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
       pickerParts.map((p) => /* @__PURE__ */ jsx(
         PickerSelector,
@@ -1037,40 +1785,39 @@ function MessageBubble({
         p.pickerId
       )),
       isEmpty && isStreaming ? /* @__PURE__ */ jsx(ThinkingDots, {}) : textPart?.text ? /* @__PURE__ */ jsxs("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-overflow-hidden ww-prose ww-prose-sm ww-max-w-none prose-p:ww-my-1 prose-headings:ww-font-semibold prose-headings:ww-my-1.5 prose-ul:ww-my-1 prose-li:ww-my-0.5 prose-strong:ww-font-semibold", children: [
-        /* @__PURE__ */ jsx(
-          ReactMarkdown,
-          {
-            remarkPlugins: [remarkGfm],
-            components: {
-              p: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "4px 0" }, children }),
-              h1: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 700, fontSize: "1em" }, children }),
-              h2: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 700, fontSize: "1em" }, children }),
-              h3: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 600, fontSize: "0.95em" }, children }),
-              ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
-              ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
-              li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { margin: "2px 0" }, children }),
-              strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children }),
-              code: ({ children }) => /* @__PURE__ */ jsx("code", { style: { fontSize: "0.85em", backgroundColor: "rgba(0,0,0,0.07)", borderRadius: 4, padding: "1px 5px", fontFamily: "monospace" }, children }),
-              pre: ({ children }) => /* @__PURE__ */ jsx("pre", { style: { overflowX: "auto", margin: "6px 0", padding: "8px 10px", backgroundColor: "rgba(0,0,0,0.06)", borderRadius: 8, fontSize: "0.82em", fontFamily: "monospace" }, children }),
-              a: ({ href, children }) => /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: "underline", opacity: 0.75 }, children }),
-              table: ({ children }) => /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", margin: "6px 0", borderRadius: 8, border: "1px solid rgba(0,0,0,0.1)" }, children: /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", minWidth: "100%", fontSize: "0.82em" }, children }) }),
-              thead: ({ children }) => /* @__PURE__ */ jsx("thead", { style: { backgroundColor: "rgba(0,0,0,0.04)" }, children }),
-              tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
-              tr: ({ children }) => /* @__PURE__ */ jsx("tr", { style: { borderBottom: "1px solid rgba(0,0,0,0.07)" }, children }),
-              th: ({ children }) => /* @__PURE__ */ jsx("th", { style: { padding: "6px 10px", textAlign: "left", fontWeight: 600, whiteSpace: "nowrap" }, children }),
-              td: ({ children }) => /* @__PURE__ */ jsx("td", { style: { padding: "5px 10px", verticalAlign: "top" }, children })
-            },
-            children: textPart.text
-          }
-        ),
+        /* @__PURE__ */ jsx(MarkdownContent, { text: textPart.text }),
         isStreaming && /* @__PURE__ */ jsx("span", { className: "ww-inline-block ww-w-0.5 ww-h-3.5 ww-bg-foreground/60 ww-ml-0.5 ww-animate-pulse ww-align-middle" })
       ] }) : null
     ] })
   ] });
 }
-var Avatar3 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: ["ww-relative ww-flex ww-h-10 ww-w-10 ww-shrink-0 ww-overflow-hidden ww-rounded-full", className].filter(Boolean).join(" "), ...p });
+var Avatar3 = ({
+  className,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    className: [
+      "ww-relative ww-flex ww-h-10 ww-w-10 ww-shrink-0 ww-overflow-hidden ww-rounded-full",
+      className
+    ].filter(Boolean).join(" "),
+    ...p
+  }
+);
 var AvatarImage3 = AvatarPrimitive.Image;
-var AvatarFallback3 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: ["ww-flex ww-h-full ww-w-full ww-items-center ww-justify-center ww-rounded-full ww-bg-muted", className].filter(Boolean).join(" "), ...p });
+var AvatarFallback3 = ({
+  className,
+  ...p
+}) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    className: [
+      "ww-flex ww-h-full ww-w-full ww-items-center ww-justify-center ww-rounded-full ww-bg-muted",
+      className
+    ].filter(Boolean).join(" "),
+    ...p
+  }
+);
 function ChatMessages({
   messages,
   streaming,
@@ -1084,14 +1831,15 @@ function ChatMessages({
   onPickerSelect
 }) {
   const bottomRef = useRef(null);
+  const greetText = initialMessages[0];
   const showGreeting = messages.length === 0;
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messages, streaming]);
   return /* @__PURE__ */ jsxs("div", { className: "ww-flex-1 ww-flex ww-flex-col ww-overflow-y-auto ww-overscroll-contain", children: [
-    showGreeting && /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pt-5", children: [
+    showGreeting && greetText && /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pt-5", children: [
       /* @__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() }) }),
-      /* @__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: initialMessages[0] ?? "Hello! How can I help you today?" })
+      /* @__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 })
     ] }),
     showGreeting && /* @__PURE__ */ jsx("div", { className: "ww-flex-1" }),
     /* @__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(
@@ -1103,10 +1851,47 @@ function ChatMessages({
         profilePicture,
         isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
         showThinking,
-        onPickerSelect
+        onPickerSelect,
+        onSend: i === messages.length - 1 ? onSuggest : void 0
       },
       msg.id
     )) }),
+    streaming && messages.length > 0 && messages[messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-gap-2.5 ww-items-start ww-px-4 ww-pb-2", children: [
+      /* @__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() }) }),
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes wDotBounce {
+              0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
+              40% { transform: translateY(-6px) scale(1.15); opacity: 1; }
+            }
+          ` }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ww-bg-muted",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            borderRadius: "18px 18px 18px 4px",
+            padding: "13px 18px"
+          },
+          children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "block",
+                width: 7,
+                height: 7,
+                borderRadius: "50%",
+                backgroundColor: "currentColor",
+                animation: `wDotBounce 1.2s cubic-bezier(0.4,0,0.2,1) ${i * 0.16}s infinite`
+              }
+            },
+            i
+          ))
+        }
+      )
+    ] }),
     showGreeting && suggestedMessages.length > 0 && /* @__PURE__ */ jsx("div", { className: "ww-flex ww-flex-wrap ww-gap-2 ww-px-4 ww-pb-4", children: suggestedMessages.map((msg, i) => /* @__PURE__ */ jsx(
       "button",
       {
@@ -1173,7 +1958,13 @@ function ChatInput({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-rounded-2xl ww-border ww-bg-background ww-shadow-sm focus-within:ww-ring-1 focus-within:ww-ring-ring/40 ww-transition-shadow", children: [
-      hasAttachments && attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "ww-px-2 ww-pt-2", children: /* @__PURE__ */ jsx(AttachmentChips, { attachments, onRemove: (id) => onRemoveAttachment?.(id) }) }),
+      hasAttachments && attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "ww-px-2 ww-pt-2", children: /* @__PURE__ */ jsx(
+        AttachmentChips,
+        {
+          attachments,
+          onRemove: (id) => onRemoveAttachment?.(id)
+        }
+      ) }),
       hasAttachments && /* @__PURE__ */ jsx(
         "input",
         {
@@ -1263,7 +2054,10 @@ function ChatInput({
               "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",
               hasText || streaming ? "ww-opacity-100 ww-shadow-sm" : "ww-opacity-30"
             ),
-            style: hasText || streaming ? { backgroundColor: accentColor, color: getContrastColor(accentColor) } : { backgroundColor: "transparent", color: "currentColor" },
+            style: hasText || streaming ? {
+              backgroundColor: accentColor,
+              color: getContrastColor(accentColor)
+            } : { backgroundColor: "transparent", color: "currentColor" },
             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" })
           }
         )
@@ -1271,6 +2065,126 @@ function ChatInput({
     ] })
   ] });
 }
+function CustomControlBar({ onClose }) {
+  const { localParticipant, isMicrophoneEnabled } = useLocalParticipant();
+  const room = useRoomContext();
+  const toggleMic = async () => {
+    if (isMicrophoneEnabled) {
+      await localParticipant.setMicrophoneEnabled(false);
+    } else {
+      await localParticipant.setMicrophoneEnabled(true);
+    }
+  };
+  const disconnect = () => {
+    room.disconnect();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-items-center ww-justify-center ww-gap-6", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: toggleMic,
+        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"}`,
+        title: isMicrophoneEnabled ? "Silenciar micr\xF3fono" : "Activar micr\xF3fono",
+        children: isMicrophoneEnabled ? /* @__PURE__ */ jsx(Mic, { className: "ww-w-6 ww-h-6" }) : /* @__PURE__ */ jsx(MicOff, { className: "ww-w-6 ww-h-6" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: disconnect,
+        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",
+        style: { backgroundColor: "#ef4444" },
+        title: "Desconectar",
+        children: /* @__PURE__ */ jsx(PhoneOff, { className: "ww-w-6 ww-h-6" })
+      }
+    )
+  ] });
+}
+function ChatGPTOrb() {
+  const { state, audioTrack } = useVoiceAssistant();
+  const isSpeaking = state === "speaking";
+  const isListening = state === "listening";
+  const getGradient = () => {
+    if (isSpeaking) {
+      return "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(147, 51, 234, 0.9))";
+    } else if (isListening) {
+      return "linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(20, 184, 166, 0.85))";
+    }
+    return "linear-gradient(135deg, rgba(25, 25, 28, 0.8), rgba(25, 25, 28, 0.95))";
+  };
+  const getGlow = () => {
+    if (isSpeaking) return "ww-bg-purple-500/30 ww-animate-ping";
+    if (isListening) return "ww-bg-emerald-500/20 ww-animate-pulse";
+    return "ww-bg-transparent ww-scale-90";
+  };
+  const getRing = () => {
+    if (isSpeaking) return "ww-bg-purple-500/20 ww-scale-110";
+    if (isListening) return "ww-bg-emerald-500/10 ww-scale-105";
+    return "ww-bg-foreground/5 ww-scale-100";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ww-relative ww-w-48 ww-h-48 ww-flex ww-items-center ww-justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ww-absolute ww-inset-0 ww-rounded-full ww-transition-all ww-duration-1000 ${getGlow()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ww-absolute ww-inset-4 ww-rounded-full ww-transition-all ww-duration-500 ${getRing()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ww-absolute ww-inset-8 ww-rounded-full ww-shadow-2xl ww-transition-all ww-duration-700 ww-flex ww-items-center ww-justify-center ww-overflow-hidden",
+        style: {
+          background: getGradient(),
+          transform: isSpeaking ? "scale(1.05)" : "scale(1)"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "ww-opacity-90 ww-flex ww-items-center ww-justify-center ww-w-full ww-h-full", children: /* @__PURE__ */ jsx(
+          BarVisualizer,
+          {
+            state,
+            barCount: 5,
+            trackRef: audioTrack,
+            options: { minHeight: 6 },
+            style: { color: "rgba(255, 255, 255, 0.95)" }
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function AssistantVisualizer({ onClose }) {
+  const { state } = useVoiceAssistant();
+  return /* @__PURE__ */ jsxs("div", { className: "ww-flex ww-flex-col ww-items-center ww-justify-center ww-h-full ww-w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "ww-flex-1 ww-flex ww-items-center ww-justify-center", children: /* @__PURE__ */ jsx(ChatGPTOrb, {}) }),
+    /* @__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: [
+      /* @__PURE__ */ jsx("div", { className: "ww-text-sm ww-font-medium ww-tracking-wide ww-text-foreground/60 ww-uppercase", children: state === "connecting" || state === "initializing" ? "Conectando..." : state === "listening" ? "Escuchando..." : state === "speaking" ? "Hablando..." : "Listo" }),
+      /* @__PURE__ */ jsx(CustomControlBar, { onClose })
+    ] })
+  ] });
+}
+function VoiceOverlay({ token, serverUrl, onClose }) {
+  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(
+    LiveKitRoom,
+    {
+      token,
+      serverUrl,
+      connect: true,
+      audio: true,
+      video: false,
+      className: "ww-flex-1",
+      children: [
+        /* @__PURE__ */ jsx(RoomAudioRenderer, {}),
+        /* @__PURE__ */ jsx(AssistantVisualizer, { onClose })
+      ]
+    }
+  ) });
+}
 function ChatWidget({
   agentId,
   workspaceId,
@@ -1296,13 +2210,27 @@ function ChatWidget({
   enableVoice = false,
   voiceAutoSend = false,
   enableAttachments = false,
+  customBackend,
   className,
   onClose,
   onReset,
   onExpand,
-  expanded
+  expanded,
+  embedded = false,
+  envId,
+  onDebugTrace
 }) {
-  const chat = useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides });
+  const chat = useChat({
+    agentId,
+    workspaceId,
+    envId,
+    source,
+    userContext,
+    persist,
+    onNavigate,
+    playgroundOverrides,
+    customBackend
+  });
   const voice = useVoice({
     agentId,
     onTranscript: (text) => {
@@ -1314,29 +2242,47 @@ function ChatWidget({
     }
   });
   const attachmentHook = useAttachments({ agentId });
+  const debugTraceLenRef = useRef(0);
+  useEffect(() => {
+    if (!onDebugTrace || chat.debugTraces.length <= debugTraceLenRef.current)
+      return;
+    for (let i = debugTraceLenRef.current; i < chat.debugTraces.length; i++) {
+      onDebugTrace(chat.debugTraces[i]);
+    }
+    debugTraceLenRef.current = chat.debugTraces.length;
+  }, [chat.debugTraces, onDebugTrace]);
   const [isDragOver, setIsDragOver] = useState(false);
-  const handleDragOver = useCallback((e) => {
-    if (!enableAttachments) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer.types.includes("Files")) setIsDragOver(true);
-  }, [enableAttachments]);
-  const handleDragLeave = useCallback((e) => {
-    if (!enableAttachments) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (!e.currentTarget.contains(e.relatedTarget)) {
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!enableAttachments) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.dataTransfer.types.includes("Files")) setIsDragOver(true);
+    },
+    [enableAttachments]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      if (!enableAttachments) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setIsDragOver(false);
+      }
+    },
+    [enableAttachments]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      if (!enableAttachments) return;
+      e.preventDefault();
+      e.stopPropagation();
       setIsDragOver(false);
-    }
-  }, [enableAttachments]);
-  const handleDrop = useCallback((e) => {
-    if (!enableAttachments) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-    const files = e.dataTransfer.files;
-    if (files.length > 0) attachmentHook.attach(files);
-  }, [enableAttachments, attachmentHook]);
+      const files = e.dataTransfer.files;
+      if (files.length > 0) attachmentHook.attach(files);
+    },
+    [enableAttachments, attachmentHook]
+  );
   const handleSend = () => {
     const payloads = attachmentHook.readyPayloads;
     if (payloads.length > 0) {
@@ -1355,6 +2301,7 @@ function ChatWidget({
   };
   const isDark = theme === "dark";
   const cssVars = {
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
     colorScheme: theme,
     // Inline style has higher specificity than any host-site stylesheet,
     // so background-color set here cannot be overridden by host CSS.
@@ -1377,7 +2324,8 @@ function ChatWidget({
     "div",
     {
       className: cn(
-        "wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-rounded-2xl ww-border ww-shadow-xl ww-bg-background ww-h-full ww-relative",
+        "wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
+        !embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
         isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
         className
       ),
@@ -1402,7 +2350,32 @@ function ChatWidget({
             onReset: handleReset,
             onClose: hideCloseButton ? void 0 : onClose,
             onExpand,
-            expanded
+            expanded,
+            onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
+            isCallLoading: chat.voiceCall?.loading
+          }
+        ),
+        chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsx(
+          VoiceOverlay,
+          {
+            token: chat.voiceCall.token,
+            serverUrl: chat.voiceCall.serverUrl,
+            onClose: chat.voiceCall.stop,
+            accentColor: userMessageColor
+          }
+        ),
+        customBackend?.mode === "human" && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
+            style: { backgroundColor: `${userMessageColor}0d` },
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
+                /* @__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" }),
+                /* @__PURE__ */ jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1420,6 +2393,99 @@ function ChatWidget({
             onPickerSelect: chat.selectPickerOption
           }
         ),
+        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(
+          "button",
+          {
+            onClick: () => void customBackend.footerAction.onClick(),
+            disabled: customBackend.footerAction.loading,
+            style: customBackend.footerAction.icon === "human" ? {
+              backgroundColor: userMessageColor,
+              color: "#ffffff",
+              boxShadow: `0 2px 12px ${userMessageColor}55`
+            } : {
+              borderColor: `${userMessageColor}35`,
+              backgroundColor: `${userMessageColor}0d`,
+              color: userMessageColor
+            },
+            className: [
+              "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",
+              "hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
+              customBackend.footerAction.icon === "human" ? "" : "ww-border"
+            ].join(" "),
+            children: [
+              customBackend.footerAction.loading ? /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "ww-opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "ww-opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                      }
+                    )
+                  ]
+                }
+              ) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  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" })
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
+                    /* @__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" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+                }
+              )
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsx(
           ChatInput,
           {
@@ -1444,7 +2510,7 @@ function ChatWidget({
             } : {}
           }
         ),
-        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", children: [
+        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: [
           /* @__PURE__ */ jsxs(
             "a",
             {
@@ -1494,19 +2560,27 @@ function useAutoConfig(agentId, enabled) {
       if (cancelled) return;
       const cfg = body?.data ?? {};
       const remote = {};
-      if (cfg.profilePicture != null) remote.profilePicture = cfg.profilePicture;
-      if (cfg.displayName != null) remote.displayName = cfg.displayName;
+      if (cfg.profilePicture != null)
+        remote.profilePicture = cfg.profilePicture;
+      if (cfg.displayName != null)
+        remote.displayName = cfg.displayName;
       if (cfg.theme) remote.theme = cfg.theme;
-      if (cfg.userMessageColor) remote.userMessageColor = cfg.userMessageColor;
+      if (cfg.userMessageColor)
+        remote.userMessageColor = cfg.userMessageColor;
       if (Array.isArray(cfg.initialMessages) && cfg.initialMessages.length > 0)
         remote.initialMessages = cfg.initialMessages;
       if (Array.isArray(cfg.suggestedMessages))
         remote.suggestedMessages = cfg.suggestedMessages;
-      if (cfg.messagePlaceholder != null) remote.messagePlaceholder = cfg.messagePlaceholder;
+      if (cfg.messagePlaceholder != null)
+        remote.messagePlaceholder = cfg.messagePlaceholder;
       if (cfg.watermark != null) remote.watermark = cfg.watermark;
       if (cfg.footer != null) remote.footer = cfg.footer;
-      if (cfg.showThinking != null) remote.showThinking = cfg.showThinking;
-      if (cfg.regenerateMessage != null) remote.regenerateMessage = cfg.regenerateMessage;
+      if (cfg.showThinking != null)
+        remote.showThinking = cfg.showThinking;
+      if (cfg.regenerateMessage != null)
+        remote.regenerateMessage = cfg.regenerateMessage;
+      if (cfg.enableVoice != null)
+        remote.enableVoice = cfg.enableVoice;
       setResult({
         remoteConfig: remote,
         bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
@@ -1527,9 +2601,391 @@ function useAutoConfig(agentId, enabled) {
   }, [agentId, enabled]);
   return result;
 }
+function toWidgetMsg(m) {
+  return {
+    id: m.id,
+    role: m.role === "customer" ? "user" : "assistant",
+    parts: [{ type: "text", text: m.content }],
+    attachments: m.metadata?.attachments ?? void 0
+  };
+}
+function useSupportChat({
+  inboxToken,
+  apiBase = "https://app.wallavi.com",
+  requestHumanLabel = "Hablar con un agente",
+  returnToAiLabel
+}) {
+  const enabled = Boolean(inboxToken) && inboxToken !== "__disabled__";
+  const STORAGE_KEY = `wlv_support_${inboxToken}`;
+  const base = apiBase.replace(/\/$/, "");
+  const [session, setSession] = useState(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved)
+        return JSON.parse(saved).session ?? null;
+    } catch {
+    }
+    return null;
+  });
+  const [rawMessages, setRawMessages] = useState([]);
+  const [sending, setSending] = useState(false);
+  const [isAiMode, setIsAiMode] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved)
+        return JSON.parse(saved).isAiMode ?? false;
+    } catch {
+    }
+    return false;
+  });
+  const [agentTyping, setAgentTyping] = useState(false);
+  const [requestingHuman, setRequestingHuman] = useState(false);
+  const [returningToAi, setReturningToAi] = useState(false);
+  const [voiceActive, setVoiceActive] = useState(false);
+  const [voiceToken, setVoiceToken] = useState(null);
+  const [voiceServerUrl, setVoiceServerUrl] = useState(null);
+  const [voiceLoading, setVoiceLoading] = useState(false);
+  const [voiceError, setVoiceError] = useState(null);
+  const typingTimerRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) JSON.parse(saved);
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+      setSession(null);
+      setIsAiMode(false);
+    }
+  }, [STORAGE_KEY, enabled]);
+  const loadMessages = useCallback(
+    async (sess) => {
+      try {
+        const res = await fetch(
+          `${base}/api/support-chat/${sess.conversationId}/messages`,
+          {
+            headers: { "x-visitor-token": sess.visitorToken }
+          }
+        );
+        const data = await res.json();
+        if (Array.isArray(data.data)) setRawMessages(data.data);
+      } catch {
+      }
+    },
+    [base]
+  );
+  useEffect(() => {
+    if (!enabled || !session) return;
+    void loadMessages(session);
+    let ablyClient = null;
+    const setupAbly = async () => {
+      try {
+        const res = await fetch(
+          `${base}/api/support-chat/${session.conversationId}/ably-token`,
+          {
+            headers: { "x-visitor-token": session.visitorToken }
+          }
+        );
+        if (!res.ok) return;
+        const { tokenRequest, channel: channelName } = await res.json();
+        const AblyLib = (await import('ably')).default;
+        ablyClient = new AblyLib.Realtime({
+          authCallback: (_, cb) => cb(null, tokenRequest)
+        });
+        const ch = ablyClient.channels.get(channelName);
+        ch.subscribe((msg) => {
+          const event = { type: msg.name, ...msg.data };
+          if (event.type === "message.created" && event.message) {
+            setRawMessages((prev) => {
+              if (prev.some((m) => m.id === event.message.id))
+                return prev;
+              return [
+                ...prev.filter((m) => !m.id.startsWith("tmp_")),
+                event.message
+              ];
+            });
+          } else if (event.type === "agent.typing") {
+            setAgentTyping(!!event.isTyping);
+            if (event.isTyping) {
+              if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+              typingTimerRef.current = setTimeout(
+                () => setAgentTyping(false),
+                6e3
+              );
+            } else {
+              if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+            }
+          } else if (event.type === "mode.changed") {
+            const newIsAi = event.mode === "auto";
+            setIsAiMode(newIsAi);
+            setSession((s) => {
+              if (s)
+                localStorage.setItem(
+                  STORAGE_KEY,
+                  JSON.stringify({ session: s, isAiMode: newIsAi })
+                );
+              return s;
+            });
+          }
+        });
+      } catch {
+      }
+    };
+    void setupAbly();
+    const pollId = setInterval(() => void loadMessages(session), 3e4);
+    return () => {
+      if (ablyClient)
+        try {
+          ablyClient.close();
+        } catch {
+        }
+      clearInterval(pollId);
+      if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
+    };
+  }, [session, STORAGE_KEY, base, loadMessages]);
+  const send = useCallback(
+    async (text, attachments) => {
+      if (!text.trim() && !attachments?.length) return;
+      if (sending) return;
+      setSending(true);
+      if (!session) {
+        setRawMessages([
+          {
+            id: `tmp_${Date.now()}`,
+            role: "customer",
+            content: text || `[${attachments?.length ?? 0} archivo(s)]`,
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            metadata: attachments?.length ? { attachments } : void 0
+          }
+        ]);
+        try {
+          const res = await fetch(`${base}/api/support-chat/start`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              inboxToken,
+              message: text || `[${attachments.length} archivo(s)]`,
+              attachments
+            })
+          });
+          const data = await res.json();
+          if (data.data) {
+            const sess = {
+              conversationId: data.data.conversationId,
+              visitorToken: data.data.visitorToken
+            };
+            const ai = data.data.isAiMode ?? false;
+            localStorage.setItem(
+              STORAGE_KEY,
+              JSON.stringify({ session: sess, isAiMode: ai })
+            );
+            setSession(sess);
+            setIsAiMode(ai);
+            if (Array.isArray(data.data.messages)) {
+              setRawMessages(data.data.messages);
+            }
+          }
+        } catch {
+        }
+      } else {
+        setRawMessages((prev) => [
+          ...prev,
+          {
+            id: `tmp_${Date.now()}`,
+            role: "customer",
+            content: text || `[${attachments.length} archivo(s)]`,
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            metadata: attachments?.length ? { attachments } : void 0
+          }
+        ]);
+        try {
+          const body = { content: text };
+          if (attachments?.length) body.attachments = attachments;
+          const res = await fetch(
+            `${base}/api/support-chat/${session.conversationId}/messages`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "x-visitor-token": session.visitorToken
+              },
+              body: JSON.stringify(body)
+            }
+          );
+          const data = await res.json();
+          if (data.data?.aiReply) {
+            setRawMessages((prev) => {
+              const withoutTemp = prev.filter((m) => !m.id.startsWith("tmp_"));
+              if (withoutTemp.some((m) => m.id === data.data.aiReply.id))
+                return withoutTemp;
+              return [...withoutTemp, data.data.aiReply];
+            });
+          }
+        } catch {
+        }
+      }
+      setSending(false);
+    },
+    [session, sending, inboxToken, base, STORAGE_KEY]
+  );
+  const requestHuman = useCallback(async () => {
+    if (!session || !isAiMode || requestingHuman) return;
+    setRequestingHuman(true);
+    try {
+      await fetch(`${base}/api/support-chat/${session.conversationId}/mode`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "x-visitor-token": session.visitorToken
+        },
+        body: JSON.stringify({ mode: "human" })
+      });
+      setIsAiMode(false);
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ session, isAiMode: false })
+      );
+    } catch {
+    }
+    setRequestingHuman(false);
+  }, [session, isAiMode, requestingHuman, base, STORAGE_KEY]);
+  const returnToAi = useCallback(async () => {
+    if (!session || isAiMode || returningToAi) return;
+    setReturningToAi(true);
+    try {
+      await fetch(`${base}/api/support-chat/${session.conversationId}/mode`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "x-visitor-token": session.visitorToken
+        },
+        body: JSON.stringify({ mode: "auto" })
+      });
+      setIsAiMode(true);
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ session, isAiMode: true })
+      );
+    } catch {
+    }
+    setReturningToAi(false);
+  }, [session, isAiMode, returningToAi, base, STORAGE_KEY]);
+  const startVoiceCall = useCallback(async () => {
+    if (!session || !isAiMode) return;
+    setVoiceLoading(true);
+    setVoiceError(null);
+    try {
+      const res = await fetch(
+        `${base}/api/support-chat/${session.conversationId}/livekit-token`,
+        {
+          headers: { "x-visitor-token": session.visitorToken }
+        }
+      );
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to start call");
+      setVoiceToken(data.token);
+      setVoiceServerUrl(data.url);
+      setVoiceActive(true);
+    } catch (err) {
+      setVoiceError(err.message);
+    }
+    setVoiceLoading(false);
+  }, [session, isAiMode, base]);
+  const stopVoiceCall = useCallback(() => {
+    setVoiceActive(false);
+    setVoiceToken(null);
+    setVoiceServerUrl(null);
+  }, []);
+  const reset = useCallback(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    setSession(null);
+    setRawMessages([]);
+    setIsAiMode(false);
+    setAgentTyping(false);
+    setRequestingHuman(false);
+    setReturningToAi(false);
+    stopVoiceCall();
+  }, [STORAGE_KEY, stopVoiceCall]);
+  const messages = useMemo(
+    () => rawMessages.filter((m) => m.role !== "system").map(toWidgetMsg),
+    [rawMessages]
+  );
+  const footerAction = useMemo(() => {
+    if (isAiMode) {
+      return {
+        label: requestHumanLabel,
+        sublabel: "Te conectamos con un agente disponible",
+        icon: "human",
+        onClick: requestHuman,
+        loading: requestingHuman
+      };
+    }
+    if (!isAiMode && session && returnToAiLabel) {
+      return {
+        label: returnToAiLabel,
+        sublabel: "Respuesta instant\xE1nea con inteligencia artificial",
+        icon: "ai",
+        onClick: returnToAi,
+        loading: returningToAi
+      };
+    }
+    return void 0;
+  }, [
+    isAiMode,
+    session,
+    requestHumanLabel,
+    requestHuman,
+    requestingHuman,
+    returnToAiLabel,
+    returnToAi,
+    returningToAi
+  ]);
+  return useMemo(
+    () => ({
+      messages,
+      streaming: sending || agentTyping,
+      send,
+      reset,
+      mode: isAiMode || !session ? "ai" : "human",
+      ...footerAction ? { footerAction } : {},
+      voiceCall: isAiMode && session ? {
+        active: voiceActive,
+        token: voiceToken,
+        serverUrl: voiceServerUrl,
+        start: startVoiceCall,
+        stop: stopVoiceCall,
+        loading: voiceLoading,
+        error: voiceError
+      } : void 0
+    }),
+    [
+      messages,
+      sending,
+      agentTyping,
+      send,
+      reset,
+      isAiMode,
+      footerAction,
+      voiceActive,
+      voiceToken,
+      voiceServerUrl,
+      startVoiceCall,
+      stopVoiceCall,
+      voiceLoading,
+      voiceError,
+      session
+    ]
+  );
+}
 var KEY_EXPANDED = "wallavi_bubble_expanded";
 var KEY_DISMISSED = "wallavi_bubble_dismissed";
 function BubbleWidget({
+  inboxToken,
+  supportApiBase,
+  requestHumanLabel,
+  returnToAiLabel,
   position: positionProp,
   width: widthProp,
   height: heightProp,
@@ -1547,33 +3003,47 @@ function BubbleWidget({
   onOpenChange,
   ...chatProps
 }) {
+  const supportBackend = useSupportChat(
+    inboxToken ? {
+      inboxToken,
+      apiBase: supportApiBase,
+      requestHumanLabel,
+      returnToAiLabel
+    } : { inboxToken: "__disabled__", apiBase: supportApiBase }
+  );
   const isControlled = isOpenProp !== void 0;
   const [internalOpen, setInternalOpen] = useState(false);
   const open = isControlled ? isOpenProp : internalOpen;
-  const setOpen = useCallback((valueOrUpdater) => {
-    if (!isControlled) {
-      if (typeof valueOrUpdater === "function") {
-        setInternalOpen((prev) => {
-          const next = valueOrUpdater(prev);
-          onOpenChange?.(next);
-          return next;
-        });
+  const setOpen = useCallback(
+    (valueOrUpdater) => {
+      if (!isControlled) {
+        if (typeof valueOrUpdater === "function") {
+          setInternalOpen((prev) => {
+            const next = valueOrUpdater(prev);
+            onOpenChange?.(next);
+            return next;
+          });
+        } else {
+          setInternalOpen(valueOrUpdater);
+          onOpenChange?.(valueOrUpdater);
+        }
       } else {
-        setInternalOpen(valueOrUpdater);
-        onOpenChange?.(valueOrUpdater);
+        const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
+        onOpenChange?.(next);
       }
-    } else {
-      const next = typeof valueOrUpdater === "function" ? valueOrUpdater(open) : valueOrUpdater;
-      onOpenChange?.(next);
-    }
-  }, [isControlled, open, onOpenChange]);
+    },
+    [isControlled, open, onOpenChange]
+  );
   const [expanded, setExpanded] = useState(false);
   const panelRef = useRef(null);
   const autoOpenedRef = useRef(false);
   useEffect(() => {
     if (localStorage.getItem(KEY_EXPANDED) === "true") setExpanded(true);
   }, []);
-  const remote = useAutoConfig(chatProps.agentId, autoConfig);
+  const remote = useAutoConfig(
+    inboxToken ? "" : chatProps.agentId ?? "",
+    !inboxToken && autoConfig
+  );
   const resolvedPosition = positionProp ?? remote.position;
   const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
   const resolvedAutoOpen = autoOpenProp || remote.autoOpen;
@@ -1587,8 +3057,8 @@ function BubbleWidget({
   const mergedConfig = {
     ...remote.remoteConfig,
     ...definedChatProps,
-    agentId: chatProps.agentId,
-    agentName: chatProps.agentName
+    agentId: chatProps.agentId ?? "",
+    agentName: chatProps.agentName ?? ""
   };
   const setOpenRef = useRef(setOpen);
   useEffect(() => {
@@ -1605,7 +3075,7 @@ function BubbleWidget({
   useEffect(() => {
     if (!resolvedKeyboardShortcut) return;
     const onKey = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey.toLowerCase()) {
         e.preventDefault();
         setOpenRef.current((v) => !v);
       }
@@ -1624,7 +3094,10 @@ function BubbleWidget({
   const handleClose = () => {
     setOpen(false);
     if (!isControlled) {
-      localStorage.setItem(KEY_DISMISSED, String(Date.now() + 24 * 60 * 60 * 1e3));
+      localStorage.setItem(
+        KEY_DISMISSED,
+        String(Date.now() + 24 * 60 * 60 * 1e3)
+      );
     }
   };
   const toggleExpanded = () => setExpanded((v) => {
@@ -1633,7 +3106,10 @@ function BubbleWidget({
     return next;
   });
   const isLeft = resolvedPosition === "bottom-left";
-  const panelWidth = expanded ? Math.min(expandedWidth, typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth) : resolvedWidth;
+  const panelWidth = expanded ? Math.min(
+    expandedWidth,
+    typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth
+  ) : resolvedWidth;
   const panelHeight = expanded ? expandedHeight : resolvedHeight;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1664,6 +3140,8 @@ function BubbleWidget({
               ChatWidget,
               {
                 ...mergedConfig,
+                agentId: inboxToken ? "support" : chatProps.agentId ?? "",
+                customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
                 onClose: handleClose,
                 onExpand: toggleExpanded,
                 expanded,
@@ -1689,15 +3167,20 @@ function BubbleWidget({
               alignItems: "center",
               justifyContent: "center",
               transition: "transform 0.2s ease, box-shadow 0.2s ease",
-              background: open ? "var(--foreground, #19191c)" : "var(--background, #fff)",
-              color: open ? "var(--background, #fff)" : "var(--foreground, #19191c)"
+              background: open ? "#19191c" : "#ffffff",
+              color: open ? "#ffffff" : "#19191c"
             },
             children: open ? /* @__PURE__ */ jsx(X, { style: { width: 20, height: 20 } }) : resolvedBubbleIcon ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: resolvedBubbleIcon,
                 alt: "",
-                style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  display: "block"
+                }
               }
             ) : /* @__PURE__ */ jsx(DefaultIcon, {})
           }
@@ -1707,4 +3190,4 @@ function BubbleWidget({
   );
 }
 
-export { BubbleWidget, ChatWidget, formatToolName, getContrastColor, useAttachments, useChat, useVoice };
+export { BubbleWidget, ChatWidget, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };