Spaces:
Running
Running
| <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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); | |
| 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,'&').replace(/</g,'<').replace(/>/g,'>'); } | |
| 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> |