@gauravrathod674/super-customizable-chatbot 0.1.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.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +153 -0
  3. package/dist/custom-chatbot.es.js +6963 -0
  4. package/dist/custom-chatbot.umd.js +269 -0
  5. package/dist/style.css +1 -0
  6. package/dist/vite.svg +1 -0
  7. package/package.json +50 -0
package/LICENSE ADDED
@@ -0,0 +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
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ # Super Customizable React ChatBot
2
+
3
+ [![npm](https://img.shields.io/npm/v/@gauravrathod674/super-customizable-chatbot.svg)](https://www.npmjs.com/package/@gauravrathod674/super-customizable-chatbot)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
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
+ ![ChatBot Demo](https://i.imgur.com/g0QkY7G.png)
9
+
10
+ ## ✨ Features
11
+
12
+ - 🤖 **AI-Powered**: Integrates directly with Google Gemini for intelligent, human-like conversations.
13
+ - 🎨 **Deeply Customizable**: Use a comprehensive theme object to control every color, font, border, size, and even the scrollbar.
14
+ - 🧩 **Flexible Placement**: Display as a classic corner widget or as a large, focused modal in the center of the screen.
15
+ - 💅 **Markdown Rendering**: Automatically renders formatted lists, bold/italic text, headers, and more from the AI's response.
16
+ - 🚀 **Lightweight & Performant**: Built with Vite and optimized for production.
17
+ - ♿ **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
+
20
+ ## 📦 Installation
21
+
22
+ To get started, install the package from NPM. You will also need to install its peer dependencies if you don't already have them in your project.
23
+
24
+ ```bash
25
+ npm install @gauravrathod674/super-customizable-chatbot
26
+ ```
27
+
28
+ ## 🚀 Getting Started
29
+
30
+ Using the chatbot is simple. Import the component and its stylesheet, then render it with your Google Gemini API key.
31
+
32
+ ```jsx
33
+ import React from 'react';
34
+ import { ChatBot } from '@gauravrathod674/super-customizable-chatbot';
35
+
36
+ // Don't forget to import the styles!
37
+ import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
38
+
39
+ function App() {
40
+ // Get your API key from Google AI Studio: [https://aistudio.google.com/app/apikey](https://aistudio.google.com/app/apikey)
41
+ const GEMINI_API_KEY = "YOUR_API_KEY_HERE";
42
+
43
+ return (
44
+ <div>
45
+ <h1>My Awesome App</h1>
46
+ <ChatBot geminiApiKey={GEMINI_API_KEY} />
47
+ </div>
48
+ );
49
+ }
50
+
51
+ export default App;
52
+ ```
53
+
54
+ ## 🎨 Theming & Customization
55
+
56
+ The component's biggest strength is its customizability. You can override any default style by passing a `theme` object.
57
+
58
+ ### Example: Centered Modal with a Custom Theme
59
+
60
+ This example creates a large, centered chatbot with a blurred backdrop and a unique color scheme.
61
+
62
+ ```jsx
63
+ import React from 'react';
64
+ import { ChatBot } from '@gauravrathod674/super-customizable-chatbot';
65
+ import '@gauravrathod674/super-customizable-chatbot/dist/style.css';
66
+
67
+ function ChatPage() {
68
+ const GEMINI_API_KEY = "YOUR_API_KEY_HERE";
69
+
70
+ const corporateTheme = {
71
+ header: {
72
+ backgroundColor: '#0e7490', // A nice cyan
73
+ textColor: '#ffffff',
74
+ },
75
+ messages: {
76
+ userBackgroundColor: '#06b6d4',
77
+ botBackgroundColor: '#f0f9ff',
78
+ botTextColor: '#083344',
79
+ },
80
+ window: {
81
+ placement: 'center',
82
+ backdrop: true, // Enable the blur effect
83
+ backdropBlur: '3px',
84
+ scrollbarThumbColor: '#0891b2',
85
+ scrollbarTrackColor: '#f0f9ff',
86
+ },
87
+ input: {
88
+ focusRingColor: '#06b6d4',
89
+ },
90
+ launcher: {
91
+ backgroundColor: '#0e7490',
92
+ },
93
+ };
94
+
95
+ return (
96
+ <ChatBot
97
+ botName="Central Intelligence"
98
+ geminiApiKey={GEMINI_API_KEY}
99
+ theme={corporateTheme}
100
+ />
101
+ );
102
+ }
103
+ ```
104
+
105
+ ## API Reference
106
+
107
+ ### Component Props
108
+
109
+ | Prop | Type | Default | Description |
110
+ | ------------------ | --------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
111
+ | `geminiApiKey` | `string` | `undefined` | **Required.** Your Google Gemini API key. If not provided, the bot will simply echo user messages. |
112
+ | `botName` | `string` | `'ChatBot'` | The name displayed in the header. |
113
+ | `welcomeMessage` | `string` | `'Hello! How can I help?'` | The initial message displayed by the bot when it opens. |
114
+ | `placeholderText` | `string` | `'Type a message...'` | The placeholder text in the input field. |
115
+ | `botAvatar` | `React.ReactNode` | `<DefaultBotIcon />` | An icon or image URL for the bot's avatar. |
116
+ | `userAvatar` | `React.ReactNode` | `<DefaultUserIcon />` | An icon or image URL for the user's avatar. |
117
+ | `isOpen` | `boolean` | `false` | Controls whether the chat window is open or closed initially. |
118
+ | `disabled` | `boolean` | `false` | Disables the input field and send button. |
119
+ | `onSend` | `(message: string) => void` | `() => {}` | Callback function triggered when a user sends a message. |
120
+ | `theme` | `object` | `{}` | A theme object to customize the UI. See the Theming Options table below. |
121
+ | `messages` | `Array<{id, text, sender}>` | `undefined` | **For advanced use.** A controlled array of message objects. |
122
+ | `isTyping` | `boolean` | `false` | **For advanced use.** Manually controls the typing indicator for the bot. |
123
+
124
+ ### Theming Options (`theme` object)
125
+
126
+ You can customize the following properties within the `theme` object.
127
+
128
+ | Path | Type | Default | Description |
129
+ | ------------------------------------- | --------- | -------------- | ------------------------------------------------- |
130
+ | `launcher.backgroundColor` | `string` | `#4f46e5` | Background color of the launcher button. |
131
+ | `launcher.iconColor` | `string` | `#ffffff` | Color of the icon in the launcher. |
132
+ | `launcher.size` | `string` | `'3.5rem'` | Size (width & height) of the launcher button. |
133
+ | `header.backgroundColor` | `string` | `#4f46e5` | Background color of the chat window header. |
134
+ | `header.textColor` | `string` | `#ffffff` | Text color in the header. |
135
+ | `messages.userBackgroundColor` | `string` | `#4f46e5` | Background color for user message bubbles. |
136
+ | `messages.userTextColor` | `string` | `#ffffff` | Text color for user messages. |
137
+ | `messages.botBackgroundColor` | `string` | `#f3f4f6` | Background color for bot message bubbles. |
138
+ | `messages.botTextColor` | `string` | `#1f2937` | Text color for bot messages. |
139
+ | `messages.bubbleShape` | `string` | `'rounded'` | Shape of message bubbles (`'rounded'` or `'square'`). |
140
+ | `messages.showAvatars` | `boolean` | `true` | Whether to display avatars next to messages. |
141
+ | `window.placement` | `string` | `'bottom-right'` | `'bottom-right'`, `'bottom-left'`, or `'center'`. |
142
+ | `window.width` | `string` | `'22rem'` | Width of the chat window. |
143
+ | `window.height` | `string` | `'30rem'` | Height of the chat window. |
144
+ | `window.backdrop` | `boolean` | `false` | Show blurred backdrop (only for `center` placement). |
145
+ | `window.backdropBlur` | `string` | `'4px'` | CSS blur value for the backdrop. |
146
+ | `window.backdropColor` | `string` | `rgba(0,0,0,0.4)` | Color of the backdrop overlay. |
147
+ | `window.scrollbarThumbColor` | `string` | `#a1a1aa` | Color of the message list's scrollbar thumb. |
148
+ | `window.scrollbarTrackColor` | `string` | `#f1f5f9` | Color of the message list's scrollbar track. |
149
+ | `input.focusRingColor` | `string` | `#4f46e5` | Color of the focus ring on the input field. |
150
+
151
+ ## License
152
+
153
+ This project is licensed under the MIT License.