@constructor-io/constructorio-ui-asa 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/constructorio-ui-asa-bundled.js +1 -1
  2. package/lib/cjs/components/Chat/Chat.js +4 -3
  3. package/lib/cjs/components/Chat/ChatInput.css +11 -0
  4. package/lib/cjs/components/Chat/ChatInput.js +8 -3
  5. package/lib/cjs/components/icons/StopIcon.js +9 -0
  6. package/lib/cjs/components/icons/index.js +3 -1
  7. package/lib/cjs/hooks/useAsaResults.js +58 -13
  8. package/lib/cjs/utils/translate.js +1 -0
  9. package/lib/cjs/version.js +1 -1
  10. package/lib/mjs/components/Chat/Chat.js +4 -3
  11. package/lib/mjs/components/Chat/ChatInput.css +11 -0
  12. package/lib/mjs/components/Chat/ChatInput.js +9 -4
  13. package/lib/mjs/components/icons/StopIcon.js +5 -0
  14. package/lib/mjs/components/icons/index.js +1 -0
  15. package/lib/mjs/hooks/useAsaResults.js +57 -13
  16. package/lib/mjs/utils/translate.js +1 -0
  17. package/lib/mjs/version.js +1 -1
  18. package/lib/types/components/Chat/Chat.d.ts +13 -0
  19. package/lib/types/components/Chat/ChatInput.d.ts +11 -1
  20. package/lib/types/components/icons/StopIcon.d.ts +2 -0
  21. package/lib/types/components/icons/index.d.ts +1 -0
  22. package/lib/types/types.d.ts +15 -0
  23. package/lib/types/version.d.ts +1 -1
  24. package/package.json +1 -1
package/dist/constructorio-ui-asa-bundled.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="cio-asa-styles",o.appendChild(document.createTextNode(`@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap";/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--cio-color-red-200: oklch(88.5% .062 18.334);--cio-color-red-500: oklch(63.7% .237 25.331);--cio-color-red-600: oklch(57.7% .245 27.325);--cio-color-orange-500: oklch(70.5% .213 47.604);--cio-color-yellow-500: oklch(79.5% .184 86.047);--cio-color-green-600: oklch(62.7% .194 149.214);--cio-color-emerald-50: oklch(97.9% .021 166.113);--cio-color-emerald-100: oklch(95% .052 163.051);--cio-color-emerald-200: oklch(90.5% .093 164.15);--cio-color-emerald-300: oklch(84.5% .143 164.978);--cio-color-emerald-600: oklch(59.6% .145 163.225);--cio-color-emerald-800: oklch(43.2% .095 166.913);--cio-color-teal-50: oklch(98.4% .014 180.72);--cio-color-blue-50: oklch(97% .014 254.604);--cio-color-blue-100: oklch(93.2% .032 255.585);--cio-color-blue-200: oklch(88.2% .059 254.128);--cio-color-blue-500: oklch(62.3% .214 259.815);--cio-color-blue-600: oklch(54.6% .245 262.881);--cio-color-blue-700: oklch(48.8% .243 264.376);--cio-color-blue-800: oklch(42.4% .199 265.638);--cio-color-indigo-50: oklch(96.2% .018 272.314);--cio-color-indigo-100: oklch(93% .034 272.788);--cio-color-indigo-600: oklch(51.1% .262 276.966);--cio-color-indigo-700: oklch(45.7% .24 277.023);--cio-color-purple-50: oklch(97.7% .014 308.299);--cio-color-purple-100: oklch(94.6% .033 307.174);--cio-color-purple-500: oklch(62.7% .265 303.9);--cio-color-purple-600: oklch(55.8% .288 302.321);--cio-color-purple-700: oklch(49.6% .265 301.924);--cio-color-purple-800: oklch(43.8% .218 303.724);--cio-color-pink-500: oklch(65.6% .241 354.308);--cio-color-pink-600: oklch(59.2% .249 .584);--cio-color-slate-50: oklch(98.4% .003 247.858);--cio-color-slate-100: oklch(96.8% .007 247.896);--cio-color-slate-200: oklch(92.9% .013 255.508);--cio-color-slate-300: oklch(86.9% .022 252.894);--cio-color-slate-500: oklch(55.4% .046 257.417);--cio-color-slate-700: oklch(37.2% .044 257.287);--cio-color-slate-900: oklch(20.8% .042 265.755);--cio-color-slate-950: oklch(12.9% .042 264.695);--cio-color-gray-50: oklch(98.5% .002 247.839);--cio-color-gray-100: oklch(96.7% .003 264.542);--cio-color-gray-200: oklch(92.8% .006 264.531);--cio-color-gray-400: oklch(70.7% .022 261.325);--cio-color-gray-500: oklch(55.1% .027 264.364);--cio-color-gray-600: oklch(44.6% .03 256.802);--cio-color-gray-700: oklch(37.3% .034 259.733);--cio-color-gray-800: oklch(27.8% .033 256.848);--cio-color-neutral-100: oklch(97% 0 0);--cio-color-black: #000;--cio-color-white: #fff;--cio-spacing: .25rem;--cio-container-sm: 24rem;--cio-container-lg: 32rem;--cio-text-xs: .75rem;--cio-text-xs--line-height: calc(1 / .75);--cio-text-sm: .875rem;--cio-text-sm--line-height: calc(1.25 / .875);--cio-text-base: 1rem;--cio-text-base--line-height: 1.5 ;--cio-text-lg: 1.125rem;--cio-text-lg--line-height: calc(1.75 / 1.125);--cio-text-xl: 1.25rem;--cio-text-xl--line-height: calc(1.75 / 1.25);--cio-text-2xl: 1.5rem;--cio-text-2xl--line-height: calc(2 / 1.5);--cio-font-weight-medium: 500;--cio-font-weight-semibold: 600;--cio-font-weight-bold: 700;--cio-tracking-tighter: -.05em;--cio-tracking-wide: .025em;--cio-radius-2xl: 1rem;--cio-radius-3xl: 1.5rem;--cio-default-transition-duration: .15s;--cio-default-transition-timing-function: cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.cio\\:\\@container\\/card-header{container-type:inline-size;container-name:card-header}.cio\\:pointer-events-none{pointer-events:none}.cio\\:invisible{visibility:hidden}.cio\\:sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.cio\\:absolute{position:absolute}.cio\\:relative{position:relative}.cio\\:top-2{top:calc(var(--cio-spacing) * 2)}.cio\\:top-3{top:calc(var(--cio-spacing) * 3)}.cio\\:right-2{right:calc(var(--cio-spacing) * 2)}.cio\\:right-3{right:calc(var(--cio-spacing) * 3)}.cio\\:left-2{left:calc(var(--cio-spacing) * 2)}.cio\\:col-start-2{grid-column-start:2}.cio\\:row-span-2{grid-row:span 2 / span 2}.cio\\:row-start-1{grid-row-start:1}.cio\\:m-0{margin:calc(var(--cio-spacing) * 0)}.cio\\:mx-2{margin-inline:calc(var(--cio-spacing) * 2)}.cio\\:my-2{margin-block:calc(var(--cio-spacing) * 2)}.cio\\:mt-1{margin-top:calc(var(--cio-spacing) * 1)}.cio\\:mt-2{margin-top:calc(var(--cio-spacing) * 2)}.cio\\:mt-3{margin-top:calc(var(--cio-spacing) * 3)}.cio\\:mt-auto{margin-top:auto}.cio\\:mr-2{margin-right:calc(var(--cio-spacing) * 2)}.cio\\:mr-4{margin-right:calc(var(--cio-spacing) * 4)}.cio\\:mb-2{margin-bottom:calc(var(--cio-spacing) * 2)}.cio\\:mb-3{margin-bottom:calc(var(--cio-spacing) * 3)}.cio\\:mb-4{margin-bottom:calc(var(--cio-spacing) * 4)}.cio\\:ml-1{margin-left:calc(var(--cio-spacing) * 1)}.cio\\:ml-2{margin-left:calc(var(--cio-spacing) * 2)}.cio\\:ml-4{margin-left:calc(var(--cio-spacing) * 4)}.cio\\:line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cio\\:line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.cio\\:flex{display:flex}.cio\\:grid{display:grid}.cio\\:hidden{display:none}.cio\\:inline-flex{display:inline-flex}.cio\\:size-6{width:calc(var(--cio-spacing) * 6);height:calc(var(--cio-spacing) * 6)}.cio\\:size-9{width:calc(var(--cio-spacing) * 9);height:calc(var(--cio-spacing) * 9)}.cio\\:h-3{height:calc(var(--cio-spacing) * 3)}.cio\\:h-4{height:calc(var(--cio-spacing) * 4)}.cio\\:h-5{height:calc(var(--cio-spacing) * 5)}.cio\\:h-6{height:calc(var(--cio-spacing) * 6)}.cio\\:h-8{height:calc(var(--cio-spacing) * 8)}.cio\\:h-10{height:calc(var(--cio-spacing) * 10)}.cio\\:h-12{height:calc(var(--cio-spacing) * 12)}.cio\\:h-14{height:calc(var(--cio-spacing) * 14)}.cio\\:h-16{height:calc(var(--cio-spacing) * 16)}.cio\\:h-24{height:calc(var(--cio-spacing) * 24)}.cio\\:h-32{height:calc(var(--cio-spacing) * 32)}.cio\\:h-\\[400px\\]{height:400px}.cio\\:h-full{height:100%}.cio\\:min-h-5{min-height:calc(var(--cio-spacing) * 5)}.cio\\:min-h-\\[224px\\]{min-height:224px}.cio\\:w-3{width:calc(var(--cio-spacing) * 3)}.cio\\:w-4{width:calc(var(--cio-spacing) * 4)}.cio\\:w-5{width:calc(var(--cio-spacing) * 5)}.cio\\:w-6{width:calc(var(--cio-spacing) * 6)}.cio\\:w-8{width:calc(var(--cio-spacing) * 8)}.cio\\:w-14{width:calc(var(--cio-spacing) * 14)}.cio\\:w-16{width:calc(var(--cio-spacing) * 16)}.cio\\:w-24{width:calc(var(--cio-spacing) * 24)}.cio\\:w-\\[200px\\]{width:200px}.cio\\:w-\\[220px\\]{width:220px}.cio\\:w-\\[240px\\]{width:240px}.cio\\:w-\\[260px\\]{width:260px}.cio\\:w-full{width:100%}.cio\\:max-w-\\[256px\\]{max-width:256px}.cio\\:max-w-lg{max-width:var(--cio-container-lg)}.cio\\:max-w-sm{max-width:var(--cio-container-sm)}.cio\\:min-w-4{min-width:calc(var(--cio-spacing) * 4)}.cio\\:min-w-5{min-width:calc(var(--cio-spacing) * 5)}.cio\\:min-w-6{min-width:calc(var(--cio-spacing) * 6)}.cio\\:min-w-\\[176px\\]{min-width:176px}.cio\\:flex-1{flex:1}.cio\\:flex-shrink-0,.cio\\:shrink-0{flex-shrink:0}.cio\\:grow{flex-grow:1}.cio\\:grow-0{flex-grow:0}.cio\\:basis-full{flex-basis:100%}.cio\\:rotate-90{rotate:90deg}.cio\\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cio\\:cursor-pointer{cursor:pointer}.cio\\:list-none{list-style-type:none}.cio\\:auto-rows-min{grid-auto-rows:min-content}.cio\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cio\\:grid-rows-\\[auto_auto\\]{grid-template-rows:auto auto}.cio\\:flex-col{flex-direction:column}.cio\\:flex-row{flex-direction:row}.cio\\:flex-wrap{flex-wrap:wrap}.cio\\:items-baseline{align-items:baseline}.cio\\:items-center{align-items:center}.cio\\:items-end{align-items:flex-end}.cio\\:items-start{align-items:flex-start}.cio\\:items-stretch{align-items:stretch}.cio\\:justify-between{justify-content:space-between}.cio\\:justify-center{justify-content:center}.cio\\:gap-1{gap:calc(var(--cio-spacing) * 1)}.cio\\:gap-1\\.5{gap:calc(var(--cio-spacing) * 1.5)}.cio\\:gap-2{gap:calc(var(--cio-spacing) * 2)}.cio\\:gap-3{gap:calc(var(--cio-spacing) * 3)}.cio\\:gap-4{gap:calc(var(--cio-spacing) * 4)}:where(.cio\\:space-y-1>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.cio\\:space-y-2>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.cio\\:space-y-3>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.cio\\:self-center{align-self:center}.cio\\:self-start{align-self:flex-start}.cio\\:justify-self-end{justify-self:flex-end}.cio\\:overflow-hidden{overflow:hidden}.cio\\:rounded{border-radius:.25rem}.cio\\:rounded-2xl{border-radius:var(--cio-radius-2xl)}.cio\\:rounded-3xl{border-radius:var(--cio-radius-3xl)}.cio\\:rounded-full{border-radius:calc(infinity * 1px)}.cio\\:rounded-lg{border-radius:var(--cio-radius)}.cio\\:rounded-md{border-radius:calc(var(--cio-radius) - 2px)}.cio\\:rounded-none{border-radius:0}.cio\\:rounded-sm{border-radius:calc(var(--cio-radius) - 4px)}.cio\\:rounded-xl{border-radius:calc(var(--cio-radius) + 4px)}.cio\\:border{border-style:var(--tw-border-style);border-width:1px}.cio\\:border-0{border-style:var(--tw-border-style);border-width:0px}.cio\\:border-2{border-style:var(--tw-border-style);border-width:2px}.cio\\:border-4{border-style:var(--tw-border-style);border-width:4px}.cio\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.cio\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.cio\\:border-black\\/20{border-color:var(--cio-color-black)}@supports (color: color-mix(in lab,red,red)){.cio\\:border-black\\/20{border-color:color-mix(in oklab,var(--cio-color-black) 20%,transparent)}}.cio\\:border-blue-200{border-color:var(--cio-color-blue-200)}.cio\\:border-blue-600{border-color:var(--cio-color-blue-600)}.cio\\:border-emerald-200{border-color:var(--cio-color-emerald-200)}.cio\\:border-gray-200{border-color:var(--cio-color-gray-200)}.cio\\:border-slate-200{border-color:var(--cio-color-slate-200)}.cio\\:border-slate-500{border-color:var(--cio-color-slate-500)}.cio\\:border-slate-700{border-color:var(--cio-color-slate-700)}.cio\\:border-transparent{border-color:transparent}.cio\\:border-white{border-color:var(--cio-color-white)}.cio\\:bg-background{background-color:var(--cio-background)}.cio\\:bg-black{background-color:var(--cio-color-black)}.cio\\:bg-blue-100{background-color:var(--cio-color-blue-100)}.cio\\:bg-blue-500{background-color:var(--cio-color-blue-500)}.cio\\:bg-blue-600{background-color:var(--cio-color-blue-600)}.cio\\:bg-card{background-color:var(--cio-card)}.cio\\:bg-destructive{background-color:var(--cio-destructive)}.cio\\:bg-emerald-100{background-color:var(--cio-color-emerald-100)}.cio\\:bg-gray-100{background-color:var(--cio-color-gray-100)}.cio\\:bg-gray-200{background-color:var(--cio-color-gray-200)}.cio\\:bg-indigo-600{background-color:var(--cio-color-indigo-600)}.cio\\:bg-primary{background-color:var(--cio-primary)}.cio\\:bg-purple-100{background-color:var(--cio-color-purple-100)}.cio\\:bg-purple-600{background-color:var(--cio-color-purple-600)}.cio\\:bg-red-500{background-color:var(--cio-color-red-500)}.cio\\:bg-secondary{background-color:var(--cio-secondary)}.cio\\:bg-slate-50{background-color:var(--cio-color-slate-50)}.cio\\:bg-slate-100{background-color:var(--cio-color-slate-100)}.cio\\:bg-slate-900{background-color:var(--cio-color-slate-900)}.cio\\:bg-slate-950\\/90{background-color:var(--cio-color-slate-950)}@supports (color: color-mix(in lab,red,red)){.cio\\:bg-slate-950\\/90{background-color:color-mix(in oklab,var(--cio-color-slate-950) 90%,transparent)}}.cio\\:bg-transparent{background-color:transparent}.cio\\:bg-white{background-color:var(--cio-color-white)}.cio\\:bg-gradient-to-br{--tw-gradient-position: to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.cio\\:bg-gradient-to-r{--tw-gradient-position: to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.cio\\:from-blue-50{--tw-gradient-from: var(--cio-color-blue-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-blue-500{--tw-gradient-from: var(--cio-color-blue-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-emerald-50{--tw-gradient-from: var(--cio-color-emerald-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-orange-500{--tw-gradient-from: var(--cio-color-orange-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-purple-50{--tw-gradient-from: var(--cio-color-purple-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-purple-500{--tw-gradient-from: var(--cio-color-purple-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-blue-50{--tw-gradient-to: var(--cio-color-blue-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-indigo-50{--tw-gradient-to: var(--cio-color-indigo-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-indigo-100{--tw-gradient-to: var(--cio-color-indigo-100);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-pink-500{--tw-gradient-to: var(--cio-color-pink-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-purple-50{--tw-gradient-to: var(--cio-color-purple-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-purple-600{--tw-gradient-to: var(--cio-color-purple-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-red-500{--tw-gradient-to: var(--cio-color-red-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-teal-50{--tw-gradient-to: var(--cio-color-teal-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:object-cover{object-fit:cover}.cio\\:p-0\\.5{padding:calc(var(--cio-spacing) * .5)}.cio\\:p-1{padding:calc(var(--cio-spacing) * 1)}.cio\\:p-2{padding:calc(var(--cio-spacing) * 2)}.cio\\:p-3{padding:calc(var(--cio-spacing) * 3)}.cio\\:p-4{padding:calc(var(--cio-spacing) * 4)}.cio\\:p-6{padding:calc(var(--cio-spacing) * 6)}.cio\\:px-0{padding-inline:calc(var(--cio-spacing) * 0)}.cio\\:px-1{padding-inline:calc(var(--cio-spacing) * 1)}.cio\\:px-2{padding-inline:calc(var(--cio-spacing) * 2)}.cio\\:px-3{padding-inline:calc(var(--cio-spacing) * 3)}.cio\\:px-4{padding-inline:calc(var(--cio-spacing) * 4)}.cio\\:px-6{padding-inline:calc(var(--cio-spacing) * 6)}.cio\\:py-1{padding-block:calc(var(--cio-spacing) * 1)}.cio\\:py-2{padding-block:calc(var(--cio-spacing) * 2)}.cio\\:pt-2{padding-top:calc(var(--cio-spacing) * 2)}.cio\\:text-center{text-align:center}.cio\\:text-2xl{font-size:var(--cio-text-2xl);line-height:var(--tw-leading, var(--cio-text-2xl--line-height))}.cio\\:text-base{font-size:var(--cio-text-base);line-height:var(--tw-leading, var(--cio-text-base--line-height))}.cio\\:text-lg{font-size:var(--cio-text-lg);line-height:var(--tw-leading, var(--cio-text-lg--line-height))}.cio\\:text-sm{font-size:var(--cio-text-sm);line-height:var(--tw-leading, var(--cio-text-sm--line-height))}.cio\\:text-xl{font-size:var(--cio-text-xl);line-height:var(--tw-leading, var(--cio-text-xl--line-height))}.cio\\:text-xs{font-size:var(--cio-text-xs);line-height:var(--tw-leading, var(--cio-text-xs--line-height))}.cio\\:text-\\[11px\\]{font-size:11px}.cio\\:text-\\[13px\\]{font-size:13px}.cio\\:leading-3{--tw-leading: calc(var(--cio-spacing) * 3);line-height:calc(var(--cio-spacing) * 3)}.cio\\:leading-4{--tw-leading: calc(var(--cio-spacing) * 4);line-height:calc(var(--cio-spacing) * 4)}.cio\\:leading-none{--tw-leading: 1;line-height:1}.cio\\:font-bold{--tw-font-weight: var(--cio-font-weight-bold);font-weight:var(--cio-font-weight-bold)}.cio\\:font-medium{--tw-font-weight: var(--cio-font-weight-medium);font-weight:var(--cio-font-weight-medium)}.cio\\:font-semibold{--tw-font-weight: var(--cio-font-weight-semibold);font-weight:var(--cio-font-weight-semibold)}.cio\\:tracking-tighter{--tw-tracking: var(--cio-tracking-tighter);letter-spacing:var(--cio-tracking-tighter)}.cio\\:tracking-wide{--tw-tracking: var(--cio-tracking-wide);letter-spacing:var(--cio-tracking-wide)}.cio\\:break-words{overflow-wrap:break-word}.cio\\:whitespace-nowrap{white-space:nowrap}.cio\\:text-\\[\\#0A0F2940\\]{color:#0a0f2940}.cio\\:text-blue-600{color:var(--cio-color-blue-600)}.cio\\:text-blue-800{color:var(--cio-color-blue-800)}.cio\\:text-card-foreground{color:var(--cio-card-foreground)}.cio\\:text-emerald-300{color:var(--cio-color-emerald-300)}.cio\\:text-emerald-600{color:var(--cio-color-emerald-600)}.cio\\:text-emerald-800{color:var(--cio-color-emerald-800)}.cio\\:text-gray-400{color:var(--cio-color-gray-400)}.cio\\:text-gray-500{color:var(--cio-color-gray-500)}.cio\\:text-gray-600{color:var(--cio-color-gray-600)}.cio\\:text-gray-700{color:var(--cio-color-gray-700)}.cio\\:text-gray-800{color:var(--cio-color-gray-800)}.cio\\:text-green-600{color:var(--cio-color-green-600)}.cio\\:text-muted-foreground{color:var(--cio-muted-foreground)}.cio\\:text-primary{color:var(--cio-primary)}.cio\\:text-primary-foreground{color:var(--cio-primary-foreground)}.cio\\:text-purple-600{color:var(--cio-color-purple-600)}.cio\\:text-purple-700{color:var(--cio-color-purple-700)}.cio\\:text-purple-800{color:var(--cio-color-purple-800)}.cio\\:text-red-600{color:var(--cio-color-red-600)}.cio\\:text-secondary-foreground{color:var(--cio-secondary-foreground)}.cio\\:text-slate-300{color:var(--cio-color-slate-300)}.cio\\:text-slate-500{color:var(--cio-color-slate-500)}.cio\\:text-white{color:var(--cio-color-white)}.cio\\:text-yellow-500{color:var(--cio-color-yellow-500)}.cio\\:uppercase{text-transform:uppercase}.cio\\:line-through{text-decoration-line:line-through}.cio\\:underline{text-decoration-line:underline}.cio\\:underline-offset-4{text-underline-offset:4px}.cio\\:opacity-0{opacity:0%}.cio\\:opacity-90{opacity:90%}.cio\\:shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-md{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-none{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-xs{--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:duration-200{--tw-duration: .2s;transition-duration:.2s}.cio\\:duration-250{--tw-duration: .25s;transition-duration:.25s}.cio\\:outline-none{--tw-outline-style: none;outline-style:none}.cio\\:group-has-\\[input\\:checked\\]\\:opacity-100:is(:where(.cio\\:group):has(*:is(input:checked)) *){opacity:100%}.cio\\:group-has-\\[input\\:checked\\]\\:shadow-\\[inset_0_0_0_32px_\\#000\\]:is(:where(.cio\\:group):has(*:is(input:checked)) *){--tw-shadow: inset 0 0 0 32px var(--tw-shadow-color, #000);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover: hover){.cio\\:hover\\:scale-105:hover{--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media (hover: hover){.cio\\:hover\\:rounded:hover{border-radius:.25rem}}@media (hover: hover){.cio\\:hover\\:bg-accent:hover{background-color:var(--cio-accent)}}@media (hover: hover){.cio\\:hover\\:bg-blue-600:hover{background-color:var(--cio-color-blue-600)}}@media (hover: hover){.cio\\:hover\\:bg-blue-700:hover{background-color:var(--cio-color-blue-700)}}@media (hover: hover){.cio\\:hover\\:bg-destructive\\/90:hover{background-color:var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--cio-destructive) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-gray-50:hover{background-color:var(--cio-color-gray-50)}}@media (hover: hover){.cio\\:hover\\:bg-gray-200:hover{background-color:var(--cio-color-gray-200)}}@media (hover: hover){.cio\\:hover\\:bg-gray-800:hover{background-color:var(--cio-color-gray-800)}}@media (hover: hover){.cio\\:hover\\:bg-indigo-700:hover{background-color:var(--cio-color-indigo-700)}}@media (hover: hover){.cio\\:hover\\:bg-neutral-100:hover{background-color:var(--cio-color-neutral-100)}}@media (hover: hover){.cio\\:hover\\:bg-primary\\/90:hover{background-color:var(--cio-primary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--cio-primary) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-purple-700:hover{background-color:var(--cio-color-purple-700)}}@media (hover: hover){.cio\\:hover\\:bg-red-200:hover{background-color:var(--cio-color-red-200)}}@media (hover: hover){.cio\\:hover\\:bg-secondary\\/80:hover{background-color:var(--cio-secondary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab,var(--cio-secondary) 80%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-secondary\\/90:hover{background-color:var(--cio-secondary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-secondary\\/90:hover{background-color:color-mix(in oklab,var(--cio-secondary) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:from-purple-600:hover{--tw-gradient-from: var(--cio-color-purple-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}@media (hover: hover){.cio\\:hover\\:to-pink-600:hover{--tw-gradient-to: var(--cio-color-pink-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}@media (hover: hover){.cio\\:hover\\:text-accent-foreground:hover{color:var(--cio-accent-foreground)}}@media (hover: hover){.cio\\:hover\\:underline:hover{text-decoration-line:underline}}.cio\\:focus-visible\\:border-ring:focus-visible{border-color:var(--cio-ring)}.cio\\:focus-visible\\:ring-\\[3px\\]:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 20%, transparent)}}.cio\\:focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color: var(--cio-ring)}@supports (color: color-mix(in lab,red,red)){.cio\\:focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-ring) 50%, transparent)}}.cio\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.cio\\:disabled\\:opacity-40:disabled{opacity:40%}.cio\\:disabled\\:opacity-50:disabled{opacity:50%}.cio\\:has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has(*[data-slot=card-action]){grid-template-columns:1fr auto}.cio\\:has-\\[\\>svg\\]\\:px-2\\.5:has(>svg){padding-inline:calc(var(--cio-spacing) * 2.5)}.cio\\:has-\\[\\>svg\\]\\:px-3:has(>svg){padding-inline:calc(var(--cio-spacing) * 3)}.cio\\:has-\\[\\>svg\\]\\:px-4:has(>svg){padding-inline:calc(var(--cio-spacing) * 4)}.cio\\:aria-invalid\\:border-destructive[aria-invalid=true]{border-color:var(--cio-destructive)}.cio\\:aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 20%, transparent)}}@media (width >= 40rem){.cio\\:sm\\:top-4{top:calc(var(--cio-spacing) * 4)}}@media (width >= 40rem){.cio\\:sm\\:right-\\[22px\\]{right:22px}}@media (width >= 40rem){.cio\\:sm\\:left-\\[22px\\]{left:22px}}@media (width >= 40rem){.cio\\:sm\\:size-\\[18px\\]{width:18px;height:18px}}@media (width >= 40rem){.cio\\:sm\\:h-\\[8px\\]{height:8px}}@media (width >= 40rem){.cio\\:sm\\:w-\\[8px\\]{width:8px}}@media (width >= 40rem){.cio\\:sm\\:p-4{padding:calc(var(--cio-spacing) * 4)}}@media (width >= 64rem){.cio\\:lg\\:p-6{padding:calc(var(--cio-spacing) * 6)}}.cio\\:dark\\:border-input:is(.dark *){border-color:var(--cio-input)}.cio\\:dark\\:bg-destructive\\/60:is(.dark *){background-color:var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:bg-destructive\\/60:is(.dark *){background-color:color-mix(in oklab,var(--cio-destructive) 60%,transparent)}}.cio\\:dark\\:bg-input\\/30:is(.dark *){background-color:var(--cio-input)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:bg-input\\/30:is(.dark *){background-color:color-mix(in oklab,var(--cio-input) 30%,transparent)}}@media (hover: hover){.cio\\:dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:var(--cio-accent)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--cio-accent) 50%,transparent)}}}@media (hover: hover){.cio\\:dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:var(--cio-input)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--cio-input) 50%,transparent)}}}.cio\\:dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 40%, transparent)}}.cio\\:dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 40%, transparent)}}.cio\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.cio\\:\\[\\&_svg\\]\\:size-4 svg{width:calc(var(--cio-spacing) * 4);height:calc(var(--cio-spacing) * 4)}.cio\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.cio\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'cio\\:size-\\'\\]\\)\\]\\:size-3 svg:not([class*="cio:size-"]){width:calc(var(--cio-spacing) * 3);height:calc(var(--cio-spacing) * 3)}.cio\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'cio\\:size-\\'\\]\\)\\]\\:size-4 svg:not([class*="cio:size-"]){width:calc(var(--cio-spacing) * 4);height:calc(var(--cio-spacing) * 4)}}@property --tw-animation-delay{syntax: "*"; inherits: false; initial-value: 0s;}@property --tw-animation-direction{syntax: "*"; inherits: false; initial-value: normal;}@property --tw-animation-duration{syntax: "*"; inherits: false;}@property --tw-animation-fill-mode{syntax: "*"; inherits: false; initial-value: none;}@property --tw-animation-iteration-count{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-blur{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-opacity{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-rotate{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-scale{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-translate-y{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-blur{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-opacity{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-exit-rotate{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-scale{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-exit-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-translate-y{syntax: "*"; inherits: false; initial-value: 0;}.cio-components{font-family:Inter,sans-serif;box-sizing:border-box}.cio-components p,.cio-components h3{margin:0}[data-slot=card-header].cio\\:border-b{padding-bottom:calc(var(--cio-spacing) * 6)}[data-slot=card-footer].cio\\:border-t{padding-top:calc(var(--cio-spacing) * 6)}@layer base{:root{--cio-radius: .625rem;--cio-background: oklch(1 0 0);--cio-foreground: oklch(.145 0 0);--cio-card: oklch(1 0 0);--cio-card-foreground: oklch(.145 0 0);--cio-popover: oklch(1 0 0);--cio-popover-foreground: oklch(.145 0 0);--cio-primary: oklch(.1969 .0101 276.49);--cio-primary-foreground: oklch(.985 0 0);--cio-secondary: oklch(.949 .007 268.55);--cio-secondary-foreground: oklch(.205 0 0);--cio-muted: oklch(.97 0 0);--cio-muted-foreground: oklch(.556 0 0);--cio-accent: oklch(.97 0 0);--cio-accent-foreground: oklch(.205 0 0);--cio-destructive: oklch(.577 .245 27.325);--cio-border: oklch(.922 0 0);--cio-input: oklch(.922 0 0);--cio-ring: oklch(.708 0 0);--cio-chart-1: oklch(.646 .222 41.116);--cio-chart-2: oklch(.6 .118 184.704);--cio-chart-3: oklch(.398 .07 227.392);--cio-chart-4: oklch(.828 .189 84.429);--cio-chart-5: oklch(.769 .188 70.08);--cio-sidebar: oklch(.985 0 0);--cio-sidebar-foreground: oklch(.145 0 0);--cio-sidebar-primary: oklch(.205 0 0);--cio-sidebar-primary-foreground: oklch(.985 0 0);--cio-sidebar-accent: oklch(.97 0 0);--cio-sidebar-accent-foreground: oklch(.205 0 0);--cio-sidebar-border: oklch(.922 0 0);--cio-sidebar-ring: oklch(.708 0 0)}.dark{--cio-background: oklch(.145 0 0);--cio-foreground: oklch(.985 0 0);--cio-card: oklch(.205 0 0);--cio-card-foreground: oklch(.985 0 0);--cio-popover: oklch(.205 0 0);--cio-popover-foreground: oklch(.985 0 0);--cio-primary: oklch(.922 0 0);--cio-primary-foreground: oklch(.205 0 0);--cio-secondary: oklch(.269 0 0);--cio-secondary-foreground: oklch(.985 0 0);--cio-muted: oklch(.269 0 0);--cio-muted-foreground: oklch(.708 0 0);--cio-accent: oklch(.269 0 0);--cio-accent-foreground: oklch(.985 0 0);--cio-destructive: oklch(.704 .191 22.216);--cio-border: oklch(1 0 0 / 10%);--cio-input: oklch(1 0 0 / 15%);--cio-ring: oklch(.556 0 0);--cio-chart-1: oklch(.488 .243 264.376);--cio-chart-2: oklch(.696 .17 162.48);--cio-chart-3: oklch(.769 .188 70.08);--cio-chart-4: oklch(.627 .265 303.9);--cio-chart-5: oklch(.645 .246 16.439);--cio-sidebar: oklch(.205 0 0);--cio-sidebar-foreground: oklch(.985 0 0);--cio-sidebar-primary: oklch(.488 .243 264.376);--cio-sidebar-primary-foreground: oklch(.985 0 0);--cio-sidebar-accent: oklch(.269 0 0);--cio-sidebar-accent-foreground: oklch(.985 0 0);--cio-sidebar-border: oklch(1 0 0 / 10%);--cio-sidebar-ring: oklch(.556 0 0)}}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: "<length-percentage>"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: "<length-percentage>"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-scale-x{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: "*"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-space-y-reverse: 0;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-animation-delay: 0s;--tw-animation-direction: normal;--tw-animation-duration: initial;--tw-animation-fill-mode: none;--tw-animation-iteration-count: 1;--tw-enter-blur: 0;--tw-enter-opacity: 1;--tw-enter-rotate: 0;--tw-enter-scale: 1;--tw-enter-translate-x: 0;--tw-enter-translate-y: 0;--tw-exit-blur: 0;--tw-exit-opacity: 1;--tw-exit-rotate: 0;--tw-exit-scale: 1;--tw-exit-translate-x: 0;--tw-exit-translate-y: 0}}}.cio-asa-button.cio-button{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;border:none;border-radius:6px;cursor:pointer;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e;transition:opacity .2s}.cio-asa-button.cio-button:hover{opacity:.9}.cio-asa-button.cio-button:active{opacity:.8}.cio-asa-button--dark.cio-button{background:#14151a;color:#fff}.cio-asa-button--light.cio-button{background:#fff;color:#14151a}.cio-asa-button--sm.cio-button{height:32px;padding:8px 12px 8px 8px}.cio-asa-button--lg.cio-button{height:40px;padding:10px 16px 10px 12px}.cio-asa-button__icon{width:16px;height:16px;flex:none}.cio-asa-button__label{font-weight:600;font-size:13px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;white-space:nowrap}.cio-asa-chat{display:flex;flex-direction:column;width:100%;height:100%;background:#f8f9fc;overflow:hidden;position:relative;animation:cio-asa-fade-in .4s ease}.cio-asa-chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.cio-asa-chat-view{display:flex;flex-direction:column;flex:1;overflow:hidden}.cio-asa-chat-view--welcome{animation:cio-asa-fade-in .3s ease}.cio-asa-chat-view--chat{animation:cio-asa-fade-in .3s ease;position:relative}.cio-asa-chat-overlay{position:fixed;top:0;right:0;bottom:0;left:0;border:none;padding:0;margin:0;cursor:pointer;background:#0006;z-index:999;animation:cio-asa-fade-in .2s ease}.cio-asa-chat-panel{position:fixed;top:0;right:0;bottom:0;width:420px;z-index:1000;animation:cio-asa-slide-in-right .3s ease}.cio-asa-chat-panel .cio-asa-chat{height:100%}@keyframes cio-asa-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cio-asa-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cio-asa-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cio-asa-chat-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:hidden;animation:cio-asa-fade-in .4s ease}.cio-asa-chat-fullscreen--right{inset:0 0 0 auto;width:504px;animation:cio-asa-slide-in-right .4s ease .2s both}.cio-asa-chat-header{display:flex;align-items:center;justify-content:flex-end;padding:16px 20px;position:relative;flex-shrink:0;border-bottom:1px solid rgba(222,224,227,1);background:#fff}.cio-asa-chat-header__title{position:absolute;left:50%;transform:translate(-50%);font-weight:600;font-size:16px;line-height:1;color:#0f1324}.cio-asa-chat-header__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:20px;line-height:1}.cio-asa-chat-header__close:before{content:"✕"}.cio-asa-chat-header__close:hover{opacity:.7}.cio-asa-welcome-screen{display:flex;flex-direction:column;flex:1;padding:20px;position:relative}.cio-asa-welcome-screen__close{position:absolute;top:16px;right:20px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:20px;line-height:1;z-index:1}.cio-asa-welcome-screen__close:hover{opacity:.7}.cio-asa-welcome-screen__content{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;max-width:504px;margin:0 auto}@media (max-width: 768px){.cio-asa-welcome-screen__content{max-width:366px}}.cio-asa-welcome-screen__title{font-weight:400;font-size:26px;line-height:32px;text-align:center;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#000;margin:0;align-self:stretch}.cio-asa-welcome-screen__input-row{display:flex;flex-direction:row;align-items:center;padding:8px 8px 8px 12px;gap:12px;width:100%;height:40px;margin-top:32px;background:#fff;border:1px solid #DEE0E3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d;border-radius:4px;box-sizing:border-box}.cio-asa-welcome-screen__input{flex:1;padding:0;border:none;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;color:#0f1324;outline:none;background:transparent}.cio-asa-welcome-screen__input::placeholder{color:#0f1324b3}.cio-asa-welcome-screen__input-row:hover{border-color:#c8cad0}.cio-asa-welcome-screen__input-row:focus-within{border-color:#a980ff;box-shadow:0 0 0 2px #c9b0feb3}.cio-asa-welcome-screen__input-row:active{border-color:#000;box-shadow:inset 0 1px 4px #12126924,inset 2.1px 2px 2px #1212691a,inset 0 1.5px 3px #1212690d}.cio-asa-welcome-screen__input-row--disabled{border-color:#e9eaec;box-shadow:none;pointer-events:none}.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn{background:#e9eaec;box-shadow:none;color:#0a0f2940;cursor:default}.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn svg path{fill:#0a0f2940}.cio-asa-welcome-screen__send-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;gap:6px;height:24px;background:#14151a;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:4px;border:none;cursor:pointer;font-weight:500;font-size:13px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#fff;white-space:nowrap;flex-shrink:0}.cio-asa-welcome-screen__send-btn:hover{background:#333}.cio-asa-welcome-screen__suggestions{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:16px;row-gap:11px;width:100%;margin-top:20px;animation:cio-asa-fade-in .5s ease .5s both}.cio-asa-welcome-screen__suggestion-chip{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 16px;background:#fff;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:400;font-size:12px;line-height:20px;text-align:center;color:#343434;box-sizing:border-box;transition:background-color .2s,box-shadow .2s,border-color .2s}.cio-asa-welcome-screen__suggestion-chip:hover{background:#fff;border-color:#fff;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e}.cio-asa-welcome-screen__suggestion-chip:active{background:#e0e3eb;border-color:#dee0e3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d}.cio-asa-welcome-screen__terms{font-size:11px;color:#999;text-align:center;padding-top:16px;max-width:504px;margin:0 auto}.cio-asa-welcome-screen__terms a{color:#666;text-decoration:underline}.cio-asa-chat-message-list{flex:1;overflow-y:auto;padding:32px 12px 80px;display:flex;flex-direction:column;gap:16px;max-width:508px;width:100%;margin:0 auto;box-sizing:border-box;scrollbar-width:none}.cio-asa-chat-message-list::-webkit-scrollbar{display:none}.cio-asa-ai-message-group{display:flex;flex-direction:column;gap:12px}.cio-asa-user-message{display:flex;justify-content:flex-end;padding-left:12px}.cio-asa-user-message__bubble{display:inline-flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:13px 12px;gap:8px;background:#09090ce6;border-radius:8px 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#fff;max-width:100%;word-wrap:break-word;text-align:left}.cio-asa-ai-message{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:12px}.cio-asa-ai-message__bubble{display:flex;flex-direction:column;align-items:flex-start;padding:12px;gap:8px;background:#eceef3;border-radius:6px;width:100%;box-sizing:border-box}.cio-asa-ai-message__bubble--error{background:#fdecec}.cio-asa-ai-message__text{font-weight:400;font-size:14px;line-height:20px;letter-spacing:-.005em;color:#0f1324}.cio-asa-ai-message__bubble--error .cio-asa-ai-message__text{color:#b42318}.cio-asa-follow-up-refinement{display:flex;flex-direction:column;gap:10px;width:100%;padding-right:12px;box-sizing:border-box;animation:cio-asa-fade-in .3s ease}.cio-asa-follow-up-refinement__question{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:-.005em;color:#0f1324}.cio-asa-follow-up-refinement__options{display:flex;flex-wrap:wrap;gap:8px}.cio-asa-follow-up-refinement__chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;background:#fff;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:400;font-size:12px;line-height:20px;text-align:center;color:#343434;box-sizing:border-box;transition:background-color .2s,box-shadow .2s,border-color .2s}.cio-asa-follow-up-refinement__chip:hover:not(:disabled){border-color:#fff;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e}.cio-asa-follow-up-refinement__chip:active:not(:disabled){background:#e0e3eb;border-color:#dee0e3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d}.cio-asa-follow-up-refinement__chip:disabled{cursor:default;background:#f4f5f7;border-color:#e9eaec;box-shadow:none;color:#6b7080}.cio-asa-typing-indicator{display:flex;flex-direction:column;align-items:flex-start;padding:12px;gap:8px;background:#eceef3;border-radius:6px}.cio-asa-typing-indicator__dots{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:6px}.cio-asa-typing-indicator__dot{width:8px;height:8px;background:#c8cad0;border-radius:50%;animation:cio-asa-typing-bounce 1.4s infinite ease-in-out both}.cio-asa-typing-indicator__dot:nth-child(1){background:#0f132499;animation-delay:-.32s}.cio-asa-typing-indicator__dot:nth-child(2){animation-delay:-.16s}.cio-asa-typing-indicator__dot:nth-child(3){animation-delay:0s}@keyframes cio-asa-typing-bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.cio-asa-chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:24px 12px 16px;background:linear-gradient(to bottom,#f8f9fc00,#f8f9fc 40%);pointer-events:none;z-index:10}.cio-asa-chat-input{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:4px 12px;gap:12px;height:40px;max-width:508px;width:100%;background:#fff;border:1px solid #DEE0E3;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e;border-radius:4px;box-sizing:border-box;pointer-events:all}.cio-asa-chat-input:hover{border-color:#c8cad0}.cio-asa-chat-input:focus-within{border-color:#000}.cio-asa-chat-input__field{flex:1;padding:0;border:none;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#0f1324;outline:none;background:transparent}.cio-asa-chat-input__field::placeholder{color:#0f1324b3}.cio-asa-chat-input__field:disabled{cursor:not-allowed}.cio-asa-chat-input__send{display:flex;justify-content:center;align-items:center;width:16px;height:16px;background:none;border:none;cursor:pointer;flex-shrink:0;padding:0}.cio-asa-chat-input__send:hover:not(:disabled) svg path{stroke:#0f1324;stroke-opacity:1}.cio-asa-chat-input__send:disabled{cursor:default;opacity:.3}.cio-asa-results-block{display:flex;flex-direction:column;gap:20px;width:100%}.cio-asa-results-group{display:flex;flex-direction:column;gap:12px}.cio-asa-results-group__label{font-size:14px;font-weight:600;color:#1a1a1a;margin:0}.cio-asa-product-card.cio-product-card{display:flex;flex-direction:column;gap:6px;cursor:pointer;width:100%;height:100%;min-width:unset;max-width:unset;border:none;border-radius:0;box-shadow:none;padding:0;background:transparent}.cio-asa-product-card .cio-asa-product-card__image-wrapper.cio-product-card-image-section{position:relative;width:100%;aspect-ratio:var(--cio-asa-image-ratio, 3 / 4);border-radius:6px;overflow:hidden;background-color:#f3f4f6;flex-shrink:0}.cio-asa-product-card .cio-asa-product-card__image-wrapper .cio-product-card-image{width:100%;height:100%;object-fit:cover;display:block;min-height:unset;border-radius:0}.cio-asa-product-card .cio-asa-product-card__badge{position:absolute;top:8px;left:8px;display:flex;justify-content:center;align-items:center;padding:0 4px;min-width:35px;max-width:120px;height:20px;background:#dc2626;color:#fff;font-size:13px;font-weight:500;line-height:16px;text-align:center;letter-spacing:-.005em;border-radius:4px;border:none;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cio-asa-product-card .cio-asa-product-card__info.cio-product-card-content{display:flex;flex-direction:column;gap:2px;flex:1;padding:0}.cio-asa-product-card .cio-asa-product-card__name.cio-product-card-title-section{font-size:12px;line-height:1.3;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;min-height:calc(2 * 12px * 1.3)}.cio-asa-product-card .cio-asa-product-card__name-btn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:inherit;text-align:left;cursor:pointer}.cio-asa-product-card .cio-asa-product-card__name-btn:focus-visible{outline:2px solid var(--cio-asa-focus-color, #0F1324);outline-offset:2px}.cio-asa-product-card__description{font-size:11px;line-height:1.3;color:#6b7280;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section{display:flex;align-items:baseline;gap:4px}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span{word-spacing:-1ch}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child{font-size:14px;font-weight:700;color:#1a1a1a}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child:not(:only-child){color:#dc2626;order:2}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:last-child:not(:first-child){font-size:12px;color:#9ca3af;text-decoration:line-through;font-weight:400;order:1}.cio-asa-results-group [data-slot=carousel-content]{padding:0!important}.cio-asa-results-group [data-slot=carousel-item]{min-width:0!important;align-self:stretch}.cio-asa-results-group [data-slot=carousel-track]{padding-left:0!important}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:4px 12px 6px;font-size:14px;font-weight:500;line-height:16px;letter-spacing:-.005em;color:#14151a;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;width:100%;margin-top:auto;transition:background-color .15s}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:before{content:"";display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0311 8.66659C11.5311 8.66659 11.9711 8.39325 12.1977 7.97992L14.5844 3.65325C14.8311 3.21325 14.5111 2.66659 14.0044 2.66659H4.13772L3.51105 1.33325H1.33105V2.66659H2.66439L5.06439 7.72659L4.16439 9.35325C3.67772 10.2466 4.31772 11.3333 5.33105 11.3333H13.3311V9.99992H5.33105L6.06439 8.66659H11.0311ZM4.77105 3.99992H12.8711L11.0311 7.33325H6.35105L4.77105 3.99992ZM5.33105 11.9999C4.59772 11.9999 4.00439 12.5999 4.00439 13.3333C4.00439 14.0666 4.59772 14.6666 5.33105 14.6666C6.06439 14.6666 6.66439 14.0666 6.66439 13.3333C6.66439 12.5999 6.06439 11.9999 5.33105 11.9999ZM11.9977 11.9999C11.2644 11.9999 10.6711 12.5999 10.6711 13.3333C10.6711 14.0666 11.2644 14.6666 11.9977 14.6666C12.7311 14.6666 13.3311 14.0666 13.3311 13.3333C13.3311 12.5999 12.7311 11.9999 11.9977 11.9999Z' fill='%230F1324' fill-opacity='0.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:hover{background:#e5e7eb;color:#14151a}.cio-asa-results-group__view-more{display:inline-flex;align-items:center;gap:11px;font-size:13px;color:#1a1a1a;text-decoration:none;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;width:fit-content}.cio-asa-results-group__view-more-text{text-decoration:none;border-bottom:1px solid currentColor;line-height:1.2}.cio-asa,.cio-asa *{font-family:var(--cio-asa-font-family, "Inter", sans-serif)}.cio-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cio-asa button:focus-visible,.cio-asa [role=button]:focus-visible{outline:2px solid var(--cio-asa-focus-color, #0F1324);outline-offset:2px}`)),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
1
+ (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="cio-asa-styles",o.appendChild(document.createTextNode(`@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap";/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--cio-color-red-200: oklch(88.5% .062 18.334);--cio-color-red-500: oklch(63.7% .237 25.331);--cio-color-red-600: oklch(57.7% .245 27.325);--cio-color-orange-500: oklch(70.5% .213 47.604);--cio-color-yellow-500: oklch(79.5% .184 86.047);--cio-color-green-600: oklch(62.7% .194 149.214);--cio-color-emerald-50: oklch(97.9% .021 166.113);--cio-color-emerald-100: oklch(95% .052 163.051);--cio-color-emerald-200: oklch(90.5% .093 164.15);--cio-color-emerald-300: oklch(84.5% .143 164.978);--cio-color-emerald-600: oklch(59.6% .145 163.225);--cio-color-emerald-800: oklch(43.2% .095 166.913);--cio-color-teal-50: oklch(98.4% .014 180.72);--cio-color-blue-50: oklch(97% .014 254.604);--cio-color-blue-100: oklch(93.2% .032 255.585);--cio-color-blue-200: oklch(88.2% .059 254.128);--cio-color-blue-500: oklch(62.3% .214 259.815);--cio-color-blue-600: oklch(54.6% .245 262.881);--cio-color-blue-700: oklch(48.8% .243 264.376);--cio-color-blue-800: oklch(42.4% .199 265.638);--cio-color-indigo-50: oklch(96.2% .018 272.314);--cio-color-indigo-100: oklch(93% .034 272.788);--cio-color-indigo-600: oklch(51.1% .262 276.966);--cio-color-indigo-700: oklch(45.7% .24 277.023);--cio-color-purple-50: oklch(97.7% .014 308.299);--cio-color-purple-100: oklch(94.6% .033 307.174);--cio-color-purple-500: oklch(62.7% .265 303.9);--cio-color-purple-600: oklch(55.8% .288 302.321);--cio-color-purple-700: oklch(49.6% .265 301.924);--cio-color-purple-800: oklch(43.8% .218 303.724);--cio-color-pink-500: oklch(65.6% .241 354.308);--cio-color-pink-600: oklch(59.2% .249 .584);--cio-color-slate-50: oklch(98.4% .003 247.858);--cio-color-slate-100: oklch(96.8% .007 247.896);--cio-color-slate-200: oklch(92.9% .013 255.508);--cio-color-slate-300: oklch(86.9% .022 252.894);--cio-color-slate-500: oklch(55.4% .046 257.417);--cio-color-slate-700: oklch(37.2% .044 257.287);--cio-color-slate-900: oklch(20.8% .042 265.755);--cio-color-slate-950: oklch(12.9% .042 264.695);--cio-color-gray-50: oklch(98.5% .002 247.839);--cio-color-gray-100: oklch(96.7% .003 264.542);--cio-color-gray-200: oklch(92.8% .006 264.531);--cio-color-gray-400: oklch(70.7% .022 261.325);--cio-color-gray-500: oklch(55.1% .027 264.364);--cio-color-gray-600: oklch(44.6% .03 256.802);--cio-color-gray-700: oklch(37.3% .034 259.733);--cio-color-gray-800: oklch(27.8% .033 256.848);--cio-color-neutral-100: oklch(97% 0 0);--cio-color-black: #000;--cio-color-white: #fff;--cio-spacing: .25rem;--cio-container-sm: 24rem;--cio-container-lg: 32rem;--cio-text-xs: .75rem;--cio-text-xs--line-height: calc(1 / .75);--cio-text-sm: .875rem;--cio-text-sm--line-height: calc(1.25 / .875);--cio-text-base: 1rem;--cio-text-base--line-height: 1.5 ;--cio-text-lg: 1.125rem;--cio-text-lg--line-height: calc(1.75 / 1.125);--cio-text-xl: 1.25rem;--cio-text-xl--line-height: calc(1.75 / 1.25);--cio-text-2xl: 1.5rem;--cio-text-2xl--line-height: calc(2 / 1.5);--cio-font-weight-medium: 500;--cio-font-weight-semibold: 600;--cio-font-weight-bold: 700;--cio-tracking-tighter: -.05em;--cio-tracking-wide: .025em;--cio-radius-2xl: 1rem;--cio-radius-3xl: 1.5rem;--cio-default-transition-duration: .15s;--cio-default-transition-timing-function: cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.cio\\:\\@container\\/card-header{container-type:inline-size;container-name:card-header}.cio\\:pointer-events-none{pointer-events:none}.cio\\:invisible{visibility:hidden}.cio\\:sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.cio\\:absolute{position:absolute}.cio\\:relative{position:relative}.cio\\:top-2{top:calc(var(--cio-spacing) * 2)}.cio\\:top-3{top:calc(var(--cio-spacing) * 3)}.cio\\:right-2{right:calc(var(--cio-spacing) * 2)}.cio\\:right-3{right:calc(var(--cio-spacing) * 3)}.cio\\:left-2{left:calc(var(--cio-spacing) * 2)}.cio\\:col-start-2{grid-column-start:2}.cio\\:row-span-2{grid-row:span 2 / span 2}.cio\\:row-start-1{grid-row-start:1}.cio\\:m-0{margin:calc(var(--cio-spacing) * 0)}.cio\\:mx-2{margin-inline:calc(var(--cio-spacing) * 2)}.cio\\:my-2{margin-block:calc(var(--cio-spacing) * 2)}.cio\\:mt-1{margin-top:calc(var(--cio-spacing) * 1)}.cio\\:mt-2{margin-top:calc(var(--cio-spacing) * 2)}.cio\\:mt-3{margin-top:calc(var(--cio-spacing) * 3)}.cio\\:mt-auto{margin-top:auto}.cio\\:mr-2{margin-right:calc(var(--cio-spacing) * 2)}.cio\\:mr-4{margin-right:calc(var(--cio-spacing) * 4)}.cio\\:mb-2{margin-bottom:calc(var(--cio-spacing) * 2)}.cio\\:mb-3{margin-bottom:calc(var(--cio-spacing) * 3)}.cio\\:mb-4{margin-bottom:calc(var(--cio-spacing) * 4)}.cio\\:ml-1{margin-left:calc(var(--cio-spacing) * 1)}.cio\\:ml-2{margin-left:calc(var(--cio-spacing) * 2)}.cio\\:ml-4{margin-left:calc(var(--cio-spacing) * 4)}.cio\\:line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cio\\:line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.cio\\:flex{display:flex}.cio\\:grid{display:grid}.cio\\:hidden{display:none}.cio\\:inline-flex{display:inline-flex}.cio\\:size-6{width:calc(var(--cio-spacing) * 6);height:calc(var(--cio-spacing) * 6)}.cio\\:size-9{width:calc(var(--cio-spacing) * 9);height:calc(var(--cio-spacing) * 9)}.cio\\:h-3{height:calc(var(--cio-spacing) * 3)}.cio\\:h-4{height:calc(var(--cio-spacing) * 4)}.cio\\:h-5{height:calc(var(--cio-spacing) * 5)}.cio\\:h-6{height:calc(var(--cio-spacing) * 6)}.cio\\:h-8{height:calc(var(--cio-spacing) * 8)}.cio\\:h-10{height:calc(var(--cio-spacing) * 10)}.cio\\:h-12{height:calc(var(--cio-spacing) * 12)}.cio\\:h-14{height:calc(var(--cio-spacing) * 14)}.cio\\:h-16{height:calc(var(--cio-spacing) * 16)}.cio\\:h-24{height:calc(var(--cio-spacing) * 24)}.cio\\:h-32{height:calc(var(--cio-spacing) * 32)}.cio\\:h-\\[400px\\]{height:400px}.cio\\:h-full{height:100%}.cio\\:min-h-5{min-height:calc(var(--cio-spacing) * 5)}.cio\\:min-h-\\[224px\\]{min-height:224px}.cio\\:w-3{width:calc(var(--cio-spacing) * 3)}.cio\\:w-4{width:calc(var(--cio-spacing) * 4)}.cio\\:w-5{width:calc(var(--cio-spacing) * 5)}.cio\\:w-6{width:calc(var(--cio-spacing) * 6)}.cio\\:w-8{width:calc(var(--cio-spacing) * 8)}.cio\\:w-14{width:calc(var(--cio-spacing) * 14)}.cio\\:w-16{width:calc(var(--cio-spacing) * 16)}.cio\\:w-24{width:calc(var(--cio-spacing) * 24)}.cio\\:w-\\[200px\\]{width:200px}.cio\\:w-\\[220px\\]{width:220px}.cio\\:w-\\[240px\\]{width:240px}.cio\\:w-\\[260px\\]{width:260px}.cio\\:w-full{width:100%}.cio\\:max-w-\\[256px\\]{max-width:256px}.cio\\:max-w-lg{max-width:var(--cio-container-lg)}.cio\\:max-w-sm{max-width:var(--cio-container-sm)}.cio\\:min-w-4{min-width:calc(var(--cio-spacing) * 4)}.cio\\:min-w-5{min-width:calc(var(--cio-spacing) * 5)}.cio\\:min-w-6{min-width:calc(var(--cio-spacing) * 6)}.cio\\:min-w-\\[176px\\]{min-width:176px}.cio\\:flex-1{flex:1}.cio\\:flex-shrink-0,.cio\\:shrink-0{flex-shrink:0}.cio\\:grow{flex-grow:1}.cio\\:grow-0{flex-grow:0}.cio\\:basis-full{flex-basis:100%}.cio\\:rotate-90{rotate:90deg}.cio\\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cio\\:cursor-pointer{cursor:pointer}.cio\\:list-none{list-style-type:none}.cio\\:auto-rows-min{grid-auto-rows:min-content}.cio\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cio\\:grid-rows-\\[auto_auto\\]{grid-template-rows:auto auto}.cio\\:flex-col{flex-direction:column}.cio\\:flex-row{flex-direction:row}.cio\\:flex-wrap{flex-wrap:wrap}.cio\\:items-baseline{align-items:baseline}.cio\\:items-center{align-items:center}.cio\\:items-end{align-items:flex-end}.cio\\:items-start{align-items:flex-start}.cio\\:items-stretch{align-items:stretch}.cio\\:justify-between{justify-content:space-between}.cio\\:justify-center{justify-content:center}.cio\\:gap-1{gap:calc(var(--cio-spacing) * 1)}.cio\\:gap-1\\.5{gap:calc(var(--cio-spacing) * 1.5)}.cio\\:gap-2{gap:calc(var(--cio-spacing) * 2)}.cio\\:gap-3{gap:calc(var(--cio-spacing) * 3)}.cio\\:gap-4{gap:calc(var(--cio-spacing) * 4)}:where(.cio\\:space-y-1>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.cio\\:space-y-2>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.cio\\:space-y-3>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--cio-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--cio-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.cio\\:self-center{align-self:center}.cio\\:self-start{align-self:flex-start}.cio\\:justify-self-end{justify-self:flex-end}.cio\\:overflow-hidden{overflow:hidden}.cio\\:rounded{border-radius:.25rem}.cio\\:rounded-2xl{border-radius:var(--cio-radius-2xl)}.cio\\:rounded-3xl{border-radius:var(--cio-radius-3xl)}.cio\\:rounded-full{border-radius:calc(infinity * 1px)}.cio\\:rounded-lg{border-radius:var(--cio-radius)}.cio\\:rounded-md{border-radius:calc(var(--cio-radius) - 2px)}.cio\\:rounded-none{border-radius:0}.cio\\:rounded-sm{border-radius:calc(var(--cio-radius) - 4px)}.cio\\:rounded-xl{border-radius:calc(var(--cio-radius) + 4px)}.cio\\:border{border-style:var(--tw-border-style);border-width:1px}.cio\\:border-0{border-style:var(--tw-border-style);border-width:0px}.cio\\:border-2{border-style:var(--tw-border-style);border-width:2px}.cio\\:border-4{border-style:var(--tw-border-style);border-width:4px}.cio\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.cio\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.cio\\:border-black\\/20{border-color:var(--cio-color-black)}@supports (color: color-mix(in lab,red,red)){.cio\\:border-black\\/20{border-color:color-mix(in oklab,var(--cio-color-black) 20%,transparent)}}.cio\\:border-blue-200{border-color:var(--cio-color-blue-200)}.cio\\:border-blue-600{border-color:var(--cio-color-blue-600)}.cio\\:border-emerald-200{border-color:var(--cio-color-emerald-200)}.cio\\:border-gray-200{border-color:var(--cio-color-gray-200)}.cio\\:border-slate-200{border-color:var(--cio-color-slate-200)}.cio\\:border-slate-500{border-color:var(--cio-color-slate-500)}.cio\\:border-slate-700{border-color:var(--cio-color-slate-700)}.cio\\:border-transparent{border-color:transparent}.cio\\:border-white{border-color:var(--cio-color-white)}.cio\\:bg-background{background-color:var(--cio-background)}.cio\\:bg-black{background-color:var(--cio-color-black)}.cio\\:bg-blue-100{background-color:var(--cio-color-blue-100)}.cio\\:bg-blue-500{background-color:var(--cio-color-blue-500)}.cio\\:bg-blue-600{background-color:var(--cio-color-blue-600)}.cio\\:bg-card{background-color:var(--cio-card)}.cio\\:bg-destructive{background-color:var(--cio-destructive)}.cio\\:bg-emerald-100{background-color:var(--cio-color-emerald-100)}.cio\\:bg-gray-100{background-color:var(--cio-color-gray-100)}.cio\\:bg-gray-200{background-color:var(--cio-color-gray-200)}.cio\\:bg-indigo-600{background-color:var(--cio-color-indigo-600)}.cio\\:bg-primary{background-color:var(--cio-primary)}.cio\\:bg-purple-100{background-color:var(--cio-color-purple-100)}.cio\\:bg-purple-600{background-color:var(--cio-color-purple-600)}.cio\\:bg-red-500{background-color:var(--cio-color-red-500)}.cio\\:bg-secondary{background-color:var(--cio-secondary)}.cio\\:bg-slate-50{background-color:var(--cio-color-slate-50)}.cio\\:bg-slate-100{background-color:var(--cio-color-slate-100)}.cio\\:bg-slate-900{background-color:var(--cio-color-slate-900)}.cio\\:bg-slate-950\\/90{background-color:var(--cio-color-slate-950)}@supports (color: color-mix(in lab,red,red)){.cio\\:bg-slate-950\\/90{background-color:color-mix(in oklab,var(--cio-color-slate-950) 90%,transparent)}}.cio\\:bg-transparent{background-color:transparent}.cio\\:bg-white{background-color:var(--cio-color-white)}.cio\\:bg-gradient-to-br{--tw-gradient-position: to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.cio\\:bg-gradient-to-r{--tw-gradient-position: to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.cio\\:from-blue-50{--tw-gradient-from: var(--cio-color-blue-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-blue-500{--tw-gradient-from: var(--cio-color-blue-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-emerald-50{--tw-gradient-from: var(--cio-color-emerald-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-orange-500{--tw-gradient-from: var(--cio-color-orange-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-purple-50{--tw-gradient-from: var(--cio-color-purple-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:from-purple-500{--tw-gradient-from: var(--cio-color-purple-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-blue-50{--tw-gradient-to: var(--cio-color-blue-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-indigo-50{--tw-gradient-to: var(--cio-color-indigo-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-indigo-100{--tw-gradient-to: var(--cio-color-indigo-100);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-pink-500{--tw-gradient-to: var(--cio-color-pink-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-purple-50{--tw-gradient-to: var(--cio-color-purple-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-purple-600{--tw-gradient-to: var(--cio-color-purple-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-red-500{--tw-gradient-to: var(--cio-color-red-500);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:to-teal-50{--tw-gradient-to: var(--cio-color-teal-50);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.cio\\:object-cover{object-fit:cover}.cio\\:p-0\\.5{padding:calc(var(--cio-spacing) * .5)}.cio\\:p-1{padding:calc(var(--cio-spacing) * 1)}.cio\\:p-2{padding:calc(var(--cio-spacing) * 2)}.cio\\:p-3{padding:calc(var(--cio-spacing) * 3)}.cio\\:p-4{padding:calc(var(--cio-spacing) * 4)}.cio\\:p-6{padding:calc(var(--cio-spacing) * 6)}.cio\\:px-0{padding-inline:calc(var(--cio-spacing) * 0)}.cio\\:px-1{padding-inline:calc(var(--cio-spacing) * 1)}.cio\\:px-2{padding-inline:calc(var(--cio-spacing) * 2)}.cio\\:px-3{padding-inline:calc(var(--cio-spacing) * 3)}.cio\\:px-4{padding-inline:calc(var(--cio-spacing) * 4)}.cio\\:px-6{padding-inline:calc(var(--cio-spacing) * 6)}.cio\\:py-1{padding-block:calc(var(--cio-spacing) * 1)}.cio\\:py-2{padding-block:calc(var(--cio-spacing) * 2)}.cio\\:pt-2{padding-top:calc(var(--cio-spacing) * 2)}.cio\\:text-center{text-align:center}.cio\\:text-2xl{font-size:var(--cio-text-2xl);line-height:var(--tw-leading, var(--cio-text-2xl--line-height))}.cio\\:text-base{font-size:var(--cio-text-base);line-height:var(--tw-leading, var(--cio-text-base--line-height))}.cio\\:text-lg{font-size:var(--cio-text-lg);line-height:var(--tw-leading, var(--cio-text-lg--line-height))}.cio\\:text-sm{font-size:var(--cio-text-sm);line-height:var(--tw-leading, var(--cio-text-sm--line-height))}.cio\\:text-xl{font-size:var(--cio-text-xl);line-height:var(--tw-leading, var(--cio-text-xl--line-height))}.cio\\:text-xs{font-size:var(--cio-text-xs);line-height:var(--tw-leading, var(--cio-text-xs--line-height))}.cio\\:text-\\[11px\\]{font-size:11px}.cio\\:text-\\[13px\\]{font-size:13px}.cio\\:leading-3{--tw-leading: calc(var(--cio-spacing) * 3);line-height:calc(var(--cio-spacing) * 3)}.cio\\:leading-4{--tw-leading: calc(var(--cio-spacing) * 4);line-height:calc(var(--cio-spacing) * 4)}.cio\\:leading-none{--tw-leading: 1;line-height:1}.cio\\:font-bold{--tw-font-weight: var(--cio-font-weight-bold);font-weight:var(--cio-font-weight-bold)}.cio\\:font-medium{--tw-font-weight: var(--cio-font-weight-medium);font-weight:var(--cio-font-weight-medium)}.cio\\:font-semibold{--tw-font-weight: var(--cio-font-weight-semibold);font-weight:var(--cio-font-weight-semibold)}.cio\\:tracking-tighter{--tw-tracking: var(--cio-tracking-tighter);letter-spacing:var(--cio-tracking-tighter)}.cio\\:tracking-wide{--tw-tracking: var(--cio-tracking-wide);letter-spacing:var(--cio-tracking-wide)}.cio\\:break-words{overflow-wrap:break-word}.cio\\:whitespace-nowrap{white-space:nowrap}.cio\\:text-\\[\\#0A0F2940\\]{color:#0a0f2940}.cio\\:text-blue-600{color:var(--cio-color-blue-600)}.cio\\:text-blue-800{color:var(--cio-color-blue-800)}.cio\\:text-card-foreground{color:var(--cio-card-foreground)}.cio\\:text-emerald-300{color:var(--cio-color-emerald-300)}.cio\\:text-emerald-600{color:var(--cio-color-emerald-600)}.cio\\:text-emerald-800{color:var(--cio-color-emerald-800)}.cio\\:text-gray-400{color:var(--cio-color-gray-400)}.cio\\:text-gray-500{color:var(--cio-color-gray-500)}.cio\\:text-gray-600{color:var(--cio-color-gray-600)}.cio\\:text-gray-700{color:var(--cio-color-gray-700)}.cio\\:text-gray-800{color:var(--cio-color-gray-800)}.cio\\:text-green-600{color:var(--cio-color-green-600)}.cio\\:text-muted-foreground{color:var(--cio-muted-foreground)}.cio\\:text-primary{color:var(--cio-primary)}.cio\\:text-primary-foreground{color:var(--cio-primary-foreground)}.cio\\:text-purple-600{color:var(--cio-color-purple-600)}.cio\\:text-purple-700{color:var(--cio-color-purple-700)}.cio\\:text-purple-800{color:var(--cio-color-purple-800)}.cio\\:text-red-600{color:var(--cio-color-red-600)}.cio\\:text-secondary-foreground{color:var(--cio-secondary-foreground)}.cio\\:text-slate-300{color:var(--cio-color-slate-300)}.cio\\:text-slate-500{color:var(--cio-color-slate-500)}.cio\\:text-white{color:var(--cio-color-white)}.cio\\:text-yellow-500{color:var(--cio-color-yellow-500)}.cio\\:uppercase{text-transform:uppercase}.cio\\:line-through{text-decoration-line:line-through}.cio\\:underline{text-decoration-line:underline}.cio\\:underline-offset-4{text-underline-offset:4px}.cio\\:opacity-0{opacity:0%}.cio\\:opacity-90{opacity:90%}.cio\\:shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-md{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-none{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:shadow-xs{--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--cio-default-transition-timing-function));transition-duration:var(--tw-duration, var(--cio-default-transition-duration))}.cio\\:duration-200{--tw-duration: .2s;transition-duration:.2s}.cio\\:duration-250{--tw-duration: .25s;transition-duration:.25s}.cio\\:outline-none{--tw-outline-style: none;outline-style:none}.cio\\:group-has-\\[input\\:checked\\]\\:opacity-100:is(:where(.cio\\:group):has(*:is(input:checked)) *){opacity:100%}.cio\\:group-has-\\[input\\:checked\\]\\:shadow-\\[inset_0_0_0_32px_\\#000\\]:is(:where(.cio\\:group):has(*:is(input:checked)) *){--tw-shadow: inset 0 0 0 32px var(--tw-shadow-color, #000);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover: hover){.cio\\:hover\\:scale-105:hover{--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media (hover: hover){.cio\\:hover\\:rounded:hover{border-radius:.25rem}}@media (hover: hover){.cio\\:hover\\:bg-accent:hover{background-color:var(--cio-accent)}}@media (hover: hover){.cio\\:hover\\:bg-blue-600:hover{background-color:var(--cio-color-blue-600)}}@media (hover: hover){.cio\\:hover\\:bg-blue-700:hover{background-color:var(--cio-color-blue-700)}}@media (hover: hover){.cio\\:hover\\:bg-destructive\\/90:hover{background-color:var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-destructive\\/90:hover{background-color:color-mix(in oklab,var(--cio-destructive) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-gray-50:hover{background-color:var(--cio-color-gray-50)}}@media (hover: hover){.cio\\:hover\\:bg-gray-200:hover{background-color:var(--cio-color-gray-200)}}@media (hover: hover){.cio\\:hover\\:bg-gray-800:hover{background-color:var(--cio-color-gray-800)}}@media (hover: hover){.cio\\:hover\\:bg-indigo-700:hover{background-color:var(--cio-color-indigo-700)}}@media (hover: hover){.cio\\:hover\\:bg-neutral-100:hover{background-color:var(--cio-color-neutral-100)}}@media (hover: hover){.cio\\:hover\\:bg-primary\\/90:hover{background-color:var(--cio-primary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--cio-primary) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-purple-700:hover{background-color:var(--cio-color-purple-700)}}@media (hover: hover){.cio\\:hover\\:bg-red-200:hover{background-color:var(--cio-color-red-200)}}@media (hover: hover){.cio\\:hover\\:bg-secondary\\/80:hover{background-color:var(--cio-secondary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab,var(--cio-secondary) 80%,transparent)}}}@media (hover: hover){.cio\\:hover\\:bg-secondary\\/90:hover{background-color:var(--cio-secondary)}@supports (color: color-mix(in lab,red,red)){.cio\\:hover\\:bg-secondary\\/90:hover{background-color:color-mix(in oklab,var(--cio-secondary) 90%,transparent)}}}@media (hover: hover){.cio\\:hover\\:from-purple-600:hover{--tw-gradient-from: var(--cio-color-purple-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}@media (hover: hover){.cio\\:hover\\:to-pink-600:hover{--tw-gradient-to: var(--cio-color-pink-600);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}}@media (hover: hover){.cio\\:hover\\:text-accent-foreground:hover{color:var(--cio-accent-foreground)}}@media (hover: hover){.cio\\:hover\\:underline:hover{text-decoration-line:underline}}.cio\\:focus-visible\\:border-ring:focus-visible{border-color:var(--cio-ring)}.cio\\:focus-visible\\:ring-\\[3px\\]:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.cio\\:focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 20%, transparent)}}.cio\\:focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color: var(--cio-ring)}@supports (color: color-mix(in lab,red,red)){.cio\\:focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-ring) 50%, transparent)}}.cio\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.cio\\:disabled\\:opacity-40:disabled{opacity:40%}.cio\\:disabled\\:opacity-50:disabled{opacity:50%}.cio\\:has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has(*[data-slot=card-action]){grid-template-columns:1fr auto}.cio\\:has-\\[\\>svg\\]\\:px-2\\.5:has(>svg){padding-inline:calc(var(--cio-spacing) * 2.5)}.cio\\:has-\\[\\>svg\\]\\:px-3:has(>svg){padding-inline:calc(var(--cio-spacing) * 3)}.cio\\:has-\\[\\>svg\\]\\:px-4:has(>svg){padding-inline:calc(var(--cio-spacing) * 4)}.cio\\:aria-invalid\\:border-destructive[aria-invalid=true]{border-color:var(--cio-destructive)}.cio\\:aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 20%, transparent)}}@media (width >= 40rem){.cio\\:sm\\:top-4{top:calc(var(--cio-spacing) * 4)}}@media (width >= 40rem){.cio\\:sm\\:right-\\[22px\\]{right:22px}}@media (width >= 40rem){.cio\\:sm\\:left-\\[22px\\]{left:22px}}@media (width >= 40rem){.cio\\:sm\\:size-\\[18px\\]{width:18px;height:18px}}@media (width >= 40rem){.cio\\:sm\\:h-\\[8px\\]{height:8px}}@media (width >= 40rem){.cio\\:sm\\:w-\\[8px\\]{width:8px}}@media (width >= 40rem){.cio\\:sm\\:p-4{padding:calc(var(--cio-spacing) * 4)}}@media (width >= 64rem){.cio\\:lg\\:p-6{padding:calc(var(--cio-spacing) * 6)}}.cio\\:dark\\:border-input:is(.dark *){border-color:var(--cio-input)}.cio\\:dark\\:bg-destructive\\/60:is(.dark *){background-color:var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:bg-destructive\\/60:is(.dark *){background-color:color-mix(in oklab,var(--cio-destructive) 60%,transparent)}}.cio\\:dark\\:bg-input\\/30:is(.dark *){background-color:var(--cio-input)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:bg-input\\/30:is(.dark *){background-color:color-mix(in oklab,var(--cio-input) 30%,transparent)}}@media (hover: hover){.cio\\:dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:var(--cio-accent)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:hover\\:bg-accent\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--cio-accent) 50%,transparent)}}}@media (hover: hover){.cio\\:dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:var(--cio-input)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--cio-input) 50%,transparent)}}}.cio\\:dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 40%, transparent)}}.cio\\:dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color: var(--cio-destructive)}@supports (color: color-mix(in lab,red,red)){.cio\\:dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color: color-mix(in oklab, var(--cio-destructive) 40%, transparent)}}.cio\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.cio\\:\\[\\&_svg\\]\\:size-4 svg{width:calc(var(--cio-spacing) * 4);height:calc(var(--cio-spacing) * 4)}.cio\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.cio\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'cio\\:size-\\'\\]\\)\\]\\:size-3 svg:not([class*="cio:size-"]){width:calc(var(--cio-spacing) * 3);height:calc(var(--cio-spacing) * 3)}.cio\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'cio\\:size-\\'\\]\\)\\]\\:size-4 svg:not([class*="cio:size-"]){width:calc(var(--cio-spacing) * 4);height:calc(var(--cio-spacing) * 4)}}@property --tw-animation-delay{syntax: "*"; inherits: false; initial-value: 0s;}@property --tw-animation-direction{syntax: "*"; inherits: false; initial-value: normal;}@property --tw-animation-duration{syntax: "*"; inherits: false;}@property --tw-animation-fill-mode{syntax: "*"; inherits: false; initial-value: none;}@property --tw-animation-iteration-count{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-blur{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-opacity{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-rotate{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-scale{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-enter-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-enter-translate-y{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-blur{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-opacity{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-exit-rotate{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-scale{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-exit-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-exit-translate-y{syntax: "*"; inherits: false; initial-value: 0;}.cio-components{font-family:Inter,sans-serif;box-sizing:border-box}.cio-components p,.cio-components h3{margin:0}[data-slot=card-header].cio\\:border-b{padding-bottom:calc(var(--cio-spacing) * 6)}[data-slot=card-footer].cio\\:border-t{padding-top:calc(var(--cio-spacing) * 6)}@layer base{:root{--cio-radius: .625rem;--cio-background: oklch(1 0 0);--cio-foreground: oklch(.145 0 0);--cio-card: oklch(1 0 0);--cio-card-foreground: oklch(.145 0 0);--cio-popover: oklch(1 0 0);--cio-popover-foreground: oklch(.145 0 0);--cio-primary: oklch(.1969 .0101 276.49);--cio-primary-foreground: oklch(.985 0 0);--cio-secondary: oklch(.949 .007 268.55);--cio-secondary-foreground: oklch(.205 0 0);--cio-muted: oklch(.97 0 0);--cio-muted-foreground: oklch(.556 0 0);--cio-accent: oklch(.97 0 0);--cio-accent-foreground: oklch(.205 0 0);--cio-destructive: oklch(.577 .245 27.325);--cio-border: oklch(.922 0 0);--cio-input: oklch(.922 0 0);--cio-ring: oklch(.708 0 0);--cio-chart-1: oklch(.646 .222 41.116);--cio-chart-2: oklch(.6 .118 184.704);--cio-chart-3: oklch(.398 .07 227.392);--cio-chart-4: oklch(.828 .189 84.429);--cio-chart-5: oklch(.769 .188 70.08);--cio-sidebar: oklch(.985 0 0);--cio-sidebar-foreground: oklch(.145 0 0);--cio-sidebar-primary: oklch(.205 0 0);--cio-sidebar-primary-foreground: oklch(.985 0 0);--cio-sidebar-accent: oklch(.97 0 0);--cio-sidebar-accent-foreground: oklch(.205 0 0);--cio-sidebar-border: oklch(.922 0 0);--cio-sidebar-ring: oklch(.708 0 0)}.dark{--cio-background: oklch(.145 0 0);--cio-foreground: oklch(.985 0 0);--cio-card: oklch(.205 0 0);--cio-card-foreground: oklch(.985 0 0);--cio-popover: oklch(.205 0 0);--cio-popover-foreground: oklch(.985 0 0);--cio-primary: oklch(.922 0 0);--cio-primary-foreground: oklch(.205 0 0);--cio-secondary: oklch(.269 0 0);--cio-secondary-foreground: oklch(.985 0 0);--cio-muted: oklch(.269 0 0);--cio-muted-foreground: oklch(.708 0 0);--cio-accent: oklch(.269 0 0);--cio-accent-foreground: oklch(.985 0 0);--cio-destructive: oklch(.704 .191 22.216);--cio-border: oklch(1 0 0 / 10%);--cio-input: oklch(1 0 0 / 15%);--cio-ring: oklch(.556 0 0);--cio-chart-1: oklch(.488 .243 264.376);--cio-chart-2: oklch(.696 .17 162.48);--cio-chart-3: oklch(.769 .188 70.08);--cio-chart-4: oklch(.627 .265 303.9);--cio-chart-5: oklch(.645 .246 16.439);--cio-sidebar: oklch(.205 0 0);--cio-sidebar-foreground: oklch(.985 0 0);--cio-sidebar-primary: oklch(.488 .243 264.376);--cio-sidebar-primary-foreground: oklch(.985 0 0);--cio-sidebar-accent: oklch(.269 0 0);--cio-sidebar-accent-foreground: oklch(.985 0 0);--cio-sidebar-border: oklch(1 0 0 / 10%);--cio-sidebar-ring: oklch(.556 0 0)}}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: "*"; inherits: false;}@property --tw-gradient-from{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: "<color>"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: "*"; inherits: false;}@property --tw-gradient-via-stops{syntax: "*"; inherits: false;}@property --tw-gradient-from-position{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: "<length-percentage>"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: "<length-percentage>"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-scale-x{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: "*"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-space-y-reverse: 0;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-animation-delay: 0s;--tw-animation-direction: normal;--tw-animation-duration: initial;--tw-animation-fill-mode: none;--tw-animation-iteration-count: 1;--tw-enter-blur: 0;--tw-enter-opacity: 1;--tw-enter-rotate: 0;--tw-enter-scale: 1;--tw-enter-translate-x: 0;--tw-enter-translate-y: 0;--tw-exit-blur: 0;--tw-exit-opacity: 1;--tw-exit-rotate: 0;--tw-exit-scale: 1;--tw-exit-translate-x: 0;--tw-exit-translate-y: 0}}}.cio-asa-button.cio-button{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;border:none;border-radius:6px;cursor:pointer;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e;transition:opacity .2s}.cio-asa-button.cio-button:hover{opacity:.9}.cio-asa-button.cio-button:active{opacity:.8}.cio-asa-button--dark.cio-button{background:#14151a;color:#fff}.cio-asa-button--light.cio-button{background:#fff;color:#14151a}.cio-asa-button--sm.cio-button{height:32px;padding:8px 12px 8px 8px}.cio-asa-button--lg.cio-button{height:40px;padding:10px 16px 10px 12px}.cio-asa-button__icon{width:16px;height:16px;flex:none}.cio-asa-button__label{font-weight:600;font-size:13px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;white-space:nowrap}.cio-asa-chat{display:flex;flex-direction:column;width:100%;height:100%;background:#f8f9fc;overflow:hidden;position:relative;animation:cio-asa-fade-in .4s ease}.cio-asa-chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.cio-asa-chat-view{display:flex;flex-direction:column;flex:1;overflow:hidden}.cio-asa-chat-view--welcome{animation:cio-asa-fade-in .3s ease}.cio-asa-chat-view--chat{animation:cio-asa-fade-in .3s ease;position:relative}.cio-asa-chat-overlay{position:fixed;top:0;right:0;bottom:0;left:0;border:none;padding:0;margin:0;cursor:pointer;background:#0006;z-index:999;animation:cio-asa-fade-in .2s ease}.cio-asa-chat-panel{position:fixed;top:0;right:0;bottom:0;width:420px;z-index:1000;animation:cio-asa-slide-in-right .3s ease}.cio-asa-chat-panel .cio-asa-chat{height:100%}@keyframes cio-asa-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cio-asa-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cio-asa-slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cio-asa-chat-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:hidden;animation:cio-asa-fade-in .4s ease}.cio-asa-chat-fullscreen--right{inset:0 0 0 auto;width:504px;animation:cio-asa-slide-in-right .4s ease .2s both}.cio-asa-chat-header{display:flex;align-items:center;justify-content:flex-end;padding:16px 20px;position:relative;flex-shrink:0;border-bottom:1px solid rgba(222,224,227,1);background:#fff}.cio-asa-chat-header__title{position:absolute;left:50%;transform:translate(-50%);font-weight:600;font-size:16px;line-height:1;color:#0f1324}.cio-asa-chat-header__close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:20px;line-height:1}.cio-asa-chat-header__close:before{content:"✕"}.cio-asa-chat-header__close:hover{opacity:.7}.cio-asa-welcome-screen{display:flex;flex-direction:column;flex:1;padding:20px;position:relative}.cio-asa-welcome-screen__close{position:absolute;top:16px;right:20px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:20px;line-height:1;z-index:1}.cio-asa-welcome-screen__close:hover{opacity:.7}.cio-asa-welcome-screen__content{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;max-width:504px;margin:0 auto}@media (max-width: 768px){.cio-asa-welcome-screen__content{max-width:366px}}.cio-asa-welcome-screen__title{font-weight:400;font-size:26px;line-height:32px;text-align:center;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#000;margin:0;align-self:stretch}.cio-asa-welcome-screen__input-row{display:flex;flex-direction:row;align-items:center;padding:8px 8px 8px 12px;gap:12px;width:100%;height:40px;margin-top:32px;background:#fff;border:1px solid #DEE0E3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d;border-radius:4px;box-sizing:border-box}.cio-asa-welcome-screen__input{flex:1;padding:0;border:none;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;color:#0f1324;outline:none;background:transparent}.cio-asa-welcome-screen__input::placeholder{color:#0f1324b3}.cio-asa-welcome-screen__input-row:hover{border-color:#c8cad0}.cio-asa-welcome-screen__input-row:focus-within{border-color:#a980ff;box-shadow:0 0 0 2px #c9b0feb3}.cio-asa-welcome-screen__input-row:active{border-color:#000;box-shadow:inset 0 1px 4px #12126924,inset 2.1px 2px 2px #1212691a,inset 0 1.5px 3px #1212690d}.cio-asa-welcome-screen__input-row--disabled{border-color:#e9eaec;box-shadow:none;pointer-events:none}.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn{background:#e9eaec;box-shadow:none;color:#0a0f2940;cursor:default}.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn svg path{fill:#0a0f2940}.cio-asa-welcome-screen__send-btn{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;gap:6px;height:24px;background:#14151a;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:4px;border:none;cursor:pointer;font-weight:500;font-size:13px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#fff;white-space:nowrap;flex-shrink:0}.cio-asa-welcome-screen__send-btn:hover{background:#333}.cio-asa-welcome-screen__suggestions{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:16px;row-gap:11px;width:100%;margin-top:20px;animation:cio-asa-fade-in .5s ease .5s both}.cio-asa-welcome-screen__suggestion-chip{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 16px;background:#fff;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:400;font-size:12px;line-height:20px;text-align:center;color:#343434;box-sizing:border-box;transition:background-color .2s,box-shadow .2s,border-color .2s}.cio-asa-welcome-screen__suggestion-chip:hover{background:#fff;border-color:#fff;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e}.cio-asa-welcome-screen__suggestion-chip:active{background:#e0e3eb;border-color:#dee0e3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d}.cio-asa-welcome-screen__terms{font-size:11px;color:#999;text-align:center;padding-top:16px;max-width:504px;margin:0 auto}.cio-asa-welcome-screen__terms a{color:#666;text-decoration:underline}.cio-asa-chat-message-list{flex:1;overflow-y:auto;padding:32px 12px 80px;display:flex;flex-direction:column;gap:16px;max-width:508px;width:100%;margin:0 auto;box-sizing:border-box;scrollbar-width:none}.cio-asa-chat-message-list::-webkit-scrollbar{display:none}.cio-asa-ai-message-group{display:flex;flex-direction:column;gap:12px}.cio-asa-user-message{display:flex;justify-content:flex-end;padding-left:12px}.cio-asa-user-message__bubble{display:inline-flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:13px 12px;gap:8px;background:#09090ce6;border-radius:8px 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#fff;max-width:100%;word-wrap:break-word;text-align:left}.cio-asa-ai-message{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:12px}.cio-asa-ai-message__bubble{display:flex;flex-direction:column;align-items:flex-start;padding:12px;gap:8px;background:#eceef3;border-radius:6px;width:100%;box-sizing:border-box}.cio-asa-ai-message__bubble--error{background:#fdecec}.cio-asa-ai-message__text{font-weight:400;font-size:14px;line-height:20px;letter-spacing:-.005em;color:#0f1324}.cio-asa-ai-message__bubble--error .cio-asa-ai-message__text{color:#b42318}.cio-asa-follow-up-refinement{display:flex;flex-direction:column;gap:10px;width:100%;padding-right:12px;box-sizing:border-box;animation:cio-asa-fade-in .3s ease}.cio-asa-follow-up-refinement__question{margin:0;font-weight:500;font-size:14px;line-height:20px;letter-spacing:-.005em;color:#0f1324}.cio-asa-follow-up-refinement__options{display:flex;flex-wrap:wrap;gap:8px}.cio-asa-follow-up-refinement__chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;background:#fff;box-shadow:0 .4px 1px #12126921,0 .9px 6px #1212690d,0 1px 3px #1212690d;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:400;font-size:12px;line-height:20px;text-align:center;color:#343434;box-sizing:border-box;transition:background-color .2s,box-shadow .2s,border-color .2s}.cio-asa-follow-up-refinement__chip:hover:not(:disabled){border-color:#fff;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e}.cio-asa-follow-up-refinement__chip:active:not(:disabled){background:#e0e3eb;border-color:#dee0e3;box-shadow:inset 1px 1px 2px #1212691a,inset 0 1px 4px #1212690d,inset 1px 1px 1px #1212690d}.cio-asa-follow-up-refinement__chip:disabled{cursor:default;background:#f4f5f7;border-color:#e9eaec;box-shadow:none;color:#6b7080}.cio-asa-typing-indicator{display:flex;flex-direction:column;align-items:flex-start;padding:12px;gap:8px;background:#eceef3;border-radius:6px}.cio-asa-typing-indicator__dots{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:6px}.cio-asa-typing-indicator__dot{width:8px;height:8px;background:#c8cad0;border-radius:50%;animation:cio-asa-typing-bounce 1.4s infinite ease-in-out both}.cio-asa-typing-indicator__dot:nth-child(1){background:#0f132499;animation-delay:-.32s}.cio-asa-typing-indicator__dot:nth-child(2){animation-delay:-.16s}.cio-asa-typing-indicator__dot:nth-child(3){animation-delay:0s}@keyframes cio-asa-typing-bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.cio-asa-chat-input-wrapper{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:24px 12px 16px;background:linear-gradient(to bottom,#f8f9fc00,#f8f9fc 40%);pointer-events:none;z-index:10}.cio-asa-chat-input{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:4px 12px;gap:12px;height:40px;max-width:508px;width:100%;background:#fff;border:1px solid #DEE0E3;box-shadow:0 6px 14px #1212691c,0 2px 4px #12126912,0 1px 2px #1212690e;border-radius:4px;box-sizing:border-box;pointer-events:all}.cio-asa-chat-input:hover{border-color:#c8cad0}.cio-asa-chat-input:focus-within{border-color:#000}.cio-asa-chat-input__field{flex:1;padding:0;border:none;font-weight:400;font-size:14px;line-height:16px;letter-spacing:-.005em;font-feature-settings:"tnum" on,"lnum" on;color:#0f1324;outline:none;background:transparent}.cio-asa-chat-input__field::placeholder{color:#0f1324b3}.cio-asa-chat-input__field:disabled{cursor:not-allowed}.cio-asa-chat-input__send{display:flex;justify-content:center;align-items:center;width:16px;height:16px;background:none;border:none;cursor:pointer;flex-shrink:0;padding:0}.cio-asa-chat-input__send:hover:not(:disabled) svg path{stroke:#0f1324;stroke-opacity:1}.cio-asa-chat-input__send:disabled{cursor:default;opacity:.3}.cio-asa-chat-input__stop{cursor:pointer;opacity:1}.cio-asa-chat-input__stop:hover rect{fill-opacity:1}.cio-asa-results-block{display:flex;flex-direction:column;gap:20px;width:100%}.cio-asa-results-group{display:flex;flex-direction:column;gap:12px}.cio-asa-results-group__label{font-size:14px;font-weight:600;color:#1a1a1a;margin:0}.cio-asa-product-card.cio-product-card{display:flex;flex-direction:column;gap:6px;cursor:pointer;width:100%;height:100%;min-width:unset;max-width:unset;border:none;border-radius:0;box-shadow:none;padding:0;background:transparent}.cio-asa-product-card .cio-asa-product-card__image-wrapper.cio-product-card-image-section{position:relative;width:100%;aspect-ratio:var(--cio-asa-image-ratio, 3 / 4);border-radius:6px;overflow:hidden;background-color:#f3f4f6;flex-shrink:0}.cio-asa-product-card .cio-asa-product-card__image-wrapper .cio-product-card-image{width:100%;height:100%;object-fit:cover;display:block;min-height:unset;border-radius:0}.cio-asa-product-card .cio-asa-product-card__badge{position:absolute;top:8px;left:8px;display:flex;justify-content:center;align-items:center;padding:0 4px;min-width:35px;max-width:120px;height:20px;background:#dc2626;color:#fff;font-size:13px;font-weight:500;line-height:16px;text-align:center;letter-spacing:-.005em;border-radius:4px;border:none;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cio-asa-product-card .cio-asa-product-card__info.cio-product-card-content{display:flex;flex-direction:column;gap:2px;flex:1;padding:0}.cio-asa-product-card .cio-asa-product-card__name.cio-product-card-title-section{font-size:12px;line-height:1.3;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;min-height:calc(2 * 12px * 1.3)}.cio-asa-product-card .cio-asa-product-card__name-btn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:inherit;text-align:left;cursor:pointer}.cio-asa-product-card .cio-asa-product-card__name-btn:focus-visible{outline:2px solid var(--cio-asa-focus-color, #0F1324);outline-offset:2px}.cio-asa-product-card__description{font-size:11px;line-height:1.3;color:#6b7280;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section{display:flex;align-items:baseline;gap:4px}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span{word-spacing:-1ch}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child{font-size:14px;font-weight:700;color:#1a1a1a}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child:not(:only-child){color:#dc2626;order:2}.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:last-child:not(:first-child){font-size:12px;color:#9ca3af;text-decoration:line-through;font-weight:400;order:1}.cio-asa-results-group [data-slot=carousel-content]{padding:0!important}.cio-asa-results-group [data-slot=carousel-item]{min-width:0!important;align-self:stretch}.cio-asa-results-group [data-slot=carousel-track]{padding-left:0!important}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:4px 12px 6px;font-size:14px;font-weight:500;line-height:16px;letter-spacing:-.005em;color:#14151a;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;width:100%;margin-top:auto;transition:background-color .15s}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:before{content:"";display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0311 8.66659C11.5311 8.66659 11.9711 8.39325 12.1977 7.97992L14.5844 3.65325C14.8311 3.21325 14.5111 2.66659 14.0044 2.66659H4.13772L3.51105 1.33325H1.33105V2.66659H2.66439L5.06439 7.72659L4.16439 9.35325C3.67772 10.2466 4.31772 11.3333 5.33105 11.3333H13.3311V9.99992H5.33105L6.06439 8.66659H11.0311ZM4.77105 3.99992H12.8711L11.0311 7.33325H6.35105L4.77105 3.99992ZM5.33105 11.9999C4.59772 11.9999 4.00439 12.5999 4.00439 13.3333C4.00439 14.0666 4.59772 14.6666 5.33105 14.6666C6.06439 14.6666 6.66439 14.0666 6.66439 13.3333C6.66439 12.5999 6.06439 11.9999 5.33105 11.9999ZM11.9977 11.9999C11.2644 11.9999 10.6711 12.5999 10.6711 13.3333C10.6711 14.0666 11.2644 14.6666 11.9977 14.6666C12.7311 14.6666 13.3311 14.0666 13.3311 13.3333C13.3311 12.5999 12.7311 11.9999 11.9977 11.9999Z' fill='%230F1324' fill-opacity='0.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px}.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:hover{background:#e5e7eb;color:#14151a}.cio-asa-results-group__view-more{display:inline-flex;align-items:center;gap:11px;font-size:13px;color:#1a1a1a;text-decoration:none;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;width:fit-content}.cio-asa-results-group__view-more-text{text-decoration:none;border-bottom:1px solid currentColor;line-height:1.2}.cio-asa,.cio-asa *{font-family:var(--cio-asa-font-family, "Inter", sans-serif)}.cio-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cio-asa button:focus-visible,.cio-asa [role=button]:focus-visible{outline:2px solid var(--cio-asa-focus-color, #0F1324);outline-offset:2px}`)),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
2
2
  function Na(L){return L&&L.__esModule&&Object.prototype.hasOwnProperty.call(L,"default")?L.default:L}var Si={exports:{}},D={};/**
3
3
  * @license React
4
4
  * react.production.min.js
package/lib/cjs/components/Chat/Chat.js CHANGED
@@ -26,8 +26,8 @@ function getAnnouncement(messages, translations) {
26
26
  }
27
27
  return '';
28
28
  }
29
- const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, }, ref) => {
30
- const { messages, sendMessage, isStreaming, clearHistory } = (0, useAsaResults_1.default)({
29
+ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, showStopButton = false, }, ref) => {
30
+ const { messages, sendMessage, isStreaming, abort, clearHistory } = (0, useAsaResults_1.default)({
31
31
  initialThreadId,
32
32
  });
33
33
  const chatViewRef = (0, react_1.useRef)(null);
@@ -36,6 +36,7 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
36
36
  const isModal = typeof onClose === 'function';
37
37
  const announcement = getAnnouncement(messages, translations);
38
38
  (0, react_1.useImperativeHandle)(ref, () => ({
39
+ abort,
39
40
  clearHistory,
40
41
  }));
41
42
  (0, react_1.useEffect)(() => {
@@ -59,7 +60,7 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
59
60
  react_1.default.createElement(WelcomeScreen_1.default, { suggestions: initialSuggestions, onSend: sendMessage, onClose: onClose, termsText: termsText, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.welcomeScreen }))) : (react_1.default.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--chat', ref: chatViewRef },
60
61
  react_1.default.createElement(ChatHeader_1.default, { onClose: onClose, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.header }),
61
62
  react_1.default.createElement(ChatMessageList_1.default, { messages: messages, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: (0, translate_1.default)('CioAsa.results.addToCart', translations), viewMoreText: (0, translate_1.default)('CioAsa.results.viewMore', translations), aiMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.aiMessage, userMessageOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.userMessage, resultsBlockOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.resultsBlock, translations: translations, onSend: sendMessage, isStreaming: isStreaming }),
62
- react_1.default.createElement(ChatInput_1.default, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))))));
63
+ react_1.default.createElement(ChatInput_1.default, { onSubmit: sendMessage, isDisabled: isStreaming, isStreaming: isStreaming, onAbort: abort, showStopButton: showStopButton, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input }))))));
63
64
  });
64
65
  Chat.displayName = 'Chat';
65
66
  exports.default = Chat;
package/lib/cjs/components/Chat/ChatInput.css CHANGED
@@ -81,3 +81,14 @@
81
81
  cursor: default;
82
82
  opacity: 0.3;
83
83
  }
84
+
85
+ /* Replaces the send button while a reply streams; always actionable, so it never
86
+ inherits the disabled styling above. */
87
+ .cio-asa-chat-input__stop {
88
+ cursor: pointer;
89
+ opacity: 1;
90
+ }
91
+
92
+ .cio-asa-chat-input__stop:hover rect {
93
+ fill-opacity: 1;
94
+ }
package/lib/cjs/components/Chat/ChatInput.js CHANGED
@@ -6,25 +6,30 @@ const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-
6
6
  const icons_1 = require("../icons");
7
7
  const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
8
8
  const useMessageInput_1 = tslib_1.__importDefault(require("../../hooks/useMessageInput"));
9
- function ChatInput({ onSubmit, isDisabled = false, translations, componentOverrides, }) {
9
+ function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort, showStopButton = false, translations, componentOverrides, }) {
10
10
  const { value, setValue, handleSubmit, handleKeyDown } = (0, useMessageInput_1.default)({
11
11
  onSend: onSubmit,
12
12
  isDisabled,
13
13
  submitOnEnterOnly: true,
14
14
  });
15
+ // The stop button only makes sense when there is something to stop and a way to do it.
16
+ const canAbort = isStreaming && showStopButton && typeof onAbort === 'function';
15
17
  const renderProps = {
16
18
  value,
17
19
  onChange: setValue,
18
20
  onSubmit: handleSubmit,
19
21
  placeholder: (0, translate_1.default)('CioAsa.input.placeholder', translations),
20
22
  isDisabled,
23
+ isStreaming,
24
+ onAbort: onAbort !== null && onAbort !== void 0 ? onAbort : (() => { }),
21
25
  };
22
26
  return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
23
27
  react_1.default.createElement("div", { className: 'cio-asa-chat-input-wrapper' },
24
28
  react_1.default.createElement("div", { className: 'cio-asa-chat-input' },
25
29
  react_1.default.createElement("input", { type: 'text', className: 'cio-asa-chat-input__field', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: renderProps.placeholder, disabled: isDisabled, "aria-label": (0, translate_1.default)('CioAsa.input.ariaLabel', translations) }),
26
- react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": (0, translate_1.default)('CioAsa.input.sendAriaLabel', translations) },
27
- react_1.default.createElement(icons_1.SendArrowIcon, null))))));
30
+ canAbort ? (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": (0, translate_1.default)('CioAsa.input.stopAriaLabel', translations) },
31
+ react_1.default.createElement(icons_1.StopIcon, null))) : (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": (0, translate_1.default)('CioAsa.input.sendAriaLabel', translations) },
32
+ react_1.default.createElement(icons_1.SendArrowIcon, null)))))));
28
33
  }
29
34
  exports.default = ChatInput;
30
35
  ChatInput.displayName = 'ChatInput';
package/lib/cjs/components/icons/StopIcon.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const react_1 = tslib_1.__importDefault(require("react"));
5
+ function StopIcon() {
6
+ return (react_1.default.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
7
+ react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '9', height: '9', rx: '1.5', fill: '#0F1324', fillOpacity: '0.7' })));
8
+ }
9
+ exports.default = StopIcon;
package/lib/cjs/components/icons/index.js CHANGED
@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ArrowRightIcon = exports.SendPlaneIcon = exports.SendArrowIcon = exports.ChatBubbleLightIcon = exports.ChatBubbleDarkIcon = void 0;
6
+ exports.ArrowRightIcon = exports.SendPlaneIcon = exports.StopIcon = exports.SendArrowIcon = exports.ChatBubbleLightIcon = exports.ChatBubbleDarkIcon = void 0;
7
7
  var ChatBubbleDarkIcon_1 = require("./ChatBubbleDarkIcon");
8
8
  Object.defineProperty(exports, "ChatBubbleDarkIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleDarkIcon_1).default; } });
9
9
  var ChatBubbleLightIcon_1 = require("./ChatBubbleLightIcon");
10
10
  Object.defineProperty(exports, "ChatBubbleLightIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleLightIcon_1).default; } });
11
11
  var SendArrowIcon_1 = require("./SendArrowIcon");
12
12
  Object.defineProperty(exports, "SendArrowIcon", { enumerable: true, get: function () { return __importDefault(SendArrowIcon_1).default; } });
13
+ var StopIcon_1 = require("./StopIcon");
14
+ Object.defineProperty(exports, "StopIcon", { enumerable: true, get: function () { return __importDefault(StopIcon_1).default; } });
13
15
  var SendPlaneIcon_1 = require("./SendPlaneIcon");
14
16
  Object.defineProperty(exports, "SendPlaneIcon", { enumerable: true, get: function () { return __importDefault(SendPlaneIcon_1).default; } });
15
17
  var ArrowRightIcon_1 = require("./ArrowRightIcon");
package/lib/cjs/hooks/useAsaResults.js CHANGED
@@ -14,6 +14,9 @@ function useAsaResults(options) {
14
14
  const readerRef = (0, react_1.useRef)(null);
15
15
  const threadIdRef = (0, react_1.useRef)((_a = options === null || options === void 0 ? void 0 : options.initialThreadId) !== null && _a !== void 0 ? _a : null);
16
16
  const idCounterRef = (0, react_1.useRef)(0);
17
+ // The assistant message the in-flight stream is writing into, so `abort` can
18
+ // settle it without having to guess which message that is.
19
+ const activeAssistantIdRef = (0, react_1.useRef)(null);
17
20
  const contextValue = (0, useCioAsaContext_1.useCioAsaContext)();
18
21
  if (!contextValue) {
19
22
  throw new Error('useAsaResults must be used within a CioAsaProvider.');
@@ -34,6 +37,21 @@ function useAsaResults(options) {
34
37
  callbacksRef.current = callbacks;
35
38
  const staticRequestConfigsRef = (0, react_1.useRef)(staticRequestConfigs);
36
39
  staticRequestConfigsRef.current = staticRequestConfigs;
40
+ /**
41
+ * Stops the in-flight stream. The kill switch is raised *before* cancelling because
42
+ * cancelling makes the pending `reader.read()` resolve `{ done: true }` — identical
43
+ * to a stream that ended on its own. Without the flag already set, the read loop
44
+ * would take the end-of-stream branch and report a load that never finished.
45
+ *
46
+ * Deliberately touches no state, so the unmount cleanup can share it.
47
+ */
48
+ const teardownStream = (0, react_1.useCallback)(() => {
49
+ killSwitchRef.current = true;
50
+ if (readerRef.current) {
51
+ readerRef.current.cancel();
52
+ readerRef.current = null;
53
+ }
54
+ }, []);
37
55
  const nextMessageId = (0, react_1.useCallback)(() => {
38
56
  idCounterRef.current += 1;
39
57
  return `msg-${idCounterRef.current}-${Date.now()}`;
@@ -59,6 +77,7 @@ function useAsaResults(options) {
59
77
  status: 'loading',
60
78
  intent,
61
79
  };
80
+ activeAssistantIdRef.current = assistantMessage.id;
62
81
  setMessages((prev) => [...prev, userMessage, assistantMessage]);
63
82
  setIsStreaming(true);
64
83
  isStreamingRef.current = true;
@@ -159,30 +178,56 @@ function useAsaResults(options) {
159
178
  if (readerRef.current === reader) {
160
179
  reader.cancel();
161
180
  readerRef.current = null;
181
+ activeAssistantIdRef.current = null;
162
182
  setIsStreaming(false);
163
183
  isStreamingRef.current = false;
164
184
  }
165
185
  }
166
186
  }))();
167
187
  }, [cioClient, domain, nextMessageId]);
168
- (0, react_1.useEffect)(() => () => {
169
- killSwitchRef.current = true;
170
- if (readerRef.current) {
171
- readerRef.current.cancel();
172
- readerRef.current = null;
188
+ (0, react_1.useEffect)(() => () => teardownStream(), [teardownStream]);
189
+ /**
190
+ * Cancels the in-flight request while keeping the conversation: the partial reply is
191
+ * settled as `done` (so the typing indicator stops and streamed text survives) and the
192
+ * thread id is kept, so the next message continues the same conversation rather than
193
+ * starting a new one. Use `clearHistory` to reset instead.
194
+ *
195
+ * A reply that had streamed nothing yet is dropped rather than settled — it would
196
+ * otherwise render as a blank bubble, and a cancelled turn would read as a glitch.
197
+ * "Nothing" means no text, no product groups and no follow-up refinement; any one of
198
+ * them is content worth keeping. The user's own message always stays.
199
+ *
200
+ * No beacon is sent: there is no "aborted" ASA event, and reporting the load as
201
+ * finished would be false. An aborted turn therefore leaves an
202
+ * `assistant_result_load_started` with no matching finished event.
203
+ */
204
+ const abort = (0, react_1.useCallback)(() => {
205
+ if (!isStreamingRef.current)
206
+ return;
207
+ teardownStream();
208
+ setIsStreaming(false);
209
+ isStreamingRef.current = false;
210
+ const abortedId = activeAssistantIdRef.current;
211
+ activeAssistantIdRef.current = null;
212
+ if (abortedId) {
213
+ setMessages((prev) => prev.flatMap((msg) => {
214
+ var _a;
215
+ if (msg.id !== abortedId)
216
+ return [msg];
217
+ if (!msg.text && !((_a = msg.groups) === null || _a === void 0 ? void 0 : _a.length) && !msg.refinement)
218
+ return [];
219
+ return [Object.assign(Object.assign({}, msg), { status: 'done' })];
220
+ }));
173
221
  }
174
- }, []);
222
+ }, [teardownStream]);
175
223
  const clearHistory = (0, react_1.useCallback)(() => {
176
- killSwitchRef.current = true;
177
- if (readerRef.current) {
178
- readerRef.current.cancel();
179
- readerRef.current = null;
180
- }
224
+ teardownStream();
181
225
  threadIdRef.current = null;
226
+ activeAssistantIdRef.current = null;
182
227
  setMessages([]);
183
228
  setIsStreaming(false);
184
229
  isStreamingRef.current = false;
185
- }, []);
186
- return { messages, sendMessage, isStreaming, clearHistory };
230
+ }, [teardownStream]);
231
+ return { messages, sendMessage, isStreaming, abort, clearHistory };
187
232
  }
188
233
  exports.default = useAsaResults;
package/lib/cjs/utils/translate.js CHANGED
@@ -6,6 +6,7 @@ const defaultTranslations = {
6
6
  'CioAsa.input.placeholder': 'Ask a question about this product',
7
7
  'CioAsa.input.ariaLabel': 'Type your message',
8
8
  'CioAsa.input.sendAriaLabel': 'Send message',
9
+ 'CioAsa.input.stopAriaLabel': 'Stop response',
9
10
  'CioAsa.welcome.title': 'Shopping Assistant',
10
11
  'CioAsa.welcome.placeholder': 'Ask anything',
11
12
  'CioAsa.welcome.sendButton': 'Chat',
package/lib/cjs/version.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = '1.5.0';
3
+ exports.default = '1.6.0';
package/lib/mjs/components/Chat/Chat.js CHANGED
@@ -22,8 +22,8 @@ function getAnnouncement(messages, translations) {
22
22
  }
23
23
  return '';
24
24
  }
25
- const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, }, ref) => {
26
- const { messages, sendMessage, isStreaming, clearHistory } = useAsaResults({
25
+ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, componentOverrides, translations, initialThreadId, showStopButton = false, }, ref) => {
26
+ const { messages, sendMessage, isStreaming, abort, clearHistory } = useAsaResults({
27
27
  initialThreadId,
28
28
  });
29
29
  const chatViewRef = useRef(null);
@@ -32,6 +32,7 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
32
32
  const isModal = typeof onClose === 'function';
33
33
  const announcement = getAnnouncement(messages, translations);
34
34
  useImperativeHandle(ref, () => ({
35
+ abort,
35
36
  clearHistory,
36
37
  }));
37
38
  useEffect(() => {
@@ -55,7 +56,7 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
55
56
  React.createElement(WelcomeScreen, { suggestions: initialSuggestions, onSend: sendMessage, onClose: onClose, termsText: termsText, translations: translations, componentOverrides: componentOverrides?.welcomeScreen }))) : (React.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--chat', ref: chatViewRef },
56
57
  React.createElement(ChatHeader, { onClose: onClose, translations: translations, componentOverrides: componentOverrides?.header }),
57
58
  React.createElement(ChatMessageList, { messages: messages, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: translate('CioAsa.results.addToCart', translations), viewMoreText: translate('CioAsa.results.viewMore', translations), aiMessageOverrides: componentOverrides?.aiMessage, userMessageOverrides: componentOverrides?.userMessage, resultsBlockOverrides: componentOverrides?.resultsBlock, translations: translations, onSend: sendMessage, isStreaming: isStreaming }),
58
- React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides?.input }))))));
59
+ React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, isStreaming: isStreaming, onAbort: abort, showStopButton: showStopButton, translations: translations, componentOverrides: componentOverrides?.input }))))));
59
60
  });
60
61
  Chat.displayName = 'Chat';
61
62
  export default Chat;
package/lib/mjs/components/Chat/ChatInput.css CHANGED
@@ -81,3 +81,14 @@
81
81
  cursor: default;
82
82
  opacity: 0.3;
83
83
  }
84
+
85
+ /* Replaces the send button while a reply streams; always actionable, so it never
86
+ inherits the disabled styling above. */
87
+ .cio-asa-chat-input__stop {
88
+ cursor: pointer;
89
+ opacity: 1;
90
+ }
91
+
92
+ .cio-asa-chat-input__stop:hover rect {
93
+ fill-opacity: 1;
94
+ }
package/lib/mjs/components/Chat/ChatInput.js CHANGED
@@ -1,26 +1,31 @@
1
1
  import React from 'react';
2
2
  import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
3
- import { SendArrowIcon } from '../icons';
3
+ import { SendArrowIcon, StopIcon } from '../icons';
4
4
  import translate from '../../utils/translate';
5
5
  import useMessageInput from '../../hooks/useMessageInput';
6
- export default function ChatInput({ onSubmit, isDisabled = false, translations, componentOverrides, }) {
6
+ export default function ChatInput({ onSubmit, isDisabled = false, isStreaming = false, onAbort, showStopButton = false, translations, componentOverrides, }) {
7
7
  const { value, setValue, handleSubmit, handleKeyDown } = useMessageInput({
8
8
  onSend: onSubmit,
9
9
  isDisabled,
10
10
  submitOnEnterOnly: true,
11
11
  });
12
+ // The stop button only makes sense when there is something to stop and a way to do it.
13
+ const canAbort = isStreaming && showStopButton && typeof onAbort === 'function';
12
14
  const renderProps = {
13
15
  value,
14
16
  onChange: setValue,
15
17
  onSubmit: handleSubmit,
16
18
  placeholder: translate('CioAsa.input.placeholder', translations),
17
19
  isDisabled,
20
+ isStreaming,
21
+ onAbort: onAbort ?? (() => { }),
18
22
  };
19
23
  return (React.createElement(RenderPropsWrapper, { override: componentOverrides?.reactNode, props: renderProps },
20
24
  React.createElement("div", { className: 'cio-asa-chat-input-wrapper' },
21
25
  React.createElement("div", { className: 'cio-asa-chat-input' },
22
26
  React.createElement("input", { type: 'text', className: 'cio-asa-chat-input__field', value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: renderProps.placeholder, disabled: isDisabled, "aria-label": translate('CioAsa.input.ariaLabel', translations) }),
23
- React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": translate('CioAsa.input.sendAriaLabel', translations) },
24
- React.createElement(SendArrowIcon, null))))));
27
+ canAbort ? (React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send cio-asa-chat-input__stop', onClick: onAbort, "aria-label": translate('CioAsa.input.stopAriaLabel', translations) },
28
+ React.createElement(StopIcon, null))) : (React.createElement("button", { type: 'button', className: 'cio-asa-chat-input__send', onClick: handleSubmit, disabled: isDisabled || !value.trim(), "aria-label": translate('CioAsa.input.sendAriaLabel', translations) },
29
+ React.createElement(SendArrowIcon, null)))))));
25
30
  }
26
31
  ChatInput.displayName = 'ChatInput';
package/lib/mjs/components/icons/StopIcon.js ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ export default function StopIcon() {
3
+ return (React.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true', focusable: 'false' },
4
+ React.createElement("rect", { x: '0.5', y: '0.5', width: '9', height: '9', rx: '1.5', fill: '#0F1324', fillOpacity: '0.7' })));
5
+ }
package/lib/mjs/components/icons/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as ChatBubbleDarkIcon } from './ChatBubbleDarkIcon';
2
2
  export { default as ChatBubbleLightIcon } from './ChatBubbleLightIcon';
3
3
  export { default as SendArrowIcon } from './SendArrowIcon';
4
+ export { default as StopIcon } from './StopIcon';
4
5
  export { default as SendPlaneIcon } from './SendPlaneIcon';
5
6
  export { default as ArrowRightIcon } from './ArrowRightIcon';
package/lib/mjs/hooks/useAsaResults.js CHANGED
@@ -10,6 +10,9 @@ export default function useAsaResults(options) {
10
10
  const readerRef = useRef(null);
11
11
  const threadIdRef = useRef(options?.initialThreadId ?? null);
12
12
  const idCounterRef = useRef(0);
13
+ // The assistant message the in-flight stream is writing into, so `abort` can
14
+ // settle it without having to guess which message that is.
15
+ const activeAssistantIdRef = useRef(null);
13
16
  const contextValue = useCioAsaContext();
14
17
  if (!contextValue) {
15
18
  throw new Error('useAsaResults must be used within a CioAsaProvider.');
@@ -30,6 +33,21 @@ export default function useAsaResults(options) {
30
33
  callbacksRef.current = callbacks;
31
34
  const staticRequestConfigsRef = useRef(staticRequestConfigs);
32
35
  staticRequestConfigsRef.current = staticRequestConfigs;
36
+ /**
37
+ * Stops the in-flight stream. The kill switch is raised *before* cancelling because
38
+ * cancelling makes the pending `reader.read()` resolve `{ done: true }` — identical
39
+ * to a stream that ended on its own. Without the flag already set, the read loop
40
+ * would take the end-of-stream branch and report a load that never finished.
41
+ *
42
+ * Deliberately touches no state, so the unmount cleanup can share it.
43
+ */
44
+ const teardownStream = useCallback(() => {
45
+ killSwitchRef.current = true;
46
+ if (readerRef.current) {
47
+ readerRef.current.cancel();
48
+ readerRef.current = null;
49
+ }
50
+ }, []);
33
51
  const nextMessageId = useCallback(() => {
34
52
  idCounterRef.current += 1;
35
53
  return `msg-${idCounterRef.current}-${Date.now()}`;
@@ -54,6 +72,7 @@ export default function useAsaResults(options) {
54
72
  status: 'loading',
55
73
  intent,
56
74
  };
75
+ activeAssistantIdRef.current = assistantMessage.id;
57
76
  setMessages((prev) => [...prev, userMessage, assistantMessage]);
58
77
  setIsStreaming(true);
59
78
  isStreamingRef.current = true;
@@ -156,29 +175,54 @@ export default function useAsaResults(options) {
156
175
  if (readerRef.current === reader) {
157
176
  reader.cancel();
158
177
  readerRef.current = null;
178
+ activeAssistantIdRef.current = null;
159
179
  setIsStreaming(false);
160
180
  isStreamingRef.current = false;
161
181
  }
162
182
  }
163
183
  })();
164
184
  }, [cioClient, domain, nextMessageId]);
165
- useEffect(() => () => {
166
- killSwitchRef.current = true;
167
- if (readerRef.current) {
168
- readerRef.current.cancel();
169
- readerRef.current = null;
185
+ useEffect(() => () => teardownStream(), [teardownStream]);
186
+ /**
187
+ * Cancels the in-flight request while keeping the conversation: the partial reply is
188
+ * settled as `done` (so the typing indicator stops and streamed text survives) and the
189
+ * thread id is kept, so the next message continues the same conversation rather than
190
+ * starting a new one. Use `clearHistory` to reset instead.
191
+ *
192
+ * A reply that had streamed nothing yet is dropped rather than settled — it would
193
+ * otherwise render as a blank bubble, and a cancelled turn would read as a glitch.
194
+ * "Nothing" means no text, no product groups and no follow-up refinement; any one of
195
+ * them is content worth keeping. The user's own message always stays.
196
+ *
197
+ * No beacon is sent: there is no "aborted" ASA event, and reporting the load as
198
+ * finished would be false. An aborted turn therefore leaves an
199
+ * `assistant_result_load_started` with no matching finished event.
200
+ */
201
+ const abort = useCallback(() => {
202
+ if (!isStreamingRef.current)
203
+ return;
204
+ teardownStream();
205
+ setIsStreaming(false);
206
+ isStreamingRef.current = false;
207
+ const abortedId = activeAssistantIdRef.current;
208
+ activeAssistantIdRef.current = null;
209
+ if (abortedId) {
210
+ setMessages((prev) => prev.flatMap((msg) => {
211
+ if (msg.id !== abortedId)
212
+ return [msg];
213
+ if (!msg.text && !msg.groups?.length && !msg.refinement)
214
+ return [];
215
+ return [{ ...msg, status: 'done' }];
216
+ }));
170
217
  }
171
- }, []);
218
+ }, [teardownStream]);
172
219
  const clearHistory = useCallback(() => {
173
- killSwitchRef.current = true;
174
- if (readerRef.current) {
175
- readerRef.current.cancel();
176
- readerRef.current = null;
177
- }
220
+ teardownStream();
178
221
  threadIdRef.current = null;
222
+ activeAssistantIdRef.current = null;
179
223
  setMessages([]);
180
224
  setIsStreaming(false);
181
225
  isStreamingRef.current = false;
182
- }, []);
183
- return { messages, sendMessage, isStreaming, clearHistory };
226
+ }, [teardownStream]);
227
+ return { messages, sendMessage, isStreaming, abort, clearHistory };
184
228
  }
package/lib/mjs/utils/translate.js CHANGED
@@ -4,6 +4,7 @@ const defaultTranslations = {
4
4
  'CioAsa.input.placeholder': 'Ask a question about this product',
5
5
  'CioAsa.input.ariaLabel': 'Type your message',
6
6
  'CioAsa.input.sendAriaLabel': 'Send message',
7
+ 'CioAsa.input.stopAriaLabel': 'Stop response',
7
8
  'CioAsa.welcome.title': 'Shopping Assistant',
8
9
  'CioAsa.welcome.placeholder': 'Ask anything',
9
10
  'CioAsa.welcome.sendButton': 'Chat',
package/lib/mjs/version.js CHANGED
@@ -1 +1 @@
1
- export default '1.5.0';
1
+ export default '1.6.0';
package/lib/types/components/Chat/Chat.d.ts CHANGED
@@ -3,6 +3,13 @@ import { ChatComponentOverrides, ResultGroupMeta, Translations } from '../../typ
3
3
  import { Product, NormalizeOptions } from '../../utils/productNormalizer';
4
4
  import { AspectRatio } from '../ResultsBlock/ResultsBlock';
5
5
  export interface ChatHandle {
6
+ /**
7
+ * Cancel the in-flight response, keeping the conversation. The partial reply is kept
8
+ * and the thread is preserved, so the next message continues where it left off.
9
+ * No-op when nothing is streaming.
10
+ */
11
+ abort: () => void;
12
+ /** Cancel any active response, then reset the conversation and the thread. */
6
13
  clearHistory: () => void;
7
14
  }
8
15
  interface ChatProps {
@@ -35,6 +42,12 @@ interface ChatProps {
35
42
  translations?: Translations;
36
43
  /** Seed the thread id (e.g. loaded from browser storage) to resume a prior conversation. Read once on mount. */
37
44
  initialThreadId?: string;
45
+ /**
46
+ * Whether the input's send button becomes a stop button while a reply streams.
47
+ * Defaults to `false`, so the packaged UI is unchanged unless you opt in. While it is
48
+ * off, cancelling is only reachable via `abort()` on the ref or your own input override.
49
+ */
50
+ showStopButton?: boolean;
38
51
  }
39
52
  declare const Chat: React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<ChatHandle>>;
40
53
  export default Chat;
package/lib/types/components/Chat/ChatInput.d.ts CHANGED
@@ -3,10 +3,20 @@ import { ChatInputRenderProps, ComponentOverrideProps, Translations } from '../.
3
3
  interface ChatInputProps {
4
4
  onSubmit: (text: string) => void;
5
5
  isDisabled?: boolean;
6
+ /** A reply is streaming: the send button becomes a stop button. */
7
+ isStreaming?: boolean;
8
+ /** Cancel the in-flight reply. */
9
+ onAbort?: () => void;
10
+ /**
11
+ * Whether the built-in stop button replaces send while streaming. Defaults to `false`:
12
+ * the send button stays (disabled). `onAbort` reaches the render props either way, so a
13
+ * consumer can render their own control without enabling this one.
14
+ */
15
+ showStopButton?: boolean;
6
16
  translations?: Translations;
7
17
  componentOverrides?: ComponentOverrideProps<ChatInputRenderProps>;
8
18
  }
9
- declare function ChatInput({ onSubmit, isDisabled, translations, componentOverrides, }: ChatInputProps): React.JSX.Element;
19
+ declare function ChatInput({ onSubmit, isDisabled, isStreaming, onAbort, showStopButton, translations, componentOverrides, }: ChatInputProps): React.JSX.Element;
10
20
  declare namespace ChatInput {
11
21
  var displayName: string;
12
22
  }
package/lib/types/components/icons/StopIcon.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export default function StopIcon(): React.JSX.Element;
package/lib/types/components/icons/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as ChatBubbleDarkIcon } from './ChatBubbleDarkIcon';
2
2
  export { default as ChatBubbleLightIcon } from './ChatBubbleLightIcon';
3
3
  export { default as SendArrowIcon } from './SendArrowIcon';
4
+ export { default as StopIcon } from './StopIcon';
4
5
  export { default as SendPlaneIcon } from './SendPlaneIcon';
5
6
  export { default as ArrowRightIcon } from './ArrowRightIcon';
package/lib/types/types.d.ts CHANGED
@@ -134,6 +134,12 @@ export interface UseChatReturn {
134
134
  messages: ChatMessage[];
135
135
  sendMessage: (text: string, source?: AssistantSubmitSource) => void;
136
136
  isStreaming: boolean;
137
+ /**
138
+ * Cancel the in-flight request, keeping the conversation. The partial reply is settled
139
+ * as `done` and the thread id is kept, so the next message continues the same
140
+ * conversation. No-op when nothing is streaming. Use `clearHistory` to reset instead.
141
+ */
142
+ abort: () => void;
137
143
  clearHistory: () => void;
138
144
  }
139
145
  export interface UseAsaResultsOptions {
@@ -205,6 +211,7 @@ export type Translations = {
205
211
  'CioAsa.input.placeholder'?: string;
206
212
  'CioAsa.input.ariaLabel'?: string;
207
213
  'CioAsa.input.sendAriaLabel'?: string;
214
+ 'CioAsa.input.stopAriaLabel'?: string;
208
215
  'CioAsa.welcome.title'?: string;
209
216
  'CioAsa.welcome.placeholder'?: string;
210
217
  'CioAsa.welcome.sendButton'?: string;
@@ -232,6 +239,14 @@ export interface ChatInputRenderProps {
232
239
  onSubmit: () => void;
233
240
  placeholder: string;
234
241
  isDisabled: boolean;
242
+ /**
243
+ * Whether a reply is currently streaming. Pair it with `onAbort` to offer a cancel
244
+ * control while it is true — the built-in stop button is off by default, so an override
245
+ * is often the only way a user can cancel.
246
+ */
247
+ isStreaming: boolean;
248
+ /** Cancel the in-flight reply. Keeps the conversation and the thread. */
249
+ onAbort: () => void;
235
250
  }
236
251
  export interface WelcomeScreenTitleRenderProps {
237
252
  text: string;
package/lib/types/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "1.5.0";
1
+ declare const _default: "1.6.0";
2
2
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@constructor-io/constructorio-ui-asa",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "Constructor.io AI Shopping Agent UI library for web applications",
5
5
  "author": "constructor.io",
6
6
  "license": "MIT",