Upload 2 files

static/script.js

@@ -0,0 +1,276 @@
+// Global variables
+let currentChatId = null;
+let darkMode = localStorage.getItem('darkMode') === 'true';
+
+// Apply theme on load
+document.addEventListener('DOMContentLoaded', () => {
+    if (darkMode) {
+        document.body.classList.add('dark-mode');
+        document.getElementById('theme-toggle').innerHTML = '<i class="fas fa-sun"></i>';
+    }
+    
+    // Add enter key listener for chat input
+    const userInput = document.getElementById('user-input');
+    if (userInput) {
+        userInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    }
+    
+    // Smooth scroll for navigation
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+});
+
+// Toggle between light and dark mode
+function toggleTheme() {
+    darkMode = !darkMode;
+    localStorage.setItem('darkMode', darkMode);
+    document.body.classList.toggle('dark-mode');
+    document.getElementById('theme-toggle').innerHTML = darkMode ? 
+        '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
+}
+
+// Function to send a chat message to the backend
+async function sendMessage() {
+    const userInput = document.getElementById('user-input');
+    const messageText = userInput.value.trim();
+    const modelSelect = document.getElementById('model-select');
+    const selectedModel = modelSelect ? modelSelect.value : null;
+    
+    if (!messageText) return;
+    
+    // Clear input field
+    userInput.value = '';
+    
+    // Add user message to chat
+    addMessageToChat('user', messageText);
+    
+    // Show typing indicator
+    addTypingIndicator();
+    
+    try {
+        // Send request to backend
+        const response = await fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                message: messageText,
+                chat_id: currentChatId,
+                model: selectedModel
+            }),
+        });
+        
+        // Remove typing indicator
+        removeTypingIndicator();
+        
+        if (response.ok) {
+            const data = await response.json();
+            currentChatId = data.chat_id;
+            
+            // Add AI response to chat
+            addMessageToChat('assistant', data.response);
+            
+            // Scroll to bottom of chat
+            scrollToBottom();
+        } else {
+            const errorData = await response.json();
+            addMessageToChat('system', `Error: ${errorData.detail || 'Something went wrong'}`);
+        }
+    } catch (error) {
+        // Remove typing indicator
+        removeTypingIndicator();
+        addMessageToChat('system', `Error: ${error.message || 'Failed to communicate with the server'}`);
+    }
+    
+    // Scroll to bottom of chat
+    scrollToBottom();
+}
+
+// Add a message to the chat UI
+function addMessageToChat(role, content) {
+    const chatMessages = document.getElementById('chat-messages');
+    
+    if (!chatMessages) return;
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${role}-message`;
+    
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'message-content';
+    
+    // Simple markdown-like formatting
+    let formattedContent = content
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // Bold
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')              // Italic
+        .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')  // Code blocks
+        .replace(/`(.*?)`/g, '<code>$1</code>')            // Inline code
+        .replace(/\n/g, '<br>');                          // Line breaks
+    
+    contentDiv.innerHTML = formattedContent;
+    messageDiv.appendChild(contentDiv);
+    chatMessages.appendChild(messageDiv);
+}
+
+// Add typing indicator
+function addTypingIndicator() {
+    const chatMessages = document.getElementById('chat-messages');
+    if (!chatMessages) return;
+    
+    const indicator = document.createElement('div');
+    indicator.className = 'message assistant-message typing-indicator';
+    indicator.id = 'typing-indicator';
+    
+    const dots = document.createElement('div');
+    dots.className = 'typing-dots';
+    for (let i = 0; i < 3; i++) {
+        const dot = document.createElement('span');
+        dots.appendChild(dot);
+    }
+    
+    indicator.appendChild(dots);
+    chatMessages.appendChild(indicator);
+    scrollToBottom();
+}
+
+// Remove typing indicator
+function removeTypingIndicator() {
+    const indicator = document.getElementById('typing-indicator');
+    if (indicator) {
+        indicator.remove();
+    }
+}
+
+// Scroll to the bottom of the chat
+function scrollToBottom() {
+    const chatMessages = document.getElementById('chat-messages');
+    if (chatMessages) {
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+}
+
+// Admin Panel Functions
+function updateModel() {
+    const modelSelector = document.getElementById('model-selector');
+    const model = modelSelector.value;
+    
+    fetch('/api/model', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ model: model }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            document.getElementById('current-model').textContent = data.model;
+            alert('Model updated successfully!');
+        }
+    })
+    .catch(error => alert('Error updating model: ' + error));
+}
+
+function addRule() {
+    const newRuleInput = document.getElementById('new-rule');
+    const rule = newRuleInput.value.trim();
+    
+    if (!rule) return;
+    
+    fetch('/api/rules', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ rule: rule }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            newRuleInput.value = '';
+            refreshRulesList(data.rules);
+        }
+    })
+    .catch(error => alert('Error adding rule: ' + error));
+}
+
+function deleteRule(ruleId) {
+    fetch(`/api/rules/${ruleId}`, {
+        method: 'DELETE',
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            refreshRulesList(data.rules);
+        }
+    })
+    .catch(error => alert('Error deleting rule: ' + error));
+}
+
+function refreshRulesList(rules) {
+    const rulesList = document.getElementById('rules-list');
+    rulesList.innerHTML = '';
+    
+    rules.forEach((rule, index) => {
+        const li = document.createElement('li');
+        li.innerHTML = `${rule} <button onclick="deleteRule(${index})">Delete</button>`;
+        rulesList.appendChild(li);
+    });
+}
+
+function viewChat(chatId) {
+    fetch(`/api/chats/${chatId}`)
+    .then(response => response.json())
+    .then(data => {
+        const chatViewer = document.getElementById('chat-viewer');
+        chatViewer.innerHTML = '<h3>Chat History</h3>';
+        
+        const chatContainer = document.createElement('div');
+        chatContainer.className = 'admin-chat-history';
+        
+        data.history.forEach(message => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `admin-message ${message.role}-message`;
+            messageDiv.textContent = `${message.role.toUpperCase()}: ${message.content}`;
+            chatContainer.appendChild(messageDiv);
+        });
+        
+        chatViewer.appendChild(chatContainer);
+    })
+    .catch(error => alert('Error viewing chat: ' + error));
+}
+
+// Load chats for the admin panel
+function loadChats() {
+    if (document.getElementById('active-chats')) {
+        fetch('/api/chats')
+        .then(response => response.json())
+        .then(data => {
+            const chatsList = document.getElementById('active-chats');
+            chatsList.innerHTML = '';
+            
+            data.chats.forEach(chatId => {
+                const li = document.createElement('li');
+                li.innerHTML = `<a href="#" onclick="viewChat('${chatId}')">${chatId}</a>`;
+                chatsList.appendChild(li);
+            });
+        })
+        .catch(error => console.error('Error loading chats:', error));
+    }
+}
+
+// Check if we're on the admin page and load chats
+if (window.location.pathname === '/admin') {
+    loadChats();
+}

static/style.css

@@ -0,0 +1,506 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+:root {
+    --primary-color: #4a6fa5;
+    --secondary-color: #6b8cae;
+    --accent-color: #ff6b6b;
+    --text-color: #333;
+    --bg-color: #f8f9fa;
+    --card-bg: #ffffff;
+    --border-color: #e0e0e0;
+    --chat-user-bg: #e6f2ff;
+    --chat-assistant-bg: #f0f0f0;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --transition: all 0.3s ease;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    transition: var(--transition);
+}
+
+/* Dark mode styles */
+body.dark-mode {
+    --primary-color: #5c88c5;
+    --secondary-color: #7fa3cc;
+    --accent-color: #ff8585;
+    --text-color: #e0e0e0;
+    --bg-color: #121212;
+    --card-bg: #1e1e1e;
+    --border-color: #383838;
+    --chat-user-bg: #2a405a;
+    --chat-assistant-bg: #2a2a2a;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Navigation Bar */
+.navbar {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: var(--shadow);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    padding: 0.5rem 0;
+    border-bottom: 2px solid transparent;
+    transition: var(--transition);
+}
+
+.nav-links a:hover, .nav-links a.active {
+    border-bottom: 2px solid white;
+}
+
+#theme-toggle {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.2rem;
+}
+
+/* Common Section Styles */
+.section {
+    padding: 4rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.home-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.hero h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+
+.hero p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    color: var(--secondary-color);
+}
+
+.cta-button {
+    display: inline-block;
+    background-color: var(--accent-color);
+    color: white;
+    padding: 0.8rem 1.5rem;
+    border-radius: 4px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: var(--transition);
+}
+
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow);
+}
+
+/* Features Section */
+.features {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.feature-card {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    flex: 1;
+    min-width: 250px;
+    max-width: 350px;
+    text-align: center;
+    transition: var(--transition);
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card i {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+
+/* Tech Stack Section */
+.tech-stack {
+    text-align: center;
+    margin-top: 2rem;
+}
+
+.tech-stack h2 {
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+}
+
+.tech-icons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.tech-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.tech-icon i {
+    font-size: 2rem;
+    color: var(--secondary-color);
+}
+
+/* Chat Section */
+.chat-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+}
+
+.chat-container {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    width: 100%;
+    max-width: 800px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-header {
+    padding: 1rem;
+    background-color: var(--primary-color);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.model-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#model-select {
+    padding: 0.25rem 0.5rem;
+    border: none;
+    border-radius: 4px;
+    background-color: white;
+    color: var(--text-color);
+}
+
+.chat-messages {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.message {
+    max-width: 80%;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: var(--chat-user-bg);
+    color: var(--text-color);
+    border-bottom-right-radius: 0;
+}
+
+.assistant-message {
+    align-self: flex-start;
+    background-color: var(--chat-assistant-bg);
+    color: var(--text-color);
+    border-bottom-left-radius: 0;
+}
+
+.system-message {
+    align-self: center;
+    background-color: var(--secondary-color);
+    color: white;
+    text-align: center;
+}
+
+.message-content {
+    word-wrap: break-word;
+}
+
+.message-content pre {
+    background-color: #f0f0f0;
+    padding: 0.5rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+}
+.message-content code {
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+}
+
+/* Typing indicator */
+.typing-indicator {
+    padding: 0.5rem 1rem;
+}
+
+.typing-dots {
+    display: flex;
+    gap: 4px;
+}
+
+.typing-dots span {
+    width: 8px;
+    height: 8px;
+    background-color: #888;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.6;
+    animation: typing-dot 1.4s infinite;
+}
+
+.typing-dots span:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-dots span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-dots span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing-dot {
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-4px);
+    }
+}
+
+.chat-input {
+    padding: 1rem;
+    display: flex;
+    gap: 0.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+#user-input {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    resize: none;
+    font-size: 1rem;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+}
+
+#send-button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0 1rem;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+#send-button:hover {
+    background-color: var(--secondary-color);
+}
+
+/* Admin Panel Styles */
+.admin-page {
+    padding: 2rem;
+}
+
+.admin-page h1 {
+    margin-bottom: 2rem;
+    color: var(--primary-color);
+}
+
+.admin-section {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+}
+
+.admin-section h2 {
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+
+.admin-section select, .admin-section input {
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-right: 0.5rem;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.admin-section button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.admin-section button:hover {
+    background-color: var(--secondary-color);
+}
+
+#rules-list, #active-chats {
+    list-style: none;
+    margin: 1rem 0;
+}
+
+#rules-list li, #active-chats li {
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--bg-color);
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#active-chats a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+#active-chats a:hover {
+    text-decoration: underline;
+}
+
+.admin-chat-history {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 1rem;
+    background-color: var(--bg-color);
+    border-radius: 4px;
+    margin-top: 1rem;
+}
+
+.admin-message {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: 4px;
+}
+
+.admin-message.user-message {
+    background-color: var(--chat-user-bg);
+}
+
+.admin-message.assistant-message {
+    background-color: var(--chat-assistant-bg);
+}
+
+/* Footer */
+.footer {
+    background-color: var(--primary-color);
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    margin-top: auto;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .section {
+        padding: 2rem 1rem;
+    }
+    
+    .chat-container {
+        height: 80vh;
+    }
+    
+    .message {
+        max-width: 90%;
+    }
+    
+    .features {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .feature-card {
+        width: 100%;
+        max-width: 100%;
+    }
+}