@wallavi/widget 1.7.2 → 1.9.0

package/dist/index.d.mts

@@ -110,6 +110,7 @@ interface ChatWidgetConfig {
     watermarkLogoUrl?: string;
     footer?: string | null;
     theme?: "light" | "dark";
+    widgetLayout?: "bubble" | "center";
     showThinking?: boolean;
     regenerateMessage?: boolean;
     /**

package/dist/index.d.ts

@@ -110,6 +110,7 @@ interface ChatWidgetConfig {
     watermarkLogoUrl?: string;
     footer?: string | null;
     theme?: "light" | "dark";
+    widgetLayout?: "bubble" | "center";
     showThinking?: boolean;
     regenerateMessage?: boolean;
     /**

package/dist/index.js

@@ -61,6 +61,36 @@ function styleInject(css, { insertAt } = {}) {
 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 = tailwindMerge.extendTailwindMerge({ prefix: "ww-" });
 var cn = (...inputs) => twMerge(clsx.clsx(inputs));
+async function getFreshClerkToken() {
+  if (typeof window === "undefined") return null;
+  const clerk = window.Clerk;
+  if (!clerk?.session) return null;
+  try {
+    let token = await clerk.session.getToken();
+    if (token) {
+      const payloadBase64 = token.split(".")[1];
+      if (payloadBase64) {
+        const payloadJson = JSON.parse(
+          atob(payloadBase64.replace(/-/g, "+").replace(/_/g, "/"))
+        );
+        const exp = payloadJson.exp;
+        if (exp && typeof exp === "number") {
+          const nowSeconds = Math.floor(Date.now() / 1e3);
+          if (exp - nowSeconds < 30) {
+            token = await clerk.session.getToken({ skipCache: true });
+          }
+        }
+      }
+    }
+    return token;
+  } catch (e) {
+    try {
+      return await clerk.session.getToken();
+    } catch {
+      return null;
+    }
+  }
+}
 
 // src/lib/types.ts
 function getContrastColor(hex) {
@@ -262,13 +292,11 @@ function useVoiceCall({
     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 token2 = isPrivate ? await getFreshClerkToken() : null;
       const res = await fetch(url, {
-        headers: isPrivate && typeof window !== "undefined" ? (
-          // @ts-ignore
-          {
-            Authorization: `Bearer ${await window.Clerk?.session?.getToken()}`
-          }
-        ) : {}
+        headers: {
+          ...token2 ? { Authorization: `Bearer ${token2}` } : {}
+        }
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Failed to start call");
@@ -349,6 +377,10 @@ function useChat({
         if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
         return;
       }
+      if (proto.type === "client-action") {
+        executeDeclarativeSteps(proto.steps, onNavigateRef.current);
+        return;
+      }
       if (proto.type === "debug-trace") {
         setDebugTraces((prev) => [
           ...prev,
@@ -364,7 +396,7 @@ function useChat({
     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 token = isPrivate ? await getFreshClerkToken() : null;
       const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/stream` : `${API_URL2}/api/chat/stream`;
       const res = await fetch(url, {
         method: "POST",
@@ -496,7 +528,7 @@ function useChat({
       void (async () => {
         try {
           const isPrivate = Boolean(workspaceId);
-          const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+          const token = isPrivate ? await getFreshClerkToken() : 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: {
@@ -727,6 +759,82 @@ function useChat({
     voiceCall
   };
 }
+function executeDeclarativeSteps(steps, onNavigate) {
+  if (typeof window === "undefined" || !Array.isArray(steps)) return;
+  for (const step of steps) {
+    try {
+      const { action, selector, value, payload } = step;
+      switch (action) {
+        case "scroll_into_view": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.scrollIntoView({ behavior: "smooth", block: "center" });
+          break;
+        }
+        case "click": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.click();
+          break;
+        }
+        case "focus": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.focus();
+          break;
+        }
+        case "add_class": {
+          if (!selector || !value) break;
+          const el = document.querySelector(selector);
+          if (el) el.classList.add(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "remove_class": {
+          if (!selector || !value) break;
+          const el = document.querySelector(selector);
+          if (el) el.classList.remove(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "fill_value": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          if (el) {
+            el.value = value ?? "";
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          break;
+        }
+        case "dispatch_event": {
+          if (!value) break;
+          const detail = payload ?? {};
+          window.dispatchEvent(new CustomEvent(value, { detail }));
+          break;
+        }
+        case "navigate": {
+          if (value) {
+            if (onNavigate) {
+              onNavigate(value);
+            } else {
+              window.location.href = value;
+            }
+          }
+          break;
+        }
+        default:
+          console.warn(
+            `[Wallavi Widget] Unknown declarative action: ${action}`
+          );
+      }
+    } catch (err) {
+      console.error(
+        "[Wallavi Widget] Failed to execute declarative step:",
+        step,
+        err
+      );
+    }
+  }
+}
 function getPreferredMimeType() {
   if (typeof MediaRecorder === "undefined") return "";
   const candidates = [
@@ -2566,6 +2674,7 @@ var EMPTY = {
   autoOpen: false,
   keyboardShortcut: false,
   position: "bottom-right",
+  widgetLayout: "bubble",
   bubbleSize: 52,
   panelWidth: 360,
   panelHeight: 580,
@@ -2605,6 +2714,8 @@ function useAutoConfig(agentId, enabled) {
         remote.showThinking = cfg.showThinking;
       if (cfg.regenerateMessage != null)
         remote.regenerateMessage = cfg.regenerateMessage;
+      if (cfg.widgetLayout)
+        remote.widgetLayout = cfg.widgetLayout;
       if (cfg.enableVoice != null)
         remote.enableVoice = cfg.enableVoice;
       setResult({
@@ -2613,6 +2724,7 @@ function useAutoConfig(agentId, enabled) {
         autoOpen: Boolean(cfg.autoOpen),
         keyboardShortcut: Boolean(cfg.keyboardShortcut),
         position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
+        widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
         bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
         panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
         panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
@@ -3071,6 +3183,7 @@ function BubbleWidget({
     !inboxToken && autoConfig
   );
   const resolvedPosition = remote.position ?? positionProp;
+  const resolvedLayout = remote.widgetLayout ?? chatProps.widgetLayout ?? "bubble";
   const resolvedBubbleIcon = remote.bubbleIconUrl ?? bubbleIconUrlProp;
   const resolvedAutoOpen = remote.autoOpen || autoOpenProp;
   const resolvedKeyboardShortcut = remote.keyboardShortcut || keyboardShortcutProp;
@@ -3138,83 +3251,108 @@ function BubbleWidget({
     typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth
   ) : resolvedWidth;
   const panelHeight = expanded ? expandedHeight : resolvedHeight;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        bottom: 20,
-        [isLeft ? "left" : "right"]: 20,
-        zIndex: 9999,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: isLeft ? "flex-start" : "flex-end",
-        gap: 12
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: panelRef,
-            "aria-hidden": !open,
-            style: {
-              display: open ? "block" : "none",
-              width: panelWidth,
-              height: panelHeight,
-              transition: "width 0.3s ease, height 0.3s ease"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              ChatWidget,
-              {
-                ...mergedConfig,
-                agentId: inboxToken ? "support" : chatProps.agentId ?? "",
-                customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
-                onClose: handleClose,
-                onExpand: toggleExpanded,
-                expanded,
-                className: cn("ww-shadow-2xl ww-h-full", panelClassName)
-              }
-            )
-          }
-        ),
-        !hideBubble && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => setOpen((v) => !v),
-            title: open ? "Close chat" : "Open chat",
-            style: {
-              width: resolvedBubbleSize,
-              height: resolvedBubbleSize,
-              borderRadius: "50%",
-              border: "1px solid rgba(0,0,0,0.1)",
-              boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
-              cursor: "pointer",
-              overflow: "hidden",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              transition: "transform 0.2s ease, box-shadow 0.2s ease",
-              background: open ? "#19191c" : "#ffffff",
-              color: open ? "#ffffff" : "#19191c"
-            },
-            children: open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { style: { width: 20, height: 20 } }) : resolvedBubbleIcon ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: resolvedBubbleIcon,
-                alt: "",
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  display: "block"
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    resolvedLayout === "center" && open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: handleClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0, 0, 0, 0.4)",
+          backdropFilter: "blur(4px)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 20,
+          [isLeft ? "left" : "right"]: 20,
+          zIndex: 9999,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: isLeft ? "flex-start" : "flex-end",
+          gap: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: panelRef,
+              "aria-hidden": !open,
+              style: resolvedLayout === "center" ? {
+                display: open ? "block" : "none",
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: 9999,
+                width: panelWidth,
+                height: panelHeight,
+                transition: "width 0.3s ease, height 0.3s ease"
+              } : {
+                display: open ? "block" : "none",
+                width: panelWidth,
+                height: panelHeight,
+                transition: "width 0.3s ease, height 0.3s ease"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ChatWidget,
+                {
+                  ...mergedConfig,
+                  agentId: inboxToken ? "support" : chatProps.agentId ?? "",
+                  customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
+                  onClose: handleClose,
+                  onExpand: toggleExpanded,
+                  expanded,
+                  className: cn("ww-shadow-2xl ww-h-full", panelClassName)
                 }
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
-          }
-        )
-      ]
-    }
-  );
+              )
+            }
+          ),
+          !hideBubble && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setOpen((v) => !v),
+              title: open ? "Close chat" : "Open chat",
+              style: {
+                width: resolvedBubbleSize,
+                height: resolvedBubbleSize,
+                borderRadius: "50%",
+                border: "1px solid rgba(0,0,0,0.1)",
+                boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
+                cursor: "pointer",
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "transform 0.2s ease, box-shadow 0.2s ease",
+                background: open ? "#19191c" : "#ffffff",
+                color: open ? "#ffffff" : "#19191c"
+              },
+              children: open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { style: { width: 20, height: 20 } }) : resolvedBubbleIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: resolvedBubbleIcon,
+                  alt: "",
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    display: "block"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 
 exports.BubbleWidget = BubbleWidget;

package/dist/index.mjs

@@ -35,6 +35,36 @@ function styleInject(css, { insertAt } = {}) {
 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));
+async function getFreshClerkToken() {
+  if (typeof window === "undefined") return null;
+  const clerk = window.Clerk;
+  if (!clerk?.session) return null;
+  try {
+    let token = await clerk.session.getToken();
+    if (token) {
+      const payloadBase64 = token.split(".")[1];
+      if (payloadBase64) {
+        const payloadJson = JSON.parse(
+          atob(payloadBase64.replace(/-/g, "+").replace(/_/g, "/"))
+        );
+        const exp = payloadJson.exp;
+        if (exp && typeof exp === "number") {
+          const nowSeconds = Math.floor(Date.now() / 1e3);
+          if (exp - nowSeconds < 30) {
+            token = await clerk.session.getToken({ skipCache: true });
+          }
+        }
+      }
+    }
+    return token;
+  } catch (e) {
+    try {
+      return await clerk.session.getToken();
+    } catch {
+      return null;
+    }
+  }
+}
 
 // src/lib/types.ts
 function getContrastColor(hex) {
@@ -236,13 +266,11 @@ function useVoiceCall({
     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 token2 = isPrivate ? await getFreshClerkToken() : null;
       const res = await fetch(url, {
-        headers: isPrivate && typeof window !== "undefined" ? (
-          // @ts-ignore
-          {
-            Authorization: `Bearer ${await window.Clerk?.session?.getToken()}`
-          }
-        ) : {}
+        headers: {
+          ...token2 ? { Authorization: `Bearer ${token2}` } : {}
+        }
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Failed to start call");
@@ -323,6 +351,10 @@ function useChat({
         if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
         return;
       }
+      if (proto.type === "client-action") {
+        executeDeclarativeSteps(proto.steps, onNavigateRef.current);
+        return;
+      }
       if (proto.type === "debug-trace") {
         setDebugTraces((prev) => [
           ...prev,
@@ -338,7 +370,7 @@ function useChat({
     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 token = isPrivate ? await getFreshClerkToken() : null;
       const url = isPrivate ? `${API_URL2}/api/threads/${threadId}/stream` : `${API_URL2}/api/chat/stream`;
       const res = await fetch(url, {
         method: "POST",
@@ -470,7 +502,7 @@ function useChat({
       void (async () => {
         try {
           const isPrivate = Boolean(workspaceId);
-          const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+          const token = isPrivate ? await getFreshClerkToken() : 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: {
@@ -701,6 +733,82 @@ function useChat({
     voiceCall
   };
 }
+function executeDeclarativeSteps(steps, onNavigate) {
+  if (typeof window === "undefined" || !Array.isArray(steps)) return;
+  for (const step of steps) {
+    try {
+      const { action, selector, value, payload } = step;
+      switch (action) {
+        case "scroll_into_view": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.scrollIntoView({ behavior: "smooth", block: "center" });
+          break;
+        }
+        case "click": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.click();
+          break;
+        }
+        case "focus": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          el?.focus();
+          break;
+        }
+        case "add_class": {
+          if (!selector || !value) break;
+          const el = document.querySelector(selector);
+          if (el) el.classList.add(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "remove_class": {
+          if (!selector || !value) break;
+          const el = document.querySelector(selector);
+          if (el) el.classList.remove(...value.split(/\s+/).filter(Boolean));
+          break;
+        }
+        case "fill_value": {
+          if (!selector) break;
+          const el = document.querySelector(selector);
+          if (el) {
+            el.value = value ?? "";
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          break;
+        }
+        case "dispatch_event": {
+          if (!value) break;
+          const detail = payload ?? {};
+          window.dispatchEvent(new CustomEvent(value, { detail }));
+          break;
+        }
+        case "navigate": {
+          if (value) {
+            if (onNavigate) {
+              onNavigate(value);
+            } else {
+              window.location.href = value;
+            }
+          }
+          break;
+        }
+        default:
+          console.warn(
+            `[Wallavi Widget] Unknown declarative action: ${action}`
+          );
+      }
+    } catch (err) {
+      console.error(
+        "[Wallavi Widget] Failed to execute declarative step:",
+        step,
+        err
+      );
+    }
+  }
+}
 function getPreferredMimeType() {
   if (typeof MediaRecorder === "undefined") return "";
   const candidates = [
@@ -2540,6 +2648,7 @@ var EMPTY = {
   autoOpen: false,
   keyboardShortcut: false,
   position: "bottom-right",
+  widgetLayout: "bubble",
   bubbleSize: 52,
   panelWidth: 360,
   panelHeight: 580,
@@ -2579,6 +2688,8 @@ function useAutoConfig(agentId, enabled) {
         remote.showThinking = cfg.showThinking;
       if (cfg.regenerateMessage != null)
         remote.regenerateMessage = cfg.regenerateMessage;
+      if (cfg.widgetLayout)
+        remote.widgetLayout = cfg.widgetLayout;
       if (cfg.enableVoice != null)
         remote.enableVoice = cfg.enableVoice;
       setResult({
@@ -2587,6 +2698,7 @@ function useAutoConfig(agentId, enabled) {
         autoOpen: Boolean(cfg.autoOpen),
         keyboardShortcut: Boolean(cfg.keyboardShortcut),
         position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
+        widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
         bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
         panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
         panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,
@@ -3045,6 +3157,7 @@ function BubbleWidget({
     !inboxToken && autoConfig
   );
   const resolvedPosition = remote.position ?? positionProp;
+  const resolvedLayout = remote.widgetLayout ?? chatProps.widgetLayout ?? "bubble";
   const resolvedBubbleIcon = remote.bubbleIconUrl ?? bubbleIconUrlProp;
   const resolvedAutoOpen = remote.autoOpen || autoOpenProp;
   const resolvedKeyboardShortcut = remote.keyboardShortcut || keyboardShortcutProp;
@@ -3112,83 +3225,108 @@ function BubbleWidget({
     typeof window !== "undefined" ? window.innerWidth - 40 : expandedWidth
   ) : resolvedWidth;
   const panelHeight = expanded ? expandedHeight : resolvedHeight;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        bottom: 20,
-        [isLeft ? "left" : "right"]: 20,
-        zIndex: 9999,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: isLeft ? "flex-start" : "flex-end",
-        gap: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: panelRef,
-            "aria-hidden": !open,
-            style: {
-              display: open ? "block" : "none",
-              width: panelWidth,
-              height: panelHeight,
-              transition: "width 0.3s ease, height 0.3s ease"
-            },
-            children: /* @__PURE__ */ jsx(
-              ChatWidget,
-              {
-                ...mergedConfig,
-                agentId: inboxToken ? "support" : chatProps.agentId ?? "",
-                customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
-                onClose: handleClose,
-                onExpand: toggleExpanded,
-                expanded,
-                className: cn("ww-shadow-2xl ww-h-full", panelClassName)
-              }
-            )
-          }
-        ),
-        !hideBubble && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setOpen((v) => !v),
-            title: open ? "Close chat" : "Open chat",
-            style: {
-              width: resolvedBubbleSize,
-              height: resolvedBubbleSize,
-              borderRadius: "50%",
-              border: "1px solid rgba(0,0,0,0.1)",
-              boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
-              cursor: "pointer",
-              overflow: "hidden",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              transition: "transform 0.2s ease, box-shadow 0.2s ease",
-              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"
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    resolvedLayout === "center" && open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: handleClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0, 0, 0, 0.4)",
+          backdropFilter: "blur(4px)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 20,
+          [isLeft ? "left" : "right"]: 20,
+          zIndex: 9999,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: isLeft ? "flex-start" : "flex-end",
+          gap: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: panelRef,
+              "aria-hidden": !open,
+              style: resolvedLayout === "center" ? {
+                display: open ? "block" : "none",
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: 9999,
+                width: panelWidth,
+                height: panelHeight,
+                transition: "width 0.3s ease, height 0.3s ease"
+              } : {
+                display: open ? "block" : "none",
+                width: panelWidth,
+                height: panelHeight,
+                transition: "width 0.3s ease, height 0.3s ease"
+              },
+              children: /* @__PURE__ */ jsx(
+                ChatWidget,
+                {
+                  ...mergedConfig,
+                  agentId: inboxToken ? "support" : chatProps.agentId ?? "",
+                  customBackend: inboxToken ? supportBackend : mergedConfig.customBackend,
+                  onClose: handleClose,
+                  onExpand: toggleExpanded,
+                  expanded,
+                  className: cn("ww-shadow-2xl ww-h-full", panelClassName)
                 }
-              }
-            ) : /* @__PURE__ */ jsx(DefaultIcon, {})
-          }
-        )
-      ]
-    }
-  );
+              )
+            }
+          ),
+          !hideBubble && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setOpen((v) => !v),
+              title: open ? "Close chat" : "Open chat",
+              style: {
+                width: resolvedBubbleSize,
+                height: resolvedBubbleSize,
+                borderRadius: "50%",
+                border: "1px solid rgba(0,0,0,0.1)",
+                boxShadow: "0 4px 16px rgba(0,0,0,0.16)",
+                cursor: "pointer",
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "transform 0.2s ease, box-shadow 0.2s ease",
+                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"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(DefaultIcon, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 
 export { BubbleWidget, ChatWidget, PlanCard, ReasoningBlock, ToolCallBadge, formatToolName, getContrastColor, useAttachments, useChat, useSupportChat, useVoice };

package/package.json

@@ -42,7 +42,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "scripts": {
     "build": "tsup && pnpm build:css",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --config tailwind.config.cjs --minify",