dmitrizzle / chat-bubble

Simple chatbot UI for the Web with JSON scripting πŸ‘‹πŸ€–πŸ€™
MIT License
579 stars 171 forks source link

Submitting value to sqlite #59

Closed wakamd closed 6 years ago

wakamd commented 6 years ago

Feature request. Hi I loved the chat-bubble bot! My limitation is that am new to python, js, and learning on the fly. I would like to use it for a demo, but am stuck at one area. Am using web2py framework and would like that when a user types a question, the same is saved in db for processing. My humble request is that, how do i append to an sqlite db? For example, even as a user selects or types banana or ice cream, that same is inserted to the db. Kind regards

dmitrizzle commented 6 years ago

Hey @wakamd,

You will need to create an JSON API endpoint for the bot on your back-end. I'm assuming you are attempting to track user's keyboard input.

First, you want the bot to send the user input to an endpoint (PUT). To do this you can follow the keyboard input example and utilize the inputCallbackFn(object) parameter. When you build this function the object parameter contains a key called input which is the text that the user has entered via they keyboard:

var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
  inputCallbackFn: function(object) {
    sendFunction(object.input, function(){
      // this is the callback function that you can return once you've sent the text to your server
    })
  }
})

The callback function mentioned above can direct the chat bot to resume conversation from any endpoint in the conversation JSON (example) - or you can even create a new conversation object that your server generates.

If you just want to use the button method (where user selects an answer) check out the tutorial on how to run functions. You will need to use the same asynchronous method by creating a function with a callback parameter that runs a script once your server has responded.

To connect to server (i.e. your sendFunction) you could use a library like Axios, or native Fetch if the browser is new and supports it, or you can write your own XHR helper.

Hope this helps, let me know if you'd like me to clarify anything further.

wakamd commented 6 years ago

Thank so much. Let me follow each line you've written. I'll ask when/if I'll be in need. God bless!

On Tue, 10 Jul 2018, 18:25 dmitrizzle notifications@github.com wrote:

Hey @wakamd https://github.com/wakamd,

You will need to create an JSON API endpoint for the bot on your back-end. I'm assuming you are attempting to track user's keyboard input.

First, you want the bot to send the user input to an endpoint (PUT). To do this you can follow the keyboard input example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/3-keyboard-input.html and utilize the inputCallbackFn(object) parameter. When you build this function the object parameter contains a key called input which is the text that the user has entered via they keyboard:

var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", { inputCallbackFn: function(object) { sendFunction(object.input, function(){ // this is the callback function that you can return once you've sent the text to your server }) } })

The callback function mentioned above can direct the chat bot to resume conversation from any endpoint in the conversation JSON (example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/2-custom-starting-point.html)

  • or you can even create a new conversation object that your server generates.

If you just want to use the button method (where user selects an answer) check out the tutorial https://github.com/dmitrizzle/chat-bubble/blob/master/examples/4-run-scripts.html on how to run functions. You will need to use the same asynchronous method by creating a function with a callback parameter that runs a script once your server has responded.

To connect to server (i.e. your sendFunction) you could use a library like Axios, or native Fetch if the browser is new and supports it, or you can write your own XHR helper.

Hope this helps, let me know if you'd like me to clarify anything further.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-403863620, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeOVF4rZojJkAQ-UqStzQzKByUY1Aks5uFMdvgaJpZM4VHVBD .

wakamd commented 6 years ago

Addendum : Am working on a bot the will allow the user to input data, and the response will be based on the data sent to sqlite database. This data will be processed by several machine learning functions and a response sent back to the html view. I hope this gives you an idea of how I want that.

On Tue, 10 Jul 2018, 23:07 Maurice Waka mauricewaka@gmail.com wrote:

Thank so much. Let me follow each line you've written. I'll ask when/if I'll be in need. God bless!

On Tue, 10 Jul 2018, 18:25 dmitrizzle notifications@github.com wrote:

Hey @wakamd https://github.com/wakamd,

You will need to create an JSON API endpoint for the bot on your back-end. I'm assuming you are attempting to track user's keyboard input.

First, you want the bot to send the user input to an endpoint (PUT). To do this you can follow the keyboard input example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/3-keyboard-input.html and utilize the inputCallbackFn(object) parameter. When you build this function the object parameter contains a key called input which is the text that the user has entered via they keyboard:

var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", { inputCallbackFn: function(object) { sendFunction(object.input, function(){ // this is the callback function that you can return once you've sent the text to your server }) } })

The callback function mentioned above can direct the chat bot to resume conversation from any endpoint in the conversation JSON (example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/2-custom-starting-point.html)

  • or you can even create a new conversation object that your server generates.

If you just want to use the button method (where user selects an answer) check out the tutorial https://github.com/dmitrizzle/chat-bubble/blob/master/examples/4-run-scripts.html on how to run functions. You will need to use the same asynchronous method by creating a function with a callback parameter that runs a script once your server has responded.

To connect to server (i.e. your sendFunction) you could use a library like Axios, or native Fetch if the browser is new and supports it, or you can write your own XHR helper.

Hope this helps, let me know if you'd like me to clarify anything further.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-403863620, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeOVF4rZojJkAQ-UqStzQzKByUY1Aks5uFMdvgaJpZM4VHVBD .

dmitrizzle commented 6 years ago

Youp, chat-bubble can do that. It’s built specially for that reason, actually :)

wakamd commented 6 years ago

Hi. Actually am stuck. Am very new to js programming, just starting to learn it

  1. I had initially tried something like this below which connects to the database even though i cant figure out how to get to a folder database. With XHR or Axios, like the example below, how do I connect to sqlite and post?: var output = document.getElementById('output'); document.getElementById('post').onclick = function () {

var data = document.getElementById('data').value; axios.post('/post/server', JSON.parse(data)) .then(function (res) { output.className = 'container'; output.innerHTML = res.data; }) .catch(function (err) { output.className = 'container text-danger'; output.innerHTML = err.message; }); I looked at your examples you gave but couldn't figure out how I get to post to my sqlite database.

  1. I wanted to use the 3-keyboard-input.html http://3-keyboard-input.html. So the user sends random queries which are send to the database. I also want to store the messages/questions for analysis ML training, the reason for the database. So when the user message is stored, it can/is retrieved through a python function the interprets using NLP and returns a reply. In the keyboard-input example, at the place where it says: "Sorry, I don't get it πŸ˜•. Pls repeat? Or you can just click below πŸ‘‡", I had inserted the function that retrieves the message from the database or function and it worked well. It was exciting to see that.
  2. I only want to code on how to send the question to sqlite, and have real-time reply on keyboard input. I had tried other methods(chats) but there is a delay in posting the user message to the db, so the reply/response that comes is not a real time reply to the current message but to the previous one.

var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, useremail TEXT)";

var selectAllStatement = "SELECT * FROM Contacts";

var insertStatement = "INSERT INTO Contacts (username, useremail) VALUES (?, ?)";

var updateStatement = "UPDATE Contacts SET username = ?, useremail = ? WHERE id=?";

var deleteStatement = "DELETE FROM Contacts WHERE id=?";

var dropStatement = "DROP TABLE Contacts";

var db = openDatabase("MyAddressBook", "1.0", "Address Book", 200000); // Open SQLite Database

var dataset;

var DataType;

function initDatabase() // Function Call When Page is ready.

{

try {

    if (!window.openDatabase)  // Check browser is supported SQLite or

not.

    {

        alert('Databases are not supported in this browser.');

    }

    else {

        createTable();  // If supported then call Function for create

table in SQLite

    }

}

catch (e) {

    if (e == 2) {

        // Version number mismatch.

        console.log("Invalid database version.");

    } else {

        console.log("Unknown error " + e + ".");

    }

    return;

}

}

function createTable() // Function for Create Table in SQLite.

{

db.transaction(function (tx) { tx.executeSql(createStatement, [],

showRecords, onError); });

}

function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..

{

    var usernametemp = $('input:text[id=username]').val();

    var useremailtemp = $('input:text[id=useremail]').val();
    db.transaction(function (tx) { tx.executeSql(insertStatement,

[usernametemp, useremailtemp], loadAndReset, onError); });

    //tx.executeSql(SQL Query Statement,[ Parameters ] , Sucess Result

Handler Function, Error Result Handler Function );

}

On Wed, Jul 11, 2018 at 12:22 PM dmitrizzle notifications@github.com wrote:

Youp, chat-bubble can do that. It’s built specially for that reason, actually :)

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-404103924, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeI9zb7VrAQVAQJLd_6MwikZL_GKCks5uFcPsgaJpZM4VHVBD .

wakamd commented 6 years ago

Am making some progress..but even as we discuss this,is it safe. I bumped into this https://www.quora.com/How-do-I-use-SQL-js-for-accessing-a-SQLite-database-through-a-webpage

On Wed, Jul 11, 2018 at 12:22 PM dmitrizzle notifications@github.com wrote:

Youp, chat-bubble can do that. It’s built specially for that reason, actually :)

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-404103924, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeI9zb7VrAQVAQJLd_6MwikZL_GKCks5uFcPsgaJpZM4VHVBD .

wakamd commented 6 years ago

More.. I did this using XHR helper but I still cant post to my db. // install user input textfield this.typeInput = function(callbackFn) { var inputWrap = document.createElement("div") inputWrap.className = "input-wrap" var inputText = document.createElement("textarea") inputText.setAttribute("placeholder", "Ask me anything...") var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/storage.sqlite', true); xhr.responseType = 'text'; inputWrap.appendChild(inputText) inputText.addEventListener("keypress", function(e) { // register user input xhr.onload = function(e) { var uInt8Array = new Uint8Array(this.response); var db = new SQL.Database(uInt8Array); var contents = db.exec("INSERT INTO message (name) VALUES ('inputText');"); }; xhr.send(); if (e.keyCode == 13) { e.preventDefault() typeof bubbleQueue !== false ? clearTimeout(bubbleQueue) : false // allow user to interrupt the bot var lastBubble = document.querySelectorAll(".bubble.say") lastBubble = lastBubble[lastBubble.length - 1] lastBubble.classList.contains("reply") && !lastBubble.classList.contains("reply-freeform") ? lastBubble.classList.add("bubble-hidden") : false addBubble( '' + this.value + "", function() {}, "reply reply-freeform" ) // callback typeof callbackFn === "function" ? callbackFn({ input: this.value, convo: _convo, standingAnswer: standingAnswer }) : false this.value = "" }

The html part on server response:

var miss = function() { chatWindow.talk( { "i-dont-get-it": { says: [ "{{=reports}}" ], reply: o.convo[o.standingAnswer].reply } }, "i-dont-get-it" ) }

where {{=reports}} is the text that is returned from the function/databse depending on how i want it.

On Tue, Jul 10, 2018 at 6:25 PM dmitrizzle notifications@github.com wrote:

Hey @wakamd https://github.com/wakamd,

You will need to create an JSON API endpoint for the bot on your back-end. I'm assuming you are attempting to track user's keyboard input.

First, you want the bot to send the user input to an endpoint (PUT). To do this you can follow the keyboard input example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/3-keyboard-input.html and utilize the inputCallbackFn(object) parameter. When you build this function the object parameter contains a key called input which is the text that the user has entered via they keyboard:

var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", { inputCallbackFn: function(object) { sendFunction(object.input, function(){ // this is the callback function that you can return once you've sent the text to your server }) } })

The callback function mentioned above can direct the chat bot to resume conversation from any endpoint in the conversation JSON (example https://github.com/dmitrizzle/chat-bubble/blob/master/examples/2-custom-starting-point.html)

  • or you can even create a new conversation object that your server generates.

If you just want to use the button method (where user selects an answer) check out the tutorial https://github.com/dmitrizzle/chat-bubble/blob/master/examples/4-run-scripts.html on how to run functions. You will need to use the same asynchronous method by creating a function with a callback parameter that runs a script once your server has responded.

To connect to server (i.e. your sendFunction) you could use a library like Axios, or native Fetch if the browser is new and supports it, or you can write your own XHR helper.

Hope this helps, let me know if you'd like me to clarify anything further.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-403863620, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeOVF4rZojJkAQ-UqStzQzKByUY1Aks5uFMdvgaJpZM4VHVBD .

dmitrizzle commented 6 years ago

Hey I’m currently traveling; will get bac once I settle πŸ‘

wakamd commented 6 years ago

πŸ‘

On Fri, 13 Jul 2018, 02:12 dmitrizzle notifications@github.com wrote:

Hey I’m currently traveling; will get bac once I settle πŸ‘

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-404678925, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeH0Er-d3h5d7Jg9r9pEnQRifQ6UEks5uF9fzgaJpZM4VHVBD .

dmitrizzle commented 6 years ago

You need to create a JSON API interface for your database. It should have a set of predefined, limited requests that it can process and return a JSON object. It should also be on the same IP or domain name or have CORS enabled. The delay in reply is expected but you may need to display the typing bubble in the chat-bot to simulate an experience of a user typing an answer in a real-world application. to do that, just call chatWindow.think() (assuming that you've initiated the bot as var chatWindow = new Bubbles(...)

wakamd commented 6 years ago

Thank you. Good day.

On Thu, Jul 19, 2018 at 7:58 PM dmitrizzle notifications@github.com wrote:

You need to create a JSON API interface for your database. It should have a set of predefined, limited requests that it can process and return a JSON object. It should also be on the same IP or domain name or have CORS enabled. The delay in reply is expected but you may need to display the typing bubble in the chat-bot to simulate an experience of a user typing an answer in a real-world application. to do that, just call chatWindow.think() (assuming that you've initiated the bot as var chatWindow = new Bubbles(...)

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-406345767, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBePR9wgE4FhIZAvh72dcNtJHZKz6Bks5uILq-gaJpZM4VHVBD .

wakamd commented 6 years ago

Hi dmitrizzle, I did some API integration but I also worked on a button based interface and tried the following: html:

javascript: var btn = document.createElement("button"); btn.setAttribute("type", "submit"); inputWrap.appendChild(btn); btn.addEventListener("click", function(e) { e.preventDefault(); typeof bubbleQueue !== false ? clearTimeout(bubbleQueue) : false; }

Every time I try with the button code I get a blank screen and the bubbles do not apear. Please assist in this area. Kind regards

On Thu, Jul 19, 2018 at 7:58 PM dmitrizzle notifications@github.com wrote:

You need to create a JSON API interface for your database. It should have a set of predefined, limited requests that it can process and return a JSON object. It should also be on the same IP or domain name or have CORS enabled. The delay in reply is expected but you may need to display the typing bubble in the chat-bot to simulate an experience of a user typing an answer in a real-world application. to do that, just call chatWindow.think() (assuming that you've initiated the bot as var chatWindow = new Bubbles(...)

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-406345767, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBePR9wgE4FhIZAvh72dcNtJHZKz6Bks5uILq-gaJpZM4VHVBD .

dmitrizzle commented 6 years ago

Perhaps you can share a jsFiddle or show your code in a place where I could run and see it. First thing I would suggest is to look into your console and see if there any errors.

wakamd commented 6 years ago

code for keyboard and Bubble.js: <!DOCTYPE html>

Wellness chat-bubble

N/B Am still very new in javascript Kind regards

On Sun, Aug 5, 2018 at 9:07 PM dmitrizzle notifications@github.com wrote:

Perhaps you can share a jsFiddle or show your code in a place where I could run and see it. First thing I would suggest is to look into your console and see if there any errors.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-410537406, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeFfmecmojBT4YPkVzKJzA9zmDEk-ks5uNzR2gaJpZM4VHVBD .

dmitrizzle commented 6 years ago

Can you give me a link to a working file online with this code? I don't mind helping you along but I can't spend too much time setting things up on my end.

wakamd commented 6 years ago

I have it working on localhost, with web2py framework. Am not sure if you can do with web2py.

On Sun, 5 Aug 2018, 21:45 dmitrizzle notifications@github.com wrote:

Can you give me a link to a working file online with this code? I don't mind helping you along but I can't spend too much time setting things up on my end.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-410539564, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeON_3yo_dkwm73zmXFk79bb7XWNkks5uNz1OgaJpZM4VHVBD .

wakamd commented 6 years ago

Sorry , I hope I understand that you need this. See attached.

On Sun, Aug 5, 2018 at 9:45 PM dmitrizzle notifications@github.com wrote:

Can you give me a link to a working file online with this code? I don't mind helping you along but I can't spend too much time setting things up on my end.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-410539564, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeON_3yo_dkwm73zmXFk79bb7XWNkks5uNz1OgaJpZM4VHVBD .

dmitrizzle commented 6 years ago

I need a way to run this code and see any errors that JS has to spits out, which is very difficult with what you're giving me. I suggest you start by opening browser console and checking any error messages you're having first. That's exactly what I would do with your code, if I could run it.

wakamd commented 6 years ago

I've forwarded it from my google drive. I hope you got it. Regards

On Sun, Aug 5, 2018 at 11:02 PM dmitrizzle notifications@github.com wrote:

I need a way to run this code and see any errors that JS has to spits out, which is very difficult with what you're giving me. I suggest you start by opening browser console and checking any error messages you're having first. That's exactly what I would do with your code, if I could run it.

β€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmitrizzle/chat-bubble/issues/59#issuecomment-410544163, or mute the thread https://github.com/notifications/unsubscribe-auth/AQfBeFYevFBKyt3Q0HYOMe76KjT7n5enks5uN09cgaJpZM4VHVBD .

dmitrizzle commented 6 years ago

Hey @wakamd FYI this conversation is not private, your login details could be seen by anyone. I suggest you change them. Also, they didn't work for me as the service requires email address rather than user name.

Let's move this conversation to email instead. Please send your reply to d at analog dot cafe.