1086 lines
42 KiB
TypeScript
1086 lines
42 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { AlertCircle, ChevronDown, ChevronRight, FileText, FolderOpen, Loader2, MessageSquareText, PackagePlus, Save, Wrench, X, Zap } from 'lucide-react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
import { useExpertAuthBootstrap } from '../../hooks';
|
|
import MarkdownRenderer from '../MarkdownRenderer';
|
|
import AgentConversationList, { type ConversationMessage, type ConversationStep } from './AgentConversationList';
|
|
import ChatInputComposer from './ChatInputComposer';
|
|
import SkillCreatorThreadSidebar from './SkillCreatorThreadSidebar';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
|
|
|
|
const MOCK_CONVERSATION_MESSAGES: ConversationMessage[] = [];
|
|
const MIN_CHAT_WIDTH = 360;
|
|
const MIN_FILE_SIDEBAR_WIDTH = 420;
|
|
const DEFAULT_FILE_SIDEBAR_WIDTH = 560;
|
|
const THREAD_STORAGE_KEY = 'skill_creator_thread_id';
|
|
|
|
interface FileNode {
|
|
name: string;
|
|
path: string;
|
|
type: 'file' | 'directory';
|
|
size: number | null;
|
|
extension: string | null;
|
|
children: FileNode[] | null;
|
|
}
|
|
|
|
interface HistoryMessageApiItem {
|
|
created_at: string;
|
|
id: number;
|
|
role: 'user' | 'assistant';
|
|
content: unknown;
|
|
thread_id: number;
|
|
}
|
|
|
|
const formatFileSize = (size: number | null) => {
|
|
if (!size) return '';
|
|
if (size < 1024) return `${size} B`;
|
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
|
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
|
};
|
|
|
|
const getFileLanguage = (extension: string | null) => {
|
|
const normalized = extension?.replace('.', '').toLowerCase();
|
|
if (!normalized) return 'TEXT';
|
|
return normalized.toUpperCase();
|
|
};
|
|
|
|
const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;
|
|
|
|
const normalizeHistoryContent = (content: unknown) => {
|
|
const steps: ConversationStep[] = [];
|
|
const thinkings: Array<{ duration: number; content: string }> = [];
|
|
const texts: string[] = [];
|
|
|
|
const visit = (value: unknown) => {
|
|
if (typeof value === 'string') {
|
|
if (value.trim()) texts.push(value);
|
|
return;
|
|
}
|
|
|
|
if (Array.isArray(value)) {
|
|
value.forEach(visit);
|
|
return;
|
|
}
|
|
|
|
if (!isRecord(value)) return;
|
|
|
|
const type = typeof value.type === 'string' ? value.type : '';
|
|
const text = typeof value.text === 'string' ? value.text : '';
|
|
|
|
if (type === 'thinking-steps' && Array.isArray(value.steps)) {
|
|
value.steps.forEach((stepItem) => {
|
|
if (!isRecord(stepItem)) return;
|
|
const title = typeof stepItem.title === 'string' ? stepItem.title : '处理中';
|
|
const status = stepItem.status === 'completed' ? 'done' : 'processing';
|
|
const items = Array.isArray(stepItem.items) ? stepItem.items.filter((item): item is string => typeof item === 'string') : [];
|
|
steps.push({
|
|
text: title,
|
|
subText: items[0]?.replace('正在处理: ', ''),
|
|
status,
|
|
});
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (type === 'reasoning' && text) {
|
|
const duration = typeof value.duration === 'number' ? value.duration / 1000 : 0;
|
|
thinkings.push({ duration, content: text });
|
|
return;
|
|
}
|
|
|
|
if (text) {
|
|
texts.push(text);
|
|
return;
|
|
}
|
|
|
|
if ('content' in value) {
|
|
visit(value.content);
|
|
}
|
|
};
|
|
|
|
visit(content);
|
|
|
|
return {
|
|
content: texts.join('\n\n').trim(),
|
|
steps,
|
|
thinkings,
|
|
};
|
|
};
|
|
|
|
const toConversationMessage = (message: HistoryMessageApiItem): ConversationMessage => {
|
|
const normalized = normalizeHistoryContent(message.content);
|
|
|
|
return {
|
|
id: String(message.id),
|
|
role: message.role,
|
|
content: normalized.content,
|
|
steps: normalized.steps,
|
|
thinkings: normalized.thinkings,
|
|
toolCalls: [],
|
|
};
|
|
};
|
|
|
|
interface FileTreeItemProps {
|
|
node: FileNode;
|
|
depth?: number;
|
|
isDarkMode: boolean;
|
|
expandedPaths: Set<string>;
|
|
selectedPath: string | null;
|
|
onToggle: (path: string) => void;
|
|
onSelect: (node: FileNode) => void;
|
|
}
|
|
|
|
function FileTreeItem({
|
|
node,
|
|
depth = 0,
|
|
isDarkMode,
|
|
expandedPaths,
|
|
selectedPath,
|
|
onToggle,
|
|
onSelect,
|
|
}: FileTreeItemProps) {
|
|
const isFolder = node.extension === null;
|
|
const isExpanded = expandedPaths.has(node.path);
|
|
const isSelected = selectedPath === node.path;
|
|
const hasChildren = Boolean(node.children?.length);
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onClick={() => (isFolder ? onToggle(node.path) : onSelect(node))}
|
|
className={`group flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-sm transition-all duration-200 ${
|
|
isSelected
|
|
? isDarkMode
|
|
? 'bg-blue-500/20 text-blue-200 ring-1 ring-blue-400/40 shadow-sm'
|
|
: 'bg-blue-50 text-blue-700 ring-1 ring-blue-200 shadow-sm'
|
|
: isDarkMode
|
|
? 'text-slate-300 hover:bg-slate-800 hover:text-slate-100'
|
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-950'
|
|
}`}
|
|
style={{ paddingLeft: `${10 + depth * 18}px` }}
|
|
title={node.path}
|
|
>
|
|
<span className="flex w-4 shrink-0 justify-center">
|
|
{isFolder && hasChildren ? (
|
|
isExpanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />
|
|
) : null}
|
|
</span>
|
|
<span
|
|
className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
|
|
isFolder
|
|
? isDarkMode ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-600'
|
|
: isDarkMode ? 'bg-slate-700 text-slate-300' : 'bg-white text-gray-500 shadow-sm ring-1 ring-gray-200'
|
|
}`}
|
|
>
|
|
{isFolder ? <FolderOpen className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate font-medium">{node.name}</span>
|
|
{!isFolder && node.size !== null && (
|
|
<span className={`shrink-0 text-[11px] ${isDarkMode ? 'text-slate-500' : 'text-gray-400'}`}>{formatFileSize(node.size)}</span>
|
|
)}
|
|
</button>
|
|
{isFolder && isExpanded && hasChildren && (
|
|
<div className="mt-1 space-y-1">
|
|
{node.children!.map((child) => (
|
|
<FileTreeItem
|
|
key={child.path}
|
|
node={child}
|
|
depth={depth + 1}
|
|
isDarkMode={isDarkMode}
|
|
expandedPaths={expandedPaths}
|
|
selectedPath={selectedPath}
|
|
onToggle={onToggle}
|
|
onSelect={onSelect}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SkillCreatorPage() {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const { theme } = useTheme();
|
|
const { authedFetch } = useExpertAuthBootstrap();
|
|
const isDarkMode = theme === 'dark';
|
|
const queryThreadId = searchParams.get('id');
|
|
const [currentThreadId, setCurrentThreadId] = useState(() => queryThreadId || localStorage.getItem(THREAD_STORAGE_KEY) || '');
|
|
const [messages, setMessages] = useState<ConversationMessage[]>(MOCK_CONVERSATION_MESSAGES);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [isStreaming, setIsStreaming] = useState(false);
|
|
const [isConnecting, setIsConnecting] = useState(false);
|
|
const [isThreadSidebarOpen, setIsThreadSidebarOpen] = useState(false);
|
|
const [fileList, setFileList] = useState<FileNode[]>([]);
|
|
const [fileListThreadId, setFileListThreadId] = useState<number | null>(null);
|
|
const [isFileSidebarOpen, setIsFileSidebarOpen] = useState(false);
|
|
const [fileSidebarWidth, setFileSidebarWidth] = useState(DEFAULT_FILE_SIDEBAR_WIDTH);
|
|
const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set());
|
|
const [selectedFile, setSelectedFile] = useState<FileNode | null>(null);
|
|
const [filePreviewContent, setFilePreviewContent] = useState('');
|
|
const [isFilePreviewLoading, setIsFilePreviewLoading] = useState(false);
|
|
const [filePreviewError, setFilePreviewError] = useState('');
|
|
const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
|
|
const [skillName, setSkillName] = useState('');
|
|
const [skillDesc, setSkillDesc] = useState('');
|
|
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
|
const thinkingStartRef = useRef<number>(0);
|
|
const abortControllerRef = useRef<AbortController | null>(null);
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
const nextThreadId = queryThreadId || localStorage.getItem(THREAD_STORAGE_KEY) || '';
|
|
setCurrentThreadId((prev) => (prev === nextThreadId ? prev : nextThreadId));
|
|
}, [queryThreadId]);
|
|
|
|
useEffect(() => {
|
|
if (!scrollContainerRef.current) return;
|
|
scrollContainerRef.current.scrollTo({
|
|
top: scrollContainerRef.current.scrollHeight,
|
|
behavior: 'smooth',
|
|
});
|
|
}, [messages]);
|
|
|
|
const syncThreadId = (nextThreadId: string) => {
|
|
setCurrentThreadId(nextThreadId);
|
|
setSearchParams((prev) => {
|
|
const nextParams = new URLSearchParams(prev);
|
|
if (nextThreadId) nextParams.set('id', nextThreadId);
|
|
else nextParams.delete('id');
|
|
return nextParams;
|
|
});
|
|
|
|
if (nextThreadId) {
|
|
localStorage.setItem(THREAD_STORAGE_KEY, nextThreadId);
|
|
} else {
|
|
localStorage.removeItem(THREAD_STORAGE_KEY);
|
|
}
|
|
};
|
|
|
|
const fetchThreadFiles = async (id: number) => {
|
|
if (!id) {
|
|
setFileList([]);
|
|
setFileListThreadId(null);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const filesRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/files/all`, {
|
|
method: 'GET',
|
|
});
|
|
|
|
if (!filesRes.ok) {
|
|
setFileList([]);
|
|
setFileListThreadId(null);
|
|
return;
|
|
}
|
|
|
|
const filesData: unknown = await filesRes.json();
|
|
setFileList(Array.isArray(filesData) ? (filesData as FileNode[]) : []);
|
|
setFileListThreadId(id);
|
|
} catch (error) {
|
|
console.error('获取技能文件列表失败', error);
|
|
setFileList([]);
|
|
setFileListThreadId(null);
|
|
}
|
|
};
|
|
|
|
const fetchThreadMessages = async (id: number) => {
|
|
setIsConnecting(true);
|
|
try {
|
|
const response = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/messages`, {
|
|
method: 'GET',
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`获取会话消息失败: ${response.status}`);
|
|
}
|
|
|
|
const data = (await response.json()) as HistoryMessageApiItem[];
|
|
const nextMessages = Array.isArray(data) ? data.map(toConversationMessage) : [];
|
|
setMessages(nextMessages);
|
|
} catch (error) {
|
|
console.error('获取技能创建会话消息失败', error);
|
|
setMessages([]);
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const id = Number(currentThreadId);
|
|
|
|
setSelectedFile(null);
|
|
setFilePreviewContent('');
|
|
setFilePreviewError('');
|
|
setExpandedPaths(new Set());
|
|
|
|
if (!id) {
|
|
setMessages([]);
|
|
setFileList([]);
|
|
setFileListThreadId(null);
|
|
return;
|
|
}
|
|
|
|
void fetchThreadMessages(id);
|
|
void fetchThreadFiles(id);
|
|
}, [currentThreadId]);
|
|
|
|
const emptyChange = () => {
|
|
navigate('/skills-workshop')
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!fileList.length) return;
|
|
setExpandedPaths((prev) => {
|
|
if (prev.size > 0) return prev;
|
|
const firstLevelFolders = fileList.filter((node) => node.extension === null).map((node) => node.path);
|
|
return new Set(firstLevelFolders);
|
|
});
|
|
}, [fileList]);
|
|
|
|
const clearLoadingStates = () => {
|
|
setMessages((prev) =>
|
|
prev.map((msg) => {
|
|
if (msg.role === 'assistant') {
|
|
return {
|
|
...msg,
|
|
steps: [],
|
|
thinkings: [],
|
|
toolCalls: [],
|
|
};
|
|
}
|
|
return msg;
|
|
}),
|
|
);
|
|
};
|
|
|
|
const handleToggleFolder = (path: string) => {
|
|
setExpandedPaths((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(path)) next.delete(path);
|
|
else next.add(path);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSelectFile = async (file: FileNode) => {
|
|
if (!fileListThreadId) {
|
|
setFilePreviewError('当前文件列表还没有关联到可预览的会话');
|
|
return;
|
|
}
|
|
|
|
setSelectedFile(file);
|
|
setFilePreviewContent('');
|
|
setFilePreviewError('');
|
|
setIsFilePreviewLoading(true);
|
|
|
|
try {
|
|
const previewRes = await authedFetch(
|
|
`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${fileListThreadId}/files/preview?path=${encodeURIComponent(file.path)}`,
|
|
{ method: 'GET' },
|
|
);
|
|
|
|
if (!previewRes.ok) {
|
|
setFilePreviewError(`文件预览获取失败，状态码 ${previewRes.status}`);
|
|
return;
|
|
}
|
|
|
|
const contentType = previewRes.headers.get('content-type') ?? '';
|
|
if (contentType.includes('application/json')) {
|
|
const data: unknown = await previewRes.json();
|
|
if (typeof data === 'string') {
|
|
setFilePreviewContent(data);
|
|
} else if (data && typeof data === 'object' && 'content' in data) {
|
|
setFilePreviewContent(String((data as { content: unknown }).content ?? ''));
|
|
} else {
|
|
setFilePreviewContent(JSON.stringify(data, null, 2));
|
|
}
|
|
} else {
|
|
setFilePreviewContent(await previewRes.text());
|
|
}
|
|
} catch (error) {
|
|
console.error('获取技能文件预览失败', error);
|
|
setFilePreviewError('文件预览获取失败，请稍后重试');
|
|
} finally {
|
|
setIsFilePreviewLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
const startX = event.clientX;
|
|
const startWidth = fileSidebarWidth;
|
|
|
|
const handleMouseMove = (moveEvent: MouseEvent) => {
|
|
const containerWidth = window.innerWidth - 160;
|
|
const maxWidth = Math.max(MIN_FILE_SIDEBAR_WIDTH, containerWidth - MIN_CHAT_WIDTH);
|
|
const nextWidth = Math.min(Math.max(startWidth - (moveEvent.clientX - startX), MIN_FILE_SIDEBAR_WIDTH), maxWidth);
|
|
setFileSidebarWidth(nextWidth);
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
window.removeEventListener('mousemove', handleMouseMove);
|
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.body.style.cursor = 'col-resize';
|
|
document.body.style.userSelect = 'none';
|
|
window.addEventListener('mousemove', handleMouseMove);
|
|
window.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
const handleSendMessage = async () => {
|
|
const userQuery = inputValue.trim();
|
|
if (!userQuery || !currentThreadId || isStreaming) return;
|
|
|
|
setInputValue('');
|
|
setIsStreaming(true);
|
|
setIsConnecting(true);
|
|
abortControllerRef.current = new AbortController();
|
|
|
|
const userMessage: ConversationMessage = {
|
|
id: `user-${Date.now()}`,
|
|
role: 'user',
|
|
content: userQuery,
|
|
};
|
|
|
|
const assistantId = `assistant-${Date.now()}`;
|
|
setMessages((prev) => [
|
|
...prev,
|
|
userMessage,
|
|
{ id: assistantId, role: 'assistant', content: '', steps: [], thinkings: [], toolCalls: [] },
|
|
]);
|
|
|
|
try {
|
|
const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/skills-agent`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
chat_id: Number(currentThreadId),
|
|
user_query: userQuery,
|
|
}),
|
|
signal: abortControllerRef.current.signal,
|
|
});
|
|
|
|
if (!streamRes.ok || !streamRes.body) {
|
|
console.error('技能对话流式接口失败', streamRes.status, streamRes.statusText);
|
|
return;
|
|
}
|
|
|
|
const reader = streamRes.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
|
|
const thinkingStepsAcc: Array<{ id: string; title: string; status: string; items: string[] }> = [];
|
|
const reasoningsAcc: Array<{ text: string; duration: number }> = [];
|
|
let assistantTextAcc = '';
|
|
let reasoningStartAt = 0;
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
setIsConnecting(false);
|
|
buffer += decoder.decode(value, { stream: true });
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() ?? '';
|
|
|
|
for (const line of lines) {
|
|
if (!line.startsWith('data: ')) continue;
|
|
const raw = line.slice(6).trim();
|
|
if (raw === '[DONE]') break;
|
|
if (!raw) continue;
|
|
|
|
let event: {
|
|
type: string;
|
|
data?: { id: string; title: string; status: string; items?: string[] };
|
|
id?: string;
|
|
delta?: string;
|
|
toolCallId?: string;
|
|
toolName?: string;
|
|
input?: Record<string, unknown>;
|
|
output?: { result?: string } | unknown;
|
|
} | null = null;
|
|
|
|
try {
|
|
event = JSON.parse(raw) as typeof event;
|
|
} catch {
|
|
continue;
|
|
}
|
|
|
|
if (!event) continue;
|
|
|
|
switch (event.type) {
|
|
case 'data-thinking-step': {
|
|
const step = event.data!;
|
|
const stepData = {
|
|
id: step.id,
|
|
title: step.title,
|
|
status: step.status,
|
|
items: step.items ?? [],
|
|
};
|
|
const existingIdx = thinkingStepsAcc.findIndex((s) => s.id === step.id);
|
|
if (existingIdx >= 0) thinkingStepsAcc[existingIdx] = stepData;
|
|
else thinkingStepsAcc.push(stepData);
|
|
break;
|
|
}
|
|
case 'reasoning-start': {
|
|
reasoningStartAt = Date.now();
|
|
reasoningsAcc.push({ text: '', duration: 0 });
|
|
break;
|
|
}
|
|
case 'reasoning-delta': {
|
|
if (reasoningsAcc.length === 0) {
|
|
reasoningsAcc.push({ text: event.delta ?? '', duration: 0 });
|
|
} else {
|
|
reasoningsAcc[reasoningsAcc.length - 1].text += event.delta ?? '';
|
|
}
|
|
break;
|
|
}
|
|
case 'reasoning-end': {
|
|
if (reasoningsAcc.length > 0) {
|
|
reasoningsAcc[reasoningsAcc.length - 1].duration = Date.now() - reasoningStartAt;
|
|
}
|
|
break;
|
|
}
|
|
case 'text-delta': {
|
|
assistantTextAcc += event.delta ?? '';
|
|
break;
|
|
}
|
|
}
|
|
|
|
setMessages((prev) =>
|
|
prev.map((msg) => {
|
|
if (msg.id !== assistantId) return msg;
|
|
|
|
switch (event!.type) {
|
|
case 'data-thinking-step': {
|
|
const step = event!.data!;
|
|
const newStep = {
|
|
text: step.title,
|
|
subText: step.items?.[0]?.replace('正在处理: ', '') ?? undefined,
|
|
status: (step.status === 'completed' ? 'done' : 'processing') as 'done' | 'processing',
|
|
};
|
|
const steps = [...(msg.steps ?? [])];
|
|
const stepIdx = steps.findIndex((item) => item.text === step.title);
|
|
if (stepIdx >= 0) steps[stepIdx] = newStep;
|
|
else steps.push(newStep);
|
|
return { ...msg, steps };
|
|
}
|
|
case 'reasoning-start': {
|
|
thinkingStartRef.current = Date.now();
|
|
return { ...msg, thinkings: [...(msg.thinkings ?? []), { duration: 0, content: '' }] };
|
|
}
|
|
case 'reasoning-delta': {
|
|
const thinkings = [...(msg.thinkings ?? [])];
|
|
if (thinkings.length === 0) {
|
|
thinkings.push({ duration: 0, content: event!.delta ?? '' });
|
|
} else {
|
|
const last = thinkings[thinkings.length - 1];
|
|
thinkings[thinkings.length - 1] = { ...last, content: last.content + (event!.delta ?? '') };
|
|
}
|
|
return { ...msg, thinkings };
|
|
}
|
|
case 'reasoning-end': {
|
|
const duration = (Date.now() - thinkingStartRef.current) / 1000;
|
|
const thinkings = [...(msg.thinkings ?? [])];
|
|
if (thinkings.length > 0) {
|
|
thinkings[thinkings.length - 1] = { ...thinkings[thinkings.length - 1], duration };
|
|
}
|
|
return { ...msg, thinkings };
|
|
}
|
|
case 'tool-input-available': {
|
|
const toolCalls = [...(msg.toolCalls ?? [])];
|
|
const tcIdx = toolCalls.findIndex((toolCall) => toolCall.id === event!.toolCallId);
|
|
const newToolCall = { id: event!.toolCallId!, name: event!.toolName!, input: event!.input };
|
|
if (tcIdx >= 0) toolCalls[tcIdx] = { ...toolCalls[tcIdx], ...newToolCall };
|
|
else toolCalls.push(newToolCall);
|
|
return { ...msg, toolCalls };
|
|
}
|
|
case 'tool-output-available': {
|
|
const toolCalls = [...(msg.toolCalls ?? [])];
|
|
const tcIdx = toolCalls.findIndex((toolCall) => toolCall.id === event!.toolCallId);
|
|
if (tcIdx >= 0) {
|
|
const rawOutput = event!.output;
|
|
const outputStr =
|
|
typeof rawOutput === 'object' && rawOutput !== null && 'result' in rawOutput
|
|
? String((rawOutput as { result: unknown }).result)
|
|
: JSON.stringify(rawOutput);
|
|
toolCalls[tcIdx] = { ...toolCalls[tcIdx], output: outputStr };
|
|
}
|
|
return { ...msg, toolCalls };
|
|
}
|
|
case 'text-delta': {
|
|
return { ...msg, content: msg.content + (event!.delta ?? '') };
|
|
}
|
|
default:
|
|
return msg;
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
}
|
|
|
|
const persistedContent: Array<Record<string, unknown>> = [];
|
|
if (thinkingStepsAcc.length > 0) {
|
|
persistedContent.push({ type: 'thinking-steps', steps: thinkingStepsAcc });
|
|
}
|
|
for (const reasoning of reasoningsAcc) {
|
|
if (reasoning.text) {
|
|
persistedContent.push({ type: 'reasoning', text: reasoning.text, duration: reasoning.duration });
|
|
}
|
|
}
|
|
if (assistantTextAcc) {
|
|
persistedContent.push({ type: 'text', text: assistantTextAcc });
|
|
}
|
|
|
|
if (persistedContent.length > 0) {
|
|
const persistRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
thread_id: Number(currentThreadId),
|
|
role: 'assistant',
|
|
content: persistedContent,
|
|
}),
|
|
});
|
|
if (!persistRes.ok) {
|
|
console.error('保存助手消息失败:', persistRes.status, persistRes.statusText);
|
|
}
|
|
}
|
|
|
|
await fetchThreadFiles(Number(currentThreadId));
|
|
} catch (streamError) {
|
|
if (streamError instanceof Error && streamError.name === 'AbortError') {
|
|
console.log('技能对话已手动停止');
|
|
} else {
|
|
console.error('技能对话异常', streamError);
|
|
}
|
|
} finally {
|
|
setIsStreaming(false);
|
|
setIsConnecting(false);
|
|
abortControllerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const handleStopStream = () => {
|
|
if (abortControllerRef.current) {
|
|
abortControllerRef.current.abort();
|
|
abortControllerRef.current = null;
|
|
setIsStreaming(false);
|
|
setIsConnecting(false);
|
|
clearLoadingStates();
|
|
}
|
|
};
|
|
|
|
const handleUploadFile = async (file: File) => {
|
|
if (!currentThreadId) return;
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await authedFetch(
|
|
`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${currentThreadId}/files/upload`,
|
|
{
|
|
method: 'POST',
|
|
body: formData,
|
|
},
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`上传失败: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
await fetchThreadFiles(Number(currentThreadId));
|
|
} catch (error) {
|
|
console.error('上传技能会话文件失败', error);
|
|
}
|
|
};
|
|
|
|
const handleThreadSelect = (threadId: string) => {
|
|
if (abortControllerRef.current) {
|
|
abortControllerRef.current.abort();
|
|
abortControllerRef.current = null;
|
|
setIsStreaming(false);
|
|
setIsConnecting(false);
|
|
clearLoadingStates();
|
|
}
|
|
|
|
syncThreadId(threadId);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
@keyframes skillCreatorBreathing {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.55;
|
|
}
|
|
}
|
|
@keyframes skillCreatorBreathingGlow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
|
|
}
|
|
}
|
|
.skill-creator-breathing {
|
|
animation: skillCreatorBreathing 1.5s ease-in-out infinite, skillCreatorBreathingGlow 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes skillCreatorDotBounce {
|
|
0%, 80%, 100% {
|
|
transform: translateY(0);
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: translateY(-4px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.skill-creator-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 9999px;
|
|
background-color: currentColor;
|
|
display: inline-block;
|
|
animation: skillCreatorDotBounce 1.2s ease-in-out infinite;
|
|
}
|
|
.skill-creator-dot:nth-child(2) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
.skill-creator-dot:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
@keyframes skillCreatorMarquee {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
.skill-creator-shimmer-text {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: var(--marquee-base);
|
|
}
|
|
.skill-creator-shimmer-text::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image: linear-gradient(
|
|
100deg,
|
|
transparent 0%,
|
|
transparent 42%,
|
|
var(--marquee-highlight) 50%,
|
|
transparent 58%,
|
|
transparent 100%
|
|
);
|
|
background-size: 220% 100%;
|
|
background-repeat: no-repeat;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: skillCreatorMarquee 2.8s linear infinite;
|
|
}
|
|
.skill-creator-shimmer-light {
|
|
--marquee-base: #6b7280;
|
|
--marquee-highlight: #111827;
|
|
}
|
|
.skill-creator-shimmer-dark {
|
|
--marquee-base: #94a3b8;
|
|
--marquee-highlight: #f8fafc;
|
|
}
|
|
`}</style>
|
|
<div className={`h-[calc(100vh-120px)] overflow-hidden rounded-2xl border ${isDarkMode ? 'border-slate-700 bg-slate-900/40' : 'border-gray-200 bg-white'}`}>
|
|
<div className={`flex h-14 items-center justify-between border-b px-5 ${isDarkMode ? 'border-slate-700' : 'border-gray-200'}`}>
|
|
{/* <div>
|
|
<div className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>skill creator</div>
|
|
{currentThreadId && (
|
|
<div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>会话 ID: {currentThreadId}</div>
|
|
)}
|
|
</div> */}
|
|
<button
|
|
type="button"
|
|
onClick={emptyChange}
|
|
className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
|
|
isDarkMode
|
|
? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
|
|
: 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
|
|
}`}
|
|
title="打开聊天记录"
|
|
>
|
|
返回
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsThreadSidebarOpen((prev) => !prev)}
|
|
className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
|
|
isDarkMode
|
|
? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
|
|
: 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
|
|
}`}
|
|
title="打开聊天记录"
|
|
>
|
|
<MessageSquareText className="h-4 w-4" />
|
|
聊天记录
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsFileSidebarOpen(true)}
|
|
className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/50"
|
|
title="文件"
|
|
>
|
|
<FolderOpen className="h-4 w-4 shrink-0" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsSaveModalOpen(true)}
|
|
className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-emerald-500 px-3 text-sm text-white transition hover:bg-emerald-600"
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
保存技能
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex h-[calc(100%-56px)] min-h-0 overflow-hidden">
|
|
<SkillCreatorThreadSidebar
|
|
authedFetch={authedFetch}
|
|
currentThreadId={currentThreadId}
|
|
isDarkMode={isDarkMode}
|
|
isOpen={isThreadSidebarOpen}
|
|
isBusy={isStreaming}
|
|
onClose={() => setIsThreadSidebarOpen(false)}
|
|
onThreadSelect={handleThreadSelect}
|
|
/>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<div ref={scrollContainerRef} className="flex-1 overflow-y-auto px-6 py-5">
|
|
{messages.length === 0 && !isConnecting ? (
|
|
<div className="flex h-full flex-col items-center justify-center px-4">
|
|
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 via-purple-500 to-indigo-600 shadow-lg shadow-violet-500/30 ring-1 ring-white/20">
|
|
<Zap className="h-7 w-7 text-white" />
|
|
</div>
|
|
<h2 className={`mb-3 text-xl font-bold tracking-tight ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
|
|
skill-creator
|
|
</h2>
|
|
<p className={`mb-8 max-w-[480px] text-center text-sm leading-relaxed ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
专注于 Agent Skills 的创建、重构和生产化落地的专家代理，适合用来创建新技能、优化 SKILL.md、补充脚本素材，或整理技能交付流程。
|
|
</p>
|
|
<div className="grid w-full max-w-[560px] grid-cols-2 gap-3">
|
|
{[
|
|
{ icon: <PackagePlus className="h-4 w-4 shrink-0" />, label: '创建一个新技能', prompt: '我想创建一个新技能，请帮我开始。' },
|
|
{ icon: <FileText className="h-4 w-4 shrink-0" />, label: '优化 SKILL.md 文档', prompt: '请帮我优化当前技能的 SKILL.md 文档质量。' },
|
|
{ icon: <Wrench className="h-4 w-4 shrink-0" />, label: '添加可复用脚本', prompt: '请帮我为当前技能添加可复用的脚本或参考资源。' },
|
|
{ icon: <Save className="h-4 w-4 shrink-0" />, label: '打包并发布技能', prompt: '请帮我配置验证和打包流程，准备发布 .skill 产物。' },
|
|
].map(({ icon, label, prompt }) => (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
disabled={!currentThreadId}
|
|
onClick={() => setInputValue(prompt)}
|
|
className={`group flex items-center gap-3 rounded-xl border px-4 py-3.5 text-left text-sm font-medium transition-all duration-200 ${
|
|
isDarkMode
|
|
? 'border-slate-700 bg-slate-900/60 text-slate-300 hover:border-violet-500/60 hover:bg-slate-800 hover:text-slate-100 disabled:cursor-not-allowed disabled:opacity-40'
|
|
: 'border-gray-200 bg-gray-50 text-gray-700 hover:border-violet-400 hover:bg-violet-50 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-40'
|
|
}`}
|
|
>
|
|
<span className={`transition-colors ${isDarkMode ? 'text-violet-400 group-hover:text-violet-300' : 'text-violet-500 group-hover:text-violet-600'}`}>
|
|
{icon}
|
|
</span>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<AgentConversationList messages={messages} isConnecting={isConnecting} />
|
|
)}
|
|
</div>
|
|
<ChatInputComposer
|
|
value={inputValue}
|
|
onChange={setInputValue}
|
|
onSend={() => void handleSendMessage()}
|
|
onStop={handleStopStream}
|
|
onUploadFile={(file) => void handleUploadFile(file)}
|
|
disabled={!currentThreadId}
|
|
isSending={isStreaming}
|
|
isDarkMode={isDarkMode}
|
|
showBorderTop
|
|
placeholder={!currentThreadId ? '请先从聊天记录中选择或新建一个会话' : isStreaming ? '正在生成中...' : '输入你的问题...'}
|
|
/>
|
|
</div>
|
|
|
|
{isFileSidebarOpen && (
|
|
<aside
|
|
className={`relative flex min-h-0 shrink-0 border-l shadow-2xl ${
|
|
isDarkMode ? 'border-slate-700 bg-slate-950 text-slate-100 shadow-black/30' : 'border-gray-200 bg-white text-gray-900 shadow-gray-200/70'
|
|
}`}
|
|
style={{ width: fileSidebarWidth }}
|
|
>
|
|
<div
|
|
onMouseDown={handleResizeStart}
|
|
className={`absolute left-0 top-0 z-20 h-full w-2 -translate-x-1/2 cursor-col-resize transition-colors ${
|
|
isDarkMode ? 'hover:bg-blue-400/40' : 'hover:bg-blue-500/25'
|
|
}`}
|
|
title="拖拽调整文件侧边栏宽度"
|
|
/>
|
|
|
|
<div className={`flex w-[46%] min-w-[220px] flex-col border-r ${isDarkMode ? 'border-slate-800' : 'border-gray-200'}`}>
|
|
<div className={`flex items-center justify-between border-b px-4 py-3 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
|
|
<div>
|
|
<h3 className="text-sm font-semibold">文件</h3>
|
|
<p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>{fileList.length} 个根节点</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
|
{fileList.length > 0 ? (
|
|
<div className="space-y-1">
|
|
{fileList.map((node) => (
|
|
<FileTreeItem
|
|
key={node.path}
|
|
node={node}
|
|
isDarkMode={isDarkMode}
|
|
expandedPaths={expandedPaths}
|
|
selectedPath={selectedFile?.path ?? null}
|
|
onToggle={handleToggleFolder}
|
|
onSelect={(file) => void handleSelectFile(file)}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className={`rounded-2xl border border-dashed px-4 py-8 text-center text-sm ${isDarkMode ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'}`}>
|
|
暂无文件
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<div className={`flex items-center justify-between gap-3 border-b px-5 py-3 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
|
|
<div className="min-w-0">
|
|
<h3 className="truncate text-sm font-semibold">{selectedFile?.name ?? '文件预览'}</h3>
|
|
<p className={`mt-0.5 truncate text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>
|
|
{selectedFile ? selectedFile.path : '选择左侧文件查看内容'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsFileSidebarOpen(false)}
|
|
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition ${
|
|
isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-900'
|
|
}`}
|
|
title="关闭文件侧边栏"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-auto p-5">
|
|
{!selectedFile ? (
|
|
<div className={`flex h-full flex-col items-center justify-center rounded-3xl border border-dashed text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/40 text-slate-500' : 'border-gray-200 bg-gray-50 text-gray-400'}`}>
|
|
<FileText className="mb-3 h-10 w-10 opacity-60" />
|
|
<p className="text-sm font-medium">请选择一个文件</p>
|
|
<p className="mt-1 text-xs">文件内容会显示在这里</p>
|
|
</div>
|
|
) : isFilePreviewLoading ? (
|
|
<div className={`flex h-full items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
正在加载文件内容...
|
|
</div>
|
|
) : filePreviewError ? (
|
|
<div className={`flex h-full flex-col items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-red-300' : 'text-red-500'}`}>
|
|
<AlertCircle className="h-8 w-8" />
|
|
{filePreviewError}
|
|
</div>
|
|
) : (
|
|
<div className={`overflow-hidden rounded-2xl border ${isDarkMode ? 'border-slate-800 bg-slate-900' : 'border-gray-200 bg-white'}`}>
|
|
<div className={`flex items-center justify-between border-b px-4 py-2.5 ${isDarkMode ? 'border-slate-800 bg-slate-950/70' : 'border-gray-100 bg-gray-50'}`}>
|
|
<span className={`text-xs font-semibold tracking-wide ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>{getFileLanguage(selectedFile.extension)}</span>
|
|
<span className={`text-xs ${isDarkMode ? 'text-slate-600' : 'text-gray-400'}`}>{formatFileSize(selectedFile.size)}</span>
|
|
</div>
|
|
<div className={`p-5 text-sm leading-7 ${isDarkMode ? 'text-slate-200' : 'text-gray-700'}`}>
|
|
<MarkdownRenderer content={filePreviewContent || '文件内容为空'} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* <DraggableModal
|
|
open={isSaveModalOpen}
|
|
onClose={() => setIsSaveModalOpen(false)}
|
|
title="保存技能"
|
|
width={520}
|
|
body={
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<label className={`mb-1.5 block text-xs font-medium ${isDarkMode ? 'text-slate-300' : 'text-gray-600'}`}>
|
|
技能名称
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={skillName}
|
|
onChange={(e) => setSkillName(e.target.value)}
|
|
placeholder="例如：自动写周报"
|
|
className={`h-9 w-full rounded-lg border px-3 text-sm outline-none transition ${
|
|
isDarkMode
|
|
? 'border-slate-700 bg-slate-900 text-slate-100 placeholder:text-slate-500 focus:border-blue-500'
|
|
: 'border-gray-300 bg-white text-gray-800 placeholder:text-gray-400 focus:border-blue-500'
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className={`mb-1.5 block text-xs font-medium ${isDarkMode ? 'text-slate-300' : 'text-gray-600'}`}>
|
|
描述
|
|
</label>
|
|
<textarea
|
|
value={skillDesc}
|
|
onChange={(e) => setSkillDesc(e.target.value)}
|
|
placeholder="简单描述一下这个技能的用途..."
|
|
rows={4}
|
|
className={`w-full resize-none rounded-lg border px-3 py-2 text-sm outline-none transition ${
|
|
isDarkMode
|
|
? 'border-slate-700 bg-slate-900 text-slate-100 placeholder:text-slate-500 focus:border-blue-500'
|
|
: 'border-gray-300 bg-white text-gray-800 placeholder:text-gray-400 focus:border-blue-500'
|
|
}`}
|
|
/>
|
|
</div>
|
|
<p className={`text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>
|
|
提示：按住顶部标题栏可拖动弹窗，按 ESC 或点击遮罩关闭。
|
|
</p>
|
|
</div>
|
|
}
|
|
confirmText="保存"
|
|
cancelText="取消"
|
|
onConfirm={() => {
|
|
console.log('保存技能：', { skillName, skillDesc });
|
|
setIsSaveModalOpen(false);
|
|
}}
|
|
/> */}
|
|
</>
|
|
);
|
|
}
|