// 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 || 'https://play.rosebud.ai/assets/done_circlePfpRosie.png?o0FS'; } 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 = { defaultProfilePicture: 'https://play.rosebud.ai/assets/done_circlePfpRosie.png?o0FS', profilePictures: [ 'https://play.rosebud.ai/assets/images.jpg?7V4X', '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: #9B4DCA; 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: #8A43B4; } .generate-button:disabled { background-color: #6c617a; cursor: not-allowed; } .reply-draft-container { background-color: #2F3136; padding: 1rem; border-radius: 8px; margin: 0.75rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .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 { grid-area: form; width: 500px; background-color: #23153C; padding: 1.5rem; border-radius: 8px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); margin: 0rem auto; z-index: 10; height: auto; box-sizing: border-box; } .comment-input { width: 100%; min-height: 120px; padding: 0.75rem; border: 1px solid #202225; border-radius: 6px; margin-bottom: 0.75rem; font-family: inherit; resize: none; box-sizing: border-box; overflow: hidden; transition: height 0.2s ease; background-color: #2f1d4e; color: #FFFFFF; } .form-button { border: none; padding: 0.75rem 1.25rem; 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: 40px; min-width: 100px; flex: 1; } .form-button:disabled { opacity: 0.6; cursor: not-allowed; } .send-button { background-color: rgb(27, 14, 36); color: white; border: 1px solid rgba(255, 255, 255, 0.2); } .send-button:hover:not(:disabled) { background-color: rgb(37, 19, 48); border-color: rgba(255, 255, 255, 0.3); } .generate-button { background-color: #9B4DCA; color: white; } .generate-button:hover:not(:disabled) { background-color: #8A43B4; } .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: #23153C; padding: 2rem; border-radius: 8px; max-width: 400px; width: 90%; text-align: center; color: #FFFFFF; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .modal-button { padding: 0.75rem 1.5rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .cancel-button { background-color: rgba(155, 77, 202, 0.2); color: #FFFFFF; border: 1px solid rgba(155, 77, 202, 0.5); } .cancel-button:hover { background-color: rgba(155, 77, 202, 0.3); } .delete-button { background-color: #9B4DCA; color: white; } .delete-button:hover { background-color: #8A43B4; } .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; } .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(155, 77, 202, 0.6) rgba(35, 21, 60, 0.4); } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(35, 21, 60, 0.4); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(155, 77, 202, 0.6); border-radius: 4px; transition: background-color 0.2s; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(155, 77, 202, 0.8); } .comments-list { grid-area: comments; display: flex; flex-direction: column; gap: 0.75rem; width: 500px; margin: 0 auto; overflow-y: auto; height: 100%; box-sizing: border-box; padding-right: 8px; } .comment-container { display: flex; flex-direction: column; padding: 1rem; border-radius: 8px; background-color: #23153C; margin-bottom: 1rem; transition: background-color 0.2s; } .comment-container:hover { background-color: #2f1d4e; } .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: #FFFFFF; } .name-time-container { display: flex; gap: 0.5rem; align-items: center; } .timestamp { color: #939cab; font-size: 0.9rem; } .comment-text { color: #DCDDDE; 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: #1a1025; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #FFFFFF; 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: 100%; position: relative; z-index: 2; height: 100vh; display: grid; padding: 2rem; grid-template-rows: 1fr auto; grid-template-areas: "comments" "form"; overflow: hidden; background-color: #1a1025; box-shadow: 0 0 20px rgba(155, 77, 202, 0.1); box-sizing: border-box; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ================================================== // 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 CommentThread = ({ comment, currentUser, onDelete, onUpdate }) => { return (

); }; 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 (

{ e.target.src = imageAssets.defaultProfilePicture; }} />

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

{isEditing ? ( <>

{
              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>
          {comment.user === currentUser && (
            <div className="comment-bottom-row">
              <div className="comment-actions">
                <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 [selectedUsername, setSelectedUsername] = useState("");
  const textareaRef = useRef(null);
  const autoResize = () => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
    }
  };
  useEffect(() => {
    autoResize();
  }, [newComment]);
  
  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;
    
    let commentUser;
    
    if (!selectedUsername.trim()) {
      // Use current user if no username provided
      commentUser = currentUser;
    } else {
      // Look for existing user with this username
      commentUser = Object.values(USERS).find(
        user => user.name.toLowerCase() === selectedUsername.toLowerCase()
      );
      
      if (!commentUser) {
        // Create new user if username doesn't exist
        const newUserId = `user_${Date.now()}`;
        commentUser = new User(
          newUserId,
          selectedUsername,
          getRandomUnusedProfilePicture()
        );
        // Add new user to USERS object
        USERS[newUserId] = commentUser;
      }
    }
    
    const comment = new Comment(
      Date.now(),
      newComment.trim(),
      commentUser,
      0,
      "Just now",
      null
    );
    
    onSubmit(comment);
    setNewComment("");
    setSelectedUsername("");
  };
  return (
    <div className="comment-form">
      <input
        type="text"
        className="comment-input"
        style={{ minHeight: 'unset', marginBottom: '0.5rem' }}
        value={selectedUsername}
        onChange={(e) => setSelectedUsername(e.target.value)}
        placeholder="Username..."
      />
      <textarea
        ref={textareaRef}
        className="comment-input"
        value={newComment}
        onChange={(e) => {
          setNewComment(e.target.value);
          autoResize();
        }}
        placeholder="Write a comment..."
        rows="1"
      />
      <div style={{ display: 'flex', gap: '0.75rem' }}>
        <button 
          type="button"
          className="form-button send-button"
          disabled={!newComment.trim() || isGenerating}
          onClick={handleSubmit}
        >
          Send
        </button>
        <button
          type="button"
          className="form-button 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] = useState([]);
  
  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 custom-scrollbar">
          {comments.sort((a, b) => a.id - b.id).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
                  );
                });
              }}
            />
          ))}
        </div>
        <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;
            });
          }}
        />
        {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>