Jquery 간단한 챗봇

Style

    .chat-container {
        max-width: 600px;
        max-height:600px;
        margin: 0 auto;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        background-color: #f9f9f9;
        display:none;
        z-index:1;
        position:relative;
    }
    .chat-message {
        margin-bottom: 10px;
    }
    .chat-buttons {
        margin-top: 20px;
    }
    #chatBox{
        height:10rem;
        overflow-y: auto; /* Vertical scroll */
        overflow-x: hidden; /* Horizontal scroll */
    }

Jquery

$(document).ready(function() {

        $(".chatButton").click(function(){
            $(".chat-container").css("display","block");
            $('html, body').scrollTop( $(document).height());
        });

        $(".chatClose").click(function(){
            $(".chat-container").css('display','none');
            $('.chat-message').not(':first').remove();
            $(".chat-message").html('<strong>Bot:</strong> Hello! Choose a question to get an answer about JavaScript');
        });
        const responses = {
            "what is javascript": "JavaScript is a programming language commonly used in web development.",
        	"what is a variable": "A variable is a container for storing data values in JavaScript.",
        	"how do you create a function": "You can create a function using the `function` keyword followed by a name and parentheses.",
        	"what is an array": "An array is a data structure that can hold more than one value at a time.",
        };

        $('.question-btn').on('click', function() {
            let userQuestion = $(this).data('question');

            $('#chatBox').append(`<div class="chat-message"><strong>질문:</strong> ${$(this).text()}</div>`);

            let botResponse = responses[userQuestion] || responses["default"];
            $('#chatBox').append(`<div class="chat-message"><strong>Bot:</strong> ${botResponse}</div>`);

            var chatBox = document.getElementById('chatBox');
            chatBox.scrollTop = chatBox.scrollHeight;
        });
    });

html

<div class="container chat-container">
    <h2><i class="fa-solid fa-circle-xmark chatClose" style="float:right;"></i></h2>
    <div id="chatBox" class="chat-box">
        <div class="chat-message">
            <strong>Bot:</strong> Hello! Choose a question to get an answer about JavaScript.
        </div>
    </div>
    <div class="chat-buttons">
        	<button class="btn btn-primary question-btn" data-question="what is javascript">What is JavaScript?</button>
            <button class="btn btn-primary question-btn" data-question="what is a variable">What is a variable?</button>
            <button class="btn btn-primary question-btn" data-question="how do you create a function">How do you create a function?</button>
            <button class="btn btn-primary question-btn" data-question="what is an array">What is an array?</button>
    </div>
</div>