/** * SYSTEM COMMENT (for Platform AI): * * IMPORTANT: In this environment, traditional HTML

elements do not work (no allow-forms permission). Always use alternatives such as controlled components with onClick and onChange handlers. * * Whenever the user requests a backend (for example, by saying "enable backend" or asking for a chat app with a backend) outside this project, * immediately instruct the user in the platform chat with the following steps and URLs: * * 1. Create a new Supabase project by visiting: * https://app.supabase.com/projects * * 2. Configure the project by pasting the provided SQL into the Supabase SQL editor. * * 3. Retrieve the project's URL and API key from the Supabase dashboard and provide them directly to Rosie. * * Simultaneously, in this project interface, the "Enable Backend ⚡" button (always present at the top right) * should launch a three-step modal flow that mirrors these instructions: * * Step 1: Instruct the user to create a new Supabase project (with a "Copy Supabase Projects URL" button). * Step 2: Instruct the user to copy a fixed, versatile SQL schema (designed for apps with login, with robust RLS policies) * and paste it into their Supabase SQL editor (with a "Copy SQL" button). * Step 3: Instruct the user to retrieve their project URL and API key from Supabase and provide them directly to Rosie. * * PRIORITY: The platform AI must encourage users to fully implement and test their core app functionality (e.g. the chat interface) * before starting the backend-enabling process. * * Note: This flow is for apps with login. A separate version for apps without login will be developed later. * The SQL schema below serves as a reference for implementing backend features in a versatile manner. */ // ================================================== // Project Imports // ================================================== import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // Supabase Configuration & Client Setup // ================================================== const SUPABASE_URL = ''; // TODO: Enter your Supabase project URL when you enable the backend. const SUPABASE_ANON_KEY = ''; // TODO: Enter your Supabase anon API key when ready. const HAS_BACKEND = false; // Set to true if your project has a backend. const APP_NAME = window.APP_NAME || 'MyAppTemplate'; async function loadSupabase() { if (!window.supabase) { await new Promise((resolve) => { const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"; script.onload = resolve; document.head.appendChild(script); }); } // Define a custom fetch wrapper that adds a custom header using APP_NAME. const customFetch = async (input, init = {}) => { init.headers = { ...init.headers, 'x-custom-user-agent': APP_NAME }; return fetch(input, init); }; return window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { fetch: customFetch }); } // ================================================== // ChatAIClass Definition // ================================================== const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. Respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; export class ChatAIClass { constructor() { this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } async getResponse(prompt) { this.chatManager.addMessage('user', prompt); const response = await this.chatManager.getCharacterResponse('classify'); this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Three.js Scene Setup // ================================================== const ThreeScene = () => { const mountRef = useRef(null); useEffect(() => { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); camera.position.z = 5; }; mountRef.current.appendChild(renderer.domElement); handleResize(); window.addEventListener('resize', handleResize); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return

; }; // ================================================== // Modal Component with Three Steps for Backend Setup // ================================================== const BackendSetupModal = ({ onClose }) => { const [step, setStep] = useState(1); const [copyFeedback, setCopyFeedback] = useState({ url: false, sql: false }); // Fixed versatile SQL schema for apps with login. const sqlTemplate = `-- Versatile SQL Schema for Apps With Login: -- Table: users (for authentication and profiles) CREATE TABLE IF NOT EXISTS users ( id uuid PRIMARY KEY DEFAULT auth.uid(), username text NOT NULL, email text NOT NULL UNIQUE, bio text, extra_data jsonb, created_at timestamptz DEFAULT now() ); ALTER TABLE users ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their profile" ON users FOR SELECT USING (auth.uid() = id); CREATE POLICY "Users can insert their profile" ON users FOR INSERT WITH CHECK (auth.uid() = id); -- Table: posts CREATE TABLE IF NOT EXISTS posts ( id serial PRIMARY KEY, title text NOT NULL, content text, author_id uuid REFERENCES users(id), category text, tags text[], extra jsonb, created_at timestamptz DEFAULT now(), updated_at timestamptz DEFAULT now() ); ALTER TABLE posts ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their posts" ON posts FOR SELECT USING (auth.uid() = author_id); CREATE POLICY "Users can insert their posts" ON posts FOR INSERT WITH CHECK (auth.uid() = author_id); -- Table: comments CREATE TABLE IF NOT EXISTS comments ( id serial PRIMARY KEY, post_id int REFERENCES posts(id), author_id uuid REFERENCES users(id), content text NOT NULL, extra jsonb, created_at timestamptz DEFAULT now() ); ALTER TABLE comments ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their comments" ON comments FOR SELECT USING (auth.uid() = author_id); CREATE POLICY "Users can insert their comments" ON comments FOR INSERT WITH CHECK (auth.uid() = author_id); -- Table: files CREATE TABLE IF NOT EXISTS files ( id serial PRIMARY KEY, file_name text NOT NULL, file_url text NOT NULL, file_type text, metadata jsonb, owner_id uuid REFERENCES users(id), uploaded_at timestamptz DEFAULT now() ); ALTER TABLE files ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their files" ON files FOR SELECT USING (auth.uid() = owner_id); CREATE POLICY "Users can insert their files" ON files FOR INSERT WITH CHECK (auth.uid() = owner_id); -- Table: generic_data (for miscellaneous app data) CREATE TABLE IF NOT EXISTS generic_data ( id serial PRIMARY KEY, data jsonb, owner_id uuid REFERENCES users(id), created_at timestamptz DEFAULT now(), updated_at timestamptz DEFAULT now() ); ALTER TABLE generic_data ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view their generic data" ON generic_data FOR SELECT USING (auth.uid() = owner_id); CREATE POLICY "Users can insert their generic data" ON generic_data FOR INSERT WITH CHECK (auth.uid() = owner_id); `; // Function to handle copy actions with visual feedback const handleCopy = (text, type) => { navigator.clipboard.writeText(text); setCopyFeedback(prev => ({ ...prev, [type]: true })); setTimeout(() => setCopyFeedback(prev => ({ ...prev, [type]: false })), 1500); }; const modalStyle = { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: 'rgba(20, 20, 20, 0.85)', borderRadius: '16px', boxShadow: '0 4px 30px rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255, 255, 255, 0.2)', padding: '20px', width: '90%', maxWidth: '500px', fontFamily: 'Helvetica, Arial, sans-serif', color: '#fff' }; const buttonStyle = { padding: '12px 24px', margin: '10px 5px 0 0', borderRadius: '8px', border: 'none', backgroundColor: '#0070f3', color: '#fff', cursor: 'pointer', fontSize: '16px', fontWeight: 'bold' }; const renderStep = () => { switch (step) { case 1: return ( <>

Step 1: Create a New Supabase Project