@schmitech/chatbot-widget 0.3.4 โ†’ 0.3.5

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 (2) hide show
  1. package/README.md +208 -165
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,203 +1,246 @@
1
- # ๐Ÿ’ฌ Chatbot Widget
1
+ # How to Use the Chatbot Widget
2
2
 
3
- A simple, reusable chatbot widget seamlessly integrated into any website with minimal effort.
3
+ This guide will help you integrate the chatbot widget into your website with minimal effort.
4
4
 
5
- ---
5
+ ## Quick Start
6
6
 
7
- ## ๐ŸŒŸ Key Features
7
+ ### 1. Include the Widget Files
8
8
 
9
- - ๐Ÿš€ **Quick Integration:** One-line JavaScript integration
10
- - ๐Ÿ“ฑ **Responsive Design:** Mobile-friendly and adaptive layout
11
- - ๐ŸŽจ **Customizable Appearance:** Easy theme adjustments
12
- - ๐Ÿ“ **Rich Text:** Supports Markdown and automatic link formatting
13
- - ๐Ÿ–ฑ๏ธ **User-Friendly UI:** Scrollable conversation view with "scroll to top" shortcut
14
- - ๐Ÿงน **Clear Conversation:** Reset chat with a single click
9
+ Choose one of these methods to include the widget:
15
10
 
16
- ---
17
-
18
- ## ๐Ÿ› ๏ธ Installation
19
-
20
- ### โœ… Prerequisites
21
- - Node.js 18+ and npm
22
-
23
- ### ๐Ÿ“ฆ Setup Instructions
24
-
25
- 1. **Clone Repository**
26
-
27
- ```bash
28
- git https://github.com/schmitech/orbit.git
29
- cd orbit/widget
30
- ```
31
-
32
- 2. **Install & Build API**
33
-
34
- ```bash
35
- cd api
36
- npm install
37
- npm run build
38
- ```
39
-
40
- 3. **Install & Build Widget**
41
-
42
- ```bash
43
- cd ../widget
44
- npm install
45
- npm run build
46
- npm run build:bundle
47
- ```
48
-
49
- The build outputs are located in `widget/dist`:
50
- - `chatbot-widget.bundle.js` (JS + CSS combined, recommended)
51
- - `chatbot-widget.umd.js` (JS only, UMD)
52
- - `chatbot-widget.css` (CSS only)
53
-
54
- ---
55
-
56
- ## ๐ŸŽจ Customization
57
-
58
- See `demo.html` for customization examples:
59
-
60
- ```bash
61
- python3 -m http.server 8080
62
- ```
63
-
64
- ---
65
-
66
- ## ๐Ÿšข Deployment
67
-
68
- 1. Host `chatbot-widget.bundle.js` on a CDN or server.
69
- 2. Update your HTML with the script reference.
70
- 3. Ensure your chatbot API URL is accessible.
71
-
72
- ---
73
-
74
- ## โš™๏ธ Widget API Reference
75
-
76
- ### `initChatbotWidget(config)`
77
- Initializes widget configuration.
78
-
79
- | Parameter | Description | Required |
80
- |-----------|-------------|----------|
81
- | `apiUrl` | URL of chatbot API | โœ… Yes |
82
- | `apiKey` | API key for authentication | โœ… Yes |
83
- | `containerSelector` | CSS selector for widget container | โŒ No (Defaults to body) |
84
-
85
- Example configuration:
86
- ```javascript
87
- initChatbotWidget({
88
- apiUrl: 'https://your-api-url.com',
89
- apiKey: 'your-api-key',
90
- containerSelector: '#chat-container'
91
- });
92
- ```
93
-
94
- ---
95
-
96
- ## ๐Ÿง‘โ€๐Ÿ’ป Development Commands
97
-
98
- ```bash
99
- # Development server
100
- npm run dev
101
-
102
- # Code linting
103
- npm run lint
104
-
105
- # Production builds
106
- npm run build
107
- npm run build:bundle
108
-
109
- # Preview build
110
- npm run preview
111
- ```
112
-
113
- ---
114
-
115
- ## ๐Ÿ“ค Publish to npm
116
-
117
- **Build package:**
118
-
119
- ```bash
120
- npm run build
11
+ **Option 1 - All-in-one bundle (Recommended):**
12
+ ```html
13
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.bundle.js"></script>
121
14
  ```
122
15
 
123
- **Test locally (optional):**
124
-
125
- ```bash
126
- npm pack --dry-run
16
+ **Option 2 - Separate files:**
17
+ ```html
18
+ <script src="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.umd.js"></script>
19
+ <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@latest/dist/chatbot-widget.css">
127
20
  ```
128
21
 
129
- **Update version:**
22
+ ### 2. Initialize the Widget
130
23
 
131
- ```bash
132
- npm version [patch|minor|major]
133
- ```
24
+ Add this code to your website:
134
25
 
135
- **Publish:**
26
+ ```html
27
+ <script>
28
+ // Generate a unique session ID for this user
29
+ function generateUUID() {
30
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
31
+ const r = Math.random() * 16 | 0;
32
+ const v = c === 'x' ? r : (r & 0x3 | 0x8);
33
+ return v.toString(16);
34
+ });
35
+ }
136
36
 
137
- ```bash
138
- npm publish --access public
37
+ window.addEventListener('load', function() {
38
+ window.initChatbotWidget({
39
+ apiUrl: 'https://your-api-url.com', // Your chatbot API endpoint
40
+ apiKey: 'your-api-key', // Your API key
41
+ sessionId: generateUUID(), // Unique session ID
42
+ widgetConfig: {
43
+ header: {
44
+ title: "Chat Assistant"
45
+ },
46
+ welcome: {
47
+ title: "Welcome!",
48
+ description: "How can I help you today?"
49
+ },
50
+ suggestedQuestions: [
51
+ {
52
+ text: "How can you help me?",
53
+ query: "What can you do?"
54
+ },
55
+ {
56
+ text: "Contact support",
57
+ query: "How do I contact support?"
58
+ }
59
+ ],
60
+ theme: {
61
+ primary: '#2C3E50',
62
+ secondary: '#f97316',
63
+ background: '#ffffff',
64
+ text: {
65
+ primary: '#1a1a1a',
66
+ secondary: '#666666',
67
+ inverse: '#ffffff'
68
+ },
69
+ input: {
70
+ background: '#f9fafb',
71
+ border: '#e5e7eb'
72
+ },
73
+ message: {
74
+ user: '#2C3E50',
75
+ assistant: '#ffffff',
76
+ userText: '#ffffff'
77
+ },
78
+ suggestedQuestions: {
79
+ background: '#fff7ed',
80
+ hoverBackground: '#ffedd5',
81
+ text: '#2C3E50'
82
+ },
83
+ iconColor: '#f97316'
84
+ },
85
+ icon: "message-square"
86
+ }
87
+ });
88
+ });
89
+ </script>
139
90
  ```
140
91
 
141
- Package URL: [@schmitech/chatbot-widget](https://www.npmjs.com/package/@schmitech/chatbot-widget)
92
+ ## Advanced Usage
142
93
 
143
- ---
94
+ ### Custom Container
144
95
 
145
- ## ๐Ÿ”— Usage Examples
96
+ To place the widget in a specific container instead of the bottom-right corner:
146
97
 
147
- ### HTML Integration
148
-
149
- **Full bundle:**
150
98
  ```html
151
- <script src="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.bundle.js"></script>
99
+ <div id="my-chat-container"></div>
100
+
101
+ <script>
102
+ window.initChatbotWidget({
103
+ apiUrl: 'https://your-api-url.com',
104
+ apiKey: 'your-api-key',
105
+ containerSelector: '#my-chat-container',
106
+ widgetConfig: {
107
+ // ... your config here
108
+ }
109
+ });
110
+ </script>
152
111
  ```
153
112
 
154
- **UMD + CSS separately:**
155
- ```html
156
- <script src="https://unpkg.com/@schmitech/chatbot-widget@0.2.0"></script>
157
- <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.css">
158
- ```
113
+ ### React/TypeScript Integration
159
114
 
160
- ### JavaScript/TypeScript
115
+ For React applications, you can integrate the widget like this:
161
116
 
162
- ```javascript
163
- import { ChatWidget } from '@schmitech/chatbot-widget';
164
- import '@schmitech/chatbot-widget/bundle';
117
+ ```tsx
118
+ import { useEffect } from 'react';
119
+
120
+ function App() {
121
+ useEffect(() => {
122
+ if (typeof window !== 'undefined' && window.initChatbotWidget) {
123
+ window.initChatbotWidget({
124
+ apiUrl: process.env.REACT_APP_API_ENDPOINT,
125
+ apiKey: process.env.REACT_APP_API_KEY,
126
+ sessionId: generateUUID(),
127
+ widgetConfig: {
128
+ // ... your config here
129
+ }
130
+ });
131
+ }
132
+ }, []);
133
+
134
+ return (
135
+ // Your app content
136
+ );
137
+ }
165
138
  ```
166
139
 
167
- **React/TSX example:**
168
- ```tsx
169
- useEffect(() => {
170
- if (typeof window !== 'undefined' && window.initChatbotWidget) {
171
- window.initChatbotWidget({
172
- apiUrl: import.meta.env.VITE_API_ENDPOINT,
173
- apiKey: import.meta.env.VITE_API_KEY,
174
- widgetConfig: { /* widget configurations */ }
175
- });
176
- }
177
- }, []);
140
+ ## Configuration Options
141
+
142
+ ### Required Parameters
143
+
144
+ | Parameter | Type | Description |
145
+ |-----------|------|-------------|
146
+ | `apiUrl` | string | Your chatbot API endpoint URL |
147
+ | `apiKey` | string | Your API authentication key |
148
+
149
+ ### Optional Parameters
150
+
151
+ | Parameter | Type | Description |
152
+ |-----------|------|-------------|
153
+ | `sessionId` | string | Unique identifier for the chat session |
154
+ | `containerSelector` | string | CSS selector for custom container |
155
+ | `widgetConfig` | object | Widget appearance and behavior settings |
156
+
157
+ ### Widget Configuration
158
+
159
+ The `widgetConfig` object supports these properties:
160
+
161
+ ```typescript
162
+ {
163
+ header: {
164
+ title: string; // Widget header title
165
+ },
166
+ welcome: {
167
+ title: string; // Welcome message title
168
+ description: string; // Welcome message description
169
+ },
170
+ suggestedQuestions: [ // Array of suggested questions
171
+ {
172
+ text: string; // Button text
173
+ query: string; // Question to send
174
+ }
175
+ ],
176
+ theme: { // Theme customization
177
+ primary: string; // Primary color
178
+ secondary: string; // Secondary/accent color
179
+ background: string; // Background color
180
+ text: {
181
+ primary: string; // Primary text color
182
+ secondary: string; // Secondary text color
183
+ inverse: string; // Inverse text color
184
+ },
185
+ input: {
186
+ background: string; // Input background
187
+ border: string; // Input border color
188
+ },
189
+ message: {
190
+ user: string; // User message bubble color
191
+ assistant: string; // Assistant message bubble color
192
+ userText: string; // User message text color
193
+ },
194
+ suggestedQuestions: {
195
+ background: string; // Suggested questions background
196
+ hoverBackground: string; // Suggested questions hover background
197
+ text: string; // Suggested questions text color
198
+ },
199
+ iconColor: string; // Widget icon color
200
+ },
201
+ icon: string; // Widget icon type
202
+ }
178
203
  ```
179
204
 
180
- ---
205
+ ## Available Icons
181
206
 
182
- ## โš ๏ธ Known Issues & Troubleshooting
207
+ Choose from these built-in icons:
208
+ - `heart` โค๏ธ
209
+ - `message-square` ๐Ÿ’ฌ
210
+ - `message-circle` ๐Ÿ—จ๏ธ
211
+ - `help-circle` โ“
212
+ - `info` โ„น๏ธ
213
+ - `bot` ๐Ÿค–
214
+ - `sparkles` โœจ
183
215
 
184
- ### **Scrolling behavior:**
216
+ ## Customizing Height
185
217
 
186
- By default, widget height is `500px`. Customize with CSS:
218
+ To adjust the widget height, add this CSS to your website:
187
219
 
188
220
  ```css
189
221
  :root {
190
- --chat-container-height: 600px;
222
+ --chat-container-height: 600px; /* Default is 500px */
191
223
  }
192
224
  ```
193
225
 
194
- - Scrollbar auto-appears with long content
195
- - "Scroll to top" button shows after scrolling `200px`
196
- - Auto-scroll to bottom on new messages
197
- - Clear conversations easily from the header
226
+ ## Troubleshooting
227
+
228
+ 1. **Widget not appearing?**
229
+ - Check browser console for errors
230
+ - Verify API URL and key are correct
231
+ - Ensure all required scripts are loaded
232
+
233
+ 2. **API connection issues?**
234
+ - Verify your API endpoint is accessible
235
+ - Check API key is valid
236
+ - Ensure CORS is properly configured on your API
198
237
 
199
- ---
238
+ 3. **Styling conflicts?**
239
+ - The widget uses scoped CSS to prevent conflicts
240
+ - If you see styling issues, check for conflicting CSS rules
200
241
 
201
- ## ๐Ÿ“ƒ License
242
+ ## Support
202
243
 
203
- Apache 2.0 License - See [LICENSE](LICENSE).
244
+ For more help:
245
+ - Visit our [GitHub repository](https://github.com/schmitech/orbit)
246
+ - Open an issue on GitHub for bug reports
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@schmitech/chatbot-widget",
3
3
  "private": false,
4
- "version": "0.3.4",
4
+ "version": "0.3.5",
5
5
  "type": "module",
6
6
  "main": "./dist/chatbot-widget.umd.js",
7
7
  "module": "./dist/chatbot-widget.es.js",