// App.jsx import React, { useEffect, useRef, createElement, useState } from 'react'; // Add font-face styles const style = document.createElement('style'); style.textContent = ` @keyframes searchButtonAppear { 0% { opacity: 0; transform: scale(0.85) translateY(20px); } 80% { opacity: 0.95; transform: scale(0.98) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes moveGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @font-face { font-family: 'Infinity'; src: url('https://play.rosebud.ai/assets/Infinity-Regular.otf?4YEn') format('opentype'); font-display: swap; } @font-face { font-family: 'Aspekta'; src: url('https://play.rosebud.ai/assets/AspektaVF.ttf?mrUg') format('truetype'), url('https://play.rosebud.ai/assets/AspektaVF(wof).woff2?xwya') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Quittance'; src: url('https://play.rosebud.ai/assets/Quittance.otf?ZYzG') format('opentype'); font-weight: normal; font-display: swap; } `; document.head.appendChild(style); 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 engaging in natural conversation. Respond in a natural, casual way while staying informative and helpful. Keep responses concise but engaging, and maintain a friendly tone throughout the conversation. `; /** * 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(description = AI_BEHAVIOR_DESCRIPTION) { // 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(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 App = () => { const [mode, setMode] = React.useState(null); const [showChat, setShowChat] = React.useState(false); const [messages, setMessages] = React.useState([]); const [aiCharacter, setAiCharacter] = React.useState(null); const [isTyping, setIsTyping] = React.useState(false); const chatRef = useRef(null); const mountRef = useRef(null); const aiChat = useRef(null); const randomAICharacters = [ { name: "Jane Jackson", age: 25, avatar: "👩", specialty: "Food and Hiking" }, { name: "Michael Chen", age: 32, avatar: "👨", specialty: "Technology" }, { name: "Emma Wilson", age: 25, avatar: "👱‍♀️", specialty: "Literature" }, { name: "James Carter", age: 30, avatar: "👨‍💼", specialty: "Business" }, ]; const handleSearch = () => { const randomChar = randomAICharacters[Math.floor(Math.random() * randomAICharacters.length)]; setAiCharacter(randomChar); setShowChat(true); if (!aiChat.current) { if (!aiChat.current) { const randomChar = randomAICharacters[Math.floor(Math.random() * randomAICharacters.length)]; setAiCharacter(randomChar); const customDescription = ` You are a friendly and engaging conversational partner named ${randomChar.name}. You are ${randomChar.age} years old and your specialty is ${randomChar.specialty}. Respond in a natural, casual way while staying informative and helpful. Keep responses concise but engaging, and maintain a friendly tone throughout the conversation. `; aiChat.current = new ChatAIClass(customDescription); } } }; const handleSendMessage = async (message) => { if (!message.trim() || isTyping) return; // Add user message const newUserMessage = { text: message, sender: 'user', timestamp: new Date() }; setMessages(prev => [...prev, newUserMessage]); // Show typing indicator setIsTyping(true); try { // Get AI response const response = await aiChat.current.getResponse(message); // Add AI message const newAiMessage = { text: response, sender: 'ai', timestamp: new Date() }; setMessages(prev => [...prev, newAiMessage]); } catch (error) { console.error('Failed to get AI response:', error); // Add error message setMessages(prev => [...prev, { text: "I apologize, but I'm having trouble responding right now. Please try again.", sender: 'ai', timestamp: new Date() }]); } finally { setIsTyping(false); // Scroll to bottom if (chatRef.current) { chatRef.current.scrollTop = chatRef.current.scrollHeight; } } try { // Get AI response with a slight delay for natural feeling await new Promise(resolve => setTimeout(resolve, 500)); const response = await aiChat.current.getResponse(message); // Add AI message const newAiMessage = { text: response, sender: 'ai', timestamp: new Date() }; setMessages(prev => [...prev, newAiMessage]); // Scroll to bottom after new message if (chatRef.current) { chatRef.current.scrollTop = chatRef.current.scrollHeight; } } catch (error) { console.error('Failed to get AI response:', error); setMessages(prev => [...prev, { text: "I apologize, but I'm having trouble responding right now. Please try again.", sender: 'ai', timestamp: new Date() }]); } finally { setIsTyping(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); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); renderer.dispose(); }; }, []); return (

👩

RoseChat 🌹

{ const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 35; const rotateY = (centerX - x) / 35; e.currentTarget.style.transform = `perspective(1500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.01, 1.01, 1.01)`; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'perspective(1500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'; }} style={{ background: 'rgba(44, 44, 44, 0.5)', borderRadius: '36px', padding: '1.5rem', marginBottom: '2rem', display: 'flex', flexDirection: 'column', gap: '1.25rem', backdropFilter: 'blur(8px)', boxShadow: '0 4px 6px rgba(0,0,0,0.2)', width: 'calc(100% - 2rem)', maxWidth: '800px', margin: '1rem auto 2rem auto', transition: 'all 0.3s cubic-bezier(0.3, 1, 0.2, 1)', transformStyle: 'preserve-3d', }}>

Online

Sarah Johnson

Age 28

Membership Premium

{ const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 35; const rotateY = (centerX - x) / 35; e.currentTarget.style.transform = `perspective(1500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.01, 1.01, 1.01)`; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'perspective(1500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'; }} style={{ background: 'rgba(44, 44, 44, 0.5)', borderRadius: '36px', padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1.5rem', backdropFilter: 'blur(8px)', boxShadow: '0 4px 6px rgba(0,0,0,0.2)', width: 'calc(100% - 2rem)', maxWidth: '800px', margin: '0 auto 2rem auto', transition: 'all 0.3s cubic-bezier(0.3, 1, 0.2, 1)', transformStyle: 'preserve-3d', alignItems: 'center', }}> Choose how you'd like to meet new friends.

{mode && }

{showChat && ( <>

setShowChat(false)} style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0, 0, 0, 0.7)', backdropFilter: 'blur(4px)', zIndex: 9, transition: 'all 0.3s ease-in-out', cursor: 'pointer', }} />

e.stopPropagation()} style={{ position: 'fixed', inset: '2rem', margin: 'auto', width: 'min(calc(100vw - 4rem), 800px)', height: 'min(calc(100vh - 4rem), 600px)', maxWidth: '800px', maxHeight: '600px', transform: 'none', WebkitTransform: 'none', background: 'rgba(44, 44, 44, 0.95)', borderRadius: '24px', backdropFilter: 'blur(10px)', boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)', display: 'flex', flexDirection: 'column', overflow: 'hidden', zIndex: 10, animation: 'searchButtonAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards', }}>

{aiCharacter?.avatar}

{aiCharacter?.name}

{aiCharacter?.specialty}

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

{msg.text}

))} {isTyping && (

Typing...

)}

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

Other games like this

About Animated Chat App Interface