// 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>

    ]]);

  }

}