Update static/style.css
Browse files- static/style.css +719 -12
static/style.css
CHANGED
|
@@ -1,12 +1,719 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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">
|
| 252 |
+
<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
|
| 253 |
+
<span class="s-logo-name">Genisi AI</span>
|
| 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 |
+
|
| 265 |
+
<main class="main">
|
| 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>
|
| 293 |
+
<button class="m-close" onclick="closeSettings()">โ</button>
|
| 294 |
+
</div>
|
| 295 |
+
<div class="s-row">
|
| 296 |
+
<div class="s-lbl" id="i18n-lang-lbl">Language</div>
|
| 297 |
+
<select id="lang-select" class="s-input" onchange="changeLanguage(this.value)">
|
| 298 |
+
<option value="en">English</option>
|
| 299 |
+
<option value="ar">ุงูุนุฑุจูุฉ</option>
|
| 300 |
+
<option value="fr">Franรงais</option>
|
| 301 |
+
<option value="es">Espaรฑol</option>
|
| 302 |
+
</select>
|
| 303 |
+
</div>
|
| 304 |
+
<div class="s-row">
|
| 305 |
+
<div class="s-lbl" id="i18n-dark-lbl">Dark Mode</div>
|
| 306 |
+
<label class="toggle">
|
| 307 |
+
<input type="checkbox" id="dark-toggle" onchange="applyThemeToggle()"/>
|
| 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>
|
| 314 |
+
<div class="s-desc" id="i18n-del-desc">This action cannot be undone</div>
|
| 315 |
+
</div>
|
| 316 |
+
<button class="btn-danger" onclick="clearAllChats()" id="i18n-del-btn">๐ Delete</button>
|
| 317 |
+
</div>
|
| 318 |
+
<button class="btn-save" onclick="closeSettings()" id="i18n-save-btn">๐พ Close</button>
|
| 319 |
+
</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>
|