@cristianbm/ianetic-chat
Version:
Un widget de chat ligero y fácilmente integrable en cualquier sitio web
2 lines (1 loc) • 4.18 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).IaneticChat=n()}(this,(function(){"use strict";return class{constructor(t={}){this.options={position:"bottom-right",theme:"light",title:"Chat",placeholder:"Escribe un mensaje...",...t},this.messages=[],this.isOpen=!1,this.init()}init(){this.createStyles(),this.createChatWidget(),this.attachEventListeners()}createStyles(){const t=document.createElement("style");t.textContent="\n .ianetic-chat-widget {\n position: fixed;\n z-index: 9999;\n max-width: 350px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n }\n .ianetic-chat-widget.bottom-right {\n bottom: 20px;\n right: 20px;\n }\n .ianetic-chat-button {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: #0084ff;\n cursor: pointer;\n box-shadow: 0 2px 12px rgba(0,0,0,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.3s ease;\n }\n .ianetic-chat-button:hover {\n transform: scale(1.1);\n }\n .ianetic-chat-window {\n display: none;\n background: white;\n border-radius: 12px;\n box-shadow: 0 5px 40px rgba(0,0,0,0.16);\n overflow: hidden;\n margin-bottom: 20px;\n }\n .ianetic-chat-window.open {\n display: block;\n }\n .ianetic-chat-header {\n background: #0084ff;\n color: white;\n padding: 15px;\n font-weight: bold;\n }\n .ianetic-chat-messages {\n height: 300px;\n overflow-y: auto;\n padding: 15px;\n }\n .ianetic-chat-input {\n border-top: 1px solid #eee;\n padding: 15px;\n display: flex;\n }\n .ianetic-chat-input input {\n flex: 1;\n border: 1px solid #ddd;\n border-radius: 20px;\n padding: 8px 15px;\n margin-right: 10px;\n outline: none;\n }\n .ianetic-chat-input button {\n background: #0084ff;\n color: white;\n border: none;\n border-radius: 20px;\n padding: 8px 15px;\n cursor: pointer;\n }\n ",document.head.appendChild(t)}createChatWidget(){const t=document.createElement("div");t.className=`ianetic-chat-widget ${this.options.position}`,t.innerHTML=`\n <div class="ianetic-chat-window">\n <div class="ianetic-chat-header">${this.options.title}</div>\n <div class="ianetic-chat-messages"></div>\n <div class="ianetic-chat-input">\n <input type="text" placeholder="${this.options.placeholder}">\n <button>Enviar</button>\n </div>\n </div>\n <div class="ianetic-chat-button">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="white">\n <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>\n </svg>\n </div>\n `,document.body.appendChild(t),this.widget=t}attachEventListeners(){const t=this.widget.querySelector(".ianetic-chat-button"),n=this.widget.querySelector("input"),e=this.widget.querySelector("button"),i=this.widget.querySelector(".ianetic-chat-window");t.addEventListener("click",(()=>{this.isOpen=!this.isOpen,i.classList.toggle("open")}));const s=()=>{const t=n.value.trim();t&&(this.addMessage({text:t,sender:"user"}),n.value="",this.options.onMessage?.(t))};e.addEventListener("click",s),n.addEventListener("keypress",(t=>{"Enter"===t.key&&s()}))}addMessage({text:t,sender:n}){const e=this.widget.querySelector(".ianetic-chat-messages"),i=document.createElement("div");i.style.cssText=`\n margin: 10px 0;\n padding: 10px;\n border-radius: 10px;\n max-width: 80%;\n ${"user"===n?"margin-left: auto; background: #0084ff; color: white;":"background: #f1f0f0;"}\n `,i.textContent=t,e.appendChild(i),e.scrollTop=e.scrollHeight,this.messages.push({text:t,sender:n})}}}));