构建高效智能对话前端：基于Ant Design X 的deepseek对话应用
文章目录
- 实现的效果
- 前言
- Ant Design X
- 添加欢迎组件
- 创建对话气泡
- 存储对话历史
- 渲染对话气泡
- 输入组件
- WebSocket 连接
- 总结
实现的效果
-
待机页面：
-
等待页面：
-
完成页面：
前言
随着人工智能技术的飞速发展，大模型对话系统已成为许多应用的核心组件。为了提供一个高效、智能且用户友好的对话界面，我们开发了一款基于 Vite、React 和 Ant Design X 的大模型对话前端页面。该系统能够实时与后端的大模型进行通信，为用户提供流畅的对话体验。
本文主要介绍前端页面部分，后端大模型 DeepSeek 的对接请移步至深度集成 DeepSeek 大模型。
Ant Design X
Ant Design X 是一个遵循 Ant Design 设计体系的 React UI 库，专为构建由 AI 驱动的界面而设计，支持一键接入智能对话组件与 API 服务。
- 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验。
- 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面。
- 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务。
- 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效。
- 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发。
- TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性。
- 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求。
添加欢迎组件
在用户首次访问时，显示欢迎组件以介绍应用。
<Welcome
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
title="Hello, I'm Ant Design X"
description="Based on Ant Design, AGI product interface solution, create a better intelligent vision~"
/>
创建对话气泡
使用 Bubble 组件来存储和渲染对话历史。
存储对话历史
对话历史以对象数组的形式存储，每个对象包含 content 和 role 属性。
// 存储对话历史
// 内容格式为 { content: '', role: 'assistant' } / { content: '', role: 'user' }
const [history, setHistory] = useState([]);
渲染对话气泡
根据消息的角色（用户或助手）渲染不同的对话气泡。
{
history.map((item, index) => {
if (item.role === 'user') {
return (
<Bubble
key={index}
style={{ marginBottom: 8 }}
placement="end"
content={item.content}
messageRender={renderMarkdown}
avatar={{ icon: <UserOutlined />, style: fooAvatar }}
/>
);
} else if (item.role === 'assistant') {
return (
<Bubble
key={index}
loading={(index === history.length - 1) && loading}
style={{ marginBottom: 8, maxWidth: '80%' }}
placement="start"
content={item.content}
messageRender={renderMarkdown}
avatar={{ icon: <RobotOutlined />, style: robotAvatar }}
/>
);
}
})
}
输入组件
使用 Sender 组件来处理用户输入和消息发送。
<Sender
loading={loading}
value={inputMsg}
style={{ position: 'absolute', bottom: '10px', right: '10px', left: '10px', width: 'auto' }}
onChange={(v) => {
setInputMsg(v);
}}
onSubmit={() => {
setHistory((prevHistory) => [...prevHistory, { content: inputMsg, role: 'user' }]);
sendMsg();
setInputMsg('');
setLoading(true);
}}
onCancel={() => {
// 取消发送消息时的处理逻辑（如果有需要）
}}
/>
WebSocket 连接
使用 WebSocket 协议与后端的大模型进行实时通信。当用户发送消息时，前端通过 WebSocket 将消息发送到后端，并接收 DeepSeek 通过后端 Python 代码返回的对话内容。
代码示例:
const sendMsg = () => {
// 创建一个新的 WebSocket 连接
const socket = new WebSocket('ws://localhost:8765');
// 初始化结果对象，用于存储助手的回复内容
let result = {
content: '',
role: 'assistant'
};
// WebSocket 连接打开时的处理逻辑
socket.onopen = () => {
console.log('WebSocket connection established');
console.log(inputMsg);
// 发送用户输入的消息到后端
socket.send(JSON.stringify({
"user_input": inputMsg
}));
// 在对话历史中添加一个新的助手消息占位符
setHistory((prevHistory) => [...prevHistory, { content: '', role: 'assistant' }]);
};
// WebSocket 接收到消息时的处理逻辑
socket.onmessage = (event) => {
try {
// 检查消息是否为结束标志
if (event.data === 'end') {
// 处理结束逻辑（如果有需要）
} else {
// 解析接收到的消息
const msg = JSON.parse(event.data);
console.log(msg);
// 累加助手的回复内容
result.content += msg.content;
// 更新对话历史中的最后一个助手消息内容
setHistory((prevHistory) => {
const newHistory = [...prevHistory];
newHistory[newHistory.length - 1].content = result.content;
console.log(newHistory[newHistory.length - 1].content);
return newHistory;
});
}
} catch (error) {
console.error('Error parsing WebSocket message:', error);
}
};
// WebSocket 连接关闭时的处理逻辑
socket.onclose = () => {
console.log('WebSocket connection closed');
setLoading(false);
};
// WebSocket 连接发生错误时的处理逻辑
socket.onerror = (error) => {
console.error('WebSocket error:', error);
setLoading(false);
};
};
总结
本项目不仅实现了基本的实时对话功能，还充分考虑到了性能及用户体验方面的问题。借助 Vite、React 和 Ant Design X 的优势，我们得以在较短时间内完成高质量的产品交付。希望这篇文章能给正在探索类似项目的朋友们带来一些启发。
源码下载地址