933 lines
39 KiB
JavaScript
933 lines
39 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import JSZip from 'jszip';
|
||
import { getModelIcon, getShortModelName } from '../utils/modelIcons';
|
||
import LobeModelLogo from './LobeModelLogo.jsx';
|
||
|
||
export default function TraderView({
|
||
agents,
|
||
agentProfilesByAgent,
|
||
agentSkillsByAgent,
|
||
workspaceFilesByAgent,
|
||
selectedAgentId,
|
||
selectedAgentProfile,
|
||
selectedAgentSkills,
|
||
skillDetailsByName,
|
||
localSkillDraftsByKey,
|
||
skillDetailLoadingKey,
|
||
editableFiles,
|
||
selectedWorkspaceFile,
|
||
workspaceFileContent,
|
||
workspaceDraftContent,
|
||
isConnected,
|
||
isAgentSkillsLoading,
|
||
agentSkillsSavingKey,
|
||
agentSkillsFeedback,
|
||
isWorkspaceFileLoading,
|
||
workspaceFileSavingKey,
|
||
workspaceFileFeedback,
|
||
onAgentChange,
|
||
onCreateLocalSkill,
|
||
onSkillDetailRequest,
|
||
onLocalSkillDraftChange,
|
||
onLocalSkillDelete,
|
||
onLocalSkillSave,
|
||
onRemoveSharedSkill,
|
||
onSkillToggle,
|
||
onWorkspaceFileChange,
|
||
onWorkspaceDraftChange,
|
||
onWorkspaceFileSave,
|
||
onUploadExternalSkill
|
||
}) {
|
||
const srOnlyStyle = {
|
||
position: 'absolute',
|
||
width: 1,
|
||
height: 1,
|
||
padding: 0,
|
||
margin: -1,
|
||
overflow: 'hidden',
|
||
clip: 'rect(0, 0, 0, 0)',
|
||
whiteSpace: 'nowrap',
|
||
border: 0
|
||
};
|
||
|
||
const [expandedSkillKey, setExpandedSkillKey] = useState(null);
|
||
const [newLocalSkillName, setNewLocalSkillName] = useState('');
|
||
const [externalSkillFile, setExternalSkillFile] = useState(null);
|
||
const [isExternalSkillChecking, setIsExternalSkillChecking] = useState(false);
|
||
const [externalSkillCheck, setExternalSkillCheck] = useState({ type: null, text: '' });
|
||
const [isSkillPickerOpen, setIsSkillPickerOpen] = useState(false);
|
||
|
||
const selectedAgent = useMemo(
|
||
() => agents.find((agent) => agent.id === selectedAgentId) || agents[0] || null,
|
||
[agents, selectedAgentId]
|
||
);
|
||
|
||
useEffect(() => {
|
||
setExpandedSkillKey(null);
|
||
}, [selectedAgentId]);
|
||
|
||
if (!selectedAgent) {
|
||
return null;
|
||
}
|
||
|
||
const profile = selectedAgentProfile || {};
|
||
const modelInfo = getModelIcon(profile.model_name, profile.model_provider);
|
||
const activeSkills = selectedAgentSkills.filter((item) => item.status === 'enabled' || item.status === 'active');
|
||
const installedSkills = selectedAgentSkills.filter((item) => item.status !== 'available');
|
||
const availableSkills = selectedAgentSkills.filter((item) => item.status === 'available');
|
||
|
||
const validateExternalSkillZip = async (file) => {
|
||
if (!(file instanceof File)) {
|
||
setExternalSkillCheck({ type: 'error', text: '请选择 zip 文件' });
|
||
return false;
|
||
}
|
||
if (!file.name.toLowerCase().endsWith('.zip')) {
|
||
setExternalSkillCheck({ type: 'error', text: '仅支持 .zip 文件' });
|
||
return false;
|
||
}
|
||
|
||
setIsExternalSkillChecking(true);
|
||
setExternalSkillCheck({ type: null, text: '' });
|
||
try {
|
||
const zip = await JSZip.loadAsync(file);
|
||
const entries = Object.keys(zip.files);
|
||
const skillFilePath = entries.find((entry) => {
|
||
const item = zip.files[entry];
|
||
return !item.dir && /(^|\/)SKILL\.md$/i.test(entry);
|
||
});
|
||
|
||
if (!skillFilePath) {
|
||
setExternalSkillCheck({
|
||
type: 'error',
|
||
text: '压缩包中未检测到 SKILL.md，请检查目录结构'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
setExternalSkillCheck({
|
||
type: 'success',
|
||
text: `预检通过，检测到: ${skillFilePath}`
|
||
});
|
||
return true;
|
||
} catch (error) {
|
||
setExternalSkillCheck({
|
||
type: 'error',
|
||
text: `无法解析 zip: ${error?.message || '未知错误'}`
|
||
});
|
||
return false;
|
||
} finally {
|
||
setIsExternalSkillChecking(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{
|
||
height: '100%',
|
||
overflow: 'hidden',
|
||
padding: '18px',
|
||
background: 'linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%)',
|
||
display: 'grid',
|
||
gridTemplateRows: 'auto auto 1fr',
|
||
gap: 18
|
||
}}>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.5px', color: '#111111' }}>
|
||
交易员档案
|
||
</div>
|
||
<div style={{ fontSize: 11, color: '#6B7280' }}>
|
||
聚焦查看每个 Agent 的模型、工具组、技能编排和工作区记忆，不展示交易表现数据
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '120px minmax(0, 1fr)',
|
||
gap: 16,
|
||
alignItems: 'stretch',
|
||
minHeight: 0,
|
||
overflow: 'hidden'
|
||
}}>
|
||
{/* Left: agent avatar list */}
|
||
<div style={{
|
||
border: '1px solid #D9E0E7',
|
||
borderRadius: 14,
|
||
background: '#FFFFFF',
|
||
boxShadow: '0 10px 24px rgba(15, 23, 42, 0.06)',
|
||
padding: 12,
|
||
display: 'grid',
|
||
gap: 10,
|
||
minHeight: 0,
|
||
overflowY: 'auto',
|
||
alignContent: 'start'
|
||
}}>
|
||
{agents.map((agent) => {
|
||
const isSelected = agent.id === selectedAgentId;
|
||
return (
|
||
<button
|
||
key={agent.id}
|
||
type="button"
|
||
onClick={() => onAgentChange(agent.id)}
|
||
title={agent.name}
|
||
style={{
|
||
border: isSelected ? `2px solid ${agent.colors.accent}` : '1px solid #D9E0E7',
|
||
borderRadius: 16,
|
||
background: isSelected ? `${agent.colors.accent}10` : '#FFFFFF',
|
||
boxShadow: isSelected ? `0 10px 20px ${agent.colors.accent}18` : 'none',
|
||
padding: 8,
|
||
display: 'grid',
|
||
gap: 6,
|
||
justifyItems: 'center',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
<img
|
||
src={agent.avatar}
|
||
alt={agent.name}
|
||
style={{
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: 14,
|
||
objectFit: 'cover',
|
||
border: `1px solid ${agent.colors.accent}33`
|
||
}}
|
||
/>
|
||
<div style={{
|
||
fontSize: 10,
|
||
fontWeight: 800,
|
||
color: isSelected ? agent.colors.accent : '#374151',
|
||
textAlign: 'center',
|
||
lineHeight: 1.4
|
||
}}>
|
||
{agent.name}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Right: agent detail content */}
|
||
<div style={{
|
||
border: '1px solid #D9E0E7',
|
||
borderRadius: 14,
|
||
background: '#FFFFFF',
|
||
boxShadow: '0 10px 24px rgba(15, 23, 42, 0.06)',
|
||
padding: 18,
|
||
display: 'grid',
|
||
gap: 16,
|
||
minHeight: 0,
|
||
overflowY: 'auto',
|
||
alignContent: 'start'
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<img
|
||
src={selectedAgent.avatar}
|
||
alt={selectedAgent.name}
|
||
style={{
|
||
width: 58,
|
||
height: 58,
|
||
borderRadius: 12,
|
||
objectFit: 'cover',
|
||
border: `1px solid ${selectedAgent.colors.accent}33`
|
||
}}
|
||
/>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 15, fontWeight: 800, color: '#111111' }}>{selectedAgent.name}</div>
|
||
<div style={{ fontSize: 12, color: '#6B7280' }}>{selectedAgent.role}</div>
|
||
<div style={{ fontSize: 11, color: selectedAgent.colors.accent, fontWeight: 700 }}>
|
||
当前档案已展开
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
border: `1px solid ${modelInfo.color}2e`,
|
||
background: modelInfo.bgColor,
|
||
borderRadius: 12,
|
||
padding: '10px 12px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 10
|
||
}}>
|
||
<LobeModelLogo
|
||
model={profile.model_name}
|
||
provider={profile.model_provider}
|
||
fallbackSrc={modelInfo.logoPath}
|
||
alt={modelInfo.provider}
|
||
size={26}
|
||
shape="circle"
|
||
type="color"
|
||
style={{ borderRadius: 999 }}
|
||
/>
|
||
<div style={{ display: 'grid', gap: 2 }}>
|
||
<div style={{ fontSize: 11, color: '#4B5563', fontWeight: 700 }}>模型</div>
|
||
<div style={{ fontSize: 12, color: '#111111', fontWeight: 800 }}>
|
||
{getShortModelName(profile.model_name)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'minmax(300px, 420px) minmax(0, 1fr)',
|
||
gap: 16,
|
||
alignItems: 'start',
|
||
minHeight: 0
|
||
}}>
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<div style={{
|
||
border: '1px solid #E5EAF1',
|
||
borderRadius: 12,
|
||
background: '#FCFDFE',
|
||
padding: 14,
|
||
display: 'grid',
|
||
gap: 10
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }}>
|
||
<div style={{ display: 'grid', gap: 2 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, color: '#111111' }}>技能</div>
|
||
<div style={{ fontSize: 10, color: '#6B7280', fontFamily: '"Courier New", monospace' }}>
|
||
已启用: {activeSkills.length} / 已安装: {installedSkills.length}
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsSkillPickerOpen(true)}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 6,
|
||
border: '1px solid #1565C0',
|
||
background: '#EFF6FF',
|
||
color: '#1565C0',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: 'pointer',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
aria-label="管理技能"
|
||
>
|
||
⚙ 技能管理
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
border: '1px solid #E5E7EB',
|
||
background: '#F8FAFC',
|
||
borderRadius: 8,
|
||
padding: '10px 12px',
|
||
display: 'grid',
|
||
gap: 10,
|
||
maxHeight: 520,
|
||
overflowY: 'auto'
|
||
}}>
|
||
{isAgentSkillsLoading ? (
|
||
<div style={{ fontSize: 11, color: '#666666', fontFamily: '"Courier New", monospace' }}>加载技能中...</div>
|
||
) : installedSkills.length === 0 ? (
|
||
<div style={{ fontSize: 11, color: '#666666', fontFamily: '"Courier New", monospace' }}>暂无技能</div>
|
||
) : installedSkills.map((skill) => {
|
||
const isEnabled = skill.status === 'enabled' || skill.status === 'active';
|
||
const saving = agentSkillsSavingKey === `${selectedAgentId}:${skill.skill_name}` || agentSkillsSavingKey === `${selectedAgentId}:${skill.skill_name}:content` || agentSkillsSavingKey === `${selectedAgentId}:${skill.skill_name}:delete` || agentSkillsSavingKey === `${selectedAgentId}:${skill.skill_name}:remove`;
|
||
const isExpanded = expandedSkillKey === skill.skill_name;
|
||
const detailKey = `${selectedAgentId}:${skill.skill_name}`;
|
||
const skillDetail = skillDetailsByName?.[detailKey] || null;
|
||
const skillDraft = localSkillDraftsByKey?.[detailKey] ?? '';
|
||
const isDetailLoading = skillDetailLoadingKey === detailKey;
|
||
const isLocalSkill = skill.source === 'local';
|
||
return (
|
||
<div
|
||
key={skill.skill_name}
|
||
style={{
|
||
display: 'grid',
|
||
gap: 7,
|
||
paddingBottom: 10,
|
||
borderBottom: '1px dashed #D7DEE7'
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'flex-start' }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (!isExpanded && !skillDetail && onSkillDetailRequest) {
|
||
onSkillDetailRequest(skill.skill_name);
|
||
}
|
||
setExpandedSkillKey((prev) => (prev === skill.skill_name ? null : skill.skill_name));
|
||
}}
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 0,
|
||
border: 'none',
|
||
background: 'transparent',
|
||
padding: 0,
|
||
textAlign: 'left',
|
||
cursor: 'pointer',
|
||
display: 'grid',
|
||
gap: 4
|
||
}}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<span style={{ fontSize: 12, color: '#6B7280', fontWeight: 700 }}>
|
||
{isExpanded ? '▾' : '▸'}
|
||
</span>
|
||
<span style={{ fontSize: 12, fontWeight: 700, color: '#111111' }}>
|
||
{skill.name || '未命名技能'}
|
||
</span>
|
||
<span style={{
|
||
padding: '2px 6px',
|
||
borderRadius: 999,
|
||
border: `1px solid ${isLocalSkill ? selectedAgent.colors.accent : '#D0D7DE'}`,
|
||
color: isLocalSkill ? selectedAgent.colors.accent : '#6B7280',
|
||
fontSize: 9,
|
||
fontWeight: 700
|
||
}}>
|
||
{isLocalSkill ? '本地' : '共享'}
|
||
</span>
|
||
</div>
|
||
<div style={{ fontSize: 11, color: '#4B5563', marginLeft: 20 }}>
|
||
{skill.description || '-'}
|
||
</div>
|
||
<div style={{ fontSize: 10, color: '#6B7280', marginLeft: 20 }}>
|
||
{isExpanded ? '点击收起详情' : '点击展开详情'}
|
||
</div>
|
||
</button>
|
||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSkillToggle(skill.skill_name, !isEnabled)}
|
||
disabled={!isConnected || saving}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 6,
|
||
border: `1px solid ${isEnabled ? '#C62828' : '#1565C0'}`,
|
||
background: isConnected && !saving ? (isEnabled ? '#FFF5F5' : '#EFF6FF') : '#E5E7EB',
|
||
color: isEnabled ? '#C62828' : '#1565C0',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !saving ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{saving ? '处理中' : isEnabled ? '禁用' : '启用'}
|
||
</button>
|
||
{isLocalSkill ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => onLocalSkillDelete(skill.skill_name)}
|
||
disabled={!isConnected || saving}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 6,
|
||
border: '1px solid #C62828',
|
||
background: isConnected && !saving ? '#FFF5F5' : '#E5E7EB',
|
||
color: '#C62828',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !saving ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{saving ? '处理中' : '删除'}
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={() => onRemoveSharedSkill(skill.skill_name)}
|
||
disabled={!isConnected || saving}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 6,
|
||
border: '1px solid #C62828',
|
||
background: isConnected && !saving ? '#FFF5F5' : '#E5E7EB',
|
||
color: '#C62828',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !saving ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{saving ? '处理中' : '移除'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{isExpanded && (
|
||
<div style={{
|
||
marginLeft: 20,
|
||
borderRadius: 8,
|
||
border: '1px solid #E5E7EB',
|
||
background: '#FFFFFF',
|
||
padding: '10px 12px',
|
||
display: 'grid',
|
||
gap: 8
|
||
}}>
|
||
<div style={{
|
||
fontSize: 11,
|
||
color: '#1F2937',
|
||
lineHeight: 1.6,
|
||
whiteSpace: 'pre-wrap',
|
||
fontFamily: '"Courier New", monospace'
|
||
}}>
|
||
{isDetailLoading
|
||
? '加载技能说明中...'
|
||
: (skillDetail?.content || '暂无更详细的技能说明')}
|
||
</div>
|
||
{isLocalSkill && !isDetailLoading && (
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
<div style={{ fontSize: 10, color: '#6B7280', fontWeight: 700 }}>
|
||
本地技能 SKILL.md
|
||
</div>
|
||
<textarea
|
||
id={`local-skill-${selectedAgentId}-${skill.skill_name}`}
|
||
name={`local_skill_${selectedAgentId}_${skill.skill_name}`}
|
||
aria-label={`${skill.skill_name} 本地技能内容`}
|
||
value={skillDraft}
|
||
onChange={(e) => onLocalSkillDraftChange(skill.skill_name, e.target.value)}
|
||
style={{
|
||
minHeight: 220,
|
||
resize: 'vertical',
|
||
borderRadius: 8,
|
||
border: '1px solid #D0D7DE',
|
||
background: '#FFFFFF',
|
||
color: '#111111',
|
||
padding: '10px 12px',
|
||
fontSize: 11,
|
||
lineHeight: 1.6,
|
||
fontFamily: '"Courier New", monospace'
|
||
}}
|
||
/>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<button
|
||
type="button"
|
||
onClick={() => onLocalSkillSave(skill.skill_name)}
|
||
disabled={!isConnected || saving || skillDraft === (skillDetail?.content || '')}
|
||
style={{
|
||
padding: '8px 12px',
|
||
borderRadius: 6,
|
||
border: '1px solid #1565C0',
|
||
background: isConnected && !saving && skillDraft !== (skillDetail?.content || '') ? '#0D47A1' : '#94A3B8',
|
||
color: '#FFFFFF',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !saving && skillDraft !== (skillDetail?.content || '') ? 'pointer' : 'not-allowed'
|
||
}}
|
||
>
|
||
{saving ? '保存中' : '保存本地技能'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{agentSkillsFeedback && (
|
||
<span style={{
|
||
color: agentSkillsFeedback.type === 'success' ? '#00C853' : '#FF5252',
|
||
fontSize: 11,
|
||
fontFamily: '"Courier New", monospace'
|
||
}}>
|
||
{agentSkillsFeedback.text}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gap: 10 }}>
|
||
<div style={{
|
||
border: '1px solid #E5EAF1',
|
||
borderRadius: 12,
|
||
background: '#FCFDFE',
|
||
padding: 14,
|
||
display: 'grid',
|
||
gap: 10
|
||
}}>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, color: '#111111' }}>工作区文件编辑</div>
|
||
<div style={{ fontSize: 11, color: '#6B7280' }}>
|
||
直接调整该交易员的人设、协作方式和长期记忆文件
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||
{editableFiles.map((filename) => {
|
||
const isActive = filename === selectedWorkspaceFile;
|
||
return (
|
||
<button
|
||
key={filename}
|
||
onClick={() => onWorkspaceFileChange(filename)}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 999,
|
||
border: `1px solid ${isActive ? selectedAgent.colors.accent : '#D0D7DE'}`,
|
||
background: isActive ? `${selectedAgent.colors.accent}12` : '#FFFFFF',
|
||
color: isActive ? selectedAgent.colors.accent : '#4B5563',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: 'pointer',
|
||
fontFamily: '"Courier New", monospace'
|
||
}}
|
||
>
|
||
{filename}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<textarea
|
||
id={`workspace-editor-${selectedAgentId}-${selectedWorkspaceFile || 'file'}`}
|
||
name={`workspace_editor_${selectedAgentId}_${selectedWorkspaceFile || 'file'}`}
|
||
aria-label={`编辑 ${selectedWorkspaceFile || '工作区文件'} 内容`}
|
||
value={workspaceDraftContent}
|
||
onChange={(e) => onWorkspaceDraftChange(e.target.value)}
|
||
placeholder={isWorkspaceFileLoading ? '加载中...' : '输入 markdown 内容'}
|
||
style={{
|
||
minHeight: 280,
|
||
resize: 'vertical',
|
||
borderRadius: 8,
|
||
border: '1px solid #D0D7DE',
|
||
background: '#FFFFFF',
|
||
color: '#111111',
|
||
padding: '12px 14px',
|
||
fontSize: 12,
|
||
lineHeight: 1.6,
|
||
fontFamily: '"Courier New", monospace'
|
||
}}
|
||
/>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
||
<span style={{ fontSize: 10, color: '#6B7280', fontFamily: '"Courier New", monospace' }}>
|
||
当前文件: {selectedWorkspaceFile}
|
||
</span>
|
||
<button
|
||
onClick={onWorkspaceFileSave}
|
||
disabled={!isConnected || isWorkspaceFileLoading || workspaceFileSavingKey !== null || workspaceDraftContent === workspaceFileContent}
|
||
style={{
|
||
padding: '9px 14px',
|
||
borderRadius: 6,
|
||
border: '1px solid #1565C0',
|
||
background: isConnected && !isWorkspaceFileLoading && workspaceFileSavingKey === null && workspaceDraftContent !== workspaceFileContent ? '#0D47A1' : '#94A3B8',
|
||
color: '#FFFFFF',
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !isWorkspaceFileLoading && workspaceFileSavingKey === null && workspaceDraftContent !== workspaceFileContent ? 'pointer' : 'not-allowed'
|
||
}}
|
||
>
|
||
{workspaceFileSavingKey ? '保存中' : '保存文件'}
|
||
</button>
|
||
</div>
|
||
|
||
{workspaceFileFeedback && (
|
||
<span style={{
|
||
color: workspaceFileFeedback.type === 'success' ? '#00C853' : '#FF5252',
|
||
fontSize: 11,
|
||
fontFamily: '"Courier New", monospace'
|
||
}}>
|
||
{workspaceFileFeedback.text}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{isSkillPickerOpen && createPortal((
|
||
<div
|
||
onClick={() => setIsSkillPickerOpen(false)}
|
||
style={{
|
||
position: 'fixed',
|
||
inset: 0,
|
||
background: 'rgba(15, 23, 42, 0.28)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 24,
|
||
zIndex: 9998
|
||
}}
|
||
>
|
||
<div
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{
|
||
width: 'min(760px, 92vw)',
|
||
maxHeight: '80vh',
|
||
overflowY: 'auto',
|
||
borderRadius: 16,
|
||
border: '1px solid #D9E0E7',
|
||
background: '#FFFFFF',
|
||
boxShadow: '0 24px 60px rgba(15, 23, 42, 0.18)',
|
||
padding: 18,
|
||
paddingTop: 22,
|
||
display: 'grid',
|
||
gap: 16,
|
||
position: 'relative',
|
||
zIndex: 9999
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsSkillPickerOpen(false)}
|
||
style={{
|
||
position: 'absolute',
|
||
top: 16,
|
||
right: 16,
|
||
border: '1px solid #D0D7DE',
|
||
background: '#FFFFFF',
|
||
borderRadius: 999,
|
||
width: 40,
|
||
height: 40,
|
||
fontSize: 16,
|
||
lineHeight: 1,
|
||
color: '#111111',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
boxShadow: '0 4px 12px rgba(15, 23, 42, 0.08)'
|
||
}}
|
||
aria-label="关闭技能管理"
|
||
>
|
||
×
|
||
</button>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', paddingRight: 56 }}>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ fontSize: 14, fontWeight: 800, color: '#111111' }}>技能管理</div>
|
||
<div style={{ fontSize: 11, color: '#6B7280' }}>
|
||
为 {selectedAgent.name} 添加共享技能，或创建本地技能
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
border: '1px solid #E5EAF1',
|
||
borderRadius: 12,
|
||
background: '#FCFDFE',
|
||
padding: 14,
|
||
display: 'grid',
|
||
gap: 10
|
||
}}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, color: '#111111' }}>创建本地技能</div>
|
||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||
<label htmlFor="new-local-skill-name" style={srOnlyStyle}>
|
||
输入本地技能名称
|
||
</label>
|
||
<input
|
||
id="new-local-skill-name"
|
||
name="new_local_skill_name"
|
||
aria-label="输入本地技能名称"
|
||
value={newLocalSkillName}
|
||
onChange={(e) => setNewLocalSkillName(e.target.value)}
|
||
placeholder="输入技能名，例如 event_playbook"
|
||
style={{
|
||
flex: 1,
|
||
padding: '8px 10px',
|
||
borderRadius: 8,
|
||
border: '1px solid #D0D7DE',
|
||
background: '#FFFFFF',
|
||
color: '#111111',
|
||
fontSize: 11,
|
||
fontFamily: '"Courier New", monospace'
|
||
}}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (onCreateLocalSkill) {
|
||
onCreateLocalSkill(newLocalSkillName);
|
||
setNewLocalSkillName('');
|
||
}
|
||
}}
|
||
disabled={!isConnected || !newLocalSkillName.trim()}
|
||
style={{
|
||
padding: '8px 12px',
|
||
borderRadius: 8,
|
||
border: '1px solid #1565C0',
|
||
background: isConnected && newLocalSkillName.trim() ? '#EFF6FF' : '#E5E7EB',
|
||
color: '#1565C0',
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
cursor: isConnected && newLocalSkillName.trim() ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
创建
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
border: '1px solid #E5EAF1',
|
||
borderRadius: 12,
|
||
background: '#FCFDFE',
|
||
padding: 14,
|
||
display: 'grid',
|
||
gap: 10
|
||
}}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, color: '#111111' }}>上传外部技能包</div>
|
||
<div style={{ fontSize: 11, color: '#6B7280' }}>
|
||
支持上传 .zip（包内需包含一个技能目录及 SKILL.md）
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<label htmlFor="external-skill-zip" style={srOnlyStyle}>
|
||
上传外部技能 zip 包
|
||
</label>
|
||
<input
|
||
id="external-skill-zip"
|
||
name="external_skill_zip"
|
||
aria-label="上传外部技能 zip 包"
|
||
type="file"
|
||
accept=".zip,application/zip"
|
||
onChange={async (e) => {
|
||
const file = e.target.files?.[0] || null;
|
||
setExternalSkillFile(file);
|
||
if (!file) {
|
||
setExternalSkillCheck({ type: null, text: '' });
|
||
return;
|
||
}
|
||
await validateExternalSkillZip(file);
|
||
}}
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 220,
|
||
padding: '6px 8px',
|
||
borderRadius: 8,
|
||
border: '1px solid #D0D7DE',
|
||
background: '#FFFFFF',
|
||
color: '#111111',
|
||
fontSize: 11
|
||
}}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={async () => {
|
||
if (!onUploadExternalSkill || !externalSkillFile) {
|
||
return;
|
||
}
|
||
const valid = await validateExternalSkillZip(externalSkillFile);
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
await onUploadExternalSkill(externalSkillFile);
|
||
setExternalSkillFile(null);
|
||
setExternalSkillCheck({ type: null, text: '' });
|
||
}}
|
||
disabled={!isConnected || !externalSkillFile || isExternalSkillChecking || externalSkillCheck.type === 'error'}
|
||
style={{
|
||
padding: '8px 12px',
|
||
borderRadius: 8,
|
||
border: '1px solid #1565C0',
|
||
background: isConnected && externalSkillFile && !isExternalSkillChecking && externalSkillCheck.type !== 'error' ? '#EFF6FF' : '#E5E7EB',
|
||
color: '#1565C0',
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
cursor: isConnected && externalSkillFile && !isExternalSkillChecking && externalSkillCheck.type !== 'error' ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{isExternalSkillChecking ? '预检中...' : '上传并安装'}
|
||
</button>
|
||
</div>
|
||
{externalSkillCheck.text ? (
|
||
<div
|
||
style={{
|
||
fontSize: 11,
|
||
color: externalSkillCheck.type === 'success' ? '#00C853' : '#FF5252',
|
||
fontFamily: '"Courier New", monospace'
|
||
}}
|
||
>
|
||
{externalSkillCheck.text}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div style={{
|
||
border: '1px solid #E5EAF1',
|
||
borderRadius: 12,
|
||
background: '#FCFDFE',
|
||
padding: 14,
|
||
display: 'grid',
|
||
gap: 10
|
||
}}>
|
||
<div style={{ fontSize: 12, fontWeight: 800, color: '#111111' }}>添加共享技能</div>
|
||
<div style={{
|
||
border: '1px solid #E5E7EB',
|
||
background: '#FFFFFF',
|
||
borderRadius: 8,
|
||
padding: '10px 12px',
|
||
display: 'grid',
|
||
gap: 10,
|
||
maxHeight: 360,
|
||
overflowY: 'auto'
|
||
}}>
|
||
{availableSkills.length === 0 ? (
|
||
<div style={{ fontSize: 11, color: '#6B7280' }}>没有可添加的共享技能</div>
|
||
) : availableSkills.map((skill) => {
|
||
const saving = agentSkillsSavingKey === `${selectedAgentId}:${skill.skill_name}`;
|
||
return (
|
||
<div
|
||
key={skill.skill_name}
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
gap: 12,
|
||
alignItems: 'flex-start',
|
||
paddingBottom: 10,
|
||
borderBottom: '1px dashed #D7DEE7'
|
||
}}
|
||
>
|
||
<div style={{ display: 'grid', gap: 4 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<span style={{ fontSize: 12, fontWeight: 700, color: '#111111' }}>
|
||
{skill.name || skill.skill_name}
|
||
</span>
|
||
<span style={{
|
||
padding: '2px 6px',
|
||
borderRadius: 999,
|
||
border: '1px solid #D0D7DE',
|
||
color: '#6B7280',
|
||
fontSize: 9,
|
||
fontWeight: 700
|
||
}}>
|
||
共享
|
||
</span>
|
||
</div>
|
||
<div style={{ fontSize: 11, color: '#4B5563' }}>
|
||
{skill.description || '-'}
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSkillToggle(skill.skill_name, true)}
|
||
disabled={!isConnected || saving}
|
||
style={{
|
||
padding: '7px 10px',
|
||
borderRadius: 6,
|
||
border: '1px solid #1565C0',
|
||
background: isConnected && !saving ? '#EFF6FF' : '#E5E7EB',
|
||
color: '#1565C0',
|
||
fontSize: 10,
|
||
fontWeight: 700,
|
||
cursor: isConnected && !saving ? 'pointer' : 'not-allowed',
|
||
whiteSpace: 'nowrap'
|
||
}}
|
||
>
|
||
{saving ? '处理中' : '添加'}
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
), document.body)}
|
||
</div>
|
||
);
|
||
}
|