// App.jsx import React, { useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; const NOTIFICATIONS_DATA = [ { id: 'notification0', type: 'private_message', user: { name: 'Rizky Hasanuddin', avatar: 'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm' }, content: { message: "Hello, thanks for setting up the Chess Club. I've been a member for a few weeks now and I'm already having lots of fun and improving my game." }, timestamp: '5 days ago' }, { id: 'notification1', type: 'like', user: { name: 'Mark Webber', avatar: 'https://play.rosebud.ai/assets/avatar-mark-webber.webp?U0qS' }, content: { title: 'React Tutorial for Beginners', link: 'https://play.rosebud.ai/p/a700be2f-f2de-4d7b-a2e2-06c9aa7dbfc9' }, timestamp: '1m ago' }, { id: 'notification2', type: 'follow', user: { name: 'Jacob Thompson', avatar: 'https://play.rosebud.ai/assets/avatar-jacob-thompson.webp?V4SN' }, timestamp: '2m ago' }, { id: 'notification3', type: 'like', user: { name: 'Rizky Hasanuddin', avatar: 'https://play.rosebud.ai/assets/avatar-rizky-hasanuddin.webp?D6lm' }, content: { title: 'Building a Chat App with WebSocket', link: 'https://play.rosebud.ai/p/a700be2f-f2de-4d7b-a2e2-06c9aa7dbfc9' }, timestamp: '5m ago' }, { id: 'notification4', type: 'follow', user: { name: 'Kimberly Smith', avatar: 'https://play.rosebud.ai/assets/avatar-kimberly-smith.webp?AZSq' }, timestamp: '10m ago' }, { id: 'notification5', type: 'like', user: { name: 'Nathan Peterson', avatar: 'https://play.rosebud.ai/assets/avatar-nathan-peterson.webp?yMzk' }, content: { title: 'Advanced JavaScript Concepts', link: 'https://play.rosebud.ai/p/a700be2f-f2de-4d7b-a2e2-06c9aa7dbfc9' }, timestamp: '15m ago' }, { id: 'notification6', type: 'follow', user: { name: 'Anna Kim', avatar: 'https://play.rosebud.ai/assets/avatar-anna-kim.webp?DlUI' }, timestamp: '20m ago' } ]; // Styles const styles = ` .private-message-preview { margin-top: 0.5rem; padding: 1rem; border-radius: 5px; background-color: #ffffff; color: #5E6778; font-size: 0.9rem; line-height: 1.4; border: 1px solid #DDE7EE; cursor: pointer; transition: background-color 0.2s ease; } .private-message-preview:hover { background-color: #E5EFFA; } .notifications-header-container { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .notifications-header { font-size: 1.5rem; font-weight: 800; color: #1C202B; margin: 0; } .notifications-counter { background-color: #0A327B; color: #ffffff; padding: 0.125rem 0.75rem; border-radius: 6px; font-weight: 800; font-size: 1rem; } .notifications-list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .notification-button { display: flex; align-items: flex-start; padding: 0.75rem 1rem; gap: 1rem; border-radius: 8px; background-color: #f7f2fa; transition: background-color 0.2s ease; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; } .notification-button:hover { background-color: #f0e7f6; } .profile-picture { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; } .message-content { flex: 1; } .message-text { color: #1C202B; line-height: 1.4; margin: 0; font-size: 1.05rem; } .content-link { color: #0A327B; text-decoration: none; font-weight: 600; } .content-link:hover { text-decoration: underline; } .user-name { font-weight: 800; color: #1C202B; text-decoration: none; font-size: 1.05rem; } .user-name:hover { color: #0A327B; } .timestamp { color: #939CAD; font-size: 0.875rem; margin-top: 0.25rem; } .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: 2rem; overflow-y: auto; overflow-x: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; scrollbar-gutter: stable; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); import ReactDOM from 'react-dom/client'; // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const [readNotifications, setReadNotifications] = useState(new Set()); const handleNotificationClick = useCallback((notificationId) => { setReadNotifications(prev => { const newSet = new Set(prev); newSet.add(notificationId); return newSet; }); }, []); return (

Notifications

{NOTIFICATIONS_DATA.length - readNotifications.size}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();