From 831ca8942e6ed7926cb7c4e4009684d54a1d1562 Mon Sep 17 00:00:00 2001
From: Akshen
Date: Thu, 28 Dec 2017 12:14:34 +0530
Subject: Add ChatBot

- This commit will add chatbot
- requirements.txt changed
- required css/js and html added for chatbot
- parameters set for chatbot in settings.py
- yaml files(training data) to be added
---
 workshop_app/templates/workshop_app/index.html | 114 +++++++++++++++++++++++++
 1 file changed, 114 insertions(+)

(limited to 'workshop_app/templates')

diff --git a/workshop_app/templates/workshop_app/index.html b/workshop_app/templates/workshop_app/index.html
index 5fd3b14..f00b47f 100644
--- a/workshop_app/templates/workshop_app/index.html
+++ b/workshop_app/templates/workshop_app/index.html
@@ -10,6 +10,19 @@
     <meta name="Akshen Doke" content="">
 
     <title>Welcome</title>
+    <!-- ChatBox  -->
+    <script type="text/javascript">
+     function open_chatbox()
+     {
+     $('#chat').fadeOut(500);
+     $('#chatBox').fadeIn(1000);
+     }
+     function closeChat()
+     {
+     $('#chatBox').fadeOut(500);
+     $('#chat').fadeIn(1000);
+     }
+     </script>
 
     <!-- Bootstrap Core CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -27,6 +40,15 @@
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
+<!-- ChatBox CSS -->
+
+  <!-- ChatBot Post -->
+    <script src="{{ URL_ROOT }}/static/workshop_app/js/jquery.js"></script>
+    <script src="{{ URL_ROOT }}/static/workshop_app/js/js.cookie.js"></script>
+   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+
+   
 
 </head>
 
@@ -73,9 +95,12 @@
             <!-- /.col-md-4 -->
         </div>
         <!-- /.row -->
+        
 
         <!-- Call to Action Well -->
         <div class="row icons" style="align-items: center;">
+
+
           <div class="text-center">
             <div class="col-md-3" style="align-items: center;">
                 <a href="{{ URL_ROOT }}/faq/"><img src="{{ URL_ROOT}}/static/workshop_app/img/faq.png"><br><br>
@@ -102,6 +127,20 @@
             </div>
             <!-- /.col-lg-12 -->
           </div>
+
+              <!--ChatBox  -->
+               <div id="chat" onClick="open_chatbox();"> Talk to ChatBot</div>
+               <div id="chatBox"><div onclick="closeChat()" id="close">X</div><br><br>
+                 <ul class="list-group chat-log js-chat-log">
+                 </ul>
+                  <div class="input-group input-group-md mt-1">
+                    <input type="text" class="form-control js-text" placeholder="Type here"/>
+                    <span class="input-group-btn">
+                      <button class="btn btn-primary js-say">Submit</button>
+                    </span>
+                  </div>
+               </div>
+
         </div>
         <!-- /.row -->
 
@@ -152,6 +191,81 @@
 
     </div>
     <!-- /.container -->
+    <!--  -->
+
+     <script>
+      var chatterbotUrl = '{% url "chatterbot:chatterbot" %}';
+      var csrftoken = Cookies.get('csrftoken');
+
+      function csrfSafeMethod(method) {
+        // these HTTP methods do not require CSRF protection
+        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+      }
+
+      $.ajaxSetup({
+        beforeSend: function(xhr, settings) {
+          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+            xhr.setRequestHeader("X-CSRFToken", csrftoken);
+          }
+        }
+      });
+
+      var $chatlog = $('.js-chat-log');
+      var $input = $('.js-text');
+      var $sayButton = $('.js-say');
+
+      function createRow(text) {
+        var $row = $('<li class="list-group-item"></li>');
+
+        $row.text(text);
+        $chatlog.append($row);
+        // Clear the input field
+        $input.val('');
+        $chatlog[0].scrollTop = $chatlog[0].scrollHeight;
+      }
+
+      function submitInput() {
+        var inputData = {
+          'text': $input.val()
+          
+        }
+        // Display the user's input on the web page
+        createRow(inputData.text);
+
+        var $submit = $.ajax({
+          type: 'POST',
+          url: chatterbotUrl,
+          data: JSON.stringify(inputData),
+          contentType: 'application/json'
+        });
+
+        $submit.done(function(statement) {
+            createRow(statement.text);
+
+            // Clear the input field
+            $input.val('');
+
+            // Scroll to the bottom of the chat interface
+            $chatlog[0].scrollTop = $chatlog[0].scrollHeight;
+        });
+
+        $submit.fail(function() {
+          // TODO: Handle errors
+          console.log('here')
+        });
+      }
+
+      $sayButton.click(function() {
+        submitInput();
+      });
+
+      $input.keydown(function(event) {
+        // Submit the input when the enter button is pressed
+        if (event.keyCode == 13) {
+          submitInput();
+        }
+      });
+    </script>
 
 </body>
 
-- 
cgit