从零构建现代化AI聊天界面：设计与开发实践

onething365
0 阅读8分钟

随着人工智能技术的快速发展，大语言模型已然成为人机交互的新范式。而聊天界面作为用户与AI对话的窗口，其体验的优劣直接影响着产品的使用感受。然而，市面上现有的组件库和开源项目，大多将聊天页面与具体业务深度绑定，难以直接复用。那么，一个纯粹的、可独立运行的聊天界面，究竟该如何从设计走向开发呢？本文将以一个完整的实践项目为例，系统梳理从技术选型到核心功能实现的完整过程。

技术架构：构建稳固的基石

1. 技术栈的精心选型

项目选用了现代化的前端技术栈，每项技术的选择都旨在为开发效率和用户体验提供保障：

  • Vue 3 ：作为核心框架，利用其响应式系统和组合式API，构建清晰的数据流和可复用的业务逻辑
  • Vite ：作为构建工具，提供极速的开发启动和热更新能力，让开发过程更加流畅
  • Arco Design Vue ：提供高质量的基础UI组件，确保界面美观且交互规范，让我们能专注于业务逻辑的实现
  • markdown-it ：承担Markdown解析任务，使AI的富文本回复能够得到完整呈现
  • highlight.js ：实现代码块的语法高亮，提升技术类内容的阅读体验
  • uuid ：生成唯一标识符，确保消息和会话的可靠管理

2. 项目结构的分层设计

清晰的项目结构是代码可维护性的基础。我们采用了分层架构，遵循单一职责原则，将不同关注点分离到独立模块：

ai-chat/
├── src/
│   ├── components/chat/          # UI组件层
│   │   ├── ChatMessage.vue       # 消息卡片组件
│   │   ├── ChatInput.vue         # 输入区域组件
│   │   ├── QuickQuestions.vue    # 快捷问题组件
│   │   └── SessionSidebar.vue    # 会话列表侧边栏
│   ├── composables/              # 业务逻辑层
│   │   ├── useChat.js            # 聊天核心逻辑（消息发送、会话管理）
│   │   └── useMarkdown.js        # Markdown渲染逻辑
│   ├── utils/                    # 工具函数层
│   │   └── mockApi.js            # Mock API接口模拟
│   ├── views/                    # 页面视图层
│   │   └── ChatInterface.vue     # 主聊天界面布局
│   ├── App.vue
│   └── main.js

这种分层架构带来了几个关键优势：

  • 关注点分离 ：UI展示、业务逻辑、数据处理各司其职，代码边界清晰
  • 逻辑复用 ：通过组合式API，聊天核心逻辑可在不同组件间共享
  • 易于扩展 ：新增功能只需在相应层级添加模块，不影响现有代码
  • 测试友好 ：模块化设计使得单元测试和集成测试更加便捷

3. 整体效果

核心功能：打造沉浸式对话体验

1. 流式输出：还原真实的对话节奏

流式输出是AI聊天界面的灵魂。它让对话不再是一次性的请求-响应，而是呈现出自然的“打字机”效果，极大地提升了交互的沉浸感。

在实现上，我们通过回调函数实时接收服务端返回的增量内容，并不断更新消息内容：

// useChat.js 中的流式处理逻辑const result = await sendMessage(
  {  message: messageToSend,
    sessionId: currentSessionId.value,
    agentId: 'agent_001'  },
  (streamData) => {
    // 每次收到增量数据，实时更新消息内容
    const msg = messages.value.find(m => m.id === aiMessageId)
    if (msg) {
      msg.content = streamData.data.content
      msg.status = streamData.data.isComplete ? 'complete' : 'streaming'
    }
  }
)

配合前端的光标闪烁动画，用户能够清晰地感知到AI正在“思考”和“输出”，这种即时反馈让对话更加自然流畅。

2. Markdown渲染：让AI回复更富表现力

AI的回复往往包含代码块、表格、列表等丰富格式，因此完整的Markdown支持至关重要。我们通过markdown-it与highlight.js的组合，构建了专业的渲染系统：

<!-- ChatMessage.vue 中的Markdown渲染 -->
<div
   v-if="message.role === 'assistant'"
   class="bubble-content markdown-body"
     v-html="renderedContent"
></div>

渲染系统不仅支持标准的Markdown语法，还为代码块添加了语言标识和复制功能，让技术内容的展示更加专业易用。

3. 会话管理：支持多场景并行

一个完善的聊天应用应当支持多会话管理，让用户可以在不同话题间自由切换。我们通过简洁的数据结构实现了完整的会话管理功能：

// 创建新会话
const createSession = () => {
  const sessionId = uuidv4()
  sessions.value.push({
    id: sessionId,
    title: '新会话',
    createdAt: Date.now(),
    updatedAt: Date.now()
  })
  currentSessionId.value = sessionId
  messages.value = []
  // 新会话展示欢迎消息
  messages.value.push({
    id: uuidv4(),
    role: 'assistant',
    content: "Hi, I'm Lucas. How's your day going?",
    sender: '英语聊天',
    avatar: 'ai',
    timestamp: Date.now(),
    status: 'complete',
    latency: 0.8,
    tokens: 12
  })
}

会话系统通过UUID为每个会话生成唯一标识，记录创建和更新时间，支持会话的增删改查，为用户提供了灵活的多话题管理能力。

4. 消息操作：赋予用户更多控制权

为了让用户能够更好地管理对话内容，我们实现了丰富的消息操作功能：

// 复制消息内容
const copyMessage = async (content) => {
  try {
    await navigator.clipboard.writeText(content)
    return true
  } catch (err) {
    console.error('复制失败:', err)
    return false  }
}
// 消息评价反馈
const rateMessage = (messageId, rating) => {
  const msg = messages.value.find(m => m.id === messageId)
  if (msg) {
    msg.rating = rating
  }
}

复制、重新生成、删除、点赞/点踩等操作通过事件机制与UI紧密结合，为用户提供了直观的交互方式。

5. 智能增强特性

为了进一步提升聊天体验，项目还实现了多项智能增强特性：

  • 插件调用展示 ：清晰显示AI调用了哪些工具（代码执行、工作流、网页搜索等）
  • 知识库引用 ：展示回答所依据的知识来源和置信度
  • 快捷问题 ：提供预设问题，帮助用户快速开始对话
  • Token统计 ：显示响应延迟和Token使用量，便于性能监控

数据流：确保状态可预测

清晰的数据流是复杂应用稳定运行的保障。我们采用了Vue 3的响应式API（ref、computed）管理应用状态，通过props和emit实现组件间通信，形成了单向的数据流向：

  1. 发送消息 ：用户输入 → ChatInput组件 → useChat逻辑 → Mock API → 消息状态更新 → UI重新渲染
  2. 切换会话 ：会话操作 → SessionSidebar组件 → useChat逻辑 → 当前会话切换 → 对应消息列表渲染

这种单向数据流让应用的状态变化变得可追溯、可预测，极大地方便了调试和维护。

Mock API：摆脱后端依赖

为了能够在没有真实后端的情况下独立开发和测试，我们设计了完整的Mock API：

// mockApi.js 中的消息发送模拟
export const sendMessage = async (data, onStream) => {
  const { message } = data
  // 根据输入内容动态生成回复
  const response = generateResponse(message)
  let currentContent = ''
  for (const char of response.content) {
    currentContent += char
    onStream({
      data: {
        content: currentContent,
        isComplete: false
      }
    })
    // 模拟网络延迟，还原真实流式输出体验
    await new Promise(resolve => setTimeout(resolve, 30))
  }
  return {
    content: response.content,
    latency: 1.2,
    usage: { total_tokens: response.content.length },
    plugins: response.plugins,
    knowledge: response.knowledge,
    messageId: uuidv4()
  }
}

Mock API模拟了流式输出、延迟响应、插件调用等真实场景，让前端开发可以完全独立进行，待后端就绪后只需替换API调用即可无缝对接。

用户体验：细节成就品质

优秀的用户体验往往体现在细节之中：

  • 流畅的动画 ：消息淡入淡出、按钮悬停效果、滚动动画等，让界面生动自然
  • 即时反馈 ：复制成功提示、删除确认、加载状态等，让用户清楚每一步的操作结果
  • 响应式布局 ：适配桌面端和移动端，确保不同设备上的良好体验
  • 键盘快捷键 ：Enter发送消息，Shift+Enter换行，符合用户习惯

扩展性设计：面向未来的架构

项目的扩展性主要体现在以下几个方面：

  • 组件扩展 ：可以方便地添加新的消息类型（如图片、卡片、表格等），只需扩展ChatMessage组件
  • 功能扩展 ：在mockApi.js中可轻松添加新的插件类型和回复生成逻辑
  • 样式定制 ：通过SCSS变量和深度选择器，可以灵活覆盖默认样式
  • API集成 ：将Mock API替换为真实后端服务只需修改请求方法，业务逻辑层无需改动

这种设计使得项目能够灵活适应不同的业务场景和需求变化。

结语

从零构建一个现代化的AI聊天界面，不仅仅是组件的堆砌，更需要对交互体验、数据流、扩展性等多方面进行系统性思考。本文介绍的实践项目，展示了如何通过合理的技术选型、清晰的分层架构和精细的功能实现，打造一个功能完整、体验流畅的AI对话界面。

无论是作为独立产品的基础，还是作为更大系统的子模块，这种纯粹的聊天界面设计都能为AI应用的开发提供可靠的参考。希望本文的分享能为你在AI应用开发的道路上提供一些启发和帮助。

源码：

github.com/onething365…

欢迎关注我的公众号(onething365)，最新的技术与你分享

avatar
文章
阅读
粉丝