first-chatbot/chat.html at main · ncl9100/first-chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<link
  href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
  rel="stylesheet"
  id="bootstrap-css"
/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <title>Chatbot</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
      crossorigin="anonymous"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='style.css')}}"
    />
  </head>

  <body>
    <div class="container-fluid h-100">
      <div class="row justify-content-center h-100">
        <div class="col-md-8 col-xl-6 chat">
          <div class="card">
            <div class="card-header msg_head">
              <div class="d-flex bd-highlight">
                <div class="img_cont">
                  <img
                    src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png"
                    class="rounded-circle user_img"
                  />
                  <span class="online_icon"></span>
                </div>
                <div class="user_info">
                  <span>ChatBot</span>
                  <p>Ask me anything!</p>
                </div>
              </div>
            </div>
            <div id="messageFormeight" class="card-body msg_card_body"></div>
            <div class="card-footer">
              <form id="messageArea" class="input-group">
                <input
                  type="text"
                  id="text"
                  name="msg"
                  placeholder="Type your message..."
                  autocomplete="off"
                  class="form-control type_msg"
                  required
                />
                <div class="input-group-append">
                  <button
                    type="submit"
                    id="send"
                    class="input-group-text send_btn"
                  >
                    <i class="fas fa-location-arrow"></i>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      function scrollToBottom() {
        var messageBody = document.getElementById("messageFormeight");
        messageBody.scrollTop = messageBody.scrollHeight;
      }

      $(document).ready(function () {
        $("#messageArea").on("submit", function (event) {
          const date = new Date();
          const hour = date.getHours();
          const minute = date.getMinutes();
          const str_time = hour + ":" + minute;
          var rawText = $("#text").val();

          var userHtml =
            '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' +
            rawText +
            '<span class="msg_time_send">' +
            str_time +
            '</span></div><div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div></div>';

          $("#text").val("");
          $("#messageFormeight").append(userHtml);

          scrollToBottom();

          $.ajax({
            data: {
              msg: rawText,
            },
            type: "POST",
            url: "/get",
          }).done(function (data) {
            var botHtml =
              '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' +
              data +
              '<span class="msg_time">' +
              str_time +
              "</span></div></div>";
            $("#messageFormeight").append($.parseHTML(botHtml));
            scrollToBottom();
          });
          event.preventDefault();
        });
      });
    </script>
  </body>
</html>