package.dist.wc-chatbot.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of wc-chatbot Show documentation
A simple WebComponent for chatting with real people or bots, such as OpenAI ChatGPT or Google Bard AI.
The newest version!
!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,'},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='
'):(this.bubbleElement.classList.remove("typing-indicator"),this.bubbleElement.innerHTML=""))}},{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='
'):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{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;np}),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,\');--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,\');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      ',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;e0&&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