// App.jsx import React, { useState, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; // App Settings const APP_SETTINGS = { controlVariables: { devMode: true, allowSpeechGeneration: false, generateInitialGreeting: false, // Control whether initial greeting is generated getHardcodedGreeting: false, // Control whether to use hardcoded greeting for testing chatStorage: { clearOnInit: true, // Clear storage when chat manager initializes loadFromMemory: true, // Load existing chat history on initialization saveToMemory: true // Save chat updates to storage } }, api: { urls: { development: 'http://localhost:3000', production: 'https://hey-monika-26737d62f92b.herokuapp.com' }, headers: { 'Content-Type': 'application/json' } }, speechConfig: { characters: { AI_Character_Female: { voiceId: '2bk7ULW9HfwvcIbMWod0', volumeMultiplier: 0.7 }, Monika: { voiceId: 'XiPS9cXxAVbaIWtGDHDh', volumeMultiplier: 0.7 // Adjusted from 1.5 to stay within valid range }, }, defaultVoiceId: '2bk7ULW9HfwvcIbMWod0', // Fallback for undefined characters defaultVolumeMultiplier: 0.7, // Default volume multiplier for undefined characters }, getApiBaseUrl: () => { console.group('🌐 Getting API Base URL'); const isDevMode = APP_SETTINGS.controlVariables.devMode; const baseUrl = isDevMode ? APP_SETTINGS.api.urls.development : APP_SETTINGS.api.urls.production; console.log(`Using ${isDevMode ? 'development' : 'production'} API:`, baseUrl); console.groupEnd(); return baseUrl; }, } // Styles // ChatMessage class definition class ChatMessage { constructor(role, content) { this.id = crypto.randomUUID(); this.role = role; this.content = content; this.createdAt = new Date().toISOString(); } } const styles = ` .character-portrait { width: 100%; height: 100%; background-color: rgba(18, 18, 18, 0.95); border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid rgb(228, 181, 255); } .character-image { width: 100%; height: 100%; object-fit: contain; object-position: center; } .content-container { position: relative; z-index: 2; width: 90vw; max-width: 1200px; height: 85vh; display: grid; grid-template-columns: 60% 40%; gap: 1rem; padding: 1rem; margin: 0 auto; } /* Base font styles */ .font-base { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.5; } .font-sm { font-size: 0.875rem; line-height: 1.25rem; } .font-xs { font-size: 0.75rem; line-height: 1rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .input-wrapper { flex: 1; position: relative; min-height: 46px; display: flex; align-items: flex-end; } .loading-dots { display: inline-block; min-width: 24px; font-weight: bold; color: #666; } .root-container { width: 100vw; height: 100vh; background-color: #000000; display: flex; justify-content: center; align-items: center; color: #000000; position: relative; overflow: hidden; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: url(https://play.rosebud.ai/assets/bg-main.png?Xrrp); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.95; } .chat-container { width: 100%; position: relative; z-index: 2; min-height: 85vh; max-height: 85vh; background-color: rgba(18, 18, 18, 0.95); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; display: flex; flex-direction: column; } .messages-container { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; height: 100%; overflow-y: auto; overflow-x: hidden; flex: 1; } .message { display: flex; flex-direction: column; max-width: 80%; padding: 0.5rem 0; } .message.user { margin-left: auto; } .message.assistant { margin-right: auto; } .message-content { text-align: left; font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.5rem; padding: 0.75rem 1rem; border-radius: 1rem; max-width: 100%; word-wrap: break-word; } .message.assistant .message-content { background-color: rgba(138, 43, 226, 0.1); color: rgb(228, 181, 255); border-top-left-radius: 0; border: 1px solid rgb(228, 181, 255); } .message.user .message-content { background-color: rgb(77, 79, 11); color: white; border-top-right-radius: 0; } .message-time { } .message-form { position: relative; bottom: 0; left: 0; right: 0; background: transparent; padding: 1rem; display: flex; gap: 0.5rem; border-top: none; border-radius: 0 0 10px 10px; min-height: 76px; box-sizing: border-box; } .message-input { width: 100%; padding: 0.75rem; border: 1px solid rgba(200, 200, 200, 0.3); border-radius: 0.5rem; font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.5rem; outline: none; transition: border-color 0.2s; resize: none; height: 46px; min-height: 46px; max-height: 150px; overflow-y: hidden; line-height: 1.4; box-sizing: border-box; margin: 0; background-color: rgb(52, 39, 64); color: white; } .message-input:focus { border: 1px solid rgba(255, 255, 255, 0.8); outline: none; } .send-button { padding: 0 1.5rem; background: rgb(143, 0, 200); color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-family: Arial, sans-serif; font-size: 1rem; font-weight: 600; transition: background-color 0.2s; height: 46px; align-self: flex-end; white-space: nowrap; } .send-button:hover { background: rgb(163, 20, 220); } .send-button:disabled { background: rgb(84, 47, 113); cursor: not-allowed; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); class TextToSpeechService { constructor(baseUrl = APP_SETTINGS.getApiBaseUrl()) { console.group('🎙️ TextToSpeechService Constructor'); console.log('Initializing with API configuration:', { baseUrl, devMode: APP_SETTINGS.controlVariables.devMode }); if (!baseUrl) { console.error('No baseUrl provided'); throw new Error('TextToSpeechService requires a baseUrl'); } this.baseUrl = baseUrl; // Set headers before logging this.headers = APP_SETTINGS.api.headers; // Set default voice ID from app settings this.defaultVoiceId = APP_SETTINGS.speechConfig.defaultVoiceId; console.log('Service initialized with:', { baseUrl: this.baseUrl, headers: this.headers, defaultVoiceId: this.defaultVoiceId }); console.groupEnd(); this.activeAudioUrls = new Set(); } async generateSpeech(text, voiceId = APP_SETTINGS.speechConfig.characters.AI_Character_Female.voiceId) { console.group('TextToSpeech - Direct Generation'); try { if (!APP_SETTINGS.controlVariables.allowSpeechGeneration) { console.log('Speech generation is disabled by settings'); throw new Error('Speech generation is disabled'); } // Enhanced input validation if (!text?.trim()) { console.error('Invalid text input for speech generation:', { receivedText: text, type: typeof text }); throw new Error('Invalid text input'); } console.group('Generating speech'); console.log('Text input:', text.trim()); console.log('Additional info:', { textLength: text.length, voiceId, timestamp: new Date().toISOString() }); console.groupEnd(); const baseUrl = APP_SETTINGS.getApiBaseUrl(); console.log('Making API call to generate speech:', `${baseUrl}/api/generate-speech`); console.group('🎯 API Request Details'); const requestBody = { text, voiceId }; console.log('Request URL:', `${baseUrl}/api/generate-speech`); console.log('Request Headers:', this.headers); console.log('Request Body:', requestBody); console.groupEnd(); const response = await fetch(`${baseUrl}/api/generate-speech`, { method: 'POST', headers: this.headers, body: JSON.stringify(requestBody) }); if (!response.ok) { const errorData = await response.json(); console.error('API Response Error:', { status: response.status, statusText: response.statusText, errorData }); } if (!response.ok) { const errorData = await response.json(); console.group('🚫 API Error Details'); console.log('Response Status:', response.status); console.log('Response Status Text:', response.statusText); console.log('Error Data:', errorData); console.groupEnd(); throw new Error(`API Error (${response.status}): ${JSON.stringify(errorData)}`); } const audioBlob = await response.blob(); if (!audioBlob?.size) { throw new Error('Received empty audio data'); } const audioUrl = URL.createObjectURL(audioBlob); this.activeAudioUrls.add(audioUrl); console.log('Speech generated successfully:', { size: audioBlob.size, type: audioBlob.type, url: audioUrl }); return audioUrl; } catch (error) { console.error('Speech generation failed:', error); throw error; } finally { console.groupEnd(); } } /** * Cleans up an audio URL * @param {string} url - URL to clean up */ cleanupAudioUrl(url) { if (this.activeAudioUrls.has(url)) { URL.revokeObjectURL(url); this.activeAudioUrls.delete(url); console.log('Cleaned up audio URL:', url); } } /** * Cleans up all active audio URLs */ cleanupAllAudioUrls() { console.group('Cleaning up all audio URLs'); this.activeAudioUrls.forEach(url => { URL.revokeObjectURL(url); console.log('Cleaned up:', url); }); this.activeAudioUrls.clear(); console.groupEnd(); } /** * Creates a URL for an audio blob * @param {Blob} audioBlob - The audio blob to create a URL for * @returns {string} - The created URL */ createAudioUrl(audioBlob) { return URL.createObjectURL(audioBlob); } /** * Revokes a previously created audio URL * @param {string} url - The URL to revoke */ revokeAudioUrl(url) { if (url) { URL.revokeObjectURL(url); } } } class LocalStorageManager { constructor() { if (LocalStorageManager.instance) { return LocalStorageManager.instance; } this.chatHistoryKey = 'chatAIState'; LocalStorageManager.instance = this; } isAvailable() { try { localStorage.setItem('test', 'test'); localStorage.removeItem('test'); return true; } catch (e) { return false; } } saveChatState(description, messageHistory) { if (!this.isAvailable()) return false; try { console.group('💾 Saving Chat State to LocalStorage'); const chatState = { characterDescription: description, messageHistory: messageHistory, timestamp: new Date().toISOString() }; console.log('Chat State to Save:', chatState); localStorage.setItem(this.chatHistoryKey, JSON.stringify(chatState)); console.log('Save Successful'); console.groupEnd(); return true; } catch (e) { console.error('Failed to save to localStorage:', e); console.groupEnd(); return false; } } loadChatState() { if (!this.isAvailable()) return null; try { console.group('📂 Loading Chat State from LocalStorage'); const data = localStorage.getItem(this.chatHistoryKey); const chatState = data ? JSON.parse(data) : null; console.log('Loaded Chat State:', chatState); console.groupEnd(); return chatState; } catch (e) { console.error('Failed to load from localStorage:', e); console.groupEnd(); return null; } } clear() { if (!this.isAvailable()) return false; try { localStorage.removeItem(this.chatHistoryKey); return true; } catch (e) { console.error('Failed to clear localStorage:', e); return false; } } saveGameState(state) { return this.save({ gameState: state }); } loadGameState() { const data = this.load(); return data?.gameState || null; } } // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // ////////////////////////////////////////////////////////////// // IMPRORTANT NOTE: // AI_BEHAVIOR_DESCRIPTION defines how the AI should respond. // This should change to match the project. // Example of default_chat_ai.js file contents: // let AI_BEHAVIOR_DESCRIPTION = ` // Hi! I'm here to chat and help you out with any questions you might have. // I'll keep things simple and friendly, and I'll always try to explain things // in a clear, easy-to-understand way. Feel free to ask me about anything! // `; // export default AI_BEHAVIOR_DESCRIPTION; // // So, to change the AI responses, you can: // - add text to AI_BEHAVIOR_DESCRIPTION in CODE tab // - replace text of AI_BEHAVIOR_DESCRIPTION in CODE tab // - replace the file with a new AI_BEHAVIOR_DESCRIPTION // that's in a file uploaded to the ASSETS tab import AI_BEHAVIOR_DESCRIPTION from 'https://play.rosebud.ai/assets/default_chat_ai.js?fkBM' /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { if (ChatAIClass.instance) { return ChatAIClass.instance; } console.group('🤖 ChatAIClass Initialization'); console.log('Creating LocalStorageManager...'); this.storageManager = new LocalStorageManager(); console.log('Creating ChatManager with behavior description...'); this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); console.log('ChatManager created successfully:', !!this.chatManager); // Handle storage clearing if enabled if (APP_SETTINGS.controlVariables.chatStorage.clearOnInit) { console.log('Clearing chat storage on initialization'); this.storageManager.clear(); } // Load saved state if enabled if (APP_SETTINGS.controlVariables.chatStorage.loadFromMemory) { const savedState = this.storageManager.loadChatState(); if (savedState?.messageHistory) { console.log('Restoring chat history:', savedState.messageHistory); savedState.messageHistory.forEach(msg => { this.chatManager.addMessage(msg.role, msg.content); }); } } else { console.log('Chat history loading disabled'); } console.groupEnd(); ChatAIClass.instance = this; } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { console.group('🤔 AI Response Generation Flow'); console.log('Input prompt:', prompt); try { console.log('Step 1: Adding user message to conversation...'); this.chatManager.addMessage('user', prompt); console.log('Step 2: Requesting AI response...'); const response = await this.chatManager.getCharacterResponse('chat'); console.log('Step 3: AI response received:', response); // Add the AI's message to the conversation this.chatManager.addMessage('assistant', response); // Save updated state if enabled if (APP_SETTINGS.controlVariables.chatStorage.saveToMemory) { console.log('Saving chat state to storage'); this.storageManager.saveChatState( this.getCharacterDescription(), this.getChatHistory() ); } return response; } catch (error) { console.error('Error getting AI response:', error); throw error; } finally { console.groupEnd(); } } /** * Gets the current chat history * @returns {Array} Array of chat messages */ getChatHistory() { return this.chatManager.getChatHistory(); } /** * Gets the character description used by the AI * @returns {string} The character description */ getCharacterDescription() { return this.chatManager.characterDescription; } /** * Clears the chat history */ clearChatHistory() { this.chatManager.cleanChatHistory(); // Clear storage when history is cleared this.storageManager.clear(); console.log('Chat history and storage cleared'); } /** * Returns a hardcoded greeting for testing purposes * @returns {Promise} A simple greeting message */ async getHardcodedGreeting() { console.group('🤖 Getting Hardcoded Greeting'); const greeting = "Hello! I'm your AI assistant. This is a hardcoded test message for rendering verification."; // Simulate minimal network delay for realistic testing await new Promise(resolve => setTimeout(resolve, 100)); console.log('Returning hardcoded greeting:', greeting); console.groupEnd(); return greeting; } /** * Adds a message to the chat history * @param {string} role - The role of the message sender ('user' or 'assistant') * @param {string} content - The message content */ addMessage(role, content) { console.group('📝 Adding Message'); try { this.chatManager.addMessage(role, content); // Save after each message addition if enabled if (APP_SETTINGS.controlVariables.chatStorage.saveToMemory) { console.log('Saving updated chat state'); this.storageManager.saveChatState( this.getCharacterDescription(), this.getChatHistory() ); } } catch (error) { console.error('Error adding message:', error); throw error; } finally { console.groupEnd(); } } } const AudioPlayer = ({ audioUrl, autoPlay = false, onEnded = () => { }, audioQueue = [], volumeMultiplier = 1.0 }) => { console.group('🔊 AudioPlayer Component'); const audioRef = useRef(null); const queueRef = useRef(audioQueue); const volumeRef = useRef(volumeMultiplier); console.log('AudioPlayer Props:', { audioUrl, autoPlay, queueLength: audioQueue.length, volumeMultiplier }); const playAudio = useCallback(() => { if (audioRef.current) { console.group('🔊 Audio Playback Attempt'); console.log('Audio element state:', { src: audioRef.current.src, volume: audioRef.current.volume, playing: !audioRef.current.paused, readyState: audioRef.current.readyState }); audioRef.current.play() .then(() => { console.log('Audio playback started successfully'); }) .catch(error => { console.error('Error playing audio:', error); }) .finally(() => { console.groupEnd(); }); } else { console.warn('Audio reference is not available'); } }, []); const playNextInQueue = useCallback(() => { if (queueRef.current.length > 0) { const nextAudio = queueRef.current.shift(); audioRef.current.src = nextAudio; playAudio(); } }, [playAudio]); useEffect(() => { console.group('🎵 Audio Setup Effect'); console.log('Audio URL changed:', audioUrl); console.log('Audio Element State:', { current: audioRef.current, hasSource: audioRef.current?.src, volume: audioRef.current?.volume, readyState: audioRef.current?.readyState }); console.log('AutoPlay setting:', autoPlay); if (audioRef.current) { console.log('Setting up audio element...'); audioRef.current.src = audioUrl; // Clamp volume between 0 and 1 const clampedVolume = Math.min(1, Math.max(0, volumeRef.current)); audioRef.current.volume = clampedVolume; console.log('Audio element configured:', { src: audioRef.current.src, volume: clampedVolume, autoPlay: autoPlay }); if (autoPlay) { console.log('Attempting autoplay...'); playAudio(); } } else { console.warn('Audio reference not available'); } console.groupEnd(); }, [audioUrl, autoPlay, playAudio]); useEffect(() => { console.group('🎵 Audio Event Listeners Setup'); const audio = audioRef.current; if (audio) { console.log('Setting up audio event listeners'); const handleEnded = () => { console.log('Audio playback ended'); onEnded(); playNextInQueue(); }; const handlePlay = () => { console.log('Audio playback started'); }; const handleError = (error) => { console.error('Audio playback error:', error); }; audio.addEventListener('ended', handleEnded); audio.addEventListener('play', handlePlay); audio.addEventListener('error', handleError); return () => { console.log('Cleaning up audio event listeners'); audio.removeEventListener('ended', handleEnded); audio.removeEventListener('play', handlePlay); audio.removeEventListener('error', handleError); }; } else { console.warn('Audio reference not available for event listeners'); } console.groupEnd(); }, [onEnded, playNextInQueue]); return (