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
Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.
Bot