Langchain-Chatchat 结合 Qwen 实现本地知识库前端开发

2.3 流式响应处理

直接请求 API 需要等待一段时间，然后一下子更新一大段对话，体验不佳。可以通过 stream 方式访问 API，实现逐字回答的效果。

此时发现回复的数据格式如下：

实现流式请求的代码如下：

// 节流略
sendMsg() {
  let that = this;
  let params = {
    knowledge_base_name: "", // 知识库名称
    top_k: 3,
    score_threshold: 0.8,
    stream: true,
    local_doc_url: false,
    model_name: "Qwen-14B-Chat-Int4",
    prompt_name: "default",
    temperature: 0.7,
    query: this.msglist[this.msglist.length - 1].content,
    history: [] // 消息历史，取消息列表最后 n 轮
  };
  
  that.msglist.push({
    role: 'assistant',
    content: '思考中...'
  });

  axios({
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
      'responseType': 'stream'
    },
    data: params,
    url: apiUrl + '/chat/knowledge_base_chat',
    onDownloadProgress: function (event) {
      if (that.msglist[that.msglist.length - 1].content == '思考中...') {
        that.msglist[that.msglist.length - 1].content = '';
      }
      let chunk = event.target.responseText;
      try {
        /* 序列化返回的内容 */
        let chunkStr = chunk.replace(/}{/g, "},####,{");
        let answerArr = chunkStr.split(',####,');
        let answerStr = '';
        answerArr.forEach(function (item) {
          if (item.indexOf("docs") < 0) {
            let itemObj = JSON.parse(item);
            answerStr = answerStr + itemObj.answer;
          }
        });
        that.msglist[that.msglist.length - 1].content = answerStr;
        that.goHeight();
      } catch (e) { console.log(e); }
    }
  });
}

2.4 样式优化与滚动

消息多了，发现显示的还是消息最上面一行，根本看不到后面的内容，需要给消息列表设置滚动：

.chatBox {
  flex: 1;
  margin: 0 auto;
  overflow-y: auto;
  height: 800px;
}

自动滚动到回答内容的底部：

// 滚动区域初始高度
init() {
  this.$nextTick(() => {
    this.scrollHeight = this.$refs.chatBox.scrollHeight;
  });
},
// 消息列表滚动到底部
goHeight() {
  this.$nextTick(() => {
    if (this.$refs.chatContent.scrollHeight > this.scrollHeight) {
      this.scrollHeight = this.$refs.chatBox.scrollHeight;
      this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
    }
  });
}

3. 项目运行与测试

完成代码编写后，建议进行以下检查以确保功能正常：

1. 依赖安装：确保 node_modules 已完整安装，特别是 axios 和 element-ui。
2. CORS 配置：如果前后端分离部署，需在后端配置允许跨域访问，避免浏览器拦截请求。
3. 端口一致性：确认前端配置的 apiUrl 与后端 serve_config 中的端口一致。
4. 流式解析：观察控制台输出，确保 onDownloadProgress 能正确接收数据块，且 JSON.parse 无报错。

优化样式后，即可启动前端服务进行测试。至此，一个基于 Langchain-Chatchat 和 Qwen 的本地知识库对话界面开发完成。