@mobil80-dev/chatbot-widget 2.0.6 → 2.0.7

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 (4) hide show
  1. package/dist/index.js +37 -21
  2. package/dist/index.umd.js +37 -21
  3. package/index.js +37 -21
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -168,27 +168,43 @@ function updateCard (config) {
168
168
  const primaryColor = config.primaryColor || '#2563eb';
169
169
 
170
170
  card.innerHTML = `
171
- <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
172
- Powered by <strong>VaultChat</strong>
173
- </div>
174
-
175
- <div id="vc-messages" style="
176
- flex:1;
177
- padding:12px;
178
- overflow-y:auto;
179
- background:${colors.messagesBg};
180
- color:${colors.text}">
181
- </div>
182
-
183
- <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
184
- <input id="vc-input" placeholder="Type your message..."
185
- style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
186
- background:${colors.inputBg};color:${colors.text}" />
187
- <button id="vc-send" style="
188
- margin-left:8px;padding:0 14px;border:none;border-radius:8px;
189
- background:${primaryColor};color:white;cursor:pointer">➤</button>
190
- </div>
191
- `;
171
+ <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
172
+ <span>Powered by <strong>VaultChat</strong></span>
173
+ <button id="vc-close" style="
174
+ background:none;
175
+ border:none;
176
+ color:${colors.mutedText};
177
+ font-size:18px;
178
+ cursor:pointer;
179
+ font-weight:bold;
180
+ padding:0;
181
+ line-height:1;">✖</button>
182
+ </div>
183
+
184
+ <div id="vc-messages" style="
185
+ flex:1;
186
+ padding:12px;
187
+ overflow-y:auto;
188
+ background:${colors.messagesBg};
189
+ color:${colors.text}">
190
+ </div>
191
+
192
+ <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
193
+ <input id="vc-input" placeholder="Type your message..."
194
+ style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
195
+ background:${colors.inputBg};color:${colors.text}" />
196
+ <button id="vc-send" style="
197
+ margin-left:8px;padding:0 14px;border:none;border-radius:8px;
198
+ background:${primaryColor};color:white;cursor:pointer">➤</button>
199
+ </div>
200
+ `;
201
+
202
+ // Add event listener for close button
203
+ const closeBtn = card.querySelector('#vc-close');
204
+ closeBtn.onclick = () => {
205
+ isOpen = false;
206
+ vcCard.style.display = 'none';
207
+ };
192
208
 
193
209
  Object.assign(card.style, {
194
210
  position: 'fixed',
package/dist/index.umd.js CHANGED
@@ -174,27 +174,43 @@
174
174
  const primaryColor = config.primaryColor || '#2563eb';
175
175
 
176
176
  card.innerHTML = `
177
- <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
178
- Powered by <strong>VaultChat</strong>
179
- </div>
180
-
181
- <div id="vc-messages" style="
182
- flex:1;
183
- padding:12px;
184
- overflow-y:auto;
185
- background:${colors.messagesBg};
186
- color:${colors.text}">
187
- </div>
188
-
189
- <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
190
- <input id="vc-input" placeholder="Type your message..."
191
- style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
192
- background:${colors.inputBg};color:${colors.text}" />
193
- <button id="vc-send" style="
194
- margin-left:8px;padding:0 14px;border:none;border-radius:8px;
195
- background:${primaryColor};color:white;cursor:pointer">➤</button>
196
- </div>
197
- `;
177
+ <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
178
+ <span>Powered by <strong>VaultChat</strong></span>
179
+ <button id="vc-close" style="
180
+ background:none;
181
+ border:none;
182
+ color:${colors.mutedText};
183
+ font-size:18px;
184
+ cursor:pointer;
185
+ font-weight:bold;
186
+ padding:0;
187
+ line-height:1;">✖</button>
188
+ </div>
189
+
190
+ <div id="vc-messages" style="
191
+ flex:1;
192
+ padding:12px;
193
+ overflow-y:auto;
194
+ background:${colors.messagesBg};
195
+ color:${colors.text}">
196
+ </div>
197
+
198
+ <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
199
+ <input id="vc-input" placeholder="Type your message..."
200
+ style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
201
+ background:${colors.inputBg};color:${colors.text}" />
202
+ <button id="vc-send" style="
203
+ margin-left:8px;padding:0 14px;border:none;border-radius:8px;
204
+ background:${primaryColor};color:white;cursor:pointer">➤</button>
205
+ </div>
206
+ `;
207
+
208
+ // Add event listener for close button
209
+ const closeBtn = card.querySelector('#vc-close');
210
+ closeBtn.onclick = () => {
211
+ isOpen = false;
212
+ vcCard.style.display = 'none';
213
+ };
198
214
 
199
215
  Object.assign(card.style, {
200
216
  position: 'fixed',
package/index.js CHANGED
@@ -168,27 +168,43 @@ function updateCard (config) {
168
168
  const primaryColor = config.primaryColor || '#2563eb'
169
169
 
170
170
  card.innerHTML = `
171
- <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText}">
172
- Powered by <strong>VaultChat</strong>
173
- </div>
174
-
175
- <div id="vc-messages" style="
176
- flex:1;
177
- padding:12px;
178
- overflow-y:auto;
179
- background:${colors.messagesBg};
180
- color:${colors.text}">
181
- </div>
182
-
183
- <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
184
- <input id="vc-input" placeholder="Type your message..."
185
- style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
186
- background:${colors.inputBg};color:${colors.text}" />
187
- <button id="vc-send" style="
188
- margin-left:8px;padding:0 14px;border:none;border-radius:8px;
189
- background:${primaryColor};color:white;cursor:pointer">➤</button>
190
- </div>
191
- `
171
+ <div style="padding:12px;border-bottom:1px solid ${colors.headerBorder};color:${colors.mutedText};display:flex;justify-content:space-between;align-items:center">
172
+ <span>Powered by <strong>VaultChat</strong></span>
173
+ <button id="vc-close" style="
174
+ background:none;
175
+ border:none;
176
+ color:${colors.mutedText};
177
+ font-size:18px;
178
+ cursor:pointer;
179
+ font-weight:bold;
180
+ padding:0;
181
+ line-height:1;">✖</button>
182
+ </div>
183
+
184
+ <div id="vc-messages" style="
185
+ flex:1;
186
+ padding:12px;
187
+ overflow-y:auto;
188
+ background:${colors.messagesBg};
189
+ color:${colors.text}">
190
+ </div>
191
+
192
+ <div style="display:flex;padding:10px;border-top:1px solid ${colors.headerBorder};background:${colors.cardBg}">
193
+ <input id="vc-input" placeholder="Type your message..."
194
+ style="flex:1;padding:10px;border-radius:8px;border:1px solid ${colors.inputBorder};
195
+ background:${colors.inputBg};color:${colors.text}" />
196
+ <button id="vc-send" style="
197
+ margin-left:8px;padding:0 14px;border:none;border-radius:8px;
198
+ background:${primaryColor};color:white;cursor:pointer">➤</button>
199
+ </div>
200
+ `
201
+
202
+ // Add event listener for close button
203
+ const closeBtn = card.querySelector('#vc-close')
204
+ closeBtn.onclick = () => {
205
+ isOpen = false
206
+ vcCard.style.display = 'none'
207
+ }
192
208
 
193
209
  Object.assign(card.style, {
194
210
  position: 'fixed',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mobil80-dev/chatbot-widget",
3
- "version": "2.0.6",
3
+ "version": "2.0.7",
4
4
  "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
5
5
  "author": "NanthaGopal",
6
6
  "license": "MIT",