From 146a43df28a3bc21c1b0423f40846abba9d00dc7 Mon Sep 17 00:00:00 2001 From: mlogclub Date: Mon, 20 Apr 2026 22:31:06 +0800 Subject: [PATCH] update widget home page --- widget/app/globals.css | 6 +- widget/app/page.tsx | 687 +++++++++++++++++++++++++++------------- widget/app/page.tsx.bak | 452 ++++++++++++++++++++++++++ 3 files changed, 914 insertions(+), 231 deletions(-) create mode 100644 widget/app/page.tsx.bak diff --git a/widget/app/globals.css b/widget/app/globals.css index e648c5d..aa6c1cc 100644 --- a/widget/app/globals.css +++ b/widget/app/globals.css @@ -21,10 +21,10 @@ html, body { margin: 0; height: 100%; - overflow: hidden; + overflow-x: hidden; background: - radial-gradient(circle at top, rgba(37, 99, 235, 0.12), transparent 34%), - linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%); + radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 30%), + linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%); color: var(--foreground); font-family: "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; diff --git a/widget/app/page.tsx b/widget/app/page.tsx index 8dd1f0d..42abc1d 100644 --- a/widget/app/page.tsx +++ b/widget/app/page.tsx @@ -2,6 +2,16 @@ import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; +import { + ArrowRight, + Bot, + ChartColumn, + Cpu, + DatabaseZap, + GitBranch, + MessageSquareText, + ShieldCheck, +} from "lucide-react"; import { generateUUID } from "@/lib/utils"; import type { WidgetHostConfig } from "@/lib/widget/config"; @@ -13,6 +23,90 @@ const OFFICIAL_SITE_URL = "https://aiagent.huabei.pro"; type TestConfig = WidgetHostConfig; +const featureCards = [ + { + title: "先让 AI 处理重复路径", + description: "把常见问题和标准流程优先交给 Agent，降低人工压力。", + icon: MessageSquareText, + }, + { + title: "人工接管不脱离上下文", + description: "在低置信度、命中规则或用户要求时，带着会话上下文平滑转人工。", + icon: Bot, + }, + { + title: "知识、人工和工单形成闭环", + description: "把知识检索、人工接管、外部系统调用和工单流程放进同一条客服链路。", + icon: GitBranch, + }, + { + title: "面向客服运营而不是 Demo", + description: "强调稳定运行、可观测流程和结构化升级，不把项目做成聊天壳子。", + icon: ShieldCheck, + }, +]; + +const scopeCards = [ + { + title: "会话运行时", + description: "接收用户消息、维护会话状态并触发回复执行。", + icon: MessageSquareText, + }, + { + title: "AI 知识检索", + description: "基于 RAG 的企业知识库，提升答案准确性。", + icon: DatabaseZap, + }, + { + title: "AI Agent 运行时", + description: "自定义 Skill，通过 MCP 协议对接企业业务系统。", + icon: Cpu, + }, + { + title: "人工协同", + description: "在 AI 不该继续时，把会话转给人工客服或指定客服组。", + icon: Bot, + }, + { + title: "工单闭环", + description: "从会话创建工单，跟踪处理过程，直到最终关闭。", + icon: ChartColumn, + }, +]; + +const flowSteps = [ + { + step: "01", + title: "用户发起咨询", + description: "用户通过 Web Widget 或开放接口进入系统，创建新会话或匹配已有会话。", + }, + { + step: "02", + title: "系统装载上下文", + description: "加载会话历史、AI 配置、可用 Skill、知识库和工具能力，为当前问题准备执行上下文。", + }, + { + step: "03", + title: "AI 优先回复", + description: "AI Agent 结合历史消息、知识检索结果和可用工具，优先处理常见问题与标准流程。", + }, + { + step: "04", + title: "按需调用能力", + description: "在回复过程中执行 Skill、通过 MCP 调用外部系统，或触发特定业务流程。", + }, + { + step: "05", + title: "转交人工处理", + description: "当 AI 无法继续有效处理，或用户希望由人工接待时，会话带着上下文转交客服。", + }, + { + step: "06", + title: "转入工单流程", + description: "当问题需要跨时段、跨角色持续跟进时，可以从会话直接转入工单流程。", + }, +]; + function getWidgetRootPath(pathname: string): string { return pathname.startsWith("/widget") ? "/widget" : ""; } @@ -22,7 +116,7 @@ function getWidgetSdkUrl(baseUrl: string, pathname: string): string { } function generateRandomSubject(): string { - return `用户${generateUUID().replace(/-/g, "").slice(0, 8)}`; + return `设备会话-${generateUUID().replace(/-/g, "").slice(0, 8)}`; } function buildDefaultConfig(baseUrl: string): TestConfig { @@ -30,11 +124,11 @@ function buildDefaultConfig(baseUrl: string): TestConfig { channelId: "", baseUrl, apiBaseUrl: baseUrl, - title: "在线客服", - subtitle: "贝壳AI客服为您服务", + title: "IoT 智能客服", + subtitle: "设备告警、工单协同与在线服务统一入口", position: "right", - themeColor: "#0f6cbd", - width: "880px", + themeColor: "#2563eb", + width: "680px", subject: generateRandomSubject(), }; } @@ -95,7 +189,7 @@ function injectWidget(config: TestConfig) { document.body.appendChild(script); } -function WidgetTestPageInner() { +function WidgetHomePageInner() { const [config, setConfig] = useState(getInitialConfig); const [status, setStatus] = useState(() => getInitialConfig().channelId ? "Widget 已挂载" : "请先填写 channelId", @@ -113,30 +207,29 @@ function WidgetTestPageInner() { }; }, [config]); - const currentConfig = config; - function updateField( key: K, value: TestConfig[K], ) { - setConfig((current) => (current ? { ...current, [key]: value } : current)); + setConfig((current) => ({ ...current, [key]: value })); } function handleApply() { const nextConfig = { - ...currentConfig, - channelId: currentConfig.channelId.trim(), - baseUrl: currentConfig.baseUrl.trim() || window.location.origin, + ...config, + channelId: config.channelId.trim(), + baseUrl: config.baseUrl.trim() || window.location.origin, apiBaseUrl: - currentConfig.apiBaseUrl?.trim() || - currentConfig.baseUrl.trim() || + config.apiBaseUrl?.trim() || + config.baseUrl.trim() || window.location.origin, - title: currentConfig.title?.trim() || "在线客服", - subtitle: - currentConfig.subtitle?.trim() || "", - themeColor: currentConfig.themeColor?.trim() || "#0f6cbd", - width: currentConfig.width?.trim() || "680px", + title: config.title?.trim() || "IoT 智能客服", + subtitle: config.subtitle?.trim() || "设备告警、工单协同与在线服务统一入口", + themeColor: config.themeColor?.trim() || "#2563eb", + width: config.width?.trim() || "680px", + subject: config.subject?.trim() || generateRandomSubject(), }; + setConfig(nextConfig); window.localStorage.setItem(STORAGE_KEY, JSON.stringify(nextConfig)); @@ -150,29 +243,28 @@ function WidgetTestPageInner() { setStatus("Widget 已挂载"); } - const sdkUrl = getWidgetSdkUrl(currentConfig.baseUrl, window.location.pathname); - + const sdkUrl = getWidgetSdkUrl(config.baseUrl, window.location.pathname); const snippet = ` `; return ( -
-
-
+
+
+
-
+
-
-
-
-
-
-
- 插件配置 -
-
- 这里是首页主体。先填渠道和展示参数，再直接挂载 Widget 验证效果。 +
+
+

+ AI 优先接待，人工无缝协同 +

+ +

+ 贝壳 AI 客服是一个以 AI Agent 为核心的智能客服系统，把在线会话、 + 知识库检索、工单流转和人工接管串成一条完整链路。 +

+ + + +
+ {[ + { label: "接待模式", value: "AI + 人工协同" }, + { label: "回答方式", value: "知识库 RAG 驱动" }, + { label: "运行能力", value: "Skills + MCP + 工单流程" }, + ].map((item) => ( +
+
{item.label}
+
+ {item.value}
- {/*
- {status} -
*/} -
- -
- - - - - - - - - -
- -
- - -
-
- -
-
- 宿主页面接入脚本 -
-
- 这段脚本就是外部业务系统接入时需要放到宿主页面里的最小配置。 Widget 验证效果。 -
- 
-                {snippet}
-
-
+ ))} +
+
+
+
+
产品能力
+

+ 面向真实客服场景的开源系统 +

+

+ 用一套系统处理用户咨询、AI 回复、知识检索、人工接管和后续工单。 +

+
-
-
-
+
+ {featureCards.map((item) => { + const Icon = item.icon; + return ( +
+
+ +
+

+ {item.title} +

+

+ {item.description} +

+
+ ); + })} +
+
+
+ +
+
+
+
+ 覆盖完整客服链路 +
+

+ 从第一条消息到问题关闭，关键环节都在同一套系统里。 +

+ +
+ {scopeCards.map((item) => { + const Icon = item.icon; + return ( +
+
+
+ +
+
+
+ {item.title} +
+
+ {item.description} +
+
+
+
+ ); + })} +
+
+ +
+
+ 客服处理闭环 +
+

+ 从用户发起咨询，到 AI 回复、人工接管、工单跟踪，核心流程都在同一套系统里完成。 +

+ +
+ {flowSteps.map((item) => ( +
+
+ {item.step} +
+
+
+ {item.title} +
+
+ {item.description} +
+
+
+ ))} +
+
+
+
+ +
+
+
+
+
接入方式
+

+ 保留在线配置与接入脚本，直接拿来演示和集成 +

+

+ 这里可以直接填写 `channelId`、调整宿主参数并挂载 Widget，也可以复制脚本到业务系统完成基础接入。 +

+
+
+ +
+
+
Widget 配置
+
+ 宿主页面接入时需要的基础参数。 +
+ +
+ + + + + + + + + +
+ +
+ + +
+
+ +
+
接入脚本
+
+ 复制到宿主页面即可完成基础接入。 +
+ 
+                  {snippet}
+
+ +
+
+
+
+ +