Spaces:

AnesKAM
/

Genisi

Running

App Files Files Community

AnesKAM commited on Apr 13

Commit

ba016d3

verified ·

1 Parent(s): af5d2e2

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -34

index.html CHANGED Viewed

@@ -2,16 +2,17 @@
 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <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>
-  <!-- إضافة DOMPurify للحماية من XSS -->
   <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.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;
       --border: #2a2f42; --border2: #333a52;
@@ -106,7 +107,6 @@
     .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;
@@ -117,15 +117,11 @@
       transition: transform 0.2s;
       border: 1px solid var(--border);
     }
-    .bubble img:active {
-      transform: scale(1.02);
-    }
-    /* 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; } }
-    /* IMAGE SKELETON LOADING (تأثير التدرج لتوليد الصور) */
     .skeleton-img {
       width: 100%; max-width: 400px; height: 350px;
       margin: 15px auto; border-radius: 18px;
@@ -159,7 +155,7 @@
     .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;}
@@ -192,7 +188,6 @@
     .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;}
-    /* Stop Button Styles */
     .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);}
@@ -228,7 +223,7 @@
       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; }
@@ -240,13 +235,41 @@
       .w-title { font-size: 1.8rem; }
       .chips { gap: 8px; }
       .chip { font-size: .82rem; padding: 8px 14px; }
     }
   </style>
 </head>
 <body>
 <div class="app">
-  <aside class="sidebar" id="sidebar">
     <div class="sidebar-header">
       <div class="s-logo">
         <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
@@ -264,7 +287,8 @@
   <main class="main">
     <div class="topbar">
-      <button class="btn-icon" onclick="toggleSidebar()">☰</button>
       <div class="topbar-title" id="topbar-title">Genisi AI</div>
     </div>
@@ -285,7 +309,7 @@
   </main>
 </div>
-<!-- SETTINGS MODAL -->
 <div class="overlay" id="settings-modal">
   <div class="modal">
     <div class="m-header">
@@ -320,7 +344,7 @@
 </div>
 <script>
-// ════════ i18n (DICTIONARY) ════════
 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: "مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿", c1: "ما هو الذكاء الاصطناعي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "صمم صورة بالفضاء 🚀", errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]" },
@@ -351,7 +375,7 @@ function applyI18n() {
 }
 function changeLanguage(val) { currentLang = val; localStorage.setItem('genisi_lang', val); applyI18n(); }
-// ════════ STATE & CONFIG ════════
 const genId = () => Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
 let userId = localStorage.getItem('genisi_user_id');
@@ -366,7 +390,7 @@ let isGenerating = false;
 let pendingFiles =[];
 let currentAbortController = null;
-// ════════ MARKDOWN PARSER + DOMPurify (آمن) ════════
 const renderer = new marked.Renderer();
 renderer.code = function(token) {
   const codeText = typeof token === 'string' ? token : token.text || '';
@@ -393,7 +417,6 @@ renderer.table = function(header, body) {
 renderer.html = function(html) { return html; };
 marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
-// دالة مساعدة: تحويل Markdown إلى HTML آمن باستخدام DOMPurify
 function safeMarked(text) {
   if (!text) return '';
   const rawHtml = marked.parse(text);
@@ -422,12 +445,11 @@ function copyCode(btn, encodedCode) {
   });
 }
-// إزالة مؤشر Gemini يدويًا (يُستدعى عند الإيقاف أو الخطأ)
 function removeGeminiCursor() {
   document.querySelectorAll('.gemini-cursor').forEach(el => el.remove());
 }
-// ════════ UTILS & FILES ════════
 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;'); }
@@ -463,7 +485,7 @@ function renderFileChips() {
 }
 function removeFile(idx) { pendingFiles.splice(idx, 1); renderFileChips(); }
-// ════════ THEME & UI ════════
 function applyTheme(t){
   document.documentElement.setAttribute('data-theme',t);
   localStorage.setItem('genisi_theme',t);
@@ -473,7 +495,47 @@ function applyTheme(t){
 function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
 function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
-function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('collapsed'); }
 function openSettings(){ document.getElementById('settings-modal').classList.add('open'); document.getElementById('lang-select').value=currentLang;}
 function closeSettings(){ document.getElementById('settings-modal').classList.remove('open'); }
@@ -518,7 +580,6 @@ function loadChat(id){
   chat.history.forEach((entry, idx)=>{
     appendBubble('user', entry.user, false, entry.uiFiles);
     appendBubble('bot', entry.bot, true);
-    // لا نضيف mem-badge لكل رسالة بل نضيف واحدة في النهاية فقط
   });
   if (chat.history.length) {
     appendMemBadge(chat.history.length, chat.history.length);
@@ -533,18 +594,17 @@ function deleteChat(id,e){
 }
 function clearAllChats(){ chats=[]; saveChats(); newChat(); closeSettings(); }
-// ════════ STOP GENERATION ════════
 function stopGeneration() {
     if (currentAbortController) {
         currentAbortController.abort();
     }
 }
-// ════════ MESSAGING & STREAMING ════════
 function quickSend(text){ document.getElementById('msg-input').value=text; sendMessage(); }
 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'; }
 async function sendMessage(){
   if(isGenerating) return;
   const input = document.getElementById('msg-input');
@@ -608,15 +668,12 @@ async function sendMessage(){
       const chunk = decoder.decode(value, {stream: true});
       fullBotResponse += chunk;
-      // تحويل الرد إلى HTML آمن
       let safeHtml = safeMarked(fullBotResponse);
       botContentDiv.innerHTML = safeHtml;
-      // إذا كان الطلب لصورة ولم تظهر بعد، أضف skeleton
       if (isImageRequest && !botContentDiv.querySelector('img')) {
         botContentDiv.innerHTML += '<div class="skeleton-img">🎨 جاري التخيل والتصميم...</div>';
       } else {
-        // إذا لم تكن صورة، نضيف مؤشر Gemini فقط
         botContentDiv.innerHTML += '<span class="gemini-cursor"></span>';
       }
@@ -624,7 +681,6 @@ async function sendMessage(){
       scrollToBottom();
     }
-    // عند الانتهاء: عرض المحتوى النهائي بدون مؤشر
     let finalHtml = safeMarked(fullBotResponse);
     botContentDiv.innerHTML = finalHtml;
     renderKaTeX(botContentDiv);
@@ -670,7 +726,6 @@ function appendBubble(role, text, isMarkdown, filesList =[]){
   const contentDiv = document.createElement('div');
   if(text) {
-      // استخدام safeMarked للمحتوى Markdown
       contentDiv.innerHTML = isMarkdown ? safeMarked(text) : esc(text).replace(/\n/g, '<br/>');
       if (isMarkdown) renderKaTeX(contentDiv);
   }
@@ -679,7 +734,6 @@ function appendBubble(role, text, isMarkdown, filesList =[]){
   row.appendChild(av); row.appendChild(bub);
   area.appendChild(row);
-  // إذا كانت ��لرسالة من البوت وتحتوي على صور، ننتظر تحميلها ثم نمرر
   if (role === 'bot') {
       const images = bub.querySelectorAll('img');
       if (images.length) {
@@ -705,12 +759,12 @@ function appendMemBadge(count, total){
   scrollToBottom();
 }
-// ════════ INIT ════════
 applyTheme(localStorage.getItem('genisi_theme')||'dark');
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
-// التأكد من أن DOMPurify متاح
 if (typeof DOMPurify === 'undefined') {
   console.warn("DOMPurify not loaded - XSS protection disabled");
 }

 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Genisi AI · Hidden Sidebar</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>
   <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.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;
       --border: #2a2f42; --border2: #333a52;
     .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;
       transition: transform 0.2s;
       border: 1px solid var(--border);
     }
+    .bubble img:active { transform: scale(1.02); }
     .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; } }
     .skeleton-img {
       width: 100%; max-width: 400px; height: 350px;
       margin: 15px auto; border-radius: 18px;
     .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 */
     .katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0;-webkit-overflow-scrolling:touch;}
     .katex{font-size:1.05em;}
     .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);}
       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; }
       .w-title { font-size: 1.8rem; }
       .chips { gap: 8px; }
       .chip { font-size: .82rem; padding: 8px 14px; }
+      /* 🆕 جعل السايدبار طبقة منزلقة على الهواتف */
+      .sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        height: 100vh;
+        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
+        transition: transform 0.3s ease, width 0.3s ease;
+      }
+      [dir="rtl"] .sidebar {
+        left: auto;
+        right: 0;
+      }
+      .sidebar.collapsed {
+        transform: translateX(-100%);
+        width: var(--sidebar-w) !important;
+        min-width: var(--sidebar-w) !important;
+      }
+      [dir="rtl"] .sidebar.collapsed {
+        transform: translateX(100%);
+      }
+      .sidebar:not(.collapsed) {
+        transform: translateX(0);
+      }
     }
   </style>
 </head>
 <body>
 <div class="app">
+  <!-- 🆕 الشريط الجانبي: نضيف كلاس collapsed افتراضيًا -->
+  <aside class="sidebar collapsed" id="sidebar">
     <div class="sidebar-header">
       <div class="s-logo">
         <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
   <main class="main">
     <div class="topbar">
+      <!-- زر القائمة (سيتم تحديث أيقونته ديناميكيًا) -->
+      <button class="btn-icon" id="menu-toggle-btn" onclick="toggleSidebar()">☰</button>
       <div class="topbar-title" id="topbar-title">Genisi AI</div>
     </div>
   </main>
 </div>
+<!-- SETTINGS MODAL (بدون تغيير) -->
 <div class="overlay" id="settings-modal">
   <div class="modal">
     <div class="m-header">
 </div>
 <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: "مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿", c1: "ما هو الذكاء الاصطناعي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "صمم صورة بالفضاء 🚀", errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]" },
 }
 function changeLanguage(val) { currentLang = val; localStorage.setItem('genisi_lang', val); applyI18n(); }
+// ════════ STATE & CONFIG (بدون تغيير) ════════
 const genId = () => Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
 let userId = localStorage.getItem('genisi_user_id');
 let pendingFiles =[];
 let currentAbortController = null;
+// ════════ MARKDOWN & PARSER (بدون تغيير) ════════
 const renderer = new marked.Renderer();
 renderer.code = function(token) {
   const codeText = typeof token === 'string' ? token : token.text || '';
 renderer.html = function(html) { return html; };
 marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
 function safeMarked(text) {
   if (!text) return '';
   const rawHtml = marked.parse(text);
   });
 }
 function removeGeminiCursor() {
   document.querySelectorAll('.gemini-cursor').forEach(el => el.remove());
 }
+// ════════ UTILS & FILES (بدون تغيير) ════════
 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;'); }
 }
 function removeFile(idx) { pendingFiles.splice(idx, 1); renderFileChips(); }
+// ════════ THEME & UI (تعديلات الشريط الجانبي) ════════
 function applyTheme(t){
   document.documentElement.setAttribute('data-theme',t);
   localStorage.setItem('genisi_theme',t);
 function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
 function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
+// 🆕 تحديث أيقونة زر القائمة
+function updateMenuIcon() {
+  const btn = document.getElementById('menu-toggle-btn');
+  const sidebar = document.getElementById('sidebar');
+  if (sidebar.classList.contains('collapsed')) {
+    btn.textContent = '☰';
+  } else {
+    btn.textContent = '✕';
+  }
+}
+// 🆕 دالة التبديل المعدلة
+function toggleSidebar() {
+  const sidebar = document.getElementById('sidebar');
+  sidebar.classList.toggle('collapsed');
+  updateMenuIcon();
+}
+// 🆕 ضبط الحالة الافتراضية بناءً على حجم الشاشة
+function initSidebarState() {
+  const sidebar = document.getElementById('sidebar');
+  // على الهواتف نضمن أنه مخفي (collapsed)، على الكبيرة نجعله ظاهرًا
+  if (window.innerWidth <= 640) {
+    sidebar.classList.add('collapsed');
+  } else {
+    sidebar.classList.remove('collapsed');
+  }
+  updateMenuIcon();
+}
+// استدعاء عند تغيير حجم النافذة (لضبط الشاشات الكبيرة تلقائيًا)
+window.addEventListener('resize', () => {
+  const sidebar = document.getElementById('sidebar');
+  if (window.innerWidth > 640) {
+    sidebar.classList.remove('collapsed');
+  } else {
+    sidebar.classList.add('collapsed');
+  }
+  updateMenuIcon();
+});
 function openSettings(){ document.getElementById('settings-modal').classList.add('open'); document.getElementById('lang-select').value=currentLang;}
 function closeSettings(){ document.getElementById('settings-modal').classList.remove('open'); }
   chat.history.forEach((entry, idx)=>{
     appendBubble('user', entry.user, false, entry.uiFiles);
     appendBubble('bot', entry.bot, true);
   });
   if (chat.history.length) {
     appendMemBadge(chat.history.length, chat.history.length);
 }
 function clearAllChats(){ chats=[]; saveChats(); newChat(); closeSettings(); }
 function stopGeneration() {
     if (currentAbortController) {
         currentAbortController.abort();
     }
 }
 function quickSend(text){ document.getElementById('msg-input').value=text; sendMessage(); }
 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 (بدون تغيير) ════════
 async function sendMessage(){
   if(isGenerating) return;
   const input = document.getElementById('msg-input');
       const chunk = decoder.decode(value, {stream: true});
       fullBotResponse += chunk;
       let safeHtml = safeMarked(fullBotResponse);
       botContentDiv.innerHTML = safeHtml;
       if (isImageRequest && !botContentDiv.querySelector('img')) {
         botContentDiv.innerHTML += '<div class="skeleton-img">🎨 جاري التخيل والتصميم...</div>';
       } else {
         botContentDiv.innerHTML += '<span class="gemini-cursor"></span>';
       }
       scrollToBottom();
     }
     let finalHtml = safeMarked(fullBotResponse);
     botContentDiv.innerHTML = finalHtml;
     renderKaTeX(botContentDiv);
   const contentDiv = document.createElement('div');
   if(text) {
       contentDiv.innerHTML = isMarkdown ? safeMarked(text) : esc(text).replace(/\n/g, '<br/>');
       if (isMarkdown) renderKaTeX(contentDiv);
   }
   row.appendChild(av); row.appendChild(bub);
   area.appendChild(row);
   if (role === 'bot') {
       const images = bub.querySelectorAll('img');
       if (images.length) {
   scrollToBottom();
 }
+// ════════ INIT (مع استدعاء ضبط الشريط) ════════
 applyTheme(localStorage.getItem('genisi_theme')||'dark');
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
+initSidebarState(); // 🆕 تهيئة حالة الشريط الجانبي
 if (typeof DOMPurify === 'undefined') {
   console.warn("DOMPurify not loaded - XSS protection disabled");
 }