eduardotkoller / convform Goto Github PK

Hi!
First of all, great plugin, really easy to implement;
My only issue, is it possible to rollback to a previous dialog without reloading the entire chatbot?
Like, recall the last select before the fork.

Thx!
Lucas.

Can you please add licence.

<input data-conv-question="Type in your e-mail" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeHolder="What's your e-mail?">

Google Bing `
But still the placeholder for Email and password is "type Here"

Hello,
Thanks for your library its great.
I wont to use your library to working with a chatBot.
It is possible to add dynamically questions into convForm in JS ?

Thanks for the answer.

Hi,

I have long list of values to show in select drop down which breaks the UI with current implementation. Could you please tell me how to use the normal drop down itself instead of convForm UI

Hi, I'm having some trouble working with nested conv-fork.

Here's my example, assuming I chose false in the next select:

<select name="accompanied" conv-question="¿Tienes pensado pedir la hipoteca solo o acompañado? ">
    <option value="false">Solo</option>
    <option value="true">Acompañado</option>
</select>
<div conv-fork="accompanied">
    <div conv-case="false" class="alone">
        ...
    </div>
    <div conv-case="true" class="alone">
        ...
    </div>
</div>

Then after that, I have the next code:

<select name="selectedProperty" conv-question="¿La casa ha sido elegida? ">
    <option value="true">Sí</option>
    <option value="false">No</option>
</select>
<!-- selected Properties -->
<div conv-fork="selectedProperty">
    <div conv-case="false">
        <div conv-fork="accompanied">
            <div conv-case="false">
                <!-- purchaseAmount -->
                <input type="number" pattern="^(0|[1-9][0-9]*)$" name="purchaseAmount"  conv-question=" true false">
            </div>
            <div conv-case="true">
                <!-- purchaseAmount -->
                <input type="number" pattern="^(0|[1-9][0-9]*)$" name="purchaseAmount"  conv-question=" true true">
            </div>
        </div>
    </div>
    <div conv-case="true">
        <div conv-fork="accompanied">
            <div conv-case="false">
                <!-- purchaseAmount -->
                <input type="number" pattern="^(0|[1-9][0-9]*)$" name="purchaseAmount"  conv-question=" false false">
            </div>
            <div conv-case="true">
                <!-- purchaseAmount -->
                <input type="number" pattern="^(0|[1-9][0-9]*)$" name="purchaseAmount"  conv-question=" false true">
            </div>
        </div>
    </div>
</div>

The thing is, at the conv-fork of "selectedProperty", it prints both conv-case divs (and only one of the inner "accompanied" forks).

I have named the questions so I know wich child is being printed in order to debug.

When you select "true" at the "selectedProperty" field, the conv-question is: true false. After you input some value, it asks again: false false, and I think it shouldn't.

Am I doing something wrong? Is it a bug?

Thanks !

I have a chatbot using ConvForm and i have a question to add address from the user. When user enter text can we auto suggest data using google API?

Hello @eduardotkoller ,

As it's possible to use the input to filter the "select options", do you think it could be possible to hide them if the select contains more than 10 options ?

BR,
Fas3r

Let's say after every question is answerred I want to display one more message and submit the form after. Or even better, submit it in the background and leave the user with a message?

Hi.

Is it possible to handle an input text value so that it can be sent to something like an api.ai backend?
if yes, can you post a sample code.

I have tried different way to take the input and pass it to a callback function, but have not been able to do, leave alone sending it to another backend

Hi Eduardo, the project its looking good, congrats
I was wondering is it's possible to do this things:

1. is it possible to make the conversation persistent between the different pages, similar to something like drift pop up? for example if I go from home to the about page
2. is it possible to submit using ajax, so for example the server can respond: "thanks, appointment is on Monday 10am", and the user sees the message in the chat
3. does it accept file inputs?

Once again, thanks for your work
Appreciate any help

Commit 23275cf seems to eat the chatbox if the user filters a select box. On the demo page, if you just type in 'Y' 'E' and then alternate between 'S' and backspace, the message box disappears until it is just the buttons.

Hello @eduardotkoller ,

I did extensive changes to your plugins, such as :

• including google map;
• handle 'hidden' input field;
• handle repetitive steps;
• new validation method including remote (AJAX);
• ...

Would you be interested by such changes ?

Br,
fas3r

Hello,

is it possible to repeat a question ? or to come back to a question ? A scenario like this :

Q1 -- bot -- how much do you pay ?
-- answer user -- 400
Q2 -- bot -- Do you want to add more expense ? ( select yes - no )
-- answer user -- yes
-- answer user -- 200
Q2 -- bot -- Do you want to add more expense ? ( select yes - no )
-- answer user -- yes
-- answer user -- 600
Q2 -- bot -- Do you want to add more expense ? ( select yes - no )
-- answer user -- no
Q3 -- bot -- next question ...

The Question 2 can be repeated indefinitely ;

Thanks

Hello,

do you plan to keep this repo active or we should not expect support ?

br,
fas3r.

Hello,

I am able to dynamically create an Input Field when asking the initial question. But when I try to get the User's reply, Process it in the back-end server and Send a reply to the front-end, I am unable to create a New Input Field as a Reply.

<form id="form" onsubmit="form(); return false;" method="POST" class="hidden">
  <!-- Form Fields will be created dynamically here -->
</form>

    <script>
        $('#form').append('<input type="text" id="question" name="question" conv-question="What is your name?">');
        function form() {
            var form = document.getElementById('form');
            var question = form.elements.question.value;
                $.post("/answer",
                    {
                        question: question
                    },
                    function(data){
                      $("<input type='text' />")
                         .attr("id", "answer")
                         .attr("name", "answer")
                         .attr("conv-question", data)
                         .appendTo("#form");
                });
        }
    </script>

Hi Eduardotkoller,

I came across another issue, It seems like a bug. I thought to bring it to your notice.

In case of options, if a user starts typing, it adds a class error so the text can not be submitted. Then the user presses the one option (Without removing the text entered earlier). Option value gets submitted, but the class error still remains as the text entered is still there, and even if the user deletes the text entered, error class still remains and thus the form does not get submitted.

I hope I am able to explain it properly (Screenshot attached).

Thanks again for this great plugin.
Rahul

Hi, thanks for making this cool plugin
i have a question, suppose we are in middle of the conversation and we need to jump back to a certain question and resume the whole conversation from there, how can i build all the states from that point? i kinda want ability to jump to previous questions and start conversation from that point instead of starting from the very first question in the initial form. i tried something like this:
[suppose when user click Dashboard button in one of the answers (value = main) so in print answers i change the next state to this dashboard state ]

//get the index at which that question is present
var check = inputs.map(function(element) {
return element.name;
}).indexOf('main');

//build the first quesiton
var dashboard = new SingleConvState(inputs[check]);

//build its states ( but this is not working)
for(var i in inputs) {
// jumping to that index where dashboard question is present
i = check;
console.log("i is: "+i);
if(i != 0 && inputs.hasOwnProperty(i)){
dashboard.next = new SingleConvState(inputs[i]);
dashboard = dashboard.next;
}
}
//this prints the question i want to jump back to
console.log(dashboard);

you don't have to build this feature just if you can help me understand how to build all states from a certain point that would be awesome(I am kinda new in Web development), thanks in advance

I'm trying to make a simple Q&A bot but I'm having trouble with the fork, I list of answers and would like to have a "default" one in case the user question doesn't match one of the options. Is there a way to do this?

Hi,

How to call the external API only once after the last question received? Currently, it triggers every time answering the question.

Thank you

I am trying to use chart js library along side , since the id of the canvas is in quotes of data-conv-question , is there any way around to utilize the canvas id ? I have added the link of the library below

https://www.chartjs.org

<input type="text" data-conv-question='<canvas id="myChart"></canvas>' data-no-answer="true">

Hai,

I am new to this Jquery convForm. Also, I am confusing of displaying DB data to the chatbox. can you help me?
Inside the form (id = formResult) i have an input like

<input id="InputNumber" data-conv-question="Alright! Can you enter the Inventory number, please.|Okay! Please, enter your Order Number." data-pattern="^[0-9]*$" name="Management" required placeholder="Enter corresponding value " type="number" maxlength="15" data-callback="getinfo">

In this input, I put data callback Function -: getinfo() . So function is below.

` function getinfo() {
var number = $('#InputNumber').val();

        $.ajax({
            url: '<%=ResolveUrl("Default.aspx/GetNumberDetails") %>',
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'number': number }),
            success: function (response) {

                  $('#formResult').append('<input type="text" data-conv-question="Your Result is "' + response.d + '"." data-no-answer="true">')
               

            },
            error: function (response) { alert(response.d); }
        });

    }`

My Code (.cs) below.

[WebMethod]
        public static string GetNumberDetails(string number)
        {
            DataAccess _db = new DataAccess();
            string strResult = _db.GetInputNumberDetails(Convert.ToInt32(number));
            return strResult;
        
        }

I got the return result back. But how can I show the return result to the Chatbox. I append the result with form but not showing. Is there is any mistake.. Please help.

I am attaching my .aspx file.
Test.aspx.zip

I'm trying to use request.vars to get typed values from the user to controller but it's not working.
How can I overcome this?

I want to create A Smart Chat Bot From An Html Form - convForm by referring given url with autocomplete feature to suggest city/town name. How can i use it? Please suggest to write Text input with suggestions.

https://eduardotkoller.github.io/convForm/

Hello! I have a problem with the mutiple select, when I'm filling out the form it detects all the ones I activated, but when my PHP is executed, only sent the last option selected .... any sendmail.php that you recommend? or some rule that I should add to mine? .... BTW, I know about HTML and CSS, but I do not have much experience in PHP and JS.

Hi Eduardo,

Thanks a lot for your awesome job with this script.

A noticed a small visual artefact using firefox : when form is long enough, select options are overlapping the question.

Any help ?

hi Team,
firstly thanks very much for your work it's very nice
basically Im not a dev and I can use your script without difficulty

just one thing is missing for me. the robot is not able to send message with images.

did I miss something or it s not possible?

thanks
Louis

Hi Eduardo - I sent you a $ donation because I love this plugin. I made some changes to hide the text input field when not required and other small things. However, I'm having trouble adding multiple select option functionality to the "API" version. I've been playing with the newState() function, but have not been able to get multiple select options to work yet. Do you have any tips?

Thanks!
David

I'm trying to display a dynamic message/reply message from external API, but I'm getting an error like this Uncaught TypeError: Cannot read property 'current' of undefined in askAgain function, but in alert it's working.

How to fix this? Also how to append a p html tag outside the bubble chat?

Thank you.

var original = false;
function askAgain(convState, ready, message) {
	convState.current.next = convState.newState({
		type: 'text',
		questions: [message],
		callback: ['clientConcern']
	});
	convState.current.next.next = convState.newState({
		type: 'text',
		questions: [message],
		text: $('input[type=text]#chatConcern').val()
	});

	setTimeout(ready, Math.random() * 500 + 100);
	convState.current.next = false;
}


function clientConcern(convState){
	$.ajax({
		url: 'http://example/api',
		type: "POST",
		dataType: "json",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify({
			"nickname": $('input[type=text]#custName').val(),
			"subject": $('select[name="custType"]').val()
		}),
		success: function (data){
			loadInterval = setInterval(receivedMsg, 1000);

		// load messages uniquely
		var messageInterval = setInterval(function(){
			for (const item of messageArray){
				if (!showedMap.has(item.index)){
					askAgain(item.text);
					showedMap.set(item.index, true);
				}
			}
		}, 100);
						
		sendMsg();
	},
		error: function (data){
			alert(data);
		}
	});
}
        
function sendMsg(){
	jQuery.ajax({
		url: 'http://example/api/chat_id',
		type: "POST",
		dataType: "json",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify({
			operationName : "SendMessage",
			alias : ALIAS,
			secureKey : SECURE_KEY,
			text: $('input[type=text]#chatConcern').val()
		}),
		success: function (data){
			console.log(data);
		}
	});
}

function receivedMsg(convState){
	jQuery.ajax({
		method: "POST",
		url: "http://example/api/chat_id/messages",
		cache: false,
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		data: JSON.stringify({
			"alias" : ALIAS,
			"secureKey" : SECURE_KEY,
			"userId" : USER_ID
		}),
	}).done(function(data){
		if (data.chatEnded){
			clearInterval(loadInterval);
			original = convState.current;
			convState.current.next = convState.newState({
				type: 'text',
				questions: [message],
				noAnswer: true
			});
			convState.current.next.next = convState.newState({
				type: 'text',
				questions: ['Chat ended.'],
				noAnswer: true,
				callback: ['askAgain']
			});
		} else {
			var len = data.messages.length;
			for (i = 0; i < len; i++){
				var messages = data.messages[i];

				if (messages.type === "Message" && 
				(messages.from.type === "Agent" || messages.from.type === "External")){
					if (!messageMap.has(messages.index)){
						messageMap.set(messages.index, true);
						messageArray.push(messages);
					}
				}
			}
		}	
	});
}

jQuery(function($){
	var convForm = $('#chat').convform();
	console.log(convForm);
});
```

On Firefox scroll bar is visible. No Effect on IE and Chrome.

Hi,

I write answer for selection like that:
answers: [
{text: 'Answer 1 ioji ojo j oi oi ho h oh oi ho nh dskfjhbaslifh aksjd hfkjasdbnfkjasd\n', value: '1'},
{text: 'Answer 2 ioji ojo j oi oi ho h oh oi ho nh dskfjhbaslifh aksjd hfkjasdbnfkjasd\n', value: '2'},
{text: 'END', value: 'end'}
]

• Result:
  
  I cannot click answer 2, If answer 2 is in new line I can click it, how can I do it???

Thanks

First off, thank you for this incredible library! Very cool work, that while perhaps obvious now that it's done, clearly took some ingenuity and hard work to get it to the elegant state it's in. Anyway, I have a minor issue to raise:

Currently the submit button uses "Black Medium Right-Pointing Triangle Centred" as the value. Unfortunately, this is not supported on some systems which results in the classic "empty square of death" as shown here:

I've replaced with "Black Right-Pointing Triangle" for my implementation, which seems to be much more widely supported.

I'd have submitted a pull request to update this (e.g. on lines 261, 264 of dist/jquery.convform.js), but figured I'd submit as an issue instead, since it occurs in the minified js and perhaps other places as well.

I'd like to use some URL in the replay of the conversation, is it possible?
Something like this:

<select conv-question="Go searching ... ">
	<option value="www.google.com">Google</option>
	<option value="www.bing.com">Bing</option>
</select>

Thanks :)

I want to add an image while the script asks question, is it possible ?

I saved all the inputs in a global array (access) and i wrote this callback

function jump(stateWrapper) {
var singleState = new SingleConvState(access[0]);
stateWrapper.current.next = singleState;
for(var i in access) {
if(i != 0 && access.hasOwnProperty(i)){
singleState.next = new SingleConvState(access[i]);
singleState = singleState.next;
}
}
console.log("Calling jump");
}

this is working but sometimes the questions and it's order are not correct, the questions comes randomly sometimes even though i m building all the states again can u please help me fix this?

Hello.
I like this template with the features.
However i'm still green when it comes to js/jquery and the bot stuff.
I would like to have a continuous chat option where the user interacts with the app without any page refresh.
I put extra lines of code to make it work but i'm sure there must be a better way that this:

Hello,

After clicking no option, all questions show, but after selecting next question script stop working.

Hello, how to send multiple messages between agent and user? Like, the user can send multiple messages chat after he/she sent the first message (vice versa - agent side) even the agent is not yet answer the chat. And if the user did not type and send anything within 5 minutes, the chat will ended.

How to do this? Please help me. Thank you

Here's the current code:

success: function (data) {
								original = convState.current;
								convState.current.next = convState.newState({
									type: 'text',
									questions: [data.messages],
								});

								convState.current.next.next = convState.newState({
									type: 'text',
									questions: [data.messages],
									answers: $('input[type=text]#chatConcern').val()
								});
										
								setTimeout(ready, Math.random() * 500 + 100);
							}

hii,

Actually i used POST method but this is not working so i have use GET method and got the data from chat bot form but the mail function is not working. Please help me.

thanks

This is my chat bot form

<form action="send_form_email.php" method="GET" class="hidden" id=""> <input type="text" name="name" data-conv-question="Welcome to Citiyano De Solution. Please provide your name.|Okay! Please, tell me your name first."> <input type="text" data-conv-question="Hello, {name}:0! It's a pleasure to meet you." data-no-answer="true"> <input type="text" data-conv-question="What kind of service do you like?" data-no-answer="true"> <select name="multi[]" data-conv-question="Our services are:" multiple> <option value="IT & E-Governance">IT</option> <option value="Human Resource">HR</option><br> <option value="Urban Planning">Urban Planning </option> </select> <input type="text" data-conv-question="Please provide your Email id" data-no-answer="true"> <input data-conv-question="" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="What's your e-mail?">
Awesome!
`

This is my mail Script

`<?php

if(isset($_GET['email']) && !empty($_GET['email']))

{
$emailAddress = $_GET['email'];
}

if(isset($_GET['name']) && !empty($_GET['name'])){
$name= $_GET['name'];
}
if(isset($_GET['multi[]']) && !empty($_GET['multi[]'])){
$multi= $_GET['multi[]'];
}


	$to      = '[email protected]';
    $subject = 'Received from Chat bot';
    $message = 'hii ' . $name;
    $headers = 'From: [email protected]' . "\r\n" .
        'Reply-To: [email protected]' ;
	/*$htmlContent = '<h2>Received from Chat bot</h2>
                <p><b>Name:</b> '.$name.'</p>
                <p><b>Email:</b> '.$from.'</p>
                <p><b>Position:</b> '.$subject.'</p>
				<p><b>Message:</b><br/>'.$message.'</p>';*/
	
	$result=mail($to, $subject, $message, $headers, $multi);
    if(!$result)
    {
        die('There was an error sending out the email');
    }
//header('Location:index.php');

?>
`

Hi, Loving the plugin. Quick question. Does it support nested forks and multiple forks?

Hello !
Your project is cute!

I tried to plug the answers to an API, but the result is not what I expected.
Let's say my API takes 10 seconds to respond.
Expected behavior:

• form asks "choice 1" or "choice 2"
• user clicks on his choice
• form prints in the right the selected answer (green)
• form prints in the left a "..." bubble
• wait for 10 seconds (time for the API to respond)
• "..." is replaced by the actual message

Actual behavior:

• form asks "choice 1" or "choice 2"
• user clicks on his choice
• wait for 10 seconds (time for the API to respond)
• form prints in the right the selected answer (green)
• form prints in the left a "..." bubble
• "..." is replaced by the actual message

The actual behavior gives the feeling that the system is stuck. Is there a way to display (at least) the selected answer (green bubble) before the display of the response?

Thank you.

Hello friend
First of all, thank you very much for share you nice plugin.
I would like to know how to do it for example if I want to start again once the chat has already started or finished.
Can you help me please.

Hello,

I'm new to this JQuery convForm.
Also, I am confusing of displaying the response from web service to chatbox and vice versa (pass the data to web service.

Inside the form, I have a select box which has a 2 options, each options have a corresponding dummy chat message. What I need is when the user reach to the question with 'Type your concern', the data will pass in web service and get the real data chat message.

I can't get the response data fetch from/to the web service when the user reached to 'Type your concern', what is currently happening is the chatbox reload itself when reached to 'Type your concern' and everything was cleared.

Please help me.

JS:

jQuery(function($){
			var count = 0;
			var convForm = $('#chat').convform({eventList:{onInputSubmit: function(convState, ready) {
				console.log('input is being submitted...');
		        if(convState.current.answer.value==='end') {
		            convState.current.next = false;
					setTimeout(ready, Math.random()*500+100);
		        } else {
					if(Array.isArray(convState.current.answer)) var answer = convState.current.answer.join(', ');
					else var answer = convState.current.answer.text;
					setTimeout(ready, Math.random()*500+100);
		        }
				count++;
				
				/* function getinfo(stateWrapper, ready) {
					window.open("https://google.com");
					ready();
				} */

				function getinfo(convState) {
					var chatMsg = $('#chatConcern').val();
						if(chatMsg>=0) {
							$.ajax({
								url: 'https://example.webservice/',
								type: "POST",
								dataType: "json",
								contentType: 'application/json; charset=utf-8',
								data: JSON.stringify({ 'text': chatMsg }),
								success: function (response) {
									console.log("Thanks!");
								},
								error: function (response) { alert(response.d); }
							
						});
					}
					}
			}}});
		});

Here's the form look like:

<form action="" method="GET" class="hidden" id="chatUser">
	                                <select name="custType" data-conv-question="Are you a new or existing customer?" name="first-question">
	                                    <option value="newCust">New Customer</option>
	                                    <option value="existingCust">Existing Customer</option>
									</select>

									<div data-conv-fork="custType">
	                                   <div data-conv-case="newCust">
											<input type="text" name="custName" data-conv-question="What is your full name?">
											<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
											<input type="text" name="mobile" data-conv-question="What is your mobile number?">
											<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
	                                    </div>

										<div data-conv-case="existingCust">
											<select name="existingCust" data-conv-question="Which department would you like to talk to?">
												<option value="col">Dept 1</option>
												<option value="hr">Dept 2</option>
												<option value="cs">Dept 3</option>
											
												<div data-conv-case="col">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail"  data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>

												<div data-conv-case="hr">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>

												<div data-conv-case="cs">
													<input type="text" name="custName" data-conv-question="What is your full name?">
													<input type="email" name="custEmail" data-conv-question="What is your e-mail address?">
													<input type="text" name="mobile" data-conv-question="What is your mobile number?">
													<input type="text" name="custConcern" id="chatConcern" data-conv-question="Type your concern or message to Customer Support" data-callback="getinfo">
												</div>
											</select>
										</div>
									 </div>
	                            </form>

Hi Edoardotkoller,

Thank you for this great plugin.

I am trying to implement it on my website, Where last question does not expect an answer (no-answer="true"). But in that case form does not submit.

For example at the last, once collected all the details, I would like to send a thanks message for which I dont expect an answer, but in this case form is not being submitted.

Please help I am stuck in between.

Thanks,
Rahul

Hi,
Thank you for sharing your work, your plugin is very cool and pleasant to use !

I have a bug when rollbacking to the first question fork and choosing another answer, the "new choice" is not stored and I'm stuck in the loop of the "first time choice"
Is it possible to rollback to the first question and reseting all the old answers stored ?

I know you're very busy at the moment but really apreciate if you can help me with that.
Thanks a lot !

Hi @eduardotkoller ,
I am unable to use jquery datepicker inside Convform. Inside conv-form-wrapper the default date pop-up behaviour is suppressed. Pls suggest how to oversome this.

hi,
first i want to say that this is a great plugin.

i have 2 questions :

1. can i disable the option to insert text ? i am using only buttons,
2. is it possible to add image ?
   thanks
   gil