Novice user here! I had gpt write the code so I can embed by assistant on my wordpress website. It did a great job of creating the look and feel, features, etc. but I continuously get 404 and 429 errors based on the end point url configuration, so I’m pretty confident that’s where the issue resides, but I’m not 100% sure.
Please help! I know I’m so close…
My code:
**My Assistant** .chat-window { max-width: 100%; width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; background-color: #1e1e1e; /* Dark background for a futuristic look */ color: #ffffff; /* White text color */ } .messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; box-sizing: border-box; background-color: #2a2a2a; /* Slightly lighter background for messages */ color: #ffffff; /* White text color for messages */ } .input-container { display: flex; flex-direction: column; } .input-container > div { display: flex; flex-wrap: nowrap; margin-top: 10px; } input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #333333; /* Dark input background */ color: #FED339; /* Change input text color to match the buttons */ } button { padding: 10px; background-color: #FED339; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; box-sizing: border-box; flex: 1; display: flex; justify-content: center; align-items: center; color: #1e1e1e; /* Button text color */ transition: background-color 0.3s ease; } button.active { background-color: #FF5733; } button:last-child { margin-right: 0; } button:hover { background-color: #ffcc00; /* Hover effect */ } .button-icon { font-size: 18px; } #mic-status { display: none; padding: 10px; background-color: #FED339; border: 1px solid #ccc; border-radius: 4px; text-align: center; margin-bottom: 10px; color: #000; /* Ensure the text inside the mic status is visible */ } .message.user { color: #FED339; /* User message text color */ } .message.bot { color: #FFFFFF; /* Bot response text color */ }Listening...
let recognition;
let listening = false;
let audioEnabled = true;
let utterance;
async function sendMessage() {
const userInput = document.getElementById('userInput').value;
if (userInput.trim() === "") return;
addMessage(userInput, 'user');
document.getElementById('userInput').value = ''; // Clear input field
try {
const response = await fetch('https://api.openai.com/v1/assistants/**Assistant ID**/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer **api key**`
},
body: JSON.stringify({
model: assistantId,
messages: [{ role: "user", content: userInput }]
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.error) {
throw new Error(data.error.message);
}
const botResponse = data.choices[0].message.content.trim();
addMessage(botResponse, 'bot');
if (audioEnabled) {
speak(botResponse);
}
} catch (error) {
console.error('Error sending message:', error);
addMessage(`An error occurred: ${error.message}. Please try again later.`, 'bot');
}
}
function addMessage(message, sender) {
const messagesDiv = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
messageDiv.textContent = message;
messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
function toggleListening() {
const micButton = document.getElementById('mic-button');
if (listening) {
recognition.stop();
document.getElementById('mic-status').style.display = 'none';
micButton.classList.remove('active');
listening = false;
} else {
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onresult = function(event) {
const userInput = event.results[0][0].transcript;
document.getElementById('userInput').value = userInput;
};
recognition.onspeechend = function() {
setTimeout(() => {
if (!listening) return;
recognition.stop();
document.getElementById('mic-status').style.display = 'none';
micButton.classList.remove('active');
sendMessage();
listening = false;
}, 1000);
};
recognition.onerror = function(event) {
document.getElementById('mic-status').style.display = 'none';
micButton.classList.remove('active');
alert('Error occurred in recognition: ' + event.error);
listening = false;
};
recognition.start();
document.getElementById('mic-status').style.display = 'block';
micButton.classList.add('active');
listening = true;
}
}
function toggleAudio() {
audioEnabled = !audioEnabled;
const audioToggle = document.getElementById('audio-toggle');
const stopAudioButton = document.getElementById('stop-audio');
if (audioEnabled) {
audioToggle.classList.add('active');
stopAudioButton.disabled = false;
} else {
audioToggle.classList.remove('active');
stopAudioButton.disabled = true;
stopAudio();
}
}
function speak(text) {
utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
window.speechSynthesis.speak(utterance);
}
function stopAudio() {
if (utterance) {
window.speechSynthesis.cancel();
}
}
function clearChat() {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML = '';
}
function saveChat() {
const messagesDiv = document.getElementById('messages');
const chatHistory = messagesDiv.innerText;
const blob = new Blob([chatHistory], { type: 'text/plain' });
const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(blob);
anchor.download = 'chat_history.txt';
anchor.click();
}
</script>
Here’s the error for the curl test
“error”: {
“message”: “Invalid URL (POST /v1/assistants/asst_63aGL4LF8eKFhguNYWmTcYhx/messages)”,
“type”: “invalid_request_error”,
“param”: null,
“code”: null
}
}%