fix: 改进聊天页面显示

Author: yefansky

package-lock.json

@@ -414,6 +414,7 @@
     "cheerio": "^1.0.0",
     "exceljs": "^4.4.0",
     "execa": "^9.5.2",
+    "formdata-node": "^6.0.3",
     "iconv-lite": "^0.6.3",
     "jschardet": "^3.1.4",
     "jsdom": "^26.1.0",

package.json

@@ -164,12 +164,53 @@ button {
 }
 
 think {
-    color: #9ccc9c;  /* 柔和的绿色 */
+    color: #9ccc9c;
     font-style: italic;
     opacity: 0.8;
-    border-left: 3px solid #4d9375; /* 左侧装饰线 */
+    border-left: 3px solid #4d9375;
     padding-left: 0.8em;
     margin: 0.5em 0;
-    display: block;  /* 确保块级显示 */
+    display: block;
     white-space: pre-wrap;
+}
+
+tool_call {
+    display: block;
+    background: rgba(20, 20, 30, 0.95);
+    border: 1px solid #00b7b7;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 12px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #ffffff;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+tool_call::before {
+    content: '🔧 Tool Call';
+    display: block;
+    font-size: 13px;
+    font-weight: bold;
+    color: #ffffff;
+    background: #00b7b7;
+    padding: 6px 10px;
+    border-radius: 6px 6px 0 0;
+    margin: -16px -16px 12px -16px;
+    border-bottom: 1px solid #00b7b7;
+}
+
+tool_call:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 183, 183, 0.3);
+}
+
+tool_call code {
+    background: rgba(255, 255, 255, 0.15);
+    padding: 2px 5px;
+    border-radius: 3px;
+    color: #00b7b7;
 }

src/resources/chatPanel.css

@@ -147,6 +147,78 @@ function ensureCopyButtons() {
     });
 }
 
+function ensureTagPreProcess(content) {
+    let processedContent = content;
+
+    // Handle unclosed <think> tags
+    if (processedContent.includes('<think>') && !processedContent.includes('</think>')) {
+        processedContent += '</think>';
+    }
+
+    // Handle <tool_call> tags
+    const lastToolCallIndex = processedContent.lastIndexOf('<tool_call>');
+    if (lastToolCallIndex !== -1) {
+        // Check if there's a </tool_call> after the last <tool_call>
+        const contentAfterLastToolCall = processedContent.slice(lastToolCallIndex);
+        if (!contentAfterLastToolCall.includes('</tool_call>')) {
+            processedContent += '</tool_call>';
+        }
+    }
+
+    return processedContent;
+}
+
+function processMathBlocks(input) {
+    // Regex to match %%...%% blocks
+    const percentPairRegex = /%%([\s\S]*?)%%/g;
+    
+    // Process the input string
+    return input.replace(percentPairRegex, (percentMatch, percentContent) => {
+        // Regex to match $$...$$ blocks within %% content
+        const mathBlockRegex = /\$\$([\s\S]*?)\$\$/g;
+        
+        // Process $$...$$ blocks within the %% content
+        const processedContent = percentContent.replace(mathBlockRegex, (mathMatch, mathContent) => {
+            // Trim and check if the math content has newlines
+            const trimmedContent = mathContent.trim();
+            if (!trimmedContent.includes('\n')) {
+                // No newlines, return unchanged
+                return `$$${trimmedContent}$$`;
+            }
+            
+            // Replace newlines with \\ and wrap in aligned
+            const singleLineContent = trimmedContent
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => line.length > 0)
+                .join(' \\\\ ');
+                
+            return `$$ \\begin{aligned} ${singleLineContent} \\end{aligned} $$`;
+        });
+        
+        // Return the processed %% block
+        return `%%${processedContent}%%`;
+    });
+}
+
+function separateThinkContent(input) {
+    // Initialize outputs
+    let thinkStr = '';
+    let answerStr = input;
+
+    // Regex to match <think>...</think> (non-greedy)
+    const thinkRegex = /<think>([\s\S]*?)<\/think>/;
+
+    // Find the first <think>...</think> match
+    const match = input.match(thinkRegex);
+    if (match) {
+        thinkStr = match[0]; // Full <think>...</think> content
+        answerStr = input.replace(thinkRegex, ''); // Remove <think>...</think>
+    }
+
+    return { thinkStr, answerStr };
+}
+
 // 渲染消息
 async function renderMessage(role, content, index) {
     const lastChild = chat.lastElementChild;
@@ -164,14 +236,16 @@ async function renderMessage(role, content, index) {
 
     if (role === 'model') {
         let markdownContent = targetDiv.dataset.markdownContent;
-
-        if (markdownContent.includes('<think>') && !markdownContent.includes('</think>')){
-            markdownContent += "</think>";
-        }
+        markdownContent = ensureTagPreProcess(markdownContent);
 
         markdownContent = markdownContent.replace(/\$\$包裹/g, '&doller; &doller; 包裹');
 
-        targetDiv.innerHTML = marked.parse(markdownContent, {
+        markdownContent = processMathBlocks(markdownContent);
+
+        const { thinkStr, answerStr } = separateThinkContent(markdownContent);
+        markdownContent = answerStr;
+
+        targetDiv.innerHTML = thinkStr + marked.parse(markdownContent, {
             breaks: false,
             mangle: false,
             headerIds: false,