got a 404 error with the folowing code. Advise? or if you have ready code for custom asstant or GPT, please also share. I am new to this. Thanks.
<?php
/*
Plugin Name: Custom Assistant Plugin
Description: A plugin to integrate the customized assistant with your WordPress site.
Version: 1.2
Author: Your Name
*/
function custom_assistant_shortcode() {
ob_start();
?>
<div id="custom-assistant-container">
<div id="assistant-chat-box">
<div id="assistant-messages"></div>
</div>
<input type="text" id="assistant-input" placeholder="Type your message..." />
<button id="assistant-send">Send</button>
</div>
<script>
(function() {
var apiKey = 'sk-proj-';
var assistantId = 'asst_UORg3Wtcx2eyA42DYvzbiBt6';
var projectId = 'proj_07QmEs2VCe0Y0cNIRf7tfjmL';
var organizationId = 'org-gDDGigMURpY91HrlbkI3OTOs';
var assistantContainer = document.getElementById('custom-assistant-container');
var messagesContainer = document.getElementById('assistant-messages');
var inputField = document.getElementById('assistant-input');
var sendButton = document.getElementById('assistant-send');
// Function to initialize the assistant
function initializeAssistant() {
messagesContainer.innerHTML = '<p>Custom Assistant is ready!</p>';
}
// Function to send user message and receive assistant response
function sendMessage() {
var userMessage = inputField.value;
if (userMessage.trim() === '') return;
// Display user message
var userMessageElem = document.createElement('div');
userMessageElem.className = 'user-message';
userMessageElem.textContent = userMessage;
messagesContainer.appendChild(userMessageElem);
// Clear the input field
inputField.value = '';
// Send the user message to the assistant
fetch('https://api.openai.com/v1/assistants/' + assistantId + '/interactions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey,
'OpenAI-Beta': 'assistants=v2'
},
body: JSON.stringify({
message: userMessage,
project_id: projectId,
organization_id: organizationId
})
})
.then(response => {
console.log('Response status:', response.status);
if (!response.ok) {
return response.json().then(err => { throw new Error(err.message || 'Unknown error'); });
}
return response.json();
})
.then(data => {
console.log('Response data:', data);
// Display assistant response
var assistantMessageElem = document.createElement('div');
assistantMessageElem.className = 'assistant-message';
assistantMessageElem.textContent = data.response; // Adjust based on your API response format
messagesContainer.appendChild(assistantMessageElem);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
})
.catch(error => {
console.error('Error communicating with assistant:', error);
var errorMessageElem = document.createElement('div');
errorMessageElem.className = 'error-message';
errorMessageElem.textContent = 'Error communicating with assistant. Please try again later. (' + error.message + ')';
messagesContainer.appendChild(errorMessageElem);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
}
// Initialize the assistant when the page loads
document.addEventListener('DOMContentLoaded', initializeAssistant);
// Send message on button click
sendButton.addEventListener('click', sendMessage);
// Send message on Enter key press
inputField.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
sendMessage();
}
});
})();
</script>
<style>
#custom-assistant-container {
border: 1px solid #ccc;
padding: 10px;
max-width: 500px;
margin: 0 auto;
}
#assistant-chat-box {
border: 1px solid #ddd;
padding: 10px;
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
}
#assistant-messages {
display: flex;
flex-direction: column;
}
.user-message {
align-self: flex-end;
background-color: #e1ffc7;
padding: 5px;
border-radius: 5px;
margin: 5px 0;
}
.assistant-message {
align-self: flex-start;
background-color: #f1f1f1;
padding: 5px;
border-radius: 5px;
margin: 5px 0;
}
.error-message {
color: red;
align-self: center;
padding: 5px;
margin: 5px 0;
}
#assistant-input {
width: calc(100% - 60px);
padding: 5px;
margin-right: 10px;
}
#assistant-send {
padding: 5px 10px;
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('custom_assistant', 'custom_assistant_shortcode');