Spaces:
Runtime error
Runtime error
mac commited on
Commit ·
491cbd7
1
Parent(s): d70f24f
update rewritten ui: flagging think or nothink
Browse files- index.html +59 -3
index.html
CHANGED
|
@@ -164,6 +164,47 @@
|
|
| 164 |
overflow-x: auto;
|
| 165 |
}
|
| 166 |
.bot-message code { color: #4f46e5; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 167 |
</style>
|
| 168 |
</head>
|
| 169 |
<body>
|
|
@@ -178,9 +219,9 @@
|
|
| 178 |
</div>
|
| 179 |
</div>
|
| 180 |
<div class="flex items-center gap-4">
|
| 181 |
-
<div
|
| 182 |
-
<span class="
|
| 183 |
-
|
| 184 |
</div>
|
| 185 |
<button id="toggle-settings" class="p-2 rounded-xl hover:bg-slate-100 text-slate-500 hover:text-slate-800 transition-all">
|
| 186 |
<i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
|
|
@@ -271,6 +312,16 @@
|
|
| 271 |
let isSettingsOpen = false;
|
| 272 |
|
| 273 |
const THINK_CLOSE = '</think>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 274 |
|
| 275 |
async function init() {
|
| 276 |
try {
|
|
@@ -445,12 +496,17 @@
|
|
| 445 |
if (chatHistory.length > 0) {
|
| 446 |
if (confirm("Changing Thinking mode will clear conversation history. Continue?")) {
|
| 447 |
clearHistory();
|
|
|
|
| 448 |
} else {
|
| 449 |
thinkingToggle.classList.toggle('active');
|
| 450 |
}
|
|
|
|
|
|
|
| 451 |
}
|
| 452 |
};
|
| 453 |
|
|
|
|
|
|
|
| 454 |
tempSlider.oninput = () => document.getElementById('temp-val').textContent = tempSlider.value;
|
| 455 |
pSlider.oninput = () => document.getElementById('p-val').textContent = pSlider.value;
|
| 456 |
|
|
|
|
| 164 |
overflow-x: auto;
|
| 165 |
}
|
| 166 |
.bot-message code { color: #4f46e5; }
|
| 167 |
+
|
| 168 |
+
.thinking-status-badge {
|
| 169 |
+
display: flex;
|
| 170 |
+
align-items: center;
|
| 171 |
+
gap: 6px;
|
| 172 |
+
font-size: 10px;
|
| 173 |
+
font-weight: 700;
|
| 174 |
+
letter-spacing: 0.12em;
|
| 175 |
+
padding: 6px 14px;
|
| 176 |
+
border-radius: 100px;
|
| 177 |
+
border: 1px solid;
|
| 178 |
+
transition: all 0.25s ease;
|
| 179 |
+
}
|
| 180 |
+
.thinking-status-badge.thinking-on {
|
| 181 |
+
color: #15803d;
|
| 182 |
+
background: #f0fdf4;
|
| 183 |
+
border-color: #bbf7d0;
|
| 184 |
+
}
|
| 185 |
+
.thinking-status-badge.thinking-on .status-dot {
|
| 186 |
+
background: #22c55e;
|
| 187 |
+
animation: pulse-dot 2s infinite;
|
| 188 |
+
}
|
| 189 |
+
.thinking-status-badge.thinking-off {
|
| 190 |
+
color: #64748b;
|
| 191 |
+
background: #f1f5f9;
|
| 192 |
+
border-color: #e2e8f0;
|
| 193 |
+
}
|
| 194 |
+
.thinking-status-badge.thinking-off .status-dot {
|
| 195 |
+
background: #94a3b8;
|
| 196 |
+
animation: none;
|
| 197 |
+
}
|
| 198 |
+
.thinking-status-badge .status-dot {
|
| 199 |
+
width: 6px;
|
| 200 |
+
height: 6px;
|
| 201 |
+
border-radius: 50%;
|
| 202 |
+
flex-shrink: 0;
|
| 203 |
+
}
|
| 204 |
+
@keyframes pulse-dot {
|
| 205 |
+
0%, 100% { opacity: 1; }
|
| 206 |
+
50% { opacity: 0.45; }
|
| 207 |
+
}
|
| 208 |
</style>
|
| 209 |
</head>
|
| 210 |
<body>
|
|
|
|
| 219 |
</div>
|
| 220 |
</div>
|
| 221 |
<div class="flex items-center gap-4">
|
| 222 |
+
<div id="thinking-status-badge" class="thinking-status-badge thinking-on" title="Thinking mode for next message">
|
| 223 |
+
<span class="status-dot"></span>
|
| 224 |
+
<span id="thinking-status-label">THINKING</span>
|
| 225 |
</div>
|
| 226 |
<button id="toggle-settings" class="p-2 rounded-xl hover:bg-slate-100 text-slate-500 hover:text-slate-800 transition-all">
|
| 227 |
<i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
|
|
|
|
| 312 |
let isSettingsOpen = false;
|
| 313 |
|
| 314 |
const THINK_CLOSE = '</think>';
|
| 315 |
+
const thinkingStatusBadge = document.getElementById('thinking-status-badge');
|
| 316 |
+
const thinkingStatusLabel = document.getElementById('thinking-status-label');
|
| 317 |
+
|
| 318 |
+
function updateThinkingStatusBadge() {
|
| 319 |
+
const on = thinkingToggle.classList.contains('active');
|
| 320 |
+
thinkingStatusBadge.classList.toggle('thinking-on', on);
|
| 321 |
+
thinkingStatusBadge.classList.toggle('thinking-off', !on);
|
| 322 |
+
thinkingStatusLabel.textContent = on ? 'THINKING' : 'NOTHINK';
|
| 323 |
+
thinkingStatusBadge.title = on ? 'Thinking enabled for next message' : 'Thinking disabled for next message';
|
| 324 |
+
}
|
| 325 |
|
| 326 |
async function init() {
|
| 327 |
try {
|
|
|
|
| 496 |
if (chatHistory.length > 0) {
|
| 497 |
if (confirm("Changing Thinking mode will clear conversation history. Continue?")) {
|
| 498 |
clearHistory();
|
| 499 |
+
updateThinkingStatusBadge();
|
| 500 |
} else {
|
| 501 |
thinkingToggle.classList.toggle('active');
|
| 502 |
}
|
| 503 |
+
} else {
|
| 504 |
+
updateThinkingStatusBadge();
|
| 505 |
}
|
| 506 |
};
|
| 507 |
|
| 508 |
+
updateThinkingStatusBadge();
|
| 509 |
+
|
| 510 |
tempSlider.oninput = () => document.getElementById('temp-val').textContent = tempSlider.value;
|
| 511 |
pSlider.oninput = () => document.getElementById('p-val').textContent = pSlider.value;
|
| 512 |
|