@gauravrathod674/super-customizable-chatbot 0.1.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +216 -83
- package/dist/super-customizable-chatbot.es.js +752 -0
- package/dist/super-customizable-chatbot.umd.js +21 -0
- package/package.json +44 -23
- package/dist/custom-chatbot.es.js +0 -6614
- package/dist/custom-chatbot.umd.js +0 -261
package/README.md
CHANGED
|
@@ -3,150 +3,283 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
|
-
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
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
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**.
|
|
9
7
|
|
|
10
8
|
## ✨ Features
|
|
11
9
|
|
|
12
|
-
- 🤖 **
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
10
|
+
- 🤖 **Multi-API Support**: Integrates directly with Google Gemini, OpenAI, Anthropic (Claude), and Groq.
|
|
11
|
+
- 🧠 **Custom Instructions**: Provide a system prompt to define the bot's persona, role, and rules.
|
|
12
|
+
- 🚀 **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`).
|
|
13
|
+
- 🎨 **Deeply Customizable**: Use a comprehensive `theme` object to control every color, font, border, and size.
|
|
14
|
+
- 🎬 **Typing Animation**: Engage users with a smooth, character-by-character typing animation for bot responses.
|
|
15
|
+
- 🧩 **Flexible Placement**: Display as a classic corner widget or a large, focused modal.
|
|
16
|
+
- 💅 **Markdown Rendering**: Automatically renders lists, bold/italic text, headers, and more.
|
|
17
|
+
- 💪 **Controlled & Uncontrolled Modes**: Use it as a simple plug-and-play component or take full control over its state.
|
|
17
18
|
- ♿ **Accessible**: Designed with accessibility in mind, including focus management and ARIA attributes.
|
|
18
|
-
- 💪 **Controlled & Uncontrolled Modes**: Use it as a simple plug-and-play component or take full control over its state and messages.
|
|
19
19
|
|
|
20
20
|
## 📦 Installation
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
Install the package and its core peer dependencies from NPM.
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @gauravrathod674/super-customizable-chatbot @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core framer-motion react-markdown
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### AI Provider SDKs
|
|
29
|
+
|
|
30
|
+
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.
|
|
23
31
|
|
|
24
32
|
```bash
|
|
25
|
-
|
|
33
|
+
# For Google Gemini
|
|
34
|
+
npm install @google/generative-ai
|
|
35
|
+
|
|
36
|
+
# For OpenAI
|
|
37
|
+
npm install openai
|
|
38
|
+
|
|
39
|
+
# For Anthropic (Claude)
|
|
40
|
+
npm install @anthropic-ai/sdk
|
|
41
|
+
|
|
42
|
+
# For Groq
|
|
43
|
+
npm install groq-sdk
|
|
26
44
|
```
|
|
27
45
|
|
|
28
|
-
## 🚀
|
|
46
|
+
## 🚀 Usage
|
|
47
|
+
|
|
48
|
+
Import the component and its stylesheet, then render it with the appropriate API key.
|
|
29
49
|
|
|
30
|
-
|
|
50
|
+
### Example: Google Gemini
|
|
31
51
|
|
|
32
52
|
```jsx
|
|
33
53
|
import React from 'react';
|
|
34
|
-
import
|
|
54
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
55
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
56
|
+
|
|
57
|
+
function App() {
|
|
58
|
+
const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
|
|
35
59
|
|
|
36
|
-
|
|
60
|
+
return (
|
|
61
|
+
<ChatBot
|
|
62
|
+
botName="Gemini Bot"
|
|
63
|
+
geminiApiKey={GEMINI_API_KEY}
|
|
64
|
+
geminiModelName="gemini-1.5-flash"
|
|
65
|
+
welcomeMessage="I am powered by Gemini. How can I help?"
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Example: OpenAI
|
|
72
|
+
|
|
73
|
+
```jsx
|
|
74
|
+
import React from 'react';
|
|
75
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
37
76
|
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
38
77
|
|
|
39
78
|
function App() {
|
|
40
|
-
|
|
41
|
-
const GEMINI_API_KEY = "YOUR_API_KEY_HERE";
|
|
79
|
+
const OPENAI_API_KEY = "YOUR_OPENAI_API_KEY";
|
|
42
80
|
|
|
43
81
|
return (
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
82
|
+
<ChatBot
|
|
83
|
+
botName="OpenAI Bot"
|
|
84
|
+
openaiApiKey={OPENAI_API_KEY}
|
|
85
|
+
openaiModelName="gpt-4o-mini"
|
|
86
|
+
welcomeMessage="I am powered by OpenAI. How can I help?"
|
|
87
|
+
/>
|
|
48
88
|
);
|
|
49
89
|
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Example: Anthropic (Claude)
|
|
50
93
|
|
|
51
|
-
|
|
94
|
+
```jsx
|
|
95
|
+
import React from 'react';
|
|
96
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
97
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
98
|
+
|
|
99
|
+
function App() {
|
|
100
|
+
const ANTHROPIC_API_KEY = "YOUR_ANTHROPIC_API_KEY";
|
|
101
|
+
|
|
102
|
+
return (
|
|
103
|
+
<ChatBot
|
|
104
|
+
botName="Claude Bot"
|
|
105
|
+
anthropicApiKey={ANTHROPIC_API_KEY}
|
|
106
|
+
anthropicModelName="claude-3-haiku-20240307"
|
|
107
|
+
welcomeMessage="I am powered by Claude. How can I help?"
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Example: Groq
|
|
114
|
+
|
|
115
|
+
```jsx
|
|
116
|
+
import React from 'react';
|
|
117
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
118
|
+
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
119
|
+
|
|
120
|
+
function App() {
|
|
121
|
+
const GROQ_API_KEY = "YOUR_GROQ_API_KEY";
|
|
122
|
+
|
|
123
|
+
return (
|
|
124
|
+
<ChatBot
|
|
125
|
+
botName="Groq Bot"
|
|
126
|
+
grokApiKey={GROQ_API_KEY}
|
|
127
|
+
grokModelName="llama3-8b-8192"
|
|
128
|
+
welcomeMessage="I am powered by Groq. I am very fast. How can I help?"
|
|
129
|
+
/>
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## 🧠 Custom Instructions (System Prompts)
|
|
135
|
+
|
|
136
|
+
Define a persona or set of rules for the AI using the `customInstruction` prop. The chatbot will adhere to this instruction throughout the conversation.
|
|
137
|
+
|
|
138
|
+
```jsx
|
|
139
|
+
<ChatBot
|
|
140
|
+
botName="Pirate Bot"
|
|
141
|
+
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
142
|
+
customInstruction="You are a helpful assistant who speaks like a pirate. Keep your answers brief and witty."
|
|
143
|
+
welcomeMessage="Ahoy there, matey! What be yer question?"
|
|
144
|
+
/>
|
|
52
145
|
```
|
|
53
146
|
|
|
54
147
|
## 🎨 Theming & Customization
|
|
55
148
|
|
|
56
149
|
The component's biggest strength is its customizability. You can override any default style by passing a `theme` object.
|
|
57
150
|
|
|
58
|
-
### Example:
|
|
151
|
+
### Example: Typing Animation & Custom Theme
|
|
59
152
|
|
|
60
|
-
This example creates a large, centered chatbot with a blurred backdrop
|
|
153
|
+
This example creates a large, centered chatbot with a blurred backdrop, a unique color scheme, and the new typing animation.
|
|
61
154
|
|
|
62
155
|
```jsx
|
|
63
156
|
import React from 'react';
|
|
64
|
-
import
|
|
157
|
+
import ChatBot from '@gauravrathod674/super-customizable-chatbot';
|
|
65
158
|
import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
|
|
66
159
|
|
|
67
160
|
function ChatPage() {
|
|
68
|
-
const GEMINI_API_KEY = "YOUR_API_KEY_HERE";
|
|
69
|
-
|
|
70
161
|
const corporateTheme = {
|
|
71
|
-
header: {
|
|
72
|
-
backgroundColor: '#0e7490', // A nice cyan
|
|
73
|
-
textColor: '#ffffff',
|
|
74
|
-
},
|
|
162
|
+
header: { backgroundColor: '#1e3a8a' },
|
|
75
163
|
messages: {
|
|
76
|
-
userBackgroundColor: '#
|
|
77
|
-
botBackgroundColor: '#
|
|
78
|
-
botTextColor: '#
|
|
164
|
+
userBackgroundColor: '#2563eb',
|
|
165
|
+
botBackgroundColor: '#eef2ff',
|
|
166
|
+
botTextColor: '#1e3a8a',
|
|
167
|
+
animation: 'typing', // <-- Enable the typing animation
|
|
79
168
|
},
|
|
80
169
|
window: {
|
|
81
170
|
placement: 'center',
|
|
82
|
-
backdrop: true,
|
|
171
|
+
backdrop: true,
|
|
83
172
|
backdropBlur: '3px',
|
|
84
|
-
scrollbarThumbColor: '#0891b2',
|
|
85
|
-
scrollbarTrackColor: '#f0f9ff',
|
|
86
|
-
},
|
|
87
|
-
input: {
|
|
88
|
-
focusRingColor: '#06b6d4',
|
|
89
|
-
},
|
|
90
|
-
launcher: {
|
|
91
|
-
backgroundColor: '#0e7490',
|
|
92
173
|
},
|
|
174
|
+
input: { focusRingColor: '#2563eb' },
|
|
175
|
+
launcher: { backgroundColor: '#1e3a8a' },
|
|
93
176
|
};
|
|
94
177
|
|
|
95
178
|
return (
|
|
96
179
|
<ChatBot
|
|
97
|
-
botName="
|
|
98
|
-
|
|
180
|
+
botName="CorpBot"
|
|
181
|
+
openaiApiKey="YOUR_OPENAI_API_KEY"
|
|
99
182
|
theme={corporateTheme}
|
|
100
183
|
/>
|
|
101
184
|
);
|
|
102
185
|
}
|
|
103
186
|
```
|
|
104
187
|
|
|
188
|
+
|
|
105
189
|
## API Reference
|
|
106
190
|
|
|
191
|
+
The component can be customized through two main avenues: direct `props` for behavior and a `theme` object for appearance.
|
|
192
|
+
|
|
107
193
|
### Component Props
|
|
108
194
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
195
|
+
These props control the chatbot's functionality, identity, and AI integration.
|
|
196
|
+
|
|
197
|
+
| Prop | Type | Default | Description |
|
|
198
|
+
| --- | --- | --- | --- |
|
|
199
|
+
| `geminiApiKey` | `string` | `undefined` | Your Google Gemini API key. |
|
|
200
|
+
| `openaiApiKey` | `string` | `undefined` | Your OpenAI API key. |
|
|
201
|
+
| `anthropicApiKey`| `string` | `undefined` | Your Anthropic (Claude) API key. |
|
|
202
|
+
| `grokApiKey` | `string` | `undefined` | Your Groq API key. |
|
|
203
|
+
| `geminiModelName`| `string` | `'gemini-1.5-flash'` | The Gemini model to use. |
|
|
204
|
+
| `openaiModelName`| `string` | `'gpt-4o-mini'` | The OpenAI model to use. |
|
|
205
|
+
| `anthropicModelName`| `string` | `'claude-3-haiku-20240307'` | The Anthropic model to use. |
|
|
206
|
+
| `grokModelName` | `string` | `'llama3-8b-8192'` | The Groq model to use. |
|
|
207
|
+
| `customInstruction`| `string` | `''` | A system prompt to define the bot's persona or behavior. |
|
|
208
|
+
| `botName` | `string` | `'ChatBot'` | The name displayed in the header. |
|
|
209
|
+
| `welcomeMessage` | `string` | `'Hello! How can I help?'` | The initial message displayed by the bot. |
|
|
210
|
+
| `placeholderText`| `string` | `'Type a message...'` | The placeholder text in the input field. |
|
|
211
|
+
| `botAvatar` | `React.ReactNode` | `<DefaultBotIcon />` | An icon or image URL for the bot's avatar. |
|
|
212
|
+
| `userAvatar` | `React.ReactNode` | `<DefaultUserIcon />` | An icon or image URL for the user's avatar. |
|
|
213
|
+
| `isOpen` | `boolean` | `false` | Controls whether the chat window is open initially. |
|
|
214
|
+
| `disabled` | `boolean` | `false` | Disables the input field and send button. |
|
|
215
|
+
| `onSend` | `(message: string) => void` | `() => {}` | Callback when a user sends a message. |
|
|
216
|
+
| `theme` | `object` | `{}` | A theme object to customize the UI. See table below. |
|
|
217
|
+
| `messages` | `Array<{id, text, sender}>` | `undefined` | **Advanced:** A controlled array of message objects. |
|
|
218
|
+
| `isTyping` | `boolean` | `false` | **Advanced:** Manually controls the bot's typing indicator. |
|
|
219
|
+
|
|
220
|
+
---
|
|
123
221
|
|
|
124
222
|
### Theming Options (`theme` object)
|
|
125
223
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
| `launcher.
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
| `
|
|
141
|
-
| `window.
|
|
142
|
-
| `window.
|
|
143
|
-
| `window.
|
|
144
|
-
| `window.
|
|
145
|
-
| `window.
|
|
146
|
-
| `window.
|
|
147
|
-
| `window.
|
|
148
|
-
| `window.
|
|
149
|
-
| `
|
|
224
|
+
Pass a `theme` object to customize the chatbot's appearance. Any property you don't provide will fall back to its default value.
|
|
225
|
+
|
|
226
|
+
#### Launcher Button
|
|
227
|
+
|
|
228
|
+
| Path | Type | Default | Description |
|
|
229
|
+
| --- | --- | --- | --- |
|
|
230
|
+
| `launcher.backgroundColor` | `string` | `'#4f46e5'` | Background color of the launcher button. |
|
|
231
|
+
| `launcher.iconColor` | `string` | `'#ffffff'` | Color of the icon inside the launcher. |
|
|
232
|
+
| `launcher.size` | `string` | `'3.5rem'` | The width and height of the launcher button. |
|
|
233
|
+
|
|
234
|
+
#### Chat Window
|
|
235
|
+
|
|
236
|
+
| Path | Type | Default | Description |
|
|
237
|
+
| --- | --- | --- | --- |
|
|
238
|
+
| `window.placement` | `string` | `'bottom-right'` | Position on screen. Options: `'bottom-right'`, `'bottom-left'`, `'center'`. |
|
|
239
|
+
| `window.width` | `string` | `'22rem'` | Width of the chat window. (Defaults to `'80vw'` if placement is `'center'`). |
|
|
240
|
+
| `window.height` | `string` | `'30rem'` | Height of the chat window. (Defaults to `'80vh'` if placement is `'center'`). |
|
|
241
|
+
| `window.backgroundColor` | `string` | `'#ffffff'` | Background color of the main chat window. |
|
|
242
|
+
| `window.borderColor` | `string` | `'#e5e7eb'` | Border color of the main chat window. |
|
|
243
|
+
| `window.borderRadius` | `string` | `'0.75rem'` | Border radius of the main chat window. |
|
|
244
|
+
| `window.backdrop` | `boolean` | `false` | Show blurred backdrop (only for `'center'` placement). |
|
|
245
|
+
| `window.backdropColor` | `string` | `'rgba(0,0,0,0.4)'` | Color of the backdrop overlay. |
|
|
246
|
+
| `window.backdropBlur` | `string` | `'4px'` | CSS blur value for the backdrop. |
|
|
247
|
+
| `window.scrollbarThumbColor`| `string` | `'#a1a1aa'` | Color of the message list's scrollbar thumb. |
|
|
248
|
+
| `window.scrollbarTrackColor`| `string` | `'#f1f5f9'` | Color of the message list's scrollbar track. |
|
|
249
|
+
|
|
250
|
+
#### Header
|
|
251
|
+
|
|
252
|
+
| Path | Type | Default | Description |
|
|
253
|
+
| --- | --- | --- | --- |
|
|
254
|
+
| `header.backgroundColor` | `string` | `'#4f46e5'` | Background color of the header. |
|
|
255
|
+
| `header.textColor` | `string` | `'#ffffff'` | Text color for the bot's name in the header. |
|
|
256
|
+
| `header.fontFamily` | `string` | `'inherit'` | Font family for the header text. |
|
|
257
|
+
| `header.fontWeight` | `string` | `'600'` | Font weight for the header text. |
|
|
258
|
+
|
|
259
|
+
#### Messages
|
|
260
|
+
|
|
261
|
+
| Path | Type | Default | Description |
|
|
262
|
+
| --- | --- | --- | --- |
|
|
263
|
+
| `messages.userBackgroundColor` | `string` | `'#4f46e5'` | Background color for user message bubbles. |
|
|
264
|
+
| `messages.userTextColor` | `string` | `'#ffffff'` | Text color for user messages. |
|
|
265
|
+
| `messages.botBackgroundColor`| `string` | `'#f3f4f6'` | Background color for bot message bubbles. |
|
|
266
|
+
| `messages.botTextColor` | `string` | `'#1f2937'` | Text color for bot messages. |
|
|
267
|
+
| `messages.fontFamily` | `string` | `'inherit'` | Font family for all message text. |
|
|
268
|
+
| `messages.fontSize` | `string` | `'0.9rem'` | Font size for all message text. |
|
|
269
|
+
| `messages.showAvatars` | `boolean` | `true` | Whether to display avatars next to messages. |
|
|
270
|
+
| `messages.bubbleShape` | `string` | `'rounded'` | Shape of bubbles. Options: `'rounded'`, `'square'`. |
|
|
271
|
+
| `messages.bubblePointer` | `boolean` | `true` | Show a small pointer on the message bubbles. |
|
|
272
|
+
| `messages.animation` | `string` | `'fade-in'` | Bot response animation. Options: `'fade-in'`, `'typing'`, `'slide-up'`, `'zoom-in'`, `'flip'`, `'none'`. |
|
|
273
|
+
|
|
274
|
+
#### Input Area
|
|
275
|
+
|
|
276
|
+
| Path | Type | Default | Description |
|
|
277
|
+
| --- | --- | --- | --- |
|
|
278
|
+
| `input.backgroundColor` | `string` | `'#ffffff'` | Background color for the input footer area. |
|
|
279
|
+
| `input.textColor` | `string` | `'#1f2937'` | Text color for the user's typed input. |
|
|
280
|
+
| `input.placeholderTextColor`| `string` | `'#9ca3af'` | Color of the placeholder text. |
|
|
281
|
+
| `input.borderColor` | `string` | `'#e5e7eb'` | Border color for the text input field. |
|
|
282
|
+
| `input.focusRingColor` | `string` | `'#4f46e5'` | Color of the focus ring when the input is selected. |
|
|
150
283
|
|
|
151
284
|
## License
|
|
152
285
|
|