feat: add WeChat MP channel support and enhance widget configuration

- Updated output path for generated enums to reflect new structure.
- Enhanced ChannelController to handle WeChat MP OAuth authorization and callback.
- Introduced WechatMPChannelConfig DTO for WeChat MP specific configurations.
- Modified WidgetConfigResponse to include channel type and external source.
- Added enums for WeChat MP channel type and external source.
- Implemented OAuth flow for WeChat MP, including state signing and verification.
- Updated frontend forms to accommodate WeChat MP configurations.
- Enhanced API interactions to support WeChat MP external ID and source.
- Updated generated enums to include WeChat MP external source.
This commit is contained in:
mlogclub
2026-04-27 15:42:04 +08:00
parent 15d0d81fa1
commit fbabb174d2
14 changed files with 665 additions and 75 deletions
+1 -1
View File
@@ -17,7 +17,7 @@ import (
const (
enumsPkgName = "enums"
enumsDir = "internal/pkg/enums"
outputPath = "dashboard/lib/generated/enums.ts"
outputPath = "web/lib/generated/enums.ts"
)
type enumValueType string
+74 -8
View File
@@ -2,10 +2,13 @@ package api
import (
"cs-agent/internal/pkg/dto/response"
"cs-agent/internal/pkg/enums"
"cs-agent/internal/pkg/errorsx"
"cs-agent/internal/services"
"github.com/kataras/iris/v12"
"github.com/mlogclub/simple/web"
"github.com/mlogclub/simple/web/params"
)
type ChannelController struct {
@@ -17,18 +20,81 @@ func (c *ChannelController) AnyConfig() *web.JsonResult {
if channel == nil {
return web.JsonErrorMsg("接入渠道未初始化")
}
cfg, err := services.ChannelService.ParseWebChannelConfig(channel.ConfigJSON)
cfg, externalSource, err := resolveWidgetConfig(channel.ChannelType, channel.ConfigJSON)
if err != nil {
return web.JsonErrorMsg("Web渠道配置不合法")
return web.JsonError(err)
}
ret := response.WidgetConfigResponse{
ChannelID: channel.ChannelID,
Title: cfg.Title,
Subtitle: cfg.Subtitle,
ThemeColor: cfg.ThemeColor,
Position: cfg.Position,
Width: cfg.Width,
ChannelID: channel.ChannelID,
ChannelType: channel.ChannelType,
ExternalSource: externalSource,
Title: cfg.Title,
Subtitle: cfg.Subtitle,
ThemeColor: cfg.ThemeColor,
Position: cfg.Position,
Width: cfg.Width,
}
return web.JsonData(ret)
}
func (c *ChannelController) AnyWechat_mpOauthAuthorize() *web.JsonResult {
channelID, _ := params.Get(c.Ctx, "channelId")
returnPath, _ := params.Get(c.Ctx, "returnPath")
redirectURL, err := services.ChannelService.BuildWechatMPOAuthURL(c.Ctx, channelID, returnPath)
if err != nil {
return web.JsonError(err)
}
c.Ctx.Redirect(redirectURL)
return nil
}
func (c *ChannelController) AnyWechat_mpOauthCallback() *web.JsonResult {
code, _ := params.Get(c.Ctx, "code")
state, _ := params.Get(c.Ctx, "state")
result, err := services.ChannelService.CompleteWechatMPOAuth(c.Ctx.Request().Context(), code, state)
if err != nil {
return web.JsonError(err)
}
c.Ctx.Redirect(services.BuildWechatMPChatRedirectURL(c.Ctx, result))
return nil
}
type webLikeWidgetConfig struct {
Title string
Subtitle string
ThemeColor string
Position string
Width string
}
func resolveWidgetConfig(channelType, rawConfig string) (*webLikeWidgetConfig, string, error) {
switch channelType {
case enums.ChannelTypeWeb:
cfg, err := services.ChannelService.ParseWebChannelConfig(rawConfig)
if err != nil {
return nil, "", err
}
return &webLikeWidgetConfig{
Title: cfg.Title,
Subtitle: cfg.Subtitle,
ThemeColor: cfg.ThemeColor,
Position: cfg.Position,
Width: cfg.Width,
}, string(enums.ExternalSourceWebChat), nil
case enums.ChannelTypeWechatMP:
cfg, err := services.ChannelService.ParseWechatMPChannelConfig(rawConfig)
if err != nil {
return nil, "", err
}
return &webLikeWidgetConfig{
Title: cfg.Title,
Subtitle: cfg.Subtitle,
ThemeColor: cfg.ThemeColor,
Position: cfg.Position,
Width: cfg.Width,
}, string(enums.ExternalSourceWechatMP), nil
default:
return nil, "", errorsx.InvalidParam("该渠道不支持开放客服配置")
}
}
+12
View File
@@ -23,3 +23,15 @@ type WebChannelConfig struct {
Position string `json:"position"`
Width string `json:"width"`
}
type WechatMPChannelConfig struct {
Title string `json:"title"`
Subtitle string `json:"subtitle"`
ThemeColor string `json:"themeColor"`
Position string `json:"position"`
Width string `json:"width"`
AppID string `json:"appId"`
AppSecret string `json:"appSecret"`
OAuthScope string `json:"oauthScope"`
OAuthEnabled bool `json:"oauthEnabled"`
}
+8 -6
View File
@@ -1,10 +1,12 @@
package response
type WidgetConfigResponse struct {
ChannelID string `json:"channelId"`
Title string `json:"title"`
Subtitle string `json:"subtitle"`
ThemeColor string `json:"themeColor"`
Position string `json:"position"`
Width string `json:"width"`
ChannelID string `json:"channelId"`
ChannelType string `json:"channelType"`
ExternalSource string `json:"externalSource"`
Title string `json:"title"`
Subtitle string `json:"subtitle"`
ThemeColor string `json:"themeColor"`
Position string `json:"position"`
Width string `json:"width"`
}
+3 -1
View File
@@ -7,11 +7,13 @@ type ExternalSource string
const (
ExternalSourceWebChat ExternalSource = "web_chat"
ExternalSourceWechatMP ExternalSource = "wechat_mp"
ExternalSourceWxWorkKF ExternalSource = "wxwork_kf"
)
var externalSourceLabelMap = map[ExternalSource]string{
ExternalSourceWebChat: "网页客服",
ExternalSourceWechatMP: "微信公众号",
ExternalSourceWxWorkKF: "企业微信客服",
}
@@ -25,7 +27,7 @@ func GetExternalSourceLabel(v ExternalSource) string {
// IsAllowedOpenImExternalSource 开放 IM 入口允许的外部来源(闭集校验)。
func IsAllowedOpenImExternalSource(s ExternalSource) bool {
switch s {
case ExternalSourceWebChat:
case ExternalSourceWebChat, ExternalSourceWechatMP:
return true
default:
return false
+1
View File
@@ -18,6 +18,7 @@ const (
const (
ChannelTypeWeb = "web"
ChannelTypeWechatMP = "wechat_mp"
ChannelTypeWxWorkKF = "wxwork_kf"
)
+301 -1
View File
@@ -1,6 +1,9 @@
package services
import (
"context"
"crypto/hmac"
"crypto/sha256"
"cs-agent/internal/models"
"cs-agent/internal/pkg/dto"
"cs-agent/internal/pkg/dto/request"
@@ -11,7 +14,12 @@ import (
"cs-agent/internal/pkg/utils"
"cs-agent/internal/repositories"
"cs-agent/internal/wxwork"
"encoding/base64"
"encoding/json"
"errors"
"fmt"
"net/url"
"strconv"
"strings"
"time"
@@ -19,6 +27,8 @@ import (
"github.com/mlogclub/simple/common/strs"
"github.com/mlogclub/simple/sqls"
"github.com/mlogclub/simple/web/params"
"github.com/silenceper/wechat/v2"
offConfig "github.com/silenceper/wechat/v2/officialaccount/config"
"github.com/silenceper/wechat/v2/work/kf"
)
@@ -31,6 +41,19 @@ func newChannelService() *channelService {
type channelService struct {
}
type wechatMPOAuthState struct {
ChannelID string `json:"channelId"`
ReturnPath string `json:"returnPath"`
ExpiresAt int64 `json:"expiresAt"`
}
type WechatMPOAuthResult struct {
ChannelID string
ExternalID string
ExternalName string
ReturnPath string
}
func (s *channelService) Get(id int64) *models.Channel {
return repositories.ChannelRepository.Get(sqls.DB(), id)
}
@@ -239,6 +262,140 @@ func (s *channelService) ParseWebChannelConfig(raw string) (*dto.WebChannelConfi
return cfg, nil
}
func (s *channelService) ParseWechatMPChannelConfig(raw string) (*dto.WechatMPChannelConfig, error) {
raw = strings.TrimSpace(raw)
cfg := &dto.WechatMPChannelConfig{
Title: "公众号客服",
Subtitle: "欢迎咨询",
ThemeColor: "#2563eb",
Position: "right",
Width: "380px",
OAuthScope: "snsapi_base",
OAuthEnabled: true,
}
if raw != "" {
if err := json.Unmarshal([]byte(raw), cfg); err != nil {
return nil, err
}
}
cfg.Title = strings.TrimSpace(cfg.Title)
if cfg.Title == "" {
cfg.Title = "公众号客服"
}
cfg.Subtitle = strings.TrimSpace(cfg.Subtitle)
cfg.ThemeColor = strings.TrimSpace(cfg.ThemeColor)
if cfg.ThemeColor == "" {
cfg.ThemeColor = "#2563eb"
}
cfg.Position = strings.TrimSpace(cfg.Position)
if cfg.Position == "" {
cfg.Position = "right"
}
if cfg.Position != "left" && cfg.Position != "right" {
return nil, errorsx.InvalidParam("微信公众号渠道配置 position 只能为 left 或 right")
}
cfg.Width = strings.TrimSpace(cfg.Width)
if cfg.Width == "" {
cfg.Width = "380px"
}
cfg.AppID = strings.TrimSpace(cfg.AppID)
cfg.AppSecret = strings.TrimSpace(cfg.AppSecret)
cfg.OAuthScope = strings.TrimSpace(cfg.OAuthScope)
if cfg.OAuthScope == "" {
cfg.OAuthScope = "snsapi_base"
}
if cfg.OAuthScope != "snsapi_base" && cfg.OAuthScope != "snsapi_userinfo" {
return nil, errorsx.InvalidParam("微信公众号渠道配置 oauthScope 只能为 snsapi_base 或 snsapi_userinfo")
}
return cfg, nil
}
func (s *channelService) BuildWechatMPOAuthURL(ctx iris.Context, channelID, returnPath string) (string, error) {
channelID = strings.TrimSpace(channelID)
if channelID == "" {
return "", errorsx.InvalidParam("channelId不能为空")
}
channel := repositories.ChannelRepository.GetByChannelID(sqls.DB(), channelID)
if channel == nil || channel.Status != enums.StatusOk || channel.ChannelType != enums.ChannelTypeWechatMP {
return "", errorsx.InvalidParam("微信公众号渠道不存在或已停用")
}
cfg, err := s.ParseWechatMPChannelConfig(channel.ConfigJSON)
if err != nil {
return "", errorsx.InvalidParam("微信公众号渠道配置不合法")
}
if !cfg.OAuthEnabled {
return "", errorsx.InvalidParam("微信公众号渠道未启用 OAuth")
}
if cfg.AppID == "" || cfg.AppSecret == "" {
return "", errorsx.InvalidParam("微信公众号渠道缺少 appId 或 appSecret")
}
state, err := s.signWechatMPOAuthState(wechatMPOAuthState{
ChannelID: channel.ChannelID,
ReturnPath: normalizeWechatMPReturnPath(returnPath),
ExpiresAt: time.Now().Add(10 * time.Minute).Unix(),
}, cfg.AppSecret)
if err != nil {
return "", err
}
redirectURI := buildAbsoluteURL(ctx, "/api/channel/wechat_mp/oauth/callback", nil)
oa := wechat.NewWechat().GetOfficialAccount(&offConfig.Config{
AppID: cfg.AppID,
AppSecret: cfg.AppSecret,
})
return oa.GetOauth().GetRedirectURL(redirectURI, cfg.OAuthScope, state)
}
func (s *channelService) CompleteWechatMPOAuth(ctx context.Context, code, state string) (*WechatMPOAuthResult, error) {
code = strings.TrimSpace(code)
if code == "" {
return nil, errorsx.InvalidParam("code不能为空")
}
payload, err := decodeWechatMPOAuthStatePayload(state)
if err != nil {
return nil, errorsx.InvalidParam("OAuth state不合法")
}
channel := repositories.ChannelRepository.GetByChannelID(sqls.DB(), payload.ChannelID)
if channel == nil || channel.Status != enums.StatusOk || channel.ChannelType != enums.ChannelTypeWechatMP {
return nil, errorsx.InvalidParam("微信公众号渠道不存在或已停用")
}
cfg, err := s.ParseWechatMPChannelConfig(channel.ConfigJSON)
if err != nil {
return nil, errorsx.InvalidParam("微信公众号渠道配置不合法")
}
if cfg.AppID == "" || cfg.AppSecret == "" {
return nil, errorsx.InvalidParam("微信公众号渠道缺少 appId 或 appSecret")
}
if _, err := s.verifyWechatMPOAuthState(state, cfg.AppSecret); err != nil {
return nil, err
}
oa := wechat.NewWechat().GetOfficialAccount(&offConfig.Config{
AppID: cfg.AppID,
AppSecret: cfg.AppSecret,
})
oauth := oa.GetOauth()
token, err := oauth.GetUserAccessTokenContext(ctx, code)
if err != nil {
return nil, err
}
externalName := ""
if strings.Contains(token.Scope, "snsapi_userinfo") {
if info, infoErr := oauth.GetUserInfoContext(ctx, token.AccessToken, token.OpenID, "zh_CN"); infoErr == nil {
externalName = strings.TrimSpace(info.Nickname)
}
}
if strings.TrimSpace(token.OpenID) == "" {
return nil, errorsx.InvalidParam("微信授权未返回 openid")
}
return &WechatMPOAuthResult{
ChannelID: channel.ChannelID,
ExternalID: strings.TrimSpace(token.OpenID),
ExternalName: externalName,
ReturnPath: normalizeWechatMPReturnPath(payload.ReturnPath),
}, nil
}
func (s *channelService) GetEnabledWxWorkKFChannelByOpenKfID(openKfID string) *models.Channel {
openKfID = strings.TrimSpace(openKfID)
if openKfID == "" {
@@ -274,7 +431,7 @@ func (s *channelService) GetEnabledChannel(ctx iris.Context) *models.Channel {
func (s *channelService) buildChannelModel(id int64, req request.CreateChannelRequest) (*models.Channel, error) {
channelType := strings.TrimSpace(req.ChannelType)
if channelType != enums.ChannelTypeWeb && channelType != enums.ChannelTypeWxWorkKF {
if channelType != enums.ChannelTypeWeb && channelType != enums.ChannelTypeWechatMP && channelType != enums.ChannelTypeWxWorkKF {
return nil, errorsx.InvalidParam("渠道类型不合法")
}
name := strings.TrimSpace(req.Name)
@@ -322,6 +479,25 @@ func (s *channelService) buildChannelModel(id int64, req request.CreateChannelRe
return nil, err
}
configJSON = string(configBytes)
case enums.ChannelTypeWechatMP:
if channelID == "" {
channelID = strs.UUID()
}
if exists := s.Take("channel_id = ? AND status <> ? AND id <> ?", channelID, enums.StatusDeleted, id); exists != nil {
return nil, errorsx.InvalidParam("渠道标识已存在")
}
cfg, err := s.ParseWechatMPChannelConfig(configJSON)
if err != nil {
return nil, errorsx.InvalidParam("微信公众号渠道配置不合法")
}
if cfg == nil || cfg.AppID == "" || cfg.AppSecret == "" {
return nil, errorsx.InvalidParam("微信公众号渠道配置缺少 appId 或 appSecret")
}
configBytes, err := json.Marshal(cfg)
if err != nil {
return nil, err
}
configJSON = string(configBytes)
case enums.ChannelTypeWxWorkKF:
if channelID == "" {
channelID = strs.UUID()
@@ -351,3 +527,127 @@ func (s *channelService) buildChannelModel(id int64, req request.CreateChannelRe
Remark: strings.TrimSpace(req.Remark),
}, nil
}
func (s *channelService) signWechatMPOAuthState(payload wechatMPOAuthState, secret string) (string, error) {
payload.ChannelID = strings.TrimSpace(payload.ChannelID)
if payload.ChannelID == "" || payload.ExpiresAt <= 0 {
return "", errors.New("invalid oauth state payload")
}
payload.ReturnPath = normalizeWechatMPReturnPath(payload.ReturnPath)
if len(payload.ReturnPath) > 14 {
payload.ReturnPath = "/kefu/chat/"
}
encodedPayload := base64.RawURLEncoding.EncodeToString([]byte(
fmt.Sprintf("%s|%d|%s", payload.ChannelID, payload.ExpiresAt, payload.ReturnPath),
))
mac := hmac.New(sha256.New, []byte(secret))
_, _ = mac.Write([]byte(encodedPayload))
signature := base64.RawURLEncoding.EncodeToString(mac.Sum(nil))
return encodedPayload + "." + signature, nil
}
func (s *channelService) verifyWechatMPOAuthState(raw, secret string) (*wechatMPOAuthState, error) {
raw = strings.TrimSpace(raw)
parts := strings.Split(raw, ".")
if len(parts) != 2 || parts[0] == "" || parts[1] == "" {
return nil, errorsx.InvalidParam("OAuth state不合法")
}
mac := hmac.New(sha256.New, []byte(secret))
_, _ = mac.Write([]byte(parts[0]))
expected := mac.Sum(nil)
actual, err := base64.RawURLEncoding.DecodeString(parts[1])
if err != nil || !hmac.Equal(actual, expected) {
return nil, errorsx.InvalidParam("OAuth state签名不合法")
}
payload, err := decodeWechatMPOAuthStatePayload(raw)
if err != nil {
return nil, errorsx.InvalidParam("OAuth state不合法")
}
if time.Now().Unix() > payload.ExpiresAt {
return nil, errorsx.InvalidParam("OAuth state已过期")
}
return payload, nil
}
func decodeWechatMPOAuthStatePayload(raw string) (*wechatMPOAuthState, error) {
raw = strings.TrimSpace(raw)
parts := strings.Split(raw, ".")
if len(parts) != 2 || parts[0] == "" {
return nil, errors.New("invalid oauth state")
}
data, err := base64.RawURLEncoding.DecodeString(parts[0])
if err != nil {
return nil, err
}
stateParts := strings.SplitN(string(data), "|", 3)
if len(stateParts) != 3 {
return nil, errors.New("invalid oauth state payload")
}
expiresAt, err := strconv.ParseInt(stateParts[1], 10, 64)
if err != nil {
return nil, err
}
payload := &wechatMPOAuthState{
ChannelID: strings.TrimSpace(stateParts[0]),
ReturnPath: strings.TrimSpace(stateParts[2]),
ExpiresAt: expiresAt,
}
payload.ChannelID = strings.TrimSpace(payload.ChannelID)
payload.ReturnPath = normalizeWechatMPReturnPath(payload.ReturnPath)
if payload.ChannelID == "" || payload.ExpiresAt <= 0 {
return nil, errors.New("invalid oauth state payload")
}
return payload, nil
}
func normalizeWechatMPReturnPath(returnPath string) string {
returnPath = strings.TrimSpace(returnPath)
if returnPath == "" {
return "/kefu/chat/"
}
if !strings.HasPrefix(returnPath, "/") || strings.HasPrefix(returnPath, "//") {
return "/kefu/chat/"
}
if strings.Contains(returnPath, "\n") || strings.Contains(returnPath, "\r") {
return "/kefu/chat/"
}
return returnPath
}
func buildAbsoluteURL(ctx iris.Context, path string, values url.Values) string {
scheme := ctx.GetHeader("X-Forwarded-Proto")
if scheme == "" {
scheme = ctx.GetHeader("X-Scheme")
}
if scheme == "" {
if ctx.Request().TLS != nil {
scheme = "https"
} else {
scheme = "http"
}
}
host := ctx.GetHeader("X-Forwarded-Host")
if host == "" {
host = ctx.Host()
}
u := url.URL{
Scheme: scheme,
Host: host,
Path: path,
}
if values != nil {
u.RawQuery = values.Encode()
}
return u.String()
}
func BuildWechatMPChatRedirectURL(ctx iris.Context, result *WechatMPOAuthResult) string {
values := url.Values{}
values.Set("channelId", result.ChannelID)
values.Set("externalSource", string(enums.ExternalSourceWechatMP))
values.Set("externalId", result.ExternalID)
if result.ExternalName != "" {
values.Set("subject", result.ExternalName)
}
return buildAbsoluteURL(ctx, normalizeWechatMPReturnPath(result.ReturnPath), values)
}
+234 -55
View File
@@ -38,9 +38,15 @@ type ChannelFormDialogProps = {
const channelTypeOptions = [
{ value: "web", label: "Web 站点" },
{ value: "wechat_mp", label: "微信公众号" },
{ value: "wxwork_kf", label: "企业微信客服" },
] as const
const oauthScopeOptions = [
{ value: "snsapi_base", label: "静默授权" },
{ value: "snsapi_userinfo", label: "用户信息授权" },
] as const
const widgetPositionOptions = [
{ value: "right", label: "右下角" },
{ value: "left", label: "左下角" },
@@ -54,6 +60,13 @@ type WebChannelConfig = {
width?: string
}
type WechatMPChannelConfig = WebChannelConfig & {
appId?: string
appSecret?: string
oauthScope?: "snsapi_base" | "snsapi_userinfo"
oauthEnabled?: boolean
}
const defaultWebChannelConfig: Required<WebChannelConfig> = {
title: "在线客服",
subtitle: "欢迎咨询",
@@ -64,7 +77,7 @@ const defaultWebChannelConfig: Required<WebChannelConfig> = {
const schema = z
.object({
channelType: z.enum(["web", "wxwork_kf"], "请选择渠道类型"),
channelType: z.enum(["web", "wechat_mp", "wxwork_kf"], "请选择渠道类型"),
aiAgentId: z.string().trim().regex(/^\d+$/, "请选择 AI Agent"),
name: z.string().trim().min(1, "渠道名称不能为空"),
openKfId: z.string().trim(),
@@ -73,6 +86,9 @@ const schema = z
widgetThemeColor: z.string().trim(),
widgetPosition: z.enum(["left", "right"]),
widgetWidth: z.string().trim(),
wechatAppId: z.string().trim(),
wechatAppSecret: z.string().trim(),
wechatOAuthScope: z.enum(["snsapi_base", "snsapi_userinfo"]),
remark: z.string().trim(),
})
.superRefine((values, ctx) => {
@@ -83,6 +99,22 @@ const schema = z
message: "请选择企业微信客服账号",
})
}
if (values.channelType === "wechat_mp") {
if (!values.wechatAppId.trim()) {
ctx.addIssue({
code: "custom",
path: ["wechatAppId"],
message: "请填写公众号 AppID",
})
}
if (!values.wechatAppSecret.trim()) {
ctx.addIssue({
code: "custom",
path: ["wechatAppSecret"],
message: "请填写公众号 AppSecret",
})
}
}
})
type EditForm = z.infer<typeof schema>
@@ -103,6 +135,9 @@ const emptyForm: EditForm = {
widgetThemeColor: defaultWebChannelConfig.themeColor,
widgetPosition: defaultWebChannelConfig.position,
widgetWidth: defaultWebChannelConfig.width,
wechatAppId: "",
wechatAppSecret: "",
wechatOAuthScope: "snsapi_base",
remark: "",
}
@@ -138,13 +173,53 @@ function parseWebChannelConfig(configJson: string): Required<WebChannelConfig> {
}
}
function parseWechatMPChannelConfig(configJson: string): Required<WechatMPChannelConfig> {
const fallback = {
...defaultWebChannelConfig,
title: "公众号客服",
appId: "",
appSecret: "",
oauthScope: "snsapi_base" as const,
oauthEnabled: true,
}
if (!configJson.trim()) {
return fallback
}
try {
const parsed = JSON.parse(configJson) as WechatMPChannelConfig
const base = parseWebChannelConfig(configJson)
const oauthScope =
parsed.oauthScope === "snsapi_userinfo" ? "snsapi_userinfo" : "snsapi_base"
return {
...base,
title: parsed.title?.trim() || fallback.title,
appId: parsed.appId?.trim() || "",
appSecret: parsed.appSecret?.trim() || "",
oauthScope,
oauthEnabled: parsed.oauthEnabled ?? true,
}
} catch {
return fallback
}
}
function buildForm(item: AdminChannel | null): EditForm {
if (!item) {
return emptyForm
}
const widgetConfig = parseWebChannelConfig(item.configJson)
const isWechatMP = item.channelType === "wechat_mp"
const webConfig = parseWebChannelConfig(item.configJson)
const wechatConfig = isWechatMP
? parseWechatMPChannelConfig(item.configJson)
: null
const widgetConfig = wechatConfig ?? webConfig
return {
channelType: item.channelType === "wxwork_kf" ? "wxwork_kf" : "web",
channelType:
item.channelType === "wxwork_kf"
? "wxwork_kf"
: item.channelType === "wechat_mp"
? "wechat_mp"
: "web",
aiAgentId: item.aiAgentId > 0 ? String(item.aiAgentId) : "",
name: item.name,
openKfId: parseOpenKfId(item.configJson),
@@ -153,23 +228,37 @@ function buildForm(item: AdminChannel | null): EditForm {
widgetThemeColor: widgetConfig.themeColor,
widgetPosition: widgetConfig.position,
widgetWidth: widgetConfig.width,
wechatAppId: wechatConfig?.appId ?? "",
wechatAppSecret: wechatConfig?.appSecret ?? "",
wechatOAuthScope: wechatConfig?.oauthScope ?? "snsapi_base",
remark: item.remark || "",
}
}
function buildPayload(form: EditForm, status: number): CreateAdminChannelPayload {
const channelType = form.channelType
const webLikeConfig = {
title:
form.widgetTitle.trim() ||
(channelType === "wechat_mp" ? "公众号客服" : defaultWebChannelConfig.title),
subtitle: form.widgetSubtitle.trim(),
themeColor:
form.widgetThemeColor.trim() || defaultWebChannelConfig.themeColor,
position: form.widgetPosition || defaultWebChannelConfig.position,
width: form.widgetWidth.trim() || defaultWebChannelConfig.width,
}
const configJson =
channelType === "wxwork_kf"
? JSON.stringify({ openKfId: form.openKfId.trim() })
: JSON.stringify({
title: form.widgetTitle.trim() || defaultWebChannelConfig.title,
subtitle: form.widgetSubtitle.trim(),
themeColor:
form.widgetThemeColor.trim() || defaultWebChannelConfig.themeColor,
position: form.widgetPosition || defaultWebChannelConfig.position,
width: form.widgetWidth.trim() || defaultWebChannelConfig.width,
})
: channelType === "wechat_mp"
? JSON.stringify({
...webLikeConfig,
appId: form.wechatAppId.trim(),
appSecret: form.wechatAppSecret.trim(),
oauthScope: form.wechatOAuthScope || "snsapi_base",
oauthEnabled: true,
})
: JSON.stringify(webLikeConfig)
return {
channelType,
aiAgentId: Number(form.aiAgentId),
@@ -235,6 +324,7 @@ function ChannelFormBody({
} = form
const channelType = useWatch({ control, name: "channelType" })
const openKfId = useWatch({ control, name: "openKfId" })
const isWebLikeChannel = channelType === "web" || channelType === "wechat_mp"
useEffect(() => {
async function loadAIAgents() {
@@ -408,7 +498,9 @@ function ChannelFormBody({
<div className="text-xs text-muted-foreground">
{channelType === "wxwork_kf"
? "配置企业微信客服账号,用于匹配回调消息和对外发送消息。"
: "配置 Web 站点客服窗口的展示参数。"}
: channelType === "wechat_mp"
? "配置公众号网页授权和客服窗口展示参数。"
: "配置 Web 站点客服窗口的展示参数。"}
</div>
</div>
@@ -440,9 +532,62 @@ function ChannelFormBody({
</Field>
) : null}
{channelType === "web" ? (
{isWebLikeChannel ? (
<>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
{channelType === "wechat_mp" ? (
<>
<Field data-invalid={!!errors.wechatAppId}>
<FieldLabel htmlFor="channel-wechat-app-id">
AppID
</FieldLabel>
<FieldContent>
<Input
id="channel-wechat-app-id"
{...register("wechatAppId")}
/>
<FieldError errors={[errors.wechatAppId]} />
</FieldContent>
</Field>
<Field data-invalid={!!errors.wechatAppSecret}>
<FieldLabel htmlFor="channel-wechat-app-secret">
AppSecret
</FieldLabel>
<FieldContent>
<Input
id="channel-wechat-app-secret"
type="password"
autoComplete="new-password"
{...register("wechatAppSecret")}
/>
<FieldError errors={[errors.wechatAppSecret]} />
</FieldContent>
</Field>
<Field data-invalid={!!errors.wechatOAuthScope}>
<FieldLabel></FieldLabel>
<FieldContent>
<Controller
control={control}
name="wechatOAuthScope"
render={({ field }) => (
<OptionCombobox
value={field.value}
options={[...oauthScopeOptions]}
placeholder="请选择网页授权方式"
searchPlaceholder="搜索网页授权方式"
emptyText="未找到网页授权方式"
onChange={field.onChange}
/>
)}
/>
<FieldError errors={[errors.wechatOAuthScope]} />
</FieldContent>
</Field>
</>
) : null}
<Field data-invalid={!!errors.widgetTitle}>
<FieldLabel htmlFor="channel-widget-title"></FieldLabel>
<FieldContent>
@@ -507,7 +652,10 @@ function ChannelFormBody({
</FieldContent>
</Field>
</div>
<WebAccessGuide channelId={channelDetail?.channelId || ""} />
<WebAccessGuide
channelId={channelDetail?.channelId || ""}
channelType={channelType === "wechat_mp" ? "wechat_mp" : "web"}
/>
</>
) : null}
</div>
@@ -525,8 +673,15 @@ function ChannelFormBody({
)
}
function WebAccessGuide({ channelId }: { channelId: string }) {
function WebAccessGuide({
channelId,
channelType,
}: {
channelId: string
channelType: "web" | "wechat_mp"
}) {
const [origin, setOrigin] = useState("")
const isWechatMP = channelType === "wechat_mp"
useEffect(() => {
setOrigin(window.location.origin)
@@ -536,10 +691,16 @@ function WebAccessGuide({ channelId }: { channelId: string }) {
if (!origin || !channelId) {
return ""
}
const url = new URL("/kefu/chat/", origin)
const url = new URL(
isWechatMP ? "/api/channel/wechat_mp/oauth/authorize" : "/kefu/chat/",
origin
)
url.searchParams.set("channelId", channelId)
if (isWechatMP) {
url.searchParams.set("returnPath", "/kefu/chat/")
}
return url.toString()
}, [channelId, origin])
}, [channelId, isWechatMP, origin])
const testUrl = useMemo(() => {
if (!origin || !channelId) {
@@ -556,11 +717,11 @@ function WebAccessGuide({ channelId }: { channelId: string }) {
}
return `<script>
window.CSAgentConfig = {
channelId: "${channelId}"
channelId: "${channelId}"${isWechatMP ? ',\n externalSource: "wechat_mp"' : ""}
};
</script>
<script async src="${origin}/sdk/cs-ai-agent-sdk.min.js"></script>`
}, [channelId, origin])
}, [channelId, isWechatMP, origin])
async function copyText(text: string, successMessage: string) {
if (!text) {
@@ -577,11 +738,15 @@ function WebAccessGuide({ channelId }: { channelId: string }) {
return (
<div className="space-y-4 border-t pt-4">
<div>
<div className="text-sm font-medium">Web </div>
<div className="text-sm font-medium">
{isWechatMP ? "微信公众号接入信息" : "Web 接入信息"}
</div>
<div className="text-xs text-muted-foreground">
{channelId
? "复制链接或嵌入代码即可接入当前 Web 渠道。"
: "保存渠道后生成接入链接和 SDK 代码。"}
? isWechatMP
? "将授权链接配置到公众号菜单,用户授权后会进入客服窗口。"
: "复制链接或嵌入代码即可接入当前 Web 渠道。"
: "保存渠道后生成接入链接。"}
</div>
</div>
@@ -592,7 +757,9 @@ function WebAccessGuide({ channelId }: { channelId: string }) {
) : (
<div className="space-y-4">
<div className="space-y-2">
<div className="text-xs font-medium text-muted-foreground">访</div>
<div className="text-xs font-medium text-muted-foreground">
{isWechatMP ? "公众号菜单授权链接" : "直接访问链接"}
</div>
<div className="flex flex-col gap-2 sm:flex-row">
<Input readOnly value={accessUrl} className="font-mono text-xs" />
<div className="flex gap-2">
@@ -618,43 +785,55 @@ function WebAccessGuide({ channelId }: { channelId: string }) {
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between gap-2">
<div className="text-xs font-medium text-muted-foreground">
{!isWechatMP ? (
<div className="space-y-2">
<div className="flex items-center justify-between gap-2">
<div className="text-xs font-medium text-muted-foreground">
</div>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => copyText(snippet, "已复制接入代码")}
>
<CopyIcon className="size-4" />
</Button>
</div>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => copyText(snippet, "已复制接入代码")}
>
<CopyIcon className="size-4" />
</Button>
<pre className="max-h-48 overflow-auto rounded-md bg-muted p-3 text-xs leading-5">
<code>{snippet}</code>
</pre>
</div>
<pre className="max-h-48 overflow-auto rounded-md bg-muted p-3 text-xs leading-5">
<code>{snippet}</code>
</pre>
</div>
) : null}
<div className="flex flex-col gap-2 rounded-md bg-muted px-3 py-3 text-xs text-muted-foreground">
<div className="font-medium text-foreground"></div>
<div>1. </div>
<div>2. HTML body </div>
<div>3. </div>
<div>4. 使访</div>
<div className="pt-1">
<Button
type="button"
variant="outline"
size="sm"
onClick={() => window.open(testUrl, "_blank", "noopener,noreferrer")}
>
<ExternalLinkIcon className="size-4" />
</Button>
</div>
{isWechatMP ? (
<>
<div>1. </div>
<div>2. </div>
<div>3. openid </div>
</>
) : (
<>
<div>1. </div>
<div>2. HTML body </div>
<div>3. </div>
<div>4. 使访</div>
<div className="pt-1">
<Button
type="button"
variant="outline"
size="sm"
onClick={() => window.open(testUrl, "_blank", "noopener,noreferrer")}
>
<ExternalLinkIcon className="size-4" />
</Button>
</div>
</>
)}
</div>
</div>
)}
+8
View File
@@ -3,6 +3,7 @@
import { useCallback, useEffect, useState } from "react"
import {
Building2Icon,
MessagesSquareIcon,
MessageSquareMoreIcon,
MoreHorizontalIcon,
PlusIcon,
@@ -58,10 +59,14 @@ const statusOptions = [
const channelTypeOptions = [
{ value: "all", label: "全部类型" },
{ value: "web", label: "Web 站点" },
{ value: "wechat_mp", label: "微信公众号" },
{ value: "wxwork_kf", label: "企业微信客服" },
] as const
function getChannelTypeLabel(channelType: string) {
if (channelType === "wechat_mp") {
return "微信公众号"
}
if (channelType === "wxwork_kf") {
return "企业微信客服"
}
@@ -69,6 +74,9 @@ function getChannelTypeLabel(channelType: string) {
}
function ChannelIcon({ channelType }: { channelType: string }) {
if (channelType === "wechat_mp") {
return <MessagesSquareIcon className="size-4" />
}
if (channelType === "wxwork_kf") {
return <MessageSquareMoreIcon className="size-4" />
}
+4 -1
View File
@@ -104,6 +104,8 @@ export type ImAsset = {
export type ImWidgetConfig = {
channelId?: string
channelType?: string
externalSource?: string
title?: string
subtitle?: string
themeColor?: string
@@ -146,6 +148,7 @@ function getRuntimeImConfig() {
channelId: widgetConfig.channelId || OPEN_IM_CHANNEL_ID,
externalSource:
(widgetConfig.externalSource || OPEN_IM_EXTERNAL_SOURCE).trim() || "web_chat",
externalId: (widgetConfig.externalId || "").trim(),
externalName: (widgetConfig.subject || "").trim(),
}
}
@@ -154,7 +157,7 @@ function createImHeaders() {
const config = getRuntimeImConfig()
const headers: Record<string, string> = {
"X-External-Source": config.externalSource,
"X-External-Id": getImVisitorId(),
"X-External-Id": config.externalId || getImVisitorId(),
"X-Channel-Id": config.channelId,
}
if (config.externalName) {
+2
View File
@@ -73,10 +73,12 @@ export const ContactTypeLabels: Record<ContactType, string> = {
export enum ExternalSource {
WebChat = "web_chat",
WechatMP = "wechat_mp",
WxWorkKF = "wxwork_kf",
}
export const ExternalSourceLabels: Record<ExternalSource, string> = {
[ExternalSource.WebChat]: "网页客服",
[ExternalSource.WechatMP]: "微信公众号",
[ExternalSource.WxWorkKF]: "企业微信客服",
}
+4 -2
View File
@@ -19,7 +19,9 @@ export function createImRealtimeConnection() {
const baseUrl = apiBaseUrl
? apiBaseUrl.replace(/^http/, "ws").replace(/\/$/, "")
: createWebSocketBaseUrl()
const externalId = encodeURIComponent(getImVisitorId())
const resolvedExternalId = encodeURIComponent(
(config.externalId ?? "").trim() || getImVisitorId()
)
const externalSource = encodeURIComponent(
(config.externalSource ?? "web_chat").trim() || "web_chat"
)
@@ -30,6 +32,6 @@ export function createImRealtimeConnection() {
? `&externalName=${encodeURIComponent(externalName)}`
: ""
return new WebSocket(
`${baseUrl}/api/ws/open?externalId=${externalId}&externalSource=${externalSource}&channelId=${channelId}${nameQuery}`
`${baseUrl}/api/ws/open?externalId=${resolvedExternalId}&externalSource=${externalSource}&channelId=${channelId}${nameQuery}`
)
}
+3
View File
@@ -4,6 +4,8 @@ export type KefuWidgetHostConfig = {
apiBaseUrl?: string
/** 与后端 enums.ExternalSource 一致,默认 web_chat */
externalSource?: string
/** 外部访客稳定标识;微信公众号 OAuth 场景使用 openid */
externalId?: string
title?: string
subtitle?: string
position?: "left" | "right"
@@ -48,6 +50,7 @@ export function readKefuWidgetConfig(): KefuWidgetHostConfig {
query.get("externalSource") ??
process.env.NEXT_PUBLIC_OPEN_IM_EXTERNAL_SOURCE?.trim() ??
undefined,
externalId: query.get("externalId") ?? undefined,
title: query.get("title") ?? undefined,
subtitle: query.get("subtitle") ?? undefined,
position: (query.get("position") as "left" | "right" | null) ?? undefined,
+10
View File
@@ -35,6 +35,7 @@ import {
import { summarizeIMMessage } from "@/lib/im-message"
import { createRealtimeConnectionManager } from "@/lib/realtime-connection"
import { generateUUID } from "@/lib/utils"
import { readKefuWidgetConfig, setKefuWidgetConfig } from "@/lib/kefu-widget-config"
type ChatStatus = "connecting" | "connected" | "disconnected"
@@ -267,6 +268,15 @@ export const useKefuChatStore = create<KefuChatStore>((set, get) => {
return
}
if (widgetConfig.channelId || widgetConfig.externalSource) {
setKefuWidgetConfig({
...readKefuWidgetConfig(),
channelId: widgetConfig.channelId || readKefuWidgetConfig().channelId,
externalSource:
widgetConfig.externalSource || readKefuWidgetConfig().externalSource,
})
}
set({
title: widgetConfig.title || "在线客服",
subtitle: widgetConfig.subtitle || "",