<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <meta http-equiv="content-language" content="ko">
    <title>스크래핑</title>
    <link href="<c:url value='/'/>css/common.css" rel="stylesheet" type="text/css" >
    <link href="<c:url value='/'/>css/login.css" rel="stylesheet" type="text/css" >
    <style>
        #chat-container {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 300px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #chat-box {
            height: 300px;
            overflow-y: auto;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        #chat-input {
            width: calc(100% - 90px);
            padding: 5px;
            border: none;
            border-top: 1px solid #ddd;
        }
        #send-button {
            width: 80px;
            border: none;
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
        }
        /* 말풍선 스타일 */
    .chat-message {
        padding: 10px;
        margin: 5px;
        border-radius: 10px;
        max-width: 70%;
    }

    /* 사용자 메시지 스타일 */
    .user-message {
        background-color: #d1e7fd;
        align-self: flex-end;
        margin-right: 10px;
    }

    /* GPT-3.5 메시지 스타일 */
    .gpt3-message {
        background-color: #f0f0f0;
        align-self: flex-start;
        margin-left: 10px;
    }

    /* 채팅 박스 내부 flex 스타일 */
    #chat-box {
        display: flex;
        flex-direction: column;
    }
    
  /* 콘테이너 중앙정렬 및 화면 전체 차지 */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 점의 스타일 개선 */
.dot {
  width: 15px;
  height: 15px;
  margin: 0 10px;
  background-color: #3498db;
  border-radius: 50%;
  opacity: 0.7; /* 투명도 추가 */
  animation: dotPulse 1.5s infinite ease-in-out both;
}

/* 점 애니메이션에 ‘transform-origin’ 속성과 ‘opacity’ 변화 추가 */
@keyframes dotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

 
    </style>
</head> 
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 전체 레이어 시작 -->
    <div id="wrap">
        <!-- header 시작 -->
        <div id="header_mainsize"><c:import url="/EgovPageLink.do?link=main/inc/EgovIncHeader" /></div>
        <div id="topnavi"><c:import url="/EgovPageLink.do?link=main/inc/EgovIncTopnav" /></div>
        <!-- //header 끝 -->
        <!-- container 시작 -->
        <div id="container">
            <!-- 좌측메뉴 시작 -->
            <div id="leftmenu"><c:import url="/EgovPageLink.do?link=main/inc/EgovIncLeftscrapmenu" /></div>
            <!-- 좌측메뉴 끝 -->
                <!-- content 시작 --> 
                <div class="container" id="content">
                    <!-- 여기에 페이지 내용을 추가합니다. -->
                </div>  
            <!-- //content 끝 -->    
        </div>  
        <!-- //container 끝 -->
        <!-- footer 시작 -->
        <div id="footer"><c:import url="/EgovPageLink.do?link=main/inc/EgovIncFooter" /></div>
        <!-- //footer 끝 -->
    </div>  
    <!-- //전체 레이어 끝 -->

    <!-- 채팅창 UI -->
    <div id="chat-container">
        <div id="chat-box"></div>
        <!-- 로딩 애니메이션 -->
      <div id="loading" style="display:none;">
	    <div class="dot"></div>
	    <div class="dot"></div>
	    <div class="dot"></div>
	  </div>

        <input type="text" id="chat-input" placeholder="메시지를 입력하세요"/>
        <button id="send-button">보내기</button>
    </div>

    <!-- jQuery 라이브러리 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- 채팅창 관련 스크립트 -->
    <script>
        $(document).ready(function(){
            $('#send-button').click(function(){
                var message = $('#chat-input').val();
                sendMessage(message);
                $('#chat-input').val('');
            });

            $('#chat-input').keypress(function(e){
                if(e.which == 13){ // Enter 키가 눌렸을 때
                    $('#send-button').click();
                }
            });
        });

        function sendMessage(message){
            var userHtml = "<div class='chat-message user-message'>" + message + "</div>";
            $('#chat-box').append(userHtml);
            getResponse(message);
        }

        function getResponse(message) {
        	
        	$('#loading').show();
        	 $.get("/hbz/getGPT3Response.do", {question: message}, function(response) {
        	        // 로딩 애니메이션 숨김
        	        $('#loading').hide();
                var answer = response.answer;
                var gpt3Html = "<div class='chat-message gpt3-message'>" + answer + "</div>";
                $('#chat-box').append(gpt3Html);
            });
        }


    </script>
</body>
</html> 여기서 채팅치면 로딩창이 나오는데 로딩창이 나올때 이전에 말하고 있는 말풍선이 가려져고 채팅창이 길어져서 거슬리는데 이렇게 안하고 채팅치고 있는 칸 바로 위에서 살짝만 로딩창이 나오도록 바꿔줄수 있어? 로딩중에 대화하고 있던 말풍선이 보여지게 하고 이런거 가능해?