halbot 1995.1.45 → 1995.1.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "halbot",
   "description": "Just another AI powered Telegram bot, which is simple design, easy to use, extendable and fun.",
-  "version": "1995.1.45",
+  "version": "1995.1.47",
   "private": false,
   "homepage": "https://github.com/Leask/halbot",
   "type": "module",

package/web/turn.html

@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HAL9000 Chat</title>
+    <link rel="icon" type="image/svg+xml"
+        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='a' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffeb3b'/%3E%3Cstop offset='20%25' stop-color='%23ff9800'/%3E%3Cstop offset='60%25' stop-color='%23f44336'/%3E%3Cstop offset='100%25' stop-color='%23b71c1c'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23e0e0e0'/%3E%3Cstop offset='50%25' stop-color='%239e9e9e'/%3E%3Cstop offset='100%25' stop-color='%23616161'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23b)' stroke='%23333' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='42' fill='%23111'/%3E%3Ccircle cx='50' cy='50' r='28' fill='url(%23a)' stroke='%23800000' stroke-width='1'/%3E%3Cellipse cx='60' cy='40' rx='10' ry='6' fill='rgba(255,255,255,0.4)' transform='rotate(-45 60 40)'/%3E%3C/svg%3E">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown-light.min.css">
@@ -204,6 +206,33 @@
             font-size: 0.85em;
         }
 
+        .model-info {
+            display: inline;
+            font-size: 0.85em;
+            font-weight: 400;
+            color: #666;
+            margin-left: 6px;
+        }
+
+        @media (max-width: 600px) {
+            .sender-name-inside {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 4px;
+            }
+
+            .message-time {
+                align-self: flex-start;
+                font-size: 0.8em;
+            }
+
+            .model-info {
+                display: block;
+                margin-left: 0;
+                margin-top: 2px;
+            }
+        }
+
 
         .message-bubble {
             padding: 0;
@@ -274,6 +303,23 @@
             background-color: #f6f8fa !important;
             border-radius: 6px !important;
             position: relative !important;
+            overflow: hidden !important;
+            transition: height 0.3s ease;
+            box-sizing: border-box !important;
+        }
+
+        .markdown-body pre .collapse-btn {
+            position: absolute;
+            top: 2px;
+            right: 8px;
+            cursor: pointer;
+            color: #666;
+            font-size: 20px;
+            line-height: 24px;
+            z-index: 10;
+            user-select: none;
+            font-family: monospace;
+            font-weight: bold;
         }
 
         .markdown-body pre[data-language]::before {
@@ -471,7 +517,6 @@
             const group = document.createElement('div');
             group.className = 'message-group';
 
-            // Mapping sender name
             const senderName = /^\p{Extended_Pictographic}/u.test(msg.role)
                 ? msg.role
                 : (msg.role.includes('HAL9000') ? `🤖 ${msg.role}` : `😺 ${msg.role}`);
@@ -484,7 +529,13 @@
             nameDiv.className = 'sender-name-inside';
 
             const nameSpan = document.createElement('span');
-            nameSpan.textContent = senderName;
+            // Split Model Info (Content in parentheses at the end)
+            const match = senderName.match(/^(.*)(\(.*\))$/);
+            if (match) {
+                nameSpan.innerHTML = `<span class="base-name">${match[1].trim()}</span><span class="model-info">${match[2].trim()}</span>`;
+            } else {
+                nameSpan.textContent = senderName;
+            }
 
             const timeSpan = document.createElement('span');
             timeSpan.className = 'message-time';
@@ -524,12 +575,51 @@
                         lang = cls.replace('language-', '');
                     }
                 });
-                if (lang) {
-                    block.parentElement.setAttribute('data-language', lang);
-                }
+                if (!lang) lang = 'TXT'; // Default lang for header
+                block.parentElement.setAttribute('data-language', lang);
+
+                // Collapse Button
+                const pre = block.parentElement;
+                const btn = document.createElement('span');
+                let transitionTimeout;
+
+                btn.className = 'collapse-btn';
+                btn.textContent = '-';
+
+                btn.onclick = (e) => {
+                    e.stopPropagation();
+                    if (transitionTimeout) clearTimeout(transitionTimeout);
+
+                    if (pre.classList.contains('collapsed')) {
+                        // EXPAND
+                        pre.classList.remove('collapsed');
+                        btn.textContent = '-';
+
+                        const fullHeight = pre.scrollHeight;
+                        pre.style.height = '58px'; // Replaced 60px
+                        pre.offsetHeight; // Force reflow
+                        pre.style.height = fullHeight + 'px';
+
+                        transitionTimeout = setTimeout(() => {
+                            if (!pre.classList.contains('collapsed')) {
+                                pre.style.height = 'auto';
+                            }
+                        }, 300);
+
+                    } else {
+                        // COLLAPSE
+                        pre.classList.add('collapsed');
+                        btn.textContent = '+';
+
+                        const fullHeight = pre.offsetHeight;
+                        pre.style.height = fullHeight + 'px';
+                        pre.offsetHeight; // Force reflow
+                        pre.style.height = '58px'; // Replaced 60px
+                    }
+                };
+                pre.appendChild(btn);
 
                 if (block.classList.contains('language-think') || block.classList.contains('language-tools')) {
-                    const pre = block.parentElement;
                     if (block.classList.contains('language-tools')) { pre.classList.add('tools-block'); }
                     else { pre.classList.add('think-block'); }
 
@@ -537,6 +627,11 @@
                     pre.style.wordBreak = 'break-word';
                     block.style.whiteSpace = 'pre-wrap';
                     block.style.wordBreak = 'break-word';
+
+                    // Default Collapse for think/tools
+                    pre.classList.add('collapsed');
+                    pre.style.height = '58px';
+                    btn.textContent = '+';
                 }
             });