backtrace-console 0.0.1 → 0.0.2

package/public/chat-layout.css

@@ -0,0 +1,290 @@
+    :root {
+      --bg-color: #f7f7f8;
+      --chat-bg: #ffffff;
+      --text-main: #374151;
+      --text-muted: #6b7280;
+      --accent-color: #10a37f;
+      --accent-hover: #0d8c6d;
+      --border-color: #e5e7eb;
+      --user-msg-bg: #f3f4f6;
+      --agent-msg-bg: #ffffff;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      display: flex;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* 侧边栏 (可选) */
+    .sidebar {
+      width: 280px;
+      background: linear-gradient(180deg, #1d1f24 0%, #17181c 100%);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      border-right: 1px solid rgba(255,255,255,0.06);
+    }
+
+    .sidebar-header {
+      font-weight: 700;
+      font-size: 1.05rem;
+      margin-bottom: 1.25rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      letter-spacing: 0.02em;
+    }
+
+    .new-chat-btn {
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.12);
+      color: white;
+      padding: 0.85rem 0.9rem;
+      border-radius: 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      transition: background 0.2s, border-color 0.2s, transform 0.2s;
+      font-weight: 600;
+    }
+
+    .new-chat-btn:hover {
+      background-color: rgba(255,255,255,0.08);
+      border-color: rgba(255,255,255,0.2);
+      transform: translateY(-1px);
+    }
+
+    .session-list {
+      margin-top: 1rem;
+      overflow-y: auto;
+      flex: 1;
+      padding-right: 0.25rem;
+    }
+
+    .session-empty {
+      color: #9ca3af;
+      font-size: 0.9rem;
+      margin-top: 1rem;
+      line-height: 1.6;
+    }
+
+    .session-item {
+      width: 100%;
+      text-align: left;
+      background: transparent;
+      color: white;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 10px;
+      padding: 0.85rem 0.9rem;
+      margin-top: 0.6rem;
+      cursor: pointer;
+      transition: background 0.2s, border-color 0.2s, transform 0.2s;
+    }
+
+    .session-item:hover {
+      background: rgba(255,255,255,0.06);
+      border-color: rgba(255,255,255,0.14);
+      transform: translateY(-1px);
+    }
+
+    .session-item.active {
+      background: rgba(16,163,127,0.16);
+      border-color: rgba(16,163,127,0.55);
+      box-shadow: inset 0 0 0 1px rgba(16,163,127,0.25);
+      position: relative;
+    }
+
+    .session-item.active::before {
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: 10px;
+      bottom: 10px;
+      width: 4px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, #34d399 0%, #10a37f 100%);
+    }
+
+    .session-title {
+      font-size: 0.92rem;
+      font-weight: 600;
+      line-height: 1.45;
+      color: #f3f4f6;
+    }
+
+    .session-time {
+      font-size: 0.76rem;
+      color: #9ca3af;
+      margin-top: 0.35rem;
+    }
+
+    /* 右侧信息面板 */
+    .info-panel {
+      width: 320px;
+      background-color: var(--chat-bg);
+      border-left: 1px solid var(--border-color);
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      overflow-y: auto;
+    }
+
+    .info-panel-header {
+      font-weight: 700;
+      font-size: 1.1rem;
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--border-color);
+      color: var(--text-main);
+    }
+
+    .info-item {
+      margin-bottom: 1rem;
+    }
+
+    .info-label {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-bottom: 0.25rem;
+    }
+
+    .info-value {
+      font-size: 0.95rem;
+      color: var(--text-main);
+      word-break: break-all;
+    }
+
+    .info-value.error-message {
+      font-family: monospace;
+      background: var(--bg-color);
+      padding: 0.5rem;
+      border-radius: 4px;
+      font-size: 0.85rem;
+    }
+
+    /* 聊天主区域 */
+    .main-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+
+    .header {
+      padding: 1rem 2rem;
+      background: var(--chat-bg);
+      border-bottom: 1px solid var(--border-color);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .header h2 {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+
+    .back-link {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 0.9rem;
+    }
+
+    .back-link:hover {
+      color: var(--accent-color);
+    }
+
+    .chat-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 2rem 0 2.5rem;
+      scroll-behavior: smooth;
+      background:
+        radial-gradient(circle at top, rgba(16,163,127,0.05), transparent 28%),
+        linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
+    }
+
+    .turn-container {
+      max-width: 980px;
+      margin: 0 auto 1.25rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      width: calc(100% - 4rem);
+    }
+
+    .turn-container > .message {
+      margin-bottom: 0;
+      max-width: none;
+      width: auto;
+      padding: 0;
+    }
+
+
+    .message.user {
+      flex-direction: row-reverse;
+    }
+
+    .message.agent {
+      background-color: transparent;
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 0.8rem;
+      color: white;
+      flex-shrink: 0;
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+    }
+
+    .user .avatar {
+      background: linear-gradient(135deg, #6d4aff 0%, #5436da 100%);
+    }
+
+    .agent .avatar {
+      background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
+    }
+
+    .message-content {
+      flex: 1;
+      line-height: 1.72;
+      font-size: 0.98rem;
+      padding: 1rem 1.1rem;
+      border-radius: 16px;
+      border: 1px solid rgba(15, 23, 42, 0.06);
+      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+      background: rgba(255,255,255,0.98);
+      color: var(--text-main);
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .message.user .message-content {
+      background: linear-gradient(180deg, #f7f7ff 0%, #eef0ff 100%);
+      border-color: rgba(84,54,218,0.16);
+    }
+
+    .agent-block {
+      margin-top: 0.85rem;
+      padding-top: 0.85rem;
+      border-top: 1px solid rgba(15, 23, 42, 0.08);
+      line-height: 1.72;
+    }
+

package/public/chat-render.js

@@ -0,0 +1,308 @@
+    function createMessageElement(text, isUser) {
+      const msgDiv = document.createElement('div');
+      msgDiv.className = `message ${isUser ? 'user' : 'agent'}`;
+
+      const avatar = document.createElement('div');
+      avatar.className = 'avatar';
+      avatar.textContent = isUser ? 'U' : 'AI';
+
+      const content = document.createElement('div');
+      content.className = 'message-content';
+      setMessageContent(content, text);
+
+      msgDiv.appendChild(avatar);
+      msgDiv.appendChild(content);
+      return msgDiv;
+    }
+
+
+    function setMessageContent(content, text) {
+      content.textContent = String(text || '');
+      content.style.whiteSpace = 'pre-wrap';
+    }
+
+    function escapeHtml(text) {
+      return String(text || '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function formatFileSize(bytes) {
+      if (!bytes || bytes < 1024) return bytes + ' B';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+      return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    function createSpecialMessageElement(label, text, className) {
+      const msgDiv = document.createElement('div');
+      msgDiv.className = `message agent ${className || ''}`.trim();
+
+      const avatar = document.createElement('div');
+      avatar.className = 'avatar';
+      avatar.textContent = label;
+
+      const content = document.createElement('div');
+      content.className = 'message-content';
+      setMessageContent(content, text);
+
+      msgDiv.appendChild(avatar);
+      msgDiv.appendChild(content);
+      return msgDiv;
+    }
+
+    function createToolMessageElement(kind, payload = {}) {
+      const label = kind === 'tool_call_started' ? 'RUN' : kind === 'tool_call_completed' ? 'DONE' : 'TOOL';
+      const msgDiv = createSpecialMessageElement(label, '', 'tool-message');
+      msgDiv.dataset.toolKind = kind;
+      updateToolMessageElement(msgDiv, kind, payload);
+      return msgDiv;
+    }
+
+    function updateToolMessageElement(element, kind, payload = {}) {
+      const content = element.querySelector('.message-content');
+      const avatar = element.querySelector('.avatar');
+      const toolName = payload.toolName || payload.itemType || payload.text || 'tool';
+      const toolId = payload.toolId || '';
+      const args = payload.args || payload.meta?.args || payload.meta?.input || null;
+      const output = payload.output || payload.text || '';
+      const result = payload.result || payload.output || payload.text || '';
+
+      if (kind === 'tool_call_started') {
+        avatar.textContent = 'RUN';
+      } else if (kind === 'tool_call_output') {
+        avatar.textContent = 'TOOL';
+      } else if (kind === 'tool_call_completed') {
+        avatar.textContent = 'DONE';
+      } else {
+        avatar.textContent = 'TOOL';
+      }
+
+      const sections = [];
+      sections.push(`<div class="tool-section"><div class="tool-section-title">状态</div><div class="tool-section-body">${kind === 'tool_call_started' ? `正在调用工具：${toolName}` : kind === 'tool_call_output' ? `工具执行中：${toolName}` : kind === 'tool_call_completed' ? `工具执行完成：${toolName}` : `[${kind}] ${toolName}`}</div></div>`);
+      if (toolId) {
+        sections.push(`<div class="tool-section"><div class="tool-section-title">Tool ID</div><div class="tool-section-body">${toolId}</div></div>`);
+      }
+      if (args) {
+        sections.push(`<div class="tool-section"><div class="tool-section-title">参数</div><div class="tool-section-body">${escapeHtml(typeof args === 'string' ? args : JSON.stringify(args, null, 2))}</div></div>`);
+      }
+      if (kind === 'tool_call_output' && output) {
+        sections.push(`<div class="tool-section"><div class="tool-section-title">输出</div><div class="tool-section-body">${escapeHtml(output)}</div></div>`);
+      }
+      if (kind === 'tool_call_completed' && result) {
+        sections.push(`<div class="tool-section"><div class="tool-section-title">结果</div><div class="tool-section-body">${escapeHtml(result)}</div></div>`);
+      }
+      if (kind === 'tool_call_started' && payload.meta) {
+        sections.push(`<div class="tool-section"><div class="tool-section-title">Meta</div><div class="tool-section-body">${escapeHtml(JSON.stringify(payload.meta, null, 2))}</div></div>`);
+      }
+      content.innerHTML = sections.join('');
+    }
+
+    function createRunningMessageElement(text = '正在处理中，请稍候…') {
+      const msgDiv = createSpecialMessageElement('AI', '', 'running-message');
+      updateRunningMessageElement(msgDiv, text);
+      return msgDiv;
+    }
+
+    function createSystemMessageElement(text) {
+      const msgDiv = createSpecialMessageElement('SYS', text, 'system-message');
+      const content = msgDiv.querySelector('.message-content');
+      const badge = document.createElement('div');
+      badge.className = 'system-badge';
+      badge.textContent = '上下文说明';
+      content.prepend(badge);
+      return msgDiv;
+    }
+
+    function updateRunningMessageElement(element, text) {
+      const content = element.querySelector('.message-content');
+      const status = document.createElement('div');
+      status.className = 'running-status';
+      status.innerHTML = `<span class="running-spinner"></span><span>${text}</span>`;
+      content.innerHTML = '';
+      content.appendChild(status);
+    }
+
+    function setComposerStatus(text) {
+      if (!composerStatus) return;
+      const normalized = String(text || '').trim();
+      if (!normalized) {
+        composerStatus.innerHTML = '';
+        return;
+      }
+      const status = document.createElement('div');
+      status.className = 'running-status';
+      const spinner = document.createElement('span');
+      spinner.className = 'running-spinner';
+      const label = document.createElement('span');
+      label.textContent = normalized;
+      status.appendChild(spinner);
+      status.appendChild(label);
+      composerStatus.innerHTML = '';
+      composerStatus.appendChild(status);
+    }
+
+    function clearComposerStatus() {
+      setComposerStatus('');
+    }
+
+    function renderInlineMarkdown(text) {
+      return escapeHtml(text)
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/`([^`]+)`/g, '<code>$1</code>');
+    }
+
+    function renderAgentBlockContent(block, text) {
+      const source = String(text || '').replace(/\r\n/g, '\n');
+      const lines = source.split('\n');
+      const fragments = [];
+      let paragraphLines = [];
+      let listType = null;
+      let listItems = [];
+      let inCodeBlock = false;
+      let codeLines = [];
+
+      function flushParagraph() {
+        if (paragraphLines.length === 0) return;
+        const paragraphHtml = paragraphLines.map(line => renderInlineMarkdown(line)).join('<br/>');
+        fragments.push(`<p>${paragraphHtml}</p>`);
+        paragraphLines = [];
+      }
+
+      function flushList() {
+        if (!listType || listItems.length === 0) return;
+        fragments.push(`<${listType}>${listItems.map(item => `<li>${renderInlineMarkdown(item)}</li>`).join('')}</${listType}>`);
+        listType = null;
+        listItems = [];
+      }
+
+      function flushCodeBlock() {
+        fragments.push(`<pre><code>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
+        codeLines = [];
+      }
+
+      for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        const trimmed = line.trim();
+
+        if (/^```/.test(trimmed)) {
+          if (!inCodeBlock) {
+            flushParagraph();
+            flushList();
+            inCodeBlock = true;
+            codeLines = [];
+          } else {
+            flushCodeBlock();
+            inCodeBlock = false;
+          }
+          continue;
+        }
+
+        if (inCodeBlock) {
+          codeLines.push(line);
+          continue;
+        }
+
+        if (!trimmed) {
+          flushParagraph();
+          flushList();
+          continue;
+        }
+
+        const headingMatch = trimmed.match(/^(#{1,3})\s+(.+)$/);
+        if (headingMatch) {
+          flushParagraph();
+          flushList();
+          const level = headingMatch[1].length;
+          fragments.push(`<h${level}>${renderInlineMarkdown(headingMatch[2])}</h${level}>`);
+          continue;
+        }
+
+        const orderedMatch = trimmed.match(/^\d+[.)]\s+(.+)$/);
+        if (orderedMatch) {
+          flushParagraph();
+          if (listType && listType !== 'ol') {
+            flushList();
+          }
+          listType = 'ol';
+          listItems.push(orderedMatch[1]);
+          continue;
+        }
+
+        const unorderedMatch = trimmed.match(/^[-*]\s+(.+)$/);
+        if (unorderedMatch) {
+          flushParagraph();
+          if (listType && listType !== 'ul') {
+            flushList();
+          }
+          listType = 'ul';
+          listItems.push(unorderedMatch[1]);
+          continue;
+        }
+
+        if (listType) {
+          flushList();
+        }
+        paragraphLines.push(line);
+      }
+
+      if (inCodeBlock) {
+        flushCodeBlock();
+      }
+      flushParagraph();
+      flushList();
+      block.innerHTML = fragments.join('') || `<p>${renderInlineMarkdown(source)}</p>`;
+    }
+
+    function renderAgentBlocks(content, blocks) {
+      content.innerHTML = '';
+      const normalizedBlocks = Array.isArray(blocks) ? blocks.filter(block => typeof block === 'string' && block.trim()) : [];
+      if (normalizedBlocks.length === 0) {
+        return;
+      }
+      normalizedBlocks.forEach(text => {
+        const block = document.createElement('div');
+        block.className = 'agent-block';
+        renderAgentBlockContent(block, text);
+        content.appendChild(block);
+      });
+      content.style.whiteSpace = 'normal';
+    }
+
+    function rerenderFullMessage(state) {
+      const blocks = state.blocks.slice();
+      if (state.currentBlockText && state.currentBlockText.trim()) {
+        blocks.push(state.currentBlockText);
+      }
+      state.renderedText = blocks.join('\n\n');
+      renderAgentBlocks(state.contentContainer, blocks);
+      state.scrollContainer.scrollTo({
+        top: state.scrollContainer.scrollHeight,
+        behavior: 'auto'
+      });
+    }
+
+    function startTypewriter(state) {
+      if (state.typingActive) return;
+      state.typingActive = true;
+
+      state.typewritingInterval = setInterval(() => {
+        if (state.queue.length === 0) {
+          return;
+        }
+
+        const char = state.queue.charAt(0);
+        state.queue = state.queue.substring(1);
+        state.currentBlockText += char;
+        rerenderFullMessage(state);
+      }, 20);
+    }
+
+    function stopTypewriter(state) {
+      if (state.typewritingInterval) {
+        clearInterval(state.typewritingInterval);
+        state.typewritingInterval = null;
+      }
+      state.typingActive = false;
+    }