web-gpt/project/templates/chat.html

{% extends "base.html" %}
{% block content %}
  {% if user and user.is_authenticated %}
    {% if user.isActivated %}
      <div id="chat-window" class="jumbotron jumbotron-fluid">
        <ul id="msg-list">
        </ul>
      </div>
      <div class="fixed-bottom form-inline">
        <textarea id="msgbox" class="form-control" style="width:85%; float: left; margin-bottom: 20px;"></textarea>
        <button id="btn-send"
                class="btn btn-info"
                type="button"
                style="width: 10%;"
                onclick="send_message()"
                disabled>
          <svg xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
               fill="currentColor"
               class="bi bi-send"
               viewBox="0 0 16 16">
            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
          </svg>
        </button>
      </div>
      <script>
        var msgbox = document.getElementById("msgbox");
        var btn_send = document.getElementById("btn-send");

        msgbox.addEventListener('input', (e) => {
            msgbox.style.height = "100px";
            msgbox.style.height = e.target.scrollHeight + 'px';
            if (msgbox.value){
              btn_send.disabled = false;
            } else{
              btn_send.disabled = true;
            }
        });
      </script>
      <script>
        function get_history() {
          var msgs
          $.ajax({
            type: 'GET',
            url: "{{ url_for('main.chat') }}",
            data: { act: "get_history" },
            success: function (msgs) {
              msgs.forEach(msg => {
                var msg_list = document.getElementById("msg-list")
                var li = document.createElement('li');
                var pre = document.createElement('pre');
                li.appendChild(pre)
                li.style.textAlign = "left"
                li.style.padding = "10px"
                li.style.clear = "both"
                if (msg.response == "" && msg.request != "") {
                  pre.innerText = msg.request
                  pre.style = "background-color: lightblue; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word; float: right;"
                } else if (msg.request != "") {
                    li.style.textAlign = "left"
                    pre.innerText = msg.response
                  pre.style = "background-color: lightgreen; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word;"
                }
                msg_list.appendChild(li)
              })
            window.scrollTo(0,document.documentElement.scrollHeight)
            }
          })
        }
        window.onload=function(){
          get_history()
        }

        function send_message() {
          var data= {
            msgtype: "text",
            msg: msgbox.value
          }
          if (data.msg) {
            var msg_list = document.getElementById("msg-list")
            var li = document.createElement('li');
            var pre = document.createElement('pre');
            li.appendChild(pre)
            li.style.textAlign = "left"
            li.style.padding = "10px"
            li.style.clear = "both"
            pre.innerText = data.msg
            pre.style = "background-color: lightblue; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word; float: right;"
            msg_list.appendChild(li)
          }
          msgbox.value=""
          btn_send.disabled = true;

          $.ajax({
            type: 'POST',
            url: "{{ url_for('main.chat') }}",
            data: data,
            success: null,
            dataType: null
          }).always(function (response) {
              if (response?.status == "success") {
                var msg_list = document.getElementById("msg-list")
                var li = document.createElement('li');
                var pre = document.createElement('pre');
                li.appendChild(pre)
                pre.innerText = response.message
                li.style.textAlign = "left"
                li.style.padding = "10px"
                li.style.clear = "both"
                pre.style = "background-color: lightgreen; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word;"
                msg_list.appendChild(li)
                msg_list.appendChild(document.createElement('br'))
              }
            });
        }
      </script>
    {% else %}
      <p class="text-warning">您的账号暂未激活，请等待管理员激活此账号。</p>
    {% endif %}
  {% else %}
    <a href="{{ url_for('auth.login') }}">
      <button type="button" class="btn btn-primary">登录</button>
    </a>
    或
    <a href="{{ url_for('auth.signup') }}">
      <button type="button" class="btn btn-default">注册</button>
    </a>
  {% endif %}
  {% with messages = get_flashed_messages() %}
    {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
  {% endwith %}
{% endblock content %}