@dmanikanta17/chat-ui 0.1.16 → 0.1.18
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 +88 -41
- package/dist/index.css +1 -1
- package/dist/index.js +55 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +56 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,70 +2,114 @@
|
|
|
2
2
|
|
|
3
3
|
A modern, highly customizable, and responsive Chat UI component for React applications. This plugin is designed to help you get started with an AI Agent Chatbot in minutes.
|
|
4
4
|
|
|
5
|
+
**Now with support for vanilla HTML websites!**
|
|
6
|
+
|
|
5
7
|
## 🚀 Features
|
|
6
8
|
|
|
7
|
-
- **Easy Integration**: Drop-in component for
|
|
9
|
+
- **Easy Integration**: Drop-in component for React or plain HTML.
|
|
8
10
|
- **Real-time Streaming**: Built-in support for streaming AI responses.
|
|
9
11
|
- **Markdown Support**: Renders Markdown content with syntax highlighting.
|
|
10
12
|
- **Responsive Design**: Works seamlessly on desktop and mobile configurations.
|
|
11
|
-
- **Customizable**:
|
|
13
|
+
- **Customizable**: Extensive options to match your brand's look and feel.
|
|
12
14
|
- **Interactive**: Notifications, sound effects, and smooth animations.
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 📦 Installation & Usage
|
|
15
19
|
|
|
16
|
-
|
|
20
|
+
You can use this package in a **React** application or directly in an **HTML** website.
|
|
17
21
|
|
|
22
|
+
### Option 1: React Application
|
|
23
|
+
|
|
24
|
+
#### 1. Install via npm
|
|
18
25
|
```bash
|
|
19
26
|
npm install @dmanikanta17/chat-ui
|
|
20
27
|
```
|
|
21
28
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
29
|
+
#### 2. Import styles
|
|
30
|
+
In your root layout or component (e.g., `App.tsx`, `layout.tsx`):
|
|
31
|
+
```tsx
|
|
32
|
+
import "@dmanikanta17/chat-ui/styles.css";
|
|
33
|
+
```
|
|
25
34
|
|
|
26
|
-
|
|
35
|
+
#### 3. Add the Component
|
|
36
|
+
Import and use the `ChatUI` component. The only required prop is `endpoint`.
|
|
27
37
|
|
|
28
38
|
```tsx
|
|
39
|
+
"use client";
|
|
29
40
|
import { ChatUI } from "@dmanikanta17/chat-ui";
|
|
30
|
-
|
|
41
|
+
|
|
42
|
+
export function AIWidget() {
|
|
43
|
+
return (
|
|
44
|
+
<ChatUI
|
|
45
|
+
endpoint="https://your-api-domain.com/api/chat"
|
|
46
|
+
title="Support Assistant"
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
31
50
|
```
|
|
32
51
|
|
|
33
|
-
|
|
52
|
+
---
|
|
34
53
|
|
|
35
|
-
|
|
54
|
+
### Option 2: HTML Website
|
|
36
55
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
)
|
|
46
|
-
}
|
|
56
|
+
You can adds this chat widget to any static HTML website using our CDN.
|
|
57
|
+
|
|
58
|
+
**[Live Preview Here](https://dmanikanta-ai-plugin.vercel.app/)**
|
|
59
|
+
|
|
60
|
+
#### 1. Add CSS
|
|
61
|
+
Add this line inside the `<head>` tag:
|
|
62
|
+
```html
|
|
63
|
+
<link rel="stylesheet" href="https://dmanikanta-ai-plugin.vercel.app/chat-ui-widget.css">
|
|
47
64
|
```
|
|
48
65
|
|
|
49
|
-
|
|
66
|
+
#### 2. Add Container
|
|
67
|
+
Add an empty container where the widget should be mounted (usually at the end of `<body>`):
|
|
68
|
+
```html
|
|
69
|
+
<div id="chat-widget"></div>
|
|
70
|
+
```
|
|
50
71
|
|
|
51
|
-
|
|
72
|
+
#### 3. Add Script
|
|
73
|
+
Add the script tag at the end of your `<body>`:
|
|
74
|
+
```html
|
|
75
|
+
<script src="https://dmanikanta-ai-plugin.vercel.app/chat-ui-widget.js"></script>
|
|
76
|
+
```
|
|
52
77
|
|
|
53
|
-
|
|
78
|
+
#### 4. Initialize
|
|
79
|
+
Initialize the widget with your configuration:
|
|
80
|
+
```html
|
|
81
|
+
<script>
|
|
82
|
+
window.mountChatUI('chat-widget', {
|
|
83
|
+
endpoint: 'https://your-api-endpoint.com/chat',
|
|
84
|
+
title: 'Support Chat',
|
|
85
|
+
welcomeMessage: 'Hello! How can we help you today?',
|
|
86
|
+
description: 'We typically reply in a few minutes.',
|
|
87
|
+
logoSrc: 'https://cdn-icons-png.flaticon.com/512/6134/6134346.png',
|
|
88
|
+
theme: 'light', // or 'dark'
|
|
89
|
+
footerText: 'Powered by Custom RAG'
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
```
|
|
54
93
|
|
|
55
|
-
|
|
56
|
-
|------|------|:--------:|---------|-------------|
|
|
57
|
-
| `endpoint` | `string` | ✅ | - | The backend API URL for sending chat requests. |
|
|
58
|
-
| `logoSrc` | `string` | ❌ | `DEFAULT_LOGO` | URL for the chatbot avatar/logo image. |
|
|
59
|
-
| `soundSrc` | `string` | ❌ | `DEFAULT_SOUND` | URL for the notification sound played when a message arrives. |
|
|
60
|
-
| `title` | `string` | ❌ | `"AI Assistant"` | The title displayed in the chat header. |
|
|
61
|
-
| `welcomeMessage` | `string` | ❌ | `"Welcome..."` | The initial greeting message shown in the notification bubble. |
|
|
62
|
-
| `description` | `string` | ❌ | `"I'm here..."` | A short description text under the welcome message. |
|
|
63
|
-
| `footerText` | `ReactNode` | ❌ | `Default Footer` | Custom text or JSX to display in the footer of the chat window. |
|
|
64
|
-
| `inputPlaceholder` | `string` | ❌ | `"Message"` | Placeholder text for the input text area. |
|
|
65
|
-
| `theme` | `"light" \| "dark"` | ❌ | `"light"` | The color theme of the chat UI. |
|
|
94
|
+
---
|
|
66
95
|
|
|
67
|
-
|
|
96
|
+
## ⚙️ Configuration
|
|
68
97
|
|
|
98
|
+
These options work for both the **React Component props** and the **HTML Widget config object**.
|
|
99
|
+
|
|
100
|
+
| Property | Type | Default | Description |
|
|
101
|
+
|----------|------|---------|-------------|
|
|
102
|
+
| `endpoint` | `string` | **Required** | The backend API URL for chat requests. |
|
|
103
|
+
| `title` | `string` | `"AI Assistant"` | Title displayed in the chat header. |
|
|
104
|
+
| `welcomeMessage` | `string` | `"Welcome..."` | Initial greeting in the notification bubble. |
|
|
105
|
+
| `description` | `string` | `"I'm here..."` | Subtitle text under the welcome message. |
|
|
106
|
+
| `inputPlaceholder` | `string` | `"Message"` | Placeholder text for the input area. |
|
|
107
|
+
| `logoSrc` | `string` | `Default Logo` | URL for the chatbot avatar. |
|
|
108
|
+
| `soundSrc` | `string` | `Default Sound` | URL for the notification sound. |
|
|
109
|
+
| `theme` | `"light" \| "dark"` | `"light"` | Color theme of the interface. |
|
|
110
|
+
| `footerText` | `ReactNode` | `Default Footer` | Text to display in the footer. |
|
|
111
|
+
|
|
112
|
+
### React Example with Full Customization
|
|
69
113
|
```tsx
|
|
70
114
|
<ChatUI
|
|
71
115
|
endpoint="https://api.myapp.com/api/chat"
|
|
@@ -78,19 +122,22 @@ The `ChatUI` component provides various props to customize the appearance and be
|
|
|
78
122
|
/>
|
|
79
123
|
```
|
|
80
124
|
|
|
125
|
+
---
|
|
81
126
|
|
|
82
127
|
## 🧠 Configure RAG Pipeline
|
|
83
128
|
|
|
84
129
|
To make your chatbot intelligent and capable of answering questions based on your specific data (like your website content, personal pages, or documentation), you need to set up a RAG (Retrieval-Augmented Generation) pipeline.
|
|
85
130
|
|
|
86
|
-
This **Chat UI** handles the frontend
|
|
131
|
+
This **Chat UI** handles the frontend. For the backend:
|
|
87
132
|
|
|
88
133
|
1. **Visit**: [services.dmanikanta.me](https://services.dmanikanta.me)
|
|
89
|
-
2. **Select Integration**: Choose
|
|
90
|
-
3. **Get Endpoint**:
|
|
91
|
-
4. **Connect**: Pass that endpoint to the
|
|
134
|
+
2. **Select Integration**: Choose your data source (Website, Portfolio, Documentation, etc.).
|
|
135
|
+
3. **Get Endpoint**: Receive your unique API endpoint.
|
|
136
|
+
4. **Connect**: Pass that endpoint to the `ChatUI` component (or HTML widget).
|
|
92
137
|
|
|
93
|
-
This service
|
|
138
|
+
This service transforms your static content into an interactive AI agent.
|
|
139
|
+
|
|
140
|
+
---
|
|
94
141
|
|
|
95
142
|
## 🤝 Support
|
|
96
143
|
|
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-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\/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-transparent{background-color:transparent!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-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-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-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-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\: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 .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\:absolute{position:absolute}#chat-ui-scope .sm\:inset-auto{inset:auto}#chat-ui-scope .sm\:bottom-\[calc\(100\%\+10px\)\]{bottom:calc(100% + 10px)}#chat-ui-scope .sm\:left-0{left:0}#chat-ui-scope .sm\:left-auto{left:auto}#chat-ui-scope .sm\:right-0{right:0}#chat-ui-scope .sm\:right-5{right:1.25rem}#chat-ui-scope .sm\:top-5{top:1.25rem}#chat-ui-scope .sm\:hidden{display:none}#chat-ui-scope .sm\:h-\[80vh\]{height:80vh}#chat-ui-scope .sm\:h-full{height:100%}#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-\[90vw\]{width:90vw}#chat-ui-scope .sm\:w-full{width:100%}#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 .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}
|
package/dist/index.js
CHANGED
|
@@ -317,14 +317,21 @@ var chatConfig = {
|
|
|
317
317
|
"bottom-left": "bottom-5 left-5"
|
|
318
318
|
},
|
|
319
319
|
chatPositions: {
|
|
320
|
-
"bottom-right": "sm:
|
|
321
|
-
"bottom-left": "sm:
|
|
320
|
+
"bottom-right": "sm:right-5 sm:bottom-24",
|
|
321
|
+
"bottom-left": "sm:left-5 sm:bottom-24"
|
|
322
322
|
},
|
|
323
323
|
states: {
|
|
324
324
|
open: "pointer-events-auto opacity-100 visible scale-100 translate-y-0",
|
|
325
325
|
closed: "pointer-events-none opacity-0 invisible scale-100 sm:translate-y-5"
|
|
326
326
|
}
|
|
327
327
|
};
|
|
328
|
+
var sizeConfig = {
|
|
329
|
+
sm: { width: "min(90vw, 24rem)", height: "min(80vh, 500px)" },
|
|
330
|
+
md: { width: "min(90vw, 28rem)", height: "min(80vh, 600px)" },
|
|
331
|
+
lg: { width: "min(90vw, 32rem)", height: "min(80vh, 700px)" },
|
|
332
|
+
xl: { width: "min(90vw, 36rem)", height: "min(80vh, 800px)" },
|
|
333
|
+
full: { width: "100%", height: "100%" }
|
|
334
|
+
};
|
|
328
335
|
var ExpandableChat = ({
|
|
329
336
|
className,
|
|
330
337
|
position = "bottom-right",
|
|
@@ -333,6 +340,7 @@ var ExpandableChat = ({
|
|
|
333
340
|
children,
|
|
334
341
|
isOpen: controlledIsOpen,
|
|
335
342
|
onOpenChange,
|
|
343
|
+
isMaximized,
|
|
336
344
|
...props
|
|
337
345
|
}) => {
|
|
338
346
|
const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
|
|
@@ -357,11 +365,22 @@ var ExpandableChat = ({
|
|
|
357
365
|
"div",
|
|
358
366
|
{
|
|
359
367
|
ref: chatRef,
|
|
368
|
+
style: {
|
|
369
|
+
"--chat-width": isMaximized ? "60vw" : sizeConfig[size].width,
|
|
370
|
+
"--chat-height": isMaximized ? "90vh" : sizeConfig[size].height,
|
|
371
|
+
"--chat-right": isMaximized ? "20vw" : "1.25rem",
|
|
372
|
+
// 1.25rem = right-5
|
|
373
|
+
"--chat-bottom": isMaximized ? "5vh" : "6rem",
|
|
374
|
+
// 6rem = bottom-24
|
|
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"
|
|
376
|
+
},
|
|
360
377
|
className: cn(
|
|
361
|
-
"flex flex-col bg-background sm:rounded-lg shadow-md overflow-hidden
|
|
378
|
+
"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",
|
|
362
379
|
chatConfig.chatPositions[position],
|
|
363
380
|
chatConfig.dimensions[size],
|
|
364
381
|
isOpen ? chatConfig.states.open : chatConfig.states.closed,
|
|
382
|
+
"sm:w-[var(--chat-width)] sm:h-[var(--chat-height)] sm:right-[var(--chat-right)] sm:bottom-[var(--chat-bottom)]",
|
|
383
|
+
isMaximized ? "sm:!max-w-none sm:!max-h-none" : "",
|
|
365
384
|
className
|
|
366
385
|
),
|
|
367
386
|
children: [
|
|
@@ -425,7 +444,7 @@ var ExpandableChatToggle = ({
|
|
|
425
444
|
variant: "default",
|
|
426
445
|
onClick: toggleChat,
|
|
427
446
|
className: cn(
|
|
428
|
-
"w-16 h-16 rounded-full shadow-md flex items-center justify-center hover:shadow-lg hover:shadow-black/30 transition-all duration-300 p-0 ring-0",
|
|
447
|
+
"w-16 h-16 rounded-full shadow-md flex items-center justify-center hover:shadow-lg hover:shadow-black/30 transition-all duration-300 p-0 ring-0 hover:scale-110 active:scale-95",
|
|
429
448
|
!isOpen ? "!bg-transparent !border-0" : "",
|
|
430
449
|
className
|
|
431
450
|
),
|
|
@@ -768,6 +787,7 @@ function ChatUI({
|
|
|
768
787
|
setIsInitialized(true);
|
|
769
788
|
}, []);
|
|
770
789
|
const [isChatOpen, setIsChatOpen] = (0, import_react4.useState)(false);
|
|
790
|
+
const [isMaximized, setIsMaximized] = (0, import_react4.useState)(false);
|
|
771
791
|
const [showNotification, setShowNotification] = (0, import_react4.useState)(false);
|
|
772
792
|
const [isDismissed, setIsDismissed] = (0, import_react4.useState)(false);
|
|
773
793
|
(0, import_react4.useEffect)(() => {
|
|
@@ -965,6 +985,7 @@ function ChatUI({
|
|
|
965
985
|
position: "bottom-right",
|
|
966
986
|
isOpen: isChatOpen,
|
|
967
987
|
onOpenChange: setIsChatOpen,
|
|
988
|
+
isMaximized,
|
|
968
989
|
icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative h-full w-full overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
969
990
|
"img",
|
|
970
991
|
{
|
|
@@ -984,23 +1005,28 @@ function ChatUI({
|
|
|
984
1005
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex h-2 w-2 rounded-full bg-green-500 animate-pulse" }),
|
|
985
1006
|
"Online and ready to help"
|
|
986
1007
|
] }),
|
|
987
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.
|
|
988
|
-
Tooltip,
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1008
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute top-3 left-3 flex items-center gap-1 sm:top-5 sm:right-5 sm:left-auto", children: [
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { text: isMaximized ? "Minimize" : "Maximize", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1010
|
+
Button,
|
|
1011
|
+
{
|
|
1012
|
+
variant: "ghost",
|
|
1013
|
+
size: "icon",
|
|
1014
|
+
className: "hidden sm:flex h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/50",
|
|
1015
|
+
onClick: () => setIsMaximized(!isMaximized),
|
|
1016
|
+
children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Maximize2, { className: "h-4 w-4" })
|
|
1017
|
+
}
|
|
1018
|
+
) }),
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { text: "Reset Chat", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1020
|
+
Button,
|
|
1021
|
+
{
|
|
1022
|
+
variant: "ghost",
|
|
1023
|
+
size: "icon",
|
|
1024
|
+
className: "group h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/50",
|
|
1025
|
+
onClick: handleReset,
|
|
1026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.RefreshCcw, { className: "h-4 w-4 group-hover:animate-[spin_1s_linear_1]" })
|
|
1027
|
+
}
|
|
1028
|
+
) })
|
|
1029
|
+
] })
|
|
1004
1030
|
] }),
|
|
1005
1031
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExpandableChatBody, { className: "bg-background/50 bg-[radial-gradient(hsl(var(--chat-border))_1px,transparent_1px)] [background-size:16px_16px]", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-center justify-center h-full p-6 text-center animate-in fade-in duration-500", children: [
|
|
1006
1032
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-background rounded-full p-4 mb-6 shadow-md ring-1 ring-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative w-16 h-16 overflow-hidden rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
@@ -1023,6 +1049,7 @@ function ChatUI({
|
|
|
1023
1049
|
ChatBubble,
|
|
1024
1050
|
{
|
|
1025
1051
|
variant: message.role === "user" ? "sent" : "received",
|
|
1052
|
+
className: cn(isMaximized && "gap-4"),
|
|
1026
1053
|
children: [
|
|
1027
1054
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1028
1055
|
ChatBubbleAvatar,
|
|
@@ -1037,7 +1064,13 @@ function ChatUI({
|
|
|
1037
1064
|
ChatBubbleMessage,
|
|
1038
1065
|
{
|
|
1039
1066
|
variant: message.role === "user" ? "sent" : "received",
|
|
1040
|
-
className:
|
|
1067
|
+
className: cn(
|
|
1068
|
+
"max-w-full",
|
|
1069
|
+
message.role === "user" ? cn(
|
|
1070
|
+
"!px-3 !py-2 rounded-2xl border border-border/10 shadow-sm !text-[hsl(var(--chat-foreground))]",
|
|
1071
|
+
theme === "dark" ? "!bg-white/10" : "!bg-black/5"
|
|
1072
|
+
) : "!bg-transparent !text-[hsl(var(--chat-foreground))] !px-0 !py-0"
|
|
1073
|
+
),
|
|
1041
1074
|
children: message.role === "user" ? message.content : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1042
1075
|
"div",
|
|
1043
1076
|
{
|