{"id":9881,"date":"2024-08-13T15:04:37","date_gmt":"2024-08-13T15:04:37","guid":{"rendered":"https:\/\/bcos-dz.com\/?page_id=9881"},"modified":"2024-08-13T15:04:38","modified_gmt":"2024-08-13T15:04:38","slug":"test-chat-bot","status":"publish","type":"page","link":"https:\/\/bcos-dz.com\/ar\/test-chat-bot\/","title":{"rendered":"test chat bot"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"style.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.0\/css\/all.min.css\" \/>\n    <script src=\"https:\/\/unpkg.com\/@dotlottie\/player-component@latest\/dist\/dotlottie-player.mjs\" type=\"module\"><\/script>\n    <script defer src=\".\/script.js\"><\/script>\n\n    <title>Mini Chatbot<\/title>\n<\/head>\n\n\n<body data-rsssl=1>\n    <div class=\"chatbot-container lwh-open-cbot\">\n        <div class=\"custom-chatbot__image\" onclick=\"lwhOpenCbotToggleChat()\">\n            <dotlottie-player src=\"https:\/\/lottie.host\/feefeb87-8206-4b50-8696-bda4747b4fdf\/uUJIo0ICb6.json\"\n                background=\"transparent\" speed=\"1\" style=\"width: 80px; height: 80px;\" loop autoplay><\/dotlottie-player>\n\n        <\/div>\n        <div class=\"custom-chatbot\">\n\n            <div class=\"chat\">\n                <div class=\"feedback-form\">\n                    <div class=\"feedback-header\">\n                        <p>Feedback<\/p>\n                        <p class=\"feedback__modal-close\" onclick=\"lwhOpenCbotremoveFeedbackModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/p>\n                    <\/div>\n                    <form onsubmit=\"lwhOpenCbotsendFeedback(event)\">\n                        <textarea name=\"feedback\" id=\"feedback\"  rows=\"4\" required><\/textarea>\n                        <button type=\"submit\">Send Feedback<\/button>\n                    <\/form>\n                    \n                <\/div>\n                <div class=\"loading\">\n                    <p><i class=\"fa-solid fa-circle-notch fa-spin\"><\/i><\/p>\n                    <p>Wait a moment<\/p>\n                <\/div>\n                <div class=\"popup\">\n                    <p>Oops! Something went wrong!<\/h2>\n                <\/div>\n                <div class=\"chat__header\">\n                    <div>\n                        <div class=\"chat__title\"> AI Chatbot\n                            \n                        <\/div>\n                        <div>\n                            <div class=\"chat__status\"><span><\/span> Offline<\/div>\n                           \n                        <\/div>\n                    <\/div>\n                    <div>\n                \n\n                        <div class=\"chat__close-icon\" onclick=\"lwhOpenCbotToggleChat()\">\n                            <i class=\"fa-solid fa-xmark\"><\/i>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"chat__messages\">\n                   \n\n\n                <\/div>\n\n\n                <div class=\"chat__input-area\">\n                    <div class=\"selected-image-container\">\n\n                    <\/div>\n                    <form id=\"messageForm\" onsubmit=\"lwhOpenCbotonFormSubmit(event)\">\n                        <div>\n                            <div class=\"input\">\n\n\n                                <div>\n                                    <input type=\"text\" id=\"message\" name=\"message\" placeholder=\"Type your message\"\n                                        autocomplete=\"off\" required>\n                                <\/div>\n\n                            <\/div>\n                            <div>\n                                <button type=\"submit\" id=\"submit-btn\"><i class=\"fa-solid fa-paper-plane\"><\/i><\/button>\n                            <\/div>\n                        <\/div>\n                    <\/form>\n\n                <\/div>\n\n\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body>\n\n<\/html>\n\n\n\n<style>\n.lwh-open-cbot, .lwh-open-cbot :root {\n    --chatbot-width: 350px;\n    --chatbot-font-family: 'Segoe UI';\n    --chatbot-image-position-bottom: 5%;\n    --chatbot-image-position-right: 3%;\n    --chatbot-position-bottom: 6%;\n    --chatbot-position-right: 10%;\n    --chatbot-height:60vh;\n    --chatbot-border-color: #E4E3E3;\n    --chatbot-primary-color: #2B2A66;\n    --chatbot-secondary-color: #2c2b8e;\n    --chatbot-hover-color: #1e8ece;\n    --chatbot-bg-color: #F1F1F1;\n    --chatbot-scrollbar-track-color: #f3f3f3;\n    --chatbot-scrollbar-thumb-color: #d7d7d7;\n    --chatbot-scrollbar-thumb-hover-color: #949494;\n    --chatbot-button-disabled-color: grey;\n    --chatbot-popup-bg-color: #fff;\n    --chatbot-dot-color: grey;\n}\n\n.lwh-open-cbot *,\n.lwh-open-cbot *::after,\n.lwh-open-cbot *::before,\n.lwh-open-cbot *:focus {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n}\n\n.lwh-open-cbot *:focus {\n    box-shadow: none;\n}\n\n\n.lwh-open-cbot .custom-chatbot {\n    width: var(--chatbot-width);\n    font-family: var(--chatbot-font-family);\n    position: fixed;\n    bottom: var(--chatbot-position-bottom);\n    right: var(--chatbot-position-right);\n    overflow: hidden;\n    z-index: 9998;\n}\n\n.lwh-open-cbot .custom-chatbot .chat__messages__ai a {\n    color: var(--chatbot-primary-color);\n    text-decoration: none;\n}\n\n.lwh-open-cbot .chat {\n    background-color: white;\n    position: relative;\n    z-index: 9999;\n    border: 1.5px solid var(--chatbot-border-color);\n    border-radius: 12px;\n    opacity: 0;\n    transform: translateY(100%);\n    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, display 0s linear 0.5s;\n}\n\n.lwh-open-cbot .chat.show {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0s;\n}\n\n.lwh-open-cbot .custom-chatbot__image {\n    position: fixed;\n    right: var(--chatbot-image-position-right);\n    bottom: var(--chatbot-image-position-bottom);\n    z-index: 9999;\n    cursor: pointer;\n}\n\n.lwh-open-cbot .custom-chatbot button {\n    border: none;\n    background: none;\n}\n\n.lwh-open-cbot .custom-chatbot button>i {\n    color: var(--chatbot-primary-color);\n    font-size: 18px;\n}\n\n.lwh-open-cbot .custom-chatbot button:hover i {\n    color: var(--chatbot-hover-color);\n    cursor: pointer;\n}\n\n.lwh-open-cbot .custom-chatbot input[type='text'] {\n    border: none;\n    outline: none;\n    padding: 0;\n    box-shadow: none !important;\n}\n\n.lwh-open-cbot .chat__header {\n    display: flex;\n    justify-content: space-between;\n    border-bottom: 1.5px solid var(--chatbot-border-color);\n    padding: 12px 10px;\n    align-items: flex-start;\n    position: relative;\n    z-index: 1;\n}\n\n.lwh-open-cbot .chat__header>div:nth-child(1)>div:nth-child(2) {\n    display: flex;\n    align-items: end;\n    gap: 1rem;\n    margin-top: 4px;\n}\n\n.lwh-open-cbot .chat__header .chat__new {\n    font-size: 11px;\n    font-weight: 500;\n    padding: 3px 6px 4px 6px;\n    background-color: var(--chatbot-primary-color);\n    color: white;\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n.lwh-open-cbot .chat__header .chat__new:hover {\n    background-color: var(--chatbot-hover-color);\n}\n\n.lwh-open-cbot .chat__header>div:nth-child(2) {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n}\n\n.lwh-open-cbot .chat__export i,\n.lwh-open-cbot .chat__close-icon i {\n    display: block;\n}\n\n.lwh-open-cbot .chat__export i:hover,\n.lwh-open-cbot .chat__close-icon i:hover,\n.lwh-open-cbot .copy-text i:hover,\n.lwh-open-cbot .feedback-btn:hover,\n.lwh-open-cbot .feedback__modal-close:hover {\n    color: var(--chatbot-hover-color);\n    cursor: pointer;\n}\n\n.lwh-open-cbot .chat__export {\n    font-size: 12px;\n    cursor: pointer;\n    width: -moz-fit-content;\n    width: fit-content;\n    margin-left: -1px;\n}\n\n.lwh-open-cbot .chat__title {\n    font-weight: 500;\n    font-size: 18px;\n}\n\n.lwh-open-cbot .chat__title span {\n    font-size: 12px;\n}\n\n.lwh-open-cbot .chat__status {\n    font-size: 14px;\n    font-weight: 500;\n    color: rgba(0, 0, 0, 0.6);\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    margin-top: 4px;\n}\n\n.lwh-open-cbot .chat__status span {\n    background-color: #68D391;\n    background-color: #acacac;\n    width: 8px;\n    height: 8px;\n    display: block;\n    border-radius: 100px;\n}\n\n.lwh-open-cbot .chat__close-icon {\n    cursor: pointer;\n    position: relative;\n    z-index: 1;\n}\n\n.lwh-open-cbot .chat__messages {\n    padding: 12px 10px 0 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    height: var(--chatbot-height);\n    overflow-y: auto;\n    position: relative;\n}\n\n.lwh-open-cbot .chat__messages::-webkit-scrollbar,\n.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar {\n    width: 3px;\n    height: 5px;\n}\n\n.lwh-open-cbot .chat__messages::-webkit-scrollbar-track,\n.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-track {\n    background: var(--chatbot-scrollbar-track-color);\n}\n\n.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb,\n.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb {\n    background: var(--chatbot-scrollbar-thumb-color);\n    border-radius: 100px;\n}\n\n.lwh-open-cbot .chat__messages::-webkit-scrollbar-thumb:hover,\n.lwh-open-cbot .chat__messages__ai code::-webkit-scrollbar-thumb:hover {\n    background: var(--chatbot-scrollbar-thumb-hover-color);\n}\n\n.lwh-open-cbot .chat__messages__user,\n.lwh-open-cbot .chat__messages__ai {\n    display: flex;\n    gap: 6px;\n    flex-direction: column;\n    width: calc(100% - 38px);\n}\n\n.lwh-open-cbot .chat__messages__user {\n    align-self: flex-end;\n}\n\n.lwh-open-cbot .chat__messages__user>div {\n    align-items: end;\n    align-self: flex-end;\n}\n\n.lwh-open-cbot .chat__messages__ai>div,\n.lwh-open-cbot .chat__messages__user>div {\n    display: flex;\n    gap: 0.5rem;\n}\n\n.lwh-open-cbot .chat__messages__ai p {\n    background-color: var(--chatbot-bg-color);\n    padding: 6px 12px;\n    border-radius: 0px 8px 8px 8px;\n    width: -moz-fit-content;\n    width: fit-content;\n    align-self: flex-start;\n    display: flex;\n    justify-content: space-between;\n    gap: 0.5rem;\n    position: relative;\n    padding-right: 20px;\n}\n\n.lwh-open-cbot .chat__messages__ai .code-snippet {\n    background-color: rgb(27, 27, 27);\n    border-radius: 8px;\n}\n\n.lwh-open-cbot .chat__messages__ai pre {\n    display: flex;\n    overflow: hidden;\n}\n\n.lwh-open-cbot .chat__messages__ai code {\n    display: block;\n    padding: 10px;\n    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n    color: #f8f8f8;\n    overflow-x: auto;\n    word-break: normal;\n    word-spacing: normal;\n    white-space: pre;\n    align-self: flex-start;\n    text-align: left;\n}\n\n.lwh-open-cbot .snippet-header {\n    background: rgb(164, 164, 164);\n    border-radius: 8px 8px 0 0;\n    padding: 6px 12px;\n}\n\n.lwh-open-cbot .snippet-header button {\n    cursor: pointer;\n    color: rgb(55 55 55);\n    font-weight: 600;\n}\n\n.lwh-open-cbot .chat__messages__ai img:not(.bot-image) {\n    padding: 6px 12px;\n    border-radius: 0px 8px 8px 8px;\n    align-self: flex-start;\n    border: 1.5px solid var(--chatbot-bg-color);\n    max-width: 160px;\n}\n\n.lwh-open-cbot .chat__messages__user p {\n    background-color: var(--chatbot-primary-color);\n    padding: 6px 12px;\n    border-radius: 8px 8px 0px 8px;\n    color: white;\n    width: -moz-fit-content;\n    width: fit-content;\n    align-self: flex-end;\n}\n\n.lwh-open-cbot .chat__messages__user img:not(.avatar-image) {\n    padding: 6px 12px;\n    border-radius: 8px 8px 0px 8px;\n    align-self: flex-end;\n    border: 1.5px solid var(--chatbot-primary-color);\n    max-width: 160px;\n}\n\n.lwh-open-cbot .chat__input-area {\n    padding: 12px 10px;\n    position: relative;\n    z-index: 1;\n}\n\n.lwh-open-cbot .chat__input-area>form {\n    border: 2px solid var(--chatbot-border-color);\n    border-radius: 10px;\n    padding: 8px 10px;\n}\n\n.lwh-open-cbot .chat__input-area>form>div {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n}\n\n.lwh-open-cbot .chat__input-area .input {\n    display: flex;\n    gap: 6px;\n    width: 100%;\n    align-items: center;\n}\n\n.lwh-open-cbot .chat__input-area .input label {\n    font-size: 12px;\n    opacity: 0.7;\n}\n\n.lwh-open-cbot .chat__input-area .input label:hover {\n    color: var(--chatbot-secondary-color);\n    cursor: pointer;\n    opacity: 1;\n}\n\n.lwh-open-cbot .chat__input-area .input>div:nth-child(1),\n.lwh-open-cbot .chat__input-area .input input {\n    width: 100%;\n    font-size: 16px;\n}\n\n.lwh-open-cbot .custom-chatbot button[disabled] i {\n    cursor: not-allowed;\n    color: var(--chatbot-button-disabled-color);\n}\n\n.lwh-open-cbot .popup {\n    display: none;\n    width: 100%;\n    position: absolute;\n    background-color: var(--chatbot-popup-bg-color);\n    padding: 12px;\n    border-radius: 4px;\n    top: 1%;\n    opacity: 0;\n    font-weight: 500;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    z-index: 2;\n}\n\n.lwh-open-cbot .popup-animation {\n    animation: slideInRight 0.5s ease forwards, fadeOut 2s ease forwards 3s;\n}\n\n.lwh-open-cbot .popup p {\n    color: var(--chatbot-popup-text-color);\n}\n\n.lwh-open-cbot .popup .close-btn {\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    cursor: pointer;\n}\n\n@keyframes slideUp {\n    from {\n        transform: translateY(100%);\n        opacity: 0;\n    }\n    to {\n        transform: translateY(0);\n        opacity: 1;\n    }\n}\n\n@keyframes slideInRight {\n    from {\n        transform: translateX(100%);\n        opacity: 0;\n    }\n    to {\n        transform: translateX(0);\n        opacity: 1;\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n}\n\n@keyframes blink {\n    50% {\n        fill: transparent;\n    }\n}\n\n.lwh-open-cbot .dot {\n    animation: 1s blink infinite;\n    fill: var(--chatbot-dot-color);\n}\n\n.lwh-open-cbot .dot:nth-child(2) {\n    animation-delay: 250ms;\n}\n\n.lwh-open-cbot .dot:nth-child(3) {\n    animation-delay: 500ms;\n}\n\n.lwh-open-cbot .loading {\n    position: absolute;\n    top: 0;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    font-size: 20px;\n}\n\n.lwh-open-cbot .copy-text {\n    cursor: pointer;\n    font-size: 12px;\n    position: absolute;\n    top: 4px;\n    right: 4px;\n}\n\n.lwh-open-cbot .copy-text span {\n    display: none;\n    position: absolute;\n    background-color: white;\n    border-radius: 4px;\n    padding: 0px 6px 1px 6px;\n    color: black;\n    border: 1px solid var(--chatbot-border-color);\n}\n\n.lwh-open-cbot .avatar-image {\n    display: block;\n}\n\n.lwh-open-cbot .startup-btns {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    position: absolute;\n    bottom: 0;\n}\n\n.lwh-open-cbot .startup-btns p {\n    padding: 6px 10px;\n    border: 1px solid var(--chatbot-border-color);\n    border-radius: 4px;\n    width: -moz-fit-content;\n    width: fit-content;\n    cursor: pointer;\n}\n\n.lwh-open-cbot .startup-btns p:hover {\n    background-color: var(--chatbot-hover-color);\n    color: white;\n}\n\n.lwh-open-cbot .feedback-form {\n    background: white;\n    border-radius: 4px;\n    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);\n    position: absolute;\n    width: 100%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    padding: 0.8rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    display: none;\n}\n\n.lwh-open-cbot .feedback-form.show {\n    display: flex;\n}\n\n.lwh-open-cbot .feedback-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    padding: 0 0 0.8rem 0;\n}\n\n.lwh-open-cbot .feedback-form form {\n    display: flex;\n    flex-direction: column;\n    align-items: baseline;\n}\n\n.lwh-open-cbot .feedback-form textarea {\n    width: 100%;\n    border: 2px solid var(--chatbot-border-color);\n    outline: none;\n    padding: 6px;\n    font-size: 16px;\n}\n\n.lwh-open-cbot .feedback-form button {\n    background: var(--chatbot-primary-color);\n    padding: 0.7rem;\n    color: white;\n    cursor: pointer;\n    margin-top: 0.5rem;\n    font-size: 14px;\n    font-weight: 400;\n}\n\n.lwh-open-cbot .feedback-form button[disabled] {\n    cursor: not-allowed;\n    background-color: var(--chatbot-button-disabled-color) !important;\n}\n\n.lwh-open-cbot .feedback-form button:hover {\n    background: var(--chatbot-hover-color);\n}\n\n.lwh-open-cbot .footer-area {\n    padding: 0 10px 10px 10px;\n    font-size: 11px;\n    display: none;\n}\n\n.lwh-open-cbot .footer-area a {\n    text-decoration: none;\n}\n\n@media (max-width: 679px) {\n    .lwh-open-cbot .custom-chatbot {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        right: auto;\n        bottom: auto;\n    }\n}\n\n<\/style>\n\n\n\n<script>\n\n\n\nconst apiUrl = 'https:\/\/bcos-dz.com\/\/wp-json\/myapi\/v1\/chat-bot\/';\nconst botConfigurationUrl = 'https:\/\/bcos-dz.com\/\/wp-json\/myapi\/v1\/chat-bot-config';\nconst copyButtons = document.querySelectorAll('.lwh-open-cbot .copy-button');\nconst button = document.querySelector('.lwh-open-cbot #submit-btn');\nlet messageInput = document.querySelector('.lwh-open-cbot #message');\nlet content = [];\nlet botConfigData = '';\nlet conversationTranscript = [];\n\nfunction lwhOpenCbotToggleChat() {\n    const chatWindow = document.querySelector(\".lwh-open-cbot .chat\");\n    chatWindow.classList.toggle('show');\n    if(chatWindow.classList.contains('show')){\n        document.querySelector(\".lwh-open-cbot .custom-chatbot\").style.zIndex = '9999'\n    }\n    else{\n        document.querySelector(\".lwh-open-cbot .custom-chatbot\").style.zIndex = '9998'\n    }\n}\n\nfunction lwhOpenCbotonFormSubmit(event, userMessage) {\n    event.preventDefault();\n    if(button.disabled == true) return\n    let message;\n    if(userMessage == undefined){\n        message = messageInput.value.trim();\n        document.querySelector(\".lwh-open-cbot .startup-btns\").style.display = \"none\";\n    }\n    else{\n        message = userMessage;\n    }\n    content.push({\n        role: 'user',\n        message: message,\n    });\n    let timestamp = new Date().toLocaleString();\n    conversationTranscript.push({\n        sender: 'user',\n        time: timestamp,\n        message: message,\n    });\n    data = \"\";\n    if (message !== '') {\n        lwhOpenCbotaddMessage('user', message);\n        messageInput.value = '';\n        lwhOpenCbotaddTypingAnimation('ai');\n        lwhOpenCbotfetchData()\n    }\n}\n\nfunction lwhOpenCbotaddMessage(sender, message) {\n    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');\n    let messageContainer = document.createElement('div');\n    messageContainer.classList.add('chat__messages__' + sender);\n    let messageDiv = document.createElement('div');\n    messageDiv.innerHTML = `\n            ${sender === 'ai' ?\n            `\n                <div>\n                <img decoding=\"async\" width=\"30px\" class=\"bot-image\"\n                    src=\"${botConfigData.botImageURL}\"\n                    alt=\"bot-image\">\n                <\/div>\n                `\n            : \"\"\n        }\n            <p>${message}\n             <\/p>\n            ${sender === 'user' ?\n            `\n                <div>\n                <img decoding=\"async\" width=\"30px\" class=\"avatar-image\"\n                    src=\"${botConfigData.userAvatarURL}\"\n                    alt=\"avatar\">\n                <\/div>\n                `\n            : \"\"\n        }\n        `;\n    messageContainer.appendChild(messageDiv);\n    chatMessagesContainer.appendChild(messageContainer);\n    chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;\n}\n\nfunction lwhOpenCbotaddTypingAnimation(sender) {\n    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');\n    let typingContainer = document.createElement('div');\n    typingContainer.classList.add('chat__messages__' + sender);\n    let typingAnimationDiv = document.createElement('div');\n    typingAnimationDiv.classList.add('typing-animation');\n    typingAnimationDiv.innerHTML = `\n        <div>\n        <img decoding=\"async\" width=\"30px\" class=\"bot-image\"\n            src=\"${botConfigData.botImageURL}\"\n            alt=\"\">\n        <\/div>\n  <p>\n  <svg height=\"16\" width=\"40\" style=\"max-height: 20px;\">\n    <circle class=\"dot\" cx=\"10\" cy=\"8\" r=\"3\" style=\"fill:grey;\" \/>\n    <circle class=\"dot\" cx=\"20\" cy=\"8\" r=\"3\" style=\"fill:grey;\" \/>\n    <circle class=\"dot\" cx=\"30\" cy=\"8\" r=\"3\" style=\"fill:grey;\" \/>\n  <\/svg>\n<\/p>\n  `;\n    typingContainer.appendChild(typingAnimationDiv);\n    chatMessagesContainer.appendChild(typingContainer);\n    chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;\n}\n\nfunction lwhOpenCbotreplaceTypingAnimationWithMessage(sender, message) {\n    let chatMessagesContainer = document.querySelector('.lwh-open-cbot .chat__messages');\n    let typingContainer = document.querySelector('.lwh-open-cbot .chat__messages__' + sender + ':last-child');\n    if (typingContainer) {\n        let messageContainer = document.createElement('div');\n        messageContainer.classList.add('chat__messages__' + sender);\n        messageContainer.classList.add('chat_messages_ai');\n        let messageDiv = document.createElement('div');\n        messageDiv.innerHTML = `\n                ${sender === 'ai' ?\n                `\n                    <div>\n                    <img decoding=\"async\" width=\"30px\" class=\"bot-image\"\n                        src=\"${botConfigData.botImageURL}\"\n                        alt=\"bot-image\">\n                    <\/div>\n                    `\n                : \"\"\n            }\n                <p class=\"typing-effect\"><\/p>\n                ${sender === 'user' ?\n                `\n                    <div>\n                    <img decoding=\"async\" width=\"30px\" class=\"avatar-image\"\n                        src=\"${botConfigData.userAvatarURL}\"\n                        alt=\"avatar\">\n                    <\/div>\n                    `\n                : \"\"\n            }\n            `;\n        messageContainer.appendChild(messageDiv);\n        typingContainer.parentNode.replaceChild(messageContainer, typingContainer);\n        const typingEffectElement = messageDiv.querySelector(\".typing-effect\");\n        let index = 0;\n        const typingInterval = setInterval(() => {\n            typingEffectElement.textContent += message[index];\n            index++;\n            if (index === message.length) {\n                clearInterval(typingInterval);\n                typingEffectElement.insertAdjacentHTML('beforeend', `<span title=\"copy\" class=\"copy-text\" onclick=\"lwhOpenCbotcopyText(event)\"><i class=\"fa-regular fa-copy\"><\/i><span>copied<\/span><\/span>`);\n                chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;\n            }\n        }, 5);\n        chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;\n    }\n}\n\nfunction lwhOpenCbotremoveTypingAnimation() {\n    let typingAnimationDivs = document.querySelectorAll('.lwh-open-cbot .typing-animation');\n    typingAnimationDivs.forEach(function (typingAnimationDiv) {\n        let chatMessagesAiDiv = typingAnimationDiv.closest('.chat__messages__ai');\n        if (chatMessagesAiDiv) {\n            chatMessagesAiDiv.parentNode.removeChild(chatMessagesAiDiv);\n        }\n    });\n}\n\ncopyButtons.forEach(button => {\n    button.addEventListener('click', function (event) {\n        const codeElement = this.parentNode.nextElementSibling.querySelector('code');\n        const codeText = codeElement.textContent;\n        navigator.clipboard.writeText(codeText).then(function () {\n            event.target.innerText = \"Copied\";\n            setTimeout(() => {\n                event.target.innerText = \"Copy\";\n            }, 2000);\n        }).catch(function (error) {\n            console.error('Error copying code: ', error);\n        });\n    });\n});\n\nfunction lwhOpenCbotcopyText(event) {\n    const paragraph = event.target.closest('p');\n    const clone = paragraph.cloneNode(true);\n    clone.querySelectorAll('.copy-text').forEach(elem => {\n        elem.parentNode.removeChild(elem);\n    });\n    const textToCopy = clone.textContent.trim();\n    navigator.clipboard.writeText(textToCopy)\n        .then(() => {\n            const copiedSpan = event.target.nextElementSibling;\n            copiedSpan.style.display = 'block';\n            setTimeout(() => {\n                copiedSpan.style.display = 'none';\n            }, 2000);\n        })\n        .catch(error => {\n            console.error('Error copying text: ', error);\n        });\n}\n\nasync function lwhOpenCbotfetchData() {\n    button.disabled = true;\n    try {\n        response = await fetch(apiUrl, {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json'\n            },\n            body: JSON.stringify({\n                \"last_prompt\": content[content.length - 1].message,\n                \"conversation_history\": content.map(item => ({\n                    \"role\": item.role,\n                    \"content\": item.message\n                }))\n            })\n        });\n        if (response.ok) {\n            data = await response.json();\n            console.log(data, \"Data from api\");\n            button.disabled = false;\n            if (!data.success) {\n                lwhOpenCbotremoveTypingAnimation()\n                lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');\n                throw new Error(\"Something went wrong. Please Try Again!\");\n            }\n        } else {\n            lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');\n            throw new Error(\"Request failed. Please try again!\");\n        }\n        content.push({\n            role: 'assistant',\n            message: data.result,\n        });\n        let timestamp = new Date().toLocaleString();\n        conversationTranscript.push({\n            sender: 'bot',\n            time: timestamp,\n            message: data.result,\n        });\n        lwhOpenCbotreplaceTypingAnimationWithMessage('ai', data.result);\n    } catch (error) {\n        lwhOpenCbotremoveTypingAnimation();\n        lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');\n        console.error('There was a problem with the fetch operation:', error);\n        return;\n    }\n}\n\nasync function lwhOpenCbotfetchBotConfiguration() {\n    const chatMessagesContainer = document.querySelector(\".lwh-open-cbot .chat__messages\");\n    document.querySelector(\".lwh-open-cbot .loading\").style.display = 'flex';\n    chatMessagesContainer.innerHTML = '';\n    let startupBtnsDiv = document.createElement('div');\n    startupBtnsDiv.classList.add('startup-btns');\n    chatMessagesContainer.appendChild(startupBtnsDiv);\n    let botResponse = ''\n    try {\n        botResponse = await fetch(botConfigurationUrl);\n        if (botResponse.ok) {\n            botConfigData = await botResponse.json();\n            console.log(botConfigData, \"Data from api\");\n            chatMessagesContainer.style.fontSize = `${botConfigData.fontSize}px`;\n            let startupBtns=''\n            const startupBtnContainer = document.querySelector('.lwh-open-cbot .startup-btns');\n            botConfigData.commonButtons.forEach(btn => {\n                startupBtns += `<p onclick=\"lwhOpenCbotonFormSubmit(event, '${btn.buttonPrompt}'); lwhOpenCbothandleStartupBtnClick(event);\">${btn.buttonText}<\/p>`;\n            });            \n            startupBtnContainer.innerHTML = startupBtns;\n            if (botConfigData.botStatus == 1) {\n                document.querySelector(\".lwh-open-cbot .chat__status\").innerHTML = `<span><\/span> Online`;\n                document.querySelector(\".lwh-open-cbot .chat__status\").querySelector(\"span\").style.background = \"#68D391\";\n            }\n           \n            document.querySelector(\".lwh-open-cbot .loading\").style.display = 'none';\n            lwhOpenCbotaddMessage('ai', botConfigData.StartUpMessage);\n            content.push({\n                role: 'assistant',\n                message: botConfigData.StartUpMessage,\n            });\n            let timestamp = new Date().toLocaleString();\n            conversationTranscript.push({\n                sender: 'bot',\n                time: timestamp,\n                message: botConfigData.StartUpMessage,\n            });\n        } else {\n            document.querySelector(\".lwh-open-cbot .loading\").style.display = 'none';\n            lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');\n            throw new Error(\"Request failed. Please try again!\");\n        }\n    } catch (error) {\n        lwhOpenCbotshowPopup('Oops! Something went wrong!', '#991a1a');\n        button.disabled = true\n        console.error('There was a problem with the fetch operation:', error);\n        return;\n    }\n}\n\nfunction lwhOpenCbotshowPopup(val, color) {\n    button.disabled = false;\n    const popup = document.querySelector('.lwh-open-cbot .popup');\n    popup.style.display = 'block';\n    popup.style.opacity = 1;\n    const innerPopup = popup.querySelector('p');\n    innerPopup.innerText = val;\n    innerPopup.style.color = color;\n    popup.classList.add('popup-animation');\n    setTimeout(() => {\n        popup.classList.remove('popup-animation');\n        popup.style.display = 'none';\n        popup.style.opacity = 0;\n    }, 3000);\n}\n\n\nfunction lwhOpenCbothandleStartupBtnClick(event){\n    const startupBtnContainer = event.target.parentNode;\n    startupBtnContainer.style.display = 'none';\n}\n\nlwhOpenCbotfetchBotConfiguration();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Mini Chatbot Feedback Send Feedback Wait a moment Oops! Something went wrong! AI Chatbot Offline<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9881","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Omar kerbouche","author_link":"https:\/\/bcos-dz.com\/ar\/author\/omar-kerbouche\/"},"rttpg_comment":0,"rttpg_category":" <a href=\"https:\/\/bcos-dz.com\/ar\/\" rel=\"tag\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/a>","rttpg_excerpt":"Mini Chatbot Feedback Send Feedback Wait a moment Oops! Something went wrong! AI Chatbot Offline","_links":{"self":[{"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/pages\/9881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/comments?post=9881"}],"version-history":[{"count":1,"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/pages\/9881\/revisions"}],"predecessor-version":[{"id":9882,"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/pages\/9881\/revisions\/9882"}],"wp:attachment":[{"href":"https:\/\/bcos-dz.com\/ar\/wp-json\/wp\/v2\/media?parent=9881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}