moved call back to 2nd param of constructor (breaking change with 1.0…

….x), updated all examples.

dev/debug.html

@@ -5,10 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>QuikChatJS</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-        rel="stylesheet">
     <link
         href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90' style='fill:blue'>&#x1F4AC;</text></svg>"
         rel="icon" />
@@ -54,24 +50,26 @@ <h2>Component Styles and Resize Checks</h2>
     <button class="system-btn" onclick="chatBox.titleAreaToggle()">Toggle Title</button>
     <button class="system-btn" onclick="chatBox.inputAreaToggle()">Toggle Input</button>
     <button class="system-btn" id="themeBtn">Change Themes</button>
-    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Toggle Alternating Colors</button>"
+    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Toggle Alternating Colors</button>
     <script type="module">
         import quikchat from '../src/quikchat.js';
         document.addEventListener('DOMContentLoaded', () => {
             const parentDiv = document.querySelector('.parent');
-            window.chatBox = new quikchat(parentDiv, {
-                theme: 'quikchat-theme-light',
-                titleArea: { title: 'QuikChatJS', align: 'left', show: true },
-                onSend: (chat, userContent) => {
+            window.chatBox = new quikchat(parentDiv,
+                (chat, userContent) => {
                     chat.messageAddNew(userContent, 'me', 'right'); // echo the message to the chat area
 
                     // do something with the message
                     // bw (bitwrench) is a utility library that is included in the demo but not related to quikchatjs
                     // this just creates a random number of messages from the bot
                     let x = chat.messageAddNew(bw.loremIpsum(bw.random(10, 50), bw.random(33, 100)), 'bot', 'left');
 
+                },
+                {
+                    theme: 'quikchat-theme-light',
+                    titleArea: { title: 'QuikChatJS', align: 'left', show: true },      
                 }
-            });
+            );
             chatBox.messageAddNew('Hello, how are you?', 'bot', 'left');
             chatBox.messageAddNew('I am fine, thank you.', 'user', 'right');
             chatBox.messageAddNew('How can I help you today?', 'bot', 'left');

examples/example_esm.html

@@ -57,24 +57,25 @@ <h2>Quikchatjs Simple Example (ESM)</h2>
         import quikchat from '../dist/quikchat.esm.min.js';
         document.addEventListener('DOMContentLoaded', () => {
             const parentDiv = document.querySelector('.parent');
-            window.chatBox = new quikchat(parentDiv, {
-                theme: 'quikchat-theme-light',
-                titleArea: { title: 'QuikChatJS', align: 'left', show: true },
-                onSend: (chat, msg) => {
-
-                    chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
+            window.chatBox = new quikchat(parentDiv, 
+            (chat, msg) => {
+                chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
 
-                    // do something with the message
-                    // bw (bitwrench) is a utility library that is included in the demo but not related to quikchatjs
-                    // this just creates a random number of messages from the bot
-                    chat.messageAddNew(bw.loremIpsum(bw.random(25, 50), bw.random(0, 100)), 'bot', 'left');
+                // do something with the message
+                // bw (bitwrench) is a utility library that is included in the demo but not related to quikchatjs
+                // this just creates a random number of messages from the bot
+                chat.messageAddNew(bw.loremIpsum(bw.random(25, 50), bw.random(0, 100)), 'bot', 'left');
 
-                }
+            },
+            { // options
+                theme: 'quikchat-theme-light',
+                titleArea: { title: 'QuikChatJS', align: 'left', show: true },
             });
             chatBox.messageAddNew('Hello, how are you?', 'bot', 'left');
             chatBox.messageAddNew('I am fine, thank you.', 'user', 'right');
             chatBox.messageAddNew('How can I help you today?', 'bot', 'left');
             chatBox.changeTheme("quikchat-theme-light");
+            console.log(quikchat.version().version);
 
         });
 

examples/example_umd.html

@@ -57,21 +57,20 @@ <h2>Quikchatjs Simple Example (UMD)</h2>
     <script >
         document.addEventListener('DOMContentLoaded', () => {
             const parentDiv = document.querySelector('.parent');
-            window.chatBox = new quikchat(parentDiv, {
+            window.chatBox = new quikchat(parentDiv, 
+            (chat, msg) => {
+                chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
+                // now do something with the message
+
+                // this is just a simple example of a bot response
+                // bw (bitwrench) is a utility library that is included in the demo but not related to quikchatjs
+                // this just creates a random message from the bot
+                const botmsg = bw.loremIpsum(bw.random(25, 50), bw.random(0, 100))
+                chat.messageAddNew(botmsg, 'bot', 'left');
+            },
+            {
                 theme: 'quikchat-theme-light',
                 titleArea: { title: 'QuikChatJS', align: 'left', show: true },
-                onSend: (chat, msg) => {
-
-                    chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
-
-                    // now do something with the message
-
-                    // this is just a simple example of a bot response
-                    // bw (bitwrench) is a utility library that is included in the demo but not related to quikchatjs
-                    // this just creates a random message from the bot
-                    const botmsg = bw.loremIpsum(bw.random(25, 50), bw.random(0, 100))
-                    chat.messageAddNew(botmsg, 'bot', 'left');
-                }
             });
             chatBox.messageAddNew('Hello, how are you?', 'bot', 'left');
             chatBox.messageAddNew('I am fine, thank you.', 'user', 'right');

examples/lmstudio_with_memory.html

@@ -42,17 +42,17 @@ <h2 class="">LMStudio API quikchat Demo with Conversational Memory</h2>
     <script>
 
         // set up chat instance
-        const streamingChat = new quikchat('#chat-container', {
+        const streamingChat = new quikchat('#chat-container',localLLMStreamingCallback,
+        {
             theme: 'quikchat-theme-light',
-            onSend: getLocalLLMStreamingCallback,
-            titleArea: { title: "Memory Chat", "show": true, "align": "left" },
+            titleArea: { title: "Memory Chat", "show": true, "align": "left" }
         });
         streamingChat.messageAddNew("How can I help? ", "bot", "left", "system");
 
         // this calls the Ollama Streaming API with token streaming.
         // note that a very similar function can be used to call OpenAI, Mistral, or, Claude etc.
         // this is a pure js implementation that hits the API directly and doesn't use any libraries.
-        function getLocalLLMStreamingCallback(chatInstance, userInput) {
+        function localLLMStreamingCallback(chatInstance, userInput) {
             let startPrompt = {
                 "content":
                 `You are a skilled assistant.  Respond to user input with detailed 

examples/ollama_with_memory.html

@@ -31,7 +31,7 @@
     <div class="container">
         <div class="col-10">
             <br>
-            <h2 class="">Ollama quikchat Demo with Conversational Memory</h2>
+            <h2 class="">Ollama + Quikchat Demo with Conversational Memory</h2>
             <p>This example demonstrates how to use quikchat with a local LLM using Ollama where quikchat provides the
                 chat history to Ollama provides the llm model. This allows the chat to "remember" what is being
                 discussed. <br>This example assumes <a href='https://ollama.com/'>ollama</a> is installed and running on port 11434 locally.  Also it assume the llama3.1 model is available.  This example will not work on the github pages demo website you must run this locally.</p>
@@ -42,17 +42,17 @@ <h2 class="">Ollama quikchat Demo with Conversational Memory</h2>
     <script>
 
         // set up chat instance
-        const streamingChat = new quikchat('#chat-container', {
+        const streamingChat = new quikchat('#chat-container',
+            ollamaStreamingCallback, {
             theme: 'quikchat-theme-light',
-            onSend: getOllamaStreamingCallback,
-            titleArea: { title: "Memory Chat", "show": true, "align": "left" },
+            titleArea: { title: "Memory Chat", "show": true, "align": "left" }
         });
         streamingChat.messageAddNew("How can I help? ", "bot", "left", "system");
 
         // this calls the Ollama Streaming API with token streaming.
         // note that a very similar function can be used to call OpenAI, Mistral, or, Claude etc.
         // this is a pure js implementation that hits the API directly and doesn't use any libraries.
-        function getOllamaStreamingCallback(chatInstance, userInput) {
+        function ollamaStreamingCallback(chatInstance, userInput) {
             let startPrompt = {
                 "content":
                 `You are a skilled assistant.  Respond to user input with detailed 
@@ -82,7 +82,7 @@ <h2 class="">Ollama quikchat Demo with Conversational Memory</h2>
                 return reader.read().then(function processResult(result) {
                     if (result.done) { return; }
                     let x = new TextDecoder().decode(result.value, { stream: true });
-                    let y = JSON.parse(x); // deocde the JSON
+                    let y = JSON.parse(x.trim()); // deocde the JSON
                     let content = y.message.content;//.message.content;
                     if (start) {
                         id = chatInstance.messageAddNew(content, "bot", "left"); // start a new chat message

examples/openai.html

@@ -174,11 +174,14 @@ <h3>Chat</h3>
             }
         };
 
-        let chatInstance = new quikchat('#chatBox', {
-            theme: 'quikchat-theme-light',
-            onSend: handleAIRequest,
-            titleArea: { title: "Chat Area", "show": false, "align": "left" },
-        });
+        let chatInstance = new quikchat('#chatBox', 
+            handleAIRequest
+            // optional styling below
+            //,{
+            //    theme: 'quikchat-theme-light',
+            //    titleArea: { title: "Chat Area", "show": false, "align": "left" },
+            //}
+            );
 
         // set remember the api key to a local cookie 
         document.getElementById('settingsForm').addEventListener('submit', function (e) {

examples/simple_ollama.html

@@ -53,17 +53,17 @@ <h2 class="">Ollama QuikChat Demo</h2>
     </div>
     <script>
         const completionsChat = new quikchat('#chat-container1',
+            getOllamaCompletionCallback,
             {
                 theme: 'quikchat-theme-light',
-                onSend: getOllamaCompletionCallback,
                 titleArea: { title: "Completions Chat", "show": true, "align": "left" },
             });
         completionsChat.messageAddNew("How can I help? ", "bot", "left");
 
         const streamingChat = new quikchat('#chat-container2',
+            getOllamaStreamingCallback,
             {
                 theme: 'quikchat-theme-light',
-                onSend: getOllamaStreamingCallback,
                 titleArea: { title: "Streaming Chat", "show": true, "align": "left" },
             });
         streamingChat.messageAddNew("How can I help? ", "bot", "left"); 

src/quikchat.js

@@ -5,11 +5,10 @@ class quikchat {
      * @param string or DOM element  parentElement 
      * @param {*} meta 
      */
-    constructor(parentElement, options = {}) 
+    constructor(parentElement, onSend =  ()=>{} , options = {}) 
     {
         const defaultOpts = {
             theme: 'quikchat-theme-light',
-            onSend: () => { },
             trackHistory: true,
             titleArea: { title: "Chat", show: false, align: "center" },
             messagesArea: { alternating : true },
@@ -19,10 +18,10 @@ class quikchat {
         if (typeof parentElement === 'string') {
             parentElement = document.querySelector(parentElement);
         }
-        console.log(parentElement, meta);
+        //console.log(parentElement, meta);
         this._parentElement = parentElement;
         this._theme = meta.theme;
-        this._onSend = meta.onSend ? meta.onSend : () => { };
+        this._onSend = onSend ? onSend : () => { }; // call back function for onSend
         this._createWidget();
         // title area
         if (meta.titleArea) {