Create public/script.js

public/script.js

@@ -0,0 +1,243 @@
+const API_URL = 'http://localhost:3000/api';
+
+let currentMode = 'flash';
+
+// عناصر DOM
+const chatMessages = document.getElementById('chatMessages');
+const userInput = document.getElementById('userInput');
+const sendBtn = document.getElementById('sendBtn');
+const flashModeBtn = document.getElementById('flashModeBtn');
+const proModeBtn = document.getElementById('proModeBtn');
+const currentModeDisplay = document.getElementById('currentModeDisplay');
+const clearChatBtn = document.getElementById('clearChatBtn');
+const statusDiv = document.getElementById('status');
+
+// إضافة رسالة للشات
+function addMessage(text, isUser = false, parsedResponse = null) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
+    
+    const avatar = document.createElement('div');
+    avatar.className = 'message-avatar';
+    avatar.textContent = isUser ? '👤' : '🤖';
+    
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'message-content';
+    
+    if (isUser) {
+        const textDiv = document.createElement('div');
+        textDiv.className = 'message-text';
+        textDiv.textContent = text;
+        contentDiv.appendChild(textDiv);
+    } else {
+        if (parsedResponse && Array.isArray(parsedResponse)) {
+            parsedResponse.forEach(part => {
+                if (part.type === 'thought') {
+                    // إضافة حاوية التفكير
+                    const thoughtDiv = document.createElement('div');
+                    thoughtDiv.className = 'thought-container';
+                    
+                    const thoughtHeader = document.createElement('div');
+                    thoughtHeader.className = 'thought-header';
+                    thoughtHeader.innerHTML = `
+                        <span class="thought-icon">🧠</span>
+                        <span>تفكير النموذج (genisi thought)</span>
+                    `;
+                    
+                    const thoughtContent = document.createElement('div');
+                    thoughtContent.className = 'thought-content';
+                    thoughtContent.textContent = part.content;
+                    
+                    thoughtDiv.appendChild(thoughtHeader);
+                    thoughtDiv.appendChild(thoughtContent);
+                    contentDiv.appendChild(thoughtDiv);
+                } else if (part.type === 'text' && part.content) {
+                    const textDiv = document.createElement('div');
+                    textDiv.className = 'regular-content';
+                    textDiv.textContent = part.content;
+                    contentDiv.appendChild(textDiv);
+                }
+            });
+        } else {
+            // إذا لم يكن هناك تحليل، عرض النص العادي
+            const textDiv = document.createElement('div');
+            textDiv.className = 'regular-content';
+            textDiv.textContent = text;
+            contentDiv.appendChild(textDiv);
+        }
+    }
+    
+    messageDiv.appendChild(avatar);
+    messageDiv.appendChild(contentDiv);
+    chatMessages.appendChild(messageDiv);
+    
+    // التمرير للأسفل
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+// عرض حالة التحميل
+function showLoading() {
+    const loadingDiv = document.createElement('div');
+    loadingDiv.className = 'message bot';
+    loadingDiv.id = 'loadingMessage';
+    loadingDiv.innerHTML = `
+        <div class="message-avatar">🤖</div>
+        <div class="message-content">
+            <div class="message-text">
+                <span class="loading-dots">جاري التفكير</span>
+            </div>
+        </div>
+    `;
+    chatMessages.appendChild(loadingDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+// إخفاء حالة التحميل
+function hideLoading() {
+    const loading = document.getElementById('loadingMessage');
+    if (loading) {
+        loading.remove();
+    }
+}
+
+// تحديث حالة الوضع
+function updateStatus(text, isError = false) {
+    statusDiv.textContent = text;
+    statusDiv.style.color = isError ? '#dc3545' : '#6c757d';
+    setTimeout(() => {
+        if (!isError) {
+            statusDiv.textContent = 'جاهز للحديث';
+            statusDiv.style.color = '#6c757d';
+        }
+    }, 3000);
+}
+
+// تغيير الوضع
+async function setMode(mode) {
+    try {
+        const response = await fetch(`${API_URL}/mode`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ mode })
+        });
+        
+        if (response.ok) {
+            currentMode = mode;
+            currentModeDisplay.textContent = mode === 'flash' ? 'فلاش' : 'برو';
+            
+            // تحديث مظهر الأزرار
+            if (mode === 'flash') {
+                flashModeBtn.classList.add('active');
+                proModeBtn.classList.remove('active');
+                updateStatus('✅ تم التبديل إلى وضع الفلاش - ردود سريعة');
+            } else {
+                proModeBtn.classList.add('active');
+                flashModeBtn.classList.remove('active');
+                updateStatus('✅ تم التبديل إلى وضع البرو - تحليل عميق');
+            }
+        }
+    } catch (error) {
+        console.error('خطأ في تغيير الوضع:', error);
+        updateStatus('❌ فشل تغيير الوضع', true);
+    }
+}
+
+// إرسال رسالة
+async function sendMessage() {
+    const message = userInput.value.trim();
+    if (!message) return;
+    
+    // إضافة رسالة المستخدم
+    addMessage(message, true);
+    userInput.value = '';
+    
+    // عرض حالة التحميل
+    showLoading();
+    updateStatus('🤔 جاري معالجة طلبك...');
+    
+    try {
+        const response = await fetch(`${API_URL}/chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                message: message,
+                mode: currentMode
+            })
+        });
+        
+        hideLoading();
+        
+        if (response.ok) {
+            const data = await response.json();
+            if (data.success) {
+                // عرض الرد مع تحليل التفكير
+                addMessage('', false, data.response);
+                updateStatus(`✅ تم الرد بنجاح (وضع ${data.mode === 'flash' ? 'الفلاش' : 'البرو'})`);
+                
+                // إذا كان هناك تفكير، إظهار إشعار
+                const hasThought = data.response.some(part => part.type === 'thought');
+                if (hasThought && currentMode === 'pro') {
+                    updateStatus('🧠 تم عرض تفكير النموذج في الإطار المخصص');
+                }
+            } else {
+                addMessage('عذراً، حدث خطأ في معالجة طلبك. حاول مرة أخرى.', false);
+                updateStatus('❌ خطأ في الاستجابة', true);
+            }
+        } else {
+            throw new Error('خطأ في الاتصال');
+        }
+    } catch (error) {
+        hideLoading();
+        console.error('خطأ:', error);
+        addMessage('عذراً، لا يمكن الاتصال بالخادم. تأكد من تشغيل الخادم.', false);
+        updateStatus('❌ فشل الاتصال بالخادم', true);
+    }
+}
+
+// مسح الشات
+function clearChat() {
+    chatMessages.innerHTML = '';
+    addMessage('مرحباً! أنا MiniMax M2.5. كيف يمكنني مساعدتك؟', false);
+    updateStatus('🗑️ تم مسح المحادثة');
+}
+
+// أحداث
+sendBtn.addEventListener('click', sendMessage);
+flashModeBtn.addEventListener('click', () => setMode('flash'));
+proModeBtn.addEventListener('click', () => setMode('pro'));
+clearChatBtn.addEventListener('click', clearChat);
+
+// إرسال بالضغط على Enter (Ctrl+Enter للإرسال)
+userInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+
+// تحميل الوضع الحالي عند بدء التشغيل
+async function loadCurrentMode() {
+    try {
+        const response = await fetch(`${API_URL}/mode`);
+        if (response.ok) {
+            const data = await response.json();
+            currentMode = data.mode;
+            currentModeDisplay.textContent = currentMode === 'flash' ? 'فلاش' : 'برو';
+            if (currentMode === 'flash') {
+                flashModeBtn.classList.add('active');
+            } else {
+                proModeBtn.classList.add('active');
+            }
+        }
+    } catch (error) {
+        console.error('خطأ في تحميل الوضع:', error);
+    }
+}
+
+// بدء التشغيل
+loadCurrentMode();
+updateStatus('✅ جاهز للحديث! استخدم Ctrl+Enter للإرسال');