// Hussain Mill's design
sclass NewChatBotDesign {
  bool loadJQuery = true;
  
  S headStuff() {
    ret hStylesheetSnippet(#1028274) + mls_unindent([[
      <!-- Fonts -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    ]]);
  }
  
  S demoBodyStuff() {
    ret mls_unindent([[
      <div class="chatbot">
          <div class="chat-box">
              <div class="chat">
                  <div class="chat_header">
                      <h2>Chatbot</h2>
                  </div>
                  <div id="chat_converse" class="chat_conversion chat_converse">
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src="http://res.cloudinary.com/dqvwa7vpe/image/upload/v1496415051/avatar_ma6vug.jpg"/>
                          </div>
                          Hey there! Any question?
                      </span>
                      <span class="chat_msg_item chat_msg_item_user">Hello!</span>
                      <span class="status">20m ago</span>
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src="http://res.cloudinary.com/dqvwa7vpe/image/upload/v1496415051/avatar_ma6vug.jpg"/>
                          </div>Hey! Would you like to talk sales, support, or anyone?
                      </span>
                      <span class="chat_msg_item chat_msg_item_user">
                          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </span>
                      <span class="status2">Just now.</span>
                  </div>
                  <div id="wave">
                      <h4>User is typing</h4>
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                  </div>
                  <div class="chat-bottom">
                      <a class="camera-icon"><i class="fas fa-camera"></i></a>
                      <a class="send-icon"><i class="fas fa-paper-plane"></i></a>
                      <input type="text" name="chat_message" placeholder="Send a message" class="chat_field chat_message" />
                  </div>
              </div>
              <a class="chat-icon"><i class="fas fa-comment-dots"></i></a>
          </div>
      </div>
      <!-- Chatbot Ends -->

      ]]) + stringIf(loadJQuery, [[
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>]]) + mls_unindent([[
      
      <script type="text/javascript">
          hideChat(0);

          $('.chat-icon').click(function() {
            toggleFab();
          });

          //Toggle chat and links
          function toggleFab() {
              $('.chat-icon i').toggleClass('fa-comment-dots');
              $('.chat-icon i').toggleClass('fa-times');
              $('.chat-icon i').toggleClass('is-active');
              $('.chat-icon i').toggleClass('is-visible');
              $('.chat-icon').toggleClass('is-float');
              $('.chat').toggleClass('is-visible');
              $('.fab').toggleClass('is-visible');
            
          }

          function hideChat(hide) {
              switch (hide) {
              case 1:
                  $('#chat_converse').css('display', 'block');
                  break;
              }
          }

          // Text Animation
          $("#wave").hide();
          $(".chat_field.chat_message").focus(function() {
              $('#wave').show('slow');       
              //return false;
          });
        
          $('.chat_field.chat_message').blur(function() {
              if( !$(this).val() ) {
                  $('#wave').hide('slow');
              }
          });
      </script>
    ]]);
  }
}