// App.jsx import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; class Comment { constructor(id, content, createdAt, user, replies = []) { this.id = id; this.content = content; this.createdAt = createdAt; this.user = user; this.replies = replies; } addReply(reply) { this.replies.push(reply); } removeReply(replyId) { this.replies = this.replies.filter(reply => reply.id !== replyId); } isReplyable() { return true; } } class User { constructor(id, name, image) { this.id = id; this.name = name; this.image = image; } isCurrentUser() { return this.id === CURRENT_USER.id; } getAvatarAlt() { return `${this.name}'s avatar`; } } // Current User Data const CURRENT_USER = new User( 1001, "juliusomo", "https://play.rosebud.ai/assets/image-juliusomo.webp?SuPD" ); // Comments Data const COMMENTS = [ new Comment( 1, "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.", "1 month ago", new User( 1002, "amyrobson", "https://play.rosebud.ai/assets/image-amyrobson.webp?VXRV" ) ), new Comment( 2, "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I should start? Thanks!", "2 weeks ago", new User( 1003, "maxblagun", "https://play.rosebud.ai/assets/image-maxblagun.webp?HLis" ) ) ]; // Styles const styles = ` .comment-edit-textarea { width: 100%; min-height: 96px; padding: 0.75rem; border: 1px solid #eaecf1; border-radius: 8px; resize: vertical; font-family: inherit; font-size: 1rem; line-height: 1.5; color: #67727e; background-color: #f5f6fa; margin-bottom: 1rem; box-sizing: border-box; } .comment-edit-textarea:focus { outline: none; border-color: #5457b6; background-color: #ffffff; } .edit-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .edit-button:hover { background-color: #4447a6; } .update-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .update-button:hover { background-color: #4447a6; } .comment-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eaecf1; background-color: transparent; } .comment-actions { display: flex; gap: 1rem; align-items: center; } .delete-button { background-color: #ed6368; color: #ffffff; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .delete-button:hover { background-color: #ff7277; } .popup-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; } .popup-content { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; width: 90%; max-width: 400px; } .popup-title { color: #334253; font-size: 1.25rem; font-weight: 500; margin-bottom: 1rem; } .popup-message { color: #67727e; margin-bottom: 1.5rem; line-height: 1.5; } .popup-buttons { display: flex; gap: 1rem; } .popup-button { flex: 1; padding: 0.75rem; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .cancel-button { background-color: #67727e; color: #ffffff; } .cancel-button:hover { background-color: #5c6671; } .confirm-delete-button { background-color: #ed6368; color: #ffffff; } .confirm-delete-button:hover { background-color: #ff7277; } .comments-container { padding: 1rem; background-color: #f5f6fa; flex: 1; overflow-y: auto; scrollbar-gutter: stable; border-top-left-radius: 10px; border-top-right-radius: 10px; } .comment-form { position: sticky; bottom: 0; left: 0; right: 0; background-color: #ffffff; padding: 1rem; border-radius: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); } .comment-form-content { display: flex; gap: 1rem; align-items: flex-start; } .comment-textarea { flex: 1; min-height: 96px; padding: 0.75rem; border: 1px solid #eaecf1; border-radius: 8px; resize: none; font-family: inherit; font-size: 1rem; line-height: 1.5; } .comment-textarea:focus { outline: none; border-color: #5457b6; } .send-button { background-color: #5457b6; color: #ffffff; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .send-button:hover { background-color: #4447a6; } .comment-container { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.25rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .comment-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .username { font-weight: 500; color: #334253; } .timestamp { color: #67727e; } .comment-content { color: #67727e; line-height: 1.5; } .user-badge { background-color: #5457b6; color: #ffffff; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; margin-left: 8px; } .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; display: flex; flex-direction: column; z-index: 2; min-height: 85vh; max-height: 85vh; padding: 0; background-color: #ffffff; 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 DeleteConfirmationPopup = ({ onClose, onConfirm }) => { return (

Delete comment

Are you sure you want to delete this comment? This will remove the comment and can't be undone.

); }; const CommentContainer = ({ comment, onDelete, onUpdate }) => { const [showDeletePopup, setShowDeletePopup] = useState(false); const [isEditing, setIsEditing] = useState(false); const [editedContent, setEditedContent] = useState(comment.content); const handleDelete = () => { setShowDeletePopup(false); onDelete(comment.id); }; const handleUpdate = () => { onUpdate(comment.id, editedContent); setIsEditing(false); }; return (

{comment.user.name} {comment.user.isCurrentUser() && ( you )} {comment.createdAt}

{isEditing ? (

setEditedContent(e.target.value)}
          rows={4}
        />
      ) : (
        <p className="comment-content">{comment.content}</p>
      )}
      {comment.user.isCurrentUser() && (
        <div className="comment-footer">
          <div className="comment-actions">
            {isEditing ? (
              <button 
                className="update-button"
                onClick={handleUpdate}
              >
                Update
              </button>
            ) : (
              <>
                <button 
                  className="edit-button"
                  onClick={() => setIsEditing(true)}
                >
                  Edit
                </button>
                <button 
                  className="delete-button"
                  onClick={() => setShowDeletePopup(true)}
                >
                  Delete
                </button>
              </>
            )}
            {showDeletePopup && (
              <DeleteConfirmationPopup
                onClose={() => setShowDeletePopup(false)}
                onConfirm={handleDelete}
              />
            )}
          </div>
        </div>
      )}
    </div>
  );
};
const CommentForm = ({ onSubmit }) => {
  const [content, setContent] = useState('');
  const handleClick = () => {
    if (!content.trim()) return;
    const newComment = new Comment(
      Date.now(), // Using timestamp as ID
      content,
      'Just now',
      CURRENT_USER
    );
    onSubmit(newComment);
    setContent('');
  };
  return (
    <div className="comment-form">
      <div className="comment-form-content">
        <textarea
          className="comment-textarea"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Add a comment..."
        />
        <button 
          type="button" 
          className="send-button"
          onClick={handleClick}
        >
          Send
        </button>
      </div>
    </div>
  );
};
const App = () => {
  const [comments, setComments] = useState(COMMENTS);
  
  const handleDeleteComment = (commentId) => {
    setComments(prevComments => prevComments.filter(comment => comment.id !== commentId));
  };
  
  const handleNewComment = (newComment) => {
    setComments(prevComments => [...prevComments, newComment]);
  };
  const handleUpdateComment = (commentId, newContent) => {
    setComments(prevComments => 
      prevComments.map(comment => 
        comment.id === commentId 
          ? { ...comment, content: newContent }
          : comment
      )
    );
  };
  return (
    <div className="root-container">
      <div className="background-overlay" />
      <div className="content-container">
        <div className="comments-container">
          {comments.map(comment => (
            <CommentContainer 
              key={comment.id} 
              comment={comment}
              onDelete={handleDeleteComment}
              onUpdate={handleUpdateComment}
            />
          ))}
        </div>
        <CommentForm onSubmit={handleNewComment} />
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>