@constructor-io/constructorio-ui-asa 1.4.0 → 1.5.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.
- package/README.md +1 -1
- package/dist/constructorio-ui-asa-bundled.js +1 -1
- package/lib/cjs/components/Chat/Chat.js +1 -1
- package/lib/cjs/components/Chat/ChatMessageList.js +7 -3
- package/lib/cjs/components/Chat/FollowUpRefinement.css +62 -0
- package/lib/cjs/components/Chat/FollowUpRefinement.js +30 -0
- package/lib/cjs/hooks/asaStreamHandlers.js +11 -1
- package/lib/cjs/hooks/useAsaResults.js +4 -0
- package/lib/cjs/styles.css +1 -0
- package/lib/cjs/utils/translate.js +1 -0
- package/lib/cjs/version.js +1 -1
- package/lib/mjs/components/Chat/Chat.js +1 -1
- package/lib/mjs/components/Chat/ChatMessageList.js +7 -3
- package/lib/mjs/components/Chat/FollowUpRefinement.css +62 -0
- package/lib/mjs/components/Chat/FollowUpRefinement.js +26 -0
- package/lib/mjs/hooks/asaStreamHandlers.js +13 -0
- package/lib/mjs/hooks/useAsaResults.js +5 -1
- package/lib/mjs/styles.css +1 -0
- package/lib/mjs/utils/translate.js +1 -0
- package/lib/mjs/version.js +1 -1
- package/lib/types/components/Chat/ChatMessageList.d.ts +6 -2
- package/lib/types/components/Chat/FollowUpRefinement.d.ts +14 -0
- package/lib/types/hooks/asaStreamHandlers.d.ts +1 -0
- package/lib/types/index.d.ts +1 -1
- package/lib/types/types.d.ts +20 -3
- package/lib/types/version.d.ts +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ This library declares the following as peer dependencies, so they must be presen
|
|
|
36
36
|
|
|
37
37
|
| Package | Version |
|
|
38
38
|
|---------|---------|
|
|
39
|
-
| `@constructor-io/constructorio-client-javascript` | `^2.
|
|
39
|
+
| `@constructor-io/constructorio-client-javascript` | `^2.93.1` |
|
|
40
40
|
| `@constructor-io/constructorio-ui-components` | `^1.6.0` |
|
|
41
41
|
| `react` | `>=16.12.0` |
|
|
42
42
|
| `react-dom` | `>=16.12.0` |
|
|
@@ -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-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-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
|
|
@@ -58,7 +58,7 @@ const Chat = (0, react_1.forwardRef)(({ onClose, className, initialSuggestions,
|
|
|
58
58
|
react_1.default.createElement("div", { className: 'cio-asa-chat-body' }, isWelcome ? (react_1.default.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--welcome' },
|
|
59
59
|
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
60
|
react_1.default.createElement(ChatHeader_1.default, { onClose: onClose, translations: translations, componentOverrides: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.header }),
|
|
61
|
-
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 }),
|
|
61
|
+
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
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
63
|
});
|
|
64
64
|
Chat.displayName = 'Chat';
|
|
@@ -6,7 +6,8 @@ const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
|
|
|
6
6
|
const ResultsBlock_1 = tslib_1.__importDefault(require("../ResultsBlock/ResultsBlock"));
|
|
7
7
|
const UserMessage_1 = tslib_1.__importDefault(require("./UserMessage"));
|
|
8
8
|
const AiMessage_1 = tslib_1.__importDefault(require("./AiMessage"));
|
|
9
|
-
|
|
9
|
+
const FollowUpRefinement_1 = tslib_1.__importDefault(require("./FollowUpRefinement"));
|
|
10
|
+
function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, onSend, isStreaming = false, }) {
|
|
10
11
|
const listRef = (0, react_1.useRef)(null);
|
|
11
12
|
const isNearBottomRef = (0, react_1.useRef)(true);
|
|
12
13
|
const prevMessageCountRef = (0, react_1.useRef)(messages.length);
|
|
@@ -31,15 +32,18 @@ function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, as
|
|
|
31
32
|
el.scrollTo({ top: el.scrollHeight, behavior: isNewMessage ? 'smooth' : 'auto' });
|
|
32
33
|
});
|
|
33
34
|
}, [messages]);
|
|
34
|
-
return (react_1.default.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": (0, translate_1.default)('CioAsa.messageList.ariaLabel', translations) }, messages.map((message) => {
|
|
35
|
+
return (react_1.default.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": (0, translate_1.default)('CioAsa.messageList.ariaLabel', translations) }, messages.map((message, index) => {
|
|
35
36
|
var _a;
|
|
36
37
|
if (message.role === 'user') {
|
|
37
38
|
return (react_1.default.createElement(UserMessage_1.default, { key: message.id, text: message.text, translations: translations, componentOverrides: userMessageOverrides }));
|
|
38
39
|
}
|
|
39
40
|
const hasGroups = !!((_a = message.groups) === null || _a === void 0 ? void 0 : _a.length);
|
|
41
|
+
const isLatest = index === messages.length - 1;
|
|
42
|
+
const refinement = onSend ? message.refinement : undefined;
|
|
40
43
|
return (react_1.default.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
|
|
41
44
|
react_1.default.createElement(AiMessage_1.default, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
|
|
42
|
-
hasGroups && (react_1.default.createElement(ResultsBlock_1.default, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: (0, translate_1.default)('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))
|
|
45
|
+
hasGroups && (react_1.default.createElement(ResultsBlock_1.default, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: (0, translate_1.default)('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides })),
|
|
46
|
+
refinement && (react_1.default.createElement(FollowUpRefinement_1.default, { refinement: refinement, onOptionClick: (option) => onSend(option, 'refinement'), isDisabled: !isLatest || isStreaming, translations: translations, componentOverrides: aiMessageOverrides === null || aiMessageOverrides === void 0 ? void 0 : aiMessageOverrides.followUpRefinement }))));
|
|
43
47
|
})));
|
|
44
48
|
}
|
|
45
49
|
exports.default = ChatMessageList;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.cio-asa-follow-up-refinement {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 10px;
|
|
5
|
+
width: 100%;
|
|
6
|
+
padding-right: 12px;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
animation: cio-asa-fade-in 0.3s ease;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.cio-asa-follow-up-refinement__question {
|
|
12
|
+
margin: 0;
|
|
13
|
+
font-weight: 500;
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
line-height: 20px;
|
|
16
|
+
letter-spacing: -0.005em;
|
|
17
|
+
color: #0F1324;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cio-asa-follow-up-refinement__options {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
gap: 8px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.cio-asa-follow-up-refinement__chip {
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
padding: 8px 14px;
|
|
31
|
+
background: #ffffff;
|
|
32
|
+
box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
|
|
33
|
+
border-radius: 12px;
|
|
34
|
+
border: 1px solid transparent;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
line-height: 20px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
color: #343434;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cio-asa-follow-up-refinement__chip:hover:not(:disabled) {
|
|
46
|
+
border-color: #ffffff;
|
|
47
|
+
box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.cio-asa-follow-up-refinement__chip:active:not(:disabled) {
|
|
51
|
+
background: #E0E3EB;
|
|
52
|
+
border-color: #DEE0E3;
|
|
53
|
+
box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.cio-asa-follow-up-refinement__chip:disabled {
|
|
57
|
+
cursor: default;
|
|
58
|
+
background: #F4F5F7;
|
|
59
|
+
border-color: #E9EAEC;
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
color: #6B7080;
|
|
62
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
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
|
+
const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
|
|
6
|
+
const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
|
|
7
|
+
function FollowUpRefinement({ refinement, onOptionClick, isDisabled = false, translations, componentOverrides, }) {
|
|
8
|
+
const handleOptionClick = (option) => {
|
|
9
|
+
if (isDisabled)
|
|
10
|
+
return;
|
|
11
|
+
onOptionClick(option);
|
|
12
|
+
};
|
|
13
|
+
const renderProps = {
|
|
14
|
+
question: refinement.question,
|
|
15
|
+
options: refinement.options,
|
|
16
|
+
onOptionClick: handleOptionClick,
|
|
17
|
+
isDisabled,
|
|
18
|
+
};
|
|
19
|
+
return (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.reactNode, props: renderProps },
|
|
20
|
+
react_1.default.createElement("div", { className: [
|
|
21
|
+
'cio-asa-follow-up-refinement',
|
|
22
|
+
isDisabled && 'cio-asa-follow-up-refinement--disabled',
|
|
23
|
+
]
|
|
24
|
+
.filter(Boolean)
|
|
25
|
+
.join(' '), role: 'group', "aria-label": (0, translate_1.default)('CioAsa.refinement.ariaLabel', translations) },
|
|
26
|
+
react_1.default.createElement("p", { className: 'cio-asa-follow-up-refinement__question' }, refinement.question),
|
|
27
|
+
react_1.default.createElement("div", { className: 'cio-asa-follow-up-refinement__options' }, refinement.options.map((option) => (react_1.default.createElement("button", { key: option, type: 'button', className: 'cio-asa-follow-up-refinement__chip', disabled: isDisabled, onClick: () => handleOptionClick(option) }, option)))))));
|
|
28
|
+
}
|
|
29
|
+
exports.default = FollowUpRefinement;
|
|
30
|
+
FollowUpRefinement.displayName = 'FollowUpRefinement';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.handleStreamError = exports.handleStreamEnd = exports.handleServerError = exports.handleMessage = exports.handleSearchResult = void 0;
|
|
3
|
+
exports.handleStreamError = exports.handleStreamEnd = exports.handleServerError = exports.handleFollowUpRefinement = exports.handleMessage = exports.handleSearchResult = void 0;
|
|
4
4
|
/**
|
|
5
5
|
* Internal A/B configuration echoed back on the request. Stripped before the request reaches
|
|
6
6
|
* consumers: it is unstable (the backend omits it on some pods within a single response) and
|
|
@@ -38,6 +38,16 @@ function handleMessage(data, assistantId, setMessages) {
|
|
|
38
38
|
updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', text: (msg.text || '') + ((data === null || data === void 0 ? void 0 : data.text) || '') })));
|
|
39
39
|
}
|
|
40
40
|
exports.handleMessage = handleMessage;
|
|
41
|
+
function handleFollowUpRefinement(data, assistantId, setMessages) {
|
|
42
|
+
const question = typeof (data === null || data === void 0 ? void 0 : data.question) === 'string' ? data.question.trim() : '';
|
|
43
|
+
const options = Array.isArray(data === null || data === void 0 ? void 0 : data.options)
|
|
44
|
+
? data.options.filter((o) => typeof o === 'string' && o.trim() !== '')
|
|
45
|
+
: [];
|
|
46
|
+
if (question === '' || options.length === 0)
|
|
47
|
+
return;
|
|
48
|
+
updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'streaming', refinement: { question, options } })));
|
|
49
|
+
}
|
|
50
|
+
exports.handleFollowUpRefinement = handleFollowUpRefinement;
|
|
41
51
|
function handleServerError(assistantId, setMessages) {
|
|
42
52
|
updateMessageById(setMessages, assistantId, (msg) => (Object.assign(Object.assign({}, msg), { status: 'error' })));
|
|
43
53
|
}
|
|
@@ -142,6 +142,10 @@ function useAsaResults(options) {
|
|
|
142
142
|
fireLoadStart();
|
|
143
143
|
(0, asaStreamHandlers_1.handleMessage)(data, assistantMessage.id, setMessages);
|
|
144
144
|
}
|
|
145
|
+
else if (type === 'follow_up_refinement') {
|
|
146
|
+
fireLoadStart();
|
|
147
|
+
(0, asaStreamHandlers_1.handleFollowUpRefinement)(data, assistantMessage.id, setMessages);
|
|
148
|
+
}
|
|
145
149
|
else if (type === 'server_error') {
|
|
146
150
|
(0, asaStreamHandlers_1.handleServerError)(assistantMessage.id, setMessages);
|
|
147
151
|
break;
|
package/lib/cjs/styles.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@import './components/Chat/ChatMessageList.css';
|
|
7
7
|
@import './components/Chat/UserMessage.css';
|
|
8
8
|
@import './components/Chat/AiMessage.css';
|
|
9
|
+
@import './components/Chat/FollowUpRefinement.css';
|
|
9
10
|
@import './components/Chat/TypingIndicator.css';
|
|
10
11
|
@import './components/Chat/ChatInput.css';
|
|
11
12
|
@import './components/ResultsBlock/ResultsBlock.css';
|
|
@@ -18,6 +18,7 @@ const defaultTranslations = {
|
|
|
18
18
|
'CioAsa.results.viewMore': 'View more products',
|
|
19
19
|
'CioAsa.results.addToCart': 'Add to cart',
|
|
20
20
|
'CioAsa.results.saleBadge': 'Sale',
|
|
21
|
+
'CioAsa.refinement.ariaLabel': 'Refine your results',
|
|
21
22
|
'CioAsa.error.message': "I can't assist you with that request.",
|
|
22
23
|
};
|
|
23
24
|
function translate(key, translations) {
|
package/lib/cjs/version.js
CHANGED
|
@@ -54,7 +54,7 @@ const Chat = forwardRef(({ onClose, className, initialSuggestions, termsText, on
|
|
|
54
54
|
React.createElement("div", { className: 'cio-asa-chat-body' }, isWelcome ? (React.createElement("div", { className: 'cio-asa-chat-view cio-asa-chat-view--welcome' },
|
|
55
55
|
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
56
|
React.createElement(ChatHeader, { onClose: onClose, translations: translations, componentOverrides: componentOverrides?.header }),
|
|
57
|
-
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 }),
|
|
57
|
+
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
58
|
React.createElement(ChatInput, { onSubmit: sendMessage, isDisabled: isStreaming, translations: translations, componentOverrides: componentOverrides?.input }))))));
|
|
59
59
|
});
|
|
60
60
|
Chat.displayName = 'Chat';
|
|
@@ -3,7 +3,8 @@ import translate from '../../utils/translate';
|
|
|
3
3
|
import ResultsBlock from '../ResultsBlock/ResultsBlock';
|
|
4
4
|
import UserMessage from './UserMessage';
|
|
5
5
|
import AiMessage from './AiMessage';
|
|
6
|
-
|
|
6
|
+
import FollowUpRefinement from './FollowUpRefinement';
|
|
7
|
+
export default function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, onSend, isStreaming = false, }) {
|
|
7
8
|
const listRef = useRef(null);
|
|
8
9
|
const isNearBottomRef = useRef(true);
|
|
9
10
|
const prevMessageCountRef = useRef(messages.length);
|
|
@@ -28,14 +29,17 @@ export default function ChatMessageList({ messages, onProductClick, onViewMore,
|
|
|
28
29
|
el.scrollTo({ top: el.scrollHeight, behavior: isNewMessage ? 'smooth' : 'auto' });
|
|
29
30
|
});
|
|
30
31
|
}, [messages]);
|
|
31
|
-
return (React.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": translate('CioAsa.messageList.ariaLabel', translations) }, messages.map((message) => {
|
|
32
|
+
return (React.createElement("div", { className: 'cio-asa-chat-message-list', ref: listRef, onScroll: handleScroll, role: 'log', "aria-live": 'off', tabIndex: 0, "aria-label": translate('CioAsa.messageList.ariaLabel', translations) }, messages.map((message, index) => {
|
|
32
33
|
if (message.role === 'user') {
|
|
33
34
|
return (React.createElement(UserMessage, { key: message.id, text: message.text, translations: translations, componentOverrides: userMessageOverrides }));
|
|
34
35
|
}
|
|
35
36
|
const hasGroups = !!message.groups?.length;
|
|
37
|
+
const isLatest = index === messages.length - 1;
|
|
38
|
+
const refinement = onSend ? message.refinement : undefined;
|
|
36
39
|
return (React.createElement("div", { key: message.id, className: 'cio-asa-ai-message-group' },
|
|
37
40
|
React.createElement(AiMessage, { message: message, componentOverrides: aiMessageOverrides, translations: translations }),
|
|
38
|
-
hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides }))
|
|
41
|
+
hasGroups && (React.createElement(ResultsBlock, { groups: message.groups, intent: message.intent, intentResultId: message.intentResultId, threadId: message.threadId, onProductClick: onProductClick, onViewMore: onViewMore, onAddToCart: onAddToCart, aspectRatio: aspectRatio, currency: currency, normalizeItem: normalizeItem, addToCartText: addToCartText, viewMoreText: viewMoreText, saleBadgeText: translate('CioAsa.results.saleBadge', translations), componentOverrides: resultsBlockOverrides })),
|
|
42
|
+
refinement && (React.createElement(FollowUpRefinement, { refinement: refinement, onOptionClick: (option) => onSend(option, 'refinement'), isDisabled: !isLatest || isStreaming, translations: translations, componentOverrides: aiMessageOverrides?.followUpRefinement }))));
|
|
39
43
|
})));
|
|
40
44
|
}
|
|
41
45
|
ChatMessageList.displayName = 'ChatMessageList';
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.cio-asa-follow-up-refinement {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 10px;
|
|
5
|
+
width: 100%;
|
|
6
|
+
padding-right: 12px;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
animation: cio-asa-fade-in 0.3s ease;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.cio-asa-follow-up-refinement__question {
|
|
12
|
+
margin: 0;
|
|
13
|
+
font-weight: 500;
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
line-height: 20px;
|
|
16
|
+
letter-spacing: -0.005em;
|
|
17
|
+
color: #0F1324;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cio-asa-follow-up-refinement__options {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
gap: 8px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.cio-asa-follow-up-refinement__chip {
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
padding: 8px 14px;
|
|
31
|
+
background: #ffffff;
|
|
32
|
+
box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
|
|
33
|
+
border-radius: 12px;
|
|
34
|
+
border: 1px solid transparent;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
line-height: 20px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
color: #343434;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cio-asa-follow-up-refinement__chip:hover:not(:disabled) {
|
|
46
|
+
border-color: #ffffff;
|
|
47
|
+
box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.cio-asa-follow-up-refinement__chip:active:not(:disabled) {
|
|
51
|
+
background: #E0E3EB;
|
|
52
|
+
border-color: #DEE0E3;
|
|
53
|
+
box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.cio-asa-follow-up-refinement__chip:disabled {
|
|
57
|
+
cursor: default;
|
|
58
|
+
background: #F4F5F7;
|
|
59
|
+
border-color: #E9EAEC;
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
color: #6B7080;
|
|
62
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RenderPropsWrapper } from '@constructor-io/constructorio-ui-components';
|
|
3
|
+
import translate from '../../utils/translate';
|
|
4
|
+
export default function FollowUpRefinement({ refinement, onOptionClick, isDisabled = false, translations, componentOverrides, }) {
|
|
5
|
+
const handleOptionClick = (option) => {
|
|
6
|
+
if (isDisabled)
|
|
7
|
+
return;
|
|
8
|
+
onOptionClick(option);
|
|
9
|
+
};
|
|
10
|
+
const renderProps = {
|
|
11
|
+
question: refinement.question,
|
|
12
|
+
options: refinement.options,
|
|
13
|
+
onOptionClick: handleOptionClick,
|
|
14
|
+
isDisabled,
|
|
15
|
+
};
|
|
16
|
+
return (React.createElement(RenderPropsWrapper, { override: componentOverrides?.reactNode, props: renderProps },
|
|
17
|
+
React.createElement("div", { className: [
|
|
18
|
+
'cio-asa-follow-up-refinement',
|
|
19
|
+
isDisabled && 'cio-asa-follow-up-refinement--disabled',
|
|
20
|
+
]
|
|
21
|
+
.filter(Boolean)
|
|
22
|
+
.join(' '), role: 'group', "aria-label": translate('CioAsa.refinement.ariaLabel', translations) },
|
|
23
|
+
React.createElement("p", { className: 'cio-asa-follow-up-refinement__question' }, refinement.question),
|
|
24
|
+
React.createElement("div", { className: 'cio-asa-follow-up-refinement__options' }, refinement.options.map((option) => (React.createElement("button", { key: option, type: 'button', className: 'cio-asa-follow-up-refinement__chip', disabled: isDisabled, onClick: () => handleOptionClick(option) }, option)))))));
|
|
25
|
+
}
|
|
26
|
+
FollowUpRefinement.displayName = 'FollowUpRefinement';
|
|
@@ -48,6 +48,19 @@ export function handleMessage(data, assistantId, setMessages) {
|
|
|
48
48
|
text: (msg.text || '') + (data?.text || ''),
|
|
49
49
|
}));
|
|
50
50
|
}
|
|
51
|
+
export function handleFollowUpRefinement(data, assistantId, setMessages) {
|
|
52
|
+
const question = typeof data?.question === 'string' ? data.question.trim() : '';
|
|
53
|
+
const options = Array.isArray(data?.options)
|
|
54
|
+
? data.options.filter((o) => typeof o === 'string' && o.trim() !== '')
|
|
55
|
+
: [];
|
|
56
|
+
if (question === '' || options.length === 0)
|
|
57
|
+
return;
|
|
58
|
+
updateMessageById(setMessages, assistantId, (msg) => ({
|
|
59
|
+
...msg,
|
|
60
|
+
status: 'streaming',
|
|
61
|
+
refinement: { question, options },
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
51
64
|
export function handleServerError(assistantId, setMessages) {
|
|
52
65
|
updateMessageById(setMessages, assistantId, (msg) => ({
|
|
53
66
|
...msg,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { useCioAsaContext } from './useCioAsaContext';
|
|
3
|
-
import { handleSearchResult, handleMessage, handleServerError, handleStreamEnd, handleStreamError, } from './asaStreamHandlers';
|
|
3
|
+
import { handleSearchResult, handleMessage, handleFollowUpRefinement, handleServerError, handleStreamEnd, handleStreamError, } from './asaStreamHandlers';
|
|
4
4
|
import useAsaTracking from './useAsaTracking';
|
|
5
5
|
export default function useAsaResults(options) {
|
|
6
6
|
const [messages, setMessages] = useState([]);
|
|
@@ -139,6 +139,10 @@ export default function useAsaResults(options) {
|
|
|
139
139
|
fireLoadStart();
|
|
140
140
|
handleMessage(data, assistantMessage.id, setMessages);
|
|
141
141
|
}
|
|
142
|
+
else if (type === 'follow_up_refinement') {
|
|
143
|
+
fireLoadStart();
|
|
144
|
+
handleFollowUpRefinement(data, assistantMessage.id, setMessages);
|
|
145
|
+
}
|
|
142
146
|
else if (type === 'server_error') {
|
|
143
147
|
handleServerError(assistantMessage.id, setMessages);
|
|
144
148
|
break;
|
package/lib/mjs/styles.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@import './components/Chat/ChatMessageList.css';
|
|
7
7
|
@import './components/Chat/UserMessage.css';
|
|
8
8
|
@import './components/Chat/AiMessage.css';
|
|
9
|
+
@import './components/Chat/FollowUpRefinement.css';
|
|
9
10
|
@import './components/Chat/TypingIndicator.css';
|
|
10
11
|
@import './components/Chat/ChatInput.css';
|
|
11
12
|
@import './components/ResultsBlock/ResultsBlock.css';
|
|
@@ -16,6 +16,7 @@ const defaultTranslations = {
|
|
|
16
16
|
'CioAsa.results.viewMore': 'View more products',
|
|
17
17
|
'CioAsa.results.addToCart': 'Add to cart',
|
|
18
18
|
'CioAsa.results.saleBadge': 'Sale',
|
|
19
|
+
'CioAsa.refinement.ariaLabel': 'Refine your results',
|
|
19
20
|
'CioAsa.error.message': "I can't assist you with that request.",
|
|
20
21
|
};
|
|
21
22
|
export default function translate(key, translations) {
|
package/lib/mjs/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '1.
|
|
1
|
+
export default '1.5.0';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AiMessageOverrides, ChatMessage, ComponentOverrideProps, ResultGroupMeta, ResultsBlockOverrides, Translations, UserMessageRenderProps } from '../../types';
|
|
2
|
+
import { AiMessageOverrides, AssistantSubmitSource, ChatMessage, ComponentOverrideProps, ResultGroupMeta, ResultsBlockOverrides, Translations, UserMessageRenderProps } from '../../types';
|
|
3
3
|
import { Product, NormalizeOptions } from '../../utils/productNormalizer';
|
|
4
4
|
import { AspectRatio } from '../ResultsBlock/ResultsBlock';
|
|
5
5
|
interface ChatMessageListProps {
|
|
@@ -16,8 +16,12 @@ interface ChatMessageListProps {
|
|
|
16
16
|
userMessageOverrides?: ComponentOverrideProps<UserMessageRenderProps>;
|
|
17
17
|
resultsBlockOverrides?: ResultsBlockOverrides;
|
|
18
18
|
translations?: Translations;
|
|
19
|
+
/** Sends a refinement option as a follow-up message. Chips are hidden when omitted. */
|
|
20
|
+
onSend?: (text: string, source?: AssistantSubmitSource) => void;
|
|
21
|
+
/** Disables refinement chips while a response is streaming. */
|
|
22
|
+
isStreaming?: boolean;
|
|
19
23
|
}
|
|
20
|
-
declare function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, }: ChatMessageListProps): React.JSX.Element;
|
|
24
|
+
declare function ChatMessageList({ messages, onProductClick, onViewMore, onAddToCart, aspectRatio, currency, normalizeItem, addToCartText, viewMoreText, aiMessageOverrides, userMessageOverrides, resultsBlockOverrides, translations, onSend, isStreaming, }: ChatMessageListProps): React.JSX.Element;
|
|
21
25
|
declare namespace ChatMessageList {
|
|
22
26
|
var displayName: string;
|
|
23
27
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComponentOverrideProps, FollowUpRefinement as FollowUpRefinementData, FollowUpRefinementRenderProps, Translations } from '../../types';
|
|
3
|
+
export interface FollowUpRefinementProps {
|
|
4
|
+
refinement: FollowUpRefinementData;
|
|
5
|
+
onOptionClick: (option: string) => void;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
translations?: Translations;
|
|
8
|
+
componentOverrides?: ComponentOverrideProps<FollowUpRefinementRenderProps>;
|
|
9
|
+
}
|
|
10
|
+
declare function FollowUpRefinement({ refinement, onOptionClick, isDisabled, translations, componentOverrides, }: FollowUpRefinementProps): React.JSX.Element;
|
|
11
|
+
declare namespace FollowUpRefinement {
|
|
12
|
+
var displayName: string;
|
|
13
|
+
}
|
|
14
|
+
export default FollowUpRefinement;
|
|
@@ -3,6 +3,7 @@ import { ResultGroupMeta, ChatMessage } from '../types';
|
|
|
3
3
|
export type MessageUpdater = Dispatch<SetStateAction<ChatMessage[]>>;
|
|
4
4
|
export declare function handleSearchResult(data: any, pendingGroup: ResultGroupMeta | null, assistantId: string, setMessages: MessageUpdater): ResultGroupMeta | null;
|
|
5
5
|
export declare function handleMessage(data: any, assistantId: string, setMessages: MessageUpdater): void;
|
|
6
|
+
export declare function handleFollowUpRefinement(data: any, assistantId: string, setMessages: MessageUpdater): void;
|
|
6
7
|
export declare function handleServerError(assistantId: string, setMessages: MessageUpdater): void;
|
|
7
8
|
export declare function handleStreamEnd(assistantId: string, setMessages: MessageUpdater): void;
|
|
8
9
|
export declare function handleStreamError(assistantId: string, setMessages: MessageUpdater): void;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -12,4 +12,4 @@ export type { UseAsaTrackingProps, UseAsaTrackingReturn } from './hooks/useAsaTr
|
|
|
12
12
|
export { normalizeItemToProduct } from './utils/productNormalizer';
|
|
13
13
|
export type { Product, NormalizeOptions } from './utils/productNormalizer';
|
|
14
14
|
export { ConstructorIOClient } from './types';
|
|
15
|
-
export type { Nullable, CioAsaProviderProps, AsaContextValue, CioClientOptions, RequestConfigs, Formatters, UrlHelpers, QueryParamEncodingOptions, DefaultQueryStringMap, Translations, ChatMessage, ChatMessageStatus, ResultGroup, ResultGroupMeta, SearchResultEventRequest, UseAsaResultsOptions, UseChatReturn, AsaCallbacks, AssistantSubmitSource, AssistantTrackedItem, ChatComponentOverrides, WelcomeScreenOverrides, ChatInputOverrides, AiMessageOverrides, ResultsBlockOverrides, ComponentOverrideProps, IncludeComponentOverrides, ChatHeaderRenderProps, ChatInputRenderProps, WelcomeScreenTitleRenderProps, WelcomeScreenInputRenderProps, SuggestedQuestionsRenderProps, UserMessageRenderProps, AiMessageLoaderRenderProps, AiMessageTextRenderProps, ResultsGroupTitleRenderProps, ResultsViewMoreRenderProps, } from './types';
|
|
15
|
+
export type { Nullable, CioAsaProviderProps, AsaContextValue, CioClientOptions, RequestConfigs, Formatters, UrlHelpers, QueryParamEncodingOptions, DefaultQueryStringMap, Translations, ChatMessage, ChatMessageStatus, FollowUpRefinement, ResultGroup, ResultGroupMeta, SearchResultEventRequest, UseAsaResultsOptions, UseChatReturn, AsaCallbacks, AssistantSubmitSource, AssistantTrackedItem, ChatComponentOverrides, WelcomeScreenOverrides, ChatInputOverrides, AiMessageOverrides, ResultsBlockOverrides, ComponentOverrideProps, IncludeComponentOverrides, ChatHeaderRenderProps, ChatInputRenderProps, WelcomeScreenTitleRenderProps, WelcomeScreenInputRenderProps, SuggestedQuestionsRenderProps, UserMessageRenderProps, AiMessageLoaderRenderProps, AiMessageTextRenderProps, FollowUpRefinementRenderProps, ResultsGroupTitleRenderProps, ResultsViewMoreRenderProps, } from './types';
|
package/lib/types/types.d.ts
CHANGED
|
@@ -70,6 +70,13 @@ export interface ChatMessage {
|
|
|
70
70
|
intent?: string;
|
|
71
71
|
intentResultId?: string;
|
|
72
72
|
threadId?: string;
|
|
73
|
+
/** Narrowing question the agent asked at the end of this turn, from a `follow_up_refinement` event. */
|
|
74
|
+
refinement?: FollowUpRefinement;
|
|
75
|
+
}
|
|
76
|
+
/** A narrowing question with selectable options, emitted by the agent as a `follow_up_refinement` event. */
|
|
77
|
+
export interface FollowUpRefinement {
|
|
78
|
+
question: string;
|
|
79
|
+
options: string[];
|
|
73
80
|
}
|
|
74
81
|
export type ChatMessageStatus = 'idle' | 'loading' | 'streaming' | 'done' | 'error';
|
|
75
82
|
/**
|
|
@@ -133,8 +140,8 @@ export interface UseAsaResultsOptions {
|
|
|
133
140
|
/** Seed the thread id (e.g. loaded from browser storage) to resume a prior conversation. Read once on mount. */
|
|
134
141
|
initialThreadId?: string;
|
|
135
142
|
}
|
|
136
|
-
/** How an intent was submitted: typed
|
|
137
|
-
export type AssistantSubmitSource = 'input' | 'suggestion';
|
|
143
|
+
/** How an intent was submitted: typed input, a welcome-screen suggestion chip, or a refinement chip. */
|
|
144
|
+
export type AssistantSubmitSource = 'input' | 'suggestion' | 'refinement';
|
|
138
145
|
/** An item within a viewed/clicked search_result pod. */
|
|
139
146
|
export interface AssistantTrackedItem {
|
|
140
147
|
itemId?: string;
|
|
@@ -147,7 +154,7 @@ export interface AssistantTrackedItem {
|
|
|
147
154
|
* so consumers can mirror ASA analytics into their own systems. All are optional.
|
|
148
155
|
*/
|
|
149
156
|
export interface AsaCallbacks {
|
|
150
|
-
/** User submitted an intent (typed) or clicked a suggestion. */
|
|
157
|
+
/** User submitted an intent (typed) or clicked a suggestion / refinement chip. */
|
|
151
158
|
onAssistantSubmit?: (payload: {
|
|
152
159
|
intent: string;
|
|
153
160
|
source: AssistantSubmitSource;
|
|
@@ -212,6 +219,7 @@ export type Translations = {
|
|
|
212
219
|
'CioAsa.results.viewMore'?: string;
|
|
213
220
|
'CioAsa.results.addToCart'?: string;
|
|
214
221
|
'CioAsa.results.saleBadge'?: string;
|
|
222
|
+
'CioAsa.refinement.ariaLabel'?: string;
|
|
215
223
|
'CioAsa.error.message'?: string;
|
|
216
224
|
};
|
|
217
225
|
export interface ChatHeaderRenderProps {
|
|
@@ -248,6 +256,14 @@ export interface AiMessageLoaderRenderProps {
|
|
|
248
256
|
export interface AiMessageTextRenderProps {
|
|
249
257
|
text: string;
|
|
250
258
|
}
|
|
259
|
+
export interface FollowUpRefinementRenderProps {
|
|
260
|
+
question: string;
|
|
261
|
+
options: string[];
|
|
262
|
+
/** Sends the option as a follow-up message. No-op while `isDisabled`. */
|
|
263
|
+
onOptionClick: (option: string) => void;
|
|
264
|
+
/** True for earlier refinements and while a response is streaming. */
|
|
265
|
+
isDisabled: boolean;
|
|
266
|
+
}
|
|
251
267
|
export interface ResultsGroupTitleRenderProps {
|
|
252
268
|
label: string;
|
|
253
269
|
}
|
|
@@ -266,6 +282,7 @@ export interface ChatInputOverrides {
|
|
|
266
282
|
export interface AiMessageOverrides {
|
|
267
283
|
loader?: ComponentOverrideProps<AiMessageLoaderRenderProps>;
|
|
268
284
|
text?: ComponentOverrideProps<AiMessageTextRenderProps>;
|
|
285
|
+
followUpRefinement?: ComponentOverrideProps<FollowUpRefinementRenderProps>;
|
|
269
286
|
}
|
|
270
287
|
export interface ResultsBlockOverrides {
|
|
271
288
|
groupTitle?: ComponentOverrideProps<ResultsGroupTitleRenderProps>;
|
package/lib/types/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.
|
|
1
|
+
declare const _default: "1.5.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.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Constructor.io AI Shopping Agent UI library for web applications",
|
|
5
5
|
"author": "constructor.io",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"prepare": "husky install"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
|
-
"@constructor-io/constructorio-client-javascript": "^2.
|
|
72
|
+
"@constructor-io/constructorio-client-javascript": "^2.93.1",
|
|
73
73
|
"@constructor-io/constructorio-ui-components": "^1.6.0",
|
|
74
74
|
"react": ">=16.12.0",
|
|
75
75
|
"react-dom": ">=16.12.0",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"@babel/preset-env": "^7.28.3",
|
|
80
80
|
"@babel/preset-react": "^7.27.1",
|
|
81
81
|
"@babel/preset-typescript": "^7.27.1",
|
|
82
|
-
"@constructor-io/constructorio-client-javascript": "
|
|
82
|
+
"@constructor-io/constructorio-client-javascript": "2.93.1",
|
|
83
83
|
"@constructor-io/constructorio-ui-components": "^1.6.0",
|
|
84
84
|
"@cspell/eslint-plugin": "^6.18.1",
|
|
85
85
|
"@storybook/addon-a11y": "^8.6.14",
|