// 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 }; } } class Comment { constructor(id, content, user, score = 0, timestamp = "Just now", parentId = null, userVote = 0) { this.id = id; this.content = content; this.user = user; this.score = score; this.timestamp = timestamp; this.parentId = parentId; this.userVote = userVote; } static fromJSON(json) { return new Comment( json.id, json.content, User.fromJSON(json.user), json.score, json.timestamp, json.parentId, json.userVote || 0 ); } toJSON() { return { id: this.id, content: this.content, user: this.user.toJSON(), score: this.score, timestamp: this.timestamp, parentId: this.parentId, userVote: this.userVote }; } } 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'), kimberlySmith: new User('3', 'Kimberly Smith', 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq'), risky: new User('4', 'Rizky Hasanuddin', 'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm'), jacob: new User('5', 'Jacob Thompson', 'https://play.rosebud.ai/assets/avatar-jacob-thompson.webp?V4SN'), nathan: new User('6', 'Nathan Peterson', 'https://play.rosebud.ai/assets/avatar-nathan-peterson.webp?yMzk'), currentUser: new User('3', 'Kimberly Smith', 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq') }; const styles = ` .upvote-container { display: flex; align-items: center; background: #f5f6fa; border-radius: 6px; padding: 0.5rem; gap: 0.75rem; } .vote-button { background: transparent; border: none; cursor: pointer; color: #c3c4ef; transition: color 0.2s ease; } .vote-button.upvoted { color: #4CAF50; } .vote-button.downvoted { color: #f44336; display: flex; align-items: center; justify-content: center; padding: 0.25rem; transition: color 0.2s; } .vote-button:hover { color: #0a4b78; } .vote-button.active { color: #0a4b78; } .vote-count { color: #0a4b78; font-weight: 600; min-width: 1.5rem; text-align: center; } .reply-draft-container { background-color: #ffffff; padding: 1rem; border-radius: 8px; margin: 0.75rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .reply-draft-buttons { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.75rem; } .reply-button { background-color: transparent; color: #0a4b78; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background-color 0.2s; } .reply-button:hover { background-color: #f0f2f5; } .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: space-between; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e4e8ed; } .comment-actions { display: flex; gap: 0.75rem; align-items: center; } .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; margin-bottom: 1rem; } .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 INITIAL_COMMENTS = [ new Comment( 1, "I really like how easy this is to use. Everything works great!", USERS.currentUser, 5, "Just now", null ), new Comment( 2, "Hello! How does the new comment section look?", USERS.markWebber, 3, "1m ago", null ), new Comment( 3, "The new design looks clean and modern. I especially like the subtle shadows and spacing!", USERS.annaKim, 4, "2m ago", 2 ), new Comment( 4, "I agree! The threading feature makes conversations much easier to follow.", USERS.nathan, 2, "3m ago", 2 ), new Comment( 5, "The nested replies work perfectly!", USERS.jacob, 1, "4m ago", 3 ) ]; const APP_SETTINGS = { useLocalStorage: false, clearLocalStorage: false, }; const clearLocalStorageData = () => { if (APP_SETTINGS.clearLocalStorage) { try { localStorage.clear(); console.log('Local storage cleared successfully'); APP_SETTINGS.clearLocalStorage = false; return true; } catch (error) { console.error('Error clearing localStorage:', error); return false; } } return false; }; const useLocalStorage = (key, initialValue) => { const [storedValue, setStoredValue] = useState(() => { // If localStorage is disabled or needs to be cleared, return initial value if (!APP_SETTINGS.useLocalStorage || APP_SETTINGS.clearLocalStorage) { return typeof initialValue === 'function' ? initialValue() : initialValue; } try { const item = localStorage.getItem(key); // If no item exists or storage was cleared, return initial value if (!item || clearLocalStorageData()) { return typeof initialValue === 'function' ? initialValue() : initialValue; } const parsedItem = JSON.parse(item); // Handle comments specific conversion if (key === 'commentsV3') { try { return parsedItem.map(comment => new Comment( comment.id, comment.content || comment.text, USERS[Object.keys(USERS).find(key => USERS[key].id === comment.user.id )] || USERS.currentUser, comment.score, comment.timestamp )); } catch (error) { console.error('Error parsing comments:', error); return INITIAL_COMMENTS; } } return parsedItem; } catch (error) { console.error('Error reading from localStorage:', error); return INITIAL_COMMENTS; } }); // Return a wrapped version of useState's setter function that persists the new value to localStorage const setValue = value => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (APP_SETTINGS.useLocalStorage) { localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { console.error('Error saving to localStorage:', error); } }; return [storedValue, setValue]; }; const buildCommentTree = (comments) => { const commentMap = new Map(); const rootComments = []; // First pass: Create a map of all comments comments.forEach(comment => { comment.replies = []; commentMap.set(comment.id, comment); }); // Second pass: Organize comments into tree structure comments.forEach(comment => { if (comment.parentId === null) { rootComments.push(comment); } else { const parentComment = commentMap.get(comment.parentId); if (parentComment) { parentComment.replies.push(comment); } } }); return rootComments; }; const CommentThread = ({ comment, currentUser, onDelete, onUpdate, level = 0 }) => { const [replyingTo, setReplyingTo] = useState(null); const [replyContent, setReplyContent] = useState(""); return (

setReplyingTo(commentId)} /> {replyingTo === comment.id && (

setReplyContent(e.target.value)}
          />
          <div className="reply-draft-buttons">
            <button
              className="send-button"
              onClick={() => {
                if (replyContent.trim()) {
                  const newReply = new Comment(
                    Date.now(),
                    replyContent.trim(),
                    currentUser,
                    0,
                    "Just now",
                    comment.id
                  );
                  onUpdate(newReply);
                  setReplyContent("");
                  setReplyingTo(null);
                }
              }}
            >
              Reply
            </button>
            <button
              className="modal-button cancel-button"
              onClick={() => {
                setReplyContent("");
                setReplyingTo(null);
              }}
            >
              Cancel
            </button>
          </div>
        </div>
      )}
      {comment.replies && comment.replies.length > 0 && (
        <div className="replies-container">
          {comment.replies.map(reply => (
            <CommentThread
              key={reply.id}
              comment={reply}
              currentUser={currentUser}
              onDelete={onDelete}
              onUpdate={onUpdate}
              level={level + 1}
            />
          ))}
        </div>
      )}
    </div>
  );
};
const CommentContainer = ({ comment, currentUser, onDelete, onUpdate, onReply }) => {
  const [isEditing, setIsEditing] = useState(false);
  
  const handleUpdate = (newContent) => {
    onUpdate(new Comment(
      comment.id,
      newContent,
      comment.user,
      comment.score,
      comment.timestamp,
      comment.parentId
    ));
    setIsEditing(false);
  };
  return (
    <div className={`comment-container ${comment.parentId ? 'reply-container' : ''}`}>
      <div className="comment-header">
        <img 
          src={comment.user.profilePicture}
          alt={comment.user.name}
          className="profile-picture"
        />
        <div className="name-time-container">
          <span className="name">
            {comment.user.name}
            {comment.user === currentUser && <span className="you-badge">you</span>}
          </span>
          <span className="timestamp">{comment.timestamp}</span>
        </div>
      </div>
      {isEditing ? (
        <>
          <textarea
            className="comment-input"
            defaultValue={comment.content}
            onChange={(e) => {
              const newComment = new Comment(
                comment.id,
                e.target.value,
                comment.user,
                comment.score,
                comment.timestamp,
                comment.parentId
              );
              onUpdate(newComment);
            }}
          />
          <div className="comment-bottom-row">
            <button
              className="send-button"
              onClick={() => setIsEditing(false)}
            >
              Update
            </button>
          </div>
        </>
      ) : (
        <>
          <p className="comment-text">{comment.content}</p>
          <div className="comment-bottom-row">
            <div className="upvote-container">
              <button 
                className={`vote-button ${comment.userVote === 1 ? 'upvoted' : ''}`}
                onClick={() => {
                  let scoreChange = 0;
                  let newVote = 0;
                  
                  if (comment.userVote === 1) {
                    // If already upvoted, remove upvote
                    scoreChange = -1;
                    newVote = 0;
                  } else if (comment.userVote === -1) {
                    // If downvoted, switch to upvote
                    scoreChange = 2;
                    newVote = 1;
                  } else {
                    // If no vote, add upvote
                    scoreChange = 1;
                    newVote = 1;
                  }
                  
                  const newScore = comment.score + scoreChange;
                  onUpdate(new Comment(
                    comment.id,
                    comment.content,
                    comment.user,
                    newScore,
                    comment.timestamp,
                    comment.parentId,
                    newVote
                  ));
                }}
              >
                ▲
              </button>
              <span className="vote-count">{comment.score}</span>
              <button 
                className={`vote-button ${comment.userVote === -1 ? 'downvoted' : ''}`}
                onClick={() => {
                  let scoreChange = 0;
                  let newVote = 0;
                  
                  if (comment.userVote === -1) {
                    // If already downvoted, remove downvote
                    scoreChange = 1;
                    newVote = 0;
                  } else if (comment.userVote === 1) {
                    // If upvoted, switch to downvote
                    scoreChange = -2;
                    newVote = -1;
                  } else {
                    // If no vote, add downvote
                    scoreChange = -1;
                    newVote = -1;
                  }
                  
                  const newScore = comment.score + scoreChange;
                  onUpdate(new Comment(
                    comment.id,
                    comment.content,
                    comment.user,
                    newScore,
                    comment.timestamp,
                    comment.parentId,
                    newVote
                  ));
                }}
              >
                ▼
              </button>
            </div>
            <div className="comment-actions">
              {comment.user !== currentUser && (
                <button
                  className="reply-button"
                  onClick={() => onReply(comment.id)}
                >
                  Reply
                </button>
              )}
              {comment.user === currentUser && (
                <>
                  <button
                    className="send-button"
                    onClick={() => setIsEditing(true)}
                  >
                    Edit
                  </button>
                  <button
                    className="delete-comment-button"
                    onClick={() => onDelete(comment)}
                  >
                    Delete
                  </button>
                </>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
};
const CommentForm = ({ onSubmit, currentUser }) => {
  const [newComment, setNewComment] = useState("");
  const handleSubmit = () => {
    if (!newComment.trim()) return;
    
    const comment = new Comment(
      Date.now(),
      newComment.trim(),
      currentUser,
      0,
      "Just now",
      null
    );
    
    onSubmit(comment);
    setNewComment("");
  };
  return (
    <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={handleSubmit}
      >
        Send
      </button>
    </div>
  );
};
const App = () => {
  useEffect(() => {
    clearLocalStorageData();
  }, []);
  
  const currentUser = USERS.currentUser;
  const [commentToDelete, setCommentToDelete] = useState(null);
  const [comments, setComments] = useLocalStorage('commentsV3', () => INITIAL_COMMENTS);
  const handleDeleteComment = (comment) => {
    setComments(prevComments => prevComments.filter(c => c.id !== comment.id));
    setCommentToDelete(null);
  };
  return (
    <div className="root-container">
      <div className="background-overlay" />
      <div className="content-container">
        <div className="comments-list">
          {buildCommentTree(comments).map(comment => (
            <CommentThread
              key={comment.id}
              comment={comment}
              currentUser={currentUser}
              onDelete={setCommentToDelete}
              onUpdate={(updatedComment) => {
                setComments(prevComments => {
                  // If the comment has a parentId, it's a new reply
                  if (updatedComment.parentId && !prevComments.find(c => c.id === updatedComment.id)) {
                    return [...prevComments, updatedComment];
                  }
                  // Otherwise it's an update to an existing comment
                  return prevComments.map(c =>
                    c.id === updatedComment.id ? updatedComment : c
                  );
                });
              }}
            />
          ))}
          <CommentForm 
            currentUser={currentUser}
            onSubmit={(comment) => {
              setComments(prevComments => [comment, ...prevComments]);
            }}
          />
        </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>