fix: 历史消息显示图片/文件占位符

main_v2.py

@@ -969,7 +969,8 @@ async def websocket_endpoint(websocket: WebSocket, user_id: str):
                             messages=history,
                             provider_config=agent_config['provider'],
                             agent_config=agent_config['agent'],
-                            enable_thinking=enable_thinking
+                            enable_thinking=enable_thinking,
+                            images=image_contents  # 传递图片数据给多模态模型
                         )
                         
                         logger.info(f"LLM响应: response长度={len(response)}, thinking长度={len(thinking_content) if thinking_content else 0}")

services/llm_service.py

@@ -98,11 +98,19 @@ class LLMService:
         messages: List[Dict],
         provider_config: dict,
         agent_config: dict,
-        enable_thinking: bool = True
+        enable_thinking: bool = True,
+        images: List[Dict] = None  # 图片数据列表 [{'name', 'type', 'data': base64}]
     ) -> Tuple[str, Optional[str]]:
         """
         调用AI模型进行对话
         
+        Args:
+            messages: 对话历史
+            provider_config: LLM Provider配置
+            agent_config: Agent配置
+            enable_thinking: 是否启用思考
+            images: 图片数据列表（用于多模态模型）
+        
         Returns:
             Tuple[str, Optional[str]]: (回复内容, 思考过程)
         """
@@ -123,6 +131,22 @@ class LLMService:
         if final_messages and final_messages[0]['role'] != 'system':
             final_messages.insert(0, {"role": "system", "content": system_prompt})
         
+        # 如果有图片，构建多模态消息（只修改最后一条用户消息）
+        if images and len(images) > 0:
+            # 找到最后一条用户消息
+            for i in range(len(final_messages) - 1, -1, -1):
+                if final_messages[i]['role'] == 'user':
+                    original_text = final_messages[i]['content']
+                    # 构建多模态内容
+                    multimodal_content = [{"type": "text", "text": original_text if original_text else "请描述这张图片"}]
+                    for img in images:
+                        multimodal_content.append({
+                            "type": "image_url",
+                            "image_url": {"url": img['data']}  # base64 data URL
+                        })
+                    final_messages[i]['content'] = multimodal_content
+                    break
+        
         thinking_content = None
         
         # 处理思考功能
@@ -208,7 +232,7 @@ class LLMService:
         temperature: float = 0.7
     ) -> str:
         """调用API"""
-        url = f"{api_base}/chat/completions"
+        url = f"{api_base.rstrip('/')}/chat/completions"
         headers = {
             "Authorization": f"Bearer {api_key}",
             "Content-Type": "application/json"
@@ -220,13 +244,33 @@ class LLMService:
             "max_tokens": max_tokens
         }
         
+        # 打印请求详情（调试）
         logger.info(f"调用LLM: url={url}, model={model}")
+        logger.info(f"消息数量: {len(messages)}, 第一条消息类型: {type(messages[0].get('content'))}")
         
-        async with httpx.AsyncClient(timeout=60.0) as client:
-            response = await client.post(url, headers=headers, json=payload)
-            response.raise_for_status()
-            data = response.json()
-            return data['choices'][0]['message']['content']
+        try:
+            async with httpx.AsyncClient(timeout=60.0) as client:
+                response = await client.post(url, headers=headers, json=payload)
+                
+                # 检查HTTP状态
+                if response.status_code != 200:
+                    logger.error(f"API返回错误: status={response.status_code}, body={response.text[:500]}")
+                    response.raise_for_status()
+                
+                data = response.json()
+                
+                # 检查响应格式
+                if 'choices' not in data or len(data['choices']) == 0:
+                    logger.error(f"API响应格式错误: {data}")
+                    raise ValueError("API响应格式错误：缺少choices")
+                
+                return data['choices'][0]['message']['content']
+        except httpx.HTTPStatusError as e:
+            logger.error(f"HTTP错误: {e.response.status_code}, {e.response.text}")
+            raise
+        except Exception as e:
+            logger.error(f"API调用异常: {type(e).__name__}: {e}")
+            raise
     
     async def chat_stream(
         self,

templates/index.html

@@ -146,6 +146,17 @@
         .modal-buttons { display: flex; gap: 12px; justify-content: flex-end; }
         .modal-buttons button { padding: 8px 16px; border-radius: 8px; cursor: pointer; }
         
+        /* 图片放大弹窗 */
+        .image-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
+        .image-lightbox.show { display: flex; }
+        .image-lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 0 30px rgba(255,255,255,0.2); }
+        .image-lightbox-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: pointer; transition: background 0.2s; }
+        .image-lightbox-close:hover { background: rgba(255,255,255,0.3); }
+        
+        /* 对话中的图片可点击 */
+        .uploaded-image img { cursor: zoom-in; transition: transform 0.2s; }
+        .uploaded-image img:hover { transform: scale(1.02); }
+        
         .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666; }
         .welcome h2 { font-size: 28px; margin-bottom: 16px; color: #333; }
         
@@ -211,6 +222,12 @@
         </div>
     </div>
 
+    <!-- 图片放大弹窗 -->
+    <div class="image-lightbox" id="imageLightbox" onclick="closeImageLightbox()">
+        <div class="image-lightbox-close"><i class="ri-close-line"></i></div>
+        <img id="lightboxImage" src="" alt="放大图片">
+    </div>
+
     <!-- Markdown渲染库 -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
@@ -393,19 +410,43 @@
             html += '</div>';
             div.innerHTML = html;
             
-            // 如果是用户消息且有搜索结果，在设置innerHTML后追加
+            // 如果是用户消息且有额外数据（搜索结果、图片、文件），在设置innerHTML后追加
             if (role === 'user' && extraData) {
                 console.log('Processing extraData for user message:', extraData);
-                console.log('search_results exists:', extraData.search_results);
+                const bodyDiv = div.querySelector('.message-body');
+                
+                // 处理图片
+                if (extraData.images && extraData.images.length > 0) {
+                    let imagesHtml = '<div class="history-images" style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;">';
+                    for (const img of extraData.images) {
+                        // 历史记录只有图片元信息，显示占位符
+                        imagesHtml += `<div class="history-image-placeholder" style="padding:8px 12px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;gap:6px;font-size:13px;color:#666;">
+                            <i class="ri-image-line" style="color:#10a37f;"></i>
+                            <span>${escapeHtml(img.name || '图片')}</span>
+                        </div>`;
+                    }
+                    imagesHtml += '</div>';
+                    if (bodyDiv) bodyDiv.insertAdjacentHTML('beforeend', imagesHtml);
+                }
+                
+                // 处理文本文件
+                if (extraData.files && extraData.files.length > 0) {
+                    let filesHtml = '<div class="history-files" style="margin-top:8px;">';
+                    for (const f of extraData.files) {
+                        filesHtml += `<div class="history-file-placeholder" style="padding:6px 10px;background:#f5f5f5;border-radius:6px;margin-bottom:4px;display:flex;align-items:center;gap:6px;font-size:12px;color:#666;">
+                            <i class="ri-file-text-line" style="color:#10a37f;"></i>
+                            <span>${escapeHtml(f.name || '文件')}</span>
+                        </div>`;
+                    }
+                    filesHtml += '</div>';
+                    if (bodyDiv) bodyDiv.insertAdjacentHTML('beforeend', filesHtml);
+                }
+                
+                // 处理搜索结果
                 if (extraData.search_results && extraData.search_results.length > 0) {
                     console.log('Building search results HTML for', extraData.search_results.length, 'results');
                     const searchHtml = buildSearchResultsHtml(extraData.search_results, extraData.search_query || content);
-                    const bodyDiv = div.querySelector('.message-body');
-                    console.log('bodyDiv found:', bodyDiv != null);
-                    if (bodyDiv) {
-                        bodyDiv.insertAdjacentHTML('beforeend', searchHtml);
-                        console.log('Search results HTML inserted');
-                    }
+                    if (bodyDiv) bodyDiv.insertAdjacentHTML('beforeend', searchHtml);
                 }
             }
             
@@ -858,7 +899,7 @@
                 for (const f of files) {
                     if (f.type.startsWith('image/')) {
                         // 图片直接显示
-                        html += `<div class="uploaded-image" style="margin-bottom:8px"><img src="${f.content}" style="max-width:300px;border-radius:8px"></div>`;
+                        html += `<div class="uploaded-image" style="margin-bottom:8px"><img src="${f.content}" style="max-width:300px;border-radius:8px" onclick="openImageLightbox('${f.content}')"></div>`;
                     } else {
                         // 文本文件显示名称和内容摘要
                         html += `<div class="uploaded-file" style="padding:8px;background:#f5f5f5;border-radius:6px;margin-bottom:8px">`;
@@ -1014,6 +1055,26 @@
         }
         
         document.getElementById('newPhraseInput').addEventListener('keydown', e => { if (e.key === 'Enter') addPhrase(); if (e.key === 'Escape') hidePhraseModal(); });
+        
+        // 图片放大弹窗
+        function openImageLightbox(imageSrc) {
+            const lightbox = document.getElementById('imageLightbox');
+            const lightboxImg = document.getElementById('lightboxImage');
+            lightboxImg.src = imageSrc;
+            lightbox.classList.add('show');
+        }
+        
+        function closeImageLightbox() {
+            const lightbox = document.getElementById('imageLightbox');
+            lightbox.classList.remove('show');
+        }
+        
+        // ESC键关闭图片弹窗
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape') {
+                closeImageLightbox();
+            }
+        });
     </script>
 </body>
 </html>