Update frontend/index.html

frontend/index.html

@@ -14,7 +14,6 @@
       --text: #e8eaf2; --text2: #9aa3be; --text3: #5c6480;
       --user-bubble: #1a2340; --bot-bubble: #161920;
       --danger: #f75f5f; 
-      /* الحواف الدائرية الناعمة جداً */
       --radius: 28px; --radius-sm: 18px; --radius-pill: 50px;
       --sidebar-w: 280px; --tr: 0.3s cubic-bezier(.4,0,.2,1);
     }
@@ -45,7 +44,7 @@
     .btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
       color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
       font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px; justify-content:center;
-      transition:opacity var(--tr),transform var(--tr); box-shadow: 0 4px 15px var(--accent-soft);}
+      transition:all var(--tr); box-shadow: 0 4px 15px var(--accent-soft);}
     .btn-new:hover{opacity:.9;transform:translateY(-2px)}
     .s-label{padding:10px 20px;font-size:.75rem;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase}
     .chats-list{flex:1;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
@@ -84,16 +83,10 @@
       font-size:.9rem;color:var(--text);cursor:pointer;transition:all var(--tr); box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
     .chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent); transform:translateY(-2px);}
 
-    /* MESSAGES & ANIMATIONS */
+    /* MESSAGES */
     .msg-row{display:flex;padding:8px 30px;gap:16px; animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
-    @keyframes popIn { 
-      from { opacity: 0; transform: translateY(15px) scale(0.98); filter: blur(4px); } 
-      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 
-    }
-    @keyframes fadeSlideUp {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
+    @keyframes popIn { from { opacity: 0; transform: translateY(15px) scale(0.98); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
+    @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
     .msg-row.user{flex-direction:row-reverse}
     .msg-av{width:38px;height:38px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;
       justify-content:center;font-size:1.1rem;font-weight:700;margin-top:2px;overflow:hidden;
@@ -104,36 +97,17 @@
     
     .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:var(--bot-bubble);border:1px solid var(--border);border-top-left-radius:6px}
-    [dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:6px; }
+    .msg-row.bot .bubble{background:var(--bot-bubble);border:1px solid var(--border);border-top-left-radius:6px}[dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:6px; }
     .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; }
     
-    /* GEMINI STREAMING EFFECT */
-    .gemini-cursor {
-      display: inline-block;
-      width: 14px; height: 14px;
-      margin-inline-start: 6px;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>');
-      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>');
-      mask-size: cover; -webkit-mask-size: cover;
-      animation: spinPulse 1s infinite linear;
-      transform-origin: center;
-      vertical-align: middle;
-    }
-    @keyframes spinPulse {
-      0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
-      50% { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); }
-      100% { transform: scale(0.8) rotate(180deg); opacity: 0.5; }
-    }
+    .gemini-cursor { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); mask-size: cover; -webkit-mask-size: cover; animation: spinPulse 1s infinite linear; transform-origin: center; vertical-align: middle; }
+    @keyframes spinPulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); } 100% { transform: scale(0.8) rotate(180deg); opacity: 0.5; } }
 
     /* MARKDOWN STYLES */
     .bubble p{margin-bottom:12px}.bubble p:last-child{margin-bottom:0}
     .bubble ul,.bubble ol{padding-inline-start:24px;margin:12px 0}
     .bubble li {margin-bottom: 6px;}
-    
-    /* Tables */
     .bubble table {width:100%;border-collapse:hidden;margin:16px 0; border-radius: var(--radius-sm); overflow:hidden; border: 1px solid var(--border);}
     .bubble th, .bubble td {border:1px solid var(--border);padding:10px 14px;text-align:start;}
     .bubble th {background:var(--surface3);font-weight:600;}
@@ -146,16 +120,26 @@
     .code-container pre {margin:0; padding:16px; overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:0.85rem;}
     .bubble code:not(pre code) {font-family:'JetBrains Mono',monospace;font-size:.85rem;background:var(--surface3);padding:3px 6px;border-radius:6px; color:var(--accent);}
 
-    /* memory badge */
+    /* Files */
+    .file-chip {display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 12px; font-size:0.85rem; margin:0 4px 8px 0; color:var(--text);}
+    .file-chip button {background:none; border:none; color:var(--danger); cursor:pointer; font-size:1rem; padding:0; margin-left:4px; transition:transform 0.2s;}
+    .file-chip button:hover {transform:scale(1.2);}
+    .file-prev {display:flex; align-items:center; gap:8px; background:var(--surface3); padding:8px 12px; border-radius:8px; margin-bottom:8px; font-size:0.85rem;}
+    
     .mem-badge{font-size:.75rem;color:var(--text3);padding:4px 30px 10px;display:flex;align-items:center;gap:6px; font-weight: 600;}
 
-    /* INPUT - FLOATING PILL DESIGN */
-    .input-area{padding:0 24px 30px; display:flex; justify-content:center; flex-shrink:0;}
+    /* INPUT */
+    .input-area{padding:0 24px 30px; display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
     .input-wrapper{width:100%; max-width:850px; position:relative;}
+    .file-chips-container {width:100%; max-width:850px; display:flex; flex-wrap:wrap; margin-bottom:8px;}
     .input-box{display:flex;align-items:flex-end;gap:12px;background:var(--surface);
-      border:1px solid var(--border);border-radius:32px;padding:12px 16px 12px 24px;
-      transition:all var(--tr); box-shadow: 0 8px 30px rgba(0,0,0,0.15);}[dir="rtl"] .input-box {padding:12px 24px 12px 16px;}
+      border:1px solid var(--border);border-radius:32px;padding:12px 16px 12px 16px;
+      transition:all var(--tr); box-shadow: 0 8px 30px rgba(0,0,0,0.15);}
     .input-box:focus-within{border-color:var(--accent); box-shadow: 0 8px 30px var(--accent-soft), 0 0 0 3px var(--accent-soft);}
+    
+    .btn-attach{background:none; border:none; color:var(--text3); cursor:pointer; font-size:1.3rem; padding:6px; border-radius:50%; transition:all var(--tr); display:flex; align-items:center; justify-content:center;}
+    .btn-attach:hover{color:var(--accent); background:var(--surface2);}
+
     .input-box textarea{flex:1;background:none;border:none;outline:none;color:var(--text);
       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)}
@@ -163,8 +147,7 @@
     .btn-send{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent2));
       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:hover{opacity:.9;transform:scale(1.08) rotate(-10deg);}
-    [dir="rtl"] .btn-send:hover{transform:scale(1.08) rotate(10deg);}
+    .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;}
 
     /* MODAL */
@@ -228,8 +211,11 @@
     <div class="chat-area" id="chat-area"></div>
 
     <div class="input-area">
+      <div class="file-chips-container" id="file-chips"></div>
       <div class="input-wrapper">
         <div class="input-box">
+          <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-send" id="send-btn" onclick="sendMessage()">➤</button>
         </div>
@@ -302,26 +288,29 @@ function applyI18n() {
   if(!activeChatId) renderWelcome();
   renderChatList();
 }
-
 function changeLanguage(val) { currentLang = val; localStorage.setItem('genisi_lang', val); applyI18n(); }
 
 // ══���═════ STATE & CONFIG ════════
 let chats = JSON.parse(localStorage.getItem('genisi_chats') || '[]');
 let activeChatId = null;
 let isGenerating = false;
+let pendingFiles =[];
 
-// ════════ MARKDOWN PARSER (marked.js) ════════
+// ════════ MARKDOWN PARSER (FIXED) ════════
 const renderer = new marked.Renderer();
-renderer.code = function(code, language) {
-  const validLang = language || 'text';
-  const escapedCode = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+renderer.code = function(token) {
+  // Fix for newer marked.js versions that pass an object instead of string
+  const codeText = typeof token === 'string' ? token : token.text || '';
+  const lang = typeof token === 'string' ? arguments[1] : token.lang || 'text';
+  
+  const escapedCode = String(codeText).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
   return `
     <div class="code-container">
       <div class="code-header">
-        <span>${validLang}</span>
-        <button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(code)}')">📋 Copy</button>
+        <span>${lang}</span>
+        <button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(codeText)}')">📋 Copy</button>
       </div>
-      <pre><code class="language-${validLang}">${escapedCode}</code></pre>
+      <pre><code class="language-${lang}">${escapedCode}</code></pre>
     </div>`;
 };
 marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
@@ -334,17 +323,46 @@ function copyCode(btn, encodedCode) {
   });
 }
 
-// ════════ UTILS ════════
+// ════════ UTILS & FILES ════════
 const genId = () => Date.now().toString(36);
 const saveChats = () => localStorage.setItem('genisi_chats', JSON.stringify(chats));
 const getChat = (id) => chats.find(c => c.id === (id ?? activeChatId));
 function esc(t){ return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-// Auto scroll smoothly to bottom
 function scrollToBottom() {
     const area = document.getElementById('chat-area');
     area.scrollTop = area.scrollHeight;
 }
 
+// File Handling
+async function handleFiles(files) {
+    for (let f of files) {
+        // التحقق مما إذا كان الملف نصياً أو كود برمجي
+        const isText = f.type.startsWith('text/') || f.name.match(/\.(py|js|html|css|json|md|txt|csv|cpp|java)$/i);
+        
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            let data = e.target.result;
+            if (!isText) data = data.split(',')[1]; // استخراج Base64 فقط للصور والملفات الثنائية
+            
+            pendingFiles.push({ name: f.name, type: f.type || 'application/octet-stream', data: data, isText: isText });
+            renderFileChips();
+        };
+        if (isText) reader.readAsText(f);
+        else reader.readAsDataURL(f);
+    }
+    document.getElementById('file-input').value = ''; // Reset
+}
+
+function renderFileChips() {
+    const container = document.getElementById('file-chips');
+    container.innerHTML = '';
+    pendingFiles.forEach((f, idx) => {
+        const icon = f.isText ? '📄' : '🖼️';
+        container.innerHTML += `<div class="file-chip">${icon} ${f.name} <button onclick="removeFile(${idx})">×</button></div>`;
+    });
+}
+function removeFile(idx) { pendingFiles.splice(idx, 1); renderFileChips(); }
+
 // ════════ THEME ════════
 function applyTheme(t){
   document.documentElement.setAttribute('data-theme',t);
@@ -390,7 +408,7 @@ function renderWelcome(){
     </div>`;
 }
 
-function newChat(){ activeChatId=null; document.getElementById('msg-input').value=''; renderWelcome(); renderChatList(); }
+function newChat(){ activeChatId=null; pendingFiles=[]; renderFileChips(); document.getElementById('msg-input').value=''; renderWelcome(); renderChatList(); }
 
 function loadChat(id){
   activeChatId=id;
@@ -399,7 +417,7 @@ function loadChat(id){
   const area=document.getElementById('chat-area');
   area.innerHTML='';
   chat.history.forEach((entry, idx)=>{
-    appendBubble('user', entry.user, false);
+    appendBubble('user', entry.user, false, entry.uiFiles);
     appendBubble('bot', entry.bot, true);
     appendMemBadge(idx+1, chat.history.length);
   });
@@ -421,8 +439,9 @@ function autoResize(el){ el.style.height='auto'; el.style.height=Math.min(el.scr
 async function sendMessage(){
   if(isGenerating) return;
   const input=document.getElementById('msg-input');
-  const text=input.value.trim();
-  if(!text) return;
+  let text = input.value.trim();
+  
+  if(!text && pendingFiles.length === 0) return;
 
   const welcome=document.getElementById('welcome');
   if(welcome) welcome.remove();
@@ -431,24 +450,39 @@ async function sendMessage(){
 
   if(!activeChatId){
     activeChatId=genId();
-    chats.push({id:activeChatId, title:text.slice(0,35)+'...', history:[]});
-    document.getElementById('topbar-title').textContent=text.slice(0,35)+'...';
+    const chatTitle = text ? text.slice(0,35)+'...' : pendingFiles[0].name;
+    chats.push({id:activeChatId, title:chatTitle, history:[]});
+    document.getElementById('topbar-title').textContent=chatTitle;
   }
 
   const chat = getChat();
-  appendBubble('user', text, false);
+  
+  // تجهيز الملفات للإرسال
+  const uiFiles = pendingFiles.map(f => f.name); // للعرض في الواجهة فقط
+  const binaryFiles =[]; // للإرسال للباك اند
+  
+  // دمج النصوص البرمجية/النصية مع نص الرسالة
+  pendingFiles.forEach(f => {
+      if(f.isText) {
+          text += `\n\n\`\`\`${f.name.split('.').pop()}\n// File: ${f.name}\n${f.data}\n\`\`\``;
+      } else {
+          binaryFiles.push({ name: f.name, mime_type: f.type, data: f.data });
+      }
+  });
+
+  appendBubble('user', text, false, uiFiles);
+  pendingFiles =[]; renderFileChips();
   
   isGenerating=true;
   document.getElementById('send-btn').disabled=true;
 
-  // إنشاء عنصر المحادثة مع إظهاره بأنيميشن
   const botContentDiv = appendBubble('bot', '', true);
 
   try {
     const response = await fetch('/chat', {
       method: 'POST',
       headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ message: text, history: chat.history })
+      body: JSON.stringify({ message: text, history: chat.history, files: binaryFiles })
     });
 
     if(!response.ok) throw new Error("Server Error");
@@ -464,17 +498,14 @@ async function sendMessage(){
       const chunk = decoder.decode(value, {stream: true});
       fullBotResponse += chunk;
       
-      // دمج الماركداون مع "مؤشر جيميني اللامع"
       botContentDiv.innerHTML = marked.parse(fullBotResponse) + '<span class="gemini-cursor"></span>';
-      
       scrollToBottom();
     }
 
-    // بعد الانتهاء، نحذف المؤشر اللامع ونضع النص النهائي
     botContentDiv.innerHTML = marked.parse(fullBotResponse);
     
-    // Save to history
-    chat.history.push({ user: text, bot: fullBotResponse });
+    // حفظ المحادثة
+    chat.history.push({ user: text, bot: fullBotResponse, uiFiles: uiFiles });
     saveChats();
     appendMemBadge(chat.history.length, chat.history.length);
 
@@ -487,7 +518,7 @@ async function sendMessage(){
   renderChatList();
 }
 
-function appendBubble(role, text, isMarkdown){
+function appendBubble(role, text, isMarkdown, filesList =[]){
   const area=document.getElementById('chat-area');
   const row=document.createElement('div'); row.className=`msg-row ${role}`;
   const av=document.createElement('div'); av.className='msg-av';
@@ -498,8 +529,15 @@ function appendBubble(role, text, isMarkdown){
   
   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');
-  if(text) contentDiv.innerHTML = isMarkdown ? marked.parse(text) : esc(text);
+  if(text) contentDiv.innerHTML = isMarkdown ? marked.parse(text) : esc(text).replace(/\n/g, '<br/>');
   bub.appendChild(contentDiv);
   
   row.appendChild(av); row.appendChild(bub);