// App.jsx import React from 'react'; import ReactDOM from 'react-dom/client'; // ================================================== // 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 [isComplete, setIsComplete] = React.useState(false); const [formData, setFormData] = React.useState({ cardholderName: '', cardNumber: '', expMonth: '', expYear: '', cvc: '' }); const [errors, setErrors] = React.useState({ cardholderName: '', cardNumber: '', expMonth: '', expYear: '', cvc: '' }); const handleInputChange = (e) => { let { id, value } = e.target; if (id === 'cardNumber') { value = value.replace(/\s/g, '') .replace(/(\d{4})/g, '$1 ') .trim() .slice(0, 19); } setFormData(prev => ({ ...prev, [id]: value })); // Clear error when user starts typing setErrors(prev => ({ ...prev, [id]: '' })); }; const validateForm = () => { console.log('Starting form validation'); const newErrors = {}; let isValid = true; // Validate cardholder name if (!formData.cardholderName.trim()) { newErrors.cardholderName = "Cardholder name is required"; isValid = false; } // Validate card number const cardNumberClean = formData.cardNumber.replace(/\s/g, ''); if (!cardNumberClean) { newErrors.cardNumber = "Card number is required"; isValid = false; } else if (!/^\d{16}$/.test(cardNumberClean)) { newErrors.cardNumber = "Card number must be 16 digits"; isValid = false; } // Validate expiry month if (!formData.expMonth) { newErrors.expMonth = "Required"; isValid = false; } else if (!/^\d{2}$/.test(formData.expMonth) || parseInt(formData.expMonth) < 1 || parseInt(formData.expMonth) > 12) { newErrors.expMonth = "Invalid"; isValid = false; } // Validate expiry year if (!formData.expYear) { newErrors.expYear = "Required"; isValid = false; } else if (!/^\d{2}$/.test(formData.expYear)) { newErrors.expYear = "Invalid"; isValid = false; } // Validate CVC if (!formData.cvc) { newErrors.cvc = "Required"; isValid = false; } else if (!/^\d{3}$/.test(formData.cvc)) { newErrors.cvc = "Invalid"; isValid = false; } console.log('Validation errors:', newErrors); console.log('Is form valid:', isValid); setErrors(newErrors); return isValid; }; const handleSubmit = (e) => { e.preventDefault(); console.log('Form submitted. Current form data:', formData); const isValid = validateForm(); console.log('Form validation result:', isValid); if (isValid) { // Clear form on success setFormData({ cardholderName: '', cardNumber: '', expMonth: '', expYear: '', cvc: '' }); alert('Card details submitted successfully!'); } else { console.log('Form has errors. Current error state:', errors); } }; return (

{formData.cardNumber || '0000 0000 0000 0000'}

{formData.cardholderName || 'JANE APPLESEED'}

{formData.expMonth || '00'}/{formData.expYear || '00'}

Cardholder Name {errors.cardholderName && (

{errors.cardholderName}

)}

Card Number {errors.cardNumber && (

{errors.cardNumber}

)}

Exp. Date (MM/YY)

{(errors.expMonth || errors.expYear) && (

{errors.expMonth || errors.expYear}

)}

CVC {errors.cvc && (

{errors.cvc}

)}

{isComplete && (

Thank you!

We've added your card details

)}

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