// App.jsx import React, { useState, useEffect, useRef } 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 REFLECTION_PROMPTS = [ "What made you smile today?", "What's one thing you learned today?", "What are you grateful for today?", "What was challenging today and how did you handle it?", "What's something kind you did for someone else?", "What's one thing you'd like to improve tomorrow?", "What gave you energy today?", "What drained your energy today?", "What's a small win you had today?", "What's something you're looking forward to?" ]; 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'); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const Journal = ({ onClose }) => { const [entry, setEntry] = useState(''); const [prompt, setPrompt] = useState(''); useEffect(() => { // Get random prompt const randomIndex = Math.floor(Math.random() * REFLECTION_PROMPTS.length); setPrompt(REFLECTION_PROMPTS[randomIndex]); }, []); const handleSubmit = (e) => { e.preventDefault(); // Here you would typically save the entry console.log('Journal Entry:', { prompt, entry }); setEntry(''); onClose(); }; return (

Daily Reflection

{prompt}

setEntry(e.target.value)}
          placeholder="Write your thoughts here..."
          style={{
            width: '100%',
            minHeight: '200px',
            padding: '1rem',
            marginBottom: '1rem',
            border: '1px solid #ddd',
            borderRadius: '5px',
            resize: 'vertical',
            fontSize: '1rem',
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <button
            type="button"
            onClick={onClose}
            style={{
              padding: '0.5rem 1rem',
              backgroundColor: '#fff',
              border: '1px solid #333',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
          >
            Close
          </button>
          <button
            type="submit"
            style={{
              padding: '0.5rem 1rem',
              backgroundColor: '#333',
              color: '#fff',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
          >
            Save Entry
          </button>
        </div>
      </form>
    </div>
  );
};
const App = () => {
  const mountRef = useRef(null);
  const [showJournal, setShowJournal] = useState(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 });
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);
    
    // Create gradient texture
    const gradientCanvas = document.createElement('canvas');
    gradientCanvas.width = 256;
    gradientCanvas.height = 256;
    const ctx = gradientCanvas.getContext('2d');
    
    // Create radial gradient
    const gradient = ctx.createRadialGradient(
      128, 128, 0,
      128, 128, 128
    );
    gradient.addColorStop(0, '#ff7eb3');   // Warm pink
    gradient.addColorStop(0.5, '#ff8e71'); // Coral
    gradient.addColorStop(1, '#ffd700');   // Golden yellow
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 256, 256);
    
    const texture = new THREE.CanvasTexture(gradientCanvas);
    
    // Create sphere with smooth geometry
    const geometry = new THREE.SphereGeometry(2, 64, 64);
    const material = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 0 },
        gradient: { value: texture },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
      },
      vertexShader: `
        varying vec2 vUv;
        varying vec3 vPosition;
        
        void main() {
          vUv = uv;
          vPosition = position;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform float time;
        uniform sampler2D gradient;
        varying vec2 vUv;
        varying vec3 vPosition;
        void main() {
          // Create flowing effect
          float noise = sin(vPosition.x * 2.0 + time) * 
                       cos(vPosition.y * 2.0 + time) * 
                       sin(vPosition.z * 2.0 + time);
          
          // Sample gradient texture
          vec2 uv = vUv + 0.1 * vec2(noise);
          vec4 gradientColor = texture2D(gradient, uv);
          
          // Add glow effect
          float glow = 0.3 * (1.0 + sin(time + length(vPosition)));
          
          gl_FragColor = gradientColor + vec4(glow, glow * 0.5, 0.0, 0.0);
        }
      `,
      transparent: true,
      side: THREE.DoubleSide,
    });
    
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);
    
    // Warm lighting setup
    const ambientLight = new THREE.AmbientLight(0xfff0e6, 0.5);
    scene.add(ambientLight);
    
    const sunLight = new THREE.PointLight(0xffcb8e, 2, 20);
    sunLight.position.set(5, 3, 5);
    scene.add(sunLight);
    
    const pinkLight = new THREE.PointLight(0xff8e8e, 2, 15);
    pinkLight.position.set(-3, 2, 4);
    scene.add(pinkLight);
    
    const goldLight = new THREE.PointLight(0xffd700, 2, 15);
    goldLight.position.set(2, -2, 4);
    scene.add(goldLight);
    
    // Set camera position for better view
    camera.position.z = 6;
    
    // Animation
    const animate = () => {
      requestAnimationFrame(animate);
      
      // Update shader time uniform
      material.uniforms.time.value = Date.now() * 0.001;
      
      // Gentle sphere rotation
      sphere.rotation.x += 0.001;
      sphere.rotation.y += 0.002;
      
      // Animate lights in a flowing pattern
      const time = Date.now() * 0.001;
      const radius = 4;
      
      sunLight.position.x = Math.sin(time * 0.5) * radius;
      sunLight.position.z = Math.cos(time * 0.5) * radius;
      
      pinkLight.position.x = Math.sin(time * 0.3 + Math.PI) * (radius - 1);
      pinkLight.position.z = Math.cos(time * 0.3 + Math.PI) * (radius - 1);
      
      goldLight.position.x = Math.sin(time * 0.4 + Math.PI * 0.5) * (radius - 1);
      goldLight.position.z = Math.cos(time * 0.4 + Math.PI * 0.5) * (radius - 1);
      
      renderer.render(scene, camera);
    };
    
    animate();
    
    // Cleanup
    return () => {
      mountRef.current.removeChild(renderer.domElement);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
      ambientLight.dispose();
      sunLight.dispose();
      pinkLight.dispose();
      goldLight.dispose();
      texture.dispose();
    };
  }, []);
  return (
    <div style={{
      position: 'relative',
      width: '100vw',
      height: '100vh',
      backgroundColor: '#ffffff',
    }}>
      <div ref={mountRef} style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 1,
      }} />
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 2,
        fontFamily: 'Arial, sans-serif',
        color: '#000000',
      }}>
        {showJournal ? (
          <Journal onClose={() => setShowJournal(false)} />
        ) : (
          <button
            onClick={() => setShowJournal(true)}
            style={{
              padding: '1rem 2rem',
              fontSize: '1.2rem',
              backgroundColor: '#333',
              color: '#fff',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
            }}
          >
            Open Journal
          </button>
        )}
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>