4231 lines
175 KiB
TypeScript
4231 lines
175 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState, type AnchorHTMLAttributes, type ChangeEvent, type KeyboardEvent, type ReactNode } from 'react';
|
||
import axios from 'axios';
|
||
import { Activity, ArrowUp, Boxes, Check, ChevronLeft, ChevronRight, Clock3, Copy, Download, EllipsisVertical, ExternalLink, Eye, EyeOff, FileText, FolderOpen, Gauge, Hammer, Lock, Maximize2, MessageSquareText, Mic, Minimize2, Paperclip, Pencil, Plus, Power, PowerOff, RefreshCw, Repeat2, Reply, 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 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';
|
||
|
||
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';
|
||
type RuntimeViewMode = 'visual' | 'text';
|
||
type CompactPanelTab = 'chat' | 'runtime';
|
||
type QuotedReply = { id?: number; text: string; ts: number };
|
||
const BOT_LIST_PAGE_SIZE = 8;
|
||
|
||
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 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 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 NanobotImage {
|
||
tag: string;
|
||
status: string;
|
||
}
|
||
|
||
interface DockerImage {
|
||
tag: string;
|
||
version?: string;
|
||
image_id?: string;
|
||
}
|
||
|
||
interface BaseImageOption {
|
||
tag: string;
|
||
label: string;
|
||
disabled: boolean;
|
||
needsRegister: 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 SystemDefaultsResponse {
|
||
limits?: {
|
||
upload_max_mb?: number;
|
||
};
|
||
}
|
||
|
||
type BotEnvParams = Record<string, string>;
|
||
|
||
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',
|
||
},
|
||
},
|
||
};
|
||
const optionalChannelTypes: ChannelType[] = ['feishu', 'qq', 'dingtalk', 'telegram', 'slack'];
|
||
const RUNTIME_STALE_MS = 45000;
|
||
|
||
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 stateLabel(s?: string) {
|
||
return (s || 'IDLE').toUpperCase();
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
function isPreviewableWorkspaceFile(node: WorkspaceNode) {
|
||
if (node.type !== 'file') return false;
|
||
const ext = (node.ext || '').trim().toLowerCase();
|
||
if (ext) {
|
||
return [
|
||
'.md', '.json', '.log', '.txt', '.csv', '.html', '.htm', '.pdf',
|
||
'.png', '.jpg', '.jpeg', '.webp',
|
||
'.mp3', '.wav', '.m4a', '.flac', '.ogg', '.opus', '.aac', '.amr', '.wma',
|
||
'.mp4', '.mov', '.avi', '.mkv', '.webm', '.m4v', '.3gp', '.mpeg', '.mpg', '.ts',
|
||
'.doc', '.docx', '.xls', '.xlsx', '.xlsm', '.ppt', '.pptx', '.odt', '.ods', '.odp', '.wps',
|
||
].includes(ext);
|
||
}
|
||
return isPreviewableWorkspacePath(node.path);
|
||
}
|
||
|
||
function isPdfPath(path: string) {
|
||
return String(path || '').trim().toLowerCase().endsWith('.pdf');
|
||
}
|
||
|
||
function isImagePath(path: string) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return normalized.endsWith('.png') || normalized.endsWith('.jpg') || normalized.endsWith('.jpeg') || normalized.endsWith('.webp');
|
||
}
|
||
|
||
function isVideoPath(path: string) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.m4v', '.3gp', '.mpeg', '.mpg', '.ts'].some((ext) => normalized.endsWith(ext));
|
||
}
|
||
|
||
function isAudioPath(path: string) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return ['.mp3', '.wav', '.m4a', '.flac', '.ogg', '.opus', '.aac', '.amr', '.wma'].some((ext) => normalized.endsWith(ext));
|
||
}
|
||
|
||
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) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return normalized.endsWith('.html') || normalized.endsWith('.htm');
|
||
}
|
||
|
||
function isOfficePath(path: string) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return ['.doc', '.docx', '.xls', '.xlsx', '.xlsm', '.ppt', '.pptx', '.odt', '.ods', '.odp', '.wps'].some((ext) =>
|
||
normalized.endsWith(ext),
|
||
);
|
||
}
|
||
|
||
function isPreviewableWorkspacePath(path: string) {
|
||
const normalized = String(path || '').trim().toLowerCase();
|
||
return ['.md', '.json', '.log', '.txt', '.csv', '.html', '.htm', '.pdf', '.png', '.jpg', '.jpeg', '.webp', '.mp3', '.wav', '.m4a', '.flac', '.ogg', '.opus', '.aac', '.amr', '.wma', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.m4v', '.3gp', '.mpeg', '.mpg', '.ts', '.doc', '.docx', '.xls', '.xlsx', '.xlsm', '.ppt', '.pptx', '.odt', '.ods', '.odp', '.wps'].some((ext) =>
|
||
normalized.endsWith(ext),
|
||
);
|
||
}
|
||
|
||
function workspaceFileAction(path: string): 'preview' | 'download' | 'unsupported' {
|
||
const normalized = String(path || '').trim();
|
||
if (!normalized) return 'unsupported';
|
||
if (isPdfPath(normalized) || isOfficePath(normalized)) return 'download';
|
||
if (isImagePath(normalized) || isHtmlPath(normalized) || isVideoPath(normalized) || isAudioPath(normalized)) return 'preview';
|
||
const lower = normalized.toLowerCase();
|
||
if (['.md', '.json', '.log', '.txt', '.csv'].some((ext) => lower.endsWith(ext))) return 'preview';
|
||
return 'unsupported';
|
||
}
|
||
|
||
const WORKSPACE_LINK_PREFIX = 'https://workspace.local/open/';
|
||
const WORKSPACE_ABS_PATH_PATTERN = /\/root\/\.nanobot\/workspace\/[^\s<>"'`)\],，。！？；：]+/gi;
|
||
const WORKSPACE_RELATIVE_PATH_PATTERN =
|
||
/(^|[\s(\[])(\/[^\s<>"'`)\]]+\.(?:md|markdown|json|txt|log|csv|tsv|yaml|yml|toml|html|htm|pdf|png|jpg|jpeg|gif|webp|svg))(?![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 decorateWorkspacePathsForMarkdown(text: string) {
|
||
const source = String(text || '');
|
||
const normalizedExistingLinks = source.replace(
|
||
/\[(\/root\/\.nanobot\/workspace\/[^\]]+)\]\s*\n?\s*\((https:\/\/workspace\.local\/open\/[^)\r\n]*)\)/gi,
|
||
(_full, markdownPath: string) => {
|
||
const normalized = normalizeDashboardAttachmentPath(markdownPath);
|
||
if (!normalized) return String(_full || '');
|
||
return `[${markdownPath}](${buildWorkspaceLink(normalized)})`;
|
||
},
|
||
);
|
||
const withAbsoluteLinks = normalizedExistingLinks.replace(WORKSPACE_ABS_PATH_PATTERN, (fullPath) => {
|
||
const normalized = normalizeDashboardAttachmentPath(fullPath);
|
||
if (!normalized) return fullPath;
|
||
return `[${fullPath}](${buildWorkspaceLink(normalized)})`;
|
||
});
|
||
return withAbsoluteLinks.replace(WORKSPACE_RELATIVE_PATH_PATTERN, (full, prefix: string, rawPath: string) => {
|
||
const normalized = normalizeDashboardAttachmentPath(rawPath);
|
||
if (!normalized) return full;
|
||
return `${prefix}[${rawPath}](${buildWorkspaceLink(normalized)})`;
|
||
});
|
||
}
|
||
|
||
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, '/');
|
||
if (!v) return '';
|
||
const prefix = '/root/.nanobot/workspace/';
|
||
if (v.startsWith(prefix)) return v.slice(prefix.length);
|
||
return v.replace(/^\/+/, '');
|
||
}
|
||
|
||
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 [isSaving, setIsSaving] = useState(false);
|
||
const [showBaseModal, setShowBaseModal] = useState(false);
|
||
const [showParamModal, setShowParamModal] = useState(false);
|
||
const [showChannelModal, setShowChannelModal] = useState(false);
|
||
const [showSkillsModal, setShowSkillsModal] = 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'>>({});
|
||
const chatBottomRef = useRef<HTMLDivElement | null>(null);
|
||
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 [workspaceAutoRefresh, setWorkspaceAutoRefresh] = useState(false);
|
||
const [workspaceQuery, setWorkspaceQuery] = useState('');
|
||
const [pendingAttachments, setPendingAttachments] = useState<string[]>([]);
|
||
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 [botSkills, setBotSkills] = useState<WorkspaceSkillOption[]>([]);
|
||
const [isSkillUploading, setIsSkillUploading] = useState(false);
|
||
const skillZipPickerRef = useRef<HTMLInputElement | null>(null);
|
||
const [envParams, setEnvParams] = useState<BotEnvParams>({});
|
||
const [envDraftKey, setEnvDraftKey] = useState('');
|
||
const [envDraftValue, setEnvDraftValue] = useState('');
|
||
const [envDraftVisible, setEnvDraftVisible] = useState(false);
|
||
const [envVisibleByKey, setEnvVisibleByKey] = useState<Record<string, boolean>>({});
|
||
const [isSavingChannel, setIsSavingChannel] = useState(false);
|
||
const [isSavingGlobalDelivery, setIsSavingGlobalDelivery] = useState(false);
|
||
const [availableImages, setAvailableImages] = useState<NanobotImage[]>([]);
|
||
const [localDockerImages, setLocalDockerImages] = useState<DockerImage[]>([]);
|
||
const [globalDelivery, setGlobalDelivery] = useState<{ sendProgress: boolean; sendToolHints: boolean }>({
|
||
sendProgress: false,
|
||
sendToolHints: false,
|
||
});
|
||
const [uploadMaxMb, setUploadMaxMb] = useState(100);
|
||
const [newChannelType, setNewChannelType] = useState<ChannelType>('feishu');
|
||
const [runtimeViewMode, setRuntimeViewMode] = useState<RuntimeViewMode>('visual');
|
||
const [runtimeMenuOpen, setRuntimeMenuOpen] = 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 [feedbackSavingByMessageId, setFeedbackSavingByMessageId] = useState<Record<number, boolean>>({});
|
||
const [showRuntimeActionModal, setShowRuntimeActionModal] = useState(false);
|
||
const [workspaceHoverCard, setWorkspaceHoverCard] = useState<WorkspaceHoverCardState | null>(null);
|
||
const runtimeMenuRef = useRef<HTMLDivElement | 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)),
|
||
});
|
||
setPendingAttachments([]);
|
||
}, []);
|
||
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 closeWorkspacePreview = () => {
|
||
setWorkspacePreview(null);
|
||
setWorkspacePreviewFullscreen(false);
|
||
};
|
||
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 = buildWorkspaceDownloadHref(normalized, false);
|
||
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);
|
||
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) || action === 'unsupported') {
|
||
notify(fileNotPreviewableLabel, { tone: 'warning' });
|
||
return;
|
||
}
|
||
}
|
||
};
|
||
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\/[^\s<>"'`)\],，。！？；：]+|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>
|
||
);
|
||
},
|
||
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, 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 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 / BOT_LIST_PAGE_SIZE));
|
||
const pagedBots = useMemo(() => {
|
||
const page = Math.min(Math.max(1, botListPage), botListTotalPages);
|
||
const start = (page - 1) * BOT_LIST_PAGE_SIZE;
|
||
return filteredBots.slice(start, start + BOT_LIST_PAGE_SIZE);
|
||
}, [filteredBots, botListPage, botListTotalPages]);
|
||
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 lc = isZh ? channelsZhCn : channelsEn;
|
||
const baseImageOptions = useMemo<BaseImageOption[]>(() => {
|
||
const readyTags = new Set(
|
||
availableImages
|
||
.filter((img) => String(img.status || '').toUpperCase() === 'READY')
|
||
.map((img) => String(img.tag || '').trim())
|
||
.filter(Boolean),
|
||
);
|
||
const allTags = new Set<string>();
|
||
localDockerImages.forEach((img) => {
|
||
const tag = String(img.tag || '').trim();
|
||
if (tag) allTags.add(tag);
|
||
});
|
||
availableImages.forEach((img) => {
|
||
const tag = String(img.tag || '').trim();
|
||
if (tag) allTags.add(tag);
|
||
});
|
||
if (editForm.image_tag) {
|
||
allTags.add(editForm.image_tag);
|
||
}
|
||
return Array.from(allTags)
|
||
.sort((a, b) => a.localeCompare(b))
|
||
.map((tag) => {
|
||
const isReady = readyTags.has(tag);
|
||
if (isReady) {
|
||
return { tag, label: `${tag} · READY`, disabled: false, needsRegister: false };
|
||
}
|
||
const hasInDocker = localDockerImages.some((row) => String(row.tag || '').trim() === tag);
|
||
if (hasInDocker) {
|
||
return {
|
||
tag,
|
||
label: isZh ? `${tag} · 本地镜像（未登记）` : `${tag} · local image (unregistered)`,
|
||
disabled: false,
|
||
needsRegister: true,
|
||
};
|
||
}
|
||
return {
|
||
tag,
|
||
label: isZh ? `${tag} · 不可用` : `${tag} · unavailable`,
|
||
disabled: true,
|
||
needsRegister: false,
|
||
};
|
||
});
|
||
}, [availableImages, localDockerImages, editForm.image_tag, isZh]);
|
||
const runtimeMoreLabel = isZh ? '更多' : 'More';
|
||
const selectedBotControlState = selectedBot ? controlStateByBot[selectedBot.id] : undefined;
|
||
const isSending = selectedBot ? Boolean(sendingByBot[selectedBot.id]) : false;
|
||
const canChat = Boolean(selectedBot && selectedBot.docker_status === 'RUNNING' && !selectedBotControlState);
|
||
const isChatEnabled = Boolean(canChat && !isSending);
|
||
|
||
const conversation = useMemo(() => mergeConversation(messages), [messages]);
|
||
const latestEvent = useMemo(() => [...events].reverse()[0], [events]);
|
||
const workspaceFiles = useMemo(
|
||
() => workspaceEntries.filter((v) => v.type === 'file' && isPreviewableWorkspaceFile(v)),
|
||
[workspaceEntries],
|
||
);
|
||
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 runtimeActionSummary = useMemo(() => {
|
||
const full = String(runtimeAction || '').trim();
|
||
if (!full || full === '-') return '-';
|
||
return summarizeProgressText(full, isZh);
|
||
}, [runtimeAction, isZh]);
|
||
const runtimeActionHasMore = useMemo(() => {
|
||
const full = String(runtimeAction || '').trim();
|
||
const summary = String(runtimeActionSummary || '').trim();
|
||
return Boolean(full && full !== '-' && summary && full !== summary);
|
||
}, [runtimeAction, runtimeActionSummary]);
|
||
const runtimeActionDisplay = runtimeActionHasMore ? runtimeActionSummary : runtimeAction;
|
||
const resourceBot = useMemo(() => bots.find((b) => b.id === resourceBotId), [bots, resourceBotId]);
|
||
|
||
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 fullText = String(item.text || '');
|
||
const summaryText = isProgressBubble ? summarizeProgressText(fullText, isZh) : fullText;
|
||
const hasSummary = isProgressBubble && summaryText.trim().length > 0 && summaryText.trim() !== fullText.trim();
|
||
const collapsible = isProgressBubble && (hasSummary || shouldCollapseProgress(fullText));
|
||
const expanded = Boolean(expandedProgressByKey[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}>
|
||
{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={() =>
|
||
setExpandedProgressByKey((prev) => ({
|
||
...prev,
|
||
[itemKey]: !prev[itemKey],
|
||
}))
|
||
}
|
||
tooltip={expanded ? (isZh ? '收起' : 'Collapse') : (isZh ? '展开' : 'Expand')}
|
||
aria-label={expanded ? (isZh ? '收起' : 'Collapse') : (isZh ? '展开' : 'Expand')}
|
||
>
|
||
{expanded ? '×' : '…'}
|
||
</LucentIconButton>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div className={`ops-chat-text ${collapsible && !expanded ? '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(item.text)}</div>
|
||
</>
|
||
) : (
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, rehypeSanitize]}
|
||
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);
|
||
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,
|
||
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 (!selectedBotId && bots.length > 0) setSelectedBotId(bots[0].id);
|
||
if (selectedBotId && !activeBots[selectedBotId] && bots.length > 0) setSelectedBotId(bots[0].id);
|
||
}, [bots, selectedBotId, activeBots, forcedBotId]);
|
||
|
||
useEffect(() => {
|
||
chatBottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
||
}, [selectedBotId, conversation.length]);
|
||
|
||
useEffect(() => {
|
||
setQuotedReply(null);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
const onPointerDown = (event: MouseEvent) => {
|
||
if (!runtimeMenuRef.current) return;
|
||
if (!runtimeMenuRef.current.contains(event.target as Node)) {
|
||
setRuntimeMenuOpen(false);
|
||
}
|
||
};
|
||
document.addEventListener('mousedown', onPointerDown);
|
||
return () => document.removeEventListener('mousedown', onPointerDown);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setRuntimeMenuOpen(false);
|
||
}, [selectedBotId]);
|
||
|
||
useEffect(() => {
|
||
setExpandedProgressByKey({});
|
||
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`);
|
||
const configured = Number(res.data?.limits?.upload_max_mb);
|
||
if (!Number.isFinite(configured) || configured <= 0 || !alive) return;
|
||
setUploadMaxMb(Math.max(1, Math.floor(configured)));
|
||
} catch {
|
||
// keep default limit
|
||
}
|
||
};
|
||
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, dockerImagesRes] = await Promise.allSettled([
|
||
axios.get<NanobotImage[]>(`${APP_ENDPOINTS.apiBase}/images`),
|
||
axios.get<DockerImage[]>(`${APP_ENDPOINTS.apiBase}/docker-images`),
|
||
]);
|
||
if (imagesRes.status === 'fulfilled') {
|
||
setAvailableImages(Array.isArray(imagesRes.value.data) ? imagesRes.value.data : []);
|
||
} else {
|
||
setAvailableImages([]);
|
||
}
|
||
if (dockerImagesRes.status === 'fulfilled') {
|
||
setLocalDockerImages(Array.isArray(dockerImagesRes.value.data) ? dockerImagesRes.value.data : []);
|
||
} else {
|
||
setLocalDockerImages([]);
|
||
}
|
||
};
|
||
|
||
const refresh = async () => {
|
||
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 (isPdfPath(normalizedPath) || isOfficePath(normalizedPath)) {
|
||
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 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 loadChannels = async (botId: string) => {
|
||
if (!botId) return;
|
||
const res = await axios.get<BotChannel[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/channels`);
|
||
setChannels(Array.isArray(res.data) ? res.data : []);
|
||
};
|
||
|
||
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 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 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);
|
||
} catch (error: any) {
|
||
notify(error?.response?.data?.detail || t.toolsRemoveFail, { tone: 'error' });
|
||
}
|
||
};
|
||
|
||
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);
|
||
} 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) => (i === index ? { ...c, ...patch } : c)));
|
||
};
|
||
|
||
const saveChannel = async (channel: BotChannel) => {
|
||
if (!selectedBot) 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 || !addableChannelTypes.includes(newChannelType)) return;
|
||
setIsSavingChannel(true);
|
||
try {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${selectedBot.id}/channels`, {
|
||
channel_type: newChannelType,
|
||
is_active: true,
|
||
external_app_id: '',
|
||
app_secret: '',
|
||
internal_port: 8080,
|
||
extra_config: {},
|
||
});
|
||
await loadChannels(selectedBot.id);
|
||
const rest = addableChannelTypes.filter((t) => t !== newChannelType);
|
||
if (rest.length > 0) setNewChannelType(rest[0]);
|
||
} 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.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 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, idx: number) => {
|
||
const ctype = String(channel.channel_type).toLowerCase();
|
||
if (ctype === 'telegram') {
|
||
return (
|
||
<>
|
||
<input className="input" type="password" placeholder={lc.telegramToken} value={channel.app_secret || ''} onChange={(e) => updateChannelLocal(idx, { app_secret: e.target.value })} />
|
||
<input
|
||
className="input"
|
||
placeholder={lc.proxy}
|
||
value={String((channel.extra_config || {}).proxy || '')}
|
||
onChange={(e) => updateChannelLocal(idx, { extra_config: { ...(channel.extra_config || {}), proxy: e.target.value } })}
|
||
/>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean((channel.extra_config || {}).replyToMessage)}
|
||
onChange={(e) =>
|
||
updateChannelLocal(idx, { 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) => updateChannelLocal(idx, { external_app_id: e.target.value })} />
|
||
<input className="input" type="password" placeholder={lc.appSecret} value={channel.app_secret || ''} onChange={(e) => updateChannelLocal(idx, { app_secret: e.target.value })} />
|
||
<input className="input" placeholder={lc.encryptKey} value={String((channel.extra_config || {}).encryptKey || '')} onChange={(e) => updateChannelLocal(idx, { extra_config: { ...(channel.extra_config || {}), encryptKey: e.target.value } })} />
|
||
<input className="input" placeholder={lc.verificationToken} value={String((channel.extra_config || {}).verificationToken || '')} onChange={(e) => updateChannelLocal(idx, { extra_config: { ...(channel.extra_config || {}), verificationToken: e.target.value } })} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'dingtalk') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.clientId} value={channel.external_app_id || ''} onChange={(e) => updateChannelLocal(idx, { external_app_id: e.target.value })} />
|
||
<input className="input" type="password" placeholder={lc.clientSecret} value={channel.app_secret || ''} onChange={(e) => updateChannelLocal(idx, { app_secret: e.target.value })} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'slack') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.botToken} value={channel.external_app_id || ''} onChange={(e) => updateChannelLocal(idx, { external_app_id: e.target.value })} />
|
||
<input className="input" type="password" placeholder={lc.appToken} value={channel.app_secret || ''} onChange={(e) => updateChannelLocal(idx, { app_secret: e.target.value })} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (ctype === 'qq') {
|
||
return (
|
||
<>
|
||
<input className="input" placeholder={lc.appId} value={channel.external_app_id || ''} onChange={(e) => updateChannelLocal(idx, { external_app_id: e.target.value })} />
|
||
<input className="input" type="password" placeholder={lc.appSecret} value={channel.app_secret || ''} onChange={(e) => updateChannelLocal(idx, { app_secret: e.target.value })} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
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 {
|
||
notify(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 {
|
||
notify(t.restartFail, { 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 {
|
||
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);
|
||
}
|
||
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(),
|
||
});
|
||
notify(msg, { tone: 'error' });
|
||
} finally {
|
||
setSendingByBot((prev) => {
|
||
const next = { ...prev };
|
||
delete next[selectedBot.id];
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
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);
|
||
}
|
||
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 = async (botId: string): Promise<ChatMessage[]> => {
|
||
const res = await axios.get<any[]>(`${APP_ENDPOINTS.apiBase}/bots/${botId}/messages`, {
|
||
params: { limit: 300 },
|
||
});
|
||
const rows = Array.isArray(res.data) ? res.data : [];
|
||
return rows
|
||
.map((row) => {
|
||
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;
|
||
})
|
||
.filter((msg) => msg.text.trim().length > 0 || (msg.attachments || []).length > 0)
|
||
.slice(-300);
|
||
};
|
||
|
||
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 onVoiceInput = () => {
|
||
notify(t.voiceUnavailable, { tone: 'warning' });
|
||
};
|
||
|
||
const onPickAttachments = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
if (!selectedBot || !event.target.files || event.target.files.length === 0) return;
|
||
const files = Array.from(event.target.files);
|
||
const maxBytes = uploadMaxMb * 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, uploadMaxMb), { 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) {
|
||
setWorkspaceEntries([]);
|
||
setWorkspaceCurrentPath('');
|
||
setWorkspaceParentPath(null);
|
||
setWorkspaceError('');
|
||
setChannels([]);
|
||
setPendingAttachments([]);
|
||
setCronJobs([]);
|
||
setBotSkills([]);
|
||
setEnvParams({});
|
||
return;
|
||
}
|
||
let cancelled = false;
|
||
const loadAll = async () => {
|
||
try {
|
||
if (cancelled) return;
|
||
await Promise.all([
|
||
loadWorkspaceTree(selectedBotId, ''),
|
||
loadCronJobs(selectedBotId),
|
||
loadBotSkills(selectedBotId),
|
||
loadBotEnvParams(selectedBotId),
|
||
]);
|
||
} 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]);
|
||
|
||
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(() => {
|
||
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.');
|
||
}
|
||
if (selectedImageOption?.needsRegister) {
|
||
await axios.post(`${APP_ENDPOINTS.apiBase}/images/register`, {
|
||
tag: editForm.image_tag,
|
||
source_dir: 'manual',
|
||
});
|
||
}
|
||
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);
|
||
const downloadOnlyFile = isPdfPath(node.path) || isOfficePath(node.path);
|
||
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' : ''}`}>
|
||
{!compactMode ? (
|
||
<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">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={onOpenImageFactory}
|
||
tooltip={t.manageImages}
|
||
aria-label={t.manageImages}
|
||
>
|
||
<Boxes size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-primary btn-sm icon-btn"
|
||
onClick={onOpenCreateWizard}
|
||
tooltip={t.newBot}
|
||
aria-label={t.newBot}
|
||
>
|
||
<Plus size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ops-bot-list-toolbar">
|
||
<div className="ops-searchbar">
|
||
<input
|
||
className="input ops-search-input ops-search-input-with-icon"
|
||
value={botListQuery}
|
||
onChange={(e) => setBotListQuery(e.target.value)}
|
||
placeholder={t.botSearchPlaceholder}
|
||
aria-label={t.botSearchPlaceholder}
|
||
autoComplete="off"
|
||
autoCorrect="off"
|
||
autoCapitalize="none"
|
||
spellCheck={false}
|
||
name="bot-search"
|
||
/>
|
||
<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">
|
||
{pagedBots.map((bot) => {
|
||
const selected = selectedBotId === bot.id;
|
||
const controlState = controlStateByBot[bot.id];
|
||
const isOperating = operatingBotId === bot.id;
|
||
const isStarting = controlState === 'starting';
|
||
const isStopping = controlState === 'stopping';
|
||
return (
|
||
<div key={bot.id} className={`ops-bot-card ${selected ? 'is-active' : ''}`} onClick={() => setSelectedBotId(bot.id)}>
|
||
<span className={`ops-bot-strip ${bot.docker_status === 'RUNNING' ? 'is-running' : 'is-stopped'}`} 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">
|
||
<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">
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-monitor"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
openResourceMonitor(bot.id);
|
||
}}
|
||
tooltip={isZh ? '资源监测' : 'Resource Monitor'}
|
||
aria-label={isZh ? '资源监测' : 'Resource Monitor'}
|
||
>
|
||
<Gauge size={14} />
|
||
</LucentIconButton>
|
||
{bot.docker_status === 'RUNNING' ? (
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-stop"
|
||
disabled={isOperating}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
void stopBot(bot.id, bot.docker_status);
|
||
}}
|
||
tooltip={t.stop}
|
||
aria-label={t.stop}
|
||
>
|
||
{isStopping ? (
|
||
<span className="ops-control-pending">
|
||
<span className="ops-control-dots" aria-hidden="true">
|
||
<i />
|
||
<i />
|
||
<i />
|
||
</span>
|
||
</span>
|
||
) : <Square size={14} />}
|
||
</LucentIconButton>
|
||
) : (
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-start"
|
||
disabled={isOperating}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
void startBot(bot.id, bot.docker_status);
|
||
}}
|
||
tooltip={t.start}
|
||
aria-label={t.start}
|
||
>
|
||
{isStarting ? (
|
||
<span className="ops-control-pending">
|
||
<span className="ops-control-dots" aria-hidden="true">
|
||
<i />
|
||
<i />
|
||
<i />
|
||
</span>
|
||
</span>
|
||
) : <Power size={14} />}
|
||
</LucentIconButton>
|
||
)}
|
||
<LucentIconButton
|
||
className="btn btn-sm ops-bot-icon-btn ops-bot-action-delete"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
void removeBot(bot.id);
|
||
}}
|
||
tooltip={t.delete}
|
||
aria-label={t.delete}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{filteredBots.length === 0 ? (
|
||
<div className="ops-bot-list-empty">{t.botSearchNoResult}</div>
|
||
) : null}
|
||
</div>
|
||
<div className="ops-bot-list-pagination">
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm 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">{t.paginationPage(botListPage, botListTotalPages)}</div>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm 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>
|
||
</section>
|
||
) : null}
|
||
|
||
<section className={`panel ops-chat-panel ${compactMode && isCompactMobile && compactPanelTab !== 'chat' ? 'ops-compact-hidden' : ''}`}>
|
||
{selectedBot ? (
|
||
<div className="ops-chat-shell">
|
||
<div className={`ops-chat-frame ${isChatEnabled ? '' : 'is-disabled'}`}>
|
||
<div className="ops-chat-scroll">
|
||
{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);
|
||
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}
|
||
<div className="ops-composer">
|
||
<input
|
||
ref={filePickerRef}
|
||
type="file"
|
||
multiple
|
||
onChange={onPickAttachments}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
<div className="ops-composer-shell">
|
||
<textarea
|
||
ref={composerTextareaRef}
|
||
className="input ops-composer-input"
|
||
value={command}
|
||
onChange={(e) => setCommand(e.target.value)}
|
||
onKeyDown={onComposerKeyDown}
|
||
disabled={!canChat}
|
||
placeholder={
|
||
canChat
|
||
? t.inputPlaceholder
|
||
: t.disabledPlaceholder
|
||
}
|
||
/>
|
||
<div className="ops-composer-tools-right">
|
||
<LucentIconButton
|
||
className="ops-composer-inline-btn"
|
||
disabled={!canChat}
|
||
onClick={onVoiceInput}
|
||
tooltip={t.voiceInput}
|
||
aria-label={t.voiceInput}
|
||
>
|
||
<Mic size={16} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="ops-composer-inline-btn"
|
||
disabled={!canChat || isUploadingAttachments}
|
||
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 || (!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>
|
||
{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}
|
||
{!canChat ? (
|
||
<div className="ops-chat-disabled-mask">
|
||
<div className="ops-chat-disabled-card">
|
||
{selectedBotControlState === 'starting'
|
||
? t.botStarting
|
||
: selectedBotControlState === 'stopping'
|
||
? t.botStopping
|
||
: t.chatDisabled}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</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 && isCompactMobile && compactPanelTab !== 'runtime' ? 'ops-compact-hidden' : ''}`}>
|
||
{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={() => setRuntimeViewMode((m) => (m === 'visual' ? 'text' : 'visual'))}
|
||
tooltip={runtimeViewMode === 'visual' ? (isZh ? '切换为文字面板' : 'Switch to text panel') : (isZh ? '切换为机器人面板' : 'Switch to bot panel')}
|
||
aria-label={runtimeViewMode === 'visual' ? (isZh ? '切换为文字面板' : 'Switch to text panel') : (isZh ? '切换为机器人面板' : 'Switch to bot panel')}
|
||
>
|
||
<Repeat2 size={14} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => void restartBot(selectedBot.id, selectedBot.docker_status)}
|
||
disabled={operatingBotId === selectedBot.id}
|
||
tooltip={t.restart}
|
||
aria-label={t.restart}
|
||
>
|
||
<RefreshCw size={14} className={operatingBotId === selectedBot.id ? 'animate-spin' : ''} />
|
||
</LucentIconButton>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setRuntimeMenuOpen((v) => !v)}
|
||
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) void loadChannels(selectedBot.id);
|
||
setShowChannelModal(true);
|
||
}}
|
||
>
|
||
<Waypoints size={14} />
|
||
<span>{t.channels}</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) 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 ${runtimeViewMode === 'visual' ? 'is-visual' : ''}`}
|
||
onDoubleClick={() => setRuntimeViewMode((m) => (m === 'visual' ? 'text' : 'visual'))}
|
||
title={isZh ? '双击切换动画/文字状态视图' : 'Double click to toggle visual/text state view'}
|
||
>
|
||
{runtimeViewMode === '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 className="ops-runtime-row"><span>{t.container}</span><strong className="mono">{selectedBot.docker_status}</strong></div>
|
||
<div className="ops-runtime-row"><span>{t.current}</span><strong className="mono">{displayState}</strong></div>
|
||
<div className="ops-runtime-row">
|
||
<span>{t.lastAction}</span>
|
||
<div className="ops-runtime-action-inline">
|
||
<strong className="ops-runtime-action-text">{runtimeActionDisplay}</strong>
|
||
{runtimeActionHasMore ? (
|
||
<LucentIconButton
|
||
className="ops-runtime-expand-btn"
|
||
onClick={() => setShowRuntimeActionModal(true)}
|
||
tooltip={isZh ? '查看完整内容' : 'Show full content'}
|
||
aria-label={isZh ? '查看完整内容' : 'Show full content'}
|
||
>
|
||
…
|
||
</LucentIconButton>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div className="ops-runtime-row"><span>Provider</span><strong className="mono">{selectedBot.llm_provider || '-'}</strong></div>
|
||
<div className="ops-runtime-row"><span>Model</span><strong className="mono">{selectedBot.llm_model || '-'}</strong></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"
|
||
value={workspaceQuery}
|
||
onChange={(e) => setWorkspaceQuery(e.target.value)}
|
||
placeholder={t.workspaceSearchPlaceholder}
|
||
aria-label={t.workspaceSearchPlaceholder}
|
||
/>
|
||
<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>
|
||
{compactMode && isCompactMobile ? (
|
||
<LucentIconButton
|
||
className={`ops-compact-fab-switch ${compactPanelTab === 'chat' ? 'is-chat' : 'is-runtime'}`}
|
||
onClick={() => setCompactPanelTab((v) => (v === 'chat' ? 'runtime' : 'chat'))}
|
||
tooltip={compactPanelTab === 'chat' ? (isZh ? '切换到运行面板' : 'Switch to runtime') : (isZh ? '切换到对话面板' : 'Switch to chat')}
|
||
aria-label={compactPanelTab === 'chat' ? (isZh ? '切换到运行面板' : 'Switch to runtime') : (isZh ? '切换到对话面板' : 'Switch to chat')}
|
||
>
|
||
{compactPanelTab === 'chat' ? <Activity size={18} /> : <MessageSquareText size={18} />}
|
||
</LucentIconButton>
|
||
) : 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>
|
||
<span className="modal-sub">{t.baseConfigSub}</span>
|
||
</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>
|
||
<input
|
||
className="input"
|
||
type="password"
|
||
value={editForm.access_password}
|
||
onChange={(e) => setEditForm((p) => ({ ...p, access_password: e.target.value }))}
|
||
placeholder={t.accessPasswordPlaceholder}
|
||
/>
|
||
|
||
<label className="field-label">{t.baseImageReadonly}</label>
|
||
<select
|
||
className="select"
|
||
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>
|
||
))}
|
||
</select>
|
||
{baseImageOptions.find((opt) => opt.tag === editForm.image_tag)?.needsRegister ? (
|
||
<div className="field-label" style={{ color: 'var(--warning)' }}>
|
||
{isZh ? '该镜像尚未登记，保存时会自动加入镜像注册表。' : 'This image is not registered yet. It will be auto-registered on save.'}
|
||
</div>
|
||
) : null}
|
||
|
||
<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>
|
||
<select className="select" 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>
|
||
</select>
|
||
|
||
<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>
|
||
<input className="input" type="password" value={editForm.api_key} onChange={(e) => setEditForm((p) => ({ ...p, api_key: e.target.value }))} placeholder={t.newApiKeyPlaceholder} />
|
||
|
||
<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)}>
|
||
<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>{lc.wizardSectionTitle}</h3>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowChannelModal(false)} 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">
|
||
{channels.map((channel, idx) => (
|
||
isDashboardChannel(channel) ? null : (
|
||
<div key={`${channel.id}-${channel.channel_type}`} className="card wizard-channel-card wizard-channel-compact">
|
||
<div className="row-between">
|
||
<strong style={{ textTransform: 'uppercase' }}>{channel.channel_type}</strong>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<label className="field-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={channel.is_active}
|
||
onChange={(e) => updateChannelLocal(idx, { is_active: e.target.checked })}
|
||
disabled={isDashboardChannel(channel)}
|
||
style={{ marginRight: 6 }}
|
||
/>
|
||
{lc.enabled}
|
||
</label>
|
||
<LucentIconButton
|
||
className="btn btn-danger btn-sm wizard-icon-btn"
|
||
disabled={isDashboardChannel(channel) || isSavingChannel}
|
||
onClick={() => void removeChannel(channel)}
|
||
tooltip={lc.remove}
|
||
aria-label={lc.remove}
|
||
>
|
||
<Trash2 size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
{renderChannelFields(channel, idx)}
|
||
<div className="row-between">
|
||
<span className="field-label">{lc.customChannel}</span>
|
||
<LucentIconButton
|
||
className="btn btn-primary btn-sm icon-btn"
|
||
disabled={isSavingChannel}
|
||
onClick={() => void saveChannel(channel)}
|
||
tooltip={lc.saveChannel}
|
||
aria-label={lc.saveChannel}
|
||
>
|
||
<Save size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
)
|
||
))}
|
||
</div>
|
||
|
||
<div className="row-between">
|
||
<select
|
||
className="select"
|
||
value={newChannelType}
|
||
onChange={(e) => setNewChannelType(e.target.value as ChannelType)}
|
||
disabled={addableChannelTypes.length === 0 || isSavingChannel}
|
||
>
|
||
{addableChannelTypes.map((t) => (
|
||
<option key={t} value={t}>{t}</option>
|
||
))}
|
||
</select>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
disabled={addableChannelTypes.length === 0 || isSavingChannel}
|
||
onClick={() => void addChannel()}
|
||
tooltip={lc.addChannel}
|
||
aria-label={lc.addChannel}
|
||
>
|
||
<Plus size={14} />
|
||
</LucentIconButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showSkillsModal && (
|
||
<div className="modal-mask" onClick={() => 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>
|
||
</div>
|
||
<div className="modal-title-actions">
|
||
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowSkillsModal(false)} tooltip={t.close} aria-label={t.close}>
|
||
<X size={14} />
|
||
</LucentIconButton>
|
||
</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 className="row-between">
|
||
<input
|
||
ref={skillZipPickerRef}
|
||
type="file"
|
||
accept=".zip,application/zip,application/x-zip-compressed"
|
||
onChange={onPickSkillZip}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
<button
|
||
className="btn btn-secondary btn-sm"
|
||
disabled={isSkillUploading}
|
||
onClick={triggerSkillZipUpload}
|
||
title={isSkillUploading ? t.uploadingFile : t.uploadZipSkill}
|
||
aria-label={isSkillUploading ? t.uploadingFile : t.uploadZipSkill}
|
||
>
|
||
{isSkillUploading ? <RefreshCw size={14} className="animate-spin" /> : null}
|
||
<span style={{ marginLeft: isSkillUploading ? 6 : 0 }}>
|
||
{isSkillUploading ? t.uploadingFile : t.uploadZipSkill}
|
||
</span>
|
||
</button>
|
||
<span className="field-label">{t.zipOnlyHint}</span>
|
||
</div>
|
||
</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 }} />
|
||
<input
|
||
className="input"
|
||
type={envVisibleByKey[key] ? 'text' : 'password'}
|
||
value={value}
|
||
onChange={(e) => upsertEnvParam(key, e.target.value)}
|
||
placeholder={t.envValue}
|
||
/>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm wizard-icon-btn"
|
||
onClick={() => setEnvVisibleByKey((prev) => ({ ...prev, [key]: !prev[key] }))}
|
||
tooltip={envVisibleByKey[key] ? t.hideEnvValue : t.showEnvValue}
|
||
aria-label={envVisibleByKey[key] ? t.hideEnvValue : t.showEnvValue}
|
||
>
|
||
{envVisibleByKey[key] ? <EyeOff size={14} /> : <Eye size={14} />}
|
||
</LucentIconButton>
|
||
<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}
|
||
/>
|
||
<input
|
||
className="input"
|
||
type={envDraftVisible ? 'text' : 'password'}
|
||
value={envDraftValue}
|
||
onChange={(e) => setEnvDraftValue(e.target.value)}
|
||
placeholder={t.envValue}
|
||
/>
|
||
<LucentIconButton
|
||
className="btn btn-secondary btn-sm icon-btn"
|
||
onClick={() => setEnvDraftVisible((v) => !v)}
|
||
tooltip={envDraftVisible ? t.hideEnvValue : t.showEnvValue}
|
||
aria-label={envDraftVisible ? t.hideEnvValue : t.showEnvValue}
|
||
>
|
||
{envDraftVisible ? <EyeOff size={14} /> : <Eye size={14} />}
|
||
</LucentIconButton>
|
||
<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>
|
||
)}
|
||
|
||
{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>{workspacePreview.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">
|
||
<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' : ''} ${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={buildWorkspaceDownloadHref(workspacePreview.path, false)}
|
||
title={workspacePreview.path}
|
||
/>
|
||
) : workspacePreview.isMarkdown ? (
|
||
<div className="workspace-markdown">
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, rehypeSanitize]}
|
||
components={markdownComponents}
|
||
>
|
||
{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.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 mono">
|
||
{`/root/.nanobot/workspace/${String(workspaceHoverCard.node.path || '').replace(/^\/+/, '')}`}
|
||
</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}
|
||
</>
|
||
);
|
||
}
|