mirror of
https://github.com/mblanke/StrikePackageGPT.git
synced 2026-03-01 14:20:21 -05:00
Add backend modules and frontend components for StrikePackageGPT expansion
Co-authored-by: mblanke <9078342+mblanke@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
424
services/dashboard/HelpChat.jsx
Normal file
424
services/dashboard/HelpChat.jsx
Normal file
@@ -0,0 +1,424 @@
|
||||
/**
|
||||
* HelpChat Component
|
||||
* Persistent side-panel chat with LLM-powered help
|
||||
* Context-aware and maintains conversation history
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
const HelpChat = ({
|
||||
isOpen = false,
|
||||
onClose,
|
||||
currentPage = 'dashboard',
|
||||
context = {}
|
||||
}) => {
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [inputText, setInputText] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [sessionId] = useState(() => `session-${Date.now()}`);
|
||||
const messagesEndRef = useRef(null);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && messages.length === 0) {
|
||||
// Add welcome message
|
||||
setMessages([{
|
||||
role: 'assistant',
|
||||
content: `👋 Hi! I'm your AI assistant for StrikePackageGPT. I can help you with:
|
||||
|
||||
• Understanding security tools and commands
|
||||
• Interpreting scan results
|
||||
• Writing nmap, nikto, and other tool commands
|
||||
• Navigating the platform
|
||||
• Security best practices
|
||||
|
||||
What would you like help with?`,
|
||||
timestamp: new Date()
|
||||
}]);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (!inputText.trim() || isLoading) return;
|
||||
|
||||
const userMessage = {
|
||||
role: 'user',
|
||||
content: inputText,
|
||||
timestamp: new Date()
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, userMessage]);
|
||||
setInputText('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Build context string
|
||||
const contextString = `User is on ${currentPage} page. ${JSON.stringify(context)}`;
|
||||
|
||||
const response = await fetch('/api/llm/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
message: inputText,
|
||||
session_id: sessionId,
|
||||
context: contextString
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get response');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const assistantMessage = {
|
||||
role: 'assistant',
|
||||
content: data.message || data.content || 'I apologize, I had trouble processing that request.',
|
||||
timestamp: new Date()
|
||||
};
|
||||
|
||||
setMessages(prev => [...prev, assistantMessage]);
|
||||
} catch (error) {
|
||||
console.error('Error sending message:', error);
|
||||
setMessages(prev => [...prev, {
|
||||
role: 'assistant',
|
||||
content: '❌ Sorry, I encountered an error. Please try again.',
|
||||
timestamp: new Date(),
|
||||
isError: true
|
||||
}]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Could show a toast notification here
|
||||
console.log('Copied to clipboard');
|
||||
});
|
||||
};
|
||||
|
||||
const clearChat = () => {
|
||||
if (window.confirm('Clear all chat history?')) {
|
||||
setMessages([{
|
||||
role: 'assistant',
|
||||
content: 'Chat history cleared. How can I help you?',
|
||||
timestamp: new Date()
|
||||
}]);
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessage = (message, index) => {
|
||||
const isUser = message.role === 'user';
|
||||
const isError = message.isError;
|
||||
|
||||
// Check if message contains code blocks
|
||||
const hasCode = message.content.includes('```');
|
||||
let renderedContent;
|
||||
|
||||
if (hasCode) {
|
||||
// Simple code block rendering
|
||||
const parts = message.content.split(/(```[\s\S]*?```)/g);
|
||||
renderedContent = parts.map((part, i) => {
|
||||
if (part.startsWith('```')) {
|
||||
const code = part.slice(3, -3).trim();
|
||||
const [lang, ...codeLines] = code.split('\n');
|
||||
const codeText = codeLines.join('\n');
|
||||
|
||||
return (
|
||||
<div key={i} style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '10px',
|
||||
borderRadius: '4px',
|
||||
margin: '10px 0',
|
||||
position: 'relative',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '13px',
|
||||
overflowX: 'auto'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#666',
|
||||
marginBottom: '5px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<span>{lang || 'code'}</span>
|
||||
<button
|
||||
onClick={() => copyToClipboard(codeText)}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
fontSize: '11px',
|
||||
border: 'none',
|
||||
backgroundColor: '#ddd',
|
||||
borderRadius: '3px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
<pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
|
||||
<code>{codeText}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div key={i} style={{ whiteSpace: 'pre-wrap' }}>{part}</div>;
|
||||
});
|
||||
} else {
|
||||
renderedContent = <div style={{ whiteSpace: 'pre-wrap' }}>{message.content}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: isUser ? 'flex-end' : 'flex-start',
|
||||
marginBottom: '15px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: '80%',
|
||||
padding: '12px 16px',
|
||||
borderRadius: '12px',
|
||||
backgroundColor: isError ? '#FCE4E4' : isUser ? '#3498DB' : '#ECF0F1',
|
||||
color: isError ? '#E74C3C' : isUser ? 'white' : '#2C3E50',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.5',
|
||||
boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
{renderedContent}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
color: isUser ? 'rgba(255,255,255,0.7)' : '#95A5A6',
|
||||
marginTop: '5px',
|
||||
textAlign: 'right'
|
||||
}}
|
||||
>
|
||||
{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const quickActions = [
|
||||
{ label: '📝 Write nmap command', prompt: 'How do I write an nmap command to scan a network?' },
|
||||
{ label: '🔍 Interpret results', prompt: 'Help me understand these scan results' },
|
||||
{ label: '🛠️ Use sqlmap', prompt: 'How do I use sqlmap to test for SQL injection?' },
|
||||
{ label: '📊 Generate report', prompt: 'How do I generate a security assessment report?' }
|
||||
];
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '400px',
|
||||
backgroundColor: 'white',
|
||||
boxShadow: '-4px 0 15px rgba(0,0,0,0.1)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 9998
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#3498DB',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderBottom: '2px solid #2980B9'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 5px 0', fontSize: '18px' }}>💬 AI Assistant</h3>
|
||||
<div style={{ fontSize: '12px', opacity: 0.9 }}>
|
||||
Ask me anything about security testing
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button
|
||||
onClick={clearChat}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px',
|
||||
padding: '5px'
|
||||
}}
|
||||
title="Clear chat"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
fontSize: '24px',
|
||||
padding: '0'
|
||||
}}
|
||||
title="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages area */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
padding: '20px',
|
||||
backgroundColor: '#FAFAFA'
|
||||
}}
|
||||
>
|
||||
{messages.map((message, index) => renderMessage(message, index))}
|
||||
|
||||
{isLoading && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#95A5A6' }}>
|
||||
<div>⏳</div>
|
||||
<div>Thinking...</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Quick actions */}
|
||||
{messages.length <= 1 && (
|
||||
<div
|
||||
style={{
|
||||
padding: '15px',
|
||||
backgroundColor: '#F8F9FA',
|
||||
borderTop: '1px solid #ddd'
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '10px' }}>
|
||||
Quick actions:
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||||
{quickActions.map((action, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => {
|
||||
setInputText(action.prompt);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid #ddd',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.backgroundColor = '#E8F4F8';
|
||||
e.target.style.borderColor = '#3498DB';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.backgroundColor = 'white';
|
||||
e.target.style.borderColor = '#ddd';
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input area */}
|
||||
<div
|
||||
style={{
|
||||
padding: '15px',
|
||||
borderTop: '2px solid #ECF0F1',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Ask a question... (Enter to send)"
|
||||
disabled={isLoading}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
fontSize: '14px',
|
||||
resize: 'none',
|
||||
minHeight: '60px',
|
||||
maxHeight: '120px',
|
||||
fontFamily: 'inherit'
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSendMessage}
|
||||
disabled={!inputText.trim() || isLoading}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
border: 'none',
|
||||
backgroundColor: !inputText.trim() || isLoading ? '#95A5A6' : '#3498DB',
|
||||
color: 'white',
|
||||
borderRadius: '8px',
|
||||
cursor: !inputText.trim() || isLoading ? 'not-allowed' : 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
{isLoading ? '⏳' : '📤'}
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ fontSize: '11px', color: '#95A5A6', marginTop: '8px' }}>
|
||||
Shift+Enter for new line
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpChat;
|
||||
Reference in New Issue
Block a user