From 8d2592dea54aa31af58f2e953c09061c07ebee76 Mon Sep 17 00:00:00 2001 From: deftio Date: Mon, 26 Aug 2024 01:13:52 -0700 Subject: [PATCH] added History Save / Restore demo --- README.md | 2 +- coverage/index.html | 38 +-- coverage/lcov-report/index.html | 38 +-- coverage/lcov-report/quikchat.js.html | 88 ++++- coverage/lcov.info | 314 +++++++++--------- coverage/quikchat.js.html | 88 ++++- dev/todo.md | 25 +- dist/quikchat.cjs.js | 34 +- dist/quikchat.cjs.js.map | 2 +- dist/quikchat.cjs.min.js | 2 +- dist/quikchat.cjs.min.js.map | 2 +- dist/quikchat.esm.js | 34 +- dist/quikchat.esm.js.map | 2 +- dist/quikchat.esm.min.js | 2 +- dist/quikchat.esm.min.js.map | 2 +- dist/quikchat.umd.js | 34 +- dist/quikchat.umd.js.map | 2 +- dist/quikchat.umd.min.js | 2 +- dist/quikchat.umd.min.js.map | 2 +- examples/example_umd.html | 3 - .../fastapi_llm/static/quikchat.umd.min.js | 2 +- examples/historyDemo.html | 146 ++++++++ examples/index.html | 4 + .../npm_express/static/quikchat.umd.min.js | 2 +- package.json | 2 +- src/quikchat.js | 28 +- 26 files changed, 646 insertions(+), 254 deletions(-) create mode 100644 examples/historyDemo.html diff --git a/README.md b/README.md index 197402b..8cfaa89 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Quikchat is a vanilla (no dependancies) JavaScript chat control that can be easi * Themeable with CSS (examples for light and dark) * Responsive design for various screen sizes and resizes with parent container * Hideable/Showable Title and Text Entry areas allows flexibility of usage -* Full message history storage and retrieval +* Full message history storage and retrieval (save and resume full chats) * History can be fed directly to OpenAI / Mistral / Ollama compatible APIs for context aware chats * Available via NPM, CDN or source via github * Provided in UMD and ESM formats (+ minified) diff --git a/coverage/index.html b/coverage/index.html index 7e43a08..a7343e3 100644 --- a/coverage/index.html +++ b/coverage/index.html @@ -23,30 +23,30 @@

All files

- 87.3% + 85.22% Statements - 172/197 + 173/203
- 57.83% + 57.47% Branches - 48/83 + 50/87
- 83.33% + 78.43% Functions - 40/48 + 40/51
- 87.76% + 85.56% Lines - 165/188 + 166/194
@@ -80,17 +80,17 @@

All files

quikchat.js - -
+ +
- 87.3% - 172/197 - 57.83% - 48/83 - 83.33% - 40/48 - 87.76% - 165/188 + 85.22% + 173/203 + 57.47% + 50/87 + 78.43% + 40/51 + 85.56% + 166/194 @@ -101,7 +101,7 @@

All files

Code coverage generated by istanbul - at 2024-08-25T21:26:58.883Z + at 2024-08-26T08:13:18.641Z
+ + + + +

Quikchatjs History Get / Restore example

+

This demo shows saving and restore of full message history

+
+
+

Chat Widget

+
+
+
+

Sample History

+
+
+
+

Chat History Snapshot

+
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 2a05ca4..d2fcac0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -63,6 +63,10 @@

Dual Chatrooms

This example demonstrates how to create two chatrooms that can send messages to each other

View Example Dual Chatrooms +

History Demo

+

This demo shows saving and restore of full chat message history. Useful for apps where the history needs to be restored from a previous session.

+ View Example History Demo +

Simple Ollama

This example shows how to use quikchat with a local LLM using Ollama

View Example Ollama diff --git a/examples/npm_express/static/quikchat.umd.min.js b/examples/npm_express/static/quikchat.umd.min.js index ca34023..22df811 100644 --- a/examples/npm_express/static/quikchat.umd.min.js +++ b/examples/npm_express/static/quikchat.umd.min.js @@ -1,2 +1,2 @@ -!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 i=0,n=Array(t);i1&&void 0!==arguments[1]?arguments[1]:function(){},n=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 r=s(s({},{theme:"quikchat-theme-light",trackHistory:!0,titleArea:{title:"Chat",show:!1,align:"center"},messagesArea:{alternating:!0},inputArea:{show:!0}}),n);"string"==typeof t&&(t=document.querySelector(t)),this._parentElement=t,this._theme=r.theme,this._onSend=i||function(){},this._createWidget(),r.titleArea&&(this.titleAreaSetContents(r.titleArea.title,r.titleArea.align),!0===r.titleArea.show?this.titleAreaShow():this.titleAreaHide()),r.messagesArea&&this.messagesAreaAlternateColors(r.messagesArea.alternating),r.inputArea&&(!0===r.inputArea.show?this.inputAreaShow():this.inputAreaHide()),this._attachEventListeners(),this.trackHistory=r.trackHistory||!0,this._historyLimit=1e7,this._history=[]},i=[{key:"_createWidget",value:function(){var e='\n
\n
\n Title Area\n
\n
\n
\n \n \n
\n
\n ');this._parentElement.innerHTML=e,this._chatWidget=this._parentElement.querySelector(".quikchat-base"),this._titleArea=this._chatWidget.querySelector(".quikchat-title-area"),this._messagesArea=this._chatWidget.querySelector(".quikchat-messages-area"),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(){return e._onSend(e,e._textEntry.value.trim())})),window.addEventListener("resize",(function(){return e._handleContainerResize()})),this._chatWidget.addEventListener("resize",(function(){return e._handleContainerResize()})),this._textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e._onSend(e,e._textEntry.value.trim()))})),this._messagesArea.addEventListener("scroll",(function(){var t=e._messagesArea,i=t.scrollTop,n=t.scrollHeight,s=t.clientHeight;e.userScrolledUp=i+s1&&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(){this._inputArea.classList.toggle("hidden"),"none"===this._inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this._inputArea.style.display="",this._adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this._inputArea.style.display="none",this._adjustMessagesAreaHeight()}},{key:"_adjustMessagesAreaHeight",value:function(){var e=r(this._chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this._chatWidget.offsetHeight;this._messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"_handleContainerResize",value:function(){return this._adjustMessagesAreaHeight(),this._adjustSendButtonWidth(),!0}},{key:"_adjustSendButtonWidth",value:function(){var e=this._sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this._sendButton).fontSize)*e.length+16;return this._sendButton.style.minWidth="".concat(t,"px"),!0}},{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,i=document.createElement("div"),n="quikchat-msgid-"+String(t).padStart(10,"0");String(e.userString).padStart(10,"0"),i.classList.add("quikchat-message",n),this.msgid++,i.classList.add(this._messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var r=document.createElement("div");r.innerHTML=e.userString,r.style="width: 100%; text-align: ".concat(e.align,"; font-size: 1em; font-weight:700;");var a=document.createElement("div");a.style="width: 100%; text-align: ".concat(e.align,";"),a.innerHTML=e.content,i.appendChild(r),i.appendChild(a),this._messagesArea.appendChild(i),this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView(),this._textEntry.value="",this._adjustMessagesAreaHeight();var o=(new Date).toISOString(),u=o;return this.trackHistory&&(this._history.push(s(s({msgid:t},e),{},{timestamp:o,updatedtime:u,messageDiv:i})),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",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"right",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"user";return this.messageAddFull({content:e,userString:t,align:i,role:n})}},{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){console.log("{String(n)} : Message ID not found")}return t&&this._history.splice(this._history.findIndex((function(t){return t.msgid===e})),1),t}},{key:"messageGetDOMObject",value:function(e){var t=null;try{t=this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0")))}catch(e){console.log("{String(n)} : Message ID not found")}return t}},{key:"messageGetContent",value:function(e){var t="";try{t=this._history.filter((function(t){return t.msgid===e}))[0].content}catch(e){console.log("{String(n)} : Message ID not found")}return t}},{key:"messageAppendContent",value:function(e,t){var i=!1;try{this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))).lastChild.innerHTML+=t;var n=this._history.filter((function(t){return t.msgid===e}))[0];n.content+=t,n.updatedtime=(new Date).toISOString(),i=!0,this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView()}catch(t){console.log("".concat(String(e)," : Message ID not found"))}return i}},{key:"messageReplaceContent",value:function(e,t){var i=!1;try{this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))).lastChild.innerHTML=t;var n=this._history.filter((function(t){return t.msgid===e}))[0];n.content=t,n.updatedtime=(new Date).toISOString(),i=!0,this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView()}catch(t){console.log("".concat(String(e)," : Message ID not found"))}return i}},{key:"historyGet",value:function(e,t){return null==e&&(e=0,t=this._history.length),void 0===t&&(t=e<0?t: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=0&&e1&&void 0!==arguments[1]?arguments[1]:void 0,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n="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(150*Math.random())+25),void 0===t&&(t=Math.floor(446*Math.random())),t%=446;" "===n[t]||/[.,:;!?]/.test(n[t]);)t=(t+1)%446;var s=n.substring(t)+n.substring(0,t);"number"!=typeof e&&(e=s.length);for(var r="";e>0;)r+=ee.length)&&(t=e.length);for(var i=0,n=Array(t);i1&&void 0!==arguments[1]?arguments[1]:function(){},n=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 r=s(s({},{theme:"quikchat-theme-light",trackHistory:!0,titleArea:{title:"Chat",show:!1,align:"center"},messagesArea:{alternating:!0},inputArea:{show:!0}}),n);"string"==typeof t&&(t=document.querySelector(t)),this._parentElement=t,this._theme=r.theme,this._onSend=i||function(){},this._createWidget(),r.titleArea&&(this.titleAreaSetContents(r.titleArea.title,r.titleArea.align),!0===r.titleArea.show?this.titleAreaShow():this.titleAreaHide()),r.messagesArea&&this.messagesAreaAlternateColors(r.messagesArea.alternating),r.inputArea&&(!0===r.inputArea.show?this.inputAreaShow():this.inputAreaHide()),this._attachEventListeners(),this.trackHistory=r.trackHistory||!0,this._historyLimit=1e7,this._history=[]},i=[{key:"_createWidget",value:function(){var e='\n
\n
\n Title Area\n
\n
\n
\n \n \n
\n
\n ');this._parentElement.innerHTML=e,this._chatWidget=this._parentElement.querySelector(".quikchat-base"),this._titleArea=this._chatWidget.querySelector(".quikchat-title-area"),this._messagesArea=this._chatWidget.querySelector(".quikchat-messages-area"),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(){return e._onSend(e,e._textEntry.value.trim())})),window.addEventListener("resize",(function(){return e._handleContainerResize()})),this._chatWidget.addEventListener("resize",(function(){return e._handleContainerResize()})),this._textEntry.addEventListener("keydown",(function(t){t.shiftKey&&13===t.keyCode&&(t.preventDefault(),e._onSend(e,e._textEntry.value.trim()))})),this._messagesArea.addEventListener("scroll",(function(){var t=e._messagesArea,i=t.scrollTop,n=t.scrollHeight,s=t.clientHeight;e.userScrolledUp=i+s1&&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(){this._inputArea.classList.toggle("hidden"),"none"===this._inputArea.style.display?this.inputAreaShow():this.inputAreaHide()}},{key:"inputAreaShow",value:function(){this._inputArea.style.display="",this._adjustMessagesAreaHeight()}},{key:"inputAreaHide",value:function(){this._inputArea.style.display="none",this._adjustMessagesAreaHeight()}},{key:"_adjustMessagesAreaHeight",value:function(){var e=r(this._chatWidget.children).filter((function(e){return e.classList.contains("hidden")})).reduce((function(e,t){return e+t.offsetHeight}),0),t=this._chatWidget.offsetHeight;this._messagesArea.style.height="calc(100% - ".concat(t-e,"px)")}},{key:"_handleContainerResize",value:function(){return this._adjustMessagesAreaHeight(),this._adjustSendButtonWidth(),!0}},{key:"_adjustSendButtonWidth",value:function(){var e=this._sendButton.textContent.trim(),t=parseFloat(getComputedStyle(this._sendButton).fontSize)*e.length+16;return this._sendButton.style.minWidth="".concat(t,"px"),!0}},{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,timestamp:!1,updatedtime:!1},t=this.msgid,i=document.createElement("div"),n="quikchat-msgid-"+String(t).padStart(10,"0");String(e.userString).padStart(10,"0"),i.classList.add("quikchat-message",n),this.msgid++,i.classList.add(this._messagesArea.children.length%2==1?"quikchat-message-1":"quikchat-message-2");var r=document.createElement("div");r.innerHTML=e.userString,r.style="width: 100%; text-align: ".concat(e.align,"; font-size: 1em; font-weight:700;");var a=document.createElement("div");a.style="width: 100%; text-align: ".concat(e.align,";"),a.innerHTML=e.content,i.appendChild(r),i.appendChild(a),this._messagesArea.appendChild(i),this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView(),this._textEntry.value="",this._adjustMessagesAreaHeight();var o=e.timestamp?e.timestamp:(new Date).toISOString(),u=e.updatedtime?e.updatedtime:o;return this.trackHistory&&(this._history.push(s(s({msgid:t},e),{},{timestamp:o,updatedtime:u,messageDiv:i})),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",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"right",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"user";return this.messageAddFull({content:e,userString:t,align:i,role:n})}},{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){console.log("{String(n)} : Message ID not found")}return t&&this._history.splice(this._history.findIndex((function(t){return t.msgid===e})),1),t}},{key:"messageGetDOMObject",value:function(e){var t=null;try{t=this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0")))}catch(e){console.log("{String(n)} : Message ID not found")}return t}},{key:"messageGetContent",value:function(e){var t="";try{t=this._history.filter((function(t){return t.msgid===e}))[0].content}catch(e){console.log("{String(n)} : Message ID not found")}return t}},{key:"messageAppendContent",value:function(e,t){var i=!1;try{this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))).lastChild.innerHTML+=t;var n=this._history.filter((function(t){return t.msgid===e}))[0];n.content+=t,n.updatedtime=(new Date).toISOString(),i=!0,this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView()}catch(t){console.log("".concat(String(e)," : Message ID not found"))}return i}},{key:"messageReplaceContent",value:function(e,t){var i=!1;try{this._messagesArea.querySelector(".quikchat-msgid-".concat(String(e).padStart(10,"0"))).lastChild.innerHTML=t;var n=this._history.filter((function(t){return t.msgid===e}))[0];n.content=t,n.updatedtime=(new Date).toISOString(),i=!0,this.userScrolledUp||this._messagesArea.lastElementChild.scrollIntoView()}catch(t){console.log("".concat(String(e)," : Message ID not found"))}return i}},{key:"historyGet",value:function(e,t){return null==e&&(e=0,t=this._history.length),void 0===t&&(t=e<0?t:e+1),this._history.slice(e,t)}},{key:"historyGetAllCopy",value:function(){return this._history.slice()}},{key:"historyClear",value:function(){this.msgid=0,this._messagesArea.innerHTML="",this._history=[]}},{key:"historyGetLength",value:function(){return this._history.length}},{key:"historyGetMessage",value:function(e){return e>=0&&e=0&&e1&&void 0!==arguments[1]?arguments[1]:void 0,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n="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(150*Math.random())+25),void 0===t&&(t=Math.floor(446*Math.random())),t%=446;" "===n[t]||/[.,:;!?]/.test(n[t]);)t=(t+1)%446;var s=n.substring(t)+n.substring(0,t);"number"!=typeof e&&(e=s.length);for(var r="";e>0;)r+=e { + this.messageAddFull(message); + }); + } /** * * @param {string} newTheme @@ -397,7 +417,7 @@ class quikchat { * @returns {object} - Returns the version and license information for the library. */ static version() { - return { "version": "1.1.6", "license": "BSD-2", "url": "https://github/deftio/quikchat" }; + return { "version": "1.1.7", "license": "BSD-2", "url": "https://github/deftio/quikchat" }; } /**