// App.jsx import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; // Styles class User { constructor(id, name, profilePicture) { this.id = id; this.name = name; this.profilePicture = profilePicture; } static fromJSON(json) { return new User(json.id, json.name, json.profilePicture); } toJSON() { return { id: this.id, name: this.name, profilePicture: this.profilePicture }; } } const USERS = { markWebber: new User('1', 'Mark Webber', 'https://play.rosebud.ai/assets/avatar-mark-webber.webp?U0qS'), annaKim: new User('2', 'Anna Kim', 'https://play.rosebud.ai/assets/avatar-anna-kim.webp?DlUI'), rizkyHasanuddin: new User('3', 'Rizky Hasanuddin', 'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm'), currentUser: new User('4', 'Kimberly Smith', 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq') }; const styles = ` .comment-form { position: sticky; bottom: 0; left: 0; right: 0; background-color: #ffffff; padding: 1rem; border-radius: 8px; margin-top: 1rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); } .comment-input { width: 100%; min-height: 80px; padding: 0.75rem; border: 1px solid #e4e8ed; border-radius: 6px; margin-bottom: 0.75rem; font-family: inherit; resize: vertical; box-sizing: border-box; } .send-button { background-color: #0a4b78; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background-color 0.2s; } .send-button:hover { background-color: #0b5690; } .send-button:disabled { background-color: #cccccc; cursor: not-allowed; } .comments-list { display: flex; flex-direction: column; gap: 0.75rem; } .comment-container { display: flex; flex-direction: column; padding: 1rem; border-radius: 8px; background-color: #ffffff; } .comment-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .profile-picture { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; } .name { font-weight: 600; color: #1c2022; } .name-time-container { display: flex; gap: 0.5rem; align-items: center; } .timestamp { color: #939cab; font-size: 0.9rem; } .comment-text { color: #5e6778; line-height: 1.4; margin: 0; } .you-badge { background-color: #0a4b78; color: #ffffff; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; margin-left: 0.5rem; } .root-container { width: 100vw; height: 100vh; background-color: #ffffff; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #000000; position: relative; overflow: hidden; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: url(https://play.rosebud.ai/assets/bg-main.png?Xrrp); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.95; } .content-container { width: 420px; position: relative; z-index: 2; min-height: 85vh; max-height: 85vh; padding: 1rem; overflow-y: auto; overflow-x: hidden; background-color: #e8eaf2; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); 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. // ////////////////////////////////////////////////////////////// // 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 currentUser = USERS.currentUser; const loadComments = () => { const stored = localStorage.getItem('commentsV8'); if (!stored) { return [ { id: 1, user: USERS.markWebber, text: "Hello! How does the new comment section look?", timestamp: "2m ago" }, { id: 2, user: USERS.annaKim, text: "The new design looks clean and modern. I especially like the subtle shadows and spacing!", timestamp: "3m ago" }, { id: 3, user: USERS.rizkyHasanuddin, text: "The functionality is smooth and intuitive. Great job on the implementation!", timestamp: "5m ago" } ]; } const parsedComments = JSON.parse(stored); return parsedComments.map(comment => ({ ...comment, user: new User( comment.user.id, comment.user.name, comment.user.profilePicture ) })); }; const [comments, setComments] = useState(loadComments); useEffect(() => { const commentsToStore = comments.map(comment => ({ ...comment, user: comment.user.toJSON() })); localStorage.setItem('commentsV8', JSON.stringify(commentsToStore)); }, [comments]); const [newComment, setNewComment] = useState(""); // Removed handleSubmit as it's now handled directly in the button onClick return (

{comments.map(comment => (

{comment.user.name} {comment.user === currentUser && you} {comment.timestamp}

{comment.text}

))}