// App.jsx import React, { useState, useEffect, useMemo, useRef } 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 imageAssets = { profilePictures: [ 'https://play.rosebud.ai/assets/avatar-mark-webber.webp?U0qS', 'https://play.rosebud.ai/assets/avatar-anna-kim.webp?DlUI', 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq', 'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm', 'https://play.rosebud.ai/assets/avatar-jacob-thompson.webp?V4SN', 'https://play.rosebud.ai/assets/avatar-nathan-peterson.webp?yMzk' ] }; const getRandomUnusedProfilePicture = () => { // Get all currently used profile pictures const usedPictures = new Set( Object.values(USERS).map(user => user.profilePicture) ); // Filter out used pictures const unusedPictures = imageAssets.profilePictures.filter( pic => !usedPictures.has(pic) ); // If there are unused pictures, return a random one if (unusedPictures.length > 0) { return unusedPictures[Math.floor(Math.random() * unusedPictures.length)]; } // If all pictures are used, return a random one from all pictures return imageAssets.profilePictures[ Math.floor(Math.random() * imageAssets.profilePictures.length) ]; }; const createUserFromData = (userData) => { // First try to find an existing user const existingUser = Object.values(USERS).find(user => user.id === userData.id || user.name === userData.username ); if (existingUser) { return existingUser; } // Create new user if not found return new User( userData.id, userData.username, getRandomUnusedProfilePicture() ); }; 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('shawnbuilds_1', 'shawnBuilds', 'https://play.rosebud.ai/assets/done_circlePfpRosie.png?o0FS') }; const styles = ` .generate-button { background-color: #6b21a8; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background-color 0.2s; } .generate-button:hover { background-color: #7c3aed; } .generate-button:disabled { background-color: #9ca3af; cursor: not-allowed; } .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; } .comment-action-button { border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 36px; } .send-button { background-color: #0a4b78; color: white; } .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; color: white; } .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; white-space: pre-wrap; } .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 COMMENTS_DATASET = new Map(); const loadCommentsFromJSON = async (jsonUrl) => { try { const response = await fetch(jsonUrl); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Clear existing dataset COMMENTS_DATASET.clear(); // Convert JSON data to Comment objects and store in the Map data.forEach(commentData => { const user = USERS[Object.keys(USERS).find(key => USERS[key].name === commentData.userName )] || USERS.currentUser; const comment = new Comment( commentData.id, commentData.content, user, commentData.score || 0, commentData.timestamp || "Just now", commentData.parentId || null, commentData.userVote || 0 ); COMMENTS_DATASET.set(comment.id, comment); }); return true; } catch (error) { console.error('Error loading comments:', error); return false; } }; const loadCommentsFromSection = async (sectionId) => { try { const response = await fetch('https://play.rosebud.ai/assets/chat_history.json?irge'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Filter comments by sectionId const sectionComments = data.filter(comment => comment.sectionId === sectionId); // Convert filtered data to Comment objects return sectionComments.map(commentData => { // Create or get existing user const user = createUserFromData(commentData.user); return new Comment( commentData.id, commentData.content, user, commentData.score || 0, commentData.timestamp || "Just now", commentData.parentId || null, commentData.userVote || 0 ); }); } catch (error) { console.error('Error loading comments:', error); return []; } }; const APP_SETTINGS = { useLocalStorage: true, clearLocalStorage: false, comments: { sectionId: "5" } }; 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, enableReplies }) => { const [replyingTo, setReplyingTo] = useState(null); const [replyContent, setReplyContent] = useState(""); return (

setReplyingTo(commentId)} enableReplies={enableReplies} /> {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}
              enableReplies={enableReplies}
            />
          ))}
        </div>
      )}
    </div>
  );
};
const CommentContainer = ({ comment, currentUser, onDelete, onUpdate, onReply, enableReplies }) => {
  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="comment-action-button 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 && enableReplies && (
                <button
                  className="reply-button"
                  onClick={() => onReply(comment.id)}
                >
                  Reply
                </button>
              )}
              {comment.user === currentUser && (
                <>
                  <button
                    className="comment-action-button send-button"
                    onClick={() => setIsEditing(true)}
                  >
                    Edit
                  </button>
                  <button
                    className="comment-action-button delete-comment-button"
                    onClick={() => onDelete(comment)}
                  >
                    Delete
                  </button>
                </>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
};
const getUserCommentExamples = async (currentUser, currentSectionId) => {
  try {
    const response = await fetch('https://play.rosebud.ai/assets/chat_history.json?HfAe');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    
    // Filter comments from other sections that belong to the current user
    const userExamples = data.filter(comment => 
      comment.user.id === currentUser.id && 
      comment.sectionId !== currentSectionId
    ).slice(0, 3); // Get up to 3 examples
    
    return userExamples;
  } catch (error) {
    console.error('Error loading user examples:', error);
    return [];
  }
};
const CommentForm = ({ onSubmit, currentUser, comments, chatAI }) => {
  const [newComment, setNewComment] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);
  
  const generateText = async () => {
    setIsGenerating(true);
    
    // Get user's previous comments as examples
    const userExamples = await getUserCommentExamples(currentUser, APP_SETTINGS.comments.sectionId);
    console.group('User Comment Examples Debug Info');
    console.log('Current User:', currentUser);
    console.log('Current Section:', APP_SETTINGS.comments.sectionId);
    console.log('Found Examples:', userExamples);
    console.groupEnd();
    
    // Build context from existing comments
    const commentContext = (comments || [])
      .slice(0, 5) // Take last 5 comments for context
      .map(c => `${c.user.name}: ${c.content}`)
      .join('\n');
    
    // Build user style guide from examples
    const userStyleGuide = userExamples.length > 0 
      ? `IMPORTANT - USER STYLE MATCHING:
        This user has a distinct communication style. Here are some recent examples of their comments:
        ${userExamples.map(ex => `- ${ex.content}`).join('\n        ')}
        
        Please analyze these examples and:
        1. Match their typical word choices and vocabulary
        2. Mirror their usual level of detail and explanation
        3. Maintain their characteristic tone (formal/casual)
        4. Use similar sentence structures and complexity
        5. Keep consistent with their typical response length\n\n`
      : '';
    const contextDescription = `IMPORTANT - COMMENT SECTION CONTXT:
    You're participating in a discussion thread where users are sharing their thoughts and feedback.
    Here's the recent conversation context to help you understand the topic and tone:
      
    ${commentContext}
    
    The user has started typing a new comment. Help complete their thought in a way that fits naturally with the ongoing discussion.`;
    
    const prompt = `
    TASK: Given this message start: "${newComment}", provide a complete extended message that naturally incorporates and builds upon the original text while matching the user's characteristic style.
    GUIDELINES:
    1. Include the original text as part of your complete response WITHOUT quotation marks
    2. Naturally extend the thought with additional context and detail
    3. Add ONE follow-up sentence that builds upon the complete thought
    4. Match the original tone (casual, formal, excited, etc.)
    5. Ensure the response flows naturally as one complete message
    6. Never use quotation marks in your response
    EXAMPLES OF GOOD RESPONSES:
    Example 1:
    Start: I think the graphics in this game...
    Good response: I think the graphics in this game are incredibly detailed and lifelike. The way light reflects off surfaces creates an almost photorealistic experience.
    
    Example 2:
    Start: The character development really...
    Good response: The character development really shines through in emotional moments and personal growth. Each interaction reveals new layers of their personality.
    
    EXAMPLES OF WHAT NOT TO DO:
    Bad Example 1 (using quotes):
    Start: The interface looks...
    BAD: "The interface looks unfinished. The design really needs work."
    WHY: Response uses quotation marks
    
    ${userStyleGuide}
    
    ${contextDescription}
    
    `
;
    
    try {
      const response = await chatAI.getResponse(prompt);
      
      // Enhanced logging for debugging
      console.group('AI Generation Debug Info');
      console.log('Context:', commentContext);
      console.log('Context Description:', contextDescription);
      console.log('User Input:', newComment);
      console.log('AI Response:', response);
      console.log('Combined Result:', newComment + ' ' + response);
      console.log('Full Prompt:', prompt);
      console.groupEnd();
      
      // Replace the existing text with the AI's response
      setNewComment(response.trim());
    } catch (error) {
      console.error('Error generating text:', error);
    } finally {
      setIsGenerating(false);
    }
  };
  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..."
      />
      <div style={{ display: 'flex', gap: '0.75rem' }}>
        <button 
          type="button"
          className="comment-action-button send-button"
          disabled={!newComment.trim() || isGenerating}
          onClick={handleSubmit}
        >
          Send
        </button>
        <button
          type="button"
          className="generate-button"
          disabled={!newComment.trim() || isGenerating}
          onClick={generateText}
        >
          {isGenerating ? 'Generating...' : 'Generate'}
        </button>
      </div>
    </div>
  );
};
const App = () => {
  const chatAI = useMemo(() => new ChatAIClass(), []);
  const contentContainerRef = useRef(null);
  const [enableReplies] = useState(false); // Control variable for reply functionality
  useEffect(() => {
    clearLocalStorageData();
  }, []);
  
  const currentUser = USERS.currentUser;
  const [commentToDelete, setCommentToDelete] = useState(null);
  const [comments, setComments] = useLocalStorage('commentsV3', []);
  
  useEffect(() => {
    const loadComments = async () => {
      const loadedComments = await loadCommentsFromSection(APP_SETTINGS.comments.sectionId);
      setComments(loadedComments);
    };
    loadComments();
  }, []);
  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" ref={contentContainerRef}>
        <div className="comments-list">
          {buildCommentTree(comments).map(comment => (
            <CommentThread
              key={comment.id}
              comment={comment}
              currentUser={currentUser}
              onDelete={setCommentToDelete}
              enableReplies={enableReplies}
              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}
            comments={comments}
            chatAI={chatAI}
            onSubmit={(comment) => {
              setComments(prevComments => {
                const newComments = [...prevComments, comment];
                // Schedule scroll after state update
                setTimeout(() => {
                  if (contentContainerRef.current) {
                    contentContainerRef.current.scrollTo({
                      top: contentContainerRef.current.scrollHeight,
                      behavior: 'smooth'
                    });
                  }
                }, 100);
                return newComments;
              });
            }}
          />
        </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>