mini-chat-bot-widget 0.2.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 +63 -0
- package/dist/chat-widget.esm.js +106 -0
- package/dist/chat-widget.esm.min.js +1 -0
- package/dist/chat-widget.umd.js +114 -0
- package/dist/chat-widget.umd.min.js +1 -0
- package/package.json +23 -0
- package/rollup.config.js +45 -0
- package/src/chat-widget.js +119 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# mini-chat-bot-widget
|
|
2
|
+
|
|
3
|
+
A tiny, stylish chat bot widget that sits fixed at the bottom‑right corner of any web page.
|
|
4
|
+
It is built with vanilla JavaScript, styled with modern CSS (gradient header, glass‑like container, subtle hover effects) and bundled with **Rollup** so it can be published to **npm** and used via a simple `<script>` tag.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Install (publish to npm)
|
|
9
|
+
```bash
|
|
10
|
+
npm publish # after you have created an npm account and logged in
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
> The package name is `mini-chat-bot-widget`.
|
|
14
|
+
> The built files are published under `dist/` – `chat-widget.umd.js` (UMD) and `chat-widget.esm.js` (ESM).
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Quick usage in any HTML page
|
|
19
|
+
```html
|
|
20
|
+
<!DOCTYPE html>
|
|
21
|
+
<html lang="en">
|
|
22
|
+
<head>
|
|
23
|
+
<meta charset="UTF-8" />
|
|
24
|
+
<title>Demo – Chat Widget</title>
|
|
25
|
+
<!-- Load the widget from the CDN (npmjs.com) -->
|
|
26
|
+
<script src="https://cdn.jsdelivr.net/npm/mini-chat-bot-widget/dist/chat-widget.umd.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<script>
|
|
30
|
+
// Initialise the widget – you can pass a custom title or placeholder
|
|
31
|
+
new ChatWidget({
|
|
32
|
+
title: "Support Bot",
|
|
33
|
+
placeholder: "Ask me anything…"
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The widget will appear in the bottom‑right corner, ready to accept messages.
|
|
41
|
+
It currently echoes the user input (`You said: …`) – replace the `setTimeout` block in `src/chat-widget.js` with your own AI or API call.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Development
|
|
46
|
+
```bash
|
|
47
|
+
# Install dev dependencies
|
|
48
|
+
npm install
|
|
49
|
+
# Build the distribution files (UMD + ESM)
|
|
50
|
+
npm run build
|
|
51
|
+
```
|
|
52
|
+
The output is placed in `dist/`.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Styling & Customisation
|
|
57
|
+
All styles are injected via a `<style>` tag when the widget is instantiated.
|
|
58
|
+
Feel free to edit the CSS in `src/chat-widget.js` – the colour palette uses a vibrant gradient (`#6a5acd` → `#00bfff`) and a subtle glass‑like background (`rgba(255,255,255,0.95)`).
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## License
|
|
63
|
+
MIT
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
function _classCallCheck(a, n) {
|
|
2
|
+
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
|
|
3
|
+
}
|
|
4
|
+
function _defineProperties(e, r) {
|
|
5
|
+
for (var t = 0; t < r.length; t++) {
|
|
6
|
+
var o = r[t];
|
|
7
|
+
o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function _createClass(e, r, t) {
|
|
11
|
+
return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
|
|
12
|
+
writable: false
|
|
13
|
+
}), e;
|
|
14
|
+
}
|
|
15
|
+
function _toPrimitive(t, r) {
|
|
16
|
+
if ("object" != typeof t || !t) return t;
|
|
17
|
+
var e = t[Symbol.toPrimitive];
|
|
18
|
+
if (void 0 !== e) {
|
|
19
|
+
var i = e.call(t, r);
|
|
20
|
+
if ("object" != typeof i) return i;
|
|
21
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
22
|
+
}
|
|
23
|
+
return (String )(t);
|
|
24
|
+
}
|
|
25
|
+
function _toPropertyKey(t) {
|
|
26
|
+
var i = _toPrimitive(t, "string");
|
|
27
|
+
return "symbol" == typeof i ? i : i + "";
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function getDefaultExportFromCjs (x) {
|
|
31
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
var chatWidget = {exports: {}};
|
|
35
|
+
|
|
36
|
+
(function (module) {
|
|
37
|
+
// chat-widget.js - vanilla JS chat bot widget
|
|
38
|
+
var ChatWidget = /*#__PURE__*/function () {
|
|
39
|
+
function ChatWidget() {
|
|
40
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
41
|
+
_classCallCheck(this, ChatWidget);
|
|
42
|
+
this.title = options.title || "Chat Bot";
|
|
43
|
+
this.placeholder = options.placeholder || "Type a message...";
|
|
44
|
+
this.container = null;
|
|
45
|
+
this.messages = [];
|
|
46
|
+
this._init();
|
|
47
|
+
}
|
|
48
|
+
return _createClass(ChatWidget, [{
|
|
49
|
+
key: "_init",
|
|
50
|
+
value: function _init() {
|
|
51
|
+
// Create container
|
|
52
|
+
this.container = document.createElement("div");
|
|
53
|
+
this.container.id = "chat-widget-container";
|
|
54
|
+
this.container.innerHTML = "\n <div class=\"chat-header\">".concat(this.title, "</div>\n <div class=\"chat-messages\" id=\"chat-messages\"></div>\n <div class=\"chat-input-wrapper\">\n <input type=\"text\" id=\"chat-input\" placeholder=\"").concat(this.placeholder, "\" />\n <button id=\"chat-send\">Send</button>\n </div>\n ");
|
|
55
|
+
document.body.appendChild(this.container);
|
|
56
|
+
this._applyStyles();
|
|
57
|
+
this._bindEvents();
|
|
58
|
+
}
|
|
59
|
+
}, {
|
|
60
|
+
key: "_applyStyles",
|
|
61
|
+
value: function _applyStyles() {
|
|
62
|
+
var style = document.createElement("style");
|
|
63
|
+
style.textContent = "\n #chat-widget-container {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 300px;\n max-height: 400px;\n background: rgba(255,255,255,0.95);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n z-index: 10000;\n }\n #chat-widget-container .chat-header {\n background: linear-gradient(135deg, #6a5acd, #00bfff);\n color: white;\n padding: 8px 12px;\n font-weight: 600;\n text-align: center;\n }\n #chat-widget-container .chat-messages {\n flex: 1;\n padding: 8px 12px;\n overflow-y: auto;\n font-size: 0.9rem;\n color: #333;\n }\n #chat-widget-container .chat-input-wrapper {\n display: flex;\n border-top: 1px solid #ddd;\n }\n #chat-widget-container #chat-input {\n flex: 1;\n border: none;\n padding: 8px;\n font-size: 0.9rem;\n outline: none;\n }\n #chat-widget-container #chat-send {\n background: #6a5acd;\n color: white;\n border: none;\n padding: 0 12px;\n cursor: pointer;\n font-weight: 600;\n }\n #chat-widget-container #chat-send:hover {\n background: #5a4acb;\n }\n ";
|
|
64
|
+
document.head.appendChild(style);
|
|
65
|
+
}
|
|
66
|
+
}, {
|
|
67
|
+
key: "_bindEvents",
|
|
68
|
+
value: function _bindEvents() {
|
|
69
|
+
var _this = this;
|
|
70
|
+
var input = this.container.querySelector("#chat-input");
|
|
71
|
+
var sendBtn = this.container.querySelector("#chat-send");
|
|
72
|
+
var addMessage = function addMessage(text) {
|
|
73
|
+
var fromUser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
74
|
+
var msgEl = document.createElement("div");
|
|
75
|
+
msgEl.textContent = text;
|
|
76
|
+
msgEl.style.marginBottom = "6px";
|
|
77
|
+
msgEl.style.textAlign = fromUser ? "right" : "left";
|
|
78
|
+
msgEl.style.color = fromUser ? "#0066cc" : "#333";
|
|
79
|
+
_this.container.querySelector("#chat-messages").appendChild(msgEl);
|
|
80
|
+
_this.container.querySelector("#chat-messages").scrollTop = 9999;
|
|
81
|
+
};
|
|
82
|
+
var send = function send() {
|
|
83
|
+
var text = input.value.trim();
|
|
84
|
+
if (!text) return;
|
|
85
|
+
addMessage(text, true);
|
|
86
|
+
input.value = "";
|
|
87
|
+
// Simple echo bot – replace with real logic or API call
|
|
88
|
+
setTimeout(function () {
|
|
89
|
+
return addMessage("You said: " + text, false);
|
|
90
|
+
}, 500);
|
|
91
|
+
};
|
|
92
|
+
sendBtn.addEventListener("click", send);
|
|
93
|
+
input.addEventListener("keypress", function (e) {
|
|
94
|
+
if (e.key === "Enter") send();
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}]);
|
|
98
|
+
}(); // Export as UMD and ESM compatible
|
|
99
|
+
{
|
|
100
|
+
module.exports = ChatWidget;
|
|
101
|
+
}
|
|
102
|
+
})(chatWidget);
|
|
103
|
+
var chatWidgetExports = chatWidget.exports;
|
|
104
|
+
var chatWidget_default = /*@__PURE__*/getDefaultExportFromCjs(chatWidgetExports);
|
|
105
|
+
|
|
106
|
+
export { chatWidget_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function n(n,t,i){return t&&function(n,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,e(r.key),r)}}(n.prototype,t),Object.defineProperty(n,"prototype",{writable:!1}),n}function e(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var i=t.call(n,e);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n,"string");return"symbol"==typeof e?e:e+""}function t(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var i,r,a={exports:{}};i=a,r=function(){return n(function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n),this.title=e.title||"Chat Bot",this.placeholder=e.placeholder||"Type a message...",this.container=null,this.messages=[],this._init()},[{key:"_init",value:function(){this.container=document.createElement("div"),this.container.id="chat-widget-container",this.container.innerHTML='\n <div class="chat-header">'.concat(this.title,'</div>\n <div class="chat-messages" id="chat-messages"></div>\n <div class="chat-input-wrapper">\n <input type="text" id="chat-input" placeholder="').concat(this.placeholder,'" />\n <button id="chat-send">Send</button>\n </div>\n '),document.body.appendChild(this.container),this._applyStyles(),this._bindEvents()}},{key:"_applyStyles",value:function(){var n=document.createElement("style");n.textContent="\n #chat-widget-container {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 300px;\n max-height: 400px;\n background: rgba(255,255,255,0.95);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n z-index: 10000;\n }\n #chat-widget-container .chat-header {\n background: linear-gradient(135deg, #6a5acd, #00bfff);\n color: white;\n padding: 8px 12px;\n font-weight: 600;\n text-align: center;\n }\n #chat-widget-container .chat-messages {\n flex: 1;\n padding: 8px 12px;\n overflow-y: auto;\n font-size: 0.9rem;\n color: #333;\n }\n #chat-widget-container .chat-input-wrapper {\n display: flex;\n border-top: 1px solid #ddd;\n }\n #chat-widget-container #chat-input {\n flex: 1;\n border: none;\n padding: 8px;\n font-size: 0.9rem;\n outline: none;\n }\n #chat-widget-container #chat-send {\n background: #6a5acd;\n color: white;\n border: none;\n padding: 0 12px;\n cursor: pointer;\n font-weight: 600;\n }\n #chat-widget-container #chat-send:hover {\n background: #5a4acb;\n }\n ",document.head.appendChild(n)}},{key:"_bindEvents",value:function(){var n=this,e=this.container.querySelector("#chat-input"),t=this.container.querySelector("#chat-send"),i=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=document.createElement("div");i.textContent=e,i.style.marginBottom="6px",i.style.textAlign=t?"right":"left",i.style.color=t?"#0066cc":"#333",n.container.querySelector("#chat-messages").appendChild(i),n.container.querySelector("#chat-messages").scrollTop=9999},r=function(){var n=e.value.trim();n&&(i(n,!0),e.value="",setTimeout(function(){return i("You said: "+n,!1)},500))};t.addEventListener("click",r),e.addEventListener("keypress",function(n){"Enter"===n.key&&r()})}}])}(),i.exports=r;var o=t(a.exports);export{o as default};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChatWidget = factory());
|
|
5
|
+
})(this, (function () { 'use strict';
|
|
6
|
+
|
|
7
|
+
function _classCallCheck(a, n) {
|
|
8
|
+
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
|
|
9
|
+
}
|
|
10
|
+
function _defineProperties(e, r) {
|
|
11
|
+
for (var t = 0; t < r.length; t++) {
|
|
12
|
+
var o = r[t];
|
|
13
|
+
o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
function _createClass(e, r, t) {
|
|
17
|
+
return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
|
|
18
|
+
writable: false
|
|
19
|
+
}), e;
|
|
20
|
+
}
|
|
21
|
+
function _toPrimitive(t, r) {
|
|
22
|
+
if ("object" != typeof t || !t) return t;
|
|
23
|
+
var e = t[Symbol.toPrimitive];
|
|
24
|
+
if (void 0 !== e) {
|
|
25
|
+
var i = e.call(t, r);
|
|
26
|
+
if ("object" != typeof i) return i;
|
|
27
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
28
|
+
}
|
|
29
|
+
return (String )(t);
|
|
30
|
+
}
|
|
31
|
+
function _toPropertyKey(t) {
|
|
32
|
+
var i = _toPrimitive(t, "string");
|
|
33
|
+
return "symbol" == typeof i ? i : i + "";
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function getDefaultExportFromCjs (x) {
|
|
37
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
var chatWidget = {exports: {}};
|
|
41
|
+
|
|
42
|
+
(function (module) {
|
|
43
|
+
// chat-widget.js - vanilla JS chat bot widget
|
|
44
|
+
var ChatWidget = /*#__PURE__*/function () {
|
|
45
|
+
function ChatWidget() {
|
|
46
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
47
|
+
_classCallCheck(this, ChatWidget);
|
|
48
|
+
this.title = options.title || "Chat Bot";
|
|
49
|
+
this.placeholder = options.placeholder || "Type a message...";
|
|
50
|
+
this.container = null;
|
|
51
|
+
this.messages = [];
|
|
52
|
+
this._init();
|
|
53
|
+
}
|
|
54
|
+
return _createClass(ChatWidget, [{
|
|
55
|
+
key: "_init",
|
|
56
|
+
value: function _init() {
|
|
57
|
+
// Create container
|
|
58
|
+
this.container = document.createElement("div");
|
|
59
|
+
this.container.id = "chat-widget-container";
|
|
60
|
+
this.container.innerHTML = "\n <div class=\"chat-header\">".concat(this.title, "</div>\n <div class=\"chat-messages\" id=\"chat-messages\"></div>\n <div class=\"chat-input-wrapper\">\n <input type=\"text\" id=\"chat-input\" placeholder=\"").concat(this.placeholder, "\" />\n <button id=\"chat-send\">Send</button>\n </div>\n ");
|
|
61
|
+
document.body.appendChild(this.container);
|
|
62
|
+
this._applyStyles();
|
|
63
|
+
this._bindEvents();
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
key: "_applyStyles",
|
|
67
|
+
value: function _applyStyles() {
|
|
68
|
+
var style = document.createElement("style");
|
|
69
|
+
style.textContent = "\n #chat-widget-container {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 300px;\n max-height: 400px;\n background: rgba(255,255,255,0.95);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n z-index: 10000;\n }\n #chat-widget-container .chat-header {\n background: linear-gradient(135deg, #6a5acd, #00bfff);\n color: white;\n padding: 8px 12px;\n font-weight: 600;\n text-align: center;\n }\n #chat-widget-container .chat-messages {\n flex: 1;\n padding: 8px 12px;\n overflow-y: auto;\n font-size: 0.9rem;\n color: #333;\n }\n #chat-widget-container .chat-input-wrapper {\n display: flex;\n border-top: 1px solid #ddd;\n }\n #chat-widget-container #chat-input {\n flex: 1;\n border: none;\n padding: 8px;\n font-size: 0.9rem;\n outline: none;\n }\n #chat-widget-container #chat-send {\n background: #6a5acd;\n color: white;\n border: none;\n padding: 0 12px;\n cursor: pointer;\n font-weight: 600;\n }\n #chat-widget-container #chat-send:hover {\n background: #5a4acb;\n }\n ";
|
|
70
|
+
document.head.appendChild(style);
|
|
71
|
+
}
|
|
72
|
+
}, {
|
|
73
|
+
key: "_bindEvents",
|
|
74
|
+
value: function _bindEvents() {
|
|
75
|
+
var _this = this;
|
|
76
|
+
var input = this.container.querySelector("#chat-input");
|
|
77
|
+
var sendBtn = this.container.querySelector("#chat-send");
|
|
78
|
+
var addMessage = function addMessage(text) {
|
|
79
|
+
var fromUser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
80
|
+
var msgEl = document.createElement("div");
|
|
81
|
+
msgEl.textContent = text;
|
|
82
|
+
msgEl.style.marginBottom = "6px";
|
|
83
|
+
msgEl.style.textAlign = fromUser ? "right" : "left";
|
|
84
|
+
msgEl.style.color = fromUser ? "#0066cc" : "#333";
|
|
85
|
+
_this.container.querySelector("#chat-messages").appendChild(msgEl);
|
|
86
|
+
_this.container.querySelector("#chat-messages").scrollTop = 9999;
|
|
87
|
+
};
|
|
88
|
+
var send = function send() {
|
|
89
|
+
var text = input.value.trim();
|
|
90
|
+
if (!text) return;
|
|
91
|
+
addMessage(text, true);
|
|
92
|
+
input.value = "";
|
|
93
|
+
// Simple echo bot – replace with real logic or API call
|
|
94
|
+
setTimeout(function () {
|
|
95
|
+
return addMessage("You said: " + text, false);
|
|
96
|
+
}, 500);
|
|
97
|
+
};
|
|
98
|
+
sendBtn.addEventListener("click", send);
|
|
99
|
+
input.addEventListener("keypress", function (e) {
|
|
100
|
+
if (e.key === "Enter") send();
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
}]);
|
|
104
|
+
}(); // Export as UMD and ESM compatible
|
|
105
|
+
{
|
|
106
|
+
module.exports = ChatWidget;
|
|
107
|
+
}
|
|
108
|
+
})(chatWidget);
|
|
109
|
+
var chatWidgetExports = chatWidget.exports;
|
|
110
|
+
var chatWidget_default = /*@__PURE__*/getDefaultExportFromCjs(chatWidgetExports);
|
|
111
|
+
|
|
112
|
+
return chatWidget_default;
|
|
113
|
+
|
|
114
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).ChatWidget=n()}(this,function(){"use strict";function e(e,t,i){return t&&function(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,n(o.key),o)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function n(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var i={exports:{}};return function(n){var t=function(){return e(function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.title=n.title||"Chat Bot",this.placeholder=n.placeholder||"Type a message...",this.container=null,this.messages=[],this._init()},[{key:"_init",value:function(){this.container=document.createElement("div"),this.container.id="chat-widget-container",this.container.innerHTML='\n <div class="chat-header">'.concat(this.title,'</div>\n <div class="chat-messages" id="chat-messages"></div>\n <div class="chat-input-wrapper">\n <input type="text" id="chat-input" placeholder="').concat(this.placeholder,'" />\n <button id="chat-send">Send</button>\n </div>\n '),document.body.appendChild(this.container),this._applyStyles(),this._bindEvents()}},{key:"_applyStyles",value:function(){var e=document.createElement("style");e.textContent="\n #chat-widget-container {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 300px;\n max-height: 400px;\n background: rgba(255,255,255,0.95);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n z-index: 10000;\n }\n #chat-widget-container .chat-header {\n background: linear-gradient(135deg, #6a5acd, #00bfff);\n color: white;\n padding: 8px 12px;\n font-weight: 600;\n text-align: center;\n }\n #chat-widget-container .chat-messages {\n flex: 1;\n padding: 8px 12px;\n overflow-y: auto;\n font-size: 0.9rem;\n color: #333;\n }\n #chat-widget-container .chat-input-wrapper {\n display: flex;\n border-top: 1px solid #ddd;\n }\n #chat-widget-container #chat-input {\n flex: 1;\n border: none;\n padding: 8px;\n font-size: 0.9rem;\n outline: none;\n }\n #chat-widget-container #chat-send {\n background: #6a5acd;\n color: white;\n border: none;\n padding: 0 12px;\n cursor: pointer;\n font-weight: 600;\n }\n #chat-widget-container #chat-send:hover {\n background: #5a4acb;\n }\n ",document.head.appendChild(e)}},{key:"_bindEvents",value:function(){var e=this,n=this.container.querySelector("#chat-input"),t=this.container.querySelector("#chat-send"),i=function(n){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=document.createElement("div");i.textContent=n,i.style.marginBottom="6px",i.style.textAlign=t?"right":"left",i.style.color=t?"#0066cc":"#333",e.container.querySelector("#chat-messages").appendChild(i),e.container.querySelector("#chat-messages").scrollTop=9999},o=function(){var e=n.value.trim();e&&(i(e,!0),n.value="",setTimeout(function(){return i("You said: "+e,!1)},500))};t.addEventListener("click",o),n.addEventListener("keypress",function(e){"Enter"===e.key&&o()})}}])}();n.exports=t}(i),t(i.exports)});
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "mini-chat-bot-widget",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "A tiny chat bot widget fixed at bottom right, distributable via npm and usable with a <script> tag.",
|
|
5
|
+
"main": "dist/chat-widget.umd.js",
|
|
6
|
+
"module": "dist/chat-widget.esm.js",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "rollup -c",
|
|
10
|
+
"prepare": "npm run build"
|
|
11
|
+
},
|
|
12
|
+
"keywords": ["chat", "widget", "npm", "script-tag"],
|
|
13
|
+
"author": "",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"rollup": "^4.0.0",
|
|
17
|
+
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
18
|
+
"@rollup/plugin-commonjs": "^25.0.0",
|
|
19
|
+
"@rollup/plugin-babel": "^6.0.0",
|
|
20
|
+
"@babel/core": "^7.0.0",
|
|
21
|
+
"@babel/preset-env": "^7.0.0"
|
|
22
|
+
}
|
|
23
|
+
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import resolve from '@rollup/plugin-node-resolve';
|
|
2
|
+
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
+
import { babel } from '@rollup/plugin-babel';
|
|
4
|
+
import terser from '@rollup/plugin-terser';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
input: 'src/chat-widget.js',
|
|
8
|
+
output: [
|
|
9
|
+
// --- Un‑minified UMD ---
|
|
10
|
+
{
|
|
11
|
+
file: 'dist/chat-widget.umd.js',
|
|
12
|
+
format: 'umd',
|
|
13
|
+
name: 'ChatWidget',
|
|
14
|
+
globals: {},
|
|
15
|
+
},
|
|
16
|
+
// --- Minified UMD ---
|
|
17
|
+
{
|
|
18
|
+
file: 'dist/chat-widget.umd.min.js',
|
|
19
|
+
format: 'umd',
|
|
20
|
+
name: 'ChatWidget',
|
|
21
|
+
globals: {},
|
|
22
|
+
plugins: [terser()], // <-- minify this bundle
|
|
23
|
+
},
|
|
24
|
+
// --- Un‑minified ESM ---
|
|
25
|
+
{
|
|
26
|
+
file: 'dist/chat-widget.esm.js',
|
|
27
|
+
format: 'esm',
|
|
28
|
+
},
|
|
29
|
+
// --- Minified ESM ---
|
|
30
|
+
{
|
|
31
|
+
file: 'dist/chat-widget.esm.min.js',
|
|
32
|
+
format: 'esm',
|
|
33
|
+
plugins: [terser()], // <-- minify this bundle
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
plugins: [
|
|
37
|
+
resolve(),
|
|
38
|
+
commonjs(),
|
|
39
|
+
babel({
|
|
40
|
+
babelHelpers: 'bundled',
|
|
41
|
+
presets: ['@babel/preset-env'],
|
|
42
|
+
exclude: 'node_modules/**',
|
|
43
|
+
}),
|
|
44
|
+
],
|
|
45
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
// chat-widget.js - vanilla JS chat bot widget
|
|
2
|
+
|
|
3
|
+
class ChatWidget {
|
|
4
|
+
constructor(options = {}) {
|
|
5
|
+
this.title = options.title || "Chat Bot";
|
|
6
|
+
this.placeholder = options.placeholder || "Type a message...";
|
|
7
|
+
this.container = null;
|
|
8
|
+
this.messages = [];
|
|
9
|
+
this._init();
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
_init() {
|
|
13
|
+
// Create container
|
|
14
|
+
this.container = document.createElement("div");
|
|
15
|
+
this.container.id = "chat-widget-container";
|
|
16
|
+
this.container.innerHTML = `
|
|
17
|
+
<div class="chat-header">${this.title}</div>
|
|
18
|
+
<div class="chat-messages" id="chat-messages"></div>
|
|
19
|
+
<div class="chat-input-wrapper">
|
|
20
|
+
<input type="text" id="chat-input" placeholder="${this.placeholder}" />
|
|
21
|
+
<button id="chat-send">Send</button>
|
|
22
|
+
</div>
|
|
23
|
+
`;
|
|
24
|
+
document.body.appendChild(this.container);
|
|
25
|
+
this._applyStyles();
|
|
26
|
+
this._bindEvents();
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
_applyStyles() {
|
|
30
|
+
const style = document.createElement("style");
|
|
31
|
+
style.textContent = `
|
|
32
|
+
#chat-widget-container {
|
|
33
|
+
position: fixed;
|
|
34
|
+
bottom: 20px;
|
|
35
|
+
right: 20px;
|
|
36
|
+
width: 300px;
|
|
37
|
+
max-height: 400px;
|
|
38
|
+
background: rgba(255,255,255,0.95);
|
|
39
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
40
|
+
border-radius: 12px;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
font-family: 'Inter', sans-serif;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
z-index: 10000;
|
|
46
|
+
}
|
|
47
|
+
#chat-widget-container .chat-header {
|
|
48
|
+
background: linear-gradient(135deg, #6a5acd, #00bfff);
|
|
49
|
+
color: white;
|
|
50
|
+
padding: 8px 12px;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
text-align: center;
|
|
53
|
+
}
|
|
54
|
+
#chat-widget-container .chat-messages {
|
|
55
|
+
flex: 1;
|
|
56
|
+
padding: 8px 12px;
|
|
57
|
+
overflow-y: auto;
|
|
58
|
+
font-size: 0.9rem;
|
|
59
|
+
color: #333;
|
|
60
|
+
}
|
|
61
|
+
#chat-widget-container .chat-input-wrapper {
|
|
62
|
+
display: flex;
|
|
63
|
+
border-top: 1px solid #ddd;
|
|
64
|
+
}
|
|
65
|
+
#chat-widget-container #chat-input {
|
|
66
|
+
flex: 1;
|
|
67
|
+
border: none;
|
|
68
|
+
padding: 8px;
|
|
69
|
+
font-size: 0.9rem;
|
|
70
|
+
outline: none;
|
|
71
|
+
}
|
|
72
|
+
#chat-widget-container #chat-send {
|
|
73
|
+
background: #6a5acd;
|
|
74
|
+
color: white;
|
|
75
|
+
border: none;
|
|
76
|
+
padding: 0 12px;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
font-weight: 600;
|
|
79
|
+
}
|
|
80
|
+
#chat-widget-container #chat-send:hover {
|
|
81
|
+
background: #5a4acb;
|
|
82
|
+
}
|
|
83
|
+
`;
|
|
84
|
+
document.head.appendChild(style);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
_bindEvents() {
|
|
88
|
+
const input = this.container.querySelector("#chat-input");
|
|
89
|
+
const sendBtn = this.container.querySelector("#chat-send");
|
|
90
|
+
const addMessage = (text, fromUser = true) => {
|
|
91
|
+
const msgEl = document.createElement("div");
|
|
92
|
+
msgEl.textContent = text;
|
|
93
|
+
msgEl.style.marginBottom = "6px";
|
|
94
|
+
msgEl.style.textAlign = fromUser ? "right" : "left";
|
|
95
|
+
msgEl.style.color = fromUser ? "#0066cc" : "#333";
|
|
96
|
+
this.container.querySelector("#chat-messages").appendChild(msgEl);
|
|
97
|
+
this.container.querySelector("#chat-messages").scrollTop = 9999;
|
|
98
|
+
};
|
|
99
|
+
const send = () => {
|
|
100
|
+
const text = input.value.trim();
|
|
101
|
+
if (!text) return;
|
|
102
|
+
addMessage(text, true);
|
|
103
|
+
input.value = "";
|
|
104
|
+
// Simple echo bot – replace with real logic or API call
|
|
105
|
+
setTimeout(() => addMessage("You said: " + text, false), 500);
|
|
106
|
+
};
|
|
107
|
+
sendBtn.addEventListener("click", send);
|
|
108
|
+
input.addEventListener("keypress", (e) => {
|
|
109
|
+
if (e.key === "Enter") send();
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Export as UMD and ESM compatible
|
|
115
|
+
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
|
|
116
|
+
module.exports = ChatWidget;
|
|
117
|
+
} else {
|
|
118
|
+
window.ChatWidget = ChatWidget;
|
|
119
|
+
}
|