1620 lines
67 KiB
TypeScript
1620 lines
67 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import {
|
|
CheckCircle2,
|
|
XCircle,
|
|
AlertCircle,
|
|
RefreshCw,
|
|
Server,
|
|
Cpu,
|
|
Radio,
|
|
Key,
|
|
Loader2,
|
|
Settings2,
|
|
ScrollText,
|
|
QrCode,
|
|
PlugZap,
|
|
} from 'lucide-react';
|
|
import {
|
|
getChannelConfig,
|
|
getChannelConnectorSession,
|
|
getStatus,
|
|
listChannelConnectors,
|
|
listChannelEvents,
|
|
restartRuntime,
|
|
startChannelConnectorSession,
|
|
updateAgentConfig,
|
|
updateChannelConfig,
|
|
updateProviderConfig,
|
|
} from '@/lib/api';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import type {
|
|
ChannelConfigDetail,
|
|
ChannelConnectorDescriptor,
|
|
ChannelEventRecord,
|
|
ChannelStatus,
|
|
ConnectorSessionResponse,
|
|
ProviderStatus,
|
|
SystemStatus,
|
|
} from '@/types';
|
|
import { AppLocale, pickAppText } from '@/lib/i18n/core';
|
|
import { useAppI18n } from '@/lib/i18n/provider';
|
|
|
|
type ProviderFormState = {
|
|
enabled: boolean;
|
|
model: string;
|
|
apiKey: string;
|
|
apiBase: string;
|
|
requestTimeoutSeconds: string;
|
|
};
|
|
|
|
type AgentFormState = {
|
|
maxTokens: string;
|
|
temperature: string;
|
|
maxToolIterations: string;
|
|
};
|
|
|
|
type ChannelFormState = {
|
|
enabled: boolean;
|
|
kind: string;
|
|
mode: string;
|
|
accountId: string;
|
|
displayName: string;
|
|
botToken: string;
|
|
appId: string;
|
|
appSecret: string;
|
|
clientSecret: string;
|
|
token: string;
|
|
domain: string;
|
|
connectionMode: string;
|
|
botUsername: string;
|
|
botOpenId: string;
|
|
webhookUrl: string;
|
|
webhookSecret: string;
|
|
requireMentionInGroups: boolean;
|
|
allowFrom: string;
|
|
groupAllowFrom: string;
|
|
dmPolicy: string;
|
|
groupPolicy: string;
|
|
markdownSupport: boolean;
|
|
baseUrl: string;
|
|
cdnBaseUrl: string;
|
|
maxMessageChars: string;
|
|
textBatchDelaySeconds: string;
|
|
};
|
|
|
|
const EMPTY_CHANNEL_FORM: ChannelFormState = {
|
|
enabled: false,
|
|
kind: 'telegram',
|
|
mode: 'polling',
|
|
accountId: '',
|
|
displayName: '',
|
|
botToken: '',
|
|
appId: '',
|
|
appSecret: '',
|
|
clientSecret: '',
|
|
token: '',
|
|
domain: 'feishu',
|
|
connectionMode: 'websocket',
|
|
botUsername: '',
|
|
botOpenId: '',
|
|
webhookUrl: '',
|
|
webhookSecret: '',
|
|
requireMentionInGroups: true,
|
|
allowFrom: '',
|
|
groupAllowFrom: '',
|
|
dmPolicy: 'open',
|
|
groupPolicy: 'allowlist',
|
|
markdownSupport: false,
|
|
baseUrl: '',
|
|
cdnBaseUrl: '',
|
|
maxMessageChars: '',
|
|
textBatchDelaySeconds: '',
|
|
};
|
|
|
|
const CONFIGURABLE_CHANNEL_KINDS = new Set(['telegram', 'feishu', 'qqbot', 'weixin']);
|
|
const SESSION_CONNECTOR_KINDS = new Set(['weixin', 'feishu']);
|
|
|
|
type ConnectorWizardForm = {
|
|
kind: string;
|
|
displayName: string;
|
|
domain: string;
|
|
mode: 'create' | 'link';
|
|
appId: string;
|
|
appSecret: string;
|
|
verificationToken: string;
|
|
};
|
|
|
|
const EMPTY_CONNECTOR_WIZARD: ConnectorWizardForm = {
|
|
kind: '',
|
|
displayName: '',
|
|
domain: 'feishu',
|
|
mode: 'create',
|
|
appId: '',
|
|
appSecret: '',
|
|
verificationToken: '',
|
|
};
|
|
|
|
export default function StatusPage() {
|
|
const { locale } = useAppI18n();
|
|
const [status, setStatus] = useState<SystemStatus | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedProvider, setSelectedProvider] = useState<ProviderStatus | null>(null);
|
|
const [providerForm, setProviderForm] = useState<ProviderFormState>(() => ({
|
|
enabled: false,
|
|
model: '',
|
|
apiKey: '',
|
|
apiBase: '',
|
|
requestTimeoutSeconds: '',
|
|
}));
|
|
const [savingProvider, setSavingProvider] = useState(false);
|
|
const [providerError, setProviderError] = useState<string | null>(null);
|
|
const [agentForm, setAgentForm] = useState<AgentFormState>(() => ({
|
|
maxTokens: '',
|
|
temperature: '0.2',
|
|
maxToolIterations: '30',
|
|
}));
|
|
const [savingAgent, setSavingAgent] = useState(false);
|
|
const [agentError, setAgentError] = useState<string | null>(null);
|
|
const [selectedChannel, setSelectedChannel] = useState<ChannelStatus | null>(null);
|
|
const [channelConfig, setChannelConfig] = useState<ChannelConfigDetail | null>(null);
|
|
const [channelForm, setChannelForm] = useState<ChannelFormState>(() => ({ ...EMPTY_CHANNEL_FORM }));
|
|
const [channelEvents, setChannelEvents] = useState<ChannelEventRecord[]>([]);
|
|
const [loadingChannelConfig, setLoadingChannelConfig] = useState(false);
|
|
const [loadingChannelEvents, setLoadingChannelEvents] = useState(false);
|
|
const [savingChannel, setSavingChannel] = useState(false);
|
|
const [channelError, setChannelError] = useState<string | null>(null);
|
|
const [channelRestartRequired, setChannelRestartRequired] = useState(false);
|
|
const [restartOpen, setRestartOpen] = useState(false);
|
|
const [restarting, setRestarting] = useState(false);
|
|
const [restartError, setRestartError] = useState<string | null>(null);
|
|
const [connectors, setConnectors] = useState<ChannelConnectorDescriptor[]>([]);
|
|
const [loadingConnectors, setLoadingConnectors] = useState(false);
|
|
const [connectorDialogOpen, setConnectorDialogOpen] = useState(false);
|
|
const [connectorForm, setConnectorForm] = useState<ConnectorWizardForm>(() => ({ ...EMPTY_CONNECTOR_WIZARD }));
|
|
const [connectorSession, setConnectorSession] = useState<ConnectorSessionResponse | null>(null);
|
|
const [startingConnector, setStartingConnector] = useState(false);
|
|
const [pollingConnector, setPollingConnector] = useState(false);
|
|
const [connectorError, setConnectorError] = useState<string | null>(null);
|
|
|
|
const loadStatus = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await getStatus();
|
|
setStatus(data);
|
|
setAgentForm({
|
|
maxTokens: data.max_tokens == null ? '' : String(data.max_tokens),
|
|
temperature: String(data.temperature),
|
|
maxToolIterations: String(data.max_tool_iterations),
|
|
});
|
|
} catch (err: any) {
|
|
setError(err.message || pickAppText(locale, '连接后端失败', 'Failed to connect to the backend'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadStatus();
|
|
}, []);
|
|
|
|
const loadConnectors = async () => {
|
|
setLoadingConnectors(true);
|
|
try {
|
|
setConnectors(await listChannelConnectors());
|
|
} catch {
|
|
setConnectors([]);
|
|
} finally {
|
|
setLoadingConnectors(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadConnectors();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const sessionId = connectorSession?.session.sessionId;
|
|
const status = connectorSession?.session.status;
|
|
if (!sessionId || connectorSessionDone(status)) return;
|
|
|
|
const timer = window.setInterval(() => {
|
|
void pollConnectorSession(sessionId);
|
|
}, 2500);
|
|
return () => window.clearInterval(timer);
|
|
}, [connectorSession?.session.sessionId, connectorSession?.session.status]);
|
|
|
|
const openProviderDialog = (provider: ProviderStatus) => {
|
|
setSelectedProvider(provider);
|
|
setProviderError(null);
|
|
setProviderForm({
|
|
enabled: Boolean(provider.enabled || provider.has_key),
|
|
model: status?.model || '',
|
|
apiKey: '',
|
|
apiBase: provider.api_base || provider.default_api_base || provider.detail || '',
|
|
requestTimeoutSeconds: '',
|
|
});
|
|
};
|
|
|
|
const handleSaveProvider = async () => {
|
|
if (!selectedProvider) return;
|
|
const providerId = selectedProvider.id || selectedProvider.name;
|
|
setSavingProvider(true);
|
|
setProviderError(null);
|
|
try {
|
|
const timeout = providerForm.requestTimeoutSeconds.trim()
|
|
? Number(providerForm.requestTimeoutSeconds.trim())
|
|
: undefined;
|
|
if (timeout !== undefined && (!Number.isFinite(timeout) || timeout <= 0)) {
|
|
throw new Error(pickAppText(locale, '请求超时必须是正数', 'Request timeout must be a positive number'));
|
|
}
|
|
await updateProviderConfig(providerId, {
|
|
enabled: providerForm.enabled,
|
|
model: providerForm.model.trim() || undefined,
|
|
api_key: providerForm.apiKey.trim() || undefined,
|
|
api_base: providerForm.apiBase.trim() || undefined,
|
|
request_timeout_seconds: timeout,
|
|
});
|
|
await loadStatus();
|
|
setSelectedProvider(null);
|
|
} catch (err: any) {
|
|
setProviderError(err.message || pickAppText(locale, '保存提供商配置失败', 'Failed to save provider settings'));
|
|
} finally {
|
|
setSavingProvider(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveAgentConfig = async () => {
|
|
setSavingAgent(true);
|
|
setAgentError(null);
|
|
try {
|
|
const maxTokensText = agentForm.maxTokens.trim();
|
|
const maxTokens = maxTokensText ? Number(maxTokensText) : null;
|
|
const temperature = Number(agentForm.temperature.trim());
|
|
const maxToolIterations = Number(agentForm.maxToolIterations.trim());
|
|
if (
|
|
maxTokens !== null &&
|
|
(!Number.isInteger(maxTokens) || maxTokens <= 0)
|
|
) {
|
|
throw new Error(pickAppText(locale, '最大令牌数必须为空或正整数', 'Max tokens must be blank or a positive integer'));
|
|
}
|
|
if (!Number.isFinite(temperature) || temperature < 0 || temperature > 2) {
|
|
throw new Error(pickAppText(locale, '温度必须在 0 到 2 之间', 'Temperature must be between 0 and 2'));
|
|
}
|
|
if (!Number.isInteger(maxToolIterations) || maxToolIterations < 0) {
|
|
throw new Error(pickAppText(locale, '最大工具迭代次数必须是非负整数', 'Max tool iterations must be a non-negative integer'));
|
|
}
|
|
await updateAgentConfig({
|
|
max_tokens: maxTokens,
|
|
temperature,
|
|
max_tool_iterations: maxToolIterations,
|
|
});
|
|
await loadStatus();
|
|
} catch (err: any) {
|
|
setAgentError(err.message || pickAppText(locale, '保存智能体配置失败', 'Failed to save agent configuration'));
|
|
} finally {
|
|
setSavingAgent(false);
|
|
}
|
|
};
|
|
|
|
const openChannelDetails = async (channel: ChannelStatus) => {
|
|
setSelectedChannel(channel);
|
|
setChannelConfig(null);
|
|
setChannelForm(channelFormFromStatus(channel));
|
|
setChannelError(null);
|
|
setChannelRestartRequired(false);
|
|
setChannelEvents([]);
|
|
setLoadingChannelConfig(true);
|
|
setLoadingChannelEvents(true);
|
|
try {
|
|
const config = await getChannelConfig(channel.channel_id);
|
|
setChannelConfig(config);
|
|
setChannelForm(channelFormFromConfig(config));
|
|
} catch (err: any) {
|
|
setChannelError(err.message || pickAppText(locale, '加载通道配置失败', 'Failed to load channel configuration'));
|
|
} finally {
|
|
setLoadingChannelConfig(false);
|
|
}
|
|
try {
|
|
setChannelEvents(await listChannelEvents(channel.channel_id, 20));
|
|
} catch {
|
|
setChannelEvents([]);
|
|
} finally {
|
|
setLoadingChannelEvents(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveChannel = async () => {
|
|
if (!selectedChannel) return;
|
|
setSavingChannel(true);
|
|
setChannelError(null);
|
|
try {
|
|
const payload = channelPayloadFromForm(channelForm);
|
|
const result = await updateChannelConfig(selectedChannel.channel_id, payload);
|
|
setChannelConfig(result.channel);
|
|
setChannelForm(channelFormFromConfig(result.channel));
|
|
setChannelRestartRequired(Boolean(result.restart_required));
|
|
await loadStatus();
|
|
} catch (err: any) {
|
|
setChannelError(err.message || pickAppText(locale, '保存通道配置失败', 'Failed to save channel configuration'));
|
|
} finally {
|
|
setSavingChannel(false);
|
|
}
|
|
};
|
|
|
|
const handleRestart = async () => {
|
|
setRestarting(true);
|
|
setRestartError(null);
|
|
try {
|
|
await restartRuntime();
|
|
setRestartOpen(false);
|
|
window.setTimeout(() => {
|
|
void loadStatus();
|
|
}, 5000);
|
|
} catch (err: any) {
|
|
setRestartError(err.message || pickAppText(locale, '重启失败', 'Restart failed'));
|
|
} finally {
|
|
setRestarting(false);
|
|
}
|
|
};
|
|
|
|
const openConnectorDialog = (connector: ChannelConnectorDescriptor) => {
|
|
const kind = connector.kind;
|
|
setConnectorDialogOpen(true);
|
|
setConnectorSession(null);
|
|
setConnectorError(null);
|
|
setConnectorForm({
|
|
...EMPTY_CONNECTOR_WIZARD,
|
|
kind,
|
|
displayName: connectorDisplayName(connector),
|
|
domain: kind === 'feishu' ? 'feishu' : '',
|
|
});
|
|
};
|
|
|
|
const handleStartConnectorSession = async () => {
|
|
if (!connectorForm.kind || !SESSION_CONNECTOR_KINDS.has(connectorForm.kind)) return;
|
|
setStartingConnector(true);
|
|
setConnectorError(null);
|
|
try {
|
|
const options: Record<string, unknown> = {};
|
|
if (connectorForm.kind === 'feishu') {
|
|
options.domain = connectorForm.domain || 'feishu';
|
|
options.mode = connectorForm.mode;
|
|
if (connectorForm.appId.trim()) options.appId = connectorForm.appId.trim();
|
|
if (connectorForm.appSecret.trim()) options.appSecret = connectorForm.appSecret.trim();
|
|
if (connectorForm.verificationToken.trim()) options.verificationToken = connectorForm.verificationToken.trim();
|
|
}
|
|
const response = await startChannelConnectorSession({
|
|
kind: connectorForm.kind,
|
|
displayName: connectorForm.displayName.trim() || connectorDisplayName({ kind: connectorForm.kind }),
|
|
options,
|
|
});
|
|
setConnectorSession(response);
|
|
if (!connectorSessionDone(response.session.status)) {
|
|
window.setTimeout(() => {
|
|
void pollConnectorSession(response.session.sessionId);
|
|
}, 1000);
|
|
}
|
|
} catch (err: any) {
|
|
setConnectorError(err.message || pickAppText(locale, '启动连接失败', 'Failed to start connector session'));
|
|
} finally {
|
|
setStartingConnector(false);
|
|
}
|
|
};
|
|
|
|
const pollConnectorSession = async (sessionId: string) => {
|
|
setPollingConnector(true);
|
|
try {
|
|
const response = await getChannelConnectorSession(sessionId);
|
|
setConnectorSession(response);
|
|
if (response.session.status === 'connected') {
|
|
await loadStatus();
|
|
}
|
|
} catch (err: any) {
|
|
setConnectorError(err.message || pickAppText(locale, '刷新连接状态失败', 'Failed to refresh connector status'));
|
|
} finally {
|
|
setPollingConnector(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6">
|
|
<Card className="border-destructive">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-3 text-destructive">
|
|
<AlertCircle className="w-5 h-5" />
|
|
<div>
|
|
<p className="font-medium">{pickAppText(locale, '无法连接到 Boardware Agent Sandbox 后端', 'Unable to connect to the Boardware Agent Sandbox backend')}</p>
|
|
<p className="text-sm text-muted-foreground mt-1">{error}</p>
|
|
<p className="text-sm text-muted-foreground mt-1">{pickAppText(locale, '请确认后端服务已启动，并且当前页面可以访问它。', 'Please confirm the backend service is running and reachable from this page.')}</p>
|
|
</div>
|
|
</div>
|
|
<Button onClick={loadStatus} variant="outline" size="sm" className="mt-4">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
{pickAppText(locale, '重试', 'Retry')}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!status) return null;
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl p-6 space-y-6">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{pickAppText(locale, '配置', 'Settings')}</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{pickAppText(
|
|
locale,
|
|
'集中管理模型、工具、集成和实例运行状态。Task 和通知只在各自页面处理。',
|
|
'Manage models, tools, integrations, and instance runtime status. Tasks and notifications stay in their own pages.'
|
|
)}
|
|
</p>
|
|
</div>
|
|
<Button onClick={loadStatus} variant="outline" size="sm">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
{pickAppText(locale, '刷新', 'Refresh')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* System Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Server className="w-4 h-4" />
|
|
{pickAppText(locale, '实例运行', 'Instance runtime')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-5 lg:grid-cols-[1fr_auto] lg:items-center">
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">{pickAppText(locale, '运行与调试', 'Runtime and debugging')}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{pickAppText(locale, '查看每次对话的运行日志和当前实例运行状态。', 'Inspect per-chat runtime logs and current instance status.')}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap justify-start gap-2 lg:justify-end">
|
|
<Button asChild variant="outline">
|
|
<Link href="/logs">
|
|
<ScrollText className="w-4 h-4 mr-2" />
|
|
{pickAppText(locale, '运行日志', 'Runtime Logs')}
|
|
</Link>
|
|
</Button>
|
|
{status.runtime_controls?.self_restart !== false ? (
|
|
<Button variant="outline" onClick={() => setRestartOpen(true)}>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
{pickAppText(locale, '重启实例', 'Restart instance')}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 grid gap-3 border-t pt-5 md:grid-cols-2">
|
|
<InfoRow label={pickAppText(locale, '配置文件', 'Config file')} value={status.config_path} />
|
|
<InfoRow label={pickAppText(locale, '工作区', 'Workspace')} value={status.workspace} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Model Config */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Cpu className="w-4 h-4" />
|
|
{pickAppText(locale, '智能体配置', 'Agent configuration')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-5">
|
|
<InfoRow label={pickAppText(locale, '模型', 'Model')} value={status.model} />
|
|
<div className="grid gap-4 border-t pt-5 md:grid-cols-3">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="agent-max-tokens">{pickAppText(locale, '最大令牌数', 'Max tokens')}</Label>
|
|
<Input
|
|
id="agent-max-tokens"
|
|
inputMode="numeric"
|
|
value={agentForm.maxTokens}
|
|
onChange={(event) => setAgentForm((prev) => ({ ...prev, maxTokens: event.target.value }))}
|
|
placeholder={pickAppText(locale, '模型默认', 'Model default')}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="agent-temperature">{pickAppText(locale, '温度', 'Temperature')}</Label>
|
|
<Input
|
|
id="agent-temperature"
|
|
inputMode="decimal"
|
|
value={agentForm.temperature}
|
|
onChange={(event) => setAgentForm((prev) => ({ ...prev, temperature: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="agent-max-tool-iterations">
|
|
{pickAppText(locale, '最大工具迭代次数', 'Max tool iterations')}
|
|
</Label>
|
|
<Input
|
|
id="agent-max-tool-iterations"
|
|
inputMode="numeric"
|
|
value={agentForm.maxToolIterations}
|
|
onChange={(event) => setAgentForm((prev) => ({ ...prev, maxToolIterations: event.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="text-sm text-destructive">{agentError || ''}</div>
|
|
<Button onClick={handleSaveAgentConfig} disabled={savingAgent} className="sm:self-end">
|
|
{savingAgent ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{pickAppText(locale, '保存智能体配置', 'Save agent config')}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Providers */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Key className="w-4 h-4" />
|
|
{pickAppText(locale, '提供商', 'Providers')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
|
{status.providers.map((p) => (
|
|
<button
|
|
key={p.id || p.name}
|
|
type="button"
|
|
onClick={() => openProviderDialog(p)}
|
|
className={[
|
|
'group flex min-h-[76px] w-full items-start justify-between rounded-lg border p-3 text-left transition',
|
|
p.active
|
|
? 'border-primary bg-primary/5 shadow-sm'
|
|
: 'border-border bg-background hover:border-primary/50 hover:bg-muted/40',
|
|
].join(' ')}
|
|
>
|
|
<span className="min-w-0 space-y-1">
|
|
<span className="flex items-center gap-2 text-sm font-medium">
|
|
{p.has_key ? (
|
|
<CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
|
|
) : (
|
|
<XCircle className="h-4 w-4 shrink-0 text-muted-foreground/40" />
|
|
)}
|
|
<span className={p.has_key ? 'truncate' : 'truncate text-muted-foreground'}>
|
|
{providerLabel(p)}
|
|
</span>
|
|
</span>
|
|
<span className="block truncate text-xs text-muted-foreground">
|
|
{p.active
|
|
? pickAppText(locale, '当前默认', 'Current default')
|
|
: p.enabled
|
|
? pickAppText(locale, '已启用', 'Enabled')
|
|
: pickAppText(locale, '点击配置', 'Click to configure')}
|
|
</span>
|
|
{(p.detail || p.api_key_masked) && (
|
|
<span className="block truncate text-xs text-muted-foreground">
|
|
{p.api_key_masked || p.detail}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<Settings2 className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground opacity-60 group-hover:text-primary" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog open={Boolean(selectedProvider)} onOpenChange={(open) => !open && setSelectedProvider(null)}>
|
|
<DialogContent className="sm:max-w-[520px]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{pickAppText(locale, '配置提供商', 'Configure provider')}
|
|
{selectedProvider ? ` · ${providerLabel(selectedProvider)}` : ''}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{pickAppText(locale, '启用后会把它设为当前实例默认提供商。API Key 留空会保留已保存的值。', 'When enabled, this becomes the default provider for this instance. Leave API key empty to keep the saved value.')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-5 py-2">
|
|
<div className="flex items-center justify-between rounded-lg border px-3 py-2">
|
|
<div>
|
|
<Label className="text-sm">{pickAppText(locale, '启用提供商', 'Enable provider')}</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, '关闭会从配置中移除这个提供商', 'Turning this off removes this provider from config')}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={providerForm.enabled}
|
|
onCheckedChange={(checked) => setProviderForm((prev) => ({ ...prev, enabled: checked }))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="provider-model">{pickAppText(locale, '默认模型', 'Default model')}</Label>
|
|
<Input
|
|
id="provider-model"
|
|
value={providerForm.model}
|
|
onChange={(event) => setProviderForm((prev) => ({ ...prev, model: event.target.value }))}
|
|
placeholder="qwen-plus"
|
|
disabled={!providerForm.enabled}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="provider-api-key">API Key</Label>
|
|
<Input
|
|
id="provider-api-key"
|
|
type="password"
|
|
value={providerForm.apiKey}
|
|
onChange={(event) => setProviderForm((prev) => ({ ...prev, apiKey: event.target.value }))}
|
|
placeholder={selectedProvider?.api_key_masked || pickAppText(locale, '留空保持不变', 'Leave blank to keep existing')}
|
|
disabled={!providerForm.enabled || Boolean(selectedProvider?.is_oauth)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="provider-api-base">API Base</Label>
|
|
<Input
|
|
id="provider-api-base"
|
|
value={providerForm.apiBase}
|
|
onChange={(event) => setProviderForm((prev) => ({ ...prev, apiBase: event.target.value }))}
|
|
placeholder={selectedProvider?.default_api_base || 'https://api.example.com/v1'}
|
|
disabled={!providerForm.enabled || Boolean(selectedProvider?.is_oauth)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="provider-timeout">{pickAppText(locale, '请求超时（秒）', 'Request timeout (seconds)')}</Label>
|
|
<Input
|
|
id="provider-timeout"
|
|
inputMode="decimal"
|
|
value={providerForm.requestTimeoutSeconds}
|
|
onChange={(event) => setProviderForm((prev) => ({ ...prev, requestTimeoutSeconds: event.target.value }))}
|
|
placeholder={pickAppText(locale, '默认', 'Default')}
|
|
disabled={!providerForm.enabled}
|
|
/>
|
|
</div>
|
|
|
|
{providerError ? (
|
|
<p className="text-sm text-destructive">{providerError}</p>
|
|
) : null}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setSelectedProvider(null)} disabled={savingProvider}>
|
|
{pickAppText(locale, '取消', 'Cancel')}
|
|
</Button>
|
|
<Button onClick={handleSaveProvider} disabled={savingProvider}>
|
|
{savingProvider ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{pickAppText(locale, '保存', 'Save')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={Boolean(selectedChannel)} onOpenChange={(open) => !open && setSelectedChannel(null)}>
|
|
<DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-[820px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{selectedChannel?.display_name || selectedChannel?.channel_id}</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedChannel ? `${selectedChannel.kind}/${selectedChannel.mode} · ${selectedChannel.channel_id}` : ''}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
{selectedChannel ? (
|
|
<div className="space-y-5">
|
|
{CONFIGURABLE_CHANNEL_KINDS.has(channelForm.kind) ? (
|
|
<div className="space-y-5 rounded-lg border p-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-sm font-medium">{pickAppText(locale, '连接配置', 'Connection settings')}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, '凭据留空会保留已保存的值。保存后重启实例才会重新连接通道。', 'Leave credentials blank to keep saved values. Restart the instance after saving to reconnect channels.')}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={channelForm.enabled}
|
|
onCheckedChange={(checked) => setChannelForm((prev) => ({ ...prev, enabled: checked }))}
|
|
disabled={loadingChannelConfig || savingChannel}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label={pickAppText(locale, '显示名', 'Display name')}>
|
|
<Input
|
|
value={channelForm.displayName}
|
|
onChange={(event) => setChannelForm((prev) => ({ ...prev, displayName: event.target.value }))}
|
|
placeholder={selectedChannel.display_name || selectedChannel.channel_id}
|
|
/>
|
|
</Field>
|
|
<Field label="Account ID">
|
|
<Input
|
|
value={channelForm.accountId}
|
|
onChange={(event) => setChannelForm((prev) => ({ ...prev, accountId: event.target.value }))}
|
|
placeholder="bot-main"
|
|
/>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '平台', 'Platform')}>
|
|
<Select
|
|
value={channelForm.kind}
|
|
onValueChange={(value) => {
|
|
const defaults = channelDefaults(value);
|
|
setChannelForm((prev) => ({
|
|
...defaults,
|
|
enabled: prev.enabled,
|
|
accountId: prev.accountId || defaults.accountId,
|
|
displayName: prev.displayName || defaults.displayName,
|
|
}));
|
|
}}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="telegram">Telegram</SelectItem>
|
|
<SelectItem value="feishu">Feishu/Lark</SelectItem>
|
|
<SelectItem value="qqbot">QQ Bot</SelectItem>
|
|
<SelectItem value="weixin">Weixin</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '模式', 'Mode')}>
|
|
<Select
|
|
value={channelForm.mode}
|
|
onValueChange={(value) => setChannelForm((prev) => ({ ...prev, mode: value, connectionMode: value }))}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
{modeOptionsForKind(channelForm.kind).map((mode) => (
|
|
<SelectItem key={mode} value={mode}>{mode}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</div>
|
|
|
|
<ChannelCredentialFields
|
|
form={channelForm}
|
|
locale={locale}
|
|
maskedSecrets={channelConfig?.secrets || {}}
|
|
setForm={setChannelForm}
|
|
/>
|
|
<ChannelPolicyFields form={channelForm} locale={locale} setForm={setChannelForm} />
|
|
|
|
{channelError ? <p className="text-sm text-destructive">{channelError}</p> : null}
|
|
{channelRestartRequired ? (
|
|
<div className="flex flex-col gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
|
|
<span>{pickAppText(locale, '配置已保存。重启实例后通道会按新配置启动。', 'Configuration saved. Restart the instance to start channels with the new settings.')}</span>
|
|
<Button variant="outline" size="sm" onClick={() => setRestartOpen(true)}>
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
{pickAppText(locale, '重启实例', 'Restart instance')}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
<div className="flex justify-end">
|
|
<Button onClick={handleSaveChannel} disabled={savingChannel || loadingChannelConfig}>
|
|
{savingChannel ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{pickAppText(locale, '保存通道配置', 'Save channel config')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="grid gap-2 text-sm sm:grid-cols-2">
|
|
<InfoRow label="State" value={selectedChannel.state} />
|
|
<InfoRow label="Account" value={selectedChannel.account_id || '-'} />
|
|
<InfoRow label="Webhook" value={selectedChannel.webhook_url || '-'} />
|
|
<InfoRow label="WebSocket" value={selectedChannel.websocket_url || '-'} />
|
|
<InfoRow label="Connected peers" value={String(selectedChannel.connected_peers ?? 0)} />
|
|
<InfoRow label="Last error" value={selectedChannel.last_error || '-'} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">{pickAppText(locale, '最近事件', 'Recent events')}</p>
|
|
{loadingChannelEvents ? (
|
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
|
) : (
|
|
<div className="max-h-[320px] overflow-auto rounded-md border">
|
|
{channelEvents.map((event) => (
|
|
<div key={event.event_id} className="border-b px-3 py-2 text-xs last:border-b-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="font-medium">{event.kind}</span>
|
|
<span className="text-muted-foreground">{event.created_at}</span>
|
|
</div>
|
|
<div className="mt-1 text-muted-foreground">
|
|
{event.status}{event.error ? ` · ${event.error}` : ''}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{channelEvents.length === 0 ? (
|
|
<p className="px-3 py-6 text-sm text-muted-foreground">
|
|
{pickAppText(locale, '暂无事件', 'No events yet')}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={restartOpen} onOpenChange={setRestartOpen}>
|
|
<DialogContent className="sm:max-w-[420px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{pickAppText(locale, '重启实例？', 'Restart instance?')}</DialogTitle>
|
|
<DialogDescription>
|
|
{pickAppText(
|
|
locale,
|
|
'应用会短暂不可用，正在运行的对话和通道请求可能会中断。',
|
|
'The app will be unavailable briefly. Running chats and channel requests may be interrupted.'
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
{restartError ? <p className="text-sm text-destructive">{restartError}</p> : null}
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setRestartOpen(false)} disabled={restarting}>
|
|
{pickAppText(locale, '取消', 'Cancel')}
|
|
</Button>
|
|
<Button onClick={handleRestart} disabled={restarting}>
|
|
{restarting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
|
{pickAppText(locale, '重启', 'Restart')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={connectorDialogOpen} onOpenChange={(open) => {
|
|
setConnectorDialogOpen(open);
|
|
if (!open) {
|
|
setConnectorSession(null);
|
|
setConnectorError(null);
|
|
}
|
|
}}>
|
|
<DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-[560px]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{connectorForm.kind ? connectorDisplayName({ kind: connectorForm.kind }) : pickAppText(locale, '连接通道', 'Connect channel')}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{connectorForm.kind === 'weixin'
|
|
? pickAppText(locale, '使用扫码连接当前实例。', 'Connect this instance with QR login.')
|
|
: connectorForm.kind === 'feishu'
|
|
? pickAppText(locale, '启动飞书/Lark 插件连接流程。', 'Start the Feishu/Lark plugin connection flow.')
|
|
: pickAppText(locale, '选择连接方式。', 'Choose a connection method.')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-5">
|
|
<Field label={pickAppText(locale, '显示名', 'Display name')}>
|
|
<Input
|
|
value={connectorForm.displayName}
|
|
onChange={(event) => setConnectorForm((prev) => ({ ...prev, displayName: event.target.value }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
/>
|
|
</Field>
|
|
|
|
{connectorForm.kind === 'feishu' ? (
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Domain">
|
|
<Select
|
|
value={connectorForm.domain}
|
|
onValueChange={(value) => setConnectorForm((prev) => ({ ...prev, domain: value }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="feishu">feishu</SelectItem>
|
|
<SelectItem value="lark">lark</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '模式', 'Mode')}>
|
|
<Select
|
|
value={connectorForm.mode}
|
|
onValueChange={(value) => setConnectorForm((prev) => ({ ...prev, mode: value as 'create' | 'link' }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="create">{pickAppText(locale, '新建机器人', 'Create bot')}</SelectItem>
|
|
<SelectItem value="link">{pickAppText(locale, '关联已有机器人', 'Link existing bot')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
</div>
|
|
{!connectorSession ? (
|
|
<div className="space-y-2 rounded-lg border bg-muted/20 p-3 text-sm text-muted-foreground">
|
|
{(connectorForm.mode === 'create'
|
|
? feishuCreateGuide(locale)
|
|
: feishuLinkGuide(locale)
|
|
).map((item) => (
|
|
<p key={item}>{item}</p>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{connectorForm.mode === 'link' ? (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="App ID">
|
|
<Input
|
|
value={connectorForm.appId}
|
|
onChange={(event) => setConnectorForm((prev) => ({ ...prev, appId: event.target.value }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
placeholder="cli_a..."
|
|
/>
|
|
</Field>
|
|
<Field label="App Secret">
|
|
<Input
|
|
type="password"
|
|
value={connectorForm.appSecret}
|
|
onChange={(event) => setConnectorForm((prev) => ({ ...prev, appSecret: event.target.value }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
/>
|
|
</Field>
|
|
<Field label="Verification Token">
|
|
<Input
|
|
type="password"
|
|
value={connectorForm.verificationToken}
|
|
onChange={(event) => setConnectorForm((prev) => ({ ...prev, verificationToken: event.target.value }))}
|
|
disabled={Boolean(connectorSession) || startingConnector}
|
|
placeholder={pickAppText(locale, '事件订阅校验 Token', 'Event subscription token')}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{connectorSession ? (
|
|
<div className="space-y-4 rounded-lg border p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{connectorSession.session.sessionId}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{connectorSession.connection?.channel_id || connectorSession.connection?.connection_id || '-'}
|
|
</p>
|
|
</div>
|
|
<Badge variant={connectorSessionBadgeVariant(connectorSession.session.status)}>
|
|
{connectorSession.session.status}
|
|
</Badge>
|
|
</div>
|
|
{connectorSession.session.qrImage ? (
|
|
<div className="flex justify-center rounded-md bg-muted/40 p-4">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
alt="Connector QR"
|
|
src={connectorSession.session.qrImage}
|
|
className="h-56 w-56 rounded bg-background object-contain"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{connectorSession.session.instructions?.length ? (
|
|
<div className="space-y-2 text-sm">
|
|
{connectorSession.session.instructions.map((item, index) => (
|
|
<div key={`${index}-${item}`} className="rounded-md border bg-muted/30 px-3 py-2">
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{connectorSession.session.accountId || connectorSession.session.displayName ? (
|
|
<div className="grid gap-2 text-sm sm:grid-cols-2">
|
|
<InfoRow label="Account" value={connectorSession.session.accountId || '-'} />
|
|
<InfoRow label="Name" value={connectorSession.session.displayName || '-'} />
|
|
</div>
|
|
) : null}
|
|
{connectorSession.session.error ? (
|
|
<p className="text-sm text-destructive">{connectorSession.session.error}</p>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{connectorError ? <p className="text-sm text-destructive">{connectorError}</p> : null}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setConnectorDialogOpen(false)} disabled={startingConnector}>
|
|
{pickAppText(locale, '关闭', 'Close')}
|
|
</Button>
|
|
{connectorSession ? (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => pollConnectorSession(connectorSession.session.sessionId)}
|
|
disabled={pollingConnector}
|
|
>
|
|
{pollingConnector ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
|
|
{pickAppText(locale, '刷新状态', 'Refresh status')}
|
|
</Button>
|
|
) : SESSION_CONNECTOR_KINDS.has(connectorForm.kind) ? (
|
|
<Button onClick={handleStartConnectorSession} disabled={startingConnector}>
|
|
{startingConnector ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <QrCode className="mr-2 h-4 w-4" />}
|
|
{pickAppText(locale, '开始连接', 'Start connection')}
|
|
</Button>
|
|
) : null}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Channels */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Radio className="w-4 h-4" />
|
|
{pickAppText(locale, '通道', 'Channels')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-5">
|
|
<div className="grid gap-2 sm:grid-cols-3">
|
|
{(connectors.length ? connectors : [{ kind: 'telegram' }, { kind: 'weixin' }, { kind: 'feishu' }]).map((connector) => {
|
|
const supportsSession = SESSION_CONNECTOR_KINDS.has(connector.kind);
|
|
return (
|
|
<button
|
|
key={connector.kind}
|
|
type="button"
|
|
onClick={() => supportsSession && openConnectorDialog(connector)}
|
|
disabled={!supportsSession}
|
|
className={[
|
|
'flex min-h-[86px] w-full items-start justify-between rounded-lg border px-3 py-3 text-left text-sm transition',
|
|
supportsSession ? 'hover:border-primary/50 hover:bg-muted/40' : 'opacity-70',
|
|
].join(' ')}
|
|
>
|
|
<span className="min-w-0 space-y-1">
|
|
<span className="flex items-center gap-2 font-medium">
|
|
{supportsSession ? <QrCode className="h-4 w-4" /> : <PlugZap className="h-4 w-4" />}
|
|
<span className="truncate">{connectorDisplayName(connector)}</span>
|
|
</span>
|
|
<span className="block truncate text-xs text-muted-foreground">
|
|
{connectorAuthLabel(connector, locale)}
|
|
</span>
|
|
</span>
|
|
<Badge variant={supportsSession ? 'outline' : 'secondary'}>
|
|
{supportsSession ? pickAppText(locale, '连接', 'Connect') : pickAppText(locale, '令牌', 'Token')}
|
|
</Badge>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{loadingConnectors ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
{pickAppText(locale, '正在加载连接器', 'Loading connectors')}
|
|
</div>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
{status.channels.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{pickAppText(locale, '尚未配置通道', 'No channels configured')}
|
|
</p>
|
|
) : (
|
|
status.channels.map((ch) => (
|
|
<button
|
|
key={ch.channel_id}
|
|
type="button"
|
|
onClick={() => openChannelDetails(ch)}
|
|
className="flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm hover:bg-muted/40"
|
|
>
|
|
<span className="min-w-0">
|
|
<span className="block truncate font-medium">{ch.display_name || ch.channel_id}</span>
|
|
<span className="block truncate text-xs text-muted-foreground">
|
|
{ch.channel_id} · {ch.kind}/{ch.mode} · {ch.account_id}
|
|
{typeof ch.connected_peers === 'number' ? ` · ${ch.connected_peers} peer${ch.connected_peers === 1 ? '' : 's'}` : ''}
|
|
</span>
|
|
</span>
|
|
<Badge variant={channelStateBadgeVariant(ch.state)}>
|
|
{ch.state}
|
|
</Badge>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoRow({
|
|
label,
|
|
value,
|
|
ok,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
ok?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">{label}</span>
|
|
<div className="flex items-center gap-2">
|
|
<code className="bg-muted px-2 py-0.5 rounded text-xs max-w-[400px] truncate">
|
|
{value}
|
|
</code>
|
|
{ok !== undefined &&
|
|
(ok ? (
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
) : (
|
|
<XCircle className="w-4 h-4 text-destructive" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function providerLabel(provider: ProviderStatus): string {
|
|
return provider.label || provider.name;
|
|
}
|
|
|
|
function connectorDisplayName(connector: Pick<ChannelConnectorDescriptor, 'kind' | 'displayName' | 'display_name'>): string {
|
|
if (connector.displayName || connector.display_name) return connector.displayName || connector.display_name || connector.kind;
|
|
if (connector.kind === 'weixin') return 'Weixin';
|
|
if (connector.kind === 'feishu') return 'Feishu/Lark';
|
|
if (connector.kind === 'telegram') return 'Telegram';
|
|
return connector.kind;
|
|
}
|
|
|
|
function connectorAuthLabel(connector: ChannelConnectorDescriptor, locale: AppLocale): string {
|
|
const authType = connector.authType || connector.auth_type;
|
|
if (connector.kind === 'weixin') return authType || pickAppText(locale, 'QR', 'QR');
|
|
if (connector.kind === 'feishu') return authType || pickAppText(locale, '插件', 'Plugin');
|
|
if (connector.kind === 'telegram') return authType || pickAppText(locale, 'Token', 'Token');
|
|
return authType || connector.kind;
|
|
}
|
|
|
|
function feishuCreateGuide(locale: AppLocale): string[] {
|
|
return [
|
|
pickAppText(locale, '点击开始连接后会生成飞书扫码二维码。', 'Start connection to generate a Feishu/Lark QR code.'),
|
|
pickAppText(locale, '用飞书客户端扫码，选择一键创建飞书机器人。', 'Scan with the Feishu/Lark client and choose one-click bot creation.'),
|
|
pickAppText(locale, '创建完成后打开机器人，发送任意消息或 /feishu start 验证。', 'After creation, open the bot and send any message or /feishu start to verify.'),
|
|
];
|
|
}
|
|
|
|
function feishuLinkGuide(locale: AppLocale): string[] {
|
|
return [
|
|
pickAppText(locale, '关联已有机器人需要填写 App ID 和 App Secret。', 'Linking an existing bot requires App ID and App Secret.'),
|
|
pickAppText(locale, '若提示凭证无效，请从飞书开放平台复制最新应用凭证。', 'If credentials are invalid, copy the latest app credentials from the Feishu/Lark developer console.'),
|
|
];
|
|
}
|
|
|
|
function connectorSessionDone(status?: string | null): boolean {
|
|
return ['connected', 'expired', 'error', 'cancelled'].includes(String(status || ''));
|
|
}
|
|
|
|
function connectorSessionBadgeVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
|
|
if (status === 'connected') return 'default';
|
|
if (status === 'error' || status === 'expired') return 'destructive';
|
|
if (status === 'cancelled') return 'secondary';
|
|
return 'outline';
|
|
}
|
|
|
|
function channelStateBadgeVariant(
|
|
state: ChannelStatus['state']
|
|
): 'default' | 'secondary' | 'destructive' | 'outline' {
|
|
if (state === 'running') return 'default';
|
|
if (state === 'error' || state === 'degraded') return 'destructive';
|
|
if (state === 'disabled' || state === 'stopped') return 'secondary';
|
|
return 'outline';
|
|
}
|
|
|
|
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="grid gap-2">
|
|
<Label>{label}</Label>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChannelCredentialFields({
|
|
form,
|
|
locale,
|
|
maskedSecrets,
|
|
setForm,
|
|
}: {
|
|
form: ChannelFormState;
|
|
locale: AppLocale;
|
|
maskedSecrets: Record<string, string>;
|
|
setForm: React.Dispatch<React.SetStateAction<ChannelFormState>>;
|
|
}) {
|
|
if (form.kind === 'telegram') {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Bot Token">
|
|
<Input
|
|
type="password"
|
|
value={form.botToken}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, botToken: event.target.value }))}
|
|
placeholder={maskedSecrets.botToken || pickAppText(locale, '留空保持不变', 'Leave blank to keep existing')}
|
|
/>
|
|
</Field>
|
|
<Field label="Bot Username">
|
|
<Input
|
|
value={form.botUsername}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, botUsername: event.target.value }))}
|
|
placeholder="beaver_bot"
|
|
/>
|
|
</Field>
|
|
{form.mode === 'webhook' ? (
|
|
<>
|
|
<Field label="Webhook URL">
|
|
<Input
|
|
value={form.webhookUrl}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, webhookUrl: event.target.value }))}
|
|
placeholder="https://example.com/telegram"
|
|
/>
|
|
</Field>
|
|
<Field label="Webhook Secret">
|
|
<Input
|
|
type="password"
|
|
value={form.webhookSecret}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, webhookSecret: event.target.value }))}
|
|
placeholder={pickAppText(locale, '可选', 'Optional')}
|
|
/>
|
|
</Field>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (form.kind === 'feishu') {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="App ID">
|
|
<Input
|
|
value={form.appId}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, appId: event.target.value }))}
|
|
placeholder={maskedSecrets.appId || 'cli_a...'}
|
|
/>
|
|
</Field>
|
|
<Field label="App Secret">
|
|
<Input
|
|
type="password"
|
|
value={form.appSecret}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, appSecret: event.target.value }))}
|
|
placeholder={maskedSecrets.appSecret || pickAppText(locale, '留空保持不变', 'Leave blank to keep existing')}
|
|
/>
|
|
</Field>
|
|
<Field label="Domain">
|
|
<Select
|
|
value={form.domain}
|
|
onValueChange={(value) => setForm((prev) => ({ ...prev, domain: value }))}
|
|
>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="feishu">feishu</SelectItem>
|
|
<SelectItem value="lark">lark</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field label="Bot Open ID">
|
|
<Input
|
|
value={form.botOpenId}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, botOpenId: event.target.value }))}
|
|
placeholder={pickAppText(locale, '可选，用于群 mention 判断', 'Optional, for group mention checks')}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (form.kind === 'qqbot') {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="App ID">
|
|
<Input
|
|
value={form.appId}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, appId: event.target.value }))}
|
|
placeholder={maskedSecrets.appId || '1020...'}
|
|
/>
|
|
</Field>
|
|
<Field label="Client Secret">
|
|
<Input
|
|
type="password"
|
|
value={form.clientSecret}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, clientSecret: event.target.value }))}
|
|
placeholder={maskedSecrets.clientSecret || pickAppText(locale, '留空保持不变', 'Leave blank to keep existing')}
|
|
/>
|
|
</Field>
|
|
<div className="flex items-center justify-between rounded-lg border px-3 py-2 md:col-span-2">
|
|
<div>
|
|
<Label className="text-sm">Markdown</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, '按 QQ Bot markdown 消息发送文本。', 'Send text as QQ Bot markdown messages.')}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={form.markdownSupport}
|
|
onCheckedChange={(checked) => setForm((prev) => ({ ...prev, markdownSupport: checked }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (form.kind === 'weixin') {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Token">
|
|
<Input
|
|
type="password"
|
|
value={form.token}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, token: event.target.value }))}
|
|
placeholder={maskedSecrets.token || pickAppText(locale, '留空保持不变', 'Leave blank to keep existing')}
|
|
/>
|
|
</Field>
|
|
<Field label="Base URL">
|
|
<Input
|
|
value={form.baseUrl}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, baseUrl: event.target.value }))}
|
|
placeholder={pickAppText(locale, '默认 iLink API', 'Default iLink API')}
|
|
/>
|
|
</Field>
|
|
<Field label="CDN Base URL">
|
|
<Input
|
|
value={form.cdnBaseUrl}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, cdnBaseUrl: event.target.value }))}
|
|
placeholder={pickAppText(locale, '默认 CDN', 'Default CDN')}
|
|
/>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '文本批处理延迟（秒）', 'Text batch delay seconds')}>
|
|
<Input
|
|
inputMode="decimal"
|
|
value={form.textBatchDelaySeconds}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, textBatchDelaySeconds: event.target.value }))}
|
|
placeholder="0.5"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function ChannelPolicyFields({
|
|
form,
|
|
locale,
|
|
setForm,
|
|
}: {
|
|
form: ChannelFormState;
|
|
locale: AppLocale;
|
|
setForm: React.Dispatch<React.SetStateAction<ChannelFormState>>;
|
|
}) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{form.kind === 'telegram' || form.kind === 'feishu' ? (
|
|
<div className="flex items-center justify-between rounded-lg border px-3 py-2 md:col-span-2">
|
|
<div>
|
|
<Label className="text-sm">{pickAppText(locale, '群聊需要 mention', 'Require mention in groups')}</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, '开启后群聊只有提到 bot 才会触发。', 'When enabled, group messages trigger only when they mention the bot.')}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={form.requireMentionInGroups}
|
|
onCheckedChange={(checked) => setForm((prev) => ({ ...prev, requireMentionInGroups: checked }))}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Field label={pickAppText(locale, '私聊策略', 'DM policy')}>
|
|
<PolicySelect value={form.dmPolicy} onChange={(value) => setForm((prev) => ({ ...prev, dmPolicy: value }))} />
|
|
</Field>
|
|
<Field label={pickAppText(locale, '群聊策略', 'Group policy')}>
|
|
<PolicySelect value={form.groupPolicy} onChange={(value) => setForm((prev) => ({ ...prev, groupPolicy: value }))} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
|
|
<Field label={pickAppText(locale, '允许用户', 'Allowed users')}>
|
|
<Textarea
|
|
value={form.allowFrom}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, allowFrom: event.target.value }))}
|
|
placeholder={pickAppText(locale, '每行或逗号分隔；留空表示不限制', 'One per line or comma separated; blank means unrestricted')}
|
|
/>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '允许群/群用户', 'Allowed groups/group users')}>
|
|
<Textarea
|
|
value={form.groupAllowFrom}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, groupAllowFrom: event.target.value }))}
|
|
placeholder={pickAppText(locale, '每行或逗号分隔；留空表示不限制', 'One per line or comma separated; blank means unrestricted')}
|
|
/>
|
|
</Field>
|
|
<Field label={pickAppText(locale, '最大消息长度', 'Max message chars')}>
|
|
<Input
|
|
inputMode="numeric"
|
|
value={form.maxMessageChars}
|
|
onChange={(event) => setForm((prev) => ({ ...prev, maxMessageChars: event.target.value }))}
|
|
placeholder={form.kind === 'telegram' || form.kind === 'feishu' ? '4096' : '2000'}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PolicySelect({ value, onChange }: { value: string; onChange: (value: string) => void }) {
|
|
return (
|
|
<Select value={value || 'open'} onValueChange={onChange}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="open">open</SelectItem>
|
|
<SelectItem value="allowlist">allowlist</SelectItem>
|
|
<SelectItem value="disabled">disabled</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
function channelDefaults(kind: string): ChannelFormState {
|
|
const base = { ...EMPTY_CHANNEL_FORM, kind };
|
|
if (kind === 'feishu') return { ...base, mode: 'websocket', connectionMode: 'websocket', accountId: 'tenant-main', displayName: 'Feishu Main' };
|
|
if (kind === 'qqbot') return { ...base, mode: 'websocket', accountId: 'qqbot-main', displayName: 'QQ Bot Main', groupPolicy: 'allowlist' };
|
|
if (kind === 'weixin') return { ...base, mode: 'polling', accountId: 'wx-main', displayName: 'Weixin Main', groupPolicy: 'disabled', textBatchDelaySeconds: '0.5' };
|
|
return { ...base, mode: 'polling', accountId: 'bot-main', displayName: 'Telegram Main', maxMessageChars: '4096' };
|
|
}
|
|
|
|
function modeOptionsForKind(kind: string): string[] {
|
|
if (kind === 'telegram') return ['polling', 'webhook'];
|
|
if (kind === 'feishu') return ['websocket', 'webhook'];
|
|
if (kind === 'qqbot') return ['websocket'];
|
|
if (kind === 'weixin') return ['polling'];
|
|
return ['webhook'];
|
|
}
|
|
|
|
function channelFormFromStatus(channel: ChannelStatus): ChannelFormState {
|
|
return {
|
|
...channelDefaults(channel.kind),
|
|
enabled: channel.enabled,
|
|
kind: channel.kind,
|
|
mode: channel.mode,
|
|
connectionMode: channel.mode,
|
|
accountId: channel.account_id || '',
|
|
displayName: channel.display_name || channel.channel_id,
|
|
};
|
|
}
|
|
|
|
function channelFormFromConfig(detail: ChannelConfigDetail): ChannelFormState {
|
|
const config = detail.config || {};
|
|
return {
|
|
...channelFormFromStatus({
|
|
channel_id: detail.channel_id,
|
|
kind: detail.kind,
|
|
mode: detail.mode,
|
|
display_name: detail.display_name,
|
|
enabled: detail.enabled,
|
|
account_id: detail.account_id,
|
|
state: 'configured',
|
|
capabilities: [],
|
|
}),
|
|
domain: stringConfig(config, 'domain') || 'feishu',
|
|
connectionMode: stringConfig(config, 'connectionMode') || detail.mode,
|
|
botUsername: stringConfig(config, 'botUsername'),
|
|
botOpenId: stringConfig(config, 'botOpenId'),
|
|
webhookUrl: stringConfig(config, 'webhookUrl'),
|
|
webhookSecret: stringConfig(config, 'webhookSecret'),
|
|
requireMentionInGroups: boolConfig(config, 'requireMentionInGroups', true),
|
|
allowFrom: listConfigText(config, 'allowFrom'),
|
|
groupAllowFrom: listConfigText(config, 'groupAllowFrom'),
|
|
dmPolicy: stringConfig(config, 'dmPolicy') || 'open',
|
|
groupPolicy: stringConfig(config, 'groupPolicy') || (detail.kind === 'weixin' ? 'disabled' : 'allowlist'),
|
|
markdownSupport: boolConfig(config, 'markdownSupport', false),
|
|
baseUrl: stringConfig(config, 'baseUrl'),
|
|
cdnBaseUrl: stringConfig(config, 'cdnBaseUrl'),
|
|
maxMessageChars: stringConfig(config, 'maxMessageChars'),
|
|
textBatchDelaySeconds: stringConfig(config, 'textBatchDelaySeconds'),
|
|
};
|
|
}
|
|
|
|
function channelPayloadFromForm(form: ChannelFormState) {
|
|
const config: Record<string, unknown> = {};
|
|
const secrets: Record<string, string> = {};
|
|
const mode = form.kind === 'feishu' ? form.connectionMode || form.mode : form.mode;
|
|
|
|
if (form.maxMessageChars.trim()) config.maxMessageChars = Number(form.maxMessageChars.trim());
|
|
const allowFrom = parseList(form.allowFrom);
|
|
const groupAllowFrom = parseList(form.groupAllowFrom);
|
|
if (allowFrom.length) config.allowFrom = allowFrom;
|
|
if (groupAllowFrom.length) config.groupAllowFrom = groupAllowFrom;
|
|
|
|
if (form.kind === 'telegram') {
|
|
if (form.botToken.trim()) secrets.botToken = form.botToken.trim();
|
|
config.requireMentionInGroups = form.requireMentionInGroups;
|
|
if (form.botUsername.trim()) config.botUsername = form.botUsername.trim().replace(/^@+/, '');
|
|
if (form.webhookUrl.trim()) config.webhookUrl = form.webhookUrl.trim();
|
|
if (form.webhookSecret.trim()) config.webhookSecret = form.webhookSecret.trim();
|
|
} else if (form.kind === 'feishu') {
|
|
if (form.appId.trim()) secrets.appId = form.appId.trim();
|
|
if (form.appSecret.trim()) secrets.appSecret = form.appSecret.trim();
|
|
config.domain = form.domain || 'feishu';
|
|
config.connectionMode = mode;
|
|
config.requireMentionInGroups = form.requireMentionInGroups;
|
|
if (form.botOpenId.trim()) config.botOpenId = form.botOpenId.trim();
|
|
} else if (form.kind === 'qqbot') {
|
|
if (form.appId.trim()) secrets.appId = form.appId.trim();
|
|
if (form.clientSecret.trim()) secrets.clientSecret = form.clientSecret.trim();
|
|
config.dmPolicy = form.dmPolicy || 'open';
|
|
config.groupPolicy = form.groupPolicy || 'allowlist';
|
|
config.markdownSupport = form.markdownSupport;
|
|
} else if (form.kind === 'weixin') {
|
|
if (form.token.trim()) secrets.token = form.token.trim();
|
|
config.dmPolicy = form.dmPolicy || 'open';
|
|
config.groupPolicy = form.groupPolicy || 'disabled';
|
|
if (form.baseUrl.trim()) config.baseUrl = form.baseUrl.trim();
|
|
if (form.cdnBaseUrl.trim()) config.cdnBaseUrl = form.cdnBaseUrl.trim();
|
|
if (form.textBatchDelaySeconds.trim()) config.textBatchDelaySeconds = Number(form.textBatchDelaySeconds.trim());
|
|
}
|
|
|
|
return {
|
|
enabled: form.enabled,
|
|
kind: form.kind,
|
|
mode,
|
|
account_id: form.accountId.trim(),
|
|
display_name: form.displayName.trim(),
|
|
config,
|
|
secrets,
|
|
};
|
|
}
|
|
|
|
function stringConfig(config: Record<string, unknown>, key: string): string {
|
|
const value = config[key];
|
|
if (value == null) return '';
|
|
if (Array.isArray(value)) return value.join('\n');
|
|
return String(value);
|
|
}
|
|
|
|
function boolConfig(config: Record<string, unknown>, key: string, fallback: boolean): boolean {
|
|
const value = config[key];
|
|
if (typeof value === 'boolean') return value;
|
|
if (typeof value === 'string') {
|
|
const normalized = value.trim().toLowerCase();
|
|
if (['true', '1', 'yes', 'on'].includes(normalized)) return true;
|
|
if (['false', '0', 'no', 'off'].includes(normalized)) return false;
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function listConfigText(config: Record<string, unknown>, key: string): string {
|
|
const value = config[key];
|
|
if (Array.isArray(value)) return value.map((item) => String(item)).join('\n');
|
|
if (typeof value === 'string') return value;
|
|
return '';
|
|
}
|
|
|
|
function parseList(value: string): string[] {
|
|
return value
|
|
.split(/[\n,]/)
|
|
.map((item) => item.trim())
|
|
.filter(Boolean);
|
|
}
|