// 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'), currentUser: new User('3', 'Kimberly Smith', 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq') }; const styles = ` .comment-form { position: fixed; bottom: 7.5vh; left: 50%; transform: translateX(-50%); width: 388px; background-color: #ffffff; padding: 1rem; border-radius: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 10; } .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; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; padding: 2rem; border-radius: 8px; max-width: 400px; width: 90%; text-align: center; } .modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .modal-button { padding: 0.5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; } .cancel-button { background-color: #e4e8ed; color: #5e6778; transition: all 0.2s ease; } .cancel-button:hover { background-color: #d1d6dd; } .delete-button { background-color: #dc3545; color: white; transition: all 0.2s ease; } .delete-button:hover { background-color: #c82333; } .comment-bottom-row { display: flex; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e4e8ed; } .delete-comment-button { background: #dc3545; border: none; color: white; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; border-radius: 4px; } .delete-comment-button:hover { background: #c82333; } .comments-list { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1rem; } .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 1rem calc(1rem + 160px) 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 [editingCommentId, setEditingCommentId] = useState(null); const [commentToDelete, setCommentToDelete] = useState(null); const [comments, setComments] = useState(() => { const savedComments = localStorage.getItem('comments'); if (savedComments) { return JSON.parse(savedComments).map(comment => ({ ...comment, user: USERS[Object.keys(USERS).find(key => USERS[key].id === comment.user.id )] || currentUser })); } return [ { id: 1, user: currentUser, text: "I really like how easy this is to use. Everything works great!", timestamp: "Just now" }, { id: 2, user: USERS.markWebber, text: "Hello! How does the new comment section look?", timestamp: "1m ago" }, { id: 3, user: USERS.annaKim, text: "The new design looks clean and modern. I especially like the subtle shadows and spacing!", timestamp: "2m ago" } ]; }); const [newComment, setNewComment] = useState(""); // Save comments to localStorage whenever they change useEffect(() => { localStorage.setItem('comments', JSON.stringify(comments)); }, [comments]); const handleDeleteComment = (comment) => { setComments(prevComments => prevComments.filter(c => c.id !== comment.id)); setCommentToDelete(null); }; return (

{comments.map(comment => (

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

{editingCommentId === comment.id ? ( <>

{
                      setComments(prevComments =>
                        prevComments.map(c =>
                          c.id === comment.id ? { ...c, text: e.target.value } : c
                        )
                      );
                    }}
                  />
                  <div className="comment-bottom-row">
                    <button
                      className="send-button"
                      onClick={() => setEditingCommentId(null)}
                    >
                      Update
                    </button>
                  </div>
                </>
              ) : (
                <>
                  <p className="comment-text">{comment.text}</p>
                  {comment.user === currentUser && (
                    <div className="comment-bottom-row">
                      <button
                        className="send-button"
                        style={{ marginRight: '0.5rem' }}
                        onClick={() => setEditingCommentId(comment.id)}
                      >
                        Edit
                      </button>
                      <button
                        className="delete-comment-button"
                        onClick={() => setCommentToDelete(comment)}
                      >
                        Delete
                      </button>
                    </div>
                  )}
                </>
              )}
            </div>
          ))}
          <div className="comment-form">
            <textarea
              className="comment-input"
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
              placeholder="Write a comment..."
            />
            <button 
              type="button"
              className="send-button"
              disabled={!newComment.trim()}
              onClick={() => {
                if (!newComment.trim()) return;
                const comment = {
                  id: Date.now(),
                  user: currentUser,
                  text: newComment.trim(),
                  timestamp: "Just now"
                };
                setComments(prevComments => [comment, ...prevComments]);
                setNewComment("");
              }}
            >
              Send
            </button>
          </div>
        </div>
        {commentToDelete && (
          <div className="modal-overlay">
            <div className="modal-content">
              <h3>Delete Comment</h3>
              <p>Are you sure you want to delete this comment? This action cannot be undone.</p>
              <div className="modal-buttons">
                <button
                  className="modal-button cancel-button"
                  onClick={() => setCommentToDelete(null)}
                >
                  Cancel
                </button>
                <button
                  className="modal-button delete-button"
                  onClick={() => handleDeleteComment(commentToDelete)}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>