构建高效智能对话前端：基于AntDesignX的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=" mdn.alipayobjects /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 的优势，我们得以在较短时间内完成高质量的产品交付。希望这篇文章能给正在探索类似项目的朋友们带来一些启发。

源码下载地址