// App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // 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. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * 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() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * 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) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const [bpiData, setBpiData] = useState(null); const [memeUrl, setMemeUrl] = useState(''); const [currentSearchTerm, setCurrentSearchTerm] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [lastUpdate, setLastUpdate] = useState(new Date()); const fetchTenorMeme = async () => { try { const searchTerms = [ 'pepe rocket moon', 'pepe excited happy', 'pepe to the moon', 'rare pepe happy', 'pepe celebration', 'pepe victory dance', 'pepe lets go', 'hopium', ]; const randomTerm = searchTerms[Math.floor(Math.random() * searchTerms.length)]; setCurrentSearchTerm(randomTerm); const response = await fetch( `https://tenor.googleapis.com/v2/search?q=${randomTerm}&key=AIzaSyAyimkuYQYF_FXVALexPuGQctUWRURdCYQ&client_key=my_test_app&limit=20` ); const data = await response.json(); if (data.results && data.results.length > 0) { // Take only the top most relevant results to ensure quality const topResults = data.results.slice(0, 5); // Use the first (most relevant) result const selectedResult = topResults[0]; const memeUrl = selectedResult.media_formats.gif.url; setMemeUrl(memeUrl); } } catch (err) { console.error('Failed to fetch from Tenor:', err); } }; const fetchBPIData = async () => { try { const response = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json'); const data = await response.json(); setBpiData(data.bpi.USD); setLastUpdate(new Date()); // Fetch new coping meme if price decreased if (bpiData && data.bpi.USD.rate_float < bpiData.rate_float) { fetchTenorMeme(); } } catch (err) { setError('Failed to fetch BPI data'); } }; useEffect(() => { const fetchData = async () => { setLoading(true); try { await fetchBPIData(); } catch (error) { console.error('BPI fetch failed:', error); } fetchTenorMeme(); // Fetch initial meme setLoading(false); }; fetchData(); const interval = setInterval(fetchBPIData, 60000); // Update BPI every minute return () => clearInterval(interval); }, []); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Set up simple background animation const particles = []; const particleCount = 35; // Slightly increased for better density // Create canvas for emoji texture const createEmojiTexture = (emoji) => { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const context = canvas.getContext('2d'); context.font = '24px Arial'; context.fillStyle = '#ffd700'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(emoji, canvas.width/2, canvas.height/2); const texture = new THREE.CanvasTexture(canvas); return texture; }; // Array of crypto/money emojis const emojis = ['🚀', '⭐', '✨', '🌟', '🌠', '🎯']; for (let i = 0; i < particleCount; i++) { const emoji = emojis[Math.floor(Math.random() * emojis.length)]; const texture = createEmojiTexture(emoji); const particle = new THREE.Sprite( new THREE.SpriteMaterial({ map: texture, transparent: true, opacity: 0.7 }) ); particle.scale.set(0.3, 0.3, 0.3); // Reduced size particle.position.x = (Math.random() - 0.5) * 10; // Centered around origin particle.position.y = Math.random() * 15; // Start higher up particle.position.z = (Math.random() - 0.5) * 3; // Balanced depth particles.push(particle); scene.add(particle); } camera.position.z = 8; // Handle window resize const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); // Animation const animate = () => { requestAnimationFrame(animate); particles.forEach(particle => { particle.position.y -= 0.008; // Slightly slower fall if (particle.position.y < -5) { particle.position.y = 15; // Reset to top particle.position.x = (Math.random() - 0.5) * 10; // Keep centered spread particle.position.z = (Math.random() - 0.5) * 3; // Keep balanced depth } }); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); particles.forEach(particle => { particle.material.map.dispose(); particle.material.dispose(); }); renderer.dispose(); }; }, []); return (

{loading ? (

Loading...

) : error ? (

{error}

) : ( <> {memeUrl && ( Market Mood Meme

)} {bpiData && (

Live Bitcoin Price

${bpiData.rate_float.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Last updated: {lastUpdate.toLocaleTimeString()}

⚡ Auto-updating every minute ⚡

)} )}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();