Update index.html

index.html

@@ -5,14 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Genisi AI | Next-Gen Interface</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <!-- مكتبة Markdown -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <!-- مكتبة تلوين الأكواد -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    
     <style>
         :root {
             --bg: #0d1117;
             --sidebar: #161b22;
-            --accent: #238636; /* أخضر هادئ احترافي */
+            --accent: #238636;
+            --accent-hover: #2ea043;
             --text: #c9d1d9;
+            --text-secondary: #8b949e;
             --user-msg: #21262d;
             --border: #30363d;
+            --reasoning-bg: #1f242c;
         }
 
         * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -22,53 +31,123 @@
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
             display: flex;
             height: 100vh;
+            overflow: hidden;
         }
 
-        /* القائمة الجانبية */
+        /* Sidebar */
         .sidebar {
-            width: 280px;
+            width: 300px;
             background: var(--sidebar);
             border-left: 1px solid var(--border);
             display: flex;
             flex-direction: column;
-            padding: 20px;
+            padding: 24px;
         }
 
         .brand {
-            font-size: 22px;
+            font-size: 24px;
             font-weight: 800;
             color: white;
-            margin-bottom: 30px;
+            margin-bottom: 32px;
             display: flex;
             align-items: center;
             gap: 12px;
         }
 
-        .config-group { margin-bottom: 20px; }
-        .config-group label { display: block; font-size: 13px; color: #8b949e; margin-bottom: 8px; }
+        .config-group { margin-bottom: 24px; }
+        .config-group label { 
+            display: block; 
+            font-size: 12px; 
+            color: var(--text-secondary); 
+            margin-bottom: 8px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
         
-        select {
+        select, .toggle-btn {
             width: 100%;
-            padding: 10px;
+            padding: 12px;
             background: var(--bg);
             color: white;
             border: 1px solid var(--border);
-            border-radius: 6px;
+            border-radius: 8px;
             cursor: pointer;
             outline: none;
+            font-size: 14px;
+            transition: all 0.2s;
         }
 
-        /* مساحة الدردشة */
+        select:hover, .toggle-btn:hover { border-color: var(--accent); }
+        
+        /* Reasoning Toggle (يظهر فقط للـ Chat) */
+        .reasoning-container {
+            display: none;
+            animation: fadeIn 0.3s ease;
+        }
+        
+        .reasoning-container.active { display: block; }
+        
+        .toggle-switch {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--bg);
+            padding: 12px;
+            border-radius: 8px;
+            border: 1px solid var(--border);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .toggle-switch:hover { border-color: var(--accent); }
+        
+        .toggle-switch input { display: none; }
+        
+        .slider {
+            width: 44px;
+            height: 24px;
+            background: var(--border);
+            border-radius: 12px;
+            position: relative;
+            transition: 0.3s;
+        }
+        
+        .slider::before {
+            content: "";
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            background: white;
+            border-radius: 50%;
+            top: 3px;
+            right: 3px;
+            transition: 0.3s;
+        }
+        
+        input:checked + .slider {
+            background: var(--accent);
+        }
+        
+        input:checked + .slider::before {
+            transform: translateX(-20px);
+        }
+        
+        .toggle-label { font-size: 14px; }
+        .toggle-sublabel { font-size: 11px; color: var(--text-secondary); display: block; margin-top: 4px; }
+
+        /* Chat Area */
         .chat-container {
             flex: 1;
             display: flex;
             flex-direction: column;
             position: relative;
+            background: var(--bg);
         }
 
         #chat-flow {
             flex: 1;
-            padding: 40px 15% 100px;
+            padding: 40px 10% 120px;
             overflow-y: auto;
             display: flex;
             flex-direction: column;
@@ -77,62 +156,111 @@
 
         .message {
             display: flex;
-            gap: 15px;
-            max-width: 90%;
+            gap: 16px;
+            max-width: 85%;
             animation: fadeIn 0.3s ease;
         }
 
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeIn { 
+            from { opacity: 0; transform: translateY(10px); } 
+            to { opacity: 1; transform: translateY(0); } 
+        }
 
         .message.user { align-self: flex-end; flex-direction: row-reverse; }
         .message.ai { align-self: flex-start; }
 
         .avatar {
-            width: 35px;
-            height: 35px;
-            border-radius: 6px;
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
+            font-size: 16px;
         }
-        .user .avatar { background: #1f6feb; }
-        .ai .avatar { background: var(--accent); }
+        .user .avatar { background: #1f6feb; color: white; }
+        .ai .avatar { background: var(--accent); color: white; }
 
         .bubble {
-            padding: 12px 16px;
+            padding: 16px;
             border-radius: 12px;
             line-height: 1.6;
             font-size: 15px;
-            white-space: pre-wrap; /* للحفاظ على تنسيق الأسطر */
+            border: 1px solid transparent;
+            word-wrap: break-word;
+        }
+        
+        .user .bubble { 
+            background: var(--user-msg); 
+            border-color: var(--border);
+            color: white;
+        }
+        
+        .ai .bubble { 
+            background: transparent; 
+            border-color: var(--border);
+            color: var(--text);
+        }
+        
+        /* Markdown Styles */
+        .bubble pre {
+            background: #161b22;
+            padding: 16px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 12px 0;
+            border: 1px solid var(--border);
+        }
+        
+        .bubble code {
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 13px;
         }
-        .user .bubble { background: var(--user-msg); border: 1px solid var(--border); }
-        .ai .bubble { background: transparent; }
+        
+        .bubble p { margin-bottom: 12px; }
+        .bubble p:last-child { margin-bottom: 0; }
+        
+        .bubble h1, .bubble h2, .bubble h3 {
+            color: white;
+            margin: 16px 0 8px;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 8px;
+        }
+        
+        .bubble ul, .bubble ol { margin: 8px 0; padding-right: 20px; }
+        .bubble li { margin: 4px 0; }
 
-        /* منطقة الإدخال العائمة */
+        /* Input Area */
         .input-wrapper {
             position: absolute;
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
-            width: 70%;
+            width: 80%;
+            max-width: 900px;
             background: var(--sidebar);
             border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 10px;
+            border-radius: 16px;
+            padding: 12px;
             display: flex;
             align-items: center;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+            gap: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+            transition: border-color 0.2s;
         }
+        
+        .input-wrapper:focus-within { border-color: var(--accent); }
 
         #userInput {
             flex: 1;
             background: transparent;
             border: none;
             color: white;
-            padding: 10px;
+            padding: 12px;
             font-size: 16px;
             outline: none;
+            font-family: inherit;
         }
 
         .send-btn {
@@ -141,14 +269,75 @@
             border: none;
             width: 40px;
             height: 40px;
-            border-radius: 8px;
+            border-radius: 10px;
             cursor: pointer;
-            transition: 0.2s;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .send-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
+        .send-btn:disabled { 
+            background: #30363d; 
+            cursor: not-allowed; 
+            transform: none;
+        }
+
+        /* Typing Indicator */
+        .typing-indicator {
+            display: none;
+            align-items: center;
+            gap: 4px;
+            padding: 12px 16px;
+        }
+        
+        .typing-indicator.active { display: flex; }
+        
+        .dot {
+            width: 8px;
+            height: 8px;
+            background: var(--text-secondary);
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+        
+        .dot:nth-child(1) { animation-delay: -0.32s; }
+        .dot:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes bounce {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
+        }
+
+        /* Model Badge */
+        .model-badge {
+            display: inline-block;
+            font-size: 11px;
+            padding: 2px 8px;
+            background: rgba(35, 134, 54, 0.2);
+            color: var(--accent);
+            border-radius: 12px;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+        
+        .reasoning-badge {
+            display: inline-block;
+            font-size: 11px;
+            padding: 2px 8px;
+            background: rgba(139, 148, 158, 0.2);
+            color: var(--text-secondary);
+            border-radius: 12px;
+            margin-right: 8px;
         }
-        .send-btn:hover { filter: brightness(1.2); }
-        .send-btn:disabled { background: #30363d; cursor: not-allowed; }
 
         img { max-width: 100%; border-radius: 8px; margin-top: 10px; border: 1px solid var(--border); }
+        
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: var(--bg); }
+        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
     </style>
 </head>
 <body>
@@ -157,17 +346,36 @@
         <div class="brand"><i class="fas fa-bolt"></i> Genisi AI</div>
         
         <div class="config-group">
-            <label>الموديل الحالي</label>
-            <select id="actionType">
-                <option value="chat">الدردشة الذكية (Kimi)</option>
-                <option value="code">مساعد الكود (Gemma)</option>
-                <option value="image">توليد الصور (Flux)</option>
+            <label>وضع التشغيل</label>
+            <select id="actionType" onchange="handleModeChange()">
+                <option value="chat">💬 الدردشة الذكية (Kimi)</option>
+                <option value="code">⚡ البرمجة السريعة (Gemma)</option>
+                <option value="image">🎨 توليد الصور (Flux)</option>
             </select>
         </div>
 
+        <!-- خيار التفكير يظهر فقط للـ Chat -->
+        <div class="config-group reasoning-container" id="reasoningContainer">
+            <label>إعدادات التفكير</label>
+            <label class="toggle-switch">
+                <div>
+                    <span class="toggle-label">🧠 وضع التفكير العميق</span>
+                    <span class="toggle-sublabel">يفكر قبل الإجابة (بطيء لكن دقيق)</span>
+                </div>
+                <div>
+                    <input type="checkbox" id="reasoningToggle">
+                    <span class="slider"></span>
+                </div>
+            </label>
+        </div>
+
         <div style="margin-top: auto; border-top: 1px solid var(--border); padding-top: 20px;">
-            <p style="font-size: 12px; color: #8b949e;">المطور: <span style="color: white;">AnesNT</span></p>
-            <p style="font-size: 11px; color: #484f58; margin-top: 5px;">Project Genisi v3.5 (Streaming Active)</p>
+            <p style="font-size: 12px; color: var(--text-secondary);">
+                المطور: <span style="color: white; font-weight: 600;">AnesNT</span>
+            </p>
+            <p style="font-size: 11px; color: #484f58; margin-top: 6px;">
+                Genisi v4.0 | Streaming + Reasoning Control
+            </p>
         </div>
     </aside>
 
@@ -175,64 +383,105 @@
         <div id="chat-flow">
             <div class="message ai">
                 <div class="avatar"><i class="fas fa-robot"></i></div>
-                <div class="bubble">مرحباً أنس! نظام Genisi المتطور جاهز. اسألني أي شيء وسأجيبك فوراً بتقنية الـ Stream.</div>
+                <div>
+                    <span class="model-badge">Kimi Ready</span>
+                    <div class="bubble">
+                        مرحباً أنس! نظام Genisi جاهز. اختر الوضع المناسب:
+                        <br><br>
+                        • 💬 <strong>Kimi:</strong> للأسئلة العامة مع خيار التفكير العميق<br>
+                        • ⚡ <strong>Gemma:</strong> للأكواد والمهام السريعة (بدون تأخير)<br>
+                        • 🎨 <strong>Flux:</strong> لتوليد الصور
+                    </div>
+                </div>
             </div>
         </div>
 
         <div class="input-wrapper">
             <input type="text" id="userInput" placeholder="اكتب رسالتك هنا..." autocomplete="off">
-            <button class="send-btn" id="sendBtn" onclick="handleSend()"><i class="fas fa-paper-plane"></i></button>
+            <button class="send-btn" id="sendBtn" onclick="handleSend()">
+                <i class="fas fa-paper-plane"></i>
+            </button>
         </div>
     </main>
 
     <script>
+        // تغيير الوضع (إظهار/إخفاء خيار التفكير)
+        function handleModeChange() {
+            const action = document.getElementById('actionType').value;
+            const reasoningContainer = document.getElementById('reasoningContainer');
+            const badge = document.querySelector('.model-badge');
+            
+            if (action === 'chat') {
+                reasoningContainer.classList.add('active');
+                badge.textContent = 'Kimi Ready';
+            } else if (action === 'code') {
+                reasoningContainer.classList.remove('active');
+                badge.textContent = 'Gemma Fast';
+            } else {
+                reasoningContainer.classList.remove('active');
+                badge.textContent = 'Flux Image';
+            }
+        }
+
         async function handleSend() {
             const input = document.getElementById('userInput');
             const chatFlow = document.getElementById('chat-flow');
             const action = document.getElementById('actionType').value;
+            const reasoning = document.getElementById('reasoningToggle')?.checked || false;
             const btn = document.getElementById('sendBtn');
             const text = input.value.trim();
 
             if (!text) return;
 
-            // تعطيل الإدخال أثناء المعالجة
+            // UI State: Loading
             input.value = "";
             input.disabled = true;
             btn.disabled = true;
 
             // إضافة رسالة المستخدم
-            addMessage(text, 'user');
+            addMessage(text, 'user', action);
 
-            // إنشاء مكان لرد الذكاء الاصطناعي
-            const aiMsgId = addMessage("", 'ai');
+            // إنشاء رسالة AI فارغة
+            const aiMsgId = addMessage("", 'ai', action, reasoning);
             const aiBubble = document.getElementById(aiMsgId).querySelector('.bubble');
+            
+            // إظهار مؤشر الكتابة
+            const typingId = 'typing-' + Date.now();
+            aiBubble.innerHTML = `<div class="typing-indicator active" id="${typingId}">
+                <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+            </div>`;
 
             try {
                 const response = await fetch('/api/genisi', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ action, message: text })
+                    body: JSON.stringify({ 
+                        action, 
+                        message: text,
+                        reasoning: action === 'chat' ? reasoning : false // نرسله فقط للـ Chat
+                    })
                 });
 
                 if (action === 'image') {
-                    // معالجة الصور (لا تدعم الاستريم)
+                    // معالجة الصور
                     const data = await response.json();
                     if (data.success) {
-                        aiBubble.innerHTML = `<img src="data:image/png;base64,${data.data}">`;
+                        aiBubble.innerHTML = `<img src="data:image/png;base64,${data.data}" alt="Generated Image">`;
                     } else {
-                        aiBubble.textContent = "خطأ: " + data.error;
+                        aiBubble.innerHTML = `<span style="color: #f85149;">خطأ: ${data.error}</span>`;
                     }
                 } else {
-                    // معالجة النصوص بتقنية الـ Streaming
+                    // معالجة الـ Streaming
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
                     let fullText = "";
+                    let isFirstChunk = true;
 
                     while (true) {
                         const { done, value } = await reader.read();
                         if (done) break;
 
-                        const chunk = decoder.decode(value);
+                        const chunk = decoder.decode(value, { stream: true });
                         const lines = chunk.split('\n');
 
                         for (const line of lines) {
@@ -243,19 +492,30 @@
                                 try {
                                     const parsed = JSON.parse(jsonStr);
                                     if (parsed.content) {
+                                        if (isFirstChunk) {
+                                            aiBubble.innerHTML = ""; // إزالة typing indicator
+                                            isFirstChunk = false;
+                                        }
                                         fullText += parsed.content;
-                                        aiBubble.textContent = fullText; // تحديث النص فوراً
+                                        // تحديث النص مع Markdown
+                                        aiBubble.innerHTML = marked.parse(fullText);
+                                        // تلوين الأكواد إذا وجدت
+                                        aiBubble.querySelectorAll('pre code').forEach((block) => {
+                                            hljs.highlightElement(block);
+                                        });
                                         chatFlow.scrollTop = chatFlow.scrollHeight;
                                     } else if (parsed.error) {
-                                        aiBubble.textContent = "خطأ: " + parsed.error;
+                                        aiBubble.innerHTML = `<span style="color: #f85149;">خطأ: ${parsed.error}</span>`;
                                     }
-                                } catch (e) {}
+                                } catch (e) {
+                                    // تجاهل أخطاء JSON parsing للسطرغير المكتمل
+                                }
                             }
                         }
                     }
                 }
             } catch (error) {
-                aiBubble.textContent = "فشل الاتصال بالسيرفر. تأكد من عمل Backend.";
+                aiBubble.innerHTML = `<span style="color: #f85149;">فشل الاتصال: ${error.message}</span>`;
             } finally {
                 input.disabled = false;
                 btn.disabled = false;
@@ -263,15 +523,27 @@
             }
         }
 
-        function addMessage(text, role) {
+        function addMessage(text, role, action = 'chat', reasoning = false) {
             const chatFlow = document.getElementById('chat-flow');
             const msgId = 'msg-' + Date.now();
             const icon = role === 'user' ? 'fa-user' : 'fa-robot';
             
+            let badges = '';
+            if (role === 'ai') {
+                const modelName = action === 'chat' ? 'Kimi' : action === 'code' ? 'Gemma' : 'Flux';
+                badges += `<span class="model-badge">${modelName}</span>`;
+                if (action === 'chat' && reasoning) {
+                    badges += `<span class="reasoning-badge"><i class="fas fa-brain"></i> Reasoning ON</span>`;
+                }
+            }
+            
             const html = `
                 <div class="message ${role}" id="${msgId}">
                     <div class="avatar"><i class="fas ${icon}"></i></div>
-                    <div class="bubble">${text}</div>
+                    <div style="max-width: 100%;">
+                        ${badges}
+                        <div class="bubble">${role === 'user' ? escapeHtml(text) : text}</div>
+                    </div>
                 </div>
             `;
             
@@ -280,10 +552,19 @@
             return msgId;
         }
 
-        // دعم زر Enter
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // Enter لإرسال
         document.getElementById('userInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') handleSend();
         });
+
+        // تهيئة أولية
+        handleModeChange();
     </script>
 </body>
 </html>