backtrace-console 0.0.3 → 0.0.5

package/public/chat-send.js

@@ -0,0 +1,230 @@
+    function sendMessage() {
+      const text = chatInput.value.trim();
+      if ((!text && pendingImages.length === 0) || !currentSessionId) return;
+
+      const turnContainer = document.createElement('div');
+      turnContainer.className = 'turn-container';
+      const userMsg = createMessageElement(text, true);
+      // 在用户消息里追加图片预览
+      if (pendingImages.length > 0) {
+        const msgContent = userMsg.querySelector('.message-content');
+        if (msgContent) {
+          const imgBar = document.createElement('div');
+          imgBar.style.cssText = 'display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.5rem;';
+          pendingImages.forEach(function(img) {
+            const imgEl = document.createElement('img');
+            imgEl.src = img.previewUrl;
+            imgEl.style.cssText = 'max-width:120px;max-height:120px;border-radius:8px;object-fit:cover;border:1px solid rgba(0,0,0,0.1);';
+            imgBar.appendChild(imgEl);
+          });
+          msgContent.appendChild(imgBar);
+        }
+      }
+      turnContainer.appendChild(userMsg);
+      chatContainer.appendChild(turnContainer);
+      chatInput.value = '';
+      chatInput.style.height = 'auto';
+      const imagesToSend = pendingImages.slice();
+      pendingImages = [];
+      renderImagePreviews();
+      sendBtn.disabled = true;
+      scrollToBottom();
+
+      let finalPrompt = text;
+      if (!currentThreadId && currentFingerprintData) {
+        const errorMessage = currentFingerprintData.errorMessage || '-';
+        const classifiers = currentFingerprintData.classifiers || '-';
+        finalPrompt = `你是一个非常专业并资深的C++开发工程师和UE工程师。当前崩溃的关键信息如下：\nError Message: ${errorMessage}\nClassifiers: ${classifiers}\n\n请根据这些信息，回答我的问题：\n${text}`;
+      }
+
+      setComposerStatus('正在处理中，请稍候…');
+      scrollToBottom();
+
+      const agentMsg = createMessageElement('', false);
+      const contentContainer = agentMsg.querySelector('.message-content');
+      const typingIndicatorId = `current-typing-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      contentContainer.innerHTML = `
+        <div class="typing-indicator" id="${typingIndicatorId}">
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+      `;
+      turnContainer.appendChild(agentMsg);
+      scrollToBottom();
+
+      const messageState = {
+        contentContainer,
+        scrollContainer: turnContainer,
+        queue: '',
+        fullText: '',
+        renderedText: '',
+        blocks: [],
+        currentBlockText: '',
+        toolPanelElement: null,
+        phase: 'pre-tool',
+        typingActive: false,
+        typewritingInterval: null
+      };
+
+      fetch('/api/backtrace/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          prompt: finalPrompt,
+          userMessage: text,
+          threadId: currentThreadId,
+          fingerprint: fingerprint,
+          sessionId: currentSessionId,
+          images: imagesToSend.map(function(img) { return { data: img.data, mimeType: img.mimeType }; })
+        })
+      }).then(async response => {
+        if (!response.ok || !response.body) {
+          let errorMessage = `请求失败: ${response.status}`;
+          try {
+            const errorPayload = await response.json();
+            if (errorPayload && (errorPayload.error || errorPayload.message)) {
+              errorMessage = errorPayload.error || errorPayload.message;
+            }
+          } catch (e) {}
+          throw new Error(errorMessage);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let chunkBuffer = '';
+        let typingIndicatorRemoved = false;
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          chunkBuffer += chunk;
+          const lines = chunkBuffer.split('\n');
+          chunkBuffer = lines.pop();
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const dataStr = line.substring(6).trim();
+              if (!dataStr) continue;
+
+              try {
+                const data = JSON.parse(dataStr);
+                if (data.kind === 'agent_text' && data.text !== undefined) {
+                  if (messageState.phase === 'tool') {
+                    if (messageState.currentBlockText && messageState.currentBlockText.trim()) {
+                      messageState.blocks.push(messageState.currentBlockText);
+                    }
+                    messageState.currentBlockText = '';
+                    messageState.fullText = '';
+                    messageState.phase = 'post-tool';
+                  }
+
+                  if (!typingIndicatorRemoved) {
+                    const typingIndicator = document.getElementById(typingIndicatorId);
+                    if (typingIndicator) typingIndicator.remove();
+                    typingIndicatorRemoved = true;
+                  }
+                  if (!messageState.typingActive) {
+                    startTypewriter(messageState);
+                  }
+                  setComposerStatus('正在整理最终答案…');
+
+                  if (data.replace) {
+                    const newText = data.text;
+                    if (newText.startsWith(messageState.fullText)) {
+                      const delta = newText.substring(messageState.fullText.length);
+                      messageState.fullText = newText;
+                      messageState.queue += delta;
+                    } else {
+                      if (messageState.currentBlockText && messageState.currentBlockText.trim()) {
+                        messageState.blocks.push(messageState.currentBlockText);
+                      }
+                      messageState.currentBlockText = newText;
+                      messageState.fullText = newText;
+                      if (!messageState.typingActive) {
+                        messageState.renderedText = messageState.blocks.length > 0
+                          ? messageState.blocks.join('\n\n') + '\n\n' + newText
+                          : newText;
+                      }
+                      messageState.queue = '';
+                      rerenderFullMessage(messageState);
+                    }
+                  } else {
+                    messageState.fullText += data.text;
+                    messageState.queue += data.text;
+                  }
+                } else if (data.kind && data.kind.startsWith('tool_')) {
+                  messageState.phase = 'tool';
+                  if (!typingIndicatorRemoved) {
+                    const typingIndicator = document.getElementById(typingIndicatorId);
+                    if (typingIndicator) typingIndicator.remove();
+                    typingIndicatorRemoved = true;
+                    stopTypewriter(messageState);
+                  }
+                  setComposerStatus(data.kind === 'tool_call_completed' ? '工具已完成，正在整理结果…' : '正在调用工具并等待结果…');
+                  const normalizedToolName = data.toolName || data.itemType || data.text || 'tool';
+                  const payload = {
+                    ...data,
+                    toolName: normalizedToolName,
+                    output: data.output || data.text || '',
+                    result: data.result || data.text || ''
+                  };
+
+                  if (!messageState.toolPanelElement) {
+                    messageState.toolPanelElement = createToolMessageElement(data.kind, payload);
+                    turnContainer.appendChild(messageState.toolPanelElement);
+                  } else {
+                    updateToolMessageElement(messageState.toolPanelElement, data.kind, payload);
+                  }
+                  scrollToBottom();
+                } else if (data.kind === 'done') {
+                  if (data.threadId) {
+                    currentThreadId = data.threadId;
+                  }
+                  clearComposerStatus();
+                  if (!typingIndicatorRemoved) {
+                    const typingIndicator = document.getElementById(typingIndicatorId);
+                    if (typingIndicator) typingIndicator.remove();
+                    typingIndicatorRemoved = true;
+                  }
+                  if (messageState.queue.length === 0) {
+                    stopTypewriter(messageState);
+                    rerenderFullMessage(messageState);
+                  }
+                }
+              } catch (e) {
+                console.error('SSE JSON 解析错误:', e, '数据:', dataStr);
+              }
+            } else if (line.startsWith('event: error')) {
+              console.error('SSE Error Event:', line);
+            }
+          }
+        }
+
+        const waitInterval = setInterval(() => {
+          if (messageState.queue.length === 0) {
+            clearInterval(waitInterval);
+            stopTypewriter(messageState);
+          }
+        }, 50);
+      }).catch(err => {
+        clearComposerStatus();
+        const typingIndicator = document.getElementById(typingIndicatorId);
+        if (typingIndicator) {
+          typingIndicator.remove();
+        }
+        stopTypewriter(messageState);
+        setMessageContent(contentContainer, `请求发生错误: ${err.message}`);
+      });
+    }
+
+    function scrollToBottom() {
+      chatContainer.scrollTo({
+        top: chatContainer.scrollHeight,
+        behavior: 'smooth'
+      });
+    }

package/public/chat.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent Chat Console</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/chat-layout.css">
+  <link rel="stylesheet" href="/chat-components.css">
+</head>
+<body>
+
+  <!-- 左侧边栏 -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      Agent Console
+    </div>
+    <button class="new-chat-btn" onclick="createNewSession()">
+      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+      新对话
+    </button>
+    <div id="session-list" class="session-list"></div>
+  </aside>
+
+  <!-- 右侧主区域 -->
+  <main class="main-content">
+    <header class="header">
+      <h2>AI 研发助手</h2>
+      <a href="/" class="back-link">← 返回控制台</a>
+    </header>
+
+    <!-- 聊天记录区 -->
+    <div class="chat-container" id="chat-container"></div>
+
+    <!-- 输入区 -->
+    <div class="input-container">
+      <div class="composer-status" id="composer-status"></div>
+      <div class="input-box">
+        <input type="file" id="image-input" accept="image/*" multiple style="display:none">
+        <button id="image-btn" class="image-btn" type="button" title="发送图片">
+          <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+        </button>
+        <div style="flex:1; display:flex; flex-direction:column; min-width:0;">
+          <div id="image-preview-bar" style="display:none; flex-wrap:wrap; gap:0.4rem; padding:0.4rem 0.5rem 0;"></div>
+          <textarea id="chat-input" placeholder="输入你想问的问题..." rows="1"></textarea>
+        </div>
+        <button id="send-btn" class="send-btn">
+          <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+        </button>
+      </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- 最右侧信息面板 -->
+  <aside class="info-panel" id="info-panel" style="display: none;">
+    <div class="info-panel-header">Fingerprint 详情</div>
+    <div id="info-panel-content">
+      <div style="text-align: center; color: var(--text-muted); margin-top: 2rem;">加载中...</div>
+    </div>
+  </aside>
+
+  <script src="/chat-core.js"></script>
+  <script src="/chat-render.js"></script>
+  <script src="/chat-send.js"></script>
+</body>
+</html>