Update index.html

index.html

@@ -6,6 +6,9 @@
   <title>Genisi AI</title>
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
   <style>
     :root {
       --bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
@@ -96,8 +99,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: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: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; }
     
@@ -125,17 +128,23 @@
     .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;}
-    .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;}
+    .bubble .table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border-radius:var(--radius-sm);border:1px solid var(--border);}
+    .bubble table{width:100%;border-collapse:collapse;min-width:400px;}
+    .bubble th,.bubble td{border:1px solid var(--border);padding:10px 14px;text-align:start;white-space:nowrap;}
+    .bubble th{background:var(--surface3);font-weight:600;}
 
     /* Code Blocks */
-    .code-container {position:relative; margin:16px 0; background:var(--surface3); border-radius:var(--radius-sm); border:1px solid var(--border); overflow:hidden;}
-    .code-header {display:flex; justify-content:space-between; align-items:center; background:#12141a; padding:8px 16px; font-size:0.8rem; color:var(--text2); font-family:'JetBrains Mono',monospace;}
-    .copy-btn {background:var(--surface2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:0.8rem; padding: 4px 10px; border-radius: var(--radius-pill); transition: all 0.2s;}
-    .copy-btn:hover {background:var(--accent); color:#fff;}
-    .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);}
+    .code-container{position:relative;margin:16px 0;background:var(--surface3);border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;max-width:100%;}
+    .code-header{display:flex;justify-content:space-between;align-items:center;background:#12141a;padding:8px 16px;font-size:0.8rem;color:var(--text2);font-family:'JetBrains Mono',monospace;}
+    .copy-btn{background:var(--surface2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:0.8rem;padding:4px 10px;border-radius:var(--radius-pill);transition:all 0.2s;}
+    .copy-btn:hover{background:var(--accent);color:#fff;}
+    .code-container pre{margin:0;padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;font-family:'JetBrains Mono',monospace;font-size:0.85rem;max-width:100%;}
+    .code-container pre code{white-space:pre;display:block;}
+    .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);}
+
+    /* KaTeX Math Styles */
+    .katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0;-webkit-overflow-scrolling:touch;}
+    .katex{font-size:1.05em;}
 
     /* 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);}
@@ -201,6 +210,20 @@
     .btn-danger{padding:8px 18px;background:rgba(247,95,95,.12);border:1px solid var(--danger);
       color:var(--danger);border-radius:var(--radius-pill);cursor:pointer;font-size:.9rem;font-weight:600;font-family:'Cairo',sans-serif; transition:all var(--tr);}
     .btn-danger:hover{background:var(--danger); color:#fff;}
+
+    /* ══ RESPONSIVE MOBILE ══ */
+    @media (max-width: 640px) {
+      .msg-row { padding: 6px 12px; gap: 10px; }
+      .bubble { max-width: 92vw; padding: 12px 14px; font-size: .93rem; }
+      .msg-row.bot .bubble { padding: 6px 2px; }
+      .topbar { height: 56px; padding: 0 14px; }
+      .input-area { padding: 0 10px 18px; }
+      .code-container pre { font-size: 0.78rem; padding: 12px; }
+      .bubble th, .bubble td { font-size: 0.85rem; padding: 8px 10px; }
+      .w-title { font-size: 1.8rem; }
+      .chips { gap: 8px; }
+      .chip { font-size: .82rem; padding: 8px 14px; }
+    }
   </style>
 </head>
 <body>
@@ -341,9 +364,32 @@ renderer.code = function(token) {
       <pre><code class="language-${lang}">${escapedCode}</code></pre>
     </div>`;
 };
+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('');
+    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>`;
+};
 renderer.html = function(html) { return html; };
 marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
 
+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
+    });
+  }
+}
+
 function copyCode(btn, encodedCode) {
   navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
     const originalText = btn.innerHTML;
@@ -549,6 +595,7 @@ async function sendMessage(){
          botContentDiv.innerHTML = fullBotResponse;
     } else {
          botContentDiv.innerHTML = marked.parse(fullBotResponse);
+         renderKaTeX(botContentDiv);
     }
     
     chat.history.push({ user: text, bot: fullBotResponse, uiFiles: uiFiles });
@@ -558,6 +605,7 @@ async function sendMessage(){
   } catch(err){
     if (err.name === 'AbortError') {
         botContentDiv.innerHTML = marked.parse(fullBotResponse) + `<br><br><span style="color:var(--text3); font-style:italic;">${i18n[currentLang].stopMsg}</span>`;
+        renderKaTeX(botContentDiv);
         chat.history.push({ user: text, bot: fullBotResponse + "\n\n*" + i18n[currentLang].stopMsg + "*", uiFiles: uiFiles });
         saveChats();
     } else {
@@ -590,7 +638,10 @@ function appendBubble(role, text, isMarkdown, filesList =[]){
   const contentDiv = document.createElement('div');
   if(text) {
       if (text.includes('<div style="text-align:center;')) { contentDiv.innerHTML = text; } 
-      else { contentDiv.innerHTML = isMarkdown ? marked.parse(text) : esc(text).replace(/\n/g, '<br/>'); }
+      else { 
+        contentDiv.innerHTML = isMarkdown ? marked.parse(text) : esc(text).replace(/\n/g, '<br/>');
+        if (isMarkdown) renderKaTeX(contentDiv);
+      }
   }
   bub.appendChild(contentDiv);