Update index.html

index.html

@@ -111,10 +111,8 @@
     
     .bubble{max-width:min(700px,80vw);padding:16px 22px;border-radius:var(--radius);
       font-size:.98rem;line-height:1.75;word-break:break-word; box-shadow: 0 4px 15px rgba(0,0,0,0.03);}
-    .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;border-top-left-radius:var(--radius);}
-    [dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
-    .msg-row.user .bubble{background:var(--user-bubble);border:none; border-top-right-radius:6px}
-    [dir="rtl"] .msg-row.user .bubble { border-top-right-radius:var(--radius); border-top-left-radius:6px; }
+    .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;border-top-left-radius:var(--radius);}[dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
+    .msg-row.user .bubble{background:var(--user-bubble);border:none; border-top-right-radius:6px}[dir="rtl"] .msg-row.user .bubble { border-top-right-radius:var(--radius); border-top-left-radius:6px; }
     
     .bubble img {
       max-width: 100%; height: auto; border-radius: 16px; margin: 12px 0;
@@ -181,14 +179,35 @@
       font-family:'Cairo',sans-serif;font-size:.98rem;resize:none;max-height:160px;line-height:1.6; padding: 6px 0;}
     .input-box textarea::placeholder{color:var(--text3)}
     
-    .btn-send, .btn-stop {width:42px;height:42px; border:none;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--tr); flex-shrink:0; margin-bottom: 2px;}
-    .btn-send {background:linear-gradient(135deg,var(--accent),var(--accent2));}
+    /* أزرار الإرسال والميكروفون والإيقاف */
+    .btn-send, .btn-stop, .btn-voice {
+      width:42px;height:42px; border:none;border-radius:50%;cursor:pointer;
+      display:flex;align-items:center;justify-content:center;font-size:1.1rem;
+      transition:all var(--tr); flex-shrink:0; margin-bottom: 2px;
+    }
+    
+    .btn-send {background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;}
     .btn-send:hover{opacity:.9;transform:scale(1.08) rotate(-10deg);}[dir="rtl"] .btn-send:hover{transform:scale(1.08) rotate(10deg);}
     .btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none;}
     
     .btn-stop {background:var(--surface3); color:var(--text); border:1px solid var(--border);}
     .btn-stop:hover {background:var(--danger); color:#fff; transform:scale(1.05);}
 
+    /* زر التحدث الجديد */
+    .btn-voice {background:var(--surface2); color:var(--text2);}
+    .btn-voice:hover {background:var(--surface3); color:var(--accent); transform:scale(1.05);}
+    
+    /* أنيميشن التسجيل الصوتي */
+    .btn-voice.recording {
+      background:var(--danger); color:#fff;
+      animation: pulseRecord 1.5s infinite;
+    }
+    @keyframes pulseRecord {
+      0% { box-shadow: 0 0 0 0 rgba(247, 95, 95, 0.4); }
+      70% { box-shadow: 0 0 0 12px rgba(247, 95, 95, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(247, 95, 95, 0); }
+    }
+
     /* MODAL */
     .overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);display:flex;
       align-items:center;justify-content:center;backdrop-filter:blur(8px);
@@ -280,6 +299,10 @@
           <input type="file" id="file-input" multiple hidden onchange="handleFiles(this.files)" />
           <button class="btn-attach" onclick="document.getElementById('file-input').click()">+</button>
           <textarea id="msg-input" rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)" placeholder="Type a message..."></textarea>
+          
+          <!-- زر التحدث الصوتي (مضاف حديثاً) -->
+          <button class="btn-voice" id="voice-btn" onclick="toggleVoiceRecord()" title="تحدث بالصوت">🎤</button>
+          
           <button class="btn-send" id="send-btn" onclick="sendMessage()">➤</button>
           <button class="btn-stop" id="stop-btn" onclick="stopGeneration()" style="display:none;">⏹</button>
         </div>
@@ -325,10 +348,10 @@
 <script>
 // ════════ i18n ════════
 const i18n = {
-  en: { newChat: "✦ New Chat", chatsLabel: "CHATS", settings: "Settings", lang: "Language", dark: "Dark Mode", del: "Delete All Chats", delDesc: "This action cannot be undone", delBtn: "🗑 Delete", saveBtn: "💾 Close", placeholder: "Type your message... (Enter to send)", welcomeTitle: "Welcome to Genisi", welcomeSub: "Your smart assistant by AnesNT — Batna 🇩🇿", c1: "What is AI?", c2: "Write Python code", c3: "Summarize a topic", c4: "Design an image in space 🚀", errConnect: "Connection Error", memBadge: "Memory: {c}/{t} messages", stopMsg: "[Generation stopped by user]" },
-  ar: { newChat: "✦ محادثة جديدة", chatsLabel: "المحادثات", settings: "الإعدادات", lang: "اللغة", dark: "الوضع الليلي", del: "حذف جميع المحادثات", delDesc: "لا يمكن التراجع عن هذا الإجراء", delBtn: "🗑 حذف", saveBtn: "💾 إغلاق", placeholder: "اكتب رسالتك... (Enter للإرسال)", welcomeTitle: "مرحبًا في Genisi", welcomeSub: "أنا Genisi، مساعدك الذكي من AnesNT — باتنة 🇩🇿", c1: "ما هو الذكاء الاصطناعي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "صمم صورة بالفضاء 🚀", errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]" },
-  fr: { newChat: "✦ Nouvelle Disc.", chatsLabel: "DISCUSSIONS", settings: "Paramètres", lang: "Langue", dark: "Mode Sombre", del: "Supprimer Tout", delDesc: "Action irréversible", delBtn: "🗑 Supprimer", saveBtn: "💾 Fermer", placeholder: "Écrivez votre message...", welcomeTitle: "Bienvenue sur Genisi", welcomeSub: "Votre assistant intelligent par AnesNT — Batna 🇩🇿", c1: "Qu'est-ce que l'IA?", c2: "Code Python", c3: "Résumer un sujet", c4: "Créer une image 🚀", errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs", stopMsg: "[Génération arrêtée]" },
-  es: { newChat: "✦ Nuevo Chat", chatsLabel: "CHATS", settings: "Ajustes", lang: "Idioma", dark: "Modo Oscuro", del: "Borrar Todo", delDesc: "Acción irreversible", delBtn: "🗑 Borrar", saveBtn: "💾 Cerrar", placeholder: "Escribe tu mensaje...", welcomeTitle: "Bienvenido a Genisi", welcomeSub: "Tu asistente por AnesNT — Batna 🇩🇿", c1: "¿Qué es la IA?", c2: "Código Python", c3: "Resumir", c4: "Diseñar imagen 🚀", errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs", stopMsg: "[Generación detenida]" }
+  en: { newChat: "✦ New Chat", chatsLabel: "CHATS", settings: "Settings", lang: "Language", dark: "Dark Mode", del: "Delete All Chats", delDesc: "This action cannot be undone", delBtn: "🗑 Delete", saveBtn: "💾 Close", placeholder: "Type your message... (Enter to send)", welcomeTitle: "Welcome to Genisi", welcomeSub: "Your smart assistant by AnesNT — Batna 🇩🇿", c1: "What is AI?", c2: "Write Python code", c3: "Summarize a topic", c4: "Design an image in space 🚀", errConnect: "Connection Error", memBadge: "Memory: {c}/{t} messages", stopMsg: "[Generation stopped by user]", vMsg: "🎤 Voice Message", vThink: "🔊 Thinking...", vPlay: "🔊 Playing Response...", vEnd: "🔊 Voice Response Ended" },
+  ar: { newChat: "✦ محادثة جديدة", chatsLabel: "المحادثات", settings: "الإعدادات", lang: "اللغة", dark: "الوضع الليلي", del: "حذف جميع المحادثات", delDesc: "لا يمكن التراجع عن هذا الإجراء", delBtn: "🗑 حذف", saveBtn: "💾 إغلاق", placeholder: "اكتب رسالتك... (Enter للإرسال)", welcomeTitle: "مرحبًا في Genisi", welcomeSub: "أنا Genisi، مساعدك الذكي من AnesNT — باتنة 🇩🇿", c1: "ما هو الذكاء الاصطناعي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "صمم صورة بالفضاء 🚀", errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]", vMsg: "🎤 رسالة صوتية", vThink: "🔊 جاري التفكير...", vPlay: "🔊 يستمع ويتحدث الآن...", vEnd: "🔊 انتهى الرد الصوتي" },
+  fr: { newChat: "✦ Nouvelle Disc.", chatsLabel: "DISCUSSIONS", settings: "Paramètres", lang: "Langue", dark: "Mode Sombre", del: "Supprimer Tout", delDesc: "Action irréversible", delBtn: "🗑 Supprimer", saveBtn: "💾 Fermer", placeholder: "Écrivez votre message...", welcomeTitle: "Bienvenue sur Genisi", welcomeSub: "Votre assistant intelligent par AnesNT — Batna 🇩🇿", c1: "Qu'est-ce que l'IA?", c2: "Code Python", c3: "Résumer un sujet", c4: "Créer une image 🚀", errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs", stopMsg: "[Génération arrêtée]", vMsg: "🎤 Message Vocal", vThink: "🔊 Réflexion...", vPlay: "🔊 Lecture...", vEnd: "🔊 Fin de la réponse vocale" },
+  es: { newChat: "✦ Nuevo Chat", chatsLabel: "CHATS", settings: "Ajustes", lang: "Idioma", dark: "Modo Oscuro", del: "Borrar Todo", delDesc: "Acción irreversible", delBtn: "🗑 Borrar", saveBtn: "💾 Cerrar", placeholder: "Escribe tu mensaje...", welcomeTitle: "Bienvenido a Genisi", welcomeSub: "Tu asistente por AnesNT — Batna 🇩🇿", c1: "¿Qué es la IA?", c2: "Código Python", c3: "Resumir", c4: "Diseñar imagen 🚀", errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs", stopMsg: "[Generación detenida]", vMsg: "🎤 Mensaje de Voz", vThink: "🔊 Pensando...", vPlay: "🔊 Reproduciendo...", vEnd: "🔊 Fin de la respuesta de voz" }
 };
 
 let currentLang = localStorage.getItem('genisi_lang') || 'en';
@@ -365,6 +388,11 @@ let isGenerating = false;
 let pendingFiles =[];
 let currentAbortController = null;
 
+// المتغيرات الخاصة بالتسجيل الصوتي
+let mediaRecorder;
+let audioChunks =[];
+let isRecording = false;
+
 // ════════ MARKDOWN & PARSER ════════
 const renderer = new marked.Renderer();
 renderer.code = function(token) {
@@ -377,7 +405,7 @@ renderer.table = function(header, body) {
   if (typeof header === 'object' && header !== null && 'header' in header) {
     const token = header;
     const hdr = token.header.map(cell => `<th>${cell.tokens.map(t=>t.raw||'').join('')}</th>`).join('');
-    const rows = (token.rows || []).map(row => `<tr>${row.map(cell => `<td>${cell.tokens.map(t=>t.raw||'').join('')}</td>`).join('')}</tr>`).join('');
+    const rows = (token.rows ||[]).map(row => `<tr>${row.map(cell => `<td>${cell.tokens.map(t=>t.raw||'').join('')}</td>`).join('')}</tr>`).join('');
     return `<div class="table-wrapper"><table><thead><tr>${hdr}</tr></thead><tbody>${rows}</tbody></table></div>`;
   }
   return `<div class="table-wrapper"><table><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
@@ -393,7 +421,7 @@ function safeMarked(text) {
 
 function renderKaTeX(el) {
   if (window.renderMathInElement) {
-    renderMathInElement(el, { delimiters: [{left: '$$', right: '$$', display: true},{left: '$', right: '$', display: false},{left: '\\(', right: '\\)', display: false},{left: '\\[', right: '\\]', display: true}], throwOnError: false });
+    renderMathInElement(el, { delimiters:[{left: '$$', right: '$$', display: true},{left: '$', right: '$', display: false},{left: '\\(', right: '\\)', display: false},{left: '\\[', right: '\\]', display: true}], throwOnError: false });
   }
 }
 function copyCode(btn, encodedCode) {
@@ -504,9 +532,9 @@ function quickSend(text){ document.getElementById('msg-input').value=text; sendM
 function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();} }
 function autoResize(el){ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,160)+'px'; }
 
-// ════════ MESSAGING & STREAMING ════════
+// ════════ MESSAGING & STREAMING (TEXT) ════════
 async function sendMessage(){
-  if(isGenerating) return;
+  if(isGenerating || isRecording) return;
   const input = document.getElementById('msg-input'); let text = input.value.trim();
   if(!text && pendingFiles.length === 0) return;
   const welcome = document.getElementById('welcome'); if(welcome) welcome.remove();
@@ -579,6 +607,90 @@ async function sendMessage(){
   }
 }
 
+// ════════ VOICE RECORDING (NEW FEATURE) ════════
+async function toggleVoiceRecord() {
+    const voiceBtn = document.getElementById('voice-btn');
+    const t = i18n[currentLang];
+    
+    // إذا كان يسجل حالياً، قم بإيقاف التسجيل
+    if (isRecording) {
+        mediaRecorder.stop();
+        isRecording = false;
+        voiceBtn.classList.remove('recording');
+        voiceBtn.textContent = '⏳'; 
+        voiceBtn.disabled = true;
+        return;
+    }
+
+    // إذا لم يكن يسجل، ابدأ التسجيل
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mediaRecorder = new MediaRecorder(stream);
+        audioChunks =[];
+
+        mediaRecorder.ondataavailable = event => {
+            audioChunks.push(event.data);
+        };
+
+        mediaRecorder.onstop = async () => {
+            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+            const reader = new FileReader();
+            reader.readAsDataURL(audioBlob);
+            reader.onloadend = async () => {
+                const base64data = reader.result.split(',')[1];
+                
+                const welcome = document.getElementById('welcome'); 
+                if(welcome) welcome.remove();
+
+                // عرض مؤشر للمستخدم في المحادثة
+                appendBubble('user', t.vMsg, false);
+                const botContentDiv = appendBubble('bot', t.vThink, false);
+
+                try {
+                    const response = await fetch('/voice-chat', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ audio_b64: base64data, mime_type: 'audio/webm' })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.status === "success") {
+                        botContentDiv.innerHTML = t.vPlay;
+                        
+                        // تشغيل الصوت تلقائياً
+                        const botAudio = new Audio(`data:${data.mime_type};base64,${data.audio_b64}`);
+                        botAudio.play();
+                        
+                        // عند انتهاء الصوت
+                        botAudio.onended = () => {
+                            botContentDiv.innerHTML = t.vEnd;
+                        };
+                    } else {
+                        botContentDiv.innerHTML = `<span style="color:var(--danger)">⚠️ خطأ: ${data.message}</span>`;
+                    }
+                } catch (err) {
+                    botContentDiv.innerHTML = `<span style="color:var(--danger)">⚠️ ${t.errConnect}</span>`;
+                } finally {
+                    voiceBtn.textContent = '🎤';
+                    voiceBtn.disabled = false;
+                    scrollToBottom();
+                    stream.getTracks().forEach(track => track.stop()); // إغلاق المايكروفون
+                }
+            };
+        };
+
+        mediaRecorder.start();
+        isRecording = true;
+        voiceBtn.classList.add('recording');
+        voiceBtn.textContent = '⏹'; // أيقونة الإيقاف
+    } catch (err) {
+        alert('يرجى السماح باستخدام الميكروفون للتمكن من التحدث.');
+        console.error(err);
+    }
+}
+
+// ════════ UI BUBBLES ════════
 function appendBubble(role, text, isMarkdown, filesList =[]){
   const area=document.getElementById('chat-area');
   const row=document.createElement('div'); row.className=`msg-row ${role}`;
@@ -588,7 +700,7 @@ function appendBubble(role, text, isMarkdown, filesList =[]){
   const bub=document.createElement('div'); bub.className='bubble';
   if(filesList && filesList.length > 0) filesList.forEach(name => { bub.innerHTML += `<div class="file-prev">📎 ${esc(name)}</div>`; });
   const contentDiv = document.createElement('div');
-  // 🆕 الحل السحري لمشكلة اتجاه النص المختلط
+  
   contentDiv.dir = 'auto';
   contentDiv.style.unicodeBidi = 'plaintext';
   if(text) {