Create js/main.js

frontend/js/main.js

@@ -0,0 +1,285 @@
+// State Management
+let currentConversationId = 'default';
+let currentLanguage = localStorage.getItem('language') || 'en';
+let currentTheme = localStorage.getItem('theme') || 'light';
+
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    initializeApp();
+    loadConversations();
+    applyTheme(currentTheme);
+    applyLanguage(currentLanguage);
+});
+
+function initializeApp() {
+    // Set language
+    document.getElementById('language-select').value = currentLanguage;
+    
+    // Keyboard shortcut for sending messages
+    document.getElementById('message-input').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+}
+
+// Chat Functions
+async function sendMessage() {
+    const input = document.getElementById('message-input');
+    const message = input.value.trim();
+    
+    if (!message) return;
+    
+    // Disable button
+    document.querySelector('.send-btn').disabled = true;
+    document.getElementById('loading-indicator').classList.remove('hidden');
+    
+    // Add user message to UI
+    addMessageToUI('user', message);
+    input.value = '';
+    input.focus();
+    
+    try {
+        const response = await fetch('/api/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                message: message,
+                conversation_id: currentConversationId,
+                language: currentLanguage
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            addMessageToUI('assistant', data.message);
+            updateChatTitle(message);
+            loadConversations();
+        } else {
+            addMessageToUI('assistant', `خطأ / Error: ${data.error}`);
+        }
+    } catch (error) {
+        addMessageToUI('assistant', `خطأ في الاتصال / Connection Error: ${error.message}`);
+    } finally {
+        document.querySelector('.send-btn').disabled = false;
+        document.getElementById('loading-indicator').classList.add('hidden');
+    }
+}
+
+function addMessageToUI(role, content) {
+    const container = document.getElementById('messages-container');
+    
+    // Remove welcome message if exists
+    const welcome = container.querySelector('.welcome-message');
+    if (welcome) welcome.remove();
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${role}`;
+    
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'message-content';
+    
+    // Format content (markdown, code, tables, etc.)
+    contentDiv.innerHTML = formatContent(content);
+    
+    messageDiv.appendChild(contentDiv);
+    container.appendChild(messageDiv);
+    
+    // Scroll to bottom
+    container.scrollTop = container.scrollHeight;
+}
+
+function formatContent(content) {
+    let html = content;
+    
+    // Code blocks
+    html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+        const language = lang || 'plaintext';
+        const escaped = escapeHtml(code.trim());
+        return `<pre><code class="language-${language}">${escaped}</code><button class="copy-code-btn" onclick="copyCode(this)">نسخ / Copy</button></pre>`;
+    });
+    
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+    
+    // Bold
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    
+    // Italic
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    
+    // Line breaks
+    html = html.replace(/\n/g, '<br>');
+    
+    return html;
+}
+
+function escapeHtml(text) {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, m => map[m]);
+}
+
+function copyCode(button) {
+    const code = button.previousSibling.textContent;
+    navigator.clipboard.writeText(code);
+    button.textContent = '✓ نسخ / Copied';
+    setTimeout(() => {
+        button.textContent = 'نسخ / Copy';
+    }, 2000);
+}
+
+// Conversation Management
+async function loadConversations() {
+    try {
+        const response = await fetch('/api/conversations');
+        const data = await response.json();
+        
+        const container = document.getElementById('conversations-container');
+        container.innerHTML = '';
+        
+        if (data.conversations.length === 0) {
+            container.innerHTML = '<p style="color: #999; font-size: 12px;">لا توجد محادثات / No conversations</p>';
+            return;
+        }
+        
+        data.conversations.forEach(conv => {
+            const item = document.createElement('div');
+            item.className = 'conversation-item';
+            item.textContent = conv.title;
+            item.onclick = () => loadConversation(conv.id);
+            container.appendChild(item);
+        });
+    } catch (error) {
+        console.error('Error loading conversations:', error);
+    }
+}
+
+async function loadConversation(conversationId) {
+    currentConversationId = conversationId;
+    
+    try {
+        const response = await fetch(`/api/conversation/${conversationId}`);
+        const data = await response.json();
+        
+        const container = document.getElementById('messages-container');
+        container.innerHTML = '';
+        
+        if (data.messages.length === 0) {
+            container.innerHTML = '<div class="welcome-message">No messages in this conversation</div>';
+            return;
+        }
+        
+        data.messages.forEach(msg => {
+            addMessageToUI(msg.role, msg.content);
+        });
+    } catch (error) {
+        console.error('Error loading conversation:', error);
+    }
+}
+
+function newChat() {
+    currentConversationId = 'conv_' + Date.now();
+    document.getElementById('messages-container').innerHTML = `
+        <div class="welcome-message">
+            <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Welcome">
+            <h2>مرحبا / Welcome</h2>
+            <p>أنا Genisi، مساعد ذكي متطور. كيف يمكنني مساعدتك؟</p>
+            <p>I'm Genisi, an advanced AI assistant. How can I help you?</p>
+        </div>
+    `;
+    document.getElementById('chat-title').textContent = 'Genisi Assistant';
+}
+
+function updateChatTitle(message) {
+    const title = message.substring(0, 50) + (message.length > 50 ? '...' : '');
+    document.getElementById('chat-title').textContent = title;
+}
+
+// Settings
+function openSettings() {
+    document.getElementById('settings-modal').classList.add('show');
+}
+
+function closeSettings() {
+    document.getElementById('settings-modal').classList.remove('show');
+}
+
+function saveSettings() {
+    const language = document.getElementById('settings-language').value;
+    const theme = document.getElementById('settings-theme').value;
+    const temperature = document.getElementById('settings-temperature').value;
+    
+    localStorage.setItem('language', language);
+    localStorage.setItem('theme', theme);
+    localStorage.setItem('temperature', temperature);
+    
+    currentLanguage = language;
+    currentTheme = theme;
+    
+    applyLanguage(language);
+    applyTheme(theme);
+}
+
+// Theme Management
+function toggleTheme() {
+    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
+    localStorage.setItem('theme', currentTheme);
+    applyTheme(currentTheme);
+}
+
+function applyTheme(theme) {
+    const body = document.body;
+    
+    if (theme === 'dark') {
+        body.classList.add('dark-mode');
+        document.querySelector('.theme-toggle').textContent = '☀️';
+    } else {
+        body.classList.remove('dark-mode');
+        document.querySelector('.theme-toggle').textContent = '🌙';
+    }
+    
+    if (document.getElementById('settings-theme')) {
+        document.getElementById('settings-theme').value = theme;
+    }
+}
+
+// Language Management
+function changeLanguage(lang) {
+    currentLanguage = lang;
+    localStorage.setItem('language', lang);
+    applyLanguage(lang);
+}
+
+function applyLanguage(lang) {
+    const isRTL = lang === 'ar';
+    document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+    
+    if (document.getElementById('settings-language')) {
+        document.getElementById('settings-language').value = lang;
+    }
+}
+
+function clearHistory() {
+    if (confirm('هل أنت متأكد؟ / Are you sure?')) {
+        localStorage.clear();
+        location.reload();
+    }
+}
+
+// Handle keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+    if (e.ctrlKey && e.key === 'k') {
+        e.preventDefault();
+        newChat();
+    }
+});