@dmanikanta17/chat-ui 0.1.18 → 0.1.22
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 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +18 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +18 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -107,6 +107,7 @@ These options work for both the **React Component props** and the **HTML Widget
|
|
|
107
107
|
| `logoSrc` | `string` | `Default Logo` | URL for the chatbot avatar. |
|
|
108
108
|
| `soundSrc` | `string` | `Default Sound` | URL for the notification sound. |
|
|
109
109
|
| `theme` | `"light" \| "dark"` | `"light"` | Color theme of the interface. |
|
|
110
|
+
| `position` | `"right" \| "left"` | `"right"` | Position of the chat widget on screen. |
|
|
110
111
|
| `footerText` | `ReactNode` | `Default Footer` | Text to display in the footer. |
|
|
111
112
|
|
|
112
113
|
### React Example with Full Customization
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
#chat-ui-scope{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;color:var(--foreground);-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;color-scheme:light;--chat-background:0 0% 100%;--chat-foreground:222.2 84% 4.9%;--chat-card:0 0% 100%;--chat-card-foreground:222.2 84% 4.9%;--chat-popover:0 0% 100%;--chat-popover-foreground:222.2 84% 4.9%;--chat-primary:221.2 83.2% 53.3%;--chat-primary-foreground:210 40% 98%;--chat-secondary:210 40% 96.1%;--chat-secondary-foreground:222.2 47.4% 11.2%;--chat-muted:210 40% 96.1%;--chat-muted-foreground:215.4 16.3% 46.9%;--chat-accent:210 40% 96.1%;--chat-accent-foreground:222.2 47.4% 11.2%;--chat-destructive:0 84.2% 60.2%;--chat-destructive-foreground:210 40% 98%;--chat-border:214.3 31.8% 91.4%;--chat-input:214.3 31.8% 91.4%;--chat-ring:222.2 84% 4.9%;--radius:0.5rem;--radix-accordion-content-height:0;--shining-base:hsl(var(--chat-muted-foreground));--shining-highlight:hsl(var(--chat-foreground))}#chat-ui-scope.dark{--chat-background:0 0% 0%;--chat-foreground:0 0% 100%;--chat-card:0 0% 0%;--chat-card-foreground:0 0% 100%;--chat-popover:0 0% 0%;--chat-popover-foreground:0 0% 100%;--chat-primary:221.2 83.2% 53.3%;--chat-primary-foreground:210 40% 98%;--chat-secondary:217.2 32.6% 17.5%;--chat-secondary-foreground:210 40% 98%;--chat-muted:217.2 32.6% 17.5%;--chat-muted-foreground:215 20.2% 65.1%;--chat-accent:217.2 32.6% 17.5%;--chat-accent-foreground:210 40% 98%;--chat-destructive:0 62.8% 30.6%;--chat-destructive-foreground:210 40% 98%;--chat-border:217.2 32.6% 17.5%;--chat-input:217.2 32.6% 17.5%;--chat-ring:212.7 26.8% 83.9%}#chat-ui-scope :where(h1,h2,h3,h4,h5,h6,p,span,div,a,button,input,textarea,select){color:inherit}#chat-ui-scope{color:hsl(var(--chat-foreground))!important}#chat-ui-scope *{border-color:hsl(var(--chat-border)/1)}#chat-ui-scope .prose{--tw-prose-body:var(--foreground);--tw-prose-headings:var(--foreground);--tw-prose-lead:var(--muted-foreground);--tw-prose-links:var(--primary);--tw-prose-bold:var(--foreground);--tw-prose-counters:var(--muted-foreground);--tw-prose-bullets:var(--muted-foreground);--tw-prose-hr:var(--border);--tw-prose-quotes:var(--foreground);--tw-prose-quote-borders:var(--border);--tw-prose-captions:var(--muted-foreground);--tw-prose-code:var(--foreground);--tw-prose-pre-code:var(--foreground);--tw-prose-pre-bg:var(--muted);--tw-prose-th-borders:var(--border);--tw-prose-td-borders:var(--border)}#chat-ui-scope .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#chat-ui-scope .pointer-events-none{pointer-events:none}#chat-ui-scope .pointer-events-auto{pointer-events:auto}#chat-ui-scope .visible{visibility:visible}#chat-ui-scope .invisible{visibility:hidden}#chat-ui-scope .fixed{position:fixed}#chat-ui-scope .absolute{position:absolute}#chat-ui-scope .relative{position:relative}#chat-ui-scope .inset-0{inset:0}#chat-ui-scope .-bottom-2{bottom:-.5rem}#chat-ui-scope .bottom-2{bottom:.5rem}#chat-ui-scope .bottom-24{bottom:6rem}#chat-ui-scope .bottom-5{bottom:1.25rem}#chat-ui-scope .left-1\/2{left:50%}#chat-ui-scope .left-3{left:.75rem}#chat-ui-scope .left-5{left:1.25rem}#chat-ui-scope .right-2{right:.5rem}#chat-ui-scope .right-3{right:.75rem}#chat-ui-scope .right-5{right:1.25rem}#chat-ui-scope .right-6{right:1.5rem}#chat-ui-scope .top-2{top:.5rem}#chat-ui-scope .top-3{top:.75rem}#chat-ui-scope .top-full{top:100%}#chat-ui-scope .z-0{z-index:0}#chat-ui-scope .z-10{z-index:10}#chat-ui-scope .z-50{z-index:50}#chat-ui-scope .z-\[9998\]{z-index:9998}#chat-ui-scope .z-\[9999\]{z-index:9999}#chat-ui-scope .m-0{margin:0}#chat-ui-scope .my-0\.5{margin-top:.125rem;margin-bottom:.125rem}#chat-ui-scope .my-1{margin-top:.25rem;margin-bottom:.25rem}#chat-ui-scope .mb-2{margin-bottom:.5rem}#chat-ui-scope .mb-4{margin-bottom:1rem}#chat-ui-scope .mb-6{margin-bottom:1.5rem}#chat-ui-scope .mt-0\.5{margin-top:.125rem}#chat-ui-scope .mt-2{margin-top:.5rem}#chat-ui-scope .mt-4{margin-top:1rem}#chat-ui-scope .inline-block{display:inline-block}#chat-ui-scope .flex{display:flex}#chat-ui-scope .inline-flex{display:inline-flex}#chat-ui-scope .hidden{display:none}#chat-ui-scope .aspect-square{aspect-ratio:1/1}#chat-ui-scope .size-10{width:2.5rem;height:2.5rem}#chat-ui-scope .size-4{width:1rem;height:1rem}#chat-ui-scope .size-8{width:2rem;height:2rem}#chat-ui-scope .size-9{width:2.25rem;height:2.25rem}#chat-ui-scope .size-full{width:100%;height:100%}#chat-ui-scope .h-10{height:2.5rem}#chat-ui-scope .h-16{height:4rem}#chat-ui-scope .h-2{height:.5rem}#chat-ui-scope .h-20{height:5rem}#chat-ui-scope .h-3{height:.75rem}#chat-ui-scope .h-4{height:1rem}#chat-ui-scope .h-6{height:1.5rem}#chat-ui-scope .h-8{height:2rem}#chat-ui-scope .h-9{height:2.25rem}#chat-ui-scope .h-auto{height:auto}#chat-ui-scope .h-full{height:100%}#chat-ui-scope .max-h-12{max-height:3rem}#chat-ui-scope .max-h-32{max-height:8rem}#chat-ui-scope .min-h-0{min-height:0}#chat-ui-scope .min-h-16{min-height:4rem}#chat-ui-scope .w-10{width:2.5rem}#chat-ui-scope .w-16{width:4rem}#chat-ui-scope .w-2{width:.5rem}#chat-ui-scope .w-20{width:5rem}#chat-ui-scope .w-3{width:.75rem}#chat-ui-scope .w-4{width:1rem}#chat-ui-scope .w-40{width:10rem}#chat-ui-scope .w-6{width:1.5rem}#chat-ui-scope .w-72{width:18rem}#chat-ui-scope .w-8{width:2rem}#chat-ui-scope .w-full{width:100%}#chat-ui-scope .max-w-\[85\%\]{max-width:85%}#chat-ui-scope .max-w-full{max-width:100%}#chat-ui-scope .max-w-none{max-width:none}#chat-ui-scope .shrink-0{flex-shrink:0}#chat-ui-scope .flex-grow{flex-grow:1}#chat-ui-scope .origin-top{transform-origin:top}#chat-ui-scope .-translate-x-1\/2{--tw-translate-x:-50%}#chat-ui-scope .-translate-x-1\/2,#chat-ui-scope .translate-y-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))}#chat-ui-scope .translate-y-0{--tw-translate-y:0px}#chat-ui-scope .rotate-45{--tw-rotate:45deg}#chat-ui-scope .rotate-45,#chat-ui-scope .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))}#chat-ui-scope .scale-100{--tw-scale-x:1;--tw-scale-y:1}#chat-ui-scope .transform{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))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}#chat-ui-scope .animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}#chat-ui-scope .animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}#chat-ui-scope .animate-spin{animation:spin 1s linear infinite}#chat-ui-scope .cursor-pointer{cursor:pointer}#chat-ui-scope .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}#chat-ui-scope .resize-none{resize:none}#chat-ui-scope .list-decimal{list-style-type:decimal}#chat-ui-scope .list-disc{list-style-type:disc}#chat-ui-scope .flex-row{flex-direction:row}#chat-ui-scope .flex-row-reverse{flex-direction:row-reverse}#chat-ui-scope .flex-col{flex-direction:column}#chat-ui-scope .items-start{align-items:flex-start}#chat-ui-scope .items-end{align-items:flex-end}#chat-ui-scope .items-center{align-items:center}#chat-ui-scope .justify-start{justify-content:flex-start}#chat-ui-scope .justify-center{justify-content:center}#chat-ui-scope .justify-between{justify-content:space-between}#chat-ui-scope .gap-0\.5{gap:.125rem}#chat-ui-scope .gap-1{gap:.25rem}#chat-ui-scope .gap-1\.5{gap:.375rem}#chat-ui-scope .gap-2{gap:.5rem}#chat-ui-scope .gap-3{gap:.75rem}#chat-ui-scope .gap-4{gap:1rem}#chat-ui-scope .gap-6{gap:1.5rem}#chat-ui-scope :is(.space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}#chat-ui-scope .overflow-hidden{overflow:hidden}#chat-ui-scope .overflow-y-auto{overflow-y:auto}#chat-ui-scope .whitespace-nowrap{white-space:nowrap}#chat-ui-scope .break-words{overflow-wrap:break-word}#chat-ui-scope .break-all{word-break:break-all}#chat-ui-scope .rounded-2xl{border-radius:1rem}#chat-ui-scope .rounded-3xl{border-radius:1.5rem}#chat-ui-scope .rounded-\[1\.25rem\]{border-radius:1.25rem}#chat-ui-scope .rounded-full{border-radius:9999px}#chat-ui-scope .rounded-lg{border-radius:var(--radius)}#chat-ui-scope .rounded-md{border-radius:calc(var(--radius) - 2px)}#chat-ui-scope .rounded-xl{border-radius:.75rem}#chat-ui-scope .\!border-0{border-width:0!important}#chat-ui-scope .border{border-width:1px}#chat-ui-scope .border-0{border-width:0}#chat-ui-scope .border-b{border-bottom-width:1px}#chat-ui-scope .border-r{border-right-width:1px}#chat-ui-scope .border-t{border-top-width:1px}#chat-ui-scope .border-border{--tw-border-opacity:1;border-color:hsl(var(--chat-border)/var(--tw-border-opacity,1))}#chat-ui-scope .border-border\/10{border-color:hsl(var(--chat-border)/.1)}#chat-ui-scope .border-border\/50{border-color:hsl(var(--chat-border)/.5)}#chat-ui-scope .border-input{--tw-border-opacity:1;border-color:hsl(var(--chat-input)/var(--tw-border-opacity,1))}#chat-ui-scope .\!bg-black\/5{background-color:rgba(0,0,0,.05)!important}#chat-ui-scope .\!bg-transparent{background-color:transparent!important}#chat-ui-scope .\!bg-white\/10{background-color:hsla(0,0%,100%,.1)!important}#chat-ui-scope .bg-\[\#535bf2\]{--tw-bg-opacity:1;background-color:rgb(83 91 242/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-background{--tw-bg-opacity:1;background-color:hsl(var(--chat-background)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-background\/50{background-color:hsl(var(--chat-background)/.5)}#chat-ui-scope .bg-destructive{--tw-bg-opacity:1;background-color:hsl(var(--chat-destructive)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-muted{--tw-bg-opacity:1;background-color:hsl(var(--chat-muted)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-muted\/40{background-color:hsl(var(--chat-muted)/.4)}#chat-ui-scope .bg-popover{--tw-bg-opacity:1;background-color:hsl(var(--chat-popover)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-primary{--tw-bg-opacity:1;background-color:hsl(var(--chat-primary)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-secondary{--tw-bg-opacity:1;background-color:hsl(var(--chat-secondary)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-transparent{background-color:transparent}#chat-ui-scope .bg-\[linear-gradient\(110deg\2c var\(--shining-base\)\2c 35\%\2c var\(--shining-highlight\)\2c 50\%\2c var\(--shining-base\)\2c 75\%\2c var\(--shining-base\)\)\]{background-image:linear-gradient(110deg,var(--shining-base),35%,var(--shining-highlight),50%,var(--shining-base),75%,var(--shining-base))}#chat-ui-scope .bg-\[radial-gradient\(\#0ea5e9_40\%\2c transparent_60\%\)\]{background-image:radial-gradient(#0ea5e9 40%,transparent 60%)}#chat-ui-scope .bg-\[radial-gradient\(hsl\(var\(--chat-border\)\)_1px\2c transparent_1px\)\]{background-image:radial-gradient(hsl(var(--chat-border)) 1px,transparent 1px)}#chat-ui-scope .bg-\[length\:200\%_100\%\]{background-size:200% 100%}#chat-ui-scope .bg-clip-text{-webkit-background-clip:text;background-clip:text}#chat-ui-scope .fill-yellow-500{fill:#eab308}#chat-ui-scope .object-cover{-o-object-fit:cover;object-fit:cover}#chat-ui-scope .p-0{padding:0}#chat-ui-scope .p-1{padding:.25rem}#chat-ui-scope .p-3{padding:.75rem}#chat-ui-scope .p-4{padding:1rem}#chat-ui-scope .p-5{padding:1.25rem}#chat-ui-scope .p-6{padding:1.5rem}#chat-ui-scope .p-\[1px\]{padding:1px}#chat-ui-scope .\!px-0{padding-left:0!important;padding-right:0!important}#chat-ui-scope .\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}#chat-ui-scope .\!py-0{padding-top:0!important;padding-bottom:0!important}#chat-ui-scope .\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}#chat-ui-scope .px-1{padding-left:.25rem;padding-right:.25rem}#chat-ui-scope .px-2{padding-left:.5rem;padding-right:.5rem}#chat-ui-scope .px-3{padding-left:.75rem;padding-right:.75rem}#chat-ui-scope .px-4{padding-left:1rem;padding-right:1rem}#chat-ui-scope .px-6{padding-left:1.5rem;padding-right:1.5rem}#chat-ui-scope .py-1{padding-top:.25rem;padding-bottom:.25rem}#chat-ui-scope .py-2{padding-top:.5rem;padding-bottom:.5rem}#chat-ui-scope .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}#chat-ui-scope .py-3{padding-top:.75rem;padding-bottom:.75rem}#chat-ui-scope .pb-1{padding-bottom:.25rem}#chat-ui-scope .pl-1{padding-left:.25rem}#chat-ui-scope .pl-4{padding-left:1rem}#chat-ui-scope .pt-0\.5{padding-top:.125rem}#chat-ui-scope .pt-1{padding-top:.25rem}#chat-ui-scope .text-left{text-align:left}#chat-ui-scope .text-center{text-align:center}#chat-ui-scope .font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}#chat-ui-scope .text-2xl{font-size:1.5rem;line-height:2rem}#chat-ui-scope .text-\[10px\]{font-size:10px}#chat-ui-scope .text-base{font-size:1rem;line-height:1.5rem}#chat-ui-scope .text-sm{font-size:.875rem;line-height:1.25rem}#chat-ui-scope .text-xl{font-size:1.25rem;line-height:1.75rem}#chat-ui-scope .text-xs{font-size:.75rem;line-height:1rem}#chat-ui-scope .font-bold{font-weight:700}#chat-ui-scope .font-medium{font-weight:500}#chat-ui-scope .font-semibold{font-weight:600}#chat-ui-scope .leading-normal{line-height:1.5}#chat-ui-scope .leading-relaxed{line-height:1.625}#chat-ui-scope .leading-snug{line-height:1.375}#chat-ui-scope .leading-tight{line-height:1.25}#chat-ui-scope .tracking-tight{letter-spacing:-.025em}#chat-ui-scope .\!text-\[hsl\(var\(--chat-foreground\)\)\]{color:hsl(var(--chat-foreground))!important}#chat-ui-scope .text-foreground{--tw-text-opacity:1;color:hsl(var(--chat-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-foreground\/50{color:hsl(var(--chat-foreground)/.5)}#chat-ui-scope .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}#chat-ui-scope .text-muted-foreground{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-muted-foreground\/60{color:hsl(var(--chat-muted-foreground)/.6)}#chat-ui-scope .text-popover-foreground{--tw-text-opacity:1;color:hsl(var(--chat-popover-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-primary{--tw-text-opacity:1;color:hsl(var(--chat-primary)/var(--tw-text-opacity,1))}#chat-ui-scope .text-primary-foreground{--tw-text-opacity:1;color:hsl(var(--chat-primary-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-secondary-foreground{--tw-text-opacity:1;color:hsl(var(--chat-secondary-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-transparent{color:transparent}#chat-ui-scope .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}#chat-ui-scope .text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}#chat-ui-scope .underline-offset-4{text-underline-offset:4px}#chat-ui-scope .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#chat-ui-scope .opacity-0{opacity:0}#chat-ui-scope .opacity-100{opacity:1}#chat-ui-scope .opacity-75{opacity:.75}#chat-ui-scope .opacity-\[0\.8\]{opacity:.8}#chat-ui-scope .shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}#chat-ui-scope .shadow-lg,#chat-ui-scope .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}#chat-ui-scope .shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}#chat-ui-scope .shadow-none,#chat-ui-scope .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}#chat-ui-scope .outline-none{outline:2px solid transparent;outline-offset:2px}#chat-ui-scope .outline{outline-style:solid}#chat-ui-scope .ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}#chat-ui-scope .ring-0,#chat-ui-scope .ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}#chat-ui-scope .ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .ring-background{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-background)/var(--tw-ring-opacity,1))}#chat-ui-scope .ring-black\/5{--tw-ring-color:rgba(0,0,0,.05)}#chat-ui-scope .ring-border\/50{--tw-ring-color:hsl(var(--chat-border)/0.5)}#chat-ui-scope .backdrop-blur-xl{--tw-backdrop-blur:blur(24px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}#chat-ui-scope .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}#chat-ui-scope .transition-\[color\2c box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .duration-200{transition-duration:.2s}#chat-ui-scope .duration-300{transition-duration:.3s}#chat-ui-scope .duration-500{transition-duration:.5s}#chat-ui-scope .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}#chat-ui-scope .animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}#chat-ui-scope .fade-in{--tw-enter-opacity:0}#chat-ui-scope .zoom-in-95{--tw-enter-scale:.95}#chat-ui-scope .slide-in-from-bottom-5{--tw-enter-translate-y:1.25rem}#chat-ui-scope .duration-200{animation-duration:.2s}#chat-ui-scope .duration-300{animation-duration:.3s}#chat-ui-scope .duration-500{animation-duration:.5s}#chat-ui-scope .ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(1turn)}}@keyframes slide{to{transform:translate(calc(100cqw - 100%))}}#chat-ui-scope .\[background-size\:16px_16px\]{background-size:16px 16px}@media (min-width:769px){#chat-ui-scope ::-webkit-scrollbar{width:8px;height:6px}#chat-ui-scope ::-webkit-scrollbar-track{background:transparent}#chat-ui-scope ::-webkit-scrollbar-thumb{border-radius:9999px;background-color:hsl(var(--chat-muted-foreground)/.2);border:1px solid transparent}#chat-ui-scope ::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--chat-muted-foreground)/.4)}}#chat-ui-scope .placeholder\:text-muted-foreground::-moz-placeholder{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .placeholder\:text-muted-foreground::placeholder{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .last\:mb-0:last-child{margin-bottom:0}#chat-ui-scope .focus-within\:ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-within\:ring-ring:focus-within{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-ring)/var(--tw-ring-opacity,1))}#chat-ui-scope .hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;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))}#chat-ui-scope .hover\:bg-\[\#464ec9\]:hover{--tw-bg-opacity:1;background-color:rgb(70 78 201/var(--tw-bg-opacity,1))}#chat-ui-scope .hover\:bg-accent:hover{--tw-bg-opacity:1;background-color:hsl(var(--chat-accent)/var(--tw-bg-opacity,1))}#chat-ui-scope .hover\:bg-destructive\/90:hover{background-color:hsl(var(--chat-destructive)/.9)}#chat-ui-scope .hover\:bg-muted\/50:hover{background-color:hsl(var(--chat-muted)/.5)}#chat-ui-scope .hover\:bg-primary\/90:hover{background-color:hsl(var(--chat-primary)/.9)}#chat-ui-scope .hover\:bg-secondary\/80:hover{background-color:hsl(var(--chat-secondary)/.8)}#chat-ui-scope .hover\:bg-transparent:hover{background-color:transparent}#chat-ui-scope .hover\:text-accent-foreground:hover{--tw-text-opacity:1;color:hsl(var(--chat-accent-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-foreground:hover{--tw-text-opacity:1;color:hsl(var(--chat-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-foreground\/80:hover{color:hsl(var(--chat-foreground)/.8)}#chat-ui-scope .hover\:text-primary:hover{--tw-text-opacity:1;color:hsl(var(--chat-primary)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-primary\/80:hover{color:hsl(var(--chat-primary)/.8)}#chat-ui-scope .hover\:underline:hover{text-decoration-line:underline}#chat-ui-scope .hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .hover\:shadow-black\/30:hover{--tw-shadow-color:rgba(0,0,0,.3);--tw-shadow:var(--tw-shadow-colored)}#chat-ui-scope .focus-visible\:border-ring:focus-visible{--tw-border-opacity:1;border-color:hsl(var(--chat-ring)/var(--tw-border-opacity,1))}#chat-ui-scope .focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}#chat-ui-scope .focus-visible\:ring-0:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:hsl(var(--chat-destructive)/0.2)}#chat-ui-scope .focus-visible\:ring-ring:focus-visible{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-ring)/var(--tw-ring-opacity,1))}#chat-ui-scope .focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:hsl(var(--chat-ring)/0.5)}#chat-ui-scope .active\: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))}#chat-ui-scope .disabled\:pointer-events-none:disabled{pointer-events:none}#chat-ui-scope .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}#chat-ui-scope .disabled\:opacity-50:disabled{opacity:.5}#chat-ui-scope :is(.group:hover .group-hover\:flex){display:flex}@keyframes spin{to{transform:rotate(1turn)}}#chat-ui-scope :is(.group:hover .group-hover\:animate-\[spin_1s_linear_1\]){animation:spin 1s linear 1}#chat-ui-scope .has-\[\>svg\]\:px-2\.5:has(>svg){padding-left:.625rem;padding-right:.625rem}#chat-ui-scope .has-\[\>svg\]\:px-3:has(>svg){padding-left:.75rem;padding-right:.75rem}#chat-ui-scope .has-\[\>svg\]\:px-4:has(>svg){padding-left:1rem;padding-right:1rem}#chat-ui-scope .dark\:bg-input\/30:is(.dark *){background-color:hsl(var(--chat-input)/.3)}@media (min-width:640px){#chat-ui-scope .sm\:inset-auto{inset:auto}#chat-ui-scope .sm\:bottom-24{bottom:6rem}#chat-ui-scope .sm\:bottom-\[var\(--chat-bottom\)\]{bottom:var(--chat-bottom)}#chat-ui-scope .sm\:left-5{left:1.25rem}#chat-ui-scope .sm\:left-auto{left:auto}#chat-ui-scope .sm\:right-5{right:1.25rem}#chat-ui-scope .sm\:right-\[var\(--chat-right\)\]{right:var(--chat-right)}#chat-ui-scope .sm\:top-5{top:1.25rem}#chat-ui-scope .sm\:top-auto{top:auto}#chat-ui-scope .sm\:flex{display:flex}#chat-ui-scope .sm\:hidden{display:none}#chat-ui-scope .sm\:h-\[var\(--chat-height\)\]{height:var(--chat-height)}#chat-ui-scope .sm\:h-full{height:100%}#chat-ui-scope .sm\:\!max-h-none{max-height:none!important}#chat-ui-scope .sm\:max-h-\[500px\]{max-height:500px}#chat-ui-scope .sm\:max-h-\[600px\]{max-height:600px}#chat-ui-scope .sm\:max-h-\[700px\]{max-height:700px}#chat-ui-scope .sm\:max-h-\[800px\]{max-height:800px}#chat-ui-scope .sm\:w-80{width:20rem}#chat-ui-scope .sm\:w-\[var\(--chat-width\)\]{width:var(--chat-width)}#chat-ui-scope .sm\:w-full{width:100%}#chat-ui-scope .sm\:\!max-w-none{max-width:none!important}#chat-ui-scope .sm\:max-w-lg{max-width:32rem}#chat-ui-scope .sm\:max-w-md{max-width:28rem}#chat-ui-scope .sm\:max-w-sm{max-width:24rem}#chat-ui-scope .sm\:max-w-xl{max-width:36rem}#chat-ui-scope .sm\:translate-y-5{--tw-translate-y:1.25rem;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))}#chat-ui-scope .sm\:rounded-lg{border-radius:var(--radius)}#chat-ui-scope .sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){#chat-ui-scope .md\:text-sm{font-size:.875rem;line-height:1.25rem}}#chat-ui-scope :is(.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-])){width:1rem;height:1rem}#chat-ui-scope :is(.\[\&_svg\]\:pointer-events-none svg){pointer-events:none}#chat-ui-scope :is(.\[\&_svg\]\:shrink-0 svg){flex-shrink:0}
|
|
1
|
+
#chat-ui-scope{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;color:var(--foreground);-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;color-scheme:light;--chat-background:0 0% 100%;--chat-foreground:222.2 84% 4.9%;--chat-card:0 0% 100%;--chat-card-foreground:222.2 84% 4.9%;--chat-popover:0 0% 100%;--chat-popover-foreground:222.2 84% 4.9%;--chat-primary:221.2 83.2% 53.3%;--chat-primary-foreground:210 40% 98%;--chat-secondary:210 40% 96.1%;--chat-secondary-foreground:222.2 47.4% 11.2%;--chat-muted:210 40% 96.1%;--chat-muted-foreground:215.4 16.3% 46.9%;--chat-accent:210 40% 96.1%;--chat-accent-foreground:222.2 47.4% 11.2%;--chat-destructive:0 84.2% 60.2%;--chat-destructive-foreground:210 40% 98%;--chat-border:214.3 31.8% 91.4%;--chat-input:214.3 31.8% 91.4%;--chat-ring:222.2 84% 4.9%;--radius:0.5rem;--radix-accordion-content-height:0;--shining-base:hsl(var(--chat-muted-foreground));--shining-highlight:hsl(var(--chat-foreground))}#chat-ui-scope.dark{--chat-background:0 0% 0%;--chat-foreground:0 0% 100%;--chat-card:0 0% 0%;--chat-card-foreground:0 0% 100%;--chat-popover:0 0% 0%;--chat-popover-foreground:0 0% 100%;--chat-primary:221.2 83.2% 53.3%;--chat-primary-foreground:210 40% 98%;--chat-secondary:217.2 32.6% 17.5%;--chat-secondary-foreground:210 40% 98%;--chat-muted:217.2 32.6% 17.5%;--chat-muted-foreground:215 20.2% 65.1%;--chat-accent:217.2 32.6% 17.5%;--chat-accent-foreground:210 40% 98%;--chat-destructive:0 62.8% 30.6%;--chat-destructive-foreground:210 40% 98%;--chat-border:217.2 32.6% 17.5%;--chat-input:217.2 32.6% 17.5%;--chat-ring:212.7 26.8% 83.9%}#chat-ui-scope :where(h1,h2,h3,h4,h5,h6,p,span,div,a,button,input,textarea,select){color:inherit}#chat-ui-scope{color:hsl(var(--chat-foreground))!important}#chat-ui-scope *{border-color:hsl(var(--chat-border)/1)}#chat-ui-scope .prose{--tw-prose-body:var(--foreground);--tw-prose-headings:var(--foreground);--tw-prose-lead:var(--muted-foreground);--tw-prose-links:var(--primary);--tw-prose-bold:var(--foreground);--tw-prose-counters:var(--muted-foreground);--tw-prose-bullets:var(--muted-foreground);--tw-prose-hr:var(--border);--tw-prose-quotes:var(--foreground);--tw-prose-quote-borders:var(--border);--tw-prose-captions:var(--muted-foreground);--tw-prose-code:var(--foreground);--tw-prose-pre-code:var(--foreground);--tw-prose-pre-bg:var(--muted);--tw-prose-th-borders:var(--border);--tw-prose-td-borders:var(--border)}#chat-ui-scope .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#chat-ui-scope .pointer-events-none{pointer-events:none}#chat-ui-scope .pointer-events-auto{pointer-events:auto}#chat-ui-scope .visible{visibility:visible}#chat-ui-scope .invisible{visibility:hidden}#chat-ui-scope .fixed{position:fixed}#chat-ui-scope .absolute{position:absolute}#chat-ui-scope .relative{position:relative}#chat-ui-scope .inset-0{inset:0}#chat-ui-scope .-bottom-2{bottom:-.5rem}#chat-ui-scope .bottom-2{bottom:.5rem}#chat-ui-scope .bottom-24{bottom:6rem}#chat-ui-scope .bottom-5{bottom:1.25rem}#chat-ui-scope .left-1\/2{left:50%}#chat-ui-scope .left-3{left:.75rem}#chat-ui-scope .left-5{left:1.25rem}#chat-ui-scope .left-6{left:1.5rem}#chat-ui-scope .right-2{right:.5rem}#chat-ui-scope .right-3{right:.75rem}#chat-ui-scope .right-5{right:1.25rem}#chat-ui-scope .right-6{right:1.5rem}#chat-ui-scope .top-2{top:.5rem}#chat-ui-scope .top-3{top:.75rem}#chat-ui-scope .top-full{top:100%}#chat-ui-scope .z-0{z-index:0}#chat-ui-scope .z-10{z-index:10}#chat-ui-scope .z-50{z-index:50}#chat-ui-scope .z-\[9998\]{z-index:9998}#chat-ui-scope .z-\[9999\]{z-index:9999}#chat-ui-scope .m-0{margin:0}#chat-ui-scope .my-0\.5{margin-top:.125rem;margin-bottom:.125rem}#chat-ui-scope .my-1{margin-top:.25rem;margin-bottom:.25rem}#chat-ui-scope .mb-2{margin-bottom:.5rem}#chat-ui-scope .mb-4{margin-bottom:1rem}#chat-ui-scope .mb-6{margin-bottom:1.5rem}#chat-ui-scope .mt-0\.5{margin-top:.125rem}#chat-ui-scope .mt-2{margin-top:.5rem}#chat-ui-scope .mt-4{margin-top:1rem}#chat-ui-scope .inline-block{display:inline-block}#chat-ui-scope .flex{display:flex}#chat-ui-scope .inline-flex{display:inline-flex}#chat-ui-scope .hidden{display:none}#chat-ui-scope .aspect-square{aspect-ratio:1/1}#chat-ui-scope .size-10{width:2.5rem;height:2.5rem}#chat-ui-scope .size-4{width:1rem;height:1rem}#chat-ui-scope .size-8{width:2rem;height:2rem}#chat-ui-scope .size-9{width:2.25rem;height:2.25rem}#chat-ui-scope .size-full{width:100%;height:100%}#chat-ui-scope .h-10{height:2.5rem}#chat-ui-scope .h-16{height:4rem}#chat-ui-scope .h-2{height:.5rem}#chat-ui-scope .h-20{height:5rem}#chat-ui-scope .h-3{height:.75rem}#chat-ui-scope .h-4{height:1rem}#chat-ui-scope .h-6{height:1.5rem}#chat-ui-scope .h-8{height:2rem}#chat-ui-scope .h-9{height:2.25rem}#chat-ui-scope .h-auto{height:auto}#chat-ui-scope .h-full{height:100%}#chat-ui-scope .max-h-12{max-height:3rem}#chat-ui-scope .max-h-32{max-height:8rem}#chat-ui-scope .min-h-0{min-height:0}#chat-ui-scope .min-h-16{min-height:4rem}#chat-ui-scope .w-10{width:2.5rem}#chat-ui-scope .w-16{width:4rem}#chat-ui-scope .w-2{width:.5rem}#chat-ui-scope .w-20{width:5rem}#chat-ui-scope .w-3{width:.75rem}#chat-ui-scope .w-4{width:1rem}#chat-ui-scope .w-40{width:10rem}#chat-ui-scope .w-6{width:1.5rem}#chat-ui-scope .w-72{width:18rem}#chat-ui-scope .w-8{width:2rem}#chat-ui-scope .w-full{width:100%}#chat-ui-scope .max-w-\[85\%\]{max-width:85%}#chat-ui-scope .max-w-full{max-width:100%}#chat-ui-scope .max-w-none{max-width:none}#chat-ui-scope .shrink-0{flex-shrink:0}#chat-ui-scope .flex-grow{flex-grow:1}#chat-ui-scope .origin-top{transform-origin:top}#chat-ui-scope .-translate-x-1\/2{--tw-translate-x:-50%}#chat-ui-scope .-translate-x-1\/2,#chat-ui-scope .translate-y-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))}#chat-ui-scope .translate-y-0{--tw-translate-y:0px}#chat-ui-scope .rotate-45{--tw-rotate:45deg}#chat-ui-scope .rotate-45,#chat-ui-scope .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))}#chat-ui-scope .scale-100{--tw-scale-x:1;--tw-scale-y:1}#chat-ui-scope .transform{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))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}#chat-ui-scope .animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}#chat-ui-scope .animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}#chat-ui-scope .animate-spin{animation:spin 1s linear infinite}#chat-ui-scope .cursor-pointer{cursor:pointer}#chat-ui-scope .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}#chat-ui-scope .resize-none{resize:none}#chat-ui-scope .list-decimal{list-style-type:decimal}#chat-ui-scope .list-disc{list-style-type:disc}#chat-ui-scope .flex-row{flex-direction:row}#chat-ui-scope .flex-row-reverse{flex-direction:row-reverse}#chat-ui-scope .flex-col{flex-direction:column}#chat-ui-scope .items-start{align-items:flex-start}#chat-ui-scope .items-end{align-items:flex-end}#chat-ui-scope .items-center{align-items:center}#chat-ui-scope .justify-start{justify-content:flex-start}#chat-ui-scope .justify-center{justify-content:center}#chat-ui-scope .justify-between{justify-content:space-between}#chat-ui-scope .gap-0\.5{gap:.125rem}#chat-ui-scope .gap-1{gap:.25rem}#chat-ui-scope .gap-1\.5{gap:.375rem}#chat-ui-scope .gap-2{gap:.5rem}#chat-ui-scope .gap-3{gap:.75rem}#chat-ui-scope .gap-4{gap:1rem}#chat-ui-scope .gap-6{gap:1.5rem}#chat-ui-scope :is(.space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}#chat-ui-scope .overflow-hidden{overflow:hidden}#chat-ui-scope .overflow-y-auto{overflow-y:auto}#chat-ui-scope .whitespace-nowrap{white-space:nowrap}#chat-ui-scope .break-words{overflow-wrap:break-word}#chat-ui-scope .break-all{word-break:break-all}#chat-ui-scope .rounded-2xl{border-radius:1rem}#chat-ui-scope .rounded-3xl{border-radius:1.5rem}#chat-ui-scope .rounded-\[1\.25rem\]{border-radius:1.25rem}#chat-ui-scope .rounded-full{border-radius:9999px}#chat-ui-scope .rounded-lg{border-radius:var(--radius)}#chat-ui-scope .rounded-md{border-radius:calc(var(--radius) - 2px)}#chat-ui-scope .rounded-xl{border-radius:.75rem}#chat-ui-scope .\!border-0{border-width:0!important}#chat-ui-scope .border{border-width:1px}#chat-ui-scope .border-0{border-width:0}#chat-ui-scope .border-b{border-bottom-width:1px}#chat-ui-scope .border-r{border-right-width:1px}#chat-ui-scope .border-t{border-top-width:1px}#chat-ui-scope .border-border{--tw-border-opacity:1;border-color:hsl(var(--chat-border)/var(--tw-border-opacity,1))}#chat-ui-scope .border-border\/10{border-color:hsl(var(--chat-border)/.1)}#chat-ui-scope .border-border\/50{border-color:hsl(var(--chat-border)/.5)}#chat-ui-scope .border-input{--tw-border-opacity:1;border-color:hsl(var(--chat-input)/var(--tw-border-opacity,1))}#chat-ui-scope .\!bg-black\/5{background-color:rgba(0,0,0,.05)!important}#chat-ui-scope .\!bg-transparent{background-color:transparent!important}#chat-ui-scope .\!bg-white\/10{background-color:hsla(0,0%,100%,.1)!important}#chat-ui-scope .bg-\[\#535bf2\]{--tw-bg-opacity:1;background-color:rgb(83 91 242/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-background{--tw-bg-opacity:1;background-color:hsl(var(--chat-background)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-background\/50{background-color:hsl(var(--chat-background)/.5)}#chat-ui-scope .bg-destructive{--tw-bg-opacity:1;background-color:hsl(var(--chat-destructive)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-muted{--tw-bg-opacity:1;background-color:hsl(var(--chat-muted)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-muted\/40{background-color:hsl(var(--chat-muted)/.4)}#chat-ui-scope .bg-popover{--tw-bg-opacity:1;background-color:hsl(var(--chat-popover)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-primary{--tw-bg-opacity:1;background-color:hsl(var(--chat-primary)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-secondary{--tw-bg-opacity:1;background-color:hsl(var(--chat-secondary)/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-transparent{background-color:transparent}#chat-ui-scope .bg-\[linear-gradient\(110deg\2c var\(--shining-base\)\2c 35\%\2c var\(--shining-highlight\)\2c 50\%\2c var\(--shining-base\)\2c 75\%\2c var\(--shining-base\)\)\]{background-image:linear-gradient(110deg,var(--shining-base),35%,var(--shining-highlight),50%,var(--shining-base),75%,var(--shining-base))}#chat-ui-scope .bg-\[radial-gradient\(\#0ea5e9_40\%\2c transparent_60\%\)\]{background-image:radial-gradient(#0ea5e9 40%,transparent 60%)}#chat-ui-scope .bg-\[radial-gradient\(hsl\(var\(--chat-border\)\)_1px\2c transparent_1px\)\]{background-image:radial-gradient(hsl(var(--chat-border)) 1px,transparent 1px)}#chat-ui-scope .bg-\[length\:200\%_100\%\]{background-size:200% 100%}#chat-ui-scope .bg-clip-text{-webkit-background-clip:text;background-clip:text}#chat-ui-scope .fill-yellow-500{fill:#eab308}#chat-ui-scope .object-cover{-o-object-fit:cover;object-fit:cover}#chat-ui-scope .p-0{padding:0}#chat-ui-scope .p-1{padding:.25rem}#chat-ui-scope .p-3{padding:.75rem}#chat-ui-scope .p-4{padding:1rem}#chat-ui-scope .p-5{padding:1.25rem}#chat-ui-scope .p-6{padding:1.5rem}#chat-ui-scope .p-\[1px\]{padding:1px}#chat-ui-scope .\!px-0{padding-left:0!important;padding-right:0!important}#chat-ui-scope .\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}#chat-ui-scope .\!py-0{padding-top:0!important;padding-bottom:0!important}#chat-ui-scope .\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}#chat-ui-scope .px-1{padding-left:.25rem;padding-right:.25rem}#chat-ui-scope .px-2{padding-left:.5rem;padding-right:.5rem}#chat-ui-scope .px-3{padding-left:.75rem;padding-right:.75rem}#chat-ui-scope .px-4{padding-left:1rem;padding-right:1rem}#chat-ui-scope .px-6{padding-left:1.5rem;padding-right:1.5rem}#chat-ui-scope .py-1{padding-top:.25rem;padding-bottom:.25rem}#chat-ui-scope .py-2{padding-top:.5rem;padding-bottom:.5rem}#chat-ui-scope .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}#chat-ui-scope .py-3{padding-top:.75rem;padding-bottom:.75rem}#chat-ui-scope .pb-1{padding-bottom:.25rem}#chat-ui-scope .pl-1{padding-left:.25rem}#chat-ui-scope .pl-4{padding-left:1rem}#chat-ui-scope .pt-0\.5{padding-top:.125rem}#chat-ui-scope .pt-1{padding-top:.25rem}#chat-ui-scope .text-left{text-align:left}#chat-ui-scope .text-center{text-align:center}#chat-ui-scope .font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}#chat-ui-scope .text-2xl{font-size:1.5rem;line-height:2rem}#chat-ui-scope .text-\[10px\]{font-size:10px}#chat-ui-scope .text-base{font-size:1rem;line-height:1.5rem}#chat-ui-scope .text-sm{font-size:.875rem;line-height:1.25rem}#chat-ui-scope .text-xl{font-size:1.25rem;line-height:1.75rem}#chat-ui-scope .text-xs{font-size:.75rem;line-height:1rem}#chat-ui-scope .font-bold{font-weight:700}#chat-ui-scope .font-medium{font-weight:500}#chat-ui-scope .font-semibold{font-weight:600}#chat-ui-scope .leading-normal{line-height:1.5}#chat-ui-scope .leading-relaxed{line-height:1.625}#chat-ui-scope .leading-snug{line-height:1.375}#chat-ui-scope .leading-tight{line-height:1.25}#chat-ui-scope .tracking-tight{letter-spacing:-.025em}#chat-ui-scope .\!text-\[hsl\(var\(--chat-foreground\)\)\]{color:hsl(var(--chat-foreground))!important}#chat-ui-scope .text-foreground{--tw-text-opacity:1;color:hsl(var(--chat-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-foreground\/50{color:hsl(var(--chat-foreground)/.5)}#chat-ui-scope .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}#chat-ui-scope .text-muted-foreground{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-muted-foreground\/60{color:hsl(var(--chat-muted-foreground)/.6)}#chat-ui-scope .text-popover-foreground{--tw-text-opacity:1;color:hsl(var(--chat-popover-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-primary{--tw-text-opacity:1;color:hsl(var(--chat-primary)/var(--tw-text-opacity,1))}#chat-ui-scope .text-primary-foreground{--tw-text-opacity:1;color:hsl(var(--chat-primary-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-secondary-foreground{--tw-text-opacity:1;color:hsl(var(--chat-secondary-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .text-transparent{color:transparent}#chat-ui-scope .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}#chat-ui-scope .text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}#chat-ui-scope .underline-offset-4{text-underline-offset:4px}#chat-ui-scope .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#chat-ui-scope .opacity-0{opacity:0}#chat-ui-scope .opacity-100{opacity:1}#chat-ui-scope .opacity-75{opacity:.75}#chat-ui-scope .opacity-\[0\.8\]{opacity:.8}#chat-ui-scope .shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}#chat-ui-scope .shadow-lg,#chat-ui-scope .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}#chat-ui-scope .shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}#chat-ui-scope .shadow-none,#chat-ui-scope .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}#chat-ui-scope .outline-none{outline:2px solid transparent;outline-offset:2px}#chat-ui-scope .outline{outline-style:solid}#chat-ui-scope .ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}#chat-ui-scope .ring-0,#chat-ui-scope .ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}#chat-ui-scope .ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .ring-background{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-background)/var(--tw-ring-opacity,1))}#chat-ui-scope .ring-black\/5{--tw-ring-color:rgba(0,0,0,.05)}#chat-ui-scope .ring-border\/50{--tw-ring-color:hsl(var(--chat-border)/0.5)}#chat-ui-scope .backdrop-blur-xl{--tw-backdrop-blur:blur(24px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}#chat-ui-scope .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}#chat-ui-scope .transition-\[color\2c box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#chat-ui-scope .duration-200{transition-duration:.2s}#chat-ui-scope .duration-300{transition-duration:.3s}#chat-ui-scope .duration-500{transition-duration:.5s}#chat-ui-scope .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#chat-ui-scope .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}#chat-ui-scope .animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}#chat-ui-scope .fade-in{--tw-enter-opacity:0}#chat-ui-scope .zoom-in-95{--tw-enter-scale:.95}#chat-ui-scope .slide-in-from-bottom-5{--tw-enter-translate-y:1.25rem}#chat-ui-scope .duration-200{animation-duration:.2s}#chat-ui-scope .duration-300{animation-duration:.3s}#chat-ui-scope .duration-500{animation-duration:.5s}#chat-ui-scope .ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}#chat-ui-scope .ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(1turn)}}@keyframes slide{to{transform:translate(calc(100cqw - 100%))}}#chat-ui-scope .\[background-size\:16px_16px\]{background-size:16px 16px}@media (min-width:769px){#chat-ui-scope ::-webkit-scrollbar{width:8px;height:6px}#chat-ui-scope ::-webkit-scrollbar-track{background:transparent}#chat-ui-scope ::-webkit-scrollbar-thumb{border-radius:9999px;background-color:hsl(var(--chat-muted-foreground)/.2);border:1px solid transparent}#chat-ui-scope ::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--chat-muted-foreground)/.4)}}#chat-ui-scope .placeholder\:text-muted-foreground::-moz-placeholder{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .placeholder\:text-muted-foreground::placeholder{--tw-text-opacity:1;color:hsl(var(--chat-muted-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .last\:mb-0:last-child{margin-bottom:0}#chat-ui-scope .focus-within\:ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-within\:ring-ring:focus-within{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-ring)/var(--tw-ring-opacity,1))}#chat-ui-scope .hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}#chat-ui-scope .hover\:-translate-y-1:hover,#chat-ui-scope .hover\: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))}#chat-ui-scope .hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}#chat-ui-scope .hover\:bg-\[\#464ec9\]:hover{--tw-bg-opacity:1;background-color:rgb(70 78 201/var(--tw-bg-opacity,1))}#chat-ui-scope .hover\:bg-accent:hover{--tw-bg-opacity:1;background-color:hsl(var(--chat-accent)/var(--tw-bg-opacity,1))}#chat-ui-scope .hover\:bg-destructive\/90:hover{background-color:hsl(var(--chat-destructive)/.9)}#chat-ui-scope .hover\:bg-muted\/50:hover{background-color:hsl(var(--chat-muted)/.5)}#chat-ui-scope .hover\:bg-primary\/90:hover{background-color:hsl(var(--chat-primary)/.9)}#chat-ui-scope .hover\:bg-secondary\/80:hover{background-color:hsl(var(--chat-secondary)/.8)}#chat-ui-scope .hover\:bg-transparent:hover{background-color:transparent}#chat-ui-scope .hover\:text-accent-foreground:hover{--tw-text-opacity:1;color:hsl(var(--chat-accent-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-foreground:hover{--tw-text-opacity:1;color:hsl(var(--chat-foreground)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-foreground\/80:hover{color:hsl(var(--chat-foreground)/.8)}#chat-ui-scope .hover\:text-primary:hover{--tw-text-opacity:1;color:hsl(var(--chat-primary)/var(--tw-text-opacity,1))}#chat-ui-scope .hover\:text-primary\/80:hover{color:hsl(var(--chat-primary)/.8)}#chat-ui-scope .hover\:underline:hover{text-decoration-line:underline}#chat-ui-scope .hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#chat-ui-scope .hover\:shadow-black\/40:hover{--tw-shadow-color:rgba(0,0,0,.4);--tw-shadow:var(--tw-shadow-colored)}#chat-ui-scope .focus-visible\:border-ring:focus-visible{--tw-border-opacity:1;border-color:hsl(var(--chat-ring)/var(--tw-border-opacity,1))}#chat-ui-scope .focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}#chat-ui-scope .focus-visible\:ring-0:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}#chat-ui-scope .focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:hsl(var(--chat-destructive)/0.2)}#chat-ui-scope .focus-visible\:ring-ring:focus-visible{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--chat-ring)/var(--tw-ring-opacity,1))}#chat-ui-scope .focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:hsl(var(--chat-ring)/0.5)}#chat-ui-scope .active\:translate-y-0:active{--tw-translate-y:0px}#chat-ui-scope .active\:scale-95:active,#chat-ui-scope .active\:translate-y-0:active{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))}#chat-ui-scope .active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}#chat-ui-scope .disabled\:pointer-events-none:disabled{pointer-events:none}#chat-ui-scope .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}#chat-ui-scope .disabled\:opacity-50:disabled{opacity:.5}#chat-ui-scope :is(.group:hover .group-hover\:flex){display:flex}@keyframes spin{to{transform:rotate(1turn)}}#chat-ui-scope :is(.group:hover .group-hover\:animate-\[spin_1s_linear_1\]){animation:spin 1s linear 1}#chat-ui-scope .has-\[\>svg\]\:px-2\.5:has(>svg){padding-left:.625rem;padding-right:.625rem}#chat-ui-scope .has-\[\>svg\]\:px-3:has(>svg){padding-left:.75rem;padding-right:.75rem}#chat-ui-scope .has-\[\>svg\]\:px-4:has(>svg){padding-left:1rem;padding-right:1rem}#chat-ui-scope .dark\:bg-input\/30:is(.dark *){background-color:hsl(var(--chat-input)/.3)}@media (min-width:640px){#chat-ui-scope .sm\:inset-auto{inset:auto}#chat-ui-scope .sm\:bottom-24{bottom:6rem}#chat-ui-scope .sm\:bottom-\[var\(--chat-bottom\)\]{bottom:var(--chat-bottom)}#chat-ui-scope .sm\:left-5{left:1.25rem}#chat-ui-scope .sm\:left-\[var\(--chat-offset\)\]{left:var(--chat-offset)}#chat-ui-scope .sm\:left-auto{left:auto}#chat-ui-scope .sm\:right-5{right:1.25rem}#chat-ui-scope .sm\:right-\[var\(--chat-offset\)\]{right:var(--chat-offset)}#chat-ui-scope .sm\:top-5{top:1.25rem}#chat-ui-scope .sm\:top-auto{top:auto}#chat-ui-scope .sm\:flex{display:flex}#chat-ui-scope .sm\:hidden{display:none}#chat-ui-scope .sm\:h-\[var\(--chat-height\)\]{height:var(--chat-height)}#chat-ui-scope .sm\:h-full{height:100%}#chat-ui-scope .sm\:\!max-h-none{max-height:none!important}#chat-ui-scope .sm\:max-h-\[500px\]{max-height:500px}#chat-ui-scope .sm\:max-h-\[600px\]{max-height:600px}#chat-ui-scope .sm\:max-h-\[700px\]{max-height:700px}#chat-ui-scope .sm\:max-h-\[800px\]{max-height:800px}#chat-ui-scope .sm\:w-80{width:20rem}#chat-ui-scope .sm\:w-\[var\(--chat-width\)\]{width:var(--chat-width)}#chat-ui-scope .sm\:w-full{width:100%}#chat-ui-scope .sm\:\!max-w-none{max-width:none!important}#chat-ui-scope .sm\:max-w-lg{max-width:32rem}#chat-ui-scope .sm\:max-w-md{max-width:28rem}#chat-ui-scope .sm\:max-w-sm{max-width:24rem}#chat-ui-scope .sm\:max-w-xl{max-width:36rem}#chat-ui-scope .sm\:translate-y-5{--tw-translate-y:1.25rem;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))}#chat-ui-scope .sm\:rounded-lg{border-radius:var(--radius)}#chat-ui-scope .sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){#chat-ui-scope .md\:text-sm{font-size:.875rem;line-height:1.25rem}}#chat-ui-scope :is(.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-])){width:1rem;height:1rem}#chat-ui-scope :is(.\[\&_svg\]\:pointer-events-none svg){pointer-events:none}#chat-ui-scope :is(.\[\&_svg\]\:shrink-0 svg){flex-shrink:0}
|
package/dist/index.d.mts
CHANGED
|
@@ -10,7 +10,8 @@ interface ChatUIProps {
|
|
|
10
10
|
footerText?: React.ReactNode;
|
|
11
11
|
inputPlaceholder?: string;
|
|
12
12
|
theme?: "light" | "dark";
|
|
13
|
+
position?: "right" | "left";
|
|
13
14
|
}
|
|
14
|
-
declare function ChatUI({ endpoint, logoSrc, soundSrc, title, welcomeMessage, description, footerText, inputPlaceholder, theme, }: ChatUIProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function ChatUI({ endpoint, logoSrc, soundSrc, title, welcomeMessage, description, footerText, inputPlaceholder, theme, position, }: ChatUIProps): react_jsx_runtime.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { ChatUI, type ChatUIProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,8 @@ interface ChatUIProps {
|
|
|
10
10
|
footerText?: React.ReactNode;
|
|
11
11
|
inputPlaceholder?: string;
|
|
12
12
|
theme?: "light" | "dark";
|
|
13
|
+
position?: "right" | "left";
|
|
13
14
|
}
|
|
14
|
-
declare function ChatUI({ endpoint, logoSrc, soundSrc, title, welcomeMessage, description, footerText, inputPlaceholder, theme, }: ChatUIProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function ChatUI({ endpoint, logoSrc, soundSrc, title, welcomeMessage, description, footerText, inputPlaceholder, theme, position, }: ChatUIProps): react_jsx_runtime.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { ChatUI, type ChatUIProps };
|
package/dist/index.js
CHANGED
|
@@ -368,19 +368,18 @@ var ExpandableChat = ({
|
|
|
368
368
|
style: {
|
|
369
369
|
"--chat-width": isMaximized ? "60vw" : sizeConfig[size].width,
|
|
370
370
|
"--chat-height": isMaximized ? "90vh" : sizeConfig[size].height,
|
|
371
|
-
"--chat-
|
|
372
|
-
// 1.25rem = right-5
|
|
371
|
+
"--chat-offset": isMaximized ? "20vw" : "1.25rem",
|
|
373
372
|
"--chat-bottom": isMaximized ? "5vh" : "6rem",
|
|
374
|
-
|
|
375
|
-
transition: "width 0.4s ease-in-out, height 0.4s ease-in-out, right 0.4s ease-in-out, bottom 0.4s ease-in-out"
|
|
373
|
+
transition: `width 0.4s ease-in-out, height 0.4s ease-in-out, ${position === "bottom-right" ? "right" : "left"} 0.4s ease-in-out, bottom 0.4s ease-in-out`
|
|
376
374
|
},
|
|
377
375
|
className: cn(
|
|
378
376
|
"flex flex-col bg-background sm:rounded-lg shadow-md overflow-hidden fixed inset-0 w-full h-full sm:inset-auto sm:left-auto sm:top-auto",
|
|
379
377
|
chatConfig.chatPositions[position],
|
|
380
|
-
chatConfig.dimensions[size],
|
|
381
378
|
isOpen ? chatConfig.states.open : chatConfig.states.closed,
|
|
382
|
-
"sm:w-[var(--chat-width)] sm:h-[var(--chat-height)] sm:
|
|
383
|
-
|
|
379
|
+
"sm:w-[var(--chat-width)] sm:h-[var(--chat-height)] sm:bottom-[var(--chat-bottom)]",
|
|
380
|
+
position === "bottom-right" ? "sm:right-[var(--chat-offset)]" : "sm:left-[var(--chat-offset)]",
|
|
381
|
+
"sm:!max-w-none sm:!max-h-none",
|
|
382
|
+
// Always apply this to prevent any other max-w interference
|
|
384
383
|
className
|
|
385
384
|
),
|
|
386
385
|
children: [
|
|
@@ -444,7 +443,7 @@ var ExpandableChatToggle = ({
|
|
|
444
443
|
variant: "default",
|
|
445
444
|
onClick: toggleChat,
|
|
446
445
|
className: cn(
|
|
447
|
-
"w-16 h-16 rounded-full shadow-md flex items-center justify-center hover:shadow-
|
|
446
|
+
"w-16 h-16 rounded-full shadow-md flex items-center justify-center hover:shadow-2xl hover:shadow-black/40 transition-all duration-300 ease-out p-0 ring-0 hover:scale-110 hover:-translate-y-1 active:scale-95 active:translate-y-0",
|
|
448
447
|
!isOpen ? "!bg-transparent !border-0" : "",
|
|
449
448
|
className
|
|
450
449
|
),
|
|
@@ -768,7 +767,8 @@ function ChatUI({
|
|
|
768
767
|
" \u{1F49B}"
|
|
769
768
|
] }),
|
|
770
769
|
inputPlaceholder = "Message",
|
|
771
|
-
theme = "light"
|
|
770
|
+
theme = "light",
|
|
771
|
+
position = "right"
|
|
772
772
|
}) {
|
|
773
773
|
const [messages, setMessages] = (0, import_react4.useState)([]);
|
|
774
774
|
const [input, setInput] = (0, import_react4.useState)("");
|
|
@@ -917,7 +917,10 @@ function ChatUI({
|
|
|
917
917
|
}
|
|
918
918
|
};
|
|
919
919
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: "chat-ui-scope", className: cn("font-sans", theme === "dark" && "dark"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
920
|
-
showNotification && !isChatOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className:
|
|
920
|
+
showNotification && !isChatOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(
|
|
921
|
+
"fixed bottom-24 z-[9998] animate-in fade-in slide-in-from-bottom-5 duration-300",
|
|
922
|
+
position === "right" ? "right-5" : "left-5"
|
|
923
|
+
), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
|
|
921
924
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
922
925
|
Button2,
|
|
923
926
|
{
|
|
@@ -976,13 +979,16 @@ function ChatUI({
|
|
|
976
979
|
]
|
|
977
980
|
}
|
|
978
981
|
),
|
|
979
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className:
|
|
982
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(
|
|
983
|
+
"absolute -bottom-2 w-4 h-4 bg-background border-b border-r transform rotate-45 z-0",
|
|
984
|
+
position === "right" ? "right-6" : "left-6"
|
|
985
|
+
) })
|
|
980
986
|
] }) }),
|
|
981
987
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
982
988
|
ExpandableChat,
|
|
983
989
|
{
|
|
984
990
|
size: "lg",
|
|
985
|
-
position: "bottom-right",
|
|
991
|
+
position: position === "right" ? "bottom-right" : "bottom-left",
|
|
986
992
|
isOpen: isChatOpen,
|
|
987
993
|
onOpenChange: setIsChatOpen,
|
|
988
994
|
isMaximized,
|