wl
3ad6eee0d9
- 配置 Docker Compose 多服务编排 - 实现 Chatwoot + Agent 集成 - 配置 Strapi MCP 知识库 - 支持 7 种语言的 FAQ 系统 - 实现 LangGraph AI 工作流 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
199 lines
6.4 KiB
HTML
199 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>B2B AI 助手 - 测试页面</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
.info-box {
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #667eea;
|
|
padding: 15px 20px;
|
|
margin: 20px 0;
|
|
border-radius: 5px;
|
|
}
|
|
.info-box h3 {
|
|
margin-top: 0;
|
|
color: #667eea;
|
|
}
|
|
.feature-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.feature-card {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
.feature-card h4 {
|
|
color: #667eea;
|
|
margin-bottom: 10px;
|
|
}
|
|
.test-questions {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffc107;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
}
|
|
.test-questions h3 {
|
|
margin-top: 0;
|
|
color: #856404;
|
|
}
|
|
.question-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.question-list li {
|
|
background: white;
|
|
margin: 10px 0;
|
|
padding: 12px 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.question-list li:hover {
|
|
background: #667eea;
|
|
color: white;
|
|
transform: translateX(5px);
|
|
}
|
|
.status {
|
|
text-align: center;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
font-weight: bold;
|
|
}
|
|
.status.online {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.status.testing {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🤖 B2B AI 智能客服助手</h1>
|
|
<p class="subtitle">基于 LangGraph + MCP 的智能客服系统</p>
|
|
|
|
<div class="status online">
|
|
✅ 系统状态：所有服务运行正常
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>📝 如何测试</h3>
|
|
<ol>
|
|
<li>点击右下角的聊天图标打开对话窗口</li>
|
|
<li>输入你的名字开始对话</li>
|
|
<li>尝试下面的问题测试 AI 能力</li>
|
|
<li>查看 AI 如何理解并回答你的问题</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-questions">
|
|
<h3>💬 推荐测试问题</h3>
|
|
<p style="color: #666; margin-bottom: 15px;">点击以下问题直接复制到聊天窗口：</p>
|
|
<ul class="question-list">
|
|
<li onclick="copyQuestion(this.textContent)">🕐 你们的营业时间是什么？</li>
|
|
<li onclick="copyQuestion(this.textContent)">📦 我想查询订单状态</li>
|
|
<li onclick="copyQuestion(this.textContent)">🔍 你们有哪些产品？</li>
|
|
<li onclick="copyQuestion(this.textContent)">📞 如何联系客服？</li>
|
|
<li onclick="copyQuestion(this.textContent)">🛍️ 我想退换货</li>
|
|
<li onclick="copyQuestion(this.textContent)">💰 支付方式有哪些？</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-card">
|
|
<h4>🎯 智能意图识别</h4>
|
|
<p>自动识别客户需求并分类</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>📚 知识库查询</h4>
|
|
<p>快速检索 FAQ 和政策文档</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>📦 订单管理</h4>
|
|
<p>查询订单、售后等服务</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🔄 多轮对话</h4>
|
|
<p>支持上下文理解的连续对话</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h3>🔧 技术栈</h3>
|
|
<ul>
|
|
<li><strong>前端：</strong>Chatwoot 客户支持平台</li>
|
|
<li><strong>AI 引擎：</strong>LangGraph + 智谱 AI (GLM-4.5)</li>
|
|
<li><strong>知识库：</strong>Strapi CMS + MCP</li>
|
|
<li><strong>业务系统：</strong>Hyperf PHP API</li>
|
|
<li><strong>缓存：</strong>Redis</li>
|
|
<li><strong>容器：</strong>Docker Compose</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyQuestion(text) {
|
|
// 移除表情符号
|
|
const cleanText = text.replace(/^[^\s]+\s*/, '');
|
|
navigator.clipboard.writeText(cleanText).then(() => {
|
|
alert('问题已复制！请粘贴到聊天窗口中发送。');
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!-- Chatwoot Widget -->
|
|
<script>
|
|
window.chatwootSettings = {"position":"right","type":"expanded_bubble","launcherTitle":"Chat with us"};
|
|
(function(d,t) {
|
|
var BASE_URL="http://localhost:3000";
|
|
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
|
g.src=BASE_URL+"/packs/js/sdk.js";
|
|
g.defer = true;
|
|
g.async = true;
|
|
s.parentNode.insertBefore(g,s);
|
|
g.onload=function(){
|
|
window.chatwootSDK.run({
|
|
websiteToken: '39PNCMvbMk3NvB7uaDNucc6o',
|
|
baseUrl: BASE_URL
|
|
})
|
|
}
|
|
})(document,"script");
|
|
</script>
|
|
</body>
|
|
</html>
|