Spaces:

Antaram
/

chatbot

Sleeping

App Files Files Community

Antaram commited on Dec 5, 2025

Commit

3593ea7

verified ·

1 Parent(s): e8cfa55

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +306 -270

templates/index.html CHANGED Viewed

@@ -2,12 +2,14 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <!-- Viewport tweak for mobile inputs -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Antaram Chat</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
@@ -21,20 +23,16 @@
             0% { opacity: 0; transform: translateY(20px); }
             100% { opacity: 1; transform: translateY(0); }
         }
-        @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
-        @keyframes toastSlide {
-            0% { transform: translateY(-100%); opacity: 0; }
-            100% { transform: translateY(0); opacity: 1; }
         }
         .animate-enter { animation: slideUpFade 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
         .fade-in { animation: fadeIn 0.4s ease-out forwards; }
-        .toast-enter { animation: toastSlide 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
-        /* --- UI Polish --- */
         .glass-panel {
             background: rgba(255, 255, 255, 0.03);
             backdrop-filter: blur(16px);
@@ -42,376 +40,414 @@
             border: 1px solid rgba(255, 255, 255, 0.08);
         }
-        .btn-arrow { transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
-        .group:hover .btn-arrow { transform: translate(2px, -2px); }
-        /* Custom Scrollbar */
         .custom-scroll::-webkit-scrollbar { width: 4px; }
         .custom-scroll::-webkit-scrollbar-track { background: transparent; }
-        .custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); border-radius: 20px; }
-        /* Mobile specific fixes */
-        .mobile-input-bar {
-            padding-bottom: env(safe-area-inset-bottom, 20px);
-        }
     </style>
 </head>
 <body class="relative w-full h-[100dvh] overflow-hidden flex flex-col">
-    <!-- BACKGROUND LAYER -->
-    <div class="absolute inset-0 z-0 pointer-events-none">
-        <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=2068&auto=format&fit=crop"
-             class="w-full h-full object-cover opacity-60" alt="bg">
-        <div class="absolute inset-0 bg-gradient-to-b from-[#11100f]/40 via-[#11100f]/90 to-[#11100f]"></div>
-        <div class="absolute inset-0 bg-black/40 backdrop-blur-[2px]"></div>
     </div>
-    <!-- TOAST NOTIFICATION -->
-    <div id="toast" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 hidden">
-        <div class="glass-panel px-6 py-3 rounded-full shadow-2xl flex items-center gap-3 toast-enter">
-            <div class="bg-green-500/20 text-green-400 p-1 rounded-full">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
-            </div>
-            <span class="text-sm font-medium tracking-wide" id="toastMsg">Link Copied</span>
         </div>
     </div>
-    <!-- HOME VIEW -->
     <div id="homeView" class="relative z-10 w-full h-full flex items-center justify-center p-4">
         <div class="w-full max-w-sm animate-enter">
-            <div class="glass-panel rounded-[32px] p-6 md:p-8 shadow-2xl">
-                <div class="text-center mb-8">
-                    <h1 class="text-4xl font-medium tracking-tight text-white mb-1">Connect.</h1>
-                    <p class="text-white/40 text-xs font-medium tracking-widest uppercase">Secure Realtime Chat</p>
                 </div>
-                <!-- Inputs -->
-                <div class="space-y-4 mb-6">
                     <div>
-                        <label class="block text-[10px] font-bold text-white/40 uppercase tracking-wider mb-1 ml-2">Identity</label>
-                        <input type="text" id="usernameInputHome" placeholder="Display Name" maxlength="20"
-                               class="w-full bg-black/20 text-white px-5 py-4 rounded-2xl border border-white/5 focus:border-white/30 focus:bg-black/40 focus:outline-none transition-all placeholder-white/20 text-sm">
                     </div>
                 </div>
-                <!-- Actions -->
-                <button onclick="createRoom()"
-                        class="group w-full bg-[#F0EFE9] text-[#1C1A19] hover:bg-white px-6 py-4 rounded-2xl flex items-center justify-center gap-3 font-semibold text-base transition-all transform active:scale-[0.98] shadow-lg mb-6">
-                    <span id="createBtnText">Start New Room</span>
-                    <div class="btn-arrow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></div>
-                </button>
-                <div class="relative flex py-2 items-center">
-                    <div class="flex-grow border-t border-white/10"></div>
-                    <span class="flex-shrink-0 mx-4 text-white/30 text-[10px] uppercase font-bold tracking-wider">Or Join</span>
-                    <div class="flex-grow border-t border-white/10"></div>
-                </div>
-                <div class="flex gap-2 mt-4">
-                    <input type="text" id="joinRoomId" placeholder="Room ID"
-                           class="flex-1 bg-black/20 text-white px-5 py-3 rounded-2xl border border-white/5 focus:border-white/30 focus:outline-none text-sm placeholder-white/20 uppercase font-mono tracking-wider">
-                    <button onclick="joinRoom()" class="bg-white/10 hover:bg-white/20 active:bg-white/30 text-white font-medium px-5 py-3 rounded-2xl border border-white/5 transition-colors">
-                        Join
                     </button>
                 </div>
             </div>
         </div>
     </div>
-    <!-- CHAT VIEW -->
     <div id="chatView" class="hidden relative z-10 w-full h-full flex flex-col fade-in">
-        <!-- Chat Header -->
         <header class="flex-none pt-4 pb-3 px-4 flex justify-between items-center glass-panel border-b-0 rounded-b-[24px] mx-2 mt-2 z-20">
             <div class="flex items-center gap-3">
-                <div onclick="leaveRoom()" class="bg-white/5 p-2 rounded-full active:bg-white/10 cursor-pointer">
                     <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
-                </div>
-                <div class="flex flex-col">
                     <div class="flex items-center gap-2">
-                        <h1 class="text-sm font-semibold text-white tracking-wide">Room <span id="roomIdDisplay" class="font-mono text-white/70"></span></h1>
-                        <!-- Share Button -->
-                        <button onclick="copyShareLink()" class="text-white/40 hover:text-green-400 transition-colors">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
-                        </button>
                     </div>
-                    <p class="text-[10px] text-green-400/80 font-medium flex items-center gap-1">
-                        <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
-                        <span id="userCount">1</span> Online
-                    </p>
                 </div>
             </div>
         </header>
-        <!-- Messages Area -->
         <main class="flex-1 w-full max-w-3xl mx-auto px-4 overflow-hidden flex flex-col relative">
-            <div id="messages" class="flex-1 overflow-y-auto custom-scroll space-y-3 pt-4 pb-[100px]">
-                <!-- Messages go here -->
             </div>
         </main>
-        <!-- Fixed Bottom Input Area -->
-        <div class="fixed bottom-0 left-0 w-full z-30 px-3 pb-3 mobile-input-bar">
-            <!-- Floating File Info -->
-            <div id="selectedFileInfo" class="mx-auto max-w-3xl mb-2 glass-panel px-4 py-2 rounded-xl flex items-center justify-between hidden animate-enter">
-                <span class="text-xs text-white/80 truncate max-w-[200px]" id="fileNameDisplay">file.name</span>
-                <button onclick="clearFile()" class="text-white/40 p-1"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
             </div>
-            <!-- Input Bar -->
-            <div class="max-w-3xl mx-auto glass-panel rounded-[26px] p-1.5 flex items-center gap-2 shadow-2xl bg-black/40">
                 <input type="file" id="fileInput" class="hidden" onchange="handleFileSelect()">
                 <button onclick="document.getElementById('fileInput').click()"
-                        class="p-3 text-white/50 hover:text-white active:bg-white/10 rounded-full transition-colors flex-shrink-0">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
                 </button>
-                <input type="text" id="messageInput" placeholder="Message..." autocomplete="off"
-                       class="flex-1 bg-transparent text-white px-2 py-3 focus:outline-none placeholder-white/30 text-[15px] font-light min-w-0"
                        onkeypress="if(event.key === 'Enter') sendMessage()">
                 <button onclick="sendMessage()"
-                        class="bg-[#F0EFE9] text-black w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-lg active:scale-90 transition-transform">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                 </button>
             </div>
         </div>
     </div>
     <script>
         let ws = null;
         let currentRoomId = null;
-        let currentUsername = 'Guest';
         let selectedFile = null;
-        // 1. URL Parameter Check (Share Link Logic)
         window.addEventListener('DOMContentLoaded', () => {
             const urlParams = new URLSearchParams(window.location.search);
-            const roomParam = urlParams.get('room');
-            if (roomParam) {
-                document.getElementById('joinRoomId').value = roomParam;
-                // Optional: Highlight the input or focus user name
-                document.getElementById('usernameInputHome').focus();
             }
         });
-        // 2. Copy Link Logic
-        function copyShareLink() {
-            if (!currentRoomId) return;
-            // Constructs: https://antaram-chatbot.hf.space/?room=ABCD
-            const shareUrl = `${window.location.origin}/?room=${currentRoomId}`;
-            navigator.clipboard.writeText(shareUrl).then(() => {
-                showToast("Link Copied!");
-            }).catch(err => {
-                showToast("Failed to copy");
-            });
         }
         function showToast(msg) {
-            const toast = document.getElementById('toast');
             document.getElementById('toastMsg').innerText = msg;
-            toast.classList.remove('hidden');
-            setTimeout(() => {
-                toast.classList.add('hidden');
-            }, 2500);
         }
-        function showHome() {
-            document.getElementById('homeView').classList.remove('hidden');
-            document.getElementById('chatView').classList.add('hidden');
-            if (ws) { ws.close(); ws = null; }
-            currentRoomId = null;
-            clearFile();
-            document.getElementById('messages').innerHTML = '';
-            // Clear URL param on leave so reload doesn't auto-join
-            window.history.pushState({}, document.title, window.location.pathname);
         }
-        function showChat(roomId) {
-            document.getElementById('homeView').classList.add('hidden');
-            document.getElementById('chatView').classList.remove('hidden');
-            document.getElementById('roomIdDisplay').textContent = roomId;
-            currentRoomId = roomId;
-            document.getElementById('messageInput').focus();
-        }
-        function getUsername() {
-            return document.getElementById('usernameInputHome').value.trim();
         }
         async function createRoom() {
-            currentUsername = getUsername();
-            if (!currentUsername) {
-                document.getElementById('usernameInputHome').focus();
-                showToast("Enter a name first");
-                return;
-            }
-            const btnText = document.getElementById('createBtnText');
-            btnText.textContent = "Creating...";
             try {
-                const response = await fetch('/create-room', { method: 'POST' });
-                const data = await response.json();
-                if (data.success) joinChatRoom(data.room_id);
-            } catch (error) {
-                alert('Server connection failed.');
-            } finally {
-                btnText.textContent = "Start New Room";
             }
         }
         function joinRoom() {
-            currentUsername = getUsername();
-            if (!currentUsername) {
-                document.getElementById('usernameInputHome').focus();
-                showToast("Enter a name first");
-                return;
-            }
-            const roomId = document.getElementById('joinRoomId').value.trim().toUpperCase();
-            if (!roomId) {
-                showToast("Enter Room ID");
-                return;
-            }
-            joinChatRoom(roomId);
         }
-        function joinChatRoom(roomId) {
-            showChat(roomId);
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const wsUrl = `${protocol}//${window.location.host}/ws/${roomId}`;
-            ws = new WebSocket(wsUrl);
-            ws.onopen = () => console.log("Connected");
-            ws.onmessage = (event) => handleIncomingData(JSON.parse(event.data));
-            ws.onclose = (event) => {
-                if (event.code === 1008) {
-                    alert('Room not found or invalid.');
-                    showHome();
                 }
             };
         }
-        function handleIncomingData(data) {
-            if (data.type === 'system') {
-                addMessage(data.message, 'system');
-                if(data.userCount !== undefined) document.getElementById('userCount').textContent = data.userCount;
-            } else if (data.type === 'message') {
-                if (data.file) addFileMessage(data.username, data.file);
-                else addMessage(data.text, 'message', data.username);
-            }
-        }
-        function handleFileSelect() {
-            const fileInput = document.getElementById('fileInput');
-            if (fileInput.files.length > 0) {
-                selectedFile = fileInput.files[0];
-                document.getElementById('fileNameDisplay').textContent = `📎 ${selectedFile.name}`;
-                document.getElementById('selectedFileInfo').classList.remove('hidden');
             }
-        }
-        function clearFile() {
-            selectedFile = null;
-            document.getElementById('fileInput').value = '';
-            document.getElementById('selectedFileInfo').classList.add('hidden');
-        }
-        async function sendFile() {
-            if (!selectedFile) return;
-            const formData = new FormData();
-            formData.append('file', selectedFile);
-            // Add temp loading msg
-            addMessage(`Uploading ${selectedFile.name}...`, 'system');
-            try {
-                const response = await fetch(`/upload-file/${currentRoomId}`, { method: 'POST', body: formData });
-                const data = await response.json();
-                if (data.success) {
-                    ws.send(JSON.stringify({ type: 'message', username: currentUsername, file: data.file_info }));
-                    clearFile();
-                }
-            } catch (e) { showToast("Upload failed"); }
-        }
-        function sendMessage() {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            if (selectedFile) { sendFile(); return; }
-            const input = document.getElementById('messageInput');
-            const text = input.value.trim();
-            if (!text) return;
-            ws.send(JSON.stringify({ type: 'message', username: currentUsername, text: text }));
-            input.value = '';
-        }
-        function addMessage(text, type, username = '') {
-            const container = document.getElementById('messages');
-            const el = document.createElement('div');
-            const isSelf = username === currentUsername;
-            if (type === 'system') {
-                el.className = 'flex justify-center my-3';
-                el.innerHTML = `<span class="text-[10px] uppercase font-bold tracking-widest text-white/30 bg-white/5 px-2 py-1 rounded-md">${text}</span>`;
-            } else {
-                el.className = `flex w-full ${isSelf ? 'justify-end' : 'justify-start'} animate-enter`;
-                const bg = isSelf ? 'bg-[#F0EFE9] text-black' : 'glass-panel text-white';
                 el.innerHTML = `
                     <div class="max-w-[85%] flex flex-col ${isSelf ? 'items-end' : 'items-start'}">
-                        ${!isSelf ? `<span class="text-[10px] text-white/50 mb-1 ml-1">${username}</span>` : ''}
                         <div class="${bg} px-4 py-2.5 rounded-[18px] ${isSelf ? 'rounded-tr-sm' : 'rounded-tl-sm'} shadow-sm text-[15px] leading-snug break-words">
-                            ${text}
                         </div>
                     </div>`;
             }
-            container.appendChild(el);
             container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
         }
-        function addFileMessage(username, fileInfo) {
-            const container = document.getElementById('messages');
-            const el = document.createElement('div');
-            const isSelf = username === currentUsername;
-            el.className = `flex w-full ${isSelf ? 'justify-end' : 'justify-start'} animate-enter`;
-            const bg = isSelf ? 'bg-[#F0EFE9] text-black' : 'glass-panel text-white';
-            let content = fileInfo.file_type.startsWith('image/')
-                ? `<img src="${fileInfo.file_url}" class="rounded-xl mt-1 max-h-48 object-cover"/>`
-                : `<a href="${fileInfo.file_url}" target="_blank" class="flex items-center gap-2 underline text-sm pt-1">Download ${fileInfo.original_name}</a>`;
-            el.innerHTML = `
-                <div class="max-w-[85%] flex flex-col ${isSelf ? 'items-end' : 'items-start'}">
-                    ${!isSelf ? `<span class="text-[10px] text-white/50 mb-1 ml-1">${username}</span>` : ''}
-                    <div class="${bg} p-2 rounded-[18px] ${isSelf ? 'rounded-tr-sm' : 'rounded-tl-sm'} shadow-sm">
-                        ${content}
-                    </div>
-                </div>`;
-            container.appendChild(el);
-            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
         }
-        // Enter key handling for home inputs
-        document.getElementById('usernameInputHome').addEventListener('keypress', (e) => {
-            if(e.key === 'Enter') {
-                if(document.getElementById('joinRoomId').value) joinRoom();
-                else createRoom();
             }
-        });
-        function leaveRoom() {
-            if (ws) ws.close();
-            showHome();
         }
-        showHome();
     </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Antaram Chat AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Marked.js for AI Markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         body {
             font-family: 'Inter', sans-serif;
             0% { opacity: 0; transform: translateY(20px); }
             100% { opacity: 1; transform: translateY(0); }
         }
+        @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
+        @keyframes pulse-ring {
+            0% { transform: scale(0.8); opacity: 0.5; }
+            100% { transform: scale(1.2); opacity: 0; }
         }
         .animate-enter { animation: slideUpFade 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
         .fade-in { animation: fadeIn 0.4s ease-out forwards; }
+        /* --- Glass & UI --- */
         .glass-panel {
             background: rgba(255, 255, 255, 0.03);
             backdrop-filter: blur(16px);
             border: 1px solid rgba(255, 255, 255, 0.08);
         }
+        /* AI Message Specifics */
+        .ai-bubble {
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+        }
+        .ai-cursor::after {
+            content: '▋';
+            display: inline-block;
+            vertical-align: bottom;
+            animation: blink 1s step-start infinite;
+            color: #60a5fa;
+            font-size: 0.8em;
+            margin-left: 2px;
+        }
+        @keyframes blink { 50% { opacity: 0; } }
+        /* Scrollbar */
         .custom-scroll::-webkit-scrollbar { width: 4px; }
         .custom-scroll::-webkit-scrollbar-track { background: transparent; }
+        .custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); border-radius: 20px; }
+        /* Mobile Input fix */
+        .mobile-input-bar { padding-bottom: env(safe-area-inset-bottom, 20px); }
     </style>
 </head>
 <body class="relative w-full h-[100dvh] overflow-hidden flex flex-col">
+    <!-- Background -->
+    <div class="absolute inset-0 z-0 pointer-events-none select-none">
+        <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop"
+             class="w-full h-full object-cover opacity-40" alt="bg">
+        <div class="absolute inset-0 bg-gradient-to-b from-[#11100f]/50 via-[#11100f]/95 to-[#11100f]"></div>
+        <div class="absolute inset-0 bg-black/40 backdrop-blur-[1px]"></div>
     </div>
+    <!-- Toast Notification -->
+    <div id="toast" class="fixed top-6 left-1/2 transform -translate-x-1/2 z-50 hidden transition-all duration-300">
+        <div class="glass-panel px-6 py-3 rounded-full shadow-2xl flex items-center gap-3">
+            <span class="text-sm font-medium tracking-wide" id="toastMsg">Notification</span>
         </div>
     </div>
+    <!-- VIEW 1: LOGIN / HOME -->
     <div id="homeView" class="relative z-10 w-full h-full flex items-center justify-center p-4">
         <div class="w-full max-w-sm animate-enter">
+            <div class="glass-panel rounded-[32px] p-6 md:p-8 shadow-2xl relative overflow-hidden">
+                <!-- Decorative Orb -->
+                <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-500/20 rounded-full blur-3xl"></div>
+                <div class="text-center mb-8 relative">
+                    <h1 class="text-4xl font-medium tracking-tight text-white mb-1">Antaram.ai</h1>
+                    <p class="text-white/40 text-xs font-medium tracking-widest uppercase">Collaborative Intelligence</p>
                 </div>
+                <!-- Input Group -->
+                <div class="space-y-5 mb-8">
                     <div>
+                        <label class="block text-[10px] font-bold text-white/40 uppercase tracking-wider mb-2 ml-2">Identity</label>
+                        <input type="text" id="usernameInput" placeholder="Your Name" maxlength="25"
+                               class="w-full bg-black/30 text-white px-5 py-4 rounded-2xl border border-white/10 focus:border-blue-500/50 focus:bg-black/50 focus:outline-none transition-all placeholder-white/20 text-sm">
+                    </div>
+                    <!-- Dynamic Room Input (Auto-filled if URL has ID) -->
+                    <div id="roomInputContainer" class="hidden">
+                        <label class="block text-[10px] font-bold text-white/40 uppercase tracking-wider mb-2 ml-2">Room ID</label>
+                        <input type="text" id="roomInput" placeholder="Room Code"
+                               class="w-full bg-black/30 text-white px-5 py-4 rounded-2xl border border-white/10 focus:outline-none text-sm font-mono tracking-wider text-blue-300">
                     </div>
                 </div>
+                <!-- Buttons -->
+                <div id="actionButtons">
+                    <button onclick="createRoom()"
+                            class="group w-full bg-[#F0EFE9] text-[#1C1A19] hover:bg-white px-6 py-4 rounded-2xl flex items-center justify-center gap-3 font-semibold text-base transition-all shadow-lg active:scale-[0.98] mb-4">
+                        <span>Create New Space</span>
+                    </button>
+                    <button onclick="toggleJoinInput()"
+                            class="w-full bg-white/5 hover:bg-white/10 text-white px-6 py-4 rounded-2xl font-medium text-sm transition-colors border border-white/5">
+                        Join Existing Room
                     </button>
                 </div>
+                <!-- Join Confirm Button (Hidden initially) -->
+                <button id="joinConfirmBtn" onclick="joinRoom()" class="hidden w-full bg-blue-600 hover:bg-blue-500 text-white px-6 py-4 rounded-2xl font-semibold transition-all shadow-lg shadow-blue-900/20">
+                    Join Room
+                </button>
             </div>
         </div>
     </div>
+    <!-- VIEW 2: CHAT INTERFACE -->
     <div id="chatView" class="hidden relative z-10 w-full h-full flex flex-col fade-in">
+        <!-- Header -->
         <header class="flex-none pt-4 pb-3 px-4 flex justify-between items-center glass-panel border-b-0 rounded-b-[24px] mx-2 mt-2 z-20">
             <div class="flex items-center gap-3">
+                <button onclick="leaveRoom()" class="bg-white/5 p-2 rounded-full active:bg-white/10 hover:bg-white/10 transition-colors">
                     <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
+                </button>
+                <div>
                     <div class="flex items-center gap-2">
+                        <span class="text-xs font-bold text-white/40 uppercase tracking-wider">Room</span>
+                        <h1 id="displayRoomId" class="text-sm font-bold text-white font-mono tracking-wide">...</h1>
+                    </div>
+                    <div class="flex items-center gap-2 mt-0.5">
+                        <span class="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
+                        <p class="text-[10px] text-white/60"><span id="userCount">1</span> Active</p>
                     </div>
                 </div>
             </div>
+            <button onclick="copyLink()" class="bg-blue-500/10 text-blue-400 px-3 py-1.5 rounded-lg text-xs font-medium border border-blue-500/20 hover:bg-blue-500/20 transition-colors flex items-center gap-2">
+                <span>Share</span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+            </button>
         </header>
+        <!-- Chat Area -->
         <main class="flex-1 w-full max-w-3xl mx-auto px-4 overflow-hidden flex flex-col relative">
+            <div id="messages" class="flex-1 overflow-y-auto custom-scroll space-y-4 pt-4 pb-[110px]">
+                <!-- Chat Messages Injected Here -->
             </div>
         </main>
+        <!-- Input Area -->
+        <div class="fixed bottom-0 left-0 w-full z-30 px-3 pb-3 mobile-input-bar transition-transform duration-300">
+            <!-- File Preview -->
+            <div id="filePreview" class="mx-auto max-w-3xl mb-2 glass-panel px-4 py-2 rounded-xl flex items-center justify-between hidden animate-enter">
+                <span class="text-xs text-blue-300 truncate max-w-[200px]" id="fileName">file</span>
+                <button onclick="clearFile()" class="text-white/40 hover:text-white p-1">&times;</button>
             </div>
+            <!-- Main Input -->
+            <div class="max-w-3xl mx-auto glass-panel rounded-[26px] p-1.5 flex items-center gap-2 shadow-2xl bg-[#0a0a0a]/60 backdrop-blur-xl border-white/10">
                 <input type="file" id="fileInput" class="hidden" onchange="handleFileSelect()">
                 <button onclick="document.getElementById('fileInput').click()"
+                        class="p-3 text-white/40 hover:text-white transition-colors rounded-full">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
                 </button>
+                <input type="text" id="messageInput" placeholder="Type @antaram.ai to chat with AI..." autocomplete="off"
+                       class="flex-1 bg-transparent text-white px-2 py-3 focus:outline-none placeholder-white/20 text-[15px] min-w-0"
                        onkeypress="if(event.key === 'Enter') sendMessage()">
                 <button onclick="sendMessage()"
+                        class="bg-[#F0EFE9] hover:bg-white text-black w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-lg active:scale-90 transition-transform">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                 </button>
             </div>
         </div>
     </div>
+    <!-- JAVASCRIPT LOGIC -->
     <script>
+        // --- State Variables ---
         let ws = null;
         let currentRoomId = null;
+        let username = '';
         let selectedFile = null;
+        // Use a variable passed from Python if using the route /room/{id}, otherwise null
+        // Using Jinja2 syntax to inject variable safely
+        const serverRoomId = "{{ room_id }}" !== "None" ? "{{ room_id }}" : null;
+        // --- Initialization ---
         window.addEventListener('DOMContentLoaded', () => {
+            // 1. Recover Username
+            const storedName = localStorage.getItem('antaram_username');
+            if (storedName) {
+                document.getElementById('usernameInput').value = storedName;
+            }
+            // 2. Handle Dynamic Route or URL Param
             const urlParams = new URLSearchParams(window.location.search);
+            const paramRoom = urlParams.get('room');
+            // Priority: Server Route > URL Param
+            const targetRoom = serverRoomId || paramRoom;
+            if (targetRoom) {
+                // UI State: Show Join inputs immediately
+                toggleJoinInput();
+                document.getElementById('roomInput').value = targetRoom;
+                // If we have a name, maybe auto-focus the join button
+                if (storedName) {
+                    document.getElementById('joinConfirmBtn').focus();
+                }
             }
         });
+        // --- View Transitions ---
+        function toggleJoinInput() {
+            document.getElementById('actionButtons').classList.add('hidden');
+            document.getElementById('roomInputContainer').classList.remove('hidden');
+            document.getElementById('joinConfirmBtn').classList.remove('hidden');
+            document.getElementById('roomInput').focus();
         }
         function showToast(msg) {
+            const t = document.getElementById('toast');
             document.getElementById('toastMsg').innerText = msg;
+            t.classList.remove('hidden');
+            setTimeout(() => t.classList.add('hidden'), 3000);
         }
+        function copyLink() {
+            // Construct cleaner URL using the dynamic route format if possible
+            const url = `${window.location.origin}/room/${currentRoomId}`;
+            navigator.clipboard.writeText(url).then(() => showToast('Link Copied to Clipboard'));
         }
+        // --- Actions ---
+        function saveUsername() {
+            const val = document.getElementById('usernameInput').value.trim();
+            if (!val) {
+                showToast("Please enter your name");
+                document.getElementById('usernameInput').focus();
+                return null;
+            }
+            localStorage.setItem('antaram_username', val);
+            username = val;
+            return val;
         }
         async function createRoom() {
+            if (!saveUsername()) return;
+            const btn = document.querySelector('button[onclick="createRoom()"]');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = `<span class="animate-pulse">Creating Space...</span>`;
             try {
+                const res = await fetch('/create-room', { method: 'POST' });
+                const data = await res.json();
+                if (data.success) connectToRoom(data.room_id);
+            } catch (e) {
+                showToast("Server Error");
+                btn.innerHTML = originalText;
             }
         }
         function joinRoom() {
+            if (!saveUsername()) return;
+            const rid = document.getElementById('roomInput').value.trim().toUpperCase();
+            if (!rid) return showToast("Enter Room ID");
+            connectToRoom(rid);
         }
+        function leaveRoom() {
+            if (ws) ws.close();
+            document.getElementById('chatView').classList.add('hidden');
+            document.getElementById('homeView').classList.remove('hidden');
+            // Reset URL to clean root
+            window.history.pushState({}, '', '/');
+        }
+        // --- WebSocket Logic ---
+        function connectToRoom(rid) {
+            currentRoomId = rid;
+            document.getElementById('displayRoomId').textContent = rid;
+            // Switch Views
+            document.getElementById('homeView').classList.add('hidden');
+            document.getElementById('chatView').classList.remove('hidden');
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${window.location.host}/ws/${rid}`);
+            ws.onmessage = (e) => handleMessage(JSON.parse(e.data));
+            ws.onclose = (e) => {
+                if (e.code === 1008) {
+                    alert("Room does not exist or expired.");
+                    leaveRoom();
                 }
             };
         }
+        // --- AI Response State ---
+        let currentAiMsgDiv = null;
+        function handleMessage(data) {
+            const container = document.getElementById('messages');
+            // 1. AI Start (Create bubble)
+            if (data.type === 'ai_start') {
+                const wrapper = document.createElement('div');
+                wrapper.className = 'flex w-full justify-start animate-enter';
+                wrapper.innerHTML = `
+                    <div class="max-w-[90%] flex flex-col items-start">
+                        <span class="text-[10px] text-blue-400 mb-1 ml-1 font-bold">ANTARAM AI</span>
+                        <div class="ai-bubble px-4 py-3 rounded-[18px] rounded-tl-sm text-[15px] leading-relaxed text-blue-50 shadow-lg ai-cursor" id="ai-streaming-${Date.now()}">
+                        </div>
+                    </div>`;
+                container.appendChild(wrapper);
+                // Save reference to the inner content div
+                currentAiMsgDiv = wrapper.querySelector('.ai-cursor');
+                container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+                return;
             }
+            // 2. AI Chunk (Append text)
+            if (data.type === 'ai_chunk' && currentAiMsgDiv) {
+                // Append text node safely
+                currentAiMsgDiv.innerHTML += data.chunk; // Note: For robust markdown, we'd buffer and re-render marked
+                container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+                return;
+            }
+            // 3. AI End (Remove cursor, Render Markdown)
+            if (data.type === 'ai_end' && currentAiMsgDiv) {
+                currentAiMsgDiv.classList.remove('ai-cursor');
+                // Parse Markdown
+                currentAiMsgDiv.innerHTML = marked.parse(currentAiMsgDiv.innerText);
+                currentAiMsgDiv = null;
+                return;
+            }
+            // 4. Standard User Message
+            if (data.type === 'message') {
+                const el = document.createElement('div');
+                const isSelf = data.username === username;
+                el.className = `flex w-full ${isSelf ? 'justify-end' : 'justify-start'} animate-enter`;
+                const bg = isSelf ? 'bg-[#F0EFE9] text-black' : 'glass-panel text-white';
+                const sender = isSelf ? '' : `<span class="text-[10px] text-white/40 mb-1 ml-1">${data.username}</span>`;
+                let content = data.text;
+                // Highlight @antaram.ai
+                if (content.includes('@antaram.ai')) {
+                    content = content.replace(/@antaram.ai/g, '<span class="text-blue-400 font-bold">@antaram.ai</span>');
+                }
+                // If file
+                if (data.file) {
+                    content = renderFile(data.file);
+                }
                 el.innerHTML = `
                     <div class="max-w-[85%] flex flex-col ${isSelf ? 'items-end' : 'items-start'}">
+                        ${sender}
                         <div class="${bg} px-4 py-2.5 rounded-[18px] ${isSelf ? 'rounded-tr-sm' : 'rounded-tl-sm'} shadow-sm text-[15px] leading-snug break-words">
+                            ${content}
                         </div>
                     </div>`;
+                container.appendChild(el);
+            }
+            // 5. System Messages
+            if (data.type === 'system') {
+                const el = document.createElement('div');
+                el.className = 'flex justify-center my-4';
+                el.innerHTML = `<span class="text-[10px] uppercase font-bold tracking-widest text-white/20 bg-white/5 px-2 py-1 rounded-md border border-white/5">${data.message}</span>`;
+                container.appendChild(el);
+                if(data.userCount) document.getElementById('userCount').textContent = data.userCount;
             }
             container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
         }
+        function renderFile(f) {
+            if (f.file_type.startsWith('image/')) {
+                return `<img src="${f.file_url}" class="rounded-lg mt-1 max-h-48 border border-black/10">`;
+            }
+            return `<a href="${f.file_url}" target="_blank" class="flex items-center gap-2 underline text-sm">📎 ${f.original_name}</a>`;
         }
+        // --- Input Logic ---
+        function handleFileSelect() {
+            const f = document.getElementById('fileInput').files[0];
+            if (f) {
+                selectedFile = f;
+                document.getElementById('fileName').textContent = f.name;
+                document.getElementById('filePreview').classList.remove('hidden');
             }
         }
+        function clearFile() {
+            selectedFile = null;
+            document.getElementById('fileInput').value = "";
+            document.getElementById('filePreview').classList.add('hidden');
+        }
+        async function sendMessage() {
+            if (selectedFile) {
+                const fd = new FormData();
+                fd.append('file', selectedFile);
+                try {
+                    const res = await fetch(`/upload-file/${currentRoomId}`, { method: 'POST', body: fd });
+                    const dat = await res.json();
+                    if(dat.success) {
+                        ws.send(JSON.stringify({ type:'message', username, file: dat.file_info }));
+                        clearFile();
+                    }
+                } catch(e) { showToast("Upload Failed"); }
+                return;
+            }
+            const input = document.getElementById('messageInput');
+            const txt = input.value.trim();
+            if (!txt) return;
+            ws.send(JSON.stringify({ type:'message', username, text: txt }));
+            input.value = '';
+        }
     </script>
 </body>
 </html>