mono
2f7a491666
Source-only publication of reviewed commit 64e96a7f423673dc29ad56485be9fc79bce8af1c.
Passed in isolation: focused frontend/backend tests, race checks, TypeScript typecheck, lint, Go compilation, Flowgram build, and deterministic SDK build/tests.
Not accepted as a production release: Next.js export/native assembly remains blocked by environment memory limits; browser interaction and MySQL staging acceptance remain unverified. No production server, database/schema, runtime configuration, deployment, release tag, or workflow execution was performed.
Expected source tree: 0a4a7528e9.
1518 lines
57 KiB
TypeScript
1518 lines
57 KiB
TypeScript
// Modified by the independent AgentDesk fork for support reliability and availability.
|
|
"use client"
|
|
|
|
import { useEffect, useMemo, useState, useSyncExternalStore } from "react"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { Controller, Resolver, useForm, useWatch } from "react-hook-form"
|
|
import { z } from "zod/v4"
|
|
import { CopyIcon, ExternalLinkIcon, RotateCcwIcon } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { TestEmailConnectionButton } from "@/app/(dashboard)/dashboard/channels/_components/test-email-connection"
|
|
import { getWidgetDemoPath } from "@/components/support-chat/demo-navigation"
|
|
import { OptionCombobox } from "@/components/option-combobox"
|
|
import { ProjectDialog } from "@/components/project-dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldError,
|
|
FieldLabel,
|
|
} from "@/components/ui/field"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
type AIAgent,
|
|
type AdminChannel,
|
|
type CreateAdminChannelPayload,
|
|
fetchAIAgentsAll,
|
|
fetchChannel,
|
|
rollbackChannelAIAgentRollout,
|
|
resetChannelUserTokenSecret,
|
|
} from "@/lib/api/admin"
|
|
import { useI18n } from "@/i18n/provider"
|
|
|
|
type ChannelFormDialogProps = {
|
|
open: boolean
|
|
saving: boolean
|
|
itemId: number | null
|
|
onOpenChange: (open: boolean) => void
|
|
onSubmit: (payload: CreateAdminChannelPayload) => Promise<void>
|
|
}
|
|
|
|
type Translate = (key: string, values?: Record<string, string | number>) => string
|
|
|
|
type WebChannelConfig = {
|
|
title?: string
|
|
subtitle?: string
|
|
themeColor?: string
|
|
position?: "left" | "right"
|
|
width?: string
|
|
userTokenSecret?: string
|
|
}
|
|
|
|
type TelegramChannelConfig = {
|
|
botToken?: string
|
|
botUsername?: string
|
|
webhookSecret?: string
|
|
}
|
|
|
|
type ZaloOAChannelConfig = {
|
|
appId?: string
|
|
oaId?: string
|
|
secretKey?: string
|
|
accessToken?: string
|
|
refreshToken?: string
|
|
webhookSecret?: string
|
|
}
|
|
|
|
type EmailChannelConfig = {
|
|
emailAddress?: string
|
|
senderName?: string
|
|
provider?: string
|
|
apiKey?: string
|
|
smtpHost?: string
|
|
smtpPort?: number
|
|
smtpUser?: string
|
|
smtpPassword?: string
|
|
smtpUseTls?: boolean
|
|
smtpAllowInsecure?: boolean
|
|
webhookSecret?: string
|
|
}
|
|
|
|
type SlackChannelConfig = {
|
|
botToken?: string
|
|
signingSecret?: string
|
|
appId?: string
|
|
teamId?: string
|
|
teamName?: string
|
|
defaultChannel?: string
|
|
webhookSecret?: string
|
|
}
|
|
|
|
type DiscordChannelConfig = {
|
|
guildId?: string
|
|
guildName?: string
|
|
botToken?: string
|
|
webhookSecret?: string
|
|
}
|
|
|
|
function getDefaultWebChannelConfig(t: Translate): Required<WebChannelConfig> {
|
|
return {
|
|
title: t("channel.defaultTitleWeb"),
|
|
subtitle: t("channel.defaultSubtitle"),
|
|
themeColor: "#2563eb",
|
|
position: "right",
|
|
width: "380px",
|
|
userTokenSecret: "",
|
|
}
|
|
}
|
|
|
|
function createSchema(t: Translate) {
|
|
return z
|
|
.object({
|
|
channelType: z.enum(["web", "telegram", "zalo_oa", "email", "slack", "discord"], t("channel.typeRequired")),
|
|
aiAgentId: z.string().trim().regex(/^\d+$/, t("channel.agentRequired")),
|
|
aiAgentRolloutPercent: z.coerce.number().int().min(1).max(100),
|
|
name: z.string().trim().min(1, t("channel.nameRequired")),
|
|
botToken: z.string().trim(),
|
|
botUsername: z.string().trim(),
|
|
webhookSecret: z.string().trim(),
|
|
zaloAppId: z.string().trim(),
|
|
zaloOaId: z.string().trim(),
|
|
zaloAccessToken: z.string().trim(),
|
|
zaloSecretKey: z.string().trim(),
|
|
emailAddress: z.string().trim(),
|
|
senderName: z.string().trim(),
|
|
emailProvider: z.string().trim(),
|
|
emailApiKey: z.string().trim(),
|
|
smtpHost: z.string().trim(),
|
|
smtpPort: z.coerce.number().int().optional(),
|
|
smtpUser: z.string().trim(),
|
|
smtpPassword: z.string().trim(),
|
|
smtpUseTls: z.boolean(),
|
|
smtpAllowInsecure: z.boolean(),
|
|
slackBotToken: z.string().trim(),
|
|
slackSigningSecret: z.string().trim(),
|
|
slackAppId: z.string().trim(),
|
|
slackTeamId: z.string().trim(),
|
|
slackTeamName: z.string().trim(),
|
|
slackDefaultChannel: z.string().trim(),
|
|
discordGuildId: z.string().trim(),
|
|
discordGuildName: z.string().trim(),
|
|
discordBotToken: z.string().trim(),
|
|
|
|
widgetTitle: z.string().trim(),
|
|
widgetSubtitle: z.string().trim(),
|
|
widgetThemeColor: z.string().trim(),
|
|
widgetPosition: z.enum(["left", "right"]),
|
|
widgetWidth: z.string().trim(),
|
|
userTokenSecret: z.string().trim(),
|
|
remark: z.string().trim(),
|
|
})
|
|
.superRefine((values, ctx) => {
|
|
if (values.channelType === "email" && !values.emailAddress.trim()) {
|
|
ctx.addIssue({
|
|
code: "custom",
|
|
path: ["emailAddress"],
|
|
message: t("channel.emailAddressRequired"),
|
|
})
|
|
}
|
|
if (values.channelType === "telegram" && !values.botToken.trim()) {
|
|
ctx.addIssue({
|
|
code: "custom",
|
|
path: ["botToken"],
|
|
message: "Telegram Bot Token is required",
|
|
})
|
|
}
|
|
if (values.channelType === "zalo_oa" && !values.zaloAccessToken.trim()) {
|
|
ctx.addIssue({
|
|
code: "custom",
|
|
path: ["zaloAccessToken"],
|
|
message: "Zalo OA Access Token is required",
|
|
})
|
|
}
|
|
if (values.channelType === "slack" && !values.slackBotToken.trim()) {
|
|
ctx.addIssue({
|
|
code: "custom",
|
|
path: ["slackBotToken"],
|
|
message: t("channel.slackBotTokenRequired"),
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
type EditForm = {
|
|
channelType: "web" | "telegram" | "zalo_oa" | "email" | "slack" | "discord"
|
|
aiAgentId: string
|
|
aiAgentRolloutPercent: number
|
|
name: string
|
|
botToken: string
|
|
botUsername: string
|
|
webhookSecret: string
|
|
zaloAppId: string
|
|
zaloOaId: string
|
|
zaloAccessToken: string
|
|
zaloSecretKey: string
|
|
emailAddress: string
|
|
senderName: string
|
|
emailProvider: string
|
|
emailApiKey: string
|
|
smtpHost: string
|
|
smtpPort?: number
|
|
smtpUser: string
|
|
smtpPassword: string
|
|
smtpUseTls: boolean
|
|
smtpAllowInsecure: boolean
|
|
slackBotToken: string
|
|
slackSigningSecret: string
|
|
slackAppId: string
|
|
slackTeamId: string
|
|
slackTeamName: string
|
|
slackDefaultChannel: string
|
|
discordGuildId: string
|
|
discordGuildName: string
|
|
discordBotToken: string
|
|
|
|
widgetTitle: string
|
|
widgetSubtitle: string
|
|
widgetThemeColor: string
|
|
widgetPosition: "left" | "right"
|
|
widgetWidth: string
|
|
userTokenSecret: string
|
|
remark: string
|
|
}
|
|
|
|
function createEmptyForm(t: Translate): EditForm {
|
|
const defaultWebChannelConfig = getDefaultWebChannelConfig(t)
|
|
return {
|
|
channelType: "web",
|
|
aiAgentId: "",
|
|
aiAgentRolloutPercent: 100,
|
|
name: "",
|
|
botToken: "",
|
|
botUsername: "",
|
|
webhookSecret: "",
|
|
zaloAppId: "",
|
|
zaloOaId: "",
|
|
zaloAccessToken: "",
|
|
zaloSecretKey: "",
|
|
emailAddress: "",
|
|
senderName: "",
|
|
emailProvider: "default",
|
|
emailApiKey: "",
|
|
smtpHost: "",
|
|
smtpPort: 587,
|
|
smtpUser: "",
|
|
smtpPassword: "",
|
|
smtpUseTls: false,
|
|
smtpAllowInsecure: false,
|
|
slackBotToken: "",
|
|
slackSigningSecret: "",
|
|
slackAppId: "",
|
|
slackTeamId: "",
|
|
slackTeamName: "",
|
|
slackDefaultChannel: "",
|
|
discordGuildId: "",
|
|
discordGuildName: "",
|
|
discordBotToken: "",
|
|
|
|
widgetTitle: defaultWebChannelConfig.title,
|
|
widgetSubtitle: defaultWebChannelConfig.subtitle,
|
|
widgetThemeColor: defaultWebChannelConfig.themeColor,
|
|
widgetPosition: defaultWebChannelConfig.position,
|
|
widgetWidth: defaultWebChannelConfig.width,
|
|
userTokenSecret: "",
|
|
remark: "",
|
|
}
|
|
}
|
|
|
|
function parseTelegramChannelConfig(configJson: string): TelegramChannelConfig {
|
|
if (!configJson.trim()) return {}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as TelegramChannelConfig
|
|
return {
|
|
botToken: parsed.botToken?.trim() || "",
|
|
botUsername: parsed.botUsername?.trim() || "",
|
|
webhookSecret: parsed.webhookSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return {}
|
|
}
|
|
}
|
|
|
|
function parseZaloOAChannelConfig(configJson: string): ZaloOAChannelConfig {
|
|
if (!configJson.trim()) return {}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as ZaloOAChannelConfig
|
|
return {
|
|
appId: parsed.appId?.trim() || "",
|
|
oaId: parsed.oaId?.trim() || "",
|
|
secretKey: parsed.secretKey?.trim() || "",
|
|
accessToken: parsed.accessToken?.trim() || "",
|
|
refreshToken: parsed.refreshToken?.trim() || "",
|
|
webhookSecret: parsed.webhookSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return {}
|
|
}
|
|
}
|
|
|
|
function parseSlackChannelConfig(configJson: string): SlackChannelConfig {
|
|
if (!configJson.trim()) return {}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as SlackChannelConfig
|
|
return {
|
|
botToken: parsed.botToken?.trim() || "",
|
|
signingSecret: parsed.signingSecret?.trim() || "",
|
|
appId: parsed.appId?.trim() || "",
|
|
teamId: parsed.teamId?.trim() || "",
|
|
teamName: parsed.teamName?.trim() || "",
|
|
defaultChannel: parsed.defaultChannel?.trim() || "",
|
|
webhookSecret: parsed.webhookSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return {}
|
|
}
|
|
}
|
|
|
|
function parseDiscordChannelConfig(configJson: string): DiscordChannelConfig {
|
|
if (!configJson.trim()) return {}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as DiscordChannelConfig
|
|
return {
|
|
guildId: parsed.guildId?.trim() || "",
|
|
guildName: parsed.guildName?.trim() || "",
|
|
botToken: parsed.botToken?.trim() || "",
|
|
webhookSecret: parsed.webhookSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return {}
|
|
}
|
|
}
|
|
|
|
function parseEmailChannelConfig(configJson: string): EmailChannelConfig {
|
|
if (!configJson.trim()) return {}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as EmailChannelConfig
|
|
return {
|
|
emailAddress: parsed.emailAddress?.trim() || "",
|
|
senderName: parsed.senderName?.trim() || "",
|
|
provider: parsed.provider?.trim() || "",
|
|
apiKey: parsed.apiKey?.trim() || "",
|
|
smtpHost: parsed.smtpHost?.trim() || "",
|
|
smtpPort: parsed.smtpPort,
|
|
smtpUser: parsed.smtpUser?.trim() || "",
|
|
smtpPassword: parsed.smtpPassword?.trim() || "",
|
|
smtpUseTls: parsed.smtpUseTls === true,
|
|
smtpAllowInsecure: parsed.smtpAllowInsecure === true,
|
|
webhookSecret: parsed.webhookSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return {}
|
|
}
|
|
}
|
|
|
|
function parseWebChannelConfig(configJson: string, t: Translate): Required<WebChannelConfig> {
|
|
const defaultWebChannelConfig = getDefaultWebChannelConfig(t)
|
|
if (!configJson.trim()) {
|
|
return defaultWebChannelConfig
|
|
}
|
|
try {
|
|
const parsed = JSON.parse(configJson) as WebChannelConfig
|
|
const position = parsed.position === "left" ? "left" : "right"
|
|
return {
|
|
title: parsed.title?.trim() || defaultWebChannelConfig.title,
|
|
subtitle: parsed.subtitle?.trim() ?? defaultWebChannelConfig.subtitle,
|
|
themeColor:
|
|
parsed.themeColor?.trim() || defaultWebChannelConfig.themeColor,
|
|
position,
|
|
width: parsed.width?.trim() || defaultWebChannelConfig.width,
|
|
userTokenSecret: parsed.userTokenSecret?.trim() || "",
|
|
}
|
|
} catch {
|
|
return defaultWebChannelConfig
|
|
}
|
|
}
|
|
|
|
function buildForm(item: AdminChannel | null, t: Translate): EditForm {
|
|
if (!item) {
|
|
return createEmptyForm(t)
|
|
}
|
|
const isTelegram = item.channelType === "telegram"
|
|
const isZaloOA = item.channelType === "zalo_oa"
|
|
const isEmail = item.channelType === "email"
|
|
const isSlack = item.channelType === "slack"
|
|
const isDiscord = item.channelType === "discord"
|
|
|
|
const webConfig = parseWebChannelConfig(item.configJson, t)
|
|
const telegramConfig = isTelegram
|
|
? parseTelegramChannelConfig(item.configJson)
|
|
: null
|
|
const zaloConfig = isZaloOA
|
|
? parseZaloOAChannelConfig(item.configJson)
|
|
: null
|
|
const slackConfig = isSlack
|
|
? parseSlackChannelConfig(item.configJson)
|
|
: null
|
|
|
|
const discordConfig = isDiscord
|
|
? parseDiscordChannelConfig(item.configJson)
|
|
: null
|
|
const emailConfig = isEmail
|
|
? parseEmailChannelConfig(item.configJson)
|
|
: null
|
|
return {
|
|
channelType:
|
|
item.channelType === "email" ||
|
|
item.channelType === "telegram" ||
|
|
item.channelType === "zalo_oa" ||
|
|
item.channelType === "slack" ||
|
|
item.channelType === "discord"
|
|
? item.channelType
|
|
: "web",
|
|
aiAgentId: item.aiAgentId > 0 ? String(item.aiAgentId) : "",
|
|
aiAgentRolloutPercent: item.aiAgentRolloutPercent || 100,
|
|
name: item.name,
|
|
botToken: telegramConfig?.botToken ?? "",
|
|
botUsername: telegramConfig?.botUsername ?? "",
|
|
webhookSecret:
|
|
telegramConfig?.webhookSecret ??
|
|
zaloConfig?.webhookSecret ??
|
|
discordConfig?.webhookSecret ??
|
|
"",
|
|
zaloAppId: zaloConfig?.appId ?? "",
|
|
zaloOaId: zaloConfig?.oaId ?? "",
|
|
zaloAccessToken: zaloConfig?.accessToken ?? "",
|
|
zaloSecretKey: zaloConfig?.secretKey ?? "",
|
|
emailAddress: emailConfig?.emailAddress ?? "",
|
|
senderName: emailConfig?.senderName ?? "",
|
|
emailProvider: emailConfig?.provider || "default",
|
|
emailApiKey: emailConfig?.apiKey ?? "",
|
|
smtpHost: emailConfig?.smtpHost ?? "",
|
|
smtpPort: emailConfig?.smtpPort ?? 587,
|
|
smtpUser: emailConfig?.smtpUser ?? "",
|
|
smtpPassword: emailConfig?.smtpPassword ?? "",
|
|
smtpUseTls: emailConfig?.smtpUseTls === true,
|
|
smtpAllowInsecure: emailConfig?.smtpAllowInsecure === true,
|
|
slackBotToken: slackConfig?.botToken ?? "",
|
|
slackSigningSecret: slackConfig?.signingSecret ?? "",
|
|
slackAppId: slackConfig?.appId ?? "",
|
|
slackTeamId: slackConfig?.teamId ?? "",
|
|
slackTeamName: slackConfig?.teamName ?? "",
|
|
slackDefaultChannel: slackConfig?.defaultChannel ?? "",
|
|
discordGuildId: discordConfig?.guildId ?? "",
|
|
discordGuildName: discordConfig?.guildName ?? "",
|
|
discordBotToken: discordConfig?.botToken ?? "",
|
|
|
|
widgetTitle: webConfig.title,
|
|
widgetSubtitle: webConfig.subtitle,
|
|
widgetThemeColor: webConfig.themeColor,
|
|
widgetPosition: webConfig.position,
|
|
widgetWidth: webConfig.width,
|
|
userTokenSecret: webConfig.userTokenSecret,
|
|
remark: item.remark || "",
|
|
}
|
|
}
|
|
|
|
function buildPayload(form: EditForm, status: number, t: Translate): CreateAdminChannelPayload {
|
|
const channelType = form.channelType
|
|
const defaultWebChannelConfig = getDefaultWebChannelConfig(t)
|
|
const webLikeConfig = {
|
|
title:
|
|
form.widgetTitle.trim() ||
|
|
defaultWebChannelConfig.title,
|
|
subtitle: form.widgetSubtitle.trim(),
|
|
themeColor:
|
|
form.widgetThemeColor.trim() || defaultWebChannelConfig.themeColor,
|
|
userTokenSecret: form.userTokenSecret.trim(),
|
|
}
|
|
const configJson =
|
|
channelType === "email"
|
|
? JSON.stringify({
|
|
emailAddress: form.emailAddress.trim(),
|
|
senderName: form.senderName.trim(),
|
|
provider: form.emailProvider === "default" ? "" : form.emailProvider.trim(),
|
|
apiKey: form.emailApiKey.trim(),
|
|
smtpHost: form.smtpHost.trim(),
|
|
smtpPort: form.smtpPort || 587,
|
|
smtpUser: form.smtpUser.trim(),
|
|
smtpPassword: form.smtpPassword.trim(),
|
|
smtpUseTls: form.smtpUseTls,
|
|
smtpAllowInsecure: form.smtpAllowInsecure,
|
|
webhookSecret: form.webhookSecret.trim(),
|
|
})
|
|
: channelType === "telegram"
|
|
? JSON.stringify({
|
|
botToken: form.botToken.trim(),
|
|
botUsername: form.botUsername.trim(),
|
|
webhookSecret: form.webhookSecret.trim(),
|
|
})
|
|
: channelType === "zalo_oa"
|
|
? JSON.stringify({
|
|
appId: form.zaloAppId.trim(),
|
|
oaId: form.zaloOaId.trim(),
|
|
accessToken: form.zaloAccessToken.trim(),
|
|
secretKey: form.zaloSecretKey.trim(),
|
|
webhookSecret: form.webhookSecret.trim(),
|
|
})
|
|
: channelType === "slack"
|
|
? JSON.stringify({
|
|
botToken: form.slackBotToken.trim(),
|
|
signingSecret: form.slackSigningSecret.trim(),
|
|
appId: form.slackAppId.trim(),
|
|
teamId: form.slackTeamId.trim(),
|
|
teamName: form.slackTeamName.trim(),
|
|
defaultChannel: form.slackDefaultChannel.trim(),
|
|
webhookSecret: form.webhookSecret.trim(),
|
|
})
|
|
: channelType === "discord"
|
|
? JSON.stringify({
|
|
guildId: form.discordGuildId.trim(),
|
|
guildName: form.discordGuildName.trim(),
|
|
botToken: form.discordBotToken.trim(),
|
|
webhookSecret: form.webhookSecret.trim(),
|
|
})
|
|
: JSON.stringify({
|
|
...webLikeConfig,
|
|
position: form.widgetPosition || defaultWebChannelConfig.position,
|
|
width: form.widgetWidth.trim() || defaultWebChannelConfig.width,
|
|
userTokenSecret: form.userTokenSecret.trim(),
|
|
})
|
|
return {
|
|
channelType,
|
|
aiAgentId: Number(form.aiAgentId),
|
|
aiAgentRolloutPercent: form.aiAgentRolloutPercent,
|
|
name: form.name.trim(),
|
|
configJson,
|
|
status,
|
|
remark: form.remark.trim(),
|
|
}
|
|
}
|
|
|
|
function isAgentChannelBindable(agent: AIAgent | undefined) {
|
|
return Boolean(agent && agent.publishedRevisionId > 0)
|
|
}
|
|
|
|
type ChannelFormBodyProps = Omit<ChannelFormDialogProps, "open">
|
|
|
|
export function EditDialog({
|
|
open,
|
|
saving,
|
|
itemId,
|
|
onOpenChange,
|
|
onSubmit,
|
|
}: ChannelFormDialogProps) {
|
|
if (!open) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<ChannelFormBody
|
|
key={itemId ? `edit-${itemId}` : "create"}
|
|
itemId={itemId}
|
|
saving={saving}
|
|
onOpenChange={onOpenChange}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function ChannelFormBody({
|
|
saving,
|
|
itemId,
|
|
onOpenChange,
|
|
onSubmit,
|
|
}: ChannelFormBodyProps) {
|
|
const t = useI18n()
|
|
const formId = "channel-edit-form"
|
|
const emptyForm = useMemo(() => createEmptyForm(t), [t])
|
|
const schema = useMemo(() => createSchema(t), [t])
|
|
const resolver = useMemo(
|
|
() =>
|
|
zodResolver(schema as never) as Resolver<
|
|
z.input<typeof schema>,
|
|
undefined,
|
|
z.output<typeof schema>
|
|
>,
|
|
[schema],
|
|
)
|
|
const [loading, setLoading] = useState(false)
|
|
const [aiAgents, setAIAgents] = useState<AIAgent[]>([])
|
|
const [channelDetail, setChannelDetail] = useState<AdminChannel | null>(null)
|
|
const [rollingBackRollout, setRollingBackRollout] = useState(false)
|
|
const [currentStatus, setCurrentStatus] = useState(0)
|
|
const form = useForm<
|
|
z.input<typeof schema>,
|
|
undefined,
|
|
z.output<typeof schema>
|
|
>({
|
|
resolver,
|
|
defaultValues: emptyForm,
|
|
})
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
register,
|
|
reset,
|
|
setValue,
|
|
formState: { errors },
|
|
} = form
|
|
const channelType = useWatch({ control, name: "channelType" })
|
|
const aiAgentId = useWatch({ control, name: "aiAgentId" })
|
|
const userTokenSecret = useWatch({ control, name: "userTokenSecret" })
|
|
const emailProvider = useWatch({ control, name: "emailProvider" })
|
|
const previousRolloutPercent = channelDetail?.previousAiAgentRolloutPercent ?? 0
|
|
|
|
async function rollbackRolloutPercent() {
|
|
if (!channelDetail || previousRolloutPercent < 1) return
|
|
setRollingBackRollout(true)
|
|
try {
|
|
await rollbackChannelAIAgentRollout(channelDetail.id)
|
|
setValue("aiAgentRolloutPercent", previousRolloutPercent)
|
|
setChannelDetail({
|
|
...channelDetail,
|
|
aiAgentRolloutPercent: previousRolloutPercent,
|
|
previousAiAgentRolloutPercent: channelDetail.aiAgentRolloutPercent,
|
|
})
|
|
toast.success(t("aiAgent.channelRolloutRestored"))
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("aiAgent.channelRolloutRestoreFailed"))
|
|
} finally {
|
|
setRollingBackRollout(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
async function loadAIAgents() {
|
|
try {
|
|
const data = await fetchAIAgentsAll({ status: 1 })
|
|
setAIAgents(data)
|
|
} catch (error) {
|
|
console.error("Failed to load AI agents:", error)
|
|
}
|
|
}
|
|
void loadAIAgents()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
async function loadDetail() {
|
|
if (!itemId) {
|
|
setCurrentStatus(0)
|
|
setChannelDetail(null)
|
|
reset(emptyForm)
|
|
return
|
|
}
|
|
setLoading(true)
|
|
try {
|
|
const data = await fetchChannel(itemId)
|
|
setChannelDetail(data)
|
|
setCurrentStatus(data.status)
|
|
reset(buildForm(data, t))
|
|
} catch (error) {
|
|
console.error("Failed to load channel:", error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
void loadDetail()
|
|
}, [emptyForm, itemId, reset, t])
|
|
|
|
const selectedAIAgent = aiAgents.find((item) => String(item.id) === aiAgentId)
|
|
const aiAgentOptions = aiAgents.map((item) => ({
|
|
value: String(item.id),
|
|
label: isAgentChannelBindable(item) ? item.name : `${item.name} · ${t("aiAgent.agentNotPublishedShort")}`,
|
|
disabled: !isAgentChannelBindable(item),
|
|
}))
|
|
const channelTypeOptions = [
|
|
{ value: "web", label: t("channel.typeWeb") },
|
|
{ value: "telegram", label: t("channel.typeTelegram") },
|
|
{ value: "slack", label: t("channel.typeSlack") },
|
|
{ value: "discord", label: t("channel.typeDiscord") },
|
|
|
|
] as const
|
|
const widgetPositionOptions = [
|
|
{ value: "right", label: t("channel.positionRight") },
|
|
{ value: "left", label: t("channel.positionLeft") },
|
|
] as const
|
|
async function onFormSubmit(values: EditForm) {
|
|
const selected = aiAgents.find((item) => String(item.id) === values.aiAgentId)
|
|
if (!isAgentChannelBindable(selected)) {
|
|
toast.error(t("aiAgent.agentNotPublishedWarning"))
|
|
return
|
|
}
|
|
await onSubmit(buildPayload(values, currentStatus, t))
|
|
}
|
|
|
|
async function handleResetUserTokenSecret() {
|
|
if (!itemId) {
|
|
return
|
|
}
|
|
if (!window.confirm(t("channel.resetSecretConfirm"))) {
|
|
return
|
|
}
|
|
try {
|
|
const result = await resetChannelUserTokenSecret(itemId)
|
|
setValue("userTokenSecret", result.userTokenSecret, {
|
|
shouldDirty: true,
|
|
})
|
|
if (channelDetail) {
|
|
const parsed = JSON.parse(channelDetail.configJson || "{}") as Record<string, unknown>
|
|
parsed.userTokenSecret = result.userTokenSecret
|
|
setChannelDetail({
|
|
...channelDetail,
|
|
configJson: JSON.stringify(parsed),
|
|
})
|
|
}
|
|
toast.success(t("channel.resetSecretSuccess"))
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("channel.resetSecretFailed"))
|
|
}
|
|
}
|
|
|
|
async function copyUserTokenSecret() {
|
|
if (!userTokenSecret) {
|
|
return
|
|
}
|
|
try {
|
|
await navigator.clipboard.writeText(userTokenSecret)
|
|
toast.success(t("channel.copySecretSuccess"))
|
|
} catch {
|
|
toast.error(t("channel.copyFailed"))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ProjectDialog
|
|
open={true}
|
|
onOpenChange={onOpenChange}
|
|
title={itemId ? t("channel.editTitle") : t("channel.createTitle")}
|
|
size="xl"
|
|
allowFullscreen
|
|
footer={
|
|
<>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
{t("channel.cancel")}
|
|
</Button>
|
|
<Button type="submit" form={formId} disabled={saving || loading}>
|
|
{saving ? t("channel.saving") : t("channel.save")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="text-muted-foreground">{t("channel.loadingDetail")}</div>
|
|
</div>
|
|
) : (
|
|
<form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-5">
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<Field data-invalid={!!errors.name}>
|
|
<FieldLabel htmlFor="channel-name">{t("channel.name")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input id="channel-name" {...register("name")} />
|
|
<FieldError errors={[errors.name]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.aiAgentId}>
|
|
<FieldLabel>{t("channel.columnAgent")}</FieldLabel>
|
|
<FieldContent>
|
|
<Controller
|
|
control={control}
|
|
name="aiAgentId"
|
|
render={({ field }) => (
|
|
<OptionCombobox
|
|
value={field.value}
|
|
options={aiAgentOptions}
|
|
placeholder={t("channel.agentRequired")}
|
|
searchPlaceholder={t("channel.searchAiAgent")}
|
|
emptyText={t("channel.emptyAiAgent")}
|
|
onChange={field.onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
{selectedAIAgent && !isAgentChannelBindable(selectedAIAgent) ? (
|
|
<div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
|
|
{t("aiAgent.agentNotPublishedWarning")}
|
|
</div>
|
|
) : null}
|
|
<FieldError errors={[errors.aiAgentId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.aiAgentRolloutPercent}>
|
|
<FieldLabel htmlFor="channel-ai-agent-rollout">{t("aiAgent.channelRolloutTitle")}</FieldLabel>
|
|
<FieldContent>
|
|
<div className="flex items-center gap-2">
|
|
<Input id="channel-ai-agent-rollout" type="number" min={1} max={100} step={1} {...register("aiAgentRolloutPercent")} />
|
|
{previousRolloutPercent > 0 ? (
|
|
<Button type="button" variant="outline" size="sm" disabled={saving || rollingBackRollout} onClick={rollbackRolloutPercent}>
|
|
<RotateCcwIcon />
|
|
{t("aiAgent.channelRolloutRestoreBtn", { percent: String(previousRolloutPercent) })}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
<FieldError errors={[errors.aiAgentRolloutPercent]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.channelType}>
|
|
<FieldLabel>{t("channel.channelType")}</FieldLabel>
|
|
<FieldContent>
|
|
<Controller
|
|
control={control}
|
|
name="channelType"
|
|
render={({ field }) => (
|
|
<OptionCombobox
|
|
value={field.value}
|
|
options={[...channelTypeOptions]}
|
|
placeholder={t("channel.selectChannelType")}
|
|
searchPlaceholder={t("channel.searchChannelType")}
|
|
emptyText={t("channel.emptyChannelType")}
|
|
onChange={field.onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
<FieldError errors={[errors.channelType]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="space-y-4 rounded-md border p-4">
|
|
<div>
|
|
<div className="text-sm font-medium">{t("channel.configTitle")}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{t("channel.configWebDescription")}
|
|
</div>
|
|
</div>
|
|
|
|
{channelType === "email" ? (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.emailAddress}>
|
|
<FieldLabel htmlFor="channel-email-address">{t("channel.emailAddress")} *</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-email-address"
|
|
type="email"
|
|
placeholder="support@example.com"
|
|
{...register("emailAddress")}
|
|
/>
|
|
<FieldError errors={[errors.emailAddress]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.senderName}>
|
|
<FieldLabel htmlFor="channel-sender-name">{t("channel.senderName")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-sender-name"
|
|
placeholder="Support Team"
|
|
{...register("senderName")}
|
|
/>
|
|
<FieldError errors={[errors.senderName]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.emailProvider}>
|
|
<FieldLabel htmlFor="channel-email-provider">{t("channel.emailProvider")}</FieldLabel>
|
|
<FieldContent>
|
|
<select
|
|
id="channel-email-provider"
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
{...register("emailProvider")}
|
|
>
|
|
<option value="default">{t("channel.emailProviderDefault")}</option>
|
|
<option value="smtp">{t("channel.emailProviderSmtp")}</option>
|
|
<option value="brevo">{t("channel.emailProviderBrevo")}</option>
|
|
<option value="sendgrid">{t("channel.emailProviderSendGrid")}</option>
|
|
<option value="resend">{t("channel.emailProviderResend")}</option>
|
|
<option value="postmark">{t("channel.emailProviderPostmark")}</option>
|
|
<option value="mailgun">{t("channel.emailProviderMailgun")}</option>
|
|
</select>
|
|
<FieldError errors={[errors.emailProvider]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.webhookSecret}>
|
|
<FieldLabel htmlFor="channel-email-webhook-secret">{t("channel.webhookSecret")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-email-webhook-secret"
|
|
placeholder="Secret for Inbound Webhook"
|
|
{...register("webhookSecret")}
|
|
/>
|
|
<FieldError errors={[errors.webhookSecret]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
{emailProvider === "brevo" ||
|
|
emailProvider === "sendgrid" ||
|
|
emailProvider === "resend" ||
|
|
emailProvider === "postmark" ||
|
|
emailProvider === "mailgun" ? (
|
|
<Field data-invalid={!!errors.emailApiKey}>
|
|
<FieldLabel htmlFor="channel-email-apikey">{t("channel.emailApiKey")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-email-apikey"
|
|
type="password"
|
|
placeholder="API Key / Server Token"
|
|
{...register("emailApiKey")}
|
|
/>
|
|
<FieldError errors={[errors.emailApiKey]} />
|
|
</FieldContent>
|
|
</Field>
|
|
) : emailProvider === "smtp" ? (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div className="sm:col-span-2">
|
|
<Field data-invalid={!!errors.smtpHost}>
|
|
<FieldLabel htmlFor="channel-smtp-host">{t("channel.smtpHost")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-smtp-host"
|
|
placeholder="smtp.example.com"
|
|
{...register("smtpHost")}
|
|
/>
|
|
<FieldError errors={[errors.smtpHost]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
<Field data-invalid={!!errors.smtpPort}>
|
|
<FieldLabel htmlFor="channel-smtp-port">{t("channel.smtpPort")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-smtp-port"
|
|
type="number"
|
|
placeholder="587"
|
|
{...register("smtpPort")}
|
|
/>
|
|
<FieldError errors={[errors.smtpPort]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.smtpUser}>
|
|
<FieldLabel htmlFor="channel-smtp-user">{t("channel.smtpUser")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-smtp-user"
|
|
placeholder="user@example.com"
|
|
{...register("smtpUser")}
|
|
/>
|
|
<FieldError errors={[errors.smtpUser]} />
|
|
</FieldContent>
|
|
</Field>
|
|
<Field data-invalid={!!errors.smtpPassword}>
|
|
<FieldLabel htmlFor="channel-smtp-password">{t("channel.smtpPassword")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-smtp-password"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
{...register("smtpPassword")}
|
|
/>
|
|
<FieldError errors={[errors.smtpPassword]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<label className="flex items-start gap-2.5 rounded-md border border-border/70 p-3 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-0.5 size-4 accent-primary"
|
|
{...register("smtpUseTls")}
|
|
/>
|
|
<span className="space-y-0.5">
|
|
<span className="block font-medium">{t("channel.smtpUseTls")}</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
{t("channel.smtpUseTlsHint")}
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<label className="flex items-start gap-2.5 rounded-md border border-border/70 p-3 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-0.5 size-4 accent-primary"
|
|
{...register("smtpAllowInsecure")}
|
|
/>
|
|
<span className="space-y-0.5">
|
|
<span className="block font-medium">{t("channel.smtpAllowInsecure")}</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
{t("channel.smtpAllowInsecureHint")}
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<TestEmailConnectionButton channelId={itemId} />
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-3.5 text-xs text-muted-foreground space-y-2.5">
|
|
<div className="font-medium text-sm text-foreground">{t("channel.emailAutoConnectTitle")}</div>
|
|
<div className="leading-relaxed">{t("channel.emailAutoConnectDescription")}</div>
|
|
<div className="font-mono text-[11px] text-muted-foreground pt-0.5">
|
|
{t("channel.inboundWebhookUrl")}: /api/third/email/webhook
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{channelType === "zalo_oa" ? (
|
|
<div className="space-y-4">
|
|
<Field data-invalid={!!errors.zaloAccessToken}>
|
|
<FieldLabel htmlFor="channel-zalo-token">{t("channel.zaloAccessToken")} *</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-zalo-token"
|
|
type="password"
|
|
placeholder="Enter Zalo OA Access Token"
|
|
{...register("zaloAccessToken")}
|
|
/>
|
|
<FieldError errors={[errors.zaloAccessToken]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.zaloOaId}>
|
|
<FieldLabel htmlFor="channel-zalo-oaid">{t("channel.zaloOaId")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-zalo-oaid"
|
|
placeholder="e.g. 1234567890"
|
|
{...register("zaloOaId")}
|
|
/>
|
|
<FieldError errors={[errors.zaloOaId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.zaloAppId}>
|
|
<FieldLabel htmlFor="channel-zalo-appid">{t("channel.zaloAppId")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-zalo-appid"
|
|
placeholder="e.g. 9876543210"
|
|
{...register("zaloAppId")}
|
|
/>
|
|
<FieldError errors={[errors.zaloAppId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-3 text-xs text-muted-foreground">
|
|
<div className="font-medium text-foreground">{t("channel.zaloAutoConnectTitle")}</div>
|
|
<div className="mt-1">{t("channel.zaloAutoConnectDescription")}</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{channelType === "slack" ? (
|
|
<div className="space-y-4">
|
|
<Field data-invalid={!!errors.slackBotToken}>
|
|
<FieldLabel htmlFor="channel-slack-bottoken">{t("channel.slackBotToken")} *</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-bottoken"
|
|
type="password"
|
|
placeholder="xoxb-..."
|
|
{...register("slackBotToken")}
|
|
/>
|
|
<FieldError errors={[errors.slackBotToken]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.slackSigningSecret}>
|
|
<FieldLabel htmlFor="channel-slack-signingsecret">{t("channel.slackSigningSecret")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-signingsecret"
|
|
type="password"
|
|
placeholder="..."
|
|
{...register("slackSigningSecret")}
|
|
/>
|
|
<FieldError errors={[errors.slackSigningSecret]} />
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("channel.slackSigningSecretHint")}
|
|
</p>
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.slackTeamId}>
|
|
<FieldLabel htmlFor="channel-slack-teamid">{t("channel.slackTeamId")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-teamid"
|
|
placeholder="T0123456789"
|
|
{...register("slackTeamId")}
|
|
/>
|
|
<FieldError errors={[errors.slackTeamId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.slackDefaultChannel}>
|
|
<FieldLabel htmlFor="channel-slack-defaultchannel">{t("channel.slackDefaultChannel")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-defaultchannel"
|
|
placeholder="C0123456789"
|
|
{...register("slackDefaultChannel")}
|
|
/>
|
|
<FieldError errors={[errors.slackDefaultChannel]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.slackAppId}>
|
|
<FieldLabel htmlFor="channel-slack-appid">{t("channel.slackAppId")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-appid"
|
|
placeholder="A01234567"
|
|
{...register("slackAppId")}
|
|
/>
|
|
<FieldError errors={[errors.slackAppId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.slackTeamName}>
|
|
<FieldLabel htmlFor="channel-slack-teamname">{t("channel.slackTeamName")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-slack-teamname"
|
|
placeholder="e.g. Acme Corp"
|
|
{...register("slackTeamName")}
|
|
/>
|
|
<FieldError errors={[errors.slackTeamName]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-3 text-xs text-muted-foreground">
|
|
<div className="font-medium text-foreground">{t("channel.slackSetupTitle")}</div>
|
|
<div className="mt-1">{t("channel.slackSetupDescription")}</div>
|
|
<div className="mt-2 font-mono text-[11px]">
|
|
{t("channel.slackRequestUrl")}: /api/third/slack/webhook
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{channelType === "discord" ? (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.discordGuildId}>
|
|
<FieldLabel htmlFor="channel-discord-guildid">{t("channel.discordGuildId")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-discord-guildid"
|
|
placeholder="e.g. 1234567890123456789"
|
|
{...register("discordGuildId")}
|
|
/>
|
|
<FieldError errors={[errors.discordGuildId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.discordGuildName}>
|
|
<FieldLabel htmlFor="channel-discord-guildname">{t("channel.discordGuildName")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-discord-guildname"
|
|
placeholder="e.g. Support Server"
|
|
{...register("discordGuildName")}
|
|
/>
|
|
<FieldError errors={[errors.discordGuildName]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<Field data-invalid={!!errors.discordBotToken}>
|
|
<FieldLabel htmlFor="channel-discord-bottoken">{t("channel.discordBotToken")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-discord-bottoken"
|
|
type="password"
|
|
placeholder="Optional per-channel bot token"
|
|
{...register("discordBotToken")}
|
|
/>
|
|
<FieldError errors={[errors.discordBotToken]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-3 text-xs text-muted-foreground">
|
|
<div className="font-medium text-foreground">{t("channel.discordSetupTitle")}</div>
|
|
<div className="mt-1">{t("channel.discordSetupDescription")}</div>
|
|
<div className="mt-2 font-mono text-[11px]">
|
|
{t("channel.inboundWebhookUrl")}: /api/third/discord/webhook
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{channelType === "telegram" ? (
|
|
<div className="space-y-4">
|
|
<Field data-invalid={!!errors.botToken}>
|
|
<FieldLabel htmlFor="channel-telegram-token">{t("channel.botToken")} *</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-telegram-token"
|
|
type="password"
|
|
placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
|
|
{...register("botToken")}
|
|
/>
|
|
<FieldError errors={[errors.botToken]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.botUsername}>
|
|
<FieldLabel htmlFor="channel-telegram-username">{t("channel.botUsername")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-telegram-username"
|
|
placeholder="e.g. CroveDeskBot"
|
|
{...register("botUsername")}
|
|
/>
|
|
<FieldError errors={[errors.botUsername]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.webhookSecret}>
|
|
<FieldLabel htmlFor="channel-telegram-secret">{t("channel.webhookSecret")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-telegram-secret"
|
|
placeholder="Auto-generated secret"
|
|
{...register("webhookSecret")}
|
|
/>
|
|
<FieldError errors={[errors.webhookSecret]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-primary/20 bg-primary/5 p-3 text-xs text-muted-foreground">
|
|
<div className="font-medium text-foreground">{t("channel.telegramAutoConnectTitle")}</div>
|
|
<div className="mt-1">{t("channel.telegramAutoConnectDescription")}</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{channelType === "web" ? (
|
|
<>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<Field data-invalid={!!errors.widgetTitle}>
|
|
<FieldLabel htmlFor="channel-widget-title">{t("channel.widgetTitle")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input id="channel-widget-title" {...register("widgetTitle")} />
|
|
<FieldError errors={[errors.widgetTitle]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.widgetSubtitle}>
|
|
<FieldLabel htmlFor="channel-widget-subtitle">{t("channel.widgetSubtitle")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-widget-subtitle"
|
|
{...register("widgetSubtitle")}
|
|
/>
|
|
<FieldError errors={[errors.widgetSubtitle]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.widgetThemeColor}>
|
|
<FieldLabel htmlFor="channel-widget-theme-color">{t("channel.themeColor")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-widget-theme-color"
|
|
placeholder="#2563eb"
|
|
{...register("widgetThemeColor")}
|
|
/>
|
|
<FieldError errors={[errors.widgetThemeColor]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
{channelType === "web" ? (
|
|
<>
|
|
<Field data-invalid={!!errors.widgetPosition}>
|
|
<FieldLabel>{t("channel.mountPosition")}</FieldLabel>
|
|
<FieldContent>
|
|
<Controller
|
|
control={control}
|
|
name="widgetPosition"
|
|
render={({ field }) => (
|
|
<OptionCombobox
|
|
value={field.value}
|
|
options={[...widgetPositionOptions]}
|
|
placeholder={t("channel.selectMountPosition")}
|
|
searchPlaceholder={t("channel.searchMountPosition")}
|
|
emptyText={t("channel.emptyMountPosition")}
|
|
onChange={field.onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
<FieldError errors={[errors.widgetPosition]} />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field data-invalid={!!errors.widgetWidth}>
|
|
<FieldLabel htmlFor="channel-widget-width">{t("channel.widgetWidth")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
id="channel-widget-width"
|
|
placeholder="380px"
|
|
{...register("widgetWidth")}
|
|
/>
|
|
<FieldError errors={[errors.widgetWidth]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
<div className="space-y-3 rounded-md border p-3">
|
|
<div>
|
|
<div className="text-sm font-medium">{t("channel.userJwtSecret")}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{t("channel.userJwtSecretDescription")}
|
|
</div>
|
|
</div>
|
|
{!itemId ? (
|
|
<div className="rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground">
|
|
{t("channel.secretAfterSave")}
|
|
</div>
|
|
) : (
|
|
<Field data-invalid={!!errors.userTokenSecret}>
|
|
<FieldLabel htmlFor="channel-user-token-secret">Secret</FieldLabel>
|
|
<FieldContent>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<Input
|
|
id="channel-user-token-secret"
|
|
readOnly
|
|
className="font-mono text-xs"
|
|
{...register("userTokenSecret")}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={copyUserTokenSecret}
|
|
disabled={!userTokenSecret}
|
|
>
|
|
<CopyIcon className="size-4" />
|
|
{t("channel.copy")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => void handleResetUserTokenSecret()}
|
|
>
|
|
{t("channel.reset")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<FieldError errors={[errors.userTokenSecret]} />
|
|
</FieldContent>
|
|
</Field>
|
|
)}
|
|
</div>
|
|
<WebAccessGuide channelId={channelDetail?.channelId || ""} />
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<Field data-invalid={!!errors.remark}>
|
|
<FieldLabel htmlFor="channel-remark">{t("channel.remark")}</FieldLabel>
|
|
<FieldContent>
|
|
<Textarea id="channel-remark" rows={3} {...register("remark")} />
|
|
<FieldError errors={[errors.remark]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</form>
|
|
)}
|
|
</ProjectDialog>
|
|
)
|
|
}
|
|
|
|
// The origin cannot change within a document. An explicit server snapshot keeps
|
|
// the generated access links hydration-safe without a state-setting effect.
|
|
const subscribeToOrigin = () => () => {}
|
|
const readBrowserOrigin = () => window.location.origin
|
|
const readServerOrigin = () => ""
|
|
|
|
function WebAccessGuide({ channelId }: { channelId: string }) {
|
|
const t = useI18n()
|
|
const origin = useSyncExternalStore(subscribeToOrigin, readBrowserOrigin, readServerOrigin)
|
|
|
|
const accessUrl = useMemo(() => {
|
|
if (!origin || !channelId) {
|
|
return ""
|
|
}
|
|
const url = new URL("/support/chat/", origin)
|
|
url.searchParams.set("channelId", channelId)
|
|
return url.toString()
|
|
}, [channelId, origin])
|
|
|
|
const testUrl = useMemo(() => {
|
|
if (!origin || !channelId) {
|
|
return ""
|
|
}
|
|
const url = new URL(getWidgetDemoPath(), origin)
|
|
url.searchParams.set("channelId", channelId)
|
|
return url.toString()
|
|
}, [channelId, origin])
|
|
|
|
const snippet = useMemo(() => {
|
|
if (!origin || !channelId) {
|
|
return ""
|
|
}
|
|
return `<script>
|
|
window.AgentDeskConfig = {
|
|
channelId: "${channelId}"
|
|
};
|
|
</script>
|
|
<script async src="${origin}/sdk/agent-desk-sdk.min.js"></script>`
|
|
}, [channelId, origin])
|
|
|
|
async function copyText(text: string, successMessage: string) {
|
|
if (!text) {
|
|
return
|
|
}
|
|
try {
|
|
await navigator.clipboard.writeText(text)
|
|
toast.success(successMessage)
|
|
} catch {
|
|
toast.error(t("channel.copyFailed"))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 border-t pt-4">
|
|
<div>
|
|
<div className="text-sm font-medium">{t("channel.webAccessInfo")}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{channelId
|
|
? t("channel.webAccessReady")
|
|
: t("channel.webAccessPending")}
|
|
</div>
|
|
</div>
|
|
|
|
{!channelId ? (
|
|
<div className="rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground">
|
|
{t("channel.newChannelPending")}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium text-muted-foreground">{t("channel.directAccessUrl")}</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">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
title={t("channel.copyLink")}
|
|
onClick={() => copyText(accessUrl, t("channel.copiedAccessLink"))}
|
|
>
|
|
<CopyIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
title={t("channel.openLink")}
|
|
onClick={() => window.open(accessUrl, "_blank", "noopener,noreferrer")}
|
|
>
|
|
<ExternalLinkIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</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">
|
|
{t("channel.embeddedSnippet")}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => copyText(snippet, t("channel.copiedSnippet"))}
|
|
>
|
|
<CopyIcon className="size-4" />
|
|
{t("channel.copyCode")}
|
|
</Button>
|
|
</div>
|
|
<pre className="max-h-48 overflow-auto rounded-md bg-muted p-3 text-xs leading-5">
|
|
<code>{snippet}</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<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">{t("channel.accessGuide")}</div>
|
|
<div>{t("channel.webGuide1")}</div>
|
|
<div>{t("channel.webGuide2")}</div>
|
|
<div>{t("channel.webGuide3")}</div>
|
|
<div>{t("channel.webGuide4")}</div>
|
|
<div className="pt-1">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => window.open(testUrl, "_blank", "noopener,noreferrer")}
|
|
>
|
|
<ExternalLinkIcon className="size-4" />
|
|
{t("channel.openTestPage")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|