[Hasan]

Hi Paul, can you please share more details about the problem and which video you are referring to?

[Paul Singh]

So I was trying out the chatbot with the ability to add AI tomato the chatbot mire robust. Then I saw your RAG chatbot which I was going to try but got a little confused which would actually work best for me. So the current problem is as follows.

I added the code snippets and tries to load it to just a new page to test things out and here is what I get.

Front-end.png 579 KB Image File - Click to view

Options

• Copy Download Link

Backend.png 403 KB Image File - Click to view

Options

• Copy Download Link

[Husein]

The first code snippet is a javascript code so make sure to write <script> on the first line before everything and </script> on the last line after everything.

[Paul Singh]

Thank you for the input. I think the problem could be a bit bigger than I initially though but determined to figure this out. The first thing I did was try and test the bot out and noticed it was offline, so I changed line 93 to 1 to have the bot active but it still has not activated so I cannot test if it is actually working before I create the snippets.

I have gone ahead to see if by adding the snippets if they work on my site but noticed that the integration worked correctly but the bot is not online.

Hasan do you know what I could have dont incorrectly?

I guess once I get this sorted I will see how I can integrate RAG or ChatGPT to answer potential questions.

Line-98-Changed-to-1.png 89 KB Image File - Click to view

Options

• Copy Download Link

Screenshot-2024-12-27-at-16.37.39.png 370 KB Image File - Click to view

Options

• Copy Download Link

[Husein]

Did you edit everything in your code as Hasan mentioned in the tutorial like putting your own OpenAI API key, your site URL in the javascript variables, activated the PHP snippets when updating them, and so on?

[Paul Singh]

Hi Husein,

I am a newbie but Im pretty sure I got all of the code in correctly. I added the code snippet from the config.php file and made sure I selected php.

I then added the other three files and made sure I added <script> and </script> when adding the script file and <style> and </style> to the style file.

<font face=”inherit”>I also </font>changed<font face=”inherit”> the ‘botstatus’ to 1 to </font>activate<font face=”inherit”> but for some reason the bot is not </font>surfing<font face=”inherit”> active nor do the buttons populate at the bottom of the chat for quick reference. </font>

<font face=”inherit”>Obviously I am doing something wrong. lol </font>

Screen-Recording-2024-12-28-at-8.23.33 PM.mov 12 MB Quicktime - Click to view

Options

• Copy Download Link

Screenshot-2024-12-28-at-8.24.11 PM.png 210 KB Image File - Click to view

Options

• Copy Download Link

[Husein]

Please dont share your API keys like this, people would use them and ud pay for every call, so make sure to deactivate this key and generate a new one.
Anyways attach all your codes so that i can test them from my side and see whats wrong.

[Paul Singh]

Hi Husein,

Attached are the codes I have loaded for the front end. I hope this is what you were asking for.

script.js 12 KB JavaScript - Click to view

Options

• Copy Download Link

const apiUrl = 'https://www.paulsawhney.ca/wp-json/myapi/v1/chat-bot/'; const botConfigurationUrl = 'https://www.paulsawhney.ca/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> </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"><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 f...

Expand

This file was truncated for preview. Please download to view the full file.

[Paul Singh]

Hi Husein

I received a post with front and back end codes but cannot see where is has been uploaded for me to download.

[Husein]

I uploaded them but they didnt open correctly, i don’t know why so i deleted it.

Please attach your email so that i can send them by email.

[Paul Singh]

Hi Husein

My email is pssawhney@yahoo.com.

[Gerhard Liebenberg]

Hi Guys, I am also looking for the RAG code that was said to be included in a newsletter (according to this article: https://learnwithhasan.com/blog/free-ai-chatbot-on-wordpress/)

learnwithhasan.com

How To Create a Free AI Chatbot on WordPress From Scratch!

In this post, I will show you how to create a Free AI Chatbot on WordPress without using third-party services or chatbot plugins.

[Paul Singh]

I think these are in the description of the video:

UI 👉https://tinyurl.com/25xpyvj5

Backend 👉 https://tinyurl.com/yrvchzsn

tinyurl.com

YouTube

YouTube

[Husein]

Hasan still didnt publish yet publish the RAG integrated chatbot guide, when he does so it will be via newsletter so make sure to stay updated on the upcoming newsletters.

[Hasan]

I created a new project that uses no code tools as backend foe the RAG bot on wordpress, you can check the video here:

https://youtu.be/jKXbm1zN4wk?si=7yBSVq1dSwzuK0Ai