Update index.html
Browse files- index.html +474 -594
index.html
CHANGED
|
@@ -1,261 +1,251 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en" dir="ltr">
|
| 3 |
<head>
|
| 4 |
-
<meta charset="UTF-8"/>
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
| 6 |
<title>Genisi AI</title>
|
| 7 |
<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"/>
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
|
|
|
| 9 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
|
| 10 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
| 11 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
| 12 |
<style>
|
| 13 |
:root {
|
| 14 |
-
--bg:#0d0f14;--surface:#161920;--surface2:#1e2230;--surface3:#252a3a;
|
| 15 |
-
--border:#2a2f42;--border2:#333a52;
|
| 16 |
-
--accent:#4f8ef7;--accent2:#7c5cf7;--accent-soft:rgba(79,142,247,0.12);
|
| 17 |
-
--text:#e8eaf2;--text2:#9aa3be;--text3:#5c6480;
|
| 18 |
-
--user-bubble:#1a2340;--bot-bubble:#161920;
|
| 19 |
-
--danger:#f75f5f;
|
| 20 |
-
--radius:28px;--radius-sm:18px;--radius-pill:50px;
|
| 21 |
-
--sidebar-w:280px;--tr:0.3s cubic-bezier(.4,0,.2,1);
|
| 22 |
}
|
| 23 |
[data-theme="light"] {
|
| 24 |
-
--bg:#f0f2f8;--surface:#fff;--surface2:#f5f6fa;--surface3:#ebedf5;
|
| 25 |
-
--border:#d8dce8;--border2:#c5cad8;
|
| 26 |
-
--text:#1a1d2e;--text2:#4a5070;--text3:#8a90a8;
|
| 27 |
-
--user-bubble:#dde6ff;--bot-bubble:#fff;--accent-soft:rgba(79,142,247,0.1);
|
| 28 |
}
|
| 29 |
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
| 30 |
-
html,body{height:100%;font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}
|
| 31 |
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
|
| 32 |
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--radius-pill)}
|
|
|
|
| 33 |
.app{display:flex;height:100vh;overflow:hidden}
|
| 34 |
|
| 35 |
-
/*
|
| 36 |
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
|
| 37 |
border-right:1px solid var(--border);display:flex;flex-direction:column;
|
| 38 |
transition:width var(--tr),min-width var(--tr);overflow:hidden;
|
| 39 |
-
border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
|
| 40 |
-
[dir="rtl"] .sidebar{border-right:none;border-left:1px solid var(--border)}
|
| 41 |
.sidebar.collapsed{width:0;min-width:0;border:none}
|
| 42 |
-
.sidebar-header{padding:24px 20px 16px;display:flex;align-items:center;gap:12px}
|
| 43 |
.s-logo{display:flex;align-items:center;gap:12px;flex:1}
|
| 44 |
-
.s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover;box-shadow:0 4px 12px var(--accent-soft)}
|
| 45 |
.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}
|
| 46 |
.btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 47 |
color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
|
| 48 |
-
font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px;justify-content:center;
|
| 49 |
-
transition:all var(--tr);box-shadow:0 4px 15px var(--accent-soft)}
|
| 50 |
.btn-new:hover{opacity:.9;transform:translateY(-2px)}
|
| 51 |
.s-label{padding:10px 20px;font-size:.75rem;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase}
|
| 52 |
-
|
| 53 |
-
/* Search box inside sidebar */
|
| 54 |
-
.s-search{margin:0 16px 8px;position:relative}
|
| 55 |
-
.s-search input{width:100%;padding:8px 12px 8px 34px;background:var(--surface2);border:1px solid var(--border);
|
| 56 |
-
border-radius:var(--radius-pill);color:var(--text);font-family:'Cairo',sans-serif;font-size:.85rem;outline:none;transition:border var(--tr)}
|
| 57 |
-
.s-search input:focus{border-color:var(--accent)}
|
| 58 |
-
.s-search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.85rem;pointer-events:none}
|
| 59 |
-
[dir="rtl"] .s-search input{padding:8px 34px 8px 12px}
|
| 60 |
-
[dir="rtl"] .s-search .search-icon{left:auto;right:12px}
|
| 61 |
-
|
| 62 |
.chats-list{flex:1;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
|
| 63 |
.chat-item{padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;color:var(--text2);
|
| 64 |
-
display:flex;align-items:center;gap:10px;transition:all var(--tr);
|
| 65 |
-
|
| 66 |
-
[dir="rtl"] .chat-item:hover{transform:translateX(-4px)}
|
| 67 |
-
.chat-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
|
| 68 |
.chat-item .ct{flex:1;overflow:hidden;text-overflow:ellipsis}
|
| 69 |
.del-btn{opacity:0;background:none;border:none;color:var(--danger);cursor:pointer;font-size:.9rem;
|
| 70 |
-
padding:4px;border-radius:50%;transition:all var(--tr);display:flex;align-items:center;justify-content:center}
|
| 71 |
.chat-item:hover .del-btn{opacity:1}
|
| 72 |
-
.del-btn:hover{background:rgba(247,95,95,.15);transform:scale(1.1)}
|
| 73 |
-
.s-footer{padding:16px;display:flex;align-items:center;gap:12px;justify-content:center;
|
| 74 |
-
.btn-icon{width:42px;height:42px;background:var(--surface2);border:none;
|
| 75 |
-
color:var(--text2);cursor:pointer;display:flex;
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
.
|
| 81 |
-
|
| 82 |
.topbar-title{flex:1;font-size:1.05rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
| 83 |
-
.topbar-actions{display:flex;gap:8px}
|
| 84 |
|
| 85 |
-
/*
|
| 86 |
-
.chat-area{flex:1;overflow-y:auto;padding:20px 0 40px;display:flex;flex-direction:column;scroll-behavior:smooth}
|
| 87 |
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 88 |
-
gap:20px;padding:40px 24px;text-align:center;animation:fadeSlideUp .6s ease}
|
| 89 |
.w-logo{width:85px;height:85px;border-radius:24px;object-fit:cover;box-shadow:0 12px 40px var(--accent-soft)}
|
| 90 |
.w-title{font-size:2.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 91 |
-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
| 92 |
.w-sub{color:var(--text2);font-size:1.05rem}
|
| 93 |
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;max-width:600px}
|
| 94 |
.chip{padding:10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
|
| 95 |
-
font-size:.9rem;color:var(--text);cursor:pointer;transition:all var(--tr);box-shadow:0 4px 12px rgba(0,0,0,.05)}
|
| 96 |
-
.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
|
| 97 |
|
| 98 |
-
/*
|
| 99 |
-
.msg-row{display:flex;padding:8px 30px;gap:16px;animation:popIn .4s cubic-bezier(.16,1,.3,1) forwards}
|
| 100 |
-
@keyframes popIn{from{opacity:0;transform:translateY(15px) scale(.98);filter:blur(4px)}to{opacity:1;transform:
|
| 101 |
-
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:
|
| 102 |
.msg-row.user{flex-direction:row-reverse}
|
| 103 |
.msg-av{width:38px;height:38px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;
|
| 104 |
-
justify-content:center;font-size:1.1rem;font-weight:700;margin-top:2px;overflow:hidden;
|
|
|
|
| 105 |
.msg-row.bot .msg-av{background:linear-gradient(135deg,var(--accent),var(--accent2))}
|
| 106 |
.msg-row.bot .msg-av img{width:100%;height:100%;object-fit:cover}
|
| 107 |
.msg-row.user .msg-av{background:var(--surface3);color:var(--text)}
|
| 108 |
-
|
| 109 |
-
.
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
.msg-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 137 |
.bubble p{margin-bottom:12px}.bubble p:last-child{margin-bottom:0}
|
| 138 |
.bubble ul,.bubble ol{padding-inline-start:24px;margin:12px 0}
|
| 139 |
-
.bubble li{margin-bottom:6px}
|
| 140 |
-
.bubble
|
| 141 |
-
.bubble
|
| 142 |
-
.bubble .
|
| 143 |
-
.bubble
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
.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%}
|
| 147 |
-
.code-header{display:flex;justify-content:space-between;align-items:center;background:#12141a;padding:8px 16px;font-size:.8rem;color:var(--text2);font-family:'JetBrains Mono',monospace}
|
| 148 |
-
.copy-btn{background:var(--surface2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.8rem;padding:4px 10px;border-radius:var(--radius-pill);transition:all .2s}
|
| 149 |
-
.copy-btn:hover{background:var(--accent);color:#fff}
|
| 150 |
-
.code-container pre{margin:0;padding:16px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.85rem;max-width:100%}
|
| 151 |
-
.code-container pre code{white-space:pre;display:block}
|
| 152 |
-
.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)}
|
| 153 |
-
|
|
|
|
|
|
|
|
|
|
| 154 |
|
| 155 |
/* Files */
|
| 156 |
-
.file-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);
|
| 157 |
-
|
| 158 |
-
.file-chip button{
|
| 159 |
-
.file-
|
| 160 |
-
|
| 161 |
-
.mem-badge{font-size:.75rem;color:var(--text3);padding:4px 30px 10px;display:flex;align-items:center;gap:6px;font-weight:600}
|
| 162 |
-
|
| 163 |
-
/*
|
| 164 |
-
.
|
| 165 |
-
.
|
| 166 |
-
.
|
| 167 |
-
.
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
.
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
.toast.error{border-left:3px solid var(--danger)}
|
| 178 |
-
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
|
| 179 |
-
@keyframes toastOut{to{opacity:0;transform:translateY(20px)}}
|
| 180 |
-
|
| 181 |
-
/* Scroll to bottom button */
|
| 182 |
-
.scroll-btn{position:fixed;bottom:120px;right:50%;transform:translateX(50%);z-index:100;
|
| 183 |
-
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
|
| 184 |
-
padding:8px 16px;font-size:.85rem;color:var(--text2);cursor:pointer;transition:all var(--tr);
|
| 185 |
-
box-shadow:0 4px 15px rgba(0,0,0,.15);display:none}
|
| 186 |
-
.scroll-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
|
| 187 |
-
.scroll-btn.visible{display:flex;align-items:center;gap:6px}
|
| 188 |
-
|
| 189 |
-
/* ══ INPUT ══ */
|
| 190 |
-
.input-area{padding:0 24px 30px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
|
| 191 |
-
.input-wrapper{width:100%;max-width:850px;position:relative}
|
| 192 |
-
.file-chips-container{width:100%;max-width:850px;display:flex;flex-wrap:wrap;margin-bottom:8px}
|
| 193 |
-
.input-box{display:flex;align-items:flex-end;gap:12px;background:var(--surface);border:1px solid var(--border);
|
| 194 |
-
border-radius:32px;padding:12px 16px;transition:all var(--tr);box-shadow:0 8px 30px rgba(0,0,0,.15)}
|
| 195 |
-
.input-box:focus-within{border-color:var(--accent);box-shadow:0 8px 30px var(--accent-soft),0 0 0 3px var(--accent-soft)}
|
| 196 |
-
.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}
|
| 197 |
-
.btn-attach:hover{color:var(--accent);background:var(--surface2)}
|
| 198 |
-
.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}
|
| 199 |
.input-box textarea::placeholder{color:var(--text3)}
|
| 200 |
-
|
| 201 |
-
.
|
| 202 |
-
.
|
| 203 |
-
.btn-send
|
| 204 |
-
.btn-send{
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
.btn-
|
| 208 |
-
.btn-stop{background:var(--
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
|
| 214 |
.overlay.open{opacity:1;pointer-events:all}
|
| 215 |
-
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;
|
| 216 |
-
|
|
|
|
|
|
|
| 217 |
.m-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
|
| 218 |
.m-title{font-size:1.3rem;font-weight:700;flex:1}
|
| 219 |
-
.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)}
|
| 220 |
-
.m-close:hover{background:var(--danger);color:#fff}
|
| 221 |
.s-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
|
| 222 |
.s-lbl{font-size:.95rem;font-weight:600;color:var(--text)}
|
| 223 |
.s-desc{font-size:.8rem;color:var(--text3);margin-top:4px}
|
| 224 |
.toggle{position:relative;width:48px;height:26px}
|
| 225 |
.toggle input{opacity:0;width:0;height:0}
|
| 226 |
.tslider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--tr)}
|
| 227 |
-
.tslider::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
|
|
|
|
| 228 |
.toggle input:checked+.tslider{background:var(--accent)}
|
| 229 |
.toggle input:checked+.tslider::before{transform:translateX(20px)}
|
| 230 |
-
|
| 231 |
-
.
|
|
|
|
|
|
|
| 232 |
.btn-save:hover{opacity:.9}
|
| 233 |
-
.btn-danger{padding:8px 18px;background:rgba(247,95,95,.12);border:1px solid var(--danger);
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
.
|
| 244 |
-
.
|
| 245 |
-
.
|
| 246 |
-
.
|
| 247 |
-
.
|
| 248 |
-
.
|
| 249 |
-
.bubble th,.bubble td{font-size:.85rem;padding:8px 10px}
|
| 250 |
-
.w-title{font-size:1.8rem}
|
| 251 |
-
.chips{gap:8px}
|
| 252 |
-
.chip{font-size:.82rem;padding:8px 14px}
|
| 253 |
-
.msg-actions{opacity:1}
|
| 254 |
}
|
| 255 |
</style>
|
| 256 |
</head>
|
| 257 |
<body>
|
| 258 |
<div class="app">
|
|
|
|
| 259 |
<aside class="sidebar" id="sidebar">
|
| 260 |
<div class="sidebar-header">
|
| 261 |
<div class="s-logo">
|
|
@@ -264,16 +254,11 @@
|
|
| 264 |
</div>
|
| 265 |
</div>
|
| 266 |
<button class="btn-new" onclick="newChat()" id="i18n-new-chat">✦ New Chat</button>
|
| 267 |
-
<div class="s-search">
|
| 268 |
-
<span class="search-icon">🔍</span>
|
| 269 |
-
<input type="text" id="search-input" oninput="filterChats(this.value)" placeholder="Search chats..."/>
|
| 270 |
-
</div>
|
| 271 |
<div class="s-label" id="i18n-chats-label">CHATS</div>
|
| 272 |
<div class="chats-list" id="chats-list"></div>
|
| 273 |
<div class="s-footer">
|
| 274 |
-
<button class="btn-icon" onclick="openSettings()"
|
| 275 |
-
<button class="btn-icon" id="theme-btn" onclick="toggleTheme()"
|
| 276 |
-
<button class="btn-icon" onclick="exportChat()" title="Export chat" id="export-btn">📤</button>
|
| 277 |
</div>
|
| 278 |
</aside>
|
| 279 |
|
|
@@ -281,37 +266,27 @@
|
|
| 281 |
<div class="topbar">
|
| 282 |
<button class="btn-icon" onclick="toggleSidebar()">☰</button>
|
| 283 |
<div class="topbar-title" id="topbar-title">Genisi AI</div>
|
| 284 |
-
<div class="topbar-actions">
|
| 285 |
-
<button class="btn-icon" onclick="clearCurrentChat()" title="Clear chat" id="clear-btn" style="display:none">🗑</button>
|
| 286 |
-
</div>
|
| 287 |
</div>
|
| 288 |
|
| 289 |
-
<div class="chat-area" id="chat-area"
|
| 290 |
-
|
| 291 |
-
<button class="scroll-btn" id="scroll-btn" onclick="scrollToBottom()">↓ New messages</button>
|
| 292 |
|
| 293 |
<div class="input-area">
|
| 294 |
<div class="file-chips-container" id="file-chips"></div>
|
| 295 |
<div class="input-wrapper">
|
| 296 |
<div class="input-box">
|
| 297 |
-
<input type="file" id="file-input" multiple hidden onchange="handleFiles(this.files)"/>
|
| 298 |
-
<button class="btn-attach" onclick="document.getElementById('file-input').click()"
|
| 299 |
-
<textarea id="msg-input" rows="1" onkeydown="handleKey(event)" oninput="
|
| 300 |
-
<span class="char-count" id="char-count" style="display:none"></span>
|
| 301 |
<button class="btn-send" id="send-btn" onclick="sendMessage()">➤</button>
|
| 302 |
-
<button class="btn-stop" id="stop-btn" onclick="stopGeneration()" style="display:none">⏹</button>
|
| 303 |
</div>
|
| 304 |
</div>
|
| 305 |
-
<div class="input-hint" id="input-hint">Enter to send · Shift+Enter for new line</div>
|
| 306 |
</div>
|
| 307 |
</main>
|
| 308 |
</div>
|
| 309 |
|
| 310 |
-
<!-- Toast container -->
|
| 311 |
-
<div class="toast-container" id="toast-container"></div>
|
| 312 |
-
|
| 313 |
<!-- SETTINGS MODAL -->
|
| 314 |
-
<div class="overlay" id="settings-modal"
|
| 315 |
<div class="modal">
|
| 316 |
<div class="m-header">
|
| 317 |
<div class="m-title" id="i18n-settings-title">Settings</div>
|
|
@@ -333,17 +308,6 @@
|
|
| 333 |
<span class="tslider"></span>
|
| 334 |
</label>
|
| 335 |
</div>
|
| 336 |
-
<div class="s-row">
|
| 337 |
-
<div>
|
| 338 |
-
<div class="s-lbl">Keyboard Shortcuts</div>
|
| 339 |
-
<div class="shortcuts-grid" style="margin-top:8px">
|
| 340 |
-
<div class="shortcut-item"><span>Send</span><kbd>Enter</kbd></div>
|
| 341 |
-
<div class="shortcut-item"><span>New line</span><kbd>Shift+Enter</kbd></div>
|
| 342 |
-
<div class="shortcut-item"><span>New chat</span><kbd>Ctrl+K</kbd></div>
|
| 343 |
-
<div class="shortcut-item"><span>Toggle sidebar</span><kbd>Ctrl+B</kbd></div>
|
| 344 |
-
</div>
|
| 345 |
-
</div>
|
| 346 |
-
</div>
|
| 347 |
<div class="s-row">
|
| 348 |
<div>
|
| 349 |
<div class="s-lbl" id="i18n-del-lbl">Delete All Chats</div>
|
|
@@ -356,484 +320,400 @@
|
|
| 356 |
</div>
|
| 357 |
|
| 358 |
<script>
|
| 359 |
-
/
|
| 360 |
-
const i18n={
|
| 361 |
-
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 🚀",errConnect:"Connection Error",memBadge:"Memory: {c}/{t} messages",stopMsg:"[Generation stopped by user]"
|
| 362 |
-
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:"[تم إيقاف التوليد]"
|
| 363 |
-
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 par AnesNT — Batna 🇩🇿",c1:"Qu'est-ce que l'IA?",c2:"Code Python",c3:"Résumer un sujet",c4:"Créer une image 🚀",errConnect:"Erreur de connexion",memBadge:"Mémoire: {c}/{t} msgs",stopMsg:"[Génération arrêtée]"
|
| 364 |
-
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:"Diseñar imagen 🚀",errConnect:"Error de conexión",memBadge:"Memoria: {c}/{t} msgs",stopMsg:"[Generación detenida]"
|
| 365 |
};
|
| 366 |
|
| 367 |
-
let currentLang=localStorage.getItem('genisi_lang')||'en';
|
| 368 |
-
|
| 369 |
-
function
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
document.documentElement.
|
| 373 |
-
|
| 374 |
-
document.getElementById('i18n-new-chat').textContent=t
|
| 375 |
-
document.getElementById('i18n-chats-label').textContent=t
|
| 376 |
-
document.getElementById('i18n-settings-title').textContent=t
|
| 377 |
-
document.getElementById('i18n-lang-lbl').textContent=t
|
| 378 |
-
document.getElementById('i18n-dark-lbl').textContent=t
|
| 379 |
-
document.getElementById('i18n-del-lbl').textContent=t
|
| 380 |
-
document.getElementById('i18n-del-desc').textContent=t
|
| 381 |
-
document.getElementById('i18n-del-btn').textContent=t
|
| 382 |
-
document.getElementById('i18n-save-btn').textContent=t
|
| 383 |
-
document.getElementById('msg-input').placeholder=t
|
| 384 |
-
|
| 385 |
-
const si=document.getElementById('search-input');
|
| 386 |
-
if(si) si.placeholder=currentLang==='ar'?'بحث...':currentLang==='fr'?'Rechercher...':currentLang==='es'?'Buscar...':'Search chats...';
|
| 387 |
if(!activeChatId) renderWelcome();
|
| 388 |
renderChatList();
|
| 389 |
}
|
| 390 |
-
function changeLanguage(val){currentLang=val;localStorage.setItem('genisi_lang',val);applyI18n()}
|
| 391 |
-
|
| 392 |
-
/
|
| 393 |
-
const genId=()=>Date.now().toString(36)+Math.random().toString(36).substring(2,6);
|
| 394 |
-
|
| 395 |
-
let userId=localStorage.getItem('genisi_user_id');
|
| 396 |
-
if(!userId){
|
| 397 |
-
|
| 398 |
-
|
| 399 |
-
|
| 400 |
-
|
| 401 |
-
let
|
| 402 |
-
let
|
| 403 |
-
let
|
| 404 |
-
|
| 405 |
-
|
| 406 |
-
|
| 407 |
-
|
| 408 |
-
renderer
|
| 409 |
-
|
| 410 |
-
const
|
| 411 |
-
const
|
| 412 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 413 |
};
|
| 414 |
-
renderer.table=function(header,body){
|
| 415 |
-
if(typeof header==='object'&&header!==null&&'header' in header){
|
| 416 |
-
const
|
| 417 |
-
const hdr=
|
| 418 |
-
const rows=(
|
| 419 |
return `<div class="table-wrapper"><table><thead><tr>${hdr}</tr></thead><tbody>${rows}</tbody></table></div>`;
|
| 420 |
}
|
| 421 |
return `<div class="table-wrapper"><table><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
|
| 422 |
};
|
| 423 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 424 |
|
| 425 |
-
function renderKaTeX(el){
|
| 426 |
-
if(window.renderMathInElement){
|
| 427 |
-
renderMathInElement(el,{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 428 |
}
|
| 429 |
}
|
| 430 |
|
| 431 |
-
function copyCode(btn,
|
| 432 |
-
navigator.clipboard.writeText(decodeURIComponent(
|
| 433 |
-
const
|
| 434 |
-
|
|
|
|
| 435 |
});
|
| 436 |
}
|
| 437 |
|
| 438 |
-
/
|
| 439 |
-
function
|
| 440 |
-
|
| 441 |
-
const d=document.createElement('div');
|
| 442 |
-
d.className=`toast ${type}`;d.textContent=msg;c.appendChild(d);
|
| 443 |
-
setTimeout(()=>{d.style.animation='toastOut .3s ease forwards';setTimeout(()=>d.remove(),300)},duration);
|
| 444 |
}
|
| 445 |
|
| 446 |
-
/
|
| 447 |
-
const saveChats=()=>localStorage.setItem('genisi_chats',JSON.stringify(chats));
|
| 448 |
-
const getChat=(id)=>chats.find(c=>c.id===(id??activeChatId));
|
| 449 |
-
function esc(t){return String(t).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}
|
| 450 |
-
function scrollToBottom(smooth=true){
|
| 451 |
-
const area=document.getElementById('chat-area');
|
| 452 |
-
area.scrollTo({top:area.scrollHeight,behavior:smooth?'smooth':'auto'});
|
| 453 |
-
}
|
| 454 |
-
function handleChatScroll(){
|
| 455 |
-
const area=document.getElementById('chat-area');
|
| 456 |
-
const btn=document.getElementById('scroll-btn');
|
| 457 |
-
const fromBottom=area.scrollHeight-area.scrollTop-area.clientHeight;
|
| 458 |
-
btn.classList.toggle('visible',fromBottom>200);
|
| 459 |
-
}
|
| 460 |
|
| 461 |
-
|
| 462 |
-
|
| 463 |
-
|
| 464 |
-
const isText=f.type.startsWith('text/')||/\.(py|js|html|css|json|md|txt|csv|cpp|java|ts|tsx|vue|rs|go)$/i.test(f.name);
|
| 465 |
-
const reader=new FileReader();
|
| 466 |
-
reader.onload=(e)=>{
|
| 467 |
-
let data=e.target.result;
|
| 468 |
-
if(!isText) data=data.split(',')[1];
|
| 469 |
-
pendingFiles.push({name:f.name,type:f.type||'application/octet-stream',data,isText});
|
| 470 |
-
renderFileChips();
|
| 471 |
-
};
|
| 472 |
-
isText?reader.readAsText(f):reader.readAsDataURL(f);
|
| 473 |
-
}
|
| 474 |
-
document.getElementById('file-input').value='';
|
| 475 |
}
|
| 476 |
|
| 477 |
-
function
|
| 478 |
-
|
| 479 |
-
|
| 480 |
-
|
| 481 |
-
|
| 482 |
-
|
| 483 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 484 |
}
|
| 485 |
-
|
| 486 |
-
|
| 487 |
-
|
| 488 |
-
|
| 489 |
-
|
| 490 |
-
|
| 491 |
-
|
| 492 |
-
|
| 493 |
}
|
| 494 |
-
function
|
| 495 |
-
|
| 496 |
-
|
| 497 |
-
|
| 498 |
-
|
| 499 |
-
|
| 500 |
-
|
| 501 |
-
|
| 502 |
-
|
| 503 |
-
/* ════════ CHAT LIST ════════ */
|
| 504 |
-
function filterChats(query){
|
| 505 |
-
const items=document.querySelectorAll('.chat-item');
|
| 506 |
-
items.forEach(item=>{
|
| 507 |
-
const title=item.querySelector('.ct').textContent.toLowerCase();
|
| 508 |
-
item.style.display=title.includes(query.toLowerCase())?'flex':'none';
|
| 509 |
-
});
|
| 510 |
-
const noResult=document.getElementById('no-chats-msg');
|
| 511 |
-
const anyVisible=[...items].some(i=>i.style.display!=='none');
|
| 512 |
-
if(noResult) noResult.style.display=anyVisible?'none':'block';
|
| 513 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 514 |
|
| 515 |
function renderChatList(){
|
| 516 |
const list=document.getElementById('chats-list');
|
| 517 |
list.innerHTML='';
|
| 518 |
-
if(chats.length===0){
|
| 519 |
-
list.innerHTML=`<div style="text-align:center;color:var(--text3);font-size:.85rem;padding:20px 0">${t('noChats')}</div>`;
|
| 520 |
-
return;
|
| 521 |
-
}
|
| 522 |
[...chats].reverse().forEach(chat=>{
|
| 523 |
const div=document.createElement('div');
|
| 524 |
div.className='chat-item'+(chat.id===activeChatId?' active':'');
|
| 525 |
-
|
| 526 |
-
|
| 527 |
-
div.
|
| 528 |
-
div.onclick=()=>loadChat(chat.id);
|
| 529 |
list.appendChild(div);
|
| 530 |
});
|
| 531 |
}
|
| 532 |
|
| 533 |
-
/* ════════ WELCOME ════════ */
|
| 534 |
function renderWelcome(){
|
|
|
|
| 535 |
document.getElementById('topbar-title').textContent='Genisi AI';
|
| 536 |
-
document.getElementById('clear-btn').style.display='none';
|
| 537 |
document.getElementById('chat-area').innerHTML=`
|
| 538 |
<div class="welcome" id="welcome">
|
| 539 |
<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="w-logo" alt="Genisi"/>
|
| 540 |
-
<div class="w-title">${t
|
| 541 |
-
<div class="w-sub">${t
|
| 542 |
<div class="chips">
|
| 543 |
-
<div class="chip" onclick="quickSend('${t
|
| 544 |
-
<div class="chip" onclick="quickSend('${t
|
| 545 |
-
<div class="chip" onclick="quickSend('${t
|
| 546 |
-
<div class="chip" onclick="quickSend('${t
|
| 547 |
</div>
|
| 548 |
</div>`;
|
| 549 |
}
|
| 550 |
|
| 551 |
-
function newChat(){activeChatId=null;pendingFiles=[];renderFileChips();document.getElementById('msg-input').value='';
|
| 552 |
|
| 553 |
function loadChat(id){
|
| 554 |
activeChatId=id;
|
| 555 |
-
const chat=getChat(id);if(!chat)return;
|
| 556 |
document.getElementById('topbar-title').textContent=chat.title;
|
| 557 |
-
document.getElementById('clear-btn').style.display='flex';
|
| 558 |
const area=document.getElementById('chat-area');
|
| 559 |
area.innerHTML='';
|
| 560 |
-
chat.history.forEach((entry,idx)=>{
|
| 561 |
-
appendBubble('user',entry.user,false,entry.uiFiles);
|
| 562 |
-
appendBubble('bot',entry.bot,true
|
| 563 |
-
|
| 564 |
});
|
| 565 |
-
|
|
|
|
|
|
|
|
|
|
| 566 |
renderChatList();
|
| 567 |
}
|
| 568 |
|
| 569 |
function deleteChat(id,e){
|
| 570 |
-
e.stopPropagation();
|
| 571 |
-
|
| 572 |
-
if(activeChatId===id) newChat();else renderChatList();
|
| 573 |
-
showToast('Chat deleted','success',1800);
|
| 574 |
}
|
|
|
|
| 575 |
|
| 576 |
-
|
| 577 |
-
|
| 578 |
-
|
| 579 |
-
|
| 580 |
-
}
|
| 581 |
-
|
| 582 |
-
function clearCurrentChat(){
|
| 583 |
-
if(!activeChatId) return;
|
| 584 |
-
if(!confirm('Clear this chat?')) return;
|
| 585 |
-
const chat=getChat();
|
| 586 |
-
if(chat){chat.history=[];saveChats();loadChat(activeChatId)}
|
| 587 |
-
}
|
| 588 |
-
|
| 589 |
-
/* ════════ EXPORT ════════ */
|
| 590 |
-
function exportChat(){
|
| 591 |
-
if(!activeChatId){showToast('No active chat to export','error');return}
|
| 592 |
-
const chat=getChat();if(!chat)return;
|
| 593 |
-
let md=`# ${chat.title}\n\n`;
|
| 594 |
-
chat.history.forEach((e,i)=>{
|
| 595 |
-
md+=`## Message ${i+1}\n\n**User:** ${e.user}\n\n**Assistant:** ${e.bot}\n\n---\n\n`;
|
| 596 |
-
});
|
| 597 |
-
const blob=new Blob([md],{type:'text/markdown'});
|
| 598 |
-
const url=URL.createObjectURL(blob);
|
| 599 |
-
const a=document.createElement('a');
|
| 600 |
-
a.href=url;a.download=`${chat.title.slice(0,30).replace(/[^a-z0-9]/gi,'-')}.md`;
|
| 601 |
-
a.click();URL.revokeObjectURL(url);
|
| 602 |
-
showToast('Chat exported!','success');
|
| 603 |
-
}
|
| 604 |
-
|
| 605 |
-
/* ════════ STOP GENERATION ════════ */
|
| 606 |
-
function stopGeneration(){if(currentAbortController) currentAbortController.abort()}
|
| 607 |
-
|
| 608 |
-
/* ════════ INPUT ════════ */
|
| 609 |
-
function onInputChange(el){
|
| 610 |
-
autoResize(el);
|
| 611 |
-
const len=el.value.length;
|
| 612 |
-
const cc=document.getElementById('char-count');
|
| 613 |
-
if(len>MAX_CHARS*0.7){
|
| 614 |
-
cc.style.display='block';
|
| 615 |
-
cc.textContent=`${len}/${MAX_CHARS}`;
|
| 616 |
-
cc.className='char-count'+(len>MAX_CHARS?' over':len>MAX_CHARS*0.9?' warn':'');
|
| 617 |
-
} else {
|
| 618 |
-
cc.style.display='none';
|
| 619 |
-
}
|
| 620 |
}
|
| 621 |
|
| 622 |
-
|
| 623 |
-
function
|
| 624 |
-
function
|
|
|
|
| 625 |
|
| 626 |
-
/* ════════ SEND / STREAM ════════ */
|
| 627 |
async function sendMessage(){
|
| 628 |
if(isGenerating) return;
|
| 629 |
-
const input=document.getElementById('msg-input');
|
| 630 |
-
let text=input.value.trim();
|
| 631 |
-
|
| 632 |
-
if(text
|
|
|
|
|
|
|
|
|
|
| 633 |
|
| 634 |
-
|
| 635 |
-
input.value='';input.style.height='auto';
|
| 636 |
-
document.getElementById('char-count').style.display='none';
|
| 637 |
-
lastUserMessage=text;
|
| 638 |
|
| 639 |
if(!activeChatId){
|
| 640 |
-
activeChatId=genId();
|
| 641 |
-
const
|
| 642 |
-
chats.push({id:activeChatId,title,history:[]
|
| 643 |
-
document.getElementById('topbar-title').textContent=
|
| 644 |
-
document.getElementById('clear-btn').style.display='flex';
|
| 645 |
}
|
| 646 |
|
| 647 |
-
const chat=getChat();
|
| 648 |
-
const uiFiles=pendingFiles.map(f=>f.name);
|
| 649 |
-
const binaryFiles=[];
|
| 650 |
-
|
| 651 |
-
pendingFiles.forEach(f=>{
|
| 652 |
-
|
| 653 |
-
|
| 654 |
});
|
| 655 |
|
| 656 |
-
appendBubble('user',text,false,uiFiles);
|
| 657 |
-
pendingFiles=[];renderFileChips();
|
| 658 |
-
|
| 659 |
-
isGenerating=true;
|
| 660 |
-
document.getElementById('send-btn').style.display='none';
|
| 661 |
-
document.getElementById('stop-btn').style.display='flex';
|
| 662 |
-
|
| 663 |
-
|
| 664 |
-
|
| 665 |
-
|
| 666 |
-
|
| 667 |
-
|
| 668 |
-
|
| 669 |
-
|
| 670 |
-
|
| 671 |
-
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
|
| 675 |
-
|
| 676 |
-
|
| 677 |
-
const response=await fetch('/chat',{
|
| 678 |
-
method:'POST',
|
| 679 |
-
headers:{'Content-Type':'application/json'},
|
| 680 |
-
body:JSON.stringify({user_id:userId,message:text,history:chat.history,files:binaryFiles}),
|
| 681 |
-
signal:currentAbortController.signal
|
| 682 |
});
|
| 683 |
-
if(!response.ok) throw new Error(`Server Error ${response.status}`);
|
| 684 |
|
| 685 |
-
|
| 686 |
-
document.getElementById('typing-row')?.remove();
|
| 687 |
-
const botContentDiv=appendBubble('bot','',true);
|
| 688 |
|
| 689 |
-
const reader=response.body.getReader();
|
| 690 |
-
const decoder=new TextDecoder(
|
| 691 |
|
| 692 |
-
while(true){
|
| 693 |
-
const{value,done}=await reader.read();
|
| 694 |
if(done) break;
|
| 695 |
-
|
| 696 |
-
|
| 697 |
-
|
| 698 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 699 |
} else {
|
| 700 |
-
|
| 701 |
-
|
| 702 |
-
html+=`<div class="skeleton-img">🎨 ${currentLang==='ar'?'جاري التصميم...':'Generating...'}</div>`;
|
| 703 |
-
}
|
| 704 |
-
botContentDiv.innerHTML=html+'<span class="gemini-cursor"></span>';
|
| 705 |
}
|
| 706 |
-
|
| 707 |
-
}
|
| 708 |
-
|
| 709 |
-
/* Final render */
|
| 710 |
-
if(fullBotResponse.includes('<div style="text-align:center;')){
|
| 711 |
-
botContentDiv.innerHTML=fullBotResponse;
|
| 712 |
-
} else {
|
| 713 |
-
botContentDiv.innerHTML=marked.parse(fullBotResponse);
|
| 714 |
renderKaTeX(botContentDiv);
|
|
|
|
| 715 |
}
|
| 716 |
-
/* Add action bar to last bot bubble */
|
| 717 |
-
addMessageActions(botContentDiv.parentElement,fullBotResponse,chat.history.length);
|
| 718 |
|
| 719 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 720 |
saveChats();
|
| 721 |
-
appendMemBadge(chat.history.length,chat.history.length);
|
| 722 |
|
| 723 |
} catch(err){
|
| 724 |
-
|
| 725 |
-
if(err.name==='AbortError'){
|
| 726 |
-
|
| 727 |
-
|
| 728 |
-
|
| 729 |
-
|
| 730 |
-
chat.history.push({user:text,bot:fullBotResponse+'\n\n*'+t('stopMsg')+'*',uiFiles});
|
| 731 |
saveChats();
|
| 732 |
-
}
|
| 733 |
} else {
|
| 734 |
-
|
| 735 |
}
|
| 736 |
} finally {
|
| 737 |
-
|
| 738 |
-
|
| 739 |
-
|
| 740 |
-
|
| 741 |
-
|
|
|
|
| 742 |
}
|
| 743 |
}
|
| 744 |
|
| 745 |
-
|
| 746 |
-
async function regenerateLastMessage(){
|
| 747 |
-
if(isGenerating) return;
|
| 748 |
-
const chat=getChat();if(!chat||!chat.history.length) return;
|
| 749 |
-
const last=chat.history[chat.history.length-1];
|
| 750 |
-
chat.history.pop();saveChats();
|
| 751 |
-
/* Remove last two visual elements (mem badge + bot row) */
|
| 752 |
const area=document.getElementById('chat-area');
|
| 753 |
-
const
|
| 754 |
-
|
| 755 |
-
|
| 756 |
-
|
| 757 |
-
|
| 758 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 759 |
}
|
| 760 |
-
document.getElementById('msg-input').value=last.user;
|
| 761 |
-
sendMessage();
|
| 762 |
-
}
|
| 763 |
-
|
| 764 |
-
/* ════════ BUBBLE HELPERS ════════ */
|
| 765 |
-
function appendBubble(role,text,isMarkdown,filesList=[],historyIdx=null){
|
| 766 |
-
const area=document.getElementById('chat-area');
|
| 767 |
-
const row=document.createElement('div');row.className=`msg-row ${role}`;
|
| 768 |
-
const av=document.createElement('div');av.className='msg-av';
|
| 769 |
-
role==='bot'?av.innerHTML=`<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/>`:av.textContent='👤';
|
| 770 |
-
|
| 771 |
-
const bub=document.createElement('div');bub.className='bubble';
|
| 772 |
-
|
| 773 |
-
if(filesList?.length>0) filesList.forEach(n=>bub.innerHTML+=`<div class="file-prev">📎 ${esc(n)}</div>`);
|
| 774 |
|
| 775 |
-
const contentDiv=document.createElement('div');
|
| 776 |
-
if(text){
|
| 777 |
-
|
| 778 |
-
|
| 779 |
-
|
| 780 |
-
if(isMarkdown) renderKaTeX(contentDiv);
|
| 781 |
-
}
|
| 782 |
}
|
| 783 |
bub.appendChild(contentDiv);
|
| 784 |
-
|
| 785 |
-
|
| 786 |
-
if(role==='bot'&&text){
|
| 787 |
-
addMessageActions(bub,text,historyIdx);
|
| 788 |
-
}
|
| 789 |
-
|
| 790 |
-
row.appendChild(av);row.appendChild(bub);
|
| 791 |
area.appendChild(row);
|
| 792 |
-
|
| 793 |
-
|
| 794 |
-
|
| 795 |
-
|
| 796 |
-
|
| 797 |
-
|
| 798 |
-
|
| 799 |
-
|
| 800 |
-
|
| 801 |
-
|
| 802 |
-
|
| 803 |
-
|
| 804 |
-
|
| 805 |
-
|
| 806 |
-
showToast(t('copied'),'success',1500);
|
| 807 |
-
});
|
| 808 |
-
};
|
| 809 |
-
bar.appendChild(copyBtn);
|
| 810 |
-
/* Regenerate on last message only */
|
| 811 |
-
if(historyIdx===null||(getChat()&&historyIdx===getChat().history.length-1)){
|
| 812 |
-
const regenBtn=document.createElement('button');regenBtn.className='action-btn';regenBtn.textContent=`🔄 ${t('regen')}`;
|
| 813 |
-
regenBtn.onclick=regenerateLastMessage;
|
| 814 |
-
bar.appendChild(regenBtn);
|
| 815 |
}
|
| 816 |
-
|
|
|
|
| 817 |
}
|
| 818 |
|
| 819 |
-
function appendMemBadge(count,total){
|
| 820 |
const area=document.getElementById('chat-area');
|
| 821 |
-
const b=document.createElement('div');b.className='mem-badge';
|
| 822 |
-
b.innerHTML=`🧠 ${
|
| 823 |
-
area.appendChild(b);
|
|
|
|
| 824 |
}
|
| 825 |
|
| 826 |
-
/
|
| 827 |
-
document.addEventListener('keydown',e=>{
|
| 828 |
-
if((e.ctrlKey||e.metaKey)&&e.key==='k'){e.preventDefault();newChat()}
|
| 829 |
-
if((e.ctrlKey||e.metaKey)&&e.key==='b'){e.preventDefault();toggleSidebar()}
|
| 830 |
-
if(e.key==='Escape') closeSettings();
|
| 831 |
-
});
|
| 832 |
-
|
| 833 |
-
/* ════════ INIT ════════ */
|
| 834 |
applyTheme(localStorage.getItem('genisi_theme')||'dark');
|
| 835 |
-
document.getElementById('lang-select').value=currentLang;
|
| 836 |
applyI18n();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 837 |
</script>
|
| 838 |
</body>
|
| 839 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en" dir="ltr">
|
| 3 |
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Genisi AI</title>
|
| 7 |
<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"/>
|
| 8 |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 9 |
+
<!-- إضافة DOMPurify للحماية من XSS -->
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
|
| 11 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
|
| 12 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
| 13 |
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
| 14 |
<style>
|
| 15 |
:root {
|
| 16 |
+
--bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
|
| 17 |
+
--border: #2a2f42; --border2: #333a52;
|
| 18 |
+
--accent: #4f8ef7; --accent2: #7c5cf7; --accent-soft: rgba(79,142,247,0.12);
|
| 19 |
+
--text: #e8eaf2; --text2: #9aa3be; --text3: #5c6480;
|
| 20 |
+
--user-bubble: #1a2340; --bot-bubble: #161920;
|
| 21 |
+
--danger: #f75f5f;
|
| 22 |
+
--radius: 28px; --radius-sm: 18px; --radius-pill: 50px;
|
| 23 |
+
--sidebar-w: 280px; --tr: 0.3s cubic-bezier(.4,0,.2,1);
|
| 24 |
}
|
| 25 |
[data-theme="light"] {
|
| 26 |
+
--bg: #f0f2f8; --surface: #fff; --surface2: #f5f6fa; --surface3: #ebedf5;
|
| 27 |
+
--border: #d8dce8; --border2: #c5cad8;
|
| 28 |
+
--text: #1a1d2e; --text2: #4a5070; --text3: #8a90a8;
|
| 29 |
+
--user-bubble: #dde6ff; --bot-bubble: #fff; --accent-soft: rgba(79,142,247,0.1);
|
| 30 |
}
|
| 31 |
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
| 32 |
+
html,body{height:100%;font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text); scroll-behavior: smooth;}
|
| 33 |
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
|
| 34 |
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--radius-pill)}
|
| 35 |
+
|
| 36 |
.app{display:flex;height:100vh;overflow:hidden}
|
| 37 |
|
| 38 |
+
/* SIDEBAR */
|
| 39 |
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
|
| 40 |
border-right:1px solid var(--border);display:flex;flex-direction:column;
|
| 41 |
transition:width var(--tr),min-width var(--tr);overflow:hidden;
|
| 42 |
+
border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);}
|
| 43 |
+
[dir="rtl"] .sidebar { border-right:none; border-left:1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
|
| 44 |
.sidebar.collapsed{width:0;min-width:0;border:none}
|
| 45 |
+
.sidebar-header{padding:24px 20px 16px;display:flex;align-items:center;gap:12px;}
|
| 46 |
.s-logo{display:flex;align-items:center;gap:12px;flex:1}
|
| 47 |
+
.s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
|
| 48 |
.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}
|
| 49 |
.btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 50 |
color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
|
| 51 |
+
font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px; justify-content:center;
|
| 52 |
+
transition:all var(--tr); box-shadow: 0 4px 15px var(--accent-soft);}
|
| 53 |
.btn-new:hover{opacity:.9;transform:translateY(-2px)}
|
| 54 |
.s-label{padding:10px 20px;font-size:.75rem;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
.chats-list{flex:1;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
|
| 56 |
.chat-item{padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;color:var(--text2);
|
| 57 |
+
display:flex;align-items:center;gap:10px;transition:all var(--tr);
|
| 58 |
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
| 59 |
+
.chat-item:hover{background:var(--surface2);color:var(--text); transform: translateX(4px);}[dir="rtl"] .chat-item:hover {transform: translateX(-4px);}
|
| 60 |
+
.chat-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600;}
|
| 61 |
.chat-item .ct{flex:1;overflow:hidden;text-overflow:ellipsis}
|
| 62 |
.del-btn{opacity:0;background:none;border:none;color:var(--danger);cursor:pointer;font-size:.9rem;
|
| 63 |
+
padding:4px;border-radius:50%;transition:all var(--tr); display:flex; align-items:center; justify-content:center;}
|
| 64 |
.chat-item:hover .del-btn{opacity:1}
|
| 65 |
+
.del-btn:hover{background:rgba(247,95,95,.15); transform:scale(1.1);}
|
| 66 |
+
.s-footer{padding:16px;display:flex;align-items:center;gap:12px; justify-content: center;}
|
| 67 |
+
.btn-icon{width:42px;height:42px;background:var(--surface2);border:none;
|
| 68 |
+
border-radius:var(--radius-pill);color:var(--text2);cursor:pointer;display:flex;
|
| 69 |
+
align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--tr)}
|
| 70 |
+
.btn-icon:hover{background:var(--surface3);color:var(--text); transform:rotate(10deg);}
|
| 71 |
+
|
| 72 |
+
/* MAIN */
|
| 73 |
+
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; background: var(--bg);}
|
| 74 |
+
.topbar{height:70px;padding:0 24px;display:flex;align-items:center;gap:16px; flex-shrink:0}
|
| 75 |
.topbar-title{flex:1;font-size:1.05rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
| 76 |
|
| 77 |
+
/* CHAT AREA */
|
| 78 |
+
.chat-area{flex:1;overflow-y:auto;padding:20px 0 40px;display:flex;flex-direction:column; scroll-behavior: smooth;}
|
| 79 |
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 80 |
+
gap:20px;padding:40px 24px;text-align:center; animation: fadeSlideUp 0.6s ease;}
|
| 81 |
.w-logo{width:85px;height:85px;border-radius:24px;object-fit:cover;box-shadow:0 12px 40px var(--accent-soft)}
|
| 82 |
.w-title{font-size:2.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 83 |
-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
| 84 |
.w-sub{color:var(--text2);font-size:1.05rem}
|
| 85 |
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;max-width:600px}
|
| 86 |
.chip{padding:10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
|
| 87 |
+
font-size:.9rem;color:var(--text);cursor:pointer;transition:all var(--tr); box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
|
| 88 |
+
.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent); transform:translateY(-2px);}
|
| 89 |
|
| 90 |
+
/* MESSAGES & ANIMATIONS */
|
| 91 |
+
.msg-row{display:flex;padding:8px 30px;gap:16px; animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
|
| 92 |
+
@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); } }
|
| 93 |
+
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
| 94 |
.msg-row.user{flex-direction:row-reverse}
|
| 95 |
.msg-av{width:38px;height:38px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;
|
| 96 |
+
justify-content:center;font-size:1.1rem;font-weight:700;margin-top:2px;overflow:hidden;
|
| 97 |
+
box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
|
| 98 |
.msg-row.bot .msg-av{background:linear-gradient(135deg,var(--accent),var(--accent2))}
|
| 99 |
.msg-row.bot .msg-av img{width:100%;height:100%;object-fit:cover}
|
| 100 |
.msg-row.user .msg-av{background:var(--surface3);color:var(--text)}
|
| 101 |
+
|
| 102 |
+
.bubble{max-width:min(700px,80vw);padding:16px 22px;border-radius:var(--radius);
|
| 103 |
+
font-size:.98rem;line-height:1.75;word-break:break-word; box-shadow: 0 4px 15px rgba(0,0,0,0.03);}
|
| 104 |
+
.msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;border-top-left-radius:var(--radius);}
|
| 105 |
+
[dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
|
| 106 |
+
.msg-row.user .bubble{background:var(--user-bubble);border:none; border-top-right-radius:6px}
|
| 107 |
+
[dir="rtl"] .msg-row.user .bubble { border-top-right-radius:var(--radius); border-top-left-radius:6px; }
|
| 108 |
+
|
| 109 |
+
/* تحسين عرض الصور داخل الفقاعة */
|
| 110 |
+
.bubble img {
|
| 111 |
+
max-width: 100%;
|
| 112 |
+
height: auto;
|
| 113 |
+
border-radius: 16px;
|
| 114 |
+
margin: 12px 0;
|
| 115 |
+
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
| 116 |
+
cursor: zoom-in;
|
| 117 |
+
transition: transform 0.2s;
|
| 118 |
+
border: 1px solid var(--border);
|
| 119 |
+
}
|
| 120 |
+
.bubble img:active {
|
| 121 |
+
transform: scale(1.02);
|
| 122 |
+
}
|
| 123 |
+
|
| 124 |
+
/* GEMINI STREAMING EFFECT */
|
| 125 |
+
.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; }
|
| 126 |
+
@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; } }
|
| 127 |
+
|
| 128 |
+
/* IMAGE SKELETON LOADING (تأثير التدرج لتوليد الصور) */
|
| 129 |
+
.skeleton-img {
|
| 130 |
+
width: 100%; max-width: 400px; height: 350px;
|
| 131 |
+
margin: 15px auto; border-radius: 18px;
|
| 132 |
+
background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
|
| 133 |
+
background-size: 200% 100%;
|
| 134 |
+
animation: skeletonLoading 1.5s infinite linear;
|
| 135 |
+
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
| 136 |
+
display: flex; align-items: center; justify-content: center;
|
| 137 |
+
color: var(--text3); font-size: 2rem;
|
| 138 |
+
}
|
| 139 |
+
@keyframes skeletonLoading {
|
| 140 |
+
0% { background-position: 200% 0; }
|
| 141 |
+
100% { background-position: -200% 0; }
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
/* MARKDOWN STYLES */
|
| 145 |
.bubble p{margin-bottom:12px}.bubble p:last-child{margin-bottom:0}
|
| 146 |
.bubble ul,.bubble ol{padding-inline-start:24px;margin:12px 0}
|
| 147 |
+
.bubble li {margin-bottom: 6px;}
|
| 148 |
+
.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);}
|
| 149 |
+
.bubble table{width:100%;border-collapse:collapse;min-width:400px;}
|
| 150 |
+
.bubble th,.bubble td{border:1px solid var(--border);padding:10px 14px;text-align:start;white-space:nowrap;}
|
| 151 |
+
.bubble th{background:var(--surface3);font-weight:600;}
|
| 152 |
+
|
| 153 |
+
/* Code Blocks */
|
| 154 |
+
.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%;}
|
| 155 |
+
.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;}
|
| 156 |
+
.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;}
|
| 157 |
+
.copy-btn:hover{background:var(--accent);color:#fff;}
|
| 158 |
+
.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%;}
|
| 159 |
+
.code-container pre code{white-space:pre;display:block;}
|
| 160 |
+
.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);}
|
| 161 |
+
|
| 162 |
+
/* KaTeX Math Styles */
|
| 163 |
+
.katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0;-webkit-overflow-scrolling:touch;}
|
| 164 |
+
.katex{font-size:1.05em;}
|
| 165 |
|
| 166 |
/* Files */
|
| 167 |
+
.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);}
|
| 168 |
+
.file-chip button {background:none; border:none; color:var(--danger); cursor:pointer; font-size:1rem; padding:0; margin-left:4px; transition:transform 0.2s;}
|
| 169 |
+
.file-chip button:hover {transform:scale(1.2);}
|
| 170 |
+
.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;}
|
| 171 |
+
|
| 172 |
+
.mem-badge{font-size:.75rem;color:var(--text3);padding:4px 30px 10px;display:flex;align-items:center;gap:6px; font-weight: 600;}
|
| 173 |
+
|
| 174 |
+
/* INPUT */
|
| 175 |
+
.input-area{padding:0 24px 30px; display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
|
| 176 |
+
.input-wrapper{width:100%; max-width:850px; position:relative;}
|
| 177 |
+
.file-chips-container {width:100%; max-width:850px; display:flex; flex-wrap:wrap; margin-bottom:8px;}
|
| 178 |
+
.input-box{display:flex;align-items:flex-end;gap:12px;background:var(--surface);
|
| 179 |
+
border:1px solid var(--border);border-radius:32px;padding:12px 16px 12px 16px;
|
| 180 |
+
transition:all var(--tr); box-shadow: 0 8px 30px rgba(0,0,0,0.15);}
|
| 181 |
+
.input-box:focus-within{border-color:var(--accent); box-shadow: 0 8px 30px var(--accent-soft), 0 0 0 3px var(--accent-soft);}
|
| 182 |
+
|
| 183 |
+
.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;}
|
| 184 |
+
.btn-attach:hover{color:var(--accent); background:var(--surface2);}
|
| 185 |
+
|
| 186 |
+
.input-box textarea{flex:1;background:none;border:none;outline:none;color:var(--text);
|
| 187 |
+
font-family:'Cairo',sans-serif;font-size:.98rem;resize:none;max-height:160px;line-height:1.6; padding: 6px 0;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 188 |
.input-box textarea::placeholder{color:var(--text3)}
|
| 189 |
+
|
| 190 |
+
.btn-send, .btn-stop {width:42px;height:42px; 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;}
|
| 191 |
+
.btn-send {background:linear-gradient(135deg,var(--accent),var(--accent2));}
|
| 192 |
+
.btn-send:hover{opacity:.9;transform:scale(1.08) rotate(-10deg);}[dir="rtl"] .btn-send:hover{transform:scale(1.08) rotate(10deg);}
|
| 193 |
+
.btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none;}
|
| 194 |
+
|
| 195 |
+
/* Stop Button Styles */
|
| 196 |
+
.btn-stop {background:var(--surface3); color:var(--text); border:1px solid var(--border);}
|
| 197 |
+
.btn-stop:hover {background:var(--danger); color:#fff; transform:scale(1.05);}
|
| 198 |
+
|
| 199 |
+
/* MODAL */
|
| 200 |
+
.overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);display:flex;
|
| 201 |
+
align-items:center;justify-content:center;backdrop-filter:blur(8px);
|
| 202 |
+
opacity:0;pointer-events:none;transition:opacity var(--tr)}
|
| 203 |
.overlay.open{opacity:1;pointer-events:all}
|
| 204 |
+
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;
|
| 205 |
+
width:min(440px,90vw);box-shadow:0 30px 80px rgba(0,0,0,.5);
|
| 206 |
+
transform:translateY(20px) scale(0.95);transition:all var(--tr)}
|
| 207 |
+
.overlay.open .modal{transform:translateY(0) scale(1)}
|
| 208 |
.m-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
|
| 209 |
.m-title{font-size:1.3rem;font-weight:700;flex:1}
|
| 210 |
+
.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);}
|
| 211 |
+
.m-close:hover{background:var(--danger); color:#fff;}
|
| 212 |
.s-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
|
| 213 |
.s-lbl{font-size:.95rem;font-weight:600;color:var(--text)}
|
| 214 |
.s-desc{font-size:.8rem;color:var(--text3);margin-top:4px}
|
| 215 |
.toggle{position:relative;width:48px;height:26px}
|
| 216 |
.toggle input{opacity:0;width:0;height:0}
|
| 217 |
.tslider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--tr)}
|
| 218 |
+
.tslider::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
|
| 219 |
+
background:#fff;top:3px;left:4px;transition:all var(--tr); box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
|
| 220 |
.toggle input:checked+.tslider{background:var(--accent)}
|
| 221 |
.toggle input:checked+.tslider::before{transform:translateX(20px)}
|
| 222 |
+
|
| 223 |
+
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;}
|
| 224 |
+
.btn-save{width:100%;margin-top:24px;padding:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));
|
| 225 |
+
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);}
|
| 226 |
.btn-save:hover{opacity:.9}
|
| 227 |
+
.btn-danger{padding:8px 18px;background:rgba(247,95,95,.12);border:1px solid var(--danger);
|
| 228 |
+
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);}
|
| 229 |
+
.btn-danger:hover{background:var(--danger); color:#fff;}
|
| 230 |
+
|
| 231 |
+
/* ══ RESPONSIVE MOBILE ══ */
|
| 232 |
+
@media (max-width: 640px) {
|
| 233 |
+
.msg-row { padding: 6px 12px; gap: 10px; }
|
| 234 |
+
.bubble { max-width: 92vw; padding: 12px 14px; font-size: .93rem; }
|
| 235 |
+
.msg-row.bot .bubble { padding: 6px 2px; }
|
| 236 |
+
.topbar { height: 56px; padding: 0 14px; }
|
| 237 |
+
.input-area { padding: 0 10px 18px; }
|
| 238 |
+
.code-container pre { font-size: 0.78rem; padding: 12px; }
|
| 239 |
+
.bubble th, .bubble td { font-size: 0.85rem; padding: 8px 10px; }
|
| 240 |
+
.w-title { font-size: 1.8rem; }
|
| 241 |
+
.chips { gap: 8px; }
|
| 242 |
+
.chip { font-size: .82rem; padding: 8px 14px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 243 |
}
|
| 244 |
</style>
|
| 245 |
</head>
|
| 246 |
<body>
|
| 247 |
<div class="app">
|
| 248 |
+
|
| 249 |
<aside class="sidebar" id="sidebar">
|
| 250 |
<div class="sidebar-header">
|
| 251 |
<div class="s-logo">
|
|
|
|
| 254 |
</div>
|
| 255 |
</div>
|
| 256 |
<button class="btn-new" onclick="newChat()" id="i18n-new-chat">✦ New Chat</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 257 |
<div class="s-label" id="i18n-chats-label">CHATS</div>
|
| 258 |
<div class="chats-list" id="chats-list"></div>
|
| 259 |
<div class="s-footer">
|
| 260 |
+
<button class="btn-icon" onclick="openSettings()">⚙</button>
|
| 261 |
+
<button class="btn-icon" id="theme-btn" onclick="toggleTheme()">🌙</button>
|
|
|
|
| 262 |
</div>
|
| 263 |
</aside>
|
| 264 |
|
|
|
|
| 266 |
<div class="topbar">
|
| 267 |
<button class="btn-icon" onclick="toggleSidebar()">☰</button>
|
| 268 |
<div class="topbar-title" id="topbar-title">Genisi AI</div>
|
|
|
|
|
|
|
|
|
|
| 269 |
</div>
|
| 270 |
|
| 271 |
+
<div class="chat-area" id="chat-area"></div>
|
|
|
|
|
|
|
| 272 |
|
| 273 |
<div class="input-area">
|
| 274 |
<div class="file-chips-container" id="file-chips"></div>
|
| 275 |
<div class="input-wrapper">
|
| 276 |
<div class="input-box">
|
| 277 |
+
<input type="file" id="file-input" multiple hidden onchange="handleFiles(this.files)" />
|
| 278 |
+
<button class="btn-attach" onclick="document.getElementById('file-input').click()">📎</button>
|
| 279 |
+
<textarea id="msg-input" rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)" placeholder="Type a message..."></textarea>
|
|
|
|
| 280 |
<button class="btn-send" id="send-btn" onclick="sendMessage()">➤</button>
|
| 281 |
+
<button class="btn-stop" id="stop-btn" onclick="stopGeneration()" style="display:none;">⏹</button>
|
| 282 |
</div>
|
| 283 |
</div>
|
|
|
|
| 284 |
</div>
|
| 285 |
</main>
|
| 286 |
</div>
|
| 287 |
|
|
|
|
|
|
|
|
|
|
| 288 |
<!-- SETTINGS MODAL -->
|
| 289 |
+
<div class="overlay" id="settings-modal">
|
| 290 |
<div class="modal">
|
| 291 |
<div class="m-header">
|
| 292 |
<div class="m-title" id="i18n-settings-title">Settings</div>
|
|
|
|
| 308 |
<span class="tslider"></span>
|
| 309 |
</label>
|
| 310 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 311 |
<div class="s-row">
|
| 312 |
<div>
|
| 313 |
<div class="s-lbl" id="i18n-del-lbl">Delete All Chats</div>
|
|
|
|
| 320 |
</div>
|
| 321 |
|
| 322 |
<script>
|
| 323 |
+
// ════════ i18n (DICTIONARY) ════════
|
| 324 |
+
const i18n = {
|
| 325 |
+
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]" },
|
| 326 |
+
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: "[تم إيقاف التوليد]" },
|
| 327 |
+
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: "Créer une image 🚀", errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs", stopMsg: "[Génération arrêtée]" },
|
| 328 |
+
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: "Diseñar imagen 🚀", errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs", stopMsg: "[Generación detenida]" }
|
| 329 |
};
|
| 330 |
|
| 331 |
+
let currentLang = localStorage.getItem('genisi_lang') || 'en';
|
| 332 |
+
|
| 333 |
+
function applyI18n() {
|
| 334 |
+
const t = i18n[currentLang];
|
| 335 |
+
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
|
| 336 |
+
document.documentElement.lang = currentLang;
|
| 337 |
+
|
| 338 |
+
document.getElementById('i18n-new-chat').textContent = t.newChat;
|
| 339 |
+
document.getElementById('i18n-chats-label').textContent = t.chatsLabel;
|
| 340 |
+
document.getElementById('i18n-settings-title').textContent = t.settings;
|
| 341 |
+
document.getElementById('i18n-lang-lbl').textContent = t.lang;
|
| 342 |
+
document.getElementById('i18n-dark-lbl').textContent = t.dark;
|
| 343 |
+
document.getElementById('i18n-del-lbl').textContent = t.del;
|
| 344 |
+
document.getElementById('i18n-del-desc').textContent = t.delDesc;
|
| 345 |
+
document.getElementById('i18n-del-btn').textContent = t.delBtn;
|
| 346 |
+
document.getElementById('i18n-save-btn').textContent = t.saveBtn;
|
| 347 |
+
document.getElementById('msg-input').placeholder = t.placeholder;
|
| 348 |
+
|
|
|
|
|
|
|
| 349 |
if(!activeChatId) renderWelcome();
|
| 350 |
renderChatList();
|
| 351 |
}
|
| 352 |
+
function changeLanguage(val) { currentLang = val; localStorage.setItem('genisi_lang', val); applyI18n(); }
|
| 353 |
+
|
| 354 |
+
// ════════ STATE & CONFIG ════════
|
| 355 |
+
const genId = () => Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
|
| 356 |
+
|
| 357 |
+
let userId = localStorage.getItem('genisi_user_id');
|
| 358 |
+
if (!userId) {
|
| 359 |
+
userId = 'user_' + genId();
|
| 360 |
+
localStorage.setItem('genisi_user_id', userId);
|
| 361 |
+
}
|
| 362 |
+
|
| 363 |
+
let chats = JSON.parse(localStorage.getItem('genisi_chats') || '[]');
|
| 364 |
+
let activeChatId = null;
|
| 365 |
+
let isGenerating = false;
|
| 366 |
+
let pendingFiles =[];
|
| 367 |
+
let currentAbortController = null;
|
| 368 |
+
|
| 369 |
+
// ════════ MARKDOWN PARSER + DOMPurify (آمن) ════════
|
| 370 |
+
const renderer = new marked.Renderer();
|
| 371 |
+
renderer.code = function(token) {
|
| 372 |
+
const codeText = typeof token === 'string' ? token : token.text || '';
|
| 373 |
+
const lang = typeof token === 'string' ? arguments[1] : token.lang || 'text';
|
| 374 |
+
const escapedCode = String(codeText).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
| 375 |
+
return `
|
| 376 |
+
<div class="code-container">
|
| 377 |
+
<div class="code-header">
|
| 378 |
+
<span>${lang}</span>
|
| 379 |
+
<button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(codeText)}')">📋 Copy</button>
|
| 380 |
+
</div>
|
| 381 |
+
<pre><code class="language-${lang}">${escapedCode}</code></pre>
|
| 382 |
+
</div>`;
|
| 383 |
};
|
| 384 |
+
renderer.table = function(header, body) {
|
| 385 |
+
if (typeof header === 'object' && header !== null && 'header' in header) {
|
| 386 |
+
const token = header;
|
| 387 |
+
const hdr = token.header.map(cell => `<th>${cell.tokens.map(t=>t.raw||'').join('')}</th>`).join('');
|
| 388 |
+
const rows = (token.rows || []).map(row => `<tr>${row.map(cell => `<td>${cell.tokens.map(t=>t.raw||'').join('')}</td>`).join('')}</tr>`).join('');
|
| 389 |
return `<div class="table-wrapper"><table><thead><tr>${hdr}</tr></thead><tbody>${rows}</tbody></table></div>`;
|
| 390 |
}
|
| 391 |
return `<div class="table-wrapper"><table><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
|
| 392 |
};
|
| 393 |
+
renderer.html = function(html) { return html; };
|
| 394 |
+
marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
|
| 395 |
+
|
| 396 |
+
// دالة مساعدة: تحويل Markdown إلى HTML آمن باستخدام DOMPurify
|
| 397 |
+
function safeMarked(text) {
|
| 398 |
+
if (!text) return '';
|
| 399 |
+
const rawHtml = marked.parse(text);
|
| 400 |
+
return DOMPurify.sanitize(rawHtml, { USE_PROFILES: { html: true } });
|
| 401 |
+
}
|
| 402 |
|
| 403 |
+
function renderKaTeX(el) {
|
| 404 |
+
if (window.renderMathInElement) {
|
| 405 |
+
renderMathInElement(el, {
|
| 406 |
+
delimiters: [
|
| 407 |
+
{left: '$$', right: '$$', display: true},
|
| 408 |
+
{left: '$', right: '$', display: false},
|
| 409 |
+
{left: '\\(', right: '\\)', display: false},
|
| 410 |
+
{left: '\\[', right: '\\]', display: true}
|
| 411 |
+
],
|
| 412 |
+
throwOnError: false
|
| 413 |
+
});
|
| 414 |
}
|
| 415 |
}
|
| 416 |
|
| 417 |
+
function copyCode(btn, encodedCode) {
|
| 418 |
+
navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
|
| 419 |
+
const originalText = btn.innerHTML;
|
| 420 |
+
btn.innerHTML = "✅ Copied!";
|
| 421 |
+
setTimeout(() => btn.innerHTML = originalText, 2000);
|
| 422 |
});
|
| 423 |
}
|
| 424 |
|
| 425 |
+
// إزالة مؤشر Gemini يدويًا (يُستدعى عند الإيقاف أو الخطأ)
|
| 426 |
+
function removeGeminiCursor() {
|
| 427 |
+
document.querySelectorAll('.gemini-cursor').forEach(el => el.remove());
|
|
|
|
|
|
|
|
|
|
| 428 |
}
|
| 429 |
|
| 430 |
+
// ════════ UTILS & FILES ════════
|
| 431 |
+
const saveChats = () => localStorage.setItem('genisi_chats', JSON.stringify(chats));
|
| 432 |
+
const getChat = (id) => chats.find(c => c.id === (id ?? activeChatId));
|
| 433 |
+
function esc(t){ return String(t).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 434 |
|
| 435 |
+
function scrollToBottom() {
|
| 436 |
+
const area = document.getElementById('chat-area');
|
| 437 |
+
area.scrollTop = area.scrollHeight;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 438 |
}
|
| 439 |
|
| 440 |
+
async function handleFiles(files) {
|
| 441 |
+
for (let f of files) {
|
| 442 |
+
const isText = f.type.startsWith('text/') || f.name.match(/\.(py|js|html|css|json|md|txt|csv|cpp|java)$/i);
|
| 443 |
+
const reader = new FileReader();
|
| 444 |
+
reader.onload = (e) => {
|
| 445 |
+
let data = e.target.result;
|
| 446 |
+
if (!isText) data = data.split(',')[1];
|
| 447 |
+
pendingFiles.push({ name: f.name, type: f.type || 'application/octet-stream', data: data, isText: isText });
|
| 448 |
+
renderFileChips();
|
| 449 |
+
};
|
| 450 |
+
if (isText) reader.readAsText(f);
|
| 451 |
+
else reader.readAsDataURL(f);
|
| 452 |
+
}
|
| 453 |
+
document.getElementById('file-input').value = '';
|
| 454 |
}
|
| 455 |
+
|
| 456 |
+
function renderFileChips() {
|
| 457 |
+
const container = document.getElementById('file-chips');
|
| 458 |
+
container.innerHTML = '';
|
| 459 |
+
pendingFiles.forEach((f, idx) => {
|
| 460 |
+
const icon = f.isText ? '📄' : '🖼️';
|
| 461 |
+
container.innerHTML += `<div class="file-chip">${icon} ${f.name} <button onclick="removeFile(${idx})">×</button></div>`;
|
| 462 |
+
});
|
| 463 |
}
|
| 464 |
+
function removeFile(idx) { pendingFiles.splice(idx, 1); renderFileChips(); }
|
| 465 |
+
|
| 466 |
+
// ════════ THEME & UI ════════
|
| 467 |
+
function applyTheme(t){
|
| 468 |
+
document.documentElement.setAttribute('data-theme',t);
|
| 469 |
+
localStorage.setItem('genisi_theme',t);
|
| 470 |
+
document.getElementById('theme-btn').textContent = t==='dark'?'🌙':'☀️';
|
| 471 |
+
document.getElementById('dark-toggle').checked = t==='dark';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 472 |
}
|
| 473 |
+
function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
|
| 474 |
+
function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
|
| 475 |
+
|
| 476 |
+
function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('collapsed'); }
|
| 477 |
+
function openSettings(){ document.getElementById('settings-modal').classList.add('open'); document.getElementById('lang-select').value=currentLang;}
|
| 478 |
+
function closeSettings(){ document.getElementById('settings-modal').classList.remove('open'); }
|
| 479 |
|
| 480 |
function renderChatList(){
|
| 481 |
const list=document.getElementById('chats-list');
|
| 482 |
list.innerHTML='';
|
|
|
|
|
|
|
|
|
|
|
|
|
| 483 |
[...chats].reverse().forEach(chat=>{
|
| 484 |
const div=document.createElement('div');
|
| 485 |
div.className='chat-item'+(chat.id===activeChatId?' active':'');
|
| 486 |
+
div.innerHTML=`<span>💬</span><span class="ct">${esc(chat.title||'Chat')}</span>
|
| 487 |
+
<button class="del-btn" onclick="deleteChat('${chat.id}',event)">✕</button>`;
|
| 488 |
+
div.onclick = () => loadChat(chat.id);
|
|
|
|
| 489 |
list.appendChild(div);
|
| 490 |
});
|
| 491 |
}
|
| 492 |
|
|
|
|
| 493 |
function renderWelcome(){
|
| 494 |
+
const t = i18n[currentLang];
|
| 495 |
document.getElementById('topbar-title').textContent='Genisi AI';
|
|
|
|
| 496 |
document.getElementById('chat-area').innerHTML=`
|
| 497 |
<div class="welcome" id="welcome">
|
| 498 |
<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="w-logo" alt="Genisi"/>
|
| 499 |
+
<div class="w-title">${t.welcomeTitle}</div>
|
| 500 |
+
<div class="w-sub">${t.welcomeSub}</div>
|
| 501 |
<div class="chips">
|
| 502 |
+
<div class="chip" onclick="quickSend('${t.c1}')">${t.c1}</div>
|
| 503 |
+
<div class="chip" onclick="quickSend('${t.c2}')">${t.c2}</div>
|
| 504 |
+
<div class="chip" onclick="quickSend('${t.c3}')">${t.c3}</div>
|
| 505 |
+
<div class="chip" onclick="quickSend('${t.c4}')">${t.c4}</div>
|
| 506 |
</div>
|
| 507 |
</div>`;
|
| 508 |
}
|
| 509 |
|
| 510 |
+
function newChat(){ activeChatId=null; pendingFiles=[]; renderFileChips(); document.getElementById('msg-input').value=''; renderWelcome(); renderChatList(); }
|
| 511 |
|
| 512 |
function loadChat(id){
|
| 513 |
activeChatId=id;
|
| 514 |
+
const chat=getChat(id); if(!chat) return;
|
| 515 |
document.getElementById('topbar-title').textContent=chat.title;
|
|
|
|
| 516 |
const area=document.getElementById('chat-area');
|
| 517 |
area.innerHTML='';
|
| 518 |
+
chat.history.forEach((entry, idx)=>{
|
| 519 |
+
appendBubble('user', entry.user, false, entry.uiFiles);
|
| 520 |
+
appendBubble('bot', entry.bot, true);
|
| 521 |
+
// لا نضيف mem-badge لكل رسالة بل نضيف واحدة في النهاية فقط
|
| 522 |
});
|
| 523 |
+
if (chat.history.length) {
|
| 524 |
+
appendMemBadge(chat.history.length, chat.history.length);
|
| 525 |
+
}
|
| 526 |
+
scrollToBottom();
|
| 527 |
renderChatList();
|
| 528 |
}
|
| 529 |
|
| 530 |
function deleteChat(id,e){
|
| 531 |
+
e.stopPropagation(); chats=chats.filter(c=>c.id!==id); saveChats();
|
| 532 |
+
if(activeChatId===id) newChat(); else renderChatList();
|
|
|
|
|
|
|
| 533 |
}
|
| 534 |
+
function clearAllChats(){ chats=[]; saveChats(); newChat(); closeSettings(); }
|
| 535 |
|
| 536 |
+
// ════════ STOP GENERATION ════════
|
| 537 |
+
function stopGeneration() {
|
| 538 |
+
if (currentAbortController) {
|
| 539 |
+
currentAbortController.abort();
|
| 540 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 541 |
}
|
| 542 |
|
| 543 |
+
// ════════ MESSAGING & STREAMING ════════
|
| 544 |
+
function quickSend(text){ document.getElementById('msg-input').value=text; sendMessage(); }
|
| 545 |
+
function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();} }
|
| 546 |
+
function autoResize(el){ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,160)+'px'; }
|
| 547 |
|
|
|
|
| 548 |
async function sendMessage(){
|
| 549 |
if(isGenerating) return;
|
| 550 |
+
const input = document.getElementById('msg-input');
|
| 551 |
+
let text = input.value.trim();
|
| 552 |
+
|
| 553 |
+
if(!text && pendingFiles.length === 0) return;
|
| 554 |
+
|
| 555 |
+
const welcome = document.getElementById('welcome');
|
| 556 |
+
if(welcome) welcome.remove();
|
| 557 |
|
| 558 |
+
input.value=''; input.style.height='auto';
|
|
|
|
|
|
|
|
|
|
| 559 |
|
| 560 |
if(!activeChatId){
|
| 561 |
+
activeChatId = genId();
|
| 562 |
+
const chatTitle = text ? text.slice(0,35)+'...' : (pendingFiles[0] ? pendingFiles[0].name : 'Chat');
|
| 563 |
+
chats.push({id:activeChatId, title:chatTitle, history:[]});
|
| 564 |
+
document.getElementById('topbar-title').textContent=chatTitle;
|
|
|
|
| 565 |
}
|
| 566 |
|
| 567 |
+
const chat = getChat();
|
| 568 |
+
const uiFiles = pendingFiles.map(f => f.name);
|
| 569 |
+
const binaryFiles =[];
|
| 570 |
+
|
| 571 |
+
pendingFiles.forEach(f => {
|
| 572 |
+
if(f.isText) { text += `\n\n\`\`\`${f.name.split('.').pop()}\n// File: ${f.name}\n${f.data}\n\`\`\``; }
|
| 573 |
+
else { binaryFiles.push({ name: f.name, mime_type: f.type, data: f.data }); }
|
| 574 |
});
|
| 575 |
|
| 576 |
+
appendBubble('user', text, false, uiFiles);
|
| 577 |
+
pendingFiles =[]; renderFileChips();
|
| 578 |
+
|
| 579 |
+
isGenerating = true;
|
| 580 |
+
document.getElementById('send-btn').style.display = 'none';
|
| 581 |
+
document.getElementById('stop-btn').style.display = 'flex';
|
| 582 |
+
|
| 583 |
+
const botContentDiv = appendBubble('bot', '', true);
|
| 584 |
+
|
| 585 |
+
const imageTriggers =["ارسم", "صمم", "تخيل", "صورة ل", "draw", "generate", "imagine", "create an image", "تصميم"];
|
| 586 |
+
const isImageRequest = imageTriggers.some(trigger => text.toLowerCase().startsWith(trigger));
|
| 587 |
+
|
| 588 |
+
currentAbortController = new AbortController();
|
| 589 |
+
let fullBotResponse = "";
|
| 590 |
+
|
| 591 |
+
try {
|
| 592 |
+
const response = await fetch('/chat', {
|
| 593 |
+
method: 'POST',
|
| 594 |
+
headers: {'Content-Type':'application/json'},
|
| 595 |
+
body: JSON.stringify({ user_id: userId, message: text, history: chat.history, files: binaryFiles }),
|
| 596 |
+
signal: currentAbortController.signal
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 597 |
});
|
|
|
|
| 598 |
|
| 599 |
+
if(!response.ok) throw new Error("Server Error");
|
|
|
|
|
|
|
| 600 |
|
| 601 |
+
const reader = response.body.getReader();
|
| 602 |
+
const decoder = new TextDecoder("utf-8");
|
| 603 |
|
| 604 |
+
while(true) {
|
| 605 |
+
const { value, done } = await reader.read();
|
| 606 |
if(done) break;
|
| 607 |
+
|
| 608 |
+
const chunk = decoder.decode(value, {stream: true});
|
| 609 |
+
fullBotResponse += chunk;
|
| 610 |
+
|
| 611 |
+
// تحويل الرد إلى HTML آمن
|
| 612 |
+
let safeHtml = safeMarked(fullBotResponse);
|
| 613 |
+
botContentDiv.innerHTML = safeHtml;
|
| 614 |
+
|
| 615 |
+
// إذا كان الطلب لصورة ولم تظهر بعد، أضف skeleton
|
| 616 |
+
if (isImageRequest && !botContentDiv.querySelector('img')) {
|
| 617 |
+
botContentDiv.innerHTML += '<div class="skeleton-img">🎨 جاري التخيل والتصميم...</div>';
|
| 618 |
} else {
|
| 619 |
+
// إذا لم تكن صورة، نضيف مؤشر Gemini فقط
|
| 620 |
+
botContentDiv.innerHTML += '<span class="gemini-cursor"></span>';
|
|
|
|
|
|
|
|
|
|
| 621 |
}
|
| 622 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 623 |
renderKaTeX(botContentDiv);
|
| 624 |
+
scrollToBottom();
|
| 625 |
}
|
|
|
|
|
|
|
| 626 |
|
| 627 |
+
// عند الانتهاء: عرض المحتوى النهائي بدون مؤشر
|
| 628 |
+
let finalHtml = safeMarked(fullBotResponse);
|
| 629 |
+
botContentDiv.innerHTML = finalHtml;
|
| 630 |
+
renderKaTeX(botContentDiv);
|
| 631 |
+
|
| 632 |
+
chat.history.push({ user: text, bot: fullBotResponse, uiFiles: uiFiles });
|
| 633 |
saveChats();
|
| 634 |
+
appendMemBadge(chat.history.length, chat.history.length);
|
| 635 |
|
| 636 |
} catch(err){
|
| 637 |
+
removeGeminiCursor();
|
| 638 |
+
if (err.name === 'AbortError') {
|
| 639 |
+
let finalHtml = safeMarked(fullBotResponse) + `<br><br><span style="color:var(--text3); font-style:italic;">${i18n[currentLang].stopMsg}</span>`;
|
| 640 |
+
botContentDiv.innerHTML = finalHtml;
|
| 641 |
+
renderKaTeX(botContentDiv);
|
| 642 |
+
chat.history.push({ user: text, bot: fullBotResponse + "\n\n*" + i18n[currentLang].stopMsg + "*", uiFiles: uiFiles });
|
|
|
|
| 643 |
saveChats();
|
|
|
|
| 644 |
} else {
|
| 645 |
+
botContentDiv.innerHTML = `<span style="color:var(--danger)">⚠️ ${i18n[currentLang].errConnect}: ${err.message}</span>`;
|
| 646 |
}
|
| 647 |
} finally {
|
| 648 |
+
removeGeminiCursor();
|
| 649 |
+
isGenerating = false;
|
| 650 |
+
document.getElementById('send-btn').style.display = 'flex';
|
| 651 |
+
document.getElementById('stop-btn').style.display = 'none';
|
| 652 |
+
renderChatList();
|
| 653 |
+
scrollToBottom();
|
| 654 |
}
|
| 655 |
}
|
| 656 |
|
| 657 |
+
function appendBubble(role, text, isMarkdown, filesList =[]){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 658 |
const area=document.getElementById('chat-area');
|
| 659 |
+
const row=document.createElement('div'); row.className=`msg-row ${role}`;
|
| 660 |
+
const av=document.createElement('div'); av.className='msg-av';
|
| 661 |
+
|
| 662 |
+
if(role==='bot'){ av.innerHTML=`<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/>`; }
|
| 663 |
+
else { av.textContent='👤'; }
|
| 664 |
+
|
| 665 |
+
const bub=document.createElement('div'); bub.className='bubble';
|
| 666 |
+
|
| 667 |
+
if(filesList && filesList.length > 0) {
|
| 668 |
+
filesList.forEach(name => { bub.innerHTML += `<div class="file-prev">📎 ${esc(name)}</div>`; });
|
| 669 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 670 |
|
| 671 |
+
const contentDiv = document.createElement('div');
|
| 672 |
+
if(text) {
|
| 673 |
+
// استخدام safeMarked للمحتوى Markdown
|
| 674 |
+
contentDiv.innerHTML = isMarkdown ? safeMarked(text) : esc(text).replace(/\n/g, '<br/>');
|
| 675 |
+
if (isMarkdown) renderKaTeX(contentDiv);
|
|
|
|
|
|
|
| 676 |
}
|
| 677 |
bub.appendChild(contentDiv);
|
| 678 |
+
|
| 679 |
+
row.appendChild(av); row.appendChild(bub);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 680 |
area.appendChild(row);
|
| 681 |
+
|
| 682 |
+
// إذا كانت الرسالة من البوت وتحتوي على صور، ننتظر تحميلها ثم نمرر
|
| 683 |
+
if (role === 'bot') {
|
| 684 |
+
const images = bub.querySelectorAll('img');
|
| 685 |
+
if (images.length) {
|
| 686 |
+
Promise.all(Array.from(images).map(img => {
|
| 687 |
+
if (img.complete) return Promise.resolve();
|
| 688 |
+
return new Promise(resolve => { img.onload = resolve; });
|
| 689 |
+
})).then(() => scrollToBottom());
|
| 690 |
+
} else {
|
| 691 |
+
scrollToBottom();
|
| 692 |
+
}
|
| 693 |
+
} else {
|
| 694 |
+
scrollToBottom();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 695 |
}
|
| 696 |
+
|
| 697 |
+
return contentDiv;
|
| 698 |
}
|
| 699 |
|
| 700 |
+
function appendMemBadge(count, total){
|
| 701 |
const area=document.getElementById('chat-area');
|
| 702 |
+
const b=document.createElement('div'); b.className='mem-badge';
|
| 703 |
+
b.innerHTML=`🧠 ${i18n[currentLang].memBadge.replace('{c}', count).replace('{t}', total)}`;
|
| 704 |
+
area.appendChild(b);
|
| 705 |
+
scrollToBottom();
|
| 706 |
}
|
| 707 |
|
| 708 |
+
// ════════ INIT ════════
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 709 |
applyTheme(localStorage.getItem('genisi_theme')||'dark');
|
| 710 |
+
document.getElementById('lang-select').value = currentLang;
|
| 711 |
applyI18n();
|
| 712 |
+
|
| 713 |
+
// التأكد من أن DOMPurify متاح
|
| 714 |
+
if (typeof DOMPurify === 'undefined') {
|
| 715 |
+
console.warn("DOMPurify not loaded - XSS protection disabled");
|
| 716 |
+
}
|
| 717 |
</script>
|
| 718 |
</body>
|
| 719 |
</html>
|