Leopoldadmin/leocrm
1
0
Fork 0
Code Issues 363 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: drag&drop treeview, flat chat UI, activity indicator, fixed toolbar registration

Browse Source
This commit is contained in:
Agent Zero
2026-07-17 17:09:26 +02:00
parent 70b8a66fd4
commit f2d624720f
3 changed files with 105 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ai/ChatWindow.tsx
+37 -15
View File
@@ -25,19 +25,33 @@ function MessageContent({ content, role }: { content: string; role: string }) {
return <div className="whitespace-pre-wrap break-words">{content}</div>;
}
return (
<div className="prose prose-sm max-w-none break-words">
<div className="prose prose-sm max-w-none break-words [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1 [&_table]:text-xs [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_pre]:text-xs [&_code]:text-xs">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
</div>
);
}
function ActivityIndicator({ status }: { status: string | null }) {
if (!status) return null;
return (
<div className="flex items-center gap-2 px-4 py-2 text-xs text-secondary-500">
<div className="flex gap-1">
<span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '0ms' }} />
<span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '150ms' }} />
<span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '300ms' }} />
</div>
<span>{status}</span>
</div>
);
}
export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindowProps) {
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
const [input, setInput] = useState('');
const [isStreaming, setIsStreaming] = useState(false);
const [streamingContent, setStreamingContent] = useState('');
const [toolStatus, setToolStatus] = useState<string | null>(null);
const [activity, setActivity] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [uploadingFile, setUploadingFile] = useState(false);
const scrollRef = useRef<HTMLDivElement>(null);
@@ -55,7 +69,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, streamingContent]);
}, [messages, streamingContent, activity]);
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
@@ -80,7 +94,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
setInput('');
setIsStreaming(true);
setStreamingContent('');
setToolStatus(null);
setActivity('Denke nach...');
setError(null);
const userMsg: ChatMessage = { id: 'temp-' + Date.now(), session_id: sessionId, role: 'user', content, tokens: 0, model_used: '' };
@@ -93,17 +107,19 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
if (event.type === 'token' && event.content) {
accumulated += event.content;
setStreamingContent(accumulated);
setActivity(null);
} else if (event.type === 'tool_calls' && event.tools) {
setToolStatus(`Tools: ${event.tools.join(', ')}`);
setActivity(`Rufe Tool auf: ${event.tools.join(', ')}`);
} else if (event.type === 'tool_result' && event.tool) {
setToolStatus(`Tool '${event.tool}' ausgefuehrt`);
setActivity(`Tool '${event.tool}' ausgeführt`);
} else if (event.type === 'done') {
setToolStatus(null);
setActivity(null);
const msgs = await fetchMessages(sessionId);
setMessages(msgs);
setStreamingContent('');
} else if (event.type === 'error') {
setError(event.content || 'Unknown error');
setActivity(null);
}
}
} catch (e) {
@@ -111,7 +127,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
} finally {
setIsStreaming(false);
setStreamingContent('');
setToolStatus(null);
setActivity(null);
inputRef.current?.focus();
}
};
@@ -140,24 +156,30 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
<div className="flex items-center justify-center h-full text-secondary-400 text-sm">Starte eine Konversation...</div>
)}
{messages.map((msg) => (
<div key={msg.id} className={clsx('mb-4 flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
<div className={clsx('max-w-[80%] rounded-lg px-4 py-2 text-sm', msg.role === 'user' ? 'bg-primary-600 text-white' : 'bg-secondary-100 text-secondary-900')}>
<div key={msg.id} className="mb-6">
<div className={clsx('text-xs font-medium mb-1', msg.role === 'user' ? 'text-primary-600' : 'text-secondary-400')}>
{msg.role === 'user' ? 'Du' : 'KI'}
</div>
<div className="text-sm text-secondary-900">
<MessageContent content={msg.content} role={msg.role} />
{msg.tool_calls && msg.tool_calls.length > 0 && (
<div className="mt-2 text-xs opacity-70">Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}</div>
<div className="mt-2 text-xs text-secondary-400 border-l-2 border-secondary-200 pl-2">
⚙️ Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}
</div>
)}
</div>
</div>
))}
{streamingContent && (
<div className="mb-4 flex justify-start">
<div className="max-w-[80%] rounded-lg px-4 py-2 text-sm bg-secondary-100 text-secondary-900">
<div className="mb-6">
<div className="text-xs font-medium mb-1 text-secondary-400">KI</div>
<div className="text-sm text-secondary-900">
<MessageContent content={streamingContent} role="assistant" />
</div>
</div>
)}
{toolStatus && <div className="mb-2 text-center text-xs text-secondary-500">⚙️ {toolStatus}</div>}
{error && <div className="mb-4 flex justify-center"><div className="rounded-lg px-4 py-2 text-sm bg-red-50 text-red-700">{error}</div></div>}
<ActivityIndicator status={activity} />
{error && <div className="mb-4 text-sm text-red-600">{error}</div>}
</div>
<div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
<div className="flex items-end gap-2">