React+AntDesign实现类似Chatgpt交互界面

以下是一个基于React和Ant Design搭建的简单ChatGPT风格前端交互界面代码框架示例，该示例实现了基本的用户输入、发送请求以及展示回复的功能。假设后端有一个模拟接口来处理请求并返回回复。

项目初始化：

确保你已经安装了Node.js和npm。通过以下命令创建一个新的React项目：

npx create - react - app chat - ui

cd chat - ui

然后安装Ant Design：

npm install antd

代码实现：

• App.js：

import React, { useState } from'react';

import { Button, Input, List } from 'antd';

import 'antd/dist/antd.css';

const App = () => {

const [inputValue, setInputValue] = useState('');

const [chatList, setChatList] = useState([]);

const handleInputChange = (e) => {

setInputValue(e.target.value);

};

const handleSend = async () => {

if (inputValue.trim() === '') return;

// 模拟请求数据

const requestData = {

userInput: inputValue

};

setChatList([...chatList, { role: 'user', content: inputValue }]);

setInputValue('');

try {

// 模拟向后端发送请求，这里需要替换为真实的后端API地址

const response = await fetch('/api/chat', {

method: 'POST',

headers: {

'Content - Type': 'application/json'

body: JSON.stringify(requestData)

});

if (response.ok) {

const data = await response.json();

setChatList([...chatList, { role: 'assistant', content: data.reply }]);

} else {

setChatList([...chatList, { role: 'assistant', content: '请求失败，请稍后重试' }]);

}

} catch (error) {

setChatList([...chatList, { role: 'assistant', content: '网络错误，请检查网络' }]);

}

};

return (

<List

dataSource={chatList}

renderItem={(item) => (

<List.Item>

<strong>{item.role === 'user'? '你' : 'AI'}</strong>: {item.content}

</List.Item>

)}

<Input

placeholder="请输入问题"

value={inputValue}

onChange={handleInputChange}

onPressEnter={handleSend}

style={ { width: '80%', marginRight: '10px', display: 'inline - block' }}

</div>

);

};

export default App;

上述代码中：

• 使用useState钩子来管理输入框的值inputValue和对话列表chatList。

• handleInputChange函数用于更新输入框的值。

• handleSend函数在用户点击发送按钮或按下回车键时触发，它先将用户输入添加到对话列表，然后模拟向后端发送请求并处理响应，将后端回复也添加到对话列表。

• List组件用于展示对话历史，Input组件用于用户输入，Button组件用于发送请求。

请注意，上述代码中的/api/chat是模拟的后端API地址，实际应用中你需要将其替换为真实的与ChatGPT模型交互的后端接口地址。并且，真实场景下还需要处理更多的细节，如身份验证、请求超时等。

ChatGPT是OpenAI开发的语言模型，其本身并没有前端交互界面，这里为你假设设计一个类似语言模型交互界面的前端交互流程，以帮助你理解。

界面加载

• HTML 结构渲染：浏览器解析HTML文件，构建DOM树，确定页面布局结构，比如输入框、发送按钮、对话展示区域等基础元素的位置。

• CSS 样式应用：浏览器根据CSS规则，为各个HTML元素添加上对应的样式，像字体、颜色、间距等外观属性。

• JavaScript 脚本加载与初始化：浏览器加载JavaScript脚本文件，脚本开始执行初始化操作，例如获取DOM元素引用，绑定事件监听器等。

用户输入

• 输入事件监听：在输入框元素上，通过JavaScript添加input或keydown事件监听器，实时监听用户输入。

• 输入内容处理：用户输入时，输入框的值实时更新，前端可进行简单的输入校验，如限制输入长度、过滤特殊字符等。

发送请求

• 点击发送按钮或快捷键触发：用户点击发送按钮，或按下特定快捷键（如Enter键）时，触发发送请求的函数。

• 构建请求数据：将输入框中的内容作为请求数据，通常会包含用户的唯一标识、对话历史（如果有对话历史功能）等信息，按照后端接口要求的格式（如JSON）进行组装。

• 发送HTTP请求：使用fetch或XMLHttpRequest等技术，将构建好的请求数据发送到后端API接口。在请求过程中，可以显示加载状态，如在发送按钮上显示"正在发送"，或者在对话展示区域显示加载动画，告知用户请求正在处理中。

接收响应

• 响应数据接收：后端处理完请求后返回响应数据，前端通过上述发送请求的机制接收数据。

• 响应解析：接收到的响应数据通常是JSON格式，使用JSON.parse()方法将其解析为JavaScript对象，方便后续处理。

显示回复

• 对话展示区域更新：解析后的回复数据，按照一定的格式（如HTML）插入到对话展示区域，一般是在已有对话内容的下方添加新的对话记录，展示用户输入和模型回复。

• 滚动到最新消息：为了保证用户能实时看到最新的对话内容，自动将对话展示区域的滚动条滚动到最底部。

错误处理

• 请求错误处理：如果在发送请求或接收响应过程中出现错误，如网络中断、后端服务故障等，捕获错误并向用户展示友好的错误提示信息，如"网络连接失败，请检查网络后重试" 。

• 响应数据异常处理：若接收到的响应数据格式不正确或包含错误信息，进行相应处理，例如显示错误原因，方便用户了解问题所在。