Forum in maintenance, we will back soon 🙂
Notifications
Clear all
Search result for: oops something went wrong
Page 1 / 5
Next
| # | Post Title | Result Info | Date | User | Forum |
| RE: Chat Bot in 5 min always offline | 69 Relevance | 2 days ago | J1d3 | AI Agents Development | |
| @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 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> | |||||
| AI Chatbot on WordPress in 5 Minutes doesn't work for me | 69 Relevance | 7 months ago | CLARK DJILO | WordPress | |
| Hello Hassan, I followed your video to install AI chatbot in my web site but at the end I have an error See here for the error in my website pls : I dont see were the error can come from Note : I am very very interesssed by augmenting this code by RAG and Agent. I already know how to implement this with this video where he built a bot combining RAG and Agent: Please can you indicate me how to evolve the current code to reach this point pls ? I want to give to my ai bot a knowledge database with precises informations on my products Hereunder the current backend code: 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-sAkBfL2UTwt8FSxvQkwfT3BlbkFJD7LYpm9r.........'; // 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 montessori pedagogical method, 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://kids.techubshop.com/wp-content/uploads/2024/04/businessman.png"; // Implement this function $bot_image_url = "https://kids.techubshop.com/wp-content/uploads/2024/03/FLAVICONE.png"; // Implement this function $response = array( 'botStatus' => 1, 'StartUpMessage' => "Hi, How are you?", 'fontSize' => '16', 'userAvatarURL' => $user_avatar_url, 'botImageURL' => $bot_image_url, // Adding the new field 'commonButtons' => array( array( 'buttonText' => 'I want your help!!!', 'buttonPrompt' => 'I have a question about your courses' ), array( 'buttonText' => 'I want a Discount', 'buttonPrompt' => 'I want a discount' ) ) ); $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', )); } ); Hereunder the current frontend code: <!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!</h2> </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 = 'https://kids.techubshop.com/wp-json/myapi/v1/chat-bot/'; const botConfigurationUrl = 'https://kids.techubshop.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> | |||||
| RE: error Oops! Something went wrong. Please try again | 27 Relevance | 6 months ago | SSAdvisor | WordPress | |
| @google-raghavendraprabhune try this search | |||||
| error Oops! Something went wrong. Please try again | 27 Relevance | 6 months ago | Raghavendra Prabhune | WordPress | |
| Hi i followed Create Free AI Tools With WordPress and Gemini in 3 Minutes but i am getting error "Oops! something went wrong. Please try again." Attachment : error got gem.png | |||||
| RE: Create Free AI Tools With WordPress and Gemini in 3 Minutes | 21 Relevance | 7 months ago | bibi | Online Tools Development | |
| @admin i replaced the 4 urls in the html and still get the error this is the code <style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f4f4f4;color: #333;line-height: 1.6;padding: 20px;} .container {max-width: 600px;margin: auto;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;} .input-group {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} input[type="text"] {flex-grow: 1;padding: 10px;border: 1px solid #ddd;border-radius: 4px;margin-right: 10px;} button {background: #007bff;color: #fff;border: 0;padding: 10px 20px;border-radius: 4px;cursor: pointer;} button:hover {background: #0056b3;} .result-item {background-color: #f2f2f2;margin-bottom: 10px;padding: 10px;border-radius: 5px;display: flex;align-items: center;justify-content: space-between;} .copy-button {background: #007bff;color: #fff;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;} .copy-button:hover {background: #0056b3;} .image-container {margin-bottom: 20px;} @media screen and (max-width: 768px) {body, .container, .input-group {padding: 10px;}}.hidden {display: none;}</style></head><body><div class="container"><div class="input-group"><input type="text" id="inputInput" placeholder="Enter a input (e.g., Facebook Ads)"><button id="generateButton">Generate Titles</button></div><div id="imageContainer" class="image-container"><img src="http://wordpress-test.local/wp-content/uploads/2024/03/get_started.png" alt="Getting Started" style="max-width: 100%;"></div> <ul id="titleList"></ul> </div><script>document.addEventListener('DOMContentLoaded', function() {const generateButton = document.getElementById('generateButton');const titleList = document.getElementById('titleList');const inputInput = document.getElementById('inputInput');const imageContainer = document.getElementById('imageContainer'); generateButton.addEventListener('click', function() {const input = inputInput.value;if (!input) {alert('Please enter a input.');return;} imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/loading.webp" alt="Loading" style="max-width: 20%;">'; // Replace 'http://wordpress-test.local/wp-content/uploads/2024/03/loading.webp' with your loading GIF // Clear existing titles and show the loading GIFtitleList.innerHTML = '';imageContainer.classList.remove('hidden'); fetch('http://habibart.com/wp-admin/admin-ajax.php', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: 'action=custom_tool_run&input=' + encodeURIComponent(input)}).then(response => response.json()).then(jsonResponse => {titleList.innerHTML = '';if (jsonResponse.success) {const titles = jsonResponse.data[0].titles; titles.forEach(title => {let listItem = document.createElement('li');listItem.className = 'result-item';listItem.innerHTML = `<span>${title}</span> <button class="copy-button" onclick="copyToClipboard('${title}')">Copy</button>`;titleList.appendChild(listItem);});imageContainer.classList.add('hidden'); // Hide the image container} else {console.error('Failed to fetch titles');imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +'<p>Oops! something went wrong. Please try again.</p>'; }}).catch(error => {console.error('Error:', error);imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +'<p>Oops! something went wrong. Please try again.</p>'; });}); window.copyToClipboard = function(text) {var textArea = document.createElement("textarea");textArea.value = text;textArea.style.top = "0";textArea.style.left = "0";textArea.style.position = "fixed";document.body.appendChild(textArea);textArea.focus();textArea.select(); try {var successful = document.execCommand('copy');var msg = successful ? 'successful' : 'unsuccessful';alert('Copying text was ' + msg);} catch (err) {alert('Unable to copy text');console.error('Unable to copy', err);} document.body.removeChild(textArea);}; });</script> | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 6 days ago | Chenatif Mohamed | AI Agents Development | |
| @husein i sorry i didn't mean that but thanks for your help | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 1 week ago | Husein Aboul Hasan | AI Agents Development | |
| @moh6 Please dont attach your code like this, when you wonna attach codes use the "Attach files" button in the editor. Anwyways, I edited the code just enter your API key and it should work. Attachment : gemini-api.txt | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 2 weeks ago | Husein Aboul Hasan | AI Agents Development | |
| @moh6 Can you attach the code you tried so that I can see what's the problem? | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 2 weeks ago | Chenatif Mohamed | AI Agents Development | |
| @husein can you give me the code I traid some but didn't work | |||||
| Implementing Youtube-Title-Generator-WP-UI in my AI tools. | 22 Relevance | 9 months ago | dibyendu | Online Tools Development | |
| @ Hasan sir, I am a big fan of you. I love the way you teach & help everybody. Today I implemented "Youtube-Title-Generator-WP-UI" to my youtube title generator tools but gave some errors(Something went wrong, please try again later!). I shared the code tried. Sir any solution is highly appreciated. <script> document.getElementById('topic').addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); document.getElementById('generate-button').click(); } }); document.getElementById("generate-button").addEventListener("click", function(e){ e.preventDefault(); var generateButton = this; if (generateButton.disabled) return; generateButton.disabled = true; var topic = document.getElementById('topic').value.trim(); if (!topic) { showMessage('Please enter something!'); generateButton.disabled = false; return; } // input prompt here var prompt = ` As an expert YouTuber with 10 Years Experience. your task is to generate 10 YouTube video titles based on the INPUT VIDEO TOPIC and ensure high CTR for my upcoming video. First, use your expertise to develop the first 5 titles, ensuring they are engaging, accurately represent the video content, and abide by YouTube's optimal practices for high CTR. For the remaining five, pick 5 templates that best fit the video's theme from the given list and use them to craft the titles. Templates List: -How To Not (Unwanted Outcome)-(Encouraging Words)!! -The Simple (Task) that (Defeated) EVERYONE Except (Authority Figure) -6 TOP (Objects) to Save You From (Unwanted Event) -(Objects) I Never (Action) (Current Year) -(Activity) Challenge That Will Change Your Life (30 DAYS RESULTS) -12 (Objects) that can (Achieve Goal) -[Achieve Goal] on [Platform] (easy [Activity] for beginners!) -[Time Frame] Killer [Activity] ([Benefit]) -How to (Achieve Goal) in (Time Frame) [by (Current Year)] INPUT VIDEO TOPIC = ${topic} IMPORTANT: The output should be a JSON array only, don't write anything else! `; var loading = document.getElementById('loading'); var result = document.getElementById('result'); var resultC = document.getElementById('result-container'); loading.style.display = 'block'; resultC.style.display = 'none'; var formData = new FormData(); formData.append('action', 'custom_tool_youtube_title_generator'); formData.append('prompt', prompt); fetch('/wp-admin/admin-ajax.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { loading.style.display = 'none'; if (data.data.success) { // Updated this line result.innerHTML = ''; data.data.titles.forEach(title => { var card = document.createElement('div'); card.className = 'card'; var titleText = document.createElement('span'); titleText.className = 'title-text'; titleText.textContent = title; card.appendChild(titleText); var copyIconContainer = document.createElement('div'); copyIconContainer.className = 'copy-icon-container'; var copyIcon = document.createElement('i'); copyIcon.className = 'fas fa-copy tiny-copy-icon'; copyIcon.addEventListener('click', function() { navigator.clipboard.writeText(title); showMessage('Copied to clipboard!'); }); copyIconContainer.appendChild(copyIcon); card.appendChild(copyIconContainer); result.appendChild(card); }); resultC.style.display = 'block'; } else { showMessage("AI bot not available, please try again later!"); } generateButton.disabled = false; }) .catch(error => { showMessage("Something went wrong, please try again later!"); generateButton.disabled = false; }); }); document.getElementById('copy-button').addEventListener('click', function() { var titles = Array.from(document.getElementById('result').getElementsByClassName('card')).map(el => el.textContent).join('\n'); navigator.clipboard.writeText(titles); showMessage('Copied to clipboard!'); }); document.getElementById('message-close').addEventListener('click', function() { document.getElementById('message-box').style.display = 'none'; }); function showMessage(message) { var messageBox = document.getElementById('message-box'); var messageText = document.getElementById('message-text'); messageText.textContent = message; messageBox.style.display = 'flex'; } </script> <?php function custom_tool_youtube_title_generator() { // Get the topic from the AJAX request $prompt = $_POST['prompt']; // OpenAI API URL and key $api_url = 'https://api.openai.com/v1/chat/completions'; $api_key = 'sk-XXX'; // Replace with your actual OpenAI API key // Headers for the OpenAI API $headers = [ 'Content-Type' => 'application/json', 'Authorization' => 'Bearer ' . $api_key ]; // Body for the OpenAI API $body = [ 'model' => 'gpt-3.5-turbo', 'messages' => [['role' => 'user', 'content' => $prompt]], 'temperature' => 0.7 ]; // 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)) { $error_message = $response->get_error_message(); wp_send_json_error("Something went wrong: $error_message"); } else { $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (json_last_error() !== JSON_ERROR_NONE) { wp_send_json_error('Invalid JSON in API response'); } elseif (!isset($data['choices'])) { wp_send_json_error('API request failed. Response: ' . $body); } else { wp_send_json_success($data); } } // Always die in functions echoing AJAX content wp_die(); } add_action('wp_ajax_custom_tool_youtube_title_generator', 'custom_tool_youtube_title_generator'); add_action('wp_ajax_nopriv_custom_tool_youtube_title_generator', 'custom_tool_youtube_title_generator'); ?> | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 2 weeks ago | Husein Aboul Hasan | AI Agents Development | |
| @moh6 Yes you can, you'll need to add your gemini API key instead of the openai one, and change the code that calls for openai's llm with a code that code that calls for gemini's llm. | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 2 weeks ago | Chenatif Mohamed | AI Agents Development | |
| @husein can i do gemini api instaed of openai how i do it | |||||
| RE: Create Free AI Tools With WordPress and Gemini in 3 Minutes is not working for me | 21 Relevance | 2 months ago | Deborah Pretty | WordPress | |
| Hi, Huseim , I think you tested my code for the header generator, you stated it worked. So, the UI must be the problem. I'm creating a headline generator:Thanks for your help! Here is the UI code: <style>body {<br />font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br />background-color: #f4f4f4;<br />color: #333;<br />line-height: 1.6;<br />padding: 20px;<br />}</p><p> .container {<br />max-width: 600px;<br />margin: auto;<br />background: #fff;<br />padding: 20px;<br />border-radius: 8px;<br />box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);<br />text-align: center;<br />}</p><p> .input-group {<br />display: flex;<br />align-items: center;<br />justify-content: space-between;<br />margin-bottom: 20px;<br />}</p><p> input[type="text"] {<br />flex-grow: 1;<br />padding: 10px;<br />border: 1px solid #ddd;<br />border-radius: 4px;<br />margin-right: 10px;<br />}</p><p> button {<br />background: #007bff;<br />color: #fff;<br />border: 0;<br />padding: 10px 20px;<br />border-radius: 4px;<br />cursor: pointer;<br />}</p><p> button:hover {<br />background: #0056b3;<br />}</p><p> .result-item {<br />background-color: #f2f2f2;<br />margin-bottom: 10px;<br />padding: 10px;<br />border-radius: 5px;<br />display: flex;<br />align-items: center;<br />justify-content: space-between;<br />}</p><p> .copy-button {<br />background: #007bff;<br />color: #fff;<br />border: none;<br />padding: 5px 10px;<br />border-radius: 4px;<br />cursor: pointer;<br />}</p><p> .copy-button:hover {<br />background: #0056b3;<br />}</p><p> .image-container {<br />margin-bottom: 20px;<br />}</p><p> @media screen and (max-width: 768px) {<br />body, .container, .input-group {<br />padding: 10px;<br />}<br />}<br />.hidden {<br />display: none;<br />}<br /></style><div class="container"><div class="input-group"><input id="inputInput" type="text" placeholder="Enter a input (e.g., Facebook Ads)" /><button id="generate Button">Generate Titles</button></div><div id="image Container" class="image-container"><img style="max-width: 100%;" src="https://pytalkbiz.com/wp-content/uploads/2024/09/Untitled-design-unscreen-1.gif" alt="Getting Started" /></div><ul id="titleList"></ul></div><script><br />document.addEventListener('DOMContentLoaded', function() {<br />const generateButton = document.getElementById('generateButton');<br />const titleList = document.getElementById('titleList');<br />const inputInput = document.getElementById('inputInput');<br />const imageContainer = document.getElementById('imageContainer');</p><p> generate Button.addEventListener('click', function() {<br />const input = inputInput.value;<br />if (!input) {<br />alert('Please enter a input.');<br />return;<br />}</p><p> image Container.innerHTML = '<img src="https://pytalkbiz.com/wp-content/uploads/2024/09/Untitled-design-unscreen-1.gif" alt="Loading" style="max-width: 20%;">'; // </p><p> // Clear existing titles and show the loading GIF<br />titleList.innerHTML = '';<br />imageContainer.classList.remove('hidden'); </p><p> fetch('https://pytalkbiz.com/wp-admin/admin-ajax.php', {<br />method: 'POST',<br />headers: {<br />'Content-Type': 'application/x-www-form-urlencoded'<br />},<br />body: 'action=custom_tool_run&input=' + encodeURIComponent(input)<br />})<br />.then(response => response.json())<br />.then(jsonResponse => {<br />titleList.innerHTML = '';<br />if (jsonResponse.success) {<br />const titles = jsonResponse.data[0].titles;</p><p> titles.forEach(title => {<br />let listItem = document.createElement('li');<br />listItem.className = 'result-item';<br />listItem.innerHTML = `<span>${title}</span> <button class="copy-button" onclick="copyToClipboard('${title}')">Copy</button>`;<br />titleList.appendChild(listItem);<br />});<br />imageContainer.classList.add('hidden'); // Hide the image container<br />} else {<br />console.error('Failed to fetch titles');<br />imageContainer.innerHTML = '<img src="http://wordpress-test.local/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +<br />'</p><p>Oops! something went wrong. Please try again.</p><p>'; }<br />})<br />.catch(error => {<br />console.error('Error:', error);<br />imageContainer.innerHTML = '<img src="http://wordpress-test.local/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +<br />'</p><p>Oops! something went wrong. Please try again.</p><p>'; </p><p> });<br />});</p><p> window.copyToClipboard = function(text) {<br />var textArea = document.createElement("textarea");<br />textArea.value = text;<br />textArea.style.top = "0";<br />textArea.style.left = "0";<br />textArea.style.position = "fixed";<br />document.body.appendChild(textArea);<br />textArea.focus();<br />textArea.select();</p><p> try {<br />var successful = document.execCommand('copy');<br />var msg = successful ? 'successful' : 'unsuccessful';<br />alert('Copying text was ' + msg);<br />} catch (err) {<br />alert('Unable to copy text');<br />console.error('Unable to copy', err);<br />}</p><p> document.body.removeChild(textArea);<br />};</p><p> });<br /></script> | |||||
| RE: I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 3 weeks ago | Husein Aboul Hasan | AI Agents Development | |
| @emarketniga Here I'll give you the read frontend and backend codes, just edit the backend code where you need to add your own working API key instead of YOUR_OWN_API_KEY i put it, and substitute the 2 links in the javascript with your own website URL, by copying your main website link from the search bar and paste it in the first 2 variables of the backend code where i wrote YOUR_WEBSITE_URL. Attachment : backend.txt Attachment : frontend.txt | |||||
| RE: Create Free AI Tools With WordPress and Gemini in 3 Minutes | 21 Relevance | 7 months ago | bibi | Online Tools Development | |
| <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 600px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } .input-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; } button { background: #007bff; color: #fff; border: 0; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background: #0056b3; } .result-item { background-color: #f2f2f2; margin-bottom: 10px; padding: 10px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; } .copy-button { background: #007bff; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .copy-button:hover { background: #0056b3; } .image-container { margin-bottom: 20px; } @media screen and (max-width: 768px) { body, .container, .input-group { padding: 10px; } } .hidden { display: none; } </style> </head> <body> <div class="container"> <div class="input-group"> <input type="text" id="inputInput" placeholder="Enter a input (e.g., Facebook Ads)"> <button id="generateButton">Generate Titles</button> </div> <div id="imageContainer" class="image-container"> <img src="https://habibart.com/wp-content/uploads/2024/03/get_started.png" alt="Getting Started" style="max-width: 100%;"> </div> <ul id="titleList"></ul> </div> <script> document.addEventListener('DOMContentLoaded', function() { const generateButton = document.getElementById('generateButton'); const titleList = document.getElementById('titleList'); const inputInput = document.getElementById('inputInput'); const imageContainer = document.getElementById('imageContainer'); generateButton.addEventListener('click', function() { const input = inputInput.value; if (!input) { alert('Please enter a input.'); return; } imageContainer.innerHTML = '<img src="https://habibart.com/wp-content/uploads/2024/03/loading.webp" alt="Loading" style="max-width: 20%;">'; // Replace 'https:/habibart.com/uploads/2024/03/loading.webp' with your loading GIF // Clear existing titles and show the loading GIF titleList.innerHTML = ''; imageContainer.classList.remove('hidden'); fetch('https://habibart.com/wp-admin/admin-ajax.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'action=custom_tool_run&input=' + encodeURIComponent(input) }) .then(response => response.json()) .then(jsonResponse => { titleList.innerHTML = ''; if (jsonResponse.success) { const titles = jsonResponse.data[0].titles; titles.forEach(title => { let listItem = document.createElement('li'); listItem.className = 'result-item'; listItem.innerHTML = `<span>${title}</span> <button class="copy-button" onclick="copyToClipboard('${title}')">Copy</button>`; titleList.appendChild(listItem); }); imageContainer.classList.add('hidden'); // Hide the image container } else { console.error('Failed to fetch titles'); imageContainer.innerHTML = '<img src="https://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' + '<p>Oops! something went wrong. Please try again.</p>'; } }) .catch(error => { console.error('Error:', error); imageContainer.innerHTML = '<img src="https://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' + '<p>Oops! something went wrong. Please try again.</p>'; }); }); window.copyToClipboard = function(text) { var textArea = document.createElement("textarea"); textArea.value = text; textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; alert('Copying text was ' + msg); } catch (err) { alert('Unable to copy text'); console.error('Unable to copy', err); } document.body.removeChild(textArea); }; }); </script> | |||||
| I am getting Oops Something went wrong error when i am trying to chat with the bot. can you help me. | 16 Relevance | 3 weeks ago | Emeka Chima | AI Agents Development | |
| i watched and read "How To Create a Free AI Chatbot on WordPress From Scratch" i have tried to replicate it on my test website, but it is showing an error. Please let me know how I should resolve this. i have attached an error screenshot Attachment : Screenshot (642).png Attachment : Screenshot (642).png | |||||
| RE: AI Tools With WordPress doesn't work for me | 21 Relevance | 7 months ago | bibi | WordPress | |
| @husein i replaced the 4 urls in the html and still get the error this is the code <style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f4f4f4;color: #333;line-height: 1.6;padding: 20px;} .container {max-width: 600px;margin: auto;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;} .input-group {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;} input[type="text"] {flex-grow: 1;padding: 10px;border: 1px solid #ddd;border-radius: 4px;margin-right: 10px;} button {background: #007bff;color: #fff;border: 0;padding: 10px 20px;border-radius: 4px;cursor: pointer;} button:hover {background: #0056b3;} .result-item {background-color: #f2f2f2;margin-bottom: 10px;padding: 10px;border-radius: 5px;display: flex;align-items: center;justify-content: space-between;} .copy-button {background: #007bff;color: #fff;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;} .copy-button:hover {background: #0056b3;} .image-container {margin-bottom: 20px;} @media screen and (max-width: 768px) {body, .container, .input-group {padding: 10px;}}.hidden {display: none;}</style></head><body><div class="container"><div class="input-group"><input type="text" id="inputInput" placeholder="Enter a input (e.g., Facebook Ads)"><button id="generateButton">Generate Titles</button></div><div id="imageContainer" class="image-container"><img src="http://wordpress-test.local/wp-content/uploads/2024/03/get_started.png" alt="Getting Started" style="max-width: 100%;"></div> <ul id="titleList"></ul> </div><script>document.addEventListener('DOMContentLoaded', function() {const generateButton = document.getElementById('generateButton');const titleList = document.getElementById('titleList');const inputInput = document.getElementById('inputInput');const imageContainer = document.getElementById('imageContainer'); generateButton.addEventListener('click', function() {const input = inputInput.value;if (!input) {alert('Please enter a input.');return;} imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/loading.webp" alt="Loading" style="max-width: 20%;">'; // Replace 'http://wordpress-test.local/wp-content/uploads/2024/03/loading.webp' with your loading GIF // Clear existing titles and show the loading GIFtitleList.innerHTML = '';imageContainer.classList.remove('hidden'); fetch('http://habibart.com/wp-admin/admin-ajax.php', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: 'action=custom_tool_run&input=' + encodeURIComponent(input)}).then(response => response.json()).then(jsonResponse => {titleList.innerHTML = '';if (jsonResponse.success) {const titles = jsonResponse.data[0].titles; titles.forEach(title => {let listItem = document.createElement('li');listItem.className = 'result-item';listItem.innerHTML = `<span>${title}</span> <button class="copy-button" onclick="copyToClipboard('${title}')">Copy</button>`;titleList.appendChild(listItem);});imageContainer.classList.add('hidden'); // Hide the image container} else {console.error('Failed to fetch titles');imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +'<p>Oops! something went wrong. Please try again.</p>'; }}).catch(error => {console.error('Error:', error);imageContainer.innerHTML = '<img src="http://habibart.com/wp-content/uploads/2024/03/error_image.png" alt="Error" style="max-width: 100%;">' +'<p>Oops! something went wrong. Please try again.</p>'; });}); window.copyToClipboard = function(text) {var textArea = document.createElement("textarea");textArea.value = text;textArea.style.top = "0";textArea.style.left = "0";textArea.style.position = "fixed";document.body.appendChild(textArea);textArea.focus();textArea.select(); try {var successful = document.execCommand('copy');var msg = successful ? 'successful' : 'unsuccessful';alert('Copying text was ' + msg);} catch (err) {alert('Unable to copy text');console.error('Unable to copy', err);} document.body.removeChild(textArea);}; });</script> | |||||
| RE: error Oops! Something went wrong. Please try again | 16 Relevance | 6 months ago | Husein Aboul Hasan | WordPress | |
| @google-raghavendraprabhune Did you edit the links with your website's links. | |||||
| RE: The AI chat Bot Installed keeps having error message "Oops! Something went wrong! " | 16 Relevance | 7 months ago | SSAdvisor | WordPress | |
| @sinisi did you get this resolved? Currently the chatbot is "Offline". | |||||
| RE: The AI chat Bot Installed keeps having error message "Oops! Something went wrong! " | 16 Relevance | 7 months ago | Enzo | WordPress | |
| @husein Thank you. I appreciate this! | |||||
Page 1 / 5
Next
