// ================================================== // 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 a creative business name generator. When given a description of a business, you will generate exactly 5 short, brandable, and memorable business name suggestions. Your names should be: - Maximum 2 words - Easy to spell and pronounce - Available as .com domains (prefer short, simple names) - Modern and appealing to target markets Format your response as a list of 3 names, each on a new line. `; /** * 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) { try { console.log('Sending prompt to AI:', prompt); // Format the prompt to be more specific const formattedPrompt = `Generate exactly 5 business names for: "${prompt}"\n\nRules:\n- Each name should be 1-2 words\n- Names should be memorable and brandable\n- Return ONLY the names, one per line\n\nNames:`; // Add the user's message to the conversation this.chatManager.addMessage('user', formattedPrompt); // Get the AI's response console.log('Waiting for AI response...'); let response = await this.chatManager.getCharacterResponse('classify'); console.log('Raw AI response:', response); // Validate response if (!response || typeof response !== 'string') { console.error('Invalid response type:', typeof response); throw new Error('Invalid response format'); } // Clean up the response response = response.trim(); // Log the cleaned response console.log('Cleaned response:', response); // Add the AI's message to the conversation this.chatManager.addMessage('assistant', response); return response; } catch (error) { console.error('ChatAI Error:', error); throw new Error('Failed to get AI response: ' + error.message); } } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const [businessDescription, setBusinessDescription] = useState(''); const [businessNames, setBusinessNames] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(''); const chatAI = useRef(null); useEffect(() => { try { chatAI.current = new ChatAIClass(); } catch (err) { console.error('Failed to initialize ChatAI:', err); setError('Failed to initialize the name generator'); } }, []); const generateNames = async () => { if (!businessDescription.trim() || isLoading) return; setError(''); setIsLoading(true); try { if (!chatAI.current) { throw new Error('Name generator not initialized'); } console.log('Starting name generation:', { description: businessDescription, timestamp: new Date().toISOString(), chatAIStatus: chatAI.current ? 'initialized' : 'not initialized' }); if (!chatAI.current) { console.error('ChatAI initialization failed'); throw new Error('Name generator not initialized - please refresh the page'); } // Simplified prompt for better results const prompt = businessDescription; console.log('Sending prompt to ChatAI:', prompt); let response = await chatAI.current.getResponse(prompt); console.log('Received response:', response); if (!response) { console.error('Empty response received'); throw new Error('No response received'); } // Clean up the response response = response .replace(/^\d+[\.)]\s*/gm, '') // Remove numbering (1., 1), etc.) .replace(/["""]/g, '') // Remove quotes .replace(/^[-*•]\s*/gm, '') // Remove bullet points .replace(/suggestion:|name:|business name:/gi, ''); // Remove common prefixes console.log('Cleaned response:', response); const names = response .split('\n') .map(name => name.trim()) .filter(name => { const isValid = name && !name.toLowerCase().includes('here') && !name.toLowerCase().includes('example') && !name.toLowerCase().includes('suggestion') && name.length <= 30; // Reasonable length limit console.log(`Name "${name}" valid:`, isValid); return isValid; }) .slice(0, 5); if (names.length === 0) { throw new Error('No valid names generated'); } setBusinessNames(names); } catch (error) { console.error('Error generating names:', { error, description: businessDescription, type: error.name, message: error.message, stack: error.stack }); // Provide user-friendly error message based on error type let userMessage = 'An error occurred while generating names. '; if (error.message.includes('not initialized')) { userMessage += 'The name generator is not ready. Please refresh the page.'; } else if (error.message.includes('No response')) { userMessage += 'Please try again with a more detailed business description.'; } else { userMessage += 'Please try again with different wording.'; } setError(userMessage); setBusinessNames([]); // Log the error details for debugging console.log('Error details:', { errorName: error.name, errorMessage: error.message, errorStack: error.stack }); } finally { setIsLoading(false); } // If we still don't have names, try one more time with a simplified prompt if (businessNames.length === 0 && !error) { try { const simplePrompt = `Generate 5 simple business names for: ${businessDescription}. Return only names, one per line.`; const response = await chatAI.current.getResponse(simplePrompt); if (response) { const names = response .split('\n') .map(name => name.trim()) .filter(name => name) .slice(0, 5); if (names.length > 0) { setBusinessNames(names); setError(''); } } } catch (retryError) { console.error('Retry error:', retryError); setError('Still unable to generate names. Please try a different description.'); } } }; 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 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 () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); // Add spinning animation styles useEffect(() => { const styles = ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .spinner { display: inline-block; animation: spin 0.8s linear infinite; } .fadeIn { animation: fadeIn 0.5s ease forwards; } `; const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = styles; document.head.appendChild(styleSheet); return () => { document.head.removeChild(styleSheet); }; }, []); return (

AI Business Name Generator

Describe your business, product, or service, and let AI craft the perfect name for you

setBusinessDescription(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && businessDescription.trim() && !isLoading) { generateNames(); } }} placeholder="Describe your business..." style={{ padding: '15px', fontSize: '1.2rem', borderRadius: '8px', border: '1px solid #333', width: '100%', backgroundColor: '#2a2a2a', color: '#ffffff', boxShadow: '0 2px 5px rgba(0,0,0,0.3)', outline: 'none', transition: 'border-color 0.3s', }} onFocus={(e) => e.target.style.borderColor = '#007bff'} onBlur={(e) => e.target.style.borderColor = '#333'} />

Why stop at a name? Make your business site, landing pages, and tools with Rosebud AI. Hit Create!

{error && (

Error: {error}

)}

{businessNames.length > 0 && (

Suggested Names:

{businessNames.map((name, index) => (

{ e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}> {name}

))}

)}

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