7900 lines
334 KiB
TypeScript
7900 lines
334 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState, type AnchorHTMLAttributes, type ChangeEvent, type ImgHTMLAttributes, type KeyboardEvent, type ReactNode } from 'react';
|
||
import axios from 'axios';
|
||
import { Activity, ArrowUp, Boxes, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock3, Command, Copy, Download, EllipsisVertical, ExternalLink, Eye, FileText, FolderOpen, Gauge, Hammer, Lock, Maximize2, MessageCircle, MessageSquareText, Mic, Minimize2, Paperclip, Pencil, Plus, Power, PowerOff, RefreshCw, Reply, RotateCcw, Save, Search, Settings2, SlidersHorizontal, Square, ThumbsDown, ThumbsUp, TriangleAlert, Trash2, UserRound, Waypoints, X } from 'lucide-react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import rehypeRaw from 'rehype-raw';
|
||
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
|
||
import { APP_ENDPOINTS } from '../../config/env';
|
||
import { useAppStore } from '../../store/appStore';
|
||
import type { ChatMessage } from '../../types/bot';
|
||
import { normalizeAssistantMessageText, normalizeUserMessageText, summarizeProgressText } from './messageParser';
|
||
import nanobotLogo from '../../assets/nanobot-logo.png';
|
||
import './BotDashboardModule.css';
|
||
import { channelsZhCn } from '../../i18n/channels.zh-cn';
|
||
import { channelsEn } from '../../i18n/channels.en';
|
||
import { pickLocale } from '../../i18n';
|
||
import { dashboardZhCn } from '../../i18n/dashboard.zh-cn';
|
||
import { dashboardEn } from '../../i18n/dashboard.en';
|
||
import { useLucentPrompt } from '../../components/lucent/LucentPromptProvider';
|
||
import { LucentIconButton } from '../../components/lucent/LucentIconButton';
|
||
import { LucentSelect } from '../../components/lucent/LucentSelect';
|
||
import { PasswordInput } from '../../components/PasswordInput';
|
||
import { TopicFeedPanel, type TopicFeedItem, type TopicFeedOption } from './topic/TopicFeedPanel';
|
||
import type { BotSkillMarketItem } from '../platform/types';
|
||
import { SkillMarketInstallModal } from './components/SkillMarketInstallModal';
|
||
import {
|
||
normalizePlatformPageSize,
|
||
readCachedPlatformPageSize,
|
||
writeCachedPlatformPageSize,
|
||
} from '../../utils/platformPageSize';
|
||
|
||
interface BotDashboardModuleProps {
|
||
onOpenCreateWizard?: () => void;
|
||
onOpenImageFactory?: () => void;
|
||
forcedBotId?: string;
|
||
compactMode?: boolean;
|
||
}
|
||
|
||
type AgentTab = 'AGENTS' | 'SOUL' | 'USER' | 'TOOLS' | 'IDENTITY';
|
||
type WorkspaceNodeType = 'dir' | 'file';
|
||
type ChannelType = 'dashboard' | 'feishu' | 'qq' | 'dingtalk' | 'telegram' | 'slack' | 'email';
|
||
type RuntimeViewMode = 'visual' | 'topic';
|
||
type CompactPanelTab = 'chat' | 'runtime';
|
||
type QuotedReply = { id?: number; text: string; ts: number };
|
||
|
||
interface WorkspaceNode {
|
||
name: string;
|
||
path: string;
|
||
type: WorkspaceNodeType;
|
||
size?: number;
|
||
ext?: string;
|
||
ctime?: string;
|
||
mtime?: string;
|
||
children?: WorkspaceNode[];
|
||
}
|
||
|
||
interface WorkspaceHoverCardState {
|
||
node: WorkspaceNode;
|
||
top: number;
|
||
left: number;
|
||
above: boolean;
|
||
}
|
||
|
||
interface WorkspaceTreeResponse {
|
||
bot_id: string;
|
||
root: string;
|
||
cwd: string;
|
||
parent: string | null;
|
||
entries: WorkspaceNode[];
|
||
}
|
||
|
||
interface WorkspaceFileResponse {
|
||
bot_id: string;
|
||
path: string;
|
||
size: number;
|
||
is_markdown: boolean;
|
||
truncated: boolean;
|
||
content: string;
|
||
}
|
||
|
||
interface WorkspacePreviewState {
|
||
path: string;
|
||
content: string;
|
||
truncated: boolean;
|
||
ext: string;
|
||
isMarkdown: boolean;
|
||
isImage: boolean;
|
||
isHtml: boolean;
|
||
isVideo: boolean;
|
||
isAudio: boolean;
|
||
}
|
||
|
||
interface WorkspaceUploadResponse {
|
||
bot_id: string;
|
||
files: Array<{ name: string; path: string; size: number }>;
|
||
}
|
||
|
||
interface BotMessagesByDateResponse {
|
||
items?: any[];
|
||
anchor_id?: number | null;
|
||
resolved_ts?: number | null;
|
||
matched_exact_date?: boolean;
|
||
has_more_before?: boolean;
|
||
has_more_after?: boolean;
|
||
}
|
||
|
||
interface CronJob {
|
||
id: string;
|
||
name: string;
|
||
enabled?: boolean;
|
||
schedule?: {
|
||
kind?: 'at' | 'every' | 'cron' | string;
|
||
atMs?: number;
|
||
everyMs?: number;
|
||
expr?: string;
|
||
tz?: string;
|
||
};
|
||
payload?: {
|
||
message?: string;
|
||
channel?: string;
|
||
to?: string;
|
||
};
|
||
state?: {
|
||
nextRunAtMs?: number;
|
||
lastRunAtMs?: number;
|
||
lastStatus?: string;
|
||
lastError?: string;
|
||
};
|
||
}
|
||
|
||
interface CronJobsResponse {
|
||
bot_id: string;
|
||
version: number;
|
||
jobs: CronJob[];
|
||
}
|
||
|
||
interface MCPServerConfig {
|
||
type?: 'streamableHttp' | 'sse' | string;
|
||
url?: string;
|
||
headers?: Record<string, string>;
|
||
toolTimeout?: number;
|
||
locked?: boolean;
|
||
}
|
||
|
||
interface MCPConfigResponse {
|
||
bot_id: string;
|
||
mcp_servers?: Record<string, MCPServerConfig>;
|
||
locked_servers?: string[];
|
||
restart_required?: boolean;
|
||
status?: string;
|
||
}
|
||
|
||
interface MCPServerDraft {
|
||
name: string;
|
||
type: 'streamableHttp' | 'sse';
|
||
url: string;
|
||
botId: string;
|
||
botSecret: string;
|
||
toolTimeout: string;
|
||
headers: Record<string, string>;
|
||
locked: boolean;
|
||
originName?: string;
|
||
}
|
||
|
||
interface BotChannel {
|
||
id: string | number;
|
||
bot_id: string;
|
||
channel_type: ChannelType | string;
|
||
external_app_id: string;
|
||
app_secret: string;
|
||
internal_port: number;
|
||
is_active: boolean;
|
||
extra_config: Record<string, unknown>;
|
||
locked?: boolean;
|
||
}
|
||
|
||
interface BotTopic {
|
||
id: string | number;
|
||
bot_id: string;
|
||
topic_key: string;
|
||
name: string;
|
||
description: string;
|
||
is_active: boolean;
|
||
routing?: Record<string, unknown>;
|
||
view_schema?: Record<string, unknown>;
|
||
routing_purpose?: string;
|
||
routing_include_when?: string;
|
||
routing_exclude_when?: string;
|
||
routing_examples_positive?: string;
|
||
routing_examples_negative?: string;
|
||
routing_priority?: string;
|
||
created_at?: string;
|
||
updated_at?: string;
|
||
}
|
||
|
||
interface TopicFeedListResponse {
|
||
bot_id: string;
|
||
topic_key?: string | null;
|
||
items: TopicFeedItem[];
|
||
next_cursor?: number | null;
|
||
unread_count?: number;
|
||
total_unread_count?: number;
|
||
}
|
||
|
||
interface TopicFeedStatsResponse {
|
||
bot_id: string;
|
||
total_count: number;
|
||
unread_count: number;
|
||
latest_item_id?: number | null;
|
||
}
|
||
|
||
interface NanobotImage {
|
||
tag: string;
|
||
status: string;
|
||
}
|
||
|
||
interface BaseImageOption {
|
||
tag: string;
|
||
label: string;
|
||
disabled: boolean;
|
||
}
|
||
|
||
interface WorkspaceSkillOption {
|
||
id: string;
|
||
name: string;
|
||
type: 'dir' | 'file' | string;
|
||
path: string;
|
||
size?: number | null;
|
||
mtime?: string;
|
||
description?: string;
|
||
}
|
||
|
||
interface BotResourceSnapshot {
|
||
bot_id: string;
|
||
docker_status: string;
|
||
configured: {
|
||
cpu_cores: number;
|
||
memory_mb: number;
|
||
storage_gb: number;
|
||
};
|
||
runtime: {
|
||
docker_status: string;
|
||
limits: {
|
||
cpu_cores?: number | null;
|
||
memory_bytes?: number | null;
|
||
storage_bytes?: number | null;
|
||
nano_cpus?: number;
|
||
storage_opt_raw?: string;
|
||
};
|
||
usage: {
|
||
cpu_percent: number;
|
||
memory_bytes: number;
|
||
memory_limit_bytes: number;
|
||
memory_percent: number;
|
||
network_rx_bytes: number;
|
||
network_tx_bytes: number;
|
||
blk_read_bytes: number;
|
||
blk_write_bytes: number;
|
||
pids: number;
|
||
container_rw_bytes: number;
|
||
};
|
||
};
|
||
workspace: {
|
||
path: string;
|
||
usage_bytes: number;
|
||
configured_limit_bytes?: number | null;
|
||
usage_percent: number;
|
||
};
|
||
enforcement: {
|
||
cpu_limited: boolean;
|
||
memory_limited: boolean;
|
||
storage_limited: boolean;
|
||
};
|
||
note: string;
|
||
collected_at: string;
|
||
}
|
||
|
||
interface SkillUploadResponse {
|
||
status: string;
|
||
bot_id: string;
|
||
installed: string[];
|
||
skills: WorkspaceSkillOption[];
|
||
}
|
||
|
||
interface MarketSkillInstallResponse {
|
||
status: string;
|
||
bot_id: string;
|
||
skill_market_item_id: number;
|
||
installed: string[];
|
||
skills: WorkspaceSkillOption[];
|
||
}
|
||
|
||
interface SystemDefaultsResponse {
|
||
limits?: {
|
||
upload_max_mb?: number;
|
||
};
|
||
workspace?: {
|
||
allowed_attachment_extensions?: unknown;
|
||
download_extensions?: unknown;
|
||
};
|
||
chat?: {
|
||
page_size?: number;
|
||
pull_page_size?: number;
|
||
};
|
||
topic_presets?: unknown;
|
||
speech?: {
|
||
enabled?: boolean;
|
||
model?: string;
|
||
device?: string;
|
||
max_audio_seconds?: number;
|
||
};
|
||
}
|
||
|
||
interface TopicPresetTemplate {
|
||
id: string;
|
||
topic_key: string;
|
||
name?: unknown;
|
||
description?: unknown;
|
||
routing_purpose?: unknown;
|
||
routing_include_when?: unknown;
|
||
routing_exclude_when?: unknown;
|
||
routing_examples_positive?: unknown;
|
||
routing_examples_negative?: unknown;
|
||
routing_priority?: number;
|
||
}
|
||
|
||
type BotEnvParams = Record<string, string>;
|
||
|
||
const DEFAULT_TOPIC_PRESET_TEMPLATES: TopicPresetTemplate[] = [
|
||
{
|
||
id: 'politics',
|
||
topic_key: 'politics_news',
|
||
name: { 'zh-cn': '时政新闻', en: 'Politics News' },
|
||
description: {
|
||
'zh-cn': '沉淀国内外时政动态、政策发布与重大公共治理事件，便于集中查看。',
|
||
en: 'Track politics, policy releases, and major public governance events.',
|
||
},
|
||
routing_purpose: {
|
||
'zh-cn': '收录与政府决策、政策法规、外交事务及公共治理相关的关键信息。',
|
||
en: 'Capture key information related to government decisions, policy, diplomacy, and governance.',
|
||
},
|
||
routing_include_when: ['时政', '政策', '法规', '国务院', '政府', '部委', '人大', '政协', '外交', '国际关系', '白宫', '总统', '议会', 'election', 'policy'],
|
||
routing_exclude_when: ['娱乐', '明星', '综艺', '体育', '游戏', '购物', '种草', '广告'],
|
||
routing_examples_positive: ['国务院发布新一轮宏观政策措施。', '外交部就国际热点事件发布声明。', '某国总统宣布新的对外政策方向。'],
|
||
routing_examples_negative: ['某明星新剧开播引发热议。', '某球队转会新闻与赛果分析。', '数码产品促销与购物推荐汇总。'],
|
||
routing_priority: 85,
|
||
},
|
||
{
|
||
id: 'finance',
|
||
topic_key: 'finance_market',
|
||
name: { 'zh-cn': '财经信息', en: 'Finance & Market' },
|
||
description: {
|
||
'zh-cn': '聚合宏观经济、市场波动、公司财报与监管政策等财经信息。',
|
||
en: 'Aggregate macroeconomics, market moves, company earnings, and regulatory updates.',
|
||
},
|
||
routing_purpose: {
|
||
'zh-cn': '沉淀与资本市场、行业景气、资产价格相关的关键结论与风险提示。',
|
||
en: 'Capture key insights and risk alerts related to capital markets and asset prices.',
|
||
},
|
||
routing_include_when: ['财经', '金融', '股市', 'A股', '港股', '美股', '债券', '汇率', '利率', '通胀', 'GDP', '财报', '央行', 'market', 'earnings'],
|
||
routing_exclude_when: ['娱乐', '体育', '游戏', '影视', '八卦', '生活方式', '旅行攻略'],
|
||
routing_examples_positive: ['央行公布最新利率决议并释放政策信号。', '上市公司发布季度财报并上调全年指引。', '美元指数走强导致主要货币普遍承压。'],
|
||
routing_examples_negative: ['某综艺节目收视排名变化。', '某球员转会传闻引发讨论。', '新游上线玩法测评。'],
|
||
routing_priority: 80,
|
||
},
|
||
{
|
||
id: 'tech',
|
||
topic_key: 'tech_updates',
|
||
name: { 'zh-cn': '技术资讯', en: 'Tech Updates' },
|
||
description: {
|
||
'zh-cn': '追踪 AI、云计算、开源社区与开发工具链的最新技术资讯。',
|
||
en: 'Track updates across AI, cloud, open-source ecosystems, and developer tooling.',
|
||
},
|
||
routing_purpose: {
|
||
'zh-cn': '沉淀技术发布、版本升级、兼容性变更与工程实践建议。',
|
||
en: 'Capture releases, version upgrades, compatibility changes, and engineering guidance.',
|
||
},
|
||
routing_include_when: ['技术', '开源', 'AI', '模型', '大语言模型', 'MCP', 'API', 'SDK', '发布', '版本', '升级', 'breaking change', 'security advisory'],
|
||
routing_exclude_when: ['娱乐', '体育', '美食', '旅游', '情感', '八卦'],
|
||
routing_examples_positive: ['某主流框架发布新版本并调整默认配置。', '开源项目披露高危安全漏洞并给出修复方案。', 'AI 模型服务更新 API，返回结构发生变化。'],
|
||
routing_examples_negative: ['某艺人参加活动造型盘点。', '旅游目的地打卡攻略合集。', '比赛结果预测与竞猜。'],
|
||
routing_priority: 75,
|
||
},
|
||
];
|
||
|
||
const providerPresets: Record<string, { model: string; apiBase?: string; note: { 'zh-cn': string; en: string } }> = {
|
||
openrouter: {
|
||
model: 'openai/gpt-4o-mini',
|
||
apiBase: 'https://openrouter.ai/api/v1',
|
||
note: {
|
||
'zh-cn': 'OpenRouter 网关，模型示例 openai/gpt-4o-mini',
|
||
en: 'OpenRouter gateway, model example: openai/gpt-4o-mini',
|
||
},
|
||
},
|
||
dashscope: {
|
||
model: 'qwen-plus',
|
||
apiBase: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
|
||
note: {
|
||
'zh-cn': '阿里云 DashScope（千问），模型示例 qwen-plus',
|
||
en: 'Alibaba DashScope (Qwen), model example: qwen-plus',
|
||
},
|
||
},
|
||
openai: {
|
||
model: 'gpt-4o-mini',
|
||
note: {
|
||
'zh-cn': 'OpenAI 原生接口',
|
||
en: 'OpenAI native endpoint',
|
||
},
|
||
},
|
||
deepseek: {
|
||
model: 'deepseek-chat',
|
||
note: {
|
||
'zh-cn': 'DeepSeek 原生接口',
|
||
en: 'DeepSeek native endpoint',
|
||
},
|
||
},
|
||
kimi: {
|
||
model: 'moonshot-v1-8k',
|
||
apiBase: 'https://api.moonshot.cn/v1',
|
||
note: {
|
||
'zh-cn': 'Kimi（Moonshot）接口，模型示例 moonshot-v1-8k',
|
||
en: 'Kimi (Moonshot) endpoint, model example: moonshot-v1-8k',
|
||
},
|
||
},
|
||
minimax: {
|
||
model: 'MiniMax-Text-01',
|
||
apiBase: 'https://api.minimax.chat/v1',
|
||
note: {
|
||
'zh-cn': 'MiniMax 接口，模型示例 MiniMax-Text-01',
|
||
en: 'MiniMax endpoint, model example: MiniMax-Text-01',
|
||
},
|
||
},
|
||
xunfei: {
|
||
model: 'astron-code-latest',
|
||
apiBase: 'https://spark-api-open.xf-yun.com/v1',
|
||
note: {
|
||
'zh-cn': '讯飞星火（OpenAI 兼容）接口，模型示例 astron-code-latest',
|
||
en: 'Xunfei Spark (OpenAI-compatible), model example: astron-code-latest',
|
||
},
|
||
},
|
||
};
|
||
const optionalChannelTypes: ChannelType[] = ['feishu', 'qq', 'dingtalk', 'telegram', 'slack', 'email'];
|
||
const RUNTIME_STALE_MS = 45000;
|
||
const SYSTEM_FALLBACK_TOPIC_KEYS = new Set(['inbox']);
|
||
|
||
function formatClock(ts: number) {
|
||
const d = new Date(ts);
|
||
const hh = String(d.getHours()).padStart(2, '0');
|
||
const mm = String(d.getMinutes()).padStart(2, '0');
|
||
const ss = String(d.getSeconds()).padStart(2, '0');
|
||
return `${hh}:${mm}:${ss}`;
|
||
}
|
||
|
||
function formatConversationDate(ts: number, isZh: boolean) {
|
||
const d = new Date(ts);
|
||
try {
|
||
return d.toLocaleDateString(isZh ? 'zh-CN' : 'en-US', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
weekday: 'short',
|
||
});
|
||
} catch {
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
}
|
||
}
|
||
|
||
function formatDateInputValue(ts: number): string {
|
||
const d = new Date(ts);
|
||
if (Number.isNaN(d.getTime())) return '';
|
||
const year = d.getFullYear();
|
||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
|
||
function mapBotMessageResponseRow(row: any): ChatMessage {
|
||
const roleRaw = String(row?.role || '').toLowerCase();
|
||
const role: ChatMessage['role'] =
|
||
roleRaw === 'user' || roleRaw === 'assistant' || roleRaw === 'system' ? roleRaw : 'assistant';
|
||
const feedbackRaw = String(row?.feedback || '').trim().toLowerCase();
|
||
const feedback: ChatMessage['feedback'] = feedbackRaw === 'up' || feedbackRaw === 'down' ? feedbackRaw : null;
|
||
return {
|
||
id: Number.isFinite(Number(row?.id)) ? Number(row.id) : undefined,
|
||
role,
|
||
text: String(row?.text || ''),
|
||
attachments: normalizeAttachmentPaths(row?.media),
|
||
ts: Number(row?.ts || Date.now()),
|
||
feedback,
|
||
kind: 'final',
|
||
} as ChatMessage;
|
||
}
|
||
|
||
function stateLabel(s?: string) {
|
||
return (s || 'IDLE').toUpperCase();
|
||
}
|
||
|
||
function resolvePresetText(raw: unknown, locale: 'zh-cn' | 'en'): string {
|
||
if (typeof raw === 'string') return raw.trim();
|
||
if (!raw || typeof raw !== 'object') return '';
|
||
const bag = raw as Record<string, unknown>;
|
||
const byLocale = String(bag[locale] || '').trim();
|
||
if (byLocale) return byLocale;
|
||
return String(bag['zh-cn'] || bag.en || '').trim();
|
||
}
|
||
|
||
function normalizePresetTextList(raw: unknown): string[] {
|
||
if (!Array.isArray(raw)) return [];
|
||
const rows: string[] = [];
|
||
raw.forEach((item) => {
|
||
const text = String(item || '').trim();
|
||
if (text) rows.push(text);
|
||
});
|
||
return rows;
|
||
}
|
||
|
||
function parseTopicPresets(raw: unknown): TopicPresetTemplate[] {
|
||
if (!Array.isArray(raw)) return [];
|
||
const rows: TopicPresetTemplate[] = [];
|
||
raw.forEach((item) => {
|
||
if (!item || typeof item !== 'object') return;
|
||
const record = item as Record<string, unknown>;
|
||
const id = String(record.id || '').trim().toLowerCase();
|
||
const topicKey = String(record.topic_key || '').trim().toLowerCase();
|
||
if (!id || !topicKey) return;
|
||
const priority = Number(record.routing_priority);
|
||
rows.push({
|
||
id,
|
||
topic_key: topicKey,
|
||
name: record.name,
|
||
description: record.description,
|
||
routing_purpose: record.routing_purpose,
|
||
routing_include_when: record.routing_include_when,
|
||
routing_exclude_when: record.routing_exclude_when,
|
||
routing_examples_positive: record.routing_examples_positive,
|
||
routing_examples_negative: record.routing_examples_negative,
|
||
routing_priority: Number.isFinite(priority) ? Math.max(0, Math.min(100, Math.round(priority))) : undefined,
|
||
});
|
||
});
|
||
return rows;
|
||
}
|
||
|
||
function isSystemFallbackTopic(topic: Pick<BotTopic, 'topic_key' | 'name' | 'description' | 'routing'>): boolean {
|
||
const key = String(topic.topic_key || '').trim().toLowerCase();
|
||
if (!SYSTEM_FALLBACK_TOPIC_KEYS.has(key)) return false;
|
||
const routing = topic.routing && typeof topic.routing === 'object' ? topic.routing : {};
|
||
const purpose = String((routing as Record<string, unknown>).purpose || '').trim().toLowerCase();
|
||
const desc = String(topic.description || '').trim().toLowerCase();
|
||
const name = String(topic.name || '').trim().toLowerCase();
|
||
const priority = Number((routing as Record<string, unknown>).priority);
|
||
if (purpose.includes('fallback')) return true;
|
||
if (desc.includes('default topic')) return true;
|
||
if (name === 'inbox') return true;
|
||
if (Number.isFinite(priority) && priority <= 1) return true;
|
||
return false;
|
||
}
|
||
|
||
function normalizeRuntimeState(s?: string) {
|
||
const raw = stateLabel(s);
|
||
if (raw.includes('ERROR') || raw.includes('FAIL')) return 'ERROR';
|
||
if (raw.includes('TOOL') || raw.includes('EXEC') || raw.includes('ACTION')) return 'TOOL_CALL';
|
||
if (raw.includes('THINK') || raw.includes('PLAN') || raw.includes('REASON') || raw === 'RUNNING') return 'THINKING';
|
||
if (raw.includes('SUCCESS') || raw.includes('DONE') || raw.includes('COMPLETE')) return 'SUCCESS';
|
||
if (raw.includes('IDLE') || raw.includes('STOP')) return 'IDLE';
|
||
return raw;
|
||
}
|
||
|
||
function parseBotTimestamp(raw?: string | number) {
|
||
if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
|
||
const text = String(raw || '').trim();
|
||
if (!text) return 0;
|
||
const ms = Date.parse(text);
|
||
return Number.isFinite(ms) ? ms : 0;
|
||
}
|
||
|
||
const TEXT_PREVIEW_EXTENSIONS = new Set(['.md', '.json', '.log', '.txt', '.csv']);
|
||
const HTML_PREVIEW_EXTENSIONS = new Set(['.html', '.htm']);
|
||
const IMAGE_PREVIEW_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.webp']);
|
||
const AUDIO_PREVIEW_EXTENSIONS = new Set(['.mp3', '.wav', '.m4a', '.flac', '.ogg', '.opus', '.aac', '.amr', '.wma']);
|
||
const VIDEO_PREVIEW_EXTENSIONS = new Set(['.mp4', '.mov', '.avi', '.mkv', '.webm', '.m4v', '.3gp', '.mpeg', '.mpg', '.ts']);
|
||
const DEFAULT_WORKSPACE_DOWNLOAD_EXTENSIONS = [
|
||
'.pdf', '.doc', '.docx', '.xls', '.xlsx', '.xlsm', '.ppt', '.pptx', '.odt', '.ods', '.odp', '.wps', '.glb',
|
||
];
|
||
const DEFAULT_WORKSPACE_DOWNLOAD_EXTENSION_SET = new Set(DEFAULT_WORKSPACE_DOWNLOAD_EXTENSIONS);
|
||
|
||
function normalizeWorkspaceExtension(raw: unknown): string {
|
||
const value = String(raw ?? '').trim().toLowerCase();
|
||
if (!value) return '';
|
||
const stripped = value.replace(/^\*\./, '');
|
||
const normalized = stripped.startsWith('.') ? stripped : `.${stripped}`;
|
||
return /^\.[a-z0-9][a-z0-9._+-]{0,31}$/.test(normalized) ? normalized : '';
|
||
}
|
||
|
||
function parseWorkspaceDownloadExtensions(
|
||
raw: unknown,
|
||
fallback: readonly string[] = DEFAULT_WORKSPACE_DOWNLOAD_EXTENSIONS,
|
||
): string[] {
|
||
if (raw === null || raw === undefined) return [...fallback];
|
||
if (Array.isArray(raw) && raw.length === 0) return [];
|
||
if (typeof raw === 'string' && raw.trim() === '') return [];
|
||
const source = Array.isArray(raw) ? raw : String(raw || '').split(/[,\s;]+/);
|
||
const rows: string[] = [];
|
||
source.forEach((item) => {
|
||
const ext = normalizeWorkspaceExtension(item);
|
||
if (ext && !rows.includes(ext)) rows.push(ext);
|
||
});
|
||
return rows;
|
||
}
|
||
|
||
function parseAllowedAttachmentExtensions(raw: unknown): string[] {
|
||
if (raw === null || raw === undefined) return [];
|
||
if (Array.isArray(raw) && raw.length === 0) return [];
|
||
if (typeof raw === 'string' && raw.trim() === '') return [];
|
||
const source = Array.isArray(raw) ? raw : String(raw || '').split(/[,\s;]+/);
|
||
const rows: string[] = [];
|
||
source.forEach((item) => {
|
||
const ext = normalizeWorkspaceExtension(item);
|
||
if (ext && !rows.includes(ext)) rows.push(ext);
|
||
});
|
||
return rows;
|
||
}
|
||
|
||
function pathHasExtension(path: string, extensions: ReadonlySet<string>): boolean {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
if (!normalized) return false;
|
||
for (const ext of extensions) {
|
||
if (normalized.endsWith(ext)) return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function isDownloadOnlyPath(path: string, downloadExtensions: ReadonlySet<string> = DEFAULT_WORKSPACE_DOWNLOAD_EXTENSION_SET) {
|
||
return pathHasExtension(path, downloadExtensions);
|
||
}
|
||
|
||
function isPreviewableWorkspaceFile(
|
||
node: WorkspaceNode,
|
||
downloadExtensions: ReadonlySet<string> = DEFAULT_WORKSPACE_DOWNLOAD_EXTENSION_SET,
|
||
) {
|
||
if (node.type !== 'file') return false;
|
||
return isPreviewableWorkspacePath(node.path, downloadExtensions);
|
||
}
|
||
|
||
function isImagePath(path: string) {
|
||
return pathHasExtension(path, IMAGE_PREVIEW_EXTENSIONS);
|
||
}
|
||
|
||
function isVideoPath(path: string) {
|
||
return pathHasExtension(path, VIDEO_PREVIEW_EXTENSIONS);
|
||
}
|
||
|
||
function isAudioPath(path: string) {
|
||
return pathHasExtension(path, AUDIO_PREVIEW_EXTENSIONS);
|
||
}
|
||
|
||
const MEDIA_UPLOAD_EXTENSIONS = new Set([
|
||
'.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.svg', '.avif', '.heic', '.heif', '.tif', '.tiff',
|
||
'.mp3', '.wav', '.m4a', '.flac', '.ogg', '.opus', '.aac', '.amr', '.wma',
|
||
'.mp4', '.mov', '.avi', '.mkv', '.webm', '.m4v', '.3gp', '.mpeg', '.mpg', '.ts',
|
||
]);
|
||
|
||
function isMediaUploadFile(file: File): boolean {
|
||
const mime = String(file.type || '').toLowerCase();
|
||
if (mime.startsWith('image/') || mime.startsWith('audio/') || mime.startsWith('video/')) {
|
||
return true;
|
||
}
|
||
const name = String(file.name || '').trim().toLowerCase();
|
||
const dot = name.lastIndexOf('.');
|
||
if (dot < 0) return false;
|
||
return MEDIA_UPLOAD_EXTENSIONS.has(name.slice(dot));
|
||
}
|
||
|
||
function isHtmlPath(path: string) {
|
||
return pathHasExtension(path, HTML_PREVIEW_EXTENSIONS);
|
||
}
|
||
|
||
function isPreviewableWorkspacePath(
|
||
path: string,
|
||
downloadExtensions: ReadonlySet<string> = DEFAULT_WORKSPACE_DOWNLOAD_EXTENSION_SET,
|
||
) {
|
||
if (isDownloadOnlyPath(path, downloadExtensions)) return true;
|
||
return (
|
||
pathHasExtension(path, TEXT_PREVIEW_EXTENSIONS) ||
|
||
isHtmlPath(path) ||
|
||
isImagePath(path) ||
|
||
isAudioPath(path) ||
|
||
isVideoPath(path)
|
||
);
|
||
}
|
||
|
||
function workspaceFileAction(
|
||
path: string,
|
||
downloadExtensions: ReadonlySet<string> = DEFAULT_WORKSPACE_DOWNLOAD_EXTENSION_SET,
|
||
): 'preview' | 'download' | 'unsupported' {
|
||
const normalized = String(path || '').trim();
|
||
if (!normalized) return 'unsupported';
|
||
if (isDownloadOnlyPath(normalized, downloadExtensions)) return 'download';
|
||
if (isImagePath(normalized) || isHtmlPath(normalized) || isVideoPath(normalized) || isAudioPath(normalized)) return 'preview';
|
||
if (pathHasExtension(normalized, TEXT_PREVIEW_EXTENSIONS)) return 'preview';
|
||
return 'unsupported';
|
||
}
|
||
|
||
const WORKSPACE_LINK_PREFIX = 'https://workspace.local/open/';
|
||
const WORKSPACE_ABS_PATH_PATTERN =
|
||
/\/root\/\.nanobot\/workspace\/[^\n\r<>"'`]+?\.[a-z0-9][a-z0-9._+-]{0,31}\b/gi;
|
||
const WORKSPACE_RELATIVE_PATH_PATTERN =
|
||
/(^|[\s(\[])(\/[^\n\r<>"'`)\]]+?\.[a-z0-9][a-z0-9._+-]{0,31})(?![A-Za-z0-9_./-])/gim;
|
||
|
||
function buildWorkspaceLink(path: string) {
|
||
return `${WORKSPACE_LINK_PREFIX}${encodeURIComponent(path)}`;
|
||
}
|
||
|
||
function parseWorkspaceLink(href: string): string | null {
|
||
const link = String(href || '').trim();
|
||
if (!link.startsWith(WORKSPACE_LINK_PREFIX)) return null;
|
||
const encoded = link.slice(WORKSPACE_LINK_PREFIX.length);
|
||
try {
|
||
const decoded = decodeURIComponent(encoded || '').trim();
|
||
return decoded || null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function renderWorkspacePathSegments(pathRaw: string, keyPrefix: string): ReactNode[] {
|
||
const path = String(pathRaw || '');
|
||
if (!path) return ['-'];
|
||
const normalized = path.replace(/\\/g, '/');
|
||
const hasLeadingSlash = normalized.startsWith('/');
|
||
const parts = normalized.split('/').filter((part) => part.length > 0);
|
||
const nodes: ReactNode[] = [];
|
||
|
||
if (hasLeadingSlash) {
|
||
nodes.push(<span key={`${keyPrefix}-root`} className="workspace-path-separator">/</span>);
|
||
}
|
||
|
||
parts.forEach((part, index) => {
|
||
if (index > 0) {
|
||
nodes.push(<span key={`${keyPrefix}-sep-${index}`} className="workspace-path-separator">/</span>);
|
||
}
|
||
nodes.push(<span key={`${keyPrefix}-part-${index}`} className="workspace-path-segment">{part}</span>);
|
||
});
|
||
|
||
return nodes.length > 0 ? nodes : ['-'];
|
||
}
|
||
|
||
const MARKDOWN_SANITIZE_SCHEMA = {
|
||
...defaultSchema,
|
||
tagNames: [...new Set([...(defaultSchema.tagNames || []), 'audio', 'source', 'video'])],
|
||
attributes: {
|
||
...defaultSchema.attributes,
|
||
audio: [...((defaultSchema.attributes?.audio as string[] | undefined) || []), 'autoplay', 'controls', 'loop', 'muted', 'preload', 'src'],
|
||
source: [...((defaultSchema.attributes?.source as string[] | undefined) || []), 'media', 'src', 'type'],
|
||
video: [...((defaultSchema.attributes?.video as string[] | undefined) || []), 'autoplay', 'controls', 'height', 'loop', 'muted', 'playsinline', 'poster', 'preload', 'src', 'width'],
|
||
},
|
||
};
|
||
|
||
function resolveWorkspaceDocumentPath(targetRaw: string, baseFilePath?: string): string | null {
|
||
const target = String(targetRaw || '').trim();
|
||
if (!target || target.startsWith('#')) return null;
|
||
const linkedPath = parseWorkspaceLink(target);
|
||
if (linkedPath) return linkedPath;
|
||
if (target.startsWith('/root/.nanobot/workspace/')) {
|
||
return normalizeDashboardAttachmentPath(target);
|
||
}
|
||
const lower = target.toLowerCase();
|
||
if (
|
||
lower.startsWith('blob:') ||
|
||
lower.startsWith('data:') ||
|
||
lower.startsWith('http://') ||
|
||
lower.startsWith('https://') ||
|
||
lower.startsWith('javascript:') ||
|
||
lower.startsWith('mailto:') ||
|
||
lower.startsWith('tel:') ||
|
||
target.startsWith('//')
|
||
) {
|
||
return null;
|
||
}
|
||
|
||
const normalizedBase = normalizeDashboardAttachmentPath(baseFilePath || '');
|
||
if (!normalizedBase) {
|
||
return null;
|
||
}
|
||
|
||
try {
|
||
const baseUrl = new URL(`https://workspace.local/${normalizedBase}`);
|
||
const resolvedUrl = new URL(target, baseUrl);
|
||
if (resolvedUrl.origin !== 'https://workspace.local') return null;
|
||
try {
|
||
return normalizeDashboardAttachmentPath(decodeURIComponent(resolvedUrl.pathname));
|
||
} catch {
|
||
return normalizeDashboardAttachmentPath(resolvedUrl.pathname);
|
||
}
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function decorateWorkspacePathsInPlainChunk(source: string): string {
|
||
if (!source) return source;
|
||
const protectedLinks: string[] = [];
|
||
const withProtectedAbsoluteLinks = source.replace(WORKSPACE_ABS_PATH_PATTERN, (fullPath) => {
|
||
const normalized = normalizeDashboardAttachmentPath(fullPath);
|
||
if (!normalized) return fullPath;
|
||
const token = `@@WS_PATH_LINK_${protectedLinks.length}@@`;
|
||
protectedLinks.push(`[${fullPath}](${buildWorkspaceLink(normalized)})`);
|
||
return token;
|
||
});
|
||
const withRelativeLinks = withProtectedAbsoluteLinks.replace(
|
||
WORKSPACE_RELATIVE_PATH_PATTERN,
|
||
(full, prefix: string, rawPath: string) => {
|
||
const normalized = normalizeDashboardAttachmentPath(rawPath);
|
||
if (!normalized) return full;
|
||
return `${prefix}[${rawPath}](${buildWorkspaceLink(normalized)})`;
|
||
},
|
||
);
|
||
return withRelativeLinks.replace(/@@WS_PATH_LINK_(\d+)@@/g, (_full, idxRaw: string) => {
|
||
const idx = Number(idxRaw);
|
||
if (!Number.isFinite(idx) || idx < 0 || idx >= protectedLinks.length) return String(_full || '');
|
||
return protectedLinks[idx];
|
||
});
|
||
}
|
||
|
||
function decorateWorkspacePathsForMarkdown(text: string) {
|
||
const source = String(text || '');
|
||
if (!source) return source;
|
||
|
||
// Keep existing Markdown links unchanged; only decorate plain text segments.
|
||
const markdownLinkPattern = /\[[^\]]*?\]\((?:[^)(]|\([^)(]*\))*\)/g;
|
||
let result = '';
|
||
let last = 0;
|
||
let match = markdownLinkPattern.exec(source);
|
||
while (match) {
|
||
const idx = Number(match.index || 0);
|
||
if (idx > last) {
|
||
result += decorateWorkspacePathsInPlainChunk(source.slice(last, idx));
|
||
}
|
||
result += match[0];
|
||
last = idx + match[0].length;
|
||
match = markdownLinkPattern.exec(source);
|
||
}
|
||
if (last < source.length) {
|
||
result += decorateWorkspacePathsInPlainChunk(source.slice(last));
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function normalizeAttachmentPaths(raw: unknown): string[] {
|
||
if (!Array.isArray(raw)) return [];
|
||
return raw
|
||
.map((v) => String(v || '').trim().replace(/\\/g, '/'))
|
||
.filter((v) => v.length > 0);
|
||
}
|
||
|
||
function normalizeDashboardAttachmentPath(path: string): string {
|
||
const v = String(path || '')
|
||
.trim()
|
||
.replace(/\\/g, '/')
|
||
.replace(/^['"`([<{]+/, '')
|
||
.replace(/['"`)\]>}.,，。！？；：]+$/, '');
|
||
if (!v) return '';
|
||
const prefix = '/root/.nanobot/workspace/';
|
||
if (v.startsWith(prefix)) return v.slice(prefix.length);
|
||
return v.replace(/^\/+/, '');
|
||
}
|
||
|
||
const COMPOSER_DRAFT_STORAGE_PREFIX = 'nanobot-dashboard-composer-draft:v1:';
|
||
|
||
interface ComposerDraftStorage {
|
||
command: string;
|
||
attachments: string[];
|
||
updated_at_ms: number;
|
||
}
|
||
|
||
function getComposerDraftStorageKey(botId: string): string {
|
||
return `${COMPOSER_DRAFT_STORAGE_PREFIX}${String(botId || '').trim()}`;
|
||
}
|
||
|
||
function loadComposerDraft(botId: string): ComposerDraftStorage | null {
|
||
const id = String(botId || '').trim();
|
||
if (!id || typeof window === 'undefined') return null;
|
||
try {
|
||
const raw = window.localStorage.getItem(getComposerDraftStorageKey(id));
|
||
if (!raw) return null;
|
||
const parsed = JSON.parse(raw) as Partial<ComposerDraftStorage> | null;
|
||
const command = String(parsed?.command || '');
|
||
const attachments = normalizeAttachmentPaths(parsed?.attachments)
|
||
.map(normalizeDashboardAttachmentPath)
|
||
.filter(Boolean);
|
||
return {
|
||
command,
|
||
attachments,
|
||
updated_at_ms: Number(parsed?.updated_at_ms || Date.now()),
|
||
};
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function persistComposerDraft(botId: string, commandRaw: string, attachmentsRaw: string[]): void {
|
||
const id = String(botId || '').trim();
|
||
if (!id || typeof window === 'undefined') return;
|
||
const command = String(commandRaw || '');
|
||
const attachments = normalizeAttachmentPaths(attachmentsRaw)
|
||
.map(normalizeDashboardAttachmentPath)
|
||
.filter(Boolean);
|
||
const key = getComposerDraftStorageKey(id);
|
||
try {
|
||
if (!command.trim() && attachments.length === 0) {
|
||
window.localStorage.removeItem(key);
|
||
return;
|
||
}
|
||
const payload: ComposerDraftStorage = {
|
||
command,
|
||
attachments,
|
||
updated_at_ms: Date.now(),
|
||
};
|
||
window.localStorage.setItem(key, JSON.stringify(payload));
|
||
} catch {
|
||
// ignore localStorage write failures
|
||
}
|
||
}
|
||
|
||
function isExternalHttpLink(href: string): boolean {
|
||
return /^https?:\/\//i.test(String(href || '').trim());
|
||
}
|
||
|
||
function parseQuotedReplyBlock(input: string): { quoted: string; body: string } {
|
||
const source = String(input || '');
|
||
const match = source.match(/\[Quoted Reply\]\s*([\s\S]*?)\s*\[\/Quoted Reply\]/i);
|
||
const quoted = normalizeAssistantMessageText(match?.[1] || '');
|
||
const body = source.replace(/\[Quoted Reply\][\s\S]*?\[\/Quoted Reply\]\s*/gi, '').trim();
|
||
return { quoted, body };
|
||
}
|
||
|
||
function mergeConversation(messages: ChatMessage[]) {
|
||
const merged: ChatMessage[] = [];
|
||
messages
|
||
.filter((msg) => msg.role !== 'system' && (msg.text.trim().length > 0 || (msg.attachments || []).length > 0))
|
||
.forEach((msg) => {
|
||
const parsedUser = msg.role === 'user' ? parseQuotedReplyBlock(msg.text) : { quoted: '', body: msg.text };
|
||
const userQuoted = parsedUser.quoted;
|
||
const userBody = parsedUser.body;
|
||
const cleanText = msg.role === 'user' ? normalizeUserMessageText(userBody) : normalizeAssistantMessageText(msg.text);
|
||
const attachments = normalizeAttachmentPaths(msg.attachments).map(normalizeDashboardAttachmentPath).filter(Boolean);
|
||
if (!cleanText && attachments.length === 0 && !userQuoted) return;
|
||
const last = merged[merged.length - 1];
|
||
if (last && last.role === msg.role) {
|
||
const normalizedLast = last.role === 'user' ? normalizeUserMessageText(last.text) : normalizeAssistantMessageText(last.text);
|
||
const normalizedCurrent = msg.role === 'user' ? normalizeUserMessageText(cleanText) : normalizeAssistantMessageText(cleanText);
|
||
const lastKind = last.kind || 'final';
|
||
const currentKind = msg.kind || 'final';
|
||
const sameAttachmentSet =
|
||
JSON.stringify(normalizeAttachmentPaths(last.attachments)) === JSON.stringify(attachments);
|
||
const sameQuoted = normalizeAssistantMessageText(last.quoted_reply || '') === normalizeAssistantMessageText(userQuoted);
|
||
if (lastKind === currentKind && normalizedLast === normalizedCurrent && sameAttachmentSet && sameQuoted && Math.abs(msg.ts - last.ts) < 15000) {
|
||
last.ts = msg.ts;
|
||
last.id = msg.id || last.id;
|
||
if (typeof msg.feedback !== 'undefined') {
|
||
last.feedback = msg.feedback;
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
merged.push({ ...msg, text: cleanText, quoted_reply: userQuoted || undefined, attachments });
|
||
});
|
||
return merged.slice(-120);
|
||
}
|
||
|
||
function clampTemperature(value: number) {
|
||
if (Number.isNaN(value)) return 0.2;
|
||
return Math.min(1, Math.max(0, value));
|
||
}
|
||
|
||
function clampMaxTokens(value: number) {
|
||
if (Number.isNaN(value)) return 8192;
|
||
return Math.min(32768, Math.max(256, Math.round(value)));
|
||
}
|
||
|
||
function clampCpuCores(value: number) {
|
||
if (Number.isNaN(value)) return 1;
|
||
if (value === 0) return 0;
|
||
return Math.min(16, Math.max(0.1, Math.round(value * 10) / 10));
|
||
}
|
||
|
||
function clampMemoryMb(value: number) {
|
||
if (Number.isNaN(value)) return 1024;
|
||
if (value === 0) return 0;
|
||
return Math.min(65536, Math.max(256, Math.round(value)));
|
||
}
|
||
|
||
function clampStorageGb(value: number) {
|
||
if (Number.isNaN(value)) return 10;
|
||
if (value === 0) return 0;
|
||
return Math.min(1024, Math.max(1, Math.round(value)));
|
||
}
|
||
|
||
function formatBytes(bytes: number): string {
|
||
const value = Number(bytes || 0);
|
||
if (!Number.isFinite(value) || value <= 0) return '0 B';
|
||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||
const idx = Math.min(units.length - 1, Math.floor(Math.log(value) / Math.log(1024)));
|
||
const scaled = value / Math.pow(1024, idx);
|
||
return `${scaled >= 10 ? scaled.toFixed(1) : scaled.toFixed(2)} ${units[idx]}`;
|
||
}
|
||
|
||
function formatPercent(value: number): string {
|
||
const n = Number(value || 0);
|
||
if (!Number.isFinite(n)) return '0.00%';
|
||
return `${Math.max(0, n).toFixed(2)}%`;
|
||
}
|
||
|
||
function formatWorkspaceTime(raw: string | undefined, isZh: boolean): string {
|
||
const text = String(raw || '').trim();
|
||
if (!text) return '-';
|
||
const dt = new Date(text);
|
||
if (Number.isNaN(dt.getTime())) return '-';
|
||
try {
|
||
return dt.toLocaleString(isZh ? 'zh-CN' : 'en-US', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
weekday: 'long',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
hour12: false,
|
||
});
|
||
} catch {
|
||
return dt.toLocaleString();
|
||
}
|
||
}
|
||
|
||
function formatCronSchedule(job: CronJob, isZh: boolean) {
|
||
const s = job.schedule || {};
|
||
if (s.kind === 'every' && Number(s.everyMs) > 0) {
|
||
const sec = Math.round(Number(s.everyMs) / 1000);
|
||
return isZh ? `每 ${sec}s` : `every ${sec}s`;
|
||
}
|
||
if (s.kind === 'cron') {
|
||
if (s.tz) return `${s.expr || '-'} (${s.tz})`;
|
||
return s.expr || '-';
|
||
}
|
||
if (s.kind === 'at' && Number(s.atMs) > 0) {
|
||
return new Date(Number(s.atMs)).toLocaleString();
|
||
}
|
||
return '-';
|
||
}
|
||
|
||
export function BotDashboardModule({
|
||
onOpenCreateWizard,
|
||
onOpenImageFactory,
|
||
forcedBotId,
|
||
compactMode = false,
|
||
}: BotDashboardModuleProps) {
|
||
const {
|
||
activeBots,
|
||
setBots,
|
||
mergeBot,
|
||
updateBotStatus,
|
||
locale,
|
||
addBotMessage,
|
||
setBotMessages,
|
||
setBotMessageFeedback,
|
||
} = useAppStore();
|
||
const { notify, confirm } = useLucentPrompt();
|
||
const fileNotPreviewableLabel = locale === 'zh' ? '当前文件类型不支持预览' : 'This file type is not previewable';
|
||
const [selectedBotId, setSelectedBotId] = useState('');
|
||
const [command, setCommand] = useState('');
|
||
const [speechEnabled, setSpeechEnabled] = useState(true);
|
||
const [voiceMaxSeconds, setVoiceMaxSeconds] = useState(20);
|
||
const [isVoiceRecording, setIsVoiceRecording] = useState(false);
|
||
const [isVoiceTranscribing, setIsVoiceTranscribing] = useState(false);
|
||
const [voiceCountdown, setVoiceCountdown] = useState(20);
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
const [showBaseModal, setShowBaseModal] = useState(false);
|
||
const [showParamModal, setShowParamModal] = useState(false);
|
||
const [showChannelModal, setShowChannelModal] = useState(false);
|
||
const [showTopicModal, setShowTopicModal] = useState(false);
|
||
const [showSkillsModal, setShowSkillsModal] = useState(false);
|
||
const [showSkillMarketInstallModal, setShowSkillMarketInstallModal] = useState(false);
|
||
const [skillAddMenuOpen, setSkillAddMenuOpen] = useState(false);
|
||
const [showMcpModal, setShowMcpModal] = useState(false);
|
||
const [showEnvParamsModal, setShowEnvParamsModal] = useState(false);
|
||
const [showCronModal, setShowCronModal] = useState(false);
|
||
const [showAgentModal, setShowAgentModal] = useState(false);
|
||
const [showResourceModal, setShowResourceModal] = useState(false);
|
||
const [resourceBotId, setResourceBotId] = useState('');
|
||
const [resourceSnapshot, setResourceSnapshot] = useState<BotResourceSnapshot | null>(null);
|
||
const [resourceLoading, setResourceLoading] = useState(false);
|
||
const [resourceError, setResourceError] = useState('');
|
||
const [agentTab, setAgentTab] = useState<AgentTab>('AGENTS');
|
||
const [isTestingProvider, setIsTestingProvider] = useState(false);
|
||
const [providerTestResult, setProviderTestResult] = useState('');
|
||
const [operatingBotId, setOperatingBotId] = useState<string | null>(null);
|
||
const [sendingByBot, setSendingByBot] = useState<Record<string, boolean>>({});
|
||
const [interruptingByBot, setInterruptingByBot] = useState<Record<string, boolean>>({});
|
||
const [controlStateByBot, setControlStateByBot] = useState<Record<string, 'starting' | 'stopping' | 'enabling' | 'disabling'>>({});
|
||
const chatBottomRef = useRef<HTMLDivElement | null>(null);
|
||
const chatScrollRef = useRef<HTMLDivElement | null>(null);
|
||
const chatAutoFollowRef = useRef(true);
|
||
const [workspaceEntries, setWorkspaceEntries] = useState<WorkspaceNode[]>([]);
|
||
const [workspaceSearchEntries, setWorkspaceSearchEntries] = useState<WorkspaceNode[]>([]);
|
||
const [workspaceSearchLoading, setWorkspaceSearchLoading] = useState(false);
|
||
const [workspaceLoading, setWorkspaceLoading] = useState(false);
|
||
const [workspaceError, setWorkspaceError] = useState('');
|
||
const [workspaceCurrentPath, setWorkspaceCurrentPath] = useState('');
|
||
const [workspaceParentPath, setWorkspaceParentPath] = useState<string | null>(null);
|
||
const [workspaceFileLoading, setWorkspaceFileLoading] = useState(false);
|
||
const [workspacePreview, setWorkspacePreview] = useState<WorkspacePreviewState | null>(null);
|
||
const [workspacePreviewFullscreen, setWorkspacePreviewFullscreen] = useState(false);
|
||
const [workspacePreviewEditing, setWorkspacePreviewEditing] = useState(false);
|
||
const [workspacePreviewSaving, setWorkspacePreviewSaving] = useState(false);
|
||
const [workspacePreviewDraft, setWorkspacePreviewDraft] = useState('');
|
||
const [workspaceAutoRefresh, setWorkspaceAutoRefresh] = useState(false);
|
||
const [workspaceQuery, setWorkspaceQuery] = useState('');
|
||
const [pendingAttachments, setPendingAttachments] = useState<string[]>([]);
|
||
const [composerDraftHydrated, setComposerDraftHydrated] = useState(false);
|
||
const [quotedReply, setQuotedReply] = useState<QuotedReply | null>(null);
|
||
const [isUploadingAttachments, setIsUploadingAttachments] = useState(false);
|
||
const [attachmentUploadPercent, setAttachmentUploadPercent] = useState<number | null>(null);
|
||
const filePickerRef = useRef<HTMLInputElement | null>(null);
|
||
const composerTextareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||
const [cronJobs, setCronJobs] = useState<CronJob[]>([]);
|
||
const [cronLoading, setCronLoading] = useState(false);
|
||
const [cronActionJobId, setCronActionJobId] = useState<string>('');
|
||
const [channels, setChannels] = useState<BotChannel[]>([]);
|
||
const [expandedChannelByKey, setExpandedChannelByKey] = useState<Record<string, boolean>>({});
|
||
const [newChannelPanelOpen, setNewChannelPanelOpen] = useState(false);
|
||
const [channelCreateMenuOpen, setChannelCreateMenuOpen] = useState(false);
|
||
const channelCreateMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const [newChannelDraft, setNewChannelDraft] = useState<BotChannel>({
|
||
id: 'draft-channel',
|
||
bot_id: '',
|
||
channel_type: 'feishu',
|
||
external_app_id: '',
|
||
app_secret: '',
|
||
internal_port: 8080,
|
||
is_active: true,
|
||
extra_config: {},
|
||
});
|
||
const [topics, setTopics] = useState<BotTopic[]>([]);
|
||
const [expandedTopicByKey, setExpandedTopicByKey] = useState<Record<string, boolean>>({});
|
||
const [newTopicPanelOpen, setNewTopicPanelOpen] = useState(false);
|
||
const [topicPresetTemplates, setTopicPresetTemplates] = useState<TopicPresetTemplate[]>([]);
|
||
const [newTopicSource, setNewTopicSource] = useState<string>('');
|
||
const [topicPresetMenuOpen, setTopicPresetMenuOpen] = useState(false);
|
||
const topicPresetMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const [newTopicAdvancedOpen, setNewTopicAdvancedOpen] = useState(false);
|
||
const [newTopicKey, setNewTopicKey] = useState('');
|
||
const [newTopicName, setNewTopicName] = useState('');
|
||
const [newTopicDescription, setNewTopicDescription] = useState('');
|
||
const [newTopicPurpose, setNewTopicPurpose] = useState('');
|
||
const [newTopicIncludeWhen, setNewTopicIncludeWhen] = useState('');
|
||
const [newTopicExcludeWhen, setNewTopicExcludeWhen] = useState('');
|
||
const [newTopicExamplesPositive, setNewTopicExamplesPositive] = useState('');
|
||
const [newTopicExamplesNegative, setNewTopicExamplesNegative] = useState('');
|
||
const [newTopicPriority, setNewTopicPriority] = useState('50');
|
||
const [botSkills, setBotSkills] = useState<WorkspaceSkillOption[]>([]);
|
||
const [marketSkills, setMarketSkills] = useState<BotSkillMarketItem[]>([]);
|
||
const [isSkillUploading, setIsSkillUploading] = useState(false);
|
||
const [isMarketSkillsLoading, setIsMarketSkillsLoading] = useState(false);
|
||
const [marketSkillInstallingId, setMarketSkillInstallingId] = useState<number | null>(null);
|
||
const skillZipPickerRef = useRef<HTMLInputElement | null>(null);
|
||
const skillAddMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const [envParams, setEnvParams] = useState<BotEnvParams>({});
|
||
const [mcpServers, setMcpServers] = useState<MCPServerDraft[]>([]);
|
||
const [persistedMcpServers, setPersistedMcpServers] = useState<MCPServerDraft[]>([]);
|
||
const [newMcpPanelOpen, setNewMcpPanelOpen] = useState(false);
|
||
const [newMcpDraft, setNewMcpDraft] = useState<MCPServerDraft>({
|
||
name: '',
|
||
type: 'streamableHttp',
|
||
url: '',
|
||
botId: '',
|
||
botSecret: '',
|
||
toolTimeout: '60',
|
||
headers: {},
|
||
locked: false,
|
||
originName: '',
|
||
});
|
||
const [expandedMcpByKey, setExpandedMcpByKey] = useState<Record<string, boolean>>({});
|
||
const [envDraftKey, setEnvDraftKey] = useState('');
|
||
const [envDraftValue, setEnvDraftValue] = useState('');
|
||
const [isSavingChannel, setIsSavingChannel] = useState(false);
|
||
const [isSavingTopic, setIsSavingTopic] = useState(false);
|
||
const [isSavingMcp, setIsSavingMcp] = useState(false);
|
||
const [isSavingGlobalDelivery, setIsSavingGlobalDelivery] = useState(false);
|
||
const [isBatchOperating, setIsBatchOperating] = useState(false);
|
||
const [availableImages, setAvailableImages] = useState<NanobotImage[]>([]);
|
||
const [controlCommandByBot, setControlCommandByBot] = useState<Record<string, string>>({});
|
||
const [globalDelivery, setGlobalDelivery] = useState<{ sendProgress: boolean; sendToolHints: boolean }>({
|
||
sendProgress: false,
|
||
sendToolHints: false,
|
||
});
|
||
const [uploadMaxMb, setUploadMaxMb] = useState(100);
|
||
const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState<string[]>([]);
|
||
const [botListPageSize, setBotListPageSize] = useState(() => readCachedPlatformPageSize(10));
|
||
const [botListPageSizeReady, setBotListPageSizeReady] = useState(
|
||
() => readCachedPlatformPageSize(0) > 0,
|
||
);
|
||
const [chatPullPageSize, setChatPullPageSize] = useState(60);
|
||
const [chatHasMore, setChatHasMore] = useState(false);
|
||
const [chatLoadingMore, setChatLoadingMore] = useState(false);
|
||
const [chatDatePickerOpen, setChatDatePickerOpen] = useState(false);
|
||
const [chatDateValue, setChatDateValue] = useState('');
|
||
const [chatDateJumping, setChatDateJumping] = useState(false);
|
||
const [chatJumpAnchorId, setChatJumpAnchorId] = useState<number | null>(null);
|
||
const [chatDatePanelPosition, setChatDatePanelPosition] = useState<{ bottom: number; right: number } | null>(null);
|
||
const [workspaceDownloadExtensions, setWorkspaceDownloadExtensions] = useState<string[]>(
|
||
DEFAULT_WORKSPACE_DOWNLOAD_EXTENSIONS,
|
||
);
|
||
const [runtimeViewMode, setRuntimeViewMode] = useState<RuntimeViewMode>('visual');
|
||
const [runtimeMenuOpen, setRuntimeMenuOpen] = useState(false);
|
||
const [botListMenuOpen, setBotListMenuOpen] = useState(false);
|
||
const [topicFeedTopicKey, setTopicFeedTopicKey] = useState('__all__');
|
||
const [topicFeedItems, setTopicFeedItems] = useState<TopicFeedItem[]>([]);
|
||
const [topicFeedNextCursor, setTopicFeedNextCursor] = useState<number | null>(null);
|
||
const [topicFeedLoading, setTopicFeedLoading] = useState(false);
|
||
const [topicFeedLoadingMore, setTopicFeedLoadingMore] = useState(false);
|
||
const [topicFeedError, setTopicFeedError] = useState('');
|
||
const [topicFeedReadSavingById, setTopicFeedReadSavingById] = useState<Record<number, boolean>>({});
|
||
const [topicFeedDeleteSavingById, setTopicFeedDeleteSavingById] = useState<Record<number, boolean>>({});
|
||
const [topicFeedUnreadCount, setTopicFeedUnreadCount] = useState(0);
|
||
const [topicDetailOpen, setTopicDetailOpen] = useState(false);
|
||
const [compactPanelTab, setCompactPanelTab] = useState<CompactPanelTab>('chat');
|
||
const [isCompactMobile, setIsCompactMobile] = useState(false);
|
||
const [botListQuery, setBotListQuery] = useState('');
|
||
const [botListPage, setBotListPage] = useState(1);
|
||
const [expandedProgressByKey, setExpandedProgressByKey] = useState<Record<string, boolean>>({});
|
||
const [expandedUserByKey, setExpandedUserByKey] = useState<Record<string, boolean>>({});
|
||
const [feedbackSavingByMessageId, setFeedbackSavingByMessageId] = useState<Record<number, boolean>>({});
|
||
const [showRuntimeActionModal, setShowRuntimeActionModal] = useState(false);
|
||
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
||
const [templateTab, setTemplateTab] = useState<'agent' | 'topic'>('agent');
|
||
const [isLoadingTemplates, setIsLoadingTemplates] = useState(false);
|
||
const [isSavingTemplates, setIsSavingTemplates] = useState(false);
|
||
const [templateAgentText, setTemplateAgentText] = useState('');
|
||
const [templateTopicText, setTemplateTopicText] = useState('');
|
||
const [controlCommandPanelOpen, setControlCommandPanelOpen] = useState(false);
|
||
const [workspaceHoverCard, setWorkspaceHoverCard] = useState<WorkspaceHoverCardState | null>(null);
|
||
const botSearchInputName = useMemo(
|
||
() => `nbot-search-${Math.random().toString(36).slice(2, 10)}`,
|
||
[],
|
||
);
|
||
const workspaceSearchInputName = useMemo(
|
||
() => `nbot-workspace-search-${Math.random().toString(36).slice(2, 10)}`,
|
||
[],
|
||
);
|
||
const voiceRecorderRef = useRef<MediaRecorder | null>(null);
|
||
const voiceStreamRef = useRef<MediaStream | null>(null);
|
||
const voiceChunksRef = useRef<BlobPart[]>([]);
|
||
const voiceTimerRef = useRef<number | null>(null);
|
||
const runtimeMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const botListMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const controlCommandPanelRef = useRef<HTMLDivElement | null>(null);
|
||
const chatDateTriggerRef = useRef<HTMLButtonElement | null>(null);
|
||
const botOrderRef = useRef<Record<string, number>>({});
|
||
const nextBotOrderRef = useRef(1);
|
||
const applyEditFormFromBot = useCallback((bot?: any) => {
|
||
if (!bot) return;
|
||
setProviderTestResult('');
|
||
setEditForm({
|
||
name: bot.name || '',
|
||
access_password: bot.access_password || '',
|
||
llm_provider: bot.llm_provider || 'dashscope',
|
||
llm_model: bot.llm_model || '',
|
||
image_tag: bot.image_tag || '',
|
||
api_key: '',
|
||
api_base: bot.api_base || '',
|
||
temperature: clampTemperature(bot.temperature ?? 0.2),
|
||
top_p: bot.top_p ?? 1,
|
||
max_tokens: clampMaxTokens(bot.max_tokens ?? 8192),
|
||
cpu_cores: clampCpuCores(bot.cpu_cores ?? 1),
|
||
memory_mb: clampMemoryMb(bot.memory_mb ?? 1024),
|
||
storage_gb: clampStorageGb(bot.storage_gb ?? 10),
|
||
agents_md: bot.agents_md || '',
|
||
soul_md: bot.soul_md || bot.system_prompt || '',
|
||
user_md: bot.user_md || '',
|
||
tools_md: bot.tools_md || '',
|
||
identity_md: bot.identity_md || '',
|
||
});
|
||
setParamDraft({
|
||
max_tokens: String(clampMaxTokens(bot.max_tokens ?? 8192)),
|
||
cpu_cores: String(clampCpuCores(bot.cpu_cores ?? 1)),
|
||
memory_mb: String(clampMemoryMb(bot.memory_mb ?? 1024)),
|
||
storage_gb: String(clampStorageGb(bot.storage_gb ?? 10)),
|
||
});
|
||
}, []);
|
||
const buildWorkspaceDownloadHref = (filePath: string, forceDownload: boolean = true) => {
|
||
const query = [`path=${encodeURIComponent(filePath)}`];
|
||
if (forceDownload) query.push('download=1');
|
||
return `/public/bots/${encodeURIComponent(selectedBotId)}/workspace/download?${query.join('&')}`;
|
||
};
|
||
const buildWorkspaceRawHref = (filePath: string, forceDownload: boolean = false) => {
|
||
const normalized = String(filePath || '')
|
||
.trim()
|
||
.split('/')
|
||
.filter(Boolean)
|
||
.map((part) => encodeURIComponent(part))
|
||
.join('/');
|
||
if (!normalized) return '';
|
||
const base = `/public/bots/${encodeURIComponent(selectedBotId)}/workspace/raw/${normalized}`;
|
||
return forceDownload ? `${base}?download=1` : base;
|
||
};
|
||
const buildWorkspacePreviewHref = (filePath: string) => {
|
||
const normalized = String(filePath || '').trim();
|
||
if (!normalized) return '';
|
||
return isHtmlPath(normalized)
|
||
? buildWorkspaceRawHref(normalized, false)
|
||
: buildWorkspaceDownloadHref(normalized, false);
|
||
};
|
||
const closeWorkspacePreview = () => {
|
||
setWorkspacePreview(null);
|
||
setWorkspacePreviewFullscreen(false);
|
||
setWorkspacePreviewEditing(false);
|
||
setWorkspacePreviewSaving(false);
|
||
setWorkspacePreviewDraft('');
|
||
};
|
||
useEffect(() => {
|
||
if (!workspacePreview) {
|
||
setWorkspacePreviewEditing(false);
|
||
setWorkspacePreviewSaving(false);
|
||
setWorkspacePreviewDraft('');
|
||
return;
|
||
}
|
||
setWorkspacePreviewEditing(false);
|
||
setWorkspacePreviewSaving(false);
|
||
setWorkspacePreviewDraft(workspacePreview.content || '');
|
||
}, [workspacePreview?.path, workspacePreview?.content]);
|
||
const triggerWorkspaceFileDownload = (filePath: string) => {
|
||
if (!selectedBotId) return;
|
||
const normalized = String(filePath || '').trim();
|
||
if (!normalized) return;
|
||
const filename = normalized.split('/').pop() || 'workspace-file';
|
||
const link = document.createElement('a');
|
||
link.href = buildWorkspaceDownloadHref(normalized, true);
|
||
link.download = filename;
|
||
link.rel = 'noopener noreferrer';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
};
|
||
const copyWorkspacePreviewUrl = async (filePath: string) => {
|
||
const normalized = String(filePath || '').trim();
|
||
if (!selectedBotId || !normalized) return;
|
||
const hrefRaw = buildWorkspacePreviewHref(normalized);
|
||
const href = (() => {
|
||
try {
|
||
return new URL(hrefRaw, window.location.origin).href;
|
||
} catch {
|
||
return hrefRaw;
|
||
}
|
||
})();
|
||
try {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(href);
|
||
} else {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = href;
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
ta.remove();
|
||
}
|
||
notify(t.urlCopied, { tone: 'success' });
|
||
} catch {
|
||
notify(t.urlCopyFail, { tone: 'error' });
|
||
}
|
||
};
|
||
const copyWorkspacePreviewPath = async (filePath: string) => {
|
||
const normalized = String(filePath || '').trim();
|
||
if (!normalized) return;
|
||
await copyTextToClipboard(
|
||
normalized,
|
||
isZh ? '文件路径已复制' : 'File path copied',
|
||
isZh ? '文件路径复制失败' : 'Failed to copy file path',
|
||
);
|
||
};
|
||
const copyTextToClipboard = async (textRaw: string, successMsg: string, failMsg: string) => {
|
||
const text = String(textRaw || '');
|
||
if (!text.trim()) return;
|
||
try {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(text);
|
||
} else {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
ta.remove();
|
||
}
|
||
notify(successMsg, { tone: 'success' });
|
||
} catch {
|
||
notify(failMsg, { tone: 'error' });
|
||
}
|
||
};
|
||
const openWorkspacePathFromChat = async (path: string) => {
|
||
const normalized = String(path || '').trim();
|
||
if (!normalized) return;
|
||
const action = workspaceFileAction(normalized, workspaceDownloadExtensionSet);
|
||
if (action === 'download') {
|
||
triggerWorkspaceFileDownload(normalized);
|
||
return;
|
||
}
|
||
if (action === 'preview') {
|
||
void openWorkspaceFilePreview(normalized);
|
||
return;
|
||
}
|
||
try {
|
||
await axios.get<WorkspaceTreeResponse>(`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}/workspace/tree`, {
|
||
params: { path: normalized },
|
||
});
|
||
await loadWorkspaceTree(selectedBotId, normalized);
|
||
return;
|
||
} catch {
|
||
if (!isPreviewableWorkspacePath(normalized, workspaceDownloadExtensionSet) || action === 'unsupported') {
|
||
notify(fileNotPreviewableLabel, { tone: 'warning' });
|
||
return;
|
||
}
|
||
}
|
||
};
|
||
const resolveWorkspaceMediaSrc = useCallback((srcRaw: string, baseFilePath?: string): string => {
|
||
const src = String(srcRaw || '').trim();
|
||
if (!src || !selectedBotId) return src;
|
||
const resolvedWorkspacePath = resolveWorkspaceDocumentPath(src, baseFilePath);
|
||
if (resolvedWorkspacePath) {
|
||
return buildWorkspacePreviewHref(resolvedWorkspacePath);
|
||
}
|
||
const lower = src.toLowerCase();
|
||
if (lower.startsWith('data:') || lower.startsWith('blob:') || lower.startsWith('http://') || lower.startsWith('https://')) {
|
||
return src;
|
||
}
|
||
return src;
|
||
}, [selectedBotId]);
|
||
const transformWorkspacePreviewMarkdownUrl = (url: string, key: string): string => {
|
||
if (!workspacePreview?.isMarkdown || !selectedBotId) return url;
|
||
const resolvedWorkspacePath = resolveWorkspaceDocumentPath(url, workspacePreview.path);
|
||
if (!resolvedWorkspacePath) return url;
|
||
if (key === 'href') {
|
||
return buildWorkspaceLink(resolvedWorkspacePath);
|
||
}
|
||
return buildWorkspacePreviewHref(resolvedWorkspacePath);
|
||
};
|
||
const renderWorkspaceAwareText = (text: string, keyPrefix: string): ReactNode[] => {
|
||
const source = String(text || '');
|
||
if (!source) return [source];
|
||
const pattern =
|
||
/\[(\/root\/\.nanobot\/workspace\/[^\]]+)\]\((https:\/\/workspace\.local\/open\/[^)\r\n]*)\)|\/root\/\.nanobot\/workspace\/[^\n\r<>"'`]+?\.[a-z0-9][a-z0-9._+-]{0,31}\b|https:\/\/workspace\.local\/open\/[^)\r\n]+/gi;
|
||
const nodes: ReactNode[] = [];
|
||
let lastIndex = 0;
|
||
let matchIndex = 0;
|
||
let match = pattern.exec(source);
|
||
while (match) {
|
||
if (match.index > lastIndex) {
|
||
nodes.push(source.slice(lastIndex, match.index));
|
||
}
|
||
|
||
const raw = match[0];
|
||
const markdownPath = match[1] ? String(match[1]) : '';
|
||
const markdownHref = match[2] ? String(match[2]) : '';
|
||
let normalizedPath = '';
|
||
let displayText = raw;
|
||
|
||
if (markdownPath && markdownHref) {
|
||
normalizedPath = normalizeDashboardAttachmentPath(markdownPath);
|
||
displayText = markdownPath;
|
||
} else if (raw.startsWith(WORKSPACE_LINK_PREFIX)) {
|
||
normalizedPath = String(parseWorkspaceLink(raw) || '').trim();
|
||
displayText = normalizedPath ? `/root/.nanobot/workspace/${normalizedPath}` : raw;
|
||
} else if (raw.startsWith('/root/.nanobot/workspace/')) {
|
||
normalizedPath = normalizeDashboardAttachmentPath(raw);
|
||
displayText = raw;
|
||
}
|
||
|
||
if (normalizedPath) {
|
||
nodes.push(
|
||
<a
|
||
key={`${keyPrefix}-ws-${matchIndex}`}
|
||
href="#"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
void openWorkspacePathFromChat(normalizedPath);
|
||
}}
|
||
>
|
||
{displayText}
|
||
</a>,
|
||
);
|
||
} else {
|
||
nodes.push(raw);
|
||
}
|
||
|
||
lastIndex = match.index + raw.length;
|
||
matchIndex += 1;
|
||
match = pattern.exec(source);
|
||
}
|
||
|
||
if (lastIndex < source.length) {
|
||
nodes.push(source.slice(lastIndex));
|
||
}
|
||
return nodes;
|
||
};
|
||
const renderWorkspaceAwareChildren = (children: ReactNode, keyPrefix: string): ReactNode => {
|
||
const list = Array.isArray(children) ? children : [children];
|
||
const mapped = list.flatMap((child, idx) => {
|
||
if (typeof child === 'string') {
|
||
return renderWorkspaceAwareText(child, `${keyPrefix}-${idx}`);
|
||
}
|
||
return [child];
|
||
});
|
||
return mapped;
|
||
};
|
||
const markdownComponents = useMemo(
|
||
() => ({
|
||
a: ({ href, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
|
||
const link = String(href || '').trim();
|
||
const workspacePath = parseWorkspaceLink(link);
|
||
if (workspacePath) {
|
||
return (
|
||
<a
|
||
href="#"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
void openWorkspacePathFromChat(workspacePath);
|
||
}}
|
||
{...props}
|
||
>
|
||
{children}
|
||
</a>
|
||
);
|
||
}
|
||
if (isExternalHttpLink(link)) {
|
||
return (
|
||
<a href={link} target="_blank" rel="noopener noreferrer" {...props}>
|
||
{children}
|
||
</a>
|
||
);
|
||
}
|
||
return (
|
||
<a href={link || '#'} {...props}>
|
||
{children}
|
||
</a>
|
||
);
|
||
},
|
||
img: ({ src, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => {
|
||
const resolvedSrc = resolveWorkspaceMediaSrc(String(src || ''));
|
||
return (
|
||
<img
|
||
src={resolvedSrc}
|
||
alt={String(alt || '')}
|
||
loading="lazy"
|
||
{...props}
|
||
/>
|
||
);
|
||
},
|
||
p: ({ children, ...props }: { children?: ReactNode }) => (
|
||
<p {...props}>{renderWorkspaceAwareChildren(children, 'md-p')}</p>
|
||
),
|
||
li: ({ children, ...props }: { children?: ReactNode }) => (
|
||
<li {...props}>{renderWorkspaceAwareChildren(children, 'md-li')}</li>
|
||
),
|
||
code: ({ children, ...props }: { children?: ReactNode }) => (
|
||
<code {...props}>{renderWorkspaceAwareChildren(children, 'md-code')}</code>
|
||
),
|
||
}),
|
||
[fileNotPreviewableLabel, notify, resolveWorkspaceMediaSrc, selectedBotId],
|
||
);
|
||
|
||
const [editForm, setEditForm] = useState({
|
||
name: '',
|
||
access_password: '',
|
||
llm_provider: '',
|
||
llm_model: '',
|
||
image_tag: '',
|
||
api_key: '',
|
||
api_base: '',
|
||
temperature: 0.2,
|
||
top_p: 1,
|
||
max_tokens: 8192,
|
||
cpu_cores: 1,
|
||
memory_mb: 1024,
|
||
storage_gb: 10,
|
||
agents_md: '',
|
||
soul_md: '',
|
||
user_md: '',
|
||
tools_md: '',
|
||
identity_md: '',
|
||
});
|
||
const [paramDraft, setParamDraft] = useState({
|
||
max_tokens: '8192',
|
||
cpu_cores: '1',
|
||
memory_mb: '1024',
|
||
storage_gb: '10',
|
||
});
|
||
|
||
useEffect(() => {
|
||
const ordered = Object.values(activeBots).sort((a, b) => {
|
||
const aCreated = parseBotTimestamp(a.created_at);
|
||
const bCreated = parseBotTimestamp(b.created_at);
|
||
if (aCreated !== bCreated) return aCreated - bCreated;
|
||
return String(a.id || '').localeCompare(String(b.id || ''));
|
||
});
|
||
|
||
ordered.forEach((bot) => {
|
||
const id = String(bot.id || '').trim();
|
||
if (!id) return;
|
||
if (botOrderRef.current[id] !== undefined) return;
|
||
botOrderRef.current[id] = nextBotOrderRef.current;
|
||
nextBotOrderRef.current += 1;
|
||
});
|
||
|
||
const alive = new Set(ordered.map((bot) => String(bot.id || '').trim()).filter(Boolean));
|
||
Object.keys(botOrderRef.current).forEach((id) => {
|
||
if (!alive.has(id)) delete botOrderRef.current[id];
|
||
});
|
||
}, [activeBots]);
|
||
|
||
const bots = useMemo(
|
||
() =>
|
||
Object.values(activeBots).sort((a, b) => {
|
||
const aId = String(a.id || '').trim();
|
||
const bId = String(b.id || '').trim();
|
||
const aOrder = botOrderRef.current[aId] ?? Number.MAX_SAFE_INTEGER;
|
||
const bOrder = botOrderRef.current[bId] ?? Number.MAX_SAFE_INTEGER;
|
||
if (aOrder !== bOrder) return aOrder - bOrder;
|
||
return aId.localeCompare(bId);
|
||
}),
|
||
[activeBots],
|
||
);
|
||
const hasForcedBot = Boolean(String(forcedBotId || '').trim());
|
||
const compactListFirstMode = compactMode && !hasForcedBot;
|
||
const isCompactListPage = compactListFirstMode && !selectedBotId;
|
||
const showCompactBotPageClose = compactListFirstMode && Boolean(selectedBotId);
|
||
const showBotListPanel = !hasForcedBot && (!compactMode || isCompactListPage);
|
||
const normalizedBotListQuery = botListQuery.trim().toLowerCase();
|
||
const filteredBots = useMemo(() => {
|
||
if (!normalizedBotListQuery) return bots;
|
||
return bots.filter((bot) => {
|
||
const id = String(bot.id || '').toLowerCase();
|
||
const name = String(bot.name || '').toLowerCase();
|
||
return id.includes(normalizedBotListQuery) || name.includes(normalizedBotListQuery);
|
||
});
|
||
}, [bots, normalizedBotListQuery]);
|
||
const botListTotalPages = Math.max(1, Math.ceil(filteredBots.length / botListPageSize));
|
||
const pagedBots = useMemo(() => {
|
||
const page = Math.min(Math.max(1, botListPage), botListTotalPages);
|
||
const start = (page - 1) * botListPageSize;
|
||
return filteredBots.slice(start, start + botListPageSize);
|
||
}, [filteredBots, botListPage, botListTotalPages, botListPageSize]);
|
||
const selectedBot = selectedBotId ? activeBots[selectedBotId] : undefined;
|
||
const forcedBotMissing = Boolean(forcedBotId && bots.length > 0 && !activeBots[String(forcedBotId).trim()]);
|
||
const messages = selectedBot?.messages || [];
|
||
const events = selectedBot?.events || [];
|
||
const isZh = locale === 'zh';
|
||
const noteLocale = pickLocale(locale, { 'zh-cn': 'zh-cn' as const, en: 'en' as const });
|
||
const t = pickLocale(locale, { 'zh-cn': dashboardZhCn, en: dashboardEn });
|
||
const passwordToggleLabels = isZh
|
||
? { show: '显示密码', hide: '隐藏密码' }
|
||
: { show: 'Show password', hide: 'Hide password' };
|
||
const activeTopicOptions = useMemo<TopicFeedOption[]>(
|
||
() =>
|
||
topics
|
||
.filter((topic) => Boolean(topic.is_active))
|
||
.map((topic) => ({
|
||
key: String(topic.topic_key || '').trim().toLowerCase(),
|
||
label: String(topic.name || topic.topic_key || '').trim(),
|
||
}))
|
||
.filter((row) => Boolean(row.key))
|
||
.sort((a, b) => a.key.localeCompare(b.key)),
|
||
[topics],
|
||
);
|
||
const topicPanelState = useMemo<'none' | 'inactive' | 'ready'>(() => {
|
||
if (topics.length === 0) return 'none';
|
||
if (activeTopicOptions.length === 0) return 'inactive';
|
||
return 'ready';
|
||
}, [activeTopicOptions, topics]);
|
||
const lc = isZh ? channelsZhCn : channelsEn;
|
||
const baseImageOptions = useMemo<BaseImageOption[]>(() => {
|
||
const imagesByTag = new Map<string, NanobotImage>();
|
||
availableImages.forEach((img) => {
|
||
const tag = String(img.tag || '').trim();
|
||
if (!tag || imagesByTag.has(tag)) return;
|
||
imagesByTag.set(tag, img);
|
||
});
|
||
const options = Array.from(imagesByTag.entries())
|
||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||
.map(([tag, img]) => {
|
||
const status = String(img.status || '').toUpperCase() || 'UNKNOWN';
|
||
return {
|
||
tag,
|
||
label: `${tag} · ${status}`,
|
||
disabled: status !== 'READY',
|
||
};
|
||
});
|
||
const currentTag = String(editForm.image_tag || '').trim();
|
||
if (currentTag && !options.some((opt) => opt.tag === currentTag)) {
|
||
options.unshift({
|
||
tag: currentTag,
|
||
label: isZh ? `${currentTag} · 未登记（只读）` : `${currentTag} · unregistered (read-only)`,
|
||
disabled: true,
|
||
});
|
||
}
|
||
return options;
|
||
}, [availableImages, editForm.image_tag, isZh]);
|
||
const runtimeMoreLabel = isZh ? '更多' : 'More';
|
||
const effectiveTopicPresetTemplates = useMemo(
|
||
() => (topicPresetTemplates.length > 0 ? topicPresetTemplates : DEFAULT_TOPIC_PRESET_TEMPLATES),
|
||
[topicPresetTemplates],
|
||
);
|
||
const newTopicSourceLabel = useMemo(() => {
|
||
if (newTopicSource === 'blank') return t.topicPresetBlank;
|
||
const source = effectiveTopicPresetTemplates.find((row) => row.id === newTopicSource);
|
||
if (!source) return t.topicPresetBlank;
|
||
return resolvePresetText(source.name, isZh ? 'zh-cn' : 'en') || source.topic_key || source.id;
|
||
}, [effectiveTopicPresetTemplates, isZh, newTopicSource, t.topicPresetBlank]);
|
||
const templateAgentCount = useMemo(() => {
|
||
try {
|
||
const parsed = JSON.parse(templateAgentText || "{}");
|
||
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return 5;
|
||
const row = parsed as Record<string, unknown>;
|
||
return ["agents_md", "soul_md", "user_md", "tools_md", "identity_md"].filter((k) =>
|
||
Object.prototype.hasOwnProperty.call(row, k),
|
||
).length || 5;
|
||
} catch {
|
||
return 5;
|
||
}
|
||
}, [templateAgentText]);
|
||
const templateTopicCount = useMemo(() => {
|
||
try {
|
||
const parsed = JSON.parse(templateTopicText || '{"presets":[]}') as Record<string, unknown>;
|
||
const rows = parsed?.presets;
|
||
if (Array.isArray(rows)) return rows.length;
|
||
return effectiveTopicPresetTemplates.length;
|
||
} catch {
|
||
return effectiveTopicPresetTemplates.length;
|
||
}
|
||
}, [templateTopicText, effectiveTopicPresetTemplates.length]);
|
||
const selectedBotControlState = selectedBot ? controlStateByBot[selectedBot.id] : undefined;
|
||
const selectedBotEnabled = Boolean(selectedBot && selectedBot.enabled !== false);
|
||
const isSending = selectedBot ? Boolean(sendingByBot[selectedBot.id]) : false;
|
||
const canChat = Boolean(selectedBotEnabled && selectedBot && selectedBot.docker_status === 'RUNNING' && !selectedBotControlState);
|
||
const isChatEnabled = Boolean(canChat && !isSending);
|
||
const activeControlCommand = selectedBot ? controlCommandByBot[selectedBot.id] || '' : '';
|
||
const canSendControlCommand = Boolean(selectedBot && canChat && !isVoiceRecording && !isVoiceTranscribing);
|
||
|
||
const conversation = useMemo(() => mergeConversation(messages), [messages]);
|
||
const latestEvent = useMemo(() => [...events].reverse()[0], [events]);
|
||
const workspaceDownloadExtensionSet = useMemo(
|
||
() => new Set(parseWorkspaceDownloadExtensions(workspaceDownloadExtensions)),
|
||
[workspaceDownloadExtensions],
|
||
);
|
||
const workspaceFiles = useMemo(
|
||
() => workspaceEntries.filter((v) => v.type === 'file' && isPreviewableWorkspaceFile(v, workspaceDownloadExtensionSet)),
|
||
[workspaceEntries, workspaceDownloadExtensionSet],
|
||
);
|
||
const workspacePathDisplay = workspaceCurrentPath
|
||
? `/${String(workspaceCurrentPath || '').replace(/^\/+/, '')}`
|
||
: '/';
|
||
const normalizedWorkspaceQuery = workspaceQuery.trim().toLowerCase();
|
||
const filteredWorkspaceEntries = useMemo(() => {
|
||
const sourceEntries = normalizedWorkspaceQuery ? workspaceSearchEntries : workspaceEntries;
|
||
if (!normalizedWorkspaceQuery) return sourceEntries;
|
||
return sourceEntries.filter((entry) => {
|
||
const name = String(entry.name || '').toLowerCase();
|
||
const path = String(entry.path || '').toLowerCase();
|
||
return name.includes(normalizedWorkspaceQuery) || path.includes(normalizedWorkspaceQuery);
|
||
});
|
||
}, [workspaceEntries, workspaceSearchEntries, normalizedWorkspaceQuery]);
|
||
const addableChannelTypes = useMemo(() => {
|
||
const exists = new Set(channels.map((c) => String(c.channel_type).toLowerCase()));
|
||
return optionalChannelTypes.filter((t) => !exists.has(t));
|
||
}, [channels]);
|
||
const envEntries = useMemo(
|
||
() =>
|
||
Object.entries(envParams || {})
|
||
.filter(([k]) => String(k || '').trim().length > 0)
|
||
.sort(([a], [b]) => a.localeCompare(b)),
|
||
[envParams],
|
||
);
|
||
const lastUserTs = useMemo(() => [...conversation].reverse().find((m) => m.role === 'user')?.ts || 0, [conversation]);
|
||
const lastAssistantFinalTs = useMemo(
|
||
() =>
|
||
[...conversation].reverse().find((m) => m.role === 'assistant' && (m.kind || 'final') !== 'progress')?.ts || 0,
|
||
[conversation],
|
||
);
|
||
const botUpdatedAtTs = useMemo(() => parseBotTimestamp(selectedBot?.updated_at), [selectedBot?.updated_at]);
|
||
const latestRuntimeSignalTs = useMemo(() => {
|
||
const latestEventTs = latestEvent?.ts || 0;
|
||
return Math.max(latestEventTs, botUpdatedAtTs, lastUserTs);
|
||
}, [latestEvent?.ts, botUpdatedAtTs, lastUserTs]);
|
||
const hasFreshRuntimeSignal = useMemo(
|
||
() => latestRuntimeSignalTs > 0 && Date.now() - latestRuntimeSignalTs < RUNTIME_STALE_MS,
|
||
[latestRuntimeSignalTs],
|
||
);
|
||
const isThinking = useMemo(() => {
|
||
if (!selectedBot || selectedBot.docker_status !== 'RUNNING') return false;
|
||
if (lastUserTs <= 0) return false;
|
||
if (lastAssistantFinalTs >= lastUserTs) return false;
|
||
return hasFreshRuntimeSignal;
|
||
}, [selectedBot, lastUserTs, lastAssistantFinalTs, hasFreshRuntimeSignal]);
|
||
const displayState = useMemo(() => {
|
||
if (!selectedBot) return 'IDLE';
|
||
const backendState = normalizeRuntimeState(selectedBot.current_state);
|
||
if (selectedBot.docker_status !== 'RUNNING') return backendState;
|
||
|
||
if (hasFreshRuntimeSignal && (backendState === 'TOOL_CALL' || backendState === 'THINKING' || backendState === 'ERROR')) {
|
||
return backendState;
|
||
}
|
||
|
||
if (isThinking) {
|
||
if (latestEvent?.state === 'TOOL_CALL') return 'TOOL_CALL';
|
||
return 'THINKING';
|
||
}
|
||
|
||
if (
|
||
latestEvent &&
|
||
['THINKING', 'TOOL_CALL', 'ERROR'].includes(latestEvent.state) &&
|
||
Date.now() - latestEvent.ts < 15000
|
||
) {
|
||
return latestEvent.state;
|
||
}
|
||
|
||
if (latestEvent?.state === 'ERROR') return 'ERROR';
|
||
return 'IDLE';
|
||
}, [selectedBot, isThinking, latestEvent, hasFreshRuntimeSignal]);
|
||
const runtimeAction = useMemo(() => {
|
||
const action = normalizeAssistantMessageText(selectedBot?.last_action || '').trim();
|
||
if (action) return action;
|
||
const eventText = normalizeAssistantMessageText(latestEvent?.text || '').trim();
|
||
if (eventText) return eventText;
|
||
return '-';
|
||
}, [selectedBot, latestEvent]);
|
||
const resourceBot = useMemo(() => bots.find((b) => b.id === resourceBotId), [bots, resourceBotId]);
|
||
const hasTopicUnread = topicFeedUnreadCount > 0;
|
||
|
||
const hideWorkspaceHoverCard = () => setWorkspaceHoverCard(null);
|
||
|
||
const showWorkspaceHoverCard = (node: WorkspaceNode, anchor: HTMLElement) => {
|
||
const rect = anchor.getBoundingClientRect();
|
||
const panelHeight = 160;
|
||
const panelWidth = 420;
|
||
const gap = 8;
|
||
const viewportPadding = 8;
|
||
const belowSpace = window.innerHeight - rect.bottom;
|
||
const aboveSpace = rect.top;
|
||
const above = belowSpace < panelHeight && aboveSpace > panelHeight;
|
||
const leftRaw = rect.left + 8;
|
||
const left = Math.max(viewportPadding, Math.min(leftRaw, window.innerWidth - panelWidth - viewportPadding));
|
||
const top = above ? rect.top - gap : rect.bottom + gap;
|
||
setWorkspaceHoverCard({ node, top, left, above });
|
||
};
|
||
|
||
const shouldCollapseProgress = (text: string) => {
|
||
const normalized = String(text || '').trim();
|
||
if (!normalized) return false;
|
||
const lines = normalized.split('\n').length;
|
||
return lines > 6 || normalized.length > 520;
|
||
};
|
||
|
||
const conversationNodes = useMemo(
|
||
() =>
|
||
conversation.map((item, idx) => {
|
||
const itemKey = `${item.id || item.ts}-${idx}`;
|
||
const isProgressBubble = item.role !== 'user' && (item.kind || 'final') === 'progress';
|
||
const isUserBubble = item.role === 'user';
|
||
const fullText = String(item.text || '');
|
||
const summaryText = isProgressBubble ? summarizeProgressText(fullText, isZh) : fullText;
|
||
const hasSummary = isProgressBubble && summaryText.trim().length > 0 && summaryText.trim() !== fullText.trim();
|
||
const progressCollapsible = isProgressBubble && (hasSummary || shouldCollapseProgress(fullText));
|
||
const normalizedUserText = isUserBubble ? normalizeUserMessageText(fullText) : '';
|
||
const userLineCount = isUserBubble ? normalizedUserText.split('\n').length : 0;
|
||
const userCollapsible = isUserBubble && userLineCount > 5;
|
||
const collapsible = isProgressBubble ? progressCollapsible : userCollapsible;
|
||
const expanded = isProgressBubble ? Boolean(expandedProgressByKey[itemKey]) : Boolean(expandedUserByKey[itemKey]);
|
||
const displayText = isProgressBubble && !expanded ? summaryText : fullText;
|
||
const currentDayKey = new Date(item.ts).toDateString();
|
||
const prevDayKey = idx > 0 ? new Date(conversation[idx - 1].ts).toDateString() : '';
|
||
const showDateDivider = idx === 0 || currentDayKey !== prevDayKey;
|
||
return (
|
||
<div
|
||
key={itemKey}
|
||
data-chat-message-id={item.id ? String(item.id) : undefined}
|
||
>
|
||
{showDateDivider ? (
|
||
<div className="ops-chat-date-divider" aria-label={formatConversationDate(item.ts, isZh)}>
|
||
<span>{formatConversationDate(item.ts, isZh)}</span>
|
||
</div>
|
||
) : null}
|
||
<div className={`ops-chat-row ${item.role === 'user' ? 'is-user' : 'is-assistant'}`}>
|
||
<div className={`ops-chat-item ${item.role === 'user' ? 'is-user' : 'is-assistant'}`}>
|
||
{item.role !== 'user' && (
|
||
<div className="ops-avatar bot" title="Nanobot">
|
||
<img src={nanobotLogo} alt="Nanobot" />
|
||
</div>
|
||
)}
|
||
{item.role === 'user' ? (
|
||
<div className="ops-chat-hover-actions ops-chat-hover-actions-user">
|
||
<LucentIconButton
|
||
className="ops-chat-inline-action"
|
||
onClick={() => editUserPrompt(item.text)}
|
||
tooltip={t.editPrompt}
|
||
aria-label={t.editPrompt}
|
||
>
|
||
<Pencil size={13} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-chat-inline-action"
|
||
onClick={() => void copyUserPrompt(item.text)}
|
||
tooltip={t.copyPrompt}
|
||
aria-label={t.copyPrompt}
|
||
>
|
||
<Copy size={13} />
|
||
</LucentIconButton>
|
||
</div>
|
||
) : null}
|
||
|
||
<div className={`ops-chat-bubble ${item.role === 'user' ? 'user' : 'assistant'} ${(item.kind || 'final') === 'progress' ? 'progress' : ''}`}>
|
||
<div className="ops-chat-meta">
|
||
<span>{item.role === 'user' ? t.you : 'Nanobot'}</span>
|
||
<div className="ops-chat-meta-right">
|
||
<span className="mono">{formatClock(item.ts)}</span>
|
||
{collapsible ? (
|
||
<LucentIconButton
|
||
className="ops-chat-expand-icon-btn"
|
||
onClick={() => {
|
||
if (isProgressBubble) {
|
||
setExpandedProgressByKey((prev) => ({
|
||
...prev,
|
||
[itemKey]: !prev[itemKey],
|
||
}));
|
||
return;
|
||
}
|
||
setExpandedUserByKey((prev) => ({
|
||
...prev,
|
||
[itemKey]: !prev[itemKey],
|
||
}));
|
||
}}
|
||
tooltip={expanded ? (isZh ? '收起' : 'Collapse') : (isZh ? '展开' : 'Expand')}
|
||
aria-label={expanded ? (isZh ? '收起' : 'Collapse') : (isZh ? '展开' : 'Expand')}
|
||
>
|
||
{expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||
</LucentIconButton>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div className={`ops-chat-text ${collapsible && !expanded ? (isUserBubble ? 'is-collapsed-user' : 'is-collapsed') : ''}`}>
|
||
{item.text ? (
|
||
item.role === 'user' ? (
|
||
<>
|
||
{item.quoted_reply ? (
|
||
<div className="ops-user-quoted-reply">
|
||
<div className="ops-user-quoted-label">{t.quotedReplyLabel}</div>
|
||
<div className="ops-user-quoted-text">{normalizeAssistantMessageText(item.quoted_reply)}</div>
|
||
</div>
|
||
) : null}
|
||
<div className="whitespace-pre-wrap">{normalizeUserMessageText(displayText)}</div>
|
||
</>
|
||
) : (
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, [rehypeSanitize, MARKDOWN_SANITIZE_SCHEMA]]}
|
||
components={markdownComponents}
|
||
>
|
||
{decorateWorkspacePathsForMarkdown(displayText)}
|
||
</ReactMarkdown>
|
||
)
|
||
) : null}
|
||
{(item.attachments || []).length > 0 ? (
|
||
<div className="ops-chat-attachments">
|
||
{(item.attachments || []).map((rawPath) => {
|
||
const filePath = normalizeDashboardAttachmentPath(rawPath);
|
||
const fileAction = workspaceFileAction(filePath, workspaceDownloadExtensionSet);
|
||
const filename = filePath.split('/').pop() || filePath;
|
||
return (
|
||
<a
|
||
key={`${item.ts}-${filePath}`}
|
||
className="ops-attach-link mono"
|
||
href="#"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
void openWorkspacePathFromChat(filePath);
|
||
}}
|
||
title={fileAction === 'download' ? t.download : fileAction === 'preview' ? t.previewTitle : t.fileNotPreviewable}
|
||
>
|
||
{fileAction === 'download' ? (
|
||
<Download size={12} className="ops-attach-link-icon" />
|
||
) : fileAction === 'preview' ? (
|
||
<Eye size={12} className="ops-attach-link-icon" />
|
||
) : (
|
||
<FileText size={12} className="ops-attach-link-icon" />
|
||
)}
|
||
<span className="ops-attach-link-name">{filename}</span>
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
) : null}
|
||
{item.role === 'assistant' && !isProgressBubble ? (
|
||
<div className="ops-chat-reply-actions">
|
||
<LucentIconButton
|
||
className={`ops-chat-inline-action ${item.feedback === 'up' ? 'active-up' : ''}`}
|
||
onClick={() => void submitAssistantFeedback(item, 'up')}
|
||
disabled={Boolean(item.id && feedbackSavingByMessageId[item.id])}
|
||
tooltip={t.goodReply}
|
||
aria-label={t.goodReply}
|
||
>
|
||
<ThumbsUp size={13} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className={`ops-chat-inline-action ${item.feedback === 'down' ? 'active-down' : ''}`}
|
||
onClick={() => void submitAssistantFeedback(item, 'down')}
|
||
disabled={Boolean(item.id && feedbackSavingByMessageId[item.id])}
|
||
tooltip={t.badReply}
|
||
aria-label={t.badReply}
|
||
>
|
||
<ThumbsDown size={13} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-chat-inline-action"
|
||
onClick={() => quoteAssistantReply(item)}
|
||
tooltip={t.quoteReply}
|
||
aria-label={t.quoteReply}
|
||
>
|
||
<Reply size={13} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-chat-inline-action"
|
||
onClick={() => void copyAssistantReply(item.text)}
|
||
tooltip={t.copyReply}
|
||
aria-label={t.copyReply}
|
||
>
|
||
<Copy size={13} />
|
||
</LucentIconButton>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{item.role === 'user' && (
|
||
<div className="ops-avatar user" title={t.user}>
|
||
<UserRound size={18} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}),
|
||
[
|
||
conversation,
|
||
expandedProgressByKey,
|
||
expandedUserByKey,
|
||
feedbackSavingByMessageId,
|
||
isZh,
|
||
selectedBotId,
|
||
t.badReply,
|
||
t.copyPrompt,
|
||
t.copyReply,
|
||
t.quoteReply,
|
||
t.quotedReplyLabel,
|
||
t.goodReply,
|
||
t.user,
|
||
t.you,
|
||
],
|
||
);
|
||
|
||
useEffect(() => {
|
||
setBotListPage(1);
|
||
}, [normalizedBotListQuery]);
|
||
|
||
useEffect(() => {
|
||
setBotListPage((prev) => Math.min(Math.max(prev, 1), botListTotalPages));
|
||
}, [botListTotalPages]);
|
||
|
||
useEffect(() => {
|
||
const forced = String(forcedBotId || '').trim();
|
||
if (forced) {
|
||
if (activeBots[forced]) {
|
||
if (selectedBotId !== forced) setSelectedBotId(forced);
|
||
} else if (selectedBotId) {
|
||
setSelectedBotId('');
|
||
}
|
||
return;
|
||
}
|
||
if (compactListFirstMode) {
|
||
if (selectedBotId && !activeBots[selectedBotId]) {
|
||
setSelectedBotId('');
|
||
}
|
||
return;
|
||
}
|
||
if (!selectedBotId && bots.length > 0) setSelectedBotId(bots[0].id);
|
||
if (selectedBotId && !activeBots[selectedBotId] && bots.length > 0) setSelectedBotId(bots[0].id);
|
||
}, [bots, selectedBotId, activeBots, forcedBotId, compactListFirstMode]);
|
||
|
||
useEffect(() => {
|
||
setComposerDraftHydrated(false);
|
||
if (!selectedBotId) {
|
||
setCommand('');
|
||
setPendingAttachments([]);
|
||
setComposerDraftHydrated(true);
|
||
return;
|
||
}
|
||
const draft = loadComposerDraft(selectedBotId);
|
||
setCommand(draft?.command || '');
|
||
setPendingAttachments(draft?.attachments || []);
|
||
setComposerDraftHydrated(true);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId || !composerDraftHydrated) return;
|
||
persistComposerDraft(selectedBotId, command, pendingAttachments);
|
||
}, [selectedBotId, composerDraftHydrated, command, pendingAttachments]);
|
||
|
||
useEffect(() => {
|
||
setControlCommandPanelOpen(false);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
clearVoiceTimer();
|
||
try {
|
||
if (voiceRecorderRef.current && voiceRecorderRef.current.state !== 'inactive') {
|
||
voiceRecorderRef.current.stop();
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
releaseVoiceStream();
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!isVoiceRecording && !isVoiceTranscribing) {
|
||
setVoiceCountdown(voiceMaxSeconds);
|
||
}
|
||
}, [voiceMaxSeconds, isVoiceRecording, isVoiceTranscribing]);
|
||
|
||
useEffect(() => {
|
||
const hasDraft = Boolean(String(command || '').trim()) || pendingAttachments.length > 0 || Boolean(quotedReply);
|
||
if (!hasDraft && !isUploadingAttachments && !isVoiceRecording && !isVoiceTranscribing) return;
|
||
const onBeforeUnload = (event: BeforeUnloadEvent) => {
|
||
event.preventDefault();
|
||
event.returnValue = '';
|
||
};
|
||
window.addEventListener('beforeunload', onBeforeUnload);
|
||
return () => window.removeEventListener('beforeunload', onBeforeUnload);
|
||
}, [command, pendingAttachments.length, quotedReply, isUploadingAttachments, isVoiceRecording, isVoiceTranscribing]);
|
||
|
||
const syncChatScrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
|
||
const box = chatScrollRef.current;
|
||
if (!box) return;
|
||
box.scrollTo({ top: box.scrollHeight, behavior });
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
chatAutoFollowRef.current = true;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
}, [selectedBotId, syncChatScrollToBottom]);
|
||
|
||
useEffect(() => {
|
||
if (!chatAutoFollowRef.current) return;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
}, [conversation.length, syncChatScrollToBottom]);
|
||
|
||
useEffect(() => {
|
||
setQuotedReply(null);
|
||
if (isVoiceRecording) {
|
||
stopVoiceRecording();
|
||
}
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
const onPointerDown = (event: MouseEvent) => {
|
||
if (runtimeMenuRef.current && !runtimeMenuRef.current.contains(event.target as Node)) {
|
||
setRuntimeMenuOpen(false);
|
||
}
|
||
if (botListMenuRef.current && !botListMenuRef.current.contains(event.target as Node)) {
|
||
setBotListMenuOpen(false);
|
||
}
|
||
if (controlCommandPanelRef.current && !controlCommandPanelRef.current.contains(event.target as Node)) {
|
||
setChatDatePickerOpen(false);
|
||
}
|
||
if (channelCreateMenuRef.current && !channelCreateMenuRef.current.contains(event.target as Node)) {
|
||
setChannelCreateMenuOpen(false);
|
||
}
|
||
if (topicPresetMenuRef.current && !topicPresetMenuRef.current.contains(event.target as Node)) {
|
||
setTopicPresetMenuOpen(false);
|
||
}
|
||
if (skillAddMenuRef.current && !skillAddMenuRef.current.contains(event.target as Node)) {
|
||
setSkillAddMenuOpen(false);
|
||
}
|
||
};
|
||
const onKeyDown = (event: globalThis.KeyboardEvent) => {
|
||
if (event.key !== 'Escape') return;
|
||
setChatDatePickerOpen(false);
|
||
setChannelCreateMenuOpen(false);
|
||
setTopicPresetMenuOpen(false);
|
||
setSkillAddMenuOpen(false);
|
||
};
|
||
document.addEventListener('mousedown', onPointerDown);
|
||
document.addEventListener('keydown', onKeyDown);
|
||
return () => {
|
||
document.removeEventListener('mousedown', onPointerDown);
|
||
document.removeEventListener('keydown', onKeyDown);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setRuntimeMenuOpen(false);
|
||
setBotListMenuOpen(false);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
setExpandedProgressByKey({});
|
||
setExpandedUserByKey({});
|
||
setShowRuntimeActionModal(false);
|
||
setWorkspaceHoverCard(null);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId) return;
|
||
let alive = true;
|
||
const loadBotDetail = async () => {
|
||
try {
|
||
const res = await axios.get(`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}`);
|
||
if (alive) mergeBot(res.data);
|
||
} catch (error) {
|
||
console.error(`Failed to fetch bot detail for ${selectedBotId}`, error);
|
||
}
|
||
};
|
||
void loadBotDetail();
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, [selectedBotId, mergeBot]);
|
||
|
||
useEffect(() => {
|
||
if (!workspaceHoverCard) return;
|
||
const close = () => setWorkspaceHoverCard(null);
|
||
window.addEventListener('scroll', close, true);
|
||
window.addEventListener('resize', close);
|
||
return () => {
|
||
window.removeEventListener('scroll', close, true);
|
||
window.removeEventListener('resize', close);
|
||
};
|
||
}, [workspaceHoverCard]);
|
||
|
||
useEffect(() => {
|
||
let alive = true;
|
||
const loadSystemDefaults = async () => {
|
||
try {
|
||
const res = await axios.get<SystemDefaultsResponse>(`${APP_ENDPOINTS.apiBase}/system/defaults`);
|
||
if (!alive) return;
|
||
const configured = Number(res.data?.limits?.upload_max_mb);
|
||
if (Number.isFinite(configured) && configured > 0) {
|
||
setUploadMaxMb(Math.max(1, Math.floor(configured)));
|
||
}
|
||
const configuredPageSize = normalizePlatformPageSize(
|
||
res.data?.chat?.page_size,
|
||
readCachedPlatformPageSize(10),
|
||
);
|
||
writeCachedPlatformPageSize(configuredPageSize);
|
||
setBotListPageSize(configuredPageSize);
|
||
setAllowedAttachmentExtensions(
|
||
parseAllowedAttachmentExtensions(res.data?.workspace?.allowed_attachment_extensions),
|
||
);
|
||
setWorkspaceDownloadExtensions(
|
||
parseWorkspaceDownloadExtensions(
|
||
res.data?.workspace?.download_extensions,
|
||
DEFAULT_WORKSPACE_DOWNLOAD_EXTENSIONS,
|
||
),
|
||
);
|
||
setTopicPresetTemplates(parseTopicPresets(res.data?.topic_presets));
|
||
const speechEnabledRaw = res.data?.speech?.enabled;
|
||
if (typeof speechEnabledRaw === 'boolean') {
|
||
setSpeechEnabled(speechEnabledRaw);
|
||
}
|
||
const speechSeconds = Number(res.data?.speech?.max_audio_seconds);
|
||
if (Number.isFinite(speechSeconds) && speechSeconds > 0) {
|
||
const normalized = Math.max(5, Math.floor(speechSeconds));
|
||
setVoiceMaxSeconds(normalized);
|
||
setVoiceCountdown(normalized);
|
||
}
|
||
const pullPageSize = Number(res.data?.chat?.pull_page_size);
|
||
if (Number.isFinite(pullPageSize) && pullPageSize > 0) {
|
||
setChatPullPageSize(Math.max(10, Math.min(500, Math.floor(pullPageSize))));
|
||
}
|
||
} catch {
|
||
// keep default limit
|
||
} finally {
|
||
if (alive) {
|
||
setBotListPageSizeReady(true);
|
||
}
|
||
}
|
||
};
|
||
void loadSystemDefaults();
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!compactMode) {
|
||
setIsCompactMobile(false);
|
||
setCompactPanelTab('chat');
|
||
return;
|
||
}
|
||
const media = window.matchMedia('(max-width: 980px)');
|
||
const apply = () => setIsCompactMobile(media.matches);
|
||
apply();
|
||
media.addEventListener('change', apply);
|
||
return () => media.removeEventListener('change', apply);
|
||
}, [compactMode]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId) return;
|
||
if (showBaseModal || showParamModal || showAgentModal) return;
|
||
applyEditFormFromBot(selectedBot);
|
||
}, [
|
||
selectedBotId,
|
||
selectedBot?.id,
|
||
selectedBot?.updated_at,
|
||
showBaseModal,
|
||
showParamModal,
|
||
showAgentModal,
|
||
applyEditFormFromBot,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId || !selectedBot) {
|
||
setGlobalDelivery({ sendProgress: false, sendToolHints: false });
|
||
return;
|
||
}
|
||
setGlobalDelivery({
|
||
sendProgress: Boolean(selectedBot.send_progress),
|
||
sendToolHints: Boolean(selectedBot.send_tool_hints),
|
||
});
|
||
}, [selectedBotId, selectedBot?.send_progress, selectedBot?.send_tool_hints]);
|
||
|
||
const loadImageOptions = async () => {
|
||
const [imagesRes] = await Promise.allSettled([axios.get<NanobotImage[]>(`${APP_ENDPOINTS.apiBase}/images`)]);
|
||
if (imagesRes.status === 'fulfilled') {
|
||
setAvailableImages(Array.isArray(imagesRes.value.data) ? imagesRes.value.data : []);
|
||
} else {
|
||
setAvailableImages([]);
|
||
}
|
||
};
|
||
|
||
const refresh = async () => {
|
||
const forced = String(forcedBotId || '').trim();
|
||
if (forced) {
|
||
const targetId = String(selectedBotId || forced).trim() || forced;
|
||
const botRes = await axios.get(`${APP_ENDPOINTS.apiBase}/bots/${encodeURIComponent(targetId)}`);
|
||
setBots(botRes.data ? [botRes.data] : []);
|
||
await loadImageOptions();
|
||
return;
|
||
}
|
||
|
||
const botsRes = await axios.get(`${APP_ENDPOINTS.apiBase}/bots`);
|
||
setBots(botsRes.data);
|
||
await loadImageOptions();
|
||
};
|
||
|
||
const ensureSelectedBotDetail = useCallback(async () => {
|
||
if (!selectedBotId) return selectedBot;
|
||
try {
|
||
const res = await axios.get(`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}`);
|
||
mergeBot(res.data);
|
||
return res.data;
|
||
} catch {
|
||
return selectedBot;
|
||
}
|
||
}, [selectedBotId, selectedBot, mergeBot]);
|
||
|
||
const loadResourceSnapshot = async (botId: string) => {
|
||
if (!botId) return;
|
||
setResourceLoading(true);
|
||
setResourceError('');
|
||
try {
|
||
const res = await axios.get<BotResourceSnapshot>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/resources`);
|
||
setResourceSnapshot(res.data);
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || (isZh ? '读取资源监控失败。' : 'Failed to load resource metrics.');
|
||
setResourceError(String(msg));
|
||
} finally {
|
||
setResourceLoading(false);
|
||
}
|
||
};
|
||
|
||
const openResourceMonitor = (botId: string) => {
|
||
setResourceBotId(botId);
|
||
setShowResourceModal(true);
|
||
void loadResourceSnapshot(botId);
|
||
};
|
||
|
||
useEffect(() => {
|
||
void loadImageOptions();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!showBaseModal) return;
|
||
void loadImageOptions();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [showBaseModal]);
|
||
|
||
useEffect(() => {
|
||
if (!showResourceModal || !resourceBotId) return;
|
||
let stopped = false;
|
||
const tick = async () => {
|
||
if (stopped) return;
|
||
await loadResourceSnapshot(resourceBotId);
|
||
};
|
||
const timer = window.setInterval(() => {
|
||
void tick();
|
||
}, 2000);
|
||
return () => {
|
||
stopped = true;
|
||
window.clearInterval(timer);
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [showResourceModal, resourceBotId]);
|
||
|
||
const openWorkspaceFilePreview = async (path: string) => {
|
||
if (!selectedBotId || !path) return;
|
||
const normalizedPath = String(path || '').trim();
|
||
setWorkspacePreviewFullscreen(false);
|
||
if (workspaceFileAction(normalizedPath, workspaceDownloadExtensionSet) === 'download') {
|
||
triggerWorkspaceFileDownload(normalizedPath);
|
||
return;
|
||
}
|
||
if (isImagePath(normalizedPath)) {
|
||
const fileExt = (normalizedPath.split('.').pop() || '').toLowerCase();
|
||
setWorkspacePreview({
|
||
path: normalizedPath,
|
||
content: '',
|
||
truncated: false,
|
||
ext: fileExt ? `.${fileExt}` : '',
|
||
isMarkdown: false,
|
||
isImage: true,
|
||
isHtml: false,
|
||
isVideo: false,
|
||
isAudio: false,
|
||
});
|
||
return;
|
||
}
|
||
if (isHtmlPath(normalizedPath)) {
|
||
const fileExt = (normalizedPath.split('.').pop() || '').toLowerCase();
|
||
setWorkspacePreview({
|
||
path: normalizedPath,
|
||
content: '',
|
||
truncated: false,
|
||
ext: fileExt ? `.${fileExt}` : '',
|
||
isMarkdown: false,
|
||
isImage: false,
|
||
isHtml: true,
|
||
isVideo: false,
|
||
isAudio: false,
|
||
});
|
||
return;
|
||
}
|
||
if (isVideoPath(normalizedPath)) {
|
||
const fileExt = (normalizedPath.split('.').pop() || '').toLowerCase();
|
||
setWorkspacePreview({
|
||
path: normalizedPath,
|
||
content: '',
|
||
truncated: false,
|
||
ext: fileExt ? `.${fileExt}` : '',
|
||
isMarkdown: false,
|
||
isImage: false,
|
||
isHtml: false,
|
||
isVideo: true,
|
||
isAudio: false,
|
||
});
|
||
return;
|
||
}
|
||
if (isAudioPath(normalizedPath)) {
|
||
const fileExt = (normalizedPath.split('.').pop() || '').toLowerCase();
|
||
setWorkspacePreview({
|
||
path: normalizedPath,
|
||
content: '',
|
||
truncated: false,
|
||
ext: fileExt ? `.${fileExt}` : '',
|
||
isMarkdown: false,
|
||
isImage: false,
|
||
isHtml: false,
|
||
isVideo: false,
|
||
isAudio: true,
|
||
});
|
||
return;
|
||
}
|
||
setWorkspaceFileLoading(true);
|
||
try {
|
||
const res = await axios.get<WorkspaceFileResponse>(`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}/workspace/file`, {
|
||
params: { path, max_bytes: 400000 },
|
||
});
|
||
const filePath = res.data.path || path;
|
||
const textExt = (filePath.split('.').pop() || '').toLowerCase();
|
||
let content = res.data.content || '';
|
||
if (textExt === 'json') {
|
||
try {
|
||
content = JSON.stringify(JSON.parse(content), null, 2);
|
||
} catch {
|
||
// Keep original content when JSON is not strictly parseable.
|
||
}
|
||
}
|
||
setWorkspacePreview({
|
||
path: filePath,
|
||
content,
|
||
truncated: Boolean(res.data.truncated),
|
||
ext: textExt ? `.${textExt}` : '',
|
||
isMarkdown: textExt === 'md' || Boolean(res.data.is_markdown),
|
||
isImage: false,
|
||
isHtml: false,
|
||
isVideo: false,
|
||
isAudio: false,
|
||
});
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.fileReadFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setWorkspaceFileLoading(false);
|
||
}
|
||
};
|
||
const saveWorkspacePreviewMarkdown = async () => {
|
||
if (!selectedBotId || !workspacePreview?.isMarkdown) return;
|
||
if (workspacePreview.truncated) {
|
||
notify(t.fileEditDisabled, { tone: 'warning' });
|
||
return;
|
||
}
|
||
setWorkspacePreviewSaving(true);
|
||
try {
|
||
const res = await axios.put<WorkspaceFileResponse>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}/workspace/file`,
|
||
{ content: workspacePreviewDraft },
|
||
{ params: { path: workspacePreview.path } },
|
||
);
|
||
const filePath = res.data.path || workspacePreview.path;
|
||
const textExt = (filePath.split('.').pop() || '').toLowerCase();
|
||
const content = res.data.content || workspacePreviewDraft;
|
||
setWorkspacePreview({
|
||
...workspacePreview,
|
||
path: filePath,
|
||
content,
|
||
truncated: false,
|
||
ext: textExt ? `.${textExt}` : '',
|
||
isMarkdown: textExt === 'md' || textExt === 'markdown' || Boolean(res.data.is_markdown),
|
||
});
|
||
setWorkspacePreviewEditing(false);
|
||
notify(t.fileSaved, { tone: 'success' });
|
||
void loadWorkspaceTree(selectedBotId, workspaceCurrentPath);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.fileSaveFail, { tone: 'error' });
|
||
} finally {
|
||
setWorkspacePreviewSaving(false);
|
||
}
|
||
};
|
||
|
||
const loadWorkspaceTree = async (botId: string, path: string = '') => {
|
||
if (!botId) return;
|
||
setWorkspaceLoading(true);
|
||
setWorkspaceError('');
|
||
try {
|
||
const res = await axios.get<WorkspaceTreeResponse>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/workspace/tree`, {
|
||
params: { path },
|
||
});
|
||
const entries = Array.isArray(res.data?.entries) ? res.data.entries : [];
|
||
setWorkspaceEntries(entries);
|
||
setWorkspaceSearchEntries([]);
|
||
setWorkspaceCurrentPath(res.data?.cwd || '');
|
||
setWorkspaceParentPath(res.data?.parent ?? null);
|
||
} catch (error: any) {
|
||
setWorkspaceEntries([]);
|
||
setWorkspaceSearchEntries([]);
|
||
setWorkspaceCurrentPath('');
|
||
setWorkspaceParentPath(null);
|
||
setWorkspaceError(error?.response?.data?.detail || t.workspaceLoadFail);
|
||
} finally {
|
||
setWorkspaceLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadWorkspaceSearchEntries = async (botId: string, path: string = '') => {
|
||
if (!botId) return;
|
||
const q = String(workspaceQuery || '').trim();
|
||
if (!q) {
|
||
setWorkspaceSearchEntries([]);
|
||
setWorkspaceSearchLoading(false);
|
||
return;
|
||
}
|
||
setWorkspaceSearchLoading(true);
|
||
try {
|
||
const res = await axios.get<WorkspaceTreeResponse>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/workspace/tree`, {
|
||
params: { path, recursive: true },
|
||
});
|
||
const entries = Array.isArray(res.data?.entries) ? res.data.entries : [];
|
||
setWorkspaceSearchEntries(entries);
|
||
} catch {
|
||
setWorkspaceSearchEntries([]);
|
||
} finally {
|
||
setWorkspaceSearchLoading(false);
|
||
}
|
||
};
|
||
|
||
const normalizeTopicKeyInput = (raw: string) =>
|
||
String(raw || '')
|
||
.trim()
|
||
.toLowerCase()
|
||
.replace(/\s+/g, '_')
|
||
.replace(/[^a-z0-9_.-]/g, '');
|
||
|
||
const createEmptyChannelDraft = (channelType: ChannelType = 'feishu'): BotChannel => ({
|
||
id: 'draft-channel',
|
||
bot_id: selectedBot?.id || '',
|
||
channel_type: channelType,
|
||
external_app_id: '',
|
||
app_secret: '',
|
||
internal_port: 8080,
|
||
is_active: true,
|
||
extra_config: {},
|
||
});
|
||
|
||
const channelDraftUiKey = (channel: Pick<BotChannel, 'id' | 'channel_type'>, fallbackIndex: number) => {
|
||
const id = String(channel.id || '').trim();
|
||
if (id) return id;
|
||
const type = String(channel.channel_type || '').trim().toLowerCase();
|
||
return type || `channel-${fallbackIndex}`;
|
||
};
|
||
|
||
const resetNewChannelDraft = (channelType: ChannelType = 'feishu') => {
|
||
setNewChannelDraft(createEmptyChannelDraft(channelType));
|
||
};
|
||
|
||
const resetNewTopicDraft = () => {
|
||
setNewTopicKey('');
|
||
setNewTopicName('');
|
||
setNewTopicDescription('');
|
||
setNewTopicPurpose('');
|
||
setNewTopicIncludeWhen('');
|
||
setNewTopicExcludeWhen('');
|
||
setNewTopicExamplesPositive('');
|
||
setNewTopicExamplesNegative('');
|
||
setNewTopicPriority('50');
|
||
setNewTopicAdvancedOpen(false);
|
||
setNewTopicSource('');
|
||
};
|
||
|
||
const resetNewMcpDraft = () => {
|
||
setNewMcpDraft({
|
||
name: '',
|
||
type: 'streamableHttp',
|
||
url: '',
|
||
botId: '',
|
||
botSecret: '',
|
||
toolTimeout: '60',
|
||
headers: {},
|
||
locked: false,
|
||
originName: '',
|
||
});
|
||
};
|
||
|
||
const mapMcpResponseToDrafts = (payload?: MCPConfigResponse | null): MCPServerDraft[] => {
|
||
const rows = payload?.mcp_servers && typeof payload.mcp_servers === 'object' ? payload.mcp_servers : {};
|
||
return Object.entries(rows).map(([name, cfg]) => {
|
||
const rawHeaders = cfg?.headers && typeof cfg.headers === 'object' ? cfg.headers : {};
|
||
const headers: Record<string, string> = {};
|
||
Object.entries(rawHeaders).forEach(([k, v]) => {
|
||
const key = String(k || '').trim();
|
||
if (!key) return;
|
||
headers[key] = String(v ?? '').trim();
|
||
});
|
||
const headerEntries = Object.entries(headers);
|
||
const botIdHeader = headerEntries.find(([k]) => String(k || '').trim().toLowerCase() === 'x-bot-id');
|
||
const botSecretHeader = headerEntries.find(([k]) => String(k || '').trim().toLowerCase() === 'x-bot-secret');
|
||
return {
|
||
name: String(name || '').trim(),
|
||
type: String(cfg?.type || 'streamableHttp') === 'sse' ? 'sse' : 'streamableHttp',
|
||
url: String(cfg?.url || '').trim(),
|
||
botId: String(botIdHeader?.[1] || '').trim(),
|
||
botSecret: String(botSecretHeader?.[1] || '').trim(),
|
||
toolTimeout: String(Number(cfg?.toolTimeout || 60) || 60),
|
||
headers,
|
||
locked: Boolean(cfg?.locked),
|
||
originName: String(name || '').trim(),
|
||
};
|
||
});
|
||
};
|
||
|
||
const applyMcpDrafts = (drafts: MCPServerDraft[]) => {
|
||
setMcpServers(drafts);
|
||
setPersistedMcpServers(drafts);
|
||
setExpandedMcpByKey((prev) => {
|
||
const next: Record<string, boolean> = {};
|
||
drafts.forEach((row, idx) => {
|
||
const key = mcpDraftUiKey(row, idx);
|
||
next[key] = typeof prev[key] === 'boolean' ? prev[key] : idx === 0;
|
||
});
|
||
return next;
|
||
});
|
||
return drafts;
|
||
};
|
||
|
||
const openChannelModal = (botId: string) => {
|
||
if (!botId) return;
|
||
setExpandedChannelByKey({});
|
||
setChannelCreateMenuOpen(false);
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
void loadChannels(botId);
|
||
setShowChannelModal(true);
|
||
};
|
||
|
||
const openTopicModal = (botId: string) => {
|
||
if (!botId) return;
|
||
setExpandedTopicByKey({});
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicPanelOpen(false);
|
||
resetNewTopicDraft();
|
||
void loadTopics(botId);
|
||
setShowTopicModal(true);
|
||
};
|
||
|
||
const openMcpModal = async (botId: string) => {
|
||
if (!botId) return;
|
||
setExpandedMcpByKey({});
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
await loadBotMcpConfig(botId);
|
||
setShowMcpModal(true);
|
||
};
|
||
|
||
const beginTopicCreate = (presetId: string) => {
|
||
setExpandedTopicByKey({});
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicPanelOpen(true);
|
||
setNewTopicSource(presetId);
|
||
if (presetId === 'blank') {
|
||
resetNewTopicDraft();
|
||
setNewTopicPanelOpen(true);
|
||
setNewTopicSource('blank');
|
||
return;
|
||
}
|
||
applyTopicPreset(presetId, true);
|
||
};
|
||
|
||
const beginChannelCreate = (channelType: ChannelType) => {
|
||
setExpandedChannelByKey({});
|
||
setChannelCreateMenuOpen(false);
|
||
setNewChannelPanelOpen(true);
|
||
resetNewChannelDraft(channelType);
|
||
};
|
||
|
||
const beginMcpCreate = () => {
|
||
setExpandedMcpByKey({});
|
||
setNewMcpPanelOpen(true);
|
||
resetNewMcpDraft();
|
||
};
|
||
|
||
const applyTopicPreset = (presetId: string, silent: boolean = false) => {
|
||
const preset = effectiveTopicPresetTemplates.find((row) => row.id === presetId);
|
||
if (!preset) return;
|
||
const localeKey: 'zh-cn' | 'en' = isZh ? 'zh-cn' : 'en';
|
||
setNewTopicKey(String(preset.topic_key || '').trim());
|
||
setNewTopicName(resolvePresetText(preset.name, localeKey));
|
||
setNewTopicDescription(resolvePresetText(preset.description, localeKey));
|
||
setNewTopicPurpose(resolvePresetText(preset.routing_purpose, localeKey));
|
||
setNewTopicIncludeWhen(normalizePresetTextList(preset.routing_include_when).join('\n'));
|
||
setNewTopicExcludeWhen(normalizePresetTextList(preset.routing_exclude_when).join('\n'));
|
||
setNewTopicExamplesPositive(normalizePresetTextList(preset.routing_examples_positive).join('\n'));
|
||
setNewTopicExamplesNegative(normalizePresetTextList(preset.routing_examples_negative).join('\n'));
|
||
setNewTopicPriority(String(Number.isFinite(Number(preset.routing_priority)) ? Number(preset.routing_priority) : 50));
|
||
setNewTopicAdvancedOpen(true);
|
||
if (!silent) {
|
||
notify(isZh ? '主题预设已填充。' : 'Topic preset applied.', { tone: 'success' });
|
||
}
|
||
};
|
||
|
||
const topicDraftUiKey = (topic: Pick<BotTopic, 'topic_key' | 'id'>, fallbackIndex: number) => {
|
||
const key = String(topic.topic_key || topic.id || '').trim();
|
||
return key || `topic-${fallbackIndex}`;
|
||
};
|
||
|
||
const mcpDraftUiKey = (row: Pick<MCPServerDraft, 'name' | 'url'>, fallbackIndex: number) => {
|
||
void row;
|
||
return `mcp-${fallbackIndex}`;
|
||
};
|
||
|
||
const normalizeRoutingTextList = (raw: string): string[] =>
|
||
String(raw || '')
|
||
.split('\n')
|
||
.map((v) => String(v || '').trim())
|
||
.filter(Boolean);
|
||
|
||
const normalizeRoutingPriority = (raw: string): number => {
|
||
const n = Number(raw);
|
||
if (!Number.isFinite(n)) return 50;
|
||
return Math.max(0, Math.min(100, Math.round(n)));
|
||
};
|
||
|
||
const topicRoutingFromRaw = (routing?: Record<string, unknown>) => {
|
||
const row = routing && typeof routing === 'object' ? routing : {};
|
||
const examplesRaw = row.examples && typeof row.examples === 'object' ? row.examples as Record<string, unknown> : {};
|
||
const includeWhen = Array.isArray(row.include_when) ? row.include_when : [];
|
||
const excludeWhen = Array.isArray(row.exclude_when) ? row.exclude_when : [];
|
||
const positive = Array.isArray(examplesRaw.positive) ? examplesRaw.positive : [];
|
||
const negative = Array.isArray(examplesRaw.negative) ? examplesRaw.negative : [];
|
||
const priority = Number(row.priority);
|
||
return {
|
||
routing_purpose: String(row.purpose || ''),
|
||
routing_include_when: includeWhen.map((v) => String(v || '').trim()).filter(Boolean).join('\n'),
|
||
routing_exclude_when: excludeWhen.map((v) => String(v || '').trim()).filter(Boolean).join('\n'),
|
||
routing_examples_positive: positive.map((v) => String(v || '').trim()).filter(Boolean).join('\n'),
|
||
routing_examples_negative: negative.map((v) => String(v || '').trim()).filter(Boolean).join('\n'),
|
||
routing_priority: String(Number.isFinite(priority) ? Math.max(0, Math.min(100, Math.round(priority))) : 50),
|
||
};
|
||
};
|
||
|
||
const buildTopicRoutingPayload = (topic: {
|
||
routing?: Record<string, unknown>;
|
||
routing_purpose?: string;
|
||
routing_include_when?: string;
|
||
routing_exclude_when?: string;
|
||
routing_examples_positive?: string;
|
||
routing_examples_negative?: string;
|
||
routing_priority?: string;
|
||
}): Record<string, unknown> => {
|
||
const base = topic.routing && typeof topic.routing === 'object' ? { ...topic.routing } : {};
|
||
return {
|
||
...base,
|
||
purpose: String(topic.routing_purpose || '').trim(),
|
||
include_when: normalizeRoutingTextList(String(topic.routing_include_when || '')),
|
||
exclude_when: normalizeRoutingTextList(String(topic.routing_exclude_when || '')),
|
||
examples: {
|
||
positive: normalizeRoutingTextList(String(topic.routing_examples_positive || '')),
|
||
negative: normalizeRoutingTextList(String(topic.routing_examples_negative || '')),
|
||
},
|
||
priority: normalizeRoutingPriority(String(topic.routing_priority || '50')),
|
||
system_filters: {
|
||
progress: true,
|
||
tool_hint: true,
|
||
},
|
||
};
|
||
};
|
||
|
||
const loadTopics = async (botId: string) => {
|
||
if (!botId) return;
|
||
try {
|
||
const res = await axios.get<BotTopic[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/topics`);
|
||
const rows = Array.isArray(res.data) ? res.data : [];
|
||
const mapped = rows
|
||
.map((row) => ({
|
||
...row,
|
||
topic_key: String(row.topic_key || '').trim().toLowerCase(),
|
||
name: String(row.name || ''),
|
||
description: String(row.description || ''),
|
||
is_active: Boolean(row.is_active),
|
||
routing: row.routing && typeof row.routing === 'object' ? row.routing : {},
|
||
...topicRoutingFromRaw(row.routing && typeof row.routing === 'object' ? row.routing : {}),
|
||
}))
|
||
.filter((row) => !isSystemFallbackTopic(row));
|
||
setTopics(mapped);
|
||
setExpandedTopicByKey((prev) => {
|
||
const next: Record<string, boolean> = {};
|
||
mapped.forEach((topic, idx) => {
|
||
const key = topicDraftUiKey(topic, idx);
|
||
next[key] = typeof prev[key] === 'boolean' ? prev[key] : idx === 0;
|
||
});
|
||
return next;
|
||
});
|
||
} catch {
|
||
setTopics([]);
|
||
setExpandedTopicByKey({});
|
||
}
|
||
};
|
||
|
||
const updateTopicLocal = (index: number, patch: Partial<BotTopic>) => {
|
||
setTopics((prev) => prev.map((row, i) => (i === index ? { ...row, ...patch } : row)));
|
||
};
|
||
|
||
const saveTopic = async (topic: BotTopic) => {
|
||
if (!selectedBot) return;
|
||
const topicKey = String(topic.topic_key || '').trim().toLowerCase();
|
||
if (!topicKey) return;
|
||
setIsSavingTopic(true);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topics/${encodeURIComponent(topicKey)}`, {
|
||
name: String(topic.name || '').trim(),
|
||
description: String(topic.description || '').trim(),
|
||
is_active: Boolean(topic.is_active),
|
||
routing: buildTopicRoutingPayload(topic),
|
||
});
|
||
await loadTopics(selectedBot.id);
|
||
notify(t.topicSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.topicSaveFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingTopic(false);
|
||
}
|
||
};
|
||
|
||
const addTopic = async () => {
|
||
if (!selectedBot) return;
|
||
const topic_key = normalizeTopicKeyInput(newTopicKey);
|
||
if (!topic_key) {
|
||
notify(t.topicKeyRequired, { tone: 'warning' });
|
||
return;
|
||
}
|
||
setIsSavingTopic(true);
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topics`, {
|
||
topic_key,
|
||
name: String(newTopicName || '').trim() || topic_key,
|
||
description: String(newTopicDescription || '').trim(),
|
||
is_active: true,
|
||
routing: buildTopicRoutingPayload({
|
||
routing_purpose: newTopicPurpose,
|
||
routing_include_when: newTopicIncludeWhen,
|
||
routing_exclude_when: newTopicExcludeWhen,
|
||
routing_examples_positive: newTopicExamplesPositive,
|
||
routing_examples_negative: newTopicExamplesNegative,
|
||
routing_priority: newTopicPriority,
|
||
}),
|
||
});
|
||
await loadTopics(selectedBot.id);
|
||
resetNewTopicDraft();
|
||
setNewTopicPanelOpen(false);
|
||
notify(t.topicSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.topicSaveFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingTopic(false);
|
||
}
|
||
};
|
||
|
||
const removeTopic = async (topic: BotTopic) => {
|
||
if (!selectedBot) return;
|
||
const topicKey = String(topic.topic_key || '').trim().toLowerCase();
|
||
if (!topicKey) return;
|
||
const ok = await confirm({
|
||
title: t.topic,
|
||
message: t.topicDeleteConfirm(topicKey),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setIsSavingTopic(true);
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topics/${encodeURIComponent(topicKey)}`);
|
||
await loadTopics(selectedBot.id);
|
||
notify(t.topicDeleted, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.topicDeleteFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingTopic(false);
|
||
}
|
||
};
|
||
|
||
const loadTopicFeed = async (args?: { append?: boolean; cursor?: number | null; topicKey?: string }) => {
|
||
if (!selectedBot) return;
|
||
const append = Boolean(args?.append);
|
||
const cursor = append ? Number(args?.cursor || 0) : 0;
|
||
const rawTopicKey = String(args?.topicKey ?? topicFeedTopicKey ?? '__all__').trim().toLowerCase();
|
||
const topicKey = rawTopicKey && rawTopicKey !== '__all__' ? rawTopicKey : '';
|
||
if (append) {
|
||
setTopicFeedLoadingMore(true);
|
||
} else {
|
||
setTopicFeedLoading(true);
|
||
setTopicFeedError('');
|
||
}
|
||
try {
|
||
const params: Record<string, string | number> = { limit: 40 };
|
||
if (topicKey) params.topic_key = topicKey;
|
||
if (append && Number.isFinite(cursor) && cursor > 0) {
|
||
params.cursor = cursor;
|
||
}
|
||
const res = await axios.get<TopicFeedListResponse>(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topic-items`, { params });
|
||
const rows = Array.isArray(res.data?.items) ? res.data.items : [];
|
||
const nextCursorRaw = Number(res.data?.next_cursor);
|
||
const nextCursor = Number.isFinite(nextCursorRaw) && nextCursorRaw > 0 ? nextCursorRaw : null;
|
||
const totalUnreadRaw = Number(res.data?.total_unread_count);
|
||
setTopicFeedNextCursor(nextCursor);
|
||
setTopicFeedUnreadCount(Number.isFinite(totalUnreadRaw) && totalUnreadRaw > 0 ? totalUnreadRaw : 0);
|
||
setTopicFeedItems((prev) => {
|
||
if (!append) return rows;
|
||
const merged = [...prev];
|
||
const seen = new Set<number>(prev.map((item) => Number(item.id)));
|
||
rows.forEach((item) => {
|
||
const id = Number(item?.id);
|
||
if (Number.isFinite(id) && seen.has(id)) return;
|
||
merged.push(item);
|
||
});
|
||
return merged;
|
||
});
|
||
if (!append) setTopicFeedError('');
|
||
} catch (error: any) {
|
||
if (!append) {
|
||
setTopicFeedItems([]);
|
||
setTopicFeedNextCursor(null);
|
||
}
|
||
setTopicFeedError(error?.response?.data?.detail || (isZh ? '读取主题消息失败。' : 'Failed to load topic feed.'));
|
||
} finally {
|
||
if (append) {
|
||
setTopicFeedLoadingMore(false);
|
||
} else {
|
||
setTopicFeedLoading(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const loadTopicFeedStats = async (botId?: string) => {
|
||
const targetBotId = String(botId || selectedBot?.id || '').trim();
|
||
if (!targetBotId) return;
|
||
try {
|
||
const res = await axios.get<TopicFeedStatsResponse>(`${APP_ENDPOINTS.apiBase}/bots/${targetBotId}/topic-items/stats`);
|
||
const unread = Number(res.data?.unread_count);
|
||
setTopicFeedUnreadCount(Number.isFinite(unread) && unread > 0 ? unread : 0);
|
||
} catch {
|
||
setTopicFeedUnreadCount(0);
|
||
}
|
||
};
|
||
|
||
const markTopicFeedItemRead = async (itemId: number) => {
|
||
if (!selectedBot) return;
|
||
const targetId = Number(itemId);
|
||
if (!Number.isFinite(targetId) || targetId <= 0) return;
|
||
setTopicFeedReadSavingById((prev) => ({ ...prev, [targetId]: true }));
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topic-items/${targetId}/read`);
|
||
setTopicFeedItems((prev) => prev.map((item) => (Number(item.id) === targetId ? { ...item, is_read: true } : item)));
|
||
setTopicFeedUnreadCount((prev) => Math.max(0, prev - 1));
|
||
} catch {
|
||
// ignore individual read failures; user can retry
|
||
} finally {
|
||
setTopicFeedReadSavingById((prev) => {
|
||
const next = { ...prev };
|
||
delete next[targetId];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const deleteTopicFeedItem = async (item: TopicFeedItem) => {
|
||
if (!selectedBot) return;
|
||
const targetId = Number(item?.id);
|
||
if (!Number.isFinite(targetId) || targetId <= 0) return;
|
||
const displayName = String(item?.title || item?.topic_key || targetId).trim() || String(targetId);
|
||
const ok = await confirm({
|
||
title: t.delete,
|
||
message: isZh ? `确认删除这条主题消息？\n${displayName}` : `Delete this Topic item?\n${displayName}`,
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setTopicFeedDeleteSavingById((prev) => ({ ...prev, [targetId]: true }));
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/topic-items/${targetId}`);
|
||
setTopicFeedItems((prev) => prev.filter((row) => Number(row.id) !== targetId));
|
||
if (!Boolean(item?.is_read)) {
|
||
setTopicFeedUnreadCount((prev) => Math.max(0, prev - 1));
|
||
}
|
||
notify(isZh ? '主题消息已删除。' : 'Topic item deleted.', { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '删除主题消息失败。' : 'Failed to delete topic item.'), { tone: 'error' });
|
||
} finally {
|
||
setTopicFeedDeleteSavingById((prev) => {
|
||
const next = { ...prev };
|
||
delete next[targetId];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const loadChannels = async (botId: string) => {
|
||
if (!botId) return;
|
||
const res = await axios.get<BotChannel[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/channels`);
|
||
const rows = Array.isArray(res.data) ? res.data : [];
|
||
setChannels(rows);
|
||
setExpandedChannelByKey((prev) => {
|
||
const next: Record<string, boolean> = {};
|
||
rows
|
||
.filter((channel) => !isDashboardChannel(channel))
|
||
.forEach((channel, idx) => {
|
||
const key = channelDraftUiKey(channel, idx);
|
||
next[key] = typeof prev[key] === 'boolean' ? prev[key] : idx === 0;
|
||
});
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const loadBotSkills = async (botId: string) => {
|
||
if (!botId) return;
|
||
const res = await axios.get<WorkspaceSkillOption[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/skills`);
|
||
setBotSkills(Array.isArray(res.data) ? res.data : []);
|
||
};
|
||
|
||
const loadMarketSkills = async (botId: string) => {
|
||
if (!botId) return;
|
||
setIsMarketSkillsLoading(true);
|
||
try {
|
||
const res = await axios.get<BotSkillMarketItem[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/skill-market`);
|
||
setMarketSkills(Array.isArray(res.data) ? res.data : []);
|
||
} catch (error: any) {
|
||
setMarketSkills([]);
|
||
notify(error?.response?.data?.detail || t.toolsLoadFail, { tone: 'error' });
|
||
} finally {
|
||
setIsMarketSkillsLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadBotEnvParams = async (botId: string) => {
|
||
if (!botId) return;
|
||
try {
|
||
const res = await axios.get<{ env_params?: Record<string, string> }>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/env-params`);
|
||
const rows = res.data?.env_params && typeof res.data.env_params === 'object' ? res.data.env_params : {};
|
||
const next: BotEnvParams = {};
|
||
Object.entries(rows).forEach(([k, v]) => {
|
||
const key = String(k || '').trim().toUpperCase();
|
||
if (!key) return;
|
||
next[key] = String(v ?? '');
|
||
});
|
||
setEnvParams(next);
|
||
} catch {
|
||
setEnvParams({});
|
||
}
|
||
};
|
||
|
||
const saveBotEnvParams = async () => {
|
||
if (!selectedBot) return;
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/env-params`, { env_params: envParams });
|
||
setShowEnvParamsModal(false);
|
||
notify(t.envParamsSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.envParamsSaveFail, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const upsertEnvParam = (key: string, value: string) => {
|
||
const normalized = String(key || '').trim().toUpperCase();
|
||
if (!normalized) return;
|
||
setEnvParams((prev) => ({ ...(prev || {}), [normalized]: String(value ?? '') }));
|
||
};
|
||
|
||
const removeEnvParam = (key: string) => {
|
||
const normalized = String(key || '').trim().toUpperCase();
|
||
if (!normalized) return;
|
||
setEnvParams((prev) => {
|
||
const next = { ...(prev || {}) };
|
||
delete next[normalized];
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const loadBotMcpConfig = async (botId: string): Promise<MCPServerDraft[]> => {
|
||
if (!botId) return [];
|
||
try {
|
||
const res = await axios.get<MCPConfigResponse>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/mcp-config`);
|
||
const drafts = mapMcpResponseToDrafts(res.data);
|
||
return applyMcpDrafts(drafts);
|
||
} catch {
|
||
applyMcpDrafts([]);
|
||
return [];
|
||
}
|
||
};
|
||
|
||
const saveNewMcpServer = async () => {
|
||
const name = String(newMcpDraft.name || '').trim();
|
||
const url = String(newMcpDraft.url || '').trim();
|
||
if (!name || !url) {
|
||
notify(t.mcpDraftRequired, { tone: 'warning' });
|
||
return;
|
||
}
|
||
const nextRow: MCPServerDraft = {
|
||
...newMcpDraft,
|
||
name,
|
||
url,
|
||
botId: String(newMcpDraft.botId || '').trim(),
|
||
botSecret: String(newMcpDraft.botSecret || '').trim(),
|
||
toolTimeout: String(newMcpDraft.toolTimeout || '60').trim() || '60',
|
||
headers: { ...(newMcpDraft.headers || {}) },
|
||
locked: false,
|
||
originName: name,
|
||
};
|
||
const nextRows = [...persistedMcpServers, nextRow];
|
||
const expandedKey = mcpDraftUiKey(nextRow, nextRows.length - 1);
|
||
await saveBotMcpConfig(nextRows, { closeDraft: true, expandedKey });
|
||
};
|
||
|
||
const saveSingleMcpServer = async (index: number) => {
|
||
const row = mcpServers[index];
|
||
if (!row || row.locked) return;
|
||
const originName = String(row.originName || row.name || '').trim();
|
||
const nextRows = [...persistedMcpServers];
|
||
const targetIndex = nextRows.findIndex((candidate) => {
|
||
const candidateOrigin = String(candidate.originName || candidate.name || '').trim();
|
||
return candidateOrigin && candidateOrigin === originName;
|
||
});
|
||
if (targetIndex >= 0) {
|
||
nextRows[targetIndex] = { ...row };
|
||
} else {
|
||
nextRows.push({ ...row, originName: originName || String(row.name || '').trim() });
|
||
}
|
||
const expandedKey = mcpDraftUiKey(row, targetIndex >= 0 ? targetIndex : nextRows.length - 1);
|
||
await saveBotMcpConfig(nextRows, { expandedKey });
|
||
};
|
||
|
||
const updateMcpServer = (index: number, patch: Partial<MCPServerDraft>) => {
|
||
setMcpServers((prev) => prev.map((row, i) => (i === index ? { ...row, ...patch } : row)));
|
||
};
|
||
|
||
const canRemoveMcpServer = (row?: MCPServerDraft | null) => {
|
||
return Boolean(row && !row.locked);
|
||
};
|
||
|
||
const removeMcpServer = async (index: number) => {
|
||
const row = mcpServers[index];
|
||
if (!canRemoveMcpServer(row)) {
|
||
notify(isZh ? '当前 MCP 服务不可删除。' : 'This MCP server cannot be removed.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
const nextRows = mcpServers.filter((_, i) => i !== index);
|
||
setMcpServers(nextRows);
|
||
setPersistedMcpServers(nextRows);
|
||
setExpandedMcpByKey((prev) => {
|
||
const next: Record<string, boolean> = {};
|
||
nextRows.forEach((server, idx) => {
|
||
const key = mcpDraftUiKey(server, idx);
|
||
next[key] = typeof prev[key] === 'boolean' ? prev[key] : idx === 0;
|
||
});
|
||
return next;
|
||
});
|
||
await saveBotMcpConfig(nextRows);
|
||
};
|
||
|
||
const buildMcpHeaders = (row: MCPServerDraft): Record<string, string> => {
|
||
const headers: Record<string, string> = {};
|
||
Object.entries(row.headers || {}).forEach(([k, v]) => {
|
||
const key = String(k || '').trim();
|
||
if (!key) return;
|
||
const lowered = key.toLowerCase();
|
||
if (!row.locked && (lowered === 'x-bot-id' || lowered === 'x-bot-secret')) {
|
||
return;
|
||
}
|
||
headers[key] = String(v ?? '').trim();
|
||
});
|
||
if (!row.locked) {
|
||
const botId = String(row.botId || '').trim();
|
||
const botSecret = String(row.botSecret || '').trim();
|
||
if (botId) headers['X-Bot-Id'] = botId;
|
||
if (botSecret) headers['X-Bot-Secret'] = botSecret;
|
||
}
|
||
return headers;
|
||
};
|
||
|
||
const saveBotMcpConfig = async (
|
||
rows: MCPServerDraft[] = mcpServers,
|
||
options?: { closeDraft?: boolean; expandedKey?: string },
|
||
) => {
|
||
if (!selectedBot) return;
|
||
const mcp_servers: Record<string, MCPServerConfig> = {};
|
||
for (const row of rows) {
|
||
const name = String(row.name || '').trim();
|
||
const url = String(row.url || '').trim();
|
||
if (!name || !url) continue;
|
||
const timeout = Math.max(1, Math.min(600, Number(row.toolTimeout || 60) || 60));
|
||
mcp_servers[name] = {
|
||
type: row.type === 'sse' ? 'sse' : 'streamableHttp',
|
||
url,
|
||
headers: buildMcpHeaders(row),
|
||
toolTimeout: timeout,
|
||
};
|
||
}
|
||
setIsSavingMcp(true);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/mcp-config`, { mcp_servers });
|
||
if (options?.expandedKey) {
|
||
setExpandedMcpByKey({ [options.expandedKey]: true });
|
||
}
|
||
await loadBotMcpConfig(selectedBot.id);
|
||
if (options?.closeDraft) {
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
}
|
||
notify(t.mcpSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.mcpSaveFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingMcp(false);
|
||
}
|
||
};
|
||
|
||
const removeBotSkill = async (skill: WorkspaceSkillOption) => {
|
||
if (!selectedBot) return;
|
||
const ok = await confirm({
|
||
title: t.removeSkill,
|
||
message: t.toolsRemoveConfirm(skill.name || skill.id),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/skills/${encodeURIComponent(skill.id)}`);
|
||
await loadBotSkills(selectedBot.id);
|
||
await loadMarketSkills(selectedBot.id);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.toolsRemoveFail, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const installMarketSkill = async (marketSkill: BotSkillMarketItem) => {
|
||
if (!selectedBot) return;
|
||
const skillId = Number(marketSkill.id);
|
||
if (!Number.isFinite(skillId) || skillId <= 0) return;
|
||
setMarketSkillInstallingId(skillId);
|
||
try {
|
||
const res = await axios.post<MarketSkillInstallResponse>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/skill-market/${skillId}/install`,
|
||
);
|
||
setBotSkills(Array.isArray(res.data?.skills) ? res.data.skills : []);
|
||
await loadMarketSkills(selectedBot.id);
|
||
notify(
|
||
isZh
|
||
? `已安装技能：${(res.data?.installed || []).join(', ') || marketSkill.display_name || marketSkill.skill_key}`
|
||
: `Installed: ${(res.data?.installed || []).join(', ') || marketSkill.display_name || marketSkill.skill_key}`,
|
||
{ tone: 'success' },
|
||
);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.toolsAddFail, { tone: 'error' });
|
||
if (selectedBot) {
|
||
await loadMarketSkills(selectedBot.id);
|
||
}
|
||
} finally {
|
||
setMarketSkillInstallingId(null);
|
||
}
|
||
};
|
||
|
||
const triggerSkillZipUpload = () => {
|
||
if (!selectedBot || isSkillUploading) return;
|
||
skillZipPickerRef.current?.click();
|
||
};
|
||
|
||
const onPickSkillZip = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
if (!selectedBot || !event.target.files || event.target.files.length === 0) return;
|
||
const file = event.target.files[0];
|
||
const filename = String(file?.name || '').toLowerCase();
|
||
if (!filename.endsWith('.zip')) {
|
||
notify(t.invalidZipFile, { tone: 'warning' });
|
||
event.target.value = '';
|
||
return;
|
||
}
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
setIsSkillUploading(true);
|
||
try {
|
||
const res = await axios.post<SkillUploadResponse>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/skills/upload`,
|
||
formData,
|
||
);
|
||
const nextSkills = Array.isArray(res.data?.skills) ? res.data.skills : [];
|
||
setBotSkills(nextSkills);
|
||
await loadMarketSkills(selectedBot.id);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.toolsAddFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSkillUploading(false);
|
||
event.target.value = '';
|
||
}
|
||
};
|
||
|
||
const loadCronJobs = async (botId: string) => {
|
||
if (!botId) return;
|
||
setCronLoading(true);
|
||
try {
|
||
const res = await axios.get<CronJobsResponse>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/cron/jobs`, {
|
||
params: { include_disabled: true },
|
||
});
|
||
setCronJobs(Array.isArray(res.data?.jobs) ? res.data.jobs : []);
|
||
} catch {
|
||
setCronJobs([]);
|
||
} finally {
|
||
setCronLoading(false);
|
||
}
|
||
};
|
||
|
||
const stopCronJob = async (jobId: string) => {
|
||
if (!selectedBot || !jobId) return;
|
||
setCronActionJobId(jobId);
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/cron/jobs/${jobId}/stop`);
|
||
await loadCronJobs(selectedBot.id);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.cronStopFail, { tone: 'error' });
|
||
} finally {
|
||
setCronActionJobId('');
|
||
}
|
||
};
|
||
|
||
const deleteCronJob = async (jobId: string) => {
|
||
if (!selectedBot || !jobId) return;
|
||
const ok = await confirm({
|
||
title: t.cronDelete,
|
||
message: t.cronDeleteConfirm(jobId),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setCronActionJobId(jobId);
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/cron/jobs/${jobId}`);
|
||
await loadCronJobs(selectedBot.id);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.cronDeleteFail, { tone: 'error' });
|
||
} finally {
|
||
setCronActionJobId('');
|
||
}
|
||
};
|
||
|
||
const updateChannelLocal = (index: number, patch: Partial<BotChannel>) => {
|
||
setChannels((prev) =>
|
||
prev.map((c, i) => {
|
||
if (i !== index || c.locked) return c;
|
||
return { ...c, ...patch };
|
||
}),
|
||
);
|
||
};
|
||
|
||
const saveChannel = async (channel: BotChannel) => {
|
||
if (!selectedBot || channel.locked || isDashboardChannel(channel)) return;
|
||
setIsSavingChannel(true);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/channels/${channel.id}`, {
|
||
channel_type: channel.channel_type,
|
||
external_app_id: channel.external_app_id,
|
||
app_secret: channel.app_secret,
|
||
internal_port: Number(channel.internal_port),
|
||
is_active: channel.is_active,
|
||
extra_config: sanitizeChannelExtra(String(channel.channel_type), channel.extra_config || {}),
|
||
});
|
||
await loadChannels(selectedBot.id);
|
||
notify(t.channelSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.channelSaveFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingChannel(false);
|
||
}
|
||
};
|
||
|
||
const addChannel = async () => {
|
||
if (!selectedBot) return;
|
||
const channelType = String(newChannelDraft.channel_type || '').trim().toLowerCase() as ChannelType;
|
||
if (!channelType || !addableChannelTypes.includes(channelType)) return;
|
||
setIsSavingChannel(true);
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/channels`, {
|
||
channel_type: channelType,
|
||
is_active: Boolean(newChannelDraft.is_active),
|
||
external_app_id: String(newChannelDraft.external_app_id || ''),
|
||
app_secret: String(newChannelDraft.app_secret || ''),
|
||
internal_port: Number(newChannelDraft.internal_port) || 8080,
|
||
extra_config: sanitizeChannelExtra(channelType, newChannelDraft.extra_config || {}),
|
||
});
|
||
await loadChannels(selectedBot.id);
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.channelAddFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingChannel(false);
|
||
}
|
||
};
|
||
|
||
const removeChannel = async (channel: BotChannel) => {
|
||
if (!selectedBot || channel.locked || channel.channel_type === 'dashboard') return;
|
||
const ok = await confirm({
|
||
title: t.channels,
|
||
message: t.channelDeleteConfirm(channel.channel_type),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setIsSavingChannel(true);
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/channels/${channel.id}`);
|
||
await loadChannels(selectedBot.id);
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.channelDeleteFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingChannel(false);
|
||
}
|
||
};
|
||
|
||
const isDashboardChannel = (channel: BotChannel) => String(channel.channel_type).toLowerCase() === 'dashboard';
|
||
const parseChannelListValue = (raw: unknown): string => {
|
||
if (!Array.isArray(raw)) return '';
|
||
return raw
|
||
.map((item) => String(item || '').trim())
|
||
.filter(Boolean)
|
||
.join('\n');
|
||
};
|
||
const parseChannelListInput = (raw: string): string[] => {
|
||
const rows: string[] = [];
|
||
String(raw || '')
|
||
.split(/[\n,]/)
|
||
.forEach((item) => {
|
||
const text = String(item || '').trim();
|
||
if (text && !rows.includes(text)) rows.push(text);
|
||
});
|
||
return rows;
|
||
};
|
||
const isChannelConfigured = (channel: BotChannel): boolean => {
|
||
const ctype = String(channel.channel_type || '').trim().toLowerCase();
|
||
if (ctype === 'email') {
|
||
const extra = channel.extra_config || {};
|
||
return Boolean(
|
||
String(extra.imapHost || '').trim()
|
||
&& String(extra.imapUsername || '').trim()
|
||
&& String(extra.imapPassword || '').trim()
|
||
&& String(extra.smtpHost || '').trim()
|
||
&& String(extra.smtpUsername || '').trim()
|
||
&& String(extra.smtpPassword || '').trim(),
|
||
);
|
||
}
|
||
return Boolean(String(channel.external_app_id || '').trim() || String(channel.app_secret || '').trim());
|
||
};
|
||
const sanitizeChannelExtra = (channelType: string, extra: Record<string, unknown>) => {
|
||
const type = String(channelType || '').toLowerCase();
|
||
if (type === 'dashboard') return extra || {};
|
||
const next = { ...(extra || {}) };
|
||
delete next.sendProgress;
|
||
delete next.sendToolHints;
|
||
return next;
|
||
};
|
||
const updateGlobalDeliveryFlag = (key: 'sendProgress' | 'sendToolHints', value: boolean) => {
|
||
setGlobalDelivery((prev) => ({ ...prev, [key]: value }));
|
||
};
|
||
const saveGlobalDelivery = async () => {
|
||
if (!selectedBot) return;
|
||
setIsSavingGlobalDelivery(true);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}`, {
|
||
send_progress: Boolean(globalDelivery.sendProgress),
|
||
send_tool_hints: Boolean(globalDelivery.sendToolHints),
|
||
});
|
||
if (selectedBot.docker_status === 'RUNNING') {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/stop`);
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/start`);
|
||
}
|
||
await refresh();
|
||
notify(t.channelSaved, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.channelSaveFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingGlobalDelivery(false);
|
||
}
|
||
};
|
||
|
||
const renderChannelFields = (channel: BotChannel, onPatch: (patch: Partial<BotChannel>) => void) => {
|
||
const ctype = String(channel.channel_type).toLowerCase();
|
||
if (ctype === 'telegram') {
|
||
return (
|
||
<>
|
||
<PasswordInput className="input" placeholder={lc.telegramToken} value={channel.app_secret || ''} onChange={(e) => onPatch({ app_secret: e.target.value })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
<input
|
||
className="input"
|
||
placeholder={lc.proxy}
|
||
value={String((channel.extra_config || {}).proxy || '')}
|
||
onChange={(e) => onPatch({ extra_config: { ...(channel.extra_config || {}), proxy: e.target.value } })}
|
||
autoComplete="off"
|
||
/>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean((channel.extra_config || {}).replyToMessage)}
|
||
onChange={(e) =>
|
||
onPatch({ extra_config: { ...(channel.extra_config || {}), replyToMessage: e.target.checked } })
|
||
}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.replyToMessage}
|
||
</label>
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'feishu') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.appId} value={channel.external_app_id || ''} onChange={(e) => onPatch({ external_app_id: e.target.value })} autoComplete="off" />
|
||
<PasswordInput className="input" placeholder={lc.appSecret} value={channel.app_secret || ''} onChange={(e) => onPatch({ app_secret: e.target.value })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
<input className="input" placeholder={lc.encryptKey} value={String((channel.extra_config || {}).encryptKey || '')} onChange={(e) => onPatch({ extra_config: { ...(channel.extra_config || {}), encryptKey: e.target.value } })} autoComplete="off" />
|
||
<input className="input" placeholder={lc.verificationToken} value={String((channel.extra_config || {}).verificationToken || '')} onChange={(e) => onPatch({ extra_config: { ...(channel.extra_config || {}), verificationToken: e.target.value } })} autoComplete="off" />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'dingtalk') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.clientId} value={channel.external_app_id || ''} onChange={(e) => onPatch({ external_app_id: e.target.value })} autoComplete="off" />
|
||
<PasswordInput className="input" placeholder={lc.clientSecret} value={channel.app_secret || ''} onChange={(e) => onPatch({ app_secret: e.target.value })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'slack') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.botToken} value={channel.external_app_id || ''} onChange={(e) => onPatch({ external_app_id: e.target.value })} autoComplete="off" />
|
||
<PasswordInput className="input" placeholder={lc.appToken} value={channel.app_secret || ''} onChange={(e) => onPatch({ app_secret: e.target.value })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'qq') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.appId} value={channel.external_app_id || ''} onChange={(e) => onPatch({ external_app_id: e.target.value })} autoComplete="off" />
|
||
<PasswordInput className="input" placeholder={lc.appSecret} value={channel.app_secret || ''} onChange={(e) => onPatch({ app_secret: e.target.value })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'email') {
|
||
const extra = channel.extra_config || {};
|
||
return (
|
||
<>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.consentGranted)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, consentGranted: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailConsentGranted}
|
||
</label>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailFromAddress}</label>
|
||
<input
|
||
className="input"
|
||
value={String(extra.fromAddress || '')}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, fromAddress: e.target.value } })}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">{lc.emailAllowFrom}</label>
|
||
<textarea
|
||
className="textarea"
|
||
rows={3}
|
||
value={parseChannelListValue(extra.allowFrom)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, allowFrom: parseChannelListInput(e.target.value) } })}
|
||
placeholder={lc.emailAllowFromPlaceholder}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailImapHost}</label>
|
||
<input className="input" value={String(extra.imapHost || '')} onChange={(e) => onPatch({ extra_config: { ...extra, imapHost: e.target.value } })} autoComplete="off" />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailImapPort}</label>
|
||
<input className="input mono" type="number" min="1" max="65535" value={String(extra.imapPort ?? 993)} onChange={(e) => onPatch({ extra_config: { ...extra, imapPort: Number(e.target.value || 993) } })} />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailImapUsername}</label>
|
||
<input className="input" value={String(extra.imapUsername || '')} onChange={(e) => onPatch({ extra_config: { ...extra, imapUsername: e.target.value } })} autoComplete="username" />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailImapPassword}</label>
|
||
<PasswordInput className="input" value={String(extra.imapPassword || '')} onChange={(e) => onPatch({ extra_config: { ...extra, imapPassword: e.target.value } })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailImapMailbox}</label>
|
||
<input className="input" value={String(extra.imapMailbox || 'INBOX')} onChange={(e) => onPatch({ extra_config: { ...extra, imapMailbox: e.target.value } })} autoComplete="off" />
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.imapUseSsl ?? true)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, imapUseSsl: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailImapUseSsl}
|
||
</label>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailSmtpHost}</label>
|
||
<input className="input" value={String(extra.smtpHost || '')} onChange={(e) => onPatch({ extra_config: { ...extra, smtpHost: e.target.value } })} autoComplete="off" />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailSmtpPort}</label>
|
||
<input className="input mono" type="number" min="1" max="65535" value={String(extra.smtpPort ?? 587)} onChange={(e) => onPatch({ extra_config: { ...extra, smtpPort: Number(e.target.value || 587) } })} />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailSmtpUsername}</label>
|
||
<input className="input" value={String(extra.smtpUsername || '')} onChange={(e) => onPatch({ extra_config: { ...extra, smtpUsername: e.target.value } })} autoComplete="username" />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailSmtpPassword}</label>
|
||
<PasswordInput className="input" value={String(extra.smtpPassword || '')} onChange={(e) => onPatch({ extra_config: { ...extra, smtpPassword: e.target.value } })} autoComplete="new-password" toggleLabels={passwordToggleLabels} />
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.smtpUseTls ?? true)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, smtpUseTls: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailSmtpUseTls}
|
||
</label>
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.smtpUseSsl)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, smtpUseSsl: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailSmtpUseSsl}
|
||
</label>
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.autoReplyEnabled ?? true)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, autoReplyEnabled: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailAutoReplyEnabled}
|
||
</label>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailPollIntervalSeconds}</label>
|
||
<input className="input mono" type="number" min="5" max="3600" value={String(extra.pollIntervalSeconds ?? 30)} onChange={(e) => onPatch({ extra_config: { ...extra, pollIntervalSeconds: Number(e.target.value || 30) } })} />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailMaxBodyChars}</label>
|
||
<input className="input mono" type="number" min="1" max="50000" value={String(extra.maxBodyChars ?? 12000)} onChange={(e) => onPatch({ extra_config: { ...extra, maxBodyChars: Number(e.target.value || 12000) } })} />
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.emailSubjectPrefix}</label>
|
||
<input className="input" value={String(extra.subjectPrefix || 'Re: ')} onChange={(e) => onPatch({ extra_config: { ...extra, subjectPrefix: e.target.value } })} autoComplete="off" />
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(extra.markSeen ?? true)}
|
||
onChange={(e) => onPatch({ extra_config: { ...extra, markSeen: e.target.checked } })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.emailMarkSeen}
|
||
</label>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
const openTemplateManager = async () => {
|
||
setBotListMenuOpen(false);
|
||
setIsLoadingTemplates(true);
|
||
try {
|
||
const res = await axios.get(`${APP_ENDPOINTS.apiBase}/system/templates`);
|
||
const agentRaw = res.data?.agent_md_templates;
|
||
const topicRaw = res.data?.topic_presets;
|
||
setTemplateAgentText(JSON.stringify(agentRaw && typeof agentRaw === 'object' ? agentRaw : {}, null, 2));
|
||
setTemplateTopicText(JSON.stringify(topicRaw && typeof topicRaw === 'object' ? topicRaw : { presets: [] }, null, 2));
|
||
setTemplateTab('agent');
|
||
setShowTemplateModal(true);
|
||
} catch {
|
||
notify(t.templateLoadFail, { tone: 'error' });
|
||
} finally {
|
||
setIsLoadingTemplates(false);
|
||
}
|
||
};
|
||
|
||
const saveTemplateManager = async (scope: 'agent' | 'topic') => {
|
||
let payload: Record<string, unknown>;
|
||
try {
|
||
if (scope === 'agent') {
|
||
const parsedAgent = JSON.parse(templateAgentText || '{}');
|
||
if (!parsedAgent || typeof parsedAgent !== 'object' || Array.isArray(parsedAgent)) {
|
||
throw new Error(t.templateAgentInvalid);
|
||
}
|
||
const agentObject = parsedAgent as Record<string, unknown>;
|
||
payload = {
|
||
agent_md_templates: {
|
||
agents_md: String(agentObject.agents_md || ''),
|
||
soul_md: String(agentObject.soul_md || ''),
|
||
user_md: String(agentObject.user_md || ''),
|
||
tools_md: String(agentObject.tools_md || ''),
|
||
identity_md: String(agentObject.identity_md || ''),
|
||
},
|
||
};
|
||
} else {
|
||
const parsedTopic = JSON.parse(templateTopicText || '{"presets":[]}');
|
||
if (!parsedTopic || typeof parsedTopic !== 'object' || Array.isArray(parsedTopic)) {
|
||
throw new Error(t.templateTopicInvalid);
|
||
}
|
||
payload = {
|
||
topic_presets: parsedTopic,
|
||
};
|
||
}
|
||
} catch (error: any) {
|
||
notify(error?.message || t.templateParseFail, { tone: 'error' });
|
||
return;
|
||
}
|
||
|
||
setIsSavingTemplates(true);
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/system/templates`, payload);
|
||
notify(t.templateSaved, { tone: 'success' });
|
||
if (scope === 'topic') {
|
||
const defaults = await axios.get<SystemDefaultsResponse>(`${APP_ENDPOINTS.apiBase}/system/defaults`);
|
||
setTopicPresetTemplates(parseTopicPresets(defaults.data?.topic_presets));
|
||
}
|
||
} catch {
|
||
notify(t.templateSaveFail, { tone: 'error' });
|
||
} finally {
|
||
setIsSavingTemplates(false);
|
||
}
|
||
};
|
||
|
||
const batchStartBots = async () => {
|
||
if (isBatchOperating) return;
|
||
const candidates = bots.filter((bot) => bot.enabled !== false && String(bot.docker_status || '').toUpperCase() !== 'RUNNING');
|
||
if (candidates.length === 0) {
|
||
notify(t.batchStartNone, { tone: 'warning' });
|
||
return;
|
||
}
|
||
const ok = await confirm({
|
||
title: t.batchStart,
|
||
message: t.batchStartConfirm(candidates.length),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setBotListMenuOpen(false);
|
||
setIsBatchOperating(true);
|
||
let success = 0;
|
||
let failed = 0;
|
||
try {
|
||
for (const bot of candidates) {
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${bot.id}/start`);
|
||
updateBotStatus(bot.id, 'RUNNING');
|
||
success += 1;
|
||
} catch {
|
||
failed += 1;
|
||
}
|
||
}
|
||
await refresh();
|
||
notify(t.batchStartDone(success, failed), { tone: failed > 0 ? 'warning' : 'success' });
|
||
} finally {
|
||
setIsBatchOperating(false);
|
||
}
|
||
};
|
||
|
||
const batchStopBots = async () => {
|
||
if (isBatchOperating) return;
|
||
const candidates = bots.filter((bot) => bot.enabled !== false && String(bot.docker_status || '').toUpperCase() === 'RUNNING');
|
||
if (candidates.length === 0) {
|
||
notify(t.batchStopNone, { tone: 'warning' });
|
||
return;
|
||
}
|
||
const ok = await confirm({
|
||
title: t.batchStop,
|
||
message: t.batchStopConfirm(candidates.length),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setBotListMenuOpen(false);
|
||
setIsBatchOperating(true);
|
||
let success = 0;
|
||
let failed = 0;
|
||
try {
|
||
for (const bot of candidates) {
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${bot.id}/stop`);
|
||
updateBotStatus(bot.id, 'STOPPED');
|
||
success += 1;
|
||
} catch {
|
||
failed += 1;
|
||
}
|
||
}
|
||
await refresh();
|
||
notify(t.batchStopDone(success, failed), { tone: failed > 0 ? 'warning' : 'success' });
|
||
} finally {
|
||
setIsBatchOperating(false);
|
||
}
|
||
};
|
||
|
||
const stopBot = async (id: string, status: string) => {
|
||
if (status !== 'RUNNING') return;
|
||
setOperatingBotId(id);
|
||
setControlStateByBot((prev) => ({ ...prev, [id]: 'stopping' }));
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/stop`);
|
||
updateBotStatus(id, 'STOPPED');
|
||
await refresh();
|
||
} catch {
|
||
notify(t.stopFail, { tone: 'error' });
|
||
} finally {
|
||
setOperatingBotId(null);
|
||
setControlStateByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const startBot = async (id: string, status: string) => {
|
||
if (status === 'RUNNING') return;
|
||
setOperatingBotId(id);
|
||
setControlStateByBot((prev) => ({ ...prev, [id]: 'starting' }));
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/start`);
|
||
updateBotStatus(id, 'RUNNING');
|
||
await refresh();
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.startFail, { tone: 'error' });
|
||
} finally {
|
||
setOperatingBotId(null);
|
||
setControlStateByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const restartBot = async (id: string, status: string) => {
|
||
const normalized = String(status || '').toUpperCase();
|
||
const ok = await confirm({
|
||
title: t.restart,
|
||
message: t.restartConfirm(id),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
setOperatingBotId(id);
|
||
try {
|
||
if (normalized === 'RUNNING') {
|
||
setControlStateByBot((prev) => ({ ...prev, [id]: 'stopping' }));
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/stop`);
|
||
updateBotStatus(id, 'STOPPED');
|
||
}
|
||
setControlStateByBot((prev) => ({ ...prev, [id]: 'starting' }));
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/start`);
|
||
updateBotStatus(id, 'RUNNING');
|
||
await refresh();
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.restartFail, { tone: 'error' });
|
||
} finally {
|
||
setOperatingBotId(null);
|
||
setControlStateByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const setBotEnabled = async (id: string, enabled: boolean) => {
|
||
setOperatingBotId(id);
|
||
setControlStateByBot((prev) => ({ ...prev, [id]: enabled ? 'enabling' : 'disabling' }));
|
||
try {
|
||
if (enabled) {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/enable`);
|
||
} else {
|
||
const ok = await confirm({
|
||
title: t.disable,
|
||
message: t.disableConfirm(id),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${id}/disable`);
|
||
}
|
||
await refresh();
|
||
notify(enabled ? t.enableDone : t.disableDone, { tone: 'success' });
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (enabled ? t.enableFail : t.disableFail), { tone: 'error' });
|
||
} finally {
|
||
setOperatingBotId(null);
|
||
setControlStateByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const send = async () => {
|
||
if (!selectedBot || !canChat || isSending) return;
|
||
if (!command.trim() && pendingAttachments.length === 0 && !quotedReply) return;
|
||
const text = normalizeUserMessageText(command);
|
||
const quoteText = normalizeAssistantMessageText(quotedReply?.text || '');
|
||
const quoteBlock = quoteText ? `[Quoted Reply]\n${quoteText}\n[/Quoted Reply]\n` : '';
|
||
const payloadCore = text || (pendingAttachments.length > 0 ? t.attachmentMessage : '') || (quoteText ? t.quoteOnlyMessage : '');
|
||
const payloadText = `${quoteBlock}${payloadCore}`.trim();
|
||
if (!payloadText && pendingAttachments.length === 0) return;
|
||
|
||
try {
|
||
chatAutoFollowRef.current = true;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
setSendingByBot((prev) => ({ ...prev, [selectedBot.id]: true }));
|
||
const res = await axios.post(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/command`,
|
||
{ command: payloadText, attachments: pendingAttachments },
|
||
{ timeout: 12000 },
|
||
);
|
||
if (!res.data?.success) {
|
||
throw new Error(t.backendDeliverFail);
|
||
}
|
||
addBotMessage(selectedBot.id, {
|
||
role: 'user',
|
||
text: payloadText,
|
||
attachments: [...pendingAttachments],
|
||
ts: Date.now(),
|
||
kind: 'final',
|
||
});
|
||
chatAutoFollowRef.current = true;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
setCommand('');
|
||
setPendingAttachments([]);
|
||
setQuotedReply(null);
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || error?.message || t.sendFail;
|
||
addBotMessage(selectedBot.id, {
|
||
role: 'assistant',
|
||
text: t.sendFailMsg(msg),
|
||
ts: Date.now(),
|
||
});
|
||
chatAutoFollowRef.current = true;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setSendingByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[selectedBot.id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const sendControlCommand = async (slashCommand: '/new' | '/restart') => {
|
||
if (!selectedBot || !canSendControlCommand) return;
|
||
if (activeControlCommand) return;
|
||
try {
|
||
setControlCommandByBot((prev) => ({ ...prev, [selectedBot.id]: slashCommand }));
|
||
const res = await axios.post(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/command`,
|
||
{ command: slashCommand },
|
||
{ timeout: 12000 },
|
||
);
|
||
if (!res.data?.success) {
|
||
throw new Error(t.backendDeliverFail);
|
||
}
|
||
if (slashCommand === '/new') {
|
||
setCommand('');
|
||
setPendingAttachments([]);
|
||
setQuotedReply(null);
|
||
}
|
||
setChatDatePickerOpen(false);
|
||
setControlCommandPanelOpen(false);
|
||
notify(t.controlCommandSent(slashCommand), { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || error?.message || t.sendFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setControlCommandByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[selectedBot.id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const updateChatDatePanelPosition = useCallback(() => {
|
||
const trigger = chatDateTriggerRef.current;
|
||
if (!trigger || typeof window === 'undefined') return;
|
||
const rect = trigger.getBoundingClientRect();
|
||
const viewportPadding = 12;
|
||
setChatDatePanelPosition({
|
||
bottom: Math.max(viewportPadding, window.innerHeight - rect.top + 8),
|
||
right: Math.max(viewportPadding, window.innerWidth - rect.right),
|
||
});
|
||
}, []);
|
||
|
||
const toggleChatDatePicker = () => {
|
||
if (!selectedBotId || chatDateJumping) return;
|
||
if (!chatDateValue) {
|
||
const fallbackTs = conversation[conversation.length - 1]?.ts || Date.now();
|
||
setChatDateValue(formatDateInputValue(fallbackTs));
|
||
}
|
||
setChatDatePickerOpen((prev) => {
|
||
const next = !prev;
|
||
if (!next) {
|
||
setChatDatePanelPosition(null);
|
||
return next;
|
||
}
|
||
updateChatDatePanelPosition();
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const jumpConversationToDate = async () => {
|
||
if (!selectedBotId || chatDateJumping) return;
|
||
const safeDate = String(chatDateValue || '').trim();
|
||
if (!safeDate) {
|
||
notify(isZh ? '请选择日期。' : 'Choose a date first.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
try {
|
||
setChatDateJumping(true);
|
||
const result = await fetchBotMessagesByDate(selectedBotId, safeDate);
|
||
if (result.items.length <= 0) {
|
||
notify(isZh ? '该日期附近没有可显示的对话。' : 'No conversation found near that date.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
setBotMessages(selectedBotId, result.items);
|
||
setChatHasMore(Boolean(result.hasMoreBefore));
|
||
setChatLoadingMore(false);
|
||
setChatDatePickerOpen(false);
|
||
setChatDatePanelPosition(null);
|
||
setControlCommandPanelOpen(false);
|
||
setChatJumpAnchorId(result.anchorId);
|
||
chatAutoFollowRef.current = false;
|
||
if (!result.matchedExactDate && result.resolvedTs) {
|
||
notify(
|
||
isZh
|
||
? `所选日期没有消息，已定位到 ${formatConversationDate(result.resolvedTs, true)}。`
|
||
: `No messages on that date. Jumped to ${formatConversationDate(result.resolvedTs, false)}.`,
|
||
{ tone: 'warning' },
|
||
);
|
||
}
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || (isZh ? '按日期读取对话失败。' : 'Failed to load conversation by date.'), {
|
||
tone: 'error',
|
||
});
|
||
} finally {
|
||
setChatDateJumping(false);
|
||
}
|
||
};
|
||
|
||
const interruptExecution = async () => {
|
||
if (!selectedBot || !canChat) return;
|
||
if (interruptingByBot[selectedBot.id]) return;
|
||
try {
|
||
setInterruptingByBot((prev) => ({ ...prev, [selectedBot.id]: true }));
|
||
const res = await axios.post(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/command`,
|
||
{ command: '/stop' },
|
||
{ timeout: 12000 },
|
||
);
|
||
if (!res.data?.success) {
|
||
throw new Error(t.backendDeliverFail);
|
||
}
|
||
setChatDatePickerOpen(false);
|
||
setControlCommandPanelOpen(false);
|
||
notify(t.interruptSent, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || error?.message || t.sendFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setInterruptingByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[selectedBot.id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const copyUserPrompt = async (text: string) => {
|
||
await copyTextToClipboard(normalizeUserMessageText(text), t.copyPromptDone, t.copyPromptFail);
|
||
};
|
||
|
||
const editUserPrompt = (text: string) => {
|
||
const normalized = normalizeUserMessageText(text);
|
||
if (!normalized) return;
|
||
setCommand(normalized);
|
||
composerTextareaRef.current?.focus();
|
||
if (composerTextareaRef.current) {
|
||
const caret = normalized.length;
|
||
window.requestAnimationFrame(() => {
|
||
composerTextareaRef.current?.setSelectionRange(caret, caret);
|
||
});
|
||
}
|
||
notify(t.editPromptDone, { tone: 'success' });
|
||
};
|
||
|
||
const copyAssistantReply = async (text: string) => {
|
||
await copyTextToClipboard(normalizeAssistantMessageText(text), t.copyReplyDone, t.copyReplyFail);
|
||
};
|
||
|
||
const quoteAssistantReply = (message: ChatMessage) => {
|
||
const content = normalizeAssistantMessageText(message.text);
|
||
if (!content) return;
|
||
setQuotedReply((prev) => {
|
||
if (prev && prev.ts === message.ts && normalizeAssistantMessageText(prev.text) === content) {
|
||
return null;
|
||
}
|
||
return { id: message.id, ts: message.ts, text: content };
|
||
});
|
||
};
|
||
|
||
const fetchBotMessages = useCallback(async (botId: string): Promise<ChatMessage[]> => {
|
||
const safeLimit = Math.max(100, Math.min(500, chatPullPageSize * 3));
|
||
const res = await axios.get<any[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/messages`, {
|
||
params: { limit: safeLimit },
|
||
});
|
||
const rows = Array.isArray(res.data) ? res.data : [];
|
||
return rows
|
||
.map((row) => mapBotMessageResponseRow(row))
|
||
.filter((msg) => msg.text.trim().length > 0 || (msg.attachments || []).length > 0)
|
||
.slice(-safeLimit);
|
||
}, [chatPullPageSize]);
|
||
|
||
const fetchBotMessagesPage = useCallback(async (
|
||
botId: string,
|
||
options?: { beforeId?: number | null; limit?: number },
|
||
): Promise<{ items: ChatMessage[]; hasMore: boolean; nextBeforeId: number | null }> => {
|
||
const requested = Number(options?.limit);
|
||
const safeLimit = Number.isFinite(requested)
|
||
? Math.max(10, Math.min(500, Math.floor(requested)))
|
||
: Math.max(10, Math.min(500, chatPullPageSize));
|
||
const beforeIdRaw = Number(options?.beforeId);
|
||
const beforeId = Number.isFinite(beforeIdRaw) && beforeIdRaw > 0 ? Math.floor(beforeIdRaw) : undefined;
|
||
const res = await axios.get<{ items?: any[]; has_more?: boolean; next_before_id?: number | null }>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${botId}/messages/page`,
|
||
{
|
||
params: {
|
||
limit: safeLimit,
|
||
...(beforeId ? { before_id: beforeId } : {}),
|
||
},
|
||
},
|
||
);
|
||
const rows = Array.isArray(res.data?.items) ? res.data.items : [];
|
||
const items = rows
|
||
.map((row) => mapBotMessageResponseRow(row))
|
||
.filter((msg) => msg.text.trim().length > 0 || (msg.attachments || []).length > 0);
|
||
const nextBeforeRaw = Number(res.data?.next_before_id);
|
||
const nextBeforeId = Number.isFinite(nextBeforeRaw) && nextBeforeRaw > 0 ? Math.floor(nextBeforeRaw) : null;
|
||
return {
|
||
items,
|
||
hasMore: Boolean(res.data?.has_more),
|
||
nextBeforeId,
|
||
};
|
||
}, [chatPullPageSize]);
|
||
|
||
const fetchBotMessagesByDate = useCallback(async (
|
||
botId: string,
|
||
dateValue: string,
|
||
): Promise<{ items: ChatMessage[]; anchorId: number | null; resolvedTs: number | null; matchedExactDate: boolean; hasMoreBefore: boolean }> => {
|
||
const safeDate = String(dateValue || '').trim();
|
||
if (!safeDate) {
|
||
return {
|
||
items: [],
|
||
anchorId: null,
|
||
resolvedTs: null,
|
||
matchedExactDate: false,
|
||
hasMoreBefore: false,
|
||
};
|
||
}
|
||
const safeLimit = Math.max(40, Math.min(180, chatPullPageSize));
|
||
const tzOffsetMinutes = new Date().getTimezoneOffset();
|
||
const res = await axios.get<BotMessagesByDateResponse>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/messages/by-date`, {
|
||
params: {
|
||
date: safeDate,
|
||
tz_offset_minutes: tzOffsetMinutes,
|
||
limit: safeLimit,
|
||
},
|
||
});
|
||
const rows = Array.isArray(res.data?.items) ? res.data.items : [];
|
||
const items = rows
|
||
.map((row) => mapBotMessageResponseRow(row))
|
||
.filter((msg) => msg.text.trim().length > 0 || (msg.attachments || []).length > 0);
|
||
const anchorRaw = Number(res.data?.anchor_id);
|
||
const resolvedRaw = Number(res.data?.resolved_ts);
|
||
return {
|
||
items,
|
||
anchorId: Number.isFinite(anchorRaw) && anchorRaw > 0 ? Math.floor(anchorRaw) : null,
|
||
resolvedTs: Number.isFinite(resolvedRaw) && resolvedRaw > 0 ? Math.floor(resolvedRaw) : null,
|
||
matchedExactDate: Boolean(res.data?.matched_exact_date),
|
||
hasMoreBefore: Boolean(res.data?.has_more_before),
|
||
};
|
||
}, [chatPullPageSize]);
|
||
|
||
const loadMoreChatMessages = useCallback(async () => {
|
||
if (!selectedBotId || chatLoadingMore || !chatHasMore) return;
|
||
const current = (activeBots[selectedBotId]?.messages || []).filter((msg) => (msg.kind || 'final') !== 'progress');
|
||
const oldestMessageId = current
|
||
.map((msg) => Number(msg.id))
|
||
.filter((id) => Number.isFinite(id) && id > 0)
|
||
.reduce<number | null>((acc, id) => (acc === null ? id : Math.min(acc, id)), null);
|
||
if (!oldestMessageId) {
|
||
setChatHasMore(false);
|
||
return;
|
||
}
|
||
|
||
const scrollBox = chatScrollRef.current;
|
||
const prevHeight = scrollBox?.scrollHeight || 0;
|
||
const prevTop = scrollBox?.scrollTop || 0;
|
||
setChatLoadingMore(true);
|
||
try {
|
||
const page = await fetchBotMessagesPage(selectedBotId, { beforeId: oldestMessageId, limit: chatPullPageSize });
|
||
if (page.items.length <= 0) {
|
||
setChatHasMore(false);
|
||
return;
|
||
}
|
||
const mergedMap = new Map<string, ChatMessage>();
|
||
[...page.items, ...current].forEach((msg) => {
|
||
const key = msg.id ? `id:${msg.id}` : `k:${msg.role}:${msg.ts}:${msg.text}`;
|
||
if (!mergedMap.has(key)) mergedMap.set(key, msg);
|
||
});
|
||
const merged = Array.from(mergedMap.values()).sort((a, b) => {
|
||
if (a.ts !== b.ts) return a.ts - b.ts;
|
||
return Number(a.id || 0) - Number(b.id || 0);
|
||
});
|
||
setBotMessages(selectedBotId, merged);
|
||
setChatHasMore(Boolean(page.hasMore));
|
||
requestAnimationFrame(() => {
|
||
const box = chatScrollRef.current;
|
||
if (!box) return;
|
||
const delta = box.scrollHeight - prevHeight;
|
||
box.scrollTop = prevTop + Math.max(0, delta);
|
||
});
|
||
} catch {
|
||
// ignore
|
||
} finally {
|
||
setChatLoadingMore(false);
|
||
}
|
||
}, [selectedBotId, chatLoadingMore, chatHasMore, activeBots, fetchBotMessagesPage, chatPullPageSize, setBotMessages]);
|
||
|
||
const onChatScroll = useCallback(() => {
|
||
const box = chatScrollRef.current;
|
||
if (!box) return;
|
||
const distanceToBottom = box.scrollHeight - box.scrollTop - box.clientHeight;
|
||
chatAutoFollowRef.current = distanceToBottom <= 64;
|
||
if (box.scrollTop <= 28 && chatHasMore && !chatLoadingMore) {
|
||
void loadMoreChatMessages();
|
||
}
|
||
}, [chatHasMore, chatLoadingMore, loadMoreChatMessages]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId || !chatJumpAnchorId) return;
|
||
const anchorSelector = `[data-chat-message-id="${chatJumpAnchorId}"]`;
|
||
const scrollToAnchor = () => {
|
||
const box = chatScrollRef.current;
|
||
if (!box) return;
|
||
const anchor = box.querySelector<HTMLElement>(anchorSelector);
|
||
if (anchor) {
|
||
anchor.scrollIntoView({ block: 'start' });
|
||
} else {
|
||
box.scrollTop = 0;
|
||
}
|
||
setChatJumpAnchorId(null);
|
||
};
|
||
const raf = window.requestAnimationFrame(scrollToAnchor);
|
||
return () => window.cancelAnimationFrame(raf);
|
||
}, [selectedBotId, chatJumpAnchorId, messages.length]);
|
||
|
||
const submitAssistantFeedback = async (message: ChatMessage, feedback: 'up' | 'down') => {
|
||
if (!selectedBotId) {
|
||
notify(t.feedbackMessagePending, { tone: 'warning' });
|
||
return;
|
||
}
|
||
let targetMessageId = message.id;
|
||
if (!targetMessageId) {
|
||
try {
|
||
const latest = await fetchBotMessages(selectedBotId);
|
||
setBotMessages(selectedBotId, latest);
|
||
const normalizedTarget = normalizeAssistantMessageText(message.text);
|
||
const matched = latest
|
||
.filter((m) => m.role === 'assistant' && m.id)
|
||
.map((m) => ({ m, diff: Math.abs((m.ts || 0) - (message.ts || 0)) }))
|
||
.filter(({ m, diff }) => normalizeAssistantMessageText(m.text) === normalizedTarget && diff <= 10 * 60 * 1000)
|
||
.sort((a, b) => a.diff - b.diff)[0]?.m;
|
||
if (matched?.id) {
|
||
targetMessageId = matched.id;
|
||
}
|
||
} catch {
|
||
// ignore and fallback to warning below
|
||
}
|
||
}
|
||
if (!targetMessageId) {
|
||
notify(t.feedbackMessagePending, { tone: 'warning' });
|
||
return;
|
||
}
|
||
if (feedbackSavingByMessageId[targetMessageId]) return;
|
||
const nextFeedback: 'up' | 'down' | null = message.feedback === feedback ? null : feedback;
|
||
setFeedbackSavingByMessageId((prev) => ({ ...prev, [targetMessageId]: true }));
|
||
try {
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${selectedBotId}/messages/${targetMessageId}/feedback`, { feedback: nextFeedback });
|
||
setBotMessageFeedback(selectedBotId, targetMessageId, nextFeedback);
|
||
if (nextFeedback === null) {
|
||
notify(t.feedbackCleared, { tone: 'success' });
|
||
} else {
|
||
notify(nextFeedback === 'up' ? t.feedbackUpSaved : t.feedbackDownSaved, { tone: 'success' });
|
||
}
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.feedbackSaveFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setFeedbackSavingByMessageId((prev) => {
|
||
const next = { ...prev };
|
||
delete next[targetMessageId];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
const onComposerKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||
const native = e.nativeEvent as unknown as { isComposing?: boolean; keyCode?: number };
|
||
if (native.isComposing || native.keyCode === 229) return;
|
||
const isEnter = e.key === 'Enter' || e.key === 'NumpadEnter';
|
||
if (!isEnter || e.shiftKey) return;
|
||
e.preventDefault();
|
||
void send();
|
||
};
|
||
|
||
const triggerPickAttachments = () => {
|
||
if (!selectedBot || !canChat || isUploadingAttachments) return;
|
||
filePickerRef.current?.click();
|
||
};
|
||
|
||
const clearVoiceTimer = () => {
|
||
if (voiceTimerRef.current) {
|
||
window.clearInterval(voiceTimerRef.current);
|
||
voiceTimerRef.current = null;
|
||
}
|
||
};
|
||
|
||
const releaseVoiceStream = () => {
|
||
if (voiceStreamRef.current) {
|
||
voiceStreamRef.current.getTracks().forEach((track) => {
|
||
try {
|
||
track.stop();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
});
|
||
voiceStreamRef.current = null;
|
||
}
|
||
};
|
||
|
||
const transcribeVoiceBlob = async (blob: Blob) => {
|
||
if (!selectedBot || blob.size <= 0) return;
|
||
setIsVoiceTranscribing(true);
|
||
try {
|
||
const mime = String(blob.type || '').toLowerCase();
|
||
const ext = mime.includes('ogg') ? 'ogg' : mime.includes('mp4') ? 'mp4' : 'webm';
|
||
const file = new File([blob], `voice-input-${Date.now()}.${ext}`, { type: blob.type || 'audio/webm' });
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
formData.append('language', 'zh');
|
||
const res = await axios.post<{ text?: string }>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/speech/transcribe`,
|
||
formData,
|
||
{ timeout: 120000 },
|
||
);
|
||
const text = normalizeUserMessageText(String(res.data?.text || ''));
|
||
if (!text) {
|
||
notify(t.voiceTranscribeEmpty, { tone: 'warning' });
|
||
return;
|
||
}
|
||
setCommand((prev) => {
|
||
const base = String(prev || '').trim();
|
||
if (!base) return text;
|
||
return `${base}\n${text}`;
|
||
});
|
||
window.requestAnimationFrame(() => composerTextareaRef.current?.focus());
|
||
notify(t.voiceTranscribeDone, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = String(error?.response?.data?.detail || '').trim();
|
||
console.error('Speech transcription failed', {
|
||
botId: selectedBot.id,
|
||
message: msg || t.voiceTranscribeFail,
|
||
status: error?.response?.status,
|
||
response: error?.response?.data,
|
||
error,
|
||
});
|
||
notify(msg || t.voiceTranscribeFail, { tone: 'error' });
|
||
} finally {
|
||
setIsVoiceTranscribing(false);
|
||
}
|
||
};
|
||
|
||
const stopVoiceRecording = () => {
|
||
const recorder = voiceRecorderRef.current;
|
||
if (!recorder || recorder.state === 'inactive') return;
|
||
try {
|
||
recorder.stop();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const startVoiceRecording = async () => {
|
||
if (!selectedBot || !canChat || isVoiceTranscribing) return;
|
||
if (!speechEnabled) {
|
||
notify(t.voiceUnavailable, { tone: 'warning' });
|
||
return;
|
||
}
|
||
if (typeof window === 'undefined' || typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
|
||
notify(t.voiceUnsupported, { tone: 'error' });
|
||
return;
|
||
}
|
||
if (typeof MediaRecorder === 'undefined') {
|
||
notify(t.voiceUnsupported, { tone: 'error' });
|
||
return;
|
||
}
|
||
try {
|
||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||
const mimeCandidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/mp4'];
|
||
const supportedMime = mimeCandidates.find((candidate) => MediaRecorder.isTypeSupported(candidate));
|
||
const recorder = supportedMime
|
||
? new MediaRecorder(stream, { mimeType: supportedMime })
|
||
: new MediaRecorder(stream);
|
||
voiceStreamRef.current = stream;
|
||
voiceRecorderRef.current = recorder;
|
||
voiceChunksRef.current = [];
|
||
setVoiceCountdown(voiceMaxSeconds);
|
||
setIsVoiceRecording(true);
|
||
|
||
recorder.ondataavailable = (event: BlobEvent) => {
|
||
if (event.data && event.data.size > 0) {
|
||
voiceChunksRef.current.push(event.data);
|
||
}
|
||
};
|
||
recorder.onerror = () => {
|
||
setIsVoiceRecording(false);
|
||
clearVoiceTimer();
|
||
releaseVoiceStream();
|
||
notify(t.voiceRecordFail, { tone: 'error' });
|
||
};
|
||
recorder.onstop = () => {
|
||
const blob = new Blob(voiceChunksRef.current, { type: supportedMime || recorder.mimeType || 'audio/webm' });
|
||
voiceRecorderRef.current = null;
|
||
voiceChunksRef.current = [];
|
||
clearVoiceTimer();
|
||
releaseVoiceStream();
|
||
setIsVoiceRecording(false);
|
||
setVoiceCountdown(voiceMaxSeconds);
|
||
if (blob.size > 0) {
|
||
void transcribeVoiceBlob(blob);
|
||
}
|
||
};
|
||
|
||
recorder.start(200);
|
||
clearVoiceTimer();
|
||
voiceTimerRef.current = window.setInterval(() => {
|
||
setVoiceCountdown((prev) => {
|
||
if (prev <= 1) {
|
||
stopVoiceRecording();
|
||
return 0;
|
||
}
|
||
return prev - 1;
|
||
});
|
||
}, 1000);
|
||
} catch {
|
||
releaseVoiceStream();
|
||
setIsVoiceRecording(false);
|
||
clearVoiceTimer();
|
||
notify(t.voicePermissionDenied, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const onVoiceInput = () => {
|
||
if (isVoiceTranscribing) return;
|
||
if (isVoiceRecording) {
|
||
stopVoiceRecording();
|
||
return;
|
||
}
|
||
void startVoiceRecording();
|
||
};
|
||
|
||
const onPickAttachments = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
if (!selectedBot || !event.target.files || event.target.files.length === 0) return;
|
||
const files = Array.from(event.target.files);
|
||
let effectiveUploadMaxMb = uploadMaxMb;
|
||
let effectiveAllowedAttachmentExtensions = [...allowedAttachmentExtensions];
|
||
try {
|
||
const res = await axios.get<SystemDefaultsResponse>(`${APP_ENDPOINTS.apiBase}/system/defaults`);
|
||
const latestUploadMaxMb = Number(res.data?.limits?.upload_max_mb);
|
||
if (Number.isFinite(latestUploadMaxMb) && latestUploadMaxMb > 0) {
|
||
effectiveUploadMaxMb = Math.max(1, Math.floor(latestUploadMaxMb));
|
||
setUploadMaxMb(effectiveUploadMaxMb);
|
||
}
|
||
const latestAllowedAttachmentExtensions = parseAllowedAttachmentExtensions(
|
||
res.data?.workspace?.allowed_attachment_extensions,
|
||
);
|
||
effectiveAllowedAttachmentExtensions = latestAllowedAttachmentExtensions;
|
||
setAllowedAttachmentExtensions(latestAllowedAttachmentExtensions);
|
||
} catch {
|
||
// Fall back to the most recently loaded defaults in memory.
|
||
}
|
||
|
||
const effectiveAllowedAttachmentExtensionSet = new Set(effectiveAllowedAttachmentExtensions);
|
||
if (effectiveAllowedAttachmentExtensionSet.size > 0) {
|
||
const disallowed = files.filter((file) => {
|
||
const name = String(file.name || '').trim().toLowerCase();
|
||
const dot = name.lastIndexOf('.');
|
||
const ext = dot >= 0 ? name.slice(dot) : '';
|
||
return !ext || !effectiveAllowedAttachmentExtensionSet.has(ext);
|
||
});
|
||
if (disallowed.length > 0) {
|
||
const names = disallowed.map((file) => String(file.name || '').trim() || 'unknown').slice(0, 3).join(', ');
|
||
notify(t.uploadTypeNotAllowed(names, effectiveAllowedAttachmentExtensions.join(', ')), { tone: 'warning' });
|
||
event.target.value = '';
|
||
return;
|
||
}
|
||
}
|
||
const maxBytes = effectiveUploadMaxMb * 1024 * 1024;
|
||
const tooLarge = files.filter((f) => Number(f.size) > maxBytes);
|
||
if (tooLarge.length > 0) {
|
||
const names = tooLarge.map((f) => String(f.name || '').trim() || 'unknown').slice(0, 3).join(', ');
|
||
notify(t.uploadTooLarge(names, effectiveUploadMaxMb), { tone: 'warning' });
|
||
event.target.value = '';
|
||
return;
|
||
}
|
||
const mediaFiles: File[] = [];
|
||
const normalFiles: File[] = [];
|
||
files.forEach((file) => {
|
||
if (isMediaUploadFile(file)) {
|
||
mediaFiles.push(file);
|
||
} else {
|
||
normalFiles.push(file);
|
||
}
|
||
});
|
||
|
||
const totalBytes = files.reduce((sum, file) => sum + Math.max(0, Number(file.size) || 0), 0);
|
||
let uploadedBytes = 0;
|
||
const uploadedPaths: string[] = [];
|
||
|
||
const uploadBatch = async (batchFiles: File[], path: 'media' | 'uploads') => {
|
||
if (batchFiles.length === 0) return;
|
||
const batchBytes = batchFiles.reduce((sum, file) => sum + Math.max(0, Number(file.size) || 0), 0);
|
||
const formData = new FormData();
|
||
batchFiles.forEach((file) => formData.append('files', file));
|
||
const res = await axios.post<WorkspaceUploadResponse>(
|
||
`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/workspace/upload`,
|
||
formData,
|
||
{
|
||
params: { path },
|
||
onUploadProgress: (progressEvent) => {
|
||
const loaded = Number(progressEvent.loaded || 0);
|
||
if (!Number.isFinite(loaded) || loaded < 0) {
|
||
setAttachmentUploadPercent(null);
|
||
return;
|
||
}
|
||
if (totalBytes <= 0) {
|
||
setAttachmentUploadPercent(null);
|
||
return;
|
||
}
|
||
const cappedLoaded = Math.max(0, Math.min(batchBytes, loaded));
|
||
const pct = Math.max(0, Math.min(100, Math.round(((uploadedBytes + cappedLoaded) / totalBytes) * 100)));
|
||
setAttachmentUploadPercent(pct);
|
||
},
|
||
},
|
||
);
|
||
const uploaded = normalizeAttachmentPaths((res.data?.files || []).map((v) => v.path));
|
||
uploadedPaths.push(...uploaded);
|
||
uploadedBytes += batchBytes;
|
||
if (totalBytes > 0) {
|
||
const pct = Math.max(0, Math.min(100, Math.round((uploadedBytes / totalBytes) * 100)));
|
||
setAttachmentUploadPercent(pct);
|
||
}
|
||
};
|
||
|
||
setIsUploadingAttachments(true);
|
||
setAttachmentUploadPercent(0);
|
||
try {
|
||
await uploadBatch(mediaFiles, 'media');
|
||
await uploadBatch(normalFiles, 'uploads');
|
||
if (uploadedPaths.length > 0) {
|
||
setPendingAttachments((prev) => Array.from(new Set([...prev, ...uploadedPaths])));
|
||
await loadWorkspaceTree(selectedBot.id, workspaceCurrentPath);
|
||
}
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.uploadFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsUploadingAttachments(false);
|
||
setAttachmentUploadPercent(null);
|
||
event.target.value = '';
|
||
}
|
||
};
|
||
|
||
const onBaseProviderChange = (provider: string) => {
|
||
const preset = providerPresets[provider];
|
||
setEditForm((p) => ({
|
||
...p,
|
||
llm_provider: provider,
|
||
llm_model: preset?.model || p.llm_model,
|
||
api_base: preset?.apiBase ?? p.api_base,
|
||
}));
|
||
setProviderTestResult('');
|
||
};
|
||
|
||
const testProviderConnection = async () => {
|
||
if (!editForm.llm_provider || !editForm.llm_model || !editForm.api_key.trim()) {
|
||
notify(t.providerRequired, { tone: 'warning' });
|
||
return;
|
||
}
|
||
setIsTestingProvider(true);
|
||
setProviderTestResult('');
|
||
try {
|
||
const res = await axios.post(`${APP_ENDPOINTS.apiBase}/providers/test`, {
|
||
provider: editForm.llm_provider,
|
||
model: editForm.llm_model,
|
||
api_key: editForm.api_key.trim(),
|
||
api_base: editForm.api_base || undefined,
|
||
});
|
||
if (res.data?.ok) {
|
||
const preview = (res.data.models_preview || []).slice(0, 3).join(', ');
|
||
setProviderTestResult(t.connOk(preview));
|
||
} else {
|
||
setProviderTestResult(t.connFail(res.data?.detail || 'unknown error'));
|
||
}
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || error?.message || 'request failed';
|
||
setProviderTestResult(t.connFail(msg));
|
||
} finally {
|
||
setIsTestingProvider(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId) {
|
||
setChatHasMore(false);
|
||
setChatLoadingMore(false);
|
||
setChatDatePickerOpen(false);
|
||
setChatDateJumping(false);
|
||
setChatJumpAnchorId(null);
|
||
setChatDateValue('');
|
||
setWorkspaceEntries([]);
|
||
setWorkspaceCurrentPath('');
|
||
setWorkspaceParentPath(null);
|
||
setWorkspaceError('');
|
||
setChannels([]);
|
||
setTopics([]);
|
||
setExpandedTopicByKey({});
|
||
setNewTopicPanelOpen(false);
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicAdvancedOpen(false);
|
||
setNewTopicKey('');
|
||
setNewTopicName('');
|
||
setNewTopicDescription('');
|
||
setNewTopicPurpose('');
|
||
setNewTopicIncludeWhen('');
|
||
setNewTopicExcludeWhen('');
|
||
setNewTopicExamplesPositive('');
|
||
setNewTopicExamplesNegative('');
|
||
setNewTopicPriority('50');
|
||
setNewTopicSource('');
|
||
setNewTopicAdvancedOpen(false);
|
||
setPendingAttachments([]);
|
||
setCronJobs([]);
|
||
setBotSkills([]);
|
||
setMarketSkills([]);
|
||
setShowSkillMarketInstallModal(false);
|
||
setSkillAddMenuOpen(false);
|
||
setEnvParams({});
|
||
setExpandedMcpByKey({});
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
setTopicFeedTopicKey('__all__');
|
||
setTopicFeedItems([]);
|
||
setTopicFeedNextCursor(null);
|
||
setTopicFeedError('');
|
||
setTopicFeedReadSavingById({});
|
||
setTopicFeedDeleteSavingById({});
|
||
setTopicFeedUnreadCount(0);
|
||
return;
|
||
}
|
||
setChatHasMore(false);
|
||
setChatLoadingMore(false);
|
||
setChatDatePickerOpen(false);
|
||
setChatDateJumping(false);
|
||
setChatJumpAnchorId(null);
|
||
setChatDateValue('');
|
||
setTopics([]);
|
||
setExpandedTopicByKey({});
|
||
setNewTopicPanelOpen(false);
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicSource('');
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
setTopicFeedTopicKey('__all__');
|
||
setTopicFeedItems([]);
|
||
setTopicFeedNextCursor(null);
|
||
setTopicFeedError('');
|
||
setTopicFeedReadSavingById({});
|
||
setTopicFeedDeleteSavingById({});
|
||
let cancelled = false;
|
||
const loadAll = async () => {
|
||
try {
|
||
if (cancelled) return;
|
||
const page = await fetchBotMessagesPage(selectedBotId, { limit: chatPullPageSize });
|
||
if (cancelled) return;
|
||
setBotMessages(selectedBotId, page.items);
|
||
setChatHasMore(Boolean(page.hasMore));
|
||
await Promise.all([
|
||
loadWorkspaceTree(selectedBotId, ''),
|
||
loadCronJobs(selectedBotId),
|
||
loadBotSkills(selectedBotId),
|
||
loadBotEnvParams(selectedBotId),
|
||
loadTopics(selectedBotId),
|
||
loadTopicFeedStats(selectedBotId),
|
||
]);
|
||
chatAutoFollowRef.current = true;
|
||
requestAnimationFrame(() => syncChatScrollToBottom('auto'));
|
||
} catch (error: any) {
|
||
const detail = String(error?.response?.data?.detail || '').trim();
|
||
if (!cancelled && detail) {
|
||
notify(detail, { tone: 'error' });
|
||
}
|
||
}
|
||
};
|
||
void loadAll();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedBotId, chatPullPageSize, fetchBotMessagesPage, setBotMessages, syncChatScrollToBottom]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId || chatDateValue) return;
|
||
const fallbackTs = messages[messages.length - 1]?.ts || Date.now();
|
||
setChatDateValue(formatDateInputValue(fallbackTs));
|
||
}, [selectedBotId, chatDateValue, messages]);
|
||
|
||
useEffect(() => {
|
||
if (!workspaceAutoRefresh || !selectedBotId || selectedBot?.docker_status !== 'RUNNING') return;
|
||
let stopped = false;
|
||
|
||
const tick = async () => {
|
||
if (stopped) return;
|
||
await loadWorkspaceTree(selectedBotId, workspaceCurrentPath);
|
||
};
|
||
|
||
void tick();
|
||
const timer = window.setInterval(() => {
|
||
void tick();
|
||
}, 2000);
|
||
|
||
return () => {
|
||
stopped = true;
|
||
window.clearInterval(timer);
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [workspaceAutoRefresh, selectedBotId, selectedBot?.docker_status, workspaceCurrentPath]);
|
||
|
||
useEffect(() => {
|
||
if (controlCommandPanelOpen) return;
|
||
setChatDatePickerOpen(false);
|
||
setChatDatePanelPosition(null);
|
||
}, [controlCommandPanelOpen]);
|
||
|
||
useEffect(() => {
|
||
if (chatDatePickerOpen) return;
|
||
setChatDatePanelPosition(null);
|
||
}, [chatDatePickerOpen]);
|
||
|
||
useEffect(() => {
|
||
if (!chatDatePickerOpen) return;
|
||
updateChatDatePanelPosition();
|
||
const handleViewportChange = () => updateChatDatePanelPosition();
|
||
window.addEventListener('resize', handleViewportChange);
|
||
window.addEventListener('scroll', handleViewportChange, true);
|
||
return () => {
|
||
window.removeEventListener('resize', handleViewportChange);
|
||
window.removeEventListener('scroll', handleViewportChange, true);
|
||
};
|
||
}, [chatDatePickerOpen, updateChatDatePanelPosition]);
|
||
|
||
useEffect(() => {
|
||
if (!topicFeedTopicKey || topicFeedTopicKey === '__all__') return;
|
||
const exists = activeTopicOptions.some((row) => row.key === topicFeedTopicKey);
|
||
if (!exists) {
|
||
setTopicFeedTopicKey('__all__');
|
||
}
|
||
}, [activeTopicOptions, topicFeedTopicKey]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId || runtimeViewMode !== 'topic') return;
|
||
if (topics.length === 0) {
|
||
void loadTopics(selectedBotId);
|
||
}
|
||
}, [runtimeViewMode, selectedBotId, topics.length]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBot || runtimeViewMode !== 'topic') return;
|
||
void loadTopicFeed({ append: false, topicKey: topicFeedTopicKey });
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedBot?.id, runtimeViewMode, topicFeedTopicKey]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBot || runtimeViewMode !== 'topic') return;
|
||
if (topicDetailOpen) return;
|
||
const timer = window.setInterval(() => {
|
||
void loadTopicFeed({ append: false, topicKey: topicFeedTopicKey });
|
||
}, 15000);
|
||
return () => window.clearInterval(timer);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedBot?.id, runtimeViewMode, topicFeedTopicKey, topicDetailOpen]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId) return;
|
||
void loadTopicFeedStats(selectedBotId);
|
||
const timer = window.setInterval(() => {
|
||
void loadTopicFeedStats(selectedBotId);
|
||
}, 15000);
|
||
return () => window.clearInterval(timer);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
setWorkspaceQuery('');
|
||
}, [selectedBotId, workspaceCurrentPath]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBotId) {
|
||
setWorkspaceSearchEntries([]);
|
||
setWorkspaceSearchLoading(false);
|
||
return;
|
||
}
|
||
if (!workspaceQuery.trim()) {
|
||
setWorkspaceSearchEntries([]);
|
||
setWorkspaceSearchLoading(false);
|
||
return;
|
||
}
|
||
void loadWorkspaceSearchEntries(selectedBotId, workspaceCurrentPath);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [selectedBotId, workspaceCurrentPath, workspaceQuery]);
|
||
|
||
const saveBot = async (mode: 'params' | 'agent' | 'base') => {
|
||
const targetBotId = String(selectedBot?.id || selectedBotId || '').trim();
|
||
if (!targetBotId) {
|
||
notify(isZh ? '未选中 Bot，无法保存。' : 'No bot selected.', { tone: 'warning' });
|
||
return;
|
||
}
|
||
setIsSaving(true);
|
||
try {
|
||
const payload: Record<string, string | number> = {};
|
||
if (mode === 'base') {
|
||
payload.name = editForm.name;
|
||
payload.access_password = editForm.access_password;
|
||
payload.image_tag = editForm.image_tag;
|
||
const selectedImageOption = baseImageOptions.find((opt) => opt.tag === editForm.image_tag);
|
||
if (selectedImageOption?.disabled) {
|
||
throw new Error(isZh ? '当前镜像不可用，请选择可用镜像。' : 'Selected image is unavailable.');
|
||
}
|
||
const normalizedCpuCores = clampCpuCores(Number(paramDraft.cpu_cores));
|
||
const normalizedMemoryMb = clampMemoryMb(Number(paramDraft.memory_mb));
|
||
const normalizedStorageGb = clampStorageGb(Number(paramDraft.storage_gb));
|
||
payload.cpu_cores = normalizedCpuCores;
|
||
payload.memory_mb = normalizedMemoryMb;
|
||
payload.storage_gb = normalizedStorageGb;
|
||
setEditForm((p) => ({
|
||
...p,
|
||
cpu_cores: normalizedCpuCores,
|
||
memory_mb: normalizedMemoryMb,
|
||
storage_gb: normalizedStorageGb,
|
||
}));
|
||
setParamDraft((p) => ({
|
||
...p,
|
||
cpu_cores: String(normalizedCpuCores),
|
||
memory_mb: String(normalizedMemoryMb),
|
||
storage_gb: String(normalizedStorageGb),
|
||
}));
|
||
}
|
||
if (mode === 'params') {
|
||
payload.llm_provider = editForm.llm_provider;
|
||
payload.llm_model = editForm.llm_model;
|
||
payload.api_base = editForm.api_base;
|
||
if (editForm.api_key.trim()) payload.api_key = editForm.api_key.trim();
|
||
payload.temperature = clampTemperature(Number(editForm.temperature));
|
||
payload.top_p = Number(editForm.top_p);
|
||
const normalizedMaxTokens = clampMaxTokens(Number(paramDraft.max_tokens));
|
||
payload.max_tokens = normalizedMaxTokens;
|
||
setEditForm((p) => ({
|
||
...p,
|
||
max_tokens: normalizedMaxTokens,
|
||
}));
|
||
setParamDraft((p) => ({ ...p, max_tokens: String(normalizedMaxTokens) }));
|
||
}
|
||
if (mode === 'agent') {
|
||
payload.agents_md = editForm.agents_md;
|
||
payload.soul_md = editForm.soul_md;
|
||
payload.user_md = editForm.user_md;
|
||
payload.tools_md = editForm.tools_md;
|
||
payload.identity_md = editForm.identity_md;
|
||
}
|
||
|
||
await axios.put(`${APP_ENDPOINTS.apiBase}/bots/${targetBotId}`, payload);
|
||
await refresh();
|
||
setShowBaseModal(false);
|
||
setShowParamModal(false);
|
||
setShowAgentModal(false);
|
||
notify(t.configUpdated, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.saveFail;
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
};
|
||
|
||
const removeBot = async (botId?: string) => {
|
||
const targetId = botId || selectedBot?.id;
|
||
if (!targetId) return;
|
||
const ok = await confirm({
|
||
title: t.delete,
|
||
message: t.deleteBotConfirm(targetId),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${targetId}`, { params: { delete_workspace: true } });
|
||
await refresh();
|
||
if (selectedBotId === targetId) setSelectedBotId('');
|
||
notify(t.deleteBotDone, { tone: 'success' });
|
||
} catch {
|
||
notify(t.deleteFail, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const clearConversationHistory = async () => {
|
||
if (!selectedBot) return;
|
||
const target = selectedBot.name || selectedBot.id;
|
||
const ok = await confirm({
|
||
title: t.clearHistory,
|
||
message: t.clearHistoryConfirm(target),
|
||
tone: 'warning',
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await axios.delete(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/messages`);
|
||
setBotMessages(selectedBot.id, []);
|
||
notify(t.clearHistoryDone, { tone: 'success' });
|
||
} catch (error: any) {
|
||
const msg = error?.response?.data?.detail || t.clearHistoryFail;
|
||
notify(msg, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const exportConversationJson = () => {
|
||
if (!selectedBot) return;
|
||
try {
|
||
const payload = {
|
||
bot_id: selectedBot.id,
|
||
bot_name: selectedBot.name || selectedBot.id,
|
||
exported_at: new Date().toISOString(),
|
||
message_count: conversation.length,
|
||
messages: conversation.map((m) => ({
|
||
id: m.id || null,
|
||
role: m.role,
|
||
text: m.text,
|
||
attachments: m.attachments || [],
|
||
kind: m.kind || 'final',
|
||
feedback: m.feedback || null,
|
||
ts: m.ts,
|
||
datetime: new Date(m.ts).toISOString(),
|
||
})),
|
||
};
|
||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const stamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||
const filename = `${selectedBot.id}-conversation-${stamp}.json`;
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
URL.revokeObjectURL(url);
|
||
} catch {
|
||
notify(t.exportHistoryFail, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
const tabMap: Record<AgentTab, keyof typeof editForm> = {
|
||
AGENTS: 'agents_md',
|
||
SOUL: 'soul_md',
|
||
USER: 'user_md',
|
||
TOOLS: 'tools_md',
|
||
IDENTITY: 'identity_md',
|
||
};
|
||
|
||
const renderWorkspaceNodes = (nodes: WorkspaceNode[]): ReactNode[] => {
|
||
const rendered: ReactNode[] = [];
|
||
if (workspaceParentPath !== null) {
|
||
rendered.push(
|
||
<button
|
||
key="dir:.."
|
||
className="workspace-entry dir nav-up"
|
||
onClick={() => void loadWorkspaceTree(selectedBotId, workspaceParentPath || '')}
|
||
title={t.goUpTitle}
|
||
>
|
||
<FolderOpen size={14} />
|
||
<span className="workspace-entry-name">..</span>
|
||
<span className="workspace-entry-meta">{t.goUp}</span>
|
||
</button>,
|
||
);
|
||
}
|
||
|
||
nodes.forEach((node) => {
|
||
const key = `${node.type}:${node.path}`;
|
||
if (node.type === 'dir') {
|
||
rendered.push(
|
||
<button
|
||
key={key}
|
||
className="workspace-entry dir"
|
||
onClick={() => void loadWorkspaceTree(selectedBotId, node.path)}
|
||
title={t.openFolderTitle}
|
||
>
|
||
<FolderOpen size={14} />
|
||
<span className="workspace-entry-name" title={node.name}>{node.name}</span>
|
||
<span className="workspace-entry-meta">{t.folder}</span>
|
||
</button>,
|
||
);
|
||
return;
|
||
}
|
||
|
||
const previewable = isPreviewableWorkspaceFile(node, workspaceDownloadExtensionSet);
|
||
const downloadOnlyFile = workspaceFileAction(node.path, workspaceDownloadExtensionSet) === 'download';
|
||
rendered.push(
|
||
<button
|
||
key={key}
|
||
className={`workspace-entry file ${previewable ? '' : 'disabled'}`}
|
||
disabled={workspaceFileLoading}
|
||
aria-disabled={!previewable || workspaceFileLoading}
|
||
onClick={() => {
|
||
if (workspaceFileLoading) return;
|
||
if (!previewable) return;
|
||
void openWorkspaceFilePreview(node.path);
|
||
}}
|
||
onMouseEnter={(event) => showWorkspaceHoverCard(node, event.currentTarget)}
|
||
onMouseLeave={hideWorkspaceHoverCard}
|
||
onFocus={(event) => showWorkspaceHoverCard(node, event.currentTarget)}
|
||
onBlur={hideWorkspaceHoverCard}
|
||
title={previewable ? (downloadOnlyFile ? t.download : t.previewTitle) : t.fileNotPreviewable}
|
||
>
|
||
<FileText size={14} />
|
||
<span className="workspace-entry-name" title={node.name}>{node.name}</span>
|
||
<span className="workspace-entry-meta mono">{node.ext || '-'}</span>
|
||
</button>,
|
||
);
|
||
});
|
||
return rendered;
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className={`grid-ops ${compactMode ? 'grid-ops-compact' : ''} ${hasForcedBot && !compactMode ? 'grid-ops-forced' : ''}`}>
|
||
{showBotListPanel ? (
|
||
<section className="panel stack ops-bot-list">
|
||
<div className="row-between">
|
||
<h2 style={{ fontSize: 18 }}>
|
||
{normalizedBotListQuery
|
||
? `${t.titleBots} (${filteredBots.length}/${bots.length})`
|
||
: `${t.titleBots} (${bots.length})`}
|
||
</h2>
|
||
<div className="ops-list-actions" ref={botListMenuRef}>
|
||
<LucentIconButton
|
||
className="btn btn-primary btn-sm icon-btn"
|
||
onClick={onOpenCreateWizard}
|
||
tooltip={t.newBot}
|
||
aria-label={t.newBot}
|
||
>
|
||
<Plus size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setBotListMenuOpen((prev) => !prev)}
|
||
tooltip={t.extensions}
|
||
aria-label={t.extensions}
|
||
aria-haspopup="menu"
|
||
aria-expanded={botListMenuOpen}
|
||
>
|
||
<EllipsisVertical size={14} />
|
||
</LucentIconButton>
|
||
{botListMenuOpen ? (
|
||
<div className="ops-more-menu" role="menu" aria-label={t.extensions}>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
disabled={!onOpenImageFactory}
|
||
onClick={() => {
|
||
setBotListMenuOpen(false);
|
||
onOpenImageFactory?.();
|
||
}}
|
||
>
|
||
<Boxes size={14} />
|
||
<span>{t.manageImages}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
disabled={isLoadingTemplates}
|
||
onClick={() => {
|
||
void openTemplateManager();
|
||
}}
|
||
>
|
||
<FileText size={14} />
|
||
<span>{t.templateManager}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
disabled={isBatchOperating}
|
||
onClick={() => {
|
||
void batchStartBots();
|
||
}}
|
||
>
|
||
<Power size={14} />
|
||
<span>{t.batchStart}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
disabled={isBatchOperating}
|
||
onClick={() => {
|
||
void batchStopBots();
|
||
}}
|
||
>
|
||
<Square size={14} />
|
||
<span>{t.batchStop}</span>
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ops-bot-list-toolbar">
|
||
<div className="ops-searchbar">
|
||
<input
|
||
className="input ops-search-input ops-search-input-with-icon"
|
||
type="search"
|
||
value={botListQuery}
|
||
onChange={(e) => setBotListQuery(e.target.value)}
|
||
placeholder={t.botSearchPlaceholder}
|
||
aria-label={t.botSearchPlaceholder}
|
||
autoComplete="new-password"
|
||
autoCorrect="off"
|
||
autoCapitalize="none"
|
||
spellCheck={false}
|
||
inputMode="search"
|
||
name={botSearchInputName}
|
||
id={botSearchInputName}
|
||
data-form-type="other"
|
||
data-lpignore="true"
|
||
data-1p-ignore="true"
|
||
data-bwignore="true"
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="ops-search-inline-btn"
|
||
onClick={() => {
|
||
if (botListQuery.trim()) {
|
||
setBotListQuery('');
|
||
setBotListPage(1);
|
||
return;
|
||
}
|
||
setBotListPage(1);
|
||
}}
|
||
title={botListQuery.trim() ? t.clearSearch : t.searchAction}
|
||
aria-label={botListQuery.trim() ? t.clearSearch : t.searchAction}
|
||
>
|
||
{botListQuery.trim() ? <X size={14} /> : <Search size={14} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="list-scroll">
|
||
{!botListPageSizeReady ? (
|
||
<div className="ops-bot-list-empty">{t.syncingPageSize}</div>
|
||
) : null}
|
||
{botListPageSizeReady
|
||
? pagedBots.map((bot) => {
|
||
const selected = selectedBotId === bot.id;
|
||
const controlState = controlStateByBot[bot.id];
|
||
const isOperating = operatingBotId === bot.id;
|
||
const isEnabled = bot.enabled !== false;
|
||
const isStarting = controlState === 'starting';
|
||
const isStopping = controlState === 'stopping';
|
||
const isEnabling = controlState === 'enabling';
|
||
const isDisabling = controlState === 'disabling';
|
||
const isRunning = String(bot.docker_status || '').toUpperCase() === 'RUNNING';
|
||
return (
|
||
<div
|
||
key={bot.id}
|
||
className={`ops-bot-card ${selected ? 'is-active' : ''} ${isEnabled ? (isRunning ? 'state-running' : 'state-stopped') : 'state-disabled'}`}
|
||
onClick={() => {
|
||
setSelectedBotId(bot.id);
|
||
if (compactMode) setCompactPanelTab('chat');
|
||
}}
|
||
>
|
||
<span className={`ops-bot-strip ${isEnabled ? (isRunning ? 'is-running' : 'is-stopped') : 'is-disabled'}`} aria-hidden="true" />
|
||
<div className="row-between ops-bot-top">
|
||
<div className="ops-bot-name-wrap">
|
||
<div className="ops-bot-name-row">
|
||
{bot.has_access_password ? (
|
||
<span className="ops-bot-lock" title={isZh ? '已设置访问密码' : 'Access password enabled'} aria-label={isZh ? '已设置访问密码' : 'Access password enabled'}>
|
||
<Lock size={12} />
|
||
</span>
|
||
) : null}
|
||
<div className="ops-bot-name">{bot.name}</div>
|
||
<LucentIconButton
|
||
className="ops-bot-open-inline"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
const target = `${window.location.origin}/bot/${encodeURIComponent(bot.id)}`;
|
||
window.open(target, '_blank', 'noopener,noreferrer');
|
||
}}
|
||
tooltip={isZh ? '新页面打开' : 'Open in new page'}
|
||
aria-label={isZh ? '新页面打开' : 'Open in new page'}
|
||
>
|
||
<ExternalLink size={11} />
|
||
</LucentIconButton>
|
||
</div>
|
||
<div className="mono ops-bot-id">{bot.id}</div>
|
||
</div>
|
||
<div className="ops-bot-top-actions">
|
||
{!isEnabled ? (
|
||
<span className="badge badge-err">{t.disabled}</span>
|
||
) : null}
|
||
<span className={bot.docker_status === 'RUNNING' ? 'badge badge-ok' : 'badge badge-unknown'}>{bot.docker_status}</span>
|
||
</div>
|
||
</div>
|
||
<div className="ops-bot-meta">{t.image}: <span className="mono">{bot.image_tag || '-'}</span></div>
|
||
<div className="ops-bot-actions">
|
||
<label
|
||
className="ops-bot-enable-switch"
|
||
title={isEnabled ? t.disable : t.enable}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={isEnabled}
|
||
disabled={isOperating || isEnabling || isDisabling}
|
||
onChange={(e) => {
|
||
void setBotEnabled(bot.id, e.target.checked);
|
||
}}
|
||
aria-label={isZh ? '启用/停用' : 'Enable/Disable'}
|
||
/>
|
||
<span className="ops-bot-enable-switch-track" />
|
||
</label>
|
||
<div className="ops-bot-actions-main">
|
||
<LucentIconButton
|
||
className={`btn btn-sm ops-bot-icon-btn ${isRunning ? 'ops-bot-action-stop' : 'ops-bot-action-start'}`}
|
||
disabled={isOperating || !isEnabled}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
void (isRunning ? stopBot(bot.id, bot.docker_status) : startBot(bot.id, bot.docker_status));
|
||
}}
|
||
tooltip={isRunning ? t.stop : t.start}
|
||
aria-label={isRunning ? t.stop : t.start}
|
||
>
|
||
{isStarting || isStopping ? (
|
||
<span className="ops-control-pending">
|
||
<span className="ops-control-dots" aria-hidden="true">
|
||
<i />
|
||
<i />
|
||
<i />
|
||
</span>
|
||
</span>
|
||
) : isRunning ? <Square size={14} /> : <Power size={14} />}
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-monitor"
|
||
disabled={isOperating || !isEnabled}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
openResourceMonitor(bot.id);
|
||
}}
|
||
tooltip={isZh ? '资源监测' : 'Resource Monitor'}
|
||
aria-label={isZh ? '资源监测' : 'Resource Monitor'}
|
||
>
|
||
<Gauge size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-delete"
|
||
disabled={isOperating || !isEnabled}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
void removeBot(bot.id);
|
||
}}
|
||
tooltip={t.delete}
|
||
aria-label={t.delete}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
: null}
|
||
{botListPageSizeReady && filteredBots.length === 0 ? (
|
||
<div className="ops-bot-list-empty">{t.botSearchNoResult}</div>
|
||
) : null}
|
||
</div>
|
||
{botListPageSizeReady ? (
|
||
<div className="ops-bot-list-pagination">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
||
onClick={() => setBotListPage((p) => Math.max(1, p - 1))}
|
||
disabled={botListPage <= 1}
|
||
tooltip={t.paginationPrev}
|
||
aria-label={t.paginationPrev}
|
||
>
|
||
<ChevronLeft size={14} />
|
||
</LucentIconButton>
|
||
<div className="ops-bot-list-page-indicator pager-status">{t.paginationPage(botListPage, botListTotalPages)}</div>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
||
onClick={() => setBotListPage((p) => Math.min(botListTotalPages, p + 1))}
|
||
disabled={botListPage >= botListTotalPages}
|
||
tooltip={t.paginationNext}
|
||
aria-label={t.paginationNext}
|
||
>
|
||
<ChevronRight size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
) : null}
|
||
|
||
<section className={`panel ops-chat-panel ${compactMode && (isCompactListPage || compactPanelTab !== 'chat') ? 'ops-compact-hidden' : ''} ${showCompactBotPageClose ? 'ops-compact-bot-surface' : ''}`}>
|
||
{selectedBot ? (
|
||
<div className="ops-chat-shell">
|
||
<div className="ops-main-content-shell">
|
||
<div className="ops-main-content-frame">
|
||
<div className="ops-main-content-head">
|
||
<div className="ops-main-mode-rail" role="tablist" aria-label={isZh ? '主面板视图切换' : 'Main panel view switch'}>
|
||
<button
|
||
className={`ops-main-mode-tab ${runtimeViewMode === 'visual' ? 'is-active' : ''}`}
|
||
onClick={() => setRuntimeViewMode('visual')}
|
||
aria-label={isZh ? '对话视图' : 'Conversation view'}
|
||
role="tab"
|
||
aria-selected={runtimeViewMode === 'visual'}
|
||
>
|
||
<MessageCircle size={14} />
|
||
<span className="ops-main-mode-label">{isZh ? '对话' : 'Chat'}</span>
|
||
</button>
|
||
<button
|
||
className={`ops-main-mode-tab has-dot ${runtimeViewMode === 'topic' ? 'is-active' : ''}`}
|
||
onClick={() => setRuntimeViewMode('topic')}
|
||
aria-label={isZh ? '主题视图' : 'Topic view'}
|
||
role="tab"
|
||
aria-selected={runtimeViewMode === 'topic'}
|
||
>
|
||
<MessageSquareText size={14} />
|
||
<span className="ops-main-mode-label-wrap">
|
||
<span className="ops-main-mode-label">{isZh ? '主题' : 'Topic'}</span>
|
||
{hasTopicUnread ? <span className="ops-switch-dot" aria-hidden="true" /> : null}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="ops-main-content-body">
|
||
{runtimeViewMode === 'topic' ? (
|
||
<TopicFeedPanel
|
||
isZh={isZh}
|
||
topicKey={topicFeedTopicKey}
|
||
topicOptions={activeTopicOptions}
|
||
topicState={topicPanelState}
|
||
items={topicFeedItems}
|
||
loading={topicFeedLoading}
|
||
loadingMore={topicFeedLoadingMore}
|
||
nextCursor={topicFeedNextCursor}
|
||
error={topicFeedError}
|
||
readSavingById={topicFeedReadSavingById}
|
||
deleteSavingById={topicFeedDeleteSavingById}
|
||
onTopicChange={setTopicFeedTopicKey}
|
||
onRefresh={() => void loadTopicFeed({ append: false, topicKey: topicFeedTopicKey })}
|
||
onMarkRead={(itemId) => void markTopicFeedItemRead(itemId)}
|
||
onDeleteItem={(item) => void deleteTopicFeedItem(item)}
|
||
onLoadMore={() => void loadTopicFeed({ append: true, cursor: topicFeedNextCursor, topicKey: topicFeedTopicKey })}
|
||
onOpenWorkspacePath={(path) => void openWorkspacePathFromChat(path)}
|
||
onOpenTopicSettings={() => {
|
||
if (selectedBot) openTopicModal(selectedBot.id);
|
||
}}
|
||
onDetailOpenChange={setTopicDetailOpen}
|
||
layout="panel"
|
||
/>
|
||
) : (
|
||
<div className={`ops-chat-frame ${isChatEnabled ? '' : 'is-disabled'}`}>
|
||
<div className="ops-chat-scroll" ref={chatScrollRef} onScroll={onChatScroll}>
|
||
{conversation.length === 0 ? (
|
||
<div className="ops-chat-empty">
|
||
{t.noConversation}
|
||
</div>
|
||
) : (
|
||
conversationNodes
|
||
)}
|
||
|
||
{isThinking ? (
|
||
<div className="ops-chat-row is-assistant">
|
||
<div className="ops-chat-item is-assistant">
|
||
<div className="ops-avatar bot" title="Nanobot">
|
||
<img src={nanobotLogo} alt="Nanobot" />
|
||
</div>
|
||
<div className="ops-thinking-bubble">
|
||
<div className="ops-thinking-cloud">
|
||
<span className="dot" />
|
||
<span className="dot" />
|
||
<span className="dot" />
|
||
</div>
|
||
<div className="ops-thinking-text">{t.thinking}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<div ref={chatBottomRef} />
|
||
</div>
|
||
|
||
<div className="ops-chat-dock">
|
||
{(quotedReply || pendingAttachments.length > 0) ? (
|
||
<div className="ops-chat-top-context">
|
||
{quotedReply ? (
|
||
<div className="ops-composer-quote" aria-live="polite">
|
||
<div className="ops-composer-quote-head">
|
||
<span>{t.quotedReplyLabel}</span>
|
||
<button
|
||
type="button"
|
||
className="ops-chat-inline-action ops-no-tip-icon-btn"
|
||
onClick={() => setQuotedReply(null)}
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
<div className="ops-composer-quote-text">{normalizeAssistantMessageText(quotedReply.text)}</div>
|
||
</div>
|
||
) : null}
|
||
{pendingAttachments.length > 0 ? (
|
||
<div className="ops-pending-files">
|
||
{pendingAttachments.map((p) => (
|
||
<span key={p} className="ops-pending-chip mono">
|
||
{(() => {
|
||
const filePath = normalizeDashboardAttachmentPath(p);
|
||
const fileAction = workspaceFileAction(filePath, workspaceDownloadExtensionSet);
|
||
const filename = filePath.split('/').pop() || filePath;
|
||
return (
|
||
<a
|
||
className="ops-attach-link mono ops-pending-open"
|
||
href="#"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
void openWorkspacePathFromChat(filePath);
|
||
}}
|
||
>
|
||
{fileAction === 'download' ? (
|
||
<Download size={12} className="ops-attach-link-icon" />
|
||
) : fileAction === 'preview' ? (
|
||
<Eye size={12} className="ops-attach-link-icon" />
|
||
) : (
|
||
<FileText size={12} className="ops-attach-link-icon" />
|
||
)}
|
||
<span className="ops-attach-link-name">{filename}</span>
|
||
</a>
|
||
);
|
||
})()}
|
||
<button
|
||
type="button"
|
||
className="ops-chat-inline-action ops-no-tip-icon-btn"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setPendingAttachments((prev) => prev.filter((v) => v !== p));
|
||
}}
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
{isUploadingAttachments ? (
|
||
<div className="ops-upload-progress" aria-live="polite">
|
||
<div className={`ops-upload-progress-track ${attachmentUploadPercent === null ? 'is-indeterminate' : ''}`}>
|
||
<div
|
||
className="ops-upload-progress-fill"
|
||
style={{ width: `${Math.max(3, Number(attachmentUploadPercent ?? 24))}%` }}
|
||
/>
|
||
</div>
|
||
<span className="ops-upload-progress-text mono">
|
||
{attachmentUploadPercent === null
|
||
? t.uploadingFile
|
||
: `${t.uploadingFile} ${attachmentUploadPercent}%`}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
<div className="ops-composer">
|
||
<input
|
||
ref={filePickerRef}
|
||
type="file"
|
||
multiple
|
||
accept={allowedAttachmentExtensions.length > 0 ? allowedAttachmentExtensions.join(',') : undefined}
|
||
onChange={onPickAttachments}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
<div className={`ops-composer-shell ${controlCommandPanelOpen ? 'is-command-open' : ''}`}>
|
||
<div className="ops-composer-float-controls" ref={controlCommandPanelRef}>
|
||
<div className={`ops-control-command-drawer ${controlCommandPanelOpen ? 'is-open' : ''}`}>
|
||
<button
|
||
type="button"
|
||
className="ops-control-command-chip"
|
||
disabled={!canSendControlCommand || Boolean(activeControlCommand) || Boolean(interruptingByBot[selectedBot.id])}
|
||
onClick={() => void sendControlCommand('/restart')}
|
||
aria-label="/restart"
|
||
title="/restart"
|
||
>
|
||
{activeControlCommand === '/restart' ? <RefreshCw size={11} className="animate-spin" /> : <RotateCcw size={11} />}
|
||
<span className="mono">/restart</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ops-control-command-chip"
|
||
disabled={!canSendControlCommand || Boolean(activeControlCommand) || Boolean(interruptingByBot[selectedBot.id])}
|
||
onClick={() => void sendControlCommand('/new')}
|
||
aria-label="/new"
|
||
title="/new"
|
||
>
|
||
{activeControlCommand === '/new' ? <RefreshCw size={11} className="animate-spin" /> : <Plus size={11} />}
|
||
<span className="mono">/new</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ops-control-command-chip"
|
||
disabled={!selectedBot || !canChat || Boolean(activeControlCommand) || Boolean(interruptingByBot[selectedBot.id])}
|
||
onClick={() => void interruptExecution()}
|
||
aria-label="/stop"
|
||
title="/stop"
|
||
>
|
||
{interruptingByBot[selectedBot.id] ? <RefreshCw size={11} className="animate-spin" /> : <Square size={11} />}
|
||
<span className="mono">/stop</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ops-control-command-chip"
|
||
ref={chatDateTriggerRef}
|
||
disabled={!selectedBotId || chatDateJumping}
|
||
onClick={toggleChatDatePicker}
|
||
aria-label={isZh ? '按日期定位对话' : 'Jump to date'}
|
||
title={isZh ? '按日期定位对话' : 'Jump to date'}
|
||
>
|
||
{chatDateJumping ? <RefreshCw size={11} className="animate-spin" /> : <Clock3 size={11} />}
|
||
<span className="mono">/time</span>
|
||
</button>
|
||
</div>
|
||
{chatDatePickerOpen ? (
|
||
<div
|
||
className="ops-control-date-panel"
|
||
style={chatDatePanelPosition ? { bottom: chatDatePanelPosition.bottom, right: chatDatePanelPosition.right } : undefined}
|
||
>
|
||
<label className="ops-control-date-label">
|
||
<span>{isZh ? '选择日期' : 'Select date'}</span>
|
||
<input
|
||
className="input ops-control-date-input"
|
||
type="date"
|
||
value={chatDateValue}
|
||
max={formatDateInputValue(Date.now())}
|
||
onChange={(event) => setChatDateValue(event.target.value)}
|
||
/>
|
||
</label>
|
||
<div className="ops-control-date-actions">
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary btn-sm"
|
||
onClick={() => setChatDatePickerOpen(false)}
|
||
>
|
||
{isZh ? '取消' : 'Cancel'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary btn-sm"
|
||
disabled={chatDateJumping || !chatDateValue}
|
||
onClick={() => void jumpConversationToDate()}
|
||
>
|
||
{chatDateJumping ? <RefreshCw size={14} className="animate-spin" /> : null}
|
||
<span style={{ marginLeft: chatDateJumping ? 6 : 0 }}>
|
||
{isZh ? '跳转' : 'Jump'}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
<button
|
||
type="button"
|
||
className={`ops-control-command-toggle ${controlCommandPanelOpen ? 'is-open' : ''}`}
|
||
onClick={() => {
|
||
setChatDatePickerOpen(false);
|
||
setControlCommandPanelOpen((prev) => !prev);
|
||
}}
|
||
aria-label={controlCommandPanelOpen ? t.controlCommandsHide : t.controlCommandsShow}
|
||
title={controlCommandPanelOpen ? t.controlCommandsHide : t.controlCommandsShow}
|
||
>
|
||
{controlCommandPanelOpen ? <Command size={12} /> : <ChevronLeft size={13} />}
|
||
</button>
|
||
</div>
|
||
<textarea
|
||
ref={composerTextareaRef}
|
||
className="input ops-composer-input"
|
||
value={command}
|
||
onChange={(e) => setCommand(e.target.value)}
|
||
onKeyDown={onComposerKeyDown}
|
||
disabled={!canChat || isVoiceRecording || isVoiceTranscribing}
|
||
placeholder={
|
||
canChat
|
||
? t.inputPlaceholder
|
||
: t.disabledPlaceholder
|
||
}
|
||
/>
|
||
<div className="ops-composer-tools-right">
|
||
{(isVoiceRecording || isVoiceTranscribing) ? (
|
||
<div className="ops-voice-inline" aria-live="polite">
|
||
<div className={`ops-voice-wave ${isVoiceRecording ? 'is-live' : ''} ${isCompactMobile ? 'is-mobile' : 'is-desktop'}`}>
|
||
{Array.from({ length: isCompactMobile ? 1 : 5 }).map((_, segmentIdx) => (
|
||
<div key={`vw-segment-${segmentIdx}`} className="ops-voice-wave-segment">
|
||
{Array.from({ length: isCompactMobile ? 28 : 18 }).map((_, idx) => {
|
||
const delayIndex = isCompactMobile
|
||
? idx
|
||
: (segmentIdx * 18) + idx;
|
||
return (
|
||
<i
|
||
key={`vw-inline-${segmentIdx}-${idx}`}
|
||
style={{ animationDelay: `${(delayIndex % 14) * 0.06}s` }}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="ops-voice-countdown mono">
|
||
{isVoiceRecording ? `${voiceCountdown}s` : t.voiceTranscribing}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
<button
|
||
className={`ops-composer-inline-btn ${isVoiceRecording ? 'is-recording' : ''}`}
|
||
disabled={!canChat || isVoiceTranscribing}
|
||
onClick={onVoiceInput}
|
||
aria-label={isVoiceRecording ? t.voiceStop : t.voiceStart}
|
||
title={
|
||
isVoiceTranscribing
|
||
? t.voiceTranscribing
|
||
: isVoiceRecording
|
||
? t.voiceStop
|
||
: t.voiceStart
|
||
}
|
||
>
|
||
{isVoiceTranscribing ? (
|
||
<RefreshCw size={16} className="animate-spin" />
|
||
) : isVoiceRecording ? (
|
||
<Square size={16} />
|
||
) : (
|
||
<Mic size={16} />
|
||
)}
|
||
</button>
|
||
<LucentIconButton
|
||
className="ops-composer-inline-btn"
|
||
disabled={!canChat || isUploadingAttachments || isVoiceRecording || isVoiceTranscribing}
|
||
onClick={triggerPickAttachments}
|
||
tooltip={isUploadingAttachments ? t.uploadingFile : t.uploadFile}
|
||
aria-label={isUploadingAttachments ? t.uploadingFile : t.uploadFile}
|
||
>
|
||
<Paperclip size={16} className={isUploadingAttachments ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<button
|
||
className={`ops-composer-submit-btn ${isChatEnabled && (isThinking || isSending) ? 'is-interrupt' : ''}`}
|
||
disabled={
|
||
isChatEnabled && (isThinking || isSending)
|
||
? Boolean(interruptingByBot[selectedBot.id])
|
||
: (
|
||
!isChatEnabled
|
||
|| isVoiceRecording
|
||
|| isVoiceTranscribing
|
||
|| (!command.trim() && pendingAttachments.length === 0 && !quotedReply)
|
||
)
|
||
}
|
||
onClick={() => void (isChatEnabled && (isThinking || isSending) ? interruptExecution() : send())}
|
||
aria-label={isChatEnabled && (isThinking || isSending) ? t.interrupt : t.send}
|
||
title={isChatEnabled && (isThinking || isSending) ? t.interrupt : t.send}
|
||
>
|
||
{isChatEnabled && (isThinking || isSending) ? (
|
||
<Square size={15} />
|
||
) : (
|
||
<ArrowUp size={18} />
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{!canChat ? (
|
||
<div className="ops-chat-disabled-mask">
|
||
<div className="ops-chat-disabled-card">
|
||
{selectedBotControlState === 'starting'
|
||
? t.botStarting
|
||
: selectedBotControlState === 'stopping'
|
||
? t.botStopping
|
||
: !selectedBotEnabled
|
||
? t.botDisabledHint
|
||
: t.chatDisabled}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ color: 'var(--muted)' }}>
|
||
{forcedBotMissing
|
||
? `${t.selectBot}: ${String(forcedBotId).trim()}`
|
||
: t.selectBot}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<section className={`panel stack ops-runtime-panel ${compactMode && (isCompactListPage || compactPanelTab !== 'runtime') ? 'ops-compact-hidden' : ''} ${showCompactBotPageClose ? 'ops-compact-bot-surface' : ''}`}>
|
||
{selectedBot ? (
|
||
<div className="ops-runtime-shell">
|
||
<div className="row-between ops-runtime-head">
|
||
<h2 style={{ fontSize: 18 }}>{t.runtime}</h2>
|
||
<div className="ops-panel-tools" ref={runtimeMenuRef}>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => void restartBot(selectedBot.id, selectedBot.docker_status)}
|
||
disabled={operatingBotId === selectedBot.id || !selectedBotEnabled}
|
||
tooltip={t.restart}
|
||
aria-label={t.restart}
|
||
>
|
||
<RotateCcw size={14} className={operatingBotId === selectedBot.id ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setRuntimeMenuOpen((v) => !v)}
|
||
disabled={!selectedBotEnabled}
|
||
tooltip={runtimeMoreLabel}
|
||
aria-label={runtimeMoreLabel}
|
||
aria-haspopup="menu"
|
||
aria-expanded={runtimeMenuOpen}
|
||
>
|
||
<EllipsisVertical size={14} />
|
||
</LucentIconButton>
|
||
{runtimeMenuOpen ? (
|
||
<div className="ops-more-menu" role="menu" aria-label={runtimeMoreLabel}>
|
||
<>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
void (async () => {
|
||
const detail = await ensureSelectedBotDetail();
|
||
applyEditFormFromBot(detail);
|
||
setProviderTestResult('');
|
||
setShowBaseModal(true);
|
||
})();
|
||
}}
|
||
>
|
||
<Settings2 size={14} />
|
||
<span>{t.base}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
void (async () => {
|
||
const detail = await ensureSelectedBotDetail();
|
||
applyEditFormFromBot(detail);
|
||
setShowParamModal(true);
|
||
})();
|
||
}}
|
||
>
|
||
<SlidersHorizontal size={14} />
|
||
<span>{t.params}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (!selectedBot) return;
|
||
openChannelModal(selectedBot.id);
|
||
}}
|
||
>
|
||
<Waypoints size={14} />
|
||
<span>{t.channels}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (!selectedBot) return;
|
||
openTopicModal(selectedBot.id);
|
||
}}
|
||
>
|
||
<MessageSquareText size={14} />
|
||
<span>{t.topic}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (!selectedBot) return;
|
||
void loadBotEnvParams(selectedBot.id);
|
||
setShowEnvParamsModal(true);
|
||
}}
|
||
>
|
||
<Settings2 size={14} />
|
||
<span>{t.envParams}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (!selectedBot) return;
|
||
void loadBotSkills(selectedBot.id);
|
||
setShowSkillsModal(true);
|
||
}}
|
||
>
|
||
<Hammer size={14} />
|
||
<span>{t.skills}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (!selectedBot) return;
|
||
openMcpModal(selectedBot.id);
|
||
}}
|
||
>
|
||
<Boxes size={14} />
|
||
<span>{t.mcp}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
if (selectedBot) void loadCronJobs(selectedBot.id);
|
||
setShowCronModal(true);
|
||
}}
|
||
>
|
||
<Clock3 size={14} />
|
||
<span>{t.cronViewer}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
void (async () => {
|
||
const detail = await ensureSelectedBotDetail();
|
||
applyEditFormFromBot(detail);
|
||
setShowAgentModal(true);
|
||
})();
|
||
}}
|
||
>
|
||
<FileText size={14} />
|
||
<span>{t.agent}</span>
|
||
</button>
|
||
</>
|
||
<button
|
||
className="ops-more-item"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
exportConversationJson();
|
||
}}
|
||
>
|
||
<Save size={14} />
|
||
<span>{t.exportHistory}</span>
|
||
</button>
|
||
<button
|
||
className="ops-more-item danger"
|
||
role="menuitem"
|
||
onClick={() => {
|
||
setRuntimeMenuOpen(false);
|
||
void clearConversationHistory();
|
||
}}
|
||
>
|
||
<Trash2 size={14} />
|
||
<span>{t.clearHistory}</span>
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ops-runtime-scroll">
|
||
<div
|
||
className="card ops-runtime-card ops-runtime-state-card is-visual"
|
||
>
|
||
<div className={`ops-state-stage ops-state-${String(displayState).toLowerCase()}`}>
|
||
<div className="ops-state-model mono">{selectedBot.llm_model || '-'}</div>
|
||
<div className="ops-state-face" aria-hidden="true">
|
||
<span className="ops-state-eye left" />
|
||
<span className="ops-state-eye right" />
|
||
</div>
|
||
<div className="ops-state-caption mono">{String(displayState || 'IDLE').toUpperCase()}</div>
|
||
{displayState === 'TOOL_CALL' ? <Hammer size={18} className="ops-state-float state-tool" /> : null}
|
||
{displayState === 'SUCCESS' ? <Check size={18} className="ops-state-float state-success" /> : null}
|
||
{displayState === 'ERROR' ? <TriangleAlert size={18} className="ops-state-float state-error" /> : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card ops-runtime-card">
|
||
<div className="section-mini-title">{t.workspaceOutputs}</div>
|
||
{workspaceError ? <div className="ops-empty-inline">{workspaceError}</div> : null}
|
||
<div className="workspace-toolbar">
|
||
<div className="workspace-path-wrap">
|
||
<div className="workspace-path mono" title={workspacePathDisplay}>
|
||
{workspacePathDisplay}
|
||
</div>
|
||
</div>
|
||
<div className="workspace-toolbar-actions">
|
||
<LucentIconButton
|
||
className="workspace-refresh-icon-btn"
|
||
disabled={workspaceLoading || !selectedBotId}
|
||
onClick={() => void loadWorkspaceTree(selectedBot.id, workspaceCurrentPath)}
|
||
tooltip={lc.refreshHint}
|
||
aria-label={lc.refreshHint}
|
||
>
|
||
<RefreshCw size={14} className={workspaceLoading ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<label className="workspace-auto-switch" title={lc.autoRefresh}>
|
||
<span className="workspace-auto-switch-label">{lc.autoRefresh}</span>
|
||
<input
|
||
type="checkbox"
|
||
checked={workspaceAutoRefresh}
|
||
onChange={() => setWorkspaceAutoRefresh((v) => !v)}
|
||
aria-label={t.autoRefresh}
|
||
/>
|
||
<span className="workspace-auto-switch-track" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="workspace-search-toolbar">
|
||
<div className="ops-searchbar">
|
||
<input
|
||
className="input ops-search-input ops-search-input-with-icon"
|
||
type="search"
|
||
value={workspaceQuery}
|
||
onChange={(e) => setWorkspaceQuery(e.target.value)}
|
||
placeholder={t.workspaceSearchPlaceholder}
|
||
aria-label={t.workspaceSearchPlaceholder}
|
||
autoComplete="new-password"
|
||
autoCorrect="off"
|
||
autoCapitalize="none"
|
||
spellCheck={false}
|
||
inputMode="search"
|
||
name={workspaceSearchInputName}
|
||
id={workspaceSearchInputName}
|
||
data-form-type="other"
|
||
data-lpignore="true"
|
||
data-1p-ignore="true"
|
||
data-bwignore="true"
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="ops-search-inline-btn"
|
||
onClick={() => {
|
||
if (workspaceQuery.trim()) {
|
||
setWorkspaceQuery('');
|
||
return;
|
||
}
|
||
setWorkspaceQuery((v) => v.trim());
|
||
}}
|
||
title={workspaceQuery.trim() ? t.clearSearch : t.searchAction}
|
||
aria-label={workspaceQuery.trim() ? t.clearSearch : t.searchAction}
|
||
>
|
||
{workspaceQuery.trim() ? <X size={14} /> : <Search size={14} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="workspace-panel">
|
||
<div className="workspace-list">
|
||
{workspaceLoading || workspaceSearchLoading ? (
|
||
<div className="ops-empty-inline">{t.loadingDir}</div>
|
||
) : renderWorkspaceNodes(filteredWorkspaceEntries).length === 0 ? (
|
||
<div className="ops-empty-inline">{normalizedWorkspaceQuery ? t.workspaceSearchNoResult : t.emptyDir}</div>
|
||
) : (
|
||
renderWorkspaceNodes(filteredWorkspaceEntries)
|
||
)}
|
||
</div>
|
||
<div className="workspace-hint">
|
||
{workspaceFileLoading
|
||
? t.openingPreview
|
||
: t.workspaceHint}
|
||
</div>
|
||
</div>
|
||
{workspaceFiles.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.noPreviewFile}</div>
|
||
) : null}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ color: 'var(--muted)' }}>
|
||
{forcedBotMissing
|
||
? `${t.noTelemetry}: ${String(forcedBotId).trim()}`
|
||
: t.noTelemetry}
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
{showCompactBotPageClose ? (
|
||
<LucentIconButton
|
||
className="ops-compact-close-btn"
|
||
onClick={() => {
|
||
setSelectedBotId('');
|
||
setCompactPanelTab('chat');
|
||
}}
|
||
tooltip={isZh ? '关闭并返回 Bot 列表' : 'Close and back to bot list'}
|
||
aria-label={isZh ? '关闭并返回 Bot 列表' : 'Close and back to bot list'}
|
||
>
|
||
<X size={16} />
|
||
</LucentIconButton>
|
||
) : null}
|
||
{compactMode && !isCompactListPage ? (
|
||
<div className="ops-compact-fab-stack">
|
||
<LucentIconButton
|
||
className={`ops-compact-fab-switch ${compactPanelTab === 'chat' ? 'is-chat' : 'is-runtime'}`}
|
||
onClick={() => setCompactPanelTab((v) => (v === 'runtime' ? 'chat' : 'runtime'))}
|
||
tooltip={compactPanelTab === 'runtime' ? (isZh ? '切换到对话面板' : 'Switch to chat') : (isZh ? '切换到运行面板' : 'Switch to runtime')}
|
||
aria-label={compactPanelTab === 'runtime' ? (isZh ? '切换到对话面板' : 'Switch to chat') : (isZh ? '切换到运行面板' : 'Switch to runtime')}
|
||
>
|
||
{compactPanelTab === 'runtime' ? <MessageSquareText size={18} /> : <Activity size={18} />}
|
||
</LucentIconButton>
|
||
</div>
|
||
) : null}
|
||
|
||
{showResourceModal && (
|
||
<div className="modal-mask" onClick={() => setShowResourceModal(false)}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{isZh ? '资源监测' : 'Resource Monitor'}</h3>
|
||
<span className="modal-sub mono">{resourceBot?.name || resourceBotId}</span>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => void loadResourceSnapshot(resourceBotId)}
|
||
tooltip={isZh ? '立即刷新' : 'Refresh now'}
|
||
aria-label={isZh ? '立即刷新' : 'Refresh now'}
|
||
>
|
||
<RefreshCw size={14} className={resourceLoading ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setShowResourceModal(false)}
|
||
tooltip={t.close}
|
||
aria-label={t.close}
|
||
>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
|
||
{resourceError ? <div className="card">{resourceError}</div> : null}
|
||
{resourceSnapshot ? (
|
||
<div className="stack">
|
||
<div className="card summary-grid">
|
||
<div>{isZh ? '容器状态' : 'Container'}: <strong className="mono">{resourceSnapshot.docker_status}</strong></div>
|
||
<div>{isZh ? '容器名' : 'Container Name'}: <span className="mono">{resourceSnapshot.bot_id ? `worker_${resourceSnapshot.bot_id}` : '-'}</span></div>
|
||
<div>{isZh ? '基础镜像' : 'Base Image'}: <span className="mono">{resourceBot?.image_tag || '-'}</span></div>
|
||
<div>Provider/Model: <span className="mono">{resourceBot?.llm_provider || '-'} / {resourceBot?.llm_model || '-'}</span></div>
|
||
<div>{isZh ? '采样时间' : 'Collected'}: <span className="mono">{resourceSnapshot.collected_at}</span></div>
|
||
<div>{isZh ? '策略说明' : 'Policy'}: <strong>{isZh ? '资源值 0 = 不限制' : 'Value 0 = Unlimited'}</strong></div>
|
||
</div>
|
||
|
||
<div className="grid-2" style={{ gridTemplateColumns: '1fr 1fr' }}>
|
||
<div className="card stack">
|
||
<div className="section-mini-title">{isZh ? '配置配额' : 'Configured Limits'}</div>
|
||
<div className="ops-runtime-row"><span>CPU</span><strong>{Number(resourceSnapshot.configured.cpu_cores) === 0 ? (isZh ? '不限' : 'Unlimited') : resourceSnapshot.configured.cpu_cores}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '内存' : 'Memory'}</span><strong>{Number(resourceSnapshot.configured.memory_mb) === 0 ? (isZh ? '不限' : 'Unlimited') : `${resourceSnapshot.configured.memory_mb} MB`}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '存储' : 'Storage'}</span><strong>{Number(resourceSnapshot.configured.storage_gb) === 0 ? (isZh ? '不限' : 'Unlimited') : `${resourceSnapshot.configured.storage_gb} GB`}</strong></div>
|
||
</div>
|
||
|
||
<div className="card stack">
|
||
<div className="section-mini-title">{isZh ? 'Docker 实际限制' : 'Docker Runtime Limits'}</div>
|
||
<div className="ops-runtime-row"><span>CPU</span><strong>{resourceSnapshot.runtime.limits.cpu_cores ? resourceSnapshot.runtime.limits.cpu_cores.toFixed(2) : (Number(resourceSnapshot.configured.cpu_cores) === 0 ? (isZh ? '不限' : 'Unlimited') : '-')}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '内存' : 'Memory'}</span><strong>{resourceSnapshot.runtime.limits.memory_bytes ? formatBytes(resourceSnapshot.runtime.limits.memory_bytes) : (Number(resourceSnapshot.configured.memory_mb) === 0 ? (isZh ? '不限' : 'Unlimited') : '-')}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '存储' : 'Storage'}</span><strong>{resourceSnapshot.runtime.limits.storage_bytes ? formatBytes(resourceSnapshot.runtime.limits.storage_bytes) : (resourceSnapshot.runtime.limits.storage_opt_raw || (Number(resourceSnapshot.configured.storage_gb) === 0 ? (isZh ? '不限' : 'Unlimited') : '-'))}</strong></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card stack">
|
||
<div className="section-mini-title">{isZh ? '实时使用' : 'Live Usage'}</div>
|
||
<div className="ops-runtime-row"><span>CPU</span><strong>{formatPercent(resourceSnapshot.runtime.usage.cpu_percent)}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '内存' : 'Memory'}</span><strong>{formatBytes(resourceSnapshot.runtime.usage.memory_bytes)} / {resourceSnapshot.runtime.usage.memory_limit_bytes > 0 ? formatBytes(resourceSnapshot.runtime.usage.memory_limit_bytes) : '-'}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '内存占比' : 'Memory %'}</span><strong>{formatPercent(resourceSnapshot.runtime.usage.memory_percent)}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '工作区占用' : 'Workspace Usage'}</span><strong>{formatBytes(resourceSnapshot.workspace.usage_bytes)} / {resourceSnapshot.workspace.configured_limit_bytes ? formatBytes(resourceSnapshot.workspace.configured_limit_bytes) : '-'}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '工作区占比' : 'Workspace %'}</span><strong>{formatPercent(resourceSnapshot.workspace.usage_percent)}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '网络 I/O' : 'Network I/O'}</span><strong>RX {formatBytes(resourceSnapshot.runtime.usage.network_rx_bytes)} · TX {formatBytes(resourceSnapshot.runtime.usage.network_tx_bytes)}</strong></div>
|
||
<div className="ops-runtime-row"><span>{isZh ? '磁盘 I/O' : 'Block I/O'}</span><strong>R {formatBytes(resourceSnapshot.runtime.usage.blk_read_bytes)} · W {formatBytes(resourceSnapshot.runtime.usage.blk_write_bytes)}</strong></div>
|
||
<div className="ops-runtime-row"><span>PIDs</span><strong>{resourceSnapshot.runtime.usage.pids || 0}</strong></div>
|
||
</div>
|
||
|
||
<div className="field-label">
|
||
{resourceSnapshot.note}
|
||
{isZh ? '（界面规则：资源配置填写 0 表示不限制）' : ' (UI rule: value 0 means unlimited)'}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="ops-empty-inline">{resourceLoading ? (isZh ? '读取中...' : 'Loading...') : (isZh ? '暂无监控数据' : 'No metrics')}</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showBaseModal && (
|
||
<div className="modal-mask" onClick={() => setShowBaseModal(false)}>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.baseConfig}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowBaseModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
|
||
<label className="field-label">{t.botIdReadonly}</label>
|
||
<input className="input" value={selectedBot?.id || ''} disabled />
|
||
|
||
<label className="field-label">{t.botName}</label>
|
||
<input className="input" value={editForm.name} onChange={(e) => setEditForm((p) => ({ ...p, name: e.target.value }))} placeholder={t.botNamePlaceholder} />
|
||
|
||
<label className="field-label">{t.accessPassword}</label>
|
||
<PasswordInput
|
||
className="input"
|
||
value={editForm.access_password}
|
||
onChange={(e) => setEditForm((p) => ({ ...p, access_password: e.target.value }))}
|
||
placeholder={t.accessPasswordPlaceholder}
|
||
toggleLabels={passwordToggleLabels}
|
||
/>
|
||
|
||
<label className="field-label">{t.baseImageReadonly}</label>
|
||
<LucentSelect
|
||
value={editForm.image_tag}
|
||
onChange={(e) => setEditForm((p) => ({ ...p, image_tag: e.target.value }))}
|
||
>
|
||
{baseImageOptions.map((img) => (
|
||
<option key={img.tag} value={img.tag} disabled={img.disabled}>
|
||
{img.label}
|
||
</option>
|
||
))}
|
||
</LucentSelect>
|
||
|
||
<label className="field-label">{isZh ? 'CPU 核心数' : 'CPU Cores'}</label>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
min="0"
|
||
max="16"
|
||
step="0.1"
|
||
value={paramDraft.cpu_cores}
|
||
onChange={(e) => setParamDraft((p) => ({ ...p, cpu_cores: e.target.value }))}
|
||
/>
|
||
<label className="field-label">{isZh ? '内存 (MB)' : 'Memory (MB)'}</label>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
min="0"
|
||
max="65536"
|
||
step="128"
|
||
value={paramDraft.memory_mb}
|
||
onChange={(e) => setParamDraft((p) => ({ ...p, memory_mb: e.target.value }))}
|
||
/>
|
||
<label className="field-label">{isZh ? '存储 (GB)' : 'Storage (GB)'}</label>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
min="0"
|
||
max="1024"
|
||
step="1"
|
||
value={paramDraft.storage_gb}
|
||
onChange={(e) => setParamDraft((p) => ({ ...p, storage_gb: e.target.value }))}
|
||
/>
|
||
<div className="field-label">{isZh ? '提示：填写 0 表示不限制（保存后需手动重启 Bot 生效）。' : 'Tip: value 0 means unlimited (takes effect after manual bot restart).'}</div>
|
||
<div className="row-between">
|
||
<button className="btn btn-secondary" onClick={() => setShowBaseModal(false)}>{t.cancel}</button>
|
||
<button className="btn btn-primary" disabled={isSaving} onClick={() => void saveBot('base')}>{t.save}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showParamModal && (
|
||
<div className="modal-mask" onClick={() => setShowParamModal(false)}>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.modelParams}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowParamModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<label className="field-label">Provider</label>
|
||
<LucentSelect value={editForm.llm_provider} onChange={(e) => onBaseProviderChange(e.target.value)}>
|
||
<option value="openrouter">openrouter</option>
|
||
<option value="dashscope">dashscope (aliyun qwen)</option>
|
||
<option value="openai">openai</option>
|
||
<option value="deepseek">deepseek</option>
|
||
<option value="kimi">kimi (moonshot)</option>
|
||
<option value="minimax">minimax</option>
|
||
<option value="xunfei">xunfei (spark)</option>
|
||
</LucentSelect>
|
||
|
||
<label className="field-label">{t.modelName}</label>
|
||
<input className="input" value={editForm.llm_model} onChange={(e) => setEditForm((p) => ({ ...p, llm_model: e.target.value }))} placeholder={t.modelNamePlaceholder} />
|
||
|
||
<label className="field-label">{t.newApiKey}</label>
|
||
<PasswordInput className="input" value={editForm.api_key} onChange={(e) => setEditForm((p) => ({ ...p, api_key: e.target.value }))} placeholder={t.newApiKeyPlaceholder} toggleLabels={passwordToggleLabels} />
|
||
|
||
<label className="field-label">API Base</label>
|
||
<input className="input" value={editForm.api_base} onChange={(e) => setEditForm((p) => ({ ...p, api_base: e.target.value }))} placeholder="API Base URL" />
|
||
|
||
<div className="card" style={{ fontSize: 12, color: 'var(--muted)' }}>
|
||
{providerPresets[editForm.llm_provider]?.note[noteLocale]}
|
||
</div>
|
||
<button className="btn btn-secondary" onClick={() => void testProviderConnection()} disabled={isTestingProvider}>
|
||
{isTestingProvider ? t.testing : t.testModelConnection}
|
||
</button>
|
||
{providerTestResult && <div className="card">{providerTestResult}</div>}
|
||
|
||
<div className="slider-row">
|
||
<label className="field-label">Temperature: {Number(editForm.temperature).toFixed(2)}</label>
|
||
<input type="range" min="0" max="1" step="0.01" value={editForm.temperature} onChange={(e) => setEditForm((p) => ({ ...p, temperature: clampTemperature(Number(e.target.value)) }))} />
|
||
</div>
|
||
<div className="slider-row">
|
||
<label className="field-label">Top P: {Number(editForm.top_p).toFixed(2)}</label>
|
||
<input type="range" min="0" max="1" step="0.01" value={editForm.top_p} onChange={(e) => setEditForm((p) => ({ ...p, top_p: Number(e.target.value) }))} />
|
||
</div>
|
||
<label className="field-label">Max Tokens</label>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
step="1"
|
||
min="256"
|
||
max="32768"
|
||
value={paramDraft.max_tokens}
|
||
onChange={(e) => setParamDraft((p) => ({ ...p, max_tokens: e.target.value }))}
|
||
/>
|
||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||
{[4096, 8192, 16384, 32768].map((value) => (
|
||
<button
|
||
key={value}
|
||
className="btn btn-secondary btn-sm"
|
||
type="button"
|
||
onClick={() => setParamDraft((p) => ({ ...p, max_tokens: String(value) }))}
|
||
>
|
||
{value}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="row-between">
|
||
<button className="btn btn-secondary" onClick={() => setShowParamModal(false)}>{t.cancel}</button>
|
||
<button className="btn btn-primary" disabled={isSaving} onClick={() => void saveBot('params')}>{t.saveParams}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showChannelModal && (
|
||
<div
|
||
className="modal-mask"
|
||
onClick={() => {
|
||
setShowChannelModal(false);
|
||
setChannelCreateMenuOpen(false);
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
}}
|
||
>
|
||
<div className="modal-card modal-wide ops-modal-scrollable ops-config-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{lc.wizardSectionTitle}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
setShowChannelModal(false);
|
||
setChannelCreateMenuOpen(false);
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
}}
|
||
tooltip={t.close}
|
||
aria-label={t.close}
|
||
>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="card" style={{ fontSize: 12, color: 'var(--muted)' }}>
|
||
{lc.wizardSectionDesc}
|
||
</div>
|
||
<div className="card">
|
||
<div className="section-mini-title">{lc.globalDeliveryTitle}</div>
|
||
<div className="field-label">{lc.globalDeliveryDesc}</div>
|
||
<div className="wizard-dashboard-switches" style={{ marginTop: 8 }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(globalDelivery.sendProgress)}
|
||
onChange={(e) => updateGlobalDeliveryFlag('sendProgress', e.target.checked)}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.sendProgress}
|
||
</label>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(globalDelivery.sendToolHints)}
|
||
onChange={(e) => updateGlobalDeliveryFlag('sendToolHints', e.target.checked)}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.sendToolHints}
|
||
</label>
|
||
<LucentIconButton
|
||
className="btn btn-primary btn-sm icon-btn"
|
||
disabled={isSavingGlobalDelivery || !selectedBot}
|
||
onClick={() => void saveGlobalDelivery()}
|
||
tooltip={lc.saveChannel}
|
||
aria-label={lc.saveChannel}
|
||
>
|
||
<Save size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="wizard-channel-list ops-config-list-scroll">
|
||
{channels.filter((channel) => !isDashboardChannel(channel)).length === 0 ? (
|
||
<div className="ops-empty-inline">{lc.channelEmpty}</div>
|
||
) : (
|
||
channels.map((channel, idx) => {
|
||
if (isDashboardChannel(channel)) return null;
|
||
const uiKey = channelDraftUiKey(channel, idx);
|
||
const expanded = expandedChannelByKey[uiKey] ?? idx === 0;
|
||
const hasCredential = isChannelConfigured(channel);
|
||
const summary = [
|
||
String(channel.channel_type || '').toUpperCase(),
|
||
channel.is_active ? lc.enabled : lc.disabled,
|
||
hasCredential ? lc.channelConfigured : lc.channelPending,
|
||
].join(' · ');
|
||
return (
|
||
<div key={`${channel.id}-${channel.channel_type}`} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong>{String(channel.channel_type || '').toUpperCase()}</strong>
|
||
<div className="ops-config-collapsed-meta">{summary}</div>
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={channel.is_active}
|
||
onChange={(e) => updateChannelLocal(idx, { is_active: e.target.checked })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.enabled}
|
||
</label>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
disabled={isSavingChannel}
|
||
onClick={() => void removeChannel(channel)}
|
||
tooltip={lc.remove}
|
||
aria-label={lc.remove}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => setExpandedChannelByKey((prev) => ({ ...prev, [uiKey]: !expanded }))}
|
||
tooltip={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
aria-label={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
>
|
||
{expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
{expanded ? (
|
||
<>
|
||
<div className="ops-topic-grid">
|
||
{renderChannelFields(channel, (patch) => updateChannelLocal(idx, patch))}
|
||
</div>
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{lc.customChannel}</span>
|
||
<button
|
||
className="btn btn-primary btn-sm"
|
||
disabled={isSavingChannel}
|
||
onClick={() => void saveChannel(channel)}
|
||
>
|
||
<Save size={14} />
|
||
<span style={{ marginLeft: 6 }}>{lc.saveChannel}</span>
|
||
</button>
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
{newChannelPanelOpen ? (
|
||
<div className="card wizard-channel-card wizard-channel-compact ops-config-new-card">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong>{lc.addChannel}</strong>
|
||
<div className="ops-config-collapsed-meta">{String(newChannelDraft.channel_type || '').toUpperCase()}</div>
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => {
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
}}
|
||
tooltip={t.cancel}
|
||
aria-label={t.cancel}
|
||
>
|
||
<X size={15} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="ops-topic-grid">
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{lc.channelType}</label>
|
||
<input className="input mono" value={String(newChannelDraft.channel_type || '').toUpperCase()} readOnly />
|
||
</div>
|
||
<div className="ops-config-field" style={{ alignSelf: 'end' }}>
|
||
<label className="field-label" style={{ visibility: 'hidden' }}>{lc.enabled}</label>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={newChannelDraft.is_active}
|
||
onChange={(e) => setNewChannelDraft((prev) => ({ ...prev, is_active: e.target.checked }))}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.enabled}
|
||
</label>
|
||
</div>
|
||
{renderChannelFields(newChannelDraft, (patch) => setNewChannelDraft((prev) => ({ ...prev, ...patch })))}
|
||
</div>
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{lc.channelAddHint}</span>
|
||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
onClick={() => {
|
||
setNewChannelPanelOpen(false);
|
||
resetNewChannelDraft();
|
||
}}
|
||
>
|
||
{t.cancel}
|
||
</button>
|
||
<button className="btn btn-primary btn-sm" disabled={isSavingChannel} onClick={() => void addChannel()}>
|
||
<Save size={14} />
|
||
<span style={{ marginLeft: 6 }}>{lc.saveChannel}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{!newChannelPanelOpen ? (
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{lc.channelAddHint}</span>
|
||
<div className="ops-topic-create-menu-wrap" ref={channelCreateMenuRef}>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
disabled={addableChannelTypes.length === 0 || isSavingChannel}
|
||
onClick={() => setChannelCreateMenuOpen((prev) => !prev)}
|
||
>
|
||
<Plus size={14} />
|
||
<span style={{ marginLeft: 6 }}>{lc.addChannel}</span>
|
||
</button>
|
||
{channelCreateMenuOpen ? (
|
||
<div className="ops-topic-create-menu">
|
||
{addableChannelTypes.map((channelType) => (
|
||
<button
|
||
key={channelType}
|
||
className="ops-topic-create-menu-item"
|
||
onClick={() => beginChannelCreate(channelType)}
|
||
>
|
||
{String(channelType || '').toUpperCase()}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showTopicModal && (
|
||
<div
|
||
className="modal-mask"
|
||
onClick={() => {
|
||
setShowTopicModal(false);
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicPanelOpen(false);
|
||
resetNewTopicDraft();
|
||
}}
|
||
>
|
||
<div className="modal-card modal-wide ops-modal-scrollable ops-config-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.topicPanel}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
setShowTopicModal(false);
|
||
setTopicPresetMenuOpen(false);
|
||
setNewTopicPanelOpen(false);
|
||
resetNewTopicDraft();
|
||
}}
|
||
tooltip={t.close}
|
||
aria-label={t.close}
|
||
>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="card" style={{ fontSize: 12, color: 'var(--muted)' }}>
|
||
{t.topicPanelDesc}
|
||
</div>
|
||
<div className="wizard-channel-list ops-config-list-scroll">
|
||
{topics.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.topicEmpty}</div>
|
||
) : (
|
||
topics.map((topic, idx) => {
|
||
const uiKey = topicDraftUiKey(topic, idx);
|
||
const expanded = expandedTopicByKey[uiKey] ?? idx === 0;
|
||
const includeCount = normalizeRoutingTextList(String(topic.routing_include_when || '')).length;
|
||
const excludeCount = normalizeRoutingTextList(String(topic.routing_exclude_when || '')).length;
|
||
return (
|
||
<div key={`${topic.id}-${topic.topic_key}`} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong className="mono">{topic.topic_key}</strong>
|
||
<div className="field-label">{topic.name || topic.topic_key}</div>
|
||
{!expanded ? (
|
||
<div className="ops-config-collapsed-meta">
|
||
{`${t.topicPriority}: ${topic.routing_priority || '50'} · ${isZh ? '命中' : 'include'} ${includeCount} · ${isZh ? '排除' : 'exclude'} ${excludeCount}`}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(topic.is_active)}
|
||
onChange={(e) => updateTopicLocal(idx, { is_active: e.target.checked })}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{t.topicActive}
|
||
</label>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
disabled={isSavingTopic}
|
||
onClick={() => void removeTopic(topic)}
|
||
tooltip={t.delete}
|
||
aria-label={t.delete}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => setExpandedTopicByKey((prev) => ({ ...prev, [uiKey]: !expanded }))}
|
||
tooltip={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
aria-label={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
>
|
||
{expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
{expanded ? (
|
||
<>
|
||
<div className="ops-topic-grid">
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicName}</label>
|
||
<input
|
||
className="input"
|
||
value={topic.name || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { name: e.target.value })}
|
||
placeholder={t.topicName}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicPriority}</label>
|
||
<input
|
||
className="input mono"
|
||
type="number"
|
||
min={0}
|
||
max={100}
|
||
step={1}
|
||
value={topic.routing_priority || '50'}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_priority: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">{t.topicDescription}</label>
|
||
<textarea
|
||
className="input"
|
||
rows={3}
|
||
value={topic.description || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { description: e.target.value })}
|
||
placeholder={t.topicDescription}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">{t.topicPurpose}</label>
|
||
<textarea
|
||
className="input"
|
||
rows={3}
|
||
value={topic.routing_purpose || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_purpose: e.target.value })}
|
||
placeholder={t.topicPurpose}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicIncludeWhen}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={topic.routing_include_when || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_include_when: e.target.value })}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExcludeWhen}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={topic.routing_exclude_when || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_exclude_when: e.target.value })}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExamplesPositive}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={topic.routing_examples_positive || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_examples_positive: e.target.value })}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExamplesNegative}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={topic.routing_examples_negative || ''}
|
||
onChange={(e) => updateTopicLocal(idx, { routing_examples_negative: e.target.value })}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.topicAddHint}</span>
|
||
<button className="btn btn-primary btn-sm" disabled={isSavingTopic} onClick={() => void saveTopic(topic)}>
|
||
{isSavingTopic ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
|
||
<span style={{ marginLeft: 6 }}>{t.save}</span>
|
||
</button>
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
{newTopicPanelOpen ? (
|
||
<div className="card wizard-channel-card wizard-channel-compact ops-config-new-card">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong>{t.topicAdd}</strong>
|
||
<div className="ops-config-collapsed-meta">
|
||
{newTopicSourceLabel}
|
||
</div>
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => setNewTopicAdvancedOpen((prev) => !prev)}
|
||
tooltip={newTopicAdvancedOpen ? (isZh ? '收起高级路由' : 'Hide Advanced') : (isZh ? '展开高级路由' : 'Show Advanced')}
|
||
aria-label={newTopicAdvancedOpen ? (isZh ? '收起高级路由' : 'Hide Advanced') : (isZh ? '展开高级路由' : 'Show Advanced')}
|
||
>
|
||
{newTopicAdvancedOpen ? <ChevronUp size={15} /> : <ChevronDown size={15} />}
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => {
|
||
setNewTopicPanelOpen(false);
|
||
setTopicPresetMenuOpen(false);
|
||
resetNewTopicDraft();
|
||
}}
|
||
tooltip={t.cancel}
|
||
aria-label={t.cancel}
|
||
>
|
||
<X size={15} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="ops-topic-grid">
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicKey}</label>
|
||
<input
|
||
className="input mono"
|
||
value={newTopicKey}
|
||
onChange={(e) => setNewTopicKey(normalizeTopicKeyInput(e.target.value))}
|
||
placeholder={t.topicKeyPlaceholder}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicName}</label>
|
||
<input
|
||
className="input"
|
||
value={newTopicName}
|
||
onChange={(e) => setNewTopicName(e.target.value)}
|
||
placeholder={t.topicName}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">{t.topicDescription}</label>
|
||
<textarea
|
||
className="input"
|
||
rows={3}
|
||
value={newTopicDescription}
|
||
onChange={(e) => setNewTopicDescription(e.target.value)}
|
||
placeholder={t.topicDescription}
|
||
/>
|
||
</div>
|
||
{newTopicAdvancedOpen ? (
|
||
<>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">{t.topicPurpose}</label>
|
||
<textarea
|
||
className="input"
|
||
rows={3}
|
||
value={newTopicPurpose}
|
||
onChange={(e) => setNewTopicPurpose(e.target.value)}
|
||
placeholder={t.topicPurpose}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicIncludeWhen}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={newTopicIncludeWhen}
|
||
onChange={(e) => setNewTopicIncludeWhen(e.target.value)}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExcludeWhen}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={newTopicExcludeWhen}
|
||
onChange={(e) => setNewTopicExcludeWhen(e.target.value)}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExamplesPositive}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={newTopicExamplesPositive}
|
||
onChange={(e) => setNewTopicExamplesPositive(e.target.value)}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicExamplesNegative}</label>
|
||
<textarea
|
||
className="input mono"
|
||
rows={4}
|
||
value={newTopicExamplesNegative}
|
||
onChange={(e) => setNewTopicExamplesNegative(e.target.value)}
|
||
placeholder={t.topicListHint}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.topicPriority}</label>
|
||
<input
|
||
className="input mono"
|
||
type="number"
|
||
min={0}
|
||
max={100}
|
||
step={1}
|
||
value={newTopicPriority}
|
||
onChange={(e) => setNewTopicPriority(e.target.value)}
|
||
/>
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.topicAddHint}</span>
|
||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
disabled={isSavingTopic}
|
||
onClick={() => {
|
||
setNewTopicPanelOpen(false);
|
||
setTopicPresetMenuOpen(false);
|
||
resetNewTopicDraft();
|
||
}}
|
||
>
|
||
{t.cancel}
|
||
</button>
|
||
<button
|
||
className="btn btn-primary btn-sm"
|
||
disabled={isSavingTopic || !selectedBot}
|
||
onClick={() => void addTopic()}
|
||
>
|
||
<Save size={14} />
|
||
<span style={{ marginLeft: 6 }}>{t.save}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{!newTopicPanelOpen ? (
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.topicAddHint}</span>
|
||
<div className="ops-topic-create-menu-wrap" ref={topicPresetMenuRef}>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
disabled={isSavingTopic || !selectedBot}
|
||
onClick={() => setTopicPresetMenuOpen((prev) => !prev)}
|
||
>
|
||
<Plus size={14} />
|
||
<span style={{ marginLeft: 6 }}>{t.topicAdd}</span>
|
||
</button>
|
||
{topicPresetMenuOpen ? (
|
||
<div className="ops-topic-create-menu">
|
||
{effectiveTopicPresetTemplates.map((preset) => (
|
||
<button key={preset.id} className="ops-topic-create-menu-item" onClick={() => beginTopicCreate(preset.id)}>
|
||
{resolvePresetText(preset.name, isZh ? 'zh-cn' : 'en') || preset.topic_key || preset.id}
|
||
</button>
|
||
))}
|
||
<button className="ops-topic-create-menu-item" onClick={() => beginTopicCreate('blank')}>{t.topicPresetBlank}</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showSkillsModal && (
|
||
<div className="modal-mask" onClick={() => {
|
||
setSkillAddMenuOpen(false);
|
||
setShowSkillsModal(false);
|
||
}}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.skillsPanel}</h3>
|
||
<span className="modal-sub">
|
||
{isZh ? '查看当前 Bot 已安装的技能。' : 'View the skills already installed for this bot.'}
|
||
</span>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
if (!selectedBot) return;
|
||
void loadBotSkills(selectedBot.id);
|
||
}}
|
||
tooltip={isZh ? '刷新已安装技能' : 'Refresh installed skills'}
|
||
aria-label={isZh ? '刷新已安装技能' : 'Refresh installed skills'}
|
||
>
|
||
<RefreshCw size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => {
|
||
setSkillAddMenuOpen(false);
|
||
setShowSkillsModal(false);
|
||
}} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stack">
|
||
<div className="row-between">
|
||
<div>
|
||
<div className="section-mini-title">{isZh ? '已安装技能' : 'Installed Skills'}</div>
|
||
<div className="field-label">
|
||
{isZh ? '这里展示当前 Bot 工作区中的技能。' : 'These skills are already present in the bot workspace.'}
|
||
</div>
|
||
</div>
|
||
<div className="field-label">
|
||
{isZh ? `${botSkills.length} 个已安装` : `${botSkills.length} installed`}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="wizard-channel-list ops-skills-list-scroll">
|
||
{botSkills.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.skillsEmpty}</div>
|
||
) : (
|
||
botSkills.map((skill) => (
|
||
<div key={skill.id} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="row-between">
|
||
<div>
|
||
<strong>{skill.name || skill.id}</strong>
|
||
<div className="field-label mono">{skill.path}</div>
|
||
<div className="field-label mono">{String(skill.type || '').toUpperCase()}</div>
|
||
<div className="field-label">{skill.description || '-'}</div>
|
||
</div>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
onClick={() => void removeBotSkill(skill)}
|
||
tooltip={t.removeSkill}
|
||
aria-label={t.removeSkill}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ops-skill-add-bar">
|
||
<input
|
||
ref={skillZipPickerRef}
|
||
type="file"
|
||
accept=".zip,application/zip,application/x-zip-compressed"
|
||
onChange={onPickSkillZip}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
<div className="field-label ops-skill-add-hint">
|
||
{isSkillUploading
|
||
? (isZh ? '正在上传 ZIP 技能包...' : 'Uploading ZIP skill package...')
|
||
: (isZh ? '支持上传本地 ZIP，或从技能市场安装技能到当前 Bot。' : 'Upload a local ZIP or install a skill from the marketplace into this bot.')}
|
||
</div>
|
||
<div className="ops-topic-create-menu-wrap" ref={skillAddMenuRef}>
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary btn-sm ops-skill-create-trigger"
|
||
onClick={() => setSkillAddMenuOpen((prev) => !prev)}
|
||
disabled={!selectedBot}
|
||
>
|
||
<Plus size={18} />
|
||
<span>{isZh ? '新增技能' : 'Add Skill'}</span>
|
||
</button>
|
||
{skillAddMenuOpen ? (
|
||
<div className="ops-topic-create-menu">
|
||
<button
|
||
className="ops-topic-create-menu-item"
|
||
type="button"
|
||
onClick={() => {
|
||
setSkillAddMenuOpen(false);
|
||
triggerSkillZipUpload();
|
||
}}
|
||
>
|
||
{isZh ? '本地上传 ZIP' : 'Upload Local ZIP'}
|
||
</button>
|
||
<button
|
||
className="ops-topic-create-menu-item"
|
||
type="button"
|
||
onClick={() => {
|
||
if (!selectedBot) return;
|
||
setSkillAddMenuOpen(false);
|
||
void loadMarketSkills(selectedBot.id);
|
||
setShowSkillMarketInstallModal(true);
|
||
}}
|
||
>
|
||
{isZh ? '从技能市场安装' : 'Install From Marketplace'}
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<SkillMarketInstallModal
|
||
isZh={isZh}
|
||
open={showSkillMarketInstallModal}
|
||
items={marketSkills}
|
||
loading={isMarketSkillsLoading}
|
||
installingId={marketSkillInstallingId}
|
||
onClose={() => setShowSkillMarketInstallModal(false)}
|
||
onRefresh={async () => {
|
||
if (!selectedBot) return;
|
||
await loadMarketSkills(selectedBot.id);
|
||
}}
|
||
onInstall={async (skill) => {
|
||
await installMarketSkill(skill);
|
||
if (selectedBot) {
|
||
await loadBotSkills(selectedBot.id);
|
||
}
|
||
}}
|
||
formatBytes={formatBytes}
|
||
/>
|
||
|
||
{showMcpModal && (
|
||
<div
|
||
className="modal-mask"
|
||
onClick={() => {
|
||
setShowMcpModal(false);
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
}}
|
||
>
|
||
<div className="modal-card modal-wide ops-modal-scrollable ops-config-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.mcpPanel}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
setShowMcpModal(false);
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
}}
|
||
tooltip={t.close}
|
||
aria-label={t.close}
|
||
>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="field-label" style={{ marginBottom: 8 }}>{t.mcpPanelDesc}</div>
|
||
<div className="wizard-channel-list ops-config-list-scroll">
|
||
{mcpServers.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.mcpEmpty}</div>
|
||
) : (
|
||
mcpServers.map((row, idx) => {
|
||
const uiKey = mcpDraftUiKey(row, idx);
|
||
const expanded = expandedMcpByKey[uiKey] ?? idx === 0;
|
||
const summary = `${row.type || 'streamableHttp'} · ${row.url || '-'}`;
|
||
return (
|
||
<div key={`mcp-${idx}`} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong>{row.name || `${t.mcpServer} #${idx + 1}`}</strong>
|
||
<div className="ops-config-collapsed-meta">{summary}</div>
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
disabled={isSavingMcp || !canRemoveMcpServer(row)}
|
||
onClick={() => removeMcpServer(idx)}
|
||
tooltip={t.removeSkill}
|
||
aria-label={t.removeSkill}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => setExpandedMcpByKey((prev) => ({ ...prev, [uiKey]: !expanded }))}
|
||
tooltip={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
aria-label={expanded ? (isZh ? '收起详情' : 'Collapse') : (isZh ? '展开详情' : 'Expand')}
|
||
>
|
||
{expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
{expanded ? (
|
||
<>
|
||
<div className="ops-topic-grid">
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpName}</label>
|
||
<input
|
||
className="input mono"
|
||
value={row.name}
|
||
placeholder={t.mcpNamePlaceholder}
|
||
onChange={(e) => updateMcpServer(idx, { name: e.target.value })}
|
||
autoComplete="off"
|
||
disabled={row.locked}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpType}</label>
|
||
<LucentSelect value={row.type} onChange={(e) => updateMcpServer(idx, { type: e.target.value as 'streamableHttp' | 'sse' })} disabled={row.locked}>
|
||
<option value="streamableHttp">streamableHttp</option>
|
||
<option value="sse">sse</option>
|
||
</LucentSelect>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">URL</label>
|
||
<input
|
||
className="input mono"
|
||
value={row.url}
|
||
placeholder={t.mcpUrlPlaceholder}
|
||
onChange={(e) => updateMcpServer(idx, { url: e.target.value })}
|
||
autoComplete="off"
|
||
disabled={row.locked}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">X-Bot-Id</label>
|
||
<input
|
||
className="input mono"
|
||
value={row.botId}
|
||
placeholder={t.mcpBotIdPlaceholder}
|
||
onChange={(e) => updateMcpServer(idx, { botId: e.target.value })}
|
||
autoComplete="off"
|
||
disabled={row.locked}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">X-Bot-Secret</label>
|
||
<PasswordInput
|
||
className="input"
|
||
value={row.botSecret}
|
||
placeholder={t.mcpBotSecretPlaceholder}
|
||
onChange={(e) => updateMcpServer(idx, { botSecret: e.target.value })}
|
||
autoComplete="new-password"
|
||
disabled={row.locked}
|
||
toggleLabels={passwordToggleLabels}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpToolTimeout}</label>
|
||
<input
|
||
className="input mono"
|
||
type="number"
|
||
min="1"
|
||
max="600"
|
||
value={row.toolTimeout}
|
||
onChange={(e) => updateMcpServer(idx, { toolTimeout: e.target.value })}
|
||
disabled={row.locked}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{!row.locked ? (
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.mcpHint}</span>
|
||
<button className="btn btn-primary btn-sm" onClick={() => void saveSingleMcpServer(idx)} disabled={isSavingMcp}>
|
||
{isSavingMcp ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
|
||
<span style={{ marginLeft: 6 }}>{t.save}</span>
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
{newMcpPanelOpen ? (
|
||
<div className="card wizard-channel-card wizard-channel-compact ops-config-new-card">
|
||
<div className="ops-config-card-header">
|
||
<div className="ops-config-card-main">
|
||
<strong>{t.addMcpServer}</strong>
|
||
<div className="ops-config-collapsed-meta">{newMcpDraft.type || 'streamableHttp'}</div>
|
||
</div>
|
||
<div className="ops-config-card-actions">
|
||
<LucentIconButton
|
||
className="ops-plain-icon-btn"
|
||
onClick={() => {
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
}}
|
||
tooltip={t.cancel}
|
||
aria-label={t.cancel}
|
||
>
|
||
<X size={15} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="ops-topic-grid">
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpName}</label>
|
||
<input
|
||
className="input mono"
|
||
value={newMcpDraft.name}
|
||
placeholder={t.mcpNamePlaceholder}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, name: e.target.value }))}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpType}</label>
|
||
<LucentSelect
|
||
value={newMcpDraft.type}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, type: e.target.value as 'streamableHttp' | 'sse' }))}
|
||
>
|
||
<option value="streamableHttp">streamableHttp</option>
|
||
<option value="sse">sse</option>
|
||
</LucentSelect>
|
||
</div>
|
||
<div className="ops-config-field ops-config-field-full">
|
||
<label className="field-label">URL</label>
|
||
<input
|
||
className="input mono"
|
||
value={newMcpDraft.url}
|
||
placeholder={t.mcpUrlPlaceholder}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, url: e.target.value }))}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">X-Bot-Id</label>
|
||
<input
|
||
className="input mono"
|
||
value={newMcpDraft.botId}
|
||
placeholder={t.mcpBotIdPlaceholder}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, botId: e.target.value }))}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">X-Bot-Secret</label>
|
||
<PasswordInput
|
||
className="input"
|
||
value={newMcpDraft.botSecret}
|
||
placeholder={t.mcpBotSecretPlaceholder}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, botSecret: e.target.value }))}
|
||
autoComplete="new-password"
|
||
toggleLabels={passwordToggleLabels}
|
||
/>
|
||
</div>
|
||
<div className="ops-config-field">
|
||
<label className="field-label">{t.mcpToolTimeout}</label>
|
||
<input
|
||
className="input mono"
|
||
type="number"
|
||
min="1"
|
||
max="600"
|
||
value={newMcpDraft.toolTimeout}
|
||
onChange={(e) => setNewMcpDraft((prev) => ({ ...prev, toolTimeout: e.target.value }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.mcpHint}</span>
|
||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
onClick={() => {
|
||
setNewMcpPanelOpen(false);
|
||
resetNewMcpDraft();
|
||
}}
|
||
>
|
||
{t.cancel}
|
||
</button>
|
||
<button className="btn btn-primary btn-sm" disabled={isSavingMcp} onClick={() => void saveNewMcpServer()}>
|
||
<Save size={14} />
|
||
<span style={{ marginLeft: 6 }}>{t.save}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{!newMcpPanelOpen ? (
|
||
<div className="row-between ops-config-footer">
|
||
<span className="field-label">{t.mcpHint}</span>
|
||
<button className="btn btn-secondary btn-sm" onClick={beginMcpCreate}>
|
||
<Plus size={14} />
|
||
<span style={{ marginLeft: 6 }}>{t.addMcpServer}</span>
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showEnvParamsModal && (
|
||
<div className="modal-mask" onClick={() => setShowEnvParamsModal(false)}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.envParams}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowEnvParamsModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="field-label" style={{ marginBottom: 8 }}>{t.envParamsDesc}</div>
|
||
<div className="wizard-channel-list">
|
||
{envEntries.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.noEnvParams}</div>
|
||
) : (
|
||
envEntries.map(([key, value]) => (
|
||
<div key={key} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="row-between" style={{ alignItems: 'center', gap: 8 }}>
|
||
<input className="input mono" value={key} readOnly style={{ maxWidth: 280 }} />
|
||
<PasswordInput
|
||
className="input"
|
||
value={value}
|
||
onChange={(e) => upsertEnvParam(key, e.target.value)}
|
||
placeholder={t.envValue}
|
||
autoComplete="off"
|
||
wrapperClassName="is-inline"
|
||
toggleLabels={{
|
||
show: t.showEnvValue,
|
||
hide: t.hideEnvValue,
|
||
}}
|
||
/>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
onClick={() => removeEnvParam(key)}
|
||
tooltip={t.removeEnvParam}
|
||
aria-label={t.removeEnvParam}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
<div className="row-between">
|
||
<input
|
||
className="input mono"
|
||
value={envDraftKey}
|
||
onChange={(e) => setEnvDraftKey(e.target.value.toUpperCase())}
|
||
placeholder={t.envKey}
|
||
autoComplete="off"
|
||
/>
|
||
<PasswordInput
|
||
className="input"
|
||
value={envDraftValue}
|
||
onChange={(e) => setEnvDraftValue(e.target.value)}
|
||
placeholder={t.envValue}
|
||
autoComplete="off"
|
||
wrapperClassName="is-inline"
|
||
toggleLabels={{
|
||
show: t.showEnvValue,
|
||
hide: t.hideEnvValue,
|
||
}}
|
||
/>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
const key = String(envDraftKey || '').trim().toUpperCase();
|
||
if (!key) return;
|
||
upsertEnvParam(key, envDraftValue);
|
||
setEnvDraftKey('');
|
||
setEnvDraftValue('');
|
||
}}
|
||
tooltip={t.addEnvParam}
|
||
aria-label={t.addEnvParam}
|
||
>
|
||
<Plus size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
<div className="row-between">
|
||
<span className="field-label">{t.envParamsHint}</span>
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button className="btn btn-secondary" onClick={() => setShowEnvParamsModal(false)}>{t.cancel}</button>
|
||
<button className="btn btn-primary" onClick={() => void saveBotEnvParams()}>{t.save}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showCronModal && (
|
||
<div className="modal-mask" onClick={() => setShowCronModal(false)}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.cronViewer}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => selectedBot && void loadCronJobs(selectedBot.id)}
|
||
tooltip={t.cronReload}
|
||
aria-label={t.cronReload}
|
||
disabled={cronLoading}
|
||
>
|
||
<RefreshCw size={14} className={cronLoading ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowCronModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
{cronLoading ? (
|
||
<div className="ops-empty-inline">{t.cronLoading}</div>
|
||
) : cronJobs.length === 0 ? (
|
||
<div className="ops-empty-inline">{t.cronEmpty}</div>
|
||
) : (
|
||
<div className="ops-cron-list ops-cron-list-scroll">
|
||
{cronJobs.map((job) => {
|
||
const stopping = cronActionJobId === job.id;
|
||
const channel = String(job.payload?.channel || '').trim();
|
||
const to = String(job.payload?.to || '').trim();
|
||
const target = channel && to ? `${channel}:${to}` : channel || to || '-';
|
||
return (
|
||
<div key={job.id} className="ops-cron-item">
|
||
<div className="ops-cron-main">
|
||
<div className="ops-cron-name">
|
||
<Clock3 size={13} />
|
||
<span>{job.name || job.id}</span>
|
||
</div>
|
||
<div className="ops-cron-meta mono">{formatCronSchedule(job, isZh)}</div>
|
||
<div className="ops-cron-meta mono">
|
||
{job.state?.nextRunAtMs ? new Date(job.state.nextRunAtMs).toLocaleString() : '-'}
|
||
</div>
|
||
<div className="ops-cron-meta mono">
|
||
{target}
|
||
</div>
|
||
<div className="ops-cron-meta">{job.enabled === false ? t.cronDisabled : t.cronEnabled}</div>
|
||
</div>
|
||
<div className="ops-cron-actions">
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm icon-btn"
|
||
onClick={() => void stopCronJob(job.id)}
|
||
tooltip={t.cronStop}
|
||
aria-label={t.cronStop}
|
||
disabled={stopping || job.enabled === false}
|
||
>
|
||
<PowerOff size={13} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm icon-btn"
|
||
onClick={() => void deleteCronJob(job.id)}
|
||
tooltip={t.cronDelete}
|
||
aria-label={t.cronDelete}
|
||
disabled={stopping}
|
||
>
|
||
<Trash2 size={13} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showTemplateModal && (
|
||
<div className="modal-mask" onClick={() => setShowTemplateModal(false)}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.templateManagerTitle}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowTemplateModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ops-template-tabs" role="tablist" aria-label={t.templateManagerTitle}>
|
||
<button
|
||
className={`ops-template-tab ${templateTab === 'agent' ? 'is-active' : ''}`}
|
||
onClick={() => setTemplateTab('agent')}
|
||
role="tab"
|
||
aria-selected={templateTab === 'agent'}
|
||
>
|
||
<span className="ops-template-tab-label">{`${t.templateTabAgent} (${templateAgentCount})`}</span>
|
||
</button>
|
||
<button
|
||
className={`ops-template-tab ${templateTab === 'topic' ? 'is-active' : ''}`}
|
||
onClick={() => setTemplateTab('topic')}
|
||
role="tab"
|
||
aria-selected={templateTab === 'topic'}
|
||
>
|
||
<span className="ops-template-tab-label">{`${t.templateTabTopic} (${templateTopicCount})`}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="ops-config-grid" style={{ gridTemplateColumns: '1fr' }}>
|
||
{templateTab === 'agent' ? (
|
||
<div className="ops-config-field">
|
||
<textarea
|
||
className="textarea md-area mono"
|
||
rows={16}
|
||
value={templateAgentText}
|
||
onChange={(e) => setTemplateAgentText(e.target.value)}
|
||
placeholder='{"agents_md":"..."}'
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div className="ops-config-field">
|
||
<textarea
|
||
className="textarea md-area mono"
|
||
rows={16}
|
||
value={templateTopicText}
|
||
onChange={(e) => setTemplateTopicText(e.target.value)}
|
||
placeholder='{"presets":[...]}'
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="row-between">
|
||
<button className="btn btn-secondary" onClick={() => setShowTemplateModal(false)}>{t.cancel}</button>
|
||
<button className="btn btn-primary" disabled={isSavingTemplates} onClick={() => void saveTemplateManager(templateTab)}>
|
||
{isSavingTemplates ? t.processing : t.save}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showAgentModal && (
|
||
<div className="modal-mask" onClick={() => setShowAgentModal(false)}>
|
||
<div className="modal-card modal-wide" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.agentFiles}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowAgentModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="wizard-agent-layout">
|
||
<div className="agent-tabs-vertical">
|
||
{(['AGENTS', 'SOUL', 'USER', 'TOOLS', 'IDENTITY'] as AgentTab[]).map((tab) => (
|
||
<button key={tab} className={`agent-tab ${agentTab === tab ? 'active' : ''}`} onClick={() => setAgentTab(tab)}>{tab}.md</button>
|
||
))}
|
||
</div>
|
||
<textarea className="textarea md-area" value={String(editForm[tabMap[agentTab]])} onChange={(e) => setEditForm((p) => ({ ...p, [tabMap[agentTab]]: e.target.value }))} />
|
||
</div>
|
||
<div className="row-between">
|
||
<button className="btn btn-secondary" onClick={() => setShowAgentModal(false)}>{t.cancel}</button>
|
||
<button className="btn btn-primary" disabled={isSaving} onClick={() => void saveBot('agent')}>{t.saveFiles}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showRuntimeActionModal && (
|
||
<div className="modal-mask" onClick={() => setShowRuntimeActionModal(false)}>
|
||
<div className="modal-card modal-preview" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row modal-title-with-close">
|
||
<div className="modal-title-main">
|
||
<h3>{t.lastAction}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowRuntimeActionModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div className="workspace-preview-body">
|
||
<pre>{runtimeAction}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{workspacePreview && (
|
||
<div className="modal-mask" onClick={closeWorkspacePreview}>
|
||
<div className={`modal-card modal-preview ${workspacePreviewFullscreen ? 'modal-preview-fullscreen' : ''}`} onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-title-row workspace-preview-header">
|
||
<div className="workspace-preview-header-text">
|
||
<h3>{t.filePreview}</h3>
|
||
<span className="modal-sub mono workspace-preview-path-row">
|
||
<span className="workspace-path-segments" title={workspacePreview.path}>
|
||
{renderWorkspacePathSegments(workspacePreview.path, 'preview-path')}
|
||
</span>
|
||
<LucentIconButton
|
||
className="workspace-preview-copy-name"
|
||
onClick={() => void copyWorkspacePreviewPath(workspacePreview.path)}
|
||
tooltip={isZh ? '复制路径' : 'Copy path'}
|
||
aria-label={isZh ? '复制路径' : 'Copy path'}
|
||
>
|
||
<Copy size={12} />
|
||
</LucentIconButton>
|
||
</span>
|
||
</div>
|
||
<div className="workspace-preview-header-actions">
|
||
{workspacePreview.isMarkdown ? (
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => {
|
||
if (workspacePreview.truncated) {
|
||
notify(t.fileEditDisabled, { tone: 'warning' });
|
||
return;
|
||
}
|
||
setWorkspacePreviewEditing((value) => !value);
|
||
}}
|
||
tooltip={workspacePreviewEditing ? t.previewMode : t.editFile}
|
||
aria-label={workspacePreviewEditing ? t.previewMode : t.editFile}
|
||
>
|
||
{workspacePreviewEditing ? <Eye size={14} /> : <Pencil size={14} />}
|
||
</LucentIconButton>
|
||
) : null}
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setWorkspacePreviewFullscreen((v) => !v)}
|
||
tooltip={workspacePreviewFullscreen ? (isZh ? '退出全屏' : 'Exit full screen') : (isZh ? '全屏预览' : 'Full screen')}
|
||
aria-label={workspacePreviewFullscreen ? (isZh ? '退出全屏' : 'Exit full screen') : (isZh ? '全屏预览' : 'Full screen')}
|
||
>
|
||
{workspacePreviewFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={closeWorkspacePreview}
|
||
tooltip={t.close}
|
||
aria-label={t.close}
|
||
>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`workspace-preview-body ${workspacePreview.isMarkdown ? 'markdown' : ''} ${workspacePreviewEditing ? 'is-editing' : ''} ${workspacePreview.isImage || workspacePreview.isVideo || workspacePreview.isAudio ? 'media' : ''}`}
|
||
>
|
||
{workspacePreview.isImage ? (
|
||
<img
|
||
className="workspace-preview-image"
|
||
src={buildWorkspaceDownloadHref(workspacePreview.path, false)}
|
||
alt={workspacePreview.path.split('/').pop() || 'workspace-image'}
|
||
/>
|
||
) : workspacePreview.isVideo ? (
|
||
<video
|
||
className="workspace-preview-media"
|
||
src={buildWorkspaceDownloadHref(workspacePreview.path, false)}
|
||
controls
|
||
preload="metadata"
|
||
/>
|
||
) : workspacePreview.isAudio ? (
|
||
<audio
|
||
className="workspace-preview-audio"
|
||
src={buildWorkspaceDownloadHref(workspacePreview.path, false)}
|
||
controls
|
||
preload="metadata"
|
||
/>
|
||
) : workspacePreview.isHtml ? (
|
||
<iframe
|
||
className="workspace-preview-embed"
|
||
src={buildWorkspaceRawHref(workspacePreview.path, false)}
|
||
title={workspacePreview.path}
|
||
/>
|
||
) : workspacePreview.isMarkdown && workspacePreviewEditing ? (
|
||
<textarea
|
||
className="textarea md-area mono workspace-preview-editor"
|
||
value={workspacePreviewDraft}
|
||
onChange={(event) => setWorkspacePreviewDraft(event.target.value)}
|
||
spellCheck={false}
|
||
/>
|
||
) : workspacePreview.isMarkdown ? (
|
||
<div className="workspace-markdown">
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, [rehypeSanitize, MARKDOWN_SANITIZE_SCHEMA]]}
|
||
components={markdownComponents}
|
||
urlTransform={transformWorkspacePreviewMarkdownUrl}
|
||
>
|
||
{workspacePreview.content}
|
||
</ReactMarkdown>
|
||
</div>
|
||
) : (
|
||
<pre>{workspacePreview.content}</pre>
|
||
)}
|
||
</div>
|
||
{workspacePreview.truncated ? (
|
||
<div className="ops-empty-inline">{t.fileTruncated}</div>
|
||
) : null}
|
||
<div className="row-between">
|
||
<span className="workspace-preview-meta mono">{workspacePreview.ext || '-'}</span>
|
||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
||
{workspacePreview.isMarkdown && workspacePreviewEditing ? (
|
||
<>
|
||
<button
|
||
className="btn btn-secondary"
|
||
onClick={() => {
|
||
setWorkspacePreviewDraft(workspacePreview.content || '');
|
||
setWorkspacePreviewEditing(false);
|
||
}}
|
||
disabled={workspacePreviewSaving}
|
||
>
|
||
{t.cancel}
|
||
</button>
|
||
<button
|
||
className="btn btn-primary"
|
||
onClick={() => void saveWorkspacePreviewMarkdown()}
|
||
disabled={workspacePreviewSaving}
|
||
>
|
||
{workspacePreviewSaving ? <RefreshCw size={14} className="animate-spin" /> : <Save size={14} />}
|
||
<span style={{ marginLeft: 6 }}>{t.save}</span>
|
||
</button>
|
||
</>
|
||
) : null}
|
||
{workspacePreview.isHtml ? (
|
||
<button
|
||
className="btn btn-secondary"
|
||
onClick={() => void copyWorkspacePreviewUrl(workspacePreview.path)}
|
||
>
|
||
{t.copyAddress}
|
||
</button>
|
||
) : (
|
||
<a
|
||
className="btn btn-secondary"
|
||
href={buildWorkspaceDownloadHref(workspacePreview.path, true)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
download={workspacePreview.path.split('/').pop() || 'workspace-file'}
|
||
>
|
||
{t.download}
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{workspaceHoverCard ? (
|
||
<div
|
||
className={`workspace-hover-panel ${workspaceHoverCard.above ? 'is-above' : ''}`}
|
||
style={{ top: workspaceHoverCard.top, left: workspaceHoverCard.left }}
|
||
role="tooltip"
|
||
>
|
||
<div className="workspace-entry-info-row">
|
||
<span className="workspace-entry-info-label">{isZh ? '全称' : 'Name'}</span>
|
||
<span className="workspace-entry-info-value mono">{workspaceHoverCard.node.name || '-'}</span>
|
||
</div>
|
||
<div className="workspace-entry-info-row">
|
||
<span className="workspace-entry-info-label">{isZh ? '完整路径' : 'Full Path'}</span>
|
||
<span
|
||
className="workspace-entry-info-value workspace-entry-info-path mono"
|
||
title={`/root/.nanobot/workspace/${String(workspaceHoverCard.node.path || '').replace(/^\/+/, '')}`}
|
||
>
|
||
{renderWorkspacePathSegments(
|
||
`/root/.nanobot/workspace/${String(workspaceHoverCard.node.path || '').replace(/^\/+/, '')}`,
|
||
'hover-path',
|
||
)}
|
||
</span>
|
||
</div>
|
||
<div className="workspace-entry-info-row">
|
||
<span className="workspace-entry-info-label">{isZh ? '创建时间' : 'Created'}</span>
|
||
<span className="workspace-entry-info-value">{formatWorkspaceTime(workspaceHoverCard.node.ctime, isZh)}</span>
|
||
</div>
|
||
<div className="workspace-entry-info-row">
|
||
<span className="workspace-entry-info-label">{isZh ? '修改时间' : 'Modified'}</span>
|
||
<span className="workspace-entry-info-value">{formatWorkspaceTime(workspaceHoverCard.node.mtime, isZh)}</span>
|
||
</div>
|
||
<div className="workspace-entry-info-row">
|
||
<span className="workspace-entry-info-label">{isZh ? '文件大小' : 'Size'}</span>
|
||
<span className="workspace-entry-info-value mono">{Number.isFinite(Number(workspaceHoverCard.node.size)) ? formatBytes(Number(workspaceHoverCard.node.size)) : '-'}</span>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</>
|
||
);
|
||
}
|