@nickle/chatbot-react 0.1.0 → 0.1.2

package/dist/styles.css

@@ -1 +1 @@
-.cb-pointer-events-none{pointer-events:none}.cb-pointer-events-auto{pointer-events:auto}.cb-fixed{position:fixed}.cb-absolute{position:absolute}.cb-relative{position:relative}.cb-bottom-4{bottom:1rem}.cb-bottom-6{bottom:1.5rem}.cb-left-4{left:1rem}.cb-left-6{left:1.5rem}.cb-right-0{right:0}.cb-right-4{right:1rem}.cb-right-6{right:1.5rem}.cb-top-full{top:100%}.cb-z-10{z-index:10}.cb-z-20{z-index:20}.cb-z-\[2147483640\]{z-index:2147483640}.cb-m-0{margin:0}.cb-mb-2{margin-bottom:.5rem}.cb-mt-1{margin-top:.25rem}.cb-mt-2{margin-top:.5rem}.cb-flex{display:flex}.cb-inline-flex{display:inline-flex}.cb-hidden{display:none}.cb-h-1\.5{height:.375rem}.cb-h-10{height:2.5rem}.cb-h-14{height:3.5rem}.cb-h-6{height:1.5rem}.cb-h-9{height:2.25rem}.cb-h-\[min\(680px\,calc\(100vh-7\.5rem\)\)\]{height:min(680px,calc(100vh - 7.5rem))}.cb-max-h-none{max-height:none}.cb-min-h-\[38px\]{min-height:38px}.cb-w-1\.5{width:.375rem}.cb-w-10{width:2.5rem}.cb-w-14{width:3.5rem}.cb-w-6{width:1.5rem}.cb-w-9{width:2.25rem}.cb-w-\[min\(92vw\,420px\)\]{width:min(92vw,420px)}.cb-w-full{width:100%}.cb-min-w-0{min-width:0}.cb-min-w-\[220px\]{min-width:220px}.cb-max-w-\[140px\]{max-width:140px}.cb-max-w-\[85\%\]{max-width:85%}.cb-max-w-none{max-width:none}.cb-flex-1{flex:1 1 0%}.cb-shrink-0{flex-shrink:0}.cb-origin-bottom-left{transform-origin:bottom left}.cb-origin-bottom-right{transform-origin:bottom right}.cb-translate-y-0{--tw-translate-y:0px}.cb-translate-y-0,.cb-translate-y-3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-translate-y-3{--tw-translate-y:0.75rem}.-cb-rotate-90{--tw-rotate:-90deg}.-cb-rotate-90,.cb-rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-rotate-0{--tw-rotate:0deg}.cb-rotate-90{--tw-rotate:90deg}.cb-rotate-90,.cb-scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-scale-100{--tw-scale-x:1;--tw-scale-y:1}.cb-scale-90{--tw-scale-x:.9;--tw-scale-y:.9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-resize-none{resize:none}.cb-flex-col{flex-direction:column}.cb-flex-wrap{flex-wrap:wrap}.cb-items-start{align-items:flex-start}.cb-items-end{align-items:flex-end}.cb-items-center{align-items:center}.cb-justify-start{justify-content:flex-start}.cb-justify-end{justify-content:flex-end}.cb-justify-center{justify-content:center}.cb-justify-between{justify-content:space-between}.cb-gap-1{gap:.25rem}.cb-gap-2{gap:.5rem}.cb-gap-2\.5{gap:.625rem}.cb-gap-3{gap:.75rem}.cb-space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.cb-space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.875rem*var(--tw-space-y-reverse))}.cb-self-center{align-self:center}.cb-overflow-hidden{overflow:hidden}.cb-overflow-y-auto{overflow-y:auto}.cb-scroll-smooth{scroll-behavior:smooth}.cb-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-whitespace-pre-wrap{white-space:pre-wrap}.cb-rounded-2xl{border-radius:1rem}.cb-rounded-\[var\(--cb-radius\)\]{border-radius:var(--cb-radius)}.cb-rounded-full{border-radius:9999px}.cb-rounded-lg{border-radius:.5rem}.cb-rounded-xl{border-radius:.75rem}.cb-rounded-bl-md{border-bottom-left-radius:.375rem}.cb-rounded-br-md{border-bottom-right-radius:.375rem}.cb-border{border-width:1px}.cb-border-b{border-bottom-width:1px}.cb-border-\[var\(--cb-border\)\]{border-color:var(--cb-border)}.cb-bg-\[\#111111\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.cb-bg-\[var\(--cb-assistant-bubble\)\]{background-color:var(--cb-assistant-bubble)}.cb-bg-\[var\(--cb-background\)\]{background-color:var(--cb-background)}.cb-bg-\[var\(--cb-muted\)\]{background-color:var(--cb-muted)}.cb-bg-\[var\(--cb-muted-foreground\)\]{background-color:var(--cb-muted-foreground)}.cb-bg-\[var\(--cb-surface\)\]{background-color:var(--cb-surface)}.cb-bg-\[var\(--cb-user-bubble\)\]{background-color:var(--cb-user-bubble)}.cb-bg-black\/10{background-color:rgba(0,0,0,.1)}.cb-bg-transparent{background-color:transparent}.cb-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.cb-fill-current{fill:currentColor}.cb-p-0{padding:0}.cb-p-1\.5{padding:.375rem}.cb-p-2{padding:.5rem}.cb-p-3{padding:.75rem}.cb-px-1{padding-left:.25rem;padding-right:.25rem}.cb-px-2{padding-left:.5rem;padding-right:.5rem}.cb-px-3{padding-left:.75rem;padding-right:.75rem}.cb-px-3\.5{padding-left:.875rem;padding-right:.875rem}.cb-px-4{padding-left:1rem;padding-right:1rem}.cb-py-1{padding-top:.25rem;padding-bottom:.25rem}.cb-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.cb-py-2{padding-top:.5rem;padding-bottom:.5rem}.cb-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.cb-py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.cb-pb-36{padding-bottom:9rem}.cb-pt-4{padding-top:1rem}.cb-text-left{text-align:left}.cb-text-center{text-align:center}.cb-text-base{font-size:1rem;line-height:1.5rem}.cb-text-lg{font-size:1.125rem;line-height:1.75rem}.cb-text-sm{font-size:.875rem;line-height:1.25rem}.cb-text-xs{font-size:.75rem;line-height:1rem}.cb-font-semibold{font-weight:600}.cb-leading-4{line-height:1rem}.cb-leading-5{line-height:1.25rem}.cb-leading-6{line-height:1.5rem}.cb-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.cb-text-\[\#f5f5f5\]{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.cb-text-\[var\(--cb-assistant-text\)\]{color:var(--cb-assistant-text)}.cb-text-\[var\(--cb-muted-foreground\)\]{color:var(--cb-muted-foreground)}.cb-text-\[var\(--cb-surface-foreground\)\]{color:var(--cb-surface-foreground)}.cb-text-\[var\(--cb-user-text\)\]{color:var(--cb-user-text)}.cb-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.cb-opacity-0{opacity:0}.cb-opacity-100{opacity:1}.cb-opacity-70{opacity:.7}.cb-shadow-\[0_18px_35px_-24px_rgba\(0\,0\,0\,0\.85\)\]{--tw-shadow:0 18px 35px -24px rgba(0,0,0,.85);--tw-shadow-colored:0 18px 35px -24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.cb-shadow-\[var\(--cb-shadow-bubble\)\]{--tw-shadow-color:var(--cb-shadow-bubble);--tw-shadow:var(--tw-shadow-colored)}.cb-shadow-\[var\(--cb-shadow-panel\)\]{--tw-shadow-color:var(--cb-shadow-panel);--tw-shadow:var(--tw-shadow-colored)}.cb-outline-none{outline:2px solid transparent;outline-offset:2px}.cb-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cb-transition-\[opacity\,transform\,width\,height\,top\,left\,right\,bottom\]{transition-property:opacity,transform,width,height,top,left,right,bottom;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cb-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cb-duration-200{transition-duration:.2s}.cb-duration-300{transition-duration:.3s}.cb-duration-\[380ms\]{transition-duration:.38s}.cb-ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\]{transition-timing-function:cubic-bezier(.22,1,.36,1)}.cb-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[animation-delay\:-0\.1s\]{animation-delay:-.1s}.\[animation-delay\:-0\.2s\]{animation-delay:-.2s}[data-chatbot-root]{font-family:var(--cb-font-family)}[data-chatbot-root] *{box-sizing:border-box}[data-chatbot-root] button,[data-chatbot-root] input,[data-chatbot-root] select,[data-chatbot-root] textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;box-shadow:none;font:inherit}[data-chatbot-root] input,[data-chatbot-root] select,[data-chatbot-root] textarea{background:none;color:inherit}[data-chatbot-root] button{cursor:pointer;pointer-events:auto}[data-chatbot-root] button:disabled{cursor:not-allowed}[data-chatbot-root] textarea::-moz-placeholder{color:var(--cb-muted-foreground);opacity:1;font:inherit}[data-chatbot-root] textarea::placeholder{color:var(--cb-muted-foreground);opacity:1;font:inherit}.cb-message-text{word-break:normal;overflow-wrap:break-word;hyphens:auto}.cb-message-text code,.cb-message-text pre{word-break:normal;overflow-wrap:normal;hyphens:manual}.cb-composer-input{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cb-border) 85%,#000 15%) transparent}.cb-composer-input::-webkit-scrollbar{width:10px}.cb-composer-input::-webkit-scrollbar-track{background:transparent}.cb-composer-input::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cb-border) 85%,#000 15%);border:2px solid transparent;background-clip:content-box;border-radius:999px}.cb-composer-input::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cb-muted-foreground) 65%,#000 35%)}.cb-chat-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cb-border) 85%,#000 15%) transparent;scrollbar-gutter:stable}.cb-chat-scroll::-webkit-scrollbar{width:10px}.cb-chat-scroll::-webkit-scrollbar-track{background:transparent}.cb-chat-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cb-border) 85%,#000 15%);border:3px solid transparent;background-clip:content-box;border-radius:999px}.cb-chat-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cb-muted-foreground) 65%,#000 35%)}.cb-markdown blockquote,.cb-markdown ol,.cb-markdown p,.cb-markdown pre,.cb-markdown table,.cb-markdown ul{margin:.2rem 0}.cb-markdown h1,.cb-markdown h2,.cb-markdown h3,.cb-markdown h4,.cb-markdown h5,.cb-markdown h6{font-weight:600;margin:.3rem 0;line-height:1.35}.cb-markdown>:first-child{margin-top:0}.cb-markdown>:last-child{margin-bottom:0}.cb-markdown h1{font-size:1.1rem}.cb-markdown h2{font-size:1rem}.cb-markdown h3,.cb-markdown h4,.cb-markdown h5,.cb-markdown h6{font-size:.95rem}.cb-markdown ol,.cb-markdown ul{padding-left:1.2rem}.cb-markdown a{text-decoration:underline;color:var(--cb-primary)}.cb-markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;background-color:color-mix(in srgb,var(--cb-muted) 70%,transparent);border-radius:.35rem;padding:.1rem .3rem;font-size:.85em}.cb-markdown pre{overflow-x:auto;border-radius:.8rem;border:1px solid var(--cb-border);background:color-mix(in srgb,var(--cb-muted) 60%,transparent);padding:.65rem .75rem}.cb-markdown pre code{background:transparent;padding:0}.cb-markdown blockquote{border-left:2px solid var(--cb-border);padding-left:.75rem;color:var(--cb-muted-foreground)}.cb-markdown table{width:100%;border-collapse:collapse;font-size:.875rem}.cb-markdown td,.cb-markdown th{border:1px solid var(--cb-border);padding:.35rem .45rem;text-align:left}@keyframes cb-slide-fade-in-left{0%{opacity:0;transform:translate3d(-14px,8px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes cb-slide-fade-in-right{0%{opacity:0;transform:translate3d(14px,8px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes cb-dots{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-2px);opacity:.9}}.cb-animate-cb-slide-fade-in-left{animation:cb-slide-fade-in-left .3s cubic-bezier(.22,1,.36,1)}.cb-animate-cb-slide-fade-in-right{animation:cb-slide-fade-in-right .3s cubic-bezier(.22,1,.36,1)}.cb-animate-cb-dots{animation:cb-dots 1s ease-in-out infinite}@media (prefers-reduced-motion:reduce){[data-chatbot-root] *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.placeholder\:cb-text-\[var\(--cb-muted-foreground\)\]::-moz-placeholder{color:var(--cb-muted-foreground)}.placeholder\:cb-text-\[var\(--cb-muted-foreground\)\]::placeholder{color:var(--cb-muted-foreground)}.hover\:cb-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:cb-scale-105:hover,.hover\:cb-scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:cb-scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:cb-bg-\[\#262626\]:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:cb-bg-\[var\(--cb-muted\)\]:hover{background-color:var(--cb-muted)}.hover\:cb-text-\[\#111111\]:hover{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.hover\:cb-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:cb-shadow-\[0_24px_50px_-18px_rgba\(0\2c 0\2c 0\2c 0\.9\)\]:hover{--tw-shadow:0 24px 50px -18px rgba(0,0,0,.9);--tw-shadow-colored:0 24px 50px -18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:cb-brightness-95:hover{--tw-brightness:brightness(.95);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\:cb-bg-\[var\(--cb-muted\)\]:focus-visible{background-color:var(--cb-muted)}.focus-visible\:cb-text-\[\#111111\]:focus-visible{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.focus-visible\:cb-text-white:focus-visible{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.active\:cb-scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cb-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:cb-bg-white\/70:disabled{background-color:hsla(0,0%,100%,.7)}.disabled\:cb-text-\[\#111111\]:disabled{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.disabled\:cb-opacity-100:disabled{opacity:1}
+.cb-pointer-events-none{pointer-events:none}.cb-pointer-events-auto{pointer-events:auto}.cb-fixed{position:fixed}.cb-absolute{position:absolute}.cb-relative{position:relative}.cb-bottom-4{bottom:1rem}.cb-bottom-6{bottom:1.5rem}.cb-left-4{left:1rem}.cb-left-6{left:1.5rem}.cb-right-0{right:0}.cb-right-4{right:1rem}.cb-right-6{right:1.5rem}.cb-top-full{top:100%}.cb-z-10{z-index:10}.cb-z-20{z-index:20}.cb-z-\[2147483640\]{z-index:2147483640}.cb-m-0{margin:0}.cb-mb-2{margin-bottom:.5rem}.cb-mt-1{margin-top:.25rem}.cb-mt-2{margin-top:.5rem}.cb-flex{display:flex}.cb-inline-flex{display:inline-flex}.cb-hidden{display:none}.cb-h-1\.5{height:.375rem}.cb-h-10{height:2.5rem}.cb-h-14{height:3.5rem}.cb-h-6{height:1.5rem}.cb-h-9{height:2.25rem}.cb-h-\[min\(680px\,calc\(100vh-7\.5rem\)\)\]{height:min(680px,calc(100vh - 7.5rem))}.cb-max-h-none{max-height:none}.cb-min-h-\[38px\]{min-height:38px}.cb-w-1\.5{width:.375rem}.cb-w-10{width:2.5rem}.cb-w-14{width:3.5rem}.cb-w-6{width:1.5rem}.cb-w-9{width:2.25rem}.cb-w-\[min\(92vw\,420px\)\]{width:min(92vw,420px)}.cb-w-full{width:100%}.cb-min-w-0{min-width:0}.cb-min-w-\[220px\]{min-width:220px}.cb-max-w-\[140px\]{max-width:140px}.cb-max-w-\[85\%\]{max-width:85%}.cb-max-w-none{max-width:none}.cb-flex-1{flex:1 1 0%}.cb-shrink-0{flex-shrink:0}.cb-origin-bottom-left{transform-origin:bottom left}.cb-origin-bottom-right{transform-origin:bottom right}.-cb-rotate-90{--tw-rotate:-90deg}.-cb-rotate-90,.cb-rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-rotate-0{--tw-rotate:0deg}.cb-rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cb-resize-none{resize:none}.cb-flex-col{flex-direction:column}.cb-flex-wrap{flex-wrap:wrap}.cb-items-start{align-items:flex-start}.cb-items-end{align-items:flex-end}.cb-items-center{align-items:center}.cb-justify-start{justify-content:flex-start}.cb-justify-end{justify-content:flex-end}.cb-justify-center{justify-content:center}.cb-justify-between{justify-content:space-between}.cb-gap-1{gap:.25rem}.cb-gap-2{gap:.5rem}.cb-gap-2\.5{gap:.625rem}.cb-gap-3{gap:.75rem}.cb-space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.cb-space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.875rem*var(--tw-space-y-reverse))}.cb-self-center{align-self:center}.cb-overflow-hidden{overflow:hidden}.cb-overflow-y-auto{overflow-y:auto}.cb-scroll-smooth{scroll-behavior:smooth}.cb-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-whitespace-pre-wrap{white-space:pre-wrap}.cb-rounded-2xl{border-radius:1rem}.cb-rounded-\[var\(--cb-radius\)\]{border-radius:var(--cb-radius)}.cb-rounded-full{border-radius:9999px}.cb-rounded-lg{border-radius:.5rem}.cb-rounded-xl{border-radius:.75rem}.cb-rounded-bl-md{border-bottom-left-radius:.375rem}.cb-rounded-br-md{border-bottom-right-radius:.375rem}.cb-border{border-width:1px}.cb-border-b{border-bottom-width:1px}.cb-border-\[var\(--cb-border\)\]{border-color:var(--cb-border)}.cb-bg-\[\#111111\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.cb-bg-\[var\(--cb-assistant-bubble\)\]{background-color:var(--cb-assistant-bubble)}.cb-bg-\[var\(--cb-background\)\]{background-color:var(--cb-background)}.cb-bg-\[var\(--cb-muted\)\]{background-color:var(--cb-muted)}.cb-bg-\[var\(--cb-muted-foreground\)\]{background-color:var(--cb-muted-foreground)}.cb-bg-\[var\(--cb-surface\)\]{background-color:var(--cb-surface)}.cb-bg-\[var\(--cb-user-bubble\)\]{background-color:var(--cb-user-bubble)}.cb-bg-black\/10{background-color:rgba(0,0,0,.1)}.cb-bg-transparent{background-color:transparent}.cb-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.cb-fill-current{fill:currentColor}.cb-p-0{padding:0}.cb-p-1\.5{padding:.375rem}.cb-p-2{padding:.5rem}.cb-p-3{padding:.75rem}.cb-px-1{padding-left:.25rem;padding-right:.25rem}.cb-px-2{padding-left:.5rem;padding-right:.5rem}.cb-px-3{padding-left:.75rem;padding-right:.75rem}.cb-px-3\.5{padding-left:.875rem;padding-right:.875rem}.cb-px-4{padding-left:1rem;padding-right:1rem}.cb-py-1{padding-top:.25rem;padding-bottom:.25rem}.cb-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.cb-py-2{padding-top:.5rem;padding-bottom:.5rem}.cb-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.cb-py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.cb-pb-36{padding-bottom:9rem}.cb-pt-4{padding-top:1rem}.cb-text-left{text-align:left}.cb-text-center{text-align:center}.cb-text-base{font-size:1rem;line-height:1.5rem}.cb-text-lg{font-size:1.125rem;line-height:1.75rem}.cb-text-sm{font-size:.875rem;line-height:1.25rem}.cb-text-xs{font-size:.75rem;line-height:1rem}.cb-font-semibold{font-weight:600}.cb-leading-4{line-height:1rem}.cb-leading-5{line-height:1.25rem}.cb-leading-6{line-height:1.5rem}.cb-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.cb-text-\[\#f5f5f5\]{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.cb-text-\[var\(--cb-assistant-text\)\]{color:var(--cb-assistant-text)}.cb-text-\[var\(--cb-muted-foreground\)\]{color:var(--cb-muted-foreground)}.cb-text-\[var\(--cb-surface-foreground\)\]{color:var(--cb-surface-foreground)}.cb-text-\[var\(--cb-user-text\)\]{color:var(--cb-user-text)}.cb-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.cb-opacity-0{opacity:0}.cb-opacity-100{opacity:1}.cb-opacity-70{opacity:.7}.cb-shadow-\[0_18px_35px_-24px_rgba\(0\,0\,0\,0\.85\)\]{--tw-shadow:0 18px 35px -24px rgba(0,0,0,.85);--tw-shadow-colored:0 18px 35px -24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.cb-shadow-\[var\(--cb-shadow-bubble\)\]{--tw-shadow-color:var(--cb-shadow-bubble);--tw-shadow:var(--tw-shadow-colored)}.cb-shadow-\[var\(--cb-shadow-panel\)\]{--tw-shadow-color:var(--cb-shadow-panel);--tw-shadow:var(--tw-shadow-colored)}.cb-outline-none{outline:2px solid transparent;outline-offset:2px}.cb-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.cb-duration-200{transition-duration:.2s}.cb-duration-300{transition-duration:.3s}.\[animation-delay\:-0\.1s\]{animation-delay:-.1s}.\[animation-delay\:-0\.2s\]{animation-delay:-.2s}[data-chatbot-root]{font-family:var(--cb-font-family)}[data-chatbot-root] *{box-sizing:border-box}[data-chatbot-root] button,[data-chatbot-root] input,[data-chatbot-root] select,[data-chatbot-root] textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;box-shadow:none;font:inherit}[data-chatbot-root] input,[data-chatbot-root] select,[data-chatbot-root] textarea{background:none;color:inherit}[data-chatbot-root] button{cursor:pointer;pointer-events:auto}[data-chatbot-root] button:disabled{cursor:not-allowed}[data-chatbot-root] textarea::-moz-placeholder{color:var(--cb-muted-foreground);opacity:1;font:inherit}[data-chatbot-root] textarea::placeholder{color:var(--cb-muted-foreground);opacity:1;font:inherit}.cb-message-text{word-break:normal;overflow-wrap:break-word;hyphens:auto}.cb-message-text code,.cb-message-text pre{word-break:normal;overflow-wrap:normal;hyphens:manual}.cb-composer-input{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cb-border) 85%,#000 15%) transparent}.cb-composer-input::-webkit-scrollbar{width:10px}.cb-composer-input::-webkit-scrollbar-track{background:transparent}.cb-composer-input::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cb-border) 85%,#000 15%);border:2px solid transparent;background-clip:content-box;border-radius:999px}.cb-composer-input::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cb-muted-foreground) 65%,#000 35%)}.cb-chat-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cb-border) 85%,#000 15%) transparent;scrollbar-gutter:stable}.cb-chat-scroll::-webkit-scrollbar{width:10px}.cb-chat-scroll::-webkit-scrollbar-track{background:transparent}.cb-chat-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cb-border) 85%,#000 15%);border:3px solid transparent;background-clip:content-box;border-radius:999px}.cb-chat-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cb-muted-foreground) 65%,#000 35%)}.cb-markdown blockquote,.cb-markdown ol,.cb-markdown p,.cb-markdown pre,.cb-markdown table,.cb-markdown ul{margin:.2rem 0}.cb-markdown h1,.cb-markdown h2,.cb-markdown h3,.cb-markdown h4,.cb-markdown h5,.cb-markdown h6{font-weight:600;margin:.3rem 0;line-height:1.35}.cb-markdown>:first-child{margin-top:0}.cb-markdown>:last-child{margin-bottom:0}.cb-markdown h1{font-size:1.1rem}.cb-markdown h2{font-size:1rem}.cb-markdown h3,.cb-markdown h4,.cb-markdown h5,.cb-markdown h6{font-size:.95rem}.cb-markdown ol,.cb-markdown ul{padding-left:1.2rem}.cb-markdown a{text-decoration:underline;color:var(--cb-primary)}.cb-markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;background-color:color-mix(in srgb,var(--cb-muted) 70%,transparent);border-radius:.35rem;padding:.1rem .3rem;font-size:.85em}.cb-markdown pre{overflow-x:auto;border-radius:.8rem;border:1px solid var(--cb-border);background:color-mix(in srgb,var(--cb-muted) 60%,transparent);padding:.65rem .75rem}.cb-markdown pre code{background:transparent;padding:0}.cb-markdown blockquote{border-left:2px solid var(--cb-border);padding-left:.75rem;color:var(--cb-muted-foreground)}.cb-markdown table{width:100%;border-collapse:collapse;font-size:.875rem}.cb-markdown td,.cb-markdown th{border:1px solid var(--cb-border);padding:.35rem .45rem;text-align:left}@keyframes cb-slide-fade-in-left{0%{opacity:0;transform:translate3d(-14px,8px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes cb-slide-fade-in-right{0%{opacity:0;transform:translate3d(14px,8px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes cb-dots{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-2px);opacity:.9}}.cb-animate-cb-slide-fade-in-left{animation:cb-slide-fade-in-left .3s cubic-bezier(.22,1,.36,1)}.cb-animate-cb-slide-fade-in-right{animation:cb-slide-fade-in-right .3s cubic-bezier(.22,1,.36,1)}.cb-animate-cb-dots{animation:cb-dots 1s ease-in-out infinite}.cb-panel-transition{transition-property:opacity,transform,width,height,top,left,right,bottom;transition-duration:.38s;transition-timing-function:cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.cb-panel-open{opacity:1;transform:translateZ(0) scale(1)}.cb-panel-closed{opacity:0;transform:translate3d(0,12px,0) scale(.9)}.cb-launcher-icon-transition{transition-property:transform,opacity;transition-duration:.3s;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){[data-chatbot-root] *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.placeholder\:cb-text-\[var\(--cb-muted-foreground\)\]::-moz-placeholder{color:var(--cb-muted-foreground)}.placeholder\:cb-text-\[var\(--cb-muted-foreground\)\]::placeholder{color:var(--cb-muted-foreground)}.hover\:cb-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:cb-scale-105:hover,.hover\:cb-scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:cb-scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:cb-bg-\[\#262626\]:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:cb-bg-\[var\(--cb-muted\)\]:hover{background-color:var(--cb-muted)}.hover\:cb-text-\[\#111111\]:hover{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.hover\:cb-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:cb-shadow-\[0_24px_50px_-18px_rgba\(0\2c 0\2c 0\2c 0\.9\)\]:hover{--tw-shadow:0 24px 50px -18px rgba(0,0,0,.9);--tw-shadow-colored:0 24px 50px -18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:cb-brightness-95:hover{--tw-brightness:brightness(.95);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\:cb-bg-\[var\(--cb-muted\)\]:focus-visible{background-color:var(--cb-muted)}.focus-visible\:cb-text-\[\#111111\]:focus-visible{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.focus-visible\:cb-text-white:focus-visible{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.active\:cb-scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cb-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:cb-bg-white\/70:disabled{background-color:hsla(0,0%,100%,.7)}.disabled\:cb-text-\[\#111111\]:disabled{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.disabled\:cb-opacity-100:disabled{opacity:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nickle/chatbot-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "description": "Customizable chatbot bubble + widget for React websites",
   "license": "MIT",
@@ -54,5 +54,4 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   }
-}
-
+}

package/src/chatbot/components/chatbot-widget.tsx

@@ -450,12 +450,10 @@ export function ChatbotWidget() {
         <div
           ref={panelRef}
           className={clsx(
-            "cb-pointer-events-auto cb-flex cb-flex-col cb-overflow-hidden cb-rounded-[var(--cb-radius)] cb-border cb-border-[var(--cb-border)] cb-bg-[var(--cb-surface)] cb-shadow-[var(--cb-shadow-panel)] cb-transition-[opacity,transform,width,height,top,left,right,bottom] cb-duration-[380ms] cb-ease-[cubic-bezier(0.22,1,0.36,1)]",
+            "cb-panel-transition cb-pointer-events-auto cb-flex cb-flex-col cb-overflow-hidden cb-rounded-[var(--cb-radius)] cb-border cb-border-[var(--cb-border)] cb-bg-[var(--cb-surface)] cb-shadow-[var(--cb-shadow-panel)]",
             panelOrigin,
             panelSize.className,
-            isOpen
-              ? "cb-translate-y-0 cb-scale-100 cb-opacity-100"
-              : "cb-translate-y-3 cb-scale-90 cb-opacity-0 cb-pointer-events-none",
+            isOpen ? "cb-panel-open" : "cb-panel-closed cb-pointer-events-none",
             classNames.panel,
           )}
           style={panelSize.style}
@@ -720,14 +718,14 @@ export function ChatbotWidget() {
             <LauncherClosedIcon
               size={22}
               className={clsx(
-                "cb-absolute cb-fill-current cb-transition-all cb-duration-300 cb-ease-out",
+                "cb-launcher-icon-transition cb-absolute cb-fill-current",
                 isOpen ? "cb-rotate-90 cb-opacity-0" : "cb-rotate-0 cb-opacity-100",
               )}
             />
             <LauncherOpenIcon
               size={22}
               className={clsx(
-                "cb-absolute cb-transition-all cb-duration-300 cb-ease-out",
+                "cb-launcher-icon-transition cb-absolute",
                 isOpen ? "cb-rotate-0 cb-opacity-100" : "-cb-rotate-90 cb-opacity-0",
               )}
             />

package/src/chatbot/lib/theme.ts

@@ -1,56 +1,11 @@
 import { DEFAULT_THEME } from "./defaults";
 import type { ChatbotThemeTokens } from "../types";
 
-const HOST_TOKEN_MAP: Record<keyof ChatbotThemeTokens, string[]> = {
-  primary: ["--color-primary", "--primary"],
-  primaryForeground: ["--color-primary-foreground", "--primary-foreground"],
-  background: ["--cb-background", "--color-background", "--color-bg", "--background"],
-  surface: ["--cb-surface", "--color-surface", "--color-card", "--card"],
-  surfaceForeground: ["--cb-surface-foreground", "--color-text", "--color-foreground", "--foreground"],
-  muted: ["--color-muted", "--muted"],
-  mutedForeground: ["--color-muted-foreground", "--muted-foreground"],
-  border: ["--color-border", "--border"],
-  ring: ["--color-ring", "--ring"],
-  userBubble: ["--cb-user-bubble"],
-  userText: ["--cb-user-text"],
-  assistantBubble: ["--cb-assistant-bubble", "--color-muted", "--muted"],
-  assistantText: ["--cb-assistant-text", "--color-text", "--foreground"],
-  radius: ["--radius-md", "--radius", "--rounded"],
-  fontFamily: ["--font-sans", "--font-family"],
-  shadowBubble: ["--shadow-bubble"],
-  shadowPanel: ["--shadow-panel"],
-};
-
-function readRootVar(name: string): string | undefined {
-  if (typeof window === "undefined") {
-    return undefined;
-  }
-
-  const styles = getComputedStyle(document.documentElement);
-  const value = styles.getPropertyValue(name).trim();
-  return value || undefined;
-}
-
 export function resolveThemeTokens(explicit?: Partial<ChatbotThemeTokens>): ChatbotThemeTokens {
-  const resolved = { ...DEFAULT_THEME };
-
-  (Object.keys(DEFAULT_THEME) as Array<keyof ChatbotThemeTokens>).forEach((key) => {
-    if (explicit?.[key]) {
-      resolved[key] = explicit[key] as string;
-      return;
-    }
-
-    const hostCandidates = HOST_TOKEN_MAP[key] ?? [];
-    for (const candidate of hostCandidates) {
-      const value = readRootVar(candidate);
-      if (value) {
-        resolved[key] = value;
-        break;
-      }
-    }
-  });
-
-  return resolved;
+  return {
+    ...DEFAULT_THEME,
+    ...(explicit ?? {}),
+  };
 }
 
 export function toThemeCssVars(tokens: ChatbotThemeTokens): Record<string, string> {

package/src/styles.css

@@ -247,6 +247,29 @@
   animation: cb-dots 1s infinite ease-in-out;
 }
 
+.cb-panel-transition {
+  transition-property: opacity, transform, width, height, top, left, right, bottom;
+  transition-duration: 380ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.cb-panel-open {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.cb-panel-closed {
+  opacity: 0;
+  transform: translate3d(0, 12px, 0) scale(0.9);
+}
+
+.cb-launcher-icon-transition {
+  transition-property: transform, opacity;
+  transition-duration: 300ms;
+  transition-timing-function: ease-out;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-chatbot-root] * {
     animation-duration: 0.01ms !important;