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

news2025/4/18 18:31:31

文章目录

- 实现的效果
- 前言
- 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);
  };
};