I want the responses in the

characterAI.createOrContinueChat(characterId)
characterAI.authenticateAsGuest()

functions to work. but I can’t get it to

*My main.js file: *

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createMainWindow() {
    const mainWindow = new BrowserWindow({
        title: 'CatGPT',
        width: 600,
        height: 800,
        webPreferences: {
            contextIsolation: true, // Disable context isolation
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile(path.join(__dirname, './renderer/index.html'));
}

app.whenReady().then(() => {
    createMainWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createMainWindow()
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

preloader.js file

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    // You can expose security-related functions if needed
});

contextBridge.exposeInMainWorld('appAPI', {
    authenticateAsGuest: () => ipcRenderer.invoke('authenticateAsGuest'),
    createOrContinueChat: (characterId) => ipcRenderer.invoke('createOrContinueChat', characterId),
    sendAndAwaitResponse: (chat, userMessage) => ipcRenderer.invoke('sendAndAwaitResponse', { chat, userMessage }),
});

renderer.js file

`// Access the characterAI object from the preload.js
const { characterAI } = window.electronAPI;


// Get elements by their IDs
const chatContainer = document.getElementById("chat");
const userInput = document.getElementById("user-input");
const submitIcon = document.getElementById("submit-icon");
const chatContent = document.querySelector(".chat-content");
const scrollToBottomButton = document.querySelector("#scroll-to-bottom");

// Variable to track manual scrolling
let manuallyScrolledToBottom = false;

// Function to handle scroll event
chatContent.addEventListener("scroll", function() {
    if (chatContent.scrollTop + chatContent.clientHeight < chatContent.scrollHeight) {
        scrollToBottomButton.style.display = "block";
        manuallyScrolledToBottom = false;
    } else {
        scrollToBottomButton.style.display = manuallyScrolledToBottom ? "none" : "block";
    }
});

// Function to send a message
async function sendMessage() {
    const userMessage = userInput.value.trim();

    if (userMessage !== "") {
        submitIcon.classList.add("disabled");
        submitIcon.removeEventListener("click", sendMessage);
        appendMessage("user-msg", userMessage);
        userInput.value = "";
        const generatingResponseMessage = appendMessage("bot-msg generating-response", "Generating response");
        userInput.focus();

        try {
            const botResponse = await generateChatGPTResponse(userMessage);
            generatingResponseMessage.remove();
            appendMessage("bot-msg", botResponse);
        } catch (error) {
            console.error(error);
            generatingResponseMessage.textContent = "Error generating response";
        }

        submitIcon.classList.remove("disabled");
        submitIcon.addEventListener("click", sendMessage);
        chatContent.scrollTop = chatContent.scrollHeight;
        manuallyScrolledToBottom = false;
        scrollToBottomButton.style.display = "none";
    }
}

// Handle scroll event again after sending a message
chatContent.addEventListener("scroll", function() {
    if (chatContent.scrollTop + chatContent.clientHeight >= chatContent.scrollHeight) {
        manuallyScrolledToBottom = false;
        scrollToBottomButton.style.display = "none";
    } else {
        scrollToBottomButton.style.display = "block";
    }
});

// Trigger sendMessage on submitIcon click
submitIcon.addEventListener("click", sendMessage);

// Handle user pressing Enter key
userInput.addEventListener("keypress", handleKeyPress);

function handleKeyPress(e) {
    if (e.key === "Enter") {
        sendMessage();
    }
}

// Function to append a message to the chat
function appendMessage(className, message) {
    const chatMessage = document.createElement("li");
    chatMessage.className = className;
    chatMessage.textContent = message;
    chatContainer.appendChild(chatMessage);
    checkIfAtBottom();
    return chatMessage;
}

// Function to check if the chat is at the bottom
function checkIfAtBottom() {
    if (chatContent.scrollTop + chatContent.clientHeight >= chatContent.scrollHeight) {
        manuallyScrolledToBottom = false;
        scrollToBottomButton.style.display = "none";
    }
}

// Function to generate a chat response using characterAI
async function generateChatGPTResponse(userMessage) {
    // Authenticating as a guest (use `.authenticateWithToken()` to use an account)
    await characterAI.authenticateAsGuest();

    const characterId = "8_1NyR8w1dOXmI1uWaieQcd147hecbdIK7CeEAIrdJw";
    const chat = await characterAI.createOrContinueChat(characterId);

    const response = await chat.sendAndAwaitResponse(userMessage, true);

    return response.text;
}


// Handle scrollToBottomButton click to scroll to the bottom
scrollToBottomButton.addEventListener("click", function() {
    chatContent.scrollTop = chatContent.scrollHeight;
    manuallyScrolledToBottom = false;
    scrollToBottomButton.style.display = "none";
});

// Check if the chat is at the bottom and hide the scroll button
checkIfAtBottom();

// Auto-hide scrollToBottomButton after 3 seconds
setTimeout(() => {
    scrollToBottomButton.style.display = "none";
}, 3000);

I want the responses in the

characterAI.createOrContinueChat(characterId)
characterAI.authenticateAsGuest()

functions to work. but I can’t get it to

I want it to create an instance of CharacterAI and use the functions