// 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 // ================================================== // API URL for Open Trivia Database const TRIVIA_API_URL = 'https://opentdb.com/api.php?amount=1'; // Initialize AI const triviaAI = new ChatAIClass(); // Function to generate plausible incorrect answers const generateIncorrectAnswers = async (question, correctAnswer) => { const prompt = `Given the trivia question "${question}" with the correct answer "${correctAnswer}", generate 3 plausible but incorrect multiple choice answers. Return them as a comma-separated list. Make them believable but clearly incorrect. Only return the answers, no explanations.`; const response = await triviaAI.getResponse(prompt); return response.split(',').map(answer => answer.trim()); }; // Types for our trivia questions const formatQuestions = async (rawQuestions) => { const formattedQuestions = []; for (const q of rawQuestions) { const decodedQuestion = decodeHTMLEntities(q.question); const decodedAnswer = decodeHTMLEntities(q.correct_answer); // Generate AI-created incorrect answers const incorrectAnswers = await generateIncorrectAnswers(decodedQuestion, decodedAnswer); formattedQuestions.push({ question: decodedQuestion, correct_answer: decodedAnswer, answers: shuffleArray([ ...incorrectAnswers, decodedAnswer ]) }); } return formattedQuestions; }; // Utility function to decode HTML entities const decodeHTMLEntities = (text) => { const textarea = document.createElement('textarea'); textarea.innerHTML = text; return textarea.value; }; // Utility function to shuffle arrays const shuffleArray = (array) => { const newArray = [...array]; for (let i = newArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [newArray[i], newArray[j]] = [newArray[j], newArray[i]]; } return newArray; }; const App = () => { const mountRef = useRef(null); const [currentQuestion, setCurrentQuestion] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [questionsAnswered, setQuestionsAnswered] = useState(0); const [score, setScore] = useState(0); const [selectedAnswer, setSelectedAnswer] = useState(null); const [answerSubmitted, setAnswerSubmitted] = useState(false); const [showResult, setShowResult] = useState(false); const TOTAL_QUESTIONS = 10; const fetchNextQuestion = async () => { if (questionsAnswered >= TOTAL_QUESTIONS) { setShowResult(true); return; } setLoading(true); setError(null); try { const response = await fetch(TRIVIA_API_URL); if (!response.ok) throw new Error('Failed to fetch question'); const data = await response.json(); if (data.response_code === 0) { const formattedQuestions = await formatQuestions(data.results); setCurrentQuestion(formattedQuestions[0]); } else { throw new Error('Invalid response from API'); } } catch (err) { setError(err.message); } finally { setLoading(false); } }; useEffect(() => { fetchNextQuestion(); }, [questionsAnswered]); 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 cube const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return (

{loading ? (

Loading next question...

) : error ? (

{error}

) : currentQuestion ? (

Question {questionsAnswered + 1}/{TOTAL_QUESTIONS} Score: {score}

{currentQuestion.question}

{currentQuestion.answers.map((answer, index) => ( ))}

) : null}

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