@gauravrathod674/super-customizable-chatbot 1.0.0 β 1.0.1
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/LICENSE +20 -20
- package/README.md +342 -342
- package/dist/style.css +1 -1
- package/package.json +164 -164
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Gaurav Rathod
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT of OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Gaurav Rathod
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT of OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,342 +1,342 @@
|
|
|
1
|
-
# Super Customizable React ChatBot
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
|
|
4
|
-
[](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
|
|
5
|
-
[](https://opensource.org/licenses/MIT)
|
|
6
|
-
|
|
7
|
-
A highly customizable, performant, and intelligent React chatbot component. Drop it into any project to add a powerful conversational AI interface, powered by **Google Gemini, OpenAI, Anthropic (Claude), and Groq**.
|
|
8
|
-
|
|
9
|
-
## π₯ Demo Preview
|
|
10
|
-
|
|
11
|
-
Hereβs how beautiful and functional this chatbot can look in your React app:
|
|
12
|
-
|
|
13
|
-
[](https://youtu.be/F8KLmFdN7wE?si=qD5w6proq_iC15hd)
|
|
14
|
-
|
|
15
|
-
π [Watch the full video on YouTube](https://youtu.be/F8KLmFdN7wE?si=qD5w6proq_iC15hd)
|
|
16
|
-
|
|
17
|
-
This demo showcases:
|
|
18
|
-
|
|
19
|
-
- Seamless integration in React
|
|
20
|
-
- Clean modal and widget views
|
|
21
|
-
- Typing animation with customizable themes
|
|
22
|
-
- Usage with OpenAI/Gemini/Claude/Groq APIs
|
|
23
|
-
|
|
24
|
-
## β¨ Features
|
|
25
|
-
|
|
26
|
-
- π€ **Multi-API Support**: Integrates directly with Google Gemini, OpenAI, Anthropic (Claude), and Groq.
|
|
27
|
-
- π§ **Custom Instructions**: Provide a system prompt to define the bot's persona, role, and rules.
|
|
28
|
-
- π **Model Selection**: Choose the exact AI model you want to use from any supported provider (e.g., `gemini-1.5-flash`, `gpt-4o-mini`, `claude-3-haiku`, `llama3-8b-8192`).
|
|
29
|
-
- π¨ **Deeply Customizable**: Use a comprehensive `theme` object to control every color, font, border, and size.
|
|
30
|
-
- π¬ **Typing Animation**: Engage users with a smooth, character-by-character typing animation for bot responses.
|
|
31
|
-
- π£οΈ **Speech-to-Text (optional)** β Built-in voice input using the browser's Web Speech API for hands-free interaction.
|
|
32
|
-
- π **File Uploads (optional)**: Allow users to upload images and files for multi-modal conversations with compatible models (Gemini, GPT-4o, Claude 3).
|
|
33
|
-
- 𧩠**Flexible Placement**: Display as a classic corner widget or a large, focused modal.
|
|
34
|
-
- π
**Markdown Rendering**: Automatically renders lists, bold/italic text, headers, and more.
|
|
35
|
-
- πͺ **Controlled & Uncontrolled Modes**: Use it as a simple plug-and-play component or take full control over its state.
|
|
36
|
-
- βΏ **Accessible**: Designed with accessibility in mind, including focus management and ARIA attributes.
|
|
37
|
-
|
|
38
|
-
## π¦ Installation
|
|
39
|
-
|
|
40
|
-
Install the package and its core peer dependencies from NPM.
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npm install @gauravrathod674/super-customizable-chatbot @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core framer-motion react-markdown
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### AI Provider SDKs
|
|
47
|
-
|
|
48
|
-
You also need to install the SDK for the specific AI provider you want to use. You only need to install the ones you plan to use.
|
|
49
|
-
|
|
50
|
-
```bash
|
|
51
|
-
# For Google Gemini
|
|
52
|
-
npm install @google/generative-ai
|
|
53
|
-
|
|
54
|
-
# For OpenAI
|
|
55
|
-
npm install openai
|
|
56
|
-
|
|
57
|
-
# For Anthropic (Claude)
|
|
58
|
-
npm install @anthropic-ai/sdk
|
|
59
|
-
|
|
60
|
-
# For Groq
|
|
61
|
-
npm install groq-sdk
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## π Usage
|
|
65
|
-
|
|
66
|
-
Import the component and its stylesheet, then render it with the appropriate API key.
|
|
67
|
-
|
|
68
|
-
### Example: Google Gemini
|
|
69
|
-
|
|
70
|
-
```jsx
|
|
71
|
-
import React from 'react';
|
|
72
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
73
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
74
|
-
|
|
75
|
-
function App() {
|
|
76
|
-
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<ChatBot
|
|
80
|
-
botName="Gemini Bot"
|
|
81
|
-
geminiApiKey={GEMINI_API_KEY}
|
|
82
|
-
geminiModelName="gemini-1.5-flash"
|
|
83
|
-
welcomeMessage="I am powered by Gemini. How can I help?"
|
|
84
|
-
/>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### Example: OpenAI
|
|
90
|
-
|
|
91
|
-
```jsx
|
|
92
|
-
import React from 'react';
|
|
93
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
94
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
95
|
-
|
|
96
|
-
function App() {
|
|
97
|
-
const OPENAI_API_KEY = "YOUR_OPENAI_API_KEY";
|
|
98
|
-
|
|
99
|
-
return (
|
|
100
|
-
<ChatBot
|
|
101
|
-
botName="OpenAI Bot"
|
|
102
|
-
openaiApiKey={OPENAI_API_KEY}
|
|
103
|
-
openaiModelName="gpt-4o-mini"
|
|
104
|
-
welcomeMessage="I am powered by OpenAI. How can I help?"
|
|
105
|
-
/>
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### Example: Anthropic (Claude)
|
|
111
|
-
|
|
112
|
-
```jsx
|
|
113
|
-
import React from 'react';
|
|
114
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
115
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
116
|
-
|
|
117
|
-
function App() {
|
|
118
|
-
const ANTHROPIC_API_KEY = "YOUR_ANTHROPIC_API_KEY";
|
|
119
|
-
|
|
120
|
-
return (
|
|
121
|
-
<ChatBot
|
|
122
|
-
botName="Claude Bot"
|
|
123
|
-
anthropicApiKey={ANTHROPIC_API_KEY}
|
|
124
|
-
anthropicModelName="claude-3-haiku-20240307"
|
|
125
|
-
welcomeMessage="I am powered by Claude. How can I help?"
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### Example: Groq
|
|
132
|
-
|
|
133
|
-
```jsx
|
|
134
|
-
import React from 'react';
|
|
135
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
136
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
137
|
-
|
|
138
|
-
function App() {
|
|
139
|
-
const GROQ_API_KEY = "YOUR_GROQ_API_KEY";
|
|
140
|
-
|
|
141
|
-
return (
|
|
142
|
-
<ChatBot
|
|
143
|
-
botName="Groq Bot"
|
|
144
|
-
grokApiKey={GROQ_API_KEY}
|
|
145
|
-
grokModelName="llama3-8b-8192"
|
|
146
|
-
welcomeMessage="I am powered by Groq. I am very fast. How can I help?"
|
|
147
|
-
/>
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
```
|
|
152
|
-
### Example: Speech to text and File Upload
|
|
153
|
-
|
|
154
|
-
```jsx
|
|
155
|
-
import React from 'react';
|
|
156
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
157
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
158
|
-
|
|
159
|
-
function App() {
|
|
160
|
-
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
|
|
161
|
-
|
|
162
|
-
return (
|
|
163
|
-
<ChatBot
|
|
164
|
-
botName="Gemini Bot"
|
|
165
|
-
geminiApiKey={GEMINI_API_KEY}
|
|
166
|
-
geminiModelName="gemini-1.5-flash"
|
|
167
|
-
enableMicrophone="enabled"
|
|
168
|
-
enableFileUpload={true}
|
|
169
|
-
fileUploadAccept="image/*,.pdf,.doc,.docx"
|
|
170
|
-
welcomeMessage="I am powered by Gemini. How can I help?"
|
|
171
|
-
/>
|
|
172
|
-
);
|
|
173
|
-
}
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
## π§ Custom Instructions (System Prompts)
|
|
177
|
-
|
|
178
|
-
Define a persona or set of rules for the AI using the `customInstruction` prop. The chatbot will adhere to this instruction throughout the conversation.
|
|
179
|
-
|
|
180
|
-
```jsx
|
|
181
|
-
<ChatBot
|
|
182
|
-
botName="Pirate Bot"
|
|
183
|
-
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
184
|
-
customInstruction="You are a helpful assistant who speaks like a pirate. Keep your answers brief and witty."
|
|
185
|
-
welcomeMessage="Ahoy there, matey! What be yer question?"
|
|
186
|
-
/>
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
## π¨ Theming & Customization
|
|
190
|
-
|
|
191
|
-
The component's biggest strength is its customizability. You can override any default style by passing a `theme` object.
|
|
192
|
-
|
|
193
|
-
### Example: Typing Animation & Custom Theme
|
|
194
|
-
|
|
195
|
-
This example creates a large, centered chatbot with a blurred backdrop, a unique color scheme, and the new typing animation.
|
|
196
|
-
|
|
197
|
-
```jsx
|
|
198
|
-
import React from 'react';
|
|
199
|
-
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
200
|
-
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
201
|
-
|
|
202
|
-
function ChatPage() {
|
|
203
|
-
const corporateTheme = {
|
|
204
|
-
header: { backgroundColor: '#1e3a8a' },
|
|
205
|
-
messages: {
|
|
206
|
-
userBackgroundColor: '#2563eb',
|
|
207
|
-
botBackgroundColor: '#eef2ff',
|
|
208
|
-
botTextColor: '#1e3a8a',
|
|
209
|
-
animation: 'typing', // <-- Enable the typing animation
|
|
210
|
-
},
|
|
211
|
-
window: {
|
|
212
|
-
placement: 'center',
|
|
213
|
-
backdrop: true,
|
|
214
|
-
backdropBlur: '3px',
|
|
215
|
-
},
|
|
216
|
-
input: { focusRingColor: '#2563eb' },
|
|
217
|
-
launcher: { backgroundColor: '#1e3a8a' },
|
|
218
|
-
};
|
|
219
|
-
|
|
220
|
-
return (
|
|
221
|
-
<ChatBot
|
|
222
|
-
botName="CorpBot"
|
|
223
|
-
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
224
|
-
theme={corporateTheme}
|
|
225
|
-
/>
|
|
226
|
-
);
|
|
227
|
-
}
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
## API Reference
|
|
232
|
-
|
|
233
|
-
The component can be customized through two main avenues: direct `props` for behavior and a `theme` object for appearance.
|
|
234
|
-
|
|
235
|
-
### Component Props
|
|
236
|
-
|
|
237
|
-
These props control the chatbot's functionality, identity, and AI integration.
|
|
238
|
-
|
|
239
|
-
| Prop | Type | Default | Description |
|
|
240
|
-
| --- | --- | --- | --- |
|
|
241
|
-
| `geminiApiKey` | `string` | `undefined` | Your Google Gemini API key. |
|
|
242
|
-
| `openaiApiKey` | `string` | `undefined` | Your OpenAI API key. |
|
|
243
|
-
| `anthropicApiKey`| `string` | `undefined` | Your Anthropic (Claude) API key. |
|
|
244
|
-
| `grokApiKey` | `string` | `undefined` | Your Groq API key. |
|
|
245
|
-
| `geminiModelName`| `string` | `'gemini-1.5-flash'` | The Gemini model to use. |
|
|
246
|
-
| `openaiModelName`| `string` | `'gpt-4o-mini'` | The OpenAI model to use. |
|
|
247
|
-
| `anthropicModelName`| `string` | `'claude-3-haiku-20240307'` | The Anthropic model to use. |
|
|
248
|
-
| `grokModelName` | `string` | `'llama3-8b-8192'` | The Groq model to use. |
|
|
249
|
-
| `customInstruction`| `string` | `''` | A system prompt to define the bot's persona or behavior. |
|
|
250
|
-
| `enableMicrophone` | `string` | `undefined` | Any truthy string to enable the Speech-to-Text microphone. Does not require actual credentials. |
|
|
251
|
-
| `enableFileUpload` | `boolean` | `false` | Enables the file attachment button. |
|
|
252
|
-
| `fileUploadAccept` | `string` | `*` | A string of accepted file types for the upload dialog (e.g., `"image/*, .pdf"`). |
|
|
253
|
-
| `onFileUpload` | `(file: File) => void` | `() => {}` | **Callback that fires when a user selects a file. |
|
|
254
|
-
| `botName` | `string` | `'ChatBot'` | The name displayed in the header. |
|
|
255
|
-
| `welcomeMessage` | `string` | `'Hello! How can I help?'` | The initial message displayed by the bot. |
|
|
256
|
-
| `placeholderText`| `string` | `'Type a message...'` | The placeholder text in the input field. |
|
|
257
|
-
| `botAvatar` | `React.ReactNode` | `<DefaultBotIcon />` | An icon or image URL for the bot's avatar. |
|
|
258
|
-
| `userAvatar` | `React.ReactNode` | `<DefaultUserIcon />` | An icon or image URL for the user's avatar. |
|
|
259
|
-
| `isOpen` | `boolean` | `false` | Controls whether the chat window is open initially. |
|
|
260
|
-
| `disabled` | `boolean` | `false` | Disables the input field and send button. |
|
|
261
|
-
| `onSend` | `(message: string) => void` | `() => {}` | Callback when a user sends a message. |
|
|
262
|
-
| `theme` | `object` | `{}` | A theme object to customize the UI. See table below. |
|
|
263
|
-
| `messages` | `Array<{id, text, sender}>` | `undefined` | **Advanced:** A controlled array of message objects. |
|
|
264
|
-
| `isTyping` | `boolean` | `false` | **Advanced:** Manually controls the bot's typing indicator. |
|
|
265
|
-
|
|
266
|
-
---
|
|
267
|
-
|
|
268
|
-
### Theming Options (`theme` object)
|
|
269
|
-
|
|
270
|
-
Pass a `theme` object to customize the chatbot's appearance. Any property you don't provide will fall back to its default value.
|
|
271
|
-
|
|
272
|
-
#### Launcher Button
|
|
273
|
-
|
|
274
|
-
| Path | Type | Default | Description |
|
|
275
|
-
| --- | --- | --- | --- |
|
|
276
|
-
| `launcher.backgroundColor` | `string` | `'#4f46e5'` | Background color of the launcher button. |
|
|
277
|
-
| `launcher.iconColor` | `string` | `'#ffffff'` | Color of the icon inside the launcher. |
|
|
278
|
-
| `launcher.size` | `string` | `'3.5rem'` | The width and height of the launcher button. |
|
|
279
|
-
|
|
280
|
-
#### Chat Window
|
|
281
|
-
|
|
282
|
-
| Path | Type | Default | Description |
|
|
283
|
-
| --- | --- | --- | --- |
|
|
284
|
-
| `window.placement` | `string` | `'bottom-right'` | Position on screen. Options: `'bottom-right'`, `'bottom-left'`, `'center'`. |
|
|
285
|
-
| `window.width` | `string` | `'22rem'` | Width of the chat window. (Defaults to `'80vw'` if placement is `'center'`). |
|
|
286
|
-
| `window.height` | `string` | `'30rem'` | Height of the chat window. (Defaults to `'80vh'` if placement is `'center'`). |
|
|
287
|
-
| `window.backgroundColor` | `string` | `'#ffffff'` | Background color of the main chat window. |
|
|
288
|
-
| `window.borderColor` | `string` | `'#e5e7eb'` | Border color of the main chat window. |
|
|
289
|
-
| `window.borderRadius` | `string` | `'0.75rem'` | Border radius of the main chat window. |
|
|
290
|
-
| `window.backdrop` | `boolean` | `false` | Show blurred backdrop (only for `'center'` placement). |
|
|
291
|
-
| `window.backdropColor` | `string` | `'rgba(0,0,0,0.4)'` | Color of the backdrop overlay. |
|
|
292
|
-
| `window.backdropBlur` | `string` | `'4px'` | CSS blur value for the backdrop. |
|
|
293
|
-
| `window.scrollbarThumbColor`| `string` | `'#a1a1aa'` | Color of the message list's scrollbar thumb. |
|
|
294
|
-
| `window.scrollbarTrackColor`| `string` | `'#f1f5f9'` | Color of the message list's scrollbar track. |
|
|
295
|
-
|
|
296
|
-
#### Header
|
|
297
|
-
|
|
298
|
-
| Path | Type | Default | Description |
|
|
299
|
-
| --- | --- | --- | --- |
|
|
300
|
-
| `header.backgroundColor` | `string` | `'#4f46e5'` | Background color of the header. |
|
|
301
|
-
| `header.textColor` | `string` | `'#ffffff'` | Text color for the bot's name in the header. |
|
|
302
|
-
| `header.fontFamily` | `string` | `'inherit'` | Font family for the header text. |
|
|
303
|
-
| `header.fontWeight` | `string` | `'600'` | Font weight for the header text. |
|
|
304
|
-
|
|
305
|
-
#### Messages
|
|
306
|
-
|
|
307
|
-
| Path | Type | Default | Description |
|
|
308
|
-
| --- | --- | --- | --- |
|
|
309
|
-
| `messages.userBackgroundColor` | `string` | `'#4f46e5'` | Background color for user message bubbles. |
|
|
310
|
-
| `messages.userTextColor` | `string` | `'#ffffff'` | Text color for user messages. |
|
|
311
|
-
| `messages.botBackgroundColor`| `string` | `'#f3f4f6'` | Background color for bot message bubbles. |
|
|
312
|
-
| `messages.botTextColor` | `string` | `'#1f2937'` | Text color for bot messages. |
|
|
313
|
-
| `messages.fontFamily` | `string` | `'inherit'` | Font family for all message text. |
|
|
314
|
-
| `messages.fontSize` | `string` | `'0.9rem'` | Font size for all message text. |
|
|
315
|
-
| `messages.showAvatars` | `boolean` | `true` | Whether to display avatars next to messages. |
|
|
316
|
-
| `messages.bubbleShape` | `string` | `'rounded'` | Shape of bubbles. Options: `'rounded'`, `'square'`. |
|
|
317
|
-
| `messages.bubblePointer` | `boolean` | `true` | Show a small pointer on the message bubbles. |
|
|
318
|
-
| `messages.animation` | `string` | `'fade-in'` | Bot response animation. Options: `'fade-in'`, `'typing'`, `'slide-up'`, `'zoom-in'`, `'flip'`, `'none'`. |
|
|
319
|
-
|
|
320
|
-
#### Markdown Customization (`messages.markdownStyles`)
|
|
321
|
-
|
|
322
|
-
| Path | Type | Default | Description |
|
|
323
|
-
| --- | --- | --- | --- |
|
|
324
|
-
| `markdownStyles.boldColor` | `string` | `inherit` | Color for `**bold**` text. |
|
|
325
|
-
| `markdownStyles.italicColor` | `string` | `inherit` | Color for `*italic*` text. |
|
|
326
|
-
| `markdownStyles.linkColor` | `string` | `'#3b82f6'` | Color for `[links](...)`. |
|
|
327
|
-
| `markdownStyles.codeColor` | `string` | `inherit` | Text color for `inline code`. |
|
|
328
|
-
| `markdownStyles.codeBackgroundColor` | `string` | `rgba(0,0,0,0.1)` | Background color for `inline code`. |
|
|
329
|
-
|
|
330
|
-
#### Input Area
|
|
331
|
-
|
|
332
|
-
| Path | Type | Default | Description |
|
|
333
|
-
| --- | --- | --- | --- |
|
|
334
|
-
| `input.backgroundColor` | `string` | `'#ffffff'` | Background color for the input footer area. |
|
|
335
|
-
| `input.textColor` | `string` | `'#1f2937'` | Text color for the user's typed input. |
|
|
336
|
-
| `input.placeholderTextColor`| `string` | `'#9ca3af'` | Color of the placeholder text. |
|
|
337
|
-
| `input.borderColor` | `string` | `'#e5e7eb'` | Border color for the text input field. |
|
|
338
|
-
| `input.focusRingColor` | `string` | `'#4f46e5'` | Color of the focus ring when the input is selected. |
|
|
339
|
-
|
|
340
|
-
## License
|
|
341
|
-
|
|
342
|
-
This project is licensed under the MIT License.
|
|
1
|
+
# Super Customizable React ChatBot
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
|
|
4
|
+
[](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
A highly customizable, performant, and intelligent React chatbot component. Drop it into any project to add a powerful conversational AI interface, powered by **Google Gemini, OpenAI, Anthropic (Claude), and Groq**.
|
|
8
|
+
|
|
9
|
+
## π₯ Demo Preview
|
|
10
|
+
|
|
11
|
+
Hereβs how beautiful and functional this chatbot can look in your React app:
|
|
12
|
+
|
|
13
|
+
[](https://youtu.be/F8KLmFdN7wE?si=qD5w6proq_iC15hd)
|
|
14
|
+
|
|
15
|
+
π [Watch the full video on YouTube](https://youtu.be/F8KLmFdN7wE?si=qD5w6proq_iC15hd)
|
|
16
|
+
|
|
17
|
+
This demo showcases:
|
|
18
|
+
|
|
19
|
+
- Seamless integration in React
|
|
20
|
+
- Clean modal and widget views
|
|
21
|
+
- Typing animation with customizable themes
|
|
22
|
+
- Usage with OpenAI/Gemini/Claude/Groq APIs
|
|
23
|
+
|
|
24
|
+
## β¨ Features
|
|
25
|
+
|
|
26
|
+
- π€ **Multi-API Support**: Integrates directly with Google Gemini, OpenAI, Anthropic (Claude), and Groq.
|
|
27
|
+
- π§ **Custom Instructions**: Provide a system prompt to define the bot's persona, role, and rules.
|
|
28
|
+
- π **Model Selection**: Choose the exact AI model you want to use from any supported provider (e.g., `gemini-1.5-flash`, `gpt-4o-mini`, `claude-3-haiku`, `llama3-8b-8192`).
|
|
29
|
+
- π¨ **Deeply Customizable**: Use a comprehensive `theme` object to control every color, font, border, and size.
|
|
30
|
+
- π¬ **Typing Animation**: Engage users with a smooth, character-by-character typing animation for bot responses.
|
|
31
|
+
- π£οΈ **Speech-to-Text (optional)** β Built-in voice input using the browser's Web Speech API for hands-free interaction.
|
|
32
|
+
- π **File Uploads (optional)**: Allow users to upload images and files for multi-modal conversations with compatible models (Gemini, GPT-4o, Claude 3).
|
|
33
|
+
- 𧩠**Flexible Placement**: Display as a classic corner widget or a large, focused modal.
|
|
34
|
+
- π
**Markdown Rendering**: Automatically renders lists, bold/italic text, headers, and more.
|
|
35
|
+
- πͺ **Controlled & Uncontrolled Modes**: Use it as a simple plug-and-play component or take full control over its state.
|
|
36
|
+
- βΏ **Accessible**: Designed with accessibility in mind, including focus management and ARIA attributes.
|
|
37
|
+
|
|
38
|
+
## π¦ Installation
|
|
39
|
+
|
|
40
|
+
Install the package and its core peer dependencies from NPM.
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npm install @gauravrathod674/super-customizable-chatbot @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core framer-motion react-markdown
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### AI Provider SDKs
|
|
47
|
+
|
|
48
|
+
You also need to install the SDK for the specific AI provider you want to use. You only need to install the ones you plan to use.
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
# For Google Gemini
|
|
52
|
+
npm install @google/generative-ai
|
|
53
|
+
|
|
54
|
+
# For OpenAI
|
|
55
|
+
npm install openai
|
|
56
|
+
|
|
57
|
+
# For Anthropic (Claude)
|
|
58
|
+
npm install @anthropic-ai/sdk
|
|
59
|
+
|
|
60
|
+
# For Groq
|
|
61
|
+
npm install groq-sdk
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## π Usage
|
|
65
|
+
|
|
66
|
+
Import the component and its stylesheet, then render it with the appropriate API key.
|
|
67
|
+
|
|
68
|
+
### Example: Google Gemini
|
|
69
|
+
|
|
70
|
+
```jsx
|
|
71
|
+
import React from 'react';
|
|
72
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
73
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
74
|
+
|
|
75
|
+
function App() {
|
|
76
|
+
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<ChatBot
|
|
80
|
+
botName="Gemini Bot"
|
|
81
|
+
geminiApiKey={GEMINI_API_KEY}
|
|
82
|
+
geminiModelName="gemini-1.5-flash"
|
|
83
|
+
welcomeMessage="I am powered by Gemini. How can I help?"
|
|
84
|
+
/>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Example: OpenAI
|
|
90
|
+
|
|
91
|
+
```jsx
|
|
92
|
+
import React from 'react';
|
|
93
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
94
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
95
|
+
|
|
96
|
+
function App() {
|
|
97
|
+
const OPENAI_API_KEY = "YOUR_OPENAI_API_KEY";
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<ChatBot
|
|
101
|
+
botName="OpenAI Bot"
|
|
102
|
+
openaiApiKey={OPENAI_API_KEY}
|
|
103
|
+
openaiModelName="gpt-4o-mini"
|
|
104
|
+
welcomeMessage="I am powered by OpenAI. How can I help?"
|
|
105
|
+
/>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Example: Anthropic (Claude)
|
|
111
|
+
|
|
112
|
+
```jsx
|
|
113
|
+
import React from 'react';
|
|
114
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
115
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
116
|
+
|
|
117
|
+
function App() {
|
|
118
|
+
const ANTHROPIC_API_KEY = "YOUR_ANTHROPIC_API_KEY";
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<ChatBot
|
|
122
|
+
botName="Claude Bot"
|
|
123
|
+
anthropicApiKey={ANTHROPIC_API_KEY}
|
|
124
|
+
anthropicModelName="claude-3-haiku-20240307"
|
|
125
|
+
welcomeMessage="I am powered by Claude. How can I help?"
|
|
126
|
+
/>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Example: Groq
|
|
132
|
+
|
|
133
|
+
```jsx
|
|
134
|
+
import React from 'react';
|
|
135
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
136
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
137
|
+
|
|
138
|
+
function App() {
|
|
139
|
+
const GROQ_API_KEY = "YOUR_GROQ_API_KEY";
|
|
140
|
+
|
|
141
|
+
return (
|
|
142
|
+
<ChatBot
|
|
143
|
+
botName="Groq Bot"
|
|
144
|
+
grokApiKey={GROQ_API_KEY}
|
|
145
|
+
grokModelName="llama3-8b-8192"
|
|
146
|
+
welcomeMessage="I am powered by Groq. I am very fast. How can I help?"
|
|
147
|
+
/>
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
### Example: Speech to text and File Upload
|
|
153
|
+
|
|
154
|
+
```jsx
|
|
155
|
+
import React from 'react';
|
|
156
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
157
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
158
|
+
|
|
159
|
+
function App() {
|
|
160
|
+
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
|
|
161
|
+
|
|
162
|
+
return (
|
|
163
|
+
<ChatBot
|
|
164
|
+
botName="Gemini Bot"
|
|
165
|
+
geminiApiKey={GEMINI_API_KEY}
|
|
166
|
+
geminiModelName="gemini-1.5-flash"
|
|
167
|
+
enableMicrophone="enabled"
|
|
168
|
+
enableFileUpload={true}
|
|
169
|
+
fileUploadAccept="image/*,.pdf,.doc,.docx"
|
|
170
|
+
welcomeMessage="I am powered by Gemini. How can I help?"
|
|
171
|
+
/>
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
## π§ Custom Instructions (System Prompts)
|
|
177
|
+
|
|
178
|
+
Define a persona or set of rules for the AI using the `customInstruction` prop. The chatbot will adhere to this instruction throughout the conversation.
|
|
179
|
+
|
|
180
|
+
```jsx
|
|
181
|
+
<ChatBot
|
|
182
|
+
botName="Pirate Bot"
|
|
183
|
+
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
184
|
+
customInstruction="You are a helpful assistant who speaks like a pirate. Keep your answers brief and witty."
|
|
185
|
+
welcomeMessage="Ahoy there, matey! What be yer question?"
|
|
186
|
+
/>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## π¨ Theming & Customization
|
|
190
|
+
|
|
191
|
+
The component's biggest strength is its customizability. You can override any default style by passing a `theme` object.
|
|
192
|
+
|
|
193
|
+
### Example: Typing Animation & Custom Theme
|
|
194
|
+
|
|
195
|
+
This example creates a large, centered chatbot with a blurred backdrop, a unique color scheme, and the new typing animation.
|
|
196
|
+
|
|
197
|
+
```jsx
|
|
198
|
+
import React from 'react';
|
|
199
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
200
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
201
|
+
|
|
202
|
+
function ChatPage() {
|
|
203
|
+
const corporateTheme = {
|
|
204
|
+
header: { backgroundColor: '#1e3a8a' },
|
|
205
|
+
messages: {
|
|
206
|
+
userBackgroundColor: '#2563eb',
|
|
207
|
+
botBackgroundColor: '#eef2ff',
|
|
208
|
+
botTextColor: '#1e3a8a',
|
|
209
|
+
animation: 'typing', // <-- Enable the typing animation
|
|
210
|
+
},
|
|
211
|
+
window: {
|
|
212
|
+
placement: 'center',
|
|
213
|
+
backdrop: true,
|
|
214
|
+
backdropBlur: '3px',
|
|
215
|
+
},
|
|
216
|
+
input: { focusRingColor: '#2563eb' },
|
|
217
|
+
launcher: { backgroundColor: '#1e3a8a' },
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
return (
|
|
221
|
+
<ChatBot
|
|
222
|
+
botName="CorpBot"
|
|
223
|
+
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
224
|
+
theme={corporateTheme}
|
|
225
|
+
/>
|
|
226
|
+
);
|
|
227
|
+
}
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
## API Reference
|
|
232
|
+
|
|
233
|
+
The component can be customized through two main avenues: direct `props` for behavior and a `theme` object for appearance.
|
|
234
|
+
|
|
235
|
+
### Component Props
|
|
236
|
+
|
|
237
|
+
These props control the chatbot's functionality, identity, and AI integration.
|
|
238
|
+
|
|
239
|
+
| Prop | Type | Default | Description |
|
|
240
|
+
| --- | --- | --- | --- |
|
|
241
|
+
| `geminiApiKey` | `string` | `undefined` | Your Google Gemini API key. |
|
|
242
|
+
| `openaiApiKey` | `string` | `undefined` | Your OpenAI API key. |
|
|
243
|
+
| `anthropicApiKey`| `string` | `undefined` | Your Anthropic (Claude) API key. |
|
|
244
|
+
| `grokApiKey` | `string` | `undefined` | Your Groq API key. |
|
|
245
|
+
| `geminiModelName`| `string` | `'gemini-1.5-flash'` | The Gemini model to use. |
|
|
246
|
+
| `openaiModelName`| `string` | `'gpt-4o-mini'` | The OpenAI model to use. |
|
|
247
|
+
| `anthropicModelName`| `string` | `'claude-3-haiku-20240307'` | The Anthropic model to use. |
|
|
248
|
+
| `grokModelName` | `string` | `'llama3-8b-8192'` | The Groq model to use. |
|
|
249
|
+
| `customInstruction`| `string` | `''` | A system prompt to define the bot's persona or behavior. |
|
|
250
|
+
| `enableMicrophone` | `string` | `undefined` | Any truthy string to enable the Speech-to-Text microphone. Does not require actual credentials. |
|
|
251
|
+
| `enableFileUpload` | `boolean` | `false` | Enables the file attachment button. |
|
|
252
|
+
| `fileUploadAccept` | `string` | `*` | A string of accepted file types for the upload dialog (e.g., `"image/*, .pdf"`). |
|
|
253
|
+
| `onFileUpload` | `(file: File) => void` | `() => {}` | **Callback that fires when a user selects a file. |
|
|
254
|
+
| `botName` | `string` | `'ChatBot'` | The name displayed in the header. |
|
|
255
|
+
| `welcomeMessage` | `string` | `'Hello! How can I help?'` | The initial message displayed by the bot. |
|
|
256
|
+
| `placeholderText`| `string` | `'Type a message...'` | The placeholder text in the input field. |
|
|
257
|
+
| `botAvatar` | `React.ReactNode` | `<DefaultBotIcon />` | An icon or image URL for the bot's avatar. |
|
|
258
|
+
| `userAvatar` | `React.ReactNode` | `<DefaultUserIcon />` | An icon or image URL for the user's avatar. |
|
|
259
|
+
| `isOpen` | `boolean` | `false` | Controls whether the chat window is open initially. |
|
|
260
|
+
| `disabled` | `boolean` | `false` | Disables the input field and send button. |
|
|
261
|
+
| `onSend` | `(message: string) => void` | `() => {}` | Callback when a user sends a message. |
|
|
262
|
+
| `theme` | `object` | `{}` | A theme object to customize the UI. See table below. |
|
|
263
|
+
| `messages` | `Array<{id, text, sender}>` | `undefined` | **Advanced:** A controlled array of message objects. |
|
|
264
|
+
| `isTyping` | `boolean` | `false` | **Advanced:** Manually controls the bot's typing indicator. |
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
### Theming Options (`theme` object)
|
|
269
|
+
|
|
270
|
+
Pass a `theme` object to customize the chatbot's appearance. Any property you don't provide will fall back to its default value.
|
|
271
|
+
|
|
272
|
+
#### Launcher Button
|
|
273
|
+
|
|
274
|
+
| Path | Type | Default | Description |
|
|
275
|
+
| --- | --- | --- | --- |
|
|
276
|
+
| `launcher.backgroundColor` | `string` | `'#4f46e5'` | Background color of the launcher button. |
|
|
277
|
+
| `launcher.iconColor` | `string` | `'#ffffff'` | Color of the icon inside the launcher. |
|
|
278
|
+
| `launcher.size` | `string` | `'3.5rem'` | The width and height of the launcher button. |
|
|
279
|
+
|
|
280
|
+
#### Chat Window
|
|
281
|
+
|
|
282
|
+
| Path | Type | Default | Description |
|
|
283
|
+
| --- | --- | --- | --- |
|
|
284
|
+
| `window.placement` | `string` | `'bottom-right'` | Position on screen. Options: `'bottom-right'`, `'bottom-left'`, `'center'`. |
|
|
285
|
+
| `window.width` | `string` | `'22rem'` | Width of the chat window. (Defaults to `'80vw'` if placement is `'center'`). |
|
|
286
|
+
| `window.height` | `string` | `'30rem'` | Height of the chat window. (Defaults to `'80vh'` if placement is `'center'`). |
|
|
287
|
+
| `window.backgroundColor` | `string` | `'#ffffff'` | Background color of the main chat window. |
|
|
288
|
+
| `window.borderColor` | `string` | `'#e5e7eb'` | Border color of the main chat window. |
|
|
289
|
+
| `window.borderRadius` | `string` | `'0.75rem'` | Border radius of the main chat window. |
|
|
290
|
+
| `window.backdrop` | `boolean` | `false` | Show blurred backdrop (only for `'center'` placement). |
|
|
291
|
+
| `window.backdropColor` | `string` | `'rgba(0,0,0,0.4)'` | Color of the backdrop overlay. |
|
|
292
|
+
| `window.backdropBlur` | `string` | `'4px'` | CSS blur value for the backdrop. |
|
|
293
|
+
| `window.scrollbarThumbColor`| `string` | `'#a1a1aa'` | Color of the message list's scrollbar thumb. |
|
|
294
|
+
| `window.scrollbarTrackColor`| `string` | `'#f1f5f9'` | Color of the message list's scrollbar track. |
|
|
295
|
+
|
|
296
|
+
#### Header
|
|
297
|
+
|
|
298
|
+
| Path | Type | Default | Description |
|
|
299
|
+
| --- | --- | --- | --- |
|
|
300
|
+
| `header.backgroundColor` | `string` | `'#4f46e5'` | Background color of the header. |
|
|
301
|
+
| `header.textColor` | `string` | `'#ffffff'` | Text color for the bot's name in the header. |
|
|
302
|
+
| `header.fontFamily` | `string` | `'inherit'` | Font family for the header text. |
|
|
303
|
+
| `header.fontWeight` | `string` | `'600'` | Font weight for the header text. |
|
|
304
|
+
|
|
305
|
+
#### Messages
|
|
306
|
+
|
|
307
|
+
| Path | Type | Default | Description |
|
|
308
|
+
| --- | --- | --- | --- |
|
|
309
|
+
| `messages.userBackgroundColor` | `string` | `'#4f46e5'` | Background color for user message bubbles. |
|
|
310
|
+
| `messages.userTextColor` | `string` | `'#ffffff'` | Text color for user messages. |
|
|
311
|
+
| `messages.botBackgroundColor`| `string` | `'#f3f4f6'` | Background color for bot message bubbles. |
|
|
312
|
+
| `messages.botTextColor` | `string` | `'#1f2937'` | Text color for bot messages. |
|
|
313
|
+
| `messages.fontFamily` | `string` | `'inherit'` | Font family for all message text. |
|
|
314
|
+
| `messages.fontSize` | `string` | `'0.9rem'` | Font size for all message text. |
|
|
315
|
+
| `messages.showAvatars` | `boolean` | `true` | Whether to display avatars next to messages. |
|
|
316
|
+
| `messages.bubbleShape` | `string` | `'rounded'` | Shape of bubbles. Options: `'rounded'`, `'square'`. |
|
|
317
|
+
| `messages.bubblePointer` | `boolean` | `true` | Show a small pointer on the message bubbles. |
|
|
318
|
+
| `messages.animation` | `string` | `'fade-in'` | Bot response animation. Options: `'fade-in'`, `'typing'`, `'slide-up'`, `'zoom-in'`, `'flip'`, `'none'`. |
|
|
319
|
+
|
|
320
|
+
#### Markdown Customization (`messages.markdownStyles`)
|
|
321
|
+
|
|
322
|
+
| Path | Type | Default | Description |
|
|
323
|
+
| --- | --- | --- | --- |
|
|
324
|
+
| `markdownStyles.boldColor` | `string` | `inherit` | Color for `**bold**` text. |
|
|
325
|
+
| `markdownStyles.italicColor` | `string` | `inherit` | Color for `*italic*` text. |
|
|
326
|
+
| `markdownStyles.linkColor` | `string` | `'#3b82f6'` | Color for `[links](...)`. |
|
|
327
|
+
| `markdownStyles.codeColor` | `string` | `inherit` | Text color for `inline code`. |
|
|
328
|
+
| `markdownStyles.codeBackgroundColor` | `string` | `rgba(0,0,0,0.1)` | Background color for `inline code`. |
|
|
329
|
+
|
|
330
|
+
#### Input Area
|
|
331
|
+
|
|
332
|
+
| Path | Type | Default | Description |
|
|
333
|
+
| --- | --- | --- | --- |
|
|
334
|
+
| `input.backgroundColor` | `string` | `'#ffffff'` | Background color for the input footer area. |
|
|
335
|
+
| `input.textColor` | `string` | `'#1f2937'` | Text color for the user's typed input. |
|
|
336
|
+
| `input.placeholderTextColor`| `string` | `'#9ca3af'` | Color of the placeholder text. |
|
|
337
|
+
| `input.borderColor` | `string` | `'#e5e7eb'` | Border color for the text input field. |
|
|
338
|
+
| `input.focusRingColor` | `string` | `'#4f46e5'` | Color of the focus ring when the input is selected. |
|
|
339
|
+
|
|
340
|
+
## License
|
|
341
|
+
|
|
342
|
+
This project is licensed under the MIT License.
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"β""β""β""β";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-left-1\/2{left:-50%}.-top-1\/2{top:-50%}.bottom-10{bottom:2.5rem}.bottom-5{bottom:1.25rem}.left-1\/2{left:50%}.left-5{left:1.25rem}.right-1{right:.25rem}.right-10{right:2.5rem}.right-5{right:1.25rem}.top-1{top:.25rem}.top-1\/2{top:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[200\%\]{height:200%}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[200\%\]{width:200%}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.max-w-\[200px\]{max-width:200px}.max-w-\[85\%\]{max-width:85%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.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 * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-\[--chatbot-input-border-color\]{border-color:var(--chatbot-input-border-color)}.border-blue-500\/20{border-color:#3b82f633}.border-white\/50{border-color:#ffffff80}.bg-\[--chatbot-bot-msg-bg\]{background-color:var(--chatbot-bot-msg-bg)}.bg-\[--chatbot-user-msg-bg\]{background-color:var(--chatbot-user-msg-bg)}.bg-black\/10{background-color:#0000001a}.bg-black\/20{background-color:#0003}.bg-black\/50{background-color:#00000080}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-slate-900\/70{background-color:#0f172ab3}.bg-slate-950{--tw-bg-opacity: 1;background-color:rgb(2 6 23 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white\/30{background-color:#ffffff4d}.bg-\[radial-gradient\(circle_at_center\,rgba\(139\,92\,246\,0\.3\)_0\,rgba\(139\,92\,246\,0\)_50\%\)\]{background-image:radial-gradient(circle at center,#8b5cf64d 0,#8b5cf600 50%)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-violet-500{--tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pr-6{padding-right:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[--chatbot-input-text-color\]{color:var(--chatbot-input-text-color)}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/70{color:#ffffffb3}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(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)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.shadow-slate-950\/50{--tw-shadow-color: rgb(2 6 23 / .5);--tw-shadow: var(--tw-shadow-colored)}.ring{--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)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-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);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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.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}.duration-300{transition-duration:.3s}.\[animation-delay\:-0\.15s\]{animation-delay:-.15s}.\[animation-delay\:-0\.3s\]{animation-delay:-.3s}.\[mask-image\:linear-gradient\(0deg\,\#000\,rgba\(0\,0\,0\,0\.6\)\)\]{-webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.6));mask-image:linear-gradient(0deg,#000,#0009)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-blue-400\/50:hover{border-color:#60a5fa80}.hover\:bg-black\/70:hover{background-color:#000000b3}.hover\:bg-slate-900:hover{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-violet-500\/20:hover{--tw-shadow-color: rgb(139 92 246 / .2);--tw-shadow: var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--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)}.focus-visible\:ring-2: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(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)}.focus-visible\:ring-\[--chatbot-launcher-bg\]:focus-visible{--tw-ring-color: var(--chatbot-launcher-bg)}.focus-visible\:ring-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.prose-headings\:my-2 :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.5rem;margin-bottom:.5rem}.prose-p\:my-0 :is(:where(p):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:0;margin-bottom:0}.prose-ul\:my-1 :is(:where(ul):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.25rem;margin-bottom:.25rem}.prose-li\:my-0\.5 :is(:where(li):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.125rem;margin-bottom:.125rem}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"β""β""β""β";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: #6b7280;--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: #9ca3af;--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-sm{font-size:.875rem;line-height:1.7142857}.prose-sm :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;line-height:1.5555556;margin-top:.8888889em;margin-bottom:.8888889em}.prose-sm :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.1111111em}.prose-sm :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.1428571em;margin-top:0;margin-bottom:.8em;line-height:1.2}.prose-sm :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.4285714em;margin-top:1.6em;margin-bottom:.8em;line-height:1.4}.prose-sm :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2857143em;margin-top:1.5555556em;margin-bottom:.4444444em;line-height:1.5555556}.prose-sm :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.4285714em;margin-bottom:.5714286em;line-height:1.4285714}.prose-sm :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;border-radius:.3125rem;padding-top:.1428571em;padding-inline-end:.3571429em;padding-bottom:.1428571em;padding-inline-start:.3571429em}.prose-sm :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em}.prose-sm :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.9em}.prose-sm :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.prose-sm :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.6666667;margin-top:1.6666667em;margin-bottom:1.6666667em;border-radius:.25rem;padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em;padding-inline-start:1.5714286em}.prose-sm :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;margin-bottom:.2857143em}.prose-sm :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4285714em}.prose-sm :where(.prose-sm>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose-sm>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose-sm>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em;margin-bottom:1.1428571em}.prose-sm :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.2857143em;padding-inline-start:1.5714286em}.prose-sm :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2.8571429em;margin-bottom:2.8571429em}.prose-sm :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.5}.prose-sm :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.6666667em;padding-inline-end:1em;padding-bottom:.6666667em;padding-inline-start:1em}.prose-sm :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose-sm :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose-sm :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7142857em;margin-bottom:1.7142857em}.prose-sm :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose-sm :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8571429em;line-height:1.3333333;margin-top:.6666667em}.prose-sm :where(.prose-sm>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose-sm>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-left-1\/2{left:-50%}.-top-1\/2{top:-50%}.bottom-10{bottom:2.5rem}.bottom-5{bottom:1.25rem}.left-1\/2{left:50%}.left-5{left:1.25rem}.right-1{right:.25rem}.right-10{right:2.5rem}.right-5{right:1.25rem}.top-1{top:.25rem}.top-1\/2{top:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[200\%\]{height:200%}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[200\%\]{width:200%}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.max-w-\[200px\]{max-width:200px}.max-w-\[85\%\]{max-width:85%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.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 * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-bl-none{border-bottom-left-radius:0}.rounded-br-none{border-bottom-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-\[--chatbot-input-border-color\]{border-color:var(--chatbot-input-border-color)}.border-blue-500\/20{border-color:#3b82f633}.border-white\/50{border-color:#ffffff80}.bg-\[--chatbot-bot-msg-bg\]{background-color:var(--chatbot-bot-msg-bg)}.bg-\[--chatbot-user-msg-bg\]{background-color:var(--chatbot-user-msg-bg)}.bg-black\/10{background-color:#0000001a}.bg-black\/20{background-color:#0003}.bg-black\/50{background-color:#00000080}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-slate-900\/70{background-color:#0f172ab3}.bg-slate-950{--tw-bg-opacity: 1;background-color:rgb(2 6 23 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white\/30{background-color:#ffffff4d}.bg-\[radial-gradient\(circle_at_center\,rgba\(139\,92\,246\,0\.3\)_0\,rgba\(139\,92\,246\,0\)_50\%\)\]{background-image:radial-gradient(circle at center,#8b5cf64d 0,#8b5cf600 50%)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-violet-500{--tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pr-6{padding-right:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[--chatbot-input-text-color\]{color:var(--chatbot-input-text-color)}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/70{color:#ffffffb3}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(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)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.shadow-slate-950\/50{--tw-shadow-color: rgb(2 6 23 / .5);--tw-shadow: var(--tw-shadow-colored)}.ring{--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)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-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);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)}.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}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.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}.duration-300{transition-duration:.3s}.\[animation-delay\:-0\.15s\]{animation-delay:-.15s}.\[animation-delay\:-0\.3s\]{animation-delay:-.3s}.\[mask-image\:linear-gradient\(0deg\,\#000\,rgba\(0\,0\,0\,0\.6\)\)\]{-webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.6));mask-image:linear-gradient(0deg,#000,#0009)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-blue-400\/50:hover{border-color:#60a5fa80}.hover\:bg-black\/70:hover{background-color:#000000b3}.hover\:bg-slate-900:hover{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:shadow-xl:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-violet-500\/20:hover{--tw-shadow-color: rgb(139 92 246 / .2);--tw-shadow: var(--tw-shadow-colored)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--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)}.focus-visible\:ring-2: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(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)}.focus-visible\:ring-\[--chatbot-launcher-bg\]:focus-visible{--tw-ring-color: var(--chatbot-launcher-bg)}.focus-visible\:ring-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.prose-headings\:my-2 :is(:where(h1,h2,h3,h4,h5,h6,th):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.5rem;margin-bottom:.5rem}.prose-p\:my-0 :is(:where(p):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:0;margin-bottom:0}.prose-ul\:my-1 :is(:where(ul):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.25rem;margin-bottom:.25rem}.prose-li\:my-0\.5 :is(:where(li):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.125rem;margin-bottom:.125rem}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
package/package.json
CHANGED
|
@@ -1,164 +1,164 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@gauravrathod674/super-customizable-chatbot",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
5
|
-
"license": "MIT",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
|
|
8
|
-
"keywords": [
|
|
9
|
-
"chatbot",
|
|
10
|
-
"react chatbot",
|
|
11
|
-
"customizable chatbot",
|
|
12
|
-
"gemini chatbot",
|
|
13
|
-
"openai chatbot",
|
|
14
|
-
"groq chatbot",
|
|
15
|
-
"claude chatbot",
|
|
16
|
-
"voice chatbot",
|
|
17
|
-
"file upload chatbot",
|
|
18
|
-
"markdown chatbot",
|
|
19
|
-
"super customizable chatbot",
|
|
20
|
-
"tailwind chatbot",
|
|
21
|
-
"messaging chatbot",
|
|
22
|
-
"customer support chatbot",
|
|
23
|
-
"chat bot",
|
|
24
|
-
"chatbots",
|
|
25
|
-
"react chat bot",
|
|
26
|
-
"react chatbots",
|
|
27
|
-
"ai chatbot",
|
|
28
|
-
"ai chat bot",
|
|
29
|
-
"ai chatbots",
|
|
30
|
-
"customizable chat bot",
|
|
31
|
-
"custom chatbot",
|
|
32
|
-
"custom chat bot",
|
|
33
|
-
"react chatbot component",
|
|
34
|
-
"chatbot component",
|
|
35
|
-
"chatbot components",
|
|
36
|
-
"react ai component",
|
|
37
|
-
"voice ai chatbot",
|
|
38
|
-
"voice assistant",
|
|
39
|
-
"chat widget",
|
|
40
|
-
"react chat widget",
|
|
41
|
-
"chat widgets",
|
|
42
|
-
"chat ui",
|
|
43
|
-
"chat interface",
|
|
44
|
-
"chat component",
|
|
45
|
-
"chat components",
|
|
46
|
-
"react chat modal",
|
|
47
|
-
"gemini ai chatbot",
|
|
48
|
-
"google gemini chatbot",
|
|
49
|
-
"openai chatbot",
|
|
50
|
-
"openai chat bot",
|
|
51
|
-
"gpt chatbot",
|
|
52
|
-
"gpt chat bot",
|
|
53
|
-
"gpt-4 chatbot",
|
|
54
|
-
"gpt-4o chatbot",
|
|
55
|
-
"claude ai chatbot",
|
|
56
|
-
"anthropic chatbot",
|
|
57
|
-
"anthropic ai chatbot",
|
|
58
|
-
"llama chatbot",
|
|
59
|
-
"llama ai chatbot",
|
|
60
|
-
"google chatbot",
|
|
61
|
-
"multi api chatbot",
|
|
62
|
-
"multi ai chatbot",
|
|
63
|
-
"multi model chatbot",
|
|
64
|
-
"accessible chatbot",
|
|
65
|
-
"customizable chatbot ui",
|
|
66
|
-
"chatbot ui customization",
|
|
67
|
-
"chatbot theming",
|
|
68
|
-
"animated chatbot",
|
|
69
|
-
"animation chatbot",
|
|
70
|
-
"typing animation chatbot",
|
|
71
|
-
"markdown chat bot",
|
|
72
|
-
"file upload chat bot",
|
|
73
|
-
"chatbot with speech-to-text",
|
|
74
|
-
"speech recognition chatbot",
|
|
75
|
-
"voice input chatbot",
|
|
76
|
-
"chatbot for react projects",
|
|
77
|
-
"chatbot npm package",
|
|
78
|
-
"chatbot github",
|
|
79
|
-
"tailwind chat bot",
|
|
80
|
-
"bot",
|
|
81
|
-
"bot component",
|
|
82
|
-
"bot components",
|
|
83
|
-
"bot ui",
|
|
84
|
-
"bot interface",
|
|
85
|
-
"chat",
|
|
86
|
-
"chat app",
|
|
87
|
-
"chat application",
|
|
88
|
-
"messaging bot",
|
|
89
|
-
"live chat bot",
|
|
90
|
-
"live chatbot",
|
|
91
|
-
"support chatbot",
|
|
92
|
-
"virtual assistant",
|
|
93
|
-
"virtual assistant chatbot",
|
|
94
|
-
"ai assistant"
|
|
95
|
-
],
|
|
96
|
-
"scripts": {
|
|
97
|
-
"dev": "vite",
|
|
98
|
-
"build": "vite build",
|
|
99
|
-
"lint": "eslint .",
|
|
100
|
-
"preview": "vite preview"
|
|
101
|
-
},
|
|
102
|
-
"files": [
|
|
103
|
-
"dist"
|
|
104
|
-
],
|
|
105
|
-
"main": "./dist/super-customizable-chatbot.umd.js",
|
|
106
|
-
"module": "./dist/super-customizable-chatbot.es.js",
|
|
107
|
-
"exports": {
|
|
108
|
-
".": {
|
|
109
|
-
"import": "./dist/super-customizable-chatbot.es.js",
|
|
110
|
-
"require": "./dist/super-customizable-chatbot.umd.js"
|
|
111
|
-
},
|
|
112
|
-
"./dist/style.css": {
|
|
113
|
-
"import": "./dist/style.css",
|
|
114
|
-
"require": "./dist/style.css"
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
"peerDependencies": {
|
|
118
|
-
"@anthropic-ai/sdk": ">=0.20.0",
|
|
119
|
-
"@fortawesome/fontawesome-svg-core": ">=6.0.0",
|
|
120
|
-
"@fortawesome/free-solid-svg-icons": ">=6.0.0",
|
|
121
|
-
"@fortawesome/react-fontawesome": ">=0.2.0",
|
|
122
|
-
"@google/generative-ai": ">=0.14.0",
|
|
123
|
-
"framer-motion": ">=11.0.0",
|
|
124
|
-
"groq-sdk": ">=0.5.0",
|
|
125
|
-
"openai": ">=4.0.0",
|
|
126
|
-
"react": ">=18.2.0",
|
|
127
|
-
"react-dom": ">=18.2.0",
|
|
128
|
-
"react-markdown": ">=9.0.0"
|
|
129
|
-
},
|
|
130
|
-
"peerDependenciesMeta": {
|
|
131
|
-
"@google/generative-ai": {
|
|
132
|
-
"optional": true
|
|
133
|
-
},
|
|
134
|
-
"openai": {
|
|
135
|
-
"optional": true
|
|
136
|
-
},
|
|
137
|
-
"@anthropic-ai/sdk": {
|
|
138
|
-
"optional": true
|
|
139
|
-
},
|
|
140
|
-
"groq-sdk": {
|
|
141
|
-
"optional": true
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
"devDependencies": {
|
|
145
|
-
"@anthropic-ai/sdk": "^0.22.0",
|
|
146
|
-
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
|
147
|
-
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
148
|
-
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
149
|
-
"@google/generative-ai": "^0.14.1",
|
|
150
|
-
"@tailwindcss/typography": "^0.5.13",
|
|
151
|
-
"@vitejs/plugin-react": "^4.2.1",
|
|
152
|
-
"autoprefixer": "^10.4.19",
|
|
153
|
-
"eslint": "^8.57.0",
|
|
154
|
-
"framer-motion": "^11.3.2",
|
|
155
|
-
"groq-sdk": "^0.5.0",
|
|
156
|
-
"openai": "^4.52.3",
|
|
157
|
-
"postcss": "^8.4.38",
|
|
158
|
-
"react": "^18.2.0",
|
|
159
|
-
"react-dom": "^18.2.0",
|
|
160
|
-
"react-markdown": "^9.0.1",
|
|
161
|
-
"tailwindcss": "^3.4.3",
|
|
162
|
-
"vite": "^5.2.0"
|
|
163
|
-
}
|
|
164
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@gauravrathod674/super-customizable-chatbot",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.0.1",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"chatbot",
|
|
10
|
+
"react chatbot",
|
|
11
|
+
"customizable chatbot",
|
|
12
|
+
"gemini chatbot",
|
|
13
|
+
"openai chatbot",
|
|
14
|
+
"groq chatbot",
|
|
15
|
+
"claude chatbot",
|
|
16
|
+
"voice chatbot",
|
|
17
|
+
"file upload chatbot",
|
|
18
|
+
"markdown chatbot",
|
|
19
|
+
"super customizable chatbot",
|
|
20
|
+
"tailwind chatbot",
|
|
21
|
+
"messaging chatbot",
|
|
22
|
+
"customer support chatbot",
|
|
23
|
+
"chat bot",
|
|
24
|
+
"chatbots",
|
|
25
|
+
"react chat bot",
|
|
26
|
+
"react chatbots",
|
|
27
|
+
"ai chatbot",
|
|
28
|
+
"ai chat bot",
|
|
29
|
+
"ai chatbots",
|
|
30
|
+
"customizable chat bot",
|
|
31
|
+
"custom chatbot",
|
|
32
|
+
"custom chat bot",
|
|
33
|
+
"react chatbot component",
|
|
34
|
+
"chatbot component",
|
|
35
|
+
"chatbot components",
|
|
36
|
+
"react ai component",
|
|
37
|
+
"voice ai chatbot",
|
|
38
|
+
"voice assistant",
|
|
39
|
+
"chat widget",
|
|
40
|
+
"react chat widget",
|
|
41
|
+
"chat widgets",
|
|
42
|
+
"chat ui",
|
|
43
|
+
"chat interface",
|
|
44
|
+
"chat component",
|
|
45
|
+
"chat components",
|
|
46
|
+
"react chat modal",
|
|
47
|
+
"gemini ai chatbot",
|
|
48
|
+
"google gemini chatbot",
|
|
49
|
+
"openai chatbot",
|
|
50
|
+
"openai chat bot",
|
|
51
|
+
"gpt chatbot",
|
|
52
|
+
"gpt chat bot",
|
|
53
|
+
"gpt-4 chatbot",
|
|
54
|
+
"gpt-4o chatbot",
|
|
55
|
+
"claude ai chatbot",
|
|
56
|
+
"anthropic chatbot",
|
|
57
|
+
"anthropic ai chatbot",
|
|
58
|
+
"llama chatbot",
|
|
59
|
+
"llama ai chatbot",
|
|
60
|
+
"google chatbot",
|
|
61
|
+
"multi api chatbot",
|
|
62
|
+
"multi ai chatbot",
|
|
63
|
+
"multi model chatbot",
|
|
64
|
+
"accessible chatbot",
|
|
65
|
+
"customizable chatbot ui",
|
|
66
|
+
"chatbot ui customization",
|
|
67
|
+
"chatbot theming",
|
|
68
|
+
"animated chatbot",
|
|
69
|
+
"animation chatbot",
|
|
70
|
+
"typing animation chatbot",
|
|
71
|
+
"markdown chat bot",
|
|
72
|
+
"file upload chat bot",
|
|
73
|
+
"chatbot with speech-to-text",
|
|
74
|
+
"speech recognition chatbot",
|
|
75
|
+
"voice input chatbot",
|
|
76
|
+
"chatbot for react projects",
|
|
77
|
+
"chatbot npm package",
|
|
78
|
+
"chatbot github",
|
|
79
|
+
"tailwind chat bot",
|
|
80
|
+
"bot",
|
|
81
|
+
"bot component",
|
|
82
|
+
"bot components",
|
|
83
|
+
"bot ui",
|
|
84
|
+
"bot interface",
|
|
85
|
+
"chat",
|
|
86
|
+
"chat app",
|
|
87
|
+
"chat application",
|
|
88
|
+
"messaging bot",
|
|
89
|
+
"live chat bot",
|
|
90
|
+
"live chatbot",
|
|
91
|
+
"support chatbot",
|
|
92
|
+
"virtual assistant",
|
|
93
|
+
"virtual assistant chatbot",
|
|
94
|
+
"ai assistant"
|
|
95
|
+
],
|
|
96
|
+
"scripts": {
|
|
97
|
+
"dev": "vite",
|
|
98
|
+
"build": "vite build",
|
|
99
|
+
"lint": "eslint .",
|
|
100
|
+
"preview": "vite preview"
|
|
101
|
+
},
|
|
102
|
+
"files": [
|
|
103
|
+
"dist"
|
|
104
|
+
],
|
|
105
|
+
"main": "./dist/super-customizable-chatbot.umd.js",
|
|
106
|
+
"module": "./dist/super-customizable-chatbot.es.js",
|
|
107
|
+
"exports": {
|
|
108
|
+
".": {
|
|
109
|
+
"import": "./dist/super-customizable-chatbot.es.js",
|
|
110
|
+
"require": "./dist/super-customizable-chatbot.umd.js"
|
|
111
|
+
},
|
|
112
|
+
"./dist/style.css": {
|
|
113
|
+
"import": "./dist/style.css",
|
|
114
|
+
"require": "./dist/style.css"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
"peerDependencies": {
|
|
118
|
+
"@anthropic-ai/sdk": ">=0.20.0",
|
|
119
|
+
"@fortawesome/fontawesome-svg-core": ">=6.0.0",
|
|
120
|
+
"@fortawesome/free-solid-svg-icons": ">=6.0.0",
|
|
121
|
+
"@fortawesome/react-fontawesome": ">=0.2.0",
|
|
122
|
+
"@google/generative-ai": ">=0.14.0",
|
|
123
|
+
"framer-motion": ">=11.0.0",
|
|
124
|
+
"groq-sdk": ">=0.5.0",
|
|
125
|
+
"openai": ">=4.0.0",
|
|
126
|
+
"react": ">=18.2.0",
|
|
127
|
+
"react-dom": ">=18.2.0",
|
|
128
|
+
"react-markdown": ">=9.0.0"
|
|
129
|
+
},
|
|
130
|
+
"peerDependenciesMeta": {
|
|
131
|
+
"@google/generative-ai": {
|
|
132
|
+
"optional": true
|
|
133
|
+
},
|
|
134
|
+
"openai": {
|
|
135
|
+
"optional": true
|
|
136
|
+
},
|
|
137
|
+
"@anthropic-ai/sdk": {
|
|
138
|
+
"optional": true
|
|
139
|
+
},
|
|
140
|
+
"groq-sdk": {
|
|
141
|
+
"optional": true
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
"devDependencies": {
|
|
145
|
+
"@anthropic-ai/sdk": "^0.22.0",
|
|
146
|
+
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
|
147
|
+
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
148
|
+
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
149
|
+
"@google/generative-ai": "^0.14.1",
|
|
150
|
+
"@tailwindcss/typography": "^0.5.13",
|
|
151
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
152
|
+
"autoprefixer": "^10.4.19",
|
|
153
|
+
"eslint": "^8.57.0",
|
|
154
|
+
"framer-motion": "^11.3.2",
|
|
155
|
+
"groq-sdk": "^0.5.0",
|
|
156
|
+
"openai": "^4.52.3",
|
|
157
|
+
"postcss": "^8.4.38",
|
|
158
|
+
"react": "^18.2.0",
|
|
159
|
+
"react-dom": "^18.2.0",
|
|
160
|
+
"react-markdown": "^9.0.1",
|
|
161
|
+
"tailwindcss": "^3.4.3",
|
|
162
|
+
"vite": "^5.2.0"
|
|
163
|
+
}
|
|
164
|
+
}
|