搭建网页版 ChatGPT（一）

前言

这篇主要讲如何编写 ChatGPT 对话，核心代码不足 50 行，先来看下效果

体验地址：https://openbytecode.com/chat

ChatGPT 对话开篇

先说下大体实现思路：那就是用户的问答和 ChatGPT 的回答会形成一个对话列表，那我们可以用 useState 去存储这个对话列表，

例如这样 const [chatList, setChatList] = useState<ChatItem[]>([]);，

也就是说用每问一个问题就往这个数组里放一条数据，ChatGPT 每次的回答也往这个数组里放一条数据。

用户提问的代码例如下面这样：

const ask = (question: any) => {
  if (question) {
    const q: ChatItem = {
      content: question,
      type: 'me',
    };
    setChatList((chatList: any) => [...chatList, q]);
  }
};

ChatGPT 的回答代码例如下面这样：

const reply = (response: any) => {
  if (response) {
    const answer: ChatItem = {
      content: response,
      type: 'bot',
    };
    setChatList((chatList: any) => [...chatList, answer]);
  }
};

那这样是不是就完了呢？

那我们要知道用户的每次提问都是一口气就问完了的，但是 ChatGPT 的回答并不是一下子就都返回来吧，

这个原因我想你是知道的，如果你不知道可以想想 chat 后面的 GPT 到底是什么意思，所以 ChatGPT 的回答是一个字一个字返回的，

那你想想我们上面写的 reply 方法能满足现在的情况吗？

显然不能是不是，如果这么写你会看到 ChatGPT 每次的回答会变成一排， 假设 ChatGPT 的回答是 Hello! 欢迎使用 OpenByteCode 问答机器人，该机器人目前底层使用的是 ChatGPT3.5，快来和 ChatGPT 对话吧!，

那么结果可能就是下面这样：

解决方法见下篇文章。