// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // 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('classify'). // - 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 Zen AI, a calm and mindful artificial intelligence focused on helping users find balance, peace, and clarity in their lives. You speak with gentle wisdom, offering thoughtful insights while maintaining a serene and compassionate presence. Your responses are concise yet meaningful, drawing from principles of mindfulness, meditation, and emotional well-being. `; /** * 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('classify'); // 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 [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(''); const [isLoading, setIsLoading] = useState(false); const [zenAi] = useState(() => new ChatAIClass()); const messagesEndRef = useRef(null); const [menuOpen, setMenuOpen] = useState(false); const [showSettings, setShowSettings] = useState(false); const [settings, setSettings] = useState({ darkMode: false, fontSize: 'medium', codeMode: false, }); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // Handle window resizing const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); // Update camera position to maintain cube visibility camera.position.z = 5; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Create a simple gradient background effect const planeGeometry = new THREE.PlaneGeometry(2, 2); const planeMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } `, fragmentShader: ` uniform float time; varying vec2 vUv; void main() { vec3 color1 = vec3(0.05, 0.1, 0.15); // Deep blue vec3 color2 = vec3(0.2, 0.3, 0.4); // Medium blue vec3 color3 = vec3(0.3, 0.4, 0.5); // Light blue float t = time * 0.0005; float wave1 = sin(vUv.y * 3.14 + t) * 0.5 + 0.5; float wave2 = sin(vUv.x * 6.28 + t * 1.2) * 0.5 + 0.5; vec3 color = mix(color1, color2, wave1); color = mix(color, color3, wave2 * 0.5); float vignette = 1.0 - length(vUv - 0.5) * 0.7; color *= vignette; gl_FragColor = vec4(color, 0.95); } `, transparent: true }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); scene.add(plane); // Animation const animate = () => { requestAnimationFrame(animate); planeMaterial.uniforms.time.value = performance.now(); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); planeGeometry.dispose(); planeMaterial.dispose(); renderer.dispose(); }; }, []); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleSubmit = async () => { if (!inputValue.trim() || isLoading) return; const userMessage = inputValue.trim(); if (settings.codeMode) { setMessages(prev => [...prev, { type: 'code', content: userMessage }]); // You can add code execution logic here if needed try { const response = await zenAi.getResponse(`Please help me understand and improve this code:\n\n${userMessage}`); setMessages(prev => [...prev, { type: 'ai', content: response }]); } catch (error) { setMessages(prev => [...prev, { type: 'error', content: 'Error analyzing the code.' }]); } } else { setMessages(prev => [...prev, { type: 'user', content: userMessage }]); } setInputValue(''); setIsLoading(true); try { const response = await zenAi.getResponse(userMessage); setMessages(prev => [...prev, { type: 'ai', content: response }]); } catch (error) { console.error('Error getting AI response:', error); setMessages(prev => [...prev, { type: 'error', content: 'I apologize, but I am unable to respond at the moment.' }]); } finally { setIsLoading(false); } }; return (

Zen AI

AI Assistant

{menuOpen && (

)} {showSettings && (

Settings

Dark Mode

Font Size

)}

{messages.map((message, index) => (

{message.content}

))}

{ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }} > setInputValue(e.target.value)} placeholder={isLoading ? "Zen AI is thinking..." : (settings.codeMode ? "Write your code here..." : "Ask Zen AI something...")} disabled={isLoading} style={{ flex: 1, padding: '18px 24px', borderRadius: '24px', border: `2px solid ${settings.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(37, 99, 235, 0.1)'}`, fontSize: settings.fontSize === 'small' ? '14px' : settings.fontSize === 'large' ? '18px' : '16px', backgroundColor: settings.darkMode ? 'rgba(23, 27, 35, 0.98)' : 'rgba(255, 255, 255, 0.98)', color: settings.darkMode ? '#e5e7eb' : '#1f2937', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)', transition: 'all 0.3s ease', outline: 'none', '&:focus': { border: '2px solid #2563eb', boxShadow: '0 4px 20px rgba(37, 99, 235, 0.2)' } }} />

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