构建高效智能对话前端：基于Ant Design X 的deepseek对话应用

实现的效果

• 待机页面：
  

• 等待页面：
  

• 完成页面：
  

前言

随着人工智能技术的飞速发展，大模型对话系统已成为许多应用的核心组件。为了提供一个高效、智能且用户友好的对话界面，我们开发了一款基于 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 开发，提供完整类型支持，提升开发体验与可靠性。
• 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求。

添加欢迎组件

在用户首次访问时，显示欢迎组件以介绍应用。

<Welcomeicon="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 (<Bubblekey={index}style={{ marginBottom: 8 }}placement="end"content={item.content}messageRender={renderMarkdown}avatar={{ icon: <UserOutlined />, style: fooAvatar }}/>);} else if (item.role === 'assistant') {return (<Bubblekey={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 组件来处理用户输入和消息发送。

<Senderloading={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 的优势，我们得以在较短时间内完成高质量的产品交付。希望这篇文章能给正在探索类似项目的朋友们带来一些启发。

源码下载地址