wc-chatbot - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/wc-chatbot.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["wc-chatbot"]=e():t["wc-chatbot"]=e()}(self,(()=>(()=>{var t={290:t=>{var e;self,e=()=>(()=>{"use strict";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t,e){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},r(t,e)}function i(t){return i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},i(t)}function a(t,e,o){return a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}()?Reflect.construct.bind():function(t,e,o){var n=[null];n.push.apply(n,e);var i=new(Function.bind.apply(t,n));return o&&r(i,o.prototype),i},a.apply(null,arguments)}function s(t){var e="function"==typeof Map?new Map:void 0;return s=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return a(t,arguments,i(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),r(o,t)},s(t)}t.r(e),t.d(e,{default:()=>c});var l=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&r(t,e)}(u,t);var e,a,s,l,c=(s=u,l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}(),function(){var t,e=i(s);if(l){var r=i(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return function(t,e){if(e&&("object"===o(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}(this,t)});function u(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,u),(t=c.call(this)).attachShadow({mode:"open"}),t.dispatchMountedEvent=t.dispatchMountedEvent.bind(n(t)),t.props={delay:0,avatar:'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect x="45" y="55" width="110" height="100" rx="20" fill-opacity="0" stroke="black" stroke-width="15"></rect><circle cx="75" cy="95" r="10" fill="black"></circle><circle cx="125" cy="95" r="10" fill="black"></circle><line x1="75" y1="125" x2="125" y2="125" stroke="black" stroke-width="10"></line><ellipse cx="30" cy="95" rx="10" ry="10" fill="black" stroke="black" stroke-width="10"></ellipse><ellipse cx="170" cy="95" rx="10" ry="10" fill="black" stroke="black" stroke-width="10"></ellipse><circle cx="100" cy="30" r="10" fill="black" stroke="black" stroke-width="10"></circle><line x1="100" y1="35" x2="100" y2="55" stroke="black" stroke-width="10"></line></svg>'},t.msgElement=null,t.bubbleElement=null,t._isContinued=!1,t._isRight=!1,t._isLoading=!1,t}return e=u,(a=[{key:"connectedCallback",value:function(){if(this.hasAttribute("delay")){var t=this.getAttribute("delay");if(null!==t){var e=parseInt(t);this.props.delay=isNaN(e)?0:e>0?e:0}}var o=document.createElement("div");if(o.classList.add("chat-message"),this.hasAttribute("continued")&&(o.classList.add("continue"),this._isContinued=!0),this.hasAttribute("right")&&(o.classList.add("right"),this._isRight=!0),this.hasAttribute("loading")&&(this._isLoading=!0),this.hasAttribute("avatar")&&(this.props.avatar=this.getAttribute("avatar")),this.bubbleElement=this.genBubbleElement(),o.append(this.genAvatarElement()),o.append(this.bubbleElement),this.msgElement=o,null!==this.shadowRoot){var n=new CSSStyleSheet;n.replaceSync(':host{--chat-bubble-color: #FFFFFF;--chat-bubble-right-color: #F6ECCC;--chat-bubble-font-color: #000000;--chat-bubble-font-right-color: #000000;--chat-bubble-avatar-color: #CCCCCC;--chat-bubble-delay: 0.5s}::slotted(p){margin:0 !important}.chat-message{display:flex}.chat-message .chat-bubble{font-weight:400;font-family:"PingFang SC","Noto Sans TC","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;position:relative;width:max-content;background-color:var(--chat-bubble-color);border-radius:20px;box-shadow:0 0 1px rgba(0,0,0,.3);padding:10px 20px;margin:10px 15px 0px;max-width:min(60%,600px);animation:scale-in .2s ease,fade-in .2s ease;transform-origin:top left;transition:width .5s ease,height .5s ease,left .5s ease;animation-fill-mode:backwards;animation-delay:calc(var(--chat-bubble-delay)*var(--bubble-index));color:var(--chat-bubble-font-color)}.chat-message .chat-bubble .chat-content{word-wrap:break-word;overflow:hidden}.chat-message .chat-bubble::before{content:"";position:absolute;border:0 solid rgba(0,0,0,0);border-bottom:7px solid var(--chat-bubble-color);border-radius:0 0 0 20px;width:12px;height:12px;top:-5px;left:-7px}.chat-message .chat-bubble p{margin:0}.chat-message .avatar{width:36px;height:36px;border-radius:100%;background-color:var(--chat-bubble-avatar-color);overflow:hidden;animation:scale-in 0s ease;animation-fill-mode:backwards;animation-delay:calc(var(--chat-bubble-delay)*var(--bubble-index))}.chat-message .avatar img{width:80%;height:80%;margin:10%}.chat-message.right{justify-content:end}.chat-message.right .chat-bubble{background:var(--chat-bubble-right-color);color:var(--chat-bubble-font-right-color);transform-origin:top right}.chat-message.right .chat-bubble::before{border-radius:0 0 20px 0;border-color:var(--chat-bubble-right-color);left:auto;right:-7px}.chat-message.right .avatar{display:none}.chat-message.continue .chat-bubble::before{display:none}.chat-message.continue .avatar{opacity:0}.chat-message.continue .avatar img{display:none}.chat-message .chat-bubble.animation-scale-out{animation:scale-out .2s ease-in-out forwards,fade-out .2s ease-in-out forwards}@keyframes scale-in{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes scale-out{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes fade-in{0%{opacity:0}50%{opacity:1}100%{opacity:1}}@keyframes fade-out{0%{opacity:1}50%{opacity:0}100%{opacity:0}}.typing-indicator{display:flex;align-items:start;margin-left:20px;color:#666}.typing-indicator .dots{display:flex;margin:10px auto;padding:0 2px;gap:8px}.typing-indicator .dots .dot{width:5px;height:5px;border-radius:100%;background-color:#666;animation:pulse 1.5s ease-in-out infinite}.typing-indicator .dots .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dots .dot:nth-child(3){animation-delay:.4s}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}'),this.shadowRoot.adoptedStyleSheets=[n],this.shadowRoot.append(o)}}},{key:"removeGracefully",value:function(){var t=this;null!==this.bubbleElement&&(this.bubbleElement.addEventListener("animationend",(function(){var e=t.parentElement;null!==e?e.removeChild(t):t.remove()})),this.bubbleElement.classList.add("animation-scale-out"))}},{key:"dispatchMountedEvent",value:function(){var t=new CustomEvent("mounted");this.dispatchEvent(t),null!==this.bubbleElement&&this.bubbleElement.removeEventListener("animationend",this.dispatchMountedEvent)}},{key:"continued",get:function(){return this._isContinued},set:function(t){this._isContinued=t,null!==this.msgElement&&(this._isContinued?this.msgElement.classList.add("continue"):this.msgElement.classList.remove("continue"))}},{key:"right",get:function(){return this._isRight},set:function(t){this._isRight=t,null!==this.msgElement&&(this._isRight?this.msgElement.classList.add("right"):this.msgElement.classList.remove("right"))}},{key:"loading",get:function(){return this._isLoading},set:function(t){this._isLoading=t,null!==this.bubbleElement&&(this._isLoading?(this.bubbleElement.classList.add("typing-indicator"),this.bubbleElement.innerHTML='<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>'):(this.bubbleElement.classList.remove("typing-indicator"),this.bubbleElement.innerHTML="<slot></slot>"))}},{key:"genAvatarElement",value:function(){var t=document.createElement("div"),e=document.createElement("img");return t.classList.add("avatar"),t.style.setProperty("--bubble-index",String(this.props.delay)),e.src=this.props.avatar,t.append(e),t}},{key:"genBubbleElement",value:function(){var t=document.createElement("div");t.classList.add("chat-bubble");var e=document.createElement("div");return e.classList.add("chat-content"),t.appendChild(e),this.hasAttribute("loading")?(t.classList.add("typing-indicator"),e.innerHTML='<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>'):e.appendChild(document.createElement("slot")),t.style.setProperty("--bubble-index",String(this.props.delay)),t.addEventListener("animationend",this.dispatchMountedEvent),t}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(i=function(t,e){if("object"!==o(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!==o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===o(i)?i:String(i)),r)}var i}(e.prototype,a),Object.defineProperty(e,"prototype",{writable:!1}),u}(s(HTMLElement));void 0===customElements.get("chat-bubble")&&window.customElements.define("chat-bubble",l);const c=l;return e})(),t.exports=e()}},e={};function o(n){var r=e[n];if(void 0!==r)return r.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,o),i.exports}o.d=(t,e)=>{for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e){var o=function(e,o){if("object"!=t(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,"string");if("object"!=t(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(o)?o:o+""}function r(t,o){for(var n=0;n<o.length;n++){var r=o[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}function i(t){return i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},i(t)}function a(t,e){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},a(t,e)}function s(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(s=function(){return!!t})()}function l(t){var e="function"==typeof Map?new Map:void 0;return l=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return function(t,e,o){if(s())return Reflect.construct.apply(null,arguments);var n=[null];n.push.apply(n,e);var r=new(t.bind.apply(t,n));return o&&a(r,o.prototype),r}(t,arguments,i(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),a(o,t)},l(t)}function c(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function u(e,o,n){return o=i(o),function(e,o){if(o&&("object"===t(o)||"function"==typeof o))return o;if(void 0!==o)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}(e,d()?Reflect.construct(o,n||[],i(e).constructor):o.apply(e,n))}function d(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(d=function(){return!!t})()}o.r(n),o.d(n,{default:()=>h}),o(290);var b=function(t){function o(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o),(t=u(this,o)).attachShadow({mode:"open"}),t.genChatDialogue=t.genChatDialogue.bind(t),t.sendMessage=t.sendMessage.bind(t),t.toggle=t.toggle.bind(t),t.scrollToBottom=t.scrollToBottom.bind(t),t.dialogueDisplayed=t.dialogueDisplayed.bind(t),t._messages=[],t.props={title:"Chatbot"},t.sender={name:"Anonymous",id:"00000123-0000-0000-0000-000000000001"},t.partner={name:"Bot",id:"00000123-0000-0000-0000-000000000002"},t.container=null,t.header=null,t.body=null,t.footer=null,t.avatarBtn=null,t.textInput=null,t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&a(t,e)}(o,t),n=o,i=[{key:"connectedCallback",value:function(){if(null!==this.shadowRoot){this.hasAttribute("title")&&""!==String(this.getAttribute("title")).trim()&&(this.props.title=String(this.getAttribute("title")).trim()),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.genChatDialogue()),this.shadowRoot.appendChild(this.genBotAvatar());var t=document.createElement("style");t.textContent=':host{--chatbot-avatar-bg-color: #F9A825;--chatbot-avatar-img: url(\'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect x="45" y="55" width="110" height="100" rx="20" fill-opacity="0" stroke="rgba(76,76,76,1.0)" stroke-width="15"></rect><circle cx="75" cy="95" r="10" fill="rgba(76,76,76,1.0)"></circle><circle cx="125" cy="95" r="10" fill="rgba(76,76,76,1.0)"></circle><line x1="75" y1="125" x2="125" y2="125" stroke="rgba(76,76,76,1.0)" stroke-width="10"></line><ellipse cx="30" cy="95" rx="10" ry="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></ellipse><ellipse cx="170" cy="95" rx="10" ry="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></ellipse><circle cx="100" cy="30" r="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></circle><line x1="100" y1="35" x2="100" y2="55" stroke="rgba(76,76,76,1.0)" stroke-width="10"></line></svg>\');--chatbot-avatar-margin: 10%;--chatbot-header-bg-color: #F9A825;--chatbot-header-title-color: #FFFFFF;--chatbot-body-bg-color: #9dbfde;--chatbot-send-button-color: #F9A825}.chatbot-container{z-index:9999;position:fixed;bottom:80px;right:20px;width:min(360px,90%);height:min(500px,100% - 100px);background-color:#fff;border:0px solid #ccc;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3);font-family:Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}.chatbot-header{background-color:var(--chatbot-header-bg-color);color:var(--chatbot-header-title-color);padding:10px;text-align:center;flex-grow:0;flex-shrink:0;height:30px;display:flex;align-items:center;display:flex;justify-content:center}.chatbot-header h3{margin:auto}.chatbot-header .left{flex:1}.chatbot-header .right{flex:1;text-align:right}.chatbot-header .right button.minimize{width:28px;height:26px;position:relative;background-color:rgba(0,0,0,0);border:solid 1px #fff;border-radius:4px;box-shadow:0 0 2px rgba(255,255,255,.3);cursor:pointer}.chatbot-header .right button.minimize::before{content:"";display:block;position:absolute;top:4px;left:1px;height:24px;width:24px;padding:0;background-image:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><rect x="4" y="12" width="16" height="2" rx="1" ry="1" fill="white"/></svg>\');background-repeat:no-repeat;background-size:cover}.chatbot-body{height:300px;overflow-y:auto;padding:8px;flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;background-color:var(--chatbot-body-bg-color)}.chatbot-footer{flex-grow:0;flex-shrink:0;border-top:solid 1px #f1f1f1}.chatbot-input{padding:10px;display:flex}.chatbot-input input{flex:1;border:none;padding:5px;border-radius:3px;font-size:1rem;outline:none}.chatbot-input button{border:none;background-color:var(--chatbot-send-button-color);color:#fff;padding:5px 10px;margin-left:10px;border-radius:3px;position:relative;overflow:hidden;cursor:pointer}.chatbot-input button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--chatbot-send-button-color);mix-blend-mode:multiply;opacity:0;transition:opacity .2s ease}.chatbot-input button:hover::before,.chatbot-input button:focus::before,.chatbot-input button:active::before{opacity:.8}.bot-button{z-index:9999;position:fixed;right:20px;bottom:20px;box-shadow:0 0 6px rgba(0,0,0,.3)}.bot-button.avatar{height:48px;width:48px;cursor:pointer;border-radius:50%;background-color:var(--chatbot-avatar-bg-color);overflow:hidden}.bot-button.avatar::before{content:"";display:block;height:calc(100% - 2*var(--chatbot-avatar-margin));width:calc(100% - 2*var(--chatbot-avatar-margin));margin:var(--chatbot-avatar-margin);background-image:var(--chatbot-avatar-img);background-repeat:no-repeat;background-size:contain}.animation-scale-in{animation:scale-in .2s ease-in-out forwards,fade-in .2s ease-in-out forwards;transform-origin:bottom right}.animation-scale-out{animation:scale-out .2s ease-in-out forwards,fade-out .2s ease-in-out forwards;transform-origin:bottom right}.chatbot-container.hidden{display:none}@keyframes scale-in{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes scale-out{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes fade-in{0%{opacity:0}50%{opacity:1}100%{opacity:1}}@keyframes fade-out{0%{opacity:1}50%{opacity:0}100%{opacity:0}}',this.shadowRoot.appendChild(t)}}},{key:"disconnectedCallback",value:function(){null!==this.avatarBtn&&this.avatarBtn.removeEventListener("click",this.toggle)}},{key:"genChatDialogue",value:function(){var t=this,e=document.createElement("div");e.classList.add("chatbot-container"),e.classList.add("hidden");var o=document.createElement("div");o.classList.add("chatbot-header");var n=document.createElement("div");n.classList.add("left");var r=document.createElement("h3"),i=document.createElement("div");i.classList.add("right");var a=document.createElement("button");a.classList.add("minimize"),a.addEventListener("click",this.toggle),i.appendChild(a),r.textContent=this.props.title,o.append(n,r,i),this.header=o;var s=document.createElement("div");s.classList.add("chatbot-body"),e.appendChild(s),this.body=s;var l=document.createElement("div");l.classList.add("chat-footer");var c=document.createElement("form");c.setAttribute("autocomplete","off"),c.addEventListener("submit",(function(e){if(e.preventDefault(),null!==e.target){var o=e.target;""!==o.msg.value&&t.sendMessage(o.msg.value),o.reset()}}));var u=document.createElement("div");u.classList.add("chatbot-input");var d=document.createElement("input");d.setAttribute("type","text"),d.setAttribute("id","msg-input"),d.setAttribute("name","msg"),d.setAttribute("placeholder","Type your message here..."),d.setAttribute("autocomplete","do-not-autofill"),d.setAttribute("autocorrect","off"),this.textInput=d;var b=document.createElement("button");return b.innerHTML='\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="transform: rotate(70deg) scale(1,1.3) translate(1px, -3px);">\n        <path fill="currentColor" d="M3.06 19.35c-.24.39-.21.88.06 1.19.27.3.7.38 1.06.19l7.47-4.12 7.47 4.12c.16.09.33.13.5.13.34 0 .67-.15.89-.43.27-.3.3-.78.06-1.19l-7.47-12.36L3.06 19.35z"/>\n      </svg>',u.append(d,b),c.appendChild(u),l.appendChild(c),this.footer=l,e.append(o,s,l),this.container=e,e}},{key:"genBotAvatar",value:function(){var t=document.createElement("div");return t.classList.add("bot-button"),t.classList.add("avatar"),t.addEventListener("click",this.toggle),this.avatarBtn=t,t}},{key:"toggle",value:function(){null!==this.container&&(this.container.classList.remove("hidden"),this.container.classList.contains("animation-scale-in")?(this.container.classList.remove("animation-scale-in"),this.container.classList.add("animation-scale-out")):this.container.classList.contains("animation-scale-out")?(this.container.classList.remove("animation-scale-out"),this.container.classList.add("animation-scale-in"),this.container.addEventListener("animationend",this.dialogueDisplayed)):(this.container.classList.add("animation-scale-in"),this.container.addEventListener("animationend",this.dialogueDisplayed)))}},{key:"createTextMessage",value:function(t){if(null===t)return null;document.querySelector("chat-bot");var e=document.createTextNode(t),o=document.createElement("p");return o.append(e),o.outerHTML}},{key:"sendMessage",value:function(t){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null;this._messages.length>0&&(n=this._messages[this._messages.length-1]);var r=this.createTextMessage(t);null===r&&void 0!==o.message&&(r=o.message);var i=function(t){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?c(Object(n),!0).forEach((function(o){var r,i,a;r=t,i=o,a=n[o],(i=e(i))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({message:null===r?"":r,continued:!1,right:!0,delay:0,loading:!1,sender:{name:"",id:""}},o);""===i.sender.id&&(i.sender=i.right?this.sender:this.partner),this._messages.push(i);var a=document.createElement("chat-bubble");a.innerHTML=i.message,a.continued=i.continued,a.setAttribute("part","chat-bubble"),null!==n&&n.sender.id===i.sender.id&&(a.continued=!0),a.right=i.right,a.delay=i.delay,a.loading=i.loading,a.msg=i,a.continued&&a.setAttribute("continued",""),a.right&&a.setAttribute("right",""),a.loading&&a.setAttribute("loading",""),i.sender.avatar&&a.setAttribute("avatar",i.sender.avatar),a.addEventListener("mounted",this.scrollToBottom),null!==this.body&&this.body.appendChild(a)}},{key:"messages",get:function(){return this._messages}},{key:"scrollToBottom",value:function(t){var e=t.target,o=new CustomEvent("sent",{detail:{message:e.msg}});this.dispatchEvent(o),null!==this.body&&this.body.scrollTo({top:this.body.scrollHeight,behavior:"smooth"})}},{key:"dialogueDisplayed",value:function(){null!==this.container&&(this.container.removeEventListener("animationend",this.dialogueDisplayed),null!==this.textInput&&this.textInput.focus())}}],i&&r(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,i}(l(HTMLElement));void 0===customElements.get("chat-bot")&&window.customElements.define("chat-bot",b);const h=b})(),n})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["wc-chatbot"]=e():t["wc-chatbot"]=e()}(self,(()=>(()=>{var t={290:t=>{var e;self,e=()=>(()=>{"use strict";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t,e){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},r(t,e)}function i(t){return i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},i(t)}function a(t,e,o){return a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}()?Reflect.construct.bind():function(t,e,o){var n=[null];n.push.apply(n,e);var i=new(Function.bind.apply(t,n));return o&&r(i,o.prototype),i},a.apply(null,arguments)}function s(t){var e="function"==typeof Map?new Map:void 0;return s=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return a(t,arguments,i(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),r(o,t)},s(t)}t.r(e),t.d(e,{default:()=>c});var l=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&r(t,e)}(u,t);var e,a,s,l,c=(s=u,l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}(),function(){var t,e=i(s);if(l){var r=i(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return function(t,e){if(e&&("object"===o(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}(this,t)});function u(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,u),(t=c.call(this)).attachShadow({mode:"open"}),t.dispatchMountedEvent=t.dispatchMountedEvent.bind(n(t)),t.props={delay:0,avatar:'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect x="45" y="55" width="110" height="100" rx="20" fill-opacity="0" stroke="black" stroke-width="15"></rect><circle cx="75" cy="95" r="10" fill="black"></circle><circle cx="125" cy="95" r="10" fill="black"></circle><line x1="75" y1="125" x2="125" y2="125" stroke="black" stroke-width="10"></line><ellipse cx="30" cy="95" rx="10" ry="10" fill="black" stroke="black" stroke-width="10"></ellipse><ellipse cx="170" cy="95" rx="10" ry="10" fill="black" stroke="black" stroke-width="10"></ellipse><circle cx="100" cy="30" r="10" fill="black" stroke="black" stroke-width="10"></circle><line x1="100" y1="35" x2="100" y2="55" stroke="black" stroke-width="10"></line></svg>'},t.msgElement=null,t.bubbleElement=null,t._isContinued=!1,t._isRight=!1,t._isLoading=!1,t}return e=u,(a=[{key:"connectedCallback",value:function(){if(this.hasAttribute("delay")){var t=this.getAttribute("delay");if(null!==t){var e=parseInt(t);this.props.delay=isNaN(e)?0:e>0?e:0}}var o=document.createElement("div");if(o.classList.add("chat-message"),this.hasAttribute("continued")&&(o.classList.add("continue"),this._isContinued=!0),this.hasAttribute("right")&&(o.classList.add("right"),this._isRight=!0),this.hasAttribute("loading")&&(this._isLoading=!0),this.hasAttribute("avatar")&&(this.props.avatar=this.getAttribute("avatar")),this.bubbleElement=this.genBubbleElement(),o.append(this.genAvatarElement()),o.append(this.bubbleElement),this.msgElement=o,null!==this.shadowRoot){var n=new CSSStyleSheet;n.replaceSync(':host{--chat-bubble-color: #FFFFFF;--chat-bubble-right-color: #F6ECCC;--chat-bubble-font-color: #000000;--chat-bubble-font-right-color: #000000;--chat-bubble-avatar-color: #CCCCCC;--chat-bubble-delay: 0.5s}::slotted(p){margin:0 !important}.chat-message{display:flex}.chat-message .chat-bubble{font-weight:400;font-family:"PingFang SC","Noto Sans TC","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;position:relative;width:max-content;background-color:var(--chat-bubble-color);border-radius:20px;box-shadow:0 0 1px rgba(0,0,0,.3);padding:10px 20px;margin:10px 15px 0px;max-width:min(60%,600px);animation:scale-in .2s ease,fade-in .2s ease;transform-origin:top left;transition:width .5s ease,height .5s ease,left .5s ease;animation-fill-mode:backwards;animation-delay:calc(var(--chat-bubble-delay)*var(--bubble-index));color:var(--chat-bubble-font-color)}.chat-message .chat-bubble .chat-content{word-wrap:break-word;overflow:hidden}.chat-message .chat-bubble::before{content:"";position:absolute;border:0 solid rgba(0,0,0,0);border-bottom:7px solid var(--chat-bubble-color);border-radius:0 0 0 20px;width:12px;height:12px;top:-5px;left:-7px}.chat-message .chat-bubble p{margin:0}.chat-message .avatar{width:36px;height:36px;border-radius:100%;background-color:var(--chat-bubble-avatar-color);overflow:hidden;animation:scale-in 0s ease;animation-fill-mode:backwards;animation-delay:calc(var(--chat-bubble-delay)*var(--bubble-index))}.chat-message .avatar img{width:80%;height:80%;margin:10%}.chat-message.right{justify-content:end}.chat-message.right .chat-bubble{background:var(--chat-bubble-right-color);color:var(--chat-bubble-font-right-color);transform-origin:top right}.chat-message.right .chat-bubble::before{border-radius:0 0 20px 0;border-color:var(--chat-bubble-right-color);left:auto;right:-7px}.chat-message.right .avatar{display:none}.chat-message.continue .chat-bubble::before{display:none}.chat-message.continue .avatar{opacity:0}.chat-message.continue .avatar img{display:none}.chat-message .chat-bubble.animation-scale-out{animation:scale-out .2s ease-in-out forwards,fade-out .2s ease-in-out forwards}@keyframes scale-in{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes scale-out{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes fade-in{0%{opacity:0}50%{opacity:1}100%{opacity:1}}@keyframes fade-out{0%{opacity:1}50%{opacity:0}100%{opacity:0}}.typing-indicator{display:flex;align-items:start;margin-left:20px;color:#666}.typing-indicator .dots{display:flex;margin:10px auto;padding:0 2px;gap:8px}.typing-indicator .dots .dot{width:5px;height:5px;border-radius:100%;background-color:#666;animation:pulse 1.5s ease-in-out infinite}.typing-indicator .dots .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dots .dot:nth-child(3){animation-delay:.4s}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}'),this.shadowRoot.adoptedStyleSheets=[n],this.shadowRoot.append(o)}}},{key:"removeGracefully",value:function(){var t=this;null!==this.bubbleElement&&(this.bubbleElement.addEventListener("animationend",(function(){var e=t.parentElement;null!==e?e.removeChild(t):t.remove()})),this.bubbleElement.classList.add("animation-scale-out"))}},{key:"dispatchMountedEvent",value:function(){var t=new CustomEvent("mounted");this.dispatchEvent(t),null!==this.bubbleElement&&this.bubbleElement.removeEventListener("animationend",this.dispatchMountedEvent)}},{key:"continued",get:function(){return this._isContinued},set:function(t){this._isContinued=t,null!==this.msgElement&&(this._isContinued?this.msgElement.classList.add("continue"):this.msgElement.classList.remove("continue"))}},{key:"right",get:function(){return this._isRight},set:function(t){this._isRight=t,null!==this.msgElement&&(this._isRight?this.msgElement.classList.add("right"):this.msgElement.classList.remove("right"))}},{key:"loading",get:function(){return this._isLoading},set:function(t){this._isLoading=t,null!==this.bubbleElement&&(this._isLoading?(this.bubbleElement.classList.add("typing-indicator"),this.bubbleElement.innerHTML='<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>'):(this.bubbleElement.classList.remove("typing-indicator"),this.bubbleElement.innerHTML="<slot></slot>"))}},{key:"genAvatarElement",value:function(){var t=document.createElement("div"),e=document.createElement("img");return t.classList.add("avatar"),t.style.setProperty("--bubble-index",String(this.props.delay)),e.src=this.props.avatar,t.append(e),t}},{key:"genBubbleElement",value:function(){var t=document.createElement("div");t.classList.add("chat-bubble");var e=document.createElement("div");return e.classList.add("chat-content"),t.appendChild(e),this.hasAttribute("loading")?(t.classList.add("typing-indicator"),e.innerHTML='<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>'):e.appendChild(document.createElement("slot")),t.style.setProperty("--bubble-index",String(this.props.delay)),t.addEventListener("animationend",this.dispatchMountedEvent),t}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(i=function(t){if("object"!==o(t)||null===t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!==o(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===o(i)?i:String(i)),r)}var i}(e.prototype,a),Object.defineProperty(e,"prototype",{writable:!1}),u}(s(HTMLElement));void 0===customElements.get("chat-bubble")&&window.customElements.define("chat-bubble",l);const c=l;return e})(),t.exports=e()}},e={};function o(n){var r=e[n];if(void 0!==r)return r.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,o),i.exports}o.d=(t,e)=>{for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e){var o=function(e){if("object"!=t(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,"string");if("object"!=t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(o)?o:o+""}function r(t,o,n){return(o=e(o))in t?Object.defineProperty(t,o,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[o]=n,t}function i(t,o){for(var n=0;n<o.length;n++){var r=o[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}function s(t,e){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},s(t,e)}function l(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(l=function(){return!!t})()}function c(t){var e="function"==typeof Map?new Map:void 0;return c=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return function(t,e,o){if(l())return Reflect.construct.apply(null,arguments);var n=[null];n.push.apply(n,e);var r=new(t.bind.apply(t,n));return o&&s(r,o.prototype),r}(t,arguments,a(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),s(o,t)},c(t)}function u(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function d(e,o,n){return o=a(o),function(e,o){if(o&&("object"==t(o)||"function"==typeof o))return o;if(void 0!==o)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}(e,h()?Reflect.construct(o,n||[],a(e).constructor):o.apply(e,n))}function h(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(h=function(){return!!t})()}o.r(n),o.d(n,{default:()=>p}),o(290);var b=function(t){function e(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),(t=d(this,e)).attachShadow({mode:"open"}),t.genChatDialogue=t.genChatDialogue.bind(t),t.sendMessage=t.sendMessage.bind(t),t.toggle=t.toggle.bind(t),t.scrollToBottom=t.scrollToBottom.bind(t),t.dialogueDisplayed=t.dialogueDisplayed.bind(t),t._messages=[],t.props={title:"Chatbot"},t.sender={name:"Anonymous",id:"00000123-0000-0000-0000-000000000001"},t.partner={name:"Bot",id:"00000123-0000-0000-0000-000000000002"},t.container=null,t.header=null,t.body=null,t.footer=null,t.avatarBtn=null,t.textInput=null,t}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&s(t,e)}(e,t),o=e,n=[{key:"connectedCallback",value:function(){if(null!==this.shadowRoot){this.hasAttribute("title")&&""!==String(this.getAttribute("title")).trim()&&(this.props.title=String(this.getAttribute("title")).trim()),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.genChatDialogue()),this.shadowRoot.appendChild(this.genBotAvatar());var t=document.createElement("style");t.textContent=':host{--chatbot-avatar-bg-color: #F9A825;--chatbot-avatar-img: url(\'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><rect x="45" y="55" width="110" height="100" rx="20" fill-opacity="0" stroke="rgba(76,76,76,1.0)" stroke-width="15"></rect><circle cx="75" cy="95" r="10" fill="rgba(76,76,76,1.0)"></circle><circle cx="125" cy="95" r="10" fill="rgba(76,76,76,1.0)"></circle><line x1="75" y1="125" x2="125" y2="125" stroke="rgba(76,76,76,1.0)" stroke-width="10"></line><ellipse cx="30" cy="95" rx="10" ry="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></ellipse><ellipse cx="170" cy="95" rx="10" ry="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></ellipse><circle cx="100" cy="30" r="10" fill="rgba(76,76,76,1.0)" stroke="rgba(76,76,76,1.0)" stroke-width="10"></circle><line x1="100" y1="35" x2="100" y2="55" stroke="rgba(76,76,76,1.0)" stroke-width="10"></line></svg>\');--chatbot-avatar-margin: 10%;--chatbot-header-bg-color: #F9A825;--chatbot-header-title-color: #FFFFFF;--chatbot-body-bg-color: #9dbfde;--chatbot-send-button-color: #F9A825}.chatbot-container{z-index:9999;position:fixed;bottom:80px;right:20px;width:min(360px,90%);height:min(500px,100% - 100px);background-color:#fff;border:0px solid #ccc;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3);font-family:Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}.chatbot-header{background-color:var(--chatbot-header-bg-color);color:var(--chatbot-header-title-color);padding:10px;text-align:center;flex-grow:0;flex-shrink:0;height:30px;display:flex;align-items:center;display:flex;justify-content:center}.chatbot-header h3{margin:auto}.chatbot-header .left{flex:1}.chatbot-header .right{flex:1;text-align:right}.chatbot-header .right button.minimize{width:28px;height:26px;position:relative;background-color:rgba(0,0,0,0);border:solid 1px #fff;border-radius:4px;box-shadow:0 0 2px rgba(255,255,255,.3);cursor:pointer}.chatbot-header .right button.minimize::before{content:"";display:block;position:absolute;top:4px;left:1px;height:24px;width:24px;padding:0;background-image:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><rect x="4" y="12" width="16" height="2" rx="1" ry="1" fill="white"/></svg>\');background-repeat:no-repeat;background-size:cover}.chatbot-body{height:300px;overflow-y:auto;padding:8px;flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;background-color:var(--chatbot-body-bg-color)}.chatbot-footer{flex-grow:0;flex-shrink:0;border-top:solid 1px #f1f1f1}.chatbot-input{padding:10px;display:flex}.chatbot-input input{flex:1;border:none;padding:5px;border-radius:3px;font-size:1rem;outline:none}.chatbot-input button{border:none;background-color:var(--chatbot-send-button-color);color:#fff;padding:5px 10px;margin-left:10px;border-radius:3px;position:relative;overflow:hidden;cursor:pointer}.chatbot-input button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--chatbot-send-button-color);mix-blend-mode:multiply;opacity:0;transition:opacity .2s ease}.chatbot-input button:hover::before,.chatbot-input button:focus::before,.chatbot-input button:active::before{opacity:.8}.bot-button{z-index:9999;position:fixed;right:20px;bottom:20px;box-shadow:0 0 6px rgba(0,0,0,.3)}.bot-button.avatar{height:48px;width:48px;cursor:pointer;border-radius:50%;background-color:var(--chatbot-avatar-bg-color);overflow:hidden}.bot-button.avatar::before{content:"";display:block;height:calc(100% - 2*var(--chatbot-avatar-margin));width:calc(100% - 2*var(--chatbot-avatar-margin));margin:var(--chatbot-avatar-margin);background-image:var(--chatbot-avatar-img);background-repeat:no-repeat;background-size:contain}.animation-scale-in{animation:scale-in .2s ease-in-out forwards,fade-in .2s ease-in-out forwards;transform-origin:bottom right}.animation-scale-out{animation:scale-out .2s ease-in-out forwards,fade-out .2s ease-in-out forwards;transform-origin:bottom right}.chatbot-container.hidden{display:none}@keyframes scale-in{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes scale-out{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes fade-in{0%{opacity:0}50%{opacity:1}100%{opacity:1}}@keyframes fade-out{0%{opacity:1}50%{opacity:0}100%{opacity:0}}',this.shadowRoot.appendChild(t)}}},{key:"disconnectedCallback",value:function(){null!==this.avatarBtn&&this.avatarBtn.removeEventListener("click",this.toggle)}},{key:"genChatDialogue",value:function(){var t=this,e=document.createElement("div");e.classList.add("chatbot-container"),e.classList.add("hidden");var o=document.createElement("div");o.classList.add("chatbot-header");var n=document.createElement("div");n.classList.add("left");var r=document.createElement("h3"),i=document.createElement("div");i.classList.add("right");var a=document.createElement("button");a.classList.add("minimize"),a.addEventListener("click",this.toggle),i.appendChild(a),r.textContent=this.props.title,o.append(n,r,i),this.header=o;var s=document.createElement("div");s.classList.add("chatbot-body"),e.appendChild(s),this.body=s;var l=document.createElement("div");l.classList.add("chat-footer");var c=document.createElement("form");c.setAttribute("autocomplete","off"),c.addEventListener("submit",(function(e){if(e.preventDefault(),null!==e.target){var o=e.target;""!==o.msg.value&&t.sendMessage(o.msg.value),o.reset()}}));var u=document.createElement("div");u.classList.add("chatbot-input");var d=document.createElement("input");d.setAttribute("type","text"),d.setAttribute("id","msg-input"),d.setAttribute("name","msg"),d.setAttribute("placeholder","Type your message here..."),d.setAttribute("autocomplete","do-not-autofill"),d.setAttribute("autocorrect","off"),this.textInput=d;var h=document.createElement("button");return h.innerHTML='\n      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="transform: rotate(70deg) scale(1,1.3) translate(1px, -3px);">\n        <path fill="currentColor" d="M3.06 19.35c-.24.39-.21.88.06 1.19.27.3.7.38 1.06.19l7.47-4.12 7.47 4.12c.16.09.33.13.5.13.34 0 .67-.15.89-.43.27-.3.3-.78.06-1.19l-7.47-12.36L3.06 19.35z"/>\n      </svg>',u.append(d,h),c.appendChild(u),l.appendChild(c),this.footer=l,e.append(o,s,l),this.container=e,e}},{key:"genBotAvatar",value:function(){var t=document.createElement("div");return t.classList.add("bot-button"),t.classList.add("avatar"),t.addEventListener("click",this.toggle),this.avatarBtn=t,t}},{key:"toggle",value:function(){null!==this.container&&(this.container.classList.remove("hidden"),this.container.classList.contains("animation-scale-in")?(this.container.classList.remove("animation-scale-in"),this.container.classList.add("animation-scale-out")):this.container.classList.contains("animation-scale-out")?(this.container.classList.remove("animation-scale-out"),this.container.classList.add("animation-scale-in"),this.container.addEventListener("animationend",this.dialogueDisplayed)):(this.container.classList.add("animation-scale-in"),this.container.addEventListener("animationend",this.dialogueDisplayed)))}},{key:"createTextMessage",value:function(t){if(null===t)return null;document.querySelector("chat-bot");var e=document.createTextNode(t),o=document.createElement("p");return o.append(e),o.outerHTML}},{key:"sendMessage",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=null;this._messages.length>0&&(o=this._messages[this._messages.length-1]);var n=this.createTextMessage(t);null===n&&void 0!==e.message&&(n=e.message);var i=function(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?u(Object(o),!0).forEach((function(e){r(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):u(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}({message:null===n?"":n,continued:!1,right:!0,delay:0,loading:!1,sender:{name:"",id:""}},e);""===i.sender.id&&(i.sender=i.right?this.sender:this.partner),this._messages.push(i);var a=document.createElement("chat-bubble");a.innerHTML=i.message,a.continued=i.continued,a.setAttribute("part","chat-bubble"),null!==o&&o.sender.id===i.sender.id&&(a.continued=!0),a.right=i.right,a.delay=i.delay,a.loading=i.loading,a.msg=i,a.continued&&a.setAttribute("continued",""),a.right&&a.setAttribute("right",""),a.loading&&a.setAttribute("loading",""),i.sender.avatar&&a.setAttribute("avatar",i.sender.avatar),a.addEventListener("mounted",this.scrollToBottom),null!==this.body&&this.body.appendChild(a)}},{key:"hideLoading",value:function(t){if(null!==this.shadowRoot){var e,o=this.shadowRoot.querySelectorAll("chat-bubble[loading]");o.length>0&&t in o&&(null===(e=o[t].parentElement)||void 0===e||e.removeChild(o[t]))}}},{key:"hideAllLoading",value:function(){if(null!==this.shadowRoot){var t=this.shadowRoot.querySelectorAll("chat-bubble[loading]");Array.from(t).forEach((function(t){var e;null===(e=t.parentElement)||void 0===e||e.removeChild(t)}))}}},{key:"hideLastLoading",value:function(){if(null!==this.shadowRoot){var t,e=this.shadowRoot.querySelectorAll("chat-bubble[loading]");e.length>0&&(null===(t=e[e.length-1].parentElement)||void 0===t||t.removeChild(e[e.length-1]))}}},{key:"messages",get:function(){return this._messages}},{key:"scrollToBottom",value:function(t){var e=t.target,o=new CustomEvent("sent",{detail:{message:e.msg}});this.dispatchEvent(o),null!==this.body&&this.body.scrollTo({top:this.body.scrollHeight,behavior:"smooth"})}},{key:"dialogueDisplayed",value:function(){null!==this.container&&(this.container.removeEventListener("animationend",this.dialogueDisplayed),null!==this.textInput&&this.textInput.focus())}}],n&&i(o.prototype,n),Object.defineProperty(o,"prototype",{writable:!1}),o;var o,n}(c(HTMLElement));void 0===customElements.get("chat-bot")&&window.customElements.define("chat-bot",b);const p=b})(),n})()));
 //# sourceMappingURL=wc-chatbot.js.map

package.json

 {
   "name": "wc-chatbot",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "A simple WebComponent for chatting with real people or bots, such as OpenAI ChatGPT or Google Bard AI.",
@@ -5,0 +5,0 @@ "main": "./dist/wc-chatbot.js",

README.md

@@ -7,3 +7,3 @@ # wc-chatbot
 [![npm][npm-download-img]][npm-url]
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/wc-chatbot/badge)](https://data.jsdelivr.com/v1/package/npm/wc-chatbot/badge)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/wc-chatbot/badge)](https://www.jsdelivr.com/package/npm/wc-chatbot)
 [![GitHub issues][github-issue-img]][github-issue-url]
@@ -183,2 +183,14 @@ ![license][license-img]
 
+### hideLoading(index)
+This method is used to remove a specific `loading` bubble from the chatbot UI.
+
+#### Parameters
+ - `index` - The index of the chat-bubble element to be removed.
+
+### hideAllLoading()
+This method is used to remove all `loading` bubbles from the chatbot UI.
+
+### hideLastLoading()
+This method is used to remove the last `loading` bubble from the chatbot UI.
+
 ## Event
@@ -185,0 +197,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126622

increased by1.73%

Lines of code

146

increased by2.1%

Number of lines in readme file

268

increased by4.69%

No dependency changes