介绍

Chatbot UI 是一个高级聊天机器人工具包，基于 OpenAI 的聊天模型，它使用 Next.js、TypeScript 和 Tailwind CSS，在 Chatbot UI Lite 之上进一步构建。

本质就是仿ChatGPT的Web端。

技术点分析

pages/index.tsx

 const controller = new AbortController(); // 1.实例化中断控制器
  const response = await fetch("/api/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    signal: controller.signal, // 2.传入信号，与fetch请求关联
    body: JSON.stringify(chatBody)
  });
  
  // ...
  
  while (!done) {
    if (stopConversationRef.current === true) {
      controller.abort(); // 3.按业务时机中断请求
      done = true;
      break;
    }
    // ...
}

知识点：基于fetch + AbortController 实现可中断请求。常见的类似方案还有 axios + AbortController。

2.pages/index.tsx

const response = await fetch("/api/chat", {
method: "POST",
headers: {
  "Content-Type": "application/json"
},
signal: controller.signal,
body: JSON.stringify(chatBody)
});

// ...
const data = response.body;
const reader = data.getReader(); // 1. reader类型是 ReadableStreamDefaultReader<Uint8Array>
let done = false;
let text = "";
// ...

while (!done) {
    // ...
    const { value, done: doneReading } = await reader.read(); // 2. 会卡着等待，直到读取到数据
    done = doneReading;
    const chunkValue = decoder.decode(value); // 3. 使用TextDecoder 解码二进制数据

    text += chunkValue;
}

知识点：浏览器端，基于ReadableStreamDefaultReader + TextDecoder 流式/持续读取文本数据。

编码技巧

next.config.js

/** @type {import('next').NextConfig} */   // 留意下这行
const nextConfig = {
  reactStrictMode: true,

  webpack(config, { isServer, dev }) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };

    return config;
  },
};

module.exports = nextConfig;

前端工程化项目，一般存在很多配置文件。有些配置文件是js格式的，例如此处 next.config.js，增加了 @type类型声明之后，配合IDE webstorm 或 vscode等，在编码时有智能提示。

参考资料

chatbot-u github地址
github.com/mckaywrigle…

axios
www.npmjs.com/package/axi…

chatbot-ui 知识点整理

介绍

技术点分析

编码技巧

参考资料