[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.

[Husein]

I sent you the codes by email, make sure to try them out and if you face any problems; ask here.

[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 for the RAG bot on wordpress, you can check the video here:

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

• This reply was modified 2 months ago by  Hasan.

[Gerhard Liebenberg]

Great, thank you Hasan.

[Hasan]

🙏

[Gerhard Liebenberg]

Hi Hasan, I trust you are well.

I am struggling with RelevanceAi.

In one case, I literally copied the question from the csv data file, but the tool said that it could not find an answer.

In another case, I removed a question from the csv file, but the tool still gave me the answer; and it also included unrelated answers from other records in the file.
I can’t use this in a production application.

What other options have you explored to query our RAG data?

[Hasan]

RelevanceAI is a good tool, are you sure you synced the records after updating, there is a button I think in the corner to handle this.

yeah there are several options, depending on what you want, we can find something that is suitable for you.

would you like a zero-code approach for example?

Only WordPress? or for any website?

[Gerhard Liebenberg]

Hi Hasan. For any website preferably, WordPress included.

I am a developer, so I don’t require no-code. I would actually prefer to have a bit more control over what the code is doing.

[Gerhard Liebenberg]

I synced the data. Here is the data and output.
Why would the system say that we offer courses if it is not specified in the data? This would result in people getting wrong answers.

[Hasan]

Just to make things clear, in RAG, it is not only the database of Q&A that decides the answers, it is the LLM model capabilities + data + prompts.
and if you want to run RAG in production, it is not enough to connect a bunch of questions to an LLMM, you will need another later of verification if the answers are critical for you.

anyway, coming back to RelevanceAI, try playing with the prompt, and see if the results changes, testing is crucial when setting up AI systems.

and if you want full control over your system (which I prefer too 😅)

maybe you should think about building this using Langchain Libraries, and maybe taking a look at guardrails may help you too if you want to create something stable and production ready.

I don’t know how much critical your business is, and how much you want the answers to be accurate, maybe sharing more details will help me more point you in the right direction.

[Gerhard Liebenberg]

Okay thank you Hasan. I will have a look at those.

[Hasan]

🙏