Update public/script.js

public/script.js

@@ -1,113 +1,93 @@
-const API_URL = 'http://localhost:7680/api';
-
+const API_URL = '/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');
+const flashBtn = document.getElementById('flashBtn');
+const proBtn = document.getElementById('proBtn');
+const statusBar = 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.className = 'avatar';
     avatar.textContent = isUser ? '👤' : '🤖';
     
-    const contentDiv = document.createElement('div');
-    contentDiv.className = 'message-content';
+    const content = document.createElement('div');
+    content.className = '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>
+        content.textContent = text;
+    } else if (parsedResponse && Array.isArray(parsedResponse)) {
+        parsedResponse.forEach(part => {
+            if (part.type === 'thought') {
+                const thoughtDiv = document.createElement('div');
+                thoughtDiv.className = 'thought-container';
+                thoughtDiv.innerHTML = `
+                    <div class="thought-header">
+                        <span>🧠</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);
-        }
+                    </div>
+                    <div>${escapeHtml(part.content)}</div>
+                `;
+                content.appendChild(thoughtDiv);
+            } else if (part.type === 'text' && part.content) {
+                const textDiv = document.createElement('div');
+                textDiv.textContent = part.content;
+                content.appendChild(textDiv);
+            }
+        });
+    } else {
+        content.textContent = text;
     }
     
     messageDiv.appendChild(avatar);
-    messageDiv.appendChild(contentDiv);
+    messageDiv.appendChild(content);
     chatMessages.appendChild(messageDiv);
-    
-    // التمرير للأسفل
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+// دالة لتشفير HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
 // عرض حالة التحميل
 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 class="avatar">🤖</div>
+        <div class="content">
+            <div class="loading"></div>
+            <div style="margin-top: 5px;">جاري التفكير...</div>
         </div>
     `;
     chatMessages.appendChild(loadingDiv);
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
-// إخفاء حالة التحميل
 function hideLoading() {
     const loading = document.getElementById('loadingMessage');
-    if (loading) {
-        loading.remove();
-    }
+    if (loading) loading.remove();
 }
 
-// تحديث حالة الوضع
+// تحديث الحالة
 function updateStatus(text, isError = false) {
-    statusDiv.textContent = text;
-    statusDiv.style.color = isError ? '#dc3545' : '#6c757d';
+    statusBar.textContent = text;
+    statusBar.style.color = isError ? '#dc3545' : '#6c757d';
     setTimeout(() => {
         if (!isError) {
-            statusDiv.textContent = 'جاهز للحديث';
-            statusDiv.style.color = '#6c757d';
+            statusBar.textContent = `✅ جاهز | الوضع: ${currentMode === 'flash' ? 'فلاش' : 'برو'}`;
+            statusBar.style.color = '#6c757d';
         }
     }, 3000);
 }
@@ -117,29 +97,24 @@ async function setMode(mode) {
     try {
         const response = await fetch(`${API_URL}/mode`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            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');
+                flashBtn.classList.add('active');
+                proBtn.classList.remove('active');
                 updateStatus('✅ تم التبديل إلى وضع الفلاش - ردود سريعة');
             } else {
-                proModeBtn.classList.add('active');
-                flashModeBtn.classList.remove('active');
-                updateStatus('✅ تم التبديل إلى وضع البرو - تحليل عميق');
+                proBtn.classList.add('active');
+                flashBtn.classList.remove('active');
+                updateStatus('✅ تم التبديل إلى وضع البرو - تفكير عميق');
             }
         }
     } catch (error) {
-        console.error('خطأ في تغيير الوضع:', error);
+        console.error('خطأ:', error);
         updateStatus('❌ فشل تغيير الوضع', true);
     }
 }
@@ -149,24 +124,16 @@ async function sendMessage() {
     const message = userInput.value.trim();
     if (!message) return;
     
-    // إضافة رسالة المستخدم
     addMessage(message, true);
     userInput.value = '';
-    
-    // عرض حالة التحميل
     showLoading();
-    updateStatus('🤔 جاري معالجة طلبك...');
+    updateStatus('🤔 جاري معالجة طلبك عبر MiniMax...');
     
     try {
         const response = await fetch(`${API_URL}/chat`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                message: message,
-                mode: currentMode
-            })
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message, mode: currentMode })
         });
         
         hideLoading();
@@ -174,17 +141,10 @@ async function sendMessage() {
         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('🧠 تم عرض تفكير النموذج في الإطار المخصص');
-                }
+                updateStatus(`✅ تم الرد (وضع ${data.mode === 'flash' ? 'الفلاش' : 'البرو'})`);
             } else {
-                addMessage('عذراً، حدث خطأ في معالجة طلبك. حاول مرة أخرى.', false);
+                addMessage('عذراً، حدث خطأ. حاول مرة أخرى.', false);
                 updateStatus('❌ خطأ في الاستجابة', true);
             }
         } else {
@@ -193,25 +153,15 @@ async function sendMessage() {
     } catch (error) {
         hideLoading();
         console.error('خطأ:', error);
-        addMessage('عذراً، لا يمكن الاتصال بالخادم. تأكد من تشغيل الخادم.', false);
-        updateStatus('❌ فشل الاتصال بالخادم', true);
+        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 للإرسال)
+flashBtn.addEventListener('click', () => setMode('flash'));
+proBtn.addEventListener('click', () => setMode('pro'));
 userInput.addEventListener('keypress', (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
@@ -219,25 +169,23 @@ userInput.addEventListener('keypress', (e) => {
     }
 });
 
-// تحميل الوضع الحالي عند بدء التشغيل
+// تحميل الوضع الحالي
 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');
+                flashBtn.classList.add('active');
             } else {
-                proModeBtn.classList.add('active');
+                proBtn.classList.add('active');
             }
         }
     } catch (error) {
-        console.error('خطأ في تحميل الوضع:', error);
+        console.error('خطأ:', error);
     }
 }
 
-// بدء التشغيل
 loadCurrentMode();
-updateStatus('✅ جاهز للحديث! استخدم Ctrl+Enter للإرسال');
+updateStatus('✅ جاهز للحديث!');