[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

[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

[Paul Singh]

Hi Husein

My email is [email protected].

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

[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 decoding="async" width="30px" class="bot-image" src="${botConfigData.botImageURL}" alt="bot-image"> </div> ` : "" } <p>${message} </p> ${sender === 'user' ? ` <div> <img decoding="async" 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 decoding="async" 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 decoding="async" width="30px" class="bot-image" src="${botConfigData.botImageURL}" alt="bot-image"> </div> ` : "" } <p class="typing-effect"></p> ${sender === 'user' ? ` <div> <img decoding="async" 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]

I think these are in the description of the video:

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

Backend 👉 https://tinyurl.com/yrvchzsn

tinyurl.com

YouTube

YouTube

[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