SmallThinker-3B-Preview企业级应用：基于Vue的前端智能客服助手开发

最近在帮一个朋友的公司优化他们的在线客服系统，他们最大的痛点就是人工客服响应慢，简单重复的问题占用了大量时间。我们尝试了几种方案，最后发现，将轻量级的开源大模型SmallThinker-3B-Preview集成到现有的Vue前端项目里，是个成本低、见效快的法子。今天就来聊聊，怎么一步步把这个“智能大脑”装进你的Vue应用里，让它变成一个能实时对话、懂你意思的客服小助手。

整个过程其实不复杂，核心思路就是：前端负责漂亮的界面和流畅的交互，后端（模型服务）负责“思考”和“回答”，两者通过WebSocket这条“高速通道”实时通信。下面，我就把我们从零到一搭建这套系统的经验分享出来。

1. 项目整体思路与架构设计

在动手写代码之前，得先把路子想清楚。我们的目标是在现有的企业级Vue项目中，增加一个智能客服模块，而不是重写整个系统。

核心架构很简单，可以分成三层来看：

• 前端展示层 (Vue)：这是我们最熟悉的部分，负责构建聊天界面。用户在这里输入问题，看到漂亮的对话气泡和可能包含链接、代码的富文本回复。
• 通信桥梁层 (WebSocket)：这是关键。传统的HTTP请求一问一答，不适合聊天这种持续性的交互。WebSocket能建立一条持久连接，让消息可以低延迟地双向流动，实现真正的“实时”对话。
• 智能引擎层 (Model API)：这里部署了SmallThinker-3B-Preview模型服务。它接收前端发来的用户问题，进行语义理解和意图分析，然后生成合适的回复文本，再通过WebSocket传回前端。

为什么要选SmallThinker-3B-Preview？对于企业场景，特别是要集成到前端这种对响应速度要求高的环境里，模型的大小和推理速度至关重要。3B参数的规模，在保证足够对话能力的同时，对计算资源的要求相对友好，更容易实现快速响应。预览版（Preview）也意味着它在轻量化方面做了优化，很适合作为功能预览或初期落地。

整个数据流是这样的：用户在Vue前端的输入框打字 -> 消息通过WebSocket发送 -> 后端模型服务接收并处理 -> 模型生成回复 -> 回复通过WebSocket推回 -> Vue前端渲染并展示给用户。同时，整个对话历史会被前端妥善管理起来，一方面用于界面展示，另一方面也可以作为上下文在后续提问时传给模型，让对话更连贯。

2. 前端Vue组件开发：构建聊天界面

前端是我们的门面，体验好不好全看这里。我们不用很复杂的库，就用Vue 3的组合式API来写，清晰又灵活。

首先，我们来搭一个最基础的聊天界面组件 SmartChat.vue。

<template>
  <div class="chat-container">
    <!-- 对话历史区域 -->
    <div class="message-list" ref="messageListRef">
      <div v-for="(msg, index) in messageList" :key="index" :class="['message-item', msg.role]">
        <div class="avatar">{{ msg.role === 'user' ? '我' : 'AI' }}</div>
        <div class="bubble" v-html="renderMessage(msg.content)"></div>
      </div>
      <div v-if="isLoading" class="message-item assistant">
        <div class="avatar">AI</div>
        <div class="bubble typing-indicator"><span></span><span></span><span></span></div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <textarea
        v-model="userInput"
        @keydown.enter.exact.prevent="sendMessage"
        placeholder="请输入您的问题..."
        :disabled="isLoading"
      ></textarea>
      <button @click="sendMessage" :disabled="!userInput.trim() || isLoading">
        {{ isLoading ? '思考中...' : '发送' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import { useChat } from '../composables/useChat.js'

// 使用组合式函数管理聊天核心逻辑
const { messageList, isLoading, sendMessage: send, wsConnect } = useChat()
const userInput = ref('')
const messageListRef = ref(null)

// 发送消息
const sendMessage = async () => {
  const text = userInput.value.trim()
  if (!text || isLoading.value) return

  await send(text) // 调用组合式函数中的发送方法
  userInput.value = '' // 清空输入框

  // 滚动到底部
  nextTick(() => {
    if (messageListRef.value) {
      messageListRef.value.scrollTop = messageListRef.value.scrollHeight
    }
  })
}

// 渲染富文本消息（简单示例，生产环境需做XSS防护）
const renderMessage = (content) => {
  // 这里可以引入安全的Markdown解析器，如marked，将模型返回的Markdown转成HTML
  // 此处为简单演示，仅处理换行和加粗
  return content.replace(/\n/g, '<br/>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
}

// 组件挂载时连接WebSocket
onMounted(() => {
  wsConnect()
})

// 组件卸载时清理（实际清理逻辑在useChat中）
onUnmounted(() => {
  // 清理工作已在useChat的onUnmounted中处理
})
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}
.message-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #fafafa;
}
.message-item {
  display: flex;
  margin-bottom: 16px;
}
.message-item.user {
  flex-direction: row-reverse;
}
.message-item.user .bubble {
  background-color: #95ec69;
  color: #000;
}
.message-item.assistant .bubble {
  background-color: #fff;
  border: 1px solid #e4e7ed;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  flex-shrink: 0;
}
.bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  word-break: break-word;
}
.input-area {
  display: flex;
  padding: 20px;
  border-top: 1px solid #e4e7ed;
  background-color: #fff;
}
.input-area textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  resize: none;
  font-size: 14px;
  min-height: 60px;
}
.input-area button {
  margin-left: 12px;
  padding: 0 24px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.input-area button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #909399;
  margin: 0 2px;
  animation: blink 1.4s infinite both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
</style>

这个组件包含了对话列表、输入框和发送按钮。注意，我们用 v-html 来渲染消息内容，这是为了支持富文本（比如模型返回的Markdown格式）。在实际项目中，一定要对内容进行严格的消毒（Sanitize），防止XSS攻击，可以使用 DOMPurify 这样的库。

3. 核心通信逻辑：使用WebSocket连接模型服务

界面有了，接下来就是让它能“说话”。我们把WebSocket的连接、消息发送接收这些逻辑抽离到一个组合式函数 useChat.js 里，这样更清晰，也方便复用。

// composables/useChat.js
import { ref, onUnmounted } from 'vue'

export function useChat() {
  const messageList = ref([]) // 对话历史
  const isLoading = ref(false) // 加载状态
  const socket = ref(null) // WebSocket实例
  const reconnectAttempts = ref(0)
  const maxReconnectAttempts = 5

  // 连接WebSocket
  const wsConnect = () => {
    // 替换为你的模型服务WebSocket地址，例如：ws://your-model-server/chat
    const wsUrl = process.env.VUE_APP_WS_URL || 'ws://localhost:8000/ws'
    
    try {
      socket.value = new WebSocket(wsUrl)

      socket.value.onopen = () => {
        console.log('WebSocket连接成功')
        reconnectAttempts.value = 0
        // 可以在这里发送一个初始化消息，或者恢复上次的对话历史
      }

      socket.value.onmessage = (event) => {
        const data = JSON.parse(event.data)
        handleIncomingMessage(data)
      }

      socket.value.onerror = (error) => {
        console.error('WebSocket错误:', error)
        addSystemMessage('连接出现异常，请稍后重试。')
      }

      socket.value.onclose = (event) => {
        console.log('WebSocket连接关闭', event.code, event.reason)
        if (event.code !== 1000) { // 非正常关闭，尝试重连
          attemptReconnect()
        }
      }
    } catch (error) {
      console.error('创建WebSocket连接失败:', error)
      addSystemMessage('无法连接到智能助手服务。')
    }
  }

  // 处理接收到的消息
  const handleIncomingMessage = (data) => {
    isLoading.value = false
    if (data.type === 'assistant_message') {
      // 找到最后一条AI的临时消息进行更新，或者新增一条
      const lastAssistantMsgIndex = messageList.value.findLastIndex(msg => msg.role === 'assistant' && msg.isStreaming)
      if (lastAssistantMsgIndex > -1) {
        // 更新流式消息
        messageList.value[lastAssistantMsgIndex].content = data.content
        messageList.value[lastAssistantMsgIndex].isStreaming = false
      } else {
        // 新增消息
        messageList.value.push({
          role: 'assistant',
          content: data.content,
          timestamp: new Date().toISOString()
        })
      }
    } else if (data.type === 'error') {
      addSystemMessage(`助手回复出错: ${data.content}`)
    }
  }

  // 发送用户消息
  const sendMessage = async (content) => {
    if (!socket.value || socket.value.readyState !== WebSocket.OPEN) {
      addSystemMessage('连接未就绪，请检查网络。')
      return
    }

    // 1. 添加用户消息到历史
    messageList.value.push({
      role: 'user',
      content: content,
      timestamp: new Date().toISOString()
    })

    // 2. 添加一个临时的、用于流式接收的AI消息占位
    messageList.value.push({
      role: 'assistant',
      content: '...',
      isStreaming: true
    })

    isLoading.value = true

    // 3. 构建请求数据，可以包含对话历史作为上下文
    const requestData = {
      type: 'user_message',
      content: content,
      // 可选：发送最近N条历史记录，帮助模型理解上下文
      history: messageList.value
        .filter(msg => !msg.isStreaming)
        .slice(-5) // 发送最近5轮对话
        .map(({ role, content }) => ({ role, content }))
    }

    try {
      socket.value.send(JSON.stringify(requestData))
    } catch (error) {
      console.error('发送消息失败:', error)
      isLoading.value = false
      // 移除临时的AI消息占位
      messageList.value.pop()
      addSystemMessage('消息发送失败，请重试。')
    }
  }

  // 添加系统消息（错误、提示等）
  const addSystemMessage = (content) => {
    messageList.value.push({
      role: 'system',
      content: content,
      timestamp: new Date().toISOString()
    })
  }

  // 尝试重连
  const attemptReconnect = () => {
    if (reconnectAttempts.value >= maxReconnectAttempts) {
      addSystemMessage('网络连接异常，请刷新页面重试。')
      return
    }
    reconnectAttempts.value++
    const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.value), 10000) // 指数退避
    console.log(`将在 ${delay}ms 后尝试第 ${reconnectAttempts.value} 次重连...`)
    setTimeout(wsConnect, delay)
  }

  // 组件卸载时关闭连接
  onUnmounted(() => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.close(1000, '组件卸载')
    }
  })

  return {
    messageList,
    isLoading,
    sendMessage,
    wsConnect
  }
}

这个组合式函数封装了所有聊天状态和网络逻辑。它支持自动重连、流式消息接收（通过更新占位消息的方式模拟）和对话历史管理。sendMessage 方法里，我们不仅发送当前问题，还可以带上最近的几条对话历史，这样模型就能知道之前的聊天内容，回答会更连贯。

4. 与后端模型服务对接

前端准备好了，还需要一个能理解并调用SmallThinker-3B-Preview模型的后端服务。这里给出一个非常简单的Python FastAPI示例，展示后端如何接收WebSocket消息并调用模型。

# main.py (FastAPI后端示例)
import json
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.middleware.cors import CORSMiddleware
import asyncio

# 假设有一个封装好的模型调用函数
# from model_integration import generate_with_smallthinker

app = FastAPI()

# 处理跨域
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境应指定具体前端地址
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 简单的连接管理器
class ConnectionManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        if websocket in self.active_connections:
            self.active_connections.remove(websocket)

    async def send_personal_message(self, message: dict, websocket: WebSocket):
        try:
            await websocket.send_json(message)
        except Exception as e:
            print(f"发送消息失败: {e}")

manager = ConnectionManager()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            # 1. 接收前端发来的消息
            data = await websocket.receive_text()
            message_data = json.loads(data)

            if message_data.get("type") == "user_message":
                user_query = message_data.get("content", "")
                history = message_data.get("history", [])

                # 2. 构建模型所需的提示词（这是关键步骤，直接影响回复质量）
                prompt = build_prompt(user_query, history)

                # 3. 调用SmallThinker-3B-Preview模型（此处为模拟，需替换为实际调用）
                # 真实调用可能是：response_text = generate_with_smallthinker(prompt)
                response_text = simulate_model_generation(prompt)  # 模拟生成

                # 4. 将回复通过WebSocket发回前端
                await manager.send_personal_message({
                    "type": "assistant_message",
                    "content": response_text
                }, websocket)

    except WebSocketDisconnect:
        manager.disconnect(websocket)
        print("客户端断开连接")
    except Exception as e:
        print(f"WebSocket处理异常: {e}")
        await manager.send_personal_message({
            "type": "error",
            "content": "服务内部错误"
        }, websocket)
        manager.disconnect(websocket)

def build_prompt(user_input: str, history: list) -> str:
    """构建模型输入的提示词。这是意图理解和回复质量的关键。"""
    prompt = "你是一个专业的智能客服助手，请用友好、专业、简洁的语气回答用户问题。\n\n"
    
    # 添加上下文历史
    for msg in history[-6:]:  # 控制上下文长度，避免过长
        role = "用户" if msg["role"] == "user" else "助手"
        prompt += f"{role}: {msg['content']}\n"
    
    prompt += f"用户: {user_input}\n助手:"
    return prompt

def simulate_model_generation(prompt: str) -> str:
    """模拟模型生成，实际项目中替换为真实的模型API调用。"""
    # 这里应该是调用SmallThinker-3B-Preview模型的代码
    # 例如使用Hugging Face Transformers库或通过HTTP调用部署好的模型服务
    # response = model.generate(prompt, max_length=500, ...)
    # return response[0]["generated_text"]
    
    # 模拟延迟和回复
    import time
    time.sleep(0.5)  # 模拟推理时间
    simulated_replies = [
        f"您好！关于“{prompt.split('用户:')[-1].split('助手:')[0].strip()}”，我们的标准处理流程是...您可以通过官网帮助中心查看详细步骤。",
        "我理解您的问题。根据您的情况，建议您先检查网络连接，然后尝试刷新页面。如果问题依旧，可以提供错误截图以便进一步排查。",
        "是的，这个功能在最新版本中已经支持。您可以在设置菜单的‘高级选项’里找到它。需要我引导您操作吗？"
    ]
    import random
    return random.choice(simulated_replies)

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

后端服务主要做三件事：1. 管理WebSocket连接；2. 接收前端问题，并可能结合对话历史，构建合适的提示词（Prompt）给模型；3. 调用SmallThinker模型获取回复，再传回前端。提示词工程（Prompt Engineering）在这里非常重要，好的提示词能引导模型生成更符合客服场景的、准确、有用的回答。

5. 效果优化与生产环境考量

把基础功能跑通只是第一步，要真正用到企业环境，还得考虑更多。

对话历史管理：我们之前把历史存在前端内存里，页面一刷新就没了。在实际应用中，通常需要把对话历史保存到后端数据库，并关联用户会话。这样用户下次再来，还能看到之前的记录，体验更好。

流式输出体验：上面的例子是等模型全部生成完再一次性返回。更好的体验是“打字机效果”，模型生成一个字就传回一个字。这需要后端和模型服务都支持流式输出（Server-Sent Events或WebSocket分片发送），前端则不断更新最后一条消息的内容。

意图识别与路由：不是所有问题都需要大模型出马。可以在调用大模型之前，加一层简单的规则引擎或小型的意图分类模型。比如，用户问“工作时间”，直接返回固定的答案；问“重置密码”，跳转到专门的帮助页面。这样既能快速响应，又能减轻大模型的负担。

错误处理与降级：网络可能不稳定，模型服务也可能出错。前端要有良好的加载状态、错误提示和重试机制。如果模型服务完全不可用，可以考虑降级到基于知识库的简单问答，或者直接提示用户稍后再试。

性能与安全：

• 节流与防抖：对用户的频繁发送操作要做限制，避免过度请求。
• 输入输出检查：前端和后端都要对输入内容做过滤和长度限制，防止恶意输入。对模型返回的内容，同样要做安全检查后再渲染。
• API密钥管理：如果调用的是云端API，密钥绝不能写在前端代码里，必须由后端保管和转发。

6. 总结

回过头看，用Vue整合SmallThinker-3B-Preview来做一个智能客服前端，技术路径是清晰的。核心在于利用WebSocket实现实时双向通信，前端提供友好的交互界面，后端负责复杂的模型调度和提示词工程。

实际开发中，最难的可能不是代码本身，而是如何设计提示词让模型回复得更“像”一个专业客服，以及如何管理好对话的上下文，让多轮对话不跑偏。这些都需要根据具体的业务场景反复调试和优化。

我们项目上线初期，也遇到了回复偶尔不相关或者啰嗦的问题。后来通过优化提示词模板、引入简单的意图过滤、并结合一些业务规则，效果提升了不少。对于大多数企业的内部客服或简单对外咨询场景，这个方案的成本和效果平衡得还不错。

如果你也想试试，建议先从一个小而具体的场景开始，比如“产品功能咨询”或“常见问题解答”，把这条链路跑通、效果调好，再逐步扩展到更复杂的业务中去。代码本身不难，关键是理解整个数据流，并围绕用户体验做好细节。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。