How do I resolve a Promise that just keeps rendering [object Promise]?

[quaint jetty]

I am building a chatbot that responds based on an initial context, but every prompt is answered by the API [object Promise]. How do I get the function to actually extract the text content from the chat completion.

```
async function getCompletionFromMessages( messages, model = 'gpt-3.5-turbo', temperature = 0 ) {
console.log('clicked');
const options = {
method: 'POST',
headers: {
'Authorization': Bearer ${api_key},
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: model,
messages: messages,
maxTokens: 200,
temperature: temperature
})
}
try {
const completion = await fetch("https://api.openai.com/v1/chat/completions", options)
const data = await response.json();
console.log(data);
return data.choices[0].message.content;
} catch {
console.error(error);
}
};
```

This is the chat completion method I am using to return the bot response, but as I said, it returns [object Promise] for every output. Help needed!

[misty blade]

A promise object basically means that it will be a value but doesn't have one yet. This would imply that you are trying to use the value before the API call can complete, but hopefully someone else can shed some more light.

[quaint jetty]

UPDATE: The function doesn't return [object Promise] anymore. I altered my code to make it return the result of the Promise. However, the problem is now that the Promise is apparently fulfilled but it is undefined. New code:

chat.js

async function getHardResponse(userText) {
    let botHtml = "";

    let botResponse = await getBotResponse(userText);
    // console.log(botResponse)
    botHtml = '<p class="botText"><span>' + botResponse + '</span></p>'
    $('#chatbox').append(botHtml);

    messages.push({ role: 'user', content: userText }, { role: 'assistant', content: botResponse });
    // console.log(messages);

    document.getElementById("chat-bar-bottom").scrollIntoView(true);
}

async function getBotResponse(input) {
    try {
        return await getCompletionFromMessages([...messages, { role: 'user', content: input }])
    } catch (error) {
        console.log(error)
    }

}

function getResponse() {
    let userText = $('#textInput').val();

    if (userText == "") {
        userText = "What is your name?";
    }
    let userHtml = '<p class="userText"><span>' + userText + '</span></p>';
    document.getElementById("textInput").value = "";
    $("#chatbox").append(userHtml);
    document.getElementById("chat-bar-bottom").scrollIntoView(true);

    setTimeout(async () => {
        await getHardResponse(userText);
    }, 1000);
}