commit 8c8f38afe5a7136a8f3077e8becf0cb8e6a31095 parent 5c38fa8f945b9d4f1e22252222b6b46ed3872462 Author: AMIT DUTTA <amitdutta4255@gmail.com> Date: Sat, 17 Jan 2026 21:59:45 +0530 Add files via upload Diffstat:
| A | index.html | | | 552 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 552 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html @@ -0,0 +1,551 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- SEO & Verification --> + <meta name="google-site-verification" content="pwteHw44Ax3N2B1zkFzVJB7NIK0-xgQGRihK_vtZTF4" /> + <link rel="canonical" href="https://ada.amit.is-a.dev/" /> + <link rel="icon" type="image/x-icon" href="favicon-32x32.png" > + + <meta name="description" content="Ada Aranag - Your intelligent assistant for quick answers and engaging conversations. Specialized in Code Analysis and Generation."> + <meta name="keywords" content="Ada Aranag, Ada, AI, chatbot, assistant, intelligent, conversation, Ada AI, coding, programming, python, javascript, debugger"> + <meta name="author" content="Amit Dutta"> + + <!-- Open Graph / Facebook Meta Tags --> + <meta property="og:title" content="Ada // AI Coding Environment"> + <meta property="og:description" content="Your intelligent assistant for quick answers and engaging conversations. Specialized in Code Analysis and Generation."> + <meta property="og:image" content="https://ada.amit.is-a.dev/logo.png"> + <meta property="og:url" content="https://ada.amit.is-a.dev/"> + <meta property="og:type" content="website"> + <meta property="og:site_name" content="Ada Aranag"> + + <!-- Twitter Card Meta Tags --> + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:title" content="Ada // AI Coding Environment"> + <meta name="twitter:description" content="Your intelligent assistant for quick answers and engaging conversations. Specialized in Code Analysis."> + <meta name="twitter:image" content="https://ada.amit.is-a.dev/logo.png"> + + <!-- Security Headers (Attempt to fix Popup Warning) --> + <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups"> + + <!-- Schema.org JSON-LD --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "Website", + "name": "Ada Aranag", + "alternateName":["Ada Aranag","Ada AI Chatbot","AI Assistant","Intelligent Chatbot","Ada"], + "url": "https://ada.amit.is-a.dev" + } + </script> + + <title>Ada // AI Coding Environment</title> + + <!-- Tailwind CSS --> + <script src="https://cdn.tailwindcss.com"></script> + + <!-- Fonts --> + <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> + + <!-- Libraries --> + <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script> + + <!-- CodeMirror --> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script> + + <style> + :root { + --bg-main: #050505; + --accent: #bef264; /* Lime 300 */ + --border: rgba(255,255,255,0.1); + --glass: rgba(20, 20, 20, 0.8); + } + body { background: var(--bg-main); color: #e5e5e5; font-family: 'Inter', sans-serif; overflow: hidden; } + .font-mono { font-family: 'JetBrains Mono', monospace; } + + /* Scrollbar */ + ::-webkit-scrollbar { width: 6px; height: 6px; } + ::-webkit-scrollbar-track { background: var(--bg-main); } + ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } + ::-webkit-scrollbar-thumb:hover { background: var(--accent); } + + /* CodeMirror Overrides */ + .CodeMirror { height: 100% !important; font-family: 'JetBrains Mono', monospace; font-size: 13px; background: #0f0f10 !important; } + .cm-s-dracula.CodeMirror { background: #0f0f10 !important; } + + /* Markdown Styling */ + .prose p { margin-bottom: 0.8rem; line-height: 1.6; } + .prose h1, .prose h2, .prose h3 { color: var(--accent); font-weight: bold; margin-top: 1rem; margin-bottom: 0.5rem; } + .prose code { color: var(--accent); background: rgba(190, 242, 100, 0.1); padding: 2px 4px; border-radius: 4px; font-family: 'JetBrains Mono'; font-size: 0.85em; } + .prose pre { background: #111; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid var(--border); margin-bottom: 1rem; } + .prose pre code { background: transparent; padding: 0; color: #ccc; } + .prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; } + .prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; } + + /* Utilities */ + .glass-panel { background: var(--glass); backdrop-filter: blur(12px); border-right: 1px solid var(--border); } + .loader { border: 2px solid #333; border-top: 2px solid var(--accent); border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; } + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + + /* Mobile Tabs */ + .tab-btn.active { border-bottom: 2px solid var(--accent); color: var(--accent); } + </style> +</head> +<body class="h-screen w-screen flex flex-col md:flex-row relative"> + + <!-- LOGIN MODAL --> + <div id="auth-modal" class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center backdrop-blur-sm hidden"> + <div class="bg-neutral-900 border border-neutral-700 p-8 rounded-xl max-w-md w-full shadow-2xl relative overflow-hidden"> + <div class="absolute top-0 left-0 w-full h-1 bg-lime-300"></div> + <h2 class="text-2xl font-bold text-white mb-2 font-mono">System Login</h2> + <p class="text-neutral-400 mb-6 text-sm">Authenticate to access Ada Coding Environment.</p> + + <!-- Google Login --> + <button onclick="handleGoogleLogin()" class="w-full flex items-center justify-center gap-3 bg-white text-black py-3 rounded font-bold hover:bg-gray-200 transition-colors mb-6"> + <svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg> + Sign in with Google + </button> + + <!-- Divider --> + <div class="relative mb-6"> + <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-white/10"></div></div> + <div class="relative flex justify-center text-xs uppercase"><span class="bg-neutral-900 px-2 text-neutral-500">Or continue with email</span></div> + </div> + + <!-- Email/Pass Inputs --> + <div class="space-y-4 mb-4"> + <input type="email" id="email-input" placeholder="Email Address" class="w-full bg-neutral-800 border border-neutral-700 rounded p-3 text-white focus:border-lime-300 outline-none transition-colors placeholder-neutral-500 font-mono text-sm"> + <input type="password" id="password-input" placeholder="Password" class="w-full bg-neutral-800 border border-neutral-700 rounded p-3 text-white focus:border-lime-300 outline-none transition-colors placeholder-neutral-500 font-mono text-sm"> + </div> + + <!-- Email Buttons --> + <div class="flex gap-3"> + <button onclick="handleEmailLogin()" class="flex-1 bg-lime-300 text-black py-3 rounded font-bold hover:bg-lime-400 transition-colors text-sm font-mono uppercase">Login</button> + <button onclick="handleEmailSignUp()" class="flex-1 bg-transparent border border-neutral-600 text-white py-3 rounded font-bold hover:border-lime-300 hover:text-lime-300 transition-colors text-sm font-mono uppercase">Sign Up</button> + </div> + + <div class="text-center text-xs text-neutral-500 font-mono mt-6">SECURE CONNECTION // FIREBASE AUTH</div> + </div> + </div> + + <!-- MAIN UI --> + + <!-- LEFT PANE: SIDEBAR + CHAT --> + <div id="left-pane" class="w-full md:w-[40%] flex flex-col h-full border-r border-white/10 relative bg-neutral-900/50"> + + <!-- HEADER --> + <div class="h-14 border-b border-white/10 flex items-center justify-between px-4 bg-neutral-900"> + <div class="flex items-center gap-2"> + <div class="w-2 h-2 bg-lime-300 rounded-full animate-pulse"></div> + <span class="font-mono font-bold text-lime-300 tracking-wider">ADA // AI</span> + </div> + <div class="flex items-center gap-3"> + <button onclick="toggleSidebar()" class="md:hidden text-neutral-400 hover:text-white"> + <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> + </button> + <div id="user-profile" class="hidden md:flex items-center gap-2 cursor-pointer" onclick="signOutUser()"> + <img id="user-avatar" src="" class="w-6 h-6 rounded-full border border-lime-300/30"> + </div> + </div> + </div> + + <!-- HISTORY SIDEBAR (Off-canvas on mobile) --> + <div id="sidebar" class="absolute inset-y-0 left-0 w-64 bg-black border-r border-white/10 transform -translate-x-full transition-transform duration-300 z-40 md:relative md:translate-x-0 md:w-0 md:border-none md:hidden overflow-hidden"> + <!-- Populated via JS --> + </div> + + <!-- CHAT AREA --> + <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-6 relative"> + <!-- Welcome Message --> + <div class="flex gap-4"> + <div class="w-8 h-8 rounded bg-lime-300/10 flex items-center justify-center border border-lime-300/20 text-lime-300 text-xs font-mono">AI</div> + <div class="flex-1"> + <div class="text-sm text-lime-300 font-mono mb-1">Ada</div> + <div class="text-sm text-neutral-300 leading-relaxed prose"> + <p>Systems Online. Ready for code analysis.</p> + <p>Paste code, upload a file, or ask a question.</p> + </div> + </div> + </div> + </div> + + <!-- FILE UPLOAD PREVIEW --> + <div id="file-preview" class="hidden px-4 py-2 bg-neutral-800 border-t border-white/5 flex items-center justify-between"> + <div class="flex items-center gap-2 text-xs font-mono text-lime-300"> + <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> + <span id="file-name">code.py</span> + </div> + <button onclick="clearFile()" class="text-neutral-500 hover:text-white">×</button> + </div> + + <!-- INPUT AREA --> + <div class="p-4 bg-neutral-900 border-t border-white/10"> + <div class="relative flex items-end gap-2 bg-neutral-800 p-2 rounded-lg border border-white/5 focus-within:border-lime-300/50 transition-colors"> + <input type="file" id="file-upload" class="hidden" onchange="handleFileUpload(this)"> + <button onclick="document.getElementById('file-upload').click()" class="p-2 text-neutral-400 hover:text-lime-300 transition-colors" title="Upload Context"> + <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg> + </button> + <textarea id="chat-input" rows="1" class="flex-1 bg-transparent text-sm text-white focus:outline-none resize-none py-2 font-mono max-h-32" placeholder="Ask about code..."></textarea> + <button onclick="sendMessage()" id="send-btn" class="p-2 bg-lime-300 text-black rounded hover:bg-white transition-colors"> + <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg> + </button> + </div> + </div> + </div> + + <!-- RIGHT PANE: CODE EDITOR --> + <div id="right-pane" class="hidden md:flex flex-1 flex-col h-full bg-[#0f0f10] relative"> + <!-- Editor Header --> + <div class="h-14 border-b border-white/10 flex items-center justify-between px-4 bg-[#0f0f10]"> + <div class="flex items-center gap-3"> + <div class="text-xs font-mono text-neutral-500 uppercase tracking-wider">Editor Canvas</div> + <div id="temp-code-badge" class="hidden px-2 py-0.5 bg-lime-300/10 border border-lime-300/30 text-lime-300 text-[10px] rounded font-mono">temp_code loaded</div> + </div> + <div class="flex items-center gap-3"> + <select id="lang-select" onchange="changeLanguage()" class="bg-neutral-800 text-xs text-white border border-neutral-700 rounded px-2 py-1 outline-none"> + <option value="python">Python</option> + <option value="javascript">JavaScript</option> + <option value="clike">C / C++ / Java</option> + </select> + <button onclick="runCode()" class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 hover:bg-lime-300 hover:text-black border border-neutral-700 rounded text-xs font-mono uppercase transition-colors"> + <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> + Run / Compile + </button> + </div> + </div> + + <!-- Editor Container --> + <div class="flex-1 relative overflow-hidden"> + <textarea id="code-editor"></textarea> + </div> + </div> + + <!-- MOBILE TABS --> + <div class="md:hidden fixed bottom-0 left-0 w-full bg-neutral-900 border-t border-white/10 flex z-30"> + <button onclick="switchTab('chat')" id="tab-chat" class="flex-1 py-3 text-center text-xs font-mono uppercase tab-btn active">Chat</button> + <button onclick="switchTab('code')" id="tab-code" class="flex-1 py-3 text-center text-xs font-mono uppercase tab-btn text-neutral-500">Code Canvas</button> + </div> + + <!-- JS LOGIC: Converted to Modules to prevent 'firebase is not defined' --> + <script type="module"> + import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js"; + import { getAuth, GoogleAuthProvider, signInWithPopup, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js"; + import { getFirestore } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js"; + + // --- CONFIG --- + const firebaseConfig = { + apiKey: "AIzaSyAhyoNYUSXWIxdBiTxwSDcU7HkhhLEVlOc", + authDomain: "ada-ai-aranag.firebaseapp.com", + projectId: "ada-ai-aranag", + storageBucket: "ada-ai-aranag.firebasestorage.app", + messagingSenderId: "865895114061", + appId: "1:865895114061:web:5fd4493b0e388727e6c304" + }; + + // --- INIT FIREBASE --- + const app = initializeApp(firebaseConfig); + const auth = getAuth(app); + const db = getFirestore(app); + + let currentUser = null; + let currentSessionId = null; + + // --- INIT EDITOR --- + // CodeMirror is global (loaded via script tags in head) + const editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), { + lineNumbers: true, + mode: "python", + theme: "dracula", + lineWrapping: true, + indentUnit: 4 + }); + + window.addEventListener('resize', () => editor.refresh()); + + // --- AUTH LOGIC --- + onAuthStateChanged(auth, (user) => { + if (user) { + currentUser = user; + document.getElementById('auth-modal').classList.add('hidden'); + document.getElementById('user-avatar').src = user.photoURL || 'https://ui-avatars.com/api/?name=User'; + initSession(); + loadHistory(); + } else { + document.getElementById('auth-modal').classList.remove('hidden'); + } + }); + + // --- EXPORTED FUNCTIONS (for HTML onclick) --- + window.handleGoogleLogin = function() { + const provider = new GoogleAuthProvider(); + signInWithPopup(auth, provider).catch(e => alert(e.message)); + } + + window.handleEmailLogin = function() { + const email = document.getElementById('email-input').value; + const pass = document.getElementById('password-input').value; + if(!email || !pass) return alert("Please enter email and password"); + signInWithEmailAndPassword(auth, email, pass).catch(e => alert(e.message)); + } + + window.handleEmailSignUp = function() { + const email = document.getElementById('email-input').value; + const pass = document.getElementById('password-input').value; + if(!email || !pass) return alert("Please enter email and password"); + createUserWithEmailAndPassword(auth, email, pass).catch(e => alert(e.message)); + } + + window.signOutUser = function() { + if(confirm("Sign out?")) signOut(auth); + } + + // --- SESSION & LZSTRING --- + function initSession() { + const urlParams = new URLSearchParams(window.location.search); + const lzCode = urlParams.get('code'); + if (lzCode) { + try { + const decoded = LZString.decompressFromEncodedURIComponent(lzCode); + editor.setValue(decoded); + document.getElementById('temp-code-badge').classList.remove('hidden'); + } catch (e) { console.error("LZString Decode Error", e); } + } + if (!currentSessionId) { + currentSessionId = crypto.randomUUID(); + } + } + + // --- FILE UPLOAD --- + let fileContextContent = ""; + + window.handleFileUpload = function(input) { + const file = input.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = (e) => { + fileContextContent = e.target.result; + document.getElementById('file-preview').classList.remove('hidden'); + document.getElementById('file-name').innerText = file.name; + + if(file.name.endsWith('.py')) changeLanguage('python'); + if(file.name.endsWith('.js')) changeLanguage('javascript'); + if(file.name.endsWith('.c') || file.name.endsWith('.cpp')) changeLanguage('clike'); + }; + reader.readAsText(file); + } + + window.clearFile = function() { + fileContextContent = ""; + document.getElementById('file-upload').value = ""; + document.getElementById('file-preview').classList.add('hidden'); + } + + // --- CHAT LOGIC --- + const chatContainer = document.getElementById('chat-container'); + const chatInput = document.getElementById('chat-input'); + let chatHistory = []; + + chatInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + window.sendMessage(); + } + }); + + window.sendMessage = async function() { + const text = chatInput.value.trim(); + if (!text && !fileContextContent) return; + if (!currentUser) { + alert("Please login first."); + return; + } + + appendMessage('user', text); + chatInput.value = ""; + chatInput.style.height = 'auto'; + + const codeContext = editor.getValue(); + // UI: AI Loading + const loadingId = appendLoading(); + + try { + // Get fresh token + const token = await currentUser.getIdToken(); + + // Render Backend URL + const API_URL = 'https://ada-web.onrender.com/api/chat'; + + const response = await fetch(API_URL, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify({ + message: text, + history: chatHistory.slice(-10), + codeContext: codeContext, + fileContext: fileContextContent, + sessionId: currentSessionId + }) + }); + + if (!response.ok) { + if (response.status === 401) { + throw new Error("401 Unauthorized: Backend rejected the token. Ensure Render Backend uses the correct Firebase Admin SDK credentials for 'ada-ai-aranag'."); + } + throw new Error(`API Error: ${response.status}`); + } + + const reader = response.body.getReader(); + const decoder = new TextDecoder(); + let fullResponse = ""; + let aiMsgDiv = document.getElementById(loadingId); + + aiMsgDiv.innerHTML = '<div class="prose text-sm text-neutral-300 max-w-none"></div>'; + let contentDiv = aiMsgDiv.querySelector('.prose'); + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + + const chunk = decoder.decode(value); + fullResponse += chunk; + + const parts = parseResponse(fullResponse); + contentDiv.innerHTML = marked.parse(parts.text); + + if (parts.code) { + if (editor.getValue().trim() !== parts.code.trim()) { + editor.setValue(parts.code); + } + } + chatContainer.scrollTop = chatContainer.scrollHeight; + } + + chatHistory.push({ user: text, model: fullResponse }); + fileContextContent = ""; + document.getElementById('file-preview').classList.add('hidden'); + + } catch (e) { + document.getElementById(loadingId).innerText = "Error: " + e.message; + } + } + + function parseResponse(raw) { + const startMarker = "<<<CODE_START>>>"; + const endMarker = "<<<CODE_END>>>"; + let text = raw; + let code = null; + if (raw.includes(startMarker)) { + const parts = raw.split(startMarker); + text = parts[0]; + if (parts[1].includes(endMarker)) { + code = parts[1].split(endMarker)[0].trim(); + } else { + code = parts[1].trim(); + } + } + return { text, code }; + } + + function appendMessage(role, text) { + const div = document.createElement('div'); + div.className = "flex gap-4 animate-fade-in"; + if (role === 'user') { + div.innerHTML = ` + <img src="${currentUser.photoURL}" class="w-8 h-8 rounded-full border border-white/10"> + <div class="flex-1"> + <div class="text-sm text-neutral-500 font-mono mb-1">You</div> + <div class="text-sm text-white bg-neutral-800 p-3 rounded-lg border border-white/5 inline-block">${text}</div> + </div> + `; + } + chatContainer.appendChild(div); + chatContainer.scrollTop = chatContainer.scrollHeight; + } + + function appendLoading() { + const id = 'msg-' + Date.now(); + const div = document.createElement('div'); + div.className = "flex gap-4"; + div.innerHTML = ` + <div class="w-8 h-8 rounded bg-lime-300/10 flex items-center justify-center border border-lime-300/20 text-lime-300 text-xs font-mono">AI</div> + <div class="flex-1" id="${id}"> + <div class="flex gap-1 mt-2"> + <div class="typing-dot"></div><div class="typing-dot" style="animation-delay:0.2s"></div><div class="typing-dot" style="animation-delay:0.4s"></div> + </div> + </div> + `; + chatContainer.appendChild(div); + chatContainer.scrollTop = chatContainer.scrollHeight; + return id; + } + + // --- EDITOR ACTIONS (Exported to Window) --- + window.changeLanguage = function(val) { + const lang = val || document.getElementById('lang-select').value; + editor.setOption("mode", lang); + document.getElementById('lang-select').value = lang; + } + + window.runCode = function() { + const code = editor.getValue(); + const lang = document.getElementById('lang-select').value; + const compressed = LZString.compressToEncodedURIComponent(code); + let urlLang = 'python'; + if (lang === 'clike') urlLang = 'cpp'; + if (lang === 'javascript') urlLang = 'nodejs'; + window.open(`https://compiler.amit.is-a.dev/${urlLang}?code=${compressed}`, '_blank'); + } + + window.switchTab = function(tab) { + const left = document.getElementById('left-pane'); + const right = document.getElementById('right-pane'); + const tabChat = document.getElementById('tab-chat'); + const tabCode = document.getElementById('tab-code'); + if (tab === 'chat') { + left.classList.remove('hidden'); + right.classList.add('hidden'); + tabChat.classList.add('active', 'text-black', 'border-lime-300'); + tabChat.classList.remove('text-neutral-500'); + tabCode.classList.remove('active'); + tabCode.classList.add('text-neutral-500'); + } else { + left.classList.add('hidden'); + right.classList.remove('hidden'); + right.classList.add('flex'); + editor.refresh(); + tabCode.classList.add('active'); + tabCode.classList.remove('text-neutral-500'); + tabChat.classList.remove('active'); + tabChat.classList.add('text-neutral-500'); + } + } + + window.toggleSidebar = function() { + const sb = document.getElementById('sidebar'); + if (sb.classList.contains('-translate-x-full')) { + sb.classList.remove('-translate-x-full'); + } else { + sb.classList.add('-translate-x-full'); + } + } + + async function loadHistory() { + // Placeholder + } + + </script> +</body> +</html>+ \ No newline at end of file