我如何使用 Algolia 构建‘读心’支持门户
发布: (2026年2月3日 GMT+8 15:14)
4 分钟阅读
原文: Dev.to
Source: Dev.to
概览
LiveAssist AI 将传统的支持工单表单转变为智能、主动的助手。系统不再等用户提交工单后再去搜索答案，而是在用户输入时就预测他们的需求。
纳米代理
侧边栏并行运行四个专用的纳米代理：
| 代理 | 目的 |
|---|---|
| 🔍 检索代理 | 在 <50 ms 内从 Algolia 获取相关的知识库文章 |
| 📦 上下文代理 | 提取实体（例如订单号）并显示实时小部件 |
| ❤️ 情感代理 | 检测沮丧情绪并提升优先级 |
| 🧠 洞察代理 | 分类意图并自动路由到正确的类别 |
示例交互
用户输入： “I want to return my ORD‑12345”
即时结果：
- 类别下拉框自动选择 “Returns & Refunds”
- 订单追踪小部件出现并显示实时状态
- “Refund Policy” 文章弹出，并带有 “Start a Return” 操作按钮
用户根本不需要提交工单——问题已解决！
演示与源码
- 在线演示：
- GitHub 仓库：
知识库索引
我对包含六篇支持文章的知识库进行了索引。每条记录遵循以下结构（JSON，已高亮语法）：
{
"objectID": "2",
"title": "Refund Policy",
"content": "We offer a 30‑day money‑back guarantee...",
"category": "Returns",
"tags": ["refund", "return", "money back"],
"smartAction": {
"type": "link",
"url": "/returns/start",
"label": "Start a Return"
}
}smartAction 字段是关键：它将搜索结果转化为可操作的 UI 组件，而不是纯文本。
主动检索流程
传统的支持表单是被动的：用户提交 → 代理搜索 → 代理回复。
LiveAssist AI 通过让检索变得主动且持续来颠覆这一流程：
用户键入
↓ (防抖 300 ms)
Algolia 搜索 → 渲染结果
↓
实体抽取（订单号）
↓
情感分析（沮丧关键词）
↓
意图分类（自动路由）每一层都在不需要用户额外操作的情况下加入智能。搜索查询本身就充当了“提示”，其构造方式如下：
- 字段拼接：
query = subject + " " + description（捕获完整上下文） - 多属性匹配：Algolia 在 title、content 和 tags 上进行搜索
性能与用户感知
- 即时反馈： 限制为 3 条命中，使侧边栏保持聚焦且不至于信息过载。
- 延迟： Algolia 稳定在 10–50 ms 内返回结果；用户在 100 ms 以下的响应会感受到“瞬间”。
- 体验： 没有加载指示器，也不需要等待——流畅的交互让人感觉系统在“读懂他们的想法”。
指标
| 指标 | 未使用 LiveAssist 时 | 使用 LiveAssist 时 |
|---|---|---|
| 提交的工单比例 | 100 % | ~40 %（估计） |
| 解决时间 | 分钟 / 小时 | 秒级 |
| 用户满意度 | 被动 | 主动 |
通过在工单提交前就展示解决方案，支持量下降而用户满意度提升——这得益于 Algolia 检索的高速，几乎是“无感知”的。
技术栈
- 前端： React + Vite
- 搜索： Algolia (
algoliasearch) - 样式： Vanilla CSS + Glassmorphism 设计
- 架构： 多代理模式 + 响应式状态管理
- 使用 ☕ 与 Algolia 构建