@dmanikanta17/chat-ui 0.1.22 → 0.1.24
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 +2 -0
- package/dist/index.css +1 -1
- package/dist/index.js +190 -49
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +208 -51
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@ A modern, highly customizable, and responsive Chat UI component for React applic
|
|
|
12
12
|
- **Responsive Design**: Works seamlessly on desktop and mobile configurations.
|
|
13
13
|
- **Customizable**: Extensive options to match your brand's look and feel.
|
|
14
14
|
- **Interactive**: Notifications, sound effects, and smooth animations.
|
|
15
|
+
- **Voice Input**: Integrated speech-to-text for hands-free messaging.
|
|
16
|
+
- **Smart Controls**: Stop generation and feedback system.
|
|
15
17
|
|
|
16
18
|
---
|
|
17
19
|
|
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 .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}
|
|
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 .ml-1{margin-left:.25rem}#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 .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-l{border-left-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\/40{border-color:hsl(var(--chat-border)/.4)}#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-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}#chat-ui-scope .bg-red-500\/10{background-color:rgba(239,68,68,.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-current{fill:currentColor}#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-1\.5{padding-left:.375rem}#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-red-500{--tw-text-opacity:1;color:rgb(239 68 68/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-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}#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.js
CHANGED
|
@@ -786,6 +786,60 @@ function ChatUI({
|
|
|
786
786
|
}
|
|
787
787
|
setIsInitialized(true);
|
|
788
788
|
}, []);
|
|
789
|
+
const abortControllerRef = (0, import_react4.useRef)(null);
|
|
790
|
+
const [isListening, setIsListening] = (0, import_react4.useState)(false);
|
|
791
|
+
const recognitionRef = (0, import_react4.useRef)(null);
|
|
792
|
+
(0, import_react4.useEffect)(() => {
|
|
793
|
+
if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
|
|
794
|
+
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
795
|
+
recognitionRef.current = new SpeechRecognition();
|
|
796
|
+
recognitionRef.current.continuous = false;
|
|
797
|
+
recognitionRef.current.interimResults = false;
|
|
798
|
+
recognitionRef.current.onresult = (event) => {
|
|
799
|
+
const transcript = event.results[0][0].transcript;
|
|
800
|
+
setInput((prev) => prev ? `${prev} ${transcript}` : transcript);
|
|
801
|
+
setIsListening(false);
|
|
802
|
+
};
|
|
803
|
+
recognitionRef.current.onerror = (event) => {
|
|
804
|
+
console.error("Speech recognition error", event.error);
|
|
805
|
+
setIsListening(false);
|
|
806
|
+
};
|
|
807
|
+
recognitionRef.current.onend = () => {
|
|
808
|
+
setIsListening(false);
|
|
809
|
+
};
|
|
810
|
+
}
|
|
811
|
+
}, []);
|
|
812
|
+
const toggleVoiceInput = () => {
|
|
813
|
+
if (!recognitionRef.current) {
|
|
814
|
+
alert("Speech recognition is not supported in this browser.");
|
|
815
|
+
return;
|
|
816
|
+
}
|
|
817
|
+
if (isListening) {
|
|
818
|
+
recognitionRef.current.stop();
|
|
819
|
+
} else {
|
|
820
|
+
recognitionRef.current.start();
|
|
821
|
+
setIsListening(true);
|
|
822
|
+
}
|
|
823
|
+
};
|
|
824
|
+
const handleStop = () => {
|
|
825
|
+
if (abortControllerRef.current) {
|
|
826
|
+
abortControllerRef.current.abort();
|
|
827
|
+
abortControllerRef.current = null;
|
|
828
|
+
setIsLoading(false);
|
|
829
|
+
}
|
|
830
|
+
};
|
|
831
|
+
const handleFeedback = (messageId, type) => {
|
|
832
|
+
setMessages(
|
|
833
|
+
(prev) => prev.map((msg) => {
|
|
834
|
+
if (msg.id === messageId) {
|
|
835
|
+
const newFeedback = msg.feedback === type ? void 0 : type;
|
|
836
|
+
return { ...msg, feedback: newFeedback };
|
|
837
|
+
}
|
|
838
|
+
return msg;
|
|
839
|
+
})
|
|
840
|
+
);
|
|
841
|
+
console.log(`Feedback ${type} for message ${messageId}`);
|
|
842
|
+
};
|
|
789
843
|
const [isChatOpen, setIsChatOpen] = (0, import_react4.useState)(false);
|
|
790
844
|
const [isMaximized, setIsMaximized] = (0, import_react4.useState)(false);
|
|
791
845
|
const [showNotification, setShowNotification] = (0, import_react4.useState)(false);
|
|
@@ -823,44 +877,27 @@ function ChatUI({
|
|
|
823
877
|
setMessages([]);
|
|
824
878
|
localStorage.removeItem("chat-history");
|
|
825
879
|
};
|
|
826
|
-
const
|
|
827
|
-
|
|
828
|
-
if (!input.trim() || isLoading) return;
|
|
829
|
-
const userQuestion = input.trim();
|
|
830
|
-
const userMessage = {
|
|
831
|
-
id: Date.now().toString(),
|
|
832
|
-
role: "user",
|
|
833
|
-
content: userQuestion,
|
|
834
|
-
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
835
|
-
};
|
|
836
|
-
const history = messages.map((msg) => ({
|
|
837
|
-
role: msg.role,
|
|
838
|
-
content: msg.content
|
|
839
|
-
}));
|
|
840
|
-
setMessages((prev) => [...prev, userMessage]);
|
|
841
|
-
setInput("");
|
|
842
|
-
if (!endpoint) {
|
|
843
|
-
const errorMessage = {
|
|
844
|
-
id: (Date.now() + 1).toString(),
|
|
845
|
-
role: "assistant",
|
|
846
|
-
content: "Contact admin for api endpoint or check you have added correct endpoint or not contact developer at darapureddymanikanta8@gmail.com",
|
|
847
|
-
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
848
|
-
};
|
|
849
|
-
setMessages((prev) => [...prev, errorMessage]);
|
|
850
|
-
return;
|
|
851
|
-
}
|
|
880
|
+
const sendMessage = async (userText, currentHistory) => {
|
|
881
|
+
if (!endpoint) return;
|
|
852
882
|
setIsLoading(true);
|
|
883
|
+
abortControllerRef.current = new AbortController();
|
|
884
|
+
let currentBotMessageId = null;
|
|
853
885
|
try {
|
|
886
|
+
const historyForApi = currentHistory.map((msg) => ({
|
|
887
|
+
role: msg.role,
|
|
888
|
+
content: msg.content
|
|
889
|
+
}));
|
|
854
890
|
const response = await fetch(endpoint, {
|
|
855
891
|
method: "POST",
|
|
856
892
|
headers: {
|
|
857
893
|
"Content-Type": "application/json"
|
|
858
894
|
},
|
|
859
895
|
body: JSON.stringify({
|
|
860
|
-
query:
|
|
861
|
-
history,
|
|
896
|
+
query: userText,
|
|
897
|
+
history: historyForApi,
|
|
862
898
|
stream: true
|
|
863
|
-
})
|
|
899
|
+
}),
|
|
900
|
+
signal: abortControllerRef.current.signal
|
|
864
901
|
});
|
|
865
902
|
if (!response.body) {
|
|
866
903
|
throw new Error("ReadableStream not supported.");
|
|
@@ -882,8 +919,10 @@ function ChatUI({
|
|
|
882
919
|
id: botMessageId,
|
|
883
920
|
role: "assistant",
|
|
884
921
|
content: aiResponse,
|
|
885
|
-
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
922
|
+
createdAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
923
|
+
isStreaming: true
|
|
886
924
|
};
|
|
925
|
+
currentBotMessageId = botMessageId;
|
|
887
926
|
setMessages((prev) => [...prev, botMessage]);
|
|
888
927
|
} else {
|
|
889
928
|
setMessages((prev) => {
|
|
@@ -899,22 +938,67 @@ function ChatUI({
|
|
|
899
938
|
});
|
|
900
939
|
}
|
|
901
940
|
}
|
|
941
|
+
if (currentBotMessageId) {
|
|
942
|
+
setMessages(
|
|
943
|
+
(prev) => prev.map(
|
|
944
|
+
(msg) => msg.id === currentBotMessageId ? { ...msg, isStreaming: false } : msg
|
|
945
|
+
)
|
|
946
|
+
);
|
|
947
|
+
}
|
|
902
948
|
const audio = new Audio(soundSrc);
|
|
903
|
-
audio.play().catch((
|
|
949
|
+
audio.play().catch((e) => console.error("Error playing notification sound:", e));
|
|
904
950
|
} catch (error) {
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
951
|
+
if (currentBotMessageId) {
|
|
952
|
+
setMessages(
|
|
953
|
+
(prev) => prev.map(
|
|
954
|
+
(msg) => msg.id === currentBotMessageId ? { ...msg, isStreaming: false } : msg
|
|
955
|
+
)
|
|
956
|
+
);
|
|
957
|
+
} else if (abortControllerRef.current) {
|
|
958
|
+
}
|
|
959
|
+
if (error.name === "AbortError") {
|
|
960
|
+
console.log("Generation stopped by user");
|
|
961
|
+
} else {
|
|
962
|
+
console.error("Chat error:", error);
|
|
963
|
+
setMessages((prev) => [
|
|
964
|
+
...prev,
|
|
965
|
+
{
|
|
966
|
+
id: (Date.now() + 2).toString(),
|
|
967
|
+
role: "assistant",
|
|
968
|
+
content: "I apologize, but I encountered an error. Please try again later.",
|
|
969
|
+
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
970
|
+
}
|
|
971
|
+
]);
|
|
972
|
+
}
|
|
915
973
|
} finally {
|
|
916
974
|
setIsLoading(false);
|
|
975
|
+
abortControllerRef.current = null;
|
|
976
|
+
}
|
|
977
|
+
};
|
|
978
|
+
const handleSubmit = async (e) => {
|
|
979
|
+
e.preventDefault();
|
|
980
|
+
if (!input.trim() || isLoading) return;
|
|
981
|
+
const userQuestion = input.trim();
|
|
982
|
+
const userMessage = {
|
|
983
|
+
id: Date.now().toString(),
|
|
984
|
+
role: "user",
|
|
985
|
+
content: userQuestion,
|
|
986
|
+
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
987
|
+
};
|
|
988
|
+
const newMessages = [...messages, userMessage];
|
|
989
|
+
setMessages(newMessages);
|
|
990
|
+
setInput("");
|
|
991
|
+
if (!endpoint) {
|
|
992
|
+
const errorMessage = {
|
|
993
|
+
id: (Date.now() + 1).toString(),
|
|
994
|
+
role: "assistant",
|
|
995
|
+
content: "Contact admin for api endpoint or check you have added correct endpoint or not contact developer at darapureddymanikanta8@gmail.com",
|
|
996
|
+
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
997
|
+
};
|
|
998
|
+
setMessages((prev) => [...prev, errorMessage]);
|
|
999
|
+
return;
|
|
917
1000
|
}
|
|
1001
|
+
await sendMessage(userQuestion, messages);
|
|
918
1002
|
};
|
|
919
1003
|
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
1004
|
showNotification && !isChatOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(
|
|
@@ -1129,8 +1213,9 @@ function ChatUI({
|
|
|
1129
1213
|
"div",
|
|
1130
1214
|
{
|
|
1131
1215
|
className: cn(
|
|
1132
|
-
"
|
|
1133
|
-
message.role === "user" ? "flex-row" : "flex-row"
|
|
1216
|
+
"items-center gap-1.5 px-1 select-none",
|
|
1217
|
+
message.role === "user" ? "flex-row" : "flex-row",
|
|
1218
|
+
message.isStreaming ? "hidden" : "flex"
|
|
1134
1219
|
),
|
|
1135
1220
|
children: [
|
|
1136
1221
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] text-muted-foreground whitespace-nowrap", children: message.createdAt ? new Date(message.createdAt).toLocaleTimeString([], {
|
|
@@ -1156,7 +1241,41 @@ function ChatUI({
|
|
|
1156
1241
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Copy" })
|
|
1157
1242
|
]
|
|
1158
1243
|
}
|
|
1159
|
-
)
|
|
1244
|
+
),
|
|
1245
|
+
message.role === "assistant" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1 border-l border-border/40 pl-1.5 ml-1", children: [
|
|
1246
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1247
|
+
Button,
|
|
1248
|
+
{
|
|
1249
|
+
variant: "ghost",
|
|
1250
|
+
size: "icon",
|
|
1251
|
+
className: cn(
|
|
1252
|
+
"h-4 w-4 p-0 hover:bg-transparent transition-colors",
|
|
1253
|
+
message.feedback === "up" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
1254
|
+
),
|
|
1255
|
+
onClick: () => handleFeedback(message.id, "up"),
|
|
1256
|
+
children: [
|
|
1257
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ThumbsUp, { className: cn("h-3 w-3", message.feedback === "up" && "fill-current") }),
|
|
1258
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Helpful" })
|
|
1259
|
+
]
|
|
1260
|
+
}
|
|
1261
|
+
),
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1263
|
+
Button,
|
|
1264
|
+
{
|
|
1265
|
+
variant: "ghost",
|
|
1266
|
+
size: "icon",
|
|
1267
|
+
className: cn(
|
|
1268
|
+
"h-4 w-4 p-0 hover:bg-transparent transition-colors",
|
|
1269
|
+
message.feedback === "down" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
1270
|
+
),
|
|
1271
|
+
onClick: () => handleFeedback(message.id, "down"),
|
|
1272
|
+
children: [
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ThumbsDown, { className: cn("h-3 w-3", message.feedback === "down" && "fill-current") }),
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Not helpful" })
|
|
1275
|
+
]
|
|
1276
|
+
}
|
|
1277
|
+
)
|
|
1278
|
+
] }) })
|
|
1160
1279
|
]
|
|
1161
1280
|
}
|
|
1162
1281
|
)
|
|
@@ -1204,20 +1323,42 @@ function ChatUI({
|
|
|
1204
1323
|
}
|
|
1205
1324
|
),
|
|
1206
1325
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between px-2 pb-1", children: [
|
|
1207
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2"
|
|
1208
|
-
|
|
1326
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1327
|
+
Button,
|
|
1328
|
+
{
|
|
1329
|
+
type: "button",
|
|
1330
|
+
variant: "ghost",
|
|
1331
|
+
size: "icon",
|
|
1332
|
+
className: cn("h-6 w-6 rounded-full text-muted-foreground hover:text-primary transition-colors", isListening && "text-red-500 animate-pulse bg-red-500/10"),
|
|
1333
|
+
onClick: toggleVoiceInput,
|
|
1334
|
+
children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.MicOff, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Mic, { className: "h-4 w-4" })
|
|
1335
|
+
}
|
|
1336
|
+
) }),
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1338
|
+
Button,
|
|
1339
|
+
{
|
|
1340
|
+
type: "button",
|
|
1341
|
+
size: "icon",
|
|
1342
|
+
className: "h-8 w-8 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-200",
|
|
1343
|
+
onClick: handleStop,
|
|
1344
|
+
children: [
|
|
1345
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Square, { className: "h-3 w-3 fill-current" }),
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Stop Generation" })
|
|
1347
|
+
]
|
|
1348
|
+
}
|
|
1349
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1209
1350
|
Button,
|
|
1210
1351
|
{
|
|
1211
1352
|
type: "submit",
|
|
1212
1353
|
size: "icon",
|
|
1213
1354
|
className: "h-8 w-8 rounded-full transition-all duration-200",
|
|
1214
|
-
disabled: !input.trim()
|
|
1355
|
+
disabled: !input.trim(),
|
|
1215
1356
|
children: [
|
|
1216
|
-
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Send, { className: "h-4 w-4" }),
|
|
1217
1358
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Send" })
|
|
1218
1359
|
]
|
|
1219
1360
|
}
|
|
1220
|
-
)
|
|
1361
|
+
) })
|
|
1221
1362
|
] })
|
|
1222
1363
|
]
|
|
1223
1364
|
}
|