Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

285
LINES

< > BotCompany Repo | #1027690 - Cruddie Chat Bot Template As JavaScript [input field instead of textarea, LIVE]

Document

1  
// runnable: function($)
2  
function dynamicallyLoadJQuery(runnable) {
3  
  if (document.jQuery != null)
4  
    jQuery(document).ready(runnable);
5  
  else {
6  
    var script = document.createElement("SCRIPT");
7  
    script.src = 'https://code.jquery.com/jquery-1.10.2.js';
8  
    script.type = 'text/javascript';
9  
    script.onload = function() {
10  
      console.log("jquery loaded");
11  
      jQuery(document).ready(runnable);
12  
    };
13  
    document.getElementsByTagName("head")[0].appendChild(script);
14  
  }
15  
}
16  
17  
var chatBot_autoOpen = #AUTOOPEN#;
18  
var chatBot_n = #N#;
19  
var chatBot_interval = 1000;
20  
var chatBot_nInitial = chatBot_n;
21  
var chatBot_showActions = false;
22  
var chatBot_language = "";
23  
var chatBot_started = false;
24  
var chatBot_cookie = localStorage.getItem('cookie');
25  
26  
var urlParams = new URLSearchParams(window.location.search);
27  
const botEnable = urlParams.get('bot');
28  
if (#BOT_ON# || botEnable == "1") {
29  
30  
console.log("cookie 1: " + chatBot_cookie);
31  
if (!chatBot_cookie) {
32  
  chatBot_cookie = Math.random().toString(36).substr(2, 9);
33  
  localStorage.setItem('cookie', chatBot_cookie);
34  
  console.log("cookie 2: " + chatBot_cookie);
35  
}
36  
37  
// workaround to get $ from wordpress version of jQuery
38  
dynamicallyLoadJQuery(function ($) {
39  
  console.log("loading 2");
40  
  
41  
  function dynamicallyLoadScript(url) {
42  
    var script = document.createElement("script");
43  
    script.src = url;
44  
    document.head.appendChild(script);
45  
  }
46  
  
47  
  function loadStyleSheet(url, onLoad) {
48  
    var link = document.createElement('link');
49  
    link.setAttribute("rel", "stylesheet");
50  
    link.setAttribute("type", "text/css");
51  
    link.onload = onLoad;
52  
    link.setAttribute("href", url);
53  
    document.head.appendChild(link);
54  
  }
55  
  
56  
  // bootstrap js
57  
  
58  
  dynamicallyLoadScript('https://botcompany.de/1014036/raw/1025981?contentType=text/javascript');
59  
  
60  
  var shouldOpenBot = false, styleSheetLoaded = false;
61  
  
62  
  // bot styles
63  
  loadStyleSheet("https://botcompany.de/1014036/raw/#CSS_ID#?contentType=text/css", function() {
64  
    if (!styleSheetLoaded) {
65  
      console.log("style sheet loaded");
66  
      styleSheetLoaded = true;
67  
      if (shouldOpenBot) chatBot_actualOpen();
68  
    }
69  
  });
70  
71  
  // scripts for bot
72  
  
73  
  function chatBot_open() {
74  
    shouldOpenBot = true;
75  
    if (styleSheetLoaded) chatBot_actualOpen();
76  
  }
77  
  
78  
  function chatBot_actualOpen() {
79  
    console.log("Opening chat bot");
80  
    $('#qnimate').addClass('popup-box-on');
81  
    $('.opener-box').hide();
82  
    $("#chatBot_scrollme").scrollTop(1E10);
83  
    $('#status_message').focus();
84  
    //chatBotShown//
85  
    if (!chatBot_started) {
86  
      chatBot_started = true;
87  
      try {
88  
        if (window.GTranslateGetCurrentLang)
89  
          chatBot_language = window.GTranslateGetCurrentLang();
90  
        console.log("lang: " + chatBot_language);
91  
      } catch (err) {
92  
        console.log(err);
93  
      }
94  
95  
      chatBot_start();
96  
    }
97  
  }
98  
  
99  
  $(function(){
100  
    $(".chatOpenAction").click(function () {
101  
      chatBot_open();
102  
      return false;
103  
    });
104  
      
105  
    $(".chatCloseAction").click(function () {
106  
      $('.opener-box').show();
107  
      $('#qnimate').removeClass('popup-box-on');
108  
      return false;
109  
    });
110  
  });
111  
  
112  
  function chatBot_showAction(action) {
113  
    if (chatBot_showActions) {
114  
      $("#actionMsg").html(action);
115  
      $("#actionMsg").show();
116  
    }
117  
    console.log(action);
118  
  }
119  
    
120  
  window.chatBot_appendAction = function(action) {
121  
    if (chatBot_showActions) {
122  
      $("#actionMsg").append(" | " + action);
123  
      $("#actionMsg").show();
124  
    }
125  
  };
126  
  
127  
  window.chatBot_hideAction = function() {
128  
    $("#actionMsg").hide();
129  
    $("#actionMsg").html("");
130  
  };
131  
  
132  
  window.chatBot_start = function() {
133  
    url = "#INCREMENTALURL#";
134  
    if (url != '' && url != ("#INC" + "REMENTALURL#")) {
135  
      url += chatBot_n + "&cookie=" + chatBot_cookie + "&rand=" + Math.random();
136  
      if (chatBot_language) url += "&language_default=" + chatBot_language;
137  
      chatBot_showAction("Loading " + url);
138  
      $.get(url, function(src) {
139  
        chatBot_showAction("Loaded " + src.length + " chars");
140  
        #ONMSGHTML#
141  
        var match = src.match(/\d+/);
142  
        if (match != null) {
143  
          var newN = parseInt(match[0]);
144  
          if (src.match(/NEW DIALOG -->/))
145  
            $(".direct-chat-messages").html(src);
146  
          else {
147  
            // hide old buttons
148  
            $(".direct-chat-msg:has(.direct-chat-buttons)").hide();
149  
            $(".chatbot-choice-button, .chat-button-span").hide();
150  
            $(".direct-chat-messages").append(src);
151  
          }
152  
          chatBot_n = newN;
153  
          $("#chatBot_scrollme").scrollTop(1E10);
154  
          chatBot_showAction("Appended " + src.length);
155  
          console.log(src);
156  
        } else
157  
          chatBot_showAction("chatBot_n=" + chatBot_n + " (initial=" + chatBot_nInitial + ")");
158  
        chatBot_appendAction("Rescheduling");
159  
        //var interval = src == '' ? chatBot_interval*10 : chatBot_interval; // slowdown when bug
160  
        var interval = chatBot_interval;
161  
        setTimeout(chatBot_start, interval);
162  
        chatBot_appendAction("Rescheduled");
163  
      }, 'text')
164  
        .fail(function() {
165  
          chatBot_showAction("Rescheduling after fail");
166  
          setTimeout(chatBot_start, chatBot_interval);
167  
        });
168  
    }
169  
  };
170  
171  
  // set input text and placeholder
172  
  window.chatBot_setInput = function(text, placeholder) {
173  
    if (placeholder == '') placeholder = "Type a message...";
174  
    $('#status_message').attr('placeholder', placeholder).val(text);
175  
  };
176  
  
177  
  window.submitAMsg = function(msg) {
178  
    if (msg == "") return;
179  
    status_message.value = msg;
180  
    submitMsg();
181  
  };
182  
  
183  
  window.submitMsg = function() {
184  
    /*if (status_message.value == 'new dialog')
185  
      document.forms['msgform'].submit();
186  
    else*/ {
187  
      url = '#MSGURL#' + encodeURIComponent(status_message.value) + "&cookie=" + chatBot_cookie + "&rand=" + Math.random();
188  
      if (chatBot_language) url += "&language_default=" + chatBot_language;
189  
      chatBot_showAction('Submitting ' + url);
190  
      $.get(url);
191  
      status_message.value = '';
192  
    }
193  
  };
194  
  
195  
  console.log("defined functions");
196  
  
197  
  $('body').append(`
198  
  
199  
  <div id="actionMsg"></div> <!-- debug div -->
200  
201  
  <!-- chat bot opener div -->
202  
203  
<div class="opener-box notranslate">
204  
  <div class="opener-head">
205  
    <div class="popup-head-left pull-left chatOpenAction"><!--<img src="#BOTIMG#" alt="Bot Image">--> $HEADING</div>
206  
    <div class="popup-head-right pull-right">
207  
    <button data-widget="remove" class="chat-header-button pull-right chatOpenAction" type="button"><i class="glyphicon glyphicon-off"></i></button>
208  
    </div>
209  
  </div>
210  
</div>
211  
212  
<!-- chat bot main form/div -->
213  
214  
<form name="msgform">
215  
216  
<div class="popup-box chat-popup notranslate" id="qnimate">
217  
          <div class="popup-head">
218  
        <div class="popup-head-left pull-left" style="width: 300px"><!--<img src="#BOTIMG#" alt="Bot Image">--> $HEADING</div>
219  
            <div class="popup-head-right pull-right">
220  
            <!--
221  
            <div class="btn-group">
222  
                      <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
223  
                     <i class="glyphicon glyphicon-cog"></i> </button>
224  
                    <ul role="menu" class="dropdown-menu pull-right">
225  
                    <li><a href="#">Media</a></li>
226  
                    <li><a href="#">Block</a></li>
227  
                    <li><a href="#">Clear Chat</a></li>
228  
                    <li><a href="#">Email Chat</a></li>
229  
                    </ul>
230  
            </div>
231  
            -->
232  
            
233  
            <button data-widget="remove" class="chatCloseAction chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
234  
                      </div>
235  
        </div>
236  
      <div id="chatBot_scrollme" class="popup-messages">
237  
        
238  
      <div class="direct-chat-messages">
239  
      <!-- MSGS HERE -->
240  
      </div>
241  
      <div class="popup-messages-footer">
242  
      
243  
      <div class="popup-messages-send" onClick="submitMsg(); return false;" title="Send message">
244  
                <svg width="57px" height="54px" viewBox="1496 193 57 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 18px; height: 18px;">
245  
                  <g id="Group-9-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1523.000000, 220.000000) rotate(-270.000000) translate(-1523.000000, -220.000000) translate(1499.000000, 193.000000)">
246  
                    <path d="M5.42994667,44.5306122 L16.5955554,44.5306122 L21.049938,20.423658 C21.6518463,17.1661523 26.3121212,17.1441362 26.9447801,20.3958097 L31.6405465,44.5306122 L42.5313185,44.5306122 L23.9806326,7.0871633 L5.42994667,44.5306122 Z M22.0420732,48.0757124 C21.779222,49.4982538 20.5386331,50.5306122 19.0920112,50.5306122 L1.59009899,50.5306122 C-1.20169244,50.5306122 -2.87079654,47.7697069 -1.64625638,45.2980459 L20.8461928,-0.101616237 C22.1967178,-2.8275701 25.7710778,-2.81438868 27.1150723,-0.101616237 L49.6075215,45.2980459 C50.8414042,47.7885641 49.1422456,50.5306122 46.3613062,50.5306122 L29.1679835,50.5306122 C27.7320366,50.5306122 26.4974445,49.5130766 26.2232033,48.1035608 L24.0760553,37.0678766 L22.0420732,48.0757124 Z" id="sendicon" fill="#96AAB4" fill-rule="nonzero"></path>
247  
                  </g>
248  
                </svg>
249  
              </div>
250  
251  
      <input type="text" id="status_message" placeholder="Type a message..." name="message" onkeypress="if (event.keyCode == 13) { submitMsg(); return false; }" style="width: 350px; margin-left: 10px; padding: 3px;">
252  
      
253  
      <div class="btn-footer">
254  
      <!--
255  
      <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
256  
      <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
257  
            <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
258  
      -->
259  
      <!--
260  
      <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
261  
      -->
262  
      </div>
263  
      </div>
264  
    </div>
265  
    
266  
</form>
267  
268  
<!-- end of chat bot form/div -->
269  
270  
  `);
271  
  
272  
  console.log("done init");
273  
  // onLoad
274  
  if (chatBot_autoOpen) {
275  
    console.log("auto-opening chat bot");
276  
    //window.addEventListener('DOMContentLoaded', chatBot_open, false);
277  
    chatBot_open();
278  
  }
279  
  
280  
  //MORESTUFF//
281  
  
282  
  // end of bot scripts
283  
});
284  
285  
} // if botEnable

Author comment

Began life as a copy of #1027638

download  show line numbers   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, xrpafgyirdlv

No comments. add comment

Snippet ID: #1027690
Snippet name: Cruddie Chat Bot Template As JavaScript [input field instead of textarea, LIVE]
Eternal ID of this version: #1027690/10
Text MD5: c9f79c4ed8265b2612e1a36fc8292456
Author: stefan
Category: javax / web chat bots
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-03-31 00:56:18
Source code size: 10595 bytes / 285 lines
Pitched / IR pitched: No / No
Views / Downloads: 56 / 224393
Version history: 9 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1027690 & http://1027690.tinybrain.de