react简单实现类似chatgpt的连续对话应用

使用 create-react-app 搭建应用

npx create-react-app chat-ai

或者直接从 github 上下载源代码：github仓库代码

流程说明

1. npm install 安装依赖
2. npm start 本地启动服务
3. 点击输入框,从未输入apiKey时,会提示输入apiKey
4. 输入apiKey后,点击确认,本地会保存apiKey
5. 输入错误的apiKey,会提示apiKey错误,要求重新输入apiKey
6. 输入框内输入问题,按回车或者发送按钮
7. 等待AI的回答
8. 若AI响应错误,回答会提示连接错误

代码结构

整个应用由三个组件构成：

• ChatInputKeyModal，输入apikey弹窗
• ChatMessageItem，单条信息展示
• ChatQuestionInput，问题输入框

非常规说明

整个应用代码都很常规简单，只有两个需要注意的点：

1. 使用流式获取

fetch(URL,{
    body:JSON.stringify({
        stream: true, // 这里不是fetch的特性，而是对应接口所需的结构
    })
})

获取的结果，使用 ReadableStream 来读取响应，使用方法参考 src/utils/fetch.util.ts

2. 在输入框的enter触发，在中文输入情况下会误触发

const [isComposing, setIsComposing] = useState(false);
const handleCompositionStart = () => {
    setIsComposing(true);
};
const handleCompositionEnd = () => {
    setIsComposing(false);
};
  
const handleInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      if (isComposing) {
        // 在中文输入模式下按下 Enter，不执行操作
        event.preventDefault();
      } else {
        sendQuestion();
        event.preventDefault();
      }
    }
};

<input onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd}>

详细参考，src/components/ChatQuestionInput.tsx

资源参考

• github代码仓库链接
• 在线效果预览
• 生成apiKey（貌似是1美元额度下免费使用，自己甄别）
• 测试apiKey：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（次数有限，若报错则代表已使用上限了）

预览