Chat Bot in 5 min always offline

@eproject05 Hello Roberto, please dont attach the same problem in multiple threads. If you find a thread with a topic close to your problem add it in it, and if you don't create a new thread as you did in this one. I deleted your post in the other thread so we can follow up in this one.

eproject05 Can you sure your code so we can help you.

Thanks, and sorry for the duplicated post, here enclosed the code.

Best regards,

Roberto

@husein 

Hello all - I followed the all the steps and double and triple checked code, but the Chatbot is "ALWAYS OFFLINE.

My Backend and Front-End Codes are displayed below. (Off course, that is not my API code.)
Yes - I have funded my CHATAI account

Is there any setup required on the CHATGPT Open AI account side beyond creating the API key that could be causing this?
Page URL is https://ardentintegrated.com/ardent-chat-bot/

Please help - Thanks

function generate_chat_response( $last_prompt, $conversation_history ) {

// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'sk-svcacct-tFOWyA8Uc1pz2MCnA0glOxxxxxxxxxxxxxxxxaj03I3vICQnpHGEi3wplKT3BlbkFJO3yj8CiTuOSmoX0SJxP1axhRlInss-EooUfZbtIyxxxxxxxxxxxxxxxxx'; // Replace with your actual API key

// Headers for the OpenAI API
$headers = [
    'Content-Type' => 'application/json',
    'Authorization' => 'Bearer ' . $api_key
];

// Add the last prompt to the conversation history
$conversation_history[] = [
    'role' => 'system',
    'content' => 'Answer questions only related to Audio Video, Home technology, Home Theater, IP Security Cameras,Wired and Wireless networks for Homes, Lutron Shades and Lutron Lighting otherwise, say I dont know'
];

$conversation_history[] = [
    'role' => 'user',
    'content' => $last_prompt
];

// Body for the OpenAI API
$body = [
    'model' => 'gpt-3.5-turbo', // You can change the model if needed
    'messages' => $conversation_history,
    'temperature' => 0.7 // You can adjust this value based on desired creativity
];

// Args for the WordPress HTTP API
$args = [
    'method' => 'POST',
    'headers' => $headers,
    'body' => json_encode($body),
    'timeout' => 120
];

// Send the request
$response = wp_remote_request($api_url, $args);

// Handle the response
if (is_wp_error($response)) {
    return $response->get_error_message();
} else {
    $response_body = wp_remote_retrieve_body($response);
    $data = json_decode($response_body, true);

    if (json_last_error() !== JSON_ERROR_NONE) {
        return [
            'success' => false,
            'message' => 'Invalid JSON in API response',
            'result' => ''
        ];
    } elseif (!isset($data['choices'])) {
        return [
            'success' => false,
            'message' => 'API request failed. Response: ' . $response_body,
            'result' => ''
        ];
    } else {
        $content = $data['choices'][0]['message']['content'];
        return [
            'success' => true,
            'message' => 'Response Generated',
            'result' => $content
        ];
    }
}
}

function generate_dummy_response( $last_prompt, $conversation_history ) {
// Dummy static response
$dummy_response = array(
    'success' => true,
    'message' => 'done',
    'result' => "here is my reply"
);

// Return the dummy response as an associative array
return $dummy_response;
}

function handle_chat_bot_request( WP_REST_Request $request ) {
$last_prompt = $request->get_param('last_prompt');
$conversation_history = $request->get_param('conversation_history');

$response = generate_chat_response($last_prompt, $conversation_history);
return $response;
}

function load_chat_bot_base_configuration(WP_REST_Request $request) {
// You can retrieve user data or other dynamic information here
$user_avatar_url = "https://ardentintegrated.com/wp-content/uploads/2024/11/Ardent-Chat-Guest-Avatar.png"; // Implement this function
$bot_image_url = "https://ardentintegrated.com/wp-content/uploads/2024/11/Ardent-100x100-Bot-Avatar.png"; // Implement this function

$response = array(
'botStatus' => 0,
'StartUpMessage' => "Hi, How are you?",
'fontSize' => '16',
'userAvatarURL' => $user_avatar_url,
'botImageURL' => $bot_image_url,
// Adding the new field
'commonButtons' => array(
    array(
        'buttonText' => 'Sales',
        'buttonPrompt' => 'I have a sales question'
    ),
    array(
        'buttonText' => 'Support',
        'buttonPrompt' => 'I need assitance with my home technology'
    )

)

);

$response = new WP_REST_Response($response, 200);

return $response;
}

add_action( 'rest_api_init', function () {
register_rest_route( 'myapi/v1', '/chat-bot/', array(
   'methods' => 'POST',
   'callback' => 'handle_chat_bot_request',
   'permission_callback' => '__return_true'
) );

register_rest_route('myapi/v1', '/chat-bot-config', array(
    'methods' => 'GET',
    'callback' => 'load_chat_bot_base_configuration',
));
} );

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
        <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
         <script defer src="./script.js"></script>

    <title>Mini Chatbot</title>
</head>


<body>
    <div class="chatbot-container lwh-open-cbot">
        <div class="custom-chatbot__image" onclick="lwhOpenCbotToggleChat()">
            <dotlottie-player src="https://lottie.host/feefeb87-8206-4b50-8696-bda4747b4fdf/uUJIo0ICb6.json"
                background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></dotlottie-player>

        </div>
        <div class="custom-chatbot">

            <div class="chat">
                <div class="feedback-form">
                    <div class="feedback-header">
                        <p>Feedback</p>
                        <p class="feedback__modal-close" onclick="lwhOpenCbotremoveFeedbackModal()"><i class="fa-solid fa-xmark"></i></p>
                    </div>
                    <form onsubmit="lwhOpenCbotsendFeedback(event)">
                        <textarea name="feedback" id="feedback"  rows="4" required></textarea>
                        <button type="submit">Send Feedback</button>
                    </form>
                    
                </div>
                <div class="loading">
                    <p><i class="fa-solid fa-circle-notch fa-spin"></i></p>
                    <p>Wait a moment</p>
                </div>
                <div class="popup">
                    <p>Oops! Something went wrong!</p>
                </div>
                <div class="chat__header">
                    <div>
                        <div class="chat__title"> AI Chatbot
                            
                        </div>
                        <div>
                            <div class="chat__status"><span></span> Offline</div>
                           
                        </div>
                    </div>
                    <div>
                

                        <div class="chat__close-icon" onclick="lwhOpenCbotToggleChat()">
                            <i class="fa-solid fa-xmark"></i>
                        </div>
                    </div>
                </div>

                <div class="chat__messages">
                   


                </div>


                <div class="chat__input-area">
                    <div class="selected-image-container">

                    </div>
                    <form id="messageForm" onsubmit="lwhOpenCbotonFormSubmit(event)">
                        <div>
                            <div class="input">


                                <div>
                                    <input type="text" id="message" name="message" placeholder="Type your message"
                                        autocomplete="off" required>
                                </div>

                            </div>
                            <div>
                                <button type="submit" id="submit-btn"><i class="fa-solid fa-paper-plane"></i></button>
                            </div>
                        </div>
                    </form>

                </div>


            </div>
        </div>
    </div>
</body>

</html>

<style>
.lwh-open-cbot, .lwh-open-cbot :root {
    --chatbot-width: 350px;
    --chatbot-font-family: 'Segoe UI';
    --chatbot-image-position-bottom: 5%;
    --chatbot-image-position-right: 3%;
    --chatbot-position-bottom: 6%;
    --chatbot-position-right: 10%;
    --chatbot-height:60vh;
    --chatbot-border-color: #E4E3E3;
    --chatbot-primary-color: #2B2A66;
    --chatbot-secondary-color: #2c2b8e;
    --chatbot-hover-color: #1e8ece;
    --chatbot-bg-color: #F1F1F1;
    --chatbot-scrollbar-track-color: #f3f3f3;
    --chatbot-scrollbar-thumb-color: #d7d7d7;
    --chatbot-scrollbar-thumb-hover-color: #949494;
    --chatbot-button-disabled-color: grey;
    --chatbot-popup-bg-color: #fff;
    --chatbot-dot-color: grey;
}

.lwh-open-cbot *,
.lwh-open-cbot *::after,
.lwh-open-cbot *::before,
.lwh-open-cbot *:focus {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.lwh-open-cbot *:focus {
    box-shadow: none;
}


.lwh-open-cbot .custom-chatbot {
    width: var(--chatbot-width);
    font-family: var(--chatbot-font-family);
    position: fixed;
    bottom: var(--chatbot-position-bottom);
    right: var(--chatbot-position-right);
    overflow: hidden;
    z-index: 9998;
}

.lwh-open-cbot .custom-chatbot .chat__messages__ai a {
    color: var(--chatbot-primary-color);
    text-decoration: none;
}

.lwh-open-cbot .chat {
    background-color: white;
    position: relative;
    z-index: 9999;
    border: 1.5px solid var(--chatbot-border-color);
    border-radius: 12px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, display 0s linear 0.5s;
}

.lwh-open-cbot .chat.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.lwh-open-cbot .custom-chatbot__image {
    position: fixed;
    right: var(--chatbot-image-position-right);
    bottom: var(--chatbot-image-position-bottom);
    z-index: 9999;
    cursor: pointer;
}

.lwh-open-cbot .custom-chatbot button {
    border: none;
    background: none;
}

.lwh-open-cbot .custom-chatbot button>i {
    color: var(--chatbot-primary-color);
    font-size: 18px;
}

.lwh-open-cbot .custom-chatbot button:hover i {
    color: var(--chatbot-hover-color);
    cursor: pointer;
}

.lwh-open-cbot .custom-chatbot input[type='text'] {
    border: none;
    outline: none;
    padding: 0;
    box-shadow: none !important;
}

.lwh-open-cbot .chat__header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--chatbot-border-color);
    padding: 12px 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__header>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    align-items: end;
    gap: 1rem;
    margin-top: 4px;
}

.lwh-open-cbot .chat__header .chat__new {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px 4px 6px;
    background-color: var(--chatbot-primary-color);
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.lwh-open-cbot .chat__header .chat__new:hover {
    background-color: var(--chatbot-hover-color);
}

.lwh-open-cbot .chat__header>div:nth-child(2) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lwh-open-cbot .chat__export i,
.lwh-open-cbot .chat__close-icon i {
    display: block;
}

.lwh-open-cbot .chat__export i:hover,
.lwh-open-cbot .chat__close-icon i:hover,
.lwh-open-cbot .copy-text i:hover,
.lwh-open-cbot .feedback-btn:hover,
.lwh-open-cbot .feedback__modal-close:hover {
    color: var(--chatbot-hover-color);
    cursor: pointer;
}

.lwh-open-cbot .chat__export {
    font-size: 12px;
    cursor: pointer;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: -1px;
}

.lwh-open-cbot .chat__title {
    font-weight: 500;
    font-size: 18px;
}

.lwh-open-cbot .chat__title span {
    font-size: 12px;
}

.lwh-open-cbot .chat__status {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.lwh-open-cbot .chat__status span {
    background-color: #68D391;
    background-color: #acacac;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 100px;
}

.lwh-open-cbot .chat__close-icon {
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__messages {
    padding: 12px 10px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: var(--chatbot-height);
    overflow-y: auto;
    position: relative;
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-track,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-track {
    background: var(--chatbot-scrollbar-track-color);
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb {
    background: var(--chatbot-scrollbar-thumb-color);
    border-radius: 100px;
}

.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb:hover,
.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb:hover {
    background: var(--chatbot-scrollbar-thumb-hover-color);
}

.lwh-open-cbot .chat__messages__user,
.lwh-open-cbot .chat__messages__ai {
    display: flex;
    gap: 6px;
    flex-direction: column;
    width: calc(100% - 38px);
}

.lwh-open-cbot .chat__messages__user {
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__user>div {
    align-items: end;
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__ai>div,
.lwh-open-cbot .chat__messages__user>div {
    display: flex;
    gap: 0.5rem;
}

.lwh-open-cbot .chat__messages__ai p {
    background-color: var(--chatbot-bg-color);
    padding: 6px 12px;
    border-radius: 0px 8px 8px 8px;
    width: -moz-fit-content;
    width: fit-content;
    align-self: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    padding-right: 20px;
}

.lwh-open-cbot .chat__messages__ai .code-snippet {
    background-color: rgb(27, 27, 27);
    border-radius: 8px;
}

.lwh-open-cbot .chat__messages__ai pre {
    display: flex;
    overflow: hidden;
}

.lwh-open-cbot .chat__messages__ai code {
    display: block;
    padding: 10px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    color: #f8f8f8;
    overflow-x: auto;
    word-break: normal;
    word-spacing: normal;
    white-space: pre;
    align-self: flex-start;
    text-align: left;
}

.lwh-open-cbot .snippet-header {
    background: rgb(164, 164, 164);
    border-radius: 8px 8px 0 0;
    padding: 6px 12px;
}

.lwh-open-cbot .snippet-header button {
    cursor: pointer;
    color: rgb(55 55 55);
    font-weight: 600;
}

.lwh-open-cbot .chat__messages__ai img:not(.bot-image) {
    padding: 6px 12px;
    border-radius: 0px 8px 8px 8px;
    align-self: flex-start;
    border: 1.5px solid var(--chatbot-bg-color);
    max-width: 160px;
}

.lwh-open-cbot .chat__messages__user p {
    background-color: var(--chatbot-primary-color);
    padding: 6px 12px;
    border-radius: 8px 8px 0px 8px;
    color: white;
    width: -moz-fit-content;
    width: fit-content;
    align-self: flex-end;
}

.lwh-open-cbot .chat__messages__user img:not(.avatar-image) {
    padding: 6px 12px;
    border-radius: 8px 8px 0px 8px;
    align-self: flex-end;
    border: 1.5px solid var(--chatbot-primary-color);
    max-width: 160px;
}

.lwh-open-cbot .chat__input-area {
    padding: 12px 10px;
    position: relative;
    z-index: 1;
}

.lwh-open-cbot .chat__input-area>form {
    border: 2px solid var(--chatbot-border-color);
    border-radius: 10px;
    padding: 8px 10px;
}

.lwh-open-cbot .chat__input-area>form>div {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lwh-open-cbot .chat__input-area .input {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.lwh-open-cbot .chat__input-area .input label {
    font-size: 12px;
    opacity: 0.7;
}

.lwh-open-cbot .chat__input-area .input label:hover {
    color: var(--chatbot-secondary-color);
    cursor: pointer;
    opacity: 1;
}

.lwh-open-cbot .chat__input-area .input>div:nth-child(1),
.lwh-open-cbot .chat__input-area .input input {
    width: 100%;
    font-size: 16px;
}

.lwh-open-cbot .custom-chatbot button[disabled] i {
    cursor: not-allowed;
    color: var(--chatbot-button-disabled-color);
}

.lwh-open-cbot .popup {
    display: none;
    width: 100%;
    position: absolute;
    background-color: var(--chatbot-popup-bg-color);
    padding: 12px;
    border-radius: 4px;
    top: 1%;
    opacity: 0;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.lwh-open-cbot .popup-animation {
    animation: slideInRight 0.5s ease forwards, fadeOut 2s ease forwards 3s;
}

.lwh-open-cbot .popup p {
    color: var(--chatbot-popup-text-color);
}

.lwh-open-cbot .popup .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes blink {
    50% {
        fill: transparent;
    }
}

.lwh-open-cbot .dot {
    animation: 1s blink infinite;
    fill: var(--chatbot-dot-color);
}

.lwh-open-cbot .dot:nth-child(2) {
    animation-delay: 250ms;
}

.lwh-open-cbot .dot:nth-child(3) {
    animation-delay: 500ms;
}

.lwh-open-cbot .loading {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

.lwh-open-cbot .copy-text {
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    top: 4px;
    right: 4px;
}

.lwh-open-cbot .copy-text span {
    display: none;
    position: absolute;
    background-color: white;
    border-radius: 4px;
    padding: 0px 6px 1px 6px;
    color: black;
    border: 1px solid var(--chatbot-border-color);
}

.lwh-open-cbot .avatar-image {
    display: block;
}

.lwh-open-cbot .startup-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: absolute;
    bottom: 0;
}

.lwh-open-cbot .startup-btns p {
    padding: 6px 10px;
    border: 1px solid var(--chatbot-border-color);
    border-radius: 4px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
}

.lwh-open-cbot .startup-btns p:hover {
    background-color: var(--chatbot-hover-color);
    color: white;
}

.lwh-open-cbot .feedback-form {
    background: white;
    border-radius: 4px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.lwh-open-cbot .feedback-form.show {
    display: flex;
}

.lwh-open-cbot .feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 0.8rem 0;
}

.lwh-open-cbot .feedback-form form {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.lwh-open-cbot .feedback-form textarea {
    width: 100%;
    border: 2px solid var(--chatbot-border-color);
    outline: none;
    padding: 6px;
    font-size: 16px;
}

.lwh-open-cbot .feedback-form button {
    background: var(--chatbot-primary-color);
    padding: 0.7rem;
    color: white;
    cursor: pointer;
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: 400;
}

.lwh-open-cbot .feedback-form button[disabled] {
    cursor: not-allowed;
    background-color: var(--chatbot-button-disabled-color) !important;
}

.lwh-open-cbot .feedback-form button:hover {
    background: var(--chatbot-hover-color);
}

.lwh-open-cbot .footer-area {
    padding: 0 10px 10px 10px;
    font-size: 11px;
    display: none;
}

.lwh-open-cbot .footer-area a {
    text-decoration: none;
}

@media (max-width: 679px) {
    .lwh-open-cbot .custom-chatbot {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        bottom: auto;
    }
}


</style>

<script>

const apiUrl = 'http://ardentintegrated.com/wp-json/myapi/v1/chat-bot/';
const botConfigurationUrl = 'http://ardentintegrated.com/wp-json/myapi/v1/chat-bot-config';
const copyButtons = document.querySelectorAll('.lwh-open-cbot .copy-button');
const button = document.querySelector('.lwh-open-cbot #submit-btn');
let messageInput = document.querySelector('.lwh-open-cbot #message');
let content = [];
let botConfigData = '';
let conversationTranscript = [];

function lwhOpenCbotToggleChat() {
    const chatWindow = document.querySelector(".lwh-open-cbot .chat");
    chatWindow.classList.toggle('show');
    if(chatWindow.classList.contains('show')){
        document.querySelector(".lwh-open-cbot .custom-chatbot").style.zIndex = '9999'
    }
    else{
        document.querySelector(".lwh-open-cbot .custom-chatbot").style.zIndex = '9998'
    }
}

function lwhOpenCbotonFormSubmit(event, userMessage) {
    event.preventDefault();
    if(button.disabled == true) return
    let message;
    if(userMessage == undefined){
        message = messageInput.value.trim();
        document.querySelector(".lwh-open-cbot .startup-btns").style.display = "none";
    }
    else{
        message = userMessage;
    }
    content.push({
        role: 'user',
        message: message,
    });
    let timestamp = new Date().toLocaleString();
    conversationTranscript.push({
        sender: 'user',
        time: timestamp,
        message: message,
    });
    data = "";
    if (message !== '') {
        lwhOpenCbotaddMessage('user', message);
        messageInput.value = '';
        lwhOpenCbotaddTypingAnimation('ai');
        lwhOpenCbotfetchData()
    }
}

function lwhOpenCbotaddMessage(sender, message) {
    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');
    let messageContainer = document.createElement('div');
    messageContainer.classList.add('chat__messages__' + sender);
    let messageDiv = document.createElement('div');
    messageDiv.innerHTML = `
            ${sender === 'ai' ?
            `
                <div>
                <img width="30px" class="bot-image"
                    src="${botConfigData.botImageURL}"
                    alt="bot-image">
                </div>
                `
            : ""
        }
            <p>${message}
             </p>
            ${sender === 'user' ?
            `
                <div>
                <img width="30px" class="avatar-image"
                    src="${botConfigData.userAvatarURL}"
                    alt="avatar">
                </div>
                `
            : ""
        }
        `;
    messageContainer.appendChild(messageDiv);
    chatMessagesContainer.appendChild(messageContainer);
    chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
}

function lwhOpenCbotaddTypingAnimation(sender) {
    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');
    let typingContainer = document.createElement('div');
    typingContainer.classList.add('chat__messages__' + sender);
    let typingAnimationDiv = document.createElement('div');
    typingAnimationDiv.classList.add('typing-animation');
    typingAnimationDiv.innerHTML = `
        <div>
        <img width="30px" class="bot-image"
            src="${botConfigData.botImageURL}"
            alt="">
        </div>
  <p>
  <svg height="16" width="40" style="max-height: 20px;">
    <circle class="dot" cx="10" cy="8" r="3" style="fill:grey;" />
    <circle class="dot" cx="20" cy="8" r="3" style="fill:grey;" />
    <circle class="dot" cx="30" cy="8" r="3" style="fill:grey;" />
  </svg>
</p>
  `;
    typingContainer.appendChild(typingAnimationDiv);
    chatMessagesContainer.appendChild(typingContainer);
    chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
}

function lwhOpenCbotreplaceTypingAnimationWithMessage(sender, message) {
    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');
    let typingContainer = document.querySelector('.lwh-open-cbot .chat__messages__' + sender + ':last-child');
    if (typingContainer) {
        let messageContainer = document.createElement('div');
        messageContainer.classList.add('chat__messages__' + sender);
        messageContainer.classList.add('chat_messages_ai');
        let messageDiv = document.createElement('div');
        messageDiv.innerHTML = `
                ${sender === 'ai' ?
                `
                    <div>
                    <img width="30px" class="bot-image"
                        src="${botConfigData.botImageURL}"
                        alt="bot-image">
                    </div>
                    `
                : ""
            }
                <p class="typing-effect"></p>
                ${sender === 'user' ?
                `
                    <div>
                    <img width="30px" class="avatar-image"
                        src="${botConfigData.userAvatarURL}"
                        alt="avatar">
                    </div>
                    `
                : ""
            }
            `;
        messageContainer.appendChild(messageDiv);
        typingContainer.parentNode.replaceChild(messageContainer, typingContainer);
        const typingEffectElement = messageDiv.querySelector(".typing-effect");
        let index = 0;
        const typingInterval = setInterval(() => {
            typingEffectElement.textContent += message[index];
            index++;
            if (index === message.length) {
                clearInterval(typingInterval);
                typingEffectElement.insertAdjacentHTML('beforeend', `<span title="copy" class="copy-text" onclick="lwhOpenCbotcopyText(event)"><i class="fa-regular fa-copy"></i><span>copied</span></span>`);
                chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
            }
        }, 5);
        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
    }
}

function lwhOpenCbotremoveTypingAnimation() {
    let typingAnimationDivs = document.querySelectorAll('.lwh-open-cbot .typing-animation');
    typingAnimationDivs.forEach(function (typingAnimationDiv) {
        let chatMessagesAiDiv = typingAnimationDiv.closest('.chat__messages__ai');
        if (chatMessagesAiDiv) {
            chatMessagesAiDiv.parentNode.removeChild(chatMessagesAiDiv);
        }
    });
}

copyButtons.forEach(button => {
    button.addEventListener('click', function (event) {
        const codeElement = this.parentNode.nextElementSibling.querySelector('code');
        const codeText = codeElement.textContent;
        navigator.clipboard.writeText(codeText).then(function () {
            event.target.innerText = "Copied";
            setTimeout(() => {
                event.target.innerText = "Copy";
            }, 2000);
        }).catch(function (error) {
            console.error('Error copying code: ', error);
        });
    });
});

function lwhOpenCbotcopyText(event) {
    const paragraph = event.target.closest('p');
    const clone = paragraph.cloneNode(true);
    clone.querySelectorAll('.copy-text').forEach(elem => {
        elem.parentNode.removeChild(elem);
    });
    const textToCopy = clone.textContent.trim();
    navigator.clipboard.writeText(textToCopy)
        .then(() => {
            const copiedSpan = event.target.nextElementSibling;
            copiedSpan.style.display = 'block';
            setTimeout(() => {
                copiedSpan.style.display = 'none';
            }, 2000);
        })
        .catch(error => {
            console.error('Error copying text: ', error);
        });
}

async function lwhOpenCbotfetchData() {
    button.disabled = true;
    try {
        response = await fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "last_prompt": content[content.length - 1].message,
                "conversation_history": content.map(item => ({
                    "role": item.role,
                    "content": item.message
                }))
            })
        });
        if (response.ok) {
            data = await response.json();
            console.log(data, "Data from api");
            button.disabled = false;
            if (!data.success) {
                lwhOpenCbotremoveTypingAnimation()
                lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');
                throw new Error("Something went wrong. Please Try Again!");
            }
        } else {
            lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');
            throw new Error("Request failed. Please try again!");
        }
        content.push({
            role: 'assistant',
            message: data.result,
        });
        let timestamp = new Date().toLocaleString();
        conversationTranscript.push({
            sender: 'bot',
            time: timestamp,
            message: data.result,
        });
        lwhOpenCbotreplaceTypingAnimationWithMessage('ai', data.result);
    } catch (error) {
        lwhOpenCbotremoveTypingAnimation();
        lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');
        console.error('There was a problem with the fetch operation:', error);
        return;
    }
}

async function lwhOpenCbotfetchBotConfiguration() {
    const chatMessagesContainer = document.querySelector(".lwh-open-cbot .chat__messages");
    document.querySelector(".lwh-open-cbot .loading").style.display = 'flex';
    chatMessagesContainer.innerHTML = '';
    let startupBtnsDiv = document.createElement('div');
    startupBtnsDiv.classList.add('startup-btns');
    chatMessagesContainer.appendChild(startupBtnsDiv);
    let botResponse = ''
    try {
        botResponse = await fetch(botConfigurationUrl);
        if (botResponse.ok) {
            botConfigData = await botResponse.json();
            console.log(botConfigData, "Data from api");
            chatMessagesContainer.style.fontSize = `${botConfigData.fontSize}px`;
            let startupBtns=''
            const startupBtnContainer = document.querySelector('.lwh-open-cbot .startup-btns');
            botConfigData.commonButtons.forEach(btn => {
                startupBtns += `<p onclick="lwhOpenCbotonFormSubmit(event, '${btn.buttonPrompt}'); lwhOpenCbothandleStartupBtnClick(event);">${btn.buttonText}</p>`;
            });            
            startupBtnContainer.innerHTML = startupBtns;
            if (botConfigData.botStatus == 1) {
                document.querySelector(".lwh-open-cbot .chat__status").innerHTML = `<span></span> Online`;
                document.querySelector(".lwh-open-cbot .chat__status").querySelector("span").style.background = "#68D391";
            }
           
            document.querySelector(".lwh-open-cbot .loading").style.display = 'none';
            lwhOpenCbotaddMessage('ai', botConfigData.StartUpMessage);
            content.push({
                role: 'assistant',
                message: botConfigData.StartUpMessage,
            });
            let timestamp = new Date().toLocaleString();
            conversationTranscript.push({
                sender: 'bot',
                time: timestamp,
                message: botConfigData.StartUpMessage,
            });
        } else {
            document.querySelector(".lwh-open-cbot .loading").style.display = 'none';
            lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');
            throw new Error("Request failed. Please try again!");
        }
    } catch (error) {
        lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');
        button.disabled = true
        console.error('There was a problem with the fetch operation:', error);
        return;
    }
}

function lwhOpenCbotshowPopup(val, color) {
    button.disabled = false;
    const popup = document.querySelector('.lwh-open-cbot .popup');
    popup.style.display = 'block';
    popup.style.opacity = 1;
    const innerPopup = popup.querySelector('p');
    innerPopup.innerText = val;
    innerPopup.style.color = color;
    popup.classList.add('popup-animation');
    setTimeout(() => {
        popup.classList.remove('popup-animation');
        popup.style.display = 'none';
        popup.style.opacity = 0;
    }, 3000);
}


function lwhOpenCbothandleStartupBtnClick(event){
    const startupBtnContainer = event.target.parentNode;
    startupBtnContainer.style.display = 'none';
}

lwhOpenCbotfetchBotConfiguration();


</script>