Hugging Face's logo

Spaces:
AnesKAM
/
Genisi
Running

App Files Community
Genisi / frontend /index.html
AnesKAM's picture
AnesKAM
Update frontend/index.html
90451b3 verified
raw
history blame contribute delete
32.7 kB
<!DOCTYPE html>
<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>
 <style>
 :root {
 --bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
 --border: #2a2f42; --border2: #333a52;
 --accent: #4f8ef7; --accent2: #7c5cf7; --accent-soft: rgba(79,142,247,0.12);
 --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);
 }
 [data-theme="light"] {
 --bg: #f0f2f8; --surface: #fff; --surface2: #f5f6fa; --surface3: #ebedf5;
 --border: #d8dce8; --border2: #c5cad8;
 --text: #1a1d2e; --text2: #4a5070; --text3: #8a90a8;
 --user-bubble: #dde6ff; --bot-bubble: #fff; --accent-soft: rgba(79,142,247,0.1);
 }
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 html,body{height:100%;font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text); scroll-behavior: smooth;}
 ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
 ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--radius-pill)}
 .app{display:flex;height:100vh;overflow:hidden}
 /* SIDEBAR */
 .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
 border-right:1px solid var(--border);display:flex;flex-direction:column;
 transition:width var(--tr),min-width var(--tr);overflow:hidden;
 border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);}
 [dir="rtl"] .sidebar { border-right:none; border-left:1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
 .sidebar.collapsed{width:0;min-width:0;border:none}
 .sidebar-header{padding:24px 20px 16px;display:flex;align-items:center;gap:12px;}
 .s-logo{display:flex;align-items:center;gap:12px;flex:1}
 .s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
 .s-logo-name{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .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: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}
 .chat-item{padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;color:var(--text2);
 display:flex;align-items:center;gap:10px;transition:all var(--tr);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .chat-item:hover{background:var(--surface2);color:var(--text); transform: translateX(4px);}
 [dir="rtl"] .chat-item:hover {transform: translateX(-4px);}
 .chat-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600;}
 .chat-item .ct{flex:1;overflow:hidden;text-overflow:ellipsis}
 .del-btn{opacity:0;background:none;border:none;color:var(--danger);cursor:pointer;font-size:.9rem;
 padding:4px;border-radius:50%;transition:all var(--tr); display:flex; align-items:center; justify-content:center;}
 .chat-item:hover .del-btn{opacity:1}
 .del-btn:hover{background:rgba(247,95,95,.15); transform:scale(1.1);}
 .s-footer{padding:16px;display:flex;align-items:center;gap:12px; justify-content: center;}
 .btn-icon{width:42px;height:42px;background:var(--surface2);border:none;
 border-radius:var(--radius-pill);color:var(--text2);cursor:pointer;display:flex;
 align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--tr)}
 .btn-icon:hover{background:var(--surface3);color:var(--text); transform:rotate(10deg);}
 /* MAIN */
 .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; background: var(--bg);}
 .topbar{height:70px;padding:0 24px;display:flex;align-items:center;gap:16px; flex-shrink:0}
 .topbar-title{flex:1;font-size:1.05rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* CHAT AREA */
 .chat-area{flex:1;overflow-y:auto;padding:20px 0 40px;display:flex;flex-direction:column; scroll-behavior: smooth;}
 .welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:20px;padding:40px 24px;text-align:center; animation: fadeSlideUp 0.6s ease;}
 .w-logo{width:85px;height:85px;border-radius:24px;object-fit:cover;box-shadow:0 12px 40px var(--accent-soft)}
 .w-title{font-size:2.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
 -webkit-background-clip:text;-webkit-text-fill-color:transparent}
 .w-sub{color:var(--text2);font-size:1.05rem}
 .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;max-width:600px}
 .chip{padding:10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
 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 */
 .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); } }
 .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;
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
 .msg-row.bot .msg-av{background:linear-gradient(135deg,var(--accent),var(--accent2))}
 .msg-row.bot .msg-av img{width:100%;height:100%;object-fit:cover}
 .msg-row.user .msg-av{background:var(--surface3);color:var(--text)}
.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.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-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;}
 .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;}
 /* 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);}
 /* 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 */
 .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 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)}
.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:disabled{opacity:.4;cursor:not-allowed;transform:none;}
 /* 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);
 opacity:0;pointer-events:none;transition:opacity var(--tr)}
 .overlay.open{opacity:1;pointer-events:all}
 .modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;
 width:min(440px,90vw);box-shadow:0 30px 80px rgba(0,0,0,.5);
 transform:translateY(20px) scale(0.95);transition:all var(--tr)}
 .overlay.open .modal{transform:translateY(0) scale(1)}
 .m-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
 .m-title{font-size:1.3rem;font-weight:700;flex:1}
 .m-close{background:var(--surface2);border:none;color:var(--text);cursor:pointer;width:36px;height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background var(--tr);}
 .m-close:hover{background:var(--danger); color:#fff;}
 .s-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
 .s-lbl{font-size:.95rem;font-weight:600;color:var(--text)}
 .s-desc{font-size:.8rem;color:var(--text3);margin-top:4px}
 .toggle{position:relative;width:48px;height:26px}
 .toggle input{opacity:0;width:0;height:0}
 .tslider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--tr)}
 .tslider::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
 background:#fff;top:3px;left:4px;transition:all var(--tr); box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
 .toggle input:checked+.tslider{background:var(--accent)}
 .toggle input:checked+.tslider::before{transform:translateX(20px)}
select.s-input { width:auto; padding:8px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text); cursor:pointer; font-family:'Cairo',sans-serif; font-weight:600;}
 .btn-save{width:100%;margin-top:24px;padding:14px;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:1rem;font-weight:700; transition:opacity var(--tr);}
 .btn-save:hover{opacity:.9}
 .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;}
 </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"/>
 <span class="s-logo-name">Genisi AI</span>
 </div>
 </div>
 <button class="btn-new" onclick="newChat()" id="i18n-new-chat">✦ New Chat</button>
 <div class="s-label" id="i18n-chats-label">CHATS</div>
 <div class="chats-list" id="chats-list"></div>
 <div class="s-footer">
 <button class="btn-icon" onclick="openSettings()">⚙</button>
 <button class="btn-icon" id="theme-btn" onclick="toggleTheme()">🌙</button>
 </div>
 </aside>
<main class="main">
 <div class="topbar">
 <button class="btn-icon" onclick="toggleSidebar()">☰</button>
 <div class="topbar-title" id="topbar-title">Genisi AI</div>
 </div>
<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>
 </div>
 </div>
 </main>
</div>
<!-- SETTINGS MODAL -->
<div class="overlay" id="settings-modal">
 <div class="modal">
 <div class="m-header">
 <div class="m-title" id="i18n-settings-title">Settings</div>
 <button class="m-close" onclick="closeSettings()">✕</button>
 </div>
 <div class="s-row">
 <div class="s-lbl" id="i18n-lang-lbl">Language</div>
 <select id="lang-select" class="s-input" onchange="changeLanguage(this.value)">
 <option value="en">English</option>
 <option value="ar">العربية</option>
 <option value="fr">Français</option>
 <option value="es">Español</option>
 </select>
 </div>
 <div class="s-row">
 <div class="s-lbl" id="i18n-dark-lbl">Dark Mode</div>
 <label class="toggle">
 <input type="checkbox" id="dark-toggle" onchange="applyThemeToggle()"/>
 <span class="tslider"></span>
 </label>
 </div>
 <div class="s-row">
 <div>
 <div class="s-lbl" id="i18n-del-lbl">Delete All Chats</div>
 <div class="s-desc" id="i18n-del-desc">This action cannot be undone</div>
 </div>
 <button class="btn-danger" onclick="clearAllChats()" id="i18n-del-btn">🗑 Delete</button>
 </div>
 <button class="btn-save" onclick="closeSettings()" id="i18n-save-btn">💾 Save</button>
 </div>
</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: "LLM differences", errConnect: "Connection Error", memBadge: "Memory: {c}/{t} messages" },
 ar: { newChat: "✦ محادثة جديدة", chatsLabel: "المحادثات", settings: "الإعدادات", lang: "اللغة", dark: "الوضع الليلي", del: "حذف جميع المحادثات", delDesc: "لا يمكن التراجع عن هذا الإجراء", delBtn: "🗑 حذف", saveBtn: "💾 إغلاق", placeholder: "اكتب رسالتك... (Enter للإرسال)", welcomeTitle: "مرحبًا في Genisi", welcomeSub: "مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿", c1: "ما هو الذكاء الاصطناعي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "الفرق بين النماذج", errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل" },
 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: "Différences LLM", errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs" },
 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: "Diferencias LLM", errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs" }
};
let currentLang = localStorage.getItem('genisi_lang') || 'en';
function applyI18n() {
 const t = i18n[currentLang];
 document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
 document.documentElement.lang = currentLang;
document.getElementById('i18n-new-chat').textContent = t.newChat;
 document.getElementById('i18n-chats-label').textContent = t.chatsLabel;
 document.getElementById('i18n-settings-title').textContent = t.settings;
 document.getElementById('i18n-lang-lbl').textContent = t.lang;
 document.getElementById('i18n-dark-lbl').textContent = t.dark;
 document.getElementById('i18n-del-lbl').textContent = t.del;
 document.getElementById('i18n-del-desc').textContent = t.delDesc;
 document.getElementById('i18n-del-btn').textContent = t.delBtn;
 document.getElementById('i18n-save-btn').textContent = t.saveBtn;
 document.getElementById('msg-input').placeholder = t.placeholder;
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 (FIXED) ════════
const renderer = new marked.Renderer();
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>${lang}</span>
 <button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(codeText)}')">📋 Copy</button>
 </div>
 <pre><code class="language-${lang}">${escapedCode}</code></pre>
 </div>`;
};
marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
function copyCode(btn, encodedCode) {
 navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
 const originalText = btn.innerHTML;
 btn.innerHTML = "✅ Copied!";
 setTimeout(() => btn.innerHTML = originalText, 2000);
 });
}
// ════════ 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;'); }
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);
 localStorage.setItem('genisi_theme',t);
 document.getElementById('theme-btn').textContent = t==='dark'?'🌙':'☀️';
 document.getElementById('dark-toggle').checked = t==='dark';
}
function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
// ════════ SIDEBAR & UI ════════
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'); }
function renderChatList(){
 const list=document.getElementById('chats-list');
 list.innerHTML='';
 [...chats].reverse().forEach(chat=>{
 const div=document.createElement('div');
 div.className='chat-item'+(chat.id===activeChatId?' active':'');
 div.innerHTML=`<span>💬</span><span class="ct">${esc(chat.title||'Chat')}</span>
 <button class="del-btn" onclick="deleteChat('${chat.id}',event)">✕</button>`;
 div.onclick = () => loadChat(chat.id);
 list.appendChild(div);
 });
}
function renderWelcome(){
 const t = i18n[currentLang];
 document.getElementById('topbar-title').textContent='Genisi AI';
 document.getElementById('chat-area').innerHTML=`
 <div class="welcome" id="welcome">
 <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="w-logo" alt="Genisi"/>
 <div class="w-title">${t.welcomeTitle}</div>
 <div class="w-sub">${t.welcomeSub}</div>
 <div class="chips">
 <div class="chip" onclick="quickSend('${t.c1}')">${t.c1}</div>
 <div class="chip" onclick="quickSend('${t.c2}')">${t.c2}</div>
 <div class="chip" onclick="quickSend('${t.c3}')">${t.c3}</div>
 <div class="chip" onclick="quickSend('${t.c4}')">${t.c4}</div>
 </div>
 </div>`;
}
function newChat(){ activeChatId=null; pendingFiles=[]; renderFileChips(); document.getElementById('msg-input').value=''; renderWelcome(); renderChatList(); }
function loadChat(id){
 activeChatId=id;
 const chat=getChat(id); if(!chat) return;
 document.getElementById('topbar-title').textContent=chat.title;
 const area=document.getElementById('chat-area');
 area.innerHTML='';
 chat.history.forEach((entry, idx)=>{
 appendBubble('user', entry.user, false, entry.uiFiles);
 appendBubble('bot', entry.bot, true);
 appendMemBadge(idx+1, chat.history.length);
 });
 scrollToBottom();
 renderChatList();
}
function deleteChat(id,e){
 e.stopPropagation(); chats=chats.filter(c=>c.id!==id); saveChats();
 if(activeChatId===id) newChat(); else renderChatList();
}
function clearAllChats(){ chats=[]; saveChats(); newChat(); closeSettings(); }
// ════════ 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');
 let text = input.value.trim();
if(!text && pendingFiles.length === 0) return;
 const welcome=document.getElementById('welcome');
 if(welcome) welcome.remove();
 input.value=''; input.style.height='auto';
 if(!activeChatId){
 activeChatId=genId();
 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();
// تجهيز الملفات للإرسال
 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, files: binaryFiles })
 });
 if(!response.ok) throw new Error("Server Error");
 const reader = response.body.getReader();
 const decoder = new TextDecoder("utf-8");
 let fullBotResponse = "";
 while(true) {
 const { value, done } = await reader.read();
 if(done) break;
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);
// حفظ المحادثة
 chat.history.push({ user: text, bot: fullBotResponse, uiFiles: uiFiles });
 saveChats();
 appendMemBadge(chat.history.length, chat.history.length);
 } catch(err){
 botContentDiv.innerHTML = `<span style="color:var(--danger)">⚠️ ${i18n[currentLang].errConnect}: ${err.message}</span>`;
 }
 isGenerating=false;
 document.getElementById('send-btn').disabled=false;
 renderChatList();
}
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';
if(role==='bot'){
 av.innerHTML=`<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/>`;
 } else { av.textContent='👤'; }
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).replace(/\n/g, '<br/>');
 bub.appendChild(contentDiv);
row.appendChild(av); row.appendChild(bub);
 area.appendChild(row);
scrollToBottom();
return contentDiv;
}
function appendMemBadge(count, total){
 const area=document.getElementById('chat-area');
 const b=document.createElement('div'); b.className='mem-badge';
 b.innerHTML=`🧠 ${i18n[currentLang].memBadge.replace('{c}', count).replace('{t}', total)}`;
 area.appendChild(b); scrollToBottom();
}
// ════════ INIT ════════
applyTheme(localStorage.getItem('genisi_theme')||'dark');
document.getElementById('lang-select').value = currentLang;
applyI18n();
</script>
</body>
</html>