halbot 1995.1.44 → 1995.1.46

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.44",
+  "version": "1995.1.46",
   "private": false,
   "homepage": "https://github.com/Leask/halbot",
   "type": "module",

package/web/turn.html

@@ -204,6 +204,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;
@@ -231,6 +258,17 @@
             color: #333;
         }
 
+        /* Think & Tools Block Auto-Wrap */
+        .markdown-body pre.think-block,
+        .markdown-body pre.think-block code,
+        .markdown-body pre.tools-block,
+        .markdown-body pre.tools-block code {
+            white-space: pre-wrap !important;
+            word-wrap: break-word !important;
+            overflow-wrap: break-word !important;
+            word-break: break-word !important;
+        }
+
         /* Markdown Styles */
         /* Markdown Overrides */
         .markdown-body {
@@ -263,6 +301,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 {
@@ -460,7 +515,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}`);
@@ -473,7 +527,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';
@@ -499,8 +559,8 @@
 
             // Highlight Code
             contentDiv.querySelectorAll('pre code').forEach((block) => {
-                // Trim think block content
-                if (block.classList.contains('language-think')) {
+                // Trim think/tools block content
+                if (block.classList.contains('language-think') || block.classList.contains('language-tools')) {
                     block.textContent = block.textContent.trim();
                 }
 
@@ -513,13 +573,54 @@
                         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 = '60px'; // Replaced 42px
+                        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 = '60px'; // Replaced 42px
+                    }
+                };
+                pre.appendChild(btn);
+
+                if (block.classList.contains('language-think') || block.classList.contains('language-tools')) {
+                    if (block.classList.contains('language-tools')) { pre.classList.add('tools-block'); }
+                    else { pre.classList.add('think-block'); }
 
-                if (block.classList.contains('language-think')) {
-                    const pre = block.parentElement;
-                    pre.classList.add('think-block');
                     pre.style.whiteSpace = 'pre-wrap';
                     pre.style.wordBreak = 'break-word';
                     block.style.whiteSpace = 'pre-wrap';