AI-Chat on Bubble Frontend

[MarcRychen]

Hi Sid,

I designed and set up the AI chat accoding to joshes vids. For the HTML code to connect with huggingface I inserted the code below generated from ChatGPT3.5.

Issue 1: When testing the chat via bubble prototype, it immediately sends the message or a blank message directly to the chat, it does not wait until i hit the send button. It reacts when clicking anywhere onto the page and because the submited field is empty a error message appears (image 1) Issue 2: I managed to send a message with text and I got a regular reply from Chat (image 2), when i then want to continue and send another text message, it deletes the history (image 3).

Simulator imaging

HTML CODE

[sid027]

@joshlevent can you have a look please?

[joshlevent]

Not sure exactly what could be causing this, the only issue I see is with the line break at the end. Not sure whether that will be consistently interpreted as desired. Try replacing it with an html line break tag instead: <br>

Like this:

const chatInput = document.getElementById('chat_input');
const chatOutput = document.getElementById('chat_output');
const chatSubmit = document.getElementById('chat_submit');
chatSubmit.addEventListener('click', async () => {
    const userMessage = chatInput.value;
    chatInput.value = '';
    appendMessage("User: " + userMessage);
    const data = {
        inputs: {
            past_user_inputs: [""],
            generated_responses: [""],
            text: userMessage
        }
    };
    try {
        const response = await fetch('https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer _MYTOKEN_',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });
        if (response.ok) {
            const responseData = await response.json();
            const botResponse = responseData['generated_text'];
            appendMessage("Bot: " + botResponse);
        } else {
            chatOutput.innerHTML = 'Error: Unable to get a response from the API';
        }
    } catch (error) {
        chatOutput.innerHTML = 'An error occurred while sending the request';
        console.error(error);
    }
});

function appendMessage(message) {
    chatOutput.innerHTML += message + '<br>';
} 

I deleted the first two variables since you were not using them.

Here is my code for comparison:

document.getElementById('chat_submit').addEventListener('click', async function () {
    const token = _MYTOKEN_;
    const endpoint = 'https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill';

    const chatInput = document.getElementById('chat_input').value;
    const chatOutputElement = document.getElementById('chat_output');

    // Display user message immediately
    chatOutputElement.innerHTML += '<p>User: ' + chatInput + '</p>';
    document.getElementById('chat_input').value = ''; // Clear input

    const data = {
        inputs: {
            past_user_inputs: [""],
            generated_responses: [""],
            text: chatInput
        }
    };

    try {
        const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error(`API request failed with status ${response.status}`);
        }

        const responseData = await response.json();
        const chatBotResponse = responseData.generated_text;

        // Display bot response with "Bot:" prefix
        chatOutputElement.innerHTML += '<p>Bot: ' + chatBotResponse + '</p>';
    } catch (error) {
        console.error('Error:', error);
    }
});

[joshlevent]

These two lines would still need to be changed to have a proper back and forth with the AI (otherwise it will not remember your, or it’s own previous messages).

            past_user_inputs: [""],
            generated_responses: ["”],