Spaces:

Legal-Assistant
/

LawBot

Running

File size: 17,840 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Legal Assistant | Student Framework</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #030617;
            --sidebar-bg: #050a24;
            --accent-blue: #3b82f6;
            --accent-purple: #9333ea;
            --text-primary: #f1f5f9;
            --text-dim: #94a3b8;
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
        }

        * {
            margin: 0; padding: 0; box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        /* SIDEBAR */
        .sidebar {
            width: 280px;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--glass-border);
            display: flex; flex-direction: column;
            z-index: 100;
        }

        .sidebar-header { padding: 30px 20px; }

        .new-chat-btn {
            width: 100%; padding: 14px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            border: none; border-radius: 12px;
            color: white; font-weight: 600;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            cursor: pointer; transition: 0.3s;
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
        }

        .new-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(59, 130, 246, 0.3); }

        .history-label { padding: 0 20px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 700; }
        .history-list { flex: 1; overflow-y: auto; padding: 10px; }
        .history-item {
            padding: 12px 15px; border-radius: 10px; margin-bottom: 5px;
            cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(--text-dim);
            display: flex; align-items: center; gap: 10px; border: 1px solid transparent;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .history-item:hover { background: var(--glass-bg); color: white; border-color: var(--glass-border); }

        .sidebar-footer { padding: 20px; border-top: 1px solid var(--glass-border); }
        .user-badge { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--glass-bg); border-radius: 12px; }
        .user-avatar { width: 32px; height: 32px; background: var(--accent-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 0.8rem; }

        /* MAIN AREA */
        .main-chat { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.03), transparent); }
        
        .top-bar {
            height: 70px; background: rgba(3, 6, 23, 0.82); backdrop-filter: blur(25px);
            border-bottom: 1px solid var(--glass-border);
            display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 50;
        }

        .status-pill { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; background: rgba(59, 130, 246, 0.1); color: var(--accent-blue); padding: 4px 12px; border-radius: 20px; font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.2); }
        .status-dot { width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; animation: pulse-dot 2s infinite; }

        @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }

        .messages-container { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 30px; scroll-behavior: smooth; }
        .message { max-width: 850px; animation: message-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        @keyframes message-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .user-msg { align-self: flex-end; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); padding: 16px 24px; border-radius: 20px 20px 4px 20px; color: white; max-width: 70%; line-height: 1.6; }
        .ai-msg { align-self: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 30px; border-radius: 20px 20px 20px 4px; max-width: 85%; line-height: 1.8; color: #e2e8f0; }
        .ai-msg h3 { color: var(--accent-blue); font-size: 1.3rem; margin-bottom: 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
        .ai-msg ul { margin: 20px 0; list-style: none; }
        .ai-msg li { position: relative; padding-left: 28px; margin-bottom: 15px; }
        .ai-msg li::before { content: "🎓"; position: absolute; left: 0; font-size: 0.9rem; }
        .highlight { background: rgba(59, 130, 246, 0.08); border-left: 4px solid var(--accent-blue); padding: 22px; margin: 25px 0; border-radius: 0 16px 16px 0; font-weight: 500; color: #fff; }

        .typing {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 16px 24px;
            background: var(--glass-bg);
            border-radius: 20px;
            width: fit-content;
            margin: 20px 10%;
            border: 1px solid var(--glass-border);
            animation: pulse-border 2s infinite ease-in-out;
        }

        .typing-text {
            font-size: 0.85rem;
            color: var(--accent-blue);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .typing-dots {
            display: flex;
            gap: 6px;
        }

        .typing-dots span {
            width: 7px;
            height: 7px;
            background: var(--accent-blue);
            border-radius: 50%;
            animation: typing-blink 1.4s infinite ease-in-out;
        }

        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing-blink {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.1); }
        }

        @keyframes pulse-border {
            0%, 100% { border-color: var(--glass-border); }
            50% { border-color: var(--accent-blue); box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
        }

        .input-area { padding: 30px 10%; background: linear-gradient(to top, var(--bg-dark) 50%, transparent); border-top: 1px solid var(--glass-border); z-index: 60; }
        .input-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 18px; padding: 6px; display: flex; align-items: center; transition: 0.3s; }
        .input-box:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); }
        .input-box input { flex: 1; background: transparent; border: none; padding: 16px 24px; color: white; font-size: 1.05rem; outline: none; }
        .send-btn { background: var(--accent-blue); color: white; border: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; margin-right: 6px; }
        .send-btn:hover { background: var(--accent-purple); transform: scale(1.1); }

        .hidden { display: none !important; }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="sidebar-header">
            <button class="new-chat-btn" id="newChatBtn"><span>+</span> New Research</button>
        </div>
        <div class="history-label">Library Archives</div>
        <div class="history-list" id="historyList"></div>
        <div class="sidebar-footer">
            <div class="user-badge">
                <div class="user-avatar" id="avatarName">ST</div>
                <div>
                    <div id="usernameLabel" style="font-size: 0.85rem; font-weight: 600;">Student</div>
                    <div style="font-size: 0.7rem; color: var(--text-dim);">Academic Access</div>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 15px;">
                <a href="/studentdashboard.html" style="color: var(--accent-blue); text-decoration: none; font-size: 0.8rem; text-align: center; font-weight: 600;">Back to Dashboard</a>
                <a href="/role" style="color: var(--text-dim); text-decoration: none; font-size: 0.8rem; text-align: center;">← Change Role</a>
            </div>
        </div>
    </aside>

    <main class="main-chat">
        <header class="top-bar">
            <div class="system-branding">
                <span style="font-weight: 700; color: white;">⚖️ Law Bot (Student)</span>
                <div class="status-pill"><div class="status-dot"></div>Academic Ready</div>
            </div>
            <div style="font-size: 0.85rem; color: var(--text-dim); font-weight: 500;">Educational Framework v4.0</div>
        </header>

        <div id="welcomeScreen" style="position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; z-index: 1;">
            <div style="font-size: 4rem; margin-bottom: 25px;">📚</div>
            <h1 style="font-size: 2.8rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -1px;">Empowering your studies.</h1>
            <p style="color: var(--text-dim); max-width: 550px; line-height: 1.7; font-size: 1.1rem;">Expert guidance for law students. Ask about case laws, sections, or get conceptual breakdowns for your exams.</p>
        </div>

        <div class="messages-container" id="chatContainer"></div>
        <div class="typing hidden" id="typingIndicator">
            <div class="typing-text">Law Bot is thinking...</div>
            <div class="typing-dots">
                <span></span><span></span><span></span>
            </div>
        </div>

        <div class="input-area">
            <div class="input-box">
                <input type="text" id="messageInput" placeholder="Enter your research query..." autocomplete="off">
                <button class="send-btn" id="sendButton">
                    <svg width="22" height="22" 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>
    </main>

    <script>
        let ws;
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const typingIndicator = document.getElementById('typingIndicator');
        const welcomeScreen = document.getElementById('welcomeScreen');
        const historyList = document.getElementById('historyList');

        let currentAiMessage = '';
        let currentAiMessageElement = null;
        let currentCaseId = crypto.randomUUID();
        const activeRole = 'Student';

        function formatResponse(text) {
            let formatted = text;
            formatted = formatted.replace(/### (.*?)\s*(\n|$)/g, "<h3>📖 $1</h3>");
            formatted = formatted.replace(/^! (.*?)$/gm, '<div class="highlight">$1</div>');
            formatted = formatted.replace(/^\d+\.\s(.*?)$/gm, "<li>$1</li>");
            formatted = formatted.replace(/^\*\s(.*?)$/gm, "<li>$1</li>");
            formatted = formatted.replace(/- (.*?)$/gm, "<li>$1</li>");
            formatted = formatted.replace(/<li>(.*?)<\/li>(?!<li>)/g, "<ul><li>$1</li></ul>");
            formatted = formatted.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
            formatted = formatted.replace(/\n/g, "<br>");
            return formatted;
        }

        function connectWS() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            ws = new WebSocket(`${protocol}//${window.location.host}/conversational_chat?role=${activeRole}`);
            ws.onmessage = (event) => {
                typingIndicator.classList.add('hidden');
                welcomeScreen.classList.add('hidden');
                if (event.data === '[DONE]') {
                    saveInteraction(currentCaseId, messageInput.value, currentAiMessage);
                    return;
                }
                if (!currentAiMessageElement) {
                    currentAiMessage = event.data;
                    createNewMessage('ai', currentAiMessage);
                } else {
                    currentAiMessage += event.data;
                    currentAiMessageElement.innerHTML = formatResponse(currentAiMessage);
                }
                chatContainer.scrollTop = chatContainer.scrollHeight;
            };
            ws.onclose = () => setTimeout(connectWS, 2000);
        }

        function createNewMessage(type, content) {
            welcomeScreen.classList.add('hidden');
            const msgDiv = document.createElement('div');
            msgDiv.className = `message ${type}-msg`;
            if (type === 'ai') {
                msgDiv.innerHTML = formatResponse(content);
                currentAiMessageElement = msgDiv;
            } else {
                msgDiv.textContent = content;
            }
            chatContainer.appendChild(msgDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        function sendMessage() {
            const text = messageInput.value.trim();
            if (!text || ws.readyState !== WebSocket.OPEN) return;
            createNewMessage('user', text);
            ws.send(text);
            messageInput.value = '';
            currentAiMessage = '';
            currentAiMessageElement = null;
            typingIndicator.classList.remove('hidden');
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function saveInteraction(caseId, query, response) {
            const token = localStorage.getItem('token');
            if (!token) return;
            try {
                await fetch('/api/save-interaction', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                    body: JSON.stringify({ caseId, query, response, role: activeRole })
                });
                loadHistory();
            } catch (err) { console.error(err); }
        }

        async function loadHistory() {
            const token = localStorage.getItem('token');
            if (!token) return;
            try {
                const res = await fetch(`/api/interactions?role=${activeRole}`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                const data = await res.json();
                historyList.innerHTML = '';
                data.forEach(item => {
                    const div = document.createElement('div');
                    div.className = 'history-item';
                    const preview = item.query.substring(0, 30) + "...";
                    div.innerHTML = `<span>🔖</span> ${preview}`;
                    div.onclick = () => loadThread(item.case_id);
                    historyList.appendChild(div);
                });
            } catch (err) { console.error(err); }
        }

        async function loadThread(caseId) {
            const token = localStorage.getItem('token');
            try {
                const res = await fetch(`/api/interactions/${caseId}?role=${activeRole}`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                const thread = await res.json();
                currentCaseId = caseId;
                chatContainer.innerHTML = '';
                welcomeScreen.classList.add('hidden');
                thread.forEach(msg => {
                    createNewMessage('user', msg.query);
                    createNewMessage('ai', msg.response);
                });
                currentAiMessageElement = null;
            } catch (err) { console.error(err); }
        }

        async function fetchUserStatus() {
            const token = localStorage.getItem('token');
            if (!token) return;
            try {
                const res = await fetch('/api/user-status', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                const status = await res.json();
                document.getElementById('usernameLabel').innerText = status.username.charAt(0).toUpperCase() + status.username.slice(1);
                document.getElementById('avatarName').innerText = status.username.substring(0, 2).toUpperCase();
            } catch (err) { console.error(err); }
        }

        sendButton.onclick = sendMessage;
        messageInput.onkeypress = (e) => { if (e.key === 'Enter') sendMessage(); };
        document.getElementById('newChatBtn').onclick = () => {
            currentCaseId = crypto.randomUUID();
            chatContainer.innerHTML = '';
            welcomeScreen.classList.remove('hidden');
        };

        connectWS();
        loadHistory();
        fetchUserStatus();
    </script>
</body>
</html>