Chatbox显示思维链的实现原理与性能优化实战

1次阅读

没有评论

共计 3589 个字符，预计需要花费 9 分钟才能阅读完成。

思维链（Chain of Thought）是指对话系统中 AI 生成回复时的中间推理过程。它类似于人类思考时的 ” 内心独白 ”，将 AI 的思考步骤可视化呈现给用户。典型应用场景包括：

教育类对话系统：展示解题步骤
决策支持系统：呈现推理逻辑
代码生成工具：显示编程思路
复杂任务处理：分解执行步骤

早期实现通常直接操作 DOM，带来明显性能问题：

渲染卡顿 ：当思维链条目超过 100 条时，全量渲染会导致界面冻结
内存泄漏 ：未清理的历史节点可能积累到 200MB 以上
更新延迟 ：频繁的 DOM 操作会触发重复布局计算

测试数据表明，在 500 条思维链场景下：

纯 DOM 方案首次渲染耗时 1200ms
滚动时 FPS 降至 8 帧
内存占用达 320MB

WebSocket：满足实时性要求（<100ms 延迟）
虚拟滚动 ：仅渲染可视区域内容
增量更新 ：避免全量重渲染

架构示意图：

[Backend]
  │
  └─WebSocket─▶[Frontend Virtual Scroll]
               │
               ├─Renderer Pool
               └─Memory Manager

// websocket-server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({port: 8080});

wss.on('connection', (ws) => {
  // 身份验证
  ws.on('message', (message) => {const { token, action} = JSON.parse(message);
    if (!validateToken(token)) {ws.close(1008, 'Unauthorized');
      return;
    }

    // 处理不同消息类型
    switch(action) {
      case 'get_thought_chain':
        sendThoughtChain(ws);
        break;
      // ... 其他处理逻辑
    }
  });

  // 心跳检测
  const heartbeat = setInterval(() => {if (ws.readyState === WebSocket.OPEN) {ws.ping();
    }
  }, 30000);

  ws.on('close', () => clearInterval(heartbeat));
});

function sendThoughtChain(ws) {
  // 分块发送数据
  let chunkIndex = 0;
  const chunkSize = 20;

  const sendChunk = () => {const chunk = generateThoughtChunk(chunkIndex, chunkSize);
    ws.send(JSON.stringify({
      type: 'thought_chunk',
      data: chunk,
      hasMore: chunk.length === chunkSize
    }));

    if (chunk.length === chunkSize) {
      chunkIndex++;
      setTimeout(sendChunk, 50); // 控制发送节奏
    }
  };

  sendChunk();}

// ThoughtChainViewer.jsx
import {useEffect, useRef, useState} from 'react';
import {VariableSizeList as List} from 'react-window';

const ESTIMATED_ITEM_SIZE = 50;

function ThoughtChainViewer() {const [items, setItems] = useState([]);
  const listRef = useRef(null);
  const wsRef = useRef(null);
  const itemSizes = useRef({});

  // WebSocket 连接管理
  useEffect(() => {const connect = () => {const ws = new WebSocket('ws://localhost:8080');

      ws.onopen = () => {
        ws.send(JSON.stringify({token: getAuthToken(), 
          action: 'get_thought_chain' 
        }));
      };

      ws.onmessage = (event) => {const data = JSON.parse(event.data);
        if (data.type === 'thought_chunk') {setItems(prev => [...prev, ...data.data]);
          // 动态调整滚动区域
          if (listRef.current) {listRef.current.resetAfterIndex(items.length);
          }
        }
      };

      ws.onclose = () => {setTimeout(connect, 3000); // 3 秒后重连
      };

      wsRef.current = ws;
    };

    connect();

    return () => {if (wsRef.current) {wsRef.current.close();
      }
    };
  }, []);

  // 动态计算项目高度
  const getItemSize = (index) => {return itemSizes.current[index] || ESTIMATED_ITEM_SIZE;
  };

  // 渲染单个项目
  const Row = ({index, style}) => {const rowRef = useRef(null);

    useEffect(() => {if (rowRef.current) {
        // 测量实际高度并缓存
        const height = rowRef.current.clientHeight;
        if (itemSizes.current[index] !== height) {itemSizes.current[index] = height;
          listRef.current.resetAfterIndex(index);
        }
      }
    }, [index]);

    return (<div style={style}>
        <div ref={rowRef} className="thought-item">
          <div className="step-index">Step {index + 1}</div>
          <div 
            className="content" 
            dangerouslySetInnerHTML={{__html: sanitizeHtml(items[index]) }}
          />
        </div>
      </div>
    );
  };

  return (
    <List
      ref={listRef}
      height={600}
      itemCount={items.length}
      itemSize={getItemSize}
      width="100%"
    >
      {Row}
    </List>
  );
}

// XSS 防护
function sanitizeHtml(html) {
  // 实际项目应使用 DOMPurify 等库
  return html.replace(/<script.*?>.*?<\/script>/gi, '');
}