quikchat
Version:
quikchat is a simple vanilla (no dependancies) JavaScript chat control for browsers
3 lines (2 loc) • 17.4 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).quikchat=t()}(this,(function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var s=0,i=Array(t);s<t;s++)i[s]=e[s];return i}function t(e,t){for(var s=0;s<t.length;s++){var i=t[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,r(i.key),i)}}function s(t,s){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=function(t,s){if(t){if("string"==typeof t)return e(t,s);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?e(t,s):void 0}}(t))||s){i&&(t=i);var n=0,a=function(){};return{s:a,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,o=!0,l=!1;return{s:function(){i=i.call(t)},n:function(){var e=i.next();return o=e.done,e},e:function(e){l=!0,r=e},f:function(){try{o||null==i.return||i.return()}finally{if(l)throw r}}}}function i(e,t,s){return(t=r(t))in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}function n(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),s.push.apply(s,i)}return s}function a(e){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{};t%2?n(Object(s),!0).forEach((function(t){i(e,t,s[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):n(Object(s)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))}))}return e}function r(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var i=s.call(e,t);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var o=function(){return e=function e(t){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e);var n=a(a({},{theme:"quikchat-theme-light",trackHistory:!0,showTimestamps:!1,titleArea:{title:"Chat",show:!1,align:"center"},messagesArea:{alternating:!0}}),i);"string"==typeof t&&(t=document.querySelector(t)),this._parentElement=t,this._theme=n.theme,this._onSend=s||function(){},this._messageFormatter=n.messageFormatter||null,this._sanitize=n.sanitize||!1,this._createWidget(),n.titleArea&&(this.titleAreaSetContents(n.titleArea.title,n.titleArea.align),!0===n.titleArea.show?this.titleAreaShow():this.titleAreaHide()),n.messagesArea&&this.messagesAreaAlternateColors(n.messagesArea.alternating),n.showTimestamps&&this.messagesAreaShowTimestamps(!0),n.direction&&this.setDirection(n.direction),this._attachEventListeners(),this.trackHistory=!1!==n.trackHistory,this._historyLimit=1e7,this._history=[]},i=[{key:"_createWidget",value:function(){var e='\n <div class="quikchat-base '.concat(this.theme,'">\n <div class="quikchat-title-area"></div>\n <div class="quikchat-messages-wrapper"><div class="quikchat-messages-area" role="log" aria-live="polite" aria-label="Chat messages"></div><button class="quikchat-scroll-bottom" aria-label="Scroll to bottom"></button></div>\n <div class="quikchat-input-area">\n <textarea class="quikchat-input-textbox" rows="1" aria-label="Type a message"></textarea>\n <button class="quikchat-input-send-btn">Send</button>\n </div>\n </div>\n ');this._parentElement.innerHTML=e,this._chatWidget=this._parentElement.querySelector(".quikchat-base"),this._titleArea=this._chatWidget.querySelector(".quikchat-title-area"),this._messagesWrapper=this._chatWidget.querySelector(".quikchat-messages-wrapper"),this._messagesArea=this._chatWidget.querySelector(".quikchat-messages-area"),this._scrollBottomBtn=this._messagesWrapper.querySelector(".quikchat-scroll-bottom"),this._inputArea=this._chatWidget.querySelector(".quikchat-input-area"),this._textEntry=this._inputArea.querySelector(".quikchat-input-textbox"),this._sendButton=this._inputArea.querySelector(".quikchat-input-send-btn"),this.msgid=0}},{key:"_attachEventListeners",value:function(){var e=this;this._sendButton.addEventListener("click",(function(){var t=e._textEntry.value.trim();""!==t&&e._onSend(e,t)})),this._textEntry.addEventListener("keydown",(function(t){if(t.shiftKey&&13===t.keyCode){t.preventDefault();var s=e._textEntry.value.trim();if(""===s)return;e._onSend(e,s)}})),this._textEntry.addEventListener("input",(function(){return e._autoGrowTextarea()})),this._messagesArea.addEventListener("scroll",(function(){var t=e._messagesArea,s=t.scrollTop,i=t.scrollHeight,n=t.clientHeight;e.userScrolledUp=s+n<i-1,e._updateScrollBottomBtn()})),this._scrollBottomBtn.addEventListener("click",(function(){return e.scrollToBottom()})),this._chatWidget.addEventListener("keydown",(function(t){t.ctrlKey&&"End"===t.key&&(t.preventDefault(),e.scrollToBottom())})),"undefined"!=typeof ResizeObserver&&(this._resizeObserver=new ResizeObserver((function(){return e._handleContainerResize()})),this._resizeObserver.observe(this._parentElement))}},{key:"setCallbackOnSend",value:function(e){this._onSend=e}},{key:"setCallbackonMessageAdded",value:function(e){this._onMessageAdded=e}},{key:"setCallbackonMessageAppend",value:function(e){this._onMessageAppend=e}},{key:"setCallbackonMessageReplace",value:function(e){this._onMessageReplace=e}},{key:"setCallbackonMessageDelete",value:function(e){this._onMessageDelete=e}},{key:"titleAreaToggle",value:function(){"none"===this._titleArea.style.display?this.titleAreaShow():this.titleAreaHide()}},{key:"titleAreaShow",value:function(){this._titleArea.style.display=""}},{key:"titleAreaHide",value:function(){this._titleArea.style.display="none"}},{key:"titleAreaSetContents",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center";this._titleArea.innerHTML=e,this._titleArea.style.textAlign=t}},{key:"titleAreaGetContents",value:function(){return this._titleArea.innerHTML}},{key:"inputAreaToggle",value:function(){"none"===this._inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this._inputArea.style.display=""}},{key:"inputAreaHide",value:function(){this._inputArea.style.display="none"}},{key:"inputAreaSetEnabled",value:function(e){this._textEntry.disabled=!e,this._sendButton.disabled=!e}},{key:"inputAreaSetButtonText",value:function(e){this._sendButton.textContent=e}},{key:"inputAreaGetButtonText",value:function(){return this._sendButton.textContent}},{key:"setDirection",value:function(e){var t="rtl"===e?"rtl":"ltr";this._chatWidget.setAttribute("dir",t),"rtl"===t?this._chatWidget.classList.add("quikchat-rtl"):this._chatWidget.classList.remove("quikchat-rtl")}},{key:"getDirection",value:function(){return this._chatWidget.getAttribute("dir")||"ltr"}},{key:"_handleContainerResize",value:function(){}},{key:"scrollToBottom",value:function(){this._messagesArea.scrollTop=this._messagesArea.scrollHeight,this.userScrolledUp=!1,this._updateScrollBottomBtn()}},{key:"_updateScrollBottomBtn",value:function(){this.userScrolledUp?this._scrollBottomBtn.classList.add("quikchat-scroll-bottom-visible"):this._scrollBottomBtn.classList.remove("quikchat-scroll-bottom-visible")}},{key:"_autoGrowTextarea",value:function(){var e=this._textEntry;e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px",e.style.overflowY=e.scrollHeight>120?"auto":"hidden"}},{key:"_formatTimestamp",value:function(e){var t=new Date(e),s=t.getHours();return(s%12||12)+":"+String(t.getMinutes()).padStart(2,"0")+" "+(s>=12?"PM":"AM")}},{key:"messagesAreaShowTimestamps",value:function(e){e?this._messagesArea.classList.add("quikchat-show-timestamps"):this._messagesArea.classList.remove("quikchat-show-timestamps")}},{key:"messagesAreaShowTimestampsGet",value:function(){return this._messagesArea.classList.contains("quikchat-show-timestamps")}},{key:"messagesAreaShowTimestampsToggle",value:function(){this._messagesArea.classList.toggle("quikchat-show-timestamps")}},{key:"_escapeHTML",value:function(e){var t=document.createElement("div");return t.textContent=e,t.innerHTML}},{key:"_processContent",value:function(e){return!0===this._sanitize?e=this._escapeHTML(e):"function"==typeof this._sanitize&&(e=this._sanitize(e)),this._messageFormatter&&(e=this._messageFormatter(e)),e}},{key:"messagesAreaAlternateColors",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return e?this._messagesArea.classList.add("quikchat-messages-area-alt"):this._messagesArea.classList.remove("quikchat-messages-area-alt"),!0===e}},{key:"messagesAreaAlternateColorsToggle",value:function(){this._messagesArea.classList.toggle("quikchat-messages-area-alt")}},{key:"messagesAreaAlternateColorsGet",value:function(){return this._messagesArea.classList.contains("quikchat-messages-area-alt")}},{key:"messageAddFull",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{content:"",userString:"user",align:"right",role:"user",userID:-1},t=this.msgid,s=document.createElement("div"),i="quikchat-msgid-"+String(t).padStart(10,"0");s.classList.add("quikchat-message",i),s.classList.add("quikchat-role-"+(e.role||"user")),s.classList.add("quikchat-align-"+(e.align||"right")),this.msgid++,s.classList.add(this._messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var n=!1!==e.visible;n||(s.style.display="none");var r=Array.isArray(e.tags)?e.tags.slice():[],o=document.createElement("div");o.classList.add("quikchat-user-label"),o.style.textAlign=e.align,o.innerHTML=e.userString;var l=document.createElement("div");l.classList.add("quikchat-message-content"),l.style.textAlign=e.align,l.innerHTML=this._processContent(e.content);var u=(new Date).toISOString(),c=document.createElement("span");c.classList.add("quikchat-timestamp"),c.textContent=this._formatTimestamp(u),s.appendChild(o),s.appendChild(l),s.appendChild(c),this._messagesArea.appendChild(s),this.userScrolledUp||(this._messagesArea.scrollTop=this._messagesArea.scrollHeight),this._textEntry.value="",this._autoGrowTextarea();var h=u;return this.trackHistory&&(this._history.push(a(a({msgid:t},e),{},{visible:n,tags:r,timestamp:u,updatedtime:h,messageDiv:s})),this._history.length>this._historyLimit&&this._history.shift()),this._onMessageAdded&&this._onMessageAdded(this,t),t}},{key:"messageAddNew",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"user",s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"right",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"user";return this.messageAddFull({content:e,userString:t,align:s,role:i})}},{key:"messageRemove",value:function(e){var t=!1;try{this._messagesArea.removeChild(this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0")))),t=!0}catch(e){}return t&&(this._history.splice(this._history.findIndex((function(t){return t.msgid===e})),1),this._onMessageDelete&&this._onMessageDelete(this,e)),t}},{key:"messageGetDOMObject",value:function(e){var t=null;try{t=this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0")))}catch(e){}return t}},{key:"messageGetContent",value:function(e){var t="";try{t=this._history.filter((function(t){return t.msgid===e}))[0].content}catch(e){}return t}},{key:"messageSetVisible",value:function(e,t){var s=this.messageGetDOMObject(e);if(!s)return!1;s.style.display=t?"":"none";var i=this._history.find((function(t){return t.msgid===e}));return i&&(i.visible=t),!0}},{key:"messageGetVisible",value:function(e){var t=this._history.find((function(t){return t.msgid===e}));return!!t&&!1!==t.visible}},{key:"messageToggleVisible",value:function(e){var t=this.messageGetVisible(e);return this.messageSetVisible(e,!t)}},{key:"messageSetVisibleByTag",value:function(e,t){var i,n=0,a=s(this._history);try{for(a.s();!(i=a.n()).done;){var r=i.value;r.tags&&r.tags.includes(e)&&(this.messageSetVisible(r.msgid,t),n++)}}catch(e){a.e(e)}finally{a.f()}return n}},{key:"messageGetTags",value:function(e){var t=this._history.find((function(t){return t.msgid===e}));return t&&t.tags?t.tags.slice():[]}},{key:"messageSetTags",value:function(e,t){var s=this._history.find((function(t){return t.msgid===e}));return!!s&&(s.tags=Array.isArray(t)?t.slice():[],!0)}},{key:"messageAppendContent",value:function(e,t){var s=!1;try{var i=this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))),n=this._history.filter((function(t){return t.msgid===e}))[0];n.content+=t,n.updatedtime=(new Date).toISOString(),i.querySelector(".quikchat-message-content").innerHTML=this._processContent(n.content),i.classList.remove("quikchat-typing"),s=!0,this.userScrolledUp||(this._messagesArea.scrollTop=this._messagesArea.scrollHeight),this._onMessageAppend&&this._onMessageAppend(this,e,t)}catch(e){}return s}},{key:"messageReplaceContent",value:function(e,t){var s=!1;try{var i=this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))),n=this._history.filter((function(t){return t.msgid===e}))[0];n.content=t,n.updatedtime=(new Date).toISOString(),i.querySelector(".quikchat-message-content").innerHTML=this._processContent(t),i.classList.remove("quikchat-typing"),s=!0,this.userScrolledUp||(this._messagesArea.scrollTop=this._messagesArea.scrollHeight),this._onMessageReplace&&this._onMessageReplace(this,e,t)}catch(e){}return s}},{key:"messageAddTypingIndicator",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"left",s=this.messageAddFull({content:"",userString:e,align:t,role:"assistant"}),i=this.messageGetDOMObject(s);return i.classList.add("quikchat-typing"),i.querySelector(".quikchat-message-content").innerHTML='<span class="quikchat-typing-dots"><span>.</span><span>.</span><span>.</span></span>',s}},{key:"setMessageFormatter",value:function(e){this._messageFormatter=e}},{key:"setSanitize",value:function(e){this._sanitize=e}},{key:"historyGet",value:function(e,t){return void 0===e?this._history.slice():void 0===t?e<0?this._history.slice(e):this._history.slice(e,e+1):this._history.slice(e,t)}},{key:"historyClear",value:function(){this.msgid=0,this._history=[]}},{key:"historyGetLength",value:function(){return this._history.length}},{key:"historyGetMessage",value:function(e){return e>=0&&e<this._history.length?this._history[e]:{}}},{key:"historyGetMessageContent",value:function(e){return e>=0&&e<this._history.length?this._history[e].content:""}},{key:"historyExport",value:function(){return this._history.map((function(e){return{msgid:e.msgid,content:e.content,userString:e.userString,align:e.align,role:e.role,userID:e.userID,visible:e.visible,tags:e.tags?e.tags.slice():[],timestamp:e.timestamp,updatedtime:e.updatedtime}}))}},{key:"historyImport",value:function(e){this._messagesArea.innerHTML="",this._history=[],this.msgid=0;var t,i=s(e);try{for(i.s();!(t=i.n()).done;){var n=t.value;this.messageAddFull({content:n.content||"",userString:n.userString||"user",align:n.align||"right",role:n.role||"user",userID:n.userID,visible:n.visible,tags:n.tags})}}catch(e){i.e(e)}finally{i.f()}}},{key:"changeTheme",value:function(e){this._chatWidget.classList.remove(this._theme),this._chatWidget.classList.add(e),this._theme=e}},{key:"theme",get:function(){return this._theme}}],n=[{key:"version",value:function(){return{version:"1.2.7",license:"BSD-2",url:"https://github.com/deftio/quikchat"}}},{key:"loremIpsum",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,s=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],i="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ";for("number"!=typeof e&&(e=Math.floor(126*Math.random())+25),void 0===t&&(t=Math.floor(446*Math.random())),t%=446;" "===i[t]||/[.,:;!?]/.test(i[t]);)t=(t+1)%446;for(var n=i.substring(t)+i.substring(0,t),a="";e>0;)a+=e<n.length?n.substring(0,e):n,e-=n.length;return" "===a[a.length-1]&&(a=a.substring(0,a.length-1)+"."),s&&(a=a[0].toUpperCase()+a.substring(1)),a}}],i&&t(e.prototype,i),n&&t(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,i,n}();return o}));
//# sourceMappingURL=quikchat.umd.min.js.map